diff --git a/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/index.tsx
index 8dde629b8..d3fc0e2bc 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/index.tsx
@@ -37,6 +37,7 @@ export default function PriceDetails() {
         totalPrice={totalPrice}
         vat={bookedRoom.vatPercentage}
         defaultCurrency={bookedRoom.currencyCode}
+        isCampaignRate={bookedRoom.isCampaignRate}
       />
     </div>
   )
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/bookingCode.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/bookingCode.module.css
index 8e6197099..ad9e58e7c 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/bookingCode.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/bookingCode.module.css
@@ -1,5 +1,9 @@
 .row {
-  align-items: center;
   display: flex;
+  align-items: center;
   justify-content: space-between;
+
+  &.rightAligned {
+    justify-content: flex-end;
+  }
 }
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/index.tsx
index af4d8f762..1bafcf322 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/index.tsx
@@ -1,8 +1,8 @@
 "use client"
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
-import IconChip from "@scandic-hotels/design-system/IconChip"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
+import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -11,31 +11,40 @@ import styles from "./bookingCode.module.css"
 
 export default function BookingCode() {
   const intl = useIntl()
-  const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)
+  const { bookingCode, isCampaignRate } = useMyStayStore((state) => ({
+    bookingCode: state.bookedRoom.bookingCode,
+    isCampaignRate: state.bookedRoom.isCampaignRate,
+  }))
 
