diff --git a/package-lock.json b/package-lock.json
index c174040..20846c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1887,6 +1887,14 @@
         "react-transition-group": "^4.4.0"
       }
     },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
diff --git a/package.json b/package.json
index e77be28..4a4e265 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@chec/commerce.js": "^2.7.2",
     "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
diff --git a/src/asdw.css b/src/asdw.css
index 6736143..5f73baf 100644
--- a/src/asdw.css
+++ b/src/asdw.css
@@ -11,34 +11,16 @@
 
 
 
-*{
-  margin: 0;
-  box-sizing:border-box;
-  padding:0;
-}
-body{
-  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  color: #1f1f1f;
-}
-.header{
-  position: relative;
-  top:0;
-  left:0;
-  width:100%;
-  height:7vh;
-  text-align:center;
-}
 .productContainer{
     position:relative;
   display:flex;
   justify-content: space-around;
   align-items: center;
-  background: rgba( 255, 255, 255, 0.25 );
-box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+  background: rgba(143, 143, 143, 0.1);
+/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
 border-radius: 10px;
-border: 1px solid rgba( 255, 255, 255, 0.18 );
+border: 1px solid rgba( 255, 255, 255, 0.18 ); */
 width:90vw;
-/* height: 90vh; */
 }
 .mainContainer{
   position:relative;
@@ -73,7 +55,6 @@ width:90vw;
    background-position: center; /* Center the image */
   background-repeat: no-repeat; /* Do not repeat the image */
   background-size: cover; /* Resize the background image to cover the entire container */
-
 }
 
 .pDetails{
@@ -82,10 +63,11 @@ width:90vw;
 }
 .productDesciption{
   margin-top:20px;
-  font-size:0.8em;
+  /* font-size:0.8em; */
   max-height: 85px;
   overflow:hidden;
   text-overflow: ellipsis;
+  font-weight:100;
 }
 
 .pDataMain{
@@ -114,16 +96,16 @@ width:90vw;
     box-shadow:inset 0px 0px 0px 0.2em rgb(255, 255, 255);
 }
 .red{
-  background:red;
+  background:rgba(255, 145, 0, 0.534);
   border:1px solid red;
 }
 .blue{
   border:1px solid blue;
-  background:blue;
+  background:rgba(64, 97, 116, 0.445);
 }
 .green{
   border:1px solid green;
-  background:green;
+  background:rgba(6, 145, 68, 0.664);
 }
 
 
@@ -147,6 +129,7 @@ width:90vw;
 }
 .productContainer{
   height: auto;
+  width:97vw;
 }
   .pVariants{
     order:1;
@@ -163,7 +146,7 @@ width:90vw;
     padding:5% 0;
   }
   .pData{
-    width:70%;
+    width:90%;
   }
   .pDataMain{
   margin:5px 0;
@@ -172,20 +155,21 @@ width:90vw;
     right:0;
   }
   .colorChoose{
-    width:30%;
+    width:17%;
     aspect-ratio: 1/1;
   }
 }
 
