diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 9459eefff1..ad172e34ca 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -101,7 +101,7 @@
     justify-content: flex-start;
     align-items: center;
     border-bottom: var(--border-light);
-    padding: 0 24px;
+    padding: 0 var(--spacing-l);
     gap: 24px;
     position: relative;
   }
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
new file mode 100644
index 0000000000..f1ed686a3a
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/_layout.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { params, redirect } from "@roxi/routify"
+  import { apps } from "stores/portal"
+
+  $: app = $apps.find(app => app.appId === $params.appId)
+  $: {
+    if (!app) {
+      $redirect("../")
+    }
+  }
+</script>
+
+{#if app}
+  <slot />
+{/if}
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
new file mode 100644
index 0000000000..6b24ddef1a
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
@@ -0,0 +1,79 @@
+<script>
+  import { params, goto } from "@roxi/routify"
+  import { apps, auth, sideBarCollapsed } from "stores/portal"
+  import { ActionButton } from "@budibase/bbui"
+  import { sdk } from "@budibase/shared-core"
+
+  $: app = $apps.find(app => app.appId === $params.appId)
+  $: iframeUrl = getIframeURL(app)
+  $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
+
+  const getIframeURL = app => {
+    if (app.status === "published") {
+      return `/app${app.url}`
+    }
+    return `/${app.devId}`
+  }
+</script>
+
+<div class="container">
+  <div class="header">
+    {#if $sideBarCollapsed}
+      <ActionButton
+        quiet
+        icon="Rail"
+        on:click={() => sideBarCollapsed.set(false)}
+      >
+        Menu
+      </ActionButton>
+    {:else}
+      <ActionButton
+        quiet
+        icon="RailRightOpen"
+        on:click={() => sideBarCollapsed.set(true)}
+      >
+        Collapse
+      </ActionButton>
+    {/if}
+    {#if isBuilder}
+      <ActionButton
+        quiet
+        icon="Edit"
+        on:click={() => $goto(`../../app/${app.devId}`)}
+      >
+        Edit
+      </ActionButton>
+    {/if}
+    <ActionButton
+      quiet
+      icon="LinkOut"
+      on:click={() => window.open(iframeUrl, "_blank")}
+    >
+      Fullscreen
+    </ActionButton>
+  </div>
+  <iframe src={iframeUrl} title={app.name} />
+</div>
+
+<style>
+  .container {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 0 var(--spacing-l) var(--spacing-l) var(--spacing-l);
+  }
+  .header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    flex: 0 0 50px;
+  }
+  iframe {
+    flex: 1 1 auto;
+    border-radius: var(--spacing-s);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
new file mode 100644
index 0000000000..1e21bd7a9a
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
@@ -0,0 +1,140 @@
+<script>
+  import { Icon, Body } from "@budibase/bbui"
+  import { apps, sideBarCollapsed } from "stores/portal"
+  import { params, goto } from "@roxi/routify"
+  import { tick } from "svelte"
+  import NavItem from "components/common/NavItem.svelte"
+
+  let searchInput
+  let searchString
+  let searching = false
+
+  $: filteredApps = $apps.filter(app => {
+    return (
+      !searchString ||
+      app.name.toLowerCase().includes(searchString.toLowerCase())
+    )
+  })
+
+  const startSearching = async () => {
+    searching = true
+    searchString = ""
+    await tick()
+    searchInput.focus()
+  }
+
+  const stopSearching = () => {
+    searching = false
+    searchString = ""
+  }
+</script>
+
+<div class="side-bar" class:collapsed={$sideBarCollapsed}>
+  <div class="side-bar-controls">
+    {#if searching}
+      <input
+        bind:this={searchInput}
+        bind:value={searchString}
+        placeholder="Search for apps"
+      />
+    {:else}
+      <Body size="S">Apps</Body>
+      <Icon name="Search" size="S" hoverable on:click={startSearching} />
+    {/if}
+    <div class="rotational" class:rotated={searching}>
+      <Icon
+        name="Add"
+        hoverable
+        on:click={searching ? stopSearching : () => $goto("./create")}
+      />
+    </div>
+  </div>
+  <div class="side-bar-nav">
+    <NavItem
+      icon="WebPages"
+      text="All apps"
+      on:click={() => $goto("./")}
+      selected={!$params.appId}
+    />
+    {#each filteredApps as app}
+      <NavItem
+        text={app.name}
+        icon={app.icon?.name || "Apps"}
+        iconColor={app.icon?.color}
+        selected={$params.appId === app.appId}
+        on:click={() => $goto(`./${app.appId}`)}
+      />
+    {/each}
+  </div>
+</div>
+
+<style>
+  .side-bar {
+    flex: 0 0 260px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-right: var(--border-light);
+    background: var(--spectrum-global-color-gray-100);
+    overflow: hidden;
+    transition: margin-left 300ms ease-out;
+  }
+  .side-bar.collapsed {
+    margin-left: -262px;
+  }
+  @media (max-width: 640px) {
+    .side-bar {
+      margin-left: -262px;
+    }
+  }
+
+  .side-bar-controls {
+    flex: 0 0 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-l);
+    padding: 0 var(--spacing-l);
+  }
+  .side-bar-controls :global(.spectrum-Body),
+  .side-bar-controls input {
+    flex: 1 1 auto;
+  }
+  .side-bar-controls :global(.spectrum-Icon) {
+    color: var(--spectrum-global-color-gray-700);
+  }
+
+  input {
+    outline: none;
+    border: none;
+    max-width: none;
+    flex: 1 1 auto;
+    color: var(--spectrum-global-color-gray-800);
+    font-size: 14px;
+    padding: 0;
+    transition: border 130ms ease-out;
+    font-family: var(--font-sans);
+    background: inherit;
+  }
+  input::placeholder {
+    color: var(--spectrum-global-color-gray-700);
+    transition: color 130ms ease-out;
+  }
+  input:hover::placeholder {
+    color: var(--spectrum-global-color-gray-800);
+  }
+
+  .side-bar-nav {
+    flex: 1 1 auto;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+
+  div.rotational {
+    transition: transform 130ms ease-out;
+  }
+  div.rotational.rotated {
+    transform: rotate(45deg);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/apps/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/_layout.svelte
index bf0bca0df4..c4a0bfd913 100644
--- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/_layout.svelte
@@ -11,6 +11,7 @@
   import { onMount } from "svelte"
   import { redirect } from "@roxi/routify"
   import { sdk } from "@budibase/shared-core"
+  import PortalSideBar from "./_components/PortalSideBar.svelte"
 
   // Don't block loading if we've already hydrated state
   let loaded = $apps.length != null
@@ -44,5 +45,18 @@
 </script>
 
 {#if loaded}
-  <slot />
+  <div class="page">
+    <PortalSideBar />
+    <slot />
+  </div>
 {/if}
+
+<style>
+  .page {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>
diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js
index a7c430e621..e70df5c3ee 100644
--- a/packages/builder/src/stores/portal/index.js
+++ b/packages/builder/src/stores/portal/index.js
@@ -1,3 +1,5 @@
+import { writable } from "svelte/store"
+
 export { organisation } from "./organisation"
 export { users } from "./users"
 export { admin } from "./admin"
@@ -14,3 +16,5 @@ export { environment } from "./environment"
 export { menu } from "./menu"
 export { auditLogs } from "./auditLogs"
 export { features } from "./features"
+
+export const sideBarCollapsed = writable(false)