diff --git a/web/app/components/inputs/product-select.hbs b/web/app/components/inputs/product-select.hbs
index 0b2e35cae..42eac6126 100644
--- a/web/app/components/inputs/product-select.hbs
+++ b/web/app/components/inputs/product-select.hbs
@@ -1,83 +1,65 @@
 {{! https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ }}
-<div data-test-product-select>
-  {{#if this.products}}
-    {{#if @formatIsBadge}}
-      <Inputs::BadgeDropdownList
-        @items={{this.products}}
-        @listIsOrdered={{true}}
-        @onItemClick={{this.onChange}}
-        @selected={{@selected}}
-        @placement={{@placement}}
-        @isSaving={{@isSaving}}
-        @renderOut={{@renderOut}}
-        @secondaryFilterAttribute="abbreviation"
-        @icon={{this.icon}}
-        class="product-select-dropdown-list w-80"
-        ...attributes
-      >
-        <:item as |dd|>
-          <dd.Action data-test-product-select-badge-dropdown-item>
-            <Inputs::ProductSelect::Item
-              @product={{dd.value}}
-              @isSelected={{dd.isSelected}}
-            />
-          </dd.Action>
-        </:item>
-      </Inputs::BadgeDropdownList>
-    {{else}}
-      <X::DropdownList
-        @items={{this.products}}
-        @listIsOrdered={{true}}
-        @onItemClick={{this.onChange}}
-        @selected={{@selected}}
-        @placement={{@placement}}
-        @isSaving={{@isSaving}}
-        @renderOut={{@renderOut}}
-        @offset={{@offset}}
-        @matchAnchorWidth={{@matchAnchorWidth}}
-        @secondaryFilterAttribute="abbreviation"
-        class="product-select-dropdown-list"
-        ...attributes
-      >
-        <:anchor as |dd|>
-          <dd.ToggleSelect class="gap-2" id="product-select">
-            <Inputs::ProductSelect::Item
-              @product={{dd.selected}}
-              @abbreviation={{this.selectedProductAbbreviation}}
-            />
-          </dd.ToggleSelect>
-        </:anchor>
-        <:item as |dd|>
-          <dd.Action data-test-product-select-item-button class="pr-5">
-            <Inputs::ProductSelect::Item
-              @product={{dd.value}}
-              @isSelected={{dd.isSelected}}
-              @abbreviation={{dd.attrs.abbreviation}}
-            />
-          </dd.Action>
-        </:item>
-      </X::DropdownList>
-    {{/if}}
-  {{else if this.fetchProductAreas.isRunning}}
-    <div class="flex h-6 items-center" I>
-      <FlightIcon data-test-product-select-spinner @name="loading" />
-    </div>
-  {{else if this.errorIsShown}}
-    <div class="failed-to-load-text">
-      Failed to load
-    </div>
-    <Hds::Button
-      data-test-product-select-failed-to-load-button
-      @color="secondary"
-      @size="small"
-      {{on "click" (perform this.fetchProductAreas)}}
-      @text="Retry"
-      @icon="reload"
-    />
+<div
+  data-test-product-select
+  {{! Fetch the most up-to-date product areas in the background }}
+  {{did-insert (perform this.productAreas.fetch)}}
+>
+  {{#if @formatIsBadge}}
+    <Inputs::BadgeDropdownList
+      @items={{this.products}}
+      @listIsOrdered={{true}}
+      @onItemClick={{this.onChange}}
+      @selected={{@selected}}
+      @placement={{@placement}}
+      @isSaving={{@isSaving}}
+      @renderOut={{@renderOut}}
+      @secondaryFilterAttribute="abbreviation"
+      @icon={{this.icon}}
+      class="product-select-dropdown-list w-80"
+      ...attributes
+    >
+      <:item as |dd|>
+        <dd.Action data-test-product-select-badge-dropdown-item>
+          <Inputs::ProductSelect::Item
+            @product={{dd.value}}
+            @isSelected={{dd.isSelected}}
+            @abbreviation={{dd.attrs.abbreviation}}
+          />
+        </dd.Action>
+      </:item>
+    </Inputs::BadgeDropdownList>
   {{else}}
-    <div
-      class="absolute top-0 left-0"
-      {{did-insert (perform this.fetchProductAreas)}}
-    ></div>
+    <X::DropdownList
+      @items={{this.products}}
+      @listIsOrdered={{true}}
+      @onItemClick={{this.onChange}}
+      @selected={{@selected}}
+      @placement={{@placement}}
+      @isSaving={{@isSaving}}
+      @renderOut={{@renderOut}}
+      @offset={{@offset}}
+      @matchAnchorWidth={{@matchAnchorWidth}}
+      @secondaryFilterAttribute="abbreviation"
+      class="product-select-dropdown-list"
+      ...attributes
+    >
+      <:anchor as |dd|>
+        <dd.ToggleSelect class="gap-2" id="product-select">
+          <Inputs::ProductSelect::Item
+            @product={{dd.selected}}
+            @abbreviation={{this.selectedProductAbbreviation}}
+          />
+        </dd.ToggleSelect>
+      </:anchor>
+      <:item as |dd|>
+        <dd.Action data-test-product-select-item-button class="pr-5">
+          <Inputs::ProductSelect::Item
+            @product={{dd.value}}
+            @isSelected={{dd.isSelected}}
+            @abbreviation={{dd.attrs.abbreviation}}
+          />
+        </dd.Action>
+      </:item>
+    </X::DropdownList>
   {{/if}}
 </div>
diff --git a/web/app/components/inputs/product-select.ts b/web/app/components/inputs/product-select.ts
index 26b5e8b94..8dc039ecb 100644
--- a/web/app/components/inputs/product-select.ts
+++ b/web/app/components/inputs/product-select.ts
@@ -4,7 +4,6 @@ import { inject as service } from "@ember/service";
 import { OffsetOptions, Placement } from "@floating-ui/dom";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { task } from "ember-concurrency";
 import FetchService from "hermes/services/fetch";
 import ProductAreasService, {
   ProductArea,
@@ -31,7 +30,6 @@ export default class InputsProductSelectComponent extends Component<InputsProduc
   @service declare productAreas: ProductAreasService;
 
   @tracked selected = this.args.selected;
-  @tracked protected errorIsShown = false;
 
   get products() {
     return this.productAreas.index;
@@ -46,27 +44,13 @@ export default class InputsProductSelectComponent extends Component<InputsProduc
   }
 
   get selectedProductAbbreviation(): string | undefined {
-    if (!this.selected) {
-      return;
-    }
-    const selectedProduct = this.products?.[this.selected];
-    assert("selected product must exist", selectedProduct);
-    return selectedProduct.abbreviation;
+    return this.productAreas.getAbbreviation(this.selected);
   }
 
   @action onChange(newValue: any, attributes: ProductArea) {
     this.selected = newValue;
     this.args.onChange(newValue, attributes);
   }
-
-  protected fetchProductAreas = task(async () => {
-    try {
-      await this.productAreas.fetch.perform();
-      this.errorIsShown = false;
-    } catch {
-      this.errorIsShown = true;
-    }
-  });
 }
 
 declare module "@glint/environment-ember-loose/registry" {
diff --git a/web/app/components/inputs/product-select/item.hbs b/web/app/components/inputs/product-select/item.hbs
index 220738e38..39400c8bb 100644
--- a/web/app/components/inputs/product-select/item.hbs
+++ b/web/app/components/inputs/product-select/item.hbs
@@ -1,6 +1,6 @@
 <div
   data-test-product-select-item
-  class="product-select-item relative flex w-full gap-2"
+  class="relative flex w-full gap-2"
   ...attributes
 >
   <FlightIcon
@@ -19,8 +19,8 @@
       <EmptyStateText data-test-empty-state @value="Select a product/area" />
     {{/if}}
 
-    {{#if @abbreviation}}
-      <span class="product-select-toggle-abbreviation">
+    {{#if this.abbreviationIsShown}}
+      <span data-test-product-select-item-abbreviation>
         {{@abbreviation}}
       </span>
     {{/if}}
diff --git a/web/app/components/inputs/product-select/item.ts b/web/app/components/inputs/product-select/item.ts
index ccb127b39..e7abb4a54 100644
--- a/web/app/components/inputs/product-select/item.ts
+++ b/web/app/components/inputs/product-select/item.ts
@@ -9,7 +9,15 @@ interface InputsProductSelectItemComponentSignature {
   };
 }
 
-export default class InputsProductSelectItemComponent extends Component<InputsProductSelectItemComponentSignature> {}
+export default class InputsProductSelectItemComponent extends Component<InputsProductSelectItemComponentSignature> {
+  protected get abbreviationIsShown(): boolean {
+    const { abbreviation, product } = this.args;
+    if (abbreviation && abbreviation !== product) {
+      return true;
+    }
+    return false;
+  }
+}
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {
diff --git a/web/app/components/settings/subscription-list-item.hbs b/web/app/components/settings/subscription-list-item.hbs
index 119cfca8f..e696fb1a8 100644
--- a/web/app/components/settings/subscription-list-item.hbs
+++ b/web/app/components/settings/subscription-list-item.hbs
@@ -1,11 +1,10 @@
-{{! @glint-nocheck: not typesafe yet }}
 <li class="subscription-list-item">
   <button
-    class="text-body-300 text-color-foreground-primary flex items-center space-x-6 hover:cursor-pointer bg-transparent hover:bg-color-surface-action border-0 w-full h-full justify-between py-3 px-3.5 transition-colors"
+    class="flex h-full w-full items-center justify-between space-x-6 border-0 bg-transparent py-3 px-3.5 text-body-300 text-color-foreground-primary transition-colors hover:cursor-pointer hover:bg-color-surface-action"
     type="button"
     {{on "click" this.toggleChecked}}
   >
-    <div class="flex space-x-3 items-center">
+    <div class="flex items-center space-x-3">
       {{#let (get-product-id @productArea) as |productID|}}
         <Hds::IconTile
           @size="small"
@@ -17,7 +16,7 @@
         {{@productArea}}
       </div>
     </div>
-    <div class="shrink-0 flex items-center justify-end relative">
+    <div class="relative flex shrink-0 items-center justify-end">
       <Hds::Form::Toggle::Base
         tabindex="-1"
         name="toggle-subscription"
diff --git a/web/app/components/settings/subscription-list-item.ts b/web/app/components/settings/subscription-list-item.ts
index ee786a6ec..5030de386 100644
--- a/web/app/components/settings/subscription-list-item.ts
+++ b/web/app/components/settings/subscription-list-item.ts
@@ -27,10 +27,10 @@ export default class SettingsSubscriptionListItemComponent extends Component<Set
   protected get isChecked(): boolean {
     assert(
       "isChecked expects a subscriptions list",
-      this.authenticatedUser.subscriptions
+      this.authenticatedUser.subscriptions,
     );
     return this.authenticatedUser.subscriptions.some(
-      (subscription) => subscription.productArea === this.args.productArea
+      (subscription) => subscription.productArea === this.args.productArea,
     );
   }
 
@@ -41,11 +41,11 @@ export default class SettingsSubscriptionListItemComponent extends Component<Set
   @action protected toggleChecked(): void {
     if (this.isChecked) {
       void this.authenticatedUser.removeSubscription.perform(
-        this.args.productArea
+        this.args.productArea,
       );
     } else {
       void this.authenticatedUser.addSubscription.perform(
-        this.args.productArea
+        this.args.productArea,
       );
     }
     void this.temporarilyShowConfirmation.perform();
@@ -67,3 +67,9 @@ export default class SettingsSubscriptionListItemComponent extends Component<Set
     this.confirmationIsClosing = false;
   });
 }
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Settings::SubscriptionListItem": typeof SettingsSubscriptionListItemComponent;
+  }
+}
diff --git a/web/app/components/settings/subscription-list.hbs b/web/app/components/settings/subscription-list.hbs
index 0dc386db2..f737a3ccc 100644
--- a/web/app/components/settings/subscription-list.hbs
+++ b/web/app/components/settings/subscription-list.hbs
@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 <Hds::Form::TextInput::Field
   data-test-subscription-list-filter-input
   @type="search"
@@ -9,6 +8,8 @@
 />
 <ol
   data-test-subscription-list
+  {{! Fetch the most up-to-date product areas in the background }}
+  {{did-insert (perform this.productAreas.fetch)}}
   class="mt-5 w-full divide-y divide-color-border-primary"
 >
   {{#each this.shownItems as |listItem|}}
diff --git a/web/app/components/settings/subscription-list.ts b/web/app/components/settings/subscription-list.ts
index 0e3d90b6e..e915f2c01 100644
--- a/web/app/components/settings/subscription-list.ts
+++ b/web/app/components/settings/subscription-list.ts
@@ -1,6 +1,8 @@
 import Component from "@glimmer/component";
-import { restartableTask, task } from "ember-concurrency";
+import { restartableTask } from "ember-concurrency";
 import { tracked } from "@glimmer/tracking";
+import { inject as service } from "@ember/service";
+import ProductAreasService from "hermes/services/product-areas";
 
 interface SettingsSubscriptionListComponentSignature {
   Args: {
@@ -9,6 +11,8 @@ interface SettingsSubscriptionListComponentSignature {
 }
 
 export default class SettingsSubscriptionListComponent extends Component<SettingsSubscriptionListComponentSignature> {
+  @service declare productAreas: ProductAreasService;
+
   /**
    * The list of product areas to show. Updated by the `onInput` task.
    */
@@ -22,10 +26,16 @@ export default class SettingsSubscriptionListComponent extends Component<Setting
     let input = event.target.value;
     if (input.length > 0) {
       this.shownItems = this.args.allProductAreas.filter((item) =>
-        item.toLowerCase().includes(input.toLowerCase())
+        item.toLowerCase().includes(input.toLowerCase()),
       );
     } else {
       this.shownItems = this.args.allProductAreas;
     }
   });
 }
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "Settings::SubscriptionList": typeof SettingsSubscriptionListComponent;
+  }
+}
diff --git a/web/app/routes/authenticated.ts b/web/app/routes/authenticated.ts
index 15b204d39..00c9f9bec 100644
--- a/web/app/routes/authenticated.ts
+++ b/web/app/routes/authenticated.ts
@@ -2,12 +2,14 @@ import Route from "@ember/routing/route";
 import { inject as service } from "@ember/service";
 import AuthenticatedUserService from "hermes/services/authenticated-user";
 import ConfigService from "hermes/services/config";
+import ProductAreasService from "hermes/services/product-areas";
 import SessionService from "hermes/services/session";
 
 export default class AuthenticatedRoute extends Route {
   @service("config") declare configSvc: ConfigService;
   @service declare session: SessionService;
   @service declare authenticatedUser: AuthenticatedUserService;
+  @service declare productAreas: ProductAreasService;
 
   beforeModel(transition: any) {
     /**
@@ -27,7 +29,18 @@ export default class AuthenticatedRoute extends Route {
      * application error method which invalidates the session
      * and redirects to the auth screen.
      */
-    await this.authenticatedUser.loadInfo.perform();
+    const loadInfoPromise = this.authenticatedUser.loadInfo.perform();
+
+    /**
+     * Fetch the product areas for the ProductAvatar and
+     * ProductSelect components.
+     */
+    const loadProductAreasPromise = this.productAreas.fetch.perform();
+
+    /**
+     * Wait for both promises to resolve.
+     */
+    await Promise.all([loadInfoPromise, loadProductAreasPromise]);
 
     /**
      * Kick off the task to poll for expired auth.
diff --git a/web/app/routes/authenticated/new/doc.ts b/web/app/routes/authenticated/new/doc.ts
index 13929e40c..1189209d0 100644
--- a/web/app/routes/authenticated/new/doc.ts
+++ b/web/app/routes/authenticated/new/doc.ts
@@ -15,11 +15,7 @@ export default class AuthenticatedNewDocRoute extends Route {
     },
   };
 
-  async model(params: AuthenticatedNewDocRouteParams) {
-    if (!this.productAreas.index) {
-      await this.productAreas.fetch.perform();
-    }
-
+  model(params: AuthenticatedNewDocRouteParams) {
     return params.docType;
   }
 }
diff --git a/web/app/routes/authenticated/settings.ts b/web/app/routes/authenticated/settings.ts
index b974870ad..e38997149 100644
--- a/web/app/routes/authenticated/settings.ts
+++ b/web/app/routes/authenticated/settings.ts
@@ -1,32 +1,18 @@
 import Route from "@ember/routing/route";
 import { inject as service } from "@ember/service";
-import ConfigService from "hermes/services/config";
-import AlgoliaService from "hermes/services/algolia";
-import FetchService from "hermes/services/fetch";
 import AuthenticatedUserService from "hermes/services/authenticated-user";
-import { assert } from "@ember/debug";
+import ProductAreasService from "hermes/services/product-areas";
 
 export default class SettingsRoute extends Route {
-  @service("config") declare configSvc: ConfigService;
-  @service("fetch") declare fetchSvc: FetchService;
-  @service declare algolia: AlgoliaService;
   @service declare authenticatedUser: AuthenticatedUserService;
+  @service declare productAreas: ProductAreasService;
 
   async model(): Promise<string[]> {
-    const allProducts = await this.fetchSvc
-      .fetch(`/api/${this.configSvc.config.api_version}/products`)
-      .then((resp) => {
-        return resp?.json();
-      })
-      .catch((err) => {
-        console.log(`Error requesting products: ${err}`);
-      });
-
     /**
      * Make sure the user's subscriptions are loaded before rendering the page.
      */
     await this.authenticatedUser.fetchSubscriptions.perform();
 
-    return Object.keys(allProducts).sort();
+    return Object.keys(this.productAreas.index).sort();
   }
 }
diff --git a/web/app/services/product-areas.ts b/web/app/services/product-areas.ts
index 7dc3e3490..9fa88d702 100644
--- a/web/app/services/product-areas.ts
+++ b/web/app/services/product-areas.ts
@@ -3,6 +3,7 @@ import { tracked } from "@glimmer/tracking";
 import { task } from "ember-concurrency";
 import ConfigService from "hermes/services/config";
 import FetchService from "./fetch";
+import { assert } from "@ember/debug";
 
 export type ProductArea = {
   abbreviation: string;
@@ -12,15 +13,47 @@ export default class ProductAreasService extends Service {
   @service("config") declare configSvc: ConfigService;
   @service("fetch") declare fetchSvc: FetchService;
 
-  @tracked index: Record<string, ProductArea> | null = null;
+  @tracked _index: Record<string, ProductArea> | null = null;
 
+  /**
+   * An asserted-true reference to the `_index` property.
+   */
+  get index(): Record<string, ProductArea> {
+    assert("_index must exist", this._index);
+    return this._index;
+  }
+
+  /**
+   * A helper function to get the abbreviation for a product.
+   * Used wherever the abbreviation is needed, e.g.,
+   * the ProductSelect component.
+   */
+  getAbbreviation(productName?: string): string | undefined {
+    if (!productName) {
+      return;
+    }
+
+    const product = this.index[productName];
+
+    if (!product) {
+      return;
+    }
+
+    return product.abbreviation;
+  }
+
+  /**
+   * The fetch request to the `/products` endpoint.
+   * Called on login by the `/authenticated` route.
+   * Stores the response in the `_index` property.
+   */
   fetch = task(async () => {
     try {
-      this.index = await this.fetchSvc
+      this._index = await this.fetchSvc
         .fetch(`/api/${this.configSvc.config.api_version}/products`)
         .then((resp) => resp?.json());
     } catch (err) {
-      this.index = null;
+      this._index = null;
       throw err;
     }
   });
diff --git a/web/mirage/helpers.ts b/web/mirage/helpers.ts
index 9d5e2f260..fa5dac60e 100644
--- a/web/mirage/helpers.ts
+++ b/web/mirage/helpers.ts
@@ -1,6 +1,5 @@
 import { assert } from "@ember/debug";
 import { Server } from "miragejs";
-
 /**
  * Provides access to the Mirage server outside of test contexts (e.g. in a Factory).
  * If you are in a test, use MirageTestContext instead.
diff --git a/web/tests/acceptance/authenticated-test.ts b/web/tests/acceptance/authenticated-test.ts
new file mode 100644
index 000000000..fd6418d40
--- /dev/null
+++ b/web/tests/acceptance/authenticated-test.ts
@@ -0,0 +1,67 @@
+import { currentURL, visit } from "@ember/test-helpers";
+import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
+import { setupApplicationTest } from "ember-qunit";
+import {
+  authenticateSession,
+  invalidateSession,
+} from "ember-simple-auth/test-support";
+import SessionService from "hermes/services/_session";
+import ProductAreasService, {
+  ProductArea,
+} from "hermes/services/product-areas";
+import { module, test } from "qunit";
+import { startFactories } from "../mirage-helpers/utils";
+
+interface AuthenticatedRouteTestContext extends MirageTestContext {}
+
+module("Acceptance | authenticated", function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(async function (this: AuthenticatedRouteTestContext) {
+    await authenticateSession({});
+    startFactories(this);
+  });
+
+  test("it redirects to the auth route if the session is not authenticated", async function (this: AuthenticatedRouteTestContext, assert) {
+    await invalidateSession();
+    await visit("/");
+
+    assert.equal(currentURL(), "/authenticate");
+  });
+
+  test("after login, it redirects to the dashboard", async function (this: AuthenticatedRouteTestContext, assert) {
+    await visit("/");
+    assert.equal(currentURL(), "/dashboard");
+  });
+
+  test("after login, it fetches the product areas", async function (this: AuthenticatedRouteTestContext, assert) {
+    this.server.db.emptyData();
+
+    this.server.create("product", {
+      name: "Foo",
+      abbreviation: "BAR",
+    });
+
+    const productAreas = this.owner.lookup(
+      "service:product-areas",
+    ) as ProductAreasService;
+
+    assert.equal(productAreas._index, null);
+
+    await visit("/");
+
+    assert.equal("Foo", Object.keys(productAreas.index)[0]);
+    assert.equal("BAR", productAreas.index["Foo"]?.abbreviation);
+  });
+
+  test("after login, it kicks off a task to poll for expired auth", async function (this: AuthenticatedRouteTestContext, assert) {
+    const session = this.owner.lookup("service:session") as SessionService;
+
+    assert.true(session.pollForExpiredAuth.isIdle);
+
+    await visit("/");
+
+    assert.true(session.pollForExpiredAuth.isRunning);
+  });
+});
diff --git a/web/tests/acceptance/authenticated/document-test.ts b/web/tests/acceptance/authenticated/document-test.ts
index 2bf493186..8e594a7c8 100644
--- a/web/tests/acceptance/authenticated/document-test.ts
+++ b/web/tests/acceptance/authenticated/document-test.ts
@@ -151,10 +151,9 @@ module("Acceptance | authenticated/document", function (hooks) {
       "Test Product 1",
       "Test Product 2",
     ];
-
     options.forEach((option: Element, index: number) => {
       assert.equal(
-        option.textContent?.trim(),
+        option.querySelector("span")?.textContent?.trim(),
         expectedProducts[index],
         "the product list item is correct",
       );
diff --git a/web/tests/integration/components/inputs/product-select-test.ts b/web/tests/integration/components/inputs/product-select-test.ts
index 47c72df04..551ae622f 100644
--- a/web/tests/integration/components/inputs/product-select-test.ts
+++ b/web/tests/integration/components/inputs/product-select-test.ts
@@ -8,6 +8,7 @@ import { Placement } from "@floating-ui/dom";
 import { Response } from "miragejs";
 import { assert as emberAssert } from "@ember/debug";
 import htmlElement from "hermes/utils/html-element";
+import { setupProductIndex } from "hermes/tests/mirage-helpers/utils";
 
 const TOGGLE = "[data-test-x-dropdown-list-toggle-select]";
 const POPOVER = "[data-test-x-dropdown-list-content]";
@@ -37,6 +38,8 @@ module("Integration | Component | inputs/product-select", function (hooks) {
     this.set("onChange", (value: string) => {
       this.set("selected", value);
     });
+
+    await setupProductIndex(this);
   });
 
   test("it can render in two formats", async function (this: InputsProductSelectContext, assert) {
@@ -80,24 +83,6 @@ module("Integration | Component | inputs/product-select", function (hooks) {
     assert.dom(DROPDOWN_PRODUCT).hasText("Test Product 0 TP0");
   });
 
-  test("it fetches the products if they aren't already loaded", async function (this: InputsProductSelectContext, assert) {
-    this.server.db.emptyData();
-
-    await render<InputsProductSelectContext>(hbs`
-      <Inputs::ProductSelect
-        data-test-content
-        @onChange={{this.onChange}}
-      />
-    `);
-
-    await click(TOGGLE);
-
-    // In Mirage, we return a default product when there are no products in the database.
-    // This simulates the `fetchProducts` task being run.
-    assert.dom(DROPDOWN_PRODUCT).exists({ count: 1 });
-    assert.dom(DROPDOWN_PRODUCT).hasText("Default Fetched Product NONE");
-  });
-
   test("it performs the passed-in action on click", async function (this: InputsProductSelectContext, assert) {
     let count = 0;
     this.set("onChange", () => {
@@ -117,24 +102,6 @@ module("Integration | Component | inputs/product-select", function (hooks) {
     assert.equal(count, 1, "the action was called once");
   });
 
-  test("it shows an error when the index fails to fetch", async function (this: InputsProductSelectContext, assert) {
-    this.server.get("/products", () => {
-      return new Response(500, {});
-    });
-
-    await render<InputsProductSelectContext>(hbs`
-      <Inputs::ProductSelect
-        @selected={{this.selected}}
-        @onChange={{this.onChange}}
-      />
-    `);
-
-    assert.dom(".failed-to-load-text").hasText("Failed to load");
-    assert
-      .dom("[data-test-product-select-failed-to-load-button]")
-      .hasText("Retry");
-  });
-
   test("the standard select can match the anchor width", async function (this: InputsProductSelectContext, assert) {
     await render<InputsProductSelectContext>(hbs`
       <div style="width:800px;">
diff --git a/web/tests/integration/components/inputs/product-select/item-test.ts b/web/tests/integration/components/inputs/product-select/item-test.ts
index 661f5cc2e..8e45118b7 100644
--- a/web/tests/integration/components/inputs/product-select/item-test.ts
+++ b/web/tests/integration/components/inputs/product-select/item-test.ts
@@ -13,7 +13,7 @@ const CHECK = "[data-test-check]";
 interface InputsProductSelectItemContext extends MirageTestContext {
   product: string;
   isSelected?: boolean;
-  abbreviation?: boolean;
+  abbreviation?: string;
 }
 
 module(
@@ -64,5 +64,23 @@ module(
 
       assert.dom("[data-test-empty-state]").hasText("Select a product/area");
     });
+
+    test("it shows an abbreviation when one exists, unless its the same as the product name", async function (this: InputsProductSelectItemContext, assert) {
+      this.set("product", "Vault");
+      this.set("abbreviation", "VLT");
+
+      await render<InputsProductSelectItemContext>(hbs`
+        <Inputs::ProductSelect::Item
+          @product={{this.product}}
+          @abbreviation={{this.abbreviation}}
+        />
+      `);
+
+      assert.dom(ABBREVIATION).hasText("VLT");
+
+      this.set("abbreviation", "Vault");
+
+      assert.dom(ABBREVIATION).doesNotExist();
+    });
   },
 );
diff --git a/web/tests/mirage-helpers/utils.ts b/web/tests/mirage-helpers/utils.ts
new file mode 100644
index 000000000..cd117ab25
--- /dev/null
+++ b/web/tests/mirage-helpers/utils.ts
@@ -0,0 +1,14 @@
+import { MirageTestContext } from "ember-cli-mirage/test-support";
+import ProductAreasService from "hermes/services/product-areas";
+
+export function startFactories(mirage: MirageTestContext) {
+  mirage.server.create("product");
+}
+
+export const setupProductIndex = async (mirage: MirageTestContext) => {
+  const productAreas = mirage.owner.lookup(
+    "service:product-areas",
+  ) as ProductAreasService;
+
+  await productAreas.fetch.perform();
+};
diff --git a/web/tests/unit/services/product-areas-test.ts b/web/tests/unit/services/product-areas-test.ts
index a9a060084..423681bd5 100644
--- a/web/tests/unit/services/product-areas-test.ts
+++ b/web/tests/unit/services/product-areas-test.ts
@@ -1,37 +1,58 @@
-import { module, test, todo } from "qunit";
+import { module, test } from "qunit";
 import { setupTest } from "ember-qunit";
 import ProductAreasService from "hermes/services/product-areas";
 import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
 import { authenticateSession } from "ember-simple-auth/test-support";
 
+interface ProductAreasServiceTestContext extends MirageTestContext {
+  productAreas: ProductAreasService;
+}
+
 module("Unit | Service | product-areas", function (hooks) {
   setupTest(hooks);
   setupMirage(hooks);
 
   hooks.beforeEach(function () {
     authenticateSession({});
-  });
-
-  test("can set or close an active modal", async function (this: MirageTestContext, assert) {
     const productAreas = this.owner.lookup(
-      "service:product-areas"
+      "service:product-areas",
     ) as ProductAreasService;
 
+    this.set("productAreas", productAreas);
+  });
+
+  test("it fetches product areas from the back end", async function (this: ProductAreasServiceTestContext, assert) {
+    const key = "Labs";
+    const abbreviation = "LABS";
+
     this.server.create("product", {
-      name: "Labs",
-      abbreviation: "LABS",
+      name: key,
+      abbreviation,
     });
 
-    const expectedResponse = {
-      Labs: {
-        abbreviation: "LABS",
-      },
-    };
+    await this.productAreas.fetch.perform();
 
-    assert.equal(productAreas.index, null);
+    assert.equal(Object.keys(this.productAreas.index)[0], key);
+
+    assert.equal(
+      Object.values(this.productAreas.index)[0]?.abbreviation,
+      abbreviation,
+    );
+  });
+
+  test("it returns a product abbreviation if it exists", async function (this: ProductAreasServiceTestContext, assert) {
+    const key = "Labs";
+    const abbreviation = "LABS";
+
+    this.server.create("product", {
+      name: key,
+      abbreviation,
+    });
 
-    await productAreas.fetch.perform();
+    await this.productAreas.fetch.perform();
 
-    assert.deepEqual(productAreas.index, expectedResponse);
+    assert.equal(this.productAreas.getAbbreviation(key), abbreviation);
+    assert.equal(this.productAreas.getAbbreviation("foo"), undefined);
+    assert.equal(this.productAreas.getAbbreviation(), undefined);
   });
 });