diff --git a/pms/controllers/pms_portal.py b/pms/controllers/pms_portal.py
index 72d0c590d..c08a6f20a 100644
--- a/pms/controllers/pms_portal.py
+++ b/pms/controllers/pms_portal.py
@@ -752,6 +752,6 @@ class PortalPrecheckin(CustomerPortal):
         )
         firstname = kw["firstname"]
         email = kw["email"]
-        checkin_partner.write({"firstname": firstname, "email": email})
-        checkin_partner.send_portal_invitation_email(firstname, email)
-        # request.portal_my_folio_precheckin(kw)
+        if firstname and email:
+            checkin_partner.write({"firstname": firstname, "email": email})
+            checkin_partner.send_portal_invitation_email(firstname, email)
diff --git a/pms/data/pms_confirmed_reservation_email_template.xml b/pms/data/pms_confirmed_reservation_email_template.xml
index aedc5d3fc..b4de65eac 100644
--- a/pms/data/pms_confirmed_reservation_email_template.xml
+++ b/pms/data/pms_confirmed_reservation_email_template.xml
@@ -163,6 +163,7 @@
                                                 </tr>
                                             </table>
                                         </td></tr>
+
                                         <tr><td valign="top" style="font-size: 14px;">
                                             <div>
                                                 % if object.pms_property_id.mail_information
@@ -179,6 +180,52 @@
                                                 % endif
                                             </div>
                                         </td></tr>
+                                        <tr>
+                                            <td
+                                                        align="center"
+                                                        style="padding: 20px 0 0px 0; "
+                                                    >
+                                                <div>
+                                                    <hr
+                                                                width="100%"
+                                                                style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;"
+                                                            />
+                                                    Do your check-in now and save time.
+                                                    <br />
+                                                    Access our<strong
+                                                            > quick registration system</strong>. In a few steps you will be able to register your data in an agile, simple and secure way,<strong
+                                                            > avoiding queues at reception</strong>.
+                                                    If you register your data in our system, <strong
+                                                            > your passage through reception will be much faster</strong>, being able to enjoy the comfort of your room right away.
+                                                    <table
+                                                                border="0"
+                                                                cellspacing="0"
+                                                                cellpadding="0"
+                                                            >
+                                                        <tr>
+                                                            <td align="center">
+                                                                <a
+                                                                            href="/my/folios/${object.folio_id.id}/precheckin?access_token=${object.folio_id.access_token}"
+                                                                            target="_blank"
+                                                                            style="text-decoration: none; color: #FFFFFF; font-size: 2em; padding: 10px 20px 10px 20px;"
+                                                                        >
+                                                                    <div
+                                                                                style="padding: 0.5em; background-color: #45C2B1; border-color: #45C2B1; border-width: 2px;border-style:solid; border-bottom-style: solid;border-left-style: solid;border-right-style: solid;border-top-style: solid;-webkit-border-radius: 10; -moz-border-radius: 10; border-radius: 10px;font-size: 12px;"
+                                                                            >Check-in
+                                                                    </div>
+                                                                    <center><img
+                                                                                    src="https://www.aldahotels.es/firma/email/llegada/check-in.png"
+                                                                                    alt="Hacer check-in"
+                                                                                    width="80px"
+                                                                                    height="80px"
+                                                                                    href="${object.url}"
+                                                                                /></center></a>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </div>
+                                            </td>
+                                        </tr>
                                         <tr><td valign="top" style="font-size: 14px;">
                                             <hr
                                                             width="100%"
