diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000000..c98aa03ac6
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,47 @@
+# Documentation examples
+
+## Frontend customer account workspace
+
+Reference: `static/downloads/frontend-account/`, documented in
+`docs/user-guide/client-management/frontend-account-page.md`.
+
+This is an optional WordPress presentation example, not a redesign of the
+Docusaurus site or a replacement account/billing implementation. Use native
+Ultimate Multisite widgets and generated action URLs. Keep PHP template logic,
+page markup and scoped CSS together in the downloadable package.
+
+- Operate-mode layout: section navigation, account-wide membership, owned-site
+  selection, selected-site details/limits, billing, then account actions.
+- Calm off-white canvas (`#f7f8f5`), white cards, dark green text (`#1e2e26`),
+  muted labels (`#59675d`), green action color (`#365c39`) and a restrained pale
+  green introduction. Red remains reserved for native destructive actions.
+- System-font body/controls; Georgia heading. No third-party fonts or images
+  are required. Suppress optional product/site artwork through shortcode
+  attributes rather than substituting fake previews.
+- Preserve native widgets' context, labels, totals, confirmations and modals.
+  The presentation layer must not fabricate card data or billing outcomes.
+- Scope styling to `.ums-portal` and the example canvas. Do not globally modify
+  customer-site themes, network admin styles or Ultimate Multisite assets.
+- Desktop: left section navigation, readable content column and paired billing
+  cards. At 1000px the detail cards stack; at 700px navigation becomes a two-
+  column touch-friendly grid. Avoid horizontal scrolling and fixed panel widths.
+- Maintain visible keyboard focus, a skip link and 48px navigation targets.
+  There is no animated navigation. Inputs retain their native visible labels;
+  do not replace labels with placeholders or add invented form controls.
+- Guests see sign-in/recovery guidance, not empty private widgets. Exclude all
+  account/checkout routes from upstream caching as well as sending no-cache
+  headers. Presentation gating never replaces model ownership checks.
+
+Screenshot assets show synthetic data and actual rendered product states,
+not reconstructed UI. Use viewport captures (at most 1568px on the longest
+side), with separate views for content below the fold. Never capture passwords,
+reset/magic tokens or hosted payment session URLs. Keep the seven downloadable
+files, complete inline source reference and ZIP identical. The docs do not ship
+custom generation tooling; the example needs no build step.
+
+The native-block alternative uses editable WordPress Group, Heading and
+Paragraph layouts and nine Ultimate Multisite account blocks, not Shortcode or
+Custom HTML wrappers. Preserve Group classes and section anchors when restyling.
+Show actual inserter, shortcode-entry, block-inspector and List View screenshots,
+not just the rendered account. Preview data is illustrative; saved customer
+actions are verified on the published page in a separate browser.
diff --git a/docs/user-guide/client-management/account-page.md b/docs/user-guide/client-management/account-page.md
index 29940c404d..655d090dfe 100644
--- a/docs/user-guide/client-management/account-page.md
+++ b/docs/user-guide/client-management/account-page.md
@@ -11,6 +11,15 @@ When customers subscribe to a plan on your network, they get access to a website
 
 In this tutorial, we will guide you through the customer's account page and you will see what your customers can see and do inside it.
 
+:::tip Prefer a frontend account page?
+This article describes the customer dashboard's Account screen. To build a
+main-site frontend workspace with native shortcodes, see
+[Build a Frontend Customer Account](frontend-account-page.md). It includes the
+required membership-update configuration, a complete styled example, every
+source file and desktop/mobile screenshots. You do not need to duplicate account
+records or install an account page on each customer subsite.
+:::
+
 ## The Account Page
 
 The account page is accessible by clicking on **Account** inside your customer's dashboard.
