diff --git a/src/gatsby-theme-mdx-deck/components/app.js b/src/gatsby-theme-mdx-deck/components/app.js
new file mode 100644
index 0000000..b98bc39
--- /dev/null
+++ b/src/gatsby-theme-mdx-deck/components/app.js
@@ -0,0 +1,66 @@
+// Original source: https://github.com/jxnblk/mdx-deck/blob/master/packages/gatsby-theme/src/components/app.js
+import React, { useReducer } from 'react'
+import merge from 'lodash.merge'
+import Webcam from "react-webcam";
+import Context from 'gatsby-theme-mdx-deck/src/context'
+import { modes } from 'gatsby-theme-mdx-deck/src/constants'
+
+const WebcamAsBackground = () => {
+  const videoConstraints = {
+    width: { min: 640, ideal: 1920, max: 1920 },
+    height: { min: 400, ideal: 1080, max: 1080 },
+    facingMode: "user"
+  };
+
+  return (
+    <Webcam
+      videoConstraints={videoConstraints}
+      style={{
+        width: '100%',
+        height: '100%',
+        position: 'fixed',
+        objectFit: "cover",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: -1000,
+      }}
+    />
+  )
+}
+
+const reducer = (state, next) =>
+  typeof next === 'function'
+    ? merge({}, state, next(state))
+    : merge({}, state, next)
+
+export default props => {
+  const [state, setState] = useReducer(reducer, {
+    mode: modes.normal,
+    step: 0,
+    metadata: {},
+  })
+
+  const register = (index, key, value) => {
+    if (state.metadata[index] && state.metadata[index][key]) return
+    setState({
+      metadata: {
+        [index]: {
+          [key]: value,
+        },
+      },
+    })
+  }
+
+  const context = {
+    ...state,
+    setState,
+    register,
+  }
+
+  return <>
+    <WebcamAsBackground />
+    <Context.Provider value={context}>{props.children}</Context.Provider>
+  </>
+}
diff --git a/src/gatsby-theme-mdx-deck/components/wrapper.js b/src/gatsby-theme-mdx-deck/components/wrapper.js
deleted file mode 100644
index 888cba7..0000000
--- a/src/gatsby-theme-mdx-deck/components/wrapper.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/** @jsx jsx */
-// original source: https://github.com/jxnblk/mdx-deck/blob/master/packages/gatsby-theme/src/components/wrapper.js
-import { jsx } from 'theme-ui'
-import React, { Fragment, useState, useEffect } from 'react'
-import useDeck from 'gatsby-theme-mdx-deck/src/hooks/use-deck'
-import { modes } from 'gatsby-theme-mdx-deck/src/constants'
-import Webcam from "react-webcam";
-
-const DefaultProvider = props =>
-  React.createElement(Fragment, null, props.children)
-
-const WebcamAsBackground = React.memo(() => {
-  const videoConstraints = {
-    width: { min: 640, ideal: 1920, max: 1920 },
-    height: { min: 400, ideal: 1080, max: 1080 },
-    facingMode: "user"
-  };
-
-  return (
-    <Webcam
-      videoConstraints={videoConstraints}
-      style={{
-        width: '100%',
-        height: '100%',
-        position: 'fixed',
-        objectFit: "cover",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: -1000,
-      }}
-    />
-  )
-})
-
-export default props => {
-  const [height, setHeight] = useState('100vh')
-  const { mode, theme } = useDeck()
-
-  useEffect(() => {
-    // handle mobile safari height
-    setHeight(window.innerHeight)
-    const handleResize = e => {
-      setHeight(window.innerHeight)
-    }
-    const stopTouch = e => {
-      if (mode !== modes.normal) return
-      e.preventDefault()
-    }
-    window.addEventListener('resize', handleResize)
-    document.body.addEventListener('touchstart', stopTouch)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-      document.body.removeEventListener('touchstart', stopTouch)
-    }
-  }, [mode])
-
-  const { Provider = DefaultProvider } = theme
-
-  return (
-    <Provider>
-      <WebcamAsBackground />
-      <div
-        style={{
-          background: "transparent"
-        }}
-        {...props}
-        sx={{
-          width: '100vw',
-          height: mode !== modes.print ? height : '100vh',
-          variant: 'styles.root',
-          '*': {
-            boxSizing: 'border-box',
-          },
-        }}
-      />
-    </Provider>
-  )
-}