diff --git a/packages/components/react-web/.storybook/preview.js b/packages/components/react-web/.storybook/preview.js
index 5dd8dbea..7108366a 100644
--- a/packages/components/react-web/.storybook/preview.js
+++ b/packages/components/react-web/.storybook/preview.js
@@ -1,16 +1,14 @@
 import React from 'react';
-import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider } from '../src';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: { grid: { cellSize: 16, opacity: 0.25 } },
 };
 
-const theme = require('@compassion-gds/tokens');
-
 export const decorators = [
   (Story) => (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider>
       <Story />
     </ThemeProvider>
   ),
diff --git a/packages/components/react-web/src/ThemeProvider/ThemeProvider.js b/packages/components/react-web/src/ThemeProvider/ThemeProvider.js
new file mode 100644
index 00000000..9a4a9966
--- /dev/null
+++ b/packages/components/react-web/src/ThemeProvider/ThemeProvider.js
@@ -0,0 +1,26 @@
+import React, { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import PropTypes from 'prop-types';
+import { useContext, createContext } from 'react';
+import defaultTheme from "@compassion-gds/tokens";
+
+const ThemeContext = createContext(defaultTheme);
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({ theme = defaultTheme, children }) => (
+    <ThemeContext.Provider value={theme}>
+        <EmotionThemeProvider theme={theme}>
+            {children}
+        </EmotionThemeProvider>
+    </ThemeContext.Provider>
+);
+
+ThemeProvider.propTypes = {
+    theme: PropTypes.shape({
+        component: PropTypes.objectOf(PropTypes.object).isRequired,
+    }),
+};
+
+ThemeProvider.defaultProps = {
+    theme: defaultTheme,
+};
diff --git a/packages/components/react-web/src/ThemeProvider/index.js b/packages/components/react-web/src/ThemeProvider/index.js
new file mode 100644
index 00000000..8abd195f
--- /dev/null
+++ b/packages/components/react-web/src/ThemeProvider/index.js
@@ -0,0 +1 @@
+export * from './ThemeProvider';
diff --git a/packages/components/react-web/src/hooks/index.js b/packages/components/react-web/src/hooks/index.js
new file mode 100644
index 00000000..632ba2b2
--- /dev/null
+++ b/packages/components/react-web/src/hooks/index.js
@@ -0,0 +1 @@
+export { useTheme } from '../ThemeProvider';
diff --git a/packages/components/react-web/src/index.js b/packages/components/react-web/src/index.js
index 4fa86eed..70ca731f 100644
--- a/packages/components/react-web/src/index.js
+++ b/packages/components/react-web/src/index.js
@@ -10,3 +10,5 @@ export * from './Select';
 export * from './Image';
 export * from './ProgressBar';
 export * from './Uploader';
+export * from './ThemeProvider';
+export * from './hooks';