diff --git a/lerna.json b/lerna.json
index 03bbdbca7e..1211410724 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.7.7-alpha.4",
+  "version": "2.7.7-alpha.6",
   "npmClient": "yarn",
   "packages": [
     "packages/backend-core",
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 7f83b2b464..d0414b5733 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -74,6 +74,7 @@ const INITIAL_FRONTEND_STATE = {
   propertyFocus: null,
   builderSidePanel: false,
   hasLock: true,
+  showPreview: false,
 
   // URL params
   selectedScreenId: null,
diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index ae946dc10c..3a369446a3 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -69,7 +69,7 @@
       name: "App",
       description: "",
       icon: "Play",
-      action: () => window.open(`/${$store.appId}`),
+      action: () => store.update(state => ({ ...state, showPreview: true })),
     },
     {
       type: "Preview",
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 9813237317..a85eb5a154 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -62,7 +62,10 @@
   }
 
   const previewApp = () => {
-    window.open(`/${application}`)
+    store.update(state => ({
+      ...state,
+      showPreview: true,
+    }))
   }
 
   const viewApp = () => {
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
new file mode 100644
index 0000000000..d069d1b4c7
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
@@ -0,0 +1,91 @@
+<script>
+  import { onMount } from "svelte"
+  import { fade, fly } from "svelte/transition"
+  import { store, selectedScreen } from "builderStore"
+  import { ProgressCircle } from "@budibase/bbui"
+
+  $: route = $selectedScreen?.routing.route || "/"
+  $: src = `/${$store.appId}#${route}`
+
+  const close = () => {
+    store.update(state => ({
+      ...state,
+      showPreview: false,
+    }))
+  }
+
+  onMount(() => {
+    window.closePreview = () => {
+      store.update(state => ({
+        ...state,
+        showPreview: false,
+      }))
+    }
+  })
+</script>
+
+<div
+  class="preview-overlay"
+  transition:fade={{ duration: 260 }}
+  on:click|self={close}
+>
+  <div
+    class="container spectrum {$store.theme}"
+    transition:fly={{ duration: 260, y: 130 }}
+  >
+    <div class="header placeholder" />
+    <div class="loading placeholder">
+      <ProgressCircle />
+    </div>
+    <iframe title="Budibase App Preview" {src} />
+  </div>
+</div>
+
+<style>
+  .preview-overlay {
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 999;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: stretch;
+    padding: 48px;
+  }
+  .container {
+    flex: 1 1 auto;
+    background: var(--spectrum-global-color-gray-75);
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.5);
+  }
+  iframe {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border: none;
+    outline: none;
+    z-index: 1;
+  }
+  .header {
+    height: 60px;
+    width: 100%;
+    background: black;
+    top: 0;
+    position: absolute;
+  }
+  .loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+  }
+  .placeholder {
+    z-index: 0;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index f13aa3dab6..ee3f6e877e 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -24,6 +24,7 @@
   import BuilderSidePanel from "./_components/BuilderSidePanel.svelte"
   import UserAvatars from "./_components/UserAvatars.svelte"
   import { TOUR_KEYS, TOURS } from "components/portal/onboarding/tours.js"
+  import PreviewOverlay from "./_components/PreviewOverlay.svelte"
 
   export let application
 
@@ -140,7 +141,7 @@
   <BuilderSidePanel />
 {/if}
 
-<div class="root">
+<div class="root" class:blur={$store.showPreview}>
   <div class="top-nav">
     {#if $store.initialised}
       <div class="topleftnav">
@@ -230,6 +231,10 @@
   {/await}
 </div>
 
+{#if $store.showPreview}
+  <PreviewOverlay />
+{/if}
+
 <svelte:window on:keydown={handleKeyDown} />
 <Modal bind:this={commandPaletteModal}>
   <CommandPalette />
@@ -248,6 +253,10 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    transition: filter 260ms ease-out;
+  }
+  .root.blur {
+    filter: blur(8px);
   }
 
   .top-nav {
diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index 8d29d37bd6..b4a137f85d 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -1,7 +1,6 @@
 import { createAPIClient } from "@budibase/frontend-core"
-import { notificationStore } from "../stores/notification.js"
 import { authStore } from "../stores/auth.js"
-import { devToolsStore } from "../stores/devTools.js"
+import { notificationStore, devToolsEnabled, devToolsStore } from "../stores/"
 import { get } from "svelte/store"
 
 export const API = createAPIClient({
@@ -25,9 +24,10 @@ export const API = createAPIClient({
     }
 
     // Add role header
-    const devToolsState = get(devToolsStore)
-    if (devToolsState.enabled && devToolsState.role) {
-      headers["x-budibase-role"] = devToolsState.role
+    const $devToolsStore = get(devToolsStore)
+    const $devToolsEnabled = get(devToolsEnabled)
+    if ($devToolsEnabled && $devToolsStore.role) {
+      headers["x-budibase-role"] = $devToolsStore.role
     }
   },
 
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index ce8722bb9b..f9ecb495d1 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -17,6 +17,7 @@
     appStore,
     devToolsStore,
     environmentStore,
+    devToolsEnabled,
   } from "stores"
   import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
   import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
@@ -47,10 +48,7 @@
   let permissionError = false
 
   // Determine if we should show devtools or not
-  $: showDevTools =
-    !$builderStore.inBuilder &&
-    $devToolsStore.enabled &&
-    !$routeStore.queryParams?.peek
+  $: showDevTools = $devToolsEnabled && !$routeStore.queryParams?.peek
 
   // Handle no matching route
   $: {
@@ -107,6 +105,7 @@
     lang="en"
     dir="ltr"
     class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
+    class:builder={$builderStore.inBuilder}
   >
     <DeviceBindingsProvider>
       <UserBindingsProvider>
@@ -223,12 +222,14 @@
     overflow: hidden;
     height: 100%;
     width: 100%;
-    background: transparent;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
   }
+  #spectrum-root.builder {
+    background: transparent;
+  }
 
   #clip-root {
     max-width: 100%;
diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
index 4dfaae610f..5cbbf80767 100644
--- a/packages/client/src/components/devtools/DevToolsHeader.svelte
+++ b/packages/client/src/components/devtools/DevToolsHeader.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Heading, Button, Select } from "@budibase/bbui"
+  import { Heading, Select, ActionButton } from "@budibase/bbui"
   import { devToolsStore } from "../../stores"
   import { getContext } from "svelte"
 
@@ -30,7 +30,7 @@
 </script>
 
 <div class="dev-preview-header" class:mobile={$context.device.mobile}>
-  <Heading size="XS">Budibase App Preview</Heading>
+  <Heading size="XS">Preview</Heading>
   <Select
     quiet
     options={previewOptions}
@@ -40,36 +40,57 @@
     on:change={e => devToolsStore.actions.changeRole(e.detail)}
   />
   {#if !$context.device.mobile}
-    <Button
+    <ActionButton
       quiet
-      overBackground
       icon="Code"
       on:click={() => devToolsStore.actions.setVisible(!$devToolsStore.visible)}
     >
       {$devToolsStore.visible ? "Close" : "Open"} DevTools
-    </Button>
+    </ActionButton>
   {/if}
+  <ActionButton
+    quiet
+    icon="Close"
+    on:click={() => window.parent.closePreview?.()}
+  >
+    Close preview
+  </ActionButton>
 </div>
 
 <style>
   .dev-preview-header {
-    flex: 0 0 50px;
-    height: 50px;
+    flex: 0 0 60px;
     display: grid;
     align-items: center;
-    background-color: var(--spectrum-global-color-blue-400);
+    background-color: black;
     padding: 0 var(--spacing-xl);
-    grid-template-columns: 1fr auto auto;
+    grid-template-columns: 1fr auto auto auto;
     grid-gap: var(--spacing-xl);
   }
   .dev-preview-header.mobile {
-    flex: 0 0 50px;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr auto auto;
   }
   .dev-preview-header :global(.spectrum-Heading),
   .dev-preview-header :global(.spectrum-Picker-menuIcon),
-  .dev-preview-header :global(.spectrum-Picker-label) {
-    color: white !important;
+  .dev-preview-header :global(.spectrum-Icon),
+  .dev-preview-header :global(.spectrum-Picker-label),
+  .dev-preview-header :global(.spectrum-ActionButton) {
+    font-weight: 600;
+    color: white;
+  }
+  .dev-preview-header :global(.spectrum-Picker) {
+    padding-left: 8px;
+    padding-right: 8px;
+    transition: background 130ms ease-out;
+    border-radius: 4px;
+  }
+  .dev-preview-header :global(.spectrum-ActionButton:hover),
+  .dev-preview-header :global(.spectrum-Picker:hover),
+  .dev-preview-header :global(.spectrum-Picker.is-open) {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .dev-preview-header :global(.spectrum-ActionButton:active) {
+    background: rgba(255, 255, 255, 0.2);
   }
   @media print {
     .dev-preview-header {
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 951c55270b..ef4e6dcefb 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -2,7 +2,6 @@ import ClientApp from "./components/ClientApp.svelte"
 import {
   builderStore,
   appStore,
-  devToolsStore,
   blockStore,
   componentStore,
   environmentStore,
@@ -51,11 +50,6 @@ const loadBudibase = async () => {
     await environmentStore.actions.fetchEnvironment()
   }
 
-  // Enable dev tools or not. We need to be using a dev app and not inside
-  // the builder preview to enable them.
-  const enableDevTools = !get(builderStore).inBuilder && get(appStore).isDevApp
-  devToolsStore.actions.setEnabled(enableDevTools)
-
   // Register handler for runtime events from the builder
   window.handleBuilderRuntimeEvent = (type, data) => {
     if (!window["##BUDIBASE_IN_BUILDER##"]) {
diff --git a/packages/client/src/stores/derived/currentRole.js b/packages/client/src/stores/derived/currentRole.js
index a56b26050c..8bb4c5a25d 100644
--- a/packages/client/src/stores/derived/currentRole.js
+++ b/packages/client/src/stores/derived/currentRole.js
@@ -2,13 +2,14 @@ import { derived } from "svelte/store"
 import { Constants } from "@budibase/frontend-core"
 import { devToolsStore } from "../devTools.js"
 import { authStore } from "../auth.js"
+import { devToolsEnabled } from "./devToolsEnabled.js"
 
 // Derive the current role of the logged-in user
 export const currentRole = derived(
-  [devToolsStore, authStore],
-  ([$devToolsStore, $authStore]) => {
+  [devToolsEnabled, devToolsStore, authStore],
+  ([$devToolsEnabled, $devToolsStore, $authStore]) => {
     return (
-      ($devToolsStore.enabled && $devToolsStore.role) ||
+      ($devToolsEnabled && $devToolsStore.role) ||
       $authStore?.roleId ||
       Constants.Roles.PUBLIC
     )
diff --git a/packages/client/src/stores/derived/devToolsEnabled.js b/packages/client/src/stores/derived/devToolsEnabled.js
new file mode 100644
index 0000000000..525f70e49b
--- /dev/null
+++ b/packages/client/src/stores/derived/devToolsEnabled.js
@@ -0,0 +1,10 @@
+import { derived } from "svelte/store"
+import { appStore } from "../app.js"
+import { builderStore } from "../builder.js"
+
+export const devToolsEnabled = derived(
+  [appStore, builderStore],
+  ([$appStore, $builderStore]) => {
+    return !$builderStore.inBuilder && $appStore.isDevApp
+  }
+)
diff --git a/packages/client/src/stores/derived/index.js b/packages/client/src/stores/derived/index.js
index 4f6a6ab91d..d9a7743be6 100644
--- a/packages/client/src/stores/derived/index.js
+++ b/packages/client/src/stores/derived/index.js
@@ -3,3 +3,4 @@
 // separately we can keep our actual stores lean and performant.
 export { currentRole } from "./currentRole.js"
 export { dndComponentPath } from "./dndComponentPath.js"
+export { devToolsEnabled } from "./devToolsEnabled.js"
diff --git a/packages/client/src/stores/devTools.js b/packages/client/src/stores/devTools.js
index 4abfe33b7b..32f3c8e617 100644
--- a/packages/client/src/stores/devTools.js
+++ b/packages/client/src/stores/devTools.js
@@ -4,7 +4,6 @@ import { authStore } from "./auth"
 import { API } from "../api"
 
 const initialState = {
-  enabled: false,
   visible: false,
   allowSelection: false,
   role: null,
@@ -13,13 +12,6 @@ const initialState = {
 const createDevToolStore = () => {
   const store = createLocalStorageStore("bb-devtools", initialState)
 
-  const setEnabled = enabled => {
-    store.update(state => ({
-      ...state,
-      enabled,
-    }))
-  }
-
   const setVisible = visible => {
     store.update(state => ({
       ...state,
@@ -46,7 +38,7 @@ const createDevToolStore = () => {
 
   return {
     subscribe: store.subscribe,
-    actions: { setEnabled, setVisible, setAllowSelection, changeRole },
+    actions: { setVisible, setAllowSelection, changeRole },
   }
 }
 
diff --git a/packages/server/package.json b/packages/server/package.json
index 5563b3d9ba..598acb04a8 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -97,7 +97,7 @@
     "koa2-ratelimit": "1.1.1",
     "lodash": "4.17.21",
     "memorystream": "0.3.1",
-    "mongodb": "4.9",
+    "mongodb": "5.6",
     "mssql": "6.2.3",
     "mysql2": "2.3.3",
     "node-fetch": "2.6.7",
diff --git a/packages/server/src/integrations/mongodb.ts b/packages/server/src/integrations/mongodb.ts
index 417aa61f41..f076536344 100644
--- a/packages/server/src/integrations/mongodb.ts
+++ b/packages/server/src/integrations/mongodb.ts
@@ -351,7 +351,7 @@ const SCHEMA: Integration = getSchema()
 
 class MongoIntegration implements IntegrationBase {
   private config: MongoDBConfig
-  private client: any
+  private client: MongoClient
 
   constructor(config: MongoDBConfig) {
     this.config = config
@@ -372,6 +372,8 @@ class MongoIntegration implements IntegrationBase {
       response.connected = true
     } catch (e: any) {
       response.error = e.message as string
+    } finally {
+      await this.client.close()
     }
     return response
   }
@@ -380,7 +382,7 @@ class MongoIntegration implements IntegrationBase {
     return this.client.connect()
   }
 
-  createObjectIds(json: any): object {
+  createObjectIds(json: any) {
     const self = this
     function interpolateObjectIds(json: any) {
       for (let field of Object.keys(json)) {
diff --git a/qa-core/src/integrations/validators/mongo.integration.spec.ts b/qa-core/src/integrations/validators/mongo.integration.spec.ts
index a20b7cd7fa..9132d79f74 100644
--- a/qa-core/src/integrations/validators/mongo.integration.spec.ts
+++ b/qa-core/src/integrations/validators/mongo.integration.spec.ts
@@ -93,7 +93,7 @@ describe("datasource validators", () => {
       const result = await integration.testConnection()
       expect(result).toEqual({
         connected: false,
-        error: "Error: getaddrinfo ENOTFOUND http",
+        error: "getaddrinfo ENOTFOUND http",
       })
     })
   })
diff --git a/qa-core/src/integrations/validators/postgres.integration.spec.ts b/qa-core/src/integrations/validators/postgres.integration.spec.ts
index 029d929df0..5101cf1d2d 100644
--- a/qa-core/src/integrations/validators/postgres.integration.spec.ts
+++ b/qa-core/src/integrations/validators/postgres.integration.spec.ts
@@ -1,4 +1,5 @@
 import { GenericContainer } from "testcontainers"
+import postgres from "../../../../packages/server/src/integrations/postgres"
 
 jest.unmock("pg")
 
diff --git a/yarn.lock b/yarn.lock
index 4d290b5996..b15c549640 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7989,12 +7989,10 @@ bson@*:
   resolved "https://registry.yarnpkg.com/bson/-/bson-5.0.1.tgz#4cd3eeeabf6652ef0d6ab600f9a18212d39baac3"
   integrity sha512-y09gBGusgHtinMon/GVbv1J6FrXhnr/+6hqLlSmEFzkz6PodqF6TxjyvfvY3AfO+oG1mgUtbC86xSbOlwvM62Q==
 
-bson@^4.7.0:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/bson/-/bson-4.7.2.tgz#320f4ad0eaf5312dd9b45dc369cc48945e2a5f2e"
-  integrity sha512-Ry9wCtIZ5kGqkJoi6aD8KjxFZEx78guTQDnpXWiNthsxzrxAK/i8E6pCHAIZTbaEFWcOCvbecMukfK7XUvyLpQ==
-  dependencies:
-    buffer "^5.6.0"
+bson@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/bson/-/bson-5.3.0.tgz#37b006df4cd91ed125cb686467c1dd6d4606b514"
+  integrity sha512-ukmCZMneMlaC5ebPHXIkP8YJzNl5DC41N5MAIvKDqLggdao342t4McltoJBQfQya/nHBWAcSsYRqlXPoQkTJag==
 
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
@@ -18210,7 +18208,7 @@ moment@^2.29.4:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
-mongodb-connection-string-url@^2.5.3:
+mongodb-connection-string-url@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/mongodb-connection-string-url/-/mongodb-connection-string-url-2.6.0.tgz#57901bf352372abdde812c81be47b75c6b2ec5cf"
   integrity sha512-WvTZlI9ab0QYtTYnuMLgobULWhokRjtC7db9LtcVfJ+Hsnyr5eo6ZtNAt3Ly24XZScGMelOcGtm7lSn0332tPQ==
@@ -18218,15 +18216,14 @@ mongodb-connection-string-url@^2.5.3:
     "@types/whatwg-url" "^8.2.1"
     whatwg-url "^11.0.0"
 
-mongodb@4.9:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-4.9.1.tgz#0c769448228bcf9a6aa7d16daa3625b48312479e"
-  integrity sha512-ZhgI/qBf84fD7sI4waZBoLBNJYPQN5IOC++SBCiPiyhzpNKOxN/fi0tBHvH2dEC42HXtNEbFB0zmNz4+oVtorQ==
+mongodb@5.6:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-5.6.0.tgz#caff5278341bfc0f1ef6f394bb403d207de03d1e"
+  integrity sha512-z8qVs9NfobHJm6uzK56XBZF8XwM9H294iRnB7wNjF0SnY93si5HPziIJn+qqvUR5QOff/4L0gCD6SShdR/GtVQ==
   dependencies:
-    bson "^4.7.0"
-    denque "^2.1.0"
-    mongodb-connection-string-url "^2.5.3"
-    socks "^2.7.0"
+    bson "^5.3.0"
+    mongodb-connection-string-url "^2.6.0"
+    socks "^2.7.1"
   optionalDependencies:
     saslprep "^1.0.3"
 
@@ -23100,7 +23097,7 @@ socks-proxy-agent@^7.0.0:
     debug "^4.3.3"
     socks "^2.6.2"
 
-socks@^2.3.3, socks@^2.6.2, socks@^2.7.0:
+socks@^2.3.3, socks@^2.6.2, socks@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.1.tgz#d8e651247178fde79c0663043e07240196857d55"
   integrity sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==