diff --git a/packages/core-components/src/layout/Page/Page.stories.tsx b/packages/core-components/src/layout/Page/Page.stories.tsx
index 7386d198a3..12ddd51d04 100644
--- a/packages/core-components/src/layout/Page/Page.stories.tsx
+++ b/packages/core-components/src/layout/Page/Page.stories.tsx
@@ -20,8 +20,7 @@ import Grid from '@material-ui/core/Grid';
 import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import React, { useState } from 'react';
-import { MemoryRouter } from 'react-router';
-import { createApp } from '@backstage/core-app-api';
+import { wrapInTestApp } from '@backstage/test-utils';
 import {
   Content,
   ContentHeader,
@@ -197,53 +196,44 @@ const ExampleContentHeader = ({ selectedTab }: { selectedTab?: number }) => (
   </ContentHeader>
 );
 
-const app = createApp({ configLoader: async () => [] });
-const AppProvider = app.getProvider();
-
 export const PluginWithData = () => {
   const [selectedTab, setSelectedTab] = useState<number>(2);
-  return (
-    <AppProvider>
-      <MemoryRouter>
-        <div style={{ border: '1px solid #ddd' }}>
-          <Page themeId="tool">
-            <ExampleHeader />
-            <HeaderTabs
-              selectedIndex={selectedTab}
-              onChange={index => setSelectedTab(index)}
-              tabs={tabs.map(({ label }, index) => ({
-                id: index.toString(),
-                label,
-              }))}
-            />
-            <Content>
-              <ExampleContentHeader selectedTab={selectedTab} />
-              <DataGrid />
-            </Content>
-          </Page>
-        </div>
-      </MemoryRouter>
-    </AppProvider>
-  );
+  return wrapInTestApp(() => (
+    <div style={{ border: '1px solid #ddd' }}>
+      <Page themeId="tool">
+        <ExampleHeader />
+        <HeaderTabs
+          selectedIndex={selectedTab}
+          onChange={index => setSelectedTab(index)}
+          tabs={tabs.map(({ label }, index) => ({
+            id: index.toString(),
+            label,
+          }))}
+        />
+        <Content>
+          <ExampleContentHeader selectedTab={selectedTab} />
+          <DataGrid />
+        </Content>
+      </Page>
+    </div>
+  ));
 };
 
 export const PluginWithTable = () => {
-  return (
-    <AppProvider>
-      <div style={{ border: '1px solid #ddd' }}>
-        <Page themeId="tool">
-          <ExampleHeader />
-          <Content>
-            <ExampleContentHeader />
-            <Table
-              options={{ paging: true, padding: 'dense' }}
-              data={generateTestData(10)}
-              columns={columns}
-              title="Example Content"
-            />
-          </Content>
-        </Page>
-      </div>
-    </AppProvider>
-  );
+  return wrapInTestApp(() => (
+    <div style={{ border: '1px solid #ddd' }}>
+      <Page themeId="tool">
+        <ExampleHeader />
+        <Content>
+          <ExampleContentHeader />
+          <Table
+            options={{ paging: true, padding: 'dense' }}
+            data={generateTestData(10)}
+            columns={columns}
+            title="Example Content"
+          />
+        </Content>
+      </Page>
+    </div>
+  ));
 };