diff --git a/components/storyblok/StoryblokResourceConversationPage.tsx b/components/storyblok/StoryblokResourceConversationPage.tsx
index dbedf46d..8222fb59 100644
--- a/components/storyblok/StoryblokResourceConversationPage.tsx
+++ b/components/storyblok/StoryblokResourceConversationPage.tsx
@@ -2,24 +2,26 @@ import { Box, Container, Typography } from '@mui/material';
 import { ISbRichtext, storyblokEditable } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import Head from 'next/head';
-import Image from 'next/image';
 import { useEffect, useMemo, useState } from 'react';
 import { render } from 'storyblok-rich-text-react-renderer';
-import { PROGRESS_STATUS, RESOURCE_CATEGORIES } from '../../constants/enums';
+import { PROGRESS_STATUS, RESOURCE_CATEGORIES, STORYBLOK_COLORS } from '../../constants/enums';
 import {
   RESOURCE_CONVERSATION_TRANSCRIPT_CLOSED,
   RESOURCE_CONVERSATION_TRANSCRIPT_OPENED,
   RESOURCE_CONVERSATION_VIEWED,
 } from '../../constants/events';
 import { useTypedSelector } from '../../hooks/store';
+import illustrationCourses from '../../public/illustration_courses.svg';
 import { Resource } from '../../store/resourcesSlice';
 import { rowStyle } from '../../styles/common';
-import theme from '../../styles/theme';
+import { userHasAccessToPartnerContent } from '../../utils/hasAccessToPartnerContent';
 import { getEventUserData, logEvent } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
 import { SignUpBanner } from '../banner/SignUpBanner';
+import PageSection from '../common/PageSection';
 import ProgressStatus from '../common/ProgressStatus';
 import ResourceFeedbackForm from '../forms/ResourceFeedbackForm';
+import Header from '../layout/Header';
 import { ResourceCompleteButton } from '../resources/ResourceCompleteButton';
 import { ResourceConversationAudio } from '../resources/ResourceConversationAudio';
 import { StoryblokPageSectionProps } from './StoryblokPageSection';
@@ -68,6 +70,7 @@ export interface StoryblokResourceConversationPageProps {
   seo_description: string;
   description: ISbRichtext;
   header_image: { filename: string; alt: string };
+  duration: string;
   audio: { filename: string };
   audio_transcript: ISbRichtext;
   page_sections: StoryblokPageSectionProps[];
@@ -96,6 +99,8 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
   const t = useTranslations('Resources');
   const tS = useTranslations('Shared');
   const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
+  const userId = useTypedSelector((state) => state.user.id);
+
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
   const resources = useTypedSelector((state) => state.resources);
@@ -105,6 +110,7 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
   );
   const [resourceId, setResourceId] = useState<string>();
   const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
+
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
   const eventData = useMemo(() => {
@@ -172,13 +178,10 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
           </>
         )}
       </Head>
-
-      <Container sx={{ background: theme.palette.bloomGradient }}>
-        <Box sx={headerStyle}>
-          <Box sx={headerLeftStyles}>
-            <Typography variant="h1" maxWidth={600}>
-              {name}
-            </Typography>
+      <Header
+        title={name}
+        introduction={
+          <Box display="flex" flexDirection="column" gap={3}>
             {render(description, RichTextOptions)}
             <Box sx={audioContainerStyle}>
               <ResourceConversationAudio
@@ -190,39 +193,40 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
                 audio_transcript={audio_transcript}
               />
             </Box>
-
-            {resourceId && (
-              <Box sx={progressStyle}>
-                {resourceProgress && <ProgressStatus status={resourceProgress} />}
-                {resourceProgress !== PROGRESS_STATUS.COMPLETED && (
-                  <ResourceCompleteButton
-                    resourceName={name}
-                    category={RESOURCE_CATEGORIES.SHORT_VIDEO}
-                    storyId={storyId}
-                    eventData={eventData}
-                  />
-                )}
-              </Box>
-            )}
-          </Box>
-          <Box sx={headerRightStyle}>
-            {header_image && (
-              <Box sx={imageContainerStyle}>
-                <Image
-                  alt={header_image.alt}
-                  src={header_image.filename}
-                  fill
-                  sizes="500px"
-                  style={{
-                    objectFit: 'contain',
-                  }}
-                />
-              </Box>
-            )}
+            <Box>
+              {resourceId && (
+                <Box sx={progressStyle}>
+                  {resourceProgress && <ProgressStatus status={resourceProgress} />}
+                  {resourceProgress !== PROGRESS_STATUS.COMPLETED && (
+                    <ResourceCompleteButton
+                      resourceName={name}
+                      category={RESOURCE_CATEGORIES.SHORT_VIDEO}
+                      storyId={storyId}
+                      eventData={eventData}
+                    />
+                  )}
+                </Box>
+              )}
+            </Box>
           </Box>
-        </Box>
-      </Container>
-
+        }
+        imageSrc={header_image ? header_image.filename : illustrationCourses}
+      />
+      <PageSection color={STORYBLOK_COLORS.SECONDARY_MAIN} alignment="left">
+        <Typography variant="h2" fontWeight={600}>
+          Related content
+        </Typography>
+        <StoryblokRelatedContent
+          relatedContent={related_content}
+          relatedExercises={related_exercises}
+          userContentPartners={userHasAccessToPartnerContent(
+            partnerAdmin?.partner,
+            partnerAccesses,
+            null,
+            userId,
+          )}
+        />
+      </PageSection>
       {resourceId && (
         <Container sx={{ bgcolor: 'background.paper' }}>
           <ResourceFeedbackForm
@@ -231,16 +235,6 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
           />
         </Container>
       )}
