diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 94faa124a8..1a5270e33b 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -120,17 +120,17 @@ Cypress.Commands.add("createUser", (email, password, role) => {
   cy.get(".modal").within(() => {
     cy.get("input")
       .first()
-      .type(password)
+      .type(email)
     cy.get("input")
       .eq(1)
-      .type(email)
+      .type(password)
     cy.get("select")
       .first()
       .select(role)
 
     // Save
     cy.get(".buttons")
-      .contains("Create Row")
+      .contains("Create User")
       .click()
   })
 })
diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index 503d9b08a7..887ef733e4 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -70,7 +70,7 @@ export const allScreens = derived(store, $store => {
 
 export const mainLayout = derived(store, $store => {
   return $store.layouts?.find(
-    layout => layout.props?._id === LAYOUT_NAMES.MASTER.PRIVATE
+    layout => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
   )
 })
 
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 718e56b31b..3787c05a1b 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -75,18 +75,29 @@
       ]
     }
 
+    const canEditColumn = key => {
+      if (!allowEditing) {
+        return false
+      }
+      return !(isUsersTable && ["email", "roleId"].indexOf(key) !== -1)
+    }
+
     Object.entries(schema || {}).forEach(([key, value]) => {
       result.push({
         headerCheckboxSelection: false,
         headerComponent: TableHeader,
         headerComponentParams: {
           field: schema[key],
-          editable: allowEditing,
+          editable: canEditColumn(key),
         },
         headerName: value.displayFieldName || key,
         field: key,
         sortable: true,
-        cellRenderer: getRenderer(schema[key], true),
+        cellRenderer: getRenderer({
+          schema: schema[key],
+          editable: true,
+          isUsersTable,
+        }),
         cellRendererParams: {
           selectRelationship,
         },
diff --git a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
new file mode 100644
index 0000000000..f3b90aaf98
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
@@ -0,0 +1,43 @@
+<!-- Module scoped cache of saved role options -->
+<script context="module">
+  import builderApi from "builderStore/api"
+
+  let cachedRoles
+
+  async function getRoles(force = false) {
+    if (cachedRoles && !force) {
+      return await cachedRoles
+    }
+    cachedRoles = new Promise(resolve => {
+      console.log("HIT API")
+      builderApi
+        .get("/api/roles")
+        .then(response => response.json())
+        .then(resolve)
+    })
+    return await cachedRoles
+  }
+</script>
+
+<script>
+  export let roleId
+
+  let roleName
+  $: getRole()
+
+  async function getRole() {
+    // Try to find a matching role
+    let roles = await getRoles()
+    let role = roles.find(role => role._id === roleId)
+
+    // If we didn't find a matching role, try updating the cached results
+    if (!role) {
+      let roles = await getRoles(true)
+      let role = roles.find(role => role._id === roleId)
+    }
+    role = roles.find(role => role._id === roleId)
+    roleName = role?.name ?? "Unknown role"
+  }
+</script>
+
+<div>{roleName}</div>
diff --git a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
index f3a7b86740..15a7910186 100644
--- a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
+++ b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
@@ -3,15 +3,23 @@ import EditRow from "../modals/EditRow.svelte"
 import CreateEditUser from "../modals/CreateEditUser.svelte"
 import DeleteRow from "../modals/DeleteRow.svelte"
 import RelationshipDisplay from "./RelationshipCell.svelte"
+import RoleCell from "./RoleCell.svelte"
 
 const renderers = {
   attachment: attachmentRenderer,
   link: linkedRowRenderer,
 }
 
-export function getRenderer(schema, editable) {
+export function getRenderer({ schema, editable, isUsersTable }) {
+  const rendererParams = {
+    options: schema.options,
+    constraints: schema.constraints,
+    editable,
+  }
   if (renderers[schema.type]) {
-    return renderers[schema.type](schema.options, schema.constraints, editable)
+    return renderers[schema.type](rendererParams)
+  } else if (isUsersTable && schema.name === "roleId") {
+    return roleRenderer(rendererParams)
   } else {
     return false
   }
@@ -63,15 +71,14 @@ export function userRowRenderer(params) {
   return container
 }
 
-/* eslint-disable no-unused-vars */
-function attachmentRenderer(options, constraints, editable) {
+function attachmentRenderer() {
   return params => {
     const container = document.createElement("div")
     container.style.height = "100%"
     container.style.display = "flex"
     container.style.alignItems = "center"
 
-    const attachmentInstance = new AttachmentList({
+    new AttachmentList({
       target: container,
       props: {
         files: params.value || [],
@@ -82,7 +89,6 @@ function attachmentRenderer(options, constraints, editable) {
   }
 }
 
-/* eslint-disable no-unused-vars */
 function linkedRowRenderer() {
   return params => {
     let container = document.createElement("div")
@@ -102,3 +108,21 @@ function linkedRowRenderer() {
     return container
   }
 }
+
+function roleRenderer() {
+  return params => {
+    let container = document.createElement("div")
+    container.style.display = "grid"
+    container.style.height = "100%"
+    container.style.alignItems = "center"
+
+    new RoleCell({
+      target: container,
+      props: {
+        roleId: params.value,
+      },
+    })
+
+    return container
+  }
+}
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 39ac8a1fdc..30a0568e8e 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -2,7 +2,6 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { TableNames } from "constants"
-  import ListItem from "./ListItem.svelte"
   import CreateTableModal from "./modals/CreateTableModal.svelte"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
@@ -47,7 +46,9 @@
         text={table.name}
         selected={selectedView === `all_${table._id}`}
         on:click={() => selectTable(table)}>
-        <EditTablePopover {table} />
+        {#if table._id !== TableNames.USERS}
+          <EditTablePopover {table} />
+        {/if}
       </NavItem>
       {#each Object.keys(table.views || {}) as viewName}
         <NavItem
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
index 6a2019aa69..485af84e74 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
@@ -71,7 +71,7 @@
         on:drop={dragDropStore.actions.drop}
         text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
         withArrow
-        indentLevel={level + 3}
+        indentLevel={level + 1}
         selected={$store.selectedComponentId === component._id}>
         <ComponentDropdownMenu {component} />
       </NavItem>
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
index 6fefd92cd8..765041b184 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
@@ -50,6 +50,7 @@
     </NavItem>
     {#if selectedScreen?._id === screenId}
       <ComponentTree
+        level={1}
         components={selectedScreen.props._children}
         currentComponent={$selectedComponent}
         {dragDropStore} />
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
index d1ed4b687e..9528b2844c 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
@@ -1,11 +1,12 @@
 <script>
-  import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import PathTree from "./PathTree.svelte"
+
+  $: paths = Object.keys($store.routes || {}).sort()
 </script>
 
 <div class="root">
-  {#each Object.keys($store.routes || {}) as path}
+  {#each paths as path}
     <PathTree {path} route={$store.routes[path]} />
   {/each}
 </div>
diff --git a/packages/client/src/store/routes.js b/packages/client/src/store/routes.js
index c69bb83ef0..88ca90df73 100644
--- a/packages/client/src/store/routes.js
+++ b/packages/client/src/store/routes.js
@@ -21,6 +21,12 @@ const createRouteStore = () => {
         })
       })
     })
+
+    // Sort route by paths so that the router matches correctly
+    routes.sort((a, b) => {
+      return a.path > b.path ? -1 : 1
+    })
+
     store.update(state => {
       state.routes = routes
       return state