diff --git a/src/components/Modals/modal.scss b/src/components/Modals/modal.scss
index 5751c7c..1b4d5c1 100644
--- a/src/components/Modals/modal.scss
+++ b/src/components/Modals/modal.scss
@@ -58,7 +58,6 @@ button {
   font-size: 0.9rem;
   font-weight: 700;
   border: none;
-  border-radius: 3px;
   padding: 0.3rem 1rem;
   margin-left: 0.5rem;
 }
diff --git a/src/components/Products/Product.jsx b/src/components/Products/Product.jsx
index b01ac82..52ac3ed 100644
--- a/src/components/Products/Product.jsx
+++ b/src/components/Products/Product.jsx
@@ -3,10 +3,12 @@ import { UserContext } from "../../providers/index";
 import { coin, buy } from "../../assets/index";
 import { SuccessModal, FailureModal } from "../Modals/index";
 import { useModal } from "../../hooks/index";
+import { redeemProduct } from "../../services/productsService";
 import "./products.scss";
 
 const Product = ({
   item: {
+    _id,
     name,
     category,
     cost,
@@ -26,7 +28,10 @@ const Product = ({
   const canBuy = cost <= points;
 
   const openBuyModal = () => {
-    toggle();
+    redeemProduct(_id).then((res) => {
+      // toggle();
+      console.log(res);
+    });
   };
 
   return (
@@ -55,7 +60,7 @@ const Product = ({
       ) : (
         <>
           <div className="coins-left">
-            <span>You need: {cost - points}</span>
+            <span>You need: {cost - (points | 0)}</span>
             <img src={coin} alt="coins left" />
           </div>
           <div
@@ -63,7 +68,7 @@ const Product = ({
             style={{ backgroundColor: "#92a2a7da" }}
           >
             <div className="action">
-              <h3>{cost - points}</h3>
+              <h3>{cost - (points | 0)}</h3>
               <img src={coin} alt="coin" />
               <button>Get more coins</button>
             </div>
diff --git a/src/services/productsService.jsx b/src/services/productsService.jsx
index bfa3ac4..382dead 100644
--- a/src/services/productsService.jsx
+++ b/src/services/productsService.jsx
@@ -1,15 +1,13 @@
 import * as API from "../api/API";
 
-const requestHeaders = {
-  headers: {
-    "Content-Type": "application/json",
-    Authorization: `Bearer ${API.AUTH_TOKEN}`,
-  },
+const headers = {
+  "Content-Type": "application/json",
+  Authorization: `Bearer ${API.AUTH_TOKEN}`,
 };
 
 export const getProducts = async () => {
   try {
-    const response = await fetch(API.PRODUCTS, requestHeaders);
+    const response = await fetch(API.PRODUCTS, { headers });
     const json = await response.json();
     return json;
   } catch (error) {
@@ -22,11 +20,12 @@ export const redeemProduct = async (id) => {
     const response = await fetch(API.REDEEEM, {
       method: "POST",
       body: { productId: id },
-      requestHeaders,
+      headers,
     });
     const json = await response.json();
     return json;
   } catch (error) {
+    console.log("errrooor", error);
     return alert(JSON.stringify(error));
   }
 };
diff --git a/src/services/userService.jsx b/src/services/userService.jsx
index 70f3d86..b432d7e 100644
--- a/src/services/userService.jsx
+++ b/src/services/userService.jsx
@@ -1,15 +1,13 @@
 import * as API from "../api/API";
 
-const requestHeaders = {
-  headers: {
-    "Content-Type": "application/json",
-    Authorization: `Bearer ${API.AUTH_TOKEN}`,
-  },
+const headers = {
+  "Content-Type": "application/json",
+  Authorization: `Bearer ${API.AUTH_TOKEN}`,
 };
 
 export const getUser = async () => {
   try {
-    const response = await fetch(API.USER, requestHeaders);
+    const response = await fetch(API.USER, { headers });
     const json = await response.json();
     return json;
   } catch (error) {
@@ -22,7 +20,7 @@ export const addPoints = async (coins) => {
     const response = await fetch(API.ADD_POINTS, {
       method: "POST",
       body: { amount: coins },
-      requestHeaders,
+      headers,
     });
     const json = await response.json();
     return json;