diff --git a/packages/builder/src/builderStore/buildCodeForScreens.js b/packages/builder/src/builderStore/buildCodeForScreens.js
index af8a930c93..037a85d0bb 100644
--- a/packages/builder/src/builderStore/buildCodeForScreens.js
+++ b/packages/builder/src/builderStore/buildCodeForScreens.js
@@ -23,7 +23,7 @@ export const buildCodeForScreens = screens => {
     allfunctions += buildCodeForSingleScreen(screen)
   }
 
-  return `return ({ ${allfunctions} });`
+  return `({ ${allfunctions} });`
 }
 
 const buildComponentCode = componentProps =>
diff --git a/packages/builder/src/builderStore/insertCodeMetadata.js b/packages/builder/src/builderStore/insertCodeMetadata.js
index 00c18901b5..9093c4003d 100644
--- a/packages/builder/src/builderStore/insertCodeMetadata.js
+++ b/packages/builder/src/builderStore/insertCodeMetadata.js
@@ -12,6 +12,6 @@ export const insertCodeMetadata = props => {
 
 const codeMetaData = code => {
   return {
-    dependsOnStore: RegExp(/(store.)/g).test(code),
+    dependsOnStore: RegExp(/(state.)/g).test(code),
   }
 }
diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js
index 7749098945..01a7ebe565 100644
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@@ -517,7 +517,7 @@ const setCurrentScreen = store => screenName => {
       getContainerComponent(s.components),
       screen.props
     )
-    setCurrentScreenFunctions(s)
+    setCurrentPageFunctions(s)
     return s
   })
 }
@@ -675,7 +675,7 @@ const _savePage = async s => {
 
   await api.post(`/_builder/api/${appname}/pages/${s.currentPageName}`, {
     page: { componentLibraries: s.pages.componentLibraries, ...page },
-    uiFunctions: "{'1234':() => 'test return'}",
+    uiFunctions: s.currentPageFunctions,
     screens: page._screens,
   })
 }
@@ -709,7 +709,11 @@ const setCurrentPage = store => pageName => {
       s.currentPreviewItem.props,
     ])
 
-    setCurrentScreenFunctions(s)
+    for (let screen of s.screens) {
+      screen._css = generate_screen_css([screen.props])
+    }
+
+    setCurrentPageFunctions(s)
     return s
   })
 }
