diff --git a/components/Sidebar/JoinLoyalty/index.tsx b/components/Sidebar/JoinLoyalty/index.tsx
index b6227579a..8929df24f 100644
--- a/components/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Sidebar/JoinLoyalty/index.tsx
@@ -32,7 +32,11 @@ export default async function JoinLoyaltyContact({
           {block.title}
         </Title>
         <ScandicFriends color="red" />
-        {block.preamble ? <Body>{block.preamble}</Body> : null}
+        {block.preamble ? (
+          <Body textAlign={null} className={styles.preamble}>
+            {block.preamble}
+          </Body>
+        ) : null}
         {block.button ? (
           <Button
             asChild
diff --git a/components/Sidebar/JoinLoyalty/joinLoyalty.module.css b/components/Sidebar/JoinLoyalty/joinLoyalty.module.css
index 23d1e2049..a7ed08a36 100644
--- a/components/Sidebar/JoinLoyalty/joinLoyalty.module.css
+++ b/components/Sidebar/JoinLoyalty/joinLoyalty.module.css
@@ -3,6 +3,11 @@
   gap: var(--Spacing-x3);
   padding-bottom: var(--Spacing-x5);
   padding-top: var(--Spacing-x4);
+  justify-items: center;
+}
+
+.preamble {
+  text-align: center;
 }
 
 .loginContainer {
@@ -22,3 +27,13 @@
 .icon {
   align-self: center;
 }
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    justify-items: start;
+  }
+
+  .preamble {
+    text-align: left;
+  }
+}
