diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 283a761c3b..910a795cd2 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -1,8 +1,7 @@
 /* Budibase Component Styles */
 .header {
     font-size: 0.75rem;
-    color: #000333;
-    opacity: 0.4;
+    color: var(--ink);
     text-transform: uppercase;
     margin-top: 1rem;
     font-weight: 500;
@@ -81,10 +80,9 @@
     max-width: 250px;
     height: 35px;
     border-radius: 3px;
-    border: 1px solid #DBDBDB;
+    border: 1px solid var(--grey-dark);
     text-align: left;
-    letter-spacing: 0.7px;
-    color: #000333;
+    color: var(--ink);
     font-size: 16px;
     padding-left: 5px;
 }
@@ -103,27 +101,32 @@
 }
 
 .budibase__table {
-    border: 1px solid #ccc;
+    border: 1px solid var(--grey-dark);
     background: #fff;
     border-radius: 2px;
 }
 
 .budibase__table thead {
-    background: #fafafa;
+    background: var(--blue-light);
 }
 
 .budibase__table thead > tr > th {
-    color: var(--button-text);
+    color: var(--ink);
     text-transform: capitalize;
     font-weight: 500;
 }
 
 .budibase__table tr {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--grey-light);
 }
 
 .button--toggled {
-    background: #fafafa;
-    color: var(--button-text);
-    padding: 10px;
+    background: var(--blue-light);
+    color: var(--ink-light);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
 }
\ No newline at end of file
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
index f8eb00f6e3..147737b5c6 100644
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ b/packages/builder/src/components/common/ActionButton.svelte
@@ -1,6 +1,7 @@
 <script>
   export let disabled = false
   export let hidden = false
+  export let secondary = false
   export let primary = true
   export let cancel = false
   export let alert = false
@@ -11,6 +12,7 @@
   on:click
   class="button"
   class:hidden
+  class:secondary
   class:primary
   class:alert
   class:cancel
@@ -22,12 +24,14 @@
 <style>
   .primary {
     color: #ffffff;
-    background: #0055ff;
+    background: var(--blue);
+    border: solid 1px var(--blue);
   }
 
   .alert {
-    color: rgba(255, 0, 31, 1);
-    background: rgba(255, 0, 31, 0.1);
+    color: white;
+    background: #e26d69;
+    border: solid 1px #e26d69;
   }
 
   .cancel {
@@ -35,18 +39,22 @@
     background: none;
   }
 
+  .secondary {
+    color: var(--ink);
+    border: solid 1px var(--grey-dark);
+    background: white;
+  }
+
   .button {
     font-size: 14px;
-    font-weight: 600;
-    border-radius: 5px;
-    border: none;
+    font-weight: 500;
+    border-radius: 3px;
     padding: 10px 20px;
-    height: 45px;
+    height: 40px;
   }
 
   .button:hover {
     cursor: pointer;
-    font-weight: 600;
     filter: saturate(90%);
   }
 
diff --git a/packages/builder/src/components/common/CodeArea.svelte b/packages/builder/src/components/common/CodeArea.svelte
index a58fc12240..e6a4fac030 100644
--- a/packages/builder/src/components/common/CodeArea.svelte
+++ b/packages/builder/src/components/common/CodeArea.svelte
@@ -14,8 +14,7 @@
     background: var(--secondary80);
     color: var(--white);
     font-family: "Courier New", Courier, monospace;
