diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
index 58ddbb74cdf..750b2a86178 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { SnackbarProvider } from 'notistack'
 import React from 'react'
 
@@ -789,90 +789,6 @@ describe('MultiStepForm', () => {
       })
     })
 
-    describe('Edit Manually button', () => {
-      it('should hide edit manually button when on the language screen', () => {
-        const journey = {
-          id: 'test-journey-id'
-        } as unknown as Journey
-
-        setRouterQuery({ journeyId: 'test-journey-id' })
-
-        render(
-          <FlagsProvider flags={defaultFlags}>
-            <SnackbarProvider>
-              <JourneyProvider value={{ journey }}>
-                <MultiStepForm />
-              </JourneyProvider>
-            </SnackbarProvider>
-          </FlagsProvider>
-        )
-
-        const editButton = screen.getByText('Edit Manually')
-        expect(editButton).toHaveStyle('visibility: hidden')
-      })
-
-      it('should show edit manually button when on any screen after the first screen', () => {
-        const journey = {
-          id: 'test-journey-id'
-        } as unknown as Journey
-
-        setRouterQuery({ journeyId: 'test-journey-id' })
-
-        const { rerender } = render(
-          <FlagsProvider flags={defaultFlags}>
-            <SnackbarProvider>
-              <JourneyProvider value={{ journey: journey }}>
-                <MultiStepForm />
-              </JourneyProvider>
-            </SnackbarProvider>
-          </FlagsProvider>
-        )
-
-        const editButton = screen.getByText('Edit Manually')
-        expect(editButton).toHaveStyle('visibility: hidden')
-
-        fireEvent.click(screen.getByTestId('language-next'))
-        setRouterQuery({ journeyId: 'test-journey-id', screen: 'social' })
-        rerender(
-          <FlagsProvider flags={defaultFlags}>
-            <SnackbarProvider>
-              <JourneyProvider value={{ journey: journey }}>
-                <MultiStepForm />
-              </JourneyProvider>
-            </SnackbarProvider>
-          </FlagsProvider>
-        )
-        const editButtonAfterRerender = screen.getByText('Edit Manually')
-        expect(editButtonAfterRerender).toHaveStyle('visibility: visible')
-        expect(editButtonAfterRerender).toHaveAttribute(
-          'href',
-          '/journeys/test-journey-id'
-        )
-      })
-
-      it('should disable edit manually button if journey is not found', () => {
-        const journey = {
-          id: null
-        } as unknown as Journey
-
-        setRouterQuery({ journeyId: 'test-journey-id' })
-
-        render(
-          <FlagsProvider flags={defaultFlags}>
-            <SnackbarProvider>
-              <JourneyProvider value={{ journey }}>
-                <MultiStepForm />
-              </JourneyProvider>
-            </SnackbarProvider>
-          </FlagsProvider>
-        )
-        expect(screen.getByText('Edit Manually')).toHaveAttribute(
-          'aria-disabled',
-          'true'
-        )
-      })
-    })
-
     describe('progress stepper', () => {
       it('should not render progress stepper when journey has no customization capabilities', async () => {
         const journeyWithNoCapabilities = {
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
index 26318601407..98d5c85c3a8 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
@@ -1,8 +1,6 @@
 import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
 import Container from '@mui/material/Container'
 import Stack from '@mui/material/Stack'
-import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { useUser } from 'next-firebase-auth'
 import { useTranslation } from 'next-i18next'
@@ -10,7 +8,6 @@ import { ReactElement, useMemo } from 'react'
 
 import { useJourney } from '@core/journeys/ui/JourneyProvider'
 import { useFlags } from '@core/shared/ui/FlagsProvider'
-import Edit3 from '@core/shared/ui/icons/Edit3'
 
 import {
   CUSTOMIZE_SCREEN_QUERY_KEY,
@@ -87,7 +84,6 @@ export function MultiStepForm(): ReactElement {
   const { customizableMedia, templateCustomizationGuestFlow } = useFlags()
 
   const journeyId = journey?.id ?? ''
-  const link = `/journeys/${journeyId}`
 
   const {
     screens,
@@ -150,26 +146,6 @@ export function MultiStepForm(): ReactElement {
         }}
       >
         <Stack gap={{ xs: 6, sm: 6 }} data-testid="MultiStepForm">
-          <NextLink href={link} passHref legacyBehavior>
-            <Button
-              variant="text"
-              color="primary"
-              startIcon={<Edit3 />}
-              sx={{
-                alignSelf: 'flex-end',
-                mr: '4px',
-                fontWeight: 'bold',
-                visibility: activeScreen === 'language' ? 'hidden' : 'visible',
-                '& .MuiButton-startIcon': {
-                  marginRight: 0.3,
-                  marginTop: 1
-                }
-              }}
-              disabled={journey?.id == null}
-            >
-              {t('Edit Manually')}
-            </Button>
-          </NextLink>
           {(hasEditableText ||
             hasCustomizableLinks ||
             hasCustomizableMedia) && (
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
index 9fc51812375..9c94fbfbcd3 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/DoneScreen/DoneScreen.tsx
@@ -16,6 +16,7 @@ import Play3Icon from '@core/shared/ui/icons/Play3'
 
 import { ShareItem } from '../../../../Editor/Toolbar/Items/ShareItem'
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 interface DoneScreenProps {
   handleScreenNavigation?: (screen: CustomizationScreen) => void
@@ -40,48 +41,12 @@ export function DoneScreen({
 
   return (
     <Stack alignItems="center" sx={{ pb: 4, px: { xs: 4, sm: 18 } }}>
-      <Typography
-        variant="h4"
-        gutterBottom
-        display={{ xs: 'none', sm: 'block' }}
-        sx={{ mb: { xs: 0, sm: 2 } }}
+      <ScreenWrapper
+        title={t('Ready to Share!')}
+        subtitle={t('Share your unique link on any platform.')}
+        headerSx={{ pb: { xs: 4, sm: 6 } }}
       >
-        {t('Ready to Share!')}
-      </Typography>
-      <Typography
-        variant="h6"
-        display={{ xs: 'block', sm: 'none' }}
-        gutterBottom
-        sx={{ mb: { xs: 0, sm: 2 } }}
-      >
-        {t('Ready to Share!')}
-      </Typography>
-      <Typography
-        color="text.secondary"
-        align="center"
-        variant="subtitle2"
-        display={{ xs: 'none', sm: 'block' }}
-        sx={{
-          maxWidth: { xs: '100%', sm: '90%' },
-          pb: 6
-        }}
-      >
-        {t('Share your unique link on any platform.')}
-      </Typography>
-      <Typography
-        color="text.secondary"
-        align="center"
-        variant="body2"
-        display={{ xs: 'block', sm: 'none' }}
-        sx={{
-          maxWidth: { xs: '100%', sm: '90%' },
-          pb: 4
-        }}
-      >
-        {t('Share your unique link on any platform.')}
-      </Typography>
-
-      {steps.length > 0 && (
+        {steps.length > 0 && (
         <TemplateCardPreviewItem step={steps[0]} variant="preview" />
       )}
 
@@ -131,6 +96,7 @@ export function DoneScreen({
           {t('Go To Projects Dashboard')}
         </Typography>
       </Button>
+      </ScreenWrapper>
     </Stack>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
index a1fe586c64c..8eead9c3c37 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
@@ -24,6 +24,7 @@ import { useGetParentTemplateJourneyLanguages } from '../../../../../libs/useGet
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 import { CardsPreview } from '../LinksScreen/CardsPreview'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 import { JourneyCustomizeTeamSelect } from './JourneyCustomizeTeamSelect'
 
@@ -168,116 +169,97 @@ export function LanguageScreen({
 
   return (
     <Stack alignItems="center" gap={4} sx={{ px: { xs: 0, sm: 20 } }}>
-      <Stack alignItems="center" sx={{ pb: { xs: 6, sm: 10 } }}>
-        <Typography
-          variant="h4"
-          display={{ xs: 'none', sm: 'block' }}
-          gutterBottom
-          sx={{ mb: 2 }}
-        >
-          {t("Let's Get Started!")}
-        </Typography>
-        <Typography
-          variant="h6"
-          display={{ xs: 'block', sm: 'none' }}
-          gutterBottom
-        >
-          {t('Get Started')}
-        </Typography>
-        <Typography
-          variant="subtitle2"
-          color="text.secondary"
-          align="center"
-          display={{ xs: 'none', sm: 'block' }}
-        >
-          {t('A few quick edits and your template will be ready to share.')}
-        </Typography>
+      <ScreenWrapper
+        title={t("Let's Get Started!")}
+        mobileTitle={t('Get Started')}
+        subtitle={t(
+          'A few quick edits and your template will be ready to share.'
+        )}
+        mobileSubtitle={t("A few quick edits and it's ready to share!")}
+        headerSx={{ pb: { xs: 6, sm: 10 } }}
+      >
         <Typography
           variant="subtitle2"
-          color="text.secondary"
-          align="center"
-          display={{ xs: 'block', sm: 'none' }}
+          gutterBottom
+          sx={{ mb: { xs: 0, sm: 2 } }}
         >
-          {t("A few quick edits and it's ready to share!")}
+          {`'${journey?.title ?? ''}'`}
         </Typography>
-      </Stack>
 
-      <Typography
-        variant="subtitle2"
-        gutterBottom
-        sx={{ mb: { xs: 0, sm: 2 } }}
-      >
-        {`'${journey?.title ?? ''}'`}
-      </Typography>
-
-      {steps.length > 0 && <CardsPreview steps={steps} />}
+        {steps.length > 0 && <CardsPreview steps={steps} />}
 
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        enableReinitialize
-        onSubmit={handleSubmit}
-      >
-        {({ handleSubmit, setFieldValue, values }) => (
-          <Form style={{ width: '100%' }}>
-            <FormControl
-              sx={{
-                width: { xs: '100%', sm: FORM_SM_BREAKPOINT_WIDTH },
-                alignSelf: 'center'
-              }}
-            >
-              <Stack gap={2}>
-                <Typography variant="h6" display={{ xs: 'none', sm: 'block' }}>
-                  {t('Select a language')}
-                </Typography>
-                <Typography
-                  variant="body2"
-                  display={{ xs: 'block', sm: 'none' }}
-                >
-                  {t('Select a language')}
-                </Typography>
-                <LanguageAutocomplete
-                  value={values.languageSelect}
-                  languages={languages.map((language) => ({
-                    id: language?.id,
-                    name: language?.name,
-                    slug: language?.slug
-                  }))}
-                  onChange={(value) => setFieldValue('languageSelect', value)}
-                />
-                {isSignedIn && (
-                  <>
-                    <Typography
-                      variant="h6"
-                      display={{ xs: 'none', sm: 'block' }}
-                      sx={{ mt: 4 }}
-                    >
-                      {t('Select a team')}
-                    </Typography>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          enableReinitialize
+          onSubmit={handleSubmit}
+        >
+          {({ handleSubmit, setFieldValue, values }) => (
+            <Form style={{ width: '100%' }}>
+              <FormControl
+                sx={{
+                  width: { xs: '100%', sm: FORM_SM_BREAKPOINT_WIDTH },
+                  alignSelf: 'center'
+                }}
+              >
+                <Stack gap={2}>
+                  <Typography
+                    variant="h6"
+                    display={{ xs: 'none', sm: 'block' }}
+                  >
+                    {t('Select a language')}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    display={{ xs: 'block', sm: 'none' }}
+                  >
+                    {t('Select a language')}
+                  </Typography>
+                  <LanguageAutocomplete
+                    value={values.languageSelect}
+                    languages={languages.map((language) => ({
+                      id: language?.id,
+                      name: language?.name,
+                      slug: language?.slug
+                    }))}
+                    onChange={(value) =>
+                      setFieldValue('languageSelect', value)
+                    }
+                  />
+                  {isSignedIn && (
+                    <>
+                      <Typography
+                        variant="h6"
+                        display={{ xs: 'none', sm: 'block' }}
+                        sx={{ mt: 4 }}
+                      >
+                        {t('Select a team')}
+                      </Typography>
 
-                    <Typography
-                      variant="body2"
-                      display={{ xs: 'block', sm: 'none' }}
-                      sx={{ mt: 4 }}
-                    >
-                      {t('Select a team')}
-                    </Typography>
-                    <JourneyCustomizeTeamSelect />
-                  </>
-                )}
-                <CustomizeFlowNextButton
-                  label={t('Next')}
-                  onClick={() => handleSubmit()}
-                  disabled={
-                    (templateCustomizationGuestFlow && !isSignedIn) || loading
-                  }
-                  ariaLabel={t('Next')}
-                />
-              </Stack>
-            </FormControl>
-          </Form>
-        )}
-      </Formik>
+                      <Typography
+                        variant="body2"
+                        display={{ xs: 'block', sm: 'none' }}
+                        sx={{ mt: 4 }}
+                      >
+                        {t('Select a team')}
+                      </Typography>
+                      <JourneyCustomizeTeamSelect />
+                    </>
+                  )}
+                  <CustomizeFlowNextButton
+                    label={t('Next')}
+                    onClick={() => handleSubmit()}
+                    disabled={
+                      (templateCustomizationGuestFlow && !isSignedIn) || loading
+                    }
+                    ariaLabel={t('Next')}
+                  />
+                </Stack>
+              </FormControl>
+            </Form>
+          )}
+        </Formik>
+      </ScreenWrapper>
     </Stack>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
index ff41feeb824..f128075d367 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
@@ -1,6 +1,5 @@
 import { useMutation } from '@apollo/client'
 import Stack from '@mui/material/Stack'
-import Typography from '@mui/material/Typography'
 import { Formik, FormikHelpers, FormikProvider } from 'formik'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useMemo } from 'react'
@@ -28,6 +27,7 @@ import { countries } from '../../../../Editor/Slider/Settings/CanvasDetails/Prop
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { getJourneyLinks } from '../../../utils/getJourneyLinks'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 import { CardsPreview } from './CardsPreview'
 import { LinksForm } from './LinksForm'
@@ -197,49 +197,18 @@ export function LinksScreen({
         width: '100%'
       }}
     >
-      <Stack alignItems="center" sx={{ pb: 1 }}>
-        <Typography
-          variant="h4"
-          display={{ xs: 'none', sm: 'block' }}
-          gutterBottom
-          sx={{
-            mb: { xs: 0, sm: 2 }
-          }}
-        >
-          {t('Links')}
-        </Typography>
-        <Typography
-          variant="h6"
-          display={{ xs: 'block', sm: 'none' }}
-          gutterBottom
-          sx={{
-            mb: { xs: 0, sm: 2 }
-          }}
-        >
-          {t('Links')}
-        </Typography>
-        <Typography
-          variant="subtitle2"
-          display={{ xs: 'none', sm: 'block' }}
-          color="text.secondary"
-          align="center"
-        >
-          {t(
-            'This content contains buttons linking to external sites. Check them and update the links below.'
-          )}
-        </Typography>
-        <Typography
-          variant="body2"
-          display={{ xs: 'block', sm: 'none' }}
-          color="text.secondary"
-          align="center"
-        >
-          {t(
-            'Buttons here point to external sites. Check and update the links.'
-          )}
-        </Typography>
-      </Stack>
-      <CardsPreview steps={treeBlocks} />
+      <ScreenWrapper
+        title={t('Links')}
+        subtitle={t(
+          'This content contains buttons linking to external sites. Check them and update the links below.'
+        )}
+        mobileSubtitle={t(
+          'Buttons here point to external sites. Check and update the links.'
+        )}
+        headerSx={{ pb: 1 }}
+      >
+        <CardsPreview steps={treeBlocks} />
+      </ScreenWrapper>
       <Formik
         enableReinitialize
         initialValues={links.reduce<Record<string, string>>((acc, link) => {
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
index 2ba8f54673e..6998317b976 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx
@@ -1,6 +1,4 @@
-import Box from '@mui/material/Box'
 import Stack from '@mui/material/Stack'
-import Typography from '@mui/material/Typography'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useEffect, useState } from 'react'
 
@@ -12,6 +10,7 @@ import { GetJourney_journey_blocks_StepBlock as StepBlock } from '@core/journeys
 import { getJourneyMedia } from '../../../utils/getJourneyMedia'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 import { useTemplateVideoUpload } from '../../TemplateVideoUploadProvider'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 import {
   CardsSection,
@@ -83,30 +82,29 @@ export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
           overflow: { xs: 'visible', sm: 'hidden' }
         }}
       >
-        <Stack gap={3} alignItems="center">
-          <Typography variant="h4" color="text.primary">
-            {t('Media')}
-          </Typography>
-          <Typography variant="body1" color="text.">
-            {t('Personalize and manage your media assets')}
-          </Typography>
-        </Stack>
-        {showLogo && <LogoSection />}
-        <CardsSection
-          customizableSteps={customizableSteps}
-          selectedStep={selectedStep}
-          handleStepClick={handleStepClick}
-        />
-        {showImages && (
-          <ImagesSection journey={journey} cardBlockId={selectedCardBlockId} />
-        )}
-        {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
-        <CustomizeFlowNextButton
-          label={t('Next')}
-          onClick={() => handleNext()}
-          ariaLabel={t('Next')}
-          loading={hasActiveUploads}
-        />
+        <ScreenWrapper
+          title={t('Media')}
+          subtitle={t('Personalize and manage your media assets')}
+          footer={
+            <CustomizeFlowNextButton
+              label={t('Next')}
+              onClick={() => handleNext()}
+              ariaLabel={t('Next')}
+              loading={hasActiveUploads}
+            />
+          }
+        >
+          {showLogo && <LogoSection />}
+          <CardsSection
+            customizableSteps={customizableSteps}
+            selectedStep={selectedStep}
+            handleStepClick={handleStepClick}
+          />
+          {showImages && (
+            <ImagesSection journey={journey} cardBlockId={selectedCardBlockId} />
+          )}
+          {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
+        </ScreenWrapper>
       </Stack>
     </Stack>
   )
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
new file mode 100644
index 00000000000..5aab822e4bd
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/ScreenWrapper.tsx
@@ -0,0 +1,65 @@
+import Stack from '@mui/material/Stack'
+import { SxProps, Theme } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import { ReactElement, ReactNode } from 'react'
+
+interface ScreenWrapperProps {
+  title: string
+  mobileTitle?: string
+  subtitle: string
+  mobileSubtitle?: string
+  headerSx?: SxProps<Theme>
+  footer?: ReactNode
+  children: ReactNode
+}
+
+export function ScreenWrapper({
+  title,
+  mobileTitle,
+  subtitle,
+  mobileSubtitle,
+  headerSx,
+  footer,
+  children
+}: ScreenWrapperProps): ReactElement {
+  return (
+    <>
+      <Stack alignItems="center" sx={headerSx}>
+        <Typography
+          variant="h4"
+          display={{ xs: 'none', sm: 'block' }}
+          gutterBottom
+          sx={{ mb: { xs: 0, sm: 2 } }}
+        >
+          {title}
+        </Typography>
+        <Typography
+          variant="h6"
+          display={{ xs: 'block', sm: 'none' }}
+          gutterBottom
+          sx={{ mb: { xs: 0, sm: 2 } }}
+        >
+          {mobileTitle ?? title}
+        </Typography>
+        <Typography
+          variant="subtitle2"
+          display={{ xs: 'none', sm: 'block' }}
+          color="text.secondary"
+          align="center"
+        >
+          {subtitle}
+        </Typography>
+        <Typography
+          variant="body2"
+          display={{ xs: 'block', sm: 'none' }}
+          color="text.secondary"
+          align="center"
+        >
+          {mobileSubtitle ?? subtitle}
+        </Typography>
+      </Stack>
+      {children}
+      {footer}
+    </>
+  )
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/index.ts
new file mode 100644
index 00000000000..dfa2c06cdb7
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/ScreenWrapper/index.ts
@@ -0,0 +1 @@
+export { ScreenWrapper } from './ScreenWrapper'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
index d054a95f5bb..ddf431b6261 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/SocialScreen/SocialScreen.tsx
@@ -1,5 +1,4 @@
 import Stack from '@mui/material/Stack'
-import Typography from '@mui/material/Typography'
 import { useTranslation } from 'next-i18next'
 import { ReactElement } from 'react'
 
@@ -7,6 +6,7 @@ import { DescriptionEdit } from '../../../../Editor/Slider/Settings/SocialDetail
 import { TitleEdit } from '../../../../Editor/Slider/Settings/SocialDetails/TitleEdit'
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 import { SocialScreenSocialImage } from './SocialScreenSocialImage'
 
@@ -28,56 +28,36 @@ export function SocialScreen({
         px: { xs: 5, sm: 20 }
       }}
     >
-      <Typography
-        variant="h4"
-        gutterBottom
-        display={{ xs: 'none', sm: 'block' }}
+      <ScreenWrapper
+        title={t('Final Details')}
+        subtitle={t(
+          'Customize how your invite appears when shared on social media.'
+        )}
+        mobileSubtitle={t(
+          'This is how your content will appear when shared on social media.'
+        )}
+        footer={
+          <CustomizeFlowNextButton
+            label={t('Done')}
+            onClick={() => handleNext()}
+            ariaLabel={t('Done')}
+          />
+        }
       >
-        {t('Final Details')}
-      </Typography>
-      <Typography
-        variant="h6"
-        gutterBottom
-        display={{ xs: 'block', sm: 'none' }}
-      >
-        {t('Final Details')}
-      </Typography>
-      <Typography
-        variant="subtitle2"
-        color="text.secondary"
-        align="center"
-        sx={{
-          display: { xs: 'none', sm: 'block' }
-        }}
-      >
-        {t('Customize how your invite appears when shared on social media.')}
-      </Typography>
-      <Typography
-        variant="body2"
-        color="text.secondary"
-        align="center"
-        display={{ xs: 'block', sm: 'none' }}
-      >
-        {t('This is how your content will appear when shared on social media.')}
-      </Typography>
-      <Stack
-        alignItems="center"
-        gap={6}
-        data-testid="SocialShareAppearance"
-        sx={{
-          width: '100%',
-          py: 5
-        }}
-      >
-        <SocialScreenSocialImage />
-        <TitleEdit />
-        <DescriptionEdit />
-      </Stack>
-      <CustomizeFlowNextButton
-        label={t('Done')}
-        onClick={() => handleNext()}
-        ariaLabel={t('Done')}
-      />
+        <Stack
+          alignItems="center"
+          gap={6}
+          data-testid="SocialShareAppearance"
+          sx={{
+            width: '100%',
+            py: 5
+          }}
+        >
+          <SocialScreenSocialImage />
+          <TitleEdit />
+          <DescriptionEdit />
+        </Stack>
+      </ScreenWrapper>
     </Stack>
   )
 }
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
index 0c70d8d5e8b..a9256acf9da 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/TextScreen/TextScreen.tsx
@@ -1,7 +1,6 @@
 import { gql, useMutation } from '@apollo/client'
 import Box from '@mui/material/Box'
 import Stack from '@mui/material/Stack'
-import Typography from '@mui/material/Typography'
 import { useTranslation } from 'next-i18next'
 import { ReactElement, useCallback, useEffect, useState } from 'react'
 
@@ -11,6 +10,7 @@ import { GetJourney_journey_journeyCustomizationFields as JourneyCustomizationFi
 import { JourneyCustomizationFieldUpdate } from '../../../../../../__generated__/JourneyCustomizationFieldUpdate'
 import { CustomizationScreen } from '../../../utils/getCustomizeFlowConfig'
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
+import { ScreenWrapper } from '../ScreenWrapper'
 
 export const JOURNEY_CUSTOMIZATION_FIELD_UPDATE = gql`
   mutation JourneyCustomizationFieldUpdate(
@@ -202,101 +202,71 @@ export function TextScreen({
         width: '100%'
       }}
     >
-      <Stack alignItems="center" sx={{ pb: 4 }}>
-        <Typography
-          variant="h4"
-          display={{ xs: 'none', sm: 'block' }}
-          gutterBottom
-          sx={{
-            mb: { xs: 0, sm: 2 }
-          }}
-        >
-          {t('Text')}
-        </Typography>
-        <Typography
-          variant="h6"
-          display={{ xs: 'block', sm: 'none' }}
-          gutterBottom
-          sx={{
-            mb: { xs: 0, sm: 2 }
-          }}
-        >
-          {t('Text')}
-        </Typography>
-        <Typography
-          variant="subtitle2"
-          display={{ xs: 'none', sm: 'block' }}
-          color="text.secondary"
-          align="center"
-          sx={{
-            maxWidth: { xs: '100%', sm: '90%' }
-          }}
-        >
-          {t(
-            "Fill out the blue fields and we'll customize the content with your information."
-          )}
-        </Typography>
-        <Typography
-          variant="body2"
-          display={{ xs: 'block', sm: 'none' }}
-          color="text.secondary"
-          align="center"
-          sx={{
-            maxWidth: { xs: '100%', sm: '90%' }
-          }}
-        >
-          {t('Fill in the blue fields to customize the content.')}
-        </Typography>
-      </Stack>
-      <Box sx={{ position: 'relative', width: '100%' }}>
-        <Box
-          sx={{
-            border: '2px solid',
-            borderColor: '#CCCCCC',
-            borderRadius: 3,
-            p: { xs: 4, sm: 5 },
-            minHeight: 150,
-            width: '100%',
-            whiteSpace: 'pre-wrap',
-            overflowY: 'auto',
-            maxHeight: { xs: 'calc(100vh - 323px)', sm: 'calc(100vh - 370px)' },
-            '&::-webkit-scrollbar': {
-              display: 'none'
-            },
-            '-ms-overflow-style': 'none',
-            'scrollbar-width': 'none'
-          }}
-        >
-          {renderEditableText(
-            journey?.journeyCustomizationDescription ?? '',
-            replacementItems,
-            handleValueChange
-          )}
+      <ScreenWrapper
+        title={t('Text')}
+        subtitle={t(
+          "Fill out the blue fields and we'll customize the content with your information."
+        )}
+        mobileSubtitle={t(
+          'Fill in the blue fields to customize the content.'
+        )}
+        headerSx={{ pb: 4 }}
+        footer={
+          <CustomizeFlowNextButton
+            label={t('Next')}
+            onClick={handleSubmit}
+            loading={isSubmitting}
+            ariaLabel={t('Save and continue')}
+          />
+        }
+      >
+        <Box sx={{ position: 'relative', width: '100%' }}>
+          <Box
+            sx={{
+              border: '2px solid',
+              borderColor: '#CCCCCC',
+              borderRadius: 3,
+              p: { xs: 4, sm: 5 },
+              minHeight: 150,
+              width: '100%',
+              whiteSpace: 'pre-wrap',
+              overflowY: 'auto',
+              maxHeight: {
+                xs: 'calc(100vh - 323px)',
+                sm: 'calc(100vh - 370px)'
+              },
+              '&::-webkit-scrollbar': {
+                display: 'none'
+              },
+              '-ms-overflow-style': 'none',
+              'scrollbar-width': 'none'
+            }}
+          >
+            {renderEditableText(
+              journey?.journeyCustomizationDescription ?? '',
+              replacementItems,
+              handleValueChange
+            )}
+          </Box>
+          <Box
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: '30px',
+              background:
+                'linear-gradient(to bottom, transparent 0%, white 100%)',
+              pointerEvents: 'none',
+              borderBottomLeftRadius: 12,
+              borderBottomRightRadius: 12,
+              borderLeft: '2px solid #CCCCCC',
+              borderRight: '2px solid #CCCCCC',
+              borderBottom: '2px solid #CCCCCC'
+            }}
+          />
         </Box>
-        <Box
-          sx={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: '30px',
-            background:
-              'linear-gradient(to bottom, transparent 0%, white 100%)',
-            pointerEvents: 'none',
-            borderBottomLeftRadius: 12,
-            borderBottomRightRadius: 12,
-            borderLeft: '2px solid #CCCCCC',
-            borderRight: '2px solid #CCCCCC',
-            borderBottom: '2px solid #CCCCCC'
-          }}
-        />
-      </Box>
-      <CustomizeFlowNextButton
-        label={t('Next')}
-        onClick={handleSubmit}
-        loading={isSubmitting}
-        ariaLabel={t('Save and continue')}
-      />
+      </ScreenWrapper>
     </Stack>
   )
 }