diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..31c59ec1 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,28 +1,90 @@
 <!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">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <header>
-    <h1>Product Pick</h1>
-  </header>
-  <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
-  </form>
-
-  </main>
-  <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
-  </footer>
-</body>
-
-</html>
\ No newline at end of file
+  <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" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Product Pick</h1>
+    </header>
+    <main>
+      <form>
+        <!-- write your html here-->
+        <div class="form">
+          <div>
+            <label for="fullname"> full name:</label><br />
+            <input required type="text" id="fullname" name="fullname" minlength="3" /><br />
+          </div>
+
+          <div>
+            <label for="email">email:</label>
+            <br />
+            <input
+              required
+              type="email"
+              id="email"
+              name="email"
+              pattern=" /^\\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;"
+            />
+            <br />
+          </div>
+
+          <div>
+            <fieldset required>
+              <legend>Pick you colour:</legend>
+              <div>
+                <input checked type="radio" id="blue" name="color" value="Blue" />
+                <label for="blue">Blue</label>
+
+                <input type="radio" id="green" name="color" value="green" />
+                <label for="green">Green</label>
+
+                <input type="radio" id="red" name="color" value="red" />
+                <label for="red">Red</label>
+              </div>
+            </fieldset>
+          </div>
+
+          <div>
+            <label for="size">Choose your T-shirt size:</label><br />
+
+            <select name="size" id="size">
+              <option value="XS">extra small</option>
+              <option value="S">small</option>
+              <option value="M">medium</option>
+              <option value="L">large</option>
+              <option value="XL">x-large</option>
+              <option value="XXL">2XL</option>
+            </select>
+          </div>
+
+          <div>
+            <label for="start">pick your delevery date</label><br />
+            <input
+              required
+              type="date"
+              id="start"
+              name="calendar"
+              value="2023-03-23"
+              min="2023-03-13"
+              max="2024-03-13"
+            /><br />
+          </div>
+
+          <button class="button" role="button">Submit</button>
+        </div>
+
+        <!-- try writing out the requirements first-->
+      </form>
+    </main>
+    <footer>
+      <!-- change to your name-->
+      <h2>By HOMEWORK SOLUTION</h2>
+    </footer>
+  </body>
+</html>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..fd80982f 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,60 @@
+html {
+  font-family: sans-serif;
+  margin: 0 auto;
+}
+header {
+  margin-top: 2rem;
+  color: beige;
+}
+body {
+  background-color: #2d05f6;
+  width: 70%;
+  margin: 0 auto;
+}
+form {
+  background-color: #f9f8fd;
+  border: 3px solid #0fe92c;
+  border-radius: 2rem;
+  max-width: 75vw;
+}
+div {
+  padding: 1rem;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+input {
+  background-color: rgb(196, 255, 233);
+  color: #0d0d0e;
+  border-radius: 2rem;
+  width: 50vw;
+  height: 1.5rem;
+}
+
+input[type="radio"] {
+  appearance: none;
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  padding: 6px;
+  background-color: #aeacb5;
+  border-radius: 50%;
+}
+
+input[type="radio"]:checked {
+  background-color: rgba(239, 22, 22, 0.93);
+}
+.button {
+  background-color: rgba(239, 77, 17, 0.93);
+  border-radius: 2rem;
+  color: white;
+  cursor: pointer;
+  padding: 1rem;
+  text-align: center;
+}
+
+.button:hover {
+  background-color: red;
+}
