diff --git a/src/app/dim-ui/TileGrid.m.scss b/src/app/dim-ui/TileGrid.m.scss
index e7291ce554..710b741751 100644
--- a/src/app/dim-ui/TileGrid.m.scss
+++ b/src/app/dim-ui/TileGrid.m.scss
@@ -2,7 +2,7 @@
 
 .header {
   font-weight: 600;
-  font-size: 14px;
+  font-size: 16px;
   text-transform: uppercase;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -39,9 +39,18 @@
     outline: none;
   }
 
-  // On mobile, don't scale up items
-  @include phone-portrait {
-    --item-size: 50px;
+  // Don't scale up items even if users have item tiles set to large
+  --item-size: 50px;
+
+  &.compact {
+    grid-template-areas:
+      'icon title'
+      'icon details';
+    row-gap: 4px;
+  }
+
+  > :global(.item) {
+    grid-area: icon;
   }
 }
 
@@ -49,7 +58,8 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  grid-column-end: span 3;
+  grid-area: details;
+  text-wrap: pretty;
 }
 
 .selected {
@@ -66,8 +76,6 @@
   color: var(--theme-text);
   font-weight: bold;
   font-size: 16px;
-  grid-column-end: span 2;
-  &.withCorner {
-    grid-column-end: span 1;
-  }
+  grid-area: title;
+  text-wrap: balance;
 }
diff --git a/src/app/dim-ui/TileGrid.m.scss.d.ts b/src/app/dim-ui/TileGrid.m.scss.d.ts
index a892146d5c..cfb4c5b897 100644
--- a/src/app/dim-ui/TileGrid.m.scss.d.ts
+++ b/src/app/dim-ui/TileGrid.m.scss.d.ts
@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'compact': string;
   'details': string;
   'disabled': string;
   'header': string;
@@ -8,7 +9,6 @@ interface CssExports {
   'selected': string;
   'tile': string;
   'title': string;
-  'withCorner': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/src/app/dim-ui/TileGrid.tsx b/src/app/dim-ui/TileGrid.tsx
index 0dd677232f..de45b2e2bc 100644
--- a/src/app/dim-ui/TileGrid.tsx
+++ b/src/app/dim-ui/TileGrid.tsx
@@ -36,6 +36,7 @@ export function TileGridTile({
   selected,
   disabled,
   onClick,
+  compact,
 }: {
   className?: string;
   children: React.ReactNode;
@@ -45,12 +46,14 @@ export function TileGridTile({
   selected?: boolean;
   disabled?: boolean;
   onClick: React.MouseEventHandler<HTMLElement>;
+  compact?: boolean;
 }) {
   return (
     <div
       className={clsx(className, styles.tile, {
         [styles.selected]: selected,
         [styles.disabled]: disabled,
+        [styles.compact]: compact,
       })}
       onClick={disabled ? undefined : onClick}
       role="button"
@@ -60,7 +63,7 @@ export function TileGridTile({
     >
       <>
         {icon}
-        <div className={clsx(styles.title, { [styles.withCorner]: corner })}>{title}</div>
+        <div className={styles.title}>{title}</div>
         {corner}
         <div className={styles.details}>{children}</div>
       </>
diff --git a/src/app/loadout-builder/filter/ExoticTile.tsx b/src/app/loadout-builder/filter/ExoticTile.tsx
index 7b5b9620cf..a5fa5d4f43 100644
--- a/src/app/loadout-builder/filter/ExoticTile.tsx
+++ b/src/app/loadout-builder/filter/ExoticTile.tsx
@@ -42,6 +42,7 @@ export default function ExoticTile({
       disabled={exotic.isArmor1}
       title={title}
       icon={icon}
+      compact
     >
       {description}
     </TileGridTile>