diff --git a/pms/static/src/js/send_invitation_data.js b/pms/static/src/js/send_invitation_data.js
index 5e5c01471..b5eb4e964 100644
--- a/pms/static/src/js/send_invitation_data.js
+++ b/pms/static/src/js/send_invitation_data.js
@@ -13,6 +13,7 @@ odoo.define("pms.SendInvitationData", function (require) {
         _onReminderToggleClick: function (ev) {
             ev.preventDefault();
             var checkinPartnerId = $(ev.currentTarget)
+                .parent()
                 .parent()
                 .parent()
                 .find("input[name=checkin_partner_id]")
@@ -27,14 +28,40 @@ odoo.define("pms.SendInvitationData", function (require) {
                 .parent()
                 .find("input[name=invitation_email]")
                 .val();
-            this._rpc({
-                route: "/my/precheckin/send_invitation",
-                params: {
-                    checkin_partner_id: checkinPartnerId,
-                    firstname: firstname,
-                    email: email,
-                },
-            });
+            var error_firstname = $(ev.currentTarget)
+                .parent()
+                .parent()
+                .find("span:first");
+            var error_email = $(ev.currentTarget)
+                .parent()
+                .parent()
+                .find("input[name=invitation_email]")
+                .siblings("span");
+            console.log(error_firstname);
+            console.log(error_email);
+            if (firstname === "" || email === "") {
+                if (firstname === "") {
+                    error_firstname.removeClass("d-none");
+                } else {
+                    error_firstname.addClass("d-none");
+                }
+                if (email === "") {
+                    error_email.removeClass("d-none");
+                } else {
+                    error_email.addClass("d-none");
+                }
+            } else {
+                error_firstname.addClass("d-none");
+                error_email.addClass("d-none");
+                this._rpc({
+                    route: "/my/precheckin/send_invitation",
+                    params: {
+                        checkin_partner_id: checkinPartnerId,
+                        firstname: firstname,
+                        email: email,
+                    },
+                });
+            }
         },
     });
     return publicWidget.registry.SendInvitationData;
diff --git a/pms/views/folio_portal_templates.xml b/pms/views/folio_portal_templates.xml
index be237460d..e6362f9ea 100644
--- a/pms/views/folio_portal_templates.xml
+++ b/pms/views/folio_portal_templates.xml
@@ -63,10 +63,6 @@
                                 >
                                 <t t-esc="folio.name" />
                             </a>
-                            <a
-                                    t-att-href="folio.get_portal_url(suffix='/precheckin')"
-                                    t-att-title="Precheckin"
-                                >Precheckin</a>
                         </td>
                         <td><span t-field="folio.date_order" /></td>
                         <td class="text-right"><span
@@ -213,14 +209,14 @@
                                     <div t-call="pms.portal_folio_page_payment" />
                                 </div>
                                 <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
-                                    <div class="btn-group flex-grow-1 mr-1 mb-1">
+                                    <div class="btn-group mr-1 mb-1">
                                         <a
                                             class="btn btn-secondary btn-block o_download_btn"
                                             t-att-href="folio.get_portal_url(report_type='pdf', download=True)"
                                             title="Download"
                                         ><i class="fa fa-download" /> Download</a>
                                     </div>
-                                    <div class="btn-group flex-grow-1 mb-1">
+                                    <div class="btn-group mb-1">
                                         <a
                                             class="btn btn-secondary btn-block o_print_btn o_portal_invoice_print"
                                             t-att-href="folio.get_portal_url(report_type='pdf')"
@@ -230,6 +226,15 @@
                                         ><i class="fa fa-print" /> Print</a>
                                     </div>
                                 </div>
+                                <div>
+                                        <a
+                                        class="btn btn-secondary btn-block "
+                                        t-att-href="folio.get_portal_url(suffix='/precheckin')"
+                                        t-att-title="Precheckin"
+                                    >
+                                            Precheckin
+                                        </a>
+                                    </div>
                             </li>
 
                             <li
diff --git a/pms/views/precheckin_portal_templates.xml b/pms/views/precheckin_portal_templates.xml
index 0c307d0fe..b25a7bda8 100644
--- a/pms/views/precheckin_portal_templates.xml
+++ b/pms/views/precheckin_portal_templates.xml
@@ -17,9 +17,9 @@
                         />
 
                     </div>
-                    <div class="col-lg-12">
-                        <div class="row">
-                            <div t-attf-class="form-group col-xl-4 pb-xl-5 pt-xl-5">
+                    <div class="row justify-content-center">
+                        <div class="col-11 col-md-8 row pt-5">
+                            <div t-attf-class="form-group col-12 col-md-6">
                                 <label
                                     class="col-form-label"
                                     for="firstname"
@@ -37,7 +37,7 @@
                                     />
                                 </t>
                             </div>
-                            <div t-attf-class="form-group col-xl-4 pt-xl-5">
+                            <div t-attf-class="col-12 col-md-6">
                                 <label
                                     class="col-form-label"
                                     for="lastname"
@@ -49,7 +49,7 @@
                                     t-att-value="lastname or checkin_partner.lastname"
                                 />
                             </div>
-                            <div t-attf-class="form-group col-xl-4 pt-xl-5">
+                            <div t-attf-class="form-group col-12 col-md-6 pb-md-5">
                                 <label
                                     class="col-form-label"
                                     for="lastname2"
@@ -61,126 +61,7 @@
                                     t-att-value="lastname2 or checkin_partner.lastname2"
                                 />
                             </div>
-                            <div t-attf-class="form-group col-xl-4 pb-xl-5">
-                                <label
-                                    class="col-form-label"
-                                    for="document_type"
-                                >Doc. Type</label>
-                                <select
-                                    class="form-control #{error.get('document_type') and 'is-invalid' or ''}"
-                                    name='document_type'
-                                >
-                                    <option value="">Select an option</option>
-                                    <t t-foreach="doc_type_ids" t-as='doc_type'>
-                                        <option
-                                            t-att-value="doc_type.name"
-                                            t-att-selected="doc_type.id == checkin_partner.document_type.id"
-                                        >
-                                            <t t-esc='doc_type.name' />
-                                        </option>
-                                    </t>
-                                </select>
-                                <t t-if="error_message">
-                                    <span
-                                        class="text-danger"
-                                        t-esc="error_message.get('document_type')"
-                                    />
-                                </t>
-                            </div>
-                            <div t-attf-class="form-group col-xl-4">
-                                <label
-                                    class="col-form-label"
-                                    for="document_number"
-                                >Doc. Number</label>
-                                <input
-                                    type="text"
-                                    name="document_number"
-                                    t-attf-class="form-control #{error.get('document_number') and 'is-invalid' or ''}"
-                                    t-att-value="doc_number or checkin_partner.document_number"
-                                />
-                                <t t-if="error_message">
-                                    <span
-                                        class="text-danger"
-                                        t-esc="error_message.get('document_number')"
-                                    />
-                                </t>
-                            </div>
-                            <div t-attf-class="form-group col-xl-4">
-                                <label
-                                    class="col-form-label"
-                                    for="document_expedition_date"
-                                >Doc. Expedition Date/Doc. Validity Date</label>
-                                <span
-                                    class="fa fa-question-circle fa-lg"
-                                    data-toggle="tooltip"
-                                    title="If you enter the validity date of the document, the expedition date will be automatically calculated and entered depending on the document type."
-                                    style="margin-left: 70px;"
-                                />
-                                <input
-                                    type="date"
-                                    name="document_expedition_date"
-                                    t-attf-class="form-control #{error.get('document_expedition_date') and 'is-invalid' or ''}"
-                                    t-att-value="doc_exp_date or checkin_partner.document_expedition_date"
-                                />
-                                <t t-if="error_message">
-                                    <span
-                                        class="text-danger"
-                                        t-esc="error_message.get('document_expedition_date')"
-                                    />
-                                </t>
-                            </div>
-                            <div t-attf-class="form-group col-xl-4 pb-xl-5">
-                                <label
-                                    class="col-form-label"
-                                    for="birthdate_date"
-                                > Birth Date</label>
-                                <input
-                                    type="date"
-                                    name="birthdate_date"
-                                    t-attf-class="form-control #{error.get('birthdate_date') and 'is-invalid' or ''}"
-                                    t-att-value="birth_date or checkin_partner.birthdate_date"
-                                />
-                                <t t-if="error_message">
-                                    <span
-                                        class="text-danger"
-                                        t-esc="error_message.get('birthdate_date')"
-                                    />
-                                </t>
-                            </div>
-                            <div t-attf-class="form-group col-xl-4">
-                                <label
-                                    class="col-form-label"
-                                    for="mobile"
-                                >Mobile</label>
-                                <input
-                                    type="phone"
-                                    name="mobile"
-                                    t-attf-class="form-control #{error.get('mobile') and 'is-invalid' or ''}"
-                                    t-att-value="mobile or checkin_partner.mobile"
-                                />
-                                <t t-if="error_message">
-                                    <span
-                                        class="text-danger"
-                                        t-esc="error_message.get('mobile')"
-                                    />
-                                </t>
-                            </div>
-                            <div t-attf-class="form-group col-xl-4">
-                                <label class="col-form-label" for="email">Email</label>
-                                <input
-                                    type="email"
-                                    name="email"
-                                    t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}"
-                                    t-att-value="email or checkin_partner.email"
-                                />
-                                <t t-if="error_message">
-                                    <span
-                                        class="text-danger"
-                                        t-esc="error_message.get('email')"
-                                    />
-                                </t>
-                            </div>
-                            <div t-attf-class="form-group col-xl-4 pb-xl-5">
+                            <div t-attf-class="col-12 col-md-6 pb-5">
                                 <label
                                     class="col-form-label"
                                     for="gender"
@@ -214,7 +95,92 @@
                                     </option>
                                 </select>
                             </div>
-                            <div t-attf-class="form-group col-xl-4">
+                            <div t-attf-class="form-group col-12 col-md-6">
+                                <label
+                                    class="col-form-label"
+                                    for="document_type"
+                                >Doc. Type</label>
+                                <select
+                                    class="form-control #{error.get('document_type') and 'is-invalid' or ''}"
+                                    name='document_type'
+                                >
+                                    <option value="">Select an option</option>
+                                    <t t-foreach="doc_type_ids" t-as='doc_type'>
+                                        <option
+                                            t-att-value="doc_type.name"
+                                            t-att-selected="doc_type.id == checkin_partner.document_type.id"
+                                        >
+                                            <t t-esc='doc_type.name' />
+                                        </option>
+                                    </t>
+                                </select>
+                                <t t-if="error_message">
+                                    <span
+                                        class="text-danger"
+                                        t-esc="error_message.get('document_type')"
+                                    />
+                                </t>
+                            </div>
+                            <div t-attf-class="col-12 col-md-6">
+                                <label
+                                    class="col-form-label"
+                                    for="document_number"
+                                >Doc. Number</label>
+                                <input
+                                    type="text"
+                                    name="document_number"
+                                    t-attf-class="form-control #{error.get('document_number') and 'is-invalid' or ''}"
+                                    t-att-value="doc_number or checkin_partner.document_number"
+                                />
+                                <t t-if="error_message">
+                                    <span
+                                        class="text-danger"
+                                        t-esc="error_message.get('document_number')"
+                                    />
+                                </t>
+                            </div>
+                            <div t-attf-class="col-12 col-md-6">
+                                <label
+                                    class="col-form-label"
+                                    for="document_expedition_date"
+                                >Doc. Expedition Date/Doc. Validity Date</label>
+                                <span
+                                    class="fa fa-question-circle fa-lg ml-4"
+                                    data-toggle="tooltip"
+                                    title="If you enter the validity date of the document, the expedition date will be automatically calculated and entered depending on the document type."
+                                />
+                                <input
+                                    type="date"
+                                    name="document_expedition_date"
+                                    t-attf-class="form-control #{error.get('document_expedition_date') and 'is-invalid' or ''}"
+                                    t-att-value="doc_exp_date or checkin_partner.document_expedition_date"
+                                />
+                                <t t-if="error_message">
+                                    <span
+                                        class="text-danger"
+                                        t-esc="error_message.get('document_expedition_date')"
+                                    />
+                                </t>
+                            </div>
+                            <div t-attf-class="form-group col-12 col-md-6">
+                                <label
+                                    class="col-form-label"
+                                    for="birthdate_date"
+                                > Birth Date</label>
+                                <input
+                                    type="date"
+                                    name="birthdate_date"
+                                    t-attf-class="form-control #{error.get('birthdate_date') and 'is-invalid' or ''}"
+                                    t-att-value="birth_date or checkin_partner.birthdate_date"
+                                />
+                                <t t-if="error_message">
+                                    <span
+                                        class="text-danger"
+                                        t-esc="error_message.get('birthdate_date')"
+                                    />
+                                </t>
+                            </div>
+                            <div t-attf-class="col-12 col-md-6">
                                 <label
                                     class="col-form-label"
                                     for="nationality_id"
@@ -235,7 +201,7 @@
                                     </t>
                                 </select>
                             </div>
-                            <div class="form-group col-xl-4">
+                            <div class="form-group col-12 col-md-6">
                                 <label
                                     class="col-form-label"
                                     for="state"
@@ -253,15 +219,51 @@
                                     </t>
                                 </select>
                             </div>
+                            <div t-attf-class="form-group col-12 col-md-6 pt-5">
+                                <label
+                                    class="col-form-label"
+                                    for="mobile"
+                                >Mobile</label>
+                                <input
+                                    type="phone"
+                                    name="mobile"
+                                    t-attf-class="form-control #{error.get('mobile') and 'is-invalid' or ''}"
+                                    t-att-value="mobile or checkin_partner.mobile"
+                                />
+                                <t t-if="error_message">
+                                    <span
+                                        class="text-danger"
+                                        t-esc="error_message.get('mobile')"
+                                    />
+                                </t>
+                            </div>
+                            <div t-attf-class="form-group col-12 col-md-6 pt-md-5">
+                                <label class="col-form-label" for="email">Email</label>
+                                <input
+                                    type="email"
+                                    name="email"
+                                    t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}"
+                                    t-att-value="email or checkin_partner.email"
+                                />
+                                <t t-if="error_message">
+                                    <span
+                                        class="text-danger"
+                                        t-esc="error_message.get('email')"
+                                    />
+                                </t>
+                            </div>
+                            <div class="col-12">
+                                <button
+                                    type="submit"
+                                    class="btn btn-primary float-right"
+                                >
+                                    Confirm
+                                    <span class="fa fa-long-arrow-right" />
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div>
-                    <button type="submit" class="btn btn-primary float-right mb32 ">
-                        Confirm
-                        <span class="fa fa-long-arrow-right" />
-                    </button>
-                </div>
             </form>
         </t>
         <script>
