diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..3d63b537e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,69 @@
 <!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" />
+    <meta charset="UTF-8">
+    <title>Product Pick</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.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-->
+        <fieldset>
+          <legend>Choose your T-shirt</legend>
+
+          <!-- Name -->
+          <label for="name">Name:</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            minlength="2"
+            required
+          >
+
+          <!-- Email -->
+          <label for="email">Email:</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            required
+          >
+
+          <!-- Colour -->
+          <label for="colour">Colour:</label>
+          <select id="colour" name="colour" required>
+            <option value="" disabled selected>Select a colour</option>
+            <option value="Black">Black</option>
+            <option value="White">White</option>
+            <option value="Blue">Blue</option>
+          </select>
+
+          <!-- Size -->
+          <label for="size">Size:</label>
+          <select id="size" name="size" required>
+            <option value="" disabled selected>Select 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>
+
+          <button type="submit">Submit</button>
+        </fieldset>
       </form>
     </main>
+
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Alasdair MacDonald</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..637984268 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -3,31 +3,87 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Wireframe Task</title>
+    <meta
+      name="description"
+      content="A simple explanation of README files, wireframes, and Git branches."
+    />
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Web Development Fundamentals</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This page explains README files, wireframes, and Git branches using a
+        simple wireframe layout.
       </p>
     </header>
+
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
+      <section>
+        <!-- README ARTICLE -->
+        <article>
+          <img
+            src="placeholder.svg"
+            alt="Illustration representing a README file"
+          />
+          <h2>What is a README file?</h2>
+          <p>
+            A README file explains what a project is about, how to use it, and
+            any important information someone needs before contributing to the
+            project.
+          </p>
+          <a
+            href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
+            target="_blank"
+          >
+            Read more
+          </a>
+        </article>
+
+        <!-- WIREFRAME ARTICLE -->
+        <article>
+          <img
+            src="wireframe.png"
+            alt="Example of a webpage wireframe layout"
+          />
+          <h2>What is a wireframe?</h2>
+          <p>
+            A wireframe is a simple visual guide that shows the structure and
+            layout of a webpage before design and development begins.
+          </p>
+          <a
+            href="https://www.figma.com/resource-library/what-is-a-wireframe/"
+            target="_blank"
+          >
+            Read more
+          </a>
+        </article>
+
+        <!-- GIT BRANCH ARTICLE -->
+        <article>
+          <img
+            src="placeholder.svg"
+            alt="Diagram representing Git branches"
+          />
+          <h2>What is a Git branch?</h2>
+          <p>
+            A Git branch allows developers to work on new features or fixes
+            without affecting the main version of a project.
+          </p>
+          <a
+            href="https://docs.github.com/en/get-started/using-git/about-branches"
+            target="_blank"
+          >
+            Read more
+          </a>
+        </article>
+      </section>
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>© 2026 CYF Wireframe Task</p>
     </footer>
   </body>
 </html>
