diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index bb950983a6..9ba46832f4 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -25,6 +25,7 @@
     appStore,
     deploymentStore,
     sortedScreens,
+    appPublished,
   } from "stores/builder"
   import TourWrap from "components/portal/onboarding/TourWrap.svelte"
   import { TOUR_STEP_KEYS } from "components/portal/onboarding/tours.js"
@@ -45,11 +46,6 @@
 
   $: filteredApps = $appsStore.apps.filter(app => app.devId === application)
   $: selectedApp = filteredApps?.length ? filteredApps[0] : null
-  $: latestDeployments = $deploymentStore
-    .filter(deployment => deployment.status === "SUCCESS")
-    .sort((a, b) => a.updatedAt > b.updatedAt)
-  $: isPublished =
-    selectedApp?.status === "published" && latestDeployments?.length > 0
   $: updateAvailable =
     $appStore.upgradableVersion &&
     $appStore.version &&
@@ -117,7 +113,7 @@
   }
 
   const confirmUnpublishApp = async () => {
-    if (!application || !isPublished) {
+    if (!application || !$appPublished) {
       //confirm the app has loaded.
       return
     }
@@ -204,7 +200,7 @@
     >
       <div bind:this={appActionPopoverAnchor}>
         <div class="app-action">
-          <Icon name={isPublished ? "GlobeCheck" : "GlobeStrike"} />
+          <Icon name={$appPublished ? "GlobeCheck" : "GlobeStrike"} />
           <TourWrap stepKeys={[TOUR_STEP_KEYS.BUILDER_APP_PUBLISH]}>
             <span class="publish-open" id="builder-app-publish-button">
               Publish
@@ -219,7 +215,7 @@
       <Popover
         bind:this={appActionPopover}
         align="right"
-        disabled={!isPublished}
+        disabled={!$appPublished}
         anchor={appActionPopoverAnchor}
         offset={35}
         on:close={() => {
@@ -236,13 +232,13 @@
                 class="app-link"
                 on:click={() => {
                   appActionPopover.hide()
-                  if (isPublished) {
+                  if ($appPublished) {
                     viewApp()
                   }
                 }}
               >
                 {$appStore.url}
-                {#if isPublished}
+                {#if $appPublished}
                   <Icon size="S" name="LinkOut" />
                 {/if}
               </span>
@@ -250,7 +246,7 @@
 
             <Body size="S">
               <span class="publish-popover-status">
-                {#if isPublished}
+                {#if $appPublished}
                   <span class="status-text">
                     {lastDeployed}
                   </span>
@@ -279,7 +275,7 @@
               </span>
             </Body>
             <div class="action-buttons">
-              {#if isPublished}
+              {#if $appPublished}
                 <ActionButton
                   quiet
                   icon="Code"
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
index 035dc5a2ef..687678c08a 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte
@@ -14,7 +14,7 @@
     Button,
     FancySelect,
   } from "@budibase/bbui"
-  import { builderStore, appStore, roles } from "stores/builder"
+  import { builderStore, appStore, roles, appPublished } from "stores/builder"
   import {
     groups,
     licensing,
@@ -36,6 +36,7 @@
   import UpgradeModal from "components/common/users/UpgradeModal.svelte"
   import { emailValidator } from "helpers/validation"
   import { fly } from "svelte/transition"
+  import InfoDisplay from "../design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
 
   let query = null
   let loaded = false
@@ -608,6 +609,17 @@
     </div>
 
     <div class="body">
+      {#if !$appPublished}
+        <div class="alert">
+          <InfoDisplay
+            icon="AlertCircleFilled"
+            warning
+            title="App unpublished"
+            body="Users won't be able to access your app until you've published it"
+          />
+        </div>
+      {/if}
+
       {#if promptInvite && !userOnboardResponse}
         <Layout gap="S" paddingX="XL">
           <div class="invite-header">
@@ -623,7 +635,7 @@
       {/if}
 
       {#if !promptInvite}
-        <Layout gap="L" noPadding>
+        <Layout gap="M" noPadding>
           {#if filteredInvites?.length}
             <Layout noPadding gap="XS">
               <div class="auth-entity-header">
@@ -926,7 +938,7 @@
   .auth-entity,
   .auth-entity-header {
     display: grid;
-    grid-template-columns: 1fr 180px;
+    grid-template-columns: 1fr 220px;
     align-items: center;
     gap: var(--spacing-xl);
   }
@@ -957,7 +969,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     position: absolute;
-    width: 440px;
+    width: 480px;
     right: 0;
     height: 100%;
     box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.1);
@@ -1034,4 +1046,7 @@
     gap: var(--spacing-xl);
     padding: var(--spacing-xl) 0;
   }
+  .alert {
+    padding: 0 var(--spacing-xl);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
index 88ddf6f9a5..5543a4c7fd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte
@@ -7,9 +7,17 @@
   export let quiet = false
   export let warning = false
   export let error = false
+  export let info = false
 </script>
 
-<div class="info" class:noTitle={!title} class:warning class:error class:quiet>
+<div
+  class="container"
+  class:info
+  class:noTitle={!title}
+  class:warning
+  class:error
+  class:quiet
+>
   {#if title}
     <div class="title">
       <Icon name={icon} />
@@ -27,7 +35,7 @@
 </div>
 
 <style>
-  .info {
+  .container {
     padding: var(--spacing-m) var(--spacing-l);
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: var(--border-radius-s);
@@ -39,6 +47,9 @@
   .error {
     background: rgba(255, 0, 0, 0.2);
   }
+  .info {
+    background: var(--spectrum-global-color-blue-100);
+  }
   .noTitle {
     display: flex;
     align-items: center;
@@ -57,13 +68,7 @@
   }
   .title,
   .icon {
-    color: var(--spectrum-global-color-gray-600);
-  }
-  .info {
-    background-color: var(--background-alt);
-    padding: var(--spacing-m) var(--spacing-l) var(--spacing-m) var(--spacing-l);
-    border-radius: var(--border-radius-s);
-    font-size: 13px;
+    color: var(--spectrum-global-color-gray-700);
   }
   .quiet {
     background: none;
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index 158cd29973..08d87bebf5 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -30,6 +30,7 @@ import { queries } from "./queries"
 import { flags } from "./flags"
 import { rowActions } from "./rowActions"
 import componentTreeNodesStore from "./componentTreeNodes"
+import { appPublished } from "./published"
 
 export {
   componentTreeNodesStore,
@@ -65,6 +66,7 @@ export {
   hoverStore,
   snippets,
   rowActions,
+  appPublished,
 }
 
 export const reset = () => {
diff --git a/packages/builder/src/stores/builder/published.js b/packages/builder/src/stores/builder/published.js
new file mode 100644
index 0000000000..6ae9392f40
--- /dev/null
+++ b/packages/builder/src/stores/builder/published.js
@@ -0,0 +1,13 @@
+import { appStore } from "./app"
+import { appsStore } from "stores/portal/apps"
+import { deploymentStore } from "./deployments"
+import { derived } from "svelte/store"
+
+export const appPublished = derived(
+  [appStore, appsStore, deploymentStore],
+  ([$appStore, $appsStore, $deploymentStore]) => {
+    const app = $appsStore.apps.find(app => app.devId === $appStore.appId)
+    const deployments = $deploymentStore.filter(x => x.status === "SUCCESS")
+    return app?.status === "published" && deployments.length > 0
+  }
+)
