diff --git a/components/header.js b/components/header.js
index c85eee96..026d9c28 100644
--- a/components/header.js
+++ b/components/header.js
@@ -123,3 +123,19 @@ export default function Header () {
     </>
   )
 }
+
+export function HeaderPreview () {
+  return (
+    <>
+      <Container className='px-sm-0'>
+        <Navbar className={styles.navbar}>
+          <Nav className='w-100 justify-content-between flex-wrap align-items-center'>
+            <Link href='/' passHref>
+              <Navbar.Brand className={`${styles.brand} d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
+            </Link>
+          </Nav>
+        </Navbar>
+      </Container>
+    </>
+  )
+}
diff --git a/components/layout-preview.js b/components/layout-preview.js
new file mode 100644
index 00000000..e33e431c
--- /dev/null
+++ b/components/layout-preview.js
@@ -0,0 +1,18 @@
+import { HeaderPreview } from './header'
+import Head from 'next/head'
+import Container from 'react-bootstrap/Container'
+
+export default function LayoutPreview ({ children }) {
+  return (
+    <>
+      <Head>
+        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
+      </Head>
+      <HeaderPreview />
+
+      <Container className='mt-1 px-sm-0'>
+        {children}
+      </Container>
+    </>
+  )
+}
diff --git a/pages/preview/index.js b/pages/preview/index.js
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/preview/items/[id].js b/pages/preview/items/[id].js
new file mode 100644
index 00000000..eddae8d7
--- /dev/null
+++ b/pages/preview/items/[id].js
@@ -0,0 +1,53 @@
+import { gql } from '@apollo/client'
+import ApolloClient from '../../../api/client'
+import { ITEM_FIELDS } from '../../../fragments/items'
+import Item from '../../../components/item'
+import Text from '../../../components/text'
+import LayoutPreview from '../../../components/layout-preview'
+import { LightningProvider } from '../../../components/lightning'
+import Comment from '../../../components/comment'
+
+// we can't SSR on the normal page because we'd have to hyrdate the cache
+// on the client which is a lot of work, i.e. a bit fat todo
+export async function getServerSideProps ({ req, params }) {
+  // grab the item on the server side
+  const { error, data: { item } } = await (await ApolloClient(req)).query({
+    query:
+      gql`
+      ${ITEM_FIELDS}
+      {
+        item(id: ${params.id}) {
+          ...ItemFields
+          text
+      }
+    }`
+  })
+
+  if (!item || error) {
+    return {
+      notFound: true
+    }
+  }
+
+  return {
+    props: {
+      item
+    }
+  }
+}
+
+export default function ItemPreview ({ item }) {
+  return (
+    <LayoutPreview>
+      <LightningProvider>
+        {item.parentId
+          ? <Comment item={item} includeParent noComments />
+          : (
+            <Item item={item}>
+              {item.text && <div className='mb-3'><Text>{item.text}</Text></div>}
+            </Item>
+            )}
+      </LightningProvider>
+    </LayoutPreview>
+  )
+}
diff --git a/pages/preview/recent.js b/pages/preview/recent.js
new file mode 100644
index 00000000..e69de29b
