diff --git a/report_layout_config/__manifest__.py b/report_layout_config/__manifest__.py
index e27c0401e..6524f68fa 100644
--- a/report_layout_config/__manifest__.py
+++ b/report_layout_config/__manifest__.py
@@ -12,6 +12,7 @@
     "depends": ["web", "base"],
     "data": [
         "views/document_layout.xml",
+        "templates/assets.xml",
         "templates/report_templates.xml",
         "data/report_layout.xml",
     ],
diff --git a/report_layout_config/data/report_layout.xml b/report_layout_config/data/report_layout.xml
index 480a10408..1d41271b8 100644
--- a/report_layout_config/data/report_layout.xml
+++ b/report_layout_config/data/report_layout.xml
@@ -1,14 +1,27 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <odoo>
-    <record id="external_layout_images" model="report.layout">
-        <field name="name">Layout images</field>
+    <record id="external_layout_images_standard" model="report.layout">
+        <field name="name">Layout images standard</field>
         <field
             name="view_id"
-            ref="report_layout_config.external_layout_images_template"
+            ref="report_layout_config.external_standard_layout_images_template"
         />
         <field
             name="image"
         >/report_layout_config/static/img/preview_standard.png</field>
         <field name="pdf">/report_layout_config/static/pdf/preview_standard.pdf</field>
     </record>
+
+    <record id="external_layout_images_clean" model="report.layout">
+        <field name="name">Layout images clean</field>
+        <field
+            name="view_id"
+            ref="report_layout_config.external_clean_layout_images_template"
+        />
+        <field
+            name="image"
+        >/report_layout_config/static/img/preview_standard.png</field>
+        <field name="pdf">/report_layout_config/static/pdf/preview_standard.pdf</field>
+    </record>
+
 </odoo>
diff --git a/report_layout_config/migrations/14.0.1.0.0/pre-migrate.py b/report_layout_config/migrations/14.0.1.0.0/pre-migrate.py
new file mode 100644
index 000000000..fd4459fee
--- /dev/null
+++ b/report_layout_config/migrations/14.0.1.0.0/pre-migrate.py
@@ -0,0 +1,18 @@
+# Copyright 2021 Camptocamp SA
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+
+
+from openupgradelib.openupgrade import rename_xmlids
+
+
+def migrate(cr, version):
+
+    rename_xmlids(
+        cr,
+        [
+            (
+                "report_layout_config.external_layout_images",
+                "report_layout_config.external_standard_layout_images_template",
+            )
+        ],
+    )
diff --git a/report_layout_config/models/base_document_layout.py b/report_layout_config/models/base_document_layout.py
index 387ce0ba4..11a353d1f 100644
--- a/report_layout_config/models/base_document_layout.py
+++ b/report_layout_config/models/base_document_layout.py
@@ -8,22 +8,16 @@ class BaseDocumentLayout(models.TransientModel):
     _inherit = "base.document.layout"
 
     full_header_img = fields.Binary(
-        related="company_id.full_header_img", readonly=False
+        related="company_id.full_header_img",
+        readonly=False,
+        help="Replaces whole header with image",
     )
     full_footer_img = fields.Binary(
-        related="company_id.full_footer_img", readonly=False
+        related="company_id.full_footer_img",
+        readonly=False,
+        help="Replaces whole footer, disables footer logo",
     )
 
