diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..d98bef934 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,68 @@
 <!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" />
-  </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-->
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <title>Form Controls</title>
+</head>
+<body>
+  <header>
+    <h1>Product Pick</h1>
+  </header>
+  <main>
+      <form> 
+        <div class="form-group">
+           <!-- input for name - required and validate -->
+          <label for="name">Name</label>
+          <input type="text" 
+            id="name" 
+            placeholder="Joe Bloggs" 
+            required pattern="^(?=(?:.*\S){2,}).*$"
+            title="Please enter at least 2 non-space characters">
+        </div>
+        <div class="form-group">
+        <!-- input for email - required and validate -->
+          <label for="email">Email</label>
+          <input type="email" id="email" placeholder="joe@me.com" required="">
+        </div>
+        <div class="form-group">
+          <!-- Drop down list of 3 colours (green, blue, red) - required -->
+          <label for="colour">Choose colour</label>
+          <select name="colour" id="colour" required="">
+            <option value="" disabled="" selected="">Select a colour</option>
+            <option value="red">Red</option>
+            <option value="green">Green</option>
+            <option value="blue">Blue</option>
+          </select>
+        </div>
+
+       <div class="form-group">
+         <!-- Drop down list of 6 sizes (XS, S, M, L, XL, XXL) - required -->
+          <label for="size">Choose size</label>
+          <select name="size" id="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>
+       </div>
+        <button type="submit" id="submit-btn">Submit</button>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Martin Mwaka</p>
     </footer>
-  </body>
+</body>
 </html>
+
+
+
+
+   
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..d50f39287
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,70 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+:root {
+    --clr-font-base: #DCE1DE;
+    --clr-bg-base: #216869;
+    --clr-bg-accent1: #3B8C88;
+    --clr-bg-accent2: #55AFAF;
+    --clr-bg-accent3: #70D2D2;
+    --clr-bg-dark1: #1A5354;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-style: normal;
+    background-color: #570000;
+    color: #fff;
+}
+
+main, header, footer {
+    margin: auto;
+    width: 90%;
+    max-width: 750px;
+}
+
+form {
+    display: grid;
+    min-width: 350px;
+    gap: 1rem;
+    background-color: #280000;
+    padding: 2rem;
+    border-radius: 10px;
+}
+
+form {
+    @media (width > 720px) {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+form button {
+    text-transform: uppercase;
+    background-color: #570000;
+    color: var(--clr-font-base);
+    font-weight: 500;
+    margin-top: 1rem;
+    height: 2.5rem;
+    border: none;
+    border-radius: 5px;
+    grid-column: 1 / -1;
+    justify-self: center;
+    width: 100%;
+}
+
+input, button, select {
+    font: inherit;
+}
+
+input, select {
+    width: 100%;
+    height: 2rem;
+    /* background-color: #570000; */
+}
+
+header h1, footer p {
+    text-align: center;
+    margin: 1.5rem;
+}
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..c30af8884 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -23,6 +23,24 @@ <h2>Title</h2>
         </p>
         <a href="">Read more</a>
       </article>
+       <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>
+       <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>
     </main>
     <footer>
       <p>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..8a9d7db39 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -61,12 +61,16 @@ Play with the options that come up.
 https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
+
+
+@media (min-width: 550px) {
+    main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space);
+    > *:first-child {
+      grid-column: span 2;
+    }
   }
 }
 /* ====== Article Layout ====== 
