diff --git a/website/src/pages/Home/CallToAction/index.tsx b/website/src/components/Home/CallToAction/index.tsx
similarity index 100%
rename from website/src/pages/Home/CallToAction/index.tsx
rename to website/src/components/Home/CallToAction/index.tsx
diff --git a/website/src/pages/Home/CallToAction/styles.module.css b/website/src/components/Home/CallToAction/styles.module.css
similarity index 100%
rename from website/src/pages/Home/CallToAction/styles.module.css
rename to website/src/components/Home/CallToAction/styles.module.css
diff --git a/website/src/pages/Home/Community/index.tsx b/website/src/components/Home/Community/index.tsx
similarity index 100%
rename from website/src/pages/Home/Community/index.tsx
rename to website/src/components/Home/Community/index.tsx
diff --git a/website/src/pages/Home/Community/styles.module.css b/website/src/components/Home/Community/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Community/styles.module.css
rename to website/src/components/Home/Community/styles.module.css
diff --git a/website/src/pages/Home/Framework/index.tsx b/website/src/components/Home/Framework/index.tsx
similarity index 78%
rename from website/src/pages/Home/Framework/index.tsx
rename to website/src/components/Home/Framework/index.tsx
index 4dd1d0984e9..8599e4857b9 100644
--- a/website/src/pages/Home/Framework/index.tsx
+++ b/website/src/components/Home/Framework/index.tsx
@@ -7,11 +7,12 @@
 
 import React from 'react';
 
