diff --git a/pos_fixed_discount/__manifest__.py b/pos_fixed_discount/__manifest__.py
index f2b133fc6d..d338742d42 100644
--- a/pos_fixed_discount/__manifest__.py
+++ b/pos_fixed_discount/__manifest__.py
@@ -3,7 +3,7 @@
 {
     "name": "Point of Sale Fixed Discounts",
     "summary": "Allow to apply discounts with fixed amount",
-    "version": "13.0.1.0.0",
+    "version": "14.0.1.0.0",
     "development_status": "Beta",
     "category": "Point of Sale",
     "website": "https://github.com/OCA/pos",
diff --git a/pos_fixed_discount/readme/CONTRIBUTORS.rst b/pos_fixed_discount/readme/CONTRIBUTORS.rst
index 67cbd0f014..0b753a94c6 100644
--- a/pos_fixed_discount/readme/CONTRIBUTORS.rst
+++ b/pos_fixed_discount/readme/CONTRIBUTORS.rst
@@ -1,2 +1,3 @@
  * Lorenzo Battistini - https://takobi.online
  * Foram Shah <foram.shah@initos.com>
+ * Helly kapatel <helly.kapatel@initos.com>
diff --git a/pos_fixed_discount/static/src/js/FixedDiscountButton.js b/pos_fixed_discount/static/src/js/FixedDiscountButton.js
new file mode 100644
index 0000000000..8de10e52ca
--- /dev/null
+++ b/pos_fixed_discount/static/src/js/FixedDiscountButton.js
@@ -0,0 +1,85 @@
+odoo.define("pos_fixed_discount.FixedDiscountButton", function (require) {
+    "use strict";
+
+    const PosComponent = require("point_of_sale.PosComponent");
+    const ProductScreen = require("point_of_sale.ProductScreen");
+    const {useListener} = require("web.custom_hooks");
+    const Registries = require("point_of_sale.Registries");
+
+    class FixedDiscountButton extends PosComponent {
+        constructor() {
+            super(...arguments);
+            useListener("click", this.onClick);
+        }
+        async onClick() {
+            var self = this;
+            const {confirmed, payload} = await this.showPopup("NumberPopup", {
+                title: this.env._t("Discount Amount"),
+                startingValue: 0,
+            });
+            if (confirmed) {
+                var val = Math.round(Math.max(0, Math.min(100, parseFloat(payload))));
+                this.apply_discount(val);
+            }
+        }
+
+        async apply_discount(amount) {
+            var order = this.env.pos.get_order();
+            var lines = order.get_orderlines();
+            var product = this.env.pos.db.get_product_by_id(
+                this.env.pos.config.discount_product_id[0]
+            );
+            if (product === undefined) {
+                await this.showPopup("ErrorPopup", {
+                    title: this.env._t("No discount product found"),
+                    body: this.env._t(
+                        "The discount product seems misconfigured. Make sure it is flagged as 'Can be Sold' and 'Available in Point of Sale'."
+                    ),
+                });
+                return;
+            }
+            // Remove existing discounts
+            for (const line of lines) {
+                if (line.get_product() === product) {
+                    order.remove_orderline(line);
+                }
+            }
+
+
+            // Add discount
+            // We add the price as manually set to avoid recomputation when changing customer.
+            if (product.taxes_id.length) {
+                var first_tax = this.env.pos.taxes_by_id[product.taxes_id[0]];
+                if (first_tax.price_include) {
+                    order.get_total_with_tax();
+                }
+            }
+            var discount = -amount;
+
+            if (discount < 0) {
+                order.add_product(product, {
+                    price: discount,
+                    lst_price: discount,
+                    extras: {
+                        price_manually_set: true,
+                    },
+                });
+            }
+        }
+    }
+    FixedDiscountButton.template = "FixedDiscountButton";
+
+    ProductScreen.addControlButton({
+        component: FixedDiscountButton,
+        condition: function () {
+            return (
+                this.env.pos.config.module_pos_discount &&
+                this.env.pos.config.discount_product_id
+            );
+        },
+    });
+
+    Registries.Component.add(FixedDiscountButton);
+
+    return FixedDiscountButton;
+});
diff --git a/pos_fixed_discount/static/src/js/discount.js b/pos_fixed_discount/static/src/js/discount.js
deleted file mode 100644
index 29e338c70e..0000000000
--- a/pos_fixed_discount/static/src/js/discount.js
+++ /dev/null
@@ -1,76 +0,0 @@
-odoo.define("pos_fixed_discount.pos_fixed_discount", function (require) {
-    "use strict";
-
-    var core = require("web.core");
-    var screens = require("point_of_sale.screens");
-
-    var _t = core._t;
-
-    var FixedDiscountButton = screens.ActionButtonWidget.extend({
-        template: "FixedDiscountButton",
-        button_click: function () {
-            var self = this;
-            this.gui.show_popup("number", {
-                title: _t("Discount Amount"),
-                value: 0,
-                confirm: function (val) {
-                    self.apply_discount(val);
-                },
-            });
-        },
-        apply_discount: function (amount) {
-            var order = this.pos.get_order();
-            var lines = order.get_orderlines();
-            var product = this.pos.db.get_product_by_id(
-                this.pos.config.discount_product_id[0]
-            );
-            if (product === undefined) {
-                this.gui.show_popup("error", {
-                    title: _t("No discount product found"),
-                    body: _t(
-                        "The discount product seems misconfigured. Make sure it is flagged as 'Can be Sold' and 'Available in Point of Sale'."
-                    ),
-                });
-                return;
-            }
-
-            // Remove existing discounts
-            var i = 0;
-            while (i < lines.length) {
-                if (lines[i].get_product() === product) {
-                    order.remove_orderline(lines[i]);
-                } else {
-                    i++;
-                }
-            }
-
-            // Add discount
-            // We add the price as manually set to avoid recomputation when changing customer.
-            var discount = -amount.replace(",", ".");
-
-            if (discount < 0) {
-                order.add_product(product, {
-                    price: discount,
-                    extras: {
-                        price_manually_set: true,
-                    },
-                });
-            }
-        },
-    });
-
-    screens.define_action_button({
-        name: "fixed_discount",
-        widget: FixedDiscountButton,
-        condition: function () {
-            return (
-                this.pos.config.module_pos_discount &&
-                this.pos.config.discount_product_id
-            );
-        },
-    });
-
-    return {
-        FixedDiscountButton: FixedDiscountButton,
-    };
-});
diff --git a/pos_fixed_discount/static/src/xml/discount_templates.xml b/pos_fixed_discount/static/src/xml/discount_templates.xml
index d29aa7700a..ebfb8984c5 100644
--- a/pos_fixed_discount/static/src/xml/discount_templates.xml
+++ b/pos_fixed_discount/static/src/xml/discount_templates.xml
@@ -1,15 +1,21 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates id="template" xml:space="preserve">
-    <t t-extend="DiscountButton">
-        <t t-jquery="div[class='control-button js_discount']" t-operation="replace">
-            <div class='control-button js_discount'>
-                <i class='fa fa-tag' /> Discount (%)
-            </div>
+    <t t-extend="pos_discount.DiscountButton">
+        <t t-jquery="span[class='control-button js_discount']" t-operation="replace">
+            <span class="control-button js_discount">
+                <i class="fa fa-tag" />
+                <span> </span>
+                <span>Discount (%)</span>
+            </span>
         </t>
     </t>
-    <t t-name="FixedDiscountButton">
-        <div class='control-button js_fixed_discount'>
-            <i class='fa fa-tag' /> Discount (Amount)
-        </div>
+
+    <t t-name="FixedDiscountButton" owl="1">
+        <span class="control-button js_fixed_discount">
+            <i class="fa fa-tag" />
+            <span> </span>
+            <span>Discount (Amount)</span>
+        </span>
     </t>
+
 </templates>