-    need_images_layout = fields.Boolean(
-        compute="_compute_need_images_layout", readonly=True
-    )
-
-    @api.depends("report_layout_id")
-    def _compute_need_images_layout(self):
-        self.ensure_one()
-        img_lay = self.env.ref("report_layout_config.external_layout_images").view_id
-        self.need_images_layout = self.external_report_layout_id == img_lay
-
     @api.depends(
         "full_footer_img",
         "full_header_img",
diff --git a/report_layout_config/readme/CONTRIBUTORS.rst b/report_layout_config/readme/CONTRIBUTORS.rst
index 0a9139f76..429d07530 100644
--- a/report_layout_config/readme/CONTRIBUTORS.rst
+++ b/report_layout_config/readme/CONTRIBUTORS.rst
@@ -1 +1,2 @@
 * Thomas Nowicki <thomas.nowicki@camptocamp.com>
+* Iryna Vyshnevska <iryna.vyshnevska@camptocamp.com>
diff --git a/report_layout_config/static/src/scss/style.scss b/report_layout_config/static/src/scss/style.scss
new file mode 100644
index 000000000..bc9b9350f
--- /dev/null
+++ b/report_layout_config/static/src/scss/style.scss
@@ -0,0 +1,11 @@
+.footer-image {
+    max-width: 500px;
+}
+
+.header-image {
+    margin-top: 22px;
+}
+
+.header-full-image {
+    max-height: 60px;
+}
diff --git a/report_layout_config/templates/assets.xml b/report_layout_config/templates/assets.xml
new file mode 100644
index 000000000..e27fd9d89
--- /dev/null
+++ b/report_layout_config/templates/assets.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+
+    <template id="report_assets_common" inherit_id="web.report_assets_common">
+        <xpath expr="." position="inside">
+            <link
+                href="/report_layout_config/static/src/scss/style.scss"
+                rel="stylesheet"
+                type="text/scss"
+            />
+        </xpath>
+    </template>
+
+</odoo>
diff --git a/report_layout_config/templates/report_templates.xml b/report_layout_config/templates/report_templates.xml
index e9665acd0..d10909717 100644
--- a/report_layout_config/templates/report_templates.xml
+++ b/report_layout_config/templates/report_templates.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <odoo>
     <template
-        id="external_layout_images_template"
+        id="external_standard_layout_images_template"
         primary="True"
         inherit_id="web.external_layout_standard"
     >
@@ -12,13 +12,12 @@
                         <img
                             t-if="company.full_header_img"
                             t-att-src="image_data_uri(company.full_header_img)"
-                            style="max-height: 60px;"
+                            class="header-full-image"
                             alt="Logo"
                         />
                     </div>
                     <div
-                        class="col-9 text-right"
-                        style="margin-top:22px;"
+                        class="col-9 text-right header-image"
                         t-field="company.report_header"
                         name="report_header"
                     />
@@ -31,59 +30,123 @@
                     <img
                         t-if="company.full_footer_img"
                         t-att-src="image_data_uri(company.full_footer_img)"
-                        style="max-width:500px;"
+                        class="footer-image"
                         alt="Footer logo"
                     />
                     <div t-if="report_type == 'pdf'" class="text-muted">
-            Page: <span class="page" /> / <span class="topage" />
-          </div>
+                        Page: <span class="page" /> / <span class="topage" />
+                    </div>
                 </div>
             </div>
         </xpath>
     </template>
-    <template id="styles_company_report" inherit_id="web.styles_company_report">
-        <xpath expr="//t[contains(@t-if, 'layout')]" position="after">
-            <t
-                t-elif="layout == 'report_layout_config.external_layout_images_template'"
-            >
-            &amp;.o_report_layout_standard {
-                h2 {
-                    color: <t t-esc='primary' />;
-                }
-                #informations strong {
-                    color: <t t-esc='secondary' />;
-                }
-                #total strong{
-                    color: <t t-esc='primary' />;
-                }
-                table {
-                    thead {
-                        color: <t t-esc='secondary' />;
-                    }
-                }
-            }
-        </t>
+
+    <template
+        id="external_clean_layout_images_template"
+        primary="True"
+        inherit_id="web.external_layout_clean"
+    >
+        <xpath expr="//div[contains(@t-attf-class, 'header')]" position="replace">
+            <div class="header">
+                <div class="row">
+                    <img
+                        t-if="company.full_header_img"
+                        t-att-src="image_data_uri(company.full_header_img)"
+                        class="header-full-image"
+                        alt="Logo"
+                    />
+                    </div>
+                    <div
+                    class="col-9 text-right header-image"
+                    t-field="company.report_header"
+                    name="report_header"
+                />
+            </div>
+        </xpath>
+        <xpath expr="//div[contains(@t-attf-class, 'footer')]" position="replace">
+            <div class="footer o_standard_footer">
+                <div class="text-center">
+                    <img
+                        t-if="company.full_footer_img"
+                        t-att-src="image_data_uri(company.full_footer_img)"
+                        class="footer-image"
+                        alt="Footer logo"
+                    />
+                    <div t-if="report_type == 'pdf'" class="text-muted">
+                        Page: <span class="page" /> / <span class="topage" />
+                    </div>
+                </div>
+            </div>
         </xpath>
     </template>