-import ThemeImage from '../components/ThemeImage';
 import Section from '../components/Section';
 import SectionTitle from '../components/SectionTitle';
 
 import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 function Framework() {
   return (
@@ -30,11 +31,13 @@ function Framework() {
       />
       <div className={styles.cardContainer}>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/file-based-routing.png"
-            darkSrc="/img/homepage/file-based-routing-dark.png"
-            className={styles.cardImage}
+          <ThemedImage
             alt="File system with folders and files representing screens and navigation"
+            className={styles.cardImage}
+            sources={{
+              light: useBaseUrl('/img/homepage/file-based-routing.png'),
+              dark: useBaseUrl('/img/homepage/file-based-routing-dark.png'),
+            }}
           />
           <div className={styles.cardContent}>
             <h4 className={styles.cardTitle}>File-based routing</h4>
@@ -45,11 +48,13 @@ function Framework() {
           </div>
         </div>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/libraries.png"
-            darkSrc="/img/homepage/libraries-dark.png"
-            className={styles.cardImage}
+          <ThemedImage
             alt="Grid of icons representing libraries, SDKs, and native code"
+            className={styles.cardImage}
+            sources={{
+              light: useBaseUrl('/img/homepage/libraries.png'),
+              dark: useBaseUrl('/img/homepage/libraries-dark.png'),
+            }}
           />
           <div className={styles.cardContent}>
             <h4 className={styles.cardTitle}>
@@ -62,11 +67,13 @@ function Framework() {
           </div>
         </div>
         <div className={styles.card}>
-          <ThemeImage
-            lightSrc="/img/homepage/tools.png"
-            darkSrc="/img/homepage/tools-dark.png"
-            className={styles.cardImage}
+          <ThemedImage
             alt="List of developer tool toggles for debugging, performance, and more"
+            className={styles.cardImage}
+            sources={{
+              light: useBaseUrl('/img/homepage/tools.png'),
+              dark: useBaseUrl('/img/homepage/tools-dark.png'),
+            }}
           />
           <div className={styles.cardContent}>
             <h4 className={styles.cardTitle}>Developer tools</h4>
@@ -82,4 +89,4 @@ function Framework() {
   );
 }
 
-export default Framework;
+export {Framework};
diff --git a/website/src/pages/Home/Framework/styles.module.css b/website/src/components/Home/Framework/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Framework/styles.module.css
rename to website/src/components/Home/Framework/styles.module.css
diff --git a/website/src/pages/Home/Hero/Devices.tsx b/website/src/components/Home/Hero/Devices.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/Devices.tsx
rename to website/src/components/Home/Hero/Devices.tsx
diff --git a/website/src/pages/Home/Hero/FloorBackground.tsx b/website/src/components/Home/Hero/FloorBackground.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/FloorBackground.tsx
rename to website/src/components/Home/Hero/FloorBackground.tsx
diff --git a/website/src/pages/Home/Hero/GridBackground.tsx b/website/src/components/Home/Hero/GridBackground.tsx
similarity index 100%
rename from website/src/pages/Home/Hero/GridBackground.tsx
rename to website/src/components/Home/Hero/GridBackground.tsx
diff --git a/website/src/pages/Home/Hero/index.tsx b/website/src/components/Home/Hero/index.tsx
similarity index 98%
rename from website/src/pages/Home/Hero/index.tsx
rename to website/src/components/Home/Hero/index.tsx
index 265c0966d84..399ab2b240a 100644
--- a/website/src/pages/Home/Hero/index.tsx
+++ b/website/src/components/Home/Hero/index.tsx
@@ -62,4 +62,4 @@ function Hero() {
   );
 }
 
-export default Hero;
+export {Hero};
diff --git a/website/src/pages/Home/Hero/styles.module.css b/website/src/components/Home/Hero/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Hero/styles.module.css
rename to website/src/components/Home/Hero/styles.module.css
diff --git a/website/src/pages/Home/Logo.tsx b/website/src/components/Home/Logo.tsx
similarity index 100%
rename from website/src/pages/Home/Logo.tsx
rename to website/src/components/Home/Logo.tsx
diff --git a/website/src/pages/Home/Native/index.tsx b/website/src/components/Home/Native/index.tsx
similarity index 80%
rename from website/src/pages/Home/Native/index.tsx
rename to website/src/components/Home/Native/index.tsx
index f8c84882d17..05251eb00f1 100644
--- a/website/src/pages/Home/Native/index.tsx
+++ b/website/src/components/Home/Native/index.tsx
@@ -9,9 +9,10 @@ import React from 'react';
 
 import Section from '../components/Section';
 import SectionTitle from '../components/SectionTitle';
-import ThemeImage from '../components/ThemeImage';
 
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
 
 function Native() {
   return (
@@ -28,11 +29,13 @@ function Native() {
           </>
         }
       />
-      <ThemeImage
-        lightSrc="/img/homepage/dissection.png"
-        darkSrc="/img/homepage/dissection-dark.png"
-        className={styles.flyoutIllustration}
+      <ThemedImage
         alt="A React Native UI pointing out native elements like Views, ScrollViews, and more"
+        className={styles.flyoutIllustration}
+        sources={{
+          light: useBaseUrl('/img/homepage/dissection.png'),
+          dark: useBaseUrl('/img/homepage/dissection-dark.png'),
+        }}
       />
     </Section>
   );
diff --git a/website/src/pages/Home/Native/styles.module.css b/website/src/components/Home/Native/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Native/styles.module.css
rename to website/src/components/Home/Native/styles.module.css
diff --git a/website/src/pages/Home/Platforms/FoxFact.tsx b/website/src/components/Home/Platforms/FoxFact.tsx
similarity index 100%
rename from website/src/pages/Home/Platforms/FoxFact.tsx
rename to website/src/components/Home/Platforms/FoxFact.tsx
diff --git a/website/src/pages/Home/Platforms/index.tsx b/website/src/components/Home/Platforms/index.tsx
similarity index 89%
rename from website/src/pages/Home/Platforms/index.tsx
rename to website/src/components/Home/Platforms/index.tsx
index 031229b1968..3778b66c7bb 100644
--- a/website/src/pages/Home/Platforms/index.tsx
+++ b/website/src/components/Home/Platforms/index.tsx
@@ -9,10 +9,11 @@ import React from 'react';
 
 import Section from '../components/Section';
 import SectionTitle from '../components/SectionTitle';
-import ThemeImage from '../components/ThemeImage';
+import ThemedImage from '@theme/ThemedImage';
 
 import FoxFact from './FoxFact';
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 function Platforms() {
   return (
@@ -54,11 +55,13 @@ function Platforms() {
             </div>
           </div>
           <div className={styles.deviceContainer}>
-            <ThemeImage
-              lightSrc="/img/homepage/devices.png"
-              darkSrc="/img/homepage/devices-dark.png"
-              className={styles.devices}
+            <ThemedImage
               alt="Android device and iOS device"
+              className={styles.devices}
+              sources={{
+                light: useBaseUrl('/img/homepage/devices.png'),
+                dark: useBaseUrl('/img/homepage/devices-dark.png'),
+              }}
             />
           </div>
         </div>
@@ -75,4 +78,4 @@ function Platforms() {
   );
 }
 
-export default Platforms;
+export {Platforms};
diff --git a/website/src/pages/Home/Platforms/styles.module.css b/website/src/components/Home/Platforms/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Platforms/styles.module.css
rename to website/src/components/Home/Platforms/styles.module.css
diff --git a/website/src/pages/Home/Watch/index.tsx b/website/src/components/Home/Watch/index.tsx
similarity index 100%
rename from website/src/pages/Home/Watch/index.tsx
rename to website/src/components/Home/Watch/index.tsx
diff --git a/website/src/pages/Home/Watch/styles.module.css b/website/src/components/Home/Watch/styles.module.css
similarity index 100%
rename from website/src/pages/Home/Watch/styles.module.css
rename to website/src/components/Home/Watch/styles.module.css
diff --git a/website/src/pages/Home/components/Section/index.tsx b/website/src/components/Home/components/Section/index.tsx
similarity index 100%
rename from website/src/pages/Home/components/Section/index.tsx
rename to website/src/components/Home/components/Section/index.tsx
diff --git a/website/src/pages/Home/components/Section/styles.module.css b/website/src/components/Home/components/Section/styles.module.css
similarity index 100%
rename from website/src/pages/Home/components/Section/styles.module.css
rename to website/src/components/Home/components/Section/styles.module.css
diff --git a/website/src/pages/Home/components/SectionTitle/index.tsx b/website/src/components/Home/components/SectionTitle/index.tsx
similarity index 100%
rename from website/src/pages/Home/components/SectionTitle/index.tsx
rename to website/src/components/Home/components/SectionTitle/index.tsx
diff --git a/website/src/pages/Home/components/SectionTitle/styles.module.css b/website/src/components/Home/components/SectionTitle/styles.module.css
similarity index 100%
rename from website/src/pages/Home/components/SectionTitle/styles.module.css
rename to website/src/components/Home/components/SectionTitle/styles.module.css
diff --git a/website/src/pages/Home/index.tsx b/website/src/components/Home/index.tsx
similarity index 83%
rename from website/src/pages/Home/index.tsx
rename to website/src/components/Home/index.tsx
index 70ccca3181c..ec9434ac20b 100644
--- a/website/src/pages/Home/index.tsx
+++ b/website/src/components/Home/index.tsx
@@ -7,10 +7,10 @@
 
 import React from 'react';
 
-import Hero from './Hero';
-import Platforms from './Platforms';
+import {Hero} from './Hero';
+import {Platforms} from './Platforms';
 import Native from './Native';
-import Framework from './Framework';
+import {Framework} from './Framework';
 import Watch from './Watch';
 import Community from './Community';
 import CallToAction from './CallToAction';
diff --git a/website/src/pages/Home/components/ThemeImage/index.tsx b/website/src/pages/Home/components/ThemeImage/index.tsx
deleted file mode 100644
index 1b50f92d5af..00000000000
--- a/website/src/pages/Home/components/ThemeImage/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, {useState, useEffect} from 'react';
-
-function ThemeImage({lightSrc, darkSrc, className, alt}) {
-  const [theme, setTheme] = useState('light');
-
-  useEffect(() => {
-    const themeObserver = new MutationObserver(mutations => {
-      mutations.forEach(mutation => {
-        if (
-          mutation.type === 'attributes' &&
-          mutation.attributeName === 'data-theme' &&
-          mutation.target instanceof Element
-        ) {
-          setTheme(mutation.target.getAttribute('data-theme'));
-        }
-      });
-    });
-
-    const htmlElement = document.documentElement;
-    themeObserver.observe(htmlElement, {
-      attributes: true,
-    });
-
-    return () => themeObserver.disconnect();
-  }, []);
-
-  return (
-    <img
-      src={theme === 'dark' ? darkSrc : lightSrc}
-      alt={alt}
-      className={className}
-    />
-  );
-}
-
-export default ThemeImage;
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 93c5718ce30..6d61c95272b 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -11,7 +11,7 @@ import Head from '@docusaurus/Head';
 
 import Layout from '@theme/Layout';
 
-import Home from './Home';
+import Home from '../components/Home';
 
 const Index = () => {
   return (