diff --git a/app.js b/app.js
index 0eecba8..2951a06 100644
--- a/app.js
+++ b/app.js
@@ -16,39 +16,39 @@ closeShopping.addEventListener("click", () => {
 let products = [
   {
     id: 1,
-    name: "PRODUCT NAME 1",
+    name: "Hunter Bridle w/ Reins",
     image: "1.PNG",
-    price: "£20",
+    price: 99.99,
   },
   {
     id: 2,
-    name: "PRODUCT NAME 2",
+    name: "Close Contact Jump Saddle",
     image: "2.PNG",
-    price: 120000,
+    price: 334.99,
   },
   {
     id: 3,
-    name: "PRODUCT NAME 3",
+    name: "Stable Rug 400g",
     image: "3.PNG",
-    price: 220000,
+    price: 169.99,
   },
   {
     id: 4,
-    name: "PRODUCT NAME 4",
+    name: "Rambo Travel Boots",
     image: "4.PNG",
-    price: 123000,
+    price: 86.99,
   },
   {
     id: 5,
-    name: "PRODUCT NAME 5",
+    name: "Bee Combo Fly Rug",
     image: "5.PNG",
-    price: 320000,
+    price: 59.99,
   },
   {
     id: 6,
-    name: "PRODUCT NAME 6",
+    name: "Treeless ANTI SLIP saddle pad",
     image: "6.PNG",
-    price: 120000,
+    price: 49.99,
   },
 ];
 let listCards = [];
@@ -59,7 +59,7 @@ function initApp() {
     newDiv.innerHTML = `
             <img src="image/${value.image}">
             <div class="title">${value.name}</div>
-            <div class="price">${value.price.toLocaleString()}</div>
+            <div class="price">£${value.price.toLocaleString()}</div>
             <button onclick="addToCard(${key})">Add To Card</button>`;
     list.appendChild(newDiv);
   });
@@ -85,7 +85,7 @@ function reloadCard() {
       newDiv.innerHTML = `
                 <div><img src="image/${value.image}"/></div>
                 <div>${value.name}</div>
-                <div>${value.price.toLocaleString()}</div>
+                <div>£${value.price.toLocaleString()}</div>
                 <div>
                     <button onclick="changeQuantity(${key}, ${
         value.quantity - 1
@@ -98,7 +98,7 @@ function reloadCard() {
       listCard.appendChild(newDiv);
     }
   });
-  total.innerText = totalPrice.toLocaleString();
+  total.innerText = `£ ${totalPrice.toLocaleString()}`;
   quantity.innerText = count;
 }
 function changeQuantity(key, quantity) {
diff --git a/image/1.PNG b/image/1.PNG
index 6935cd4..95a1a9a 100644
Binary files a/image/1.PNG and b/image/1.PNG differ
diff --git a/image/2.PNG b/image/2.PNG
index d2ddae1..0424347 100644
Binary files a/image/2.PNG and b/image/2.PNG differ
diff --git a/image/3.PNG b/image/3.PNG
index 5c2a04e..7cf09b6 100644
Binary files a/image/3.PNG and b/image/3.PNG differ
diff --git a/image/4.PNG b/image/4.PNG
index 493ae25..f316921 100644
Binary files a/image/4.PNG and b/image/4.PNG differ
diff --git a/image/5.PNG b/image/5.PNG
index 1e65995..fe8cf6c 100644
Binary files a/image/5.PNG and b/image/5.PNG differ
diff --git a/image/6.PNG b/image/6.PNG
index 2060a30..cb508ea 100644
Binary files a/image/6.PNG and b/image/6.PNG differ
diff --git a/style.css b/style.css
index 17c5761..47890b8 100644
--- a/style.css
+++ b/style.css
@@ -1,131 +1,130 @@
-body{
-    background-color: #E3E7E8;
-    font-family: system-ui;
-}
-.container{
-    width: 1000px;
-    margin: auto;
-    transition: 0.5s;
-}
-header{
-    display: grid;
-    grid-template-columns: 1fr 50px;
-    margin-top: 50px;
-}
-header .shopping{
-    position: relative;
-    text-align: right;
-}
-header .shopping img{
-    width: 40px;
-}
-header .shopping span{
-    background: red;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    position: absolute;
-    top: -5px;
-    left: 80%;
-    padding: 3px 10px;
-}
-.list{
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    column-gap: 20px;
-    row-gap: 20px;
-    margin-top: 50px;
-}
-.list .item{
-    text-align: center;
-    background-color: #DCE0E1;
-    padding: 20px;
-    box-shadow: 0 50px 50px #757676;
-    letter-spacing: 1px;
-}
-.list .item img{
-    width: 90%;
-    height: 430px;
-    object-fit: cover;
-}
-.list .item .title{
-    font-weight: 600;
-}
-.list .item .price{
-    margin: 10px;
-}
-.list .item button{
-    background-color: #1C1F25;
-    color: #fff;
-    width: 100%;
-    padding: 10px;
-}
-.card{
-    position: fixed;
-    top:0;
-    left: 100%;
-    width: 500px;
-    background-color: #453E3B;
-    height: 100vh;
-    transition: 0.5s;
-}
-.active .card{
-    left: calc(100% - 500px);
-}
-.active .container{
-   transform: translateX(-200px);
-}
-.card h1{
-    color: #E8BC0E;
-    font-weight: 100;
-    margin: 0;
-    padding: 0 20px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-}
-.card .checkOut{
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-
-}
-.card .checkOut div{
-    background-color: #E8BC0E;
-    width: 100%;
-    height: 70px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
-    cursor: pointer;
-}
-.card .checkOut div:nth-child(2){
-    background-color: #1C1F25;
-    color: #fff;
-}
-.listCard li{
-    display: grid;
-    grid-template-columns: 100px repeat(3, 1fr);
-    color: #fff;
-    row-gap: 10px;
-}
-.listCard li div{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.listCard li img{
-    width: 90%;
-}
-.listCard li button{
-    background-color: #fff5;
-    border: none;
-}
-.listCard .count{
-    margin: 0 10px;
+body {
+  background-color: #e3e7e8;
+  font-family: system-ui;
+}
+.container {
+  width: 1000px;
+  margin: auto;
+  transition: 0.5s;
+}
+header {
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  margin-top: 50px;
+}
+header .shopping {
+  position: relative;
+  text-align: right;
+}
+header .shopping img {
+  width: 40px;
+}
+header .shopping span {
+  background: red;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  position: absolute;
+  top: -5px;
+  left: 80%;
+  padding: 3px 10px;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 20px;
+  row-gap: 20px;
+  margin-top: 50px;
+}
+.list .item {
+  text-align: center;
+  background-color: #dce0e1;
+  padding: 20px;
+  box-shadow: 0 50px 50px #757676;
+  letter-spacing: 1px;
+}
+.list .item img {
+  width: 90%;
+  height: 430px;
+  object-fit: cover;
+}
+.list .item .title {
+  font-weight: 600;
+}
+.list .item .price {
+  margin: 10px;
+}
+.list .item button {
+  background-color: #1c1f25;
+  color: #fff;
+  width: 100%;
+  padding: 10px;
+}
+.card {
+  position: fixed;
+  top: 0;
+  left: 100%;
+  width: 500px;
+  background-color: #453e3b;
+  height: 100vh;
+  transition: 0.5s;
+}
+.active .card {
+  left: calc(100% - 500px);
+}
+.active .container {
+  transform: translateX(-200px);
+}
+.card h1 {
+  color: #e8bc0e;
+  font-weight: 100;
+  margin: 0;
+  padding: 0 20px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+}
+.card .checkOut {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+.card .checkOut div {
+  background-color: #e8bc0e;
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  cursor: pointer;
+}
+.card .checkOut div:nth-child(2) {
+  background-color: #1c1f25;
+  color: #fff;
+}
+.listCard li {
+  display: grid;
+  grid-template-columns: 100px repeat(3, 1fr);
+  color: #fff;
+  row-gap: 10px;
+}
+.listCard li div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.listCard li img {
+  width: 90%;
+}
+.listCard li button {
+  background-color: #fff5;
+  border: none;
+}
+.listCard .count {
+  margin: 0 10px;
 }