diff --git a/packages/app-root/next.config.mjs b/packages/app-root/next.config.mjs
index a2a6e99052b..66902c0c1a3 100644
--- a/packages/app-root/next.config.mjs
+++ b/packages/app-root/next.config.mjs
@@ -4,6 +4,10 @@ const bundleAnalyzer = withBundleAnalyzer({
 	enabled: process.env.ANALYZE === 'true',
 })
 
-const nextConfig = {}
+const nextConfig = {
+  experimental: {
+    optimizePackageImports: ['@zooniverse/react-components'],
+  }
+}
 
 export default bundleAnalyzer(nextConfig)
diff --git a/packages/app-root/src/components/PageFooter.js b/packages/app-root/src/components/PageFooter.js
index 90aff8b7821..934dd72a4c6 100644
--- a/packages/app-root/src/components/PageFooter.js
+++ b/packages/app-root/src/components/PageFooter.js
@@ -1,6 +1,5 @@
 'use client'
-import AdminCheckbox from '@zooniverse/react-components/AdminCheckbox'
-import ZooFooter from '@zooniverse/react-components/ZooFooter'
+import { AdminCheckbox, ZooFooter } from '@zooniverse/react-components'
 import { useContext } from 'react'
 
 import { PanoptesAuthContext } from '../contexts'
diff --git a/packages/app-root/src/components/PageHeader.js b/packages/app-root/src/components/PageHeader.js
index 4af1dd2ac8e..10e7ee42160 100644
--- a/packages/app-root/src/components/PageHeader.js
+++ b/packages/app-root/src/components/PageHeader.js
@@ -1,5 +1,5 @@
 'use client'
-import ZooHeader from '@zooniverse/react-components/ZooHeader'
+import { ZooHeader } from '@zooniverse/react-components'
 import { useContext } from 'react'
 
 import {