diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 1783f5d983..efd079ae5e 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -9,7 +9,6 @@ import {
 import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
 import { rename } from "components/userInterface/pagesParsing/renameScreen"
 import {
-  // getNewScreen,
   createProps,
   makePropsSafe,
   getBuiltin,
@@ -353,8 +352,10 @@ const addChildComponent = store => (componentToAdd, presetName) => {
   store.update(state => {
     function findSlot(component_array) {
       for (let i = 0; i < component_array.length; i += 1) {
-        if (component_array[i]._component === "##builtin/screenslot")
+        if (component_array[i]._component === "##builtin/screenslot") {
           return true
+        }
+
         if (component_array[i]._children) findSlot(component_array[i])
       }
 
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 129a76c103..e5f06f9d77 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -1,8 +1,10 @@
 <script>
   import { store, backendUiStore } from "builderStore"
   import { map, join } from "lodash/fp"
+  import iframeTemplate from "./iframeTemplate";
   import { pipe } from "components/common/core"
 
+
   let iframe
 
   function transform_component(comp) {
@@ -77,48 +79,13 @@
       style="height: 100%; width: 100%"
       title="componentPreview"
       bind:this={iframe}
-      srcdoc={`<html>
-  <head>
-    ${stylesheetLinks}
-
-    <style>
-      ${styles || ''}
-
-      .pos-${selectedComponentId} {
-        border: 2px solid #0055ff; 
-      }
-
-      body, html {
-        height: 100%!important;
-      }
-      .lay-__screenslot__text {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 20px 0;
-          border: dashed 2px #ccc;
-          font-family: sans-serif;
-          font-size: 1.2rem;
-          color: #999;
-          text-transform: uppercase;
-          font-weight: bold;
-        }
-    <\/style>
-    <\script>
-        window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)};
-        window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentPageFunctions};
-
-        import('/_builder/budibase-client.esm.mjs')
-        .then(module => {
-            module.loadBudibase({ window, localStorage });
-        })
-    <\/script>
-  </head>
-  <body>
-  </body>
-</html>`} />
+      srcdoc={iframeTemplate({
+        styles,
+        stylesheetLinks,
+        selectedComponentId,
+        frontendDefinition: JSON.stringify(frontendDefinition),
+        currentPageFunctions: $store.currentPageFunctions
+      })} />
   {/if}
 </div>
 
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
new file mode 100644
index 0000000000..415d995000
--- /dev/null
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -0,0 +1,48 @@
+export default ({
+  styles,
+  stylesheetLinks,
+  selectedComponentId,
+  frontendDefinition,
+  currentPageFunctions
+}) => `<html>
+  <head>
+    ${stylesheetLinks}
+
+    <style>
+      ${styles || ''}
+
+      .pos-${selectedComponentId} {
+        border: 2px solid #0055ff; 
+      }
+
+      body, html {
+        height: 100%!important;
+      }
+      .lay-__screenslot__text {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 20px 0;
+          border: dashed 2px #ccc;
+          font-family: sans-serif;
+          font-size: 1.2rem;
+          color: #999;
+          text-transform: uppercase;
+          font-weight: bold;
+        }
+    <\/style>
+    <\script>
+        window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${frontendDefinition};
+        window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${currentPageFunctions};
+
+        import('/_builder/budibase-client.esm.mjs')
+        .then(module => {
+            module.loadBudibase({ window, localStorage });
+        })
+    <\/script>
+  </head>
+  <body>
+  </body>
+</html>`
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
index afd7bfccdc..5f3634f42a 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
@@ -3,27 +3,16 @@ import { TYPE_MAP } from "./types"
 import { assign } from "lodash"
 import { uuid } from "builderStore/uuid"
 
-export const getBuiltin = name => {
-  const { props } = createProps({ name })
+export const getBuiltin = _component => {
+  const { props } = createProps({ _component })
 
   return {
-    name,
+    _component,
+    name: "Screenslot",
     props,
   }
 }
 
-// export const getNewScreen = (components, rootComponentName, name) => {
-//   const rootComponent = components[rootComponentName]
-//   return {
-//     name: name || "",
-//     description: "",
-//     url: "",
-//     _css: "",
-//     uiFunctions: "",
-//     props: createProps(rootComponent).props,
-//   }
-// }
-
 /**
  * @param {object} componentDefinition - component definition from a component library
  * @param {object} derivedFromProps - extra props derived from a components given props.
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 5c4188d311..6b54fff2ad 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -4,6 +4,14 @@ export default {
       name: 'Basic',
       isCategory: true,
       children: [
+        {
+          _component: "##builtin/screenslot",
+          name: 'Screenslot',
+          description: 'This component is a placeholder for the rendering of a screen within a page.',
+          icon: 'ri-crop-2-line',
+          commonProps: {},
+          children: []
+        },
         {
           _component: "@budibase/standard-components/container",
           name: 'Container',
@@ -116,6 +124,7 @@ export default {
           children: []
         },
         {
+          _component: "@budibase/standard-components/login",
           name: 'Login',
           description: 'A component that automatically generates a login screen for your app.',
           icon: 'ri-login-box-fill',
@@ -144,6 +153,7 @@ export default {
           children: []
         },
         {
+          _component: "@budibase/materialdesign-components/Form",
           name: 'Form',
           description: 'A component that generates a form from your data.',
           icon: 'ri-file-edit-fill',
diff --git a/packages/server/api/controllers/static.js b/packages/server/api/controllers/static.js
index ddfc811ed6..1ec58c75b9 100644
--- a/packages/server/api/controllers/static.js
+++ b/packages/server/api/controllers/static.js
@@ -2,22 +2,32 @@ const send = require("koa-send");
 const { resolve } = require("path")
 const { homedir } = require("os");
 
-// either serve the builder or serve the actual app index.html
-const builderPath = resolve(process.cwd(), "builder")
-
 exports.serveBuilder = async function(ctx) {
-  console.log(ctx.file);
+  const builderPath = resolve(process.cwd(), "builder")
   await send(ctx, ctx.file, { root: builderPath })
 }
 
 exports.serveApp = async function(ctx) {
-  // resolve unauthenticated page if so
-  await send(ctx, "/index.html", { root: ctx.publicPath })
+  // TODO: update homedir stuff to wherever budi is run
+  // default to homedir
+  const appPath = resolve(
+    homedir(), 
+    ".budibase", 
+    ctx.params.appId,
+    "public",
+    ctx.isAuthenticated ? "main" : "unauthenticated"
+  );
+
+  // TODO: Hook up to JWT auth in real app
+  // TODO: serve CSS and other assets
+  // resolve unauthenticated page if user not authenticated
   // resolve main page if user authenticated
+  await send(ctx, "/index.html", { root: appPath })
 }
 
 exports.serveComponentLibrary = async function(ctx) {
-  // TODO: update to run wherever budi is run
+  // TODO: update homedir stuff to wherever budi is run
+  // default to homedir
   const componentLibraryPath = resolve(
     homedir(), 
     ".budibase", 
@@ -31,7 +41,8 @@ exports.serveComponentLibrary = async function(ctx) {
 }
 
 exports.serveComponentDefinitions = async function(ctx) {
-  // TODO: update to run wherever budi is run
+  // TODO: update homedir stuff to wherever budi is run
+  // default to homedir
   const componentLibraryPath = resolve(
     homedir(), 
     ".budibase", 
