diff --git a/components/session/SessionChat.tsx b/components/session/SessionChat.tsx
new file mode 100644
index 000000000..e1ea00136
--- /dev/null
+++ b/components/session/SessionChat.tsx
@@ -0,0 +1,63 @@
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
+import { Box, Button, Typography } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import SessionContentCard from '../cards/SessionContentCard';
+import { Dots } from '../common/Dots';
+import Link from '../common/Link';
+import Video from '../video/Video';
+import { EventData } from './SessionVideo';
+
+const chatDetailIntroStyle = { marginTop: 3, marginBottom: 1.5 } as const;
+
+export interface SessionChatProps {
+  eventData: EventData;
+}
+
+export const SessionChat = (props: SessionChatProps) => {
+  const { eventData } = props;
+  const t = useTranslations('Courses');
+
+  return (
+    <>
+      <Dots />
+      <SessionContentCard
+        title={t('sessionDetail.chat.title')}
+        titleIcon={ChatBubbleOutlineIcon}
+        titleIconSize={24}
+        eventPrefix="SESSION_CHAT"
+        eventData={eventData}
+      >
+        <Typography paragraph>{t('sessionDetail.chat.description')}</Typography>
+        <Typography paragraph>{t('sessionDetail.chat.videoIntro')}</Typography>
+        <Video
+          eventPrefix="SESSION_CHAT_VIDEO"
+          eventData={eventData}
+          url={t('sessionDetail.chat.videoLink')}
+          containerStyles={{ mx: 'auto', my: 2 }}
+        ></Video>
+        <Box sx={chatDetailIntroStyle}>
+          <Typography>{t('sessionDetail.chat.detailIntro')}</Typography>
+        </Box>
+        <Box>
+          <ul>
+            <li>{t('sessionDetail.chat.detailPrivacy')}</li>
+            <li>{t('sessionDetail.chat.detailTimezone')}</li>
+            <li>{t('sessionDetail.chat.detailLanguage')}</li>
+            <li>{t('sessionDetail.chat.detailLegal')}</li>
+            <li>{t('sessionDetail.chat.detailImmediateHelp')}</li>
+          </ul>
+        </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
+          <Button
+            variant="contained"
+            href="/messaging"
+            component={Link}
+            startIcon={<ChatBubbleOutlineIcon color="error" />}
+          >
+            {t('sessionDetail.chat.startButton')}
+          </Button>
+        </Box>
+      </SessionContentCard>
+    </>
+  );
+};
diff --git a/components/session/SessionHeader.tsx b/components/session/SessionHeader.tsx
new file mode 100644
index 000000000..a0ff6dfab
--- /dev/null
+++ b/components/session/SessionHeader.tsx
@@ -0,0 +1,73 @@
+import Header from '../layout/Header';
+import { Button, Typography } from '@mui/material';
+import theme from '../../styles/theme';
+import Link from '../common/Link';
+import CircleIcon from '@mui/icons-material/Circle';
+import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg';
+import { ISbRichtext, ISbStoryData } from '@storyblok/react';
+import { PROGRESS_STATUS } from '../../constants/enums';
+import { useTranslations } from 'next-intl';
+
+const sessionSubtitleStyle = {
+  marginTop: '0.75rem !important',
+} as const;
+const dotStyle = {
+  width: { xs: 8, md: 10 },
+  height: { xs: 8, md: 10 },
+} as const;
+
+interface SessionHeaderProps {
+  description: string | ISbRichtext;
+  name: string;
+  sessionProgress: PROGRESS_STATUS;
+  course: ISbStoryData;
+  weekString: string;
+  subtitle?: string;
+  storyPosition?: number;
+}
+export const SessionHeader = (props: SessionHeaderProps) => {
+  const t = useTranslations('Courses');
+  const { description, name, sessionProgress, course, weekString, subtitle, storyPosition } = props;
+  const headerProps = {
+    title: name,
+    introduction: description,
+    imageSrc: illustrationPerson4Peach,
+    imageAlt: 'alt.personTea',
+  };
+
+  return (
+    <Header
+      title={headerProps.title}
+      introduction={headerProps.introduction}
+      imageSrc={headerProps.imageSrc}
+      imageAlt={headerProps.imageAlt}
+      progressStatus={sessionProgress}
+    >
+      <Button
+        variant="outlined"
+        href="/courses"
+        sx={{ background: theme.palette.background.default }}
+        size="small"
+        component={Link}
+      >
+        Courses
+      </Button>
+
+      <CircleIcon color="error" sx={{ ...dotStyle, marginX: 1 }} />
+
+      <Button
+        variant="outlined"
+        sx={{ background: theme.palette.background.default }}
+        href={`/${course.full_slug}`}
+        size="small"
+        component={Link}
+      >
+        {course.name}
+      </Button>
+      <Typography sx={sessionSubtitleStyle} variant="body2">
+        {weekString} -{' '}
+        {storyPosition !== undefined ? `${t('session')} ${storyPosition / 10 - 1}` : subtitle}
+      </Typography>
+    </Header>
+  );
+};
diff --git a/components/session/SessionVideo.tsx b/components/session/SessionVideo.tsx
new file mode 100644
index 000000000..b1c3fa57b
--- /dev/null
+++ b/components/session/SessionVideo.tsx
@@ -0,0 +1,132 @@
+import SessionContentCard from '../cards/SessionContentCard';
+import SlowMotionVideoIcon from '@mui/icons-material/SlowMotionVideo';
+import { Link as MuiLink, Typography } from '@mui/material';
+import Video from '../video/Video';
+import VideoTranscriptModal from '../video/VideoTranscriptModal';
+import { useTranslations } from 'next-intl';
+import logEvent, { EventUserData } from '../../utils/logEvent';
+import { PROGRESS_STATUS } from '../../constants/enums';
+import { useEffect, useState } from 'react';
+import { ISbRichtext } from '@storyblok/react';
+import {
+  SESSION_STARTED_ERROR,
+  SESSION_STARTED_REQUEST,
+  SESSION_STARTED_SUCCESS,
+  SESSION_VIDEO_TRANSCRIPT_CLOSED,
+  SESSION_VIDEO_TRANSCRIPT_OPENED,
+  SESSION_VIEWED,
+} from '../../constants/events';
+import { useStartSessionMutation } from '../../store/api';
+
+export interface EventData extends EventUserData {
+  session_name: string;
+  session_storyblok_id: number;
+  session_progress: PROGRESS_STATUS;
+  course_name: string;
+  course_storyblok_id: number;
+}
+interface SessionVideoProps {
+  eventData: EventData;
+  sessionProgress: PROGRESS_STATUS;
+  name: string;
+  storyId: number;
+  video: { url: string };
+  video_transcript: ISbRichtext;
+}
+export const SessionVideo = (props: SessionVideoProps) => {
+  const { eventData, storyId, sessionProgress, name, video_transcript, video } = props;
+  const t = useTranslations('Courses');
+  const [videoStarted, setVideoStarted] = useState<boolean>(false);
+  const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
+  const [startSession] = useStartSessionMutation();
+  async function callStartSession() {
+    logEvent(SESSION_STARTED_REQUEST, {
+      ...eventData,
+      session_name: name,
+      course_name: name,
+    });
+
+    const startSessionResponse = await startSession({
+      storyblokId: storyId,
+    });
+
+    if (startSessionResponse.data) {
+      logEvent(SESSION_STARTED_SUCCESS, eventData);
+    }
+
+    if (startSessionResponse.error) {
+      const error = startSessionResponse.error;
+
+      logEvent(SESSION_STARTED_ERROR, eventData);
+      (window as any).Rollbar?.error('Session started error', error);
+
+      throw error;
+    }
+  }
+  useEffect(() => {
+    if (openTranscriptModal === null) return;
+
+    logEvent(
+      openTranscriptModal ? SESSION_VIDEO_TRANSCRIPT_OPENED : SESSION_VIDEO_TRANSCRIPT_CLOSED,
+      {
+        ...eventData,
+        session_name: name,
+        course_name: name,
+      },
+    );
+    if (openTranscriptModal && sessionProgress === PROGRESS_STATUS.NOT_STARTED) {
+      callStartSession();
+    }
+  }, [openTranscriptModal]);
+
+  useEffect(() => {
+    if (!videoStarted || sessionProgress !== PROGRESS_STATUS.NOT_STARTED) return;
+
+    if (videoStarted) {
+      callStartSession();
+    }
+  }, [videoStarted]);
+
+  useEffect(() => {
+    logEvent(SESSION_VIEWED, eventData);
+  }, []);
+
+  return (
+    video && (
+      <SessionContentCard
+        title={t('sessionDetail.videoTitle')}
+        titleIcon={SlowMotionVideoIcon}
+        eventPrefix="SESSION_VIDEO"
+        eventData={eventData}
+        initialExpanded={true}
+      >
+        <Typography mb={3}>
+          {t.rich('sessionDetail.videoDescription', {
+            transcriptLink: (children) => (
+              <MuiLink
+                component="button"
+                variant="body1"
+                onClick={() => setOpenTranscriptModal(true)}
+              >
+                {children}
+              </MuiLink>
+            ),
+          })}
+        </Typography>
+        <Video
+          url={video.url}
+          setVideoStarted={setVideoStarted}
+          eventData={eventData}
+          eventPrefix="SESSION"
+          containerStyles={{ mx: 'auto', my: 2 }}
+        />
+        <VideoTranscriptModal
+          videoName={name}
+          content={video_transcript}
+          setOpenTranscriptModal={setOpenTranscriptModal}
+          openTranscriptModal={openTranscriptModal}
+        />
+      </SessionContentCard>
+    )
+  );
+};
diff --git a/components/storyblok/StoryblokSessionIbaPage.tsx b/components/storyblok/StoryblokSessionIbaPage.tsx
index 6d8a284ed..f9e468eb3 100644
--- a/components/storyblok/StoryblokSessionIbaPage.tsx
+++ b/components/storyblok/StoryblokSessionIbaPage.tsx
@@ -1,39 +1,25 @@
-import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
-import CircleIcon from '@mui/icons-material/Circle';
-import SlowMotionVideoIcon from '@mui/icons-material/SlowMotionVideo';
 import StarBorderIcon from '@mui/icons-material/StarBorder';
