diff --git a/addon/components/utils/account-banner.hbs b/addon/components/utils/account-banner.hbs
index 4d9c18d9..fefac133 100644
--- a/addon/components/utils/account-banner.hbs
+++ b/addon/components/utils/account-banner.hbs
@@ -10,76 +10,79 @@
       <OSS::Badge @image={{@image}} class="icon-in-badge" />
     {{/if}}
 
-    <div class="fx-col fx-gap-px-3 fx-1">
-      {{#if @title}}
-        <div class="fx-row fx-xalign-center">
-          <span class="font-weight-semibold font-size-md font-color-gray-900">{{@title}}</span>
-          {{#if (has-block "title-suffix")}}
-            {{yield to="title-suffix"}}
-          {{/if}}
-        </div>
-      {{/if}}
+    <div class="account-banner__wrapper">
+      <div class="account-banner__container">
+        {{#if @title}}
+          <div class="account-banner__container-title">
+            <span class="font-weight-semibold font-size-md font-color-gray-900">{{@title}}</span>
+            {{#if (has-block "title-suffix")}}
+              {{yield to="title-suffix"}}
+            {{/if}}
+          </div>
+        {{/if}}
 
-      {{#if (or @subtitle (has-block "custom-subtitle"))}}
-        {{#if @subtitle}}
-          <div class="fx-col fx-gap-px-3">
-            <div
-              class={{concat
-                "account-banner__selection fx-row fx-gap-px-6 fx-xalign-center "
-                (unless this.canSelectItem " account-banner__selection--unique-account")
-              }}
-              role="button"
-              data-control-name="account-banner-selection-subtitle"
-              {{on "click" this.toggleSelectionDropdown}}
-              {{on-click-outside this.closeSelectionDropdown}}
-            >
-              {{#if @required}}
-                <span
-                  class="fx-row font-color-gray-500 text-ellipsis font-size-sm"
-                  data-control-name="account-banner-selected-item-label"
-                  {{required-input}}
-                >
-                  {{@subtitle}}
-                </span>
-              {{else}}
-                <span
-                  class="font-color-gray-500 text-ellipsis font-size-sm"
-                  data-control-name="account-banner-selected-item-label"
-                >
-                  {{@subtitle}}
-                </span>
-              {{/if}}
+        {{#if (or @subtitle (has-block "custom-subtitle"))}}
+          {{#if @subtitle}}
+            <div class="fx-col fx-gap-px-3">
+              <div
+                class={{concat
+                  "account-banner__selection fx-row fx-gap-px-6 fx-xalign-center "
+                  (unless this.canSelectItem " account-banner__selection--unique-account")
+                }}
+                role="button"
+                data-control-name="account-banner-selection-subtitle"
+                {{on "click" this.toggleSelectionDropdown}}
+                {{on-click-outside this.closeSelectionDropdown}}
+              >
+                {{#if @required}}
+                  <span
+                    class="fx-row font-color-gray-500 text-ellipsis font-size-sm"
+                    data-control-name="account-banner-selected-item-label"
+                    {{required-input}}
+                  >
+                    {{@subtitle}}
+                  </span>
+                {{else}}
+                  <span
+                    class="font-color-gray-500 text-ellipsis font-size-sm"
+                    data-control-name="account-banner-selected-item-label"
+                  >
+                    {{@subtitle}}
+                  </span>
+                {{/if}}
 
-              {{#if this.canSelectItem}}
-                <OSS::Icon
-                  @icon={{if this.displaySelectableItems "fa-chevron-up" "fa-chevron-down"}}
-                  class="font-color-gray-500"
-                />
-                <div class="upf-floating-menu upf-floating-menu--{{if this.displaySelectableItems 'visible' 'hidden'}}">
-                  {{#each @selectableItems as |item|}}
-                    {{#if (has-block "selectable-item")}}
-                      {{yield item this.closeSelectionDropdown to="selectable-item"}}
-                    {{/if}}
-                  {{/each}}
-                </div>
+                {{#if this.canSelectItem}}
+                  <OSS::Icon
+                    @icon={{if this.displaySelectableItems "fa-chevron-up" "fa-chevron-down"}}
+                    class="font-color-gray-500"
+                  />
+                  <div
+                    class="upf-floating-menu upf-floating-menu--{{if this.displaySelectableItems 'visible' 'hidden'}}"
+                  >
+                    {{#each @selectableItems as |item|}}
+                      {{#if (has-block "selectable-item")}}
+                        {{yield item this.closeSelectionDropdown to="selectable-item"}}
+                      {{/if}}
+                    {{/each}}
+                  </div>
+                {{/if}}
+              </div>
+              {{#if this.feedbackMessage}}
+                <span class={{concat "font-color-" this.feedbackMessage.type "-500"}}>
+                  {{this.feedbackMessage.value}}
+                </span>
               {{/if}}
             </div>
-            {{#if this.feedbackMessage}}
-              <span class={{concat "font-color-" this.feedbackMessage.type "-500"}}>
-                {{this.feedbackMessage.value}}
-              </span>
-            {{/if}}
-          </div>
-        {{else if (has-block "custom-subtitle")}}
-          {{yield to="custom-subtitle"}}
+          {{else if (has-block "custom-subtitle")}}
+            {{yield to="custom-subtitle"}}
+          {{/if}}
         {{/if}}
+      </div>
+
+      {{#if (has-block "actions")}}
+        {{yield to="actions"}}
       {{/if}}
     </div>
-
-    {{#if (has-block "actions")}}
-      {{yield to="actions"}}
-    {{/if}}
-
   </div>
 
   {{#if @alert}}
diff --git a/app/styles/components/utils/account-banner.less b/app/styles/components/utils/account-banner.less
index 5212285a..c90dc7b4 100644
--- a/app/styles/components/utils/account-banner.less
+++ b/app/styles/components/utils/account-banner.less
@@ -1,4 +1,6 @@
 .account-banner {
+  container-type: inline-size;
+  container-name: account-banner;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -7,6 +9,7 @@
   border: 1px solid var(--color-border-default);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-px-18);
+  transition: ease-in-out 0.25s;
 
   &__selection {
     position: relative;
@@ -22,6 +25,30 @@
     }
   }
 
+  &__wrapper {
+    display: flex;
+    flex: 1;
+    gap: var(--spacing-px-3);
+    flex-wrap: wrap;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: var(--spacing-px-3);
+
+    &-title {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-px-6);
+
+      > span:first-child {
+        white-space: nowrap;
+      }
+    }
+  }
+
   &--plain {
     .background-color-white;
   }
@@ -29,7 +56,6 @@
   &--selected {
     border-color: var(--color-primary-500);
     background-color: var(--color-primary-50);
-    transition: ease-in-out 0.25s;
   }
 
   &--error {
@@ -63,8 +89,6 @@
     }
   }
 
-  transition: ease-in-out 0.25s;
-
   .upf-alert {
     overflow: visible;
 
@@ -77,3 +101,27 @@
     }
   }
 }
+
+@container account-banner (width < 340px) {
+  .account-banner:has(.account-banner__container-title > *:nth-child(2)) {
+    > div:first-child {
+      align-items: flex-start;
+    }
+  }
+
+  .account-banner:not(.account-banner--disabled):has(.account-banner__container-title > *:nth-child(2)) {
+    .account-banner__wrapper {
+      flex-direction: column;
+
+      .upf-btn {
+        flex: 1;
+      }
+    }
+  }
+
+  .account-banner--disabled:has(.account-banner__container-title > *:nth-child(2)) {
+    .account-banner__container-title {
+      flex-wrap: wrap;
+    }
+  }
+}