diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..2b481e3cf 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,109 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <header>
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>My form exercise</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- this is a google font link -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+
+
+  <!-- This is a css link -->
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body class="font">
+
+  <div class="form">
+
+    <!-- This is a header section -->
+    <header class="hd">
       <h1>Product Pick</h1>
     </header>
+
+
+
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+
+        <fieldset>
+          <div class="all">
+
+            <!-- This is a customer name input -->
+
+            <div>
+              <label class="blk" for="nam">First Name* </label>
+              <input type="text" id="nam" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
+            </div>
+
+            <br>
+
+            <div>
+              <label class="blk" for="nams">Last Name* </label>
+              <input type="text" id="nams" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
+            </div>
+
+            <br>
+
+
+            <!-- This is a customer email input -->
+            <div>
+              <label class="blk" for="mail">Email* </label>
+              <input type="email" id="mail" placeholder="Enter Your Email" name="Email" required>
+            </div>
+
+            <br>
+
+            <!-- This is a color section -->
+
+            <div class="AllClr">
+              <label class="blk" for="clr"> T-shirt Color*</label>
+              <select name="Color" id="clr" required>
+                <option value="">-- Select a color -- </option>
+                <option value="red">Red</option>
+                <option value="blue"> Blue</option>
+                <option value="yellow">Yellow</option>
+              </select>
+            </div>
+
+            <br>
+
+
+            <!-- This is a size option -->
+
+            <div>
+              <label class="blk" for="sz"> T-shirt Size*</label>
+              <select name="Size" id="sz" required>
+                <option value="">-- Select a color -- </option>
+                <option value="xs">XS</option>
+                <option value="s">S</option>
+                <option value="m">M</option>
+                <option value="l">L</option>
+                <option value="xl">XL</option>
+                <option value="xxl">XXL</option>
+              </select>
+
+              <button class="btn" type="submit"> Submit </button>
+            </div>
+
+          </div>
+        </fieldset>
+
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Sayeed Hussain </p>
     </footer>
-  </body>
-</html>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..9b83f9608
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,82 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+
+/* this is a google font */
+.font {
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+
+
+/* This is a whole form's class */
+.form{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh; 
+}
+
+
+select{
+    width: 212px;
+    height: 35px;
+    border-radius: 5px;
+    border: solid 1px black;
+    padding: 5px;
+}
+
+fieldset{
+    width: 314px;
+    height: 470px;
+    border-radius: 5px;
+}
+
+
+/* all input fields position class */
+.all{
+    margin-top: 15px;
+    margin-left: 20px;
+}
+
+
+input{
+    height: 35px;
+    width: 210px;
+    border-radius: 5px;
+    border: solid 1px black;
+    padding: 10px;
+}
+
+
+/* This is whole font weight class name */
+.blk{
+    display: block;
+    font-weight: 500;
+    margin-bottom: 6px;
+   
+}
+
+/* This is header class name */
+.hd{
+  margin-right: 5%;
+  margin-bottom: 5px;
+}
+
+.btn{
+    display: block;
+    margin-top: 10px;
+    width: 90px;
+    height: 40px;
+    border-radius: 10px;
+    border: none;
+    background-color:rgb(42, 104, 236);
+    color: white;
+    font-weight: bold;
+}
\ No newline at end of file