@@ -327,38 +329,38 @@
                             t-as="checkin_partner"
                         >
                             <t t-set="id1" t-value="'counter'+ str(count)" />
-                                <t t-set="id2" t-value="'#'" />
-                                <t t-set="id3" t-value="id2+id1" />
-                                <t t-set="idcheckin" t-value="'checkin' + str(count)" />
-                                <t t-set="count" t-value="count+1" />
-                                <tr>
-                                    <td colspan="4">
-                                        <t t-if="not checkin_partner.firstname">
-                                            <a
+                            <t t-set="id2" t-value="'#'" />
+                            <t t-set="id3" t-value="id2+id1" />
+                            <t t-set="idcheckin" t-value="'checkin' + str(count)" />
+                            <t t-set="count" t-value="count+1" />
+                            <tr>
+                                <td colspan="4">
+                                    <t t-if="not checkin_partner.firstname">
+                                        <a
                                             name="url_acess_token"
                                             t-att-href="checkin_partner.get_portal_url()"
                                         >
-                                                Host <t t-esc="count" />
-                                            </a>
-                                            <a
+                                            Host <t t-esc="count" />
+                                        </a>
+                                        <a
                                             data-toggle="collapse"
                                             t-att-data-target="id3"
                                             class="text-primary"
                                         >
