From 9b1b4bd40f306b626e76716028f5051b2a4c8f2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Fri, 14 Jun 2024 14:03:40 +0200
Subject: [PATCH 1/8] chore: update navigation active color

---
 components/MyPages/Sidebar/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/MyPages/Sidebar/index.tsx b/components/MyPages/Sidebar/index.tsx
index fe81ff7a1..14e1c33b2 100644
--- a/components/MyPages/Sidebar/index.tsx
+++ b/components/MyPages/Sidebar/index.tsx
@@ -21,7 +21,9 @@ export default async function Sidebar({ lang }: LangParams) {
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
-        <Title level="h5">{navigation.title}</Title>
+        <Title textTransform="regular" level="h5">
+          {navigation.title}
+        </Title>
         {navigation.menuItems.map((menuItem, idx) => (
           <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
             <Divider color="peach" />

From 469f97dee55d4859f0d82eb2c6965688a7d9208f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Fri, 14 Jun 2024 14:21:55 +0200
Subject: [PATCH 2/8] chore: update background color for shortcuts and current
 level benefits

---
 .../MyPages/Blocks/Benefits/CurrentLevel/current.module.css     | 2 +-
 components/MyPages/Blocks/Shortcuts/shortcuts.module.css        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
index 0c178c192..564bd7eee 100644
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
@@ -4,7 +4,7 @@
 
 .card {
   align-items: center;
-  background-color: var(--Base-Background-Normal);
+  background-color: var(--Scandic-Opacity-White-100);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Medium);
   display: flex;
diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css
index 321611746..a82b672fb 100644
--- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css
+++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css
@@ -1,6 +1,6 @@
 .links {
   display: grid;
-  background-color: var(--Scandic-Brand-Warm-White);
+  background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-Medium);
   border: 1px solid var(--Base-Border-Subtle);
 }

From 81c7a60effe6819b648006d4e3e0ad18cd2675ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Fri, 14 Jun 2024 15:21:37 +0200
Subject: [PATCH 3/8] chore: update loyalty level table

---
 components/Icons/icon.module.css                         | 5 +++++
 components/Icons/variants.ts                             | 1 +
 .../OverviewTable/BenefitCard/benefitCard.module.css     | 4 ++--
 .../OverviewTable/BenefitList/benefitList.module.css     | 1 -
 .../DynamicContent/OverviewTable/BenefitValue/index.tsx  | 2 +-
 .../DynamicContent/OverviewTable/LargeTable/index.tsx    | 2 +-
 .../OverviewTable/LargeTable/largeTable.module.css       | 9 ---------
 .../Blocks/DynamicContent/OverviewTable/data/EN.json     | 8 ++++----
 .../OverviewTable/overviewTable.module.css               | 1 -
 9 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css
index 58c5db266..7c02f14a6 100644
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -17,6 +17,11 @@
   fill: var(--UI-Grey-80);
 }
 
+.green,
+.green * {
+  fill: var(--UI-Green-60);
+}
+
 .pale,
 .pale * {
   fill: var(--Scandic-Brand-Pale-Peach);
diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts
index a8534eb20..e39422ece 100644
--- a/components/Icons/variants.ts
+++ b/components/Icons/variants.ts
@@ -12,6 +12,7 @@ const config = {
       peach80: styles.peach80,
       primaryLightOnSurfaceAccent: styles.plosa,
       red: styles.red,
+      green: styles.green,
     },
   },
   defaultVariants: {
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
index 5a29f84b6..2079571a5 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
@@ -1,5 +1,5 @@
 .benefitCard {
-  background-color: var(--Main-Grey-White);
+  background-color: var(--Scandic-Opacity-White-100);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Small);
   color: var(--Main-Brand-Burgundy);
@@ -56,4 +56,4 @@
   .benefitComparison {
     grid-template-columns: 1fr 1fr 1fr;
   }
-}
\ No newline at end of file
+}
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
index e8f910fe8..b6cc7644e 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
@@ -8,7 +8,6 @@
 }
 
 .firstColumn {
-  background-color: var(--Main-Brand-PalePeach);
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
index 0ce0e26f7..230855883 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
@@ -11,7 +11,7 @@ export default function BenefitValue({ benefit }: BenefitValueProps) {
     return <Minus />
   }
   if (!benefit.value) {
-    return <CheckCircle height={32} width={32} />
+    return <CheckCircle height={32} width={32} color="green" />
   }
   return (
     <div className={styles.benefitValueContainer}>
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
index f85d6c2d2..24380ac66 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
@@ -16,7 +16,7 @@ import {
 export default function LargeTable({ levels }: LargeTableProps) {
   return (
     <table className={styles.table}>
-      <thead className={styles.thead}>
+      <thead>
         <tr className={styles.iconRow}>
           <th className={styles.verticalTableHeader} />
 
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
index 5805766ba..5ff824c9f 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
@@ -4,12 +4,7 @@
   color: var(--Theme-Primary-Dark-Surface-Normal);
 }
 
-.thead {
-  background-color: var(--Base-Surface-Secondary-Normal);
-}
-
 .iconRow {
-  background-color: var(--Base-Surface-Secondary-Normal);
   border-bottom: none;
   position: sticky;
   top: 0;
@@ -41,10 +36,6 @@
   text-align: center;
 }
 
-.tr:nth-child(odd) {
-  background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
-}
-
 .benefitTh {
   border: 1px solid var(--Base-Border-Subtle);
   padding: var(--Spacing-x3) var(--Spacing-x2);
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json b/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json
index 395b48f68..e5a09ce6f 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json
@@ -264,7 +264,7 @@
           "name": "Friendship boost",
           "description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
           "unlocked": true,
-          "value": "25%"
+          "value": "+25%"
         },
         {
           "name": "Early check-in when available",
@@ -341,7 +341,7 @@
           "name": "Friendship boost",
           "description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
           "unlocked": true,
-          "value": "25%"
+          "value": "+25%"
         },
         {
           "name": "Early check-in when available",
@@ -418,7 +418,7 @@
           "name": "Friendship boost",
           "description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
           "unlocked": true,
-          "value": "50%"
+          "value": "+50%"
         },
         {
           "name": "Early check-in when available",
@@ -495,7 +495,7 @@
           "name": "Friendship boost",
           "description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
           "unlocked": true,
-          "value": "50%"
+          "value": "+50%"
         },
         {
           "name": "Early check-in when available",
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
index a334d9221..41676a652 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
@@ -1,5 +1,4 @@
 .container {
-  background-color: var(--Main-Brand-PalePeach);
   margin-top: calc(var(--Spacing-x2) * -1);
   margin-left: calc(var(--Spacing-x2) * -1);
   margin-right: calc(var(--Spacing-x2) * -1);

From 401b019f4100eda1aca1e4fc81a02fc6b0e12f5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 19 Jun 2024 10:34:05 +0200
Subject: [PATCH 4/8] chore: update styling for loyalty table

---
 components/Icons/icon.module.css               |  2 +-
 .../BenefitList/benefitList.module.css         |  1 -
 .../BenefitValue/benefitValue.module.css       | 14 +++++++-------
 .../OverviewTable/BenefitValue/index.tsx       |  2 +-
 .../LargeTable/largeTable.module.css           | 18 +++++++++---------
 .../LevelSummary/levelSummary.module.css       |  8 ++++----
 .../OverviewTable/overviewTable.module.css     |  2 ++
 7 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css
index 7c02f14a6..336a409a1 100644
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -19,7 +19,7 @@
 
 .green,
 .green * {
-  fill: var(--UI-Green-60);
+  fill: var(--Scandic-Green-50);
 }
 
 .pale,
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
index b6cc7644e..2c0d01c4b 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
@@ -17,7 +17,6 @@
 }
 
 .secondColumn {
-  background-color: var(--Base-Background-Normal);
   position: absolute;
   position: absolute;
   top: 0;
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
index 8d9bc24f1..8b4b58193 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
@@ -2,18 +2,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Spacing-x-half);
+  padding: 0 1rem 0 1rem;
+  text-wrap: balance;
 }
 
 .benefitValue {
-  background-color: var(--Main-Brand-Burgundy);
-  border-radius: var(--Corner-radius-xLarge);
-  color: var(--Base-Surface-Primary-Hover-alt, #fff);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
 }
 
 .benefitValueDetails {
-  font-size: var(--typography-Caption-Regular-fontSize);
+  font-size: var(--typography-Footnote-Regular-fontSize);
   text-align: center;
+  color: var(--UI-Grey-80);
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
index 230855883..052c80dca 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
@@ -8,7 +8,7 @@ import { BenefitValueProps } from "@/types/components/loyalty/blocks"
 
 export default function BenefitValue({ benefit }: BenefitValueProps) {
   if (!benefit.unlocked) {
-    return <Minus />
+    return <Minus color="var(--UI-Grey-40)" />
   }
   if (!benefit.value) {
     return <CheckCircle height={32} width={32} color="green" />
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
index 5ff824c9f..efa58457b 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
@@ -1,7 +1,8 @@
 .table {
-  border: 1px solid var(--Base-Border-Subtle);
+  border: none;
   border-collapse: collapse;
-  color: var(--Theme-Primary-Dark-Surface-Normal);
+  background-color: var(--Scandic-Opacity-White-100);
+  border-radius: var(--Corner-radius-Medium);
 }
 
 .iconRow {
@@ -16,14 +17,10 @@
 }
 
 .iconTh {
-  border: 1px solid var(--Base-Border-Subtle);
-  border-bottom: none;
-  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x2);
 }
 
 .summaryTh {
-  border: 1px solid var(--Base-Border-Subtle);
-  border-top: none;
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: 400;
   padding: 0 var(--Spacing-x3) var(--Spacing-x2);
@@ -31,13 +28,16 @@
 }
 
 .td {
-  border: 1px solid var(--Base-Border-Subtle);
+  border: 1px solid var(--Scandic-Brand-Pale-Peach);
+  border-left: none;
+  border-right: none;
   font-size: var(--typography-Footnote-Regular-fontSize);
   text-align: center;
 }
 
 .benefitTh {
-  border: 1px solid var(--Base-Border-Subtle);
+  border: 1px solid var(--Scandic-Brand-Pale-Peach);
+  border-right: none;
   padding: var(--Spacing-x3) var(--Spacing-x2);
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: 400;
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
index 7f23901ab..21aa5972d 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
@@ -2,13 +2,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x3);
 }
 
 .levelRequirements {
-  background-color: var(--Main-Brand-Burgundy);
   border-radius: var(--Corner-radius-Medium);
-  color: var(--Scandic-Brand-Pale-Peach);
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  color: var(--Scandic-Peach-80);
   padding: var(--Spacing-x-half) var(--Spacing-x1);
 }
 
@@ -27,4 +27,4 @@
   .levelSummaryText {
     font-size: var(--typography-Caption-Regular-fontSize);
   }
-}
\ No newline at end of file
+}
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
index 41676a652..d8d3c2df1 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
@@ -31,6 +31,7 @@
 .columns {
   display: none;
   position: relative;
+  background-color: var(--Scandic-Opacity-White-100);
 }
 
 .mobileColumns {
@@ -39,6 +40,7 @@
   margin: 0 calc(var(--Spacing-x2) * -1);
   padding-top: var(--Spacing-x2);
   position: relative;
+  background-color: var(--Scandic-Opacity-White-100);
 }
 
 .columnHeaderContainer {

From edb45b4ac7ee3bb3a0b1d98584ad22f35d901fd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 19 Jun 2024 13:50:37 +0200
Subject: [PATCH 5/8] chore: update colors to new design

---
 .../MyPages/Blocks/Overview/Stats/NextLevel/index.tsx |  4 ++--
 .../MyPages/Blocks/Overview/Stats/Points/index.tsx    |  8 ++++----
 components/MyPages/Blocks/Overview/Stats/index.tsx    |  2 +-
 .../currentPointsBalance.module.css                   |  2 +-
 .../Points/EarnAndBurn/Desktop/desktop.module.css     |  9 +++++----
 .../EmptyUpcomingStays/emptyUpcomingStays.module.css  | 11 ++++++-----
 .../Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx |  4 ++--
 .../EmptyUpcomingStays/emptyUpcomingStays.module.css  |  7 ++++---
 .../Stays/Upcoming/EmptyUpcomingStays/index.tsx       |  6 +++---
 components/MyPages/Sidebar/index.tsx                  |  2 +-
 .../TempDesignSystem/Divider/divider.module.css       |  8 ++++++++
 components/TempDesignSystem/Divider/variants.ts       |  2 ++
 components/TempDesignSystem/Link/link.module.css      |  2 +-
 components/TempDesignSystem/Text/Body/body.module.css |  6 +++++-
 components/TempDesignSystem/Text/Body/variants.ts     |  1 +
 .../TempDesignSystem/Text/Title/title.module.css      |  4 ++++
 components/TempDesignSystem/Text/Title/variants.ts    |  1 +
 17 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx b/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
index 13a5de384..056ecf5f3 100644
--- a/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
@@ -33,12 +33,12 @@ export default async function NextLevel({
   }
   return (
     <section>
-      <Body color="pale" textAlign="center">
+      <Body color="white" textAlign="center">
         {formatMessage({ id: "Next level" })}:
       </Body>
       <Title
         className={styles.nextLevel}
-        color="pale"
+        color="white"
         level="h3"
         textAlign="center"
       >
diff --git a/components/MyPages/Blocks/Overview/Stats/Points/index.tsx b/components/MyPages/Blocks/Overview/Stats/Points/index.tsx
index 6a9260865..5f55bca7b 100644
--- a/components/MyPages/Blocks/Overview/Stats/Points/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/Points/index.tsx
@@ -13,19 +13,19 @@ export default async function Points({ user }: UserProps) {
   return (
     <section className={styles.points}>
       <article>
-        <Body color="pale" textAlign="center">
+        <Body color="white" textAlign="center">
           {formatMessage({ id: "Total Points" })}
         </Body>
-        <Title color="pale" level="h2" textAlign="center">
+        <Title color="white" level="h2" textAlign="center">
           {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>
       <article>
-        <Body color="pale" textAlign="center">
+        <Body color="white" textAlign="center">
           {formatMessage({ id: "Points until next level" })}
           {/* TODO */}
         </Body>
-        <Title color="pale" level="h2" textAlign="center">
+        <Title color="white" level="h2" textAlign="center">
           {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>
diff --git a/components/MyPages/Blocks/Overview/Stats/index.tsx b/components/MyPages/Blocks/Overview/Stats/index.tsx
index 6d6ed585e..9be45ac3a 100644
--- a/components/MyPages/Blocks/Overview/Stats/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/index.tsx
@@ -12,7 +12,7 @@ export default function Stats({ user, lang }: UserProps & LangParams) {
   return (
     <section className={styles.stats}>
       <Points user={user} />
-      <Divider variant="default" color="peach" />
+      <Divider variant="default" color="white" />
       <NextLevel user={user} lang={lang} />
     </section>
   )
diff --git a/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css b/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
index d79aea9a8..45d8eaab7 100644
--- a/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
+++ b/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
@@ -1,5 +1,5 @@
 .card {
-  background-color: var(--Main-Grey-10);
+  background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-xLarge);
   color: var(--Main-Brand-Burgundy);
   display: flex;
diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css
index 987c60642..5eeae3c50 100644
--- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css
@@ -9,9 +9,10 @@
 }
 
 .thead {
-  background-color: var(--Main-Grey-10);
-  border-left: 1px solid var(--Main-Grey-10);
-  border-right: 1px solid var(--Main-Grey-10);
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  border-left: 1px solid var(--Scandic-Brand-Pale-Peach);
+  border-right: 1px solid var(--Scandic-Brand-Pale-Peach);
+  color: var(--Main-Brand-Burgundy);
 }
 
 .th {
@@ -23,7 +24,7 @@
   width: 100%;
   padding: 24px;
   text-align: center;
-  border: 1px solid var(--Main-Grey-10);
+  border: 1px solid var(--Scandic-Brand-Pale-Peach);
 }
 
 @media screen and (min-width: 768px) {
diff --git a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
index 1f3405c94..941f3be5e 100644
--- a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
+++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
@@ -1,17 +1,18 @@
 .container {
   align-items: center;
-  background-color: var(--Scandic-Brand-Warm-White);
+  background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-Medium);
   display: flex;
-  flex-direction: column;
   gap: var(--Spacing-x3);
+  flex-direction: column;
   justify-content: center;
-  margin-bottom: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x-half);
   min-height: 250px;
   padding: var(--Spacing-x0) var(--Spacing-x3);
 }
 
-.grayTitle {
-  color: var(--UI-Grey-60);
+.burgundyTitle {
+  color: var(--Scandic-Brand-Burgundy);
   display: block;
+  text-align: center;
 }
diff --git a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
index a56316559..e5403a1a1 100644
--- a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
+++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
@@ -9,9 +9,9 @@ export default async function EmptyUpcomingStaysBlock() {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
-      <Title as="h5" level="h3">
+      <Title as="h5" level="h3" color="red">
         {formatMessage({ id: "You have no upcoming stays." })}
-        <span className={styles.grayTitle}>
+        <span className={styles.burgundyTitle}>
           {" "}
           {formatMessage({ id: "Where should you go next?" })}
         </span>
diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
index 4e5b39326..941f3be5e 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
+++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
@@ -1,6 +1,6 @@
 .container {
   align-items: center;
-  background-color: var(--some-grey-color, #f2f2f2);
+  background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-Medium);
   display: flex;
   gap: var(--Spacing-x3);
@@ -11,7 +11,8 @@
   padding: var(--Spacing-x0) var(--Spacing-x3);
 }
 
-.grayTitle {
-  color: var(--UI-Grey-60);
+.burgundyTitle {
+  color: var(--Scandic-Brand-Burgundy);
   display: block;
+  text-align: center;
 }
diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
index 27ed484b0..a6799c7b9 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
@@ -14,11 +14,11 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
-      <Title as="h5" level="h3">
+      <Title as="h5" level="h3" color="red">
         {formatMessage({ id: "You have no upcoming stays." })}
-        <span className={styles.grayTitle}>
+        <span className={styles.burgundyTitle}>
           {" "}
-          {formatMessage({ id: "Where should you go next?" })}
+          {formatMessage({ id: "Where will you go next?" })}
         </span>
       </Title>
       <Button asChild intent="primary" type="button">
diff --git a/components/MyPages/Sidebar/index.tsx b/components/MyPages/Sidebar/index.tsx
index 14e1c33b2..066323457 100644
--- a/components/MyPages/Sidebar/index.tsx
+++ b/components/MyPages/Sidebar/index.tsx
@@ -26,7 +26,7 @@ export default async function Sidebar({ lang }: LangParams) {
         </Title>
         {navigation.menuItems.map((menuItem, idx) => (
           <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
-            <Divider color="peach" />
+            <Divider color="beige" />
             <ul className={styles.list}>
               {menuItem.links.map((link) => (
                 <li key={link.uid}>
diff --git a/components/TempDesignSystem/Divider/divider.module.css b/components/TempDesignSystem/Divider/divider.module.css
index c4dfba6e4..54eb49731 100644
--- a/components/TempDesignSystem/Divider/divider.module.css
+++ b/components/TempDesignSystem/Divider/divider.module.css
@@ -17,6 +17,14 @@
   border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider);
 }
 
+.beige {
+  border-bottom-color: var(--Scandic-Beige-20);
+}
+
+.white {
+  border-bottom-color: var(--Scandic-Opacity-White-100);
+}
+
 .subtle {
   border-bottom-color: var(--Base-Border-Subtle);
 }
diff --git a/components/TempDesignSystem/Divider/variants.ts b/components/TempDesignSystem/Divider/variants.ts
index 8a5564fcf..2bb604bf5 100644
--- a/components/TempDesignSystem/Divider/variants.ts
+++ b/components/TempDesignSystem/Divider/variants.ts
@@ -7,6 +7,8 @@ export const dividerVariants = cva(styles.divider, {
     color: {
       burgundy: styles.burgundy,
       peach: styles.peach,
+      beige: styles.beige,
+      white: styles.white,
       subtle: styles.subtle,
     },
     opacity: {
diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
index 92006940c..84fcf30be 100644
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -83,7 +83,7 @@
 }
 
 .activeSidebar {
-  background-color: var(--Scandic-Brand-Pale-Peach);
+  background-color: var(--Scandic-Peach-20);
 }
 
 .black {
diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css
index 6d739f00c..29bec1c5b 100644
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -56,4 +56,8 @@
 
 .red {
   color: var(--Scandic-Brand-Scandic-Red);
-}
\ No newline at end of file
+}
+
+.white {
+  color: var(--Scandic-Opacity-White-100);
+}
diff --git a/components/TempDesignSystem/Text/Body/variants.ts b/components/TempDesignSystem/Text/Body/variants.ts
index 5b4bb2ff4..b2c6c3c93 100644
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -9,6 +9,7 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
       red: styles.red,
+      white: styles.white,
     },
     textAlign: {
       center: styles.textAlignCenter,
diff --git a/components/TempDesignSystem/Text/Title/title.module.css b/components/TempDesignSystem/Text/Title/title.module.css
index 9040a0cab..4cdd268ed 100644
--- a/components/TempDesignSystem/Text/Title/title.module.css
+++ b/components/TempDesignSystem/Text/Title/title.module.css
@@ -107,3 +107,7 @@
 .red {
   color: var(--Scandic-Brand-Scandic-Red);
 }
+
+.white {
+  color: var(--Scandic-Opacity-White-100);
+}
diff --git a/components/TempDesignSystem/Text/Title/variants.ts b/components/TempDesignSystem/Text/Title/variants.ts
index a0fbd2bad..641394ceb 100644
--- a/components/TempDesignSystem/Text/Title/variants.ts
+++ b/components/TempDesignSystem/Text/Title/variants.ts
@@ -10,6 +10,7 @@ const config = {
       pale: styles.pale,
       peach80: styles.peach80,
       red: styles.red,
+      white: styles.white,
     },
     textAlign: {
       center: styles.center,

From 74001fe76460ec27142285c0e0c3c89db7d08e46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 19 Jun 2024 15:00:53 +0200
Subject: [PATCH 6/8] refactor: remove unused code

---
 .../BenefitList/benefitList.module.css        | 33 -------------------
 .../OverviewTable/BenefitList/index.tsx       |  2 --
 .../BenefitValue/benefitValue.module.css      |  2 +-
 .../LargeTable/largeTable.module.css          |  4 +--
 .../OverviewTable/overviewTable.module.css    |  1 -
 5 files changed, 3 insertions(+), 39 deletions(-)

diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
index 2c0d01c4b..1b008ba50 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
@@ -7,41 +7,8 @@
   padding-top: 0;
 }
 
-.firstColumn {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 50%;
-  z-index: 1;
-}
-
-.secondColumn {
-  position: absolute;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin-bottom: calc(var(--Spacing-x2) * -1);
-  left: 50%;
-  right: 0;
-  z-index: 1;
-  border-top-left-radius: var(--Corner-radius-Medium);
-}
-
 @media screen and (min-width: 950px) {
   .benefitCardWrapper {
     grid-column: 1/4;
   }
-
-  .firstColumn {
-    width: calc((100%) / 3);
-    right: calc(100% / 3 * 2);
-    margin-left: 0;
-  }
-
-  .secondColumn {
-    width: calc(100% / 3);
-    left: calc(100% / 3);
-    right: calc(100% / 3);
-  }
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx
index 6e3fb3c86..d60dfcf9b 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx
@@ -24,8 +24,6 @@ export default function BenefitList({ levels }: BenefitListProps) {
       const levelBenefits = levels.map((level) => level.benefits[idx])
       return (
         <div key={benefit.name} className={styles.benefitCardWrapper}>
-          <div className={styles.firstColumn} />
-          <div className={styles.secondColumn} />
           <BenefitCard
             title={benefit.name}
             description={benefit.description}
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
index 8b4b58193..c72e3dd7f 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   gap: var(--Spacing-x-half);
-  padding: 0 1rem 0 1rem;
+  padding: 0 var(--Spacing-x4) 0 var(--Spacing-x4);
   text-wrap: balance;
 }
 
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
index efa58457b..b25cc79a5 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
@@ -28,7 +28,7 @@
 }
 
 .td {
-  border: 1px solid var(--Scandic-Brand-Pale-Peach);
+  border: 1px solid var(--Scandic-Beige-20);
   border-left: none;
   border-right: none;
   font-size: var(--typography-Footnote-Regular-fontSize);
@@ -36,7 +36,7 @@
 }
 
 .benefitTh {
-  border: 1px solid var(--Scandic-Brand-Pale-Peach);
+  border: 1px solid var(--Scandic-Beige-20);
   border-right: none;
   padding: var(--Spacing-x3) var(--Spacing-x2);
   font-size: var(--typography-Caption-Regular-fontSize);
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
index d8d3c2df1..951e3cdb8 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
@@ -66,7 +66,6 @@
 }
 
 .columnHeader:nth-child(2) {
-  background-color: var(--Base-Background-Normal);
   padding-left: var(--Spacing-x1);
   border-top-left-radius: var(--Corner-radius-Medium);
 }

From b5dc941b2ea7c66beaf814eff5f58c1c96f50466 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 19 Jun 2024 15:09:10 +0200
Subject: [PATCH 7/8] fix: remove border from left side

---
 .../OverviewTable/LargeTable/largeTable.module.css               | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
index b25cc79a5..abe5ca6bd 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
@@ -38,6 +38,7 @@
 .benefitTh {
   border: 1px solid var(--Scandic-Beige-20);
   border-right: none;
+  border-left: none;
   padding: var(--Spacing-x3) var(--Spacing-x2);
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: 400;

From deadb003df97b620c9058be02d2814226f6433a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 19 Jun 2024 16:29:05 +0200
Subject: [PATCH 8/8] refactor: change border structure

---
 .../OverviewTable/LargeTable/largeTable.module.css     | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
index abe5ca6bd..3b163d989 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
@@ -28,17 +28,15 @@
 }
 
 .td {
-  border: 1px solid var(--Scandic-Beige-20);
-  border-left: none;
-  border-right: none;
+  border-top: 1px solid var(--Scandic-Beige-20);
+  border-bottom: 1px solid var(--Scandic-Beige-20);
   font-size: var(--typography-Footnote-Regular-fontSize);
   text-align: center;
 }
 
 .benefitTh {
-  border: 1px solid var(--Scandic-Beige-20);
-  border-right: none;
-  border-left: none;
+  border-top: 1px solid var(--Scandic-Beige-20);
+  border-bottom: 1px solid var(--Scandic-Beige-20);
   padding: var(--Spacing-x3) var(--Spacing-x2);
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: 400;