diff --git a/packages/base/card-api.gts b/packages/base/card-api.gts
index 49cedd60a5..518e41d865 100644
--- a/packages/base/card-api.gts
+++ b/packages/base/card-api.gts
@@ -8,9 +8,13 @@ import { BoxelInput, FieldContainer } from '@cardstack/boxel-ui/components';
 import { cn, eq, pick } from '@cardstack/boxel-ui/helpers';
 import { on } from '@ember/modifier';
 import { startCase } from 'lodash';
-import { getBoxComponent, type BoxComponent } from './field-component';
+import {
+  getBoxComponent,
+  type BoxComponent,
+  DefaultFormatConsumer,
+} from './field-component';
 import { getContainsManyComponent } from './contains-many-component';
-import { getLinksToEditor } from './links-to-editor';
+import { LinksToEditor } from './links-to-editor';
 import { getLinksToManyComponent } from './links-to-many-component';
 import {
   SupportedMimeType,
@@ -284,7 +288,7 @@ export interface Field<
   ): Promise<any>;
   emptyValue(instance: BaseDef): any;
   validate(instance: BaseDef, value: any): void;
-  component(model: Box<BaseDef>, defaultFormat: Format): BoxComponent;
+  component(model: Box<BaseDef>): BoxComponent;
   getter(instance: BaseDef): BaseInstanceType<CardT>;
   queryableValue(value: any, stack: BaseDef[]): SearchT;
   queryMatcher(
@@ -578,27 +582,17 @@ class ContainsMany<FieldT extends FieldDefConstructor>
     );
   }
 
-  component(model: Box<BaseDef>, format: Format): BoxComponent {
+  component(model: Box<BaseDef>): BoxComponent {
     let fieldName = this.name as keyof BaseDef;
     let arrayField = model.field(
       fieldName,
       useIndexBasedKey in this.card,
     ) as unknown as Box<BaseDef[]>;
 
-    let renderFormat: Format | undefined = undefined;
-    if (
-      format === 'edit' &&
-      'isFieldDef' in model.value.constructor &&
-      model.value.constructor.isFieldDef
-    ) {
-      renderFormat = 'atom';
-    }
-
     return getContainsManyComponent({
       model,
       arrayField,
       field: this,
-      format: renderFormat ?? format,
       cardTypeFor,
     });
   }
@@ -750,8 +744,8 @@ class Contains<CardT extends FieldDefConstructor> implements Field<CardT, any> {
     );
   }
 
-  component(model: Box<BaseDef>, format: Format): BoxComponent {
-    return fieldComponent(this, model, format);
+  component(model: Box<BaseDef>): BoxComponent {
+    return fieldComponent(this, model);
   }
 }
 
@@ -1042,14 +1036,40 @@ class LinksTo<CardT extends CardDefConstructor> implements Field<CardT> {
     return fieldInstance;
   }
 
