diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..a05ed1805 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -3,13 +3,20 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
+    <title>My Form-Control</title>
+    <style>
+      input, select, button {
+        min-height: 15px;
+        padding: 10px;
+        margin-bottom: 12px;
+      }
+    </style>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <header>
-      <h1>Product Pick</h1>
+      <h1>Selling T-shirts</h1>
     </header>
     <main>
       <form>
@@ -17,11 +24,37 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
-      </form>
+         <label for="fname">First name</label><br>
+         <input type="text" id="fname" name="fname" value=""><br>
+          <label for="lname">Last name</label><br>
+  <input type="text" id="lname" name="lname" value=""><br>
+  <label for="email">Email</label><br>
+  <input type="text" id="email" email="email" value=""><br>
+<form>
+  <label for="tshirtColour">Colour</label>
+  <select id="tshirtColour" name="tshirtColour" required>
+    <option value="Black">Blac</option>
+    <option value="Red">Red</option>
+    <option value="Blue">Blue</option>
+  </select>
+<form>
+  <label for="tshirtSize">Size</label>
+  <select id="tshirtSize" name="tshirtSize" required>
+    <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>
+</form>
+<form>
+<button type="submit">Submit</button>
+</form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <p2>By Mohamed Zakaria</p2>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..d53a690e1 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,33 +1,59 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </header>
-    <main>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Learn about README files, wireframes, and Git branches." />
+  <title>Understanding README, Wireframes, and Git Branches</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Understanding README, Wireframes, and Git Branches</h1>
+    <p>A brief introduction to three key principles and tools for web development.</p>
+  </header>
+
+  <main>
+    <section class="articles">
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <h2>What is the Purpose of a README File?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A project is introduced and explained in a README file.  It offers details about the project's functions, installation and usage instructions, and ways for others to get involved.  When users or collaborators visit your repository, they frequently read it first.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com/" target="_blank" rel="noopener">Learn more about READMEs</a>
       </article>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
+
+      <article>
+        <h2>What is the Purpose of a Wireframe?</h2>
+        <p>
+          A wireframe is a visual guide that represents the skeletal framework of
+          a webpage or app. It helps designers and developers plan the layout,
+          user flow, and functionality before coding begins. Wireframes focus on
+          structure, not design.
+        </p>
+        <a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe/" target="_blank" rel="noopener">
+          Learn more about wireframes
+        </a>
+      </article>
+
+      <article>
+        <h2>What is a Branch in Git?</h2>
+        <p>
+          A branch in Git allows developers to work on different versions of a
+          project simultaneously. It lets you make changes, test features, or fix
+          bugs without affecting the main codebase. Once the work is complete,
+          branches can be merged back into the main branch.
+        </p>
+        <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank" rel="noopener">
+          Learn more about Git branches
+        </a>
+      </article>
+    </section>
+  </main>
+
+  <footer>
+    <p>By Mohamed Zakaria</p>
+  </footer>
+</body>
 </html>
