diff --git a/public/img/bg-image.jpg b/public/img/bg-image.jpg
new file mode 100644
index 0000000..91994d2
Binary files /dev/null and b/public/img/bg-image.jpg differ
diff --git a/src/pages/login copy.astro b/src/pages/login copy.astro
new file mode 100644
index 0000000..21b0073
--- /dev/null
+++ b/src/pages/login copy.astro	
@@ -0,0 +1,46 @@
+
+<main>
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+        <section class="container mx-auto max-w-lg bg-[url(/img/hps_logo.png)] rounded-2xl">
+            <div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
+                <img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
+                <form action="" class="p-6">
+                    <input id="email" name="email" type="text" placeholder="User ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
+                    <input id="password" name="password" type="password" placeholder="Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-6" required/>
+                    <button onclick="myFunction(event)" class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Login</button>
+                </form>
+                <p class="">Not Registerd? <a href="/sign-up" class="text-[#FFFFFF] font-bold">Register Now</a></p>
+            </div>
+        </section>
+    </div>
+</main>
+<script is:inline>
+    function myFunction(event){
+        event.preventDefault();
+        let emailId = document.getElementById('email').value;
+        let password = document.getElementById('password').value;
+        let userData = {
+            email : emailId,
+            password : password
+        }
+        fetch(`https://game-du.teachertrainingkolkata.in/auth/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+        })
+    }
+</script>
+<style>
+    .content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/login.astro b/src/pages/login.astro
index a334891..21b0073 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -1,6 +1,6 @@
 
 <main>
-    <div class="content">
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
         <section class="container mx-auto max-w-lg bg-[url(/img/hps_logo.png)] rounded-2xl">
             <div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
                 <img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
diff --git a/src/pages/login1.astro b/src/pages/login1.astro
new file mode 100644
index 0000000..3faaf6a
--- /dev/null
+++ b/src/pages/login1.astro
@@ -0,0 +1,34 @@
+<main>
+    <div class="bg-[url(/img/bg-image.jpg)] bg-cover bg-center h-screen">
+        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            <div class="container mx-auto px-4 max-w-lg py-6 bg-[#00000080] rounded-lg">
+                <div class="flex flex-col space-y-3 ">
+                    <p class="text-2xl font-bold text-[#FFF] ">Welcome Back</p>
+                    <p class="text-lg text-[#fff]">Enter your email and password to access your account</p>
+                    <div class="mt-10 flex flex-col">
+                        <label class="text-[#FFF]" for="email">Email:</label>
+                        <input
+                        class="border-2 border-[#fff] text-[#FFF] rounded-md bg-transparent p-2"
+                        placeholder="Email Id" 
+                        type="text">
+                    </div>
+                    <div class="flex flex-col">
+                        <label class="text-[#FFF]" for="password">Password:</label>
+                        <input 
+                        placeholder="Password"
+                        class="border-2 border-[#fff] text-[#FFF] rounded-md bg-transparent p-2"
+                        type="password">
+                    </div>
+                    <div class="flex flex-row justify-between">
+                        <label class="text-[#FFF]" for="remember">
+                            <input type="checkbox" name="remember" id="remember">
+                            Remember Password
+                        </label>
+                        <a class="text-[#FFF]" href="">Forgot Password</a>
+                    </div>
+                    <button class="bg-[#FFFFFF80] p-1.5 rounded-md">Login</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
\ No newline at end of file