diff --git a/pos_kiosk/README.rst b/pos_kiosk/README.rst
index cbe7afbe4a..9180d20134 100644
--- a/pos_kiosk/README.rst
+++ b/pos_kiosk/README.rst
@@ -7,7 +7,7 @@ Point of Sale - Kiosk Mode
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! source digest: sha256:a364231b0b1d5f129b1ef529b763c023368bc359d1c594b13e3eff9125234960
+   !! source digest: sha256:2990d060797f495b7bd63bf4a1782c2b706f93a9e9ee93b0b31454959bff03d4
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Alpha-red.png
diff --git a/pos_kiosk/__manifest__.py b/pos_kiosk/__manifest__.py
index 4cad23e91c..00c386eb51 100644
--- a/pos_kiosk/__manifest__.py
+++ b/pos_kiosk/__manifest__.py
@@ -3,7 +3,7 @@
     "version": "14.0.1.0.0",
     "category": "Sales/Point of Sale",
     "summary": "Kiosk mode extension for the Point of Sale ",
-    "description": """This module allows you to use the Point of Sale in Kiosk mode.""",
+    "author": "KMEE, Odoo Community Association (OCA)",
     "depends": ["point_of_sale"],
     "development_status": "Alpha",
     "website": "https://github.com/OCA/pos",