-    width: 95%;
-    height: 100px;
+    height: 200px;
     border-radius: 5px;
   }
 </style>
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 5249df5ef5..3be9f17b16 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -29,7 +29,7 @@
   <div class="inputs-group">
     {#each meta as m, i}
       <Input
-        width="32px"
+        width="37px"
         textAlign="center"
         placeholder={m.placeholder || ''}
         value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
diff --git a/packages/builder/src/components/common/Modal.svelte b/packages/builder/src/components/common/Modal.svelte
index 807dcee922..c91c30827e 100644
--- a/packages/builder/src/components/common/Modal.svelte
+++ b/packages/builder/src/components/common/Modal.svelte
@@ -50,10 +50,10 @@
 <style>
   .uk-modal-dialog {
     border-radius: 0.3rem;
-    width: 60%;
+    width: 520px;
     height: 80vh;
     display: flex;
     flex-direction: column;
-    padding: 0;
+    padding: 40px;
   }
 </style>
diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte
index 39dbe6d059..e89b8006a5 100644
--- a/packages/builder/src/components/common/Select.svelte
+++ b/packages/builder/src/components/common/Select.svelte
@@ -20,11 +20,9 @@
 <style>
   .select-container {
     font-size: 14px;
-    color: var(--secondary60);
-    font-weight: bold;
     position: relative;
-    max-width: 400px;
-    min-width: 275px;
+    border: var(--grey-dark) 1px solid;
+    max-width: 256px;
   }
 
   .adjusted {
@@ -43,7 +41,7 @@
     font-family: sans-serif;
     font-weight: 400;
     font-size: 14px;
-    color: #000333;
+    color: var(--ink);
     padding: 0 40px 0px 20px;
     width: 100%;
     max-width: 100%;
@@ -63,6 +61,6 @@
     width: 30px;
     height: 30px;
     pointer-events: none;
-    color: var(--secondary100);
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index 8a16d5d0b1..f1d49894a0 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -145,19 +145,19 @@
   }
 
   table {
-    border: 1px solid #ccc;
+    border: 1px solid var(--grey-dark);
     background: #fff;
     border-radius: 3px;
     border-collapse: collapse;
   }
 
   thead {
-    background: #f9f9f9;
-    border: 1px solid #ccc;
+    background: var(--blue-light);
+    border: 1px solid var(--grey-dark);
   }
 
   thead th {
-    color: var(--button-text);
+    color: var(--ink);
     text-transform: capitalize;
     font-weight: 500;
     font-size: 14px;
@@ -166,14 +166,14 @@
   }
 
   tbody tr {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--grey-dark);
     transition: 0.3s background-color;
-    color: var(--secondary100);
+    color: var(--ink);
     font-size: 14px;
   }
 
   tbody tr:hover {
-    background: #fafafa;
+    background: var(--grey-light);
   }
 
   .table-controls {
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index bd302df5b7..6264b74e09 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -35,7 +35,7 @@
   }
 </script>
 
