diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/offering-manager.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/offering-manager.js
index 47c31db972..74c84db16c 100644
--- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/offering-manager.js
+++ b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/offering-manager.js
@@ -3,6 +3,7 @@ import {
   create,
   clickable,
   hasClass,
+  isHidden,
   isVisible,
   property,
   text,
@@ -14,6 +15,11 @@ import offeringForm from './offering-form';
 
 const definition = {
   scope: '[data-test-offering-manager]',
+  learners: {
+    scope: '.offering-manager-learners',
+    list: text(),
+    isHidden: isHidden(),
+  },
   learnerGroups: collection('.offering-manager-learner-groups li', {
     title: text(),
     expandTooltip: triggerable('mouseover'),
@@ -22,6 +28,7 @@ const definition = {
     isTooltipVisible: isVisible('.ilios-tooltip', {
       resetScope: true,
     }),
+    displaysUsersIcon: hasClass('fa-users', 'svg'),
   }),
   location: text('[data-test-location]'),
   url: property('href', '[data-test-url] a'),
diff --git a/packages/ilios-common/addon/components/offering-manager.gjs b/packages/ilios-common/addon/components/offering-manager.gjs
index 088b5299c0..ed2e410e15 100644
--- a/packages/ilios-common/addon/components/offering-manager.gjs
+++ b/packages/ilios-common/addon/components/offering-manager.gjs
@@ -5,6 +5,7 @@ import { cached, tracked } from '@glimmer/tracking';
 import { task, timeout } from 'ember-concurrency';
 import { modifier } from 'ember-modifier';
 import { TrackedAsyncData } from 'ember-async-data';
+import { mapBy, sortBy } from 'ilios-common/utils/array-helpers';
 import OfferingForm from 'ilios-common/components/offering-form';
 import toggle from 'ilios-common/helpers/toggle';
 import mouseHoverToggle from 'ilios-common/modifiers/mouse-hover-toggle';
@@ -14,10 +15,11 @@ import t from 'ember-intl/helpers/t';
 import and from 'ember-truth-helpers/helpers/and';
 import includes from 'ilios-common/helpers/includes';
 import IliosTooltip from 'ilios-common/components/ilios-tooltip';
+import mapBy0 from 'ilios-common/helpers/map-by';
 import eq from 'ember-truth-helpers/helpers/eq';
 import join from 'ilios-common/helpers/join';
 import reverse from 'ilios-common/helpers/reverse';
-import mapBy from 'ilios-common/helpers/map-by';
+import FadeText from 'ilios-common/components/fade-text';
 import TruncateText from 'ilios-common/components/truncate-text';
 import OfferingUrlDisplay from 'ilios-common/components/offering-url-display';
 import UserStatus from 'ilios-common/components/user-status';
@@ -40,33 +42,66 @@ export default class OfferingManagerComponent extends Component {
     return new TrackedAsyncData(this.args.offering.learnerGroups);
   }
 
-  @cached
-  get sessionData() {
-    return new TrackedAsyncData(this.args.offering?.session);
+  get learnerGroups() {
+    return this.learnerGroupsData.isResolved ? this.learnerGroupsData.value : null;
   }
 
-  @cached
-  get courseData() {
-    return new TrackedAsyncData(this.session?.course);
+  get sortedLearnerGroups() {
+    if (!this.learnerGroups) {
+      return [];
+    }
+    return this.learnerGroups.toSorted((learnerGroupA, learnerGroupB) => {
+      if ('title:desc' === this.sortBy) {
+        return learnerGroupB.title.localeCompare(learnerGroupA.title, this.intl.primaryLocale, {
+          numeric: true,
+        });
+      }
+      return learnerGroupA.title.localeCompare(learnerGroupB.title, this.intl.primaryLocale, {
+        numeric: true,
+      });
+    });
   }
 
   @cached
-  get cohortsData() {
-    return new TrackedAsyncData(this.course?.cohorts);
+  get individualLearnersData() {
+    return new TrackedAsyncData(this.args.offering.learners);
   }
 
-  get learnerGroups() {
-    return this.learnerGroupsData.isResolved ? this.learnerGroupsData.value : null;
+  get individualLearners() {
+    return this.individualLearnersData.isResolved ? this.individualLearnersData.value : [];
+  }
+
+  get sortedIndividualLearners() {
+    if (!this.individualLearners.length) {
+      return '';
+    }
+
+    return mapBy(sortBy(this.individualLearners, 'fullName'), 'fullName').join(', ');
+  }
+
+  @cached
+  get sessionData() {
+    return new TrackedAsyncData(this.args.offering?.session);
   }
 
   get session() {
     return this.sessionData.isResolved ? this.sessionData.value : null;
   }
 
+  @cached
+  get courseData() {
+    return new TrackedAsyncData(this.session?.course);
+  }
+
   get course() {
     return this.courseData.isResolved ? this.courseData.value : null;
   }
 
+  @cached
+  get cohortsData() {
+    return new TrackedAsyncData(this.course?.cohorts);
+  }
+
   get cohorts() {
     return this.cohortsData.isResolved ? this.cohortsData.value : null;
   }
@@ -91,19 +126,6 @@ export default class OfferingManagerComponent extends Component {
     return this.args.offering.save();
   }
 
-  get sortedLearnerGroups() {
-    if (!this.learnerGroups) {
-      return [];
-    }
-    return this.learnerGroups.slice().sort((learnerGroupA, learnerGroupB) => {
-      const locale = this.intl.get('locale');
-      if ('title:desc' === this.sortBy) {
-        return learnerGroupB.title.localeCompare(learnerGroupA.title, locale, { numeric: true });
-      }
-      return learnerGroupA.title.localeCompare(learnerGroupB.title, locale, { numeric: true });
-    });
-  }
-
   @action
   toggleHover(id) {
     if (this.hoveredGroups.includes(id)) {
@@ -118,7 +140,7 @@ export default class OfferingManagerComponent extends Component {
   });
   <template>
     <div
-      class="offering-manager {{if this.showRemoveConfirmation 'show-remove-confirmation'}}"
+      class="offering-manager{{if this.showRemoveConfirmation ' show-remove-confirmation'}}"
       data-test-offering-manager
       ...attributes
     >
@@ -138,48 +160,55 @@ export default class OfferingManagerComponent extends Component {
             @scrollToBottom={{false}}
           />
         {{else}}
-          <div class="offering-manager-learner-groups">
-            <ul>
-              {{#each this.sortedLearnerGroups as |learnerGroup|}}
-                <li
-                  {{this.setLearnerGroupElement learnerGroup.id}}
-                  {{mouseHoverToggle (fn this.toggleHover learnerGroup.id)}}
-                >
-                  {{learnerGroup.title}}
-                  {{#if learnerGroup.needsAccommodation}}
-                    <FaIcon
-                      @icon="universal-access"
-                      @title={{t "general.accommodationIsRequiredForLearnersInThisGroup"}}
-                    />
-                  {{/if}}
-                  {{#unless learnerGroup.isTopLevelGroup}}
-                    {{#if
-                      (and
-                        (get this (concat "learnerGroupElement" learnerGroup.id))
-                        (includes learnerGroup.id this.hoveredGroups)
-                      )
-                    }}
-                      <IliosTooltip
-                        @target={{get this (concat "learnerGroupElement" learnerGroup.id)}}
-                      >
-                        <strong>
-                          {{if
-                            (eq learnerGroup.allParents.length 1)
-                            (t "general.parentGroup")
-                            (t "general.parentGroups")
-                          }}:
-                        </strong>
-                        {{join " » " (reverse (mapBy "title" learnerGroup.allParents))}}
-                      </IliosTooltip>
+          <div class="offering-manager-learners-and-learner-groups">
+            {{#if this.individualLearners.length}}
+              <div class="offering-manager-learners">
+                <FadeText @text={{this.sortedIndividualLearners}} />
+              </div>
+            {{/if}}
+            <div class="offering-manager-learner-groups">
+              <ul>
+                {{#each this.sortedLearnerGroups as |learnerGroup|}}
+                  <li
+                    {{this.setLearnerGroupElement learnerGroup.id}}
+                    {{mouseHoverToggle (fn this.toggleHover learnerGroup.id)}}
+                  >
+                    {{learnerGroup.title}}
+                    {{#if learnerGroup.needsAccommodation}}
+                      <FaIcon
+                        @icon="universal-access"
+                        @title={{t "general.accommodationIsRequiredForLearnersInThisGroup"}}
+                      />
                     {{/if}}
-                  {{/unless}}
-                </li>
-              {{else}}
-                <li>
-                  <FaIcon @icon="users" />
-                </li>
-              {{/each}}
-            </ul>
+                    {{#unless learnerGroup.isTopLevelGroup}}
+                      {{#if
+                        (and
+                          (get this (concat "learnerGroupElement" learnerGroup.id))
+                          (includes learnerGroup.id this.hoveredGroups)
+                        )
+                      }}
+                        <IliosTooltip
+                          @target={{get this (concat "learnerGroupElement" learnerGroup.id)}}
+                        >
+                          <strong>
+                            {{if
+                              (eq learnerGroup.allParents.length 1)
+                              (t "general.parentGroup")
+                              (t "general.parentGroups")
+                            }}:
+                          </strong>
+                          {{join " » " (reverse (mapBy0 "title" learnerGroup.allParents))}}
+                        </IliosTooltip>
+                      {{/if}}
+                    {{/unless}}
+                  </li>
+                {{else}}
+                  <li>
+                    <FaIcon @icon="users" />
+                  </li>
+                {{/each}}
+              </ul>
+            </div>
           </div>
           <div class="offering-manager-location">
             <TruncateText @text={{@offering.room}} @length={{10}} data-test-location />
diff --git a/packages/ilios-common/addon/components/session-offerings.gjs b/packages/ilios-common/addon/components/session-offerings.gjs
index 7d40ca2b5a..a782a5b692 100644
--- a/packages/ilios-common/addon/components/session-offerings.gjs
+++ b/packages/ilios-common/addon/components/session-offerings.gjs
@@ -58,7 +58,7 @@ export default class SessionOfferingsComponent extends Component {
               {{t "general.dateTime"}}
             </div>
             <div>
-              {{t "general.groupName"}}
+              {{t "general.learnersAndLearnerGroups"}}
             </div>
             <div>
               {{t "general.location"}}
diff --git a/packages/ilios-common/app/styles/ilios-common/components/offering-manager.scss b/packages/ilios-common/app/styles/ilios-common/components/offering-manager.scss
index bbbbc275c2..2ea59e7e51 100644
--- a/packages/ilios-common/app/styles/ilios-common/components/offering-manager.scss
+++ b/packages/ilios-common/app/styles/ilios-common/components/offering-manager.scss
@@ -3,10 +3,14 @@
 .offering-manager {
   @include m.font-size("small");
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 2fr) 1fr;
   margin-bottom: 0.5rem;
   padding-bottom: 0.5rem;
 
+  .offering-manager-learners {
+    padding: 0 1rem 1rem 0;
+  }
+
   .offering-manager-learner-groups {
     ul {
       @include m.ilios-list-reset;
diff --git a/packages/ilios-common/app/styles/ilios-common/components/session-offerings-list.scss b/packages/ilios-common/app/styles/ilios-common/components/session-offerings-list.scss
index 845de4d3bc..b4b4f8877d 100644
--- a/packages/ilios-common/app/styles/ilios-common/components/session-offerings-list.scss
+++ b/packages/ilios-common/app/styles/ilios-common/components/session-offerings-list.scss
@@ -5,7 +5,7 @@
 
   .offering-block {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: 3fr repeat(3, 4fr) 2fr;
     margin-top: 1rem;
 
     .offering-form {
@@ -32,7 +32,7 @@
       border-bottom: 1px dotted var(--grey);
       display: grid;
       grid-column: 1 / -1;
-      grid-template-columns: repeat(5, 1fr);
+      grid-template-columns: 3fr repeat(3, 4fr) 2fr;
       margin-top: 1rem;
 
       .offering-block-time-time {
diff --git a/packages/ilios-common/app/styles/ilios-common/components/session-offerings.scss b/packages/ilios-common/app/styles/ilios-common/components/session-offerings.scss
index c1763a4fde..872084cf43 100644
--- a/packages/ilios-common/app/styles/ilios-common/components/session-offerings.scss
+++ b/packages/ilios-common/app/styles/ilios-common/components/session-offerings.scss
@@ -27,7 +27,7 @@
     background-color: var(--lightest-grey);
     display: grid;
     font-weight: 600;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: 3fr repeat(3, 4fr) 2fr;
 
     div {
       background-color: var(--blue);
diff --git a/packages/test-app/tests/integration/components/offering-manager-test.gjs b/packages/test-app/tests/integration/components/offering-manager-test.gjs
new file mode 100644
index 0000000000..1d120c2b28
--- /dev/null
+++ b/packages/test-app/tests/integration/components/offering-manager-test.gjs
@@ -0,0 +1,252 @@
+import { module, test } from 'qunit';
+import { setupAuthentication } from 'ilios-common';
+import { setupRenderingTest } from 'test-app/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { setupMirage } from 'test-app/tests/test-support/mirage';
+import { DateTime } from 'luxon';
+import { component } from 'ilios-common/page-objects/components/offering-manager';
+import noop from 'ilios-common/helpers/noop';
+import OfferingManager from 'ilios-common/components/offering-manager';
+
+module('Integration | Component | offering-manager', function (hooks) {
+  setupRenderingTest(hooks);
+  setupMirage(hooks);
+
+  test('it renders with individual learners and learner groups', async function (assert) {
+    this.school = this.server.create('school');
+    this.user = await setupAuthentication({ school: this.school }, true);
+    const users = this.server.createList('user', 4);
+    const today = DateTime.fromObject({ hour: 8 });
+    const course = this.server.create('course');
+    const sessionType = this.server.create('session-type');
+    const session = this.server.create('session', {
+      course,
+      sessionType,
+    });
+    const learnerGroup1 = this.server.create('learner-group');
+    const learnerGroup2 = this.server.create('learner-group');
+    const offering = this.server.create('offering', {
+      session,
+      startDate: today.toJSDate(),
+      endDate: today.plus({ hour: 1 }).toJSDate(),
+      room: 'room 123',
+      learners: [users[0], users[1]],
+      learnerGroups: [learnerGroup1, learnerGroup2],
+      instructors: [users[2], users[3]],
+      url: 'http://foo.com',
+    });
+
+    const offeringModel = await this.owner
+      .lookup('service:store')
+      .findRecord('offering', offering.id);
+    this.set('offering', offeringModel);
+
+    await render(
+      <template>
+        <OfferingManager @offering={{this.offering}} @remove={{(noop)}} @editable={{false}} />
+      </template>,
+    );
+
+    assert.notOk(component.learners.isHidden, 'list of individual learners is displayed');
+    assert.strictEqual(component.learnerGroups.length, 2, 'learner groups list has correct count');
+    assert.strictEqual(
+      component.learners.list,
+      '1 guy M. Mc1son, 2 guy M. Mc2son',
+      'list of learners correct',
+    );
+    assert.strictEqual(
+      component.learnerGroups[0].title,
+      'learner group 0',
+      'first learner group title is correct',
+    );
+    assert.strictEqual(
+      component.learnerGroups[1].title,
+      'learner group 1',
+      'second learner group title is correct',
+    );
+    assert.strictEqual(component.location, 'room 123', 'offering location is correct');
+    assert.ok(component.hasUrl, 'offering has url');
+    assert.strictEqual(component.url, 'http://foo.com/', 'url is correct');
+    assert.strictEqual(
+      component.instructors[0].userNameInfo.fullName,
+      '3 guy M. Mc3son',
+      'first instructor name is correct',
+    );
+    assert.strictEqual(
+      component.instructors[1].userNameInfo.fullName,
+      '4 guy M. Mc4son',
+      'second instructor name is correct',
+    );
+  });
+
+  test('it renders with only learner groups', async function (assert) {
+    this.school = this.server.create('school');
+    this.user = await setupAuthentication({ school: this.school }, true);
+    const users = this.server.createList('user', 2);
+    const today = DateTime.fromObject({ hour: 8 });
+    const course = this.server.create('course');
+    const sessionType = this.server.create('session-type');
+    const session = this.server.create('session', {
+      course,
+      sessionType,
+    });
+    const learnerGroup1 = this.server.create('learner-group');
+    const learnerGroup2 = this.server.create('learner-group');
+    const offering = this.server.create('offering', {
+      session,
+      startDate: today.toJSDate(),
+      endDate: today.plus({ hour: 1 }).toJSDate(),
+      room: 'room 123',
+      learnerGroups: [learnerGroup1, learnerGroup2],
+      instructors: [users[0], users[1]],
+      url: 'http://foo.com',
+    });
+
+    const offeringModel = await this.owner
+      .lookup('service:store')
+      .findRecord('offering', offering.id);
+    this.set('offering', offeringModel);
+
+    await render(
+      <template>
+        <OfferingManager @offering={{this.offering}} @remove={{(noop)}} @editable={{false}} />
+      </template>,
+    );
+
+    assert.ok(component.learners.isHidden, 'list of individual learners not displayed');
+    assert.strictEqual(component.learnerGroups.length, 2, 'learner groups list has correct count');
+    assert.strictEqual(
+      component.learnerGroups[0].title,
+      'learner group 0',
+      'first learner group title is correct',
+    );
+    assert.strictEqual(
+      component.learnerGroups[1].title,
+      'learner group 1',
+      'second learner group title is correct',
+    );
+    assert.strictEqual(component.location, 'room 123', 'offering location is correct');
+    assert.ok(component.hasUrl, 'offering has url');
+    assert.strictEqual(component.url, 'http://foo.com/', 'url is correct');
+    assert.strictEqual(
+      component.instructors[0].userNameInfo.fullName,
+      '1 guy M. Mc1son',
+      'first instructor name is correct',
+    );
+    assert.strictEqual(
+      component.instructors[1].userNameInfo.fullName,
+      '2 guy M. Mc2son',
+      'second instructor name is correct',
+    );
+  });
+
+  test('it renders with only individual learners', async function (assert) {
+    this.school = this.server.create('school');
+    this.user = await setupAuthentication({ school: this.school }, true);
+    const users = this.server.createList('user', 4);
+    const today = DateTime.fromObject({ hour: 8 });
+    const course = this.server.create('course');
+    const sessionType = this.server.create('session-type');
+    const session = this.server.create('session', {
+      course,
+      sessionType,
+    });
+    const offering = this.server.create('offering', {
+      session,
+      startDate: today.toJSDate(),
+      endDate: today.plus({ hour: 1 }).toJSDate(),
+      room: 'room 123',
+      learners: [users[0], users[1]],
+      instructors: [users[2], users[3]],
+      url: 'http://foo.com',
+    });
+
+    const offeringModel = await this.owner
+      .lookup('service:store')
+      .findRecord('offering', offering.id);
+    this.set('offering', offeringModel);
+
+    await render(
+      <template>
+        <OfferingManager @offering={{this.offering}} @remove={{(noop)}} @editable={{false}} />
+      </template>,
+    );
+
+    assert.notOk(component.learners.isHidden, 'list of individual learners is displayed');
+    assert.strictEqual(
+      component.learners.list,
+      '1 guy M. Mc1son, 2 guy M. Mc2son',
+      'list of learners correct',
+    );
+    assert.strictEqual(component.learnerGroups.length, 1, 'learner groups list has correct count');
+    assert.ok(
+      component.learnerGroups[0].displaysUsersIcon,
+      'learner groups list first and only item is fa-users icon',
+    );
+    assert.strictEqual(component.location, 'room 123', 'offering location is correct');
+    assert.ok(component.hasUrl, 'offering has url');
+    assert.strictEqual(component.url, 'http://foo.com/', 'url is correct');
+    assert.strictEqual(
+      component.instructors[0].userNameInfo.fullName,
+      '3 guy M. Mc3son',
+      'first instructor name is correct',
+    );
+    assert.strictEqual(
+      component.instructors[1].userNameInfo.fullName,
+      '4 guy M. Mc4son',
+      'second instructor name is correct',
+    );
+  });
+
+  test('it renders with no individual learners or learner groups', async function (assert) {
+    this.school = this.server.create('school');
+    this.user = await setupAuthentication({ school: this.school }, true);
+    const users = this.server.createList('user', 2);
+    const today = DateTime.fromObject({ hour: 8 });
+    const course = this.server.create('course');
+    const sessionType = this.server.create('session-type');
+    const session = this.server.create('session', {
+      course,
+      sessionType,
+    });
+    const offering = this.server.create('offering', {
+      session,
+      startDate: today.toJSDate(),
+      endDate: today.plus({ hour: 1 }).toJSDate(),
+      room: 'room 123',
+      instructors: [users[0], users[1]],
+      url: 'http://foo.com',
+    });
+
+    const offeringModel = await this.owner
+      .lookup('service:store')
+      .findRecord('offering', offering.id);
+    this.set('offering', offeringModel);
+
+    await render(
+      <template>
+        <OfferingManager @offering={{this.offering}} @remove={{(noop)}} @editable={{false}} />
+      </template>,
+    );
+
+    assert.ok(component.learners.isHidden, 'list of individual learners is not displayed');
+    assert.strictEqual(component.learnerGroups.length, 1, 'learner groups list has correct count');
+    assert.ok(
+      component.learnerGroups[0].displaysUsersIcon,
+      'learner groups list first and only item is fa-users icon',
+    );
+    assert.strictEqual(component.location, 'room 123', 'offering location is correct');
+    assert.ok(component.hasUrl, 'offering has url');
+    assert.strictEqual(component.url, 'http://foo.com/', 'url is correct');
+    assert.strictEqual(
+      component.instructors[0].userNameInfo.fullName,
+      '1 guy M. Mc1son',
+      'first instructor name is correct',
+    );
+    assert.strictEqual(
+      component.instructors[1].userNameInfo.fullName,
+      '2 guy M. Mc2son',
+      'second instructor name is correct',
+    );
+  });
+});