diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..c7de6260
Binary files /dev/null and b/.DS_Store differ
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..201d460b 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -9,19 +9,69 @@
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+
   <header>
     <h1>Product Pick</h1>
+    <h2>T-shirts</h2>
   </header>
   <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
-  </form>
+    <form>
+
+      <div class="form-box">
+        <label id="name-lebel">Name </label><input type="text" id="name" name="name" placeholder="Enter your Name" required>
+        <label id="email-lebel">Email </label><input type="email=" name="email" placeholder="Enter your Email" required>
+      </div>
+
+      <div class="t-shirt">
+        <h3>T-shirt details</h3>
+        <label id="regular-lebel" for="regular"><input type="radio" name="details" id="regular">Regular T-shirt</label>
+        <label id="long-lebel" for="long"><input type="radio" name="details" id="long-sleeve">Long sleeve T-shirt</label>
+      </div>
+
+      <div class="color">
+        <h3>T-shirt Color</h3>
+        <div>
+          <label>
+            <input type="radio" value="red" name="choose"> Red</label>
+        </div>
+        <div>
+          <label id="yellow">
+            <input type="radio" value="yellow" name="choose">Yellow</label>
+        </div>
+        <div>
+          <label id="blue">
+            <input type="radio" value="blue" name="choose">Blue</label>
+        </div>
+        <div>
+          <label id="black">
+            <input type="radio" value="black" name="choose">Black</label>
+        </div>
+      </div>
+
+      <div class="size">
+        <h3>T-shirt Size</h3>
+        <select name="choose-dropdown" id="dropdown">
+          <option value="">Select an option</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>
+      <div class="hero">
+        <h3>Deliver Option</h3>
+        <label id="delivery-lebel" for="delivery"><input type="radio" name="delivery" id="delivery">Delivery</label>
+        <label id="collect-lebel" for="collect"><input type="radio" name="delivery" id="collect">Collected from the
+          store</label>
+      </div>
+    </form>
 
   </main>
   <footer>
     <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <em> &copy; By Abubakar-Meigag </em>
   </footer>
 </body>
 
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..54c8c6fb 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,113 @@
+:root{
+    --dark : #293241;
+    --orang: #eb9681;
+    --sky: #e0fbfc;
+    --light: #98c1d9;
+    --gray: #143764;
+    --white: #fff;
+    --balck: #000;
+}
+
+body{
+    background-color: var(--gray);
+}
+h1{
+    color: var(--orang);
+}
+h3{
+    color: var(--light);
+}
+h2{
+    color: var(--white);
+}
+
+header{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 20px;
+}
+header h2{
+    padding-top: 3px;
+}
+
+.form-box{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: var(--sky);
+}
+
+.form-box label{
+    padding: 8px;
+}
+.t-shirt{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 10px;
+    flex-direction: column;
+    color: var(--sky);
+}
+.t-shirt > label{
+    padding-top: 5px;
+}
+.t-shirt > label > input{
+    padding: 8px;
+}
+.color > h3{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 5px;
+}
+.color {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 10px;
+}
+
+.color>div>label {
+    padding-top: 5px;
+    color: var(--sky);
+}
+.size{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 5px;
+    flex-direction: column;
+    color: var(--sky);
+}
+.hero{
+    margin: 0;
+    padding: 0;
+}
+.hero h3{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.hero > label{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 5px;
+    flex-direction: row;
+    color: var(--sky);
+}
+
+footer{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 50px;
+    margin-top: 25px;
+}
+footer > em{
+    font-size: 1.4rem;
+    color:var(--orang);
+}
