diff --git a/app/components/HorizontalProductList.tsx b/app/components/HorizontalProductList.tsx
index 58cd66a..419f38e 100644
--- a/app/components/HorizontalProductList.tsx
+++ b/app/components/HorizontalProductList.tsx
@@ -4,7 +4,6 @@ import { motion } from "framer-motion";
 import { ChevronLeft, ChevronRight, Images } from "lucide-react";
 import { Skeleton } from "./ui/skeleton";
 import { ErrorState } from "./UiProvider";
-import discountRed from "~/assets/icons/product/discount-red.svg";
 import placeholderImage from "~/assets/icons/product.png";
 
 interface HorizontalProduct {
@@ -250,16 +249,13 @@ const ProductThumbnail = ({
 };
 
 const DiscountBadge = ({ discountPercent }: { discountPercent?: number }) => {
+  if (!discountPercent) return null;
   return (
-    <div className="absolute items-center gap-1 flex top-1 right-1 z-10 bg-[#FDFDFD]/75 text-[#FF3B30] py-[2px] px-2 rounded-[15px]">
-      <p
-        className="text-B14 font-bold leading-[20px]"
-        dir="ltr"
-        style={{ fontFamily: "Arial, sans-serif" }}
-      >
-        {discountPercent}
-      </p>
-      <img src={discountRed} alt="discount-red" className="w-5 h-5" />
+    <div
+      dir="ltr"
+      className="absolute top-2 right-2 z-10 bg-WHITE/90 text-RED font-extrabold text-[12px] px-2 py-[3px] rounded-full backdrop-blur-sm"
+    >
+      ٪{Math.round(discountPercent).toLocaleString("fa-IR")}
     </div>
   );
 };
diff --git a/app/components/MondrianProductList.tsx b/app/components/MondrianProductList.tsx
index c5ada16..1306d0a 100644
--- a/app/components/MondrianProductList.tsx
+++ b/app/components/MondrianProductList.tsx
@@ -10,7 +10,6 @@ import { useDeleteInstagramPost } from "~/requestHandler/use-instagram-hooks";
 import placeholderImage from "~/assets/icons/product.png";
 import placeholderImageDark from "~/assets/icons/product-dark.png";
 import { useRootData } from "~/hooks/use-root-data";
-import discountRed from "~/assets/icons/product/discount-red.svg";
 
 interface MondrianList {
   id?: string;
@@ -429,16 +428,13 @@ const ProductCard = ({
   );
 };
 const DiscountBadge = ({ discountPercent }: { discountPercent?: number }) => {
+  if (!discountPercent) return null;
   return (
-    <div className="absolute items-center gap-1 flex top-1 right-1 z-10 bg-[#FDFDFD]/75 text-[#FF3B30] py-[2px] px-2 rounded-[15px]">
-      <p
-        className="text-B14 font-bold leading-[20px]"
-        dir="ltr"
-        style={{ fontFamily: "Arial, sans-serif" }}
-      >
-        {discountPercent}
-      </p>
-      <img src={discountRed} alt="discount-red" className="w-5 h-5" />
+    <div
+      dir="ltr"
+      className="absolute top-2 right-2 z-10 bg-WHITE/90 text-RED font-extrabold text-[12px] px-2 py-[3px] rounded-full backdrop-blur-sm"
+    >
+      ٪{Math.round(discountPercent).toLocaleString("fa-IR")}
     </div>
   );
 };