diff --git a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js
index 1f30d974ef..817dfeceea 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/createFromScratchScreen.js
@@ -6,9 +6,5 @@ export default {
 }
 
 const createScreen = () => {
-  return new Screen()
-    .mainType("div")
-    .component("@budibase/standard-components/container")
-    .instanceName("New Screen")
-    .json()
+  return new Screen().instanceName("New Screen").json()
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 980f71742b..c46564b69b 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -28,7 +28,6 @@ function generateTitleContainer(table, formId) {
 
 const createScreen = table => {
   const screen = new Screen()
-    .component("@budibase/standard-components/container")
     .instanceName(`${table.name} - New`)
     .route(newRowUrl(table))
 
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index f15f1de5a4..4abe664e85 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -149,7 +149,6 @@ const createScreen = table => {
   provider.addChild(repeater)
 
   return new Screen()
-    .component("@budibase/standard-components/container")
     .instanceName(`${table.name} - Detail`)
     .route(rowDetailUrl(table))
     .addChild(provider)
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
index f31c4c12d2..58931d4e0c 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@@ -56,14 +56,15 @@ function generateTitleContainer(table) {
     .text(table.name)
 
   return new Component("@budibase/standard-components/container")
-    .type("div")
     .normalStyle({
-      display: "flex",
-      "flex-direction": "row",
-      "justify-content": "space-between",
-      "align-items": "center",
       "margin-bottom": "32px",
     })
+    .customProps({
+      direction: "row",
+      hAlign: "stretch",
+      vAlign: "middle",
+      size: "shrink",
+    })
     .instanceName("Title Container")
     .addChild(heading)
     .addChild(newButton)
@@ -137,13 +138,17 @@ const createScreen = table => {
       "padding-left": "48px",
       "margin-bottom": "20px",
     })
-    .type("div")
+    .customProps({
+      direction: "column",
+      hAlign: "stretch",
+      vAlign: "top",
+      size: "shrink",
+    })
     .instanceName("Container")
     .addChild(generateTitleContainer(table))
     .addChild(provider)
 
   return new Screen()
-    .component("@budibase/standard-components/container")
     .route(rowListUrl(table))
     .instanceName(`${table.name} - List`)
     .addChild(mainContainer)
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
index 79e1632ad2..24c7105492 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
@@ -8,7 +8,7 @@ export class Screen extends BaseStructure {
       layoutId: "layout_private_master",
       props: {
         _id: uuid(),
-        _component: "",
+        _component: "@budibase/standard-components/container",
         _styles: {
           normal: {},
           hover: {},
@@ -17,6 +17,10 @@ export class Screen extends BaseStructure {
         },
         _children: [],
         _instanceName: "",
+        direction: "column",
+        hAlign: "stretch",
+        vAlign: "top",
+        size: "grow",
       },
       routing: {
         route: "",
@@ -41,11 +45,6 @@ export class Screen extends BaseStructure {
     return this
   }
 
-  mainType(type) {
-    this._json.type = type
-    return this
-  }
-
   route(route) {
     this._json.routing.route = route
     return this
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index e234a1a770..579252a9dd 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -35,7 +35,6 @@ export function makeLinkComponent(tableName) {
 
 export function makeMainForm() {
   return new Component("@budibase/standard-components/form")
-    .type("div")
     .normalStyle({
       width: "700px",
       padding: "0px",
@@ -79,11 +78,16 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
     .instanceName("Identifier")
 
   return new Component("@budibase/standard-components/container")
-    .type("div")
     .normalStyle({
       "font-size": "14px",
       color: "#757575",
     })
+    .customProps({
+      direction: "row",
+      hAlign: "left",
+      vAlign: "middle",
+      size: "shrink",
+    })
     .instanceName("Breadcrumbs")
     .addChild(link)
     .addChild(arrowText)
@@ -149,15 +153,16 @@ export function makeTitleContainer(title) {
     .text(title)
 
   return new Component("@budibase/standard-components/container")
-    .type("div")
     .normalStyle({
-      display: "flex",
-      "flex-direction": "row",
-      "justify-content": "space-between",
-      "align-items": "center",
       "margin-top": "32px",
       "margin-bottom": "32px",
     })
+    .customProps({
+      direction: "row",
+      hAlign: "stretch",
+      vAlign: "middle",
+      size: "shrink",
+    })
     .instanceName("Title Container")
     .addChild(heading)
 }
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 7e974b3feb..3da3579346 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -39,8 +39,8 @@
             "barIcon": "AlignLeft"
           },
           {
-            "label": "Middle",
-            "value": "middle",
+            "label": "Center",
+            "value": "center",
             "barIcon": "AlignCenter"
           },
           {
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index 9c7e582c71..b271be9e45 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -56,7 +56,7 @@
   .direction-column.vAlign-top {
     justify-content: flex-start;
   }
-  .direction-row.hAlign-middle,
+  .direction-row.hAlign-center,
   .direction-column.vAlign-middle {
     justify-content: center;
   }
@@ -74,7 +74,7 @@
     align-items: flex-start;
   }
   .direction-row.vAlign-middle,
-  .direction-column.hAlign-middle {
+  .direction-column.hAlign-center {
     align-items: center;
   }
   .direction-row.vAlign-bottom,