diff --git a/addons/mcs_appointment_booking/static/src/scss/appointment_booking.scss b/addons/mcs_appointment_booking/static/src/scss/appointment_booking.scss
index 8afb207..f02d25d 100644
--- a/addons/mcs_appointment_booking/static/src/scss/appointment_booking.scss
+++ b/addons/mcs_appointment_booking/static/src/scss/appointment_booking.scss
@@ -9,7 +9,7 @@
     --mcs-appt-teal: #0f766e;
 
     min-height: calc(100vh - 76px);
-    padding: 42px 18px 72px;
+    padding: 28px 18px 56px;
     background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
     color: var(--mcs-appt-ink);
     font-family: Inter, Manrope, "Segoe UI", sans-serif;
@@ -22,7 +22,7 @@
 
 .mcs-appt-shell {
     display: grid;
-    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
     gap: 0;
     max-width: 1240px;
     margin: 0 auto;
@@ -34,13 +34,13 @@
 }
 
 .mcs-appt-info {
-    padding: 30px;
+    padding: 26px;
     background: var(--mcs-appt-navy);
     color: #ffffff;
 
     h1 {
-        margin: 18px 0 18px;
-        font-size: clamp(2rem, 4vw, 3rem);
+        margin: 14px 0 16px;
+        font-size: clamp(1.9rem, 3vw, 2.55rem);
         line-height: 1.04;
         font-weight: 820;
     }
@@ -48,7 +48,7 @@
 
 .mcs-appt-back {
     display: inline-flex;
-    margin-bottom: 28px;
+    margin-bottom: 22px;
     color: rgba(255, 255, 255, 0.82);
     font-weight: 800;
     text-decoration: none;
@@ -79,8 +79,8 @@
 }
 
 .mcs-appt-note {
-    margin-top: 28px;
-    padding: 16px;
+    margin-top: 22px;
+    padding: 14px;
     border: 1px solid rgba(255, 255, 255, 0.14);
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.07);
@@ -89,7 +89,7 @@
 
 .mcs-appt-booking {
     min-width: 0;
-    padding: 28px;
+    padding: 24px;
 }
 
 .mcs-appt-section-head {
@@ -97,7 +97,7 @@
     align-items: end;
     justify-content: space-between;
     gap: 16px;
-    margin-bottom: 14px;
+    margin-bottom: 12px;
 
     span {
         color: var(--mcs-appt-blue);
@@ -109,7 +109,7 @@
 
     h2 {
         margin: 0;
-        font-size: 1.24rem;
+        font-size: 1.12rem;
         line-height: 1.25;
         font-weight: 840;
     }
@@ -122,15 +122,14 @@
 .mcs-appt-date-strip {
     display: grid;
     grid-template-columns: repeat(7, minmax(0, 1fr));
-    gap: 8px;
-    max-width: 560px;
+    gap: 6px;
 }
 
 .mcs-appt-date {
     display: grid;
-    min-height: 66px;
+    min-height: 54px;
     place-items: center;
-    padding: 8px 6px;
+    padding: 6px;
     border: 1px solid var(--mcs-appt-line);
     border-radius: 10px;
     background: #ffffff;
@@ -147,12 +146,13 @@
 
     span {
         color: var(--mcs-appt-ink);
-        font-size: 1.18rem;
+        font-size: 1rem;
         line-height: 1;
         font-weight: 850;
     }
 
     small {
+        font-size: 0.72rem;
         font-weight: 800;
     }
 
@@ -184,12 +184,13 @@
 
 .mcs-appt-workspace {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
-    gap: 20px;
-    margin-top: 28px;
+    grid-template-columns: minmax(300px, 480px) minmax(340px, 1fr);
+    gap: 22px;
+    margin-top: 0;
     align-items: start;
 }
 
+.mcs-appt-calendar,
 .mcs-appt-times,
 .mcs-appt-details {
     min-width: 0;
@@ -203,30 +204,32 @@
 
 .mcs-appt-slot-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-    gap: 9px;
-    max-height: 540px;
+    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
+    gap: 8px;
+    max-height: 284px;
     overflow-y: auto;
     padding-right: 4px;
 }
 
 .mcs-appt-time {
     display: grid;
-    gap: 2px;
-    min-height: 66px;
+    gap: 1px;
+    min-height: 54px;
     border: 1px solid var(--mcs-appt-line);
     border-radius: 10px;
-    padding: 10px;
+    padding: 8px 10px;
     background: #ffffff;
     color: var(--mcs-appt-ink);
     text-align: left;
     transition: border-color 160ms ease-out, background 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
 
     span {
+        font-size: 0.95rem;
         font-weight: 850;
     }
 
     small {
+        font-size: 0.78rem;
         color: var(--mcs-appt-muted);
         font-weight: 800;
     }
@@ -244,13 +247,13 @@
 
 .mcs-appt-form {
     display: grid;
-    gap: 16px;
+    gap: 14px;
 }
 
 .mcs-appt-form-grid {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 14px;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
 
     label {
         display: grid;
@@ -262,7 +265,7 @@
     input,
     textarea {
         width: 100%;
-        min-height: 46px;
+        min-height: 42px;
         border: 1px solid var(--mcs-appt-line);
         border-radius: 10px;
         padding: 11px 12px;
@@ -271,13 +274,13 @@
     }
 
     textarea {
-        min-height: 104px;
+        min-height: 84px;
         resize: vertical;
     }
 }
 
 .mcs-appt-form-wide {
-    grid-column: 1 / -1;
+    grid-column: span 2;
 }
 
 .mcs-appt-form button {
@@ -298,9 +301,11 @@
 }
 
 .mcs-appt-details {
-    position: sticky;
-    top: 96px;
-    padding: 18px;
+    display: grid;
+    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+    gap: 18px;
+    margin-top: 22px;
+    padding: 16px;
     border: 1px solid #cbd8f7;
     border-radius: 14px;
     background: #f8fbff;
@@ -309,8 +314,8 @@
 .mcs-appt-selected-slot {
     display: grid;
     gap: 4px;
-    margin-bottom: 16px;
-    padding: 12px;
+    margin-bottom: 0;
+    padding: 11px;
     border: 1px solid var(--mcs-appt-line);
     border-radius: 10px;
     background: #ffffff;
@@ -343,7 +348,7 @@
     }
 
     .mcs-appt-details {
-        position: static;
+        grid-template-columns: 1fr;
     }
 }
 
@@ -352,12 +357,14 @@
         padding: 18px 12px 42px;
     }
 
-    .mcs-appt-form-grid {
+    .mcs-appt-form-grid,
+    .mcs-appt-workspace,
+    .mcs-appt-details {
         grid-template-columns: 1fr;
     }
 
     .mcs-appt-date-strip {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
+        grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
     .mcs-appt-section-head {
diff --git a/addons/mcs_appointment_booking/views/appointment_templates.xml b/addons/mcs_appointment_booking/views/appointment_templates.xml
index 556140e..b65f5a6 100644
--- a/addons/mcs_appointment_booking/views/appointment_templates.xml
+++ b/addons/mcs_appointment_booking/views/appointment_templates.xml
@@ -51,22 +51,24 @@
                     </aside>
 
                     <main class="mcs-appt-booking">
-                        <header class="mcs-appt-section-head">
-                            <span>Step 1</span>
-                            <h2>Select a date</h2>
-                        </header>
-                        <div class="mcs-appt-date-strip">
-                            <t t-foreach="day_options" t-as="day">
-                                <a t-attf-class="mcs-appt-date #{'active' if day == selected_day else ''}"
-                                   t-att-href="'/appointments/%s?date=%s' % (appointment_type.id, day.isoformat())">
-                                    <strong t-esc="day.strftime('%a')"/>
-                                    <span t-esc="day.strftime('%d')"/>
-                                    <small t-esc="day.strftime('%b')"/>
-                                </a>
-                            </t>
-                        </div>
-
                         <section class="mcs-appt-workspace">
+                            <div class="mcs-appt-calendar">
+                                <header class="mcs-appt-section-head">
+                                    <span>Step 1</span>
+                                    <h2>Select a date</h2>
+                                </header>
+                                <div class="mcs-appt-date-strip">
+                                    <t t-foreach="day_options" t-as="day">
+                                        <a t-attf-class="mcs-appt-date #{'active' if day == selected_day else ''}"
+                                           t-att-href="'/appointments/%s?date=%s' % (appointment_type.id, day.isoformat())">
+                                            <strong t-esc="day.strftime('%a')"/>
+                                            <span t-esc="day.strftime('%d')"/>
+                                            <small t-esc="day.strftime('%b')"/>
+                                        </a>
+                                    </t>
+                                </div>
+                            </div>
+
                             <div class="mcs-appt-times">
                                 <header class="mcs-appt-section-head">
                                     <span>Step 2</span>
@@ -91,8 +93,10 @@
                                     </t>
                                 </div>
                             </div>
+                        </section>
 
-                            <aside class="mcs-appt-details">
+                        <aside class="mcs-appt-details">
+                            <div>
                                 <header class="mcs-appt-section-head">
                                     <span>Step 3</span>
                                     <h2>Your details</h2>
@@ -101,24 +105,24 @@
                                     <small>Selected time</small>
                                     <strong class="js-mcs-selected-slot" t-esc="slots[0]['label']"/>
                                 </div>
-                                <form t-if="slots" t-att-action="'/appointments/%s/book' % appointment_type.id" method="post" class="mcs-appt-form">
-                                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                                    <input type="hidden" name="start" class="js-mcs-start" t-att-value="slots[0]['start']"/>
-                                    <input type="hidden" name="stop" class="js-mcs-stop" t-att-value="slots[0]['stop']"/>
-                                    <div class="mcs-appt-form-grid">
-                                        <label>Name<input name="customer_name" required="required"/></label>
-                                        <label>Email<input name="customer_email" type="email" required="required"/></label>
-                                        <label>Phone<input name="customer_phone"/></label>
-                                        <label class="mcs-appt-form-wide">Notes<textarea name="notes" rows="3"/></label>
-                                    </div>
-                                    <button type="submit">Confirm Appointment</button>
-                                </form>
                                 <div t-if="not slots" class="mcs-appt-selected-slot">
                                     <small>Selected time</small>
                                     <strong>Choose another date</strong>
                                 </div>
-                            </aside>
-                        </section>
+                            </div>
+                            <form t-if="slots" t-att-action="'/appointments/%s/book' % appointment_type.id" method="post" class="mcs-appt-form">
+                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                                <input type="hidden" name="start" class="js-mcs-start" t-att-value="slots[0]['start']"/>
+                                <input type="hidden" name="stop" class="js-mcs-stop" t-att-value="slots[0]['stop']"/>
+                                <div class="mcs-appt-form-grid">
+                                    <label>Name<input name="customer_name" required="required"/></label>
+                                    <label>Email<input name="customer_email" type="email" required="required"/></label>
+                                    <label>Phone<input name="customer_phone"/></label>
+                                    <label class="mcs-appt-form-wide">Notes<textarea name="notes" rows="3"/></label>
+                                </div>
+                                <button type="submit">Confirm Appointment</button>
+                            </form>
+                        </aside>
                     </main>
                 </section>
             </div>