diff --git a/packages/builder/src/components/common/AppLockModal.svelte b/packages/builder/src/components/common/AppLockModal.svelte
index 5ca35f05db..9794e350d9 100644
--- a/packages/builder/src/components/common/AppLockModal.svelte
+++ b/packages/builder/src/components/common/AppLockModal.svelte
@@ -6,6 +6,8 @@
     Modal,
     notifications,
     ProgressCircle,
+    Layout,
+    Body,
   } from "@budibase/bbui"
   import { auth, apps } from "stores/portal"
   import { processStringSync } from "@budibase/string-templates"
@@ -72,62 +74,67 @@
   {/if}
 </div>
 
-<Modal bind:this={appLockModal}>
-  <ModalContent
-    title={lockedByHeading}
-    dataCy={"app-lock-modal"}
-    showConfirmButton={false}
-    showCancelButton={false}
-  >
-    <p>
-      Apps are locked to prevent work from being lost from overlapping changes
-      between your team.
-    </p>
-
-    {#if lockedByYou && getExpiryDuration(app) > 0}
-      <span class="lock-expiry-body">
-        {processStringSync(
-          "This lock will expire in {{ duration time 'millisecond' }} from now.",
-          {
-            time: getExpiryDuration(app),
-          }
-        )}
-      </span>
-    {/if}
-    <div class="lock-modal-actions">
-      <ButtonGroup>
-        <Button
-          secondary
-          quiet={lockedBy && lockedByYou}
-          disabled={processing}
-          on:click={() => {
-            appLockModal.hide()
-          }}
-        >
-          <span class="cancel"
-            >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
-          >
-        </Button>
-        {#if lockedByYou}
-          <Button
-            secondary
-            disabled={processing}
-            on:click={() => {
-              releaseLock()
-              appLockModal.hide()
-            }}
-          >
-            {#if processing}
-              <ProgressCircle overBackground={true} size="S" />
-            {:else}
-              <span class="unlock">Release Lock</span>
-            {/if}
-          </Button>
-        {/if}
-      </ButtonGroup>
-    </div>
-  </ModalContent>
-</Modal>
+{#key app}
+  <div>
+    <Modal bind:this={appLockModal}>
+      <ModalContent
+        title={lockedByHeading}
+        dataCy={"app-lock-modal"}
+        showConfirmButton={false}
+        showCancelButton={false}
+      >
+        <Layout noPadding>
+          <Body size="S">
+            Apps are locked to prevent work from being lost from overlapping
+            changes between your team.
+          </Body>
+          {#if lockedByYou && getExpiryDuration(app) > 0}
+            <span class="lock-expiry-body">
+              {processStringSync(
+                "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
+                {
+                  time: getExpiryDuration(app),
+                }
+              )}
+            </span>
+          {/if}
+          <div class="lock-modal-actions">
+            <ButtonGroup>
+              <Button
+                secondary
+                quiet={lockedBy && lockedByYou}
+                disabled={processing}
+                on:click={() => {
+                  appLockModal.hide()
+                }}
+              >
+                <span class="cancel"
+                  >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
+                >
+              </Button>
+              {#if lockedByYou}
+                <Button
+                  secondary
+                  disabled={processing}
+                  on:click={() => {
+                    releaseLock()
+                    appLockModal.hide()
+                  }}
+                >
+                  {#if processing}
+                    <ProgressCircle overBackground={true} size="S" />
+                  {:else}
+                    <span class="unlock">Release Lock</span>
+                  {/if}
+                </Button>
+              {/if}
+            </ButtonGroup>
+          </div>
+        </Layout>
+      </ModalContent>
+    </Modal>
+  </div>
+{/key}
 
 <style>
   .lock-modal-actions {
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 49f99c9f77..91920073bb 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -30,7 +30,7 @@
   {/if}
 </div>
 <div class="desktop">
-  <AppLockModal {app} buttonSize="M" />
+  <span><AppLockModal {app} buttonSize="M" /></span>
 </div>
 <div class="desktop">
   <div class="app-status">
