diff --git a/.nvmrc b/.nvmrc
index 25bf17fc5..2edeafb09 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18
\ No newline at end of file
+20
\ No newline at end of file
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 5bfc8a115..8a9c78316 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -1,65 +1,4 @@
 <style>
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --lumo-contrast-90pct: hsla(290deg, 52%, 100%, 0.9);
-      --lumo-contrast-80pct: hsla(290deg, 52%, 100%, 0.8);
-      --lumo-contrast-70pct: hsla(290deg, 52%, 100%, 0.7);
-      --lumo-contrast-60pct: hsla(290deg, 52%, 100%, 0.6);
-      --lumo-contrast-50pct: hsla(290deg, 52%, 100%, 0.5);
-      --lumo-contrast-40pct: hsla(290deg, 52%, 100%, 0.4);
-      --lumo-contrast-30pct: hsla(290deg, 52%, 100%, 0.3);
-      --lumo-contrast-20pct: hsla(290deg, 52%, 100%, 0.2);
-      --lumo-contrast-10pct: hsla(290deg, 52%, 100%, 0.1);
-      --lumo-contrast-5pct: hsla(290deg, 52%, 100%, 0.05);
-      --lumo-contrast: hsla(290deg, 52%, 100%, 1);
-
-      --lumo-shade-90pct: hsla(290deg, 0%, 0%, 0.9);
-      --lumo-shade-80pct: hsla(290deg, 0%, 0%, 0.8);
-      --lumo-shade-70pct: hsla(290deg, 0%, 0%, 0.7);
-      --lumo-shade-60pct: hsla(290deg, 0%, 0%, 0.6);
-      --lumo-shade-50pct: hsla(290deg, 0%, 0%, 0.5);
-      --lumo-shade-40pct: hsla(290deg, 0%, 0%, 0.4);
-      --lumo-shade-30pct: hsla(290deg, 0%, 0%, 0.3);
-      --lumo-shade-20pct: hsla(290deg, 0%, 0%, 0.2);
-      --lumo-shade-10pct: hsla(290deg, 0%, 0%, 0.1);
-      --lumo-shade-5pct: hsla(290deg, 0%, 0%, 0.05);
-      --lumo-shade: hsla(290deg, 0%, 0%, 1);
-
-      --lumo-tint-90pct: hsla(290deg, 10%, 10%, 0.9);
-      --lumo-tint-80pct: hsla(290deg, 10%, 10%, 0.8);
-      --lumo-tint-70pct: hsla(290deg, 10%, 10%, 0.7);
-      --lumo-tint-60pct: hsla(290deg, 10%, 10%, 0.6);
-      --lumo-tint-50pct: hsla(290deg, 10%, 10%, 0.5);
-      --lumo-tint-40pct: hsla(290deg, 10%, 10%, 0.4);
-      --lumo-tint-30pct: hsla(290deg, 10%, 10%, 0.3);
-      --lumo-tint-20pct: hsla(290deg, 10%, 10%, 0.2);
-      --lumo-tint-10pct: hsla(290deg, 10%, 10%, 0.1);
-      --lumo-tint-5pct: hsla(290deg, 10%, 10%, 0.05);
-      --lumo-tint: hsla(290deg, 10%, 10%, 1);
-
-      --lumo-primary-color-50pct: hsla(290deg, 52%, 58%, 0.5);
-      --lumo-primary-color-10pct: hsla(290deg, 52%, 58%, 0.1);
-      --lumo-primary-color: hsla(290deg, 52%, 58%, 1);
-      --lumo-primary-contrast-color: hsla(290deg, 52%, 10%, 1);
-
-      --lumo-success-color-50pct: hsla(100deg, 50%, 30%, 0.5);
-      --lumo-success-color-10pct: hsla(100deg, 50%, 30%, 0.1);
-      --lumo-success-color: hsla(100deg, 50%, 30%, 1);
-      --lumo-success-contrast-color: hsla(100deg, 50%, 10%, 1);
-
-      --lumo-error-color-50pct: hsla(0deg, 50%, 50%, 0.5);
-      --lumo-error-color-10pct: hsla(0deg, 50%, 50%, 0.1);
-      --lumo-error-color: hsla(0deg, 50%, 50%, 1);
-      --lumo-error-contrast-color: hsla(0deg, 50%, 10%, 1);
-    }
-  }
-
-  @media (pointer: fine) {
-    :root {
-      font-size: 14px;
-    }
-  }
-
   :root,
   .docs-story {
     --lumo-contrast-90pct: hsla(290deg, 52%, 3%, 0.9);
@@ -128,6 +67,71 @@
     --lumo-border-radius: 0.4em;
     --lumo-font-family: 'Albert Sans', sans-serif;
 
+    --lumo-color-scheme: light;
+
     background: var(--lumo-base-color);
   }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --lumo-contrast-90pct: hsla(290deg, 52%, 100%, 0.9);
+      --lumo-contrast-80pct: hsla(290deg, 52%, 100%, 0.8);
+      --lumo-contrast-70pct: hsla(290deg, 52%, 100%, 0.7);
+      --lumo-contrast-60pct: hsla(290deg, 52%, 100%, 0.6);
+      --lumo-contrast-50pct: hsla(290deg, 52%, 100%, 0.5);
+      --lumo-contrast-40pct: hsla(290deg, 52%, 100%, 0.4);
+      --lumo-contrast-30pct: hsla(290deg, 52%, 100%, 0.3);
+      --lumo-contrast-20pct: hsla(290deg, 52%, 100%, 0.2);
+      --lumo-contrast-10pct: hsla(290deg, 52%, 100%, 0.1);
+      --lumo-contrast-5pct: hsla(290deg, 52%, 100%, 0.05);
+      --lumo-contrast: hsla(290deg, 52%, 100%, 1);
+
+      --lumo-shade-90pct: hsla(290deg, 0%, 0%, 0.9);
+      --lumo-shade-80pct: hsla(290deg, 0%, 0%, 0.8);
+      --lumo-shade-70pct: hsla(290deg, 0%, 0%, 0.7);
+      --lumo-shade-60pct: hsla(290deg, 0%, 0%, 0.6);
+      --lumo-shade-50pct: hsla(290deg, 0%, 0%, 0.5);
+      --lumo-shade-40pct: hsla(290deg, 0%, 0%, 0.4);
+      --lumo-shade-30pct: hsla(290deg, 0%, 0%, 0.3);
+      --lumo-shade-20pct: hsla(290deg, 0%, 0%, 0.2);
+      --lumo-shade-10pct: hsla(290deg, 0%, 0%, 0.1);
+      --lumo-shade-5pct: hsla(290deg, 0%, 0%, 0.05);
+      --lumo-shade: hsla(290deg, 0%, 0%, 1);
+
+      --lumo-tint-90pct: hsla(290deg, 10%, 10%, 0.9);
+      --lumo-tint-80pct: hsla(290deg, 10%, 10%, 0.8);
+      --lumo-tint-70pct: hsla(290deg, 10%, 10%, 0.7);
+      --lumo-tint-60pct: hsla(290deg, 10%, 10%, 0.6);
+      --lumo-tint-50pct: hsla(290deg, 10%, 10%, 0.5);
+      --lumo-tint-40pct: hsla(290deg, 10%, 10%, 0.4);
+      --lumo-tint-30pct: hsla(290deg, 10%, 10%, 0.3);
+      --lumo-tint-20pct: hsla(290deg, 10%, 10%, 0.2);
+      --lumo-tint-10pct: hsla(290deg, 10%, 10%, 0.1);
+      --lumo-tint-5pct: hsla(290deg, 10%, 10%, 0.05);
+      --lumo-tint: hsla(290deg, 10%, 10%, 1);
+
+      --lumo-primary-color-50pct: hsla(290deg, 52%, 58%, 0.5);
+      --lumo-primary-color-10pct: hsla(290deg, 52%, 58%, 0.1);
+      --lumo-primary-color: hsla(290deg, 52%, 58%, 1);
+      --lumo-primary-contrast-color: hsla(290deg, 52%, 10%, 1);
+
+      --lumo-success-color-50pct: hsla(100deg, 50%, 30%, 0.5);
+      --lumo-success-color-10pct: hsla(100deg, 50%, 30%, 0.1);
+      --lumo-success-color: hsla(100deg, 50%, 30%, 1);
+      --lumo-success-contrast-color: hsla(100deg, 50%, 10%, 1);
+
+      --lumo-error-color-50pct: hsla(0deg, 50%, 50%, 0.5);
+      --lumo-error-color-10pct: hsla(0deg, 50%, 50%, 0.1);
+      --lumo-error-color: hsla(0deg, 50%, 50%, 1);
+      --lumo-error-contrast-color: hsla(0deg, 50%, 10%, 1);
+
+      --lumo-color-scheme: dark;
+    }
+  }
+
+  @media (pointer: fine) {
+    :root {
+      font-size: 14px;
+    }
+  }
 </style>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 23e0b4c36..8c7180b3a 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -59,7 +59,7 @@
   }
 
   .foxy-story--narrow > .foxy-story__preview {
-    max-width: 30rem;
+    max-width: 50rem;
     border: 1px solid var(--lumo-contrast-10pct);
     margin: var(--lumo-space-xl) auto;
   }
diff --git a/custom-elements.json b/custom-elements.json
index 97265c13e..7b6a7ac17 100644
--- a/custom-elements.json
+++ b/custom-elements.json
@@ -1072,6 +1072,301 @@
         }
       ]
     },
+    {
+      "name": "foxy-admin-subscription-form",
+      "path": "./src/elements/public/AdminSubscriptionForm/index.ts",
+      "attributes": [
+        {
+          "name": "simplify-ns-loading",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "ns",
+          "type": "string",
+          "default": "\"defaultNS\""
+        },
+        {
+          "name": "status",
+          "description": "Status message to render at the top of the form. If `null`, the message is hidden.",
+          "type": "object"
+        },
+        {
+          "name": "mode",
+          "type": "string",
+          "default": "\"production\""
+        },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "readonlycontrols",
+          "default": "\"False\""
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabledcontrols",
+          "default": "\"False\""
+        },
+        {
+          "name": "hidden",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hiddencontrols",
+          "default": "\"False\""
+        },
+        {
+          "name": "lang",
+          "description": "Optional ISO 639-1 code describing the language element content is written in.\nChanging the `lang` attribute will update the value of this property.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "parent",
+          "description": "Optional URL of the collection this element's resource belongs to.\nChanging the `parent` attribute will update the value of this property.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "related",
+          "description": "Optional URI list of the related resources. If Rumour encounters a related\nresource on creation or deletion, it will be reloaded from source.",
+          "type": "array",
+          "default": "[]"
+        },
+        {
+          "name": "virtual-host",
+          "description": "Unique identifier for the virtual host used by the element to serve internal requests.\n\nCurrently only one endpoint is supported: `foxy://<virtualHost>/form/<path>`.\nThis endpoint supports POST, GET, PATCH and DELETE methods and functions like a hAPI server.\n\nFor example, `GET foxy://nucleon-123/form/subscriptions/allowNextDateModification/0` on a NucleonElement\nwith `fx:customer_portal_settings` will return the first item of the `subscriptions.allowNextDateModification` array.",
+          "default": "\"uniqueId('nucleon-')\""
+        },
+        {
+          "name": "group",
+          "description": "Rumour group. Elements in different groups will not share updates. Empty by default.",
+          "type": "string"
+        },
+        {
+          "name": "href",
+          "description": "Optional URL of the resource to load. Switches element to `idle.template` state if empty (default).",
+          "type": "string"
+        },
+        {
+          "name": "infer",
+          "description": "Set a name for this element here to enable property inference. Set to `null` to disable.",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "simplifyNsLoading",
+          "attribute": "simplify-ns-loading",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "ns",
+          "attribute": "ns",
+          "type": "string",
+          "default": "\"defaultNS\""
+        },
+        {
+          "name": "t",
+          "type": "Translator",
+          "default": "\"(key, options) => {\\n      const I18nElement = customElements.get('foxy-i18n') as typeof I18n | undefined;\\n\\n      if (!I18nElement) return key;\\n\\n      let keys: string[];\\n\\n      if (this.simplifyNsLoading) {\\n        const namespaces = this.ns.split(' ').filter(v => v.length > 0);\\n        const path = [...namespaces.slice(1), key].join('.');\\n        keys = namespaces[0] ? [`${namespaces[0]}:${path}`] : [path];\\n      } else {\\n        keys = this.ns\\n          .split(' ')\\n          .reverse()\\n          .map(v => v.trim())\\n          .filter(v => v.length > 0)\\n          .reverse()\\n          .map((v, i, a) => `${v}:${[...a.slice(i + 1), key].join('.')}`);\\n      }\\n\\n      keys.push(key);\\n\\n      return I18nElement.i18next.t(keys, { lng: this.lang, ...options }).toString();\\n    }\""
+        },
+        {
+          "name": "generalErrorPrefix",
+          "description": "Validation errors with this prefix will show up at the top of the form.",
+          "type": "string",
+          "default": "\"error:\""
+        },
+        {
+          "name": "status",
+          "attribute": "status",
+          "description": "Status message to render at the top of the form. If `null`, the message is hidden.",
+          "type": "object"
+        },
+        {
+          "name": "headerTitleKey",
+          "description": "Getter that returns a i18n key for the optional form header title.",
+          "type": "string"
+        },
+        {
+          "name": "headerTitleOptions",
+          "description": "I18next options to pass to the header title translation function.",
+          "type": "Record<string, unknown>"
+        },
+        {
+          "name": "headerSubtitleKey",
+          "description": "Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable.",
+          "type": "string"
+        },
+        {
+          "name": "headerSubtitleOptions",
+          "description": "I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable.",
+          "type": "Record<string, unknown>"
+        },
+        {
+          "name": "headerCopyIdValue",
+          "description": "ID that will be written to clipboard when Copy ID button in header is clicked.",
+          "type": "string | number"
+        },
+        {
+          "name": "templates",
+          "default": "{}"
+        },
+        {
+          "name": "mode",
+          "attribute": "mode",
+          "type": "string",
+          "default": "\"production\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "readonlyControls",
+          "attribute": "readonlycontrols",
+          "default": "\"False\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabledControls",
+          "attribute": "disabledcontrols",
+          "default": "\"False\""
+        },
+        {
+          "name": "hidden",
+          "attribute": "hidden",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hiddenControls",
+          "attribute": "hiddencontrols",
+          "default": "\"False\""
+        },
+        {
+          "name": "readonlySelector",
+          "type": "BooleanSelector"
+        },
+        {
+          "name": "disabledSelector",
+          "type": "BooleanSelector"
+        },
+        {
+          "name": "hiddenSelector",
+          "type": "BooleanSelector"
+        },
+        {
+          "name": "UpdateEvent",
+          "description": "Instances of this event are dispatched on an element whenever it changes its\nstate (e.g. when going from `busy` to `idle` or on `form` data change).\nThis event isn't cancelable, and it does not bubble.",
+          "type": "typeof UpdateEvent",
+          "default": "\"UpdateEvent\""
+        },
+        {
+          "name": "Rumour",
+          "description": "Creates a tagged [Rumour](https://sdk.foxy.dev/classes/_core_index_.rumour.html)\ninstance if it doesn't exist or returns cached one otherwise. NucleonElements\nuse empty Rumour group by default.",
+          "type": "((group: string) => Rumour) & MemoizedFunction",
+          "default": "\"memoize<(group: string) => Rumour>(() => new Rumour())\""
+        },
+        {
+          "name": "API",
+          "description": "Universal [API](https://sdk.foxy.dev/classes/_core_index_.api.html) client\nthat dispatches cancellable `FetchEvent` on an element before each request.",
+          "type": "typeof API",
+          "default": "\"API\""
+        },
+        {
+          "name": "lang",
+          "attribute": "lang",
+          "description": "Optional ISO 639-1 code describing the language element content is written in.\nChanging the `lang` attribute will update the value of this property.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "parent",
+          "attribute": "parent",
+          "description": "Optional URL of the collection this element's resource belongs to.\nChanging the `parent` attribute will update the value of this property.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "related",
+          "attribute": "related",
+          "description": "Optional URI list of the related resources. If Rumour encounters a related\nresource on creation or deletion, it will be reloaded from source.",
+          "type": "array",
+          "default": "[]"
+        },
+        {
+          "name": "virtualHost",
+          "attribute": "virtual-host",
+          "description": "Unique identifier for the virtual host used by the element to serve internal requests.\n\nCurrently only one endpoint is supported: `foxy://<virtualHost>/form/<path>`.\nThis endpoint supports POST, GET, PATCH and DELETE methods and functions like a hAPI server.\n\nFor example, `GET foxy://nucleon-123/form/subscriptions/allowNextDateModification/0` on a NucleonElement\nwith `fx:customer_portal_settings` will return the first item of the `subscriptions.allowNextDateModification` array.",
+          "default": "\"uniqueId('nucleon-')\""
+        },
+        {
+          "name": "failure",
+          "description": "If network request returns non-2XX code, the entire error response\nwill be available via this getter.\n\nThis property is readonly. Changing failure records via this property is\nnot guaranteed to work. NucleonElement does not provide a way to override error status.",
+          "type": "Response | null"
+        },
+        {
+          "name": "errors",
+          "description": "Array of validation errors returned from `NucleonElement.v8n` checks.\n\nThis property is readonly. Adding or removing error codes via this property is\nnot guaranteed to work. NucleonElement does not provide a way to override validity status.",
+          "type": "string[]"
+        },
+        {
+          "name": "form",
+          "description": "Resource snapshot with edits applied. Empty object if unavailable.\n\nThis property and its value are readonly. Assignments like `element.data.foo = 'bar'`\nare not guaranteed to work. Please use `element.edit({ foo: 'bar' })` instead.\nIf you need to replace the entire data object, consider using `element.data`.",
+          "type": "Partial<TData>"
+        },
+        {
+          "name": "data",
+          "description": "Resource snapshot as-is, no edits applied. Null if unavailable.\n\nReturned value is not reactive. Assignments like `element.data.foo = 'bar'`\nare not guaranteed to work. Please set the property instead: `element.data = { ...element.data, foo: 'bar' }`.\nIf you're processing user input, consider using `element.form` and `element.edit()` instead.",
+          "type": "TData | null"
+        },
+        {
+          "name": "group",
+          "attribute": "group",
+          "description": "Rumour group. Elements in different groups will not share updates. Empty by default.",
+          "type": "string"
+        },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "Optional URL of the resource to load. Switches element to `idle.template` state if empty (default).",
+          "type": "string"
+        },
+        {
+          "name": "infer",
+          "attribute": "infer",
+          "description": "Set a name for this element here to enable property inference. Set to `null` to disable.",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "update",
+          "description": "Instance of `NucleonElement.UpdateEvent`. Dispatched on an element whenever it changes its state."
+        },
+        {
+          "name": "fetch",
+          "description": "Instance of `NucleonElement.API.FetchEvent`. Emitted before each API request."
+        }
+      ]
+    },
     {
       "name": "foxy-api-browser",
       "path": "./src/elements/public/ApiBrowser/index.ts",
@@ -3399,6 +3694,10 @@
       "path": "./src/elements/public/CartForm/index.ts",
       "description": "Form element for creating or editing carts (`fx:cart`).",
       "attributes": [
+        {
+          "name": "payment-card-embed-url",
+          "description": "Payment Card Embed configuration URL. The form will append template set parameter on its own."
+        },
         {
           "name": "item-categories",
           "description": "URL of the `fx:item_categories` collection for the store."
@@ -3411,6 +3710,10 @@
           "name": "locale-codes",
           "description": "URL of the `fx:locale_codes` property helper."
         },
+        {
+          "name": "languages",
+          "description": "URL of the `fx:languages` property helper."
+        },
         {
           "name": "customers",
           "description": "URL of the `fx:customers` collection for the store."
@@ -3514,6 +3817,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "paymentCardEmbedUrl",
+          "attribute": "payment-card-embed-url",
+          "description": "Payment Card Embed configuration URL. The form will append template set parameter on its own."
+        },
         {
           "name": "itemCategories",
           "attribute": "item-categories",
@@ -3529,6 +3837,11 @@
           "attribute": "locale-codes",
           "description": "URL of the `fx:locale_codes` property helper."
         },
+        {
+          "name": "languages",
+          "attribute": "languages",
+          "description": "URL of the `fx:languages` property helper."
+        },
         {
           "name": "customers",
           "attribute": "customers",
diff --git a/rollup.config.js b/rollup.config.js
index 55213a466..6d7ea989d 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -54,6 +54,7 @@ export default {
               'lit-element': ['html', { name: 'css', encapsulation: 'style' }],
             },
             strictCSS: true,
+            failOnError: false,
             htmlMinifier: {
               collapseWhitespace: true,
               conservativeCollapse: true,
diff --git a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
index 7ff16135c..3f7a60e6b 100644
--- a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
+++ b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
@@ -29,6 +29,12 @@ import { createRouter } from '../../../server/hapi';
 import { Type } from '../../public/QueryBuilder/types';
 
 describe('InternalAsyncListControl', () => {
+  const OriginalResizeObserver = window.ResizeObserver;
+
+  // @ts-expect-error disabling ResizeObserver because it errors in test env
+  before(() => (window.ResizeObserver = undefined));
+  after(() => (window.ResizeObserver = OriginalResizeObserver));
+
   it('imports and defines vaadin-button', () => {
     const element = customElements.get('vaadin-button');
     expect(element).to.exist;
diff --git a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControlFilterOverlay.test.ts b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControlFilterOverlay.test.ts
index c7a74f3c0..d7db73d76 100644
--- a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControlFilterOverlay.test.ts
+++ b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControlFilterOverlay.test.ts
@@ -10,6 +10,12 @@ import { Type } from '../../public/QueryBuilder/types';
 
 describe('InternalAsyncListControl', () => {
   describe('InternalAsyncListControlFilterOverlay', () => {
+    const OriginalResizeObserver = window.ResizeObserver;
+
+    // @ts-expect-error disabling ResizeObserver because it errors in test env
+    before(() => (window.ResizeObserver = undefined));
+    after(() => (window.ResizeObserver = OriginalResizeObserver));
+
     it('extends OverlayElement', () => {
       expect(new Overlay()).to.be.instanceOf(OverlayElement);
     });
diff --git a/src/elements/internal/InternalCalendar/InternalCalendar.ts b/src/elements/internal/InternalCalendar/InternalCalendar.ts
index c7d6869a4..36bcb2d8d 100644
--- a/src/elements/internal/InternalCalendar/InternalCalendar.ts
+++ b/src/elements/internal/InternalCalendar/InternalCalendar.ts
@@ -150,7 +150,8 @@ export class InternalCalendar extends ThemeableMixin(LitElement) {
     return html`
       <label
         class=${classMap({
-          'font-tnum select-none relative flex h-m items-center justify-center rounded': true,
+          'relative flex w-m h-m items-center justify-center rounded-s': true,
+          'font-tnum text-l select-none leading-none': true,
           'cursor-pointer focus-within-ring-2 focus-within-ring-primary-50': !disabled,
           'bg-contrast-5 hover-bg-contrast-10': !checked && !disabled,
           'bg-primary text-primary-contrast': checked && !disabled,
diff --git a/src/elements/internal/InternalCard/InternalCard.ts b/src/elements/internal/InternalCard/InternalCard.ts
index aaa0e914c..416df5179 100644
--- a/src/elements/internal/InternalCard/InternalCard.ts
+++ b/src/elements/internal/InternalCard/InternalCard.ts
@@ -46,13 +46,13 @@ export class InternalCard<TData extends Data> extends ThemeableMixin(NucleonElem
         <div
           class=${classMap({
             'transition duration-500 ease-in-out absolute inset-0 flex': true,
+            'items-center justify-center': true,
             'opacity-0 pointer-events-none': this.isBodyReady,
           })}
         >
           <foxy-spinner
             layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}
             state=${spinnerState}
-            class="m-auto"
             infer="spinner"
           >
           </foxy-spinner>
diff --git a/src/elements/internal/InternalControl/InternalControl.ts b/src/elements/internal/InternalControl/InternalControl.ts
index 0ff46f7bc..62cc0bff5 100644
--- a/src/elements/internal/InternalControl/InternalControl.ts
+++ b/src/elements/internal/InternalControl/InternalControl.ts
@@ -48,17 +48,20 @@ export class InternalControl extends ConfigurableMixin(
     if (this.nucleon?.in('idle') === false) this.disabled = true;
   }
 
-  updated(changes: Map<keyof this, unknown>): void {
-    super.updated(changes);
+  renderLightDom(): void {
+    if (typeof this.infer !== 'string') return;
 
-    if (typeof this.infer === 'string') {
-      const lightDomTemplate = html`
-        <slot name="${this.infer}:before" slot="before"></slot>
-        <slot name="${this.infer}:after" slot="after"></slot>
-      `;
+    const lightDomTemplate = html`
+      <slot name="${this.infer}:before" slot="before"></slot>
+      <slot name="${this.infer}:after" slot="after"></slot>
+    `;
 
-      render(lightDomTemplate, this);
-    }
+    render(lightDomTemplate, this);
+  }
+
+  updated(changes: Map<keyof this, unknown>): void {
+    super.updated(changes);
+    this.renderLightDom();
   }
 
   /**
diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.test.ts b/src/elements/internal/InternalDateControl/InternalDateControl.test.ts
index b8a8ffde3..b3b7f1c63 100644
--- a/src/elements/internal/InternalDateControl/InternalDateControl.test.ts
+++ b/src/elements/internal/InternalDateControl/InternalDateControl.test.ts
@@ -66,7 +66,7 @@ describe('InternalDateControl', () => {
   });
 
   it('defines a reactive property for "format" (String)', () => {
-    expect(Control).to.have.nested.property('properties.format.type', String);
+    expect(Control).to.have.deep.nested.property('properties.format', {});
     expect(new Control()).to.have.property('format', null);
   });
 
@@ -158,6 +158,19 @@ describe('InternalDateControl', () => {
     expect(field).to.have.property('readonly', false);
   });
 
+  it('sets "theme" on vaadin-date-picker from "layout" on itself', async () => {
+    const layout = html`<test-internal-date-control></test-internal-date-control>`;
+    const control = await fixture<TestControl>(layout);
+    const field = control.renderRoot.querySelector('vaadin-date-picker')!;
+
+    expect(field).to.have.property('theme', 'standalone');
+
+    control.layout = 'summary-item';
+    await control.requestUpdate();
+
+    expect(field).to.have.property('theme', 'summary-item');
+  });
+
   it('sets "checkValidity" on vaadin-date-picker from "_checkValidity" on itself', async () => {
     const layout = html`<test-internal-date-control></test-internal-date-control>`;
     const control = await fixture<TestControl>(layout);
@@ -179,6 +192,20 @@ describe('InternalDateControl', () => {
     expect(field).to.have.property('value', '2020-01-01');
   });
 
+  it('sets long ISO "value" on vaadin-date-picker from "_value" on itself', async () => {
+    const layout = html`<test-internal-date-control></test-internal-date-control>`;
+    const control = await fixture<TestControl>(layout);
+    const field = control.renderRoot.querySelector('vaadin-date-picker')!;
+
+    expect(field).to.have.property('value', '');
+
+    control.format = 'iso-long';
+    control.testValue = '2020-01-01T00:00:00Z';
+    await control.requestUpdate();
+
+    expect(field).to.have.property('value', serializeDate(new Date('2020-01-01T00:00:00Z')));
+  });
+
   it('sets UNIX "value" on vaadin-date-picker from "_value" on itself', async () => {
     const layout = html`<test-internal-date-control></test-internal-date-control>`;
     const control = await fixture<TestControl>(layout);
@@ -221,6 +248,21 @@ describe('InternalDateControl', () => {
     expect(control).to.have.property('testValue', expectedValue);
   });
 
+  it('writes long ISO date to "_value" on change', async () => {
+    const layout = html`<test-internal-date-control></test-internal-date-control>`;
+    const control = await fixture<TestControl>(layout);
+    const field = control.renderRoot.querySelector('vaadin-date-picker')!;
+
+    expect(field).to.have.property('value', '');
+
+    control.format = 'iso-long';
+    field.value = '2020-01-01';
+    field.dispatchEvent(new CustomEvent('change'));
+
+    const expectedValue = parseDate('2020-01-01')?.toISOString();
+    expect(control).to.have.property('testValue', expectedValue);
+  });
+
   it('submits the host nucleon form on Enter', async () => {
     const layout = html`<test-internal-date-control></test-internal-date-control>`;
     const control = await fixture<TestControl>(layout);
@@ -232,4 +274,60 @@ describe('InternalDateControl', () => {
 
     submitMethod.restore();
   });
+
+  it('provides translations for vaadin-date-picker', async () => {
+    const layout = html`<test-internal-date-control lang="en"></test-internal-date-control>`;
+    const control = await fixture<TestControl>(layout);
+    const field = control.renderRoot.querySelector('vaadin-date-picker');
+
+    expect(field).to.have.deep.nested.property('i18n.monthNames', [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ]);
+
+    expect(field).to.have.deep.nested.property('i18n.weekdays', [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ]);
+
+    expect(field).to.have.deep.nested.property('i18n.weekdaysShort', [
+      'Sun',
+      'Mon',
+      'Tue',
+      'Wed',
+      'Thu',
+      'Fri',
+      'Sat',
+    ]);
+
+    expect(field).to.have.nested.property('i18n.firstDayOfWeek', 0);
+    expect(field).to.have.nested.property('i18n.week', 'week');
+    expect(field).to.have.nested.property('i18n.calendar', 'calendar');
+    expect(field).to.have.nested.property('i18n.clear', 'clear');
+    expect(field).to.have.nested.property('i18n.today', 'today');
+    expect(field).to.have.nested.property('i18n.cancel', 'cancel');
+    expect(field).to.have.nested.property('i18n.referenceDate', '');
+    expect(field).to.have.nested.property('i18n.parseDate', null);
+
+    expect(field).to.have.nested.property('i18n.formatTitle').to.be.a('function');
+    expect(field?.i18n.formatTitle('January', 2020)).to.equal('January 2020');
+
+    expect(field).to.have.nested.property('i18n.formatDate').to.be.a('function');
+    expect(field?.i18n.formatDate({ day: 1, month: 1, year: 2020 })).to.equal('display_value');
+  });
 });
diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.ts b/src/elements/internal/InternalDateControl/InternalDateControl.ts
index 4690199d8..5009ab018 100644
--- a/src/elements/internal/InternalDateControl/InternalDateControl.ts
+++ b/src/elements/internal/InternalDateControl/InternalDateControl.ts
@@ -7,6 +7,10 @@ import { parseDate } from '../../../utils/parse-date';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-element';
 
+import { getWeekdayShortNames } from './getWeekdayShortNames';
+import { getWeekdayLongNames } from './getWeekdayLongNames';
+import { getMonthNames } from './getMonthNames';
+
 /**
  * Internal control displaying a basic date picker box.
  *
@@ -17,18 +21,24 @@ export class InternalDateControl extends InternalEditableControl {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
-      format: { type: String },
+      format: {},
+      layout: {},
     };
   }
 
   /** Date format. If `unix`, expects and outputs a UNIX timestamp (number), otherwise defaults to ISO 8601 date. */
-  format: 'unix' | null = null;
+  format: 'unix' | 'iso-long' | null = null;
+
+  /** Use summary item layout inside `<foxy-internal-summary-control>`. */
+  layout: 'summary-item' | 'standalone' | null = null;
 
   renderControl(): TemplateResult {
     let value: string;
 
     if (this.format === 'unix') {
       value = serializeDate(new Date(((this._value as number) ?? 0) * 1000));
+    } else if (this.format === 'iso-long') {
+      value = serializeDate(new Date(this._value as string));
     } else {
       value = this._value as string;
     }
@@ -40,16 +50,20 @@ export class InternalDateControl extends InternalEditableControl {
         helper-text=${this.helperText}
         label=${this.label}
         class="w-full"
+        theme=${this.layout ?? 'standalone'}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}
         .value=${value}
+        .i18n=${this.__pickerI18n}
         @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}
         @change=${(evt: CustomEvent) => {
           const field = evt.currentTarget as DatePickerElement;
 
           if (this.format === 'unix') {
             this._value = Math.floor((parseDate(field.value)?.getTime() ?? 0) / 1000);
+          } else if (this.format === 'iso-long') {
+            this._value = parseDate(field.value)?.toISOString() ?? null;
           } else {
             this._value = field.value;
           }
@@ -58,4 +72,24 @@ export class InternalDateControl extends InternalEditableControl {
       </vaadin-date-picker>
     `;
   }
+
+  private get __pickerI18n() {
+    return {
+      monthNames: getMonthNames(this.lang || 'en'),
+      weekdays: getWeekdayLongNames(this.lang || 'en'),
+      weekdaysShort: getWeekdayShortNames(this.lang || 'en'),
+      firstDayOfWeek: 0,
+      week: this.t('week'),
+      calendar: this.t('calendar'),
+      clear: this.t('clear'),
+      today: this.t('today'),
+      cancel: this.t('cancel'),
+      referenceDate: '',
+      parseDate: null,
+      formatTitle: (m: string, y: string) => m + ' ' + y,
+      formatDate: (d: { day: number; month: number; year: number }) => {
+        return this.t('display_value', { value: new Date(d.year, d.month, d.day) });
+      },
+    };
+  }
 }
diff --git a/src/elements/internal/InternalDateControl/getMonthNames.ts b/src/elements/internal/InternalDateControl/getMonthNames.ts
new file mode 100644
index 000000000..c04d97505
--- /dev/null
+++ b/src/elements/internal/InternalDateControl/getMonthNames.ts
@@ -0,0 +1,6 @@
+export function getMonthNames(lang: string): string[] {
+  return new Array(12).fill(new Date()).map((date: Date, i) => {
+    date.setMonth(i);
+    return date.toLocaleDateString(lang, { month: 'long' });
+  });
+}
diff --git a/src/elements/internal/InternalDateControl/getWeekdayLongNames.ts b/src/elements/internal/InternalDateControl/getWeekdayLongNames.ts
new file mode 100644
index 000000000..6eba4e789
--- /dev/null
+++ b/src/elements/internal/InternalDateControl/getWeekdayLongNames.ts
@@ -0,0 +1,6 @@
+export function getWeekdayLongNames(lang: string): string[] {
+  return new Array(7).fill(new Date()).map((date: Date, i) => {
+    while (date.getDay() !== i) date.setDate(date.getDate() + 1);
+    return date.toLocaleDateString(lang, { weekday: 'long' });
+  });
+}
diff --git a/src/elements/internal/InternalDateControl/getWeekdayShortNames.ts b/src/elements/internal/InternalDateControl/getWeekdayShortNames.ts
new file mode 100644
index 000000000..f5c781cb5
--- /dev/null
+++ b/src/elements/internal/InternalDateControl/getWeekdayShortNames.ts
@@ -0,0 +1,6 @@
+export function getWeekdayShortNames(lang: string): string[] {
+  return new Array(7).fill(new Date()).map((date: Date, i) => {
+    while (date.getDay() !== i) date.setDate(date.getDate() + 1);
+    return date.toLocaleDateString(lang, { weekday: 'short' });
+  });
+}
diff --git a/src/elements/internal/InternalDateControl/index.ts b/src/elements/internal/InternalDateControl/index.ts
index 042983ad5..4eb2fef88 100644
--- a/src/elements/internal/InternalDateControl/index.ts
+++ b/src/elements/internal/InternalDateControl/index.ts
@@ -1,5 +1,7 @@
 import '@vaadin/vaadin-date-picker';
 import '../InternalEditableControl/index';
+import './vaadinStyles';
+
 import { InternalDateControl as Control } from './InternalDateControl';
 
 customElements.define('foxy-internal-date-control', Control);
diff --git a/src/elements/internal/InternalDateControl/vaadinStyles.ts b/src/elements/internal/InternalDateControl/vaadinStyles.ts
new file mode 100644
index 000000000..83f65ba31
--- /dev/null
+++ b/src/elements/internal/InternalDateControl/vaadinStyles.ts
@@ -0,0 +1,78 @@
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';
+import { css } from 'lit-element';
+
+registerStyles(
+  'vaadin-date-picker-text-field',
+  css`
+    :host([theme~='summary-item'])::before {
+      display: none;
+    }
+
+    :host([theme~='summary-item']) .vaadin-text-field-container {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: repeat(3, min-content);
+      gap: 0 var(--lumo-space-m);
+    }
+
+    :host([theme~='summary-item']) [part='label'] {
+      font: normal var(--lumo-font-size-m) var(--lumo-font-family);
+      color: var(--lumo-body-text-color) !important;
+      grid-row: 1;
+      -webkit-text-fill-color: var(--lumo-body-text-color) !important;
+    }
+
+    :host([theme~='summary-item']) [part='helper-text'] {
+      font: normal var(--lumo-font-size-s) var(--lumo-font-family);
+      color: var(--lumo-secondary-text-color) !important;
+      grid-row: 2;
+    }
+
+    :host([theme~='summary-item']) [part='helper-text']::before {
+      display: none;
+    }
+
+    :host([theme~='summary-item']) [part='error-message'] {
+      font: normal var(--lumo-font-size-s) var(--lumo-font-family);
+      color: var(--lumo-error-text-color);
+      grid-row: 3;
+    }
+
+    :host([theme~='summary-item']) [part='error-message'],
+    :host([theme~='summary-item']) [part='helper-text'],
+    :host([theme~='summary-item']) [part='label'] {
+      line-height: var(--lumo-line-height-xs);
+      grid-column: 1;
+      padding: 0;
+    }
+
+    :host([theme~='summary-item']) [part='input-field'] {
+      grid-column: 2;
+      grid-row: 1;
+      padding: 0;
+      background: transparent;
+      align-self: start;
+      height: 1em;
+
+      --lumo-icon-size-m: 1rem;
+    }
+
+    :host([theme~='summary-item']) [part='input-field']::after,
+    :host([theme~='summary-item'][readonly]) [part='input-field'] slot[name='suffix'] {
+      display: none;
+    }
+
+    :host([theme~='summary-item']) [part='value'] {
+      line-height: var(--lumo-line-height-xs);
+      text-align: right;
+      min-height: auto;
+      padding: 0;
+      margin-right: var(--lumo-space-xs);
+      -webkit-mask-image: none;
+    }
+
+    :host([theme~='summary-item'][readonly]) [part='value'] {
+      margin-right: 0;
+    }
+  `
+);
diff --git a/src/elements/internal/InternalEditableListControl/InternalEditableListControl.test.ts b/src/elements/internal/InternalEditableListControl/InternalEditableListControl.test.ts
index 6d5bb97de..f7434f32b 100644
--- a/src/elements/internal/InternalEditableListControl/InternalEditableListControl.test.ts
+++ b/src/elements/internal/InternalEditableListControl/InternalEditableListControl.test.ts
@@ -24,6 +24,11 @@ describe('InternalEditableListControl', () => {
     expect(new Control()).to.have.deep.property('inputParams', {});
   });
 
+  it('has a reactive property "layout"', () => {
+    expect(Control).to.have.deep.nested.property('properties.layout', {});
+    expect(new Control()).to.have.property('layout', null);
+  });
+
   it('has a reactive property "options"', () => {
     expect(Control).to.have.deep.nested.property('properties.options', { type: Array });
     expect(new Control()).to.have.deep.property('options', []);
diff --git a/src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts b/src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts
index dce2c428e..5a7be46b7 100644
--- a/src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts
+++ b/src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts
@@ -14,6 +14,7 @@ export class InternalEditableListControl extends InternalEditableControl {
       ...super.properties,
       inputParams: { attribute: false },
       options: { type: Array },
+      layout: {},
       units: { type: Array },
       range: {},
       __isErrorVisible: { attribute: false },
@@ -49,6 +50,8 @@ export class InternalEditableListControl extends InternalEditableControl {
 
   options: Option[] = [];
 
+  layout: 'standalone' | 'summary-item' | null = null;
+
   units: Unit[] = [];
 
   range: null | 'optional' = null;
@@ -58,20 +61,26 @@ export class InternalEditableListControl extends InternalEditableControl {
   private __newItem = '';
 
   render(): TemplateResult {
+    const isSummaryItem = this.layout === 'summary-item';
+    const isInteractive = !this.disabled && !this.readonly;
+
     const deleteButtonClass = classMap({
-      'w-xs h-xs mr-xs rounded-full transition-colors flex-shrink-0': true,
+      'w-xs h-xs rounded-s transition-colors flex-shrink-0': true,
       'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,
       'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,
       'cursor-default text-disabled': this.disabled,
       'flex items-center justify-center': !this.readonly,
       'hidden': this.readonly,
+      'mr-xs': !isSummaryItem,
     });
 
     const itemClass = classMap({
-      'transition-colors h-m ml-s flex items-center': true,
+      'transition-colors flex items-center': true,
       'text-secondary': this.readonly,
       'text-disabled': this.disabled,
-      'group-hover-divide-contrast-20': !this.disabled && !this.readonly,
+      'group-hover-divide-contrast-20': !isSummaryItem && isInteractive,
+      'pl-s border border-contrast-10 rounded-s': isSummaryItem,
+      'ml-s h-m': !isSummaryItem,
     });
 
     const isAddButtonDisabled = this.disabled || !this.__newItem;
@@ -98,9 +107,11 @@ export class InternalEditableListControl extends InternalEditableControl {
       <div class="group">
         <div
           class=${classMap({
-            'transition-colors mb-xs font-medium text-s': true,
-            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,
-            'text-disabled': this.disabled,
+            'transition-colors mb-xs': true,
+            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,
+            'text-disabled': !isSummaryItem && this.disabled,
+            'font-medium text-s': !isSummaryItem,
+            'text-m': isSummaryItem,
           })}
         >
           ${this.label}
@@ -108,11 +119,18 @@ export class InternalEditableListControl extends InternalEditableControl {
 
         <div
           class=${classMap({
-            'border border-contrast-10 rounded transition-colors': true,
-            'group-hover-border-contrast-20': !this.disabled && !this.readonly,
+            'transition-colors': true,
+            'border border-contrast-10 rounded': !isSummaryItem,
+            'group-hover-border-contrast-20': !isSummaryItem && isInteractive,
           })}
         >
-          <ol class="transition-colors divide-y divide-contrast-10 font-medium">
+          <ol
+            class=${classMap({
+              'transition-colors font-medium': true,
+              'divide-y divide-contrast-10': !isSummaryItem,
+              'flex flex-wrap gap-s': isSummaryItem,
+            })}
+          >
             ${repeat(
               this._value,
               item => item.value,
@@ -138,16 +156,20 @@ export class InternalEditableListControl extends InternalEditableControl {
           </ol>
 
           <div
-            style=${this._value.length === 0
+            style=${isSummaryItem
+              ? ''
+              : this._value.length === 0
               ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'
               : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}
             class=${classMap({
               'transition-colors pl-s h-m flex items-center gap-xs': true,
-              'focus-within-ring-2 focus-within-ring-primary-50': true,
-              'bg-contrast-10 group-hover-bg-contrast-20': !this.disabled && !this.readonly,
-              'bg-contrast-5': this.disabled,
+              'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,
+              'bg-contrast-10 group-hover-bg-contrast-20': !isSummaryItem && isInteractive,
+              'bg-contrast-5': !isSummaryItem && this.disabled,
               'flex': !this.readonly,
               'hidden': this.readonly,
+              'rounded-s border border-contrast-10': isSummaryItem,
+              'mt-s': isSummaryItem && this._value.length > 0,
             })}
           >
             ${this.range
@@ -302,9 +324,10 @@ export class InternalEditableListControl extends InternalEditableControl {
 
         <div
           class=${classMap({
-            'transition-colors mt-xs text-xs': true,
-            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,
-            'text-disabled': this.disabled,
+            'transition-colors text-xs mt-xs': true,
+            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,
+            'text-disabled': !isSummaryItem && this.disabled,
+            'text-secondary': isSummaryItem,
           })}
           ?hidden=${!this.helperText}
         >
diff --git a/src/elements/internal/InternalEditableListControl/index.ts b/src/elements/internal/InternalEditableListControl/index.ts
index 96ce1a658..8259773c3 100644
--- a/src/elements/internal/InternalEditableListControl/index.ts
+++ b/src/elements/internal/InternalEditableListControl/index.ts
@@ -1,3 +1,4 @@
+import '@vaadin-component-factory/vcf-tooltip';
 import '@vaadin/vaadin-icons';
 import '@polymer/iron-icon';
 
diff --git a/src/elements/internal/InternalForm/InternalForm.test.ts b/src/elements/internal/InternalForm/InternalForm.test.ts
index 144483070..4c8a2429c 100644
--- a/src/elements/internal/InternalForm/InternalForm.test.ts
+++ b/src/elements/internal/InternalForm/InternalForm.test.ts
@@ -9,6 +9,8 @@ import { getTestData } from '../../../testgen/getTestData';
 import { FetchEvent } from '../../public/NucleonElement/FetchEvent';
 import { NucleonElement } from '../../public/NucleonElement/NucleonElement';
 import { InternalForm } from './index';
+import { Resource } from '@foxy.io/sdk/core';
+import { Rels } from '@foxy.io/sdk/backend';
 
 describe('InternalForm', () => {
   it('imports and registers foxy-internal-timestamps-control', () => {
@@ -149,17 +151,8 @@ describe('InternalForm', () => {
 
     render(element.renderBody(), root);
 
-    expect(root.querySelector('foxy-internal-submit-control[infer="submit"]')).to.not.exist;
-    expect(root.querySelector('foxy-internal-submit-control[infer="create"]')).to.exist;
-    expect(root.querySelector('foxy-internal-delete-control[infer="delete"]')).to.not.exist;
-    expect(root.querySelector('foxy-internal-undo-control[infer="undo"]')).to.not.exist;
-    expect(root.querySelector('foxy-internal-timestamps-control[infer="timestamps"]')).to.not.exist;
-
-    element.data = await getTestData<any>('./hapi/customers/0');
-    render(element.renderBody(), root);
-
     expect(root.querySelector('foxy-internal-submit-control[infer="submit"]')).to.exist;
-    expect(root.querySelector('foxy-internal-submit-control[infer="create"]')).to.not.exist;
+    expect(root.querySelector('foxy-internal-submit-control[infer="create"]')).to.exist;
     expect(root.querySelector('foxy-internal-delete-control[infer="delete"]')).to.exist;
     expect(root.querySelector('foxy-internal-undo-control[infer="undo"]')).to.exist;
     expect(root.querySelector('foxy-internal-timestamps-control[infer="timestamps"]')).to.exist;
@@ -177,19 +170,10 @@ describe('InternalForm', () => {
 
     expect(renderBodyMethod).to.have.been.called;
     expect(root.querySelector('foxy-internal-submit-control[infer="create"]')).to.exist;
-    expect(root.querySelector('foxy-internal-delete-control[infer="delete"]')).to.not.exist;
-    expect(root.querySelector('foxy-internal-timestamps-control[infer="timestamps"]')).to.not.exist;
-
-    renderBodyMethod.resetHistory();
-    element.data = await getTestData<any>('./hapi/customers/0');
-    await element.requestUpdate();
-
-    expect(renderBodyMethod).to.have.been.called;
-    expect(root.querySelector('foxy-internal-submit-control[infer="create"]')).to.not.exist;
     expect(root.querySelector('foxy-internal-delete-control[infer="delete"]')).to.exist;
     expect(root.querySelector('foxy-internal-timestamps-control[infer="timestamps"]')).to.exist;
-
-    renderBodyMethod.restore();
+    expect(root.querySelector('foxy-internal-undo-control[infer="undo"]')).to.exist;
+    expect(root.querySelector('foxy-internal-submit-control[infer="submit"]')).to.exist;
   });
 
   it('renders foxy-spinner in "busy" state while loading data', async () => {
@@ -298,6 +282,35 @@ describe('InternalForm', () => {
     expect(wrapper).to.not.exist;
   });
 
+  it('hides Create button when href is set', () => {
+    const element = new InternalForm();
+    expect(element.hiddenSelector.matches('create', true)).to.be.false;
+
+    element.href = 'https://demo.api/hapi/customer_addresses/0';
+    expect(element.hiddenSelector.matches('create', true)).to.be.true;
+  });
+
+  it('hides Delete button, Submit button and timestamps when href is not set', () => {
+    const element = new InternalForm();
+    expect(element.hiddenSelector.matches('delete', true)).to.be.true;
+    expect(element.hiddenSelector.matches('submit', true)).to.be.true;
+    expect(element.hiddenSelector.matches('timestamps', true)).to.be.true;
+
+    element.href = 'https://demo.api/hapi/customer_addresses/0';
+    expect(element.hiddenSelector.matches('delete', true)).to.be.false;
+    expect(element.hiddenSelector.matches('submit', true)).to.be.true; // remains hidden because of another condition
+    expect(element.hiddenSelector.matches('timestamps', true)).to.be.false;
+  });
+
+  it('hides Undo button when there are no edits to undo', async () => {
+    const element = new InternalForm<Resource<Rels.CustomerAddress>>();
+    expect(element.hiddenSelector.matches('undo', true)).to.be.true;
+
+    element.data = await getTestData('./hapi/customer_addresses/0');
+    element.edit({ first_name: 'John' });
+    expect(element.hiddenSelector.matches('undo', true)).to.be.false;
+  });
+
   it('renders general errors if present', async () => {
     const layout = html`<foxy-internal-form></foxy-internal-form>`;
     const element = await fixture<InternalForm<any>>(layout);
diff --git a/src/elements/internal/InternalForm/InternalForm.ts b/src/elements/internal/InternalForm/InternalForm.ts
index f9dfc6098..cbdbedc5e 100644
--- a/src/elements/internal/InternalForm/InternalForm.ts
+++ b/src/elements/internal/InternalForm/InternalForm.ts
@@ -3,10 +3,10 @@ import type { HALJSONResource } from '../../public/NucleonElement/types';
 import type { TemplateResult } from 'lit-html';
 import type { Status } from './types';
 
+import { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';
 import { ConfigurableMixin } from '../../../mixins/configurable';
 import { ThemeableMixin } from '../../../mixins/themeable';
 import { NucleonElement } from '../../public/NucleonElement/NucleonElement';
-import { getResourceId } from '@foxy.io/sdk/core';
 import { classMap } from '../../../utils/class-map';
 import { html } from 'lit-html';
 
@@ -71,6 +71,14 @@ export class InternalForm<TData extends HALJSONResource> extends Base<TData> {
     return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';
   }
 
+  get hiddenSelector(): BooleanSelector {
+    const alwaysMatch = [super.hiddenSelector.toString()];
+    if (this.href) alwaysMatch.unshift('create');
+    if (!this.href) alwaysMatch.unshift('delete', 'timestamps', 'submit');
+    if (!this.in({ idle: { snapshot: 'dirty' } })) alwaysMatch.unshift('undo', 'submit');
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
+  }
+
   /**
    * Renders optional form header.
    * - Customize which actions are rendered with `.renderHeaderActions()` method.
@@ -145,34 +153,22 @@ export class InternalForm<TData extends HALJSONResource> extends Base<TData> {
    * don't forget to add `super.renderBody()` to your template.
    */
   renderBody(): TemplateResult {
-    if (this.data) {
-      const isSnapshotDirty = this.in({ idle: { snapshot: 'dirty' } });
-      const isDeleteHidden = this.hiddenSelector.matches('delete', true);
-      const actionClass = classMap({ 'transition-opacity': true, 'opacity-0': !isSnapshotDirty });
+    const nested = ['delete', 'undo', 'submit', 'create'];
 
-      return html`
-        <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control>
-        ${!isDeleteHidden || isSnapshotDirty
-          ? html`
-              <div class="flex gap-s">
-                <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
-                <div class="w-full"></div>
-                <foxy-internal-undo-control class=${actionClass} infer="undo">
-                </foxy-internal-undo-control>
-                <foxy-internal-submit-control class=${actionClass} infer="submit">
-                </foxy-internal-submit-control>
-              </div>
-            `
-          : ''}
-      `;
-    } else {
-      return html`
-        <div class="flex">
-          <foxy-internal-submit-control infer="create" theme="primary success" class="ml-auto">
-          </foxy-internal-submit-control>
-        </div>
-      `;
-    }
+    return html`
+      <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control>
+
+      <div class="flex gap-m" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>
+        <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
+
+        <div class="w-full"></div>
+
+        <foxy-internal-undo-control infer="undo"> </foxy-internal-undo-control>
+        <foxy-internal-submit-control infer="submit"> </foxy-internal-submit-control>
+        <foxy-internal-submit-control infer="create" theme="primary success">
+        </foxy-internal-submit-control>
+      </div>
+    `;
   }
 
   /**
diff --git a/src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.test.ts b/src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.test.ts
index fed7cfc13..43a6d397a 100644
--- a/src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.test.ts
+++ b/src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.test.ts
@@ -68,11 +68,24 @@ describe('InternalFrequencyControl', () => {
     expect(Control).to.have.deep.nested.property('properties.max', { type: Number });
   });
 
+  it('has a reactive property "layout"', () => {
+    expect(new Control()).to.have.property('layout', null);
+    expect(Control).to.have.deep.nested.property('properties.layout', {});
+  });
+
+  it('has a reactive property "allowTwiceAMonth"', () => {
+    expect(new Control()).to.have.property('allowTwiceAMonth', false);
+    expect(Control).to.have.deep.nested.property('properties.allowTwiceAMonth', {
+      type: Boolean,
+      attribute: 'allow-twice-a-month',
+    });
+  });
+
   it('extends InternalEditableControl', () => {
     expect(new Control()).to.be.instanceOf(InternalEditableControl);
   });
 
-  it('renders vaadin-custom-field element', async () => {
+  it('renders vaadin-custom-field element in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-custom-field');
@@ -80,7 +93,7 @@ describe('InternalFrequencyControl', () => {
     expect(field).to.not.be.null;
   });
 
-  it('renders vaadin-integer-field element as part of custom field', async () => {
+  it('renders vaadin-integer-field element as part of custom field in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-custom-field > vaadin-integer-field');
@@ -88,7 +101,7 @@ describe('InternalFrequencyControl', () => {
     expect(field).to.not.be.null;
   });
 
-  it('renders vaadin-combo-box element as part of custom field', async () => {
+  it('renders vaadin-combo-box element as part of custom field in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-custom-field > vaadin-combo-box');
@@ -96,7 +109,7 @@ describe('InternalFrequencyControl', () => {
     expect(field).to.not.be.null;
   });
 
-  it('sets "errorMessage" on vaadin-custom-field from "_errorMessage" on itself', async () => {
+  it('sets "errorMessage" on vaadin-custom-field from "_errorMessage" on itself in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-custom-field')!;
@@ -109,7 +122,7 @@ describe('InternalFrequencyControl', () => {
     expect(field).to.have.property('errorMessage', 'test error message');
   });
 
-  it('sets "helperText" on vaadin-custom-field from "helperText" on itself', async () => {
+  it('sets "helperText" on vaadin-custom-field from "helperText" on itself in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-custom-field')!;
@@ -122,7 +135,7 @@ describe('InternalFrequencyControl', () => {
     expect(field).to.have.property('helperText', 'test helper text');
   });
 
-  it('sets "label" on vaadin-custom-field from "label" on itself', async () => {
+  it('sets "label" on vaadin-custom-field from "label" on itself in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-custom-field')!;
@@ -135,7 +148,7 @@ describe('InternalFrequencyControl', () => {
     expect(field).to.have.property('label', 'test label');
   });
 
-  it('sets "disabled" on vaadin elements from "disabled" on itself', async () => {
+  it('sets "disabled" on vaadin elements from "disabled" on itself in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const customField = control.renderRoot.querySelector('vaadin-custom-field')!;
@@ -157,7 +170,7 @@ describe('InternalFrequencyControl', () => {
     expect(comboBox).to.not.have.attribute('disabled');
   });
 
-  it('sets "readonly" on vaadin elements from "readonly" on itself', async () => {
+  it('sets "readonly" on vaadin elements from "readonly" on itself in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const customField = control.renderRoot.querySelector('vaadin-custom-field')!;
@@ -179,7 +192,7 @@ describe('InternalFrequencyControl', () => {
     expect(comboBox).to.not.have.attribute('readonly');
   });
 
-  it('sets "checkValidity" on vaadin-custom-field from "_checkValidity" on itself', async () => {
+  it('sets "checkValidity" on vaadin-custom-field from "_checkValidity" on itself in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-custom-field')!;
@@ -187,7 +200,7 @@ describe('InternalFrequencyControl', () => {
     expect(field).to.have.property('checkValidity', get(control, '_checkValidity'));
   });
 
-  it('sets "invalid" on custom field children if "_checkValidity" returns false', async () => {
+  it('sets "invalid" on custom field children if "_checkValidity" returns false in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
 
@@ -207,7 +220,7 @@ describe('InternalFrequencyControl', () => {
     expect(comboBox).to.not.have.attribute('invalid');
   });
 
-  it('sets "value" on vaadin-custom-field from "_value" on itself', async () => {
+  it('sets "value" on vaadin-custom-field from "_value" on itself in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-custom-field')!;
@@ -220,7 +233,7 @@ describe('InternalFrequencyControl', () => {
     expect(field).to.have.property('value', '2w');
   });
 
-  it('parses provided frequency to distribute among custom field elements', async () => {
+  it('parses provided frequency to distribute among custom field elements in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector<CustomFieldElement>('vaadin-custom-field')!;
@@ -229,7 +242,7 @@ describe('InternalFrequencyControl', () => {
     expect(field.i18n.parseValue('12m')).to.deep.equal(['12', 'm']);
   });
 
-  it('serializes frequency parts provided by custom field elements', async () => {
+  it('serializes frequency parts provided by custom field elements in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector<CustomFieldElement>('vaadin-custom-field')!;
@@ -238,7 +251,7 @@ describe('InternalFrequencyControl', () => {
     expect(field.i18n.formatValue(['12', 'm'])).to.equal('12m');
   });
 
-  it('writes to "_value" on change', async () => {
+  it('writes to "_value" on change in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-custom-field')!;
@@ -251,7 +264,7 @@ describe('InternalFrequencyControl', () => {
     expect(control).to.have.property('testValue', '2w');
   });
 
-  it('submits the host nucleon form on Enter (vaadin-integer-field)', async () => {
+  it('submits the host nucleon form on Enter (vaadin-integer-field) in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-integer-field')!;
@@ -263,7 +276,7 @@ describe('InternalFrequencyControl', () => {
     submitMethod.restore();
   });
 
-  it('submits the host nucleon form on Enter (vaadin-combo-box)', async () => {
+  it('submits the host nucleon form on Enter (vaadin-combo-box) in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -275,7 +288,7 @@ describe('InternalFrequencyControl', () => {
     submitMethod.restore();
   });
 
-  it('uses "max" value on vaadin-integer-field', async () => {
+  it('uses "max" value on vaadin-integer-field in standalone layout', async () => {
     const layout = html`<test-internal-frequency-control></test-internal-frequency-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-integer-field')!;
@@ -285,4 +298,169 @@ describe('InternalFrequencyControl', () => {
     await control.requestUpdate();
     expect(field).to.have.attribute('max', '100');
   });
+
+  it('renders label in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-frequency-control layout="summary-item"></test-internal-frequency-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('label');
+
+    control.label = 'Foo bar';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('label');
+    expect(control.renderRoot).to.include.text('Foo bar');
+  });
+
+  it('renders helper text in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-frequency-control layout="summary-item"></test-internal-frequency-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('helper_text');
+
+    control.helperText = 'Test helper text';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('helper_text');
+    expect(control.renderRoot).to.include.text('Test helper text');
+  });
+
+  it('renders error text in summary item layout if available', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-frequency-control layout="summary-item"></test-internal-frequency-control>
+    `);
+
+    expect(control.renderRoot).to.not.include.text('Test error message');
+
+    control.testErrorMessage = 'Test error message';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.include.text('Test error message');
+  });
+
+  it('renders input for frequency count in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-frequency-control layout="summary-item"> </test-internal-frequency-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('value', '0');
+    expect(input).to.have.attribute('min', '1');
+    expect(input).to.have.attribute('type', 'number');
+    expect(input).to.have.attribute('step', '1');
+    expect(input).to.have.attribute('inputmode', 'numeric');
+
+    control.testValue = '2w';
+    await control.requestUpdate();
+    expect(input).to.have.property('value', '2');
+
+    input.value = '5';
+    input.dispatchEvent(new Event('input'));
+    expect(control).to.have.property('testValue', '5w');
+  });
+
+  it('uses "max" value on input in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-frequency-control layout="summary-item"> </test-internal-frequency-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input');
+    expect(input).to.have.attribute('max', '999');
+
+    control.max = 100;
+    await control.requestUpdate();
+    expect(input).to.have.attribute('max', '100');
+  });
+
+  it('renders frequency units selector in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-frequency-control layout="summary-item"></test-internal-frequency-control>
+    `);
+
+    const select = control.renderRoot.querySelector('select')!;
+
+    expect(select).to.have.property('value', '');
+    expect(select.options.length).to.equal(5);
+    expect(select.options[0]).to.have.property('value', '');
+    expect(select.options[1]).to.have.property('value', 'd');
+    expect(select.options[1]).to.include.text('day');
+    expect(select.options[2]).to.have.property('value', 'w');
+    expect(select.options[2]).to.include.text('week');
+    expect(select.options[3]).to.have.property('value', 'm');
+    expect(select.options[3]).to.include.text('month');
+    expect(select.options[4]).to.have.property('value', 'y');
+    expect(select.options[4]).to.include.text('year');
+
+    control.testValue = '2w';
+    await control.requestUpdate();
+    expect(select).to.have.property('value', 'w');
+
+    select.value = 'm';
+    select.dispatchEvent(new Event('change'));
+    expect(control).to.have.property('testValue', '2m');
+  });
+
+  it('renders custom options in frequency units selector in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-frequency-control
+        layout="summary-item"
+        .options=${[
+          { value: 'a', label: 'foo' },
+          { value: 'b', label: 'bar' },
+        ]}
+      >
+      </test-internal-frequency-control>
+    `);
+
+    const select = control.renderRoot.querySelector('select')!;
+
+    expect(select.options.length).to.equal(3);
+    expect(select.options[0]).to.have.property('value', '');
+    expect(select.options[1]).to.have.property('value', 'a');
+    expect(select.options[1]).to.include.text('foo');
+    expect(select.options[2]).to.have.property('value', 'b');
+    expect(select.options[2]).to.include.text('bar');
+  });
+
+  it('disables input and select in summary item layout if control is disabled', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-frequency-control layout="summary-item"></test-internal-frequency-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    const select = control.renderRoot.querySelector('select')!;
+
+    expect(input).to.not.have.attribute('disabled');
+    expect(select).to.not.have.attribute('disabled');
+
+    control.disabled = true;
+    await control.requestUpdate();
+
+    expect(input).to.have.attribute('disabled');
+    expect(select).to.have.attribute('disabled');
+  });
+
+  it('supports ".5m" frequency in summary item layout when enabled', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-frequency-control layout="summary-item"></test-internal-frequency-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    const select = control.renderRoot.querySelector('select')!;
+
+    control.testValue = '.5m';
+    await control.requestUpdate();
+
+    expect(input).to.have.property('value', '');
+    expect(select).to.have.property('value', '');
+
+    control.allowTwiceAMonth = true;
+    control.testValue = '.5m';
+    await control.requestUpdate();
+
+    expect(input).to.have.property('value', '2');
+    expect(select).to.have.property('value', 'times_a_month');
+  });
 });
diff --git a/src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts b/src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts
index 6eaa4fa68..af2d8b5d4 100644
--- a/src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts
+++ b/src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts
@@ -2,8 +2,9 @@ import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-e
 import type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';
 
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
-import { css, html } from 'lit-element';
+import { css, html, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from '../../../utils/class-map';
 
 /**
  * Internal control displaying a custom field for frequency input.
@@ -15,7 +16,9 @@ export class InternalFrequencyControl extends InternalEditableControl {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
+      allowTwiceAMonth: { type: Boolean, attribute: 'allow-twice-a-month' },
       options: { attribute: false },
+      layout: {},
       max: { type: Number },
     };
   }
@@ -56,10 +59,22 @@ export class InternalFrequencyControl extends InternalEditableControl {
         vaadin-combo-box::part(text-field) {
           padding: 0;
         }
+
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        input {
+          -moz-appearance: textfield;
+        }
       `,
     ];
   }
 
+  allowTwiceAMonth = false;
+
   options = [
     { value: 'd', label: 'day' },
     { value: 'w', label: 'week' },
@@ -67,6 +82,8 @@ export class InternalFrequencyControl extends InternalEditableControl {
     { value: 'y', label: 'year' },
   ];
 
+  layout: 'summary-item' | 'standalone' | null = null;
+
   max: number | null = 999;
 
   private __i18n: CustomFieldI18n = {
@@ -81,6 +98,8 @@ export class InternalFrequencyControl extends InternalEditableControl {
   };
 
   renderControl(): TemplateResult {
+    if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();
+
     const value = (this._value ?? '') as string;
     const count = parseFloat(this.__i18n.parseValue(value)[0] as string);
     const items = this.options.map(({ value, label }) => ({
@@ -134,4 +153,118 @@ export class InternalFrequencyControl extends InternalEditableControl {
     const field = this.renderRoot.querySelector('vaadin-custom-field');
     if (field && field.value !== this._value) field.value = (this._value ?? '') as string;
   }
+
+  private __renderSummaryItemLayout() {
+    const value = (this._value ?? '') as string;
+    const [strCount, units] = this.__i18n.parseValue(value);
+    const count = parseFloat(strCount as string);
+    const selection =
+      this._value === '.5m' && !this.allowTwiceAMonth
+        ? undefined
+        : this.options.find(v => v.value === units);
+
+    return html`
+      <div class="flex items-start gap-m leading-xs">
+        <div>
+          <label class="text-m text-body" for="input">${this.label}</label>
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        <div class="flex-1 flex items-center gap-xs">
+          <input
+            placeholder=${this.placeholder}
+            inputmode="numeric"
+            style="min-width: 10ch"
+            class=${classMap({
+              'w-full appearance-none text-right bg-transparent transition-colors': true,
+              'text-m rounded-s focus-outline-none': true,
+              'text-secondary': this.readonly,
+              'text-disabled': this.disabled,
+              'font-medium': !this.readonly,
+            })}
+            type="number"
+            step="1"
+            min="1"
+            max=${ifDefined(this.max ?? void 0)}
+            id="input"
+            .value=${value === '.5m' ? (this.allowTwiceAMonth ? 2 : '') : count}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}
+            @input=${(evt: Event) => {
+              evt.stopPropagation();
+              const input = evt.currentTarget as HTMLInputElement;
+              this._value = this.__i18n.formatValue([input.value, units]);
+            }}
+          />
+
+          <div
+            class=${classMap({
+              'relative rounded-s transition-colors transition-opacity': true,
+              'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,
+              'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,
+              'text-secondary': this.readonly,
+              'text-disabled': this.disabled,
+              'font-medium': !this.readonly,
+            })}
+          >
+            <div class="flex items-center gap-xs">
+              <div class="whitespace-nowrap">
+                ${value === '.5m'
+                  ? this.t('times_a_month')
+                  : selection
+                  ? this.t(selection.label, { count })
+                  : this.t('select')}
+              </div>
+              ${this.readonly
+                ? ''
+                : svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25)"><path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>`}
+            </div>
+
+            <select
+              class=${classMap({
+                'absolute inset-0 opacity-0': true,
+                'cursor-pointer': !this.disabled && !this.readonly,
+              })}
+              id="select"
+              ?disabled=${this.disabled}
+              ?hidden=${this.readonly}
+              @change=${(evt: Event) => {
+                evt.stopPropagation();
+                const value = (evt.currentTarget as HTMLSelectElement).value;
+                if (value === 'times_a_month') {
+                  this._value = '.5m';
+                } else {
+                  this._value = this.__i18n.formatValue([count, value]);
+                }
+              }}
+            >
+              <option value="" ?selected=${!selection} disabled hidden>${this.t('select')}</option>
+              ${this.allowTwiceAMonth && (count === 2 || value === '.5m')
+                ? html`
+                    <option value="times_a_month" ?selected=${value === '.5m'}>
+                      ${this.t('times_a_month')}
+                    </option>
+                  `
+                : ''}
+              ${this.options.map(
+                option =>
+                  html`
+                    <option
+                      value=${option.value}
+                      ?selected=${value !== '.5m' && option.value === selection?.value}
+                    >
+                      ${this.t(option.label, { count })}
+                    </option>
+                  `
+              )}
+            </select>
+          </div>
+        </div>
+      </div>
+    `;
+  }
 }
diff --git a/src/elements/internal/InternalNumberControl/InternalNumberControl.test.ts b/src/elements/internal/InternalNumberControl/InternalNumberControl.test.ts
index 82f8966bf..4128aaadf 100644
--- a/src/elements/internal/InternalNumberControl/InternalNumberControl.test.ts
+++ b/src/elements/internal/InternalNumberControl/InternalNumberControl.test.ts
@@ -63,6 +63,16 @@ describe('InternalNumberControl', () => {
     expect(new Control()).to.be.instanceOf(InternalEditableControl);
   });
 
+  it('defines a reactive property for "layout" (String)', () => {
+    expect(Control).to.have.deep.nested.property('properties.layout', {});
+    expect(new Control()).to.have.property('layout', null);
+  });
+
+  it('defines a reactive property for "step" (Number)', () => {
+    expect(Control).to.have.deep.nested.property('properties.step', { type: Number });
+    expect(new Control()).to.have.property('step', null);
+  });
+
   it('renders vaadin-number-field element', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
@@ -71,7 +81,7 @@ describe('InternalNumberControl', () => {
     expect(field).to.not.be.null;
   });
 
-  it('sets "errorMessage" on vaadin-number-field from "_errorMessage" on itself', async () => {
+  it('sets "errorMessage" on vaadin-number-field from "_errorMessage" on itself in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -84,7 +94,7 @@ describe('InternalNumberControl', () => {
     expect(field).to.have.property('errorMessage', 'test error message');
   });
 
-  it('sets "helperText" on vaadin-number-field from "helperText" on itself', async () => {
+  it('sets "helperText" on vaadin-number-field from "helperText" on itself in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -97,7 +107,7 @@ describe('InternalNumberControl', () => {
     expect(field).to.have.property('helperText', 'test helper text');
   });
 
-  it('sets "placeholder" on vaadin-number-field from "placeholder" on itself', async () => {
+  it('sets "placeholder" on vaadin-number-field from "placeholder" on itself in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -110,7 +120,20 @@ describe('InternalNumberControl', () => {
     expect(field).to.have.property('placeholder', 'test placeholder');
   });
 
-  it('sets "label" on vaadin-number-field from "label" on itself', async () => {
+  it('sets "step" on vaadin-number-field from "step" on itself in standalone mode', async () => {
+    const layout = html`<test-internal-number-control></test-internal-number-control>`;
+    const control = await fixture<TestControl>(layout);
+    const field = control.renderRoot.querySelector('vaadin-number-field')!;
+
+    expect(field).to.have.attribute('step', '1');
+
+    control.step = 5;
+    await control.requestUpdate();
+
+    expect(field).to.have.attribute('step', '5');
+  });
+
+  it('sets "label" on vaadin-number-field from "label" on itself in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -123,7 +146,7 @@ describe('InternalNumberControl', () => {
     expect(field).to.have.property('label', 'test label');
   });
 
-  it('sets "disabled" on vaadin-number-field from "disabled" on itself', async () => {
+  it('sets "disabled" on vaadin-number-field from "disabled" on itself in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -137,7 +160,7 @@ describe('InternalNumberControl', () => {
     expect(field).to.have.property('disabled', false);
   });
 
-  it('sets "readonly" on vaadin-number-field from "readonly" on itself', async () => {
+  it('sets "readonly" on vaadin-number-field from "readonly" on itself in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -151,7 +174,7 @@ describe('InternalNumberControl', () => {
     expect(field).to.have.property('readonly', false);
   });
 
-  it('sets "checkValidity" on vaadin-number-field from "_checkValidity" on itself', async () => {
+  it('sets "checkValidity" on vaadin-number-field from "_checkValidity" on itself in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -159,7 +182,7 @@ describe('InternalNumberControl', () => {
     expect(field).to.have.property('checkValidity', get(control, '_checkValidity'));
   });
 
-  it('sets "value" on vaadin-number-field from "_value" on itself', async () => {
+  it('sets "value" on vaadin-number-field from "_value" on itself in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -172,7 +195,7 @@ describe('InternalNumberControl', () => {
     expect(field).to.have.property('value', '12.34');
   });
 
-  it('writes to "_value" on change', async () => {
+  it('writes to "_value" on input in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -185,7 +208,7 @@ describe('InternalNumberControl', () => {
     expect(control).to.have.property('testValue', 12.34);
   });
 
-  it('submits the host nucleon form on Enter', async () => {
+  it('submits the host nucleon form on Enter in standalone mode', async () => {
     const layout = html`<test-internal-number-control></test-internal-number-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-number-field')!;
@@ -196,4 +219,166 @@ describe('InternalNumberControl', () => {
 
     submitMethod.restore();
   });
+
+  it('renders label in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('label');
+
+    control.label = 'Foo bar';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('label');
+    expect(control.renderRoot).to.include.text('Foo bar');
+  });
+
+  it('renders helper text in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('helper_text');
+
+    control.helperText = 'Test helper text';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('helper_text');
+    expect(control.renderRoot).to.include.text('Test helper text');
+  });
+
+  it('renders error text in summary item layout if available', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    expect(control.renderRoot).to.not.include.text('Test error message');
+
+    control.testErrorMessage = 'Test error message';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.include.text('Test error message');
+  });
+
+  it('renders text input in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    const vaadinTextField = control.renderRoot.querySelector('vaadin-number-field');
+    expect(vaadinTextField).to.be.null;
+
+    const input = control.renderRoot.querySelector('input');
+    expect(input).to.not.be.null;
+    expect(input).to.have.attribute('type', 'number');
+  });
+
+  it('sets "disabled" on input from "disabled" on itself in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('disabled', false);
+
+    control.disabled = true;
+    await control.requestUpdate();
+
+    expect(input).to.have.property('disabled', true);
+
+    control.disabled = false;
+    await control.requestUpdate();
+
+    expect(input).to.have.property('disabled', false);
+  });
+
+  it('sets "readonly" on input from "readonly" on itself in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('readOnly', false);
+
+    control.readonly = true;
+    await control.requestUpdate();
+
+    expect(input).to.have.property('readOnly', true);
+
+    control.readonly = false;
+    await control.requestUpdate();
+
+    expect(input).to.have.property('readOnly', false);
+  });
+
+  it('sets "placeholder" on input from "placeholder" on itself in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('placeholder', 'placeholder');
+
+    control.placeholder = 'Test placeholder';
+    await control.requestUpdate();
+
+    expect(input).to.have.property('placeholder', 'Test placeholder');
+  });
+
+  it('sets "step" on input from "step" on itself in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.not.have.attribute('step');
+
+    control.step = 5;
+    await control.requestUpdate();
+
+    expect(input).to.have.attribute('step', '5');
+  });
+
+  it('sets "value" on input from "_value" on itself in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('value', '');
+
+    control.testValue = 12.34;
+    await control.requestUpdate();
+
+    expect(input).to.have.property('value', '12.34');
+  });
+
+  it('writes to "_value" on input in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('value', '');
+
+    input.value = '12.34';
+    input.dispatchEvent(new CustomEvent('input'));
+
+    expect(control).to.have.property('testValue', 12.34);
+  });
+
+  it('submits the host nucleon form on Enter in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-number-control layout="summary-item"></test-internal-number-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    const submitMethod = stub(control.nucleon, 'submit');
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(submitMethod).to.have.been.calledOnce;
+
+    submitMethod.restore();
+  });
 });
diff --git a/src/elements/internal/InternalNumberControl/InternalNumberControl.ts b/src/elements/internal/InternalNumberControl/InternalNumberControl.ts
index 7ddfd4ff4..fe2a0c0eb 100644
--- a/src/elements/internal/InternalNumberControl/InternalNumberControl.ts
+++ b/src/elements/internal/InternalNumberControl/InternalNumberControl.ts
@@ -1,9 +1,10 @@
-import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';
 import type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-field';
 
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+import { html, css, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-element';
+import { classMap } from '../../../utils/class-map';
 
 /**
  * Internal control displaying a basic number box.
@@ -15,22 +16,63 @@ export class InternalNumberControl extends InternalEditableControl {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
+      layout: {},
       prefix: {},
       suffix: {},
+      step: { type: Number },
       min: { type: Number },
       max: { type: Number },
+      __isErrorVisible: { attribute: false },
     };
   }
 
+  static get styles(): CSSResultArray {
+    return [
+      ...super.styles,
+      css`
+        input::-webkit-contacts-auto-fill-button {
+          visibility: hidden;
+          display: none !important;
+          pointer-events: none;
+          position: absolute;
+          right: 0;
+        }
+
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        input {
+          -moz-appearance: textfield;
+        }
+      `,
+    ];
+  }
+
+  layout: 'summary-item' | 'standalone' | null = null;
+
   prefix: string | null = null;
 
   suffix: string | null = null;
 
+  step: number | null = null;
+
   min: number | null = null;
 
   max: number | null = null;
 
+  private __isErrorVisible = false;
+
+  reportValidity(): void {
+    this.__isErrorVisible = true;
+    super.reportValidity();
+  }
+
   renderControl(): TemplateResult {
+    if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();
+
     return html`
       <vaadin-number-field
         error-message=${ifDefined(this._errorMessage)}
@@ -38,6 +80,7 @@ export class InternalNumberControl extends InternalEditableControl {
         helper-text=${this.helperText}
         label=${this.label}
         class="w-full"
+        step=${ifDefined(this.step ?? undefined)}
         min=${ifDefined(this.min ?? undefined)}
         max=${ifDefined(this.max ?? undefined)}
         ?disabled=${this.disabled}
@@ -56,4 +99,82 @@ export class InternalNumberControl extends InternalEditableControl {
       </vaadin-number-field>
     `;
   }
+
+  private __renderSummaryItemLayout() {
+    const sharedTextStyles = {
+      'text-disabled': this.disabled,
+      'text-tertiary': !this.readonly && !this.disabled,
+      'font-medium': !this.readonly,
+    };
+    return html`
+      <div class="flex items-start gap-m leading-xs">
+        <div>
+          <label class="text-m text-body" for="input">${this.label}</label>
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p
+            class="text-xs text-error"
+            ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
+          >
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        <div class="flex-1 flex items-center gap-xs">
+          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
+            ${this.prefix}
+          </span>
+
+          <input
+            placeholder=${this.placeholder}
+            style="min-width: 10ch"
+            class=${classMap({
+              'w-full appearance-none text-right bg-transparent transition-colors': true,
+              'text-m rounded-s focus-outline-none': true,
+              'text-secondary': this.readonly,
+              'text-disabled': this.disabled,
+              'font-medium': !this.readonly,
+            })}
+            type="number"
+            step=${ifDefined(this.step ?? void 0)}
+            min=${ifDefined(this.min ?? void 0)}
+            max=${ifDefined(this.max ?? void 0)}
+            id="input"
+            .value=${this._value === 0 ? '' : this._value}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}
+            @blur=${() => (this.__isErrorVisible = true)}
+            @input=${(evt: Event) => {
+              evt.stopPropagation();
+              const newValue = parseFloat((evt.target as HTMLInputElement).value);
+              this._value = isNaN(newValue) ? 0 : newValue;
+            }}
+          />
+
+          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
+            ${this.suffix}
+          </span>
+
+          <button
+            aria-label=${this.t('clear')}
+            class=${classMap({
+              'flex-shrink-0 rounded-full transition-colors': true,
+              'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+              'cursor-pointer text-tertiary hover-text-body': !this.disabled,
+              'cursor-default text-disabled': this.disabled,
+            })}
+            style="width: 1em; height: 1em;"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly || !this._value}
+            @click=${() => {
+              this._value = 0;
+              this.dispatchEvent(new CustomEvent('clear'));
+            }}
+          >
+            ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`}
+          </button>
+        </div>
+      </div>
+    `;
+  }
 }
diff --git a/src/elements/internal/InternalPasswordControl/InternalPasswordControl.test.ts b/src/elements/internal/InternalPasswordControl/InternalPasswordControl.test.ts
index 1ce9514b3..3e9667b62 100644
--- a/src/elements/internal/InternalPasswordControl/InternalPasswordControl.test.ts
+++ b/src/elements/internal/InternalPasswordControl/InternalPasswordControl.test.ts
@@ -244,11 +244,12 @@ describe('InternalTextControl', () => {
     expect(control.testValue).to.match(/^[a-zA-Z0-9]{6}-[a-zA-Z0-9]{6}-[a-zA-Z0-9]{6}$/);
 
     control.generatorOptions = {
+      separator: '|',
       charset: 'abcdefghijklmnopqrstuvwxyz0123456789',
       length: 12,
     };
 
     button.click();
-    expect(control.testValue).to.match(/^[a-z0-9]{6}-[a-z0-9]{6}$/);
+    expect(control.testValue).to.match(/^[a-z0-9]{6}\|[a-z0-9]{6}$/);
   });
 });
diff --git a/src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts b/src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts
index faa065490..0e75c7f5b 100644
--- a/src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts
+++ b/src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts
@@ -1,5 +1,6 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';
+import type { GeneratorOptions } from './generateRandomPassword';
 
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 import { generateRandomPassword } from './generateRandomPassword';
@@ -22,7 +23,7 @@ export class InternalPasswordControl extends InternalEditableControl {
     };
   }
 
-  generatorOptions: null | { length?: number; charset?: string } = null;
+  generatorOptions: null | GeneratorOptions = null;
 
   /** If true, renders the password generator button. */
   showGenerator = false;
diff --git a/src/elements/internal/InternalPasswordControl/generateRandomPassword.ts b/src/elements/internal/InternalPasswordControl/generateRandomPassword.ts
index 97350751a..5b9418c22 100644
--- a/src/elements/internal/InternalPasswordControl/generateRandomPassword.ts
+++ b/src/elements/internal/InternalPasswordControl/generateRandomPassword.ts
@@ -1,10 +1,13 @@
-export function generateRandomPassword(opts?: { length?: number; charset?: string }): string {
+export type GeneratorOptions = { length?: number; charset?: string; separator?: string };
+
+export function generateRandomPassword(opts?: GeneratorOptions): string {
+  const separator = opts?.separator ?? '-';
   const charset = opts?.charset ?? 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   const length = opts?.length ?? 18;
   let result = '';
 
   for (let i = 0; i < length; i++) {
-    if (i > 0 && i % 6 === 0) result += '-';
+    if (separator && i > 0 && i % 6 === 0) result += separator;
     result += charset[Math.floor(Math.random() * charset.length)];
   }
 
diff --git a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts
index 9254d6e89..80d721b99 100644
--- a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts
+++ b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts
@@ -2,12 +2,24 @@ import './index';
 
 import { InternalResourcePickerControlForm as Form } from './InternalResourcePickerControlForm';
 import { InternalResourcePickerControl as Control } from './InternalResourcePickerControl';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { NucleonElement } from '../../public/NucleonElement/NucleonElement';
 import { FetchEvent } from '../../public/NucleonElement/FetchEvent';
+import { FormDialog } from '../../public/FormDialog/FormDialog';
 import { Type } from '../../public/QueryBuilder/types';
 import { stub } from 'sinon';
-import { FormDialog } from '../../public';
-import { getByKey } from '../../../testgen/getByKey';
+import { createRouter } from '../../../server';
+
+async function waitForIdle(element: Control) {
+  await waitUntil(
+    () => {
+      const loaders = element.renderRoot.querySelectorAll<NucleonElement<any>>('foxy-nucleon');
+      return [...loaders].every(loader => loader.in('idle'));
+    },
+    '',
+    { timeout: 5000 }
+  );
+}
 
 describe('InternalResourcePickerControl', () => {
   it('imports and defines foxy-internal-editable-control element', () => {
@@ -26,6 +38,14 @@ describe('InternalResourcePickerControl', () => {
     expect(customElements.get('foxy-form-dialog')).to.exist;
   });
 
+  it('imports and defines foxy-nucleon element', () => {
+    expect(customElements.get('foxy-nucleon')).to.exist;
+  });
+
+  it('imports and defines foxy-i18n element', () => {
+    expect(customElements.get('foxy-i18n')).to.exist;
+  });
+
   it('defines itself as foxy-internal-resource-picker-control', () => {
     expect(customElements.get('foxy-internal-resource-picker-control')).to.equal(Control);
   });
@@ -34,16 +54,35 @@ describe('InternalResourcePickerControl', () => {
     expect(new Control()).to.be.instanceOf(customElements.get('foxy-internal-editable-control'));
   });
 
+  it('has a reactive property "getDisplayValueOptions"', () => {
+    expect(Control).to.have.deep.nested.property('properties.getDisplayValueOptions', {
+      attribute: false,
+    });
+
+    const resource = { _links: { self: { href: 'https://demo.api/virtual/empty' } } };
+    expect(new Control().getDisplayValueOptions(resource)).to.deep.equal({ resource });
+  });
+
   it('has a reactive property "virtualHost"', () => {
     expect(Control).to.have.deep.nested.property('properties.virtualHost', {});
     expect(new Control()).to.have.property('virtualHost').that.is.a('string');
   });
 
+  it('has a reactive property "formProps"', () => {
+    expect(Control).to.have.deep.nested.property('properties.formProps', { type: Object });
+    expect(new Control()).to.have.deep.property('formProps', {});
+  });
+
   it('has a reactive property "filters"', () => {
     expect(Control).to.have.deep.nested.property('properties.filters', { type: Array });
     expect(new Control()).to.have.deep.property('filters', []);
   });
 
+  it('has a reactive property "layout"', () => {
+    expect(Control).to.have.deep.nested.property('properties.layout', {});
+    expect(new Control()).to.have.deep.property('layout', null);
+  });
+
   it('has a reactive property "first"', () => {
     expect(Control).to.have.deep.nested.property('properties.first', {});
     expect(new Control()).to.have.deep.property('first', null);
@@ -54,7 +93,12 @@ describe('InternalResourcePickerControl', () => {
     expect(new Control()).to.have.deep.property('item', null);
   });
 
-  it('renders label', async () => {
+  it('has a reactive property "form"', () => {
+    expect(Control).to.have.deep.nested.property('properties.form', {});
+    expect(new Control()).to.have.deep.property('form', null);
+  });
+
+  it('renders label in standalone layout', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-resource-picker-control></foxy-internal-resource-picker-control>
     `);
@@ -68,7 +112,23 @@ describe('InternalResourcePickerControl', () => {
     expect(control.renderRoot).to.include.text('Foo bar');
   });
 
-  it('renders helper text', async () => {
+  it('renders label in summary item layout', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-resource-picker-control
+        layout="summary-item"
+      ></foxy-internal-resource-picker-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('label');
+
+    control.label = 'Foo bar';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('label');
+    expect(control.renderRoot).to.include.text('Foo bar');
+  });
+
+  it('renders helper text in standalone layout', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-resource-picker-control></foxy-internal-resource-picker-control>
     `);
@@ -82,7 +142,23 @@ describe('InternalResourcePickerControl', () => {
     expect(control.renderRoot).to.include.text('Test helper text');
   });
 
-  it('renders error text if available', async () => {
+  it('render helper text in summary item layout', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-resource-picker-control
+        layout="summary-item"
+      ></foxy-internal-resource-picker-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('helper_text');
+
+    control.helperText = 'Test helper text';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('helper_text');
+    expect(control.renderRoot).to.include.text('Test helper text');
+  });
+
+  it('renders error text  in standalone layout if available', async () => {
     let control = await fixture<Control>(html`
       <foxy-internal-resource-picker-control></foxy-internal-resource-picker-control>
     `);
@@ -102,6 +178,28 @@ describe('InternalResourcePickerControl', () => {
     expect(control.renderRoot).to.include.text('Test error message');
   });
 
+  it('renders error text in summary item layout if available', async () => {
+    let control = await fixture<Control>(html`
+      <foxy-internal-resource-picker-control
+        layout="summary-item"
+      ></foxy-internal-resource-picker-control>
+    `);
+
+    expect(control.renderRoot).to.not.include.text('Test error message');
+
+    customElements.define(
+      'x-test-control-2',
+      class extends Control {
+        protected get _errorMessage() {
+          return 'Test error message';
+        }
+      }
+    );
+
+    control = await fixture<Control>(html`<x-test-control-2></x-test-control-2>`);
+    expect(control.renderRoot).to.include.text('Test error message');
+  });
+
   it('renders a form dialog that sends changes to host Nucleon on submit', async () => {
     let value = '';
 
@@ -121,8 +219,9 @@ describe('InternalResourcePickerControl', () => {
 
     expect(dialog).to.exist;
     expect(dialog).to.have.attribute('parent', `foxy://${control.virtualHost}/select`);
+    expect(dialog).to.have.attribute('header', 'header');
     expect(dialog).to.have.attribute('infer', 'dialog');
-    expect(dialog).to.have.attribute('form', 'foxy-internal-resource-picker-control-form');
+    expect(dialog).to.have.property('form', 'foxy-internal-resource-picker-control-form');
     expect(dialog).to.have.attribute('alert');
     expect(dialog).to.have.deep.property('props', {
       '.selectionProps': {
@@ -152,7 +251,27 @@ describe('InternalResourcePickerControl', () => {
     expect(value).to.equal('https://demo.api/hapi/customers/0');
   });
 
-  it('renders item as a button that opens a dialog on click', async () => {
+  it('renders a custom form in form dialog', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-resource-picker-control form="my-custom-form">
+      </foxy-internal-resource-picker-control>
+    `);
+
+    const dialog = control.renderRoot.querySelector('foxy-form-dialog')!;
+    expect(dialog).to.have.property('form', 'my-custom-form');
+  });
+
+  it('adds custom props to form dialog', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-resource-picker-control .formProps=${{ foo: 'bar' }}>
+      </foxy-internal-resource-picker-control>
+    `);
+
+    const dialog = control.renderRoot.querySelector('foxy-form-dialog')!;
+    expect(dialog).to.have.nested.property('props.foo', 'bar');
+  });
+
+  it('renders item as a button that opens a dialog on click in standalone layout', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-resource-picker-control
         infer=""
@@ -183,7 +302,76 @@ describe('InternalResourcePickerControl', () => {
     expect(item).to.have.attribute('href', 'https://demo.api/hapi/customers/0');
   });
 
-  it('disables button when control is disabled', async () => {
+  it('renders a custom button that opens a dialog on click in summary item layout', async () => {
+    const router = createRouter();
+
+    const control = await fixture<Control>(html`
+      <foxy-internal-resource-picker-control
+        placeholder="Test Placeholder"
+        layout="summary-item"
+        infer=""
+        first="https://demo.api/hapi/customers"
+        item="foxy-customer-card"
+        .getDisplayValueOptions=${() => ({ foo: 'bar' })}
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-internal-resource-picker-control>
+    `);
+
+    const selectBtn = control.renderRoot.querySelector<HTMLButtonElement>(
+      'button[aria-label="select"]'
+    )!;
+
+    const dialog = control.renderRoot.querySelector('foxy-form-dialog') as FormDialog;
+    const showMethod = stub(dialog, 'show');
+
+    expect(selectBtn).to.exist;
+    expect(selectBtn).to.include.text('Test Placeholder');
+
+    control.getValue = () => 'https://demo.api/hapi/customers/0';
+    await control.requestUpdate();
+    await waitForIdle(control);
+    const label = selectBtn.querySelector('foxy-i18n')!;
+
+    expect(label).to.exist;
+    expect(label).to.have.attribute('infer', '');
+    expect(label).to.have.attribute('key', 'value');
+    expect(label).to.have.deep.property('options', { foo: 'bar' });
+    expect(selectBtn).to.not.include.text('Test Placeholder');
+
+    selectBtn.click();
+    expect(showMethod).to.have.been.calledOnceWith(selectBtn);
+  });
+
+  it('renders a Clear button in summary item layout if value is set', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-resource-picker-control
+        layout="summary-item"
+        infer=""
+        first="https://demo.api/hapi/customers"
+        item="foxy-customer-card"
+      >
+      </foxy-internal-resource-picker-control>
+    `);
+
+    let clearBtn = control.renderRoot.querySelector<HTMLButtonElement>(
+      'button[aria-label="clear"]'
+    )!;
+    expect(clearBtn).to.have.attribute('hidden');
+
+    control.getValue = () => 'https://demo.api/hapi/customers/0';
+    await control.requestUpdate();
+
+    clearBtn = control.renderRoot.querySelector<HTMLButtonElement>('button[aria-label="clear"]')!;
+    expect(clearBtn).to.not.have.attribute('hidden');
+
+    const setValueStub = stub();
+    control.setValue = setValueStub;
+    clearBtn.click();
+    expect(setValueStub).to.have.been.calledOnceWith('');
+  });
+
+  it('disables button when control is disabled in standalone layout', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-resource-picker-control disabled></foxy-internal-resource-picker-control>
     `);
@@ -192,7 +380,19 @@ describe('InternalResourcePickerControl', () => {
     expect(button).to.have.attribute('disabled');
   });
 
-  it('disables button when control is readonly', async () => {
+  it('disables buttons when control is disabled in summary item layout', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-resource-picker-control
+        layout="summary-item"
+        disabled
+      ></foxy-internal-resource-picker-control>
+    `);
+
+    const buttons = control.renderRoot.querySelectorAll('button');
+    buttons.forEach(button => expect(button).to.have.attribute('disabled'));
+  });
+
+  it('disables button when control is readonly in standalone layout', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-resource-picker-control readonly></foxy-internal-resource-picker-control>
     `);
@@ -201,6 +401,26 @@ describe('InternalResourcePickerControl', () => {
     expect(button).to.have.attribute('disabled');
   });
 
+  it('disables select button and hides clear button when control is readonly in summary item layout', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-resource-picker-control
+        layout="summary-item"
+        readonly
+      ></foxy-internal-resource-picker-control>
+    `);
+
+    const selectBtn = control.renderRoot.querySelector<HTMLButtonElement>(
+      'button[aria-label="select"]'
+    )!;
+
+    const clearBtn = control.renderRoot.querySelector<HTMLButtonElement>(
+      'button[aria-label="clear"]'
+    )!;
+
+    expect(selectBtn).to.have.attribute('disabled');
+    expect(clearBtn).to.have.attribute('hidden');
+  });
+
   describe('InternalResourcePickerControlForm', () => {
     it('defines itself as foxy-internal-resource-picker-control-form', () => {
       expect(customElements.get('foxy-internal-resource-picker-control-form')).to.equal(Form);
@@ -219,16 +439,6 @@ describe('InternalResourcePickerControl', () => {
       expect(form.errors).to.not.include('silent:selection_required');
     });
 
-    it('renders a header', async () => {
-      const form = await fixture<Form>(
-        html`<foxy-internal-resource-picker-control-form></foxy-internal-resource-picker-control-form>`
-      );
-
-      const header = await getByKey(form, 'header');
-      expect(header).to.exist;
-      expect(header).to.have.attribute('infer', '');
-    });
-
     it('renders an async list control for selection', async () => {
       const form = await fixture<Form>(
         html`
diff --git a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
index f6fe14fd5..1edd5afeb 100644
--- a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
+++ b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
@@ -1,36 +1,54 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { HALJSONResource } from '../../public/NucleonElement/types';
+import type { NucleonElement } from '../../public/NucleonElement/NucleonElement';
+import type { FormRenderer } from '../../public/FormDialog/types';
 import type { ItemRenderer } from '../../public/CollectionPage/types';
 import type { FormDialog } from '../../public/FormDialog/FormDialog';
 import type { Option } from '../../public/QueryBuilder/types';
 
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 import { FetchEvent } from '../../public/NucleonElement/FetchEvent';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html, svg } from 'lit-html';
 import { classMap } from '../../../utils/class-map';
 import { uniqueId } from 'lodash-es';
 import { spread } from '@open-wc/lit-helpers';
-import { html } from 'lit-html';
 
 import memoize from 'lodash-es/memoize';
 
+type DisplayValueOptionsCb = (resource: HALJSONResource) => Record<string, unknown>;
+
 export class InternalResourcePickerControl extends InternalEditableControl {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
+      getDisplayValueOptions: { attribute: false },
       virtualHost: {},
+      formProps: { type: Object },
       filters: { type: Array },
+      layout: {},
       first: {},
       item: {},
+      form: {},
     };
   }
 
+  getDisplayValueOptions: DisplayValueOptionsCb = resource => ({ resource });
+
   virtualHost = uniqueId('internal-resource-picker-control-');
 
+  formProps: Record<string, unknown> = {};
+
   filters: Option[] = [];
 
+  layout: 'summary-item' | 'standalone' | null = null;
+
   first: string | null = null;
 
   item: string | null = null;
 
+  form: string | null | FormRenderer = null;
+
   private readonly __getItemRenderer = memoize((item: string | null) => {
     return new Function(
       'ctx',
@@ -47,23 +65,118 @@ export class InternalResourcePickerControl extends InternalEditableControl {
   });
 
   renderControl(): TemplateResult {
+    const dialogProps = {
+      ...this.formProps,
+      '.selectionProps': { '.filters': this.filters, '.first': this.first, '.item': this.item },
+    };
+
     return html`
       <foxy-form-dialog
         parent="foxy://${this.virtualHost}/select"
+        header="header"
         infer="dialog"
-        form="foxy-internal-resource-picker-control-form"
         alert
-        .props=${{
-          '.selectionProps': {
-            '.filters': this.filters,
-            '.first': this.first,
-            '.item': this.item,
-          },
-        }}
+        .props=${dialogProps}
+        .form=${this.form ?? 'foxy-internal-resource-picker-control-form'}
         @fetch=${this.__handleFetchEvent}
       >
       </foxy-form-dialog>
 
+      ${this.layout === 'summary-item'
+        ? this.__renderSummaryItemLayout()
+        : this.__renderStandaloneLayout()}
+    `;
+  }
+
+  updated(changes: Map<keyof this, unknown>): void {
+    super.updated(changes);
+    if (changes.has('item')) this.__getItemRenderer.cache.clear?.();
+  }
+
+  private __renderSummaryItemLayout() {
+    const resource = this.renderRoot.querySelector<NucleonElement<any>>('#value');
+    const onClick = (evt: Event) => {
+      if (this.disabled || this.readonly) return;
+      const button = evt.currentTarget as HTMLButtonElement;
+      const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;
+
+      dialog.href = '';
+      dialog.show(button);
+    };
+
+    return html`
+      <div class="flex items-start leading-xs gap-m">
+        <div class="flex-1">
+          <div class="text-m text-body whitespace-nowrap">${this.label}</div>
+          <div class="text-s text-secondary">${this.helperText}</div>
+          <div class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </div>
+        </div>
+
+        <div class="flex items-center gap-xs">
+          <button
+            aria-label=${this.t('select')}
+            class=${classMap({
+              'text-right min-w-0 transition-colors transition-opacity': true,
+              'rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+              'text-secondary': this.readonly,
+              'text-disabled': this.disabled,
+              'cursor-pointer text-body hover-opacity-80': !this.disabled && !this.readonly,
+              'font-medium': !this.readonly,
+            })}
+            ?disabled=${this.disabled || this.readonly}
+            @click=${onClick}
+          >
+            <div class="truncate min-w-0">
+              ${this._value
+                ? html`
+                    <foxy-i18n
+                      infer=""
+                      key="value"
+                      .options=${resource?.data
+                        ? this.getDisplayValueOptions(resource.data)
+                        : { context: resource?.in('fail') ? 'fail' : 'busy' }}
+                    >
+                    </foxy-i18n>
+                  `
+                : this.placeholder}
+            </div>
+          </button>
+
+          <button
+            aria-label=${this.t('clear')}
+            class=${classMap({
+              'rounded-full transition-colors': true,
+              'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+              'cursor-pointer text-tertiary hover-text-body': !this.disabled,
+              'cursor-default text-disabled': this.disabled,
+            })}
+            style="width: 1em; height: 1em;"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly || !this._value}
+            @click=${() => {
+              this._value = '';
+              this.dispatchEvent(new CustomEvent('clear'));
+            }}
+          >
+            ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`}
+          </button>
+        </div>
+      </div>
+
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(this._value || void 0)}
+        id="value"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+    `;
+  }
+
+  private __renderStandaloneLayout() {
+    return html`
       <div class="block group">
         <div
           class=${classMap({
@@ -144,11 +257,6 @@ export class InternalResourcePickerControl extends InternalEditableControl {
     `;
   }
 
-  updated(changes: Map<keyof this, unknown>): void {
-    super.updated(changes);
-    if (changes.has('item')) this.__getItemRenderer.cache.clear?.();
-  }
-
   private __handleFetchEvent(event: Event) {
     if (!(event instanceof FetchEvent)) return;
     if (event.defaultPrevented) return;
@@ -164,7 +272,9 @@ export class InternalResourcePickerControl extends InternalEditableControl {
     }
   }
 
-  private async __handleEmpty(): Promise<Response> {
+  private async __handleSelect(request: Request): Promise<Response> {
+    const body = (await request.clone().json()) as { selection: string };
+    this._value = body.selection;
     return new Response(
       JSON.stringify({
         _links: { self: { href: `foxy://${this.virtualHost}/empty` } },
@@ -173,9 +283,7 @@ export class InternalResourcePickerControl extends InternalEditableControl {
     );
   }
 
-  private async __handleSelect(request: Request): Promise<Response> {
-    const body = (await request.clone().json()) as { selection: string };
-    this._value = body.selection;
+  private async __handleEmpty(): Promise<Response> {
     return new Response(
       JSON.stringify({
         _links: { self: { href: `foxy://${this.virtualHost}/empty` } },
diff --git a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.ts b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.ts
index 862d8151f..3ae5fa763 100644
--- a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.ts
+++ b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.ts
@@ -23,10 +23,6 @@ export class InternalResourcePickerControlForm extends InternalForm<Data> {
 
   renderBody(): TemplateResult {
     return html`
-      <h2 class="leading-xs text-xxl font-medium break-all">
-        <foxy-i18n infer="" key="header"></foxy-i18n>
-      </h2>
-
       <foxy-internal-async-list-control
         infer="selection"
         form="foxy-null"
diff --git a/src/elements/internal/InternalResourcePickerControl/index.ts b/src/elements/internal/InternalResourcePickerControl/index.ts
index c59a15a77..340c64805 100644
--- a/src/elements/internal/InternalResourcePickerControl/index.ts
+++ b/src/elements/internal/InternalResourcePickerControl/index.ts
@@ -2,7 +2,9 @@ import '../InternalAsyncListControl/index';
 import '../InternalEditableControl/index';
 import '../InternalForm/index';
 
+import '../../public/NucleonElement/index';
 import '../../public/FormDialog/index';
+import '../../public/I18n/index';
 
 import { InternalResourcePickerControlForm } from './InternalResourcePickerControlForm';
 import { InternalResourcePickerControl } from './InternalResourcePickerControl';
diff --git a/src/elements/internal/InternalSelectControl/InternalSelectControl.test.ts b/src/elements/internal/InternalSelectControl/InternalSelectControl.test.ts
index 2642a856c..45abde494 100644
--- a/src/elements/internal/InternalSelectControl/InternalSelectControl.test.ts
+++ b/src/elements/internal/InternalSelectControl/InternalSelectControl.test.ts
@@ -70,13 +70,18 @@ describe('InternalSelectControl', () => {
     expect(new Control()).to.have.deep.property('options', []);
   });
 
+  it('defines a reactive property for "layout" (String)', () => {
+    expect(Control).to.have.deep.nested.property('properties.layout', {});
+    expect(new Control()).to.have.property('layout', null);
+  });
+
   it('defines a reactive property for "theme" (String)', () => {
     expect(Control).to.have.nested.property('properties.theme.type', String);
     expect(Control).to.not.have.nested.property('properties.theme.attribute');
     expect(new Control()).to.have.property('theme', null);
   });
 
-  it('renders vaadin-combo-box element', async () => {
+  it('renders vaadin-combo-box element in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box');
@@ -87,7 +92,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.attribute('item-id-path', 'value');
   });
 
-  it('sets "errorMessage" on vaadin-combo-box from "_errorMessage" on itself', async () => {
+  it('sets "errorMessage" on vaadin-combo-box from "_errorMessage" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -100,7 +105,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.property('errorMessage', 'test error message');
   });
 
-  it('sets "helperText" on vaadin-combo-box from "helperText" on itself', async () => {
+  it('sets "helperText" on vaadin-combo-box from "helperText" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -113,7 +118,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.property('helperText', 'test helper text');
   });
 
-  it('sets "placeholder" on vaadin-combo-box from "placeholder" on itself', async () => {
+  it('sets "placeholder" on vaadin-combo-box from "placeholder" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -126,7 +131,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.property('placeholder', 'test placeholder');
   });
 
-  it('sets "label" on vaadin-combo-box from "label" on itself', async () => {
+  it('sets "label" on vaadin-combo-box from "label" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -139,7 +144,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.property('label', 'test label');
   });
 
-  it('sets "theme" on vaadin-combo-box from "theme" on itself', async () => {
+  it('sets "theme" on vaadin-combo-box from "theme" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -152,7 +157,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.attribute('theme', 'foo bar baz');
   });
 
-  it('sets translated "items" on vaadin-combo-box from "options" on itself', async () => {
+  it('sets translated "items" on vaadin-combo-box from "options" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
 
@@ -167,7 +172,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.deep.property('items', [{ label: 'i18n_test', value: 'test' }]);
   });
 
-  it('sets "items" with raw label text on vaadin-combo-box from "options" on itself', async () => {
+  it('sets "items" with raw label text on vaadin-combo-box from "options" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -179,7 +184,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.deep.property('items', [{ label: 'foo bar', value: 'test' }]);
   });
 
-  it('sets "disabled" on vaadin-combo-box from "disabled" on itself', async () => {
+  it('sets "disabled" on vaadin-combo-box from "disabled" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -193,7 +198,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.property('disabled', false);
   });
 
-  it('sets "readonly" on vaadin-combo-box from "readonly" on itself', async () => {
+  it('sets "readonly" on vaadin-combo-box from "readonly" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -207,7 +212,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.property('readonly', false);
   });
 
-  it('sets "checkValidity" on vaadin-combo-box from "_checkValidity" on itself', async () => {
+  it('sets "checkValidity" on vaadin-combo-box from "_checkValidity" on itself in standalone layout', async () => {
     const layout = html`<test-internal-select-control></test-internal-select-control>`;
     const control = await fixture<TestControl>(layout);
     const comboBox = control.renderRoot.querySelector('vaadin-combo-box')!;
@@ -215,7 +220,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.property('checkValidity', get(control, '_checkValidity'));
   });
 
-  it('sets "value" on vaadin-combo-box from "_value" on itself', async () => {
+  it('sets "value" on vaadin-combo-box from "_value" on itself in standalone layout', async () => {
     const control = await fixture<TestControl>(html`
       <test-internal-select-control .options=${[{ label: 'test', value: 'test_value' }]}>
       </test-internal-select-control>
@@ -230,7 +235,7 @@ describe('InternalSelectControl', () => {
     expect(comboBox).to.have.property('value', 'test_value');
   });
 
-  it('writes to "_value" on change', async () => {
+  it('writes to "_value" on change in standalone layout', async () => {
     const control = await fixture<TestControl>(html`
       <test-internal-select-control .options=${[{ label: 'test', value: 'test_value' }]}>
       </test-internal-select-control>
@@ -244,4 +249,134 @@ describe('InternalSelectControl', () => {
 
     expect(control).to.have.property('testValue', 'test_value');
   });
+
+  it('renders label in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-select-control layout="summary-item"></test-internal-select-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('label');
+
+    control.label = 'Foo bar';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('label');
+    expect(control.renderRoot).to.include.text('Foo bar');
+  });
+
+  it('render helper text in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-select-control layout="summary-item"></test-internal-select-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('helper_text');
+
+    control.helperText = 'Test helper text';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('helper_text');
+    expect(control.renderRoot).to.include.text('Test helper text');
+  });
+
+  it('renders error text in summary item layout if available', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-select-control layout="summary-item"></test-internal-select-control>
+    `);
+
+    expect(control.renderRoot).to.not.include.text('Test error message');
+
+    control.testErrorMessage = 'Test error message';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.include.text('Test error message');
+  });
+
+  it('renders a select with options in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-select-control
+        placeholder="Test Placeholder"
+        layout="summary-item"
+        .options=${[
+          { label: 'test', value: 'test_value_1' },
+          { rawLabel: 'foo bar', value: 'test_value_2' },
+        ]}
+      >
+      </test-internal-select-control>
+    `);
+
+    const select = control.renderRoot.querySelector('select')!;
+    expect(select.options).to.have.length(3);
+
+    expect(select.options[0]).to.have.property('text', 'Test Placeholder');
+    expect(select.options[0]).to.have.property('value', '');
+    expect(select.options[0].selected).to.be.true;
+
+    expect(select.options[1]).to.have.property('text', 'test');
+    expect(select.options[1]).to.have.property('value', 'test_value_1');
+    expect(select.options[1].selected).to.be.false;
+
+    expect(select.options[2]).to.have.property('text', 'foo bar');
+    expect(select.options[2]).to.have.property('value', 'test_value_2');
+    expect(select.options[2].selected).to.be.false;
+
+    control.testValue = 'test_value_2';
+    await control.requestUpdate();
+
+    expect(select.options[0].selected).to.be.false;
+    expect(select.options[1].selected).to.be.false;
+    expect(select.options[2].selected).to.be.true;
+
+    select.options[1].selected = true;
+    select.dispatchEvent(new CustomEvent('change'));
+    expect(control).to.have.property('testValue', 'test_value_1');
+  });
+
+  it('renders the selected value in plain text in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-select-control
+        placeholder="Test Placeholder"
+        layout="summary-item"
+        .options=${[
+          { label: 'v1_key', value: 'test_value_1' },
+          { rawLabel: 'foo bar', value: 'test_value_2' },
+        ]}
+      >
+      </test-internal-select-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('Test Placeholder');
+
+    control.testValue = 'test_value_1';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.include.text('v1_key');
+  });
+
+  it('disables select when control is disabled in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-select-control layout="summary-item" disabled></test-internal-select-control>
+    `);
+
+    const select = control.renderRoot.querySelector('select')!;
+    expect(select).to.have.property('disabled', true);
+
+    control.disabled = false;
+    await control.requestUpdate();
+
+    expect(select).to.have.property('disabled', false);
+  });
+
+  it('hides select when control is readonly in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-select-control layout="summary-item" readonly></test-internal-select-control>
+    `);
+
+    const select = control.renderRoot.querySelector('select')!;
+    expect(select).to.have.attribute('hidden');
+
+    control.readonly = false;
+    await control.requestUpdate();
+
+    expect(select).to.not.have.attribute('hidden');
+  });
 });
diff --git a/src/elements/internal/InternalSelectControl/InternalSelectControl.ts b/src/elements/internal/InternalSelectControl/InternalSelectControl.ts
index b1115983b..1c5c4f9f0 100644
--- a/src/elements/internal/InternalSelectControl/InternalSelectControl.ts
+++ b/src/elements/internal/InternalSelectControl/InternalSelectControl.ts
@@ -4,10 +4,11 @@ import type { Option } from './types';
 
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-html';
+import { html, svg } from 'lit-html';
+import { classMap } from '../../../utils/class-map';
 
 /**
- * Internal control wrapper for `vaadin-select` element.
+ * Internal control wrapper for select elements.
  *
  * @since 1.21.0
  * @element foxy-internal-select-control
@@ -17,17 +18,26 @@ export class InternalSelectControl extends InternalEditableControl {
     return {
       ...super.properties,
       options: { type: Array },
+      layout: {},
       theme: { type: String },
+      __isErrorVisible: { attribute: false },
     };
   }
 
   /** List of radio buttons to render. */
   options: Option[] = [];
 
+  /** Standalone renders Vaadin Combo Box. Summary item renders a special UI for summary control. */
+  layout: 'summary-item' | 'standalone' | null = null;
+
   /** Same as the "theme" attribute/property of `vaadin-combo-box`. */
   theme: string | null = null;
 
+  private __isErrorVisible = false;
+
   renderControl(): TemplateResult {
+    if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();
+
     return html`
       <vaadin-combo-box
         item-value-path="value"
@@ -59,9 +69,85 @@ export class InternalSelectControl extends InternalEditableControl {
     `;
   }
 
+  reportValidity(): void {
+    this.__isErrorVisible = true;
+    super.reportValidity();
+  }
+
   updated(changes: Map<keyof this, unknown>): void {
     super.updated(changes);
     const comboBox = this.renderRoot.querySelector('vaadin-combo-box');
     if (comboBox && comboBox.value !== this._value) comboBox.value = this._value as string;
   }
+
+  private __renderSummaryItemLayout() {
+    const selection = this.options.find(v => v.value === this._value);
+
+    return html`
+      <div class="flex items-start leading-xs">
+        <div class="flex-1">
+          <label class="text-m text-body" for="select">${this.label}</label>
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p
+            class="text-xs text-error"
+            ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
+          >
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        <div
+          class=${classMap({
+            'relative rounded-s transition-colors transition-opacity': true,
+            'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,
+            'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'font-medium': !this.readonly,
+          })}
+        >
+          <div class="flex items-center gap-xs">
+            <div>
+              ${selection
+                ? 'label' in selection
+                  ? this.t(selection.label)
+                  : selection.rawLabel
+                : this.placeholder}
+            </div>
+            ${this.readonly
+              ? ''
+              : svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25)"><path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>`}
+          </div>
+
+          <select
+            class=${classMap({
+              'absolute inset-0 opacity-0': true,
+              'cursor-pointer': !this.disabled && !this.readonly,
+            })}
+            id="select"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly}
+            @blur=${() => (this.__isErrorVisible = true)}
+            @change=${(evt: Event) => {
+              evt.stopPropagation();
+              this._value = (evt.target as HTMLSelectElement).value;
+            }}
+          >
+            <option value="" ?selected=${!selection} disabled hidden>${this.placeholder}</option>
+            ${this.options.map(
+              option =>
+                html`
+                  <option
+                    value=${option.value}
+                    ?selected=${selection && option.value === this._value}
+                  >
+                    ${'label' in option ? this.t(option.label) : option.rawLabel}
+                  </option>
+                `
+            )}
+          </select>
+        </div>
+      </div>
+    `;
+  }
 }
diff --git a/src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts
new file mode 100644
index 000000000..aa6bc619b
--- /dev/null
+++ b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts
@@ -0,0 +1,62 @@
+import './index';
+
+import { InternalSummaryControl as Control } from './InternalSummaryControl';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('InternalSummaryControl', () => {
+  it('imports and defines foxy-internal-editable-control', () => {
+    expect(customElements.get('foxy-internal-editable-control')).to.exist;
+  });
+
+  it('imports and defines foxy-i18n', () => {
+    expect(customElements.get('foxy-i18n')).to.exist;
+  });
+
+  it('defines itself as foxy-internal-summary-control', () => {
+    expect(customElements.get('foxy-internal-summary-control')).to.equal(Control);
+  });
+
+  it('extends foxy-internal-editable-control', () => {
+    expect(new Control()).to.be.instanceOf(customElements.get('foxy-internal-editable-control'));
+  });
+
+  it('renders nothing in light DOM', () => {
+    expect(new Control().renderLightDom()).to.be.undefined;
+  });
+
+  it('renders label', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-summary-control></foxy-internal-summary-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('label');
+
+    control.label = 'Foo bar';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('label');
+    expect(control.renderRoot).to.include.text('Foo bar');
+  });
+
+  it('renders helper text', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-summary-control></foxy-internal-summary-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('helper_text');
+
+    control.helperText = 'Test helper text';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('helper_text');
+    expect(control.renderRoot).to.include.text('Test helper text');
+  });
+
+  it('renders default slot', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-summary-control></foxy-internal-summary-control>
+    `);
+
+    expect(control.renderRoot).to.include.html('<slot></slot>');
+  });
+});
diff --git a/src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts
new file mode 100644
index 000000000..0b3b61749
--- /dev/null
+++ b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts
@@ -0,0 +1,34 @@
+import type { CSSResultArray } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+import { html, css } from 'lit-element';
+
+export class InternalSummaryControl extends InternalEditableControl {
+  static get styles(): CSSResultArray {
+    return [
+      ...super.styles,
+      css`
+        ::slotted(*) {
+          padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);
+        }
+
+        ::slotted(:not(:first-child)) {
+          border-top: thin var(--foxy-border-style, solid) var(--lumo-contrast-10pct) !important;
+        }
+      `,
+    ];
+  }
+
+  renderLightDom(): void {
+    return;
+  }
+
+  renderControl(): TemplateResult {
+    return html`
+      <p class="mb-xs font-medium text-secondary text-s" ?hidden=${!this.label}>${this.label}</p>
+      <div class="border border-contrast-10 rounded"><slot></slot></div>
+      <p class="mt-xs text-xs text-secondary" ?hidden=${!this.helperText}>${this.helperText}</p>
+    `;
+  }
+}
diff --git a/src/elements/internal/InternalSummaryControl/index.ts b/src/elements/internal/InternalSummaryControl/index.ts
new file mode 100644
index 000000000..1b8636107
--- /dev/null
+++ b/src/elements/internal/InternalSummaryControl/index.ts
@@ -0,0 +1,8 @@
+import '../InternalEditableControl/index';
+import '../../public/I18n/index';
+
+import { InternalSummaryControl } from './InternalSummaryControl';
+
+customElements.define('foxy-internal-summary-control', InternalSummaryControl);
+
+export { InternalSummaryControl };
diff --git a/src/elements/internal/InternalSwitchControl/InternalSwitchControl.test.ts b/src/elements/internal/InternalSwitchControl/InternalSwitchControl.test.ts
new file mode 100644
index 000000000..c226819d8
--- /dev/null
+++ b/src/elements/internal/InternalSwitchControl/InternalSwitchControl.test.ts
@@ -0,0 +1,174 @@
+import './index';
+
+import { InternalSwitchControl as Control } from './InternalSwitchControl';
+import { expect, fixture, html } from '@open-wc/testing';
+import { stub } from 'sinon';
+
+describe('InternalSwitchControl', () => {
+  it('imports and defines foxy-internal-editable-control', () => {
+    expect(customElements.get('foxy-internal-editable-control')).to.exist;
+  });
+
+  it('imports and defines vcf-tooltip', () => {
+    expect(customElements.get('vcf-tooltip')).to.exist;
+  });
+
+  it('imports and defines foxy-i18n', () => {
+    expect(customElements.get('foxy-i18n')).to.exist;
+  });
+
+  it('defines itself as foxy-internal-switch-control', () => {
+    expect(customElements.get('foxy-internal-switch-control')).to.equal(Control);
+  });
+
+  it('extends foxy-internal-editable-control', () => {
+    expect(new Control()).to.be.instanceOf(customElements.get('foxy-internal-editable-control'));
+  });
+
+  it('has a reactive property "helperTextAsToolip"', () => {
+    expect(new Control()).to.have.property('helperTextAsToolip', false);
+    expect(Control).to.have.deep.nested.property('properties.helperTextAsToolip', {
+      attribute: 'helper-text-as-tooltip',
+      type: Boolean,
+    });
+  });
+
+  it('has a reactive property "invert"', () => {
+    expect(Control).to.have.deep.nested.property('properties.invert', { type: Boolean });
+    expect(new Control()).to.have.property('invert', false);
+  });
+
+  it('renders label', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-switch-control></foxy-internal-switch-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('label');
+
+    control.label = 'Foo bar';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('label');
+    expect(control.renderRoot).to.include.text('Foo bar');
+  });
+
+  it('renders helper text', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-switch-control></foxy-internal-switch-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('helper_text');
+
+    control.helperText = 'Test helper text';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('helper_text');
+    expect(control.renderRoot).to.include.text('Test helper text');
+  });
+
+  it('renders error text if available', async () => {
+    let control = await fixture<Control>(html`
+      <foxy-internal-switch-control></foxy-internal-switch-control>
+    `);
+
+    expect(control.renderRoot).to.not.include.text('Test error message');
+
+    customElements.define(
+      'x-test-control-1',
+      class extends Control {
+        protected get _errorMessage() {
+          return 'Test error message';
+        }
+      }
+    );
+
+    control = await fixture<Control>(html`<x-test-control-1></x-test-control-1>`);
+    expect(control.renderRoot).to.include.text('Test error message');
+  });
+
+  it('renders a checkbox/switch input element', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-switch-control></foxy-internal-switch-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+
+    expect(input).to.exist;
+    expect(input).to.have.attribute('type', 'checkbox');
+    expect(input).to.have.attribute('switch');
+    expect(input).to.not.have.attribute('checked');
+
+    control.getValue = () => true;
+    await control.requestUpdate();
+    expect(input).to.have.attribute('checked');
+
+    control.setValue = stub();
+    input.checked = false;
+    input.dispatchEvent(new Event('change'));
+    expect(control.setValue).to.have.been.calledOnceWith(false);
+  });
+
+  it('supports inverted selection mode', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-switch-control invert></foxy-internal-switch-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.exist;
+    expect(input).to.have.attribute('checked');
+
+    control.getValue = () => true;
+    await control.requestUpdate();
+    expect(input).to.not.have.attribute('checked');
+
+    control.setValue = stub();
+    input.checked = true;
+    input.dispatchEvent(new Event('change'));
+    expect(control.setValue).to.have.been.calledOnceWith(false);
+  });
+
+  it('disables input when control is disabled', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-switch-control></foxy-internal-switch-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.not.have.attribute('disabled');
+
+    control.disabled = true;
+    await control.requestUpdate();
+    expect(input).to.have.attribute('disabled');
+  });
+
+  it('renders checked/unchecked text instead of input when readonly', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-switch-control readonly></foxy-internal-switch-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('unchecked');
+    expect(control.renderRoot.querySelector('input')).to.not.exist;
+
+    control.getValue = () => true;
+    await control.requestUpdate();
+    expect(control.renderRoot).to.include.text('checked');
+    expect(control.renderRoot.querySelector('input')).to.not.exist;
+  });
+
+  it('renders helper text as tooltip when "helperTextAsToolip" is set', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-switch-control helper-text="Foo bar test" helper-text-as-tooltip>
+      </foxy-internal-switch-control>
+    `);
+
+    const tooltip = control.renderRoot.querySelector('vcf-tooltip')!;
+    expect(tooltip).to.exist;
+    expect(tooltip).to.include.text('Foo bar test');
+
+    const trigger = control.renderRoot.querySelector(`#${tooltip.getAttribute('for')}`)!;
+    expect(trigger).to.exist;
+
+    control.helperTextAsToolip = false;
+    await control.requestUpdate();
+    expect(control.renderRoot.querySelector('vcf-tooltip')).to.not.exist;
+  });
+});
diff --git a/src/elements/internal/InternalSwitchControl/InternalSwitchControl.ts b/src/elements/internal/InternalSwitchControl/InternalSwitchControl.ts
new file mode 100644
index 000000000..d69242d99
--- /dev/null
+++ b/src/elements/internal/InternalSwitchControl/InternalSwitchControl.ts
@@ -0,0 +1,97 @@
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+import { html, PropertyDeclarations, svg, TemplateResult } from 'lit-element';
+import { classMap } from '../../../utils/class-map';
+
+export class InternalSwitchControl extends InternalEditableControl {
+  static get properties(): PropertyDeclarations {
+    return {
+      ...super.properties,
+      helperTextAsToolip: { type: Boolean, attribute: 'helper-text-as-tooltip' },
+      invert: { type: Boolean },
+    };
+  }
+
+  helperTextAsToolip = false;
+
+  invert = false;
+
+  renderControl(): TemplateResult {
+    const checked = this.invert ? !this._value : !!this._value;
+    return html`
+      <div class="flex items-start gap-s leading-xs text-m">
+        <div class="flex-1">
+          <label class="text-m text-body" for="input">${this.label}</label>
+          ${this.helperTextAsToolip
+            ? ''
+            : html`<p class="text-xs text-secondary">${this.helperText}</p>`}
+          <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        ${this.readonly
+          ? html`<p class="text-secondary">${checked ? this.t('checked') : this.t('unchecked')}</p>`
+          : html`
+              <div style="height: calc(1em * var(--lumo-line-height-xs))" class="flex items-center">
+                <div
+                  style="border-radius: var(--lumo-size-xl); width: calc((1em * var(--lumo-line-height-xs)) - 3px + var(--lumo-space-m))"
+                  class=${classMap({
+                    'cursor-pointer group transition-colors relative': true,
+                    'flex flex-shrink-0 items-center': true,
+                    'bg-success': !this.disabled && checked,
+                    'bg-contrast-20 hover-bg-contrast-30': !this.disabled && !checked,
+                    'bg-contrast-10': this.disabled,
+                    'focus-within-ring-2 focus-within-ring-primary-50': true,
+                  })}
+                  @click=${() => (this._value = !this._value)}
+                >
+                  <div
+                    style="margin: 1.5px; width: calc((1em * var(--lumo-line-height-xs)) - 6px); height: calc((1em * var(--lumo-line-height-xs)) - 6px)"
+                    class=${classMap({
+                      'transition-all transform block rounded-full': true,
+                      'translate-x-m': checked,
+                      'translate-x-0': !checked,
+                      'bg-base': this.disabled,
+                      'bg-tint': !this.disabled,
+                    })}
+                  ></div>
+
+                  <input
+                    class="opacity-0 absolute inset-0 focus-outline-none"
+                    type="checkbox"
+                    id="input"
+                    switch
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    ?checked=${checked}
+                    @change=${(evt: Event) => {
+                      const checkbox = evt.currentTarget as HTMLInputElement;
+                      this._value = this.invert ? !checkbox.checked : checkbox.checked;
+                    }}
+                  />
+                </div>
+              </div>
+            `}
+        ${this.helperTextAsToolip && this.helperText
+          ? html`
+              <div
+                class="transition-colors text-tertiary flex-shrink-0 cursor-pointer hover-text-body"
+                id="trigger"
+              >
+                ${svg`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: calc(1em * var(--lumo-line-height-xs)); height: calc(1em * var(--lumo-line-height-xs)); margin-right: -0.12em"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg>`}
+              </div>
+              <vcf-tooltip
+                for="trigger"
+                style="--lumo-base-color: black; max-width: 30rem"
+                class="mt-s"
+                theme="light"
+                position="bottom"
+              >
+                <span class="text-s" style="color: white">${this.helperText}</span>
+              </vcf-tooltip>
+            `
+          : ''}
+      </div>
+    `;
+  }
+}
diff --git a/src/elements/internal/InternalSwitchControl/index.ts b/src/elements/internal/InternalSwitchControl/index.ts
new file mode 100644
index 000000000..5e3fc19b9
--- /dev/null
+++ b/src/elements/internal/InternalSwitchControl/index.ts
@@ -0,0 +1,9 @@
+import '@vaadin-component-factory/vcf-tooltip';
+import '../InternalEditableControl/index';
+import '../../public/I18n/index';
+
+import { InternalSwitchControl as Control } from './InternalSwitchControl';
+
+customElements.define('foxy-internal-switch-control', Control);
+
+export { Control as InternalSwitchControl };
diff --git a/src/elements/internal/InternalTextControl/InternalTextControl.test.ts b/src/elements/internal/InternalTextControl/InternalTextControl.test.ts
index ccff5d8b6..ee4318e52 100644
--- a/src/elements/internal/InternalTextControl/InternalTextControl.test.ts
+++ b/src/elements/internal/InternalTextControl/InternalTextControl.test.ts
@@ -63,6 +63,11 @@ describe('InternalTextControl', () => {
     expect(new Control()).to.be.instanceOf(InternalEditableControl);
   });
 
+  it('defines a reactive property for "layout" (String)', () => {
+    expect(Control).to.have.deep.nested.property('properties.layout', {});
+    expect(new Control()).to.have.property('layout', null);
+  });
+
   it('renders vaadin-text-field element', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
@@ -71,7 +76,7 @@ describe('InternalTextControl', () => {
     expect(field).to.not.be.null;
   });
 
-  it('sets "errorMessage" on vaadin-text-field from "_errorMessage" on itself', async () => {
+  it('sets "errorMessage" on vaadin-text-field from "_errorMessage" on itself in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -84,7 +89,7 @@ describe('InternalTextControl', () => {
     expect(field).to.have.property('errorMessage', 'test error message');
   });
 
-  it('sets "helperText" on vaadin-text-field from "helperText" on itself', async () => {
+  it('sets "helperText" on vaadin-text-field from "helperText" on itself in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -97,7 +102,7 @@ describe('InternalTextControl', () => {
     expect(field).to.have.property('helperText', 'test helper text');
   });
 
-  it('sets "placeholder" on vaadin-text-field from "placeholder" on itself', async () => {
+  it('sets "placeholder" on vaadin-text-field from "placeholder" on itself in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -110,7 +115,7 @@ describe('InternalTextControl', () => {
     expect(field).to.have.property('placeholder', 'test placeholder');
   });
 
-  it('sets "label" on vaadin-text-field from "label" on itself', async () => {
+  it('sets "label" on vaadin-text-field from "label" on itself in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -123,7 +128,7 @@ describe('InternalTextControl', () => {
     expect(field).to.have.property('label', 'test label');
   });
 
-  it('sets "disabled" on vaadin-text-field from "disabled" on itself', async () => {
+  it('sets "disabled" on vaadin-text-field from "disabled" on itself in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -137,7 +142,7 @@ describe('InternalTextControl', () => {
     expect(field).to.have.property('disabled', false);
   });
 
-  it('sets "readonly" on vaadin-text-field from "readonly" on itself', async () => {
+  it('sets "readonly" on vaadin-text-field from "readonly" on itself in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -151,7 +156,7 @@ describe('InternalTextControl', () => {
     expect(field).to.have.property('readonly', false);
   });
 
-  it('sets "checkValidity" on vaadin-text-field from "_checkValidity" on itself', async () => {
+  it('sets "checkValidity" on vaadin-text-field from "_checkValidity" on itself in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -159,7 +164,7 @@ describe('InternalTextControl', () => {
     expect(field).to.have.property('checkValidity', get(control, '_checkValidity'));
   });
 
-  it('sets "value" on vaadin-text-field from "_value" on itself', async () => {
+  it('sets "value" on vaadin-text-field from "_value" on itself in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -172,7 +177,7 @@ describe('InternalTextControl', () => {
     expect(field).to.have.property('value', 'test_value');
   });
 
-  it('writes to "_value" on input', async () => {
+  it('writes to "_value" on input in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -185,7 +190,7 @@ describe('InternalTextControl', () => {
     expect(control).to.have.property('testValue', 'test_value');
   });
 
-  it('submits the host nucleon form on Enter', async () => {
+  it('submits the host nucleon form on Enter in standalone mode', async () => {
     const layout = html`<test-internal-text-control></test-internal-text-control>`;
     const control = await fixture<TestControl>(layout);
     const field = control.renderRoot.querySelector('vaadin-text-field')!;
@@ -196,4 +201,152 @@ describe('InternalTextControl', () => {
 
     submitMethod.restore();
   });
+
+  it('renders label in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('label');
+
+    control.label = 'Foo bar';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('label');
+    expect(control.renderRoot).to.include.text('Foo bar');
+  });
+
+  it('renders helper text in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('helper_text');
+
+    control.helperText = 'Test helper text';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.not.include.text('helper_text');
+    expect(control.renderRoot).to.include.text('Test helper text');
+  });
+
+  it('renders error text in summary item layout if available', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    expect(control.renderRoot).to.not.include.text('Test error message');
+
+    control.testErrorMessage = 'Test error message';
+    await control.requestUpdate();
+
+    expect(control.renderRoot).to.include.text('Test error message');
+  });
+
+  it('renders text input in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    const vaadinTextField = control.renderRoot.querySelector('vaadin-text-field');
+    expect(vaadinTextField).to.be.null;
+
+    const input = control.renderRoot.querySelector('input');
+    expect(input).to.not.be.null;
+    expect(input).to.have.attribute('type', 'text');
+  });
+
+  it('sets "disabled" on input from "disabled" on itself in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('disabled', false);
+
+    control.disabled = true;
+    await control.requestUpdate();
+
+    expect(input).to.have.property('disabled', true);
+
+    control.disabled = false;
+    await control.requestUpdate();
+
+    expect(input).to.have.property('disabled', false);
+  });
+
+  it('sets "readonly" on input from "readonly" on itself in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('readOnly', false);
+
+    control.readonly = true;
+    await control.requestUpdate();
+
+    expect(input).to.have.property('readOnly', true);
+
+    control.readonly = false;
+    await control.requestUpdate();
+
+    expect(input).to.have.property('readOnly', false);
+  });
+
+  it('sets "placeholder" on input from "placeholder" on itself in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('placeholder', 'placeholder');
+
+    control.placeholder = 'Test placeholder';
+    await control.requestUpdate();
+
+    expect(input).to.have.property('placeholder', 'Test placeholder');
+  });
+
+  it('sets "value" on input from "_value" on itself in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('value', '');
+
+    control.testValue = 'test_value';
+    await control.requestUpdate();
+
+    expect(input).to.have.property('value', 'test_value');
+  });
+
+  it('writes to "_value" on input in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    expect(input).to.have.property('value', '');
+
+    input.value = 'test_value';
+    input.dispatchEvent(new CustomEvent('input'));
+
+    expect(control).to.have.property('testValue', 'test_value');
+  });
+
+  it('submits the host nucleon form on Enter in summary item layout', async () => {
+    const control = await fixture<TestControl>(html`
+      <test-internal-text-control layout="summary-item"></test-internal-text-control>
+    `);
+
+    const input = control.renderRoot.querySelector('input')!;
+    const submitMethod = stub(control.nucleon, 'submit');
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(submitMethod).to.have.been.calledOnce;
+
+    submitMethod.restore();
+  });
 });
diff --git a/src/elements/internal/InternalTextControl/InternalTextControl.ts b/src/elements/internal/InternalTextControl/InternalTextControl.ts
index e44152dc9..ccd3e2b7a 100644
--- a/src/elements/internal/InternalTextControl/InternalTextControl.ts
+++ b/src/elements/internal/InternalTextControl/InternalTextControl.ts
@@ -1,9 +1,11 @@
-import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';
 import type { TextFieldElement } from '@vaadin/vaadin-text-field';
 
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+import { html, css, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-element';
+import { classMap } from '../../../utils/class-map';
+import { live } from 'lit-html/directives/live';
 
 /**
  * Internal control displaying a basic text box.
@@ -15,16 +17,44 @@ export class InternalTextControl extends InternalEditableControl {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
+      layout: {},
       prefix: {},
       suffix: {},
+      __isErrorVisible: { attribute: false },
     };
   }
 
+  static get styles(): CSSResultArray {
+    return [
+      super.styles,
+      css`
+        input::-webkit-contacts-auto-fill-button {
+          visibility: hidden;
+          display: none !important;
+          pointer-events: none;
+          position: absolute;
+          right: 0;
+        }
+      `,
+    ];
+  }
+
+  layout: 'summary-item' | 'standalone' | null = null;
+
   prefix: string | null = null;
 
   suffix: string | null = null;
 
+  private __isErrorVisible = false;
+
+  reportValidity(): void {
+    this.__isErrorVisible = true;
+    super.reportValidity();
+  }
+
   renderControl(): TemplateResult {
+    if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();
+
     return html`
       <vaadin-text-field
         error-message=${ifDefined(this._errorMessage)}
@@ -56,4 +86,64 @@ export class InternalTextControl extends InternalEditableControl {
   protected set _value(newValue: string) {
     super._value = newValue as unknown | undefined;
   }
+
+  private __renderSummaryItemLayout() {
+    return html`
+      <div class="flex items-start gap-m leading-xs">
+        <div>
+          <label class="text-m text-body" for="input">${this.label}</label>
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p
+            class="text-xs text-error"
+            ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
+          >
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        <div class="flex-1 flex items-center gap-xs" style="min-width: 30%">
+          <input
+            placeholder=${this.placeholder}
+            class=${classMap({
+              'w-full appearance-none text-right bg-transparent transition-colors': true,
+              'text-m rounded-s focus-outline-none': true,
+              'text-secondary': this.readonly,
+              'text-disabled': this.disabled,
+              'font-medium': !this.readonly,
+            })}
+            type="text"
+            id="input"
+            .value=${live(this._value)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}
+            @blur=${() => (this.__isErrorVisible = true)}
+            @input=${(evt: Event) => {
+              evt.stopPropagation();
+              this._value = (evt.target as HTMLInputElement).value;
+            }}
+          />
+
+          <button
+            aria-label=${this.t('clear')}
+            class=${classMap({
+              'rounded-full transition-colors': true,
+              'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+              'cursor-pointer text-tertiary hover-text-body': !this.disabled,
+              'cursor-default text-disabled': this.disabled,
+            })}
+            style="width: 1em; height: 1em;"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly || !this._value}
+            @click=${() => {
+              this._value = '';
+              this.dispatchEvent(new CustomEvent('clear'));
+            }}
+          >
+            ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`}
+          </button>
+        </div>
+      </div>
+    `;
+  }
 }
diff --git a/src/elements/private/Dialog/Dialog.ts b/src/elements/private/Dialog/Dialog.ts
index 8e63be817..acfad1ca7 100644
--- a/src/elements/private/Dialog/Dialog.ts
+++ b/src/elements/private/Dialog/Dialog.ts
@@ -72,7 +72,7 @@ export abstract class Dialog extends Base {
         }
 
         .max-h-alert {
-          max-height: calc(100vh - var(--lumo-size-l) - var(--lumo-space-m) * 2);
+          max-height: calc(100dvh - var(--lumo-size-l) - var(--lumo-space-m) * 2);
         }
       `,
     ];
diff --git a/src/elements/public/AddressForm/AddressForm.test.ts b/src/elements/public/AddressForm/AddressForm.test.ts
index 5de70fd4c..b87d73746 100644
--- a/src/elements/public/AddressForm/AddressForm.test.ts
+++ b/src/elements/public/AddressForm/AddressForm.test.ts
@@ -201,12 +201,13 @@ describe('AddressForm', () => {
     const element = await fixture<AddressForm>(layout);
     const data = await getTestData<Data>('./hapi/customer_addresses/0');
 
+    data.is_default_billing = false;
+    data.is_default_shipping = false;
+    element.data = { ...data };
     expect(element.hiddenSelector.matches('delete', true)).to.be.false;
 
     data.is_default_billing = true;
-    data.is_default_shipping = false;
-    element.data = data;
-
+    element.data = { ...data };
     expect(element.hiddenSelector.matches('delete', true)).to.be.true;
   });
 
@@ -215,13 +216,48 @@ describe('AddressForm', () => {
     const element = await fixture<AddressForm>(layout);
     const data = await getTestData<Data>('./hapi/customer_addresses/0');
 
+    data.is_default_billing = false;
+    data.is_default_shipping = false;
+    element.data = { ...data };
     expect(element.hiddenSelector.matches('delete', true)).to.be.false;
 
+    data.is_default_shipping = true;
+    element.data = { ...data };
+    expect(element.hiddenSelector.matches('delete', true)).to.be.true;
+  });
+
+  it('hides Copy ID button for default billing address', async () => {
+    const layout = html`<foxy-address-form></foxy-address-form>`;
+    const element = await fixture<AddressForm>(layout);
+    const data = await getTestData<Data>('./hapi/customer_addresses/0');
+
     data.is_default_billing = false;
+    data.is_default_shipping = false;
+    element.data = { ...data };
+
+    expect(element.hiddenSelector.matches('header:copy-id', true)).to.be.false;
+
+    data.is_default_billing = true;
+    element.data = { ...data };
+
+    expect(element.hiddenSelector.matches('header:copy-id', true)).to.be.true;
+  });
+
+  it('hides Copy ID button for default shipping address', async () => {
+    const layout = html`<foxy-address-form></foxy-address-form>`;
+    const element = await fixture<AddressForm>(layout);
+    const data = await getTestData<Data>('./hapi/customer_addresses/0');
+
+    data.is_default_billing = false;
+    data.is_default_shipping = false;
+    element.data = { ...data };
+
+    expect(element.hiddenSelector.matches('header:copy-id', true)).to.be.false;
+
     data.is_default_shipping = true;
-    element.data = data;
+    element.data = { ...data };
 
-    expect(element.hiddenSelector.matches('delete', true)).to.be.true;
+    expect(element.hiddenSelector.matches('header:copy-id', true)).to.be.true;
   });
 
   it('renders a form header', () => {
@@ -231,19 +267,22 @@ describe('AddressForm', () => {
     expect(renderHeaderMethod).to.have.been.called;
   });
 
-  it('uses a custom subtitle key for form header', async () => {
+  it('uses a custom title key for form header', async () => {
     const layout = html`<foxy-address-form></foxy-address-form>`;
     const element = await fixture<AddressForm>(layout);
 
     element.data = await getTestData<Data>('./hapi/customer_addresses/0');
     element.data = { ...element.data, is_default_billing: true, is_default_shipping: false };
-    expect(element.headerSubtitleKey).to.equal('subtitle_default_billing');
+    expect(element.headerTitleKey).to.equal('title_default_billing');
 
     element.data = { ...element.data, is_default_billing: false, is_default_shipping: true };
-    expect(element.headerSubtitleKey).to.equal('subtitle_default_shipping');
+    expect(element.headerTitleKey).to.equal('title_default_shipping');
 
     element.data = { ...element.data, is_default_billing: false, is_default_shipping: false };
-    expect(element.headerSubtitleKey).to.equal('subtitle_custom');
+    expect(element.headerTitleKey).to.equal('title');
+
+    element.data = null;
+    expect(element.headerTitleKey).to.equal('title');
   });
 
   it('renders a text control for address name', async () => {
diff --git a/src/elements/public/AddressForm/AddressForm.ts b/src/elements/public/AddressForm/AddressForm.ts
index f3fd9e40d..edf6c5681 100644
--- a/src/elements/public/AddressForm/AddressForm.ts
+++ b/src/elements/public/AddressForm/AddressForm.ts
@@ -52,14 +52,14 @@ export class AddressForm extends Base<Data> {
   get hiddenSelector(): BooleanSelector {
     const alwaysHidden = [super.hiddenSelector.toString()];
     const isDefault = !!this.data?.is_default_shipping || !!this.data?.is_default_billing;
-    if (isDefault) alwaysHidden.unshift('delete', 'address-name');
+    if (isDefault) alwaysHidden.unshift('delete', 'address-name', 'header:copy-id');
     return new BooleanSelector(alwaysHidden.join(' ').trim());
   }
 
-  get headerSubtitleKey(): string {
-    if (this.data?.is_default_shipping) return 'subtitle_default_shipping';
-    if (this.data?.is_default_billing) return 'subtitle_default_billing';
-    return 'subtitle_custom';
+  get headerTitleKey(): string {
+    if (this.data?.is_default_shipping) return 'title_default_shipping';
+    if (this.data?.is_default_billing) return 'title_default_billing';
+    return super.headerTitleKey;
   }
 
   renderBody(): TemplateResult {
diff --git a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.stories.ts b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.stories.ts
new file mode 100644
index 000000000..fa49f6f85
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.stories.ts
@@ -0,0 +1,37 @@
+import './index';
+
+import { Summary } from '../../../storygen/Summary';
+import { getMeta } from '../../../storygen/getMeta';
+import { getStory } from '../../../storygen/getStory';
+
+const summary: Summary = {
+  href: 'https://demo.api/hapi/subscriptions/0?zoom=transaction_template',
+  parent: 'https://demo.api/hapi/subscriptions',
+  nucleon: true,
+  localName: 'foxy-admin-subscription-form',
+  translatable: true,
+  configurable: {
+    sections: ['general', 'overdue', 'header', 'timestamps'],
+    buttons: ['header:copy-id', 'header:copy-json', 'submit', 'undo', 'create'],
+    inputs: [
+      'general:start-date',
+      'general:end-date',
+      'general:next-transaction-date',
+      'general:frequency',
+      'overdue:past-due-amount',
+      'transactions',
+      'attributes',
+    ],
+  },
+};
+
+export default getMeta(summary);
+
+export const Playground = getStory({ ...summary, code: true });
+export const Empty = getStory(summary);
+export const Error = getStory(summary);
+export const Busy = getStory(summary);
+
+Empty.args.href = '';
+Error.args.href = 'https://demo.api/virtual/empty?status=404';
+Busy.args.href = 'https://demo.api/virtual/stall';
diff --git a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts
new file mode 100644
index 000000000..8d2380758
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts
@@ -0,0 +1,363 @@
+import type { FetchEvent } from '../NucleonElement/FetchEvent';
+import type { Data } from './types';
+
+import { html, expect, fixture, waitUntil } from '@open-wc/testing';
+import { AdminSubscriptionForm as Form } from './AdminSubscriptionForm';
+
+import { createRouter } from '../../../server/index';
+import { getTestData } from '../../../testgen/getTestData';
+
+import './index';
+
+describe('AdminSubscriptionForm', () => {
+  const OriginalResizeObserver = window.ResizeObserver;
+
+  // @ts-expect-error disabling ResizeObserver because it errors in test env
+  before(() => (window.ResizeObserver = undefined));
+  after(() => (window.ResizeObserver = OriginalResizeObserver));
+
+  it('imports and defines foxy-internal-async-list-control', () => {
+    expect(customElements.get('foxy-internal-async-list-control')).to.exist;
+  });
+
+  it('imports and defines foxy-internal-frequency-control', () => {
+    expect(customElements.get('foxy-internal-frequency-control')).to.exist;
+  });
+
+  it('imports and defines foxy-internal-number-control', () => {
+    expect(customElements.get('foxy-internal-number-control')).to.exist;
+  });
+
+  it('imports and defines foxy-internal-date-control', () => {
+    expect(customElements.get('foxy-internal-date-control')).to.exist;
+  });
+
+  it('imports and defines foxy-internal-form', () => {
+    expect(customElements.get('foxy-internal-form')).to.exist;
+  });
+
+  it('imports and defines foxy-transaction-card', () => {
+    expect(customElements.get('foxy-transaction-card')).to.exist;
+  });
+
+  it('imports and defines foxy-attribute-card', () => {
+    expect(customElements.get('foxy-attribute-card')).to.exist;
+  });
+
+  it('imports and defines foxy-attribute-form', () => {
+    expect(customElements.get('foxy-attribute-form')).to.exist;
+  });
+
+  it('imports and defines foxy-transaction', () => {
+    expect(customElements.get('foxy-transaction')).to.exist;
+  });
+
+  it('imports and defines foxy-internal-admin-subscription-form-load-in-cart-action', () => {
+    expect(customElements.get('foxy-internal-admin-subscription-form-load-in-cart-action')).to
+      .exist;
+  });
+
+  it('imports and defines foxy-internal-admin-subscription-form-error', () => {
+    expect(customElements.get('foxy-internal-admin-subscription-form-error')).to.exist;
+  });
+
+  it('defines itself as foxy-admin-subscription-form', () => {
+    expect(customElements.get('foxy-admin-subscription-form')).to.equal(Form);
+  });
+
+  it('extends InternalForm', () => {
+    expect(new Form()).to.be.instanceOf(customElements.get('foxy-internal-form'));
+  });
+
+  it('has a default i18next namespace "admin-subscription-form"', () => {
+    expect(Form).to.have.property('defaultNS', 'admin-subscription-form');
+    expect(new Form()).to.have.property('ns', 'admin-subscription-form');
+  });
+
+  it('always hides built-in Delete button because subscriptions cannot be deleted', () => {
+    expect(new Form().hiddenSelector.matches('delete', true)).to.be.true;
+  });
+
+  it('hides error message control when there is no error', async () => {
+    const form = new Form();
+    expect(form.hiddenSelector.matches('error-message', true)).to.be.true;
+
+    const testData = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
+    testData.error_message = 'Test error';
+    form.data = testData;
+    expect(form.hiddenSelector.matches('error-message', true)).to.be.false;
+  });
+
+  it('hides View in cart and Cancel actions when there is no data', async () => {
+    const form = new Form();
+    expect(form.hiddenSelector.matches('view-action', true)).to.be.true;
+    expect(form.hiddenSelector.matches('cancel-action', true)).to.be.true;
+
+    form.data = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
+    expect(form.hiddenSelector.matches('view-action', true)).to.be.false;
+    expect(form.hiddenSelector.matches('cancel-action', true)).to.be.false;
+  });
+
+  it('uses custom subtitle options based on the subscription status', async () => {
+    const form = new Form();
+    expect(form.headerSubtitleOptions).to.deep.equal({ context: 'inactive' });
+
+    const testData = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
+    testData.is_active = true;
+    form.data = testData;
+    expect(form.headerSubtitleOptions).to.deep.equal({ context: 'active' });
+
+    testData.is_active = false;
+    form.data = testData;
+    expect(form.headerSubtitleOptions).to.deep.equal({ context: 'inactive' });
+  });
+
+  it('renders load in cart action for viewing the subscription in cart', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const action = form.renderRoot.querySelector('[infer="view-action"]');
+    expect(action?.localName).to.equal('foxy-internal-admin-subscription-form-load-in-cart-action');
+  });
+
+  it('renders load in cart action for cancelling the subscription', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const action = form.renderRoot.querySelector('[infer="cancel-action"]');
+    expect(action?.localName).to.equal('foxy-internal-admin-subscription-form-load-in-cart-action');
+    expect(action?.getAttribute('action')).to.equal('cancel');
+  });
+
+  it('renders error message control', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    const error = form.renderRoot.querySelector('[infer="error-message"]');
+    expect(error?.localName).to.equal('foxy-internal-admin-subscription-form-error');
+  });
+
+  it('renders summary control with general information', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const control = form.renderRoot.querySelector('[infer="general"]');
+    expect(control?.localName).to.equal('foxy-internal-summary-control');
+  });
+
+  it('renders date control for start date inside of the general summary control', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const summary = form.renderRoot.querySelector('[infer="general"]');
+    const control = summary?.querySelector('[infer="start-date"]');
+
+    expect(control?.localName).to.equal('foxy-internal-date-control');
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('format', 'iso-long');
+  });
+
+  it('renders frequency control inside of the general summary control', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const summary = form.renderRoot.querySelector('[infer="general"]');
+    const control = summary?.querySelector('[infer="frequency"]');
+
+    expect(control?.localName).to.equal('foxy-internal-frequency-control');
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('allow-twice-a-month');
+  });
+
+  it('renders date control for next transaction date inside of the general summary control', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const summary = form.renderRoot.querySelector('[infer="general"]');
+    const control = summary?.querySelector('[infer="next-transaction-date"]');
+
+    expect(control?.localName).to.equal('foxy-internal-date-control');
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('format', 'iso-long');
+  });
+
+  it('renders date control for end date inside of the general summary control', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const summary = form.renderRoot.querySelector('[infer="general"]');
+    const control = summary?.querySelector('[infer="end-date"]');
+
+    expect(control?.localName).to.equal('foxy-internal-date-control');
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('format', 'iso-long');
+  });
+
+  it('renders summary control with overdue information', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const control = form.renderRoot.querySelector('[infer="overdue"]');
+    expect(control?.localName).to.equal('foxy-internal-summary-control');
+  });
+
+  it('renders number control for past due amount inside of the overdue summary control', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const summary = form.renderRoot.querySelector('[infer="overdue"]');
+    const control = summary?.querySelector('[infer="past-due-amount"]');
+
+    expect(control?.localName).to.equal('foxy-internal-number-control');
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('suffix', 'USD');
+    expect(control).to.have.attribute('min', '0');
+  });
+
+  it('renders default slot', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+
+    const slot = form.renderRoot.querySelector('slot:not([name])');
+    expect(slot).to.exist;
+  });
+
+  it('renders async list control for attributes', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const control = form.renderRoot.querySelector('[infer="attributes"]');
+    expect(control?.localName).to.equal('foxy-internal-async-list-control');
+
+    expect(control).to.have.attribute('item', 'foxy-attribute-card');
+    expect(control).to.have.attribute('form', 'foxy-attribute-form');
+    expect(control).to.have.attribute('alert');
+    expect(control).to.have.attribute(
+      'first',
+      'https://demo.api/hapi/subscription_attributes?subscription_id=0'
+    );
+  });
+
+  it('renders async list control for transactions', async () => {
+    const router = createRouter();
+    const form = await fixture<Form>(html`
+      <foxy-admin-subscription-form
+        href="https://demo.api/hapi/subscriptions/0?zoom=transaction_template"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-admin-subscription-form>
+    `);
+
+    await waitUntil(() => !!form.data, '', { timeout: 5000 });
+    await form.requestUpdate();
+    const control = form.renderRoot.querySelector('[infer="transactions"]');
+    expect(control?.localName).to.equal('foxy-internal-async-list-control');
+
+    expect(control).to.have.attribute('item', 'foxy-transaction-card');
+    expect(control).to.have.attribute('form', 'foxy-transaction');
+    expect(control).to.have.attribute('hide-create-button');
+    expect(control).to.have.attribute('hide-delete-button');
+    expect(control).to.have.attribute('alert');
+    expect(control).to.have.attribute('wide');
+    expect(control).to.have.attribute(
+      'first',
+      'https://demo.api/hapi/transactions?subscription_id=0&zoom=items'
+    );
+  });
+});
diff --git a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
new file mode 100644
index 000000000..7fba6d77c
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
@@ -0,0 +1,112 @@
+import type { TemplateResult } from 'lit-html';
+import type { Data } from './types';
+
+import { TranslatableMixin } from '../../../mixins/translatable';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+
+const NS = 'admin-subscription-form';
+const Base = TranslatableMixin(InternalForm, NS);
+
+export class AdminSubscriptionForm extends Base<Data> {
+  get hiddenSelector(): BooleanSelector {
+    const alwaysMatch = ['delete', super.hiddenSelector.toString()];
+    if (!this.data?.error_message) alwaysMatch.unshift('error-message');
+    if (!this.data?.is_active) alwaysMatch.unshift('view-action', 'cancel-action');
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
+  }
+
+  get headerSubtitleOptions(): Record<string, unknown> {
+    return { context: this.data?.is_active ? 'active' : 'inactive' };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  renderHeaderActions(data: Data): TemplateResult {
+    return html`
+      <foxy-internal-admin-subscription-form-load-in-cart-action infer="view-action">
+      </foxy-internal-admin-subscription-form-load-in-cart-action>
+      <foxy-internal-admin-subscription-form-load-in-cart-action
+        action="cancel"
+        infer="cancel-action"
+      >
+      </foxy-internal-admin-subscription-form-load-in-cart-action>
+    `;
+  }
+
+  renderBody(): TemplateResult {
+    let transactionsHref: string | undefined;
+
+    try {
+      const url = new URL(this.data?._links['fx:transactions'].href ?? '');
+      url.searchParams.set('zoom', 'items');
+      transactionsHref = url.toString();
+    } catch {
+      transactionsHref = undefined;
+    }
+
+    return html`
+      ${this.renderHeader()}
+
+      <foxy-internal-admin-subscription-form-error infer="error-message">
+      </foxy-internal-admin-subscription-form-error>
+
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-date-control layout="summary-item" format="iso-long" infer="start-date">
+        </foxy-internal-date-control>
+        <foxy-internal-frequency-control
+          layout="summary-item"
+          infer="frequency"
+          allow-twice-a-month
+        >
+        </foxy-internal-frequency-control>
+        <foxy-internal-date-control
+          layout="summary-item"
+          format="iso-long"
+          infer="next-transaction-date"
+        >
+        </foxy-internal-date-control>
+        <foxy-internal-date-control layout="summary-item" format="iso-long" infer="end-date">
+        </foxy-internal-date-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="overdue">
+        <foxy-internal-number-control
+          layout="summary-item"
+          suffix=${ifDefined(this.data?._embedded['fx:transaction_template'].currency_code)}
+          infer="past-due-amount"
+          min="0"
+        >
+        </foxy-internal-number-control>
+      </foxy-internal-summary-control>
+
+      ${this.renderTemplateOrSlot()}
+
+      <foxy-internal-async-list-control
+        infer="attributes"
+        class="min-w-0"
+        first=${ifDefined(this.data?._links?.['fx:attributes'].href)}
+        item="foxy-attribute-card"
+        form="foxy-attribute-form"
+        alert
+      >
+      </foxy-internal-async-list-control>
+
+      <foxy-internal-async-list-control
+        infer="transactions"
+        class="min-w-0"
+        first=${ifDefined(transactionsHref)}
+        item="foxy-transaction-card"
+        form="foxy-transaction"
+        hide-create-button
+        hide-delete-button
+        alert
+        wide
+      >
+      </foxy-internal-async-list-control>
+
+      ${super.renderBody()}
+    `;
+  }
+}
diff --git a/src/elements/public/AdminSubscriptionForm/index.ts b/src/elements/public/AdminSubscriptionForm/index.ts
new file mode 100644
index 000000000..07b7a23ad
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/index.ts
@@ -0,0 +1,19 @@
+import '../../internal/InternalAsyncListControl/index';
+import '../../internal/InternalFrequencyControl/index';
+import '../../internal/InternalNumberControl/index';
+import '../../internal/InternalDateControl/index';
+import '../../internal/InternalForm/index';
+
+import '../TransactionCard/index';
+import '../AttributeCard/index';
+import '../AttributeForm/index';
+import '../Transaction/index';
+
+import './internal/InternalAdminSubscriptionFormLoadInCartAction/index';
+import './internal/InternalAdminSubscriptionFormError/index';
+
+import { AdminSubscriptionForm } from './AdminSubscriptionForm';
+
+customElements.define('foxy-admin-subscription-form', AdminSubscriptionForm);
+
+export { AdminSubscriptionForm };
diff --git a/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormError/InternalAdminSubscriptionFormError.test.ts b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormError/InternalAdminSubscriptionFormError.test.ts
new file mode 100644
index 000000000..311a29ed0
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormError/InternalAdminSubscriptionFormError.test.ts
@@ -0,0 +1,43 @@
+import type { NucleonElement } from '../../../NucleonElement/NucleonElement';
+import type { Data } from '../../types';
+
+import { InternalAdminSubscriptionFormError as Control } from './InternalAdminSubscriptionFormError';
+import { expect, fixture, html } from '@open-wc/testing';
+import { getTestData } from '../../../../../testgen/getTestData';
+
+import '../../../NucleonElement/index';
+import './index';
+
+describe('AdminSubscriptionForm', () => {
+  describe('InternalAdminSubscriptionFormError', () => {
+    it('imports and defines foxy-internal-control', () => {
+      expect(customElements.get('foxy-internal-control')).to.exist;
+    });
+
+    it('defines itself as foxy-internal-admin-subscription-form-error', () => {
+      expect(customElements.get('foxy-internal-admin-subscription-form-error')).to.equal(Control);
+    });
+
+    it('extends InternalControl', () => {
+      expect(new Control()).to.be.instanceOf(customElements.get('foxy-internal-control'));
+    });
+
+    it('renders error message from parent form', async () => {
+      const data = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
+      data.error_message = 'Test error message';
+
+      const nucleon = await fixture<NucleonElement<Data>>(html`
+        <foxy-nucleon .data=${data}>
+          <foxy-internal-admin-subscription-form-error infer="">
+          </foxy-internal-admin-subscription-form-error>
+        </foxy-nucleon>
+      `);
+
+      const control = nucleon.firstElementChild as Control;
+      control.inferProperties();
+      await control.requestUpdate();
+
+      expect(control.renderRoot).to.include.text('Test error message');
+    });
+  });
+});
diff --git a/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormError/InternalAdminSubscriptionFormError.ts b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormError/InternalAdminSubscriptionFormError.ts
new file mode 100644
index 000000000..1a773de4d
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormError/InternalAdminSubscriptionFormError.ts
@@ -0,0 +1,19 @@
+import type { AdminSubscriptionForm } from '../../AdminSubscriptionForm';
+import type { TemplateResult } from 'lit-html';
+
+import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
+import { html, svg } from 'lit-html';
+
+export class InternalAdminSubscriptionFormError extends InternalControl {
+  renderControl(): TemplateResult {
+    return html`
+      <p
+        class="flex items-start gap-ds p-ds rounded border border-error-50"
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px); gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+      >
+        ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-error" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`}
+        <span>${(this.nucleon as AdminSubscriptionForm | null)?.data?.error_message}</span>
+      </p>
+    `;
+  }
+}
diff --git a/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormError/index.ts b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormError/index.ts
new file mode 100644
index 000000000..11df6e23a
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormError/index.ts
@@ -0,0 +1,10 @@
+import '../../../../internal/InternalControl/index';
+
+import { InternalAdminSubscriptionFormError } from './InternalAdminSubscriptionFormError';
+
+customElements.define(
+  'foxy-internal-admin-subscription-form-error',
+  InternalAdminSubscriptionFormError
+);
+
+export { InternalAdminSubscriptionFormError };
diff --git a/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLoadInCartAction/InternalAdminSubscriptionFormLoadInCartAction.test.ts b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLoadInCartAction/InternalAdminSubscriptionFormLoadInCartAction.test.ts
new file mode 100644
index 000000000..6981472d7
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLoadInCartAction/InternalAdminSubscriptionFormLoadInCartAction.test.ts
@@ -0,0 +1,100 @@
+import type { NucleonElement } from '../../../NucleonElement/NucleonElement';
+import type { Data } from '../../types';
+
+import { InternalAdminSubscriptionFormLoadInCartAction as Control } from './InternalAdminSubscriptionFormLoadInCartAction';
+import { expect, fixture, html } from '@open-wc/testing';
+import { getTestData } from '../../../../../testgen/getTestData';
+
+import '../../../NucleonElement/index';
+import './index';
+
+describe('AdminSubscriptionForm', () => {
+  describe('InternalAdminSubscriptionFormLoadInCartAction', () => {
+    it('imports and defines foxy-internal-control', () => {
+      expect(customElements.get('foxy-internal-control')).to.exist;
+    });
+
+    it('imports and defines foxy-i18n', () => {
+      expect(customElements.get('foxy-i18n')).to.exist;
+    });
+
+    it('defines itself as foxy-internal-admin-subscription-form-load-in-cart-action', () => {
+      expect(
+        customElements.get('foxy-internal-admin-subscription-form-load-in-cart-action')
+      ).to.equal(Control);
+    });
+
+    it('has a reactive property "action" that defaults to null', () => {
+      expect(new Control()).to.have.property('action', null);
+      expect(Control).to.have.deep.nested.property('properties.action', {});
+    });
+
+    it('extends InternalControl', () => {
+      expect(new Control()).to.be.instanceOf(customElements.get('foxy-internal-control'));
+    });
+
+    it('renders sub_token link from parent form by default', async () => {
+      const data = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
+      data._links['fx:sub_token_url'].href = 'https://example.com/sub_token_url';
+
+      const nucleon = await fixture<NucleonElement<Data>>(html`
+        <foxy-nucleon .data=${data}>
+          <foxy-internal-admin-subscription-form-load-in-cart-action infer="">
+          </foxy-internal-admin-subscription-form-load-in-cart-action>
+        </foxy-nucleon>
+      `);
+
+      const control = nucleon.firstElementChild as Control;
+      control.inferProperties();
+      await control.requestUpdate();
+
+      const link = control.renderRoot.querySelector('a') as HTMLAnchorElement;
+      expect(link).to.exist;
+      expect(link.href).to.equal('https://example.com/sub_token_url');
+      expect(link.target).to.equal('_blank');
+    });
+
+    it('renders cancel link when action is set to "cancel"', async () => {
+      const data = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
+      data._links['fx:sub_token_url'].href = 'https://example.com/sub_token_url';
+
+      const nucleon = await fixture<NucleonElement<Data>>(html`
+        <foxy-nucleon .data=${data}>
+          <foxy-internal-admin-subscription-form-load-in-cart-action action="cancel" infer="">
+          </foxy-internal-admin-subscription-form-load-in-cart-action>
+        </foxy-nucleon>
+      `);
+
+      const control = nucleon.firstElementChild as Control;
+      control.inferProperties();
+      await control.requestUpdate();
+
+      const link = control.renderRoot.querySelector('a') as HTMLAnchorElement;
+      expect(link).to.exist;
+      expect(link.href).to.equal('https://example.com/sub_token_url?sub_cancel=true');
+      expect(link.target).to.equal('_blank');
+    });
+
+    it('renders a translatable caption inside of the link', async () => {
+      const data = await getTestData<Data>('./hapi/subscriptions/0?zoom=transaction_template');
+      data._links['fx:sub_token_url'].href = 'https://example.com/sub_token_url';
+
+      const nucleon = await fixture<NucleonElement<Data>>(html`
+        <foxy-nucleon .data=${data}>
+          <foxy-internal-admin-subscription-form-load-in-cart-action infer="">
+          </foxy-internal-admin-subscription-form-load-in-cart-action>
+        </foxy-nucleon>
+      `);
+
+      const control = nucleon.firstElementChild as Control;
+      control.inferProperties();
+      await control.requestUpdate();
+
+      const i18n = control.renderRoot.querySelector('foxy-i18n') as HTMLElement;
+      expect(i18n).to.exist;
+      expect(i18n).to.have.attribute('key', 'caption');
+      expect(i18n).to.have.attribute('infer', '');
+      expect(i18n.closest('a')).to.exist;
+    });
+  });
+});
diff --git a/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLoadInCartAction/InternalAdminSubscriptionFormLoadInCartAction.ts b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLoadInCartAction/InternalAdminSubscriptionFormLoadInCartAction.ts
new file mode 100644
index 000000000..1cd1215cc
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLoadInCartAction/InternalAdminSubscriptionFormLoadInCartAction.ts
@@ -0,0 +1,42 @@
+import type { AdminSubscriptionForm } from '../../AdminSubscriptionForm';
+import type { PropertyDeclarations } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+
+import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+
+export class InternalAdminSubscriptionFormLoadInCartAction extends InternalControl {
+  static get properties(): PropertyDeclarations {
+    return {
+      ...super.properties,
+      action: {},
+    };
+  }
+
+  action: 'cancel' | null = null;
+
+  renderControl(): TemplateResult {
+    const form = this.nucleon as AdminSubscriptionForm | null;
+    let href: string | undefined;
+
+    try {
+      const url = new URL(form?.data?._links['fx:sub_token_url'].href ?? '');
+      if (this.action === 'cancel') url.searchParams.set('sub_cancel', 'true');
+      href = url.toString();
+    } catch {
+      href = undefined;
+    }
+
+    return html`
+      <a
+        target="_blank"
+        class="rounded font-medium text-primary group focus-outline-none focus-ring-2 focus-ring-primary-50"
+        href=${ifDefined(href)}
+      >
+        <foxy-i18n class="transition-opacity group-hover-opacity-80" infer="" key="caption">
+        </foxy-i18n>
+      </a>
+    `;
+  }
+}
diff --git a/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLoadInCartAction/index.ts b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLoadInCartAction/index.ts
new file mode 100644
index 000000000..396d7e7b1
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/internal/InternalAdminSubscriptionFormLoadInCartAction/index.ts
@@ -0,0 +1,9 @@
+import '../../../../internal/InternalControl/index';
+
+import '../../../I18n/index';
+
+import { InternalAdminSubscriptionFormLoadInCartAction as Action } from './InternalAdminSubscriptionFormLoadInCartAction';
+
+customElements.define('foxy-internal-admin-subscription-form-load-in-cart-action', Action);
+
+export { Action as InternalAdminSubscriptionFormLoadInCartAction };
diff --git a/src/elements/public/AdminSubscriptionForm/types.ts b/src/elements/public/AdminSubscriptionForm/types.ts
new file mode 100644
index 000000000..07969cf84
--- /dev/null
+++ b/src/elements/public/AdminSubscriptionForm/types.ts
@@ -0,0 +1,4 @@
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+
+export type Data = Resource<Rels.Subscription, { zoom: 'transaction_template' }>;
diff --git a/src/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm.ts b/src/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm.ts
index 2a2cc9755..c67d631ad 100644
--- a/src/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm.ts
+++ b/src/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm.ts
@@ -103,7 +103,10 @@ export class InternalApiBrowserResourceForm extends TranslatableMixin(InternalFo
 
             ${this.in({ idle: { snapshot: 'dirty' } }) || this.in({ idle: 'template' })
               ? html`
-                  <foxy-internal-submit-control infer="create" theme="tertiary-inline success">
+                  <foxy-internal-submit-control
+                    infer=${this.href ? 'submit' : 'create'}
+                    theme="tertiary-inline success"
+                  >
                   </foxy-internal-submit-control>
                 `
               : ''}
diff --git a/src/elements/public/AppliedCouponCodeForm/AppliedCouponCodeForm.test.ts b/src/elements/public/AppliedCouponCodeForm/AppliedCouponCodeForm.test.ts
index 4eb073a79..e3edac976 100644
--- a/src/elements/public/AppliedCouponCodeForm/AppliedCouponCodeForm.test.ts
+++ b/src/elements/public/AppliedCouponCodeForm/AppliedCouponCodeForm.test.ts
@@ -47,7 +47,7 @@ describe('AppliedCouponCodeForm', () => {
   });
 
   it('hides the default timestamps control', () => {
-    expect(new Form().hiddenSelector.toString()).to.equal('timestamps');
+    expect(new Form().hiddenSelector.matches('timestamps', true)).to.be.true;
   });
 
   it('renders a form header', () => {
diff --git a/src/elements/public/AttributeCard/AttributeCard.test.ts b/src/elements/public/AttributeCard/AttributeCard.test.ts
index 3048aa39a..1df8ce58a 100644
--- a/src/elements/public/AttributeCard/AttributeCard.test.ts
+++ b/src/elements/public/AttributeCard/AttributeCard.test.ts
@@ -15,6 +15,12 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { createRouter } from '../../../server/index';
 
 describe('AttributeCard', () => {
+  const OriginalResizeObserver = window.ResizeObserver;
+
+  // @ts-expect-error disabling ResizeObserver because it errors in test env
+  before(() => (window.ResizeObserver = undefined));
+  after(() => (window.ResizeObserver = OriginalResizeObserver));
+
   it('extends NucleonElement', () => {
     expect(new AttributeCard()).to.be.instanceOf(NucleonElement);
   });
diff --git a/src/elements/public/AttributeCard/AttributeCard.ts b/src/elements/public/AttributeCard/AttributeCard.ts
index 5c16022ca..96f2df057 100644
--- a/src/elements/public/AttributeCard/AttributeCard.ts
+++ b/src/elements/public/AttributeCard/AttributeCard.ts
@@ -75,7 +75,7 @@ export class AttributeCard extends Base<Data> {
       <div
         aria-live="polite"
         aria-busy=${this.in('busy')}
-        class="h-s flex flex-col justify-center relative text-body text-m font-lumo leading-xs sm-flex-row sm-items-center sm-justify-between"
+        class="relative text-body text-m font-lumo leading-xs sm-flex sm-items-center sm-justify-between"
       >
         ${hiddenSelector.matches('name', true) ? '' : this.__renderName()}
         ${hiddenSelector.matches('value', true) ? '' : this.__renderValue()}
@@ -83,15 +83,15 @@ export class AttributeCard extends Base<Data> {
         <div
           class=${classMap({
             'transition duration-250 ease-in-out absolute inset-0 flex': true,
+            'items-center justify-center': true,
             'opacity-0 pointer-events-none': isLoaded,
           })}
         >
           <foxy-spinner
             data-testid="spinner"
-            class="m-auto"
             state=${this.in('fail') ? 'error' : isEmpty ? 'empty' : 'busy'}
             lang=${this.lang}
-            ns="${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}"
+            ns="${this.ns} spinner"
           >
           </foxy-spinner>
         </div>
diff --git a/src/elements/public/CartForm/CartForm.stories.ts b/src/elements/public/CartForm/CartForm.stories.ts
index 49b4bf3ab..6ef0e0ea2 100644
--- a/src/elements/public/CartForm/CartForm.stories.ts
+++ b/src/elements/public/CartForm/CartForm.stories.ts
@@ -5,51 +5,86 @@ import { getMeta } from '../../../storygen/getMeta';
 import { getStory } from '../../../storygen/getStory';
 
 const summary: Summary = {
-  href: 'https://demo.api/hapi/carts/0',
-  parent: 'https://demo.api/hapi/carts',
+  href: 'https://demo.api/hapi/carts/0?zoom=discounts',
+  parent: 'https://demo.api/hapi/carts?zoom=discounts',
   nucleon: true,
   localName: 'foxy-cart-form',
   translatable: true,
   configurable: {
-    buttons: ['view-as-customer', 'delete', 'create'],
+    sections: ['totals', 'timestamps'],
+    buttons: [
+      'view-as-customer',
+      'delete',
+      'create',
+      'undo',
+      'submit',
+      'header:copy-id',
+      'header:copy-json',
+    ],
     inputs: [
-      'customer-type',
-      'customer',
-      'template-set-uri',
+      'general',
+      'general:template-set-uri',
+      'general:language',
+      'general:customer-uri',
+      'general:customer-email',
+      'billing',
+      'billing:payment-method-uri',
+      'billing:billing-address',
+      'billing:billing-address:name',
+      'billing:billing-address:name:first-name',
+      'billing:billing-address:name:last-name',
+      'billing:billing-address:extra',
+      'billing:billing-address:extra:company',
+      'billing:billing-address:extra:phone',
+      'billing:billing-address:address',
+      'billing:billing-address:address:address1',
+      'billing:billing-address:address:address2',
+      'billing:billing-address:address:country',
+      'billing:billing-address:address:state',
+      'billing:billing-address:address:city',
+      'billing:billing-address:address:postal-code',
+      'shipping',
+      'shipping:use-customer-shipping-address',
+      'shipping:shipping-address',
+      'shipping:shipping-address:name',
+      'shipping:shipping-address:name:first-name',
+      'shipping:shipping-address:name:last-name',
+      'shipping:shipping-address:extra',
+      'shipping:shipping-address:extra:company',
+      'shipping:shipping-address:extra:phone',
+      'shipping:shipping-address:address',
+      'shipping:shipping-address:address:address1',
+      'shipping:shipping-address:address:address2',
+      'shipping:shipping-address:address:country',
+      'shipping:shipping-address:address:state',
+      'shipping:shipping-address:address:city',
+      'shipping:shipping-address:address:postal-code',
       'items',
       'applied-coupon-codes',
       'custom-fields',
       'attributes',
-      'billing-first-name',
-      'billing-last-name',
-      'billing-company',
-      'billing-phone',
-      'billing-address1',
-      'billing-address2',
-      'billing-country',
-      'billing-region',
-      'billing-city',
-      'billing-postal-code',
-      'shipping-first-name',
-      'shipping-last-name',
-      'shipping-company',
-      'shipping-phone',
-      'shipping-address1',
-      'shipping-address2',
-      'shipping-country',
-      'shipping-region',
-      'shipping-city',
-      'shipping-postal-code',
     ],
   },
 };
 
+const ext = `
+  payment-card-embed-url="https://embed.foxy.io/v1.html"
+  item-categories="https://demo.api/hapi/item_categories?store_id=0"
+  template-sets="https://demo.api/hapi/template_sets?store_id=0"
+  locale-codes="https://demo.api/hapi/property_helpers/7"
+  languages="https://demo.api/hapi/property_helpers/6"
+  customers="https://demo.api/hapi/customers?store_id=0"
+  countries="https://demo.api/hapi/property_helpers/3"
+  regions="https://demo.api/hapi/property_helpers/4"
+  coupons="https://demo.api/hapi/coupons?store_id=0"
+`;
+
 export default getMeta(summary);
 
-export const Playground = getStory({ ...summary, code: true });
-export const Empty = getStory(summary);
-export const Error = getStory(summary);
-export const Busy = getStory(summary);
+export const Playground = getStory({ ...summary, ext, code: true });
+export const Empty = getStory({ ...summary, ext });
+export const Error = getStory({ ...summary, ext });
+export const Busy = getStory({ ...summary, ext });
 
 Empty.args.href = '';
 Error.args.href = 'https://demo.api/virtual/empty?status=404';
diff --git a/src/elements/public/CartForm/CartForm.test.ts b/src/elements/public/CartForm/CartForm.test.ts
index 54f1e0e65..8dbb3ac63 100644
--- a/src/elements/public/CartForm/CartForm.test.ts
+++ b/src/elements/public/CartForm/CartForm.test.ts
@@ -1,39 +1,50 @@
-import type { ItemRenderer } from '../CollectionPage/types';
-import type { FormRenderer } from '../FormDialog/types';
+import type { InternalResourcePickerControl } from '../../internal/InternalResourcePickerControl/InternalResourcePickerControl';
+import type { NucleonElement } from '../NucleonElement/NucleonElement';
 import type { FetchEvent } from '../NucleonElement/FetchEvent';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
 
 import './index';
 
-import { InternalCartFormViewAsCustomerControl } from './internal/InternalCartFormViewAsCustomerControl/InternalCartFormViewAsCustomerControl';
+import { InternalCartFormCreateSessionAction } from './internal/InternalCartFormCreateSessionAction/InternalCartFormCreateSessionAction';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { InternalAsyncComboBoxControl } from '../../internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl';
-import { InternalAsyncListControl } from '../../internal/InternalAsyncListControl/InternalAsyncListControl';
-import { InternalSelectControl } from '../../internal/InternalSelectControl/InternalSelectControl';
-import { AppliedCouponCodeCard } from '../AppliedCouponCodeCard/AppliedCouponCodeCard';
-import { AppliedCouponCodeForm } from '../AppliedCouponCodeForm/AppliedCouponCodeForm';
-import { InternalDeleteControl } from '../../internal/InternalDeleteControl/InternalDeleteControl';
-import { InternalSubmitControl } from '../../internal/InternalSubmitControl/InternalSubmitControl';
-import { InternalTextControl } from '../../internal/InternalTextControl/InternalTextControl';
 import { CartForm as Form } from './CartForm';
-import { CustomFieldCard } from '../CustomFieldCard/CustomFieldCard';
-import { CustomFieldForm } from '../CustomFieldForm/CustomFieldForm';
-import { BooleanSelector } from '@foxy.io/sdk/core';
-import { NucleonElement } from '../NucleonElement/NucleonElement';
-import { getByTestClass } from '../../../testgen/getByTestClass';
-import { AttributeCard } from '../AttributeCard/AttributeCard';
-import { AttributeForm } from '../AttributeForm/AttributeForm';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
-import { DiscountCard } from '../DiscountCard/DiscountCard';
 import { createRouter } from '../../../server/index';
 import { getTestData } from '../../../testgen/getTestData';
-import { getByTestId } from '../../../testgen/getByTestId';
-import { FormDialog } from '../FormDialog';
-import { getByKey } from '../../../testgen/getByKey';
-import { ItemCard } from '../ItemCard/ItemCard';
-import { ItemForm } from '../ItemForm/ItemForm';
-import { spread } from '@open-wc/lit-helpers';
-import { I18n } from '../I18n/I18n';
-import { fake, stub } from 'sinon';
+import { stub } from 'sinon';
+import { Type } from '../QueryBuilder/types';
+
+async function waitForIdle(element: Form) {
+  await waitUntil(() => element.in('idle'), '', { timeout: 5000 });
+  await waitUntil(
+    () => {
+      const loaders = element.renderRoot.querySelectorAll<NucleonElement<any>>('foxy-nucleon');
+      return [...loaders].every(loader => loader.in('idle'));
+    },
+    '',
+    { timeout: 5000 }
+  );
+}
+
+async function createElement(router = createRouter()) {
+  return await fixture<Form>(html`
+    <foxy-cart-form
+      payment-card-embed-url="https://embed.foxy.io/v1.html"
+      item-categories="https://demo.api/hapi/item_categories?store_id=0"
+      template-sets="https://demo.api/hapi/template_sets?store_id=0"
+      locale-codes="https://demo.api/hapi/property_helpers/7"
+      languages="https://demo.api/hapi/property_helpers/6"
+      customers="https://demo.api/hapi/customers?store_id=0"
+      countries="https://demo.api/hapi/property_helpers/3"
+      regions="https://demo.api/hapi/property_helpers/4"
+      coupons="https://demo.api/hapi/coupons?store_id=0"
+      href="https://demo.api/hapi/carts/0?zoom=discounts"
+      @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+    >
+    </foxy-cart-form>
+  `);
+}
 
 describe('CartForm', () => {
   const OriginalResizeObserver = window.ResizeObserver;
@@ -42,99 +53,124 @@ describe('CartForm', () => {
   before(() => (window.ResizeObserver = undefined));
   after(() => (window.ResizeObserver = OriginalResizeObserver));
 
-  it('imports and defines foxy-internal-async-combo-box-control', () => {
-    const element = customElements.get('foxy-internal-async-combo-box-control');
-    expect(element).to.equal(InternalAsyncComboBoxControl);
+  it('imports and defines foxy-internal-resource-picker-control', () => {
+    const element = customElements.get('foxy-internal-resource-picker-control');
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-internal-async-list-control', () => {
     const element = customElements.get('foxy-internal-async-list-control');
-    expect(element).to.equal(InternalAsyncListControl);
+    expect(element).to.exist;
   });
 
-  it('imports and defines foxy-internal-select-control', () => {
-    const element = customElements.get('foxy-internal-select-control');
-    expect(element).to.equal(InternalSelectControl);
+  it('imports and defines foxy-internal-summary-control', () => {
+    const element = customElements.get('foxy-internal-summary-control');
+    expect(element).to.exist;
   });
 
-  it('imports and defines foxy-internal-delete-control', () => {
-    const element = customElements.get('foxy-internal-delete-control');
-    expect(element).to.equal(InternalDeleteControl);
+  it('imports and defines foxy-internal-switch-control', () => {
+    const element = customElements.get('foxy-internal-switch-control');
+    expect(element).to.exist;
   });
 
-  it('imports and defines foxy-internal-submit-control', () => {
-    const element = customElements.get('foxy-internal-submit-control');
-    expect(element).to.equal(InternalSubmitControl);
+  it('imports and defines foxy-internal-select-control', () => {
+    const element = customElements.get('foxy-internal-select-control');
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-internal-text-control', () => {
     const element = customElements.get('foxy-internal-text-control');
-    expect(element).to.equal(InternalTextControl);
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-internal-form', () => {
     const element = customElements.get('foxy-internal-form');
-    expect(element).to.equal(InternalForm);
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-applied-coupon-code-card', () => {
     const element = customElements.get('foxy-applied-coupon-code-card');
-    expect(element).to.equal(AppliedCouponCodeCard);
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-applied-coupon-code-form', () => {
     const element = customElements.get('foxy-applied-coupon-code-form');
-    expect(element).to.equal(AppliedCouponCodeForm);
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-custom-field-card', () => {
     const element = customElements.get('foxy-custom-field-card');
-    expect(element).to.equal(CustomFieldCard);
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-custom-field-form', () => {
     const element = customElements.get('foxy-custom-field-form');
-    expect(element).to.equal(CustomFieldForm);
+    expect(element).to.exist;
+  });
+
+  it('imports and defines foxy-template-set-card', () => {
+    const element = customElements.get('foxy-template-set-card');
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-nucleon', () => {
     const element = customElements.get('foxy-nucleon');
-    expect(element).to.equal(NucleonElement);
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-attribute-card', () => {
     const element = customElements.get('foxy-attribute-card');
-    expect(element).to.equal(AttributeCard);
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-attribute-form', () => {
     const element = customElements.get('foxy-attribute-form');
-    expect(element).to.equal(AttributeForm);
+    expect(element).to.exist;
   });
 
-  it('imports and defines foxy-discount-card', () => {
-    const element = customElements.get('foxy-discount-card');
-    expect(element).to.equal(DiscountCard);
+  it('imports and defines foxy-customer-card', () => {
+    const element = customElements.get('foxy-customer-card');
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-item-card', () => {
     const element = customElements.get('foxy-item-card');
-    expect(element).to.equal(ItemCard);
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-item-form', () => {
     const element = customElements.get('foxy-item-form');
-    expect(element).to.equal(ItemForm);
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-i18n', () => {
     const element = customElements.get('foxy-i18n');
-    expect(element).to.equal(I18n);
+    expect(element).to.exist;
+  });
+
+  it('imports and defines foxy-internal-cart-form-create-session-action', () => {
+    const element = customElements.get('foxy-internal-cart-form-create-session-action');
+    expect(element).to.exist;
+  });
+
+  it('imports and defines foxy-internal-cart-form-address-summary-item', () => {
+    const element = customElements.get('foxy-internal-cart-form-address-summary-item');
+    expect(element).to.exist;
+  });
+
+  it('imports and defines foxy-internal-cart-form-payment-method-form', () => {
+    const element = customElements.get('foxy-internal-cart-form-payment-method-form');
+    expect(element).to.exist;
+  });
+
+  it('imports and defines foxy-internal-cart-form-payment-method-card', () => {
+    const element = customElements.get('foxy-internal-cart-form-payment-method-card');
+    expect(element).to.exist;
   });
 
-  it('imports and defines foxy-internal-cart-form-view-as-customer-control', () => {
-    const element = customElements.get('foxy-internal-cart-form-view-as-customer-control');
-    expect(element).to.equal(InternalCartFormViewAsCustomerControl);
+  it('imports and defines foxy-internal-cart-form-totals-control', () => {
+    const element = customElements.get('foxy-internal-cart-form-totals-control');
+    expect(element).to.exist;
   });
 
   it('imports and defines itself as foxy-cart-form', () => {
@@ -151,6 +187,16 @@ describe('CartForm', () => {
     expect(new Form()).to.have.property('ns', 'cart-form');
   });
 
+  it('has a reactive property "paymentCardEmbedUrl"', () => {
+    expect(new Form()).to.have.property('paymentCardEmbedUrl', null);
+    expect(Form).to.have.nested.property('properties.paymentCardEmbedUrl');
+    expect(Form).to.not.have.nested.property('properties.paymentCardEmbedUrl.type');
+    expect(Form).to.have.nested.property(
+      'properties.paymentCardEmbedUrl.attribute',
+      'payment-card-embed-url'
+    );
+  });
+
   it('has a reactive property "itemCategories"', () => {
     expect(new Form()).to.have.property('itemCategories', null);
     expect(Form).to.have.nested.property('properties.itemCategories');
@@ -172,6 +218,12 @@ describe('CartForm', () => {
     expect(Form).to.have.nested.property('properties.localeCodes.attribute', 'locale-codes');
   });
 
+  it('has a reactive property "languages"', () => {
+    expect(new Form()).to.have.property('languages', null);
+    expect(Form).to.have.nested.property('properties.languages');
+    expect(Form).to.not.have.nested.property('properties.languages.type');
+  });
+
   it('has a reactive property "customers"', () => {
     expect(new Form()).to.have.property('customers', null);
     expect(Form).to.have.nested.property('properties.customers');
@@ -216,14 +268,14 @@ describe('CartForm', () => {
     expect(form.errors).to.not.include('billing-last-name:v8n_too_long');
   });
 
-  it('produces the billing-region:v8n_too_long error if "billing_region" is longer than 50 characters', () => {
+  it('produces the billing-state:v8n_too_long error if "billing_state" is longer than 50 characters', () => {
     const form = new Form();
 
-    form.edit({ billing_region: 'A'.repeat(51) });
-    expect(form.errors).to.include('billing-region:v8n_too_long');
+    form.edit({ billing_state: 'A'.repeat(51) });
+    expect(form.errors).to.include('billing-state:v8n_too_long');
 
-    form.edit({ billing_region: 'A'.repeat(50) });
-    expect(form.errors).to.not.include('billing-region:v8n_too_long');
+    form.edit({ billing_state: 'A'.repeat(50) });
+    expect(form.errors).to.not.include('billing-state:v8n_too_long');
   });
 
   it('produces the billing-city:v8n_too_long error if "billing_city" is longer than 50 characters', () => {
@@ -306,14 +358,14 @@ describe('CartForm', () => {
     expect(form.errors).to.not.include('shipping-last-name:v8n_too_long');
   });
 
-  it('produces the shipping-region:v8n_too_long error if "shipping_region" is longer than 50 characters', () => {
+  it('produces the shipping-state:v8n_too_long error if "shipping_state" is longer than 50 characters', () => {
     const form = new Form();
 
-    form.edit({ shipping_region: 'A'.repeat(51) });
-    expect(form.errors).to.include('shipping-region:v8n_too_long');
+    form.edit({ shipping_state: 'A'.repeat(51) });
+    expect(form.errors).to.include('shipping-state:v8n_too_long');
 
-    form.edit({ shipping_region: 'A'.repeat(50) });
-    expect(form.errors).to.not.include('shipping-region:v8n_too_long');
+    form.edit({ shipping_state: 'A'.repeat(50) });
+    expect(form.errors).to.not.include('shipping-state:v8n_too_long');
   });
 
   it('produces the shipping-city:v8n_too_long error if "shipping_city" is longer than 50 characters', () => {
@@ -376,1383 +428,415 @@ describe('CartForm', () => {
     expect(form.errors).to.not.include('shipping-postal-code:v8n_too_long');
   });
 
-  it('renders a form header', () => {
+  it('hides customer email when customer uri is set', () => {
     const form = new Form();
-    const renderHeaderMethod = stub(form, 'renderHeader');
-    form.render();
-    expect(renderHeaderMethod).to.have.been.called;
+    expect(form.hiddenSelector.matches('general:customer-email', true)).to.be.false;
+    form.edit({ customer_uri: 'https://demo.api/hapi/customers/0' });
+    expect(form.hiddenSelector.matches('general:customer-email', true)).to.be.true;
   });
 
-  it('renders order section title and description', async () => {
-    const element = await fixture<Form>(html`<foxy-cart-form></foxy-cart-form>`);
-    const title = await getByKey(element, 'order_section_title');
-    const description = await getByKey(element, 'order_section_description');
-
-    expect(title).to.exist;
-    expect(title).to.have.property('infer', '');
-
-    expect(description).to.exist;
-    expect(description).to.have.property('infer', '');
+  it('hides payment method uri when customer uri is not set', async () => {
+    const form = new Form();
+    form.data = await getTestData('https://demo.api/hapi/carts/0?zoom=discounts');
+    form.edit({ customer_uri: '' });
+    expect(form.hiddenSelector.matches('billing:payment-method-uri', true)).to.be.true;
+    form.edit({ customer_uri: 'https://demo.api/hapi/customers/0' });
+    expect(form.hiddenSelector.matches('billing:payment-method-uri', true)).to.be.false;
   });
 
-  it('renders a select control for customer type', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}></foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(
-      `[infer="customer-type"]`
-    ) as InternalSelectControl;
-
-    expect(control).to.be.instanceOf(InternalSelectControl);
-    expect(control).to.have.deep.property('options', [
-      { label: 'option_new', value: 'new' },
-      { label: 'option_guest', value: 'guest' },
-      { label: 'option_regular', value: 'regular' },
-    ]);
-
-    expect(control.getValue()).to.equal('new');
-
-    const api = new NucleonElement.API(element);
-    await api.fetch('https://demo.api/hapi/customers/0', {
-      method: 'PATCH',
-      body: JSON.stringify({ is_anonymous: true }),
-    });
-    element.edit({ customer_uri: 'https://demo.api/hapi/customers/0' });
-    await waitUntil(() => control.getValue() === 'guest', '', { timeout: 5000 });
-
-    expect(control.getValue()).to.equal('guest');
-
-    await api.fetch('https://demo.api/hapi/customers/0', {
-      method: 'PATCH',
-      body: JSON.stringify({ is_anonymous: false }),
+  it('hides shipping address when "Use billing address for shipping" is checked', async () => {
+    const form = new Form();
+    form.data = await getTestData('https://demo.api/hapi/carts/0?zoom=discounts');
+    form.edit({ use_customer_shipping_address: false });
+    expect(form.hiddenSelector.matches('shipping:shipping-address', true)).to.be.true;
+    form.edit({ use_customer_shipping_address: true });
+    expect(form.hiddenSelector.matches('shipping:shipping-address', true)).to.be.false;
+  });
+
+  [
+    'applied-coupon-codes',
+    'custom-fields',
+    'attributes',
+    'shipping',
+    'billing',
+    'totals',
+    'items',
+  ].forEach(control => {
+    it(`hides "${control}" when in template state`, async () => {
+      const form = new Form();
+      expect(form.hiddenSelector.matches(control, true)).to.be.true;
+      form.data = await getTestData('https://demo.api/hapi/carts/0?zoom=discounts');
+      expect(form.hiddenSelector.matches(control, true)).to.be.false;
     });
-    element.edit({ customer_uri: '' });
-    await element.requestUpdate();
-    element.edit({ customer_uri: 'https://demo.api/hapi/customers/0' });
-    await waitUntil(() => control.getValue() === 'regular', '', { timeout: 5000 });
+  });
 
-    expect(control.getValue()).to.equal('regular');
+  it('renders a form header', () => {
+    const form = new Form();
+    const renderHeaderMethod = stub(form, 'renderHeader');
+    form.render();
+    expect(renderHeaderMethod).to.have.been.called;
   });
 
-  it('renders an async combo box control for customer', async () => {
+  it('renders "View as customer" button for existing carts', async () => {
     const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        customers="https://demo.api/hapi/customers"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    const control = $.querySelector(`[infer="customer"]`) as InternalAsyncComboBoxControl;
-
-    expect(control).to.be.instanceOf(InternalAsyncComboBoxControl);
-    expect(control).to.have.attribute('item-label-path', 'email');
-    expect(control).to.have.attribute('item-value-path', '_links.self.href');
-    expect(control).to.have.attribute('item-id-path', '_links.self.href');
-    expect(control).to.have.attribute('allow-custom-value');
-    expect(control).to.have.attribute('first', 'https://demo.api/hapi/customers?is_anonymous=0');
-
-    const customerTypeControl = $.querySelector(`[infer="customer-type"]`) as InternalSelectControl;
-    customerTypeControl.setValue('guest');
-    await element.requestUpdate();
-    expect(control).to.have.attribute('first', 'https://demo.api/hapi/customers?is_anonymous=1');
-
-    element.edit({ customer_email: 'test@example.com', customer_uri: '' });
-    expect(control.getValue()).to.equal('test@example.com');
-
-    element.edit({ customer_uri: 'https://demo.api/hapi/customers/0' });
-    expect(control.getValue()).to.equal('https://demo.api/hapi/customers/0');
-
-    control.setValue('foo@example.com');
-    expect(element).to.have.nested.property('form.customer_email', 'foo@example.com');
-    expect(element).to.have.nested.property('form.customer_uri', '');
-
-    control.setValue('https://demo.api/hapi/customers/0');
-    expect(element).to.not.have.nested.property('form.customer_email');
-    expect(element).to.have.nested.property(
-      'form.customer_uri',
-      'https://demo.api/hapi/customers/0'
-    );
-
-    element.undo();
-    await element.requestUpdate();
-    expect(control).to.have.property('selectedItem', null);
+    const element = await createElement(router);
 
-    element.edit({ customer_uri: 'https://demo.api/hapi/customers/0' });
-    const customer = await getTestData('https://demo.api/hapi/customers/0', router);
-    await waitUntil(() => !!control.selectedItem, '', { timeout: 5000 });
-    expect(control).to.have.deep.property('selectedItem', customer);
+    await waitForIdle(element);
+    const control = element.renderRoot.querySelector(`[infer="view-as-customer"]`);
+    expect(control).to.be.instanceOf(InternalCartFormCreateSessionAction);
   });
 
-  it('renders an async combo box control for template set uri', async () => {
+  it('renders General summary', async () => {
     const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        template-sets="https://demo.api/hapi/template_sets"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    const control = $.querySelector(`[infer="template-set-uri"]`) as InternalAsyncComboBoxControl;
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    expect(control).to.be.instanceOf(InternalAsyncComboBoxControl);
-    expect(control).to.have.attribute('item-label-path', 'description');
-    expect(control).to.have.attribute('item-value-path', '_links.self.href');
-    expect(control).to.have.attribute('item-id-path', '_links.self.href');
-    expect(control).to.have.attribute('first', 'https://demo.api/hapi/template_sets');
-    expect(control).to.have.property('selectedItem', null);
-
-    element.edit({ template_set_uri: 'https://demo.api/hapi/template_sets/0' });
-    const templateSet = await getTestData('https://demo.api/hapi/template_sets/0', router);
-    await waitUntil(() => !!control.selectedItem, '', { timeout: 5000 });
-    expect(control).to.have.deep.property('selectedItem', templateSet);
+    const summary = element.renderRoot.querySelector(`[infer="general"]`);
+    expect(summary).to.exist;
+    expect(summary?.localName).to.equal('foxy-internal-summary-control');
   });
 
-  it('renders an async list control for items', async () => {
-    let isCustomerLoaded = false;
-
+  it('renders resource picker control for template set uri inside General summary', async () => {
     const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        item-categories="https://demo.api/hapi/item_categories"
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        coupons="https://demo.api/hapi/coupons"
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => {
-          router.handleEvent(evt)?.handlerPromise.then(() => {
-            if (evt.request.url === 'https://demo.api/hapi/customers/0') {
-              setTimeout(() => (isCustomerLoaded = true));
-            }
-          });
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    await waitUntil(() => !!element.data && isCustomerLoaded, '', { timeout: 5000 });
-
-    const $ = element.renderRoot;
-    const control = $.querySelector(`[infer="items"]`) as InternalAsyncListControl;
-
-    expect(control).to.be.instanceOf(InternalAsyncListControl);
-    expect(control).to.have.attribute('limit', '5');
-    expect(control).to.have.attribute(
-      'first',
-      'https://demo.api/hapi/items?cart_id=0&zoom=item_options'
-    );
-
-    const card = await fixture<ItemCard>(
-      (control.item as ItemRenderer)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/hapi/carts/0'],
-        hidden: false,
-        parent: 'https://demo.api/hapi/items',
-        spread,
-        props: {},
-        group: '',
-        html,
-        lang: 'en',
-        href: 'https://demo.api/hapi/items/0',
-        data: null,
-        next: null,
-        ns: 'item-card',
-      })
-    );
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    expect(card).to.have.attribute('locale-codes', 'https://demo.api/hapi/property_helpers/7');
-    expect(card).to.have.attribute('parent', 'https://demo.api/hapi/items');
-    expect(card).to.have.attribute('href', 'https://demo.api/hapi/items/0');
-    expect(card).to.have.deep.property('related', ['https://demo.api/hapi/carts/0']);
-
-    const formHandleUpdate = fake();
-    const formHandleFetch = fake();
-    const formDialog = await fixture<FormDialog>(html`
-      <foxy-form-dialog
-        parent="https://demo.api/hapi/items"
-        href="https://demo.api/hapi/items/0"
-        .related=${['https://demo.api/hapi/carts/0']}
-      >
-      </foxy-form-dialog>
-    `);
-
-    const form = await fixture(
-      (control.form as FormRenderer)({
-        handleUpdate: formHandleUpdate,
-        handleFetch: formHandleFetch,
-        dialog: formDialog,
-        spread,
-        html,
-      })
+    const control = element.renderRoot.querySelector(
+      `[infer="general"] [infer="template-set-uri"]`
     );
 
-    expect(form).to.have.attribute(
-      'customer-addresses',
-      'https://demo.api/hapi/customer_addresses?customer_id=0'
+    expect(control).to.exist;
+    expect(control?.localName).to.equal('foxy-internal-resource-picker-control');
+    expect(control?.getAttribute('layout')).to.equal('summary-item');
+    expect(control?.getAttribute('item')).to.equal('foxy-template-set-card');
+    expect(control?.getAttribute('first')).to.equal(
+      'https://demo.api/hapi/template_sets?store_id=0'
     );
-
-    expect(form).to.have.attribute('item-categories', 'https://demo.api/hapi/item_categories');
-    expect(form).to.have.attribute('locale-codes', 'https://demo.api/hapi/property_helpers/7');
-    expect(form).to.have.attribute('coupons', 'https://demo.api/hapi/coupons');
-    expect(form).to.have.attribute('parent', 'https://demo.api/hapi/items');
-    expect(form).to.have.attribute('href', 'https://demo.api/hapi/items/0');
-    expect(form).to.have.attribute('infer', '');
-    expect(form).to.have.attribute('id', 'form');
-    expect(form).to.have.deep.property('related', ['https://demo.api/hapi/carts/0']);
-
-    formHandleUpdate.resetHistory();
-    form.dispatchEvent(new CustomEvent('update'));
-    expect(formHandleUpdate).to.have.been.called;
-
-    formHandleFetch.resetHistory();
-    form.dispatchEvent(new CustomEvent('fetch'));
-    expect(formHandleFetch).to.have.been.called;
   });
 
-  it('renders an async list control for applied coupon codes', async () => {
+  it('renders select control for language inside General summary', async () => {
     const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-
-    const $ = element.renderRoot;
-    const control = $.querySelector(`[infer="applied-coupon-codes"]`) as InternalAsyncListControl;
-
-    expect(control).to.be.instanceOf(InternalAsyncListControl);
-    expect(control).to.have.attribute('limit', '5');
-    expect(control).to.have.attribute('alert');
-    expect(control).to.have.attribute('item', 'foxy-applied-coupon-code-card');
-    expect(control).to.have.attribute('form', 'foxy-applied-coupon-code-form');
-    expect(control).to.have.attribute(
-      'first',
-      'https://demo.api/hapi/applied_coupon_codes?cart_id=0'
+    const element = await createElement(router);
+    const languages = await getTestData<Resource<Rels.Languages>>(
+      'https://demo.api/hapi/property_helpers/6',
+      router
     );
-  });
-
-  it('renders an async list control for custom fields', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-
-    const $ = element.renderRoot;
-    const control = $.querySelector(`[infer="custom-fields"]`) as InternalAsyncListControl;
-
-    expect(control).to.be.instanceOf(InternalAsyncListControl);
-    expect(control).to.have.attribute('limit', '5');
-    expect(control).to.have.attribute('alert');
-    expect(control).to.have.attribute('item', 'foxy-custom-field-card');
-    expect(control).to.have.attribute('form', 'foxy-custom-field-form');
-    expect(control).to.have.attribute('first', 'https://demo.api/hapi/custom_fields?cart_id=0');
-  });
-
-  it('renders an async list control for attributes', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-
-    const $ = element.renderRoot;
-    const control = $.querySelector(`[infer="attributes"]`) as InternalAsyncListControl;
-
-    expect(control).to.be.instanceOf(InternalAsyncListControl);
-    expect(control).to.have.attribute('limit', '5');
-    expect(control).to.have.attribute('alert');
-    expect(control).to.have.attribute('item', 'foxy-attribute-card');
-    expect(control).to.have.attribute('form', 'foxy-attribute-form');
-    expect(control).to.have.attribute('first', 'https://demo.api/hapi/cart_attributes?cart_id=0');
-  });
-
-  it('renders billing section title and description', async () => {
-    const element = await fixture<Form>(html`<foxy-cart-form></foxy-cart-form>`);
-    const title = await getByKey(element, 'billing_section_title');
-    const description = await getByKey(element, 'billing_section_description');
-
-    expect(title).to.exist;
-    expect(title).to.have.property('infer', '');
-
-    expect(description).to.exist;
-    expect(description).to.have.property('infer', '');
-  });
-
-  it('renders a text control for billing first name', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(`[infer="billing-first-name"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
-
-  it('renders a text control for billing last name', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
 
-    const control = element.renderRoot.querySelector(`[infer="billing-last-name"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
-
-  it('renders a text control for billing company', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(`[infer="billing-company"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
-
-  it('renders a text control for billing phone', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(`[infer="billing-phone"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
-
-  it('renders a text control for billing address line 1', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(`[infer="billing-address-one"]`);
-
-    expect(control).to.be.instanceOf(InternalTextControl);
-    expect(control).to.have.attribute('property', 'billing_address1');
-  });
+    await waitForIdle(element);
+    const control = element.renderRoot.querySelector(`[infer="general"] [infer="language"]`);
 
-  it('renders a text control for billing address line 2', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(`[infer="billing-address-two"]`);
-
-    expect(control).to.be.instanceOf(InternalTextControl);
-    expect(control).to.have.attribute('property', 'billing_address2');
+    expect(control).to.exist;
+    expect(control).to.have.property('localName', 'foxy-internal-select-control');
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.deep.property(
+      'options',
+      Object.entries(languages.values).map(([value, rawLabel]) => ({ value, rawLabel }))
+    );
   });
 
-  it('renders a select control for billing country', async () => {
-    let isHelperLoaded = false;
+  it('renders resource picker control for customer uri inside General summary', async () => {
     const router = createRouter();
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/property_helpers/3', {
-        method: 'PATCH',
-        body: JSON.stringify({
-          values: {
-            GB: {
-              default: 'United Kingdom',
-              cc2: 'GB',
-              cc3: 'GBR',
-              alternate_values: ['Great Britain', 'England', 'Northern Ireland', 'Britain', 'UK'],
-              boost: 4,
-              has_regions: false,
-              regions_required: false,
-              regions_type: 'county',
-              active: true,
-            },
-            US: {
-              default: 'United States',
-              cc2: 'US',
-              cc3: 'USA',
-              alternate_values: ['USA', 'United States of America', 'America'],
-              boost: 4.5,
-              has_regions: true,
-              regions_required: true,
-              regions_type: 'state',
-              active: true,
-            },
-          },
-        }),
-      })
-    )?.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        countries="https://demo.api/hapi/property_helpers/3"
-        @fetch=${(evt: FetchEvent) => {
-          router.handleEvent(evt)?.handlerPromise.then(() => {
-            if (evt.request.url === 'https://demo.api/hapi/property_helpers/3') {
-              setTimeout(() => (isHelperLoaded = true));
-            }
-          });
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    await waitUntil(() => isHelperLoaded, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector(`[infer="billing-country"]`);
-
-    expect(control).to.be.instanceOf(InternalSelectControl);
-    expect(control).to.have.deep.property('options', [
-      { label: 'United Kingdom', value: 'GB' },
-      { label: 'United States', value: 'US' },
-    ]);
-  });
-
-  it('renders a select control for billing region', async () => {
-    let isHelperLoaded = false;
-    const router = createRouter();
+    const control = element.renderRoot.querySelector<InternalResourcePickerControl>(
+      `[infer="general"] [infer="customer-uri"]`
+    );
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/property_helpers/4', {
-        method: 'PATCH',
-        body: JSON.stringify({
-          values: {
-            SD: {
-              default: 'South Dakota',
-              code: 'SD',
-              alternate_values: [],
-              boost: 1,
-              active: true,
-            },
-            TN: {
-              default: 'Tennessee',
-              code: 'TN',
-              alternate_values: [],
-              boost: 1,
-              active: true,
-            },
-          },
-        }),
-      })
-    )?.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        regions="https://demo.api/hapi/property_helpers/4"
-        @fetch=${(evt: FetchEvent) => {
-          router.handleEvent(evt)?.handlerPromise.then(() => {
-            if (evt.request.url === 'https://demo.api/hapi/property_helpers/4?country_code=US') {
-              setTimeout(() => (isHelperLoaded = true));
-            }
-          });
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    element.edit({ billing_country: 'US' });
-    await waitUntil(() => isHelperLoaded, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector(`[infer="billing-region"]`);
-
-    expect(control).to.be.instanceOf(InternalSelectControl);
-    expect(control).to.have.deep.property('options', [
-      { label: 'South Dakota', value: 'SD' },
-      { label: 'Tennessee', value: 'TN' },
+    expect(control).to.exist;
+    expect(control?.localName).to.equal('foxy-internal-resource-picker-control');
+    expect(control?.getAttribute('layout')).to.equal('summary-item');
+    expect(control?.getAttribute('item')).to.equal('foxy-customer-card');
+    expect(control?.getAttribute('first')).to.equal('https://demo.api/hapi/customers?store_id=0');
+
+    expect(control).to.have.deep.property('filters', [
+      { label: 'filter_email', path: 'email', type: Type.String },
+      {
+        label: 'filter_is_anonymous',
+        path: 'is_anonymous',
+        type: Type.String,
+        list: [
+          { value: 'false', label: 'filter_is_anonymous_value_false' },
+          { value: 'true', label: 'filter_is_anonymous_value_true' },
+        ],
+      },
     ]);
-  });
 
-  it('renders a text control for billing city', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
+    element.edit({ customer_email: 'foo@bar.com', customer_uri: '' });
+    control?.setValue('https://demo.api/hapi/customers/0');
 
-    const control = element.renderRoot.querySelector(`[infer="billing-city"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
+    expect(element).to.have.nested.property('form.customer_email', '');
+    expect(element).to.have.nested.property(
+      'form.customer_uri',
+      'https://demo.api/hapi/customers/0'
+    );
   });
 
-  it('renders a text control for billing postal code', async () => {
+  it('renders text control for customer email inside General summary', async () => {
     const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    const control = element.renderRoot.querySelector(`[infer="billing-postal-code"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
+    const control = element.renderRoot.querySelector(`[infer="general"] [infer="customer-email"]`);
+    expect(control).to.exist;
+    expect(control).to.have.property('localName', 'foxy-internal-text-control');
+    expect(control).to.have.attribute('layout', 'summary-item');
   });
 
-  it('renders shipping section title and description', async () => {
-    const element = await fixture<Form>(html`<foxy-cart-form></foxy-cart-form>`);
-    const title = await getByKey(element, 'shipping_section_title');
-    const description = await getByKey(element, 'shipping_section_description');
-
-    expect(title).to.exist;
-    expect(title).to.have.property('infer', '');
-
-    expect(description).to.exist;
-    expect(description).to.have.property('infer', '');
-  });
-
-  it('renders a text control for shipping first name', async () => {
+  it('renders async list control for items', async () => {
     const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(`[infer="shipping-first-name"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-  it('renders a text control for shipping last name', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
+    const control = element.renderRoot.querySelector(`[infer="items"]`);
+    expect(control).to.exist;
 
-    const control = element.renderRoot.querySelector(`[infer="shipping-last-name"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
+    expect(control).to.have.attribute('item', 'foxy-item-card');
+    expect(control).to.have.attribute('form', 'foxy-item-form');
+    expect(control).to.have.attribute('alert');
 
-  it('renders a text control for shipping company', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
+    expect(control).to.have.property('localName', 'foxy-internal-async-list-control');
 
-    const control = element.renderRoot.querySelector(`[infer="shipping-company"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
+    expect(control).to.have.deep.property('related', [
+      'https://demo.api/hapi/carts/0?zoom=discounts',
+    ]);
 
-  it('renders a text control for shipping phone', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
+    expect(control).to.have.deep.nested.property(
+      'itemProps.locale-codes',
+      'https://demo.api/hapi/property_helpers/7'
+    );
 
-    const control = element.renderRoot.querySelector(`[infer="shipping-phone"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
+    expect(control).to.have.deep.nested.property(
+      'formProps.customer-addresses',
+      'https://demo.api/hapi/customer_addresses?customer_id=0'
+    );
 
-  it('renders a text control for shipping address line 1', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
+    expect(control).to.have.deep.nested.property(
+      'formProps.item-categories',
+      'https://demo.api/hapi/item_categories?store_id=0'
+    );
 
-    const control = element.renderRoot.querySelector(`[infer="shipping-address-one"]`);
+    expect(control).to.have.deep.nested.property(
+      'formProps.locale-codes',
+      'https://demo.api/hapi/property_helpers/7'
+    );
 
-    expect(control).to.be.instanceOf(InternalTextControl);
-    expect(control).to.have.attribute('property', 'shipping_address1');
+    expect(control).to.have.deep.nested.property(
+      'formProps.coupons',
+      'https://demo.api/hapi/coupons?store_id=0'
+    );
   });
 
-  it('renders a text control for shipping address line 2', async () => {
+  it('renders totals control', async () => {
     const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(`[infer="shipping-address-two"]`);
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    expect(control).to.be.instanceOf(InternalTextControl);
-    expect(control).to.have.attribute('property', 'shipping_address2');
+    const control = element.renderRoot.querySelector(`[infer="totals"]`);
+    expect(control).to.exist;
+    expect(control?.localName).to.equal('foxy-internal-cart-form-totals-control');
   });
 
-  it('renders a select control for shipping country', async () => {
-    let isHelperLoaded = false;
+  it('renders async list control for applied coupon codes', async () => {
     const router = createRouter();
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/property_helpers/3', {
-        method: 'PATCH',
-        body: JSON.stringify({
-          values: {
-            GB: {
-              default: 'United Kingdom',
-              cc2: 'GB',
-              cc3: 'GBR',
-              alternate_values: ['Great Britain', 'England', 'Northern Ireland', 'Britain', 'UK'],
-              boost: 4,
-              has_regions: false,
-              regions_required: false,
-              regions_type: 'county',
-              active: true,
-            },
-            US: {
-              default: 'United States',
-              cc2: 'US',
-              cc3: 'USA',
-              alternate_values: ['USA', 'United States of America', 'America'],
-              boost: 4.5,
-              has_regions: true,
-              regions_required: true,
-              regions_type: 'state',
-              active: true,
-            },
-          },
-        }),
-      })
-    )?.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        countries="https://demo.api/hapi/property_helpers/3"
-        @fetch=${(evt: FetchEvent) => {
-          router.handleEvent(evt)?.handlerPromise.then(() => {
-            if (evt.request.url === 'https://demo.api/hapi/property_helpers/3') {
-              setTimeout(() => (isHelperLoaded = true));
-            }
-          });
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    await waitUntil(() => isHelperLoaded, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector(`[infer="shipping-country"]`);
-
-    expect(control).to.be.instanceOf(InternalSelectControl);
-    expect(control).to.have.deep.property('options', [
-      { label: 'United Kingdom', value: 'GB' },
-      { label: 'United States', value: 'US' },
-    ]);
-  });
+    const control = element.renderRoot.querySelector(`[infer="applied-coupon-codes"]`);
+    expect(control).to.exist;
 
-  it('renders a select control for shipping region', async () => {
-    let isHelperLoaded = false;
-    const router = createRouter();
+    expect(control).to.have.attribute('item', 'foxy-applied-coupon-code-card');
+    expect(control).to.have.attribute('form', 'foxy-applied-coupon-code-form');
+    expect(control).to.have.attribute('alert');
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/property_helpers/4', {
-        method: 'PATCH',
-        body: JSON.stringify({
-          values: {
-            SD: {
-              default: 'South Dakota',
-              code: 'SD',
-              alternate_values: [],
-              boost: 1,
-              active: true,
-            },
-            TN: {
-              default: 'Tennessee',
-              code: 'TN',
-              alternate_values: [],
-              boost: 1,
-              active: true,
-            },
-          },
-        }),
-      })
-    )?.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        regions="https://demo.api/hapi/property_helpers/4"
-        @fetch=${(evt: FetchEvent) => {
-          router.handleEvent(evt)?.handlerPromise.then(() => {
-            if (evt.request.url === 'https://demo.api/hapi/property_helpers/4?country_code=US') {
-              setTimeout(() => (isHelperLoaded = true));
-            }
-          });
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    element.edit({ shipping_country: 'US' });
-    await waitUntil(() => isHelperLoaded, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector(`[infer="shipping-region"]`);
-
-    expect(control).to.be.instanceOf(InternalSelectControl);
-    expect(control).to.have.deep.property('options', [
-      { label: 'South Dakota', value: 'SD' },
-      { label: 'Tennessee', value: 'TN' },
+    expect(control).to.have.property('localName', 'foxy-internal-async-list-control');
+    expect(control).to.have.deep.property('related', [
+      'https://demo.api/hapi/carts/0?zoom=discounts',
     ]);
   });
 
-  it('renders a text control for shipping city', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(`[infer="shipping-city"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
-
-  it('renders a text control for shipping postal code', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
-
-    const control = element.renderRoot.querySelector(`[infer="shipping-postal-code"]`);
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
-
-  it('renders total order when currency comes from the cart resource', async () => {
+  it('renders summary control for Billing', async () => {
     const router = createRouter();
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/carts/0', {
-        method: 'PATCH',
-        body: JSON.stringify({ currency_code: 'MXN', total_order: 123 }),
-      })
-    )?.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[key="total_order"]'), '', { timeout: 5000 });
-    const total = await getByKey(element, 'total_order');
-
-    expect(total).to.exist;
-    expect(total).to.have.attribute('infer', 'totals');
-    expect(total).to.have.nested.property('options.amount', '123 MXN');
+    const control = element.renderRoot.querySelector(`[infer="billing"]`);
+    expect(control).to.exist;
+    expect(control?.localName).to.equal('foxy-internal-summary-control');
   });
 
-  it("renders total order when currency comes from the custom template set's locale", async () => {
-    const router = createRouter();
-
-    const newTemplateSetResponse = await router.handleRequest(
-      new Request('https://demo.api/hapi/template_sets', {
-        method: 'POST',
-        body: JSON.stringify({ code: 'TEST', locale_code: 'en_AU' }),
-      })
-    )!.handlerPromise;
-
-    const newTemplateSet = await newTemplateSetResponse.json();
-
-    const newCartResponse = await router.handleRequest(
-      new Request('https://demo.api/hapi/carts', {
-        method: 'POST',
-        body: JSON.stringify({
-          template_set_uri: newTemplateSet._links.self.href,
-          total_order: 456,
-        }),
-      })
-    )!.handlerPromise;
-
-    const newCart = await newCartResponse.json();
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        href=${newCart._links.self.href}
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[key="total_order"]'), '', { timeout: 5000 });
-    const total = await getByKey(element, 'total_order');
-
-    expect(total).to.exist;
-    expect(total).to.have.attribute('infer', 'totals');
-    expect(total).to.have.nested.property('options.amount', '456 AUD');
-  });
-
-  it("renders total order when currency comes from the default template set's locale", async () => {
+  it('renders resource picker control for payment method uri inside Billing summary', async () => {
     const router = createRouter();
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/template_sets/0', {
-        method: 'PATCH',
-        body: JSON.stringify({ code: 'DEFAULT', locale_code: 'en_PH' }),
-      })
-    )!.handlerPromise;
-
-    const newCartResponse = await router.handleRequest(
-      new Request('https://demo.api/hapi/carts', {
-        method: 'POST',
-        body: JSON.stringify({ total_order: 892 }),
-      })
-    )!.handlerPromise;
-
-    const newCart = await newCartResponse.json();
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        href=${newCart._links.self.href}
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[key="total_order"]'), '', { timeout: 5000 });
-    const total = await getByKey(element, 'total_order');
-
-    expect(total).to.exist;
-    expect(total).to.have.attribute('infer', 'totals');
-    expect(total).to.have.nested.property('options.amount', '892 PHP');
-  });
-
-  it('respects store-wide currency code display setting in total order (international: yes)', async () => {
-    const router = createRouter();
-
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/stores/0', {
-        method: 'PATCH',
-        body: JSON.stringify({ use_international_currency_symbol: true }),
-      })
-    )!.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[key="total_order"]'), '', { timeout: 5000 });
-    const total = await getByKey(element, 'total_order');
-
-    expect(total).to.have.nested.property('options.currencyDisplay', 'code');
-  });
-
-  it('respects store-wide currency code display setting in total order (international: no)', async () => {
-    const router = createRouter();
+    const control = element.renderRoot.querySelector<InternalResourcePickerControl>(
+      `[infer="billing"] [infer="payment-method-uri"]`
+    );
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/stores/0', {
-        method: 'PATCH',
-        body: JSON.stringify({ use_international_currency_symbol: false }),
-      })
-    )!.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[key="total_order"]'), '', { timeout: 5000 });
-    const total = await getByKey(element, 'total_order');
-
-    expect(total).to.have.nested.property('options.currencyDisplay', 'symbol');
-  });
-
-  for (const prop of ['total_item_price', 'total_shipping', 'total_tax'] as const) {
-    const propDescription = prop.replace(/_/g, ' ');
-
-    it(`renders ${propDescription} when currency comes from the cart resource`, async () => {
-      const router = createRouter();
-
-      await router.handleRequest(
-        new Request('https://demo.api/hapi/carts/0', {
-          method: 'PATCH',
-          body: JSON.stringify({ currency_code: 'MXN', [prop]: 123 }),
-        })
-      )?.handlerPromise;
-
-      const element = await fixture<Form>(html`
-        <foxy-cart-form
-          href="https://demo.api/hapi/carts/0"
-          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-        >
-        </foxy-cart-form>
-      `);
-
-      await waitUntil(() => !!element.data, '', { timeout: 5000 });
-      const wrapper = (await getByTestId(element, prop)) as HTMLElement;
-      await waitUntil(() => !!wrapper.querySelector('[key="price"]'), '', { timeout: 5000 });
-
-      const label = wrapper.querySelector(`[key="${prop}"]`) as HTMLElement;
-      const price = wrapper.querySelector('[key="price"]') as HTMLElement;
-
-      expect(label).to.exist;
-      expect(label).to.have.attribute('infer', 'totals');
-
-      expect(price).to.exist;
-      expect(price).to.have.attribute('infer', 'totals');
-      expect(price).to.have.nested.property('options.amount', '123 MXN');
-    });
+    expect(control).to.exist;
+    expect(control?.localName).to.equal('foxy-internal-resource-picker-control');
+    expect(control?.getAttribute('layout')).to.equal('summary-item');
+    expect(control?.getAttribute('item')).to.equal('foxy-internal-cart-form-payment-method-card');
+    expect(control?.getAttribute('form')).to.equal('foxy-internal-cart-form-payment-method-form');
+    expect(control?.getAttribute('first')).to.equal(
+      'https://demo.api/hapi/transactions?customer_id=0&zoom=payments'
+    );
 
-    it(`renders ${propDescription} when currency comes from the custom template set's locale`, async () => {
-      const router = createRouter();
-
-      const newTemplateSetResponse = await router.handleRequest(
-        new Request('https://demo.api/hapi/template_sets', {
-          method: 'POST',
-          body: JSON.stringify({ code: 'TEST', locale_code: 'en_AU' }),
-        })
-      )!.handlerPromise;
-
-      const newTemplateSet = await newTemplateSetResponse.json();
-
-      const newCartResponse = await router.handleRequest(
-        new Request('https://demo.api/hapi/carts', {
-          method: 'POST',
-          body: JSON.stringify({
-            template_set_uri: newTemplateSet._links.self.href,
-            [prop]: 456,
-          }),
-        })
-      )!.handlerPromise;
-
-      const newCart = await newCartResponse.json();
-
-      const element = await fixture<Form>(html`
-        <foxy-cart-form
-          locale-codes="https://demo.api/hapi/property_helpers/7"
-          href=${newCart._links.self.href}
-          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-        >
-        </foxy-cart-form>
-      `);
-
-      await waitUntil(() => !!element.data, '', { timeout: 5000 });
-      const wrapper = (await getByTestId(element, prop)) as HTMLElement;
-      await waitUntil(() => !!wrapper.querySelector('[key="price"]'), '', { timeout: 5000 });
-
-      const label = wrapper.querySelector(`[key="${prop}"]`) as HTMLElement;
-      const price = wrapper.querySelector('[key="price"]') as HTMLElement;
-
-      expect(label).to.exist;
-      expect(label).to.have.attribute('infer', 'totals');
-
-      expect(price).to.exist;
-      expect(price).to.have.attribute('infer', 'totals');
-      expect(price).to.have.nested.property('options.amount', '456 AUD');
+    expect(control).to.have.deep.property('formProps', {
+      'default-payment-method': 'https://demo.api/hapi/payment_methods/0',
+      'payment-card-embed-url': 'https://embed.foxy.test/v1.html?template_set_id=0',
     });
 
-    it(`renders ${propDescription} when currency comes from the default template set's locale`, async () => {
-      const router = createRouter();
-
-      await router.handleRequest(
-        new Request('https://demo.api/hapi/template_sets/0', {
-          method: 'PATCH',
-          body: JSON.stringify({ code: 'DEFAULT', locale_code: 'en_PH' }),
-        })
-      )!.handlerPromise;
-
-      const newCartResponse = await router.handleRequest(
-        new Request('https://demo.api/hapi/carts', {
-          method: 'POST',
-          body: JSON.stringify({ [prop]: 892 }),
-        })
-      )!.handlerPromise;
-
-      const newCart = await newCartResponse.json();
-
-      const element = await fixture<Form>(html`
-        <foxy-cart-form
-          locale-codes="https://demo.api/hapi/property_helpers/7"
-          href=${newCart._links.self.href}
-          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-        >
-        </foxy-cart-form>
-      `);
-
-      await waitUntil(() => !!element.data, '', { timeout: 5000 });
-      const wrapper = (await getByTestId(element, prop)) as HTMLElement;
-      await waitUntil(() => !!wrapper.querySelector('[key="price"]'), '', { timeout: 5000 });
-
-      const label = wrapper.querySelector(`[key="${prop}"]`) as HTMLElement;
-      const price = wrapper.querySelector('[key="price"]') as HTMLElement;
-
-      expect(label).to.exist;
-      expect(label).to.have.attribute('infer', 'totals');
-
-      expect(price).to.exist;
-      expect(price).to.have.attribute('infer', 'totals');
-      expect(price).to.have.nested.property('options.amount', '892 PHP');
-    });
+    element.edit({ payment_method_uri: '' });
+    control?.setValue('https://demo.api/transactions/0?zoom=payments');
+    expect(element).to.have.nested.property(
+      'form.payment_method_uri',
+      'https://demo.api/transactions/0/payments'
+    );
 
-    it(`respects store-wide currency code display setting in ${propDescription} (international: yes)`, async () => {
-      const router = createRouter();
-
-      await router.handleRequest(
-        new Request('https://demo.api/hapi/stores/0', {
-          method: 'PATCH',
-          body: JSON.stringify({ use_international_currency_symbol: true }),
-        })
-      )!.handlerPromise;
-
-      const element = await fixture<Form>(html`
-        <foxy-cart-form
-          locale-codes="https://demo.api/hapi/property_helpers/7"
-          href="https://demo.api/hapi/carts/0"
-          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-        >
-        </foxy-cart-form>
-      `);
-
-      await waitUntil(() => !!element.data, '', { timeout: 5000 });
-      const wrapper = (await getByTestId(element, prop)) as HTMLElement;
-      await waitUntil(() => !!wrapper.querySelector('[key="price"]'), '', { timeout: 5000 });
-
-      const price = wrapper.querySelector('[key="price"]') as HTMLElement;
-      expect(price).to.have.nested.property('options.currencyDisplay', 'code');
-    });
+    expect(control).to.have.deep.property('filters', [
+      {
+        label: 'filter_type',
+        type: Type.String,
+        path: 'payments:type',
+        list: [
+          { label: 'filter_type_value_purchase_order', value: 'purchase_order' },
+          { label: 'filter_type_value_amazon_mws', value: 'amazon_mws' },
+          { label: 'filter_type_value_paypal_ec', value: 'paypal_ec' },
+          { label: 'filter_type_value_paypal', value: 'paypal' },
+          { label: 'filter_type_value_hosted', value: 'hosted' },
+          { label: 'filter_type_value_ogone', value: 'ogone' },
+        ],
+      },
+      {
+        label: 'filter_cc_type',
+        type: Type.String,
+        path: 'payments:cc_type',
+        list: [
+          { label: 'filter_cc_type_value_mastercard', value: 'mastercard' },
+          { label: 'filter_cc_type_value_discover', value: 'discover' },
+          { label: 'filter_cc_type_value_unionpay', value: 'unionpay' },
+          { label: 'filter_cc_type_value_maestro', value: 'maestro' },
+          { label: 'filter_cc_type_value_diners', value: 'diners' },
+          { label: 'filter_cc_type_value_visa', value: 'visa' },
+          { label: 'filter_cc_type_value_amex', value: 'amex' },
+          { label: 'filter_cc_type_value_jcb', value: 'jcb' },
+        ],
+      },
+      {
+        label: 'filter_cc_number_masked',
+        type: Type.String,
+        path: 'payments:cc_number_masked',
+      },
+    ]);
 
-    it(`respects store-wide currency code display setting in ${propDescription} (international: no)`, async () => {
-      const router = createRouter();
-
-      await router.handleRequest(
-        new Request('https://demo.api/hapi/stores/0', {
-          method: 'PATCH',
-          body: JSON.stringify({ use_international_currency_symbol: false }),
-        })
-      )!.handlerPromise;
-
-      const element = await fixture<Form>(html`
-        <foxy-cart-form
-          locale-codes="https://demo.api/hapi/property_helpers/7"
-          href="https://demo.api/hapi/carts/0"
-          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-        >
-        </foxy-cart-form>
-      `);
-
-      await waitUntil(() => !!element.data, '', { timeout: 5000 });
-      const wrapper = (await getByTestId(element, prop)) as HTMLElement;
-      await waitUntil(() => !!wrapper.querySelector('[key="price"]'), '', { timeout: 5000 });
-
-      const price = wrapper.querySelector('[key="price"]') as HTMLElement;
-      expect(price).to.have.nested.property('options.currencyDisplay', 'symbol');
+    expect(control?.getDisplayValueOptions(await getTestData('./hapi/payments'))).to.deep.equal({
+      cc_exp_month: '01',
+      cc_exp_year: '2017',
+      cc_last4: '1111',
+      cc_type: 'Visa',
+      context: '',
     });
-  }
-
-  const discounts = {
-    _embedded: {
-      'fx:discounts': [
-        {
-          code: '1WLCM',
-          amount: -1,
-          name: 'Welcome Bonus',
-          display: '-1.00',
-          is_taxable: false,
-          is_future_discount: false,
-          date_created: '2021-03-29T13:57:40-0700',
-          date_modified: '2021-03-29T13:57:40-0700',
-        },
-        {
-          code: 'FEE01',
-          amount: 5,
-          name: 'Test Surcharge',
-          display: '+5.00',
-          is_taxable: false,
-          is_future_discount: false,
-          date_created: '2021-03-29T13:57:40-0700',
-          date_modified: '2021-03-29T13:57:40-0700',
-        },
-      ],
-    },
-  };
+  });
 
-  it('renders discounts when currency comes from the cart resource', async () => {
+  it('renders cart form address summary item control for billing address inside Billing summary', async () => {
     const router = createRouter();
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/carts/0', {
-        method: 'PATCH',
-        body: JSON.stringify({ currency_code: 'MXN' }),
-      })
-    )?.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => {
-          if (evt.request.url === 'https://demo.api/hapi/discounts?cart_id=0&limit=300') {
-            evt.respondWith(Promise.resolve(new Response(JSON.stringify(discounts))));
-          } else {
-            router.handleEvent(evt);
-          }
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[data-testclass="discount"] [key="price"]'), '', {
-      timeout: 5000,
-    });
-
-    const wrappers = await getByTestClass(element, 'discount');
-    const wrapper0Price = await getByKey(wrappers[0], 'price');
-    const wrapper1Price = await getByKey(wrappers[1], 'price');
-
-    expect(wrappers).to.have.length(2);
+    const control = element.renderRoot.querySelector(`[infer="billing"] [infer="billing-address"]`);
+    expect(control).to.exist;
+    expect(control?.localName).to.equal('foxy-internal-cart-form-address-summary-item');
 
-    expect(wrappers[0]).to.include.text('Welcome Bonus');
-    expect(wrappers[0]).to.include.text('1WLCM');
-    expect(wrapper0Price).to.have.attribute('infer', 'totals');
-    expect(wrapper0Price).to.have.nested.property('options.amount', '-1 MXN');
+    expect(control).to.have.attribute('countries', 'https://demo.api/hapi/property_helpers/3');
+    expect(control).to.have.attribute('regions', 'https://demo.api/hapi/property_helpers/4');
+    expect(control).to.have.attribute('type', 'billing');
 
-    expect(wrappers[1]).to.include.text('Test Surcharge');
-    expect(wrappers[1]).to.include.text('FEE01');
-    expect(wrapper1Price).to.have.attribute('infer', 'totals');
-    expect(wrapper1Price).to.have.nested.property('options.amount', '5 MXN');
+    expect(control).to.have.deep.property(
+      'customer',
+      await getTestData(
+        './hapi/customers/0?zoom=default_payment_method%2Cdefault_billing_address%2Cdefault_shipping_address'
+      )
+    );
   });
 
-  it("renders discounts when currency comes from the custom template set's locale", async () => {
+  it('renders summary control for Shipping', async () => {
     const router = createRouter();
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    const newTemplateSetResponse = await router.handleRequest(
-      new Request('https://demo.api/hapi/template_sets', {
-        method: 'POST',
-        body: JSON.stringify({ code: 'TEST', locale_code: 'en_AU' }),
-      })
-    )!.handlerPromise;
-
-    const newTemplateSet = await newTemplateSetResponse.json();
-
-    const newCartResponse = await router.handleRequest(
-      new Request('https://demo.api/hapi/carts', {
-        method: 'POST',
-        body: JSON.stringify({ template_set_uri: newTemplateSet._links.self.href }),
-      })
-    )!.handlerPromise;
-
-    const newCart = await newCartResponse.json();
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        href=${newCart._links.self.href}
-        @fetch=${(evt: FetchEvent) => {
-          if (evt.request.url.startsWith('https://demo.api/hapi/discounts?cart_id=')) {
-            evt.respondWith(Promise.resolve(new Response(JSON.stringify(discounts))));
-          } else {
-            router.handleEvent(evt);
-          }
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[data-testclass="discount"] [key="price"]'), '', {
-      timeout: 5000,
-    });
-
-    const wrappers = await getByTestClass(element, 'discount');
-    const wrapper0Price = await getByKey(wrappers[0], 'price');
-    const wrapper1Price = await getByKey(wrappers[1], 'price');
-
-    expect(wrappers).to.have.length(2);
-
-    expect(wrappers[0]).to.include.text('Welcome Bonus');
-    expect(wrappers[0]).to.include.text('1WLCM');
-    expect(wrapper0Price).to.have.attribute('infer', 'totals');
-    expect(wrapper0Price).to.have.nested.property('options.amount', '-1 AUD');
-
-    expect(wrappers[1]).to.include.text('Test Surcharge');
-    expect(wrappers[1]).to.include.text('FEE01');
-    expect(wrapper1Price).to.have.attribute('infer', 'totals');
-    expect(wrapper1Price).to.have.nested.property('options.amount', '5 AUD');
+    const control = element.renderRoot.querySelector(`[infer="shipping"]`);
+    expect(control).to.exist;
+    expect(control?.localName).to.equal('foxy-internal-summary-control');
   });
 
-  it("renders discounts when currency comes from the default template set's locale", async () => {
+  it('renders a switch control for using billing address as shipping address inside Shipping summary', async () => {
     const router = createRouter();
+    const element = await createElement(router);
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/template_sets/0', {
-        method: 'PATCH',
-        body: JSON.stringify({ code: 'DEFAULT', locale_code: 'en_PH' }),
-      })
-    )!.handlerPromise;
-
-    const newCartResponse = await router.handleRequest(
-      new Request('https://demo.api/hapi/carts', {
-        method: 'POST',
-        body: JSON.stringify({}),
-      })
-    )!.handlerPromise;
-
-    const newCart = await newCartResponse.json();
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        href=${newCart._links.self.href}
-        @fetch=${(evt: FetchEvent) => {
-          if (evt.request.url.startsWith('https://demo.api/hapi/discounts?cart_id=')) {
-            evt.respondWith(Promise.resolve(new Response(JSON.stringify(discounts))));
-          } else {
-            router.handleEvent(evt);
-          }
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[data-testclass="discount"] [key="price"]'), '', {
-      timeout: 5000,
-    });
-
-    const wrappers = await getByTestClass(element, 'discount');
-    const wrapper0Price = await getByKey(wrappers[0], 'price');
-    const wrapper1Price = await getByKey(wrappers[1], 'price');
-
-    expect(wrappers).to.have.length(2);
-
-    expect(wrappers[0]).to.include.text('Welcome Bonus');
-    expect(wrappers[0]).to.include.text('1WLCM');
-    expect(wrapper0Price).to.have.attribute('infer', 'totals');
-    expect(wrapper0Price).to.have.nested.property('options.amount', '-1 PHP');
+    await waitForIdle(element);
+    const control = element.renderRoot.querySelector(
+      `[infer="shipping"] [infer="use-customer-shipping-address"]`
+    );
 
-    expect(wrappers[1]).to.include.text('Test Surcharge');
-    expect(wrappers[1]).to.include.text('FEE01');
-    expect(wrapper1Price).to.have.attribute('infer', 'totals');
-    expect(wrapper1Price).to.have.nested.property('options.amount', '5 PHP');
+    expect(control).to.exist;
+    expect(control?.localName).to.equal('foxy-internal-switch-control');
+    expect(control).to.have.attribute('invert');
   });
 
-  it('respects store-wide currency code display setting in discounts (international: yes)', async () => {
+  it('renders cart form address summary item control for shipping address inside Shipping summary', async () => {
     const router = createRouter();
+    const element = await createElement(router);
+    await waitForIdle(element);
+    const control = element.renderRoot.querySelector(
+      `[infer="shipping"] [infer="shipping-address"]`
+    );
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/stores/0', {
-        method: 'PATCH',
-        body: JSON.stringify({ use_international_currency_symbol: true }),
-      })
-    )!.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => {
-          if (evt.request.url.startsWith('https://demo.api/hapi/discounts?cart_id=')) {
-            evt.respondWith(Promise.resolve(new Response(JSON.stringify(discounts))));
-          } else {
-            router.handleEvent(evt);
-          }
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[data-testclass="discount"] [key="price"]'), '', {
-      timeout: 5000,
-    });
+    expect(control).to.exist;
+    expect(control?.localName).to.equal('foxy-internal-cart-form-address-summary-item');
 
-    const wrappers = await getByTestClass(element, 'discount');
-    const wrapper0Price = await getByKey(wrappers[0], 'price');
-    const wrapper1Price = await getByKey(wrappers[1], 'price');
+    expect(control).to.have.attribute('countries', 'https://demo.api/hapi/property_helpers/3');
+    expect(control).to.have.attribute('regions', 'https://demo.api/hapi/property_helpers/4');
+    expect(control).to.have.attribute('type', 'shipping');
 
-    expect(wrapper0Price).to.have.nested.property('options.currencyDisplay', 'code');
-    expect(wrapper1Price).to.have.nested.property('options.currencyDisplay', 'code');
+    expect(control).to.have.deep.property(
+      'customer',
+      await getTestData(
+        './hapi/customers/0?zoom=default_payment_method%2Cdefault_billing_address%2Cdefault_shipping_address'
+      )
+    );
   });
 
-  it('respects store-wide currency code display setting in discounts (international: no)', async () => {
+  it('renders async list control for custom fields', async () => {
     const router = createRouter();
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    await router.handleRequest(
-      new Request('https://demo.api/hapi/stores/0', {
-        method: 'PATCH',
-        body: JSON.stringify({ use_international_currency_symbol: false }),
-      })
-    )!.handlerPromise;
-
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        locale-codes="https://demo.api/hapi/property_helpers/7"
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => {
-          if (evt.request.url.startsWith('https://demo.api/hapi/discounts?cart_id=')) {
-            evt.respondWith(Promise.resolve(new Response(JSON.stringify(discounts))));
-          } else {
-            router.handleEvent(evt);
-          }
-        }}
-      >
-      </foxy-cart-form>
-    `);
-
-    const $ = element.renderRoot;
-    await waitUntil(() => !!$.querySelector('[data-testclass="discount"] [key="price"]'), '', {
-      timeout: 5000,
-    });
-
-    const wrappers = await getByTestClass(element, 'discount');
-    const wrapper0Price = await getByKey(wrappers[0], 'price');
-    const wrapper1Price = await getByKey(wrappers[1], 'price');
+    const control = element.renderRoot.querySelector(`[infer="custom-fields"]`);
+    expect(control).to.exist;
 
-    expect(wrapper0Price).to.have.nested.property('options.currencyDisplay', 'symbol');
-    expect(wrapper1Price).to.have.nested.property('options.currencyDisplay', 'symbol');
-  });
-
-  it('renders "View as customer" button for existing carts', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector(`[infer="view-as-customer"]`);
+    expect(control).to.have.attribute('first', 'https://demo.api/hapi/custom_fields?cart_id=0');
+    expect(control).to.have.attribute('item', 'foxy-custom-field-card');
+    expect(control).to.have.attribute('form', 'foxy-custom-field-form');
+    expect(control).to.have.attribute('alert');
 
-    expect(control).to.be.instanceOf(InternalCartFormViewAsCustomerControl);
+    expect(control).to.have.property('localName', 'foxy-internal-async-list-control');
   });
 
-  it('renders "Delete" button for existing carts', async () => {
+  it('renders async list control for attributes', async () => {
     const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form
-        href="https://demo.api/hapi/carts/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-cart-form>
-    `);
+    const element = await createElement(router);
+    await waitForIdle(element);
 
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector(`[infer="delete"]`);
+    const control = element.renderRoot.querySelector(`[infer="attributes"]`);
+    expect(control).to.exist;
 
-    expect(control).to.be.instanceOf(InternalDeleteControl);
-  });
-
-  it('renders "Create" button for new carts', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-cart-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}> </foxy-cart-form>
-    `);
+    expect(control).to.have.attribute('first', 'https://demo.api/hapi/cart_attributes?cart_id=0');
+    expect(control).to.have.attribute('item', 'foxy-attribute-card');
+    expect(control).to.have.attribute('form', 'foxy-attribute-form');
+    expect(control).to.have.attribute('alert');
 
-    const control = element.renderRoot.querySelector(`[infer="create"]`);
-    expect(control).to.be.instanceOf(InternalSubmitControl);
+    expect(control).to.have.property('localName', 'foxy-internal-async-list-control');
   });
 });
diff --git a/src/elements/public/CartForm/CartForm.ts b/src/elements/public/CartForm/CartForm.ts
index fdab5673f..e51764043 100644
--- a/src/elements/public/CartForm/CartForm.ts
+++ b/src/elements/public/CartForm/CartForm.ts
@@ -1,22 +1,20 @@
 import type { PropertyDeclarations } from 'lit-element';
-import type { Data } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonElement } from '../NucleonElement/NucleonElement';
-import type { FormRenderer } from '../FormDialog/types';
-import type { ItemRenderer } from '../CollectionPage/types';
 import type { NucleonV8N } from '../NucleonElement/types';
 import type { Resource } from '@foxy.io/sdk/core';
+import type { Option } from '../QueryBuilder/types';
 import type { Rels } from '@foxy.io/sdk/backend';
+import type { Data } from './types';
 
+import { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { ResponsiveMixin } from '../../../mixins/responsive';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { Type } from '../QueryBuilder/types';
 import { html } from 'lit-html';
 
-import set from 'lodash-es/set';
-import get from 'lodash-es/get';
-
 const NS = 'cart-form';
 const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
 
@@ -30,14 +28,15 @@ export class CartForm extends Base<Data> {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
+      paymentCardEmbedUrl: { attribute: 'payment-card-embed-url' },
       itemCategories: { attribute: 'item-categories' },
       templateSets: { attribute: 'template-sets' },
       localeCodes: { attribute: 'locale-codes' },
+      languages: {},
       customers: {},
       countries: {},
       regions: {},
       coupons: {},
-      __isGuestMode: { attribute: false },
     };
   }
 
@@ -45,7 +44,7 @@ export class CartForm extends Base<Data> {
     return [
       ({ billing_first_name: v }) => !v || v.length <= 50 || 'billing-first-name:v8n_too_long',
       ({ billing_last_name: v }) => !v || v.length <= 50 || 'billing-last-name:v8n_too_long',
-      ({ billing_region: v }) => !v || v.length <= 50 || 'billing-region:v8n_too_long',
+      ({ billing_state: v }) => !v || v.length <= 50 || 'billing-state:v8n_too_long',
       ({ billing_city: v }) => !v || v.length <= 50 || 'billing-city:v8n_too_long',
       ({ billing_phone: v }) => !v || v.length <= 50 || 'billing-phone:v8n_too_long',
       ({ billing_company: v }) => !v || v.length <= 50 || 'billing-company:v8n_too_long',
@@ -54,7 +53,7 @@ export class CartForm extends Base<Data> {
       ({ billing_postal_code: v }) => !v || v.length <= 50 || 'billing-postal-code:v8n_too_long',
       ({ shipping_first_name: v }) => !v || v.length <= 50 || 'shipping-first-name:v8n_too_long',
       ({ shipping_last_name: v }) => !v || v.length <= 50 || 'shipping-last-name:v8n_too_long',
-      ({ shipping_region: v }) => !v || v.length <= 50 || 'shipping-region:v8n_too_long',
+      ({ shipping_state: v }) => !v || v.length <= 50 || 'shipping-state:v8n_too_long',
       ({ shipping_city: v }) => !v || v.length <= 50 || 'shipping-city:v8n_too_long',
       ({ shipping_phone: v }) => !v || v.length <= 50 || 'shipping-phone:v8n_too_long',
       ({ shipping_company: v }) => !v || v.length <= 50 || 'shipping-company:v8n_too_long',
@@ -64,6 +63,9 @@ export class CartForm extends Base<Data> {
     ];
   }
 
+  /** Payment Card Embed configuration URL. The form will append template set parameter on its own. */
+  paymentCardEmbedUrl: string | null = null;
+
   /** URL of the `fx:item_categories` collection for the store. */
   itemCategories: string | null = null;
 
@@ -73,6 +75,9 @@ export class CartForm extends Base<Data> {
   /** URL of the `fx:locale_codes` property helper. */
   localeCodes: string | null = null;
 
+  /** URL of the `fx:languages` property helper. */
+  languages: string | null = null;
+
   /** URL of the `fx:customers` collection for the store. */
   customers: string | null = null;
 
@@ -85,359 +90,269 @@ export class CartForm extends Base<Data> {
   /** URL of the `fx:coupons` collection for the store. */
   coupons: string | null = null;
 
-  private readonly __defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';
-
-  private readonly __localeCodesHelperLoaderId = 'localeCodesLoader';
-
-  private readonly __shippingRegionsLoaderId = 'shippingRegionsLoader';
-
-  private readonly __billingRegionsLoaderId = 'billingRegionsLoader';
-
-  private readonly __templateSetLoaderId = 'templateSetLoader';
-
-  private readonly __countriesHelperLoaderId = 'countriesHelperLoader';
-
-  private readonly __discountsLoaderId = 'discountsLoader';
+  private readonly __languagesLoaderId = 'languagesLoader';
 
   private readonly __customerLoaderId = 'customerLoader';
 
-  private readonly __storeLoaderId = 'storeLoader';
+  private readonly __paymentMethodUriGetDisplayValueOptions = (
+    payments: Resource<Rels.Payments>
+  ) => {
+    const payment = payments?._embedded?.['fx:payments']?.[0] ?? null;
+    const ccExpMonth = payment?.cc_exp_month;
+    const ccExpYear = payment?.cc_exp_year;
+    const ccLast4 = payment?.cc_number_masked?.replace(/x/g, '');
+    const ccType = payment?.cc_type;
 
-  private readonly __customerTypeGetValue = () => {
-    if (!this.form.customer_uri) return 'new';
-    return this.__customer?.is_anonymous ? 'guest' : 'regular';
+    return {
+      cc_exp_month: ccExpMonth ?? '',
+      cc_exp_year: ccExpYear ?? '',
+      cc_last4: ccLast4 ?? '',
+      cc_type: ccType ?? '',
+      context: ccLast4 && ccExpMonth && ccExpYear && ccType ? '' : 'empty',
+    };
   };
 
-  private readonly __customerTypeSetValue = (newValue: string) => {
-    this.edit({ customer_uri: '', customer_email: '' });
-    this.__isGuestMode = newValue === 'guest';
+  private readonly __paymentMethodUriSetValue = (transactionUrl: string) => {
+    try {
+      // TODO use links instead of constructing the URL manually
+      const url = new URL(transactionUrl);
+      url.search = '';
+      url.pathname += '/payments';
+      this.edit({ payment_method_uri: url.toString() });
+    } catch (err) {
+      this.edit({ payment_method_uri: '' });
+    }
   };
 
-  private readonly __customerTypeOptions = [
-    { label: 'option_new', value: 'new' },
-    { label: 'option_guest', value: 'guest' },
-    { label: 'option_regular', value: 'regular' },
+  private readonly __paymentMethodUriFilters: Option[] = [
+    {
+      label: 'filter_type',
+      type: Type.String,
+      path: 'payments:type',
+      list: [
+        { label: 'filter_type_value_purchase_order', value: 'purchase_order' },
+        { label: 'filter_type_value_amazon_mws', value: 'amazon_mws' },
+        { label: 'filter_type_value_paypal_ec', value: 'paypal_ec' },
+        { label: 'filter_type_value_paypal', value: 'paypal' },
+        { label: 'filter_type_value_hosted', value: 'hosted' },
+        { label: 'filter_type_value_ogone', value: 'ogone' },
+      ],
+    },
+    {
+      label: 'filter_cc_type',
+      type: Type.String,
+      path: 'payments:cc_type',
+      list: [
+        { label: 'filter_cc_type_value_mastercard', value: 'mastercard' },
+        { label: 'filter_cc_type_value_discover', value: 'discover' },
+        { label: 'filter_cc_type_value_unionpay', value: 'unionpay' },
+        { label: 'filter_cc_type_value_maestro', value: 'maestro' },
+        { label: 'filter_cc_type_value_diners', value: 'diners' },
+        { label: 'filter_cc_type_value_visa', value: 'visa' },
+        { label: 'filter_cc_type_value_amex', value: 'amex' },
+        { label: 'filter_cc_type_value_jcb', value: 'jcb' },
+      ],
+    },
+    {
+      label: 'filter_cc_number_masked',
+      type: Type.String,
+      path: 'payments:cc_number_masked',
+    },
   ];
 
-  private readonly __customerGetValue = () => {
-    return this.form.customer_uri || this.form.customer_email;
+  private readonly __customerUriSetValue = (newValue: string) => {
+    this.edit({ customer_uri: newValue, customer_email: '' });
   };
 
-  private readonly __customerSetValue = (newValue: string) => {
-    try {
-      // if newValue isn't a fx:customer URI this will error
-      new URL(newValue);
-
-      // filter customer_email out of edits because when supplying the customer_uri the email must
-      // be that customer's email and it might not be immediately available at the time this getter is called
-      const newEdits: Partial<Data> = {};
-      const data = this.data;
-      const form = this.form;
-
-      for (const key in this.form) {
-        if (key === 'customer_email') continue;
-        const formValue = get(form, key);
-        if (get(data, key) !== formValue) set(newEdits, key, formValue);
-      }
+  private readonly __customerUriOptions: Option[] = [
+    { label: 'filter_email', path: 'email', type: Type.String },
+    {
+      label: 'filter_is_anonymous',
+      path: 'is_anonymous',
+      type: Type.String,
+      list: [
+        { value: 'false', label: 'filter_is_anonymous_value_false' },
+        { value: 'true', label: 'filter_is_anonymous_value_true' },
+      ],
+    },
+  ];
 
-      this.undo();
-      this.edit({ ...newEdits, customer_uri: newValue });
-    } catch {
-      this.edit({ customer_uri: '', customer_email: newValue });
+  get hiddenSelector(): BooleanSelector {
+    const alwaysMatch = [super.hiddenSelector.toString()];
+
+    if (this.form.customer_uri) {
+      alwaysMatch.unshift('general:customer-email');
+    } else {
+      alwaysMatch.unshift('billing:payment-method-uri');
     }
-  };
 
-  private __isGuestMode = false;
+    if (this.data) {
+      if (!this.form.use_customer_shipping_address) {
+        alwaysMatch.unshift('shipping:shipping-address');
+      }
+    } else {
+      alwaysMatch.unshift(
+        'applied-coupon-codes',
+        'custom-fields',
+        'attributes',
+        'shipping',
+        'billing',
+        'totals',
+        'items'
+      );
+    }
 
-  renderBody(): TemplateResult {
-    const shippingRegions = Object.values(this.__shippingRegions ?? {});
-    const billingRegions = Object.values(this.__billingRegions ?? {});
-    const countries = Object.values(this.__countriesHelper ?? {});
-
-    const shippingRegionOptions = shippingRegions.map(r => ({ label: r.default, value: r.code }));
-    const billingRegionOptions = billingRegions.map(r => ({ label: r.default, value: r.code }));
-    const countryOptions = countries.map(c => ({ label: c.default, value: c.cc2 }));
-
-    const customerAddresses = this.__customer?._links['fx:customer_addresses'].href;
-
-    const renderItemForm: FormRenderer = ctx => html`
-      <foxy-item-form
-        customer-addresses=${ifDefined(customerAddresses ?? void 0)}
-        item-categories=${ifDefined(this.itemCategories ?? void 0)}
-        locale-codes=${ifDefined(this.localeCodes ?? void 0)}
-        coupons=${ifDefined(this.coupons ?? void 0)}
-        parent=${ctx.dialog.parent}
-        href=${ctx.dialog.href}
-        infer=""
-        id="form"
-        .related=${ctx.dialog.related}
-        @fetch=${ctx.handleFetch}
-        @update=${ctx.handleUpdate}
-      >
-      </foxy-item-form>
-    `;
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
+  }
 
-    const renderItemCard: ItemRenderer = ctx => html`
-      <foxy-item-card
-        locale-codes=${this.localeCodes}
-        parent=${ctx.parent}
-        infer=""
-        href=${ctx.href}
-        .related=${ctx.related}
-      >
-      </foxy-item-card>
+  renderHeaderActions(): TemplateResult {
+    return html`
+      <foxy-internal-cart-form-create-session-action infer="view-as-customer">
+      </foxy-internal-cart-form-create-session-action>
     `;
+  }
 
-    const store = this.__store;
-    const currencyDisplay = store
-      ? store.use_international_currency_symbol
-        ? 'code'
-        : 'symbol'
-      : void 0;
-
-    let currencyCode: string | null = null;
-
-    if (this.form.currency_code) {
-      currencyCode = this.form.currency_code;
-    } else {
-      const allLocaleCodes = this.__localeCodesHelper;
-      const localeCode = (this.__templateSet ?? this.__defaultTemplateSet)?.locale_code;
-      const localeInfo = localeCode ? allLocaleCodes?.values[localeCode] : void 0;
-
-      if (localeInfo) currencyCode = /Currency: ([A-Z]{3})/g.exec(localeInfo)?.[1] ?? null;
-    }
+  renderBody(): TemplateResult {
+    const links = this.data?._links;
+    const customer = this.__customer;
+    const customerAddresses = customer?._links['fx:customer_addresses'].href;
 
     return html`
       ${this.renderHeader()}
 
-      <div class="grid sm-grid-cols-2 gap-l">
-        <div class="sm-col-span-2">
-          <foxy-i18n class="text-l font-medium leading-s block" infer="" key="order_section_title">
-          </foxy-i18n>
-
-          <foxy-i18n
-            class="text-s text-secondary leading-s block"
-            infer=""
-            key="order_section_description"
-          >
-          </foxy-i18n>
-        </div>
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-resource-picker-control
+          layout="summary-item"
+          first=${ifDefined(this.templateSets ?? void 0)}
+          infer="template-set-uri"
+          item="foxy-template-set-card"
+        >
+        </foxy-internal-resource-picker-control>
 
         <foxy-internal-select-control
-          infer="customer-type"
-          .getValue=${this.__customerTypeGetValue}
-          .setValue=${this.__customerTypeSetValue}
-          .options=${this.__customerTypeOptions}
-          @update=${() => this.requestUpdate()}
+          layout="summary-item"
+          infer="language"
+          .options=${this.__languageOptions}
         >
         </foxy-internal-select-control>
 
-        <foxy-internal-async-combo-box-control
-          item-label-path="email"
-          item-value-path="_links.self.href"
-          item-id-path="_links.self.href"
-          first=${ifDefined(this.__customersHref)}
-          infer="customer"
-          allow-custom-value
-          .selectedItem=${this.__customer}
-          .getValue=${this.__customerGetValue}
-          .setValue=${this.__customerSetValue}
+        <foxy-internal-resource-picker-control
+          layout="summary-item"
+          first=${ifDefined(this.customers ?? void 0)}
+          infer="customer-uri"
+          item="foxy-customer-card"
+          .setValue=${this.__customerUriSetValue}
+          .filters=${this.__customerUriOptions}
         >
-        </foxy-internal-async-combo-box-control>
-
-        <foxy-internal-async-combo-box-control
-          item-label-path="description"
-          item-value-path="_links.self.href"
-          item-id-path="_links.self.href"
-          first=${ifDefined(this.templateSets)}
-          class="sm-col-span-2"
-          infer="template-set-uri"
-          .selectedItem=${this.__templateSet ?? null}
-        >
-        </foxy-internal-async-combo-box-control>
-
-        <foxy-internal-async-list-control
-          infer="items"
-          class="min-w-0 sm-col-span-2"
-          first=${ifDefined(this.__itemsHref)}
-          limit="5"
-          .item=${renderItemCard}
-          .form=${this.data ? renderItemForm : null}
-        >
-        </foxy-internal-async-list-control>
-
-        <foxy-internal-async-list-control
-          infer="applied-coupon-codes"
-          class="min-w-0 sm-col-span-2"
-          first=${ifDefined(this.data?._links['fx:applied_coupon_codes'].href)}
-          limit="5"
-          item="foxy-applied-coupon-code-card"
-          form=${ifDefined(this.data ? 'foxy-applied-coupon-code-form' : void 0)}
-          alert
+        </foxy-internal-resource-picker-control>
+
+        <foxy-internal-text-control layout="summary-item" infer="customer-email">
+        </foxy-internal-text-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-async-list-control
+        infer="items"
+        class="min-w-0"
+        first=${ifDefined(this.__itemsHref)}
+        alert
+        item="foxy-item-card"
+        form="foxy-item-form"
+        .related=${this.href ? [this.href] : []}
+        .itemProps=${{ 'locale-codes': this.localeCodes ?? '' }}
+        .formProps=${{
+          'customer-addresses': customerAddresses ?? '',
+          'item-categories': this.itemCategories ?? '',
+          'locale-codes': this.localeCodes ?? '',
+          'coupons': this.coupons ?? '',
+        }}
+      >
+      </foxy-internal-async-list-control>
+
+      <foxy-internal-cart-form-totals-control class="min-w-0" infer="totals">
+      </foxy-internal-cart-form-totals-control>
+
+      <foxy-internal-async-list-control
+        infer="applied-coupon-codes"
+        class="min-w-0"
+        first=${ifDefined(links?.['fx:applied_coupon_codes'].href)}
+        item="foxy-applied-coupon-code-card"
+        form="foxy-applied-coupon-code-form"
+        alert
+        .related=${this.href ? [this.href] : []}
+      >
+      </foxy-internal-async-list-control>
+
+      <foxy-internal-summary-control infer="billing">
+        <foxy-internal-resource-picker-control
+          placeholder=${this.__paymentMethodUriPlaceholder}
+          layout="summary-item"
+          first=${ifDefined(this.__transactionsWithPaymentsUrl)}
+          infer="payment-method-uri"
+          item="foxy-internal-cart-form-payment-method-card"
+          form="foxy-internal-cart-form-payment-method-form"
+          .getDisplayValueOptions=${this.__paymentMethodUriGetDisplayValueOptions}
+          .formProps=${{
+            'default-payment-method': customer?._links['fx:default_payment_method'].href ?? '',
+            'payment-card-embed-url': this.__pickerPaymentCardEmbedUrl ?? '',
+          }}
+          .setValue=${this.__paymentMethodUriSetValue}
+          .filters=${this.__paymentMethodUriFilters}
         >
-        </foxy-internal-async-list-control>
-
-        <foxy-internal-async-list-control
-          infer="custom-fields"
-          class="min-w-0"
-          first=${ifDefined(this.data?._links['fx:custom_fields'].href)}
-          limit="5"
-          item="foxy-custom-field-card"
-          form=${ifDefined(this.data ? 'foxy-custom-field-form' : void 0)}
-          alert
+        </foxy-internal-resource-picker-control>
+
+        <foxy-internal-cart-form-address-summary-item
+          countries=${ifDefined(this.countries ?? void 0)}
+          regions=${ifDefined(this.regions ?? void 0)}
+          infer="billing-address"
+          type="billing"
+          .customer=${customer}
         >
-        </foxy-internal-async-list-control>
-
-        <foxy-internal-async-list-control
-          infer="attributes"
-          class="min-w-0"
-          first=${ifDefined(this.data?._links['fx:attributes'].href)}
-          limit="5"
-          item="foxy-attribute-card"
-          form=${ifDefined(this.data ? 'foxy-attribute-form' : void 0)}
-          alert
+        </foxy-internal-cart-form-address-summary-item>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="shipping">
+        <foxy-internal-switch-control infer="use-customer-shipping-address" invert>
+        </foxy-internal-switch-control>
+
+        <foxy-internal-cart-form-address-summary-item
+          countries=${ifDefined(this.countries ?? void 0)}
+          regions=${ifDefined(this.regions ?? void 0)}
+          infer="shipping-address"
+          type="shipping"
+          .customer=${customer}
         >
-        </foxy-internal-async-list-control>
-
-        <div class="grid gap-l">
-          <div>
-            <foxy-i18n
-              class="text-l font-medium leading-s block"
-              infer=""
-              key="billing_section_title"
-            >
-            </foxy-i18n>
-
-            <foxy-i18n
-              class="text-s text-secondary leading-s block"
-              infer=""
-              key="billing_section_description"
-            >
-            </foxy-i18n>
-          </div>
-
-          <div class="grid grid-cols-2 gap-m">
-            <foxy-internal-text-control infer="billing-first-name"></foxy-internal-text-control>
-            <foxy-internal-text-control infer="billing-last-name"></foxy-internal-text-control>
-            <foxy-internal-text-control infer="billing-company"></foxy-internal-text-control>
-            <foxy-internal-text-control infer="billing-phone"></foxy-internal-text-control>
-
-            <foxy-internal-text-control
-              property="billing_address1"
-              infer="billing-address-one"
-              class="col-span-2"
-            >
-            </foxy-internal-text-control>
-
-            <foxy-internal-text-control
-              property="billing_address2"
-              infer="billing-address-two"
-              class="col-span-2"
-            >
-            </foxy-internal-text-control>
-
-            <foxy-internal-select-control infer="billing-country" .options=${countryOptions}>
-            </foxy-internal-select-control>
-
-            <foxy-internal-select-control infer="billing-region" .options=${billingRegionOptions}>
-            </foxy-internal-select-control>
-
-            <foxy-internal-text-control infer="billing-city"></foxy-internal-text-control>
-            <foxy-internal-text-control infer="billing-postal-code"></foxy-internal-text-control>
-          </div>
-        </div>
-
-        <div class="grid gap-l">
-          <div>
-            <foxy-i18n
-              class="text-l font-medium leading-s block"
-              infer=""
-              key="shipping_section_title"
-            >
-            </foxy-i18n>
-
-            <foxy-i18n
-              class="text-s text-secondary leading-s block"
-              infer=""
-              key="shipping_section_description"
-            >
-            </foxy-i18n>
-          </div>
-
-          <div class="grid grid-cols-2 gap-m">
-            <foxy-internal-text-control infer="shipping-first-name"></foxy-internal-text-control>
-            <foxy-internal-text-control infer="shipping-last-name"></foxy-internal-text-control>
-            <foxy-internal-text-control infer="shipping-company"></foxy-internal-text-control>
-            <foxy-internal-text-control infer="shipping-phone"></foxy-internal-text-control>
-
-            <foxy-internal-text-control
-              property="shipping_address1"
-              infer="shipping-address-one"
-              class="col-span-2"
-            >
-            </foxy-internal-text-control>
-
-            <foxy-internal-text-control
-              property="shipping_address2"
-              infer="shipping-address-two"
-              class="col-span-2"
-            >
-            </foxy-internal-text-control>
-
-            <foxy-internal-select-control infer="shipping-country" .options=${countryOptions}>
-            </foxy-internal-select-control>
-
-            <foxy-internal-select-control infer="shipping-region" .options=${shippingRegionOptions}>
-            </foxy-internal-select-control>
-
-            <foxy-internal-text-control infer="shipping-city"></foxy-internal-text-control>
-            <foxy-internal-text-control infer="shipping-postal-code"></foxy-internal-text-control>
-          </div>
-        </div>
-
-        <div class="leading-m sm-col-span-2">
-          <div class="text-xl font-medium mb-s">
-            ${this.__renderTotalOrder(currencyCode, currencyDisplay)}
-          </div>
-          <div class="border-t border-contrast-10 mb-s"></div>
-          ${this.__renderTotals(currencyCode, currencyDisplay)}
-          ${this.__renderDiscounts(currencyCode, currencyDisplay)}
-        </div>
-
-        ${this.data
-          ? html`
-              <div class="grid gap-s sm-grid-cols-2 sm-gap-l sm-col-span-2">
-                <foxy-internal-cart-form-view-as-customer-control infer="view-as-customer">
-                </foxy-internal-cart-form-view-as-customer-control>
-                <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
-              </div>
-            `
-          : html`<foxy-internal-submit-control infer="create"></foxy-internal-submit-control>`}
-      </div>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__shippingRegionsHref)}
-        id=${this.__shippingRegionsLoaderId}
-        @update=${() => this.requestUpdate()}
+        </foxy-internal-cart-form-address-summary-item>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-async-list-control
+        infer="custom-fields"
+        class="min-w-0"
+        first=${ifDefined(links?.['fx:custom_fields'].href)}
+        limit="5"
+        item="foxy-custom-field-card"
+        form="foxy-custom-field-form"
+        alert
       >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__billingRegionsHref)}
-        id=${this.__billingRegionsLoaderId}
-        @update=${() => this.requestUpdate()}
+      </foxy-internal-async-list-control>
+
+      <foxy-internal-async-list-control
+        infer="attributes"
+        class="min-w-0"
+        first=${ifDefined(links?.['fx:attributes'].href)}
+        limit="5"
+        item="foxy-attribute-card"
+        form="foxy-attribute-form"
+        alert
       >
-      </foxy-nucleon>
+      </foxy-internal-async-list-control>
+
+      ${super.renderBody()}
 
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined(this.__countriesHref)}
-        id=${this.__countriesHelperLoaderId}
+        href=${ifDefined(this.languages ?? void 0)}
+        id=${this.__languagesLoaderId}
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
@@ -450,128 +365,61 @@ export class CartForm extends Base<Data> {
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__discountsHref)}
-        id=${this.__discountsLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__defaultTemplateSetHref)}
-        id=${this.__defaultTemplateSetLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__localeCodesHelperHref)}
-        id=${this.__localeCodesHelperLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__templateSetHref)}
-        id=${this.__templateSetLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__storeHref)}
-        id=${this.__storeLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
     `;
   }
 
-  private get __defaultTemplateSetHref() {
-    const templateSetUri = this.data?.template_set_uri;
-
-    if (templateSetUri === '') {
-      try {
-        const url = new URL(this.__store?._links['fx:template_sets'].href ?? '');
-        url.searchParams.set('code', 'DEFAULT');
-        return url.toString();
-      } catch {
-        //
-      }
-    }
-  }
-
-  private get __localeCodesHelperHref() {
-    if (this.__defaultTemplateSetHref || this.__templateSetHref) {
-      return this.localeCodes ?? void 0;
-    }
-  }
-
-  private get __shippingRegionsHref() {
-    try {
-      const url = new URL(this.regions ?? '');
-      const code = this.form.shipping_country;
-      if (code) url.searchParams.set('country_code', code);
-      return url.toString();
-    } catch {
-      //
-    }
+  private get __paymentMethodUriPlaceholder() {
+    const defaultPaymentMethod = this.__customer?._embedded['fx:default_payment_method'];
+    const ccExpMonth = defaultPaymentMethod?.cc_exp_month ?? null;
+    const ccExpYear = defaultPaymentMethod?.cc_exp_year ?? null;
+    const ccLast4 = defaultPaymentMethod?.cc_number_masked?.replace(/x/g, '') ?? null;
+    const ccType = defaultPaymentMethod?.cc_type ?? null;
+
+    return this.t('billing.payment-method-uri.value', {
+      cc_exp_month: ccExpMonth ?? '',
+      cc_exp_year: ccExpYear ?? '',
+      cc_last4: ccLast4 ?? '',
+      cc_type: ccType ?? '',
+      context: ccLast4 && ccExpMonth && ccExpYear && ccType ? '' : 'empty',
+    });
   }
 
-  private get __billingRegionsHref() {
+  private get __transactionsWithPaymentsUrl() {
     try {
-      const url = new URL(this.regions ?? '');
-      const code = this.form.billing_country;
-      if (code) url.searchParams.set('country_code', code);
+      const url = new URL(this.__customer?._links['fx:transactions'].href ?? '');
+      url.searchParams.set('zoom', 'payments');
       return url.toString();
     } catch {
-      //
+      // ignore
     }
   }
 
-  private get __templateSetHref() {
-    return this.form.template_set_uri || void 0;
-  }
-
-  private get __customersHref() {
+  private get __pickerPaymentCardEmbedUrl() {
     try {
-      const url = new URL(this.customers ?? '');
-      url.searchParams.set('is_anonymous', this.__isGuestMode ? '1' : '0');
-      return url.toString();
+      const url = new URL(this.paymentCardEmbedUrl ?? '');
+      const id = getResourceId(this.form.template_set_uri ?? '');
+      if (id !== null) {
+        url.searchParams.set('template_set_id', String(id));
+        return url.toString();
+      }
     } catch {
-      //
+      // ignore
     }
   }
 
-  private get __countriesHref() {
-    return this.countries ?? void 0;
-  }
-
-  private get __discountsHref() {
+  private get __customerHref() {
     try {
-      const url = new URL(this.data?._links['fx:discounts'].href ?? '');
-      url.searchParams.set('limit', '300');
+      const url = new URL(this.form.customer_uri ?? '');
+      url.searchParams.set(
+        'zoom',
+        'default_payment_method,default_billing_address,default_shipping_address'
+      );
       return url.toString();
     } catch {
-      //
+      // ignore
     }
   }
 
-  private get __customerHref() {
-    return this.form.customer_uri || void 0;
-  }
-
   private get __itemsHref() {
     try {
       const url = new URL(this.data?._links['fx:items'].href ?? '');
@@ -582,105 +430,21 @@ export class CartForm extends Base<Data> {
     }
   }
 
-  private get __storeHref() {
-    return this.data?._links['fx:store']?.href;
-  }
-
-  private get __defaultTemplateSet() {
-    type Loader = NucleonElement<Resource<Rels.TemplateSets>>;
-    const selector = `#${this.__defaultTemplateSetLoaderId}`;
-    const loader = this.renderRoot.querySelector<Loader>(selector);
-    return loader?.data?._embedded['fx:template_sets'][0] ?? null;
-  }
-
-  private get __localeCodesHelper() {
-    type Loader = NucleonElement<Resource<Rels.LocaleCodes>>;
-    const selector = `#${this.__localeCodesHelperLoaderId}`;
-    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;
-  }
-
-  private get __shippingRegions() {
-    type Loader = NucleonElement<Resource<Rels.Regions>>;
-    const loader = this.renderRoot.querySelector<Loader>(`#${this.__shippingRegionsLoaderId}`);
-    return loader?.data?.values;
-  }
-
-  private get __billingRegions() {
-    type Loader = NucleonElement<Resource<Rels.Regions>>;
-    const loader = this.renderRoot.querySelector<Loader>(`#${this.__billingRegionsLoaderId}`);
-    return loader?.data?.values;
-  }
-
-  private get __templateSet() {
-    type Loader = NucleonElement<Resource<Rels.TemplateSet>>;
-    const selector = `#${this.__templateSetLoaderId}`;
-    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;
-  }
-
-  private get __discounts() {
-    type Loader = NucleonElement<Resource<Rels.Discounts>>;
-    return this.renderRoot.querySelector<Loader>(`#${this.__discountsLoaderId}`);
-  }
-
-  private get __countriesHelper() {
-    type Loader = NucleonElement<Resource<Rels.Countries>>;
-    const loader = this.renderRoot.querySelector<Loader>(`#${this.__countriesHelperLoaderId}`);
-    return loader?.data?.values;
+  private get __languageOptions() {
+    type Loader = NucleonElement<Resource<Rels.Languages>>;
+    const loader = this.renderRoot.querySelector<Loader>(`#${this.__languagesLoaderId}`);
+    const values = Object.entries(loader?.data?.values ?? {});
+    return values.map(([value, rawLabel]) => ({ rawLabel, value }));
   }
 
   private get __customer() {
-    type Loader = NucleonElement<Resource<Rels.Customer>>;
-    return this.renderRoot.querySelector<Loader>(`#${this.__customerLoaderId}`)?.data;
-  }
-
-  private get __store() {
-    type Loader = NucleonElement<Resource<Rels.Store>>;
-    const selector = `#${this.__storeLoaderId}`;
-    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;
-  }
-
-  private __renderTotalOrder(currency: string | null, currencyDisplay: string | undefined) {
-    const data = this.data;
-    if (!data || !currency || !currencyDisplay) return html`--`;
-
-    const options = { amount: `${data.total_order} ${currency}`, currencyDisplay };
-    return html`<foxy-i18n infer="totals" key="total_order" .options=${options}></foxy-i18n>`;
-  }
-
-  private __renderTotals(currency: string | null, currencyDisplay: string | undefined) {
-    const keys = ['total_item_price', 'total_shipping', 'total_tax'] as const;
-    const data = this.data;
-    const isPriceReady = data && currency && currencyDisplay;
-
-    return keys.map(key => {
-      const options = { amount: `${data?.[key]} ${currency}`, currencyDisplay };
-
-      return html`
-        <div data-testid=${key} class="flex justify-between text-m text-secondary">
-          <foxy-i18n key=${key} infer="totals"></foxy-i18n>
-          ${isPriceReady
-            ? html`<foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>`
-            : html`<span>--</span>`}
-        </div>
-      `;
-    });
-  }
+    type Loader = NucleonElement<
+      Resource<
+        Rels.Customer,
+        { zoom: ['default_payment_method', 'default_shipping_address', 'default_billing_address'] }
+      >
+    >;
 
-  private __renderDiscounts(currency: string | null, currencyDisplay: string | undefined) {
-    const discounts = this.__discounts?.data?._embedded['fx:discounts'];
-    const isPriceReady = currency && currencyDisplay;
-
-    return discounts?.map(discount => {
-      const options = { amount: `${discount.amount} ${currency}`, currencyDisplay };
-
-      return html`
-        <div data-testclass="discount" class="flex justify-between text-m text-secondary">
-          <span>${discount.name} &bull; ${discount.code}</span>
-          ${isPriceReady
-            ? html`<foxy-i18n infer="totals" key="price" .options=${options}></foxy-i18n>`
-            : html`<span>--</span>`}
-        </div>
-      `;
-    });
+    return this.renderRoot.querySelector<Loader>(`#${this.__customerLoaderId}`)?.data;
   }
 }
diff --git a/src/elements/public/CartForm/index.ts b/src/elements/public/CartForm/index.ts
index 8e9a7c080..29e2c110e 100644
--- a/src/elements/public/CartForm/index.ts
+++ b/src/elements/public/CartForm/index.ts
@@ -1,8 +1,8 @@
-import '../../internal/InternalAsyncComboBoxControl/index';
+import '../../internal/InternalResourcePickerControl/index';
 import '../../internal/InternalAsyncListControl/index';
+import '../../internal/InternalSummaryControl/index';
+import '../../internal/InternalSwitchControl/index';
 import '../../internal/InternalSelectControl/index';
-import '../../internal/InternalSubmitControl/index';
-import '../../internal/InternalDeleteControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 
@@ -10,15 +10,20 @@ import '../AppliedCouponCodeCard/index';
 import '../AppliedCouponCodeForm/index';
 import '../CustomFieldCard/index';
 import '../CustomFieldForm/index';
+import '../TemplateSetCard/index';
 import '../NucleonElement/index';
 import '../AttributeCard/index';
 import '../AttributeForm/index';
-import '../DiscountCard/index';
+import '../CustomerCard/index';
 import '../ItemCard/index';
 import '../ItemForm/index';
 import '../I18n/index';
 
-import './internal/InternalCartFormViewAsCustomerControl/index';
+import './internal/InternalCartFormCreateSessionAction/index';
+import './internal/InternalCartFormAddressSummaryItem/index';
+import './internal/InternalCartFormPaymentMethodForm/index';
+import './internal/InternalCartFormPaymentMethodCard/index';
+import './internal/InternalCartFormTotalsControl/index';
 
 import { CartForm } from './CartForm';
 
diff --git a/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.test.ts b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.test.ts
new file mode 100644
index 000000000..cc7abfd37
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.test.ts
@@ -0,0 +1,915 @@
+import type { FetchEvent } from '../../../NucleonElement/FetchEvent';
+
+import './index';
+
+import { InternalCartFormAddressSummaryItem as Control } from './InternalCartFormAddressSummaryItem';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { createRouter } from '../../../../../server';
+import { NucleonElement } from '../../../NucleonElement';
+import { Data } from '../../types';
+import { getTestData } from '../../../../../testgen/getTestData';
+import { Resource } from '@foxy.io/sdk/core';
+import { Rels } from '@foxy.io/sdk/backend';
+import { stub } from 'sinon';
+
+async function waitForIdle(element: Control) {
+  await waitUntil(
+    () => {
+      const loaders = element.renderRoot.querySelectorAll<NucleonElement<any>>('foxy-nucleon');
+      return [...loaders].every(loader => loader.in('idle'));
+    },
+    '',
+    { timeout: 5000 }
+  );
+}
+
+type Customer = Resource<
+  Rels.Customer,
+  {
+    zoom: ['default_billing_address', 'default_shipping_address', 'default_payment_method'];
+  }
+>;
+
+class TestControl extends Control {
+  static get properties() {
+    return {
+      ...super.properties,
+      testCheckValidity: { attribute: false },
+      testErrorMessage: { attribute: false },
+      testValue: { attribute: false },
+    };
+  }
+
+  testCheckValidity = () => true;
+
+  testErrorMessage = '';
+
+  testValue = '';
+
+  nucleon = new NucleonElement();
+
+  protected get _checkValidity() {
+    return this.testCheckValidity;
+  }
+
+  protected get _errorMessage() {
+    return this.testErrorMessage;
+  }
+
+  protected get _value() {
+    return this.testValue;
+  }
+
+  protected set _value(newValue: string) {
+    this.testValue = newValue;
+    super._value = newValue;
+  }
+}
+
+customElements.define('test-internal-cart-form-address-summary-item', TestControl);
+
+describe('CartForm', () => {
+  describe('InternalCartFormAddressSummaryItem', () => {
+    const OriginalResizeObserver = window.ResizeObserver;
+
+    // @ts-expect-error disabling ResizeObserver because it errors in test env
+    before(() => (window.ResizeObserver = undefined));
+    after(() => (window.ResizeObserver = OriginalResizeObserver));
+
+    it('imports and defines vaadin-button', () => {
+      expect(customElements.get('vaadin-button')).to.exist;
+    });
+
+    it('imports and defines foxy-internal-editable-control', () => {
+      expect(customElements.get('foxy-internal-editable-control')).to.exist;
+    });
+
+    it('imports and defines foxy-internal-select-control', () => {
+      expect(customElements.get('foxy-internal-select-control')).to.exist;
+    });
+
+    it('imports and defines foxy-internal-text-control', () => {
+      expect(customElements.get('foxy-internal-text-control')).to.exist;
+    });
+
+    it('imports and defines foxy-nucleon', () => {
+      expect(customElements.get('foxy-nucleon')).to.exist;
+    });
+
+    it('defines itself as foxy-internal-cart-form-address-summary-item', () => {
+      expect(customElements.get('foxy-internal-cart-form-address-summary-item')).to.exist;
+    });
+
+    it('extends foxy-internal-editable-control', () => {
+      expect(new Control()).to.be.an.instanceOf(
+        customElements.get('foxy-internal-editable-control')
+      );
+    });
+
+    it('has a reactive property "customer"', () => {
+      expect(Control).to.have.deep.nested.property('properties.customer', { type: Object });
+      expect(new Control()).to.have.property('customer', null);
+    });
+
+    it('has a reactive property "countries"', () => {
+      expect(Control).to.have.deep.nested.property('properties.countries', {});
+      expect(new Control()).to.have.property('countries', null);
+    });
+
+    it('has a reactive property "regions"', () => {
+      expect(Control).to.have.deep.nested.property('properties.regions', {});
+      expect(new Control()).to.have.property('regions', null);
+    });
+
+    it('has a reactive property "type"', () => {
+      expect(Control).to.have.deep.nested.property('properties.type', {});
+      expect(new Control()).to.have.property('type', null);
+    });
+
+    (['billing', 'shipping'] as const).forEach(addressType => {
+      it(`disables ${addressType} region selector while regions are loading`, async () => {
+        const router = createRouter();
+        const nucleon = await fixture<NucleonElement<Data>>(html`
+          <foxy-nucleon
+            type=${addressType}
+            href="https://demo.api/hapi/carts/0?zoom=discounts"
+            @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+          >
+            <foxy-internal-cart-form-address-summary-item
+              countries="https://demo.api/hapi/property_helpers/3"
+              regions="https://demo.api/virtual/stall"
+              infer="${addressType}-address"
+            >
+            </foxy-internal-cart-form-address-summary-item>
+          </foxy-nucleon>
+        `);
+
+        await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+        const control = nucleon.firstElementChild as Control;
+
+        nucleon.edit({ [`${addressType}_country`]: 'US' });
+        control.inferProperties();
+        await control.requestUpdate();
+
+        const disabled = control.disabledSelector;
+        expect(disabled.matches('address:state', true)).to.be.true;
+      });
+    });
+
+    it('renders label in summary item layout', async () => {
+      const control = await fixture<TestControl>(html`
+        <test-internal-cart-form-address-summary-item></test-internal-cart-form-address-summary-item>
+      `);
+
+      expect(control.renderRoot).to.include.text('label');
+
+      control.label = 'Foo bar';
+      await control.requestUpdate();
+
+      expect(control.renderRoot).to.not.include.text('label');
+      expect(control.renderRoot).to.include.text('Foo bar');
+    });
+
+    it('renders helper text in summary item layout', async () => {
+      const control = await fixture<TestControl>(html`
+        <test-internal-cart-form-address-summary-item></test-internal-cart-form-address-summary-item>
+      `);
+
+      expect(control.renderRoot).to.include.text('helper_text');
+
+      control.helperText = 'Test helper text';
+      await control.requestUpdate();
+
+      expect(control.renderRoot).to.not.include.text('helper_text');
+      expect(control.renderRoot).to.include.text('Test helper text');
+    });
+
+    it('renders error text in summary item layout if available', async () => {
+      const control = await fixture<TestControl>(html`
+        <test-internal-cart-form-address-summary-item></test-internal-cart-form-address-summary-item>
+      `);
+
+      expect(control.renderRoot).to.not.include.text('Test error message');
+
+      control.testErrorMessage = 'Test error message';
+      await control.requestUpdate();
+
+      expect(control.renderRoot).to.include.text('Test error message');
+    });
+
+    it('renders Edit button that opens the Edit dialog', async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-cart-form-address-summary-item></foxy-internal-cart-form-address-summary-item>
+      `);
+
+      const button = control.renderRoot.querySelector<HTMLButtonElement>(
+        'button[aria-label="edit"]'
+      );
+
+      expect(button).to.exist;
+      button?.click();
+
+      const dialog = control.renderRoot.querySelector('dialog');
+      expect(dialog).to.have.attribute('open');
+    });
+
+    it('disables Edit button when control is disabled or readonly', async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-cart-form-address-summary-item></foxy-internal-cart-form-address-summary-item>
+      `);
+
+      const button = control.renderRoot.querySelector<HTMLButtonElement>(
+        'button[aria-label="edit"]'
+      );
+
+      expect(button).to.not.have.attribute('disabled');
+
+      control.disabled = true;
+      await control.requestUpdate();
+      expect(button).to.have.attribute('disabled');
+
+      control.disabled = false;
+      control.readonly = true;
+      await control.requestUpdate();
+      expect(button).to.have.attribute('disabled');
+
+      control.readonly = true;
+      control.disabled = true;
+      await control.requestUpdate();
+      expect(button).to.have.attribute('disabled');
+    });
+
+    (['billing', 'shipping'] as const).forEach(addressType => {
+      it(`renders ${addressType} address with overrides in Edit button`, async () => {
+        const router = createRouter();
+        const customer = await getTestData<Customer>(
+          './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+        );
+
+        const defaultAddress = customer._embedded[`fx:default_${addressType}_address` as const];
+
+        defaultAddress.first_name = 'John';
+        defaultAddress.last_name = 'Doe';
+        defaultAddress.company = 'ACME';
+        defaultAddress.phone = '123456789';
+        defaultAddress.address1 = '123 Main St';
+        defaultAddress.address2 = 'Apt 1';
+        defaultAddress.country = 'US';
+        defaultAddress.region = 'CA';
+        defaultAddress.city = 'San Francisco';
+        defaultAddress.postal_code = '94105';
+
+        const nucleon = await fixture<NucleonElement<Data>>(html`
+          <foxy-nucleon
+            type=${addressType}
+            href="https://demo.api/hapi/carts/0?zoom=discounts"
+            @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+          >
+            >
+            <foxy-internal-cart-form-address-summary-item
+              countries="https://demo.api/hapi/property_helpers/3"
+              regions="https://demo.api/hapi/property_helpers/4"
+              infer="${addressType}-address"
+              type=${addressType}
+              .customer=${customer}
+            >
+            </foxy-internal-cart-form-address-summary-item>
+          </foxy-nucleon>
+        `);
+
+        await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+        nucleon.edit({
+          use_customer_shipping_address: true,
+          [`${addressType}_first_name`]: 'John',
+          [`${addressType}_last_name`]: '',
+          [`${addressType}_company`]: null,
+          [`${addressType}_phone`]: '0987654321',
+          [`${addressType}_address1`]: '',
+          [`${addressType}_address2`]: null,
+          [`${addressType}_country`]: 'GB',
+          [`${addressType}_state`]: '',
+          [`${addressType}_city`]: null,
+          [`${addressType}_postal_code`]: '00383',
+        });
+
+        const control = nucleon.firstElementChild as Control;
+        control.inferProperties();
+        await control.requestUpdate();
+
+        const editBtn = control.renderRoot.querySelector('button[aria-label="edit"]');
+        const editBtnText = editBtn?.textContent?.replace(/\s+/g, ' ').trim();
+        expect(editBtnText).to.equal('John -- ACME 0987654321 -- Apt 1 San Francisco -- 00383 GB');
+      });
+    });
+
+    it('renders dialog header with the same key as label', async () => {
+      const control = await fixture<TestControl>(html`
+        <foxy-internal-cart-form-address-summary-item></foxy-internal-cart-form-address-summary-item>
+      `);
+
+      const label = control.renderRoot.querySelector('dialog h2 foxy-i18n[key="label"]');
+      expect(label).to.exist;
+      expect(label).to.have.attribute('infer', '');
+    });
+
+    it('renders summary control for name fields in dialog', async () => {
+      const control = await fixture<TestControl>(html`
+        <foxy-internal-cart-form-address-summary-item></foxy-internal-cart-form-address-summary-item>
+      `);
+
+      const dialog = control.renderRoot.querySelector('dialog');
+      const name = dialog?.querySelector('foxy-internal-summary-control[infer="name"]');
+      expect(name).to.exist;
+    });
+
+    it('renders summary control for extra fields in dialog', async () => {
+      const control = await fixture<TestControl>(html`
+        <foxy-internal-cart-form-address-summary-item></foxy-internal-cart-form-address-summary-item>
+      `);
+
+      const dialog = control.renderRoot.querySelector('dialog');
+      const extra = dialog?.querySelector('foxy-internal-summary-control[infer="extra"]');
+      expect(extra).to.exist;
+    });
+
+    it('renders summary control for address fields in dialog', async () => {
+      const control = await fixture<TestControl>(html`
+        <foxy-internal-cart-form-address-summary-item></foxy-internal-cart-form-address-summary-item>
+      `);
+
+      const dialog = control.renderRoot.querySelector('dialog');
+      const address = dialog?.querySelector('foxy-internal-summary-control[infer="address"]');
+      expect(address).to.exist;
+    });
+
+    (['billing', 'shipping'] as const).forEach(addressType => {
+      (['first_name', 'last_name'] as const).forEach(property => {
+        it(`renders text control for ${addressType} ${property} in dialog`, async () => {
+          const router = createRouter();
+          const customer = await getTestData<Customer>(
+            './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+          );
+
+          const defaultAddress = customer._embedded[`fx:default_${addressType}_address` as const];
+          defaultAddress[property] = 'foo';
+
+          const nucleon = await fixture<NucleonElement<Data>>(html`
+            <foxy-nucleon
+              type=${addressType}
+              href="https://demo.api/hapi/carts/0?zoom=discounts"
+              @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+            >
+              >
+              <foxy-internal-cart-form-address-summary-item
+                countries="https://demo.api/hapi/property_helpers/3"
+                regions="https://demo.api/hapi/property_helpers/4"
+                infer="${addressType}-address"
+                type=${addressType}
+                .customer=${customer}
+              >
+              </foxy-internal-cart-form-address-summary-item>
+            </foxy-nucleon>
+          `);
+
+          await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+          nucleon.edit({
+            use_customer_shipping_address: true,
+            [`${addressType}_${property}`]: 'foo',
+          });
+
+          const control = nucleon.firstElementChild as Control;
+          control.inferProperties();
+          await control.requestUpdate();
+
+          const dialog = control.renderRoot.querySelector('dialog');
+          const field = dialog?.querySelector(
+            `[infer="name"] foxy-internal-text-control[infer="${property.replace(/_/g, '-')}"]`
+          );
+
+          expect(field).to.exist;
+          expect(field).to.have.attribute('layout', 'summary-item');
+          expect(field).to.have.attribute('property', `${addressType}_${property}`);
+          expect(field).to.have.attribute('placeholder', 'empty_modified_placeholder');
+
+          field?.dispatchEvent(new CustomEvent('clear'));
+          control.inferProperties();
+          await control.requestUpdate();
+          expect(nucleon).to.have.nested.property(`form.${addressType}_${property}`, null);
+          expect(field).to.have.attribute('placeholder', 'foo');
+
+          customer._embedded[`fx:default_${addressType}_address` as const][property] = '';
+          await control.requestUpdate();
+          expect(field).to.not.have.attribute('placeholder');
+        });
+      });
+
+      (['company', 'phone'] as const).forEach(property => {
+        it(`renders text control for ${addressType} ${property} in dialog`, async () => {
+          const router = createRouter();
+          const customer = await getTestData<Customer>(
+            './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+          );
+
+          const defaultAddress = customer._embedded[`fx:default_${addressType}_address` as const];
+          defaultAddress[property] = 'foo';
+
+          const nucleon = await fixture<NucleonElement<Data>>(html`
+            <foxy-nucleon
+              type=${addressType}
+              href="https://demo.api/hapi/carts/0?zoom=discounts"
+              @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+            >
+              >
+              <foxy-internal-cart-form-address-summary-item
+                countries="https://demo.api/hapi/property_helpers/3"
+                regions="https://demo.api/hapi/property_helpers/4"
+                infer="${addressType}-address"
+                type=${addressType}
+                .customer=${customer}
+              >
+              </foxy-internal-cart-form-address-summary-item>
+            </foxy-nucleon>
+          `);
+
+          await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+          nucleon.edit({
+            use_customer_shipping_address: true,
+            [`${addressType}_${property}`]: 'foo',
+          });
+
+          const control = nucleon.firstElementChild as Control;
+          control.inferProperties();
+          await control.requestUpdate();
+
+          const dialog = control.renderRoot.querySelector('dialog');
+          const field = dialog?.querySelector(
+            `[infer="extra"] foxy-internal-text-control[infer="${property.replace(/_/g, '-')}"]`
+          );
+
+          expect(field).to.exist;
+          expect(field).to.have.attribute('layout', 'summary-item');
+          expect(field).to.have.attribute('property', `${addressType}_${property}`);
+          expect(field).to.have.attribute('placeholder', 'empty_modified_placeholder');
+
+          field?.dispatchEvent(new CustomEvent('clear'));
+          control.inferProperties();
+          await control.requestUpdate();
+          expect(nucleon).to.have.nested.property(`form.${addressType}_${property}`, null);
+          expect(field).to.have.attribute('placeholder', 'foo');
+
+          customer._embedded[`fx:default_${addressType}_address` as const][property] = '';
+          await control.requestUpdate();
+          expect(field).to.not.have.attribute('placeholder');
+        });
+      });
+
+      (
+        [
+          { property: 'address1', infer: 'address-one' },
+          { property: 'address2', infer: 'address-two' },
+          { property: 'city', infer: 'city' },
+          { property: 'postal_code', infer: 'postal-code' },
+        ] as const
+      ).forEach(({ property, infer }) => {
+        it(`renders text control for ${addressType} ${property} in dialog`, async () => {
+          const router = createRouter();
+          const customer = await getTestData<Customer>(
+            './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+          );
+
+          const defaultAddress = customer._embedded[`fx:default_${addressType}_address` as const];
+          defaultAddress[property] = 'foo';
+
+          const nucleon = await fixture<NucleonElement<Data>>(html`
+            <foxy-nucleon
+              type=${addressType}
+              href="https://demo.api/hapi/carts/0?zoom=discounts"
+              @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+            >
+              >
+              <foxy-internal-cart-form-address-summary-item
+                countries="https://demo.api/hapi/property_helpers/3"
+                regions="https://demo.api/hapi/property_helpers/4"
+                infer="${addressType}-address"
+                type=${addressType}
+                .customer=${customer}
+              >
+              </foxy-internal-cart-form-address-summary-item>
+            </foxy-nucleon>
+          `);
+
+          await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+          nucleon.edit({
+            use_customer_shipping_address: true,
+            [`${addressType}_${property}`]: 'foo',
+          });
+
+          const control = nucleon.firstElementChild as Control;
+          control.inferProperties();
+          await control.requestUpdate();
+
+          const dialog = control.renderRoot.querySelector('dialog');
+          const field = dialog?.querySelector(
+            `[infer="address"] foxy-internal-text-control[infer="${infer}"]`
+          );
+
+          expect(field).to.exist;
+          expect(field).to.have.attribute('layout', 'summary-item');
+          expect(field).to.have.attribute('property', `${addressType}_${property}`);
+          expect(field).to.have.attribute('placeholder', 'empty_modified_placeholder');
+
+          field?.dispatchEvent(new CustomEvent('clear'));
+          control.inferProperties();
+          await control.requestUpdate();
+          expect(nucleon).to.have.nested.property(`form.${addressType}_${property}`, null);
+          expect(field).to.have.attribute('placeholder', 'foo');
+
+          customer._embedded[`fx:default_${addressType}_address` as const][property] = '';
+          await control.requestUpdate();
+          expect(field).to.not.have.attribute('placeholder');
+        });
+      });
+
+      it(`renders select control for ${addressType} country in dialog`, async () => {
+        const router = createRouter();
+        const customer = await getTestData<Customer>(
+          './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+        );
+
+        const defaultAddress = customer._embedded[`fx:default_${addressType}_address` as const];
+        defaultAddress.country = 'US';
+
+        const nucleon = await fixture<NucleonElement<Data>>(html`
+          <foxy-nucleon
+            type=${addressType}
+            href="https://demo.api/hapi/carts/0?zoom=discounts"
+            @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+          >
+            >
+            <foxy-internal-cart-form-address-summary-item
+              countries="https://demo.api/hapi/property_helpers/3"
+              regions="https://demo.api/hapi/property_helpers/4"
+              infer="${addressType}-address"
+              type=${addressType}
+              .customer=${customer}
+            >
+            </foxy-internal-cart-form-address-summary-item>
+          </foxy-nucleon>
+        `);
+
+        await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+        nucleon.edit({
+          use_customer_shipping_address: true,
+          [`${addressType}_country`]: 'GB',
+        });
+
+        const control = nucleon.firstElementChild as Control;
+        control.inferProperties();
+        await control.requestUpdate();
+        await waitForIdle(control);
+
+        const dialog = control.renderRoot.querySelector('dialog');
+        const field = dialog?.querySelector(
+          `[infer="address"] foxy-internal-select-control[infer="country"]`
+        );
+
+        expect(field).to.exist;
+        expect(field).to.have.attribute('layout', 'summary-item');
+        expect(field).to.have.attribute('property', `${addressType}_country`);
+        expect(field).to.have.attribute('placeholder', 'empty_modified_placeholder');
+
+        const countries = await getTestData<Resource<Rels.Countries>>('./hapi/property_helpers/3');
+        const options = Object.values(countries.values).map(v => ({
+          rawLabel: v.default,
+          value: v.cc2,
+        }));
+
+        expect(field).to.have.deep.property('options', options);
+
+        nucleon.edit({ [`${addressType}_country`]: null });
+        control.inferProperties();
+        await control.requestUpdate();
+        expect(nucleon).to.have.nested.property(`form.${addressType}_country`, null);
+        expect(field).to.have.attribute('placeholder', 'US');
+
+        customer._embedded[`fx:default_${addressType}_address` as const].country = '';
+        await control.requestUpdate();
+        expect(field).to.not.have.attribute('placeholder');
+      });
+
+      it(`renders text control for ${addressType} state in dialog if selected country has no regions on file`, async () => {
+        const router = createRouter();
+        const customer = await getTestData<Customer>(
+          './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+        );
+
+        const defaultAddress = customer._embedded[`fx:default_${addressType}_address` as const];
+        defaultAddress.country = 'AR';
+        defaultAddress.region = 'CABA';
+
+        const nucleon = await fixture<NucleonElement<Data>>(html`
+          <foxy-nucleon
+            type=${addressType}
+            href="https://demo.api/hapi/carts/0?zoom=discounts"
+            @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+          >
+            >
+            <foxy-internal-cart-form-address-summary-item
+              countries="https://demo.api/hapi/property_helpers/3"
+              regions="https://demo.api/virtual/empty"
+              infer="${addressType}-address"
+              type=${addressType}
+              .customer=${customer}
+            >
+            </foxy-internal-cart-form-address-summary-item>
+          </foxy-nucleon>
+        `);
+
+        await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+        nucleon.edit({
+          use_customer_shipping_address: true,
+          [`${addressType}_country`]: 'AR',
+          [`${addressType}_state`]: 'CABA',
+        });
+
+        const control = nucleon.firstElementChild as Control;
+        control.inferProperties();
+        await control.requestUpdate();
+
+        const dialog = control.renderRoot.querySelector('dialog');
+        const field = dialog?.querySelector(
+          `[infer="address"] foxy-internal-text-control[infer="state"]`
+        );
+
+        expect(field).to.exist;
+        expect(field).to.have.attribute('layout', 'summary-item');
+        expect(field).to.have.attribute('property', `${addressType}_state`);
+        expect(field).to.have.attribute('placeholder', 'empty_modified_placeholder');
+
+        field?.dispatchEvent(new CustomEvent('clear'));
+        control.inferProperties();
+        await control.requestUpdate();
+        expect(nucleon).to.have.nested.property(`form.${addressType}_state`, null);
+        expect(field).to.have.attribute('placeholder', 'CABA');
+
+        customer._embedded[`fx:default_${addressType}_address` as const].region = '';
+        await control.requestUpdate();
+        expect(field).to.not.have.attribute('placeholder');
+      });
+
+      it(`renders select control for ${addressType} state in dialog if selected country has regions on file`, async () => {
+        const router = createRouter();
+        const customer = await getTestData<Customer>(
+          './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+        );
+
+        const defaultAddress = customer._embedded[`fx:default_${addressType}_address` as const];
+        defaultAddress.country = 'AR';
+        defaultAddress.region = 'CABA';
+
+        const nucleon = await fixture<NucleonElement<Data>>(html`
+          <foxy-nucleon
+            type=${addressType}
+            href="https://demo.api/hapi/carts/0?zoom=discounts"
+            @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+          >
+            >
+            <foxy-internal-cart-form-address-summary-item
+              countries="https://demo.api/hapi/property_helpers/3"
+              regions="https://demo.api/hapi/property_helpers/4"
+              infer="${addressType}-address"
+              type=${addressType}
+              .customer=${customer}
+            >
+            </foxy-internal-cart-form-address-summary-item>
+          </foxy-nucleon>
+        `);
+
+        await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+        nucleon.edit({
+          use_customer_shipping_address: true,
+          [`${addressType}_country`]: 'AR',
+          [`${addressType}_state`]: 'CABA',
+        });
+
+        const control = nucleon.firstElementChild as Control;
+        control.inferProperties();
+        await control.requestUpdate();
+        await waitForIdle(control);
+
+        const dialog = control.renderRoot.querySelector('dialog');
+        const field = dialog?.querySelector(
+          `[infer="address"] foxy-internal-select-control[infer="state"]`
+        );
+
+        expect(field).to.exist;
+        expect(field).to.have.attribute('layout', 'summary-item');
+        expect(field).to.have.attribute('property', `${addressType}_state`);
+        expect(field).to.have.attribute('placeholder', 'empty_modified_placeholder');
+
+        const regions = await getTestData<Resource<Rels.Regions>>('./hapi/property_helpers/4');
+        const options = Object.values(regions.values).map(v => ({
+          rawLabel: v.default,
+          value: v.code,
+        }));
+
+        expect(field).to.have.deep.property('options', options);
+
+        nucleon.edit({ [`${addressType}_state`]: null });
+        control.inferProperties();
+        await control.requestUpdate();
+        expect(nucleon).to.have.nested.property(`form.${addressType}_state`, null);
+        expect(field).to.have.attribute('placeholder', 'CABA');
+
+        customer._embedded[`fx:default_${addressType}_address` as const].region = '';
+        await control.requestUpdate();
+        expect(field).to.not.have.attribute('placeholder');
+      });
+
+      it(`renders a button in dialog that resets all overrides for ${addressType} address`, async () => {
+        const router = createRouter();
+        const customer = await getTestData<Customer>(
+          './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+        );
+
+        const nucleon = await fixture<NucleonElement<Data>>(html`
+          <foxy-nucleon
+            type=${addressType}
+            href="https://demo.api/hapi/carts/0?zoom=discounts"
+            @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+          >
+            >
+            <foxy-internal-cart-form-address-summary-item
+              countries="https://demo.api/hapi/property_helpers/3"
+              regions="https://demo.api/hapi/property_helpers/4"
+              infer="${addressType}-address"
+              type=${addressType}
+              .customer=${customer}
+            >
+            </foxy-internal-cart-form-address-summary-item>
+          </foxy-nucleon>
+        `);
+
+        await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+        nucleon.edit({
+          use_customer_shipping_address: true,
+          [`${addressType}_first_name`]: 'John',
+          [`${addressType}_last_name`]: 'Smith',
+          [`${addressType}_company`]: 'ACME',
+          [`${addressType}_phone`]: '0987654321',
+          [`${addressType}_address1`]: '123 Main St',
+          [`${addressType}_address2`]: 'Apt 1',
+          [`${addressType}_country`]: 'US',
+          [`${addressType}_state`]: 'CA',
+          [`${addressType}_city`]: 'San Francisco',
+          [`${addressType}_postal_code`]: '00383',
+        });
+
+        const control = nucleon.firstElementChild as Control;
+        control.inferProperties();
+        await control.requestUpdate();
+
+        const dialog = control.renderRoot.querySelector('dialog');
+        const resetLabel = dialog?.querySelector('foxy-i18n[infer=""][key="reset"]');
+        const resetBtn = resetLabel?.closest('vaadin-button');
+
+        expect(resetBtn).to.exist;
+        resetBtn?.click();
+
+        expect(nucleon).to.have.nested.property(`form.${addressType}_first_name`, null);
+        expect(nucleon).to.have.nested.property(`form.${addressType}_last_name`, null);
+        expect(nucleon).to.have.nested.property(`form.${addressType}_company`, null);
+        expect(nucleon).to.have.nested.property(`form.${addressType}_phone`, null);
+        expect(nucleon).to.have.nested.property(`form.${addressType}_address1`, null);
+        expect(nucleon).to.have.nested.property(`form.${addressType}_address2`, null);
+        expect(nucleon).to.have.nested.property(`form.${addressType}_country`, null);
+        expect(nucleon).to.have.nested.property(`form.${addressType}_state`, null);
+        expect(nucleon).to.have.nested.property(`form.${addressType}_city`, null);
+        expect(nucleon).to.have.nested.property(`form.${addressType}_postal_code`, null);
+      });
+    });
+
+    it('disables Reset Overrides button in dialog when control is disabled', async () => {
+      const router = createRouter();
+      const customer = await getTestData<Customer>(
+        './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+      );
+
+      const nucleon = await fixture<NucleonElement<Data>>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/carts/0?zoom=discounts"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          >
+          <foxy-internal-cart-form-address-summary-item
+            countries="https://demo.api/hapi/property_helpers/3"
+            regions="https://demo.api/hapi/property_helpers/4"
+            .customer=${customer}
+          >
+          </foxy-internal-cart-form-address-summary-item>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+      const control = nucleon.firstElementChild as Control;
+      control.inferProperties();
+      await control.requestUpdate();
+
+      const dialog = control.renderRoot.querySelector('dialog');
+      const resetLabel = dialog?.querySelector('foxy-i18n[infer=""][key="reset"]');
+      const resetBtn = resetLabel?.closest('vaadin-button');
+      expect(resetBtn).to.not.have.attribute('disabled');
+
+      control.disabled = true;
+      await control.requestUpdate();
+      expect(resetBtn).to.have.attribute('disabled');
+    });
+
+    it('hides Reset Overrides button in dialog when control is readonly', async () => {
+      const router = createRouter();
+      const customer = await getTestData<Customer>(
+        './hapi/customers/0?zoom=default_billing_address,default_shipping_address,default_payment_method'
+      );
+
+      const nucleon = await fixture<NucleonElement<Data>>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/carts/0?zoom=discounts"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          >
+          <foxy-internal-cart-form-address-summary-item
+            countries="https://demo.api/hapi/property_helpers/3"
+            regions="https://demo.api/hapi/property_helpers/4"
+            .customer=${customer}
+          >
+          </foxy-internal-cart-form-address-summary-item>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+      const control = nucleon.firstElementChild as Control;
+      control.inferProperties();
+      await control.requestUpdate();
+
+      const dialog = control.renderRoot.querySelector('dialog');
+      const resetLabel = dialog?.querySelector('foxy-i18n[infer=""][key="reset"]');
+      const resetBtn = resetLabel?.closest('vaadin-button');
+      expect(resetBtn).to.not.have.attribute('hidden');
+
+      control.readonly = true;
+      await control.requestUpdate();
+      expect(resetBtn).to.have.attribute('hidden');
+    });
+
+    it('renders helper text in dialog', async () => {
+      const control = await fixture<TestControl>(html`
+        <foxy-internal-cart-form-address-summary-item></foxy-internal-cart-form-address-summary-item>
+      `);
+
+      const dialog = control.renderRoot.querySelector('dialog');
+      const helper = dialog?.querySelector('foxy-i18n[key="form_helper_text"]');
+      expect(helper).to.exist;
+      expect(helper).to.have.attribute('infer', '');
+    });
+
+    it('renders Done button in dialog', async () => {
+      const control = await fixture<TestControl>(html`
+        <foxy-internal-cart-form-address-summary-item></foxy-internal-cart-form-address-summary-item>
+      `);
+
+      const dialog = control.renderRoot.querySelector('dialog');
+      const doneLabel = dialog?.querySelector<HTMLDialogElement>('foxy-i18n[infer=""][key="done"]');
+      const doneBtn = doneLabel?.closest('vaadin-button');
+      expect(doneBtn).to.exist;
+
+      const closeMethod = stub(dialog!, 'close');
+      doneBtn?.click();
+      expect(closeMethod).to.have.been.called;
+    });
+
+    it('disables Done button in dialog when control is disabled', async () => {
+      const control = await fixture<TestControl>(html`
+        <foxy-internal-cart-form-address-summary-item></foxy-internal-cart-form-address-summary-item>
+      `);
+
+      const dialog = control.renderRoot.querySelector('dialog');
+      const doneLabel = dialog?.querySelector<HTMLDialogElement>('foxy-i18n[infer=""][key="done"]');
+      const doneBtn = doneLabel?.closest('vaadin-button');
+      expect(doneBtn).to.not.have.attribute('disabled');
+
+      control.disabled = true;
+      await control.requestUpdate();
+      expect(doneBtn).to.have.attribute('disabled');
+    });
+  });
+});
diff --git a/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.ts b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.ts
new file mode 100644
index 000000000..57b970358
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.ts
@@ -0,0 +1,315 @@
+import type { CSSResultArray, PropertyDeclarations } from 'lit-element';
+import type { AddressEntry, ZoomedCustomer } from './types';
+import type { NucleonElement } from '../../../NucleonElement/NucleonElement';
+import type { TemplateResult } from 'lit-html';
+import type { CartForm } from '../../CartForm';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+
+import { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { ResponsiveMixin } from '../../../../../mixins/responsive';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from '../../../../../utils/class-map';
+import { style } from './style';
+import { html } from 'lit-html';
+
+export class InternalCartFormAddressSummaryItem extends ResponsiveMixin(InternalEditableControl) {
+  static get properties(): PropertyDeclarations {
+    return {
+      ...super.properties,
+      countries: {},
+      customer: { type: Object },
+      regions: {},
+      type: {},
+    };
+  }
+
+  static get styles(): CSSResultArray {
+    return [...super.styles, style];
+  }
+
+  /** URL of the `fx:countries` property helper. */
+  countries: string | null = null;
+
+  /** Customer resource with billing and shipping address zoomed. */
+  customer: ZoomedCustomer | null = null;
+
+  /** URL of the `fx:regions` property helper. */
+  regions: string | null = null;
+
+  /** Type of the address. Billing by default. */
+  type: 'billing' | 'shipping' | null = null;
+
+  get disabledSelector(): BooleanSelector {
+    const alwaysMatch = [super.disabledSelector.toString()];
+    if (!this.__regionsLoader?.data) alwaysMatch.unshift('address:state');
+    return new BooleanSelector(alwaysMatch.join(' ').toString());
+  }
+
+  renderControl(): TemplateResult {
+    const regionOptions = this.__regionOptions;
+    const addressType = this.type ?? 'billing';
+    const address = this.__mergedAddress;
+
+    return html`
+      <div class="flex flex-col gap-m sm-flex-row items-start leading-xs">
+        <div class="flex-1">
+          <p class="text-m text-body">${this.label}</p>
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        <button
+          aria-label=${this.t('edit')}
+          class=${classMap({
+            'text-left sm-text-right transition-colors transition-opacity': true,
+            'text-body cursor-pointer hover-opacity-80': !this.disabled && !this.readonly,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'font-medium': !this.readonly,
+          })}
+          ?disabled=${this.disabled || this.readonly}
+          @click=${() => this.__dialog?.showModal()}
+        >
+          ${this.__isAddressEmpty
+            ? html`<foxy-i18n infer="" key="not_set"></foxy-i18n>`
+            : html`
+                <div>
+                  ${this.__renderAddressPart(address.first_name)}
+                  ${this.__renderAddressPart(address.last_name)}
+                </div>
+                <div>${this.__renderAddressPart(address.company)}</div>
+                <div>${this.__renderAddressPart(address.phone)}</div>
+                <div>
+                  ${this.__renderAddressPart(address.address1)}
+                  ${this.__renderAddressPart(address.address2)}
+                  ${this.__renderAddressPart(address.city)}
+                  ${this.__renderAddressPart(address.state)}
+                  ${this.__renderAddressPart(address.postal_code)}
+                  ${this.__renderAddressPart(address.country)}
+                </div>
+              `}
+        </button>
+      </div>
+
+      <dialog id="dialog" class="p-m bg-base shadow-xxl space-y-m">
+        <h2 class="text-xl font-medium">
+          <foxy-i18n infer="" key="label"></foxy-i18n>
+        </h2>
+
+        <foxy-internal-summary-control infer="name">
+          ${this.__renderTextField(address.first_name)} ${this.__renderTextField(address.last_name)}
+        </foxy-internal-summary-control>
+
+        <foxy-internal-summary-control infer="address">
+          ${this.__renderTextField(address.address1)} ${this.__renderTextField(address.address2)}
+          ${this.__renderTextField(address.city)}
+
+          <foxy-internal-select-control
+            placeholder=${ifDefined(this.__getPlaceholder(address.country))}
+            property="${addressType}_country"
+            layout="summary-item"
+            infer="country"
+            .options=${this.__countryOptions}
+          >
+          </foxy-internal-select-control>
+
+          ${regionOptions.length > 0
+            ? html`
+                <foxy-internal-select-control
+                  placeholder=${ifDefined(this.__getPlaceholder(address.state))}
+                  property="${addressType}_state"
+                  layout="summary-item"
+                  infer="state"
+                  .options=${regionOptions}
+                >
+                </foxy-internal-select-control>
+              `
+            : this.__renderTextField(address.state)}
+          ${this.__renderTextField(address.postal_code)}
+        </foxy-internal-summary-control>
+
+        <foxy-internal-summary-control infer="extra">
+          ${this.__renderTextField(address.company)} ${this.__renderTextField(address.phone)}
+        </foxy-internal-summary-control>
+
+        <p class="text-xs text-secondary">
+          <foxy-i18n infer="" key="form_helper_text"></foxy-i18n>
+        </p>
+
+        <div class="flex justify-between gap-m">
+          <vaadin-button
+            theme="error"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly}
+            @click=${() => {
+              this.nucleon?.edit({
+                [`${addressType}_first_name`]: null,
+                [`${addressType}_last_name`]: null,
+                [`${addressType}_company`]: null,
+                [`${addressType}_address1`]: null,
+                [`${addressType}_address2`]: null,
+                [`${addressType}_city`]: null,
+                [`${addressType}_state`]: null,
+                [`${addressType}_postal_code`]: null,
+                [`${addressType}_country`]: null,
+                [`${addressType}_phone`]: null,
+              });
+            }}
+          >
+            <foxy-i18n infer="" key="reset"></foxy-i18n>
+          </vaadin-button>
+
+          <vaadin-button
+            theme="primary"
+            ?disabled=${this.disabled}
+            @click=${() => this.__dialog?.close()}
+          >
+            <foxy-i18n infer="" key="done"></foxy-i18n>
+          </vaadin-button>
+        </div>
+      </dialog>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.countries ?? undefined)}
+        id="countriesLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__regionsUrl)}
+        id="regionsLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+    `;
+  }
+
+  private __renderAddressPart(entry: AddressEntry) {
+    const text = this.__getDisplayText(entry);
+
+    return html`
+      <span
+        class=${classMap({
+          'text-success bg-success-10': entry.modified && !this.disabled,
+          'bg-contrast-5': entry.modified && this.disabled,
+          'inline-block': !!text,
+          'rounded-s': true,
+          'hidden': !text,
+        })}
+      >
+        ${text}
+      </span>
+    `;
+  }
+
+  private __renderTextField(entry: AddressEntry) {
+    return html`
+      <foxy-internal-text-control
+        placeholder=${ifDefined(this.__getPlaceholder(entry))}
+        property="${this.type ?? 'billing'}_${entry.field}"
+        layout="summary-item"
+        infer=${entry.field.replace(/_/g, '-').replace('1', '-one').replace('2', '-two')}
+        @clear=${() => this.nucleon?.edit({ [`${this.type ?? 'billing'}_${entry.field}`]: null })}
+      >
+      </foxy-internal-text-control>
+    `;
+  }
+
+  private __getDisplayText(entry: AddressEntry) {
+    return entry.value || (entry.modified ? '--' : '');
+  }
+
+  private __getPlaceholder(entry: AddressEntry) {
+    return entry.modified ? this.t('empty_modified_placeholder') : entry.originalValue || void 0;
+  }
+
+  private get __countriesLoader() {
+    type Loader = NucleonElement<Resource<Rels.Countries>>;
+    return this.renderRoot.querySelector<Loader>('#countriesLoader');
+  }
+
+  private get __countryOptions() {
+    return Object.values(this.__countriesLoader?.data?.values ?? {}).map(v => ({
+      rawLabel: v.default,
+      value: v.cc2,
+    }));
+  }
+
+  private get __isAddressEmpty() {
+    return Object.values(this.__mergedAddress).every(entry => this.__getDisplayText(entry) === '');
+  }
+
+  private get __regionOptions() {
+    return Object.values(this.__regionsLoader?.data?.values ?? {}).map(v => ({
+      rawLabel: v.default,
+      value: v.code,
+    }));
+  }
+
+  private get __regionsLoader() {
+    type Loader = NucleonElement<Resource<Rels.Regions>>;
+    return this.renderRoot.querySelector<Loader>('#regionsLoader');
+  }
+
+  private get __mergedAddress() {
+    type EmbedKey = 'fx:default_billing_address' | 'fx:default_shipping_address';
+
+    const cart = (this.nucleon as CartForm | null)?.form;
+    const type = this.type === 'shipping' ? 'shipping' : 'billing';
+    const defaults = this.customer?._embedded[`fx:default_${type}_address` as EmbedKey] ?? {};
+    const addressFields = [
+      'first_name',
+      'last_name',
+      'company',
+      'address1',
+      'address2',
+      'city',
+      'state',
+      'postal_code',
+      'country',
+      'phone',
+    ];
+
+    const address = addressFields.reduce<Record<string, AddressEntry>>((acc, field) => {
+      const cartKey = `${type}_${field}` as keyof typeof cart;
+      const cartValue = cart?.[cartKey];
+      const defaultKey = (field === 'state' ? 'region' : field) as keyof typeof defaults;
+      const defaultValue = defaults?.[defaultKey];
+
+      acc[field] = {
+        originalValue: String(defaultValue ?? ''),
+        modified: cartValue !== null,
+        value: String(cartValue ?? defaultValue ?? ''),
+        field,
+      };
+
+      return acc;
+    }, {});
+
+    return address;
+  }
+
+  private get __regionsUrl() {
+    try {
+      const regionsURL = new URL(this.regions ?? '');
+      const country = this.__mergedAddress.country.value;
+      if (country) regionsURL.searchParams.set('country_code', country);
+      return regionsURL.toString();
+    } catch {
+      // ignore
+    }
+  }
+
+  private get __dialog() {
+    return this.renderRoot.querySelector<HTMLDialogElement>('#dialog');
+  }
+}
diff --git a/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/index.ts b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/index.ts
new file mode 100644
index 000000000..9037836c3
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/index.ts
@@ -0,0 +1,16 @@
+import '@vaadin/vaadin-button';
+
+import '../../../../internal/InternalEditableControl/index';
+import '../../../../internal/InternalSelectControl/index';
+import '../../../../internal/InternalTextControl/index';
+
+import '../../../NucleonElement/index';
+
+import { InternalCartFormAddressSummaryItem } from './InternalCartFormAddressSummaryItem';
+
+customElements.define(
+  'foxy-internal-cart-form-address-summary-item',
+  InternalCartFormAddressSummaryItem
+);
+
+export { InternalCartFormAddressSummaryItem };
diff --git a/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/style.ts b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/style.ts
new file mode 100644
index 000000000..75cd25b5b
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/style.ts
@@ -0,0 +1,59 @@
+import { css } from 'lit-element';
+
+export const style = css`
+  #dialog {
+    width: 100dvw;
+    max-height: calc(100dvh - var(--lumo-space-m));
+    max-width: none;
+    opacity: 0;
+    transform: translateY(100%);
+    transition: all 500ms allow-discrete;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    margin: auto 0 0 0;
+    border-radius: var(--lumo-border-radius-l) var(--lumo-border-radius-l) 0 0;
+  }
+
+  #dialog::backdrop {
+    background-color: transparent;
+    transition: all 500ms allow-discrete;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  #dialog[open] {
+    opacity: 1;
+    transform: none;
+  }
+
+  #dialog[open]::backdrop {
+    background-color: var(--lumo-shade-50pct);
+  }
+
+  @starting-style {
+    #dialog[open] {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+  }
+
+  @starting-style {
+    #dialog[open]::backdrop {
+      background-color: transparent;
+    }
+  }
+
+  @media all and (min-width: 640px) {
+    #dialog {
+      max-width: 30rem;
+      max-height: calc(100dvh - var(--lumo-space-m));
+      transform: scale(1.1);
+      margin: auto;
+      border-radius: var(--lumo-border-radius-l);
+    }
+
+    @starting-style {
+      #dialog[open] {
+        transform: scale(1.1);
+      }
+    }
+  }
+`;
diff --git a/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/types.ts b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/types.ts
new file mode 100644
index 000000000..5718effd5
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/types.ts
@@ -0,0 +1,14 @@
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+
+export type ZoomedCustomer = Resource<
+  Rels.Customer,
+  { zoom: ['default_billing_address', 'default_shipping_address'] }
+>;
+
+export type AddressEntry = {
+  originalValue: string;
+  modified: boolean;
+  value: string;
+  field: string;
+};
diff --git a/src/elements/public/CartForm/internal/InternalCartFormViewAsCustomerControl/InternalCartFormViewAsCustomerControl.test.ts b/src/elements/public/CartForm/internal/InternalCartFormCreateSessionAction/InternalCartFormCreateSessionAction.test.ts
similarity index 83%
rename from src/elements/public/CartForm/internal/InternalCartFormViewAsCustomerControl/InternalCartFormViewAsCustomerControl.test.ts
rename to src/elements/public/CartForm/internal/InternalCartFormCreateSessionAction/InternalCartFormCreateSessionAction.test.ts
index 127ebec5b..706445331 100644
--- a/src/elements/public/CartForm/internal/InternalCartFormViewAsCustomerControl/InternalCartFormViewAsCustomerControl.test.ts
+++ b/src/elements/public/CartForm/internal/InternalCartFormCreateSessionAction/InternalCartFormCreateSessionAction.test.ts
@@ -4,7 +4,7 @@ import type { CartForm } from '../../CartForm';
 import '../../index';
 import './index';
 
-import { InternalCartFormViewAsCustomerControl as Control } from './InternalCartFormViewAsCustomerControl';
+import { InternalCartFormCreateSessionAction as Control } from './InternalCartFormCreateSessionAction';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
 import { createRouter } from '../../../../../server/index';
@@ -13,7 +13,7 @@ import { getByTag } from '../../../../../testgen/getByTag';
 import { I18n } from '../../../I18n/I18n';
 
 describe('CartForm', () => {
-  describe('InternalCartFormViewAsCustomerControl', () => {
+  describe('InternalCartFormCreateSessionAction', () => {
     const OriginalResizeObserver = window.ResizeObserver;
 
     // @ts-expect-error disabling ResizeObserver because it errors in test env
@@ -30,8 +30,8 @@ describe('CartForm', () => {
       expect(element).to.equal(I18n);
     });
 
-    it('imports and defines itself as foxy-internal-cart-form-view-as-customer-control', () => {
-      const element = customElements.get('foxy-internal-cart-form-view-as-customer-control');
+    it('imports and defines itself as foxy-internal-cart-form-create-session-action', () => {
+      const element = customElements.get('foxy-internal-cart-form-create-session-action');
       expect(element).to.equal(Control);
     });
 
@@ -42,8 +42,8 @@ describe('CartForm', () => {
     it('renders loading indicator by default', async () => {
       const form = await fixture(html`
         <foxy-cart-form @fetch=${(evt: FetchEvent) => evt.respondWith(new Promise(() => void 0))}>
-          <foxy-internal-cart-form-view-as-customer-control infer="view-as-customer">
-          </foxy-internal-cart-form-view-as-customer-control>
+          <foxy-internal-cart-form-create-session-action infer="view-as-customer">
+          </foxy-internal-cart-form-create-session-action>
         </foxy-cart-form>
       `);
 
@@ -63,14 +63,14 @@ describe('CartForm', () => {
 
       const form = await fixture<CartForm>(html`<foxy-cart-form></foxy-cart-form>`);
       form.addEventListener('fetch', handleFetch as (evt: Event) => unknown);
-      form.href = 'https://demo.api/hapi/carts/0';
+      form.href = 'https://demo.api/hapi/carts/0?zoom=discounts';
 
       await waitUntil(() => !!form.data, '', { timeout: 5000 });
 
       form.removeEventListener('fetch', handleFetch as (evt: Event) => unknown);
       form.addEventListener('fetch', failAnyFetch as (evt: Event) => unknown);
       form.innerHTML = `
-        <foxy-internal-cart-form-view-as-customer-control infer="view-as-customer"></foxy-internal-cart-form-view-as-customer-control>
+        <foxy-internal-cart-form-create-session-action infer="view-as-customer"></foxy-internal-cart-form-create-session-action>
       `;
 
       const control = form.firstElementChild as Control;
@@ -94,12 +94,13 @@ describe('CartForm', () => {
 
       const form = await fixture<CartForm>(html`
         <foxy-cart-form
-          href="https://demo.api/hapi/carts/0"
+          href="https://demo.api/hapi/carts/0?zoom=discounts"
           @fetch=${(evt: FetchEvent) => {
             if (evt.request.url === 'https://test.api/create_session') {
               const link = { cart_link: 'https://example.com/cart' };
               evt.respondWith(Promise.resolve(new Response(JSON.stringify(link))));
             } else {
+              console.log('FETCH HANDLER', evt);
               router.handleEvent(evt);
             }
           }}
@@ -112,7 +113,7 @@ describe('CartForm', () => {
       form.data!._links['fx:create_session'].href = 'https://test.api/create_session';
       form.data = { ...form.data! };
       form.innerHTML = `
-        <foxy-internal-cart-form-view-as-customer-control infer="view-as-customer"></foxy-internal-cart-form-view-as-customer-control>
+        <foxy-internal-cart-form-create-session-action infer="view-as-customer"></foxy-internal-cart-form-create-session-action>
       `;
 
       const control = form.firstElementChild as Control;
diff --git a/src/elements/public/CartForm/internal/InternalCartFormViewAsCustomerControl/InternalCartFormViewAsCustomerControl.ts b/src/elements/public/CartForm/internal/InternalCartFormCreateSessionAction/InternalCartFormCreateSessionAction.ts
similarity index 84%
rename from src/elements/public/CartForm/internal/InternalCartFormViewAsCustomerControl/InternalCartFormViewAsCustomerControl.ts
rename to src/elements/public/CartForm/internal/InternalCartFormCreateSessionAction/InternalCartFormCreateSessionAction.ts
index f70598dc1..e42164f2c 100644
--- a/src/elements/public/CartForm/internal/InternalCartFormViewAsCustomerControl/InternalCartFormViewAsCustomerControl.ts
+++ b/src/elements/public/CartForm/internal/InternalCartFormCreateSessionAction/InternalCartFormCreateSessionAction.ts
@@ -12,7 +12,7 @@ type Loader = {
   href: string;
 };
 
-export class InternalCartFormViewAsCustomerControl extends InternalControl {
+export class InternalCartFormCreateSessionAction extends InternalControl {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
@@ -30,7 +30,7 @@ export class InternalCartFormViewAsCustomerControl extends InternalControl {
       return html`
         <a
           target="_blank"
-          class="flex h-m px-m rounded font-medium transition-colors text-body bg-contrast-5 hover-bg-contrast-10 items-center justify-center focus-outline-none focus-ring-2 focus-ring-primary-50"
+          class="rounded font-medium transition-colors text-body focus-outline-none focus-ring-2 focus-ring-primary-50"
           href=${href}
         >
           <foxy-i18n infer="" key="state_idle"></foxy-i18n>
@@ -40,8 +40,7 @@ export class InternalCartFormViewAsCustomerControl extends InternalControl {
       return html`
         <div
           class=${classMap({
-            'flex h-m px-m rounded items-center justify-center': true,
-            'transition-colors bg-contrast-5 font-medium': true,
+            'transition-colors font-medium rounded': true,
             'text-tertiary': state !== 'fail',
             'text-error': state === 'fail',
           })}
@@ -63,6 +62,7 @@ export class InternalCartFormViewAsCustomerControl extends InternalControl {
   }
 
   private async __reloadSessionHref(href: string | null) {
+    console.log('RELOAD SESSION HREF', href);
     if (this.__loader?.href === href) return;
 
     const nucleon = this.nucleon as CartForm | null;
diff --git a/src/elements/public/CartForm/internal/InternalCartFormCreateSessionAction/index.ts b/src/elements/public/CartForm/internal/InternalCartFormCreateSessionAction/index.ts
new file mode 100644
index 000000000..b81d1becc
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormCreateSessionAction/index.ts
@@ -0,0 +1,9 @@
+import '../../../../internal/InternalControl/index';
+
+import '../../../I18n/index';
+
+import { InternalCartFormCreateSessionAction as Control } from './InternalCartFormCreateSessionAction';
+
+customElements.define('foxy-internal-cart-form-create-session-action', Control);
+
+export { Control as InternalCartFormCreateSessionAction };
diff --git a/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/InternalCartFormPaymentMethodCard.test.ts b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/InternalCartFormPaymentMethodCard.test.ts
new file mode 100644
index 000000000..335f18ec5
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/InternalCartFormPaymentMethodCard.test.ts
@@ -0,0 +1,78 @@
+import type { FetchEvent } from '../../../NucleonElement/FetchEvent';
+
+import './index';
+
+import { InternalCartFormPaymentMethodCard as Card } from './InternalCartFormPaymentMethodCard';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { createRouter } from '../../../../../server';
+
+describe('CartForm', () => {
+  describe('InternalCartFormPaymentMethodCard', () => {
+    const OriginalResizeObserver = window.ResizeObserver;
+
+    // @ts-expect-error disabling ResizeObserver because it errors in test env
+    before(() => (window.ResizeObserver = undefined));
+    after(() => (window.ResizeObserver = OriginalResizeObserver));
+
+    it('imports and defines foxy-internal-card', () => {
+      expect(customElements.get('foxy-internal-card')).to.exist;
+    });
+
+    it('imports and defines foxy-i18n', () => {
+      expect(customElements.get('foxy-i18n')).to.exist;
+    });
+
+    it('defines itself as foxy-internal-cart-form-payment-method-card', () => {
+      expect(customElements.get('foxy-internal-cart-form-payment-method-card')).to.exist;
+    });
+
+    it('extends foxy-internal-card', () => {
+      expect(new Card()).to.be.an.instanceOf(customElements.get('foxy-internal-card'));
+    });
+
+    it('renders payment method title', async () => {
+      const router = createRouter();
+      const element = await fixture<Card>(html`
+        <foxy-internal-cart-form-payment-method-card
+          href="https://demo.api/hapi/transactions/0?zoom=payments"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+        </foxy-internal-cart-form-payment-method-card>
+      `);
+
+      await waitUntil(() => !!element.data, '', { timeout: 5000 });
+      const title = element.renderRoot.querySelector('foxy-i18n[key="title"]');
+
+      expect(title).to.exist;
+      expect(title).to.have.attribute('infer', '');
+      expect(title).to.have.deep.property('options', {
+        last4Digits: '1111',
+        context: 'valid',
+        month: '01',
+        type: 'Visa',
+        year: '17',
+      });
+    });
+
+    it('renders payment method subtitle', async () => {
+      const router = createRouter();
+      const element = await fixture<Card>(html`
+        <foxy-internal-cart-form-payment-method-card
+          href="https://demo.api/hapi/transactions/0?zoom=payments"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+        </foxy-internal-cart-form-payment-method-card>
+      `);
+
+      await waitUntil(() => !!element.data, '', { timeout: 5000 });
+      const subtitle = element.renderRoot.querySelector('foxy-i18n[key="subtitle"]');
+
+      expect(subtitle).to.exist;
+      expect(subtitle).to.have.attribute('infer', '');
+      expect(subtitle).to.have.deep.property('options', {
+        date: '2015-05-21T14:22:09-0700',
+        id: 0,
+      });
+    });
+  });
+});
diff --git a/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/InternalCartFormPaymentMethodCard.ts b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/InternalCartFormPaymentMethodCard.ts
new file mode 100644
index 000000000..4938e507a
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/InternalCartFormPaymentMethodCard.ts
@@ -0,0 +1,39 @@
+import type { TemplateResult } from 'lit-html';
+import type { Data } from './types';
+
+import { getResourceId } from '@foxy.io/sdk/core';
+import { TwoLineCard } from '../../../CustomFieldCard/TwoLineCard';
+import { html } from 'lit-html';
+
+export class InternalCartFormPaymentMethodCard extends TwoLineCard<Data> {
+  renderBody(): TemplateResult {
+    return super.renderBody({
+      title: data => {
+        const payment = data._embedded?.['fx:payments']?.[0];
+        const type = payment?.cc_type ?? '';
+        const year = payment?.cc_exp_year?.substring(2);
+        const month = payment?.cc_exp_month;
+        const last4Digits = payment?.cc_number_masked?.replace(/x/gi, '');
+        const options = {
+          last4Digits,
+          context: type && year && month && last4Digits ? 'valid' : 'invalid',
+          month,
+          type,
+          year,
+        };
+
+        return html`<foxy-i18n infer="" key="title" .options=${options}></foxy-i18n>`;
+      },
+
+      subtitle: data => {
+        const payment = data._embedded?.['fx:payments']?.[0];
+        const options = {
+          id: getResourceId(data._links.self.href),
+          date: payment?.date_created ?? data.transaction_date,
+        };
+
+        return html`<foxy-i18n infer="" key="subtitle" .options=${options}></foxy-i18n>`;
+      },
+    });
+  }
+}
diff --git a/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/index.ts b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/index.ts
new file mode 100644
index 000000000..8a00322f2
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/index.ts
@@ -0,0 +1,11 @@
+import '../../../../internal/InternalCard/index';
+import '../../../I18n/index';
+
+import { InternalCartFormPaymentMethodCard } from './InternalCartFormPaymentMethodCard';
+
+customElements.define(
+  'foxy-internal-cart-form-payment-method-card',
+  InternalCartFormPaymentMethodCard
+);
+
+export { InternalCartFormPaymentMethodCard };
diff --git a/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/types.ts b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/types.ts
new file mode 100644
index 000000000..7d001f5e3
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodCard/types.ts
@@ -0,0 +1,4 @@
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+
+export type Data = Resource<Rels.Transaction, { zoom: 'payments' }>;
diff --git a/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/InternalCartFormPaymentMethodForm.test.ts b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/InternalCartFormPaymentMethodForm.test.ts
new file mode 100644
index 000000000..60b430edc
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/InternalCartFormPaymentMethodForm.test.ts
@@ -0,0 +1,137 @@
+import './index';
+
+import { InternalCartFormPaymentMethodForm as Form } from './InternalCartFormPaymentMethodForm';
+import { expect, fixture, html } from '@open-wc/testing';
+import { UpdateEvent } from '../../../NucleonElement/UpdateEvent';
+import { stub } from 'sinon';
+
+describe('CartForm', () => {
+  describe('InternalCartFormPaymentMethodForm', () => {
+    it('imports and defines foxy-internal-async-list-control', async () => {
+      expect(customElements.get('foxy-internal-async-list-control')).to.exist;
+    });
+
+    it('imports and defines foxy-internal-form', async () => {
+      expect(customElements.get('foxy-internal-form')).to.exist;
+    });
+
+    it('imports and defines foxy-update-payment-method-form', async () => {
+      expect(customElements.get('foxy-update-payment-method-form')).to.exist;
+    });
+
+    it('imports and defines foxy-i18n', async () => {
+      expect(customElements.get('foxy-i18n')).to.exist;
+    });
+
+    it('defines itself as foxy-internal-cart-form-payment-method-form', async () => {
+      expect(customElements.get('foxy-internal-cart-form-payment-method-form')).to.equal(Form);
+    });
+
+    it('extends foxy-internal-form', async () => {
+      expect(new Form()).to.be.an.instanceOf(customElements.get('foxy-internal-form'));
+    });
+
+    it('has a reactive property for defaultPaymentMethod', async () => {
+      expect(new Form()).to.have.property('defaultPaymentMethod', null);
+      expect(Form).to.have.deep.nested.property('properties.defaultPaymentMethod', {
+        attribute: 'default-payment-method',
+      });
+    });
+
+    it('has a reactive property for paymentCardEmbedUrl', async () => {
+      expect(new Form()).to.have.property('paymentCardEmbedUrl', null);
+      expect(Form).to.have.deep.nested.property('properties.paymentCardEmbedUrl', {
+        attribute: 'payment-card-embed-url',
+      });
+    });
+
+    it('has a reactive property for selectionProps', async () => {
+      expect(new Form()).to.have.deep.property('selectionProps', {});
+      expect(Form).to.have.deep.nested.property('properties.selectionProps', { attribute: false });
+    });
+
+    it('renders update payment method form for default payment method', async () => {
+      const element = await fixture<Form>(html`
+        <foxy-internal-cart-form-payment-method-form
+          default-payment-method="https://demo.api/hapi/payment_methods/0"
+          payment-card-embed-url="https://embed.foxy.io/v1.html?template_set_id=0"
+        >
+        </foxy-internal-cart-form-payment-method-form>
+      `);
+
+      const form = element.renderRoot.querySelector('foxy-update-payment-method-form')!;
+
+      expect(form).to.exist;
+      expect(form).to.have.attribute('href', 'https://demo.api/hapi/payment_methods/0');
+      expect(form).to.have.attribute('infer', 'default-payment-method');
+      expect(form).to.have.attribute(
+        'embed-url',
+        'https://embed.foxy.io/v1.html?template_set_id=0'
+      );
+
+      stub(element, 'submit');
+      stub(element, 'edit');
+
+      form.dispatchEvent(
+        new UpdateEvent('update', { detail: { result: UpdateEvent.UpdateResult.ResourceUpdated } })
+      );
+
+      expect(element.edit).to.have.been.calledOnceWith({ selection: '' });
+      expect(element.submit).to.have.been.calledOnce;
+    });
+
+    it('renders a translatable separator', async () => {
+      const element = await fixture<Form>(html`
+        <foxy-internal-cart-form-payment-method-form></foxy-internal-cart-form-payment-method-form>
+      `);
+
+      const separator = element.renderRoot.querySelector('foxy-i18n[key="or"]')!;
+      expect(separator).to.exist;
+      expect(separator).to.have.attribute('infer', '');
+    });
+
+    it('renders a translatable header for selector', async () => {
+      const element = await fixture<Form>(html`
+        <foxy-internal-cart-form-payment-method-form></foxy-internal-cart-form-payment-method-form>
+      `);
+
+      const header = element.renderRoot.querySelector('foxy-i18n[key="select_previous"]')!;
+      expect(header).to.exist;
+      expect(header).to.have.attribute('infer', '');
+    });
+
+    it('renders an async list control for selection', async () => {
+      const element = await fixture<Form>(html`
+        <foxy-internal-cart-form-payment-method-form
+          .selectionProps=${{ foo: 'bar' }}
+        ></foxy-internal-cart-form-payment-method-form>
+      `);
+
+      const list = element.renderRoot.querySelector('foxy-internal-async-list-control')!;
+
+      expect(list).to.exist;
+      expect(list).to.have.attribute('infer', 'selection');
+      expect(list).to.have.attribute('limit', '5');
+      expect(list).to.have.attribute('form', 'foxy-null');
+      expect(list).to.have.attribute('hide-delete-button');
+      expect(list).to.have.attribute('hide-create-button');
+      expect(list).to.have.attribute('foo', 'bar');
+
+      stub(element, 'submit');
+      stub(element, 'edit');
+
+      const event = new CustomEvent('itemclick', {
+        cancelable: true,
+        detail: 'https://demo.api/hapi/payment_methods/0',
+      });
+
+      list.dispatchEvent(event);
+
+      expect(event.defaultPrevented).to.be.true;
+      expect(element.submit).to.have.been.calledOnce;
+      expect(element.edit).to.have.been.calledOnceWith({
+        selection: 'https://demo.api/hapi/payment_methods/0',
+      });
+    });
+  });
+});
diff --git a/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/InternalCartFormPaymentMethodForm.ts b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/InternalCartFormPaymentMethodForm.ts
new file mode 100644
index 000000000..219f1a86c
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/InternalCartFormPaymentMethodForm.ts
@@ -0,0 +1,70 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { Data } from './types';
+
+import { InternalForm } from '../../../../internal/InternalForm/InternalForm';
+import { UpdateEvent } from '../../../NucleonElement/UpdateEvent';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { spread } from '@open-wc/lit-helpers';
+import { html } from 'lit-html';
+
+export class InternalCartFormPaymentMethodForm extends InternalForm<Data> {
+  static get properties(): PropertyDeclarations {
+    return {
+      ...super.properties,
+      defaultPaymentMethod: { attribute: 'default-payment-method' },
+      paymentCardEmbedUrl: { attribute: 'payment-card-embed-url' },
+      selectionProps: { attribute: false },
+    };
+  }
+
+  /** URL of the `fx:default_payment_method` resource. */
+  defaultPaymentMethod: string | null = null;
+
+  /** Complete configuration URL for the Payment Card Embed. */
+  paymentCardEmbedUrl: string | null = null;
+
+  /** Props/event listeners to add to the selection list. */
+  selectionProps: Record<PropertyKey, unknown> = {};
+
+  renderBody(): TemplateResult {
+    return html`
+      <foxy-update-payment-method-form
+        embed-url=${ifDefined(this.paymentCardEmbedUrl ?? void 0)}
+        infer="default-payment-method"
+        href=${ifDefined(this.defaultPaymentMethod ?? void 0)}
+        @update=${(evt: UpdateEvent) => {
+          if (evt.detail?.result === UpdateEvent.UpdateResult.ResourceUpdated) {
+            this.edit({ selection: '' });
+            this.submit();
+          }
+        }}
+      >
+      </foxy-update-payment-method-form>
+
+      <div class="flex items-center gap-m">
+        <div class="border-t border-contrast-10 flex-1"></div>
+        <foxy-i18n class="text-tertiary" infer="" key="or"></foxy-i18n>
+        <div class="border-t border-contrast-10 flex-1"></div>
+      </div>
+
+      <h2 class="text-xl font-medium">
+        <foxy-i18n infer="" key="select_previous"></foxy-i18n>
+      </h2>
+
+      <foxy-internal-async-list-control
+        infer="selection"
+        limit="5"
+        form="foxy-null"
+        hide-delete-button
+        hide-create-button
+        @itemclick=${(evt: CustomEvent<string>) => {
+          evt.preventDefault();
+          this.edit({ selection: evt.detail });
+          this.submit();
+        }}
+        ...=${spread(this.selectionProps)}
+      >
+      </foxy-internal-async-list-control>
+    `;
+  }
+}
diff --git a/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/index.ts b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/index.ts
new file mode 100644
index 000000000..bd81949fb
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/index.ts
@@ -0,0 +1,14 @@
+import '../../../../internal/InternalAsyncListControl/index';
+import '../../../../internal/InternalForm/index';
+
+import '../../../UpdatePaymentMethodForm/index';
+import '../../../I18n/index';
+
+import { InternalCartFormPaymentMethodForm } from './InternalCartFormPaymentMethodForm';
+
+customElements.define(
+  'foxy-internal-cart-form-payment-method-form',
+  InternalCartFormPaymentMethodForm
+);
+
+export { InternalCartFormPaymentMethodForm };
diff --git a/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/types.ts b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/types.ts
new file mode 100644
index 000000000..b05e8814e
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormPaymentMethodForm/types.ts
@@ -0,0 +1,3 @@
+import type { HALJSONResource } from '../../../NucleonElement/types';
+
+export type Data = HALJSONResource & { selection: string; query: string };
diff --git a/src/elements/public/CartForm/internal/InternalCartFormTotalsControl/InternalCartFormTotalsControl.test.ts b/src/elements/public/CartForm/internal/InternalCartFormTotalsControl/InternalCartFormTotalsControl.test.ts
new file mode 100644
index 000000000..56cd29dca
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormTotalsControl/InternalCartFormTotalsControl.test.ts
@@ -0,0 +1,291 @@
+import '../../../NucleonElement/index';
+
+import { expect, fixture, waitUntil } from '@open-wc/testing';
+import { InternalCartFormTotalsControl } from './index';
+import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
+import { CartForm } from '../../CartForm';
+import { html } from 'lit-html';
+import { createRouter as createBaseRouter } from '../../../../../server/router/createRouter';
+import { createRouter } from '../../../../../server/hapi';
+import { defaults } from '../../../../../server/hapi/defaults';
+import { links } from '../../../../../server/hapi/links';
+import { FetchEvent } from '../../../NucleonElement/FetchEvent';
+import { createDataset } from '../../../../../server/hapi/createDataset';
+
+describe('CartForm', () => {
+  describe('InternalCartFormTotalsControl', () => {
+    it('imports and defines foxy-internal-control', () => {
+      expect(customElements.get('foxy-internal-control')).to.exist;
+    });
+
+    it('imports and defines foxy-i18n', () => {
+      expect(customElements.get('foxy-i18n')).to.exist;
+    });
+
+    it('imports and defines itself as foxy-internal-cart-form-totals-control', () => {
+      expect(customElements.get('foxy-internal-cart-form-totals-control')).to.equal(
+        InternalCartFormTotalsControl
+      );
+    });
+
+    it('extends InternalControl', () => {
+      expect(new InternalCartFormTotalsControl()).to.be.instanceOf(InternalControl);
+    });
+
+    it('renders total order price', async () => {
+      const router = createRouter();
+      const wrapper = await fixture<CartForm>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-cart-form-totals-control infer="summary">
+          </foxy-internal-cart-form-totals-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+
+      const control = wrapper.firstElementChild as InternalCartFormTotalsControl;
+      await control.requestUpdate();
+      const value = control.renderRoot.querySelector('foxy-i18n[key="price"]');
+
+      // @ts-expect-error using private property for testing purposes
+      await waitUntil(() => !!control.__store);
+
+      expect(value).to.exist;
+      expect(value).to.have.deep.property('options', {
+        currencyDisplay: 'code',
+        signDisplay: 'auto',
+        amount: '10 USD',
+      });
+
+      expect(value).to.have.property('infer', '');
+    });
+
+    it('renders total item price', async () => {
+      const router = createRouter();
+      const wrapper = await fixture<CartForm>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-cart-form-totals-control infer="summary">
+          </foxy-internal-cart-form-totals-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+
+      const control = wrapper.firstElementChild as InternalCartFormTotalsControl;
+      await control.requestUpdate();
+      const label = control.renderRoot.querySelector('foxy-i18n[key="total"]')!;
+      const value = label.nextElementSibling!;
+
+      // @ts-expect-error using private property for testing purposes
+      await waitUntil(() => !!control.__store);
+
+      expect(label).to.exist;
+      expect(label).to.have.property('infer', '');
+
+      expect(value).to.exist;
+      expect(value).to.have.property('infer', '');
+      expect(value).to.have.deep.property('options', {
+        currencyDisplay: 'code',
+        signDisplay: 'auto',
+        amount: '11.9 USD',
+      });
+    });
+
+    it('renders total shipping price', async () => {
+      const router = createRouter();
+      const wrapper = await fixture<CartForm>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-cart-form-totals-control infer="summary">
+          </foxy-internal-cart-form-totals-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+
+      const control = wrapper.firstElementChild as InternalCartFormTotalsControl;
+      await control.requestUpdate();
+      const label = control.renderRoot.querySelector('foxy-i18n[key="total_shipping"]')!;
+      const value = label.parentElement!.nextElementSibling!.firstElementChild;
+
+      // @ts-expect-error using private property for testing purposes
+      await waitUntil(() => !!control.__store);
+
+      expect(label).to.exist;
+      expect(label).to.have.property('infer', '');
+
+      expect(value).to.exist;
+      expect(value).to.have.property('infer', '');
+      expect(value).to.have.deep.property('options', {
+        currencyDisplay: 'code',
+        signDisplay: 'exceptZero',
+        amount: '0 USD',
+      });
+    });
+
+    it('renders total tax', async () => {
+      const router = createRouter();
+      const wrapper = await fixture<CartForm>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-cart-form-totals-control infer="summary">
+          </foxy-internal-cart-form-totals-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+
+      const control = wrapper.firstElementChild as InternalCartFormTotalsControl;
+      await control.requestUpdate();
+      const label = control.renderRoot.querySelector('foxy-i18n[key="total_tax"]')!;
+      const value = label.parentElement!.nextElementSibling!.firstElementChild;
+
+      // @ts-expect-error using private property for testing purposes
+      await waitUntil(() => !!control.__store);
+
+      expect(label).to.exist;
+      expect(label).to.have.property('infer', '');
+
+      expect(value).to.exist;
+      expect(value).to.have.property('infer', '');
+      expect(value).to.have.deep.property('options', {
+        currencyDisplay: 'code',
+        signDisplay: 'exceptZero',
+        amount: '1.9 USD',
+      });
+    });
+
+    it('renders discounts if embeds include discounts', async () => {
+      const router = createBaseRouter({
+        defaults,
+        dataset: {
+          ...createDataset(),
+          transactions: [
+            {
+              id: 0,
+              store_id: 0,
+              customer_id: 0,
+              subscription_id: 0,
+              is_test: true,
+              is_editable: true,
+              hide_transaction: false,
+              data_is_fed: true,
+              transaction_date: '2013-06-06T17:26:07-05:00',
+              locale_code: 'en_US',
+              customer_first_name: 'Test',
+              customer_last_name: 'User',
+              customer_tax_id: '',
+              customer_email: 'testing@example.com',
+              customer_ip: '10.1.248.210',
+              ip_country: '',
+              total_item_price: 10,
+              total_tax: 1.9,
+              total_shipping: 0,
+              total_future_shipping: 0,
+              total_order: 11.9,
+              date_created: '2013-06-06T15:26:07-0700',
+              date_modified: '2013-06-06T15:26:07-0700',
+              currency_code: 'USD',
+              currency_symbol: '$',
+              status: 'completed',
+            },
+          ],
+          discounts: [
+            {
+              id: 0,
+              cart_id: 0,
+              store_id: 0,
+              coupon_id: 0,
+              customer_id: 0,
+              coupon_code_id: 0,
+              transaction_id: 0,
+              code: 'Test1',
+              amount: -1,
+              name: 'Test1',
+              display: '-1.00',
+              is_taxable: false,
+              is_future_discount: false,
+              date_created: null,
+              date_modified: null,
+            },
+            {
+              id: 1,
+              cart_id: 0,
+              store_id: 0,
+              coupon_id: 0,
+              customer_id: 0,
+              coupon_code_id: 0,
+              transaction_id: 0,
+              code: 'Test2',
+              amount: -2,
+              name: 'Test2',
+              display: '-2.00',
+              is_taxable: false,
+              is_future_discount: false,
+              date_created: null,
+              date_modified: null,
+            },
+          ],
+        },
+        links,
+      });
+
+      const wrapper = await fixture<CartForm>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0?zoom=applied_taxes,discounts,shipments,applied_gift_card_codes:gift_card"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-cart-form-totals-control infer="summary">
+          </foxy-internal-cart-form-totals-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+
+      const control = wrapper.firstElementChild as InternalCartFormTotalsControl;
+      await control.requestUpdate();
+      const label1 = control.renderRoot.querySelectorAll('[data-testclass="discount"]')[0];
+      const value1 = label1.nextElementSibling!.firstElementChild;
+
+      // @ts-expect-error using private property for testing purposes
+      await waitUntil(() => !!control.__store);
+
+      expect(label1).to.exist;
+      expect(label1).to.include.text('Test1');
+
+      expect(value1).to.exist;
+      expect(value1).to.have.property('key', 'price');
+      expect(value1).to.have.property('infer', '');
+      expect(value1).to.have.deep.property('options', {
+        amount: '-1 USD',
+        currencyDisplay: 'code',
+        signDisplay: 'exceptZero',
+      });
+
+      const label2 = control.renderRoot.querySelectorAll('[data-testclass="discount"]')[1];
+      const value2 = label2.nextElementSibling!.firstElementChild;
+
+      expect(label2).to.exist;
+      expect(label2).to.include.text('Test2');
+
+      expect(value2).to.exist;
+      expect(value2).to.have.property('key', 'price');
+      expect(value2).to.have.property('infer', '');
+      expect(value2).to.have.deep.property('options', {
+        amount: '-2 USD',
+        currencyDisplay: 'code',
+        signDisplay: 'exceptZero',
+      });
+    });
+  });
+});
diff --git a/src/elements/public/CartForm/internal/InternalCartFormTotalsControl/InternalCartFormTotalsControl.ts b/src/elements/public/CartForm/internal/InternalCartFormTotalsControl/InternalCartFormTotalsControl.ts
new file mode 100644
index 000000000..39269f787
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormTotalsControl/InternalCartFormTotalsControl.ts
@@ -0,0 +1,96 @@
+import type { NucleonElement } from '../../../NucleonElement/NucleonElement';
+import type { TemplateResult } from 'lit-html';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Data } from '../../types';
+import type { Rels } from '@foxy.io/sdk/backend';
+
+import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+
+export class InternalCartFormTotalsControl extends InternalControl {
+  private readonly __storeLoaderId = 'storeLoader';
+
+  renderControl(): TemplateResult {
+    const data = this.nucleon?.data as Data | undefined;
+    if (!data) return html``;
+
+    return html`
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(this.__storeHref)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <p
+        class="grid gap-x-s text-right text-s leading-m border-dashed border rounded border-contrast-20 whitespace-nowrap overflow-auto"
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 2px); grid-template-columns: 1fr min-content"
+      >
+        <span><foxy-i18n key="subtotal" infer=""></foxy-i18n>&colon;</span>
+        <span>${this.__renderPrice(data.total_item_price as unknown as number)}</span>
+
+        <span><foxy-i18n infer="" key="total_shipping"></foxy-i18n>&colon;</span>
+        <span>${this.__renderPrice(data.total_shipping as unknown as number, true)} </span>
+
+        <span><foxy-i18n infer="" key="total_tax"></foxy-i18n>&colon;</span>
+        <span>${this.__renderPrice(data.total_tax as unknown as number, true)}</span>
+        ${
+          // @ts-expect-error SDK doesn't support name mismatch between `fx:applied_gift_card_codes` and `fx:gift_card_logs`
+          data?._embedded?.['fx:applied_gift_card_codes']?.map(code => {
+            return html`
+              <span>${code._embedded['fx:gift_card'].name}&colon;</span>
+              <span>${this.__renderPrice(code.balance_adjustment ?? 0, true)}</span>
+            `;
+          })
+        }
+        ${data?._embedded?.['fx:discounts']?.map(discount => {
+          return html`
+            <span data-testclass="discount">${discount.name}&colon;</span>
+            <span>${this.__renderPrice(discount.amount, true)}</span>
+          `;
+        })}
+
+        <span class="col-span-2 border-t border-dashed border-contrast-20 my-s"></span>
+
+        <span class="col-span-2 flex gap-s justify-between items-center">
+          <span></span>
+          <span class="text-xl font-medium leading-xs">
+            <foxy-i18n infer="" key="total"></foxy-i18n>&colon;
+            ${this.__renderPrice(data.total_order)}
+          </span>
+        </span>
+      </p>
+    `;
+  }
+
+  private get __storeHref() {
+    return this.nucleon?.data?._links['fx:store']?.href as string | undefined;
+  }
+
+  private get __store() {
+    type Loader = NucleonElement<Resource<Rels.Store>>;
+    const selector = `#${this.__storeLoaderId}`;
+    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;
+  }
+
+  private __renderPrice(amount: number, isAdditive = false) {
+    const currencyDisplay = this.__store?.use_international_currency_symbol ? 'code' : 'symbol';
+    const currencyCode = this.nucleon?.data?.currency_code as string | undefined;
+
+    return html`
+      <foxy-i18n
+        class=${isAdditive && amount !== 0 ? (amount > 0 ? 'text-success' : 'text-error') : ''}
+        infer=""
+        key="price"
+        .options=${{
+          currencyDisplay,
+          signDisplay: isAdditive ? 'exceptZero' : 'auto',
+          amount: `${amount} ${currencyCode}`,
+        }}
+      >
+      </foxy-i18n>
+    `;
+  }
+}
diff --git a/src/elements/public/CartForm/internal/InternalCartFormTotalsControl/index.ts b/src/elements/public/CartForm/internal/InternalCartFormTotalsControl/index.ts
new file mode 100644
index 000000000..bbee1c779
--- /dev/null
+++ b/src/elements/public/CartForm/internal/InternalCartFormTotalsControl/index.ts
@@ -0,0 +1,9 @@
+import '../../../../internal/InternalControl/index';
+import '../../../NucleonElement/index';
+import '../../../I18n/index';
+
+import { InternalCartFormTotalsControl as Control } from './InternalCartFormTotalsControl';
+
+customElements.define('foxy-internal-cart-form-totals-control', Control);
+
+export { Control as InternalCartFormTotalsControl };
diff --git a/src/elements/public/CartForm/internal/InternalCartFormViewAsCustomerControl/index.ts b/src/elements/public/CartForm/internal/InternalCartFormViewAsCustomerControl/index.ts
deleted file mode 100644
index 04f11f35e..000000000
--- a/src/elements/public/CartForm/internal/InternalCartFormViewAsCustomerControl/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import '../../../../internal/InternalControl/index';
-
-import '../../../I18n/index';
-
-import { InternalCartFormViewAsCustomerControl as Control } from './InternalCartFormViewAsCustomerControl';
-
-customElements.define('foxy-internal-cart-form-view-as-customer-control', Control);
-
-export { Control as InternalCartFormViewAsCustomerControl };
diff --git a/src/elements/public/CartForm/types.ts b/src/elements/public/CartForm/types.ts
index 75a8dd93f..de76a7fd4 100644
--- a/src/elements/public/CartForm/types.ts
+++ b/src/elements/public/CartForm/types.ts
@@ -1,4 +1,13 @@
 import type { Resource } from '@foxy.io/sdk/core';
 import type { Rels } from '@foxy.io/sdk/backend';
 
-export type Data = Resource<Rels.Cart>;
+// TODO remove this once SDK is fixed
+type OriginalData = Resource<Rels.Cart, { zoom: ['discounts'] }>;
+type FixedData = Omit<OriginalData, 'billing_region' | 'shipping_region'> & {
+  /** Corresponds to the `region` field in `fx:customer_address`. API quirk. */
+  billing_state: string;
+  /** Corresponds to the `region` field in `fx:customer_address`. API quirk. */
+  shipping_state: string;
+};
+
+export type Data = FixedData;
diff --git a/src/elements/public/ClientForm/ClientForm.test.ts b/src/elements/public/ClientForm/ClientForm.test.ts
index 54bf500cf..c004bf2f1 100644
--- a/src/elements/public/ClientForm/ClientForm.test.ts
+++ b/src/elements/public/ClientForm/ClientForm.test.ts
@@ -7,6 +7,7 @@ import { createRouter } from '../../../server/index';
 import { getTestData } from '../../../testgen/getTestData';
 import { ClientForm as Form } from './ClientForm';
 import { stub } from 'sinon';
+import { Data } from './types';
 
 describe('ClientForm', () => {
   it('imports and defines foxy-internal-text-area-control', () => {
@@ -135,4 +136,17 @@ describe('ClientForm', () => {
     const element = await fixture<Form>(html`<foxy-client-form></foxy-client-form>`);
     expect(element.hiddenSelector.matches('client-secret', true)).to.be.true;
   });
+
+  it('uses custom options for header subtitle', async () => {
+    const element = await fixture<Form>(html`<foxy-client-form></foxy-client-form>`);
+    const data = await getTestData<Data>('./hapi/clients/0');
+
+    data.redirect_uri = 'https://demo.api/redirect';
+    element.data = data;
+
+    expect(element.headerSubtitleOptions).to.deep.equal({
+      context: 'with_domain',
+      domain: 'demo.api',
+    });
+  });
 });
diff --git a/src/elements/public/ClientForm/ClientForm.ts b/src/elements/public/ClientForm/ClientForm.ts
index 7eb59c07f..02e525108 100644
--- a/src/elements/public/ClientForm/ClientForm.ts
+++ b/src/elements/public/ClientForm/ClientForm.ts
@@ -17,6 +17,15 @@ const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
  * @since 1.24.0
  */
 export class ClientForm extends Base<Data> {
+  get headerSubtitleOptions(): Record<string, unknown> {
+    try {
+      const url = new URL(this.data?.redirect_uri ?? '');
+      return { context: 'with_domain', domain: url.hostname };
+    } catch {
+      return super.headerSubtitleOptions;
+    }
+  }
+
   get readonlySelector(): BooleanSelector {
     const alwaysMatch = ['client-secret'];
     if (this.data || this.in({ busy: 'fetching' })) alwaysMatch.push('client-id');
diff --git a/src/elements/public/CustomFieldCard/TwoLineCard.ts b/src/elements/public/CustomFieldCard/TwoLineCard.ts
index b64add892..44203128e 100644
--- a/src/elements/public/CustomFieldCard/TwoLineCard.ts
+++ b/src/elements/public/CustomFieldCard/TwoLineCard.ts
@@ -49,7 +49,7 @@ export class TwoLineCard<TData extends HALJSONResource> extends Base<TData> {
 
     return html`
       <div
-        class="h-s flex flex-col justify-center relative text-body text-m font-lumo leading-xs sm-h-xs sm-flex-row sm-items-center sm-justify-between"
+        class="relative text-body text-m font-lumo leading-xs sm-h-auto sm-flex sm-items-center sm-justify-between"
       >
         ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle(options?.title)}
         ${hiddenSelector.matches('subtitle', true) ? '' : this.__renderSubtitle(options?.subtitle)}
diff --git a/src/elements/public/CustomerPortal/InternalCustomerPortalSubscriptions.test.ts b/src/elements/public/CustomerPortal/InternalCustomerPortalSubscriptions.test.ts
index 8110cdf81..7c02c119b 100644
--- a/src/elements/public/CustomerPortal/InternalCustomerPortalSubscriptions.test.ts
+++ b/src/elements/public/CustomerPortal/InternalCustomerPortalSubscriptions.test.ts
@@ -239,7 +239,7 @@ describe('InternalCustomerPortalSubscriptions', () => {
 
         const form = (await getByTag(dialog, 'foxy-subscription-form')) as SubscriptionForm;
         const alwaysHidden =
-          'attributes timestamps start-date past-due-amount customer header end-date';
+          'attributes timestamps start-date past-due-amount customer submit undo header end-date';
 
         expect(form).to.have.attribute('disabledcontrols', 'end-date');
         expect(form).to.have.attribute('readonlycontrols', 'frequency');
diff --git a/src/elements/public/DownloadableCard/DownloadableCard.test.ts b/src/elements/public/DownloadableCard/DownloadableCard.test.ts
index 61564b0c8..01d8a74e0 100644
--- a/src/elements/public/DownloadableCard/DownloadableCard.test.ts
+++ b/src/elements/public/DownloadableCard/DownloadableCard.test.ts
@@ -5,6 +5,12 @@ import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
 import { Data } from './types';
 
 describe('DownloadableCard', () => {
+  const OriginalResizeObserver = window.ResizeObserver;
+
+  // @ts-expect-error disabling ResizeObserver because it errors in test env
+  before(() => (window.ResizeObserver = undefined));
+  after(() => (window.ResizeObserver = OriginalResizeObserver));
+
   it('imports and defines foxy-internal-sandbox element', () => {
     expect(customElements.get('foxy-internal-sandbox')).to.exist;
   });
diff --git a/src/elements/public/FormDialog/FormDialog.test.ts b/src/elements/public/FormDialog/FormDialog.test.ts
index b553cd798..d5e4b2700 100644
--- a/src/elements/public/FormDialog/FormDialog.test.ts
+++ b/src/elements/public/FormDialog/FormDialog.test.ts
@@ -209,26 +209,30 @@ describe('FormDialog', () => {
     expect(dialog).to.have.property('closable', false);
   });
 
-  [
-    { idle: { template: { clean: 'valid' } } },
-    { idle: { template: { dirty: 'valid' } } },
-    { idle: { snapshot: { dirty: 'valid' } } },
-  ].forEach(stateValue => {
-    it(`becomes editable when form is in ${JSON.stringify(stateValue)} state`, async () => {
-      const href = 'https://demo.api/hapi/attributes/0';
-      const form = 'foxy-attribute-form';
-      const dialog = await fixture<FormDialog>(html`
-        <foxy-form-dialog href=${href} form=${form}></foxy-form-dialog>
-      `);
-
-      await dialog.show();
-
-      const formElement = dialog.renderRoot.querySelector('#form') as NucleonElement<never>;
-      stub(formElement, 'in').callsFake(v => isEqual(v, stateValue));
-      formElement.dispatchEvent(new UpdateEvent());
-
-      await dialog.requestUpdate();
-      expect(dialog).to.have.property('editable', true);
-    });
+  [{ idle: { template: { dirty: 'valid' } } }, { idle: { snapshot: { dirty: 'valid' } } }].forEach(
+    stateValue => {
+      it(`becomes editable when form is in ${JSON.stringify(stateValue)} state`, async () => {
+        const href = 'https://demo.api/hapi/attributes/0';
+        const form = 'foxy-attribute-form';
+        const dialog = await fixture<FormDialog>(html`
+          <foxy-form-dialog href=${href} form=${form}></foxy-form-dialog>
+        `);
+
+        await dialog.show();
+
+        const formElement = dialog.renderRoot.querySelector('#form') as NucleonElement<never>;
+        stub(formElement, 'in').callsFake(v => isEqual(v, stateValue));
+        formElement.dispatchEvent(new UpdateEvent());
+
+        await dialog.requestUpdate();
+        expect(dialog).to.have.property('editable', true);
+      });
+    }
+  );
+
+  it('hides built-in Undo and Submit buttons in forms because it provides its own', () => {
+    const dialog = new FormDialog();
+    expect(dialog.hiddenSelector.matches('undo', true)).to.be.true;
+    expect(dialog.hiddenSelector.matches('submit', true)).to.be.true;
   });
 });
diff --git a/src/elements/public/FormDialog/FormDialog.ts b/src/elements/public/FormDialog/FormDialog.ts
index 0fb99648d..e1665c2be 100644
--- a/src/elements/public/FormDialog/FormDialog.ts
+++ b/src/elements/public/FormDialog/FormDialog.ts
@@ -9,6 +9,7 @@ import { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/Inte
 import { NucleonElement } from '../NucleonElement/NucleonElement';
 import { UpdateEvent } from '../NucleonElement/UpdateEvent';
 import { spread } from '@open-wc/lit-helpers';
+import { BooleanSelector } from '@foxy.io/sdk/core';
 
 /**
  * Dialog wrapper for the forms made with NucleonElement.
@@ -91,11 +92,14 @@ export class FormDialog extends Dialog {
 
     this.closable = !target.in('busy');
     this.editable =
-      target.in({ idle: { template: { clean: 'valid' } } }) ||
       target.in({ idle: { template: { dirty: 'valid' } } }) ||
       target.in({ idle: { snapshot: { dirty: 'valid' } } });
   };
 
+  get hiddenSelector(): BooleanSelector {
+    return new BooleanSelector(`submit undo ${super.hiddenSelector}`.trim());
+  }
+
   /**
    * Form's custom element tag. Generated custom element will have the following attributes:
    *
@@ -121,9 +125,9 @@ export class FormDialog extends Dialog {
             lang=\${options.dialog.lang}
             group=\${options.dialog.group}
             parent=\${options.dialog.parent}
-            disabledcontrols=\${options.dialog.disabledControls.toString()}
-            readonlycontrols=\${options.dialog.readonlyControls.toString()}
-            hiddencontrols=\${options.dialog.hiddenControls.toString()}
+            disabledcontrols=\${options.dialog.disabledSelector.toString()}
+            readonlycontrols=\${options.dialog.readonlySelector.toString()}
+            hiddencontrols=\${options.dialog.hiddenSelector.toString()}
             ?disabled=\${options.dialog.disabled}
             ?readonly=\${options.dialog.readonly}
             ?hidden=\${options.dialog.hidden}
@@ -171,7 +175,7 @@ export class FormDialog extends Dialog {
   }
 
   async hide(cancelled = false): Promise<void> {
-    if (cancelled) {
+    if (cancelled && this.editable) {
       const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;
       confirm.show();
     } else {
diff --git a/src/elements/public/ItemCategoryForm/ItemCategoryForm.stories.ts b/src/elements/public/ItemCategoryForm/ItemCategoryForm.stories.ts
index 2729ce468..2223ace21 100644
--- a/src/elements/public/ItemCategoryForm/ItemCategoryForm.stories.ts
+++ b/src/elements/public/ItemCategoryForm/ItemCategoryForm.stories.ts
@@ -11,30 +11,28 @@ const summary: Summary = {
   localName: 'foxy-item-category-form',
   translatable: true,
   configurable: {
-    sections: ['timestamps', 'header'],
+    sections: ['header', 'general', 'delivery', 'handling-and-discount', 'emails', 'timestamps'],
     buttons: ['delete', 'create', 'submit', 'undo', 'header:copy-id', 'header:copy-json'],
     inputs: [
-      'name',
-      'code',
-      'handling-fee-type',
-      'handling-fee',
-      'handling-fee-percentage',
-      'handling-fee-minimum',
-      'item-delivery-type',
-      'max-downloads-per-customer',
-      'max-downloads-time-period',
-      'shipping-flat-rate',
-      'shipping-flat-rate-type',
-      'default-weight',
-      'default-weight-unit',
-      'default-length-unit',
-      'customs-value',
-      'discount-name',
-      'discount-builder',
-      'admin-email-template-uri',
-      'customer-email-template-uri',
-      'gift-recipient-email-template-uri',
+      'general:name',
+      'general:code',
       'taxes',
+      'handling-and-discount:handling-fee-type',
+      'handling-and-discount:handling-fee',
+      'handling-and-discount:handling-fee-percentage',
+      'handling-and-discount:handling-fee-minimum',
+      'handling-and-discount:discount-name',
+      'handling-and-discount:discount-builder',
+      'delivery:item-delivery-type',
+      'delivery:max-downloads-per-customer',
+      'delivery:max-downloads-time-period',
+      'delivery:shipping-flat-rate',
+      'delivery:shipping-flat-rate-type',
+      'delivery:default-weight',
+      'delivery:default-weight-unit',
+      'delivery:default-length-unit',
+      'delivery:customs-value',
+      'emails:gift-recipient-email-template-uri',
     ],
   },
 };
diff --git a/src/elements/public/ItemCategoryForm/ItemCategoryForm.test.ts b/src/elements/public/ItemCategoryForm/ItemCategoryForm.test.ts
index 4a9286432..0356201eb 100644
--- a/src/elements/public/ItemCategoryForm/ItemCategoryForm.test.ts
+++ b/src/elements/public/ItemCategoryForm/ItemCategoryForm.test.ts
@@ -4,9 +4,9 @@ import './index';
 
 import { InternalAsyncResourceLinkListControl } from '../../internal/InternalAsyncResourceLinkListControl/InternalAsyncResourceLinkListControl';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { InternalAsyncComboBoxControl } from '../../internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl';
+import { InternalResourcePickerControl } from '../../internal/InternalResourcePickerControl/InternalResourcePickerControl';
 import { ItemCategoryForm as Form } from './ItemCategoryForm';
-import { InternalIntegerControl } from '../../internal/InternalIntegerControl/InternalIntegerControl';
+import { InternalSummaryControl } from '../../internal/InternalSummaryControl/InternalSummaryControl';
 import { InternalNumberControl } from '../../internal/InternalNumberControl/InternalNumberControl';
 import { InternalSelectControl } from '../../internal/InternalSelectControl/InternalSelectControl';
 import { InternalTextControl } from '../../internal/InternalTextControl/InternalTextControl';
@@ -28,14 +28,14 @@ describe('ItemCategoryForm', () => {
     expect(element).to.equal(InternalAsyncResourceLinkListControl);
   });
 
-  it('imports and defines foxy-internal-async-combo-box-control', () => {
-    const element = customElements.get('foxy-internal-async-combo-box-control');
-    expect(element).to.equal(InternalAsyncComboBoxControl);
+  it('imports and defines foxy-internal-resource-picker-control', () => {
+    const element = customElements.get('foxy-internal-resource-picker-control');
+    expect(element).to.exist;
   });
 
-  it('imports and defines foxy-internal-integer-control', () => {
-    const element = customElements.get('foxy-internal-integer-control');
-    expect(element).to.equal(InternalIntegerControl);
+  it('imports and defines foxy-internal-summary-control', () => {
+    const element = customElements.get('foxy-internal-summary-control');
+    expect(element).to.exist;
   });
 
   it('imports and defines foxy-internal-number-control', () => {
@@ -58,11 +58,26 @@ describe('ItemCategoryForm', () => {
     expect(element).to.equal(InternalForm);
   });
 
+  it('imports and defines foxy-email-template-card', () => {
+    const element = customElements.get('foxy-email-template-card');
+    expect(element).to.exist;
+  });
+
   it('imports and defines foxy-discount-builder', () => {
     const element = customElements.get('foxy-discount-builder');
     expect(element).to.equal(DiscountBuilder);
   });
 
+  it('imports and defines foxy-tax-card', () => {
+    const element = customElements.get('foxy-tax-card');
+    expect(element).to.exist;
+  });
+
+  it('imports and defines foxy-i18n', () => {
+    const element = customElements.get('foxy-i18n');
+    expect(element).to.exist;
+  });
+
   it('imports and defines foxy-nucleon', () => {
     const element = customElements.get('foxy-nucleon');
     expect(element).to.equal(NucleonElement);
@@ -344,20 +359,6 @@ describe('ItemCategoryForm', () => {
     expect(form.errors).to.include('handling-fee-percentage:v8n_negative');
   });
 
-  it('produces the admin-email:v8n_required error if "send_admin_email" is true admin email is not specified', () => {
-    const form = new Form();
-    expect(form.errors).to.not.include('admin-email:v8n_required');
-
-    form.edit({ send_admin_email: false });
-    expect(form.errors).to.not.include('admin-email:v8n_required');
-
-    form.edit({ send_admin_email: true });
-    expect(form.errors).to.include('admin-email:v8n_required');
-
-    form.edit({ admin_email: 'test@example.com' });
-    expect(form.errors).to.not.include('admin-email:v8n_required');
-  });
-
   it('renders a form header', () => {
     const form = new Form();
     const renderHeaderMethod = stub(form, 'renderHeader');
@@ -365,38 +366,65 @@ describe('ItemCategoryForm', () => {
     expect(renderHeaderMethod).to.have.been.called;
   });
 
-  it('renders a text control for category name', async () => {
+  it('renders a summary control for General section', async () => {
+    const router = createRouter();
+    const element = await fixture<Form>(html`
+      <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+      </foxy-item-category-form>
+    `);
+
+    const control = element.renderRoot.querySelector('[infer="general"]');
+    expect(control).to.be.instanceOf(InternalSummaryControl);
+  });
+
+  it('renders a text control for category name in the General section', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
       </foxy-item-category-form>
     `);
 
-    const control = element.renderRoot.querySelector('[infer="name"]');
+    const control = element.renderRoot.querySelector('[infer="general"] [infer="name"]');
     expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
   });
 
-  it('renders a text control for category code', async () => {
+  it('renders a text control for category code in the General section', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
       </foxy-item-category-form>
     `);
 
-    const control = element.renderRoot.querySelector('[infer="code"]');
+    const control = element.renderRoot.querySelector('[infer="general"] [infer="code"]');
     expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+  });
+
+  it('renders a summary control for Handling and Discount section', async () => {
+    const router = createRouter();
+    const element = await fixture<Form>(html`
+      <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+      </foxy-item-category-form>
+    `);
+
+    const control = element.renderRoot.querySelector('[infer="handling-and-discount"]');
+    expect(control).to.be.instanceOf(InternalSummaryControl);
   });
 
-  it('renders a select control for handling fee type', async () => {
+  it('renders a select control for handling fee type in the Handling and Discount section', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
       </foxy-item-category-form>
     `);
 
-    const control = element.renderRoot.querySelector('[infer="handling-fee-type"]');
+    const control = element.renderRoot.querySelector(
+      '[infer="handling-and-discount"] [infer="handling-fee-type"]'
+    );
 
     expect(control).to.be.instanceOf(InternalSelectControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('options', [
       { label: 'option_none', value: 'none' },
       { label: 'option_flat_per_order', value: 'flat_per_order' },
@@ -406,7 +434,7 @@ describe('ItemCategoryForm', () => {
     ]);
   });
 
-  it('renders a number control for handling fee if handling fee type is not "none"', async () => {
+  it('renders a number control for handling fee in the Handling and Discount section if handling fee type is not "none"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -415,16 +443,22 @@ describe('ItemCategoryForm', () => {
 
     element.edit({ handling_fee_type: 'none' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="handling-fee"]')).to.not.exist;
+    expect(
+      element.renderRoot.querySelector('[infer="handling-and-discount"] [infer="handling-fee"]')
+    ).to.not.exist;
 
     element.edit({ handling_fee_type: 'flat_per_item' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="handling-fee"]')).to.be.instanceOf(
-      InternalNumberControl
+    const control = element.renderRoot.querySelector(
+      '[infer="handling-and-discount"] [infer="handling-fee"]'
     );
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('min', '0');
   });
 
-  it('renders a number control for handling fee percentage if handling fee type is "flat_percent"', async () => {
+  it('renders a number control for handling fee percentage in the Handling and Discount section if handling fee type is "flat_percent"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -433,16 +467,25 @@ describe('ItemCategoryForm', () => {
 
     element.edit({ handling_fee_type: 'none' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="handling-fee-percentage"]')).to.not.exist;
+    expect(
+      element.renderRoot.querySelector(
+        '[infer="handling-and-discount"] [infer="handling-fee-percentage"]'
+      )
+    ).to.not.exist;
 
     element.edit({ handling_fee_type: 'flat_percent' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="handling-fee-percentage"]')).to.be.instanceOf(
-      InternalNumberControl
+    const control = element.renderRoot.querySelector(
+      '[infer="handling-and-discount"] [infer="handling-fee-percentage"]'
     );
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('suffix', '%');
+    expect(control).to.have.attribute('min', '0');
   });
 
-  it('renders a number control for handling fee percentage if handling fee type is "flat_percent_with_minimum"', async () => {
+  it('renders a number control for handling fee percentage in the Handling and Discount section if handling fee type is "flat_percent_with_minimum"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -451,16 +494,25 @@ describe('ItemCategoryForm', () => {
 
     element.edit({ handling_fee_type: 'none' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="handling-fee-percentage"]')).to.not.exist;
+    expect(
+      element.renderRoot.querySelector(
+        '[infer="handling-and-discount"] [infer="handling-fee-percentage"]'
+      )
+    ).to.not.exist;
 
     element.edit({ handling_fee_type: 'flat_percent_with_minimum' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="handling-fee-percentage"]')).to.be.instanceOf(
-      InternalNumberControl
+    const control = element.renderRoot.querySelector(
+      '[infer="handling-and-discount"] [infer="handling-fee-percentage"]'
     );
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('suffix', '%');
+    expect(control).to.have.attribute('min', '0');
   });
 
-  it('renders a number control for handling fee minimum if handling fee type is "flat_percent_with_minimum"', async () => {
+  it('renders a number control for handling fee minimum in the Handling and Discount section if handling fee type is "flat_percent_with_minimum"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -469,25 +521,47 @@ describe('ItemCategoryForm', () => {
 
     element.edit({ handling_fee_type: 'none' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="handling-fee-minimum"]')).to.not.exist;
+    expect(
+      element.renderRoot.querySelector(
+        '[infer="handling-and-discount"] [infer="handling-fee-minimum"]'
+      )
+    ).to.not.exist;
 
     element.edit({ handling_fee_type: 'flat_percent_with_minimum' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="handling-fee-minimum"]')).to.be.instanceOf(
-      InternalNumberControl
+    const control = element.renderRoot.querySelector(
+      '[infer="handling-and-discount"] [infer="handling-fee-minimum"]'
     );
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('min', '0');
+  });
+
+  it('renders a summary control for Delivery section', async () => {
+    const router = createRouter();
+    const element = await fixture<Form>(html`
+      <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+      </foxy-item-category-form>
+    `);
+
+    const control = element.renderRoot.querySelector('[infer="delivery"]');
+    expect(control).to.be.instanceOf(InternalSummaryControl);
   });
 
-  it('renders a select control for item delivery type', async () => {
+  it('renders a select control for item delivery type in the Delivery section', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
       </foxy-item-category-form>
     `);
 
-    const control = element.renderRoot.querySelector('[infer="item-delivery-type"]');
+    const control = element.renderRoot.querySelector(
+      '[infer="delivery"] [infer="item-delivery-type"]'
+    );
 
     expect(control).to.be.instanceOf(InternalSelectControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('options', [
       { label: 'option_notshipped', value: 'notshipped' },
       { label: 'option_downloaded', value: 'downloaded' },
@@ -497,7 +571,7 @@ describe('ItemCategoryForm', () => {
     ]);
   });
 
-  it('renders an integer control for max downloads per customer if item delivery type is "downloaded"', async () => {
+  it('renders a number control for max downloads per customer in the Delivery section if item delivery type is "downloaded"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -507,16 +581,18 @@ describe('ItemCategoryForm', () => {
     const $ = element.renderRoot;
     element.edit({ item_delivery_type: 'notshipped' });
     await element.requestUpdate();
-    expect($.querySelector('[infer="max-downloads-per-customer"]')).to.not.exist;
+    expect($.querySelector('[infer="delivery"] [infer="max-downloads-per-customer"]')).to.not.exist;
 
     element.edit({ item_delivery_type: 'downloaded' });
     await element.requestUpdate();
-    expect($.querySelector('[infer="max-downloads-per-customer"]')).to.be.instanceOf(
-      InternalIntegerControl
-    );
+    const control = $.querySelector('[infer="delivery"] [infer="max-downloads-per-customer"]');
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('min', '0');
   });
 
-  it('renders an integer control for max downloads per time period if item delivery type is "downloaded"', async () => {
+  it('renders a number control for max downloads per time period in the Delivery section if item delivery type is "downloaded"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -526,16 +602,18 @@ describe('ItemCategoryForm', () => {
     const $ = element.renderRoot;
     element.edit({ item_delivery_type: 'notshipped' });
     await element.requestUpdate();
-    expect($.querySelector('[infer="max-downloads-time-period"]')).to.not.exist;
+    expect($.querySelector('[infer="delivery"] [infer="max-downloads-time-period"]')).to.not.exist;
 
     element.edit({ item_delivery_type: 'downloaded' });
     await element.requestUpdate();
-    expect($.querySelector('[infer="max-downloads-time-period"]')).to.be.instanceOf(
-      InternalIntegerControl
-    );
+    const control = $.querySelector('[infer="delivery"] [infer="max-downloads-time-period"]');
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('min', '0');
   });
 
-  it('renders a number control for shipping flat rate if item delivery type is "flat_rate"', async () => {
+  it('renders a number control for shipping flat rate in the Delivery section if item delivery type is "flat_rate"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -544,16 +622,21 @@ describe('ItemCategoryForm', () => {
 
     element.edit({ item_delivery_type: 'pickup' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="shipping-flat-rate"]')).to.not.exist;
+    expect(element.renderRoot.querySelector('[infer="delivery"] [infer="shipping-flat-rate"]')).to
+      .not.exist;
 
     element.edit({ item_delivery_type: 'flat_rate' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="shipping-flat-rate"]')).to.be.instanceOf(
-      InternalNumberControl
+    const control = element.renderRoot.querySelector(
+      '[infer="delivery"] [infer="shipping-flat-rate"]'
     );
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('min', '0');
   });
 
-  it('renders a number control for customs value if item delivery type is "flat_rate"', async () => {
+  it('renders a number control for customs value in the Delivery section if item delivery type is "flat_rate"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -562,16 +645,19 @@ describe('ItemCategoryForm', () => {
 
     element.edit({ item_delivery_type: 'pickup' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="customs-value"]')).to.not.exist;
+    expect(element.renderRoot.querySelector('[infer="delivery"] [infer="customs-value"]')).to.not
+      .exist;
 
     element.edit({ item_delivery_type: 'flat_rate' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="customs-value"]')).to.be.instanceOf(
-      InternalNumberControl
-    );
+    const control = element.renderRoot.querySelector('[infer="delivery"] [infer="customs-value"]');
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('min', '0');
   });
 
-  it('renders a select control for shipping flat rate type if item delivery type is "flat_rate"', async () => {
+  it('renders a select control for shipping flat rate type in the Delivery section if item delivery type is "flat_rate"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -581,20 +667,24 @@ describe('ItemCategoryForm', () => {
     element.edit({ item_delivery_type: 'pickup' });
     await element.requestUpdate();
 
-    expect(element.renderRoot.querySelector('[infer="shipping-flat-rate-type"]')).to.not.exist;
+    expect(element.renderRoot.querySelector('[infer="delivery"] [infer="shipping-flat-rate-type"]'))
+      .to.not.exist;
 
     element.edit({ item_delivery_type: 'flat_rate' });
     await element.requestUpdate();
-    const control = element.renderRoot.querySelector('[infer="shipping-flat-rate-type"]');
+    const control = element.renderRoot.querySelector(
+      '[infer="delivery"] [infer="shipping-flat-rate-type"]'
+    );
 
     expect(control).to.be.instanceOf(InternalSelectControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('options', [
       { label: 'option_per_order', value: 'per_order' },
       { label: 'option_per_shipment', value: 'per_shipment' },
     ]);
   });
 
-  it('renders an integer control for default weight if item delivery type is "shipped"', async () => {
+  it('renders a number control for default weight in the Delivery section if item delivery type is "shipped"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -603,16 +693,19 @@ describe('ItemCategoryForm', () => {
 
     element.edit({ item_delivery_type: 'pickup' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="default-weight"]')).to.not.exist;
+    expect(element.renderRoot.querySelector('[infer="delivery"] [infer="default-weight"]')).to.not
+      .exist;
 
     element.edit({ item_delivery_type: 'shipped' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="default-weight"]')).to.be.instanceOf(
-      InternalIntegerControl
-    );
+    const control = element.renderRoot.querySelector('[infer="delivery"] [infer="default-weight"]');
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('min', '0');
   });
 
-  it('renders a select control for default weight unit if item delivery type is "shipped"', async () => {
+  it('renders a select control for default weight unit in the Delivery section if item delivery type is "shipped"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -622,20 +715,24 @@ describe('ItemCategoryForm', () => {
     element.edit({ item_delivery_type: 'pickup' });
     await element.requestUpdate();
 
-    expect(element.renderRoot.querySelector('[infer="default-weight-unit"]')).to.not.exist;
+    expect(element.renderRoot.querySelector('[infer="delivery"] [infer="default-weight-unit"]')).to
+      .not.exist;
 
     element.edit({ item_delivery_type: 'shipped' });
     await element.requestUpdate();
-    const control = element.renderRoot.querySelector('[infer="default-weight-unit"]');
+    const control = element.renderRoot.querySelector(
+      '[infer="delivery"] [infer="default-weight-unit"]'
+    );
 
     expect(control).to.be.instanceOf(InternalSelectControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('options', [
       { label: 'option_lbs', value: 'LBS' },
       { label: 'option_kgs', value: 'KGS' },
     ]);
   });
 
-  it('renders a select control for default length unit if item delivery type is "shipped"', async () => {
+  it('renders a select control for default length unit in the Delivery section if item delivery type is "shipped"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -645,20 +742,24 @@ describe('ItemCategoryForm', () => {
     element.edit({ item_delivery_type: 'pickup' });
     await element.requestUpdate();
 
-    expect(element.renderRoot.querySelector('[infer="default-length-unit"]')).to.not.exist;
+    expect(element.renderRoot.querySelector('[infer="delivery"] [infer="default-length-unit"]')).to
+      .not.exist;
 
     element.edit({ item_delivery_type: 'shipped' });
     await element.requestUpdate();
-    const control = element.renderRoot.querySelector('[infer="default-length-unit"]');
+    const control = element.renderRoot.querySelector(
+      '[infer="delivery"] [infer="default-length-unit"]'
+    );
 
     expect(control).to.be.instanceOf(InternalSelectControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('options', [
       { label: 'option_in', value: 'IN' },
       { label: 'option_cm', value: 'CM' },
     ]);
   });
 
-  it('renders a number control for customs value if item delivery type is "shipped"', async () => {
+  it('renders a number control for customs value in the Delivery section if item delivery type is "shipped"', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -667,39 +768,48 @@ describe('ItemCategoryForm', () => {
 
     element.edit({ item_delivery_type: 'pickup' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="customs-value"]')).to.not.exist;
+    expect(element.renderRoot.querySelector('[infer="delivery"] [infer="customs-value"]')).to.not
+      .exist;
 
     element.edit({ item_delivery_type: 'shipped' });
     await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="customs-value"]')).to.be.instanceOf(
-      InternalNumberControl
-    );
+    const control = element.renderRoot.querySelector('[infer="delivery"] [infer="customs-value"]');
+
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('min', '0');
   });
 
-  it('renders a text control for discount name', async () => {
+  it('renders a text control for discount name in the Handling and Discount section', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
       </foxy-item-category-form>
     `);
 
-    const control = element.renderRoot.querySelector('[infer="discount-name"]');
+    const control = element.renderRoot.querySelector(
+      '[infer="handling-and-discount"] [infer="discount-name"]'
+    );
+
     expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
   });
 
-  it('renders a discount builder if discount name is not empty', async () => {
+  it('renders a discount builder in the Handling and Discount section if discount name is not empty', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
       </foxy-item-category-form>
     `);
 
-    expect(element.renderRoot.querySelector('[infer="discount-builder"]')).to.not.exist;
+    expect(
+      element.renderRoot.querySelector('[infer="handling-and-discount"] [infer="discount-builder"]')
+    ).to.not.exist;
 
     element.edit({ discount_name: 'Foo' });
     await element.requestUpdate();
     const control = element.renderRoot.querySelector(
-      '[infer="discount-builder"]'
+      '[infer="handling-and-discount"] [infer="discount-builder"]'
     ) as DiscountBuilder;
 
     expect(control).to.be.instanceOf(DiscountBuilder);
@@ -717,7 +827,7 @@ describe('ItemCategoryForm', () => {
     expect(element).to.have.nested.property('form.discount_details', '1-2|3+4');
   });
 
-  it('renders an async combo box control for admin email template uri', async () => {
+  it('renders a summary control for Emails section', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form
@@ -727,71 +837,11 @@ describe('ItemCategoryForm', () => {
       </foxy-item-category-form>
     `);
 
-    const control = element.renderRoot.querySelector(
-      '[infer="admin-email-template-uri"]'
-    ) as InternalAsyncComboBoxControl;
-
-    expect(control).to.be.instanceOf(InternalAsyncComboBoxControl);
-    expect(control).to.have.attribute('item-label-path', 'description');
-    expect(control).to.have.attribute('item-value-path', '_links.self.href');
-    expect(control).to.have.attribute('first', 'https://demo.api/hapi/email_templates');
-
-    expect(element).to.not.have.nested.property('form.send_admin_email');
-    control.dispatchEvent(
-      new CustomEvent('change', { detail: 'https://demo.api/hapi/email_templates/0' })
-    );
-    expect(element).to.have.nested.property('form.send_admin_email', true);
-
-    control.dispatchEvent(new CustomEvent('change', { detail: '' }));
-    expect(element).to.have.nested.property('form.send_admin_email', false);
-  });
-
-  it('renders a text control for admin email if "send_admin_email" is true', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-item-category-form @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
-      </foxy-item-category-form>
-    `);
-
-    expect(element.renderRoot.querySelector('[infer="admin-email"]')).to.not.exist;
-
-    element.edit({ send_admin_email: true });
-    await element.requestUpdate();
-    expect(element.renderRoot.querySelector('[infer="admin-email"]')).to.be.instanceOf(
-      InternalTextControl
-    );
-  });
-
-  it('renders an async combo box control for customer email template uri', async () => {
-    const router = createRouter();
-    const element = await fixture<Form>(html`
-      <foxy-item-category-form
-        email-templates="https://demo.api/hapi/email_templates"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-      </foxy-item-category-form>
-    `);
-
-    const control = element.renderRoot.querySelector(
-      '[infer="customer-email-template-uri"]'
-    ) as InternalAsyncComboBoxControl;
-
-    expect(control).to.be.instanceOf(InternalAsyncComboBoxControl);
-    expect(control).to.have.attribute('item-label-path', 'description');
-    expect(control).to.have.attribute('item-value-path', '_links.self.href');
-    expect(control).to.have.attribute('first', 'https://demo.api/hapi/email_templates');
-
-    expect(element).to.not.have.nested.property('form.send_customer_email');
-    control.dispatchEvent(
-      new CustomEvent('change', { detail: 'https://demo.api/hapi/email_templates/0' })
-    );
-    expect(element).to.have.nested.property('form.send_customer_email', true);
-
-    control.dispatchEvent(new CustomEvent('change', { detail: '' }));
-    expect(element).to.have.nested.property('form.send_customer_email', false);
+    const control = element.renderRoot.querySelector('[infer="emails"]');
+    expect(control).to.be.instanceOf(InternalSummaryControl);
   });
 
-  it('renders an async combo box control for gift recipient email template uri', async () => {
+  it('renders an resource picker control for gift recipient email template uri in the Emails section', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form
@@ -802,16 +852,16 @@ describe('ItemCategoryForm', () => {
     `);
 
     const control = element.renderRoot.querySelector(
-      '[infer="gift-recipient-email-template-uri"]'
-    ) as InternalAsyncComboBoxControl;
+      '[infer="emails"] [infer="gift-recipient-email-template-uri"]'
+    ) as InternalResourcePickerControl;
 
-    expect(control).to.be.instanceOf(InternalAsyncComboBoxControl);
-    expect(control).to.have.attribute('item-label-path', 'description');
-    expect(control).to.have.attribute('item-value-path', '_links.self.href');
+    expect(control).to.be.instanceOf(InternalResourcePickerControl);
     expect(control).to.have.attribute('first', 'https://demo.api/hapi/email_templates');
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('item', 'foxy-email-template-card');
   });
 
-  it('renders a taxes control when resource is loaded', async () => {
+  it('renders an async list control for taxes when resource is loaded', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-item-category-form
diff --git a/src/elements/public/ItemCategoryForm/ItemCategoryForm.ts b/src/elements/public/ItemCategoryForm/ItemCategoryForm.ts
index 35e5b26e5..aa42868f8 100644
--- a/src/elements/public/ItemCategoryForm/ItemCategoryForm.ts
+++ b/src/elements/public/ItemCategoryForm/ItemCategoryForm.ts
@@ -1,18 +1,16 @@
 import type { PropertyDeclarations } from 'lit-element';
 import type { DiscountBuilder } from '../DiscountBuilder/DiscountBuilder';
 import type { Data } from './types';
-import type { NucleonElement } from '../NucleonElement/NucleonElement';
+
 import type { TemplateResult } from 'lit-html';
 import type { ParsedValue } from '../DiscountBuilder/types';
 import type { NucleonV8N } from '../NucleonElement/types';
-import type { Resource } from '@foxy.io/sdk/core';
-import type { Rels } from '@foxy.io/sdk/backend';
 
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-html';
+import { html, svg } from 'lit-html';
 
 /**
  * Form element for item categories (`fx:item_category`).
@@ -126,8 +124,6 @@ export class ItemCategoryForm extends TranslatableMixin(InternalForm, 'item-cate
       ({ handling_fee_percentage: v }) => {
         return (typeof v === 'number' ? v >= 0 : true) || 'handling-fee-percentage:v8n_negative';
       },
-
-      ({ send_admin_email: s, admin_email: v }) => (s ? !!v : true) || 'admin-email:v8n_required',
     ];
   }
 
@@ -168,16 +164,17 @@ export class ItemCategoryForm extends TranslatableMixin(InternalForm, 'item-cate
     { label: 'option_flat_percent_with_minimum', value: 'flat_percent_with_minimum' },
   ];
 
-  private readonly __giftRecipientEmailTemplateLoaderId = 'gift-recipient-email-template-loader';
-
-  private readonly __customerEmailTemplateLoaderId = 'customer-email-template-loader';
-
-  private readonly __adminEmailTemplateLoaderId = 'admin-email-template-loader';
+  get readonlySelector(): BooleanSelector {
+    const alwaysMatch = [super.readonlySelector.toString()];
+    if (this.data?.code === 'DEFAULT') alwaysMatch.unshift('code', 'name');
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
+  }
 
   get hiddenSelector(): BooleanSelector {
-    const alwaysHidden = [super.hiddenSelector.toString()];
-    if (!this.data) alwaysHidden.unshift('taxes');
-    return new BooleanSelector(alwaysHidden.join(' ').trim());
+    const alwaysMatch = [super.hiddenSelector.toString()];
+    if (!this.data) alwaysMatch.unshift('taxes');
+    if (this.data?.code === 'DEFAULT') alwaysMatch.unshift('delete');
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
   }
 
   renderBody(): TemplateResult {
@@ -187,13 +184,46 @@ export class ItemCategoryForm extends TranslatableMixin(InternalForm, 'item-cate
     return html`
       ${this.renderHeader()}
 
-      <div class="grid grid-cols-2 gap-m">
-        <foxy-internal-text-control infer="name" class="col-span-2"></foxy-internal-text-control>
-        <foxy-internal-text-control infer="code" class="col-span-2"></foxy-internal-text-control>
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-text-control infer="name" layout="summary-item"></foxy-internal-text-control>
+        <foxy-internal-text-control infer="code" layout="summary-item"></foxy-internal-text-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-async-resource-link-list-control
+        foreign-key-for-uri="tax_uri"
+        foreign-key-for-id="tax_id"
+        own-key-for-uri="item_category_uri"
+        options-href=${ifDefined(this.taxes ?? undefined)}
+        links-href=${ifDefined(this.data?._links['fx:tax_item_categories'].href)}
+        embed-key="fx:tax_item_categories"
+        own-uri=${ifDefined(this.data?._links.self.href)}
+        infer="taxes"
+        limit="5"
+        item="foxy-tax-card"
+      >
+      </foxy-internal-async-resource-link-list-control>
+
+      <foxy-internal-summary-control infer="delivery">
+        <foxy-internal-select-control
+          layout="summary-item"
+          infer="item-delivery-type"
+          .options=${ItemCategoryForm.__itemDeliveryTypeOptions}
+        >
+        </foxy-internal-select-control>
+
+        ${itemDeliveryType === 'downloaded'
+          ? this.__renderDownloadDeliveryControls()
+          : itemDeliveryType === 'flat_rate'
+          ? [this.__renderFlatRateControls(), this.__renderCustomsValue()]
+          : itemDeliveryType === 'shipped'
+          ? [this.__renderShippingControls(), this.__renderCustomsValue()]
+          : ''}
+      </foxy-internal-summary-control>
 
+      <foxy-internal-summary-control infer="handling-and-discount">
         <foxy-internal-select-control
+          layout="summary-item"
           infer="handling-fee-type"
-          class="col-span-2"
           .options=${ItemCategoryForm.__handlingFeeTypeOptions}
         >
         </foxy-internal-select-control>
@@ -208,167 +238,97 @@ export class ItemCategoryForm extends TranslatableMixin(InternalForm, 'item-cate
                 : ''}
             `}
 
-        <foxy-internal-select-control
-          infer="item-delivery-type"
-          class="col-span-2"
-          .options=${ItemCategoryForm.__itemDeliveryTypeOptions}
-        >
-        </foxy-internal-select-control>
-
-        ${itemDeliveryType === 'downloaded'
-          ? this.__renderDownloadDeliveryControls()
-          : itemDeliveryType === 'flat_rate'
-          ? [this.__renderFlatRateControls(), this.__renderCustomsValue()]
-          : itemDeliveryType === 'shipped'
-          ? [this.__renderShippingControls(), this.__renderCustomsValue()]
-          : ''}
-
-        <foxy-internal-text-control infer="discount-name" class="col-span-2">
+        <foxy-internal-text-control layout="summary-item" infer="discount-name">
         </foxy-internal-text-control>
 
         ${this.form.discount_name ? this.__renderDiscountBuilder() : ''}
+      </foxy-internal-summary-control>
 
-        <foxy-internal-async-combo-box-control
-          item-label-path="description"
-          item-value-path="_links.self.href"
-          first=${ifDefined(this.emailTemplates ?? undefined)}
-          infer="admin-email-template-uri"
-          class=${this.form.send_admin_email ? '' : 'col-span-2'}
-          .selectedItem=${this.__adminEmailTemplateLoader?.data}
-          @change=${(evt: CustomEvent) => {
-            this.edit({
-              send_admin_email: !!evt.detail,
-              admin_email: evt.detail ? this.form.admin_email : '',
-            });
-          }}
-        >
-        </foxy-internal-async-combo-box-control>
-
-        ${this.form.send_admin_email ? this.__renderAdminEmail() : ''}
-
-        <foxy-internal-async-combo-box-control
-          item-label-path="description"
-          item-value-path="_links.self.href"
-          first=${ifDefined(this.emailTemplates ?? undefined)}
-          infer="customer-email-template-uri"
-          class="col-span-2"
-          .selectedItem=${this.__customerEmailTemplateLoader?.data}
-          @change=${(evt: CustomEvent) => this.edit({ send_customer_email: !!evt.detail })}
-        >
-        </foxy-internal-async-combo-box-control>
-
-        <foxy-internal-async-combo-box-control
-          item-label-path="description"
-          item-value-path="_links.self.href"
+      <foxy-internal-summary-control infer="emails">
+        <foxy-internal-resource-picker-control
+          layout="summary-item"
           first=${ifDefined(this.emailTemplates ?? undefined)}
           infer="gift-recipient-email-template-uri"
-          class="col-span-2"
-          .selectedItem=${this.__giftRecipientEmailTemplateLoader?.data}
+          item="foxy-email-template-card"
         >
-        </foxy-internal-async-combo-box-control>
-
-        <foxy-internal-async-resource-link-list-control
-          foreign-key-for-uri="tax_uri"
-          foreign-key-for-id="tax_id"
-          own-key-for-uri="item_category_uri"
-          own-uri=${ifDefined(this.data?._links.self.href)}
-          embed-key="fx:tax_item_categories"
-          options-href=${ifDefined(this.taxes ?? undefined)}
-          links-href=${ifDefined(this.data?._links['fx:tax_item_categories'].href)}
-          infer="taxes"
-          class="col-span-2"
-          limit="5"
-          item="foxy-tax-card"
+        </foxy-internal-resource-picker-control>
+
+        <div
+          class="flex items-start"
+          style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
         >
-        </foxy-internal-async-resource-link-list-control>
-      </div>
+          ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-primary" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`}
+          <p>
+            <foxy-i18n infer="" key="wip_message"></foxy-i18n>
+            <br />
+            <a
+              target="_blank"
+              class="mt-xs inline-block rounded font-medium text-primary transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+              href="https://admin.foxycart.com"
+            >
+              admin.foxycart.com
+            </a>
+          </p>
+        </div>
+      </foxy-internal-summary-control>
 
       ${super.renderBody()}
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.form.customer_email_template_uri || undefined)}
-        id=${this.__customerEmailTemplateLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.form.gift_recipient_email_template_uri || undefined)}
-        id=${this.__giftRecipientEmailTemplateLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.form.admin_email_template_uri || undefined)}
-        id=${this.__adminEmailTemplateLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
     `;
   }
 
-  private get __giftRecipientEmailTemplateLoader() {
-    const id = this.__giftRecipientEmailTemplateLoaderId;
-    type Loader = NucleonElement<Resource<Rels.EmailTemplate>>;
-    return this.renderRoot.querySelector<Loader>(`#${id}`);
-  }
-
-  private get __customerEmailTemplateLoader() {
-    const id = this.__customerEmailTemplateLoaderId;
-    type Loader = NucleonElement<Resource<Rels.EmailTemplate>>;
-    return this.renderRoot.querySelector<Loader>(`#${id}`);
-  }
-
-  private get __adminEmailTemplateLoader() {
-    const id = this.__adminEmailTemplateLoaderId;
-    type Loader = NucleonElement<Resource<Rels.EmailTemplate>>;
-    return this.renderRoot.querySelector<Loader>(`#${id}`);
-  }
-
   private __renderHandlingFee() {
     return html`
-      <foxy-internal-number-control
-        infer="handling-fee"
-        class=${this.form.handling_fee_type === 'flat_percent' ? '' : 'col-span-2'}
-      >
+      <foxy-internal-number-control layout="summary-item" infer="handling-fee" min="0">
       </foxy-internal-number-control>
     `;
   }
 
   private __renderHandlingFeePercentage() {
     return html`
-      <foxy-internal-number-control infer="handling-fee-percentage"> </foxy-internal-number-control>
+      <foxy-internal-number-control
+        layout="summary-item"
+        suffix="%"
+        infer="handling-fee-percentage"
+        min="0"
+      >
+      </foxy-internal-number-control>
     `;
   }
 
   private __renderHandlingFeeMinimum() {
     return html`
-      <foxy-internal-number-control infer="handling-fee-minimum"> </foxy-internal-number-control>
+      <foxy-internal-number-control layout="summary-item" infer="handling-fee-minimum" min="0">
+      </foxy-internal-number-control>
     `;
   }
 
   private __renderDownloadDeliveryControls() {
     return html`
-      <foxy-internal-integer-control infer="max-downloads-per-customer">
-      </foxy-internal-integer-control>
+      <foxy-internal-number-control
+        layout="summary-item"
+        infer="max-downloads-per-customer"
+        step="1"
+        min="0"
+      >
+      </foxy-internal-number-control>
 
-      <foxy-internal-integer-control infer="max-downloads-time-period">
-      </foxy-internal-integer-control>
+      <foxy-internal-number-control
+        layout="summary-item"
+        infer="max-downloads-time-period"
+        step="1"
+        min="0"
+      >
+      </foxy-internal-number-control>
     `;
   }
 
   private __renderFlatRateControls() {
     return html`
-      <foxy-internal-number-control infer="shipping-flat-rate"> </foxy-internal-number-control>
+      <foxy-internal-number-control layout="summary-item" infer="shipping-flat-rate" min="0">
+      </foxy-internal-number-control>
 
       <foxy-internal-select-control
+        layout="summary-item"
         infer="shipping-flat-rate-type"
         .options=${ItemCategoryForm.__shippingFlatRateTypeOptions}
       >
@@ -378,16 +338,18 @@ export class ItemCategoryForm extends TranslatableMixin(InternalForm, 'item-cate
 
   private __renderShippingControls() {
     return html`
-      <foxy-internal-integer-control infer="default-weight" class="col-span-2">
-      </foxy-internal-integer-control>
+      <foxy-internal-number-control layout="summary-item" infer="default-weight" min="0">
+      </foxy-internal-number-control>
 
       <foxy-internal-select-control
+        layout="summary-item"
         infer="default-weight-unit"
         .options=${ItemCategoryForm.__defaultWeightUnitOptions}
       >
       </foxy-internal-select-control>
 
       <foxy-internal-select-control
+        layout="summary-item"
         infer="default-length-unit"
         .options=${ItemCategoryForm.__defaultLengthUnitOptions}
       >
@@ -397,7 +359,7 @@ export class ItemCategoryForm extends TranslatableMixin(InternalForm, 'item-cate
 
   private __renderCustomsValue() {
     return html`
-      <foxy-internal-number-control infer="customs-value" class="col-span-2">
+      <foxy-internal-number-control layout="summary-item" infer="customs-value" min="0">
       </foxy-internal-number-control>
     `;
   }
@@ -427,8 +389,4 @@ export class ItemCategoryForm extends TranslatableMixin(InternalForm, 'item-cate
       </foxy-discount-builder>
     `;
   }
-
-  private __renderAdminEmail() {
-    return html`<foxy-internal-text-control infer="admin-email"> </foxy-internal-text-control>`;
-  }
 }
diff --git a/src/elements/public/ItemCategoryForm/index.ts b/src/elements/public/ItemCategoryForm/index.ts
index c450418c3..4656d604d 100644
--- a/src/elements/public/ItemCategoryForm/index.ts
+++ b/src/elements/public/ItemCategoryForm/index.ts
@@ -1,14 +1,15 @@
 import '../../internal/InternalAsyncResourceLinkListControl/index';
-import '../../internal/InternalAsyncComboBoxControl/index';
-import '../../internal/InternalIntegerControl/index';
+import '../../internal/InternalResourcePickerControl/index';
+import '../../internal/InternalSummaryControl/index';
 import '../../internal/InternalNumberControl/index';
 import '../../internal/InternalSelectControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 
+import '../EmailTemplateCard/index';
 import '../DiscountBuilder/index';
-import '../NucleonElement/index';
 import '../TaxCard/index';
+import '../I18n/index';
 
 import { ItemCategoryForm } from './ItemCategoryForm';
 
diff --git a/src/elements/public/NativeIntegrationForm/NativeIntegrationForm.test.ts b/src/elements/public/NativeIntegrationForm/NativeIntegrationForm.test.ts
index 8c34ab734..c259dd274 100644
--- a/src/elements/public/NativeIntegrationForm/NativeIntegrationForm.test.ts
+++ b/src/elements/public/NativeIntegrationForm/NativeIntegrationForm.test.ts
@@ -1241,28 +1241,6 @@ describe('NativeIntegrationForm', () => {
     expect(config).to.have.property('inventory_field_name', 'def');
   });
 
-  it('renders a password control for webflow auth', async () => {
-    const data = await getTestData<Data>('./hapi/native_integrations/0');
-    data.provider = 'webflow';
-    data.config = JSON.stringify({ ...defaults.webflow, auth: 'abc' });
-
-    const element = await fixture<Form>(html`
-      <foxy-native-integration-form .data=${data}></foxy-native-integration-form>
-    `);
-
-    const control = element.renderRoot.querySelector(
-      '[infer="webflow-auth"]'
-    ) as InternalPasswordControl;
-
-    expect(control).to.be.instanceOf(InternalPasswordControl);
-    expect(control.getValue()).to.equal('abc');
-
-    control.setValue('def');
-
-    const newConfig = JSON.parse(element.form.config as string);
-    expect(newConfig).to.have.property('auth', 'def');
-  });
-
   it('renders a readonly list control for zapier events', async () => {
     const data = await getTestData<Data>('./hapi/native_integrations/0');
     data.provider = 'zapier';
diff --git a/src/elements/public/NativeIntegrationForm/NativeIntegrationForm.ts b/src/elements/public/NativeIntegrationForm/NativeIntegrationForm.ts
index 53f029a9d..f532c7ab2 100644
--- a/src/elements/public/NativeIntegrationForm/NativeIntegrationForm.ts
+++ b/src/elements/public/NativeIntegrationForm/NativeIntegrationForm.ts
@@ -1,13 +1,13 @@
-import type { Data } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
 import type { Option } from '../../internal/InternalRadioGroupControl/types';
+import type { Data } from './types';
 import type { Item } from '../../internal/InternalEditableListControl/types';
 
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
-import { html } from 'lit-html';
+import { html, svg } from 'lit-html';
 
 import * as defaults from './defaults';
 import memoize from 'lodash-es/memoize';
@@ -522,23 +522,23 @@ export class NativeIntegrationForm extends Base<Data> {
 
   private __renderWebhookConfig() {
     return html`
-      <p
-        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
-        class="rounded bg-error-10 text-error font-medium"
-      >
-        <foxy-i18n infer="webhook-warning" key="warning_text"></foxy-i18n>
-        <br />
-        <br />
-        <a
-          target="_blank"
-          class="text-body rounded hover-underline hover-cursor-pointer focus-outline-none focus-ring-2 focus-ring-error-50"
-          lang="en"
-          rel="noopener"
-          href="https://www.foxy.io/blog/new-feature-json-webhook/"
-        >
-          <foxy-i18n infer="webhook-warning" key="link_text"></foxy-i18n>
-        </a>
-      </p>
+      <div
+        class="flex items-start border border-error rounded"
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px); gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+      >
+        ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-error" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`}
+        <p>
+          <foxy-i18n infer="webhook-warning" key="warning_text"></foxy-i18n>
+          <br />
+          <a
+            target="_blank"
+            class="mt-xs inline-block rounded font-medium text-error transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+            href="https://admin.foxycart.com"
+          >
+            <foxy-i18n infer="webhook-warning" key="link_text"></foxy-i18n>
+          </a>
+        </p>
+      </div>
 
       ${this.__config?.service === 'json'
         ? this.__renderWebhookJsonConfig()
@@ -674,13 +674,6 @@ export class NativeIntegrationForm extends Base<Data> {
         >
         </foxy-internal-text-control>
       </div>
-
-      <foxy-internal-password-control
-        infer="webflow-auth"
-        .getValue=${this.__createConfigGetterFor('auth')}
-        .setValue=${this.__createConfigSetterFor('auth')}
-      >
-      </foxy-internal-password-control>
     `;
   }
 
diff --git a/src/elements/public/PaymentsApi/PaymentsApi.test.ts b/src/elements/public/PaymentsApi/PaymentsApi.test.ts
index f3944f37c..719fb98c5 100644
--- a/src/elements/public/PaymentsApi/PaymentsApi.test.ts
+++ b/src/elements/public/PaymentsApi/PaymentsApi.test.ts
@@ -650,6 +650,176 @@ describe('PaymentsApi', () => {
     });
   });
 
+  it('handles GET requests to the fx:available_fraud_protections helper (with conflict)', async () => {
+    const router = createRouter({
+      defaults,
+      dataset: {
+        payment_method_set_fraud_protections: [
+          {
+            id: 0,
+            store_id: 0,
+            payment_method_set_id: 0,
+            fraud_protection_id: 0,
+            payment_method_set_uri: 'https://demo.api/hapi/payment_method_sets/0',
+            fraud_protection_uri: 'https://demo.api/hapi/fraud_protections/0',
+            date_created: '2012-08-10T11:58:54-0700',
+            date_modified: '2012-08-10T11:58:54-0700',
+          },
+        ],
+        fraud_protections: [
+          {
+            id: 0,
+            store_id: 0,
+            payment_method_set_id: 0,
+            type: 'google_recaptcha',
+            description: 'Default fraud protection',
+            json: '{"private_key":"","site_key":"","config":"disabled"}',
+            score_threshold_reject: 0,
+            date_created: '2015-05-27T08:59:54-0700',
+            date_modified: '2015-05-27T08:59:54-0700',
+          },
+        ],
+        payment_method_sets: [
+          {
+            id: 0,
+            store_id: 0,
+            payment_gateway_id: 0,
+            gateway_uri: 'https://demo.api/hapi/payment_gateways/0',
+            description: 'Default Payment Method Set',
+            is_live: false,
+            is_purchase_order_enabled: true,
+            date_created: '2012-08-10T11:58:54-0700',
+            date_modified: '2012-08-10T11:58:54-0700',
+          },
+        ],
+      },
+      links,
+    });
+
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-nucleon
+            href="https://foxy-payments-api.element/payment_presets/0/available_fraud_protections"
+          >
+          </foxy-nucleon>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const api = wrapper.firstElementChild as PaymentsApi;
+    const nucleon = api.firstElementChild as NucleonElement<any>;
+    await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+    expect(nucleon).to.have.deep.property('data', {
+      _links: {
+        self: {
+          href: 'https://foxy-payments-api.element/payment_presets/0/available_fraud_protections',
+        },
+      },
+      values: {
+        minfraud: {
+          name: 'MaxMind minFraud',
+          uses_rejection_threshold: true,
+          json: null,
+        },
+        google_recaptcha: {
+          name: 'Google reCAPTCHA',
+          conflict: {
+            name: 'Default fraud protection',
+            type: 'google_recaptcha',
+          },
+          uses_rejection_threshold: false,
+          json: {
+            blocks: [
+              {
+                id: '',
+                parent_id: '',
+                fields: [
+                  {
+                    id: 'config',
+                    name: 'Configuration',
+                    type: 'select',
+                    description: 'Determines how reCAPTCHA is configured to operate.',
+                    default_value: 'disabled',
+                    options: [
+                      { name: 'Disabled', value: 'disabled' },
+                      { name: 'Always enabled', value: 'enabled_always' },
+                      { name: 'Enabled by errors', value: 'enabled_by_errors' },
+                    ],
+                  },
+                  {
+                    id: 'private_key',
+                    name: 'Private Key',
+                    type: 'text',
+                    optional: true,
+                    description: 'If using a custom subdomain, enter your Private Key here.',
+                    default_value: '',
+                  },
+                  {
+                    id: 'site_key',
+                    name: 'Site Key',
+                    type: 'text',
+                    optional: true,
+                    description: 'If using a custom subdomain, enter your Site Key here.',
+                    default_value: '',
+                  },
+                ],
+              },
+            ],
+          },
+        },
+        custom_precheckout_hook: {
+          name: 'Pre-Checkout Webhook',
+          uses_rejection_threshold: false,
+          json: {
+            blocks: [
+              {
+                id: '',
+                parent_id: '',
+                fields: [
+                  {
+                    id: 'enabled',
+                    name: 'Enabled',
+                    type: 'checkbox',
+                    default_value: false,
+                  },
+                  {
+                    id: 'url',
+                    name: 'URL',
+                    type: 'text',
+                    description: 'Url of your Pre-Checkout Hook',
+                    default_value: '',
+                  },
+                  {
+                    id: 'failure_handling',
+                    name: 'Failure handling',
+                    type: 'select',
+                    description:
+                      'Determines what happens to the checkout submission if your webhook fails to respond correctly.',
+                    default_value: '',
+                    options: [
+                      { name: 'Reject', value: 'reject' },
+                      { name: 'Approve', value: 'approve' },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      },
+    });
+  });
+
   it('handles GET requests to the fx:available_payment_methods helper (no conflicts)', async () => {
     const router = createRouter({
       defaults,
@@ -829,7 +999,7 @@ describe('PaymentsApi', () => {
     });
   });
 
-  it('handles GET requests to the fx:available_payment_methods helper (with gateway conflict)', async () => {
+  it('handles GET requests to the fx:available_payment_methods helper (with regular gateway conflict)', async () => {
     const router = createRouter({
       defaults,
       dataset: {
@@ -1031,6 +1201,238 @@ describe('PaymentsApi', () => {
     });
   });
 
+  it('handles GET requests to the fx:available_payment_methods helper (with hosted gateway conflict)', async () => {
+    const router = createRouter({
+      defaults,
+      dataset: {
+        payment_method_set_hosted_payment_gateways: [
+          {
+            id: 0,
+            store_id: 0,
+            payment_method_set_id: 0,
+            hosted_payment_gateway_id: 0,
+            payment_method_set_uri: 'https://demo.api/hapi/payment_method_sets/0',
+            hosted_payment_gateway_uri: 'https://demo.api/hapi/hosted_payment_gateways/0',
+            date_created: '2012-08-10T11:58:54-0700',
+            date_modified: '2012-08-10T11:58:54-0700',
+          },
+        ],
+        hosted_payment_gateways: [
+          {
+            id: 0,
+            store_id: 0,
+            payment_method_set_id: 0,
+            description: 'Default hosted payment gateway',
+            type: 'amazon_mws',
+            use_auth_only: false,
+            account_id: '',
+            account_key: '',
+            third_party_key: '',
+            config_3d_secure: '',
+            additional_fields: '',
+            test_account_id: '',
+            test_account_key: '',
+            test_third_party_key: '',
+            date_created: '2015-05-26T17:49:56-0700',
+            date_modified: '2015-05-26T17:49:56-0700',
+          },
+        ],
+        payment_gateways: [
+          {
+            id: 0,
+            store_id: 0,
+            description: 'Default payment gateway',
+            type: 'authorize',
+            use_auth_only: false,
+            account_id: '',
+            account_key: '',
+            third_party_key: '',
+            config_3d_secure: '',
+            additional_fields: '',
+            test_account_id: 'BxFSnPy7',
+            test_account_key: '8SPBTpqs4uf2ZwM8',
+            test_third_party_key: '',
+            date_created: '2014-07-17T06:46:00-0700',
+            date_modified: '2014-07-17T06:46:00-0700',
+          },
+        ],
+        payment_method_sets: [
+          {
+            id: 0,
+            store_id: 0,
+            payment_gateway_id: null,
+            gateway_uri: 'https://demo.api/hapi/payment_gateways/0',
+            description: 'Default Payment Method Set',
+            is_live: false,
+            is_purchase_order_enabled: true,
+            date_created: '2012-08-10T11:58:54-0700',
+            date_modified: '2012-08-10T11:58:54-0700',
+          },
+        ],
+        property_helpers: [
+          {
+            id: 0,
+            store_id: 0,
+            message: 'fx:payment_gateways property helper',
+            values: {
+              authorize: {
+                name: 'Authorize.net AIM',
+                id_description: 'API ID',
+                test_id: 'BxFSnPy7',
+                key_description: 'Transaction Key',
+                test_key: '8SPBTpqs4uf2ZwM8',
+                third_party_key_description: '',
+                test_third_party_key: '',
+                supports_auth_only: true,
+                supports_3d_secure: true,
+                additional_fields: null,
+              },
+            },
+          },
+          {
+            id: 1,
+            store_id: 0,
+            message: 'fx:hosted_payment_gateways property helper',
+            values: {
+              amazon_mws: {
+                name: 'Amazon Pay',
+                id_description: 'Seller ID',
+                test_id: '',
+                key_description: 'MWS Auth Token',
+                test_key: '',
+                third_party_key_description: 'Client ID',
+                test_third_party_key: '',
+                supports_auth_only: false,
+                supports_3d_secure: false,
+                additional_fields: {
+                  blocks: [
+                    {
+                      id: 'amazon_mws_additonal_fields',
+                      parent_id: 'gateway_live_amazon_mws',
+                      is_live: true,
+                      fields: [
+                        {
+                          id: 'on_amazon_mws_auth',
+                          name: 'Authorize only (do not capture funds)',
+                          type: 'checkbox',
+                          default_value: false,
+                        },
+                      ],
+                    },
+                    {
+                      id: 'test_amazon_mws_additonal_fields',
+                      parent_id: 'gateway_test_amazon_mws',
+                      is_live: false,
+                      fields: [
+                        {
+                          id: 'test_on_amazon_mws_auth',
+                          name: 'Authorize only (do not capture funds)',
+                          type: 'checkbox',
+                          default_value: false,
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        ],
+      },
+      links,
+    });
+
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-nucleon
+            href="https://foxy-payments-api.element/payment_presets/0/available_payment_methods"
+          >
+          </foxy-nucleon>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const api = wrapper.firstElementChild as PaymentsApi;
+    const nucleon = api.firstElementChild as NucleonElement<any>;
+    await waitUntil(() => !!nucleon.data, '', { timeout: 5000 });
+
+    expect(nucleon).to.have.deep.property('data', {
+      _links: {
+        self: {
+          href: 'https://foxy-payments-api.element/payment_presets/0/available_payment_methods',
+        },
+      },
+      values: {
+        amazon_mws: {
+          name: 'Amazon Pay',
+          id_description: 'Seller ID',
+          test_id: '',
+          key_description: 'MWS Auth Token',
+          test_key: '',
+          third_party_key_description: 'Client ID',
+          test_third_party_key: '',
+          supports_auth_only: false,
+          supports_3d_secure: false,
+          additional_fields: {
+            blocks: [
+              {
+                id: 'amazon_mws_additonal_fields',
+                parent_id: 'gateway_live_amazon_mws',
+                is_live: true,
+                fields: [
+                  {
+                    id: 'on_amazon_mws_auth',
+                    name: 'Authorize only (do not capture funds)',
+                    type: 'checkbox',
+                    default_value: false,
+                  },
+                ],
+              },
+              {
+                id: 'test_amazon_mws_additonal_fields',
+                parent_id: 'gateway_test_amazon_mws',
+                is_live: false,
+                fields: [
+                  {
+                    id: 'test_on_amazon_mws_auth',
+                    name: 'Authorize only (do not capture funds)',
+                    type: 'checkbox',
+                    default_value: false,
+                  },
+                ],
+              },
+            ],
+          },
+          conflict: {
+            name: 'Default hosted payment gateway',
+            type: 'amazon_mws',
+          },
+        },
+        authorize: {
+          name: 'Authorize.net AIM',
+          id_description: 'API ID',
+          test_id: 'BxFSnPy7',
+          key_description: 'Transaction Key',
+          test_key: '8SPBTpqs4uf2ZwM8',
+          third_party_key_description: '',
+          test_third_party_key: '',
+          supports_auth_only: true,
+          supports_3d_secure: true,
+          additional_fields: null,
+        },
+      },
+    });
+  });
+
   it('handles GET requests to the fx:payment_methods collection', async () => {
     const router = createRouter({
       defaults,
diff --git a/src/elements/public/PaymentsApi/api/composers/available_fraud_protections.ts b/src/elements/public/PaymentsApi/api/composers/available_fraud_protections.ts
index 1748a2fc5..55ae138bc 100644
--- a/src/elements/public/PaymentsApi/api/composers/available_fraud_protections.ts
+++ b/src/elements/public/PaymentsApi/api/composers/available_fraud_protections.ts
@@ -1,103 +1,108 @@
-import type { AvailableFraudProtections } from '../types';
+import type { AvailableFraudProtections, FraudProtection } from '../types';
 
 export type Params = {
+  fraudProtections?: FraudProtection[];
   paymentPresetId: string;
   base: string;
 };
 
 export function compose(params: Params): AvailableFraudProtections {
-  const { paymentPresetId: presetId, base } = params;
+  const { paymentPresetId: presetId, fraudProtections: fps, base } = params;
   const selfURL = new URL(`./payment_presets/${presetId}/available_fraud_protections`, base);
 
-  return {
-    _links: { self: { href: selfURL.toString() } },
-    values: {
-      minfraud: {
-        name: 'MaxMind minFraud',
-        uses_rejection_threshold: true,
-        json: null,
-      },
-      google_recaptcha: {
-        name: 'Google reCAPTCHA',
-        uses_rejection_threshold: false,
-        json: {
-          blocks: [
-            {
-              id: '',
-              parent_id: '',
-              fields: [
-                {
-                  id: 'config',
-                  name: 'Configuration',
-                  type: 'select',
-                  description: 'Determines how reCAPTCHA is configured to operate.',
-                  default_value: 'disabled',
-                  options: [
-                    { name: 'Disabled', value: 'disabled' },
-                    { name: 'Always enabled', value: 'enabled_always' },
-                    { name: 'Enabled by errors', value: 'enabled_by_errors' },
-                  ],
-                },
-                {
-                  id: 'private_key',
-                  name: 'Private Key',
-                  type: 'text',
-                  optional: true,
-                  description: 'If using a custom subdomain, enter your Private Key here.',
-                  default_value: '',
-                },
-                {
-                  id: 'site_key',
-                  name: 'Site Key',
-                  type: 'text',
-                  optional: true,
-                  description: 'If using a custom subdomain, enter your Site Key here.',
-                  default_value: '',
-                },
-              ],
-            },
-          ],
-        },
+  const values: AvailableFraudProtections['values'] = {
+    minfraud: {
+      name: 'MaxMind minFraud',
+      uses_rejection_threshold: true,
+      json: null,
+    },
+    google_recaptcha: {
+      name: 'Google reCAPTCHA',
+      uses_rejection_threshold: false,
+      json: {
+        blocks: [
+          {
+            id: '',
+            parent_id: '',
+            fields: [
+              {
+                id: 'config',
+                name: 'Configuration',
+                type: 'select',
+                description: 'Determines how reCAPTCHA is configured to operate.',
+                default_value: 'disabled',
+                options: [
+                  { name: 'Disabled', value: 'disabled' },
+                  { name: 'Always enabled', value: 'enabled_always' },
+                  { name: 'Enabled by errors', value: 'enabled_by_errors' },
+                ],
+              },
+              {
+                id: 'private_key',
+                name: 'Private Key',
+                type: 'text',
+                optional: true,
+                description: 'If using a custom subdomain, enter your Private Key here.',
+                default_value: '',
+              },
+              {
+                id: 'site_key',
+                name: 'Site Key',
+                type: 'text',
+                optional: true,
+                description: 'If using a custom subdomain, enter your Site Key here.',
+                default_value: '',
+              },
+            ],
+          },
+        ],
       },
-      custom_precheckout_hook: {
-        name: 'Pre-Checkout Webhook',
-        uses_rejection_threshold: false,
-        json: {
-          blocks: [
-            {
-              id: '',
-              parent_id: '',
-              fields: [
-                {
-                  id: 'enabled',
-                  name: 'Enabled',
-                  type: 'checkbox',
-                  default_value: false,
-                },
-                {
-                  id: 'url',
-                  name: 'URL',
-                  type: 'text',
-                  description: 'Url of your Pre-Checkout Hook',
-                  default_value: '',
-                },
-                {
-                  id: 'failure_handling',
-                  name: 'Failure handling',
-                  type: 'select',
-                  description:
-                    'Determines what happens to the checkout submission if your webhook fails to respond correctly.',
-                  default_value: '',
-                  options: [
-                    { name: 'Reject', value: 'reject' },
-                    { name: 'Approve', value: 'approve' },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
+    },
+    custom_precheckout_hook: {
+      name: 'Pre-Checkout Webhook',
+      uses_rejection_threshold: false,
+      json: {
+        blocks: [
+          {
+            id: '',
+            parent_id: '',
+            fields: [
+              {
+                id: 'enabled',
+                name: 'Enabled',
+                type: 'checkbox',
+                default_value: false,
+              },
+              {
+                id: 'url',
+                name: 'URL',
+                type: 'text',
+                description: 'Url of your Pre-Checkout Hook',
+                default_value: '',
+              },
+              {
+                id: 'failure_handling',
+                name: 'Failure handling',
+                type: 'select',
+                description:
+                  'Determines what happens to the checkout submission if your webhook fails to respond correctly.',
+                default_value: '',
+                options: [
+                  { name: 'Reject', value: 'reject' },
+                  { name: 'Approve', value: 'approve' },
+                ],
+              },
+            ],
+          },
+        ],
       },
     },
   };
+
+  for (const type in values) {
+    const fp = fps?.find(fp => fp.type === type);
+    if (fp) values[type].conflict = { type: fp.type, name: fp.description };
+  }
+
+  return { _links: { self: { href: selfURL.toString() } }, values };
 }
diff --git a/src/elements/public/PaymentsApi/api/composers/available_payment_methods.ts b/src/elements/public/PaymentsApi/api/composers/available_payment_methods.ts
index f4e5e95f4..f1bc63019 100644
--- a/src/elements/public/PaymentsApi/api/composers/available_payment_methods.ts
+++ b/src/elements/public/PaymentsApi/api/composers/available_payment_methods.ts
@@ -1,4 +1,4 @@
-import type { AvailablePaymentMethods } from '../types';
+import type { AvailablePaymentMethods, PaymentMethod } from '../types';
 import type { Resource } from '@foxy.io/sdk/core';
 import type { Rels } from '@foxy.io/sdk/backend';
 
@@ -6,6 +6,7 @@ export type Params = {
   hostedPaymentGatewaysHelper: Resource<Rels.HostedPaymentGatewaysHelper>;
   paymentGatewaysHelper: Resource<Rels.PaymentGatewaysHelper>;
   paymentPresetId: string;
+  paymentMethods: PaymentMethod[];
   paymentGateway?: Resource<Rels.PaymentGateway>;
   base: string;
 };
@@ -15,6 +16,7 @@ export function compose(params: Params): AvailablePaymentMethods {
     hostedPaymentGatewaysHelper: hostedGwsHelper,
     paymentGatewaysHelper: gwsHelper,
     paymentPresetId: presetId,
+    paymentMethods: pmds,
     paymentGateway: gw,
     base,
   } = params;
@@ -24,6 +26,8 @@ export function compose(params: Params): AvailablePaymentMethods {
 
   Object.entries(hostedGwsHelper.values).forEach(([type, helper]) => {
     values[type] = helper;
+    const pmd = pmds.find(pm => pm.type === type);
+    if (pmd) values[type].conflict = { type: pmd.type, name: pmd.description };
   });
 
   Object.entries(gwsHelper.values).forEach(([type, helper]) => {
diff --git a/src/elements/public/PaymentsApi/api/handlers/available_fraud_protections.ts b/src/elements/public/PaymentsApi/api/handlers/available_fraud_protections.ts
index 219001f27..ff479ee1d 100644
--- a/src/elements/public/PaymentsApi/api/handlers/available_fraud_protections.ts
+++ b/src/elements/public/PaymentsApi/api/handlers/available_fraud_protections.ts
@@ -1,7 +1,11 @@
+import type { FraudProtection, FraudProtections } from '../types';
+
+import { fetchJson } from '../utils';
 import { compose } from '../composers/available_fraud_protections';
 
 export type Params = {
   request: Request;
+  fetch: Window['fetch'];
 };
 
 /**
@@ -17,7 +21,7 @@ export async function handle(params: Params): Promise<Response> {
   let body: string;
 
   try {
-    const { request } = params;
+    const { request, fetch } = params;
 
     if (request.method !== 'GET') {
       status = 405;
@@ -27,7 +31,27 @@ export async function handle(params: Params): Promise<Response> {
     const pathRegex = /\/payment_presets\/(?<presetId>.+)\/available_fraud_protections/;
     const presetId = pathRegex.exec(new URL(request.url).pathname)!.groups!.presetId;
 
+    const whenFraudProtectionLoaded = (async () => {
+      const result: FraudProtection[] = [];
+
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+        const base = new URL(request.url).origin;
+        const url = new URL(`${base}/payment_presets/${presetId}/fraud_protections`);
+        url.searchParams.set('offset', result.length.toString());
+        url.searchParams.set('limit', '200');
+
+        const json = await fetchJson<FraudProtections>(fetch(url.toString()));
+        result.push(...json._embedded['fx:fraud_protections']);
+
+        if (json._embedded['fx:fraud_protections'].length < 200) break;
+      }
+
+      return result;
+    })();
+
     const output = compose({
+      fraudProtections: await whenFraudProtectionLoaded,
       paymentPresetId: presetId,
       base: new URL(request.url).origin,
     });
diff --git a/src/elements/public/PaymentsApi/api/handlers/available_payment_methods.ts b/src/elements/public/PaymentsApi/api/handlers/available_payment_methods.ts
index 5b344a273..b4c9ef090 100644
--- a/src/elements/public/PaymentsApi/api/handlers/available_payment_methods.ts
+++ b/src/elements/public/PaymentsApi/api/handlers/available_payment_methods.ts
@@ -1,3 +1,4 @@
+import type { PaymentMethod, PaymentMethods } from '../types';
 import type { Resource } from '@foxy.io/sdk/core';
 import type { Rels } from '@foxy.io/sdk/backend';
 
@@ -49,6 +50,26 @@ export async function handle(params: Params): Promise<Response> {
     const whenHostedGwsHelperLoaded = fetchJson<HostedGwsHelper>(fetch(hostedGwsHelperUrl));
     const whenGwsHelperLoaded = fetchJson<GwsHelper>(fetch(gwsHelperUrl));
     const set = await fetchJson<Set>(fetch(getSetUrl(presetId)));
+
+    const whenPaymentMethodsLoaded = (async () => {
+      const result: PaymentMethod[] = [];
+
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+        const base = new URL(request.url).origin;
+        const url = new URL(`${base}/payment_presets/${presetId}/payment_methods`);
+        url.searchParams.set('offset', result.length.toString());
+        url.searchParams.set('limit', '200');
+
+        const json = await fetchJson<PaymentMethods>(fetch(url.toString()));
+        result.push(...json._embedded['fx:payment_methods']);
+
+        if (json._embedded['fx:payment_methods'].length < 200) break;
+      }
+
+      return result;
+    })();
+
     const gwUrl = set._links['fx:payment_gateway']?.href as string | undefined;
     const gw = gwUrl ? await fetchJson<Gw>(fetch(gwUrl)) : undefined;
 
@@ -57,6 +78,7 @@ export async function handle(params: Params): Promise<Response> {
       paymentGatewaysHelper: await whenGwsHelperLoaded,
       paymentPresetId: presetId,
       paymentGateway: gw,
+      paymentMethods: await whenPaymentMethodsLoaded,
       base: new URL(request.url).origin,
     });
 
diff --git a/src/elements/public/PaymentsApi/api/index.ts b/src/elements/public/PaymentsApi/api/index.ts
index e4555e577..f25dc1c4e 100644
--- a/src/elements/public/PaymentsApi/api/index.ts
+++ b/src/elements/public/PaymentsApi/api/index.ts
@@ -51,22 +51,22 @@ export type Params = AvailablePaymentMethodsParams &
 
 export function getHandler(params: Params): Promise<Response> | null {
   const paths = [
-    [/\/payment_presets\/(?<presetId>.+)\/payment_methods\/(?<methodId>.+)/, handlePaymentMethod],
+    [/\/payment_presets\/(?<presetId>.+?)\/payment_methods\/(?<methodId>.+?)/, handlePaymentMethod],
     [
-      /\/payment_presets\/(?<presetId>.+)\/available_fraud_protections/,
+      /\/payment_presets\/(?<presetId>.+?)\/available_fraud_protections/,
       handleAvailableFraudProtections,
     ],
     [
-      /\/payment_presets\/(?<presetId>.+)\/available_payment_methods/,
+      /\/payment_presets\/(?<presetId>.+?)\/available_payment_methods/,
       handleAvailablePaymentMethods,
     ],
     [
-      /\/payment_presets\/(?<presetId>.+)\/fraud_protections\/(?<protectionId>.+)/,
+      /\/payment_presets\/(?<presetId>.+?)\/fraud_protections\/(?<protectionId>.+?)/,
       handleFraudProtection,
     ],
-    [/\/payment_presets\/(?<presetId>.+)\/fraud_protections/, handleFraudProtections],
-    [/\/payment_presets\/(?<presetId>.+)\/payment_methods/, handlePaymentMethods],
-    [/\/payment_presets\/(?<presetId>.+)/, handlePaymentPreset],
+    [/\/payment_presets\/(?<presetId>.+?)\/fraud_protections/, handleFraudProtections],
+    [/\/payment_presets\/(?<presetId>.+?)\/payment_methods/, handlePaymentMethods],
+    [/\/payment_presets\/(?<presetId>.+?)/, handlePaymentPreset],
     [/\/payment_presets/, handlePaymentPresets],
   ] as const;
 
diff --git a/src/elements/public/PaymentsApi/api/types.ts b/src/elements/public/PaymentsApi/api/types.ts
index 6c2dc7bae..52ef03dff 100644
--- a/src/elements/public/PaymentsApi/api/types.ts
+++ b/src/elements/public/PaymentsApi/api/types.ts
@@ -127,6 +127,8 @@ interface AvailableFraudProtectionsRel extends Graph {
     values: {
       [key: string]: {
         name: string;
+        /** If this fraud protection can't be used due to a conflict with another fraud protection, the details about it will be here. */
+        conflict?: { type: string; name: string };
         uses_rejection_threshold: boolean;
         json: null | {
           blocks: {
diff --git a/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.stories.ts b/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.stories.ts
index ac30330d3..00ee73c2f 100644
--- a/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.stories.ts
+++ b/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.stories.ts
@@ -15,9 +15,9 @@ const summary: Summary = {
   localName: 'foxy-payments-api-fraud-protection-form',
   translatable: true,
   configurable: {
-    sections: ['timestamps', 'header'],
+    sections: ['timestamps', 'header', 'general', 'setup'],
     buttons: ['delete', 'create', 'submit', 'undo', 'header:copy-id', 'header:copy-json'],
-    inputs: ['description', 'score-threshold-reject'],
+    inputs: ['general:description', 'setup:score-threshold-reject'],
   },
 };
 
diff --git a/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.test.ts b/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.test.ts
index 13d76f7f5..2094907eb 100644
--- a/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.test.ts
+++ b/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.test.ts
@@ -6,8 +6,8 @@ import './index';
 
 import { PaymentsApiFraudProtectionForm as Form } from './PaymentsApiFraudProtectionForm';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { InternalCheckboxGroupControl } from '../../internal/InternalCheckboxGroupControl/InternalCheckboxGroupControl';
-import { InternalIntegerControl } from '../../internal/InternalIntegerControl/InternalIntegerControl';
+import { InternalSwitchControl } from '../../internal/InternalSwitchControl/InternalSwitchControl';
+import { InternalNumberControl } from '../../internal/InternalNumberControl/InternalNumberControl';
 import { InternalSelectControl } from '../../internal/InternalSelectControl/InternalSelectControl';
 import { InternalTextControl } from '../../internal/InternalTextControl/InternalTextControl';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
@@ -18,6 +18,7 @@ import { getByTag } from '../../../testgen/getByTag';
 import { getByKey } from '../../../testgen/getByKey';
 import { I18n } from '../I18n/I18n';
 import { stub } from 'sinon';
+import { InternalSummaryControl } from '../../internal/InternalSummaryControl/InternalSummaryControl';
 
 describe('PaymentsApiFraudProtectionForm', () => {
   const OriginalResizeObserver = window.ResizeObserver;
@@ -30,14 +31,19 @@ describe('PaymentsApiFraudProtectionForm', () => {
     expect(customElements.get('vaadin-button')).to.exist;
   });
 
-  it('imports and defines foxy-internal-checkbox-group-control', () => {
-    const element = customElements.get('foxy-internal-checkbox-group-control');
-    expect(element).to.equal(InternalCheckboxGroupControl);
+  it('imports and defines foxy-internal-summary-control', () => {
+    const element = customElements.get('foxy-internal-summary-control');
+    expect(element).to.equal(InternalSummaryControl);
   });
 
-  it('imports and defines foxy-internal-integer-control', () => {
-    const element = customElements.get('foxy-internal-integer-control');
-    expect(element).to.equal(InternalIntegerControl);
+  it('imports and defines foxy-internal-switch-control', () => {
+    const element = customElements.get('foxy-internal-switch-control');
+    expect(element).to.equal(InternalSwitchControl);
+  });
+
+  it('imports and defines foxy-internal-number-control', () => {
+    const element = customElements.get('foxy-internal-number-control');
+    expect(element).to.equal(InternalNumberControl);
   });
 
   it('imports and defines foxy-internal-select-control', () => {
@@ -224,6 +230,68 @@ describe('PaymentsApiFraudProtectionForm', () => {
     expect(element.headerSubtitleOptions).to.deep.equal({ id: element.headerCopyIdValue });
   });
 
+  it('renders a general summary control', async () => {
+    const router = createRouter();
+
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-fraud-protection-form
+            href="https://foxy-payments-api.element/payment_presets/0/fraud_protections/0C0"
+          >
+          </foxy-payments-api-fraud-protection-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    await element.requestUpdate();
+    const summary = element.renderRoot.querySelector('[infer="general"]');
+
+    expect(summary).to.exist;
+    expect(summary).to.be.instanceOf(InternalSummaryControl);
+  });
+
+  it('renders a setup summary control', async () => {
+    const router = createRouter();
+
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-fraud-protection-form
+            href="https://foxy-payments-api.element/payment_presets/0/fraud_protections/0C0"
+          >
+          </foxy-payments-api-fraud-protection-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    await element.requestUpdate();
+    const summary = element.renderRoot.querySelector('[infer="setup"]');
+
+    expect(summary).to.exist;
+    expect(summary).to.be.instanceOf(InternalSummaryControl);
+  });
+
   it('renders a fraud protection selector when "type" is not present in form', async () => {
     const availableProtections: AvailableFraudProtections = {
       _links: {
@@ -238,6 +306,7 @@ describe('PaymentsApiFraudProtectionForm', () => {
         google_recaptcha: {
           name: 'Google reCaptcha',
           uses_rejection_threshold: false,
+          conflict: { type: 'google_recaptcha', name: 'Google reCaptcha' },
           json: null,
         },
       },
@@ -246,7 +315,7 @@ describe('PaymentsApiFraudProtectionForm', () => {
     const router = createRouter();
 
     const wrapper = await fixture(html`
-      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+      <div @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}>
         <foxy-payments-api
           payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
           hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
@@ -274,8 +343,13 @@ describe('PaymentsApiFraudProtectionForm', () => {
     `);
 
     const element = wrapper.firstElementChild!.firstElementChild as Form;
-    const listWrapper = (await getByTestId(element, 'select-protection-list')) as HTMLElement;
+    await waitUntil(
+      () => !!element.renderRoot.querySelector('[data-testid="select-protection-list"]'),
+      '',
+      { timeout: 5000 }
+    );
 
+    const listWrapper = (await getByTestId(element, 'select-protection-list')) as HTMLElement;
     await waitUntil(() => !!listWrapper.querySelector('button'), '', { timeout: 5000 });
     const items = listWrapper.querySelectorAll('button');
 
@@ -286,6 +360,8 @@ describe('PaymentsApiFraudProtectionForm', () => {
     const item1Button = items[1] as HTMLButtonElement;
 
     expect(item0Button).to.exist;
+    expect(item0Button).to.not.have.attribute('disabled');
+    expect(item0Button).to.not.have.attribute('title');
     expect(item0Button).to.include.text('Minfraud');
     expect(await getByTag(item0Button, 'img')).to.have.attribute(
       'src',
@@ -293,6 +369,8 @@ describe('PaymentsApiFraudProtectionForm', () => {
     );
 
     expect(item1Button).to.exist;
+    expect(item1Button).to.have.attribute('disabled');
+    expect(item1Button).to.have.attribute('title', 'conflict_message');
     expect(item1Button).to.include.text('Google reCaptcha');
     expect(await getByTag(item1Button, 'img')).to.have.attribute(
       'src',
@@ -307,7 +385,7 @@ describe('PaymentsApiFraudProtectionForm', () => {
     expect(await getByTestId(element, 'select-method-list')).to.not.exist;
   });
 
-  it('renders a checkbox control for a "checkbox" block in json if present', async () => {
+  it('renders a switch control for a "checkbox" block in json if present', async () => {
     const router = createRouter();
 
     const wrapper = await fixture(html`
@@ -354,19 +432,18 @@ describe('PaymentsApiFraudProtectionForm', () => {
     await element.requestUpdate();
 
     const field = element.renderRoot.querySelector(
-      '[infer="json-foo-bar-baz"]'
-    ) as InternalCheckboxGroupControl;
+      '[infer="setup"] [infer="json-foo-bar-baz"]'
+    ) as InternalSwitchControl;
 
     expect(field).to.exist;
-    expect(field).to.be.instanceOf(InternalCheckboxGroupControl);
+    expect(field).to.be.instanceOf(InternalSwitchControl);
     expect(field).to.have.attribute('helper-text', 'Baz Description');
-    expect(field).to.have.attribute('label', '');
-    expect(field).to.have.deep.property('options', [{ label: 'Baz', value: 'checked' }]);
+    expect(field).to.have.attribute('label', 'Baz');
 
     element.edit({ json: JSON.stringify({ foo: { bar: { baz: true } } }) });
-    expect(field.getValue()).to.deep.equal(['checked']);
+    expect(field.getValue()).to.be.true;
 
-    field.setValue([]);
+    field.setValue(false);
     expect(JSON.parse(element.form.json!)).to.have.nested.property('foo.bar.baz', false);
   });
 
@@ -421,12 +498,13 @@ describe('PaymentsApiFraudProtectionForm', () => {
     await element.requestUpdate();
 
     const field = element.renderRoot.querySelector(
-      '[infer="json-foo-bar-baz"]'
+      '[infer="setup"] [infer="json-foo-bar-baz"]'
     ) as InternalSelectControl;
 
     expect(field).to.exist;
     expect(field).to.be.instanceOf(InternalSelectControl);
     expect(field).to.have.attribute('helper-text', 'Baz Description');
+    expect(field).to.have.attribute('layout', 'summary-item');
     expect(field).to.have.attribute('label', 'Baz');
     expect(field).to.have.deep.property('options', [
       { label: 'Field 1', value: 'field_1_value' },
@@ -487,12 +565,13 @@ describe('PaymentsApiFraudProtectionForm', () => {
     await element.requestUpdate();
 
     const field = element.renderRoot.querySelector(
-      '[infer="json-foo-bar-baz"]'
+      '[infer="setup"] [infer="json-foo-bar-baz"]'
     ) as InternalTextControl;
 
     expect(field).to.exist;
     expect(field).to.be.instanceOf(InternalTextControl);
     expect(field).to.have.attribute('placeholder', 'baz_default');
+    expect(field).to.have.attribute('layout', 'summary-item');
     expect(field).to.have.attribute('helper-text', 'Baz Description');
     expect(field).to.have.attribute('label', 'Baz');
 
@@ -527,9 +606,10 @@ describe('PaymentsApiFraudProtectionForm', () => {
 
     const element = wrapper.firstElementChild!.firstElementChild as Form;
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector('[infer="description"]');
+    const control = element.renderRoot.querySelector('[infer="general"] [infer="description"]');
 
     expect(control).to.exist;
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.be.instanceOf(InternalTextControl);
   });
 
@@ -567,7 +647,7 @@ describe('PaymentsApiFraudProtectionForm', () => {
 
     const control = root.querySelector('[infer="score-threshold-reject"]');
     expect(control).to.exist;
-    expect(control).to.be.instanceOf(InternalIntegerControl);
+    expect(control).to.be.instanceOf(InternalNumberControl);
   });
 
   it('renders a Back button clearing "type" on first selection', async () => {
@@ -621,10 +701,7 @@ describe('PaymentsApiFraudProtectionForm', () => {
     element.data = null;
     element.edit({ type: 'minfraud' });
     await element.requestUpdate();
-    const control = (await getByTestId(
-      element,
-      'select-another-button'
-    )) as InternalCheckboxGroupControl;
+    const control = (await getByTestId(element, 'select-another-button')) as InternalSwitchControl;
 
     expect(control).to.exist;
     expect(control).to.be.instanceOf(customElements.get('vaadin-button'));
diff --git a/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.ts b/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.ts
index 4c0a76e4a..eed97201e 100644
--- a/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.ts
+++ b/src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.ts
@@ -1,14 +1,15 @@
 import type { AvailableFraudProtections, FraudProtection } from '../PaymentsApi/api/types';
-import type { Block, Data } from './types';
 import type { PropertyDeclarations } from 'lit-element';
 import type { NucleonElement } from '../NucleonElement/NucleonElement';
 import type { TemplateResult } from 'lit-html';
+import type { Block, Data } from './types';
 import type { NucleonV8N } from '../NucleonElement/types';
 
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from '../../../utils/class-map';
 import { html } from 'lit-html';
 
 import get from 'lodash-es/get';
@@ -115,9 +116,20 @@ export class PaymentsApiFraudProtectionForm extends Base<Data> {
   }
 
   renderBody(): TemplateResult {
-    return this.form.type
+    const loaders = html`
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__availableFraudProtectionsHref)}
+        id=${this.__availableFraudProtectionsLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+    `;
+
+    return html`${this.renderHeader()}${this.form.type
       ? this.__renderFraudProtectionConfig()
-      : this.__renderFraudProtectionSelector();
+      : this.__renderFraudProtectionSelector()}${loaders}`;
   }
 
   private get __availableFraudProtectionsLoader() {
@@ -146,23 +158,21 @@ export class PaymentsApiFraudProtectionForm extends Base<Data> {
   }
 
   private __renderFraudProtectionSelector() {
-    return html`
-      ${this.renderHeader()}
+    const loader = this.__availableFraudProtectionsLoader;
 
-      <div class="grid grid-cols-2 gap-m" data-testid="select-protection-list">
-        ${Object.entries(this.__availableFraudProtections ?? {}).map(([type, helper]) => {
-          return this.__renderFraudProtectionButton({ type, helper } as FraudProtection);
-        })}
-      </div>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__availableFraudProtectionsHref)}
-        id=${this.__availableFraudProtectionsLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
+    return html`
+      ${loader?.data
+        ? html`
+            <div class="grid grid-cols-2 gap-m" data-testid="select-protection-list">
+              ${Object.entries(this.__availableFraudProtections ?? {}).map(([type, helper]) => {
+                return this.__renderFraudProtectionButton({ type, helper } as FraudProtection);
+              })}
+            </div>
+          `
+        : html`
+            <foxy-spinner infer="list-spinner" state=${loader?.in('fail') ? 'error' : 'busy'}>
+            </foxy-spinner>
+          `}
     `;
   }
 
@@ -173,7 +183,14 @@ export class PaymentsApiFraudProtectionForm extends Base<Data> {
 
     return html`
       <button
-        class="relative w-full block text-left p-s rounded bg-contrast-5 overflow-hidden transition-colors hover-bg-contrast-10 focus-outline-none focus-ring-2 focus-ring-primary-50"
+        class=${classMap({
+          'relative w-full block text-left p-s rounded bg-contrast-5 overflow-hidden': true,
+          'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+          'transition-colors hover-bg-contrast-10': !helper.conflict,
+          'cursor-default': !!helper.conflict,
+        })}
+        ?disabled=${!!helper.conflict}
+        title=${ifDefined(helper.conflict ? this.t('conflict_message') : void 0)}
         @click=${() => this.edit({ type, helper })}
       >
         <img
@@ -181,20 +198,29 @@ export class PaymentsApiFraudProtectionForm extends Base<Data> {
           style="transform: translate3d(0, 0, 0)"
           src=${src}
           alt=""
+          ?hidden=${!!helper.conflict}
           @error=${onError}
         />
 
         <figure class="relative flex flex-col gap-m">
           <img
-            class="h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
+            class=${classMap({
+              'h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs': true,
+              'filter grayscale': !!helper.conflict,
+            })}
             src=${src}
             alt=""
             @error=${onError}
           />
 
-          <figcaption class="min-w-0 flex-1 truncate leading-s">
+          <figcaption
+            class=${classMap({
+              'min-w-0 flex-1 truncate leading-s': true,
+              'text-disabled': !!helper.conflict,
+            })}
+          >
             <div class="font-medium">${helper.name}&ZeroWidthSpace;</div>
-            <div class="text-xs text-secondary">${type}</div>
+            <div class="text-xs ${helper.conflict ? '' : 'text-secondary'}">${type}</div>
           </figcaption>
         </figure>
       </button>
@@ -203,15 +229,21 @@ export class PaymentsApiFraudProtectionForm extends Base<Data> {
 
   private __renderFraudProtectionConfig() {
     return html`
-      ${this.renderHeader()}
-      <foxy-internal-text-control infer="description"></foxy-internal-text-control>
-      ${this.form.helper?.uses_rejection_threshold
-        ? html`
-            <foxy-internal-integer-control infer="score-threshold-reject">
-            </foxy-internal-integer-control>
-          `
-        : ''}
-      ${this.form.helper?.json?.blocks.map(block => this.__renderBlock(block))}
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-text-control layout="summary-item" infer="description">
+        </foxy-internal-text-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="setup">
+        ${this.form.helper?.uses_rejection_threshold
+          ? html`
+              <foxy-internal-number-control layout="summary-item" infer="score-threshold-reject">
+              </foxy-internal-number-control>
+            `
+          : ''}
+        ${this.form.helper?.json?.blocks.map(block => this.__renderBlock(block))}
+      </foxy-internal-summary-control>
+
       ${super.renderBody()}
     `;
   }
@@ -252,22 +284,21 @@ export class PaymentsApiFraudProtectionForm extends Base<Data> {
       return html`
         ${field.type === 'checkbox'
           ? html`
-              <foxy-internal-checkbox-group-control
+              <foxy-internal-switch-control
                 helper-text=${field.description ?? ''}
-                label=""
+                label=${field.name}
                 infer=${scope}
-                .options=${[{ label: field.name, value: 'checked' }]}
-                .getValue=${() => (getValue() ? ['checked'] : [])}
-                .setValue=${(newValue: string[]) => setValue(newValue.includes('checked'))}
+                .getValue=${getValue}
+                .setValue=${setValue}
               >
-              </foxy-internal-checkbox-group-control>
+              </foxy-internal-switch-control>
             `
           : field.type === 'select'
           ? html`
               <foxy-internal-select-control
                 helper-text=${field.description ?? ''}
-                placeholder=${field.options?.find(o => o.value === field.default_value)?.name ??
-                this.t('default_additional_field_placeholder')}
+                placeholder=${this.t('default_additional_field_placeholder')}
+                layout="summary-item"
                 label=${field.name}
                 infer=${scope}
                 .options=${options!.map(({ name, value }) => ({ label: name, value }))}
@@ -280,6 +311,7 @@ export class PaymentsApiFraudProtectionForm extends Base<Data> {
               <foxy-internal-text-control
                 helper-text=${field.description ?? ''}
                 placeholder=${field.default_value || this.t('default_additional_field_placeholder')}
+                layout="summary-item"
                 label=${field.name}
                 infer=${scope}
                 .getValue=${getValue}
diff --git a/src/elements/public/PaymentsApiFraudProtectionForm/index.ts b/src/elements/public/PaymentsApiFraudProtectionForm/index.ts
index 8e5914c35..e5fe44e53 100644
--- a/src/elements/public/PaymentsApiFraudProtectionForm/index.ts
+++ b/src/elements/public/PaymentsApiFraudProtectionForm/index.ts
@@ -1,7 +1,8 @@
 import '@vaadin/vaadin-button';
 
-import '../../internal/InternalCheckboxGroupControl/index';
-import '../../internal/InternalIntegerControl/index';
+import '../../internal/InternalSummaryControl/index';
+import '../../internal/InternalSwitchControl/index';
+import '../../internal/InternalNumberControl/index';
 import '../../internal/InternalSelectControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
diff --git a/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.stories.ts b/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.stories.ts
index b2f0367c1..0d8f51fc0 100644
--- a/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.stories.ts
+++ b/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.stories.ts
@@ -50,10 +50,15 @@ export default {
   ],
 };
 
-export const Playground = getStory({ ...summary, code: true });
-export const Empty = getStory(summary);
-export const Error = getStory(summary);
-export const Busy = getStory(summary);
+const ext = `
+  payment-preset="https://foxy-payments-api.element/payment_presets/0"
+  store="https://demo.api/hapi/stores/0"
+`;
+
+export const Playground = getStory({ ...summary, ext, code: true });
+export const Empty = getStory({ ...summary, ext });
+export const Error = getStory({ ...summary, ext });
+export const Busy = getStory({ ...summary, ext });
 
 Empty.args.href = '';
 Error.args.href = 'https://demo.api/virtual/empty?status=404';
diff --git a/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.test.ts b/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.test.ts
index 15ef78ad0..f227676e9 100644
--- a/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.test.ts
+++ b/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.test.ts
@@ -1,23 +1,22 @@
+import type { AvailablePaymentMethods } from '../PaymentsApi/api/types';
 import type { FetchEvent } from '../NucleonElement/FetchEvent';
 
 import '../PaymentsApi/index';
 import './index';
 
 import { PaymentsApiPaymentMethodForm as Form } from './PaymentsApiPaymentMethodForm';
-import { InternalAsyncComboBoxControl } from '../../internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl';
-import { InternalCheckboxGroupControl } from '../../internal/InternalCheckboxGroupControl/InternalCheckboxGroupControl';
-import { InternalRadioGroupControl } from '../../internal/InternalRadioGroupControl/InternalRadioGroupControl';
-import { InternalSelectControl } from '../../internal/InternalSelectControl/InternalSelectControl';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { InternalSummaryControl } from '../../internal/InternalSummaryControl/InternalSummaryControl';
+import { InternalSwitchControl } from '../../internal/InternalSwitchControl/InternalSwitchControl';
+import { InternalSelectControl } from '../../internal/InternalSelectControl/InternalSelectControl';
 import { InternalTextControl } from '../../internal/InternalTextControl/InternalTextControl';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { createRouter } from '../../../server/index';
 import { getByTestId } from '../../../testgen/getByTestId';
 import { getByKey } from '../../../testgen/getByKey';
-import { I18n } from '../I18n/I18n';
-import { AvailablePaymentMethods } from '../PaymentsApi/api/types';
 import { getByTag } from '../../../testgen/getByTag';
+import { I18n } from '../I18n/I18n';
 import { stub } from 'sinon';
 
 describe('PaymentsApiPaymentMethodForm', () => {
@@ -31,23 +30,14 @@ describe('PaymentsApiPaymentMethodForm', () => {
     expect(customElements.get('vaadin-button')).to.exist;
   });
 
-  it('imports and defines vaadin-tabs', () => {
-    expect(customElements.get('vaadin-tabs')).to.exist;
-  });
-
-  it('imports and defines foxy-internal-async-combo-box-control', () => {
-    const element = customElements.get('foxy-internal-async-combo-box-control');
-    expect(element).to.equal(InternalAsyncComboBoxControl);
-  });
-
-  it('imports and defines foxy-internal-checkbox-group-control', () => {
-    const element = customElements.get('foxy-internal-checkbox-group-control');
-    expect(element).to.equal(InternalCheckboxGroupControl);
+  it('imports and defines foxy-internal-switch-control', () => {
+    const element = customElements.get('foxy-internal-switch-control');
+    expect(element).to.equal(InternalSwitchControl);
   });
 
-  it('imports and defines foxy-internal-radio-group-control', () => {
-    const element = customElements.get('foxy-internal-radio-group-control');
-    expect(element).to.equal(InternalRadioGroupControl);
+  it('imports and defines foxy-internal-summary-control', () => {
+    const element = customElements.get('foxy-internal-summary-control');
+    expect(element).to.equal(InternalSummaryControl);
   });
 
   it('imports and defines foxy-internal-select-control', () => {
@@ -89,12 +79,24 @@ describe('PaymentsApiPaymentMethodForm', () => {
     expect(new Form()).to.have.property('ns', 'payments-api-payment-method-form');
   });
 
+  it('has a reactive property "paymentPreset"', () => {
+    expect(new Form()).to.have.property('paymentPreset', null);
+    expect(Form).to.have.deep.nested.property('properties.paymentPreset', {
+      attribute: 'payment-preset',
+    });
+  });
+
   it('has a reactive property "getImageSrc"', () => {
     expect(new Form()).to.have.property('getImageSrc', null);
     expect(Form).to.have.nested.property('properties.getImageSrc');
     expect(Form).to.have.nested.property('properties.getImageSrc.attribute', false);
   });
 
+  it('has a reactive property "store"', () => {
+    expect(new Form()).to.have.property('store', null);
+    expect(Form).to.have.deep.nested.property('properties.store', {});
+  });
+
   it('produces the description:v8n_too_long error if description is longer than 100 characters', () => {
     const form = new Form();
 
@@ -118,7 +120,9 @@ describe('PaymentsApiPaymentMethodForm', () => {
   it('produces the additional-fields:v8n_invalid error if some of the required additional fields are empty', async () => {
     const availableMethods: AvailablePaymentMethods = {
       _links: {
-        self: { href: '' },
+        self: {
+          href: 'https://foxy-payments-api.element/payment_presets/0/available_payment_methods',
+        },
       },
       values: {
         foo: {
@@ -170,7 +174,9 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
             parent="https://foxy-payments-api.element/payment_presets/0/payment_methods"
+            store="https://demo.api/hapi/stores/0"
             @fetch=${(evt: FetchEvent) => {
               if (evt.request.url.endsWith('/payment_presets/0/available_payment_methods')) {
                 evt.preventDefault();
@@ -316,7 +322,9 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
             parent="https://foxy-payments-api.element/payment_presets/0/payment_methods"
+            store="https://demo.api/hapi/stores/0"
             .getImageSrc=${(type: string) => `https://example.com?type=${type}`}
             @fetch=${(evt: FetchEvent) => {
               if (evt.request.url.endsWith('/payment_presets/0/available_payment_methods')) {
@@ -456,7 +464,9 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
             parent="https://foxy-payments-api.element/payment_presets/0/payment_methods"
+            store="https://demo.api/hapi/stores/0"
             .getImageSrc=${(type: string) => `https://example.com?type=${type}`}
             @fetch=${(evt: FetchEvent) => {
               if (evt.request.url.endsWith('/payment_presets/0/available_payment_methods')) {
@@ -503,7 +513,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
     expect(group1Item1Button).to.not.exist;
   });
 
-  it('renders tabs for live and test credentials', async () => {
+  it('renders a temporary warning for oauth-based payment gateways', async () => {
     const router = createRouter();
 
     const wrapper = await fixture(html`
@@ -518,6 +528,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -528,32 +540,28 @@ describe('PaymentsApiPaymentMethodForm', () => {
     const element = wrapper.firstElementChild!.firstElementChild as Form;
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
 
-    const tabs = (await getByTag(element, 'vaadin-tabs')) as HTMLElement;
-    const tab1 = tabs.querySelector('vaadin-tab:nth-of-type(1)') as HTMLElement;
-    const tab1Label = tab1.querySelector('foxy-i18n') as HTMLElement;
-    const tab2 = tabs.querySelector('vaadin-tab:nth-of-type(2)') as HTMLElement;
-    const tab2Label = tab2.querySelector('foxy-i18n') as HTMLElement;
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
-
-    expect(tabs.querySelectorAll('vaadin-tab')).to.have.length(2);
-    expect(tab1Label).to.have.attribute('infer', '');
-    expect(tab1Label).to.have.attribute('key', 'tab_live');
-    expect(tab2Label).to.have.attribute('infer', '');
-    expect(tab2Label).to.have.attribute('key', 'tab_test');
-
-    tabs.setAttribute('selected', '0');
-    tabs.dispatchEvent(new CustomEvent('selected-changed'));
-    await element.requestUpdate();
-
-    expect(tabContent.style.getPropertyValue('--tw-translate-x').trim()).to.equal('0');
+    const oauthGateways = [
+      'stripe_connect',
+      'square_up',
+      'quickbook_payments',
+      'amazon_mws',
+      'paypal_platform',
+    ];
+
+    for (const type of oauthGateways) {
+      element.edit({ type });
+      await element.requestUpdate();
+
+      const warning = element.renderRoot.querySelector('[key="no_oauth_support_message"]');
+      expect(warning).to.exist;
+      expect(warning).to.have.property('localName', 'foxy-i18n');
+      expect(warning).to.have.attribute('infer', '');
+    }
 
-    tabs.setAttribute('selected', '1');
-    tabs.dispatchEvent(new CustomEvent('selected-changed'));
+    element.edit({ type: 'any_other_gateway' });
     await element.requestUpdate();
-
-    expect(tabContent.style.getPropertyValue('--tw-translate-x').trim()).to.equal(
-      'calc(-50% - (var(--lumo-space-m) / 2))'
-    );
+    const warning = element.renderRoot.querySelector('[key="no_oauth_support_message"]');
+    expect(warning).to.not.exist;
   });
 
   it('renders a text control for live and test account id if applicable', async () => {
@@ -571,6 +579,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -582,18 +592,19 @@ describe('PaymentsApiPaymentMethodForm', () => {
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
 
     element.edit({ helper: { ...element.data!.helper, id_description: 'Test ID Description' } });
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
+    await element.requestUpdate();
 
     for (let index = 0; index < 2; ++index) {
       const type = index === 0 ? 'live' : 'test';
       const prefix = index === 0 ? '' : `${type}-`;
-      const tabPanel = tabContent.children[index] as HTMLElement;
+      const tabPanel = element.renderRoot.querySelector(`[infer="${type}-group"]`) as HTMLElement;
       const field = tabPanel.querySelector(`[infer="${prefix}account-id"]`);
 
       expect(field).to.exist;
       expect(field).to.be.instanceOf(InternalTextControl);
       expect(field).to.have.attribute('placeholder', 'default_additional_field_placeholder');
       expect(field).to.have.attribute('helper-text', '');
+      expect(field).to.have.attribute('layout', 'summary-item');
       expect(field).to.have.attribute('label', element.form.helper!.id_description);
     }
 
@@ -603,7 +614,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
     for (let index = 0; index < 2; ++index) {
       const type = index === 0 ? 'live' : 'test';
       const prefix = index === 0 ? '' : `${type}-`;
-      const tabPanel = tabContent.children[index] as HTMLElement;
+      const tabPanel = element.renderRoot.querySelector(`[infer="${type}-group"]`) as HTMLElement;
       const field = tabPanel.querySelector(`[infer="${prefix}account-id"]`);
 
       expect(field).to.not.exist;
@@ -625,6 +636,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -642,18 +655,19 @@ describe('PaymentsApiPaymentMethodForm', () => {
       },
     });
 
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
+    await element.requestUpdate();
 
     for (let index = 0; index < 2; ++index) {
       const type = index === 0 ? 'live' : 'test';
       const prefix = index === 0 ? '' : `${type}-`;
-      const tabPanel = tabContent.children[index] as HTMLElement;
+      const tabPanel = element.renderRoot.querySelector(`[infer="${type}-group"]`) as HTMLElement;
       const field = tabPanel.querySelector(`[infer="${prefix}third-party-key"]`);
 
       expect(field).to.exist;
       expect(field).to.be.instanceOf(InternalTextControl);
       expect(field).to.have.attribute('placeholder', 'default_additional_field_placeholder');
       expect(field).to.have.attribute('helper-text', '');
+      expect(field).to.have.attribute('layout', 'summary-item');
       expect(field).to.have.attribute('label', element.form.helper!.third_party_key_description);
     }
 
@@ -663,7 +677,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
     for (let index = 0; index < 2; ++index) {
       const type = index === 0 ? 'live' : 'test';
       const prefix = index === 0 ? '' : `${type}-`;
-      const tabPanel = tabContent.children[index] as HTMLElement;
+      const tabPanel = element.renderRoot.querySelector(`[infer="${type}-group"]`) as HTMLElement;
       const field = tabPanel.querySelector(`[infer="${prefix}third-party-key"]`);
 
       expect(field).to.not.exist;
@@ -685,6 +699,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -696,18 +712,19 @@ describe('PaymentsApiPaymentMethodForm', () => {
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
 
     element.edit({ helper: { ...element.data!.helper, key_description: 'Test key description' } });
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
+    await element.requestUpdate();
 
     for (let index = 0; index < 2; ++index) {
       const type = index === 0 ? 'live' : 'test';
       const prefix = index === 0 ? '' : `${type}-`;
-      const tabPanel = tabContent.children[index] as HTMLElement;
+      const tabPanel = element.renderRoot.querySelector(`[infer="${type}-group"]`) as HTMLElement;
       const field = tabPanel.querySelector(`[infer="${prefix}account-key"]`);
 
       expect(field).to.exist;
       expect(field).to.be.instanceOf(InternalTextControl);
       expect(field).to.have.attribute('placeholder', 'default_additional_field_placeholder');
       expect(field).to.have.attribute('helper-text', '');
+      expect(field).to.have.attribute('layout', 'summary-item');
       expect(field).to.have.attribute('label', element.form.helper!.key_description);
     }
 
@@ -717,14 +734,14 @@ describe('PaymentsApiPaymentMethodForm', () => {
     for (let index = 0; index < 2; ++index) {
       const type = index === 0 ? 'live' : 'test';
       const prefix = index === 0 ? '' : `${type}-`;
-      const tabPanel = tabContent.children[index] as HTMLElement;
+      const tabPanel = element.renderRoot.querySelector(`[infer="${type}-group"]`) as HTMLElement;
       const field = tabPanel.querySelector(`[infer="${prefix}account-key"]`);
 
       expect(field).to.not.exist;
     }
   });
 
-  it('renders a checkbox control for a live "checkbox" block in additional fields if present', async () => {
+  it('renders a switch control for a live "checkbox" block in additional fields if present', async () => {
     const router = createRouter();
 
     const wrapper = await fixture(html`
@@ -739,6 +756,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -769,27 +788,26 @@ describe('PaymentsApiPaymentMethodForm', () => {
     };
 
     element.data = { ...element.data! };
+    await element.requestUpdate();
 
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
-    const tabPanel = tabContent.children[0] as HTMLElement;
+    const tabPanel = element.renderRoot.querySelector('[infer="live-group"]') as HTMLElement;
     const field = tabPanel.querySelector(
       '[infer="additional-fields-baz"]'
-    ) as InternalCheckboxGroupControl;
+    ) as InternalSwitchControl;
 
     expect(field).to.exist;
-    expect(field).to.be.instanceOf(InternalCheckboxGroupControl);
+    expect(field).to.be.instanceOf(InternalSwitchControl);
     expect(field).to.have.attribute('helper-text', 'Baz Description');
-    expect(field).to.have.attribute('label', '');
-    expect(field).to.have.deep.property('options', [{ label: 'Baz', value: 'checked' }]);
+    expect(field).to.have.attribute('label', 'Baz');
 
     element.edit({ additional_fields: JSON.stringify({ baz: true }) });
-    expect(field.getValue()).to.deep.equal(['checked']);
+    expect(field.getValue()).to.equal(true);
 
-    field.setValue([]);
+    field.setValue(false);
     expect(JSON.parse(element.form.additional_fields!)).to.have.property('baz', false);
   });
 
-  it('renders a checkbox control for a test "checkbox" block in additional fields if present', async () => {
+  it('renders a switch control for a test "checkbox" block in additional fields if present', async () => {
     const router = createRouter();
 
     const wrapper = await fixture(html`
@@ -804,6 +822,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -834,23 +854,22 @@ describe('PaymentsApiPaymentMethodForm', () => {
     };
 
     element.data = { ...element.data! };
+    await element.requestUpdate();
 
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
-    const tabPanel = tabContent.children[1] as HTMLElement;
+    const tabPanel = element.renderRoot.querySelector('[infer="test-group"]') as HTMLElement;
     const field = tabPanel.querySelector(
       '[infer="additional-fields-baz"]'
-    ) as InternalCheckboxGroupControl;
+    ) as InternalSwitchControl;
 
     expect(field).to.exist;
-    expect(field).to.be.instanceOf(InternalCheckboxGroupControl);
+    expect(field).to.be.instanceOf(InternalSwitchControl);
     expect(field).to.have.attribute('helper-text', 'Baz Description');
-    expect(field).to.have.attribute('label', '');
-    expect(field).to.have.deep.property('options', [{ label: 'Baz', value: 'checked' }]);
+    expect(field).to.have.attribute('label', 'Baz');
 
     element.edit({ additional_fields: JSON.stringify({ baz: true }) });
-    expect(field.getValue()).to.deep.equal(['checked']);
+    expect(field.getValue()).to.equal(true);
 
-    field.setValue([]);
+    field.setValue(false);
     expect(JSON.parse(element.form.additional_fields!)).to.have.nested.property('baz', false);
   });
 
@@ -869,6 +888,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -903,9 +924,9 @@ describe('PaymentsApiPaymentMethodForm', () => {
     };
 
     element.data = { ...element.data! };
+    await element.requestUpdate();
 
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
-    const tabPanel = tabContent.children[0] as HTMLElement;
+    const tabPanel = element.renderRoot.querySelector('[infer="live-group"]') as HTMLElement;
     const field = tabPanel.querySelector(
       '[infer="additional-fields-baz"]'
     ) as InternalSelectControl;
@@ -913,6 +934,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
     expect(field).to.exist;
     expect(field).to.be.instanceOf(InternalSelectControl);
     expect(field).to.have.attribute('helper-text', 'Baz Description');
+    expect(field).to.have.attribute('layout', 'summary-item');
     expect(field).to.have.attribute('label', 'Baz');
     expect(field).to.have.deep.property('options', [
       { label: 'Field 1', value: 'field_1_value' },
@@ -941,6 +963,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -975,9 +999,9 @@ describe('PaymentsApiPaymentMethodForm', () => {
     };
 
     element.data = { ...element.data! };
+    await element.requestUpdate();
 
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
-    const tabPanel = tabContent.children[1] as HTMLElement;
+    const tabPanel = element.renderRoot.querySelector('[infer="test-group"]') as HTMLElement;
     const field = tabPanel.querySelector(
       '[infer="additional-fields-baz"]'
     ) as InternalSelectControl;
@@ -985,6 +1009,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
     expect(field).to.exist;
     expect(field).to.be.instanceOf(InternalSelectControl);
     expect(field).to.have.attribute('helper-text', 'Baz Description');
+    expect(field).to.have.attribute('layout', 'summary-item');
     expect(field).to.have.attribute('label', 'Baz');
     expect(field).to.have.deep.property('options', [
       { label: 'Field 1', value: 'field_1_value' },
@@ -998,6 +1023,116 @@ describe('PaymentsApiPaymentMethodForm', () => {
     expect(JSON.parse(element.form.additional_fields!)).to.have.property('baz', 'field_2_value');
   });
 
+  it('does not render a hidden live block in additional fields if present', async () => {
+    const router = createRouter();
+
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
+            href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
+          >
+          </foxy-payments-api-payment-method-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+
+    element.data!.helper.additional_fields = {
+      blocks: [
+        {
+          id: 'bar',
+          is_live: true,
+          parent_id: 'foo',
+          fields: [
+            {
+              id: 'baz',
+              name: 'Baz',
+              type: 'hidden',
+              description: 'Baz Description',
+              default_value: 'baz_default',
+            },
+          ],
+        },
+      ],
+    };
+
+    element.data = { ...element.data! };
+    await element.requestUpdate();
+
+    const tabPanel = element.renderRoot.querySelector('[infer="live-group"]') as HTMLElement;
+    const field = tabPanel.querySelector('[infer="additional-fields-baz"]') as InternalTextControl;
+
+    expect(field).to.not.exist;
+  });
+
+  it('does not render a hidden test block in additional fields if present', async () => {
+    const router = createRouter();
+
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
+            href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
+          >
+          </foxy-payments-api-payment-method-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+
+    element.data!.helper.additional_fields = {
+      blocks: [
+        {
+          id: 'bar',
+          is_live: false,
+          parent_id: 'foo',
+          fields: [
+            {
+              id: 'baz',
+              name: 'Baz',
+              type: 'hidden',
+              description: 'Baz Description',
+              default_value: 'baz_default',
+            },
+          ],
+        },
+      ],
+    };
+
+    element.data = { ...element.data! };
+    await element.requestUpdate();
+
+    const tabPanel = element.renderRoot.querySelector('[infer="test-group"]') as HTMLElement;
+    const field = tabPanel.querySelector('[infer="additional-fields-baz"]') as InternalTextControl;
+
+    expect(field).to.not.exist;
+  });
+
   it('renders a text control for any other live block in additional fields if present', async () => {
     const router = createRouter();
 
@@ -1013,6 +1148,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -1043,15 +1180,16 @@ describe('PaymentsApiPaymentMethodForm', () => {
     };
 
     element.data = { ...element.data! };
+    await element.requestUpdate();
 
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
-    const tabPanel = tabContent.children[0] as HTMLElement;
+    const tabPanel = element.renderRoot.querySelector('[infer="live-group"]') as HTMLElement;
     const field = tabPanel.querySelector('[infer="additional-fields-baz"]') as InternalTextControl;
 
     expect(field).to.exist;
     expect(field).to.be.instanceOf(InternalTextControl);
     expect(field).to.have.attribute('placeholder', 'baz_default');
     expect(field).to.have.attribute('helper-text', 'Baz Description');
+    expect(field).to.have.attribute('layout', 'summary-item');
     expect(field).to.have.attribute('label', 'Baz');
 
     element.edit({ additional_fields: JSON.stringify({ baz: 'test_value' }) });
@@ -1076,6 +1214,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -1106,15 +1246,16 @@ describe('PaymentsApiPaymentMethodForm', () => {
     };
 
     element.data = { ...element.data! };
+    await element.requestUpdate();
 
-    const tabContent = (await getByTestId(element, 'tab-content')) as HTMLElement;
-    const tabPanel = tabContent.children[1] as HTMLElement;
+    const tabPanel = element.renderRoot.querySelector('[infer="test-group"]') as HTMLElement;
     const field = tabPanel.querySelector('[infer="additional-fields-baz"]') as InternalTextControl;
 
     expect(field).to.exist;
     expect(field).to.be.instanceOf(InternalTextControl);
     expect(field).to.have.attribute('placeholder', 'baz_default');
     expect(field).to.have.attribute('helper-text', 'Baz Description');
+    expect(field).to.have.attribute('layout', 'summary-item');
     expect(field).to.have.attribute('label', 'Baz');
 
     element.edit({ additional_fields: JSON.stringify({ baz: 'test_value' }) });
@@ -1139,6 +1280,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -1152,9 +1295,10 @@ describe('PaymentsApiPaymentMethodForm', () => {
 
     expect(control).to.exist;
     expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
   });
 
-  it('renders a radio group control for toggling 3DS on and off if supported', async () => {
+  it('renders a select control for toggling 3DS on and off if supported', async () => {
     const router = createRouter();
 
     const wrapper = await fixture(html`
@@ -1169,6 +1313,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -1190,10 +1336,11 @@ describe('PaymentsApiPaymentMethodForm', () => {
     await element.requestUpdate();
     const control = element.renderRoot.querySelector(
       '[infer="three-d-secure-toggle"]'
-    ) as InternalRadioGroupControl;
+    ) as InternalSelectControl;
 
     expect(control).to.exist;
-    expect(control).to.be.instanceOf(InternalRadioGroupControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.be.instanceOf(InternalSelectControl);
     expect(control).to.have.deep.property('options', [
       { value: 'off', label: 'option_off' },
       { value: 'all_cards', label: 'option_all_cards' },
@@ -1241,7 +1388,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
     );
   });
 
-  it('renders a checkbox control for requiring valid 3DS response if applicable', async () => {
+  it('renders a switch control for requiring valid 3DS response if applicable', async () => {
     const router = createRouter();
 
     const wrapper = await fixture(html`
@@ -1256,6 +1403,8 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
           >
           </foxy-payments-api-payment-method-form>
@@ -1279,46 +1428,43 @@ describe('PaymentsApiPaymentMethodForm', () => {
     await element.requestUpdate();
     const control = element.renderRoot.querySelector(
       '[infer="three-d-secure-response"]'
-    ) as InternalCheckboxGroupControl;
+    ) as InternalSwitchControl;
 
     expect(control).to.exist;
-    expect(control).to.be.instanceOf(InternalCheckboxGroupControl);
-    expect(control).to.have.deep.property('options', [
-      { value: 'valid_only', label: 'option_valid_only' },
-    ]);
+    expect(control).to.be.instanceOf(InternalSwitchControl);
 
     element.edit({ config_3d_secure: 'all_cards' });
-    expect(control.getValue()).to.deep.equal([]);
+    expect(control.getValue()).to.equal(false);
 
     element.edit({ config_3d_secure: 'all_cards_require_valid_response' });
-    expect(control.getValue()).to.deep.equal(['valid_only']);
+    expect(control.getValue()).to.equal(true);
 
     element.edit({ config_3d_secure: 'maestro_only' });
-    expect(control.getValue()).to.deep.equal([]);
+    expect(control.getValue()).to.equal(false);
 
     element.edit({ config_3d_secure: 'maestro_only_require_valid_response' });
-    expect(control.getValue()).to.deep.equal(['valid_only']);
+    expect(control.getValue()).to.equal(true);
 
     element.edit({ config_3d_secure: 'all_cards' });
-    control.setValue(['valid_only']);
+    control.setValue(true);
     expect(element).to.have.nested.property(
       'form.config_3d_secure',
       'all_cards_require_valid_response'
     );
 
     element.edit({ config_3d_secure: 'all_cards' });
-    control.setValue([]);
+    control.setValue(false);
     expect(element).to.have.nested.property('form.config_3d_secure', 'all_cards');
 
     element.edit({ config_3d_secure: 'maestro_only' });
-    control.setValue(['valid_only']);
+    control.setValue(true);
     expect(element).to.have.nested.property(
       'form.config_3d_secure',
       'maestro_only_require_valid_response'
     );
 
     element.edit({ config_3d_secure: 'maestro_only' });
-    control.setValue([]);
+    control.setValue(false);
     expect(element).to.have.nested.property('form.config_3d_secure', 'maestro_only');
   });
 
@@ -1358,7 +1504,9 @@ describe('PaymentsApiPaymentMethodForm', () => {
           payment-gateways-url="https://demo.api/hapi/payment_gateways"
         >
           <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
             parent="https://foxy-payments-api.element/payment_presets/0/payment_methods"
+            store="https://demo.api/hapi/stores/0"
             href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
             @fetch=${(evt: FetchEvent) => {
               if (evt.request.url.endsWith('/payment_presets/0/available_payment_methods')) {
@@ -1379,10 +1527,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
     element.data = null;
     element.edit({ type: 'foo' });
     await element.requestUpdate();
-    const control = (await getByTestId(
-      element,
-      'select-another-button'
-    )) as InternalCheckboxGroupControl;
+    const control = (await getByTestId(element, 'select-another-button')) as InternalSwitchControl;
 
     expect(control).to.exist;
     expect(control).to.be.instanceOf(customElements.get('vaadin-button'));
@@ -1397,4 +1542,149 @@ describe('PaymentsApiPaymentMethodForm', () => {
     expect(element).to.not.have.nested.property('form.type');
     expect(element.renderRoot.querySelector('[infer="select-another-button"]')).to.not.exist;
   });
+
+  it('renders a warning for live setup if store is inactive', async () => {
+    const router = createRouter();
+
+    await router.handleRequest(
+      new Request('https://demo.api/hapi/stores/0', {
+        method: 'PATCH',
+        body: JSON.stringify({ is_active: false }),
+      })
+    )?.handlerPromise;
+
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            store="https://demo.api/hapi/stores/0"
+            href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
+          >
+          </foxy-payments-api-payment-method-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+
+    const liveGroup = element.renderRoot.querySelector('[infer="live-group"]') as HTMLElement;
+    const message = liveGroup.querySelector('[key="inactive_message"]') as HTMLElement;
+
+    expect(liveGroup.children).to.have.lengthOf(1);
+    expect(message).to.exist;
+    expect(message).to.be.instanceOf(I18n);
+    expect(message).to.have.attribute('infer', '');
+  });
+
+  it('renders a hint showing which config is currently active (test is active)', async () => {
+    const router = createRouter();
+
+    await router.handleRequest(
+      new Request('https://demo.api/hapi/payment_method_sets/0', {
+        method: 'PATCH',
+        body: JSON.stringify({ is_live: false }),
+      })
+    )?.handlerPromise;
+
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            parent="https://foxy-payments-api.element/payment_presets/0/payment_methods"
+            store="https://demo.api/hapi/stores/0"
+            href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
+          >
+          </foxy-payments-api-payment-method-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    await waitUntil(
+      () => {
+        const nucleons = element.renderRoot.querySelectorAll<NucleonElement<any>>('foxy-nucleon');
+        return [...nucleons].every(nucleon => !!nucleon.data);
+      },
+      '',
+      { timeout: 5000 }
+    );
+
+    await element.requestUpdate();
+    const liveGroup = element.renderRoot.querySelector('[infer="live-group"]') as HTMLElement;
+    const testGroup = element.renderRoot.querySelector('[infer="test-group"]') as HTMLElement;
+
+    expect(liveGroup).to.have.attribute('helper-text', 'live-group.helper_text_inactive');
+    expect(testGroup).to.not.have.attribute('helper-text');
+  });
+
+  it('renders a hint showing which config is currently active (live is active)', async () => {
+    const router = createRouter();
+
+    await router.handleRequest(
+      new Request('https://demo.api/hapi/payment_method_sets/0', {
+        method: 'PATCH',
+        body: JSON.stringify({ is_live: true }),
+      })
+    )?.handlerPromise;
+
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-method-form
+            payment-preset="https://foxy-payments-api.element/payment_presets/0"
+            parent="https://foxy-payments-api.element/payment_presets/0/payment_methods"
+            store="https://demo.api/hapi/stores/0"
+            href="https://foxy-payments-api.element/payment_presets/0/payment_methods/R0"
+          >
+          </foxy-payments-api-payment-method-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    await waitUntil(
+      () => {
+        const nucleons = element.renderRoot.querySelectorAll<NucleonElement<any>>('foxy-nucleon');
+        return [...nucleons].every(nucleon => !!nucleon.data);
+      },
+      '',
+      { timeout: 5000 }
+    );
+
+    await element.requestUpdate();
+    const liveGroup = element.renderRoot.querySelector('[infer="live-group"]') as HTMLElement;
+    const testGroup = element.renderRoot.querySelector('[infer="test-group"]') as HTMLElement;
+
+    expect(testGroup).to.have.attribute('helper-text', 'test-group.helper_text_inactive');
+    expect(liveGroup).to.not.have.attribute('helper-text');
+  });
 });
diff --git a/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.ts b/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.ts
index 56683ccd5..7d671703d 100644
--- a/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.ts
+++ b/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.ts
@@ -1,17 +1,18 @@
-import type { AvailablePaymentMethods } from '../PaymentsApi/api/types';
+import type { AvailablePaymentMethods, PaymentPreset } from '../PaymentsApi/api/types';
 import type { Block, Data } from './types';
 import type { PropertyDeclarations } from 'lit-element';
 import type { NucleonElement } from '../NucleonElement/NucleonElement';
 import type { TemplateResult } from 'lit-html';
-import type { TabsElement } from '@vaadin/vaadin-tabs';
 import type { NucleonV8N } from '../NucleonElement/types';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
 
 import { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { html, svg } from 'lit-html';
 import { classMap } from '../../../utils/class-map';
-import { html } from 'lit-html';
 
 import has from 'lodash-es/has';
 import get from 'lodash-es/get';
@@ -44,8 +45,9 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
-      __tab: { attribute: false },
+      paymentPreset: { attribute: 'payment-preset' },
       getImageSrc: { attribute: false },
+      store: {},
     };
   }
 
@@ -83,30 +85,33 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
     ];
   }
 
+  /** URL of the linked `fx:payment_preset` resource from the virtual Payments API. */
+  paymentPreset: string | null = null;
+
   /** A function that returns a URL of a payment method icon based on the given type. */
   getImageSrc: ((type: string) => string) | null = null;
 
+  /** URL of the linked `fx:store` resource. */
+  store: string | null = null;
+
   private readonly __availablePaymentMethodsLoaderId = 'availablePaymentMethodsLoader';
 
+  private readonly __paymentPresetLoaderId = 'paymentPresetLoader';
+
+  private readonly __storeLoaderId = 'storeLoader';
+
   private readonly __threeDSecureResponseGetValue = () => {
-    return this.form.config_3d_secure?.endsWith('require_valid_response') ? ['valid_only'] : [];
+    return this.form.config_3d_secure?.endsWith('require_valid_response');
   };
 
-  private readonly __threeDSecureResponseSetValue = (newValue: string[]) => {
-    const postfix = newValue.includes('valid_only') ? '_require_valid_response' : '';
-
+  private readonly __threeDSecureResponseSetValue = (newValue: boolean) => {
+    const postfix = newValue ? '_require_valid_response' : '';
     const config = this.form.config_3d_secure;
     const type = config?.startsWith('all_cards') ? 'all_cards' : 'maestro_only';
 
-    this.edit({
-      config_3d_secure: `${type}${postfix}` as Data['config_3d_secure'],
-    });
+    this.edit({ config_3d_secure: `${type}${postfix}` as Data['config_3d_secure'] });
   };
 
-  private readonly __threeDSecureResponseOptions = [
-    { value: 'valid_only', label: 'option_valid_only' },
-  ];
-
   private readonly __threeDSecureToggleGetValue = () => {
     const config = this.form.config_3d_secure;
 
@@ -138,8 +143,6 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
     { value: 'maestro_only', label: 'option_maestro_only' },
   ];
 
-  private __tab = 0;
-
   get hiddenSelector(): BooleanSelector {
     return new BooleanSelector(`header:copy-json ${super.hiddenSelector}`.trimEnd());
   }
@@ -191,20 +194,40 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
   }
 
   renderBody(): TemplateResult {
-    const paymentMethodsLoader = html`
+    const paymentPreset = this.__paymentPresetLoader?.data;
+
+    const loaders = html`
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined(this.__availablePaymentMethodsHref)}
+        href=${ifDefined(paymentPreset?._links['fx:available_payment_methods'].href)}
         id=${this.__availablePaymentMethodsLoaderId}
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.store)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.paymentPreset)}
+        id=${this.__paymentPresetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
     `;
 
     return html`${this.renderHeader()}${this.form.type
       ? this.__renderPaymentMethodConfig()
-      : this.__renderPaymentMethodSelector()}${paymentMethodsLoader}`;
+      : this.__renderPaymentMethodSelector()}${loaders}`;
   }
 
   private get __groupedAvailablePaymentMethods() {
@@ -233,26 +256,20 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
     return this.renderRoot.querySelector<Loader>(`#${this.__availablePaymentMethodsLoaderId}`);
   }
 
-  private get __availablePaymentMethodsHref() {
-    try {
-      const presetIdRegex = /\/payment_presets\/(?<presetId>.+)\//;
-      const pathname = new URL(this.href || this.parent).pathname;
-      const presetId = presetIdRegex.exec(pathname)!.groups!.presetId;
-      const url = new URL(
-        `/payment_presets/${presetId}/available_payment_methods`,
-        this.href || this.parent
-      );
-
-      return url.toString();
-    } catch {
-      // ignore
-    }
-  }
-
   private get __availablePaymentMethods() {
     return this.__availablePaymentMethodsLoader?.data?.values;
   }
 
+  private get __paymentPresetLoader() {
+    type Loader = NucleonElement<PaymentPreset>;
+    return this.renderRoot.querySelector<Loader>(`#${this.__paymentPresetLoaderId}`);
+  }
+
+  private get __storeLoader() {
+    type Loader = NucleonElement<Resource<Rels.Store>>;
+    return this.renderRoot.querySelector<Loader>(`#${this.__storeLoaderId}`);
+  }
+
   private get __liveBlocks() {
     return this.form.helper?.additional_fields?.blocks.filter(block => block.is_live) ?? [];
   }
@@ -288,110 +305,140 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
   }
 
   private __renderPaymentMethodConfig() {
-    return html`
-      <div class="rounded-t-l rounded-b-l border border-contrast-10">
-        <vaadin-tabs
-          selected=${this.__tab}
-          theme="centered"
-          @selected-changed=${(evt: CustomEvent) => {
-            const tabs = evt.currentTarget as TabsElement;
-            this.__tab = tabs.selected ?? 0;
-          }}
+    const oauthGateways = [
+      'stripe_connect',
+      'square_up',
+      'quickbook_payments',
+      'amazon_mws',
+      'paypal_platform',
+    ];
+
+    if (this.form.type && oauthGateways.includes(this.form.type)) {
+      return html`
+        <div
+          class="flex items-start rounded border border-primary"
+          style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px); padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
         >
-          <vaadin-tab><foxy-i18n infer="" key="tab_live"></foxy-i18n></vaadin-tab>
-          <vaadin-tab><foxy-i18n infer="" key="tab_test"></foxy-i18n></vaadin-tab>
-        </vaadin-tabs>
-
-        <div class="overflow-hidden">
-          <div
-            data-testid="tab-content"
-            class="grid grid-cols-2 gap-m transition-transform transform duration-300"
-            style=${classMap({
-              'width: calc(200% + var(--lumo-space-m));': true,
-              '--tw-translate-x: 0;': this.__tab === 0,
-              '--tw-translate-x: calc(-50% - (var(--lumo-space-m) / 2));': this.__tab !== 0,
-            })}
-          >
-            ${['live', 'test'].map((type, index) => {
-              const prefix = index === 0 ? '' : `${type}-`;
-              const blocks = index === 0 ? this.__liveBlocks : this.__testBlocks;
-
-              return html`
-                <div
-                  class=${classMap({
-                    'grid grid-cols-1 gap-m p-m transition-opacity duration-300': true,
-                    'opacity-100': this.__tab === index,
-                    'opacity-0': this.__tab !== index,
-                  })}
-                >
-                  ${this.form.helper?.id_description
-                    ? html`
-                        <foxy-internal-text-control
-                          placeholder=${this.t('default_additional_field_placeholder')}
-                          helper-text=""
-                          label=${this.form.helper.id_description}
-                          infer="${prefix}account-id"
-                        >
-                        </foxy-internal-text-control>
-                      `
-                    : ''}
-                  ${this.form.helper?.third_party_key_description
-                    ? html`
-                        <foxy-internal-text-control
-                          placeholder=${this.t('default_additional_field_placeholder')}
-                          helper-text=""
-                          label=${this.form.helper.third_party_key_description}
-                          infer="${prefix}third-party-key"
-                        >
-                        </foxy-internal-text-control>
-                      `
-                    : ''}
-                  ${this.form.helper?.key_description
-                    ? html`
-                        <foxy-internal-text-control
-                          placeholder=${this.t('default_additional_field_placeholder')}
-                          helper-text=""
-                          label=${this.form.helper.key_description}
-                          infer="${prefix}account-key"
-                        >
-                        </foxy-internal-text-control>
-                      `
-                    : ''}
-                  ${blocks.map(block => this.__renderBlock(block))}
-                </div>
-              `;
-            })}
-          </div>
+          ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-primary" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`}
+          <p>
+            <foxy-i18n infer="" key="no_oauth_support_message"></foxy-i18n>
+            <br />
+            <a
+              target="_blank"
+              class="mt-xs inline-block rounded font-medium text-primary transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+              href="https://admin.foxycart.com"
+            >
+              admin.foxycart.com
+            </a>
+          </p>
         </div>
-      </div>
+      `;
+    }
 
-      <foxy-internal-text-control infer="description"></foxy-internal-text-control>
+    return html`
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-text-control layout="summary-item" infer="description">
+        </foxy-internal-text-control>
 
-      ${this.form.helper?.supports_3d_secure
-        ? html`
-            <foxy-internal-radio-group-control
-              infer="three-d-secure-toggle"
-              class="-mb-s"
-              .getValue=${this.__threeDSecureToggleGetValue}
-              .setValue=${this.__threeDSecureToggleSetValue}
-              .options=${this.__threeDSecureToggleOptions}
-            >
-            </foxy-internal-radio-group-control>
+        ${this.form.helper?.supports_3d_secure
+          ? html`
+              <foxy-internal-select-control
+                layout="summary-item"
+                infer="three-d-secure-toggle"
+                .getValue=${this.__threeDSecureToggleGetValue}
+                .setValue=${this.__threeDSecureToggleSetValue}
+                .options=${this.__threeDSecureToggleOptions}
+              >
+              </foxy-internal-select-control>
 
-            ${this.form.config_3d_secure
+              ${this.form.config_3d_secure
+                ? html`
+                    <foxy-internal-switch-control
+                      layout="summary-item"
+                      infer="three-d-secure-response"
+                      .getValue=${this.__threeDSecureResponseGetValue}
+                      .setValue=${this.__threeDSecureResponseSetValue}
+                    >
+                    </foxy-internal-switch-control>
+                  `
+                : ''}
+            `
+          : ''}
+      </foxy-internal-summary-control>
+
+      ${['live', 'test'].map((type, index) => {
+        const prefix = index === 0 ? '' : `${type}-`;
+        const blocks = index === 0 ? this.__liveBlocks : this.__testBlocks;
+        const scope = `${type}-group`;
+
+        if (type === 'live' && !this.__storeLoader?.data) return html``;
+        if (type === 'live' && !this.__storeLoader?.data?.is_active) {
+          return html`
+            <foxy-internal-summary-control infer="${type}-group">
+              <div
+                class="flex items-start"
+                style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+              >
+                ${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-primary" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`}
+                <p><foxy-i18n infer="" key="inactive_message"></foxy-i18n></p>
+              </div>
+            </foxy-internal-summary-control>
+          `;
+        }
+
+        const showInactiveSetText =
+          this.__storeLoader?.data?.is_active === true &&
+          ((type === 'test' && this.__paymentPresetLoader?.data?.is_live === true) ||
+            (type === 'live' && this.__paymentPresetLoader?.data?.is_live === false));
+
+        return html`
+          <foxy-internal-summary-control
+            helper-text=${ifDefined(
+              showInactiveSetText ? this.t(`${scope}.helper_text_inactive`) : void 0
+            )}
+            label=${ifDefined(showInactiveSetText ? this.t(`${scope}.label_inactive`) : void 0)}
+            infer=${scope}
+          >
+            ${this.form.helper?.id_description
+              ? html`
+                  <foxy-internal-text-control
+                    placeholder=${this.t('default_additional_field_placeholder')}
+                    helper-text=""
+                    layout="summary-item"
+                    label=${this.form.helper.id_description}
+                    infer="${prefix}account-id"
+                  >
+                  </foxy-internal-text-control>
+                `
+              : ''}
+            ${this.form.helper?.third_party_key_description
+              ? html`
+                  <foxy-internal-text-control
+                    placeholder=${this.t('default_additional_field_placeholder')}
+                    helper-text=""
+                    layout="summary-item"
+                    label=${this.form.helper.third_party_key_description}
+                    infer="${prefix}third-party-key"
+                  >
+                  </foxy-internal-text-control>
+                `
+              : ''}
+            ${this.form.helper?.key_description
               ? html`
-                  <foxy-internal-checkbox-group-control
-                    infer="three-d-secure-response"
-                    class="-mb-s"
-                    .getValue=${this.__threeDSecureResponseGetValue}
-                    .setValue=${this.__threeDSecureResponseSetValue}
-                    .options=${this.__threeDSecureResponseOptions}
+                  <foxy-internal-text-control
+                    placeholder=${this.t('default_additional_field_placeholder')}
+                    layout="summary-item"
+                    helper-text=""
+                    label=${this.form.helper.key_description}
+                    infer="${prefix}account-key"
                   >
-                  </foxy-internal-checkbox-group-control>
+                  </foxy-internal-text-control>
                 `
               : ''}
-          `
-        : ''}
+            ${blocks.map(block => this.__renderBlock(block))}
+          </foxy-internal-summary-control>
+        `;
+      })}
       ${super.renderBody()}
     `;
   }
@@ -449,6 +496,7 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
 
   private __renderBlock(block: Block) {
     return html`${block.fields.map(field => {
+      if (field.type === 'hidden') return;
       const scope = ['additional-fields', field.id].join('-').replace(/_/g, '-');
 
       const getValue = () => {
@@ -461,12 +509,15 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
       };
 
       const setValue = (newValue: unknown) => {
+        let config: Record<string, unknown> = {};
+
         try {
-          const config = JSON.parse(this.form.additional_fields ?? '{}');
-          this.edit({ additional_fields: JSON.stringify(set(config, field.id, newValue)) });
+          config = JSON.parse(this.form.additional_fields ?? '');
         } catch {
-          return '';
+          // ignore
         }
+
+        this.edit({ additional_fields: JSON.stringify(set(config, field.id, newValue)) });
       };
 
       type Option = { name: string; value: string };
@@ -475,23 +526,22 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
       return html`
         ${field.type === 'checkbox'
           ? html`
-              <foxy-internal-checkbox-group-control
+              <foxy-internal-switch-control
                 helper-text=${field.description ?? ''}
-                label=""
-                class="-mb-s"
+                label=${field.name}
                 infer=${scope}
-                .options=${[{ label: field.name, value: 'checked' }]}
-                .getValue=${() => (getValue() ? ['checked'] : [])}
-                .setValue=${(newValue: string[]) => {
-                  setValue(newValue.includes('checked'));
-                }}
+                helper-text-as-tooltip
+                .getValue=${getValue}
+                .setValue=${setValue}
               >
-              </foxy-internal-checkbox-group-control>
+              </foxy-internal-switch-control>
             `
           : field.type === 'select'
           ? html`
               <foxy-internal-select-control
+                placeholder=${this.t('default_additional_field_select_placeholder')}
                 helper-text=${field.description ?? ''}
+                layout="summary-item"
                 label=${field.name}
                 infer=${scope}
                 .options=${options!.map(({ name, value }) => ({ label: name, value }))}
@@ -504,6 +554,7 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
               <foxy-internal-text-control
                 helper-text=${field.description ?? ''}
                 placeholder=${field.default_value || this.t('default_additional_field_placeholder')}
+                layout="summary-item"
                 label=${field.name}
                 infer=${scope}
                 .getValue=${getValue}
diff --git a/src/elements/public/PaymentsApiPaymentMethodForm/index.ts b/src/elements/public/PaymentsApiPaymentMethodForm/index.ts
index be108b472..796757a4c 100644
--- a/src/elements/public/PaymentsApiPaymentMethodForm/index.ts
+++ b/src/elements/public/PaymentsApiPaymentMethodForm/index.ts
@@ -1,9 +1,7 @@
 import '@vaadin/vaadin-button';
-import '@vaadin/vaadin-tabs';
 
-import '../../internal/InternalAsyncComboBoxControl/index';
-import '../../internal/InternalCheckboxGroupControl/index';
-import '../../internal/InternalRadioGroupControl/index';
+import '../../internal/InternalSummaryControl/index';
+import '../../internal/InternalSwitchControl/index';
 import '../../internal/InternalSelectControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
diff --git a/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.stories.ts b/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.stories.ts
index a13440768..ab8888596 100644
--- a/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.stories.ts
+++ b/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.stories.ts
@@ -15,12 +15,12 @@ const summary: Summary = {
   localName: 'foxy-payments-api-payment-preset-form',
   translatable: true,
   configurable: {
-    sections: ['timestamps', 'header'],
+    sections: ['timestamps', 'general', 'header'],
     buttons: ['delete', 'create', 'submit', 'undo', 'header:copy-id', 'header:copy-json'],
     inputs: [
-      'description',
-      'is-live',
-      'is-purchase-order-enabled',
+      'general:description',
+      'general:is-live',
+      'general:is-purchase-order-enabled',
       'payment-methods',
       'fraud-protections',
     ],
diff --git a/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.test.ts b/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.test.ts
index 1fba3ac95..df0ae9552 100644
--- a/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.test.ts
+++ b/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.test.ts
@@ -1,6 +1,7 @@
-import type { ItemRenderer } from '../CollectionPage/types';
-import type { FormRenderer } from '../FormDialog/types';
+import type { NucleonElement } from '../NucleonElement/NucleonElement';
 import type { FetchEvent } from '../NucleonElement/FetchEvent';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
 
 import '../PaymentsApi/index';
 import './index';
@@ -11,14 +12,13 @@ import { PaymentsApiFraudProtectionCard } from '../PaymentsApiFraudProtectionCar
 import { PaymentsApiFraudProtectionForm } from '../PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm';
 import { PaymentsApiPaymentMethodCard } from '../PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard';
 import { PaymentsApiPaymentMethodForm } from '../PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm';
-import { InternalCheckboxGroupControl } from '../../internal/InternalCheckboxGroupControl/InternalCheckboxGroupControl';
 import { InternalAsyncListControl } from '../../internal/InternalAsyncListControl/InternalAsyncListControl';
+import { InternalSummaryControl } from '../../internal/InternalSummaryControl/InternalSummaryControl';
+import { InternalSwitchControl } from '../../internal/InternalSwitchControl/InternalSwitchControl';
 import { InternalTextControl } from '../../internal/InternalTextControl/InternalTextControl';
-import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { createRouter } from '../../../server/index';
-import { FormDialog } from '../FormDialog';
-import { spread } from '@open-wc/lit-helpers';
+import { getTestData } from '../../../testgen/getTestData';
 import { fake, stub } from 'sinon';
 
 describe('PaymentsApiPaymentPresetForm', () => {
@@ -28,9 +28,14 @@ describe('PaymentsApiPaymentPresetForm', () => {
   before(() => (window.ResizeObserver = undefined));
   after(() => (window.ResizeObserver = OriginalResizeObserver));
 
-  it('imports and defines foxy-internal-checkbox-group-control', () => {
-    const element = customElements.get('foxy-internal-checkbox-group-control');
-    expect(element).to.equal(InternalCheckboxGroupControl);
+  it('imports and defines foxy-internal-switch-control', () => {
+    const element = customElements.get('foxy-internal-switch-control');
+    expect(element).to.equal(InternalSwitchControl);
+  });
+
+  it('imports and defines foxy-internal-summary-control', () => {
+    const element = customElements.get('foxy-internal-summary-control');
+    expect(element).to.equal(InternalSummaryControl);
   });
 
   it('imports and defines foxy-internal-async-list-control', () => {
@@ -126,7 +131,213 @@ describe('PaymentsApiPaymentPresetForm', () => {
     expect(form.hiddenSelector.matches('header:copy-json', true)).to.be.true;
   });
 
-  it('renders a text control for description', async () => {
+  it('hides Payment Methods and Fraud Protections when there is no data', async () => {
+    const router = createRouter();
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-preset-form> </foxy-payments-api-payment-preset-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+
+    expect(element.hiddenSelector.matches('fraud-protections', true)).to.be.true;
+    expect(element.hiddenSelector.matches('payment-methods', true)).to.be.true;
+
+    element.href = 'https://foxy-payments-api.element/payment_presets/0';
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+
+    expect(element.hiddenSelector.matches('fraud-protections', true)).to.be.false;
+    expect(element.hiddenSelector.matches('payment-methods', true)).to.be.false;
+  });
+
+  it('hides Live and Purchase Order toggles when there is no data or the store info is not loaded yet', async () => {
+    let resolve: ((response: Response) => void) | null = null;
+
+    const router = createRouter();
+    const wrapper = await fixture(html`
+      <div
+        @fetch=${(evt: FetchEvent) => {
+          if (evt.request.url.startsWith('https://demo.api/hapi/stores/0')) {
+            evt.respondWith(new Promise(r => (resolve = r)));
+          } else {
+            router.handleEvent(evt);
+          }
+        }}
+      >
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-preset-form></foxy-payments-api-payment-preset-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+
+    expect(element.hiddenSelector.matches('general:is-live', true)).to.be.true;
+    expect(element.hiddenSelector.matches('general:is-purchase-order-enabled', true)).to.be.true;
+
+    element.href = 'https://foxy-payments-api.element/payment_presets/0';
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+
+    expect(element.hiddenSelector.matches('general:is-live', true)).to.be.true;
+    expect(element.hiddenSelector.matches('general:is-purchase-order-enabled', true)).to.be.true;
+
+    const store = await getTestData<Resource<Rels.Store>>('./hapi/stores/0', router);
+    store.is_active = true;
+    (resolve as ((response: Response) => void) | null)?.(new Response(JSON.stringify(store)));
+    await new Promise(r => setTimeout(r));
+
+    expect(element.hiddenSelector.matches('general:is-live', true)).to.be.false;
+    expect(element.hiddenSelector.matches('general:is-purchase-order-enabled', true)).to.be.false;
+  });
+
+  it('makes Live and Purchase Order toggles readonly with special helper text when the store is inactive', async () => {
+    const router = createRouter();
+    const wrapper = await fixture(html`
+      <div
+        @fetch=${(evt: FetchEvent) => {
+          if (evt.request.url.startsWith('https://demo.api/hapi/stores/0')) {
+            evt.respondWith(
+              (async () => {
+                const store = await getTestData<Resource<Rels.Store>>('./hapi/stores/0', router);
+                store.is_active = false;
+                return new Response(JSON.stringify(store));
+              })()
+            );
+          } else {
+            router.handleEvent(evt);
+          }
+        }}
+      >
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-preset-form></foxy-payments-api-payment-preset-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    element.href = 'https://foxy-payments-api.element/payment_presets/0';
+    await waitUntil(
+      () => {
+        if (!element.data) return false;
+        const nucleons = element.renderRoot.querySelectorAll<NucleonElement<any>>('foxy-nucleon');
+        return [...nucleons].every(nucleon => nucleon.in('idle'));
+      },
+      '',
+      { timeout: 5000 }
+    );
+
+    expect(element.readonlySelector.matches('general:is-live', true)).to.be.true;
+    expect(element.readonlySelector.matches('general:is-purchase-order-enabled', true)).to.be.true;
+
+    const isLiveControl = element.renderRoot.querySelector<InternalSwitchControl>(
+      '[infer="general"] [infer="is-live"]'
+    );
+
+    const isPoEnabledControl = element.renderRoot.querySelector<InternalSwitchControl>(
+      '[infer="general"] [infer="is-purchase-order-enabled"]'
+    );
+
+    expect(isLiveControl?.getValue()).to.be.false;
+    expect(isLiveControl).to.have.attribute(
+      'helper-text',
+      'general.is-live.helper_text_inactive_store'
+    );
+
+    expect(isLiveControl?.getValue()).to.be.false;
+    expect(isPoEnabledControl).to.have.attribute(
+      'helper-text',
+      'general.is-purchase-order-enabled.helper_text_inactive_store'
+    );
+  });
+
+  it('makes Live and Purchase Order toggles interactive with regular helper text when the store is active', async () => {
+    const router = createRouter();
+    const wrapper = await fixture(html`
+      <div
+        @fetch=${(evt: FetchEvent) => {
+          if (evt.request.url.startsWith('https://demo.api/hapi/stores/0')) {
+            evt.respondWith(
+              (async () => {
+                const store = await getTestData<Resource<Rels.Store>>('./hapi/stores/0', router);
+                store.is_active = true;
+                return new Response(JSON.stringify(store));
+              })()
+            );
+          } else {
+            router.handleEvent(evt);
+          }
+        }}
+      >
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-preset-form></foxy-payments-api-payment-preset-form>
+        </foxy-payments-api>
+      </div>
+    `);
+
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    element.href = 'https://foxy-payments-api.element/payment_presets/0';
+
+    await waitUntil(
+      () => {
+        if (!element.data) return false;
+        const nucleons = element.renderRoot.querySelectorAll<NucleonElement<any>>('foxy-nucleon');
+        return [...nucleons].every(nucleon => nucleon.in('idle'));
+      },
+      '',
+      { timeout: 5000 }
+    );
+
+    expect(element.readonlySelector.matches('general:is-live', true)).to.be.false;
+    expect(element.readonlySelector.matches('general:is-purchase-order-enabled', true)).to.be.false;
+
+    const isLiveControl = element.renderRoot.querySelector('[infer="general"] [infer="is-live"]');
+    const isPoEnabledControl = element.renderRoot.querySelector(
+      '[infer="general"] [infer="is-purchase-order-enabled"]'
+    );
+
+    expect(isLiveControl).to.have.attribute('helper-text', 'general.is-live.helper_text');
+    expect(isPoEnabledControl).to.have.attribute(
+      'helper-text',
+      'general.is-purchase-order-enabled.helper_text'
+    );
+  });
+
+  it('renders a summary control for general settings', async () => {
     const router = createRouter();
     const wrapper = await fixture(html`
       <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -149,13 +360,13 @@ describe('PaymentsApiPaymentPresetForm', () => {
 
     const element = wrapper.firstElementChild!.firstElementChild as Form;
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector('[infer="description"]');
+    const control = element.renderRoot.querySelector('[infer="general"]');
 
     expect(control).to.exist;
-    expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.be.instanceOf(InternalSummaryControl);
   });
 
-  it('renders a checkbox control for live credentials toggle', async () => {
+  it('renders a text control for description inside of the General section', async () => {
     const router = createRouter();
     const wrapper = await fixture(html`
       <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -178,23 +389,13 @@ describe('PaymentsApiPaymentPresetForm', () => {
 
     const element = wrapper.firstElementChild!.firstElementChild as Form;
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector(
-      '[infer="is-live"]'
-    ) as InternalCheckboxGroupControl;
-
-    expect(control).to.be.instanceOf(InternalCheckboxGroupControl);
-    expect(control).to.have.deep.property('options', [{ label: 'option_live', value: 'live' }]);
-
-    element.edit({ is_live: false });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal(['test']);
+    const control = element.renderRoot.querySelector('[infer="general"] [infer="description"]');
 
-    element.edit({ is_live: true });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal(['live']);
+    expect(control).to.exist;
+    expect(control).to.be.instanceOf(InternalTextControl);
   });
 
-  it('renders a checkbox control for purchase order toggle', async () => {
+  it('renders a switch control for live credentials toggle inside of the General section', async () => {
     const router = createRouter();
     const wrapper = await fixture(html`
       <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -217,24 +418,45 @@ describe('PaymentsApiPaymentPresetForm', () => {
 
     const element = wrapper.firstElementChild!.firstElementChild as Form;
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
+
     const control = element.renderRoot.querySelector(
-      '[infer="is-purchase-order-enabled"]'
-    ) as InternalCheckboxGroupControl;
+      '[infer="general"] [infer="is-live"]'
+    ) as InternalSwitchControl;
+    expect(control).to.be.instanceOf(InternalSwitchControl);
+  });
 
-    expect(control).to.be.instanceOf(InternalCheckboxGroupControl);
-    expect(control).to.have.deep.property('options', [{ label: 'option_true', value: 'true' }]);
+  it('renders a switch control for purchase order toggle inside of the General section', async () => {
+    const router = createRouter();
+    const wrapper = await fixture(html`
+      <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+        <foxy-payments-api
+          payment-method-set-hosted-payment-gateways-url="https://demo.api/hapi/payment_method_set_hosted_payment_gateways"
+          hosted-payment-gateways-helper-url="https://demo.api/hapi/property_helpers/1"
+          hosted-payment-gateways-url="https://demo.api/hapi/hosted_payment_gateways"
+          payment-gateways-helper-url="https://demo.api/hapi/property_helpers/0"
+          payment-method-sets-url="https://demo.api/hapi/payment_method_sets"
+          fraud-protections-url="https://demo.api/hapi/fraud_protections"
+          payment-gateways-url="https://demo.api/hapi/payment_gateways"
+        >
+          <foxy-payments-api-payment-preset-form
+            href="https://foxy-payments-api.element/payment_presets/0"
+          >
+          </foxy-payments-api-payment-preset-form>
+        </foxy-payments-api>
+      </div>
+    `);
 
-    element.edit({ is_purchase_order_enabled: false });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal([]);
+    const element = wrapper.firstElementChild!.firstElementChild as Form;
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    const control = element.renderRoot.querySelector(
+      '[infer="general"] [infer="is-purchase-order-enabled"]'
+    ) as InternalSwitchControl;
 
-    element.edit({ is_purchase_order_enabled: true });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal(['true']);
+    expect(control).to.be.instanceOf(InternalSwitchControl);
   });
 
   it('renders an async list control for payment methods', async () => {
-    const getPaymentMethodImageSrc = fake();
+    const getImageSrc = fake();
     const router = createRouter();
     const wrapper = await fixture(html`
       <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -249,7 +471,7 @@ describe('PaymentsApiPaymentPresetForm', () => {
         >
           <foxy-payments-api-payment-preset-form
             href="https://foxy-payments-api.element/payment_presets/0"
-            .getPaymentMethodImageSrc=${getPaymentMethodImageSrc}
+            .getPaymentMethodImageSrc=${getImageSrc}
           >
           </foxy-payments-api-payment-preset-form>
         </foxy-payments-api>
@@ -265,66 +487,18 @@ describe('PaymentsApiPaymentPresetForm', () => {
     expect(control).to.be.instanceOf(InternalAsyncListControl);
     expect(control).to.have.attribute('first', element.data?._links['fx:payment_methods'].href);
     expect(control).to.have.attribute('limit', '5');
-
-    const handleUpdate = fake();
-    const handleFetch = fake();
-    const dialog = new FormDialog();
-
-    dialog.parent = 'https://example.com/parent';
-    dialog.href = 'https://example.com/href';
-
-    const form = await fixture(
-      (control.form as FormRenderer)({ html, spread, dialog, handleFetch, handleUpdate })
-    );
-
-    expect(form).to.be.instanceOf(PaymentsApiPaymentMethodForm);
-    expect(form).to.have.attribute('parent', 'https://example.com/parent');
-    expect(form).to.have.attribute('infer', 'payments-api-payment-method-form');
-    expect(form).to.have.attribute('href', 'https://example.com/href');
-    expect(form).to.have.property('getImageSrc', getPaymentMethodImageSrc);
-
-    handleUpdate.resetHistory();
-    form.dispatchEvent(new CustomEvent('update'));
-    expect(handleUpdate).to.have.been.called;
-
-    handleFetch.resetHistory();
-    form.dispatchEvent(new CustomEvent('fetch'));
-    expect(handleFetch).to.have.been.called;
-
-    const item = await fixture(
-      (control.item as ItemRenderer)({
-        simplifyNsLoading: false,
-        readonlyControls: new BooleanSelector(''),
-        disabledControls: new BooleanSelector(''),
-        hiddenControls: new BooleanSelector(''),
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: [],
-        hidden: false,
-        parent: 'https://example.com/parent',
-        spread,
-        props: {},
-        group: '',
-        html,
-        lang: 'en',
-        href: 'https://example.com/href',
-        data: null,
-        next: null,
-        ns: 'test',
-      })
-    );
-
-    expect(item).to.be.instanceOf(PaymentsApiPaymentMethodCard);
-    expect(item).to.have.attribute('parent', 'https://example.com/parent');
-    expect(item).to.have.attribute('infer', 'payments-api-payment-method-card');
-    expect(item).to.have.attribute('href', 'https://example.com/href');
-    expect(item).to.have.property('getImageSrc', getPaymentMethodImageSrc);
+    expect(control).to.have.attribute('item', 'foxy-payments-api-payment-method-card');
+    expect(control).to.have.attribute('form', 'foxy-payments-api-payment-method-form');
+    expect(control).to.have.deep.property('itemProps', { '.getImageSrc': getImageSrc });
+    expect(control).to.have.deep.property('formProps', {
+      '.getImageSrc': getImageSrc,
+      'payment-preset': 'https://foxy-payments-api.element/payment_presets/0',
+      'store': 'https://demo.api/hapi/stores/0',
+    });
   });
 
   it('renders an async list control for fraud protections', async () => {
-    const getFraudProtectionImageSrc = fake();
+    const getImageSrc = fake();
     const router = createRouter();
     const wrapper = await fixture(html`
       <div @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
@@ -339,7 +513,7 @@ describe('PaymentsApiPaymentPresetForm', () => {
         >
           <foxy-payments-api-payment-preset-form
             href="https://foxy-payments-api.element/payment_presets/0"
-            .getFraudProtectionImageSrc=${getFraudProtectionImageSrc}
+            .getFraudProtectionImageSrc=${getImageSrc}
           >
           </foxy-payments-api-payment-preset-form>
         </foxy-payments-api>
@@ -355,61 +529,9 @@ describe('PaymentsApiPaymentPresetForm', () => {
     expect(control).to.be.instanceOf(InternalAsyncListControl);
     expect(control).to.have.attribute('first', element.data?._links['fx:fraud_protections'].href);
     expect(control).to.have.attribute('limit', '5');
-
-    const handleUpdate = fake();
-    const handleFetch = fake();
-    const dialog = new FormDialog();
-
-    dialog.parent = 'https://example.com/parent';
-    dialog.href = 'https://example.com/href';
-
-    const form = await fixture(
-      (control.form as FormRenderer)({ html, spread, dialog, handleFetch, handleUpdate })
-    );
-
-    expect(form).to.be.instanceOf(PaymentsApiFraudProtectionForm);
-    expect(form).to.have.attribute('parent', 'https://example.com/parent');
-    expect(form).to.have.attribute('infer', 'payments-api-fraud-protection-form');
-    expect(form).to.have.attribute('href', 'https://example.com/href');
-    expect(form).to.have.property('getImageSrc', getFraudProtectionImageSrc);
-
-    handleUpdate.resetHistory();
-    form.dispatchEvent(new CustomEvent('update'));
-    expect(handleUpdate).to.have.been.called;
-
-    handleFetch.resetHistory();
-    form.dispatchEvent(new CustomEvent('fetch'));
-    expect(handleFetch).to.have.been.called;
-
-    const item = await fixture(
-      (control.item as ItemRenderer)({
-        simplifyNsLoading: false,
-        readonlyControls: new BooleanSelector(''),
-        disabledControls: new BooleanSelector(''),
-        hiddenControls: new BooleanSelector(''),
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: [],
-        hidden: false,
-        parent: 'https://example.com/parent',
-        spread,
-        props: {},
-        group: '',
-        html,
-        lang: 'en',
-        href: 'https://example.com/href',
-        data: null,
-        next: null,
-        ns: 'test',
-      })
-    );
-
-    expect(item).to.be.instanceOf(PaymentsApiFraudProtectionCard);
-    expect(item).to.have.attribute('parent', 'https://example.com/parent');
-    expect(item).to.have.attribute('infer', 'payments-api-fraud-protection-card');
-    expect(item).to.have.attribute('href', 'https://example.com/href');
-    expect(item).to.have.property('getImageSrc', getFraudProtectionImageSrc);
+    expect(control).to.have.attribute('item', 'foxy-payments-api-fraud-protection-card');
+    expect(control).to.have.attribute('form', 'foxy-payments-api-fraud-protection-form');
+    expect(control).to.have.deep.property('itemProps', { '.getImageSrc': getImageSrc });
+    expect(control).to.have.deep.property('formProps', { '.getImageSrc': getImageSrc });
   });
 });
diff --git a/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.ts b/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.ts
index 4b8a1e5fe..d05b4e070 100644
--- a/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.ts
+++ b/src/elements/public/PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm.ts
@@ -1,14 +1,15 @@
-import type { InternalCheckboxGroupControl } from '../../internal/InternalCheckboxGroupControl/InternalCheckboxGroupControl';
 import type { PropertyDeclarations } from 'lit-element';
-import type { FormRendererContext } from '../FormDialog/types';
-import type { ItemRendererContext } from '../CollectionPage/types';
-import type { Data } from './types';
 import type { TemplateResult } from 'lit-html';
+import type { NucleonElement } from '../NucleonElement/NucleonElement';
 import type { NucleonV8N } from '../NucleonElement/types';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Data } from './types';
+import type { Rels } from '@foxy.io/sdk/backend';
 
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-html';
 
 const NS = 'payments-api-payment-preset-form';
@@ -47,118 +48,107 @@ export class PaymentsApiPaymentPresetForm extends Base<Data> {
   /** A function that returns image URL for given payment method `type`. */
   getPaymentMethodImageSrc: ((type: string) => string) | null = null;
 
-  private static readonly __isPOEnabledOptions = [{ label: 'option_true', value: 'true' }];
-
-  private static readonly __isLiveOptions = [{ label: 'option_live', value: 'live' }];
-
-  private __getIsPOEnabledValue: InternalCheckboxGroupControl['getValue'] = () => {
-    return this.form.is_purchase_order_enabled ? ['true'] : [];
+  private readonly __isPurchaseOrderEnabledGetValue = () => {
+    return this.__storeLoader?.data?.is_active ? this.form.is_purchase_order_enabled : false;
   };
 
-  private __setIsPOEnabledValue: InternalCheckboxGroupControl['setValue'] = newValue => {
-    this.edit({ is_purchase_order_enabled: (newValue as string[]).includes('true') });
+  private readonly __isLiveGetValue = () => {
+    return this.__storeLoader?.data?.is_active ? this.form.is_live : false;
   };
 
-  private __getIsLiveValue: InternalCheckboxGroupControl['getValue'] = () => {
-    return this.form.is_live ? ['live'] : ['test'];
-  };
+  private readonly __storeLoaderId = 'storeLoader';
 
-  private __setIsLiveValue: InternalCheckboxGroupControl['setValue'] = newValue => {
-    this.edit({ is_live: (newValue as string[]).includes('live') });
-  };
+  get readonlySelector(): BooleanSelector {
+    const alwaysMatch = [super.hiddenSelector.toString()];
+
+    if (!this.__storeLoader?.data?.is_active) {
+      alwaysMatch.unshift('general:is-live', 'general:is-purchase-order-enabled');
+    }
+
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
+  }
 
   get hiddenSelector(): BooleanSelector {
-    return new BooleanSelector(`header:copy-json ${super.hiddenSelector}`.trimEnd());
+    const alwaysMatch = ['header:copy-json', super.hiddenSelector.toString()];
+    const store = this.__storeLoader?.data;
+
+    if (!this.data) alwaysMatch.unshift('payment-methods', 'fraud-protections');
+    if (!store) alwaysMatch.unshift('general:is-live', 'general:is-purchase-order-enabled');
+
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
   }
 
   renderBody(): TemplateResult {
-    const constructor = this.constructor as typeof PaymentsApiPaymentPresetForm;
+    const isStoreActive = !!this.__storeLoader?.data?.is_active;
+    const helperTextSuffix = isStoreActive ? '' : '_inactive_store';
 
     return html`
       ${this.renderHeader()}
 
-      <foxy-internal-text-control infer="description"></foxy-internal-text-control>
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-text-control layout="summary-item" infer="description">
+        </foxy-internal-text-control>
 
-      <div class="-mb-s">
-        <foxy-internal-checkbox-group-control
+        <foxy-internal-switch-control
+          helper-text=${this.t(`general.is-live.helper_text${helperTextSuffix}`)}
           infer="is-live"
-          .getValue=${this.__getIsLiveValue}
-          .setValue=${this.__setIsLiveValue}
-          .options=${constructor.__isLiveOptions}
+          helper-text-as-tooltip
+          .getValue=${this.__isLiveGetValue}
         >
-        </foxy-internal-checkbox-group-control>
+        </foxy-internal-switch-control>
 
-        <foxy-internal-checkbox-group-control
+        <foxy-internal-switch-control
+          helper-text=${this.t(`general.is-purchase-order-enabled.helper_text${helperTextSuffix}`)}
           infer="is-purchase-order-enabled"
-          .getValue=${this.__getIsPOEnabledValue}
-          .setValue=${this.__setIsPOEnabledValue}
-          .options=${constructor.__isPOEnabledOptions}
+          helper-text-as-tooltip
+          .getValue=${this.__isPurchaseOrderEnabledGetValue}
         >
-        </foxy-internal-checkbox-group-control>
-      </div>
-
-      ${this.data
-        ? html`
-            <foxy-internal-async-list-control
-              infer="payment-methods"
-              first=${this.data._links['fx:payment_methods'].href}
-              limit="5"
-              alert
-              .item=${(ctx: ItemRendererContext) => html`
-                <foxy-payments-api-payment-method-card
-                  parent=${ctx.parent}
-                  infer="payments-api-payment-method-card"
-                  href=${ctx.href}
-                  .getImageSrc=${this.getPaymentMethodImageSrc}
-                >
-                </foxy-payments-api-payment-method-card>
-              `}
-              .form=${(ctx: FormRendererContext) => html`
-                <foxy-payments-api-payment-method-form
-                  parent=${ctx.dialog.parent}
-                  infer="payments-api-payment-method-form"
-                  href=${ctx.dialog.href}
-                  id="form"
-                  .getImageSrc=${this.getPaymentMethodImageSrc}
-                  @fetch=${ctx.handleFetch}
-                  @update=${ctx.handleUpdate}
-                >
-                </foxy-payments-api-payment-method-form>
-              `}
-            >
-            </foxy-internal-async-list-control>
-
-            <foxy-internal-async-list-control
-              infer="fraud-protections"
-              first=${this.data._links['fx:fraud_protections'].href}
-              limit="5"
-              alert
-              .item=${(ctx: ItemRendererContext) => html`
-                <foxy-payments-api-fraud-protection-card
-                  parent=${ctx.parent}
-                  infer="payments-api-fraud-protection-card"
-                  href=${ctx.href}
-                  .getImageSrc=${this.getFraudProtectionImageSrc}
-                >
-                </foxy-payments-api-fraud-protection-card>
-              `}
-              .form=${(ctx: FormRendererContext) => html`
-                <foxy-payments-api-fraud-protection-form
-                  parent=${ctx.dialog.parent}
-                  infer="payments-api-fraud-protection-form"
-                  href=${ctx.dialog.href}
-                  id="form"
-                  .getImageSrc=${this.getFraudProtectionImageSrc}
-                  @fetch=${ctx.handleFetch}
-                  @update=${ctx.handleUpdate}
-                >
-                </foxy-payments-api-fraud-protection-form>
-              `}
-            >
-            </foxy-internal-async-list-control>
-          `
-        : ''}
+        </foxy-internal-switch-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-async-list-control
+        infer="payment-methods"
+        first=${ifDefined(this.data?._links['fx:payment_methods'].href)}
+        limit="5"
+        item="foxy-payments-api-payment-method-card"
+        form="foxy-payments-api-payment-method-form"
+        alert
+        .itemProps=${{ '.getImageSrc': this.getPaymentMethodImageSrc }}
+        .formProps=${{
+          '.getImageSrc': this.getPaymentMethodImageSrc,
+          'payment-preset': this.href,
+          'store': this.data?._links['fx:store'].href,
+        }}
+      >
+      </foxy-internal-async-list-control>
+
+      <foxy-internal-async-list-control
+        infer="fraud-protections"
+        first=${ifDefined(this.data?._links['fx:fraud_protections'].href)}
+        limit="5"
+        item="foxy-payments-api-fraud-protection-card"
+        form="foxy-payments-api-fraud-protection-form"
+        alert
+        .itemProps=${{ '.getImageSrc': this.getFraudProtectionImageSrc }}
+        .formProps=${{ '.getImageSrc': this.getFraudProtectionImageSrc }}
+      >
+      </foxy-internal-async-list-control>
+
       ${super.renderBody()}
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.data?._links['fx:store'].href)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
     `;
   }
+
+  private get __storeLoader() {
+    type Loader = NucleonElement<Resource<Rels.Store>>;
+    return this.renderRoot.querySelector<Loader>(`#${this.__storeLoaderId}`);
+  }
 }
diff --git a/src/elements/public/PaymentsApiPaymentPresetForm/index.ts b/src/elements/public/PaymentsApiPaymentPresetForm/index.ts
index f16f1143f..7b286f7d9 100644
--- a/src/elements/public/PaymentsApiPaymentPresetForm/index.ts
+++ b/src/elements/public/PaymentsApiPaymentPresetForm/index.ts
@@ -1,5 +1,6 @@
-import '../../internal/InternalCheckboxGroupControl/index';
 import '../../internal/InternalAsyncListControl/index';
+import '../../internal/InternalSummaryControl/index';
+import '../../internal/InternalSwitchControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 
diff --git a/src/elements/public/StoreForm/StoreForm.test.ts b/src/elements/public/StoreForm/StoreForm.test.ts
index 920161d38..b9834c90f 100644
--- a/src/elements/public/StoreForm/StoreForm.test.ts
+++ b/src/elements/public/StoreForm/StoreForm.test.ts
@@ -354,19 +354,6 @@ describe('StoreForm', () => {
     expect(form.errors).to.not.include('logo-url:v8n_too_long');
   });
 
-  it('produces the webhook-url:v8n_required error if legacy webhook is enabled and url is empty', () => {
-    const form = new Form();
-
-    form.edit({ use_webhook: false, webhook_url: '' });
-    expect(form.errors).to.not.include('webhook-url:v8n_required');
-
-    form.edit({ use_webhook: true, webhook_url: '' });
-    expect(form.errors).to.include('webhook-url:v8n_required');
-
-    form.edit({ use_webhook: true, webhook_url: 'https://example.com' });
-    expect(form.errors).to.not.include('webhook-url:v8n_required');
-  });
-
   it('produces the webhook-url:v8n_too_long error if legacy webhook is enabled and the url exceeds 300 characters', () => {
     const form = new Form();
 
@@ -393,10 +380,10 @@ describe('StoreForm', () => {
     const form = new Form();
 
     form.edit({ use_webhook: false, webhook_key: '' });
-    expect(form.errors).to.not.include('webhook-url:v8n_required');
+    expect(form.errors).to.not.include('webhook-key:v8n_required');
 
     form.edit({ use_webhook: true, webhook_key: '' });
-    expect(form.errors).to.include('webhook-url:v8n_required');
+    expect(form.errors).to.include('webhook-key:v8n_required');
   });
 
   it('produces the webhook-key:v8n_required error if hmac for carts is enabled and key is empty', () => {
diff --git a/src/elements/public/StoreForm/StoreForm.ts b/src/elements/public/StoreForm/StoreForm.ts
index 8e0bcd524..a8c7774f9 100644
--- a/src/elements/public/StoreForm/StoreForm.ts
+++ b/src/elements/public/StoreForm/StoreForm.ts
@@ -77,8 +77,6 @@ export class StoreForm extends Base<Data> {
 
       ({ logo_url: v }) => !v || v.length <= 200 || 'logo-url:v8n_too_long',
 
-      ({ webhook_url: v, use_webhook }) => !use_webhook || !!v || 'webhook-url:v8n_required',
-
       ({ webhook_url: v, use_webhook }) => {
         return !use_webhook || !v || v.length <= 300 || 'webhook-url:v8n_too_long';
       },
@@ -395,6 +393,7 @@ export class StoreForm extends Base<Data> {
         <foxy-internal-async-combo-box-control
           item-label-path="version"
           item-value-path="_links.self.href"
+          class="sm-col-span-2"
           infer="store-version-uri"
           first=${ifDefined(this.storeVersions ?? undefined)}
           .selectedItem=${storeVersion}
diff --git a/src/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.test.ts b/src/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.test.ts
index 82650bc22..f2d5bc4f2 100644
--- a/src/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.test.ts
+++ b/src/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.test.ts
@@ -244,7 +244,7 @@ describe('StoreShippingMethodForm', () => {
   it('hides everything except for shipping method uri, timestamps, create and delete buttons by default', () => {
     const form = new Form();
     expect(form.hiddenSelector.toString()).to.equal(
-      'shipping-container-uri shipping-drop-type-uri destinations authentication-key meter-number accountid password endpoint custom-code services'
+      'shipping-container-uri shipping-drop-type-uri destinations authentication-key meter-number accountid password endpoint custom-code services undo submit delete timestamps'
     );
   });
 
@@ -271,7 +271,7 @@ describe('StoreShippingMethodForm', () => {
     });
 
     expect(form.hiddenSelector.toString()).to.equal(
-      'shipping-container-uri shipping-drop-type-uri destinations authentication-key meter-number accountid password custom-code services'
+      'shipping-container-uri shipping-drop-type-uri destinations authentication-key meter-number accountid password custom-code services undo submit delete timestamps'
     );
   });
 
@@ -298,7 +298,7 @@ describe('StoreShippingMethodForm', () => {
     });
 
     expect(form.hiddenSelector.toString()).to.equal(
-      'shipping-container-uri shipping-drop-type-uri destinations authentication-key meter-number accountid password endpoint services'
+      'shipping-container-uri shipping-drop-type-uri destinations authentication-key meter-number accountid password endpoint services undo submit delete timestamps'
     );
   });
 
@@ -325,7 +325,7 @@ describe('StoreShippingMethodForm', () => {
     });
 
     expect(form.hiddenSelector.toString()).to.equal(
-      'shipping-container-uri shipping-drop-type-uri authentication-key meter-number accountid password endpoint custom-code services'
+      'shipping-container-uri shipping-drop-type-uri authentication-key meter-number accountid password endpoint custom-code services undo submit delete timestamps'
     );
   });
 
@@ -351,7 +351,9 @@ describe('StoreShippingMethodForm', () => {
       } as Data['_embedded'],
     });
 
-    expect(form.hiddenSelector.toString()).to.equal('endpoint custom-code services');
+    expect(form.hiddenSelector.toString()).to.equal(
+      'endpoint custom-code services undo submit delete timestamps'
+    );
   });
 
   it('hides everything except for shipping method uri, shipping container uri, shipping drop type uri, destinations, services, timestamps, create and delete buttons for USPS method', () => {
@@ -377,7 +379,7 @@ describe('StoreShippingMethodForm', () => {
     });
 
     expect(form.hiddenSelector.toString()).to.equal(
-      'authentication-key meter-number accountid password endpoint custom-code services'
+      'authentication-key meter-number accountid password endpoint custom-code services undo submit delete timestamps'
     );
   });
 
@@ -403,7 +405,9 @@ describe('StoreShippingMethodForm', () => {
       } as Data['_embedded'],
     });
 
-    expect(form.hiddenSelector.toString()).to.equal('endpoint custom-code services');
+    expect(form.hiddenSelector.toString()).to.equal(
+      'endpoint custom-code services undo submit delete timestamps'
+    );
   });
 
   it('renders a form header', async () => {
diff --git a/src/elements/public/SubscriptionForm/SubscriptionForm.test.ts b/src/elements/public/SubscriptionForm/SubscriptionForm.test.ts
index a0d371922..bb70bbcb7 100644
--- a/src/elements/public/SubscriptionForm/SubscriptionForm.test.ts
+++ b/src/elements/public/SubscriptionForm/SubscriptionForm.test.ts
@@ -41,6 +41,12 @@ const fromDefaults = (key: string, overrides: Record<PropertyKey, unknown>) => {
 };
 
 describe('SubscriptionForm', () => {
+  const OriginalResizeObserver = window.ResizeObserver;
+
+  // @ts-expect-error disabling ResizeObserver because it errors in test env
+  before(() => (window.ResizeObserver = undefined));
+  after(() => (window.ResizeObserver = OriginalResizeObserver));
+
   it('imports and defines vcf-tooltip', () => {
     expect(customElements.get('vcf-tooltip')).to.exist;
   });
diff --git a/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.stories.ts b/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.stories.ts
index dddcc107e..6772afbd9 100644
--- a/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.stories.ts
+++ b/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.stories.ts
@@ -11,20 +11,29 @@ const summary: Summary = {
   localName: 'foxy-subscription-settings-form',
   translatable: true,
   configurable: {
-    sections: ['timestamps', 'header'],
-    buttons: ['delete', 'create', 'submit', 'undo', 'header:copy-id', 'header:copy-json'],
+    sections: [
+      'header',
+      'past-due-amount-group',
+      'reattempts-group',
+      'emails-group',
+      'modification-group',
+      'cancellation-group',
+      'timestamps',
+    ],
+    buttons: ['delete', 'create', 'submit', 'undo', 'header:copy-json'],
     inputs: [
-      'past-due-amount-handling',
-      'automatically-charge-past-due-amount',
-      'clear-past-due-amounts-on-success',
-      'reset-nextdate-on-makeup-payment',
-      'reattempt-bypass',
-      'reattempt-schedule',
-      'reminder-email-schedule',
-      'expiring-soon-payment-reminder-schedule',
-      'send-email-receipts-for-automated-billing',
-      'cancellation-schedule',
-      'modification-url',
+      'past-due-amount-group:past-due-amount-handling',
+      'past-due-amount-group:automatically-charge-past-due-amount',
+      'past-due-amount-group:reset-nextdate-on-makeup-payment',
+      'past-due-amount-group:prevent-customer-cancel-with-past-due',
+      'reattempts-group:reattempt-bypass-logic',
+      'reattempts-group:reattempt-bypass-strings',
+      'reattempts-group:reattempt-schedule',
+      'emails-group:send-email-receipts-for-automated-billing',
+      'emails-group:reminder-email-schedule',
+      'emails-group:expiring-soon-payment-reminder-schedule',
+      'cancellation-group:cancellation-schedule',
+      'modification-group:modification-url',
     ],
   },
 };
diff --git a/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.test.ts b/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.test.ts
index 8448326fc..1a3ff2839 100644
--- a/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.test.ts
+++ b/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.test.ts
@@ -3,13 +3,13 @@ import type { Data } from './types';
 
 import './index';
 
-import { InternalSubscriptionSettingsFormReattemptBypass } from './internal/InternalSubscriptionSettingsFormReattemptBypass/InternalSubscriptionSettingsFormReattemptBypass';
 import { SubscriptionSettingsForm as Form } from './SubscriptionSettingsForm';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { InternalCheckboxGroupControl } from '../../internal/InternalCheckboxGroupControl/InternalCheckboxGroupControl';
 import { InternalEditableListControl } from '../../internal/InternalEditableListControl/InternalEditableListControl';
-import { InternalRadioGroupControl } from '../../internal/InternalRadioGroupControl/InternalRadioGroupControl';
-import { InternalIntegerControl } from '../../internal/InternalIntegerControl/InternalIntegerControl';
+import { InternalSummaryControl } from '../../internal/InternalSummaryControl/InternalSummaryControl';
+import { InternalNumberControl } from '../../internal/InternalNumberControl/InternalNumberControl';
+import { InternalSwitchControl } from '../../internal/InternalSwitchControl/InternalSwitchControl';
+import { InternalSelectControl } from '../../internal/InternalSelectControl/InternalSelectControl';
 import { InternalTextControl } from '../../internal/InternalTextControl/InternalTextControl';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { createRouter } from '../../../server';
@@ -17,24 +17,29 @@ import { getTestData } from '../../../testgen/getTestData';
 import { stub } from 'sinon';
 
 describe('SubscriptionSettingsForm', () => {
-  it('imports and defines foxy-internal-checkbox-group-control', () => {
-    const constructor = customElements.get('foxy-internal-checkbox-group-control');
-    expect(constructor).to.equal(InternalCheckboxGroupControl);
-  });
-
   it('imports and defines foxy-internal-editable-list-control', () => {
     const constructor = customElements.get('foxy-internal-editable-list-control');
     expect(constructor).to.equal(InternalEditableListControl);
   });
 
-  it('imports and defines foxy-internal-radio-group-control', () => {
-    const constructor = customElements.get('foxy-internal-radio-group-control');
-    expect(constructor).to.equal(InternalRadioGroupControl);
+  it('imports and defines foxy-internal-summary-control', () => {
+    const constructor = customElements.get('foxy-internal-summary-control');
+    expect(constructor).to.equal(InternalSummaryControl);
+  });
+
+  it('imports and defines foxy-internal-switch-control', () => {
+    const constructor = customElements.get('foxy-internal-switch-control');
+    expect(constructor).to.equal(InternalSwitchControl);
   });
 
-  it('imports and defines foxy-internal-integer-control', () => {
-    const constructor = customElements.get('foxy-internal-integer-control');
-    expect(constructor).to.equal(InternalIntegerControl);
+  it('imports and defines foxy-internal-select-control', () => {
+    const constructor = customElements.get('foxy-internal-select-control');
+    expect(constructor).to.equal(InternalSelectControl);
+  });
+
+  it('imports and defines foxy-internal-number-control', () => {
+    const constructor = customElements.get('foxy-internal-number-control');
+    expect(constructor).to.equal(InternalNumberControl);
   });
 
   it('imports and defines foxy-internal-text-control', () => {
@@ -47,12 +52,6 @@ describe('SubscriptionSettingsForm', () => {
     expect(constructor).to.equal(InternalForm);
   });
 
-  it('imports and defines foxy-internal-subscription-settings-form-reattempt-bypass', () => {
-    const tag = 'foxy-internal-subscription-settings-form-reattempt-bypass';
-    const constructor = customElements.get(tag);
-    expect(constructor).to.equal(InternalSubscriptionSettingsFormReattemptBypass);
-  });
-
   it('imports and defines itself as foxy-subscription-settings-form', () => {
     const constructor = customElements.get('foxy-subscription-settings-form');
     expect(constructor).to.equal(Form);
@@ -131,7 +130,34 @@ describe('SubscriptionSettingsForm', () => {
     expect(form.hiddenSelector.matches('header:copy-id', true)).to.be.true;
   });
 
-  it('renders radio group with past due amount handling options', async () => {
+  it('hides reattempt bypass strings control if reattempt bypass is off', async () => {
+    const form = new Form();
+    const scope = 'reattempts-group:reattempt-bypass-strings';
+
+    form.data = await getTestData<Data>('./hapi/subscription_settings/0');
+    form.edit({ reattempt_bypass_logic: '' });
+    expect(form.hiddenSelector.matches(scope, true)).to.be.true;
+
+    form.edit({ reattempt_bypass_logic: 'skip_if_exists' });
+    expect(form.hiddenSelector.matches(scope, true)).to.be.false;
+  });
+
+  it('renders a summary control for past due amount settings', async () => {
+    const router = createRouter();
+    const element = await fixture<Form>(html`
+      <foxy-subscription-settings-form
+        href="https://demo.api/hapi/subscription_settings/0"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-subscription-settings-form>
+    `);
+
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    const control = element.renderRoot.querySelector('[infer="past-due-amount-group"]');
+    expect(control).to.be.instanceOf(InternalSummaryControl);
+  });
+
+  it('renders a select control with past due amount handling options', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
@@ -142,17 +168,19 @@ describe('SubscriptionSettingsForm', () => {
     `);
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector('[infer="past-due-amount-handling"]');
+    const control = element.renderRoot.querySelector(
+      '[infer="past-due-amount-group"] [infer="past-due-amount-handling"]'
+    );
 
-    expect(control).to.be.instanceOf(InternalRadioGroupControl);
+    expect(control).to.be.instanceOf(InternalSelectControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('options', [
       { label: 'option_increment', value: 'increment' },
       { label: 'option_replace', value: 'replace' },
-      { label: 'option_ignore', value: 'ignore' },
     ]);
   });
 
-  it('renders a checkbox controlling automatic past due charging', async () => {
+  it('renders a switch controlling automatic past due charging', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
@@ -163,25 +191,15 @@ describe('SubscriptionSettingsForm', () => {
     `);
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector<InternalCheckboxGroupControl>(
-      '[infer="automatically-charge-past-due-amount"]'
+    const control = element.renderRoot.querySelector<InternalSwitchControl>(
+      '[infer="past-due-amount-group"] [infer="automatically-charge-past-due-amount"]'
     );
 
-    expect(control).to.be.instanceOf(InternalCheckboxGroupControl);
-    expect(control).to.have.deep.property('options', [
-      { label: 'option_checked', value: 'checked' },
-    ]);
-
-    element.edit({ automatically_charge_past_due_amount: false });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal([]);
-
-    element.edit({ automatically_charge_past_due_amount: true });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal(['checked']);
+    expect(control).to.be.instanceOf(InternalSwitchControl);
+    expect(control).to.have.attribute('helper-text-as-tooltip');
   });
 
-  it('renders a checkbox controlling clearing past due amounts on success when automatic past due charging is off', async () => {
+  it('renders a switch controlling resetting next date on makeup payment', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
@@ -192,31 +210,34 @@ describe('SubscriptionSettingsForm', () => {
     `);
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    const control = element.renderRoot.querySelector<InternalSwitchControl>(
+      '[infer="past-due-amount-group"] [infer="reset-nextdate-on-makeup-payment"]'
+    );
 
-    element.edit({
-      automatically_charge_past_due_amount: false,
-      clear_past_due_amounts_on_success: false,
-    });
+    expect(control).to.be.instanceOf(InternalSwitchControl);
+    expect(control).to.have.attribute('helper-text-as-tooltip');
+  });
 
-    await element.requestUpdate();
+  it('renders a switch controlling preventing customer cancel with past due', async () => {
+    const router = createRouter();
+    const element = await fixture<Form>(html`
+      <foxy-subscription-settings-form
+        href="https://demo.api/hapi/subscription_settings/0"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-subscription-settings-form>
+    `);
 
-    const control = element.renderRoot.querySelector<InternalCheckboxGroupControl>(
-      '[infer="clear-past-due-amounts-on-success"]'
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    const control = element.renderRoot.querySelector<InternalSwitchControl>(
+      '[infer="past-due-amount-group"] [infer="prevent-customer-cancel-with-past-due"]'
     );
 
-    expect(control).to.be.instanceOf(InternalCheckboxGroupControl);
-    expect(control).to.have.deep.property('options', [
-      { label: 'option_checked', value: 'checked' },
-    ]);
-
-    expect(control?.getValue()).to.deep.equal([]);
-
-    element.edit({ clear_past_due_amounts_on_success: true });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal(['checked']);
+    expect(control).to.be.instanceOf(InternalSwitchControl);
+    expect(control).to.have.attribute('helper-text-as-tooltip');
   });
 
-  it('renders a checkbox controlling resetting next date on makeup payment when automatic past due charging is off', async () => {
+  it('renders a summary control for reattempt settings', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
@@ -227,47 +248,65 @@ describe('SubscriptionSettingsForm', () => {
     `);
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    const control = element.renderRoot.querySelector('[infer="reattempts-group"]');
+    expect(control).to.be.instanceOf(InternalSummaryControl);
+  });
 
-    element.edit({
-      automatically_charge_past_due_amount: false,
-      reset_nextdate_on_makeup_payment: false,
-    });
-
-    await element.requestUpdate();
+  it('renders a select control with reattempt bypass logic options', async () => {
+    const router = createRouter();
+    const element = await fixture<Form>(html`
+      <foxy-subscription-settings-form
+        href="https://demo.api/hapi/subscription_settings/0"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-subscription-settings-form>
+    `);
 
-    const control = element.renderRoot.querySelector<InternalCheckboxGroupControl>(
-      '[infer="reset-nextdate-on-makeup-payment"]'
+    const control = element.renderRoot.querySelector(
+      '[infer="reattempts-group"] [infer="reattempt-bypass-logic"]'
     );
 
-    expect(control).to.be.instanceOf(InternalCheckboxGroupControl);
+    expect(control).to.be.instanceOf(InternalSelectControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('options', [
-      { label: 'option_checked', value: 'checked' },
+      { value: '', label: 'option_always_reattempt' },
+      { value: 'skip_if_exists', label: 'option_skip_if_exists' },
+      { value: 'reattempt_if_exists', label: 'option_reattempt_if_exists' },
     ]);
-
-    expect(control?.getValue()).to.deep.equal([]);
-
-    element.edit({ reset_nextdate_on_makeup_payment: true });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal(['checked']);
   });
 
-  it('renders reattempt bypass settings control', async () => {
+  it('renders a reattempt bypass strings list control', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
         href="https://demo.api/hapi/subscription_settings/0"
+        ns="subscription-settings-form"
         @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
       >
       </foxy-subscription-settings-form>
     `);
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector('[infer="reattempt-bypass"]');
+    const control = element.renderRoot.querySelector<InternalEditableListControl>(
+      '[infer="reattempts-group"] [infer="reattempt-bypass-strings"]'
+    );
+
+    expect(control).to.be.instanceOf(InternalEditableListControl);
+    expect(control).to.have.property('layout', 'summary-item');
+
+    element.edit({ reattempt_bypass_strings: 'foo, bar, baz' });
+    await element.requestUpdate();
+    expect(control?.getValue()).to.deep.equal([
+      { value: 'foo' },
+      { value: 'bar' },
+      { value: 'baz' },
+    ]);
 
-    expect(control).to.be.instanceOf(InternalSubscriptionSettingsFormReattemptBypass);
+    control?.setValue([{ value: 'qux' }, { value: 'quux' }]);
+    expect(element).to.have.nested.property('form.reattempt_bypass_strings', 'qux,quux');
   });
 
-  it('renders reattempt schedule list control', async () => {
+  it('renders a reattempt schedule list control', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
@@ -279,7 +318,7 @@ describe('SubscriptionSettingsForm', () => {
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
     const control = element.renderRoot.querySelector<InternalEditableListControl>(
-      '[infer="reattempt-schedule"]'
+      '[infer="reattempts-group"] [infer="reattempt-schedule"]'
     );
 
     expect(control).to.be.instanceOf(InternalEditableListControl);
@@ -302,7 +341,23 @@ describe('SubscriptionSettingsForm', () => {
     expect(element).to.have.nested.property('form.reattempt_schedule', '8,20');
   });
 
-  it('renders reminder email schedule list control', async () => {
+  it('renders a summary control for email settings', async () => {
+    const router = createRouter();
+    const element = await fixture<Form>(html`
+      <foxy-subscription-settings-form
+        ns="subscription-settings-form"
+        href="https://demo.api/hapi/subscription_settings/0"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-subscription-settings-form>
+    `);
+
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    const control = element.renderRoot.querySelector('[infer="emails-group"]');
+    expect(control).to.be.instanceOf(InternalSummaryControl);
+  });
+
+  it('renders a reminder email schedule list control', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
@@ -314,10 +369,11 @@ describe('SubscriptionSettingsForm', () => {
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
     const control = element.renderRoot.querySelector<InternalEditableListControl>(
-      '[infer="reminder-email-schedule"]'
+      '[infer="emails-group"] [infer="reminder-email-schedule"]'
     );
 
     expect(control).to.be.instanceOf(InternalEditableListControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('inputParams', {
       type: 'number',
       step: '1',
@@ -337,7 +393,7 @@ describe('SubscriptionSettingsForm', () => {
     expect(element).to.have.nested.property('form.reminder_email_schedule', '8,20');
   });
 
-  it('renders payment method expiry email schedule list control', async () => {
+  it('renders a payment method expiry email schedule list control', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
@@ -349,10 +405,11 @@ describe('SubscriptionSettingsForm', () => {
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
     const control = element.renderRoot.querySelector<InternalEditableListControl>(
-      '[infer="expiring-soon-payment-reminder-schedule"]'
+      '[infer="emails-group"] [infer="expiring-soon-payment-reminder-schedule"]'
     );
 
     expect(control).to.be.instanceOf(InternalEditableListControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('inputParams', {
       type: 'number',
       step: '1',
@@ -383,25 +440,31 @@ describe('SubscriptionSettingsForm', () => {
     `);
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector<InternalCheckboxGroupControl>(
-      '[infer="send-email-receipts-for-automated-billing"]'
+    const control = element.renderRoot.querySelector<InternalSwitchControl>(
+      '[infer="emails-group"] [infer="send-email-receipts-for-automated-billing"]'
     );
 
-    expect(control).to.be.instanceOf(InternalCheckboxGroupControl);
-    expect(control).to.have.deep.property('options', [
-      { label: 'option_checked', value: 'checked' },
-    ]);
+    expect(control).to.be.instanceOf(InternalSwitchControl);
+    expect(control).to.have.attribute('helper-text-as-tooltip');
+  });
 
-    element.edit({ send_email_receipts_for_automated_billing: false });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal([]);
+  it('renders a summary control for modification settings', async () => {
+    const router = createRouter();
+    const element = await fixture<Form>(html`
+      <foxy-subscription-settings-form
+        ns="subscription-settings-form"
+        href="https://demo.api/hapi/subscription_settings/0"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-subscription-settings-form>
+    `);
 
-    element.edit({ send_email_receipts_for_automated_billing: true });
-    await element.requestUpdate();
-    expect(control?.getValue()).to.deep.equal(['checked']);
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    const control = element.renderRoot.querySelector('[infer="modification-group"]');
+    expect(control).to.be.instanceOf(InternalSummaryControl);
   });
 
-  it('renders an integer input for cancellation schedule', async () => {
+  it('renders a text control for modification url', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
@@ -412,23 +475,31 @@ describe('SubscriptionSettingsForm', () => {
     `);
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector<InternalIntegerControl>(
-      '[infer="cancellation-schedule"]'
+    const control = element.renderRoot.querySelector(
+      '[infer="modification-group"] [infer="modification-url"]'
     );
 
-    expect(control).to.be.instanceOf(InternalIntegerControl);
-    expect(control).to.have.property('min', 1);
+    expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
+  });
 
-    element.edit({ cancellation_schedule: 0 });
-    await element.requestUpdate();
-    expect(control).to.have.property('suffix', '');
+  it('renders a summary control for cancellation settings', async () => {
+    const router = createRouter();
+    const element = await fixture<Form>(html`
+      <foxy-subscription-settings-form
+        ns="subscription-settings-form"
+        href="https://demo.api/hapi/subscription_settings/0"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-subscription-settings-form>
+    `);
 
-    element.edit({ cancellation_schedule: 7 });
-    await element.requestUpdate();
-    expect(control).to.have.property('suffix', 'day_suffix');
+    await waitUntil(() => !!element.data, '', { timeout: 5000 });
+    const control = element.renderRoot.querySelector('[infer="cancellation-group"]');
+    expect(control).to.be.instanceOf(InternalSummaryControl);
   });
 
-  it('renders a text control for modification url', async () => {
+  it('renders a number control for cancellation schedule', async () => {
     const router = createRouter();
     const element = await fixture<Form>(html`
       <foxy-subscription-settings-form
@@ -439,8 +510,20 @@ describe('SubscriptionSettingsForm', () => {
     `);
 
     await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.renderRoot.querySelector('[infer="modification-url"]');
+    const control = element.renderRoot.querySelector<InternalNumberControl>(
+      '[infer="cancellation-group"] [infer="cancellation-schedule"]'
+    );
 
-    expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.be.instanceOf(InternalNumberControl);
+    expect(control).to.have.attribute('step', '1');
+    expect(control).to.have.attribute('min', '1');
+
+    element.edit({ cancellation_schedule: 0 });
+    await element.requestUpdate();
+    expect(control).to.have.attribute('suffix', '');
+
+    element.edit({ cancellation_schedule: 7 });
+    await element.requestUpdate();
+    expect(control).to.have.attribute('suffix', 'day_suffix');
   });
 });
diff --git a/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.ts b/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.ts
index 6831df852..0d39c3167 100644
--- a/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.ts
+++ b/src/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.ts
@@ -1,8 +1,8 @@
-import type { Data } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
 import type { Option } from '../../internal/InternalCheckboxGroupControl/types';
 import type { Item } from '../../internal/InternalEditableListControl/types';
+import type { Data } from './types';
 
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { BooleanSelector } from '@foxy.io/sdk/core';
@@ -36,26 +36,9 @@ export class SubscriptionSettingsForm extends Base<Data> {
     ];
   }
 
-  private __sendEmailReceiptsForAutomatedBillingOptions: Option[] = [
-    { label: 'option_checked', value: 'checked' },
-  ];
-
-  private __automaticallyChargePastDueAmountOptions: Option[] = [
-    { label: 'option_checked', value: 'checked' },
-  ];
-
-  private __clearPastDueAmountsOnSuccessOptions: Option[] = [
-    { label: 'option_checked', value: 'checked' },
-  ];
-
-  private __resetNextDateOnMakeUpPaymentOptions: Option[] = [
-    { label: 'option_checked', value: 'checked' },
-  ];
-
   private __pastDueAmountHandlingOptions: Option[] = [
     { label: 'option_increment', value: 'increment' },
     { label: 'option_replace', value: 'replace' },
-    { label: 'option_ignore', value: 'ignore' },
   ];
 
   private __positiveIntegerInputParams = {
@@ -64,14 +47,6 @@ export class SubscriptionSettingsForm extends Base<Data> {
     min: '0',
   };
 
-  private __sendEmailReceiptsForAutomatedBillingGetValue = () => {
-    return this.form.send_email_receipts_for_automated_billing ? ['checked'] : [];
-  };
-
-  private __sendEmailReceiptsForAutomatedBillingSetValue = (newValue: string[]) => {
-    this.edit({ send_email_receipts_for_automated_billing: newValue.includes('checked') });
-  };
-
   private __expiringSoonPaymentReminderScheduleGetValue = () => {
     const days = this.form.expiring_soon_payment_reminder_schedule?.split(',') ?? [];
 
@@ -88,35 +63,6 @@ export class SubscriptionSettingsForm extends Base<Data> {
     });
   };
 
-  private __automaticallyChargePastDueAmountGetValue = () => {
-    return this.form.automatically_charge_past_due_amount ? ['checked'] : [];
-  };
-
-  private __automaticallyChargePastDueAmountSetValue = (newValue: string[]) => {
-    const isChecked = newValue.includes('checked');
-    this.edit({
-      automatically_charge_past_due_amount: isChecked,
-      clear_past_due_amounts_on_success: isChecked ? false : void 0,
-      reset_nextdate_on_makeup_payment: isChecked ? false : void 0,
-    });
-  };
-
-  private __clearPastDueAmountsOnSuccessGetValue = () => {
-    return this.form.clear_past_due_amounts_on_success ? ['checked'] : [];
-  };
-
-  private __clearPastDueAmountsOnSuccessSetValue = (newValue: string[]) => {
-    this.edit({ clear_past_due_amounts_on_success: newValue.includes('checked') });
-  };
-
-  private __resetNextDateOnMakeUpPaymentGetValue = () => {
-    return this.form.reset_nextdate_on_makeup_payment ? ['checked'] : [];
-  };
-
-  private __resetNextDateOnMakeUpPaymentSetValue = (newValue: string[]) => {
-    this.edit({ reset_nextdate_on_makeup_payment: newValue.includes('checked') });
-  };
-
   private __reminderEmailScheduleGetValue = () => {
     const days = this.form.reminder_email_schedule?.split(',') ?? [];
 
@@ -145,96 +91,133 @@ export class SubscriptionSettingsForm extends Base<Data> {
     this.edit({ reattempt_schedule: newItems.map(({ value }) => value).join() });
   };
 
+  private __getReattemptBypassStringsValue = () => {
+    const strings = this.form.reattempt_bypass_strings?.split(',') ?? [];
+
+    return strings
+      .map(text => text.trim())
+      .filter((text, index, strings) => text && strings.indexOf(text) === index)
+      .map(text => ({ value: text }));
+  };
+
+  private __setReattemptBypassStringsValue = (newValue: Item[]) => {
+    this.edit({ reattempt_bypass_strings: newValue.map(({ value }) => value).join() });
+  };
+
+  private __reattemptBypassLogicOptions: Option[] = [
+    { value: '', label: 'option_always_reattempt' },
+    { value: 'skip_if_exists', label: 'option_skip_if_exists' },
+    { value: 'reattempt_if_exists', label: 'option_reattempt_if_exists' },
+  ];
+
   get hiddenSelector(): BooleanSelector {
-    return new BooleanSelector(`header:copy-id ${super.hiddenSelector}`.trim());
+    const alwaysMatch = ['header:copy-id', super.hiddenSelector.toString()];
+
+    if (!this.form.reattempt_bypass_logic) {
+      alwaysMatch.push('reattempts-group:reattempt-bypass-strings');
+    }
+
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
   }
 
   renderBody(): TemplateResult {
     return html`
       ${this.renderHeader()}
 
-      <foxy-internal-radio-group-control
-        infer="past-due-amount-handling"
-        theme="vertical list"
-        .options=${this.__pastDueAmountHandlingOptions}
-      >
-      </foxy-internal-radio-group-control>
-
-      <foxy-internal-checkbox-group-control
-        infer="automatically-charge-past-due-amount"
-        class="-mt-xs -mb-m"
-        .getValue=${this.__automaticallyChargePastDueAmountGetValue}
-        .setValue=${this.__automaticallyChargePastDueAmountSetValue}
-        .options=${this.__automaticallyChargePastDueAmountOptions}
-      >
-      </foxy-internal-checkbox-group-control>
-
-      ${this.form.automatically_charge_past_due_amount
-        ? ''
-        : html`
-            <foxy-internal-checkbox-group-control
-              infer="clear-past-due-amounts-on-success"
-              class="-mt-xs -mb-m"
-              .getValue=${this.__clearPastDueAmountsOnSuccessGetValue}
-              .setValue=${this.__clearPastDueAmountsOnSuccessSetValue}
-              .options=${this.__clearPastDueAmountsOnSuccessOptions}
-            >
-            </foxy-internal-checkbox-group-control>
-
-            <foxy-internal-checkbox-group-control
-              infer="reset-nextdate-on-makeup-payment"
-              class="-mt-xs -mb-m"
-              .getValue=${this.__resetNextDateOnMakeUpPaymentGetValue}
-              .setValue=${this.__resetNextDateOnMakeUpPaymentSetValue}
-              .options=${this.__resetNextDateOnMakeUpPaymentOptions}
-            >
-            </foxy-internal-checkbox-group-control>
-          `}
-
-      <foxy-internal-subscription-settings-form-reattempt-bypass infer="reattempt-bypass">
-      </foxy-internal-subscription-settings-form-reattempt-bypass>
-
-      <foxy-internal-editable-list-control
-        infer="reattempt-schedule"
-        .inputParams=${this.__positiveIntegerInputParams}
-        .getValue=${this.__reattemptScheduleGetValue}
-        .setValue=${this.__reattemptScheduleSetValue}
-      >
-      </foxy-internal-editable-list-control>
-
-      <foxy-internal-editable-list-control
-        infer="reminder-email-schedule"
-        .inputParams=${this.__positiveIntegerInputParams}
-        .getValue=${this.__reminderEmailScheduleGetValue}
-        .setValue=${this.__reminderEmailScheduleSetValue}
-      >
-      </foxy-internal-editable-list-control>
-
-      <foxy-internal-editable-list-control
-        infer="expiring-soon-payment-reminder-schedule"
-        .inputParams=${this.__positiveIntegerInputParams}
-        .getValue=${this.__expiringSoonPaymentReminderScheduleGetValue}
-        .setValue=${this.__expiringSoonPaymentReminderScheduleSetValue}
-      >
-      </foxy-internal-editable-list-control>
-
-      <foxy-internal-checkbox-group-control
-        infer="send-email-receipts-for-automated-billing"
-        class="-mt-xs -mb-m"
-        .options=${this.__sendEmailReceiptsForAutomatedBillingOptions}
-        .getValue=${this.__sendEmailReceiptsForAutomatedBillingGetValue}
-        .setValue=${this.__sendEmailReceiptsForAutomatedBillingSetValue}
-      >
-      </foxy-internal-checkbox-group-control>
-
-      <foxy-internal-integer-control
-        suffix=${this.__cancellationScheduleSuffix}
-        infer="cancellation-schedule"
-        min="1"
-      >
-      </foxy-internal-integer-control>
-
-      <foxy-internal-text-control infer="modification-url"></foxy-internal-text-control>
+      <foxy-internal-summary-control infer="past-due-amount-group">
+        <foxy-internal-select-control
+          layout="summary-item"
+          infer="past-due-amount-handling"
+          .options=${this.__pastDueAmountHandlingOptions}
+        >
+        </foxy-internal-select-control>
+
+        <foxy-internal-switch-control
+          infer="automatically-charge-past-due-amount"
+          helper-text-as-tooltip
+        >
+        </foxy-internal-switch-control>
+
+        <foxy-internal-switch-control
+          infer="reset-nextdate-on-makeup-payment"
+          helper-text-as-tooltip
+        >
+        </foxy-internal-switch-control>
+
+        <foxy-internal-switch-control
+          infer="prevent-customer-cancel-with-past-due"
+          helper-text-as-tooltip
+        >
+        </foxy-internal-switch-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="reattempts-group">
+        <foxy-internal-select-control
+          layout="summary-item"
+          infer="reattempt-bypass-logic"
+          .options=${this.__reattemptBypassLogicOptions}
+        >
+        </foxy-internal-select-control>
+
+        <foxy-internal-editable-list-control
+          layout="summary-item"
+          infer="reattempt-bypass-strings"
+          .getValue=${this.__getReattemptBypassStringsValue}
+          .setValue=${this.__setReattemptBypassStringsValue}
+        >
+        </foxy-internal-editable-list-control>
+
+        <foxy-internal-editable-list-control
+          layout="summary-item"
+          infer="reattempt-schedule"
+          .inputParams=${this.__positiveIntegerInputParams}
+          .getValue=${this.__reattemptScheduleGetValue}
+          .setValue=${this.__reattemptScheduleSetValue}
+        >
+        </foxy-internal-editable-list-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="emails-group">
+        <foxy-internal-switch-control
+          infer="send-email-receipts-for-automated-billing"
+          helper-text-as-tooltip
+        >
+        </foxy-internal-switch-control>
+
+        <foxy-internal-editable-list-control
+          layout="summary-item"
+          infer="reminder-email-schedule"
+          .inputParams=${this.__positiveIntegerInputParams}
+          .getValue=${this.__reminderEmailScheduleGetValue}
+          .setValue=${this.__reminderEmailScheduleSetValue}
+        >
+        </foxy-internal-editable-list-control>
+
+        <foxy-internal-editable-list-control
+          layout="summary-item"
+          infer="expiring-soon-payment-reminder-schedule"
+          .inputParams=${this.__positiveIntegerInputParams}
+          .getValue=${this.__expiringSoonPaymentReminderScheduleGetValue}
+          .setValue=${this.__expiringSoonPaymentReminderScheduleSetValue}
+        >
+        </foxy-internal-editable-list-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="modification-group">
+        <foxy-internal-text-control layout="summary-item" infer="modification-url">
+        </foxy-internal-text-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="cancellation-group">
+        <foxy-internal-number-control
+          layout="summary-item"
+          suffix=${this.__cancellationScheduleSuffix}
+          infer="cancellation-schedule"
+          step="1"
+          min="1"
+        >
+        </foxy-internal-number-control>
+      </foxy-internal-summary-control>
 
       ${super.renderBody()}
     `;
diff --git a/src/elements/public/SubscriptionSettingsForm/index.ts b/src/elements/public/SubscriptionSettingsForm/index.ts
index c6a025dc0..1d0772ae7 100644
--- a/src/elements/public/SubscriptionSettingsForm/index.ts
+++ b/src/elements/public/SubscriptionSettingsForm/index.ts
@@ -1,12 +1,11 @@
-import '../../internal/InternalCheckboxGroupControl/index';
 import '../../internal/InternalEditableListControl/index';
-import '../../internal/InternalRadioGroupControl/index';
-import '../../internal/InternalIntegerControl/index';
+import '../../internal/InternalSummaryControl/index';
+import '../../internal/InternalSwitchControl/index';
+import '../../internal/InternalSelectControl/index';
+import '../../internal/InternalNumberControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 
-import './internal/InternalSubscriptionSettingsFormReattemptBypass/index';
-
 import { SubscriptionSettingsForm } from './SubscriptionSettingsForm';
 
 customElements.define('foxy-subscription-settings-form', SubscriptionSettingsForm);
diff --git a/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/InternalSubscriptionSettingsFormReattemptBypass.test.ts b/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/InternalSubscriptionSettingsFormReattemptBypass.test.ts
deleted file mode 100644
index f60fedbbb..000000000
--- a/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/InternalSubscriptionSettingsFormReattemptBypass.test.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-import type { FetchEvent } from '../../../NucleonElement/FetchEvent';
-import type { Data } from '../../types';
-
-import '../../../NucleonElement/index';
-import './index';
-
-import { InternalSubscriptionSettingsFormReattemptBypass as Control } from './InternalSubscriptionSettingsFormReattemptBypass';
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { InternalEditableListControl } from '../../../../internal/InternalEditableListControl/InternalEditableListControl';
-import { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';
-import { NucleonElement } from '../../../NucleonElement/NucleonElement';
-import { createRouter } from '../../../../../server/index';
-import { I18n } from '../../../I18n/I18n';
-
-describe('InternalSubscriptionSettingsFormReattemptBypass', () => {
-  it('imports and defines vaadin-radio-button', () => {
-    const element = customElements.get('vaadin-radio-button');
-    expect(element).to.exist;
-  });
-
-  it('imports and defines vaadin-radio-group', () => {
-    const element = customElements.get('vaadin-radio-group');
-    expect(element).to.exist;
-  });
-
-  it('imports and defines foxy-internal-editable-list-control', () => {
-    const element = customElements.get('foxy-internal-editable-list-control');
-    expect(element).to.equal(InternalEditableListControl);
-  });
-
-  it('imports and defines foxy-internal-editable-control', () => {
-    const element = customElements.get('foxy-internal-editable-control');
-    expect(element).to.equal(InternalEditableControl);
-  });
-
-  it('imports and defines foxy-i18n', () => {
-    const element = customElements.get('foxy-i18n');
-    expect(element).to.equal(I18n);
-  });
-
-  it('imports and defines itself as foxy-internal-subscription-settings-form-reattempt-bypass', () => {
-    const element = customElements.get('foxy-internal-subscription-settings-form-reattempt-bypass');
-    expect(element).to.equal(Control);
-  });
-
-  it('extends foxy-internal-editable-control', () => {
-    expect(new Control()).to.be.instanceOf(InternalEditableControl);
-  });
-
-  it('renders option group with 4 options', async () => {
-    const router = createRouter();
-
-    const element = await fixture<NucleonElement<Data>>(html`
-      <foxy-nucleon
-        href="https://demo.api/hapi/subscription_settings/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-        <foxy-internal-subscription-settings-form-reattempt-bypass infer="">
-        </foxy-internal-subscription-settings-form-reattempt-bypass>
-      </foxy-nucleon>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-
-    const control = element.firstElementChild as Control;
-    const group = control.renderRoot.querySelector('vaadin-radio-group');
-    const buttons = control.renderRoot.querySelectorAll('vaadin-radio-button');
-    const button0Label = buttons[0].querySelector('foxy-i18n');
-    const button1Label = buttons[1].querySelector('foxy-i18n');
-    const button2Label = buttons[2].querySelector('foxy-i18n');
-    const button3Label = buttons[3].querySelector('foxy-i18n');
-
-    expect(group).to.exist;
-    expect(buttons).to.have.length(4);
-
-    expect(buttons[0]).to.have.value('reattempt_if_exists');
-    expect(button0Label).to.have.attribute('infer', '');
-    expect(button0Label).to.have.attribute('key', 'option_reattempt_if_exists');
-
-    expect(buttons[1]).to.have.value('skip_if_exists');
-    expect(button1Label).to.have.attribute('infer', '');
-    expect(button1Label).to.have.attribute('key', 'option_skip_if_exists');
-
-    expect(buttons[2]).to.have.value('always_reattempt');
-    expect(button2Label).to.have.attribute('infer', '');
-    expect(button2Label).to.have.attribute('key', 'option_always_reattempt');
-
-    expect(buttons[3]).to.have.value('never_reattempt');
-    expect(button3Label).to.have.attribute('infer', '');
-    expect(button3Label).to.have.attribute('key', 'option_never_reattempt');
-  });
-
-  it('passes host state to option group', async () => {
-    const router = createRouter();
-
-    const element = await fixture<NucleonElement<Data>>(html`
-      <foxy-nucleon
-        href="https://demo.api/hapi/subscription_settings/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-        <foxy-internal-subscription-settings-form-reattempt-bypass infer="">
-        </foxy-internal-subscription-settings-form-reattempt-bypass>
-      </foxy-nucleon>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-
-    const control = element.firstElementChild as Control;
-    const group = control.renderRoot.querySelector('vaadin-radio-group');
-
-    expect(group).to.have.attribute('helper-text', 'helper_text');
-    expect(group).to.have.attribute('label', 'label');
-
-    expect(group).to.not.have.attribute('disabled');
-    expect(group).to.not.have.attribute('readonly');
-
-    control.disabled = true;
-    control.readonly = true;
-    control.label = 'Test label';
-    control.helperText = 'Test helper text';
-    await control.requestUpdate();
-
-    expect(group).to.have.attribute('disabled');
-    expect(group).to.have.attribute('readonly');
-    expect(group).to.have.attribute('label', 'Test label');
-    expect(group).to.have.attribute('helper-text', 'Test helper text');
-  });
-
-  it('reflects nucleon form values to option group choice', async () => {
-    const router = createRouter();
-    const element = await fixture<NucleonElement<Data>>(html`
-      <foxy-nucleon
-        href="https://demo.api/hapi/subscription_settings/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-        <foxy-internal-subscription-settings-form-reattempt-bypass infer="">
-        </foxy-internal-subscription-settings-form-reattempt-bypass>
-      </foxy-nucleon>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.firstElementChild as Control;
-    const group = control.renderRoot.querySelector('vaadin-radio-group');
-
-    element.edit({ reattempt_bypass_strings: '1,2' });
-    element.edit({ reattempt_bypass_logic: 'skip_if_exists' });
-    await element.requestUpdate().then(() => control.requestUpdate());
-    expect(group).to.have.property('value', 'skip_if_exists');
-
-    element.edit({ reattempt_bypass_strings: '1,2' });
-    element.edit({ reattempt_bypass_logic: 'reattempt_if_exists' });
-    await element.requestUpdate().then(() => control.requestUpdate());
-    expect(group).to.have.property('value', 'reattempt_if_exists');
-
-    element.edit({ reattempt_bypass_strings: '' });
-    element.edit({ reattempt_bypass_logic: 'reattempt_if_exists' });
-    await element.requestUpdate().then(() => control.requestUpdate());
-    expect(group).to.have.property('value', 'never_reattempt');
-
-    element.edit({ reattempt_bypass_strings: '' });
-    element.edit({ reattempt_bypass_logic: 'skip_if_exists' });
-    await element.requestUpdate().then(() => control.requestUpdate());
-    expect(group).to.have.property('value', 'always_reattempt');
-  });
-
-  it('clears bypass strings and sets bypass logic to "reattempt_if_exists" if "never_reattempt" option is chosen', async () => {
-    const router = createRouter();
-    const element = await fixture<NucleonElement<Data>>(html`
-      <foxy-nucleon
-        href="https://demo.api/hapi/subscription_settings/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-        <foxy-internal-subscription-settings-form-reattempt-bypass infer="">
-        </foxy-internal-subscription-settings-form-reattempt-bypass>
-      </foxy-nucleon>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.firstElementChild as Control;
-    const group = control.renderRoot.querySelector('vaadin-radio-group')!;
-
-    group.value = 'never_reattempt';
-    group.dispatchEvent(new CustomEvent('value-changed'));
-    expect(element).to.have.nested.property('form.reattempt_bypass_logic', 'reattempt_if_exists');
-    expect(element).to.have.nested.property('form.reattempt_bypass_strings', '');
-  });
-
-  it('clears bypass strings and sets bypass logic to "skip_if_exists" if "always_reattempt" option is chosen', async () => {
-    const router = createRouter();
-    const element = await fixture<NucleonElement<Data>>(html`
-      <foxy-nucleon
-        href="https://demo.api/hapi/subscription_settings/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-        <foxy-internal-subscription-settings-form-reattempt-bypass infer="">
-        </foxy-internal-subscription-settings-form-reattempt-bypass>
-      </foxy-nucleon>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    const control = element.firstElementChild as Control;
-    const group = control.renderRoot.querySelector('vaadin-radio-group')!;
-
-    group.value = 'always_reattempt';
-    group.dispatchEvent(new CustomEvent('value-changed'));
-    expect(element).to.have.nested.property('form.reattempt_bypass_logic', 'skip_if_exists');
-    expect(element).to.have.nested.property('form.reattempt_bypass_strings', '');
-  });
-
-  it('renders editable list of bypass strings when such strings exist', async () => {
-    const router = createRouter();
-    const element = await fixture<NucleonElement<Data>>(html`
-      <foxy-nucleon
-        href="https://demo.api/hapi/subscription_settings/0"
-        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
-      >
-        <foxy-internal-subscription-settings-form-reattempt-bypass infer="">
-        </foxy-internal-subscription-settings-form-reattempt-bypass>
-      </foxy-nucleon>
-    `);
-
-    await waitUntil(() => !!element.data, '', { timeout: 5000 });
-    element.edit({ reattempt_bypass_strings: '1,2,3' });
-    await element.requestUpdate();
-
-    const control = element.firstElementChild as Control;
-    const list = control.renderRoot.querySelector(
-      'foxy-internal-editable-list-control'
-    ) as InternalEditableListControl;
-
-    expect(list).to.have.attribute('infer', 'reattempt-bypass-strings');
-    expect(list.getValue()).to.deep.equal([{ value: '1' }, { value: '2' }, { value: '3' }]);
-
-    list.setValue([{ value: '5' }, { value: '6' }]);
-    expect(element).to.have.nested.property('form.reattempt_bypass_strings', '5,6');
-  });
-});
diff --git a/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/InternalSubscriptionSettingsFormReattemptBypass.ts b/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/InternalSubscriptionSettingsFormReattemptBypass.ts
deleted file mode 100644
index f2d896fe2..000000000
--- a/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/InternalSubscriptionSettingsFormReattemptBypass.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import type { SubscriptionSettingsForm } from '../../SubscriptionSettingsForm';
-import type { RadioGroupElement } from '@vaadin/vaadin-radio-button/vaadin-radio-group';
-import type { TemplateResult } from 'lit-html';
-import type { CSSResultArray } from 'lit-element';
-import type { Item } from '../../../../internal/InternalEditableListControl/types';
-
-import { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';
-import { html } from 'lit-html';
-import { css } from 'lit-element';
-
-export class InternalSubscriptionSettingsFormReattemptBypass extends InternalEditableControl {
-  static get styles(): CSSResultArray {
-    return [
-      super.styles,
-      css`
-        .visible-if-checked {
-          display: none;
-        }
-
-        [checked] .visible-if-checked {
-          display: block;
-        }
-      `,
-    ];
-  }
-
-  nucleon: SubscriptionSettingsForm | null = null;
-
-  private __getReattemptBypassStringsValue = () => {
-    const strings = this.nucleon?.form.reattempt_bypass_strings?.split(',') ?? [];
-
-    return strings
-      .map(text => text.trim())
-      .filter((text, index, strings) => text && strings.indexOf(text) === index)
-      .map(text => ({ value: text }));
-  };
-
-  private __setReattemptBypassStringsValue = (newValue: Item[]) => {
-    type Logic = 'skip_if_exists' | 'reattempt_if_exists';
-
-    const group = this.renderRoot.querySelector('vaadin-radio-group');
-    const logic = (group?.value ?? 'reattempt_if_exists') as Logic;
-
-    this.nucleon?.edit({
-      reattempt_bypass_strings: newValue.map(({ value }) => value).join(),
-      reattempt_bypass_logic: logic,
-    });
-  };
-
-  renderControl(): TemplateResult {
-    const reattemptBypassStringsTemplate = html`
-      <foxy-internal-editable-list-control
-        infer="reattempt-bypass-strings"
-        class="w-full visible-if-checked"
-        .getValue=${this.__getReattemptBypassStringsValue}
-        .setValue=${this.__setReattemptBypassStringsValue}
-        @mousedown=${(evt: MouseEvent) => evt.stopPropagation()}
-        @mouseup=${(evt: MouseEvent) => evt.stopPropagation()}
-        @keydown=${(evt: MouseEvent) => evt.stopPropagation()}
-        @click=${(evt: MouseEvent) => (evt.preventDefault(), evt.stopPropagation())}
-      >
-      </foxy-internal-editable-list-control>
-    `;
-
-    let groupValue: string | undefined = void 0;
-
-    const nucleon = this.nucleon;
-    const reattemptBypassLogic = nucleon?.form.reattempt_bypass_logic;
-    const reattemptBypassStrings = nucleon?.form.reattempt_bypass_strings;
-
-    if (reattemptBypassStrings) {
-      groupValue = reattemptBypassLogic;
-    } else if (reattemptBypassLogic === 'reattempt_if_exists') {
-      groupValue = 'never_reattempt';
-    } else if (reattemptBypassLogic === 'skip_if_exists') {
-      groupValue = 'always_reattempt';
-    }
-
-    return html`
-      <vaadin-radio-group
-        helper-text=${this.helperText}
-        label=${this.label}
-        class="foxy-internal-subscription-settings-form-reattempt-bypass w-full divide-y divide-contrast-10 group"
-        theme="vertical"
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        .value=${groupValue}
-        @value-changed=${this.__handleGroupValueChanged}
-      >
-        <vaadin-radio-button
-          class="foxy-internal-subscription-settings-form-reattempt-bypass p-s w-full space-y-m transition-colors group-hover-divide-contrast-20"
-          value="reattempt_if_exists"
-        >
-          <foxy-i18n infer="" key="option_reattempt_if_exists"></foxy-i18n>
-          ${reattemptBypassStringsTemplate}
-        </vaadin-radio-button>
-
-        <vaadin-radio-button
-          class="foxy-internal-subscription-settings-form-reattempt-bypass p-s w-full space-y-m transition-colors group-hover-divide-contrast-20"
-          value="skip_if_exists"
-        >
-          <foxy-i18n infer="" key="option_skip_if_exists"></foxy-i18n>
-          ${reattemptBypassStringsTemplate}
-        </vaadin-radio-button>
-
-        <vaadin-radio-button
-          class="foxy-internal-subscription-settings-form-reattempt-bypass p-s w-full space-y-m transition-colors group-hover-divide-contrast-20"
-          value="always_reattempt"
-        >
-          <foxy-i18n infer="" key="option_always_reattempt"></foxy-i18n>
-        </vaadin-radio-button>
-
-        <vaadin-radio-button
-          class="foxy-internal-subscription-settings-form-reattempt-bypass p-s w-full space-y-m transition-colors group-hover-divide-contrast-20"
-          value="never_reattempt"
-        >
-          <foxy-i18n infer="" key="option_never_reattempt"></foxy-i18n>
-        </vaadin-radio-button>
-      </vaadin-radio-group>
-    `;
-  }
-
-  private __handleGroupValueChanged(evt: CustomEvent) {
-    const value = (evt.currentTarget as RadioGroupElement).value;
-    const nucleon = this.nucleon;
-
-    if (value === 'never_reattempt' || value === 'always_reattempt') {
-      if (value === 'never_reattempt') {
-        if (nucleon?.form.reattempt_bypass_logic !== 'reattempt_if_exists') {
-          nucleon?.edit({ reattempt_bypass_logic: 'reattempt_if_exists' });
-        }
-      } else {
-        if (nucleon?.form.reattempt_bypass_logic !== 'skip_if_exists') {
-          nucleon?.edit({ reattempt_bypass_logic: 'skip_if_exists' });
-        }
-      }
-
-      if (nucleon?.form.reattempt_bypass_strings) nucleon?.edit({ reattempt_bypass_strings: '' });
-    }
-  }
-}
diff --git a/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/globalStyles.ts b/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/globalStyles.ts
deleted file mode 100644
index 8d08c86b4..000000000
--- a/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/globalStyles.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { css } from 'lit-element';
-
-export const vaadinRadioGroupStyles = css`
-  :host(.foxy-internal-subscription-settings-form-reattempt-bypass) label {
-    padding-bottom: var(--lumo-space-xs);
-  }
-
-  :host(.foxy-internal-subscription-settings-form-reattempt-bypass) [part='group-field'] {
-    display: flex;
-    border: thin solid var(--lumo-contrast-10pct);
-    border-radius: var(--lumo-border-radius);
-    transition: border-color 0.15s ease;
-  }
-
-  /* prettier-ignore */
-  :host(.foxy-internal-subscription-settings-form-reattempt-bypass:not([disabled]):not([readonly]):hover)
-    [part='group-field'] {
-    border-color: var(--lumo-contrast-20pct);
-  }
-`;
-
-export const vaadinRadioButtonStyles = css`
-  :host(.foxy-internal-subscription-settings-form-reattempt-bypass) label {
-    display: flex;
-  }
-
-  :host(.foxy-internal-subscription-settings-form-reattempt-bypass) [part='label'] {
-    flex: 1;
-  }
-`;
diff --git a/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/index.ts b/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/index.ts
deleted file mode 100644
index 1a0ef8642..000000000
--- a/src/elements/public/SubscriptionSettingsForm/internal/InternalSubscriptionSettingsFormReattemptBypass/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import '@vaadin/vaadin-radio-button/vaadin-radio-button';
-import '@vaadin/vaadin-radio-button/vaadin-radio-group';
-
-import '../../../../internal/InternalEditableListControl/index';
-import '../../../../internal/InternalEditableControl/index';
-
-import '../../../I18n/index';
-
-import { InternalSubscriptionSettingsFormReattemptBypass as Control } from './InternalSubscriptionSettingsFormReattemptBypass';
-import { vaadinRadioButtonStyles, vaadinRadioGroupStyles } from './globalStyles';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';
-
-customElements.define('foxy-internal-subscription-settings-form-reattempt-bypass', Control);
-
-registerStyles('vaadin-radio-group', vaadinRadioGroupStyles);
-registerStyles('vaadin-radio-button', vaadinRadioButtonStyles);
-
-export { Control as InternalSubscriptionSettingsFormReattemptBypass };
diff --git a/src/elements/public/SubscriptionSettingsForm/types.ts b/src/elements/public/SubscriptionSettingsForm/types.ts
index 9b9638df5..0cf855fd8 100644
--- a/src/elements/public/SubscriptionSettingsForm/types.ts
+++ b/src/elements/public/SubscriptionSettingsForm/types.ts
@@ -1,4 +1,7 @@
 import type { Resource } from '@foxy.io/sdk/core';
 import type { Rels } from '@foxy.io/sdk/backend';
 
-export type Data = Resource<Rels.SubscriptionSettings>;
+export type Data = Omit<Resource<Rels.SubscriptionSettings>, 'reattempt_bypass_logic'> & {
+  // TODO remove once SDK is updated
+  reattempt_bypass_logic: 'skip_if_exists' | 'reattempt_if_exists' | '';
+};
diff --git a/src/elements/public/WebhookForm/WebhookForm.stories.ts b/src/elements/public/WebhookForm/WebhookForm.stories.ts
index 4f40fb009..3e72b6e02 100644
--- a/src/elements/public/WebhookForm/WebhookForm.stories.ts
+++ b/src/elements/public/WebhookForm/WebhookForm.stories.ts
@@ -12,7 +12,7 @@ const summary: Summary = {
   translatable: true,
   configurable: {
     sections: ['timestamps', 'header'],
-    inputs: ['name', 'format', 'version', 'url', 'query', 'encryption-key', 'event-resource'],
+    inputs: ['name', 'url', 'query', 'encryption-key', 'event-resource'],
     buttons: ['delete', 'create', 'submit', 'undo', 'header:copy-id', 'header:copy-json'],
   },
 };
diff --git a/src/elements/public/WebhookForm/WebhookForm.test.ts b/src/elements/public/WebhookForm/WebhookForm.test.ts
index e6a689847..1462dab7d 100644
--- a/src/elements/public/WebhookForm/WebhookForm.test.ts
+++ b/src/elements/public/WebhookForm/WebhookForm.test.ts
@@ -1,12 +1,16 @@
-import { expect, fixture, html } from '@open-wc/testing';
-import { stub } from 'sinon';
-import { getTestData } from '../../../testgen/getTestData';
-import { InternalAsyncListControl } from '../../internal/InternalAsyncListControl/InternalAsyncListControl';
-import { InternalForm } from '../../internal/InternalForm/InternalForm';
+import './index';
+
+import type { Data } from './types';
+
 import { InternalRadioGroupControl } from '../../internal/InternalRadioGroupControl/InternalRadioGroupControl';
+import { InternalAsyncListControl } from '../../internal/InternalAsyncListControl/InternalAsyncListControl';
+import { InternalPasswordControl } from '../../internal/InternalPasswordControl/InternalPasswordControl';
+import { expect, fixture, html } from '@open-wc/testing';
 import { InternalTextControl } from '../../internal/InternalTextControl/InternalTextControl';
-import { WebhookForm } from './index';
-import { Data } from './types';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+import { getTestData } from '../../../testgen/getTestData';
+import { WebhookForm } from './WebhookForm';
+import { stub } from 'sinon';
 
 describe('WebhookForm', () => {
   it('imports and defines foxy-internal-async-list-control element', () => {
@@ -17,6 +21,10 @@ describe('WebhookForm', () => {
     expect(customElements.get('foxy-internal-radio-group-control')).to.exist;
   });
 
+  it('imports and defines foxy-internal-password-control element', () => {
+    expect(customElements.get('foxy-internal-password-control')).to.exist;
+  });
+
   it('imports and defines foxy-internal-text-control element', () => {
     expect(customElements.get('foxy-internal-text-control')).to.exist;
   });
@@ -57,16 +65,6 @@ describe('WebhookForm', () => {
     expect(WebhookForm.v8n.map(fn => fn({ name }, form))).to.include('name:v8n_too_long');
   });
 
-  it('produces an v8n error if webhook version is missing', () => {
-    const form = new WebhookForm();
-    expect(WebhookForm.v8n.map(fn => fn({}, form))).to.include('version:v8n_required');
-  });
-
-  it('produces an v8n error if webhook format is missing', () => {
-    const form = new WebhookForm();
-    expect(WebhookForm.v8n.map(fn => fn({}, form))).to.include('format:v8n_required');
-  });
-
   it('produces an v8n error if webhook url is too long', () => {
     const url = 'A'.repeat(1001);
     const form = new WebhookForm();
@@ -79,6 +77,17 @@ describe('WebhookForm', () => {
     expect(WebhookForm.v8n.map(fn => fn({ query }, form))).to.include('query:v8n_too_long');
   });
 
+  it('produces an v8n error if webhook encryption-key is missing', () => {
+    const form = new WebhookForm();
+    const errors = WebhookForm.v8n.map(fn => fn({}, form));
+    expect(errors).to.include('encryption-key:v8n_required');
+
+    const encryption_key = 'A'.repeat(1000);
+    expect(WebhookForm.v8n.map(fn => fn({ encryption_key }, form))).to.not.include(
+      'encryption-key:v8n_required'
+    );
+  });
+
   it('produces an v8n error if webhook encryption-key is too long', () => {
     const encryption_key = 'A'.repeat(1001);
     const form = new WebhookForm();
@@ -137,34 +146,14 @@ describe('WebhookForm', () => {
     expect(control).to.be.instanceOf(InternalTextControl);
   });
 
-  it('renders webhook format as radio group control', async () => {
-    const element = await fixture<WebhookForm>(html`<foxy-webhook-form></foxy-webhook-form>`);
-    const control = element.renderRoot.querySelector('[infer="format"]');
-    const options = [
-      { value: 'json', label: 'JSON' },
-      { value: 'webflow', label: 'Webflow' },
-      { value: 'zapier', label: 'Zapier' },
-    ];
-
-    expect(control).to.exist;
-    expect(control).to.be.instanceOf(InternalRadioGroupControl);
-    expect(control).to.have.deep.property('options', options);
-  });
-
-  it('renders webhook encryption key as text control', async () => {
+  it('renders webhook encryption key as password control', async () => {
     const element = await fixture<WebhookForm>(html`<foxy-webhook-form></foxy-webhook-form>`);
     const control = element.renderRoot.querySelector('[infer="encryption-key"]');
 
     expect(control).to.exist;
-    expect(control).to.be.instanceOf(InternalTextControl);
-  });
-
-  it('renders webhook version as text control', async () => {
-    const element = await fixture<WebhookForm>(html`<foxy-webhook-form></foxy-webhook-form>`);
-    const control = element.renderRoot.querySelector('[infer="version"]');
-
-    expect(control).to.exist;
-    expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.be.instanceOf(InternalPasswordControl);
+    expect(control).to.have.attribute('show-generator');
+    expect(control).to.have.deep.property('generatorOptions', { separator: '', length: 512 });
   });
 
   it('renders webhook statuses when an existing webhook is loaded', async () => {
diff --git a/src/elements/public/WebhookForm/WebhookForm.ts b/src/elements/public/WebhookForm/WebhookForm.ts
index 7477bc67e..d8850a025 100644
--- a/src/elements/public/WebhookForm/WebhookForm.ts
+++ b/src/elements/public/WebhookForm/WebhookForm.ts
@@ -18,19 +18,14 @@ export class WebhookForm extends TranslatableMixin(InternalForm, 'webhook-form')
     return [
       ({ name: v }) => !!v || 'name:v8n_required',
       ({ name: v }) => (!!v && v.length <= 255) || 'name:v8n_too_long',
-      ({ version: v }) => !!v || 'version:v8n_required',
-      ({ format: v }) => !!v || 'format:v8n_required',
       ({ url: v }) => !v || v.length <= 1000 || 'url:v8n_too_long',
       ({ query: v }) => !v || v.length <= 1000 || 'query:v8n_too_long',
+      ({ encryption_key: v }) => !!v || 'encryption-key:v8n_required',
       ({ encryption_key: v }) => !v || v.length <= 1000 || 'encryption-key:v8n_too_long',
     ];
   }
 
-  private __formats = [
-    { value: 'json', label: 'JSON' },
-    { value: 'webflow', label: 'Webflow' },
-    { value: 'zapier', label: 'Zapier' },
-  ];
+  private __encryptionKeyGeneratorOptions = { separator: '', length: 512 };
 
   private __eventResources = [
     { value: 'subscription', label: 'event_resource_subscription' },
@@ -39,13 +34,20 @@ export class WebhookForm extends TranslatableMixin(InternalForm, 'webhook-form')
   ];
 
   get hiddenSelector(): BooleanSelector {
-    const alwaysMatch: string[] = [];
-    if (this.data) alwaysMatch.push('event-resource');
-    return new BooleanSelector(`${super.readonlySelector} ${alwaysMatch.join(' ')}`.trim());
+    const alwaysMatch: string[] = [super.hiddenSelector.toString()];
+    if (this.data) alwaysMatch.unshift('event-resource');
+    return new BooleanSelector(alwaysMatch.join(' ').trim());
   }
 
   get headerSubtitleOptions(): Record<string, unknown> {
-    return { context: this.data?.event_resource };
+    const format = this.data?.format;
+    return { context: format === 'json' ? this.data?.event_resource : format };
+  }
+
+  edit(data: Partial<Data>): void {
+    super.edit(data);
+    if (!this.form.format) super.edit({ format: 'json' });
+    if (!this.form.version) super.edit({ version: 2 });
   }
 
   renderBody(): TemplateResult {
@@ -60,11 +62,12 @@ export class WebhookForm extends TranslatableMixin(InternalForm, 'webhook-form')
       <foxy-internal-text-control infer="query"></foxy-internal-text-control>
       <foxy-internal-text-control infer="url"></foxy-internal-text-control>
 
-      <foxy-internal-radio-group-control infer="format" .options=${this.__formats}>
-      </foxy-internal-radio-group-control>
-
-      <foxy-internal-text-control infer="encryption-key"></foxy-internal-text-control>
-      <foxy-internal-text-control infer="version"></foxy-internal-text-control>
+      <foxy-internal-password-control
+        infer="encryption-key"
+        show-generator
+        .generatorOptions=${this.__encryptionKeyGeneratorOptions}
+      >
+      </foxy-internal-password-control>
 
       ${this.data
         ? html`
diff --git a/src/elements/public/WebhookForm/index.ts b/src/elements/public/WebhookForm/index.ts
index 0d0678529..fc6a08dc9 100644
--- a/src/elements/public/WebhookForm/index.ts
+++ b/src/elements/public/WebhookForm/index.ts
@@ -1,5 +1,6 @@
 import '../../internal/InternalRadioGroupControl/index';
 import '../../internal/InternalAsyncListControl/index';
+import '../../internal/InternalPasswordControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 
diff --git a/src/elements/public/index.defined.ts b/src/elements/public/index.defined.ts
index 63bbe657d..7b5172aee 100644
--- a/src/elements/public/index.defined.ts
+++ b/src/elements/public/index.defined.ts
@@ -2,6 +2,7 @@ export { AccessRecoveryForm } from './AccessRecoveryForm/index';
 export { AddressCard } from './AddressCard/index';
 export { AddressForm } from './AddressForm/index';
 export { AdminSubscriptionCard } from './AdminSubscriptionCard/index';
+export { AdminSubscriptionForm } from './AdminSubscriptionForm/index';
 export { ApiBrowser } from './ApiBrowser/index';
 export { AppliedCouponCodeCard } from './AppliedCouponCodeCard/index';
 export { AppliedCouponCodeForm } from './AppliedCouponCodeForm/index';
diff --git a/src/elements/public/index.ts b/src/elements/public/index.ts
index e5e66ade7..da7b15098 100644
--- a/src/elements/public/index.ts
+++ b/src/elements/public/index.ts
@@ -2,6 +2,7 @@ export { AccessRecoveryForm } from './AccessRecoveryForm/AccessRecoveryForm';
 export { AddressCard } from './AddressCard/AddressCard';
 export { AddressForm } from './AddressForm/AddressForm';
 export { AdminSubscriptionCard } from './AdminSubscriptionCard/AdminSubscriptionCard';
+export { AdminSubscriptionForm } from './AdminSubscriptionForm/AdminSubscriptionForm';
 export { ApiBrowser } from './ApiBrowser/ApiBrowser';
 export { AppliedCouponCodeCard } from './AppliedCouponCodeCard/AppliedCouponCodeCard';
 export { AppliedCouponCodeForm } from './AppliedCouponCodeForm/AppliedCouponCodeForm';
diff --git a/src/server/hapi/createDataset.ts b/src/server/hapi/createDataset.ts
index 4f8384f2d..9357ec87d 100644
--- a/src/server/hapi/createDataset.ts
+++ b/src/server/hapi/createDataset.ts
@@ -415,6 +415,7 @@ export const createDataset: () => Dataset = () => ({
       first_failed_transaction_date: null,
       is_active: true,
       third_party_id: '',
+      payment_type: 'plastic',
       date_created: '2020-08-19T10:58:39-0700',
       date_modified: '2020-08-19T10:58:39-0700',
     },
@@ -488,6 +489,8 @@ export const createDataset: () => Dataset = () => ({
     {
       id: 0,
       store_id: 0,
+      default_billing_address_id: 0,
+      default_shipping_address_id: 1,
       tax_id: 'XXX-XX-XXXX',
       payment_method_id: 0,
       last_login_date: '2013-08-16T14:13:54-0700',
@@ -507,6 +510,8 @@ export const createDataset: () => Dataset = () => ({
     {
       id: 1,
       store_id: 0,
+      default_billing_address_id: 0,
+      default_shipping_address_id: 1,
       tax_id: 'XXX-XX-XXXX',
       payment_method_id: 0,
       last_login_date: '2013-08-16T14:13:54-0700',
@@ -526,6 +531,8 @@ export const createDataset: () => Dataset = () => ({
     {
       id: 2,
       store_id: 0,
+      default_billing_address_id: 0,
+      default_shipping_address_id: 1,
       tax_id: 'XXX-XX-XXXX',
       payment_method_id: 0,
       last_login_date: '2013-08-16T14:13:54-0700',
@@ -545,6 +552,8 @@ export const createDataset: () => Dataset = () => ({
     {
       id: 3,
       store_id: 0,
+      default_billing_address_id: 0,
+      default_shipping_address_id: 1,
       tax_id: 'XXX-XX-XXXX',
       last_login_date: '2013-08-16T14:13:54-0700',
       first_name: 'Nora',
@@ -563,6 +572,8 @@ export const createDataset: () => Dataset = () => ({
     {
       id: 4,
       store_id: 0,
+      default_billing_address_id: 0,
+      default_shipping_address_id: 1,
       tax_id: 'XXX-XX-XXXX',
       last_login_date: '2013-08-16T14:13:54-0700',
       first_name: 'Rafael',
@@ -622,7 +633,7 @@ export const createDataset: () => Dataset = () => ({
       custom_display_id_config: '',
       affiliate_id: 0,
       is_maintenance_mode: false,
-      is_active: false,
+      is_active: true,
       first_payment_date: '2016-02-05T10:25:26-0800',
       date_created: '2016-02-05T10:25:26-0800',
       date_modified: '2016-02-05T10:25:26-0800',
@@ -676,8 +687,9 @@ export const createDataset: () => Dataset = () => ({
       template_set_uri: 'https://demo.api/hapi/template_sets/0',
       language: 'english',
       use_customer_shipping_address: true,
-      billing_first_name: 'Grace',
-      billing_last_name: 'Hopper',
+      payment_method_uri: 'https://demo.api/hapi/payments?transaction_id=0',
+      billing_first_name: null,
+      billing_last_name: null,
       billing_company: '',
       billing_address1: '1234 Mulberry Dr.',
       billing_address2: '#567',
@@ -685,12 +697,12 @@ export const createDataset: () => Dataset = () => ({
       billing_state: 'NY',
       billing_postal_code: '10001',
       billing_country: 'US',
-      billing_phone: '',
-      shipping_first_name: 'test1',
-      shipping_last_name: 'test2',
-      shipping_company: 'test3',
-      shipping_address1: 'test4',
-      shipping_address2: 'test5',
+      billing_phone: null,
+      shipping_first_name: null,
+      shipping_last_name: null,
+      shipping_company: null,
+      shipping_address1: null,
+      shipping_address2: null,
       shipping_city: 'Austin',
       shipping_state: 'TX',
       shipping_postal_code: '78767',
diff --git a/src/server/hapi/defaults.ts b/src/server/hapi/defaults.ts
index 607ead922..0c9b39b12 100644
--- a/src/server/hapi/defaults.ts
+++ b/src/server/hapi/defaults.ts
@@ -260,6 +260,7 @@ export const defaults: Defaults = {
     first_failed_transaction_date: null,
     is_active: false,
     third_party_id: '',
+    payment_type: 'plastic',
     date_created: new Date().toISOString(),
     date_modified: new Date().toISOString(),
   }),
@@ -297,6 +298,8 @@ export const defaults: Defaults = {
   customers: (query, dataset) => ({
     id: increment('customers', dataset),
     store_id: parseInt(query.get('store_id') ?? '0'),
+    default_billing_address_id: parseInt(query.get('default_billing_address_id') ?? '0'),
+    default_shipping_address_id: parseInt(query.get('default_shipping_address_id') ?? '0'),
     tax_id: '',
     last_login_date: new Date().toISOString(),
     first_name: '',
@@ -401,6 +404,7 @@ export const defaults: Defaults = {
     customer_uri: '',
     template_set_uri: '',
     language: '',
+    payment_method_uri: '',
     use_customer_shipping_address: true,
     billing_first_name: '',
     billing_last_name: '',
diff --git a/src/server/hapi/links.ts b/src/server/hapi/links.ts
index eadd59b3d..6acb05a6c 100644
--- a/src/server/hapi/links.ts
+++ b/src/server/hapi/links.ts
@@ -136,8 +136,12 @@ export const links: Links = {
     'fx:subscriptions': { href: `./subscriptions?customer_id=${document.id}` },
     'fx:customer_addresses': { href: `./customer_addresses?customer_id=${document.id}` },
     'fx:default_payment_method': { href: `./payment_methods/${document.payment_method_id}` },
-    'fx:default_billing_address': { href: `./customer_addresses/${document.billing_address_id}` },
-    'fx:default_shipping_address': { href: `./customer_addresses/${document.shipping_address_id}` },
+    'fx:default_billing_address': {
+      href: `./customer_addresses/${document.default_billing_address_id}`,
+    },
+    'fx:default_shipping_address': {
+      href: `./customer_addresses/${document.default_shipping_address_id}`,
+    },
   }),
 
   stores: ({ id, subscription_settings_id, customer_portal_settings_id: cps_id }) => ({
diff --git a/src/static/translations/address-form/en.json b/src/static/translations/address-form/en.json
index d39bdd1e7..ce8846d34 100644
--- a/src/static/translations/address-form/en.json
+++ b/src/static/translations/address-form/en.json
@@ -1,10 +1,10 @@
 {
   "header": {
+    "title_default_shipping": "Default shipping address",
+    "title_default_billing": "Default billing address",
     "title_existing": "Customer address #{{ id }}",
     "title_new": "New customer address",
-    "subtitle_default_shipping": "Default shipping address",
-    "subtitle_default_billing": "Default billing address",
-    "subtitle_custom": "Custom address",
+    "subtitle": "",
     "copy-id": {
       "failed_to_copy": "Failed to copy",
       "click_to_copy": "Copy ID",
diff --git a/src/static/translations/admin-subscription-form/en.json b/src/static/translations/admin-subscription-form/en.json
new file mode 100644
index 000000000..e7a6b9e79
--- /dev/null
+++ b/src/static/translations/admin-subscription-form/en.json
@@ -0,0 +1,1840 @@
+{
+  "header": {
+    "title_existing": "Subscription #{{ id }}",
+    "title_new": "",
+    "subtitle_inactive": "Inactive",
+    "subtitle_active": "Active",
+    "subtitle": "",
+    "copy-id": {
+      "failed_to_copy": "Failed to copy",
+      "click_to_copy": "Copy ID",
+      "copying": "Copying...",
+      "done": "Copied to clipboard"
+    },
+    "copy-json": {
+      "failed_to_copy": "Failed to copy",
+      "click_to_copy": "Copy source as JSON",
+      "copying": "Copying...",
+      "done": "Copied to clipboard"
+    }
+  },
+  "view-action": {
+    "caption": "View in cart"
+  },
+  "cancel-action": {
+    "caption": "Cancel"
+  },
+  "cancel": {
+    "caption": "Cancel"
+  },
+  "general": {
+    "label": "",
+    "helper_text": "",
+    "start-date": {
+      "label": "Start date",
+      "helper_text": "",
+      "placeholder": "",
+      "display_value": "{{ value, date }}",
+      "week": "Week",
+      "calendar": "Calendar",
+      "clear": "Clear",
+      "today": "Today",
+      "cancel": "Cancel"
+    },
+    "end-date": {
+      "label": "End date",
+      "helper_text": "",
+      "placeholder": "",
+      "display_value": "{{ value, date }}",
+      "week": "Week",
+      "calendar": "Calendar",
+      "clear": "Clear",
+      "today": "Today",
+      "cancel": "Cancel"
+    },
+    "frequency": {
+      "label": "Frequency",
+      "helper_text": "",
+      "placeholder": "0",
+      "select": "Select",
+      "clear": "Clear",
+      "day": "day",
+      "day_plural": "days",
+      "week": "week",
+      "week_plural": "weeks",
+      "month": "month",
+      "month_plural": "months",
+      "year": "year",
+      "year_plural": "years",
+      "times_a_month": "times a month"
+    },
+    "next-transaction-date": {
+      "label": "Next payment date",
+      "helper_text": "",
+      "placeholder": "",
+      "display_value": "{{ value, date }}",
+      "week": "Week",
+      "calendar": "Calendar",
+      "clear": "Clear",
+      "today": "Today",
+      "cancel": "Cancel"
+    }
+  },
+  "overdue": {
+    "label": "",
+    "helper_text": "",
+    "past-due-amount": {
+      "label": "Past due amount",
+      "helper_text": "Missing payments increase this amount. Depending on your store settings, we may charge it automatically on the next billing cycle.",
+      "placeholder": "0",
+      "clear": "Clear"
+    }
+  },
+  "attributes": {
+    "label": "Attributes",
+    "delete_confirm": "Delete",
+    "delete_cancel": "Cancel",
+    "delete_message": "Are you sure you'd like to remove this attribute? This action can't be undone.",
+    "delete_header": "Delete attribute?",
+    "pagination": {
+      "create_button_text": "Add attribute +",
+      "first": "First",
+      "last": "Last",
+      "next": "Next",
+      "pagination": "{{from}}-{{to}} out of {{total}}",
+      "previous": "Previous",
+      "card": {
+        "delete_button_text": "Remove",
+        "price": "{{amount, price}}",
+        "wgt": "WGT",
+        "spinner": {
+          "loading_busy": "Loading",
+          "loading_empty": "No attributes",
+          "loading_error": "Unknown error"
+        }
+      }
+    },
+    "dialog": {
+      "close": "Close",
+      "cancel": "Cancel",
+      "header_update": "Attribute",
+      "header_create": "New attribute",
+      "save": "Save",
+      "undo_header": "Unsaved changes",
+      "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+      "undo_cancel": "Review",
+      "undo_confirm": "Discard",
+      "attribute-form": {
+        "header": {
+          "title_existing": "Subscription attribute #{{ id }}",
+          "title_new": "New subscription attribute",
+          "subtitle_private": "Visible only to you",
+          "subtitle_restricted": "Visible to store admins",
+          "subtitle_public": "Visible to everyone",
+          "copy-id": {
+            "failed_to_copy": "Failed to copy",
+            "click_to_copy": "Copy ID",
+            "copying": "Copying...",
+            "done": "Copied to clipboard"
+          },
+          "copy-json": {
+            "failed_to_copy": "Failed to copy",
+            "click_to_copy": "Copy source as JSON",
+            "copying": "Copying...",
+            "done": "Copied to clipboard"
+          }
+        },
+        "name": {
+          "label": "Name",
+          "placeholder": "Required",
+          "helper_text": "Name of this attribute. It does not have to be unique.",
+          "v8n_required": "Please name this attribute.",
+          "v8n_too_long": "Please choose a name that is 500 characters long or less."
+        },
+        "value": {
+          "label": "Value",
+          "placeholder": "Required",
+          "helper_text": "Value of this attribute. Attribute values are automatically HTML-escaped.",
+          "v8n_required": "Please provide a value for this attribute.",
+          "v8n_too_long": "Unfortunately we can't store values that are more than 1000 characters long."
+        },
+        "visibility": {
+          "label": "Visibility",
+          "option_public": "Everyone",
+          "option_restricted": "Store admins",
+          "option_private": "Only me",
+          "helper_text": "Controls who can see this attribute. Public attributes can be shown to anyone, including customers. Private attributes are more suitable for configuration or technical details which are irrelevant to the public. Restricted attributes can only be viewed with the OAuth client that created them."
+        },
+        "timestamps": {
+          "date": "{{value, date}}",
+          "date_created": "Created on",
+          "date_modified": "Last updated on"
+        },
+        "delete": {
+          "delete": "Delete",
+          "cancel": "Cancel",
+          "delete_prompt": "Are you sure you'd like to remove this attribute? You won't be able to bring it back."
+        },
+        "undo": {
+          "caption": "Undo"
+        },
+        "submit": {
+          "caption": "Save changes"
+        },
+        "create": {
+          "caption": "Create"
+        },
+        "spinner": {
+          "refresh": "Refresh",
+          "loading_busy": "Loading",
+          "loading_error": "Unknown error"
+        }
+      }
+    }
+  },
+  "transactions": {
+    "label": "Transactions",
+    "pagination": {
+      "first": "First",
+      "last": "Last",
+      "next": "Next",
+      "pagination": "{{from}}-{{to}} out of {{total}}",
+      "previous": "Previous",
+      "card": {
+        "code": "Code",
+        "customer": "Customer",
+        "description": "Description",
+        "price": "{{amount, price}}",
+        "time": "{{value, date}}",
+        "status_capturing": "Capturing",
+        "status_captured": "Captured",
+        "status_approved": "Approved",
+        "status_authorized": "Authorized",
+        "status_pending": "Pending",
+        "status_completed": "Completed",
+        "status_problem": "Problem",
+        "status_pending_fraud_review": "Pending_fraud_review",
+        "status_rejected": "Rejected",
+        "status_declined": "Declined",
+        "status_refunding": "Refunding",
+        "status_refunded": "Refunded",
+        "status_voided": "Voided",
+        "status_verified": "Verified",
+        "summary": "{{most_expensive_item.name}}",
+        "summary_plural": "{{most_expensive_item.name}} and {{count_minus_one}} more",
+        "summary_payment_method_change": "Payment method change",
+        "summary_subscription_modification": "Subscription modification",
+        "summary_subscription_cancellation": "Subscription cancellation",
+        "source_MIT": "This transaction was initiated by the merchant",
+        "source_CIT": "This transaction was initiated by the customer",
+        "spinner": {
+          "loading_busy": "Loading",
+          "loading_empty": "No transactions",
+          "loading_error": "Unknown error"
+        }
+      }
+    },
+    "dialog": {
+      "close": "Close",
+      "header_update": "Transaction",
+      "transaction": {
+        "header": {
+          "title": "Transaction #{{ display_id }}",
+          "subtitle": "{{ transaction_date, date }} at {{ transaction_date, time }} • {{ ip_country }}",
+          "subtitle_customer_changed_payment_method": "{{ transaction_date, date }} at {{ transaction_date, time }} • {{ ip_country }} • Customer changed payment method",
+          "subtitle_admin_changed_payment_method_with_uoe": "{{ transaction_date, date }} at {{ transaction_date, time }} • Store admin used UOE password to change payment method",
+          "subtitle_integration_changed_payment_method": "{{ transaction_date, date }} at {{ transaction_date, time }} • Integration changed payment method",
+          "subtitle_admin_changed_payment_method": "{{ transaction_date, date }} at {{ transaction_date, time }} • Store admin changed payment method",
+          "subtitle_customer_changed_subscription": "{{ transaction_date, date }} at {{ transaction_date, time }} • {{ ip_country }} • Customer made changes to subscription",
+          "subtitle_admin_changed_subscription_with_uoe": "{{ transaction_date, date }} at {{ transaction_date, time }} • Store admin used UOE password to make changes to subscription",
+          "subtitle_integration_changed_subscription": "{{ transaction_date, date }} at {{ transaction_date, time }} • Integration made changes to subscription",
+          "subtitle_admin_changed_subscription": "{{ transaction_date, date }} at {{ transaction_date, time }} • Store admin made changes to subscription",
+          "subtitle_subscription_renewal_attempt": "{{ transaction_date, date }} at {{ transaction_date, time }} • Subscription renewal attempt",
+          "subtitle_subscription_renewal_automated_reattempt": "{{ transaction_date, date }} at {{ transaction_date, time }} • Automated subscription renewal reattempt",
+          "subtitle_subscription_renewal_manual_reattempt": "{{ transaction_date, date }} at {{ transaction_date, time }} • Store admin attempted to renew subscription",
+          "subtitle_customer_canceled_subscription": "{{ transaction_date, date }} at {{ transaction_date, time }} • {{ ip_country }} • Customer cancelled subscription",
+          "subtitle_admin_canceled_subscription": "{{ transaction_date, date }} at {{ transaction_date, time }} • Store admin cancelled subscription",
+          "subtitle_customer_subscribed": "{{ transaction_date, date }} at {{ transaction_date, time }} • {{ ip_country }} • Customer bought a subscription",
+          "subtitle_admin_subscribed_with_uoe": "{{ transaction_date, date }} at {{ transaction_date, time }} • Store admin used UOE password to buy a subscription",
+          "subtitle_integration_subscribed": "{{ transaction_date, date }} at {{ transaction_date, time }} • Integration placed an order for customer",
+          "subtitle_customer_placed_order": "{{ transaction_date, date }} at {{ transaction_date, time }} • {{ ip_country }} • Customer placed an order",
+          "subtitle_admin_placed_order_with_uoe": "{{ transaction_date, date }} at {{ transaction_date, time }} • Store admin used UOE password to place an order",
+          "subtitle_integration_placed_order": "{{ transaction_date, date }} at {{ transaction_date, time }} • Integration bought a subscription",
+          "alert_status_problem": "We were unable to complete this transaction because the amount that was sent to the payment gateway did not match the final total amount.",
+          "alert_status_pending_fraud_review": "The payment gateway flagged this transaction as potentially fraudulent. Please log in to your gateway’s dashboard and look for this transaction to review.",
+          "alert_status_rejected": "The payment gateway refused to process this transaction based on its internal policy. You may be able to get more information about this error by logging in to your gateway’s dashboard and looking for this transaction.",
+          "alert_status_declined": "The payment method used for this transaction was declined. This could be due to insufficient funds, an expired card, or a different reason. You may be able to get more information about this error in your gateway’s dashboard.",
+          "copy-id": {
+            "failed_to_copy": "Failed to copy",
+            "click_to_copy": "Copy ID",
+            "copying": "Copying...",
+            "done": "Copied to clipboard"
+          },
+          "copy-json": {
+            "failed_to_copy": "Failed to copy",
+            "click_to_copy": "Copy source as JSON",
+            "copying": "Copying...",
+            "done": "Copied to clipboard"
+          }
+        },
+        "customer": {
+          "label": "Customer",
+          "copy_email_caption": "Copy email",
+          "copy_id_caption": "Copy ID",
+          "spinner": {
+            "loading_busy": "Loading",
+            "loading_empty": "No customer",
+            "loading_error": "Unknown error"
+          }
+        },
+        "items": {
+          "label": "Items",
+          "delete_header": "Remove item?",
+          "delete_message": "Please confirm that you'd like to remove this item from the transaction.",
+          "delete_confirm": "Remove",
+          "delete_cancel": "Cancel",
+          "pagination": {
+            "create_button_text": "Add item +",
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "delete_button_text": "Remove",
+              "daily": "Daily",
+              "daily_plural": "Every {{count}} days",
+              "frequency": "$t(items.pagination.card.{{units}}, { \"count\": {{count}}, \"ns\": \"transaction\" })",
+              "monthly": "Monthly",
+              "monthly_plural": "Every {{count}} months",
+              "subinfo_recurring": "$t(items.pagination.card.frequency, { \"count\": \"{{count}}\", \"units\": \"{{units}}\", \"ns\": \"transaction\" }) from {{startDate, date}}",
+              "subinfo_twice_a_month": "$t(items.pagination.card.twice_a_month, { \"ns\": \"transaction\" }) from {{startDate, date}}",
+              "twice_a_month": "Twice a month",
+              "no_code": "No SKU",
+              "weekly": "Weekly",
+              "weekly_plural": "Every {{count}} weeks",
+              "yearly": "Yearly",
+              "yearly_plural": "Every {{count}} years",
+              "price": "{{amount, price}}",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No items",
+                "loading_error": "Unknown error"
+              }
+            }
+          },
+          "dialog": {
+            "close": "Close",
+            "cancel": "Cancel",
+            "header_update": "Item",
+            "header_create": "New item",
+            "save": "Save",
+            "undo_header": "Unsaved changes",
+            "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+            "undo_cancel": "Review",
+            "undo_confirm": "Discard",
+            "item-form": {
+              "header": {
+                "title_existing": "Item #{{ id }}",
+                "title_new": "New item",
+                "subtitle_future_line_item": "This item is part of a future subscription",
+                "subtitle_regular": "",
+                "copy-id": {
+                  "failed_to_copy": "Failed to copy",
+                  "click_to_copy": "Copy ID",
+                  "copying": "Copying...",
+                  "done": "Copied to clipboard"
+                },
+                "copy-json": {
+                  "failed_to_copy": "Failed to copy",
+                  "click_to_copy": "Copy source as JSON",
+                  "copying": "Copying...",
+                  "done": "Copied to clipboard"
+                }
+              },
+              "dimensions": "Dimensions",
+              "subscriptions": "Subscriptions",
+              "discount": "Discount",
+              "name": {
+                "label": "Name",
+                "helper_text": "Public name of this item.",
+                "placeholder": "13' Laptop Case",
+                "v8n_required": "Name is required",
+                "v8n_too_long": "Name mustn't exceed 255 characters"
+              },
+              "price": {
+                "label": "Price",
+                "helper_text": "Base price before option modifiers.",
+                "placeholder": "25",
+                "v8n_required": "Price is required",
+                "v8n_negative": "Price can't be negative"
+              },
+              "quantity": {
+                "label": "Quantity",
+                "helper_text": "Number of items in the cart.",
+                "placeholder": "1 by default",
+                "v8n_less_than_one": "Quantity must be 1 or more"
+              },
+              "subscription-frequency": {
+                "label": "Subscription frequency",
+                "day": "Day",
+                "day_plural": "Days",
+                "week": "Week",
+                "week_plural": "Weeks",
+                "month": "Month",
+                "month_plural": "Months",
+                "year": "Year",
+                "year_plural": "Years",
+                "helper_text": "This determines how often this subscription will be processed. To modify this value for an existing subscription, you must modify the subscription directly."
+              },
+              "subscription-start-date": {
+                "label": "Subscription start",
+                "helper_text": "The original date this subscription began or will begin if set in the future. To modify this value for an existing subscription, you must modify the subscription directly.",
+                "placeholder": "01/01/2022"
+              },
+              "subscription-end-date": {
+                "label": "Subscription end",
+                "helper_text": "If set, the date this subscription will end. The subscription will not run on this day.",
+                "placeholder": "01/01/2022"
+              },
+              "discount-name": {
+                "label": "Discount name",
+                "helper_text": "The name of the line item discount if it is included on this item.",
+                "placeholder": "One-off 10% discount"
+              },
+              "discount-builder": {
+                "tier": "Tier",
+                "tier_by": "by",
+                "tier_if": "if",
+                "tier_allunits": "price of each item",
+                "tier_incremental": "price of additional items",
+                "tier_repeat": "price of next item",
+                "tier_single": "order total",
+                "tier_then": "then",
+                "quantity": "quantity",
+                "total": "total",
+                "reduce": "reduce",
+                "increase": "increase"
+              },
+              "expires": {
+                "label": "Expires",
+                "helper_text": "Date when this item will be removed from the cart (optional).",
+                "placeholder": "01/01/2022"
+              },
+              "image": {
+                "label": "Image",
+                "helper_text": "URL of the image to display for this item in the cart and checkout.",
+                "placeholder": "https://picsum.photos/256"
+              },
+              "url": {
+                "label": "URL",
+                "helper_text": "Full URL for the customer to view this item on the store website.",
+                "placeholder": "https://example.com/products/123"
+              },
+              "quantity-min": {
+                "label": "Min quantity",
+                "helper_text": "Minimum quantity per cart.",
+                "placeholder": "1"
+              },
+              "quantity-max": {
+                "label": "Max quantity",
+                "helper_text": "Maximum quantity per cart.",
+                "placeholder": "25"
+              },
+              "shipto": {
+                "label": "Shipping address",
+                "helper_text": "Used for multiship to assign this item to a specific shipment. This value will be the address name of the shipment.",
+                "placeholder": "Select address to ship this item to..."
+              },
+              "width": {
+                "label": "Width",
+                "helper_text": "This is currently a placeholder for future use.",
+                "placeholder": "16"
+              },
+              "height": {
+                "label": "Height",
+                "helper_text": "This is currently a placeholder for future use.",
+                "placeholder": "8"
+              },
+              "length": {
+                "label": "Width",
+                "helper_text": "This is currently a placeholder for future use.",
+                "placeholder": "32"
+              },
+              "weight": {
+                "label": "Weight",
+                "helper_text": "Per-item weight, used for shipping rate requests.",
+                "placeholder": "24"
+              },
+              "item-category-uri": {
+                "label": "Item category",
+                "dialog": {
+                  "cancel": "Cancel",
+                  "close": "Close",
+                  "header": "Select an item category",
+                  "selection": {
+                    "label": "Item categories",
+                    "helper_text": "Select an item category to use with this item.",
+                    "search": "Search",
+                    "clear": "Clear",
+                    "pagination": {
+                      "search_button_text": "Search",
+                      "first": "First",
+                      "last": "Last",
+                      "next": "Next",
+                      "pagination": "{{from}}-{{to}} out of {{total}}",
+                      "previous": "Previous",
+                      "card": {
+                        "spinner": {
+                          "loading_busy": "Loading",
+                          "loading_empty": "No item categories found",
+                          "loading_error": "Unknown error"
+                        }
+                      }
+                    }
+                  }
+                },
+                "card": {
+                  "spinner": {
+                    "loading_busy": "Loading",
+                    "loading_empty": "Not assigned – click to select",
+                    "loading_error": "Unknown error"
+                  }
+                },
+                "helper_text": "Item category associated with this item."
+              },
+              "code": {
+                "label": "Code",
+                "helper_text": "Unique item code such as SKU or barcode.",
+                "placeholder": "MY-PRODUCT-001"
+              },
+              "parent-code": {
+                "label": "Parent code",
+                "helper_text": "Used if this should be a child product in a bundle.",
+                "placeholder": "MY-BUNDLE-001"
+              },
+              "discount-details": {
+                "title": "Discount details",
+                "pagination": {
+                  "first": "First",
+                  "last": "Last",
+                  "next": "Next",
+                  "pagination": "{{from}}-{{to}} out of {{total}}",
+                  "previous": "Previous",
+                  "card": {
+                    "spinner": {
+                      "loading_busy": "Loading",
+                      "loading_empty": "No data",
+                      "loading_error": "Unknown error"
+                    }
+                  }
+                }
+              },
+              "coupon-details": {
+                "title": "Coupon details",
+                "pagination": {
+                  "first": "First",
+                  "last": "Last",
+                  "next": "Next",
+                  "pagination": "{{from}}-{{to}} out of {{total}}",
+                  "previous": "Previous",
+                  "card": {
+                    "spinner": {
+                      "loading_busy": "Loading",
+                      "loading_empty": "No data",
+                      "loading_error": "Unknown error"
+                    }
+                  }
+                }
+              },
+              "attributes": {
+                "title": "Attributes",
+                "delete_header": "Remove attribute?",
+                "delete_message": "Please confirm that you'd like to remove this attribute from the item.",
+                "delete_confirm": "Remove",
+                "delete_cancel": "Cancel",
+                "dialog": {
+                  "header_create": "Create attribute",
+                  "header_update": "Update attribute",
+                  "close": "Close",
+                  "save": "Save",
+                  "cancel": "Cancel",
+                  "undo_header": "Unsaved changes",
+                  "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+                  "undo_cancel": "Review",
+                  "undo_confirm": "Discard",
+                  "attribute-form": {
+                    "header": {
+                      "title_existing": "Item attribute #{{ id }}",
+                      "title_new": "New item attribute",
+                      "subtitle_private": "Visible only to you",
+                      "subtitle_restricted": "Visible to store admins",
+                      "subtitle_public": "Visible to everyone",
+                      "copy-id": {
+                        "failed_to_copy": "Failed to copy",
+                        "click_to_copy": "Copy ID",
+                        "copying": "Copying...",
+                        "done": "Copied to clipboard"
+                      },
+                      "copy-json": {
+                        "failed_to_copy": "Failed to copy",
+                        "click_to_copy": "Copy source as JSON",
+                        "copying": "Copying...",
+                        "done": "Copied to clipboard"
+                      }
+                    },
+                    "name": {
+                      "label": "Name",
+                      "placeholder": "Required",
+                      "helper_text": "Name of this attribute. It does not have to be unique.",
+                      "v8n_required": "Please name this attribute.",
+                      "v8n_too_long": "Please choose a name that is 500 characters long or less."
+                    },
+                    "value": {
+                      "label": "Value",
+                      "placeholder": "Required",
+                      "helper_text": "Value of this attribute. Attribute values are automatically HTML-escaped.",
+                      "v8n_required": "Please provide a value for this attribute.",
+                      "v8n_too_long": "Unfortunately we can't store values that are more than 1000 characters long."
+                    },
+                    "visibility": {
+                      "label": "Visibility",
+                      "option_public": "Everyone",
+                      "option_restricted": "Store admins",
+                      "option_private": "Only me",
+                      "helper_text": "Controls who can see this attribute. Public attributes can be shown to anyone, including customers. Private attributes are more suitable for configuration or technical details which are irrelevant to the public. Restricted attributes can only be viewed with the OAuth client that created them."
+                    },
+                    "timestamps": {
+                      "date": "{{value, date}}",
+                      "date_created": "Created on",
+                      "date_modified": "Last updated on"
+                    },
+                    "delete": {
+                      "delete": "Delete",
+                      "cancel": "Cancel",
+                      "delete_prompt": "Are you sure you'd like to remove this attribute? You won't be able to bring it back."
+                    },
+                    "undo": {
+                      "caption": "Undo"
+                    },
+                    "submit": {
+                      "caption": "Save changes"
+                    },
+                    "create": {
+                      "caption": "Create"
+                    },
+                    "spinner": {
+                      "refresh": "Refresh",
+                      "loading_busy": "Loading",
+                      "loading_error": "Unknown error"
+                    }
+                  }
+                },
+                "pagination": {
+                  "create_button_text": "Add attribute +",
+                  "card": {
+                    "delete_button_text": "Delete",
+                    "spinner": {
+                      "loading_busy": "Loading",
+                      "loading_empty": "No data",
+                      "loading_error": "Unknown error"
+                    }
+                  },
+                  "first": "First",
+                  "last": "Last",
+                  "next": "Next",
+                  "pagination": "{{from}}-{{to}} out of {{total}}",
+                  "previous": "Previous"
+                }
+              },
+              "item-options": {
+                "title": "Item options",
+                "delete_header": "Remove item option?",
+                "delete_message": "Please confirm that you'd like to remove this item option from the item.",
+                "delete_confirm": "Remove",
+                "delete_cancel": "Cancel",
+                "dialog": {
+                  "header_create": "Create option",
+                  "header_update": "Update option",
+                  "close": "Close",
+                  "save": "Save",
+                  "cancel": "Cancel",
+                  "undo_header": "Unsaved changes",
+                  "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+                  "undo_cancel": "Review",
+                  "undo_confirm": "Discard",
+                  "item-option-form": {
+                    "header": {
+                      "title_existing": "Item option #{{ id }}",
+                      "title_new": "New item option",
+                      "subtitle": "",
+                      "copy-id": {
+                        "failed_to_copy": "Failed to copy",
+                        "click_to_copy": "Copy ID",
+                        "copying": "Copying...",
+                        "done": "Copied to clipboard"
+                      },
+                      "copy-json": {
+                        "failed_to_copy": "Failed to copy",
+                        "click_to_copy": "Copy source as JSON",
+                        "copying": "Copying...",
+                        "done": "Copied to clipboard"
+                      }
+                    },
+                    "name": {
+                      "label": "Name",
+                      "helper_text": "",
+                      "placeholder": "Color",
+                      "v8n_required": "Name is required",
+                      "v8n_too_long": "Name mustn't exceed 100 characters"
+                    },
+                    "value": {
+                      "label": "Value",
+                      "helper_text": "",
+                      "placeholder": "Red",
+                      "v8n_required": "Value is required",
+                      "v8n_too_long": "Value mustn't exceed 1024 characters"
+                    },
+                    "price-mod": {
+                      "label": "Price",
+                      "helper_text": "Same currency as item",
+                      "placeholder": "10"
+                    },
+                    "weight-mod": {
+                      "label": "Weight",
+                      "helper_text": "Arbitrary units",
+                      "placeholder": "5"
+                    },
+                    "timestamps": {
+                      "date_created": "Created on",
+                      "date_modified": "Last updated on",
+                      "date": "{{value, date}}"
+                    },
+                    "spinner": {
+                      "refresh": "Refresh",
+                      "loading_busy": "Loading",
+                      "loading_error": "Unknown error"
+                    },
+                    "delete": {
+                      "delete": "Delete",
+                      "cancel": "Cancel",
+                      "delete_prompt": "Are you sure you'd like to remove this item option? You won't be able to bring it back."
+                    },
+                    "undo": {
+                      "caption": "Undo"
+                    },
+                    "submit": {
+                      "caption": "Save changes"
+                    },
+                    "create": {
+                      "caption": "Create"
+                    }
+                  }
+                },
+                "pagination": {
+                  "card": {
+                    "delete_button_text": "Delete",
+                    "spinner": {
+                      "loading_busy": "Loading",
+                      "loading_empty": "No data",
+                      "loading_error": "Unknown error"
+                    }
+                  },
+                  "create_button_text": "Add option +",
+                  "first": "First",
+                  "last": "Last",
+                  "next": "Next",
+                  "pagination": "{{from}}-{{to}} out of {{total}}",
+                  "previous": "Previous"
+                }
+              },
+              "timestamps": {
+                "date_created": "Created on",
+                "date_modified": "Last updated on",
+                "date": "{{value, date}}"
+              },
+              "delete": {
+                "delete": "Delete",
+                "cancel": "Cancel",
+                "delete_prompt": "Are you sure you'd like to remove this item? You won't be able to bring it back."
+              },
+              "undo": {
+                "caption": "Undo"
+              },
+              "submit": {
+                "caption": "Save changes"
+              },
+              "create": {
+                "caption": "Create"
+              },
+              "spinner": {
+                "refresh": "Refresh",
+                "loading_busy": "Loading",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        },
+        "custom-fields": {
+          "label": "Custom fields",
+          "delete_header": "Remove custom field?",
+          "delete_message": "Please confirm that you'd like to remove this custom field from the item.",
+          "delete_confirm": "Remove",
+          "delete_cancel": "Cancel",
+          "dialog": {
+            "close": "Close",
+            "cancel": "Cancel",
+            "header_update": "Custom field",
+            "header_create": "New custom field",
+            "save": "Save",
+            "undo_header": "Unsaved changes",
+            "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+            "undo_cancel": "Review",
+            "undo_confirm": "Discard",
+            "custom-field-form": {
+              "header": {
+                "title_existing": "Transaction custom field #{{ id }}",
+                "title_new": "New transaction custom field",
+                "subtitle": "",
+                "copy-id": {
+                  "failed_to_copy": "Failed to copy",
+                  "click_to_copy": "Copy ID",
+                  "copying": "Copying...",
+                  "done": "Copied to clipboard"
+                },
+                "copy-json": {
+                  "failed_to_copy": "Failed to copy",
+                  "click_to_copy": "Copy source as JSON",
+                  "copying": "Copying...",
+                  "done": "Copied to clipboard"
+                }
+              },
+              "name": {
+                "label": "Name",
+                "placeholder": "Required",
+                "helper_text": "Maximum 100 characters.",
+                "v8n_required": "Please name this custom field.",
+                "v8n_too_long": "Please choose a name that is 100 characters long or less."
+              },
+              "value": {
+                "label": "Value",
+                "placeholder": "Required",
+                "helper_text": "Maximum 700 characters.",
+                "v8n_required": "Please provide a value for this custom field.",
+                "v8n_too_long": "Unfortunately we can't store values that are more than 700 characters long."
+              },
+              "visibility": {
+                "label": "Visibility",
+                "option_hidden": "Hide in receipts",
+                "helper_text": "Whether or not this custom field is visible on the receipt and email receipt. This correlates to custom fields with a \"h:\" prefix when added to the cart."
+              },
+              "timestamps": {
+                "date": "{{value, date}}",
+                "date_created": "Created on",
+                "date_modified": "Last updated on"
+              },
+              "delete": {
+                "delete": "Delete",
+                "cancel": "Cancel",
+                "delete_prompt": "Are you sure you'd like to remove this custom field? You won't be able to bring it back."
+              },
+              "undo": {
+                "caption": "Undo"
+              },
+              "submit": {
+                "caption": "Save changes"
+              },
+              "create": {
+                "caption": "Create"
+              },
+              "spinner": {
+                "refresh": "Refresh",
+                "loading_busy": "Loading",
+                "loading_error": "Unknown error"
+              }
+            }
+          },
+          "pagination": {
+            "create_button_text": "Add custom field +",
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "delete_button_text": "Remove",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No custom fields",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        },
+        "attributes": {
+          "label": "Attributes",
+          "delete_header": "Remove attribute?",
+          "delete_message": "Please confirm that you'd like to remove this attribute from the item.",
+          "delete_confirm": "Remove",
+          "delete_cancel": "Cancel",
+          "dialog": {
+            "close": "Close",
+            "cancel": "Cancel",
+            "header_update": "Attribute",
+            "header_create": "New attribute",
+            "save": "Save",
+            "undo_header": "Unsaved changes",
+            "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+            "undo_cancel": "Review",
+            "undo_confirm": "Discard",
+            "attribute-form": {
+              "header": {
+                "title_existing": "ID {{ id }}",
+                "title_new": "New attribute",
+                "subtitle_private": "Visible only to you",
+                "subtitle_restricted": "Visible to store admins",
+                "subtitle_public": "Visible to everyone",
+                "copy-id": {
+                  "failed_to_copy": "Failed to copy",
+                  "click_to_copy": "Copy ID",
+                  "copying": "Copying...",
+                  "done": "Copied to clipboard"
+                },
+                "copy-json": {
+                  "failed_to_copy": "Failed to copy",
+                  "click_to_copy": "Copy source as JSON",
+                  "copying": "Copying...",
+                  "done": "Copied to clipboard"
+                }
+              },
+              "name": {
+                "label": "Name",
+                "placeholder": "Required",
+                "helper_text": "Name of this attribute. It does not have to be unique.",
+                "v8n_required": "Please name this attribute.",
+                "v8n_too_long": "Please choose a name that is 500 characters long or less."
+              },
+              "value": {
+                "label": "Value",
+                "placeholder": "Required",
+                "helper_text": "Value of this attribute. Attribute values are automatically HTML-escaped.",
+                "v8n_required": "Please provide a value for this attribute.",
+                "v8n_too_long": "Unfortunately we can't store values that are more than 1000 characters long."
+              },
+              "visibility": {
+                "label": "Visibility",
+                "option_public": "Everyone",
+                "option_restricted": "Store admins",
+                "option_private": "Only me",
+                "helper_text": "Controls who can see this attribute. Public attributes can be shown to anyone, including customers. Private attributes are more suitable for configuration or technical details which are irrelevant to the public. Restricted attributes can only be viewed with the OAuth client that created them."
+              },
+              "timestamps": {
+                "date": "{{value, date}}",
+                "date_created": "Created on",
+                "date_modified": "Last updated on"
+              },
+              "delete": {
+                "delete": "Delete",
+                "cancel": "Cancel",
+                "delete_prompt": "Are you sure you'd like to remove this attribute? You won't be able to bring it back."
+              },
+              "undo": {
+                "caption": "Undo"
+              },
+              "submit": {
+                "caption": "Save changes"
+              },
+              "create": {
+                "caption": "Create"
+              },
+              "spinner": {
+                "refresh": "Refresh",
+                "loading_busy": "Loading",
+                "loading_error": "Unknown error"
+              }
+            }
+          },
+          "pagination": {
+            "create_button_text": "Add attribute +",
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "delete_button_text": "Remove",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No attributes",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        },
+        "summary": {
+          "total_shipping": "Shipping",
+          "total_tax": "Tax",
+          "subtotal": "Subtotal",
+          "total": "Total",
+          "price": "{{amount, price}}",
+          "status_capturing": "Capturing",
+          "status_captured": "Captured",
+          "status_approved": "Approved",
+          "status_authorized": "Authorized",
+          "status_pending": "Pending",
+          "status_completed": "Completed",
+          "status_problem": "Problem",
+          "status_pending_fraud_review": "Pending_fraud_review",
+          "status_rejected": "Rejected",
+          "status_declined": "Declined",
+          "status_refunding": "Refunding",
+          "status_refunded": "Refunded",
+          "status_voided": "Voided",
+          "status_verified": "Verified"
+        },
+        "payments": {
+          "label": "Payments",
+          "pagination": {
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "code": "Code",
+              "date": "{{value, date}}",
+              "fraud_risk": "Fraud risk: {{ score }}",
+              "processor_response": "{{ processor_response }}",
+              "purchase_order": "PO {{ purchase_order }}",
+              "paypal_payer_id": "PayPal Payer ID {{ paypal_payer_id }}",
+              "third_party_id": "External ID {{ third_party_id }}",
+              "price": "{{amount, price}}",
+              "unknown": "Unknown",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No payments",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        },
+        "billing-addresses": {
+          "label": "Billing addresses",
+          "dialog": {
+            "close": "Close",
+            "cancel": "Cancel",
+            "header_update": "Billing address",
+            "address-form": {
+              "header": {
+                "title_existing": "ID {{ id }}",
+                "title_new": "New address",
+                "subtitle_default_shipping": "Default shipping address",
+                "subtitle_default_billing": "Default billing address",
+                "subtitle_custom": "Custom address",
+                "copy-id": {
+                  "failed_to_copy": "Failed to copy",
+                  "click_to_copy": "Copy ID",
+                  "copying": "Copying...",
+                  "done": "Copied to clipboard"
+                },
+                "copy-json": {
+                  "failed_to_copy": "Failed to copy",
+                  "click_to_copy": "Copy source as JSON",
+                  "copying": "Copying...",
+                  "done": "Copied to clipboard"
+                }
+              },
+              "error": {
+                "country_banned": "Store settings prohibit addresses in this country. Please adjust your store settings or use the Ignore address restrictions option.",
+                "address_name_exists": "Another address with the same name already exists. Please choose a unique name."
+              },
+              "address-name": {
+                "label": "Address name",
+                "placeholder": "Required",
+                "helper_text": "",
+                "v8n_required": "Please enter address name",
+                "v8n_too_long": "Please shorten address name to 100 characters or less"
+              },
+              "first-name": {
+                "label": "First name",
+                "placeholder": "Optional",
+                "helper_text": "",
+                "v8n_too_long": "Unfortunately we can't store first names longer than 50 characters"
+              },
+              "last-name": {
+                "label": "Last name",
+                "placeholder": "Optional",
+                "helper_text": "",
+                "v8n_too_long": "Unfortunately we can't store last names longer than 50 characters"
+              },
+              "company": {
+                "label": "Company",
+                "placeholder": "Optional",
+                "helper_text": "",
+                "v8n_too_long": "Unfortunately we can't store company names longer than 50 characters"
+              },
+              "phone": {
+                "label": "Phone",
+                "placeholder": "Optional",
+                "helper_text": "",
+                "v8n_too_long": "This phone number appears to be too long"
+              },
+              "address-one": {
+                "label": "Address Line 1",
+                "placeholder": "Required",
+                "helper_text": "Street address, P.O. box, company name, c/o",
+                "v8n_required": "Please enter address line 1",
+                "v8n_too_long": "Please shorten address line 1 to 100 characters or less"
+              },
+              "address-two": {
+                "label": "Address Line 2",
+                "placeholder": "Optional",
+                "helper_text": "Apartment, suite, unit, building, floor, etc.",
+                "v8n_too_long": "Please shorten address line 2 to 100 characters or less"
+              },
+              "city": {
+                "label": "City",
+                "placeholder": "Optional",
+                "helper_text": "",
+                "v8n_too_long": "Unfortunately we can't store city names longer than 50 characters"
+              },
+              "postal-code": {
+                "label": "Postal code",
+                "placeholder": "Optional",
+                "helper_text": "",
+                "v8n_too_long": "This postal code appears to be too long"
+              },
+              "country": {
+                "label": "Country",
+                "placeholder": "Optional",
+                "helper_text": ""
+              },
+              "region": {
+                "label": "Region",
+                "placeholder": "Optional",
+                "helper_text": "",
+                "v8n_too_long": "Unfortunately we can't store region names longer than 50 characters"
+              },
+              "ignore-address-restrictions": {
+                "label": "Advanced",
+                "option_true": "Ignore address restrictions",
+                "helper_text": "By default, the country value must be valid according to the store's location filtering settings. Checking this box will remove this restriction."
+              },
+              "timestamps": {
+                "date": "{{value, date}}",
+                "date_created": "Created on",
+                "date_modified": "Last updated on"
+              },
+              "delete": {
+                "delete": "Delete",
+                "cancel": "Cancel",
+                "delete_prompt": "Are you sure you'd like to remove this address? You won't be able to bring it back."
+              },
+              "undo": {
+                "caption": "Undo"
+              },
+              "submit": {
+                "caption": "Save changes"
+              },
+              "create": {
+                "caption": "Create"
+              },
+              "spinner": {
+                "refresh": "Refresh",
+                "loading_busy": "Loading",
+                "loading_error": "Unknown error"
+              },
+              "country_af": "Afghanistan",
+              "country_ax": "Åland Islands",
+              "country_al": "Albania",
+              "country_dz": "Algeria",
+              "country_as": "American Samoa",
+              "country_ad": "Andorra",
+              "country_ao": "Angola",
+              "country_ai": "Anguilla",
+              "country_aq": "Antarctica",
+              "country_ag": "Antigua and Barbuda",
+              "country_ar": "Argentina",
+              "country_am": "Armenia",
+              "country_aw": "Aruba",
+              "country_au": "Australia",
+              "country_au_region_act": "Australian Capital Territory",
+              "country_au_region_nsw": "New South Wales",
+              "country_au_region_nt": "Northern Territory",
+              "country_au_region_qld": "Queensland",
+              "country_au_region_sa": "South Australia",
+              "country_au_region_tas": "Tasmania",
+              "country_au_region_vic": "Victoria",
+              "country_au_region_wa": "Western Australia",
+              "country_at": "Austria",
+              "country_at_region_bl": "Burgenland",
+              "country_at_region_kn": "Kaernten",
+              "country_at_region_no": "Niederoesterreich",
+              "country_at_region_oo": "Oberoesterreich",
+              "country_at_region_sb": "Salzburg",
+              "country_at_region_st": "Steiermark",
+              "country_at_region_ti": "Tirol",
+              "country_at_region_vb": "Voralberg",
+              "country_at_region_wi": "Wien",
+              "country_az": "Azerbaijan",
+              "country_bs": "Bahamas",
+              "country_bh": "Bahrain",
+              "country_bd": "Bangladesh",
+              "country_bb": "Barbados",
+              "country_by": "Belarus",
+              "country_be": "Belgium",
+              "country_bz": "Belize",
+              "country_bj": "Benin",
+              "country_bm": "Bermuda",
+              "country_bt": "Bhutan",
+              "country_bo": "Bolivia",
+              "country_bq": "Bonaire, Sint Eustatius and Saba",
+              "country_bq_region_bo": "Bonaire",
+              "country_bq_region_sa": "Saba",
+              "country_bq_region_se": "Sint Eustatius",
+              "country_ba": "Bosnia and Herzegovina",
+              "country_bw": "Botswana",
+              "country_bv": "Bouvet Island",
+              "country_br": "Brazil",
+              "country_io": "British Indian Ocean Territory",
+              "country_bn": "Brunei Darussalam",
+              "country_bg": "Bulgaria",
+              "country_bf": "Burkina Faso",
+              "country_bi": "Burundi",
+              "country_kh": "Cambodia",
+              "country_cm": "Cameroon",
+              "country_ca": "Canada",
+              "country_ca_region_ab": "Alberta",
+              "country_ca_region_bc": "British Columbia",
+              "country_ca_region_mb": "Manitoba",
+              "country_ca_region_nb": "New Brunswick",
+              "country_ca_region_nl": "Newfoundland and Labrador",
+              "country_ca_region_nt": "Northwest Territories",
+              "country_ca_region_ns": "Nova Scotia",
+              "country_ca_region_nu": "Nunavut",
+              "country_ca_region_on": "Ontario",
+              "country_ca_region_pe": "Prince Edward Island",
+              "country_ca_region_qc": "Quebec",
+              "country_ca_region_sk": "Saskatchewan",
+              "country_ca_region_yt": "Yukon",
+              "country_cv": "Cape Verde",
+              "country_cw": "Curaçao",
+              "country_ky": "Cayman Islands",
+              "country_cf": "Central African Republic",
+              "country_td": "Chad",
+              "country_cl": "Chile",
+              "country_cn": "China",
+              "country_cx": "Christmas Island",
+              "country_cc": "Cocos (Keeling) Islands",
+              "country_co": "Colombia",
+              "country_km": "Comoros",
+              "country_cg": "Congo",
+              "country_cd": "Congo, the Democratic Republic of the",
+              "country_ck": "Cook Islands",
+              "country_cr": "Costa Rica",
+              "country_ci": "Cote DIvoire",
+              "country_hr": "Croatia",
+              "country_cu": "Cuba",
+              "country_cy": "Cyprus",
+              "country_cz": "Czech Republic",
+              "country_dk": "Denmark",
+              "country_dj": "Djibouti",
+              "country_dm": "Dominica",
+              "country_do": "Dominican Republic",
+              "country_ec": "Ecuador",
+              "country_eg": "Egypt",
+              "country_sv": "El Salvador",
+              "country_sx": "Sint Maarten",
+              "country_gq": "Equatorial Guinea",
+              "country_er": "Eritrea",
+              "country_ee": "Estonia",
+              "country_et": "Ethiopia",
+              "country_fk": "Falkland Islands (Malvinas)",
+              "country_fo": "Faroe Islands",
+              "country_fj": "Fiji",
+              "country_fi": "Finland",
+              "country_fr": "France",
+              "country_gf": "French Guiana",
+              "country_pf": "French Polynesia",
+              "country_tf": "French Southern Territories",
+              "country_ga": "Gabon",
+              "country_gm": "Gambia",
+              "country_ge": "Georgia",
+              "country_de": "Germany",
+              "country_de_region_bw": "Baden-Wuerttemberg",
+              "country_de_region_by": "Bayern",
+              "country_de_region_be": "Berlin",
+              "country_de_region_bb": "Brandenburg",
+              "country_de_region_hb": "Bremen",
+              "country_de_region_hh": "Hamburg",
+              "country_de_region_he": "Hessen",
+              "country_de_region_mv": "Mecklenburg-Vorpommern",
+              "country_de_region_ni": "Niedersachsen",
+              "country_de_region_nw": "Nordrhein-Westfalen",
+              "country_de_region_rp": "Rheinland-Pfalz",
+              "country_de_region_sl": "Saarland",
+              "country_de_region_sn": "Sachsen",
+              "country_de_region_st": "Sachsen-Anhalt",
+              "country_de_region_sh": "Schleswig-Holstein",
+              "country_de_region_th": "Thueringen",
+              "country_gh": "Ghana",
+              "country_gi": "Gibraltar",
+              "country_gr": "Greece",
+              "country_gl": "Greenland",
+              "country_gd": "Grenada",
+              "country_gp": "Guadeloupe",
+              "country_gu": "Guam",
+              "country_gt": "Guatemala",
+              "country_gg": "Guernsey",
+              "country_gn": "Guinea",
+              "country_gw": "Guinea-bissau",
+              "country_gy": "Guyana",
+              "country_ht": "Haiti",
+              "country_hm": "Heard Island and McDonald Island",
+              "country_va": "Holy See (Vatican City State)",
+              "country_hn": "Honduras",
+              "country_hk": "Hong Kong",
+              "country_hu": "Hungary",
+              "country_is": "Iceland",
+              "country_in": "India",
+              "country_in_region_an": "Andaman and Nicobar Islands",
+              "country_in_region_ap": "Andhra Pradesh",
+              "country_in_region_ar": "Arunachal Pradesh",
+              "country_in_region_as": "Assam",
+              "country_in_region_br": "Bihar",
+              "country_in_region_ch": "Chandigarh",
+              "country_in_region_ct": "Chhattisgarh",
+              "country_in_region_dn": "Dadra and Nagar Haveli",
+              "country_in_region_dd": "Daman and Diu",
+              "country_in_region_dl": "Delhi",
+              "country_in_region_ga": "Goa",
+              "country_in_region_gj": "Gujarat",
+              "country_in_region_hr": "Haryana",
+              "country_in_region_hp": "Himachal Pradesh",
+              "country_in_region_jk": "Jammu and Kashmir",
+              "country_in_region_jh": "Jharkhand",
+              "country_in_region_ka": "Karnataka",
+              "country_in_region_kl": "Kerala",
+              "country_in_region_ld": "Lakshadweep",
+              "country_in_region_mp": "Madhya Pradesh",
+              "country_in_region_mh": "Maharashtra",
+              "country_in_region_mn": "Manipur",
+              "country_in_region_ml": "Meghalaya",
+              "country_in_region_mz": "Mizoram",
+              "country_in_region_nl": "Nagaland",
+              "country_in_region_or": "Odisha",
+              "country_in_region_py": "Puducherry",
+              "country_in_region_pb": "Punjab",
+              "country_in_region_rj": "Rajasthan",
+              "country_in_region_sk": "Sikkim",
+              "country_in_region_tn": "Tamil Nadu",
+              "country_in_region_tg": "Telangana",
+              "country_in_region_tr": "Tripura",
+              "country_in_region_ut": "Uttarakhand",
+              "country_in_region_up": "Uttar Pradesh",
+              "country_in_region_wb": "West Bengal",
+              "country_id": "Indonesia",
+              "country_ir": "Iran, Islamic Republic of",
+              "country_iq": "Iraq",
+              "country_ie": "Ireland",
+              "country_ie_region_cw": "Carlow",
+              "country_ie_region_cn": "Cavan",
+              "country_ie_region_ce": "Clare",
+              "country_ie_region_co": "Cork",
+              "country_ie_region_dl": "Donegal",
+              "country_ie_region_d": "Dublin",
+              "country_ie_region_g": "Galway",
+              "country_ie_region_ky": "Kerry",
+              "country_ie_region_ke": "Kildare",
+              "country_ie_region_kk": "Kilkenny",
+              "country_ie_region_ls": "Laois",
+              "country_ie_region_lm": "Leitrim",
+              "country_ie_region_lk": "Limerick",
+              "country_ie_region_ld": "Longford",
+              "country_ie_region_lh": "Louth",
+              "country_ie_region_mo": "Mayo",
+              "country_ie_region_mh": "Meath",
+              "country_ie_region_mn": "Monaghan",
+              "country_ie_region_oy": "Offaly",
+              "country_ie_region_rn": "Roscommon",
+              "country_ie_region_so": "Sligo",
+              "country_ie_region_ta": "Tipperary",
+              "country_ie_region_wd": "Waterford",
+              "country_ie_region_wh": "Westmeath",
+              "country_ie_region_wx": "Wexford",
+              "country_ie_region_ww": "Wicklow",
+              "country_im": "Isle of Man",
+              "country_il": "Israel",
+              "country_it": "Italy",
+              "country_jm": "Jamaica",
+              "country_jp": "Japan",
+              "country_jp_region_10": "Gunma",
+              "country_jp_region_11": "Saitama",
+              "country_jp_region_12": "Chiba",
+              "country_jp_region_13": "Tokyo",
+              "country_jp_region_14": "Kanagawa",
+              "country_jp_region_15": "Niigata",
+              "country_jp_region_16": "Toyama",
+              "country_jp_region_17": "Ishikawa",
+              "country_jp_region_18": "Fukui",
+              "country_jp_region_19": "Yamanashi",
+              "country_jp_region_20": "Nagano",
+              "country_jp_region_21": "Gifu",
+              "country_jp_region_22": "Shizuoka",
+              "country_jp_region_23": "Aichi",
+              "country_jp_region_24": "Mie",
+              "country_jp_region_25": "Shiga",
+              "country_jp_region_26": "Kyoto",
+              "country_jp_region_27": "Osaka",
+              "country_jp_region_28": "Hyogo",
+              "country_jp_region_29": "Nara",
+              "country_jp_region_30": "Wakayama",
+              "country_jp_region_31": "Tottori",
+              "country_jp_region_32": "Shimane",
+              "country_jp_region_33": "Okayama",
+              "country_jp_region_34": "Hiroshima",
+              "country_jp_region_35": "Yamaguchi",
+              "country_jp_region_36": "Tokushima",
+              "country_jp_region_37": "Kagawa",
+              "country_jp_region_38": "Ehime",
+              "country_jp_region_39": "Kochi",
+              "country_jp_region_40": "Fukuoka",
+              "country_jp_region_41": "Saga",
+              "country_jp_region_42": "Nagasaki",
+              "country_jp_region_43": "Kumamoto",
+              "country_jp_region_44": "Oita",
+              "country_jp_region_45": "Miyazaki",
+              "country_jp_region_46": "Kagoshima",
+              "country_jp_region_47": "Okinawa",
+              "country_jp_region_05": "Akita",
+              "country_jp_region_02": "Aomori",
+              "country_jp_region_07": "Fukushima",
+              "country_jp_region_01": "Hokkaido",
+              "country_jp_region_08": "Ibaraki",
+              "country_jp_region_03": "Iwate",
+              "country_jp_region_04": "Miyagi",
+              "country_jp_region_09": "Tochigi",
+              "country_jp_region_06": "Yamagata",
+              "country_je": "Jersey",
+              "country_jo": "Jordan",
+              "country_kz": "Kazakhstan",
+              "country_ke": "Kenya",
+              "country_ki": "Kiribati",
+              "country_kp": "Korea, Democratic People's Republic of",
+              "country_kr": "Korea, Republic of",
+              "country_kw": "Kuwait",
+              "country_kg": "Kyrgyzstan",
+              "country_la": "Lao People's Democratic Republic",
+              "country_lv": "Latvia",
+              "country_lb": "Lebanon",
+              "country_ls": "Lesotho",
+              "country_lr": "Liberia",
+              "country_ly": "Libya",
+              "country_li": "Liechtenstein",
+              "country_lt": "Lithuania",
+              "country_lu": "Luxembourg",
+              "country_mo": "Macau Special Administrative Region of China",
+              "country_mk": "North Macedonia",
+              "country_mg": "Madagascar",
+              "country_mw": "Malawi",
+              "country_my": "Malaysia",
+              "country_mv": "Maldives",
+              "country_ml": "Mali",
+              "country_mt": "Malta",
+              "country_mh": "Marshall Islands",
+              "country_mq": "Martinique",
+              "country_mr": "Mauritania",
+              "country_mu": "Mauritius",
+              "country_yt": "Mayotte",
+              "country_mx": "Mexico",
+              "country_fm": "Micronesia, Federated States of",
+              "country_md": "Moldova, Republic of",
+              "country_mc": "Monaco",
+              "country_mn": "Mongolia",
+              "country_me": "Montenegro",
+              "country_ms": "Montserrat",
+              "country_ma": "Morocco",
+              "country_mz": "Mozambique",
+              "country_mm": "Myanmar",
+              "country_na": "Namibia",
+              "country_nr": "Nauru",
+              "country_np": "Nepal",
+              "country_nl": "Netherlands",
+              "country_nc": "New Caledonia",
+              "country_nz": "New Zealand",
+              "country_ni": "Nicaragua",
+              "country_ne": "Niger",
+              "country_ng": "Nigeria",
+              "country_nu": "Niue",
+              "country_nf": "Norfolk Island",
+              "country_mp": "Northern Mariana Islands",
+              "country_no": "Norway",
+              "country_no_region_10": "Vest-Agder",
+              "country_no_region_11": "Rogaland",
+              "country_no_region_12": "Hordaland",
+              "country_no_region_14": "Sogn og Fjordane",
+              "country_no_region_15": "Møre og Romsdal",
+              "country_no_region_16": "Sør-Trøndelag",
+              "country_no_region_17": "Nord-Trøndelag",
+              "country_no_region_18": "Nordland",
+              "country_no_region_19": "Troms",
+              "country_no_region_20": "Finnmark",
+              "country_no_region_30": "Viken",
+              "country_no_region_34": "Innlandet",
+              "country_no_region_38": "Vestfold og Telemark",
+              "country_no_region_42": "Agder",
+              "country_no_region_46": "Vestland",
+              "country_no_region_50": "Trøndelag",
+              "country_no_region_54": "Troms og Finnmark",
+              "country_no_region_01": "Østfold",
+              "country_no_region_02": "Akershus",
+              "country_no_region_03": "Oslo",
+              "country_no_region_04": "Hedmark",
+              "country_no_region_05": "Oppland",
+              "country_no_region_06": "Buskerud",
+              "country_no_region_07": "Vestfold",
+              "country_no_region_08": "Telemark",
+              "country_no_region_09": "Aust-Agder",
+              "country_om": "Oman",
+              "country_pk": "Pakistan",
+              "country_pw": "Palau",
+              "country_ps": "Palestine, State of",
+              "country_pa": "Panama",
+              "country_pg": "Papua New Guinea",
+              "country_py": "Paraguay",
+              "country_pe": "Peru",
+              "country_ph": "Philippines",
+              "country_pn": "Pitcairn",
+              "country_pl": "Poland",
+              "country_pt": "Portugal",
+              "country_pr": "Puerto Rico",
+              "country_qa": "Qatar",
+              "country_re": "Réunion",
+              "country_ro": "Romania",
+              "country_ru": "Russian Federation",
+              "country_rw": "Rwanda",
+              "country_bl": "Saint Barthélemy",
+              "country_sh": "Saint Helena, Ascension and Tristan da Cunha",
+              "country_kn": "Saint Kitts and Nevis",
+              "country_lc": "Saint Lucia",
+              "country_mf": "Saint Martin",
+              "country_pm": "Saint Pierre and Miquelon",
+              "country_vc": "Saint Vincent and the Grenadines",
+              "country_ws": "Samoa",
+              "country_sm": "San Marino",
+              "country_ss": "South Sudan",
+              "country_st": "Sao Tome and Principe",
+              "country_sa": "Saudi Arabia",
+              "country_sn": "Senegal",
+              "country_rs": "Serbia",
+              "country_sc": "Seychelles",
+              "country_sl": "Sierra Leone",
+              "country_sg": "Singapore",
+              "country_sk": "Slovakia",
+              "country_si": "Slovenia",
+              "country_sb": "Solomon Islands",
+              "country_so": "Somalia",
+              "country_za": "South Africa",
+              "country_gs": "South Georgia and the South Sandwich Islands",
+              "country_es": "Spain",
+              "country_es_region_a coruna": "A Coruna",
+              "country_es_region_alava": "Alava",
+              "country_es_region_albacete": "Albacete",
+              "country_es_region_alicante": "Alicante",
+              "country_es_region_almeria": "Almeria",
+              "country_es_region_asturias": "Asturias",
+              "country_es_region_avila": "Avila",
+              "country_es_region_badajoz": "Badajoz",
+              "country_es_region_baleares": "Baleares",
+              "country_es_region_barcelona": "Barcelona",
+              "country_es_region_burgos": "Burgos",
+              "country_es_region_caceres": "Caceres",
+              "country_es_region_cadiz": "Cadiz",
+              "country_es_region_cn": "Canarias",
+              "country_es_region_cantabria": "Cantabria",
+              "country_es_region_castellon": "Castellon",
+              "country_es_region_ceuta": "Ceuta",
+              "country_es_region_ciudad real": "Ciudad Real",
+              "country_es_region_cordoba": "Cordoba",
+              "country_es_region_cuenca": "Cuenca",
+              "country_es_region_gipuzkoa": "Gipuzkoa",
+              "country_es_region_girona": "Girona",
+              "country_es_region_granada": "Granada",
+              "country_es_region_guadalajara": "Guadalajara",
+              "country_es_region_guipuzcoa": "Guipuzcoa",
+              "country_es_region_huelva": "Huelva",
+              "country_es_region_huesca": "Huesca",
+              "country_es_region_jaen": "Jaen",
+              "country_es_region_la rioja": "La Rioja",
+              "country_es_region_las palmas": "Las Palmas",
+              "country_es_region_leon": "Leon",
+              "country_es_region_lleida": "Lleida",
+              "country_es_region_lugo": "Lugo",
+              "country_es_region_madrid": "Madrid",
+              "country_es_region_malaga": "Malaga",
+              "country_es_region_melilla": "Melilla",
+              "country_es_region_murcia": "Murcia",
+              "country_es_region_navarra": "Navarra",
+              "country_es_region_ourense": "Ourense",
+              "country_es_region_palencia": "Palencia",
+              "country_es_region_pontevedra": "Pontevedra",
+              "country_es_region_salamanca": "Salamanca",
+              "country_es_region_santa cruz de tenerife": "Santa Cruz de Tenerife",
+              "country_es_region_segovia": "Segovia",
+              "country_es_region_sevilla": "Sevilla",
+              "country_es_region_soria": "Soria",
+              "country_es_region_tarragona": "Tarragona",
+              "country_es_region_teruel": "Teruel",
+              "country_es_region_toledo": "Toledo",
+              "country_es_region_valencia": "Valencia",
+              "country_es_region_valladolid": "Valladolid",
+              "country_es_region_vizcaya": "Biscay",
+              "country_es_region_zamora": "Zamora",
+              "country_es_region_zaragoza": "Zaragoza",
+              "country_lk": "Sri Lanka",
+              "country_sd": "Sudan",
+              "country_sr": "Suriname",
+              "country_sj": "Svalbard and Jan Mayen",
+              "country_sz": "Eswatini",
+              "country_se": "Sweden",
+              "country_ch": "Switzerland",
+              "country_ch_region_ag": "Aargau",
+              "country_ch_region_ar": "Appenzell Ausserrhoden",
+              "country_ch_region_ai": "Appenzell Innerrhoden",
+              "country_ch_region_bl": "Basel-Landschaft",
+              "country_ch_region_bs": "Basel-Stadt",
+              "country_ch_region_be": "Bern",
+              "country_ch_region_fr": "Freiburg",
+              "country_ch_region_ge": "Genf",
+              "country_ch_region_gl": "Glarus",
+              "country_ch_region_gr": "Graubuenden",
+              "country_ch_region_ju": "Jura",
+              "country_ch_region_lu": "Luzern",
+              "country_ch_region_ne": "Neuenburg",
+              "country_ch_region_nw": "Nidwalden",
+              "country_ch_region_ow": "Obwalden",
+              "country_ch_region_sh": "Schaffhausen",
+              "country_ch_region_sz": "Schwyz",
+              "country_ch_region_so": "Solothurn",
+              "country_ch_region_sg": "St. Gallen",
+              "country_ch_region_ti": "Tessin",
+              "country_ch_region_tg": "Thurgau",
+              "country_ch_region_ur": "Uri",
+              "country_ch_region_vs": "Valais",
+              "country_ch_region_vd": "Vaud",
+              "country_ch_region_zh": "Zurich",
+              "country_ch_region_zg": "Zug",
+              "country_sy": "Syrian Arab Republic",
+              "country_tw": "Taiwan",
+              "country_tj": "Tajikistan",
+              "country_tz": "Tanzania, United Republic of",
+              "country_th": "Thailand",
+              "country_tl": "Timor-Leste",
+              "country_tg": "Togo",
+              "country_tk": "Tokelau",
+              "country_to": "Tonga",
+              "country_tt": "Trinidad and Tobago",
+              "country_tn": "Tunisia",
+              "country_tr": "Turkey",
+              "country_tm": "Turkmenistan",
+              "country_tc": "Turks and Caicos Islands",
+              "country_tv": "Tuvalu",
+              "country_ug": "Uganda",
+              "country_ua": "Ukraine",
+              "country_ae": "United Arab Emirates",
+              "country_gb": "United Kingdom",
+              "country_us": "United States",
+              "country_us_region_al": "Alabama",
+              "country_us_region_ak": "Alaska",
+              "country_us_region_as": "American Samoa",
+              "country_us_region_az": "Arizona",
+              "country_us_region_ar": "Arkansas",
+              "country_us_region_af": "Armed Forces Africa",
+              "country_us_region_aa": "Armed Forces Americas",
+              "country_us_region_ac": "Armed Forces Canada",
+              "country_us_region_ae": "Armed Forces Europe",
+              "country_us_region_am": "Armed Forces Middle East",
+              "country_us_region_ap": "Armed Forces Pacific",
+              "country_us_region_ca": "California",
+              "country_us_region_co": "Colorado",
+              "country_us_region_ct": "Connecticut",
+              "country_us_region_de": "Delaware",
+              "country_us_region_dc": "Washington DC",
+              "country_us_region_fm": "Federated States Of Micronesia",
+              "country_us_region_fl": "Florida",
+              "country_us_region_ga": "Georgia",
+              "country_us_region_gu": "Guam",
+              "country_us_region_hi": "Hawaii",
+              "country_us_region_id": "Idaho",
+              "country_us_region_il": "Illinois",
+              "country_us_region_in": "Indiana",
+              "country_us_region_ia": "Iowa",
+              "country_us_region_ks": "Kansas",
+              "country_us_region_ky": "Kentucky",
+              "country_us_region_la": "Louisiana",
+              "country_us_region_me": "Maine",
+              "country_us_region_mh": "Marshall Islands",
+              "country_us_region_md": "Maryland",
+              "country_us_region_ma": "Massachusetts",
+              "country_us_region_mi": "Michigan",
+              "country_us_region_mn": "Minnesota",
+              "country_us_region_ms": "Mississippi",
+              "country_us_region_mo": "Missouri",
+              "country_us_region_mt": "Montana",
+              "country_us_region_ne": "Nebraska",
+              "country_us_region_nv": "Nevada",
+              "country_us_region_nh": "New Hampshire",
+              "country_us_region_nj": "New Jersey",
+              "country_us_region_nm": "New Mexico",
+              "country_us_region_ny": "New York",
+              "country_us_region_nc": "North Carolina",
+              "country_us_region_nd": "North Dakota",
+              "country_us_region_mp": "Northern Mariana Islands",
+              "country_us_region_oh": "Ohio",
+              "country_us_region_ok": "Oklahoma",
+              "country_us_region_or": "Oregon",
+              "country_us_region_pa": "Pennsylvania",
+              "country_us_region_pr": "Puerto Rico",
+              "country_us_region_ri": "Rhode Island",
+              "country_us_region_sc": "South Carolina",
+              "country_us_region_sd": "South Dakota",
+              "country_us_region_tn": "Tennessee",
+              "country_us_region_tx": "Texas",
+              "country_us_region_ut": "Utah",
+              "country_us_region_vt": "Vermont",
+              "country_us_region_vi": "Virgin Islands",
+              "country_us_region_va": "Virginia",
+              "country_us_region_wa": "Washington",
+              "country_us_region_wv": "West Virginia",
+              "country_us_region_wi": "Wisconsin",
+              "country_us_region_wy": "Wyoming",
+              "country_um": "United States Minor Outlying Islands",
+              "country_uy": "Uruguay",
+              "country_uz": "Uzbekistan",
+              "country_vu": "Vanuatu",
+              "country_ve": "Venezuela",
+              "country_vn": "Vietnam",
+              "country_vg": "Virgin Islands, British",
+              "country_vi": "Virgin Islands, U.S.",
+              "country_wf": "Wallis and Futuna Islands",
+              "country_eh": "Western Sahara",
+              "country_ye": "Yemen",
+              "country_zm": "Zambia",
+              "country_zw": "Zimbabwe"
+            }
+          },
+          "pagination": {
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "full_address": "{{address1}} {{address2}} {{city}} {{region}} {{country}} {{postal_code}}",
+              "full_name": "{{first_name}} {{last_name}}",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No addresses",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        },
+        "shipments": {
+          "label": "Shipments",
+          "pagination": {
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "full_address": "{{ address1 }} {{ address2 }} {{ city }} {{ region }} {{ postal_code }}",
+              "quantity": "Qty: {{ count }}",
+              "no_code": "No SKU",
+              "price": "{{ amount, price }}",
+              "item": "{{ count }} item",
+              "item_plural": "{{ count }} items",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No shipments",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        },
+        "actions": {
+          "capture": {
+            "idle": "Capture",
+            "busy": "Capturing...",
+            "fail": "Failed to capture",
+            "confirm": {
+              "header": "Capture",
+              "message": "Are you sure you'd like to capture this transaction?",
+              "confirm": "Yes",
+              "cancel": "No"
+            }
+          },
+          "void": {
+            "idle": "Void",
+            "busy": "Voiding...",
+            "fail": "Failed to void",
+            "confirm": {
+              "header": "Void",
+              "message": "Are you sure you'd like to void this transaction?",
+              "confirm": "Yes",
+              "cancel": "No"
+            }
+          },
+          "refund": {
+            "idle": "Refund",
+            "busy": "Refunding...",
+            "fail": "Failed to refund",
+            "confirm": {
+              "header": "Refund",
+              "message": "Are you sure you'd like to refund this transaction?",
+              "confirm": "Yes",
+              "cancel": "No"
+            }
+          },
+          "send-emails": {
+            "idle": "Resend emails",
+            "busy": "Resending emails...",
+            "fail": "Failed to resend emails",
+            "confirm": {
+              "header": "Send emails",
+              "message": "Are you sure you'd like to send emails for this transaction?",
+              "confirm": "Yes",
+              "cancel": "No"
+            }
+          },
+          "subscription": {
+            "caption": "Go to subscription"
+          }
+        },
+        "spinner": {
+          "refresh": "Refresh",
+          "loading_busy": "Loading",
+          "loading_empty": "No data",
+          "loading_error": "Unknown error"
+        }
+      }
+    }
+  },
+  "timestamps": {
+    "date": "{{value, date}}",
+    "date_created": "Created on",
+    "date_modified": "Last updated on"
+  },
+  "undo": {
+    "caption": "Undo"
+  },
+  "submit": {
+    "caption": "Save changes"
+  },
+  "spinner": {
+    "refresh": "Refresh",
+    "loading_busy": "Loading",
+    "loading_error": "Unknown error"
+  }
+}
\ No newline at end of file
diff --git a/src/static/translations/api-browser/en.json b/src/static/translations/api-browser/en.json
index cd1317f7e..5c131cc8a 100644
--- a/src/static/translations/api-browser/en.json
+++ b/src/static/translations/api-browser/en.json
@@ -11,7 +11,7 @@
   "next": "Next",
   "pagination": "{{from}}-{{to}} out of {{total}}",
   "previous": "Previous",
-  "caption": "Undo",
+  "undo": "Undo",
   "editor": {
     "label": "Resource JSON",
     "placeholder": "Enter resource JSON here and click Submit to save"
@@ -30,11 +30,8 @@
     "cancel": "Cancel",
     "delete_prompt": "Are you sure you'd like to remove this resource? You won't be able to bring it back."
   },
-  "undo": {
-    "caption": "Undo"
-  },
   "submit": {
-    "caption": "Save changes"
+    "caption": "Submit"
   },
   "create": {
     "caption": "Submit"
diff --git a/src/static/translations/cart-form/en.json b/src/static/translations/cart-form/en.json
index ba9a1a0ac..a474757e9 100644
--- a/src/static/translations/cart-form/en.json
+++ b/src/static/translations/cart-form/en.json
@@ -16,24 +16,531 @@
       "done": "Copied to clipboard"
     }
   },
-  "order_section_title": "Order",
-  "order_section_description": "Cart items, discounts and metadata",
-  "billing_section_title": "Billing",
-  "billing_section_description": "Address associated with the payment method",
-  "shipping_section_title": "Shipping",
-  "shipping_section_description": "Location where the ordered items will be delivered",
-  "customer-type": {
-    "label": "Customer type",
-    "placeholder": "Select type...",
+  "general": {
+    "label": "",
     "helper_text": "",
-    "option_new": "New customer",
-    "option_guest": "Guest customer",
-    "option_regular": "Existing customer"
+    "template-set-uri": {
+      "label": "Template set",
+      "helper_text": "",
+      "value": "{{ resource.code }}",
+      "value_busy": "Loading...",
+      "value_fail": "Failed to load",
+      "placeholder": "Not set",
+      "dialog": {
+        "cancel": "Cancel",
+        "close": "Close",
+        "header": "Select an template set",
+        "selection": {
+          "label": "Template sets",
+          "helper_text": "",
+          "pagination": {
+            "search_button_text": "Search",
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No template sets found",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        }
+      }
+    },
+    "language": {
+      "label": "Language",
+      "placeholder": "Synced with template set",
+      "helper_text": ""
+    },
+    "customer-uri": {
+      "label": "Customer",
+      "helper_text": "",
+      "value": "{{ resource.first_name }} {{ resource.last_name }} • {{ resource.email }}",
+      "value_busy": "Loading...",
+      "value_fail": "Failed to load",
+      "placeholder": "Not set",
+      "dialog": {
+        "cancel": "Cancel",
+        "close": "Close",
+        "header": "Select an account",
+        "selection": {
+          "label": "Customers",
+          "helper_text": "",
+          "search": "Search",
+          "clear": "Clear",
+          "query-builder": {
+            "filter_is_anonymous": "Account type",
+            "filter_is_anonymous_value_false": "Registered",
+            "filter_is_anonymous_value_true": "Guest",
+            "filter_email": "Email",
+            "add_or_clause": "Add OR clause",
+            "add_value": "Add value",
+            "date": "{{value, date}}",
+            "delete": "Delete",
+            "field": "Field",
+            "hidden": "Hidden",
+            "is_defined_false": "Not defined",
+            "is_defined_true": "Defined",
+            "name": "Name",
+            "operator_equal": "Equal",
+            "operator_greaterthan": "Greater than",
+            "operator_greaterthanorequal": "Greater than or equal",
+            "operator_in": "One of",
+            "operator_isdefined": "Is defined",
+            "operator_lessthan": "Less than",
+            "operator_lessthanorequal": "Less than or equal",
+            "operator_not": "Not equal",
+            "or": "Or",
+            "query_builder_group": "Group of filters",
+            "query_builder_rule": "Filter",
+            "range_from": "From",
+            "range_to": "To",
+            "type": "Type",
+            "type_any": "Field of unknown type",
+            "type_attribute": "Key-value resource",
+            "type_date": "Date field",
+            "type_here": "Type here...",
+            "type_number": "Numeric field",
+            "type_string": "Text field",
+            "value": "Value"
+          },
+          "pagination": {
+            "search_button_text": "Search",
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No customers found",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        }
+      }
+    },
+    "customer-email": {
+      "label": "Customer email",
+      "placeholder": "Not set",
+      "helper_text": "Use this field to store the email for a customer who may not have an account yet."
+    }
   },
-  "customer": {
-    "label": "Customer email",
-    "placeholder": "customer@example.com",
-    "helper_text": ""
+  "billing": {
+    "label": "Billing",
+    "helper_text": "",
+    "payment-method-uri": {
+      "label": "Payment method",
+      "helper_text": "",
+      "value": "{{ cc_type }} ••••{{ cc_last4 }}, expires {{ cc_exp_month }}/{{ cc_exp_year }}",
+      "value_empty": "Not set",
+      "value_busy": "Loading...",
+      "value_fail": "Failed to load",
+      "edit": "Edit",
+      "dialog": {
+        "cancel": "Cancel",
+        "close": "Close",
+        "save": "Save",
+        "header": "Payment method",
+        "or": "or",
+        "select_previous": "Select previous",
+        "default-payment-method": {
+          "header": {
+            "title_existing": "Update default",
+            "subtitle": ""
+          },
+          "status": {
+            "cc_token_success": "Card details saved successfully.",
+            "close": "Close"
+          },
+          "error": {
+            "cc_token_invalid": "Unfortunately, we couldn't save your card details. Please try again later or use a different card."
+          },
+          "template-set": {
+            "label": "Template set",
+            "dialog": {
+              "cancel": "Cancel",
+              "close": "Close",
+              "header": "Choose a template set",
+              "selection": {
+                "label": "",
+                "helper_text": "",
+                "search": "Search",
+                "clear": "Clear",
+                "pagination": {
+                  "search_button_text": "Search",
+                  "first": "First",
+                  "last": "Last",
+                  "next": "Next",
+                  "pagination": "{{from}}-{{to}} out of {{total}}",
+                  "previous": "Previous",
+                  "card": {
+                    "spinner": {
+                      "loading_busy": "Loading",
+                      "loading_empty": "No template sets found",
+                      "loading_error": "Unknown error"
+                    }
+                  }
+                },
+                "query-builder": {
+                  "filters": {},
+                  "add_or_clause": "Add OR clause",
+                  "add_value": "Add value",
+                  "code": "Code",
+                  "date": "{{value, date}}",
+                  "date_created": "Created on",
+                  "date_modified": "Last updated on",
+                  "delete": "Delete",
+                  "field": "Field",
+                  "hidden": "Hidden",
+                  "is_defined_false": "Not defined",
+                  "is_defined_true": "Defined",
+                  "name": "Name",
+                  "operator_equal": "Equal",
+                  "operator_greaterthan": "Greater than",
+                  "operator_greaterthanorequal": "Greater than or equal",
+                  "operator_in": "One of",
+                  "operator_isdefined": "Is defined",
+                  "operator_lessthan": "Less than",
+                  "operator_lessthanorequal": "Less than or equal",
+                  "operator_not": "Not equal",
+                  "or": "Or",
+                  "query_builder_group": "Group of filters",
+                  "query_builder_rule": "Filter",
+                  "range_from": "From",
+                  "range_to": "To",
+                  "type": "Type",
+                  "type_any": "Field of unknown type",
+                  "type_attribute": "Key-value resource",
+                  "type_date": "Date field",
+                  "type_here": "Type here...",
+                  "type_number": "Numeric field",
+                  "type_string": "Text field",
+                  "used_codes": "Codes used",
+                  "value": "Value"
+                }
+              }
+            },
+            "card": {
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "Click to select",
+                "loading_error": "Unknown error"
+              }
+            },
+            "helper_text": "Template set determines which payment gateway and tokenization service will be used to capture card details."
+          },
+          "cc-token": {
+            "tokenize": "Save card",
+            "payment-card-embed": {
+              "stripe": {
+                "label": "Card details",
+                "status": {
+                  "idle": "Your card details are securely processed by Stripe. Visit https://stripe.com to learn more.",
+                  "busy": "Encrypting your card details...",
+                  "fail": "This service is currently unavailable. Please try again later.",
+                  "unsupported": "We don't support this card type. Please try a different card."
+                }
+              },
+              "square": {
+                "label": "Card details",
+                "status": {
+                  "idle": "Your card details are securely processed by Square. Visit https://squareup.com to learn more.",
+                  "busy": "Encrypting your card details...",
+                  "fail": "This service is currently unavailable. Please try again later.",
+                  "unsupported": "We don't support this card type. Please try a different card."
+                }
+              },
+              "default": {
+                "cc-number": {
+                  "label": "Card number",
+                  "placeholder": "1234 1234 1234 1234",
+                  "v8n_required": "Enter a card number.",
+                  "v8n_invalid": "Check your card number – it doesn't seem to be valid.",
+                  "v8n_unsupported": "We don't support this card type."
+                },
+                "cc-exp": {
+                  "label": "Expires on",
+                  "placeholder": "MM/YYYY",
+                  "v8n_required": "Enter an expiry date.",
+                  "v8n_invalid": "Enter a date as MM/YYYY.",
+                  "v8n_expired": "Your card has expired."
+                },
+                "cc-csc": {
+                  "label": "CSC",
+                  "placeholder": "XXX",
+                  "v8n_required": "Enter a security code.",
+                  "v8n_invalid": "Enter a 3-4 digits code."
+                },
+                "status": {
+                  "idle": "Your card details are securely processed by Foxy.io. Visit https://foxy.io to learn more.",
+                  "busy": "Encrypting your card details...",
+                  "fail": "This service is currently unavailable. Please try again later.",
+                  "misconfigured": "This form is not configured correctly. If you are seeing this message as a customer, please report this issue to the store support team."
+                }
+              }
+            }
+          },
+          "spinner": {
+            "refresh": "Refresh",
+            "loading_busy": "Loading",
+            "loading_error": "Unknown error",
+            "loading_empty": "This form works only with existing payment methods"
+          }
+        },
+        "selection": {
+          "label": "Payment methods",
+          "helper_text": "These are the payment methods used by the customer in the past. You can select one of them to use instead of the default payment method. Note that not all payment gateways support this feature. If you are unsure, please contact us for help.",
+          "search": "Search",
+          "clear": "Clear",
+          "query-builder": {
+            "filter_type": "Payment type",
+            "filter_type_value_purchase_order": "Purchase order",
+            "filter_type_value_paypal": "PayPal",
+            "filter_type_value_amazon_mws": "Amazon MWS",
+            "filter_type_value_hosted": "Hosted",
+            "filter_type_value_ogone": "Ogone",
+            "filter_type_value_paypal_ec": "PayPal Express Checkout",
+            "filter_cc_type": "Card brand",
+            "filter_cc_type_value_visa": "Visa",
+            "filter_cc_type_value_mastercard": "Mastercard",
+            "filter_cc_type_value_amex": "American Express",
+            "filter_cc_type_value_discover": "Discover",
+            "filter_cc_type_value_jcb": "JCB",
+            "filter_cc_type_value_diners": "Diners Club",
+            "filter_cc_type_value_maestro": "Maestro",
+            "filter_cc_type_value_unionpay": "UnionPay",
+            "filter_cc_number_masked": "Card number (masked)",
+            "add_or_clause": "Add OR clause",
+            "add_value": "Add value",
+            "date": "{{value, date}}",
+            "delete": "Delete",
+            "field": "Field",
+            "hidden": "Hidden",
+            "is_defined_false": "Not defined",
+            "is_defined_true": "Defined",
+            "name": "Name",
+            "operator_equal": "Equal",
+            "operator_greaterthan": "Greater than",
+            "operator_greaterthanorequal": "Greater than or equal",
+            "operator_in": "One of",
+            "operator_isdefined": "Is defined",
+            "operator_lessthan": "Less than",
+            "operator_lessthanorequal": "Less than or equal",
+            "operator_not": "Not equal",
+            "or": "Or",
+            "query_builder_group": "Group of filters",
+            "query_builder_rule": "Filter",
+            "range_from": "From",
+            "range_to": "To",
+            "type": "Type",
+            "type_any": "Field of unknown type",
+            "type_attribute": "Key-value resource",
+            "type_date": "Date field",
+            "type_here": "Type here...",
+            "type_number": "Numeric field",
+            "type_string": "Text field",
+            "value": "Value"
+          },
+          "pagination": {
+            "search_button_text": "Search",
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "title_valid": "{{type}} ••••{{last4Digits}}, expires {{month}}/{{year}}",
+              "title_invalid": "Unknown payment method",
+              "subtitle": "Transaction #{{id}} • {{date, date}}",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No payment methods found",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        }
+      }
+    },
+    "billing-address": {
+      "label": "Billing address",
+      "helper_text": "Uses customer's default billing address unless edited. Modified fields are highlighted.",
+      "form_helper_text": "Default values are shown as placeholders in empty fields. To override a currently empty field with a permanently empty value, enter any character and then delete it.",
+      "empty_modified_placeholder": "Empty (this cart only)",
+      "not_set": "Not set",
+      "reset": "Reset overrides",
+      "done": "Done",
+      "name": {
+        "label": "",
+        "helper_text": "",
+        "first-name": {
+          "label": "First name",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "last-name": {
+          "label": "Last name",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        }
+      },
+      "extra": {
+        "label": "",
+        "helper_text": "",
+        "company": {
+          "label": "Company",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "phone": {
+          "label": "Phone",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        }
+      },
+      "address": {
+        "label": "",
+        "helper_text": "",
+        "address-one": {
+          "label": "Address Line 1",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "address-two": {
+          "label": "Address Line 2",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "country": {
+          "label": "Country",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "state": {
+          "label": "Region",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "city": {
+          "label": "City",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "postal-code": {
+          "label": "Postal code",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        }
+      }
+    }
+  },
+  "shipping": {
+    "label": "Shipping",
+    "helper_text": "",
+    "use-customer-shipping-address": {
+      "label": "Ship to billing address",
+      "helper_text": "",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "shipping-address": {
+      "label": "Shipping address",
+      "helper_text": "Uses customer's default shipping address unless edited. Modified fields are highlighted.",
+      "form_helper_text": "Default values are shown as placeholders in empty fields. To override a currently empty field with a permanently empty value, enter any character and then delete it.",
+      "empty_modified_placeholder": "Empty (this cart only)",
+      "not_set": "Not set",
+      "reset": "Reset overrides",
+      "done": "Done",
+      "name": {
+        "label": "",
+        "helper_text": "",
+        "first-name": {
+          "label": "First name",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "last-name": {
+          "label": "Last name",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        }
+      },
+      "extra": {
+        "label": "",
+        "helper_text": "",
+        "company": {
+          "label": "Company",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "phone": {
+          "label": "Phone",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        }
+      },
+      "address": {
+        "label": "",
+        "helper_text": "",
+        "address-one": {
+          "label": "Address Line 1",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "address-two": {
+          "label": "Address Line 2",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "country": {
+          "label": "Country",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "state": {
+          "label": "Region",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "city": {
+          "label": "City",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        },
+        "postal-code": {
+          "label": "Postal code",
+          "helper_text": "",
+          "placeholder": "Empty",
+          "suffix": ""
+        }
+      }
+    }
   },
   "items": {
     "label": "Items",
@@ -124,7 +631,6 @@
       },
       "subscription-frequency": {
         "label": "Subscription frequency",
-        "helper_text": "",
         "day": "Day",
         "day_plural": "Days",
         "week": "Week",
@@ -522,6 +1028,13 @@
       }
     }
   },
+  "totals": {
+    "total_shipping": "Shipping",
+    "total_tax": "Tax",
+    "subtotal": "Subtotal",
+    "total": "Total",
+    "price": "{{amount, price}}"
+  },
   "applied-coupon-codes": {
     "label": "Coupon codes",
     "delete_confirm": "Delete",
@@ -608,156 +1121,6 @@
       }
     }
   },
-  "totals": {
-    "price": "{{ amount, price }}",
-    "total_order": "Total: {{ amount, price }}",
-    "total_item_price": "Total item price",
-    "total_shipping": "Total shipping",
-    "total_tax": "Total tax"
-  },
-  "discounts": {
-    "label": "Discounts",
-    "pagination": {
-      "first": "First",
-      "last": "Last",
-      "next": "Next",
-      "pagination": "{{from}}-{{to}} out of {{total}}",
-      "previous": "Previous",
-      "card": {
-        "price": "{{amount, price}}",
-        "spinner": {
-          "loading_busy": "Loading",
-          "loading_empty": "No discounts",
-          "loading_error": "Unknown error"
-        }
-      }
-    }
-  },
-  "template-set-uri": {
-    "label": "Template set",
-    "placeholder": "Select template set...",
-    "helper_text": ""
-  },
-  "billing-first-name": {
-    "label": "First name",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "We can't store first names that are more than 50 characters long. Please shorten this value."
-  },
-  "billing-last-name": {
-    "label": "Last name",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "We can't store last names that are more than 50 characters long. Please shorten this value."
-  },
-  "billing-company": {
-    "label": "Company",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "We can't store company names that are more than 50 characters long. Please shorten this value."
-  },
-  "billing-phone": {
-    "label": "Phone",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "This phone number is unusually long. Please use a value below 50 characters."
-  },
-  "billing-address-one": {
-    "label": "Address Line 1",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 100 characters."
-  },
-  "billing-address-two": {
-    "label": "Address Line 2",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 100 characters."
-  },
-  "billing-country": {
-    "label": "Country",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 50 characters."
-  },
-  "billing-region": {
-    "label": "Region",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 50 characters."
-  },
-  "billing-city": {
-    "label": "City",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 50 characters."
-  },
-  "billing-postal-code": {
-    "label": "Postal code",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "This postal code is unsually long. Please use a code that fits in 50 characters."
-  },
-  "shipping-first-name": {
-    "label": "First name",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "We can't store first names that are more than 50 characters long. Please shorten this value."
-  },
-  "shipping-last-name": {
-    "label": "Last name",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "We can't store last names that are more than 50 characters long. Please shorten this value."
-  },
-  "shipping-company": {
-    "label": "Company",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "We can't store company names that are more than 50 characters long. Please shorten this value."
-  },
-  "shipping-phone": {
-    "label": "Phone",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "This phone number is unusually long. Please use a value below 50 characters."
-  },
-  "shipping-address-one": {
-    "label": "Address Line 1",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 100 characters."
-  },
-  "shipping-address-two": {
-    "label": "Address Line 2",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 100 characters."
-  },
-  "shipping-country": {
-    "label": "Country",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 50 characters."
-  },
-  "shipping-region": {
-    "label": "Region",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 50 characters."
-  },
-  "shipping-city": {
-    "label": "City",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "Please shorten this value to fit 50 characters."
-  },
-  "shipping-postal-code": {
-    "label": "Postal code",
-    "placeholder": "",
-    "helper_text": "",
-    "v8n_too_long": "This postal code is unsually long. Please use a code that fits in 50 characters."
-  },
   "custom-fields": {
     "label": "Custom fields",
     "delete_confirm": "Delete",
@@ -883,13 +1246,79 @@
     "dialog": {
       "close": "Close",
       "cancel": "Cancel",
-      "header_update": "Custom field",
+      "header_update": "Attribute",
       "header_create": "New attribute",
       "save": "Save",
       "undo_header": "Unsaved changes",
       "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
       "undo_cancel": "Review",
-      "undo_confirm": "Discard"
+      "undo_confirm": "Discard",
+      "attribute-form": {
+        "header": {
+          "title_existing": "Cart attribute #{{ id }}",
+          "title_new": "New cart attribute",
+          "subtitle_private": "Visible only to you",
+          "subtitle_restricted": "Visible to store admins",
+          "subtitle_public": "Visible to everyone",
+          "copy-id": {
+            "failed_to_copy": "Failed to copy",
+            "click_to_copy": "Copy ID",
+            "copying": "Copying...",
+            "done": "Copied to clipboard"
+          },
+          "copy-json": {
+            "failed_to_copy": "Failed to copy",
+            "click_to_copy": "Copy source as JSON",
+            "copying": "Copying...",
+            "done": "Copied to clipboard"
+          }
+        },
+        "name": {
+          "label": "Name",
+          "placeholder": "Required",
+          "helper_text": "Name of this attribute. It does not have to be unique.",
+          "v8n_required": "Please name this attribute.",
+          "v8n_too_long": "Please choose a name that is 500 characters long or less."
+        },
+        "value": {
+          "label": "Value",
+          "placeholder": "Required",
+          "helper_text": "Value of this attribute. Attribute values are automatically HTML-escaped.",
+          "v8n_required": "Please provide a value for this attribute.",
+          "v8n_too_long": "Unfortunately we can't store values that are more than 1000 characters long."
+        },
+        "visibility": {
+          "label": "Visibility",
+          "option_public": "Everyone",
+          "option_restricted": "Store admins",
+          "option_private": "Only me",
+          "helper_text": "Controls who can see this attribute. Public attributes can be shown to anyone, including customers. Private attributes are more suitable for configuration or technical details which are irrelevant to the public. Restricted attributes can only be viewed with the OAuth client that created them."
+        },
+        "timestamps": {
+          "date": "{{value, date}}",
+          "date_created": "Created on",
+          "date_modified": "Last updated on"
+        },
+        "delete": {
+          "delete": "Delete",
+          "cancel": "Cancel",
+          "delete_prompt": "Are you sure you'd like to remove this attribute? You won't be able to bring it back."
+        },
+        "undo": {
+          "caption": "Undo"
+        },
+        "submit": {
+          "caption": "Save changes"
+        },
+        "create": {
+          "caption": "Create"
+        },
+        "spinner": {
+          "refresh": "Refresh",
+          "loading_busy": "Loading",
+          "loading_error": "Unknown error"
+        }
+      }
     }
   },
   "timestamps": {
diff --git a/src/static/translations/client-form/en.json b/src/static/translations/client-form/en.json
index 6adfc5f2b..c65d46848 100644
--- a/src/static/translations/client-form/en.json
+++ b/src/static/translations/client-form/en.json
@@ -3,6 +3,7 @@
     "title_existing": "Client #{{ id }}",
     "title_new": "New client",
     "subtitle": "",
+    "subtitle_with_domain": "{{ domain }}",
     "copy-id": {
       "failed_to_copy": "Failed to copy",
       "click_to_copy": "Copy ID",
diff --git a/src/static/translations/customer-portal/de.json b/src/static/translations/customer-portal/de.json
index 46a07563b..119dd6fea 100644
--- a/src/static/translations/customer-portal/de.json
+++ b/src/static/translations/customer-portal/de.json
@@ -825,82 +825,7 @@
           "error": {
             "cc_token_invalid": "Leider konnten wir Ihre Kartendaten nicht speichern. "
           },
-          "template-set": {
-            "label": "Vorlagensatz",
-            "dialog": {
-              "cancel": "Abbrechen",
-              "close": "Schließen",
-              "header": "Wählen Sie einen Vorlagensatz",
-              "selection": {
-                "label": "",
-                "helper_text": "",
-                "search": "Suchen",
-                "clear": "Klar",
-                "pagination": {
-                  "search_button_text": "Suchen",
-                  "first": "Erste",
-                  "last": "Zuletzt",
-                  "next": "Nächste",
-                  "pagination": "{{from}}-{{to}} aus {{total}}",
-                  "previous": "Vorherige",
-                  "card": {
-                    "spinner": {
-                      "loading_busy": "Wird geladen",
-                      "loading_empty": "Keine Vorlagensätze gefunden",
-                      "loading_error": "Wurde nicht geladen"
-                    }
-                  }
-                },
-                "query-builder": {
-                  "filters": {},
-                  "add_or_clause": "OR-Klausel hinzufügen",
-                  "add_value": "Mehrwert",
-                  "code": "Code",
-                  "date": "{{value, date}}",
-                  "date_created": "Erstellt am",
-                  "date_modified": "Zuletzt aktualisiert am",
-                  "delete": "Löschen",
-                  "field": "Feld",
-                  "hidden": "Versteckt",
-                  "is_defined_false": "Nicht definiert",
-                  "is_defined_true": "Definiert",
-                  "name": "Name",
-                  "operator_equal": "Gleich",
-                  "operator_greaterthan": "Größer als",
-                  "operator_greaterthanorequal": "Größer als oder gleich",
-                  "operator_in": "Einer von",
-                  "operator_isdefined": "Ist definiert",
-                  "operator_lessthan": "Weniger als",
-                  "operator_lessthanorequal": "Weniger als oder gleich",
-                  "operator_not": "Nicht gleich",
-                  "or": "Oder",
-                  "query_builder_group": "Gruppe von Filtern",
-                  "query_builder_rule": "Filter",
-                  "range_from": "Aus",
-                  "range_to": "Zu",
-                  "type": "Typ",
-                  "type_any": "Feld unbekannten Typs",
-                  "type_attribute": "Schlüsselwertressource",
-                  "type_date": "Datumsfeld",
-                  "type_here": "Geben Sie hier ein...",
-                  "type_number": "Numerisches Feld",
-                  "type_string": "Textfeld",
-                  "used_codes": "Verwendete Codes",
-                  "value": "Wert"
-                }
-              }
-            },
-            "card": {
-              "spinner": {
-                "loading_busy": "Wird geladen",
-                "loading_empty": "Klicke um auszuwählen",
-                "loading_error": "Wurde nicht geladen"
-              }
-            },
-            "helper_text": "Der Vorlagensatz bestimmt, welches Zahlungsgateway und welcher Tokenisierungsdienst zum Erfassen von Kartendetails verwendet werden."
-          },
           "cc-token": {
-            "clear": "Klar",
             "tokenize": "Karte speichern",
             "payment-card-embed": {
               "stripe": {
@@ -958,6 +883,11 @@
             "loading_empty": "Dieses Formular funktioniert nur mit bestehenden Zahlungsmethoden"
           }
         }
+      },
+      "spinner": {
+        "loading_busy": "Wird geladen",
+        "loading_empty": "Keine Zahlungsmethode",
+        "loading_error": "Unbekannter Fehler"
       }
     },
     "spinner": {
diff --git a/src/static/translations/customer-portal/en.json b/src/static/translations/customer-portal/en.json
index b9f81f65b..f4404b161 100644
--- a/src/static/translations/customer-portal/en.json
+++ b/src/static/translations/customer-portal/en.json
@@ -825,82 +825,7 @@
           "error": {
             "cc_token_invalid": "Unfortunately, we couldn't save your card details. Please try again later or use a different card."
           },
-          "template-set": {
-            "label": "Template set",
-            "dialog": {
-              "cancel": "Cancel",
-              "close": "Close",
-              "header": "Choose a template set",
-              "selection": {
-                "label": "",
-                "helper_text": "",
-                "search": "Search",
-                "clear": "Clear",
-                "pagination": {
-                  "search_button_text": "Search",
-                  "first": "First",
-                  "last": "Last",
-                  "next": "Next",
-                  "pagination": "{{from}}-{{to}} out of {{total}}",
-                  "previous": "Previous",
-                  "card": {
-                    "spinner": {
-                      "loading_busy": "Loading",
-                      "loading_empty": "No template sets found",
-                      "loading_error": "Unknown error"
-                    }
-                  }
-                },
-                "query-builder": {
-                  "filters": {},
-                  "add_or_clause": "Add OR clause",
-                  "add_value": "Add value",
-                  "code": "Code",
-                  "date": "{{value, date}}",
-                  "date_created": "Created on",
-                  "date_modified": "Last updated on",
-                  "delete": "Delete",
-                  "field": "Field",
-                  "hidden": "Hidden",
-                  "is_defined_false": "Not defined",
-                  "is_defined_true": "Defined",
-                  "name": "Name",
-                  "operator_equal": "Equal",
-                  "operator_greaterthan": "Greater than",
-                  "operator_greaterthanorequal": "Greater than or equal",
-                  "operator_in": "One of",
-                  "operator_isdefined": "Is defined",
-                  "operator_lessthan": "Less than",
-                  "operator_lessthanorequal": "Less than or equal",
-                  "operator_not": "Not equal",
-                  "or": "Or",
-                  "query_builder_group": "Group of filters",
-                  "query_builder_rule": "Filter",
-                  "range_from": "From",
-                  "range_to": "To",
-                  "type": "Type",
-                  "type_any": "Field of unknown type",
-                  "type_attribute": "Key-value resource",
-                  "type_date": "Date field",
-                  "type_here": "Type here...",
-                  "type_number": "Numeric field",
-                  "type_string": "Text field",
-                  "used_codes": "Codes used",
-                  "value": "Value"
-                }
-              }
-            },
-            "card": {
-              "spinner": {
-                "loading_busy": "Loading",
-                "loading_empty": "Click to select",
-                "loading_error": "Unknown error"
-              }
-            },
-            "helper_text": "Template set determines which payment gateway and tokenization service will be used to capture card details."
-          },
           "cc-token": {
-            "clear": "Clear",
             "tokenize": "Save card",
             "payment-card-embed": {
               "stripe": {
@@ -909,7 +834,7 @@
                   "idle": "Your card details are securely processed by Stripe. Visit https://stripe.com to learn more.",
                   "busy": "Encrypting your card details...",
                   "fail": "This service is currently unavailable. Please try again later.",
-                  "unsupported": "We don't support this card type. Please try another card."
+                  "unsupported": "We don't support this card type. Please try a different card."
                 }
               },
               "square": {
@@ -918,7 +843,7 @@
                   "idle": "Your card details are securely processed by Square. Visit https://squareup.com to learn more.",
                   "busy": "Encrypting your card details...",
                   "fail": "This service is currently unavailable. Please try again later.",
-                  "unsupported": "We don't support this card type. Please try another card."
+                  "unsupported": "We don't support this card type. Please try a different card."
                 }
               },
               "default": {
@@ -958,6 +883,11 @@
             "loading_empty": "This form works only with existing payment methods"
           }
         }
+      },
+      "spinner": {
+        "loading_busy": "Loading",
+        "loading_empty": "No payment method",
+        "loading_error": "Unknown error"
       }
     },
     "spinner": {
diff --git a/src/static/translations/customer-portal/es.json b/src/static/translations/customer-portal/es.json
index f8561e251..e5ecdd32e 100644
--- a/src/static/translations/customer-portal/es.json
+++ b/src/static/translations/customer-portal/es.json
@@ -825,80 +825,6 @@
           "error": {
             "cc_token_invalid": "Lamentablemente, no pudimos guardar los datos de su tarjeta. "
           },
-          "template-set": {
-            "label": "Conjunto de plantillas",
-            "dialog": {
-              "cancel": "Cancelar",
-              "close": "Cerca",
-              "header": "Elija un conjunto de plantillas",
-              "selection": {
-                "label": "",
-                "helper_text": "",
-                "search": "Buscar",
-                "clear": "Borrar",
-                "pagination": {
-                  "search_button_text": "Buscar",
-                  "first": "Primero",
-                  "last": "Último",
-                  "next": "Próximo",
-                  "pagination": "{{from}}-{{to}} fuera de {{total}}",
-                  "previous": "Anterior",
-                  "card": {
-                    "spinner": {
-                      "loading_busy": "Cargando",
-                      "loading_empty": "No se encontraron conjuntos de plantillas",
-                      "loading_error": "Error desconocido"
-                    }
-                  }
-                },
-                "query-builder": {
-                  "filters": {},
-                  "add_or_clause": "Agregar cláusula O",
-                  "add_value": "Añadir valor",
-                  "code": "Código",
-                  "date": "{{value, date}}",
-                  "date_created": "Creado en",
-                  "date_modified": "Ultima actualización en",
-                  "delete": "Borrar",
-                  "field": "Campo",
-                  "hidden": "Oculto",
-                  "is_defined_false": "No definida",
-                  "is_defined_true": "Definido",
-                  "name": "Nombre",
-                  "operator_equal": "Igual",
-                  "operator_greaterthan": "Mas grande que",
-                  "operator_greaterthanorequal": "Mayor que o igual",
-                  "operator_in": "Uno de",
-                  "operator_isdefined": "Se define",
-                  "operator_lessthan": "Menos que",
-                  "operator_lessthanorequal": "Menor o igual",
-                  "operator_not": "No es igual",
-                  "or": "O",
-                  "query_builder_group": "grupo de filtros",
-                  "query_builder_rule": "Filtrar",
-                  "range_from": "De",
-                  "range_to": "A",
-                  "type": "Tipo",
-                  "type_any": "Campo de tipo desconocido",
-                  "type_attribute": "Recurso de valor clave",
-                  "type_date": "Campo de fecha",
-                  "type_here": "Escriba aquí...",
-                  "type_number": "Campo numérico",
-                  "type_string": "Campo de texto",
-                  "used_codes": "Códigos utilizados",
-                  "value": "Valor"
-                }
-              }
-            },
-            "card": {
-              "spinner": {
-                "loading_busy": "Cargando",
-                "loading_empty": "Clic para seleccionar",
-                "loading_error": "Error desconocido"
-              }
-            },
-            "helper_text": "El conjunto de plantillas determina qué pasarela de pago y servicio de tokenización se utilizarán para capturar los detalles de la tarjeta."
-          },
           "cc-token": {
             "tokenize": "Guardar tarjeta",
             "payment-card-embed": {
@@ -957,6 +883,11 @@
             "loading_empty": "Este formulario solo funciona con métodos de pago existentes."
           }
         }
+      },
+      "spinner": {
+        "loading_busy": "Cargando",
+        "loading_empty": "Sin método de pago",
+        "loading_error": "Error desconocido"
       }
     },
     "spinner": {
diff --git a/src/static/translations/customer-portal/fr.json b/src/static/translations/customer-portal/fr.json
index 7dd21ea27..7a7b035d9 100644
--- a/src/static/translations/customer-portal/fr.json
+++ b/src/static/translations/customer-portal/fr.json
@@ -825,82 +825,7 @@
           "error": {
             "cc_token_invalid": "Malheureusement, nous n'avons pas pu enregistrer les détails de votre carte. "
           },
-          "template-set": {
-            "label": "Ensemble de modèles",
-            "dialog": {
-              "cancel": "Annuler",
-              "close": "Fermer",
-              "header": "Choisissez un ensemble de modèles",
-              "selection": {
-                "label": "",
-                "helper_text": "",
-                "search": "Recherche",
-                "clear": "Clair",
-                "pagination": {
-                  "search_button_text": "Recherche",
-                  "first": "D'abord",
-                  "last": "Dernier",
-                  "next": "Suivant",
-                  "pagination": "{{from}}-{{to}} hors de {{total}}",
-                  "previous": "Précédent",
-                  "card": {
-                    "spinner": {
-                      "loading_busy": "Chargement",
-                      "loading_empty": "Aucun ensemble de modèles trouvé",
-                      "loading_error": "Erreur inconnue"
-                    }
-                  }
-                },
-                "query-builder": {
-                  "filters": {},
-                  "add_or_clause": "Ajouter une clause OU",
-                  "add_value": "Ajouter de la valeur",
-                  "code": "Code",
-                  "date": "{{value, date}}",
-                  "date_created": "Créé sur",
-                  "date_modified": "Dernière mise à jour le",
-                  "delete": "Supprimer",
-                  "field": "Champ",
-                  "hidden": "Caché",
-                  "is_defined_false": "Non défini",
-                  "is_defined_true": "Défini",
-                  "name": "Nom",
-                  "operator_equal": "Égal",
-                  "operator_greaterthan": "Plus grand que",
-                  "operator_greaterthanorequal": "Meilleur que ou égal",
-                  "operator_in": "Un des",
-                  "operator_isdefined": "Est défini",
-                  "operator_lessthan": "Moins que",
-                  "operator_lessthanorequal": "Inférieur ou égal",
-                  "operator_not": "Inégal",
-                  "or": "Ou",
-                  "query_builder_group": "Groupe de filtres",
-                  "query_builder_rule": "Filtre",
-                  "range_from": "Depuis",
-                  "range_to": "À",
-                  "type": "Taper",
-                  "type_any": "Champ de type inconnu",
-                  "type_attribute": "Ressource clé-valeur",
-                  "type_date": "Champ Date",
-                  "type_here": "Écrivez ici...",
-                  "type_number": "Champ numérique",
-                  "type_string": "Champ de texte",
-                  "used_codes": "Codes utilisés",
-                  "value": "Valeur"
-                }
-              }
-            },
-            "card": {
-              "spinner": {
-                "loading_busy": "Chargement",
-                "loading_empty": "Cliquez pour sélectionner",
-                "loading_error": "Erreur inconnue"
-              }
-            },
-            "helper_text": "L'ensemble de modèles détermine quelle passerelle de paiement et quel service de tokenisation seront utilisés pour capturer les détails de la carte."
-          },
           "cc-token": {
-            "clear": "Clair",
             "tokenize": "Enregistrer la carte",
             "payment-card-embed": {
               "stripe": {
@@ -958,6 +883,11 @@
             "loading_empty": "Ce formulaire fonctionne uniquement avec les modes de paiement existants"
           }
         }
+      },
+      "spinner": {
+        "loading_busy": "Chargement",
+        "loading_empty": "Aucun mode de paiement",
+        "loading_error": "Erreur inconnue"
       }
     },
     "spinner": {
diff --git a/src/static/translations/customer-portal/nl.json b/src/static/translations/customer-portal/nl.json
index 739ed0f92..7bdb427d0 100644
--- a/src/static/translations/customer-portal/nl.json
+++ b/src/static/translations/customer-portal/nl.json
@@ -825,82 +825,7 @@
           "error": {
             "cc_token_invalid": "Helaas kunnen we uw kaartgegevens niet opslaan. "
           },
-          "template-set": {
-            "label": "Sjablonenset",
-            "dialog": {
-              "cancel": "Annuleren",
-              "close": "Dichtbij",
-              "header": "Kies een sjablonenset",
-              "selection": {
-                "label": "",
-                "helper_text": "",
-                "search": "Zoekopdracht",
-                "clear": "Duidelijk",
-                "pagination": {
-                  "search_button_text": "Zoekopdracht",
-                  "first": "Eerst",
-                  "last": "Laatst",
-                  "next": "Volgende",
-                  "pagination": "{{from}}-{{to}} uit {{total}}",
-                  "previous": "Vorig",
-                  "card": {
-                    "spinner": {
-                      "loading_busy": "Bezig met laden",
-                      "loading_empty": "Geen sjablonensets gevonden",
-                      "loading_error": "Onbekende fout"
-                    }
-                  }
-                },
-                "query-builder": {
-                  "filters": {},
-                  "add_or_clause": "OR-clausule toevoegen",
-                  "add_value": "Waarde toevoegen",
-                  "code": "Code",
-                  "date": "{{value, date}}",
-                  "date_created": "Gemaakt op",
-                  "date_modified": "Laatst geupdate op",
-                  "delete": "Verwijderen",
-                  "field": "Veld",
-                  "hidden": "Verborgen",
-                  "is_defined_false": "Niet gedefinieerd",
-                  "is_defined_true": "Bepaald",
-                  "name": "Naam",
-                  "operator_equal": "Gelijkwaardig",
-                  "operator_greaterthan": "Groter dan",
-                  "operator_greaterthanorequal": "Groter dan of gelijk aan",
-                  "operator_in": "Een van de",
-                  "operator_isdefined": "Is gedefinieerd",
-                  "operator_lessthan": "Minder dan",
-                  "operator_lessthanorequal": "Minder dan of gelijk",
-                  "operator_not": "Niet gelijk",
-                  "or": "Of",
-                  "query_builder_group": "Groep filters",
-                  "query_builder_rule": "Filter",
-                  "range_from": "Van",
-                  "range_to": "Naar",
-                  "type": "Type",
-                  "type_any": "Veld van onbekend type",
-                  "type_attribute": "Sleutelwaardebron",
-                  "type_date": "Datumveld",
-                  "type_here": "Typ hier...",
-                  "type_number": "Numeriek veld",
-                  "type_string": "Tekstveld",
-                  "used_codes": "Gebruikte codes",
-                  "value": "Waarde"
-                }
-              }
-            },
-            "card": {
-              "spinner": {
-                "loading_busy": "Bezig met laden",
-                "loading_empty": "Klik om te selecteren",
-                "loading_error": "Onbekende fout"
-              }
-            },
-            "helper_text": "De sjablonenset bepaalt welke betalingsgateway en tokenisatieservice worden gebruikt om kaartgegevens vast te leggen."
-          },
           "cc-token": {
-            "clear": "Duidelijk",
             "tokenize": "Kaart opslaan",
             "payment-card-embed": {
               "stripe": {
@@ -958,6 +883,11 @@
             "loading_empty": "Dit formulier werkt alleen met bestaande betaalmethoden"
           }
         }
+      },
+      "spinner": {
+        "loading_busy": "Bezig met laden",
+        "loading_empty": "Geen betaalmethode",
+        "loading_error": "Onbekende fout"
       }
     },
     "spinner": {
diff --git a/src/static/translations/customer-portal/pl.json b/src/static/translations/customer-portal/pl.json
index 9bfe19678..625c0a865 100644
--- a/src/static/translations/customer-portal/pl.json
+++ b/src/static/translations/customer-portal/pl.json
@@ -825,82 +825,7 @@
           "error": {
             "cc_token_invalid": "Niestety nie mogliśmy zapisać danych Twojej karty. "
           },
-          "template-set": {
-            "label": "Zestaw szablonów",
-            "dialog": {
-              "cancel": "Anulować",
-              "close": "Zamknąć",
-              "header": "Wybierz zestaw szablonów",
-              "selection": {
-                "label": "",
-                "helper_text": "",
-                "search": "Szukaj",
-                "clear": "Jasne",
-                "pagination": {
-                  "search_button_text": "Szukaj",
-                  "first": "Pierwszy",
-                  "last": "Ostatni",
-                  "next": "Następny",
-                  "pagination": "{{from}}-{{to}} poza {{total}}",
-                  "previous": "Poprzedni",
-                  "card": {
-                    "spinner": {
-                      "loading_busy": "Ładowanie",
-                      "loading_empty": "Nie znaleziono zestawów szablonów",
-                      "loading_error": "Nieznany błąd"
-                    }
-                  }
-                },
-                "query-builder": {
-                  "filters": {},
-                  "add_or_clause": "Dodaj klauzulę OR",
-                  "add_value": "Dodać wartość",
-                  "code": "Kod",
-                  "date": "{{value, date}}",
-                  "date_created": "Utworzono dnia",
-                  "date_modified": "Ostatnia aktualizacja:",
-                  "delete": "Usuwać",
-                  "field": "Pole",
-                  "hidden": "Ukryty",
-                  "is_defined_false": "Nie określono",
-                  "is_defined_true": "Zdefiniowane",
-                  "name": "Nazwa",
-                  "operator_equal": "Równy",
-                  "operator_greaterthan": "Lepszy niż",
-                  "operator_greaterthanorequal": "Większe lub równe",
-                  "operator_in": "Jeden z",
-                  "operator_isdefined": "Definiuje",
-                  "operator_lessthan": "Mniej niż",
-                  "operator_lessthanorequal": "Mniej niż lub równo",
-                  "operator_not": "Nie równe",
-                  "or": "Lub",
-                  "query_builder_group": "Grupa filtrów",
-                  "query_builder_rule": "Filtr",
-                  "range_from": "Z",
-                  "range_to": "Do",
-                  "type": "Typ",
-                  "type_any": "Pole nieznanego typu",
-                  "type_attribute": "Zasób klucz-wartość",
-                  "type_date": "Pole daty",
-                  "type_here": "Pisz tutaj...",
-                  "type_number": "Pole numeryczne",
-                  "type_string": "Pole tekstowe",
-                  "used_codes": "Wykorzystane kody",
-                  "value": "Wartość"
-                }
-              }
-            },
-            "card": {
-              "spinner": {
-                "loading_busy": "Ładowanie",
-                "loading_empty": "Kliknij aby wybrać",
-                "loading_error": "Nieznany błąd"
-              }
-            },
-            "helper_text": "Zestaw szablonów określa, która bramka płatnicza i usługa tokenizacji zostaną wykorzystane do przechwycenia danych karty."
-          },
           "cc-token": {
-            "clear": "Jasne",
             "tokenize": "Zapisz kartę",
             "payment-card-embed": {
               "stripe": {
@@ -958,6 +883,11 @@
             "loading_empty": "Ten formularz działa tylko z istniejącymi metodami płatności"
           }
         }
+      },
+      "spinner": {
+        "loading_busy": "Ładowanie",
+        "loading_empty": "Brak metody płatności",
+        "loading_error": "Nieznany błąd"
       }
     },
     "spinner": {
diff --git a/src/static/translations/customer-portal/sv.json b/src/static/translations/customer-portal/sv.json
index 9838c6eda..eda78c219 100644
--- a/src/static/translations/customer-portal/sv.json
+++ b/src/static/translations/customer-portal/sv.json
@@ -825,82 +825,7 @@
           "error": {
             "cc_token_invalid": "Tyvärr kunde vi inte spara dina kortuppgifter. "
           },
-          "template-set": {
-            "label": "Malluppsättning",
-            "dialog": {
-              "cancel": "Annullera",
-              "close": "Stänga",
-              "header": "Välj en malluppsättning",
-              "selection": {
-                "label": "",
-                "helper_text": "",
-                "search": "Sök",
-                "clear": "Klar",
-                "pagination": {
-                  "search_button_text": "Sök",
-                  "first": "Först",
-                  "last": "Sista",
-                  "next": "Nästa",
-                  "pagination": "{{from}}-{{to}} ut ur {{total}}",
-                  "previous": "Tidigare",
-                  "card": {
-                    "spinner": {
-                      "loading_busy": "Läser in",
-                      "loading_empty": "Inga malluppsättningar hittades",
-                      "loading_error": "Okänt fel"
-                    }
-                  }
-                },
-                "query-builder": {
-                  "filters": {},
-                  "add_or_clause": "Lägg till OR-sats",
-                  "add_value": "Lägg till värde",
-                  "code": "Koda",
-                  "date": "{{value, date}}",
-                  "date_created": "Skapad på",
-                  "date_modified": "Senast uppdaterad den",
-                  "delete": "Radera",
-                  "field": "Fält",
-                  "hidden": "Dold",
-                  "is_defined_false": "Inte definierad",
-                  "is_defined_true": "Definierad",
-                  "name": "namn",
-                  "operator_equal": "Likvärdig",
-                  "operator_greaterthan": "Större än",
-                  "operator_greaterthanorequal": "Större än eller lika med",
-                  "operator_in": "En av",
-                  "operator_isdefined": "Är definierad",
-                  "operator_lessthan": "Mindre än",
-                  "operator_lessthanorequal": "Mindre än eller lika",
-                  "operator_not": "Inte jämnlikt",
-                  "or": "Eller",
-                  "query_builder_group": "Grupp av filter",
-                  "query_builder_rule": "Filtrera",
-                  "range_from": "Från",
-                  "range_to": "Till",
-                  "type": "Typ",
-                  "type_any": "Fält av okänd typ",
-                  "type_attribute": "Nyckel-värde resurs",
-                  "type_date": "Datumfält",
-                  "type_here": "Skriv här...",
-                  "type_number": "Numeriskt fält",
-                  "type_string": "Textfält",
-                  "used_codes": "Koder som används",
-                  "value": "Värde"
-                }
-              }
-            },
-            "card": {
-              "spinner": {
-                "loading_busy": "Läser in",
-                "loading_empty": "Klicka för att välja",
-                "loading_error": "Okänt fel"
-              }
-            },
-            "helper_text": "Malluppsättningen avgör vilken betalningsgateway och tokeniseringstjänst som kommer att användas för att fånga kortdetaljer."
-          },
           "cc-token": {
-            "clear": "Klar",
             "tokenize": "Spara kort",
             "payment-card-embed": {
               "stripe": {
@@ -958,6 +883,11 @@
             "loading_empty": "Detta formulär fungerar endast med befintliga betalningsmetoder"
           }
         }
+      },
+      "spinner": {
+        "loading_busy": "Laddar",
+        "loading_empty": "Ingen betalningsmetod",
+        "loading_error": "Okänt fel"
       }
     },
     "spinner": {
diff --git a/src/static/translations/customer-portal/zh-hk.json b/src/static/translations/customer-portal/zh-hk.json
index 105bef025..9f864e5f3 100644
--- a/src/static/translations/customer-portal/zh-hk.json
+++ b/src/static/translations/customer-portal/zh-hk.json
@@ -825,82 +825,7 @@
           "error": {
             "cc_token_invalid": "不幸的是，我们无法保存您的银行卡详细信息。"
           },
-          "template-set": {
-            "label": "模板集",
-            "dialog": {
-              "cancel": "取消",
-              "close": "关闭",
-              "header": "选择模板集",
-              "selection": {
-                "label": "",
-                "helper_text": "",
-                "search": "搜索",
-                "clear": "清除",
-                "pagination": {
-                  "search_button_text": "搜索",
-                  "first": "第一的",
-                  "last": "最后的",
-                  "next": "下一个",
-                  "pagination": "{{from}}-{{to}} 在......之外 {{total}}",
-                  "previous": "以前的",
-                  "card": {
-                    "spinner": {
-                      "loading_busy": "加载中",
-                      "loading_empty": "未找到模板集",
-                      "loading_error": "未知错误"
-                    }
-                  }
-                },
-                "query-builder": {
-                  "filters": {},
-                  "add_or_clause": "添加 OR 子句",
-                  "add_value": "增值",
-                  "code": "代码",
-                  "date": "{{value, date}}",
-                  "date_created": "创建于",
-                  "date_modified": "最后更新于",
-                  "delete": "删除",
-                  "field": "场地",
-                  "hidden": "隐",
-                  "is_defined_false": "没有定义的",
-                  "is_defined_true": "定义",
-                  "name": "姓名",
-                  "operator_equal": "平等的",
-                  "operator_greaterthan": "比...更棒",
-                  "operator_greaterthanorequal": "大于或等于",
-                  "operator_in": "之一",
-                  "operator_isdefined": "被定义为",
-                  "operator_lessthan": "少于",
-                  "operator_lessthanorequal": "小于或等于",
-                  "operator_not": "不等于",
-                  "or": "或者",
-                  "query_builder_group": "过滤器组",
-                  "query_builder_rule": "筛选",
-                  "range_from": "从",
-                  "range_to": "到",
-                  "type": "类型",
-                  "type_any": "未知类型的字段",
-                  "type_attribute": "键值资源",
-                  "type_date": "日期字段",
-                  "type_here": "在此输入...",
-                  "type_number": "数字字段",
-                  "type_string": "文本域",
-                  "used_codes": "使用的代码",
-                  "value": "价值"
-                }
-              }
-            },
-            "card": {
-              "spinner": {
-                "loading_busy": "加载中",
-                "loading_empty": "单击选择",
-                "loading_error": "未知错误"
-              }
-            },
-            "helper_text": "模板集确定将使用哪个支付网关和标记化服务来捕获卡详细信息。"
-          },
           "cc-token": {
-            "clear": "清除",
             "tokenize": "保存卡",
             "payment-card-embed": {
               "stripe": {
@@ -958,6 +883,11 @@
             "loading_empty": "此表格仅适用于现有付款方式"
           }
         }
+      },
+      "spinner": {
+        "loading_busy": "載入中",
+        "loading_empty": "沒有付款方式",
+        "loading_error": "未知錯誤"
       }
     },
     "spinner": {
diff --git a/src/static/translations/customer/en.json b/src/static/translations/customer/en.json
index f2476ead7..ed966655b 100644
--- a/src/static/translations/customer/en.json
+++ b/src/static/translations/customer/en.json
@@ -28,11 +28,11 @@
   },
   "address-form": {
     "header": {
+      "title_default_shipping": "Default shipping address",
+      "title_default_billing": "Default billing address",
       "title_existing": "Customer address #{{ id }}",
       "title_new": "New customer address",
-      "subtitle_default_shipping": "Default shipping address",
-      "subtitle_default_billing": "Default billing address",
-      "subtitle_custom": "Custom address",
+      "subtitle": "",
       "copy-id": {
         "failed_to_copy": "Failed to copy",
         "click_to_copy": "Copy ID",
diff --git a/src/static/translations/item-category-form/en.json b/src/static/translations/item-category-form/en.json
index 813f1ae74..0faefc96b 100644
--- a/src/static/translations/item-category-form/en.json
+++ b/src/static/translations/item-category-form/en.json
@@ -16,19 +16,23 @@
       "done": "Copied to clipboard"
     }
   },
-  "name": {
-    "label": "Name",
-    "placeholder": "Books",
-    "helper_text": "Category description for admins.",
-    "v8n_required": "Item category name is required",
-    "v8n_too_long": "Item category name can't exceed 50 characters"
-  },
-  "code": {
-    "label": "Code",
-    "placeholder": "MY_BOOKS_CATEGORY",
-    "helper_text": "Unique identifier for the cart.",
-    "v8n_required": "Item category code is required",
-    "v8n_too_long": "Item categoty code can't exceed 50 characters"
+  "general": {
+    "label": "",
+    "helper_text": "",
+    "name": {
+      "label": "Name",
+      "placeholder": "Books",
+      "helper_text": "",
+      "v8n_required": "Item category name is required",
+      "v8n_too_long": "Item category name can't exceed 50 characters"
+    },
+    "code": {
+      "label": "Code",
+      "placeholder": "MY_BOOKS_CATEGORY",
+      "helper_text": "",
+      "v8n_required": "Item category code is required",
+      "v8n_too_long": "Item categoty code can't exceed 50 characters"
+    }
   },
   "taxes": {
     "label": "Taxes",
@@ -54,146 +58,175 @@
     },
     "helper_text": "Select taxes that will apply to the products in this category. Changes here are saved immediately."
   },
-  "item-delivery-type": {
-    "label": "Delivery",
-    "option_shipped": "Shipped using live rates",
-    "option_flat_rate": "Shipped using a flat rate",
-    "option_downloaded": "Downloaded by the customer",
-    "option_pickup": "Picked up by the customer",
-    "option_notshipped": "Not shipped",
-    "placeholder": "Select...",
-    "helper_text": "",
-    "v8n_required": "Please select a delivery type"
-  },
-  "default-weight": {
-    "label": "Default weight",
-    "placeholder": "1",
-    "helper_text": "",
-    "v8n_required": "This field is required",
-    "v8n_negative": "Please enter a positive number"
-  },
-  "default-weight-unit": {
-    "label": "Default weight unit",
-    "placeholder": "Select...",
-    "option_kgs": "KG",
-    "option_lbs": "LG",
-    "helper_text": "",
-    "v8n_required": "Please select a unit"
-  },
-  "default-length-unit": {
-    "label": "Default length unit",
-    "placeholder": "Select...",
-    "option_cm": "CM",
-    "option_in": "IN",
-    "helper_text": "",
-    "v8n_required": "Please select a unit"
-  },
-  "max-downloads-per-customer": {
-    "label": "Max downloads",
-    "placeholder": "3",
-    "helper_text": "",
-    "v8n_required": "This field is required",
-    "v8n_negative": "Please enter a positive number"
-  },
-  "max-downloads-time-period": {
-    "label": "Access duration (hrs)",
-    "placeholder": "24",
-    "helper_text": "",
-    "v8n_required": "This field is required",
-    "v8n_negative": "Please enter a positive number"
-  },
-  "shipping-flat-rate": {
-    "label": "Rate",
-    "placeholder": "0",
-    "helper_text": "",
-    "v8n_required": "This field is required",
-    "v8n_negative": "Please enter a positive number"
-  },
-  "shipping-flat-rate-type": {
-    "label": "Applies",
-    "placeholder": "Select...",
-    "option_per_order": "Per order",
-    "option_per_shipment": "Per shipment",
-    "helper_text": "",
-    "v8n_required": "Please select a value"
-  },
-  "customs-value": {
-    "label": "Customs value",
-    "placeholder": "0",
-    "helper_text": "Enter a dollar amount here for the declared customs value for international shipments. If you leave this blank, the sale price of the item will be used.",
-    "v8n_negative": "Please enter a positive number"
-  },
-  "handling-fee-type": {
-    "label": "Handling fee",
-    "option_none": "No handling fee",
-    "option_flat_per_order": "Flat fee per shipment",
-    "option_flat_per_item": "Flat fee per product",
-    "option_flat_percent": "Flat fee per shipment + % of price",
-    "option_flat_percent_with_minimum": "Flat fee per shipment or % of price, whichever is greater",
-    "placeholder": "Select...",
-    "helper_text": "",
-    "v8n_required": "Please select a value"
-  },
-  "handling-fee": {
-    "label": "Amount",
-    "placeholder": "0",
-    "helper_text": "",
-    "v8n_required": "This field is required",
-    "v8n_negative": "Please enter a positive number"
-  },
-  "handling-fee-minimum": {
-    "label": "Minimum fee",
-    "placeholder": "0",
+  "delivery": {
+    "label": "Delivery Options",
     "helper_text": "",
-    "v8n_required": "This field is required",
-    "v8n_negative": "Please enter a positive number"
+    "item-delivery-type": {
+      "label": "Delivery type",
+      "option_shipped": "Shipped using live rates",
+      "option_flat_rate": "Shipped using a flat rate",
+      "option_downloaded": "Downloaded by the customer",
+      "option_pickup": "Picked up by the customer",
+      "option_notshipped": "Not shipped",
+      "placeholder": "Select...",
+      "helper_text": "",
+      "v8n_required": "Please select a delivery type"
+    },
+    "max-downloads-per-customer": {
+      "label": "Max downloads",
+      "placeholder": "3",
+      "helper_text": "",
+      "v8n_required": "This field is required",
+      "v8n_negative": "Please enter a positive number"
+    },
+    "max-downloads-time-period": {
+      "label": "Access duration (hrs)",
+      "placeholder": "24",
+      "helper_text": "",
+      "v8n_required": "This field is required",
+      "v8n_negative": "Please enter a positive number"
+    },
+    "shipping-flat-rate": {
+      "label": "Shipping rate",
+      "placeholder": "0",
+      "helper_text": "",
+      "v8n_required": "This field is required",
+      "v8n_negative": "Please enter a positive number"
+    },
+    "shipping-flat-rate-type": {
+      "label": "Flat rate applies",
+      "placeholder": "Select...",
+      "option_per_order": "Per order",
+      "option_per_shipment": "Per shipment",
+      "helper_text": "",
+      "v8n_required": "Please select a value"
+    },
+    "customs-value": {
+      "label": "Customs value",
+      "placeholder": "0",
+      "helper_text": "Enter a dollar amount here for the declared customs value for international shipments. If you leave this blank, the sale price of the item will be used.",
+      "v8n_negative": "Please enter a positive number"
+    },
+    "default-weight": {
+      "label": "Default weight",
+      "placeholder": "1",
+      "helper_text": "",
+      "v8n_required": "This field is required",
+      "v8n_negative": "Please enter a positive number"
+    },
+    "default-weight-unit": {
+      "label": "Default weight unit",
+      "placeholder": "Select...",
+      "option_kgs": "KG",
+      "option_lbs": "LG",
+      "helper_text": "",
+      "v8n_required": "Please select a unit"
+    },
+    "default-length-unit": {
+      "label": "Default length unit",
+      "placeholder": "Select...",
+      "option_cm": "CM",
+      "option_in": "IN",
+      "helper_text": "",
+      "v8n_required": "Please select a unit"
+    }
   },
-  "handling-fee-percentage": {
-    "label": "Percentage of price",
-    "placeholder": "0",
+  "handling-and-discount": {
+    "label": "Handling Fees and Discounts",
     "helper_text": "",
-    "v8n_required": "This field is required",
-    "v8n_negative": "Please enter a positive number"
-  },
-  "discount-name": {
-    "label": "Discount",
-    "placeholder": "Name your discount to open the builder",
-    "helper_text": ""
-  },
-  "discount-builder": {
-    "tier": "Tier",
-    "tier_by": "by",
-    "tier_if": "if",
-    "tier_allunits": "price of each item",
-    "tier_incremental": "price of additional items",
-    "tier_repeat": "price of next item",
-    "tier_single": "order total",
-    "tier_then": "then",
-    "quantity": "quantity",
-    "total": "total",
-    "reduce": "reduce",
-    "increase": "increase"
-  },
-  "admin-email-template-uri": {
-    "label": "Message to admin",
-    "placeholder": "None (don't send)",
-    "helper_text": ""
+    "handling-fee-type": {
+      "label": "Handling fee type",
+      "option_none": "No handling fee",
+      "option_flat_per_order": "Flat fee per shipment",
+      "option_flat_per_item": "Flat fee per product",
+      "option_flat_percent": "Flat fee per shipment + % of price",
+      "option_flat_percent_with_minimum": "Flat fee per shipment or % of price, whichever is greater",
+      "placeholder": "Select...",
+      "helper_text": "",
+      "v8n_required": "Please select a value"
+    },
+    "handling-fee": {
+      "label": "Handling fee amount",
+      "placeholder": "0",
+      "helper_text": "",
+      "v8n_required": "This field is required",
+      "v8n_negative": "Please enter a positive number"
+    },
+    "handling-fee-minimum": {
+      "label": "Minimum fee",
+      "placeholder": "0",
+      "helper_text": "",
+      "v8n_required": "This field is required",
+      "v8n_negative": "Please enter a positive number"
+    },
+    "handling-fee-percentage": {
+      "label": "Percentage of price",
+      "placeholder": "0",
+      "helper_text": "",
+      "v8n_required": "This field is required",
+      "v8n_negative": "Please enter a positive number"
+    },
+    "discount-name": {
+      "label": "Discount",
+      "placeholder": "None",
+      "helper_text": "Enter a name for the discount to open the discount builder."
+    },
+    "discount-builder": {
+      "tier": "Tier",
+      "tier_by": "by",
+      "tier_if": "if",
+      "tier_allunits": "price of each item",
+      "tier_incremental": "price of additional items",
+      "tier_repeat": "price of next item",
+      "tier_single": "order total",
+      "tier_then": "then",
+      "quantity": "quantity",
+      "total": "total",
+      "reduce": "reduce",
+      "increase": "increase"
+    }
   },
-  "admin-email": {
-    "label": "Send to",
-    "placeholder": "admin@example.com",
+  "emails": {
+    "label": "Emails",
     "helper_text": "",
-    "v8n_required": "Please enter an email"
-  },
-  "customer-email-template-uri": {
-    "label": "Message to customer",
-    "placeholder": "None (don't send)",
-    "helper_text": ""
-  },
-  "gift-recipient-email-template-uri": {
-    "label": "Message to gift recipient",
-    "placeholder": "None (don't send)",
-    "helper_text": ""
+    "wip_message": "We are making changes to our API to support setting email messages for admin and customers from the category. For now, please use the legacy Foxy administration to make changes to category-specific emails for admins and customers.",
+    "gift-recipient-email-template-uri": {
+      "label": "Message to gift recipient",
+      "helper_text": "",
+      "value": "{{ resource.description }}",
+      "value_busy": "Loading...",
+      "value_fail": "Failed to load",
+      "placeholder": "None",
+      "dialog": {
+        "cancel": "Cancel",
+        "close": "Close",
+        "header": "Select an email template",
+        "selection": {
+          "label": "Email templates",
+          "helper_text": "",
+          "pagination": {
+            "search_button_text": "Search",
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "type_custom_url": "Custom (URL)",
+              "type_custom_text": "Custom (Text)",
+              "type_custom_html": "Custom (HTML)",
+              "type_mixed": "Mixed",
+              "type_default": "Default",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_empty": "No email templates found",
+                "loading_error": "Unknown error"
+              }
+            }
+          }
+        }
+      }
+    }
   },
   "timestamps": {
     "date_created": "Created on",
diff --git a/src/static/translations/item-form/en.json b/src/static/translations/item-form/en.json
index 1be43a783..cedbd2803 100644
--- a/src/static/translations/item-form/en.json
+++ b/src/static/translations/item-form/en.json
@@ -42,7 +42,6 @@
   },
   "subscription-frequency": {
     "label": "Subscription frequency",
-    "helper_text": "",
     "day": "Day",
     "day_plural": "Days",
     "week": "Week",
diff --git a/src/static/translations/native-integration-form/en.json b/src/static/translations/native-integration-form/en.json
index 18c11d740..f038380bb 100644
--- a/src/static/translations/native-integration-form/en.json
+++ b/src/static/translations/native-integration-form/en.json
@@ -248,12 +248,6 @@
     "helper_text": "The name of the inventory field in your products collection.",
     "v8n_required": "Please enter an inventory field name."
   },
-  "webflow-auth": {
-    "label": "Token",
-    "placeholder": "Required",
-    "helper_text": "The OAuth2 authorization token for your Webflow site.",
-    "v8n_required": "Please enter an authorization token."
-  },
   "zapier-event": {
     "label": "Event",
     "placeholder": "Defined by Zapier",
diff --git a/src/static/translations/payments-api-fraud-protection-form/en.json b/src/static/translations/payments-api-fraud-protection-form/en.json
index 9ac95f6c4..7bcf57f01 100644
--- a/src/static/translations/payments-api-fraud-protection-form/en.json
+++ b/src/static/translations/payments-api-fraud-protection-form/en.json
@@ -12,19 +12,33 @@
       "done": "Copied to clipboard"
     }
   },
+  "list-spinner": {
+    "loading_busy": "Loading fraud protections...",
+    "loading_error": "Unknown error. Failed to load fraud protections."
+  },
   "default_additional_field_placeholder": "None",
-  "select_another_button_label": "Back to fraud protections",
-  "score-threshold-reject": {
-    "label": "Rejection threshold",
-    "placeholder": "Default",
-    "helper_text": "A number between 0 and 100. 0 will disable minFraud and 100 will turn it on for logging but still allow all transactions to go through.",
-    "v8n_out_of_range": "Please enter a whole number between 0 and 100 (inclusive)."
-  },
-  "description": {
-    "label": "Description",
-    "placeholder": "None",
+  "default_additional_field_select_placeholder": "Select",
+  "select_another_button_label": "Select another",
+  "conflict_message": "You've already added this fraud protection to the payment method set.",
+  "general": {
+    "label": "",
     "helper_text": "",
-    "v8n_too_long": "Please reduce this description to a 100 characters or less"
+    "description": {
+      "label": "Description",
+      "placeholder": "None",
+      "helper_text": "",
+      "v8n_too_long": "Please reduce this description to a 100 characters or less"
+    }
+  },
+  "setup": {
+    "label": "",
+    "helper_text": "",
+    "score-threshold-reject": {
+      "label": "Rejection threshold",
+      "placeholder": "Default",
+      "helper_text": "A number between 0 and 100. 0 will disable minFraud and 100 will turn it on for logging but still allow all transactions to go through.",
+      "v8n_out_of_range": "Please enter a whole number between 0 and 100 (inclusive)."
+    }
   },
   "timestamps": {
     "date_created": "Created on",
diff --git a/src/static/translations/payments-api-payment-method-form/en.json b/src/static/translations/payments-api-payment-method-form/en.json
index 896d538af..8f321f8bd 100644
--- a/src/static/translations/payments-api-payment-method-form/en.json
+++ b/src/static/translations/payments-api-payment-method-form/en.json
@@ -18,9 +18,46 @@
   },
   "select_another_button_label": "Select another",
   "default_additional_field_placeholder": "None",
+  "default_additional_field_select_placeholder": "Select",
   "conflict_message": "Remove {{ name }} to use this method",
-  "tab_live": "Live setup",
-  "tab_test": "Test setup",
+  "no_oauth_support_message": "Adding this gateway is currently restricted from this admin. Please utilise our legacy administration to connect this gateway to your payment set.",
+  "test-group": {
+    "label": "Test setup",
+    "label_inactive": "Test setup (inactive)",
+    "helper_text": "",
+    "helper_text_inactive": "To use this setup, turn off the \"Use live credentials\" option in the payment method set."
+  },
+  "live-group": {
+    "label": "Live setup",
+    "label_inactive": "Live setup (inactive)",
+    "helper_text": "",
+    "helper_text_inactive": "To use this setup, turn on the \"Use live credentials\" option in the payment method set.",
+    "inactive_message": "Only active stores can accept real payments. To activate your store, please upgrade to a paid plan."
+  },
+  "general": {
+    "label": "",
+    "helper_text": "",
+    "three-d-secure-toggle": {
+      "label": "3D Secure",
+      "placeholder": "Select",
+      "option_off": "Off",
+      "option_all_cards": "On for all cards",
+      "option_maestro_only": "On for Maestro cards",
+      "helper_text": ""
+    },
+    "three-d-secure-response": {
+      "label": "Require valid 3D Secure response",
+      "checked": "Yes",
+      "unchecked": "No",
+      "helper_text": ""
+    },
+    "description": {
+      "label": "Description",
+      "placeholder": "Defaults to the gateway name",
+      "helper_text": "",
+      "v8n_too_long": "Please reduce this description to a 100 characters or less"
+    }
+  },
   "account-id": {
     "label": "Account ID"
   },
@@ -39,26 +76,8 @@
   "test-third-party-key": {
     "label": "3rd-party key"
   },
-  "three-d-secure-toggle": {
-    "label": "3D Secure",
-    "option_off": "Off",
-    "option_all_cards": "On for all cards",
-    "option_maestro_only": "On for Maestro cards",
-    "helper_text": ""
-  },
-  "three-d-secure-response": {
-    "label": "3D Secure Response",
-    "option_valid_only": "Require valid response",
-    "helper_text": ""
-  },
-  "description": {
-    "label": "Description",
-    "placeholder": "Defaults to the gateway name",
-    "helper_text": "",
-    "v8n_too_long": "Please reduce this description to a 100 characters or less"
-  },
   "timestamps": {
-    "date_created": "Created on",
+    "date_created": "Added on",
     "date_modified": "Last updated on",
     "date": "{{value, date}}"
   },
diff --git a/src/static/translations/payments-api-payment-preset-form/en.json b/src/static/translations/payments-api-payment-preset-form/en.json
index 2a2a0f940..675b6a77a 100644
--- a/src/static/translations/payments-api-payment-preset-form/en.json
+++ b/src/static/translations/payments-api-payment-preset-form/en.json
@@ -1,8 +1,8 @@
 {
   "header": {
-    "title_existing": "Payment method set #{{ id }}",
+    "title_existing": "{{ description }}",
     "title_new": "New payment method set",
-    "subtitle": "",
+    "subtitle": "Payment method set #{{ id }}",
     "copy-id": {
       "failed_to_copy": "Failed to copy",
       "click_to_copy": "Copy ID",
@@ -10,22 +10,30 @@
       "done": "Copied to clipboard"
     }
   },
-  "description": {
-    "label": "Description",
-    "placeholder": "E.g. EU & UK Payment Options",
-    "helper_text": "",
-    "v8n_required": "Please describe this payment method set",
-    "v8n_too_long": "Please reduce this description to a 100 characters or less"
-  },
-  "is-live": {
+  "general": {
     "label": "",
-    "option_live": "Use live credentials",
-    "helper_text": ""
-  },
-  "is-purchase-order-enabled": {
-    "label": "",
-    "option_true": "Allow purchase orders",
-    "helper_text": ""
+    "helper_text": "",
+    "description": {
+      "label": "Description",
+      "placeholder": "E.g. EU & UK Payment Options",
+      "helper_text": "",
+      "v8n_required": "Please describe this payment method set",
+      "v8n_too_long": "Please reduce this description to a 100 characters or less"
+    },
+    "is-live": {
+      "label": "Use live credentials",
+      "helper_text": "",
+      "helper_text_inactive_store": "Only active stores can use live credentials.",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "is-purchase-order-enabled": {
+      "label": "Allow purchase orders",
+      "helper_text": "",
+      "helper_text_inactive_store": "Only active stores can use Purchase Orders as payment option.",
+      "checked": "Yes",
+      "unchecked": "No"
+    }
   },
   "payment-methods": {
     "delete_header": "Remove payment method",
@@ -42,7 +50,110 @@
       "undo_header": "Unsaved changes",
       "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
       "undo_cancel": "Review",
-      "undo_confirm": "Discard"
+      "undo_confirm": "Discard",
+      "payments-api-payment-method-form": {
+        "header": {
+          "title_new": "New payment method",
+          "title_selected": "{{ name }}",
+          "subtitle_regular": "Payment gateway #{{ id }}",
+          "subtitle_hosted": "Hosted payment gateway #{{ id }}",
+          "subtitle": "",
+          "copy-id": {
+            "failed_to_copy": "Failed to copy",
+            "click_to_copy": "Copy ID",
+            "copying": "Copying...",
+            "done": "Copied to clipboard"
+          }
+        },
+        "list-spinner": {
+          "loading_busy": "Loading payment methods...",
+          "loading_error": "Unknown error. Failed to load payment methods."
+        },
+        "select_another_button_label": "Select another",
+        "default_additional_field_placeholder": "None",
+        "default_additional_field_select_placeholder": "Select",
+        "conflict_message": "Remove {{ name }} to use this method",
+        "no_oauth_support_message": "Adding this gateway is currently restricted from this admin. Please utilise our legacy administration to connect this gateway to your payment set.",
+        "test-group": {
+          "label": "Test setup",
+          "label_inactive": "Test setup (inactive)",
+          "helper_text": "",
+          "helper_text_inactive": "To use this setup, turn off the \"Use live credentials\" option in the payment method set."
+        },
+        "live-group": {
+          "label": "Live setup",
+          "label_inactive": "Live setup (inactive)",
+          "helper_text": "",
+          "helper_text_inactive": "To use this setup, turn on the \"Use live credentials\" option in the payment method set.",
+          "inactive_message": "Only active stores can accept real payments. To activate your store, please upgrade to a paid plan."
+        },
+        "general": {
+          "label": "",
+          "helper_text": "",
+          "three-d-secure-toggle": {
+            "label": "3D Secure",
+            "placeholder": "Select",
+            "option_off": "Off",
+            "option_all_cards": "On for all cards",
+            "option_maestro_only": "On for Maestro cards",
+            "helper_text": ""
+          },
+          "three-d-secure-response": {
+            "label": "Require valid 3D Secure response",
+            "checked": "Yes",
+            "unchecked": "No",
+            "helper_text": ""
+          },
+          "description": {
+            "label": "Description",
+            "placeholder": "Defaults to the gateway name",
+            "helper_text": "",
+            "v8n_too_long": "Please reduce this description to a 100 characters or less"
+          }
+        },
+        "account-id": {
+          "label": "Account ID"
+        },
+        "account-key": {
+          "label": "Account Key"
+        },
+        "third-party-key": {
+          "label": "3rd-party key"
+        },
+        "test-account-id": {
+          "label": "Account ID"
+        },
+        "test-account-key": {
+          "label": "Account Key"
+        },
+        "test-third-party-key": {
+          "label": "3rd-party key"
+        },
+        "timestamps": {
+          "date_created": "Added on",
+          "date_modified": "Last updated on",
+          "date": "{{value, date}}"
+        },
+        "spinner": {
+          "refresh": "Refresh",
+          "loading_busy": "Loading",
+          "loading_error": "Unknown error"
+        },
+        "delete": {
+          "delete": "Remove",
+          "cancel": "Cancel",
+          "delete_prompt": "Are you sure you'd like to remove this payment method? You'll need to configure it again if you decide to bring it back."
+        },
+        "undo": {
+          "caption": "Undo"
+        },
+        "submit": {
+          "caption": "Save changes"
+        },
+        "create": {
+          "caption": "Create"
+        }
+      }
     },
     "pagination": {
       "create_button_text": "Add payment method +",
@@ -79,28 +190,35 @@
             "click_to_copy": "Copy ID",
             "copying": "Copying...",
             "done": "Copied to clipboard"
-          },
-          "copy-json": {
-            "failed_to_copy": "Failed to copy",
-            "click_to_copy": "Copy source as JSON",
-            "copying": "Copying...",
-            "done": "Copied to clipboard"
           }
         },
+        "list-spinner": {
+          "loading_busy": "Loading fraud protections...",
+          "loading_error": "Unknown error. Failed to load fraud protections."
+        },
         "default_additional_field_placeholder": "None",
-        "select_protection_title": "Select a fraud protection type to get started",
-        "select_another_button_label": "Back to fraud protections",
-        "score-threshold-reject": {
-          "label": "Rejection threshold",
-          "placeholder": "Default",
-          "helper_text": "A number between 0 and 100. 0 will disable minFraud and 100 will turn it on for logging but still allow all transactions to go through.",
-          "v8n_out_of_range": "Please enter a whole number between 0 and 100 (inclusive)."
-        },
-        "description": {
-          "label": "Description",
-          "placeholder": "None",
+        "default_additional_field_select_placeholder": "Select",
+        "select_another_button_label": "Select another",
+        "conflict_message": "You've already added this fraud protection to the payment method set.",
+        "general": {
+          "label": "",
           "helper_text": "",
-          "v8n_too_long": "Please reduce this description to a 100 characters or less"
+          "description": {
+            "label": "Description",
+            "placeholder": "None",
+            "helper_text": "",
+            "v8n_too_long": "Please reduce this description to a 100 characters or less"
+          }
+        },
+        "setup": {
+          "label": "",
+          "helper_text": "",
+          "score-threshold-reject": {
+            "label": "Rejection threshold",
+            "placeholder": "Default",
+            "helper_text": "A number between 0 and 100. 0 will disable minFraud and 100 will turn it on for logging but still allow all transactions to go through.",
+            "v8n_out_of_range": "Please enter a whole number between 0 and 100 (inclusive)."
+          }
         },
         "timestamps": {
           "date_created": "Created on",
diff --git a/src/static/translations/store-form/en.json b/src/static/translations/store-form/en.json
index cbea74690..3d1aa5e0b 100644
--- a/src/static/translations/store-form/en.json
+++ b/src/static/translations/store-form/en.json
@@ -253,10 +253,9 @@
   "custom-display-id-config-transaction-journal-entries-void-example": "When voided:",
   "custom-display-id-config-transaction-journal-entries-refund-example": "When refunded:",
   "webhook-url": {
-    "label": "XML webhook endpoint",
-    "placeholder": "https://example.com/xml-webhook",
-    "helper_text": "Foxy will encrypt order info and POST it to this URL on each purchase as XML. When using this webhook, make sure to configure the encryption key for your store.",
-    "v8n_required": "Please enter the XML webhook endpoint",
+    "label": "XML Datafeed",
+    "placeholder": "https://example.com/my-xml-datafeed",
+    "helper_text": "The XML datafeed is a deprecated webhook that should only be used for third-party integrations that still require it. For any new integrations where you need to trigger a webhook for each transaction on your store, we strongly recommend using the JSON webhooks.",
     "v8n_too_long": "Please shorten this URL to 300 characters or less"
   },
   "webhook-key-cart-signing": {
diff --git a/src/static/translations/subscription-settings-form/en.json b/src/static/translations/subscription-settings-form/en.json
index 40f5bcda8..9f5d2821d 100644
--- a/src/static/translations/subscription-settings-form/en.json
+++ b/src/static/translations/subscription-settings-form/en.json
@@ -14,73 +14,97 @@
   "day_plural": "{{ count }} days",
   "day_suffix": "day",
   "day_suffix_plural": "days",
-  "modification-url": {
-    "label": "Modification URL",
-    "placeholder": "https://example.com/edit-subscription",
-    "helper_text": "Enter a full URL or a path to the page under your Store URL where customers can modify their subscription. If present, subscriptions in the Customer Portal will show an Edit link that will send subscribers to this page."
-  },
-  "past-due-amount-handling": {
-    "label": "Past due amount value",
-    "option_increment": "Contains the sum of all missed payments",
-    "option_replace": "Contains the last missed payment amount",
-    "option_ignore": "Doesn't change",
-    "helper_text": "This setting determines how you'd like to handle past due amounts when we try to process a subscription and that subscritpion fails."
-  },
-  "automatically-charge-past-due-amount": {
-    "label": "",
-    "option_checked": "Charge past due amount with subscription payment",
-    "helper_text": ""
-  },
-  "clear-past-due-amounts-on-success": {
-    "label": "",
-    "option_checked": "Clear past due amount on successful payment",
-    "helper_text": ""
-  },
-  "reset-nextdate-on-makeup-payment": {
-    "label": "",
-    "option_checked": "Reset next transaction date on make-up payment",
-    "helper_text": ""
-  },
-  "reattempt-schedule": {
-    "label": "Reattempt schedule",
-    "placeholder": "Period in days, e.g. 14",
+  "past-due-amount-group": {
+    "label": "Past due amount",
     "helper_text": "",
-    "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
-  },
-  "reminder-email-schedule": {
-    "label": "Failed subscription payment email schedule",
-    "placeholder": "Period in days, e.g. 14",
-    "helper_text": "Number of days after the initial failure that an email notification to the customer should be sent. This only happens for active subscriptions which still have a past due amount. If a reattempt is successful, no additional reminder email will be sent.",
-    "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+    "past-due-amount-handling": {
+      "label": "Past due amount handling",
+      "placeholder": "Select",
+      "option_increment": "Increment on each failure",
+      "option_replace": "Replace on each failure",
+      "helper_text": ""
+    },
+    "automatically-charge-past-due-amount": {
+      "label": "Charge with subscription payment",
+      "helper_text": "If enabled, the past due amount will be included in automatic subscription processing, and will be included in the cart if a customer attempts to update their subscription. If unchecked, any successful subscription payment (automatic or customer-initiated) will clear out the past due amount.",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "reset-nextdate-on-makeup-payment": {
+      "label": "Reset next transaction date on make-up payment",
+      "helper_text": "If enabled, and a past due amount is successfully paid, the next transaction date for the subscription will be reset to be one frequency ahead of the day that the transaction is processed.",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "prevent-customer-cancel-with-past-due": {
+      "label": "Prevent modification or cancellation if past due is present",
+      "helper_text": "If enabled, if the customer has a past due amount and wishes to cancel their subscription using a sub_token through the cart interface, they will be prevented from doing so until they first pay their past due amount.",
+      "checked": "Yes",
+      "unchecked": "No"
+    }
   },
-  "expiring-soon-payment-reminder-schedule": {
-    "label": "Payment method expiration email schedule",
-    "placeholder": "Period in days, e.g. 14",
-    "helper_text": "Number of days until the payment card expires that an email notification should be sent to the customer. This only happens for customers with active subscriptions.",
-    "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+  "reattempts-group": {
+    "label": "Reattempts",
+    "helper_text": "",
+    "reattempt-bypass-logic": {
+      "label": "Reattempt behavior",
+      "helper_text": "",
+      "placeholder": "Select",
+      "option_reattempt_if_exists": "Reattempt on certain errors",
+      "option_skip_if_exists": "Skip on certain errors",
+      "option_always_reattempt": "Always reattempt"
+    },
+    "reattempt-bypass-strings": {
+      "label": "Reattempt bypass strings",
+      "placeholder": "Add errors...",
+      "helper_text": "Text strings that should prevent or allow (based on the above setting) a rebilling attempt. For example, setting the logic to \"Skip on certain errors\" with a value for the strings field of \"Code: 8\" and \"Code: 37\" would instruct Foxy to not initiate the rebilling process if the last error contained either Code: 8 or Code: 37, but to attempt the rebilling in all other cases.",
+      "v8n_too_long": "This list is too large. Please reduce the number of entries."
+    },
+    "reattempt-schedule": {
+      "label": "Reattempt schedule",
+      "placeholder": "Add period in days, e.g. 14",
+      "helper_text": "List of numbers. Each number represents the number of days after the initial failure that a reattempt should be made. For example, a setting of 1, 3, 5, 15, 30 would direct Foxy to attempt to collect the past-due amount on the 1st, 3rd, 5th, and 15th days after the initial transaction.",
+      "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+    }
   },
-  "cancellation-schedule": {
-    "label": "Cancel failed subscriptions after",
-    "placeholder": "Don't cancel",
-    "helper_text": "A single number representing the number of days after the initial failure that a subscription should be set to cancel (assuming a successful payment hasn't been made in the meantime)."
+  "emails-group": {
+    "label": "Emails",
+    "helper_text": "",
+    "send-email-receipts-for-automated-billing": {
+      "label": "Send email receipts for automated billing",
+      "helper_text": "When subscriptions run automatically to bill your customers, turning this setting off will prevent the normal receipt emails from being sent for their automated payment.",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "reminder-email-schedule": {
+      "label": "Failed subscription payment email schedule",
+      "placeholder": "Add period in days, e.g. 14",
+      "helper_text": "Number of days after the initial failure that an email notification to the customer should be sent. This only happens for active subscriptions which still have a past due amount. If a reattempt is successful, no additional reminder email will be sent.",
+      "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+    },
+    "expiring-soon-payment-reminder-schedule": {
+      "label": "Payment method expiration email schedule",
+      "placeholder": "Add period in days, e.g. 14",
+      "helper_text": "Number of days until the payment card expires that an email notification should be sent to the customer. This only happens for customers with active subscriptions.",
+      "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+    }
   },
-  "send-email-receipts-for-automated-billing": {
-    "label": "",
-    "option_checked": "Send email receipts for automated billing",
-    "helper_text": ""
+  "cancellation-group": {
+    "label": "Cancellation",
+    "helper_text": "A single number representing the number of days after the initial failure that a subscription should be set to cancel (assuming a successful payment hasn't been made in the meantime).",
+    "cancellation-schedule": {
+      "label": "Cancel failed subscriptions after",
+      "helper_text": "",
+      "placeholder": "Don't cancel"
+    }
   },
-  "reattempt-bypass": {
-    "label": "Reattempt behavior",
-    "helper_text": "Determines whether Foxy should reattempt the subscription charge if the transaction's previous error string does or doesn't contain specific text.",
-    "option_reattempt_if_exists": "Reattempt on certain errors",
-    "option_skip_if_exists": "Skip on certain errors",
-    "option_always_reattempt": "Always reattempt",
-    "option_never_reattempt": "Never reattempt",
-    "reattempt-bypass-strings": {
-      "label": "",
-      "placeholder": "Add errors...",
+  "modification-group": {
+    "label": "Modification",
+    "helper_text": "Enter a full URL or a path to the page under your Store URL where customers can modify their subscription. If present, subscriptions in the Customer Portal will show an Edit link that will send subscribers to this page.",
+    "modification-url": {
+      "label": "Modification URL",
       "helper_text": "",
-      "v8n_too_long": "This list is too large. Please reduce the number of entries."
+      "placeholder": "https://example.com/edit-subscription"
     }
   },
   "timestamps": {
diff --git a/src/static/translations/transaction/en.json b/src/static/translations/transaction/en.json
index 58aba6639..85767d1b0 100644
--- a/src/static/translations/transaction/en.json
+++ b/src/static/translations/transaction/en.json
@@ -138,7 +138,6 @@
         },
         "subscription-frequency": {
           "label": "Subscription frequency",
-          "helper_text": "",
           "day": "Day",
           "day_plural": "Days",
           "week": "Week",
diff --git a/src/static/translations/webhook-form/en.json b/src/static/translations/webhook-form/en.json
index 0abec707a..3e390e5f2 100644
--- a/src/static/translations/webhook-form/en.json
+++ b/src/static/translations/webhook-form/en.json
@@ -3,6 +3,8 @@
     "title_new": "New webhook",
     "title_existing": "Webhook #{{ id }}",
     "subtitle": "",
+    "subtitle_webflow": "Webflow webhook",
+    "subtitle_zapier": "Zapier webhook",
     "subtitle_transaction": "Transaction webhook",
     "subtitle_subscription": "Subscription webhook",
     "subtitle_customer": "Customer webhook",
@@ -26,17 +28,6 @@
     "v8n_required": "Webhook name is required",
     "v8n_too_long": "Webhook name cannot exceed 255 characters"
   },
-  "format": {
-    "label": "Format",
-    "helper_text": "The type of this webhook.",
-    "v8n_required": "Please select a format"
-  },
-  "version": {
-    "label": "Version",
-    "placeholder": "2",
-    "helper_text": "Version of the webhook. Enter 2 for latest or use other if you have specific instructions from Foxy.",
-    "v8n_required": "Version is required"
-  },
   "url": {
     "label": "URL",
     "placeholder": "https://example.com/webhook",
@@ -53,6 +44,7 @@
     "label": "Encryption key",
     "placeholder": "HNL978XVXXCM66DM5N2T78D5MT66BC6D",
     "helper_text": "The JSON webhooks are encrypted in certain situations. This key is also used to generate a signature to verify the integrity of the payload.",
+    "v8n_required": "Encryption key is required. Use the ✨ button to generate a new key.",
     "v8n_too_long": "Encryption key cannot exceed 1000 characters"
   },
   "event-resource": {
diff --git a/web-test-runner.groups.js b/web-test-runner.groups.js
index 8d95ef535..ea0e09fb4 100644
--- a/web-test-runner.groups.js
+++ b/web-test-runner.groups.js
@@ -107,6 +107,14 @@ export const groups = [
     name: 'foxy-internal-submit-control',
     files: './src/elements/internal/InternalSubmitControl/**/*.test.ts',
   },
+  {
+    name: 'foxy-internal-summary-control',
+    files: './src/elements/internal/InternalSummaryControl/**/*.test.ts',
+  },
+  {
+    name: 'foxy-internal-switch-control',
+    files: './src/elements/internal/InternalSwitchControl/**/*.test.ts',
+  },
   {
     name: 'foxy-internal-text-area-control',
     files: './src/elements/internal/InternalTextAreaControl/**/*.test.ts',
@@ -219,6 +227,10 @@ export const groups = [
     name: 'foxy-admin-subscription-card',
     files: './src/elements/public/AdminSubscriptionCard/**/*.test.ts',
   },
+  {
+    name: 'foxy-admin-subscription-form',
+    files: './src/elements/public/AdminSubscriptionForm/**/*.test.ts',
+  },
   {
     name: 'foxy-api-browser',
     files: './src/elements/public/ApiBrowser/**/*.test.ts',