From 41a479d109bdc0ac74db8bdc7ea994ff147c1765 Mon Sep 17 00:00:00 2001
From: Christopher Gardella <44123552+cmgardella@users.noreply.github.com>
Date: Sun, 9 Aug 2026 22:23:36 -0400
Subject: [PATCH 1/2] Polish AI Assistant panel and workspace chooser dropdown
 styling

- Fix skill-selector footer buttons touching with no gap when stacked;
  size them to content and lay out via flex-wrap
- Remove leftover scroll-shadow ("chin") artifact on the LLM select list
  and restyle its footer actions to match the skill-menu pill buttons
- Resize the Past Sessions popover to inset 30px from both panel edges,
  match its header font to the panel title, and restyle background,
  border, dividers, and hover colors
- Fix a nested double-stroke on the session "more options" dropdown by
  neutralizing the wormholed BoxelDropdown content wrapper's own border/shadow
- Auto-close the "more options" dropdown on mouse-out (hover-intent debounce)
  instead of requiring a click elsewhere, and clear lingering focus styling
- Give the currently-active session row a hover state even while its
  options menu is open
- Restyle the workspace chooser's "View All" sort dropdown (default state
  matches the chooser background; open state uses a dark platter with a
  white 25%-opacity stroke, white text, and a teal active-item checkmark)
---
 .../components/ai-assistant/llm-select.gts    |  9 ++
 .../ai-assistant/past-session-item.gts        | 90 ++++++++++++++---
 .../components/ai-assistant/past-sessions.gts | 96 +++++++++++--------
 packages/host/app/components/matrix/room.gts  | 27 ++++--
 .../operator-mode/workspace-chooser/index.gts | 28 +++++-
 .../host/app/components/pill-menu/index.gts   |  3 +
 6 files changed, 188 insertions(+), 65 deletions(-)

diff --git a/packages/host/app/components/ai-assistant/llm-select.gts b/packages/host/app/components/ai-assistant/llm-select.gts
index 5062f9be0fb..85d3f726452 100644
--- a/packages/host/app/components/ai-assistant/llm-select.gts
+++ b/packages/host/app/components/ai-assistant/llm-select.gts
@@ -107,6 +107,15 @@ export default class LLMSelect extends Component<Signature> {
         scroll-timeline: --pill-menu-content-scroll-timeline;
       }
 