diff --git a/docs/user-guide/client-management/frontend-account-blocks.md b/docs/user-guide/client-management/frontend-account-blocks.md
new file mode 100644
index 0000000000..b4e7b7ce36
--- /dev/null
+++ b/docs/user-guide/client-management/frontend-account-blocks.md
@@ -0,0 +1,216 @@
+---
+title: Build the Account Page with Native Blocks
+sidebar_position: 16
+description: Use the WordPress visual editor and native Ultimate Multisite blocks to build an account workspace and membership-update page, with editor screenshots and complete page exports.
+---
+
+# Build the account page with native blocks
+
+This is the visual-editor alternative to the [shortcode account example](frontend-account-page.md).
+It provides the same nine account features, but uses **real Ultimate Multisite
+blocks** inside WordPress Group, Heading and Paragraph blocks. There are no
+Shortcode or Custom HTML blocks in either native-block page export.
+
+The optional example canvas and stylesheet are shared between both versions.
+The page content remains editable block by block: change headings, move account
+widgets, adjust their settings, or replace the surrounding layout with your own.
+
+:::important Release compatibility
+The screenshots and verification use the native-block repairs proposed in
+[plugin PR #2086](https://github.com/Ultimate-Multisite/ultimate-multisite/pull/2086):
+styled iframe previews, correctly typed settings, and early detection of settings
+inside Groups/Columns. Use the release containing these fixes on production.
+The block editor shows sample preview data, not the account of the administrator
+editing the page. Test the published page as a customer before launch.
+:::
+
+## 1. Insert the native account blocks
+
+Create a published page on the **network main site**, not a customer-owned subsite.
+Use **+ Block Inserter** and search for each block by its name below. For example,
+search **Membership** and select Ultimate Multisite's **Membership** block.
+Do not insert a Shortcode block and paste shortcode text for this version.
+
+![Finding the native Membership block in the WordPress Block Inserter](/img/frontend-account/15-native-block-inserter.png)
+
+| Native block name in the inserter | Block identifier | Shortcode equivalent |
+| --- | --- | --- |
+| Membership | `wp-ultimo/current-membership` | `[wu_current_membership]` |
+| My Sites | `wp-ultimo/my-sites` | `[wu_my_sites]` |
+| Site | `wp-ultimo/current-site` | `[wu_current_site]` |
+| Account Summary | `wp-ultimo/account-summary` | `[wu_account_summary]` |
+| Limits & Quotas | `wp-ultimo/limits` | `[wu_limits]` |
+| Billing Information | `wp-ultimo/billing-info` | `[wu_billing_info]` |
+| Payment Methods | `wp-ultimo/payment-methods` | `[wu_payment_methods]` |
+| Invoices | `wp-ultimo/invoices` | `[wu_invoices]` |
+| Actions | `wp-ultimo/site-actions` | `[wu_site_actions]` |
+
+You can start with these nine blocks in a vertical stack in any theme. Put
+Membership and My Sites near the top. Site, Account Summary and Limits & Quotas
+refer to a selected site; they do not replace the account-wide membership card.
+
+For the styled layout, use the page export in step 4. To build your own layout,
+add Heading blocks for Membership, Sites, Billing and Settings, and wrap related
+widgets in Group or Columns blocks. **List View** lets you select nested blocks
+and move whole sections without editing code.
+
+![List View showing editable layout containers and native account blocks](/img/frontend-account/16-block-layout-list-view.png)
+
+## 2. Configure the block inspector
+
+Select a widget, open **Settings → Block**, and use its controls. These are the
+same widget options exposed by shortcode attributes, presented as form controls.
+
+- **Membership:** leave Title blank when your layout already has a membership
+  heading. Turn Display Product Images off for the text-first example.
+- **My Sites:** choose **Same Page** for Site Manage Type, **Owned** for Which
+  sites to show, **2** columns, and turn Display Site Screenshot off. The native
+  Manage links then select the site on this account page.
+- **Site:** turn the screenshot off if you do not have useful site previews.
+  Keep breadcrumbs and the admin link if customers should have those routes.
+- **Billing Information, Payment Methods, Invoices, Account Summary and
+  Limits & Quotas:** edit their titles as needed. Invoice count limits how many
+  payment records are shown; it does not create example invoices.
+- **Actions:** choose whether to expose password, email, default-site and
+  payment-method links. Visibility options do not grant authorization.
+
+![Native Membership block inspector with title, image toggle and column controls](/img/frontend-account/17-membership-block-settings.png)
+
+If you choose **Custom Page** in My Sites, search for a published main-site
+management page in Manage Redirect Page. That destination needs the relevant
+Site, Account Summary, Limits and Actions blocks. For this combined-page layout,
+leave **Same Page** selected. Save, reload and check the settings remain selected.
+
+Editor previews are not live customer operations. Some preview information is
+fictional, and empty states depend on the widget. Do not use editor-preview links
+to cancel, delete or manage a real customer. Use a separate customer browser for
+the published-page checks below.
+
+## 3. Create the matching native Checkout page
+
+Create a second main-site page for membership changes. Insert the **Checkout**
+block (`wp-ultimo/checkout`) and select your published checkout form in its
+inspector. This example uses the form slug **wu-checkout**; replace it with the
+form actually configured on your network.
+
+![Checkout block selected inside a Group, with its form setting in the sidebar](/img/frontend-account/21-checkout-block-settings.png)
+
+Publish the page, then select it as **Network Admin → Ultimate Multisite →
+Settings → Memberships → Default Membership Update Page**. There is one shared
+default for the network, not a separate default for each account example.
+Choosing the block Checkout page changes the destination of native membership
+Change links on both account pages. Keep the membership query generated by those
+links; a bare navigation link to checkout is not equivalent.
+
+The examples use `/account-blocks/` and `/membership-blocks/`. Select the block
+Checkout page to demonstrate the complete all-block journey. You can keep the
+original `/account/` and `/membership/` shortcode pages for comparison; both
+account pages' Change links always use the one shared membership-update setting.
+
+## 4. Reproduce the styled example without writing layout code
+
+[Download the example plugin and both page variants](/downloads/frontend-account-example.zip)
+
+Use the [shared installation steps](frontend-account-page.md#4-install-the-complete-styled-example)
+for the optional canvas plugin and Ollie theme. Then:
+
+1. Create the Account page and switch the editor to **Options → Code editor**.
+2. Paste the entire contents of `account-blocks.html` from the ZIP,
+   including the block comments. Switch back to **Visual editor**. WordPress
+   recognizes the saved blocks; this is a one-time import, not a Code block.
+3. Choose **Account workspace (example)** as the page template, then save.
+4. Repeat for the plans page using `plans-blocks.html` from the ZIP
+   and the same template. Change its Back to your account link if your account
+   slug or WordPress installation directory differs.
+5. Configure the Checkout block's form and the shared membership-update setting.
+
+The exported pages were saved and reloaded in the real WordPress editor. No
+Python tool, generation script, build command or page-builder plugin is needed.
+All seven files, including both native page exports, are displayed in full in the
+[shared source reference](frontend-account-example-source.md).
+
+### Editing the design visually
+
+The imported Group blocks use **Advanced → Additional CSS class(es)** to connect
+to the optional stylesheet. Keep these classes when moving sections:
+
+| Group class | Purpose |
+| --- | --- |
+| `ums-workspace` | Whole two-column workspace |
+| `ums-sidebar`, `ums-nav` | Desktop sidebar/mobile section links |
+| `ums-content`, `ums-intro` | Main column and welcome panel |
+| `ums-section`, `ums-section-heading` | Section spacing and headings |
+| `ums-card` | Card surrounding a native widget |
+| `ums-site-detail`, `ums-detail-grid` | Selected-site and paired detail layouts |
+| `ums-plans` | Membership-update page wrapper |
+
+Set the section Group's **Advanced → HTML anchor** to `overview`, `sites`,
+`billing` or `settings`, matching its section link. Headings and paragraphs remain
+normal editable blocks. The example's navigation paragraphs use zero top/bottom
+margins in Dimensions so the native block theme does not add large gaps.
+
+If using your normal theme template instead of the example canvas, add your own
+signed-out access handling. The optional canvas displays a sign-in screen and
+does not render private widgets for guests. Server-side ownership checks remain
+required in either case.
+
+## 5. Test the published page as a customer
+
+![Published account page built from native blocks](/img/frontend-account/20-block-account-desktop.png)
+
+![Mobile account overview with the editable section navigation](/img/frontend-account/25-block-mobile-overview.png)
+
+1. Sign in as a disposable customer with a membership and two owned sites.
+2. Confirm Membership, billing, payment method and invoices show that customer's
+   records—not the sample data from the editor.
+3. Use **My Sites → Manage**. Confirm the URL stays on this account page and the
+   keyboard focus moves to the selected Site controls. Account Summary and
+   Limits & Quotas should now describe that site. **Your Sites** clears selection.
+4. Open Billing Information → Update, save a reversible change, reload, and
+   verify the membership's saved billing address. Customer-default and
+   membership billing addresses are distinct; check the membership record.
+5. Follow Membership → Change into your configured Checkout block page. Select
+   a plan, review the total, complete a disposable change and inspect the saved
+   membership. A scheduled downgrade should record its future swap date while
+   leaving the active plan in place until that date.
+6. Test Actions, invoice PDFs and gateway-supported payment changes as described
+   in the [account walkthrough](frontend-account-page.md#5-walk-through-the-customer-experience).
+   The Manual example does not fabricate a Stripe card-change button.
+7. Sign out and test narrow-screen navigation and keyboard access. Keep all
+   account/checkout/selected-site routes out of full-page and CDN caches.
+
+![Native Site, Account Summary and Limits blocks after Manage](/img/frontend-account/22-block-selected-site.png)
+
+![Native block account controls on a narrow mobile viewport](/img/frontend-account/23-block-account-mobile.png)
+
+### What was verified for this example
+
+The native block page was saved and reloaded without invalid blocks. Membership
+column changes remained numeric, image toggles persisted as booleans, and a
+published custom management-page selection survived reload before being returned
+to Same Page. Native preview styles loaded inside the editor iframe.
+
+On the published page, guest sign-in, site selection/focus, account summary,
+limits and billing changes were exercised. A real zero-dollar downgrade was
+submitted through the **nested Checkout block** and its scheduled swap was
+verified in the membership, not inferred from the Thank You screen. The schedule
+and temporary billing changes were then removed from the demo fixture. No live
+charges or production customers were involved.
+
+This block-specific pass does not repeat the earlier genuine Stripe sandbox
+replacement/cancellation or every destructive account action. Blocks and
+shortcodes share their server renderers and action handlers, but test your own
+gateway and network settings before launch.
+
+## Troubleshooting blocks
+
+| Symptom | Check |
+| --- | --- |
+| You can only find Shortcode, not Membership/My Sites | Confirm Ultimate Multisite is active and you are editing a main-site page; check editor restrictions and browser errors. |
+| Preview is plain unstyled text | Use the release with iframe preview styling; the widget framework must load in the editor canvas, not just its parent admin window. |
+| A setting changes, then disappears after saving | Check block attribute types and release compatibility. Number controls must save integers, toggles booleans, and page selections strings. |
+| A Group/Columns Checkout uses the wrong form | Use the release that extracts nested block settings during early setup; verify its selected form after reload. |
+| Preview has different data from the published page | Expected: editor previews use sample data. Inspect the customer view in a separate signed-in browser. |
+| My Sites disappears after Manage | The selected Site view replaces the chooser. Use the Your Sites breadcrumb to return. |
+| Change uses the other example's checkout | There is one network-wide Default Membership Update Page. Select the desired published checkout page there. |
+| The design loses its sidebar or cards | Preserve the Group classes/anchors and example page template, or intentionally replace the optional presentation layer with your theme's styling. |
diff --git a/docs/user-guide/client-management/frontend-account-example-source.md b/docs/user-guide/client-management/frontend-account-example-source.md
new file mode 100644
index 0000000000..66f34ebd46
--- /dev/null
+++ b/docs/user-guide/client-management/frontend-account-example-source.md
@@ -0,0 +1,472 @@
+---
+title: Frontend Account Example — Full Source
+sidebar_position: 16
+---
+
+# Frontend account example: full source
+
+Use these exact files with the [complete setup guide](frontend-account-page.md). [Download the installable ZIP](/downloads/frontend-account-example.zip).
+
+These seven files are the complete shared presentation layer and both page variants.
+Follow the [native blocks guide](frontend-account-blocks.md) for the visual-editor
+version. PHP belongs in the example plugin folder; paste HTML exports into the
+page block editor’s Code editor, then return to visual editing. No generator or
+build step is required. Do not put PHP in page content or edit Ultimate Multisite.
+
+### `ums-account-example.php`
+
+```php
+<?php
+/**
+ * Plugin Name: Ultimate Multisite Account Page Example
+ * Description: An optional presentation layer for native Ultimate Multisite shortcodes.
+ * Version: 1.0.0
+ * License: GPL-2.0-or-later
+ * Text Domain: ums-account-example
+ */
+defined('ABSPATH') || exit;
+
+add_filter('theme_page_templates', function ($templates) {
+	$templates['ums-account-canvas.php'] = __('Account workspace (example)', 'ums-account-example');
+	return $templates;
+});
+
+function ums_account_example_is_page() {
+	return is_page() && 'ums-account-canvas.php' === get_page_template_slug(get_queried_object_id());
+}
+
+add_filter('template_include', function ($template) {
+	return ums_account_example_is_page() ? __DIR__ . '/canvas.php' : $template;
+}, 99);
+
+add_action('template_redirect', function () {
+	if (ums_account_example_is_page()) {
+		nocache_headers();
+	}
+});
+
+add_action('wp_enqueue_scripts', function () {
+	if (ums_account_example_is_page()) {
+		wp_enqueue_style('ums-account-example', plugins_url('portal.css', __FILE__), [], '1.0.0');
+	}
+});
+```
+
+### `canvas.php`
+
+```php
+<?php
+/** Optional page canvas; all account data/actions remain native plugin output. */
+defined('ABSPATH') || exit;
+?><!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php echo esc_attr(get_bloginfo('charset')); ?>">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<?php wp_head(); ?>
+</head>
+<body <?php body_class('ums-account-canvas'); ?>>
+<?php wp_body_open(); ?>
+<a class="ums-skip" href="#ums-main"><?php esc_html_e('Skip to account', 'ums-account-example'); ?></a>
+<div class="ums-portal">
+	<header class="ums-topbar">
+		<a class="ums-brand" href="<?php echo esc_url(home_url('/')); ?>"><span class="ums-mark" aria-hidden="true">u</span><span><?php echo esc_html(get_bloginfo('name')); ?></span></a>
+		<span class="ums-topbar-label"><?php esc_html_e('Customer workspace', 'ums-account-example'); ?></span>
+		<?php if (is_user_logged_in()) : ?>
+			<a class="ums-signout" href="<?php echo esc_url(wp_logout_url(get_permalink())); ?>"><?php esc_html_e('Sign out', 'ums-account-example'); ?></a>
+		<?php endif; ?>
+	</header>
+	<?php if (is_user_logged_in()) : ?>
+		<main id="ums-main" tabindex="-1"><?php while (have_posts()) : the_post(); the_content(); endwhile; ?></main>
+	<?php else : ?>
+		<main id="ums-main" class="ums-guest" tabindex="-1">
+			<p class="ums-eyebrow"><?php esc_html_e('Your workspace, in one place', 'ums-account-example'); ?></p>
+			<h1><?php esc_html_e('Welcome back.', 'ums-account-example'); ?></h1>
+			<p><?php esc_html_e('Sign in to manage your sites, membership and billing.', 'ums-account-example'); ?></p>
+			<a class="ums-button" href="<?php echo esc_url(wp_login_url(get_permalink())); ?>"><?php esc_html_e('Sign in to your account', 'ums-account-example'); ?></a>
+			<a class="ums-quiet" href="<?php echo esc_url(wp_lostpassword_url(get_permalink())); ?>"><?php esc_html_e('Forgot your password?', 'ums-account-example'); ?></a>
+		</main>
+	<?php endif; ?>
+	<footer class="ums-footer"><span><?php echo esc_html(get_bloginfo('name')); ?></span><span><?php esc_html_e('Your sites. Your next chapter.', 'ums-account-example'); ?></span></footer>
+</div>
+<?php wp_footer(); ?>
+</body>
+</html>
+```
+
+### `portal.css`
+
+```css
+/* Account example only: no plugin or theme files are modified. */
+body.ums-account-canvas { margin: 0; background: #f7f8f5; }
+.ums-portal { --ink: #1e2e26; --muted: #59675d; --line: #dce2d9; --accent: #365c39; --paper: #fff; color: var(--ink); font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+.ums-portal *, .ums-portal *::before, .ums-portal *::after { box-sizing: border-box; }
+.ums-portal a { color: var(--accent); text-underline-offset: .2em; }
+.ums-portal a:focus-visible, .ums-portal button:focus-visible, .ums-portal input:focus-visible { outline: 3px solid #b16823; outline-offset: 4px; }
+.ums-portal ::selection { color: #18291d; background: #dcebb9; }
+.ums-topbar { min-height: 96px; max-width: 1440px; padding: 20px 56px; margin: auto; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
+.ums-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 750; text-decoration: none; letter-spacing: -.04em; }
+.ums-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: var(--accent); font: 700 28px/1 Georgia, serif; }
+.ums-topbar-label { color: var(--muted); padding-left: 28px; border-left: 1px solid var(--line); font-size: 14px; }
+.ums-signout { margin-left: auto; padding: 10px 0 10px 16px; font-size: 14px; }
+.ums-workspace { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 56px; max-width: 1328px; padding: 48px 56px 72px; margin: auto; }
+.ums-sidebar { align-self: start; position: sticky; top: 32px; padding-top: 16px; }
+.ums-sidebar-label, .ums-eyebrow { font-size: 11px; letter-spacing: .16em; font-weight: 750; margin: 0 0 22px; }
+.ums-sidebar-label { color: var(--muted); }
+.ums-nav { display: grid; gap: 6px; }
+.ums-nav a { display: flex; gap: 15px; align-items: center; min-height: 48px; border-radius: 8px; padding: 10px 12px; margin-left: -12px; text-decoration: none; font-size: 14px; font-weight: 600; }
+.ums-nav a:hover { background: #e7ecdf; }
+.ums-workspace:not(:has(:target)) .ums-nav a[href="#overview"], .ums-workspace:has(#overview:target) .ums-nav a[href="#overview"], .ums-workspace:has(#sites:target) .ums-nav a[href="#sites"], .ums-workspace:has(#billing:target) .ums-nav a[href="#billing"], .ums-workspace:has(#settings:target) .ums-nav a[href="#settings"] { background: #e3ead8; color: #25452b; }
+.ums-nav span { color: #697960; font-size: 11px; font-variant-numeric: tabular-nums; }
+.ums-sidebar-note { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
+.ums-note-dot { display: block; width: 8px; height: 8px; background: #7c994a; border-radius: 50%; }
+.ums-content { min-width: 0; }
+.ums-intro { position: relative; padding: 28px 36px; margin-bottom: 30px; background: #e9eedf; border: 1px solid #dce4cc; border-radius: 16px; }
+.ums-portal h1 { font: 500 clamp(40px, 4vw, 54px)/1.04 Georgia, "Times New Roman", serif; letter-spacing: -.045em; margin: 0 0 16px; color: var(--ink); }
+.ums-intro > p:not(.ums-eyebrow) { max-width: 520px; margin-bottom: 12px; color: #465640; font-size: 16px; }
+.ums-text-link { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; font-weight: 650; font-size: 14px; text-decoration: none; border-bottom: 1px solid currentColor; }
+.ums-text-link:hover { color: #162f1a; }
+.ums-section { margin-top: 38px; scroll-margin-top: 28px; }
+.ums-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
+.ums-section-heading h2 { font-size: 24px; font-weight: 650; letter-spacing: -.045em; margin: 0; }
+.ums-section-heading > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
+.ums-section-copy { color: var(--muted); margin: -4px 0 20px; font-size: 14px; max-width: 640px; }
+.ums-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; min-width: 0; }
+.ums-card:empty { display: none; }
+.ums-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+.ums-site-detail { display: grid; gap: 20px; margin-top: 20px; }
+.ums-site-detail > .ums-card:not(:has(.wu-current-site)), .ums-detail-grid > .ums-card:not(:has(.wu-styling)), .ums-invoices:not(:has(.wu-invoices)) { display: none; }
+.ums-invoices { margin-top: 20px; }
+.ums-portal .wu-styling { font-family: inherit; font-size: 14px; line-height: 1.6; }
+.ums-portal .wu-styling h3 { font-size: 16px; color: var(--ink); }
+.ums-portal .wu-styling > div { margin-top: 0; }
+.ums-portal .wu-styling .wu-rounded, .ums-portal .wu-styling .wu-rounded-lg { border-radius: 8px; }
+.ums-portal .wu-styling .wu-bg-gray-100, .ums-portal .wu-styling .wu-bg-gray-200 { background: #f8faf5; }
+.ums-portal .wu-styling .button-primary { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 7px; padding: 8px 14px; min-height: 40px; box-shadow: none; }
+.ums-portal .wu-styling .button-primary:hover { background: #244629; border-color: #244629; }
+.ums-portal .wu-styling .button { text-decoration: none; }
+.ums-portal .wu-styling a:not(.button):hover { text-decoration: underline; }
+.ums-portal .wu-styling .wu-my-4, .ums-portal .wu-styling .wu-my-6 { margin-top: 0; margin-bottom: 0; }
+.ums-portal .wu-styling .wu-font-bold, .ums-portal .wu-styling .wu-font-semibold { font-weight: 650; }
+.ums-portal .wu-styling .wu-text-xs { font-size: 12px; }
+.ums-portal .wu-styling .wu-text-sm { font-size: 14px; }
+.ums-portal .wu-styling .wu-text-gray-600, .ums-portal .wu-styling .wu-text-gray-500 { color: #59675d; }
+.ums-portal .wu-styling table { font-variant-numeric: tabular-nums; }
+.ums-footer { border-top: 1px solid var(--line); max-width: 1216px; margin: auto; padding: 24px 0 36px; display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 12px; }
+.ums-guest, .ums-plans { max-width: 940px; margin: 64px auto 96px; padding: 0 32px; }
+.ums-guest { min-height: 48vh; }
+.ums-guest > p { max-width: 520px; }
+.ums-button { display: inline-flex; padding: 12px 22px; border-radius: 8px; background: var(--accent); color: #fff !important; font-weight: 650; text-decoration: none; }
+.ums-button:hover { background: #244629; }
+.ums-quiet { display: block; width: fit-content; margin-top: 20px; font-size: 14px; }
+.ums-plans > .ums-eyebrow { margin-top: 40px; }
+.ums-plans > .ums-card { padding: 24px; margin-top: 32px; }
+.ums-skip { position: absolute; left: -10000px; }
+.ums-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100000; background: #fff; color: #1e2e26; padding: 12px; }
+@media (max-width: 1000px) {
+  .ums-topbar { padding: 20px 32px; }
+  .ums-workspace { grid-template-columns: 170px minmax(0, 1fr); gap: 32px; padding: 32px; }
+  .ums-intro { padding: 30px; }
+  .ums-detail-grid { grid-template-columns: minmax(0, 1fr); }
+  .ums-footer { margin: 0 32px; }
+}
+@media (max-width: 700px) {
+  .ums-topbar { min-height: 76px; padding: 16px 22px; gap: 12px; }
+  .ums-topbar-label { display: none; }
+  .ums-workspace { display: block; padding: 20px 20px 48px; }
+  .ums-sidebar { position: static; padding: 0; margin-bottom: 24px; }
+  .ums-sidebar-label, .ums-sidebar-note { display: none; }
+  .ums-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
+  .ums-nav a { padding: 8px 10px; margin: 0; background: #edf0e7; font-size: 12px; gap: 8px; }
+  .ums-intro { border-radius: 12px; padding: 28px 24px; margin-bottom: 30px; }
+  .ums-portal h1 { font-size: 43px; }
+  .ums-intro br:not(h1 br) { display: none; }
+  .ums-section-heading h2 { font-size: 21px; }
+  .ums-section-heading > span { font-size: 9px; }
+  .ums-footer { margin: 0 20px; flex-direction: column; gap: 4px; }
+  .ums-plans, .ums-guest { padding: 0 22px; margin-top: 40px; }
+  .ums-plans > .ums-card { padding: 12px; }
+}
+```
+
+### `account-page.html`
+
+```html
+<!-- wp:html -->
+<div class="ums-workspace">
+  <aside class="ums-sidebar" aria-label="Account sections">
+    <p class="ums-sidebar-label">YOUR WORKSPACE</p>
+    <nav class="ums-nav" aria-label="On this page">
+      <a href="#overview"><span aria-hidden="true">01</span> Overview</a>
+      <a href="#sites"><span aria-hidden="true">02</span> My sites</a>
+      <a href="#billing"><span aria-hidden="true">03</span> Billing &amp; invoices</a>
+      <a href="#settings"><span aria-hidden="true">04</span> Account settings</a>
+    </nav>
+    <div class="ums-sidebar-note"><span class="ums-note-dot" aria-hidden="true"></span><p>A little less admin.<br>More room to create.</p></div>
+  </aside>
+  <div class="ums-content">
+    <header class="ums-intro" id="overview">
+      <p class="ums-eyebrow">MAKE YOURSELF AT HOME</p>
+      <h1>Your next chapter<br>starts here.</h1>
+      <p>Everything you need to keep your sites moving.<br> Manage your plan, your billing and what comes next.</p>
+      <a class="ums-text-link" href="#sites">Go to your sites <span aria-hidden="true">↗</span></a>
+    </header>
+    <section class="ums-section" aria-labelledby="membership-heading">
+      <div class="ums-section-heading"><h2 id="membership-heading">Your membership</h2><span>THE BIG PICTURE</span></div>
+      <div class="ums-card ums-membership">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_current_membership title="" display_images="0"]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+      </div>
+    </section>
+    <section class="ums-section" id="sites" aria-labelledby="sites-heading">
+      <div class="ums-section-heading"><h2 id="sites-heading">Made by you.</h2><span>YOUR SITES</span></div>
+      <p class="ums-section-copy">Choose Manage to see a site's details, usage and available actions.</p>
+      <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_my_sites display_images="0"]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+      </div>
+      <div class="ums-site-detail">
+        <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_current_site display_image="0"]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+        </div>
+        <div class="ums-detail-grid">
+          <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_account_summary]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+          </div><div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_limits]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="ums-section" id="billing" aria-labelledby="billing-heading">
+      <div class="ums-section-heading"><h2 id="billing-heading">The practical details.</h2><span>BILLING</span></div>
+      <div class="ums-detail-grid">
+        <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_billing_info]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+        </div><div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_payment_methods]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+        </div>
+      </div>
+      <div class="ums-card ums-invoices">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_invoices]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+      </div>
+    </section>
+    <section class="ums-section" id="settings" aria-labelledby="settings-heading">
+      <div class="ums-section-heading"><h2 id="settings-heading">You're in control.</h2><span>SETTINGS</span></div>
+      <p class="ums-section-copy">Keep your account up to date. Site-specific actions appear after choosing a site.</p>
+      <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_site_actions]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+      </div>
+    </section>
+  </div>
+</div>
+<!-- /wp:html -->
+```
+
+### `account-blocks.html`
+
+```html
+<!-- wp:group {"className":"ums-workspace"} -->
+<div class="wp-block-group ums-workspace"><!-- wp:group {"className":"ums-sidebar"} -->
+<div class="wp-block-group ums-sidebar"><!-- wp:paragraph {"className":"ums-sidebar-label"} -->
+<p class="ums-sidebar-label">YOUR WORKSPACE</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"className":"ums-nav"} -->
+<div class="wp-block-group ums-nav"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<p style="margin-top:0;margin-bottom:0"><a href="#overview">01 Overview</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<p style="margin-top:0;margin-bottom:0"><a href="#sites">02 My sites</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<p style="margin-top:0;margin-bottom:0"><a href="#billing">03 Billing &amp; invoices</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<p style="margin-top:0;margin-bottom:0"><a href="#settings">04 Account settings</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-content","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<div class="wp-block-group ums-content" style="margin-top:0;margin-bottom:0"><!-- wp:group {"className":"ums-intro","anchor":"overview"} -->
+<div id="overview" class="wp-block-group ums-intro"><!-- wp:paragraph {"className":"ums-eyebrow"} -->
+<p class="ums-eyebrow">MAKE YOURSELF AT HOME</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading">Your next chapter<br>starts here.</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Everything you need to keep your sites moving. Manage your plan, your billing and what comes next.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"section","className":"ums-section","anchor":"membership"} -->
+<section id="membership" class="wp-block-group ums-section"><!-- wp:group {"className":"ums-section-heading"} -->
+<div class="wp-block-group ums-section-heading"><!-- wp:heading -->
+<h2 class="wp-block-heading">Your membership</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/current-membership {"title":"","display_images":false} /--></div>
+<!-- /wp:group --></section>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"section","className":"ums-section","anchor":"sites"} -->
+<section id="sites" class="wp-block-group ums-section"><!-- wp:group {"className":"ums-section-heading"} -->
+<div class="wp-block-group ums-section-heading"><!-- wp:heading -->
+<h2 class="wp-block-heading">Made by you.</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->
+
+<!-- wp:paragraph {"className":"ums-section-copy"} -->
+<p class="ums-section-copy">Choose Manage to see a site’s details, usage and available actions.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/my-sites {"columns":2,"display_images":false} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-site-detail"} -->
+<div class="wp-block-group ums-site-detail"><!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/current-site {"display_image":false} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-detail-grid"} -->
+<div class="wp-block-group ums-detail-grid"><!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/account-summary /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/limits /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></section>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"section","className":"ums-section","anchor":"billing"} -->
+<section id="billing" class="wp-block-group ums-section"><!-- wp:group {"className":"ums-section-heading"} -->
+<div class="wp-block-group ums-section-heading"><!-- wp:heading -->
+<h2 class="wp-block-heading">The practical details.</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-detail-grid"} -->
+<div class="wp-block-group ums-detail-grid"><!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/billing-info /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/payment-methods /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/invoices /--></div>
+<!-- /wp:group --></section>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"section","className":"ums-section","anchor":"settings"} -->
+<section id="settings" class="wp-block-group ums-section"><!-- wp:group {"className":"ums-section-heading"} -->
+<div class="wp-block-group ums-section-heading"><!-- wp:heading -->
+<h2 class="wp-block-heading">You’re in control.</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->
+
+<!-- wp:paragraph {"className":"ums-section-copy"} -->
+<p class="ums-section-copy">Keep your account up to date. Site-specific actions appear after choosing a site.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/site-actions /--></div>
+<!-- /wp:group --></section>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+```
+
+### `plans-blocks.html`
+
+```html
+<!-- wp:group {"className":"ums-plans"} -->
+<div class="wp-block-group ums-plans"><!-- wp:paragraph -->
+<p><a href="/account-blocks/">← Back to your account</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"className":"ums-eyebrow"} -->
+<p class="ums-eyebrow">ROOM TO GROW</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading">A plan for your<br>next chapter.</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Choose the plan that fits your sites. Review the total before confirming.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/checkout {"slug":"wu-checkout"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+```
+
+### `plans-page.html`
+
+```html
+<!-- wp:html -->
+<div class="ums-plans">
+  <a class="ums-text-link" href="/account/">← Back to your account</a>
+  <p class="ums-eyebrow">ROOM TO GROW</p>
+  <h1>A plan for your<br>next chapter.</h1>
+  <p>Choose the plan that fits your sites. Review the total before confirming.</p>
+  <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_checkout slug="wu-checkout"]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+  </div>
+</div>
+<!-- /wp:html -->
+```
diff --git a/docs/user-guide/client-management/frontend-account-page.md b/docs/user-guide/client-management/frontend-account-page.md
new file mode 100644
index 0000000000..e22a51de7e
--- /dev/null
+++ b/docs/user-guide/client-management/frontend-account-page.md
@@ -0,0 +1,273 @@
+---
+title: Build a Frontend Customer Account
+sidebar_position: 15
+description: Build a complete customer workspace with native account shortcodes, an optional styled example, full source code, screenshots, and a working membership-change page.
+---
+
+# Build a frontend customer account
+
+Give your customers one place to manage their membership, sites, billing and account details—without making the WordPress dashboard their starting point.
+
+This guide builds a real account page, not a static mockup. The example uses **Ollie 1.6.0**, native Ultimate Multisite shortcodes, and a small optional presentation plugin. The theme supplies the WordPress foundation; the downloadable example supplies the account canvas and its scoped styling. No page builder, external fonts, paid theme or custom billing API is required.
+
+Prefer visual editing without shortcode text? Follow the separate
+[native block editor example](frontend-account-blocks.md). It builds the same
+account sections with real Ultimate Multisite blocks inside editable layout
+blocks, plus a native Checkout block page.
+
+![Desktop customer account workspace with sidebar navigation, membership and plan controls](/img/frontend-account/01-overview.png)
+
+:::important Compatibility and release status
+The screenshots were captured on a local WordPress Multisite installation with the frontend-account fixes proposed in [plugin PR #2086](https://github.com/Ultimate-Multisite/ultimate-multisite/pull/2086). The version string alone does not establish that those fixes are installed. Until that PR is released, some older installations may not provide the same recovery states, Manage focus, resubscription, cancellation validation or Stripe return behavior. Use the release containing those fixes for production; do not install an unreviewed development branch on a live network.
+:::
+
+## 1. Understand the two account views
+
+There is **no single central account shortcode**. Build the landing page from account-wide widgets, then let the customer choose a site for site-specific controls.
+
+| Shortcode | What it does | When it appears |
+| --- | --- | --- |
+| `[wu_current_membership]` | Current plan, status, amounts, expiry and Change link | When the customer has membership context |
+| `[wu_billing_info]` | Billing address and its Update form | Account/membership context |
+| `[wu_payment_methods]` | Current gateway/card and a Change link when supported | Account/membership context and gateway support |
+| `[wu_invoices]` | Payment records and invoice PDF links | Account/membership context; records must exist |
+| `[wu_my_sites]` | Owned sites and their Manage links | Signed-in customer with sites |
+| `[wu_current_site]` | Selected site's details, Edit Site, Visit Site and Admin Panel | After choosing a site |
+| `[wu_account_summary]` | Selected site's plan, storage and trial information | After choosing a site; newer versions show a chooser/recovery state beforehand |
+| `[wu_limits]` | Selected site's usage against plan limits | After choosing a site |
+| `[wu_site_actions]` | Account actions plus available membership/site actions | Actions depend on context, membership state and settings |
+| `[wu_magic_link_url]` | A site-login link for a customer site | Optional; treat generated links as sensitive |
+
+The example includes the first nine widgets. It deliberately omits the optional magic link: native Visit Site and Admin Panel actions are sufficient for this layout. Do not publish a generated magic token in screenshots, HTML examples or support messages.
+
+**Account landing:** membership, billing, invoices and a list of sites. **Selected-site view:** the same account page plus that site's details, usage and actions. For customers with multiple memberships, keep the membership/site context generated by the plugin's links; do not hard-code someone else's identifiers into your page.
+
+### Main site or customer subsite?
+
+Create the frontend Account, Membership and Login pages on the **network's main site**. Native frontend account elements are not registered on customer-owned subsites in the standard setup; pasting these shortcodes into a subsite may leave literal shortcode text.
+
+The customer's subsite **wp-admin Account** screen is an alternative interface to the same network-managed membership. You do not need to duplicate account records or create an account page on every customer site. Add a link back to the main-site Account page in your site template's navigation if desired. Sovereign/multi-tenancy deployments may additionally route management actions back to the authoritative main-site customer panel; follow their integration guidance.
+
+## 2. Create the pages and connect plan changes
+
+Before starting, make sure Ultimate Multisite is active on a working WordPress
+Multisite network, your products and checkout form are configured, and your
+test WordPress user is linked to an Ultimate Multisite customer, membership
+and owned site. Use a disposable customer on staging, not a live customer's
+account, for cancellation, deletion or payment tests.
+
+On a staging network, create these **published main-site pages**:
+
+| Page | Suggested slug | Content |
+| --- | --- | --- |
+| Account | `account` | Account shortcodes, or the complete example below |
+| Choose your plan | `membership` | `[wu_checkout slug="wu-checkout"]` or the example plans page |
+| Login | `login` | `[wu_login_form]`, if using Ultimate Multisite's custom login page |
+
+`wu-checkout` is the checkout-form slug used in this example, **not a universal requirement**. Replace it with your actual published form's slug, found under **Ultimate Multisite → Checkout Forms**. The form must expose the products/plans the customer is allowed to choose. See [Checkout Forms](../configuration/checkout-forms.md).
+
+In **Network Admin → Ultimate Multisite → Settings → Memberships**, set **Default Membership Update Page** to the published **Choose your plan** page and save. This is what keeps the membership Change action in the frontend instead of falling back to the customer dashboard's checkout.
+
+If using a custom login page, configure it under **Settings → Login & Registration**. Otherwise the example uses WordPress's configured login URL. Test both sign-in and forgotten-password email delivery before launch.
+
+:::tip Do not replace generated plan-change links
+The native Change link carries the selected membership into checkout. A plain navigation link to `/membership/` does not carry that context and is not a substitute. Likewise, Resubscribe must reuse the existing cancelled membership, not send the customer through a new-site registration form.
+:::
+
+## 3. Start with the minimal working page
+
+If you want your current theme's normal header and footer, use separate **Shortcode blocks** in the Account page:
+
+1. Open **Pages → Add Page** on the main site and enter your account page title.
+2. Click the **+ Block Inserter**, search for **Shortcode**, and insert WordPress's
+   **Shortcode** block—not Code or Custom HTML.
+3. Paste `[wu_current_membership]` into its text box. Add another Shortcode block
+   for each remaining widget below. Use List View to reorder them and Heading
+   or Group blocks to organize your sections.
+4. Publish, then view the page as a real customer. Shortcode blocks show shortcode
+   text in the editor; they do not show the customer's live account there.
+
+![Searching for the Shortcode block in the actual WordPress page editor](/img/frontend-account/19-shortcode-inserter.png)
+
+![A newly inserted Shortcode block with the membership shortcode entered](/img/frontend-account/24-add-shortcode-text.png)
+
+![Membership shortcode entered into a Shortcode block in the actual account page](/img/frontend-account/18-shortcode-editor-settings.png)
+
+```text
+[wu_current_membership]
+[wu_my_sites]
+[wu_current_site]
+[wu_account_summary]
+[wu_limits]
+[wu_billing_info]
+[wu_payment_methods]
+[wu_invoices]
+[wu_site_actions]
+```
+
+Place these blocks directly in the page content. A wrapper that only runs the shortcodes later in PHP can prevent early shortcode detection and asset setup. Do not paste them into a Code block, which displays them as text.
+
+Protect the page for signed-in customers using your site's access controls. The styled example below includes a sign-in-only guest state, but presentation restrictions never replace Ultimate Multisite's server-side ownership checks.
+
+## 4. Install the complete styled example
+
+[Download the complete example ZIP](/downloads/frontend-account-example.zip)
+
+The archive contains **every source file used for the screenshots**:
+
+```text
+ums-account-example/
+├── ums-account-example.php   # Optional template registration, assets and no-cache headers
+├── canvas.php               # Header, guest state, page content and footer
+├── portal.css               # Scoped desktop/mobile design
+├── account-page.html        # Complete Gutenberg Account page markup
+├── plans-page.html          # Shortcode-based Membership page
+├── account-blocks.html      # Native blocks alternative; no Shortcode/HTML blocks
+└── plans-blocks.html        # Native Checkout block alternative
+```
+
+1. Back up your staging site and note its current theme and membership-update page.
+2. Install/activate **Ollie** on the main site. The example was tested with 1.6.0. Ollie is not a dependency for the native shortcodes; another theme can work, but test its inherited styles.
+3. Upload the ZIP using the network's plugin installation screen, then activate **Ultimate Multisite Account Page Example** for the main site. Do not replace or edit the Ultimate Multisite plugin.
+4. Edit the Account page. Open the block editor's **Code editor** and paste the **entire contents of `account-page.html`**, including its block comments. Return to the visual editor and save. The mixed HTML/Shortcode blocks create the layout while keeping the native shortcodes detectable.
+5. Set that page's template to **Account workspace (example)** in the page settings. If the template choice is not shown in your editor, use the page list's **Quick Edit → Template**, then reload the editor. This template is supplied by the example plugin; it is not an Ollie template.
+6. Repeat for Choose your plan, using `plans-page.html` and the same template. Replace its checkout-form slug if necessary.
+7. If your Account page is not `/account/`, update the **Back to your account** link in `plans-page.html`. For WordPress installed in a subdirectory, include that subdirectory in the link too.
+8. Set **Default Membership Update Page** as described above, then add the Account page to the main site's navigation and, if useful, your customer site templates' menus.
+
+The canvas takes its brand name from **Settings → General → Site Title**. “Northstar,” “Alex” and the sites shown here are synthetic demonstration data, not required settings or records created by the example plugin. Change the editorial copy in the HTML files and the color variables in `portal.css` to fit your brand.
+
+The example never creates customers, sites, memberships, payments or credentials. Installing it on an empty network does not populate the screenshot data.
+
+### Design and mobile behavior
+
+The page uses a muted green palette, serif editorial heading, system-font controls, a left section navigation on desktop and a two-column navigation on mobile. Actions remain the plugin's real links and forms. Product/site images are disabled with supported attributes because preview artwork is optional—not a prerequisite for account management.
+
+![Mobile account overview with four large navigation links and a single-column layout](/img/frontend-account/11-mobile-overview.png)
+
+The supplied stylesheet is scoped to this canvas; it does not globally restyle your theme or the network admin. The example has visible keyboard focus, a skip link and no animated navigation. Native widget markup can evolve: recheck your scoped overrides after plugin updates.
+
+## 5. Walk through the customer experience
+
+### Choose and manage a site
+
+The customer starts with **My sites**. Each Manage link selects that owned site and brings its controls into view. Keep these generated links intact rather than building a URL from numeric IDs.
+
+![Owned sites with their active status and Manage links](/img/frontend-account/02-sites.png)
+
+After selection, Current Site shows the site's actual URL and native Visit Site, Edit Site and Admin Panel actions. **Your Sites** returns to the account landing page. Account Summary and Site Limits now refer to this selected site.
+
+![Selected site with native site actions, plan summary and usage limits](/img/frontend-account/03-selected-site.png)
+
+![Selected-site controls on mobile](/img/frontend-account/12-mobile-site.png)
+
+![Readable site usage limits in the mobile single-column layout](/img/frontend-account/14-mobile-limits.png)
+
+An empty site list is a data/context issue, not something to fill with static cards: check the customer's site ownership, membership assignment and provisioning state. A signed-in WordPress user without an Ultimate Multisite customer/membership will not automatically receive account data.
+
+### Change the membership plan
+
+The membership's **Change** link opens the configured frontend checkout. The example deliberately uses the native checkout rather than implementing its own purchase form.
+
+![Frontend membership-update page with available Free and Premium plans](/img/frontend-account/06-plans.png)
+
+The customer chooses a plan and reviews the recalculated total before completing checkout. A downgrade may be scheduled for the existing period's end rather than replacing the plan immediately. Confirm the resulting membership state and scheduled date; do not infer success just because the Thank You page renders.
+
+![Plan-change review showing a Free selection and zero-dollar total before submission](/img/frontend-account/07-plan-review.png)
+
+These screenshots use example products. Your prices, taxes, signup fees, prorating and available gateways come from your own checkout/product configuration.
+
+### Update billing and payment details
+
+Billing Address opens the native address form. Payment Method shows the actual configured gateway or effective card information. Invoice references link to the customer's actual invoice PDFs.
+
+![Billing address, payment gateway and completed invoice record](/img/frontend-account/04-billing.png)
+
+![Native billing-address form opened from the frontend page](/img/frontend-account/05-billing-form.png)
+
+**Manual/Free:** an online card-change link is not expected for a gateway that does not support it. Manual paid upgrades/reactivations can remain On Hold until an administrator confirms payment and explicitly activates the membership in the payment editor.
+
+**Stripe:** enable **Use Stripe Billing Portal** for the membership's Stripe gateway and configure the correct test/live credentials. The membership needs valid Stripe customer/subscription references. The portal opens on Stripe's own domain and returns to the originating account page. The card display must respect a subscription-specific card when set, or the customer's default when the portal removes that override. See [Stripe](../payment-gateways/stripe.md).
+
+A real sandbox replacement and frontend return were verified while preparing this guide, as was remote Stripe cancellation, with zero charges. The screenshots here deliberately show the Manual example: they do not simulate a card or contain gateway/session tokens. Configure and test your own sandbox before enabling live payments.
+
+### Change email, password and default site
+
+The Settings section renders available account actions rather than a hard-coded list. Password and email changes use the customer's current password. The default-site selector is useful when the customer belongs to more than one site.
+
+![Account settings with change-password, change-email and cancellation actions](/img/frontend-account/08-settings.png)
+
+![Native password-change form, with no passwords filled in](/img/frontend-account/09-password.png)
+
+Forgotten-password recovery is a separate flow: request the reset email, follow its link, set a new password and sign in again. A success message after requesting email is not proof that the message was delivered; test your mail transport.
+
+### Cancellation, resubscription and destructive actions
+
+Membership cancellation requires a reason and the confirmation phrase shown by the form. The account then reflects the cancelled membership and can offer Resubscribe. Whether sites remain available until expiration depends on the membership dates and your access-blocking configuration.
+
+![Native cancellation dialog with reason selection and confirmation requirement](/img/frontend-account/10-cancellation.png)
+
+Delete Site, template switching/reset and other site-specific actions appear only when a site is selected and the feature is allowed. Template replacement/reset can overwrite site content. Keep native confirmations and backups; do not turn these into one-click custom links. Site deletion is distinct from membership cancellation and must return to a valid account page afterward.
+
+### Optional domain management and new-site signup
+
+If your plans allow customer domains, you can add `[wu_domain_mapping]` in a
+separate Shortcode block beside the selected-site controls. Enable domain
+mapping at the network and product levels, and test ownership, DNS instructions
+and verification on staging. This optional widget is not included in the nine-
+widget screenshot example. See [Domain Mapping](../domain-mapping/how-to-configure-domain-mapping.md).
+
+The example is an account-management page, not a replacement signup funnel.
+Adding another site must follow your network's permitted new-site checkout
+flow. Do not reuse an existing membership's Change or Resubscribe link as an
+"Add site" button, and do not hard-code a template-change URL: use the native
+site action, which may legitimately open the selected site's admin interface.
+
+### Signed-out customers
+
+The example canvas does not render account widgets for guests. Instead, it shows the configured sign-in URL and password-recovery link. Sign out after testing to verify this state in a separate browser.
+
+![Signed-out account screen with sign-in and password-recovery links](/img/frontend-account/13-sign-in.png)
+
+## 6. Security, caching and launch checklist
+
+- Use HTTPS in production and keep the plugin's ownership checks intact. Never trust a membership/site selector solely because it is hashed.
+- Exclude Account, Membership, Login, selected-site account URLs and plugin form/AJAX endpoints from full-page/CDN caching. The example sends no-cache headers, but an upstream cache can serve a response before WordPress runs. Verify exclusions at the cache layer too.
+- Do not cache one customer's rendered HTML and serve it to another. Test with two different customers and an anonymous browser.
+- Do not paste API keys, passwords, generated magic links, portal session URLs or reset tokens into page content or screenshots.
+- Test a new customer with no sites, a customer with one site, multiple sites/memberships, a trial, an active subscription and a cancelled subscription.
+- Follow Manage, Change, Update, invoice, Visit Site and Admin Panel links. Submit actual account changes on disposable fixtures, then verify the saved records.
+- Exercise plan change, offline confirmation, cancellation/resubscription and password reset. Test payment-method replacement in a genuine provider sandbox.
+- Check desktop and mobile, keyboard focus and modal dismissal. A screenshot of a form is not proof that its save handler works.
+- Keep a route back to Account from your login, membership checkout and customer-site menus.
+
+## Troubleshooting
+
+| Symptom | Check |
+| --- | --- |
+| A shortcode displays literally on a subsite | Move the frontend account pages to the main site; check that it is a Shortcode block and the plugin is active. |
+| Summary or limits are empty | Select an owned site using My Sites → Manage. Check the customer/site/membership relationship, including migrated records. |
+| Most widgets are empty for a signed-in user | Check that the WordPress user has a corresponding Ultimate Multisite customer and usable membership. |
+| Manage seems to do nothing | Keep Current Site or Account Summary on the same page. Check the selected-site URL and focus/fragment behavior; use a release with the frontend-account fixes. |
+| Change opens admin or bounces to a dashboard | Select a published main-site Default Membership Update Page containing a valid checkout shortcode; inspect redirect/custom-login plugins too. |
+| Checkout asks for a new site during resubscription | Preserve the native membership-context link and use the release containing the corrected resubscription flow. |
+| No Change link under Payment Method | Check gateway support, Stripe Billing Portal setting, credentials and membership gateway references. Manual/Free do not have an online card-change flow. |
+| Card changes in Stripe but the widget loses card details | Use the fixed gateway that reads the effective customer default when there is no subscription override. |
+| Manual payment says Completed but membership is On Hold | In the administrator payment editor, explicitly activate the membership when confirming the offline payment. |
+| CSS/layout differs from these screenshots | Confirm the example plugin is active, the Account workspace template is selected and cached CSS is cleared. Inspect inherited theme styles. |
+| A previous customer's information appears | Stop using the cached page, purge it and repair the cache/ownership issue before reopening access. Do not hide the symptom with CSS. |
+
+## Full source code
+
+The source reference contains all seven presentation and page files, including
+both [native block page exports](frontend-account-blocks.md). All seven are also
+in the ZIP. No Python script, generator or
+build step is needed to install or use either example. PHP goes in the example
+plugin folder—not the page editor or Ultimate Multisite itself. Paste the HTML
+exports into the block editor's **Code editor**, then switch back to visual editing.
+
+[Open the complete source reference](frontend-account-example-source.md).
+
+## Removing the example
+
+Choose a normal theme template for the two pages, replace the styled markup with your preferred native Shortcode blocks, and deactivate the example plugin. Keep a published valid membership-update page selected. This removes only the presentation layer; it does not delete customer sites, memberships, billing records or the main Ultimate Multisite plugin.
diff --git a/docs/user-guide/client-management/shortcodes.md b/docs/user-guide/client-management/shortcodes.md
index a9b76239e8..8111ceef1d 100644
--- a/docs/user-guide/client-management/shortcodes.md
+++ b/docs/user-guide/client-management/shortcodes.md
@@ -11,6 +11,10 @@ The shortcode and its matching block provide the same feature and settings. Sett
 
 ## Building custom customer dashboards and account pages
 
+For a complete main-site account recipe, membership-update settings, a styled
+Ollie example, full source and desktop/mobile screenshots, see
+[Build a Frontend Customer Account](frontend-account-page.md).
+
 Create a WordPress page and combine the account-focused blocks or shortcodes in the order that suits your customer journey. For example, a compact customer dashboard might contain:
 
 ```text
@@ -106,7 +110,7 @@ Displays the current membership, including its plan, status, and billing cycle.
 
 ### Account Summary — `[wu_account_summary]`
 
-Displays a summary of the customer account, including membership and site information.
+Displays the selected site's plan, storage and trial information. Choose an owned site through My Sites first; the frontend-account fixes add sign-in, site-selection and recovery guidance when no site is selected. This is not a single all-in-one account landing-page shortcode.
 
 | Parameter | Description | Accepted values | Default |
 | --- | --- | --- | --- |
diff --git a/docs/user-guide/payment-gateways/stripe.md b/docs/user-guide/payment-gateways/stripe.md
index e0b18708fa..53f8242a7c 100644
--- a/docs/user-guide/payment-gateways/stripe.md
+++ b/docs/user-guide/payment-gateways/stripe.md
@@ -68,3 +68,17 @@ Next is to select an **Event** *.* Under this option, you just simply need to ch
 ![Selecting all events and adding the Stripe endpoint](/img/config/settings-payment-gateways.png)
 
 That’s it, your Stripe payment integration is complete!
+
+## Let customers update their payment method
+
+Enable **Use Stripe Billing Portal** for the gateway used by the membership.
+The membership must have valid Stripe customer/subscription references, and
+its credentials and test/live mode must match those records. A frontend page
+can expose the native action through `[wu_payment_methods]` or
+`[wu_site_actions]`; unsupported gateways do not show an online card-change link.
+
+See [Build a Frontend Customer Account](../client-management/frontend-account-page.md)
+for the complete page, source code, screenshots and release compatibility note.
+Test the full portal journey in a sandbox: replace the default card, return to
+the account page and verify the effective card shown there. Do not publish
+portal-session URLs or credentials in example content.
diff --git a/sidebars.js b/sidebars.js
index e843edef05..b472f14352 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -114,6 +114,9 @@ const sidebars = {
       label: 'Client Management',
       items: [
         'user-guide/client-management/account-page',
+        'user-guide/client-management/frontend-account-page',
+        'user-guide/client-management/frontend-account-blocks',
+        'user-guide/client-management/frontend-account-example-source',
         'user-guide/client-management/shortcodes',
         'user-guide/client-management/client-websites',
         'user-guide/client-management/upgrading-a-plan',
diff --git a/static/downloads/frontend-account-example.zip b/static/downloads/frontend-account-example.zip
new file mode 100644
index 0000000000..5e69cb8f51
Binary files /dev/null and b/static/downloads/frontend-account-example.zip differ
diff --git a/static/downloads/frontend-account/account-blocks.html b/static/downloads/frontend-account/account-blocks.html
new file mode 100644
index 0000000000..e0338c5f91
--- /dev/null
+++ b/static/downloads/frontend-account/account-blocks.html
@@ -0,0 +1,123 @@
+<!-- wp:group {"className":"ums-workspace"} -->
+<div class="wp-block-group ums-workspace"><!-- wp:group {"className":"ums-sidebar"} -->
+<div class="wp-block-group ums-sidebar"><!-- wp:paragraph {"className":"ums-sidebar-label"} -->
+<p class="ums-sidebar-label">YOUR WORKSPACE</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"className":"ums-nav"} -->
+<div class="wp-block-group ums-nav"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<p style="margin-top:0;margin-bottom:0"><a href="#overview">01 Overview</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<p style="margin-top:0;margin-bottom:0"><a href="#sites">02 My sites</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<p style="margin-top:0;margin-bottom:0"><a href="#billing">03 Billing &amp; invoices</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<p style="margin-top:0;margin-bottom:0"><a href="#settings">04 Account settings</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-content","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<div class="wp-block-group ums-content" style="margin-top:0;margin-bottom:0"><!-- wp:group {"className":"ums-intro","anchor":"overview"} -->
+<div id="overview" class="wp-block-group ums-intro"><!-- wp:paragraph {"className":"ums-eyebrow"} -->
+<p class="ums-eyebrow">MAKE YOURSELF AT HOME</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading">Your next chapter<br>starts here.</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Everything you need to keep your sites moving. Manage your plan, your billing and what comes next.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"section","className":"ums-section","anchor":"membership"} -->
+<section id="membership" class="wp-block-group ums-section"><!-- wp:group {"className":"ums-section-heading"} -->
+<div class="wp-block-group ums-section-heading"><!-- wp:heading -->
+<h2 class="wp-block-heading">Your membership</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/current-membership {"title":"","display_images":false} /--></div>
+<!-- /wp:group --></section>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"section","className":"ums-section","anchor":"sites"} -->
+<section id="sites" class="wp-block-group ums-section"><!-- wp:group {"className":"ums-section-heading"} -->
+<div class="wp-block-group ums-section-heading"><!-- wp:heading -->
+<h2 class="wp-block-heading">Made by you.</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->
+
+<!-- wp:paragraph {"className":"ums-section-copy"} -->
+<p class="ums-section-copy">Choose Manage to see a site’s details, usage and available actions.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/my-sites {"columns":2,"display_images":false} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-site-detail"} -->
+<div class="wp-block-group ums-site-detail"><!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/current-site {"display_image":false} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-detail-grid"} -->
+<div class="wp-block-group ums-detail-grid"><!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/account-summary /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/limits /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></section>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"section","className":"ums-section","anchor":"billing"} -->
+<section id="billing" class="wp-block-group ums-section"><!-- wp:group {"className":"ums-section-heading"} -->
+<div class="wp-block-group ums-section-heading"><!-- wp:heading -->
+<h2 class="wp-block-heading">The practical details.</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-detail-grid"} -->
+<div class="wp-block-group ums-detail-grid"><!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/billing-info /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/payment-methods /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/invoices /--></div>
+<!-- /wp:group --></section>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"section","className":"ums-section","anchor":"settings"} -->
+<section id="settings" class="wp-block-group ums-section"><!-- wp:group {"className":"ums-section-heading"} -->
+<div class="wp-block-group ums-section-heading"><!-- wp:heading -->
+<h2 class="wp-block-heading">You’re in control.</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->
+
+<!-- wp:paragraph {"className":"ums-section-copy"} -->
+<p class="ums-section-copy">Keep your account up to date. Site-specific actions appear after choosing a site.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/site-actions /--></div>
+<!-- /wp:group --></section>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
diff --git a/static/downloads/frontend-account/account-page.html b/static/downloads/frontend-account/account-page.html
new file mode 100644
index 0000000000..eb31e9bab5
--- /dev/null
+++ b/static/downloads/frontend-account/account-page.html
@@ -0,0 +1,103 @@
+<!-- wp:html -->
+<div class="ums-workspace">
+  <aside class="ums-sidebar" aria-label="Account sections">
+    <p class="ums-sidebar-label">YOUR WORKSPACE</p>
+    <nav class="ums-nav" aria-label="On this page">
+      <a href="#overview"><span aria-hidden="true">01</span> Overview</a>
+      <a href="#sites"><span aria-hidden="true">02</span> My sites</a>
+      <a href="#billing"><span aria-hidden="true">03</span> Billing &amp; invoices</a>
+      <a href="#settings"><span aria-hidden="true">04</span> Account settings</a>
+    </nav>
+    <div class="ums-sidebar-note"><span class="ums-note-dot" aria-hidden="true"></span><p>A little less admin.<br>More room to create.</p></div>
+  </aside>
+  <div class="ums-content">
+    <header class="ums-intro" id="overview">
+      <p class="ums-eyebrow">MAKE YOURSELF AT HOME</p>
+      <h1>Your next chapter<br>starts here.</h1>
+      <p>Everything you need to keep your sites moving.<br> Manage your plan, your billing and what comes next.</p>
+      <a class="ums-text-link" href="#sites">Go to your sites <span aria-hidden="true">↗</span></a>
+    </header>
+    <section class="ums-section" aria-labelledby="membership-heading">
+      <div class="ums-section-heading"><h2 id="membership-heading">Your membership</h2><span>THE BIG PICTURE</span></div>
+      <div class="ums-card ums-membership">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_current_membership title="" display_images="0"]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+      </div>
+    </section>
+    <section class="ums-section" id="sites" aria-labelledby="sites-heading">
+      <div class="ums-section-heading"><h2 id="sites-heading">Made by you.</h2><span>YOUR SITES</span></div>
+      <p class="ums-section-copy">Choose Manage to see a site's details, usage and available actions.</p>
+      <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_my_sites display_images="0"]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+      </div>
+      <div class="ums-site-detail">
+        <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_current_site display_image="0"]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+        </div>
+        <div class="ums-detail-grid">
+          <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_account_summary]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+          </div><div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_limits]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="ums-section" id="billing" aria-labelledby="billing-heading">
+      <div class="ums-section-heading"><h2 id="billing-heading">The practical details.</h2><span>BILLING</span></div>
+      <div class="ums-detail-grid">
+        <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_billing_info]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+        </div><div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_payment_methods]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+        </div>
+      </div>
+      <div class="ums-card ums-invoices">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_invoices]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+      </div>
+    </section>
+    <section class="ums-section" id="settings" aria-labelledby="settings-heading">
+      <div class="ums-section-heading"><h2 id="settings-heading">You're in control.</h2><span>SETTINGS</span></div>
+      <p class="ums-section-copy">Keep your account up to date. Site-specific actions appear after choosing a site.</p>
+      <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_site_actions]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+      </div>
+    </section>
+  </div>
+</div>
+<!-- /wp:html -->
diff --git a/static/downloads/frontend-account/canvas.php b/static/downloads/frontend-account/canvas.php
new file mode 100644
index 0000000000..15214858e8
--- /dev/null
+++ b/static/downloads/frontend-account/canvas.php
@@ -0,0 +1,37 @@
+<?php
+/** Optional page canvas; all account data/actions remain native plugin output. */
+defined('ABSPATH') || exit;
+?><!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php echo esc_attr(get_bloginfo('charset')); ?>">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<?php wp_head(); ?>
+</head>
+<body <?php body_class('ums-account-canvas'); ?>>
+<?php wp_body_open(); ?>
+<a class="ums-skip" href="#ums-main"><?php esc_html_e('Skip to account', 'ums-account-example'); ?></a>
+<div class="ums-portal">
+	<header class="ums-topbar">
+		<a class="ums-brand" href="<?php echo esc_url(home_url('/')); ?>"><span class="ums-mark" aria-hidden="true">u</span><span><?php echo esc_html(get_bloginfo('name')); ?></span></a>
+		<span class="ums-topbar-label"><?php esc_html_e('Customer workspace', 'ums-account-example'); ?></span>
+		<?php if (is_user_logged_in()) : ?>
+			<a class="ums-signout" href="<?php echo esc_url(wp_logout_url(get_permalink())); ?>"><?php esc_html_e('Sign out', 'ums-account-example'); ?></a>
+		<?php endif; ?>
+	</header>
+	<?php if (is_user_logged_in()) : ?>
+		<main id="ums-main" tabindex="-1"><?php while (have_posts()) : the_post(); the_content(); endwhile; ?></main>
+	<?php else : ?>
+		<main id="ums-main" class="ums-guest" tabindex="-1">
+			<p class="ums-eyebrow"><?php esc_html_e('Your workspace, in one place', 'ums-account-example'); ?></p>
+			<h1><?php esc_html_e('Welcome back.', 'ums-account-example'); ?></h1>
+			<p><?php esc_html_e('Sign in to manage your sites, membership and billing.', 'ums-account-example'); ?></p>
+			<a class="ums-button" href="<?php echo esc_url(wp_login_url(get_permalink())); ?>"><?php esc_html_e('Sign in to your account', 'ums-account-example'); ?></a>
+			<a class="ums-quiet" href="<?php echo esc_url(wp_lostpassword_url(get_permalink())); ?>"><?php esc_html_e('Forgot your password?', 'ums-account-example'); ?></a>
+		</main>
+	<?php endif; ?>
+	<footer class="ums-footer"><span><?php echo esc_html(get_bloginfo('name')); ?></span><span><?php esc_html_e('Your sites. Your next chapter.', 'ums-account-example'); ?></span></footer>
+</div>
+<?php wp_footer(); ?>
+</body>
+</html>
diff --git a/static/downloads/frontend-account/plans-blocks.html b/static/downloads/frontend-account/plans-blocks.html
new file mode 100644
index 0000000000..7d33c85d6c
--- /dev/null
+++ b/static/downloads/frontend-account/plans-blocks.html
@@ -0,0 +1,21 @@
+<!-- wp:group {"className":"ums-plans"} -->
+<div class="wp-block-group ums-plans"><!-- wp:paragraph -->
+<p><a href="/account-blocks/">← Back to your account</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"className":"ums-eyebrow"} -->
+<p class="ums-eyebrow">ROOM TO GROW</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading">A plan for your<br>next chapter.</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Choose the plan that fits your sites. Review the total before confirming.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group {"className":"ums-card"} -->
+<div class="wp-block-group ums-card"><!-- wp:wp-ultimo/checkout {"slug":"wu-checkout"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
diff --git a/static/downloads/frontend-account/plans-page.html b/static/downloads/frontend-account/plans-page.html
new file mode 100644
index 0000000000..191a7a0563
--- /dev/null
+++ b/static/downloads/frontend-account/plans-page.html
@@ -0,0 +1,15 @@
+<!-- wp:html -->
+<div class="ums-plans">
+  <a class="ums-text-link" href="/account/">← Back to your account</a>
+  <p class="ums-eyebrow">ROOM TO GROW</p>
+  <h1>A plan for your<br>next chapter.</h1>
+  <p>Choose the plan that fits your sites. Review the total before confirming.</p>
+  <div class="ums-card">
+<!-- /wp:html -->
+<!-- wp:shortcode -->
+[wu_checkout slug="wu-checkout"]
+<!-- /wp:shortcode -->
+<!-- wp:html -->
+  </div>
+</div>
+<!-- /wp:html -->
diff --git a/static/downloads/frontend-account/portal.css b/static/downloads/frontend-account/portal.css
new file mode 100644
index 0000000000..93d041f7ff
--- /dev/null
+++ b/static/downloads/frontend-account/portal.css
@@ -0,0 +1,90 @@
+/* Account example only: no plugin or theme files are modified. */
+body.ums-account-canvas { margin: 0; background: #f7f8f5; }
+.ums-portal { --ink: #1e2e26; --muted: #59675d; --line: #dce2d9; --accent: #365c39; --paper: #fff; color: var(--ink); font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+.ums-portal *, .ums-portal *::before, .ums-portal *::after { box-sizing: border-box; }
+.ums-portal a { color: var(--accent); text-underline-offset: .2em; }
+.ums-portal a:focus-visible, .ums-portal button:focus-visible, .ums-portal input:focus-visible { outline: 3px solid #b16823; outline-offset: 4px; }
+.ums-portal ::selection { color: #18291d; background: #dcebb9; }
+.ums-topbar { min-height: 96px; max-width: 1440px; padding: 20px 56px; margin: auto; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
+.ums-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 750; text-decoration: none; letter-spacing: -.04em; }
+.ums-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: var(--accent); font: 700 28px/1 Georgia, serif; }
+.ums-topbar-label { color: var(--muted); padding-left: 28px; border-left: 1px solid var(--line); font-size: 14px; }
+.ums-signout { margin-left: auto; padding: 10px 0 10px 16px; font-size: 14px; }
+.ums-workspace { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 56px; max-width: 1328px; padding: 48px 56px 72px; margin: auto; }
+.ums-sidebar { align-self: start; position: sticky; top: 32px; padding-top: 16px; }
+.ums-sidebar-label, .ums-eyebrow { font-size: 11px; letter-spacing: .16em; font-weight: 750; margin: 0 0 22px; }
+.ums-sidebar-label { color: var(--muted); }
+.ums-nav { display: grid; gap: 6px; }
+.ums-nav a { display: flex; gap: 15px; align-items: center; min-height: 48px; border-radius: 8px; padding: 10px 12px; margin-left: -12px; text-decoration: none; font-size: 14px; font-weight: 600; }
+.ums-nav a:hover { background: #e7ecdf; }
+.ums-workspace:not(:has(:target)) .ums-nav a[href="#overview"], .ums-workspace:has(#overview:target) .ums-nav a[href="#overview"], .ums-workspace:has(#sites:target) .ums-nav a[href="#sites"], .ums-workspace:has(#billing:target) .ums-nav a[href="#billing"], .ums-workspace:has(#settings:target) .ums-nav a[href="#settings"] { background: #e3ead8; color: #25452b; }
+.ums-nav span { color: #697960; font-size: 11px; font-variant-numeric: tabular-nums; }
+.ums-sidebar-note { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
+.ums-note-dot { display: block; width: 8px; height: 8px; background: #7c994a; border-radius: 50%; }
+.ums-content { min-width: 0; }
+.ums-intro { position: relative; padding: 28px 36px; margin-bottom: 30px; background: #e9eedf; border: 1px solid #dce4cc; border-radius: 16px; }
+.ums-portal h1 { font: 500 clamp(40px, 4vw, 54px)/1.04 Georgia, "Times New Roman", serif; letter-spacing: -.045em; margin: 0 0 16px; color: var(--ink); }
+.ums-intro > p:not(.ums-eyebrow) { max-width: 520px; margin-bottom: 12px; color: #465640; font-size: 16px; }
+.ums-text-link { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; font-weight: 650; font-size: 14px; text-decoration: none; border-bottom: 1px solid currentColor; }
+.ums-text-link:hover { color: #162f1a; }
+.ums-section { margin-top: 38px; scroll-margin-top: 28px; }
+.ums-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
+.ums-section-heading h2 { font-size: 24px; font-weight: 650; letter-spacing: -.045em; margin: 0; }
+.ums-section-heading > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
+.ums-section-copy { color: var(--muted); margin: -4px 0 20px; font-size: 14px; max-width: 640px; }
+.ums-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; min-width: 0; }
+.ums-card:empty { display: none; }
+.ums-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+.ums-site-detail { display: grid; gap: 20px; margin-top: 20px; }
+.ums-site-detail > .ums-card:not(:has(.wu-current-site)), .ums-detail-grid > .ums-card:not(:has(.wu-styling)), .ums-invoices:not(:has(.wu-invoices)) { display: none; }
+.ums-invoices { margin-top: 20px; }
+.ums-portal .wu-styling { font-family: inherit; font-size: 14px; line-height: 1.6; }
+.ums-portal .wu-styling h3 { font-size: 16px; color: var(--ink); }
+.ums-portal .wu-styling > div { margin-top: 0; }
+.ums-portal .wu-styling .wu-rounded, .ums-portal .wu-styling .wu-rounded-lg { border-radius: 8px; }
+.ums-portal .wu-styling .wu-bg-gray-100, .ums-portal .wu-styling .wu-bg-gray-200 { background: #f8faf5; }
+.ums-portal .wu-styling .button-primary { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 7px; padding: 8px 14px; min-height: 40px; box-shadow: none; }
+.ums-portal .wu-styling .button-primary:hover { background: #244629; border-color: #244629; }
+.ums-portal .wu-styling .button { text-decoration: none; }
+.ums-portal .wu-styling a:not(.button):hover { text-decoration: underline; }
+.ums-portal .wu-styling .wu-my-4, .ums-portal .wu-styling .wu-my-6 { margin-top: 0; margin-bottom: 0; }
+.ums-portal .wu-styling .wu-font-bold, .ums-portal .wu-styling .wu-font-semibold { font-weight: 650; }
+.ums-portal .wu-styling .wu-text-xs { font-size: 12px; }
+.ums-portal .wu-styling .wu-text-sm { font-size: 14px; }
+.ums-portal .wu-styling .wu-text-gray-600, .ums-portal .wu-styling .wu-text-gray-500 { color: #59675d; }
+.ums-portal .wu-styling table { font-variant-numeric: tabular-nums; }
+.ums-footer { border-top: 1px solid var(--line); max-width: 1216px; margin: auto; padding: 24px 0 36px; display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 12px; }
+.ums-guest, .ums-plans { max-width: 940px; margin: 64px auto 96px; padding: 0 32px; }
+.ums-guest { min-height: 48vh; }
+.ums-guest > p { max-width: 520px; }
+.ums-button { display: inline-flex; padding: 12px 22px; border-radius: 8px; background: var(--accent); color: #fff !important; font-weight: 650; text-decoration: none; }
+.ums-button:hover { background: #244629; }
+.ums-quiet { display: block; width: fit-content; margin-top: 20px; font-size: 14px; }
+.ums-plans > .ums-eyebrow { margin-top: 40px; }
+.ums-plans > .ums-card { padding: 24px; margin-top: 32px; }
+.ums-skip { position: absolute; left: -10000px; }
+.ums-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100000; background: #fff; color: #1e2e26; padding: 12px; }
+@media (max-width: 1000px) {
+  .ums-topbar { padding: 20px 32px; }
+  .ums-workspace { grid-template-columns: 170px minmax(0, 1fr); gap: 32px; padding: 32px; }
+  .ums-intro { padding: 30px; }
+  .ums-detail-grid { grid-template-columns: minmax(0, 1fr); }
+  .ums-footer { margin: 0 32px; }
+}
+@media (max-width: 700px) {
+  .ums-topbar { min-height: 76px; padding: 16px 22px; gap: 12px; }
+  .ums-topbar-label { display: none; }
+  .ums-workspace { display: block; padding: 20px 20px 48px; }
+  .ums-sidebar { position: static; padding: 0; margin-bottom: 24px; }
+  .ums-sidebar-label, .ums-sidebar-note { display: none; }
+  .ums-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
+  .ums-nav a { padding: 8px 10px; margin: 0; background: #edf0e7; font-size: 12px; gap: 8px; }
+  .ums-intro { border-radius: 12px; padding: 28px 24px; margin-bottom: 30px; }
+  .ums-portal h1 { font-size: 43px; }
+  .ums-intro br:not(h1 br) { display: none; }
+  .ums-section-heading h2 { font-size: 21px; }
+  .ums-section-heading > span { font-size: 9px; }
+  .ums-footer { margin: 0 20px; flex-direction: column; gap: 4px; }
+  .ums-plans, .ums-guest { padding: 0 22px; margin-top: 40px; }
+  .ums-plans > .ums-card { padding: 12px; }
+}
diff --git a/static/downloads/frontend-account/ums-account-example.php b/static/downloads/frontend-account/ums-account-example.php
new file mode 100644
index 0000000000..17e51de140
--- /dev/null
+++ b/static/downloads/frontend-account/ums-account-example.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * Plugin Name: Ultimate Multisite Account Page Example
+ * Description: An optional presentation layer for native Ultimate Multisite shortcodes.
+ * Version: 1.0.0
+ * License: GPL-2.0-or-later
+ * Text Domain: ums-account-example
+ */
+defined('ABSPATH') || exit;
+
+add_filter('theme_page_templates', function ($templates) {
+	$templates['ums-account-canvas.php'] = __('Account workspace (example)', 'ums-account-example');
+	return $templates;
+});
+
+function ums_account_example_is_page() {
+	return is_page() && 'ums-account-canvas.php' === get_page_template_slug(get_queried_object_id());
+}
+
+add_filter('template_include', function ($template) {
+	return ums_account_example_is_page() ? __DIR__ . '/canvas.php' : $template;
+}, 99);
+
+add_action('template_redirect', function () {
+	if (ums_account_example_is_page()) {
+		nocache_headers();
+	}
+});
+
+add_action('wp_enqueue_scripts', function () {
+	if (ums_account_example_is_page()) {
+		wp_enqueue_style('ums-account-example', plugins_url('portal.css', __FILE__), [], '1.0.0');
+	}
+});
diff --git a/static/img/frontend-account/01-overview.png b/static/img/frontend-account/01-overview.png
new file mode 100644
index 0000000000..a2e894b961
Binary files /dev/null and b/static/img/frontend-account/01-overview.png differ
diff --git a/static/img/frontend-account/02-sites.png b/static/img/frontend-account/02-sites.png
new file mode 100644
index 0000000000..0d8df7c301
Binary files /dev/null and b/static/img/frontend-account/02-sites.png differ
diff --git a/static/img/frontend-account/03-selected-site.png b/static/img/frontend-account/03-selected-site.png
new file mode 100644
index 0000000000..77764d65e2
Binary files /dev/null and b/static/img/frontend-account/03-selected-site.png differ
diff --git a/static/img/frontend-account/04-billing.png b/static/img/frontend-account/04-billing.png
new file mode 100644
index 0000000000..8d5570940e
Binary files /dev/null and b/static/img/frontend-account/04-billing.png differ
diff --git a/static/img/frontend-account/05-billing-form.png b/static/img/frontend-account/05-billing-form.png
new file mode 100644
index 0000000000..f9f238ee0f
Binary files /dev/null and b/static/img/frontend-account/05-billing-form.png differ
diff --git a/static/img/frontend-account/06-plans.png b/static/img/frontend-account/06-plans.png
new file mode 100644
index 0000000000..44051d36a0
Binary files /dev/null and b/static/img/frontend-account/06-plans.png differ
diff --git a/static/img/frontend-account/07-plan-review.png b/static/img/frontend-account/07-plan-review.png
new file mode 100644
index 0000000000..1e3272c3fa
Binary files /dev/null and b/static/img/frontend-account/07-plan-review.png differ
diff --git a/static/img/frontend-account/08-settings.png b/static/img/frontend-account/08-settings.png
new file mode 100644
index 0000000000..1bfab212e2
Binary files /dev/null and b/static/img/frontend-account/08-settings.png differ
diff --git a/static/img/frontend-account/09-password.png b/static/img/frontend-account/09-password.png
new file mode 100644
index 0000000000..95fff7a2f9
Binary files /dev/null and b/static/img/frontend-account/09-password.png differ
diff --git a/static/img/frontend-account/10-cancellation.png b/static/img/frontend-account/10-cancellation.png
new file mode 100644
index 0000000000..4dc58604a3
Binary files /dev/null and b/static/img/frontend-account/10-cancellation.png differ
diff --git a/static/img/frontend-account/11-mobile-overview.png b/static/img/frontend-account/11-mobile-overview.png
new file mode 100644
index 0000000000..f54445db41
Binary files /dev/null and b/static/img/frontend-account/11-mobile-overview.png differ
diff --git a/static/img/frontend-account/12-mobile-site.png b/static/img/frontend-account/12-mobile-site.png
new file mode 100644
index 0000000000..0669cf54c2
Binary files /dev/null and b/static/img/frontend-account/12-mobile-site.png differ
diff --git a/static/img/frontend-account/13-sign-in.png b/static/img/frontend-account/13-sign-in.png
new file mode 100644
index 0000000000..234a5068cf
Binary files /dev/null and b/static/img/frontend-account/13-sign-in.png differ
diff --git a/static/img/frontend-account/14-mobile-limits.png b/static/img/frontend-account/14-mobile-limits.png
new file mode 100644
index 0000000000..06c06c544b
Binary files /dev/null and b/static/img/frontend-account/14-mobile-limits.png differ
diff --git a/static/img/frontend-account/15-native-block-inserter.png b/static/img/frontend-account/15-native-block-inserter.png
new file mode 100644
index 0000000000..5bdbaed07d
Binary files /dev/null and b/static/img/frontend-account/15-native-block-inserter.png differ
diff --git a/static/img/frontend-account/16-block-layout-list-view.png b/static/img/frontend-account/16-block-layout-list-view.png
new file mode 100644
index 0000000000..07e1ad9f90
Binary files /dev/null and b/static/img/frontend-account/16-block-layout-list-view.png differ
diff --git a/static/img/frontend-account/17-membership-block-settings.png b/static/img/frontend-account/17-membership-block-settings.png
new file mode 100644
index 0000000000..e6f859418b
Binary files /dev/null and b/static/img/frontend-account/17-membership-block-settings.png differ
diff --git a/static/img/frontend-account/18-shortcode-editor-settings.png b/static/img/frontend-account/18-shortcode-editor-settings.png
new file mode 100644
index 0000000000..c5d0579743
Binary files /dev/null and b/static/img/frontend-account/18-shortcode-editor-settings.png differ
diff --git a/static/img/frontend-account/19-shortcode-inserter.png b/static/img/frontend-account/19-shortcode-inserter.png
new file mode 100644
index 0000000000..81e46027cf
Binary files /dev/null and b/static/img/frontend-account/19-shortcode-inserter.png differ
diff --git a/static/img/frontend-account/20-block-account-desktop.png b/static/img/frontend-account/20-block-account-desktop.png
new file mode 100644
index 0000000000..275558806d
Binary files /dev/null and b/static/img/frontend-account/20-block-account-desktop.png differ
diff --git a/static/img/frontend-account/21-checkout-block-settings.png b/static/img/frontend-account/21-checkout-block-settings.png
new file mode 100644
index 0000000000..532c4b33b4
Binary files /dev/null and b/static/img/frontend-account/21-checkout-block-settings.png differ
diff --git a/static/img/frontend-account/22-block-selected-site.png b/static/img/frontend-account/22-block-selected-site.png
new file mode 100644
index 0000000000..c01911396b
Binary files /dev/null and b/static/img/frontend-account/22-block-selected-site.png differ
diff --git a/static/img/frontend-account/23-block-account-mobile.png b/static/img/frontend-account/23-block-account-mobile.png
new file mode 100644
index 0000000000..39b2445226
Binary files /dev/null and b/static/img/frontend-account/23-block-account-mobile.png differ
diff --git a/static/img/frontend-account/24-add-shortcode-text.png b/static/img/frontend-account/24-add-shortcode-text.png
new file mode 100644
index 0000000000..ded4619647
Binary files /dev/null and b/static/img/frontend-account/24-add-shortcode-text.png differ
diff --git a/static/img/frontend-account/25-block-mobile-overview.png b/static/img/frontend-account/25-block-mobile-overview.png
new file mode 100644
index 0000000000..a5f768b8a1
Binary files /dev/null and b/static/img/frontend-account/25-block-mobile-overview.png differ