diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 2a0281f13..33031d36f 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -220,6 +220,7 @@
     "back": "Zurück",
     "backToTop": "Nach oben scrollen",
     "bookEvent": "Buchen",
+    "bookAppointment": "Termin buchen",
     "booked": "Gebucht",
     "bookingConfirmation": "Bestätigung für Buchungen",
     "bookingDetails": "Buchungsdetails",
@@ -255,14 +256,12 @@
     "confirm": "Bestätigen",
     "confirmed": "Bestätigt",
     "confirmBooking": "Buchung bestätigen",
-    "confirmSelection": "Auswahl bestätigen",
     "connect": "Verbinden",
     "connectCalendar": "Kalender verbinden",
     "connectGoogleCalendar": "Google Kalender verbinden",
     "connectedAs": "Verbunden als {name}",
     "contact": "Kontakt",
     "continue": "Weiter",
-    "continueAsGuest": "Weiter als Gast",
     "contributeToThisSite": "Dieser Seite beitragen",
     "cookies": "Cookies",
     "copied": "Kopiert",
@@ -360,6 +359,7 @@
     "next": "Weiter",
     "nextWeek": "Nächste Woche",
     "no": "Nein",
+    "noneSelected": "Keine Auswahl",
     "earlier": "Früher",
     "notConnected": "Nicht verbunden",
     "notProvided": "Keine Angabe",
@@ -370,6 +370,7 @@
     "off": "Aus",
     "on": "An",
     "online": "Online",
+    "onlineMeeting": "Online-Meeting",
     "open": "Offen",
     "openMenu": "Menü öffnen",
     "openMyPage": "Meinen Link öffnen",
@@ -408,7 +409,7 @@
     "searchAppointments": "Termine durchsuchen",
     "searchForCalendars": "Nach Kalendern suchen",
     "secondaryTimeZone": "Sekundäre Zeitzone",
-    "selectATimeFromTheCalendar": "Zeit aus dem Kalender wählen",
+    "selectATimeFromTheCalendar": "Wähle einen freien Zeitpunkt aus dem Kalender",
     "selectCalendar": "Kalender auswählen",
     "selectDays": "Wochentage auswählen",
     "selectDateForWeek": "Datum für Woche auswählen",
@@ -481,7 +482,8 @@
     "yes": "Ja",
     "youAreBookable": "Du bist verfügbar",
     "youAreNotBookable": "Du bist nicht verfügbar",
-    "youHaveUnsavedChanges": "Du hast ungespeicherte Änderungen"
+    "youHaveUnsavedChanges": "Du hast ungespeicherte Änderungen",
+    "yourAppointmentWillBeConfirmedAutomatically": "Deine Buchung wird automatisch bestätigt."
   },
   "locales": {
     "de": "Deutsch",
@@ -539,6 +541,7 @@
       "completelyRemoveUser": "Hier wird ein Benutzer vollständig aus Thunderbird Appointment entfernt, einschließlich aller Benutzerdaten. Diese Funktion bitte nicht ausführen, wenn es keine Aufforderung dafür gab.",
       "disableAccountFirst": "Das Konto muss zunächst deaktiviert sein."
     },
+    "bookATimeToMeetWith": "Buche einen Zeitpunkt um dich mit {name} zu treffen",
     "calendarDeletionWarning": "Wenn die Verbindung zu diesem Kalender getrennt wird, werden alle Termine und Zeitpläne aus Thunderbird Appointment entfernt. Es werden keine Termine entfernt, die derzeit in diesem Kalender gespeichert sind.",
     "chooseDateAndTime": "Wähle Tag und Zeit für ein Treffen.",
     "connectZoom": "Du kannst dein Zoom-Konto verbinden, um Besprechungen direkt mit einer Zoom-Einladung zu erstellen.",
@@ -560,7 +563,6 @@
     "login": {
       "continueToFxa": "Bitte die E-Mail-Adresse des Mozilla-Kontos eingeben."
     },
-    "nameIsInvitingYou": "{name} lädt dich ein zu",
     "ownerNeedsToConfirmBooking": "Wenn diese Option aktiviert ist, müssen Buchungen dieses Zeitplans bestätigt oder ablehnt werden. Wenn diese Option deaktiviert ist, werden alle Zeiten automatisch bestätigt.",
     "preferredEmailHelp": "Die E-Mail-Adresse festlegen, die für ausgehende Kommunikation in Kalenderereignissen verwendet werden soll.",
     "recipientsCanScheduleBetween": "Empfänger können einen Termin zwischen {earliest} und {farthest} ab dem aktuellen Zeitpunkt wählen. ",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 76f46c638..df29ad929 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -222,6 +222,7 @@
     "back": "Back",
     "backToTop": "Back to top",
     "bookEvent": "Book",
+    "bookAppointment": "Book appointment",
     "booked": "Booked",
     "bookingConfirmation": "Booking Confirmation",
     "bookingDetails": "Booking Details",
