diff --git a/Loginpage_Component/index.html b/Loginpage_Component/index.html
new file mode 100644
index 00000000..a480c1d9
--- /dev/null
+++ b/Loginpage_Component/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="loginPage.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
+    
+
+    
+    <title>Login</title>
+</head>
+<body>
+    <div class="h-screen bg-gray-500 px-3 py-5">
+    
+        <div class="max-w-md mx-auto bg-white p-3 rounded">
+         
+                
+                <div class="px-3 py-1">
+                    <div class="text-center">
+                        <h1 class="text-2xl mb-4">Sign In</h1>
+                    </div>
+                    
+                    
+                    
+                    <div class="relative mb-3">
+                        <span class="ml-2 bg-white px-2 absolute -top-3 text-sm">Email</span>
+                        <input class="transition duration-500 border h-12 rounded w-full px-2 mb-2">
+                    </div>
+                    
+                    <div class="relative mb-1">
+                        <span class="ml-2 bg-white px-2 absolute -top-3 text-sm">Password</span>
+                        <input class="transition duration-500 border h-12 rounded w-full px-2 mb-2">
+                    </div>
+                    
+                    <div class="text-right mb-3">
+                        <a href="#" class="cursor-pointer text-blue-500 hover:text-blue-700">Forgot password?</a>
+                    </div>
+                    
+                    <button class="h-12 w-full hover:bg-blue-800 focus:outline-none bg-gray-500 rounded text-white mb-3">Sign In</button>
+                    <div class="mt-3">
+                        <hr class="h-3.5 ">
+                        <div class="relative flex justify-center">
+                            <span class="absolute px-4 rounded -top-4 left-30 bg-white">OR </span>
+                        </div>
+                    </div>
+                    <button class="h-12 w-full hover:bg-blue-800 focus:outline-none bg-red-700 rounded text-white mb-3">Sign In using Google</button>
+
+                </div>
+                
+            
+            
+        </div>
+        
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Loginpage_Component/readme.md b/Loginpage_Component/readme.md
new file mode 100644
index 00000000..1713a4df
--- /dev/null
+++ b/Loginpage_Component/readme.md
@@ -0,0 +1 @@
+# Component_Login_page
