diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css
deleted file mode 100644
index 7b5dbc2f5..000000000
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/addAncillaryFlowModal.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  overflow-y: auto;
-}
-
-.modalScrollable {
-  display: flex;
-  flex-direction: column;
-}
-
-.form::-webkit-scrollbar {
-  display: none;
-}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AncillaryFlowModalWrapper/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AncillaryFlowModalWrapper/index.tsx
deleted file mode 100644
index 4a5d8036d..000000000
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AncillaryFlowModalWrapper/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Modal from "@scandic-hotels/design-system/Modal"
-
-import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
-
-import styles from "./wrapper.module.css"
-
-export default function AncillaryFlowModalWrapper({
-  children,
-}: React.PropsWithChildren) {
-  const { isOpen, closeModal, selectedAncillaryTitle } = useAddAncillaryStore(
-    (state) => ({
-      isOpen: state.isOpen,
-      closeModal: state.closeModal,
-      selectedAncillaryTitle: state.selectedAncillary?.title,
-    })
-  )
-  return (
-    <Modal isOpen={isOpen} onToggle={closeModal} title={selectedAncillaryTitle}>
-      <div className={styles.modalWrapper}>{children}</div>
-    </Modal>
-  )
-}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AncillaryFlowModalWrapper/wrapper.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AncillaryFlowModalWrapper/wrapper.module.css
deleted file mode 100644
index f50971271..000000000
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AncillaryFlowModalWrapper/wrapper.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.modalWrapper {
-  display: flex;
-  flex-direction: column;
-  max-height: 70dvh;
-  width: 100%;
-  margin-top: var(--Space-x3);
-}
-
-@media screen and (min-width: 768px) {
-  .modalWrapper {
-    width: 492px;
-  }
-}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Description/description.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Description/description.module.css
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Description/description.module.css
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Description/description.module.css
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Description/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Description/index.tsx
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Description/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Description/index.tsx
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceDetails/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceDetails/index.tsx
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceDetails/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceDetails/index.tsx
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceDetails/priceDetails.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceDetails/priceDetails.module.css
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceDetails/priceDetails.module.css
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceDetails/priceDetails.module.css
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceSummary/PriceRow/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceSummary/PriceRow/index.tsx
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceSummary/PriceRow/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceSummary/PriceRow/index.tsx
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceSummary/PriceRow/priceRow.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceSummary/PriceRow/priceRow.module.css
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceSummary/PriceRow/priceRow.module.css
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceSummary/PriceRow/priceRow.module.css
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceSummary/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceSummary/index.tsx
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceSummary/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceSummary/index.tsx
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceSummary/priceSummary.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceSummary/priceSummary.module.css
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/PriceSummary/priceSummary.module.css
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/PriceSummary/priceSummary.module.css
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/index.tsx
similarity index 71%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/index.tsx
index d39ff751f..a2a3a23ab 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/index.tsx
@@ -136,77 +136,81 @@ export default function Summary({
       : null
 
   return (
-    <div
-      className={cx(styles.summary, {
-        [styles.backgroundBox]: isConfirmation || isSingleItem,
-      })}
-    >
-      {(isSingleItem || isConfirmation) && (
-        <PriceDetails
-          totalPrice={totalPrice}
-          totalPoints={totalPoints}
-          selectedAncillary={selectedAncillary}
-        />
-      )}
-      {isConfirmation && isPriceDetailsOpen && (
-        <PriceSummary
-          totalPrice={totalPrice}
-          totalPoints={totalPoints}
-          items={items}
-        />
-      )}
+    <div className={styles.summary}>
       <div
         className={cx({
-          [styles.confirmButtons]: isConfirmation,
+          [styles.backgroundBox]: isConfirmation || isSingleItem,
         })}
       >
-        {isConfirmation && (
-          <Button
-            type="button"
-            typography="Body/Supporting text (caption)/smBold"
-            size="Small"
-            variant="Text"
-            onPress={togglePriceDetails}
-            className={styles.priceButton}
-          >
-            {intl.formatMessage({
-              id: "commonpriceDetails",
-              defaultMessage: "Price details",
-            })}
-            <MaterialIcon
-              icon={
-                isPriceDetailsOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"
-              }
-              size={20}
-              color="CurrentColor"
-            />
-          </Button>
+        {(isSingleItem || isConfirmation) && (
+          <PriceDetails
+            totalPrice={totalPrice}
+            totalPoints={totalPoints}
+            selectedAncillary={selectedAncillary}
+          />
         )}
+        {isConfirmation && isPriceDetailsOpen && (
+          <PriceSummary
+            totalPrice={totalPrice}
+            totalPoints={totalPoints}
+            items={items}
+          />
+        )}
+        <div
+          className={cx({
+            [styles.confirmButtons]: isConfirmation,
+          })}
+        >
+          {isConfirmation && (
+            <Button
+              type="button"
+              typography="Body/Supporting text (caption)/smBold"
+              size="Small"
+              variant="Text"
+              onPress={togglePriceDetails}
+              className={styles.priceButton}
+            >
+              {intl.formatMessage({
+                id: "commonpriceDetails",
+                defaultMessage: "Price details",
+              })}
+              <MaterialIcon
+                icon={
+                  isPriceDetailsOpen
+                    ? "keyboard_arrow_up"
+                    : "keyboard_arrow_down"
+                }
+                size={20}
+                color="CurrentColor"
+              />
+            </Button>
+          )}
 
-        <div className={styles.buttons}>
-          <Button
-            typography="Body/Supporting text (caption)/smBold"
-            type="button"
-            variant="Text"
-            size="Small"
-            color="Primary"
-            onPress={() => prevStep(isMobile)}
-          >
-            {intl.formatMessage({
-              id: "common.back",
-              defaultMessage: "Back",
-            })}
-          </Button>
+          <div className={styles.buttons}>
+            <Button
+              typography="Body/Supporting text (caption)/smBold"
+              type="button"
+              variant="Text"
+              size="Small"
+              color="Primary"
+              onPress={() => prevStep(isMobile)}
+            >
+              {intl.formatMessage({
+                id: "common.back",
+                defaultMessage: "Back",
+              })}
+            </Button>
 
-          <Button
-            typography="Body/Supporting text (caption)/smBold"
-            size="Small"
-            isDisabled={isSubmitting}
-            isPending={isSubmitting}
-            {...buttonProps}
-          >
-            {buttonLabel}
-          </Button>
+            <Button
+              typography="Body/Supporting text (caption)/smBold"
+              size="Small"
+              isDisabled={isSubmitting}
+              isPending={isSubmitting}
+              {...buttonProps}
+            >
+              {buttonLabel}
+            </Button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/summary.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/summary.module.css
similarity index 81%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/summary.module.css
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/summary.module.css
index 96a407369..80ea2142c 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Summary/summary.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/Summary/summary.module.css
@@ -1,8 +1,10 @@
-.summmary {
+.summary {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-top: var(--Space-x2);
+  padding: var(--Space-x2) var(--Space-x2) var(--Space-x3);
+  width: 100%;
+  border-top: 1px solid var(--Border-Default);
 }
 
 .backgroundBox {
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/addAncillaryModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/addAncillaryModal.module.css
new file mode 100644
index 000000000..3a28308c4
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/addAncillaryModal.module.css
@@ -0,0 +1,25 @@
+.modal {
+  width: 100%;
+}
+
+.modalContent {
+  gap: unset;
+}
+
+.modalScrollable {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: var(--Space-x2);
+}
+
+@media screen and (min-width: 768px) {
+  .modal {
+    width: 492px;
+  }
+
+  .modalScrollable {
+    padding: var(--Space-x3);
+  }
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/index.tsx
new file mode 100644
index 000000000..71305ca32
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/index.tsx
@@ -0,0 +1,47 @@
+import Modal from "@scandic-hotels/design-system/Modal"
+
+import {
+  AncillaryStepEnum,
+  useAddAncillaryStore,
+} from "@/stores/my-stay/add-ancillary-flow"
+
+import Description from "../Description"
+import Steps from "../Steps"
+import Summary from "./Summary"
+
+import styles from "./addAncillaryModal.module.css"
+
+import type { StepsProps } from "@/types/components/myPages/myStay/ancillaries"
+
+export default function AddAncillaryModal({
+  error,
+  savedCreditCards,
+  user,
+}: StepsProps) {
+  const { isOpen, closeModal, selectedAncillaryTitle, currentStep } =
+    useAddAncillaryStore((state) => ({
+      isOpen: state.isOpen,
+      closeModal: state.closeModal,
+      selectedAncillaryTitle: state.selectedAncillary?.title,
+      currentStep: state.currentStep,
+    }))
+  return (
+    <Modal
+      isOpen={isOpen}
+      onToggle={closeModal}
+      title={selectedAncillaryTitle}
+      withActions
+      contentClassName={styles.modalContent}
+      className={styles.modal}
+    >
+      <div className={styles.modalScrollable}>
+        <Description />
+        <Steps user={user} savedCreditCards={savedCreditCards} error={error} />
+      </div>
+
+      <Summary
+        isConfirmation={currentStep === AncillaryStepEnum.confirmation}
+      />
+    </Modal>
+  )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/ConfirmationStep/confirmationStep.module.css
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/ConfirmationStep/confirmationStep.module.css
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/ConfirmationStep/index.tsx
similarity index 99%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/ConfirmationStep/index.tsx
index b6dbed1a5..16fb435e0 100755
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/ConfirmationStep/index.tsx
@@ -16,8 +16,6 @@ import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 import TermsAndConditions from "@/components/HotelReservation/MyStay/TermsAndConditions"
 import { trackUpdatePaymentMethod } from "@/utils/tracking"
 
-import Summary from "../Summary"
-
 import styles from "./confirmationStep.module.css"
 
 import type { ConfirmationStepProps } from "@/types/components/myPages/myStay/ancillaries"
@@ -228,7 +226,6 @@ export default function ConfirmationStep({
         </Typography>
       )}
       <TermsAndConditions />
-      <Summary isConfirmation />
     </div>
   )
 }
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/deliveryDetailsStep.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/deliveryDetailsStep.module.css
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/deliveryDetailsStep.module.css
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/deliveryDetailsStep.module.css
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/index.tsx
similarity index 96%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/index.tsx
index a5aa2f9c2..2961a8ee2 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/index.tsx
@@ -6,8 +6,6 @@ import { generateDeliveryOptions } from "@/components/HotelReservation/MyStay/ut
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Select from "@/components/TempDesignSystem/Form/Select"
 
-import Summary from "../Summary"
-
 import styles from "./deliveryDetailsStep.module.css"
 
 export default function DeliveryMethodStep() {
@@ -28,7 +26,7 @@ export default function DeliveryMethodStep() {
           </Typography>
           <Select
             name="deliveryTime"
-            label=""
+            label={""}
             items={deliveryTimeOptions}
             registerOptions={{ required: true }}
             isNestedInModal
@@ -61,7 +59,6 @@ export default function DeliveryMethodStep() {
           </Typography>
         </div>
       </div>
-      <Summary />
     </div>
   )
 }
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Desktop/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/Desktop/index.tsx
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Desktop/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/Desktop/index.tsx
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Mobile/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/Mobile/index.tsx
similarity index 87%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Mobile/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/Mobile/index.tsx
index 8b8621234..7d075dd45 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/Mobile/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/Mobile/index.tsx
@@ -18,10 +18,7 @@ export default function Mobile({ user, savedCreditCards, error }: StepsProps) {
   if (currentStep === AncillaryStepEnum.selectQuantity) {
     return (
       <>
-        <SelectQuantityStep
-          user={user}
-          hideSummary={selectedAncillary?.requiresDeliveryTime}
-        />
+        <SelectQuantityStep user={user} />
         {selectedAncillary?.requiresDeliveryTime && <DeliveryMethodStep />}
       </>
     )
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/BreakfastInfo.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/SelectQuantityStep/BreakfastInfo.tsx
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/BreakfastInfo.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/SelectQuantityStep/BreakfastInfo.tsx
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/SelectQuantityStep/index.tsx
similarity index 94%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/SelectQuantityStep/index.tsx
index 1a49afbd1..da7495642 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/SelectQuantityStep/index.tsx
@@ -11,7 +11,6 @@ import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 import Select from "@/components/TempDesignSystem/Form/Select"
 import { getErrorMessage } from "@/utils/getErrorMessage"
 
-import Summary from "../Summary"
 import { BreakfastInfo } from "./BreakfastInfo"
 
 import styles from "./selectQuantityStep.module.css"
@@ -26,10 +25,7 @@ const cardQuantityOptions = Array.from({ length: 7 }, (_, i) => ({
   value: i,
 }))
 
-export default function SelectQuantityStep({
-  user,
-  hideSummary = false,
-}: SelectQuantityStepProps) {
+export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
   const { isBreakfast, selectedAncillary } = useAddAncillaryStore((state) => ({
     isBreakfast: state.isBreakfast,
     selectedAncillary: state.selectedAncillary,
@@ -50,12 +46,7 @@ export default function SelectQuantityStep({
     )
   }
 
-  return (
-    <div className={styles.container}>
-      {content}
-      {!hideSummary && <Summary />}
-    </div>
-  )
+  return <div className={styles.container}>{content}</div>
 }
 
 function InnerSelectQuantityStep({
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/SelectQuantityStep/selectQuantityStep.module.css
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/selectQuantityStep.module.css
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/SelectQuantityStep/selectQuantityStep.module.css
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/index.tsx
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/index.tsx
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/addAncillaryFlowModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/addAncillaryFlowModal.module.css
new file mode 100644
index 000000000..24fa59426
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/addAncillaryFlowModal.module.css
@@ -0,0 +1,6 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/index.tsx
similarity index 95%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/index.tsx
index b29187f77..f735b2afa 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/index.tsx
@@ -29,10 +29,9 @@ import {
   trackGlaAncillaryAttempt,
 } from "@/utils/tracking/myStay"
 
-import { isAncillaryError } from "../../../utils"
-import { type AncillaryFormData, ancillaryFormSchema } from "../schema"
-import Description from "./Description"
-import Steps from "./Steps"
+import { isAncillaryError } from "../../utils"
+import AddAncillaryFlow from "./Modal"
+import { type AncillaryFormData, ancillaryFormSchema } from "./schema"
 import {
   buildBreakfastPackages,
   calculateBreakfastData,
@@ -315,14 +314,11 @@ export default function AddAncillaryFlowModal({
         className={styles.form}
         id="add-ancillary-form-id"
       >
-        <div className={styles.modalScrollable}>
-          <Description />
-          <Steps
-            user={user}
-            savedCreditCards={savedCreditCards}
-            error={errorMessage}
-          />
-        </div>
+        <AddAncillaryFlow
+          error={errorMessage}
+          savedCreditCards={savedCreditCards}
+          user={user}
+        />
       </form>
     </FormProvider>
   )
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/utils.ts b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/utils.ts
similarity index 98%
rename from apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/utils.ts
rename to apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/utils.ts
index dbe93b8bf..311b29084 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/utils.ts
@@ -12,7 +12,7 @@ import type { IntlShape } from "react-intl"
 
 import type { AncillaryErrorMessage } from "@/types/components/myPages/myStay/ancillaries"
 import type { BreakfastData } from "@/stores/my-stay/add-ancillary-flow"
-import type { AncillaryFormData } from "../schema"
+import type { AncillaryFormData } from "./schema"
 
 /**
  * This function calculates some breakfast data in the store.
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx
index 8c6508960..8734f93fa 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx
@@ -9,8 +9,7 @@ import { Carousel } from "@/components/Carousel"
 import { useAncillaries } from "@/hooks/useAncillaries"
 import { AddAncillaryProvider } from "@/providers/AddAncillaryProvider"
 
-import AddAncillaryFlowModal from "./AddAncillaryFlow/AddAncillaryFlowModal"
-import AncillaryFlowModalWrapper from "./AddAncillaryFlow/AncillaryFlowModalWrapper"
+import AddAncillaryFlow from "./AddAncillaryFlow"
 import { AddedAncillaries } from "./AddedAncillaries"
 import AllAncillariesModal from "./AllAncillariesModal"
 import WrappedAncillaryCard from "./Card"
@@ -92,15 +91,12 @@ export function Ancillaries({
           booking={bookedRoom}
           ancillaries={ancillaries.allUnique}
         />
-
-        <AncillaryFlowModalWrapper>
-          <AddAncillaryFlowModal
-            user={user}
-            booking={bookedRoom}
-            packages={packages}
-            savedCreditCards={savedCreditCards}
-          />
-        </AncillaryFlowModalWrapper>
+        <AddAncillaryFlow
+          user={user}
+          booking={bookedRoom}
+          packages={packages}
+          savedCreditCards={savedCreditCards}
+        />
       </div>
     </AddAncillaryProvider>
   )
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/index.tsx
index 5f50ae849..08d786aa6 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/index.tsx
@@ -1,13 +1,10 @@
 "use client"
-import { Dialog, DialogTrigger } from "react-aria-components"
+import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import Modal from "@/components/HotelReservation/MyStay/Modal"
+import Modal from "@scandic-hotels/design-system/Modal"
 
 import Actions from "./Actions"
 import Info from "./Info"
@@ -15,6 +12,7 @@ import Info from "./Info"
 import styles from "./manageStay.module.css"
 
 export default function ManageStay() {
+  const [isOpen, setIsOpen] = useState(false)
   const intl = useIntl()
 
   const manageStay = intl.formatMessage({
@@ -22,36 +20,26 @@ export default function ManageStay() {
     defaultMessage: "Manage stay",
   })
 
+  function onClose() {
+    setIsOpen(false)
+  }
   return (
-    <DialogTrigger>
+    <>
       <Button
         size="Medium"
         variant="Tertiary"
         typography="Body/Supporting text (caption)/smBold"
+        onPress={() => setIsOpen(true)}
       >
         <span>{manageStay}</span>
         <MaterialIcon color="CurrentColor" icon="keyboard_arrow_down" />
       </Button>
-      <Modal>
-        <Dialog className={styles.dialog}>
-          {({ close }) => (
-            <>
-              <header className={styles.header}>
-                <Typography variant="Title/Subtitle/lg">
-                  <span className={styles.title}>{manageStay}</span>
-                </Typography>
-                <IconButton onPress={close} theme="Inverted">
-                  <MaterialIcon color="CurrentColor" icon="close" />
-                </IconButton>
-              </header>
-              <div className={styles.content}>
-                <Actions onClose={close} />
-                <Info />
-              </div>
-            </>
-          )}
-        </Dialog>
+      <Modal isOpen={isOpen} onToggle={onClose} title={manageStay}>
+        <div className={styles.content}>
+          <Actions onClose={onClose} />
+          <Info />
+        </div>
       </Modal>
-    </DialogTrigger>
+    </>
   )
 }
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css
index 8c6732f27..fc2bf1a0c 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css
@@ -1,30 +1,11 @@
-.dialog {
-  display: grid;
-  flex: 1;
-  gap: var(--Space-x2);
-}
-
-.header {
-  align-items: center;
-  display: flex;
-  gap: var(--Space-x2);
-  justify-content: space-between;
-}
-
-.title {
-  color: var(--Text-Default);
-}
-
 .content {
+  padding-top: var(--Space-x1);
   display: grid;
   gap: var(--Space-x2);
+  width: 100%;
 }
 
 @media screen and (min-width: 768px) {
-  .dialog {
-    gap: var(--Space-x3);
-  }
-
   .content {
     gap: var(--Space-x3);
     grid-template-columns: 1fr 1fr;
diff --git a/apps/scandic-web/types/components/myPages/myStay/ancillaries.ts b/apps/scandic-web/types/components/myPages/myStay/ancillaries.ts
index 083c3115e..6155af872 100644
--- a/apps/scandic-web/types/components/myPages/myStay/ancillaries.ts
+++ b/apps/scandic-web/types/components/myPages/myStay/ancillaries.ts
@@ -40,7 +40,6 @@ export interface AddAncillaryFlowModalProps {
 
 export interface SelectQuantityStepProps {
   user: User | null
-  hideSummary?: boolean
 }
 export interface InnerSelectQuantityStepProps {
   user: User | null
diff --git a/packages/design-system/lib/components/Modal/index.tsx b/packages/design-system/lib/components/Modal/index.tsx
index bebac53e9..237cf90d2 100644
--- a/packages/design-system/lib/components/Modal/index.tsx
+++ b/packages/design-system/lib/components/Modal/index.tsx
@@ -41,11 +41,13 @@ function InnerModal({
   withActions,
   hideHeader,
   className,
+  contentClassName,
 }: PropsWithChildren<InnerModalProps>) {
   const intl = useIntl()
 
   const contentClassNames = modalContentVariants({
     withActions,
+    className: contentClassName,
   })
 
   function modalStateHandler(newAnimationState: AnimationState) {
@@ -155,6 +157,7 @@ export default function Modal({
   withActions = false,
   hideHeader = false,
   className = '',
+  contentClassName = '',
 }: PropsWithChildren<ModalProps>) {
   const [animation, setAnimation] = useState<AnimationState>(
     AnimationStateEnum.visible
@@ -188,6 +191,7 @@ export default function Modal({
             withActions={withActions}
             hideHeader={hideHeader}
             className={className}
+            contentClassName={contentClassName}
           >
             {children}
           </InnerModal>
diff --git a/packages/design-system/lib/components/Modal/modal.module.css b/packages/design-system/lib/components/Modal/modal.module.css
index ef8e94348..be0ad80e7 100644
--- a/packages/design-system/lib/components/Modal/modal.module.css
+++ b/packages/design-system/lib/components/Modal/modal.module.css
@@ -33,7 +33,7 @@
   display: flex;
   align-items: flex-start;
   position: relative;
-  padding: var(--Space-x3) var(--Space-x7) 0 var(--Space-x3);
+  padding: var(--Space-x2) var(--Space-x7) var(--Space-x1) var(--Space-x2);
 }
 
 .content {
@@ -49,13 +49,13 @@
 }
 
 .contentWithoutActions {
-  padding: 0 var(--Space-x3) var(--Space-x4);
+  padding: 0 var(--Space-x2) var(--Space-x3);
 }
 
 .close {
   position: absolute;
-  top: var(--Space-x2);
-  right: var(--Space-x2);
+  top: var(--Space-x1);
+  right: var(--Space-x1);
 }
 
 .verticalCenter {
@@ -80,4 +80,17 @@
   .dialog {
     max-height: 90dvh;
   }
+
+  .header {
+    padding: var(--Space-x3) var(--Space-x7) var(--Space-x1) var(--Space-x3);
+  }
+
+  .contentWithoutActions {
+    padding: 0 var(--Space-x3) var(--Space-x4);
+  }
+
+  .close {
+    top: var(--Space-x2);
+    right: var(--Space-x2);
+  }
 }
diff --git a/packages/design-system/lib/components/Modal/modal.ts b/packages/design-system/lib/components/Modal/modal.ts
index 0a358a519..6b5bbd16a 100644
--- a/packages/design-system/lib/components/Modal/modal.ts
+++ b/packages/design-system/lib/components/Modal/modal.ts
@@ -15,6 +15,7 @@ export type ModalProps = {
   withActions?: boolean
   hideHeader?: boolean
   className?: string
+  contentClassName?: string
 } & (
   | {
       trigger: JSX.Element