diff --git a/Form-Controls/README.md b/Form-Controls/README.md
index a163d4de..a1f381c7 100644
--- a/Form-Controls/README.md
+++ b/Form-Controls/README.md
@@ -64,3 +64,5 @@ If you have done all these things and you would like a really big challenge, run
 - Take a screenshot of your coverage stats.
 
 Sanity check: this extension is tough! Try it in your own time and don't let it hold up your coursework submission.
+
+TEEEEEEEEEEEEEEEEEEEEST
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..1394fea1 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,16 +13,46 @@
     <h1>Product Pick</h1>
   </header>
   <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
-  </form>
+  <form action="results.html" method="get">
+    <div>
+      <label for="name">Name <span>*</span></label>
+      <input type="text" placeholder="Your Name" name="Name" id="name" minlength="2" required>
+    </div>
+    <div>
+      <label for="email">Email <span>*</span></label>
+      <input type="email" placeholder="Email Address" name="Email" id="email" required>
+    </div>
 
+    <div>
+      <label for="tshirtcolor">Choose the T-Shirt Color</label>
+      <select name="T-shirt Color" id="tshirtcolor" required>
+        <option value="" disabled selected hidden>Choose Your Color</option>
+        <option value="Red">Red</option>
+        <option value="Green">Green</option>
+        <option value="Blue">Blue</option>
+      </select>
+    </div>
+    <div>
+      <label for="tshirtsize">T-Shirt Size</label>
+      <select name="T-shirt Size" id="tshirtsize" required>
+        <option value="" disabled selected hidden>Choose Your T-Shirt 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>
+      <label for="date">Choose Delivery Date</label>
+      <input type="date" name="Delivery Date" id="date" min="2024-10-31" max="2024-11-30" required>
+    </div>
+    </div>
+     <button type=submit>Submit</button>
+  </form>
   </main>
   <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2>By Saeid Heidari</h2>
   </footer>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/Form-Controls/results.html b/Form-Controls/results.html
new file mode 100644
index 00000000..eafd68be
--- /dev/null
+++ b/Form-Controls/results.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Results</title>
+  </head>
+  <body>
+    <div id="results"></div>
+    <a href="index.html">Back to Form</a>
+    <script>
+      const resultList = document.getElementById("results");
+      new URLSearchParams(window.location.search).forEach((value, name) => {
+        resultList.append(`${name}:${value}`);
+        resultList.append(document.createElement("br"));
+      });
+    </script>
+  </body>
+</html>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..de972afe 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,145 @@
+/* Custom properties */
+:root {
+    --primary-100: #FF7F50;
+    --primary-200: #dd6236;
+    --primary-300: #8f1e00;
+    --accent-100: #8B4513;
+    --accent-200: #ffd299;
+    --text-100: #000000;
+    --text-200: #2c2c2c;
+    --bg-100: #F7EEDD;
+    --bg-200: #ede4d3;
+    --bg-300: #c4bcab;
+}
+
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+body {
+    background-color: var(--bg-100);
+    color: var(--text-200);
+    line-height: 1.6;
+}
+
+/* Header styles */
+header {
+    background-color: var(--primary-300);
+    color: var(--bg-100);
+    padding: 2rem 0;
+    text-align: center;
+    margin-bottom: 2rem;
+    box-shadow: 0 2px 4px rgba(143, 30, 0, 0.2);
+}
+
+header h1 {
+    font-size: 2.5rem;
+    font-weight: 300;
+}
+
+/* Main content and form styles */
+main {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+form {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(139, 69, 19, 0.15);
+    border: 1px solid var(--bg-200);
+}
+
+form div {
+    margin-bottom: 1.5rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--accent-100);
+    font-weight: 500;
+}
+
+label span {
+    color: var(--primary-200);
+}
+
+input, select {
+    width: 100%;
+    padding: 0.8rem;
+    border: 2px solid var(--bg-200);
+    border-radius: 6px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background-color: var(--bg-100);
+    color: var(--text-100);
+}
+
+input:focus, select:focus {
+    outline: none;
+    border-color: var(--primary-100);
+    background-color: white;
+    box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.1);
+}
+
+input::placeholder {
+    color: var(--bg-300);
+}
+
+select {
+    cursor: pointer;
+}
+
+button {
+    background-color: var(--text-100);
+    color: white;
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    width: 100%;
+    transition: background-color 0.3s ease;
+    box-shadow: 0 2px 4px rgba(255, 127, 80, 0.2);
+}
+
+button:hover {
+    background-color: var(--primary-200);
+}
+
+button:active {
+    background-color: var(--primary-300);
+    transform: translateY(1px);
+}
+
+/* Footer styles */
+footer {
+    text-align: center;
+    padding: 2rem 0;
+    color: var(--accent-100);
+    margin-top: 2rem;
+}
+
+footer h2 {
+    font-size: 1.2rem;
+    font-weight: 400;
+}
+
+/* Responsive design */
+@media (max-width: 480px) {
+    form {
+        padding: 1.5rem;
+    }
+    
+    header h1 {
+        font-size: 2rem;
+    }
+}
\ No newline at end of file