-                                                <span
+                                            <span
                                                 t-att-id="count"
                                                 class="fa fa-chevron-down fa-sm"
                                             />
-                                            </a>
-                                            <div class="row col-12">
-                                                <div t-attf-class="d-none">
-                                                    <label
+                                        </a>
+                                        <div class="row col-12">
+                                            <div t-attf-class="d-none">
+                                                <label
                                                     class="col-form-label"
                                                     for="checkin_partner_id"
                                                 >
-                                                        Name
-                                                    </label>
-                                                    <input
+                                                    Name
+                                                </label>
+                                                <input
                                                     type="text"
                                                     t-att-name="'checkin_partner_id'"
                                                     t-attf-class="form-control"
@@ -854,6 +856,7 @@
                                     <td colspan="4">
                                         <t t-if="not checkin_partner.firstname">
                                             <a
+                                                t-att-id="'host_name'+str(checkin_partner.id)"
                                                 name="url_acess_token"
                                                 t-att-href="checkin_partner.get_portal_url()"
                                             >
@@ -866,17 +869,12 @@
                                             >
                                                 <span
                                                     t-att-id="count"
+                                                    t-name="span_count"
                                                     class="fa fa-chevron-down fa-sm"
                                                 />
                                             </a>
                                             <div class="row col-12">
                                                 <div t-attf-class="d-none">
