diff --git a/packages/base/command.gts b/packages/base/command.gts
index 4d206d63cb2..8df32a10cf3 100644
--- a/packages/base/command.gts
+++ b/packages/base/command.gts
@@ -389,7 +389,7 @@ export class CreateListingPRRequestInput extends CardDef {
 }
 
 export class ListingCreateInput extends CardDef {
-  @field openCardId = contains(StringField);
+  @field openCardIds = containsMany(StringField);
   @field codeRef = contains(CodeRefField);
   @field targetRealm = contains(RealmField);
 }
diff --git a/packages/base/menu-items.ts b/packages/base/menu-items.ts
index d62e9819ece..efe10ce45d9 100644
--- a/packages/base/menu-items.ts
+++ b/packages/base/menu-items.ts
@@ -6,7 +6,7 @@ import {
 
 import CopyCardCommand from '@cardstack/boxel-host/commands/copy-card';
 import GenerateExampleCardsCommand from '@cardstack/boxel-host/commands/generate-example-cards';
-import ListingCreateCommand from '@cardstack/boxel-host/commands/listing-create';
+import OpenCreateListingModalCommand from '@cardstack/boxel-host/commands/open-create-listing-modal';
 import OpenInInteractModeCommand from '@cardstack/boxel-host/commands/open-in-interact-mode';
 import PopulateWithSampleDataCommand from '@cardstack/boxel-host/commands/populate-with-sample-data';
 import ShowCardCommand from '@cardstack/boxel-host/commands/show-card';
@@ -155,7 +155,7 @@ export function getDefaultCardMenuItems(
     });
     menuItems = [...menuItems, ...getSampleDataMenuItems(card, params)];
     menuItems.push({
-      label: `Create Listing with AI`,
+      label: `Create Listing`,
       action: async () => {
         const codeRef = resolveAdoptsFrom(card);
         if (!codeRef) {
@@ -165,9 +165,9 @@ export function getDefaultCardMenuItems(
         if (!targetRealm) {
           throw new Error('Unable to determine target realm from card');
         }
-        await new ListingCreateCommand(params.commandContext).execute({
-          openCardId: cardId,
+        await new OpenCreateListingModalCommand(params.commandContext).execute({
           codeRef,
+          openCardIds: [cardId],
           targetRealm,
         });
       },
diff --git a/packages/catalog-realm/catalog-app/listing/listing.gts b/packages/catalog-realm/catalog-app/listing/listing.gts
index 90d0b733264..58f0e0f43cb 100644
--- a/packages/catalog-realm/catalog-app/listing/listing.gts
+++ b/packages/catalog-realm/catalog-app/listing/listing.gts
@@ -564,6 +564,7 @@ class EmbeddedTemplate extends Component<typeof Listing> {
 export class Listing extends CardDef {
   static displayName = 'Listing';
   static headerColor = '#6638ff';
+  static isListingDef = true;
 
   @field name = contains(StringField);
   @field summary = contains(MarkdownField);
@@ -641,7 +642,7 @@ export class Listing extends CardDef {
   [getMenuItems](params: GetMenuItemParams): MenuItemOptions[] {
     let menuItems = super
       [getMenuItems](params)
-      .filter((item) => item.label?.toLowerCase() !== 'create listing with ai');
+      .filter((item) => item.label?.toLowerCase() !== 'create listing');
     if (params.menuContext === 'interact') {
       const extra = this.getGenerateExampleMenuItem(params);
       if (extra) {
diff --git a/packages/host/app/commands/index.ts b/packages/host/app/commands/index.ts
index 4fd424e63da..d125fdf950d 100644
--- a/packages/host/app/commands/index.ts
+++ b/packages/host/app/commands/index.ts
@@ -37,6 +37,7 @@ import * as ListingUpdateSpecsCommandModule from './listing-update-specs';
 import * as ListingUseCommandModule from './listing-use';
 import * as OneShotLlmRequestCommandModule from './one-shot-llm-request';
 import * as OpenAiAssistantRoomCommandModule from './open-ai-assistant-room';
+import * as OpenCreateListingModalCommandModule from './open-create-listing-modal';
 import * as OpenInInteractModeModule from './open-in-interact-mode';
 import * as OpenWorkspaceCommandModule from './open-workspace';
 import * as PatchCardInstanceCommandModule from './patch-card-instance';
@@ -256,6 +257,10 @@ export function shimHostCommands(virtualNetwork: VirtualNetwork) {
     '@cardstack/boxel-host/commands/open-ai-assistant-room',
     OpenAiAssistantRoomCommandModule,
   );
+  virtualNetwork.shimModule(
+    '@cardstack/boxel-host/commands/open-create-listing-modal',
+    OpenCreateListingModalCommandModule,
+  );
   virtualNetwork.shimModule(
     '@cardstack/boxel-host/commands/open-workspace',
     OpenWorkspaceCommandModule,
@@ -404,6 +409,7 @@ export const HostCommandClasses: (typeof HostBaseCommand<any, any>)[] = [
   ListingUseCommandModule.default,
   OneShotLlmRequestCommandModule.default,
   OpenAiAssistantRoomCommandModule.default,
+  OpenCreateListingModalCommandModule.default,
   OpenInInteractModeModule.default,
   OpenWorkspaceCommandModule.default,
   GenerateThemeExampleCommandModule.default,
diff --git a/packages/host/app/commands/listing-create.ts b/packages/host/app/commands/listing-create.ts
index ce94c134ece..4b3eb2d4daa 100644
--- a/packages/host/app/commands/listing-create.ts
+++ b/packages/host/app/commands/listing-create.ts
@@ -112,8 +112,7 @@ export default class ListingCreateCommand extends HostBaseCommand<
   protected async run(
     input: BaseCommandModule.ListingCreateInput,
   ): Promise<BaseCommandModule.ListingCreateResult> {
-    const cardAPI = await this.loadCardAPI();
-    let { openCardId, codeRef, targetRealm } = input;
+    let { openCardIds, codeRef, targetRealm } = input;
 
     if (!codeRef) {
       throw new Error('codeRef is required');
@@ -127,14 +126,17 @@ export default class ListingCreateCommand extends HostBaseCommand<
 
     let listingType = await this.guessListingType(codeRef);
 
+    let relationships: Record<string, { links: { self: string } }> = {};
+    if (openCardIds && openCardIds.length > 0) {
+      openCardIds.forEach((id, index) => {
+        relationships[`examples.${index}`] = { links: { self: id } };
+      });
+    }
+
     const listingDoc: LooseSingleCardDocument = {
       data: {
         type: 'card',
-        relationships: openCardId
-          ? {
-              'examples.0': { links: { self: openCardId } },
-            }
-          : {},
+        relationships,
         meta: {
           adoptsFrom: {
             module: `${this.catalogRealm}catalog-app/listing/listing`,
@@ -144,34 +146,31 @@ export default class ListingCreateCommand extends HostBaseCommand<
       },
     };
     const listing = await this.store.add(listingDoc, { realm: targetRealm });
-    // Always use the transient symbol-based localId; ignore any persisted id at this stage
-    const listingId = (listing as any)[(cardAPI as any).localId];
-    if (!listingId) {
-      throw new Error('Failed to create listing card (no localId)');
-    }
-    await this.operatorModeStateService.openCardInInteractMode(listingId);
 
     const commandModule = await this.loadCommandModule();
-    const listingCard = listing as CardAPI.CardDef; // ensure correct type
-    const specsPromise = this.linkSpecs(
-      listingCard,
-      targetRealm,
-      openCardId ?? codeRef?.module,
-    );
+    const listingCard = listing as CardAPI.CardDef;
+    const firstOpenCardId = openCardIds?.[0];
 
-    const promises = [
+    const backgroundWork = Promise.all([
       this.autoPatchName(listingCard, codeRef),
       this.autoPatchSummary(listingCard, codeRef),
       this.autoLinkTag(listingCard),
       this.autoLinkCategory(listingCard),
       this.autoLinkLicense(listingCard),
-      this.autoLinkExample(listingCard, codeRef, openCardId),
-      specsPromise,
-    ];
+      this.autoLinkExample(listingCard, codeRef, openCardIds),
+      this.linkSpecs(
+        listingCard,
+        targetRealm,
+        firstOpenCardId ?? codeRef?.module,
+      ),
+    ]).catch((error) => {
+      console.warn('Background autopatch failed:', error);
+    });
 
-    await Promise.all(promises);
     const { ListingCreateResult } = commandModule;
-    return new ListingCreateResult({ listing });
+    const result = new ListingCreateResult({ listing });
+    (result as any).backgroundWork = backgroundWork;
+    return result;
   }
 
   private async guessListingType(
@@ -254,7 +253,9 @@ export default class ListingCreateCommand extends HostBaseCommand<
     targetRealm: string,
     resourceUrl: string, // can be module or card instance id
   ): Promise<Spec[]> {
-    const url = `${targetRealm}_dependencies?url=${encodeURIComponent(resourceUrl)}`;
+    const resourceRealm =
+      this.realm.realmOfURL(new URL(resourceUrl))?.href ?? targetRealm;
+    const url = `${resourceRealm}_dependencies?url=${encodeURIComponent(resourceUrl)}`;
     const response = await this.network.authedFetch(url, {
       headers: { Accept: SupportedMimeType.JSONAPI },
     });
@@ -376,7 +377,7 @@ export default class ListingCreateCommand extends HostBaseCommand<
   private async autoLinkExample(
     listing: CardAPI.CardDef,
     codeRef: ResolvedCodeRef,
-    openCardId?: string,
+    openCardIds?: string[],
   ) {
     const existingExamples = Array.isArray((listing as any).examples)
       ? ((listing as any).examples as CardAPI.CardDef[])
@@ -396,25 +397,29 @@ export default class ListingCreateCommand extends HostBaseCommand<
       addCard(existing);
     }
 
-    let exampleCard: CardAPI.CardDef | undefined;
-    if (openCardId) {
-      try {
-        const instance = await this.store.get<CardAPI.CardDef>(openCardId);
-        if (isCardInstance(instance)) {
-          exampleCard = instance as CardAPI.CardDef;
-        } else {
-          console.warn('autoLinkExample: openCardId is not a card instance', {
-            openCardId,
-          });
-        }
-      } catch (error) {
-        console.warn('autoLinkExample: failed to load openCardId', {
-          openCardId,
-          error,
-        });
-      }
+    if (openCardIds && openCardIds.length > 0) {
+      await Promise.all(
+        openCardIds.map(async (openCardId) => {
+          try {
+            const instance = await this.store.get<CardAPI.CardDef>(openCardId);
+            if (isCardInstance(instance)) {
+              addCard(instance as CardAPI.CardDef);
+            } else {
+              console.warn(
+                'autoLinkExample: openCardId is not a card instance',
+                { openCardId },
+              );
+            }
+          } catch (error) {
+            console.warn('autoLinkExample: failed to load openCardId', {
+              openCardId,
+              error,
+            });
+          }
+        }),
+      );
     } else {
-      // If no openCardId was provided, attempt to find any existing instance of this type.
+      // If no openCardIds were provided, attempt to find any existing instance of this type.
       try {
         const search = new SearchCardsByTypeAndTitleCommand(
           this.commandContext,
@@ -426,7 +431,7 @@ export default class ListingCreateCommand extends HostBaseCommand<
             (c: any) => c && typeof c.id === 'string' && isCardInstance(c),
           );
           if (first) {
-            exampleCard = first as CardAPI.CardDef;
+            addCard(first as CardAPI.CardDef);
           }
         }
       } catch (error) {
@@ -437,10 +442,8 @@ export default class ListingCreateCommand extends HostBaseCommand<
       }
     }
 
-    addCard(exampleCard);
-
     const MAX_EXAMPLES = 4;
-    if (codeRef && exampleCard && uniqueById.size < MAX_EXAMPLES) {
+    if (codeRef && uniqueById.size > 0 && uniqueById.size < MAX_EXAMPLES) {
       try {
         const searchAndChoose = new SearchAndChooseCommand(this.commandContext);
         const existingIds = Array.from(uniqueById.keys());
@@ -462,7 +465,7 @@ export default class ListingCreateCommand extends HostBaseCommand<
         }
       } catch (error) {
         console.warn('Failed to auto-link additional examples', {
-          sourceCardId: exampleCard.id,
+          codeRef,
           error,
         });
       }
diff --git a/packages/host/app/commands/open-create-listing-modal.ts b/packages/host/app/commands/open-create-listing-modal.ts
new file mode 100644
index 00000000000..ef1f4b0d1ca
--- /dev/null
+++ b/packages/host/app/commands/open-create-listing-modal.ts
@@ -0,0 +1,33 @@
+import { service } from '@ember/service';
+
+import type * as BaseCommandModule from 'https://cardstack.com/base/command';
+
+import HostBaseCommand from '../lib/host-base-command';
+
+import type OperatorModeStateService from '../services/operator-mode-state-service';
+
+export default class OpenCreateListingModalCommand extends HostBaseCommand<
+  typeof BaseCommandModule.ListingCreateInput
+> {
+  @service declare private operatorModeStateService: OperatorModeStateService;
+
+  description = 'Open create listing confirmation modal';
+
+  async getInputType() {
+    let commandModule = await this.loadCommandModule();
+    const { ListingCreateInput } = commandModule;
+    return ListingCreateInput;
+  }
+
+  requireInputFields = ['codeRef', 'targetRealm'];
+
+  protected async run(
+    input: BaseCommandModule.ListingCreateInput,
+  ): Promise<undefined> {
+    this.operatorModeStateService.showCreateListingModal({
+      codeRef: input.codeRef,
+      targetRealm: input.targetRealm,
+      openCardIds: input.openCardIds,
+    });
+  }
+}
diff --git a/packages/host/app/components/operator-mode/container.gts b/packages/host/app/components/operator-mode/container.gts
index 45653d4104c..b514090ff56 100644
--- a/packages/host/app/components/operator-mode/container.gts
+++ b/packages/host/app/components/operator-mode/container.gts
@@ -41,6 +41,7 @@ import PrerenderedCardSearch from '../prerendered-card-search';
 import { Submodes } from '../submode-switcher';
 
 import ChooseFileModal from './choose-file-modal';
+import CreateListingModal from './create-listing-modal';
 
 import type CardService from '../../services/card-service';
 import type CommandService from '../../services/command-service';
@@ -143,6 +144,7 @@ export default class OperatorModeContainer extends Component<Signature> {
   <template>
     <div class='operator-mode'>
       <ChooseFileModal />
+      <CreateListingModal />
       <CardCatalogModal />
       <FromElseWhere @name='modal-elsewhere' />
 
diff --git a/packages/host/app/components/operator-mode/create-listing-modal.gts b/packages/host/app/components/operator-mode/create-listing-modal.gts
new file mode 100644
index 00000000000..5cd803c1fbd
--- /dev/null
+++ b/packages/host/app/components/operator-mode/create-listing-modal.gts
@@ -0,0 +1,440 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { getOwner } from '@ember/owner';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { task } from 'ember-concurrency';
+import perform from 'ember-concurrency/helpers/perform';
+import onKeyMod from 'ember-keyboard/modifiers/on-key';
+
+import {
+  BoxelInput,
+  Button,
+  FieldContainer,
+  GridContainer,
+  RealmIcon,
+} from '@cardstack/boxel-ui/components';
+
+import {
+  isResolvedCodeRef,
+  type ResolvedCodeRef,
+} from '@cardstack/runtime-common';
+
+import ListingCreateCommand from '@cardstack/host/commands/listing-create';
+import ItemButton from '@cardstack/host/components/card-search/item-button';
+import type { NewCardArgs } from '@cardstack/host/components/card-search/utils';
+import ModalContainer from '@cardstack/host/components/modal-container';
+import { SelectedTypePill } from '@cardstack/host/components/operator-mode/create-file-modal';
+import { Submodes } from '@cardstack/host/components/submode-switcher';
+import { getSearch } from '@cardstack/host/resources/search';
+
+import type CommandService from '@cardstack/host/services/command-service';
+import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
+import type RealmService from '@cardstack/host/services/realm';
+
+import type { CardDef } from 'https://cardstack.com/base/card-api';
+
+interface Signature {
+  Args: {};
+}
+
+export default class CreateListingModal extends Component<Signature> {
+  @service declare private commandService: CommandService;
+  @service declare private operatorModeStateService: OperatorModeStateService;
+  @service declare private realm: RealmService;
+
+  @tracked private selectedExampleIds: Set<string> | null = null;
+
+  private instancesSearch = getSearch<CardDef>(this, getOwner(this)!, () =>
+    this.codeRef ? { filter: { type: this.codeRef } } : undefined,
+  );
+
+  private createListing = task(async () => {
+    let payload = this.payload;
+    if (!payload) {
+      throw new Error('Cannot create listing without a modal payload');
+    }
+
+    let codeRef = this.codeRef;
+    if (!codeRef) {
+      throw new Error('Cannot create listing without a resolved code ref');
+    }
+
+    let targetRealm = payload.targetRealm;
+    let openCardIds =
+      this.selectedExampleIds === null
+        ? this.instances.map((i) => i.id)
+        : [...this.selectedExampleIds];
+
+    let result = await new ListingCreateCommand(
+      this.commandService.commandContext,
+    ).execute({
+      codeRef,
+      targetRealm,
+      openCardIds,
+    });
+
+    // Navigate to the listing in code mode with isolated preview
+    let cardUrl = result?.listing?.id;
+    if (cardUrl) {
+      if (this.operatorModeStateService.workspaceChooserOpened) {
+        this.operatorModeStateService.closeWorkspaceChooser();
+      }
+      await this.operatorModeStateService.updateSubmode(Submodes.Code);
+      await this.operatorModeStateService.updateCodePath(
+        new URL(cardUrl + '.json'),
+        'preview',
+      );
+      this.operatorModeStateService.updateCardPreviewFormat('isolated');
+    }
+
+    // Keep modal open while background auto-patching runs
+    let backgroundWork = (result as any)?.backgroundWork;
+    if (backgroundWork) {
+      await backgroundWork;
+    }
+
+    this.selectedExampleIds = null;
+    this.operatorModeStateService.dismissCreateListingModal();
+  });
+
+  private get payload() {
+    return this.operatorModeStateService.createListingModalPayload;
+  }
+
+  private get isModalOpen() {
+    return Boolean(this.payload);
+  }
+
+  private get realmInfo() {
+    let payload = this.payload;
+    if (!payload) {
+      return undefined;
+    }
+    return this.realm.info(payload.targetRealm);
+  }
+
+  private get codeRef(): ResolvedCodeRef | undefined {
+    let codeRef = this.payload?.codeRef;
+    return codeRef && isResolvedCodeRef(codeRef) ? codeRef : undefined;
+  }
+
+  private get codeRefTitle(): string {
+    return this.codeRef?.name ?? 'Unknown';
+  }
+
+  private get codeRefId(): string {
+    return this.payload?.openCardIds?.[0] ?? this.codeRef?.module ?? '';
+  }
+
+  private get instances(): CardDef[] {
+    return this.instancesSearch.instances as CardDef[];
+  }
+
+  private get hasInstances(): boolean {
+    return this.instances.length > 0;
+  }
+
+  // null = user hasn't manually toggled anything → all selected by default
+  private get hasManualSelection(): boolean {
+    return this.selectedExampleIds !== null;
+  }
+
+  private get allSelected(): boolean {
+    if (!this.hasInstances) {
+      return false;
+    }
+    if (!this.hasManualSelection) {
+      return true;
+    }
+    return this.instances.every((instance) =>
+      this.selectedExampleIds!.has(instance.id),
+    );
+  }
+
+  @action private onSelectExample(selection: string | NewCardArgs) {
+    if (typeof selection !== 'string') {
+      return;
+    }
+    // First manual toggle: start from "all selected" state
+    let current =
+      this.selectedExampleIds ?? new Set(this.instances.map((i) => i.id));
+    let next = new Set(current);
+    if (next.has(selection)) {
+      next.delete(selection);
+    } else {
+      next.add(selection);
+    }
+    this.selectedExampleIds = next;
+  }
+
+  private isSelected = (id: string): boolean => {
+    // null means no manual selection → all selected
+    if (this.selectedExampleIds === null) {
+      return true;
+    }
+    return this.selectedExampleIds.has(id);
+  };
+
+  @action private selectAll() {
+    this.selectedExampleIds = new Set(
+      this.instances.map((instance) => instance.id),
+    );
+  }
+
+  @action private clearAll() {
+    this.selectedExampleIds = new Set();
+  }
+
+  @action private onClose() {
+    this.selectedExampleIds = null;
+    this.operatorModeStateService.dismissCreateListingModal();
+  }
+
+  <template>
+    {{#if this.isModalOpen}}
+      <ModalContainer
+        class='create-listing-modal'
+        @cardContainerClass='create-listing'
+        @title='Create Listing'
+        @size='small'
+        @isOpen={{this.isModalOpen}}
+        @onClose={{this.onClose}}
+        data-test-create-listing-modal
+      >
+        <:content>
+          <p class='description'>
+            You need a listing to share your code with others and publish to
+            catalogs.
+          </p>
+          <FieldContainer @label='Create In' @tag='label' class='field'>
+            <div
+              class='field-contents realm-value'
+              data-test-create-listing-target-realm
+            >
+              {{#if this.realmInfo}}
+                <RealmIcon class='realm-icon' @realmInfo={{this.realmInfo}} />
+                <span>{{this.realmInfo.name}}</span>
+              {{/if}}
+            </div>
+          </FieldContainer>
+
+          <FieldContainer @label='CodeRef' @tag='label' class='field'>
+            <div class='field-contents' data-test-create-listing-coderef>
+              <SelectedTypePill
+                @title={{this.codeRefTitle}}
+                @id={{this.codeRefId}}
+              />
+            </div>
+          </FieldContainer>
+
+          {{#if this.hasInstances}}
+            <FieldContainer @label='Example' @tag='div' class='examples-field'>
+              <div class='examples-container' data-test-examples-container>
+                <div class='examples-header'>
+                  <label class='select-all-label'>
+                    <BoxelInput
+                      @type='checkbox'
+                      @value={{this.allSelected}}
+                      @onChange={{if
+                        this.allSelected
+                        this.clearAll
+                        this.selectAll
+                      }}
+                      data-test-select-all
+                    />
+                    Select All
+                  </label>
+                  <Button
+                    class='clear-all-button'
+                    @kind='text-only'
+                    @size='small'
+                    {{on 'click' this.clearAll}}
+                    data-test-clear-all
+                  >
+                    Clear All
+                  </Button>
+                </div>
+                <p class='examples-description'>
+                  Select the examples to be linked to the listing. These help
+                  others understand how to use your code.
+                </p>
+                <GridContainer
+                  class='examples-grid'
+                  data-test-create-listing-examples
+                >
+                  {{#each this.instances as |instance|}}
+                    <ItemButton
+                      class='example-card'
+                      @item={{instance}}
+                      @itemId={{instance.id}}
+                      @isSelected={{this.isSelected instance.id}}
+                      @multiSelect={{true}}
+                      @onSelect={{this.onSelectExample}}
+                      data-test-create-listing-example={{instance.id}}
+                    />
+                  {{/each}}
+                </GridContainer>
+              </div>
+            </FieldContainer>
+          {{/if}}
+
+        </:content>
+        <:footer>
+          <div class='footer-buttons'>
+            {{#if this.createListing.isRunning}}
+              <p
+                class='footer-loading-message'
+                data-test-create-listing-loading
+              >
+                Setting up your
+                <strong>{{this.codeRefTitle}}</strong>
+                listing. This may take a moment...
+              </p>
+            {{else}}
+              <Button
+                @size='tall'
+                {{on 'click' this.onClose}}
+                {{onKeyMod 'Escape'}}
+                data-test-create-listing-cancel-button
+              >
+                Cancel
+              </Button>
+            {{/if}}
+            <Button
+              @kind='primary'
+              @size='tall'
+              @loading={{this.createListing.isRunning}}
+              @disabled={{this.createListing.isRunning}}
+              {{on 'click' (perform this.createListing)}}
+              {{onKeyMod 'Enter'}}
+              data-test-create-listing-confirm-button
+            >
+              Create
+            </Button>
+          </div>
+        </:footer>
+      </ModalContainer>
+    {{/if}}
+
+    <style scoped>
+      .create-listing-modal {
+        --horizontal-gap: var(--boxel-sp-xs);
+        --stack-card-footer-height: auto;
+      }
+      .create-listing-modal > :deep(.boxel-modal__inner) {
+        display: flex;
+      }
+      .create-listing-modal :deep(.dialog-box__content) {
+        display: flex;
+        flex-direction: column;
+      }
+      :deep(.create-listing) {
+        height: 30rem;
+      }
+      .footer-loading-message {
+        font: var(--boxel-font-sm);
+        color: var(--boxel-500);
+        margin: 0 auto 0 0;
+        flex: 1;
+        text-align: left;
+        animation: fade-in 0.3s ease-out;
+      }
+      @keyframes fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      .description {
+        font: var(--boxel-font-sm);
+        color: var(--boxel-500);
+        margin: 0 0 var(--boxel-sp-sm);
+      }
+      .field + .field {
+        margin-top: var(--boxel-sp-sm);
+      }
+      .field {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xxxs) var(--horizontal-gap);
+      }
+      .field :deep(.label-container) {
+        width: 8rem;
+      }
+      .field :deep(.content) {
+        flex-grow: 1;
+        min-width: 13rem;
+      }
+      .field-contents {
+        display: flex;
+        align-items: center;
+        min-height: 2.25rem;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xxxs);
+      }
+      .realm-value {
+        gap: var(--boxel-sp-xxxs);
+      }
+      .realm-icon {
+        --boxel-realm-icon-size: 1rem;
+      }
+      .examples-field {
+        margin-top: var(--boxel-sp-sm);
+      }
+      .examples-container {
+        border: 1px solid var(--boxel-300);
+        border-radius: var(--boxel-border-radius);
+        padding: var(--boxel-sp-sm);
+        width: 100%;
+      }
+      .examples-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .select-all-label {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        font: var(--boxel-font-sm);
+        font-weight: 600;
+        cursor: pointer;
+      }
+      .select-all-label :deep(.input-container) {
+        --boxel-checkbox-size: 16px;
+      }
+      .clear-all-button {
+        --boxel-button-font: var(--boxel-font-xs);
+        --boxel-button-text-color: var(--boxel-500);
+        text-decoration: underline;
+      }
+      .clear-all-button:hover {
+        --boxel-button-text-color: var(--boxel-dark);
+      }
+      .examples-description {
+        font: var(--boxel-font-xs);
+        color: var(--boxel-500);
+        margin: var(--boxel-sp-xxxs) 0 var(--boxel-sp-sm);
+      }
+      .examples-grid {
+        width: 100%;
+        gap: var(--boxel-sp-xs);
+      }
+      .example-card {
+        height: 60px;
+      }
+      .footer-buttons {
+        display: flex;
+        align-items: center;
+        gap: var(--horizontal-gap);
+        width: 100%;
+        justify-content: flex-end;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index 4e5d5c02324..3155c214974 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -34,12 +34,14 @@ import {
   isFileDef,
   isBaseDef,
   isCardErrorJSONAPI,
+  isListingDef,
+  isListingInstance,
   internalKeyFor,
   type ResolvedCodeRef,
   type CardErrorJSONAPI,
 } from '@cardstack/runtime-common';
 
-import ListingCreateCommand from '@cardstack/host/commands/listing-create';
+import OpenCreateListingModalCommand from '@cardstack/host/commands/open-create-listing-modal';
 import { getCardType } from '@cardstack/host/resources/card-type';
 import type { Ready } from '@cardstack/host/resources/file';
 
@@ -255,12 +257,13 @@ export default class DetailPanel extends Component<Signature> {
           ]
         : []),
       ...(this.realm.canWrite(this.args.readyFile.url) &&
-      this.args.selectedDeclaration?.exportName
+      this.args.selectedDeclaration?.exportName &&
+      !isListingDef(this.args.selectedDeclaration?.cardOrField)
         ? [
             {
               label: 'Create Listing',
               icon: Package,
-              handler: this.createListingWithAI,
+              handler: this.createListing,
             },
           ]
         : []),
@@ -298,6 +301,16 @@ export default class DetailPanel extends Component<Signature> {
         icon: Copy,
         handler: this.duplicateInstance,
       },
+      ...(this.realm.canWrite(this.args.readyFile.url) &&
+      !isListingInstance(this.args.cardInstance)
+        ? [
+            {
+              label: 'Create Listing',
+              icon: Package,
+              handler: this.createListing,
+            },
+          ]
+        : []),
       ...(this.realm.canWrite(this.args.readyFile.url)
         ? [
             {
@@ -415,22 +428,36 @@ export default class DetailPanel extends Component<Signature> {
     this.args.openSearch(`carddef:${refURL}`);
   }
 
-  @action private async createListingWithAI() {
-    const command = new ListingCreateCommand(
+  @action private async createListing() {
+    const command = new OpenCreateListingModalCommand(
       this.commandService.commandContext,
     );
-    let codeRef: ResolvedCodeRef = this.selectedDeclarationAsCodeRef;
-    if (!codeRef) {
-      throw new Error('codeRef is required to create listing');
-    }
     const targetRealm = this.operatorModeStateService.realmURL;
     if (!targetRealm) {
       throw new Error('targetRealm is required to create listing');
     }
-    await command.execute({
-      codeRef,
-      targetRealm,
-    });
+    if (this.isCardInstance) {
+      const openCardIds = this.args.cardInstance?.id
+        ? [this.args.cardInstance.id]
+        : [];
+      const codeRef = this.cardInstanceType?.type
+        ? getResolvedCodeRefFromType(this.cardInstanceType.type)
+        : undefined;
+      if (!codeRef) {
+        throw new Error('Cannot create listing: card type not yet loaded');
+      }
+      await command.execute({ openCardIds, codeRef, targetRealm });
+    } else {
+      const codeRef: ResolvedCodeRef = this.selectedDeclarationAsCodeRef;
+      const openCardIds = this.args.cardInstance?.id
+        ? [this.args.cardInstance.id]
+        : [];
+      await command.execute({
+        codeRef,
+        openCardIds,
+        targetRealm,
+      });
+    }
   }
 
   private get selectedDeclarationAsCodeRef(): ResolvedCodeRef {
diff --git a/packages/host/app/services/operator-mode-state-service.ts b/packages/host/app/services/operator-mode-state-service.ts
index a07541ccf3b..04079f2021e 100644
--- a/packages/host/app/services/operator-mode-state-service.ts
+++ b/packages/host/app/services/operator-mode-state-service.ts
@@ -68,6 +68,12 @@ import type { Stack } from '../components/operator-mode/interact-submode';
 
 import type IndexController from '../controllers';
 
+export interface CreateListingModalPayload {
+  codeRef: CodeRef;
+  targetRealm: string;
+  openCardIds?: string[];
+}
+
 // Below types form a raw POJO representation of operator mode state.
 // This state differs from OperatorModeState in that it only contains cards that have been saved (i.e. have an ID).
 // This is because we don't have a way to serialize a stack configuration of linked cards that have not been saved yet.
@@ -142,6 +148,7 @@ export default class OperatorModeStateService extends Service {
   private moduleInspectorHistory: Record<string, ModuleInspectorView>;
 
   @tracked profileSettingsOpen = false;
+  @tracked createListingModalPayload?: CreateListingModalPayload;
 
   @service declare private cardService: CardService;
   @service declare private codeSemanticsService: CodeSemanticsService;
@@ -210,6 +217,14 @@ export default class OperatorModeStateService extends Service {
     this.schedulePersist();
   };
 
+  showCreateListingModal = (payload: CreateListingModalPayload) => {
+    this.createListingModalPayload = payload;
+  };
+
+  dismissCreateListingModal = () => {
+    this.createListingModalPayload = undefined;
+  };
+
   setNewFileDropdownOpen = () => {
     this._state.newFileDropdownOpen = true;
     this.schedulePersist();
@@ -240,6 +255,7 @@ export default class OperatorModeStateService extends Service {
     this.cardTitles = new TrackedMap();
     this.moduleInspectorHistory = {};
     this.profileSettingsOpen = false;
+    this.createListingModalPayload = undefined;
     window.localStorage.removeItem(ModuleInspectorSelections);
     this.schedulePersist();
   }
diff --git a/packages/host/tests/acceptance/code-submode/inspector-test.ts b/packages/host/tests/acceptance/code-submode/inspector-test.ts
index 702463b6000..1e711759cc8 100644
--- a/packages/host/tests/acceptance/code-submode/inspector-test.ts
+++ b/packages/host/tests/acceptance/code-submode/inspector-test.ts
@@ -2693,4 +2693,72 @@ export class ExportedCard extends ExportedCardParent {
         .includesText('File Definition');
     });
   });
+
+  test('clicking "Create Listing" opens confirmation modal for card definition', async function (assert) {
+    await visitOperatorMode({
+      stacks: [[]],
+      submode: 'code',
+      codePath: `${testRealmURL}in-this-file.gts`,
+    });
+
+    await waitFor('[data-boxel-selector-item-text="ExportedCard"]');
+    await click('[data-boxel-selector-item-text="ExportedCard"]');
+    await waitFor('[data-test-card-module-definition]');
+
+    await click('[data-test-action-button="Create Listing"]');
+    await waitFor('[data-test-create-listing-modal]');
+
+    assert
+      .dom('[data-test-create-listing-modal]')
+      .exists('confirmation modal appears after clicking Create Listing');
+  });
+
+  test('clicking "Create Listing" on a card instance opens modal with instance pre-selected', async function (assert) {
+    await visitOperatorMode({
+      stacks: [[]],
+      submode: 'code',
+      codePath: `${testRealmURL}Pet/mango.json`,
+    });
+
+    await waitFor('[data-test-card-inspector-panel]');
+    await waitFor('[data-test-card-instance-definition]');
+
+    await click('[data-test-action-button="Create Listing"]');
+    await waitFor('[data-test-create-listing-modal]');
+
+    assert
+      .dom('[data-test-create-listing-modal]')
+      .exists('confirmation modal appears after clicking Create Listing');
+
+    await waitFor('[data-test-create-listing-examples]');
+    assert
+      .dom('[data-test-select-all]')
+      .isChecked('select all checkbox is checked');
+    assert
+      .dom(
+        '[data-test-create-listing-examples] [data-test-card-catalog-item-selected="true"]',
+      )
+      .exists({ count: 2 }, 'all instances are pre-selected');
+  });
+
+  test('cancel button in Create Listing modal closes the modal', async function (assert) {
+    await visitOperatorMode({
+      stacks: [[]],
+      submode: 'code',
+      codePath: `${testRealmURL}in-this-file.gts`,
+    });
+
+    await waitFor('[data-boxel-selector-item-text="ExportedCard"]');
+    await click('[data-boxel-selector-item-text="ExportedCard"]');
+    await waitFor('[data-test-card-module-definition]');
+
+    await click('[data-test-action-button="Create Listing"]');
+    await waitFor('[data-test-create-listing-modal]');
+
+    await click('[data-test-create-listing-cancel-button]');
+
+    assert
+      .dom('[data-test-create-listing-modal]')
+      .doesNotExist('modal is dismissed after clicking Cancel');
+  });
 });
diff --git a/packages/host/tests/integration/commands/open-create-listing-modal-test.gts b/packages/host/tests/integration/commands/open-create-listing-modal-test.gts
new file mode 100644
index 00000000000..c786bb36b13
--- /dev/null
+++ b/packages/host/tests/integration/commands/open-create-listing-modal-test.gts
@@ -0,0 +1,125 @@
+import { getService } from '@universal-ember/test-support';
+import { module, test } from 'qunit';
+
+import OpenCreateListingModalCommand from '@cardstack/host/commands/open-create-listing-modal';
+
+import {
+  setupIntegrationTestRealm,
+  setupLocalIndexing,
+  testRealmURL,
+  setupRealmCacheTeardown,
+  withCachedRealmSetup,
+} from '../../helpers';
+import { setupBaseRealm } from '../../helpers/base-realm';
+import { setupMockMatrix } from '../../helpers/mock-matrix';
+import { setupRenderingTest } from '../../helpers/setup';
+
+module('Integration | commands | open-create-listing-modal', function (hooks) {
+  setupRenderingTest(hooks);
+  setupBaseRealm(hooks);
+  setupLocalIndexing(hooks);
+
+  let mockMatrixUtils = setupMockMatrix(hooks, {
+    loggedInAs: '@testuser:localhost',
+    activeRealms: [testRealmURL],
+    autostart: true,
+  });
+
+  setupRealmCacheTeardown(hooks);
+
+  hooks.beforeEach(async function () {
+    await withCachedRealmSetup(async () =>
+      setupIntegrationTestRealm({
+        mockMatrixUtils,
+        contents: {},
+      }),
+    );
+  });
+
+  test('stores modal payload in operator mode state', async function (assert) {
+    let commandService = getService('command-service');
+    let operatorModeStateService = getService('operator-mode-state-service');
+
+    let command = new OpenCreateListingModalCommand(
+      commandService.commandContext,
+    );
+
+    await command.execute({
+      codeRef: {
+        module: `${testRealmURL}pet`,
+        name: 'Pet',
+      },
+      targetRealm: testRealmURL,
+      openCardIds: [`${testRealmURL}Pet/mango`],
+    } as never);
+
+    assert.deepEqual(operatorModeStateService.createListingModalPayload, {
+      codeRef: {
+        module: `${testRealmURL}pet`,
+        name: 'Pet',
+      },
+      targetRealm: testRealmURL,
+      openCardIds: [`${testRealmURL}Pet/mango`],
+    });
+  });
+
+  test('stores modal payload without openCardIds', async function (assert) {
+    let commandService = getService('command-service');
+    let operatorModeStateService = getService('operator-mode-state-service');
+
+    let command = new OpenCreateListingModalCommand(
+      commandService.commandContext,
+    );
+
+    await command.execute({
+      codeRef: {
+        module: `${testRealmURL}pet`,
+        name: 'Pet',
+      },
+      targetRealm: testRealmURL,
+    } as never);
+
+    let payload = operatorModeStateService.createListingModalPayload;
+    assert.deepEqual(payload?.codeRef, {
+      module: `${testRealmURL}pet`,
+      name: 'Pet',
+    });
+    assert.strictEqual(payload?.targetRealm, testRealmURL);
+    assert.deepEqual(
+      payload?.openCardIds,
+      [],
+      'openCardIds is empty when not provided',
+    );
+  });
+
+  test('dismissCreateListingModal clears the payload', async function (assert) {
+    let commandService = getService('command-service');
+    let operatorModeStateService = getService('operator-mode-state-service');
+
+    let command = new OpenCreateListingModalCommand(
+      commandService.commandContext,
+    );
+
+    await command.execute({
+      codeRef: {
+        module: `${testRealmURL}pet`,
+        name: 'Pet',
+      },
+      targetRealm: testRealmURL,
+      openCardIds: [`${testRealmURL}Pet/mango`],
+    } as never);
+
+    assert.ok(
+      operatorModeStateService.createListingModalPayload,
+      'payload is set after execute',
+    );
+
+    operatorModeStateService.dismissCreateListingModal();
+
+    assert.strictEqual(
+      operatorModeStateService.createListingModalPayload,
+      undefined,
+      'payload is cleared after dismissCreateListingModal',
+    );
+  });
+});
diff --git a/packages/host/tests/integration/components/create-listing-modal-test.gts b/packages/host/tests/integration/components/create-listing-modal-test.gts
new file mode 100644
index 00000000000..250eaa1fc23
--- /dev/null
+++ b/packages/host/tests/integration/components/create-listing-modal-test.gts
@@ -0,0 +1,97 @@
+import { waitFor } from '@ember/test-helpers';
+import GlimmerComponent from '@glimmer/component';
+
+import { module, test } from 'qunit';
+
+import OperatorMode from '@cardstack/host/components/operator-mode/container';
+
+import { testRealmURL } from '../../helpers';
+import { renderComponent } from '../../helpers/render-component';
+
+import { setupOperatorModeTests } from './operator-mode/setup';
+
+module('Integration | components | create-listing-modal', function (hooks) {
+  let ctx = setupOperatorModeTests(hooks);
+
+  let noop = () => {};
+
+  test('modal renders when payload is set', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    ctx.operatorModeStateService.showCreateListingModal({
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+      targetRealm: testRealmURL,
+    });
+
+    await waitFor('[data-test-create-listing-modal]');
+
+    assert.dom('[data-test-create-listing-modal]').exists();
+    assert
+      .dom('[data-test-create-listing-modal]')
+      .includesText('Create Listing');
+  });
+
+  test('shows target realm name', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    ctx.operatorModeStateService.showCreateListingModal({
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+      targetRealm: testRealmURL,
+    });
+
+    await waitFor('[data-test-create-listing-modal]');
+
+    assert
+      .dom('[data-test-create-listing-target-realm]')
+      .includesText(ctx.realmName);
+  });
+
+  test('shows codeRef in modal', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    ctx.operatorModeStateService.showCreateListingModal({
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+      targetRealm: testRealmURL,
+    });
+
+    await waitFor('[data-test-create-listing-modal]');
+
+    assert.dom('[data-test-create-listing-coderef]').includesText('Pet');
+  });
+
+  test('shows example instances for a card type', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    ctx.operatorModeStateService.showCreateListingModal({
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+      targetRealm: testRealmURL,
+    });
+
+    await waitFor('[data-test-create-listing-modal]');
+    await waitFor('[data-test-examples-container]');
+
+    assert.dom('[data-test-examples-container]').exists();
+    assert
+      .dom(`[data-test-create-listing-example="${testRealmURL}Pet/mango"]`)
+      .exists('shows the Pet instance as an example');
+    assert
+      .dom(`[data-test-card-catalog-item-selected="true"]`)
+      .exists('example is auto-selected');
+  });
+});
diff --git a/packages/host/tests/integration/realm-indexing-test.gts b/packages/host/tests/integration/realm-indexing-test.gts
index a1ddb51411a..f85a747ab37 100644
--- a/packages/host/tests/integration/realm-indexing-test.gts
+++ b/packages/host/tests/integration/realm-indexing-test.gts
@@ -4173,7 +4173,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://packages/@cardstack/boxel-host/commands/copy-card',
         'https://packages/@cardstack/boxel-host/commands/create-ai-assistant-room',
         'https://packages/@cardstack/boxel-host/commands/generate-example-cards',
-        'https://packages/@cardstack/boxel-host/commands/listing-create',
+        'https://packages/@cardstack/boxel-host/commands/open-create-listing-modal',
         'https://packages/@cardstack/boxel-host/commands/open-in-interact-mode',
         'https://packages/@cardstack/boxel-host/commands/patch-theme',
         'https://packages/@cardstack/boxel-host/commands/populate-with-sample-data',
@@ -4309,7 +4309,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://packages/@cardstack/boxel-host/commands/create-ai-assistant-room',
         'https://packages/@cardstack/boxel-host/commands/generate-example-cards',
         'https://packages/@cardstack/boxel-host/commands/generate-readme-spec',
-        'https://packages/@cardstack/boxel-host/commands/listing-create',
+        'https://packages/@cardstack/boxel-host/commands/open-create-listing-modal',
         'https://packages/@cardstack/boxel-host/commands/open-in-interact-mode',
         'https://packages/@cardstack/boxel-host/commands/patch-theme',
         'https://packages/@cardstack/boxel-host/commands/populate-with-sample-data',
diff --git a/packages/host/tests/unit/card-def-menu-items-test.ts b/packages/host/tests/unit/card-def-menu-items-test.ts
index 922796178f0..f35014355fb 100644
--- a/packages/host/tests/unit/card-def-menu-items-test.ts
+++ b/packages/host/tests/unit/card-def-menu-items-test.ts
@@ -121,13 +121,13 @@ module('Unit | CardDef menu items', function (hooks) {
     });
 
     let hasCreateListing = items.some((i: MenuItemOptions) =>
-      i.label.includes('Create Listing with AI'),
+      i.label.includes('Create Listing'),
     );
     let hasSampleDataTagged = items.some((i: MenuItemOptions) =>
       (i.tags || []).includes('playground-sample-data'),
     );
 
-    assert.ok(hasCreateListing, 'contains Create Listing with AI');
+    assert.ok(hasCreateListing, 'contains Create Listing');
     assert.ok(
       hasSampleDataTagged,
       'contains items tagged playground-sample-data',
diff --git a/packages/runtime-common/code-ref.ts b/packages/runtime-common/code-ref.ts
index 483172bfb0a..72dcc015156 100644
--- a/packages/runtime-common/code-ref.ts
+++ b/packages/runtime-common/code-ref.ts
@@ -129,6 +129,14 @@ export function isFileDef(def: any): def is typeof FileDef {
   return isBaseDef(def) && 'isFileDef' in def;
 }
 
+export function isListingDef(def: any): boolean {
+  return isCardDef(def) && 'isListingDef' in def;
+}
+
+export function isListingInstance(card: any): boolean {
+  return isListingDef(card?.constructor);
+}
+
 export function isFieldInstance<T extends FieldDef>(
   fieldInstance: any,
 ): fieldInstance is T {