-import { Box, Button, Container, Link as MuiLink, Typography } from '@mui/material';
+import { Box, Container } from '@mui/material';
 import { ISbRichtext, ISbStoryData, storyblokEditable } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import Head from 'next/head';
 import { useEffect, useState } from 'react';
 import { render } from 'storyblok-rich-text-react-renderer';
 import { PROGRESS_STATUS } from '../../constants/enums';
-import {
-  SESSION_STARTED_ERROR,
-  SESSION_STARTED_REQUEST,
-  SESSION_STARTED_SUCCESS,
-  SESSION_VIDEO_TRANSCRIPT_CLOSED,
-  SESSION_VIDEO_TRANSCRIPT_OPENED,
-  SESSION_VIEWED,
-} from '../../constants/events';
 import { useTypedSelector } from '../../hooks/store';
-import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg';
-import { useStartSessionMutation } from '../../store/api';
-import { Course, Session } from '../../store/coursesSlice';
 import { columnStyle } from '../../styles/common';
-import theme from '../../styles/theme';
+import { getChatAccess } from '../../utils/getChatAccess';
+import { getSessionCompletion } from '../../utils/getSessionCompletion';
 import hasAccessToPage from '../../utils/hasAccessToPage';
-import logEvent, { getEventUserData } from '../../utils/logEvent';
+import { getEventUserData } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
 import SessionContentCard from '../cards/SessionContentCard';
 import { Dots } from '../common/Dots';
