diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index c122525c56e..1f9c4988171 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -612,7 +612,6 @@
                    "display_currency": product.currency_id,
                }'/>
           </h4>
-          <h4 class="d-none oe_not_available bg-warning">Option not available</h4>
       </div>
     </template>
 
@@ -990,11 +989,8 @@
     </template>
 
     <template id='coupon_form' name='Coupon form'>
-        <t t-if="request.params.get('code_not_available')" name="code_not_available">
-            <p class="bg-warning">This promo code is not available</p>
-        </t>
         <form t-att-action="'/shop/pricelist%s' % (redirect and '?r=' + redirect or '')"
-            method="post" class="mb32" name="coupon_code">
+            method="post" name="coupon_code">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
             <div class="input-group w-100">
                 <input name="promo" class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None"/>
@@ -1003,6 +999,9 @@
                 </div>
             </div>
         </form>
+        <t t-if="request.params.get('code_not_available')" name="code_not_available">
+            <div class="alert alert-danger text-left" role="alert">This promo code is not available.</div>
+        </t>
     </template>
 
     <template id="checkout">
diff --git a/addons/website_sale_coupon/views/website_sale_templates.xml b/addons/website_sale_coupon/views/website_sale_templates.xml
index fa38f91e726..608912300cb 100644
--- a/addons/website_sale_coupon/views/website_sale_templates.xml
+++ b/addons/website_sale_coupon/views/website_sale_templates.xml
@@ -25,41 +25,31 @@
     <xpath expr="//form[@name='coupon_code']" position="after">
         <t t-if="website_sale_order and website_sale_order.applied_coupon_ids">
             <t t-foreach="website_sale_order.applied_coupon_ids" t-as="coupon">
-                <div class="card bg-success text-white mt16">
-                    <div class="card-header clearfix">
-                    <span class="float-left">You have successfully applied following promo code: <b t-esc="coupon.code"/></span>
-                    </div>
+                <div class="alert alert-success text-left mt16" role="alert">
+                    You have successfully applied following promo code: <strong t-esc="coupon.code"/>
                 </div>
             </t>
         </t>
         <t t-if="website_sale_order and website_sale_order.promo_code">
-            <div class="card bg-success text-white mt16">
-                <div class="card-header clearfix">
-                <span class="float-left">You have successfully applied following promo code: <b t-esc="website_sale_order.promo_code"/></span>
-                </div>
+            <div class="alert alert-success text-left mt16" role="alert">
+                You have successfully applied following promo code: <strong t-esc="website_sale_order.promo_code"/>
             </div>
         </t>
         <t t-if="website_sale_order and website_sale_order.generated_coupon_ids">
             <t t-foreach="website_sale_order.generated_coupon_ids.filtered(lambda c: c.state != 'expired')" t-as="coupon">
-                <div class="card bg-success text-white mt16">
-                    <div class="card-header clearfix">
-                        <span class="float-left">Your reward <b t-esc="coupon.discount_line_product_id.name"/> is available on a next order with this promo code: <b t-esc="coupon.code"/></span>
-                    </div>
+                <div class="alert alert-success text-left mt16" role="alert">
+                    Your reward <strong t-esc="coupon.discount_line_product_id.name"/> is available on a next order with this promo code: <strong t-esc="coupon.code"/>
                 </div>
             </t>
         </t>
         <t t-if="request.params.get('code_not_available')">
-            <div class="card bg-danger text-white mt16">
-                <div class="card-header clearfix">
-                    <span class="float-left">Invalid or expired promo code</span>
-                </div>
+            <div class="alert alert-danger text-left mt16" role="alert">
+                Invalid or expired promo code.
             </div>
         </t>
         <t t-if="website_sale_order.get_promo_code_error(delete=False)">
-            <div class="card bg-danger text-white mt16">
-                <div class="card-header clearfix">
-                    <span class="float-left"><t t-esc="website_sale_order.get_promo_code_error()" /></span>
-                </div>
+            <div class="alert alert-danger text-left mt16" role="alert">
+                <t t-esc="website_sale_order.get_promo_code_error()"/>
             </div>
         </t>
     </xpath>