diff --git a/packages/gatsby-admin/.eslintignore b/packages/gatsby-admin/.eslintignore
new file mode 100644
index 0000000000000..020e083a4fa66
--- /dev/null
+++ b/packages/gatsby-admin/.eslintignore
@@ -0,0 +1,5 @@
+packages/*/*.js
+packages/gatsby-link/index.js
+packages/gatsby-legacy-polyfills/dist/**
+../gatsby-link/index.js
+../gatsby-legacy-polyfills/dist/**
\ No newline at end of file
diff --git a/packages/gatsby-admin/src/components/pageembed.tsx b/packages/gatsby-admin/src/components/pageembed.tsx
new file mode 100644
index 0000000000000..798cfa55605db
--- /dev/null
+++ b/packages/gatsby-admin/src/components/pageembed.tsx
@@ -0,0 +1,22 @@
+/* @jsx jsx */
+import { jsx } from "theme-ui"
+
+const PageEmbed: React.FC<{ src: string; height: number }> = props => (
+  <iframe
+    src={props.src}
+    scrolling="no"
+    sx={{
+      border: `none`,
+      boxShadow: `floating`,
+      borderRadius: 2,
+      // NOTE(@mxstbr): This is a really hacky way to scale an iframe. Maybe there's a better one?
+      width: `200%`,
+      height: `${props.height}px`,
+      marginBottom: `-${props.height / 2}px`,
+      transform: `scale(0.5)`,
+      transformOrigin: `0 0`,
+    }}
+  />
+)
+
+export default PageEmbed
diff --git a/packages/gatsby-admin/src/components/providers.tsx b/packages/gatsby-admin/src/components/providers.tsx
index c16f65d1a2e77..4fe079d4269b7 100644
--- a/packages/gatsby-admin/src/components/providers.tsx
+++ b/packages/gatsby-admin/src/components/providers.tsx
@@ -17,6 +17,7 @@ const theme = {
     "500": 500,
   },
   borders: {
+    none: `none`,
     default: `1px solid ${baseTheme.colors.whiteFade[20]}`,
     sixtywhite: `1px solid ${baseTheme.colors.whiteFade[40]}`,
     white: `1px solid ${baseTheme.colors.white}`,
diff --git a/packages/gatsby-admin/src/pages/index.tsx b/packages/gatsby-admin/src/pages/index.tsx
index e549ff8a42014..ca783d1b2743d 100644
--- a/packages/gatsby-admin/src/pages/index.tsx
+++ b/packages/gatsby-admin/src/pages/index.tsx
@@ -12,6 +12,7 @@ import {
   ButtonProps,
   InputFieldLabel,
 } from "gatsby-interface"
+import PageEmbed from "../components/pageembed"
 
 const SecondaryButton: React.FC<ButtonProps> = props => (
   <Button
@@ -130,7 +131,12 @@ const PluginCard: React.FC<{
   <Flex
     flexDirection="column"
     gap={6}
-    sx={{ backgroundColor: `ui.background`, padding: 5, borderRadius: 2 }}
+    sx={{
+      backgroundColor: `ui.background`,
+      padding: 5,
+      borderRadius: 2,
+      boxShadow: `floating`,
+    }}
   >
     <Heading as="h2" sx={{ fontWeight: `500`, fontSize: 3 }}>
       {plugin.name}
@@ -157,6 +163,11 @@ const Index: React.FC<{}> = () => {
             shadowableFiles
           }
         }
+        allGatsbyPage {
+          nodes {
+            path
+          }
+        }
       }
     `,
   })
@@ -167,6 +178,26 @@ const Index: React.FC<{}> = () => {
 
   return (
     <Flex gap={7} flexDirection="column" sx={{ paddingY: 7, paddingX: 6 }}>
+      {!window ||
+        (!window.frameElement && (
+          <Flex gap={7} flexDirection="column">
+            <SectionHeading>Pages</SectionHeading>
+            <Grid gap={6} columns={[1, 1, 1, 2, 3]}>
+              {data.allGatsbyPage.nodes
+                .filter(page => page.path.indexOf(`/dev-404-page/`) !== 0)
+                .map(page => (
+                  <Flex
+                    gap={5}
+                    flexDirection="column"
+                    sx={{ width: `100%`, textAlign: `center` }}
+                  >
+                    <PageEmbed height={400} src={page.path} />
+                    <Text sx={{ color: `text.secondary` }}>{page.path}</Text>
+                  </Flex>
+                ))}
+            </Grid>
+          </Flex>
+        ))}
       <SectionHeading>Plugins</SectionHeading>
       <Grid gap={6} columns={[1, 1, 1, 2, 3]}>
         {data.allGatsbyPlugin.nodes