diff --git a/src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx b/src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx
index bbf960a44b..49ef996680 100644
--- a/src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx
+++ b/src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx
@@ -1,13 +1,10 @@
 import darkModeImage from 'assets/codecovAI/pr-review-example-dark-mode.png'
 import lightModeImage from 'assets/codecovAI/pr-review-example-light-mode.png'
-import { Theme, useThemeContext } from 'shared/ThemeContext'
 import { Card } from 'ui/Card'
 import { ExpandableSection } from 'ui/ExpandableSection'
+import LightDarkImg from 'ui/LightDarkImg'
 
 const CodecovAICommands: React.FC = () => {
-  const { theme } = useThemeContext()
-  const prReviewExampleSource =
-    theme === Theme.DARK ? darkModeImage : lightModeImage
   return (
     <div>
       <Card>
@@ -34,10 +31,11 @@ const CodecovAICommands: React.FC = () => {
           </p>
         </ExpandableSection.Trigger>
         <ExpandableSection.Content className="m-0 p-0">
-          <img
+          <LightDarkImg
             className="size-full object-cover"
+            src={lightModeImage}
+            darkSrc={darkModeImage}
             alt="codecov pr review example"
-            src={prReviewExampleSource}
           />
         </ExpandableSection.Content>
       </ExpandableSection>
diff --git a/src/pages/RepoPage/CoverageOnboarding/GitHubActions/TokenStep.tsx b/src/pages/RepoPage/CoverageOnboarding/GitHubActions/TokenStep.tsx
index 848419af0a..f492abb630 100644
--- a/src/pages/RepoPage/CoverageOnboarding/GitHubActions/TokenStep.tsx
+++ b/src/pages/RepoPage/CoverageOnboarding/GitHubActions/TokenStep.tsx
@@ -16,12 +16,12 @@ import { useRepo } from 'services/repo'
 import { useUploadTokenRequired } from 'services/uploadTokenRequired'
 import { useIsCurrentUserAnAdmin } from 'services/user'
 import { Provider } from 'shared/api/helpers'
-import { Theme, useThemeContext } from 'shared/ThemeContext'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import { Card } from 'ui/Card'
 import { CodeSnippet } from 'ui/CodeSnippet'
 import { ExpandableSection } from 'ui/ExpandableSection'
+import LightDarkImg from 'ui/LightDarkImg'
 import { RadioTileGroup } from 'ui/RadioTileGroup'
 
 export const TOKEN_OPTIONS = {
@@ -53,11 +53,6 @@ function GitHubOrgSecretExample({
   uploadToken,
   owner,
 }: SecretGHExampleProps) {
-  const { theme } = useThemeContext()
-  const isDarkMode = theme === Theme.DARK
-  const orgSecretImg = isDarkMode ? orgSecretDark : orgSecretLight
-  const repoSecretImg = isDarkMode ? repoSecretDark : repoSecretLight
-
   return (
     <>
       <p>
@@ -94,7 +89,7 @@ function GitHubOrgSecretExample({
           </p>
         </ExpandableSection.Trigger>
         <ExpandableSection.Content>
-          <img
+          {/* <img
             className="size-full object-cover"
             alt={
               isUsingGlobalToken
@@ -102,6 +97,16 @@ function GitHubOrgSecretExample({
                 : 'repo settings secret example'
             }
             src={isUsingGlobalToken ? orgSecretImg : repoSecretImg}
+          /> */}
+          <LightDarkImg
+            alt={
+              isUsingGlobalToken
+                ? 'org settings secret example'
+                : 'repo settings secret example'
+            }
+            className="size-full object-cover"
+            src={isUsingGlobalToken ? orgSecretLight : repoSecretLight}
+            darkSrc={isUsingGlobalToken ? orgSecretDark : repoSecretDark}
           />
         </ExpandableSection.Content>
       </ExpandableSection>
diff --git a/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx b/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx
index 782a80cbdf..f653d997e2 100644
--- a/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx
@@ -1,11 +1,11 @@
 import testsPRComment from 'assets/svg/onboardingTests/testsPRComment.svg'
 import testsPRCommentDark from 'assets/svg/onboardingTests/testsPRCommentDark.svg'
 import testsRunning from 'assets/svg/onboardingTests/testsRunning.svg'
-import { Theme, useThemeContext } from 'shared/ThemeContext'
 import A from 'ui/A'
 import { Card } from 'ui/Card'
 import { CodeSnippet } from 'ui/CodeSnippet'
 import { ExpandableSection } from 'ui/ExpandableSection/ExpandableSection'
+import LightDarkImg from 'ui/LightDarkImg'
 
 import { FrameworkTabsCard } from '../FrameworkTabsCard'
 
@@ -110,11 +110,6 @@ function Step4() {
 }
 
 function Step5() {
-  const { theme } = useThemeContext()
-
-  const testPRsImageSource =
-    theme === Theme.LIGHT ? testsPRComment : testsPRCommentDark
-
   return (
     <div>
       <Card>
@@ -141,10 +136,11 @@ function Step5() {
           </p>
         </ExpandableSection.Trigger>
         <ExpandableSection.Content>
-          <img
-            src={testPRsImageSource.toString()}
+          <LightDarkImg
+            src={testsPRComment.toString()}
             alt="Tests in PR comment"
             className="w-full"
+            darkSrc={testsPRCommentDark.toString()}
           />
         </ExpandableSection.Content>
       </ExpandableSection>
diff --git a/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx b/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx
index d72e3f2813..60423a9931 100644
--- a/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx
@@ -1,11 +1,11 @@
 import testsPRComment from 'assets/svg/onboardingTests/testsPRComment.svg'
 import testsPRCommentDark from 'assets/svg/onboardingTests/testsPRCommentDark.svg'
 import testsRunning from 'assets/svg/onboardingTests/testsRunning.svg'
-import { Theme, useThemeContext } from 'shared/ThemeContext'
 import A from 'ui/A'
 import { Card } from 'ui/Card'
 import { CodeSnippet } from 'ui/CodeSnippet'
 import { ExpandableSection } from 'ui/ExpandableSection/ExpandableSection'
+import LightDarkImg from 'ui/LightDarkImg'
 
 import { FrameworkTabsCard } from '../FrameworkTabsCard'
 
@@ -103,11 +103,6 @@ function Step2() {
 }
 
 function Step3() {
-  const { theme } = useThemeContext()
-
-  const testPRsImageSource =
-    theme === Theme.LIGHT ? testsPRComment : testsPRCommentDark
-
   return (
     <div>
       <Card>
@@ -134,10 +129,11 @@ function Step3() {
           </p>
         </ExpandableSection.Trigger>
         <ExpandableSection.Content>
-          <img
-            src={testPRsImageSource.toString()}
+          <LightDarkImg
+            src={testsPRComment.toString()}
             alt="Tests in PR comment"
             className="w-full"
+            darkSrc={testsPRCommentDark.toString()}
           />
         </ExpandableSection.Content>
       </ExpandableSection>
diff --git a/src/ui/LightDarkImg/LightDarkImg.test.tsx b/src/ui/LightDarkImg/LightDarkImg.test.tsx
new file mode 100644
index 0000000000..bb2b9fb634
--- /dev/null
+++ b/src/ui/LightDarkImg/LightDarkImg.test.tsx
@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Theme, ThemeContext } from 'shared/ThemeContext/ThemeContext'
+
+import LightDarkImg from './LightDarkImg'
+
+const wrapper = (theme: Theme) => {
+  return ({ children }: { children: React.ReactNode }) => {
+    return (
+      <ThemeContext.Provider value={{ theme, setTheme: vi.fn() }}>
+        {children}
+      </ThemeContext.Provider>
+    )
+  }
+}
+
+describe('LightDarkImg', () => {
+  const mockProps = {
+    src: '/light-image.png',
+    darkSrc: '/dark-image.png',
+    alt: 'Test image',
+  }
+
+  it('renders with light source in light mode', () => {
+    render(<LightDarkImg {...mockProps} />, { wrapper: wrapper(Theme.LIGHT) })
+
+    const img = screen.getByAltText('Test image')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', '/light-image.png')
+  })
+
+  it('renders with dark source in dark mode', () => {
+    render(<LightDarkImg {...mockProps} />, { wrapper: wrapper(Theme.DARK) })
+
+    const img = screen.getByAltText('Test image')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', '/dark-image.png')
+  })
+
+  it('falls back to light source when dark source is not provided', () => {
+    const propsWithoutDark = {
+      src: '/light-image.png',
+      alt: 'Test image',
+    }
+
+    render(<LightDarkImg {...propsWithoutDark} />, {
+      wrapper: wrapper(Theme.DARK),
+    })
+
+    const img = screen.getByAltText('Test image')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', '/light-image.png')
+  })
+
+  it('passes through additional props to img element', () => {
+    render(
+      <LightDarkImg {...mockProps} className="w-10" data-testid="test-img" />,
+      { wrapper: wrapper(Theme.LIGHT) }
+    )
+
+    const img = screen.getByAltText('Test image')
+    expect(img).toHaveClass('w-10')
+    expect(img).toHaveAttribute('data-testid', 'test-img')
+  })
+})
diff --git a/src/ui/LightDarkImg/LightDarkImg.tsx b/src/ui/LightDarkImg/LightDarkImg.tsx
new file mode 100644
index 0000000000..1bf103e248
--- /dev/null
+++ b/src/ui/LightDarkImg/LightDarkImg.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { Theme, useThemeContext } from 'shared/ThemeContext'
+
+export interface LightDarkImgSrcProps {
+  alt: string
+  src: string
+  darkSrc?: string
+}
+
+type LightDarkImgProps = Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  'alt' | 'src'
+> &
+  LightDarkImgSrcProps
+
+function LightDarkImg({ src, darkSrc, alt, ...props }: LightDarkImgProps) {
+  const { theme } = useThemeContext()
+  const isDarkMode = theme === Theme.DARK
+
+  return (
+    <img {...props} alt={alt} src={isDarkMode && darkSrc ? darkSrc : src} />
+  )
+}
+
+export default LightDarkImg