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 078a7867b..66865199a 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
@@ -1,5 +1,5 @@
 "use client"
-import { FormProvider, useForm } from "react-hook-form"
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
@@ -33,28 +33,32 @@ export function VoucherSkeleton() {
     defaultMessage: "Reward Night",
   })
 
-  const form = useForm()
-
   return (
-    <FormProvider {...form}>
-      <div className={styles.optionsContainer}>
-        <div className={styles.voucherSkeletonContainer}>
-          <label>
-            <Caption type="bold" color="red" asChild>
-              <span>{vouchers}</span>
-            </Caption>
-          </label>
-          <SkeletonShimmer width={"100%"} display={"block"} />
+    <div className={styles.optionsContainer}>
+      <div className={styles.voucherSkeletonContainer}>
+        <label>
+          <Caption type="bold" color="red" asChild>
+            <span>{vouchers}</span>
+          </Caption>
+        </label>
+        <SkeletonShimmer width="100%" display="block" />
+      </div>
+
+      <div className={styles.options}>
+        <div className={cx(styles.option, styles.showOnTablet)}>
+          <SkeletonShimmer width="24px" height="24px" />
+          <Caption color="uiTextMediumContrast" asChild>
+            <span>{vouchers}</span>
+          </Caption>
         </div>
-        <div className={styles.options}>
-          <div className={styles.option}>
-            <SkeletonShimmer width="24px" height="24px" />
-            <Caption color="uiTextMediumContrast" asChild>
-              <span>{reward}</span>
-            </Caption>
-          </div>
+
+        <div className={styles.option}>
+          <SkeletonShimmer width="24px" height="24px" />
+          <Caption color="uiTextMediumContrast" asChild>
+            <span>{reward}</span>
+          </Caption>
         </div>
       </div>
-    </FormProvider>
+    </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 4bd9dc0e1..97aef78d7 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
@@ -25,6 +25,10 @@
   height: 24px;
 }
 
+.showOnTablet {
+  display: none;
+}
+
 @media screen and (min-width: 768px) {
   .options {
     flex-direction: row;
@@ -41,6 +45,15 @@
   }
 }
 
+@media screen and (min-width: 768px) and (max-width: 1366px) {
+  .voucherSkeletonContainer {
+    display: none;
+  }
+  .showOnTablet {
+    display: flex;
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .options {
     flex-direction: column;
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 429185a68..0fa254735 100644
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import { usePathname } from "next/navigation"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -95,7 +96,7 @@ export default function FormContent({
           <GuestsRoomsPickerForm ariaLabelledBy="rooms-and-guests" />
         </div>
       </div>
-      <div className={`${styles.buttonContainer} ${styles.showOnTablet}`}>
+      <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
         <Button
           className={styles.button}
           form={formId}
@@ -108,10 +109,10 @@ export default function FormContent({
           </span>
         </Button>
       </div>
-      <div className={`${styles.voucherContainer} ${styles.voucherRow}`}>
+      <div className={cx(styles.voucherContainer, styles.voucherRow)}>
         <Voucher />
       </div>
-      <div className={`${styles.buttonContainer} ${styles.hideOnTablet}`}>
+      <div className={cx(styles.buttonContainer, styles.hideOnTablet)}>
         {isMultiRoomError(errors.bookingCode?.value?.message) ||
         isMultiRoomError(errors[SEARCH_TYPE_REDEMPTION]?.message) ? (
           <div className={styles.showOnMobile}>
@@ -169,7 +170,7 @@ export function BookingWidgetFormContentSkeleton() {
               )}
             </label>
           </Typography>
-          <SkeletonShimmer width={"100%"} display={"block"} />
+          <SkeletonShimmer width="100%" display="block" />
         </div>
         <div className={styles.rooms}>
           <Typography
@@ -182,13 +183,26 @@ export function BookingWidgetFormContentSkeleton() {
               })}
             </label>
           </Typography>
-          <SkeletonShimmer width={"100%"} display={"block"} />
+          <SkeletonShimmer width="100%" display="block" />
         </div>
       </div>
-      <div className={styles.voucherContainer}>
+      <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
+        <Button
+          className={styles.button}
+          intent="primary"
+          theme="base"
+          type="submit"
+          disabled
+        >
+          <span className={styles.icon}>
+            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
+          </span>
+        </Button>
+      </div>
+      <div className={cx(styles.voucherContainer, styles.voucherRow)}>
         <VoucherSkeleton />
       </div>
-      <div className={styles.buttonContainer}>
+      <div className={cx(styles.buttonContainer, styles.hideOnTablet)}>
         <Button
           className={styles.button}
           intent="primary"
diff --git a/packages/design-system/lib/components/SkeletonShimmer/skeleton.module.css b/packages/design-system/lib/components/SkeletonShimmer/skeleton.module.css
index 90a852006..8a90bebf6 100644
--- a/packages/design-system/lib/components/SkeletonShimmer/skeleton.module.css
+++ b/packages/design-system/lib/components/SkeletonShimmer/skeleton.module.css
@@ -1,3 +1,13 @@
+.shimmer {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  border-radius: 4px;
+  min-height: 1em;
+  min-width: 2ch;
+  background-color: var(--shimmer-background);
+}
+
 .shimmer.dark {
   --shimmer-background: rgba(255, 255, 255, 0.1);
   --shimmer: linear-gradient(
@@ -17,14 +27,6 @@
     rgba(255, 255, 255, 0.5) 60%,
     rgba(255, 255, 255, 0) 100%
   );
-
-  background-color: var(--shimmer-background);
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
-  border-radius: 4px;
-  min-height: 1em;
-  min-width: 2ch;
 }
 .shimmer::after {
   position: absolute;