diff --git a/app/[lang]/(live-current)/layout.tsx b/app/[lang]/(live-current)/layout.tsx
index 6e2c96d97..27915c9e3 100644
--- a/app/[lang]/(live-current)/layout.tsx
+++ b/app/[lang]/(live-current)/layout.tsx
@@ -72,7 +72,7 @@ export default function RootLayout({
         <AdobeScript />
         <VwoScript />
       </head>
-      <body>
+      <body className="theme-00Corecolours theme-X0Oldcorecolours">
         <LangPopup lang={params.lang} />
         <SkipToMainContent lang={params.lang} />
         {children}
diff --git a/components/Current/Aside/Puff/index.tsx b/components/Current/Aside/Puff/index.tsx
index bdbbfee60..f5aad9c17 100644
--- a/components/Current/Aside/Puff/index.tsx
+++ b/components/Current/Aside/Puff/index.tsx
@@ -1,4 +1,6 @@
+"use client"
 import { renderOptions } from "./renderOptions"
+import { useRouter } from "next/navigation"
 
 import Image from "@/components/Image"
 import JsonToHtml from "@/components/JsonToHtml"
@@ -7,38 +9,73 @@ import { Button } from "@scandic-hotels/design-system"
 import styles from "./puff.module.css"
 
 import type { PuffProps } from "@/types/components/current/asides/puff"
+import { PuffStyleEnum } from "@/types/requests/puff"
 
 export default function Puff({
   imageConnection,
   link,
   text,
+  puff_style,
   title,
 }: PuffProps) {
-  return (
-    <a className={styles.link} href={link.href}>
-      <article>
-        {imageConnection.edges.map((image) => (
-          <Image
-            alt={image.node.title}
-            className={styles.image}
-            height={image.node.dimension.height}
-            key={image.node.system.uid}
-            src={image.node.url}
-            width={image.node.dimension.width}
-          />
-        ))}
-        <section className={styles.content}>
-          <Button>Hej!</Button>
-          <header>
-            <h3 className={styles.heading}>{title}</h3>
-          </header>
-          <JsonToHtml
-            embeds={[]}
-            nodes={text.json.children}
-            renderOptions={renderOptions}
-          />
-        </section>
-      </article>
-    </a>
-  )
+  const router = useRouter()
+
+  switch (puff_style) {
+    case PuffStyleEnum.button:
+      function onClick() {
+        router.push(link.href)
+      }
+
+      return (
+        <article>
+          {imageConnection.edges.map((image) => (
+            <Image
+              alt={image.node.title}
+              className={styles.image}
+              height={image.node.dimension.height}
+              key={image.node.system.uid}
+              src={image.node.url}
+              width={image.node.dimension.width}
+            />
+          ))}
+          <section className={styles.content}>
+            <JsonToHtml
+              embeds={[]}
+              nodes={text.json.children}
+              renderOptions={renderOptions}
+            />
+            <div>
+              <Button onPress={onClick}>{link.title}</Button>
+            </div>
+          </section>
+        </article>
+      )
+    case PuffStyleEnum.default:
+      return (
+        <a className={styles.link} href={link.href}>
+          <article>
+            {imageConnection.edges.map((image) => (
+              <Image
+                alt={image.node.title}
+                className={styles.image}
+                height={image.node.dimension.height}
+                key={image.node.system.uid}
+                src={image.node.url}
+                width={image.node.dimension.width}
+              />
+            ))}
+            <section className={styles.content}>
+              <header>
+                <h3 className={styles.heading}>{title}</h3>
+              </header>
+              <JsonToHtml
+                embeds={[]}
+                nodes={text.json.children}
+                renderOptions={renderOptions}
+              />
+            </section>
+          </article>
+        </a>
+      )
+  }
 }
diff --git a/components/Current/Aside/Puff/puff.module.css b/components/Current/Aside/Puff/puff.module.css
index 7cad16293..862f9335f 100644
--- a/components/Current/Aside/Puff/puff.module.css
+++ b/components/Current/Aside/Puff/puff.module.css
@@ -16,8 +16,10 @@
 }
 
 .content {
+  display: grid;
   padding: 10px;
   background-color: #fff;
+  gap: 27px;
 }
 
 .heading {
@@ -38,7 +40,6 @@
   color: #333;
   line-height: 1.3;
   margin-bottom: 0;
-  padding-top: 7px;
   text-decoration: none;
 }
 
diff --git a/lib/graphql/Fragments/Puff.graphql b/lib/graphql/Fragments/Puff.graphql
index e63c3a16d..c28a46358 100644
--- a/lib/graphql/Fragments/Puff.graphql
+++ b/lib/graphql/Fragments/Puff.graphql
@@ -8,6 +8,7 @@ fragment Puff on Puff {
       }
     }
   }
+  puff_style
   link {
     href
     title
diff --git a/types/requests/puff.ts b/types/requests/puff.ts
index 48a89d5e0..1c3d6d8a8 100644
--- a/types/requests/puff.ts
+++ b/types/requests/puff.ts
@@ -2,12 +2,18 @@ import type { Image } from "../image"
 import type { Edges } from "./utils/edges"
 import type { RTEDocument } from "../rte/node"
 
+export enum PuffStyleEnum {
+  button = "button",
+  default = "default",
+}
+
 export type Puff = {
   imageConnection: Edges<Image>
   link: {
     href: string
     title: string
   }
+  puff_style: PuffStyleEnum
   text: {
     json: RTEDocument
   }