-                                                    <label
-                                                        class="col-form-label"
-                                                        for="checkin_partner_id"
-                                                    >
-                                                        Name
-                                                    </label>
                                                     <input
                                                         type="text"
                                                         t-att-name="'checkin_partner_id'"
@@ -884,47 +882,93 @@
                                                         t-att-value="id or (checkin_partner.id)"
                                                     />
                                                 </div>
-                                                <div t-attf-class="form-group col-lg-4">
-                                                    <label
-                                                        id="label_firstname"
-                                                        class="col-form-label"
-                                                        for="invitation_firstname"
+                                                 <div t-attf-class="form-group col-6">
+                                                    <a
+                                                        t-att-id="'btn_show_invitation'+str(checkin_partner.id)"
+                                                        class="btn btn-secondary"
+                                                        style="color:#fff;margin-top:20px;"
+                                                        t-attf-onclick="show_invitation(this)"
                                                     >
-                                                        Name
-                                                    </label>
-                                                    <input
-                                                        id="invitation_firstname"
-                                                        type="text"
-                                                        t-att-name="'invitation_firstname'"
-                                                        t-attf-class="form-control"
-                                                        t-att-value="firstname or (checkin_partner.firstname)"
-                                                    />
-                                                </div>
-                                                <div t-attf-class="form-group col-4">
-                                                    <label
-                                                        id="label_email"
-                                                        class="col-form-label"
-                                                        for="email"
-                                                    >
-                                                        Email
-                                                    </label>
-                                                    <input
-                                                        id="invitation_email"
-                                                        type="email"
-                                                        t-att-name="'invitation_email'"
-                                                        t-attf-class="form-control "
-                                                        t-att-value="invitation_email or checkin_partner.email"
-                                                    />
+                                                        <span
+                                                            t-esc="checkin_partner.id"
+                                                            class="d-none"
+                                                        />
+                                                        Send Invitation
+                                                    </a>
+                                                    <a
+                                                        t-att-id="'btnResendInvitation' +str(checkin_partner.id)"
+                                                        onclick="show_invitation(this)"
+                                                        t-att-class="' btn btn-secondary d-none'"
+                                                        style="color:#fff;margin-top:20px;"
+                                                    >Resend Invitation
+                                                        <span
+                                                            t-esc="checkin_partner.id"
+                                                            class="d-none"
+                                                        /></a>
                                                 </div>
                                                 <div
-                                                    t-attf-class="form-group col-2 m-4 p-3 align-self-center"
+                                                    class="row col-12 d-none"
+                                                    t-att-id="'invitation_group'+str(checkin_partner.id)"
                                                 >
-                                                    <a
-                                                        id="btnInvitation"
-                                                        onclick="launchSnackBar()"
-                                                        t-att-class="' btn btn-secondary o_send_invitation_js'"
-                                                        style="color:#fff;"
-                                                    >Send Invitation</a>
+                                                    <div
+                                                        t-attf-class="form-group col-4 p-2"
+                                                    >
+                                                        <label
+                                                            id="label_firstname"
+                                                            class="col-form-label"
+                                                            for="invitation_firstname"
+                                                        >
+                                                            Name
+                                                        </label>
+                                                        <input
+                                                            t-att-id="'invitation_firstname'+str(checkin_partner.id)"
+                                                            type="text"
+                                                            t-att-name="'invitation_firstname'"
+                                                            t-attf-class="form-control"
+                                                            t-att-value="firstname or (checkin_partner.firstname)"
+                                                        />
+                                                        <span
+                                                            style="color:red"
+                                                            class="d-none"
+                                                            t-att-id="error_inv_firstname"
+                                                        >Mandatory Firstname</span>
+                                                    </div>
+                                                    <div
+                                                        t-attf-class="form-group col-4 p-2"
+                                                    >
+                                                        <label
+                                                            id="label_email"
+                                                            class="col-form-label"
+                                                            for="email"
+                                                        >
+                                                            Email
+                                                        </label>
+                                                        <input
+                                                            t-att-id="'invitation_email'+str(checkin_partner.id)"
+                                                            type="email"
+                                                            t-att-name="'invitation_email'"
+                                                            t-attf-class="form-control "
+                                                            t-att-value="invitation_email or checkin_partner.email"
+                                                        />
+                                                        <span
+                                                            style="color:red"
+                                                            class="d-none error_inv_email"
+                                                        >Mandatory Email</span>
+                                                    </div>
+                                                    <div
+                                                        t-attf-class="form-group col-4 p-3"
+                                                    >
+                                                        <a
+                                                            id="btnInvitation"
+                                                            onclick="launchSnackBar(this)"
+                                                            t-att-class="' btn btn-secondary o_send_invitation_js mt-4 p-2'"
+                                                            style="color:#fff; height:36px;"
+                                                        >
+                                                        Send Invitation<span
+                                                                t-esc="checkin_partner.id"
+                                                                class="d-none"
+                                                            /></a>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </t>
@@ -949,9 +993,7 @@
                                         <div class="row o_portal_details">
                                             <div class="row collapse" t-att-id="id1">
                                                 <div class="row o_portal_details">