-      <Container sx={{ bgcolor: 'secondary.main' }}>
-        <Typography variant="h2" mb={4}>
-          {tS('relatedContent.title')}
-        </Typography>
-        <StoryblokRelatedContent
-          relatedContent={related_content}
-          relatedExercises={related_exercises}
-        />
-      </Container>
-
       {!isLoggedIn && <SignUpBanner />}
     </Box>
   );
diff --git a/components/storyblok/StoryblokResourceShortPage.tsx b/components/storyblok/StoryblokResourceShortPage.tsx
index 7c10a8fa..1f02fb94 100644
--- a/components/storyblok/StoryblokResourceShortPage.tsx
+++ b/components/storyblok/StoryblokResourceShortPage.tsx
@@ -1,9 +1,12 @@
-import { Box, Button, Container, Typography } from '@mui/material';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import { Box, Button, Container, IconButton, Typography } from '@mui/material';
 import { ISbRichtext, ISbStoryData, storyblokEditable } from '@storyblok/react';
+import Cookies from 'js-cookie';
 import { useTranslations } from 'next-intl';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
-import { PROGRESS_STATUS, RESOURCE_CATEGORIES } from '../../constants/enums';
+import { PROGRESS_STATUS, RESOURCE_CATEGORIES, STORYBLOK_COLORS } from '../../constants/enums';
 import {
   RESOURCE_SHORT_VIDEO_VIEWED,
   RESOURCE_SHORT_VIDEO_VISIT_SESSION,
@@ -12,9 +15,11 @@ import { useTypedSelector } from '../../hooks/store';
 import { Resource } from '../../store/resourcesSlice';
 import { columnStyle, rowStyle } from '../../styles/common';
 import theme from '../../styles/theme';
+import { userHasAccessToPartnerContent } from '../../utils/hasAccessToPartnerContent';
 import { getEventUserData, logEvent } from '../../utils/logEvent';
 import { SignUpBanner } from '../banner/SignUpBanner';
 import Link from '../common/Link';
+import PageSection from '../common/PageSection';
 import ProgressStatus from '../common/ProgressStatus';
 import ResourceFeedbackForm from '../forms/ResourceFeedbackForm';
 import { ResourceCompleteButton } from '../resources/ResourceCompleteButton';
@@ -46,6 +51,21 @@ const progressStyle = {
   },
 } as const;
 
+const backButtonStyle = {
+  display: { md: 'none' },
+  width: '2.5rem',
+  marginLeft: '-0.675rem',
+  mb: 2,
+  mt: 0,
+  padding: 0,
+} as const;
+
+const backIconStyle = {
+  height: '1.75rem',
+  width: '1.75rem',
+  color: 'primary.dark',
+} as const;
+
 export interface StoryblokResourceShortPageProps {
   storyId: number;
   _uid: string;
@@ -53,15 +73,17 @@ export interface StoryblokResourceShortPageProps {
   name: string;
   seo_description: string;
   description: ISbRichtext;
+  duration: string;
   video: { url: string };
   video_transcript: ISbRichtext;
   page_sections: StoryblokPageSectionProps[];
   related_session: ISbStoryData[];
-  related_course: ISbStoryData | null;
+  related_course?: ISbStoryData | null;
   related_content: StoryblokRelatedContentStory[];
   related_exercises: string[];
   languages: string[];
   component: 'resource_short_video';
+  included_for_partners: string[];
 }
 
 const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
@@ -80,13 +102,17 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
     related_content,
     related_exercises,
   } = props;
+  const router = useRouter();
   const t = useTranslations('Resources');
   const tS = useTranslations('Shared');
+  const entryPartnerReferral = useTypedSelector((state) => state.user.entryPartnerReferral);
   const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
   const resources = useTypedSelector((state) => state.resources);
+  const userId = useTypedSelector((state) => state.user.id);
   const isLoggedIn = useTypedSelector((state) => Boolean(state.user.id));
+
   const [resourceProgress, setResourceProgress] = useState<PROGRESS_STATUS>(
     PROGRESS_STATUS.NOT_STARTED,
   );
@@ -155,7 +181,14 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
         )}
       </Head>
 
-      <Container sx={{ background: theme.palette.bloomGradient }}>
+      <Container sx={{ background: theme.palette.bloomGradient, paddingTop: ['20px', '60px'] }}>
+        <IconButton
+          sx={backButtonStyle}
+          onClick={() => router.back()}
+          aria-label={tS('navigateBack')}
+        >
+          <KeyboardArrowLeftIcon sx={backIconStyle} />
+        </IconButton>
         <Typography variant="h1" maxWidth={600}>
           {name}
         </Typography>
@@ -217,15 +250,22 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
           />
         </Container>
       )}
-      <Container sx={{ bgcolor: 'secondary.main' }}>
-        <Typography variant="h2" mb={4}>
-          {tS('relatedContent.title')}
+
+      <PageSection alignment="flex-start" color={STORYBLOK_COLORS.SECONDARY_MAIN}>
+        <Typography variant="h2" fontWeight={600}>
+          Related content
         </Typography>
         <StoryblokRelatedContent
           relatedContent={related_content}
           relatedExercises={related_exercises}
+          userContentPartners={userHasAccessToPartnerContent(
+            partnerAdmin?.partner,
+            partnerAccesses,
+            Cookies.get('referralPartner') || entryPartnerReferral,
+            userId,
+          )}
         />
-      </Container>
+      </PageSection>
 
       {!isLoggedIn && <SignUpBanner />}
     </Box>