diff --git a/components/cards/AccountActionsCard.tsx b/components/cards/AccountActionsCard.tsx
index 975e91391..7515df41f 100644
--- a/components/cards/AccountActionsCard.tsx
+++ b/components/cards/AccountActionsCard.tsx
@@ -83,10 +83,8 @@ const AccountActionsCard = () => {
             id="delete-account-button"
             variant="outlined"
             sx={{
-              border: `solid 2px ${theme.palette.primary.dark}`,
               color: theme.palette.primary.dark,
               '&:hover': {
-                border: `solid 2px ${theme.palette.primary.dark}`,
                 background: theme.palette.primary.dark,
                 color: theme.palette.common.white,
               },
diff --git a/components/course/CourseHeader.tsx b/components/course/CourseHeader.tsx
index 6fe3b4c27..489fb0ce1 100644
--- a/components/course/CourseHeader.tsx
+++ b/components/course/CourseHeader.tsx
@@ -7,6 +7,14 @@ import { EventUserData } from '../../utils/logEvent';
 import Link from '../common/Link';
 import Header from '../layout/Header';
 
+const buttonStyle = {
+  background: theme.palette.background.default,
+  boxShadow: 'none !important',
+  ':hover': {
+    background: 'white',
+  },
+} as const;
+
 export interface CourseHeaderProps {
   name: string;
   description: ISbRichtext;
@@ -29,13 +37,7 @@ const CourseHeader = (props: CourseHeaderProps) => {
 
   return (
     <Header {...headerProps}>
-      <Button
-        variant="outlined"
-        sx={{ background: theme.palette.background.default }}
-        href="/courses"
-        size="small"
-        component={Link}
-      >
+      <Button variant="outlined" sx={buttonStyle} href="/courses" size="small" component={Link}>
         {t('backToCourses')}
       </Button>
     </Header>
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index ec873bb73..575f18c07 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -190,7 +190,7 @@ const Footer = () => {
                       alt={tS(partner.logoAlt)}
                       src={partner.logo}
                       fill
-                      sizes="100vw"
+                      sizes="300px"
                       style={{
                         objectFit: 'contain',
                         objectPosition: 'left',
diff --git a/components/layout/TopBar.tsx b/components/layout/TopBar.tsx
index ae4f2d4cd..d412d2876 100644
--- a/components/layout/TopBar.tsx
+++ b/components/layout/TopBar.tsx
@@ -82,7 +82,7 @@ const TopBar = () => {
               alt={tS('alt.bloomLogo')}
               src={bloomLogo}
               fill
-              sizes="100vw"
+              sizes="250px"
               style={{
                 objectFit: 'contain',
               }}
diff --git a/components/resources/ResourceCompleteButton.tsx b/components/resources/ResourceCompleteButton.tsx
index 4c7950c7c..308ddfc9a 100644
--- a/components/resources/ResourceCompleteButton.tsx
+++ b/components/resources/ResourceCompleteButton.tsx
@@ -22,13 +22,14 @@ const errorStyle = {
 } as const;
 
 interface ResourceCompleteButtonProps {
+  resourceName: string;
   category: RESOURCE_CATEGORIES;
   storyId: number;
   eventData: EventUserData;
 }
 
 export const ResourceCompleteButton = (props: ResourceCompleteButtonProps) => {
-  const { category, storyId, eventData } = props;
+  const { resourceName, category, storyId, eventData } = props;
 
   const t = useTranslations('Resources');
 
@@ -79,7 +80,7 @@ export const ResourceCompleteButton = (props: ResourceCompleteButtonProps) => {
       <Button
         color="primary"
         size="medium"
-        variant="contained"
+        variant="outlined"
         onClick={completeResourceAction}
         startIcon={<CheckCircleIcon color="error" />}
       >
diff --git a/components/resources/ResourceConversationAudio.tsx b/components/resources/ResourceConversationAudio.tsx
new file mode 100644
index 000000000..3ea892c7c
--- /dev/null
+++ b/components/resources/ResourceConversationAudio.tsx
@@ -0,0 +1,144 @@
+import { Link, Typography } from '@mui/material';
+import { ISbRichtext } from '@storyblok/react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useState } from 'react';
+import { PROGRESS_STATUS } from '../../constants/enums';
+import {
+  RESOURCE_CONVERSATION_COMPLETE_ERROR,
+  RESOURCE_CONVERSATION_COMPLETE_REQUEST,
+  RESOURCE_CONVERSATION_COMPLETE_SUCCESS,
+  RESOURCE_CONVERSATION_STARTED_ERROR,
+  RESOURCE_CONVERSATION_STARTED_REQUEST,
+  RESOURCE_CONVERSATION_STARTED_SUCCESS,
+  RESOURCE_CONVERSATION_TRANSCRIPT_CLOSED,
+  RESOURCE_CONVERSATION_TRANSCRIPT_OPENED,
+} from '../../constants/events';
+import { useTypedSelector } from '../../hooks/store';
+import { useCompleteResourceMutation, useStartResourceMutation } from '../../store/api';
+import logEvent, { EventUserData } from '../../utils/logEvent';
+import Audio from '../video/Audio';
+import VideoTranscriptModal from '../video/VideoTranscriptModal';
+
+export interface EventData extends EventUserData {
+  resource_name: string;
+  resource_storyblok_id: number;
+  resource_progress: PROGRESS_STATUS;
+}
+
+interface ResourceConversationAudioProps {
+  eventData: EventData;
+  resourceProgress: PROGRESS_STATUS;
+  name: string;
+  storyId: number;
+  audio: string;
+  audio_transcript: ISbRichtext;
+}
+
+export const ResourceConversationAudio = (props: ResourceConversationAudioProps) => {
+  const { eventData, storyId, resourceProgress, name, audio_transcript, audio } = props;
+  const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
+  const [startResourceConversation] = useStartResourceMutation();
+  const [completeResourceConversation] = useCompleteResourceMutation();
+  const isLoggedIn = useTypedSelector((state) => Boolean(state.user.id));
+
+  const t = useTranslations('Resources');
+
+  const callStartResourceConversation = useCallback(async () => {
+    logEvent(RESOURCE_CONVERSATION_STARTED_REQUEST, eventData);
+
+    const startResourceConversationResponse = await startResourceConversation({
+      storyblokId: storyId,
+    });
+
+    if (startResourceConversationResponse.data) {
+      logEvent(RESOURCE_CONVERSATION_STARTED_SUCCESS, eventData);
+    }
+
+    if (startResourceConversationResponse.error) {
+      const error = startResourceConversationResponse.error;
+
+      logEvent(RESOURCE_CONVERSATION_STARTED_ERROR, eventData);
+      (window as any).Rollbar?.error('ResourceConversation started error', error);
+
+      throw error;
+    }
+  }, [startResourceConversation, eventData, name, storyId]);
+
+  const callCompleteResourceConversation = useCallback(async () => {
+    logEvent(RESOURCE_CONVERSATION_COMPLETE_REQUEST, eventData);
+
+    const completeResourceConversationResponse = await completeResourceConversation({
+      storyblokId: storyId,
+    });
+
+    if (completeResourceConversationResponse.data) {
+      logEvent(RESOURCE_CONVERSATION_COMPLETE_SUCCESS, eventData);
+    }
+
+    if (completeResourceConversationResponse.error) {
+      const error = completeResourceConversationResponse.error;
+
+      logEvent(RESOURCE_CONVERSATION_COMPLETE_ERROR, eventData);
+      (window as any).Rollbar?.error('ResourceConversation completed error', error);
+
+      throw error;
+    }
+  }, [completeResourceConversation, eventData, name, storyId]);
+
+  useEffect(() => {
+    if (openTranscriptModal === null) return;
+
+    logEvent(
+      openTranscriptModal
+        ? RESOURCE_CONVERSATION_TRANSCRIPT_OPENED
+        : RESOURCE_CONVERSATION_TRANSCRIPT_CLOSED,
+      eventData,
+    );
+    if (isLoggedIn && openTranscriptModal && resourceProgress === PROGRESS_STATUS.NOT_STARTED) {
+      callStartResourceConversation();
+    }
+  }, [
+    callStartResourceConversation,
+    openTranscriptModal,
+    eventData,
+    name,
+    resourceProgress,
+    isLoggedIn,
+  ]);
+
+  const audioStarted = () => {
+    if (isLoggedIn && resourceProgress === PROGRESS_STATUS.NOT_STARTED) {
+      callStartResourceConversation();
+    }
+  };
+
+  const audioFinished = () => {
+    if (isLoggedIn && resourceProgress !== PROGRESS_STATUS.COMPLETED) {
+      callCompleteResourceConversation();
+    }
+  };
+
+  return (
+    <>
+      <Audio
+        url={audio}
+        setAudioStarted={audioStarted}
+        setAudioFinished={audioFinished}
+        eventData={eventData}
+        eventPrefix="RESOURCE_CONVERSATION"
+      />
+      <Typography sx={{ my: '1rem !important' }}>
+        {t.rich('conversationTranscriptLink', {
+          link: (children) => <Link onClick={() => setOpenTranscriptModal(true)}>{children}</Link>,
+        })}
+      </Typography>
+
+      <VideoTranscriptModal
+        videoName={name}
+        content={audio_transcript}
+        setOpenTranscriptModal={setOpenTranscriptModal}
+        openTranscriptModal={openTranscriptModal}
+      />
+    </>
+  );
+};
diff --git a/components/resources/ResourceShortVideo.tsx b/components/resources/ResourceShortVideo.tsx
index 3756413b0..2d4ca976b 100644
--- a/components/resources/ResourceShortVideo.tsx
+++ b/components/resources/ResourceShortVideo.tsx
@@ -1,7 +1,7 @@
 import { Link, Typography } from '@mui/material';
 import { ISbRichtext } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { PROGRESS_STATUS } from '../../constants/enums';
 import {
   RESOURCE_SHORT_VIDEO_COMPLETE_ERROR,
@@ -12,8 +12,8 @@ import {
   RESOURCE_SHORT_VIDEO_STARTED_SUCCESS,
   RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED,
   RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED,
-  RESOURCE_SHORT_VIDEO_VIEWED,
 } from '../../constants/events';
+import { useTypedSelector } from '../../hooks/store';
 import { useCompleteResourceMutation, useStartResourceMutation } from '../../store/api';
 import logEvent, { EventUserData } from '../../utils/logEvent';
 import Video from '../video/Video';
@@ -36,18 +36,15 @@ interface ResourceShortVideoProps {
 
 export const ResourceShortVideo = (props: ResourceShortVideoProps) => {
   const { eventData, storyId, resourceProgress, name, video_transcript, video } = props;
-  const [videoStarted, setVideoStarted] = useState<boolean>(false);
-  const [videoFinished, setVideoFinished] = useState<boolean>(false);
   const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
   const [startResourceShort] = useStartResourceMutation();
   const [completeResourceShort] = useCompleteResourceMutation();
+  const isLoggedIn = useTypedSelector((state) => Boolean(state.user.id));
+
   const t = useTranslations('Resources');
 
-  async function callStartResourceShort() {
-    logEvent(RESOURCE_SHORT_VIDEO_STARTED_REQUEST, {
-      ...eventData,
-      resource_name: name,
-    });
+  const callStartResourceShort = useCallback(async () => {
+    logEvent(RESOURCE_SHORT_VIDEO_STARTED_REQUEST, eventData);
 
     const startResourceShortResponse = await startResourceShort({
       storyblokId: storyId,
@@ -65,13 +62,10 @@ export const ResourceShortVideo = (props: ResourceShortVideoProps) => {
 
       throw error;
     }
-  }
+  }, [startResourceShort, eventData, storyId]);
 
-  async function callCompleteResourceShort() {
-    logEvent(RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST, {
-      ...eventData,
-      resource_name: name,
-    });
+  const callCompleteResourceShort = useCallback(async () => {
+    logEvent(RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST, eventData);
 
     const completeResourceShortResponse = await completeResourceShort({
       storyblokId: storyId,
@@ -89,7 +83,7 @@ export const ResourceShortVideo = (props: ResourceShortVideoProps) => {
 
       throw error;
     }
-  }
+  }, [completeResourceShort, eventData, storyId]);
 
   useEffect(() => {
     if (openTranscriptModal === null) return;
@@ -98,50 +92,38 @@ export const ResourceShortVideo = (props: ResourceShortVideoProps) => {
       openTranscriptModal
         ? RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED
         : RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED,
-      {
-        ...eventData,
-        resource_name: name,
-        course_name: name,
-      },
+      eventData,
     );
-    if (openTranscriptModal && resourceProgress === PROGRESS_STATUS.NOT_STARTED) {
+    if (isLoggedIn && openTranscriptModal && resourceProgress === PROGRESS_STATUS.NOT_STARTED) {
       callStartResourceShort();
     }
-  }, [openTranscriptModal, eventData, name, resourceProgress]);
-
-  useEffect(() => {
-    if (!videoStarted || resourceProgress !== PROGRESS_STATUS.NOT_STARTED) return;
+  }, [callStartResourceShort, openTranscriptModal, eventData, name, resourceProgress, isLoggedIn]);
 
-    if (videoStarted) {
+  const videoStarted = () => {
+    if (isLoggedIn && resourceProgress === PROGRESS_STATUS.NOT_STARTED) {
       callStartResourceShort();
     }
-  }, [videoStarted, resourceProgress]);
+  };
 
-  useEffect(() => {
-    if (!videoFinished || resourceProgress === PROGRESS_STATUS.COMPLETED) return;
-
-    if (videoFinished) {
+  const videoFinished = () => {
+    if (isLoggedIn && resourceProgress !== PROGRESS_STATUS.COMPLETED) {
       callCompleteResourceShort();
     }
-  }, [videoFinished, resourceProgress]);
-
-  useEffect(() => {
-    logEvent(RESOURCE_SHORT_VIDEO_VIEWED, eventData);
-  }, []);
+  };
 
   return (
     video && (
       <>
         <Video
           url={video.url}
-          setVideoStarted={setVideoStarted}
-          setVideoFinished={setVideoFinished}
+          setVideoStarted={videoStarted}
+          setVideoFinished={videoFinished}
           eventData={eventData}
           eventPrefix="RESOURCE_SHORT"
           autoplay={true}
         />
         <Typography sx={{ my: '1rem !important' }}>
-          {t.rich('transcriptLink', {
+          {t.rich('videoTranscriptLink', {
             link: (children) => (
               <Link onClick={() => setOpenTranscriptModal(true)}>{children}</Link>
             ),
diff --git a/components/session/SessionHeader.tsx b/components/session/SessionHeader.tsx
index ced771652..0dd6b2a62 100644
--- a/components/session/SessionHeader.tsx
+++ b/components/session/SessionHeader.tsx
@@ -9,6 +9,14 @@ import theme from '../../styles/theme';
 import Link from '../common/Link';
 import Header from '../layout/Header';
 
+const buttonStyle = {
+  background: theme.palette.background.default,
+  boxShadow: 'none !important',
+  ':hover': {
+    background: 'white',
+  },
+} as const;
+
 const sessionSubtitleStyle = {
   marginTop: '0.75rem !important',
 } as const;
@@ -58,21 +66,15 @@ export const SessionHeader = (props: SessionHeaderProps) => {
       imageAlt={headerProps.imageAlt}
       progressStatus={sessionProgress}
     >
-      <Button
-        variant="outlined"
-        href="/courses"
-        sx={{ background: theme.palette.background.default }}
-        size="small"
-        component={Link}
-      >
+      <Button variant="contained" href="/courses" sx={buttonStyle} size="small" component={Link}>
         Courses
       </Button>
 
       <CircleIcon color="error" sx={{ ...dotStyle, marginX: 1 }} />
 
       <Button
-        variant="outlined"
-        sx={{ background: theme.palette.background.default }}
+        variant="contained"
+        sx={buttonStyle}
         href={`/${course.full_slug}`}
         size="small"
         component={Link}
diff --git a/components/storyblok/StoryblokResourceConversationPage.tsx b/components/storyblok/StoryblokResourceConversationPage.tsx
index 2889fee7a..dbedf46d9 100644
--- a/components/storyblok/StoryblokResourceConversationPage.tsx
+++ b/components/storyblok/StoryblokResourceConversationPage.tsx
@@ -1,8 +1,8 @@
-import { Box, Button, Container, Typography } from '@mui/material';
+import { Box, Container, Typography } from '@mui/material';
 import { ISbRichtext, storyblokEditable } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
-import dynamic from 'next/dynamic';
 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';
@@ -13,16 +13,52 @@ import {
 } from '../../constants/events';
 import { useTypedSelector } from '../../hooks/store';
 import { Resource } from '../../store/resourcesSlice';
+import { rowStyle } from '../../styles/common';
 import theme from '../../styles/theme';
 import { getEventUserData, logEvent } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
 import { SignUpBanner } from '../banner/SignUpBanner';
+import ProgressStatus from '../common/ProgressStatus';
 import ResourceFeedbackForm from '../forms/ResourceFeedbackForm';
 import { ResourceCompleteButton } from '../resources/ResourceCompleteButton';
-import VideoTranscriptModal from '../video/VideoTranscriptModal';
+import { ResourceConversationAudio } from '../resources/ResourceConversationAudio';
 import { StoryblokPageSectionProps } from './StoryblokPageSection';
 import { StoryblokRelatedContent, StoryblokRelatedContentStory } from './StoryblokRelatedContent';
-const ReactPlayer = dynamic(() => import('react-player'), { ssr: false });
+
+const headerStyle = { ...rowStyle, flexWrap: { xs: 'wrap', md: 'no-wrap' }, gap: 5 } as const;
+
+const headerLeftStyles = {
+  width: { xs: '100%', md: '60%' },
+  maxWidth: '100%',
+} as const;
+
+const headerRightStyle = {
+  flex: { md: 1 },
+  width: '100%',
+} as const;
+
+const imageContainerStyle = {
+  position: 'relative',
+  width: 200,
+  height: 200,
+  marginLeft: 'auto',
+  marginRight: { xs: '8%', md: '0' },
+} as const;
+
+const audioContainerStyle = {
+  mt: { xs: 4, md: 6 },
+  mb: 3,
+} as const;
+
+const progressStyle = {
+  ...rowStyle,
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: 3,
+  '.MuiBox-root': {
+    mt: 0,
+  },
+} as const;
 
 export interface StoryblokResourceConversationPageProps {
   storyId: number;
@@ -31,6 +67,7 @@ export interface StoryblokResourceConversationPageProps {
   name: string;
   seo_description: string;
   description: ISbRichtext;
+  header_image: { filename: string; alt: string };
   audio: { filename: string };
   audio_transcript: ISbRichtext;
   page_sections: StoryblokPageSectionProps[];
@@ -48,6 +85,7 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
     name,
     seo_description,
     description,
+    header_image,
     audio,
     audio_transcript,
     page_sections,
@@ -56,6 +94,7 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
   } = props;
 
   const t = useTranslations('Resources');
+  const tS = useTranslations('Shared');
   const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
@@ -66,12 +105,12 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
   );
   const [resourceId, setResourceId] = useState<string>();
   const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
-  console.log(props);
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
   const eventData = useMemo(() => {
     return {
       ...eventUserData,
+      resource_category: RESOURCE_CATEGORIES.CONVERSATION,
       resource_name: name,
       resource_storyblok_id: storyId,
       resource_progress: resourceProgress,
@@ -104,10 +143,7 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
       openTranscriptModal
         ? RESOURCE_CONVERSATION_TRANSCRIPT_OPENED
         : RESOURCE_CONVERSATION_TRANSCRIPT_CLOSED,
-      {
-        ...eventData,
-        name,
-      },
+      eventData,
     );
   }, [openTranscriptModal, name, eventData]);
 
@@ -136,37 +172,57 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP
           </>
         )}
       </Head>
+
       <Container sx={{ background: theme.palette.bloomGradient }}>
-        <Typography variant="h1">{name}</Typography>
-        <Typography variant="h3">Progress: {resourceProgress}</Typography>
-        {render(description, RichTextOptions)}
-        <Box position="relative">
-          <ReactPlayer width="100%" height="50px" url={audio.filename} controls />
+        <Box sx={headerStyle}>
+          <Box sx={headerLeftStyles}>
+            <Typography variant="h1" maxWidth={600}>
+              {name}
+            </Typography>
+            {render(description, RichTextOptions)}
+            <Box sx={audioContainerStyle}>
+              <ResourceConversationAudio
+                eventData={eventData}
+                resourceProgress={resourceProgress}
+                name={name}
+                storyId={storyId}
+                audio={audio.filename}
+                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>
         </Box>
-        <Button variant="contained" sx={{ my: 3 }} onClick={() => setOpenTranscriptModal(true)}>
-          Open transcript
-        </Button>
-        <VideoTranscriptModal
-          videoName={name}
-          content={audio_transcript}
-          setOpenTranscriptModal={setOpenTranscriptModal}
-          openTranscriptModal={openTranscriptModal}
-        />
-        {resourceProgress !== PROGRESS_STATUS.COMPLETED && (
-          <ResourceCompleteButton
-            category={RESOURCE_CATEGORIES.CONVERSATION}
-            storyId={storyId}
-            eventData={eventData}
-          />
-        )}
-      </Container>
-      <Container>
-        <Typography variant="h2">Related content</Typography>
-        <StoryblokRelatedContent
-          relatedContent={related_content}
-          relatedExercises={related_exercises}
-        />
       </Container>
+
       {resourceId && (
         <Container sx={{ bgcolor: 'background.paper' }}>
           <ResourceFeedbackForm
@@ -175,6 +231,16 @@ 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 c81e820e2..7c10a8fa8 100644
--- a/components/storyblok/StoryblokResourceShortPage.tsx
+++ b/components/storyblok/StoryblokResourceShortPage.tsx
@@ -5,8 +5,6 @@ import Head from 'next/head';
 import { useEffect, useMemo, useState } from 'react';
 import { PROGRESS_STATUS, RESOURCE_CATEGORIES } from '../../constants/enums';
 import {
-  RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED,
-  RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED,
   RESOURCE_SHORT_VIDEO_VIEWED,
   RESOURCE_SHORT_VIDEO_VISIT_SESSION,
 } from '../../constants/events';
@@ -83,6 +81,7 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
     related_exercises,
   } = props;
   const t = useTranslations('Resources');
+  const tS = useTranslations('Shared');
   const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
@@ -92,12 +91,12 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
     PROGRESS_STATUS.NOT_STARTED,
   );
   const [resourceId, setResourceId] = useState<string>();
-  const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
   const eventData = useMemo(() => {
     return {
       ...eventUserData,
+      resource_category: RESOURCE_CATEGORIES.SHORT_VIDEO,
       resource_name: name,
       resource_storyblok_id: storyId,
       resource_progress: resourceProgress,
@@ -121,22 +120,6 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
     logEvent(RESOURCE_SHORT_VIDEO_VIEWED, eventData);
   }, []);
 
-  useEffect(() => {
-    if (openTranscriptModal === null) {
-      return;
-    }
-
-    logEvent(
-      openTranscriptModal
-        ? RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED
-        : RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED,
-      {
-        ...eventData,
-        name,
-      },
-    );
-  }, [openTranscriptModal, name, eventData]);
-
   const redirectToSession = () => {
     logEvent(RESOURCE_SHORT_VIDEO_VISIT_SESSION, {
       ...eventData,
@@ -171,8 +154,11 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
           </>
         )}
       </Head>
+
       <Container sx={{ background: theme.palette.bloomGradient }}>
-        <Typography variant="h1">{name}</Typography>
+        <Typography variant="h1" maxWidth={600}>
+          {name}
+        </Typography>
         <Box sx={headerStyle}>
           <Box sx={headerLeftStyles}>
             <ResourceShortVideo
@@ -183,12 +169,13 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
               video={video}
               video_transcript={video_transcript}
             />
-            {isLoggedIn && (
+            {resourceId && (
               <Box sx={progressStyle}>
                 {resourceProgress && <ProgressStatus status={resourceProgress} />}
 
                 {resourceProgress !== PROGRESS_STATUS.COMPLETED && (
                   <ResourceCompleteButton
+                    resourceName={name}
                     category={RESOURCE_CATEGORIES.SHORT_VIDEO}
                     storyId={storyId}
                     eventData={eventData}
@@ -198,6 +185,7 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
             )}
           </Box>
           <Box sx={headerRightStyle}>
+            {/* Description field is not currently displayed */}
             {/* {render(description, RichTextOptions)} */}
 
             <Typography component="h2" mb={2}>
@@ -220,6 +208,7 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
           </Box>
         </Box>
       </Container>
+
       {resourceId && (
         <Container sx={{ bgcolor: 'background.paper' }}>
           <ResourceFeedbackForm
@@ -228,8 +217,10 @@ const StoryblokResourceShortPage = (props: StoryblokResourceShortPageProps) => {
           />
         </Container>
       )}
-      <Container>
-        <Typography variant="h2">Related content</Typography>
+      <Container sx={{ bgcolor: 'secondary.main' }}>
+        <Typography variant="h2" mb={4}>
+          {tS('relatedContent.title')}
+        </Typography>
         <StoryblokRelatedContent
           relatedContent={related_content}
           relatedExercises={related_exercises}
diff --git a/components/video/Audio.tsx b/components/video/Audio.tsx
new file mode 100644
index 000000000..c76128f22
--- /dev/null
+++ b/components/video/Audio.tsx
@@ -0,0 +1,85 @@
+import { debounce } from '@mui/material';
+import dynamic from 'next/dynamic';
+import { Dispatch, SetStateAction, useRef, useState } from 'react';
+import { OnProgressProps } from 'react-player/base';
+import logEvent, { EventUserData } from '../../utils/logEvent';
+// See React Player Hydration issue https://github.com/cookpete/react-player/issues/1474
+const ReactPlayer = dynamic(() => import('react-player/lazy'), { ssr: false });
+
+interface AudioProps {
+  url: string;
+  eventData: EventUserData;
+  eventPrefix: string;
+  setAudioStarted?: Dispatch<SetStateAction<boolean>> | void;
+  setAudioFinished?: Dispatch<SetStateAction<boolean>> | void;
+}
+
+const Audio = (props: AudioProps) => {
+  const { url, eventData, eventPrefix, setAudioStarted, setAudioFinished } = props;
+  const [audioDuration, setAudioDuration] = useState<number>(0);
+  const [audioCompleted, setAudioCompleted] = useState<boolean>(false);
+  const [audioTimePlayed, setAudioTimePlayed] = useState<number>(0);
+
+  const player = useRef<typeof ReactPlayer>(null);
+  const audioStarted = () => {
+    setAudioStarted && setAudioStarted(true);
+    if (player.current) {
+      logEvent(`${eventPrefix}_AUDIO_STARTED`, { ...eventData, audio_duration: audioDuration });
+    }
+  };
+
+  const audioEnded = () => {
+    if (!!audioCompleted) return;
+
+    setAudioFinished && setAudioFinished(true);
+
+    if (player.current) {
+      logEvent(`${eventPrefix}_AUDIO_FINISHED`, {
+        ...eventData,
+        audio_duration: audioDuration,
+      });
+    }
+    setAudioCompleted(true);
+  };
+
+  const audioPausedOrPlayed = (played: boolean) => {
+    if (player.current) {
+      const playedPercentage = Math.round((audioTimePlayed / audioDuration) * 100);
+
+      logEvent(played ? `${eventPrefix}_AUDIO_PLAYED` : `${eventPrefix}_AUDIO_PAUSED`, {
+        ...eventData,
+        audio_duration: audioDuration,
+        audio_current_time: audioTimePlayed,
+        audio_current_percentage: playedPercentage,
+      });
+
+      if (!played && playedPercentage > 95) {
+        audioEnded();
+      }
+    }
+  };
+  const handleProgress: ((state: OnProgressProps) => void) | undefined = debounce(
+    (state: OnProgressProps) => {
+      setAudioTimePlayed(state.playedSeconds);
+    },
+    300,
+  );
+
+  return (
+    <ReactPlayer
+      ref={player}
+      onDuration={(duration) => setAudioDuration(duration)}
+      onStart={audioStarted}
+      onEnded={audioEnded}
+      onPause={() => audioPausedOrPlayed(false)}
+      onPlay={() => audioPausedOrPlayed(true)}
+      onProgress={handleProgress}
+      width="100%"
+      height="50px"
+      url={url}
+      controls
+    />
+  );
+};
+
+export default Audio;
diff --git a/components/video/Video.tsx b/components/video/Video.tsx
index b3b1b78e5..87794792c 100644
--- a/components/video/Video.tsx
+++ b/components/video/Video.tsx
@@ -39,6 +39,7 @@ const Video = (props: VideoProps) => {
     setVideoFinished,
   } = props;
   const [videoDuration, setVideoDuration] = useState<number>(0);
+  const [videoCompleted, setVideoCompleted] = useState<boolean>(false);
   const [videoTimePlayed, setVideoTimePlayed] = useState<number>(0);
 
   const player = useRef<typeof ReactPlayer>(null);
@@ -50,6 +51,8 @@ const Video = (props: VideoProps) => {
   };
 
   const videoEnded = () => {
+    if (!!videoCompleted) return;
+
     setVideoFinished && setVideoFinished(true);
 
     if (player.current) {
@@ -58,6 +61,7 @@ const Video = (props: VideoProps) => {
         video_duration: videoDuration,
       });
     }
+    setVideoCompleted(true);
   };
 
   const videoPausedOrPlayed = (played: boolean) => {
@@ -71,11 +75,8 @@ const Video = (props: VideoProps) => {
         video_current_percentage: playedPercentage,
       });
 
-      if (played) {
-      } else {
-        if (playedPercentage > 90) {
-          videoEnded();
-        }
+      if (!played && playedPercentage > 95) {
+        videoEnded();
       }
     }
   };
@@ -106,8 +107,6 @@ const Video = (props: VideoProps) => {
       : {};
   };
 
-  console.log(videoConfig({ url }));
-
   return (
     <Box sx={containerStyle}>
       <Box sx={videoContainerStyle}>
@@ -116,11 +115,10 @@ const Video = (props: VideoProps) => {
           light={true}
           onDuration={(duration) => setVideoDuration(duration)}
           onStart={videoStarted}
+          onEnded={videoEnded}
           onPause={() => videoPausedOrPlayed(false)}
           onPlay={() => videoPausedOrPlayed(true)}
-          onEnded={videoEnded}
           onProgress={handleProgress}
-          playing={true}
           style={videoStyle}
           width="100%"
           height="100%"
diff --git a/constants/events.ts b/constants/events.ts
index e3de3c8ef..498d7ba7c 100644
--- a/constants/events.ts
+++ b/constants/events.ts
@@ -84,27 +84,30 @@ export const COURSE_STARTED = 'COURSE_STARTED';
 export const COURSE_COMPLETE = 'COURSE_COMPLETE';
 
 export const RESOURCE_CONVERSATION_VIEWED = 'RESOURCE_CONVERSATION_VIEWED';
+export const RESOURCE_SHORT_VIDEO_VIEWED = 'RESOURCE_SHORT_VIDEO_VIEWED';
 export const RESOURCE_CONVERSATION_STARTED = 'RESOURCE_CONVERSATION_STARTED';
 export const RESOURCE_CONVERSATION_PLAYED = 'RESOURCE_CONVERSATION_PLAYED';
 export const RESOURCE_CONVERSATION_PAUSED = 'RESOURCE_CONVERSATION_PAUSED';
 export const RESOURCE_CONVERSATION_FINISHED = 'RESOURCE_CONVERSATION_FINISHED';
-export const RESOURCE_CONVERSATION_TRANSCRIPT_OPENED = 'RESOURCE_CONVERSATION_TRANSCRIPT_OPENED';
-export const RESOURCE_CONVERSATION_TRANSCRIPT_CLOSED = 'RESOURCE_CONVERSATION_TRANSCRIPT_CLOSED';
-export const RESOURCE_SHORT_VIDEO_VIEWED = 'RESOURCE_SHORT_VIDEO_VIEWED';
-export const RESOURCE_SHORT_VIDEO_STARTED_REQUEST = 'RESOURCE_SHORT_VIDEO_STARTED_REQUEST';
-export const RESOURCE_SHORT_VIDEO_STARTED_SUCCESS = 'RESOURCE_SHORT_VIDEO_STARTED_SUCCESS';
-export const RESOURCE_SHORT_VIDEO_STARTED_ERROR = 'RESOURCE_SHORT_VIDEO_STARTED_ERROR';
 export const RESOURCE_SHORT_VIDEO_PLAYED = 'RESOURCE_SHORT_VIDEO_PLAYED';
 export const RESOURCE_SHORT_VIDEO_PAUSED = 'RESOURCE_SHORT_VIDEO_PAUSED';
 export const RESOURCE_SHORT_VIDEO_FINISHED = 'RESOURCE_SHORT_VIDEO_FINISHED';
-export const RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED = 'RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED';
-export const RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED = 'RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED';
+export const RESOURCE_SHORT_VIDEO_STARTED_REQUEST = 'RESOURCE_SHORT_VIDEO_STARTED_REQUEST';
+export const RESOURCE_SHORT_VIDEO_STARTED_SUCCESS = 'RESOURCE_SHORT_VIDEO_STARTED_SUCCESS';
+export const RESOURCE_SHORT_VIDEO_STARTED_ERROR = 'RESOURCE_SHORT_VIDEO_STARTED_ERROR';
 export const RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST = 'RESOURCE_SHORT_VIDEO_COMPLETE_REQUEST';
 export const RESOURCE_SHORT_VIDEO_COMPLETE_SUCCESS = 'RESOURCE_SHORT_VIDEO_COMPLETE_SUCCESS';
 export const RESOURCE_SHORT_VIDEO_COMPLETE_ERROR = 'RESOURCE_SHORT_VIDEO_COMPLETE_ERROR';
+export const RESOURCE_CONVERSATION_STARTED_REQUEST = 'RESOURCE_CONVERSATION_STARTED_REQUEST';
+export const RESOURCE_CONVERSATION_STARTED_SUCCESS = 'RESOURCE_CONVERSATION_STARTED_SUCCESS';
+export const RESOURCE_CONVERSATION_STARTED_ERROR = 'RESOURCE_CONVERSATION_STARTED_ERROR';
 export const RESOURCE_CONVERSATION_COMPLETE_REQUEST = 'RESOURCE_CONVERSATION_COMPLETE_REQUEST';
 export const RESOURCE_CONVERSATION_COMPLETE_SUCCESS = 'RESOURCE_CONVERSATION_COMPLETE_SUCCESS';
 export const RESOURCE_CONVERSATION_COMPLETE_ERROR = 'RESOURCE_CONVERSATION_COMPLETE_ERROR';
+export const RESOURCE_CONVERSATION_TRANSCRIPT_OPENED = 'RESOURCE_CONVERSATION_TRANSCRIPT_OPENED';
+export const RESOURCE_CONVERSATION_TRANSCRIPT_CLOSED = 'RESOURCE_CONVERSATION_TRANSCRIPT_CLOSED';
+export const RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED = 'RESOURCE_SHORT_VIDEO_TRANSCRIPT_OPENED';
+export const RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED = 'RESOURCE_SHORT_VIDEO_TRANSCRIPT_CLOSED';
 export const RESOURCE_SHORT_VIDEO_VISIT_SESSION = 'RESOURCE_SHORT_VIDEO_VISIT_SESSION';
 
 export const SESSION_VIEWED = 'SESSION_VIEWED';
diff --git a/messages/resources/en.json b/messages/resources/en.json
index b4d644012..9acc7e971 100644
--- a/messages/resources/en.json
+++ b/messages/resources/en.json
@@ -5,7 +5,8 @@
     "completed": "Completed",
     "sessionDetail": "This clip is from Session {sessionNumber}, {sessionName}, from our {courseName} course.",
     "sessionButtonLabel": "Watch full session",
-    "transcriptLink": "Watch the video or read the <link>transcript</link>.",
+    "videoTranscriptLink": "Watch the video or read the <link>transcript</link>.",
+    "conversationTranscriptLink": "Listen to the conversation or read the <link>transcript</link>.",
     "resourceFeedback": {
       "title": "How was this learning?",
       "subtitle": "We’d love to hear how you found this learning. Your feedback helps us to improve our resources.",
diff --git a/messages/shared/en.json b/messages/shared/en.json
index 33867fce9..336f029dc 100644
--- a/messages/shared/en.json
+++ b/messages/shared/en.json
@@ -102,6 +102,7 @@
       "button": "Get started"
     },
     "relatedContent": {
+      "title": "Related content",
       "short_video": "Short",
       "conversation": "Conversation",
       "course": "Course",
diff --git a/styles/theme.ts b/styles/theme.ts
index 7ed359ecd..3ffa864ae 100644
--- a/styles/theme.ts
+++ b/styles/theme.ts
@@ -180,7 +180,7 @@ theme = createTheme(theme, {
         },
         outlinedPrimary: {
           color: '#000000',
-          borderColor: theme.palette.primary.main,
+          borderColor: theme.palette.primary.dark,
         },
         containedPrimary: {
           borderColor: 'transparent',