-                                                    <div
-                                                        t-attf-class="form-group col-xl-6 d-none"
-                                                    >
+                                                    <div t-attf-class="d-none">
                                                         <input
                                                             type="text"
                                                             t-att-name="'id-'+ str(count)"
@@ -960,14 +1002,10 @@
                                                         />
 
                                                     </div>
-                                                    <div
-                                                        class="col-xl-12 col-lg-8 mx-auto"
-                                                    >
-                                                        <div
-                                                            class="row col-xl-12 col-lg-8 mx-auto"
-                                                        >
+                                                    <div class="col">
+                                                        <div class="row mx-5 px-5">
                                                             <div
-                                                                t-attf-class="form-group col-xl-4 pb-xl-5 pt-xl-5"
+                                                                t-attf-class="form-group col-12 col-md-6"
                                                             >
                                                                 <label
                                                                     class="col-form-label"
@@ -987,7 +1025,7 @@
                                                                 </t>
                                                             </div>
                                                             <div
-                                                                t-attf-class="form-group col-xl-4 pt-xl-5"
+                                                                t-attf-class="form-group col-12 col-md-6"
                                                             >
                                                                 <label
                                                                     class="col-form-label"
@@ -1001,7 +1039,7 @@
                                                                 />
                                                             </div>
                                                             <div
-                                                                t-attf-class="form-group col-xl-4 pt-xl-5"
+                                                                t-attf-class="form-group col-12 col-md-6 pb-md-5"
                                                             >
                                                                 <label
                                                                     class="col-form-label"
@@ -1015,147 +1053,7 @@
                                                                 />
                                                             </div>
                                                             <div
-                                                                t-attf-class="form-group col-xl-4 pb-xl-5"
-                                                            >
-                                                                <label
-                                                                    class="col-form-label"
-                                                                    for="document_type"
-                                                                >Doc. Type</label>
-                                                                <select
-                                                                    class="form-control #{error.get('document_type-'+str(count)) and 'is-invalid' or ''}"
-                                                                    t-att-name="'document_type-'+str(count)"
-                                                                >
-                                                                    <option
-                                                                        value=""
-                                                                    >Select an option</option>
-                                                                    <t
-                                                                        t-foreach="doc_type_ids"
-                                                                        t-as='doc_type'
-                                                                    >
-                                                                        <option
-                                                                            t-att-value="doc_type.name"
-                                                                            t-att-selected="doc_type.id == checkin_partner.document_type.id"
-                                                                        >
-                                                                            <t
-                                                                                t-esc='doc_type.name'
-                                                                            />
-                                                                        </option>
-                                                                    </t>
-                                                                </select>
-                                                                <t t-if="error_message">
-                                                                    <span
-                                                                        class="text-danger"
-                                                                        t-esc="error_message.get('document_type-'+str(count))"
-                                                                    />
-                                                                </t>
-                                                            </div>
-                                                            <div
-                                                                t-attf-class="form-group col-xl-4"
-                                                            >
-                                                                <label
-                                                                    class="col-form-label"
-                                                                    for="document_number"
-                                                                >Doc. Number</label>
-                                                                <input
-                                                                    type="text"
-                                                                    t-att-name="'document_number-'+str(count)"
-                                                                    t-attf-class="form-control #{error.get('document_number-'+str(count)) and 'is-invalid' or ''}"
-                                                                    t-att-value="doc_number or checkin_partner.document_number"
-                                                                />
-                                                                <t t-if="error_message">
-                                                                    <span
-                                                                        class="text-danger"
-                                                                        t-esc="error_message.get('document_number-'+str(count))"
-                                                                    />
-                                                                </t>
-                                                            </div>
-                                                            <div
-                                                                t-attf-class="form-group col-xl-4"
-                                                            >
-                                                                <label
-                                                                    class="col-form-label"
-                                                                    for="document_expedition_date"
-                                                                >Doc. Expedition Date/Doc. Validity Date</label>
-                                                                <span
-                                                                    class="fa fa-question-circle fa-lg"
-                                                                    data-toggle="tooltip"
-                                                                    title="If you enter the validity date of the document, the expedition date will be automatically calculated and entered depending on the document type."
-                                                                />
-                                                                <input
-                                                                    type="date"
-                                                                    t-att-name="'document_expedition_date-'+ str(count)"
-                                                                    t-attf-class="form-control #{error.get('document_expedition_date-'+ str(count)) and 'is-invalid' or ''}"
-                                                                    t-att-value="doc_exp_date or checkin_partner.document_expedition_date"
-                                                                />
-                                                                <t t-if="error_message">
-                                                                    <span
-                                                                        class="text-danger"
-                                                                        t-esc="error_message.get('document_expedition_date-'+ str(count))"
-                                                                    />
-                                                                </t>
-                                                            </div>
-                                                            <div
-                                                                t-attf-class="form-group col-xl-4 pb-xl-5"
-                                                            >
-                                                                <label
-                                                                    class="col-form-label"
-                                                                    for="birthdate_date"
-                                                                > Birth Date</label>
-                                                                <input
-                                                                    type="date"
-                                                                    t-att-name="'birthdate_date-'+str(count)"
-                                                                    t-attf-class="form-control #{error.get('birthdate_date-'+str(count)) and 'is-invalid' or ''}"
-                                                                    t-att-value="birth_date or checkin_partner.birthdate_date"
-                                                                />
-                                                                <t t-if="error_message">
-                                                                    <span
-                                                                        class="text-danger"
-                                                                        t-esc="error_message.get('birthdate_date-'+str(count))"
-                                                                    />
-                                                                </t>
-                                                            </div>
-                                                            <div
-                                                                t-attf-class="form-group col-xl-4"
-                                                            >
-                                                                <label
-                                                                    class="col-form-label"
-                                                                    for="mobile"
-                                                                >Mobile</label>
-                                                                <input
-                                                                    type="phone"
-                                                                    t-att-name="'mobile-'+str(count)"
-                                                                    t-attf-class="form-control #{error.get('mobile-'+str(count)) and 'is-invalid' or ''}"
-                                                                    t-att-value="mobile or checkin_partner.mobile"
-                                                                />
-                                                                <t t-if="error_message">
-                                                                    <span
-                                                                        class="text-danger"
-                                                                        t-esc="error_message.get('mobile-'+str(count))"
-                                                                    />
-                                                                </t>
-                                                            </div>
-                                                            <div
-                                                                t-attf-class="form-group col-xl-4"
-                                                            >
-                                                                <label
-                                                                    class="col-form-label"
-                                                                    for="email"
-                                                                >Email</label>
-                                                                <input
-                                                                    type="email"
-                                                                    t-att-name="'email-'+str(count)"
-                                                                    t-attf-class="form-control #{error.get('email-'+str(count)) and 'is-invalid' or ''}"
-                                                                    t-att-value="email or checkin_partner.email"
-                                                                />
-                                                                <t t-if="error_message">
-                                                                    <span
-                                                                        class="text-danger"
-                                                                        t-esc="error_message.get('email-'+str(count))"
-                                                                    />
-                                                                </t>
-                                                            </div>
-                                                            <div
-                                                                t-attf-class="form-group col-xl-4 pb-xl-5"
+                                                                t-attf-class="form-group col-12 col-md-6 pb-5"
                                                             >
                                                                 <label
                                                                     class="col-form-label"
