diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
index a77e2146fa..c566e895d7 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@@ -36,6 +36,7 @@
     class={determineClassName(type)}
     bind:value
     class:uk-form-danger={errors.length > 0}>
+    <option></option>
     {#each options as opt}
       <option value={opt}>{opt}</option>
     {/each}
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 523ed25031..abf226048b 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -25,38 +25,69 @@
     name: "Screen Placeholder",
     route: "*",
     props: {
-      _component: "@budibase/standard-components/container",
-      type: "div",
-      _children: [
-        {
-          _component: "@budibase/standard-components/container",
-          _styles: { normal: {}, hover: {}, active: {}, selected: {} },
-          _id: "__screenslot__text",
-          _code: "",
-          className: "",
-          onLoad: [],
-          type: "div",
-          _children: [
-            {
-              _component: "@budibase/standard-components/text",
-              _styles: {
-                normal: {},
-                hover: {},
-                active: {},
-                selected: {},
-              },
-              _id: "__screenslot__text_2",
-              _code: "",
-              text: "content",
-              font: "",
-              color: "",
-              textAlign: "inline",
-              verticalAlign: "inline",
-              formattingTag: "none",
-            },
-          ],
+      "_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
+      "_component": "@budibase/standard-components/container",
+      "_styles": {
+        "normal": {
+          "padding": "0px",
+          "font-family": "Roboto",
+          "border-width": "0",
+          "border-style": "None",
+          "text-align": "center"
         },
+        "hover": {},
+        "active": {},
+        "selected": {}
+      },
+      "_code": "",
+      "className": "",
+      "onLoad": [],
+      "type": "div",
+      "_children": [
+        {
+          "_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324",
+          "_component": "@budibase/standard-components/container",
+          "_styles": {
+            "normal": {
+              "padding": "16px",
+              "border-style": "Dashed",
+              "border-width": "2px",
+              "border-color": "#8a8989fa"
+            },
+            "hover": {},
+            "active": {},
+            "selected": {}
+          },
+          "_code": "",
+          "className": "",
+          "onLoad": [],
+          "type": "div",
+          "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
+          "_instanceName": "Container",
+          "_children": [
+            {
+              "_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
+              "_component": "@budibase/standard-components/heading",
+              "_styles": {
+                "normal": {
+                  "font-family": "Roboto"
+                },
+                "hover": {},
+                "active": {},
+                "selected": {}
+              },
+              "_code": "",
+              "className": "",
+              "text": "Your screens go here",
+              "type": "h1",
+              "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
+              "_instanceName": "Heading",
+              "_children": []
+            }
+          ]
+        }
       ],
+      "_instanceName": "Content Placeholder"
     },
   }
 
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index c40df27aee..b78f882fe1 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -7,6 +7,9 @@ export default `<html>
         height: 100%!important;
         font-family: Roboto !important;
       }
+      *, *:before, *:after {
+        box-sizing: border-box;
+      }
       .lay-__screenslot__text {
           width: 100%;
           height: 100%;
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index ae39ce3ee2..99692d2827 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -406,7 +406,7 @@ export default {
         {
           name: "List",
           _component: "@budibase/standard-components/list",
-          description: "Shiny list",
+          description: "Renders all children once per record, of a given model",
           icon: "ri-file-list-fill",
           properties: {
             design: { ...all },
@@ -414,6 +414,18 @@ export default {
           },
           children: [],
         },
+        {
+          name: "Record Detail",
+          _component: "@budibase/standard-components/recorddetail",
+          description:
+            "Loads a record, using an id from the URL, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
+          children: [],
+        },
         {
           name: "Map",
           _component: "@budibase/standard-components/datamap",
diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index fb0b005096..4f4256f9fe 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -56,13 +56,13 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
 
     const screenIndex = current !== -1 ? current : fallback
 
-    onScreenSelected(screens[screenIndex], _url)
-
     try {
       !url.state && history.pushState(_url, null, _url)
     } catch (_) {
       // ignoring an exception here as the builder runs an iframe, which does not like this
     }
+
+    onScreenSelected(screens[screenIndex], _url)
   }
 
   function click(e) {
diff --git a/packages/server/src/utilities/builder/index.template.html b/packages/server/src/utilities/builder/index.template.html
index 33a7d104ec..58faca7da6 100644
--- a/packages/server/src/utilities/builder/index.template.html
+++ b/packages/server/src/utilities/builder/index.template.html
@@ -17,6 +17,9 @@
             margin: 0px;
             padding: 0px;
         }
+        *, *:before, *:after {
+            box-sizing: border-box;
+        }
     </style>
 
     {{ each(options.stylesheets) }}
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 8df7756499..2c24c02615 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -235,15 +235,14 @@
 		"description": "A configurable data list that attaches to your backend models.",
 		"data": true,
 		"props": {
-			"model": "models",
-			"layout": {
-				"type": "options",
-				"default": "list",
-				"options": [
-					"list",
-					"grid"
-				]
-			}
+			"model": "models"
+		}
+	},
+	"recorddetail": {
+		"description": "Loads a record, using an ID in the url",
+		"data": true,
+		"props": {
+			"model": "models"
 		}
 	},
 	"datamap": {
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 8207ef47ee..ec086cbace 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -3,7 +3,6 @@
 
   export let _bb
   export let model
-  export let layout = "list"
 
   let headers = []
   let store = _bb.store
@@ -33,39 +32,5 @@
   })
 </script>
 
-<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
-  <div class="data-card" bind:this={target} />
+<section bind:this={target}>
 </section>
-
-<style>
-  .list {
-    display: flex;
-    flex-direction: column;
-    font-family: Inter;
-  }
-
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  ul {
-    list-style-type: none;
-  }
-
-  li {
-    margin: 5px 0 5px 0;
-  }
-
-  .data-card {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 10px;
-  }
-
-  .data-key {
-    font-weight: bold;
-    font-size: 20px;
-    text-transform: capitalize;
-  }
-</style>
diff --git a/packages/standard-components/src/RecordDetail.svelte b/packages/standard-components/src/RecordDetail.svelte
new file mode 100644
index 0000000000..1ebd89e6f0
--- /dev/null
+++ b/packages/standard-components/src/RecordDetail.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { onMount } from "svelte"
+
+  export let _bb
+  export let model
+
+  let headers = []
+  let store = _bb.store
+  let target
+
+  async function fetchFirstRecord() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const allRecords = await response.json()
+      if (allRecords.length > 0) return allRecords[0]
+    }
+  }
+
+  async function fetchData() {
+    const pathParts = window.location.pathname.split("/")
+
+    let record
+    // if srcdoc, then we assume this is the builder preview
+    if(pathParts.length === 0 || pathParts[0] === "srcdoc") {
+      record = await fetchFirstRecord()
+    } else {
+      const id = pathParts[pathParts.length - 1]
+      const GET_RECORD_URL = `/api/${model}/records/${id}`
+      const response = await _bb.api.get(GET_RECORD_URL)
+      if (response.status === 200) {
+        record = await response.json()
+      }
+    }
+
+    if (record) {
+      _bb.attachChildren(target, {
+        hydrate: false,
+        context: record,
+      })
+    } else {
+      throw new Error("Failed to fetch record.", response)
+    }
+  }
+
+  onMount(async () => {
+    await fetchData()
+  })
+</script>
+
+<section bind:this={target}>
+</section>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 37d6abab74..a0c6ee025d 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -23,3 +23,4 @@ export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
+export { default as recorddetail } from "./RecordDetail.svelte"