@@ -819,7 +823,7 @@ const setComponentCode = store => code => {
   store.update(s => {
     s.currentComponentInfo._code = code
 
-    setCurrentScreenFunctions(s)
+    setCurrentPageFunctions(s)
     // save without messing with the store
     _saveScreenApi(s.currentPreviewItem, s)
 
@@ -827,15 +831,13 @@ const setComponentCode = store => code => {
   })
 }
 
-const setCurrentScreenFunctions = s => {
-  s.currentScreenFunctions =
-    s.currentPreviewItem === "screen"
-      ? buildCodeForScreens([s.currentPreviewItem])
-      : "({});"
-
+const setCurrentPageFunctions = s => {
+  s.currentPageFunctions = buildPageCode(s.screens, s.pages[s.currentPageName])
   insertCodeMetadata(s.currentPreviewItem.props)
 }
 
+const buildPageCode = (screens, page) => buildCodeForScreens([page, ...screens])
+
 const setScreenType = store => type => {
   store.update(s => {
     s.currentFrontEndType = type
diff --git a/packages/builder/src/userInterface/CurrentItemPreview.svelte b/packages/builder/src/userInterface/CurrentItemPreview.svelte
index fb8a2ff255..7b27a6cb75 100644
--- a/packages/builder/src/userInterface/CurrentItemPreview.svelte
+++ b/packages/builder/src/userInterface/CurrentItemPreview.svelte
@@ -111,7 +111,7 @@
     <\script>
         window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)};
         window["##BUDIBASE_BACKEND_DEFINITION##"] = ${JSON.stringify(backendDefinition)};
-        window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentScreenFunctions};
+        window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentPageFunctions};
 
         import('/_builder/budibase-client.esm.mjs')
         .then(module => {
diff --git a/packages/client/src/createApp.js b/packages/client/src/createApp.js
index ff409b36ed..f43a6d4c34 100644
--- a/packages/client/src/createApp.js
+++ b/packages/client/src/createApp.js
@@ -32,6 +32,7 @@ export const createApp = (
         uiFunctions,
         onScreenSlotRendered: () => {},
         routeTo,
+        appRootPath: frontendDefinition.appRootPath,
       })
       const getAttchChildrenParams = attachChildrenParams(stateManager)
       screenSlotNode.props._children = [screen.props]
@@ -78,6 +79,7 @@ export const createApp = (
     componentLibraries,
     uiFunctions,
     onScreenSlotRendered,
+    appRootPath: frontendDefinition.appRootPath,
     // seems weird, but the routeTo variable may not be available at this point
     routeTo: url => routeTo(url),
   })
diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 0ca8a25cab..58db7e982a 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -25,7 +25,7 @@ export const screenRouter = (screens, onScreenSelected, appRootPath) => {
     const params = {}
 
     if (current === -1) {
-      routes.forEach(([p], i) => {
+      routes.forEach((p, i) => {
         const pm = regexparam(p)
         const matches = pm.pattern.exec(_url)
 
diff --git a/packages/client/src/state/setState.js b/packages/client/src/state/setState.js
index 49e7780ff8..7c23efe8eb 100644
--- a/packages/client/src/state/setState.js
+++ b/packages/client/src/state/setState.js
@@ -17,7 +17,7 @@ export const setState = (store, path, value) => {
     if (
       state[currentKey] === null ||
       state[currentKey] === undefined ||
-      !isObject(obj[currentKey])
+      !isObject(state[currentKey])
     ) {
       state[currentKey] = {}
     }
diff --git a/packages/client/src/state/stateManager.js b/packages/client/src/state/stateManager.js
index 71bcbe33b5..f10de93a9d 100644
--- a/packages/client/src/state/stateManager.js
+++ b/packages/client/src/state/stateManager.js
@@ -23,14 +23,14 @@ const isMetaProp = propName =>
 export const createStateManager = ({
   store,
   coreApi,
-  rootPath,
+  appRootPath,
   frontendDefinition,
   componentLibraries,
   uiFunctions,
   onScreenSlotRendered,
   routeTo,
 }) => {
-  let handlerTypes = eventHandlers(store, coreApi, rootPath, routeTo)
+  let handlerTypes = eventHandlers(store, coreApi, appRootPath, routeTo)
   let currentState
 
   // any nodes that have props that are bound to the store
@@ -251,11 +251,11 @@ const _setup = (
 
 const makeHandler = (handlerTypes, handlerInfo) => {
   const handlerType = handlerTypes[handlerInfo.handlerType]
-  return context => {
+  return async context => {
     const parameters = {}
     for (let paramName in handlerInfo.parameters) {
       parameters[paramName] = handlerInfo.parameters[paramName](context)
     }
-    handlerType.execute(parameters)
+    await handlerType.execute(parameters)
   }
 }
diff --git a/packages/materialdesign-components/src/Common/Ripple.js b/packages/materialdesign-components/src/Common/Ripple.js
index 6dc9cc96a7..2553bbca65 100644
--- a/packages/materialdesign-components/src/Common/Ripple.js
+++ b/packages/materialdesign-components/src/Common/Ripple.js
@@ -5,7 +5,7 @@ export default function ripple(
   props = { colour: "primary", unbounded: false }
 ) {
   node.classList.add("mdc-ripple-surface")
-  const component = new MDCRipple(node)
+  let component = new MDCRipple(node)
   component.unbounded = props.unbounded
 
   if (props.colour === "secondary") {
diff --git a/packages/materialdesign-components/src/Datatable/Datatable.svelte b/packages/materialdesign-components/src/Datatable/Datatable.svelte
index 74ce2ef653..3e7e2c7b11 100644
--- a/packages/materialdesign-components/src/Datatable/Datatable.svelte
+++ b/packages/materialdesign-components/src/Datatable/Datatable.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount, setContext } from "svelte"
+  import { onMount } from "svelte"
   import { MDCDataTable } from "@material/data-table"
   import Row from "./DatatableRow.svelte"
   import Cell from "./DatatableCell.svelte"
@@ -10,13 +10,14 @@
   export let onLoad
 
   const cb = new ClassBuilder("data-table")
-  setContext("BBMD:data-table:cb", cb)
 
   let datatable = null
   let instance = null
   let tableElement
   let initialied = false
 
+  
+
   $: {
     if(tableElement && datatable && !initialied) {
       const children = _bb.attachChildren(tableElement)
@@ -30,7 +31,11 @@
 
   onMount(() => {
     return () => {
-      !!instance && instance.destroy()
+      try {
+        !!instance && instance.destroy()
+      } catch(e) {
+        console.log(e)
+      }
       instance = null
     }
   })
diff --git a/packages/materialdesign-components/src/Datatable/DatatableBody.svelte b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte
index 409d4828eb..ad7108ff9c 100644
--- a/packages/materialdesign-components/src/Datatable/DatatableBody.svelte
+++ b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte
@@ -4,7 +4,7 @@ import ClassBuilder from "../ClassBuilder.js"
 
 export let _bb
 
-const cb = getContext("BBMD:data-table:cb")
+const cb = new ClassBuilder("data-table")
 
 let tbody
 
diff --git a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte
index 3cea365f99..d0685f695d 100644
--- a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte
+++ b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte
@@ -1,11 +1,12 @@
 <script>
   import { getContext } from "svelte"
-
+  import ClassBuilder from "../ClassBuilder.js"
+  
   export let isHeader = false
   export let numeric = false
   export let _bb
 
-  const cb = getContext("BBMD:data-table:cb")
+  const cb = new ClassBuilder("data-table")
 
   let elementName = isHeader ? "header-cell" : "cell"
   let modifiers = { numeric }
diff --git a/packages/materialdesign-components/src/Datatable/DatatableHead.svelte b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte
index f50a5cca0e..82f260ed57 100644
--- a/packages/materialdesign-components/src/Datatable/DatatableHead.svelte
+++ b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte
@@ -1,7 +1,11 @@
 <script>
 
+import ClassBuilder from "../ClassBuilder.js"
+
 export let _bb
 
+const cb = new ClassBuilder("data-table")
+
 let thead
 
 $: thead && _bb.attachChildren(thead)
diff --git a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
index 08b0fd1040..520b666776 100644
--- a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
+++ b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte";
-
+  import ClassBuilder from "../ClassBuilder.js"
+  
   export let onSelect = () => {};
   export let isHeader = false;
 
@@ -9,7 +10,7 @@
   let row = null;
   let selected = false;
 
-  const cb = getContext("BBMD:data-table:cb");
+  const cb = new ClassBuilder("data-table")
 
   let elementName = isHeader ? "header-row" : "row";
   let modifiers = {};
diff --git a/packages/materialdesign-components/src/Templates/indexDatatable.js b/packages/materialdesign-components/src/Templates/indexDatatable.js
index ac0cfe79ea..e6eee2f2bf 100644
--- a/packages/materialdesign-components/src/Templates/indexDatatable.js
+++ b/packages/materialdesign-components/src/Templates/indexDatatable.js
@@ -55,11 +55,7 @@ const dataCells = (index, indexSchema) =>
       {
         _component: "@budibase/standard-components/text",
         type: "none",
-        text: {
-          "##bbstate": `${dataItem(index)}.${col.name}`,
-          "##bbstatefallback": "",
-          "##bbsource": "context",
-        },
+        text: `context.${dataItem(index)}.${col.name}`,
       },
     ],
   }))
diff --git a/packages/materialdesign-components/src/Templates/recordForm.js b/packages/materialdesign-components/src/Templates/recordForm.js
index afb33b19e5..25a040470c 100644
--- a/packages/materialdesign-components/src/Templates/recordForm.js
+++ b/packages/materialdesign-components/src/Templates/recordForm.js
@@ -7,8 +7,17 @@ export default ({ records }) =>
 const outerContainer = record => ({
   _component: "@budibase/standard-components/container",
   _code: "",
-  onLoad: [],
   type: "div",
+  onLoad: [
+    {
+      "##eventHandlerType": "Get New Record",
+      parameters: {
+        collectionKey: record.collectionKey,
+        childRecordType: record.name,
+        statePath: record.name,
+      },
+    },
+  ],
   _children: [
     heading(record),
     ...record.fields.map(f => field(record, f)),
@@ -33,7 +42,8 @@ const textField = (record, f) => ({
   disabled: false,
   fullwidth: false,
   colour: "primary",
-  maxLength: f.typeOptions && f.typeOptions.maxLength ? f.typeOptions : 0,
+  maxLength:
+    f.typeOptions && f.typeOptions.maxLength ? f.typeOptions.maxLength : 0,
   placeholder: f.label,
   value: fieldValueBinding(record, f),
 })
@@ -57,15 +67,15 @@ const buttons = record => ({
     position: {
       column: ["", ""],
       row: ["", ""],
-      margin: ["","","",""],
-      padding: ["30px","","",""],
+      margin: ["", "", "", ""],
+      padding: ["30px", "", "", ""],
       height: [""],
       width: [""],
-      zindex: [""]
+      zindex: [""],
     },
     layout: {
       templaterows: [""],
-      templatecolumns: [""]
+      templatecolumns: [""],
     },
   },
   _children: [
diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte
index 6592c88024..bd6cf9a0c2 100644
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@@ -18,7 +18,7 @@
   onMount(() => {
     if (!!tf) tfInstance = new MDCTextField(tf)
     return () => {
-      !!tfInstance && tf.tfInstance.destroy()
+      !!tfInstance && tf.tfInstance && tf.tfInstance.destroy()
       tf = null
     }
   })
@@ -79,6 +79,7 @@
   $: useNotchedOutline = variant == "outlined" || textarea
   $: renderLeadingIcon = useIcon && !trailingIcon
   $: renderTrailingIcon = useIcon && trailingIcon
+  $: safeMaxLength = maxLength <= 0 ? undefined : maxLength
 
   let props = { modifiers, customs }
   const blockClasses = cb.build({ props })
@@ -91,10 +92,12 @@
   }
 
   function changed(e) {
+    const val = e.target.value
+    value = val
     if (_bb.isBound(_bb.props.value)) {
-      _bb.setStateFromBinding(_bb.props.value, e.target.value)
+      _bb.setStateFromBinding(_bb.props.value, val)
     }
-    _bb.call(onChange, e.target.value)
+    _bb.call(onChange, val)
   }
 </script>
 
@@ -116,7 +119,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         {required}
         {placeholder}
         {minLength}
-        {maxLength}
+        maxLength={safeMaxLength}
         value={value}
         on:change={changed} />
     {:else}
@@ -131,11 +134,11 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         {required}
         placeholder={!!label && fullwidth ? label : placeholder}
         {minLength}
-        {maxLength}
+        maxLength={safeMaxLength}
         value={value}
         aria-label={`Textfield ${variant}`}
         on:focus={focus}
-        on:change={changed} />
+        on:input={changed} />
       {#if renderTrailingIcon}
         <Icon {icon} />
       {/if}