-.pAcive{
-  font-weight:500;
-  font-size:1.2rem;
+.pActive{
+  font-weight:700;
+  /* font-size:1.2em; */
 }
 
 .pDataC-btn{
-  padding:5px;
-  background:#1f1f1f;
-  color:white;
+  padding:12px;
+  /* background:#1f1f1f; */
+  /* color:white; */
+  background:none;
   cursor:pointer;
   z-index:10;
   border-radius:2px;
@@ -193,8 +177,8 @@ width:90vw;
   transition:0.2s all ease-in;
 }
 .pDataC-btn:hover{
-  color:black;
-  background:none;
+  color:rgb(65, 65, 65);
+  background:rgba(255, 255, 255, 0.678);
 }
 .counter-cart{
   width:90px;
diff --git a/src/components/LandingPage/Landing.css b/src/components/LandingPage/Landing.css
index 134170a..dad62ff 100644
--- a/src/components/LandingPage/Landing.css
+++ b/src/components/LandingPage/Landing.css
@@ -3,7 +3,7 @@
   font-family: "HelveticaNeue-CondensedBold", -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
     sans-serif;
-  font-weight: 900;
+  /* font-weight: 900; */
 }
 body {
   padding: 0;
diff --git a/src/components/ProductPage/ProductPage.jsx b/src/components/ProductPage/ProductPage.jsx
index 9214a8d..628043f 100644
--- a/src/components/ProductPage/ProductPage.jsx
+++ b/src/components/ProductPage/ProductPage.jsx
@@ -1,6 +1,10 @@
 import { useState, useEffect } from "react";
 import { commerce } from "../../lib/commerce";
+import Spinner from "../../lib/Spinner";
 
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import StarIcon from '@material-ui/icons/Star';
+import PersonIcon from '@material-ui/icons/Person';
 
 export default function ProductPage() {
     const [products, setProducts] = useState([]);
@@ -14,12 +18,13 @@ export default function ProductPage() {
     useEffect(() => {
         fetchProducts();
     }, []);
-
+    var sizes = ["S","M","L","XL"];
+    const [currSize,setCurrSize] = useState("M");
     const [cartCount, setCartCount] = useState(0);
     return (<>
         {
             (products.length === 0 || !products[0].id)
-                ? (<div style={{ width: "100vw", height: "100vh", display: "flex", justifyContent: "center", alignItems: "center" }}>Loading...</div>)
+                ? (<Spinner/>)
                 :
                 (
                     <div className="mainContainer" style={{marginTop:"125px"}}>
@@ -40,28 +45,31 @@ export default function ProductPage() {
                             <div className="pData pDetails">
                                 <h2 className="ProductTitle">{products[0].name}</h2>
                                 <hr/>
-                                <div className="productDesciption" dangerouslySetInnerHTML={{ __html: products[0].description }} >{ }</div>
+                                <span className="productDesciption" dangerouslySetInnerHTML={{ __html: products[0].description }} >{ }</span>
                                 <div className="pDataMain">
                                     <div className="pDataC price">
-                                        Price : <br /> {products[0].price.formatted_with_code}
+                                        <b>Price :</b> <br /> {products[0].price.formatted_with_code}
                                     </div>
                                     <div className="pDataC color">
-                                        Color : <br />
+                                        <b>Color :</b> <br />
                                         <div className="colorChoose red"></div>
                                         <div className="colorChoose blue"></div>
                                         <div className="colorChoose green"></div>
                                     </div>
                                     <div className="pDataC size">
-                                        Size :
+                                        <b>Size :</b>
                                         <br />
-                                        <span class="">S</span> <span class="pAcive">M</span> L XL
+                                        {sizes.map(size => (<>
+                                            <span style={{cursor:"pointer"}} onClick={()=> {setCurrSize(size)}} className=
+                                            {`${(size === currSize)?"pActive":""}`}>{size}</span>{" "}
+                                        </>))}
                                     </div>
                                 </div>
 
                                 <div className="pDataMain cart-options">
                                     <div className="counter-cart">
-                                        <div className="counter pDataC-btn" onClick={() => { if (cartCount <= 1) return; setCartCount(cartCount - 1) }}>-</div>
-                                        <div className="counter counter-val">{cartCount}</div>
+                                        <div className="counter pDataC-btn" onClick={() => { if (cartCount <= 0) return; setCartCount(cartCount - 1) }}>-</div>
+                                        <div style={{borderTop:"1px solid #1f1f1f",borderBottom:"1px solid #1f1f1f"}} className="counter counter-val">{cartCount}</div>
                                         <div className="counter pDataC-btn" onClick={() => { setCartCount(cartCount + 1) }}>+</div>
                                     </div>
                                     <button className="pDataC-btn">Add To Cart</button>
@@ -70,17 +78,17 @@ export default function ProductPage() {
                                 <hr />
                                 <br />
                                 <h4>REVIEWS</h4>
-                                <br />
-                                <div pReviews pStars>
-                                    🌟🌟🌟⭐⭐
+                                {/* <br /> */}
+                                <div className="pReviews pStars">
+                                    <StarIcon /><StarIcon /><StarIcon /><StarBorderIcon /><StarBorderIcon />
                                 </div>
                                 <br/>
-                                <b>Random Aadmi</b>
-                                <p>&nbsp;&nbsp; Mast hai vro lele isko ... 👉👈</p>
+                                <PersonIcon/><b>John Doe</b>
+                                <p>&nbsp;&nbsp; Don't know why these are too OP.</p>
                             
                                 <br />
-                                <b>Random Aadmi 2</b>
-                                <p>&nbsp;&nbsp; Mat le vro Chutiya bana rhaa hai...</p>
+                                <span><PersonIcon /><b>Vijay Malya</b></span>
+                                <p>&nbsp;&nbsp; This site is best.. I bought a 1000 rs note just at 2000 rs</p>
                             
                             </div>
                             <div className="pData pPhoto">