@@ -257,7 +258,6 @@
     "confirm": "Confirm",
     "confirmed": "Confirmed",
     "confirmBooking": "Confirm booking",
-    "confirmSelection": "Confirm selection",
     "connect": "Connect",
     "connecting": "Connecting",
     "connectCalendar": "Connect calendar",
@@ -265,7 +265,6 @@
     "connectedAs": "Connected as {name}",
     "contact": "Contact",
     "continue": "Continue",
-    "continueAsGuest": "Continue as Guest",
     "contributeToThisSite": "Contribute to this site",
     "cookies": "Cookies",
     "copied": "Copied",
@@ -364,6 +363,7 @@
     "next": "Next",
     "nextWeek": "Next week",
     "no": "No",
+    "noneSelected": "None selected",
     "notConnected": "Not connected",
     "notProvided": "Not Provided",
     "notVerified": "Not Verified",
@@ -373,6 +373,7 @@
     "off": "Off",
     "on": "On",
     "online": "Online",
+    "onlineMeeting": "Online meeting",
     "open": "Open",
     "openMenu": "Open menu",
     "openMyPage": "Open my page",
@@ -411,7 +412,7 @@
     "searchAppointments": "Search bookings",
     "searchForCalendars": "Search for calendars",
     "secondaryTimeZone": "Secondary time zone",
-    "selectATimeFromTheCalendar": "Select a time from the calendar",
+    "selectATimeFromTheCalendar": "Select an open time slot from the calendar.",
     "selectCalendar": "Select calendar",
     "selectDays": "Select days",
     "selectDateForWeek": "Select date for week",
@@ -451,7 +452,7 @@
     "timeFormat": "Time Format",
     "timeOfTheEvent": "Time of the event:",
     "timeUpdated": "Time Updated",
-    "timeZone": "Time Zone",
+    "timeZone": "Timezone",
     "title": "Title",
     "to": "to",
     "today": "Today",
@@ -484,7 +485,8 @@
     "yes": "Yes",
     "youAreBookable": "You're bookable",
     "youAreNotBookable": "You're not bookable",
-    "youHaveUnsavedChanges": "You have unsaved changes"
+    "youHaveUnsavedChanges": "You have unsaved changes",
+    "yourAppointmentWillBeConfirmedAutomatically": "Your appointment will be confirmed automatically."
   },
   "locales": {
     "de": "German",
@@ -542,6 +544,7 @@
       "completelyRemoveUser": "This will completely remove a user from Thunderbird Appointment, including all of their user data. Don't do this unless you're told to.",
       "disableAccountFirst": "You must disable the account first."
     },
+    "bookATimeToMeetWith": "Book a time to meet with {name}",
     "calendarDeletionWarning": "Removing this calendar will remove all appointments and schedules from Thunderbird Appointment. Any confirmed events currently stored in your calendar will not be removed.",
     "chooseDateAndTime": "Choose when to meet.",
     "connectZoom": "Connect your Zoom account to generate instant meeting invites for each booking.",
@@ -563,7 +566,6 @@
     "login": {
       "continueToFxa": "Enter your email above to continue to Mozilla Accounts"
     },
-    "nameIsInvitingYou": "{name} is inviting you to",
     "ownerNeedsToConfirmBooking": "When this option is active, you will be required to confirm or decline times booked on your schedule. When this option is deactivated, all times will automatically be confirmed.",
     "preferredEmailHelp": "Set the email you'll use for out-going communication. This will be used in calendar events and emails.",
     "recipientsCanScheduleBetween": "Recipients can schedule a {duration} appointment between {earliest} and {farthest} ahead of time.",
diff --git a/frontend/src/models.ts b/frontend/src/models.ts
index 49e308ae7..dcfe26c5c 100644
--- a/frontend/src/models.ts
+++ b/frontend/src/models.ts
@@ -16,11 +16,6 @@ export type Attendee = {
   timezone: string;
 };
 