-  if (!bookingCode) {
+  if (!bookingCode && !isCampaignRate) {
     return null
   }
 
-  return (
-    <div className={styles.row}>
-      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <p>
-          {intl.formatMessage({
-            id: "booking.bookingCode",
-            defaultMessage: "Booking code",
-          })}
-        </p>
-      </Typography>
+  const codeType = isCampaignRate
+    ? intl.formatMessage({
+        id: "booking.campaignCode",
+        defaultMessage: "Campaign code",
+      })
+    : intl.formatMessage({
+        id: "booking.bookingCode",
+        defaultMessage: "Booking code",
+      })
 
-      <IconChip
-        color="blue"
-        icon={<DiscountIcon color="Icon/Feedback/Information" />}
-      >
+  const showCodeType = bookingCode || !isCampaignRate
+
+  return (
+    <div className={cx(styles.row, { [styles.rightAligned]: !showCodeType })}>
+      {showCodeType && (
         <Typography variant="Body/Supporting text (caption)/smRegular">
-          <span>{bookingCode}</span>
+          <p>{codeType}</p>
         </Typography>
-      </IconChip>
+      )}
+
+      <BookingCodeChip
+        bookingCode={bookingCode}
+        isCampaign={isCampaignRate}
+        withText={!showCodeType}
+      />
     </div>
   )
 }
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx
deleted file mode 100644
index 3036e5266..000000000
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client"
-import { useIntl } from "react-intl"
-
-import IconChip from "@scandic-hotels/design-system/IconChip"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { useMyStayStore } from "@/stores/my-stay"
-
-export default function BookingCode() {
-  const intl = useIntl()
-
-  const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)
-
-  if (!bookingCode) {
-    return null
-  }
-
-  return (
-    <Typography variant="Body/Supporting text (caption)/smBold">
-      <IconChip
-        color="blue"
-        icon={<DiscountIcon color="Icon/Feedback/Information" />}
-      >
-        {intl.formatMessage(
-          {
-            id: "booking.bookingCodeWithValue",
-            defaultMessage: "<strong>Booking code</strong>: {value}",
-          },
-          {
-            value: bookingCode,
-            strong: (text) => (
-              <Typography variant="Body/Supporting text (caption)/smBold">
-                <strong>{text}</strong>
-              </Typography>
-            ),
-          }
-        )}
-      </IconChip>
-    </Typography>
-  )
-}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx
index 25e562db5..2853c593b 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx
@@ -1,12 +1,19 @@
-import BookingCode from "./BookingCode"
+import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
 import PriceDetails from "./PriceDetails"
 
 import styles from "./information.module.css"
 
 export default function BookingInformation() {
+  const { bookingCode, isCampaignRate } = useMyStayStore((state) => ({
+    bookingCode: state.bookedRoom.bookingCode,
+    isCampaignRate: state.bookedRoom.isCampaignRate,
+  }))
   return (
     <div className={styles.bookingInformation}>
-      <BookingCode />
+      <BookingCodeChip bookingCode={bookingCode} isCampaign={isCampaignRate} />
       <PriceDetails />
     </div>
   )
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts b/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
index c58ebab32..ce0f3e158 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
@@ -138,6 +138,7 @@ export function mapRoomDetails({
 
   return {
     ...booking,
+    isCampaignRate: booking.rateDefinition.isCampaignRate,
     bedType: {
       description: room?.bedType.mainBed.description ?? "",
       roomTypeCode: room?.bedType.code ?? "",
diff --git a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/index.tsx b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/index.tsx
index 4441acd3d..879bbcab8 100644
--- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/index.tsx
@@ -7,8 +7,8 @@ import { dt } from "@scandic-hotels/common/dt"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
+import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 import IconChip from "@scandic-hotels/design-system/IconChip"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -422,29 +422,10 @@ export default function BookedRoomSidePeekContent({
             </div>
           </div>
         </div>
-        {bookingCode && (
-          <Typography variant="Body/Supporting text (caption)/smBold">
-            <IconChip
-              color="blue"
-              icon={<DiscountIcon color="Icon/Feedback/Information" />}
-            >
-              {intl.formatMessage(
-                {
-                  id: "booking.bookingCodeWithValue",
-                  defaultMessage: "<strong>Booking code</strong>: {value}",
-                },
-                {
-                  value: bookingCode,
-                  strong: (text) => (
-                    <Typography variant="Body/Supporting text (caption)/smBold">
-                      <strong>{text}</strong>
-                    </Typography>
-                  ),
-                }
-              )}
-            </IconChip>
-          </Typography>
-        )}
+        <BookingCodeChip
+          bookingCode={bookingCode}
+          isCampaign={rateDefinition.isCampaignRate}
+        />
 
         <GuestDetails
           refId={refId}
diff --git a/apps/scandic-web/types/stores/my-stay.ts b/apps/scandic-web/types/stores/my-stay.ts
index 364f1ba0a..30b130071 100644
--- a/apps/scandic-web/types/stores/my-stay.ts
+++ b/apps/scandic-web/types/stores/my-stay.ts
@@ -18,6 +18,7 @@ export type Room = Omit<
   BookingConfirmation["booking"],
   "packages" | "roomPrice"
 > & {
+  isCampaignRate: boolean
   bedType: BedTypeSchema
   breakfast: Omit<BreakfastPackage, "requestedPrice"> | undefined | false
   breakfastChildren: Omit<BreakfastPackage, "requestedPrice"> | null
diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
index a1886f2a6..51c812c04 100644
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
@@ -16,7 +16,6 @@ export function RemoveBookingCodeButton() {
   return (
     <BookingCodeChip
       bookingCode={bookingCode}
-      filledIcon
       isCampaign={hasCampaignRates}
       withCloseButton={true}
       withText={false}
diff --git a/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx b/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx
index 534690eea..8b9ae4d1d 100644
--- a/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx
+++ b/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx
@@ -23,11 +23,6 @@ export const WithoutText: Story = {
   render: () => <BookingCodeChip bookingCode="ABC123" withText={false} />,
 }
 
-export const FilledIcon: Story = {
-  args: {},
-  render: () => <BookingCodeChip bookingCode="ABC123" filledIcon />,
-}
-
 export const Unavailable: Story = {
   args: {},
   render: () => <BookingCodeChip bookingCode="ABC123" isUnavailable />,
@@ -50,9 +45,7 @@ export const CampaignWithoutBookingCode: Story = {
   render: () => <BookingCodeChip isCampaign />,
 }
 
-export const CampaignFilledIcon: Story = {
+export const CampaignWithBookingCode: Story = {
   args: {},
-  render: () => (
-    <BookingCodeChip isCampaign bookingCode="SUMMER25" filledIcon />
-  ),
+  render: () => <BookingCodeChip isCampaign bookingCode="SUMMER25" />,
 }
diff --git a/packages/design-system/lib/components/BookingCodeChip/bookingCodeChip.module.css b/packages/design-system/lib/components/BookingCodeChip/bookingCodeChip.module.css
index 213c770db..fcc510747 100644
--- a/packages/design-system/lib/components/BookingCodeChip/bookingCodeChip.module.css
+++ b/packages/design-system/lib/components/BookingCodeChip/bookingCodeChip.module.css
@@ -7,6 +7,12 @@
   text-decoration: line-through;
 }
 
+.separator {
+  text-decoration: none;
+  display: inline-block;
+  margin-right: var(--Space-x05);
+}
+
 .center {
   justify-content: center;
 }
diff --git a/packages/design-system/lib/components/BookingCodeChip/index.tsx b/packages/design-system/lib/components/BookingCodeChip/index.tsx
index 4c83a9733..f7ebd610f 100644
--- a/packages/design-system/lib/components/BookingCodeChip/index.tsx
+++ b/packages/design-system/lib/components/BookingCodeChip/index.tsx
@@ -1,7 +1,6 @@
 import { useIntl } from 'react-intl'
 
 import IconChip from '../IconChip'
-import DiscountIcon from '../Icons/Nucleo/Benefits/discount-2-2'
 import FilledDiscountIcon from '../Icons/Nucleo/Benefits/FilledDiscount'
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'
@@ -17,7 +16,6 @@ type BaseBookingCodeChipProps = {
   isUnavailable?: boolean
   isCampaignUnavailable?: boolean
   withText?: boolean
-  filledIcon?: boolean
 }
 type BookingCodeChipWithoutCloseButtonProps = BaseBookingCodeChipProps & {
   withCloseButton?: false
@@ -39,106 +37,68 @@ export function BookingCodeChip({
   isCampaignUnavailable,
   isUnavailable,
   withText = true,
-  filledIcon = false,
   withCloseButton,
   onClose,
 }: BookingCodeChipProps) {
   const intl = useIntl()
 
-  if (isCampaign || isCampaignUnavailable) {
-    return (
-      <IconChip
-        color="green"
-        icon={
-          filledIcon ? (
-            <MaterialIcon
-              icon="sell"
-              color="Icon/Feedback/Success"
-              isFilled={!!filledIcon}
-            />
-          ) : (
-            <MaterialIcon icon="sell" color="Icon/Feedback/Success" />
-          )
-        }
-        className={alignCenter ? styles.center : undefined}
-      >
-        <p
-          className={cx(styles.bookingCodeChip, {
-            [styles.unavailable]: isCampaignUnavailable,
-          })}
-        >
-          <Typography variant="Body/Supporting text (caption)/smBold">
-            <strong>
-              {intl.formatMessage({
-                id: 'booking.campaign',
-                defaultMessage: 'Campaign',
-              })}
-            </strong>
-          </Typography>
-          {bookingCode && (
-            <Typography variant="Body/Supporting text (caption)/smRegular">
-              {/*eslint-disable-next-line formatjs/no-literal-string-in-jsx*/}
-              <span>∙ {bookingCode}</span>
-            </Typography>
-          )}
-        </p>
-        {withCloseButton && (
-          <IconButton
-            style="Muted"
-            theme="Inverted"
-            wrapping
-            className={styles.removeButton}
-            onPress={onClose}
-            aria-label={intl.formatMessage({
-              id: 'booking.removeBookingCode',
-              defaultMessage: 'Remove booking code',
-            })}
-          >
-            <MaterialIcon
-              icon="close"
-              size={16}
-              color="Icon/Feedback/Success"
-            />
-          </IconButton>
-        )}
-      </IconChip>
-    )
-  }
-
-  if (!bookingCode) {
+  const isCampaignRate = isCampaign || isCampaignUnavailable
+  if (!isCampaignRate && !bookingCode) {
     return null
   }
 
+  const color = isCampaignRate ? 'green' : 'blue'
+
+  const iconColor = isCampaignRate
+    ? 'Icon/Feedback/Success'
+    : 'Icon/Feedback/Information'
+
+  const isUnavailableRate = isCampaignRate
+    ? isCampaignUnavailable
+    : isUnavailable
+
+  const label = isCampaignRate
+    ? intl.formatMessage({
+        id: 'booking.campaign',
+        defaultMessage: 'Campaign',
+      })
+    : intl.formatMessage({
+        id: 'booking.bookingCode',
+        defaultMessage: 'Booking code',
+      })
+
+  const icon = isCampaignRate ? (
+    <MaterialIcon icon="sell" color={iconColor} isFilled={false} size={20} />
+  ) : (
+    <FilledDiscountIcon fill={iconColor} size={20} />
+  )
+
   return (
     <IconChip
-      color="blue"
-      icon={
-        filledIcon ? (
-          <FilledDiscountIcon fill="Icon/Feedback/Information" />
-        ) : (
-          <DiscountIcon color="Icon/Feedback/Information" />
-        )
-      }
+      color={color}
+      icon={icon}
       className={alignCenter ? styles.center : undefined}
     >
       <p
         className={cx(styles.bookingCodeChip, {
-          [styles.unavailable]: isUnavailable,
+          [styles.unavailable]: isUnavailableRate,
         })}
       >
         {withText && (
           <Typography variant="Body/Supporting text (caption)/smBold">
-            <strong>
-              {intl.formatMessage({
-                id: 'booking.bookingCode',
-                defaultMessage: 'Booking code',
-              })}
-            </strong>
+            <strong>{label}</strong>
+          </Typography>
+        )}
+
+        {bookingCode && (
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <span>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {withText && <span className={styles.separator}>∙</span>}
+              {bookingCode}
+            </span>
           </Typography>
         )}
-        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <span>{bookingCode}</span>
-        </Typography>
       </p>
       {withCloseButton && (
         <IconButton
@@ -152,11 +112,7 @@ export function BookingCodeChip({
             defaultMessage: 'Remove booking code',
           })}
         >
-          <MaterialIcon
-            icon="close"
-            size={16}
-            color="Icon/Feedback/Information"
-          />
+          <MaterialIcon icon="close" size={16} color={iconColor} />
         </IconButton>
       )}
     </IconChip>