diff --git a/packages/boxel-ui/addon/src/components.ts b/packages/boxel-ui/addon/src/components.ts
index f3e343eec82..d23ec18c805 100644
--- a/packages/boxel-ui/addon/src/components.ts
+++ b/packages/boxel-ui/addon/src/components.ts
@@ -26,6 +26,7 @@ import EntityDisplayWithIcon from './components/entity-icon-display/index.gts';
 import EntityDisplayWithThumbnail from './components/entity-thumbnail-display/index.gts';
 import FieldContainer from './components/field-container/index.gts';
 import FilterList, { type Filter } from './components/filter-list/index.gts';
+import FittedCardContainer from './components/fitted-card-container/index.gts';
 import GridContainer from './components/grid-container/index.gts';
 import BoxelHeader from './components/header/index.gts';
 import Header from './components/header/index.gts';
@@ -115,6 +116,7 @@ export {
   EntityDisplayWithThumbnail,
   FieldContainer,
   FilterList,
+  FittedCardContainer,
   GridContainer,
   Header,
   IconButton,
diff --git a/packages/boxel-ui/addon/src/components/basic-fitted/usage.gts b/packages/boxel-ui/addon/src/components/basic-fitted/usage.gts
index 1933062ee52..8bea15cc159 100644
--- a/packages/boxel-ui/addon/src/components/basic-fitted/usage.gts
+++ b/packages/boxel-ui/addon/src/components/basic-fitted/usage.gts
@@ -5,134 +5,18 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 
-import { cn, gt, gte } from '../../helpers.ts';
+import {
+  cn,
+  gt,
+  gte,
+  FITTED_FORMATS,
+  type FittedFormatSpec,
+} from '../../helpers.ts';
 import type { Icon } from '../../icons.ts';
 import CardContainer from '../card-container/index.gts';
 import BasicFitted from './index.gts';
 
-type Spec = { height: number; title?: string; width: number };
-
-// These can be imported from the @cardstack/runtime-common package:
-// `import { FITTED_FORMATS } from '@cardstack/runtime-common'`
-// For various build problems, could not do that here.
-const FITTED_FORMATS = [
-  {
-    name: 'Badges',
-    specs: [
-      {
-        id: 'small-badge',
-        title: 'Small Badge',
-        width: 150,
-        height: 40,
-      },
-      {
-        id: 'medium-badge',
-        title: 'Medium Badge',
-        width: 150,
-        height: 65,
-      },
-      {
-        id: 'large-badge',
-        title: 'Large Badge',
-        width: 150,
-        height: 105,
-      },
-    ],
-  },
-  {
-    name: 'Strips',
-    specs: [
-      {
-        id: 'single-strip',
-        title: 'Single Strip',
-        width: 250,
-        height: 40,
-      },
-      {
-        id: 'double-strip',
-        title: 'Double Strip',
-        width: 250,
-        height: 65,
-      },
-      {
-        id: 'triple-strip',
-        title: 'Triple Strip',
-        width: 250,
-        height: 105,
-      },
-      {
-        id: 'double-wide-strip',
-        title: 'Double Wide Strip',
-        width: 400,
-        height: 65,
-      },
-      {
-        id: 'triple-wide-strip',
-        title: 'Triple Wide Strip',
-        width: 400,
-        height: 105,
-      },
-    ],
-  },
-  {
-    name: 'Tiles',
-    specs: [
-      {
-        id: 'small-tile',
-        title: 'Small Tile',
-        width: 150,
-        height: 170,
-      },
-      {
-        id: 'regular-tile',
-        title: 'Regular Tile',
-        width: 250,
-        height: 170,
-      },
-      {
-        id: 'cardsgrid-tile',
-        title: 'CardsGrid Tile',
-        width: 170,
-        height: 250,
-      },
-      {
-        id: 'tall-tile',
-        title: 'Tall Tile',
-        width: 150,
-        height: 275,
-      },
-      {
-        id: 'large-tile',
-        title: 'Large Tile',
-        width: 250,
-        height: 275,
-      },
-    ],
-  },
-  {
-    name: 'Cards',
-    specs: [
-      {
-        id: 'compact-card',
-        title: 'Compact Card',
-        width: 400,
-        height: 170,
-      },
-      {
-        id: 'full-card',
-        title: 'Full Card',
-        width: 400,
-        height: 275,
-      },
-      {
-        id: 'expanded-card',
-        title: 'Expanded Card',
-        width: 400,
-        height: 445,
-      },
-    ],
-  },
-];
+type Spec = Partial<FittedFormatSpec> & { width: number; height: number };
 
 const OTHER_SIZES: Spec[] = [
   { width: 226, height: 226 },
diff --git a/packages/boxel-ui/addon/src/components/card-container/index.gts b/packages/boxel-ui/addon/src/components/card-container/index.gts
index 8d5d6f4138e..57545f4ca5d 100644
--- a/packages/boxel-ui/addon/src/components/card-container/index.gts
+++ b/packages/boxel-ui/addon/src/components/card-container/index.gts
@@ -58,12 +58,9 @@ const CardContainer: TemplateOnlyComponent<Signature> = <template>
       width: 100%;
       overflow: hidden;
     }
-    :global(.boxel-card-container--boundaries) {
+    :global(.boxel-card-container--boundaries:not(.hide-boundaries)) {
       box-shadow: 0 0 0 1px var(--border, var(--boxel-border-color));
     }
-    :global(.boxel-card-container--boundaries.hide-boundaries) {
-      box-shadow: none;
-    }
 
     :global(.boxel-card-container--themed) {
       --_theme-heading-font-size: var(
diff --git a/packages/boxel-ui/addon/src/components/fitted-card-container/index.gts b/packages/boxel-ui/addon/src/components/fitted-card-container/index.gts
new file mode 100644
index 00000000000..b897a2bc0b9
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/fitted-card-container/index.gts
@@ -0,0 +1,63 @@
+import Component from '@glimmer/component';
+
+import {
+  fittedFormatById,
+  fittedFormatIds,
+  sanitizeHtmlSafe,
+  type FittedFormatId,
+} from '../../helpers.ts';
+
+interface Signature {
+  Args: {
+    size?: FittedFormatId;
+    fullWidth?: boolean;
+  };
+  Blocks: { default: [] };
+  Element: HTMLDivElement;
+}
+
+export default class FittedCardContainer extends Component<Signature> {
+  <template>
+    <div
+      class='boxel-fitted-card-container'
+      style={{this.containerStyle}}
+      ...attributes
+    >
+      {{yield}}
+    </div>
+  </template>
+
+  get formatSpec() {
+    let size = this.args.size;
+
+    if (!size) {
+      return null;
+    }
+
+    if (!fittedFormatIds?.includes(size)) {
+      console.error(
+        `Size "${size}" does not exist in fitted format sizes. Please choose from ${fittedFormatIds.join(', ')}`,
+      );
+      return null;
+    }
+
+    return fittedFormatById.get(size) ?? null;
+  }
+
+  get containerStyle() {
+    let style = ``;
+    let formatSpec = this.formatSpec;
+
+    if (!formatSpec) {
+      return sanitizeHtmlSafe(style);
+    }
+
+    if (this.args.fullWidth) {
+      style += `width: 100%; height: ${formatSpec.height}px;`;
+    } else {
+      style += `width: ${formatSpec.width}px; height: ${formatSpec.height}px;`;
+    }
+
+    return sanitizeHtmlSafe(style);
+  }
+}
diff --git a/packages/boxel-ui/addon/src/components/fitted-card-container/usage.gts b/packages/boxel-ui/addon/src/components/fitted-card-container/usage.gts
new file mode 100644
index 00000000000..d74ca6ebb26
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/fitted-card-container/usage.gts
@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import {
+  fittedFormatById,
+  fittedFormatIds,
+  type FittedFormatId,
+} from '../../helpers.ts';
+import FittedCardContainer from './index.gts';
+
+export default class FittedCardContainerUsage extends Component {
+  sampleSizes = fittedFormatIds;
+
+  formatTitle(size: FittedFormatId) {
+    return fittedFormatById.get(size)?.title ?? size;
+  }
+
+  formatDimensions(size: FittedFormatId) {
+    let spec = fittedFormatById.get(size);
+    return spec ? `${spec.width}px × ${spec.height}px` : '';
+  }
+
+  <template>
+    <FreestyleUsage @name='FittedCardContainer'>
+      <:description>
+        Constrains card content to a fixed fitted size so layouts stay aligned.
+      </:description>
+      <:example>
+        <div class='fitted-card-container-usage-grid'>
+          {{#each this.sampleSizes as |size|}}
+            <FittedCardContainer @size={{size}}>
+              <div class='fitted-card-container-usage-card'>
+                <div class='fitted-card-container-usage-title'>
+                  {{this.formatTitle size}}
+                </div>
+                <div class='fitted-card-container-usage-meta'>
+                  {{this.formatDimensions size}}
+                </div>
+              </div>
+            </FittedCardContainer>
+          {{/each}}
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='size'
+          @description='Fitted size id from the fitted formats list.'
+        />
+        <Args.Yield
+          @description='Card content rendered inside the sized container.'
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .fitted-card-container-usage-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        gap: var(--boxel-sp);
+        align-items: start;
+      }
+      .fitted-card-container-usage-card {
+        width: 100%;
+        height: 100%;
+        padding: var(--boxel-sp);
+        display: grid;
+        gap: var(--boxel-sp-2xs);
+        place-content: center;
+        text-align: center;
+        border: var(--boxel-border-card);
+        border-radius: var(--boxel-border-radius);
+        background: color-mix(
+          in oklab,
+          var(--background, var(--boxel-light)) 92%,
+          var(--foreground, var(--boxel-dark))
+        );
+        color: var(--foreground, var(--boxel-dark));
+        font: var(--boxel-font-sm);
+      }
+      .fitted-card-container-usage-title {
+        font-weight: 600;
+      }
+      .fitted-card-container-usage-meta {
+        color: var(--muted-foreground, var(--boxel-500));
+        font: var(--boxel-font-xs);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/components/grid-container/grid-item-container/index.gts b/packages/boxel-ui/addon/src/components/grid-container/grid-item-container/index.gts
new file mode 100644
index 00000000000..2d7fabe5a5d
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/grid-container/grid-item-container/index.gts
@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+
+import FittedCardContainer from '../../fitted-card-container/index.gts';
+import { type FittedFormatId } from '../../../helpers.ts';
+
+export interface GridItemContainerSignature {
+  Args: { size?: FittedFormatId; fullWidth?: boolean };
+  Blocks: {
+    default: [];
+    before?: [];
+    after?: [];
+  };
+  Element: HTMLElement;
+}
+
+export default class GridItemContainer extends Component<GridItemContainerSignature> {
+  <template>
+    <div class='boxel-grid-item-container' ...attributes>
+      {{#if (has-block 'before')}}
+        {{yield to='before'}}
+      {{/if}}
+
+      <FittedCardContainer @size={{@size}} @fullWidth={{@fullWidth}}>
+        {{yield}}
+      </FittedCardContainer>
+
+      {{#if (has-block 'after')}}
+        {{yield to='after'}}
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/components/grid-container/index.gts b/packages/boxel-ui/addon/src/components/grid-container/index.gts
index 6068bb307b5..593f7e93953 100644
--- a/packages/boxel-ui/addon/src/components/grid-container/index.gts
+++ b/packages/boxel-ui/addon/src/components/grid-container/index.gts
@@ -1,39 +1,115 @@
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import Component from '@glimmer/component';
+import type { ComponentLike } from '@glint/template';
 
-import { element } from '../../helpers.ts';
+import {
+  element,
+  fittedFormatById,
+  fittedFormatIds,
+  sanitizeHtmlSafe,
+  type FittedFormatId,
+} from '../../helpers.ts';
+
+import GridItemContainer, {
+  type GridItemContainerSignature,
+} from './grid-item-container/index.gts';
 
 interface Signature {
   Args: {
+    viewFormat?: 'list' | 'grid';
+    size?: FittedFormatId;
+    fullWidthItem?: boolean;
     tag?: keyof HTMLElementTagNameMap;
+    items?: any[];
   };
   Blocks: {
-    default: [];
+    default:
+      | [
+          item: any,
+          GridItemContainer: ComponentLike<GridItemContainerSignature>,
+        ]
+      | [];
   };
   Element: HTMLElement;
 }
 
-const GridContainer: TemplateOnlyComponent<Signature> = <template>
-  {{#let (element @tag) as |TagName|}}
-    <TagName class='grid-container' ...attributes>
-      {{yield}}
-    </TagName>
-  {{/let}}
-
-  <style scoped>
-    @layer boxelComponentL1 {
-      .grid-container {
-        display: grid;
-        gap: var(--boxel-sp);
+export default class GridContainer extends Component<Signature> {
+  <template>
+    {{#let (element @tag) as |TagName|}}
+      <TagName
+        class='boxel-grid-container'
+        style={{this.containerStyle}}
+        ...attributes
+      >
+        {{#if @items}}
+          {{#each @items as |item|}}
+            {{yield
+              item
+              (component GridItemContainer size=@size fullWidth=@fullWidthItem)
+            }}
+          {{/each}}
+        {{else}}
+          {{yield}}
+        {{/if}}
+      </TagName>
+    {{/let}}
+
+    <style scoped>
+      @layer boxelComponentL1 {
+        .boxel-grid-container {
+          display: grid;
+          gap: var(--boxel-sp);
+        }
       }
-    }
 
-    @layer reset {
-      .grid-container :deep(h2),
-      .grid-container :deep(h3) {
-        margin: 0;
+      @layer reset {
+        .boxel-grid-container :deep(h2),
+        .boxel-grid-container :deep(h3) {
+          margin: 0;
+        }
       }
+    </style>
+  </template>
+
+  get formatSpec() {
+    let size = this.args.size;
+
+    if (!size) {
+      return null;
+    }
+
+    if (!fittedFormatIds?.includes(size)) {
+      console.error(
+        `Size "${size}" does not exist in fitted format sizes. Please choose from ${fittedFormatIds.join(', ')}`,
+      );
+      return null;
     }
-  </style>
-</template>;
 
-export default GridContainer;
+    return fittedFormatById.get(size) ?? null;
+  }
+
+  get containerStyle() {
+    let formatSpec = this.formatSpec;
+
+    if (!formatSpec) {
+      return sanitizeHtmlSafe('');
+    }
+
+    if (this.args.items) {
+      if (this.args.viewFormat === 'list') {
+        return sanitizeHtmlSafe('grid-template-columns: 1fr;');
+      }
+      return sanitizeHtmlSafe(
+        `grid-template-columns: repeat(auto-fill, ${formatSpec.width}px);`,
+      );
+    } else {
+      if (this.args.viewFormat === 'list') {
+        return sanitizeHtmlSafe(
+          `grid-template-columns: 1fr; grid-auto-rows: ${formatSpec.height}px`,
+        );
+      }
+      return sanitizeHtmlSafe(
+        `grid-template-columns: repeat(auto-fill, ${formatSpec.width}px); grid-auto-rows: ${formatSpec.height}px`,
+      );
+    }
+  }
+}
diff --git a/packages/boxel-ui/addon/src/helpers.ts b/packages/boxel-ui/addon/src/helpers.ts
index b63211d3813..ac355f81ef4 100644
--- a/packages/boxel-ui/addon/src/helpers.ts
+++ b/packages/boxel-ui/addon/src/helpers.ts
@@ -63,6 +63,8 @@ import type { NormalizePhoneFormatResult } from './helpers/validate-phone-format
 
 export * from './helpers/color-tools.ts';
 
+export * from './utils/fitted-formats.ts';
+
 export {
   add,
   addClassToSVG,
diff --git a/packages/boxel-ui/addon/src/usage.ts b/packages/boxel-ui/addon/src/usage.ts
index 0d2f7453846..460952182a8 100644
--- a/packages/boxel-ui/addon/src/usage.ts
+++ b/packages/boxel-ui/addon/src/usage.ts
@@ -24,6 +24,7 @@ import EntityIconDisplayUsage from './components/entity-icon-display/usage.gts';
 import EntityThumbnailDisplayUsage from './components/entity-thumbnail-display/usage.gts';
 import FieldContainerUsage from './components/field-container/usage.gts';
 import FilterListUsage from './components/filter-list/usage.gts';
+import FittedCardContainerUsage from './components/fitted-card-container/usage.gts';
 import GridContainerUsage from './components/grid-container/usage.gts';
 import HeaderUsage from './components/header/usage.gts';
 import IconButtonUsage from './components/icon-button/usage.gts';
@@ -77,6 +78,7 @@ export const ALL_USAGE_COMPONENTS = [
   ['EntityThumbnailDisplay', EntityThumbnailDisplayUsage],
   ['FieldContainer', FieldContainerUsage],
   ['FilterList', FilterListUsage],
+  ['FittedCardContainer', FittedCardContainerUsage],
   ['GridContainer', GridContainerUsage],
   ['Header', HeaderUsage],
   ['IconButton', IconButtonUsage],
diff --git a/packages/boxel-ui/addon/src/utils/fitted-formats.ts b/packages/boxel-ui/addon/src/utils/fitted-formats.ts
new file mode 100644
index 00000000000..5112e7fd010
--- /dev/null
+++ b/packages/boxel-ui/addon/src/utils/fitted-formats.ts
@@ -0,0 +1,161 @@
+export type FittedFormatId =
+  | 'cardsgrid-tile'
+  | 'compact-card'
+  | 'double-strip'
+  | 'double-wide-strip'
+  | 'expanded-card'
+  | 'full-card'
+  | 'large-badge'
+  | 'large-tile'
+  | 'medium-badge'
+  | 'regular-tile'
+  | 'single-strip'
+  | 'small-badge'
+  | 'small-tile'
+  | 'tall-tile'
+  | 'triple-strip'
+  | 'triple-wide-strip';
+
+export type FittedFormatSpec = {
+  id: FittedFormatId;
+  title: string;
+  width: number;
+  height: number;
+};
+
+type FittedFormatGallery = ReadonlyArray<{
+  name: string;
+  specs: FittedFormatSpec[];
+}>;
+
+export const FITTED_FORMATS: FittedFormatGallery = [
+  {
+    name: 'Badges',
+    specs: [
+      {
+        id: 'small-badge',
+        title: 'Small Badge',
+        width: 150,
+        height: 40,
+      },
+      {
+        id: 'medium-badge',
+        title: 'Medium Badge',
+        width: 150,
+        height: 65,
+      },
+      {
+        id: 'large-badge',
+        title: 'Large Badge',
+        width: 150,
+        height: 105,
+      },
+    ],
+  },
+  {
+    name: 'Strips',
+    specs: [
+      {
+        id: 'single-strip',
+        title: 'Single Strip',
+        width: 250,
+        height: 40,
+      },
+      {
+        id: 'double-strip',
+        title: 'Double Strip',
+        width: 250,
+        height: 65,
+      },
+      {
+        id: 'triple-strip',
+        title: 'Triple Strip',
+        width: 250,
+        height: 105,
+      },
+      {
+        id: 'double-wide-strip',
+        title: 'Double Wide Strip',
+        width: 400,
+        height: 65,
+      },
+      {
+        id: 'triple-wide-strip',
+        title: 'Triple Wide Strip',
+        width: 400,
+        height: 105,
+      },
+    ],
+  },
+  {
+    name: 'Tiles',
+    specs: [
+      {
+        id: 'small-tile',
+        title: 'Small Tile',
+        width: 150,
+        height: 170,
+      },
+      {
+        id: 'regular-tile',
+        title: 'Regular Tile',
+        width: 250,
+        height: 170,
+      },
+      {
+        id: 'cardsgrid-tile',
+        title: 'CardsGrid Tile',
+        width: 170,
+        height: 250,
+      },
+      {
+        id: 'tall-tile',
+        title: 'Tall Tile',
+        width: 150,
+        height: 275,
+      },
+      {
+        id: 'large-tile',
+        title: 'Large Tile',
+        width: 250,
+        height: 275,
+      },
+    ],
+  },
+  {
+    name: 'Cards',
+    specs: [
+      {
+        id: 'compact-card',
+        title: 'Compact Card',
+        width: 400,
+        height: 170,
+      },
+      {
+        id: 'full-card',
+        title: 'Full Card',
+        width: 400,
+        height: 275,
+      },
+      {
+        id: 'expanded-card',
+        title: 'Expanded Card',
+        width: 400,
+        height: 445,
+      },
+    ],
+  },
+];
+
+export const FITTED_FORMAT_SIZES = FITTED_FORMATS.flatMap(
+  (group) => group.specs,
+);
+
+export const fittedFormatIds = FITTED_FORMAT_SIZES.flatMap(
+  (formatSpec) => formatSpec.id,
+);
+
+export const fittedFormatById: ReadonlyMap<FittedFormatId, FittedFormatSpec> =
+  new Map<FittedFormatId, FittedFormatSpec>(
+    FITTED_FORMAT_SIZES.map((format) => [format.id, format]),
+  );
diff --git a/packages/host/app/components/card-catalog/modal.gts b/packages/host/app/components/card-catalog/modal.gts
index 9c967dbf588..39a0dd39b19 100644
--- a/packages/host/app/components/card-catalog/modal.gts
+++ b/packages/host/app/components/card-catalog/modal.gts
@@ -120,7 +120,6 @@ export default class CardCatalogModal extends Component<Signature> {
               @selectedCard={{this.state.selectedCard}}
               @baseFilter={{this.state.baseFilter}}
               @offerToCreate={{this.offerToCreateArg}}
-              @showRecents={{false}}
             />
           </:content>
           <:footer>
diff --git a/packages/host/app/components/card-search/item-button.gts b/packages/host/app/components/card-search/item-button.gts
index f8881e46ba0..c3ec1e2ba50 100644
--- a/packages/host/app/components/card-search/item-button.gts
+++ b/packages/host/app/components/card-search/item-button.gts
@@ -9,7 +9,6 @@ import { IconPlus } from '@cardstack/boxel-ui/icons';
 
 import { isCardInstance } from '@cardstack/runtime-common';
 
-import { urlForRealmLookup } from '@cardstack/host/lib/utils';
 import type RealmService from '@cardstack/host/services/realm';
 
 import type { CardDef } from 'https://cardstack.com/base/card-api';
@@ -29,8 +28,6 @@ interface Signature {
     item: ItemType;
     itemId?: string;
     isSelected: boolean;
-    isCompact: boolean;
-    displayRealmName?: boolean;
     onSelect: (selection: string | NewCardArgs) => void;
     onSubmit?: (selection: string | NewCardArgs) => void;
   };
@@ -96,13 +93,6 @@ export default class ItemButton extends Component<Signature> {
     return this.args.itemId ?? this.cardItem?.id;
   }
 
-  private get urlForRealmLookup(): string | undefined {
-    if (!this.args.displayRealmName) {
-      return undefined;
-    }
-    return this.cardItem ? urlForRealmLookup(this.cardItem) : this.args.itemId;
-  }
-
   @action handleClick() {
     this.args.onSelect(this.selectPayload);
   }
@@ -120,16 +110,22 @@ export default class ItemButton extends Component<Signature> {
   }
 
   <template>
-    {{#if this.isNewCard}}
-      <Button
-        class={{cn 'create-card' 'catalog-item' selected=@isSelected}}
-        {{on 'click' this.handleClick}}
-        {{on 'dblclick' this.handleDblClick}}
-        {{on 'keydown' this.handleKeydown}}
-        data-test-card-catalog-create-new-button={{this.newCardItem.realmURL}}
-        data-test-card-catalog-item-selected={{if @isSelected 'true'}}
-        ...attributes
-      >
+    <Button
+      @rectangular={{true}}
+      class={{cn
+        'catalog-item'
+        selected=@isSelected
+        create-new-button=this.isNewCard
+      }}
+      {{on 'click' this.handleClick}}
+      {{on 'dblclick' this.handleDblClick}}
+      {{on 'keydown' this.handleKeydown}}
+      data-test-card-catalog-create-new-button={{this.newCardItem.realmURL}}
+      data-test-card-catalog-item={{removeFileExtension this.resolvedItemId}}
+      data-test-card-catalog-item-selected={{if @isSelected 'true'}}
+      ...attributes
+    >
+      {{#if this.isNewCard}}
         <IconPlus
           class='plus-icon'
           width='16'
@@ -138,116 +134,62 @@ export default class ItemButton extends Component<Signature> {
         />
         Create New
         {{this.cardRefName}}
-      </Button>
-    {{else}}
-      <div class={{cn 'item-button-container' compact=@isCompact}}>
-        {{#if this.componentItem}}
-          <Button
-            class={{cn 'catalog-item' selected=@isSelected compact=@isCompact}}
-            {{on 'click' this.handleClick}}
-            {{on 'dblclick' this.handleDblClick}}
-            {{on 'keydown' this.handleKeydown}}
-            data-test-card-catalog-item={{removeFileExtension
-              this.resolvedItemId
-            }}
-            data-test-card-catalog-item-selected={{if @isSelected 'true'}}
-            ...attributes
-          >
-            {{#let this.componentItem as |CardComponent|}}
-              <CardComponent
-                class='hide-boundaries'
-                data-test-search-result={{removeFileExtension
-                  this.resolvedItemId
-                }}
-              />
-            {{/let}}
-          </Button>
-        {{else if this.cardItem}}
-          <Button
-            class={{cn 'catalog-item' selected=@isSelected compact=@isCompact}}
-            {{on 'click' this.handleClick}}
-            {{on 'dblclick' this.handleDblClick}}
-            {{on 'keydown' this.handleKeydown}}
-            data-test-card-catalog-item={{this.resolvedItemId}}
-            data-test-card-catalog-item-selected={{if @isSelected 'true'}}
-            ...attributes
-          >
-            <CardRenderer
-              @card={{this.cardItem}}
-              @format='fitted'
-              @codeRef={{resultsCardRef}}
-              data-test-search-result={{removeFileExtension
-                this.resolvedItemId
-              }}
-              class='hide-boundaries'
-            />
-          </Button>
-        {{/if}}
-        {{#if this.urlForRealmLookup}}
-          {{#let (this.realm.info this.urlForRealmLookup) as |realmInfo|}}
-            <div
-              class='realm-name'
-              data-test-realm-name
-            >{{realmInfo.name}}</div>
-          {{/let}}
-        {{/if}}
-      </div>
-    {{/if}}
+      {{else if this.componentItem}}
+        <this.componentItem
+          class='hide-boundaries'
+          data-test-search-result={{removeFileExtension this.resolvedItemId}}
+        />
+      {{else if this.cardItem}}
+        <CardRenderer
+          @card={{this.cardItem}}
+          @format='fitted'
+          @codeRef={{resultsCardRef}}
+          @displayContainer={{false}}
+          data-test-search-result={{removeFileExtension this.resolvedItemId}}
+        />
+      {{/if}}
+    </Button>
     <style scoped>
       .catalog-item {
-        --boxel-button-padding: 0;
-        --boxel-button-border-radius: var(--boxel-border-radius);
-        --boxel-button-border: 1px solid var(--boxel-200);
-        height: var(--item-height, 67px);
+        height: 100%;
         width: 100%;
         max-width: 100%;
-        overflow: hidden;
-        container-name: fitted-card;
-        container-type: size;
-        display: flex;
-        text-align: left;
+      }
+      .catalog-item:not(.create-new-button) {
+        --boxel-button-padding: 0;
+
+        box-sizing: content-box;
+        text-align: start;
+      }
+      .catalog-item :deep(*) {
+        box-sizing: border-box;
+      }
+      .catalog-item:focus {
+        --host-outline-offset: -1px;
       }
       .catalog-item.selected {
         border-color: var(--boxel-highlight);
         box-shadow: 0 0 0 1px var(--boxel-highlight);
       }
       .catalog-item:hover {
-        border-color: var(--boxel-darker-hover);
+        box-shadow: var(--boxel-box-shadow);
       }
       .catalog-item.selected:hover {
         border-color: var(--boxel-highlight);
+        box-shadow:
+          0 0 0 1px var(--boxel-highlight),
+          var(--boxel-box-shadow);
       }
-      .catalog-item.compact {
-        width: var(--item-width, 250px);
-        height: var(--item-height, 40px);
-      }
-      .create-card.catalog-item {
-        --boxel-button-padding: var(--boxel-sp-xs) var(--boxel-sp);
-        --boxel-button-letter-spacing: var(--boxel-lsp-xs);
+
+      .create-new-button {
         gap: var(--boxel-sp-xs);
         flex-wrap: nowrap;
         justify-content: flex-start;
-        height: var(--item-height, 67px);
-        width: 100%;
-        max-width: 100%;
+        letter-spacing: var(--boxel-lsp-xs);
       }
       .plus-icon > :deep(path) {
         stroke: none;
       }
-      .item-button-container {
-        display: flex;
-        flex-direction: column;
-        align-items: self-end;
-        width: 100%;
-      }
-      .realm-name {
-        font: 400 var(--boxel-font);
-        color: var(--boxel-400);
-        padding-top: var(--boxel-sp-4xs);
-        padding-right: var(--boxel-sp-xxs);
-        height: 20px;
-        font-size: var(--boxel-font-size-xs);
-      }
     </style>
   </template>
 }
diff --git a/packages/host/app/components/card-search/search-content.gts b/packages/host/app/components/card-search/search-content.gts
index f91d4f1e66e..1a316ec5f3b 100644
--- a/packages/host/app/components/card-search/search-content.gts
+++ b/packages/host/app/components/card-search/search-content.gts
@@ -96,7 +96,6 @@ interface Signature {
       relativeTo: URL | undefined;
     };
     onSubmit?: (selection: string | NewCardArgs) => void;
-    showRecents?: boolean;
     showHeader?: boolean;
   };
   Blocks: {};
@@ -157,10 +156,6 @@ export default class SearchContent extends Component<Signature> {
     return this.isSearchKeyEmpty || this.searchKeyIsURL;
   }
 
-  private get showRecents() {
-    return this.args.showRecents !== false;
-  }
-
   private get showHeader() {
     return this.args.showHeader !== false;
   }
@@ -291,10 +286,7 @@ export default class SearchContent extends Component<Signature> {
     }
 
     // Recents view (empty search or focused on recents)
-    if (
-      (this.focusedSection === 'recents' || this.isSearchKeyEmpty) &&
-      this.showRecents
-    ) {
+    if (this.focusedSection === 'recents' || this.isSearchKeyEmpty) {
       const count = this.recentCardsSection?.totalCount ?? 0;
       return `${count} in ${pluralize('Recent', count)}`;
     }
@@ -326,6 +318,9 @@ export default class SearchContent extends Component<Signature> {
     if (!cards) {
       return [];
     }
+    if (this.args.isCompact) {
+      return cards;
+    }
     let filtered = cards;
     const term = this.searchTerm;
     if (term) {
@@ -529,6 +524,11 @@ export default class SearchContent extends Component<Signature> {
   private get sections(): SearchSheetSection[] {
     const sections: SearchSheetSection[] = [];
 
+    // Add recents section if present
+    if (this.recentCardsSection) {
+      sections.push(this.recentCardsSection);
+    }
+
     // Add URL section if present
     if (this.cardByUrlSection) {
       sections.push(this.cardByUrlSection);
@@ -539,11 +539,6 @@ export default class SearchContent extends Component<Signature> {
       sections.push(...this.cardsByQuerySection);
     }
 
-    // Add recents section if enabled
-    if (this.showRecents && this.recentCardsSection) {
-      sections.push(this.recentCardsSection);
-    }
-
     return sections;
   }
 
@@ -621,24 +616,34 @@ export default class SearchContent extends Component<Signature> {
         {{/if}}
       {{/if}}
 
-      {{! Render all sections }}
-      {{#each this.sections as |section i|}}
-        <SearchResultSection
-          @section={{section}}
-          @viewOption={{this.activeViewId}}
-          @isCompact={{@isCompact}}
-          @handleSelect={{@handleSelect}}
-          @isFocused={{eq this.focusedSection section.sid}}
-          @isCollapsed={{this.isSectionCollapsed section.sid}}
-          @onFocusSection={{this.onFocusSection}}
-          @getDisplayedCount={{this.getDisplayedCount}}
-          @onShowMore={{this.onShowMore}}
-          @selectedCard={{@selectedCard}}
-          @offerToCreate={{@offerToCreate}}
-          @onSubmit={{@onSubmit}}
-          data-test-search-result-section={{i}}
-        />
-      {{/each}}
+      {{#if @isCompact}}
+        {{#if this.recentCardsSection}}
+          <SearchResultSection
+            @section={{this.recentCardsSection}}
+            @isCompact={{true}}
+            @handleSelect={{@handleSelect}}
+            data-test-search-result-section='recent-cards'
+          />
+        {{/if}}
+      {{else}}
+        {{! Render all sections }}
+        {{#each this.sections as |section i|}}
+          <SearchResultSection
+            @section={{section}}
+            @viewOption={{this.activeViewId}}
+            @handleSelect={{@handleSelect}}
+            @isFocused={{eq this.focusedSection section.sid}}
+            @isCollapsed={{this.isSectionCollapsed section.sid}}
+            @onFocusSection={{this.onFocusSection}}
+            @getDisplayedCount={{this.getDisplayedCount}}
+            @onShowMore={{this.onShowMore}}
+            @selectedCard={{@selectedCard}}
+            @offerToCreate={{@offerToCreate}}
+            @onSubmit={{@onSubmit}}
+            data-test-search-result-section={{i}}
+          />
+        {{/each}}
+      {{/if}}
 
       {{#if this.hasNoResults}}
         <div class='empty-state' data-test-search-content-empty>
diff --git a/packages/host/app/components/card-search/search-result-section.gts b/packages/host/app/components/card-search/search-result-section.gts
index b72a5394933..feddb95a8df 100644
--- a/packages/host/app/components/card-search/search-result-section.gts
+++ b/packages/host/app/components/card-search/search-result-section.gts
@@ -7,11 +7,12 @@ import Component from '@glimmer/component';
 import HistoryIcon from '@cardstack/boxel-icons/history';
 import pluralize from 'pluralize';
 
-import { Button } from '@cardstack/boxel-ui/components';
-import { eq } from '@cardstack/boxel-ui/helpers';
+import { Button, GridContainer } from '@cardstack/boxel-ui/components';
+import { cn, eq, type FittedFormatId } from '@cardstack/boxel-ui/helpers';
 
 import type { CodeRef } from '@cardstack/runtime-common';
 
+import { urlForRealmLookup } from '@cardstack/host/lib/utils';
 import type RealmService from '@cardstack/host/services/realm';
 
 import { SECTION_SHOW_MORE_INCREMENT } from './constants';
@@ -30,12 +31,12 @@ interface Signature {
   Element: HTMLElement;
   Args: {
     section: SearchSheetSection;
-    viewOption: string;
-    isCompact: boolean;
+    viewOption?: string;
+    isCompact?: boolean;
     handleSelect: (selection: string | NewCardArgs) => void;
-    isFocused: boolean;
-    isCollapsed: boolean;
-    onFocusSection: (sectionId: string | null) => void;
+    isFocused?: boolean;
+    isCollapsed?: boolean;
+    onFocusSection?: (sectionId: string | null) => void;
     getDisplayedCount?: (sectionId: string, totalCount: number) => number;
     onShowMore?: (sectionId: string, totalCount: number) => void;
     selectedCard?: string | NewCardArgs;
@@ -110,6 +111,10 @@ export default class SearchResultSection extends Component<Signature> {
   get displayedRecentsCards() {
     const section = this.recentsSection;
     if (!section) return [];
+    if (this.args.isCompact) {
+      // do not limit the cards in the quick menu and keep last-updated sort order
+      return section.cards;
+    }
     const sid = this.args.section.sid;
     const getDisplayedCount = this.args.getDisplayedCount;
     if (!sid || !getDisplayedCount) return section.cards;
@@ -153,10 +158,13 @@ export default class SearchResultSection extends Component<Signature> {
         this.urlSection)
     ) {
       return 'grid-view';
-    } else if (this.args.viewOption === 'strip') {
+    } else {
       return 'strip-view';
     }
-    return '';
+  }
+
+  get viewFormat() {
+    return this.viewClass === 'grid-view' ? 'grid' : 'list';
   }
 
   get displayShowMore() {
@@ -194,29 +202,44 @@ export default class SearchResultSection extends Component<Signature> {
     };
   };
 
+  private get cardSize(): FittedFormatId {
+    if (this.viewClass === 'compact-view') {
+      return 'single-strip';
+    } else if (this.viewClass === 'strip-view') {
+      return 'double-wide-strip';
+    } else {
+      return 'cardsgrid-tile';
+    }
+  }
+
   <template>
     <div
-      class='search-result-block {{if @isCollapsed "collapsed"}}'
+      class={{cn
+        'search-result-block'
+        search-result-block--collapsed=@isCollapsed
+      }}
       data-test-realm={{this.sectionRealmName}}
       ...attributes
     >
       {{#if this.realmSection}}
-        {{#unless @isCompact}}
-          <SearchSheetSectionHeader
-            @realmInfo={{this.realmSection.realmInfo}}
-            @title={{this.realmSection.realmInfo.name}}
-            @totalCount={{this.realmSection.totalCount}}
-            @showOnlyLabel={{this.realmSection.realmInfo.name}}
-            @showOnlyChecked={{@isFocused}}
-            @onShowOnlyChange={{this.handleShowOnlyChange}}
-          />
-        {{/unless}}
-        <div class='cards {{this.viewClass}}' data-test-search-cards-result>
+        <SearchSheetSectionHeader
+          @realmInfo={{this.realmSection.realmInfo}}
+          @title={{this.realmSection.realmInfo.name}}
+          @totalCount={{this.realmSection.totalCount}}
+          @showOnlyLabel={{this.realmSection.realmInfo.name}}
+          @showOnlyChecked={{@isFocused}}
+          @onShowOnlyChange={{this.handleShowOnlyChange}}
+        />
+        <GridContainer
+          class='cards {{this.viewClass}}'
+          @viewFormat={{this.viewFormat}}
+          @size={{this.cardSize}}
+          data-test-search-cards-result
+        >
           {{#if (this.showCreateForRealm this.realmSection.realmUrl)}}
             <ItemButton
               @item={{this.newCardArgs this.realmSection.realmUrl}}
               @isSelected={{this.isCreateNewSelected}}
-              @isCompact={{@isCompact}}
               @onSelect={{@handleSelect}}
               @onSubmit={{@onSubmit}}
             />
@@ -227,15 +250,13 @@ export default class SearchResultSection extends Component<Signature> {
                 @item={{card.component}}
                 @itemId={{card.url}}
                 @isSelected={{eq this.selectedCardId card.url}}
-                @isCompact={{@isCompact}}
-                @displayRealmName={{@isCompact}}
                 @onSelect={{@handleSelect}}
                 @onSubmit={{@onSubmit}}
                 data-test-search-sheet-search-result={{i}}
               />
             {{/unless}}
           {{/each}}
-        </div>
+        </GridContainer>
         {{#if this.displayShowMore}}
           <Button
             class='show-more'
@@ -254,25 +275,25 @@ export default class SearchResultSection extends Component<Signature> {
           </Button>
         {{/if}}
       {{else if this.urlSection}}
-        {{#unless @isCompact}}
-          <SearchSheetSectionHeader
-            @realmInfo={{this.urlSection.realmInfo}}
-            @title={{this.urlSection.realmInfo.name}}
-            @totalCount={{1}}
-          />
-        {{/unless}}
-        <div class='cards {{this.viewClass}}'>
+        <SearchSheetSectionHeader
+          @realmInfo={{this.urlSection.realmInfo}}
+          @title={{this.urlSection.realmInfo.name}}
+          @totalCount={{1}}
+        />
+        <GridContainer
+          class='cards {{this.viewClass}}'
+          @viewFormat={{this.viewFormat}}
+          @size={{this.cardSize}}
+        >
           <ItemButton
             @item={{this.urlSection.card}}
             @itemId={{this.urlSection.card.id}}
             @isSelected={{eq this.selectedCardId this.urlSection.card.id}}
-            @isCompact={{@isCompact}}
-            @displayRealmName={{@isCompact}}
             @onSelect={{@handleSelect}}
             @onSubmit={{@onSubmit}}
             data-test-search-sheet-search-result='0'
           />
-        </div>
+        </GridContainer>
       {{else if this.recentsSection}}
         {{#unless @isCompact}}
           <SearchSheetSectionHeader
@@ -284,22 +305,49 @@ export default class SearchResultSection extends Component<Signature> {
             @onShowOnlyChange={{this.handleShowOnlyChange}}
           />
         {{/unless}}
-        <div class='cards {{this.viewClass}}'>
-          {{#each this.displayedRecentsCards as |card i|}}
-            {{#if card}}
+
+        <GridContainer
+          class='cards {{this.viewClass}}'
+          @items={{this.displayedRecentsCards}}
+          @viewFormat={{this.viewFormat}}
+          @size={{this.cardSize}}
+          @fullWidthItem={{eq this.viewClass 'strip-view'}}
+          as |card GridItem i|
+        >
+          <GridItem class={{if @isCompact 'recent-card-item--compact'}}>
+            <:default>
               <ItemButton
                 @item={{card}}
                 @itemId={{card.id}}
                 @isSelected={{eq this.selectedCardId card.id}}
-                @isCompact={{@isCompact}}
-                @displayRealmName={{true}}
                 @onSelect={{@handleSelect}}
                 @onSubmit={{@onSubmit}}
                 data-test-search-result-index={{i}}
               />
-            {{/if}}
-          {{/each}}
-        </div>
+            </:default>
+            <:after>
+              {{#if card}}
+                {{#let
+                  (this.realm.info (urlForRealmLookup card))
+                  as |realmInfo|
+                }}
+                  <div
+                    class={{cn
+                      'realm-name'
+                      realm-name--compact=@isCompact
+                      boxel-ellipsize=@isCompact
+                    }}
+                    data-test-realm-name
+                  >
+                    in
+                    {{realmInfo.name}}
+                  </div>
+                {{/let}}
+              {{/if}}
+            </:after>
+          </GridItem>
+        </GridContainer>
+
         {{#if this.displayShowMore}}
           <Button
             class='show-more'
@@ -326,54 +374,45 @@ export default class SearchResultSection extends Component<Signature> {
         flex-direction: column;
         margin-bottom: var(--boxel-sp-lg);
       }
-      .search-result-block.collapsed {
+      .search-result-block--collapsed {
         opacity: 0.6;
       }
-      .search-result-block.collapsed :deep(.search-sheet-section-header) {
+      .search-result-block--collapsed :deep(.search-sheet-section-header) {
         margin-bottom: 0;
         padding-bottom: var(--boxel-sp-lg);
         border-bottom: 1px solid var(--boxel-400);
       }
-      .search-result-block.collapsed .cards,
-      .search-result-block.collapsed .show-more {
+      .search-result-block--collapsed .cards,
+      .search-result-block--collapsed .show-more {
         display: none;
       }
-      .cards {
-        --gap: var(--boxel-sp);
-        gap: var(--gap);
+      .grid-view :deep(.create-new-button) {
+        flex-direction: column;
+        justify-content: center;
+      }
+      .show-more {
+        margin-top: var(--boxel-sp);
+        width: fit-content;
+      }
+      .realm-name {
+        padding-top: var(--boxel-sp-4xs);
+        color: var(--boxel-450);
+        font-size: var(--boxel-font-size-xs);
+        font-weight: 500;
       }
-      .cards.compact-view {
-        --item-width: 250px;
-        --item-height: 40px;
+      .compact-view {
         display: flex;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         gap: var(--boxel-sp-xs);
         padding: var(--boxel-sp-xs) 0;
       }
-      .cards.grid-view {
-        --item-width: 186.2px;
-        --item-height: 244px;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, var(--item-width));
-        align-content: start;
-      }
-      .cards.strip-view {
-        --item-height: 65px;
-        --item-width: 100%;
-        display: grid;
-        grid-template-columns: 1fr;
-        align-content: start;
-      }
-      .cards.grid-view :deep(.create-card) {
+      .recent-card-item--compact {
         display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
+        align-items: self-end;
       }
-      .show-more {
-        margin-top: var(--boxel-sp);
-        width: fit-content;
+      .realm-name--compact {
+        max-width: 15rem;
       }
     </style>
   </template>