-    <template id="header_image">
-        <div>
-            <img
-                t-if="company and company.full_header_img"
-                t-att-src="image_data_uri(company.full_header_img)"
-                style="max-height: 60px;"
-                alt="Logo"
-            />
-        </div>
-    </template>
-    <template id="footer_image">
-        <div>
-            <img
-                t-if="company and company.full_footer_img"
-                t-att-src="image_data_uri(company.full_footer_img)"
-                style="max-width:420px;"
-                alt="Footer logo"
-            />
-        </div>
+
+    <template id="styles_company_report" inherit_id="web.styles_company_report">
+        <xpath expr="//t[contains(@t-elif, 'layout')]" position="after">
+            <!-- next part is the same as in web/views/report_templates web.external_layout_standard -->
+            <t
+                t-elif="layout == 'report_layout_config.external_standard_layout_images_template'"
+            >
+                &amp;.o_report_layout_standard {
+                    h2 {
+                        color: <t t-esc='primary' />;
+                    }
+                    #informations strong {
+                        color: <t t-esc='secondary' />;
+                    }
+                    #total strong{
+                        color: <t t-esc='primary' />;
+                    }
+                    table {
+                        thead {
+                            color: <t t-esc='secondary' />;
+                        }
+                    }
+                }
+            </t>
+            <!-- next part is the same as in web/views/report_templates web.external_layout_clean -->
+            <t
+                t-elif="layout == 'report_layout_config.external_clean_layout_images_template'"
+            >
+                &amp;.o_clean_footer {
+                        border-top: 3px solid <t t-esc='secondary' />;
+                        h4 {
+                            color: <t t-esc='secondary' />;
+                        }
+                        .pagenumber {
+                            border: 3px solid <t t-esc='primary' />;
+                            background-color: <t t-esc='secondary' />;
+                        }
+                    }
+                &amp;.o_report_layout_clean {
+                    h1, h2, h3 {
+                        color: <t t-esc='primary' />;
+                    }
+                    strong {
+                        color: <t t-esc='secondary' />;
+                    }
+                    table {
+                        thead {
+                            color: <t t-esc='secondary' />;
+                            tr th {
+                                border-top: 3px solid <t
+                    t-esc='secondary'
+                /> !important;
+                            }
+                        }
+                        tbody {
+                            tr:last-child td {
+                                border-bottom: 3px solid <t t-esc='secondary' />;
+                            }
+                        }
+                    }
+                    #total {
+                        strong {
+                            color: <t t-esc='secondary' />;
+                        }
+                    }
+                }
+            </t>
+        </xpath>
     </template>
 
 </odoo>
diff --git a/report_layout_config/views/document_layout.xml b/report_layout_config/views/document_layout.xml
index 8900c36c7..d03e0432c 100644
--- a/report_layout_config/views/document_layout.xml
+++ b/report_layout_config/views/document_layout.xml
@@ -5,40 +5,9 @@
         <field name="model">base.document.layout</field>
         <field name="inherit_id" ref="web.view_base_document_layout" />
         <field name="arch" type="xml">
-            <xpath expr="//field[@name='logo']" position="attributes">
-                <attribute
-                    name='attrs'
-                >{'invisible': [('need_images_layout', '=', True)]}</attribute>
-            </xpath>
-            <xpath expr="//field[@name='report_footer']" position="attributes">
-                <attribute
-                    name='attrs'
-                >{'invisible': [('need_images_layout', '=', True)]}</attribute>
-            </xpath>
-            <xpath expr="//field[@name='report_header']" position="attributes">
-                <attribute
-                    name='attrs'
-                >{'invisible': [('need_images_layout', '=', True)]}</attribute>
-            </xpath>
-            <xpath expr="//field[@name='report_header']" position="attributes">
-                <attribute
-                    name='attrs'
-                >{'invisible': [('need_images_layout', '=', True)]}</attribute>
-            </xpath>
             <xpath expr="//field[@name='logo']" position="after">
-                <field name="need_images_layout" invisible="True" />
-                <field
-                    name="full_header_img"
-                    widget="image"
-                    class="mb-4"
-                    attrs="{'invisible': [('need_images_layout', '=', False)]}"
-                />
-                <field
-                    name="full_footer_img"
-                    widget="image"
-                    class="mb-4"
-                    attrs="{'invisible': [('need_images_layout', '=', False)]}"
-                />
+                <field name="full_header_img" widget="image" class="mb-4" />
+                <field name="full_footer_img" widget="image" class="mb-4" />
             </xpath>
             <field name="preview" position="attributes">
                 <attribute name='style'>max-width: 450px;</attribute>