diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx
index c697a730a..539713c45 100644
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx
@@ -40,28 +40,30 @@ export function VoucherSkeleton() {
   })
 
   return (
-    <div className={styles.optionsContainer}>
-      {config.bookingCodeEnabled && (
-        <div className={styles.voucherSkeletonContainer}>
-          <Typography variant="Body/Supporting text (caption)/smBold">
-            <label>{vouchers}</label>
-          </Typography>
-          <SkeletonShimmer width="100%" display="block" />
-        </div>
-      )}
-      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <div className={styles.options}>
-          <div className={cx(styles.option, styles.showOnTablet)}>
-            <SkeletonShimmer width="24px" height="24px" />
-            {vouchers}
+    <div className={styles.skeletonContainer}>
+      <div className={styles.optionsContainer}>
+        {config.bookingCodeEnabled && (
+          <div className={styles.voucherSkeletonContainer}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <label>{vouchers}</label>
+            </Typography>
+            <SkeletonShimmer width="100%" display="block" />
           </div>
+        )}
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <div className={styles.options}>
+            <div className={cx(styles.option, styles.showOnTablet)}>
+              <SkeletonShimmer width="24px" height="24px" />
+              {vouchers}
+            </div>
 
-          <div className={styles.option}>
-            <SkeletonShimmer width="24px" height="24px" />
-            {reward}
+            <div className={styles.option}>
+              <SkeletonShimmer width="24px" height="24px" />
+              {reward}
+            </div>
           </div>
-        </div>
-      </Typography>
+        </Typography>
+      </div>
     </div>
   )
 }
diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
index 8c5ffdd23..f135cc120 100644
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
@@ -54,6 +54,9 @@
   .showOnTablet {
     display: flex;
   }
+  .skeletonContainer {
+    padding: var(--Space-x2) 0;
+  }
 }
 
 @media screen and (min-width: 1367px) {
diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
index 46e4f2739..77bc1e696 100644
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
@@ -171,51 +171,53 @@ export function BookingWidgetFormContentSkeleton() {
 
   return (
     <div className={styles.input}>
-      <div className={styles.inputContainer}>
-        <div className={styles.where}>
-          <SearchSkeleton />
+      <div className={styles.inputRow}>
+        <div className={styles.inputContainer}>
+          <div className={styles.where}>
+            <SearchSkeleton />
+          </div>
+          <div className={styles.when}>
+            <Typography
+              variant="Body/Supporting text (caption)/smBold"
+              className={styles.label}
+            >
+              <label>
+                {intl.formatMessage(
+                  {
+                    id: "booking.numberOfNights",
+                    defaultMessage:
+                      "{totalNights, plural, one {# night} other {# nights}}",
+                  },
+                  { totalNights: 0 }
+                )}
+              </label>
+            </Typography>
+            <SkeletonShimmer width="100%" display="block" />
+          </div>
+          <div className={styles.rooms}>
+            <Typography
+              variant="Body/Supporting text (caption)/smBold"
+              className={styles.label}
+            >
+              <label id="rooms-and-guests">
+                {intl.formatMessage({
+                  id: "bookingWidget.label.roomsAndGuests",
+                  defaultMessage: "Rooms & Guests",
+                })}
+              </label>
+            </Typography>
+            <SkeletonShimmer width="100%" display="block" />
+          </div>
         </div>
-        <div className={styles.when}>
-          <Typography
-            variant="Body/Supporting text (caption)/smBold"
-            className={styles.label}
-          >
-            <label>
-              {intl.formatMessage(
-                {
-                  id: "booking.numberOfNights",
-                  defaultMessage:
-                    "{totalNights, plural, one {# night} other {# nights}}",
-                },
-                { totalNights: 0 }
-              )}
-            </label>
-          </Typography>
-          <SkeletonShimmer width="100%" display="block" />
+        <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
+          <IconButton
+            variant="Filled"
+            size="xl"
+            type="submit"
+            isDisabled
+            iconName="search"
+          />
         </div>
-        <div className={styles.rooms}>
-          <Typography
-            variant="Body/Supporting text (caption)/smBold"
-            className={styles.label}
-          >
-            <label id="rooms-and-guests">
-              {intl.formatMessage({
-                id: "bookingWidget.label.roomsAndGuests",
-                defaultMessage: "Rooms & Guests",
-              })}
-            </label>
-          </Typography>
-          <SkeletonShimmer width="100%" display="block" />
-        </div>
-      </div>
-      <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
-        <IconButton
-          variant="Filled"
-          size="xl"
-          type="submit"
-          isDisabled
-          iconName="search"
-        />
       </div>
       <div className={cx(styles.voucherContainer, styles.voucherRow)}>
         <VoucherSkeleton />