-export type GuestUserInfo = {
-  name?: string;
-  email: string;
-}
-
 export type Slot = {
   id: number;
   start: Dayjs|string;
diff --git a/frontend/src/stores/booking-view-store.ts b/frontend/src/stores/booking-view-store.ts
index 92667b854..47fb2b96e 100644
--- a/frontend/src/stores/booking-view-store.ts
+++ b/frontend/src/stores/booking-view-store.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { ref, inject } from 'vue';
 import { BookingCalendarView } from '@/definitions';
-import { Appointment, Attendee, Slot, GuestUserInfo } from '@/models';
+import { Appointment, Attendee, Slot } from '@/models';
 import { dayjsKey } from '@/keys';
 
 /**
@@ -19,8 +19,6 @@ export const useBookingViewStore = defineStore('bookingView', () => {
   const selectedEvent = ref<Appointment & Slot>(null); // The selected slot also needs some data from its parent
   const appointment = ref<Appointment>(null);
   const attendee = ref<Attendee>(null); // Attendee can either be a guest or an actual user
-  const guestUserInfo = ref<GuestUserInfo>({ name: '', email: '' }); // Used in the SlotSelectionUserInfo form
-  const guestUserInfoValid = ref<boolean>(false); // Used in the SlotSelectionUserInfo form
 
   /**
    * Restore default state, set date to today and remove other data
@@ -31,7 +29,6 @@ export const useBookingViewStore = defineStore('bookingView', () => {
     selectedEvent.value = null;
     appointment.value = null;
     attendee.value = null;
-    guestUserInfo.value = { name: '', email: '' };
   };
 
   return {
@@ -42,8 +39,6 @@ export const useBookingViewStore = defineStore('bookingView', () => {
     selectedEvent,
     appointment,
     attendee,
-    guestUserInfo,
-    guestUserInfoValid,
     // Funcs
     $reset,
   };
diff --git a/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue b/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue
index 2a4596dba..3135d99a5 100644
--- a/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue
+++ b/frontend/src/views/BookerView/components/BookingViewSlotSelection.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { inject, computed } from 'vue';
 import { storeToRefs } from 'pinia';
+import { Dayjs } from 'dayjs';
+import { useI18n } from 'vue-i18n';
+import { PhGlobe } from '@phosphor-icons/vue';
 
 import { useBookingViewStore } from '@/stores/booking-view-store';
 import { useCalendarStore } from '@/stores/calendar-store';
@@ -10,8 +13,9 @@ import { dayjsKey } from '@/keys';
 import WeekPicker from '@/views/DashboardView/components/WeekPicker.vue';
 import WeekCalendar from '@/views/DashboardView/components/WeekCalendar.vue';
 import SlotSelectionAside from './SlotSelectionAside.vue';
-import { Dayjs } from 'dayjs';
+import SlotSelectionHeader from './SlotSelectionHeader.vue';
 
+const { t } = useI18n();
 const calendarStore = useCalendarStore();
 const { appointment, activeDate, selectedEvent } = storeToRefs(useBookingViewStore());
 const dj = inject(dayjsKey);
@@ -22,6 +26,8 @@ const activeDateRange = computed(() => ({
   end: activeDate.value.endOf('week').format('YYYY-MM-DD'),
 }));
 
+const timezone = computed(() => dj.tz.guess());
+
 /**
  * Select a specific time slot
  * @param day string
@@ -53,21 +59,33 @@ async function onDateChange(dateObj: TimeFormatted) {
 </script>
 
 <template>
-  <div v-if="appointment" class="booker-view-container">
-    <div class="calendar-container">
+  <template v-if="appointment">
+    <slot-selection-header />
+
+    <div class="week-picker-container">
       <week-picker
         :active-date-range="activeDateRange"
         :onDateChange="onDateChange"
       />
-      <week-calendar
-        :active-date-range="activeDateRange"
-        :selectable-slots="appointment.slots"
-        @event-selected="selectEvent"
-      />
     </div>
 
-    <slot-selection-aside />
-  </div>
+    <div class="booker-view-container">
+      <div class="calendar-container">
+        <week-calendar
+          :active-date-range="activeDateRange"
+          :selectable-slots="appointment.slots"
+          @event-selected="selectEvent"
+        />
+      </div>
+
+      <slot-selection-aside />
+    </div>
+
+    <div class="calendar-footer">
+      <ph-globe size="16" />
+      <span>{{ t('label.timeZone') }}: {{ timezone }}</span>
+    </div>
+  </template>
 </template>
 
 <style scoped>
@@ -76,11 +94,23 @@ async function onDateChange(dateObj: TimeFormatted) {
 .booker-view-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 2rem;
+}
+
+.week-picker-container {
+  margin-block-end: 2rem;
 }
 
 .calendar-container {
-  width: 100%;
+  flex: 1;
+}
+
+.calendar-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-block: 1.25rem;
+  font-size: 0.6875rem;
 }
 
 @media (--md) {
diff --git a/frontend/src/views/BookerView/components/SlotSelectionAside.vue b/frontend/src/views/BookerView/components/SlotSelectionAside.vue
index 888174a56..56f5c3a2c 100644
--- a/frontend/src/views/BookerView/components/SlotSelectionAside.vue
+++ b/frontend/src/views/BookerView/components/SlotSelectionAside.vue
@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, useTemplateRef } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import {
-  PhGlobe,
-  PhCalendarDot,
   PhCalendarBlank,
   PhClock,
-  PhCheckCircle,
   PhMapPin
 } from '@phosphor-icons/vue';
-import { PrimaryButton } from '@thunderbirdops/services-ui';
+import { TextInput, PrimaryButton } from '@thunderbirdops/services-ui';
 import { dayjsKey, callKey } from '@/keys';
 import { SlotResponse } from '@/models';
 import { usePosthog, posthog } from '@/composables/posthog';
 import { useBookingViewStore } from '@/stores/booking-view-store';
 import { useUserStore } from '@/stores/user-store';
 import { BookingCalendarView, MetricEvents, AlertSchemes } from '@/definitions';
-import SlotSelectionUserInfo from './SlotSelectionUserInfo.vue';
 import AlertBox from '@/elements/AlertBox.vue';
 
 const { t } = useI18n();
@@ -29,17 +25,20 @@ const userStore = useUserStore();
 const {
   appointment,
   selectedEvent,
-  guestUserInfo,
-  guestUserInfoValid,
   attendee,
   activeView
 } = storeToRefs(useBookingViewStore());
 
+const userInfoForm = useTemplateRef<HTMLFormElement>('userInfoForm');
+
 const bookingRequestLoading = ref<boolean>(false);
 const bookingRequestError = ref<string>('');
+const guestUserName = ref<string>(userStore.authenticated ? userStore.data.name : '');
+const guestUserEmail = ref<string>(userStore.authenticated ? userStore.data.email : '');
 
 const timezone = computed(() => dj.tz.guess());
 const selectedSlotDate = computed(() => dj(selectedEvent.value?.start).format('LL'))
+const selectedSlotDateDayOfWeek = computed(() => dj(selectedEvent.value?.start).format('dddd'));
 const selectedSlotTimeDuration = computed(() => {
   const startTime = dj(selectedEvent.value?.start).format('LT');
   const endTime = dj(selectedEvent.value?.start)
@@ -53,17 +52,17 @@ const selectedSlotTimeDuration = computed(() => {
  * Book or request to book a selected time.
  */
 const bookEvent = async () => {
+  if (!userInfoForm.value.checkValidity()) {
+    userInfoForm.value.reportValidity();
+    return;
+  }
+
   bookingRequestLoading.value = true;
   bookingRequestError.value = '';
 
-  const attendeeData = userStore.authenticated ? {
-    id: userStore.data.id,
-    email: userStore.data.email,
-    name: userStore.data.name,
-    timezone: userStore.data.settings.timezone,
-  } : {
-    email: guestUserInfo.value.email,
-    name: guestUserInfo.value.name,
+  const attendeeData = {
+    email: guestUserEmail.value,
+    name: guestUserName.value,
     timezone: timezone.value,
   }
 
@@ -111,71 +110,82 @@ const bookEvent = async () => {
 
 <template>
   <aside>
-    <p class="invitation-text" data-testid="booking-view-inviting-you-text">
-      {{ t('text.nameIsInvitingYou', { name: appointment.owner_name }) }}
-    </p>
-    <h1 class="appointment-title" data-testid="booking-view-title-text">
-      {{ appointment.title }}
-    </h1>
-    <p v-if="appointment.details" class="appointment-details">
-      {{ appointment.details }}
-    </p>
-    <div class="timezone-section">
-      <span class="timezone-label">{{ t('label.timeZone') }}:</span>
-      <div class="timezone-display">
-        <ph-globe size="24" />
-        {{ timezone }}
-      </div>
-    </div>
+    <h3>{{ t('label.bookingDetails') }}</h3>
 
     <template v-if="selectedEvent">
-      <div class="appointment-card">
-        <h3>{{ t('label.bookingDetails') }}</h3>
-        <div class="appointment-card-inner">
-          <header>
-            {{ selectedEvent.title }}
-            <ph-check-circle size="24"/>
-          </header>
-          <div class="appointment-card-inner-details">
-            <ph-calendar-blank size="16"/>
-            <span>{{ selectedSlotDate }}</span>
-            <ph-map-pin size="16"/>
+      <div class="appointment-card-inner">
+        <header>{{ selectedEvent.title }}</header>
+        <div class="appointment-card-inner-details">
+          <div class="appointment-card-inner-details-item">
+            <ph-calendar-blank size="20"/>
+            <div class="appointment-card-inner-details-item-details">
+              <p>{{ selectedSlotDateDayOfWeek }}</p>
+              <span>{{ selectedSlotDate }}</span>
+            </div>
+          </div>
+          <div class="appointment-card-inner-details-item">
+            <ph-clock size="20"/>
+            <div class="appointment-card-inner-details-item-details">
+              <p>{{ timezone }}</p>
+              <span>{{ selectedSlotTimeDuration }}</span>
+            </div>
+          </div>
+          <div class="appointment-card-inner-details-item">
+            <ph-clock size="20"/>
+            <span>{{ t('units.minutes', { value: selectedEvent.slot_duration }) }}</span>
+          </div>
+          <div class="appointment-card-inner-details-item">
+            <ph-map-pin size="20"/>
             <!-- TODO: We are currently only allowing for events to be online but the backend defaults to in person -->
             <!-- <span>{{ selectedEvent.location_type === EventLocationType.Online ? t('label.virtual') : t('label.inPerson') }}</span> -->
             <span>{{ t('label.virtual') }}</span>
-            <ph-clock size="16"/>
-            <span>{{ selectedSlotTimeDuration }} <span class="timezone-badge">{{ timezone }}</span></span>
-            <ph-clock size="16"/>
-            <span>{{ t('units.minutes', { value: selectedEvent.slot_duration }) }}</span>
           </div>
         </div>
       </div>
 
-      <slot-selection-user-info v-if="!userStore.authenticated" />
+      <form ref="userInfoForm" class="user-info-form" @submit.prevent @keyup.enter="bookEvent">
+        <text-input required name="booker-view-user-name" v-model="guestUserName">
+          {{ t('label.name') }}
+        </text-input>
+
+        <text-input required type="email" name="booker-view-user-email" v-model="guestUserEmail">
+          {{ t('label.email') }}
+        </text-input>
+
+        <alert-box
+          v-if="bookingRequestError"
+          :alert="{ title: bookingRequestError }"
+          :scheme="AlertSchemes.Error"
+          @close="bookingRequestError = ''"
+          class="booking-request-error"
+        />
+
+        <primary-button
+          v-if="selectedEvent && userInfoForm"
+          :label="t('label.bookAppointment')"
+          :disabled="bookingRequestLoading"
+          @click="bookEvent"
+          :title="t('label.confirm')"
+          class="book-appointment-button"
+          data-testid="booking-view-confirm-selection-button"
+        >
+          {{ t('label.bookAppointment') }}
+        </primary-button>
+      </form>
+
+      <p
+        v-if="selectedEvent && !appointment.booking_confirmation"
+        class="confirmation-footer-note"
+      >
+        {{ t('label.yourAppointmentWillBeConfirmedAutomatically') }}
+      </p>
     </template>
 
     <div v-else class="appointment-card empty">
-      {{ t('label.selectATimeFromTheCalendar') }}
-      <ph-calendar-dot size="108"/>
+      <ph-calendar-blank size="24" class="empty-icon" weight="duotone" />
+      <strong>{{ t('label.noneSelected') }}</strong>
+      <p>{{ t('label.selectATimeFromTheCalendar') }}</p>
     </div>
-
-    <alert-box
-      v-if="bookingRequestError"
-      :alert="{ title: bookingRequestError }"
-      :scheme="AlertSchemes.Error"
-      @close="bookingRequestError = ''"
-    />
-
-    <primary-button
-      :label="t('label.confirmSelection')"
-      :disabled="!selectedEvent || bookingRequestLoading || (!userStore.authenticated && !guestUserInfoValid)"
-      @click="bookEvent"
-      :title="t('label.confirm')"
-      class="confirm-selection-button"
-      data-testid="booking-view-confirm-selection-button"
-    >
-      {{ t('label.confirmSelection') }}
-    </primary-button>
   </aside>
 </template>
 
@@ -183,46 +193,18 @@ const bookEvent = async () => {
 @import '@/assets/styles/custom-media.pcss';
 
 aside {
-  .invitation-text {
-    margin-bottom: 0.825rem;
-    font-size: 0.825rem;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+  border: 1px solid var(--colour-neutral-border);
+  border-radius: 24px;
+  background-color: var(--colour-neutral-base);
+  font-family: Inter, sans-serif;
+
+  h3 {
     font-weight: 600;
-    color: var(--colour-ti-muted);
-  }
-
-  .appointment-title {
-    margin-bottom: 0.825rem;
-    font-size: 1.725rem;
-    line-height: 2.25rem;
-    color: var(--colour-ti-base);
-  }
-
-  .appointment-details {
-    margin-bottom: 1.5rem;
-    color: var(--colour-ti-base);
-  }
-
-  .timezone-section {
-    margin-bottom: 1.5rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 1rem;
-
-    .timezone-label {
-      font-size: 0.875rem;
-      line-height: 1.75rem;
-      color: var(--colour-ti-base);
-    }
-
-    .timezone-display {
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-      color: var(--colour-accent-teal);
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
+    color: var(--colour-ti-highlight);
+    margin-block-end: 1.5rem;
   }
 
   .appointment-card {
@@ -230,55 +212,89 @@ aside {
     flex-direction: column;
     justify-content: center;
     gap: 1rem;
-    padding: 1rem 0.5rem;
-    border: 1px dashed var(--colour-neutral-border);
-    border-radius: 0.25rem;
-    background-color: var(--colour-neutral-raised);
-    margin-block-end: 1rem;
+    padding: 1rem 1.5rem;
+    border: 1px solid var(--colour-neutral-border);
+    border-radius: 4px;
+    background-color: var(--colour-neutral-lower);
+    margin-block-end: 1.5rem;
 
     &.empty {
       align-items: center;
-      padding: 4rem 1.5rem;
+      text-align: center;
+      font-size: 1rem;
+      gap: 0;
+      margin-block-end: 0;
+
+      .empty-icon {
+        margin-block: 0.75rem 1.5rem;
+      }
+
+      strong {
+        font-weight: 500;
+        margin-block-end: 0.5rem;
+      }
+
+      p {
+        font-size: 0.875rem;
+        margin-block-end: 0.75rem;
+      }
     }
+  }
 
-    h3 {
-      text-align: center;
-      font-weight: 500;
+  .appointment-card-inner {
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    background-color: var(--colour-primary-soft);
+    margin-block-end: 1.5rem;
+
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: 600;
+      margin-block-end: 0.5rem;
+      color: var(--colour-ti-base);
     }
 
-    .appointment-card-inner {
-      padding: 1rem 1.5rem;
-      border-radius: 0.25rem;
-      color: black; /* TODO: Update colors when hi-fi is available */
-      background-color: #58C9FF; /* TODO: Update colors when hi-fi is available */
+    .appointment-card-inner-details {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      font-size: 0.875rem;
+      color: var(--colour-ti-base);
 
-      header {
+      .appointment-card-inner-details-item {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        margin-block-end: 1rem;
-      }
+        gap: 0.5rem;
 
-      .appointment-card-inner-details {
-        display: grid;
-        grid-template-columns: 1.5rem 1fr;
-        align-items: center;
-        row-gap: 0.25rem;
-        column-gap: 0.125rem;
-
-        .timezone-badge {
-          color: #58C9FF; /* TODO: Update colors when hi-fi is available */
-          background-color: black; /* TODO: Update colors when hi-fi is available */
-          font-size: 0.75rem;
-          padding: 0.25rem 0.375rem;
-          margin-inline-start: 0.25rem;
-          border-radius: 8px;
-          white-space: nowrap;
+        .appointment-card-inner-details-item-details {
+          display: flex;
+          flex-direction: column;
+
+          p {
+            line-height: 0.75rem;
+            font-size: 0.6875rem;
+          }
         }
       }
+
+      svg {
+        color: var(--colour-ti-highlight);
+      }
     }
   }
 
+  .user-info-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    .book-appointment-button {
+      text-transform: capitalize;
+    }
+  } 
+
   .booking-request-error {
     margin-block: 1rem;
     border-radius: 0.25rem;
@@ -287,8 +303,13 @@ aside {
     color: var(--colour-danger-default);
   }
 
-  .confirm-selection-button {
-    margin-inline-start: auto;
+  .booking-request-error {
+    margin-block: 0;
+  }
+
+  .confirmation-footer-note {
+    text-align: center;
+    font-size: 0.6875rem;
     margin-block-start: 1rem;
   }
 }
@@ -297,11 +318,7 @@ aside {
   aside {
     position: sticky;
     top: 5rem;
-    width: 470px;
-
-    .timezone-section {
-      flex-direction: row;
-    }
+    width: 268px;
   }
 }
 </style>
diff --git a/frontend/src/views/BookerView/components/SlotSelectionHeader.vue b/frontend/src/views/BookerView/components/SlotSelectionHeader.vue
new file mode 100644
index 000000000..a66cb7659
--- /dev/null
+++ b/frontend/src/views/BookerView/components/SlotSelectionHeader.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { PhClock, PhMapPin } from '@phosphor-icons/vue';
+import { useBookingViewStore } from '@/stores/booking-view-store';
+
+const { t } = useI18n();
+const calendarStore = useBookingViewStore();
+
+const { appointment } = storeToRefs(calendarStore);
+</script>
+
+<template>
+  <div class="booking-header">
+    <div class="booking-header-title-container">
+      <h2 data-testid="booking-view-book-a-time-to-meet-with-text">
+        {{ t('text.bookATimeToMeetWith', { name: appointment.owner_name }) }}
+      </h2>
+
+      <div class="booking-header-time-place">
+        <div class="booking-header-time-place-item">
+          <ph-clock size="16" />
+          <span>{{ t('units.minutes', { value: appointment.slot_duration }) }}</span>
+        </div>
+        <div class="booking-header-time-place-item">
+          <ph-map-pin size="16" />
+          <!-- TODO: We are currently only allowing for events to be online but the backend defaults to in person -->
+          <!-- <span>{{ selectedEvent.location_type === EventLocationType.Online ? t('label.virtual') : t('label.inPerson') }}</span> -->
+          <span>{{ t('label.onlineMeeting') }}</span>
+        </div>
+      </div>
+    </div>
+
+    <strong data-testid="booking-view-title-text">{{ appointment.title }}</strong>
+    <p v-if="appointment.details">{{ appointment.details }}</p>
+  </div>
+</template>
+
+<style scoped>
+@import '@/assets/styles/custom-media.pcss';
+
+.booking-header {
+  margin-block-end: 2rem;
+  font-family: Inter, sans-serif;
+
+  p, strong {
+    line-height: 1.32;
+    color: var(--colour-ti-base);
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  .booking-header-title-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-block-end: 1rem;
+    flex-wrap: wrap-reverse;
+
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 400;
+      color: var(--colour-ti-highlight);
+    }
+
+    .booking-header-time-place {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+
+      .booking-header-time-place-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+        color: var(--colour-ti-base);
+      }
+    }
+  }
+}
+
+@media (--md) {
+  .booking-header {
+    .booking-header-title-container {
+      max-width: calc(100% - 302px); /* Aligns with the slot-selection-aside width */
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/BookerView/components/SlotSelectionUserInfo.vue b/frontend/src/views/BookerView/components/SlotSelectionUserInfo.vue
deleted file mode 100644
index 2e218ddd9..000000000
--- a/frontend/src/views/BookerView/components/SlotSelectionUserInfo.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { storeToRefs } from 'pinia';
-import { PrimaryButton, TextInput } from '@thunderbirdops/services-ui';
-import { useUserStore } from '@/stores/user-store';
-import { useBookingViewStore } from '@/stores/booking-view-store';
-import { HTMLInputElementEvent } from '@/models';
-import { AlertSchemes } from '@/definitions';
-import AlertBox from '@/elements/AlertBox.vue';
-
-enum Tab {
-  GUEST,
-  SIGN_IN
-}
-
-const { t } = useI18n();
-const userStore = useUserStore();
-const bookingViewStore = useBookingViewStore();
-const userLoginFormRef = useTemplateRef('user-login-form');
-
-const { guestUserInfo, guestUserInfoValid } = storeToRefs(bookingViewStore)
-
-const selectedTab = ref<Tab>(Tab.GUEST);
-const userLoginEmail = ref('');
-const userLoginPassword = ref('');
-const userLoginError = ref('');
-const userLoginLoading = ref(false);
-
-const guestUserName = computed({
-  get: () => guestUserInfo.value.name,
-  set: (value) => {
-    bookingViewStore.$patch({ guestUserInfo: { name: value } })
-  }
-})
-
-const guestUserEmail = computed({
-  get: () => guestUserInfo.value.email,
-  set: (value) => {
-    bookingViewStore.$patch({ guestUserInfo: { email: value } })
-  }
-})
-
-const onGuestUserEmailChanged = (e: HTMLInputElementEvent) => {
-  guestUserInfoValid.value = e.target.checkValidity();
-}
-
-const onLogin = async () => {
-  userLoginError.value = '';
-  userLoginLoading.value = true;
-
-  if (userLoginFormRef.value.checkValidity()) {
-    const { error } = await userStore.login(userLoginEmail.value, userLoginPassword.value);
-
-    if (error) {
-      // FIXME: The return of the login function is not standardized at the moment
-      // and currently inferred as string | boolean but it does return an object
-      // with a detail key in this case
-      userLoginError.value = (error as any)?.detail;
-      userLoginLoading.value = false;
-      return;
-    }
-  }
-
-  userLoginLoading.value = false;
-}
-</script>
-
-<template>
-  <div class="user-info-container">
-    <div class="user-info-tabs">
-      <button
-        :class="{ 'selected': selectedTab === Tab.GUEST }"
-        @click="selectedTab = Tab.GUEST"
-      >
-        {{ t('label.continueAsGuest') }}
-      </button>
-      <button
-        :class="{ 'selected': selectedTab === Tab.SIGN_IN }"
-        @click="selectedTab = Tab.SIGN_IN"
-      >
-        {{ t('label.signIn') }}
-      </button>
-    </div>
-
-    <template v-if="selectedTab === Tab.GUEST">
-      <text-input name="booker-view-user-name" v-model="guestUserName">
-        {{ t('label.name') }}
-      </text-input>
-
-      <text-input required type="email" name="booker-view-user-email" v-model="guestUserEmail" @input="onGuestUserEmailChanged">
-        {{ t('label.email') }}
-      </text-input>
-    </template>
-  
-    <template v-else-if="selectedTab === Tab.SIGN_IN">
-      <form ref="user-login-form" @submit.prevent @keyup.enter="onLogin">
-        <text-input required type="email" name="booker-view-user-email" v-model="userLoginEmail">
-          {{ t('label.email') }}
-        </text-input>
-  
-        <text-input type="password" required name="booker-view-user-password" v-model="userLoginPassword">
-          {{ t('label.password') }}
-        </text-input>
-  
-        <alert-box
-          v-if="userLoginError"
-          :alert="{ title: userLoginError }"
-          :scheme="AlertSchemes.Error"
-          @close="userLoginError = ''"
-        />
-
-        <primary-button class="sign-in-button" @click="onLogin" :disabled="userLoginLoading">
-          {{ t('label.signIn') }}
-        </primary-button>
-      </form>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.user-info-container {
-  padding: 1rem 0.5rem;
-  background-color: var(--colour-neutral-raised);
-  border-radius: 0.25rem;
-
-  .user-info-tabs {
-    display: flex;
-    justify-content: end;
-    margin-block-end: 1rem;
-
-    button {
-      padding-inline: 1rem;
-      color: var(--colour-ti-muted);
-      border-block-end: 1px solid var(--colour-neutral-border);
-
-      &.selected {
-        color: var(--colour-ti-base);
-        border-block-end: 1px solid var(--colour-neutral-border-intense);
-      }
-    }
-  }
-
-  form {
-    display: flex;
-    gap: 1rem;
-    flex-grow: 1;
-    flex-direction: column;
-  }
-
-  .sign-in-button {
-    align-self: end;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/BookerView/index.vue b/frontend/src/views/BookerView/index.vue
index b8a1ace93..79a4fbb67 100644
--- a/frontend/src/views/BookerView/index.vue
+++ b/frontend/src/views/BookerView/index.vue
@@ -127,43 +127,41 @@ export default {
 </script>
 
 <template>
-  <div>
-    <!-- booking page content: loading -->
-    <main
-      v-if="activeView === BookingCalendarView.Loading"
-      class="booking-loading-container"
-    >
-      <loading-spinner/>
-    </main>
-    <!-- booking page content: invalid link -->
-    <main
-      v-else-if="activeView === BookingCalendarView.Invalid"
-      class="booking-invalid-container"
-    >
-      <booking-view-error
-        :heading="errorHeading"
-        :body="errorBody"
-      />
-    </main>
-    <!-- booking page content: successful booking -->
-    <main
-      v-else-if="activeView === BookingCalendarView.Success"
-      class="booking-success-container"
-    >
-      <booking-view-success
-        :attendee-email="attendee.email"
-        :selected-event="selectedEvent"
-        :requested="appointment?.booking_confirmation"
-      />
-    </main>
-    <!-- booking page content: time slot selection -->
-    <main
-      v-else
-      class="booking-slot-selection-container"
-    >
-      <booking-view-slot-selection />
-    </main>
-  </div>
+  <!-- booking page content: loading -->
+  <main
+    v-if="activeView === BookingCalendarView.Loading"
+    class="booking-loading-container"
+  >
+    <loading-spinner/>
+  </main>
+  <!-- booking page content: invalid link -->
+  <main
+    v-else-if="activeView === BookingCalendarView.Invalid"
+    class="booking-invalid-container"
+  >
+    <booking-view-error
+      :heading="errorHeading"
+      :body="errorBody"
+    />
+  </main>
+  <!-- booking page content: successful booking -->
+  <main
+    v-else-if="activeView === BookingCalendarView.Success"
+    class="booking-success-container"
+  >
+    <booking-view-success
+      :attendee-email="attendee.email"
+      :selected-event="selectedEvent"
+      :requested="appointment?.booking_confirmation"
+    />
+  </main>
+  <!-- booking page content: time slot selection -->
+  <main
+    v-else
+    class="booking-slot-selection-container"
+  >
+    <booking-view-slot-selection />
+  </main>
 </template>
 
 <style scoped>
@@ -211,4 +209,10 @@ export default {
     flex-direction: row;
   }
 }
+
+@media (--lg) {
+  .booking-slot-selection-container {
+    padding-inline: 3.5rem;
+  }
+}
 </style>
diff --git a/frontend/src/views/DashboardView/components/WeekCalendar.vue b/frontend/src/views/DashboardView/components/WeekCalendar.vue
index dffa97404..d92444b46 100644
--- a/frontend/src/views/DashboardView/components/WeekCalendar.vue
+++ b/frontend/src/views/DashboardView/components/WeekCalendar.vue
@@ -487,7 +487,6 @@ const filteredSelectableSlotsForGrid = computed(() => {
   border: 1px solid var(--colour-neutral-border);
   border-radius: 1.5rem;
   background-color: var(--colour-neutral-base);
-  margin-block-end: 2rem;
   flex: 1;
   overflow-y: auto;
   overflow-x: auto;
diff --git a/frontend/src/views/DashboardView/index.vue b/frontend/src/views/DashboardView/index.vue
index 9e4bd1814..7046c7cfb 100644
--- a/frontend/src/views/DashboardView/index.vue
+++ b/frontend/src/views/DashboardView/index.vue
@@ -71,11 +71,13 @@ export default {
         <user-calendar-sync />
       </div>
 
-      <week-calendar
-        :active-date-range="activeDateRange"
-        :events="remoteEvents"
-        :pending-appointments="pendingAppointments"
-      />
+      <div class="calendar-container">
+        <week-calendar
+          :active-date-range="activeDateRange"
+          :events="remoteEvents"
+          :pending-appointments="pendingAppointments"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -94,6 +96,10 @@ export default {
   flex-direction: column;
   width: 100%;
   margin-block-start: 0.25rem;
+
+  .calendar-container {
+    margin-block-end: 2rem;
+  }
 }
 
 .calendar-header-container {