diff --git a/packages/core/src/layout/Page/Page.stories.tsx b/packages/core/src/layout/Page/Page.stories.tsx
index 8fd779196d..427dc644d9 100644
--- a/packages/core/src/layout/Page/Page.stories.tsx
+++ b/packages/core/src/layout/Page/Page.stories.tsx
@@ -15,13 +15,13 @@
  */
 
 import React, { useState } from 'react';
+import { customPageTheme } from '@backstage/theme';
 import {
   Header,
   Page,
   HeaderLabel,
   ContentHeader,
   Content,
-  pageTheme,
   InfoCard,
   HeaderTabs,
 } from '../';
@@ -196,7 +196,7 @@ export const PluginWithData = () => {
   const [selectedTab, setSelectedTab] = useState<number>(2);
   return (
     <div style={{ border: '1px solid #ddd' }}>
-      <Page theme={pageTheme.tool}>
+      <Page pageTheme={customPageTheme.pageTheme.tool}>
         <ExampleHeader />
         <HeaderTabs
           selectedIndex={selectedTab}
@@ -218,7 +218,7 @@ export const PluginWithData = () => {
 export const PluginWithTable = () => {
   return (
     <div style={{ border: '1px solid #ddd' }}>
-      <Page theme={pageTheme.tool}>
+      <Page pageTheme={customPageTheme.pageTheme.tool}>
         <ExampleHeader />
         <Content>
           <ExampleContentHeader />
diff --git a/packages/core/src/layout/Page/Page.tsx b/packages/core/src/layout/Page/Page.tsx
index a5f5e4fd2b..f4dc4888ed 100644
--- a/packages/core/src/layout/Page/Page.tsx
+++ b/packages/core/src/layout/Page/Page.tsx
@@ -15,10 +15,8 @@
  */
 
 import React, { FC } from 'react';
-import { PageTheme, pageTheme } from './PageThemeProvider';
-import { makeStyles } from '@material-ui/core';
-
-export const PageThemeContext = React.createContext<PageTheme>(pageTheme.home);
+import { customPageTheme, PageTheme } from '@backstage/theme';
+import { makeStyles, ThemeProvider } from '@material-ui/core';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -32,14 +30,17 @@ const useStyles = makeStyles(() => ({
 }));
 
 type Props = {
-  theme?: PageTheme;
+  pageTheme?: PageTheme;
 };
 
-export const Page: FC<Props> = ({ theme = pageTheme.home, children }) => {
+export const Page: FC<Props> = ({
+  pageTheme = customPageTheme.pageTheme.home,
+  children,
+}) => {
   const classes = useStyles();
   return (
-    <PageThemeContext.Provider value={theme}>
+    <ThemeProvider theme={{ pageTheme, ...customPageTheme.baseTheme }}>
       <div className={classes.root}>{children}</div>
-    </PageThemeContext.Provider>
+    </ThemeProvider>
   );
 };
diff --git a/packages/core/src/layout/Page/index.ts b/packages/core/src/layout/Page/index.ts
index 000a565c83..987aee5cdb 100644
--- a/packages/core/src/layout/Page/index.ts
+++ b/packages/core/src/layout/Page/index.ts
@@ -15,5 +15,3 @@
  */
 
 export { Page } from './Page';
-export { pageTheme } from './PageThemeProvider';
-export type { PageTheme } from './PageThemeProvider';