diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json
index 5c80e7087..259eb569b 100644
--- a/apps/events-helsinki/package.json
+++ b/apps/events-helsinki/package.json
@@ -79,7 +79,7 @@
     "react-datepicker": "^8.4.0",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.1.5",
+    "react-helsinki-headless-cms": "1.2.0",
     "react-i18next": "15.6.0",
     "react-scroll": "^1.9.3",
     "react-toastify": "^11.0.5",
diff --git a/apps/hobbies-helsinki/package.json b/apps/hobbies-helsinki/package.json
index b08e2166a..b2844684b 100644
--- a/apps/hobbies-helsinki/package.json
+++ b/apps/hobbies-helsinki/package.json
@@ -79,7 +79,7 @@
     "react-datepicker": "^8.4.0",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.1.5",
+    "react-helsinki-headless-cms": "1.2.0",
     "react-i18next": "15.6.0",
     "react-scroll": "^1.9.3",
     "react-toastify": "^11.0.5",
diff --git a/apps/sports-helsinki/package.json b/apps/sports-helsinki/package.json
index 8420708b3..06674c904 100644
--- a/apps/sports-helsinki/package.json
+++ b/apps/sports-helsinki/package.json
@@ -85,7 +85,7 @@
     "react-datepicker": "^8.4.0",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.1.5",
+    "react-helsinki-headless-cms": "1.2.0",
     "react-i18next": "15.6.0",
     "react-leaflet": "4.2.1",
     "react-scroll": "^1.9.3",
