diff --git a/lib/components/product_box.dart b/lib/components/product_box.dart
index 0f55762..b3022e6 100644
--- a/lib/components/product_box.dart
+++ b/lib/components/product_box.dart
@@ -2,11 +2,18 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 
 class ProductBox extends StatefulWidget {
-  const ProductBox({Key? key, required this.imageUrl, required this.title, required this.fontSize, required this.callback})
+  const ProductBox(
+      {Key? key,
+      required this.imageUrl,
+      required this.title,
+      required this.discount,
+      required this.fontSize,
+      required this.callback})
       : super(key: key);
 
   final String imageUrl;
   final String title;
+  final int discount;
   final double fontSize;
   final Function() callback;
 
@@ -27,43 +34,71 @@ class _ProductBoxState extends State<ProductBox> {
         child: InkWell(
           onTap: () => widget.callback(),
           borderRadius: BorderRadius.circular(10),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
+          child: Stack(
             children: [
-              Flexible(
-                flex: 4,
-                child: CachedNetworkImage(
-                  imageUrl: widget.imageUrl,
-                  placeholder: (context, url) =>
-                      const CircularProgressIndicator(
-                    color: Color(0xff8B0000),
+              Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Flexible(
+                    flex: 4,
+                    child: CachedNetworkImage(
+                      imageUrl: widget.imageUrl,
+                      placeholder: (context, url) =>
+                          const CircularProgressIndicator(
+                        color: Color(0xff8B0000),
+                      ),
+                      errorWidget: (context, url, error) =>
+                          Image.asset('assets/images/image_error.webp'),
+                      fadeOutDuration: const Duration(milliseconds: 5),
+                      imageBuilder: (context, imageProvider) => Container(
+                        width: 300,
+                        height: 150,
+                        decoration: BoxDecoration(
+                            image: DecorationImage(
+                                image: imageProvider, fit: BoxFit.cover)),
+                      ),
+                    ),
                   ),
-                  errorWidget: (context, url, error) =>
-                      Image.asset('assets/images/image_error.webp'),
-                  fadeOutDuration: const Duration(milliseconds: 5),
-                  imageBuilder: (context, imageProvider) => Container(
-                    width: 300,
-                    height: 150,
-                    decoration: BoxDecoration(
-                        image: DecorationImage(
-                            image: imageProvider, fit: BoxFit.cover)),
-                  ),
-                ),
+                  Flexible(
+                    flex: 2,
+                    child: Container(
+                      margin: const EdgeInsets.only(top: 10, left: 5, right: 5),
+                      child: Text(
+                        widget.title,
+                        style: TextStyle(
+                            fontSize: widget.fontSize,
+                            color: Colors.white,
+                            fontWeight: FontWeight.w600),
+                        textAlign: TextAlign.center,
+                      ),
+                    ),
+                  )
+                ],
               ),
-              Flexible(
-                flex: 2,
-                child: Container(
-                  margin: const EdgeInsets.only(top: 10, left: 5, right: 5),
-                  child: Text(
-                    widget.title,
-                    style: TextStyle(
-                        fontSize: widget.fontSize,
-                        color: Colors.white,
-                        fontWeight: FontWeight.w600),
-                    textAlign: TextAlign.center,
-                  ),
-                ),
-              )
+              widget.discount != 0
+                  ? Column(
+                      mainAxisAlignment: MainAxisAlignment.start,
+                      children: [
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.end,
+                            children: [
+                              Container(
+                                  width: 50,
+                                  height: 20,
+                                  decoration: const BoxDecoration(
+                                      color: Colors.redAccent,
+                                      borderRadius: BorderRadius.only(
+                                          topLeft: Radius.circular(10.0),
+                                          bottomLeft: Radius.circular(10.0))),
+                                  margin: const EdgeInsets.only(top: 10.0),
+                                  child: Center(
+                                      child: Text("${widget.discount}%",
+                                          style: const TextStyle(
+                                              color: Colors.white)))),
+                            ],
+                          )
+                        ])
+                  : Container(),
             ],
           ),
         ),
diff --git a/lib/screens/products.dart b/lib/screens/products.dart
index 0a39280..e3b147f 100644
--- a/lib/screens/products.dart
+++ b/lib/screens/products.dart
@@ -56,6 +56,7 @@ class _ProductsState extends State<Products> {
                     imageUrl:
                         "https://nekoya.moe.team/img/${data[index]['IMAGE']}",
                     title: data[index]['TITLE'],
+                    discount: data[index]['DISCOUNT'],
                     fontSize: fontSize,
                     callback: () {
                       showModalBottomSheet(