diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index fce34b256..48b6d2d7f 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -37,7 +37,7 @@
 
 .budibase__label--medium {
     font-weight: 500;
-    font-size: 12px;
+    font-size: 13px;
     opacity: 0.6;
     text-transform: uppercase;
 }
@@ -64,7 +64,7 @@
     display: flex;
     align-items: baseline;
     font-weight: 500;
-    font-size: 12px;
+    font-size: 13px;
 }
 
 .budibase__nav-item.selected {
diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte
index 59e673085..fdd0de8f4 100644
--- a/packages/builder/src/components/common/AppNotification.svelte
+++ b/packages/builder/src/components/common/AppNotification.svelte
@@ -63,7 +63,7 @@
   }
 
   :global(.refresh-page-button) {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 600;
     border-radius: 5px;
     border: none;
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index aec6bcc29..078edea28 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -30,7 +30,7 @@
 
   input {
     width: 83px;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #163057;
     opacity: 0.7;
diff --git a/packages/builder/src/components/database/DatabaseRoot.svelte b/packages/builder/src/components/database/DatabaseRoot.svelte
index d1cd74574..98100e884 100644
--- a/packages/builder/src/components/database/DatabaseRoot.svelte
+++ b/packages/builder/src/components/database/DatabaseRoot.svelte
@@ -94,7 +94,7 @@
 
   .breadcrumb {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 500;
     color: var(--secondary60);
   }
diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 458e5c67d..954277172 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -63,7 +63,7 @@
   .hierarchy-title {
     align-items: center;
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: bold;
     opacity: 0.6;
     letter-spacing: 1px;
diff --git a/packages/builder/src/components/nav/DatabasesList.svelte b/packages/builder/src/components/nav/DatabasesList.svelte
index a9b8800da..3a44a7f4d 100644
--- a/packages/builder/src/components/nav/DatabasesList.svelte
+++ b/packages/builder/src/components/nav/DatabasesList.svelte
@@ -57,7 +57,7 @@
 
 <style>
   .root {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--secondary100);
     position: relative;
     padding-left: 20px;
@@ -85,7 +85,7 @@
     padding: 0;
     border: none;
     font-family: Roboto;
-    font-size: 12px;
+    font-size: 13px;
     outline: none;
     cursor: pointer;
     background: rgba(0, 0, 0, 0);
diff --git a/packages/builder/src/components/nav/HierarchyRow.svelte b/packages/builder/src/components/nav/HierarchyRow.svelte
index 45811c5ca..06f864d61 100644
--- a/packages/builder/src/components/nav/HierarchyRow.svelte
+++ b/packages/builder/src/components/nav/HierarchyRow.svelte
@@ -52,7 +52,7 @@
 
 <style>
   .hierarchy-item {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     margin-bottom: 10px;
   }
diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
index 90ba653e9..40b1d2dee 100644
--- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
+++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
@@ -68,7 +68,7 @@
   .hierarchy-title {
     align-items: center;
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: bold;
     opacity: 0.6;
     letter-spacing: 1px;
diff --git a/packages/builder/src/components/nav/UsersList.svelte b/packages/builder/src/components/nav/UsersList.svelte
index 1caabf8a2..1ea129e7c 100644
--- a/packages/builder/src/components/nav/UsersList.svelte
+++ b/packages/builder/src/components/nav/UsersList.svelte
@@ -68,7 +68,7 @@
     padding: 0;
     border: none;
     font-family: Roboto;
-    font-size: 0.8rem;
+    font-size: 13px;
     outline: none;
     cursor: pointer;
     background: rgba(0, 0, 0, 0);
diff --git a/packages/builder/src/components/userInterface/CodeEditor.svelte b/packages/builder/src/components/userInterface/CodeEditor.svelte
index 7f6bc9c29..668a05bbe 100644
--- a/packages/builder/src/components/userInterface/CodeEditor.svelte
+++ b/packages/builder/src/components/userInterface/CodeEditor.svelte
@@ -86,14 +86,14 @@
 <style>
   h3 {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #8997ab;
     margin-bottom: 10px;
   }
 
   p {
-    font-size: 12px;
+    font-size: 13px;
     color: #333;
     margin-top: 0;
   }
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index b9af0888d..b953217f4 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -120,11 +120,11 @@
 
   .detail-prop label {
     word-wrap: break-word;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #163057;
     opacity: 0.6;
-    padding-top: 12px;
+    padding-top: 13px;
     margin-bottom: 0;
   }
 
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 0ba617c32..dab98f917 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -258,7 +258,7 @@
   .component > .name {
     color: #000333;
     display: inline-block;
-    font-size: 12px;
+    font-size: 13px;
     opacity: 0.8;
   }
 
@@ -282,7 +282,7 @@
   }
 
   .preset-menu > span {
-    font-size: 12px;
+    font-size: 13px;
     text-transform: uppercase;
     margin-top: 5px;
   }
@@ -308,7 +308,7 @@
     background: none;
     border: none;
     border-radius: 5px;
-    padding: 12px;
+    padding: 13px;
     outline: none;
     cursor: pointer;
   } */
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 945d956c0..2df4f8fee 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -98,12 +98,13 @@
 <style>
   .root {
     font-weight: 400;
-    color: #333;
+    color: #000333;
   }
 
   .title {
     margin-left: 10px;
     margin-top: 2px;
+    font-size: 13px;
   }
 
   .icon {
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index d62886ac5..f1d72da45 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -95,6 +95,7 @@
     height: 35px;
     align-items: center;
     font-weight: 400;
+    font-size: 13px;
   }
 
   .item button {
diff --git a/packages/builder/src/components/userInterface/EditComponentProps.svelte b/packages/builder/src/components/userInterface/EditComponentProps.svelte
index f193d7cd5..775957c64 100644
--- a/packages/builder/src/components/userInterface/EditComponentProps.svelte
+++ b/packages/builder/src/components/userInterface/EditComponentProps.svelte
@@ -85,6 +85,6 @@
     background: none;
     border: none;
     border-radius: 5px;
-    padding: 12px;
+    padding: 13px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index de5f0dd88..d579248dd 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -160,7 +160,7 @@
 
   a {
     color: rgba(22, 48, 87, 0.6);
-    font-size: 12px;
+    font-size: 13px;
     margin-top: 0;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
index d4c31ae2c..cb9ede73c 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@@ -88,7 +88,7 @@
 <style>
   h3 {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #8997ab;
     margin-bottom: 10px;
diff --git a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
index dacdf6068..bcfb75793 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
@@ -139,7 +139,7 @@
   }
 
   span {
-    font-size: 12px;
+    font-size: 13px;
     margin-bottom: 5px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index fdadc20a6..46801e272 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -68,7 +68,7 @@
   }
 
   span {
-    font-size: 12px;
+    font-size: 13px;
     margin-bottom: 5px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/LayoutEditor.svelte b/packages/builder/src/components/userInterface/LayoutEditor.svelte
index 4ded376d4..0f3efaec0 100644
--- a/packages/builder/src/components/userInterface/LayoutEditor.svelte
+++ b/packages/builder/src/components/userInterface/LayoutEditor.svelte
@@ -131,7 +131,7 @@
 <style>
   h3 {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #000333;
     opacity: 0.6;
@@ -149,11 +149,11 @@
   }
 
   h5 {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     color: #000333;
     opacity: 0.8;
-    padding-top: 12px;
+    padding-top: 13px;
     margin-bottom: 0;
   }
 
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 7e854939f..56d8cf8a2 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -50,7 +50,8 @@
   }
 </script>
 
-<div>
+<div class="pagelayoutSection">
+  <div class="components-nav-page">Page Layout</div>
   <div
     class="budibase__nav-item root"
     class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
@@ -88,12 +89,27 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
+.components-nav-page {
+  font-size: 13px;
+  color: #000333;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+  padding-left: 20px;
+  font-weight: 600;
+  opacity: 0.4;
+  letter-spacing: 1px;
+}
+
+
+.pagelayoutSection {
+  margin: 20px 0px 20px 0px;
+}
   .root {
-    
+
   }
   .title {
     margin-left: 10px;
-    margin-top: 2px;
+    font-size: 13px;
   }
 
   .icon {
@@ -101,7 +117,7 @@
     transition: 0.2s;
     width: 20px;
     margin-top: 2px;
-    color: #333;
+    color: #000333;
   }
 
   .icon:nth-of-type(2) {
diff --git a/packages/builder/src/components/userInterface/PropControl.svelte b/packages/builder/src/components/userInterface/PropControl.svelte
index 710624542..62a0ba610 100644
--- a/packages/builder/src/components/userInterface/PropControl.svelte
+++ b/packages/builder/src/components/userInterface/PropControl.svelte
@@ -39,11 +39,11 @@
 
   h5 {
     word-wrap: break-word;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     color: #000333;
     opacity: 0.8;
-    padding-top: 12px;
+    padding-top: 13px;
     margin-bottom: 0;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte b/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte
index bd3536692..06f8289a3 100644
--- a/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte
+++ b/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte
@@ -45,7 +45,7 @@
 
   .name {
     color: rgba(22, 48, 87, 0.6);
-    font-size: 12px;
+    font-size: 13px;
     font-weight: bold;
     text-transform: uppercase;
     margin-top: 5px;
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index 266772517..549573a12 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -157,7 +157,7 @@
   }
 
   .components-nav-page {
-    font-size: 12px;
+    font-size: 13px;
     color: #000333;
     text-transform: uppercase;
     padding-left: 20px;
@@ -168,7 +168,7 @@
   }
 
   .components-nav-header {
-    font-size: 12px;
+    font-size: 13px;
     color: #000333;
     text-transform: uppercase;
     margin-top: 20px;