diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 189e604da8f..6a6fda764e9 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -2193,7 +2193,6 @@ td {
 
 .splitbill-screen .order-info {
     text-align: center;
-    margin-bottom:20px;
     padding: 20px 0px;
     font-size: 64px;
     color: #43996E;
@@ -2214,6 +2213,8 @@ td {
     text-align: left;
     max-width: 500px;
     -webkit-transform: translate3d(0,0,0);
+    height: max-content;
+    width: 100%;
 }
 .splitbill-screen .order .orderline.selected{
     background: rgb(110,200,155);
diff --git a/addons/pos_restaurant/static/src/css/restaurant.css b/addons/pos_restaurant/static/src/css/restaurant.css
index 6dccbc2de50..c7cb17e3643 100644
--- a/addons/pos_restaurant/static/src/css/restaurant.css
+++ b/addons/pos_restaurant/static/src/css/restaurant.css
@@ -315,3 +315,79 @@
     margin-right: 4px;
 }
 
+/* ------ SPLIT BILL SCREEN ------- */
+
+.splitbill-screen.screen .contents {
+    display: flex;
+    flex-flow: column nowrap;
+    margin: 0px auto;
+    max-width: 1024px;
+    border-left: dashed 1px rgb(215,215,215);
+    border-right: dashed 1px rgb(215,215,215);
+    height: 100%;
+}
+.splitbill-screen.screen .main {
+    display: flex;
+    flex-flow: row nowrap;
+    /* take the remaining vertical space */
+    flex: 1;
+    /* do not capture overflow in this element */
+    overflow: hidden;
+}
+.splitbill-screen.screen .main .lines {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    /* show scrollbar inside this element if its content overflows */
+    overflow-y: auto;
+}
+.splitbill-screen.screen .main .controls {
+    display: flex;
+    flex-flow: column nowrap;
+}
+.splitbill-screen.screen .pay-button {
+    margin: 16px;
+}
+.splitbill-screen.screen .pay-button .button {
+    background: #e2e2e2;
+    line-height: 74px;
+    font-size: 16px;
+    border: solid 1px rgb(202, 202, 202);
+    border-top-width: 0px;
+    cursor: pointer;
+    width: 100%;
+    text-align: center;
+}
+.splitbill-screen.screen .pay-button .button:first-child {
+    border-top-width: 1px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+.splitbill-screen.screen .pay-button .button:last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+.splitbill-screen.screen .pay-button .button:active {
+    background: black;
+    border-color: black;
+    color: white;
+}
+
+.splitbill-screen.screen .main .lines {
+    border-right: dashed 1px rgb(215,215,215);
+}
+
+.splitbill-screen.screen .main .controls {
+    flex: 1;
+}
+
+/* ------ NARROWER SCREEN ------ */
+@media screen and (max-width: 768px) {
+    .splitbill-screen.screen .main {
+        flex-flow: column nowrap;
+    }
+    .splitbill-screen.screen .main .controls {
+        border-top: dashed 1px rgb(215,215,215);
+        flex: none;
+    }
+}
diff --git a/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
index f09ecdcdc1d..f853d8aafca 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
@@ -3,35 +3,39 @@
 
     <t t-name="SplitBillScreen" owl="1">
         <div class="splitbill-screen screen">
-            <div class="screen-content">
+            <div class="contents">
                 <div class="top-content">
                     <span class="button back" t-on-click="back">
                         <i class="fa fa-angle-double-left"></i>
                         <span> </span>
                         <span>Back</span>
                     </span>
-                    <h1>Bill Splitting</h1>
-                </div>
-                <div class="left-content touch-scrollable scrollable-y">
-                    <div class="order">
-                        <ul class="orderlines">
-                            <t t-foreach="orderlines" t-as="line" t-key="line.cid">
-                                <SplitOrderline line="line" split="splitlines[line.id]" />
-                            </t>
-                        </ul>
+                    <div class="top-content-center">
+                        <h1>Bill Splitting</h1>
                     </div>
                 </div>
-                <div class="right-content touch-scrollable scrollable-y">
-                    <div class="order-info">
-                        <span class="subtotal">
-                            <t t-esc="env.pos.format_currency(newOrder.get_subtotal())" />
-                        </span>
+                <div class="main">
+                    <div class="lines">
+                        <div class="order">
+                            <ul class="orderlines">
+                                <t t-foreach="orderlines" t-as="line" t-key="line.cid">
+                                    <SplitOrderline line="line" split="splitlines[line.id]" />
+                                </t>
+                            </ul>
+                        </div>
                     </div>
-                    <div class="paymentmethods">
-                        <div class="button payment" t-on-click="proceed">
-                            <i class="fa fa-chevron-right" />
-                            <span> </span>
-                            <span>Payment</span>
+                    <div class="controls">
+                        <div class="order-info">
+                            <span class="subtotal">
+                                <t t-esc="env.pos.format_currency(newOrder.get_subtotal())" />
+                            </span>
+                        </div>
+                        <div class="pay-button">
+                            <div class="button" t-on-click="proceed">
+                                <i class="fa fa-chevron-right" />
+                                <span> </span>
+                                <span>Payment</span>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/addons/pos_restaurant/static/tests/tours/helpers/SplitBillScreenTourMethods.js b/addons/pos_restaurant/static/tests/tours/helpers/SplitBillScreenTourMethods.js
index 77b7e392174..d1c802bf8d4 100644
--- a/addons/pos_restaurant/static/tests/tours/helpers/SplitBillScreenTourMethods.js
+++ b/addons/pos_restaurant/static/tests/tours/helpers/SplitBillScreenTourMethods.js
@@ -28,7 +28,7 @@ odoo.define('pos_restaurant.tour.SplitBillScreenTourMethods', function (require)
             return [
                 {
                     content: 'click pay button',
-                    trigger: `.splitbill-screen .paymentmethods .payment`
+                    trigger: `.splitbill-screen .pay-button .button`
                 }
             ]
         }