diff --git a/app/components/HorizontalProductList.tsx b/app/components/HorizontalProductList.tsx
index 419f38e..58cd66a 100644
--- a/app/components/HorizontalProductList.tsx
+++ b/app/components/HorizontalProductList.tsx
@@ -4,6 +4,7 @@ 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 {
@@ -249,13 +250,16 @@ const ProductThumbnail = ({
 };
 
 const DiscountBadge = ({ discountPercent }: { discountPercent?: number }) => {
-  if (!discountPercent) return null;
   return (
-    <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 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>
   );
 };
diff --git a/app/components/MondrianProductList.tsx b/app/components/MondrianProductList.tsx
index 1306d0a..c5ada16 100644
--- a/app/components/MondrianProductList.tsx
+++ b/app/components/MondrianProductList.tsx
@@ -10,6 +10,7 @@ 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;
@@ -428,13 +429,16 @@ const ProductCard = ({
   );
 };
 const DiscountBadge = ({ discountPercent }: { discountPercent?: number }) => {
-  if (!discountPercent) return null;
   return (
-    <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 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>
   );
 };