diff --git a/components/Icons/ArrowRight.tsx b/components/Icons/ArrowRight.tsx
index a4d4f955d..5f05e5f09 100644
--- a/components/Icons/ArrowRight.tsx
+++ b/components/Icons/ArrowRight.tsx
@@ -5,6 +5,8 @@ import type { IconProps } from "@/types/components/icon"
 export default function ArrowRightIcon({
   className,
   color,
+  height = "25",
+  width = "24",
   ...props
 }: IconProps) {
   const classNames = iconVariants({ className, color })
@@ -12,9 +14,9 @@ export default function ArrowRightIcon({
     <svg
       className={classNames}
       fill="none"
-      height="25"
+      height={height}
       viewBox="0 0 24 25"
-      width="24"
+      width={width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
diff --git a/components/Icons/Email.tsx b/components/Icons/Email.tsx
index e72efd751..8915e3991 100644
--- a/components/Icons/Email.tsx
+++ b/components/Icons/Email.tsx
@@ -2,15 +2,21 @@ import { iconVariants } from "./variants"
 
 import type { IconProps } from "@/types/components/icon"
 
-export default function EmailIcon({ className, color, ...props }: IconProps) {
+export default function EmailIcon({
+  className,
+  color,
+  width = "20",
+  height = "20",
+  ...props
+}: IconProps) {
   const classNames = iconVariants({ className, color })
   return (
     <svg
       className={classNames}
       fill="none"
-      height="20"
+      height={height}
       viewBox="0 0 20 20"
-      width="20"
+      width={width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
diff --git a/components/Icons/Phone.tsx b/components/Icons/Phone.tsx
index 11dcf769e..1dd1c960e 100644
--- a/components/Icons/Phone.tsx
+++ b/components/Icons/Phone.tsx
@@ -2,15 +2,21 @@ import { iconVariants } from "./variants"
 
 import type { IconProps } from "@/types/components/icon"
 
-export default function PhoneIcon({ className, color, ...props }: IconProps) {
+export default function PhoneIcon({
+  className,
+  color,
+  height = "24",
+  width = "24",
+  ...props
+}: IconProps) {
   const classNames = iconVariants({ className, color })
   return (
     <svg
       className={classNames}
       fill="none"
-      height="24"
+      height={height}
       viewBox="0 0 24 24"
-      width="24"
+      width={width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
index df306b82a..200114143 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useParams } from "next/navigation"
+import { notFound, useParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
@@ -15,7 +15,8 @@ import {
   NewFriend,
   TrueFriend,
 } from "@/components/Levels"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import levelsData from "./data"
@@ -45,7 +46,7 @@ export default function LoyaltyLevels() {
 }
 
 function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
-  const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
+  const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "Points" })} `
   const qualifications = level.requiredNights
     ? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
     : pointsString
@@ -73,20 +74,40 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
     case 7:
       Level = BestFriend
       break
+    default: {
+      const loyaltyLevel = level.level as never
+      console.error(`Unsupported loyalty level given: ${loyaltyLevel}`)
+      notFound()
+    }
   }
   return (
     <article className={styles.card}>
-      <Title className={styles.levelHeading} level="h4">
-        {level.level}
+      <section>
+        <BiroScript
+          type="two"
+          color="primaryLightOnSurfaceAccent"
+          tilted="large"
+        >
+          {formatMessage({ id: "Level" })} {level.level}
+        </BiroScript>
+        <Level color="red" />
+      </section>
+      <Title textAlign="center" level="h5">
+        {qualifications}
       </Title>
-      {Level ? <Level color="primaryLightOnSurfaceAccent" /> : null}
       <div className={styles.textContainer}>
-        <Body textTransform="bold">{qualifications}</Body>
         {level.benefits.map((benefit) => (
-          <Body key={benefit.title} textAlign="center">
-            <CheckIcon className={styles.checkIcon} />
+          <Footnote
+            key={benefit.title}
+            textAlign="center"
+            color="textMediumContrast"
+          >
+            <CheckIcon
+              className={styles.checkIcon}
+              color="primaryLightOnSurfaceAccent"
+            />
             {benefit.title}
-          </Body>
+          </Footnote>
         ))}
       </div>
     </article>
diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
index 9cb5c7cc8..4289e5b83 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
 .cardContainer {
   display: grid;
   gap: var(--Spacing-x2);
@@ -20,37 +15,30 @@
 }
 
 .card {
-  align-content: flex-start;
-  background-color: var(--UI-Grey-10);
+  background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-xLarge);
   display: grid;
   gap: var(--Spacing-x2);
+  min-height: 280px;
   justify-content: center;
   justify-items: center;
   padding: var(--Spacing-x5) var(--Spacing-x1);
 }
 
-.levelHeading {
-  color: var(--Scandic-Peach-70);
-}
-
 .textContainer {
-  align-content: flex-start;
-  display: grid;
+  align-content: flex-end;
+  display: flex;
   gap: var(--Spacing-x-one-and-half);
+  width: 100%;
+  flex-wrap: wrap;
   justify-content: center;
-  justify-items: center;
 }
 
 .checkIcon {
-  vertical-align: text-bottom;
+  vertical-align: middle;
 }
 
 @media screen and (min-width: 1367px) {
-  .container {
-    gap: var(--Spacing-x4);
-  }
-
   .cardContainer {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
diff --git a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
index 9e29ee377..3dc5d411b 100644
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
@@ -1,5 +1,5 @@
-.icon,
-.icon * {
-  fill: var(--Scandic-Brand-Burgundy);
-  margin-bottom: var(--Spacing-x-half);
+.link {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
 }
diff --git a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
index fef04c911..827153aa1 100644
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
@@ -1,7 +1,9 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import { EmailIcon, PhoneIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getValueFromContactConfig } from "@/utils/contactConfig"
 
 import styles from "./contactRow.module.css"
@@ -27,15 +29,29 @@ export default async function ContactRow({ contact }: ContactRowProps) {
     Icon = PhoneIcon
   }
 
+  let openableLink = val
+  if (contact.contact_field.includes("email")) {
+    openableLink = `mailto:${val}`
+  } else if (contact.contact_field.includes("phone")) {
+    openableLink = `tel:${val}`
+  }
+
   return (
     <div>
-      {Icon ? <Icon className={styles.icon} /> : null}
-      <Body color="burgundy" textAlign="center" textTransform="bold">
+      <Body color="burgundy" textTransform="bold">
         {contact.display_text}
       </Body>
-      <Body color="burgundy" textAlign="center">
+      <Link
+        className={styles.link}
+        href={openableLink}
+        variant="myPage"
+        color="burgundy"
+        size="small"
+      >
+        {Icon ? <Icon width="20" height="20" color="burgundy" /> : null}
         {val}
-      </Body>
+      </Link>
+      <Footnote color="burgundy">{contact.footnote}</Footnote>
     </div>
   )
 }
diff --git a/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css b/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
index c6045fcf2..55234e9d2 100644
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
@@ -4,14 +4,12 @@
 
 @media screen and (min-width: 1367px) {
   .contactContainer {
-    align-items: center;
     border-top: 1px solid var(--UI-Grey-30);
     display: flex;
     flex-direction: column;
-    gap: var(--Spacing-x5);
+    gap: var(--Spacing-x2);
     justify-content: center;
-    padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
-    text-align: center;
+    padding-top: var(--Spacing-x2);
   }
 
   .contact {
diff --git a/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
index acb6222ed..7a05ec61f 100644
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
@@ -12,9 +12,7 @@ export default async function Contact({ contactBlock }: ContactProps) {
   const { formatMessage } = await getIntl()
   return (
     <article className={styles.contactContainer}>
-      <Subtitle textAlign="center">
-        {formatMessage({ id: "Contact us" })}
-      </Subtitle>
+      <Subtitle>{formatMessage({ id: "Contact us" })}</Subtitle>
       <section className={styles.contact}>
         {contactBlock.map(({ contact, __typename }, i) => {
           switch (__typename) {
diff --git a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
index 43e1804c6..bc4b2e2c1 100644
--- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
@@ -1,10 +1,10 @@
 import { login } from "@/constants/routes/handleAuth"
 
+import ArrowRight from "@/components/Icons/ArrowRight"
 import { ScandicFriends } from "@/components/Levels"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
@@ -21,28 +21,38 @@ export default async function JoinLoyaltyContact({
 }: JoinLoyaltyContactProps & LangParams) {
   const { formatMessage } = await getIntl()
   return (
-    <section className={styles.container}>
+    <section>
       <article className={styles.wrapper}>
         <Title as="h4" level="h3">
           {block.title}
         </Title>
-        <ScandicFriends color="primaryLightOnSurfaceAccent" />
-        {block.preamble ? (
-          <Body textAlign="center">{block.preamble}</Body>
-        ) : null}
-        <Button asChild intent="primary">
-          <Body asChild fontOnly textAlign="center" textTransform="bold">
-            <Link href={login[lang]}>
-              {formatMessage({ id: "Join Scandic Friends" })}
-            </Link>
-          </Body>
-        </Button>
-        <Footnote asChild fontOnly textAlign="center" textTransform="bold">
-          <Link color="burgundy" href={`/${lang}/login`}>
-            {formatMessage({ id: "Already a friend?" })} <br />
-            {formatMessage({ id: "Click here to log in" })}
+        <ScandicFriends color="red" />
+        {block.preamble ? <Body>{block.preamble}</Body> : null}
+        <Button asChild intent="primary" theme="base" className={styles.button}>
+          <Link href={login[lang]} color="white">
+            {formatMessage({ id: "Join Scandic Friends" })}
           </Link>
-        </Footnote>
+        </Button>
+        <section className={styles.loginContainer}>
+          <Body>{formatMessage({ id: "Already a friend?" })}</Body>
+          <span className={styles.linkWrapper}>
+            <ArrowRight
+              color="burgundy"
+              className={styles.icon}
+              height="20"
+              width="20"
+            />
+            <Link
+              className={styles.link}
+              color="burgundy"
+              href={`/${lang}/login`}
+              variant="icon"
+              size="small"
+            >
+              {formatMessage({ id: "Log in here" })}
+            </Link>
+          </span>
+        </section>
       </article>
       {block.contact ? <Contact contactBlock={block.contact} /> : null}
     </section>
diff --git a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
index b183b40da..0ed530076 100644
--- a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
@@ -1,12 +1,30 @@
-.container {
-  background-color: var(--Main-Grey-White);
+.wrapper {
   display: grid;
+  gap: var(--Spacing-x3);
+  padding-bottom: var(--Spacing-x5);
+  padding-top: var(--Spacing-x4);
 }
 
-.wrapper {
+.loginContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.button {
+  width: fit-content;
+}
+
+.linkWrapper {
   display: flex;
   align-items: center;
-  flex-direction: column;
-  gap: var(--Spacing-x5);
-  padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
-}
\ No newline at end of file
+  gap: var(--Spacing-x-half);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  align-self: center;
+}
diff --git a/components/Section/Header/index.tsx b/components/Section/Header/index.tsx
index 0537b526a..925deb330 100644
--- a/components/Section/Header/index.tsx
+++ b/components/Section/Header/index.tsx
@@ -16,7 +16,7 @@ export default function SectionHeader({
   return (
     <header className={styles.header}>
       <Title
-        as={topTitle ? "h2" : "h3"}
+        as={topTitle ? "h3" : "h4"}
         className={styles.title}
         level={topTitle ? "h1" : "h2"}
       >
diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx
index 32ff9d292..8c51da7aa 100644
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -1,5 +1,4 @@
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -47,7 +46,6 @@ export default function Card({
           <BiroScript className={styles.scriptedTitle} type="two">
             {scriptedTopTitle}
           </BiroScript>
-          <Divider />
         </section>
       ) : null}
       <Title as="h5" className={styles.heading} level="h3">
diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
index 84fcf30be..934db83b0 100644
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -102,6 +102,10 @@
   color: var(--Scandic-Peach-80);
 }
 
+.white {
+  color: var(--Base-Button-Primary-On-Fill-Normal);
+}
+
 .regular {
   font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);
diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts
index c943da924..cffb3dda4 100644
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -13,6 +13,7 @@ export const linkVariants = cva(styles.link, {
       none: "",
       pale: styles.pale,
       peach80: styles.peach80,
+      white: styles.white,
     },
     size: {
       small: styles.small,
diff --git a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
index 1c7cc7774..9c0ed4aaf 100644
--- a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
+++ b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
@@ -26,6 +26,14 @@
   line-height: var(--typography-Script-2-lineHeight);
 }
 
+.tiltedSmall {
+  transform: rotate(-2deg);
+}
+
+.tiltedLarge {
+  transform: rotate(-13deg) translate(0px, -15px);
+}
+
 .center {
   text-align: center;
 }
diff --git a/components/TempDesignSystem/Text/BiroScript/index.tsx b/components/TempDesignSystem/Text/BiroScript/index.tsx
index 13e0b0252..095bec4f7 100644
--- a/components/TempDesignSystem/Text/BiroScript/index.tsx
+++ b/components/TempDesignSystem/Text/BiroScript/index.tsx
@@ -10,6 +10,7 @@ export default function BiroScript({
   color,
   textAlign,
   type,
+  tilted,
   ...props
 }: BiroScriptProps) {
   const Comp = asChild ? Slot : "span"
@@ -18,6 +19,7 @@ export default function BiroScript({
     color,
     textAlign,
     type,
+    tilted,
   })
   return <Comp className={classNames} {...props} />
 }
diff --git a/components/TempDesignSystem/Text/BiroScript/variants.ts b/components/TempDesignSystem/Text/BiroScript/variants.ts
index df1bec379..570af1c0c 100644
--- a/components/TempDesignSystem/Text/BiroScript/variants.ts
+++ b/components/TempDesignSystem/Text/BiroScript/variants.ts
@@ -19,6 +19,10 @@ const config = {
       one: styles.one,
       two: styles.two,
     },
+    tilted: {
+      small: styles.tiltedSmall,
+      large: styles.tiltedLarge,
+    },
   },
   defaultVariants: {
     type: "one",
diff --git a/components/TempDesignSystem/Text/Footnote/footnote.module.css b/components/TempDesignSystem/Text/Footnote/footnote.module.css
index f9f8e044b..bf4aff206 100644
--- a/components/TempDesignSystem/Text/Footnote/footnote.module.css
+++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css
@@ -43,4 +43,8 @@
 
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
-}
\ No newline at end of file
+}
+
+.textMediumContrast {
+  color: var(--Base-Text-UI-Medium-contrast);
+}
diff --git a/components/TempDesignSystem/Text/Footnote/variants.ts b/components/TempDesignSystem/Text/Footnote/variants.ts
index d791045a6..eb2040177 100644
--- a/components/TempDesignSystem/Text/Footnote/variants.ts
+++ b/components/TempDesignSystem/Text/Footnote/variants.ts
@@ -8,6 +8,7 @@ const config = {
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
+      textMediumContrast: styles.textMediumContrast,
     },
     textAlign: {
       center: styles.center,