diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx
index fd9cf4868a1..49b1a005810 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx
@@ -48,4 +48,15 @@ describe('MediaScreen', () => {
 
     expect(handleNext).toHaveBeenCalledTimes(1)
   })
+
+  it('should render section components with visible data-testids when screen is shown', () => {
+    renderMediaScreen()
+
+    expect(screen.getByTestId('LogoSection')).toBeInTheDocument()
+    expect(screen.getByTestId('CardsSection')).toBeInTheDocument()
+    expect(screen.getByTestId('ImagesSection')).toBeInTheDocument()
+    expect(screen.getByTestId('VideosSection')).toBeInTheDocument()
+    expect(screen.getByTestId('BackgroundImageSection')).toBeInTheDocument()
+    expect(screen.getByTestId('BackgroundVideoSection')).toBeInTheDocument()
+  })
 })
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 f7e73115abd..e0157d23913 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,15 +1,42 @@
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { useTranslation } from 'next-i18next'
-import { ReactElement } from 'react'
+import { ReactElement, useState } from 'react'
+
+import {
+  showLogoSection,
+  showImagesSection,
+  showVideosSection,
+  showBackgroundImageSection,
+  showBackgroundVideoSection
+} from './utils'
+import {
+  BackgroundImageSection,
+  BackgroundVideoSection,
+  CardsSection,
+  ImagesSection,
+  LogoSection,
+  VideosSection
+} from './Sections'
 
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 
 interface MediaScreenProps {
   handleNext: () => void
 }
+
 export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
   const { t } = useTranslation('apps-journeys-admin')
