diff --git a/frontend/src/assets/styles/variables.css b/frontend/src/assets/styles/variables.css
index e99606ecf..432f64935 100644
--- a/frontend/src/assets/styles/variables.css
+++ b/frontend/src/assets/styles/variables.css
@@ -2,6 +2,7 @@ html {
   --border-radius: 0.1875rem; /* 3px */
   --txt-input: 0.8125rem; /* 13px */
   --line-height-input: 1.25rem; /* 20px */
+  --font-sans: 'Inter', 'sans-serif';
 
   --transition: all 250ms ease-out;
   --transition-transform: .15s transform ease-in-out;
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
index 054369844..78fa241c8 100644
--- a/frontend/src/components/ScheduleCreation.vue
+++ b/frontend/src/components/ScheduleCreation.vue
@@ -18,13 +18,13 @@ import {
 
 import AppointmentCreatedModal from '@/components/AppointmentCreatedModal.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
-import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import AlertBox from '@/elements/AlertBox.vue';
 import ToolTip from '@/elements/ToolTip.vue';
 import SnackishBar from '@/elements/SnackishBar.vue';
 import SwitchToggle from '@/tbpro/elements/SwitchToggle.vue';
 import BubbleSelect from '@/tbpro/elements/BubbleSelect.vue';
 import TextInput from '@/tbpro/elements/TextInput.vue';
+import CheckboxInput from '@/tbpro/elements/CheckboxInput.vue';
 import SelectInput from '@/tbpro/elements/SelectInput.vue';
 import LinkButton from '@/tbpro/elements/LinkButton.vue';
 import RefreshIcon from '@/tbpro/icons/RefreshIcon.vue';
@@ -425,9 +425,9 @@ watch(
 </script>
 
 <template>
-  <div class="sticky top-24 flex flex-col gap-4 rounded-2xl bg-zinc-100 dark:bg-gray-600">
-    <div class="flex flex-col gap-4 px-1 py-4">
-      <div class="flex items-center justify-around text-center text-xl font-semibold text-teal-500">
+  <div class="schedule-creation-container">
+    <div class="flex flex-col gap-2 py-4">
+      <div class="flex items-center justify-between text-center text-lg text-teal-600">
         <span class="pl-3">{{ t("heading.generalAvailability") }}</span>
         <switch-toggle
           v-if="existing"
@@ -443,7 +443,7 @@ watch(
         {{ scheduleCreationError }}
       </alert-box>
 
-      <div class="px-4">
+      <div class="px-4 mb-1">
         <label for="scheduleName" class="flex-column flex">
           <input
             id="scheduleName"
@@ -451,7 +451,7 @@ watch(
             v-model="scheduleInput.name"
             :placeholder="t('placeholder.mySchedule')"
             :disabled="!scheduleInput.active"
-            class="schedule-name place-holder w-full rounded-none border-0 border-b bg-transparent px-2 dark:bg-transparent"
+            class="schedule-name place-holder w-full rounded-none border-0 border-b bg-transparent p-1 dark:bg-transparent"
             required
           />
           <div v-if="!scheduleInput.name" class="content-center text-red-500">*</div>
@@ -459,16 +459,12 @@ watch(
       </div>
 
       <!-- step 1 -->
-      <div
-        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50': activeStep1}"
-        id="schedule-availability"
-      >
+      <div id="schedule-availability" class="schedule-creation-step" :class="{ 'active': activeStep1 }">
         <div
           @click="state = ScheduleCreationState.Availability"
           class="btn-step-1 flex cursor-pointer items-center justify-between"
         >
-          <div class="flex flex-col gap-1">
+          <div class="flex flex-col">
             <h2>
               {{ t("label.chooseYourAvailability") }}
             </h2>
@@ -504,7 +500,7 @@ watch(
             </text-input>
           </div>
           <div>
-            <div class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-300">
+            <div class="input-label">
               {{ t("label.availableDays") }}
             </div>
             <bubble-select
@@ -515,7 +511,7 @@ watch(
             />
           </div>
           <div>
-            <div class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-300">
+            <div class="input-label">
               {{ t("label.timeZone") }}
             </div>
             <div class="flex justify-between">
@@ -529,16 +525,12 @@ watch(
       </div>
 
       <!-- step 2 -->
-      <div
-        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50':activeStep2}"
-        id="schedule-settings"
-      >
+      <div id="schedule-settings" class="schedule-creation-step" :class="{ 'active': activeStep2 }">
         <div
           @click="state = ScheduleCreationState.Settings"
           class="btn-step-2 flex cursor-pointer items-center justify-between"
         >
-          <div class="flex flex-col gap-1">
+          <div class="flex flex-col">
             <h2>
               {{ t("label.scheduleDetails") }}
             </h2>
@@ -606,13 +598,13 @@ watch(
 
       <!-- step 3 -->
       <div
-        @click="state = ScheduleCreationState.Details"
-        class="btn-step-3 mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50': activeStep3}"
         id="schedule-details"
+        class="schedule-creation-step"
+        :class="{ 'active':  activeStep3 }"
+        @click="state = ScheduleCreationState.Details"
       >
         <div class="flex cursor-pointer items-center justify-between">
-          <div class="flex flex-col gap-1">
+          <div class="flex flex-col">
             <h2>
               {{ t("label.meetingDetails") }}
             </h2>
@@ -652,20 +644,15 @@ watch(
               </span>
             </div>
           </text-input>
-          <label class="flex items-center gap-2">
-            <input
-              type="checkbox"
-              :checked="scheduleInput.meeting_link_provider === MeetingLinkProviderType.Zoom"
-              :disabled="!scheduleInput.active || !hasZoomAccount"
-              @change="toggleZoomLinkCreation"
-              class="size-5 rounded-md"
-            />
-            <div class="font-medium text-gray-500 dark:text-gray-300">
-              {{ t("label.generateZoomLink") }}
-            </div>
-          </label>
+          <checkbox-input
+            name="generateZoomLink"
+            :label="t('label.generateZoomLink')"
+            :checked="scheduleInput.meeting_link_provider === MeetingLinkProviderType.Zoom"
+            :disabled="!scheduleInput.active || !hasZoomAccount"
+            @change="toggleZoomLinkCreation"
+          />
           <label class="relative flex flex-col gap-1">
-            <div class="font-medium text-gray-500 dark:text-gray-300">
+            <div class="input-label ">
               {{ t("label.notes") }}
             </div>
             <textarea
@@ -690,13 +677,13 @@ watch(
 
       <!-- step 4 -->
       <div
-        @click="state = ScheduleCreationState.Booking"
-        class="btn-step-3 mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50': activeStep4}"
         id="schedule-details"
+        class="schedule-creation-step"
+        :class="{ 'active': activeStep4 }"
+        @click="state = ScheduleCreationState.Booking"
       >
         <div class="flex cursor-pointer items-center justify-between">
-          <div class="flex flex-col gap-1">
+          <div class="flex flex-col">
             <h2>
               {{ t("label.bookingSettings") }}
             </h2>
@@ -713,9 +700,6 @@ watch(
           <hr/>
           <!-- custom quick link -->
           <label class="relative flex flex-col gap-1">
-            <div class="font-medium text-gray-500 dark:text-gray-300">
-              {{ t("label.quickLink") }}
-            </div>
             <div class="flex gap-2">
               <text-input
                 type="text"
@@ -725,8 +709,10 @@ watch(
                 class="w-full rounded-md disabled:cursor-not-allowed"
                 :small-text="true"
                 maxLength="16"
-              />
-              <refresh-icon class="mt-2.5 cursor-pointer text-teal-600" @click.prevent="refreshSlug" />
+              >
+                {{ t("label.quickLink") }}
+              </text-input>
+              <refresh-icon class="mt-7 cursor-pointer text-teal-600" @click.prevent="refreshSlug" />
             </div>
           </label>
           <!-- option to deactivate confirmation -->
@@ -740,7 +726,7 @@ watch(
               @changed="toggleBookingConfirmation"
               no-legend
             />
-            <div class="whitespace-pre-line rounded-lg bg-white p-4 text-xs text-gray-500 dark:bg-gray-800">
+            <div class="whitespace-pre-line rounded-lg pb-3 text-xs text-gray-500">
               <div>
                 {{ t('text.yourQuickLinkIs', { url: user.myLink }) }}<br />
                 <i18n-t keypath="text.toUpdateYourUsername.text" tag="span">
@@ -764,50 +750,49 @@ watch(
     </div>
     <!-- Snack-ish Bar - The dark info bubble at the bottom of this form -->
     <!-- First time no calendars -->
-    <snackish-bar :show-icon=true v-if="!calendarStore.hasConnectedCalendars">
-      <div class="flex flex-col gap-2">
-        <p>{{ t('text.scheduleSettings.noCalendars') }}</p>
-        <u><a href="/settings/calendar">{{ t('text.scheduleSettings.clickHereToConnect') }}</a></u>
-      </div>
+    <snackish-bar
+      v-if="!calendarStore.hasConnectedCalendars"
+      :show-icon=true
+      :message="t('text.scheduleSettings.noCalendars')"
+    >
+      <u><a href="/settings/calendar">{{ t('text.scheduleSettings.clickHereToConnect') }}</a></u>
     </snackish-bar>
     <!-- No schedule? Create one please! -->
-    <snackish-bar v-else-if="!existing">
-      <div class="flex flex-col items-center justify-center gap-2">
-        <p>{{ t('text.scheduleSettings.create') }}</p>
-        <primary-button
-          class="btn-save w-1/2"
-          @click="saveSchedule(!existing)"
-          :disabled="!scheduleInput.active"
-        >
-          {{ t('label.save') }}
-        </primary-button>
-      </div>
+    <snackish-bar v-else-if="!existing" :message="t('text.scheduleSettings.create')">
+      <primary-button
+        class="btn-save w-full"
+        @click="saveSchedule(!existing)"
+        :disabled="!scheduleInput.active"
+      >
+        {{ t('label.save') }}
+      </primary-button>
     </snackish-bar>
     <!-- Schedule is not active -->
-    <snackish-bar :show-icon=true v-else-if="!scheduleInput.active">
-      <p>{{ t('text.scheduleSettings.notActive') }}</p>
-    </snackish-bar>
+    <snackish-bar
+      v-else-if="!scheduleInput.active"
+      :show-icon=true
+      :message="t('text.scheduleSettings.notActive')"
+    />
     <!-- Form is dirty, please clean it -->
-    <snackish-bar v-else-if="isFormDirty">
-      <div class="flex flex-col gap-2">
-      <p>{{ t('text.scheduleSettings.formDirty') }}</p>
-      <div class="flex gap-4">
-          <secondary-button
-            class="btn-revert w-1/2"
-            @click="revertForm()"
-            :disabled="!scheduleInput.active"
-          >
-            {{ t('label.revert') }}
-          </secondary-button>
-          <primary-button
-            class="btn-save w-1/2"
-            @click="saveSchedule(!existing)"
-            :disabled="!scheduleInput.active || savingInProgress"
-          >
-            {{ t('label.save') }}
-          </primary-button>
-        </div>
-        </div>
+    <snackish-bar
+      v-else-if="isFormDirty"
+      :show-icon="true"
+      :message="t('text.scheduleSettings.formDirty')"
+    >
+      <primary-button
+        class="btn-save w-full"
+        @click="saveSchedule(!existing)"
+        :disabled="!scheduleInput.active || savingInProgress"
+      >
+        {{ t('label.save') }}
+      </primary-button>
+      <link-button
+        class="btn-revert w-full py-4"
+        @click="revertForm()"
+        :disabled="!scheduleInput.active"
+      >
+        {{ t('label.clearForm') }}
+      </link-button>
     </snackish-bar>
     <div v-else>
       <div class="my-8 flex justify-center gap-4">
@@ -837,25 +822,39 @@ watch(
 </template>
 
 <style scoped>
-input[type="time"]::-webkit-calendar-picker-indicator {
-  margin-right: -0.5rem;
-  background: none;
+.schedule-creation-container {
+  position: sticky;
+  top: 6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-radius: 1rem;
+  border: 1px solid var(--colour-neutral-border);
+  background: var(--colour-neutral-lower);
 }
 
-label {
-  font-size: theme('fontSize.sm');
-}
-
-/* Lol come-on! */
-textarea:disabled,
-select:disabled,
-input:disabled {
-  color: theme('colors.neutral.400') !important;
-  cursor: not-allowed;
+.schedule-creation-step {
+  margin: 0 .75rem;
+  padding: .75rem;
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  border-radius: .5rem;
+  border: 1px solid var(--colour-neutral-border);
+
+  &.active {
+    background: var(--colour-neutral-base);
+    border-color: var(--colour-service-primary);
+  }
 }
 
-input[type=checkbox]:disabled {
-  filter: grayscale(100%);
+.input-label {
+  color: var(--colour-ti-base);
+  font-family: var(--font-sans);
+  font-size: var(--txt-input);
+  line-height: var(--line-height-input);
+  width: 100%;
+  font-weight: 500;
 }
 
 /* If the device does not support hover (i.e. mobile) then make it activate on focus within */
diff --git a/frontend/src/elements/SnackishBar.vue b/frontend/src/elements/SnackishBar.vue
index ce631d5f1..bcfbe1712 100644
--- a/frontend/src/elements/SnackishBar.vue
+++ b/frontend/src/elements/SnackishBar.vue
@@ -3,20 +3,44 @@ import { IconInfoCircle } from '@tabler/icons-vue';
 
 // component properties
 interface Props {
+  message?: string;
   showIcon?: boolean;
 }
 withDefaults(defineProps<Props>(), {
+  message: null,
   showIcon: false,
 });
 </script>
 
 <template>
-  <div class="h-28 w-full rounded-xl bg-neutral-600 text-white dark:bg-gray-800 dark:text-gray-100">
-    <div class="m-auto flex h-full w-8/12 flex-row items-center justify-center gap-2 text-wrap text-center text-xs leading-4 tracking-wider">
-      <div class="flex flex-row items-center justify-center gap-2">
-        <icon-info-circle v-if="showIcon" class="min-w-4" aria-hidden="true"/>
-        <slot></slot>
-      </div>
-    </div>
+  <div class="container">
+    <p v-if="message" class="message">
+      <icon-info-circle v-if="showIcon" class="icon" aria-hidden="true"/>
+      {{ message }}
+    </p>
+    <slot></slot>
   </div>
 </template>
+
+<style scoped>
+.container {
+  background: var(--colour-neutral-border);
+  border-radius: .75rem;
+  width: 100%;
+  /* height: 7rem; */
+  text-align: center;
+  padding: 1rem 2rem;
+
+  .message {
+    font-weight: 500;
+    font-size: .875rem;
+    margin-bottom: 1rem;
+  }
+
+  .icon {
+    width: 1rem;
+    display: inline;
+    margin: 0 .25rem 0 .125rem;
+  }
+}
+</style>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 3be95c17e..cfdc5c3b2 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -174,6 +174,7 @@
     "cancel": "Abbrechen",
     "checkAvailableSlots": "Verfügbare Zeiten anzeigen",
     "chooseYourAvailability": "Wähle deine Verfügbarkeit",
+    "clearForm": "Zurücksetzen",
     "close": "Schließen",
     "closed": "Geschlossen",
     "color": "Farbe",
@@ -354,8 +355,8 @@
     }
   },
   "navBar": {
-    "shareMyLink": "Meinen Link teilen",
-    "reportBug": "Fehler melden"
+    "reportBug": "Fehler melden",
+    "shareMyLink": "Meinen Link teilen"
   },
   "notices": {
     "betaWarning": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 509b979e0..60faa60fd 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -64,7 +64,7 @@
   "heading": {
     "accountData": "Account Data",
     "accountDeletion": "Account Deletion",
-    "accountSettings": "Account Settings",
+    "accountSettings": "Account settings",
     "appointmentCreated": "Booking created!",
     "appointmentsAndBookingSettings": "Appointments & booking settings",
     "bookSelection": "Book selection",
@@ -79,8 +79,8 @@
     "eventBooked": "Event booked!",
     "externalConnections": "Connections",
     "frequentlyAskedQuestions": "Frequently asked Questions",
-    "generalAvailability": "Set Availability",
-    "generalSettings": "General Settings",
+    "generalAvailability": "Set General Availability",
+    "generalSettings": "General settings",
     "languageAndAppearance": "Language & Appearance",
     "pendingAppointments": "Pending bookings",
     "privacySettings": "Privacy settings",
@@ -163,7 +163,7 @@
     "booked": "Booked",
     "bookingConfirmation": "Booking Confirmation",
     "bookingLink": "Booking Link",
-    "bookingSettings": "Booking Settings",
+    "bookingSettings": "Booking settings",
     "bookingSlot": "Booking slot",
     "bookings": "Bookings | Booking | Bookings",
     "busy": "Busy",
@@ -174,6 +174,7 @@
     "cancel": "Cancel",
     "checkAvailableSlots": "Check available slots",
     "chooseYourAvailability": "Availability",
+    "clearForm": "Clear form",
     "close": "Close",
     "closed": "Closed",
     "color": "Color",
@@ -214,8 +215,8 @@
     "editProfile": "Edit profile",
     "email": "Email",
     "end": "End",
-    "endDate": "End Date",
-    "endTime": "End Time",
+    "endDate": "End date",
+    "endTime": "End time",
     "enterEmailToInvite": "Enter an email to invite them to Thunderbird Appointment:",
     "error": "Error",
     "faq": "FAQ",
@@ -240,7 +241,7 @@
     "logIn": "Log in",
     "logOut": "Log out",
     "loginToContinue": "Log in to continue",
-    "meetingDetails": "Meeting Details",
+    "meetingDetails": "Meeting details",
     "message": "Message",
     "month": "Month",
     "myLink": "My link",
@@ -273,9 +274,9 @@
     "saveChanges": "Save changes",
     "schedule": "Schedule",
     "scheduleCreationError": "There was an error creating your schedule. Let's try that again.",
-    "scheduleDetails": "Scheduling Details",
+    "scheduleDetails": "Scheduling details",
     "scheduleSettings": {
-      "availabilitySubHeading": "Set your availability days and times",
+      "availabilitySubHeading": "Set your availability days and time",
       "bookingSettingsSubHeading": "Edit your quick link and more",
       "meetingDetailsSubHeading": "Add video and/or notes to events",
       "schedulingDetailsSubHeading": "Set booking intervals and duration"
@@ -296,8 +297,8 @@
     "signUpWithInviteCode": "Sign up with invite code",
     "slotLength": "Booking Duration",
     "start": "Start",
-    "startDate": "Start Date",
-    "startTime": "Start Time",
+    "startDate": "Start date",
+    "startTime": "Start time",
     "startUsingTba": "Try Appointment",
     "status": "Status",
     "success": "Success",
@@ -354,8 +355,8 @@
     }
   },
   "navBar": {
-    "shareMyLink": "Share my link",
-    "reportBug": "Report Bug"
+    "reportBug": "Report Bug",
+    "shareMyLink": "Share my link"
   },
   "notices": {
     "betaWarning": {
@@ -395,7 +396,7 @@
     "chooseDateAndTime": "Choose when to meet.",
     "connectZoom": "Connect your Zoom account to generate instant meeting invites for each booking.",
     "contactRequestForm": "Please use the contact form below to send any feedback, questions, or concerns to our support team. If needed we will try and contact you for further information as soon as possible.",
-    "defineDaysAndTimeSlots": "Choose the days and times this event can be booked.",
+    "defineDaysAndTimeSlots": "Choose the days and time this event can be booked.",
     "denialSentToAddress": "We've let the booker ({address}) know you can't make this event.",
     "disclaimerGABooking": "Your booking will be confirmed by the calendar owner.",
     "googlePermissionCalendarName": "See and download your calendars using Google Calendar",
@@ -433,7 +434,7 @@
     "requestInformationSentToOwner": "An information about this booking request has been emailed to the owner.",
     "scheduleSettings": {
       "clickHereToConnect": "Click here to connect a calendar!",
-      "create": "Select a calendar under Scheduling Details and click save to get started!",
+      "create": "Select a calendar under Scheduling details and click save to get started!",
       "formDirty": "You have unsaved changes.",
       "noCalendars": "Scheduling requires at least one connected calendar.",
       "notActive": "Schedule is not active, turn on the toggle to edit or share."
@@ -468,7 +469,7 @@
     "timesAreDisplayedInLocalTimezone": "Times are displayed in your local timezone {timezone}.",
     "titleIsReadyForBookings": "{title} is ready for bookings",
     "toUpdateYourUsername": {
-      "link": "Account Settings",
+      "link": "Account settings",
       "text": "To update your username, go to {link}. "
     },
     "updateUsernameNotice": "Changing your username will also change your link. Your old link will no longer work.",
diff --git a/frontend/src/tbpro/elements/BaseButton.vue b/frontend/src/tbpro/elements/BaseButton.vue
index 387d97de1..d1dfa7f71 100644
--- a/frontend/src/tbpro/elements/BaseButton.vue
+++ b/frontend/src/tbpro/elements/BaseButton.vue
@@ -53,7 +53,7 @@ button:hover > .tooltip,
 
 .primary {
   background-color: var(--colour-service-primary);
-  border-color: var(--colour-service-primary-hover);
+  @mixin faded-border var(--colour-service-primary-hover);
   color: var(--colour-neutral-base);
 
   &:hover:enabled {
@@ -147,8 +147,7 @@ button {
   align-items: center;
   height: 100%;
 
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-left: 1.5rem;
   margin-right: -0.75rem;
 }
 
diff --git a/frontend/src/tbpro/elements/BubbleSelect.vue b/frontend/src/tbpro/elements/BubbleSelect.vue
index e53d1be2d..4ffe9bfbd 100644
--- a/frontend/src/tbpro/elements/BubbleSelect.vue
+++ b/frontend/src/tbpro/elements/BubbleSelect.vue
@@ -52,7 +52,7 @@ const toggleBubble = (option: SelectOption) => {
           class="tbpro-bubble"
           :aria-pressed="model.indexOf(option.value) > -1"
           :class="{'selected': model.indexOf(option.value) > -1}"
-          :title="option.fullLabel ?? option.value"
+          :title="option.label ?? String(option.value)"
           type="button"
           @click="() => toggleBubble(option)"
         >
@@ -77,7 +77,7 @@ const toggleBubble = (option: SelectOption) => {
 .bubble-list {
   padding: 0;
   display: flex;
-  gap: 0.25rem;
+  justify-content: space-between;
   list-style: none;
 }
 
diff --git a/frontend/src/tbpro/elements/CheckboxInput.vue b/frontend/src/tbpro/elements/CheckboxInput.vue
new file mode 100644
index 000000000..bbc230da3
--- /dev/null
+++ b/frontend/src/tbpro/elements/CheckboxInput.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { HTMLInputElementEvent } from '@/models';
+
+// component properties
+interface Props {
+  name: string;
+  label?: string;
+  help?: string;
+  error?: string;
+  checked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  label: null,
+  help: null,
+  error: null,
+  checked: false,
+  required: false,
+  disabled: false,
+});
+
+const model = defineModel<boolean>();
+const isInvalid = ref(false);
+const validationMessage = ref('');
+const isDirty = ref(false);
+const inputRef = ref<HTMLInputElement>(null);
+
+/**
+ * Forwards focus intent to the text input element.
+ * Unlike HTMLElement.focus() this does not take any parameters.
+ */
+const focus = () => {
+  if (!inputRef.value) {
+    return;
+  }
+  inputRef.value.focus();
+};
+
+const emit = defineEmits(['submit', 'change']);
+defineExpose({ focus });
+
+const onInvalid = (evt: HTMLInputElementEvent) => {
+  isInvalid.value = true;
+  isDirty.value = true;
+  validationMessage.value = evt.target.validationMessage;
+};
+/**
+ * On any change we mark the element as dirty
+ * this is so we can delay :invalid until
+ * the user does something worth invalidating
+ */
+const onChange = () => {
+  isDirty.value = true;
+  emit('change');
+};
+</script>
+
+<template>
+  <div class="checkbox-input-wrapper">
+    <label class="checkbox-input-label" :for="name">
+      <input
+        class="checkbox-input"
+        v-model="model"
+        type="checkbox"
+        :class="{ 'dirty': isDirty }"
+        :id="name"
+        :name="name"
+        :checked="checked"
+        :disabled="disabled"
+        :required="required"
+        @invalid="onInvalid"
+        @change="onChange"
+        ref="inputRef"
+      />
+      <span v-if="label">{{ label }}</span>
+      <span v-if="required" class="required">*</span>
+    </label>
+    <span v-if="isInvalid" class="help-label invalid">
+      {{ validationMessage }}
+    </span>
+    <span v-else-if="error" class="help-label invalid">
+      {{ error }}
+    </span>
+    <span v-else-if="help" class="help-label">
+      {{ help }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.checkbox-input-wrapper {
+  --colour-highlight: var(--colour-service-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  color: var(--colour-ti-base);
+  font-family: var(--font-sans);
+  font-size: var(--txt-input);
+  line-height: var(--line-height-input);
+  font-weight: 400;
+  width: 100%;
+}
+.dark {
+  .checkbox-input-wrapper {
+    --colour-highlight: var(--colour-service-secondary);
+  }
+}
+
+.checkbox-input-label {
+  display: flex;
+  gap: 0.625rem;
+  justify-content: flex-start;
+  align-items: center;
+  font-weight: 500;
+}
+
+.help-label {
+  display: flex;
+  color: var(--colour-ti-base);
+
+  width: 100%;
+  min-height: 0.9375rem;
+  font-size: 0.625rem;
+  line-height: 0.9375rem;
+  padding: 0.1875rem;
+
+  &.invalid {
+    color: var(--colour-danger-default);
+  }
+}
+
+.required {
+  color: var(--colour-ti-critical);
+}
+
+.checkbox-input {
+  width: 1.0rem;
+  height: 1.0rem;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--colour-neutral-border-intense);
+
+  &:focus {
+    outline-color: var(--colour-highlight);
+  }
+
+  &:checked, &:checked:hover, &:checked:focus {
+    background-color: var(--colour-highlight);
+    border-color: var(--colour-highlight);
+    color: var(--colour-neutral-raised);
+  }
+}
+</style>
diff --git a/frontend/src/tbpro/elements/SelectInput.vue b/frontend/src/tbpro/elements/SelectInput.vue
index 4d6672484..841f8c2b2 100644
--- a/frontend/src/tbpro/elements/SelectInput.vue
+++ b/frontend/src/tbpro/elements/SelectInput.vue
@@ -66,7 +66,7 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
 
 .label {
   width: 100%;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .help-label {
@@ -93,6 +93,7 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
   background-color: var(--colour-neutral-base);
   @mixin faded-border var(--colour-select-border);
   border-radius: var(--border-radius);
+  font-size: var(--txt-input);
   font-weight: 400;
 
   &:hover, &:focus {
@@ -103,6 +104,11 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
     background-color: var(--colour-neutral-subtle);
     --colour-select-border: var(--colour-neutral-border-intense);
   }
+
+  &:disabled {
+    filter: grayscale(50%);
+    cursor: not-allowed;
+  }
 }
 .dark {
   .tbpro-select {
diff --git a/frontend/src/tbpro/elements/SwitchToggle.vue b/frontend/src/tbpro/elements/SwitchToggle.vue
index 2ddb050d1..e55188256 100644
--- a/frontend/src/tbpro/elements/SwitchToggle.vue
+++ b/frontend/src/tbpro/elements/SwitchToggle.vue
@@ -33,7 +33,7 @@ const toggleState = () => {
 
 <template>
   <div class="component-container" @click.prevent="toggleState">
-    <div v-if="label">{{ label }}</div>
+    <div v-if="label" class="input-label">{{ label }}</div>
     <div class="toggle-container">
       <div v-if="!noLegend" class="toggle-label">{{ t('label.off') }}</div>
       <div class="toggle">
@@ -73,6 +73,15 @@ const toggleState = () => {
   }
 }
 
+.input-label {
+  color: var(--colour-ti-base);
+  font-family: var(--font-sans);
+  font-size: var(--txt-input);
+  line-height: var(--line-height-input);
+  width: 100%;
+  font-weight: 500;  
+}
+
 .toggle-container {
   display: flex;
   align-items: center;
diff --git a/frontend/src/tbpro/elements/SyncCard.vue b/frontend/src/tbpro/elements/SyncCard.vue
index 1d05e0c40..15612f249 100644
--- a/frontend/src/tbpro/elements/SyncCard.vue
+++ b/frontend/src/tbpro/elements/SyncCard.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { CalendarItem } from '@/models';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
+import CheckboxInput from '@/tbpro/elements/CheckboxInput.vue';
 
 const { t } = useI18n();
 const model = defineModel<CalendarItem[]>();
@@ -40,10 +41,7 @@ defineProps<Props>();
     </div>
     <ul class="rows">
       <li class="row" v-for="(item, index) in model" :key="item.key">
-        <label>
-          <input type="checkbox" v-model="model[index].checked"/>
-          {{ item.label }}
-        </label>
+        <checkbox-input :name="`calendar-${index}`" :label="item.label" v-model="model[index].checked" />
       </li>
     </ul>
   </div>
@@ -108,30 +106,6 @@ defineProps<Props>();
   }
 }
 
-label {
-  display: flex;
-  gap: 0.625rem;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-input {
-  width: 1.0rem;
-  height: 1.0rem;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--colour-neutral-border-intense);
-
-  &:focus {
-    outline-color: var(--colour-highlight);
-  }
-
-  &:checked, &:checked:hover, &:checked:focus {
-    background-color: var(--colour-highlight);
-    border-color: var(--colour-highlight);
-    color: var(--colour-neutral-raised);
-  }
-}
-
 .select-all {
   margin-left: auto;
   margin-right: auto;
diff --git a/frontend/src/tbpro/elements/TextInput.vue b/frontend/src/tbpro/elements/TextInput.vue
index 3f84f4d97..41dac2e44 100644
--- a/frontend/src/tbpro/elements/TextInput.vue
+++ b/frontend/src/tbpro/elements/TextInput.vue
@@ -116,7 +116,7 @@ const onChange = () => {
   flex-direction: column;
   align-items: center;
   color: var(--colour-ti-base);
-  font-family: 'Inter', 'sans-serif';
+  font-family: var(--font-sans);
   font-size: var(--txt-input);
   line-height: var(--line-height-input);
   font-weight: 400;
@@ -124,7 +124,7 @@ const onChange = () => {
 
 .label {
   width: 100%;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .small-text {
@@ -203,6 +203,11 @@ const onChange = () => {
     &::placeholder {
       color: var(--colour-ti-muted);
     }
+
+    &[type="time"]::-webkit-calendar-picker-indicator {
+      margin-right: -0.5rem;
+      background: none;
+    }
   }
 }
 .dark {