-<header>
+<div class="heading">
   {#if !showFieldView}
     <i class="ri-list-settings-line button--toggled" />
     <h3 class="budibase__title--3">Create / Edit Model</h3>
@@ -43,22 +43,20 @@
     <i class="ri-file-list-line button--toggled" />
     <h3 class="budibase__title--3">Create / Edit Field</h3>
   {/if}
-</header>
+</div>
 {#if !showFieldView}
   <div class="padding">
-    <h4 class="budibase__label--big">Settings</h4>
-
     {#if $store.errors && $store.errors.length > 0}
       <ErrorsBox errors={$store.errors} />
     {/if}
-
-    <Textbox label="Name" bind:text={model.name} />
-
+    <div class="textbox">
+      <Textbox label="Name" bind:text={model.name} />
+    </div>
     <div class="table-controls">
-      <span class="budibase__label--big">Fields</span>
-      <h4 class="hoverable new-field" on:click={() => (showFieldView = true)}>
+      <span class="label">Fields</span>
+      <div class="hoverable new-field" on:click={() => (showFieldView = true)}>
         Add new field
-      </h4>
+      </div>
     </div>
 
     <table class="uk-table fields-table budibase__table">
@@ -67,7 +65,6 @@
           <th>Edit</th>
           <th>Name</th>
           <th>Type</th>
-          <th>Values</th>
           <th />
         </tr>
       </thead>
@@ -90,9 +87,9 @@
         {/each}
       </tbody>
     </table>
-    <div class="uk-margin">
+    <footer>
       <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
-    </div>
+    </footer>
   </div>
 {:else}
   <FieldView
@@ -104,41 +101,63 @@
 
 <style>
   .padding {
-    padding: 20px;
+    padding-top: 40px;
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .textbox {
+    margin: 0px 40px 0px 40px;
+    font-size: 14px;
+    font-weight: 500;
   }
 
   .new-field {
     font-size: 16px;
     font-weight: bold;
-    color: var(--button-text);
+    color: var(--blue);
   }
 
   .fields-table {
-    margin: 1rem 1rem 0rem 0rem;
+    margin: 8px 40px 0px 40px;
     border-collapse: collapse;
+    width: 88%;
   }
 
   tbody > tr:hover {
-    background-color: var(--primary10);
+    background-color: var(--grey-light);
   }
 
   .table-controls {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: 0px 40px;
   }
 
   .ri-more-line:hover {
     cursor: pointer;
   }
 
-  heading {
-    padding: 20px 20px 0 20px;
+  .heading {
+    padding: 40px 40px 0 40px;
     display: flex;
     align-items: center;
   }
 
   h3 {
     margin: 0 0 0 10px;
+    color: var(--ink);
+  }
+
+  footer {
+    background-color: var(--grey-light);
+    margin-top: 40px;
+    padding: 20px 40px 20px 40px;
+    display: flex;
+    justify-content: flex-end;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
index 2c3443ae56..c17a0ac9c8 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
@@ -79,19 +79,28 @@
   </form>
 </div>
 <footer>
+  <div class="button">
+    <ActionButton secondary on:click={goBack}>Cancel</ActionButton>
+  </div>
   <ActionButton primary on:click={save}>Save</ActionButton>
-  <ActionButton alert on:click={goBack}>Cancel</ActionButton>
 </footer>
 
 <style>
   .root {
-    margin: 20px;
+    margin: 40px;
   }
   footer {
-    padding: 20px;
+    padding: 20px 40px;
     border-radius: 0 0 5px 5px;
     bottom: 0;
     left: 0;
-    background: #fafafa;
+    background: var(--grey-light);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .button {
+    margin-right: 20px;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index 606310d44f..4db445e54f 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -39,51 +39,49 @@
   }
 </script>
 
-<heading>
+<div class="header">
   <i class="ri-eye-line button--toggled" />
   <h3 class="budibase__title--3">Create / Edit View</h3>
-</heading>
+</div>
 <form on:submit|preventDefault class="uk-form-stacked root">
-  <h4 class="budibase__label--big">Settings</h4>
   {#if $store.errors && $store.errors.length > 0}
     <ErrorsBox errors={$store.errors} />
   {/if}
-  <div class="uk-grid-small" uk-grid>
-    <div class="uk-width-1-2@s">
-      <Textbox bind:text={view.name} label="Name" />
+  <div class="main">
+    <div class="uk-grid-small" uk-grid>
+      <div class="uk-width-1-2@s">
+        <Textbox bind:text={view.name} label="Name" />
+      </div>
+    </div>
+    <div class="code-snippets">
+      {#each Object.values(SNIPPET_EDITORS) as snippetType}
+        <span
+          class="snippet-selector__heading hoverable"
+          class:highlighted={currentSnippetEditor === snippetType}
+          on:click={() => (currentSnippetEditor = snippetType)}>
+          {snippetType}
+        </span>
+      {/each}
+      {#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
+        <CodeArea bind:text={view.map} label="Map" />
+      {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
+        <CodeArea bind:text={view.filter} label="Filter" />
+      {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
+        <CodeArea bind:text={view.reduce} label="Reduce" />
+      {/if}
     </div>
   </div>
-
-  <h4 class="budibase__label--big">Snippets</h4>
-  {#each Object.values(SNIPPET_EDITORS) as snippetType}
-    <span
-      class="snippet-selector__heading hoverable"
-      class:highlighted={currentSnippetEditor === snippetType}
-      on:click={() => (currentSnippetEditor = snippetType)}>
-      {snippetType}
-    </span>
-  {/each}
-  {#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
-    <CodeArea bind:text={view.map} label="Map" />
-  {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
-    <CodeArea bind:text={view.filter} label="Filter" />
-  {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
-    <CodeArea bind:text={view.reduce} label="Reduce" />
-  {/if}
-
-  <ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
-  <ActionButton alert on:click={deleteView}>Delete</ActionButton>
+  <div class="buttons">
+    <div class="button">
+      <ActionButton secondary on:click={deleteView}>Delete</ActionButton>
+    </div>
+    <ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
+  </div>
 </form>
 
 <style>
   .root {
     height: 100%;
-    padding: 15px;
-  }
-
-  .snippet-selector__heading {
-    margin-right: 20px;
-    opacity: 0.7;
   }
 
   .highlighted {
@@ -92,11 +90,38 @@
 
   h3 {
     margin: 0 0 0 10px;
+    color: var(--ink);
   }
 
-  heading {
-    padding: 20px 20px 0 20px;
+  .snippet-selector__heading {
+    margin-right: 20px;
+    font-size: 14px;
+    color: var(--ink-lighter);
+  }
+
+  .header {
+    padding: 20px 40px 0 40px;
     display: flex;
     align-items: center;
   }
+
+  .main {
+    margin: 20px 40px 0px 40px;
+  }
+
+  .code-snippets {
+    margin: 20px 0px 20px 0px;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    background-color: var(--grey-light);
+    margin: 0 40px;
+    padding: 20px 0;
+  }
+
+  .button {
+    margin-right: 20px;
+  }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
index e81659f716..d5c924405f 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -22,7 +22,11 @@
 </script>
 
 <form on:submit|preventDefault class="uk-form-stacked">
-  <div>
+  <div class="main">
+    <div class="heading">
+      <i class="ri-list-settings-line button--toggled" />
+      <div class="title">Create User</div>
+    </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Username</label>
       <input class="uk-input" type="text" bind:value={username} />
@@ -41,18 +45,40 @@
     </div>
   </div>
   <footer>
-    <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
+    <div class="button">
+      <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
+    </div>
     <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
   </footer>
 </form>
 
 <style>
-  div {
-    padding: 30px;
+  .main {
+    padding: 40px 40px 20px 40px;
   }
+
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--ink);
+    margin-left: 12px;
+  }
+
+  .heading {
+    display: flex;
+    align-items: baseline;
+  }
+
   footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     padding: 20px;
-    background: #fafafa;
-    border-radius: 0.5rem;
+    background: var(--grey-light);
+    border-radius: 0 0 5px 5px;
+  }
+
+  .button {
+    margin-right: 20px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/ModelSelect.svelte b/packages/builder/src/components/userInterface/ModelSelect.svelte
index 4eab7a3745..ae5014e31f 100644
--- a/packages/builder/src/components/userInterface/ModelSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelSelect.svelte
@@ -7,6 +7,7 @@
 <div class="uk-margin block-field">
   <div class="uk-form-controls">
     <select class="budibase__input" on:change {value}>
+      <option value=""></option>
       {#each $backendUiStore.models as model}
         <option value={model._id}>{model.name}</option>
       {/each}
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index dbeec13940..59458edd49 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -240,7 +240,7 @@ export const typography = [
     label: "Weight",
     key: "font-weight",
     control: OptionSelect,
-    options: ["normal", "bold", "bolder", "lighter"],
+    options: ["200", "300", "400", "500", "600", "700", "800", "900"],
   },
   {
     label: "size",
@@ -297,7 +297,7 @@ export const typography = [
 
 export const background = [
   {
-    label: "Background",
+    label: "Color",
     key: "background",
     control: Input,
   },
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
index 89a23a78e5..dbb9e3d441 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -9,8 +9,10 @@
 		"_id": 0,
 		"type": "div",
 		"_styles": {
-			"layout": {},
-			"position": {}
+			"active": {},
+			"hover": {},
+			"normal": {},
+			"selected": {}
 		},
 		"_code": ""
 	},
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
index 14d0301c24..bfcd9d55f9 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
@@ -9,8 +9,10 @@
 		"_id": 1,
 		"type": "div",
 		"_styles": {
-			"layout": {},
-			"position": {}
+			"active": {},
+			"hover": {},
+			"normal": {},
+			"selected": {}
 		},
 		"_code": ""
 	},