diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js
index e145fefc0d9..feae5013fee 100644
--- a/packages/craftcms-legacy/cp/src/Craft.js
+++ b/packages/craftcms-legacy/cp/src/Craft.js
@@ -98,5 +98,8 @@ import './js/UriFormatGenerator.js';
 import './js/UserIndex.js';
 
 // Custom elements
+// craft-element-label is superseded by @craftcms/ui's craft-truncate, but keep
+// it registered for backwards compatibility (e.g. plugins / the yii2 adapter).
+import '@craftcms/ui/components/truncate/truncate';
 import './js/CraftElementLabel';
 import './js/CraftProxyScrollbar';
diff --git a/packages/craftcms-legacy/cp/src/js/BaseElementSelectInput.js b/packages/craftcms-legacy/cp/src/js/BaseElementSelectInput.js
index d4d5cf3a79c..bab121ec59b 100644
--- a/packages/craftcms-legacy/cp/src/js/BaseElementSelectInput.js
+++ b/packages/craftcms-legacy/cp/src/js/BaseElementSelectInput.js
@@ -228,10 +228,10 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
           onBeforeDragStart: () => {
             this.elementEditor?.pause();
 
-            // Disable all craft-element-labels so connectedCallback()
-            // doesn't get fired constantly during drag
+            // Disable the labels' overflow tooltips while dragging so they
+            // don't recompute/pop up during the drag.
             this.$elementsContainer
-              .find('craft-element-label')
+              .find('craft-truncate')
               .attr('disabled', true);
           },
           onDragStop: () => {
@@ -239,7 +239,7 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
 
             // Put things back where we found them.
             this.$elementsContainer
-              .find('craft-element-label')
+              .find('craft-truncate')
               .removeAttr('disabled');
           },
           onSortChange: () => {
diff --git a/packages/craftcms-legacy/cp/src/js/CraftElementLabel.js b/packages/craftcms-legacy/cp/src/js/CraftElementLabel.js
index b72d09367bd..f6f9fb2a3b8 100644
--- a/packages/craftcms-legacy/cp/src/js/CraftElementLabel.js
+++ b/packages/craftcms-legacy/cp/src/js/CraftElementLabel.js
@@ -1,6 +1,9 @@
 /** global: $ */
 /** global: jQuery */
 
+// Fallback for generating a unique invoker id when the element itself has none.
+let elementLabelTooltipId = 0;
+
 /**
  * Element label
  *
@@ -56,7 +59,9 @@ class CraftElementLabel extends HTMLElement {
   }
 
   update() {
-    this.desiredWidth = this.calculateWidth(this.innerText);
+    // Measure the label link's text, not `this.innerText`, so the tooltip's
+    // own (light-DOM) text content can't skew the overflow calculation.
+    this.desiredWidth = this.calculateWidth(this.labelLink.innerText);
     this.hasOverflow = this.desiredWidth > this.scrollWidth;
 
     // If the label has an overflow, add a tooltip
@@ -75,38 +80,37 @@ class CraftElementLabel extends HTMLElement {
   }
 
   createTooltip() {
-    this.tooltip = document.createElement('craft-tooltip');
-    this.tooltip.setAttribute('self-managed', 'true');
-    this.tooltip.setAttribute('text', this.innerText);
-    this.tooltip.setAttribute('aria-hidden', 'true');
-
-    // Make sure tooltips created show ellipses
-    Object.assign(this.tooltip.style, {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-    });
+    const labelLink = this.labelLink;
+
+    // The new craft-tooltip references its invoker (the label link) by id
+    // rather than wrapping it, so make sure the link has one. The CSS on
+    // `.label-link` already handles the visual ellipsis truncation.
+    if (!labelLink.id) {
+      labelLink.id = this.id
+        ? `${this.id}-link`
+        : `element-label-link-${elementLabelTooltipId++}`;
+    }
 
-    // If there's a context label, make it a little nicer
+    // The tooltip shows the full, untruncated label text; the tooltip content
+    // lives in its default slot. Present a context label (e.g. a draft name)
+    // in parentheses, matching the inline label.
+    let text = labelLink.innerText;
     const contextLabel = this.querySelector('.context-label');
     if (contextLabel) {
-      this.tooltip.innerText = this.tooltip.innerText.replace(
+      text = text.replace(
         contextLabel.innerText,
         ` (${contextLabel.innerText})`
       );
     }
 
-    this.insertBefore(this.tooltip, this.labelLink);
-    this.tooltip.appendChild(this.labelLink);
+    this.tooltip = document.createElement('craft-tooltip');
+    this.tooltip.setAttribute('for', labelLink.id);
+    this.tooltip.textContent = text;
+
+    this.appendChild(this.tooltip);
   }
 
   disconnectedCallback() {
-    // put the .label-link back into <craft-element-label>
-    // so that when connectedCallback() is called after insetBefore/insertAfter
-    // everything can get initialised as expected
-    // we can't use Element.moveBefore/Element.moveAfter as those are experimental at the moment and not available in Safari & FF
-    this.append(this.labelLink);
-
     this.tooltip?.remove();
     if (this.$tabs?.length) {
       this.$tabs.data('tabs')?.off('selectTab');
diff --git a/packages/craftcms-legacy/cp/src/js/ElementEditorSlideout.js b/packages/craftcms-legacy/cp/src/js/ElementEditorSlideout.js
index 29d5158965b..bc56878ed30 100644
--- a/packages/craftcms-legacy/cp/src/js/ElementEditorSlideout.js
+++ b/packages/craftcms-legacy/cp/src/js/ElementEditorSlideout.js
@@ -175,7 +175,7 @@ Craft.ElementEditorSlideout = Craft.CpScreenSlideout.extend(
       if (e?.response?.data?.invalidNestedElementIds) {
         const $cards = this.$content.find('.element.card').removeClass('error');
         $cards
-          .find('craft-element-label > span[data-icon="triangle-exclamation"]')
+          .find('craft-truncate > span[data-icon="triangle-exclamation"]')
           .remove();
         if (e.response.data.invalidNestedElementIds.length) {
           const $errorCards = $cards
@@ -186,7 +186,7 @@ Craft.ElementEditorSlideout = Craft.CpScreenSlideout.extend(
             )
             .addClass('error');
           for (let i = 0; i < $errorCards.length; i++) {
-            const $label = $errorCards.eq(i).find('craft-element-label');
+            const $label = $errorCards.eq(i).find('craft-truncate');
             $('<span/>', {
               'data-icon': 'triangle-exclamation',
               'aria-label': Craft.t('app', 'Error'),
diff --git a/packages/craftcms-legacy/cp/src/js/TagSelectInput.js b/packages/craftcms-legacy/cp/src/js/TagSelectInput.js
index d489b9974b0..c53f51a8b9a 100644
--- a/packages/craftcms-legacy/cp/src/js/TagSelectInput.js
+++ b/packages/craftcms-legacy/cp/src/js/TagSelectInput.js
@@ -332,7 +332,7 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend(
         class: 'chip-content',
       }).appendTo($element);
 
-      const $titleContainer = $('<craft-element-label/>', {
+      const $titleContainer = $('<craft-truncate/>', {
         class: 'label',
       }).appendTo($chipContent);
 
diff --git a/packages/craftcms-ui/src/components/breadcrumb-item/breadcrumb-item.ts b/packages/craftcms-ui/src/components/breadcrumb-item/breadcrumb-item.ts
index da10c484f65..06334027b43 100644
--- a/packages/craftcms-ui/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/packages/craftcms-ui/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -20,6 +20,7 @@ export default class CraftBreadcrumbItem extends LitElement {
     :host {
       white-space: nowrap;
       display: inline-flex;
+      gap: var(--c-spacing-sm);
       align-items: center;
       color: inherit;
     }
@@ -36,11 +37,11 @@ export default class CraftBreadcrumbItem extends LitElement {
       text-decoration: underline;
     }
 
-    slot[name='start']::slotted(*) {
+    slot[name='prefix']::slotted(*) {
       margin-inline-end: var(--c-spacing-sm);
     }
 
-    slot[name='end']::slotted(*) {
+    slot[name='suffix']::slotted(*) {
       margin-inline-start: var(--c-spacing-sm);
     }
 
@@ -63,9 +64,9 @@ export default class CraftBreadcrumbItem extends LitElement {
       : html`<span part="label" class="label"><slot></slot></span>`;
 
     return html`
-      <slot name="start" part="start"></slot>
+      <slot name="prefix" part="prefix"></slot>
       ${label}
-      <slot name="end" part="end"></slot>
+      <slot name="suffix" part="suffix"></slot>
       <slot name="separator" part="separator" aria-hidden="true"></slot>
     `;
   }
diff --git a/packages/craftcms-ui/src/components/chip/chip.styles.ts b/packages/craftcms-ui/src/components/chip/chip.styles.ts
index 4cd52e029d0..3a1c5791f77 100644
--- a/packages/craftcms-ui/src/components/chip/chip.styles.ts
+++ b/packages/craftcms-ui/src/components/chip/chip.styles.ts
@@ -5,6 +5,10 @@ export default css`
     display: contents;
   }
 
+  ::slotted([slot='status']) {
+    display: inline-flex;
+  }
+
   .cp-chip {
     --_min-height: var(--c-chip-height, none);
     --_thumb-size: calc(24rem / 16);
@@ -72,19 +76,25 @@ export default css`
   }
 
   .cp-chip__prefix {
+    position: relative;
     padding-inline-end: var(--c-spacing-sm);
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
   }
 
   .cp-chip__suffix {
     padding-inline-start: var(--c-spacing-md);
   }
 
-  .cp-chip__indicator {
+  .cp-chip__status {
     display: inline-flex;
-    padding-inline: var(--c-spacing-sm);
+    padding-inline: var(--c-spacing-xs);
   }
 
   .cp-chip__thumbnail {
+    position: relative;
     padding: var(--c-spacing-sm);
     /*border-radius: calc(var(--_radius) - var(--c-spacing-xs));*/
   }
diff --git a/packages/craftcms-ui/src/components/chip/chip.ts b/packages/craftcms-ui/src/components/chip/chip.ts
index cff876fe53f..3b848997fe3 100644
--- a/packages/craftcms-ui/src/components/chip/chip.ts
+++ b/packages/craftcms-ui/src/components/chip/chip.ts
@@ -1,5 +1,5 @@
 import {property} from 'lit/decorators.js';
-import type {CSSResultGroup, PropertyValueMap, PropertyValues} from 'lit';
+import type {CSSResultGroup, PropertyValues} from 'lit';
 import {html, LitElement, nothing} from 'lit';
 import styles from './chip.styles.js';
 import {classMap} from 'lit/directives/class-map.js';