diff --git a/apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx b/apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx
index b32db4e6e..5551c4f90 100644
--- a/apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx
+++ b/apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx
@@ -28,7 +28,7 @@ const VenueContent: React.FC<Props> = ({ venue, className }) => {
   const { description } = venue;
   const shortDescription = null;
   return (
-    <PageSection className={classNames(styles.eventContent, className)}>
+    <PageSection className={classNames(styles.venueContent, className)}>
       <ContentContainer>
         <div className={styles.contentWrapper}>
           <div className={styles.leftEmpty} />
@@ -54,12 +54,14 @@ const VenueContent: React.FC<Props> = ({ venue, className }) => {
               </div>
             )}
             <VenueOtherInfo venue={venue} />
-            <ShareLinks title={t('venue:shareLinks.title')} />
-            <VenueLocation venue={venue} />
           </div>
-          <aside>
+          <aside className={styles.sidebar}>
             <VenueInfo venue={venue} />
           </aside>
+          <div className={styles.secondaryContent}>
+            <ShareLinks title={t('venue:shareLinks.title')} />
+            <VenueLocation venue={venue} />
+          </div>
         </div>
       </ContentContainer>
     </PageSection>
diff --git a/apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss b/apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss
index 1fca69de8..193d4ab74 100644
--- a/apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss
+++ b/apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss
@@ -1,29 +1,67 @@
 @use '../../../styles/breakpoints' as breakpoints;
 
-.eventContent {
+.venueContent {
   --description-font-size: var(--fontsize-body-l);
   background-color: var(--color-white);
-  // margin-bottom: var(--spacing-4-xl); // Not needed when similar events are used
 
   .contentWrapper {
     display: grid;
     grid-template-columns: unset;
     position: relative;
 
-    @include breakpoints.respond-above(m) {
-      display: grid;
-      grid-template-columns: auto 2fr 1fr;
-      grid-template-rows: unset;
-    }
-
     .leftEmpty {
       padding: var(--spacing-m) calc(var(--spacing-4-xl) + 40px)
         var(--spacing-m) 0;
+    }
 
-      @include breakpoints.respond-below(m) {
+    /* 
+    When using bigger than mobile sized screen, the content order would be: 
+    1. venue description
+    2. share buttons, 
+    3. map, 
+    4. sidebar
+    5. venue events, footer, etc...
+    */
+    @include breakpoints.respond-below(m) {
+      .leftEmpty {
         position: absolute;
         padding: 0;
       }
+      .sidebar {
+        padding-top: var(--spacing-xl);
+      }
+    }
+    /* 
+    When using mobile sized screen, switch the sidebar with 
+    secondary data (location / map, share buttons...) in main content,
+    so in mobile the order would be: 
+    1. venue description
+    2. sidebar
+    3. share buttons, 
+    4. map, 
+    5. venue events, footer, etc...
+    */
+    @include breakpoints.respond-above(m) {
+      grid-template-columns: auto 2fr 1fr;
+      grid-template-rows: auto 1fr;
+
+      .mainContent  {
+        grid-column: 2;
+      }
+
+      .sidebar {
+        grid-column: 3;
+        grid-row: 1 / span 2;
+      }
+
+      .secondaryContent {
+        grid-column: 2;
+      }
+
+      .leftEmpty {
+        grid-column: 1;
+        grid-row: 1 / span 2;
+      }
     }
   }
 }
@@ -35,9 +73,9 @@
 
 .description {
   line-height: 1.5;
-  white-space: pre-line;
-  font-size: var(--description-font-size);
+
   p {
+    font-size: var(--description-font-size);
     margin: 1rem 0;
   }
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 7a67d02d5..66752ebf3 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -79,7 +79,7 @@
     "react-datepicker": "^8.4.0",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.1.5",
+    "react-helsinki-headless-cms": "1.2.0",
     "react-i18next": "15.6.0",
     "react-leaflet": "4.2.1",
     "react-toastify": "^11.0.5",
diff --git a/packages/components/src/components/domain/event/eventContent/EventContent.tsx b/packages/components/src/components/domain/event/eventContent/EventContent.tsx
index b08819883..a8d43b147 100644
--- a/packages/components/src/components/domain/event/eventContent/EventContent.tsx
+++ b/packages/components/src/components/domain/event/eventContent/EventContent.tsx
@@ -50,7 +50,7 @@ const EventContent: React.FC<Props> = ({
           )}
         >
           <div className={styles.leftEmpty} />
-          <div>
+          <div className={styles.mainContent}>
             {description && (
               <>
                 <h2 className={styles.descriptionTitle}>
@@ -84,11 +84,13 @@ const EventContent: React.FC<Props> = ({
                 )}
               </>
             )}
-            <ShareLinks title={t('event:shareLinks.title')} />
-            {!isInternetEvent && <EventLocation event={event} />}
           </div>
-          <div>
+          <aside className={styles.sidebar}>
             <EventInfo event={event} superEvent={superEvent} />
+          </aside>
+          <div className={styles.secondaryContent}>
+            <ShareLinks title={t('event:shareLinks.title')} />
+            {!isInternetEvent && <EventLocation event={event} />}
           </div>
         </div>
       </ContentContainer>
diff --git a/packages/components/src/components/domain/event/eventContent/eventContent.module.scss b/packages/components/src/components/domain/event/eventContent/eventContent.module.scss
index 5090fd77d..082789059 100644
--- a/packages/components/src/components/domain/event/eventContent/eventContent.module.scss
+++ b/packages/components/src/components/domain/event/eventContent/eventContent.module.scss
@@ -3,19 +3,12 @@
 .eventContent {
   --description-font-size: var(--fontsize-body-l);
   background-color: var(--color-white);
-  // margin-bottom: var(--spacing-4-xl); // Not needed when similar events are used
 
   .contentWrapper {
     display: grid;
     grid-template-columns: unset;
     position: relative;
 
-    @include breakpoints.respond-above(m) {
-      display: grid;
-      grid-template-columns: auto 2fr 1fr;
-      grid-template-rows: unset;
-    }
-
     &.noSimilarEvents {
       margin-bottom: 120px;
     }
@@ -23,11 +16,56 @@
     .leftEmpty {
       padding: var(--spacing-m) calc(var(--spacing-4-xl) + 40px)
         var(--spacing-m) 0;
+    }
 
-      @include breakpoints.respond-below(m) {
+    /* 
+    When using bigger than mobile sized screen, the content order would be: 
+    1. event description
+    2. share buttons, 
+    3. map, 
+    4. sidebar
+    5. other events, footer, etc...
+    */
+    @include breakpoints.respond-below(m) {
+      .leftEmpty {
         position: absolute;
         padding: 0;
       }
+      .sidebar {
+        padding-top: var(--spacing-xl);
+      }
+    }
+    /* 
+    When using mobile sized screen, switch the sidebar with 
+    secondary data (location / map, share buttons...) in main content,
+    so in mobile the order would be: 
+    1. event description
+    2. sidebar
+    3. share buttons, 
+    4. map, 
+    5. other events, footer, etc...
+    */
+    @include breakpoints.respond-above(m) {
+      grid-template-columns: auto 2fr 1fr;
+      grid-template-rows: auto 1fr;
+
+      .mainContent  {
+        grid-column: 2;
+      }
+
+      .sidebar {
+        grid-column: 3;
+        grid-row: 1 / span 2;
+      }
+
+      .secondaryContent {
+        grid-column: 2;
+      }
+
+      .leftEmpty {
+        grid-column: 1;
+        grid-row: 1 / span 2;
+      }
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 702521cde..0c9a10b02 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3171,7 +3171,7 @@ __metadata:
     react-datepicker: "npm:^8.4.0"
     react-dom: "npm:18.3.1"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.1.5"
+    react-helsinki-headless-cms: "npm:1.2.0"
     react-i18next: "npm:15.6.0"
     react-leaflet: "npm:4.2.1"
     react-toastify: "npm:^11.0.5"
@@ -13434,7 +13434,7 @@ __metadata:
     react-datepicker: "npm:^8.4.0"
     react-dom: "npm:18.3.1"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.1.5"
+    react-helsinki-headless-cms: "npm:1.2.0"
     react-i18next: "npm:15.6.0"
     react-scroll: "npm:^1.9.3"
     react-toastify: "npm:^11.0.5"
@@ -15176,7 +15176,7 @@ __metadata:
     react-datepicker: "npm:^8.4.0"
     react-dom: "npm:18.3.1"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.1.5"
+    react-helsinki-headless-cms: "npm:1.2.0"
     react-i18next: "npm:15.6.0"
     react-scroll: "npm:^1.9.3"
     react-toastify: "npm:^11.0.5"
@@ -21367,9 +21367,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helsinki-headless-cms@npm:1.1.5":
-  version: 1.1.5
-  resolution: "react-helsinki-headless-cms@npm:1.1.5"
+"react-helsinki-headless-cms@npm:1.2.0":
+  version: 1.2.0
+  resolution: "react-helsinki-headless-cms@npm:1.2.0"
   dependencies:
     classnames: "npm:^2.5.1"
     hds-design-tokens: "npm:^3.11.0"
@@ -21387,7 +21387,7 @@ __metadata:
   peerDependenciesMeta:
     "@apollo/client":
       optional: true
-  checksum: 70d44bab0690f888df83f7b090ad9d34880056390cf62a292e182bb568b568b5d91815eb74aa2e3dd6f14096fdbcc07b2e4861ec8ae8da51301023359993f7f5
+  checksum: 74218b20fd08be6a435600798fa1adb63785eadca28d7e68e483ddbea00b31678700b1481afaa574066393c1d3a29c923d84e25bfe14e0d9e3e29e7ce48f5d41
   languageName: node
   linkType: hard
 
@@ -23512,7 +23512,7 @@ __metadata:
     react-datepicker: "npm:^8.4.0"
     react-dom: "npm:18.3.1"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.1.5"
+    react-helsinki-headless-cms: "npm:1.2.0"
     react-i18next: "npm:15.6.0"
     react-leaflet: "npm:4.2.1"
     react-scroll: "npm:^1.9.3"