diff --git a/packages/boxel-ui/addon/package.json b/packages/boxel-ui/addon/package.json
index 7db6a5a4e8..80f9fc5929 100644
--- a/packages/boxel-ui/addon/package.json
+++ b/packages/boxel-ui/addon/package.json
@@ -40,7 +40,6 @@
     "@embroider/addon-shim": "^1.8.9",
     "@floating-ui/dom": "^1.6.3",
     "@glint/template": "1.3.0",
-    "@types/pluralize": "^0.0.30",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.7",
     "ember-basic-dropdown": "^8.0.0",
@@ -75,6 +74,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@tsconfig/ember": "3.0.1",
     "@types/lodash": "^4.14.182",
+    "@types/pluralize": "^0.0.30",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "babel-plugin-ember-template-compilation": "^2.2.1",
diff --git a/packages/boxel-ui/addon/src/components.ts b/packages/boxel-ui/addon/src/components.ts
index 572bb27dec..234ed6e9a0 100644
--- a/packages/boxel-ui/addon/src/components.ts
+++ b/packages/boxel-ui/addon/src/components.ts
@@ -33,6 +33,9 @@ import Menu from './components/menu/index.gts';
 import BoxelMessage from './components/message/index.gts';
 import Message from './components/message/index.gts';
 import Modal from './components/modal/index.gts';
+import BoxelMultiSelect, {
+  BoxelMultiSelectBasic,
+} from './components/multi-select/index.gts';
 import Pill from './components/pill/index.gts';
 import ProgressBar from './components/progress-bar/index.gts';
 import RadioInput from './components/radio-input/index.gts';
