diff --git a/pages/03-core/in-iframe.page.tsx b/pages/03-core/in-iframe.page.tsx
new file mode 100644
index 00000000..6dc19fbc
--- /dev/null
+++ b/pages/03-core/in-iframe.page.tsx
@@ -0,0 +1,77 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { omit } from "lodash";
+
+import ColumnLayout from "@cloudscape-design/components/column-layout";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { dateFormatter } from "../common/formatters";
+import { useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+
+export default function () {
+  const { chartProps } = useChartSettings();
+  return (
+    <Page title="Charts inside iframe test page" iframe={{}}>
+      <ColumnLayout columns={2}>
+        <CoreChart
+          {...omit(chartProps.pie, "ref")}
+          ariaLabel="Line chart"
+          options={{
+            chart: { height: 300 },
+            series: [
+              {
+                name: "Running",
+                type: "line",
+                data: [
+                  { x: new Date("2020-01-01").getTime(), y: 44 },
+                  { x: new Date("2020-01-02").getTime(), y: 55 },
+                  { x: new Date("2020-01-03").getTime(), y: 60 },
+                ],
+              },
+              {
+                name: "Failed",
+                type: "line",
+                data: [
+                  { x: new Date("2020-01-01").getTime(), y: 22 },
+                  { x: new Date("2020-01-02").getTime(), y: 15 },
+                  { x: new Date("2020-01-03").getTime(), y: 30 },
+                ],
+              },
+              {
+                name: "In-progress",
+                type: "line",
+                data: [
+                  { x: new Date("2020-01-01").getTime(), y: 34 },
+                  { x: new Date("2020-01-02").getTime(), y: 30 },
+                  { x: new Date("2020-01-03").getTime(), y: 10 },
+                ],
+              },
+            ],
+            xAxis: [{ type: "datetime", valueFormatter: dateFormatter }],
+          }}
+        />
+
+        <CoreChart
+          {...omit(chartProps.pie, "ref")}
+          ariaLabel="Pie chart"
+          options={{
+            chart: { height: 300 },
+            series: [
+              {
+                name: "Resource count",
+                type: "pie",
+                data: [
+                  { name: "Running", y: 34 },
+                  { name: "Failed", y: 30 },
+                  { name: "In-progress", y: 10 },
+                ],
+              },
+            ],
+          }}
+        />
+      </ColumnLayout>
+    </Page>
+  );
+}
diff --git a/pages/06-visual-tests/in-iframe.page.tsx b/pages/06-visual-tests/in-iframe.page.tsx
index 4b0577ec..653073a0 100644
--- a/pages/06-visual-tests/in-iframe.page.tsx
+++ b/pages/06-visual-tests/in-iframe.page.tsx
@@ -6,41 +6,34 @@ import { omit } from "lodash";
 import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
 import { useChartSettings } from "../common/page-settings";
 import { Page } from "../common/templates";
-import { IframeWrapper } from "../utils/iframe-wrapper";
 
 export default function () {
+  const { chartProps } = useChartSettings();
   return (
-    <Page title="Chart inside iframe visual regression page">
-      <IframeWrapper
-        AppComponent={() => {
-          const { chartProps } = useChartSettings();
-          return (
-            <CoreChart
-              {...omit(chartProps.pie, "ref")}
-              ariaLabel="Pie chart"
-              options={{
-                series: [
-                  {
-                    name: "Resource count",
-                    type: "pie",
-                    data: [
-                      { name: "Running", y: 60 },
-                      { name: "Failed", y: 30 },
-                      { name: "In-progress", y: 10 },
-                    ],
-                  },
-                ],
-              }}
-              callback={(api) => {
-                setTimeout(() => {
-                  if (api.chart.series) {
-                    const point = api.chart.series[0].data.find((p) => p.y === 10)!;
-                    api.highlightChartPoint(point);
-                  }
-                }, 0);
-              }}
-            />
-          );
+    <Page title="Chart inside iframe visual regression page" iframe={{}}>
+      <CoreChart
+        {...omit(chartProps.pie, "ref")}
+        ariaLabel="Pie chart"
+        options={{
+          series: [
+            {
+              name: "Resource count",
+              type: "pie",
+              data: [
+                { name: "Running", y: 60 },
+                { name: "Failed", y: 30 },
+                { name: "In-progress", y: 10 },
+              ],
+            },
+          ],
+        }}
+        callback={(api) => {
+          setTimeout(() => {
+            if (api.chart.series) {
+              const point = api.chart.series[0].data.find((p) => p.y === 10)!;
+              api.highlightChartPoint(point);
+            }
+          }, 0);
         }}
       />
     </Page>
diff --git a/pages/common/templates.tsx b/pages/common/templates.tsx
index f4065680..17f07d9c 100644
--- a/pages/common/templates.tsx
+++ b/pages/common/templates.tsx
@@ -14,6 +14,7 @@ import Header from "@cloudscape-design/components/header";
 import SpaceBetween from "@cloudscape-design/components/space-between";
 
 import AppContext from "../app/app-context";
+import { IframeWrapper } from "../utils/iframe-wrapper";
 import { ScreenshotArea } from "./screenshot-area";
 
 import styles from "./styles.module.scss";
@@ -48,12 +49,14 @@ export function Page({
   settings,
   children,
   screenshotArea = true,
+  iframe,
 }: {
   title: React.ReactNode;
   subtitle?: React.ReactNode;
   settings?: React.ReactNode;
   children: React.ReactNode;
   screenshotArea?: boolean;
+  iframe?: { id?: string };
 }) {
   const { urlParams } = useContext(AppContext);
   const [toolsOpen, setToolsOpen] = useState(!urlParams.screenshotMode);
@@ -70,6 +73,19 @@ export function Page({
       },
     });
   }
+
+  const content = (
+    <Box>
+      <h1>{title}</h1>
+      {subtitle && !urlParams.screenshotMode && (
+        <Box variant="p" margin={{ bottom: "xs" }}>
+          {subtitle}
+        </Box>
+      )}
+      <Box>{screenshotArea ? <ScreenshotArea>{children}</ScreenshotArea> : children}</Box>
+    </Box>
+  );
+
   return (
     <AppLayout
       headerSelector="#h"
@@ -77,17 +93,7 @@ export function Page({
       activeDrawerId={toolsOpen ? "settings" : null}
       onDrawerChange={({ detail }) => setToolsOpen(!!detail.activeDrawerId)}
       drawers={drawers}
-      content={
-        <Box>
-          <h1>{title}</h1>
-          {subtitle && !urlParams.screenshotMode && (
-            <Box variant="p" margin={{ bottom: "xs" }}>
-              {subtitle}
-            </Box>
-          )}
-          <Box>{screenshotArea ? <ScreenshotArea>{children}</ScreenshotArea> : children}</Box>
-        </Box>
-      }
+      content={iframe ? <IframeWrapper {...iframe} AppComponent={() => content} /> : content}
     />
   );
 }