@@ -1195,7 +1093,148 @@
                                                                 </select>
                                                             </div>
                                                             <div
-                                                                t-attf-class="form-group col-xl-4"
+                                                                t-attf-class="form-group col-12 col-md-6"
+                                                            >
+                                                                <label
+                                                                    class="col-form-label"
+                                                                    for="document_type"
+                                                                >Doc. Type</label>
+                                                                <select
+                                                                    class="form-control #{error.get('document_type-'+str(count)) and 'is-invalid' or ''}"
+                                                                    t-att-name="'document_type-'+str(count)"
+                                                                >
+                                                                    <option
+                                                                        value=""
+                                                                    >Select an option</option>
+                                                                    <t
+                                                                        t-foreach="doc_type_ids"
+                                                                        t-as='doc_type'
+                                                                    >
+                                                                        <option
+                                                                            t-att-value="doc_type.name"
+                                                                            t-att-selected="doc_type.id == checkin_partner.document_type.id"
+                                                                        >
+                                                                            <t
+                                                                                t-esc='doc_type.name'
+                                                                            />
+                                                                        </option>
+                                                                    </t>
+                                                                </select>
+                                                                <t t-if="error_message">
+                                                                    <span
+                                                                        class="text-danger"
+                                                                        t-esc="error_message.get('document_type-'+str(count))"
+                                                                    />
+                                                                </t>
+                                                            </div>
+                                                            <div
+                                                                t-attf-class="form-group col-12 col-md-6"
+                                                            >
+                                                                <label
+                                                                    class="col-form-label"
+                                                                    for="document_number"
+                                                                >Doc. Number</label>
+                                                                <input
+                                                                    type="text"
+                                                                    t-att-name="'document_number-'+str(count)"
+                                                                    t-attf-class="form-control #{error.get('document_number-'+str(count)) and 'is-invalid' or ''}"
+                                                                    t-att-value="doc_number or checkin_partner.document_number"
+                                                                />
+                                                                <t t-if="error_message">
+                                                                    <span
+                                                                        class="text-danger"
+                                                                        t-esc="error_message.get('document_number-'+str(count))"
+                                                                    />
+                                                                </t>
+                                                            </div>
+                                                            <div
+                                                                t-attf-class="form-group col-12 col-md-6"
+                                                            >
+                                                                <label
+                                                                    class="col-form-label"
+                                                                    for="document_expedition_date"
+                                                                >Doc. Expedition Date/Doc. Validity Date</label>
+                                                                <span
+                                                                    class="fa fa-question-circle fa-lg"
+                                                                    data-toggle="tooltip"
+                                                                    title="If you enter the validity date of the document, the expedition date will be automatically calculated and entered depending on the document type."
+                                                                />
+                                                                <input
+                                                                    type="date"
+                                                                    t-att-name="'document_expedition_date-'+ str(count)"
+                                                                    t-attf-class="form-control #{error.get('document_expedition_date-'+ str(count)) and 'is-invalid' or ''}"
+                                                                    t-att-value="doc_exp_date or checkin_partner.document_expedition_date"
+                                                                />
+                                                                <t t-if="error_message">
+                                                                    <span
+                                                                        class="text-danger"
+                                                                        t-esc="error_message.get('document_expedition_date-'+ str(count))"
+                                                                    />
+                                                                </t>
+                                                            </div>
+                                                            <div
+                                                                t-attf-class="form-group col-12 col-md-6"
+                                                            >
+                                                                <label
+                                                                    class="col-form-label"
+                                                                    for="birthdate_date"
+                                                                > Birth Date</label>
+                                                                <input
+                                                                    type="date"
+                                                                    t-att-name="'birthdate_date-'+str(count)"
+                                                                    t-attf-class="form-control #{error.get('birthdate_date-'+str(count)) and 'is-invalid' or ''}"
+                                                                    t-att-value="birth_date or checkin_partner.birthdate_date"
+                                                                />
+                                                                <t t-if="error_message">
+                                                                    <span
+                                                                        class="text-danger"
+                                                                        t-esc="error_message.get('birthdate_date-'+str(count))"
+                                                                    />
+                                                                </t>
+                                                            </div>
+                                                            <div
+                                                                t-attf-class="form-group col-12 col-md-6 pt-5"
+                                                            >
+                                                                <label
+                                                                    class="col-form-label"
+                                                                    for="mobile"
+                                                                >Mobile</label>
+                                                                <input
+                                                                    type="phone"
+                                                                    t-att-name="'mobile-'+str(count)"
+                                                                    t-attf-class="form-control #{error.get('mobile-'+str(count)) and 'is-invalid' or ''}"
+                                                                    t-att-value="mobile or checkin_partner.mobile"
+                                                                />
+                                                                <t t-if="error_message">
+                                                                    <span
+                                                                        class="text-danger"
+                                                                        t-esc="error_message.get('mobile-'+str(count))"
+                                                                    />
+                                                                </t>
+                                                            </div>
+                                                            <div
+                                                                t-attf-class="form-group col-12 col-md-6 pt-md-5"
+                                                            >
+                                                                <label
+                                                                    class="col-form-label"
+                                                                    for="email"
+                                                                >Email</label>
+                                                                <input
+                                                                    type="email"
+                                                                    t-att-name="'email-'+str(count)"
+                                                                    t-attf-class="form-control #{error.get('email-'+str(count)) and 'is-invalid' or ''}"
+                                                                    t-att-value="email or checkin_partner.email"
+                                                                />
+                                                                <t t-if="error_message">
+                                                                    <span
+                                                                        class="text-danger"
+                                                                        t-esc="error_message.get('email-'+str(count))"
+                                                                    />
+                                                                </t>
+                                                            </div>
+
+                                                            <div
+                                                                t-attf-class="form-group col-12 col-md-6"
                                                             >
                                                                 <label
                                                                     class="col-form-label"
