diff --git a/src/PrerenderAppContent.js b/src/PrerenderAppContent.js
index e4e8a3d..600e2ea 100644
--- a/src/PrerenderAppContent.js
+++ b/src/PrerenderAppContent.js
@@ -4,6 +4,7 @@ import { Routes, Route } from 'react-router-dom';
 import Footer from './components/Footer.js';
 import { Logo, CategoryList } from './components/header/index.js';
 import MainPageLayout from './components/MainPageLayout.js';
+import { CarouselProvider } from './contexts/CarouselContext.js';
 
 const PrerenderAppContent = (socket) => (
     <Box
@@ -44,9 +45,11 @@ const PrerenderAppContent = (socket) => (
       </AppBar>
  
       <Box sx={{ flexGrow: 1 }}>
-          <Routes>
-            <Route path="/" element={<MainPageLayout />} />
-          </Routes>
+          <CarouselProvider>
+            <Routes>
+              <Route path="/" element={<MainPageLayout />} />
+            </Routes>
+          </CarouselProvider>
       </Box>
 
       <Footer/>
diff --git a/src/PrerenderHome.js b/src/PrerenderHome.js
index ec504c1..a81db3b 100644
--- a/src/PrerenderHome.js
+++ b/src/PrerenderHome.js
@@ -8,6 +8,7 @@ const {
 const Footer = require('./components/Footer.js').default;
 const { Logo, CategoryList } = require('./components/header/index.js');
 const MainPageLayout = require('./components/MainPageLayout.js').default;
+const { CarouselProvider } = require('./contexts/CarouselContext.js');
 
 class PrerenderHome extends React.Component {
   render() {
@@ -62,7 +63,7 @@ class PrerenderHome extends React.Component {
       React.createElement(
         Box,
         { sx: { flexGrow: 1 } },
-        React.createElement(MainPageLayout)
+        React.createElement(CarouselProvider, null, React.createElement(MainPageLayout))
       ),
       React.createElement(Footer)
     );