diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..50cd912d7 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,115 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<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>
-      <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>
-  </body>
+    <meta name="description" content="Product Pick form for selecting name, email, shirt color, and size.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles/main.css">
+    <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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+          rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet">
+</head>
+<body>
+<header>
+    <h1>Product Pick</h1>
+</header>
+<main>
+
+
+    <form>
+
+        <div class="form-group">
+            <label for="firstname">First Name </label>
+            <input
+                    type="text"
+                    id="firstname"
+                    name="firstname"
+                    required
+                    pattern="[\p{L}]{2,}(?:['\-][\p{L}]+)*"
+                    title="enter a valid name">
+        </div>
+
+        <div class="form-group">
+            <label for="lastname">Last Name</label>
+            <input
+                    type="text"
+                    id="lastname"
+                    name="lastname"
+                    required
+                    pattern="[\p{L}]{2,}(?:['\-][\p{L}]+)*"
+                    title="enter a valid name">
+        </div>
+
+        <div class="form-group">
+            <label for="email">Email</label>
+            <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    required>
+
+        </div>
+
+        <div class="form-group">
+            <fieldset>
+                <legend>Choose a shirt color:</legend>
+                <div class="form-group-fieldset">
+                    <input
+                            type="radio"
+                            id="choice1"
+                            name="shirt"
+                            value="blue"
+                            required>
+                    <label for="choice1">Blue</label>
+                </div>
+
+                <div class="form-group-fieldset">
+                    <input
+                            type="radio"
+                            id="choice2"
+                            name="shirt"
+                            value="green"
+                    >
+                    <label for="choice2">Green</label>
+                </div>
+
+                <div class="form-group-fieldset">
+                    <input
+                            type="radio"
+                            id="choice3"
+                            name="shirt"
+                            value="yellow"
+                    >
+                    <label for="choice3">Yellow</label>
+                </div>
+            </fieldset>
+        </div>
+
+        <div class="form-group">
+            <label for="sizing">Choose a size:</label>
+            <select id="sizing" name="size" required>
+                <option value="">--Please choose an option--</option>
+                <option value="ex-small">XS</option>
+                <option value="small">S</option>
+                <option value="medium">M</option>
+                <option value="large">L</option>
+                <option value="ex-large">XL</option>
+                <option value="ex-ex-large">XXL</option>
+
+            </select>
+        </div>
+        <button type="submit">Submit</button>
+    </form>
+</main>
+
+<footer>
+    <p>By DAMILOLA ODUMOSU</p>
+</footer>
+</body>
 </html>
+
+
diff --git a/Form-Controls/styles/main.css b/Form-Controls/styles/main.css
new file mode 100644
index 000000000..0fe70654f
--- /dev/null
+++ b/Form-Controls/styles/main.css
@@ -0,0 +1,56 @@
+* {
+    box-sizing: border-box;
+    margin:0;
+}
+header, footer{
+    text-align:center;
+}
+h1{
+    font-size: 4rem;
+    font-weight: 900;
+    line-height: 1;
+}
+body{
+    font-family: "Lato", sans-serif;
+    font-size:18px;
+    background-color:#c1121f;
+    color:#fff;
+    line-height: 1.6;
+}
+form{
+    width: 50%;
+    background: #780000;
+    padding:45px;
+    margin: 100px auto;
+    border: 2px solid #9a031e;
+    border-radius:5px
+}
+.form-group{
+    margin-bottom:10px;
+}
+label {
+    text-transform: uppercase;
+    margin-right:10px;
+}
+input {
+    background: #fefae0;
+    color: #880d1e;
+    border: 2px solid #f26a8d;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+}
+
+button{
+    cursor: pointer;
+    background-color:#e63946;
+    padding: 1em 1.5em;
+    border: 0;
+    border-radius: 16px;
+}
+p{
+    text-transform:lowercase;
+    font-family: "Pinyon Script", cursive;
+    font-weight: 400;
+    font-style: normal;
+}
+
