diff --git a/css/style.css b/css/style.css
index 79fc31e..0642676 100644
--- a/css/style.css
+++ b/css/style.css
@@ -115,7 +115,8 @@ a{
 
 .heart
 {
-    border-right: 1px dotted #999999;
+    content: "";
+    border-right: 1px dashed #999999;
     border-right-width: 1px;
     padding: 0 14px;
     
@@ -237,12 +238,133 @@ a{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    background-color: #fff;
+    border-color: #e1e1e1;
+    text-transform: uppercase;
+    font-size: 14px;
+    
+}
+
+.color
+{
+    width: 196px;
+}
+
+.size
+{
+    width: 196px;
+
+}
+
+.selectors select
+{
+    font-size: 13px;
+    color: #707070;
+    width: 168px;
+    height: 35px;
+    border-radius: 0%;
+    border-color: #e1e1e1;
+    padding-left: 12px;
+    font: inherit;
+    letter-spacing: inherit;
+    word-spacing: inherit;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+select:not([multiple]) {
+    padding-right: 1.2em;
+    background-repeat: no-repeat;
+    background-position: calc(100% - 0.25em) 0.8499999999999932em;
+    background-size: 1.2499999999999991em auto;
+    background-image: url("../images/icon.png");
+  }
+
+input[type="number"] 
+{ 
+    -webkit-appearance: textfield; 
+    -moz-appearance: textfield;
+    appearance: textfield; 
+}
+
+input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button 
+{ 
+    -webkit-appearance: none; 
+}
+
+input
+{
+    text-align: center;
+}
+
+.qty_counter
+{
+    display: flex;
+    align-items: center;
+    
 }
 
 
+.buttons
+{
+    display: flex;
+    flex-direction: column;
+    border-radius: 0;
+    border: 1px solid #e1e1e1;
+    border-left: none;
+}
+
+.buttons button
+{
+    border-radius: 0;
+    border: 0px ;
+    background-color: #fff;
+    height: 16.5px;
+}
+
+.buttons button:first-child
+{
+    
+    border-bottom: 0.5px solid #e1e1e1;
+}
+
+.buttons button:last-child
+{
+
+    border-top: 0.5px solid #e1e1e1;
+}
 
 
+.count_up {
+    width: 0; 
+    height: 0; 
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+    
+    border-bottom: 2px solid #cccccc;
+  }
 
+.count_down {
+    width: 0; 
+    height: 0; 
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+    
+    border-top: 2px solid #cccccc;
+  }
+
+.selectors .qty input
+{
+    padding: 5px;
+    font-size: 13px;
+    color: #707070;
+    width: 34px;
+    height: 33px;
+    padding: 0;
+    border-radius: 0;
+    border: 1px solid #e1e1e1;
+}
 
 
 
diff --git a/images/icon.png b/images/icon.png
new file mode 100644
index 0000000..f0293bd
Binary files /dev/null and b/images/icon.png differ
diff --git a/index.html b/index.html
index 05e1780..0d3b0ef 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="https://kit.fontawesome.com/1559834886.js" crossorigin="anonymous"></script>
         <link rel="stylesheet" href="css/style.css">
         <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -31,7 +32,7 @@
             <div class="link_line">
                 <div class="container">
                     <div class="link_content">
-                    <div class="menu">m</div>
+                    <div class="menu"><i class="fa-solid fa-bars"></i></div>
                         <nav class="nav_group">
                             <a class="nav_link" href="#">home</a>
                             <a class="nav_link" href="#">men</a>
@@ -41,8 +42,8 @@
                             <a class="nav_link" href="#">blog</a>
                             </nav>
                             <div class="icons">
-                                <div class="heart">h</div>
-                                <div class="search">s</div>
+                                <div class="heart"><i class="fa-regular fa-heart"></i></div>
+                                <div class="search"><i class="fa-solid fa-magnifying-glass"></i></div>
                             </div>
                         </div>
                     </div>
@@ -80,26 +81,33 @@
                             </div>
                         </div>
                         <div class="selectors">
+                            
                             <div class="color"><b>color</b>
-                            <p><select name="color" size="3">
-                                <option selected value="gray">Gray</option>
+                            <p><select name="color">
+                                <option value="" selected hidden>Select Color</option>
+                                <option value="gray">Gray</option>
                                 <option value="black">Black</option>
                                 <option value="yellow">Yellow</option>
                             </select></p>
                             </div>
                             <div class="size"><b>size</b>
-                                <p><select name="size" size="3">
-                                    <option selected value="51">51</option>
+                                <p><select name="size">
+                                    <option selected hidden value="">Select Size</option>
+                                    <option value="51">51</option>
                                     <option value="54">54</option>
                                     <option value="60">60</option>
                                 </select></p></div>
                             <div class="qty"><b>qty</b>
-                                <p><select name="qty" size="3">
-                                    <option selected value="1">1</option>
-                                    <option value="2">2</option>
-                                    <option value="3">3</option>
-                                </select></p></div>
+                            <div class="qty_counter">    
+                            <p><input type="number" name="qty" min="1" max="10" value="1">
+                                <div class="buttons">
+                                    <button><div class="count_up"></div></button>
+                                    <button><div class="count_down"></div></button>
+                                </div>
+                                    </p></div>
+                                </div>
                         </div>
+                        
                         <div class="product_buttons"></div>
                         <div class="share"></div>
                     </div>
