diff --git a/packages/host/app/components/host-mode/stack.gts b/packages/host/app/components/host-mode/stack.gts
index 9f54580676..97878ae496 100644
--- a/packages/host/app/components/host-mode/stack.gts
+++ b/packages/host/app/components/host-mode/stack.gts
@@ -1,4 +1,7 @@
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
 
 import HostModeStackItem from './stack-item';
 
@@ -10,57 +13,80 @@ interface Signature {
   };
 }
 
-const HostModeStack: TemplateOnlyComponent<Signature> = <template>
-  <div class='host-mode-stack' ...attributes>
-    <div class='inner'>
-      {{#each @stackItemCardIds key='cardId' as |cardId index|}}
-        <HostModeStackItem
-          @cardId={{cardId}}
-          @index={{index}}
-          @stackItemCardIds={{@stackItemCardIds}}
-          @close={{@close}}
-        />
-      {{/each}}
-    </div>
-  </div>
-
-  <style scoped>
-    .host-mode-stack {
-      z-index: 1;
-      height: 100%;
-      width: 100%;
-      background-color: rgba(0, 0, 0, 0.35);
-      background-position: center;
-      background-size: cover;
-      padding: 0;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+export default class HostModeStack extends Component<Signature> {
+  @action
+  closeTopCard() {
+    if (this.args.close && this.args.stackItemCardIds.length > 0) {
+      const topCardId =
+        this.args.stackItemCardIds[this.args.stackItemCardIds.length - 1];
+      this.args.close(topCardId);
     }
+  }
 
-    .inner {
-      height: 100%;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      margin: 0 auto;
-      border-bottom-left-radius: var(--boxel-border-radius);
-      border-bottom-right-radius: var(--boxel-border-radius);
-    }
+  <template>
+    <div class='host-mode-stack' data-test-host-mode-stack ...attributes>
+      <div class='inner' tabindex='-1'>
+        <div
+          class='stack-items'
+          {{onClickOutside
+            this.closeTopCard
+            exceptSelector='[data-test-host-mode-breadcrumbs]'
+          }}
+          data-test-host-mode-stack-items
+        >
+          {{#each @stackItemCardIds key='cardId' as |cardId index|}}
+            <HostModeStackItem
+              @cardId={{cardId}}
+              @index={{index}}
+              @stackItemCardIds={{@stackItemCardIds}}
+              @close={{@close}}
+            />
+          {{/each}}
+        </div>
+      </div>
+    </div>
+
+    <style scoped>
+      .host-mode-stack {
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.35);
+        background-position: center;
+        background-size: cover;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
 
-    @media screen {
       .inner {
-        overflow: auto;
+        height: 100%;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        margin: 0 auto;
+        border-bottom-left-radius: var(--boxel-border-radius);
+        border-bottom-right-radius: var(--boxel-border-radius);
+        z-index: 1;
       }
-      /* .inner will handle overflow in host mode stack */
-      .host-mode-stack :deep(.host-mode-card, .card) {
-        overflow: hidden;
-        min-height: 80cqh;
+
+      @media screen {
+        .inner {
+          overflow: auto;
+        }
+        /* .inner will handle overflow in host mode stack */
+        .host-mode-stack :deep(.host-mode-card, .card) {
+          overflow: hidden;
+          min-height: 80cqh;
+        }
       }
-    }
-  </style>
-</template>;
 
-export default HostModeStack;
+      .stack-items {
+        display: contents;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/tests/acceptance/host-mode-test.gts b/packages/host/tests/acceptance/host-mode-test.gts
index a234324827..338b616ef0 100644
--- a/packages/host/tests/acceptance/host-mode-test.gts
+++ b/packages/host/tests/acceptance/host-mode-test.gts
@@ -427,6 +427,60 @@ module('Acceptance | host mode tests', function (hooks) {
     );
   });
 
+  test('clicking the stack backdrop closes the top card', async function (assert) {
+    let hostModeStackValue = encodeURIComponent(
+      JSON.stringify([`${testHostModeRealmURL}index`]),
+    );
+    await visit(`/test/Pet/mango.json?hostModeStack=${hostModeStackValue}`);
+
+    // Wait for stack item to appear
+    await waitFor(
+      `[data-test-host-mode-stack-item="${testHostModeRealmURL}index"]`,
+    );
+
+    // Verify stack item exists
+    assert
+      .dom(`[data-test-host-mode-stack-item="${testHostModeRealmURL}index"]`)
+      .exists();
+
+    // Click outside the stack items (on the stack backdrop area)
+    await click('[data-test-host-mode-stack]');
+
+    // Stack item should be removed
+    await waitUntil(() => {
+      return !document.querySelector(
+        `[data-test-host-mode-stack-item="${testHostModeRealmURL}index"]`,
+      );
+    });
+    assert
+      .dom(`[data-test-host-mode-stack-item="${testHostModeRealmURL}index"]`)
+      .doesNotExist();
+  });
+
+  test('clicking on a stack card does not close it', async function (assert) {
+    let hostModeStackValue = encodeURIComponent(
+      JSON.stringify([`${testHostModeRealmURL}index`]),
+    );
+    await visit(`/test/Pet/mango.json?hostModeStack=${hostModeStackValue}`);
+
+    let stackSelector = `[data-test-host-mode-stack-item="${testHostModeRealmURL}index"]`;
+    assert.dom(stackSelector).exists();
+
+    // Click on the card content itself
+    await click(stackSelector);
+
+    // Card should still exist
+    assert.dom(stackSelector).exists();
+  });
+
+  test('stack does not exist when there are no stacked cards', async function (assert) {
+    // Visit card with no stack
+    await visit('/test/Pet/mango.json');
+
+    // Stack shouldn't exist when there are no stacked cards
+    assert.dom('[data-test-host-mode-stack]').doesNotExist();
+  });
+
   module('with a custom subdomain', function (hooks) {
     hooks.beforeEach(function (this) {
       let owner = getOwner(this)!;