@@ -52,25 +52,30 @@ export default class CraftChip extends LitElement {
   /** Shortcut for adding an icon as the prefix */
   @property() icon: string | null = null;
 
+  @property({attribute: 'show-indicators', type: Boolean})
+  showIndicators: boolean = false;
+  @property({attribute: 'show-status', type: Boolean})
+  showStatus: boolean = false;
+  @property({attribute: 'show-thumb', type: Boolean}) showThumb: boolean =
+    false;
+  @property({type: Boolean}) selectable: boolean = false;
+
   #thumbLoader = new ThumbnailLoader();
 
   renderPrefix() {
-    const hasThumb = !!this.querySelector('[slot="thumbnail"]');
-    const hasIndicator = !!this.querySelector('[slot="indicator"]');
-
-    return html` <div class="cp-chip__prefix" part="prefix">
+    return html`<div class="cp-chip__prefix" part="prefix">
       <slot name="prefix">
-        ${hasThumb
+        ${this.showThumb
           ? html`<slot class="cp-chip__thumbnail" name="thumbnail"></slot>`
           : nothing}
-        ${hasIndicator
-          ? html`<slot class="cp-chip__indicator" name="indicator"></slot>`
+        ${this.icon
+          ? html`<slot class="cp-chip__icon" name="icon"
+              ><craft-icon name="${this.icon}"></craft-icon
+            ></slot>`
+          : nothing}
+        ${this.showStatus
+          ? html`<slot class="cp-chip__status" name="status"></slot>`
           : nothing}
-        <slot class="cp-chip__icon" name="icon">
-          ${this.icon
-            ? html` <craft-icon name="${this.icon}"></craft-icon>`
-            : nothing}
-        </slot>
       </slot>
     </div>`;
   }
@@ -99,8 +104,13 @@ export default class CraftChip extends LitElement {
           'cp-chip--medium': this.size === 'medium',
           'cp-chip--large': this.size === 'large',
           'cp-chip--plain': this.appearance === Appearance.Plain,
+          'cp-chip--selectable': this.selectable,
+          'cp-chip--show-thumb': this.showThumb,
+          'cp-chip--show-indicators': this.showIndicators,
+          'cp-chip--show-status': this.showStatus,
         })}"
       >
+        ${this.selectable ? html` <input type="checkbox" />` : nothing}
         ${renderPrefix ? this.renderPrefix() : nothing}
         <div class="cp-chip__body">
           <slot></slot>
diff --git a/packages/craftcms-ui/src/components/indicator/indicator.ts b/packages/craftcms-ui/src/components/indicator/indicator.ts
index 4952ff06f4e..6e9fc4ac3ea 100644
--- a/packages/craftcms-ui/src/components/indicator/indicator.ts
+++ b/packages/craftcms-ui/src/components/indicator/indicator.ts
@@ -17,6 +17,10 @@ export default class CraftIndicator extends LitElement {
   static override styles = [
     variantsStyles,
     css`
+      :host {
+        display: contents;
+      }
+
       .indicator {
         --_fill: var(--fill, var(--c-color-fill-loud));
         --_size: var(--size, 0.5em);
diff --git a/packages/craftcms-ui/src/components/truncate/truncate.stories.ts b/packages/craftcms-ui/src/components/truncate/truncate.stories.ts
new file mode 100644
index 00000000000..2eabdf6d4ea
--- /dev/null
+++ b/packages/craftcms-ui/src/components/truncate/truncate.stories.ts
@@ -0,0 +1,61 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+
+import {html} from 'lit';
+
+import './truncate.js';
+
+const meta = {
+  title: 'Components/Truncate',
+  component: 'craft-truncate',
+  args: {
+    width: '200px',
+    content:
+      'This is a fairly long piece of text that will be truncated when it does not fit',
+    placement: 'top',
+  },
+  argTypes: {
+    width: {control: {type: 'text'}},
+    content: {control: {type: 'text'}},
+    placement: {
+      control: {type: 'select'},
+      options: [
+        'top-start',
+        'top',
+        'top-end',
+        'right-start',
+        'right',
+        'right-end',
+        'bottom-end',
+        'bottom',
+        'bottom-start',
+        'left-end',
+        'left',
+        'left-start',
+      ],
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  render: (args) => html`
+    <div
+      style="width: ${args.width}; border: 1px dashed var(--c-color-border-quiet, #ccc);"
+    >
+      <craft-truncate placement="${args.placement}"
+        >${args.content}</craft-truncate
+      >
+    </div>
+  `,
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Playground: Story = {};
+
+export const FitsWithoutTooltip: Story = {
+  args: {
+    width: '400px',
+    content: 'Short label',
+  },
+};
diff --git a/packages/craftcms-ui/src/components/truncate/truncate.styles.ts b/packages/craftcms-ui/src/components/truncate/truncate.styles.ts
new file mode 100644
index 00000000000..ab475d3ea47
--- /dev/null
+++ b/packages/craftcms-ui/src/components/truncate/truncate.styles.ts
@@ -0,0 +1,17 @@
+import {css} from 'lit';
+
+export default css`
+  :host {
+    display: inline-flex;
+    /* Allow the element to shrink below its content size in flex/grid layouts
+       so the text actually truncates instead of forcing the container wider. */
+    min-width: 0;
+  }
+
+  .truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
diff --git a/packages/craftcms-ui/src/components/truncate/truncate.test.ts b/packages/craftcms-ui/src/components/truncate/truncate.test.ts
new file mode 100644
index 00000000000..93154a79467
--- /dev/null
+++ b/packages/craftcms-ui/src/components/truncate/truncate.test.ts
@@ -0,0 +1,62 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import type CraftTruncate from './truncate.js';
+import './truncate.js';
+
+async function fixture(text: string): Promise<CraftTruncate> {
+  const el = document.createElement('craft-truncate') as CraftTruncate;
+  el.textContent = text;
+  document.body.append(el);
+  await el.updateComplete;
+  return el;
+}
+
+// happy-dom has no layout engine, so fake the inner span's metrics and nudge a
+// re-measure through a slotchange.
+function simulateOverflow(el: CraftTruncate, overflow: boolean) {
+  const span = el.renderRoot.querySelector('.truncate') as HTMLElement;
+  Object.defineProperty(span, 'scrollWidth', {
+    value: overflow ? 500 : 100,
+    configurable: true,
+  });
+  Object.defineProperty(span, 'clientWidth', {value: 100, configurable: true});
+  span.querySelector('slot')!.dispatchEvent(new Event('slotchange'));
+  return el.updateComplete;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('craft-truncate', () => {
+  it('renders its content in a truncating container', async () => {
+    const el = await fixture('Hello world');
+    const truncate = el.renderRoot.querySelector('.truncate');
+    expect(truncate).not.toBeNull();
+    expect(truncate!.querySelector('slot')).not.toBeNull();
+  });
+
+  it('does not render a tooltip when the content fits', async () => {
+    const el = await fixture('Short');
+    await simulateOverflow(el, false);
+    expect(el.renderRoot.querySelector('craft-tooltip')).toBeNull();
+  });
+
+  it('renders a tooltip with the full text when the content overflows', async () => {
+    const el = await fixture('A very long label that will not fit');
+    await simulateOverflow(el, true);
+
+    const tooltip = el.renderRoot.querySelector('craft-tooltip');
+    expect(tooltip).not.toBeNull();
+    expect(tooltip!.getAttribute('for')).toBe('content');
+    expect(tooltip!.textContent).toContain(
+      'A very long label that will not fit'
+    );
+  });
+
+  it('does not render a tooltip when disabled, even on overflow', async () => {
+    const el = await fixture('A very long label that will not fit');
+    el.disabled = true;
+    await simulateOverflow(el, true);
+    expect(el.renderRoot.querySelector('craft-tooltip')).toBeNull();
+  });
+});
diff --git a/packages/craftcms-ui/src/components/truncate/truncate.ts b/packages/craftcms-ui/src/components/truncate/truncate.ts
new file mode 100644
index 00000000000..7b8b3d998b1
--- /dev/null
+++ b/packages/craftcms-ui/src/components/truncate/truncate.ts
@@ -0,0 +1,93 @@
+import {html, LitElement} from 'lit';
+import {property, query, state} from 'lit/decorators.js';
+
+import '../tooltip/tooltip';
+import styles from './truncate.styles.js';
+
+/**
+ * craft-truncate renders its content on a single line, clipping it with an
+ * ellipsis when it doesn't fit, and revealing the full text in a tooltip on
+ * hover/focus. When the content fits, no tooltip is rendered.
+ *
+ * The element truncates against its own width, so give it a bounded width via
+ * the surrounding layout (e.g. a fixed width, or `flex: 1; min-width: 0` in a
+ * flex row).
+ *
+ * @example <craft-truncate>A label that might be too long to fit</craft-truncate>
+ *
+ * @slot - The content to truncate. Its text is used for the tooltip.
+ */
+export default class CraftTruncate extends LitElement {
+  static override styles = styles;
+
+  /** Popper placement for the overflow tooltip, e.g. `top`, `right-start`. */
+  @property({reflect: true}) placement = 'top';
+
+  /** Disables the overflow tooltip. The content still truncates visually. */
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  /** Whether the content currently overflows its container. */
+  @state() private overflowing = false;
+
+  /** The full, untruncated text shown in the tooltip. */
+  @state() private text = '';
+
+  @query('.truncate') private content?: HTMLElement;
+
+  #resizeObserver =
+    typeof ResizeObserver !== 'undefined'
+      ? new ResizeObserver(() => this.#measure())
+      : null;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    // Observing fires an initial callback once the element has been laid out,
+    // which seeds the first measurement.
+    this.#resizeObserver?.observe(this);
+  }
+
+  override disconnectedCallback() {
+    this.#resizeObserver?.disconnect();
+    super.disconnectedCallback();
+  }
+
+  protected override firstUpdated() {
+    this.#measure();
+  }
+
+  #measure() {
+    this.text = (this.textContent ?? '').replace(/\s+/g, ' ').trim();
+
+    const el = this.content;
+    this.overflowing = !!el && el.scrollWidth > el.clientWidth;
+  }
+
+  #onSlotChange() {
+    this.#measure();
+  }
+
+  override render() {
+    const showTooltip = this.overflowing && !this.disabled;
+
+    return html`
+      <span class="truncate" id="content">
+        <slot @slotchange=${this.#onSlotChange}></slot>
+      </span>
+      ${showTooltip
+        ? html`<craft-tooltip for="content" placement=${this.placement}
+            >${this.text}</craft-tooltip
+          >`
+        : ''}
+    `;
+  }
+}
+
+if (!customElements.get('craft-truncate')) {
+  customElements.define('craft-truncate', CraftTruncate);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-truncate': CraftTruncate;
+  }
+}
diff --git a/packages/craftcms-ui/src/index.ts b/packages/craftcms-ui/src/index.ts
index dd43dfd4354..f62317d11fd 100644
--- a/packages/craftcms-ui/src/index.ts
+++ b/packages/craftcms-ui/src/index.ts
@@ -66,6 +66,7 @@ export {default as CraftTabs} from './components/tabs/tabs.js';
 export {default as CraftTab} from './components/tab/tab.js';
 export {default as CraftTextarea} from './components/textarea/textarea.js';
 export {default as CraftTooltip} from './components/tooltip/tooltip.js';
+export {default as CraftTruncate} from './components/truncate/truncate.js';
 export {default as CraftVisuallyHidden} from './components/visually-hidden/visually-hidden.js';
 export {default as CraftThumbnail} from './components/thumbnail/thumbnail.js';
 export {default as CraftThumbnailLoader} from './components/thumbnail-loader/thumbnail-loader.js';
diff --git a/packages/craftcms-ui/src/utilities/api/actionClient.ts b/packages/craftcms-ui/src/utilities/api/actionClient.ts
index e63a267c062..e01775d60ec 100644
--- a/packages/craftcms-ui/src/utilities/api/actionClient.ts
+++ b/packages/craftcms-ui/src/utilities/api/actionClient.ts
@@ -40,7 +40,8 @@ actionClient.interceptors.request.use(async (config) => {
   // trigger + action trigger (e.g. `/admin/actions/fields/render-settings`),
   // so the base only needs the scheme + host (+ port). `URL.origin` supplies
   // all three without the `protocol` trailing-colon / port-doubling pitfalls.
-  config.baseURL = new URL(getActionUrl()).origin;
+  const {origin, pathname} = new URL(getActionUrl());
+  config.baseURL = `${origin}/${pathname}`;
 
   // Set X-Requested-With header
   config.headers.set('X-Requested-With', 'XMLHttpRequest');
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 11002ca9e64..a065fb7c494 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -159,3 +159,17 @@ Form controls
   min-height: 0;
   overflow: visible;
 }
+
+/**
+Drag-and-drop move targets
+
+Shared highlight for any element the asset-move drag marks as the active drop
+target — folder rows, sidebar sources, and breadcrumb crumbs alike. Garnish adds
+`.active-drop-target` while the cursor is over a valid target.
+ */
+[data-folder-drop-target].active-drop-target {
+  outline: 2px solid var(--c-color-accent-border-loud);
+  outline-offset: -2px;
+  border-radius: var(--c-radius-sm);
+  background-color: var(--c-color-accent-fill-quiet);
+}
diff --git a/resources/js/common/components/Breadcrumbs.vue b/resources/js/common/components/Breadcrumbs.vue
index abdc701454b..654c66c77f0 100644
--- a/resources/js/common/components/Breadcrumbs.vue
+++ b/resources/js/common/components/Breadcrumbs.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
   import CpLink from '@/common/components/CpLink.vue';
   import {t} from '@craftcms/ui';
+  import {computed, getCurrentInstance} from 'vue';
 
   withDefaults(
     defineProps<{
       items: Array<{
         url?: string | null;
         label: string;
+        icon?: string;
+        /** Extra attributes for the crumb (e.g. drag-and-drop drop-target hooks). */
+        attrs?: Record<string, string>;
       }>;
       separator?: string;
     }>(),
@@ -14,48 +18,58 @@
       separator: '/',
     }
   );
-</script>
 
-<template>
-  <nav :aria-label="t('Breadcrumbs')">
-    <ul class="breadcrumbs">
-      <li
-        v-for="(item, idx) in items"
-        :key="idx"
-        :class="{
-          'breadcrumb-item': true,
-          'breadcrumb-item--active': idx === items.length - 1,
-        }"
-      >
-        <template v-if="item.url">
-          <CpLink :href="item.url">{{ item.label }}</CpLink>
-        </template>
-        <template v-else>
-          {{ item.label }}
-        </template>
+  const emit = defineEmits<{navigate: [url: string]}>();
 
-        <span class="separator" v-if="idx < items.length - 1">{{
-          separator
-        }}</span>
-      </li>
-    </ul>
-  </nav>
-</template>
+  // Opt-in SPA navigation: when a parent listens for `navigate`, intercept
+  // plain left-clicks and hand the URL up (e.g. to preserve the current view
+  // state) instead of letting CpLink do a full Inertia visit. Without a
+  // listener, breadcrumbs behave as ordinary CpLinks.
+  const instance = getCurrentInstance();
+  const interceptNavigation = computed(
+    () => !!instance?.vnode.props?.onNavigate
+  );
 
-<style scoped lang="scss">
-  .breadcrumbs {
-    display: flex;
-  }
+  function onNavigate(event: MouseEvent, url: string) {
+    // Leave modified clicks (open in new tab/window) to the real href.
+    if (
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey ||
+      event.button !== 0
+    ) {
+      return;
+    }
 
-  .breadcrumb-item {
+    event.preventDefault();
+    emit('navigate', url);
   }
+</script>
 
-  .breadcrumb-item--active {
-    font-weight: bold;
-    color: currentColor;
-  }
+<template>
+  <craft-breadcrumbs :label="t('Breadcrumbs')">
+    <craft-breadcrumb-item
+      v-for="(item, idx) in items"
+      :key="idx"
+      v-bind="item.attrs"
+    >
+      <template v-if="item.icon">
+        <craft-icon :name="item.icon" slot="prefix"></craft-icon>
+      </template>
+      <template v-if="item.url">
+        <CpLink
+          :href="item.url"
+          :inertia="interceptNavigation ? false : undefined"
+          @click="interceptNavigation && onNavigate($event, item.url)"
+          >{{ item.label }}</CpLink
+        >
+      </template>
+      <template v-else>
+        {{ item.label }}
+      </template>
+    </craft-breadcrumb-item>
+  </craft-breadcrumbs>
+</template>
 
-  .separator {
-    padding: 0 var(--c-spacing-md);
-  }
-</style>
+<style scoped lang="scss"></style>
diff --git a/resources/js/modules/elements/ElementSources.vue b/resources/js/modules/elements/ElementSources.vue
index 508d985a5ff..157aa98d43f 100644
--- a/resources/js/modules/elements/ElementSources.vue
+++ b/resources/js/modules/elements/ElementSources.vue
@@ -94,6 +94,26 @@
       },
     });
   }
+
+  // Folder/volume sources double as drag-and-drop move targets: their `data`
+  // carries the backend `folder-id` / `can-move-to` flags. Inert unless an
+  // asset-move drag is set up on the page.
+  function sourceMoveAttrs(source: Source): Record<string, string> {
+    const data = 'data' in source ? source.data : undefined;
+    const folderId = data?.['folder-id'];
+    if (folderId == null || folderId === false) {
+      return {};
+    }
+
+    const attrs: Record<string, string> = {
+      'data-folder-drop-target': '',
+      'data-folder-id': String(folderId),
+    };
+    if (data?.['can-move-to']) {
+      attrs['data-can-move-to'] = '';
+    }
+    return attrs;
+  }
 </script>
 
 <template>
@@ -114,6 +134,7 @@
               :href="sourceUrl(child.key)"
               :active="child.key === activeKey"
               :data-group="source.heading"
+              v-bind="sourceMoveAttrs(child)"
               @mousedown.exact="prefetchSource(child.key)"
               @click.exact.prevent="visitSource(child.key)"
             >
@@ -126,6 +147,7 @@
         <craft-nav-item
           :href="sourceUrl(source.key)"
           :active="source.key === activeKey"
+          v-bind="sourceMoveAttrs(source)"
           @mousedown.exact="prefetchSource(source.key)"
           @click.exact.prevent="visitSource(source.key)"
         >
diff --git a/resources/js/modules/elements/components/BaseElementIndex.vue b/resources/js/modules/elements/components/BaseElementIndex.vue
index 01095046e38..85aba0591bd 100644
--- a/resources/js/modules/elements/components/BaseElementIndex.vue
+++ b/resources/js/modules/elements/components/BaseElementIndex.vue
@@ -111,6 +111,10 @@
       <slot name="header"></slot>
     </div>
 
+    <div class="element-index__navbar" v-if="$slots.navbar">
+      <slot name="navbar"></slot>
+    </div>
+
     <div class="element-index__body" :aria-busy="loading ? 'true' : undefined">
       <slot name="body"></slot>
     </div>
@@ -208,6 +212,7 @@
   }
 
   .element-index__header,
+  .element-index__navbar,
   .element-index__footer {
     background-color: var(--c-color-neutral-fill-quiet);
     padding: var(--c-spacing-md);
diff --git a/resources/js/modules/elements/components/DataTable.vue b/resources/js/modules/elements/components/DataTable.vue
index 90c550e77b7..048ed9f75a1 100644
--- a/resources/js/modules/elements/components/DataTable.vue
+++ b/resources/js/modules/elements/components/DataTable.vue
@@ -9,6 +9,7 @@
   import Empty from '@/common/components/Empty.vue';
   import {usePage} from '@inertiajs/vue3';
   import {useElementIndexSelection} from '@/modules/elements/composables/useElementIndexSelection';
+  import {useFolderNavigation} from '@/modules/elements/composables/useFolderNavigation';
 
   const props = withDefaults(
     defineProps<{
@@ -51,6 +52,22 @@
     pendingShiftKey.value = event.shiftKey;
   }
 
+  const {navigateToFolder, isFolderRow, rowMoveAttrs} = useFolderNavigation();
+
+  // Folder rows (asset index) navigate into the folder on click, except when
+  // the click lands on an interactive control (checkbox, a real link, …).
+  function onRowClick(row: any, event: MouseEvent) {
+    if (!isFolderRow(row.original)) return;
+    if (
+      (event.target as HTMLElement).closest(
+        'a[href], button, input, craft-checkbox, craft-reorder-button'
+      )
+    ) {
+      return;
+    }
+    navigateToFolder(row.original.folderUrl);
+  }
+
   const {setRowRef, setHandleRef, getDragState, getDropState} =
     useReorderableRows({
       getRowIds: () => props.table.getRowModel().rows.map((row: any) => row.id),
@@ -177,6 +194,10 @@
       case ' ':
       case 'Enter':
         event.preventDefault();
+        if (isFolderRow(row.original)) {
+          navigateToFolder(row.original.folderUrl);
+          break;
+        }
         toggleRow(row);
         break;
       case 'ArrowDown': {
@@ -308,12 +329,15 @@
           :key="row.id"
           :ref="(el) => setRowRef(el as HTMLTableRowElement, row.id)"
           :tabindex="selectable ? 0 : undefined"
+          v-bind="rowMoveAttrs(row.original)"
           :class="{
             row: true,
             'cp-table-row': true,
+            'cp-table-row--folder': isFolderRow(row.original),
             'row--dragging':
               !readOnly && getDragState(row.id).type === 'is-dragging',
           }"
+          @click="onRowClick(row, $event)"
           @keydown="onRowKeydown(row, rowIdx, $event)"
         >
           <template v-if="reorderable && !readOnly">
@@ -440,4 +464,8 @@
   :deep(.row--dragging) {
     opacity: 0.4;
   }
+
+  .cp-table-row--folder {
+    cursor: pointer;
+  }
 </style>
diff --git a/resources/js/modules/elements/components/ElementCards.vue b/resources/js/modules/elements/components/ElementCards.vue
index a8a51887e0c..344b972cc5f 100644
--- a/resources/js/modules/elements/components/ElementCards.vue
+++ b/resources/js/modules/elements/components/ElementCards.vue
@@ -6,6 +6,7 @@
   import Empty from '@/common/components/Empty.vue';
   import DynamicHtmlRenderer from '@/common/components/DynamicHtmlRenderer.vue';
   import {useElementIndexSelection} from '@/modules/elements/composables/useElementIndexSelection';
+  import {useFolderNavigation} from '@/modules/elements/composables/useFolderNavigation';
 
   type CardElement = Record<any, any>;
 
@@ -39,6 +40,22 @@
     pendingShiftKey.value = event.shiftKey;
   }
 
+  const {navigateToFolder, isFolderRow, rowMoveAttrs} = useFolderNavigation();
+
+  // Folder cards (asset index) navigate into the folder on click, except when
+  // the click lands on an interactive control (the select checkbox, a link, …).
+  function onCardClick(element: CardElement, event: MouseEvent) {
+    if (!isFolderRow(element)) return;
+    if (
+      (event.target as HTMLElement).closest(
+        'a[href], button, input, craft-checkbox'
+      )
+    ) {
+      return;
+    }
+    navigateToFolder(element.folderUrl);
+  }
+
   function focusCardByIndex(index: number, el: HTMLElement) {
     const list = el.closest('ul.card-grid');
     const items = list?.querySelectorAll<HTMLElement>(':scope > li[tabindex]');
@@ -55,10 +72,16 @@
     const last = props.data!.length - 1;
     switch (event.key) {
       case ' ':
-      case 'Enter':
+      case 'Enter': {
         event.preventDefault();
+        const element = props.data!.find((el) => el.id === id);
+        if (element && isFolderRow(element)) {
+          navigateToFolder(element.folderUrl);
+          break;
+        }
         toggleRow(rowFor(id));
         break;
+      }
       case 'ArrowRight':
       case 'ArrowDown': {
         event.preventDefault();
@@ -104,10 +127,15 @@
       <li
         v-for="(element, cardIdx) in data"
         :key="element.id"
-        :data-id="element.id"
+        v-bind="rowMoveAttrs(element)"
         :tabindex="selectable ? 0 : undefined"
         @keydown="onCardKeydown(element.id, cardIdx, $event)"
-        :class="{element: true, sel: rowFor(element.id)?.getIsSelected()}"
+        @click="onCardClick(element, $event)"
+        :class="{
+          element: true,
+          'element--folder': isFolderRow(element),
+          sel: rowFor(element.id)?.getIsSelected(),
+        }"
       >
         <craft-card
           v-bind="attrs(element.cardAttributes, {exclude: ['class']})"
@@ -154,10 +182,35 @@
   }
 
   .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     padding: var(--c-spacing-md);
   }
 
   .card-grid > li {
     position: relative;
   }
+
+  .card-grid > li.element--folder {
+    cursor: pointer;
+  }
+
+  // craft-thumbnail defaults its own size via :host, so the card thumbnail
+  // renders at the tiny default instead of filling its 120px column. Match the
+  // thumbnail view (and Craft 5's 120px card thumb column).
+  .card-grid :deep(craft-thumbnail) {
+    --c-thumbnail-size: 120px;
+  }
+
+  // Non-image thumbs (folder / file-kind SVGs) render at a fixed small size;
+  // scale them up to match.
+  .card-grid :deep(.card-main .thumb) {
+    width: 72px;
+    height: 72px;
+  }
+
+  .card-grid :deep(.card-main .thumb svg) {
+    width: 100%;
+    height: 100%;
+  }
 </style>
diff --git a/resources/js/modules/elements/components/ElementIndexPage.vue b/resources/js/modules/elements/components/ElementIndexPage.vue
new file mode 100644
index 00000000000..1b8b2830bc3
--- /dev/null
+++ b/resources/js/modules/elements/components/ElementIndexPage.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/ui';
+  import {useAppLayout} from '@/common/composables/useAppLayout';
+  import LayoutSlot from '@/common/components/LayoutSlot.vue';
+  import ActionMenu from '@/common/components/ActionMenu.vue';
+  import ElementSources from '@/modules/elements/ElementSources.vue';
+  import BaseElementIndex from '@/modules/elements/components/BaseElementIndex.vue';
+  import DataTable from '@/modules/elements/components/DataTable.vue';
+  import ElementCards from '@/modules/elements/components/ElementCards.vue';
+  import ElementIndexToolbar from '@/modules/elements/components/ElementIndexToolbar.vue';
+  import {useElementIndexPage} from '@/modules/elements/composables/useElementIndexPage';
+  import type {ElementIndexRoute} from '@/modules/elements/composables/useElementIndexVisits';
+  import {TableSpacing} from '@/common/types';
+  import ElementThumbs from '@/modules/elements/components/ElementThumbs.vue';
+
+  const props = defineProps<{
+    /** The page's index route — the one per-page piece of the pipeline. */
+    route: ElementIndexRoute;
+    /** Overrides the pinned first column (defaults to the element's title). */
+    pinnedColumn?: {key: string; label: string};
+  }>();
+
+  const page = useElementIndexPage({
+    route: props.route,
+    pinnedColumn: props.pinnedColumn,
+  });
+
+  const {
+    elementIndex,
+    elementTable,
+    viewState,
+    conditions,
+    filters,
+    columnOptions,
+    tableColumns,
+    reorder,
+    sortField,
+    sortDirection,
+    mode,
+    loading,
+    visibleViewModes,
+    onActionPerformed,
+    createCustomizeSourcesModal,
+  } = page;
+
+  useAppLayout({fullWidth: true});
+</script>
+
+<template>
+  <LayoutSlot name="actions">
+    <!-- Type-specific page actions (e.g. a New Entry or Upload button). -->
+    <slot name="actions" :element-index="elementIndex" />
+  </LayoutSlot>
+
+  <LayoutSlot name="sidebar">
+    <nav aria-labelledby="source-heading">
+      <h2 id="source-heading" class="sr-only">
+        {{ t('Sources') }}
+      </h2>
+      <ElementSources
+        :sources="elementIndex.sources"
+        :route="route"
+        :active-source="elementIndex.source?.key"
+        :view-mode="viewState.mode !== 'table' ? viewState.mode : null"
+      />
+    </nav>
+
+    <slot name="sidebar-after" :element-index="elementIndex" />
+
+    <div class="mt-4">
+      <ActionMenu
+        :actions="[
+          {
+            label: t('Customize sources'),
+            onClick: () => createCustomizeSourcesModal(),
+          },
+        ]"
+      />
+    </div>
+  </LayoutSlot>
+
+  <craft-pane size="none">
+    <BaseElementIndex
+      :table="elementTable"
+      :selectable="true"
+      :loading="loading"
+      :from="elementIndex.pagination.from"
+      :to="elementIndex.pagination.to"
+      :total="elementIndex.pagination.total"
+      :enable-adjust-page-size="true"
+      :actions="elementIndex.actions"
+      :element-type="elementIndex.elementType"
+      :source="elementIndex.source?.key"
+      :context="elementIndex.context"
+      @action-performed="onActionPerformed"
+    >
+      <template #header>
+        <ElementIndexToolbar
+          v-model:search="filters.form.search"
+          v-model:status="filters.form.status"
+          v-model:conditions="conditions"
+          :processing="filters.form.processing"
+          :status-options="elementIndex.statusOptions"
+          :view-modes="visibleViewModes"
+          :column-options="columnOptions"
+          :sort-options="elementIndex.sortOptions"
+          v-model:mode="mode"
+          v-model:sort-field="sortField"
+          v-model:sort-direction="sortDirection"
+          v-model:table-columns="tableColumns"
+          @submit="filters.submit"
+          @reorder="reorder"
+        />
+      </template>
+      <template #navbar><slot name="navbar"></slot></template>
+      <template #body>
+        <ElementCards
+          v-if="mode === 'cards'"
+          :table="elementTable"
+          :data="elementIndex.data"
+          :selectable="true"
+          :loading="loading"
+        />
+        <ElementThumbs
+          v-else-if="mode === 'thumbs'"
+          :table="elementTable"
+          :data="elementIndex.data"
+          :selectable="true"
+          :loading="loading"
+        />
+        <DataTable
+          v-else
+          :table="elementTable"
+          :selectable="true"
+          :loading="loading"
+          :spacing="TableSpacing.Spacious"
+        />
+      </template>
+    </BaseElementIndex>
+  </craft-pane>
+</template>
+
+<style scoped lang="scss">
+  // The pane is a grid item in the content layout; with the default
+  // min-width: auto it grows to fit a wide table and overflows the container.
+  // Letting it shrink lets the element-index body's `overflow-x: auto` scroll
+  // the table instead.
+  craft-pane {
+    min-width: 0;
+  }
+</style>
diff --git a/resources/js/modules/elements/components/ElementIndexToolbar.vue b/resources/js/modules/elements/components/ElementIndexToolbar.vue
index cf993cbc24a..51c4cd439cc 100644
--- a/resources/js/modules/elements/components/ElementIndexToolbar.vue
+++ b/resources/js/modules/elements/components/ElementIndexToolbar.vue
@@ -43,7 +43,7 @@
 <template>
   <form @submit="emit('submit')" class="w-full">
     <div class="flex gap-2 items-center">
-      <div>
+      <div v-if="statusOptions?.length">
         <CraftSelectRich
           v-model="status"
           :options="statusOptions"
diff --git a/resources/js/modules/elements/components/ElementThumbs.vue b/resources/js/modules/elements/components/ElementThumbs.vue
new file mode 100644
index 00000000000..ea56e5c3bf7
--- /dev/null
+++ b/resources/js/modules/elements/components/ElementThumbs.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/ui';
+  import {computed, ref} from 'vue';
+  import type {Table} from '@tanstack/vue-table';
+  import {usePage} from '@inertiajs/vue3';
+  import Empty from '@/common/components/Empty.vue';
+  import DynamicHtmlRenderer from '@/common/components/DynamicHtmlRenderer.vue';
+  import {useElementIndexSelection} from '@/modules/elements/composables/useElementIndexSelection';
+  import {useFolderNavigation} from '@/modules/elements/composables/useFolderNavigation';
+
+  type ThumbElement = Record<any, any>;
+
+  const props = withDefaults(
+    defineProps<{
+      table: Table<any>;
+      data?: Array<ThumbElement>;
+      selectable?: boolean;
+      readOnly?: boolean;
+      loading?: boolean;
+    }>(),
+    {data: () => [], selectable: false, loading: false}
+  );
+
+  const page = usePage<{readOnly: boolean}>();
+  const readOnly = computed(() => props.readOnly ?? page.props.readOnly);
+
+  const {onToggleAllSelected, selectRow, toggleRow, extendSelectionTo} =
+    useElementIndexSelection(() => props.table, {
+      selectable: () => props.selectable,
+      readOnly,
+      actions: () => [],
+    });
+
+  function rowFor(id: number | string) {
+    return props.table.getRow(String(id));
+  }
+
+  const pendingShiftKey = ref(false);
+  function rememberShift(event: MouseEvent) {
+    pendingShiftKey.value = event.shiftKey;
+  }
+
+  const {navigateToFolder, isFolderRow, rowMoveAttrs} = useFolderNavigation();
+
+  // Folder tiles (asset index) navigate into the folder on click, except when
+  // the click lands on an interactive control (the select checkbox, a link, …).
+  function onTileClick(element: ThumbElement, event: MouseEvent) {
+    if (!isFolderRow(element)) return;
+    if (
+      (event.target as HTMLElement).closest(
+        'a[href], button, input, craft-checkbox'
+      )
+    ) {
+      return;
+    }
+    navigateToFolder(element.folderUrl);
+  }
+
+  function focusTileByIndex(index: number, el: HTMLElement) {
+    const list = el.closest('ul.thumbsview');
+    const items = list?.querySelectorAll<HTMLElement>(':scope > li[tabindex]');
+    items?.[index]?.focus();
+  }
+
+  function onTileKeydown(
+    id: number | string,
+    index: number,
+    event: KeyboardEvent
+  ) {
+    if (!props.selectable) return;
+    const target = event.currentTarget as HTMLElement;
+    const last = props.data!.length - 1;
+    switch (event.key) {
+      case ' ':
+      case 'Enter': {
+        event.preventDefault();
+        const element = props.data!.find((el) => el.id === id);
+        if (element && isFolderRow(element)) {
+          navigateToFolder(element.folderUrl);
+          break;
+        }
+        if (element?.url) {
+          window.location.assign(element.url);
+          break;
+        }
+        toggleRow(rowFor(id));
+        break;
+      }
+      case 'ArrowRight':
+      case 'ArrowDown': {
+        event.preventDefault();
+        const nextIndex = Math.min(index + 1, last);
+        const nextEl = props.data![nextIndex];
+        if (event.shiftKey && nextEl) extendSelectionTo(rowFor(nextEl.id));
+        focusTileByIndex(nextIndex, target);
+        break;
+      }
+      case 'ArrowLeft':
+      case 'ArrowUp': {
+        event.preventDefault();
+        const prevIndex = Math.max(index - 1, 0);
+        const prevEl = props.data![prevIndex];
+        if (event.shiftKey && prevEl) extendSelectionTo(rowFor(prevEl.id));
+        focusTileByIndex(prevIndex, target);
+        break;
+      }
+    }
+  }
+</script>
+
+<template>
+  <div class="grid place-items-center min-h-50" v-if="loading">
+    <craft-spinner></craft-spinner>
+  </div>
+  <template v-else-if="data!.length > 0">
+    <div class="thumbsview-header" v-if="selectable">
+      <craft-checkbox
+        label-sr-only
+        .checked="table.getIsAllRowsSelected()"
+        .indeterminate="table.getIsSomeRowsSelected()"
+        .disabled="readOnly"
+        @model-value-changed="
+          onToggleAllSelected(($event.target as HTMLInputElement).checked)
+        "
+      >
+        <label slot="label">{{ t('Select all') }}</label>
+      </craft-checkbox>
+    </div>
+
+    <ul class="thumbsview">
+      <li
+        v-for="(element, thumbIdx) in data"
+        :key="element.id"
+        v-bind="rowMoveAttrs(element)"
+        :tabindex="selectable ? 0 : undefined"
+        @keydown="onTileKeydown(element.id, thumbIdx, $event)"
+        @click="onTileClick(element, $event)"
+        :class="{
+          element: true,
+          'element--folder': isFolderRow(element),
+          sel: rowFor(element.id)?.getIsSelected(),
+        }"
+      >
+        <craft-checkbox
+          v-if="selectable"
+          class="thumb-check"
+          label-sr-only
+          .checked="rowFor(element.id)?.getIsSelected()"
+          .disabled="readOnly || !rowFor(element.id)?.getCanSelect()"
+          @click="rememberShift($event)"
+          @model-value-changed="
+            selectRow(rowFor(element.id), {
+              checked: ($event.target as HTMLInputElement).checked,
+              shiftKey: pendingShiftKey,
+            })
+          "
+        >
+          <label slot="label">{{ t('Select') }}</label>
+        </craft-checkbox>
+
+        <component
+          :is="element.url ? 'a' : 'div'"
+          :href="element.url || undefined"
+          class="thumb-tile"
+        >
+          <span class="thumb-img">
+            <DynamicHtmlRenderer
+              v-if="element.thumbHtml"
+              :html="element.thumbHtml"
+            />
+            <craft-icon v-else name="asset" class="thumb-fallback"></craft-icon>
+          </span>
+          <craft-truncate class="thumb-label">{{
+            element.label
+          }}</craft-truncate>
+        </component>
+      </li>
+    </ul>
+  </template>
+  <template v-else>
+    <slot name="empty">
+      <Empty :label="t('No results')" icon="empty-set" />
+    </slot>
+  </template>
+</template>
+
+<style scoped lang="scss">
+  .thumbsview-header {
+    padding: var(--c-spacing-md);
+    background-color: var(--c-color-neutral-fill-quiet);
+    border-block-end: 1px solid var(--c-color-neutral-border-quiet);
+  }
+
+  .thumbsview {
+    display: grid;
+    gap: var(--c-spacing-sm);
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    padding: var(--c-spacing-md);
+  }
+
+  .thumbsview > li {
+    position: relative;
+    border-radius: var(--c-radius-lg);
+    border: 1px solid var(--c-color-neutral-border-quiet);
+  }
+
+
+  .thumbsview > li:has(a.thumb-tile) {
+    &:hover {
+      background-color: var(--c-color-neutral-fill-quiet);
+    }
+  }
+
+  .thumbsview > li.element--folder {
+    cursor: pointer;
+  }
+
+  .thumb-check {
+    position: absolute;
+    inset-block-start: var(--c-spacing-sm);
+    inset-inline-start: var(--c-spacing-sm);
+    z-index: 1;
+  }
+
+  .thumb-tile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--c-spacing-sm);
+    padding: var(--c-spacing-md);
+    border-radius: var(--c-radius-lg);
+    text-decoration: none;
+    color: inherit;
+    min-height: 100%;
+  }
+
+  .thumbsview > li.sel .thumb-tile {
+    background-color: var(--c-color-accent-fill-quiet);
+    border-color: var(--c-color-accent-border-quiet);
+  }
+
+  .thumb-img {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 128px;
+  }
+
+  // craft-thumbnail defaults its own size via :host, so the override has to land
+  // on the element itself (an inherited value from the parent loses to :host).
+  // 120px matches the cards view (and Craft 5's thumbnail size).
+  .thumb-img :deep(craft-thumbnail) {
+    --c-thumbnail-size: 120px;
+  }
+
+  // Non-image thumbs (folder/file-kind SVGs) render at a fixed small size; scale
+  // them up to fill the tile.
+  .thumb-img :deep(.thumb) {
+    width: 72px;
+    height: 72px;
+  }
+
+  .thumb-img :deep(.thumb svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .thumb-fallback {
+    font-size: 48px;
+    color: var(--c-text-quiet);
+  }
+
+  .thumb-label {
+    // craft-truncate handles the ellipsis + overflow tooltip internally; cap the
+    // width so it truncates within the tile.
+    max-width: 100%;
+    font-weight: 500;
+    text-align: center;
+    height: 1lh;
+  }
+</style>
diff --git a/resources/js/modules/elements/composables/assetMover.ts b/resources/js/modules/elements/composables/assetMover.ts
new file mode 100644
index 00000000000..78c0e22d500
--- /dev/null
+++ b/resources/js/modules/elements/composables/assetMover.ts
@@ -0,0 +1,85 @@
+import {actionClient, getActionUrl} from '@craftcms/ui';
+
+export type ConflictResolution = 'keepBoth' | 'replace' | 'cancel';
+
+export interface AssetMoveConflict {
+  assetId: number;
+  /** The filename that clashes at the destination. */
+  filename: string;
+  /** A non-clashing "keep both" name the server suggests. */
+  suggestedFilename: string;
+}
+
+export interface MoveAssetsResult {
+  moved: number;
+  cancelled: number;
+}
+
+interface MoveAssetParams {
+  assetId: number;
+  folderId: number;
+  filename?: string;
+  force?: 1;
+}
+
+async function moveOne(params: MoveAssetParams): Promise<Record<string, any>> {
+  const {data} = await actionClient.post(
+    getActionUrl('assets/move-asset'),
+    params
+  );
+  return data ?? {};
+}
+
+/**
+ * Moves assets into a target folder — one `assets/move-asset` request per asset,
+ * matching Craft 5's `Craft.AssetMover`.
+ *
+ * A filename clash at the destination comes back as an HTTP 200 response
+ * carrying a `conflict` key (NOT an error status), so the body is inspected
+ * rather than the status. `resolveConflict` decides keep-both / replace /
+ * cancel, and the move is re-issued with `filename` (keep both) or `force`
+ * (replace/merge).
+ */
+export async function moveAssets(
+  assetIds: Array<number>,
+  targetFolderId: number,
+  resolveConflict: (conflict: AssetMoveConflict) => Promise<ConflictResolution>
+): Promise<MoveAssetsResult> {
+  let moved = 0;
+  let cancelled = 0;
+
+  for (const assetId of assetIds) {
+    const params: MoveAssetParams = {assetId, folderId: targetFolderId};
+    let data = await moveOne(params);
+
+    if (data.conflict) {
+      const choice = await resolveConflict({
+        assetId,
+        filename: data.filename,
+        suggestedFilename: data.suggestedFilename,
+      });
+
+      if (choice === 'cancel') {
+        cancelled++;
+        continue;
+      }
+
+      data = await moveOne(
+        choice === 'replace'
+          ? {...params, force: 1}
+          : {...params, filename: data.suggestedFilename}
+      );
+
+      // A forced/renamed move shouldn't clash again; if it somehow does, count
+      // it as cancelled rather than looping.
+      if (data.conflict) {
+        cancelled++;
+        continue;
+      }
+    }
+
+    moved++;
+  }
+
+  return {moved, cancelled};
+}
diff --git a/resources/js/modules/elements/composables/useAssetMoveDrag.ts b/resources/js/modules/elements/composables/useAssetMoveDrag.ts
new file mode 100644
index 00000000000..d742c7f517e
--- /dev/null
+++ b/resources/js/modules/elements/composables/useAssetMoveDrag.ts
@@ -0,0 +1,239 @@
+import {DragDrop} from '@craftcms/garnish';
+import {t} from '@craftcms/ui';
+import {onBeforeUnmount, onMounted, ref} from 'vue';
+import {
+  type AssetMoveConflict,
+  type ConflictResolution,
+  moveAssets,
+} from './assetMover';
+
+export interface UseAssetMoveDragOptions {
+  /** Whether asset-move drag should be wired up (asset index only). */
+  enabled: () => boolean;
+  /** Ids of the currently selected asset rows (numeric; excludes folders). */
+  selectedAssetIds: () => number[];
+  /** Ensure the given row id is part of the selection (force-select on grab). */
+  ensureSelected: (rowId: string) => void;
+  /** Refresh the listing + counts after a successful move. */
+  onMoved: () => void;
+}
+
+/** A pending filename-conflict prompt awaiting the user's choice. */
+export interface AssetMoveConflictPrompt {
+  conflict: AssetMoveConflict;
+  resolve: (choice: ConflictResolution) => void;
+}
+
+/**
+ * Drag-and-drop moving of assets into folders, ported from Craft 5's
+ * `AssetIndex.itemDrag` onto the modern `@craftcms/garnish` `DragDrop`.
+ *
+ * Selected asset rows are draggable; folders (sidebar sources and folder rows in
+ * the listing, marked `[data-folder-drop-target][data-can-move-to]`) are drop
+ * targets. Dropping issues `assets/move-asset` for each selected asset, with a
+ * keep-both / replace / cancel prompt on filename conflicts.
+ *
+ * The conflict prompt is surfaced as reactive state (`conflictPrompt`) so the
+ * page can render a dialog; `resolveConflictChoice` settles it.
+ */
+export function useAssetMoveDrag(options: UseAssetMoveDragOptions) {
+  let dragDrop: DragDrop | null = null;
+
+  const conflictPrompt = ref<AssetMoveConflictPrompt | null>(null);
+
+  function resolveConflict(
+    conflict: AssetMoveConflict
+  ): Promise<ConflictResolution> {
+    return new Promise((resolve) => {
+      conflictPrompt.value = {conflict, resolve};
+    });
+  }
+
+  function resolveConflictChoice(choice: ConflictResolution) {
+    conflictPrompt.value?.resolve(choice);
+    conflictPrompt.value = null;
+  }
+
+  function assetRows(): HTMLElement[] {
+    return Array.from(
+      document.querySelectorAll<HTMLElement>(
+        '.element-index__body [data-movable-asset]'
+      )
+    );
+  }
+
+  function selectedElements(): HTMLElement[] {
+    return options
+      .selectedAssetIds()
+      .map((id) =>
+        document.querySelector<HTMLElement>(
+          `.element-index__body [data-movable-asset][data-id="${id}"]`
+        )
+      )
+      .filter((el): el is HTMLElement => el !== null);
+  }
+
+  function dropTargets(): HTMLElement[] {
+    return Array.from(
+      document.querySelectorAll<HTMLElement>(
+        '[data-folder-drop-target][data-can-move-to]'
+      )
+    );
+  }
+
+  async function performMove(targetFolderId: number) {
+    const assetIds = options.selectedAssetIds();
+    if (!assetIds.length) {
+      return;
+    }
+
+    try {
+      const {moved} = await moveAssets(
+        assetIds,
+        targetFolderId,
+        resolveConflict
+      );
+      if (moved > 0) {
+        Craft.cp?.displayNotification?.(
+          'notice',
+          t('{num, plural, =1{Item} other{Items}} moved.', {num: moved})
+        );
+        options.onMoved();
+      }
+    } catch (e) {
+      Craft.cp?.displayError?.(t('Couldn’t move the selected items.'));
+      throw e;
+    }
+  }
+
+  function refreshItems() {
+    if (!dragDrop) {
+      return;
+    }
+    dragDrop.removeAllItems();
+    const rows = assetRows();
+    if (rows.length) {
+      dragDrop.addItems(rows);
+    }
+  }
+
+  // Escape-to-cancel. Garnish's drag is driven by pointer events with no native
+  // cancel, so we end it by dispatching a `pointercancel` for the drag's own
+  // pointer — that runs Garnish's normal teardown (→ onDragStop) without the
+  // next pointermove re-starting the drag. `escaped` tells onDragStop to snap
+  // the helpers back instead of moving. Only bound while a drag is in flight.
+  let escaped = false;
+  let activePointerId: number | null = null;
+
+  function trackPointer(ev: PointerEvent) {
+    activePointerId = ev.pointerId;
+  }
+
+  function onDragKeydown(ev: KeyboardEvent) {
+    if (ev.key !== 'Escape') {
+      return;
+    }
+    ev.preventDefault();
+    ev.stopPropagation();
+    escaped = true;
+    document.dispatchEvent(
+      new PointerEvent('pointercancel', {
+        bubbles: true,
+        pointerId: activePointerId ?? undefined,
+      })
+    );
+  }
+
+  function bindDragKeys() {
+    escaped = false;
+    activePointerId = null;
+    document.addEventListener('keydown', onDragKeydown, true);
+    document.addEventListener('pointermove', trackPointer, true);
+  }
+
+  function unbindDragKeys() {
+    document.removeEventListener('keydown', onDragKeydown, true);
+    document.removeEventListener('pointermove', trackPointer, true);
+  }
+
+  // The listing re-renders on its own schedule — Inertia partial reloads (after
+  // a move), view-mode switches, folder navigation — and the new rows can paint
+  // a tick after the reactive data settles. Rather than race Vue's flush, watch
+  // the listing DOM directly and re-register whenever rows are added/removed.
+  let observer: MutationObserver | null = null;
+  let refreshScheduled = false;
+
+  function scheduleRefresh() {
+    if (refreshScheduled) {
+      return;
+    }
+    refreshScheduled = true;
+    requestAnimationFrame(() => {
+      refreshScheduled = false;
+      refreshItems();
+    });
+  }
+
+  function observeListing() {
+    const container = document.querySelector('.element-index') ?? document.body;
+    observer = new MutationObserver(scheduleRefresh);
+    observer.observe(container, {childList: true, subtree: true});
+  }
+
+  function setup() {
+    dragDrop = new DragDrop({
+      activeDropTargetClass: 'active-drop-target',
+      minMouseDist: 10,
+      moveHelperToCursor: true,
+      helperOpacity: 0.85,
+      // Force the grabbed row into the selection, then drag everything selected.
+      filter: () => {
+        const grabbed = dragDrop?.$targetItem;
+        if (grabbed?.dataset.id) {
+          options.ensureSelected(grabbed.dataset.id);
+        }
+        return selectedElements();
+      },
+      dropTargets: () => dropTargets(),
+      onDragStart: () => {
+        document.body.classList.add('dragging');
+        bindDragKeys();
+      },
+      onDragStop: () => {
+        document.body.classList.remove('dragging');
+        unbindDragKeys();
+
+        // Escape (or no valid target) → snap the helpers back, move nothing.
+        const target = escaped ? null : dragDrop?.$activeDropTarget;
+        const folderId = target ? Number(target.dataset.folderId) : NaN;
+
+        if (!Number.isFinite(folderId)) {
+          dragDrop?.returnHelpersToDraggees();
+          return;
+        }
+
+        dragDrop?.fadeOutHelpers();
+        void performMove(folderId);
+      },
+    });
+
+    refreshItems();
+    observeListing();
+  }
+
+  onMounted(() => {
+    if (options.enabled()) {
+      setup();
+    }
+  });
+
+  onBeforeUnmount(() => {
+    unbindDragKeys();
+    observer?.disconnect();
+    observer = null;
+    dragDrop?.destroy();
+    dragDrop = null;
+  });
+
+  return {conflictPrompt, resolveConflictChoice};
+}
diff --git a/resources/js/modules/elements/composables/useContentIndexData.ts b/resources/js/modules/elements/composables/useContentIndexData.ts
new file mode 100644
index 00000000000..934540058d2
--- /dev/null
+++ b/resources/js/modules/elements/composables/useContentIndexData.ts
@@ -0,0 +1,109 @@
+import {usePage} from '@inertiajs/vue3';
+import {computed, reactive} from 'vue';
+import type {PaginationData, SortItem} from '@/common/types';
+import type {ConditionConfig} from '@/modules/elements/composables/useConditionBuilder';
+import type {BulkActionItem} from '@/modules/elements/types/actions';
+import type {Source, SourceItem} from '@/modules/elements/types/sources';
+import type {
+  SortOption,
+  ViewMode,
+  ViewState,
+} from '@/modules/elements/types/view-state';
+
+type GeneratedProps = CraftCms.Cms.Http.ViewModels.ContentIndexViewModel;
+
+/**
+ * The `ContentIndexViewModel` payload, with the element-index domain types
+ * layered over the keys the PHP type generator can only express loosely
+ * (`Array<any>`). The generated type stays the source of truth for which keys
+ * exist; this narrows what they contain.
+ */
+export type ContentIndexData = Omit<
+  GeneratedProps,
+  | 'source'
+  | 'sources'
+  | 'currentCondition'
+  | 'viewState'
+  | 'viewModes'
+  | 'sortOptions'
+  | 'sort'
+  | 'data'
+  | 'actions'
+  | 'pagination'
+> & {
+  source: SourceItem | null;
+  sources: Source[];
+  currentCondition: ConditionConfig | null;
+  viewState: Partial<ViewState>;
+  viewModes: ViewMode[];
+  sortOptions: SortOption[];
+  sort: SortItem[];
+  data: Array<Record<string, unknown>>;
+  actions: BulkActionItem[] | null;
+  pagination: PaginationData;
+};
+
+/**
+ * Typed, reactive access to the `ContentIndexViewModel` payload shared by
+ * every element index screen (entries, assets, …).
+ *
+ * Returns a reactive object shaped like the payload, so it can be handed
+ * directly to the `useElementIndex*` composables in place of a props object,
+ * while staying in sync across partial Inertia visits (sorting, filtering,
+ * pagination). Read keys off the returned object (or `toRef()` them) —
+ * destructuring would snapshot the current values.
+ *
+ * `extra` merges page-supplied data (refs unwrap reactively) into the same
+ * object — e.g. route-param props or local state an embedded index owns.
+ * Extra keys win over payload keys, so a caller can also deliberately
+ * override a payload value.
+ */
+export function useContentIndexData<
+  Extra extends object = Record<never, never>,
+>(extra?: Extra) {
+  const inertiaPage = usePage<ContentIndexData>();
+
+  return reactive({
+    // Element type
+    elementType: computed(() => inertiaPage.props.elementType),
+    elementDisplayName: computed(() => inertiaPage.props.elementDisplayName),
+    elementPluralDisplayName: computed(
+      () => inertiaPage.props.elementPluralDisplayName
+    ),
+    canHaveDrafts: computed(() => inertiaPage.props.canHaveDrafts),
+
+    // Page chrome
+    context: computed(() => inertiaPage.props.context),
+    title: computed(() => inertiaPage.props.title),
+    page: computed(() => inertiaPage.props.page),
+    selectedSubnavItem: computed(() => inertiaPage.props.selectedSubnavItem),
+    showSiteMenu: computed(() => inertiaPage.props.showSiteMenu),
+    showStatusMenu: computed(() => inertiaPage.props.showStatusMenu),
+
+    // Sources
+    sources: computed(() => inertiaPage.props.sources),
+    source: computed(() => inertiaPage.props.source),
+    structure: computed(() => inertiaPage.props.structure),
+
+    // Filtering
+    status: computed(() => inertiaPage.props.status),
+    statusOptions: computed(() => inertiaPage.props.statusOptions),
+    search: computed(() => inertiaPage.props.search),
+    currentCondition: computed(() => inertiaPage.props.currentCondition),
+
+    // View state
+    viewState: computed(() => inertiaPage.props.viewState),
+    viewModes: computed(() => inertiaPage.props.viewModes),
+    tableColumns: computed(() => inertiaPage.props.tableColumns),
+    defaultTableColumns: computed(() => inertiaPage.props.defaultTableColumns),
+    sort: computed(() => inertiaPage.props.sort),
+    sortOptions: computed(() => inertiaPage.props.sortOptions),
+
+    // Results
+    data: computed(() => inertiaPage.props.data),
+    actions: computed(() => inertiaPage.props.actions),
+    pagination: computed(() => inertiaPage.props.pagination),
+
+    ...(extra ?? ({} as Extra)),
+  });
+}
diff --git a/resources/js/modules/elements/composables/useElementIndexColumns.ts b/resources/js/modules/elements/composables/useElementIndexColumns.ts
index 5ef5356fe3c..dcb78e2a4ee 100644
--- a/resources/js/modules/elements/composables/useElementIndexColumns.ts
+++ b/resources/js/modules/elements/composables/useElementIndexColumns.ts
@@ -1,7 +1,8 @@
-import {computed, onMounted, type Ref} from 'vue';
+import {computed, type Ref} from 'vue';
 import {
   createIndexVisitor,
   type ElementIndexRoute,
+  type IndexRestore,
 } from '@/modules/elements/composables/useElementIndexVisits';
 import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
 import type {ViewState} from '@/modules/elements/types/view-state';
@@ -165,15 +166,28 @@ export function useElementIndexColumns(
         ...value.filter((key) => !visibleKeys.value.includes(key)),
       ];
 
+      // The `craft-checkbox-group` emits its initial model value on mount, which
+      // lands here as a no-op change. Ignore it so it doesn't fire a redundant
+      // columns refetch — which, being viewMode-less, would otherwise interrupt
+      // and clobber the mount-time view-mode/sort restore visits.
+      if (
+        next.length === visibleKeys.value.length &&
+        next.every((key, index) => key === visibleKeys.value[index])
+      ) {
+        return;
+      }
+
       patchSourceColumnState({visible: next});
       refetchWithColumns(next);
     },
   });
 
   // On load, if the user has a persisted column selection that differs from
-  // what the server rendered by default, restore it into the URL (without
-  // adding a history entry) so the rows include those columns' data.
-  onMounted(() => {
+  // what the server rendered by default, restore it so the rows include those
+  // columns' data. The page folds this into one mount-time restore visit
+  // alongside the view-mode/sort restores (see `useElementIndexPage`), so they
+  // can't interrupt each other.
+  function restore(): IndexRestore | null {
     const params = new URLSearchParams(window.location.search);
     const hasColumnsInUrl = [...params.keys()].some(
       (key) => key === 'columns' || key.startsWith('columns[')
@@ -181,15 +195,15 @@ export function useElementIndexColumns(
     const persisted = sourceColumnState.value?.visible;
 
     if (hasColumnsInUrl || !persisted?.length) {
-      return;
+      return null;
     }
 
     if (JSON.stringify(persisted) === JSON.stringify(defaultVisible.value)) {
-      return;
+      return null;
     }
 
-    refetchWithColumns(persisted, {replace: true});
-  });
+    return {params: {columns: persisted}, only: ['data']};
+  }
 
   function reorder(options: Array<{value: string}>) {
     // Dragging rewrites the visible columns' order to match what's displayed
@@ -205,5 +219,5 @@ export function useElementIndexColumns(
     });
   }
 
-  return {columns, columnOrder, columnOptions, reorder, tableColumns};
+  return {columns, columnOrder, columnOptions, reorder, tableColumns, restore};
 }
diff --git a/resources/js/modules/elements/composables/useElementIndexPage.ts b/resources/js/modules/elements/composables/useElementIndexPage.ts
new file mode 100644
index 00000000000..d24896c356a
--- /dev/null
+++ b/resources/js/modules/elements/composables/useElementIndexPage.ts
@@ -0,0 +1,243 @@
+import {router} from '@inertiajs/vue3';
+import {
+  getCoreRowModel,
+  type RowSelectionState,
+  useVueTable,
+} from '@tanstack/vue-table';
+import {computed, onMounted, onScopeDispose, ref} from 'vue';
+import {useContentIndexData} from '@/modules/elements/composables/useContentIndexData';
+import {useElementIndexTable} from '@/modules/elements/composables/useElementIndexTable';
+import {useConditionBuilder} from '@/modules/elements/composables/useConditionBuilder';
+import {useElementIndexColumns} from '@/modules/elements/composables/useElementIndexColumns';
+import {useElementIndexFilters} from '@/modules/elements/composables/useElementIndexFilters';
+import {useElementIndexLoading} from '@/modules/elements/composables/useElementIndexLoading';
+import {useElementIndexPagination} from '@/modules/elements/composables/useElementIndexPagination';
+import {useElementIndexSort} from '@/modules/elements/composables/useElementIndexSort';
+import {useElementIndexViewMode} from '@/modules/elements/composables/useElementIndexViewMode';
+import {useElementIndexViewState} from '@/modules/elements/composables/useElementIndexViewState';
+import {
+  createIndexVisitor,
+  type ElementIndexRoute,
+  type IndexRestore,
+} from '@/modules/elements/composables/useElementIndexVisits';
+
+type Element = Record<any, any>;
+
+interface UseElementIndexPageOptions {
+  /** The page's index route — the one per-page piece of the pipeline. */
+  route: ElementIndexRoute;
+  /**
+   * The always-first, non-toggleable column. Defaults to the element's
+   * `title` labeled with the payload's `elementDisplayName`.
+   */
+  pinnedColumn?: {key: string; label: string};
+}
+
+/**
+ * The full element index page pipeline: the shared
+ * {@link useContentIndexData} payload wired through view state, filters,
+ * columns, sorting, pagination, and view mode into a ready TanStack table,
+ * plus the page-level behaviors every index repeats (selection keyed by
+ * element id, the post-bulk-action partial reload, structure-only view-mode
+ * filtering, and the Customize Sources modal shim).
+ *
+ * Pages supply only their route (and optional pinned-column override);
+ * type-specific chrome stays in the page.
+ */
+export function useElementIndexPage(options: UseElementIndexPageOptions) {
+  const elementIndex = useContentIndexData();
+
+  const viewState = useElementIndexViewState(elementIndex);
+  const {conditions} = useConditionBuilder({
+    initialState: elementIndex.currentCondition ?? null,
+  });
+  const filters = useElementIndexFilters(
+    elementIndex,
+    viewState,
+    options.route,
+    conditions
+  );
+  const {
+    columns,
+    columnOrder,
+    columnOptions,
+    reorder,
+    tableColumns,
+    restore: restoreColumns,
+  } = useElementIndexColumns(
+    elementIndex,
+    viewState,
+    options.pinnedColumn ?? {
+      key: 'title',
+      label: elementIndex.elementDisplayName,
+    },
+    options.route
+  );
+  const {
+    sortingState,
+    sortingConfig,
+    sortField,
+    sortDirection,
+    restore: restoreSort,
+  } = useElementIndexSort(elementIndex, viewState, {route: options.route});
+  const {paginationState, paginationConfig} = useElementIndexPagination(
+    elementIndex,
+    options.route
+  );
+  const {mode, restore: restoreViewMode} = useElementIndexViewMode(
+    options.route,
+    viewState
+  );
+  const {loading} = useElementIndexLoading();
+
+  // The server renders the initial page for its defaults — it can't see the
+  // client's persisted view state — so view mode, sort, and columns may each
+  // need re-requesting on load. Compose every contribution into a SINGLE visit:
+  // fired separately they'd each go through Inertia's interruptible sync request
+  // stream and abort one another, dropping whichever params lost the race (e.g.
+  // the view mode, leaving cards rendered against table-shaped data).
+  const restoreVisitor = createIndexVisitor(options.route);
+
+  onMounted(() => {
+    const restores = [
+      restoreColumns(),
+      restoreSort(),
+      restoreViewMode(),
+    ].filter((restore): restore is IndexRestore => restore !== null);
+
+    if (restores.length === 0) {
+      return;
+    }
+
+    restoreVisitor.merge(
+      Object.assign({}, ...restores.map((restore) => restore.params)),
+      {
+        only: [...new Set(restores.flatMap((restore) => restore.only))],
+        replace: true,
+      }
+    );
+  });
+
+  // The structure view mode only applies to structure sources, so hide it
+  // (and any other `structuresOnly` mode) unless the active source is one.
+  const visibleViewModes = computed(() =>
+    elementIndex.viewModes.filter(
+      (viewMode) =>
+        !viewMode.structuresOnly || elementIndex.source?.structureId != null
+    )
+  );
+
+  const visibleColumns = ref({});
+
+  // Selection is keyed by element id (see `getRowId`), so it survives sorting
+  // and pagination. Read the current selection from `rowSelection` (a map of
+  // element id → selected) or via `elementTable.getSelectedRowModel()`.
+  const rowSelection = ref<RowSelectionState>({});
+
+  // After a bulk action succeeds, refresh the server-rendered list + counts the
+  // same way the view-mode/filter composables do (a partial Inertia reload that
+  // only re-pulls the index props), then clear any lingering selection. The
+  // table also clears its own selection optimistically when the action fires.
+  function onActionPerformed() {
+    rowSelection.value = {};
+    router.reload({
+      only: ['data', 'pagination', 'badgeCounts'],
+    });
+  }
+
+  function createCustomizeSourcesModal() {
+    // The modal was written for the legacy BaseElementIndex instance, but it
+    // only reads a few things off it: the element type (to load/save settings),
+    // the current `settings.page`, and the current/root source key (to preselect
+    // a row). Its save flow reloads the page, so `asyncSelectSourceByKey` /
+    // `$visibleSources` only need to be safe no-ops here.
+    const elementIndexShim = {
+      elementType: elementIndex.elementType,
+      settings: {page: elementIndex.page},
+      sourceKey: elementIndex.source?.key ?? null,
+      rootSourceKey: elementIndex.source?.key ?? null,
+      $visibleSources: {first: () => ({data: () => null})},
+      asyncSelectSourceByKey: () => Promise.resolve(),
+    };
+
+    // Recreate it each time, mirroring the legacy implementation.
+    const modal = new Craft.CustomizeSourcesModal(elementIndexShim, {
+      hideOnEsc: false,
+      hideOnShadeClick: false,
+      onFadeOut: function () {
+        modal.destroy();
+      },
+    });
+
+    return modal;
+  }
+
+  const elementTable = useVueTable<Element>({
+    get data() {
+      return elementIndex.data ?? [];
+    },
+    get columns() {
+      return columns.value;
+    },
+    state: {
+      get columnOrder() {
+        return columnOrder.value;
+      },
+      get columnVisibility() {
+        return visibleColumns.value;
+      },
+      get sorting() {
+        return sortingState.value;
+      },
+      get pagination() {
+        return paginationState.value;
+      },
+      get rowSelection() {
+        return rowSelection.value;
+      },
+    },
+    getRowId: (row) => String(row.id),
+    // Folder rows (asset index) navigate rather than select, so they opt out of
+    // selection and bulk actions.
+    enableRowSelection: (row) => !row.original?.isFolder,
+    onRowSelectionChange: (updater) => {
+      rowSelection.value =
+        typeof updater === 'function' ? updater(rowSelection.value) : updater;
+    },
+    getCoreRowModel: getCoreRowModel<Element>(),
+    ...sortingConfig,
+    ...paginationConfig,
+    enableMultiSort: false,
+  });
+
+  // Publish this index as the active one so sibling components (e.g. the asset
+  // page's drag-and-drop) can reach its table + refresh without prop-drilling.
+  // Clear it on teardown, but only if it's still the current one — during an SPA
+  // page swap the next page may register before this one unmounts.
+  const {table: activeTable, register} = useElementIndexTable();
+  register({table: elementTable, onActionPerformed});
+  onScopeDispose(() => {
+    if (activeTable.value === elementTable) {
+      register(null);
+    }
+  });
+
+  return {
+    elementIndex,
+    elementTable,
+    viewState,
+    conditions,
+    filters,
+    columnOptions,
+    tableColumns,
+    reorder,
+    sortField,
+    sortDirection,
+    mode,
+    loading,
+    visibleViewModes,
+    rowSelection,
+    onActionPerformed,
+    createCustomizeSourcesModal,
+  };
+}
diff --git a/resources/js/modules/elements/composables/useElementIndexSort.ts b/resources/js/modules/elements/composables/useElementIndexSort.ts
index 6ccd71852ed..3205208f9c4 100644
--- a/resources/js/modules/elements/composables/useElementIndexSort.ts
+++ b/resources/js/modules/elements/composables/useElementIndexSort.ts
@@ -1,7 +1,8 @@
-import {computed, onMounted, type Ref, watch} from 'vue';
+import {computed, type Ref, watch} from 'vue';
 import {
   createIndexVisitor,
   type ElementIndexRoute,
+  type IndexRestore,
 } from '@/modules/elements/composables/useElementIndexVisits';
 import {useServerSort} from '@/modules/admin-table/composables/useServerSort';
 import type {SortItem} from '@/common/types';
@@ -96,8 +97,10 @@ export function useElementIndexSort(
   );
 
   // On load, if the URL doesn't specify a sort but we have one persisted from a
-  // previous visit, restore it into the URL (without adding a history entry).
-  onMounted(() => {
+  // previous visit, restore it. The page folds this into one mount-time restore
+  // visit alongside the view-mode/column restores (see `useElementIndexPage`),
+  // so they can't interrupt each other.
+  function restore(): IndexRestore | null {
     const params = new URLSearchParams(window.location.search);
     const persisted = normalizeSort(persistedSort());
 
@@ -108,20 +111,20 @@ export function useElementIndexSort(
     );
 
     if (hasSortInUrl || !persisted.length) {
-      return;
+      return null;
     }
 
     if (
       JSON.stringify(persisted) === JSON.stringify(normalizeSort(props.sort))
     ) {
-      return;
+      return null;
     }
 
-    visitor.merge(
-      {sort: sortItemsToQuery(persisted)},
-      {only: ['data', 'sort', 'pagination'], replace: true}
-    );
-  });
+    return {
+      params: {sort: sortItemsToQuery(persisted)},
+      only: ['data', 'sort', 'pagination'],
+    };
+  }
 
   // Two-way bindings for the single-column sort controls in the "View" popover.
   // They read from and write through the same sorting state as the column
@@ -156,5 +159,6 @@ export function useElementIndexSort(
     onSortingChange,
     sortField,
     sortDirection,
+    restore,
   };
 }
diff --git a/resources/js/modules/elements/composables/useElementIndexTable.ts b/resources/js/modules/elements/composables/useElementIndexTable.ts
new file mode 100644
index 00000000000..b7178a2bc2a
--- /dev/null
+++ b/resources/js/modules/elements/composables/useElementIndexTable.ts
@@ -0,0 +1,36 @@
+import {computed, shallowRef} from 'vue';
+import type {Table} from '@tanstack/vue-table';
+
+interface ElementIndexHandle {
+  /** The listing's tanstack table (selection, state, …). */
+  table: Table<any>;
+  /** The index's post-action refresh: clears selection + partial reload. */
+  onActionPerformed: () => void;
+}
+
+// The active element index. There's a single one per CP page, so a module-scoped
+// slot is enough to hand its table + refresh action — created deep inside the
+// shared pipeline (useElementIndexPage) — to components that layer behavior on
+// top of the listing, without prop-drilling or reaching through a component ref.
+// The asset page, for one, uses it to wire up drag-and-drop file moves.
+const active = shallowRef<ElementIndexHandle | null>(null);
+
+export function useElementIndexTable() {
+  /**
+   * Publish the active element index. The pipeline calls this on setup with its
+   * handle and clears it (passing `null`) on teardown; the guard there avoids a
+   * just-mounted page's index being wiped by the previous page unmounting.
+   */
+  function register(handle: ElementIndexHandle | null) {
+    active.value = handle;
+  }
+
+  const table = computed(() => active.value?.table ?? null);
+
+  /** Trigger the active index's post-action refresh, if one is registered. */
+  function onActionPerformed() {
+    active.value?.onActionPerformed();
+  }
+
+  return {table, onActionPerformed, register};
+}
diff --git a/resources/js/modules/elements/composables/useElementIndexViewMode.ts b/resources/js/modules/elements/composables/useElementIndexViewMode.ts
index 386e9278c7a..cf31c214d2e 100644
--- a/resources/js/modules/elements/composables/useElementIndexViewMode.ts
+++ b/resources/js/modules/elements/composables/useElementIndexViewMode.ts
@@ -1,7 +1,8 @@
-import {computed, onMounted, type Ref} from 'vue';
+import {computed, type Ref} from 'vue';
 import {
   createIndexVisitor,
   type ElementIndexRoute,
+  type IndexRestore,
 } from '@/modules/elements/composables/useElementIndexVisits';
 import type {ViewMode, ViewState} from '@/modules/elements/types/view-state';
 
@@ -35,21 +36,19 @@ export function useElementIndexViewMode(
 
   // On a fresh full-page load the server renders for the default `table` mode
   // (it has no access to the persisted view state), so if local storage restored
-  // a non-table mode, re-request the server-rendered elements for it — mirroring
-  // how `useElementIndexSort` restores a persisted sort into the URL on load.
-  onMounted(() => {
+  // a non-table mode, re-request the server-rendered elements for it. The page
+  // folds this into one mount-time restore visit alongside the sort/column
+  // restores (see `useElementIndexPage`), so they can't interrupt each other.
+  function restore(): IndexRestore | null {
     const params = new URLSearchParams(window.location.search);
     const persisted = viewState.value.mode;
 
     if (params.has('viewMode') || persisted === 'table') {
-      return;
+      return null;
     }
 
-    visitor.merge(
-      {viewMode: persisted},
-      {only: ['data', 'pagination'], replace: true}
-    );
-  });
+    return {params: {viewMode: persisted}, only: ['data', 'pagination']};
+  }
 
-  return {mode};
+  return {mode, restore};
 }
diff --git a/resources/js/modules/elements/composables/useElementIndexVisits.ts b/resources/js/modules/elements/composables/useElementIndexVisits.ts
index 2775222f5d6..58eafac3ec0 100644
--- a/resources/js/modules/elements/composables/useElementIndexVisits.ts
+++ b/resources/js/modules/elements/composables/useElementIndexVisits.ts
@@ -19,6 +19,19 @@ export interface IndexVisitOptions {
   resetPage?: boolean;
 }
 
+/**
+ * A composable's contribution to the single mount-time "restore persisted
+ * state" visit: the query params to merge in and the props to pull back. The
+ * page composes every non-null contribution into one visit (see
+ * {@link useElementIndexPage}) so the restores can't interrupt each other.
+ */
+export interface IndexRestore {
+  /** Params to merge into the restore visit (e.g. `{viewMode}`, `{columns}`). */
+  params: Record<string, unknown>;
+  /** Props this restore needs re-pulled; unioned across all contributions. */
+  only: Array<string>;
+}
+
 /**
  * Shared visit plumbing for the element index composables: merging params into
  * the current query and performing state/scroll-preserving Inertia visits
diff --git a/resources/js/modules/elements/composables/useFolderNavigation.test.ts b/resources/js/modules/elements/composables/useFolderNavigation.test.ts
new file mode 100644
index 00000000000..d57c7bd72c6
--- /dev/null
+++ b/resources/js/modules/elements/composables/useFolderNavigation.test.ts
@@ -0,0 +1,65 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {useFolderNavigation} from './useFolderNavigation';
+
+const {visitSpy} = vi.hoisted(() => ({visitSpy: vi.fn()}));
+
+vi.mock('@inertiajs/vue3', () => ({
+  router: {visit: visitSpy},
+}));
+
+// The composable reads Craft.pageTrigger to know which param paginates.
+(globalThis as any).Craft = {pageTrigger: 'page'};
+
+function visitedUrl(): URL {
+  const href = visitSpy.mock.calls[0]?.[0] as string;
+  return new URL(href, 'http://localhost');
+}
+
+describe('useFolderNavigation', () => {
+  beforeEach(() => {
+    visitSpy.mockClear();
+    window.history.replaceState({}, '', '/cp/assets/photos');
+  });
+
+  it('carries the current view query into the folder URL', () => {
+    window.history.replaceState({}, '', '/cp/assets/photos?viewMode=cards');
+
+    useFolderNavigation().navigateToFolder('/cp/assets/photos/sub');
+
+    const url = visitedUrl();
+    expect(url.pathname).toBe('/cp/assets/photos/sub');
+    expect(url.searchParams.get('viewMode')).toBe('cards');
+  });
+
+  it('drops the source and page params so the folder path is authoritative', () => {
+    window.history.replaceState(
+      {},
+      '',
+      '/cp/assets/photos?source=volume:abc&page=3&viewMode=cards'
+    );
+
+    useFolderNavigation().navigateToFolder('/cp/assets/photos/sub');
+
+    const url = visitedUrl();
+    expect(url.searchParams.has('source')).toBe(false);
+    expect(url.searchParams.has('page')).toBe(false);
+    expect(url.searchParams.get('viewMode')).toBe('cards');
+  });
+
+  it('preserves the page component and scroll on the visit', () => {
+    useFolderNavigation().navigateToFolder('/cp/assets/photos/sub');
+
+    expect(visitSpy).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({preserveState: true, preserveScroll: true})
+    );
+  });
+
+  it('only treats rows with a folder URL as folders', () => {
+    const {isFolderRow} = useFolderNavigation();
+    expect(isFolderRow({isFolder: true, folderUrl: '/cp/assets/x'})).toBe(true);
+    expect(isFolderRow({isFolder: true})).toBe(false);
+    expect(isFolderRow({folderUrl: '/cp/assets/x'})).toBe(false);
+    expect(isFolderRow({})).toBe(false);
+  });
+});
diff --git a/resources/js/modules/elements/composables/useFolderNavigation.ts b/resources/js/modules/elements/composables/useFolderNavigation.ts
new file mode 100644
index 00000000000..072a4cb0f16
--- /dev/null
+++ b/resources/js/modules/elements/composables/useFolderNavigation.ts
@@ -0,0 +1,74 @@
+import {router} from '@inertiajs/vue3';
+
+/**
+ * Navigation into an asset folder shown inline in the index listing.
+ *
+ * A folder row is just a link to that folder's own index URL, which the server
+ * provides on the row as `folderUrl`. Visiting it carries the current view
+ * query (view mode, columns, sort) across so the folder opens in the same view,
+ * drops the `source` query param (the folder's path is now the source), and
+ * restarts paging.
+ */
+export function useFolderNavigation() {
+  function navigateToFolder(folderUrl: string) {
+    const url = new URL(folderUrl, window.location.origin);
+
+    const current = new URLSearchParams(window.location.search);
+    // The folder path is the source now; the page restarts in the new folder.
+    current.delete('source');
+    current.delete(Craft.pageTrigger ?? 'page');
+
+    for (const [key, value] of current) {
+      if (!url.searchParams.has(key)) {
+        url.searchParams.set(key, value);
+      }
+    }
+
+    // Mirror the source-switch visit in ElementSources: keep the page component
+    // and scroll position, swap in the new folder's data.
+    router.visit(url.href, {
+      preserveState: true,
+      preserveScroll: true,
+    });
+  }
+
+  /** Whether a row/card represents a navigable folder. */
+  function isFolderRow(row: {
+    isFolder?: unknown;
+    folderUrl?: unknown;
+  }): boolean {
+    return Boolean(row?.isFolder) && typeof row?.folderUrl === 'string';
+  }
+
+  /**
+   * data-attributes wiring a row into asset-move drag-and-drop: asset rows are
+   * draggable (`data-movable-asset` + `data-id`), folder rows are move targets
+   * (`data-folder-drop-target` + `data-folder-id` + `data-can-move-to`). Inert
+   * unless an asset-move drag is set up on the page (asset index only).
+   */
+  function rowMoveAttrs(row: {
+    id?: unknown;
+    isFolder?: unknown;
+    folderUrl?: unknown;
+    folderId?: unknown;
+    canMoveTo?: unknown;
+  }): Record<string, string> {
+    const attrs: Record<string, string> = {'data-id': String(row.id)};
+
+    if (isFolderRow(row)) {
+      attrs['data-folder-drop-target'] = '';
+      if (row.folderId != null) {
+        attrs['data-folder-id'] = String(row.folderId);
+      }
+      if (row.canMoveTo) {
+        attrs['data-can-move-to'] = '';
+      }
+    } else {
+      attrs['data-movable-asset'] = '';
+    }
+
+    return attrs;
+  }
+
+  return {navigateToFolder, isFolderRow, rowMoveAttrs};
+}
diff --git a/resources/js/modules/elements/types/view-state.ts b/resources/js/modules/elements/types/view-state.ts
index c6d14118174..c9cdad2d0b0 100644
--- a/resources/js/modules/elements/types/view-state.ts
+++ b/resources/js/modules/elements/types/view-state.ts
@@ -1,7 +1,7 @@
 import type {SortItem} from '@/common/types';
 
 export type ViewMode = {
-  mode: 'table' | 'cards' | 'structure';
+  mode: 'table' | 'cards' | 'structure' | 'thumbs';
   title: string;
   icon: string;
   structuresOnly?: boolean;
diff --git a/resources/js/pages/assets/Index.vue b/resources/js/pages/assets/Index.vue
new file mode 100644
index 00000000000..911c92c818e
--- /dev/null
+++ b/resources/js/pages/assets/Index.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/ui';
+  import {computed} from 'vue';
+  import {useAppLayout} from '@/common/composables/useAppLayout';
+  import ElementIndexPage from '@/modules/elements/components/ElementIndexPage.vue';
+  import type {ElementIndexRoute} from '@/modules/elements/composables/useElementIndexVisits';
+  import {usePage} from '@inertiajs/vue3';
+  import {index} from '@routes/cp/assets';
+  import Breadcrumbs from '@/common/components/Breadcrumbs.vue';
+  import Modal from '@/common/components/Modal.vue';
+  import {useFolderNavigation} from '@/modules/elements/composables/useFolderNavigation';
+  import {useAssetMoveDrag} from '@/modules/elements/composables/useAssetMoveDrag';
+  import {useElementIndexTable} from '@/modules/elements/composables/useElementIndexTable';
+
+  const page = usePage<CraftCms.Cms.Http.ViewModels.AssetIndexViewModel>();
+
+  // Breadcrumb clicks navigate the same way folder rows do, so the current view
+  // (mode, columns, sort) carries across when moving up the folder tree.
+  const {navigateToFolder} = useFolderNavigation();
+
+  // Keep the current volume/folder segment in the URL so index reloads (sort,
+  // filter, pagination) stay in the same folder instead of bouncing to the root.
+  const route: ElementIndexRoute = {
+    url: (query = {}) =>
+      index.url(
+        {defaultSource: page.props.defaultSource ?? undefined},
+        {query: query as Record<string, string>}
+      ),
+  };
+
+  /** One step of the volume-root → current-folder chain. */
+  interface SourcePathStep {
+    uri: string;
+    label: string;
+    icon?: string | null;
+    folderId?: number;
+    canMoveTo?: boolean;
+  }
+
+  // The folder trail for the breadcrumb bar: the full chain when in a subfolder,
+  // otherwise just the volume root (from the source). Every ancestor links to
+  // its own folder index; the current folder (last step) is plain text.
+  //
+  // Ancestor crumbs also double as drag-and-drop move targets (drag a file up to
+  // a parent folder), matching the folder rows and sidebar sources. The current
+  // folder is skipped — the dragged assets already live there.
+  const breadcrumbs = computed(() => {
+    const steps: SourcePathStep[] =
+      (page.props.defaultSourcePath as SourcePathStep[] | null) ??
+      (page.props.source as {defaultSourcePath?: SourcePathStep[]} | null)
+        ?.defaultSourcePath ??
+      [];
+
+    return steps.map((step, i) => {
+      const isCurrent = i === steps.length - 1;
+
+      const attrs: Record<string, string> = {};
+      if (!isCurrent && step.canMoveTo && step.folderId != null) {
+        attrs['data-folder-drop-target'] = '';
+        attrs['data-folder-id'] = String(step.folderId);
+        attrs['data-can-move-to'] = '';
+      }
+
+      return {
+        label: step.label,
+        icon: step.icon ?? undefined,
+        url: isCurrent
+          ? null
+          : // `uri` is e.g. `assets/local/general`; the route's defaultSource is
+            // the path after `assets/`.
+            index.url({
+              defaultSource: step.uri.replace(/^assets\/?/, '') || undefined,
+            }),
+        attrs,
+      };
+    });
+  });
+
+  // Drag-and-drop moving of assets into folders. The selection + refresh live in
+  // the shared index pipeline, which we grab from its composable rather than
+  // reaching through a component ref.
+  const {table, onActionPerformed} = useElementIndexTable();
+
+  const {conflictPrompt, resolveConflictChoice} = useAssetMoveDrag({
+    enabled: () => true,
+    selectedAssetIds: () => {
+      const selection = table.value?.getState().rowSelection ?? {};
+      return Object.entries(selection)
+        .filter(([id, selected]) => selected && !id.startsWith('folder:'))
+        .map(([id]) => Number(id))
+        .filter((id) => Number.isFinite(id));
+    },
+    ensureSelected: (rowId) => {
+      table.value?.setRowSelection((prev) => ({...prev, [rowId]: true}));
+    },
+    onMoved: () => onActionPerformed(),
+  });
+
+  useAppLayout({fullWidth: true});
+</script>
+
+<template>
+  <ElementIndexPage :route="route">
+    <template #navbar>
+      <Breadcrumbs :items="breadcrumbs" @navigate="navigateToFolder" />
+    </template>
+    <template #actions>
+      <form action="">
+        <craft-button icon="upload">
+          {{ t('Upload files') }}
+        </craft-button>
+      </form>
+    </template>
+  </ElementIndexPage>
+
+  <!-- Filename conflict prompt shown while moving assets into a folder. -->
+  <Modal
+    :is-active="conflictPrompt !== null"
+    width="sm"
+    @close="resolveConflictChoice('cancel')"
+  >
+    <div class="p-lg flex flex-col gap-4">
+      <p>
+        {{
+          t(
+            'A file named “{filename}” already exists in the destination folder.',
+            {filename: conflictPrompt?.conflict.filename ?? ''}
+          )
+        }}
+      </p>
+      <div class="flex gap-2 justify-end">
+        <craft-button @click="resolveConflictChoice('cancel')">
+          {{ t('Cancel') }}
+        </craft-button>
+        <craft-button @click="resolveConflictChoice('keepBoth')">
+          {{ t('Keep both') }}
+        </craft-button>
+        <craft-button variant="danger" @click="resolveConflictChoice('replace')">
+          {{ t('Replace') }}
+        </craft-button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/resources/js/pages/content/Index.vue b/resources/js/pages/content/Index.vue
index 3b0cab856bc..dca69c6b9e4 100644
--- a/resources/js/pages/content/Index.vue
+++ b/resources/js/pages/content/Index.vue
@@ -1,299 +1,46 @@
 <script setup lang="ts">
-  import {t} from '@craftcms/ui';
-  import {useAppLayout} from '@/common/composables/useAppLayout';
-  import LayoutSlot from '@/common/components/LayoutSlot.vue';
-  import ElementSources from '@/modules/elements/ElementSources.vue';
-  import type {Source, SourceItem} from '@/modules/elements/types/sources';
-  import BaseElementIndex from '@/modules/elements/components/BaseElementIndex.vue';
-  import DataTable from '@/modules/elements/components/DataTable.vue';
-  import ElementCards from '@/modules/elements/components/ElementCards.vue';
-  import ElementIndexToolbar from '@/modules/elements/components/ElementIndexToolbar.vue';
-  import ActionMenu from '@/common/components/ActionMenu.vue';
-  import {
-    getCoreRowModel,
-    type RowSelectionState,
-    useVueTable,
-  } from '@tanstack/vue-table';
-  import {computed, ref} from 'vue';
-  import {
-    type PaginationData,
-    type SortItem,
-    TableSpacing,
-  } from '@/common/types';
   import NewEntryButton, {
     type PublishableSection,
   } from '@/modules/elements/components/NewEntryButton.vue';
-  import {useElementIndexViewState} from '@/modules/elements/composables/useElementIndexViewState';
-  import {useElementIndexFilters} from '@/modules/elements/composables/useElementIndexFilters';
-  import {
-    useConditionBuilder,
-    type ConditionConfig,
-  } from '@/modules/elements/composables/useConditionBuilder';
-  import {useElementIndexColumns} from '@/modules/elements/composables/useElementIndexColumns';
-  import {useElementIndexSort} from '@/modules/elements/composables/useElementIndexSort';
-  import {useElementIndexPagination} from '@/modules/elements/composables/useElementIndexPagination';
-  import {useElementIndexViewMode} from '@/modules/elements/composables/useElementIndexViewMode';
-  import {useElementIndexLoading} from '@/modules/elements/composables/useElementIndexLoading';
-  import type {
-    SortOption,
-    ViewMode,
-    ViewState,
-  } from '@/modules/elements/types/view-state';
-  import type {BulkActionItem} from '@/modules/elements/types/actions';
+  import ElementIndexPage from '@/modules/elements/components/ElementIndexPage.vue';
   import type {ElementIndexRoute} from '@/modules/elements/composables/useElementIndexVisits';
   import {index} from '@/routes/craft/cp/content/index.js';
-  import {router} from '@inertiajs/vue3';
+  import {usePage} from '@inertiajs/vue3';
 
-  type Element = Record<any, any>;
+  // The shared index payload comes from the ElementIndexPage pipeline; only
+  // the Entry-specific keys (EntryIndexViewModel) remain props.
+  const props = defineProps<{
+    sectionHandle?: string | number;
+    publishableSections: Array<PublishableSection>;
+  }>();
 
-  const props = withDefaults(
-    defineProps<{
-      elementType: string;
-      elementDisplayName: string;
-      elementPluralDisplayName: string;
-      context?: string;
-      currentCondition?: ConditionConfig | null;
-      page: string;
-      sources: Array<Source>;
-      source?: SourceItem;
-      search?: string | null;
-      status: string | null;
-      viewMode?: string | null;
-      statusOptions?: Array<{label: string; value: string}>;
-      sectionHandle?: string | number;
-      viewState: Partial<ViewState>;
-      data?: Array<Element>;
-      tableColumns: Array<{label: string; value: string}>;
-      defaultTableColumns?: Array<string>;
-      viewModes?: Array<ViewMode>;
-      sortOptions?: Array<SortOption>;
-      pagination: PaginationData;
-      sort: Array<SortItem>;
-      // The serialized bulk actions available for the active source (null when
-      // the source/context offers none).
-      actions?: Array<BulkActionItem> | null;
-      publishableSections: Array<PublishableSection>;
-    }>(),
-    {
-      context: 'index',
-      data: () => [],
-      sortOptions: () => [],
-    }
-  );
+  const page = usePage<{page: string}>();
 
-  // The composables are route-agnostic; this page owns the fact that its index
+  // The pipeline is route-agnostic; this page owns the fact that its index
   // lives at `content.index` with `page`/`sectionHandle` route params.
   const route: ElementIndexRoute = {
     url: (query = {}) =>
       index.url(
         {
-          page: props.page ?? '',
+          page: page.props.page ?? '',
           sectionHandle: props.sectionHandle || undefined,
         },
         {query: query as Record<string, string>}
       ),
   };
-
-  const viewState = useElementIndexViewState(props);
-  const {conditions} = useConditionBuilder({
-    initialState: props.currentCondition ?? null,
-  });
-  const filters = useElementIndexFilters(props, viewState, route, conditions);
-  const {columns, columnOrder, columnOptions, reorder, tableColumns} =
-    useElementIndexColumns(
-      props,
-      viewState,
-      {key: 'title', label: t('Entry')},
-      route
-    );
-  const {sortingState, sortingConfig, sortField, sortDirection} =
-    useElementIndexSort(props, viewState, {route});
-  const {paginationState, paginationConfig} = useElementIndexPagination(
-    props,
-    route
-  );
-  const {mode} = useElementIndexViewMode(route, viewState);
-  const {loading} = useElementIndexLoading();
-
-  // The structure view mode only applies to structure sources, so hide it
-  // (and any other `structuresOnly` mode) unless the active source is one.
-  const visibleViewModes = computed(() =>
-    (props.viewModes ?? []).filter(
-      (viewMode) =>
-        !viewMode.structuresOnly || props.source?.structureId != null
-    )
-  );
-
-  const visibleColumns = ref({});
-
-  // Selection is keyed by element id (see `getRowId`), so it survives sorting
-  // and pagination. Read the current selection from `rowSelection` (a map of
-  // element id → selected) or via `elementTable.getSelectedRowModel()`.
-  const rowSelection = ref<RowSelectionState>({});
-
-  // After a bulk action succeeds, refresh the server-rendered list + counts the
-  // same way the view-mode/filter composables do (a partial Inertia reload that
-  // only re-pulls the index props), then clear any lingering selection. The
-  // table also clears its own selection optimistically when the action fires.
-  function onActionPerformed() {
-    rowSelection.value = {};
-    router.reload({
-      only: ['data', 'pagination', 'badgeCounts'],
-    });
-  }
-
-  function createCustomizeSourcesModal() {
-    // The modal was written for the legacy BaseElementIndex instance, but it
-    // only reads a few things off it: the element type (to load/save settings),
-    // the current `settings.page`, and the current/root source key (to preselect
-    // a row). Its save flow reloads the page, so `asyncSelectSourceByKey` /
-    // `$visibleSources` only need to be safe no-ops here.
-    const elementIndexShim = {
-      elementType: props.elementType,
-      settings: {page: props.page},
-      sourceKey: props.source?.key ?? null,
-      rootSourceKey: props.source?.key ?? null,
-      $visibleSources: {first: () => ({data: () => null})},
-      asyncSelectSourceByKey: () => Promise.resolve(),
-    };
-
-    // Recreate it each time, mirroring the legacy implementation.
-    const modal = new Craft.CustomizeSourcesModal(elementIndexShim, {
-      hideOnEsc: false,
-      hideOnShadeClick: false,
-      onFadeOut: function () {
-        modal.destroy();
-      },
-    });
-
-    return modal;
-  }
-
-  const elementTable = useVueTable<Element>({
-    get data() {
-      return props.data ?? [];
-    },
-    get columns() {
-      return columns.value;
-    },
-    state: {
-      get columnOrder() {
-        return columnOrder.value;
-      },
-      get columnVisibility() {
-        return visibleColumns.value;
-      },
-      get sorting() {
-        return sortingState.value;
-      },
-      get pagination() {
-        return paginationState.value;
-      },
-      get rowSelection() {
-        return rowSelection.value;
-      },
-    },
-    getRowId: (row) => String(row.id),
-    enableRowSelection: true,
-    onRowSelectionChange: (updater) => {
-      rowSelection.value =
-        typeof updater === 'function' ? updater(rowSelection.value) : updater;
-    },
-    getCoreRowModel: getCoreRowModel<Element>(),
-    ...sortingConfig,
-    ...paginationConfig,
-    enableMultiSort: false,
-  });
-
-  useAppLayout({fullWidth: true});
 </script>
 
 <template>
-  <LayoutSlot name="actions">
-    <NewEntryButton
-      :sources="sources"
-      :source="source"
-      :publishable-sections="publishableSections"
-      :element-display-name="elementDisplayName"
-    />
-  </LayoutSlot>
-
-  <LayoutSlot name="sidebar">
-    <nav aria-labelledby="source-heading">
-      <h2 id="source-heading" class="sr-only">
-        {{ t('Sources') }}
-      </h2>
-      <ElementSources
-        :sources="sources"
-        :route="route"
-        :active-source="source?.key"
-        :view-mode="viewState.mode !== 'table' ? viewState.mode : null"
+  <ElementIndexPage :route="route">
+    <template #actions="{elementIndex}">
+      <NewEntryButton
+        :sources="elementIndex.sources"
+        :source="elementIndex.source ?? undefined"
+        :publishable-sections="publishableSections"
+        :element-display-name="elementIndex.elementDisplayName"
       />
-    </nav>
-
-    <div class="mt-4">
-      <ActionMenu
-        :actions="[
-          {
-            label: t('Customize sources'),
-            onClick: () => createCustomizeSourcesModal(),
-          },
-        ]"
-      />
-    </div>
-  </LayoutSlot>
-
-  <craft-pane size="none">
-    <BaseElementIndex
-      :table="elementTable"
-      :selectable="true"
-      :loading="loading"
-      :from="props.pagination.from"
-      :to="props.pagination.to"
-      :total="props.pagination.total"
-      :enable-adjust-page-size="true"
-      :actions="props.actions"
-      :element-type="props.elementType"
-      :source="props.source?.key"
-      :context="props.context"
-      @action-performed="onActionPerformed"
-    >
-      <template #header>
-        <ElementIndexToolbar
-          v-model:search="filters.form.search"
-          v-model:status="filters.form.status"
-          v-model:conditions="conditions"
-          :processing="filters.form.processing"
-          :status-options="statusOptions"
-          :view-modes="visibleViewModes"
-          :column-options="columnOptions"
-          :sort-options="sortOptions"
-          v-model:mode="mode"
-          v-model:sort-field="sortField"
-          v-model:sort-direction="sortDirection"
-          v-model:table-columns="tableColumns"
-          @submit="filters.submit"
-          @reorder="reorder"
-        />
-      </template>
-      <template #body>
-        <ElementCards
-          v-if="mode === 'cards'"
-          :table="elementTable"
-          :data="props.data"
-          :selectable="true"
-          :loading="loading"
-        />
-        <DataTable
-          v-else
-          :table="elementTable"
-          :selectable="true"
-          :loading="loading"
-          :spacing="TableSpacing.Spacious"
-        />
-      </template>
-    </BaseElementIndex>
-  </craft-pane>
+    </template>
+  </ElementIndexPage>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/routes/cp.php b/routes/cp.php
index 9a1f9bda135..8cef6fc390f 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -177,6 +177,7 @@
      */
     // Route::get('assets/edit/{id}-{filename}', EditElementController::class); - TODO
     Route::get('assets/{defaultSource?}', AssetsIndexController::class)
+        ->name('assets.index')
         ->where('defaultSource', '(?!edit(?:/|$)).*');
 
     /**
diff --git a/src/Asset/Actions/CopyReferenceTag.php b/src/Asset/Actions/CopyReferenceTag.php
index 102e4beef37..deee1861457 100644
--- a/src/Asset/Actions/CopyReferenceTag.php
+++ b/src/Asset/Actions/CopyReferenceTag.php
@@ -18,6 +18,12 @@ public function getTriggerLabel(): string
         return t('Copy reference tag');
     }
 
+    #[\Override]
+    public static function supportsBulk(): bool
+    {
+        return false;
+    }
+
     public function getTriggerHtml(): ?string
     {
         $refHandle = $this->elementType::refHandle();
diff --git a/src/Asset/Actions/CopyUrl.php b/src/Asset/Actions/CopyUrl.php
index 48201870946..bb8446d5a20 100644
--- a/src/Asset/Actions/CopyUrl.php
+++ b/src/Asset/Actions/CopyUrl.php
@@ -17,6 +17,12 @@ public function getTriggerLabel(): string
         return t('Copy URL');
     }
 
+    #[\Override]
+    public static function supportsBulk(): bool
+    {
+        return false;
+    }
+
     public function getTriggerHtml(): ?string
     {
         HtmlStack::jsWithVars(fn ($type) => <<<JS
diff --git a/src/Asset/Actions/DownloadAssetFile.php b/src/Asset/Actions/DownloadAssetFile.php
index 843b84dcd2c..996bd8c3d04 100644
--- a/src/Asset/Actions/DownloadAssetFile.php
+++ b/src/Asset/Actions/DownloadAssetFile.php
@@ -17,6 +17,12 @@ public function getTriggerLabel(): string
         return t('Download');
     }
 
+    #[\Override]
+    public static function supportsBulk(): bool
+    {
+        return false;
+    }
+
     public function getTriggerHtml(): ?string
     {
         HtmlStack::jsWithVars(fn ($type) => <<<JS
diff --git a/src/Asset/Actions/EditImage.php b/src/Asset/Actions/EditImage.php
index dd7a9ea7fb3..3c6709d5ae0 100644
--- a/src/Asset/Actions/EditImage.php
+++ b/src/Asset/Actions/EditImage.php
@@ -20,6 +20,12 @@ public function __construct(array|object $config = [])
         $this->label ??= t('Edit Image');
     }
 
+    #[\Override]
+    public static function supportsBulk(): bool
+    {
+        return false;
+    }
+
     #[\Override]
     public function getTriggerLabel(): string
     {
diff --git a/src/Asset/Actions/PreviewAsset.php b/src/Asset/Actions/PreviewAsset.php
index 44a6fb4a11c..87f31aff534 100644
--- a/src/Asset/Actions/PreviewAsset.php
+++ b/src/Asset/Actions/PreviewAsset.php
@@ -26,6 +26,12 @@ public function getTriggerLabel(): string
         return $this->label;
     }
 
+    #[\Override]
+    public static function supportsBulk(): bool
+    {
+        return false;
+    }
+
     public function getTriggerHtml(): ?string
     {
         HtmlStack::jsWithVars(fn ($type) => <<<JS
diff --git a/src/Asset/Actions/RenameFile.php b/src/Asset/Actions/RenameFile.php
index 50809b89693..11625d71a74 100644
--- a/src/Asset/Actions/RenameFile.php
+++ b/src/Asset/Actions/RenameFile.php
@@ -17,6 +17,12 @@ public function getTriggerLabel(): string
         return t('Rename file');
     }
 
+    #[\Override]
+    public static function supportsBulk(): bool
+    {
+        return false;
+    }
+
     public function getTriggerHtml(): ?string
     {
         HtmlStack::jsWithVars(
diff --git a/src/Asset/Actions/ReplaceFile.php b/src/Asset/Actions/ReplaceFile.php
index 9ab07dc37f8..2020c3b5c2d 100644
--- a/src/Asset/Actions/ReplaceFile.php
+++ b/src/Asset/Actions/ReplaceFile.php
@@ -17,6 +17,12 @@ public function getTriggerLabel(): string
         return t('Replace file');
     }
 
+    #[\Override]
+    public static function supportsBulk(): bool
+    {
+        return false;
+    }
+
     public function getTriggerHtml(): ?string
     {
         HtmlStack::jsWithVars(fn ($type) => <<<JS
diff --git a/src/Asset/Actions/ShowInFolder.php b/src/Asset/Actions/ShowInFolder.php
index 634e2c48c63..439181c7f26 100644
--- a/src/Asset/Actions/ShowInFolder.php
+++ b/src/Asset/Actions/ShowInFolder.php
@@ -19,6 +19,12 @@ public function getTriggerLabel(): string
         return t('Show in folder');
     }
 
+    #[\Override]
+    public static function supportsBulk(): bool
+    {
+        return false;
+    }
+
     public function getTriggerHtml(): ?string
     {
         if ($this->elementType !== Asset::class) {
diff --git a/src/Cp/FieldLayoutDesigner/CardDesigner.php b/src/Cp/FieldLayoutDesigner/CardDesigner.php
index 8cb958c6d8d..39cd8d12680 100644
--- a/src/Cp/FieldLayoutDesigner/CardDesigner.php
+++ b/src/Cp/FieldLayoutDesigner/CardDesigner.php
@@ -79,7 +79,7 @@ public function previewHtml(FieldLayout $fieldLayout, array $cardElements = [],
         $thumbAlignment = $fieldLayout->getCardThumbAlignment();
 
         // get heading
-        $headingHtml = Html::tag('craft-element-label',
+        $headingHtml = Html::tag('craft-truncate',
             Html::tag('a', Html::tag('span', t('Title')), [
                 'class' => ['label-link'],
                 'href' => '#',
diff --git a/src/Cp/Html/ElementHtml.php b/src/Cp/Html/ElementHtml.php
index 0b36aa7be0b..f7c48512166 100644
--- a/src/Cp/Html/ElementHtml.php
+++ b/src/Cp/Html/ElementHtml.php
@@ -93,6 +93,10 @@ public function chipHtml(Chippable $component, array $config = []): string
                 $config['size'],
                 ...Html::explodeClass($config['class']),
             ],
+            'show-indicators' => $config['showIndicators'],
+            'show-thumb' => $config['showThumb'],
+            'show-status' => $config['showStatus'],
+            'selectable' => $config['selectable'],
             'appearance' => $config['appearance'],
             'data' => array_filter([
                 'type' => $component::class,
@@ -121,11 +125,12 @@ public function chipHtml(Chippable $component, array $config = []): string
         if ($config['showStatus']) {
             /** @var Chippable&Statusable $component */
             $html .= Html::tag('div', $this->statusHtml->componentStatusIndicatorHtml($component) ?? '', [
-                'slot' => 'indicator',
+                'slot' => 'status',
             ]);
         }
 
         if ($config['showThumb']) {
+            $html .= Html::beginTag('div', ['slot' => 'thumbnail']);
             if ($component instanceof Thumbable) {
                 $thumbSize = $config['size'] === self::CHIP_SIZE_SMALL ? 30 : 120;
                 $html .= $component->getThumbHtml($thumbSize) ?? '';
@@ -136,10 +141,13 @@ public function chipHtml(Chippable $component, array $config = []): string
                     $html .= Html::tag('craft-icon', '', Icons::resolveIconData($icon));
                 }
             }
+            $html .= Html::endTag('div');
         }
 
         if ($config['selectable']) {
+            $html .= Html::beginTag('div', ['slot' => 'prefix']);
             $html .= $this->componentCheckboxHtml(sprintf('%s-label', $config['id']));
+            $html .= Html::endTag('div');
         }
 
         if (isset($config['labelHtml'])) {
@@ -458,7 +466,7 @@ public function elementCardContentHtml(ElementInterface $element, array $config
         $bodyContent = $element->getCardBodyHtml() ?? '';
 
         $labels = array_filter([
-            $element->showStatusIndicator() ? $this->statusHtml->componentStatusLabelHtml($element) : null,
+            ($config['showStatus'] ?? false) && $config['showStatus'] && $element->showStatusIndicator() ? $this->statusHtml->componentStatusLabelHtml($element) : null,
             $element->isProvisionalDraft || $element->hasProvisionalChanges ? $this->statusHtml->editedStatusLabelHtml() : null,
         ]);
 
@@ -787,7 +795,7 @@ private function elementLabelHtml(ElementInterface $element, array $config, arra
             return '';
         }
 
-        return Html::tag('craft-element-label', $content, [
+        return Html::tag('craft-truncate', $content, [
             'id' => sprintf('%s-label', $config['id']),
             'class' => 'label',
         ]);
diff --git a/src/Http/Controllers/Assets/IndexController.php b/src/Http/Controllers/Assets/IndexController.php
index 543442d9b1b..8186c6ff92c 100644
--- a/src/Http/Controllers/Assets/IndexController.php
+++ b/src/Http/Controllers/Assets/IndexController.php
@@ -4,70 +4,27 @@
 
 namespace CraftCms\Cms\Http\Controllers\Assets;
 
-use CraftCms\Cms\Asset\Folders;
-use CraftCms\Cms\Asset\Volumes;
+use CraftCms\Cms\Http\Requests\ElementIndexRequest;
 use CraftCms\Cms\Http\RespondsWithFlash;
-use CraftCms\Cms\Support\Arr;
-use Illuminate\Contracts\View\View;
-use Illuminate\Http\Request;
+use CraftCms\Cms\Http\ViewModels\AssetIndexViewModel;
+use Inertia\Inertia;
+use Inertia\Response;
 
 readonly class IndexController
 {
     use RespondsWithFlash;
 
-    public function __construct(
-        private Volumes $volumes,
-        private Folders $folders,
-    ) {}
-
-    public function __invoke(Request $request, ?string $defaultSource = null): View
+    public function __invoke(ElementIndexRequest $request, ?string $defaultSource = null): Response
     {
-        $variables = [];
-
-        if (! $defaultSource = $request->input('defaultSource', $defaultSource)) {
-            return view('assets/_index', $variables);
-        }
-
-        $defaultSourcePath = Arr::whereNotEmpty(explode('/', (string) $defaultSource));
-        $volume = $this->volumes->getVolumeByHandle(array_shift($defaultSourcePath));
-
-        if (! $volume) {
-            return view('assets/_index', $variables);
-        }
-
-        $variables['defaultSource'] = "volume:$volume->uid";
-
-        if (empty($defaultSourcePath)) {
-            return view('assets/_index', $variables);
-        }
-
-        $subfolder = $this->folders->findFolder([
-            'volumeId' => $volume->id,
-            'path' => sprintf('%s/', implode('/', $defaultSourcePath)),
-        ]);
-
-        if (! $subfolder) {
-            return view('assets/_index', $variables);
-        }
-
-        $sourcePath = [];
-        $folderChain = [];
-
-        while ($subfolder) {
-            array_unshift($folderChain, $subfolder);
-            $subfolder = $subfolder->getParent();
-        }
-
-        foreach ($folderChain as $i => $folder) {
-            if ($i < count($folderChain) - 1) {
-                $folder->setHasChildren(true);
-            }
-
-            $sourcePath[] = $folder->getSourcePathInfo();
-        }
-
-        $variables['defaultSourcePath'] = $sourcePath;
-
-        return view('assets/_index', $variables);
+        // The CP asset index lists a volume/folder's subfolders alongside its
+        // files; Asset::indexElements() only merges those in when `showFolders`
+        // is set (matching the legacy index's request param). It reads the
+        // global request, which is a separate instance from this FormRequest.
+        request()->merge(['showFolders' => true]);
+
+        return Inertia::render('assets/Index', new AssetIndexViewModel(
+            $request,
+            defaultSource: $request->input('defaultSource', $defaultSource),
+        ));
     }
 }
diff --git a/src/Http/Controllers/ContentIndexController.php b/src/Http/Controllers/ContentIndexController.php
index 68520567e32..ce98a3a9087 100644
--- a/src/Http/Controllers/ContentIndexController.php
+++ b/src/Http/Controllers/ContentIndexController.php
@@ -4,49 +4,19 @@
 
 namespace CraftCms\Cms\Http\Controllers;
 
-use CraftCms\Cms\Entry\Elements\Entry;
 use CraftCms\Cms\Http\Requests\ElementIndexRequest;
-use CraftCms\Cms\Http\ViewModels\ContentIndexViewModel;
-use CraftCms\Cms\View\Hooks\PrepareElementIndexVariables;
-use CraftCms\Cms\View\Hooks\PrepareElementSourcesVariables;
-use CraftCms\Cms\View\Hooks\PrepareElementToolbarVariables;
+use CraftCms\Cms\Http\ViewModels\EntryIndexViewModel;
 use Inertia\Inertia;
+use Inertia\Response;
 
-/**
- * @TODO Make this more generic, for now I'm just replacing entries
- */
 readonly class ContentIndexController
 {
-    public function __construct(
-        private PrepareElementIndexVariables $prepareElementIndexVariables,
-        private PrepareElementToolbarVariables $prepareElementToolbarVariables,
-        private PrepareElementSourcesVariables $prepareElementSourcesVariables,
-    ) {}
-
-    public function __invoke(ElementIndexRequest $request, string $page, ?string $sectionHandle = null)
+    public function __invoke(ElementIndexRequest $request, string $page, ?string $sectionHandle = null): Response
     {
-        $elementType = Entry::class;
-        $context = [
-            'page' => $page,
-            'sectionHandle' => $sectionHandle ?? '',
-            'elementType' => $elementType,
-        ];
-
-        ($this->prepareElementIndexVariables)($context);
-        ($this->prepareElementToolbarVariables)($context);
-        ($this->prepareElementSourcesVariables)($context);
-
-        $viewModel = new ContentIndexViewModel(
-            elementType: $elementType,
+        return Inertia::render('content/Index', new EntryIndexViewModel(
             request: $request,
+            page: $page,
             sectionHandle: $sectionHandle,
-            elementStatuses: $context['elementStatuses'] ?? [],
-        );
-
-        // Plain merge, view model last: its payload keys override any
-        // same-named context vars from the prepare hooks (e.g. the legacy
-        // assoc-keyed `tableColumns`) — a recursive merge would interleave
-        // them into a JSON object instead of a list.
-        return Inertia::render('content/Index', array_merge($context, $viewModel->toArray()));
+        ));
     }
 }
diff --git a/src/Http/ViewModels/AssetIndexViewModel.php b/src/Http/ViewModels/AssetIndexViewModel.php
new file mode 100644
index 00000000000..a301f377ab6
--- /dev/null
+++ b/src/Http/ViewModels/AssetIndexViewModel.php
@@ -0,0 +1,200 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Http\ViewModels;
+
+use CraftCms\Cms\Asset\Data\Volume;
+use CraftCms\Cms\Asset\Data\VolumeFolder;
+use CraftCms\Cms\Asset\Elements\Asset;
+use CraftCms\Cms\Element\Contracts\ElementInterface;
+use CraftCms\Cms\Http\Requests\ElementIndexRequest;
+use CraftCms\Cms\Support\Arr;
+use CraftCms\Cms\Support\Facades\Folders;
+use CraftCms\Cms\Support\Facades\Volumes;
+use CraftCms\Cms\Support\Url;
+use Illuminate\Support\Facades\Gate;
+use Override;
+
+/**
+ * The Inertia payload for the asset index screen (`assets/Index`).
+ *
+ * A `defaultSource` path like `volumeHandle/sub/folder` selects the volume's
+ * source and resolves the subfolder chain into `defaultSourcePath`.
+ */
+class AssetIndexViewModel extends ContentIndexViewModel
+{
+    /** @var array{0: Volume|null, 1: string[]}|null */
+    private ?array $resolvedDefaultSource = null;
+
+    private bool $subfolderResolved = false;
+
+    private ?VolumeFolder $resolvedSubfolder = null;
+
+    public function __construct(
+        ElementIndexRequest $request,
+        ?string $page = null,
+        private readonly ?string $defaultSource = null,
+    ) {
+        parent::__construct(Asset::class, $request, $page);
+    }
+
+    /**
+     * The raw source path from the route (e.g. `volumeHandle/sub/folder`),
+     * echoed back so client-side index reloads keep the current volume/folder
+     * in the URL instead of bouncing to the root. The resolved source key
+     * (`volume:{uid}`) is available on the base `source` payload.
+     */
+    public function defaultSource(): ?string
+    {
+        return $this->defaultSource;
+    }
+
+    /** @return array<int, array|null>|null */
+    public function defaultSourcePath(): ?array
+    {
+        $subfolder = $this->subfolder();
+
+        if ($subfolder === null) {
+            return null;
+        }
+
+        $folderChain = [];
+
+        while ($subfolder) {
+            array_unshift($folderChain, $subfolder);
+            $subfolder = $subfolder->getParent();
+        }
+
+        $sourcePath = [];
+
+        foreach ($folderChain as $i => $folder) {
+            if ($i < count($folderChain) - 1) {
+                $folder->setHasChildren(true);
+            }
+
+            $info = $folder->getSourcePathInfo();
+
+            // Let the breadcrumb double as a drag-and-drop move target, matching
+            // the folder rows/sources (see extraRowData()).
+            if ($info !== null) {
+                $info['canMoveTo'] = Gate::check('moveIntoFolder', $folder);
+            }
+
+            $sourcePath[] = $info;
+        }
+
+        return $sourcePath;
+    }
+
+    /**
+     * Folder rows have no element id, so key them by folder id to stay unique
+     * and stable for the client's table/selection.
+     */
+    #[Override]
+    protected function rowId(ElementInterface $element): string|int|null
+    {
+        if ($element instanceof Asset && $element->isFolder) {
+            return "folder:{$element->folderId}";
+        }
+
+        return $element->id;
+    }
+
+    /**
+     * Marks folder rows so the client can (a) navigate into the folder on click
+     * — the folder chip has no edit URL, so `folderUrl` (the last step of its
+     * resolved source path) is provided — and (b) treat the row as a drag-and-
+     * drop move target (`folderId` + `canMoveTo`).
+     *
+     * @return array<string, mixed>
+     */
+    #[Override]
+    protected function extraRowData(ElementInterface $element): array
+    {
+        if (! $element instanceof Asset || ! $element->isFolder) {
+            return [];
+        }
+
+        $uri = array_last($element->sourcePath)['uri'] ?? null;
+        $folder = Folders::getFolderById($element->folderId);
+
+        return [
+            'isFolder' => true,
+            'folderId' => $element->folderId,
+            'folderUrl' => $uri !== null ? Url::cpUrl($uri) : null,
+            'canMoveTo' => $folder !== null && Gate::check('moveIntoFolder', $folder),
+        ];
+    }
+
+    /**
+     * A `defaultSource` path selects the volume source (`volume:{uid}`), whose
+     * criteria points at the volume root. When the path names a subfolder,
+     * re-point the query's `folderId` at that subfolder so the listing (and its
+     * merged child folders) is scoped to it rather than the volume root.
+     *
+     * @return array{0: ?string, 1: ?array}
+     */
+    #[Override]
+    protected function sourceState(): array
+    {
+        [$sourceKey, $source] = parent::sourceState();
+
+        $subfolder = $this->subfolder();
+
+        if ($subfolder !== null && $source !== null) {
+            $source['criteria']['folderId'] = $subfolder->id;
+        }
+
+        return [$sourceKey, $source];
+    }
+
+    #[Override]
+    protected function defaultSourceKey(): ?string
+    {
+        [$volume] = $this->resolveDefaultSource();
+
+        return $volume === null ? null : "volume:{$volume->uid}";
+    }
+
+    /**
+     * The volume named by the first `defaultSource` path segment, and the
+     * remaining subfolder segments.
+     *
+     * @return array{0: Volume|null, 1: string[]}
+     */
+    private function resolveDefaultSource(): array
+    {
+        if ($this->resolvedDefaultSource !== null) {
+            return $this->resolvedDefaultSource;
+        }
+
+        $segments = Arr::whereNotEmpty(explode('/', (string) $this->defaultSource));
+
+        $volume = $segments === []
+            ? null
+            : Volumes::getVolumeByHandle(array_shift($segments));
+
+        return $this->resolvedDefaultSource = [$volume, $segments];
+    }
+
+    private function subfolder(): ?VolumeFolder
+    {
+        if ($this->subfolderResolved) {
+            return $this->resolvedSubfolder;
+        }
+
+        $this->subfolderResolved = true;
+
+        [$volume, $segments] = $this->resolveDefaultSource();
+
+        if ($volume === null || $segments === []) {
+            return $this->resolvedSubfolder = null;
+        }
+
+        return $this->resolvedSubfolder = Folders::findFolder([
+            'volumeId' => $volume->id,
+            'path' => sprintf('%s/', implode('/', $segments)),
+        ]);
+    }
+}
diff --git a/src/Http/ViewModels/ContentIndexViewModel.php b/src/Http/ViewModels/ContentIndexViewModel.php
index 06045968323..4862a1af02e 100644
--- a/src/Http/ViewModels/ContentIndexViewModel.php
+++ b/src/Http/ViewModels/ContentIndexViewModel.php
@@ -5,36 +5,45 @@
 namespace CraftCms\Cms\Http\ViewModels;
 
 use CraftCms\Cms\Cms;
+use CraftCms\Cms\Component\Contracts\Thumbable;
 use CraftCms\Cms\Cp\Html\ElementHtml;
 use CraftCms\Cms\Element\Contracts\ElementInterface;
 use CraftCms\Cms\Element\ElementIndexes;
+use CraftCms\Cms\Element\Enums\ElementIndexViewMode;
 use CraftCms\Cms\Element\Queries\Contracts\ElementQueryInterface;
 use CraftCms\Cms\Http\Requests\ElementIndexRequest;
-use CraftCms\Cms\Section\Data\Section;
-use CraftCms\Cms\Section\Resources\SectionResource;
 use CraftCms\Cms\Support\Facades\ElementActions;
 use CraftCms\Cms\Support\Facades\ElementSources;
-use CraftCms\Cms\Support\Facades\Sections;
+use CraftCms\Cms\Support\Facades\Sites;
 use CraftCms\Cms\Support\Html;
 use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Pagination\LengthAwarePaginator as IlluminatePaginator;
 
 use function CraftCms\Cms\t;
+use function Termwind\render;
 
 /**
- * The Inertia payload for an element index screen (`content/Index`).
+ * The shared Inertia payload for an element index screen.
  *
  * Query building goes through the shared {@see ElementIndexes} kernel — the
  * same one the legacy XHR endpoints use — while everything page-shaped
  * (view state, pagination, bulk-action items, column/sort metadata, and
  * row/card serialization) lives here.
  *
+ * Element-type view models extend this with their own payload keys (public
+ * methods) and can supply a default source via {@see defaultSourceKey()} —
+ * e.g. entries map a section-handle URL segment, assets a volume path.
+ *
  * Public methods are payload keys (see {@see ViewModel}); shared intermediates
  * (resolved source, query, index data, paginator) are memoized privately since
  * payload methods may be invoked in any order.
  */
-class ContentIndexViewModel extends ViewModel
+abstract class ContentIndexViewModel extends ViewModel
 {
-    private const string RENDER_CONTEXT = 'index';
+    protected const string RENDER_CONTEXT = 'index';
+
+    /** The thumbnail edge length (px) requested for the thumbnail grid view. */
+    private const int THUMB_SIZE = 200;
 
     /** @var array{0: ?string, 1: ?array}|null */
     private ?array $resolvedSource = null;
@@ -50,17 +59,40 @@ class ContentIndexViewModel extends ViewModel
 
     private ?LengthAwarePaginator $paginator = null;
 
+    /** @var array{perPage: int, page: int, total: int, pageParam: string}|null */
+    private ?array $paginationState = null;
+
     /** @var string[]|null */
     private ?array $visibleColumns = null;
 
+    private ?array $resolvedSources = null;
+
     public function __construct(
         /** @var class-string<ElementInterface> */
-        private readonly string $elementType,
-        private readonly ElementIndexRequest $request,
-        private readonly ?string $sectionHandle = null,
-        private readonly array $elementStatuses = [],
+        protected readonly string $elementType,
+        protected readonly ElementIndexRequest $request,
+        protected readonly ?string $page = null,
     ) {}
 
+    /**
+     * The source key to fall back to when the request doesn't name one —
+     * how a type-specific URL (section handle, volume path, …) selects its
+     * source. `null` falls through to the “all elements” source.
+     */
+    protected function defaultSourceKey(): ?string
+    {
+        return null;
+    }
+
+    /**
+     * The render context — index screens always render in the `index`
+     * context, and the client echoes it back on XHR element endpoints.
+     */
+    public function context(): string
+    {
+        return static::RENDER_CONTEXT;
+    }
+
     public function status(): string
     {
         return $this->request->input('status', '') ?? '';
@@ -79,6 +111,10 @@ public function source(): ?array
     /** @return array{id: int, editable: bool}|null */
     public function structure(): ?array
     {
+        if ($this->sourceState()[0] === null) {
+            return null;
+        }
+
         $indexData = $this->resolveIndexData();
 
         return isset($indexData['structure'])
@@ -125,13 +161,94 @@ public function viewState(): array
     /** @return array<int, array{label: string, value: string}> */
     public function statusOptions(): array
     {
-        return collect($this->elementStatuses)
+        // Status filtering is a no-op for element types without statuses
+        // (QueriesStatuses ignores it), so don't offer the filter at all.
+        if (! $this->showStatusMenu()) {
+            return [];
+        }
+
+        return collect($this->elementType::statuses())
             ->map(fn ($label, $value) => ['label' => $label, 'value' => $value])
             ->prepend(['label' => t('All'), 'value' => ''])
             ->values()
             ->all();
     }
 
+    public function showStatusMenu(): bool
+    {
+        return $this->elementType::hasStatuses()
+            && count($this->elementType::statuses()) >= 2;
+    }
+
+    public function showSiteMenu(): bool
+    {
+        return Sites::isMultiSite() && $this->elementType::isLocalized();
+    }
+
+    /**
+     * The element index page title: a custom index page's own name wins,
+     * otherwise the element type's plural display name.
+     */
+    public function title(): string
+    {
+        if ($this->page !== null) {
+            $pageName = $this->sources()[0]['page'] ?? null;
+
+            if ($pageName !== null) {
+                return t($pageName, category: 'site');
+            }
+        }
+
+        return $this->elementType::pluralDisplayName();
+    }
+
+    public function sources(): array
+    {
+        return $this->resolvedSources ??= ElementSources::getSources(
+            $this->elementType,
+            withDisabled: true,
+            page: $this->page,
+        )->all();
+    }
+
+    /** @return class-string<ElementInterface> */
+    public function elementType(): string
+    {
+        return $this->elementType;
+    }
+
+    public function page(): ?string
+    {
+        return $this->page;
+    }
+
+    public function elementDisplayName(): string
+    {
+        return $this->elementType::displayName();
+    }
+
+    public function elementPluralDisplayName(): string
+    {
+        return $this->elementType::pluralDisplayName();
+    }
+
+    public function canHaveDrafts(): bool
+    {
+        return $this->elementType::hasDrafts();
+    }
+
+    public function viewModes(): array
+    {
+        return $this->elementType::indexViewModes();
+    }
+
+    public function selectedSubnavItem(): ?string
+    {
+        return $this->page !== null
+            ? ElementSources::pageNameId($this->page)
+            : null;
+    }
+
     /**
      * The sortable attributes: the element type's own sort options plus the
      * source's field-layout options. `orderBy` can be a query expression or
@@ -233,11 +350,17 @@ public function defaultTableColumns(): array
 
     public function data(): array
     {
+        if ($this->sourceState()[0] === null) {
+            return [];
+        }
+
         $elements = $this->resolvePaginator()->items();
 
-        return $this->mode() === 'cards'
-            ? $this->cardData($elements)
-            : $this->tableRows($elements);
+        return match ($this->mode()) {
+            ElementIndexViewMode::Cards->value => $this->cardData($elements),
+            ElementIndexViewMode::Thumbs->value => $this->thumbData($elements),
+            default => $this->tableRows($elements),
+        };
     }
 
     /** @return array<int, array<string, mixed>>|null */
@@ -278,20 +401,17 @@ public function sort(): array
         $defaultSort = $this->sourceState()[1]['defaultSort'] ?? null;
 
         if (is_array($defaultSort) && isset($defaultSort[0])) {
-            return $this->resolvedSort = [[
-                'field' => $defaultSort[0],
-                'direction' => ($defaultSort[1] ?? 'asc') === 'desc' ? 'desc' : 'asc',
-            ]];
+            return $this->resolvedSort = [
+                [
+                    'field' => $defaultSort[0],
+                    'direction' => ($defaultSort[1] ?? 'asc') === 'desc' ? 'desc' : 'asc',
+                ],
+            ];
         }
 
         return $this->resolvedSort = [['field' => 'dateCreated', 'direction' => 'desc']];
     }
 
-    public function publishableSections(): array
-    {
-        return SectionResource::collection(Sections::getPublishableSections())->resolve();
-    }
-
     /**
      * @return array{
      *     total: int,
@@ -306,6 +426,19 @@ public function publishableSections(): array
      */
     public function pagination(): array
     {
+        if ($this->sourceState()[0] === null) {
+            return [
+                'total' => 0,
+                'per_page' => max(1, $this->request->integer('per_page', 50)),
+                'current_page' => 1,
+                'last_page' => 1,
+                'next_page_url' => null,
+                'prev_page_url' => null,
+                'from' => null,
+                'to' => null,
+            ];
+        }
+
         $paginator = $this->resolvePaginator();
 
         return [
@@ -321,45 +454,43 @@ public function pagination(): array
     }
 
     /** @return array{0: ?string, 1: ?array} */
-    private function sourceState(): array
+    protected function sourceState(): array
     {
         if ($this->resolvedSource !== null) {
             return $this->resolvedSource;
         }
 
-        // An explicit ?source= wins; otherwise a section-handle URL (e.g.
-        // content/entries/blog, content/entries/singles) selects that source.
+        // An explicit ?source= wins; otherwise the element type's default
+        // (e.g. a section-handle or volume-path URL) selects its source.
         $requestedSource = $this->request->input('source')
-            ?? $this->sourceKeyForSectionHandle()
+            ?? $this->defaultSourceKey()
             ?? '*';
 
-        return $this->resolvedSource = app(ElementIndexes::class)
-            ->resolveSource($this->elementType, $requestedSource, self::RENDER_CONTEXT);
-    }
+        $resolved = app(ElementIndexes::class)
+            ->resolveSource($this->elementType, $requestedSource, static::RENDER_CONTEXT);
 
-    /**
-     * Maps the section-handle route segment to its source key (`singles` for
-     * Single sections, `section:{uid}` otherwise).
-     */
-    private function sourceKeyForSectionHandle(): ?string
-    {
-        if ($this->sectionHandle === null || $this->sectionHandle === '') {
-            return null;
-        }
+        // Not every element type has a `*` source (assets index per-volume,
+        // for example), so mirror the legacy index's behavior and fall back
+        // to the first available source.
+        if ($resolved[0] === null) {
+            $firstSourceKey = ElementSources::getSources($this->elementType, static::RENDER_CONTEXT)
+                ->first(fn (array $source): bool => isset($source['key']))['key'] ?? null;
 
-        if ($this->sectionHandle === 'singles') {
-            return 'singles';
+            if ($firstSourceKey !== null && $firstSourceKey !== $requestedSource) {
+                $resolved = app(ElementIndexes::class)
+                    ->resolveSource($this->elementType, $firstSourceKey, static::RENDER_CONTEXT);
+            }
         }
 
-        $section = Sections::getSectionByHandle($this->sectionHandle);
-
-        return $section ? "section:$section->uid" : null;
+        return $this->resolvedSource = $resolved;
     }
 
     /**
      * The view mode: sent as a string when the user switches views (see the
      * `useElementIndexViewMode` composable), falling back to the persisted
      * view state, then the default table mode.
+     *
+     * @TODO this should maybe return the ElementIndexViewMode enum?
      */
     private function mode(): string
     {
@@ -421,6 +552,11 @@ private function resolveIndexData(): array
         $query = $this->resolveQuery();
         $viewState = $this->viewState();
 
+        // Bound the query to the requested page before indexData() runs its
+        // element fetch, so indexElements() sees the offset/limit it needs —
+        // e.g. assets page folders and files together through that method.
+        $this->resolvePaginationState();
+
         // Reset any ordering applied while building the query so the requested
         // sort stays authoritative, then let indexData() apply it.
         if ($viewState['order'] !== null) {
@@ -434,45 +570,78 @@ private function resolveIndexData(): array
             disabledElementIds: $this->request->array('disabledElementIds'),
             viewState: $viewState,
             sourceKey: $sourceKey,
-            context: self::RENDER_CONTEXT,
+            context: static::RENDER_CONTEXT,
             selectable: true,
             sortable: false,
         );
     }
 
     /**
-     * Paginates a clone of the (ordered, prepared) query. Out-of-range pages
+     * Resolves the current page's bounds and total, and applies the
+     * offset/limit to the shared query so the element type's own
+     * {@see indexElements()} fetch (via {@see indexData()}) returns exactly
+     * this page. The total comes from {@see indexElementCount()}, which for
+     * assets includes the folders merged into each page. Out-of-range pages
      * clamp to the last valid page.
+     *
+     * @return array{perPage: int, page: int, total: int, pageParam: string}
      */
-    private function resolvePaginator(): LengthAwarePaginator
+    private function resolvePaginationState(): array
     {
-        if ($this->paginator !== null) {
-            return $this->paginator;
+        if ($this->paginationState !== null) {
+            return $this->paginationState;
         }
 
-        // Ordering + attribute prep must be applied before pagination executes.
-        $this->resolveIndexData();
-
+        [$sourceKey] = $this->sourceState();
         $query = $this->resolveQuery();
+
         $perPage = max(1, $this->request->integer('per_page', 50));
-        $page = max(1, $this->request->integer(Cms::config()->getPageTriggerParam(), 1));
         $pageParam = Cms::config()->getPageTriggerParam();
 
-        $paginator = (clone $query)->paginate(
-            perPage: $perPage,
-            pageName: $pageParam,
-            page: $page,
-        );
+        $total = $this->elementType::indexElementCount($query, $sourceKey);
+        $lastPage = max(1, (int) ceil($total / $perPage));
+        $page = min(max(1, $this->request->integer($pageParam, 1)), $lastPage);
+
+        $query->offset(($page - 1) * $perPage)->limit($perPage);
+
+        return $this->paginationState = [
+            'perPage' => $perPage,
+            'page' => $page,
+            'total' => $total,
+            'pageParam' => $pageParam,
+        ];
+    }
 
-        if ($page > $paginator->lastPage()) {
-            $paginator = (clone $query)->paginate(
-                perPage: $perPage,
-                pageName: $pageParam,
-                page: max(1, $paginator->lastPage()),
-            );
+    /**
+     * Builds the paginator from the page elements fetched through the element
+     * type's index pipeline (so assets keep their folders) and the resolved
+     * page state.
+     */
+    private function resolvePaginator(): LengthAwarePaginator
+    {
+        if ($this->paginator !== null) {
+            return $this->paginator;
         }
 
-        return $this->paginator = $paginator;
+        // Ordering, attribute prep, and page bounds are applied here; the
+        // resulting elements already reflect this page (folders + rows).
+        $indexData = $this->resolveIndexData();
+        $state = $this->resolvePaginationState();
+
+        $paginator = new IlluminatePaginator(
+            $indexData['elements'] ?? [],
+            $state['total'],
+            $state['perPage'],
+            $state['page'],
+            [
+                'path' => IlluminatePaginator::resolveCurrentPath(),
+                'pageName' => $state['pageParam'],
+            ],
+        );
+
+        return $this->paginator = $paginator->appends(
+            $this->request->except($state['pageParam']),
+        );
     }
 
     /**
@@ -490,23 +659,40 @@ private function tableRows(array $elements): array
         $elementHtml = app(ElementHtml::class);
 
         return array_map(fn (ElementInterface $element) => [
-            'id' => $element->id,
+            'id' => $this->rowId($element),
+            ...$this->extraRowData($element),
             ...collect($attributes)
                 ->mapWithKeys(fn (string $attribute) => [
-                    $attribute => $attribute === 'title' ?
-                        Html::tag('CpLink',
-                            $elementHtml->chipHtml($element, [
-                                'context' => self::RENDER_CONTEXT,
-                                'appearance' => 'plain',
-                            ]),
-                            ['href' => $element->getCpEditUrl(), 'inertia' => false]
-                        )
+                    $attribute => $attribute === 'title'
+                        ? $this->titleCellHtml($element, $elementHtml)
                         : (string) $element->getAttributeHtml($attribute),
                 ])
                 ->all(),
         ], $elements);
     }
 
+    /**
+     * The title cell: an element's chip, wrapped in a CpLink to its edit screen.
+     * Elements with no edit URL (e.g. asset folders, which navigate via their
+     * own row handler) render the bare chip, so no stray anchor intercepts the
+     * row's click.
+     */
+    private function titleCellHtml(ElementInterface $element, ElementHtml $elementHtml): string
+    {
+        $chip = $elementHtml->elementChipHtml($element, [
+            'context' => static::RENDER_CONTEXT,
+            'appearance' => 'plain',
+        ]);
+
+        $editUrl = $element->getCpEditUrl();
+
+        if ($editUrl === null) {
+            return $chip;
+        }
+
+        return Html::tag('CpLink', $chip, ['href' => $editUrl, 'inertia' => false]);
+    }
+
     /**
      * Serializes elements as server-rendered card parts for the cards view.
      * Vue owns the selection process, so cards render non-selectable.
@@ -523,8 +709,10 @@ private function cardData(array $elements): array
             // client-side, while staying unique per card.
             $cardConfig = [
                 'id' => sprintf('card-%s', mt_rand()),
-                'context' => self::RENDER_CONTEXT,
-                'hyperlink' => true,
+                'context' => static::RENDER_CONTEXT,
+                // Folders (no edit URL) navigate via their own card handler, so
+                // don't wrap them in a link that would swallow the click.
+                'hyperlink' => $element->getCpEditUrl() !== null,
                 'showEditButton' => false,
                 'autoReload' => false,
                 'selectable' => false,
@@ -532,7 +720,8 @@ private function cardData(array $elements): array
             ];
 
             return [
-                'id' => $element->id,
+                'id' => $this->rowId($element),
+                ...$this->extraRowData($element),
                 'cardAttributes' => $elementHtml->elementCardAttributes($element, $cardConfig),
                 'cardHeaderHtml' => $elementHtml->elementCardHeaderHtml($element, $cardConfig),
                 'cardContentHtml' => $elementHtml->elementCardContentHtml($element, $cardConfig),
@@ -540,4 +729,46 @@ private function cardData(array $elements): array
             ];
         }, $elements);
     }
+
+    /**
+     * Serializes elements for the thumbnail grid: a large thumbnail image, the
+     * element label, and its edit URL. The client lays these out as tiles (see
+     * the `ElementThumbs` component); folders navigate via their own row data.
+     *
+     * @param  ElementInterface[]  $elements
+     */
+    private function thumbData(array $elements): array
+    {
+        return array_map(fn (ElementInterface $element) => [
+            'id' => $this->rowId($element),
+            ...$this->extraRowData($element),
+            'label' => $element->getUiLabel(),
+            'url' => $element->getCpEditUrl(),
+            'thumbHtml' => $element instanceof Thumbable
+                ? $element->getThumbHtml(self::THUMB_SIZE)
+                : null,
+        ], $elements);
+    }
+
+    /**
+     * A stable, unique row id for the client's table/selection keying. Defaults
+     * to the element id; element types with non-element rows (e.g. asset
+     * folders, which have no element id) override this to stay collision-free.
+     */
+    protected function rowId(ElementInterface $element): string|int|null
+    {
+        return $element->id;
+    }
+
+    /**
+     * Extra per-row payload merged into every serialized row across all view
+     * modes. Empty by default; element-type view models add their own row
+     * metadata (e.g. asset folder navigation) here.
+     *
+     * @return array<string, mixed>
+     */
+    protected function extraRowData(ElementInterface $element): array
+    {
+        return [];
+    }
 }
diff --git a/src/Http/ViewModels/EntryIndexViewModel.php b/src/Http/ViewModels/EntryIndexViewModel.php
new file mode 100644
index 00000000000..5f512c28be4
--- /dev/null
+++ b/src/Http/ViewModels/EntryIndexViewModel.php
@@ -0,0 +1,56 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Http\ViewModels;
+
+use CraftCms\Cms\Entry\Elements\Entry;
+use CraftCms\Cms\Http\Requests\ElementIndexRequest;
+use CraftCms\Cms\Section\Resources\SectionResource;
+use CraftCms\Cms\Support\Facades\Sections;
+use Override;
+
+/**
+ * The Inertia payload for the entry index screen (`content/Index`).
+ */
+class EntryIndexViewModel extends ContentIndexViewModel
+{
+    public function __construct(
+        ElementIndexRequest $request,
+        ?string $page = null,
+        private readonly ?string $sectionHandle = null,
+    ) {
+        parent::__construct(Entry::class, $request, $page);
+    }
+
+    public function sectionHandle(): string
+    {
+        return $this->sectionHandle ?? '';
+    }
+
+    public function publishableSections(): array
+    {
+        return SectionResource::collection(Sections::getPublishableSections())->resolve();
+    }
+
+    /**
+     * Maps the section-handle route segment (e.g. `content/entries/blog`,
+     * `content/entries/singles`) to its source key (`singles` for Single
+     * sections, `section:{uid}` otherwise).
+     */
+    #[Override]
+    protected function defaultSourceKey(): ?string
+    {
+        if ($this->sectionHandle === null || $this->sectionHandle === '') {
+            return null;
+        }
+
+        if ($this->sectionHandle === 'singles') {
+            return 'singles';
+        }
+
+        $section = Sections::getSectionByHandle($this->sectionHandle);
+
+        return $section ? "section:$section->uid" : null;
+    }
+}
diff --git a/src/Plugin/PluginServiceProvider.php b/src/Plugin/PluginServiceProvider.php
index 3b52af18893..0ec25ef0d08 100644
--- a/src/Plugin/PluginServiceProvider.php
+++ b/src/Plugin/PluginServiceProvider.php
@@ -16,7 +16,7 @@ class PluginServiceProvider extends ServiceProvider
     #[\Override]
     public function register(): void
     {
-        $this->app->booting(fn () => $this->app->make(Plugins::class)->loadPlugins());
+        $this->app->booted(fn () => $this->app->make(Plugins::class)->loadPlugins());
     }
 
     public function boot(): void
diff --git a/tests/Feature/Cp/ElementHtmlTest.php b/tests/Feature/Cp/ElementHtmlTest.php
index 9da550ca87e..94b574df48a 100644
--- a/tests/Feature/Cp/ElementHtmlTest.php
+++ b/tests/Feature/Cp/ElementHtmlTest.php
@@ -35,7 +35,7 @@
             ->and($indexHtml)->toContain('thumb')
             ->and($this->elementHtml->elementChipHtml($user, ['showThumb' => false]))->not->toContain('thumb');
 
-        $labelPattern = '/<craft-element-label id="[^"]+" class="label">/';
+        $labelPattern = '/<craft-truncate id="[^"]+" class="label">/';
         expect((bool) preg_match($labelPattern, $indexHtml))->toBeTrue()
             ->and((bool) preg_match($labelPattern, (string) $this->elementHtml->elementChipHtml($user, ['showLabel' => false])))->toBeFalse();
     });
diff --git a/tests/Feature/Http/Controllers/Assets/IndexControllerTest.php b/tests/Feature/Http/Controllers/Assets/IndexControllerTest.php
index 16b9178ae47..0f68203af0c 100644
--- a/tests/Feature/Http/Controllers/Assets/IndexControllerTest.php
+++ b/tests/Feature/Http/Controllers/Assets/IndexControllerTest.php
@@ -4,7 +4,10 @@
 
 use CraftCms\Cms\Asset\Models\Volume;
 use CraftCms\Cms\Cms;
+use CraftCms\Cms\Support\Facades\Folders;
+use CraftCms\Cms\Support\Facades\Volumes;
 use CraftCms\Cms\User\Elements\User;
+use Inertia\Testing\AssertableInertia;
 
 use function Pest\Laravel\actingAs;
 use function Pest\Laravel\get;
@@ -53,3 +56,68 @@
 
     get("/{$cpTrigger}/assets", ['defaultSource' => $volume->handle])->assertOk();
 });
+
+it('includes a volume’s subfolders in the index results', function () {
+    $volumeModel = Volume::factory()->create([
+        'fs' => 'disk:test-disk',
+        'handle' => 'testvolume',
+    ]);
+
+    $volume = Volumes::getVolumeById($volumeModel->id);
+    Folders::ensureFolderByFullPathAndVolume('a-subfolder', $volume);
+
+    $cpTrigger = Cms::config()->cpTrigger;
+
+    get("/{$cpTrigger}/assets/{$volumeModel->handle}")
+        ->assertOk()
+        ->assertInertia(fn (AssertableInertia $page) => $page
+            ->component('assets/Index')
+            ->where('pagination.total', 1)
+            ->has('data', 1)
+            // The folder row is flagged and carries the URL to navigate into it.
+            ->where('data.0.isFolder', true)
+            ->where('data.0.folderUrl', fn (string $url) => str_contains($url, "assets/{$volumeModel->handle}/a-subfolder"))
+        );
+});
+
+it('scopes the results to the subfolder named in the path', function () {
+    $volumeModel = Volume::factory()->create([
+        'fs' => 'disk:test-disk',
+        'handle' => 'testvolume',
+    ]);
+
+    $volume = Volumes::getVolumeById($volumeModel->id);
+    // parent/ holds child/, so browsing parent/ should list child/ — not the
+    // volume root's folders.
+    Folders::ensureFolderByFullPathAndVolume('parent/child', $volume);
+
+    $cpTrigger = Cms::config()->cpTrigger;
+
+    get("/{$cpTrigger}/assets/{$volumeModel->handle}/parent")
+        ->assertOk()
+        ->assertInertia(fn (AssertableInertia $page) => $page
+            ->where('pagination.total', 1)
+            ->has('data', 1)
+            ->where('data.0.isFolder', true)
+            ->where('data.0.folderUrl', fn (string $url) => str_contains($url, "assets/{$volumeModel->handle}/parent/child"))
+        );
+});
+
+it('passes the route path segment through as defaultSource', function () {
+    $volume = Volume::factory()->create([
+        'fs' => 'disk:test-disk',
+        'handle' => 'testvolume',
+    ]);
+
+    $cpTrigger = Cms::config()->cpTrigger;
+
+    get("/{$cpTrigger}/assets/{$volume->handle}")
+        ->assertOk()
+        ->assertInertia(fn (AssertableInertia $page) => $page
+            ->component('assets/Index')
+            // The raw path echoes back so client reloads keep the folder in the
+            // URL; the resolved source key drives which source is active.
+            ->where('defaultSource', $volume->handle)
+            ->where('source.key', "volume:{$volume->uid}")
+        );
+});
diff --git a/workbench/app/Providers/TypeScriptTransformerServiceProvider.php b/workbench/app/Providers/TypeScriptTransformerServiceProvider.php
index 3efcd8e8c01..f0d5a66f479 100644
--- a/workbench/app/Providers/TypeScriptTransformerServiceProvider.php
+++ b/workbench/app/Providers/TypeScriptTransformerServiceProvider.php
@@ -9,6 +9,9 @@
 use CraftCms\Cms\Entry\Data\EntryTypeIndexData;
 use CraftCms\Cms\Gql\Data\GqlSchema;
 use CraftCms\Cms\Gql\Data\GqlToken;
+use CraftCms\Cms\Http\ViewModels\AssetIndexViewModel;
+use CraftCms\Cms\Http\ViewModels\ContentIndexViewModel;
+use CraftCms\Cms\Http\ViewModels\EntryIndexViewModel;
 use CraftCms\Cms\Http\ViewModels\FieldEditViewModel;
 use CraftCms\Cms\Http\ViewModels\FilesystemsEditViewModel;
 use CraftCms\Cms\Http\ViewModels\UserPermissionsViewModel;
@@ -52,6 +55,9 @@ protected function configure(TypeScriptTransformerConfigFactory $config): void
                     Route::class,
                     Updates::class,
                     HtmlFragment::class,
+                    AssetIndexViewModel::class,
+                    ContentIndexViewModel::class,
+                    EntryIndexViewModel::class,
                     FieldEditViewModel::class,
                     UserPermissionsViewModel::class,
                     UserPreferencesViewModel::class,
diff --git a/workbench/app/TypeScript/ViewModelTransformer.php b/workbench/app/TypeScript/ViewModelTransformer.php
index 4bbf3f7dbd4..07b1b556705 100644
--- a/workbench/app/TypeScript/ViewModelTransformer.php
+++ b/workbench/app/TypeScript/ViewModelTransformer.php
@@ -63,7 +63,11 @@ private function getViewModelMethods(PhpClassNode $phpClassNode): array
     {
         return array_filter(
             $phpClassNode->getMethods(ReflectionMethod::IS_PUBLIC),
-            fn (PhpMethodNode $method): bool => $method->getDeclaringClass()->reflection->getName() === $phpClassNode->reflection->getName()
+            // Payload methods can be declared anywhere below the ViewModel base
+            // (e.g. inherited from ContentIndexViewModel), so filter on the
+            // declaring class being a ViewModel subclass rather than the
+            // transformed class itself.
+            fn (PhpMethodNode $method): bool => is_subclass_of($method->getDeclaringClass()->reflection->getName(), ViewModel::class)
                 && count($method->getParameters()) === 0
                 && ! $method->reflection->isConstructor()
                 && ! $method->reflection->isStatic(),
diff --git a/yii2-adapter/tests/unit/helpers/CpHelperTest.php b/yii2-adapter/tests/unit/helpers/CpHelperTest.php
index 33a47297557..2290da3dd39 100644
--- a/yii2-adapter/tests/unit/helpers/CpHelperTest.php
+++ b/yii2-adapter/tests/unit/helpers/CpHelperTest.php
@@ -62,7 +62,7 @@ public function test_element_chip_html(): void
         self::assertStringNotContainsString('thumb', Cp::elementChipHtml($user, ['showThumb' => false]));
 
         // label
-        $labelPattern = '/<craft-element-label id="[^"]+" class="label">/';
+        $labelPattern = '/<craft-truncate id="[^"]+" class="label">/';
         self::assertEquals(1, preg_match($labelPattern, $indexHtml));
         self::assertEquals(0, preg_match($labelPattern, Cp::elementChipHtml($user, ['showLabel' => false])));
 
@@ -103,7 +103,7 @@ public function test_element_html(): void
         self::assertStringNotContainsString('thumb', Cp::elementHtml($user, showThumb: false));
 
         // label
-        $labelPattern = '/<craft-element-label id="[^"]+" class="label">/';
+        $labelPattern = '/<craft-truncate id="[^"]+" class="label">/';
         self::assertEquals(1, preg_match($labelPattern, $indexHtml));
         self::assertEquals(0, preg_match($labelPattern, Cp::elementHtml($user, showLabel: false)));