@@ -61,6 +64,8 @@ export {
   BoxelInputValidationState,
   BoxelInputValidationStates,
   BoxelMessage,
+  BoxelMultiSelect,
+  BoxelMultiSelectBasic,
   BoxelSelect,
   Button,
   CardContainer,
diff --git a/packages/boxel-ui/addon/src/components/multi-select/index.gts b/packages/boxel-ui/addon/src/components/multi-select/index.gts
index ba8290f9c7..526a916274 100644
--- a/packages/boxel-ui/addon/src/components/multi-select/index.gts
+++ b/packages/boxel-ui/addon/src/components/multi-select/index.gts
@@ -1,6 +1,9 @@
 import Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';
-import type { PowerSelectArgs } from 'ember-power-select/components/power-select';
+import type {
+  PowerSelectArgs,
+  Select,
+} from 'ember-power-select/components/power-select';
 import BeforeOptions from 'ember-power-select/components/power-select/before-options';
 import PowerSelectMultiple from 'ember-power-select/components/power-select-multiple';
 
@@ -8,10 +11,24 @@ import { BoxelAfterOptionsComponent } from './after-options.gts';
 import BoxelSelectedItem, {
   type SelectedItemSignature,
 } from './selected-item.gts';
-import BoxelTrigger, { type TriggerComponentSignature } from './trigger.gts';
+import BoxelMultiSelectDefaultTrigger, {
+  type TriggerComponentSignature,
+} from './trigger.gts';
 
 export interface BoxelMultiSelectArgs<ItemT> extends PowerSelectArgs {
+  ariaLabel?: string;
+  closeOnSelect?: boolean;
+  disabled?: boolean;
+  extra?: any;
+  matchTriggerWidth?: boolean;
+  onBlur?: (select: Select, e: Event) => boolean | undefined;
+  onClose?: (select: Select, e: Event) => boolean | undefined;
+  onOpen?: (select: Select, e: Event) => boolean | undefined;
   options: ItemT[];
+  placeholder?: string;
+  renderInPlace?: boolean;
+  searchEnabled?: boolean;
+  searchField?: string;
   selected: ItemT[];
   selectedItemComponent?: ComponentLike<SelectedItemSignature<ItemT>>;
   triggerComponent?: ComponentLike<TriggerComponentSignature<ItemT>>;
@@ -37,37 +54,40 @@ export interface Signature<ItemT> {
 
 export class BoxelMultiSelectBasic<ItemT> extends Component<Signature<ItemT>> {
   <template>
-    <div class='boxel-multi-select__wrapper'>
-      <PowerSelectMultiple
-        {{! required args }}
-        @options={{@options}}
-        @selected={{@selected}}
-        @onChange={{@onChange}}
-        {{! basic options }}
-        @placeholder={{@placeholder}}
-        @disabled={{@disabled}}
-        @renderInPlace={{@renderInPlace}}
-        @matchTriggerWidth={{@matchTriggerWidth}}
-        @searchField={{@searchField}}
-        @searchEnabled={{@searchEnabled}}
-        @closeOnSelect={{@closeOnSelect}}
-        @eventType={{@eventType}}
-        @ariaLabel={{@ariaLabel}}
-        @dropdownClass={{'boxel-multi-select__dropdown'}}
-        {{! actions  }}
-        @onOpen={{@onOpen}}
-        @onBlur={{@onBlur}}
-        {{! custom components }}
-        @selectedItemComponent={{@selectedItemComponent}}
-        @triggerComponent={{@triggerComponent}}
-        @afterOptionsComponent={{@afterOptionsComponent}}
-        @beforeOptionsComponent={{@beforeOptionsComponent}}
-        ...attributes
-        as |option|
-      >
-        {{yield option}}
-      </PowerSelectMultiple>
-    </div>
+    <PowerSelectMultiple
+      class='boxel-multi-select'
+      {{! required args }}
+      @options={{@options}}
+      @selected={{@selected}}
+      @onChange={{@onChange}}
+      {{! basic options }}
+      @placeholder={{@placeholder}}
+      @disabled={{@disabled}}
+      @renderInPlace={{@renderInPlace}}
+      @matchTriggerWidth={{@matchTriggerWidth}}
+      @searchField={{@searchField}}
+      @searchEnabled={{@searchEnabled}}
+      @closeOnSelect={{@closeOnSelect}}
+      @eventType={{@eventType}}
+      @ariaLabel={{@ariaLabel}}
+      @registerAPI={{@registerAPI}}
+      @initiallyOpened={{@initiallyOpened}}
+      @extra={{@extra}}
+      @dropdownClass={{'boxel-multi-select__dropdown'}}
+      {{! actions  }}
+      @onOpen={{@onOpen}}
+      @onClose={{@onClose}}
+      @onBlur={{@onBlur}}
+      {{! custom components }}
+      @selectedItemComponent={{@selectedItemComponent}}
+      @triggerComponent={{@triggerComponent}}
+      @afterOptionsComponent={{@afterOptionsComponent}}
+      @beforeOptionsComponent={{@beforeOptionsComponent}}
+      ...attributes
+      as |option|
+    >
+      {{yield option}}
+    </PowerSelectMultiple>
     {{! template-lint-disable require-scoped-style }}
     <style>
       .boxel-multi-select__dropdown {
@@ -109,7 +129,7 @@ export class BoxelMultiSelectBasic<ItemT> extends Component<Signature<ItemT>> {
       }
     </style>
     <style scoped>
-      .boxel-multi-select__wrapper {
+      .boxel-multi-select {
         position: relative;
         display: flex;
         align-items: stretch;
@@ -118,22 +138,6 @@ export class BoxelMultiSelectBasic<ItemT> extends Component<Signature<ItemT>> {
         border: 1px solid var(--boxel-border-color);
         border-radius: var(--boxel-border-radius-sm);
       }
-      .ember-basic-dropdown-trigger {
-        padding: var(--boxel-sp-xxxs);
-        display: flex;
-        align-items: center;
-        flex-grow: 1;
-        border: none;
-      }
-      .ember-power-select-trigger:focus,
-      .ember-power-select-trigger--active {
-        border: none;
-        box-shadow: none;
-        outline: none;
-      }
-      .ember-power-select-trigger:after {
-        margin-left: 10px;
-      }
       .ember-power-select-multiple-options {
         list-style: none;
         gap: var(--boxel-sp-xxxs);
@@ -161,6 +165,9 @@ export default class BoxelMultiSelect<ItemT> extends Component<
       @searchEnabled={{@searchEnabled}}
       @closeOnSelect={{@closeOnSelect}}
       @ariaLabel={{@ariaLabel}}
+      @registerAPI={{@registerAPI}}
+      @initiallyOpened={{@initiallyOpened}}
+      @extra={{@extra}}
       {{! Do not remove eventType argument 
     This is to ensure that the click event from selected item does not bubble up to the trigger
      and cause the dropdown to close
@@ -168,6 +175,7 @@ export default class BoxelMultiSelect<ItemT> extends Component<
       @eventType='click'
       {{! actions }}
       @onOpen={{@onOpen}}
+      @onClose={{@onClose}}
       @onBlur={{@onBlur}}
       {{! custom components }}
       @selectedItemComponent={{if
@@ -175,7 +183,7 @@ export default class BoxelMultiSelect<ItemT> extends Component<
         @selectedItemComponent
         (component BoxelSelectedItem)
       }}
-      @triggerComponent={{component BoxelTrigger}}
+      @triggerComponent={{component BoxelMultiSelectDefaultTrigger}}
       @beforeOptionsComponent={{component BeforeOptions}}
       @afterOptionsComponent={{component BoxelAfterOptionsComponent}}
       ...attributes
diff --git a/packages/boxel-ui/addon/src/components/multi-select/selected-item.gts b/packages/boxel-ui/addon/src/components/multi-select/selected-item.gts
index 8c06ac89a1..62d3b37192 100644
--- a/packages/boxel-ui/addon/src/components/multi-select/selected-item.gts
+++ b/packages/boxel-ui/addon/src/components/multi-select/selected-item.gts
@@ -5,13 +5,13 @@ import Component from '@glimmer/component';
 import type { Select } from 'ember-power-select/components/power-select';
 
 import IconX from '../../icons/icon-x.gts';
+import Pill from '../pill/index.gts';
 
 // Inside the trigger component, the selected item component is called within in ember-power-select
-// It only passes option, select and extra as arguments
+// It only passes option, select
 // We follow the same convention when defining our own selected item component
 export interface SelectedItemSignature<ItemT> {
   Args: {
-    extra?: any;
     option: any;
     select: Select & {
       actions: {
@@ -20,7 +20,7 @@ export interface SelectedItemSignature<ItemT> {
     };
   };
   Blocks: {
-    default: [any];
+    default: [ItemT, Select];
   };
   Element: HTMLDivElement;
 }
@@ -44,35 +44,42 @@ export default class BoxelSelectedItem<ItemT> extends Component<
 
   <template>
     <div class='ember-power-select-multiple-option'>
-      {{@option.name}}
-      <button
-        type='button'
-        class='boxel-multi-select__remove-button'
-        {{on 'click' (fn this.remove @option)}}
-        aria-label='Remove {{@option.name}}'
-      >
-        <IconX
-          class='boxel-multi-select__icon boxel-multi-select__icon--remove'
-        />
-      </button>
+      <Pill class='boxel-selected-option'>
+        <:default>
+          {{yield @option @select}}
+        </:default>
+        <:iconRight>
+          {{! TODO: Replace with icon button }}
+          <button
+            type='button'
+            class='boxel-multi-select__remove-button'
+            {{on 'click' (fn this.remove @option)}}
+            aria-label='Remove item'
+          >
+
+            <IconX class='boxel-multi-select__icon--remove' />
+          </button>
+        </:iconRight>
+      </Pill>
     </div>
 
     <style scoped>
       .ember-power-select-multiple-option {
-        display: flex;
-        align-items: center;
-        gap: var(--boxel-sp-xxxs);
+        all: unset;
+      }
+      .boxel-selected-option {
+        --pill-gap: var(--boxel-sp-xxs);
       }
       .boxel-multi-select__remove-button {
         all: unset;
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 20px;
-        height: 20px;
         cursor: pointer;
         border-radius: 50%;
         transition: background-color 0.2s ease;
+        width: 10px;
+        height: 10px;
       }
       .boxel-multi-select__icon--remove {
         width: 10px;
diff --git a/packages/boxel-ui/addon/src/components/multi-select/trigger.gts b/packages/boxel-ui/addon/src/components/multi-select/trigger.gts
index bf666fd797..d39626a466 100644
--- a/packages/boxel-ui/addon/src/components/multi-select/trigger.gts
+++ b/packages/boxel-ui/addon/src/components/multi-select/trigger.gts
@@ -4,8 +4,11 @@ import Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';
 import type { Select } from 'ember-power-select/components/power-select';
 
+import { cn } from '../../helpers.ts';
 import CaretDown from '../../icons/caret-down.gts';
 import IconX from '../../icons/icon-x.gts';
+import Pill from '../pill/index.gts';
+import { BoxelTriggerWrapper } from '../select/trigger.gts';
 import BoxelSelectedItem, {
   type SelectedItemSignature,
 } from './selected-item.gts';
@@ -17,7 +20,7 @@ export interface TriggerComponentSignature<ItemT> {
     selectedItemComponent?: ComponentLike<SelectedItemSignature<ItemT>>;
   };
   Blocks: {
-    default: [];
+    default: [ItemT, Select];
   };
   Element: HTMLElement;
 }
@@ -28,7 +31,7 @@ type ExtendedSelect = Select & {
   } & Select['actions'];
 };
 
-export default class BoxelTrigger<ItemT> extends Component<
+export default class BoxelMultiSelectDefaultTrigger<ItemT> extends Component<
   TriggerComponentSignature<ItemT>
 > {
   get showPlaceholder() {
@@ -80,135 +83,106 @@ export default class BoxelTrigger<ItemT> extends Component<
     };
   }
 
+  get hasSelectedItems() {
+    return this.args.select.selected && this.args.select.selected.length > 0;
+  }
+
   @action
   onClearAll() {
     this.args.select.actions.select([]);
   }
 
   <template>
-    <div class='boxel-trigger'>
-
-      {{#if this.showPlaceholder}}
-        <div class='boxel-trigger-placeholder'>{{@placeholder}}</div>
-      {{/if}}
-
-      {{#let
-        (if
-          @selectedItemComponent
-          (component @selectedItemComponent)
-          (component BoxelSelectedItem)
-        )
-        as |SelectedComponent|
-      }}
-        {{#each this.visibleContent as |item|}}
-          <SelectedComponent @option={{item}} @select={{this.select}} />
-        {{/each}}
-      {{/let}}
-
-      {{#if this.hasMoreItems}}
-        <span class='ember-power-select-multiple-option'>
-          +
-          {{this.remainingItemsCount}}
-          more
-          <IconX
-            {{on 'click' this.removeExcessItems}}
-            class='boxel-multi-select__icon boxel-multi-select__icon--remove'
-          />
-        </span>
-      {{/if}}
-      <div
-        class='boxel-multi-select__icons-wrapper
-          {{if @select.selected.length "has-selections"}}'
-      >
-        {{#if @select.selected.length}}
-          <span class='boxel-multi-select__clear-icon-wrapper'>
-            <IconX
-              class='boxel-multi-select__icon'
+    <BoxelTriggerWrapper @placeholder={{@placeholder}} @select={{this.select}}>
+      <:default>
+        {{#let
+          (if
+            @selectedItemComponent
+            (component @selectedItemComponent)
+            (component BoxelSelectedItem)
+          )
+          as |SelectedComponent|
+        }}
+          {{#each this.visibleContent as |item|}}
+            <SelectedComponent
+              @option={{item}}
+              @select={{this.select}}
+              as |option select|
+            >
+              {{yield option select}}
+            </SelectedComponent>
+          {{/each}}
+        {{/let}}
+
+        {{#if this.hasMoreItems}}
+          <Pill class='boxel-multi-select-has-more-item'>
+            <:default>
+              +
+              {{this.remainingItemsCount}}
+              more
+            </:default>
+            <:iconRight>
+              {{! TODO: Replace with icon button }}
+              <button
+                class='boxel-multi-select__remove-button'
+                {{on 'click' this.removeExcessItems}}
+              >
+                <IconX class='boxel-multi-select__icon--remove' />
+              </button>
+            </:iconRight>
+          </Pill>
+        {{/if}}
+      </:default>
+      <:icon>
+        {{#if this.hasSelectedItems}}
+          <div class='has-selections'>
+            {{! TODO: Replace with icon button }}
+            <button
+              class='boxel-multi-select__remove-button'
               {{on 'click' this.onClearAll}}
-            />
-          </span>
+            >
+              <IconX class='boxel-multi-select__remove' />
+            </button>
+          </div>
         {{else}}
-          <span class='boxel-multi-select__icon-wrapper' aria-hidden='true'>
-            <CaretDown class='boxel-multi-select__icon' />
-          </span>
+          <CaretDown class={{cn 'icon' (if @select.isOpen 'is-open')}} />
         {{/if}}
-      </div>
-    </div>
+      </:icon>
+    </BoxelTriggerWrapper>
 
     <style scoped>
-      .boxel-trigger {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--boxel-sp-xs);
-      }
-      .boxel-trigger-placeholder {
-        color: var(--boxel-400);
-      }
-      .error-message {
-        color: var(--boxel-red);
-      }
-      .boxel-multi-select__icon {
+      .boxel-multi-select__remove-button {
+        --boxel-multi-select-width: 10px;
+        --boxel-multi-select-height: 10px;
+        all: unset;
         display: flex;
         justify-content: center;
-        width: 10px;
-        height: 10px;
+        align-items: center;
         cursor: pointer;
+        border-radius: 50%;
+        transition: background-color 0.2s ease;
+        width: var(--boxel-multi-select-width);
+        height: var(--boxel-multi-select-height);
       }
       .boxel-multi-select__icon--remove {
-        display: flex;
-        justify-content: center;
-        width: 10px;
-        height: 10px;
-        cursor: pointer;
-        --icon-color: var(--boxel-multi-select-pill-color);
-      }
-      .boxel-multi-select__icons-wrapper.has-selections {
-        pointer-events: auto;
+        width: var(--boxel-multi-select-width);
+        height: var(--boxel-multi-select-height);
+        --icon-color: var(--boxel-light);
       }
-      .boxel-multi-select__icon-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: var(--boxel-sp-xxxs) var(--boxel-sp-xxs);
-        width: 40px;
-        pointer-events: none;
+      .ember-power-select-multiple-remove-btn {
+        display: none; /* We have to remove the default x button placed on selected items*/
       }
-      .boxel-multi-select__clear-icon-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: var(--boxel-sp-xxxs) var(--boxel-sp-xxs);
-        width: 40px;
+      .boxel-multi-select-has-more-item {
+        --pill-gap: var(--boxel-sp-xxs);
+        --pill-background-color: var(--boxel-700);
+        --pill-font-color: var(--boxel-light);
       }
-      .ember-power-select-multiple-option {
-        padding: var(--boxel-sp-5xs);
-        display: flex;
-        align-items: center;
-        gap: var(--boxel-sp-xxs);
-        padding: var(--boxel-sp-5xs) var(--boxel-sp-4xs);
-        color: var(--boxel-multi-select-pill-color, var(--boxel-dark));
-        background-color: var(
-          --boxel-selected-pill-background-color,
-          var(--boxel-200)
-        );
-        margin: 0;
+      .icon {
+        width: 10px;
+        height: 10px;
       }
-      .ember-power-select-multiple-remove-btn {
-        display: none; /* We have to remove the default x button placed on selected items*/
+      .is-open {
+        transform: rotate(180deg);
       }
     </style>
   </template>
diff --git a/packages/boxel-ui/addon/src/components/multi-select/usage.gts b/packages/boxel-ui/addon/src/components/multi-select/usage.gts
index 6443cdfe87..09c53ab9f1 100644
--- a/packages/boxel-ui/addon/src/components/multi-select/usage.gts
+++ b/packages/boxel-ui/addon/src/components/multi-select/usage.gts
@@ -7,6 +7,7 @@ import {
   type CSSVariableInfo,
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
+import type { Select } from 'ember-power-select/components/power-select';
 import { includes } from 'lodash';
 import pluralize from 'pluralize';
 
@@ -82,9 +83,6 @@ interface AssigneePillArgs {
 
 //Custom component for rendering dropdown items with enhanced design and functionality
 class AssigneePill extends Component<AssigneePillArgs> {
-  get issueText() {
-    return String(this.args.option.issues);
-  }
   <template>
     <span class='assignee-pill'>
       <div class='assignee-pill-content'>
@@ -92,7 +90,8 @@ class AssigneePill extends Component<AssigneePillArgs> {
         <div class='assignee-avatar'>{{@option.avatar}}</div>
         <div class='assignee-name'>{{@option.name}}</div>
       </div>
-      <div class='assignee-issues'>{{getPlural this.issueText}}</div>
+      <div class='assignee-issues'>{{@option.issues}}
+        {{getPlural 'issue' @option.issues}}</div>
     </span>
 
     <style scoped>
@@ -166,6 +165,9 @@ export default class BoxelMultiSelectUsage extends Component {
   @tracked hasCheckbox = false;
   @tracked useCustomTriggerComponent = false;
 
+  @tracked selectedFilter: string | undefined = undefined;
+  @tracked publicAPI: Select | undefined = undefined;
+
   @cssVariable({ cssClassName: 'boxel-multi-select-usage-container' })
   declare boxelSelectedPillBackgroundColor: CSSVariableInfo;
 
@@ -189,6 +191,25 @@ export default class BoxelMultiSelectUsage extends Component {
     this.selectedAssignees = assignees;
   }
 
+  @action updateFilter(o: string | undefined): void {
+    this.selectedFilter = o;
+    this.openDropdown();
+  }
+
+  //We need this to open the dropdown from outside the component
+  @action registerAPI(select: Select): void {
+    this.publicAPI = select; //note: we must link select by reference
+  }
+
+  @action openDropdown(): void {
+    this.publicAPI?.actions.open();
+  }
+
+  @action onClose(): boolean | undefined {
+    this.selectedFilter = undefined;
+    return true;
+  }
+
   <template>
     <div
       class='boxel-multi-select-usage-container'
@@ -307,6 +328,7 @@ export default class BoxelMultiSelectUsage extends Component {
             @matchTriggerWidth={{true}}
             @searchField='name'
             @searchEnabled={{true}}
+            @closeOnSelect={{false}}
             @ariaLabel='Select assignees'
             as |option|
           >
@@ -331,6 +353,7 @@ export default class BoxelMultiSelectUsage extends Component {
             @matchTriggerWidth={{true}}
             @searchField='name'
             @searchEnabled={{true}}
+            @closeOnSelect={{false}}
             @ariaLabel='Select countries'
             @selectedItemComponent={{(component SelectedCountry)}}
             as |option|
@@ -350,6 +373,7 @@ export default class BoxelMultiSelectUsage extends Component {
             @matchTriggerWidth={{true}}
             @searchField='name'
             @searchEnabled={{true}}
+            @closeOnSelect={{false}}
             @onChange={{this.onSelectAssignees}}
             @ariaLabel='Select assignees'
             as |option|
@@ -363,12 +387,11 @@ export default class BoxelMultiSelectUsage extends Component {
             Select component. It is a simpler version of Boxel Multi Select that
             does not include custom components for the selected items, trigger,
             beforeOptions, and afterOptions. If you would like to maintain, the
-            <strong>STYLE OF DROPDOWN AND WRAPPER</strong>
-            but build your own components, you should use this.
+            default style of ember-power-select but build your own components,
+            you should use this.
           </p>
         </:description>
       </FreestyleUsage>
-
     </div>
   </template>
 }
diff --git a/packages/boxel-ui/addon/src/components/pill/index.gts b/packages/boxel-ui/addon/src/components/pill/index.gts
index 5fb2ad30d4..9e68bf92b2 100644
--- a/packages/boxel-ui/addon/src/components/pill/index.gts
+++ b/packages/boxel-ui/addon/src/components/pill/index.gts
@@ -10,7 +10,8 @@ export interface PillSignature {
   };
   Blocks: {
     default: [];
-    icon: [];
+    iconLeft?: [];
+    iconRight?: [];
   };
   Element: HTMLButtonElement | HTMLDivElement;
 }
@@ -18,12 +19,19 @@ export interface PillSignature {
 const Pill: TemplateOnlyComponent<PillSignature> = <template>
   {{#let (element (if (eq @kind 'button') 'button' 'div')) as |Tag|}}
     <Tag class={{cn 'pill' button-pill=(eq @kind 'button')}} ...attributes>
-      {{#if (has-block 'icon')}}
+      {{#if (has-block 'iconLeft')}}
         <figure class='icon'>
-          {{yield to='icon'}}
+          {{yield to='iconLeft'}}
         </figure>
       {{/if}}
+
       {{yield}}
+
+      {{#if (has-block 'iconRight')}}
+        <figure class='icon'>
+          {{yield to='iconRight'}}
+        </figure>
+      {{/if}}
     </Tag>
   {{/let}}
 
@@ -44,6 +52,7 @@ const Pill: TemplateOnlyComponent<PillSignature> = <template>
         border-radius: var(--boxel-border-radius-sm);
         font: 600 var(--boxel-font-sm);
         letter-spacing: var(--boxel-lsp-xs);
+        word-break: break-word;
       }
 
       .button-pill:not(:disabled):hover {
diff --git a/packages/boxel-ui/addon/src/components/pill/usage.gts b/packages/boxel-ui/addon/src/components/pill/usage.gts
index 23d51c1bb4..49301fe3e0 100644
--- a/packages/boxel-ui/addon/src/components/pill/usage.gts
+++ b/packages/boxel-ui/addon/src/components/pill/usage.gts
@@ -49,9 +49,9 @@ export default class PillUsage extends Component {
         </:description>
         <:example>
           <Pill @kind={{this.kind}} data-test-pill-freestyle-usage>
-            <:icon>
+            <:iconLeft>
               <IconPlus />
-            </:icon>
+            </:iconLeft>
             <:default>
               Happy
             </:default>
diff --git a/packages/boxel-ui/addon/src/components/select/index.gts b/packages/boxel-ui/addon/src/components/select/index.gts
index 5fba7b4031..06b22bc1fd 100644
--- a/packages/boxel-ui/addon/src/components/select/index.gts
+++ b/packages/boxel-ui/addon/src/components/select/index.gts
@@ -5,6 +5,7 @@ import PowerSelect, {
 import BeforeOptions from 'ember-power-select/components/power-select/before-options';
 
 import cn from '../../helpers/cn.ts';
+import { BoxelSelectDefaultTrigger } from './trigger.gts';
 
 export interface BoxelSelectArgs<ItemT> extends PowerSelectArgs {
   options: ItemT[];
@@ -32,7 +33,11 @@ const BoxelSelect: TemplateOnlyComponent<Signature> = <template>
     @renderInPlace={{@renderInPlace}}
     @verticalPosition={{@verticalPosition}}
     @dropdownClass={{cn 'boxel-select__dropdown' @dropdownClass}}
-    @triggerComponent={{@triggerComponent}}
+    {{! We can avoid providing arguments to the triggerComponent as long as they are specified here https://github.com/cibernox/ember-power-select/blob/913c85ec82d5c6aeb80a7a3b9d9c21ca9613e900/ember-power-select/src/components/power-select.hbs#L79-L106 }}
+    {{! Even the custom BoxelTriggerWrapper will receive these arguments }}
+    @triggerComponent={{(if
+      @triggerComponent @triggerComponent (component BoxelSelectDefaultTrigger)
+    )}}
     @disabled={{@disabled}}
     @matchTriggerWidth={{@matchTriggerWidth}}
     @eventType='click'
@@ -46,28 +51,18 @@ const BoxelSelect: TemplateOnlyComponent<Signature> = <template>
 
   <style scoped>
     .boxel-select {
-      border: 1px solid var(--boxel-form-control-border-color);
-      border-radius: var(--boxel-form-control-border-radius);
-      background: none;
+      position: relative;
       display: flex;
-      gap: var(--boxel-sp-sm);
-    }
-
-    .boxel-select:after {
-      display: none;
+      align-items: stretch;
+      flex-grow: 1;
+      overflow: hidden;
+      border: 1px solid var(--boxel-border-color);
+      border-radius: var(--boxel-border-radius-sm);
     }
   </style>
-  {{! Note: When editing dropdown of the PowerSelect component we target
-  the styles using :global -- this is not a mistake. The reason we do this is because
-  content is teleported to an element #ember-basic-dropdown-wormhole at the top of the dom
-  Therefore, our out-of-the-box scoped css solution do not work and we must use an escape hatch (ie :global) to
-  ensure styles are being applied correctly.
-   }}
   {{! template-lint-disable require-scoped-style }}
   <style>
     .boxel-select__dropdown {
-      --boxel-select-current-color: var(--boxel-highlight);
-      --boxel-select-selected-color: var(--boxel-light-100);
       box-shadow: var(--boxel-box-shadow);
       border-radius: var(--boxel-form-control-border-radius);
     }
@@ -76,21 +71,21 @@ const BoxelSelect: TemplateOnlyComponent<Signature> = <template>
       padding: 0;
       overflow: auto;
     }
+    .boxel-select__dropdown .ember-power-select-option {
+      padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
+    }
     .boxel-select__dropdown .ember-power-select-option[aria-selected='true'] {
-      background-color: var(--boxel-select-selected-color);
+      background-color: var(--boxel-100);
     }
-
     .boxel-select__dropdown .ember-power-select-option[aria-current='true'] {
-      background-color: var(--boxel-select-current-color);
+      background-color: var(--boxel-100);
       color: black;
     }
-
     .boxel-select__dropdown .ember-power-select-search-input:focus {
       border: 1px solid var(--boxel-outline-color);
       box-shadow: var(--boxel-box-shadow-hover);
       outline: var(--boxel-outline);
     }
-
     .boxel-select__dropdown .ember-power-select-option--no-matches-message {
       padding: var(--boxel-sp-xxs) var(--boxel-sp-sm);
     }
diff --git a/packages/boxel-ui/addon/src/components/select/trigger.gts b/packages/boxel-ui/addon/src/components/select/trigger.gts
new file mode 100644
index 0000000000..71682ac81b
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/select/trigger.gts
@@ -0,0 +1,102 @@
+import Component from '@glimmer/component';
+import type { Select } from 'ember-power-select/components/power-select';
+
+import { cn } from '../../helpers.ts';
+import CaretDown from '../../icons/caret-down.gts';
+
+export interface TriggerSignature {
+  Args: {
+    placeholder?: string;
+    select: Select;
+    selectedItemComponent?: any;
+  };
+  Blocks: {
+    default: [Select['selected'], Select];
+    icon: [];
+  };
+  Element: HTMLElement;
+}
+
+// This component is used to provide a consistent boxel style to trigger components
+// Abstain from using this component with many data customizations
+export class BoxelTriggerWrapper extends Component<TriggerSignature> {
+  get showPlaceholder() {
+    return (
+      this.args.placeholder &&
+      (this.args.select?.selected === undefined || //undefined check is for single-select
+        this.args.select?.selected.length === 0) //length check is for multi-select
+    );
+  }
+  <template>
+    <div class='boxel-trigger'>
+      <div class='boxel-trigger-content'>
+        {{#if this.showPlaceholder}}
+          <div class='boxel-trigger-placeholder'>
+            {{@placeholder}}
+          </div>
+        {{else}}
+          {{! Yield the selected item and the select component to allow ember power select consumers to specify the selected item to be displayed after selection}}
+          {{! This is how ember-power-select does it inside of their default component }}
+          {{yield @select.selected @select}}
+        {{/if}}
+      </div>
+
+      {{#if (has-block 'icon')}}
+        {{yield to='icon'}}
+      {{/if}}
+    </div>
+    <style scoped>
+      .boxel-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        gap: var(--boxel-sp-xxxs);
+        padding: var(--boxel-sp-xxxs);
+      }
+      .boxel-trigger-content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xxs);
+      }
+      .boxel-trigger-placeholder {
+        color: var(--boxel-400);
+      }
+    </style>
+    <style scoped>
+      /*Ember power select has a right padding to the trigger element*/
+      .ember-power-select-trigger {
+        padding: 0px;
+      }
+    </style>
+  </template>
+}
+
+export class BoxelSelectDefaultTrigger extends Component<TriggerSignature> {
+  <template>
+    <BoxelTriggerWrapper @placeholder={{@placeholder}} @select={{@select}}>
+      <:default>
+        {{#if @selectedItemComponent}}
+          <@selectedItemComponent
+            @option={{@select.selected}}
+            @select={{@select}}
+          />
+        {{else}}
+          {{yield @select.selected @select}}
+        {{/if}}
+      </:default>
+      <:icon>
+        <CaretDown class={{cn 'icon' (if @select.isOpen 'is-open')}} />
+      </:icon>
+    </BoxelTriggerWrapper>
+    <style scoped>
+      .icon {
+        width: 10px;
+        height: 10px;
+      }
+      .is-open {
+        transform: rotate(180deg);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/components/select/usage.gts b/packages/boxel-ui/addon/src/components/select/usage.gts
index 245a9a09c3..628677857a 100644
--- a/packages/boxel-ui/addon/src/components/select/usage.gts
+++ b/packages/boxel-ui/addon/src/components/select/usage.gts
@@ -45,14 +45,6 @@ export default class BoxelSelectUsage extends Component {
   }
 
   <template>
-    {{! template-lint-disable require-scoped-style }}
-    <style
-    >
-      .boxel-select-usage {
-        --boxel-select-current-color: {{this.boxelSelectCurrentColor.value}};
-        --boxel-select-selected-color: {{this.boxelSelectSelectedColor.value}};
-      }
-    </style>
     <FreestyleUsage @name='Select'>
       <:example>
 
@@ -145,22 +137,6 @@ export default class BoxelSelectUsage extends Component {
           @description='Tells the component what property of the options should be used to filter'
         />
       </:api>
-      <:cssVars as |Css|>
-        <Css.Basic
-          @name='boxel-select-current-color'
-          @type='color'
-          @defaultValue={{this.boxelSelectCurrentColor.defaults}}
-          @value={{this.boxelSelectCurrentColor.value}}
-          @onInput={{this.boxelSelectCurrentColor.update}}
-        />
-        <Css.Basic
-          @name='boxel-select-selected-color'
-          @type='color'
-          @defaultValue={{this.boxelSelectSelectedColor.defaults}}
-          @value={{this.boxelSelectSelectedColor.value}}
-          @onInput={{this.boxelSelectSelectedColor.update}}
-        />
-      </:cssVars>
     </FreestyleUsage>
   </template>
 }
diff --git a/packages/boxel-ui/addon/src/icons/caret-up.gts b/packages/boxel-ui/addon/src/icons/caret-up.gts
new file mode 100644
index 0000000000..3045c3fd2d
--- /dev/null
+++ b/packages/boxel-ui/addon/src/icons/caret-up.gts
@@ -0,0 +1,23 @@
+// This file is auto-generated by 'pnpm rebuild:icons'
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import type { Signature } from './types.ts';
+
+const IconComponent: TemplateOnlyComponent<Signature> = <template>
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0.41 0.41 10 6'
+    ...attributes
+  ><path
+      fill='none'
+      stroke='var(--icon-color,#000)'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      stroke-width='2'
+      d='m1 5 4-4 4 4'
+    /></svg>
+</template>;
+
+// @ts-expect-error this is the only way to set a name on a Template Only Component currently
+IconComponent.name = 'CaretUp';
+export default IconComponent;
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
index 70d4ad7439..eab43cfaed 100644
--- a/packages/host/app/components/card-pill.gts
+++ b/packages/host/app/components/card-pill.gts
@@ -41,9 +41,9 @@ export default class CardPill extends Component<CardPillSignature> {
       data-test-autoattached-card={{@isAutoAttachedCard}}
       ...attributes
     >
-      <:icon>
+      <:iconLeft>
         <RealmIcon @realmInfo={{this.realm.info @card.id}} class='icon' />
-      </:icon>
+      </:iconLeft>
       <:default>
         <div class='card-content' title={{@card.title}}>
           <this.component @format='atom' @displayContainer={{false}} />
diff --git a/packages/host/app/components/operator-mode/card-schema-editor.gts b/packages/host/app/components/operator-mode/card-schema-editor.gts
index 0f8bfd5907..0b102b33db 100644
--- a/packages/host/app/components/operator-mode/card-schema-editor.gts
+++ b/packages/host/app/components/operator-mode/card-schema-editor.gts
@@ -256,12 +256,12 @@ export default class CardSchemaEditor extends Component<Signature> {
                 {{on 'click' (fn @goToDefinition codeRef @cardType.localName)}}
                 data-test-card-schema-navigational-button
               >
-                <:icon>
+                <:iconLeft>
                   <RealmIcon
                     @realmInfo={{this.realm.info @cardType.module}}
                     class='icon'
                   />
-                </:icon>
+                </:iconLeft>
                 <:default>
                   {{@cardType.displayName}}
                 </:default>
@@ -342,7 +342,7 @@ export default class CardSchemaEditor extends Component<Signature> {
                             }}
                             data-test-card-schema-field-navigational-button
                           >
-                            <:icon>
+                            <:iconLeft>
                               {{#if field.isComputed}}
                                 <span
                                   class='computed-icon'
@@ -360,7 +360,7 @@ export default class CardSchemaEditor extends Component<Signature> {
                                 @realmInfo={{this.realm.info moduleUrl}}
                                 class='icon'
                               />
-                            </:icon>
+                            </:iconLeft>
                             <:default>
                               {{#let
                                 (this.fieldCardDisplayName field.card)
diff --git a/packages/host/app/components/operator-mode/create-file-modal.gts b/packages/host/app/components/operator-mode/create-file-modal.gts
index 0694baf567..d5f69f43f8 100644
--- a/packages/host/app/components/operator-mode/create-file-modal.gts
+++ b/packages/host/app/components/operator-mode/create-file-modal.gts
@@ -801,9 +801,9 @@ class SelectedTypePill extends Component<SelectedTypePillSignature> {
 
   <template>
     <Pill class='selected-type' data-test-selected-type={{@entry.title}}>
-      <:icon>
+      <:iconLeft>
         <RealmIcon @realmInfo={{this.realm.info @entry.id}} class='icon' />
-      </:icon>
+      </:iconLeft>
       <:default>
         {{@entry.title}}
       </:default>
diff --git a/packages/host/app/components/operator-mode/edit-field-modal.gts b/packages/host/app/components/operator-mode/edit-field-modal.gts
index 752a72b27f..63f32fca10 100644
--- a/packages/host/app/components/operator-mode/edit-field-modal.gts
+++ b/packages/host/app/components/operator-mode/edit-field-modal.gts
@@ -344,7 +344,7 @@ export default class EditFieldModal extends Component<Signature> {
           <div class='card-chooser-area'>
             {{#if this.fieldCard}}
               <Pill data-test-selected-field-realm-icon>
-                <:icon>
+                <:iconLeft>
                   {{#if this.fieldModuleURL.href}}
                     {{#let
                       (this.realm.info this.fieldModuleURL.href)
@@ -357,7 +357,7 @@ export default class EditFieldModal extends Component<Signature> {
                       />
                     {{/let}}
                   {{/if}}
-                </:icon>
+                </:iconLeft>
                 <:default>
                   <span data-test-selected-field-display-name>
                     {{this.fieldCard.displayName}}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25a4466411..b4adcb682c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -748,9 +748,6 @@ importers:
       '@glint/template':
         specifier: 1.3.0
         version: 1.3.0
-      '@types/pluralize':
-        specifier: ^0.0.30
-        version: 0.0.30
       classnames:
         specifier: ^2.3.2
         version: 2.3.2
@@ -851,6 +848,9 @@ importers:
       '@types/lodash':
         specifier: ^4.14.182
         version: 4.14.182
+      '@types/pluralize':
+        specifier: ^0.0.30
+        version: 0.0.30
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.16.1
         version: 7.16.1(@typescript-eslint/parser@7.16.1)(eslint@8.57.0)(typescript@5.1.6)