diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..bca2ae3cb 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,160 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!--
+      Document metadata
+      - charset + viewport are essential for correct rendering and responsive behaviour.
+      - No CSS/JS included (CYF requirement).
+    -->
     <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" />
+
+    <!-- Title shown in the browser tab -->
+    <title>Product Pick | T-shirt Order Form</title>
+
+    <!-- Optional: short page description -->
+    <meta
+      name="description"
+      content="T-shirt order form using semantic HTML and built-in validation (no CSS or JavaScript)." />
   </head>
+
   <body>
+    <!--
+      Page header (semantic landmark)
+      Helps screen reader users quickly understand the page topic.
+    -->
     <header>
       <h1>Product Pick</h1>
     </header>
+
+    <!-- Main content (semantic landmark) -->
     <main>
+      <!--
+        CYF Form Controls requirements checklist:
+        1) HTML only (no CSS, no JavaScript)
+        2) No form action attribute
+        3) All fields required
+        4) Name: minimum 2 characters AND must not be whitespace-only
+        5) Email: valid email format (type="email")
+        6) Colour: choose exactly 1 option from 3 predefined options
+        7) Size: choose exactly 1 option from 6 predefined options (XS, S, M, L, XL, XXL)
+        8) Every input has an associated label
+        9) Semantic structure + Lighthouse Accessibility = 100
+      -->
+
+      <!--
+        No action attribute: this form is for structure + validation only (CYF requirement).
+        The browser will handle validation via required/minlength/pattern/type attributes.
+      -->
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+        <!-- Clear instruction for users -->
+        <p>Please complete all required fields.</p>
+
+        <!-- Customer details (grouped for structure and navigation) -->
+        <section aria-labelledby="customer-details">
+          <h2 id="customer-details">Customer details</h2>
+
+          <!--
+            Name validation:
+            - required: must be filled
+            - minlength=2: at least 2 characters
+            - pattern rejects whitespace-only AND avoids leading/trailing whitespace:
+              ^\S(.*\S)?$  => starts with non-space and ends with non-space (allows single-word or multi-word names)
+          -->
+          <p>
+            <label for="customer-name">Name</label><br />
+            <input
+              id="customer-name"
+              name="customerName"
+              type="text"
+              required
+              minlength="2"
+              pattern="^\S(.*\S)?$"
+              title="Name must be at least 2 characters and cannot be only spaces."
+              autocomplete="name" />
+          </p>
+
+          <!--
+            Email validation:
+            - type="email" enables browser email format checks
+            - required ensures it cannot be left blank
+          -->
+          <p>
+            <label for="customer-email">Email</label><br />
+            <input
+              id="customer-email"
+              name="customerEmail"
+              type="email"
+              required
+              autocomplete="email" />
+          </p>
+        </section>
+
+        <!-- T-shirt options (grouped for structure and navigation) -->
+        <section aria-labelledby="tshirt-options">
+          <h2 id="tshirt-options">T-shirt options</h2>
+
+          <!--
+            Colour selection:
+            - fieldset + legend provides an accessible group label for radio inputs
+            - same name="colour" enforces selecting only one option
+            - required on one radio ensures the group is required
+          -->
+          <fieldset>
+            <legend>Colour</legend>
+
+            <p>
+              <input
+                id="colour-black"
+                name="colour"
+                type="radio"
+                value="black"
+                required />
+              <label for="colour-black">Black</label>
+            </p>
+
+            <p>
+              <input id="colour-white" name="colour" type="radio" value="white" />
+              <label for="colour-white">White</label>
+            </p>
+
+            <p>
+              <input id="colour-blue" name="colour" type="radio" value="blue" />
+              <label for="colour-blue">Blue</label>
+            </p>
+          </fieldset>
+
+          <!--
+            Size selection:
+            - select is required
+            - disabled placeholder prevents accidental submission with a default size
+            - exactly 6 size options as required by the task
+          -->
+          <p>
+            <label for="size">Size</label><br />
+            <select id="size" name="size" required>
+              <option value="" selected disabled>Choose a size</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>
+          </p>
+        </section>
+
+        <!-- Submit button triggers built-in HTML validation -->
+        <p>
+          <button type="submit">Submit</button>
+        </p>
       </form>
     </main>
+
+    <!-- Footer (semantic landmark) -->
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <p>By Richard Frimpong</p>
     </footer>
   </body>
 </html>
