diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..84736f737 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,24 +4,93 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>My form exercise</title>
-    <meta name="description" content="" />
+    <meta name="description" content="this is a form to select color and size of shirt" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
-    <header>
-      <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-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
-    </footer>
+    <div id="wall">
+      <header>
+        <h1>Product Pick</h1>
+      </header>
+      <main>
+        <form>
+          <!-- write your html here-->
+          <!--What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
+  What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
+  What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
+  What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL-->
+          <div>
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name" pattern=".*\S.*\S.*" required title="Please enter at least two non-space characters">
+          </div>
+          <div>
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" required>
+          </div>
+          <div>
+            <h2>COLOR</h2>
+            <div>
+              <input type="radio" name="color" id="purple" value="purple" required> 
+              <label for="purple">Purple</label> 
+            </div>
+            <div>
+              <input type="radio" name="color" id="blue" value="blue" required> 
+              <label for="blue">Blue</label>
+            </div>
+            <div>
+              <input type="radio" name="color" id="wine" value="wine" required>
+              <label for="wine">Wine</label> 
+            </div>
+          </div>
+          <div>
+            <h2>SIZE</h2>
+            <div>
+              <label>
+            <input type="radio" name="size" value="xs" required>
+                XS
+              </label>
+            </div>
+            <div>
+              <label>
+            <input type="radio" name="size" value="s" required>
+                S
+              </label> 
+            </div>
+            <div>
+              <label>
+            <input type="radio" name="size" value="m" required>
+                M
+              </label>
+            </div>
+            <div>
+              <label>
+            <input type="radio" name="size" value="l" required>
+                L
+              </label>
+            </div>
+            <div>
+              <label>
+            <input type="radio" name="size" value="xl" required>
+                XL
+              </label> 
+            </div>
+            <div>
+              <label>
+            <input type="radio" name="size" value="xxl" required>
+                XXL
+              </label>
+            </div>
+            <div>
+              <button type="submit">Submit</button>
+            </div>
+          </div>
+        </form>
+      </main>
+      <footer>
+        <!-- change to your name-->
+        <p>Rizqah Popoola</p>
+      </footer>
+    </div>
   </body>
 </html>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
new file mode 100644
index 000000000..b60feb9f3
--- /dev/null
+++ b/Form-Controls/styles.css
@@ -0,0 +1,27 @@
+h1{
+        color:rgb(127, 24, 175);
+        font-family:serif;
+        font-size:60px;
+        text-align: left;
+        font-style: oblique;
+        }
+    label{
+      font-size: 22px;
+      color: rgb(29, 45, 133);
+    }
+    h2{
+      font-size: 25px;
+      color: rgb(127, 24, 175);;
+    }
+    #wall{
+       background-color:rgb(160, 243, 243);
+       padding:6px 6px;
+       border: 6px solid black;
+       max-width:70%;
+       margin: 3px auto;
+    }
+    footer{
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 20px;
+      text-align: center;
+    }
\ No newline at end of file