@@ -1225,7 +1264,7 @@
                                                                 </select>
                                                             </div>
                                                             <div
-                                                                class="form-group col-xl-4"
+                                                                class="form-group col-12 col-md-6"
                                                             >
                                                                 <label
                                                                     class="col-form-label"
@@ -1260,7 +1299,6 @@
                                                 </div>
                                             </div>
                                         </div>
-
                                     </td>
                                 </tr>
                             </t>
@@ -1336,13 +1374,46 @@
             }
         </style>
         <script>
-            function launchSnackBar() {
+            function launchSnackBar(element) {
+            var checkin_partner_id = element.firstChild.nextSibling.innerText
+
+            var inputEmailId = "invitation_email" + checkin_partner_id;
+
+            var email = document.getElementById(inputEmailId).value;
+            var nameId = "invitation_firstname" + checkin_partner_id;
+            var hostId = "host_name" + checkin_partner_id;
+            var host = document.getElementById(hostId);
+            var name = document.getElementById(nameId).value;
+            if(email){
+            if(name){
+            console.log("non ten email");
+                host.innerHTML = name;
+
+            var divId = "invitation_group" + checkin_partner_id;
+            var btnId = "btnResendInvitation" + checkin_partner_id;
+            var div_invitation = document.getElementById(divId);
+            var btn_show_invitation = document.getElementById(btnId);
+            div_invitation.classList.add("d-none");
+            btn_show_invitation.classList.remove("d-none");
             var x = document.getElementById("snackbar");
             x.className = "show";
             setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
             }
-        </script>
-        <script>
+            }
+            }
+
+            function show_invitation(element) {
+            var checkin_partner_id = element.firstChild.nextSibling.innerText
+            var divId = "invitation_group" + checkin_partner_id;
+            var btnId = "btn_show_invitation" + checkin_partner_id;
+            var btn2 = "btnResendInvitation"+checkin_partner_id;
+            var div_invitation = document.getElementById(divId);
+            var btn_show_invitation = document.getElementById(btnId);
+            var btn_resend = document.getElementById(btn2);
+            div_invitation.classList.remove("d-none");
+            btn_show_invitation.classList.add("d-none");
+            btn_resend.classList.add("d-none");
+            }
             let listaElementos = document.getElementsByClassName("fa-sm");
             for(i=0; i&lt;listaElementos.length; i++){
             let element =document.getElementById(i+1)
@@ -1371,8 +1442,6 @@
             }
             }
             }
-        </script>
-        <script>
             let select_country = document.getElementById('country')
 
             select_country.addEventListener("change", () => {
@@ -1385,7 +1454,6 @@
             }
             });
             });
-
         </script>
     </template>
 </odoo>