@@ -15,6 +15,7 @@
     "qweb": [
         "static/src/xml/ChromeKiosk.xml",
         "static/src/xml/Components/KioskHeader.xml",
+        "static/src/xml/Components/KioskCartFooter.xml",
         "static/src/xml/Screens/WelcomeScreen.xml",
         "static/src/xml/Screens/ProductScreen/KioskProductScreen.xml",
         "static/src/xml/Screens/ProductScreen/KioskProductCategory.xml",
diff --git a/pos_kiosk/static/description/index.html b/pos_kiosk/static/description/index.html
index 90f30ae60a..5e1b7427c1 100644
--- a/pos_kiosk/static/description/index.html
+++ b/pos_kiosk/static/description/index.html
@@ -1,20 +1,20 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="Docutils: http://docutils.sourceforge.net/" />
+<meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
 <title>Point of Sale - Kiosk Mode</title>
 <style type="text/css">
 
 /*
 :Author: David Goodger (goodger@python.org)
-:Id: $Id: html4css1.css 7952 2016-07-26 18:15:59Z milde $
+:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
 :Copyright: This stylesheet has been placed in the public domain.
 
 Default cascading style sheet for the HTML output of Docutils.
 
-See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
+See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
 customize this style sheet.
 */
 
@@ -367,9 +367,9 @@ <h1 class="title">Point of Sale - Kiosk Mode</h1>
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! source digest: sha256:a364231b0b1d5f129b1ef529b763c023368bc359d1c594b13e3eff9125234960
+!! source digest: sha256:2990d060797f495b7bd63bf4a1782c2b706f93a9e9ee93b0b31454959bff03d4
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Alpha" src="https://img.shields.io/badge/maturity-Alpha-red.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/pos/tree/14.0/pos_kiosk"><img alt="OCA/pos" src="https://img.shields.io/badge/github-OCA%2Fpos-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/pos-14-0/pos-14-0-pos_kiosk"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runboat.odoo-community.org/builds?repo=OCA/pos&amp;target_branch=14.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Alpha" src="https://img.shields.io/badge/maturity-Alpha-red.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/pos/tree/14.0/pos_kiosk"><img alt="OCA/pos" src="https://img.shields.io/badge/github-OCA%2Fpos-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/pos-14-0/pos-14-0-pos_kiosk"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/pos&amp;target_branch=14.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>[ This file must be max 2-3 paragraphs, and is required. ]</p>
 <p>This module extends the functionality of … to support …
 and to allow you to …</p>
@@ -382,19 +382,19 @@ <h1 class="title">Point of Sale - Kiosk Mode</h1>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
-<li><a class="reference internal" href="#configuration" id="id1">Configuration</a></li>
-<li><a class="reference internal" href="#usage" id="id2">Usage</a></li>
-<li><a class="reference internal" href="#bug-tracker" id="id3">Bug Tracker</a></li>
-<li><a class="reference internal" href="#credits" id="id4">Credits</a><ul>
-<li><a class="reference internal" href="#authors" id="id5">Authors</a></li>
-<li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li>
-<li><a class="reference internal" href="#maintainers" id="id7">Maintainers</a></li>
+<li><a class="reference internal" href="#configuration" id="toc-entry-1">Configuration</a></li>
+<li><a class="reference internal" href="#usage" id="toc-entry-2">Usage</a></li>
+<li><a class="reference internal" href="#bug-tracker" id="toc-entry-3">Bug Tracker</a></li>
+<li><a class="reference internal" href="#credits" id="toc-entry-4">Credits</a><ul>
+<li><a class="reference internal" href="#authors" id="toc-entry-5">Authors</a></li>
+<li><a class="reference internal" href="#contributors" id="toc-entry-6">Contributors</a></li>
+<li><a class="reference internal" href="#maintainers" id="toc-entry-7">Maintainers</a></li>
 </ul>
 </li>
 </ul>
 </div>
 <div class="section" id="configuration">
-<h1><a class="toc-backref" href="#id1">Configuration</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-1">Configuration</a></h1>
 <dl class="docutils">
 <dt>[ This file is optional, it should explain how to configure</dt>
 <dd>the module before using it; it is aimed at advanced users. ]</dd>
@@ -408,7 +408,7 @@ <h1><a class="toc-backref" href="#id1">Configuration</a></h1>
 </div>
 </div>
 <div class="section" id="usage">
-<h1><a class="toc-backref" href="#id2">Usage</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-2">Usage</a></h1>
 <dl class="docutils">
 <dt>[ This file must be present and contains the usage instructions</dt>
 <dd>for end-users. As all other rst files included in the README,
@@ -424,7 +424,7 @@ <h1><a class="toc-backref" href="#id2">Usage</a></h1>
 </ol>
 </div>
 <div class="section" id="bug-tracker">
-<h1><a class="toc-backref" href="#id3">Bug Tracker</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-3">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/pos/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
@@ -432,21 +432,21 @@ <h1><a class="toc-backref" href="#id3">Bug Tracker</a></h1>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h1><a class="toc-backref" href="#id4">Credits</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-4">Credits</a></h1>
 <div class="section" id="authors">
-<h2><a class="toc-backref" href="#id5">Authors</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-5">Authors</a></h2>
 <ul class="simple">
-<li></li>
+<li>KMEE</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h2><a class="toc-backref" href="#id6">Contributors</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-6">Contributors</a></h2>
 <ul class="simple">
 <li>Ygor Carvalho &lt;<a class="reference external" href="mailto:ygor.carvalho&#64;kmee.com.br">ygor.carvalho&#64;kmee.com.br</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h2><a class="toc-backref" href="#id7">Maintainers</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-7">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
diff --git a/pos_kiosk/static/src/css/style.css b/pos_kiosk/static/src/css/style.css
index 4216e77a57..baba2ebd73 100644
--- a/pos_kiosk/static/src/css/style.css
+++ b/pos_kiosk/static/src/css/style.css
@@ -1,96 +1,96 @@
 /* Tablet */
 @media (max-width: 834px) {
-  /* Banner Screen */
-  .banner {
-    width: 100%;
-    height: 100%;
-  }
-
-  .banner .image {
-    width: 100%;
-    height: 100%;
-  }
-
-  .banner .container-button {
-    padding: 26px 41px;
-    left: 30%;
-    top: 75%;
-  }
-
-  .banner .container-button .button {
-    font-size: 41px;
-    line-height: 41px;
-  }
-
-  /* Main Screen */
-  .payment {
-    width: 100%;
-    height: 820px;
-  }
-
-  .payment .title-container {
-    width: 100%;
-    height: 128px;
-    margin-top: 7.5%;
-    padding: 5% 4%;
-  }
-
-  .payment .title-container .main-title {
-    font-size: 30px;
-    line-height: 36px;
-  }
-
-  .payment .title-container .sub-title {
-    font-size: 20px;
-    line-height: 28px;
-  }
-
-  .payment .payment-container {
-    width: 75%;
-    height: 100%;
-    margin-top: 25%;
-    display: grid;
-    gap: 8px;
-    grid-template-columns: repeat(auto-fill, minmax(125px, 0.75fr));
-  }
-
-  .payment .payment-container .item {
-    width: 150px;
-    height: 100px;
-  }
-
-  .payment .cart {
-    padding: 10px;
-  }
-
-  .client {
-    width: 100%;
-    height: 820px;
-  }
-
-  .client .title-container {
-    width: 100%;
-    height: 128px;
-    margin-top: 7.5%;
-    padding: 5% 4%;
-  }
-
-  .client .title-container .main-title {
-    font-size: 30px;
-    line-height: 36px;
-  }
-
-  .client .title-container .sub-title {
-    font-size: 20px;
-    line-height: 28px;
-  }
-
-  .client .container-button {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .receipt {
+    /* Banner Screen */
+    .banner {
+        width: 100%;
+        height: 100%;
+    }
+
+    .banner .image {
+        width: 100%;
+        height: 100%;
+    }
+
+    .banner .container-button {
+        padding: 26px 41px;
+        left: 30%;
+        top: 75%;
+    }
+
+    .banner .container-button .button {
+        font-size: 41px;
+        line-height: 41px;
+    }
+
+    /* Main Screen */
+    .payment {
+        width: 100%;
+        height: 820px;
+    }
+
+    .payment .title-container {
+        width: 100%;
+        height: 128px;
+        margin-top: 7.5%;
+        padding: 5% 4%;
+    }
+
+    .payment .title-container .main-title {
+        font-size: 30px;
+        line-height: 36px;
+    }
+
+    .payment .title-container .sub-title {
+        font-size: 20px;
+        line-height: 28px;
+    }
+
+    .payment .payment-container {
+        width: 75%;
+        height: 100%;
+        margin-top: 25%;
+        display: grid;
+        gap: 8px;
+        grid-template-columns: repeat(auto-fill, minmax(125px, 0.75fr));
+    }
+
+    .payment .payment-container .item {
+        width: 150px;
+        height: 100px;
+    }
+
+    .payment .cart {
+        padding: 10px;
+    }
+
+    .client {
+        width: 100%;
+        height: 820px;
+    }
+
+    .client .title-container {
+        width: 100%;
+        height: 128px;
+        margin-top: 7.5%;
+        padding: 5% 4%;
+    }
+
+    .client .title-container .main-title {
+        font-size: 30px;
+        line-height: 36px;
+    }
+
+    .client .title-container .sub-title {
+        font-size: 20px;
+        line-height: 28px;
+    }
+
+    .client .container-button {
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* .receipt {
     width: 100%;
     height: 820px;
   }
@@ -110,1067 +110,1065 @@
   .receipt .title-container .sub-title {
     font-size: 20px;
     line-height: 28px;
-  }
-
-  .main-screen {
-    width: 100%;
-    height: 820px;
-  }
-
-  .main-screen .category-container {
-    top: 5%;
-    margin-bottom: 10px;
-    overflow-x: auto;
-    margin-left: 2%;
-    margin-right: 2%;
-  }
-
-  .grow.shrink.basis-0.h-\[100px\].justify-center.items-center.gap-4.flex {
-    display: flex;
-    margin-left: 5%;
-    margin-right: 5%;
-  }
-
-  img.product-image.justify-center.relative.rounded-xl {
-    width: 100%;
-  }
-
-  .main-screen .category-container .category {
-    width: 150px;
-    height: 100px;
-  }
-
-  .main-screen .product-list {
-    max-height: 60%;
-  }
-
-  .main-screen .product {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-content: flex-start;
-    flex-wrap: wrap;
-    width: 10rem;
-    height: 12rem;
-  }
-
-  .main-screen .product .product-image {
-    height: 7rem;
-  }
-
-  /* Estilos para o contêiner principal */
-  .cart-container {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 96px;
-    padding-left: 32px;
-    padding-right: 32px;
-    padding-top: 16px;
-    padding-bottom: 16px;
-    background: #F3F4F6;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 16px;
-    display: inline-flex;
-  }
-
-  /* Estilos para o painel esquerdo */
-  .left-panel {
-    flex: 1 1 0;
-    height: 64px;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 32px;
-    display: flex;
-  }
-
-  /* Estilos para o botão do carrinho */
-  .button-container {
-    width: 150px;
-    padding-left: 32px;
-    padding-right: 32px;
-    padding-top: 20px;
-    padding-bottom: 20px;
-    border-radius: 8px;
-    overflow: hidden;
-    border: 1px #9CA3AF solid;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    display: flex;
-  }
-
-  /* Estilos para o ícone do carrinho */
-  .icon-container {
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    display: flex;
-  }
-
-  .circle {
-    width: 32px;
-    height: 32px;
-    position: relative;
-  }
-
-  .line {
-    width: 22.67px;
-    height: 22.67px;
-    left: 5.33px;
-    top: 5.33px;
-    position: absolute;
-    border: 1.50px #09090B solid;
-  }
-
-  /* Estilos para o texto do carrinho */
-  .text-container {
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 2px;
-    display: inline-flex;
-  }
-
-  .item-count {
-    text-align: justify;
-    color: #1F2937;
-    font-size: 14px;
-    font-family: Inter;
-    font-weight: 700;
-    line-height: 14px;
-    word-wrap: break-word;
-  }
-
-  .item-description {
-    text-align: justify;
-    color: #1F2937;
-    font-size: 12px;
-    font-family: Inter;
-    font-weight: 400;
-    line-height: 12px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o contêiner de preço */
-  .price-container {
-    width: 173px;
-    flex: 1 1 0;
-    height: 64px;
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-top: 26px;
-    padding-bottom: 26px;
-    border-radius: 8px;
-    overflow: hidden;
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-  }
-
-  /* Estilos para o preço */
-  .price {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 16px;
-    font-family: Inter;
-    font-weight: 600;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o contêiner de finalizar */
-  .checkout-container {
-    justify-content: flex-start;
-    align-items: center;
-    gap: 8px;
-    display: flex;
-  }
-
-  /* Estilos para o texto de finalizar */
-  .checkout-text {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 18px;
-    font-family: Inter;
-    font-weight: 600;
-    line-height: 28px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para a seta */
-  .arrow-container {
-    width: 20px;
-    height: 20px;
-    position: relative;
-  }
-
-  .arrow {
-    width: 15.43px;
-    height: 12px;
-    left: 17px;
-    top: 16px;
-    position: absolute;
-    transform: rotate(-180deg);
-    transform-origin: 0 0;
-    border: 2px #F9FAFB solid;
-  }
-
-  /* Estilos para o contêiner principal */
-  .container {
-    width: 834px;
-    height: 332px;
-    background: white;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    overflow: hidden;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    display: inline-flex;
-  }
-
-  /* Estilos para o título "Seu carrinho" */
-  .title {
-    color: #4B5563;
-    font-size: 18px;
-    font-family: Inter;
-    font-weight: 600;
-    line-height: 28px;
-    word-wrap: break-word;
-  }
-
-  .heading {
-    width: 834px;
-    height: 88px;
-    padding-left: 32px;
-    justify-content: space-between;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  /* Estilos para as linhas do ícone do carrinho */
-  .line {
-    width: 12px;
-    height: 12px;
-    left: 6px;
-    top: 6px;
-    position: absolute;
-    border: 2px #374151 solid;
-  }
-
-  /* Estilos para os detalhes do produto */
-  .product-details {
-    align-self: stretch;
-    height: 100px;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    display: flex;
-  }
-
-  /* Estilos para o contêiner do produto */
-  .product-container {
-    align-self: stretch;
-    padding-left: 32px;
-    padding-right: 32px;
-    padding-top: 16px;
-    padding-bottom: 16px;
-    justify-content: space-between;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  /* Estilos para a imagem do produto */
-  .product-image {
-    width: 68px;
-    height: 68px;
-    position: relative;
-    background: #E5E7EB;
-    border-radius: 8px;
-  }
-
-  /* Estilos para os detalhes do produto */
-  .product-text {
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    display: inline-flex;
-  }
-
-  /* Estilos para o nome do produto */
-  .product-name {
-    text-align: justify;
-    color: #111827;
-    font-size: 16px;
-    font-family: Inter;
-    font-weight: 400;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para os preços do produto */
-  .product-prices {
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    display: inline-flex;
-  }
-
-  /* Estilos para o preço original do produto */
-  .original-price {
-    text-align: justify;
-    color: #4B5563;
-    font-size: 14px;
-    font-family: Inter;
-    font-weight: 400;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o preço atual do produto */
-  .current-price {
-    text-align: justify;
-    color: #1F2937;
-    font-size: 14px;
-    font-family: Inter;
-    font-weight: 700;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o contêiner de quantidade */
-  .quantity-container {
-    border-radius: 8px;
-    overflow: hidden;
-    border: 1px #9CA3AF solid;
-    justify-content: flex-start;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  /* Estilos para o botão de quantidade */
-  .quantity-button {
-    width: 48px;
-    height: 48px;
-    padding-top: 16px;
-    padding-bottom: 16px;
-    opacity: 0.50;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    overflow: hidden;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-
-  /* Estilos para a seta do botão de quantidade */
-  .arrow {
-    width: 13.87px;
-    height: 16px;
-    position: relative;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    display: flex;
-  }
-
-  /* Estilos para as partes da seta */
-  .arrow-part {
-    width: 5.33px;
-    height: 3.20px;
-    border: 1px #3B3B3B solid;
-  }
-
-  /* Estilos para o número de itens */
-  .item-number {
-    width: 48px;
-    height: 48px;
-    padding-left: 17px;
-    padding-right: 17px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    display: flex;
-  }
-
-  /* Estilos para o total e o botão de finalização */
-  .total-and-checkout {
-    align-self: stretch;
-    height: 144px;
-    padding: 32px;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 8px;
-    display: flex;
-  }
-
-  /* Estilos para o contêiner do total e do botão de finalização */
-  .total-and-checkout-container {
-    align-self: stretch;
-    height: 80px;
-    padding-left: 32px;
-    padding-right: 32px;
-    border-radius: 8px;
-    overflow: hidden;
-    justify-content: space-between;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  /* Estilos para o texto do total e do preço */
-  .total-and-price-text {
-    width: 490px;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    display: inline-flex;
-  }
-
-  /* Estilos para o texto do total de itens */
-  .total-items-text {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 16px;
-    font-family: Inter;
-    font-weight: 400;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o texto do preço */
-  .total-price-text {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 18px;
-    font-family: Inter;
-    font-weight: 600;
-    line-height: 28px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o botão de finalização */
-  .checkout-button {
-    justify-content: flex-start;
-    align-items: center;
-    gap: 8px;
-    display: flex;
-  }
-
-  /* Estilos para o texto do botão de finalização */
-  .checkout-text {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 20px;
-    font-family: Inter;
-    font-weight: 600;
-    line-height: 28px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para a seta do botão de finalização */
-  .checkout-arrow {
-    width: 24px;
-    height: 24px;
-    position: relative;
-  }
-
-  /* Estilos para a parte da seta do botão de finalização */
-  .checkout-arrow-part {
-    width: 18px;
-    height: 14px;
-    left: 21px;
-    top: 19px;
-    position: absolute;
-    transform: rotate(-180deg);
-    transform-origin: 0 0;
-    border: 2px #F9FAFB solid;
-  }
+  } */
+
+    .main-screen {
+        width: 100%;
+        height: 820px;
+    }
+
+    .main-screen .category-container {
+        top: 5%;
+        margin-bottom: 10px;
+        overflow-x: auto;
+        margin-left: 2%;
+        margin-right: 2%;
+    }
+
+    .grow.shrink.basis-0.h-\[100px\].justify-center.items-center.gap-4.flex {
+        display: flex;
+        margin-left: 5%;
+        margin-right: 5%;
+    }
+
+    img.product-image.justify-center.relative.rounded-xl {
+        width: 100%;
+    }
+
+    .main-screen .category-container .category {
+        width: 150px;
+        height: 100px;
+    }
+
+    .main-screen .product-list {
+        max-height: 60%;
+    }
+
+    .main-screen .product {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-content: flex-start;
+        flex-wrap: wrap;
+        width: 10rem;
+        height: 12rem;
+    }
+
+    .main-screen .product .product-image {
+        height: 7rem;
+    }
+
+    /* Estilos para o contêiner principal */
+    .cart-container {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 96px;
+        padding-left: 32px;
+        padding-right: 32px;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        background: #f3f4f6;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 16px;
+        display: inline-flex;
+    }
+
+    /* Estilos para o painel esquerdo */
+    .left-panel {
+        flex: 1 1 0;
+        height: 64px;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 32px;
+        display: flex;
+    }
+
+    /* Estilos para o botão do carrinho */
+    .button-container {
+        width: 150px;
+        padding-left: 32px;
+        padding-right: 32px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px #9ca3af solid;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        display: flex;
+    }
+
+    /* Estilos para o ícone do carrinho */
+    .icon-container {
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        display: flex;
+    }
+
+    .circle {
+        width: 32px;
+        height: 32px;
+        position: relative;
+    }
+
+    .line {
+        width: 22.67px;
+        height: 22.67px;
+        left: 5.33px;
+        top: 5.33px;
+        position: absolute;
+        border: 1.5px #09090b solid;
+    }
+
+    /* Estilos para o texto do carrinho */
+    .text-container {
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 2px;
+        display: inline-flex;
+    }
+
+    .item-count {
+        text-align: justify;
+        color: #1f2937;
+        font-size: 14px;
+        font-family: Inter;
+        font-weight: 700;
+        line-height: 14px;
+        word-wrap: break-word;
+    }
+
+    .item-description {
+        text-align: justify;
+        color: #1f2937;
+        font-size: 12px;
+        font-family: Inter;
+        font-weight: 400;
+        line-height: 12px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o contêiner de preço */
+    .price-container {
+        width: 173px;
+        flex: 1 1 0;
+        height: 64px;
+        padding-left: 15px;
+        padding-right: 15px;
+        padding-top: 26px;
+        padding-bottom: 26px;
+        border-radius: 8px;
+        overflow: hidden;
+        justify-content: space-between;
+        align-items: center;
+        display: flex;
+    }
+
+    /* Estilos para o preço */
+    .price {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 16px;
+        font-family: Inter;
+        font-weight: 600;
+        line-height: 24px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o contêiner de finalizar */
+    .checkout-container {
+        justify-content: flex-start;
+        align-items: center;
+        gap: 8px;
+        display: flex;
+    }
+
+    /* Estilos para o texto de finalizar */
+    .checkout-text {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 18px;
+        font-family: Inter;
+        font-weight: 600;
+        line-height: 28px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para a seta */
+    .arrow-container {
+        width: 20px;
+        height: 20px;
+        position: relative;
+    }
+
+    .arrow {
+        width: 15.43px;
+        height: 12px;
+        left: 17px;
+        top: 16px;
+        position: absolute;
+        transform: rotate(-180deg);
+        transform-origin: 0 0;
+        border: 2px #f9fafb solid;
+    }
+
+    /* Estilos para o contêiner principal */
+    .container {
+        width: 834px;
+        height: 332px;
+        background: white;
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+        overflow: hidden;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: inline-flex;
+    }
+
+    /* Estilos para o título "Seu carrinho" */
+    .title {
+        color: #4b5563;
+        font-size: 18px;
+        font-family: Inter;
+        font-weight: 600;
+        line-height: 28px;
+        word-wrap: break-word;
+    }
+
+    .heading {
+        width: 834px;
+        height: 88px;
+        padding-left: 32px;
+        justify-content: space-between;
+        align-items: center;
+        display: inline-flex;
+    }
+
+    /* Estilos para as linhas do ícone do carrinho */
+    .line {
+        width: 12px;
+        height: 12px;
+        left: 6px;
+        top: 6px;
+        position: absolute;
+        border: 2px #374151 solid;
+    }
+
+    /* Estilos para os detalhes do produto */
+    .product-details {
+        align-self: stretch;
+        height: 100px;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: flex;
+    }
+
+    /* Estilos para o contêiner do produto */
+    .product-container {
+        align-self: stretch;
+        padding-left: 32px;
+        padding-right: 32px;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        justify-content: space-between;
+        align-items: center;
+        display: inline-flex;
+    }
+
+    /* Estilos para a imagem do produto */
+    .product-image {
+        width: 68px;
+        height: 68px;
+        position: relative;
+        background: #e5e7eb;
+        border-radius: 8px;
+    }
+
+    /* Estilos para os detalhes do produto */
+    .product-text {
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        display: inline-flex;
+    }
+
+    /* Estilos para o nome do produto */
+    .product-name {
+        text-align: justify;
+        color: #111827;
+        font-size: 16px;
+        font-family: Inter;
+        font-weight: 400;
+        line-height: 24px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para os preços do produto */
+    .product-prices {
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        display: inline-flex;
+    }
+
+    /* Estilos para o preço original do produto */
+    .original-price {
+        text-align: justify;
+        color: #4b5563;
+        font-size: 14px;
+        font-family: Inter;
+        font-weight: 400;
+        line-height: 20px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o preço atual do produto */
+    .current-price {
+        text-align: justify;
+        color: #1f2937;
+        font-size: 14px;
+        font-family: Inter;
+        font-weight: 700;
+        line-height: 20px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o contêiner de quantidade */
+    .quantity-container {
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px #9ca3af solid;
+        justify-content: flex-start;
+        align-items: center;
+        display: inline-flex;
+    }
+
+    /* Estilos para o botão de quantidade */
+    .quantity-button {
+        width: 48px;
+        height: 48px;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        opacity: 0.5;
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+        overflow: hidden;
+        justify-content: center;
+        align-items: center;
+        display: flex;
+    }
+
+    /* Estilos para a seta do botão de quantidade */
+    .arrow {
+        width: 13.87px;
+        height: 16px;
+        position: relative;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: flex;
+    }
+
+    /* Estilos para as partes da seta */
+    .arrow-part {
+        width: 5.33px;
+        height: 3.2px;
+        border: 1px #3b3b3b solid;
+    }
+
+    /* Estilos para o número de itens */
+    .item-number {
+        width: 48px;
+        height: 48px;
+        padding-left: 17px;
+        padding-right: 17px;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        display: flex;
+    }
+
+    /* Estilos para o total e o botão de finalização */
+    .total-and-checkout {
+        align-self: stretch;
+        height: 144px;
+        padding: 32px;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 8px;
+        display: flex;
+    }
+
+    /* Estilos para o contêiner do total e do botão de finalização */
+    .total-and-checkout-container {
+        align-self: stretch;
+        height: 80px;
+        padding-left: 32px;
+        padding-right: 32px;
+        border-radius: 8px;
+        overflow: hidden;
+        justify-content: space-between;
+        align-items: center;
+        display: inline-flex;
+    }
+
+    /* Estilos para o texto do total e do preço */
+    .total-and-price-text {
+        width: 490px;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: inline-flex;
+    }
+
+    /* Estilos para o texto do total de itens */
+    .total-items-text {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 16px;
+        font-family: Inter;
+        font-weight: 400;
+        line-height: 24px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o texto do preço */
+    .total-price-text {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 18px;
+        font-family: Inter;
+        font-weight: 600;
+        line-height: 28px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o botão de finalização */
+    .checkout-button {
+        justify-content: flex-start;
+        align-items: center;
+        gap: 8px;
+        display: flex;
+    }
+
+    /* Estilos para o texto do botão de finalização */
+    .checkout-text {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 20px;
+        font-family: Inter;
+        font-weight: 600;
+        line-height: 28px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para a seta do botão de finalização */
+    .checkout-arrow {
+        width: 24px;
+        height: 24px;
+        position: relative;
+    }
+
+    /* Estilos para a parte da seta do botão de finalização */
+    .checkout-arrow-part {
+        width: 18px;
+        height: 14px;
+        left: 21px;
+        top: 19px;
+        position: absolute;
+        transform: rotate(-180deg);
+        transform-origin: 0 0;
+        border: 2px #f9fafb solid;
+    }
 }
 
-
 /* Kiosk  */
 @media (min-width: 1080px) {
-
-   /* Banner Screen */
-   .banner {
-    width: 100%;
-    height: 100%;
-  }
-
-  .banner .image {
-    width: 100%;
-    height: 100%;
-  }
-
-  .banner .container-button {
-    padding: 26px 41px;
-    left: 40%;
-    top: 85%;
-    justify-content: center;
-  }
-
-  .banner .container-button .button {
-    font-size: 61px;
-    line-height: 61px;
-  }
-
-  /* Main Screen */
-
-  .payment {
-    width: 100%;
-    height: 820px;
-  }
-
-  .payment .title-container {
-    width: 100%;
-    height: 128px;
-    margin-top: 7.5%;
-    padding: 5% 4%;
-  }
-
-  .payment .title-container .main-title {
-    font-size: 30px;
-    line-height: 36px;
-  }
-
-  .payment .title-container .sub-title {
-    font-size: 20px;
-    line-height: 28px;
-  }
-
-  .payment .payment-container {
-    width: 75%;
-    height: 100%;
-    margin-top: 10%;
-  }
-
-  .payment .payment-container .item {
-    width: 150px;
-    height: 100px;
-  }
-
-  .payment .cart {
-    padding: 10px;
-  }
-
-  .client {
-    width: 100%;
-    height: 820px;
-  }
-
-  .client .title-container {
-    width: 100%;
-    height: 128px;
-    margin-top: 7.5%;
-    padding: 5% 4%;
-  }
-
-  .client .title-container .main-title {
-    font-size: 30px;
-    line-height: 36px;
-  }
-
-  .client .title-container .sub-title {
-    font-size: 20px;
-    line-height: 28px;
-  }
-
-  .client .container-button {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .receipt {
-    width: 100%;
-    height: 820px;
-  }
-
-  .receipt .title-container {
-    width: 100%;
-    height: 128px;
-    margin-top: 7.5%;
-    padding: 5% 4%;
-  }
-
-  .receipt .title-container .main-title {
-    font-size: 30px;
-    line-height: 36px;
-  }
-
-  .receipt .title-container .sub-title {
-    font-size: 20px;
-    line-height: 28px;
-  }
-
-  .main-screen {
-    width: 100%;
-    height: 820px;
-  }
-
-  .main-screen .category-container {
-    top: 5%;
-    margin-bottom: 10px;
-  }
-
-  .main-screen .category-container .category {
-    width: 250px;
-    height: 200px;
-    overflow-x: auto;
-  }
-
-  .main-screen .product-list {
-    max-height: 80%;
-  }
-
-  .main-screen .product {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-content: flex-start;
-    flex-wrap: wrap;
-    width: 20rem;
-    height: 22rem;
-  }
-
-  .main-screen .product .product-image {
-    height: 14rem;
-  }
-
-  /* Estilos para o contêiner principal */
-  .cart-container {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 192px;
-    padding-left: 64px;
-    padding-right: 64px;
-    padding-top: 32px;
-    padding-bottom: 32px;
-    background: #F3F4F6;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 32px;
-    display: inline-flex;
-  }
-
-  /* Estilos para o painel esquerdo */
-  .left-panel {
-    flex: 1 1 0;
-    height: 128px;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 64px;
-    display: flex;
-  }
-
-  /* Estilos para o botão do carrinho */
-  .button-container {
-    width: 300px;
-    padding-left: 64px;
-    padding-right: 64px;
-    padding-top: 40px;
-    padding-bottom: 40px;
-    border-radius: 16px;
-    overflow: hidden;
-    border: 2px #9CA3AF solid;
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    display: flex;
-  }
-
-  /* Estilos para o ícone do carrinho */
-  .icon-container {
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    display: flex;
-  }
-
-  .circle {
-    width: 64px;
-    height: 64px;
-    position: relative;
-  }
-
-  .line {
-    width: 45.34px;
-    height: 45.34px;
-    left: 10.66px;
-    top: 10.66px;
-    position: absolute;
-    border: 3px #09090B solid;
-  }
-
-  /* Estilos para o texto do carrinho */
-  .text-container {
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 4px;
-    display: inline-flex;
-  }
-
-  .item-count {
-    text-align: justify;
-    color: #1F2937;
-    font-size: 28px;
-    font-family: Inter;
-    font-weight: 1400;
-    line-height: 28px;
-    word-wrap: break-word;
-  }
-
-  .item-description {
-    text-align: justify;
-    color: #1F2937;
-    font-size: 24px;
-    font-family: Inter;
-    font-weight: 800;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o contêiner de preço */
-  .price-container {
-    width: 346px;
-    flex: 2 2 0;
-    height: 128px;
-    padding-left: 30px;
-    padding-right: 30px;
-    padding-top: 52px;
-    padding-bottom: 52px;
-    border-radius: 16px;
-    overflow: hidden;
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-  }
-
-  /* Estilos para o preço */
-  .price {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 32px;
-    font-family: Inter;
-    font-weight: 1200;
-    line-height: 48px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o contêiner de finalizar */
-  .checkout-container {
-    justify-content: flex-start;
-    align-items: center;
-    gap: 16px;
-    display: flex;
-  }
-
-  /* Estilos para o texto de finalizar */
-  .checkout-text {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 36px;
-    font-family: Inter;
-    font-weight: 1200;
-    line-height: 56px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para a seta */
-  .arrow-container {
-    width: 40px;
-    height: 40px;
-    position: relative;
-  }
-
-  .arrow {
-    width: 30.86px;
-    height: 24px;
-    left: 34px;
-    top: 32px;
-    position: absolute;
-    transform: rotate(-180deg);
-    transform-origin: 0 0;
-    border: 4px #F9FAFB solid;
-  }
-
-  /* Estilos para o contêiner principal */
-  .container {
-    width: 1668px;
-    height: 664px;
-    background: white;
-    border-top-left-radius: 24px;
-    border-top-right-radius: 24px;
-    overflow: hidden;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    display: inline-flex;
-  }
-
-  /* Estilos para o título "Seu carrinho" */
-  .title {
-    color: #4B5563;
-    font-size: 36px;
-    font-family: Inter;
-    font-weight: 1200;
-    line-height: 56px;
-    word-wrap: break-word;
-  }
-
-  .heading {
-    width: 1668px;
-    height: 176px;
-    padding-left: 64px;
-    justify-content: space-between;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  /* Estilos para as linhas do ícone do carrinho */
-  .line {
-    width: 24px;
-    height: 24px;
-    left: 12px;
-    top: 12px;
-    position: absolute;
-    border: 4px #374151 solid;
-  }
-
-  /* Estilos para os detalhes do produto */
-  .product-details {
-    align-self: stretch;
-    height: 200px;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    display: flex;
-  }
-
-  /* Estilos para o contêiner do produto */
-  .product-container {
-    align-self: stretch;
-    padding-left: 64px;
-    padding-right: 64px;
-    padding-top: 32px;
-    padding-bottom: 32px;
-    justify-content: space-between;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  /* Estilos para a imagem do produto */
-  .product-image {
-    width: 132px;
-    height: 132px;
-    position: relative;
-    background: #E5E7EB;
-    border-radius: 16px;
-  }
-
-  /* Estilos para os detalhes do produto */
-  .product-text {
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    display: inline-flex;
-  }
-
-  /* Estilos para o nome do produto */
-  .product-name {
-    text-align: justify;
-    color: #111827;
-    font-size: 32px;
-    font-family: Inter;
-    font-weight: 800;
-    line-height: 48px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para os preços do produto */
-  .product-prices {
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    display: inline-flex;
-  }
-
-  /* Estilos para o preço original do produto */
-  .original-price {
-    text-align: justify;
-    color: #4B5563;
-    font-size: 28px;
-    font-family: Inter;
-    font-weight: 800;
-    line-height: 40px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o preço atual do produto */
-  .current-price {
-    text-align: justify;
-    color: #1F2937;
-    font-size: 28px;
-    font-family: Inter;
-    font-weight: 1400;
-    line-height: 40px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o contêiner de quantidade */
-  .quantity-container {
-    border-radius: 16px;
-    overflow: hidden;
-    border: 2px #9CA3AF solid;
-    justify-content: flex-start;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  /* Estilos para o botão de quantidade */
-  .quantity-button {
-    width: 96px;
-    height: 96px;
-    padding-top: 32px;
-    padding-bottom: 32px;
-    opacity: 0.50;
-    border-top-left-radius: 32px;
-    border-top-right-radius: 32px;
-    overflow: hidden;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-
-  /* Estilos para a seta do botão de quantidade */
-  .arrow {
-    width: 27.74px;
-    height: 32px;
-    position: relative;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    display: flex;
-  }
-
-  /* Estilos para as partes da seta */
-  .arrow-part {
-    width: 10.66px;
-    height: 6.40px;
-    border: 2px #3B3B3B solid;
-  }
-
-  /* Estilos para o número de itens */
-  .item-number {
-    width: 96px;
-    height: 96px;
-    padding-left: 34px;
-    padding-right: 34px;
-    padding-top: 16px;
-    padding-bottom: 16px;
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    display: flex;
-  }
-
-  /* Estilos para o total e o botão de finalização */
-  .total-and-checkout {
-    align-self: stretch;
-    height: 288px;
-    padding: 64px;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 16px;
-    display: flex;
-  }
-
-  /* Estilos para o contêiner do total e do botão de finalização */
-  .total-and-checkout-container {
-    align-self: stretch;
-    height: 120px;
-    padding-left: 64px;
-    padding-right: 64px;
-    border-radius: 16px;
-    overflow: hidden;
-    justify-content: space-between;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  /* Estilos para o texto do total e do preço */
-  .total-and-price-text {
-    width: 980px;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    display: inline-flex;
-  }
-
-  /* Estilos para o texto do total de itens */
-  .total-items-text {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 32px;
-    font-family: Inter;
-    font-weight: 800;
-    line-height: 48px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o texto do preço */
-  .total-price-text {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 36px;
-    font-family: Inter;
-    font-weight: 1200;
-    line-height: 56px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para o botão de finalização */
-  .checkout-button {
-    justify-content: flex-start;
-    align-items: center;
-    gap: 16px;
-    display: flex;
-  }
-
-  /* Estilos para o texto do botão de finalização */
-  .checkout-text {
-    text-align: justify;
-    color: #F9FAFB;
-    font-size: 40px;
-    font-family: Inter;
-    font-weight: 1200;
-    line-height: 56px;
-    word-wrap: break-word;
-  }
-
-  /* Estilos para a seta do botão de finalização */
-  .checkout-arrow {
-    width: 48px;
-    height: 48px;
-    position: relative;
-  }
-
-  /* Estilos para a parte da seta do botão de finalização */
-  .checkout-arrow-part {
-    width: 36px;
-    height: 28px;
-    left: 44px;
-    top: 28px;
-    position: absolute;
-    transform: rotate(-180deg);
-    transform-origin: 0 0;
-    border: 4px #F9FAFB solid;
-  }
+    /* Banner Screen */
+    .banner {
+        width: 100%;
+        height: 100%;
+    }
+
+    .banner .image {
+        width: 100%;
+        height: 100%;
+    }
+
+    .banner .container-button {
+        padding: 26px 41px;
+        left: 40%;
+        top: 85%;
+        justify-content: center;
+    }
+
+    .banner .container-button .button {
+        font-size: 61px;
+        line-height: 61px;
+    }
+
+    /* Main Screen */
+
+    .payment {
+        width: 100%;
+        height: 820px;
+    }
+
+    .payment .title-container {
+        width: 100%;
+        height: 128px;
+        margin-top: 7.5%;
+        padding: 5% 4%;
+    }
+
+    .payment .title-container .main-title {
+        font-size: 30px;
+        line-height: 36px;
+    }
+
+    .payment .title-container .sub-title {
+        font-size: 20px;
+        line-height: 28px;
+    }
+
+    .payment .payment-container {
+        width: 75%;
+        height: 100%;
+        margin-top: 10%;
+    }
+
+    .payment .payment-container .item {
+        width: 150px;
+        height: 100px;
+    }
+
+    .payment .cart {
+        padding: 10px;
+    }
+
+    .client {
+        width: 100%;
+        height: 820px;
+    }
+
+    .client .title-container {
+        width: 100%;
+        height: 128px;
+        margin-top: 7.5%;
+        padding: 5% 4%;
+    }
+
+    .client .title-container .main-title {
+        font-size: 30px;
+        line-height: 36px;
+    }
+
+    .client .title-container .sub-title {
+        font-size: 20px;
+        line-height: 28px;
+    }
+
+    .client .container-button {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .receipt {
+        width: 100%;
+        height: 820px;
+    }
+
+    .receipt .title-container {
+        width: 100%;
+        height: 128px;
+        margin-top: 7.5%;
+        padding: 5% 4%;
+    }
+
+    .receipt .title-container .main-title {
+        font-size: 30px;
+        line-height: 36px;
+    }
+
+    .receipt .title-container .sub-title {
+        font-size: 20px;
+        line-height: 28px;
+    }
+
+    .main-screen {
+        width: 100%;
+        height: 820px;
+    }
+
+    .main-screen .category-container {
+        top: 5%;
+        margin-bottom: 10px;
+    }
+
+    .main-screen .category-container .category {
+        width: 250px;
+        height: 200px;
+        overflow-x: auto;
+    }
+
+    .main-screen .product-list {
+        max-height: 80%;
+    }
+
+    .main-screen .product {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-content: flex-start;
+        flex-wrap: wrap;
+        width: 20rem;
+        height: 22rem;
+    }
+
+    .main-screen .product .product-image {
+        height: 14rem;
+    }
+
+    /* Estilos para o contêiner principal */
+    .cart-container {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 192px;
+        padding-left: 64px;
+        padding-right: 64px;
+        padding-top: 32px;
+        padding-bottom: 32px;
+        background: #f3f4f6;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 32px;
+        display: inline-flex;
+    }
+
+    /* Estilos para o painel esquerdo */
+    .left-panel {
+        flex: 1 1 0;
+        height: 128px;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 64px;
+        display: flex;
+    }
+
+    /* Estilos para o botão do carrinho */
+    .button-container {
+        width: 300px;
+        padding-left: 64px;
+        padding-right: 64px;
+        padding-top: 40px;
+        padding-bottom: 40px;
+        border-radius: 16px;
+        overflow: hidden;
+        border: 2px #9ca3af solid;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+        display: flex;
+    }
+
+    /* Estilos para o ícone do carrinho */
+    .icon-container {
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+        display: flex;
+    }
+
+    .circle {
+        width: 64px;
+        height: 64px;
+        position: relative;
+    }
+
+    .line {
+        width: 45.34px;
+        height: 45.34px;
+        left: 10.66px;
+        top: 10.66px;
+        position: absolute;
+        border: 3px #09090b solid;
+    }
+
+    /* Estilos para o texto do carrinho */
+    .text-container {
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 4px;
+        display: inline-flex;
+    }
+
+    .item-count {
+        text-align: justify;
+        color: #1f2937;
+        font-size: 28px;
+        font-family: Inter;
+        font-weight: 1400;
+        line-height: 28px;
+        word-wrap: break-word;
+    }
+
+    .item-description {
+        text-align: justify;
+        color: #1f2937;
+        font-size: 24px;
+        font-family: Inter;
+        font-weight: 800;
+        line-height: 24px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o contêiner de preço */
+    .price-container {
+        width: 346px;
+        flex: 2 2 0;
+        height: 128px;
+        padding-left: 30px;
+        padding-right: 30px;
+        padding-top: 52px;
+        padding-bottom: 52px;
+        border-radius: 16px;
+        overflow: hidden;
+        justify-content: space-between;
+        align-items: center;
+        display: flex;
+    }
+
+    /* Estilos para o preço */
+    .price {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 32px;
+        font-family: Inter;
+        font-weight: 1200;
+        line-height: 48px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o contêiner de finalizar */
+    .checkout-container {
+        justify-content: flex-start;
+        align-items: center;
+        gap: 16px;
+        display: flex;
+    }
+
+    /* Estilos para o texto de finalizar */
+    .checkout-text {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 36px;
+        font-family: Inter;
+        font-weight: 1200;
+        line-height: 56px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para a seta */
+    .arrow-container {
+        width: 40px;
+        height: 40px;
+        position: relative;
+    }
+
+    .arrow {
+        width: 30.86px;
+        height: 24px;
+        left: 34px;
+        top: 32px;
+        position: absolute;
+        transform: rotate(-180deg);
+        transform-origin: 0 0;
+        border: 4px #f9fafb solid;
+    }
+
+    /* Estilos para o contêiner principal */
+    .container {
+        width: 1668px;
+        height: 664px;
+        background: white;
+        border-top-left-radius: 24px;
+        border-top-right-radius: 24px;
+        overflow: hidden;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: inline-flex;
+    }
+
+    /* Estilos para o título "Seu carrinho" */
+    .title {
+        color: #4b5563;
+        font-size: 36px;
+        font-family: Inter;
+        font-weight: 1200;
+        line-height: 56px;
+        word-wrap: break-word;
+    }
+
+    .heading {
+        width: 1668px;
+        height: 176px;
+        padding-left: 64px;
+        justify-content: space-between;
+        align-items: center;
+        display: inline-flex;
+    }
+
+    /* Estilos para as linhas do ícone do carrinho */
+    .line {
+        width: 24px;
+        height: 24px;
+        left: 12px;
+        top: 12px;
+        position: absolute;
+        border: 4px #374151 solid;
+    }
+
+    /* Estilos para os detalhes do produto */
+    .product-details {
+        align-self: stretch;
+        height: 200px;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: flex;
+    }
+
+    /* Estilos para o contêiner do produto */
+    .product-container {
+        align-self: stretch;
+        padding-left: 64px;
+        padding-right: 64px;
+        padding-top: 32px;
+        padding-bottom: 32px;
+        justify-content: space-between;
+        align-items: center;
+        display: inline-flex;
+    }
+
+    /* Estilos para a imagem do produto */
+    .product-image {
+        width: 132px;
+        height: 132px;
+        position: relative;
+        background: #e5e7eb;
+        border-radius: 16px;
+    }
+
+    /* Estilos para os detalhes do produto */
+    .product-text {
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        display: inline-flex;
+    }
+
+    /* Estilos para o nome do produto */
+    .product-name {
+        text-align: justify;
+        color: #111827;
+        font-size: 32px;
+        font-family: Inter;
+        font-weight: 800;
+        line-height: 48px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para os preços do produto */
+    .product-prices {
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+        display: inline-flex;
+    }
+
+    /* Estilos para o preço original do produto */
+    .original-price {
+        text-align: justify;
+        color: #4b5563;
+        font-size: 28px;
+        font-family: Inter;
+        font-weight: 800;
+        line-height: 40px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o preço atual do produto */
+    .current-price {
+        text-align: justify;
+        color: #1f2937;
+        font-size: 28px;
+        font-family: Inter;
+        font-weight: 1400;
+        line-height: 40px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o contêiner de quantidade */
+    .quantity-container {
+        border-radius: 16px;
+        overflow: hidden;
+        border: 2px #9ca3af solid;
+        justify-content: flex-start;
+        align-items: center;
+        display: inline-flex;
+    }
+
+    /* Estilos para o botão de quantidade */
+    .quantity-button {
+        width: 96px;
+        height: 96px;
+        padding-top: 32px;
+        padding-bottom: 32px;
+        opacity: 0.5;
+        border-top-left-radius: 32px;
+        border-top-right-radius: 32px;
+        overflow: hidden;
+        justify-content: center;
+        align-items: center;
+        display: flex;
+    }
+
+    /* Estilos para a seta do botão de quantidade */
+    .arrow {
+        width: 27.74px;
+        height: 32px;
+        position: relative;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: flex;
+    }
+
+    /* Estilos para as partes da seta */
+    .arrow-part {
+        width: 10.66px;
+        height: 6.4px;
+        border: 2px #3b3b3b solid;
+    }
+
+    /* Estilos para o número de itens */
+    .item-number {
+        width: 96px;
+        height: 96px;
+        padding-left: 34px;
+        padding-right: 34px;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+        display: flex;
+    }
+
+    /* Estilos para o total e o botão de finalização */
+    .total-and-checkout {
+        align-self: stretch;
+        height: 288px;
+        padding: 64px;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 16px;
+        display: flex;
+    }
+
+    /* Estilos para o contêiner do total e do botão de finalização */
+    .total-and-checkout-container {
+        align-self: stretch;
+        height: 120px;
+        padding-left: 64px;
+        padding-right: 64px;
+        border-radius: 16px;
+        overflow: hidden;
+        justify-content: space-between;
+        align-items: center;
+        display: inline-flex;
+    }
+
+    /* Estilos para o texto do total e do preço */
+    .total-and-price-text {
+        width: 980px;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: inline-flex;
+    }
+
+    /* Estilos para o texto do total de itens */
+    .total-items-text {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 32px;
+        font-family: Inter;
+        font-weight: 800;
+        line-height: 48px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o texto do preço */
+    .total-price-text {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 36px;
+        font-family: Inter;
+        font-weight: 1200;
+        line-height: 56px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para o botão de finalização */
+    .checkout-button {
+        justify-content: flex-start;
+        align-items: center;
+        gap: 16px;
+        display: flex;
+    }
+
+    /* Estilos para o texto do botão de finalização */
+    .checkout-text {
+        text-align: justify;
+        color: #f9fafb;
+        font-size: 40px;
+        font-family: Inter;
+        font-weight: 1200;
+        line-height: 56px;
+        word-wrap: break-word;
+    }
+
+    /* Estilos para a seta do botão de finalização */
+    .checkout-arrow {
+        width: 48px;
+        height: 48px;
+        position: relative;
+    }
+
+    /* Estilos para a parte da seta do botão de finalização */
+    .checkout-arrow-part {
+        width: 36px;
+        height: 28px;
+        left: 44px;
+        top: 28px;
+        position: absolute;
+        transform: rotate(-180deg);
+        transform-origin: 0 0;
+        border: 4px #f9fafb solid;
+    }
 }
diff --git a/pos_kiosk/static/src/js/Components/KioskCartFooter.js b/pos_kiosk/static/src/js/Components/KioskCartFooter.js
new file mode 100644
index 0000000000..b0f83fe7fb
--- /dev/null
+++ b/pos_kiosk/static/src/js/Components/KioskCartFooter.js
@@ -0,0 +1,50 @@
+odoo.define("pos_kiosk.KioskCartFooter", function (require) {
+    "use strict";
+
+    const PosComponent = require("point_of_sale.PosComponent");
+    const Registries = require("point_of_sale.Registries");
+
+    class KioskCartFooter extends PosComponent {
+        getTotalItems() {
+            const orderlines = this.env.pos.get_order().orderlines;
+            const count = orderlines.reduce(
+                (total, orderline) => total + orderline.quantity,
+                0
+            );
+            return count;
+        }
+
+        getTotalValue() {
+            const orderlines = this.env.pos.get_order().orderlines;
+            const totalValue = orderlines.reduce(
+                (total, orderline) => total + orderline.get_price_with_tax(),
+                0
+            );
+            return this.env.pos.format_currency(totalValue);
+        }
+
+        haveProduct() {
+            return true ? this.env.pos.get_order().orderlines.length > 0 : false;
+        }
+
+        openCart() {
+            this.env.pos.get_order().screen_data = {current: "KioskProductScreen"};
+            this.showPopup("CartModal", {
+                order: this.env.pos.get_order(),
+            });
+        }
+
+        openPaymentScreen() {
+            if (this.haveProduct()) {
+                this.env.pos.get_order().screen_data = {current: "KioskPaymentScreen"};
+                this.showScreen("KioskPaymentScreen");
+            }
+        }
+    }
+
+    KioskCartFooter.template = "KioskCartFooter";
+
+    Registries.Component.add(KioskCartFooter);
+
+    return KioskCartFooter;
+});
diff --git a/pos_kiosk/static/src/js/Modals/ErrorModal.js b/pos_kiosk/static/src/js/Modals/ErrorModal.js
index a04db02a1d..4cddb93257 100644
--- a/pos_kiosk/static/src/js/Modals/ErrorModal.js
+++ b/pos_kiosk/static/src/js/Modals/ErrorModal.js
@@ -1,19 +1,19 @@
-odoo.define('point_of_sale.ErrorModal', function(require) {
-  'use strict';
+odoo.define("point_of_sale.ErrorModal", function (require) {
+    "use strict";
 
-  const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
-  const Registries = require('point_of_sale.Registries');
+    const AbstractAwaitablePopup = require("point_of_sale.AbstractAwaitablePopup");
+    const Registries = require("point_of_sale.Registries");
 
-  class ErrorPopup extends AbstractAwaitablePopup {}
-  ErrorPopup.template = 'ErrorModal';
-  ErrorPopup.defaultProps = {
-      confirmText: 'Ok',
-      cancelText: 'Cancel',
-      title: 'Error',
-      body: '',
-  };
+    class ErrorPopup extends AbstractAwaitablePopup {}
+    ErrorPopup.template = "ErrorModal";
+    ErrorPopup.defaultProps = {
+        confirmText: "Ok",
+        cancelText: "Cancel",
+        title: "Error",
+        body: "",
+    };
 
-  Registries.Component.add(ErrorPopup);
+    Registries.Component.add(ErrorPopup);
 
-  return ErrorPopup;
+    return ErrorPopup;
 });
diff --git a/pos_kiosk/static/src/js/Screens/KioskClientScreen.js b/pos_kiosk/static/src/js/Screens/KioskClientScreen.js
index 8fc459d995..77150695ec 100644
--- a/pos_kiosk/static/src/js/Screens/KioskClientScreen.js
+++ b/pos_kiosk/static/src/js/Screens/KioskClientScreen.js
@@ -1,71 +1,67 @@
 odoo.define("pos_kiosk.KioskClientScreen", function (require) {
-  "use strict";
-  const PosComponent = require("point_of_sale.PosComponent");
-  const Registries = require("point_of_sale.Registries");
+    "use strict";
+    const PosComponent = require("point_of_sale.PosComponent");
+    const Registries = require("point_of_sale.Registries");
 
-  class KioskClientScreen extends PosComponent {
-      constructor() {
-          super(...arguments);
-          this.order = this.env.pos.get_order();
-      }
+    class KioskClientScreen extends PosComponent {
+        constructor() {
+            super(...arguments);
+            this.order = this.env.pos.get_order();
+        }
 
-      get currentOrder() {
-        return this.env.pos.get_order();
-      }
+        get currentOrder() {
+            return this.env.pos.get_order();
+        }
 
-      async finalizeOrder() {
-        const currentOrder = this.order;
+        async finalizeOrder() {
+            const currentOrder = this.order;
 
-        if (!currentOrder.client_name) {
-            return;
-        }
+            if (!currentOrder.client_name) {
+                return;
+            }
 
-        currentOrder.initialize_validation_date();
-        currentOrder.finalized = true;
+            currentOrder.initialize_validation_date();
+            currentOrder.finalized = true;
 
-        let syncedOrderBackendIds = [];
+            // eslint-disable-next-line no-unused-vars
+            let syncedOrderBackendIds = [];
 
-        try {
-            syncedOrderBackendIds = await this.env.pos.push_single_order(
-                currentOrder
-            );
-        } catch (error) {
-            if (error instanceof Error) {
-                throw error;
-            } else {
-                throw new Error(error.message);
+            try {
+                syncedOrderBackendIds = await this.env.pos.push_single_order(
+                    currentOrder
+                );
+            } catch (error) {
+                if (error instanceof Error) {
+                    throw error;
+                } else {
+                    throw new Error(error.message);
+                }
             }
-        }
-        
-        this.showScreen("KioskReceiptScreen");
-    }
 
-    changeName(event) {
-      this.currentOrder.client_name = event.target.value;
-      this.render();
-    }
+            this.showScreen("KioskReceiptScreen");
+        }
 
-    changeVat(event) {
-      this.currentOrder.vat = event.target.value;
-    }
+        changeName(event) {
+            this.currentOrder.client_name = event.target.value;
+            this.render();
+        }
 
-    backScreen() {
-      this.showScreen("KioskPaymentScreen");
-    }
+        changeVat(event) {
+            this.currentOrder.vat = event.target.value.replace(/[^\w\s]/g, "");
+        }
 
-    hasClientName() {
-      return this.currentOrder.client_name !== '';
-    }
+        backScreen() {
+            this.showScreen("KioskPaymentScreen");
+        }
 
-    get topBannerLogo() {
-      const pos_config = this.env.pos.config;
-      return `/web/image?model=pos.config&field=top_banner_image&id=${pos_config.id}&write_date=${pos_config.write_date}&unique=1`
+        hasClientName() {
+            return this.currentOrder.client_name !== "";
+        }
     }
-  }
 
-  KioskClientScreen.template = "KioskClientScreen";
+    KioskClientScreen.template = "KioskClientScreen";
 
-  Registries.Component.add(KioskClientScreen);
+    Registries.Component.add(KioskClientScreen);
 
-  return KioskClientScreen;
+    return KioskClientScreen;
 });
diff --git a/pos_kiosk/static/src/js/Screens/KioskPaymentScreen.js b/pos_kiosk/static/src/js/Screens/KioskPaymentScreen.js
index b2c0f18785..1316e37639 100644
--- a/pos_kiosk/static/src/js/Screens/KioskPaymentScreen.js
+++ b/pos_kiosk/static/src/js/Screens/KioskPaymentScreen.js
@@ -53,13 +53,23 @@ odoo.define("pos_kiosk.KioskPaymentScreen", function (require) {
             return this.order.paymentlines.length > 0;
         }
 
-        nextScreen() {
+        async nextScreen() {
+            if (this.order.paymentlines.length === 0) {
+                this.showPopup("ErrorPopup", {
+                    title: this.env._t("Payment Error"),
+                    body: this.env._t("Please select a payment method"),
+                });
+                return;
+            }
+
             this.showScreen("KioskClientScreen");
         }
 
-        get topBannerLogo() {
-            const pos_config = this.env.pos.config;
-            return `/web/image?model=pos.config&field=top_banner_image&id=${pos_config.id}&write_date=${pos_config.write_date}&unique=1`;
+        get methodPaymentLine() {
+            if (!this.order.paymentlines.length === 0) {
+                return false;
+            }
+            return this.order.paymentlines.models[0].payment_method.id;
         }
     }
 
diff --git a/pos_kiosk/static/src/js/Screens/KioskReceiptScreen.js b/pos_kiosk/static/src/js/Screens/KioskReceiptScreen.js
index 82a07ffd6f..8a5e87d864 100644
--- a/pos_kiosk/static/src/js/Screens/KioskReceiptScreen.js
+++ b/pos_kiosk/static/src/js/Screens/KioskReceiptScreen.js
@@ -1,80 +1,67 @@
-odoo.define('pos_kiosk.KioskReceiptScreen', function (require) {
-  'use strict';
+odoo.define("pos_kiosk.KioskReceiptScreen", function (require) {
+    "use strict";
 
-  const { Printer } = require('point_of_sale.Printer');
-  const { is_email } = require('web.utils');
-  const { useRef, useContext } = owl.hooks;
-  const { useErrorHandlers, onChangeOrder } = require('point_of_sale.custom_hooks');
-  const Registries = require('point_of_sale.Registries');
-  const AbstractReceiptScreen = require('point_of_sale.AbstractReceiptScreen');
+    const {useRef} = owl.hooks;
+    const {useErrorHandlers, onChangeOrder} = require("point_of_sale.custom_hooks");
+    const Registries = require("point_of_sale.Registries");
+    const AbstractReceiptScreen = require("point_of_sale.AbstractReceiptScreen");
 
-  const KioskReceiptScreen = (AbstractReceiptScreen) => {
-      class KioskReceiptScreen extends AbstractReceiptScreen {
-          constructor() {
-              super(...arguments);
-              useErrorHandlers();
-              onChangeOrder(null, (newOrder) => newOrder && this.render());
-              this.orderReceipt = useRef('order-receipt');
-          }
-          mounted() {
-              // Here, we send a task to the event loop that handles
-              // the printing of the receipt when the component is mounted.
-              // We are doing this because we want the receipt screen to be
-              // displayed regardless of what happen to the handleAutoPrint
-              // call.
-              setTimeout(async () => await this.handleAutoPrint(), 0);
-          }
-          get currentOrder() {
-              return this.env.pos.get_order();
-          }
-          /**
-           * This function is called outside the rendering call stack. This way,
-           * we don't block the displaying of ReceiptScreen when it is mounted; additionally,
-           * any error that can happen during the printing does not affect the rendering.
-           */
-          async handleAutoPrint() {
-              if (this._shouldAutoPrint()) {
-                  const currentOrder = this.currentOrder;
-                  await this.printReceipt();
-              }
-          }
-          _shouldAutoPrint() {
-            return this.env.pos.config.iface_print_auto && !this.currentOrder._printed;
-        }
-          async printReceipt() {
-              const currentOrder = this.currentOrder;
-              const isPrinted = await this._printReceipt();
-              if (isPrinted) {
-                  currentOrder._printed = true;
-              }
-          }
+    const KioskReceiptScreen = (AbstractReceiptScreen) => {
+        class KioskReceiptScreen extends AbstractReceiptScreen {
+            constructor() {
+                super(...arguments);
+                useErrorHandlers();
+                onChangeOrder(null, (newOrder) => newOrder && this.render());
+                this.orderReceipt = useRef("order-receipt");
+            }
 
-          makeOtherOrder() {
-            this.env.pos.get_order().destroy();
-            this.env.pos.set('selectedCategoryId', false);
-            this.showScreen("KioskProductScreen");
-        }
+            mounted() {
+                setTimeout(async () => await this.handleAutoPrint(), 0);
+            }
 
-        endedSession() {
-            this.env.pos.get_order().destroy();
-            this.env.pos.set('selectedCategoryId', false);
-            this.showScreen("WelcomeScreen");
-        }
+            get currentOrder() {
+                return this.env.pos.get_order();
+            }
 
-        get topBannerLogo() {
-            const pos_config = this.env.pos.config;
-            return `/web/image?model=pos.config&field=top_banner_image&id=${pos_config.id}&write_date=${pos_config.write_date}&unique=1`
-        }
-        
-        get currentOrder() {
-            return this.env.pos.get_order();
+            async handleAutoPrint() {
+                if (this._shouldAutoPrint()) {
+                    await this.printReceipt();
+                }
+            }
+
+            _shouldAutoPrint() {
+                return (
+                    this.env.pos.config.iface_print_auto && !this.currentOrder._printed
+                );
+            }
+
+            async printReceipt() {
+                const currentOrder = this.currentOrder;
+                const isPrinted = await this._printReceipt();
+                if (isPrinted) {
+                    currentOrder._printed = true;
+                }
+            }
+
+            makeOtherOrder() {
+                this.env.pos.get_order().destroy();
+                this.env.pos.set("selectedCategoryId", false);
+                this.showScreen("KioskProductScreen");
+            }
+
+            endedSession() {
+                this.env.pos.get_order().destroy();
+                this.env.pos.set("selectedCategoryId", false);
+                this.showScreen("WelcomeScreen");
+            }
         }
-      }
-      KioskReceiptScreen.template = 'KioskReceiptScreen';
-      return KioskReceiptScreen;
-  };
 
-  Registries.Component.addByExtending(KioskReceiptScreen, AbstractReceiptScreen);
+        KioskReceiptScreen.template = "KioskReceiptScreen";
+
+        return KioskReceiptScreen;
+    };
+
+    Registries.Component.addByExtending(KioskReceiptScreen, AbstractReceiptScreen);
 
-  return KioskReceiptScreen;
+    return KioskReceiptScreen;
 });
diff --git a/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductCategory.js b/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductCategory.js
index 4f828bb153..a12a0f5de3 100644
--- a/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductCategory.js
+++ b/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductCategory.js
@@ -1,77 +1,44 @@
 odoo.define("pos_kiosk.KioskProductCategory", function (require) {
-  "use strict";
-
-  const PosComponent = require("point_of_sale.PosComponent");
-  const Registries = require("point_of_sale.Registries");
-  const {useListener} = require("web.custom_hooks");
-
-  class KioskProductCategory extends PosComponent {
-    constructor() {
-      super(...arguments);
-      this.categoryID = false;
-      this.categoriesList = Object.values(this.env.pos.db.category_by_id).filter(category => category.parent_id === false);
-      this.selectedCategoryId = this.env.pos.get("selectedCategoryId");
-    }
-
-    mounted() {
-      this.env.pos.on('change:selectedCategoryId', this.render, this);
-    }
-
-    willUnmount() {
-        this.env.pos.off('change:selectedCategoryId', null, this);
-    }
-
-    // setCategory(categoryID) {
-    //   this.categoryID = categoryID;
-    //   this.env.pos.set("selectedCategoryId", categoryID);
-    //   this.subCategoriesList = [];
-
-    //   // for (const key in this.env.pos.db.category_by_id) {
-    //   //     this.productList = [];
-    //   //     if (this.env.pos.db.category_by_id.hasOwnProperty(key)) {
-    //   //         const sub_category_id = this.env.pos.db.category_by_id[key];
-    //   //         if (
-    //   //             sub_category_id.parent_id &&
-    //   //             sub_category_id.parent_id[0] === categoryID
-    //   //         ) {
-    //   //             for (const key in this.env.pos.db.product_by_id) {
-    //   //                 if (this.env.pos.db.product_by_id.hasOwnProperty(key)) {
-    //   //                     const value = this.env.pos.db.product_by_id[key];
-    //   //                     if (value.pos_categ_id[0] === sub_category_id.id) {
-    //   //                         this.productList.push(value);
-    //   //                     }
-    //   //                 }
-    //   //             }
-    //   //             this.subCategoriesList.push({
-    //   //                 id: sub_category_id.id,
-    //   //                 name: sub_category_id.name,
-    //   //                 productList: this.productList,
-    //   //             });
-    //   //         }
-    //   //     }
-    //   // }
-    //   this.render();
-    //   this.trigger("click-category");
-    // }
-
-    set selectedCategoryId(categoryID) {
-      this.categoryID = categoryID;
-    }
-
-    get selectedCategoryId() {
-      return this.env.pos.get("selectedCategoryId");
-    }
-
-    getCategoryImage(categoryID) {
-      const { id, write_date } = this.env.pos.db.get_category_by_id(categoryID);
-      return `/web/image?model=pos.category&field=image_128&id=${id}&write_date=${write_date}&unique=1`;
+    "use strict";
+
+    const PosComponent = require("point_of_sale.PosComponent");
+    const Registries = require("point_of_sale.Registries");
+
+    class KioskProductCategory extends PosComponent {
+        constructor() {
+            super(...arguments);
+            this.categoryID = false;
+            this.categoriesList = Object.values(this.env.pos.db.category_by_id).filter(
+                (category) => category.parent_id === false
+            );
+            this.selectedCategoryId = this.env.pos.get("selectedCategoryId");
+        }
+
+        mounted() {
+            this.env.pos.on("change:selectedCategoryId", this.render, this);
+        }
+
+        willUnmount() {
+            this.env.pos.off("change:selectedCategoryId", null, this);
+        }
+
+        set selectedCategoryId(categoryID) {
+            this.categoryID = categoryID;
+        }
+
+        get selectedCategoryId() {
+            return this.env.pos.get("selectedCategoryId");
+        }
+
+        getCategoryImage(categoryID) {
+            const {id, write_date} = this.env.pos.db.get_category_by_id(categoryID);
+            return `/web/image?model=pos.category&field=image_128&id=${id}&write_date=${write_date}&unique=1`;
+        }
     }
-  }
 
-  KioskProductCategory.template = "KioskProductCategory";
+    KioskProductCategory.template = "KioskProductCategory";
 
-  Registries.Component.add(KioskProductCategory);
+    Registries.Component.add(KioskProductCategory);
 
-  return KioskProductCategory;
-  
-});
\ No newline at end of file
+    return KioskProductCategory;
+});
diff --git a/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductScreen.js b/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductScreen.js
index 084d4a10a2..0dd0396793 100644
--- a/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductScreen.js
+++ b/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductScreen.js
@@ -10,13 +10,37 @@ odoo.define("pos_kiosk.KioskProductScreen", function (require) {
             super(...arguments);
             useListener("switch-category", this.setCategory);
             this.env.pos.set("selectedCategoryId", false);
-            this.categoriesList = Object.values(this.env.pos.db.category_by_id).filter(category => category.parent_id === false);
-            // this.productList = Object.values(this.env.pos.db.product_by_id);
-            // this.subCategoriesList = [];
+            this.categoriesList = Object.values(this.env.pos.db.category_by_id).filter(
+                (category) => category.parent_id === false
+            );
+            this.mainProductList = Object.values(this.env.pos.db.product_by_id);
+            this.subCategoriesList = [];
         }
 
         setCategory(event) {
-            this.env.pos.set("selectedCategoryId", event.detail);
+            const categoryID = event.detail;
+            this.env.pos.set("selectedCategoryId", categoryID);
+
+            const category = this.env.pos.db.get_category_by_id(categoryID);
+            if (!category) return;
+
+            const subCategories = Object.values(this.env.pos.db.category_by_id).filter(
+                (element) => {
+                    return element.parent_id && element.parent_id[0] === categoryID;
+                }
+            );
+
+            this.subCategoriesList = subCategories.map((element) => {
+                const productList = this.mainProductList.filter(
+                    (product) => product.pos_categ_id[0] === element.id
+                );
+                return {
+                    id: element.id,
+                    name: element.name,
+                    productList: productList,
+                };
+            });
+
             this.render();
         }
 
@@ -27,144 +51,112 @@ odoo.define("pos_kiosk.KioskProductScreen", function (require) {
             return category.name;
         }
 
-        // getProductName(product_id) {
-        //     for (let i = 0; i < this.subCategoriesList.length; i++) {
-        //         const element = this.subCategoriesList[i];
-        //         for (let j = 0; j < element.productList.length; j++) {
-        //             const product = element.productList[j];
-        //             if (product.id === product_id) return product.display_name;
-        //         }
-        //     }
-        // }
-
-        // getProductPrice(product_id) {
-        //     for (let i = 0; i < this.subCategoriesList.length; i++) {
-        //         const element = this.subCategoriesList[i];
-        //         for (let j = 0; j < element.productList.length; j++) {
-        //             const product = element.productList[j];
-        //             if (product.id === product_id)
-        //                 return this.env.pos.format_currency(product.lst_price);
-        //         }
-        //     }
-        // }
-
-        // productImageURL(product_id) {
-        //     const product = this.env.pos.db.product_by_id[product_id];
-        //     return `/web/image?model=product.product&field=image_1920&id=${product.id}&write_date=${product.write_date}&unique=1`;
-        // }
-
-        // async addProduct(product_id) {
-        //     const product = this.env.pos.db.product_by_id[product_id];
-        //     const options = await this.getOptions(product);
-
-        //     if (!options.confirm) return;
-
-        //     this.env.pos.get_order().add_product(product, options.payload);
-        //     this.render();
-        // }
-
-        // async getOptions(product) {
-        //     let confirm = false;
-        //     let payload = {};
-        //     let options = {};
-
-        //     if (
-        //         this.env.pos.config.product_configurator &&
-        //         this.hasAttributes(product)
-        //     ) {
-        //         const {
-        //             confirmed,
-        //             payload: attrPayload,
-        //         } = await this.showConfigurableProductPopup(product);
-        //         confirm = confirmed;
-        //         payload = attrPayload;
-        //     } else {
-        //         const {
-        //             confirmed,
-        //             payload: prodPayload,
-        //         } = await this.showRegularProductPopup(product);
-        //         confirm = confirmed;
-        //         payload = prodPayload;
-        //     }
-
-        //     if (payload) {
-        //         options = {
-        //             quantity: payload.productQuantity || 1,
-        //             price_extra: payload.priceExtra || 0.0,
-        //             description: payload.selectedAttributes
-        //                 ? payload.selectedAttributes.join(", ")
-        //                 : "",
-        //         };
-        //     }
-
-        //     return {confirm: confirm, payload: options};
-        // }
-
-        // hasAttributes(product) {
-        //     return _.some(
-        //         product.attribute_line_ids,
-        //         (id) => id in this.env.pos.attributes_by_ptal_id
-        //     );
-        // }
-
-        // async showConfigurableProductPopup(product) {
-        //     const attributes = this.getAttributeList(product);
-        //     return this.showPopup("InsertProductConfigurableModal", {
-        //         product,
-        //         attributes,
-        //     });
-        // }
-
-        // async showRegularProductPopup(product) {
-        //     return this.showPopup("InsertProductModal", {
-        //         product,
-        //     });
-        // }
-
-        // getAttributeList(product) {
-        //     return _.map(
-        //         product.attribute_line_ids,
-        //         (id) => this.env.pos.attributes_by_ptal_id[id]
-        //     ).filter((attr) => attr !== undefined);
-        // }
-
-        // haveProduct() {
-        //     return true ? this.env.pos.get_order().orderlines.length > 0 : false;
-        // }
-
-        // getTotalItems() {
-        //     let count = 0;
-        //     for (let i = 0; i < this.env.pos.get_order().orderlines.length; i++) {
-        //         const element = this.env.pos.get_order().orderlines.models[i];
-        //         count += element.quantity;
-        //     }
-        //     return count;
-        // }
-
-        // getTotalValue() {
-        //     let count = 0;
-        //     for (let i = 0; i < this.env.pos.get_order().orderlines.length; i++) {
-        //         const element = this.env.pos.get_order().orderlines.models[i];
-        //         count += element.get_price_with_tax();
-        //     }
-        //     return this.env.pos.format_currency(count);
-        // }
-
-        // openCart() {
-        //     if (this.haveProduct()) {
-        //         this.env.pos.get_order().screen_data = {current: "KioskProductScreen"};
-        //         this.showPopup("CartModal", {
-        //             order: this.env.pos.get_order(),
-        //         });
-        //     }
-        // }
-
-        // openPaymentScreen() {
-        //     if (this.haveProduct()) {
-        //         this.env.pos.get_order().screen_data = {current: "KioskPaymentScreen"};
-        //         this.showScreen("KioskPaymentScreen");
-        //     }
-        // }
+        getProductName(product_id) {
+            const product = this.subCategoriesList.find((element) =>
+                element.productList.some((product) => product.id === product_id)
+            );
+
+            return product
+                ? product.productList.find((product) => product.id === product_id)
+                      .display_name
+                : null;
+        }
+
+        getProductPrice(product_id) {
+            const product = this.subCategoriesList.find((element) =>
+                element.productList.some((product) => product.id === product_id)
+            );
+
+            if (product) {
+                const targetProduct = product.productList.find(
+                    (product) => product.id === product_id
+                );
+                return this.env.pos.format_currency(targetProduct.lst_price);
+            }
+
+            return null;
+        }
+
+        productImageURL(product_id) {
+            const {id, write_date} = this.env.pos.db.product_by_id[product_id];
+            return `/web/image?model=product.product&field=image_1920&id=${id}&write_date=${write_date}&unique=1`;
+        }
+
+        async addProduct(product_id) {
+            const product = this.env.pos.db.product_by_id[product_id];
+            const options = await this.getOptions(product);
+
+            if (!options.confirm) return;
+
+            this.env.pos.get_order().add_product(product, options.payload);
+            this.render();
+        }
+
+        async getOptions(product) {
+            let confirm = false;
+            let payload = {};
+
+            if (
+                this.env.pos.config.product_configurator &&
+                this.hasAttributes(product)
+            ) {
+                const {
+                    confirmed,
+                    payload: attrPayload,
+                } = await this.showConfigurableProductPopup(product);
+                confirm = confirmed;
+                payload = attrPayload;
+            } else {
+                const {
+                    confirmed,
+                    payload: prodPayload,
+                } = await this.showRegularProductPopup(product);
+                confirm = confirmed;
+                payload = prodPayload;
+            }
+
+            if (!confirm) return {confirm};
+
+            const options = {
+                quantity: payload.productQuantity || 1,
+                price_extra: payload.priceExtra || 0.0,
+                description: payload.selectedAttributes
+                    ? payload.selectedAttributes.join(", ")
+                    : "",
+            };
+
+            return {confirm, payload: options};
+        }
+
+        hasAttributes(product) {
+            return product.attribute_line_ids.some(
+                (id) => id in this.env.pos.attributes_by_ptal_id
+            );
+        }
+
+        async showConfigurableProductPopup(product) {
+            const attributes = this.getAttributeList(product);
+            return this.showPopup("InsertProductConfigurableModal", {
+                product,
+                attributes,
+            });
+        }
+
+        async showRegularProductPopup(product) {
+            return this.showPopup("InsertProductModal", {
+                product,
+            });
+        }
+
+        getAttributeList(product) {
+            return product.attribute_line_ids
+                .map((id) => this.env.pos.attributes_by_ptal_id[id])
+                .filter((attr) => attr !== undefined);
+        }
+
+        haveProduct() {
+            return true ? this.env.pos.get_order().orderlines.length > 0 : false;
+        }
     }
 
     KioskProductScreen.template = "KioskProductScreen";
diff --git a/pos_kiosk/static/src/js/models.js b/pos_kiosk/static/src/js/models.js
index 9fc27f00c1..ccc5b72c88 100644
--- a/pos_kiosk/static/src/js/models.js
+++ b/pos_kiosk/static/src/js/models.js
@@ -1,27 +1,27 @@
 odoo.define("pos_kiosk.models", function (require) {
-  "use strict";
+    "use strict";
 
-  const models = require("point_of_sale.models");
+    const models = require("point_of_sale.models");
 
-  const _super_order = models.Order.prototype;
-  models.Order = models.Order.extend({
-    initialize: function (attributes, options) {
-      _super_order.initialize.apply(this, arguments);
-      this.client_name = options.client_name || '';
-      this.vat = options.vat || '';
-    },
+    const _super_order = models.Order.prototype;
+    models.Order = models.Order.extend({
+        initialize: function (attributes, options) {
+            _super_order.initialize.apply(this, arguments);
+            this.client_name = options.client_name || "";
+            this.vat = options.vat || "";
+        },
 
-    init_from_JSON: function (json) {
-      _super_order.init_from_JSON.apply(this, arguments);
-      this.client_name = json.client_name;
-      this.vat = json.vat;
-    },
+        init_from_JSON: function (json) {
+            _super_order.init_from_JSON.apply(this, arguments);
+            this.client_name = json.client_name;
+            this.vat = json.vat;
+        },
 
-    export_as_JSON: function () {
-      let json = _super_order.export_as_JSON.apply(this, arguments);
-      json.client_name = this.client_name;
-      json.vat = this.vat;
-      return json;
-    },
-  });
-})
\ No newline at end of file
+        export_as_JSON: function () {
+            const json = _super_order.export_as_JSON.apply(this, arguments);
+            json.client_name = this.client_name;
+            json.vat = this.vat;
+            return json;
+        },
+    });
+});
diff --git a/pos_kiosk/static/src/xml/Components/KioskCartFooter.xml b/pos_kiosk/static/src/xml/Components/KioskCartFooter.xml
new file mode 100644
index 0000000000..7d0636876f
--- /dev/null
+++ b/pos_kiosk/static/src/xml/Components/KioskCartFooter.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="KioskCartFooter" owl="1">
+        <div
+            class="w-full h-32 px-8 py-6 border-t border-gray-200 rounded-t-xl bg-gray-50 justify-start items-center gap-4 inline-flex absolute bottom-0"
+        >
+            <div class="h-20 justify-start items-center gap-8 flex">
+                <div
+                    class="w-48 px-8 py-5 rounded-lg border border-gray-300 justify-center items-center gap-2 flex"
+                    t-on-click="openCart"
+                >
+                    <i class="fa fa-shopping-cart text-xl" />
+                    <div class="flex-col justify-center items-center gap-1 inline-flex">
+                        <div
+                            class="text-justify text-gray-900 text-base font-bold leading-none"
+                        ><t t-esc='getTotalItems()' /> Items</div>
+                        <div
+                            class="text-justify text-gray-900 text-sm font-normal leading-non"
+                        >See Cart Shop</div>
+                    </div>
+                </div>
+            </div>
+            <div
+                class="grow shrink basis-0 h-20 px-8 py-6 bg-red-500 rounded-lg justify-between items-center flex"
+                t-on-click="openPaymentScreen"
+            >
+                <div
+                    class="text-justify text-gray-50 text-lg font-semibold leading-7"
+                ><t t-esc="getTotalValue()" /></div>
+                <div class="justify-start items-center gap-2 flex">
+                    <div
+                        class="text-justify text-gray-50 text-xl font-semibold leading-7"
+                    >Finalize Order</div>
+                    <i class="fa fa-arrow-right text-xl" />
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/pos_kiosk/static/src/xml/Modals/CartModal.xml b/pos_kiosk/static/src/xml/Modals/CartModal.xml
index 333532afc1..6833f2a2bc 100644
--- a/pos_kiosk/static/src/xml/Modals/CartModal.xml
+++ b/pos_kiosk/static/src/xml/Modals/CartModal.xml
@@ -3,52 +3,117 @@
 
     <t t-name="CartModal" owl="1">
         <div class="fixed bottom-0 inset-x-0 z-50">
-            <div class="container">
-                <div class="heading flex justify-between w-full">
-                    <div class="title flex flex-row items-center">
-                        Seu carrinho
+            <div
+                class="w-full h-96 kiosk:h-[40rem] border-t border-gray-200 bottom-0 bg-white rounded-t-xl flex-col justify-start items-start inline-flex"
+            >
+                <div class="self-stretch pl-8 justify-start items-center flex">
+                    <div
+                        class="text-justify text-gray-600 text-lg font-semibold leading-7"
+                    >
+                        Your shop cart
                     </div>
-                    <div class="close-button w-6 h-6 relative" t-on-click="cancel">
-                        <i class="fa fa-times" />
+                    <div class="p-6 justify-start items-center gap-2 flex">
+                        <div
+                            class="p-2 bg-gray-100 rounded-full justify-start items-center gap-2 flex"
+                            t-on-click="cancel"
+                        >
+                            <i class="fa fa-times w-6 h-6 relative p-[7px]" />
+                        </div>
                     </div>
                 </div>
 
-
-                <div class="product-details overscroll-contain max-h-[80%] overflow-y-auto">
+                <div
+                    class="self-stretch h-52 max-h-[45%] kiosk:h-auto kiosk:max-h-[65%] flex-col justify-start items-start flex overscroll-contain overflow-y-auto"
+                >
                     <t t-foreach="orderlines" t-as="orderline" t-key="orderline.id">
-                        <div class="product-container">
-                            <img class="product-image" t-att-src="productImageURL(orderline.product)" />
-                            <div class="product-text">
-                                <div class="product-name" t-esc="orderline.get_full_product_name()"></div>
-                                <div class="product-prices">
-                                    <div class="original-price" t-esc="getProductPrice(orderline.product)"></div>
+                        <div
+                            class="self-stretch px-8 py-4 justify-between items-center inline-flex"
+                        >
+                            <div class="justify-start items-center gap-8 flex">
+                                <img
+                                    class="w-16 h-auto relative rounded-lg"
+                                    t-att-src="productImageURL(orderline.product)"
+                                />
+                                <div
+                                    class="flex-col justify-center items-start inline-flex"
+                                >
+                                    <div
+                                        class="text-justify text-gray-900 text-base font-normal leading-normal"
+                                        t-esc="orderline.get_full_product_name()"
+                                    />
+                                    <div
+                                        class="justify-center items-center gap-2 inline-flex"
+                                    >
+                                        <div
+                                            class="text-justify text-gray-800 text-sm font-bold leading-tight"
+                                            t-esc="getProductPrice(orderline.product)"
+                                        />
+                                    </div>
                                 </div>
                             </div>
-                            <div class="quantity-container">
-                                <div class="quantity-button" t-on-click="removeQuantity(orderline)">
-                                    <i class="fa fa-minus"></i>
-                                </div>
-                                <div class="item-number" t-esc="orderline.quantity"></div>
-                                <div class="quantity-button" t-on-click="addQuantity(orderline)">
-                                    <i class="fa fa-plus"></i>
+                            <div
+                                class="flex-col justify-start items-center gap-2 inline-flex"
+                            >
+                                <div
+                                    class="rounded-lg border border-gray-300 justify-start items-center inline-flex"
+                                >
+                                    <div
+                                        class="w-12 h-12 relative rounded-tr-xl rounded-br-xl"
+                                        t-on-click="removeQuantity(orderline)"
+                                    >
+                                        <div
+                                            class="w-12 h-12 py-4 opacity-50 rounded-tl-xl rounded-bl-xl justify-center items-center flex"
+                                        >
+                                            <i class="fa fa-minus" />
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="w-12 h-12 px-4 py-2 justify-center items-center gap-2 flex"
+                                    >
+                                        <div
+                                            class="text-center text-gray-900 text-xl font-bold leading-7"
+                                        ><t t-esc="orderline.quantity" /></div>
+                                    </div>
+                                    <div
+                                        class="w-12 h-12 relative rounded-tr-xl rounded-br-xl"
+                                        t-on-click="addQuantity(orderline)"
+                                    >
+                                        <div
+                                            class="w-12 h-12 py-4 opacity-50 rounded-tl-xl rounded-bl-xl justify-center items-center flex"
+                                        >
+                                            <i class="fa fa-plus" />
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </t>
                 </div>
-                <t t-if="checkCurrentScreen()">
-                    <div class="total-and-checkout">
-                        <div class="total-and-checkout-container bg-red-500" t-on-click="openPaymentScreen">
-                            <div class="total-and-price-text">
-                                <div class="total-items-text"><t t-esc="getTotalItens()" /> Itens</div>
-                                <div class="total-price-text"><t t-esc="getTotalValue()" /></div>
-                            </div>
-                            <div class="checkout-button">
-                                <div class="checkout-text">Finalizar</div>
-                            </div>
+                <div
+                    class="w-full h-36 p-8 flex-col justify-start items-start gap-2 inline-flex bottom-0 fixed"
+                >
+                    <div
+                        class="self-stretch h-20 px-8 bg-red-500 rounded-lg justify-between items-center inline-flex"
+                        t-on-click="openPaymentScreen"
+                    >
+                        <div
+                            class="w-96 flex-col justify-start items-start inline-flex"
+                        >
+                            <div
+                                class="text-justify text-gray-50 text-base font-semibold leading-normal"
+                            ><t t-esc="getTotalItens()" /> Items</div>
+                            <div
+                                class="text-justify text-gray-50 text-lg font-semibold leading-7"
+                            ><t t-esc="getTotalValue()" /></div>
+                        </div>
+                        <div class="justify-start items-center gap-2 flex">
+                            <div
+                                class="text-justify text-gray-50 text-xl font-semibold leading-7"
+                            >Finalize Order</div>
+                            <i class="fa fa-arrow-right text-xl" />
                         </div>
                     </div>
-                </t>
+                </div>
             </div>
         </div>
     </t>
diff --git a/pos_kiosk/static/src/xml/Modals/ErrorModal.xml b/pos_kiosk/static/src/xml/Modals/ErrorModal.xml
index 328a460852..b00e91b499 100644
--- a/pos_kiosk/static/src/xml/Modals/ErrorModal.xml
+++ b/pos_kiosk/static/src/xml/Modals/ErrorModal.xml
@@ -1,19 +1,38 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" ?>
 <templates id="template" xml:space="preserve">
 
     <t t-name="ErrorModal" owl="1">
         <div class="fixed inset-0 flex justify-center items-center z-50">
-            <div class="w-[700px] h-[536px] bg-white rounded-xl shadow flex-col justify-start items-start inline-flex">
-                <p class="justify-center text-center text-gray-900 text-3xl font-semibold leading-9">
+
+            <div class="fixed inset-0 bg-gray-500 opacity-50" />
+
+            <div
+                class="w-[700px] h-[536px] p-12 bg-white rounded-xl shadow flex-col justify-start items-start inline-flex"
+            >
+                <p
+                    class="justify-center text-center text-gray-900 text-3xl font-semibold leading-9"
+                >
                     <t t-esc="props.title" />
                 </p>
-                <p class="self-stretch grow shrink basis-0 flex-col justify-center items-center gap-12 flex">
-                    <t t-esc="props.body" class="text-center text-gray-900 text-xl font-semibold leading-9" />
+                <p
+                    class="self-stretch grow shrink basis-0 flex-col justify-center items-center gap-12 flex"
+                >
+                    <t
+                        t-esc="props.body"
+                        class="text-center text-gray-900 text-3xl font-semibold leading-9"
+                    />
                 </p>
-                <div class="self-stretch p-8 justify-center items-center gap-8 inline-flex">
-                  <div class="grow shrink basis-0 h-20 px-8 bg-red-500 rounded-lg justify-center items-center gap-8 flex" t-on-click="confirm">
+                <div
+                    class="self-stretch p-8 justify-center items-center gap-8 inline-flex"
+                >
+                  <div
+                        class="grow shrink basis-0 h-20 px-8 bg-red-500 rounded-lg justify-center items-center gap-8 flex"
+                        t-on-click="confirm"
+                    >
                     <div class="justify-start items-center gap-2 flex">
-                        <div class="text-justify text-gray-50 text-xl font-semibold leading-7"><t t-esc="props.confirmText" /></div>
+                        <div
+                                class="text-justify text-gray-50 text-xl font-semibold leading-7"
+                            ><t t-esc="props.confirmText" /></div>
                     </div>
                   </div>
                 </div>
diff --git a/pos_kiosk/static/src/xml/Modals/InsertProductConfigurableModal.xml b/pos_kiosk/static/src/xml/Modals/InsertProductConfigurableModal.xml
index 4a1b67d7a5..70a4d9cfc1 100644
--- a/pos_kiosk/static/src/xml/Modals/InsertProductConfigurableModal.xml
+++ b/pos_kiosk/static/src/xml/Modals/InsertProductConfigurableModal.xml
@@ -3,27 +3,28 @@
 
     <t t-name="InsertProductConfigurableModal" owl="1">
         <div class="fixed inset-0 flex justify-center items-center z-50">
+
+            <div class="fixed inset-0 bg-gray-500 opacity-50" />
+
             <div
-                class="w-[700px] h-[800px] bg-white rounded-xl shadow flex-col justify-start items-start inline-flex"
+                class="w-[700px] h-[600px] tablet:h-[650px] kiosk:h-[750px] bg-white rounded-xl shadow flex-col justify-start items-start inline-flex z-50"
             >
                 <div
-                    class="w-[700px] h-[300px] relative bg-white rounded-tl-xl rounded-tr-xl"
+                    class="w-full h-[200px] tablet:h-[250px] kiosk:h-[350px] p-8 relative bg-white rounded-xl p-8 inline-flex items-center justify-center"
                 >
                     <img
-                        class="w-[700px] h-[300px] rounded-tl-xl"
+                        class="h-full object-contain"
                         t-att-src="productImageURL"
                         t-att-alt="props.product.display_name"
                     />
                     <div
-                        class="p-6 left-[612px] top-0 absolute justify-start items-center gap-2 inline-flex rounded-tl-xl"
+                        class="p-6 top-0 right-0 absolute justify-end items-center gap-2 inline-flex"
                     >
                         <div
-                            class="p-2 bg-white rounded-[100px] justify-start items-center gap-2 flex"
+                            class="p-2 bg-gray-100 rounded-[100px] justify-start items-center gap-2 flex"
                             t-on-click="cancel"
                         >
-                            <div class="w-6 h-6 px-[0.25rem] relative">
-                                <i class="fa fa-times" />
-                            </div>
+                            <i class="fa fa-times w-6 h-6 relative p-[7px]" />
                         </div>
                     </div>
                 </div>
@@ -46,16 +47,16 @@
                 <div class="self-stretch h-[0px] border border-gray-200" />
                 <div class="w-full flex-col justify-center items-start inline-flex">
                     <div
-                        class="self-stretch px-8 pb-2 bg-gray-50 justify-start items-start gap-2 inline-flex"
+                        class="self-stretch px-8 pb-4 pt-2 bg-gray-50 justify-start items-start gap-2 inline-flex"
                     >
                         <div
                             class="text-gray-900 text-base font-semibold leading-normal"
                         >
-                            Escolha a melhor opção
+                            Choose from the following options
                         </div>
                     </div>
                     <div
-                        class="self-stretch h-44 flex-col justify-center items-start flex"
+                        class="self-stretch h-32 pt-2 flex-col justify-center items-start flex"
                     >
                         <t t-foreach="attributes" t-as="attribute" t-key="attribute.id">
                             <div
@@ -135,7 +136,7 @@
                         <div
                             class="text-justify text-gray-50 text-lg font-semibold leading-7"
                         >
-                            Adicionar
+                            Add Product
                         </div>
                         <div
                             class="text-justify text-gray-50 text-lg font-semibold leading-7"
diff --git a/pos_kiosk/static/src/xml/Modals/InsertProductModal.xml b/pos_kiosk/static/src/xml/Modals/InsertProductModal.xml
index 9fb59c6346..48d19a7495 100644
--- a/pos_kiosk/static/src/xml/Modals/InsertProductModal.xml
+++ b/pos_kiosk/static/src/xml/Modals/InsertProductModal.xml
@@ -4,48 +4,86 @@
     <t t-name="InsertProductModal" owl="1">
         <div class="fixed inset-0 flex justify-center items-center z-50">
 
-            <div class="fixed inset-0 bg-gray-500 opacity-50"></div>
+            <div class="fixed inset-0 bg-gray-500 opacity-50" />
 
-            <div class="w-full w-[700px] bg-white rounded-xl shadow flex-col justify-start items-start inline-flex z-50">
-                <div class="w-full h-[300px] relative bg-white rounded-xl ">
-                    <img class="w-full h-full md:h-[300px] object-contain" t-att-src="productImageURL" t-att-alt="props.product.display_name"/>
-                    <div class="p-6 lg:left-[612px] top-0 absolute justify-start items-center gap-2 inline-flex">
-                        <div class="p-2 bg-white rounded-[100px] justify-start items-center gap-2 flex" t-on-click="cancel">
-                            <div class="w-6 h-6 px-[0.25rem] relative">
-                                <i class="fa fa-times" />
-                            </div>
+            <div
+                class="w-[700px] h-[550px] bg-white rounded-xl shadow flex-col justify-start items-start inline-flex z-50"
+            >
+                <div
+                    class="w-full h-[300px] p-8 relative bg-white rounded-xl p-8 inline-flex items-center justify-center"
+                >
+                    <img
+                        class="h-full object-contain"
+                        t-att-src="productImageURL"
+                        t-att-alt="props.product.display_name"
+                    />
+                    <div
+                        class="p-6 top-0 right-0 absolute justify-end items-center gap-2 inline-flex"
+                    >
+                        <div
+                            class="p-2 bg-gray-100 rounded-[100px] justify-start items-center gap-2 flex"
+                            t-on-click="cancel"
+                        >
+                            <i class="fa fa-times w-6 h-6 relative p-[7px]" />
                         </div>
                     </div>
                 </div>
-                <div class="self-stretch h-24 px-8 py-6 flex-col justify-center items-start flex">
-                    <div class="text-justify text-gray-900 text-lg font-semibold leading-7">
+                <div
+                    class="self-stretch h-24 px-8 py-6 flex-col justify-center items-start flex"
+                >
+                    <div
+                        class="text-justify text-gray-900 text-lg font-semibold leading-7"
+                    >
                         <t t-esc="productName" />
                     </div>
                     <div class="justify-center items-center gap-2 inline-flex">
-                        <div class="text-justify text-gray-800 text-sm font-bold leading-tight">
+                        <div
+                            class="text-justify text-gray-800 text-sm font-bold leading-tight"
+                        >
                             <t t-esc="productPrice" />
                         </div>
                     </div>
                 </div>
                 <div class="self-stretch h-[0px] border border-gray-200" />
-                <div class="self-stretch p-8 justify-start items-center gap-4 inline-flex">
-                    <div class="w-[175px] self-stretch rounded-lg border border-gray-300 justify-start items-center flex">
-                        <div class="w-12 h-12 py-3 px-8 relative opacity-50 rounded-tl-xl rounded-bl-xl" t-on-click="removeQuantity">
+                <div
+                    class="self-stretch p-8 justify-start items-center gap-4 inline-flex"
+                >
+                    <div
+                        class="w-[175px] self-stretch rounded-lg border border-gray-300 justify-start items-center flex"
+                    >
+                        <div
+                            class="w-12 h-12 py-3 px-8 relative opacity-50 rounded-tl-xl rounded-bl-xl"
+                            t-on-click="removeQuantity"
+                        >
                             <i class="fa fa-minus" />
                         </div>
-                        <div class="w-[40px] self-stretch py-2 px-6 justify-center items-center gap-2 flex">
-                            <div class="text-center text-gray-900 text-2xl font-bold leading-loose">
+                        <div
+                            class="w-[40px] self-stretch py-2 px-6 justify-center items-center gap-2 flex"
+                        >
+                            <div
+                                class="text-center text-gray-900 text-2xl font-bold leading-loose"
+                            >
                                 <t t-esc="productQuantity" />
                             </div>
                         </div>
-                        <div class="w-12 h-12 py-3 px-8 relative rounded-tr-xl rounded-br-xl" t-on-click="addQuantity">
+                        <div
+                            class="w-12 h-12 py-3 px-8 relative rounded-tr-xl rounded-br-xl"
+                            t-on-click="addQuantity"
+                        >
                             <i class="fa fa-plus" />
                         </div>
                     </div>
-                    <div class="grow shrink basis-0 h-[76px] px-8 py-6 bg-red-500 rounded-lg justify-between items-center gap-4 flex" t-on-click="confirm">
-                        <div class="text-justify text-gray-50 text-lg font-semibold leading-7">
-                            Adicionar 
-                            <div class="text-justify text-gray-50 text-lg font-semibold leading-7">
+                    <div
+                        class="w-full h-[76px] px-8 py-6 bg-red-500 rounded-lg justify-between items-center gap-4 flex"
+                        t-on-click="confirm"
+                    >
+                        <div
+                            class="text-justify text-gray-50 text-lg font-semibold leading-7"
+                        >
+                            Add Product
+                            <div
+                                class="text-justify text-gray-50 text-lg font-semibold leading-7"
+                            >
                                 <t t-esc="productTotalPrice" />
                             </div>
                         </div>
diff --git a/pos_kiosk/static/src/xml/Screens/KioskClientScreen.xml b/pos_kiosk/static/src/xml/Screens/KioskClientScreen.xml
index 74a6ab8429..49be3cd150 100644
--- a/pos_kiosk/static/src/xml/Screens/KioskClientScreen.xml
+++ b/pos_kiosk/static/src/xml/Screens/KioskClientScreen.xml
@@ -2,50 +2,89 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="KioskClientScreen" owl="1">
-        <div class="client grow shrink basis-0 flex-col justify-start items-center inline-flex">
-            <div class="relative w-screen h-[10%] overflow-hidden opacity-30" style="background: linear-gradient(to top, #ff0000, #00ff00);">
-                <img class="w-full h-[30vh] object-cover" t-att-src="topBannerLogo" alt="Banner Logo" />
-            </div>
+        <div>
+            <KioskHeader />
 
-            <div class="title-container absolute inset-x-0 flex-col justify-start items-center flex z-10">
-                <div class="h-[12%] px-8 pt-3 pb-4 flex-col justify-center items-center gap-4 flex">
-                    <div class="main-title text-justify text-black font-bold">
-                        Para quem é o pedido?
-                    </div>
-                    <div class="sub-title text-justify text-black font-normal">
-                        Informe seu nome
+            <div
+                class="w-full h-96 tablet:pt-96 kiosk:pt-96 left-0 top-0 flex-col justify-end items-center inline-flex"
+            >
+                <div
+                    class="self-stretch h-96 pt-20 flex-col justify-start items-center inline-flex"
+                >
+                    <div
+                        class="self-stretch h-40 px-8 pt-8 flex-col justify-center items-center gap-4 flex"
+                    >
+                        <div
+                            class="text-justify text-gray-900 text-4xl kiosk:text-6xl font-bold leading-10"
+                        >
+                            Who is the order for?
+                        </div>
+                        <div
+                            class="text-justify text-gray-500 text-2xl kiosk:text-4xl font-normal leading-loose"
+                        >
+                            Enter your name
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="px-8 py-14 flex-col justify-center items-center gap-8 inline-flex">
-                <div class="flex-col justify-center items-start gap-4 flex">
-                    <div class="text-justify text-gray-900 text-lg font-normal leading-7">Seu nome</div>
-                    <input name="name" t-on-change="changeName" class="w-96 h-20 p-5 bg-white rounded-xl shadow-inner border border-gray-400 justify-start items-start gap-2 inline-flex" />
-                </div>
+                <div
+                    class="h-92 kiosk:h-96 px-8 pb-10 tablet:py-16 kiosk:py-16 kiosk:my-14 flex-col justify-center items-center gap-8 flex"
+                >
+                    <div class="flex-col justify-center items-start gap-4 flex">
+                        <div
+                            class="text-justify text-gray-900 text-lg kiosk:text-xl font-normal leading-77"
+                        >Your name</div>
+                        <input
+                            name="name"
+                            t-on-change="changeName"
+                            class="w-96 h-20 p-5 text-lg kiosk:text-xl bg-white rounded-xl shadow-inner border border-gray-400 justify-start items-start gap-2 inline-flex"
+                            autocomplete="off"
+                        />
+                    </div>
 
-                <div class="flex-col justify-center items-start gap-4 flex">
-                    <div class="text-justify text-gray-900 text-lg font-normal leading-7">CPF (opcional)</div>
-                    <input name="vat" t-on-change="changeVat" class="w-96 h-20 p-5 bg-white rounded-xl shadow-inner border border-gray-400 justify-start items-start gap-2 inline-flex" />
+                    <div class="w-full justify-between items-center inline-flex">
+                        <div class="flex-col justify-start items-start inline-flex">
+                            <div
+                                class="text-justify text-gray-700 text-lg kiosk:text-xl font-normal leading-7"
+                            >VAT (optional)</div>
+                            <input
+                                name="vat"
+                                t-on-change="changeVat"
+                                class="w-96 h-20 p-5 text-lg kiosk:text-xl bg-white rounded-xl shadow-inner border border-gray-400 justify-start items-start gap-2 inline-flex"
+                                autocomplete="off"
+                            />
+                        </div>
+                    </div>
                 </div>
-            </div>
 
-            <div class="w-screen p-2 justify-center items-center gap-4">
-                <div class="self-stretch justify-between items-center gap-8 flex">
-
-                    <div class="px-8 py-5 rounded-lg border border-gray-400 justify-center items-center gap-2 flex" t-on-click="backScreen">
-                        <div class="text-justify text-gray-800 text-xl font-semibold leading-7">
-                            Voltar
+                <div
+                    class="w-full kiosk:mt-20 justify-center items-center gap-16 inline-flex"
+                >
+                    <div
+                        class="w-64 h-20 px-8 py-5 rounded-lg border border-gray-300 justify-center items-center gap-2 flex"
+                        t-on-click="backScreen"
+                    >
+                        <div
+                            class="text-justify text-gray-900 text-xl kiosk:text-2xl font-semibold leading-7"
+                        >
+                            Back
                         </div>
                     </div>
-
-                    <div t-attf-class="w-96 h-20 px-8 bg-red-500 rounded-lg justify-center items-center gap-8 inline-flex {{ currentOrder.client_name ? '' : 'opacity-40' }}" t-on-click="finalizeOrder()">
+                    <div
+                        t-attf-class="w-64 h-20 px-8 bg-red-500 rounded-lg justify-center items-center gap-8 flex {{ currentOrder.client_name ? '' : 'opacity-40' }}"
+                        t-on-click="finalizeOrder()"
+                    >
                         <div class="justify-start items-center gap-2 flex">
-                            <div class="text-justify text-gray-50 text-xl font-semibold leading-7">Continuar</div>
+                            <div
+                                class="text-justify text-gray-50 text-xl kiosk:text-2xl font-semibold leading-7"
+                            >
+                                Continue
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
+
         </div>
     </t>
 
diff --git a/pos_kiosk/static/src/xml/Screens/KioskPaymentScreen.xml b/pos_kiosk/static/src/xml/Screens/KioskPaymentScreen.xml
index 89944be94f..0bc6996f72 100644
--- a/pos_kiosk/static/src/xml/Screens/KioskPaymentScreen.xml
+++ b/pos_kiosk/static/src/xml/Screens/KioskPaymentScreen.xml
@@ -2,28 +2,42 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="KioskPaymentScreen" owl="1">
-        <div class="payment grow shrink basis-0 flex-col justify-start items-center inline-flex">
-            <div class="relative w-screen h-[10%] overflow-hidden opacity-30" style="background: linear-gradient(to top, #ff0000, #00ff00);">
-                <img class="w-full h-[30vh] object-cover" t-att-src="topBannerLogo" alt="Banner Logo" />
-            </div>
+        <div>
+            <KioskHeader />
 
-            <div class="title-container absolute inset-x-0 flex-col justify-start items-center flex">
+            <div
+                class="w-auto h-36 kiosk:h-44 kiosk:mb-40 px-8 pt-8 pb-12 flex-col justify-center items-center gap-4 flex mx-auto my-0"
+            >
                 <div class="flex-col justify-center items-center gap-4 flex">
-                    <div class="main-title text-justify text-black font-bold">
-                        Finalizar Pedido
+                    <div
+                        class="text-justify text-gray-900 text-4xl kiosk:text-6xl font-bold leading-10"
+                    >
+                        End Order
                     </div>
-                    <div class="sub-title text-justify text-black font-normal">
-                        Escolha sua forma de pagamento
+                    <div
+                        class="text-justify text-gray-500 text-2xl kiosk:text-4xl font-normal leading-loose"
+                    >
+                        Select a payment method
                     </div>
                 </div>
-
             </div>
-            
-            <div class="w-full px-2 py-3 justify-center items-center gap-12 flex">
-                <div class="payment-container justify-between items-center">
-                    <t t-foreach="payment_methods" t-as="payment_method" t-key="payment_method.id">
-                        <div class="item bg-white rounded-xl shadow border border-gray-300 flex-col justify-center items-center gap-4 inline-flex" t-on-click="addPaymentLine(payment_method)">
-                            <div class="text-gray-800 text-xl font-bold leading-7">
+
+            <div
+                class="w-auto h-36 kiosk:h-80 kiosk:p-8 kiosk:pb-20 kiosk:mt-40 px-4 justify-center items-center gap-12 flex mx-auto my-0"
+            >
+                <div class="w-auto h-auto justify-center items-center flex">
+                    <t
+                        t-foreach="payment_methods"
+                        t-as="payment_method"
+                        t-key="payment_method.id"
+                    >
+                        <div
+                            t-attf-class="w-32 h-32 kiosk:w-60 kiosk:h-60 ml-4 kiosk:ml-8 rounded-xl shadow border border-gray-100 flex-col justify-center items-center gap-4 inline-flex {{ methodPaymentLine === payment_method.id ? 'bg-gray-100' : 'bg-white' }}"
+                            t-on-click="addPaymentLine(payment_method)"
+                        >
+                            <div
+                                class="text-gray-700 text-xl kiosk:text-4xl font-bold leading-7"
+                            >
                                 <t t-esc="payment_method.name" />
                             </div>
                         </div>
@@ -31,54 +45,68 @@
                 </div>
             </div>
 
-            <div class="absolute top-[65vh] w-screen p-2 justify-center items-center gap-4 flex flex-col">
-                <div class="self-stretch items-center gap-8 flex flex-col">
-                    <div class="px-8 py-5 rounded-lg border border-gray-400 justify-center items-center gap-2 flex" t-on-click="backScreen">
-                        <div class="text-justify text-gray-800 text-xl font-semibold leading-7">
-                            Voltar
+            <div
+                class="w-full h-36 p-8 kiosk:mt-40 justify-center items-center gap-4 flex mx-auto my-0 absolute bottom-0"
+            >
+                <div class="w-full self-stretch justify-between items-center flex">
+                    <div
+                        class="w-32 px-8 py-5 rounded-lg border border-gray-300 justify-center items-center gap-2 flex"
+                        t-on-click="backScreen"
+                    >
+                        <div
+                            class="text-justify text-gray-900 text-xl kiosk:text-3xl   font-semibold leading-7"
+                        >
+                            Back
                         </div>
                     </div>
 
-                    <div class="justify-center items-center gap-4 flex flex-col">
-                        <div class="justify-start items-center gap-4 flex flex-col">
-                            <div class="px-8 py-5 rounded-lg border border-gray-400 justify-center items-center gap-2 flex" t-on-click="openCartModal">
+                    <div class="self-stretch justify-center items-center gap-4 flex">
+                        <div class="self-stretch justify-start items-center gap-4 flex">
+                            <div
+                                class="w-48 px-8 kiosk:w-60 py-5 rounded-lg border border-gray-300 justify-center items-center gap-2 flex"
+                                t-on-click="openCartModal"
+                            >
                                 <div class="justify-center items-center gap-2 flex">
-                                    <div class="flex-col justify-center items-start gap-1 inline-flex">
-                                        <div class="text-justify text-gray-800 text-base font-bold leading-none">
-                                            <i class="fa fa-shopping-cart" />
-                                            <t t-esc="countTotalItens()"/>
-                                            Itens
+                                    <i
+                                        class="fa fa-shopping-cart w-8 h-8 relative text-3xl"
+                                    />
+                                    <div
+                                        class="flex-col justify-center items-start gap-1 inline-flex"
+                                    >
+                                        <div
+                                            class="text-justify text-gray-900 text-base font-bold leading-none kiosk:text-xl"
+                                        >
+                                            <t t-esc="countTotalItens()" />
+                                            Items
                                         </div>
-                                        <div class="text-justify text-gray-800 text-sm font-normal leading-[14px]">
-                                            Ver carrinho
+                                        <div
+                                            class="text-justify text-gray-900 text-sm kiosk:text-xl font-normal leading-none"
+                                        >
+                                            See Cart
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                            <t t-if="hasPaymentline()">
-                                <div class="cart bg-red-500 rounded-lg justify-center items-center gap-8 flex" t-on-click="nextScreen()">
-                                    <div class="text-justify text-gray-50 text-lg font-semibold leading-7">
-                                        <t t-esc="getTotalValue()" />
-                                    </div>
-                                    <div class="justify-start items-center gap-2 flex">
-                                        <div class="text-justify text-gray-50 text-xl font-semibold leading-7">
-                                            Finalizar pedido
-                                        </div>
-                                    </div>
+                            <div
+                                t-attf-class="w-auto self-stretch px-8 rounded-lg justify-center items-center gap-8 flex {{ hasPaymentline() ? 'bg-red-500' : 'bg-gray-400 opacity-40' }}"
+                                t-on-click="nextScreen()"
+                            >
+                                <div
+                                    class="text-justify text-gray-50 text-lg kiosk:text-3xl font-semibold leading-7"
+                                >
+                                    <t t-esc="getTotalValue()" />
                                 </div>
-                            </t>
-                            <t t-else="">
-                                <div class="cart bg-gray-400 rounded-lg justify-center items-center gap-8 flex">
-                                    <div class="text-justify text-gray-50 text-lg font-semibold leading-7">
-                                        <t t-esc="getTotalValue()" />
-                                    </div>
-                                    <div class="justify-start items-center gap-2 flex">
-                                        <div class="text-justify text-gray-50 text-xl font-semibold leading-7">
-                                            Finalizar pedido
-                                        </div>
+                                <div class="justify-start items-center gap-2 flex">
+                                    <div
+                                        class="text-justify text-gray-50 text-xl kiosk:text-3xl font-semibold leading-7"
+                                    >
+                                        End Order
                                     </div>
+                                    <i
+                                        class="fa fa-arrow-right text-xl kiosk:text-3xl"
+                                    />
                                 </div>
-                            </t>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/pos_kiosk/static/src/xml/Screens/KioskReceiptScreen.xml b/pos_kiosk/static/src/xml/Screens/KioskReceiptScreen.xml
index af1cd9b2f3..11772a8a45 100644
--- a/pos_kiosk/static/src/xml/Screens/KioskReceiptScreen.xml
+++ b/pos_kiosk/static/src/xml/Screens/KioskReceiptScreen.xml
@@ -1,39 +1,65 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" ?>
 <templates id="template" xml:space="preserve">
 
     <t t-name="KioskReceiptScreen" owl="1">
         <div>
-            <div class="receipt bg-white flex-col justify-start items-start inline-flex">
-                <div class="relative overflow-hidden opacity-30">
-                    <img class="w-full object-cover" t-att-src="topBannerLogo" alt="Banner Logo" />
-                </div>
+            <div class="receipt">
+
+                <KioskHeader />
 
-                <div class="title-container absolute grow shrink basis-0 flex-col justify-start items-center flex z-10">
-                    <div class="px-8 pt-2 pb-12 flex-col justify-center items-center gap-4 flex">
-                        <div class="main-title text-justify text-gray-700 font-bold">
-                            Obrigado pelo o seu pedido
+                <div
+                    class="w-full h-96 py-2 kiosK:py-20 tablet:py-20 flex-col justify-start items-center inline-flex"
+                >
+                    <div
+                        class="self-stretch h-40 px-8 pt-2 kiosk:pt-8 tablet:pt-8 pb-8 kiosk:pb-12 tablet:pb-12 flex-col justify-center items-center gap-4 flex"
+                    >
+                        <div
+                            class="text-justify text-gray-900 text-4xl kiosk:text-6xl font-bold leading-10"
+                        >
+                            Thanks for your order!
                         </div>
-                        <div class="sub-title text-justify text-gray-500 font-normale">
-                            Volte sempre!
+                        <div
+                            class="text-justify text-gray-500 text-2xl kiosk:text-4xl font-normal leading-loose"
+                        >
+                            Come back soon!
                         </div>
                     </div>
-                    <div class="px-8 py-14 justify-center items-center gap-4 inline-flex">
-                        <div class="flex-col justify-center items-center gap-8 inline-flex">
-                            <div class="h-20 px-8 bg-red-500 rounded-lg justify-center items-center gap-8 inline-flex" t-on-click="makeOtherOrder()">
+                    <div
+                        class="w-96 px-8 py-6 kiosk:py-14 tablet:py-14 justify-center items-center gap-4 inline-flex"
+                    >
+                        <div
+                            class="w-full flex-col justify-center items-center gap-8 inline-flex"
+                        >
+                            <div
+                                class="self-stretch h-20 px-8 bg-red-500 rounded-lg justify-center items-center gap-8 inline-flex"
+                                t-on-click="makeOtherOrder()"
+                            >
                                 <div class="justify-start items-center gap-2 flex">
-                                    <div class="text-justify text-gray-50 text-xl font-semibold leading-7">
-                                        Fazer outro pedido
+                                    <div
+                                        class="text-justify text-gray-50 text-xl kiosk:text-2xl font-semibold leading-7"
+                                    >
+                                        Make another order
                                     </div>
                                 </div>
                             </div>
-                            <div class="h-20 px-8 py-5 rounded-lg border border-gray-400 justify-center items-center gap-2 inline-flex">
-                                <div class="text-justify text-gray-800 text-xl font-semibold leading-7" t-on-click="printReceipt()">
-                                    Imprimir cupom fiscal
+                            <div
+                                class="self-stretch h-20 px-8 py-5 rounded-lg border border-gray-300 justify-center items-center gap-2 inline-flex"
+                            >
+                                <div
+                                    class="text-justify text-gray-900 text-xl kiosk:text-2xl font-semibold leading-7"
+                                    t-on-click="printReceipt()"
+                                >
+                                    Print receipt
                                 </div>
                             </div>
-                            <div class="h-20 px-8 py-5 rounded-lg border border-gray-400 justify-center items-center gap-2 inline-flex" t-on-click="endedSession()">
-                                <div class="text-justify text-gray-800 text-xl font-semibold leading-7">
-                                    Encerrar sessão
+                            <div
+                                class="self-stretch h-20 px-8 py-5 rounded-lg border border-gray-300 justify-center items-center gap-2 inline-flex"
+                                t-on-click="endedSession()"
+                            >
+                                <div
+                                    class="text-justify text-gray-900 text-xl kiosk:text-2xl font-semibold leading-7"
+                                >
+                                    Ended session
                                 </div>
                             </div>
                         </div>
diff --git a/pos_kiosk/static/src/xml/Screens/ProductScreen/KioskProductCategory.xml b/pos_kiosk/static/src/xml/Screens/ProductScreen/KioskProductCategory.xml
index 19d2dd0a1a..7070bbdda6 100644
--- a/pos_kiosk/static/src/xml/Screens/ProductScreen/KioskProductCategory.xml
+++ b/pos_kiosk/static/src/xml/Screens/ProductScreen/KioskProductCategory.xml
@@ -2,14 +2,21 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="KioskProductCategory" owl="1">
-      <div class="w-full py-8 justify-center items-center inline-flex">
-          <div class="h-28 tablet:h-12 kiosk:h-18 justify-center items-center gap-8 flex">
+      <div class="w-full py-4 justify-center items-center inline-flex">
+          <div
+                class="h-28 tablet:h-12 kiosk:h-24 justify-center items-center gap-8 flex"
+            >
               <t t-foreach='categoriesList' t-as='category' t-key='category.id'>
-                  <div t-attf-class="w-32 h-32 bg-white rounded-xl shadow flex-col justify-center items-center gap-2 inline-flex {{ category.id === selectedCategoryId ? 'bg-red-500' : 'bg-slate-50' }}" t-on-click="trigger('switch-category', category.id)">
-                        <div class="w-10 h-10 relative">
+                  <div
+                        t-attf-class="w-32 h-32 kiosk:w-48 kiosk:h-48 bg-white rounded-xl shadow flex-col justify-center items-center gap-2 inline-flex {{ category.id === selectedCategoryId ? 'bg-red-500' : 'bg-slate-50' }}"
+                        t-on-click="trigger('switch-category', category.id)"
+                    >
+                        <div class="w-10 h-10 kiosk:w-16 kiosk:h-16 relative">
                             <img t-att-src="getCategoryImage(category.id)" />
                         </div>
-                        <div t-attf-class="text-sm font-bold leading-tight {{ category.id === selectedCategoryId ? 'text-white' : 'text-gray-600' }}">
+                        <div
+                            t-attf-class="text-sm font-bold leading-tight {{ category.id === selectedCategoryId ? 'text-white' : 'text-gray-600' }}"
+                        >
                             <t t-esc="category.name" />
                         </div>
                   </div>
diff --git a/pos_kiosk/static/src/xml/Screens/ProductScreen/KioskProductScreen.xml b/pos_kiosk/static/src/xml/Screens/ProductScreen/KioskProductScreen.xml
index 5edbc85cfe..d7edaa2614 100644
--- a/pos_kiosk/static/src/xml/Screens/ProductScreen/KioskProductScreen.xml
+++ b/pos_kiosk/static/src/xml/Screens/ProductScreen/KioskProductScreen.xml
@@ -5,34 +5,71 @@
         <div>
             <KioskHeader />
 
-            <div class="main-screen left-0 top-[10%] kiosk:top-[5%] absolute flex-col justify-start items-center">
+            <div
+                class="main-screen left-0 top-[10%] kiosk:top-[5%] absolute flex-col justify-start items-center"
+            >
                 <KioskProductCategory />
 
-                <div class="w-auto px-8 py-2 bg-white justify-start items-center gap-2 inline-flex">
-                    <p class="text-justify text-gray-700 text-2xl font-bold font-['Inter'] leading-loose">
+                <!-- <div class="w-auto px-8 py-0 bg-white justify-start items-center gap-2 inline-flex">
+                    <p class="text-justify text-gray-700 text-2xl font-bold leading-loose">
                         <t t-esc="getCategoryName()" />
                     </p>
-                </div>
+                </div> -->
 
-                <!-- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 justify-center items-center max-h-[70vh] flex-grow overflow-y-auto overscroll-contain">
-                    <t t-foreach='subCategoriesList' t-as='subcategory' t-key='subcategory.id'>
-                        <div class="p-8 mt-2 mb-2 py-4 flex-col justify-center items-center gap-4 flex">
-                            <div class="self-stretch justify-start items-center gap-2 inline-flex">
-                                <div class="text-justify text-gray-600 text-lg font-semibold leading-7">
+                <div
+                    t-attf-class="grid grid-cols-1 gap-4 justify-center items-center mt-4 tablet:mt-8 kiosk:mt-10 flex-grow overflow-y-auto overscroll-contain {{ haveProduct() ? 'max-h-[48vh] kiosk:max-h-[80vh] tablet:max-h-[67vh]' : 'max-h-[65vh] kiosk:max-h-[86vh] tablet:max-h-[80vh]' }}"
+                >
+                    <t
+                        t-foreach='subCategoriesList'
+                        t-as='subcategory'
+                        t-key='subcategory.id'
+                    >
+                        <div
+                            class="p-4 px-8 mt-2 mb-2 py-4 flex-col justify-center items-center gap-4 flex"
+                        >
+                            <div
+                                class="self-stretch justify-start items-center gap-2 inline-flex"
+                            >
+                                <div
+                                    class="text-justify text-gray-600 text-lg font-semibold leading-7"
+                                >
                                     <t t-esc='subcategory.name' />
                                 </div>
                             </div>
-                            <div class="flex flex-wrap justify-center items-center gap-4">
-                                <t t-foreach='subcategory.productList' t-as='product' t-key='product.id'>
-                                    <div class="product bg-gray-50 border-2 border-gray-200 rounded-xl flex-col justify-center items-center inline-flex" t-on-click='addProduct(product.id)'>
-                                        <img class="product-image justify-center relative rounded-xl" t-att-src="productImageURL(product.id)" t-att-alt="product.display_name"/>
-                                        <div class="h-16 p-4 flex-col justify-center items-start flex">
-                                            <div class="text-justify text-gray-900 text-sm font-normal leading-tight">
+                            <div
+                                class="flex flex-wrap justify-center items-center gap-4"
+                            >
+                                <t
+                                    t-foreach='subcategory.productList'
+                                    t-as='product'
+                                    t-key='product.id'
+                                >
+                                    <div
+                                        class="w-60 h-60 tablet:w-40 tablet:h-40 kiosk:w-60 kiosk:h-60 bg-gray-50 border-2 border-gray-200 rounded-xl flex-col justify-center items-center inline-flex"
+                                        t-on-click='addProduct(product.id)'
+                                    >
+                                        <img
+                                            class="w-auto h-40 tablet:w-auto tablet:h-20 kiosk:w-auto kiosk:h-40 py-2 relative rounded-xl"
+                                            t-att-src="productImageURL(product.id)"
+                                            t-att-alt="product.display_name"
+                                        />
+                                        <div
+                                            class="self-stretch h-16 p-4 flex-col justify-center items-start flex"
+                                        >
+                                            <div
+                                                class="text-justify text-gray-900 text-sm font-normal leading-tight"
+                                            >
                                                 <t t-esc='getProductName(product.id)' />
                                             </div>
-                                            <div class="justify-center items-center gap-2 inline-flex">
-                                                <div class="text-justify text-gray-800 text-sm font-bold leading-tight">
-                                                    <t t-esc='getProductPrice(product.id)'/>
+                                            <div
+                                                class="justify-center items-center gap-2 inline-flex"
+                                            >
+                                                <div
+                                                    class="text-justify text-gray-800 text-sm font-bold leading-tight"
+                                                >
+                                                    <t
+                                                        t-esc='getProductPrice(product.id)'
+                                                    />
                                                 </div>
                                             </div>
                                         </div>
@@ -41,28 +78,12 @@
                             </div>
                         </div>
                     </t>
-                </div>  -->
+                </div>
             </div>
 
-            <!-- <t t-if='haveProduct()'>
-                <div class="cart-container">
-                    <div class="left-panel">
-                        <div class="button-container" t-on-click="openCart">
-                            <i class="fa fa-shopping-cart" />
-                            <div class="text-container">
-                                <div class="item-count"><t t-esc='getTotalItems()' /> Itens</div>
-                                <div class="item-description">Ver carrinho</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="price-container bg-red-500" t-on-click="openPaymentScreen">
-                        <div class="price"><t t-esc="getTotalValue()" /></div>
-                        <div class="checkout-container">
-                            <div class="checkout-text">Finalizar</div>
-                        </div>
-                    </div>
-                </div>
-            </t> -->
+            <t t-if="haveProduct()">
+                <KioskCartFooter />
+            </t>
         </div>
     </t>
 
diff --git a/pos_kiosk/static/src/xml/Screens/WelcomeScreen.xml b/pos_kiosk/static/src/xml/Screens/WelcomeScreen.xml
index 971a88ec44..753c2f59eb 100644
--- a/pos_kiosk/static/src/xml/Screens/WelcomeScreen.xml
+++ b/pos_kiosk/static/src/xml/Screens/WelcomeScreen.xml
@@ -13,7 +13,7 @@
                 t-on-click="navigateToProductScreen"
             >
                 <div
-                    class="text-white text-6xl font-bold font-['Inter'] leading-[60px] p-4 bg-zinc-800 rounded-lg mb-4 tablet:mb-32 kiosk:mb-64"
+                    class="text-white text-6xl font-bold leading-[60px] p-4 bg-zinc-800 rounded-lg mb-4 tablet:mb-32 kiosk:mb-64"
                 >
                     Start
                 </div>
diff --git a/pos_kiosk/views/pos_assets_kiosk_common.xml b/pos_kiosk/views/pos_assets_kiosk_common.xml
index 3db3624169..b2ea3a6ee4 100644
--- a/pos_kiosk/views/pos_assets_kiosk_common.xml
+++ b/pos_kiosk/views/pos_assets_kiosk_common.xml
@@ -2,62 +2,151 @@
 <odoo>
 
 <template id="pos_kiosk.assets" name="pos_kiosk assets">
-    <link rel="stylesheet" href="/point_of_sale/static/src/css/pos.css" id="pos-stylesheet"/>
+    <link
+            rel="stylesheet"
+            href="/point_of_sale/static/src/css/pos.css"
+            id="pos-stylesheet"
+        />
     <link rel="stylesheet" href="/web/static/lib/fontawesome/css/font-awesome.css" />
     <link rel="stylesheet" href="/point_of_sale/static/src/css/pos_receipts.css" />
-    <link rel="stylesheet" href="/l10n_br_pos_cfe/static/src/css/pos.css" />
-    <link rel="stylesheet" type="text/less" href="/web/static/src/scss/fontawesome_overridden.scss"/>
+    <link
+            rel="stylesheet"
+            type="text/less"
+            href="/web/static/src/scss/fontawesome_overridden.scss"
+        />
 
     <script type="text/javascript" src="/point_of_sale/static/lib/html2canvas.js" />
-    <script type="text/javascript" src="/point_of_sale/static/lib/backbone/backbone.js"/>
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/lib/backbone/backbone.js"
+        />
     <script type="text/javascript" src="/point_of_sale/static/lib/waitfont.js" />
     <script type="text/javascript" src="/point_of_sale/static/lib/sha1.js" />
     <script type="text/javascript" src="/point_of_sale/static/src/js/utils.js" />
-    <script type="text/javascript" src="/point_of_sale/static/src/js/ClassRegistry.js"/>
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/ClassRegistry.js"
+        />
     <script type="text/javascript" src="/point_of_sale/static/src/js/PosComponent.js" />
     <script type="text/javascript" src="/point_of_sale/static/src/js/PosContext.js" />
-    <script type="text/javascript" src="/point_of_sale/static/src/js/ComponentRegistry.js"/>
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/ComponentRegistry.js"
+        />
     <script type="text/javascript" src="/point_of_sale/static/src/js/Registries.js" />
     <script type="text/javascript" src="/point_of_sale/static/src/js/db.js" />
     <script type="text/javascript" src="/point_of_sale/static/src/js/models.js" />
     <script type="text/javascript" src="/point_of_sale/static/src/js/keyboard.js" />
-    <script type="text/javascript" src="/point_of_sale/static/src/js/barcode_reader.js"/>
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/barcode_reader.js"
+        />
     <script type="text/javascript" src="/point_of_sale/static/src/js/printers.js" />
     <script type="text/javascript" src="/point_of_sale/static/src/js/Gui.js" />
-    <script type="text/javascript" src="/point_of_sale/static/src/js/PopupControllerMixin.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/ControlButtonsMixin.js"/>
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/PopupControllerMixin.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/ControlButtonsMixin.js"
+        />
     <script type="text/javascript" src="/point_of_sale/static/src/js/devices.js" />
     <script type="text/javascript" src="/point_of_sale/static/src/js/payment.js" />
     <script type="text/javascript" src="/point_of_sale/static/src/js/custom_hooks.js" />
-    <script type="text/javascript" src="/point_of_sale/static/src/js/Misc/Draggable.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/Misc/SearchBar.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/ChromeWidgets/DebugWidget.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/Popups/AbstractAwaitablePopup.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/Misc/NumberBuffer.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/Screens/ReceiptScreen/OrderReceipt.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/Screens/ReceiptScreen/WrappedProductNameLines.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/ChromeWidgets/ProxyStatus.js"/>
-    <script type="text/javascript" src="/point_of_sale/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js"/>
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/Misc/Draggable.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/Misc/SearchBar.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/ChromeWidgets/DebugWidget.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/Popups/AbstractAwaitablePopup.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/Misc/NumberBuffer.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/Screens/ReceiptScreen/OrderReceipt.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/Screens/ReceiptScreen/WrappedProductNameLines.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/ChromeWidgets/ProxyStatus.js"
+        />
+    <script
+            type="text/javascript"
+            src="/point_of_sale/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js"
+        />
 
     <link rel="stylesheet" href="/pos_kiosk/static/src/css/style.css" />
 
     <script type="text/javascript" src="/pos_kiosk/static/src/js/ChromeKiosk.js" />
 
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Screens/WelcomeScreen.js"/>
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Screens/WelcomeScreen.js"
+        />
 
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductScreen.js"/>
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductCategory.js"/>
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductScreen.js"
+        />
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Screens/ProductScreen/KioskProductCategory.js"
+        />
 
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Components/KioskHeader.js"/>
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Components/KioskHeader.js"
+        />
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Components/KioskCartFooter.js"
+        />
 
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Screens/KioskPaymentScreen.js"/>
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Screens/KioskReceiptScreen.js"/>
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Screens/KioskClientScreen.js"/>
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Modals/InsertProductModal.js"/>
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Screens/KioskPaymentScreen.js"
+        />
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Screens/KioskReceiptScreen.js"
+        />
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Screens/KioskClientScreen.js"
+        />
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Modals/InsertProductModal.js"
+        />
     <script type="text/javascript" src="/pos_kiosk/static/src/js/Modals/CartModal.js" />
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Modals/InsertProductConfigurableModal.js"/>
-    <script type="text/javascript" src="/pos_kiosk/static/src/js/Modals/ErrorModal.js"/>
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Modals/InsertProductConfigurableModal.js"
+        />
+    <script
+            type="text/javascript"
+            src="/pos_kiosk/static/src/js/Modals/ErrorModal.js"
+        />
 </template>
 
 <template
diff --git a/pos_kiosk/views/pos_config_view.xml b/pos_kiosk/views/pos_config_view.xml
index 4e46fe2577..da260118a3 100644
--- a/pos_kiosk/views/pos_config_view.xml
+++ b/pos_kiosk/views/pos_config_view.xml
@@ -21,18 +21,35 @@
                         </div>
                     </div>
 
-                    <div attrs="{'invisible': [('is_kiosk_mode', '=', False)]}">                    
-                        <div class="col-12 col-lg-6 o_setting_box" style="width: 200px; margin: 5%"> 
-                            <field name='banner_image' string="Banner Image" widget="image" />
+                    <div attrs="{'invisible': [('is_kiosk_mode', '=', False)]}">
+                        <div
+                            class="col-12 col-lg-6 o_setting_box"
+                            style="width: 200px; margin: 5%"
+                        >
+                            <field
+                                name='banner_image'
+                                string="Banner Image"
+                                widget="image"
+                            />
                             <label for="banner_image" />
                         </div>
 
-                        <div class="col-12 col-lg-6 o_setting_box" style="width: 200px; margin: 5%">
-                            <field name='top_banner_image' string="Top Banner Image" widget="image" />
+                        <div
+                            class="col-12 col-lg-6 o_setting_box"
+                            style="width: 200px; margin: 5%"
+                        >
+                            <field
+                                name='top_banner_image'
+                                string="Top Banner Image"
+                                widget="image"
+                            />
                             <label for="top_banner_image" />
                         </div>
 
-                        <div class="col-12 col-lg-6 o_setting_box" style="width: 200px; margin: 5%">
+                        <div
+                            class="col-12 col-lg-6 o_setting_box"
+                            style="width: 200px; margin: 5%"
+                        >
                             <field name='logo_image' widget="image" />
                             <label for="logo_image" />
                         </div>
diff --git a/pos_kiosk_restaurant/README.rst b/pos_kiosk_restaurant/README.rst
index 3ea6e6b607..da2449555f 100644
--- a/pos_kiosk_restaurant/README.rst
+++ b/pos_kiosk_restaurant/README.rst
@@ -7,7 +7,7 @@ Point of Sale - Kiosk Mode (Restaurant)
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! source digest: sha256:c38561fff866492e70899eaf81ff92cd041405130473be88c62b3736af122534
+   !! source digest: sha256:3231e7a4ae7ca5a79b75ef7679e2f34f1bdddbc6328b2727d494a1838d5b33c8
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Alpha-red.png
@@ -88,7 +88,7 @@ Credits
 Authors
 ~~~~~~~
 
-* 
+* KMEE
 
 Contributors
 ~~~~~~~~~~~~
diff --git a/pos_kiosk_restaurant/__manifest__.py b/pos_kiosk_restaurant/__manifest__.py
index fdfa57470c..b2f0a38422 100644
--- a/pos_kiosk_restaurant/__manifest__.py
+++ b/pos_kiosk_restaurant/__manifest__.py
@@ -2,8 +2,8 @@
     "name": "Point of Sale - Kiosk Mode (Restaurant)",
     "version": "14.0.1.0.0",
     "category": "Sales/Point of Sale",
-    "summary": "Kiosk mode extension for the Point of Sale in Restaurant version",
-    "description": """This module allows you to use the Point of Sale in Kiosk mode with Restaurant.""",
+    "summary": "Kiosk mode extension for the POS in Restaurant version",
+    "author": "KMEE, Odoo Community Association (OCA)",
     "depends": ["pos_kiosk", "pos_restaurant"],
     "development_status": "Alpha",
     "website": "https://github.com/OCA/pos",
diff --git a/pos_kiosk_restaurant/static/description/index.html b/pos_kiosk_restaurant/static/description/index.html
index 72cfd65efc..0fe93d4fea 100644
--- a/pos_kiosk_restaurant/static/description/index.html
+++ b/pos_kiosk_restaurant/static/description/index.html
@@ -1,20 +1,20 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="Docutils: http://docutils.sourceforge.net/" />
+<meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
 <title>Point of Sale - Kiosk Mode (Restaurant)</title>
 <style type="text/css">
 
 /*
 :Author: David Goodger (goodger@python.org)
-:Id: $Id: html4css1.css 7952 2016-07-26 18:15:59Z milde $
+:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
 :Copyright: This stylesheet has been placed in the public domain.
 
 Default cascading style sheet for the HTML output of Docutils.
 
-See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
+See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
 customize this style sheet.
 */
 
@@ -367,9 +367,9 @@ <h1 class="title">Point of Sale - Kiosk Mode (Restaurant)</h1>
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! source digest: sha256:c38561fff866492e70899eaf81ff92cd041405130473be88c62b3736af122534
+!! source digest: sha256:3231e7a4ae7ca5a79b75ef7679e2f34f1bdddbc6328b2727d494a1838d5b33c8
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Alpha" src="https://img.shields.io/badge/maturity-Alpha-red.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/pos/tree/14.0/pos_kiosk_restaurant"><img alt="OCA/pos" src="https://img.shields.io/badge/github-OCA%2Fpos-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/pos-14-0/pos-14-0-pos_kiosk_restaurant"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runboat.odoo-community.org/builds?repo=OCA/pos&amp;target_branch=14.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Alpha" src="https://img.shields.io/badge/maturity-Alpha-red.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/pos/tree/14.0/pos_kiosk_restaurant"><img alt="OCA/pos" src="https://img.shields.io/badge/github-OCA%2Fpos-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/pos-14-0/pos-14-0-pos_kiosk_restaurant"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/pos&amp;target_branch=14.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>[ This file must be max 2-3 paragraphs, and is required. ]</p>
 <p>This module extends the functionality of … to support …
 and to allow you to …</p>
@@ -382,19 +382,19 @@ <h1 class="title">Point of Sale - Kiosk Mode (Restaurant)</h1>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
-<li><a class="reference internal" href="#configuration" id="id1">Configuration</a></li>
-<li><a class="reference internal" href="#usage" id="id2">Usage</a></li>
-<li><a class="reference internal" href="#bug-tracker" id="id3">Bug Tracker</a></li>
-<li><a class="reference internal" href="#credits" id="id4">Credits</a><ul>
-<li><a class="reference internal" href="#authors" id="id5">Authors</a></li>
-<li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li>
-<li><a class="reference internal" href="#maintainers" id="id7">Maintainers</a></li>
+<li><a class="reference internal" href="#configuration" id="toc-entry-1">Configuration</a></li>
+<li><a class="reference internal" href="#usage" id="toc-entry-2">Usage</a></li>
+<li><a class="reference internal" href="#bug-tracker" id="toc-entry-3">Bug Tracker</a></li>
+<li><a class="reference internal" href="#credits" id="toc-entry-4">Credits</a><ul>
+<li><a class="reference internal" href="#authors" id="toc-entry-5">Authors</a></li>
+<li><a class="reference internal" href="#contributors" id="toc-entry-6">Contributors</a></li>
+<li><a class="reference internal" href="#maintainers" id="toc-entry-7">Maintainers</a></li>
 </ul>
 </li>
 </ul>
 </div>
 <div class="section" id="configuration">
-<h1><a class="toc-backref" href="#id1">Configuration</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-1">Configuration</a></h1>
 <dl class="docutils">
 <dt>[ This file is optional, it should explain how to configure</dt>
 <dd>the module before using it; it is aimed at advanced users. ]</dd>
@@ -408,7 +408,7 @@ <h1><a class="toc-backref" href="#id1">Configuration</a></h1>
 </div>
 </div>
 <div class="section" id="usage">
-<h1><a class="toc-backref" href="#id2">Usage</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-2">Usage</a></h1>
 <dl class="docutils">
 <dt>[ This file must be present and contains the usage instructions</dt>
 <dd>for end-users. As all other rst files included in the README,
@@ -424,7 +424,7 @@ <h1><a class="toc-backref" href="#id2">Usage</a></h1>
 </ol>
 </div>
 <div class="section" id="bug-tracker">
-<h1><a class="toc-backref" href="#id3">Bug Tracker</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-3">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/pos/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
@@ -432,21 +432,21 @@ <h1><a class="toc-backref" href="#id3">Bug Tracker</a></h1>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h1><a class="toc-backref" href="#id4">Credits</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-4">Credits</a></h1>
 <div class="section" id="authors">
-<h2><a class="toc-backref" href="#id5">Authors</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-5">Authors</a></h2>
 <ul class="simple">
-<li></li>
+<li>KMEE</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h2><a class="toc-backref" href="#id6">Contributors</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-6">Contributors</a></h2>
 <ul class="simple">
 <li>Ygor Carvalho &lt;<a class="reference external" href="mailto:ygor.carvalho&#64;kmee.com.br">ygor.carvalho&#64;kmee.com.br</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h2><a class="toc-backref" href="#id7">Maintainers</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-7">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
diff --git a/pos_kiosk_restaurant/static/src/js/Screens/KioskClientScreen.js b/pos_kiosk_restaurant/static/src/js/Screens/KioskClientScreen.js
index d98993fd03..39bd9d980a 100644
--- a/pos_kiosk_restaurant/static/src/js/Screens/KioskClientScreen.js
+++ b/pos_kiosk_restaurant/static/src/js/Screens/KioskClientScreen.js
@@ -1,17 +1,18 @@
 odoo.define("pos_kiosk_restaurant.KioskClientScreen", function (require) {
-  "use strict";
+    "use strict";
 
-  const KioskClientScreen = require("pos_kiosk.KioskClientScreen");
-  const Registries = require('point_of_sale.Registries');
+    const KioskClientScreen = require("pos_kiosk.KioskClientScreen");
+    const Registries = require("point_of_sale.Registries");
 
-  const KioskClientScreenRestaurant = KioskClientScreen => class extends KioskClientScreen {
-    async finalizeOrder() {
-      // await this.order.printChanges();
-      await super.finalizeOrder();
-    }
-  }
+    const KioskClientScreenRestaurant = (KioskClientScreen) =>
+        class extends KioskClientScreen {
+            async finalizeOrder() {
+                // Await this.order.printChanges();
+                await super.finalizeOrder();
+            }
+        };
 
-  Registries.Component.extend(KioskClientScreen, KioskClientScreenRestaurant);
+    Registries.Component.extend(KioskClientScreen, KioskClientScreenRestaurant);
 
-  return KioskClientScreenRestaurant;
-})
\ No newline at end of file
+    return KioskClientScreenRestaurant;
+});
diff --git a/pos_kiosk_restaurant/views/pos_kiosk_restaurant_templates.xml b/pos_kiosk_restaurant/views/pos_kiosk_restaurant_templates.xml
index 663289d697..d22b846bed 100644
--- a/pos_kiosk_restaurant/views/pos_kiosk_restaurant_templates.xml
+++ b/pos_kiosk_restaurant/views/pos_kiosk_restaurant_templates.xml
@@ -1,13 +1,25 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <odoo>
 
     <template id="assets" inherit_id="pos_kiosk.assets">
         <xpath expr="." position="inside">
-            <link rel="stylesheet" href="/pos_restaurant/static/src/css/restaurant.css" />
+            <link
+                rel="stylesheet"
+                href="/pos_restaurant/static/src/css/restaurant.css"
+            />
 
-            <script type="text/javascript" src="/pos_restaurant/static/src/js/notes.js" />
-            <script type="text/javascript" src="/pos_restaurant/static/src/js/multiprint.js" />
-            <script type="text/javascript" src="/pos_kiosk_restaurant/static/src/js/Screens/KioskClientScreen.js" />
+            <script
+                type="text/javascript"
+                src="/pos_restaurant/static/src/js/notes.js"
+            />
+            <script
+                type="text/javascript"
+                src="/pos_restaurant/static/src/js/multiprint.js"
+            />
+            <script
+                type="text/javascript"
+                src="/pos_kiosk_restaurant/static/src/js/Screens/KioskClientScreen.js"
+            />
         </xpath>
     </template>
 