+  const [selectedCardBlockId, setSelectedCardBlockId] = useState<string | null>(
+    null
+  )
+  const showLogo = showLogoSection()
+  const showImages = showImagesSection(selectedCardBlockId)
+  const showVideos = showVideosSection(selectedCardBlockId)
+  const showBackgroundImage =
+    showBackgroundImageSection(selectedCardBlockId)
+  const showBackgroundVideo =
+    showBackgroundVideoSection(selectedCardBlockId)
 
   return (
     <Stack alignItems="center" sx={{ width: '100%' }}>
@@ -20,6 +47,16 @@ export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
       >
         {t('Media')}
       </Typography>
+      {showLogo && <LogoSection cardBlockId={selectedCardBlockId} />}
+      {<CardsSection onChange={setSelectedCardBlockId} />}
+      {showImages && <ImagesSection cardBlockId={selectedCardBlockId} />}
+      {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
+      {showBackgroundImage && (
+        <BackgroundImageSection cardBlockId={selectedCardBlockId} />
+      )}
+      {showBackgroundVideo && (
+        <BackgroundVideoSection cardBlockId={selectedCardBlockId} />
+      )}
       <CustomizeFlowNextButton
         label={t('Next')}
         onClick={handleNext}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.spec.tsx
new file mode 100644
index 00000000000..9e7b5395d05
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.spec.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { BackgroundImageSection } from './BackgroundImageSection'
+
+describe('BackgroundImageSection', () => {
+  it('renders with BackgroundImageSection data-testid visible', () => {
+    render(<BackgroundImageSection cardBlockId={null} />)
+    expect(screen.getByTestId('BackgroundImageSection')).toBeInTheDocument()
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.tsx
new file mode 100644
index 00000000000..fc9ba108989
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.tsx
@@ -0,0 +1,20 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface BackgroundImageSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function BackgroundImageSection({
+  cardBlockId: _cardBlockId
+}: BackgroundImageSectionProps): ReactElement {
+  return (
+    <Box data-testid="BackgroundImageSection">
+      <Typography variant="h6">Background Image</Typography>
+    </Box>
+  )
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/index.ts
new file mode 100644
index 00000000000..bd636766524
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/index.ts
@@ -0,0 +1 @@
+export { BackgroundImageSection } from './BackgroundImageSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.spec.tsx
new file mode 100644
index 00000000000..46a931ffaa6
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.spec.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { BackgroundVideoSection } from './BackgroundVideoSection'
+
+describe('BackgroundVideoSection', () => {
+  it('renders with BackgroundVideoSection data-testid visible', () => {
+    render(<BackgroundVideoSection cardBlockId={null} />)
+    expect(screen.getByTestId('BackgroundVideoSection')).toBeInTheDocument()
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.tsx
new file mode 100644
index 00000000000..470d0fafa3b
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.tsx
@@ -0,0 +1,20 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface BackgroundVideoSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function BackgroundVideoSection({
+  cardBlockId: _cardBlockId
+}: BackgroundVideoSectionProps): ReactElement {
+  return (
+    <Box data-testid="BackgroundVideoSection">
+      <Typography variant="h6">Background Video</Typography>
+    </Box>
+  )
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/index.ts
new file mode 100644
index 00000000000..a48ad648302
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/index.ts
@@ -0,0 +1 @@
+export { BackgroundVideoSection } from './BackgroundVideoSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.spec.tsx
new file mode 100644
index 00000000000..44d2ee9ceda
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.spec.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { CardsSection } from './CardsSection'
+
+describe('CardsSection', () => {
+  it('renders with CardsSection data-testid visible', () => {
+    render(<CardsSection onChange={() => {}} />)
+    expect(screen.getByTestId('CardsSection')).toBeInTheDocument()
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx
new file mode 100644
index 00000000000..fcba17685da
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx
@@ -0,0 +1,18 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface CardsSectionProps {
+  onChange: (cardBlockId: string | null) => void
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function CardsSection({ onChange: _onChange }: CardsSectionProps): ReactElement {
+  return (
+    <Box data-testid="CardsSection">
+      <Typography variant="h6">Cards</Typography>
+    </Box>
+  )
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/index.ts
new file mode 100644
index 00000000000..a0f49e6ae15
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/index.ts
@@ -0,0 +1 @@
+export { CardsSection } from './CardsSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.spec.tsx
new file mode 100644
index 00000000000..817fd6002bc
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.spec.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { ImagesSection } from './ImagesSection'
+
+describe('ImagesSection', () => {
+  it('renders with ImagesSection data-testid visible', () => {
+    render(<ImagesSection cardBlockId={null} />)
+    expect(screen.getByTestId('ImagesSection')).toBeInTheDocument()
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.tsx
new file mode 100644
index 00000000000..349f8fd7847
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.tsx
@@ -0,0 +1,18 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface ImagesSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function ImagesSection({ cardBlockId: _cardBlockId }: ImagesSectionProps): ReactElement {
+  return (
+    <Box data-testid="ImagesSection">
+      <Typography variant="h6">Images</Typography>
+    </Box>
+  )
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/index.ts
new file mode 100644
index 00000000000..c7b7408bf05
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/index.ts
@@ -0,0 +1 @@
+export { ImagesSection } from './ImagesSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.spec.tsx
new file mode 100644
index 00000000000..65e885ddf2e
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.spec.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { LogoSection } from './LogoSection'
+
+describe('LogoSection', () => {
+  it('renders with LogoSection data-testid visible', () => {
+    render(<LogoSection cardBlockId={null} />)
+    expect(screen.getByTestId('LogoSection')).toBeInTheDocument()
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.tsx
new file mode 100644
index 00000000000..7be6ea3a9a4
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.tsx
@@ -0,0 +1,20 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface LogoSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function LogoSection({
+  cardBlockId: _cardBlockId
+}: LogoSectionProps): ReactElement {
+  return (
+    <Box data-testid="LogoSection">
+      <Typography variant="h6">Logo</Typography>
+    </Box>
+  )
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/index.ts
new file mode 100644
index 00000000000..86fddd025c6
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/index.ts
@@ -0,0 +1 @@
+export { LogoSection } from './LogoSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.spec.tsx
new file mode 100644
index 00000000000..f259983c3bf
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.spec.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { VideosSection } from './VideosSection'
+
+describe('VideosSection', () => {
+  it('renders with VideosSection data-testid visible', () => {
+    render(<VideosSection cardBlockId={null} />)
+    expect(screen.getByTestId('VideosSection')).toBeInTheDocument()
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx
new file mode 100644
index 00000000000..89640ab2d72
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx
@@ -0,0 +1,18 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface VideosSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function VideosSection({ cardBlockId: _cardBlockId }: VideosSectionProps): ReactElement {
+  return (
+    <Box data-testid="VideosSection">
+      <Typography variant="h6">Video</Typography>
+    </Box>
+  )
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/index.ts
new file mode 100644
index 00000000000..0e26ffe6679
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/index.ts
@@ -0,0 +1 @@
+export { VideosSection } from './VideosSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/index.ts
new file mode 100644
index 00000000000..ec44099eb84
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/index.ts
@@ -0,0 +1,6 @@
+export { LogoSection } from './LogoSection'
+export { CardsSection } from './CardsSection'
+export { ImagesSection } from './ImagesSection'
+export { VideosSection } from './VideosSection'
+export { BackgroundImageSection } from './BackgroundImageSection'
+export { BackgroundVideoSection } from './BackgroundVideoSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/index.ts
new file mode 100644
index 00000000000..ad7a49350bb
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/index.ts
@@ -0,0 +1,5 @@
+export { showLogoSection } from './showLogoSection'
+export { showImagesSection } from './showImagesSection'
+export { showVideosSection } from './showVideosSection'
+export { showBackgroundImageSection } from './showBackgroundImageSection'
+export { showBackgroundVideoSection } from './showBackgroundVideoSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/index.ts
new file mode 100644
index 00000000000..2ae104b0547
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/index.ts
@@ -0,0 +1 @@
+export { showBackgroundImageSection } from './showBackgroundImageSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.spec.ts
new file mode 100644
index 00000000000..71391f616a1
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.spec.ts
@@ -0,0 +1,14 @@
+/**
+ * TODO: update these when implementing the component
+ */
+import { showBackgroundImageSection } from './showBackgroundImageSection'
+
+describe('showBackgroundImageSection', () => {
+  it('returns true when cardBlockId is null (skeleton)', () => {
+    expect(showBackgroundImageSection(null)).toBe(true)
+  })
+
+  it('returns true when cardBlockId is set (skeleton)', () => {
+    expect(showBackgroundImageSection('card-1')).toBe(true)
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.ts
new file mode 100644
index 00000000000..b5738718669
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.ts
@@ -0,0 +1,13 @@
+/**
+ * Shows the background image section on the media screen.
+ * When implementing, check if the selected card has a customizable background/cover image block.
+ *
+ * @param cardBlockId - the id of the selected card block
+ * @returns true if the background image section should be shown, false otherwise
+ */
+export function showBackgroundImageSection(
+  cardBlockId: string | null
+): boolean {
+  // TODO: implement when building BackgroundImage section – pass journey and check cover/background for cardBlockId
+  return true
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/index.ts
new file mode 100644
index 00000000000..8a60330264b
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/index.ts
@@ -0,0 +1 @@
+export { showBackgroundVideoSection } from './showBackgroundVideoSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.spec.ts
new file mode 100644
index 00000000000..f09068b5ed8
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.spec.ts
@@ -0,0 +1,14 @@
+/**
+ * TODO: update these when implementing the component
+ */
+import { showBackgroundVideoSection } from './showBackgroundVideoSection'
+
+describe('showBackgroundVideoSection', () => {
+  it('returns true when cardBlockId is null (skeleton)', () => {
+    expect(showBackgroundVideoSection(null)).toBe(true)
+  })
+
+  it('returns true when cardBlockId is set (skeleton)', () => {
+    expect(showBackgroundVideoSection('card-1')).toBe(true)
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.ts
new file mode 100644
index 00000000000..80e60997c44
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.ts
@@ -0,0 +1,13 @@
+/**
+ * Shows the background video section on the media screen.
+ * When implementing, check if the selected card has a customizable background/cover video block.
+ *
+ * @param cardBlockId - the id of the selected card block
+ * @returns true if the background video section should be shown, false otherwise
+ */
+export function showBackgroundVideoSection(
+  cardBlockId: string | null
+): boolean {
+  // TODO: implement when building BackgroundVideo section – pass journey and check cover/background for cardBlockId
+  return true
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/index.ts
new file mode 100644
index 00000000000..7d88103892a
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/index.ts
@@ -0,0 +1 @@
+export { showImagesSection } from './showImagesSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.spec.ts
new file mode 100644
index 00000000000..2e1d6ca6914
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.spec.ts
@@ -0,0 +1,14 @@
+/**
+ * TODO: update these when implementing the component
+ */
+import { showImagesSection } from './showImagesSection'
+
+describe('showImagesSection', () => {
+  it('returns true when cardBlockId is null (skeleton)', () => {
+    expect(showImagesSection(null)).toBe(true)
+  })
+
+  it('returns true when cardBlockId is set (skeleton)', () => {
+    expect(showImagesSection('card-1')).toBe(true)
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.ts
new file mode 100644
index 00000000000..4b99d9be61b
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.ts
@@ -0,0 +1,11 @@
+/**
+ * Shows the images section on the media screen.
+ * When implementing, check if the selected card has customizable image blocks.
+ *
+ * @param cardBlockId - the id of the selected card block
+ * @returns true if the images section should be shown, false otherwise
+ */
+export function showImagesSection(cardBlockId: string | null): boolean {
+  // TODO: implement when building Images section – pass journey and check blocks for cardBlockId
+  return true
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/index.ts
new file mode 100644
index 00000000000..4cd89a095a1
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/index.ts
@@ -0,0 +1 @@
+export { showLogoSection } from './showLogoSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.spec.ts
new file mode 100644
index 00000000000..0324d8c47bd
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.spec.ts
@@ -0,0 +1,10 @@
+/**
+ * TODO: update these when implementing the component
+ */
+import { showLogoSection } from './showLogoSection'
+
+describe('showLogoSection', () => {
+  it('returns true (skeleton – implement when building Logo section)', () => {
+    expect(showLogoSection()).toBe(true)
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.ts
new file mode 100644
index 00000000000..3b263c79b07
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.ts
@@ -0,0 +1,10 @@
+/**
+ * Shows the logo section on the media screen.
+ * Logo is journey-level; when implementing, check journey.logoImageBlock?.customizable.
+ *
+ * @returns true if the logo section should be shown, false otherwise
+ */
+export function showLogoSection(): boolean {
+  // TODO: implement when building Logo section – pass journey and check journey.logoImageBlock?.customizable
+  return true
+}
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/index.ts
new file mode 100644
index 00000000000..3cb9a082aef
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/index.ts
@@ -0,0 +1 @@
+export { showVideosSection } from './showVideosSection'
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.spec.ts
new file mode 100644
index 00000000000..aa39263105a
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.spec.ts
@@ -0,0 +1,14 @@
+/**
+ * TODO: update these when implementing the component
+ */
+import { showVideosSection } from './showVideosSection'
+
+describe('showVideosSection', () => {
+  it('returns true when cardBlockId is null (skeleton)', () => {
+    expect(showVideosSection(null)).toBe(true)
+  })
+
+  it('returns true when cardBlockId is set (skeleton)', () => {
+    expect(showVideosSection('card-1')).toBe(true)
+  })
+})
diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.ts
new file mode 100644
index 00000000000..a0a12dd0242
--- /dev/null
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.ts
@@ -0,0 +1,11 @@
+/**
+ * Shows the videos section on the media screen.
+ * When implementing, check if the selected card has customizable video blocks.
+ *
+ * @param cardBlockId - the id of the selected card block
+ * @returns true if the videos section should be shown, false otherwise
+ */
+export function showVideosSection(cardBlockId: string | null): boolean {
+  // TODO: implement when building Videos section – pass journey and check blocks for cardBlockId
+  return true
+}