diff --git a/Login Form Web/Login 4/component.html b/Login Form Web/Login 4/component.html
new file mode 100644
index 0000000..c547a33
--- /dev/null
+++ b/Login Form Web/Login 4/component.html	
@@ -0,0 +1,44 @@
+<!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">
+    <!-- Font Awesome icones CDN Link -->
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
+    <title>Sign Up</title>
+    <!-- Linking css code file -->
+    <link rel="stylesheet" href="style1.css">
+</head>
+<body>
+    <div>
+        <dive>
+            <h1>Sign in</h1>
+            <h5>Welcome to our - favourite music</h5>
+            <form action="" method="get">
+             <div>
+                <p><label for="email">Email</label></p>
+                <input type="email" id="email" name="email" required >
+             </div>
+             <div>
+                <p><label for="userNmae">Password</label></p>
+                <input type="password" id="password" required >
+             </div>
+             <button type="button" id="btn">Sign in Now</button>
+             <p>Not a register user? <a href="signUp.html">Sign Up</a></p>
+            </form>
+            <div></div>  
+            <!-- Social media icones -->
+            <div>
+               <h6><strong>Or connect with - </strong></h6>
+               <div><i></i></div>
+               <div><i></i></div>
+               <div><i></i></i></div>
+            </div>
+        </dive>
+        <div> 
+            <img src="https://www.hmablogs.com/wp-content/uploads/2021/07/musicImg.png" alt="Music Image">
+        </div>
+    </div>
+</body>
+</html>
