diff --git a/packages/frontend-2/components/singleton/ExternalLinkDialog.vue b/packages/frontend-2/components/singleton/ExternalLinkDialog.vue
index 0e8d4eefe..2ad13db3c 100644
--- a/packages/frontend-2/components/singleton/ExternalLinkDialog.vue
+++ b/packages/frontend-2/components/singleton/ExternalLinkDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutDialog v-model:open="state.open" max-width="xs" :buttons="buttons">
+  <LayoutDialog v-model:open="open" max-width="xs" :buttons="buttons">
     <template #header>Leaving Speckle</template>
     <p class="mb-2">You're about to open the link below in a new tab:</p>
     <div class="p-3 bg-highlight-2 rounded-md font-mono break-all">
@@ -21,6 +21,7 @@ const { state, close } = useExternalLinkDialogState()
 const buttons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
+    props: { color: 'subtle' },
     onClick: () => {
       close(false)
     }
@@ -34,4 +35,11 @@ const buttons = computed((): LayoutDialogButton[] => [
     }
   }
 ])
+
+const open = computed({
+  get: () => state.value.open,
+  set: (v) => {
+    if (!v) close(false)
+  }
+})
 </script>
diff --git a/packages/frontend-2/lib/common/composables/externalLinkDialog.ts b/packages/frontend-2/lib/common/composables/externalLinkDialog.ts
index d725ff921..2f05550bd 100644
--- a/packages/frontend-2/lib/common/composables/externalLinkDialog.ts
+++ b/packages/frontend-2/lib/common/composables/externalLinkDialog.ts
@@ -4,7 +4,6 @@ type ExternalLinkState = {
   _resolver?: (accepted: boolean) => void
 }
 
-// helper so useState is called lazily in a valid context
 const useSharedExternalLinkState = () =>
   useState<ExternalLinkState>('global_external_link', () => ({
     open: false,