diff --git a/payment_proof_attachment/__manifest__.py b/payment_proof_attachment/__manifest__.py
index d28332d2d..84f8bb646 100755
--- a/payment_proof_attachment/__manifest__.py
+++ b/payment_proof_attachment/__manifest__.py
@@ -36,6 +36,7 @@
     ],
     'data': [
         'views/attachment_templates.xml',
+        'data/payment_proof_attachment.xml'
     ],
     'assets': {
         'web.assets_frontend': [
diff --git a/payment_proof_attachment/controllers/payment_proof_attachment.py b/payment_proof_attachment/controllers/payment_proof_attachment.py
index 6ed01f368..2a9de2c5e 100755
--- a/payment_proof_attachment/controllers/payment_proof_attachment.py
+++ b/payment_proof_attachment/controllers/payment_proof_attachment.py
@@ -18,7 +18,7 @@
 #    (AGPL v3) along with this program.
 #    If not, see <http://www.gnu.org/licenses/>.
 ################################################################################
-from odoo import http
+from odoo import http, _
 from odoo.http import request
 
 
@@ -54,11 +54,13 @@ class WebsitePaymentProof(http.Controller):
             sale_id = int(kw.get('sale_id'))
         else:
             sale_id = request.session.sale_order_id
+        sale = request.env['sale.order'].sudo().browse(sale_id)
         attached_files = kw['attachments']
         for attachment in attached_files:
             name = attachment['name']
             content = attachment['content']
-            request.env['ir.attachment'].sudo().create({
+            payment_proof_attachment = request.env[
+                'ir.attachment'].sudo().create({
                 'name': name,
                 'res_model': 'sale.order',
                 'res_id': sale_id,
@@ -66,6 +68,20 @@ class WebsitePaymentProof(http.Controller):
                 'public': True,
                 'datas': content,
             })
+            copied_attachment = payment_proof_attachment.copy()
+            body = _("%s document is added by %s" % (
+                attachment['name'], request.env.user.name))
+            sale.message_post(body=body)
+            mail_template = request.env.ref(
+                'payment_proof_attachment'
+                '.payment_proof_attachment_email_template').id
+            payment_proof_template = request.env['mail.template'].browse(
+                mail_template)
+            payment_proof_template.attachment_ids = [
+                (6, 0, [copied_attachment.id])]
+            payment_proof_template.send_mail(sale_id, force_send=True)
+            payment_proof_template.attachment_ids = [(3, copied_attachment.id)]
+
         return
 
     @http.route(['/my_account_screen/show_updated'], type='json',
diff --git a/payment_proof_attachment/data/payment_proof_attachment.xml b/payment_proof_attachment/data/payment_proof_attachment.xml
new file mode 100644
index 000000000..cbf09725f
--- /dev/null
+++ b/payment_proof_attachment/data/payment_proof_attachment.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <data noupdate="1">
+        <record id="payment_proof_attachment_email_template"
+                model="mail.template">
+            <field name="name">Sales Order: Payment Proof Attachment</field>
+            <field name="model_id" ref="sale.model_sale_order"/>
+            <field name="subject">Payment Proof Attachment</field>
+            <field name="email_from">{{ (object.user_id.email_formatted or
+                user.email_formatted or '') }}
+            </field>
+            <field name="partner_to">{{ object.partner_id.id }}</field>
+            <field name="body_html" type="html">
+                <div style="margin: 0px; padding: 0px;">
+                    <span>Dear<t t-out="object.partner_id.name"/>,
+                    </span>
+                    <p>Your Payment Proof Attachment is Uploaded Successfully
+                    </p>
+                    <p>Best regards,</p>
+                    <span>
+                        <t t-out="object.company_id.name"/>
+                    </span>
+                </div>
+            </field>
+            <field name="lang">{{ object.partner_id.lang }}</field>
+            <field name="auto_delete" eval="False"/>
+        </record>
+    </data>
+</odoo>
diff --git a/payment_proof_attachment/static/description/assets/screenshots/scrn_5.png b/payment_proof_attachment/static/description/assets/screenshots/scrn_5.png
index d6c8891a4..78948d0ee 100644
Binary files a/payment_proof_attachment/static/description/assets/screenshots/scrn_5.png and b/payment_proof_attachment/static/description/assets/screenshots/scrn_5.png differ
diff --git a/payment_proof_attachment/static/description/index.html b/payment_proof_attachment/static/description/index.html
index ede3a4c05..f2097ca4d 100644
--- a/payment_proof_attachment/static/description/index.html
+++ b/payment_proof_attachment/static/description/index.html
@@ -203,7 +203,7 @@
                                 <div class="px-3">
                                     <h4 class="mt-2"
                                         style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
-                                      Admin can see the uploaded files in the backend.</h4>
+                                      Admin can see the uploaded files in the backend. Also, the mail will be sent to the customer.</h4>
                                 </div>
                             </div>
                         </div>
diff --git a/payment_proof_attachment/static/src/css/payment_proof.css b/payment_proof_attachment/static/src/css/payment_proof.css
index 68533bd98..b9b324532 100755
--- a/payment_proof_attachment/static/src/css/payment_proof.css
+++ b/payment_proof_attachment/static/src/css/payment_proof.css
@@ -54,7 +54,7 @@
 
 .payment_proof_modal_header {
   padding: 2px 16px;
-  background-color: #71639E;
+  background-color: #8595A2;
   color: white;
 }
 
@@ -62,7 +62,7 @@
 
 .payment_proof_modal_footer {
   padding: 2px 16px;
-  background-color: #71639E;
+  background-color: #8595A2;
   color: white;
 }
 
diff --git a/payment_proof_attachment/static/src/js/my_account_screen.js b/payment_proof_attachment/static/src/js/my_account_screen.js
index 5ac27d99e..4a688658f 100755
--- a/payment_proof_attachment/static/src/js/my_account_screen.js
+++ b/payment_proof_attachment/static/src/js/my_account_screen.js
@@ -5,7 +5,7 @@ publicWidget.registry.Template = publicWidget.Widget.extend({
     init() {
         this.rpc = this.bindService("rpc");
     },
-    selector: '.my_account_screen',
+    selector: '#wrapwrap',
     events: {
         'click #btnShowModal': '_onClickShowModal',
         'click .close_modal': '_onClickCloseModal',
@@ -13,6 +13,8 @@ publicWidget.registry.Template = publicWidget.Widget.extend({
         'click #payment_proof_update': '_onClickUpdateAttachment',
         'click #btnShowReceipt': '_onClickShowReceipt',
         'click #refresh_receipt': '_onClickShowReceipt',
+
+
     },
     /**
      *for showing the modal dialog
@@ -77,11 +79,11 @@ publicWidget.registry.Template = publicWidget.Widget.extend({
                 $(attachment_ids).each(function (attachment_id) {
                     var id = "/web/content/" + attachment_ids[attachment_id]['id']
                     var name = attachment_ids[attachment_id]['name']
-                    self.$el.find('#showing_updated_receipt').append("<a class='btn btn-outline-info' href='" + id + "'>" + name + " <i class='fa fa-download'></i></a><br/>");
+                    self.$el.find('#showing_updated_receipt').append("<a style='width:200px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' class='btn btn-outline-secondary' href='" + id + "'>" + name + " <i class='fa fa-download'></i></a><br/>");
                 });
             } else {
                 self.$el.find("#showing_updated_receipt").empty();
-                self.$el.find('#showing_updated_receipt').append("<p style='color:yellow;'>There is no attachments for this sale order.</p>")
+                self.$el.find('#showing_updated_receipt').append("<p style='color:red;'>There is no attachments for this sale order.</p>")
             }
         })
     }
diff --git a/payment_proof_attachment/static/src/js/payment_screen.js b/payment_proof_attachment/static/src/js/payment_screen.js
index 5df88c041..ed554eb54 100755
--- a/payment_proof_attachment/static/src/js/payment_screen.js
+++ b/payment_proof_attachment/static/src/js/payment_screen.js
@@ -19,12 +19,14 @@ publicWidget.registry.PaymentProof = publicWidget.Widget.extend({
      */
     _onClickShowModal: function () {
         this.el.querySelector('#myModal').style.display = 'block';
+//        document.querySelector('#wrapwrap').style.overflow = 'hidden';
     },
     /**
      *for closing the modal dialog
      */
     _onClickCloseModal: function () {
         this.el.querySelector('#myModal').style.display = 'none';
+//        document.querySelector('#wrapwrap').style.overflow = 'auto';
     },
     /**
      *getting content from the uploaded file
@@ -74,7 +76,7 @@ publicWidget.registry.PaymentProof = publicWidget.Widget.extend({
                 $(attachment_ids).each(function (attachment_id) {
                     var id = "/web/content/" + attachment_ids[attachment_id]['id']
                     var name = attachment_ids[attachment_id]['name']
-                    self.$el.find('#showing_updated_receipt').append("<a class='btn btn-outline-info' href='" + id + "'>" + name + " <i class='fa fa-download'></i></a><br/>");
+                    self.$el.find('#showing_updated_receipt').append("<a style='width:200px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' class='btn btn-outline-secondary' href='" + id + "'>" + name + " <i class='fa fa-download'></i></a><br/>");
                 });
             } else {
                 self.$el.find("#showing_updated_receipt").empty();
diff --git a/payment_proof_attachment/views/attachment_templates.xml b/payment_proof_attachment/views/attachment_templates.xml
index 824dcf7bc..d875dcbda 100755
--- a/payment_proof_attachment/views/attachment_templates.xml
+++ b/payment_proof_attachment/views/attachment_templates.xml
@@ -26,36 +26,38 @@
                         <div id="showing_updated_receipt" style="width:100%;"/>
                     </div>
                 </t>
-                <!-- The Modal -->
-                <div id="myModal" class="modal payment_proof_modal">
-                    <!-- Modal content -->
-                    <div class="modal-content payment_proof_modal_content">
-                        <div class="modal-header payment_proof_modal_header">
-                            <h5>Upload Transaction Receipt</h5>
-                            <span class="close_modal">
-                                <i class="fa fa-times-circle"/>
-                            </span>
-                        </div>
-                        <div class="modal-body payment_proof_modal_body">
-                            <p>Note :- You can attach proof of payments.</p>
-                        </div>
-                        <div class="modal-footer payment_proof_modal_footer">
-                            <input type="file" name="file"
-                                   id="payment_proof"
-                                   multiple="true"
-                                   data-show-upload="true"
-                                   data-show-caption="true"
-                                   accept="image/png,image/jpeg,application/pdf"
-                                   style="margin-right: 350px !important"/>
-                            <button id="payment_proof_update"
-                                    t-att-value="sale_order.id"
-                            >Save
-                            </button>
-                        </div>
+            </div>
+        </xpath>
+        <xpath expr="//div[hasclass('o_portal_sale_sidebar')]" position="before">
+            <div id="myModal" class="modal payment_proof_modal">
+                <!-- Modal content -->
+                <div class="modal-content payment_proof_modal_content">
+                    <div class="modal-header payment_proof_modal_header">
+                        <h5>Upload Transaction Receipt</h5>
+                        <span class="close_modal">
+                            <i class="fa fa-times-circle"/>
+                        </span>
+                    </div>
+                    <div class="modal-body payment_proof_modal_body">
+                        <p>Note :- You can attach proof of payments.</p>
+                    </div>
+                    <div class="modal-footer payment_proof_modal_footer">
+                        <input type="file" name="file"
+                               id="payment_proof"
+                               multiple="true"
+                               data-show-upload="true"
+                               data-show-caption="true"
+                               accept="image/png,image/jpeg,application/pdf"
+                               style="margin-right: 350px !important"/>
+                        <button id="payment_proof_update" class="btn btn-primary"
+                                t-att-value="sale_order.id"
+                        >Save
+                        </button>
                     </div>
                 </div>
             </div>
         </xpath>
+
     </template>
     <!-- Inherit website_sale.payment View to Modify it -->
     <template id="website_sale_order_inherit" inherit_id="website_sale.payment">
@@ -96,7 +98,7 @@
                                    data-show-caption="true"
                                    accept="image/png, image/jpeg, application/pdf"
                                  style="margin-right: 350px !important"/>
-                            <button id="payment_proof_cart_update">Save</button>
+                            <button id="payment_proof_cart_update" class="btn btn-primary">Save</button>
                         </div>
                     </div>
                 </div>