diff --git a/src/actions/cart.tsx b/src/actions/cart.tsx
index 2828d5af..bebe1d3f 100644
--- a/src/actions/cart.tsx
+++ b/src/actions/cart.tsx
@@ -3,45 +3,63 @@ import {
   getCookieCart,
   updateCookieCartProduct,
   removeCookieCartProduct,
-  changeCookieCartProductQuanity,
   getCartProductKey,
 } from "@/lib/utils/cart";
 
 export const GRBPWR_CART = "grbpwr-cart";
 
-export async function addCartProduct(slug: string, size: string) {
+export async function addCartProduct({
+  slug,
+  size,
+  price,
+}: {
+  slug: string;
+  size: string;
+  price: number;
+}) {
   "use server";
 
   const cartData = getCookieCart();
 
   try {
     if (!cartData) {
-      createCookieCartProduct(slug, size);
+      createCookieCartProduct({ productSlug: slug, size, price });
 
       return;
     }
 
     const productKey = getCartProductKey(slug, size);
     const cartProduct = cartData.products[productKey];
-    let newProductQuanity;
+    const newProduct = {
+      quanity: 0,
+      price: 0,
+    };
 
     if (cartProduct) {
-      newProductQuanity = cartProduct.quanity + 1;
+      newProduct.quanity = cartProduct.quanity + 1;
+      newProduct.price = cartProduct.price + price;
     } else {
-      newProductQuanity = 1;
+      newProduct.quanity = 1;
+      newProduct.price = price;
     }
 
-    updateCookieCartProduct(slug, size, newProductQuanity);
+    updateCookieCartProduct({ productSlug: slug, size, data: newProduct });
   } catch (error) {
     console.log("failed to parse cart", error);
   }
 }
 
-export async function removeCartProduct(slug: string, size: string) {
+export async function removeCartProduct({
+  productSlug,
+  size,
+}: {
+  productSlug: string;
+  size: string;
+}) {
   "use server";
 
   try {
-    removeCookieCartProduct(slug, size);
+    removeCookieCartProduct(productSlug, size);
   } catch (error) {
     console.log("failed to parse cart", error);
   }
@@ -51,25 +69,48 @@ export async function changeCartProductQuanity({
   slug,
   size,
   operation,
+  price,
 }: {
   slug: string;
+  price: number;
   size: string;
   operation: "increase" | "decrease";
 }) {
   "use server";
+  const cartData = getCookieCart();
 
   try {
-    const cartData = getCookieCart();
-    if (
-      operation === "decrease" &&
-      cartData?.products[getCartProductKey(slug, size)]?.quanity === 1
-    ) {
+    if (!cartData) return;
+
+    const productKey = getCartProductKey(slug, size);
+    const cartProduct = cartData.products[productKey];
+
+    if (operation === "decrease" && cartProduct.quanity === 1) {
       removeCookieCartProduct(slug, size);
 
       return;
     }
 
-    changeCookieCartProductQuanity(slug, size, operation);
+    const newProduct = {
+      quanity: cartProduct.quanity,
+      price: cartProduct.price,
+    };
+
+    if (operation === "decrease") {
+      newProduct.quanity = cartProduct.quanity - 1;
+      newProduct.price = cartProduct.price - price;
+    }
+
+    if (operation === "increase") {
+      newProduct.quanity = cartProduct.quanity + 1;
+      newProduct.price = cartProduct.price + price;
+    }
+
+    updateCookieCartProduct({
+      productSlug: slug,
+      size,
+      data: newProduct,
+    });
   } catch (error) {
     console.log("failed to parse cart", error);
   }
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index b9c10dba..1f9c4cb0 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -5,10 +5,11 @@ import { CartProductsSkeleton } from "@/components/ui/Skeleton";
 import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
 import Link from "next/link";
+import TotalPrice from "@/components/cart/TotalPrice";
 
 export const dynamic = "force-dynamic";
 
-export default async function Page() {
+export default async function CartPage() {
   return (
     <CoreLayout>
       <div className="relative flex gap-32">
@@ -24,8 +25,9 @@ export default async function Page() {
         </div>
         <div className="relative grow">
           <div className="sticky top-20">
-            <p className="mb-8 text-sm">total:</p>
-            <p className="mb-2 text-lg">170$</p>
+            {/* <p className="mb-8 text-sm">total:</p>
+            <p className="mb-2 text-lg">170$</p> */}
+            <TotalPrice />
 
             <Button asChild style={ButtonStyle.simpleButton}>
               <Link href="/cart/checkout">checkout</Link>
diff --git a/src/app/product/[...productParams]/page.tsx b/src/app/product/[...productParams]/page.tsx
index e4118176..976417df 100644
--- a/src/app/product/[...productParams]/page.tsx
+++ b/src/app/product/[...productParams]/page.tsx
@@ -50,8 +50,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
     id: parseInt(id),
   });
 
-  console.log("product22");
-  console.log(product);
+  const baseCurrencyPrice =
+    product?.product?.productDisplay?.productBody?.price?.value;
 
   return (
     <CoreLayout hideForm>
@@ -76,12 +76,16 @@ export default async function ProductPage({ params }: ProductPageProps) {
             {product?.product?.productDisplay?.productBody?.description}
           </div>
           <div className="mt-4">measurements</div>
-          <AddToCartForm
-            handleSubmit={addCartProduct}
-            slug={product?.product?.slug || ""}
-            // price={0}
-            sizes={product?.sizes || []}
-          />
+          {baseCurrencyPrice &&
+            product?.product?.slug &&
+            product?.sizes?.length && (
+              <AddToCartForm
+                handleSubmit={addCartProduct}
+                slug={product.product.slug}
+                price={parseInt(baseCurrencyPrice)}
+                sizes={product.sizes}
+              />
+            )}
         </div>
       </div>
     </CoreLayout>
diff --git a/src/components/cart/CartItemRow.tsx b/src/components/cart/CartItemRow.tsx
index 2c574973..b61342a7 100644
--- a/src/components/cart/CartItemRow.tsx
+++ b/src/components/cart/CartItemRow.tsx
@@ -15,6 +15,7 @@ export default function CartItemRow({
   if (!product) return null;
 
   const { product: p } = product;
+  const basicCurrencyValue = p?.productDisplay?.productBody?.price?.value;
 
   return (
     <div className="flex justify-between gap-6 text-textColor">
@@ -34,12 +35,15 @@ export default function CartItemRow({
         </div>
       </div>
       <div className="flex w-1/2 whitespace-nowrap text-sm">
-        <ProductAmountButtons
-          slug={p?.slug || ""}
-          size={size}
-          removeProduct={removeCartProduct}
-          changeProductAmount={changeCartProductQuanity}
-        />
+        {p?.slug && basicCurrencyValue && (
+          <ProductAmountButtons
+            slug={p?.slug || ""}
+            size={size}
+            price={parseInt(basicCurrencyValue)}
+            removeProduct={removeCartProduct}
+            changeProductAmount={changeCartProductQuanity}
+          />
+        )}
         <div className="font-bold">quanity: {quanity}</div>
       </div>
       <div className="flex w-1/2 flex-col items-end space-y-2">
diff --git a/src/components/cart/CartPopup.tsx b/src/components/cart/CartPopup.tsx
index 265c6141..38cc951f 100644
--- a/src/components/cart/CartPopup.tsx
+++ b/src/components/cart/CartPopup.tsx
@@ -1,13 +1,19 @@
 "use client";
 
-import Button from "@/components/ui/Button";
 import { useState } from "react";
-import { ButtonStyle } from "../ui/Button/styles";
 import Link from "next/link";
-import { cn } from "@/lib/utils";
 import { useClickAway } from "@uidotdev/usehooks";
+import Button from "@/components/ui/Button";
+import { cn } from "@/lib/utils";
+import { ButtonStyle } from "../ui/Button/styles";
 
-export default function CartPopup({ children }: { children: React.ReactNode }) {
+export default function CartPopup({
+  children,
+  itemsQuanity,
+}: {
+  children: React.ReactNode;
+  itemsQuanity?: number;
+}) {
   const [open, setOpenStatus] = useState(false);
 
   const ref = useClickAway<HTMLDivElement>(() => {
@@ -21,7 +27,7 @@ export default function CartPopup({ children }: { children: React.ReactNode }) {
           onClick={() => setOpenStatus(!open)}
           style={ButtonStyle.underlinedButton}
         >
-          cart
+          cart {itemsQuanity ? `(${itemsQuanity})` : ""}
         </Button>
         <div className="blueTheme">
           <div
@@ -33,16 +39,7 @@ export default function CartPopup({ children }: { children: React.ReactNode }) {
             )}
           >
             <div className="mb-6 text-textColor">added to cart {"[06]"}</div>
-            <div className="relative">
-              <div className="no-scroll-bar relative max-h-[800px] space-y-5 overflow-y-scroll pb-5">
-                {children}
-              </div>
-              <div className="absolute bottom-0 left-0 h-28 w-full bg-gradient-to-t from-bgColor"></div>
-            </div>
-            <div className="mb-3 flex justify-between border-t border-dashed border-textColor pt-5 text-textColor">
-              <span>total:</span>
-              <span>170$</span>
-            </div>
+            {children}
             <div className="flex justify-end gap-2">
               <Button asChild style={ButtonStyle.simpleButton}>
                 <Link href="/cart">cart</Link>
diff --git a/src/components/cart/CartProductsList.tsx b/src/components/cart/CartProductsList.tsx
index 0f8a21ab..bbd7c11c 100644
--- a/src/components/cart/CartProductsList.tsx
+++ b/src/components/cart/CartProductsList.tsx
@@ -1,7 +1,6 @@
 import CartItemRow from "@/components/cart/CartItemRow";
 import Button from "@/components/ui/Button";
 import { serviceClient } from "@/lib/api";
-import { getProductPrice } from "@/lib/utils";
 import {
   getCartProductSlugAndSizeFromKey,
   getCookieCart,
@@ -11,6 +10,9 @@ import Link from "next/link";
 export default async function CartProductsList() {
   const cartData = getCookieCart();
 
+  console.log("cartData");
+  console.log(cartData);
+
   if (!cartData || !cartData.products) return null;
 
   const productsPromises = Object.entries(cartData.products).map(
diff --git a/src/components/cart/ProductAmountButtons.tsx b/src/components/cart/ProductAmountButtons.tsx
index 3ae2137a..c4f44735 100644
--- a/src/components/cart/ProductAmountButtons.tsx
+++ b/src/components/cart/ProductAmountButtons.tsx
@@ -8,14 +8,23 @@ type Props = {
     slug,
     size,
     operation,
+    price,
   }: {
     slug: string;
     size: string;
+    price: number;
     operation: "increase" | "decrease";
   }) => void;
-  removeProduct: (slug: string, size: string) => void;
+  removeProduct: ({
+    productSlug,
+    size,
+  }: {
+    productSlug: string;
+    size: string;
+  }) => void;
   slug: string;
   size: string;
+  price: number;
 };
 
 export default function ProductAmountButtons({
@@ -23,6 +32,7 @@ export default function ProductAmountButtons({
   removeProduct,
   slug,
   size,
+  price,
 }: Props) {
   // todo: check if product is in stock
 
@@ -31,23 +41,31 @@ export default function ProductAmountButtons({
       <div className="flex ">
         <Button
           style={ButtonStyle.default}
-          onClick={() =>
-            changeProductAmount({ slug, size, operation: "increase" })
-          }
+          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+            e.preventDefault();
+
+            changeProductAmount({ slug, size, operation: "increase", price });
+          }}
         >
           [+]
         </Button>
         <Button
           style={ButtonStyle.default}
-          onClick={() =>
-            changeProductAmount({ slug, size, operation: "decrease" })
-          }
+          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+            e.preventDefault();
+
+            changeProductAmount({ slug, size, operation: "decrease", price });
+          }}
         >
           [-]
         </Button>
         <Button
           style={ButtonStyle.default}
-          onClick={() => removeProduct(slug, size)}
+          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+            e.preventDefault();
+
+            removeProduct({ productSlug: slug, size });
+          }}
         >
           [x]
         </Button>
diff --git a/src/components/cart/TotalPrice/SelectedCurrency.tsx b/src/components/cart/TotalPrice/SelectedCurrency.tsx
new file mode 100644
index 00000000..94684953
--- /dev/null
+++ b/src/components/cart/TotalPrice/SelectedCurrency.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useHeroContext } from "@/components/contexts/HeroContext";
+
+export default function SelectedCurrency({
+  baseCurrencyTotal,
+}: {
+  baseCurrencyTotal: number;
+}) {
+  const { selectedCurrency } = useHeroContext();
+
+  return (
+    <div>
+      <div>total</div>
+      <div> base currency: {baseCurrencyTotal}</div>
+      <div>
+        todo: convert to {selectedCurrency}: {baseCurrencyTotal}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/cart/TotalPrice/index.tsx b/src/components/cart/TotalPrice/index.tsx
new file mode 100644
index 00000000..f7b80af7
--- /dev/null
+++ b/src/components/cart/TotalPrice/index.tsx
@@ -0,0 +1,19 @@
+import { getCookieCart } from "@/lib/utils/cart";
+import SelectedCurrency from "./SelectedCurrency";
+
+export default function TotalPrice() {
+  const cartData = getCookieCart();
+
+  if (!cartData) return;
+
+  const total = Object.values(cartData.products).reduce(
+    (acc, p) => acc + p.price,
+    0,
+  );
+
+  return (
+    <div>
+      <SelectedCurrency baseCurrencyTotal={total} />
+    </div>
+  );
+}
diff --git a/src/components/forms/AddToCartForm/index.tsx b/src/components/forms/AddToCartForm/index.tsx
index 09248985..fda7c52b 100644
--- a/src/components/forms/AddToCartForm/index.tsx
+++ b/src/components/forms/AddToCartForm/index.tsx
@@ -12,10 +12,20 @@ export default function AddToCartForm({
   handleSubmit,
   sizes,
   slug,
+  price,
 }: {
-  handleSubmit: (slug: string, size: string) => Promise<void>;
+  handleSubmit: ({
+    slug,
+    size,
+    price,
+  }: {
+    slug: string;
+    size: string;
+    price: number;
+  }) => Promise<void>;
   slug: string;
   sizes: common_ProductSize[];
+  price: number;
 }) {
   const [loading, setLoadingStatus] = useState(false);
   const form = useForm<AddToCartData>({
@@ -27,7 +37,7 @@ export default function AddToCartForm({
 
     setLoadingStatus(true);
     try {
-      await handleSubmit(slug, data.size);
+      await handleSubmit({ slug, size: data.size, price });
     } catch (error) {
       console.error(error);
     } finally {
diff --git a/src/components/layouts/CoreLayout.tsx b/src/components/layouts/CoreLayout.tsx
index eef7949a..2639a85f 100644
--- a/src/components/layouts/CoreLayout.tsx
+++ b/src/components/layouts/CoreLayout.tsx
@@ -6,6 +6,7 @@ import CartPopup from "@/components/cart/CartPopup";
 import Link from "next/link";
 import { Suspense } from "react";
 import CartProductsList from "../cart/CartProductsList";
+import TotalPrice from "../cart/TotalPrice";
 
 export default function CoreLayout({
   children,
@@ -39,9 +40,19 @@ export default function CoreLayout({
 
           <div className="relative hidden w-24 md:block">
             <nav className="sticky top-24 flex flex-col items-center gap-60">
-              <CartPopup>
+              <CartPopup itemsQuanity={22}>
                 <Suspense fallback={null}>
-                  <CartProductsList />
+                  <div className="relative">
+                    <div className="no-scroll-bar relative max-h-[500px] space-y-5 overflow-y-scroll pb-5">
+                      <CartProductsList />
+                    </div>
+
+                    {/* when cursor is in gradient area-scroll doesnt work */}
+                    <div className="absolute bottom-0 left-0 h-28 w-full bg-gradient-to-t from-bgColor"></div>
+                  </div>
+                  <div className="mb-3 flex justify-between border-t border-dashed border-textColor pt-5 text-textColor">
+                    <TotalPrice />
+                  </div>
                 </Suspense>
               </CartPopup>
               <Button style={ButtonStyle.underlinedButton}>
diff --git a/src/lib/utils/cart.ts b/src/lib/utils/cart.ts
index 5c400a97..a932127e 100644
--- a/src/lib/utils/cart.ts
+++ b/src/lib/utils/cart.ts
@@ -2,7 +2,7 @@ import { GRBPWR_CART } from "@/actions/cart";
 import type { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
 import { cookies } from "next/headers";
 
-type CookieCartProductData = { quanity: number };
+type CookieCartProductData = { quanity: number; price: number };
 type CookieCartProduct = Record<string, CookieCartProductData>;
 
 export function getCartProductKey(slug: string, size: string) {
@@ -35,7 +35,15 @@ export function getCookieCart(): { products: CookieCartProduct } | null {
   return null;
 }
 
-export function createCookieCartProduct(productSlug: string, size: string) {
+export function createCookieCartProduct({
+  productSlug,
+  size,
+  price,
+}: {
+  productSlug: string;
+  size: string;
+  price: number;
+}) {
   const cookieStore = cookies();
 
   cookieStore.set(
@@ -44,17 +52,22 @@ export function createCookieCartProduct(productSlug: string, size: string) {
       products: {
         [getCartProductKey(productSlug, size)]: {
           quanity: 1,
+          price,
         },
       },
     }),
   );
 }
 
-export function updateCookieCartProduct(
-  productSlug: string,
-  size: string,
-  quanity: number,
-) {
+export function updateCookieCartProduct({
+  productSlug,
+  size,
+  data,
+}: {
+  productSlug: string;
+  size: string;
+  data: CookieCartProductData;
+}) {
   const cartData = getCookieCart();
   const cookieStore = cookies();
 
@@ -68,7 +81,7 @@ export function updateCookieCartProduct(
         ...cartData?.products,
         [productKey]: {
           ...cartData?.products[productKey],
-          quanity,
+          ...data,
         },
       },
     }),
@@ -90,37 +103,3 @@ export function removeCookieCartProduct(productSlug: string, size: string) {
     }),
   );
 }
-
-export function changeCookieCartProductQuanity(
-  productSlug: string,
-  size: string,
-  operation: "increase" | "decrease",
-) {
-  const cartData = getCookieCart();
-  const cookieStore = cookies();
-
-  let operationValue = 0;
-  if (operation === "increase") {
-    operationValue = 1;
-  }
-  if (operation === "decrease") {
-    operationValue = -1;
-  }
-
-  const productKey = getCartProductKey(productSlug, size);
-  const initialQuanity = cartData?.products[productKey].quanity || 0;
-
-  cookieStore.set(
-    GRBPWR_CART,
-    JSON.stringify({
-      ...cartData,
-      products: {
-        ...cartData?.products,
-        [productKey]: {
-          ...cartData?.products[productKey],
-          quanity: initialQuanity + operationValue,
-        },
-      },
-    }),
-  );
-}