diff --git a/public/images/slide-1.jpg b/public/images/slide-1.jpg
new file mode 100644
index 0000000..96ae292
Binary files /dev/null and b/public/images/slide-1.jpg differ
diff --git a/public/images/slide-2.jpg b/public/images/slide-2.jpg
new file mode 100644
index 0000000..2ba73f3
Binary files /dev/null and b/public/images/slide-2.jpg differ
diff --git a/public/images/slide-3.jpg b/public/images/slide-3.jpg
new file mode 100644
index 0000000..d46498c
Binary files /dev/null and b/public/images/slide-3.jpg differ
diff --git a/src/components/product/card.tsx b/src/components/product/card.tsx
index 3df8d6f..067ed44 100644
--- a/src/components/product/card.tsx
+++ b/src/components/product/card.tsx
@@ -1,5 +1,7 @@
+/* eslint-disable react/jsx-one-expression-per-line */
 /* eslint-disable object-curly-newline */
-import { Button } from "antd";
+import { addCommas } from "@persian-tools/persian-tools";
+import { Button, Divider } from "antd";
 import { Link } from "react-router-dom";
 
 interface Props {
@@ -13,9 +15,9 @@ function Card({ url, title, price, quantity, imageURL }: Props) {
   return (
     <Link
       to={url}
-      className=" flex h-[220px] w-full flex-col overflow-hidden  rounded-lg border-2 border-[var(--tg-theme-secondary-bg-color)]">
+      className=" flex h-[280px] w-full  flex-col overflow-hidden  rounded-lg border-2 border-[var(--tg-theme-secondary-bg-color)]">
       <div
-        className=" ml-auto h-40 w-full  bg-[var(--tg-theme-secondary-bg-color)] bg-cover bg-no-repeat "
+        className=" ml-auto h-[280px] w-full  bg-[var(--tg-theme-secondary-bg-color)] bg-cover bg-no-repeat "
         style={{ backgroundImage: `url('${imageURL}')` }}
       />
       <div className="flex h-full w-full flex-col items-start justify-between gap-3 p-2">
@@ -29,7 +31,10 @@ function Card({ url, title, price, quantity, imageURL }: Props) {
             </div>
             <div className="select-none text-sm">غذا</div>
           </div> */}
-          <div className="self-end text-right">قیمت :{price} تومان</div>
+          <Divider className="my-0 py-0" />
+          <div className="flex gap-2 self-end text-right text-sm">
+            <span>تومان</span> <span> {addCommas(price || 0)}</span>
+          </div>
           {/* <div className="self-start text-left">تعداد :{quantity} عدد</div> */}
         </div>
         <Button className="w-full self-end" type="default">
diff --git a/src/containers/hero-slider.tsx b/src/containers/hero-slider.tsx
index da23e46..3ae7858 100644
--- a/src/containers/hero-slider.tsx
+++ b/src/containers/hero-slider.tsx
@@ -11,19 +11,12 @@ const contentStyle: React.CSSProperties = {
 
 function HeroSlider() {
   return (
-    <Carousel rootClassName="rounded-lg overflow-hidden  " autoplay>
-      <div>
-        <h3 style={contentStyle}>1</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>2</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>3</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>4</h3>
-      </div>
+    <Carousel rootClassName="rounded-lg overflow-hidden" autoplay>
+      {[1, 2, 3].map((_, idx) => (
+        <div className="h-[160px] w-full">
+          <img src={`/images/slide-${_}.jpg`} alt="slider" />
+        </div>
+      ))}
     </Carousel>
   );
 }
diff --git a/src/pages/user/product/single.tsx b/src/pages/user/product/single.tsx
index 51a5224..0bab1f1 100644
--- a/src/pages/user/product/single.tsx
+++ b/src/pages/user/product/single.tsx
@@ -19,7 +19,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router";
 
 function ProductSingle() {
-  const [count, setcount] = useState(1);
+  const [count, setCount] = useState(1);
   const { product_id } = useParams();
   const mutation = useAddToCart();
   const { id } = useTelegramUser();
@@ -54,8 +54,8 @@ function ProductSingle() {
     );
   };
 
-  const decriment = () => count > 1 && setcount(count - 1);
-  const incriment = () => count < 100 && setcount(count + 1);
+  const decriment = () => count > 1 && setCount(count - 1);
+  const incriment = () => count < 100 && setCount(count + 1);
 
   return (
     <Container title={data?.product_Name || ""} backwardUrl={-1}>
@@ -82,7 +82,7 @@ function ProductSingle() {
           <div className="flex w-full justify-end">
             <div>قیمت :{data?.price && addCommas(data?.price)} تومان</div>
           </div>
-          <div className="my-4 flex gap-2">
+          <div className="my-4 flex flex-col gap-2">
             <div className="flex w-44 items-center justify-center gap-2">
               <Button
                 htmlType="button"
@@ -100,7 +100,7 @@ function ProductSingle() {
                 maxLength={2}
                 onChange={(e) => {
                   if (e > 1 || e < 100) {
-                    setcount(e);
+                    setCount(e);
                   }
                 }}
                 defaultValue={count}