diff --git a/gatsby-config.js b/gatsby-config.js
index 665e580..fe0dbb9 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,44 +1,7 @@
-const path = require('path')
-
-const src = process.env.__SRC__
-const dirname = path.dirname(src)
-
 module.exports = {
   plugins: [
-    // {
-    //   resolve: '@mdx-deck/gatsby-plugin',
-    //   options: {
-    //     path: src,
-    //     dirname,
-    //   },
-    // },
     {
       resolve: 'gatsby-theme-mdx-deck',
-      // options: {
-      //   // enable or disable gatsby-plugin-mdx
-      //   mdx: false,
-      //   // source directory
-      //   contentPath: dirname,
-      //   // base path for routes generate by this theme
-      //   basePath: ''
-      // }
     },
-    // {
-    //   resolve: 'gatsby-source-filesystem',
-    //   options: {
-    //     path: dirname + "/decks/",
-    //     ignore: [
-    //       'node_modules',
-    //       'public',
-    //       '.cache',
-    //     ]
-    //   },
-    // },
-    // {
-    //   resolve: 'gatsby-plugin-compile-es6-packages',
-    //   options: {
-    //     modules: ['mdx-deck', '@mdx-deck/themes', '@mdx-deck/gatsby-plugin'],
-    //   },
-    // },
   ],
 }
diff --git a/package.json b/package.json
index 0d8c507..7ffe33e 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "semantic-release": "^19.0.2"
   },
   "scripts": {
-    "develop": "gatsby develop",
     "start": "./cli.js hello.mdx",
     "build": "./cli.js build hello.mdx",
     "help": "./cli.js"
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 bba5a71..0000000
--- a/src/gatsby-theme-mdx-deck/components/wrapper.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/** @jsx jsx */
-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 = () => {
-  return (
-    <Webcam
-      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>
-  )
-}