+      /* LLMSelect renders its own footer-like row inside .llm-list rather
+      than forwarding a :footer block to PillMenu, so PillMenu never marks
+      itself `has-footer` and its default bottom scroll-shadow (meant to be
+      swapped out when a real footer exists) is left dangling over the
+      list content instead of framing the true bottom edge. */
+      :deep(.menu-content::after) {
+        display: none;
+      }
+
       .llm-option {
         background: var(--boxel-light);
         border-radius: var(--boxel-border-radius);
diff --git a/packages/host/app/components/ai-assistant/past-session-item.gts b/packages/host/app/components/ai-assistant/past-session-item.gts
index 15f549cd96b..074fcbc45a1 100644
--- a/packages/host/app/components/ai-assistant/past-session-item.gts
+++ b/packages/host/app/components/ai-assistant/past-session-item.gts
@@ -9,6 +9,7 @@ import { tracked } from '@glimmer/tracking';
 import ExternalLink from '@cardstack/boxel-icons/external-link';
 
 import { format as formatDate, isSameDay, isSameYear } from 'date-fns';
+import { modifier } from 'ember-modifier';
 
 import {
   BoxelDropdown,
@@ -45,6 +46,42 @@ interface Signature {
 
 export default class PastSessionItem extends Component<Signature> {
   @tracked private preventMenuClose = false;
+  private closeDropdownAction: (() => void) | null = null;
+  private closeDropdownTimer: ReturnType<typeof setTimeout> | null = null;
+  private triggerElement: HTMLElement | null = null;
+
+  private registerCloseAction = modifier(
+    (_element: HTMLElement, [closeFn]: [() => void]) => {
+      this.closeDropdownAction = closeFn;
+      return () => {
+        this.closeDropdownAction = null;
+      };
+    },
+  );
+
+  private registerTriggerElement = modifier((element: HTMLElement) => {
+    this.triggerElement = element;
+    return () => {
+      this.triggerElement = null;
+    };
+  });
+
+  @action
+  private scheduleCloseDropdown() {
+    this.cancelCloseDropdown();
+    this.closeDropdownTimer = setTimeout(() => {
+      this.closeDropdownAction?.();
+      this.triggerElement?.blur();
+    }, 200);
+  }
+
+  @action
+  private cancelCloseDropdown() {
+    if (this.closeDropdownTimer) {
+      clearTimeout(this.closeDropdownTimer);
+      this.closeDropdownTimer = null;
+    }
+  }
 
   <template>
     <li
@@ -52,6 +89,8 @@ export default class PastSessionItem extends Component<Signature> {
       data-test-joined-room={{@session.roomId}}
       data-room-id={{@session.roomId}}
       data-is-current-room={{@isCurrentRoom}}
+      {{on 'mouseenter' this.cancelCloseDropdown}}
+      {{on 'mouseleave' this.scheduleCloseDropdown}}
     >
       <button
         class='view-session-button'
@@ -87,7 +126,7 @@ export default class PastSessionItem extends Component<Signature> {
           {{/if}}
         </div>
       </button>
-      <BoxelDropdown>
+      <BoxelDropdown @contentClass='past-session-menu-dropdown'>
         <:trigger as |bindings|>
           <Tooltip @placement='top'>
             <:trigger>
@@ -98,6 +137,7 @@ export default class PastSessionItem extends Component<Signature> {
                 @label='past session options'
                 data-test-past-session-options-button={{@session.roomId}}
                 {{bindings}}
+                {{this.registerTriggerElement}}
               />
             </:trigger>
             <:content>
@@ -108,6 +148,9 @@ export default class PastSessionItem extends Component<Signature> {
         <:content as |dd|>
           <Menu
             class='menu past-session-menu'
+            {{this.registerCloseAction dd.close}}
+            {{on 'mouseenter' this.cancelCloseDropdown}}
+            {{on 'mouseleave' this.scheduleCloseDropdown}}
             @closeMenu={{fn this.handleCloseMenu dd.close}}
             @items={{array
               (menuItem
@@ -139,37 +182,49 @@ export default class PastSessionItem extends Component<Signature> {
       }
 
       .session {
+        position: relative;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-top: 1px solid var(--past-sessions-divider-color);
         padding: var(--boxel-sp) var(--boxel-sp-sm);
         margin-right: var(--boxel-sp-xs);
         margin-left: var(--boxel-sp-xs);
         border-radius: var(--boxel-border-radius-xs);
       }
 
-      .session:first-child {
-        border-top: none;
+      .session::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: #4f4b57;
+      }
+
+      .session:first-child::before {
+        display: none;
       }
 
-      .session:hover {
+      .session:hover,
+      .session:has(.menu-button[aria-expanded='true']) {
         background-color: var(--ai-assistant-menu-hover-background);
+        border-radius: calc(var(--boxel-border-radius-xs) + 2px);
         cursor: pointer;
       }
-      .session[data-is-current-room] {
-        border: 1px solid var(--past-sessions-divider-color);
-      }
-      .session:hover + .session:not([data-is-current-room]),
-      .session[data-is-current-room] + .session {
-        border-top-color: transparent;
+      .session:hover::before,
+      .session:has(.menu-button[aria-expanded='true'])::before,
+      .session:hover + .session::before,
+      .session:has(.menu-button[aria-expanded='true']) + .session::before {
+        background: transparent;
       }
       .name {
         font-weight: 600;
       }
       .date {
-        margin-top: var(--boxel-sp-xxs);
+        margin-top: calc(var(--boxel-sp-xxs) - 5px);
         color: var(--boxel-400);
+        font-size: 12px;
       }
       .view-session-button {
         color: var(--boxel-light);
@@ -195,12 +250,17 @@ export default class PastSessionItem extends Component<Signature> {
         visibility: visible;
       }
 
+      :global(.past-session-menu-dropdown) {
+        border: none;
+        box-shadow: none;
+      }
+
       .menu {
         --boxel-menu-item-content-padding: var(--boxel-sp-xxs)
           var(--boxel-sp-sm);
 
-        background: var(--ai-assistant-menu-background);
-        border: 1px solid var(--past-sessions-divider-color);
+        background: #3b394b;
+        border: 1px solid rgba(255, 255, 255, 0.25);
         color: var(--boxel-light);
         padding: var(--boxel-sp-xs);
         box-shadow: var(--boxel-deep-box-shadow);
@@ -218,7 +278,7 @@ export default class PastSessionItem extends Component<Signature> {
       }
 
       .menu :deep(.boxel-menu__item:hover) {
-        background-color: var(--ai-assistant-menu-hover-background);
+        background-color: #272330;
         border-radius: var(--boxel-border-radius-xs);
       }
 
diff --git a/packages/host/app/components/ai-assistant/past-sessions.gts b/packages/host/app/components/ai-assistant/past-sessions.gts
index d6bfce46a75..c3f617f8c1e 100644
--- a/packages/host/app/components/ai-assistant/past-sessions.gts
+++ b/packages/host/app/components/ai-assistant/past-sessions.gts
@@ -47,53 +47,71 @@ export default class AiAssistantPastSessionsList extends Component<Signature> {
   });
 
   <template>
-    <AiAssistantPanelPopover
-      @onClose={{@onClose}}
-      data-test-past-sessions
-      ...attributes
-    >
-      <:header>
-        Past Sessions
-      </:header>
-      <:body>
-        {{#if @sessions}}
-          <ul class='past-sessions' {{this.checkScroll}}>
-            {{#each @sessions key='roomId' as |session|}}
-              <PastSessionItem
-                @session={{session}}
-                @isCurrentRoom={{eq session.roomId @currentRoomId}}
-                @actions={{@roomActions}}
-              />
-            {{/each}}
-            {{#if this.matrixService.isLoadingMoreAIRooms}}
-              <li
-                class='loading-indicator-container'
-                data-test-loading-more-rooms
-              >
-                <LoadingIndicator
-                  @color='var(--boxel-dark)'
-                  class='loading-indicator'
+    <div class='past-sessions-menu'>
+      <AiAssistantPanelPopover
+        @onClose={{@onClose}}
+        data-test-past-sessions
+        ...attributes
+      >
+        <:header>
+          Past Sessions
+        </:header>
+        <:body>
+          {{#if @sessions}}
+            <ul class='past-sessions' {{this.checkScroll}}>
+              {{#each @sessions key='roomId' as |session|}}
+                <PastSessionItem
+                  @session={{session}}
+                  @isCurrentRoom={{eq session.roomId @currentRoomId}}
+                  @actions={{@roomActions}}
                 />
-              </li>
-            {{/if}}
-          </ul>
-        {{else}}
-          <div class='empty-collection'>
-            No past sessions to show.
-          </div>
-        {{/if}}
-      </:body>
-    </AiAssistantPanelPopover>
+              {{/each}}
+              {{#if this.matrixService.isLoadingMoreAIRooms}}
+                <li
+                  class='loading-indicator-container'
+                  data-test-loading-more-rooms
+                >
+                  <LoadingIndicator
+                    @color='var(--boxel-dark)'
+                    class='loading-indicator'
+                  />
+                </li>
+              {{/if}}
+            </ul>
+          {{else}}
+            <div class='empty-collection'>
+              No past sessions to show.
+            </div>
+          {{/if}}
+        </:body>
+      </AiAssistantPanelPopover>
+    </div>
 
     <style scoped>
+      .past-sessions-menu :deep(.panel-popover) {
+        left: 30px;
+        right: 30px;
+        max-width: none;
+        background: #3b394b;
+        border: 1px solid rgba(255, 255, 255, 0.25);
+      }
+      .past-sessions-menu :deep(.header) {
+        font: 700 var(--boxel-font-sm);
+        letter-spacing: var(--boxel-lsp-sm);
+      }
+      .past-sessions-menu :deep(.session:hover),
+      .past-sessions-menu
+        :deep(.session:has(.menu-button[aria-expanded='true'])) {
+        background-color: #272330;
+      }
+      .past-sessions-menu :deep(.body) {
+        scroll-timeline: --past-sessions-scroll-timeline block;
+      }
       .past-sessions {
         list-style-type: none;
         padding: 0;
         margin: 0;
         margin-bottom: var(--boxel-sp-xs);
-        max-height: 400px;
-        overflow-y: auto;
-        scroll-timeline: --past-sessions-scroll-timeline block;
       }
       .empty-collection {
         padding: var(--boxel-sp-sm);
diff --git a/packages/host/app/components/matrix/room.gts b/packages/host/app/components/matrix/room.gts
index 2012a535b46..6ed1dcb31e4 100644
--- a/packages/host/app/components/matrix/room.gts
+++ b/packages/host/app/components/matrix/room.gts
@@ -324,7 +324,7 @@ export default class Room extends Component<Signature> {
                       <li class='llm-select-footer'>
                         {{#if this.systemCardId}}
                           <BoxelButton
-                            @kind='text-only'
+                            @kind='primary'
                             @size='extra-small'
                             class='llm-select-footer-action'
                             {{on 'click' this.goToSystemCard}}
@@ -335,7 +335,7 @@ export default class Room extends Component<Signature> {
                         {{/if}}
                         {{#unless this.isDefaultSystemCard}}
                           <BoxelButton
-                            @kind='text-only'
+                            @kind='primary'
                             @size='extra-small'
                             class='llm-select-footer-action'
                             {{on
@@ -534,22 +534,29 @@ export default class Room extends Component<Signature> {
 
       .llm-select-footer {
         display: flex;
-        flex-direction: column;
-        gap: var(--boxel-sp-xxxs);
+        flex-wrap: wrap;
+        gap: 5px;
         border-top: 1px solid var(--boxel-200);
         padding-top: var(--boxel-sp-xxxs);
       }
 
       .llm-select-footer-action {
-        --boxel-button-padding: var(--boxel-sp-xxxs) var(--boxel-sp-sm);
+        --boxel-button-font: 600 var(--boxel-font-xs);
+        --boxel-button-border: 1px solid var(--boxel-400);
+        --boxel-button-color: var(--boxel-dark);
+        --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-sm);
         --boxel-button-min-height: unset;
-        justify-content: flex-start;
-        font: 500 var(--boxel-font-xs);
-        color: var(--boxel-500);
+
+        gap: var(--boxel-sp-xs);
+        background: none;
       }
 
-      .llm-select-footer-action:hover {
-        color: var(--boxel-dark);
+      .llm-select-footer-action:hover:not(:disabled),
+      .llm-select-footer-action:focus:not(:disabled) {
+        --icon-color: var(--boxel-600);
+        color: var(--boxel-600);
+        background: none;
+        box-shadow: none;
       }
 
       .chat-input-area :deep(.minimized-arrow) {
diff --git a/packages/host/app/components/operator-mode/workspace-chooser/index.gts b/packages/host/app/components/operator-mode/workspace-chooser/index.gts
index f480be9b4bb..b8709751ccc 100644
--- a/packages/host/app/components/operator-mode/workspace-chooser/index.gts
+++ b/packages/host/app/components/operator-mode/workspace-chooser/index.gts
@@ -387,6 +387,7 @@ export default class WorkspaceChooser extends Component<Signature> {
           <div class='sort-controls'>
             <BoxelSelect
               class='sort-select'
+              @dropdownClass='workspace-chooser-sort-dropdown'
               @options={{this.sortOptions}}
               @selected={{this.selectedSortOption}}
               @onChange={{this.onSortChange}}
@@ -567,7 +568,8 @@ export default class WorkspaceChooser extends Component<Signature> {
         align-items: center;
       }
       .sort-select {
-        --boxel-select-background-color: rgb(42 32 64 / 90%);
+        flex-shrink: 0;
+        --boxel-select-background-color: var(--boxel-800);
         --boxel-select-border-color: rgba(255 255 255 / 25%);
         --boxel-select-text-color: var(--boxel-light);
         --boxel-select-focus-border-color: rgba(255 255 255 / 50%);
@@ -575,6 +577,30 @@ export default class WorkspaceChooser extends Component<Signature> {
         font: 400 var(--boxel-font-sm);
         letter-spacing: var(--boxel-lsp);
       }
+      :global(.boxel-select__dropdown.workspace-chooser-sort-dropdown) {
+        --boxel-dropdown-background-color: #3b394b;
+        --boxel-dropdown-border-color: rgba(255, 255, 255, 0.25);
+        --boxel-dropdown-text-color: #fff;
+        --boxel-dropdown-selected-text-color: #fff;
+        --boxel-dropdown-hover-color: #272330;
+        --boxel-dropdown-highlight-color: #3b394b;
+      }
+      :global(
+        .workspace-chooser-sort-dropdown
+          .boxel-select-option-item.ember-power-select-option--selected.ember-power-select-option--highlighted
+      ) {
+        background-color: #3b394b;
+      }
+      :global(
+        .workspace-chooser-sort-dropdown
+          .boxel-select-option-item.ember-power-select-option--selected:hover
+      ) {
+        background-color: #272330;
+      }
+      :global(.workspace-chooser-sort-dropdown .boxel-select-option-checkmark) {
+        --icon-color: #00ffba;
+        color: #00ffba;
+      }
       .workspace-chooser__content {
         display: flex;
         flex-direction: column;
diff --git a/packages/host/app/components/pill-menu/index.gts b/packages/host/app/components/pill-menu/index.gts
index 7f835547a6d..ae9acf80682 100644
--- a/packages/host/app/components/pill-menu/index.gts
+++ b/packages/host/app/components/pill-menu/index.gts
@@ -219,6 +219,9 @@ export default class PillMenu extends Component<Signature> {
 
       .menu-footer {
         padding: var(--chat-input-area-bottom-padding);
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
       }
 
       .menu-footer::before {

From 775b9f558192fd3dea1421ff2324ad20d55f40cc Mon Sep 17 00:00:00 2001
From: Christopher Gardella <44123552+cmgardella@users.noreply.github.com>
Date: Tue, 11 Aug 2026 20:43:51 -0400
Subject: [PATCH 2/2] Polish profile popover, pricing modal spacing, and
 dropdown hover styling

- Restyled the profile popover: lighter divider, teal Upgrade Plan CTA
  matching Sign Out's style/font, custom hover colors for black/teal
  buttons, removed the credit icon next to "Not available on Free
  plan", flat #EFEDED daily-grant note with no border, and precise
  20px spacing around the Buy More Credits CTA
- Added 50px of breathing room above the pricing modal's headline
  while keeping scroll-snap stable via matching scroll-padding-top
- Added a 100%-opacity white stroke on hover for the search, AI
  assistant, and profile avatar icon buttons, matching the rest of
  the app's icon button hover treatment
- Made the workspace chooser's "View All" sort dropdown and the
  hosted-site-url dropdown's hover state span edge-to-edge like the
  standard boxel dropdown/menu pattern, instead of being inset from
  the platter
---
 .../app/components/ai-assistant/button.gts    |   1 +
 .../choose-subscription-plan-modal.gts        | 118 +++++++++++++-----
 .../operator-mode/profile-info-popover.gts    |  34 ++++-
 .../operator-mode/submode-layout.gts          |   6 +
 .../operator-mode/workspace-chooser/index.gts |   7 ++
 .../workspace-chooser/workspace.gts           |   9 +-
 .../app/components/with-subscription-data.gts |   6 +-
 7 files changed, 142 insertions(+), 39 deletions(-)

diff --git a/packages/host/app/components/ai-assistant/button.gts b/packages/host/app/components/ai-assistant/button.gts
index 19df0591aa8..4f5187ce35c 100644
--- a/packages/host/app/components/ai-assistant/button.gts
+++ b/packages/host/app/components/ai-assistant/button.gts
@@ -33,6 +33,7 @@ const AiAssistantButton: TemplateOnlyComponent<Signature> = <template>
     }
     .ai-assistant-button:hover {
       cursor: pointer;
+      border-color: rgba(255, 255, 255, 1);
     }
 
     .ai-assistant-button.is-active {
diff --git a/packages/host/app/components/operator-mode/choose-subscription-plan-modal.gts b/packages/host/app/components/operator-mode/choose-subscription-plan-modal.gts
index 5abc75a015f..7cead377538 100644
--- a/packages/host/app/components/operator-mode/choose-subscription-plan-modal.gts
+++ b/packages/host/app/components/operator-mode/choose-subscription-plan-modal.gts
@@ -41,11 +41,39 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
 
   <template>
     <style scoped>
+      :global(.choose-subscription-plan-modal .dialog-box__content) {
+        scroll-snap-type: y mandatory;
+        scroll-padding-top: 50px;
+        grid-row: 1 / -1;
+      }
+      :global(.choose-subscription-plan-modal .dialog-box__header) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 2;
+        background: transparent;
+        pointer-events: none;
+      }
+      :global(.choose-subscription-plan-modal .dialog-box__close) {
+        pointer-events: auto;
+      }
+
       .boxel-pricing-container {
         color: var(--boxel-700);
         background-color: var(--boxel-light);
         max-width: var(--boxel-xxl-container);
         margin: 0 auto;
+        padding-top: 50px;
+      }
+
+      .main-title,
+      .early-preview-banner,
+      .intro-text,
+      .subscription-header,
+      .pricing-table,
+      .footer-notes {
+        scroll-snap-align: start;
       }
 
       .main-title {
@@ -59,13 +87,12 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
 
       .early-preview-banner {
         background-color: var(--boxel-lime);
-        border: 1.5px solid var(--boxel-dark);
         border-radius: var(--boxel-border-radius-sm);
-        padding: var(--boxel-sp-sm) var(--boxel-sp);
+        padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
         font: var(--boxel-font);
         font-weight: 500;
         text-align: center;
-        max-width: var(--boxel-lg-container);
+        width: fit-content;
         margin: 0 auto var(--boxel-sp) auto;
       }
 
@@ -73,6 +100,7 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
         text-align: center;
         max-width: var(--boxel-xl-container);
         margin: 0 auto var(--boxel-sp-xxl) auto;
+        font: var(--boxel-font);
         line-height: 1.5;
         color: var(--boxel-700);
       }
@@ -167,23 +195,27 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
       .btn {
         display: inline-block;
         padding: var(--boxel-sp-sm) var(--boxel-sp-lg);
+        border: none;
         border-radius: 50px;
         text-decoration: none;
         font-weight: 600;
         transition: var(--boxel-transition);
         font: var(--boxel-font-sm);
       }
-      .btn:hover {
-        transform: scale(1.05);
-      }
       .btn-teal {
         background-color: var(--boxel-teal);
         color: var(--boxel-dark);
       }
+      .btn-teal:hover {
+        background-color: #00d99e;
+      }
       .btn-dark {
         background-color: var(--boxel-dark);
         color: var(--boxel-light);
       }
+      .btn-dark:hover {
+        background-color: #595959;
+      }
       .btn-get-started {
         font-weight: 600;
       }
@@ -194,18 +226,15 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
         text-align: center;
         border-top: var(--boxel-border);
       }
-      .feature-cell:not(:last-child) {
-        border-bottom: var(--boxel-border);
-      }
 
       .feature-cell::before {
         content: attr(data-label);
         display: block;
-        font-weight: 500;
         color: var(--boxel-700);
         margin-bottom: var(--boxel-sp-xs);
         text-align: center;
         font: var(--boxel-font-sm);
+        font-weight: 600;
       }
       .feature-cell .credit-value {
         margin-top: var(--boxel-sp-xs);
@@ -215,6 +244,7 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
         display: flex;
         flex-direction: row;
         align-items: center;
+        justify-content: center;
         gap: var(--boxel-sp-xs);
         font: var(--boxel-font-lg);
         font-weight: 600;
@@ -238,6 +268,7 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
         margin: var(--boxel-sp-xs) 0;
       }
       .footer-notes .highlight {
+        display: inline-block;
         background-color: var(--boxel-lime);
         padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
         border-radius: var(--boxel-border-radius-xs);
@@ -256,14 +287,14 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
 
         .feature-labels-column {
           display: block;
-          flex: 1 1 25%;
+          flex: 1 1 auto;
           background-color: var(--boxel-light);
           font-weight: 600;
           color: var(--boxel-700);
         }
 
         .plan-column {
-          flex: 1 1 25%;
+          flex: 0 0 305px;
           border: none;
           border-radius: 0;
           margin-bottom: 0;
@@ -312,15 +343,25 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
         }
       }
 
+      @media (max-width: 991px) {
+        .btn-get-started {
+          padding-left: calc(var(--boxel-sp-lg) + 30px);
+          padding-right: calc(var(--boxel-sp-lg) + 30px);
+        }
+      }
+
       .choose-subscription-plan-modal {
         --boxel-modal-max-width: 80rem;
         --boxel-modal-offset-top: var(--boxel-sp-xxl);
         height: 90%;
       }
+      :global(.boxel-card-container.choose-subscription-plan) {
+        border-radius: 20px;
+      }
     </style>
 
     <ModalContainer
-      @title='Choose Subscription Plan'
+      @title=''
       @isOpen={{@isModalOpen}}
       @onClose={{@onClose}}
       @cardContainerClass='choose-subscription-plan'
@@ -330,7 +371,7 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
 
       <:content>
         <div class='boxel-pricing-container'>
-          <h1 class='main-title'>Boxel Pricing</h1>
+          <h1 class='main-title'>Choose a Subscription Plan</h1>
 
           <p class='early-preview-banner'>
             Access to the Boxel Web App is free during early preview.
@@ -338,9 +379,10 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
 
           <p class='intro-text'>
             To use the included AI features, you need to have Boxel Credits in
-            your account. Starter plan includes 2,500 credit per month. To get
-            more credits, you can subscribe to a monthly plan or buy credit
-            packs.
+            your account. Starter plan includes 2,500 credit per month.
+            <br />
+            To get more credits, you can subscribe to a monthly plan or buy
+            credit packs.
           </p>
 
           <div class='subscription-header'>
@@ -407,16 +449,22 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
                   }}
                 >{{if this.isStarterPlan 'Manage Plan' 'Get Started'}}</button>
               </div>
-              <div class='feature-cell'>
+              <div
+                class='feature-cell'
+                data-label='Boxel Credits (For AI Generation)'
+              >
                 <div class='credit-value'>
                   <IconHexagon width='16px' height='16px' />
                   2,500
                 </div>
                 <div class='feature-note'>Monthly Boxel Credit</div>
               </div>
-              <div class='feature-cell'>Up to 10</div>
-              <div class='feature-cell'>500 MB</div>
-              <div class='feature-cell'>Included</div>
+              <div class='feature-cell' data-label='Workspaces'>Up to 10</div>
+              <div class='feature-cell' data-label='Cloud Storage'>500 MB</div>
+              <div
+                class='feature-cell'
+                data-label='Boxel Web App'
+              >Included</div>
             </div>
 
             <div
@@ -446,16 +494,22 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
                   }}
                 >{{if this.isCreatorPlan 'Manage Plan' 'Get Started'}}</button>
               </div>
-              <div class='feature-cell'>
+              <div
+                class='feature-cell'
+                data-label='Boxel Credits (For AI Generation)'
+              >
                 <div class='credit-value'>
                   <IconHexagon width='16px' height='16px' />
                   6,500
                 </div>
                 <div class='feature-note'>Monthly Boxel Credit</div>
               </div>
-              <div class='feature-cell'>Up to 25</div>
-              <div class='feature-cell'>5 GB</div>
-              <div class='feature-cell'>Included</div>
+              <div class='feature-cell' data-label='Workspaces'>Up to 25</div>
+              <div class='feature-cell' data-label='Cloud Storage'>5 GB</div>
+              <div
+                class='feature-cell'
+                data-label='Boxel Web App'
+              >Included</div>
             </div>
 
             <div
@@ -490,16 +544,22 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
                     'Get Started'
                   }}</button>
               </div>
-              <div class='feature-cell'>
+              <div
+                class='feature-cell'
+                data-label='Boxel Credits (For AI Generation)'
+              >
                 <div class='credit-value'>
                   <IconHexagon width='16px' height='16px' />
                   35,000
                 </div>
                 <div class='feature-note'>Monthly Boxel Credit</div>
               </div>
-              <div class='feature-cell'>Up to 150</div>
-              <div class='feature-cell'>20 GB</div>
-              <div class='feature-cell'>Included</div>
+              <div class='feature-cell' data-label='Workspaces'>Up to 150</div>
+              <div class='feature-cell' data-label='Cloud Storage'>20 GB</div>
+              <div
+                class='feature-cell'
+                data-label='Boxel Web App'
+              >Included</div>
             </div>
 
           </div>
diff --git a/packages/host/app/components/operator-mode/profile-info-popover.gts b/packages/host/app/components/operator-mode/profile-info-popover.gts
index cba9b0a8483..4f4a32ba488 100644
--- a/packages/host/app/components/operator-mode/profile-info-popover.gts
+++ b/packages/host/app/components/operator-mode/profile-info-popover.gts
@@ -62,9 +62,9 @@ export default class ProfileInfoPopover extends Component<ProfileInfoPopoverSign
         justify-content: space-between;
         flex-wrap: wrap;
         gap: var(--boxel-sp-lg);
-        margin-bottom: var(--boxel-sp);
+        margin-bottom: 0;
         padding-top: var(--boxel-sp-lg);
-        border-top: 1px solid var(--boxel-dark);
+        border-top: 1px solid #afafb7;
       }
       .info-group {
         display: flex;
@@ -102,6 +102,28 @@ export default class ProfileInfoPopover extends Component<ProfileInfoPopoverSign
         width: 100%;
         margin-top: var(--boxel-sp-xs);
       }
+      .buy-more-credits:not(.out-of-credit) button,
+      .upgrade-plan-button {
+        --boxel-button-font: 600 var(--boxel-font-xs);
+      }
+      .upgrade-plan-button {
+        --boxel-button-color: var(--boxel-teal);
+        --boxel-button-text-color: var(--boxel-dark);
+      }
+      .upgrade-plan-button:not(:disabled):hover,
+      .upgrade-plan-button:not(:disabled):active {
+        --boxel-button-color: #00c38e;
+      }
+      .signout-button:not(:disabled):hover,
+      .signout-button:not(:disabled):active,
+      .buy-more-credits:not(.out-of-credit) button:not(:disabled):hover,
+      .buy-more-credits:not(.out-of-credit) button:not(:disabled):active {
+        --boxel-button-color: #404040;
+      }
+      .buy-more-credits {
+        margin-top: 0;
+        margin-bottom: 4px;
+      }
       .buy-more-credits.out-of-credit {
         justify-content: center;
         margin-top: var(--boxel-sp-sm);
@@ -115,8 +137,8 @@ export default class ProfileInfoPopover extends Component<ProfileInfoPopoverSign
         color: var(--boxel-500);
         font: var(--boxel-font-xs);
         padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
-        border: 1px solid var(--boxel-300);
-        background: var(--boxel-50);
+        border: none;
+        background: #efeded;
         border-radius: calc(var(--boxel-border-radius) / 2);
         line-height: 1.3;
         display: flex;
@@ -139,6 +161,7 @@ export default class ProfileInfoPopover extends Component<ProfileInfoPopoverSign
         <BoxelButton
           @kind='primary-dark'
           @size='small'
+          class='signout-button'
           {{on 'click' this.logout}}
           data-test-signout-button
         >
@@ -157,6 +180,7 @@ export default class ProfileInfoPopover extends Component<ProfileInfoPopoverSign
           <BoxelButton
             @kind='primary-dark'
             @size='small'
+            class='upgrade-plan-button'
             {{on 'click' @toggleSubscriptionPlans}}
             data-test-upgrade-plan-button
           >Upgrade Plan</BoxelButton>
@@ -187,7 +211,7 @@ export default class ProfileInfoPopover extends Component<ProfileInfoPopoverSign
               @kind={{if
                 subscriptionData.isOutOfCredit
                 'primary'
-                'secondary-light'
+                'primary-dark'
               }}
               @size={{if subscriptionData.isOutOfCredit 'base' 'small'}}
               {{on 'click' @toggleProfileSettings}}
diff --git a/packages/host/app/components/operator-mode/submode-layout.gts b/packages/host/app/components/operator-mode/submode-layout.gts
index 1566dbfc3c4..9b3c89c839e 100644
--- a/packages/host/app/components/operator-mode/submode-layout.gts
+++ b/packages/host/app/components/operator-mode/submode-layout.gts
@@ -733,6 +733,9 @@ export default class SubmodeLayout extends Component<Signature> {
         box-shadow: var(--submode-bar-item-box-shadow);
         z-index: var(--host-profile-z-index);
       }
+      .profile-icon-button:hover {
+        --profile-avatar-icon-border: 1px solid rgba(255, 255, 255, 1);
+      }
 
       .workspace-button {
         --icon-color: var(--boxel-highlight);
@@ -779,6 +782,9 @@ export default class SubmodeLayout extends Component<Signature> {
         box-shadow: var(--submode-bar-item-box-shadow);
         outline: var(--submode-bar-item-outline);
       }
+      :deep(.open-search-field):hover {
+        outline-color: rgba(255, 255, 255, 1);
+      }
 
       @media (max-width: 26rem) {
         .expanded-card-header-slot:not(.has-expanded) {
diff --git a/packages/host/app/components/operator-mode/workspace-chooser/index.gts b/packages/host/app/components/operator-mode/workspace-chooser/index.gts
index b8709751ccc..3efcdc85364 100644
--- a/packages/host/app/components/operator-mode/workspace-chooser/index.gts
+++ b/packages/host/app/components/operator-mode/workspace-chooser/index.gts
@@ -585,6 +585,13 @@ export default class WorkspaceChooser extends Component<Signature> {
         --boxel-dropdown-hover-color: #272330;
         --boxel-dropdown-highlight-color: #3b394b;
       }
+      :global(.workspace-chooser-sort-dropdown .boxel-select-options-list) {
+        padding: 0;
+      }
+      :global(.workspace-chooser-sort-dropdown .boxel-select-option-item) {
+        padding-left: var(--boxel-sp);
+        padding-right: var(--boxel-sp);
+      }
       :global(
         .workspace-chooser-sort-dropdown
           .boxel-select-option-item.ember-power-select-option--selected.ember-power-select-option--highlighted
diff --git a/packages/host/app/components/operator-mode/workspace-chooser/workspace.gts b/packages/host/app/components/operator-mode/workspace-chooser/workspace.gts
index cff8c5977ff..bad9cdf2e15 100644
--- a/packages/host/app/components/operator-mode/workspace-chooser/workspace.gts
+++ b/packages/host/app/components/operator-mode/workspace-chooser/workspace.gts
@@ -745,9 +745,10 @@ export default class Workspace extends Component<Signature> {
         border-radius: var(--boxel-border-radius);
         box-shadow: 0 4px 16px rgba(0 0 0 / 25%);
         z-index: 10;
-        padding: var(--boxel-sp-xs) 0 var(--boxel-sp-2xs);
+        padding: var(--boxel-sp-xs) 0 0;
         display: flex;
         flex-direction: column;
+        overflow: hidden;
       }
       .dropdown-header {
         font-size: var(--boxel-font-size-2xs);
@@ -760,7 +761,7 @@ export default class Workspace extends Component<Signature> {
       .dropdown-list {
         list-style: none;
         margin: 0;
-        padding: var(--boxel-sp-4xs) var(--boxel-sp-2xs);
+        padding: 0;
       }
       .dropdown-list li {
         margin: 0;
@@ -771,10 +772,10 @@ export default class Workspace extends Component<Signature> {
         display: flex;
         align-items: center;
         gap: 0.5rem;
-        padding: var(--boxel-sp-2xs) 0.5rem;
+        padding: var(--boxel-sp-2xs) var(--boxel-sp-sm);
         background: none;
         border: none;
-        border-radius: var(--boxel-border-radius-sm);
+        border-radius: 0;
         cursor: pointer;
         text-align: left;
       }
diff --git a/packages/host/app/components/with-subscription-data.gts b/packages/host/app/components/with-subscription-data.gts
index ca7ab72b4e2..a13e5d553be 100644
--- a/packages/host/app/components/with-subscription-data.gts
+++ b/packages/host/app/components/with-subscription-data.gts
@@ -156,6 +156,10 @@ export default class WithSubscriptionData extends Component<WithSubscriptionData
     );
   }
 
+  private get displayMonthlyCreditIcon() {
+    return !this.isOutOfPlanCreditAllowance;
+  }
+
   private get isOutOfPlanCreditAllowance() {
     return (
       this.creditsAvailableInPlanAllowance == null ||
@@ -237,7 +241,7 @@ export default class WithSubscriptionData extends Component<WithSubscriptionData
           value=this.monthlyCreditText
           isLoading=this.isLoading
           isOutOfCredit=this.isOutOfPlanCreditAllowance
-          displayCreditIcon=true
+          displayCreditIcon=this.displayMonthlyCreditIcon
         )
         additionalCredit=(component
           Value