diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6b665aaa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/Form-Controls/.vscode/settings.json b/Form-Controls/.vscode/settings.json
new file mode 100644
index 00000000..6b665aaa
--- /dev/null
+++ b/Form-Controls/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..e95a2f1b 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,6 +16,59 @@ <h1>Product Pick</h1>
   <form>
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
+    <fieldset class="validate-account">
+      <label for="fname">First name:</label>
+      <input type="text" id="fname" name="fname" required><br><br>
+      <label for="lname">Last name:</label>
+      <input type="text" id="lname" name="lname" required><br><br>
+      <label for="email">Email:</label>
+      <input type="email" id="email" name="email" required><br><br>
+    </fieldset>
+
+    <section class="select-colour">
+      <label for="color-picker">Choose your t-shirt colour from the three available colours</label>
+      <input type="color" list="presets" id="color-picker">
+      <datalist id="presets">
+        <option value="#FF0000">Red</option>
+        <option value="#FFFF00">Yellow</option>
+        <option value="#6699cc">Blue</option>
+      </datalist>
+    </section>
+
+    <section class="select-size">
+      <div>
+          <p>Choose your t-shirt size:</p>
+          <input type="radio" id="XS" name="size" value="XS">
+          <label for="XS">XS</label>
+      </div>
+      <div>
+          <input type="radio" id="S" name="size" value="S">
+          <label for="S">S</label>
+      </div>
+      <div>
+          <input type="radio" id="M" name="size" value="M">
+          <label for="M">M</label>
+      </div>
+      <div>
+          <input type="radio" id="L" name="size" value="L">
+          <label for="L">L</label>
+      </div>
+      <div>
+          <input type="radio" id="XL" name="size" value="XL">
+          <label for="XL">XL</label>
+      </div>
+      <div>
+          <input type="radio" id="XXL" name="size" value="XXL">
+          <label for="XXL">XXL</label>
+      </div>
+    </section>
+
+    <section class="select-delivery-date">
+      <label for="date">Date of Delivery</label>
+      <input type="date" name="date" id="date" min="2023-03-16" max="2023-04-13">
+    </section>
+
+    
   </form>
 
   </main>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..4b3e8742 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,31 @@
+body {
+  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  color: black;
+  font-size: 30px;
+  margin: 2rem;
+  background-color:blanchedalmond;
+}
+
+.select-colour {
+  font-size: 1.5 rem;
+  padding: 1rem;
+  margin: 1rem;
+}
+
+.select-size {
+  font-size: 1.5 rem;
+  padding: 1rem;
+  margin: 1rem;
+}
+
+.validate-account {
+  font-size: 1.5 rem;
+  padding: 1rem;
+  margin: 1rem;
+}
+
+.select-delivery-date {
+    font-size: 1.5 rem;
+    padding: 1rem;
+    margin: 1rem;
+}