-import Link from '../common/Link';
-import Header from '../layout/Header';
 import MultipleBonusContent, { BonusContent } from '../session/MultipleBonusContent';
+import { SessionChat } from '../session/SessionChat';
 import { SessionCompleteButton } from '../session/SessionCompleteButton';
-import Video from '../video/Video';
-import VideoTranscriptModal from '../video/VideoTranscriptModal';
+import { SessionHeader } from '../session/SessionHeader';
+import { SessionVideo } from '../session/SessionVideo';
 
 const containerStyle = {
   backgroundColor: 'secondary.light',
@@ -45,23 +31,6 @@ const cardColumnStyle = {
   gap: { xs: 2, md: 3 },
 } as const;
 
-const dotsStyle = {
-  ...columnStyle,
-  color: 'primary.dark',
-  gap: { xs: 1, md: 1.25 },
-} as const;
-
-const dotStyle = {
-  width: { xs: 8, md: 10 },
-  height: { xs: 8, md: 10 },
-} as const;
-
-const sessionSubtitleStyle = {
-  marginTop: '0.75rem !important',
-} as const;
-
-const chatDetailIntroStyle = { marginTop: 3, marginBottom: 1.5 } as const;
-
 export interface StoryblokSessionIbaPageProps {
   storyId: number;
   storyUuid: string;
@@ -102,90 +71,34 @@ const StoryblokSessionIbaPage = (props: StoryblokSessionIbaPageProps) => {
   const t = useTranslations('Courses');
 
   const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
-  const userEmail = useTypedSelector((state) => state.user.email);
   const isLoggedIn = useTypedSelector((state) => Boolean(state.user.id));
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
   const courses = useTypedSelector((state) => state.courses);
 
   const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
-  const [liveChatAccess, setLiveChatAccess] = useState<boolean>(false);
   const [sessionProgress, setSessionProgress] = useState<PROGRESS_STATUS>(
     PROGRESS_STATUS.NOT_STARTED,
   );
-  const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
-  const [videoStarted, setVideoStarted] = useState<boolean>(false);
   const [weekString, setWeekString] = useState<string>('');
-  const [startSession] = useStartSessionMutation();
+  const [liveChatAccess, setLiveChatAccess] = useState<boolean>(false);
 
-  const liveCourseAccess = partnerAccesses.length === 0 && !partnerAdmin.id;
+  useEffect(() => {
+    getChatAccess(partnerAccesses, setLiveChatAccess, partnerAdmin);
+  }, [partnerAccesses, partnerAdmin]);
 
   useEffect(() => {
     const coursePartners = course.content.included_for_partners;
     setIncorrectAccess(
       !hasAccessToPage(isLoggedIn, false, coursePartners, partnerAccesses, partnerAdmin),
     );
+  }, [partnerAccesses, course.content.included_for_partners, partnerAdmin]);
 
-    const liveAccess = partnerAccesses.find(
-      (partnerAccess) => partnerAccess.featureLiveChat === true,
-    );
-
-    if (liveAccess || liveCourseAccess) setLiveChatAccess(true);
-  }, [partnerAccesses, liveCourseAccess, course.content.included_for_partners, partnerAdmin]);
-
-  // TODO refactor session completion logic
   useEffect(() => {
-    course.content.weeks.map((week: any) => {
-      week.sessions.map((session: any) => {
-        session === storyUuid && setWeekString(week.name);
-      });
-    });
-
-    const userCourse = courses.find((c: Course) => Number(c.storyblokId) === course.id);
-
-    if (userCourse) {
-      const userSession = userCourse.sessions.find(
-        (session: Session) => Number(session.storyblokId) === storyId,
-      );
-
-      if (userSession) {
-        userSession.completed
-          ? setSessionProgress(PROGRESS_STATUS.COMPLETED)
-          : setSessionProgress(PROGRESS_STATUS.STARTED);
-      }
-    }
+    getSessionCompletion(course, courses, storyUuid, storyId, setWeekString, setSessionProgress);
   }, [courses, course.content.weeks, storyId, course.id, storyUuid]);
 
-  useEffect(() => {
-    if (openTranscriptModal === null) return;
-
-    logEvent(
-      openTranscriptModal ? SESSION_VIDEO_TRANSCRIPT_OPENED : SESSION_VIDEO_TRANSCRIPT_CLOSED,
-      {
-        ...eventData,
-        session_name: name,
-        course_name: name,
-      },
-    );
-    if (openTranscriptModal && sessionProgress === PROGRESS_STATUS.NOT_STARTED) {
-      callStartSession();
-    }
-  }, [openTranscriptModal]);
-
-  useEffect(() => {
-    if (!videoStarted || sessionProgress !== PROGRESS_STATUS.NOT_STARTED) return;
-
-    if (videoStarted) {
-      callStartSession();
-    }
-  }, [videoStarted]);
-
-  useEffect(() => {
-    logEvent(SESSION_VIEWED, eventData);
-  }, []);
-
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
-
   const eventData = {
     ...eventUserData,
     session_name: name,
@@ -195,31 +108,6 @@ const StoryblokSessionIbaPage = (props: StoryblokSessionIbaPageProps) => {
     course_storyblok_id: course.id,
   };
 
-  async function callStartSession() {
-    logEvent(SESSION_STARTED_REQUEST, {
-      ...eventData,
-      session_name: name,
-      course_name: name,
-    });
-
-    const startSessionResponse = await startSession({
-      storyblokId: storyId,
-    });
-
-    if (startSessionResponse.data) {
-      logEvent(SESSION_STARTED_SUCCESS, eventData);
-    }
-
-    if (startSessionResponse.error) {
-      const error = startSessionResponse.error;
-
-      logEvent(SESSION_STARTED_ERROR, eventData);
-      (window as any).Rollbar?.error('Session started error', error);
-
-      throw error;
-    }
-  }
-
   return (
     <Box
       {...storyblokEditable({
@@ -248,78 +136,24 @@ const StoryblokSessionIbaPage = (props: StoryblokSessionIbaPageProps) => {
         <Container sx={containerStyle}></Container>
       ) : (
         <Box>
-          <Header
-            title={name}
-            introduction={description}
-            imageSrc={illustrationPerson4Peach}
-            imageAlt={'alt.personTea'}
-            progressStatus={sessionProgress}
-          >
-            <Button
-              variant="outlined"
-              href="/courses"
-              sx={{ background: theme.palette.background.default }}
-              size="small"
-              component={Link}
-            >
-              Courses
-            </Button>
-
-            <CircleIcon color="error" sx={{ ...dotStyle, marginX: 1 }} />
-
-            <Button
-              variant="outlined"
-              sx={{ background: theme.palette.background.default }}
-              href={`/${course.full_slug}`}
-              size="small"
-              component={Link}
-            >
-              {course.name}
-            </Button>
-            <Typography sx={sessionSubtitleStyle} variant="body2">
-              {weekString} - {subtitle}
-            </Typography>
-          </Header>
+          <SessionHeader
+            description={description}
+            name={name}
+            sessionProgress={sessionProgress}
+            course={course}
+            weekString={weekString}
+            subtitle={subtitle}
+          />
           <Container sx={containerStyle}>
             <Box sx={cardColumnStyle}>
-              {video && (
-                <>
-                  <SessionContentCard
-                    title={t('sessionDetail.videoTitle')}
-                    titleIcon={SlowMotionVideoIcon}
-                    eventPrefix="SESSION_VIDEO"
-                    eventData={eventData}
-                    initialExpanded={true}
-                  >
-                    <Typography mb={3}>
-                      {t.rich('sessionDetail.videoDescription', {
-                        transcriptLink: (children) => (
-                          <MuiLink
-                            component="button"
-                            variant="body1"
-                            onClick={() => setOpenTranscriptModal(true)}
-                          >
-                            {children}
-                          </MuiLink>
-                        ),
-                      })}
-                    </Typography>
-                    <Video
-                      url={video.url}
-                      setVideoStarted={setVideoStarted}
-                      eventData={eventData}
-                      eventPrefix="SESSION"
-                      containerStyles={{ mx: 'auto', my: 2 }}
-                    />
-                    <VideoTranscriptModal
-                      videoName={name}
-                      content={video_transcript}
-                      setOpenTranscriptModal={setOpenTranscriptModal}
-                      openTranscriptModal={openTranscriptModal}
-                    />
-                  </SessionContentCard>
-                </>
-              )}
+              <SessionVideo
+                eventData={eventData}
+                name={name}
+                video={video}
+                storyId={storyId}
+                sessionProgress={sessionProgress}
+                video_transcript={video_transcript}
+              />
               {activity.content &&
                 (activity.content?.length > 1 || activity.content[0].content) && (
                   <>
@@ -336,49 +170,7 @@ const StoryblokSessionIbaPage = (props: StoryblokSessionIbaPageProps) => {
                   </>
                 )}
               {bonus && <MultipleBonusContent bonus={bonus} eventData={eventData} />}
-              {liveChatAccess && (
-                <>
-                  <Dots />
-                  <SessionContentCard
-                    title={t('sessionDetail.chat.title')}
-                    titleIcon={ChatBubbleOutlineIcon}
-                    titleIconSize={24}
-                    eventPrefix="SESSION_CHAT"
-                    eventData={eventData}
-                  >
-                    <Typography paragraph>{t('sessionDetail.chat.description')}</Typography>
-                    <Typography paragraph>{t('sessionDetail.chat.videoIntro')}</Typography>
-                    <Video
-                      eventPrefix="SESSION_CHAT_VIDEO"
-                      eventData={eventData}
-                      url={t('sessionDetail.chat.videoLink')}
-                      containerStyles={{ mx: 'auto', my: 2 }}
-                    ></Video>
-                    <Box sx={chatDetailIntroStyle}>
-                      <Typography>{t('sessionDetail.chat.detailIntro')}</Typography>
-                    </Box>
-                    <Box>
-                      <ul>
-                        <li>{t('sessionDetail.chat.detailPrivacy')}</li>
-                        <li>{t('sessionDetail.chat.detailTimezone')}</li>
-                        <li>{t('sessionDetail.chat.detailLanguage')}</li>
-                        <li>{t('sessionDetail.chat.detailLegal')}</li>
-                        <li>{t('sessionDetail.chat.detailImmediateHelp')}</li>
-                      </ul>
-                    </Box>
-                    <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
-                      <Button
-                        variant="contained"
-                        href="/messaging"
-                        component={Link}
-                        startIcon={<ChatBubbleOutlineIcon color="error" />}
-                      >
-                        {t('sessionDetail.chat.startButton')}
-                      </Button>
-                    </Box>
-                  </SessionContentCard>
-                </>
-              )}
+              {liveChatAccess && <SessionChat eventData={eventData} />}
               {sessionProgress !== PROGRESS_STATUS.COMPLETED && (
                 <SessionCompleteButton storyId={storyId} eventData={eventData} />
               )}
diff --git a/components/storyblok/StoryblokSessionPage.tsx b/components/storyblok/StoryblokSessionPage.tsx
index abf5be1ee..017d9fc93 100644
--- a/components/storyblok/StoryblokSessionPage.tsx
+++ b/components/storyblok/StoryblokSessionPage.tsx
@@ -1,39 +1,26 @@
-import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
-import CircleIcon from '@mui/icons-material/Circle';
 import LinkIcon from '@mui/icons-material/Link';
-import SlowMotionVideoIcon from '@mui/icons-material/SlowMotionVideo';
 import StarBorderIcon from '@mui/icons-material/StarBorder';
-import { Box, Button, Container, Link as MuiLink, Typography } from '@mui/material';
+import { Box, Container } from '@mui/material';
 import { ISbRichtext, ISbStoryData, storyblokEditable } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import Head from 'next/head';
 import { useEffect, useState } from 'react';
 import { render } from 'storyblok-rich-text-react-renderer';
 import SessionContentCard from '../../components/cards/SessionContentCard';
-import Link from '../../components/common/Link';
-import Header from '../../components/layout/Header';
-import { SessionCompleteButton } from '../../components/session/SessionCompleteButton';
-import Video from '../../components/video/Video';
-import VideoTranscriptModal from '../../components/video/VideoTranscriptModal';
 import { PROGRESS_STATUS } from '../../constants/enums';
-import {
-  SESSION_STARTED_ERROR,
-  SESSION_STARTED_REQUEST,
-  SESSION_STARTED_SUCCESS,
-  SESSION_VIDEO_TRANSCRIPT_CLOSED,
-  SESSION_VIDEO_TRANSCRIPT_OPENED,
-  SESSION_VIEWED,
-} from '../../constants/events';
 import { useTypedSelector } from '../../hooks/store';
-import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg';
-import { useStartSessionMutation } from '../../store/api';
-import { Course, Session } from '../../store/coursesSlice';
 import { columnStyle } from '../../styles/common';
-import theme from '../../styles/theme';
 import { courseIsLiveNow, courseIsLiveSoon } from '../../utils/courseLiveStatus';
+import { getChatAccess } from '../../utils/getChatAccess';
+import { getSessionCompletion } from '../../utils/getSessionCompletion';
 import hasAccessToPage from '../../utils/hasAccessToPage';
-import logEvent, { getEventUserData } from '../../utils/logEvent';
+import { getEventUserData } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
+import { Dots } from '../common/Dots';
+import { SessionChat } from '../session/SessionChat';
+import { SessionCompleteButton } from '../session/SessionCompleteButton';
+import { SessionHeader } from '../session/SessionHeader';
+import { SessionVideo } from '../session/SessionVideo';
 
 const containerStyle = {
   backgroundColor: 'secondary.light',
@@ -45,23 +32,6 @@ const cardColumnStyle = {
   gap: { xs: 2, md: 3 },
 } as const;
 
-const dotsStyle = {
-  ...columnStyle,
-  color: 'primary.dark',
-  gap: { xs: 1, md: 1.25 },
-} as const;
-
-const dotStyle = {
-  width: { xs: 8, md: 10 },
-  height: { xs: 8, md: 10 },
-} as const;
-
-const sessionSubtitleStyle = {
-  marginTop: '0.75rem !important',
-} as const;
-
-const chatDetailIntroStyle = { marginTop: 3, marginBottom: 1.5 } as const;
-
 export interface StoryblokSessionPageProps {
   storyId: number;
   storyUuid: string;
@@ -104,115 +74,35 @@ const StoryblokSessionPage = (props: StoryblokSessionPageProps) => {
   const t = useTranslations('Courses');
 
   const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
-  const userEmail = useTypedSelector((state) => state.user.email);
   const isLoggedIn = useTypedSelector((state) => Boolean(state.user.id));
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
   const courses = useTypedSelector((state) => state.courses);
 
   const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
-  const [liveChatAccess, setLiveChatAccess] = useState<boolean>(false);
   const [sessionProgress, setSessionProgress] = useState<PROGRESS_STATUS>(
     PROGRESS_STATUS.NOT_STARTED,
   );
-  const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
-  const [videoStarted, setVideoStarted] = useState<boolean>(false);
   const [weekString, setWeekString] = useState<string>('');
-  const [startSession, { isLoading: startSessionIsLoading }] = useStartSessionMutation();
-
+  const [liveChatAccess, setLiveChatAccess] = useState<boolean>(false);
   const courseComingSoon: boolean = course.content.coming_soon;
   const courseLiveSoon: boolean = courseIsLiveSoon(course);
   const courseLiveNow: boolean = courseIsLiveNow(course);
-  // only show live content to public users
-  const liveCourseAccess = partnerAccesses.length === 0 && !partnerAdmin.id;
+
+  useEffect(() => {
+    getChatAccess(partnerAccesses, setLiveChatAccess, partnerAdmin);
+  }, [partnerAccesses, partnerAdmin]);
 
   useEffect(() => {
     const coursePartners = course.content.included_for_partners;
     setIncorrectAccess(
       !hasAccessToPage(isLoggedIn, false, coursePartners, partnerAccesses, partnerAdmin),
     );
-
-    const liveAccess = partnerAccesses.find(
-      (partnerAccess) => partnerAccess.featureLiveChat === true,
-    );
-
-    if (liveAccess || liveCourseAccess) setLiveChatAccess(true);
-  }, [partnerAccesses, course.content.included_for_partners, liveCourseAccess, partnerAdmin]);
-
-  useEffect(() => {
-    course.content.weeks.map((week: any) => {
-      week.sessions.map((session: any) => {
-        session === storyUuid && setWeekString(week.name);
-      });
-    });
-
-    const userCourse = courses.find((c: Course) => Number(c.storyblokId) === course.id);
-
-    if (userCourse) {
-      const userSession = userCourse.sessions.find(
-        (session: Session) => Number(session.storyblokId) === storyId,
-      );
-
-      if (userSession) {
-        userSession.completed
-          ? setSessionProgress(PROGRESS_STATUS.COMPLETED)
-          : setSessionProgress(PROGRESS_STATUS.STARTED);
-      }
-    }
-  }, [courses, course.content.weeks, course.id, storyId, storyUuid]);
-
-  useEffect(() => {
-    if (openTranscriptModal === null) return;
-
-    logEvent(
-      openTranscriptModal ? SESSION_VIDEO_TRANSCRIPT_OPENED : SESSION_VIDEO_TRANSCRIPT_CLOSED,
-      {
-        ...eventData,
-        session_name: name,
-        course_name: name,
-      },
-    );
-    if (openTranscriptModal && sessionProgress === PROGRESS_STATUS.NOT_STARTED) {
-      callStartSession();
-    }
-  }, [openTranscriptModal]);
-
-  async function callStartSession() {
-    logEvent(SESSION_STARTED_REQUEST, {
-      ...eventData,
-      session_name: name,
-      course_name: name,
-    });
-
-    const startSessionResponse = await startSession({
-      storyblokId: storyId,
-    });
-
-    if (startSessionResponse.data) {
-      logEvent(SESSION_STARTED_SUCCESS, eventData);
-    }
-
-    if (startSessionResponse.error) {
-      const error = startSessionResponse.error;
-
-      logEvent(SESSION_STARTED_ERROR, eventData);
-      (window as any).Rollbar?.error('Session started error', error);
-
-      throw error;
-    }
-  }
+  }, [partnerAccesses, course.content.included_for_partners, partnerAdmin]);
 
   useEffect(() => {
-    if (!videoStarted || sessionProgress !== PROGRESS_STATUS.NOT_STARTED) return;
-
-    if (videoStarted) {
-      callStartSession();
-    }
-  }, [videoStarted]);
-
-  useEffect(() => {
-    logEvent(SESSION_VIEWED, eventData);
-  }, []);
+    getSessionCompletion(course, courses, storyUuid, storyId, setWeekString, setSessionProgress);
+  }, [courses, course.content.weeks, storyId, course.id, storyUuid]);
 
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
   const eventData = {
@@ -227,15 +117,6 @@ const StoryblokSessionPage = (props: StoryblokSessionPageProps) => {
     course_live_now: courseLiveNow,
   };
 
-  const Dots = () => {
-    return (
-      <Box sx={dotsStyle}>
-        <CircleIcon sx={dotStyle} />
-        <CircleIcon sx={dotStyle} />
-      </Box>
-    );
-  };
-
   return (
     <Box
       {...storyblokEditable({
@@ -265,82 +146,28 @@ const StoryblokSessionPage = (props: StoryblokSessionPageProps) => {
         <Container sx={containerStyle}></Container>
       ) : (
         <Box>
-          <Header
-            title={name}
-            introduction={description}
-            imageSrc={illustrationPerson4Peach}
-            imageAlt={'alt.personTea'}
-            progressStatus={sessionProgress}
-          >
-            <Button
-              variant="outlined"
-              href="/courses"
-              sx={{ background: theme.palette.background.default }}
-              size="small"
-              component={Link}
-            >
-              Courses
-            </Button>
-
-            <CircleIcon color="error" sx={{ ...dotStyle, marginX: 1 }} />
-
-            <Button
-              variant="outlined"
-              sx={{ background: theme.palette.background.default }}
-              href={`/${course.full_slug}`}
-              size="small"
-              component={Link}
-            >
-              {course.name}
-            </Button>
-            <Typography sx={sessionSubtitleStyle} variant="body2">
-              {weekString} - {t('session')} {storyPosition / 10 - 1}
-            </Typography>
-          </Header>
+          <SessionHeader
+            description={description}
+            name={name}
+            sessionProgress={sessionProgress}
+            course={course}
+            weekString={weekString}
+            storyPosition={storyPosition}
+          />
           <Container sx={containerStyle}>
             {coming_soon && (
               <Box maxWidth={700}>{render(coming_soon_content, RichTextOptions)}</Box>
             )}
             {!coming_soon && (
               <Box sx={cardColumnStyle}>
-                {video && (
-                  <>
-                    <SessionContentCard
-                      title={t('sessionDetail.videoTitle')}
-                      titleIcon={SlowMotionVideoIcon}
-                      eventPrefix="SESSION_VIDEO"
-                      eventData={eventData}
-                      initialExpanded={true}
-                    >
-                      <Typography mb={3}>
-                        {t.rich('sessionDetail.videoDescription', {
-                          transcriptLink: (children) => (
-                            <MuiLink
-                              component="button"
-                              variant="body1"
-                              onClick={() => setOpenTranscriptModal(true)}
-                            >
-                              {children}
-                            </MuiLink>
-                          ),
-                        })}
-                      </Typography>
-                      <Video
-                        url={video.url}
-                        setVideoStarted={setVideoStarted}
-                        eventData={eventData}
-                        eventPrefix="SESSION"
-                        containerStyles={{ mx: 'auto', my: 2 }}
-                      />
-                      <VideoTranscriptModal
-                        videoName={name}
-                        content={video_transcript}
-                        setOpenTranscriptModal={setOpenTranscriptModal}
-                        openTranscriptModal={openTranscriptModal}
-                      />
-                    </SessionContentCard>
-                  </>
-                )}
+                <SessionVideo
+                  eventData={eventData}
+                  name={name}
+                  video={video}
+                  storyId={storyId}
+                  sessionProgress={sessionProgress}
+                  video_transcript={video_transcript}
+                />
                 {activity.content &&
                   (activity.content?.length > 1 || activity.content[0].content) && (
                     <>
@@ -370,49 +197,7 @@ const StoryblokSessionPage = (props: StoryblokSessionPageProps) => {
                     </SessionContentCard>
                   </>
                 )}
-                {liveChatAccess && (
-                  <>
-                    <Dots />
-                    <SessionContentCard
-                      title={t('sessionDetail.chat.title')}
-                      titleIcon={ChatBubbleOutlineIcon}
-                      titleIconSize={24}
-                      eventPrefix="SESSION_CHAT"
-                      eventData={eventData}
-                    >
-                      <Typography paragraph>{t('sessionDetail.chat.description')}</Typography>
-                      <Typography paragraph>{t('sessionDetail.chat.videoIntro')}</Typography>
-                      <Video
-                        eventPrefix="SESSION_CHAT_VIDEO"
-                        eventData={eventData}
-                        url={t('sessionDetail.chat.videoLink')}
-                        containerStyles={{ mx: 'auto', my: 2 }}
-                      ></Video>
-                      <Box sx={chatDetailIntroStyle}>
-                        <Typography>{t('sessionDetail.chat.detailIntro')}</Typography>
-                      </Box>
-                      <Box>
-                        <ul>
-                          <li>{t('sessionDetail.chat.detailPrivacy')}</li>
-                          <li>{t('sessionDetail.chat.detailTimezone')}</li>
-                          <li>{t('sessionDetail.chat.detailLanguage')}</li>
-                          <li>{t('sessionDetail.chat.detailLegal')}</li>
-                          <li>{t('sessionDetail.chat.detailImmediateHelp')}</li>
-                        </ul>
-                      </Box>
-                      <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
-                        <Button
-                          variant="contained"
-                          href="/messaging"
-                          component={Link}
-                          startIcon={<ChatBubbleOutlineIcon color="error" />}
-                        >
-                          {t('sessionDetail.chat.startButton')}
-                        </Button>
-                      </Box>
-                    </SessionContentCard>
-                  </>
-                )}
+                {liveChatAccess && <SessionChat eventData={eventData} />}
                 {sessionProgress !== PROGRESS_STATUS.COMPLETED && (
                   <SessionCompleteButton storyId={storyId} eventData={eventData} />
                 )}
diff --git a/utils/getChatAccess.ts b/utils/getChatAccess.ts
new file mode 100644
index 000000000..bebb548d3
--- /dev/null
+++ b/utils/getChatAccess.ts
@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction } from 'react';
+import { PartnerAccesses } from '../store/partnerAccessSlice';
+import { PartnerAdmin } from '../store/partnerAdminSlice';
+
+export const getChatAccess = (
+  partnerAccesses: PartnerAccesses,
+  setLiveChatAccess: Dispatch<SetStateAction<boolean>>,
+  partnerAdmin: PartnerAdmin,
+) => {
+  const liveCourseAccess = partnerAccesses.length === 0 && !partnerAdmin.id;
+  const liveAccess = partnerAccesses.find((partnerAccess) => partnerAccess.featureLiveChat);
+  if (liveAccess || liveCourseAccess) setLiveChatAccess(true);
+};
diff --git a/utils/getSessionCompletion.ts b/utils/getSessionCompletion.ts
new file mode 100644
index 000000000..379c0c900
--- /dev/null
+++ b/utils/getSessionCompletion.ts
@@ -0,0 +1,36 @@
+import { Courses, Session } from '../store/coursesSlice';
+import { Dispatch, SetStateAction } from 'react';
+import { PROGRESS_STATUS } from '../constants/enums';
+import { ISbStoryData } from '@storyblok/react';
+import { ISbComponentType } from 'storyblok-js-client';
+
+export const getSessionCompletion = (
+  course: ISbStoryData<ISbComponentType<string> & { [p: string]: any }>,
+  courses: Courses,
+  storyUuid: string,
+  storyId: number,
+  setWeekString: Dispatch<SetStateAction<string>>,
+  setSessionProgress: Dispatch<SetStateAction<PROGRESS_STATUS>>,
+) => {
+  course.content.weeks.map((week: any) => {
+    week.sessions.map((session: any) => {
+      if (session === storyUuid) {
+        setWeekString(week.name);
+      }
+    });
+  });
+
+  const userCourse = courses.find((c: any) => Number(c.storyblokId) === course.id);
+
+  if (userCourse) {
+    const userSession = userCourse.sessions.find(
+      (session: Session) => Number(session.storyblokId) === storyId,
+    );
+
+    if (userSession) {
+      userSession.completed
+        ? setSessionProgress(PROGRESS_STATUS.COMPLETED)
+        : setSessionProgress(PROGRESS_STATUS.STARTED);
+    }
+  }
+};