-  component(model: Box<CardDef>, format: Format): BoxComponent {
-    if (format === 'edit' && !this.computeVia) {
-      let innerModel = model.field(
-        this.name as keyof BaseDef,
-      ) as unknown as Box<CardDef | null>;
-      return getLinksToEditor(innerModel, this);
-    }
-    return fieldComponent(this, model, format);
+  component(model: Box<CardDef>): BoxComponent {
+    let isComputed = !!this.computeVia;
+    let fieldName = this.name as keyof CardDef;
+    let linksToField = this;
+    let getInnerModel = () => {
+      let innerModel = model.field(fieldName);
+      return innerModel as unknown as Box<CardDef | null>;
+    };
+    function shouldRenderEditor(
+      format: Format | undefined,
+      defaultFormat: Format,
+      isComputed: boolean,
+    ) {
+      return (format ?? defaultFormat) === 'edit' && !isComputed;
+    }
+    return class LinksToComponent extends GlimmerComponent<{
+      Args: { Named: { format?: Format; displayContainer?: boolean } };
+      Blocks: {};
+    }> {
+      <template>
+        <DefaultFormatConsumer as |defaultFormat|>
+          {{#if (shouldRenderEditor @format defaultFormat isComputed)}}
+            <LinksToEditor @model={{(getInnerModel)}} @field={{linksToField}} />
+          {{else}}
+            {{#let (fieldComponent linksToField model) as |FieldComponent|}}
+              <FieldComponent
+                @format={{@format}}
+                @displayContainer={{@displayContainer}}
+              />
+            {{/let}}
+          {{/if}}
+        </DefaultFormatConsumer>
+      </template>
+    };
   }
 }
 
@@ -1424,28 +1444,16 @@ class LinksToMany<FieldT extends CardDefConstructor>
     return fieldInstances;
   }
 
-  component(model: Box<CardDef>, format: Format): BoxComponent {
+  component(model: Box<CardDef>): BoxComponent {
     let fieldName = this.name as keyof BaseDef;
     let arrayField = model.field(
       fieldName,
       useIndexBasedKey in this.card,
     ) as unknown as Box<CardDef[]>;
-    let renderFormat: Format | undefined = undefined;
-    if (
-      format === 'edit' &&
-      'isFieldDef' in model.value.constructor &&
-      model.value.constructor.isFieldDef
-    ) {
-      renderFormat = 'atom';
-    }
-    if (format === 'edit' && this.computeVia) {
-      renderFormat = 'embedded';
-    }
     return getLinksToManyComponent({
       model,
       arrayField,
       field: this,
-      format: renderFormat ?? format,
       cardTypeFor,
     });
   }
@@ -1454,7 +1462,6 @@ class LinksToMany<FieldT extends CardDefConstructor>
 function fieldComponent(
   field: Field<typeof BaseDef>,
   model: Box<BaseDef>,
-  defaultFormat: Format,
 ): BoxComponent {
   let fieldName = field.name as keyof BaseDef;
   let card: typeof BaseDef;
@@ -1465,7 +1472,7 @@ function fieldComponent(
       (model.value[fieldName]?.constructor as typeof BaseDef) ?? field.card;
   }
   let innerModel = model.field(fieldName) as unknown as Box<BaseDef>;
-  return getBoxComponent(card, defaultFormat, innerModel, field);
+  return getBoxComponent(card, innerModel, field);
 }
 
 // our decorators are implemented by Babel, not TypeScript, so they have a
@@ -1643,8 +1650,8 @@ export class BaseDef {
     return _createFromSerialized(this, data, doc, relativeTo, identityContext);
   }
 
-  static getComponent(card: BaseDef, format: Format, field?: Field) {
-    return getComponent(card, format, field);
+  static getComponent(card: BaseDef, field?: Field) {
+    return getComponent(card, field);
   }
 
   static assignInitialFieldValue(
@@ -1862,7 +1869,6 @@ export type BaseDefComponent = ComponentLike<{
     cardOrField: typeof BaseDef;
     fields: any;
     format: Format;
-    displayContainer?: boolean;
     model: any;
     set: Setter;
     fieldName: string | undefined;
@@ -2712,15 +2718,10 @@ export type SignatureFor<CardT extends BaseDefConstructor> = {
   };
 };
 
-export function getComponent(
-  model: BaseDef,
-  format: Format,
-  field?: Field,
-): BoxComponent {
+export function getComponent(model: BaseDef, field?: Field): BoxComponent {
   let box = Box.create(model);
   let boxComponent = getBoxComponent(
     model.constructor as BaseDefConstructor,
-    format,
     box,
     field,
   );
diff --git a/packages/base/contains-many-component.gts b/packages/base/contains-many-component.gts
index 083b2f0cf1..4d0e3834c6 100644
--- a/packages/base/contains-many-component.gts
+++ b/packages/base/contains-many-component.gts
@@ -10,16 +10,20 @@ import {
   type FieldDef,
   type BaseDef,
 } from './card-api';
-import { getBoxComponent, getPluralViewComponent } from './field-component';
+import {
+  type BoxComponentSignature,
+  getBoxComponent,
+  DefaultFormatConsumer,
+} from './field-component';
 import { AddButton, IconButton } from '@cardstack/boxel-ui/components';
 import { getPlural } from '@cardstack/runtime-common';
 import { IconTrash } from '@cardstack/boxel-ui/icons';
+import { TemplateOnlyComponent } from '@ember/component/template-only';
 
-interface Signature {
+interface ContainsManyEditorSignature {
   Args: {
     model: Box<FieldDef>;
     arrayField: Box<FieldDef[]>;
-    format: Format;
     field: Field<typeof FieldDef>;
     cardTypeFor(
       field: Field<typeof BaseDef>,
@@ -28,7 +32,7 @@ interface Signature {
   };
 }
 
-class ContainsManyEditor extends GlimmerComponent<Signature> {
+class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
   <template>
     <div data-test-contains-many={{@field.name}}>
       {{#if @arrayField.children.length}}
@@ -37,11 +41,11 @@ class ContainsManyEditor extends GlimmerComponent<Signature> {
             <li class='editor' data-test-item={{i}}>
               {{#let
                 (getBoxComponent
-                  (@cardTypeFor @field boxedElement) @format boxedElement @field
+                  (@cardTypeFor @field boxedElement) boxedElement @field
                 )
                 as |Item|
               }}
-                <Item @format={{@format}} />
+                <Item />
               {{/let}}
               <div class='remove-button-container'>
                 <IconButton
@@ -118,33 +122,118 @@ class ContainsManyEditor extends GlimmerComponent<Signature> {
   };
 }
 
+function getPluralChildFormat(effectiveFormat: Format, model: Box<FieldDef>) {
+  if (
+    effectiveFormat === 'edit' &&
+    'isFieldDef' in model.value.constructor &&
+    model.value.constructor.isFieldDef
+  ) {
+    return 'atom';
+  }
+  return effectiveFormat;
+}
+
+function coalesce<T>(arg1: T | undefined, arg2: T): T {
+  return arg1 ?? arg2;
+}
+
 export function getContainsManyComponent({
   model,
   arrayField,
-  format,
   field,
   cardTypeFor,
 }: {
   model: Box<FieldDef>;
   arrayField: Box<FieldDef[]>;
-  format: Format;
   field: Field<typeof FieldDef>;
   cardTypeFor(
     field: Field<typeof BaseDef>,
     boxedElement: Box<BaseDef>,
   ): typeof BaseDef;
 }): BoxComponent {
-  if (format === 'edit') {
-    return <template>
-      <ContainsManyEditor
-        @model={{model}}
-        @arrayField={{arrayField}}
-        @field={{field}}
-        @format={{format}}
-        @cardTypeFor={{cardTypeFor}}
-      />
-    </template>;
-  } else {
-    return getPluralViewComponent(arrayField, field, format, cardTypeFor);
+  let getComponents = () =>
+    arrayField.children.map((child) =>
+      getBoxComponent(cardTypeFor(field, child), child, field),
+    ); // Wrap the the components in a function so that the template is reactive to changes in the model (this is essentially a helper)
+  let isComputed = !!field.computeVia;
+  function shouldRenderEditor(
+    format: Format | undefined,
+    defaultFormat: Format,
+    isComputed: boolean,
+  ) {
+    if (
+      'isFieldDef' in model.value.constructor &&
+      model.value.constructor.isFieldDef
+    ) {
+      return false;
+    }
+    if (isComputed) {
+      return false;
+    }
+    return (format ?? defaultFormat) === 'edit';
   }
+  let containsManyComponent: TemplateOnlyComponent<BoxComponentSignature> =
+    <template>
+      <DefaultFormatConsumer as |defaultFormat|>
+        {{#if (shouldRenderEditor @format defaultFormat isComputed)}}
+          <ContainsManyEditor
+            @model={{model}}
+            @arrayField={{arrayField}}
+            @field={{field}}
+            @cardTypeFor={{cardTypeFor}}
+          />
+        {{else}}
+          {{#let (coalesce @format defaultFormat) as |effectiveFormat|}}
+            <div
+              class='plural-field containsMany-field
+                {{effectiveFormat}}-format
+                {{unless arrayField.children.length "empty"}}'
+              data-test-plural-view={{field.fieldType}}
+              data-test-plural-view-format={{effectiveFormat}}
+            >
+              {{#each (getComponents) as |Item i|}}
+                <div data-test-plural-view-item={{i}}>
+                  <Item
+                    @format={{getPluralChildFormat effectiveFormat model}}
+                  />
+                </div>
+              {{/each}}
+            </div>
+          {{/let}}
+        {{/if}}
+      </DefaultFormatConsumer>
+      <style>
+        .containsMany-field.edit-format {
+          padding: var(--boxel-sp-sm);
+          background-color: var(--boxel-100);
+          border: none !important;
+          border-radius: var(--boxel-border-radius);
+        }
+      </style>
+    </template>;
+  return new Proxy(containsManyComponent, {
+    get(target, property, received) {
+      // proxying the bare minimum of an Array in order to render within a
+      // template. add more getters as necessary...
+      let components = getComponents();
+
+      if (property === Symbol.iterator) {
+        return components[Symbol.iterator];
+      }
+      if (property === 'length') {
+        return components.length;
+      }
+      if (typeof property === 'string' && property.match(/\d+/)) {
+        return components[parseInt(property)];
+      }
+      return Reflect.get(target, property, received);
+    },
+    getPrototypeOf() {
+      // This is necessary for Ember to be able to locate the template associated
+      // with a proxied component. Our Proxy object won't be in the template WeakMap,
+      // but we can pretend our Proxy object inherits from the true component, and
+      // Ember's template lookup respects inheritance.
+      return containsManyComponent;
+    },
+  });
 }
diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index b2cfe5e481..ed210e15f4 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -12,16 +12,20 @@ import {
   isCompoundField,
   formats,
 } from './card-api';
-import { CardContextName, getField } from '@cardstack/runtime-common';
+import {
+  CardContextName,
+  DefaultFormatContextName,
+  getField,
+} from '@cardstack/runtime-common';
 import type { ComponentLike } from '@glint/template';
 import { CardContainer } from '@cardstack/boxel-ui/components';
 import Modifier from 'ember-modifier';
 import { initSharedState } from './shared-state';
 import { eq } from '@cardstack/boxel-ui/helpers';
-import { consume } from 'ember-provide-consume-context';
+import { consume, provide } from 'ember-provide-consume-context';
 import Component from '@glimmer/component';
 
-interface BoxComponentSignature {
+export interface BoxComponentSignature {
   Args: { Named: { format?: Format; displayContainer?: boolean } };
   Blocks: {};
 }
@@ -55,14 +59,41 @@ export class CardContextConsumer extends Component<CardContextConsumerSignature>
   </template>
 }
 
+interface DefaultFormatConsumerSignature {
+  Blocks: { default: [Format] };
+}
+
+export class DefaultFormatConsumer extends Component<DefaultFormatConsumerSignature> {
+  @consume(DefaultFormatContextName) declare defaultFormat: Format | undefined;
+
+  get effectiveDefaultFormat(): Format {
+    return this.defaultFormat ?? 'isolated';
+  }
+
+  <template>
+    {{yield this.effectiveDefaultFormat}}
+  </template>
+}
+
+interface DefaultFormatProviderSignature {
+  Args: { value: Format };
+  Blocks: { default: [] };
+}
+
+export class DefaultFormatProvider extends Component<DefaultFormatProviderSignature> {
+  @provide(DefaultFormatContextName)
+  get defaultFormat() {
+    return this.args.value;
+  }
+}
+
 const componentCache = initSharedState(
   'componentCache',
   () => new WeakMap<Box<BaseDef>, BoxComponent>(),
 );
 
 export function getBoxComponent(
-  card: typeof BaseDef,
-  defaultFormat: Format,
+  cardOrField: typeof BaseDef,
   model: Box<BaseDef>,
   field: Field | undefined,
 ): BoxComponent {
@@ -70,15 +101,10 @@ export function getBoxComponent(
   if (stable) {
     return stable;
   }
-  let internalFieldsCache:
-    | { fields: FieldsTypeFor<BaseDef>; format: Format }
-    | undefined;
-
-  function lookupFormat(userFormat: Format | undefined): {
-    Implementation: BaseDefComponent;
-    fields: FieldsTypeFor<BaseDef>;
-    format: Format;
-  } {
+  function determineFormat(
+    userFormat: Format | undefined,
+    defaultFormat: Format,
+  ): Format {
     let format: Format;
     let availableFormats = formats;
     let effectiveDefaultFormat = defaultFormat;
@@ -94,19 +120,27 @@ export function getBoxComponent(
       userFormat && availableFormats.includes(userFormat)
         ? userFormat
         : effectiveDefaultFormat;
+    return format;
+  }
+
+  let internalFieldsCache:
+    | { fields: FieldsTypeFor<BaseDef>; format: Format }
+    | undefined;
 
+  function lookupComponents(effectiveFormat: Format): {
+    CardOrFieldFormatComponent: BaseDefComponent;
+    fields: FieldsTypeFor<BaseDef>;
+  } {
     let fields: FieldsTypeFor<BaseDef>;
-    if (internalFieldsCache?.format === format) {
+    if (internalFieldsCache?.format === effectiveFormat) {
       fields = internalFieldsCache.fields;
     } else {
-      fields = fieldsComponentsFor({}, model, defaultFieldFormat(format));
-      internalFieldsCache = { fields, format };
+      fields = fieldsComponentsFor({}, model);
+      internalFieldsCache = { fields, format: effectiveFormat };
     }
-
     return {
-      Implementation: (card as any)[format],
+      CardOrFieldFormatComponent: (cardOrField as any)[effectiveFormat],
       fields,
-      format,
     };
   }
 
@@ -114,68 +148,74 @@ export function getBoxComponent(
     Args: { format?: Format; displayContainer?: boolean };
   }> = <template>
     <CardContextConsumer as |context|>
-      {{#let
-        (lookupFormat @format) (if (eq @displayContainer false) false true)
-        as |f displayContainer|
-      }}
-        {{#if (isCard model.value)}}
-          <CardContainer
-            @displayBoundaries={{displayContainer}}
-            class='field-component-card
-              {{f.format}}-format display-container-{{displayContainer}}'
-            {{context.cardComponentModifier
-              card=model.value
-              format=f.format
-              fieldType=field.fieldType
-              fieldName=field.name
-            }}
-            data-test-card-format={{f.format}}
-            data-test-field-component-card
-            {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
-            ...attributes
-          >
-            <f.Implementation
-              @cardOrField={{card}}
-              @model={{model.value}}
-              @fields={{f.fields}}
-              @format={{f.format}}
-              @displayContainer={{@displayContainer}}
-              @set={{model.set}}
-              @fieldName={{model.name}}
-              @context={{context}}
-            />
-          </CardContainer>
-        {{else if (isCompoundField model.value)}}
-          <div
-            data-test-compound-field-format={{f.format}}
-            data-test-compound-field-component
-            {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
-            ...attributes
-          >
-            <f.Implementation
-              @cardOrField={{card}}
-              @model={{model.value}}
-              @fields={{f.fields}}
-              @format={{f.format}}
-              @displayContainer={{@displayContainer}}
-              @set={{model.set}}
-              @fieldName={{model.name}}
-              @context={{context}}
-            />
-          </div>
-        {{else}}
-          <f.Implementation
-            @cardOrField={{card}}
-            @model={{model.value}}
-            @fields={{f.fields}}
-            @format={{f.format}}
-            @displayContainer={{@displayContainer}}
-            @set={{model.set}}
-            @fieldName={{model.name}}
-            @context={{context}}
-          />
-        {{/if}}
-      {{/let}}
+      <DefaultFormatConsumer as |defaultFormat|>
+        {{#let (determineFormat @format defaultFormat) as |effectiveFormat|}}
+          {{#let
+            (lookupComponents effectiveFormat)
+            (if (eq @displayContainer false) false true)
+            as |c displayContainer|
+          }}
+            <DefaultFormatProvider
+              @value={{defaultFieldFormat effectiveFormat}}
+            >
+              {{#if (isCard model.value)}}
+                <CardContainer
+                  @displayBoundaries={{displayContainer}}
+                  class='field-component-card
+                    {{effectiveFormat}}-format display-container-{{displayContainer}}'
+                  {{context.cardComponentModifier
+                    card=model.value
+                    format=effectiveFormat
+                    fieldType=field.fieldType
+                    fieldName=field.name
+                  }}
+                  data-test-card-format={{effectiveFormat}}
+                  data-test-field-component-card
+                  {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
+                  ...attributes
+                >
+                  <c.CardOrFieldFormatComponent
+                    @cardOrField={{cardOrField}}
+                    @model={{model.value}}
+                    @fields={{c.fields}}
+                    @format={{effectiveFormat}}
+                    @set={{model.set}}
+                    @fieldName={{model.name}}
+                    @context={{context}}
+                  />
+                </CardContainer>
+              {{else if (isCompoundField model.value)}}
+                <div
+                  data-test-compound-field-format={{effectiveFormat}}
+                  data-test-compound-field-component
+                  {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
+                  ...attributes
+                >
+                  <c.CardOrFieldFormatComponent
+                    @cardOrField={{cardOrField}}
+                    @model={{model.value}}
+                    @fields={{c.fields}}
+                    @format={{effectiveFormat}}
+                    @set={{model.set}}
+                    @fieldName={{model.name}}
+                    @context={{context}}
+                  />
+                </div>
+              {{else}}
+                <c.CardOrFieldFormatComponent
+                  @cardOrField={{cardOrField}}
+                  @model={{model.value}}
+                  @fields={{c.fields}}
+                  @format={{effectiveFormat}}
+                  @set={{model.set}}
+                  @fieldName={{model.name}}
+                  @context={{context}}
+                />
+              {{/if}}
+            </DefaultFormatProvider>
+          {{/let}}
+        {{/let}}
+      </DefaultFormatConsumer>
     </CardContextConsumer>
     <style>
       .field-component-card.embedded-format {
@@ -201,11 +241,7 @@ export function getBoxComponent(
   // It would be possible to use `externalFields` in place of `internalFields` above,
   // avoiding the need for two separate Proxies. But that has the uncanny property of
   // making `<@fields />` be an infinite recursion.
-  let externalFields = fieldsComponentsFor(
-    component,
-    model,
-    defaultFieldFormat(defaultFormat),
-  );
+  let externalFields = fieldsComponentsFor(component, model);
 
   // This cast is safe because we're returning a proxy that wraps component.
   stable = externalFields as unknown as typeof component;
@@ -228,7 +264,6 @@ function defaultFieldFormat(format: Format): Format {
 function fieldsComponentsFor<T extends BaseDef>(
   target: object,
   model: Box<T>,
-  defaultFormat: Format,
 ): FieldsTypeFor<T> {
   // This is a cache of the fields we've already created components for
   // so that they do not get recreated
@@ -261,10 +296,7 @@ function fieldsComponentsFor<T extends BaseDef>(
       }
       let field = maybeField;
 
-      let result = field.component(
-        model as unknown as Box<BaseDef>,
-        defaultFormat,
-      );
+      let result = field.component(model as unknown as Box<BaseDef>);
       stableComponents.set(property, result);
       return result;
     },
@@ -308,80 +340,3 @@ function fieldsComponentsFor<T extends BaseDef>(
     },
   }) as any;
 }
-
-export function getPluralViewComponent(
-  model: Box<BaseDef[]>,
-  field: Field<typeof BaseDef>,
-  format: Format,
-  cardTypeFor: (
-    field: Field<typeof BaseDef>,
-    boxedElement: Box<BaseDef>,
-  ) => typeof BaseDef,
-): BoxComponent {
-  let getComponents = () =>
-    model.children.map((child) =>
-      getBoxComponent(cardTypeFor(field, child), format, child, field),
-    ); // Wrap the the components in a function so that the template is reactive to changes in the model (this is essentially a helper)
-  let pluralViewComponent: TemplateOnlyComponent<BoxComponentSignature> =
-    <template>
-      {{#let (if @format @format format) as |format|}}
-        <div
-          class='plural-field
-            {{field.fieldType}}-field
-            {{format}}-format
-            {{unless model.children.length "empty"}}'
-          data-test-plural-view={{field.fieldType}}
-          data-test-plural-view-format={{format}}
-        >
-          {{#each (getComponents) as |Item i|}}
-            <div data-test-plural-view-item={{i}}>
-              <Item @format={{format}} />
-            </div>
-          {{/each}}
-        </div>
-      {{/let}}
-      <style>
-        .linksToMany-field.embedded-format > div + div {
-          margin-top: var(--boxel-sp);
-        }
-        .linksToMany-field.atom-format {
-          display: flex;
-          gap: var(--boxel-sp-sm);
-          padding: var(--boxel-sp-sm);
-          border: var(--boxel-border);
-          border-radius: var(--boxel-border-radius);
-        }
-        .containsMany-field.atom-format {
-          padding: var(--boxel-sp-sm);
-          background-color: var(--boxel-100);
-          border: none !important;
-          border-radius: var(--boxel-border-radius);
-        }
-      </style>
-    </template>;
-  return new Proxy(pluralViewComponent, {
-    get(target, property, received) {
-      // proxying the bare minimum of an Array in order to render within a
-      // template. add more getters as necessary...
-      let components = getComponents();
-
-      if (property === Symbol.iterator) {
-        return components[Symbol.iterator];
-      }
-      if (property === 'length') {
-        return components.length;
-      }
-      if (typeof property === 'string' && property.match(/\d+/)) {
-        return components[parseInt(property)];
-      }
-      return Reflect.get(target, property, received);
-    },
-    getPrototypeOf() {
-      // This is necessary for Ember to be able to locate the template associated
-      // with a proxied component. Our Proxy object won't be in the template WeakMap,
-      // but we can pretend our Proxy object inherits from the true component, and
-      // Ember's template lookup respects inheritance.
-      return pluralViewComponent;
-    },
-  });
-}
diff --git a/packages/base/links-to-editor.gts b/packages/base/links-to-editor.gts
index bd17b918db..078afb3998 100644
--- a/packages/base/links-to-editor.gts
+++ b/packages/base/links-to-editor.gts
@@ -4,7 +4,7 @@ import {
   restartableTask,
   type EncapsulatedTaskDescriptor as Descriptor,
 } from 'ember-concurrency';
-import { getBoxComponent } from './field-component';
+import { DefaultFormatProvider, getBoxComponent } from './field-component';
 import {
   type CardDef,
   type BaseDef,
@@ -18,7 +18,6 @@ import {
   identifyCard,
   CardContextName,
 } from '@cardstack/runtime-common';
-import type { ComponentLike } from '@glint/template';
 import { AddButton, IconButton } from '@cardstack/boxel-ui/components';
 import { IconMinusCircle } from '@cardstack/boxel-ui/icons';
 import { consume } from 'ember-provide-consume-context';
@@ -30,7 +29,7 @@ interface Signature {
   };
 }
 
-class LinksToEditor extends GlimmerComponent<Signature> {
+export class LinksToEditor extends GlimmerComponent<Signature> {
   @consume(CardContextName) declare cardContext: CardContext;
 
   <template>
@@ -47,7 +46,9 @@ class LinksToEditor extends GlimmerComponent<Signature> {
           {{@field.card.displayName}}
         </AddButton>
       {{else}}
-        <this.linkedCard />
+        <DefaultFormatProvider @value='embedded'>
+          <this.linkedCard />
+        </DefaultFormatProvider>
         <div class='remove-button-container'>
           <IconButton
             @variant='primary'
@@ -111,7 +112,6 @@ class LinksToEditor extends GlimmerComponent<Signature> {
       .constructor as typeof BaseDef;
     return getBoxComponent(
       card,
-      'embedded',
       this.args.model as Box<BaseDef>,
       this.args.field,
     );
@@ -142,14 +142,3 @@ class LinksToEditor extends GlimmerComponent<Signature> {
     }
   });
 }
-
-export function getLinksToEditor(
-  model: Box<CardDef | null>,
-  field: Field<typeof CardDef>,
-): ComponentLike<{ Args: {}; Blocks: {} }> {
-  return class LinksToEditTemplate extends GlimmerComponent {
-    <template>
-      <LinksToEditor @model={{model}} @field={{field}} />
-    </template>
-  };
-}
diff --git a/packages/base/links-to-many-component.gts b/packages/base/links-to-many-component.gts
index efd9b2ba6e..0a8fb78c7f 100644
--- a/packages/base/links-to-many-component.gts
+++ b/packages/base/links-to-many-component.gts
@@ -2,15 +2,20 @@ import GlimmerComponent from '@glimmer/component';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import {
-  type CardDef,
   BaseDef,
+  CardContext,
   type Box,
   type BoxComponent,
-  type Format,
+  type CardDef,
   type Field,
-  CardContext,
+  type FieldDef,
+  type Format,
 } from './card-api';
-import { getBoxComponent, getPluralViewComponent } from './field-component';
+import {
+  BoxComponentSignature,
+  DefaultFormatConsumer,
+  getBoxComponent,
+} from './field-component';
 import { AddButton, IconButton } from '@cardstack/boxel-ui/components';
 import {
   restartableTask,
@@ -31,12 +36,12 @@ interface Signature {
   Args: {
     model: Box<CardDef>;
     arrayField: Box<CardDef[]>;
-    format: Format;
     field: Field<typeof CardDef>;
     cardTypeFor(
       field: Field<typeof BaseDef>,
       boxedElement: Box<BaseDef>,
     ): typeof BaseDef;
+    childFormat: 'atom' | 'embedded';
   };
 }
 
@@ -45,92 +50,116 @@ class LinksToManyEditor extends GlimmerComponent<Signature> {
 
   <template>
     <div data-test-links-to-many={{@field.name}}>
-      {{#if (eq @format 'edit')}}
-        {{#if @arrayField.children.length}}
-          <ul class='list'>
-            {{#each @arrayField.children as |boxedElement i|}}
-              <li class='editor' data-test-item={{i}}>
-                {{#let
-                  (getBoxComponent
-                    (this.args.cardTypeFor @field boxedElement)
-                    'embedded'
-                    boxedElement
-                    @field
-                  )
-                  as |Item|
-                }}
-                  <Item />
-                {{/let}}
-                <div class='remove-button-container'>
-                  <IconButton
-                    @variant='primary'
-                    @icon={{IconMinusCircle}}
-                    @width='20px'
-                    @height='20px'
-                    class='remove'
-                    {{on 'click' (fn this.remove i)}}
-                    aria-label='Remove'
-                    data-test-remove-card
-                    data-test-remove={{i}}
-                  />
-                </div>
-              </li>
-            {{/each}}
-          </ul>
-        {{/if}}
-        <AddButton
-          class='add-new'
-          @variant='full-width'
-          {{on 'click' this.add}}
-          data-test-add-new
-        >
-          Add
-          {{getPlural @field.card.displayName}}
-        </AddButton>
+      {{#if (eq @childFormat 'atom')}}
+        <LinksToManyCompactEditor
+          @model={{@model}}
+          @arrayField={{@arrayField}}
+          @field={{@field}}
+          @cardTypeFor={{@cardTypeFor}}
+          @add={{this.add}}
+          @remove={{this.remove}}
+        />
       {{else}}
-        <div class='boxel-pills' data-test-pills>
-          {{#each @arrayField.children as |boxedElement i|}}
+        <LinksToManyStandardEditor
+          @model={{@model}}
+          @arrayField={{@arrayField}}
+          @field={{@field}}
+          @cardTypeFor={{@cardTypeFor}}
+          @add={{this.add}}
+          @remove={{this.remove}}
+        />
+      {{/if}}
+    </div>
+  </template>
+
+  add = () => {
+    (this.chooseCard as unknown as Descriptor<any, any[]>).perform();
+  };
+
+  private chooseCard = restartableTask(async () => {
+    let selectedCards = (this.args.model.value as any)[this.args.field.name];
+    let selectedCardsQuery =
+      selectedCards?.map((card: any) => ({ not: { eq: { id: card.id } } })) ??
+      [];
+    let type = identifyCard(this.args.field.card) ?? baseCardRef;
+    let filter = { every: [{ type }, ...selectedCardsQuery] };
+    let chosenCard: CardDef | undefined = await chooseCard(
+      { filter },
+      {
+        offerToCreate: { ref: type, relativeTo: undefined },
+        multiSelect: true,
+        createNewCard: this.cardContext?.actions?.createCard,
+      },
+    );
+    if (chosenCard) {
+      selectedCards = [...selectedCards, chosenCard];
+      (this.args.model.value as any)[this.args.field.name] = selectedCards;
+    }
+  });
+
+  remove = (index: number) => {
+    let cards = (this.args.model.value as any)[this.args.field.name];
+    cards = cards.filter((_c: CardDef, i: number) => i !== index);
+    (this.args.model.value as any)[this.args.field.name] = cards;
+  };
+}
+
+interface LinksToManyStandardEditorSignature {
+  Args: {
+    model: Box<CardDef>;
+    arrayField: Box<CardDef[]>;
+    field: Field<typeof CardDef>;
+    cardTypeFor(
+      field: Field<typeof BaseDef>,
+      boxedElement: Box<BaseDef>,
+    ): typeof BaseDef;
+    add: () => void;
+    remove: (i: number) => void;
+  };
+}
+
+class LinksToManyStandardEditor extends GlimmerComponent<LinksToManyStandardEditorSignature> {
+  @consume(CardContextName) declare cardContext: CardContext;
+
+  <template>
+    {{#if @arrayField.children.length}}
+      <ul class='list'>
+        {{#each @arrayField.children as |boxedElement i|}}
+          <li class='editor' data-test-item={{i}}>
             {{#let
               (getBoxComponent
-                (this.args.cardTypeFor @field boxedElement)
-                'atom'
-                boxedElement
-                @field
+                (this.args.cardTypeFor @field boxedElement) boxedElement @field
               )
               as |Item|
             }}
-              <div class='boxel-pills-container' data-test-pill-item={{i}}>
-                <div class='boxel-pill'>
-                  <Item />
-                </div>
-                <IconButton
-                  @variant='primary'
-                  @icon={{IconX}}
-                  @width='10px'
-                  @height='10px'
-                  class='remove-item-button'
-                  {{on 'click' (fn this.remove i)}}
-                  aria-label='Remove'
-                  data-test-remove-card
-                  data-test-remove={{i}}
-                />
-              </div>
+              <Item @format='embedded' />
             {{/let}}
-          {{/each}}
-          <AddButton
-            class='add-new'
-            @variant='pill'
-            @iconWidth='12px'
-            @iconHeight='12px'
-            {{on 'click' this.add}}
-            data-test-add-new
-          >
-            Add
-            {{@field.card.displayName}}
-          </AddButton>
-        </div>
-      {{/if}}
-    </div>
+            <div class='remove-button-container'>
+              <IconButton
+                @variant='primary'
+                @icon={{IconMinusCircle}}
+                @width='20px'
+                @height='20px'
+                class='remove'
+                {{on 'click' (fn @remove i)}}
+                aria-label='Remove'
+                data-test-remove-card
+                data-test-remove={{i}}
+              />
+            </div>
+          </li>
+        {{/each}}
+      </ul>
+    {{/if}}
+    <AddButton
+      class='add-new'
+      @variant='full-width'
+      {{on 'click' @add}}
+      data-test-add-new
+    >
+      Add
+      {{getPlural @field.card.displayName}}
+    </AddButton>
     <style>
       .list {
         list-style: none;
@@ -158,6 +187,66 @@ class LinksToManyEditor extends GlimmerComponent<Signature> {
         --icon-bg: var(--boxel-dark);
         --icon-border: var(--boxel-dark);
       }
+    </style>
+  </template>
+}
+
+interface LinksToManyCompactEditorSignature {
+  Args: {
+    model: Box<CardDef>;
+    arrayField: Box<CardDef[]>;
+    field: Field<typeof CardDef>;
+    cardTypeFor(
+      field: Field<typeof BaseDef>,
+      boxedElement: Box<BaseDef>,
+    ): typeof BaseDef;
+    add: () => void;
+    remove: (i: number) => void;
+  };
+}
+class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditorSignature> {
+  @consume(CardContextName) declare cardContext: CardContext;
+
+  <template>
+    <div class='boxel-pills' data-test-pills>
+      {{#each @arrayField.children as |boxedElement i|}}
+        {{#let
+          (getBoxComponent
+            (this.args.cardTypeFor @field boxedElement) boxedElement @field
+          )
+          as |Item|
+        }}
+          <div class='boxel-pills-container' data-test-pill-item={{i}}>
+            <div class='boxel-pill'>
+              <Item @format='atom' />
+            </div>
+            <IconButton
+              @variant='primary'
+              @icon={{IconX}}
+              @width='10px'
+              @height='10px'
+              class='remove-item-button'
+              {{on 'click' (fn @remove i)}}
+              aria-label='Remove'
+              data-test-remove-card
+              data-test-remove={{i}}
+            />
+          </div>
+        {{/let}}
+      {{/each}}
+      <AddButton
+        class='add-new'
+        @variant='pill'
+        @iconWidth='12px'
+        @iconHeight='12px'
+        {{on 'click' @add}}
+        data-test-add-new
+      >
+        Add
+        {{@field.card.displayName}}
+      </AddButton>
+    </div>
+    <style>
       .boxel-pills {
         display: flex;
         flex-wrap: wrap;
@@ -193,68 +282,120 @@ class LinksToManyEditor extends GlimmerComponent<Signature> {
       }
     </style>
   </template>
+}
 
-  add = () => {
-    (this.chooseCard as unknown as Descriptor<any, any[]>).perform();
-  };
+function getEditorChildFormat(
+  format: Format | undefined,
+  defaultFormat: Format,
+  model: Box<FieldDef>,
+) {
+  if (
+    (format ?? defaultFormat) === 'edit' &&
+    'isFieldDef' in model.value.constructor &&
+    model.value.constructor.isFieldDef
+  ) {
+    return 'atom';
+  }
+  return 'embedded';
+}
 
-  private chooseCard = restartableTask(async () => {
-    let selectedCards = (this.args.model.value as any)[this.args.field.name];
-    let selectedCardsQuery =
-      selectedCards?.map((card: any) => ({ not: { eq: { id: card.id } } })) ??
-      [];
-    let type = identifyCard(this.args.field.card) ?? baseCardRef;
-    let filter = { every: [{ type }, ...selectedCardsQuery] };
-    let chosenCard: CardDef | undefined = await chooseCard(
-      { filter },
-      {
-        offerToCreate: { ref: type, relativeTo: undefined },
-        multiSelect: true,
-        createNewCard: this.cardContext?.actions?.createCard,
-      },
-    );
-    if (chosenCard) {
-      selectedCards = [...selectedCards, chosenCard];
-      (this.args.model.value as any)[this.args.field.name] = selectedCards;
-    }
-  });
+function coalesce<T>(arg1: T | undefined, arg2: T): T {
+  return arg1 ?? arg2;
+}
 
-  remove = (index: number) => {
-    let cards = (this.args.model.value as any)[this.args.field.name];
-    cards = cards.filter((_c: CardDef, i: number) => i !== index);
-    (this.args.model.value as any)[this.args.field.name] = cards;
-  };
+function shouldRenderEditor(
+  format: Format | undefined,
+  defaultFormat: Format,
+  isComputed: boolean,
+) {
+  return (format ?? defaultFormat) === 'edit' && !isComputed;
 }
 
 export function getLinksToManyComponent({
   model,
   arrayField,
-  format,
   field,
   cardTypeFor,
 }: {
   model: Box<CardDef>;
   arrayField: Box<CardDef[]>;
-  format: Format;
   field: Field<typeof CardDef>;
   cardTypeFor(
     field: Field<typeof BaseDef>,
     boxedElement: Box<BaseDef>,
   ): typeof BaseDef;
 }): BoxComponent {
-  if (format === 'edit' || format === 'atom') {
-    return class LinksToManyEditorTemplate extends GlimmerComponent {
-      <template>
-        <LinksToManyEditor
-          @model={{model}}
-          @arrayField={{arrayField}}
-          @field={{field}}
-          @format={{format}}
-          @cardTypeFor={{cardTypeFor}}
-        />
-      </template>
-    };
-  } else {
-    return getPluralViewComponent(arrayField, field, format, cardTypeFor);
-  }
+  let getComponents = () =>
+    arrayField.children.map((child) =>
+      getBoxComponent(cardTypeFor(field, child), child, field),
+    ); // Wrap the the components in a function so that the template is reactive to changes in the model (this is essentially a helper)
+  let isComputed = !!field.computeVia;
+  let linksToManyComponent = class LinksToManyComponent extends GlimmerComponent<BoxComponentSignature> {
+    <template>
+      <DefaultFormatConsumer as |defaultFormat|>
+        {{#if (shouldRenderEditor @format defaultFormat isComputed)}}
+          <LinksToManyEditor
+            @model={{model}}
+            @arrayField={{arrayField}}
+            @field={{field}}
+            @cardTypeFor={{cardTypeFor}}
+            @childFormat={{getEditorChildFormat @format defaultFormat model}}
+          />
+        {{else}}
+          {{#let (coalesce @format defaultFormat) as |effectiveFormat|}}
+            <div
+              class='plural-field linksToMany-field
+                {{effectiveFormat}}-effectiveFormat
+                {{unless arrayField.children.length "empty"}}'
+              data-test-plural-view={{field.fieldType}}
+              data-test-plural-view-format={{effectiveFormat}}
+            >
+              {{#each (getComponents) as |Item i|}}
+                <div data-test-plural-view-item={{i}}>
+                  <Item @format={{effectiveFormat}} />
+                </div>
+              {{/each}}
+            </div>
+          {{/let}}
+        {{/if}}
+      </DefaultFormatConsumer>
+      <style>
+        .linksToMany-field.embedded-format > div + div {
+          margin-top: var(--boxel-sp);
+        }
+        .linksToMany-field.atom-format {
+          display: flex;
+          gap: var(--boxel-sp-sm);
+          padding: var(--boxel-sp-sm);
+          border: var(--boxel-border);
+          border-radius: var(--boxel-border-radius);
+        }
+      </style>
+    </template>
+  };
+  return new Proxy(linksToManyComponent, {
+    get(target, property, received) {
+      // proxying the bare minimum of an Array in order to render within a
+      // template. add more getters as necessary...
+      let components = getComponents();
+
+      if (property === Symbol.iterator) {
+        return components[Symbol.iterator];
+      }
+      if (property === 'length') {
+        return components.length;
+      }
+      if (typeof property === 'string' && property.match(/\d+/)) {
+        return components[parseInt(property)];
+      }
+      return Reflect.get(target, property, received);
+    },
+    getPrototypeOf() {
+      // This is necessary for Ember to be able to locate the template associated
+      // with a proxied component. Our Proxy object won't be in the template WeakMap,
+      // but we can pretend our Proxy object inherits from the true component, and
+      // Ember's template lookup respects inheritance.
+      return linksToManyComponent;
+    },
+  });
 }
diff --git a/packages/base/room.gts b/packages/base/room.gts
index 33d861a512..5b26874039 100644
--- a/packages/base/room.gts
+++ b/packages/base/room.gts
@@ -186,7 +186,7 @@ class ScrollIntoView extends Modifier {
 }
 
 function getCardComponent(card: CardDef) {
-  return card.constructor.getComponent(card, 'atom');
+  return card.constructor.getComponent(card);
 }
 
 class EmbeddedMessageField extends Component<typeof MessageField> {
@@ -210,7 +210,7 @@ class EmbeddedMessageField extends Component<typeof MessageField> {
         {{else if cardResource.card}}
           {{#let (getCardComponent cardResource.card) as |CardComponent|}}
             <div data-test-attached-card={{cardResource.card.id}}>
-              <CardComponent />
+              <CardComponent @format='atom' />
             </div>
           {{/let}}
         {{/if}}
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
index 1455878929..9837bfab86 100644
--- a/packages/host/app/components/card-pill.gts
+++ b/packages/host/app/components/card-pill.gts
@@ -23,7 +23,7 @@ interface CardPillSignature {
 
 export default class CardPill extends Component<CardPillSignature> {
   get component() {
-    return this.args.card.constructor.getComponent(this.args.card, 'atom');
+    return this.args.card.constructor.getComponent(this.args.card);
   }
 
   <template>
@@ -47,7 +47,7 @@ export default class CardPill extends Component<CardPillSignature> {
       </:icon>
       <:default>
         <div class='card-content' title={{@card.title}}>
-          <this.component @displayContainer={{false}} />
+          <this.component @format='atom' @displayContainer={{false}} />
         </div>
         {{#if @removeCard}}
           <IconButton
diff --git a/packages/host/app/components/preview.gts b/packages/host/app/components/preview.gts
index 96977c18e8..0cd9468990 100644
--- a/packages/host/app/components/preview.gts
+++ b/packages/host/app/components/preview.gts
@@ -1,5 +1,9 @@
 import Component from '@glimmer/component';
 
+import { provide } from 'ember-provide-consume-context';
+
+import { DefaultFormatContextName } from '@cardstack/runtime-common';
+
 import type {
   BaseDef,
   Format,
@@ -15,6 +19,11 @@ interface Signature {
 }
 
 export default class Preview extends Component<Signature> {
+  @provide(DefaultFormatContextName)
+  get defaultFormat() {
+    return this.args.format ?? 'isolated';
+  }
+
   <template>
     <this.renderedCard />
   </template>
@@ -22,7 +31,6 @@ export default class Preview extends Component<Signature> {
   get renderedCard() {
     return this.args.card.constructor.getComponent(
       this.args.card,
-      this.args.format ?? 'isolated',
       this.args.field,
     );
   }
diff --git a/packages/host/app/lib/externals.ts b/packages/host/app/lib/externals.ts
index 8fa6a00c4a..a082c8bb3a 100644
--- a/packages/host/app/lib/externals.ts
+++ b/packages/host/app/lib/externals.ts
@@ -17,6 +17,8 @@ import * as emberConcurrencyAsyncArrowRuntime from 'ember-concurrency/-private/a
 import * as cssUrl from 'ember-css-url';
 import * as emberModifier2 from 'ember-modifier';
 import * as emberProvideConsumeContext from 'ember-provide-consume-context';
+import * as emberProvideConsumeContextContextConsumer from 'ember-provide-consume-context/components/context-consumer';
+import * as emberProvideConsumeContextContextProvider from 'ember-provide-consume-context/components/context-provider';
 import * as emberResources from 'ember-resources';
 import * as ethers from 'ethers';
 import * as flat from 'flat';
@@ -65,6 +67,14 @@ export function shimExternals(virtualNetwork: VirtualNetwork) {
     'ember-provide-consume-context',
     emberProvideConsumeContext,
   );
+  virtualNetwork.shimModule(
+    'ember-provide-consume-context/components/context-consumer',
+    emberProvideConsumeContextContextConsumer,
+  );
+  virtualNetwork.shimModule(
+    'ember-provide-consume-context/components/context-provider',
+    emberProvideConsumeContextContextProvider,
+  );
   virtualNetwork.shimModule('flat', flat);
   virtualNetwork.shimModule('lodash', lodash);
   virtualNetwork.shimModule('tracked-built-ins', tracked);
diff --git a/packages/host/app/lib/isolated-render.gts b/packages/host/app/lib/isolated-render.gts
index 7651563c4f..28ca079157 100644
--- a/packages/host/app/lib/isolated-render.gts
+++ b/packages/host/app/lib/isolated-render.gts
@@ -10,16 +10,25 @@ import { type ComponentLike } from '@glint/template';
 
 import { CardError } from '@cardstack/runtime-common/error';
 
+import { Format } from 'https://cardstack.com/base/card-api';
+
 import type { SimpleElement } from '@simple-dom/interface';
 
+interface Signature {
+  Args: {
+    format: Format;
+  };
+}
+
 export function render(
-  C: ComponentLike,
+  C: ComponentLike<Signature>,
   element: SimpleElement,
   owner: Owner,
+  format: Format,
 ): void {
   // this needs to be a template-only component because the way we're invoking it
   // just grabs the template and would drop any associated class.
-  const root = <template><C /></template>;
+  const root = <template><C @format={{format}} /></template>;
 
   // clear any previous render work
   removeChildren(element);
diff --git a/packages/host/app/services/render-service.ts b/packages/host/app/services/render-service.ts
index 1b5bb8a9d6..3e65a93c24 100644
--- a/packages/host/app/services/render-service.ts
+++ b/packages/host/app/services/render-service.ts
@@ -64,7 +64,7 @@ export default class RenderService extends Service {
       identityContext,
       realmPath,
     } = params;
-    let component = card.constructor.getComponent(card, format);
+    let component = card.constructor.getComponent(card);
 
     let element = getIsolatedRenderElement(this.document);
     // TODO: consider consolidating the NotReady and NotLoaded objects into a single object
@@ -75,7 +75,7 @@ export default class RenderService extends Service {
       notReady = undefined;
       notLoaded = undefined;
       try {
-        render(component, element, this.owner);
+        render(component, element, this.owner, format);
       } catch (err: any) {
         notReady = err.additionalErrors?.find((e: any) =>
           isNotReadyError(e),
diff --git a/packages/host/tests/helpers/render-component.ts b/packages/host/tests/helpers/render-component.ts
index 133036701e..666d93e5de 100644
--- a/packages/host/tests/helpers/render-component.ts
+++ b/packages/host/tests/helpers/render-component.ts
@@ -18,9 +18,12 @@ async function cardApi(
   return await loader.import(`${baseRealm.url}card-api`);
 }
 
-export async function renderComponent(C: ComponentLike) {
+export async function renderComponent(C: ComponentLike, format?: Format) {
   await render(
-    precompileTemplate(`<C/>`, { strictMode: true, scope: () => ({ C }) }),
+    precompileTemplate(`<C @format={{format}} />`, {
+      strictMode: true,
+      scope: () => ({ C, format }),
+    }),
   );
 }
 
@@ -32,6 +35,6 @@ export async function renderCard(
 ) {
   let api = await cardApi(loader);
   await api.recompute(card, { recomputeAllFields: true });
-  await renderComponent(api.getComponent(card, format, field));
+  await renderComponent(api.getComponent(card, field), format);
   return (getContext() as { element: Element }).element;
 }
diff --git a/packages/host/tests/integration/components/card-def-field-def-relationships-test.gts b/packages/host/tests/integration/components/card-def-field-def-relationships-test.gts
index 04a52be199..4d94052dfa 100644
--- a/packages/host/tests/integration/components/card-def-field-def-relationships-test.gts
+++ b/packages/host/tests/integration/components/card-def-field-def-relationships-test.gts
@@ -347,11 +347,11 @@ module('Integration | CardDef-FieldDef relationships test', function (hooks) {
       .dom('[data-test-field="guest"] [data-test-field="name"] input')
       .hasValue('Mama Leone');
     assert
-      .dom('[data-test-field="guest"] [data-test-plural-view-format="atom"]')
-      .exists('atom layout is rendered');
+      .dom('[data-test-field="guest"] [data-test-plural-view-format="edit"]')
+      .exists('plural layout is rendered');
     assert
       .dom('[data-test-field="guest"] [data-test-plural-view="containsMany"]')
-      .hasClass('atom-format', 'field has correct class');
+      .hasClass('edit-format', 'field has correct class');
     assert
       .dom(
         '[data-test-field="guest"] [data-test-plural-view="containsMany"] [data-test-plural-view-item]',
@@ -376,10 +376,10 @@ module('Integration | CardDef-FieldDef relationships test', function (hooks) {
       .dom('[data-test-field="guest2"] [data-test-field="name"] input')
       .hasValue('Papa Leone');
     assert
-      .dom('[data-test-field="guest2"] [data-test-plural-view-format="atom"]')
+      .dom('[data-test-field="guest2"] [data-test-plural-view-format="edit"]')
       .hasClass('empty', 'empty containsMany field has correct class');
     assert
-      .dom('[data-test-field="guest2"] [data-test-plural-view-format="atom"]')
+      .dom('[data-test-field="guest2"] [data-test-plural-view-format="edit"]')
       .hasText('', 'field is empty');
 
     assert
@@ -560,13 +560,13 @@ module('Integration | CardDef-FieldDef relationships test', function (hooks) {
 
     await waitFor(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`);
     assert.dom('[data-test-field="trips"] [data-test-add-new]').exists();
-
     await click('[data-test-links-to-many="countries"] [data-test-add-new]');
     await waitFor(`[data-test-card-catalog-item="${testRealmURL}japan"]`);
     await click(`[data-test-select="${testRealmURL}japan"]`);
     await click('[data-test-card-catalog-go-button]');
 
     await waitFor('[card-catalog-modal]', { count: 0 });
+
     assert.dom('[data-test-pill-item]').exists({ count: 1 });
     assert.dom('[data-test-field="trips"]').containsText('Japan');
 
diff --git a/packages/host/tests/integration/components/computed-test.gts b/packages/host/tests/integration/components/computed-test.gts
index 2ca3a15499..b3f85c5064 100644
--- a/packages/host/tests/integration/components/computed-test.gts
+++ b/packages/host/tests/integration/components/computed-test.gts
@@ -427,6 +427,14 @@ module('Integration | computeds', function (hooks) {
       ),
       ['Mango', 'Van Gogh', 'Hassan', 'Mariko', 'Yume', 'Sakura'],
     );
+
+    await renderCard(loader, abdelRahmans, 'edit');
+    assert
+      .dom('[data-test-contains-many="people"] [data-test-remove]')
+      .exists({ count: 6 });
+    assert
+      .dom('[data-test-contains-many="slowPeople"] [data-test-remove]')
+      .doesNotExist();
   });
 
   test('supports an empty containsMany computed composite field', async function (assert) {
diff --git a/packages/realm-server/lib/externals.ts b/packages/realm-server/lib/externals.ts
index a0d840fcbd..67cfc74d5f 100644
--- a/packages/realm-server/lib/externals.ts
+++ b/packages/realm-server/lib/externals.ts
@@ -84,6 +84,18 @@ export function shimExternals(virtualNetwork: VirtualNetwork) {
       return () => {};
     },
   });
+  virtualNetwork.shimModule(
+    'ember-provide-consume-context/components/context-consumer',
+    {
+      default: class {},
+    },
+  );
+  virtualNetwork.shimModule(
+    'ember-provide-consume-context/components/context-provider',
+    {
+      default: class {},
+    },
+  );
   // import * as emberConcurrencyAsyncArrowRuntime from 'ember-concurrency/-private/async-arrow-runtime';
   virtualNetwork.shimModule('ember-concurrency/-private/async-arrow-runtime', {
     default: () => {},
diff --git a/packages/runtime-common/constants.ts b/packages/runtime-common/constants.ts
index 8652127d2d..09da700669 100644
--- a/packages/runtime-common/constants.ts
+++ b/packages/runtime-common/constants.ts
@@ -22,3 +22,4 @@ export const primitive = Symbol('cardstack-primitive');
 export const aiBotUsername = 'aibot';
 
 export const CardContextName = 'card-context';
+export const DefaultFormatContextName = 'default-format-context';