diff --git a/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx b/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx
index 922e007bf..e19510ec0 100644
--- a/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx
+++ b/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx
@@ -1,11 +1,8 @@
 import SurpriseIcon from "@scandic-hotels/design-system/Icons/SurpriseIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import ButtonLink from "@/components/ButtonLink"
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 
 import styles from "./joinScandicFriends.module.css"
@@ -44,53 +41,44 @@ export default async function JoinScandicFriends({
         <div className={styles.textContent}>
           {show_header ? (
             <header className={styles.header}>
-              <div>
-                <BiroScript
-                  color="red"
-                  type="two"
-                  tilted="small"
-                  className={styles.scriptedText}
-                >
-                  {content.scripted_top_title}
-                </BiroScript>
-              </div>
-              <Title level="h2" as="h4">
-                {content.title}
-              </Title>
+              {content.scripted_top_title ? (
+                <Typography variant="Title/Decorative/md">
+                  <span className={styles.scriptedText}>
+                    {content.scripted_top_title}
+                  </span>
+                </Typography>
+              ) : null}
+              <Typography variant="Title/xs">
+                <h2 className={styles.heading}>{content.title}</h2>
+              </Typography>
             </header>
           ) : null}
 
-          <Body>{content.preamble}</Body>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>{content.preamble}</p>
+          </Typography>
 
           {show_usp && usp.length ? (
             <ul className={styles.usp}>
               {usp.map((uspBullet) => (
-                <Body asChild key={uspBullet}>
+                <Typography key={uspBullet} variant="Body/Paragraph/mdRegular">
                   <li>{uspBullet}</li>
-                </Body>
+                </Typography>
               ))}
             </ul>
           ) : null}
         </div>
         {content.has_primary_button ? (
-          <div className={styles.buttonContainer}>
-            <Button
-              theme="base"
-              intent="primary"
-              size="small"
-              fullWidth
-              asChild
-            >
-              <Link
-                href={primary_button.href}
-                target={primary_button.openInNewTab ? "_blank" : undefined}
-                color="none"
-                size="regular"
-              >
-                {primary_button.title}
-              </Link>
-            </Button>
-          </div>
+          <ButtonLink
+            variant="Primary"
+            size="Small"
+            href={primary_button.href}
+            target={primary_button.openInNewTab ? "_blank" : undefined}
+            typography="Body/Supporting text (caption)/smBold"
+            className={styles.primaryButton}
+          >
+            {primary_button.title}
+          </ButtonLink>
         ) : null}
       </div>
     </div>
diff --git a/apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css b/apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
index d2cf6e507..4df44213e 100644
--- a/apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
+++ b/apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
@@ -1,14 +1,14 @@
 .container {
   border-radius: var(--Corner-radius-lg);
-  background-color: var(--Main-Brand-WarmWhite);
-  padding: 0 var(--Spacing-x2);
+  background-color: var(--Surface-Primary-OnSurface-Default);
+  padding: 0 var(--Space-x2);
   display: flex;
-  gap: var(--Spacing-x5);
+  gap: var(--Space-x5);
 }
 
 @media screen and (min-width: 900px) {
   .container {
-    padding: 0 var(--Spacing-x4) 0 0;
+    padding: 0 var(--Space-x4) 0 0;
   }
 }
 
@@ -18,38 +18,51 @@
 
 @media screen and (min-width: 900px) {
   .iconContainer {
-    flex: 0 1 384;
+    flex: 0 1 337px;
     display: flex; /* gets rid of whitespace */
   }
 }
+@media screen and (min-width: 1367px) {
+  .iconContainer {
+    flex-basis: 367px;
+  }
+}
 
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
-  padding: var(--Spacing-x3) 0;
+  gap: var(--Space-x3);
+  padding: var(--Space-x3) 0;
   flex: 1;
 }
 
 .textContent {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
+  color: var(--Text-Default);
 }
 
 .header {
   display: grid;
-  gap: var(--Spacing-x-quarter);
+  gap: var(--Space-x025);
 }
 
 .scriptedText {
-  display: inline-block;
+  transform: rotate(-3deg);
+  color: var(--Text-Accent-Primary);
+  transform-origin: bottom left;
+  margin-top: var(--Space-x3);
+}
+
+.heading {
+  color: var(--Text-Heading);
 }
 
 .usp {
   list-style: none;
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 @media screen and (min-width: 768px) {
@@ -57,7 +70,7 @@
     grid-template-rows: repeat(3, auto);
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: column;
-    padding: var(--Spacing-x-one-and-half) 0;
+    padding: var(--Space-x15) 0;
   }
 }
 
@@ -77,7 +90,7 @@
 
 .usp li {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .usp li:before {
@@ -86,9 +99,7 @@
   top: 3px;
 }
 
-@media screen and (min-width: 768px) {
-  .buttonContainer {
-    display: flex;
-    width: 180px;
-  }
+.primaryButton {
+  min-width: 180px;
+  width: fit-content;
 }
