diff --git a/packages/next/src/views/Version/Default/index.css b/packages/next/src/views/Version/Default/index.css
new file mode 100644
index 00000000000..196e0f7f162
--- /dev/null
+++ b/packages/next/src/views/Version/Default/index.css
@@ -0,0 +1,227 @@
+@layer payload-default {
+  .view-version {
+    width: 100%;
+    padding-bottom: var(--spacing-view-bottom);
+  }
+
+  .view-version__toggle-locales-label {
+    color: var(--color-text-secondary);
+  }
+
+  .view-version-controls-top {
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    padding: var(--spacer-2) var(--spacer-4);
+  }
+
+  .view-version-controls-top__wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .view-version-controls-top__wrapper-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacer-4);
+  }
+
+  .view-version-controls-top h2 {
+    color: var(--color-text);
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-strong-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+    letter-spacing: var(--text-body-large-strong-letter-spacing);
+  }
+
+  .view-version-controls-bottom {
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    padding: var(--spacer-2-5) var(--spacer-4);
+    position: relative;
+
+    /* Vertical separator line */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: var(--stroke-width-small);
+      background-color: var(--color-border);
+      transform: translateX(-50%);
+    }
+  }
+
+  .view-version-controls-bottom__wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacer-4);
+  }
+
+  .view-version__time-elapsed {
+    color: var(--color-text-secondary);
+    font-weight: var(--text-body-medium-font-weight);
+  }
+
+  .view-version__version-from,
+  .view-version__version-to {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .view-version__version-from-labels,
+  .view-version__version-to-labels {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .view-version__version-to-version {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-1) var(--spacer-2);
+    gap: var(--spacer-2);
+  }
+
+  .view-version__version-to-version h2 {
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .view-version__restore div {
+    margin-block: 0;
+  }
+
+  .view-version__modifiedCheckBox {
+    margin: 0 0 0 var(--spacer-4);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .view-version__modifiedCheckBox label.field-label {
+    font-weight: var(--text-body-medium-font-weight);
+  }
+
+  .compare-version .rs__control {
+    padding: var(--spacer-2);
+  }
+
+  .view-version__diff-wrap {
+    padding: var(--spacer-3) var(--spacer-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+    position: relative;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    /* Vertical separator line */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: var(--stroke-width-small);
+      background-color: var(--color-border);
+      transform: translateX(-50%);
+      z-index: 2;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .view-version__version-to-version {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .view-version {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .view-version__version-to-version {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    /* Reorder: controls-bottom first, controls-top (checkbox) second, diff last */
+    .view-version-controls-bottom {
+      order: 1;
+      padding-inline: var(--spacer-3);
+
+      /* Hide vertical separator on mobile */
+      &::after {
+        display: none;
+      }
+    }
+
+    .view-version-controls-top {
+      order: 2;
+      padding-inline: var(--spacer-3);
+    }
+
+    .view-version__diff-wrap {
+      order: 3;
+      padding: var(--spacer-3);
+
+      /* Hide vertical separator on mobile */
+      &::after {
+        display: none;
+      }
+    }
+
+    /* Hide title on mobile */
+    .view-version-controls-top h2 {
+      display: none;
+    }
+
+    /* Checkbox: remove left margin */
+    .view-version-controls-top__wrapper .view-version__modifiedCheckBox {
+      margin-left: 0;
+    }
+
+    .view-version-controls-top__wrapper-actions {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    /* Single column for version selectors */
+    .view-version-controls-bottom__wrapper {
+      grid-template-columns: 1fr;
+      gap: var(--spacer-3);
+    }
+  }
+}
diff --git a/packages/next/src/views/Version/Default/index.scss b/packages/next/src/views/Version/Default/index.scss
deleted file mode 100644
index f9a3f23f7ad..00000000000
--- a/packages/next/src/views/Version/Default/index.scss
+++ /dev/null
@@ -1,170 +0,0 @@
-@import '~@payloadcms/ui/scss';
-
-@layer payload-default {
-  .view-version {
-    width: 100%;
-    padding-bottom: var(--spacing-view-bottom);
-
-    &__toggle-locales-label {
-      color: var(--theme-elevation-500);
-    }
-
-    &-controls-top {
-      border-bottom: 1px solid var(--theme-elevation-100);
-      padding: 16px var(--gutter-h) 16px var(--gutter-h);
-
-      &__wrapper {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-
-        &-actions {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          gap: var(--base);
-        }
-      }
-
-      h2 {
-        font-size: 18px;
-      }
-    }
-
-    &-controls-bottom {
-      border-bottom: 1px solid var(--theme-elevation-100);
-      padding: 16px var(--gutter-h) 16px var(--gutter-h);
-      position: relative;
-
-      // Vertical separator line
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 50%;
-        width: 1px;
-        background-color: var(--theme-elevation-100);
-        transform: translateX(-50%); // Center the line
-      }
-
-      &__wrapper {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: var(--base);
-        gap: var(--base);
-      }
-    }
-
-    &__time-elapsed {
-      color: var(--theme-elevation-500);
-    }
-
-    &__version-from {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-
-      &-labels {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-    }
-
-    &__version-to {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-
-      &-labels {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      &-version {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        background: var(--theme-elevation-50);
-        padding: 8px 12px;
-        gap: calc(var(--base) / 2);
-
-        h2 {
-          font-size: 13px;
-          font-weight: 400;
-        }
-      }
-    }
-
-    &__restore {
-      div {
-        margin-block: 0;
-      }
-    }
-
-    &__modifiedCheckBox {
-      margin: 0 0 0 var(--base);
-      display: flex;
-      align-items: center;
-    }
-
-    &__diff-wrap {
-      padding-top: var(--base);
-      display: flex;
-      flex-direction: column;
-      gap: var(--base);
-      position: relative;
-
-      // Vertical separator line
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 50%;
-        width: 1px;
-        background-color: var(--theme-elevation-100);
-        transform: translateX(-50%); // Center the line
-        z-index: 2;
-      }
-    }
-
-    @include mid-break {
-      &__version-to {
-        &-version {
-          flex-direction: column;
-          align-items: flex-start;
-        }
-      }
-    }
-
-    @include small-break {
-      &__diff-wrap {
-        padding-top: calc(var(--base) / 2);
-      }
-
-      &__version-to,
-      &__version-from {
-        &-labels {
-          flex-direction: column;
-          align-items: flex-start;
-        }
-      }
-
-      &-controls-top {
-        &__wrapper {
-          flex-direction: column;
-          align-items: flex-start;
-
-          .view-version__modifiedCheckBox {
-            margin-left: 0;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/Default/index.tsx b/packages/next/src/views/Version/Default/index.tsx
index 521919bd5ee..05f6fead1b0 100644
--- a/packages/next/src/views/Version/Default/index.tsx
+++ b/packages/next/src/views/Version/Default/index.tsx
@@ -5,7 +5,6 @@ import {
   CheckboxInput,
   ChevronIcon,
   formatTimeToNow,
-  Gutter,
   Pill,
   type SelectablePill,
   useConfig,
@@ -20,7 +19,7 @@ import React, { type FormEventHandler, useCallback, useEffect, useMemo, useState
 import type { CompareOption, DefaultVersionsViewProps } from './types.js'
 
 import { Restore } from '../Restore/index.js'
-import './index.scss'
+import './index.css'
 import { SelectComparison } from '../SelectComparison/index.js'
 import { type SelectedLocaleOnChange, SelectLocales } from '../SelectLocales/index.js'
 import { SelectedLocalesContext } from './SelectedLocalesContext.js'
@@ -180,9 +179,15 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
     [versionFromCreatedAt, i18n, t],
   )
 
+  const selectedLocaleNames = useMemo(() => locales.map((locale) => locale.name), [locales])
+  const selectedLocalesContextValue = useMemo(
+    () => ({ selectedLocales: selectedLocaleNames }),
+    [selectedLocaleNames],
+  )
+
   return (
     <main className={baseClass}>
-      <Gutter className={`${baseClass}-controls-top`}>
+      <div className={`${baseClass}-controls-top`}>
         <div className={`${baseClass}-controls-top__wrapper`}>
           <h2>{i18n.t('version:compareVersions')}</h2>
           <div className={`${baseClass}-controls-top__wrapper-actions`}>
@@ -225,8 +230,8 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
             onChange={onChangeSelectedLocales}
           />
         )}
-      </Gutter>
-      <Gutter className={`${baseClass}-controls-bottom`}>
+      </div>
+      <div className={`${baseClass}-controls-bottom`}>
         <div className={`${baseClass}-controls-bottom__wrapper`}>
           <div className={`${baseClass}__version-from`}>
             <div className={`${baseClass}__version-from-labels`}>
@@ -267,7 +272,7 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
             </div>
           </div>
         </div>
-      </Gutter>
+      </div>
       <SetStepNav
         collectionConfig={collectionConfig}
         globalConfig={globalConfig}
@@ -276,11 +281,11 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
         versionToCreatedAtFormatted={versionToCreatedAtFormatted}
         versionToID={versionToID}
       />
-      <Gutter className={`${baseClass}__diff-wrap`}>
-        <SelectedLocalesContext value={{ selectedLocales: locales.map((locale) => locale.name) }}>
+      <div className={`${baseClass}__diff-wrap`}>
+        <SelectedLocalesContext value={selectedLocalesContextValue}>
           {versionToCreatedAt && RenderedDiff}
         </SelectedLocalesContext>
-      </Gutter>
+      </div>
     </main>
   )
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.css b/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.css
new file mode 100644
index 00000000000..f6d7247c211
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.css
@@ -0,0 +1,64 @@
+@layer payload-default {
+  .diff-collapser__toggle-button {
+    all: unset;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      color: var(--color-icon-tertiary);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0 0 0 calc(var(--spacer-1) * -1);
+      border-radius: var(--radius-medium);
+      z-index: -1;
+    }
+
+    &:hover::before {
+      background-color: var(--color-bg-hover);
+    }
+
+    &:active::before {
+      background-color: var(--color-bg-pressed);
+    }
+  }
+
+  .diff-collapser__label {
+    margin: 0;
+    display: inline-flex;
+    height: 100%;
+  }
+
+  .diff-collapser__field-change-count {
+    margin-inline-start: var(--spacer-2);
+    padding-inline: var(--spacer-1);
+    background: var(--color-bg-tertiary);
+    border-radius: var(--radius-medium);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .diff-collapser__content:not(.diff-collapser__content--hide-gutter) {
+    [dir='ltr'] & {
+      border-left: var(--stroke-width-small) solid var(--color-border);
+      padding-left: var(--spacer-2-5);
+    }
+
+    [dir='rtl'] & {
+      border-right: var(--stroke-width-small) solid var(--color-border);
+      padding-right: var(--spacer-2-5);
+    }
+  }
+
+  .diff-collapser__content--is-collapsed {
+    display: none;
+  }
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.scss
deleted file mode 100644
index d73cac43a46..00000000000
--- a/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import '~@payloadcms/ui/scss';
-
-@layer payload-default {
-  .diff-collapser {
-    &__toggle-button {
-      all: unset;
-      cursor: pointer;
-      position: relative;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-
-      .icon {
-        color: var(--theme-elevation-500);
-      }
-
-      &:hover {
-        // Apply background color but with padding, thus we use after
-        &::before {
-          content: '';
-          position: absolute;
-          top: -(base(0.15));
-          left: -(base(0.15));
-          right: -(base(0.15));
-          bottom: -(base(0.15));
-          background-color: var(--theme-elevation-50);
-          border-radius: var(--style-radius-s);
-          z-index: -1;
-        }
-
-        .iterable-diff__label {
-          background-color: var(--theme-elevation-50);
-          z-index: 1;
-        }
-      }
-    }
-
-    &__label {
-      // Add space between label, chevron, and change count
-      margin: 0 calc(var(--base) * 0.3) 0 0;
-      display: inline-flex;
-      height: 100%;
-    }
-
-    &__field-change-count {
-      // Reset the font weight of the change count to normal
-      font-weight: normal;
-      margin-left: calc(var(--base) * 0.3);
-      padding: calc(var(--base) * 0.1) calc(var(--base) * 0.2);
-      background: var(--theme-elevation-100);
-      border-radius: var(--style-radius-s);
-      font-size: 0.8rem;
-    }
-
-    &__content:not(.diff-collapser__content--hide-gutter) {
-      [dir='ltr'] & {
-        // Vertical gutter
-        border-left: 2px solid var(--theme-elevation-100);
-        // Center-align the gutter with the chevron
-        margin-left: 3px;
-        // Content indentation
-        padding-left: calc(var(--base) * 0.5);
-      }
-      [dir='rtl'] & {
-        // Vertical gutter
-        border-right: 2px solid var(--theme-elevation-100);
-        // Center-align the gutter with the chevron
-        margin-right: 3px;
-        // Content indentation
-        padding-right: calc(var(--base) * 0.5);
-      }
-    }
-
-    &__content--is-collapsed {
-      // Hide the content when collapsed. We use display: none instead of
-      // conditional rendering to avoid loosing children's collapsed state when
-      // remounting.
-      display: none;
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx
index 5e4111edf09..757ca5be6f9 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx
@@ -5,12 +5,13 @@ import { ChevronIcon, FieldDiffLabel, useConfig, useTranslation } from '@payload
 import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'
 import React, { useState } from 'react'
 
-import './index.scss'
+import './index.css'
 import { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js'
 
 const baseClass = 'diff-collapser'
 
 type Props = {
+  changeCountOverride?: number
   hideGutter?: boolean
   initCollapsed?: boolean
   Label: React.ReactNode
@@ -37,6 +38,7 @@ type Props = {
 )
 
 export const DiffCollapser: React.FC<Props> = ({
+  changeCountOverride,
   children,
   field,
   fields,
@@ -53,9 +55,9 @@ export const DiffCollapser: React.FC<Props> = ({
   const [isCollapsed, setIsCollapsed] = useState(initCollapsed)
   const { config } = useConfig()
 
-  let changeCount = 0
+  let changeCount = changeCountOverride ?? 0
 
-  if (isIterable) {
+  if (changeCountOverride === undefined && isIterable) {
     if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) {
       throw new Error(
         'DiffCollapser: field must be an array or blocks field when isIterable is true',
@@ -65,9 +67,7 @@ export const DiffCollapser: React.FC<Props> = ({
     const valueToRows = valueTo ?? []
 
     if (!Array.isArray(valueFromRows) || !Array.isArray(valueToRows)) {
-      throw new Error(
-        'DiffCollapser: valueFrom and valueTro must be arrays when isIterable is true',
-      )
+      throw new Error('DiffCollapser: valueFrom and valueTo must be arrays when isIterable is true')
     }
 
     changeCount = countChangedFieldsInRows({
@@ -78,7 +78,7 @@ export const DiffCollapser: React.FC<Props> = ({
       valueFromRows,
       valueToRows,
     })
-  } else {
+  } else if (changeCountOverride === undefined) {
     changeCount = countChangedFields({
       config,
       fields,
@@ -101,7 +101,7 @@ export const DiffCollapser: React.FC<Props> = ({
     <div className={baseClass}>
       <FieldDiffLabel>
         <button
-          aria-label={isCollapsed ? 'Expand' : 'Collapse'}
+          aria-label={isCollapsed ? t('general:expand') : t('general:collapse')}
           className={`${baseClass}__toggle-button`}
           onClick={() => setIsCollapsed(!isCollapsed)}
           type="button"
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx
index 3f8ec527880..7e4f2208f3f 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx
@@ -2,7 +2,7 @@
 const baseClass = 'render-field-diffs'
 import type { VersionField } from 'payload'
 
-import './index.scss'
+import './index.css'
 
 import { ShimmerEffect } from '@payloadcms/ui'
 import React, { Fragment, useEffect } from 'react'
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx
index 1b8bbcd362c..52139c63c92 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx
@@ -388,7 +388,7 @@ const buildVersionField = ({
           fieldsPermissions: subFieldsPermissions,
           i18n,
           modifiedOnly,
-          nestingLevel: nestingLevel + 1,
+          nestingLevel: nestingLevel + 2,
           parentIndexPath: 'name' in field ? '' : indexPath,
           parentIsLocalized: parentIsLocalized || field.localized,
           parentPath: ('name' in field ? path : parentPath) + '.' + i,
@@ -455,7 +455,7 @@ const buildVersionField = ({
       if (toRow.blockType === fromRow.blockType) {
         fields = toBlock.fields
       } else {
-        const fromBlockSlugToMatch: string = toRow?.blockType ?? fromRow?.blockType
+        const fromBlockSlugToMatch: string = fromRow?.blockType ?? toRow?.blockType
 
         const fromBlock =
           req.payload.blocks[fromBlockSlugToMatch] ??
@@ -494,7 +494,7 @@ const buildVersionField = ({
         fieldsPermissions: blockFieldsPermissions,
         i18n,
         modifiedOnly,
-        nestingLevel: nestingLevel + 1,
+        nestingLevel: nestingLevel + 2,
         parentIndexPath: 'name' in field ? '' : indexPath,
         parentIsLocalized: parentIsLocalized || ('localized' in field && field.localized),
         parentPath: ('name' in field ? path : parentPath) + '.' + i,
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Checkbox/index.css b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Checkbox/index.css
new file mode 100644
index 00000000000..60a4f5d21f2
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Checkbox/index.css
@@ -0,0 +1,97 @@
+@layer payload-default {
+  .checkbox-diff__value {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    position: relative;
+    z-index: 1;
+  }
+
+  .checkbox-diff__value--create::before,
+  .checkbox-diff__value--delete::before {
+    content: '';
+    position: absolute;
+    inset: calc(var(--spacer-2) * -1) 0;
+    display: block;
+    z-index: -1;
+  }
+
+  .checkbox-diff__value--create::before {
+    background-color: var(--diff-create-parent-bg);
+  }
+
+  .checkbox-diff__value--delete::before {
+    background-color: var(--diff-delete-parent-bg);
+  }
+
+  .checkbox-diff__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-3);
+    height: var(--spacer-3);
+    border: var(--stroke-width-small) solid var(--color-border-strong);
+    border-radius: var(--radius-medium);
+    background: transparent;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .checkbox-diff__indicator--checked {
+    background-color: var(--color-border-strong);
+    border-color: var(--color-border-strong);
+  }
+
+  .checkbox-diff__indicator--create {
+    border-color: var(--color-border-brand);
+    background-color: var(--diff-create-parent-bg);
+  }
+
+  .checkbox-diff__indicator--create.checkbox-diff__indicator--checked {
+    background-color: var(--color-bg-brand);
+    border-color: var(--color-border-selected);
+  }
+
+  .checkbox-diff__indicator--delete {
+    border-color: var(--color-border-danger);
+    background-color: var(--diff-delete-parent-bg);
+  }
+
+  .checkbox-diff__indicator--delete.checkbox-diff__indicator--checked {
+    background-color: var(--color-bg-danger);
+    border-color: var(--color-bg-danger);
+  }
+
+  .checkbox-diff__icon {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .checkbox-diff__icon svg {
+    opacity: 0;
+    color: var(--color-icon-onbrand);
+  }
+
+  .checkbox-diff__indicator--checked .checkbox-diff__icon svg {
+    opacity: 1;
+  }
+
+  .checkbox-diff__label {
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text);
+  }
+
+  .checkbox-diff__label--create {
+    color: var(--diff-create-parent-color);
+  }
+
+  .checkbox-diff__label--delete {
+    color: var(--color-text-danger);
+  }
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Checkbox/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Checkbox/index.tsx
new file mode 100644
index 00000000000..3d3fd6051df
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Checkbox/index.tsx
@@ -0,0 +1,76 @@
+'use client'
+import type { CheckboxFieldDiffClientComponent } from 'payload'
+
+import { CheckIcon, FieldDiffContainer, useTranslation } from '@payloadcms/ui'
+import React from 'react'
+
+import './index.css'
+
+const baseClass = 'checkbox-diff'
+
+const CheckboxIndicator: React.FC<{
+  checked: boolean
+  variant?: 'create' | 'default' | 'delete'
+}> = ({ checked, variant = 'default' }) => {
+  const classNames = [
+    `${baseClass}__indicator`,
+    `${baseClass}__indicator--${variant}`,
+    checked && `${baseClass}__indicator--checked`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return (
+    <span className={classNames}>
+      <span className={`${baseClass}__icon`}>
+        <CheckIcon size={16} />
+      </span>
+    </span>
+  )
+}
+
+export const Checkbox: CheckboxFieldDiffClientComponent = ({
+  comparisonValue: valueFrom,
+  field,
+  locale,
+  nestingLevel,
+  versionValue: valueTo,
+}) => {
+  const { i18n, t } = useTranslation()
+
+  const checkedFrom = Boolean(valueFrom)
+  const checkedTo = Boolean(valueTo)
+  const hasChanged = checkedFrom !== checkedTo
+
+  const fromVariant = hasChanged ? 'delete' : 'default'
+  const toVariant = hasChanged ? 'create' : 'default'
+
+  const From = (
+    <div className={`${baseClass}__value ${baseClass}__value--${fromVariant}`}>
+      <CheckboxIndicator checked={checkedFrom} variant={fromVariant} />
+      <span className={`${baseClass}__label ${baseClass}__label--${fromVariant}`}>
+        {checkedFrom ? t('general:checked') : t('general:unchecked')}
+      </span>
+    </div>
+  )
+
+  const To = (
+    <div className={`${baseClass}__value ${baseClass}__value--${toVariant}`}>
+      <CheckboxIndicator checked={checkedTo} variant={toVariant} />
+      <span className={`${baseClass}__label ${baseClass}__label--${toVariant}`}>
+        {checkedTo ? t('general:checked') : t('general:unchecked')}
+      </span>
+    </div>
+  )
+
+  return (
+    <FieldDiffContainer
+      className={baseClass}
+      From={From}
+      i18n={i18n}
+      label={{ label: field.label, locale }}
+      nestingLevel={nestingLevel}
+      To={To}
+    />
+  )
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.css b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.css
new file mode 100644
index 00000000000..925f518937e
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.css
@@ -0,0 +1,29 @@
+@layer payload-default {
+  .date-diff[data-match-type] {
+    background-color: unset !important;
+    border-radius: unset !important;
+    padding: 0 !important;
+  }
+
+  .date-diff {
+    p *[data-match-type='delete'] {
+      color: unset !important;
+      background-color: unset !important;
+    }
+
+    p *[data-match-type='create'] {
+      color: unset !important;
+      background-color: unset !important;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .field-diff-content .date-diff {
+      display: contents;
+    }
+
+    .date-diff .field-diff-content > .html-diff {
+      justify-content: center;
+    }
+  }
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.scss
deleted file mode 100644
index 3b41515ca11..00000000000
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@layer payload-default {
-  .date-diff {
-    p *[data-match-type='delete'] {
-      color: unset !important;
-      background-color: unset !important;
-    }
-    p *[data-match-type='create'] {
-      color: unset !important;
-      background-color: unset !important;
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx
index c108ff120d5..c042464bb25 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx
@@ -12,7 +12,7 @@ import {
 import { formatDate } from '@payloadcms/ui/shared'
 import React from 'react'
 
-import './index.scss'
+import './index.css'
 
 const baseClass = 'date-diff'
 
@@ -23,7 +23,7 @@ export const DateDiffComponent: DateFieldDiffClientComponent = ({
   nestingLevel,
   versionValue: valueTo,
 }) => {
-  const { i18n } = useTranslation()
+  const { i18n, t } = useTranslation()
   const {
     config: {
       admin: { dateFormat },
@@ -46,33 +46,37 @@ export const DateDiffComponent: DateFieldDiffClientComponent = ({
       })
     : ''
 
+  const NoValue = <div className="diff-no-value">{t('general:noValue')}</div>
+
   const escapedFromDate = escapeDiffHTML(formattedFromDate)
   const escapedToDate = escapeDiffHTML(formattedToDate)
 
   const { From, To } = getHTMLDiffComponents({
-    fromHTML:
-      `<div class="${baseClass}" data-enable-match="true" data-date="${escapedFromDate}"><p>` +
-      escapedFromDate +
-      '</p></div>',
+    fromHTML: formattedFromDate
+      ? `<div class="${baseClass}" data-enable-match="true" data-date="${escapedFromDate}"><p>` +
+        escapedFromDate +
+        '</p></div>'
+      : '<p></p>',
     postProcess: unescapeDiffHTML,
-    toHTML:
-      `<div class="${baseClass}" data-enable-match="true" data-date="${escapedToDate}"><p>` +
-      escapedToDate +
-      '</p></div>',
+    toHTML: formattedToDate
+      ? `<div class="${baseClass}" data-enable-match="true" data-date="${escapedToDate}"><p>` +
+        escapedToDate +
+        '</p></div>'
+      : '<p></p>',
     tokenizeByCharacter: false,
   })
 
   return (
     <FieldDiffContainer
       className={baseClass}
-      From={From}
+      From={formattedFromDate ? From : NoValue}
       i18n={i18n}
       label={{
         label: field.label,
         locale,
       }}
       nestingLevel={nestingLevel}
-      To={To}
+      To={formattedToDate ? To : NoValue}
     />
   )
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.css b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.css
new file mode 100644
index 00000000000..8993f10ea97
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.css
@@ -0,0 +1,5 @@
+@layer payload-default {
+  .group-diff__locale-label--no-label {
+    color: var(--color-text-secondary);
+  }
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.scss
deleted file mode 100644
index 6a2af115c2e..00000000000
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer payload-default {
-  .group-diff {
-    &__locale-label {
-      &--no-label {
-        color: var(--theme-elevation-600);
-      }
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx
index 95761c47da2..926e84dbac3 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx
@@ -3,7 +3,7 @@ import type { GroupFieldDiffClientComponent } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 
-import './index.scss'
+import './index.css'
 
 import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.css b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.css
new file mode 100644
index 00000000000..af342949049
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.css
@@ -0,0 +1,40 @@
+@layer payload-default {
+  .iterable-diff-label-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+  }
+
+  .iterable-diff__label {
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-style: normal;
+    font-weight: var(--font-weight-strong);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+  }
+
+  .iterable-diff__locale-label {
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-1);
+
+    [dir='ltr'] & {
+      margin-right: var(--spacer-1);
+    }
+
+    [dir='rtl'] & {
+      margin-left: var(--spacer-1);
+    }
+  }
+
+  .iterable-diff__row:not(:first-of-type) {
+    margin-top: var(--spacer-2);
+  }
+
+  .iterable-diff__no-rows {
+    color: var(--color-text-tertiary);
+  }
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss
deleted file mode 100644
index 96b430610b0..00000000000
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@layer payload-default {
-  .iterable-diff {
-    &-label-container {
-      position: relative;
-      height: 20px;
-      display: flex;
-      flex-direction: row;
-      height: 100%;
-    }
-
-    &-label-prefix {
-      background-color: var(--theme-bg);
-      position: relative;
-      width: calc(var(--base) * 0.5);
-      height: 16px;
-      margin-left: calc((var(--base) * -0.5) - 5px);
-      margin-right: calc(var(--base) * 0.5);
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 1px;
-        top: 8px;
-        transform: translateY(-50%);
-        width: 6px;
-        height: 6px;
-        background-color: var(--theme-elevation-200);
-        border-radius: 50%;
-        margin-right: 5px;
-      }
-    }
-    &__label {
-      font-weight: 400;
-      color: var(--theme-elevation-600);
-    }
-
-    &__locale-label {
-      background: var(--theme-elevation-100);
-      border-radius: var(--style-radius-s);
-      padding: calc(var(--base) * 0.2);
-      // border-radius: $style-radius-m;
-      [dir='ltr'] & {
-        margin-right: calc(var(--base) * 0.25);
-      }
-      [dir='rtl'] & {
-        margin-left: calc(var(--base) * 0.25);
-      }
-    }
-
-    // Space between each row
-    &__row:not(:first-of-type) {
-      margin-top: calc(var(--base) * 0.5);
-    }
-
-    &__no-rows {
-      color: var(--theme-elevation-400);
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx
index 2f0a9201072..ab7a0310ad0 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx
@@ -5,7 +5,7 @@ import type { FieldDiffClientProps } from 'payload'
 import { getTranslation } from '@payloadcms/translations'
 import { useConfig, useTranslation } from '@payloadcms/ui'
 
-import './index.scss'
+import './index.css'
 
 import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared'
 import React from 'react'
@@ -87,10 +87,8 @@ export const Iterable: React.FC<FieldDiffClientProps> = ({
                 <div className={`${baseClass}__row`} key={i}>
                   <DiffCollapser
                     fields={fields}
-                    hideGutter={true}
                     Label={
                       <div className={`${baseClass}-label-container`}>
-                        <div className={`${baseClass}-label-prefix`}></div>
                         <span className={`${baseClass}__label`}>{rowLabel}</span>
                       </div>
                     }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.css b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.css
new file mode 100644
index 00000000000..f948df2e419
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.css
@@ -0,0 +1,213 @@
+@layer payload-default {
+  .relationship-diff-container .field-diff-content {
+    padding: 0;
+    background: unset;
+  }
+
+  .relationship-diff-container .diff-no-value {
+    padding: 0;
+  }
+
+  .relationship-diff-container--hasOne .relationship-diff {
+    min-width: 100%;
+    max-width: fit-content;
+  }
+
+  .relationship-diff-container--hasOne .relationship-diff[data-match-type] {
+    outline: none;
+    background-color: transparent;
+  }
+
+  .relationship-diff-container--hasOne .field-diff-content {
+    padding-block: var(--spacer-2);
+    background: var(--color-bg-secondary);
+  }
+
+  .relationship-diff-container--hasOne .field-diff-content > .html-diff {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+  }
+
+  .relationship-diff-container--hasOne
+    .field-diff-content
+    > .html-diff:is(
+      :has(.relationship-diff[data-match-type='create']),
+      :has(.relationship-diff[data-match-type='delete'])
+    )::before {
+    content: '';
+    position: absolute;
+    inset: calc(var(--spacer-2) * -1) 0;
+    display: block;
+    z-index: -1;
+  }
+
+  .relationship-diff-container--hasOne
+    .field-diff-content
+    > .html-diff:has(.relationship-diff[data-match-type='create'])::before {
+    background-color: var(--diff-create-parent-bg);
+  }
+
+  .relationship-diff-container--hasOne
+    .field-diff-content
+    > .html-diff:has(.relationship-diff[data-match-type='delete'])::before {
+    background-color: var(--diff-delete-parent-bg);
+  }
+
+  .relationship-diff-container--hasMany .field-diff-content {
+    background: var(--color-bg-secondary);
+    padding-block: var(--spacer-1);
+
+    .html-diff {
+      display: flex;
+      flex-direction: row;
+      min-width: 0;
+      max-width: unset;
+      flex-wrap: wrap;
+      gap: var(--spacer-1);
+      justify-content: flex-start;
+    }
+
+    .relationship-diff {
+      padding: var(--spacer-1);
+    }
+  }
+
+  .relationship-diff {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    border-radius: var(--radius-medium);
+    outline: var(--stroke-width-small) solid var(--color-border);
+    outline-offset: calc(var(--stroke-width-small) * -1);
+    background-color: var(--color-bg);
+    position: relative;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    padding: var(--spacer-2) var(--spacer-1);
+    height: min-content;
+
+    &[data-match-type='create'] {
+      background-color: var(--diff-create-parent-bg);
+      outline-color: var(--diff-create-pill-border);
+    }
+
+    &[data-match-type='delete'] {
+      background-color: var(--diff-delete-parent-bg);
+      outline-color: var(--diff-delete-pill-border);
+      text-decoration-line: none;
+    }
+  }
+
+  /* Override HTMLDiff generic [data-match-type] styles (specificity 0,4,1 from :not(img)) */
+  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type='create'],
+  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type='delete'] {
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-2) var(--spacer-1);
+    text-decoration-line: none;
+    color: inherit;
+  }
+
+  /* hasMany pills stay compact at 24px */
+  .relationship-diff-container--hasMany
+    .html-diff
+    .relationship-diff.relationship-diff.relationship-diff[data-match-type='create'],
+  .relationship-diff-container--hasMany
+    .html-diff
+    .relationship-diff.relationship-diff.relationship-diff[data-match-type='delete'] {
+    padding: var(--spacer-1);
+  }
+
+  /* hasOne pills: no padding, field-diff-content provides row height */
+  .relationship-diff-container--hasOne
+    .html-diff
+    .relationship-diff.relationship-diff.relationship-diff[data-match-type='create'],
+  .relationship-diff-container--hasOne
+    .html-diff
+    .relationship-diff.relationship-diff.relationship-diff[data-match-type='delete'] {
+    padding: 0;
+  }
+
+  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type='create'] {
+    background-color: var(--diff-create-parent-bg);
+    outline-color: var(--diff-create-pill-border);
+  }
+
+  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type='delete'] {
+    background-color: var(--diff-delete-parent-bg);
+    outline-color: var(--diff-delete-pill-border);
+  }
+
+  .relationship-diff__pill {
+    display: inline-flex;
+    align-items: center;
+    height: var(--spacer-3);
+    border-radius: var(--radius-medium);
+    padding-inline: var(--spacer-1);
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .relationship-diff[data-match-type='create'] .relationship-diff__pill {
+    background-color: var(--color-bg-brand);
+    color: var(--color-text-onbrand);
+  }
+
+  .relationship-diff[data-match-type='delete'] .relationship-diff__pill {
+    background-color: var(--color-bg-danger);
+    color: var(--color-text-oncomponent);
+
+    * {
+      text-decoration-line: none;
+      color: var(--color-text-oncomponent);
+      background-color: transparent;
+    }
+  }
+
+  .relationship-diff__info {
+    padding-inline-end: var(--spacer-1);
+    font-weight: var(--text-body-medium-font-weight);
+    color: var(--color-text);
+    white-space: nowrap;
+  }
+
+  .relationship-diff[data-match-type='create'] .relationship-diff__info {
+    color: var(--diff-create-parent-color);
+  }
+
+  .relationship-diff[data-match-type='delete'] .relationship-diff__info {
+    color: var(--color-text-danger);
+    text-decoration-line: line-through;
+  }
+
+  @media (max-width: 768px) {
+    .relationship-diff-container--hasOne .field-diff-content {
+      padding: 0;
+      background: transparent;
+    }
+
+    .relationship-diff-container--hasOne .field-diff-content > .html-diff {
+      justify-content: center;
+    }
+
+    .relationship-diff-container--hasOne
+      .field-diff-content
+      > .html-diff:has(.relationship-diff[data-match-type='create'])::before,
+    .relationship-diff-container--hasOne
+      .field-diff-content
+      > .html-diff:has(.relationship-diff[data-match-type='delete'])::before {
+      inset: calc(var(--spacer-1) * -1) calc(var(--spacer-2) * -1);
+    }
+
+    .relationship-diff-container--hasMany .field-diff-content {
+      padding: 0;
+      background: transparent;
+      border-radius: 0;
+      gap: calc(var(--stroke-width-small) * 2);
+    }
+  }
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss
deleted file mode 100644
index 235db1820cf..00000000000
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@import '~@payloadcms/ui/scss';
-
-@layer payload-default {
-  .relationship-diff-container .field-diff-content {
-    padding: 0;
-    background: unset;
-  }
-
-  .relationship-diff-container--hasOne {
-    .relationship-diff {
-      min-width: 100%;
-      max-width: fit-content;
-    }
-  }
-
-  .relationship-diff-container--hasMany .field-diff-content {
-    background: var(--theme-elevation-50);
-    padding: 10px;
-
-    .html-diff {
-      display: flex;
-      min-width: 0;
-      max-width: max-content;
-      flex-wrap: wrap;
-      gap: calc(var(--base) * 0.5);
-    }
-
-    .relationship-diff {
-      padding: calc(var(--base) * 0.15) calc(var(--base) * 0.3);
-    }
-  }
-
-  .relationship-diff {
-    display: flex;
-    align-items: center;
-    border-radius: $style-radius-s;
-    border: var(--stroke-width-small) solid var(--theme-elevation-150);
-    position: relative;
-    font-family: var(--font-body);
-    max-height: calc(var(--base) * 3);
-    padding: calc(var(--base) * 0.35);
-
-    &[data-match-type='create'] {
-      border-color: var(--diff-create-pill-border);
-      color: var(--diff-create-parent-color);
-
-      * {
-        color: var(--diff-create-parent-color);
-      }
-    }
-
-    &[data-match-type='delete'] {
-      border-color: var(--diff-delete-pill-border);
-      color: var(--diff-delete-parent-color);
-      background-color: var(--diff-delete-pill-bg);
-      text-decoration-line: none !important;
-
-      * {
-        color: var(--diff-delete-parent-color);
-        text-decoration-line: none;
-      }
-
-      .relationship-diff__info {
-        text-decoration-line: line-through;
-      }
-    }
-
-    &__info {
-      font-weight: 500;
-    }
-
-    &__pill {
-      border-radius: $style-radius-s;
-      margin: 0 calc(var(--base) * 0.4) 0 calc(var(--base) * 0.2);
-      padding: 0 calc(var(--base) * 0.1);
-      background-color: var(--theme-elevation-150);
-      color: var(--theme-elevation-750);
-    }
-
-    &[data-match-type='create'] .relationship-diff__pill {
-      background-color: var(--diff-create-parent-bg);
-      color: var(--diff-create-pill-color);
-    }
-
-    &[data-match-type='delete'] .relationship-diff__pill {
-      background-color: var(--diff-delete-parent-bg);
-      color: var(--diff-delete-pill-color);
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
index 3a1eb90e68c..2310cbf491d 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
@@ -8,7 +8,7 @@ import type {
 import { getTranslation, type I18nClient } from '@payloadcms/translations'
 import { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'
 
-import './index.scss'
+import './index.css'
 
 import React from 'react'
 
@@ -157,23 +157,33 @@ export const SingleRelationshipDiff: React.FC<{
     />
   ) : null
 
-  const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `<p></p>`
-  const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : `<p></p>`
+  const NoValue = <div className="diff-no-value">{i18n.t('general:noValue')}</div>
 
-  const diff = getHTMLDiffComponents({
-    fromHTML,
-    toHTML,
-    tokenizeByCharacter: false,
-  })
+  let From: React.ReactNode = NoValue
+  let To: React.ReactNode = NoValue
+
+  if (FromComponent || ToComponent) {
+    const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : '<p></p>'
+    const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : '<p></p>'
+
+    const diff = getHTMLDiffComponents({
+      fromHTML,
+      toHTML,
+      tokenizeByCharacter: false,
+    })
+
+    From = FromComponent ? diff.From : NoValue
+    To = ToComponent ? diff.To : NoValue
+  }
 
   return (
     <FieldDiffContainer
       className={`${baseClass}-container ${baseClass}-container--hasOne`}
-      From={diff.From}
+      From={From}
       i18n={i18n}
       label={{ label: field.label, locale }}
       nestingLevel={nestingLevel}
-      To={diff.To}
+      To={To}
     />
   )
 }
@@ -250,35 +260,45 @@ const ManyRelationshipDiff: React.FC<{
             : (field.relationTo as string)
         }
         req={req}
-        showPill={polymorphic}
+        showPill={true}
         title={titles[idx]}
         value={val}
       />
     ))
 
-  const fromNodes =
-    fromArr.length > 0 ? makeNodes(fromArr, titlesFrom) : <p className={`${baseClass}__empty`}></p>
+  const NoValue = <div className="diff-no-value">{i18n.t('general:noValue')}</div>
 
-  const toNodes =
-    toArr.length > 0 ? makeNodes(toArr, titlesTo) : <p className={`${baseClass}__empty`}></p>
+  const hasFrom = fromArr.length > 0
+  const hasTo = toArr.length > 0
 
-  const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes)
-  const toHTML = ReactDOMServer.renderToStaticMarkup(toNodes)
+  let From: React.ReactNode = NoValue
+  let To: React.ReactNode = NoValue
 
-  const diff = getHTMLDiffComponents({
-    fromHTML,
-    toHTML,
-    tokenizeByCharacter: false,
-  })
+  if (hasFrom || hasTo) {
+    const fromNodes = hasFrom ? makeNodes(fromArr, titlesFrom) : []
+    const toNodes = hasTo ? makeNodes(toArr, titlesTo) : []
+
+    const fromHTML = hasFrom ? ReactDOMServer.renderToStaticMarkup(<>{fromNodes}</>) : ''
+    const toHTML = hasTo ? ReactDOMServer.renderToStaticMarkup(<>{toNodes}</>) : ''
+
+    const diff = getHTMLDiffComponents({
+      fromHTML,
+      toHTML,
+      tokenizeByCharacter: false,
+    })
+
+    From = hasFrom ? diff.From : NoValue
+    To = hasTo ? diff.To : NoValue
+  }
 
   return (
     <FieldDiffContainer
       className={`${baseClass}-container ${baseClass}-container--hasMany`}
-      From={diff.From}
+      From={From}
       i18n={i18n}
       label={{ label: field.label, locale }}
       nestingLevel={nestingLevel}
-      To={diff.To}
+      To={To}
     />
   )
 }
@@ -320,8 +340,12 @@ const RelationshipDocumentDiff = ({
       data-enable-match="true"
       data-id={
         polymorphic
-          ? (value as { relationTo: string; value: TypeWithID }).value.id
-          : (value as TypeWithID).id
+          ? typeof (value as { relationTo: string; value: unknown }).value === 'object'
+            ? ((value as { relationTo: string; value: TypeWithID }).value?.id ?? '')
+            : (value as { relationTo: string; value: unknown }).value
+          : typeof value === 'object' && value !== null
+            ? (value as TypeWithID).id
+            : value
       }
       data-relation-to={relationTo}
     >
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.css
similarity index 100%
rename from packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss
rename to packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.css
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx
index 0c7b3a5c711..4173a43666e 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx
@@ -12,12 +12,12 @@ import {
 } from '@payloadcms/ui'
 import React from 'react'
 
-import './index.scss'
+import './index.css'
 
 const baseClass = 'select-diff'
 
 const getOptionsToRender = (
-  value: string,
+  value: string | string[],
   options: SelectField['options'],
   hasMany: boolean,
 ): Option | Option[] => {
@@ -65,24 +65,19 @@ const getTranslatedOptions = (options: Option | Option[], i18n: I18nClient): str
 
 export const Select: SelectFieldDiffClientComponent = ({
   comparisonValue: valueFrom,
-  diffMethod,
   field,
   locale,
   nestingLevel,
   versionValue: valueTo,
 }) => {
-  const { i18n } = useTranslation()
+  const { i18n, t } = useTranslation()
 
   const options = 'options' in field && field.options
 
   const renderedValueFrom =
     typeof valueFrom !== 'undefined'
       ? getTranslatedOptions(
-          getOptionsToRender(
-            typeof valueFrom === 'string' ? valueFrom : JSON.stringify(valueFrom),
-            options,
-            field.hasMany,
-          ),
+          getOptionsToRender(valueFrom as string | string[], options, field.hasMany),
           i18n,
         )
       : ''
@@ -90,33 +85,31 @@ export const Select: SelectFieldDiffClientComponent = ({
   const renderedValueTo =
     typeof valueTo !== 'undefined'
       ? getTranslatedOptions(
-          getOptionsToRender(
-            typeof valueTo === 'string' ? valueTo : JSON.stringify(valueTo),
-            options,
-            field.hasMany,
-          ),
+          getOptionsToRender(valueTo as string | string[], options, field.hasMany),
           i18n,
         )
       : ''
 
+  const NoValue = <div className="diff-no-value">{t('general:noValue')}</div>
+
   const { From, To } = getHTMLDiffComponents({
-    fromHTML: '<p>' + escapeDiffHTML(renderedValueFrom) + '</p>',
+    fromHTML: renderedValueFrom ? '<p>' + escapeDiffHTML(renderedValueFrom) + '</p>' : '<p></p>',
     postProcess: unescapeDiffHTML,
-    toHTML: '<p>' + escapeDiffHTML(renderedValueTo) + '</p>',
+    toHTML: renderedValueTo ? '<p>' + escapeDiffHTML(renderedValueTo) + '</p>' : '<p></p>',
     tokenizeByCharacter: true,
   })
 
   return (
     <FieldDiffContainer
       className={baseClass}
-      From={From}
+      From={renderedValueFrom ? From : NoValue}
       i18n={i18n}
       label={{
         label: field.label,
         locale,
       }}
       nestingLevel={nestingLevel}
-      To={To}
+      To={renderedValueTo ? To : NoValue}
     />
   )
 }
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.css b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.css
new file mode 100644
index 00000000000..7a5790b5c2b
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.css
@@ -0,0 +1,6 @@
+@layer payload-default {
+  .tabs-diff__tab:not(:first-of-type),
+  .tabs-diff__tab-locale:not(:first-of-type) {
+    margin-top: var(--spacer-3);
+  }
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.scss
deleted file mode 100644
index 02f067d9c9b..00000000000
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer payload-default {
-  .tabs-diff {
-    // Space between each tab or tab locale
-    &__tab:not(:first-of-type),
-    &__tab-locale:not(:first-of-type) {
-      margin-top: var(--base);
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx
index 91c41170ef9..7e9c31f77a2 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx
@@ -11,7 +11,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
-import './index.scss'
+import './index.css'
 import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js'
 import { DiffCollapser } from '../../DiffCollapser/index.js'
 import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js'
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.css
similarity index 100%
rename from packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss
rename to packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.css
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
index d968c584120..f0c7c6770a4 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx
@@ -10,13 +10,13 @@ import {
 } from '@payloadcms/ui'
 import React from 'react'
 
-import './index.scss'
+import './index.css'
 
 const baseClass = 'text-diff'
 
 function formatValue(value: unknown): {
   tokenizeByCharacter: boolean
-  value: string
+  value: string | undefined
 } {
   if (typeof value === 'string') {
     return { tokenizeByCharacter: true, value: escapeDiffHTML(value) }
@@ -54,14 +54,16 @@ export const Text: TextFieldDiffClientComponent = ({
   nestingLevel,
   versionValue: valueTo,
 }) => {
-  const { i18n } = useTranslation()
+  const { i18n, t } = useTranslation()
 
   let placeholder = ''
 
-  if (valueTo == valueFrom) {
-    placeholder = `<span class="html-diff-no-value"><span>`
+  if (valueTo === valueFrom) {
+    placeholder = `<span class="html-diff-no-value"></span>`
   }
 
+  const NoValue = <div className="diff-no-value">{t('general:noValue')}</div>
+
   const formattedValueFrom = formatValue(valueFrom)
   const formattedValueTo = formatValue(valueTo)
 
@@ -72,16 +74,19 @@ export const Text: TextFieldDiffClientComponent = ({
     tokenizeByCharacter = formattedValueTo.tokenizeByCharacter
   }
 
-  const renderedValueFrom = formattedValueFrom.value ?? placeholder
-  const renderedValueTo: string = formattedValueTo.value ?? placeholder
+  const fromHTML = formattedValueFrom.value ?? placeholder
+  const toHTML = formattedValueTo.value ?? placeholder
 
-  const { From, To } = getHTMLDiffComponents({
-    fromHTML: '<p>' + renderedValueFrom + '</p>',
+  const { From: DiffFrom, To: DiffTo } = getHTMLDiffComponents({
+    fromHTML: `<p>${fromHTML}</p>`,
     postProcess: unescapeDiffHTML,
-    toHTML: '<p>' + renderedValueTo + '</p>',
+    toHTML: `<p>${toHTML}</p>`,
     tokenizeByCharacter,
   })
 
+  const From = fromHTML ? DiffFrom : NoValue
+  const To = toHTML ? DiffTo : NoValue
+
   return (
     <FieldDiffContainer
       className={baseClass}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.css b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.css
new file mode 100644
index 00000000000..e8a1d91d78f
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.css
@@ -0,0 +1,188 @@
+@layer payload-default {
+  .upload-diff-container .field-diff-content {
+    padding: 0;
+    background: unset;
+  }
+
+  .upload-diff-container .html-diff {
+    background-color: transparent;
+    margin-block: 0;
+    padding-block: 0;
+  }
+
+  .upload-diff-container .diff-no-value {
+    padding: var(--spacer-2) var(--spacer-2-5);
+  }
+
+  .upload-diff-container .field-diff-content > .html-diff__diff-old {
+    padding-left: 0;
+  }
+
+  .upload-diff-container .field-diff-content > .html-diff__diff-new {
+    padding-right: 0;
+  }
+
+  @media (max-width: 768px) {
+    /* Stack hasMany columns vertically */
+    .upload-diff-container--hasMany .field-diff-content {
+      grid-template-columns: 1fr;
+      gap: var(--spacer-2);
+    }
+
+    /*
+     * Suppress the generic mobile column-level styling for uploads.
+     * Individual .upload-diff elements handle their own create/delete backgrounds.
+     */
+    .upload-diff-container .field-diff-content > .html-diff__diff-old,
+    .upload-diff-container .field-diff-content > .html-diff__diff-new {
+      background: transparent;
+      padding: 0;
+      border-radius: 0;
+      min-height: unset;
+      overflow: visible;
+    }
+
+    /* On mobile, remove .upload-diff padding so it sits flush inside the stacked column */
+    .upload-diff-container--hasOne .upload-diff,
+    .upload-diff-container--hasOne
+      .html-diff
+      .upload-diff.upload-diff.upload-diff[data-match-type='create'],
+    .upload-diff-container--hasOne
+      .html-diff
+      .upload-diff.upload-diff.upload-diff[data-match-type='delete'] {
+      padding: 0;
+    }
+  }
+
+  .upload-diff-hasMany {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .upload-diff {
+    min-width: 100%;
+    max-width: fit-content;
+    display: flex;
+    align-items: center;
+    background-color: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    position: relative;
+    font-family: var(--text-body-medium-font-family);
+    padding: var(--spacer-1);
+
+    &[data-match-type] {
+      .upload-diff__thumbnail {
+        background-color: transparent;
+      }
+    }
+
+    &[data-match-type='create'] {
+      background-color: var(--diff-create-parent-bg);
+      color: var(--diff-create-parent-color);
+
+      .upload-diff__info {
+        color: var(--diff-create-parent-color);
+      }
+    }
+
+    &[data-match-type='delete'] {
+      text-decoration-line: none;
+      background-color: var(--diff-delete-parent-bg);
+      color: var(--diff-delete-parent-color);
+
+      .upload-diff__info {
+        text-decoration-line: line-through;
+        text-decoration-color: var(--diff-delete-parent-color);
+        color: var(--diff-delete-parent-color);
+      }
+    }
+  }
+
+  /* Override HTMLDiff generic [data-match-type] styles which have higher specificity */
+  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type='create'],
+  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type='delete'] {
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-1);
+    text-decoration-line: none;
+  }
+
+  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type='create'] {
+    background-color: var(--diff-create-parent-bg);
+    color: var(--diff-create-parent-color);
+  }
+
+  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type='delete'] {
+    background-color: var(--diff-delete-parent-bg);
+    color: var(--diff-delete-parent-color);
+  }
+
+  .upload-diff__card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    gap: var(--spacer-2);
+  }
+
+  .upload-diff__thumbnail {
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    border-radius: var(--radius-medium);
+    background-color: var(--color-bg-secondary);
+
+    img,
+    svg {
+      position: absolute;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .upload-diff__info {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    font-weight: var(--text-body-medium-font-weight);
+    font-size: var(--text-body-medium-font-size);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: var(--stroke-width-small);
+  }
+
+  .upload-diff__pill {
+    border-radius: var(--radius-medium);
+    padding-inline: var(--spacer-1);
+    background-color: var(--color-bg-brand);
+    color: var(--color-text-onbrand);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .upload-diff[data-match-type] .upload-diff__pill {
+    text-decoration-line: none;
+  }
+
+  .upload-diff[data-match-type='create'] .upload-diff__pill {
+    background-color: var(--color-bg-brand);
+    color: var(--color-text-onbrand);
+  }
+
+  .upload-diff[data-match-type='delete'] .upload-diff__pill {
+    background-color: var(--color-bg-danger);
+    color: var(--color-text-oncomponent);
+
+    * {
+      text-decoration-line: none;
+      color: var(--color-text-oncomponent);
+      background-color: transparent;
+    }
+  }
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss
deleted file mode 100644
index 900b24c77ee..00000000000
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@import '~@payloadcms/ui/scss';
-
-@layer payload-default {
-  .upload-diff-container .field-diff-content {
-    padding: 0;
-    background: unset;
-  }
-
-  .upload-diff-hasMany {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) * 0.4);
-  }
-
-  .upload-diff {
-    min-width: 100%;
-    max-width: fit-content;
-    display: flex;
-    align-items: center;
-    background-color: var(--theme-elevation-50);
-    border-radius: $style-radius-s;
-    border: var(--stroke-width-small) solid var(--theme-elevation-150);
-    position: relative;
-    font-family: var(--font-body);
-    max-height: calc(var(--base) * 3);
-    padding: calc(var(--base) * 0.1);
-
-    &[data-match-type='create'] {
-      border-color: var(--diff-create-pill-border);
-      color: var(--diff-create-parent-color);
-
-      * {
-        color: var(--diff-create-parent-color);
-      }
-
-      .upload-diff__thumbnail {
-        border-radius: 0px;
-        border-color: var(--diff-create-pill-border);
-        background-color: none;
-      }
-    }
-
-    &[data-match-type='delete'] {
-      border-color: var(--diff-delete-pill-border);
-      text-decoration-line: none;
-      color: var(--diff-delete-parent-color);
-      background-color: var(--diff-delete-pill-bg);
-
-      * {
-        text-decoration-line: none;
-        color: var(--diff-delete-parent-color);
-      }
-
-      .upload-diff__thumbnail {
-        border-radius: 0px;
-        border-color: var(--diff-delete-pill-border);
-        background-color: none;
-      }
-    }
-
-    &__card {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-    }
-
-    &__thumbnail {
-      width: calc(var(--base) * 3 - base(0.8) * 2);
-      height: calc(var(--base) * 3 - base(0.8) * 2);
-      position: relative;
-      overflow: hidden;
-      flex-shrink: 0;
-      border-radius: 0px;
-      border: var(--stroke-width-small) solid var(--theme-elevation-100);
-
-      img,
-      svg {
-        position: absolute;
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
-        border-radius: 0px;
-      }
-    }
-
-    &__info {
-      flex-grow: 1;
-      display: flex;
-      align-items: flex-start;
-      flex-direction: column;
-      padding: calc(var(--base) * 0.25) calc(var(--base) * 0.6);
-      justify-content: space-between;
-      font-weight: 400;
-
-      strong {
-        font-weight: 500;
-      }
-    }
-
-    &__pill {
-      border-radius: $style-radius-s;
-      margin-left: calc(var(--base) * 0.6);
-      padding: 0 calc(var(--base) * 0.1);
-
-      background-color: var(--theme-elevation-150);
-      color: var(--theme-elevation-750);
-    }
-
-    &[data-match-type='create'] .upload-diff__pill {
-      background-color: var(--diff-create-parent-bg);
-      color: var(--diff-create-pill-color);
-    }
-
-    &[data-match-type='delete'] .upload-diff__pill {
-      background-color: var(--diff-delete-parent-bg);
-      color: var(--diff-delete-pill-color);
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx
index d27b3c77479..0f139d877b3 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx
@@ -9,10 +9,12 @@ import type {
 import { getTranslation, type I18nClient } from '@payloadcms/translations'
 import { FieldDiffContainer, File, getHTMLDiffComponents } from '@payloadcms/ui/rsc'
 
-import './index.scss'
+import './index.css'
 
 import React from 'react'
 
+import { DiffCollapser } from '../../DiffCollapser/index.js'
+
 const baseClass = 'upload-diff'
 
 type NonPolyUploadDoc = (FileData & TypeWithID) | number | string
@@ -30,7 +32,8 @@ export const Upload: UploadFieldDiffServerComponent = (args) => {
     req,
     versionValue: valueTo,
   } = args
-  const hasMany = 'hasMany' in field && field.hasMany && Array.isArray(valueTo)
+  const hasMany =
+    'hasMany' in field && field.hasMany && (Array.isArray(valueTo) || Array.isArray(valueFrom))
   const polymorphic = Array.isArray(field.relationTo)
 
   if (hasMany) {
@@ -78,7 +81,10 @@ export const HasManyUploadDiff: React.FC<{
   let From: React.ReactNode = ''
   let To: React.ReactNode = ''
 
-  const showCollectionSlug = Array.isArray(field.relationTo)
+  const NoValue = <div className="diff-no-value">{i18n.t('general:noValue')}</div>
+
+  const hasFrom = valueFrom && valueFrom.length > 0
+  const hasTo = valueTo && valueTo.length > 0
 
   const getUploadDocKey = (uploadDoc: UploadDoc): number | string => {
     if (typeof uploadDoc === 'object' && 'relationTo' in uploadDoc) {
@@ -90,67 +96,106 @@ export const HasManyUploadDiff: React.FC<{
     return typeof uploadDoc === 'object' ? uploadDoc.id : uploadDoc
   }
 
-  const FromComponents = valueFrom
-    ? valueFrom.map((uploadDoc) => (
-        <UploadDocumentDiff
-          i18n={i18n}
-          key={getUploadDocKey(uploadDoc)}
-          polymorphic={polymorphic}
-          relationTo={field.relationTo}
-          req={req}
-          showCollectionSlug={showCollectionSlug}
-          uploadDoc={uploadDoc}
-        />
-      ))
-    : null
-  const ToComponents = valueTo
-    ? valueTo.map((uploadDoc) => (
-        <UploadDocumentDiff
-          i18n={i18n}
-          key={getUploadDocKey(uploadDoc)}
-          polymorphic={polymorphic}
-          relationTo={field.relationTo}
-          req={req}
-          showCollectionSlug={showCollectionSlug}
-          uploadDoc={uploadDoc}
-        />
-      ))
-    : null
-
-  const diffResult = getHTMLDiffComponents({
-    fromHTML:
-      `<div class="${baseClass}-hasMany">` +
-      (FromComponents
-        ? FromComponents.map(
-            (component) => `<div>${ReactDOMServer.renderToStaticMarkup(component)}</div>`,
-          ).join('')
-        : '') +
-      '</div>',
-    toHTML:
-      `<div class="${baseClass}-hasMany">` +
-      (ToComponents
-        ? ToComponents.map(
-            (component) => `<div>${ReactDOMServer.renderToStaticMarkup(component)}</div>`,
-          ).join('')
-        : '') +
-      '</div>',
-    tokenizeByCharacter: false,
-  })
-  From = diffResult.From
-  To = diffResult.To
+  if (hasFrom || hasTo) {
+    const FromComponents = hasFrom
+      ? valueFrom.map((uploadDoc) => (
+          <UploadDocumentDiff
+            i18n={i18n}
+            key={getUploadDocKey(uploadDoc)}
+            polymorphic={polymorphic}
+            relationTo={field.relationTo}
+            req={req}
+            uploadDoc={uploadDoc}
+          />
+        ))
+      : null
+    const ToComponents = hasTo
+      ? valueTo.map((uploadDoc) => (
+          <UploadDocumentDiff
+            i18n={i18n}
+            key={getUploadDocKey(uploadDoc)}
+            polymorphic={polymorphic}
+            relationTo={field.relationTo}
+            req={req}
+            uploadDoc={uploadDoc}
+          />
+        ))
+      : null
+
+    const diffResult = getHTMLDiffComponents({
+      fromHTML:
+        `<div class="${baseClass}-hasMany">` +
+        (FromComponents
+          ? FromComponents.map(
+              (component) => `<div>${ReactDOMServer.renderToStaticMarkup(component)}</div>`,
+            ).join('')
+          : '') +
+        '</div>',
+      toHTML:
+        `<div class="${baseClass}-hasMany">` +
+        (ToComponents
+          ? ToComponents.map(
+              (component) => `<div>${ReactDOMServer.renderToStaticMarkup(component)}</div>`,
+            ).join('')
+          : '') +
+        '</div>',
+      tokenizeByCharacter: false,
+    })
+
+    From = hasFrom ? diffResult.From : NoValue
+    To = hasTo ? diffResult.To : NoValue
+  }
+
+  const effectiveNesting = nestingLevel || 0
+
+  // Count individual upload changes
+  const fromLength = valueFrom?.length || 0
+  const toLength = valueTo?.length || 0
+  const maxLength = Math.max(fromLength, toLength)
+  let uploadChangeCount = 0
+
+  for (let i = 0; i < maxLength; i++) {
+    const fromKey = i < fromLength ? getUploadDocKey(valueFrom[i]) : undefined
+    const toKey = i < toLength ? getUploadDocKey(valueTo[i]) : undefined
+
+    if (fromKey !== toKey) {
+      uploadChangeCount++
+    }
+  }
+
+  const uploadGutterOffset = (effectiveNesting + 1) * 6.5
 
   return (
-    <FieldDiffContainer
-      className={`${baseClass}-container ${baseClass}-container--hasMany`}
-      From={From}
-      i18n={i18n}
-      label={{
-        label: field.label,
-        locale,
-      }}
-      nestingLevel={nestingLevel}
-      To={To}
-    />
+    <div className={`${baseClass}-container ${baseClass}-container--hasMany`}>
+      <DiffCollapser
+        changeCountOverride={uploadChangeCount}
+        fields={[]}
+        Label={
+          <span>
+            {locale && <span className="field-diff__locale-label">{locale}</span>}
+            {typeof field.label !== 'function' &&
+              field.label !== false &&
+              getTranslation(field.label, i18n)}
+          </span>
+        }
+        locales={undefined}
+        parentIsLocalized={false}
+        valueFrom={valueFrom}
+        valueTo={valueTo}
+      >
+        <div
+          className="field-diff-content"
+          style={
+            {
+              '--field-diff-columns': `calc(50% - ${uploadGutterOffset}px) calc(50% + ${uploadGutterOffset}px)`,
+            } as React.CSSProperties
+          }
+        >
+          {From}
+          {To}
+        </div>
+      </DiffCollapser>
+    </div>
   )
 }
 
@@ -171,7 +216,7 @@ export const SingleUploadDiff: React.FC<{
   let From: React.ReactNode = ''
   let To: React.ReactNode = ''
 
-  const showCollectionSlug = Array.isArray(field.relationTo)
+  const NoValue = <div className="diff-no-value">{i18n.t('general:noValue')}</div>
 
   const FromComponent = valueFrom ? (
     <UploadDocumentDiff
@@ -179,7 +224,6 @@ export const SingleUploadDiff: React.FC<{
       polymorphic={polymorphic}
       relationTo={field.relationTo}
       req={req}
-      showCollectionSlug={showCollectionSlug}
       uploadDoc={valueFrom}
     />
   ) : null
@@ -189,25 +233,23 @@ export const SingleUploadDiff: React.FC<{
       polymorphic={polymorphic}
       relationTo={field.relationTo}
       req={req}
-      showCollectionSlug={showCollectionSlug}
       uploadDoc={valueTo}
     />
   ) : null
 
-  const fromHtml = FromComponent
-    ? ReactDOMServer.renderToStaticMarkup(FromComponent)
-    : '<p>' + '' + '</p>'
-  const toHtml = ToComponent
-    ? ReactDOMServer.renderToStaticMarkup(ToComponent)
-    : '<p>' + '' + '</p>'
-
-  const diffResult = getHTMLDiffComponents({
-    fromHTML: fromHtml,
-    toHTML: toHtml,
-    tokenizeByCharacter: false,
-  })
-  From = diffResult.From
-  To = diffResult.To
+  if (FromComponent || ToComponent) {
+    const fromHtml = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : '<p></p>'
+    const toHtml = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : '<p></p>'
+
+    const diffResult = getHTMLDiffComponents({
+      fromHTML: fromHtml,
+      toHTML: toHtml,
+      tokenizeByCharacter: false,
+    })
+
+    From = FromComponent ? diffResult.From : NoValue
+    To = ToComponent ? diffResult.To : NoValue
+  }
 
   return (
     <FieldDiffContainer
@@ -256,7 +298,7 @@ const UploadDocumentDiff = (args: {
 
   let pillLabel: null | string = null
 
-  if (showCollectionSlug) {
+  {
     let collectionSlug: string
     if (polymorphic && typeof uploadDoc === 'object' && 'relationTo' in uploadDoc) {
       collectionSlug = uploadDoc.relationTo
@@ -282,12 +324,19 @@ const UploadDocumentDiff = (args: {
   const alt =
     (value && typeof value === 'object' && (value as { alt?: string }).alt) || filename || ''
 
+  let resolvedRelationTo: string
+  if (polymorphic && typeof uploadDoc === 'object' && 'relationTo' in uploadDoc) {
+    resolvedRelationTo = uploadDoc.relationTo
+  } else {
+    resolvedRelationTo = typeof relationTo === 'string' ? relationTo : relationTo[0]
+  }
+
   return (
     <div
       className={`${baseClass}`}
       data-enable-match="true"
       data-id={id}
-      data-relation-to={relationTo}
+      data-relation-to={resolvedRelationTo}
     >
       <div className={`${baseClass}__card`}>
         <div className={`${baseClass}__thumbnail`}>
@@ -299,7 +348,7 @@ const UploadDocumentDiff = (args: {
           </div>
         )}
         <div className={`${baseClass}__info`} data-enable-match="false">
-          <strong>{filename}</strong>
+          {filename}
         </div>
       </div>
     </div>
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.ts b/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.ts
index cc00eeab186..7bc250158ea 100644
--- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.ts
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.ts
@@ -1,5 +1,6 @@
 import type { FieldDiffClientProps, FieldDiffServerProps, FieldTypes } from 'payload'
 
+import { Checkbox } from './Checkbox/index.js'
 import { Collapsible } from './Collapsible/index.js'
 import { DateDiffComponent } from './Date/index.js'
 import { Group } from './Group/index.js'
@@ -17,7 +18,7 @@ export const diffComponents: Record<
 > = {
   array: Iterable,
   blocks: Iterable,
-  checkbox: Text,
+  checkbox: Checkbox,
   code: Text,
   collapsible: Collapsible,
   date: DateDiffComponent,
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/index.css b/packages/next/src/views/Version/RenderFieldsToDiff/index.css
new file mode 100644
index 00000000000..7f59794b45e
--- /dev/null
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/index.css
@@ -0,0 +1,24 @@
+@layer payload-default {
+  .render-field-diffs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+
+    [role='banner'] {
+      display: none !important;
+    }
+  }
+
+  .render-field-diffs__field {
+    overflow-wrap: anywhere;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+  }
+
+  @media (max-width: 768px) {
+    .render-field-diffs {
+      gap: calc(var(--spacer-4) - var(--spacer-1));
+    }
+  }
+}
diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/index.scss b/packages/next/src/views/Version/RenderFieldsToDiff/index.scss
deleted file mode 100644
index 03eed0412be..00000000000
--- a/packages/next/src/views/Version/RenderFieldsToDiff/index.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '~@payloadcms/ui/scss';
-
-@layer payload-default {
-  .render-field-diffs {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-
-    [role='banner'] {
-      display: none !important;
-    }
-
-    &__field {
-      overflow-wrap: anywhere;
-      display: flex;
-      flex-direction: column;
-      gap: var(--base);
-    }
-
-    @include small-break {
-      gap: calc(var(--base) / 2);
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/Restore/index.css b/packages/next/src/views/Version/Restore/index.css
new file mode 100644
index 00000000000..67647a2c1bc
--- /dev/null
+++ b/packages/next/src/views/Version/Restore/index.css
@@ -0,0 +1,26 @@
+@layer payload-default {
+  .restore-version {
+    cursor: pointer;
+    display: flex;
+    min-width: max-content;
+  }
+
+  .restore-version .btn {
+    margin-block: 0;
+  }
+
+  .restore-version .btn__content {
+    gap: 0;
+  }
+
+  .restore-version__restore-as-draft-button {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 0;
+  }
+
+  .restore-version__restore-as-draft-button:focus {
+    border-radius: 0;
+    outline-offset: 0;
+  }
+}
diff --git a/packages/next/src/views/Version/Restore/index.scss b/packages/next/src/views/Version/Restore/index.scss
deleted file mode 100644
index f2b2ce708fe..00000000000
--- a/packages/next/src/views/Version/Restore/index.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@import '~@payloadcms/ui/scss';
-
-@layer payload-default {
-  .restore-version {
-    cursor: pointer;
-    display: flex;
-    min-width: max-content;
-
-    .popup-button {
-      display: flex;
-    }
-
-    &__chevron {
-      background-color: var(--theme-elevation-150);
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      cursor: pointer;
-
-      .stroke {
-        stroke-width: 1px;
-      }
-
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
-    }
-
-    .btn {
-      margin-block: 0;
-    }
-
-    &__restore-as-draft-button {
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-      margin-right: 2px;
-
-      &:focus {
-        border-radius: 0;
-        outline-offset: 0;
-      }
-    }
-
-    &__modal {
-      @include blur-bg;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-
-      &__toggle {
-      }
-    }
-
-    &__wrapper {
-      z-index: 1;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      gap: base(0.8);
-      padding: base(2);
-      max-width: base(36);
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      gap: base(0.4);
-
-      > * {
-        margin: 0;
-      }
-    }
-
-    &__controls {
-      display: flex;
-      gap: base(0.4);
-
-      .btn {
-        margin: 0;
-      }
-    }
-  }
-}
diff --git a/packages/next/src/views/Version/Restore/index.tsx b/packages/next/src/views/Version/Restore/index.tsx
index 6c36df823eb..ea756bdce51 100644
--- a/packages/next/src/views/Version/Restore/index.tsx
+++ b/packages/next/src/views/Version/Restore/index.tsx
@@ -17,7 +17,7 @@ import { requests } from '@payloadcms/ui/shared'
 import { useRouter } from 'next/navigation.js'
 import { formatAdminURL } from 'payload/shared'
 
-import './index.scss'
+import './index.css'
 
 import React, { Fragment, useCallback, useState } from 'react'
 
@@ -121,11 +121,12 @@ export const Restore: React.FC<Props> = ({
     <Fragment>
       <div className={[baseClass, className].filter(Boolean).join(' ')}>
         <Button
-          buttonStyle="primary"
+          buttonStyle="ghost"
           className={[canRestoreAsDraft && `${baseClass}__restore-as-draft-button`]
             .filter(Boolean)
             .join(' ')}
           onClick={() => toggleModal(modalSlug)}
+          popupIconSize={16}
           size="medium"
           SubMenuPopupContent={
             canRestoreAsDraft
@@ -139,7 +140,7 @@ export const Restore: React.FC<Props> = ({
               : null
           }
         >
-          {t('version:restoreThisVersion')}
+          {t('general:restore')}
         </Button>
       </div>
       <ConfirmationModal
diff --git a/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx b/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx
index 2a8f1015998..bb1014a87f5 100644
--- a/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx
+++ b/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx
@@ -11,12 +11,17 @@ import { getVersionLabel } from './getVersionLabel.js'
 
 const baseClass = 'version-pill-label'
 
-const renderPill = (label: React.ReactNode, pillStyle: Parameters<typeof Pill>[0]['pillStyle']) => {
-  return (
-    <Pill pillStyle={pillStyle} size="small">
-      {label}
-    </Pill>
-  )
+const statusModifierMap: Record<string, string> = {
+  currentDraft: 'draft',
+  currentlyPublished: 'published',
+  draft: 'draft',
+  previouslyPublished: 'previously-published',
+  published: 'published',
+}
+
+const renderStatus = (label: React.ReactNode, name: string) => {
+  const modifier = statusModifierMap[name] || 'draft'
+  return <span className={`status-cell status-cell--${modifier}`}>{label}</span>
 }
 
 export const VersionPillLabel: React.FC<{
@@ -65,7 +70,7 @@ export const VersionPillLabel: React.FC<{
   const { i18n, t } = useTranslation()
   const { code: currentLocale } = useLocale()
 
-  const { label, pillStyle } = getVersionLabel({
+  const { name, label } = getVersionLabel({
     currentLocale,
     currentlyPublishedVersion,
     latestDraftVersion,
@@ -99,7 +104,7 @@ export const VersionPillLabel: React.FC<{
       {labelFirst ? (
         <React.Fragment>
           {labelStyle === 'pill' ? (
-            renderPill(labelText, pillStyle)
+            renderStatus(labelText, name)
           ) : (
             <span className={`${baseClass}-text`}>{labelText}</span>
           )}
@@ -109,7 +114,7 @@ export const VersionPillLabel: React.FC<{
         <React.Fragment>
           {showDate && <span className={`${baseClass}-date`}>{formattedDate}</span>}
           {labelStyle === 'pill' ? (
-            renderPill(labelText, pillStyle)
+            renderStatus(labelText, name)
           ) : (
             <span className={`${baseClass}-text`}>{labelText}</span>
           )}
diff --git a/packages/next/src/views/Version/VersionPillLabel/index.css b/packages/next/src/views/Version/VersionPillLabel/index.css
index 05bc5a38060..f6c5a22db0b 100644
--- a/packages/next/src/views/Version/VersionPillLabel/index.css
+++ b/packages/next/src/views/Version/VersionPillLabel/index.css
@@ -6,18 +6,26 @@
   }
 
   .version-pill-label-text {
-    font-weight: var(--text-body-large-strong-font-weight);
+    font-weight: var(--text-body-medium-strong-font-weight);
   }
 
   .version-pill-label-date {
+    overflow: hidden;
     color: var(--color-text-secondary);
+    text-overflow: ellipsis;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
   }
 
   @media (max-width: 768px) {
     .version-pill-label {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--spacer-2);
     }
   }
 }
diff --git a/packages/richtext-lexical/src/field/Diff/converters/listitem/index.css b/packages/richtext-lexical/src/field/Diff/converters/listitem/index.css
index e6b139426da..695d3bbdd10 100644
--- a/packages/richtext-lexical/src/field/Diff/converters/listitem/index.css
+++ b/packages/richtext-lexical/src/field/Diff/converters/listitem/index.css
@@ -1,7 +1,7 @@
 @layer payload-default {
   .lexical-diff {
     ul.list-check {
-      padding-left: 0;
+      padding-inline-start: 0;
     }
 
     .checkboxItem {
@@ -16,7 +16,7 @@
     .checkboxItem__icon {
       width: var(--spacer-3);
       height: var(--spacer-3);
-      margin-right: var(--spacer-2);
+      margin-inline-end: var(--spacer-2);
       border: var(--stroke-width-small) solid var(--color-text);
       border-radius: var(--radius-medium);
       display: flex;
@@ -24,12 +24,10 @@
       justify-content: center;
       pointer-events: none;
 
-      .icon--check {
-        height: var(--spacer-2-5);
-      }
-
       &[data-match-type='create'] {
-        border-color: var(--diff-create-pill-color);
+        background-color: var(--color-bg-brand-tertiary);
+        border-color: var(--color-border-brand-strong);
+        color: var(--color-text-brand);
       }
 
       &[data-match-type='delete'] {
@@ -37,8 +35,46 @@
       }
     }
 
+    /* Override HTMLDiff generic [data-match-type] styles - specificity must beat 0,4,1 from HTMLDiff */
+    .checkboxItem__icon.checkboxItem__icon[data-enable-match='true'][data-match-type='create'],
+    .checkboxItem__icon.checkboxItem__icon[data-enable-match='true'][data-match-type='delete'] {
+      border-radius: var(--radius-medium);
+      padding: 0;
+    }
+
+    .checkboxItem__icon.checkboxItem__icon[data-enable-match='true'][data-match-type='create'] {
+      background-color: var(--color-bg-brand-tertiary);
+      color: var(--color-text-brand);
+    }
+
+    .checkboxItem__icon.checkboxItem__icon[data-enable-match='true'][data-match-type='delete'] {
+      background-color: transparent;
+      color: var(--diff-delete-pill-color);
+    }
+
     .checkboxItem--nested {
-      margin-left: var(--spacer-4);
+      margin-inline-start: var(--spacer-4);
+    }
+
+    /* Match editor's hierarchical ordered list numbering (1, A, a, I, i) */
+    ol.list-number {
+      list-style-type: decimal;
+    }
+
+    ol.list-number ol.list-number {
+      list-style-type: upper-alpha;
+    }
+
+    ol.list-number ol.list-number ol.list-number {
+      list-style-type: lower-alpha;
+    }
+
+    ol.list-number ol.list-number ol.list-number ol.list-number {
+      list-style-type: upper-roman;
+    }
+
+    ol.list-number ol.list-number ol.list-number ol.list-number ol.list-number {
+      list-style-type: lower-roman;
     }
   }
 }
diff --git a/packages/richtext-lexical/src/field/Diff/converters/relationship/index.css b/packages/richtext-lexical/src/field/Diff/converters/relationship/index.css
index 766b07915b1..f9fa9364c4e 100644
--- a/packages/richtext-lexical/src/field/Diff/converters/relationship/index.css
+++ b/packages/richtext-lexical/src/field/Diff/converters/relationship/index.css
@@ -1,68 +1,108 @@
 @layer payload-default {
   .lexical-diff .lexical-relationship-diff {
-    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-    min-width: calc(var(--spacer-5) * 5);
     max-width: fit-content;
-
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    background-color: var(--color-bg);
+    background-color: var(--color-bg-brand-tertiary);
+    outline: var(--stroke-width-small) solid var(--color-border-brand);
+    outline-offset: calc(var(--stroke-width-small) * -1);
     border-radius: var(--radius-medium);
-    border: var(--stroke-width-small) solid var(--color-border);
     position: relative;
-    font-family: var(--font-body);
-    margin-block: calc(var(--spacer-1) * 2.5);
-    max-height: calc(var(--spacer-5) * 2.5);
-    padding: var(--spacer-2-5);
+    z-index: 2;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    margin-block: var(--spacer-2);
+    padding: var(--spacer-1);
 
     &[data-match-type='create'] {
-      border-color: var(--diff-create-pill-border);
-      color: var(--diff-create-parent-color);
+      background-color: var(--diff-create-parent-bg);
+      outline-color: var(--diff-create-pill-border);
 
-      .lexical-relationship-diff__collectionLabel {
-        color: var(--diff-create-link-color);
+      .lexical-relationship-diff__pill {
+        background-color: var(--color-bg-brand);
+        color: var(--color-text-onbrand);
       }
 
-      .lexical-relationship-diff__title * {
+      .lexical-relationship-diff__info {
         color: var(--diff-create-parent-color);
       }
     }
 
     &[data-match-type='delete'] {
-      border-color: var(--diff-delete-pill-border);
-      color: var(--diff-delete-parent-color);
+      background-color: var(--diff-delete-parent-bg);
+      outline-color: var(--diff-delete-pill-border);
       text-decoration-line: none;
-      background-color: var(--diff-delete-pill-bg);
 
-      .lexical-relationship-diff__collectionLabel {
-        color: var(--diff-delete-link-color);
+      .lexical-relationship-diff__pill {
+        background-color: var(--color-bg-danger);
+        color: var(--color-text-oncomponent);
+
+        * {
+          text-decoration-line: none;
+          color: var(--color-text-oncomponent);
+          background-color: transparent;
+        }
       }
 
-      * {
-        text-decoration-line: none;
-        color: var(--diff-delete-parent-color);
+      .lexical-relationship-diff__info {
+        color: var(--color-text-danger);
+        text-decoration-line: line-through;
       }
     }
   }
 
-  .lexical-diff .lexical-relationship-diff__card {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    flex-grow: 1;
-    align-items: flex-start;
-    justify-content: space-between;
+  /* Override HTMLDiff generic [data-match-type] styles - specificity must beat 0,4,1 from HTMLDiff */
+  .html-diff
+    .lexical-relationship-diff.lexical-relationship-diff[data-enable-match='true'][data-match-type='create'],
+  .html-diff
+    .lexical-relationship-diff.lexical-relationship-diff[data-enable-match='true'][data-match-type='delete'] {
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-1);
+    text-decoration-line: none;
+  }
+
+  .html-diff
+    .lexical-relationship-diff.lexical-relationship-diff[data-enable-match='true'][data-match-type='create'] {
+    background-color: var(--diff-create-parent-bg);
+    outline-color: var(--diff-create-pill-border);
+    color: var(--diff-create-parent-color);
   }
 
-  .lexical-diff .lexical-relationship-diff__title {
-    display: flex;
-    flex-direction: row;
-    font-weight: 600;
+  .html-diff
+    .lexical-relationship-diff.lexical-relationship-diff[data-enable-match='true'][data-match-type='delete'] {
+    background-color: var(--diff-delete-parent-bg);
+    outline-color: var(--diff-delete-pill-border);
   }
 
-  .lexical-diff .lexical-relationship-diff__collectionLabel {
+  .lexical-diff .lexical-relationship-diff__pill {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--radius-medium);
+    padding-inline: var(--spacer-1);
+    background-color: var(--color-bg-brand);
+    color: var(--color-text-onbrand);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .lexical-diff .lexical-relationship-diff__info {
+    padding-inline: var(--spacer-1);
+    font-weight: var(--text-body-medium-font-weight);
+    color: var(--color-text-brand);
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+  }
+
+  @media (max-width: 768px) {
+    .lexical-diff .html-diff .lexical-relationship-diff {
+      max-width: unset;
+      display: flex;
+      border-radius: 0;
+      outline: none;
+      margin: 0;
+    }
   }
 }
diff --git a/packages/richtext-lexical/src/field/Diff/converters/relationship/index.tsx b/packages/richtext-lexical/src/field/Diff/converters/relationship/index.tsx
index 4d3d5ddcb69..431f3158a0c 100644
--- a/packages/richtext-lexical/src/field/Diff/converters/relationship/index.tsx
+++ b/packages/richtext-lexical/src/field/Diff/converters/relationship/index.tsx
@@ -4,8 +4,6 @@ import { getTranslation, type I18nClient } from '@payloadcms/translations'
 
 import './index.css'
 
-import { formatAdminURL } from 'payload/shared'
-
 import type { HTMLConvertersAsync } from '../../../../features/converters/lexicalToHtml/async/types.js'
 import type { SerializedRelationshipNode } from '../../../../types/nodeTypes.js'
 
@@ -45,36 +43,18 @@ export const RelationshipDiffHTMLConverterAsync: (args: {
           data-id={id}
           data-slug={node.relationTo}
         >
-          <div className={`${baseClass}__card`}>
-            <div className={`${baseClass}__collectionLabel`}>
-              {i18n.t('fields:labelRelationship', {
-                label: relatedCollection?.labels?.singular
-                  ? getTranslation(relatedCollection?.labels?.singular, i18n)
-                  : relatedCollection?.slug,
-              })}
-            </div>
+          {relatedCollection?.labels?.singular && (
+            <span className={`${baseClass}__pill`} data-enable-match="false">
+              {getTranslation(relatedCollection.labels.singular, i18n)}
+            </span>
+          )}
+          <strong className={`${baseClass}__info`} data-enable-match="false">
             {data &&
             relatedCollection?.admin?.useAsTitle &&
-            data[relatedCollection.admin.useAsTitle] ? (
-              <strong className={`${baseClass}__title`} data-enable-match="false">
-                <a
-                  className={`${baseClass}__link`}
-                  data-enable-match="false"
-                  href={formatAdminURL({
-                    adminRoute: req.payload.config.routes.admin,
-                    path: `/collections/${relatedCollection?.slug}/${data.id}`,
-                    serverURL: req.payload.config.serverURL,
-                  })}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  {data[relatedCollection.admin.useAsTitle]}
-                </a>
-              </strong>
-            ) : (
-              <strong>{id as string}</strong>
-            )}
-          </div>
+            data[relatedCollection.admin.useAsTitle]
+              ? data[relatedCollection.admin.useAsTitle]
+              : (id as string)}
+          </strong>
         </div>
       )
 
diff --git a/packages/richtext-lexical/src/field/Diff/converters/upload/index.css b/packages/richtext-lexical/src/field/Diff/converters/upload/index.css
index 32cd45cbe34..9c4b52bd56a 100644
--- a/packages/richtext-lexical/src/field/Diff/converters/upload/index.css
+++ b/packages/richtext-lexical/src/field/Diff/converters/upload/index.css
@@ -1,83 +1,98 @@
 @layer payload-default {
   .lexical-diff {
     .lexical-upload-diff {
-      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-      min-width: calc(var(--spacer-5) * 6.25);
+      min-width: 100%;
       max-width: fit-content;
       display: flex;
       align-items: center;
       background-color: var(--color-bg);
       border-radius: var(--radius-medium);
-      border: var(--stroke-width-small) solid var(--color-border);
+      outline: var(--stroke-width-small) solid var(--color-border);
+      outline-offset: calc(var(--stroke-width-small) * -1);
       position: relative;
-      font-family: var(--font-body);
-      margin-block: calc(var(--spacer-1) * 2.5);
-      max-height: calc(var(--spacer-4) * 2.5);
-      padding: var(--spacer-2-5);
+      z-index: 2;
+      font-family: var(--text-body-medium-font-family);
+      padding: var(--spacer-2);
 
       &[data-match-type='create'] {
-        border-color: var(--diff-create-pill-border);
+        background-color: var(--diff-create-parent-bg);
+        outline-color: var(--diff-create-pill-border);
         color: var(--diff-create-parent-color);
 
-        * {
-          color: var(--diff-create-parent-color);
+        .lexical-upload-diff__thumbnail {
+          background-color: var(--diff-create-pill-bg);
         }
 
-        .lexical-upload-diff__meta {
-          color: var(--diff-create-link-color);
-          * {
-            color: var(--diff-create-link-color);
-          }
+        .lexical-upload-diff__info {
+          color: var(--diff-create-parent-color);
         }
 
-        .lexical-upload-diff__thumbnail {
-          border-radius: 0;
-          border-color: var(--diff-create-pill-border);
-          background-color: none;
+        .lexical-upload-diff__meta {
+          color: var(--diff-create-parent-color);
         }
       }
 
       &[data-match-type='delete'] {
-        border-color: var(--diff-delete-pill-border);
         text-decoration-line: none;
+        background-color: var(--diff-delete-parent-bg);
+        outline-color: var(--diff-delete-pill-border);
         color: var(--diff-delete-parent-color);
-        background-color: var(--diff-delete-pill-bg);
 
-        .lexical-upload-diff__meta {
-          color: var(--diff-delete-link-color);
-          * {
-            color: var(--diff-delete-link-color);
-          }
+        .lexical-upload-diff__thumbnail {
+          background-color: var(--diff-delete-pill-bg);
         }
 
-        * {
-          text-decoration-line: none;
+        .lexical-upload-diff__info {
           color: var(--diff-delete-parent-color);
+
+          strong {
+            text-decoration-line: line-through;
+            text-decoration-color: var(--diff-delete-parent-color);
+          }
         }
 
-        .lexical-upload-diff__thumbnail {
-          border-radius: 0;
-          border-color: var(--diff-delete-pill-border);
-          background-color: none;
+        .lexical-upload-diff__meta {
+          text-decoration-line: line-through;
+          text-decoration-color: var(--diff-delete-parent-color);
+          color: var(--diff-delete-parent-color);
         }
       }
     }
 
+    /* Override HTMLDiff generic [data-match-type] styles - specificity must beat 0,4,1 from HTMLDiff */
+    .lexical-upload-diff.lexical-upload-diff[data-enable-match='true'][data-match-type='create'],
+    .lexical-upload-diff.lexical-upload-diff[data-enable-match='true'][data-match-type='delete'] {
+      border-radius: var(--radius-medium);
+      padding: var(--spacer-2);
+      text-decoration-line: none;
+    }
+
+    .lexical-upload-diff.lexical-upload-diff[data-enable-match='true'][data-match-type='create'] {
+      background-color: var(--diff-create-parent-bg);
+      color: var(--diff-create-parent-color);
+    }
+
+    .lexical-upload-diff.lexical-upload-diff[data-enable-match='true'][data-match-type='delete'] {
+      background-color: var(--diff-delete-parent-bg);
+      color: var(--diff-delete-parent-color);
+    }
+
     .lexical-upload-diff__card {
       display: flex;
       flex-direction: row;
       align-items: center;
       width: 100%;
+      gap: var(--spacer-2-5);
     }
 
     .lexical-upload-diff__thumbnail {
-      width: calc(var(--spacer-4) * 1.5);
-      height: calc(var(--spacer-4) * 1.5);
+      width: var(--spacer-6);
+      height: var(--spacer-6);
       position: relative;
       overflow: hidden;
       flex-shrink: 0;
-      border-radius: 0;
-      border: var(--stroke-width-small) solid var(--color-border);
+      border-radius: var(--radius-medium);
+      background-color: var(--color-bg-secondary);
 
       img,
       svg {
@@ -85,28 +100,76 @@
         object-fit: cover;
         width: 100%;
         height: 100%;
-        border-radius: 0;
       }
     }
 
     .lexical-upload-diff__info {
-      flex-grow: 1;
+      flex: 1 0 0;
       display: flex;
-      align-items: flex-start;
       flex-direction: column;
-      padding: calc(var(--spacer-1) * 1.25) calc(var(--spacer-2-5) * 1.25);
-      justify-content: space-between;
-      font-weight: 400;
+      justify-content: center;
+      gap: var(--spacer-1);
+      font-size: var(--text-body-medium-font-size);
+      line-height: var(--text-body-medium-line-height);
+      overflow: hidden;
+      min-width: var(--stroke-width-small);
 
       strong {
         font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
 
     .lexical-upload-diff__meta {
+      font-size: var(--text-body-medium-font-size);
+      color: var(--color-text-secondary);
+      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      white-space: nowrap;
+    }
+
+    /* Style uploads based on ancestor data-match-type (e.g. from diff wrappers) */
+    [data-match-type='create'] .lexical-upload-diff__info {
+      color: var(--diff-create-parent-color);
+    }
+
+    [data-match-type='create'] .lexical-upload-diff__meta.lexical-upload-diff__meta {
+      color: var(--diff-create-parent-color);
+    }
+
+    [data-match-type='create'] .lexical-upload-diff__thumbnail {
+      background-color: var(--diff-create-pill-bg);
+    }
+
+    [data-match-type='create'] .lexical-upload-diff {
+      background-color: var(--diff-create-parent-bg);
+      outline-color: var(--diff-create-pill-border);
+    }
+
+    [data-match-type='delete'] .lexical-upload-diff__info {
+      color: var(--diff-delete-parent-color);
+
+      strong {
+        text-decoration-line: line-through;
+        text-decoration-color: var(--diff-delete-parent-color);
+      }
+    }
+
+    [data-match-type='delete'] .lexical-upload-diff__meta.lexical-upload-diff__meta {
+      text-decoration-line: line-through;
+      text-decoration-color: var(--diff-delete-parent-color);
+      color: var(--diff-delete-parent-color);
+    }
+
+    [data-match-type='delete'] .lexical-upload-diff__thumbnail {
+      background-color: var(--diff-delete-pill-bg);
+    }
+
+    [data-match-type='delete'] .lexical-upload-diff {
+      background-color: var(--diff-delete-parent-bg);
+      outline-color: var(--diff-delete-pill-border);
     }
   }
 }
diff --git a/packages/richtext-lexical/src/field/Diff/converters/upload/index.tsx b/packages/richtext-lexical/src/field/Diff/converters/upload/index.tsx
index 126fd8616d1..5f76f60eaa8 100644
--- a/packages/richtext-lexical/src/field/Diff/converters/upload/index.tsx
+++ b/packages/richtext-lexical/src/field/Diff/converters/upload/index.tsx
@@ -18,7 +18,7 @@ const baseClass = 'lexical-upload-diff'
 export const UploadDiffHTMLConverterAsync: (args: {
   i18n: I18nClient
   req: PayloadRequest
-}) => HTMLConvertersAsync<SerializedUploadNode> = () => {
+}) => HTMLConvertersAsync<SerializedUploadNode> = ({ i18n, req }) => {
   return {
     upload: async ({ node, populate, providedCSSString }) => {
       const uploadNode = node as UploadDataImproved
@@ -54,6 +54,10 @@ export const UploadDiffHTMLConverterAsync: (args: {
         .update(JSON.stringify(node.fields ?? {}))
         .digest('hex')
 
+      const filename =
+        uploadDoc?.filename ||
+        `${i18n.t('general:untitled')} - ID: ${typeof uploadNode.value === 'object' ? uploadNode.value : uploadNode.value}`
+
       const JSX = (
         <div
           className={`${baseClass}${providedCSSString}`}
@@ -69,7 +73,7 @@ export const UploadDiffHTMLConverterAsync: (args: {
               {thumbnailSRC?.length ? <img alt={alt} src={thumbnailSRC} /> : <File />}
             </div>
             <div className={`${baseClass}__info`} data-enable-match="false">
-              <strong>{uploadDoc?.filename}</strong>
+              <strong>{filename}</strong>
               <div className={`${baseClass}__meta`}>
                 {formatFilesize(uploadDoc?.filesize)}
                 {typeof uploadDoc?.width === 'number' && typeof uploadDoc?.height === 'number' && (
diff --git a/packages/richtext-lexical/src/field/Diff/index.css b/packages/richtext-lexical/src/field/Diff/index.css
index a5f2430a970..1ae4176f1b5 100644
--- a/packages/richtext-lexical/src/field/Diff/index.css
+++ b/packages/richtext-lexical/src/field/Diff/index.css
@@ -1,101 +1,156 @@
 @layer payload-default {
   .lexical-diff .field-diff-content {
     .html-diff {
-      font-family: var(--font-serif);
+      font-family: var(--text-body-large-font-family);
       font-size: var(--text-body-large-font-size);
+      font-weight: var(--text-body-large-font-weight);
       line-height: var(--text-body-large-line-height);
-      letter-spacing: 0.02em;
+      letter-spacing: -0.0325px;
     }
 
     blockquote {
       font-size: var(--text-body-large-font-size);
-      line-height: var(--text-body-large-line-height);
-      margin-block: var(--spacer-3);
-      margin-inline: 0;
+      line-height: 1.5;
+      letter-spacing: normal;
+      margin-inline: var(--spacer-1);
       padding-inline-start: var(--spacer-2-5);
       padding-block: var(--spacer-1);
       position: relative;
+      border-inline-start: var(--stroke-width-medium) solid currentColor;
+    }
 
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        inset-inline-start: 0;
-        width: var(--spacer-1);
-        background-color: var(--color-bg-secondary);
-      }
-
-      &:has([data-match-type='create'])::after {
-        background-color: var(--color-bg-success-tertiary);
-      }
+    .html-diff:has([data-match-type='create']) blockquote {
+      color: var(--diff-create-pill-color);
+    }
 
-      &:has([data-match-type='delete'])::after {
-        background-color: var(--color-bg-danger-tertiary);
-      }
+    .html-diff:has([data-match-type='delete']) blockquote {
+      color: var(--diff-delete-pill-color);
     }
 
     a {
-      border-bottom: var(--stroke-width-small) dotted;
-      text-decoration: none;
+      color: var(--color-text-brand);
+      text-decoration: underline;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-weight: 550;
+      line-height: 1.2;
     }
 
     h1 {
-      padding: calc(var(--spacer-2) * 1.75) 0px calc(var(--spacer-2) * 1.375);
-      line-height: var(--text-heading-large-line-height);
-      font-weight: 600;
-      font-size: var(--text-heading-large-font-size);
-      font-family: var(--font-body);
+      font-size: 2rem;
+      letter-spacing: -0.544px;
     }
     h2 {
-      padding: calc(var(--spacer-2) * 1.75) 0px calc(var(--spacer-1) * 2.5);
-      line-height: var(--text-heading-medium-line-height);
-      font-weight: 600;
-      font-size: var(--text-heading-medium-font-size);
-      font-family: var(--font-body);
+      font-size: 1.5rem;
+      line-height: 2rem;
+      letter-spacing: var(--text-heading-large-letter-spacing);
     }
     h3 {
-      padding: var(--spacer-2-5) 0px calc(var(--spacer-1) * 2.25);
-      line-height: var(--text-heading-small-line-height);
-      font-weight: 600;
-      font-size: var(--text-heading-small-font-size);
-      font-family: var(--font-body);
+      font-size: 1.25rem;
+      letter-spacing: -0.34px;
     }
     h4 {
-      padding: var(--spacer-2) 0px calc(var(--spacer-1) * 1.75);
-      line-height: var(--text-body-large-line-height);
-      font-weight: 600;
-      font-size: var(--text-body-large-font-size);
-      font-family: var(--font-body);
+      font-size: 1rem;
+      letter-spacing: -0.272px;
     }
     h5 {
-      padding: calc(var(--spacer-1) * 1.5) 0px calc(var(--spacer-1) * 1.5);
-      line-height: var(--text-body-medium-line-height);
-      font-weight: 600;
-      font-size: var(--text-body-medium-font-size);
-      font-family: var(--font-body);
+      font-size: 0.8125rem;
+      letter-spacing: -0.221px;
     }
-
     h6 {
-      padding: calc(var(--spacer-2) * 1.375) 0px calc(var(--spacer-1) * 1.25);
-      line-height: var(--text-body-small-line-height);
-      font-weight: 600;
-      font-size: var(--text-body-small-font-size);
-      font-family: var(--font-body);
+      font-size: 0.6875rem;
+      letter-spacing: -0.187px;
+    }
+
+    > .html-diff > :first-child {
+      margin-top: 0;
+    }
+
+    > .html-diff > :last-child {
+      margin-bottom: 0;
     }
 
     p {
-      padding: var(--spacer-2) 0 var(--spacer-2);
+      margin: 0;
+    }
 
-      &:first-child {
-        padding: 0 0 var(--spacer-2);
-      }
+    code {
+      border: var(--stroke-width-small) solid var(--color-border);
+      color: var(--color-text);
+      padding: var(--spacer-1);
+      font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+      font-size: var(--text-body-medium-font-size);
+      font-weight: var(--text-body-medium-font-weight);
+      border-radius: var(--radius-small);
+      box-decoration-break: clone;
+      -webkit-box-decoration-break: clone;
+    }
+
+    hr {
+      margin: 0;
+      border: none;
+      border-top: var(--stroke-width-small) solid currentColor;
+    }
+
+    .html-diff:has([data-match-type='create']) hr {
+      color: var(--diff-create-pill-color);
+    }
+
+    .html-diff:has([data-match-type='delete']) hr {
+      color: var(--diff-delete-pill-color);
+    }
+
+    ul {
+      list-style: disc;
+      padding: 0;
+      margin: 0;
     }
 
-    ul,
     ol {
-      padding-top: var(--spacer-2);
-      padding-bottom: var(--spacer-2);
+      list-style: decimal;
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      font-family: var(--text-body-large-font-family);
+      font-size: var(--text-body-large-font-size);
+      margin-block: 0 var(--spacer-1);
+      margin-inline-start: var(--spacer-4);
+      position: relative;
+      z-index: 0;
+
+      &:has(> [data-match-type='create'])::before,
+      &:has(> [data-match-type='delete'])::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        inset-inline-start: calc(var(--spacer-4) * -1);
+        border-radius: var(--radius-medium);
+        z-index: -1;
+      }
+
+      &:has(> [data-match-type='create'])::before {
+        background-color: var(--diff-create-pill-bg);
+      }
+
+      &:has(> [data-match-type='delete'])::before {
+        background-color: var(--diff-delete-pill-bg);
+      }
+
+      &.nestedListItem:last-child {
+        margin-block-end: 0;
+      }
+
+      &:last-child {
+        margin-block-end: 0;
+      }
     }
   }
 }
diff --git a/packages/translations/src/clientKeys.ts b/packages/translations/src/clientKeys.ts
index c92efaf809c..b9ab7632491 100644
--- a/packages/translations/src/clientKeys.ts
+++ b/packages/translations/src/clientKeys.ts
@@ -185,6 +185,7 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'general:by',
   'general:cancel',
   'general:changesNotSaved',
+  'general:checked',
   'general:close',
   'general:collapse',
   'general:collection',
@@ -394,6 +395,7 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'general:user',
   'general:username',
   'general:unauthorized',
+  'general:unchecked',
   'general:unlock',
   'general:unsavedChanges',
   'general:unsavedChangesDuplicate',
diff --git a/packages/translations/src/languages/ar.ts b/packages/translations/src/languages/ar.ts
index 9a77c7cb02a..a07bad91bef 100644
--- a/packages/translations/src/languages/ar.ts
+++ b/packages/translations/src/languages/ar.ts
@@ -232,6 +232,7 @@ export const arTranslations: DefaultTranslationsObject = {
     by: 'بواسطة',
     cancel: 'إلغاء',
     changesNotSaved: 'لم يتمّ حفظ التّغييرات. إن غادرت الآن ، ستفقد تغييراتك.',
+    checked: 'تم التحقق',
     clear: 'واضح',
     clearAll: 'امسح الكل',
     close: 'إغلاق',
@@ -444,6 +445,7 @@ export const arTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} تم نقلها إلى سلة المهملات.',
     true: 'صحيح',
     unauthorized: 'غير مصرح به',
+    unchecked: 'غير محدد',
     unlock: 'افتح',
     unsavedChanges: 'لديك تغييرات غير محفوظة. قم بالحفظ أو التجاهل قبل المتابعة.',
     unsavedChangesDuplicate: 'لديك تغييرات لم يتم حفظها. هل تريد الاستمرار في الاستنساخ؟',
diff --git a/packages/translations/src/languages/az.ts b/packages/translations/src/languages/az.ts
index aaa88bb599e..7e903abbc35 100644
--- a/packages/translations/src/languages/az.ts
+++ b/packages/translations/src/languages/az.ts
@@ -241,6 +241,7 @@ export const azTranslations: DefaultTranslationsObject = {
     cancel: 'Ləğv et',
     changesNotSaved:
       'Dəyişiklikləriniz saxlanılmayıb. İndi çıxsanız, dəyişikliklərinizi itirəcəksiniz.',
+    checked: 'Yoxlanılıb',
     clear:
       'Payload kontekstində orijinal mətnin mənasını qoruya. İşte Payload terminləri siyahısıdır ki, onlar üzərində çox xüsusi mənalar gəlir:\n    - Kolleksiya: Kolleksiya sənədlərin hamıya ortaq struktur və məqsəd sərbəst olan bir qrupdur. Kolleksiyalar Payload-da məzmunu təşkil etmək və idarə etmək üçün istifadə edilir.\n    - Sahə: Sahə',
     clearAll: 'Hamısını təmizlə',
@@ -457,6 +458,7 @@ export const azTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} zibilə köçürüldü.',
     true: 'Doğru',
     unauthorized: 'İcazəsiz',
+    unchecked: 'Seçilməmiş',
     unlock: 'Açın',
     unsavedChanges:
       'Sizin saxlanılmamış dəyişiklikləriniz var. Davam etmədən əvvəl saxlayın və ya atın.',
diff --git a/packages/translations/src/languages/bg.ts b/packages/translations/src/languages/bg.ts
index 6c43f7c47a8..cd44d648a07 100644
--- a/packages/translations/src/languages/bg.ts
+++ b/packages/translations/src/languages/bg.ts
@@ -238,6 +238,7 @@ export const bgTranslations: DefaultTranslationsObject = {
     by: 'От',
     cancel: 'Отмени',
     changesNotSaved: 'Промените ти не са запазени. Ако напуснеш сега, ще ги загубиш.',
+    checked: 'Проверено',
     clear: 'Ясно',
     clearAll: 'Изчисти всичко',
     close: 'Затвори',
@@ -453,6 +454,7 @@ export const bgTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} преместени в кошчето.',
     true: 'Вярно',
     unauthorized: 'Неоторизиран',
+    unchecked: 'Непроверен',
     unlock: 'Отключете',
     unsavedChanges: 'Имате незапазени промени. Запазете или отхвърлете преди да продължите.',
     unsavedChangesDuplicate: 'Имаш незапазени промени. Искаш ли да продължиш да дупликираш?',
diff --git a/packages/translations/src/languages/bnBd.ts b/packages/translations/src/languages/bnBd.ts
index c4819def3b0..ad2beb5e4f6 100644
--- a/packages/translations/src/languages/bnBd.ts
+++ b/packages/translations/src/languages/bnBd.ts
@@ -242,6 +242,7 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     cancel: 'বাতিল করুন',
     changesNotSaved:
       'আপনার পরিবর্তনগুলি সংরক্ষণ করা হয়নি। আপনি যদি এখন চলে যান, তাহলে আপনার পরিবর্তনগুলি হারিয়ে যাবে।',
+    checked: 'পরীক্ষিত',
     clear:
       'মূল পাঠের অর্থ সম্মান করুন পেলোড প্রসঙ্গে। এখানে পেলোড নির্দিষ্ট বিশেষ অর্থ বহন করে এরকম একটি সাধারণ টার্মের তালিকা:\n    - সংগ্রহ',
     clearAll: 'সমস্ত সাফ করুন',
@@ -459,6 +460,7 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} ট্র্যাশে মুভ করা হয়েছে।',
     true: 'সত্য',
     unauthorized: 'অননুমোদিত',
+    unchecked: 'অচিহ্নিত',
     unlock: 'আনলক করুন',
     unsavedChanges:
       'আপনার কাছে সংরক্ষণ না করা পরিবর্তনগুলি রয়েছে। চালিয়ে যাওয়ার আগে সংরক্ষণ করুন বা বাতিল করুন।',
diff --git a/packages/translations/src/languages/bnIn.ts b/packages/translations/src/languages/bnIn.ts
index 0392c3e2d22..45b3e06c39c 100644
--- a/packages/translations/src/languages/bnIn.ts
+++ b/packages/translations/src/languages/bnIn.ts
@@ -242,6 +242,7 @@ export const bnInTranslations: DefaultTranslationsObject = {
     cancel: 'বাতিল করুন',
     changesNotSaved:
       'আপনার পরিবর্তনগুলি সংরক্ষণ করা হয়নি। আপনি যদি এখন চলে যান, তাহলে আপনার পরিবর্তনগুলি হারিয়ে যাবে।',
+    checked: 'পরীক্ষিত',
     clear: 'স্পষ্ট',
     clearAll: 'সমস্ত সাফ করুন',
     close: 'বন্ধ করুন',
@@ -458,6 +459,7 @@ export const bnInTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} ট্র্যাশে সরানো হয়েছে।',
     true: 'সত্য',
     unauthorized: 'অননুমোদিত',
+    unchecked: 'অচিহ্নিত',
     unlock: 'আনলক করুন',
     unsavedChanges:
       'আপনার কাছে সংরক্ষণ না করা পরিবর্তনগুলি রয়েছে। চালিয়ে যাওয়ার আগে সংরক্ষণ করুন বা বাতিল করুন।',
diff --git a/packages/translations/src/languages/ca.ts b/packages/translations/src/languages/ca.ts
index 8df55d9034e..0c2ddd0856e 100644
--- a/packages/translations/src/languages/ca.ts
+++ b/packages/translations/src/languages/ca.ts
@@ -240,6 +240,7 @@ export const caTranslations: DefaultTranslationsObject = {
     by: 'Per',
     cancel: 'Cancel·la',
     changesNotSaved: 'El teu document té canvis no desats. Si continues, els canvis es perdran.',
+    checked: 'Comprovat',
     clear: 'Clar',
     clearAll: 'Esborra-ho tot',
     close: 'Tanca',
@@ -456,6 +457,7 @@ export const caTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: "{{count}} {{label}} s'ha mogut a la paperera.",
     true: 'Veritat',
     unauthorized: 'No autoritzat',
+    unchecked: 'Desmarcat',
     unlock: 'Desbloqueja',
     unsavedChanges: 'Tens canvis no desats. Vols continuar sense desar?',
     unsavedChangesDuplicate: 'Tens canvis no desats. Vols duplicar sense desar?',
diff --git a/packages/translations/src/languages/cs.ts b/packages/translations/src/languages/cs.ts
index 69881fde34c..3d4fee09cfe 100644
--- a/packages/translations/src/languages/cs.ts
+++ b/packages/translations/src/languages/cs.ts
@@ -238,6 +238,7 @@ export const csTranslations: DefaultTranslationsObject = {
     by: 'Od',
     cancel: 'Zrušit',
     changesNotSaved: 'Vaše změny nebyly uloženy. Pokud teď odejdete, ztratíte své změny.',
+    checked: 'Zkontrolováno',
     clear: 'Jasný',
     clearAll: 'Vymazat vše',
     close: 'Zavřít',
@@ -452,6 +453,7 @@ export const csTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} přesunuto do koše.',
     true: 'Pravda',
     unauthorized: 'Neoprávněný',
+    unchecked: 'Nezaškrtnuto',
     unlock: 'Odemknout',
     unsavedChanges: 'Máte neuložené změny. Uložte nebo zahoďte před pokračováním.',
     unsavedChangesDuplicate: 'Máte neuložené změny. Chtěli byste pokračovat v duplikování?',
diff --git a/packages/translations/src/languages/da.ts b/packages/translations/src/languages/da.ts
index 9fe31392171..2f379c9678c 100644
--- a/packages/translations/src/languages/da.ts
+++ b/packages/translations/src/languages/da.ts
@@ -239,6 +239,7 @@ export const daTranslations: DefaultTranslationsObject = {
     cancel: 'Anuller',
     changesNotSaved:
       'Dine ændringer er ikke blevet gemt. Hvis du forlader siden, vil din ændringer gå tabt.',
+    checked: 'Kontrolleret',
     clear: 'Klar',
     clearAll: 'Ryd alt',
     close: 'Luk',
@@ -454,6 +455,7 @@ export const daTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} flyttet til papirkurven.',
     true: 'Sandt',
     unauthorized: 'Uautoriseret',
+    unchecked: 'Ikke markeret',
     unlock: 'Oplås',
     unsavedChanges: 'Du har ikke gemte ændringer. Gem eller kassér før fortsættelse.',
     unsavedChangesDuplicate: 'Du har ikke-gemte ændringer. Vil du fortsætte med at duplikere?',
diff --git a/packages/translations/src/languages/de.ts b/packages/translations/src/languages/de.ts
index 6f91f9ce695..e7b2320e3b7 100644
--- a/packages/translations/src/languages/de.ts
+++ b/packages/translations/src/languages/de.ts
@@ -247,6 +247,7 @@ export const deTranslations: DefaultTranslationsObject = {
     cancel: 'Abbrechen',
     changesNotSaved:
       'Deine Änderungen wurden nicht gespeichert. Wenn du diese Seite verlässt, gehen deine Änderungen verloren.',
+    checked: 'Überprüft',
     clear: 'Leeren',
     clearAll: 'Alles leeren',
     close: 'Schließen',
@@ -462,6 +463,7 @@ export const deTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} wurde in den Papierkorb verschoben.',
     true: 'Wahr',
     unauthorized: 'Nicht autorisiert',
+    unchecked: 'Nicht ausgewählt',
     unlock: 'Entsperren',
     unsavedChanges:
       'Du hast ungespeicherte Änderungen. Speichere oder verwerfe sie, bevor du fortfährst.',
diff --git a/packages/translations/src/languages/en.ts b/packages/translations/src/languages/en.ts
index ddf4c08a5a6..38c7268f677 100644
--- a/packages/translations/src/languages/en.ts
+++ b/packages/translations/src/languages/en.ts
@@ -240,6 +240,7 @@ export const enTranslations = {
     cancel: 'Cancel',
     changesNotSaved:
       'Your changes have not been saved. If you leave now, you will lose your changes.',
+    checked: 'Checked',
     clear: 'Clear',
     clearAll: 'Clear All',
     close: 'Close',
@@ -454,6 +455,7 @@ export const enTranslations = {
     trashedCountSuccessfully: '{{count}} {{label}} moved to trash.',
     true: 'True',
     unauthorized: 'Unauthorized',
+    unchecked: 'Unchecked',
     unlock: 'Unlock',
     unsavedChanges: 'You have unsaved changes. Save or discard before continuing.',
     unsavedChangesDuplicate: 'You have unsaved changes. Would you like to continue to duplicate?',
diff --git a/packages/translations/src/languages/es.ts b/packages/translations/src/languages/es.ts
index fccf168c32a..ba246fe7b0d 100644
--- a/packages/translations/src/languages/es.ts
+++ b/packages/translations/src/languages/es.ts
@@ -243,6 +243,7 @@ export const esTranslations: DefaultTranslationsObject = {
     by: 'Por',
     cancel: 'Cancelar',
     changesNotSaved: 'Tus cambios no han sido guardados. Si sales ahora, se perderán tus cambios.',
+    checked: 'Comprobado',
     clear: 'Claro',
     clearAll: 'Limpiar todo',
     close: 'Cerrar',
@@ -459,6 +460,7 @@ export const esTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} movidos a la papelera.',
     true: 'Verdadero',
     unauthorized: 'No autorizado',
+    unchecked: 'No seleccionado',
     unlock: 'Desbloquear',
     unsavedChanges: 'Tienes cambios sin guardar. Guarda o descarta antes de continuar.',
     unsavedChangesDuplicate: 'Tienes cambios sin guardar. ¿Deseas continuar con la duplicación?',
diff --git a/packages/translations/src/languages/et.ts b/packages/translations/src/languages/et.ts
index 943a33254c3..cd229510290 100644
--- a/packages/translations/src/languages/et.ts
+++ b/packages/translations/src/languages/et.ts
@@ -238,6 +238,7 @@ export const etTranslations: DefaultTranslationsObject = {
     by: 'Autor:',
     cancel: 'Tühista',
     changesNotSaved: 'Teie muudatusi pole salvestatud. Kui lahkute praegu, kaotate oma muudatused.',
+    checked: 'Kontrollitud',
     clear: 'Selge',
     clearAll: 'Tühjenda kõik',
     close: 'Sulge',
@@ -450,6 +451,7 @@ export const etTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} kanti prügikasti.',
     true: 'Tõene',
     unauthorized: 'Volitamata',
+    unchecked: 'Märkimata',
     unlock: 'Avage lukk',
     unsavedChanges: 'Teil on salvestamata muudatusi. Salvestage või tühistage enne jätkamist.',
     unsavedChangesDuplicate: 'Teil on salvestamata muudatusi. Kas soovite jätkata dubleerimisega?',
diff --git a/packages/translations/src/languages/fa.ts b/packages/translations/src/languages/fa.ts
index b335e4ab689..9951b609cf8 100644
--- a/packages/translations/src/languages/fa.ts
+++ b/packages/translations/src/languages/fa.ts
@@ -234,6 +234,7 @@ export const faTranslations: DefaultTranslationsObject = {
     cancel: 'انصراف',
     changesNotSaved:
       'تغییرات شما ذخیره نشده‌اند. در صورت خروج از این صفحه، این تغییرات از بین خواهند رفت.',
+    checked: 'بررسی شد',
     clear: 'پاک کردن',
     clearAll: 'پاک کردن همه',
     close: 'بستن',
@@ -446,6 +447,7 @@ export const faTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} به سطل زباله منتقل شد.',
     true: 'بله',
     unauthorized: 'غیرمجاز',
+    unchecked: 'لغو انتخاب',
     unlock: 'باز کردن',
     unsavedChanges: 'تغییرات ذخیره نشده‌ای دارید. قبل از ادامه، آن‌ها را ذخیره یا لغو کنید.',
     unsavedChangesDuplicate:
diff --git a/packages/translations/src/languages/fr.ts b/packages/translations/src/languages/fr.ts
index 9ed8ed52c4e..d3706b1b7b9 100644
--- a/packages/translations/src/languages/fr.ts
+++ b/packages/translations/src/languages/fr.ts
@@ -249,6 +249,7 @@ export const frTranslations: DefaultTranslationsObject = {
     cancel: 'Annuler',
     changesNotSaved:
       'Vos modifications n’ont pas été enregistrées. Vous perdrez vos modifications si vous quittez maintenant.',
+    checked: 'Vérifié',
     clear: 'Clair',
     clearAll: 'Tout effacer',
     close: 'Fermer',
@@ -464,6 +465,7 @@ export const frTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} déplacé à la corbeille.',
     true: 'Vrai',
     unauthorized: 'Non autorisé',
+    unchecked: 'Non coché',
     unlock: 'Déverrouiller',
     unsavedChanges:
       'Vous avez des modifications non enregistrées. Enregistrez ou supprimez avant de continuer.',
diff --git a/packages/translations/src/languages/he.ts b/packages/translations/src/languages/he.ts
index ae3a9fbff28..966f06f0219 100644
--- a/packages/translations/src/languages/he.ts
+++ b/packages/translations/src/languages/he.ts
@@ -230,6 +230,7 @@ export const heTranslations: DefaultTranslationsObject = {
     by: 'על ידי',
     cancel: 'ביטול',
     changesNotSaved: 'השינויים שלך לא נשמרו. אם תצא כעת, תאבד את השינויים שלך.',
+    checked: 'נבדק',
     clear:
       'בהתחשב במשמעות של הטקסט המקורי בהקשר של Payload. הנה רשימה של מונחים מקוריים של Payload שנושאים משמעויות מסוימות:\n- אוסף: אוסף הוא קבוצה של מסמכים ששותפים למבנה ולמטרה משות',
     clearAll: 'נקה הכל',
@@ -441,6 +442,7 @@ export const heTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} הועברו לפח.',
     true: 'True',
     unauthorized: 'אין הרשאה',
+    unchecked: 'לא מסומן',
     unlock: 'שחרר',
     unsavedChanges: 'יש לך שינויים שלא נשמרו. שמור או מחק לפני שתמשיך.',
     unsavedChangesDuplicate: 'יש לך שינויים שלא נשמרו. האם ברצונך להמשיך לשכפל?',
diff --git a/packages/translations/src/languages/hr.ts b/packages/translations/src/languages/hr.ts
index 0ee66c741b4..c68b7768dcf 100644
--- a/packages/translations/src/languages/hr.ts
+++ b/packages/translations/src/languages/hr.ts
@@ -239,6 +239,7 @@ export const hrTranslations: DefaultTranslationsObject = {
     by: 'Od strane',
     cancel: 'Otkaži',
     changesNotSaved: 'Vaše promjene nisu spremljene. Ako izađete sada, izgubit ćete promjene.',
+    checked: 'Provjereno',
     clear: 'Jasan',
     clearAll: 'Očisti sve',
     close: 'Zatvori',
@@ -453,6 +454,7 @@ export const hrTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} premješteno u smeće.',
     true: 'Istinito',
     unauthorized: 'Neovlašteno',
+    unchecked: 'Neoznačeno',
     unlock: 'Otključaj',
     unsavedChanges: 'Imate nespremljene promjene. Spremite ili odbacite prije nastavka.',
     unsavedChangesDuplicate: 'Imate nespremljene promjene. Želite li nastaviti s dupliciranjem?',
diff --git a/packages/translations/src/languages/hu.ts b/packages/translations/src/languages/hu.ts
index baa717f410c..dea3d2124aa 100644
--- a/packages/translations/src/languages/hu.ts
+++ b/packages/translations/src/languages/hu.ts
@@ -243,6 +243,7 @@ export const huTranslations: DefaultTranslationsObject = {
     cancel: 'Mégsem',
     changesNotSaved:
       'A módosítások nem lettek mentve. Ha most távozik, elveszíti a változtatásokat.',
+    checked: 'Ellenőrizve',
     clear: 'Tiszta',
     clearAll: 'Törölj mindent',
     close: 'Bezárás',
@@ -458,6 +459,7 @@ export const huTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} átkerült a szemeteskukába.',
     true: 'Igaz',
     unauthorized: 'Jogosulatlan',
+    unchecked: 'Nincs bejelölve',
     unlock: 'Feloldás',
     unsavedChanges: 'Vannak mentetlen változtatásai. Mentsen vagy dobja el mielőtt folytatja.',
     unsavedChangesDuplicate: 'Nem mentett módosításai vannak. Szeretné folytatni a duplikációt?',
diff --git a/packages/translations/src/languages/hy.ts b/packages/translations/src/languages/hy.ts
index fb5404ab1e8..48ff02b88ba 100644
--- a/packages/translations/src/languages/hy.ts
+++ b/packages/translations/src/languages/hy.ts
@@ -237,6 +237,7 @@ export const hyTranslations: DefaultTranslationsObject = {
     cancel: 'Չեղարկել',
     changesNotSaved:
       'Ձեր փոփոխությունները չեն պահպանվել։ Եթե հիմա հեռանաք, կկորցնեք չպահպանված փոփոխությունները։',
+    checked: 'Ստուգված',
     clear:
       'Հիմնական տեքստի իմաստը պետք է պահպանվի Payload կոնտեքստի մեջ: Այս այս այստեղ են հաճախակի',
     clearAll: 'Մաքրել բոլորը',
@@ -454,6 +455,7 @@ export const hyTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} տեղափոխվել է աղբարկղում։',
     true: 'Ճիշտ',
     unauthorized: 'Չթույլատրված',
+    unchecked: 'Չնշված',
     unlock: 'Բացարձակել',
     unsavedChanges:
       'Դուք ունեք չպահպանված փոփոխություններ։ Պահպանեք կամ հեռացեք նախքան շարունակելը։',
diff --git a/packages/translations/src/languages/id.ts b/packages/translations/src/languages/id.ts
index a34231b77b6..d8311838505 100644
--- a/packages/translations/src/languages/id.ts
+++ b/packages/translations/src/languages/id.ts
@@ -241,6 +241,7 @@ export const idTranslations: DefaultTranslationsObject = {
     cancel: 'Batal',
     changesNotSaved:
       'Perubahan Anda belum disimpan. Jika Anda pergi sekarang, Anda akan kehilangan perubahan Anda.',
+    checked: 'Diperiksa',
     clear: 'Hapus',
     clearAll: 'Hapus Semua',
     close: 'Tutup',
@@ -456,6 +457,7 @@ export const idTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} dipindahkan ke tempat sampah.',
     true: 'Benar',
     unauthorized: 'Tidak Sah',
+    unchecked: 'Belum dicentang',
     unlock: 'Buka Kunci',
     unsavedChanges:
       'Anda memiliki perubahan yang belum disimpan. Simpan atau buang sebelum melanjutkan.',
diff --git a/packages/translations/src/languages/is.ts b/packages/translations/src/languages/is.ts
index b79f7093432..a8d73cf194d 100644
--- a/packages/translations/src/languages/is.ts
+++ b/packages/translations/src/languages/is.ts
@@ -239,6 +239,7 @@ export const isTranslations: DefaultTranslationsObject = {
     cancel: 'Hætta við',
     changesNotSaved:
       'Breytingarnar þínar hafa ekki verið vistaðar. Ef þú ferð núna muntu missa breytingarnar þínar.',
+    checked: 'Staðfest',
     clear: 'Hreinsa',
     clearAll: 'Hreinsa allt',
     close: 'Loka',
@@ -451,6 +452,7 @@ export const isTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} færð í rusl.',
     true: 'Satt',
     unauthorized: 'Óheimilt',
+    unchecked: 'Óhakið',
     unlock: 'Opnaðu',
     unsavedChanges:
       'Þú ert með óvistaðar breytingar. Vistaðu eða hættu við áður en þú heldur áfram.',
diff --git a/packages/translations/src/languages/it.ts b/packages/translations/src/languages/it.ts
index 61faf39e3db..dba9169b932 100644
--- a/packages/translations/src/languages/it.ts
+++ b/packages/translations/src/languages/it.ts
@@ -243,6 +243,7 @@ export const itTranslations: DefaultTranslationsObject = {
     by: 'Da',
     cancel: 'Cancella',
     changesNotSaved: 'Le tue modifiche non sono state salvate. Se esci ora, verranno perse.',
+    checked: 'Verificato',
     clear: 'Chiara',
     clearAll: 'Cancella Tutto',
     close: 'Chiudere',
@@ -458,6 +459,7 @@ export const itTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} spostati nel cestino.',
     true: 'Vero',
     unauthorized: 'Non autorizzato',
+    unchecked: 'Non selezionato',
     unlock: 'Sblocca',
     unsavedChanges: 'Hai delle modifiche non salvate. Salva o scarta prima di continuare.',
     unsavedChangesDuplicate: 'Sono presenti modifiche non salvate. Vuoi continuare a duplicare?',
diff --git a/packages/translations/src/languages/ja.ts b/packages/translations/src/languages/ja.ts
index 991d7332ff5..84e7d01b5a6 100644
--- a/packages/translations/src/languages/ja.ts
+++ b/packages/translations/src/languages/ja.ts
@@ -241,6 +241,7 @@ export const jaTranslations: DefaultTranslationsObject = {
     by: '〜によって',
     cancel: 'キャンセル',
     changesNotSaved: '未保存の変更があります。このまま画面を離れると内容が失われます。',
+    checked: '確認済み',
     clear: 'クリア',
     clearAll: 'すべてクリア',
     close: '閉じる',
@@ -454,6 +455,7 @@ export const jaTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}}がゴミ箱に移動しました。',
     true: 'true',
     unauthorized: '未認証',
+    unchecked: '未選択',
     unlock: 'アンロック',
     unsavedChanges: '保存されていない変更があります。続行する前に保存または破棄してください。',
     unsavedChangesDuplicate: '未保存の変更があります。複製を続けますか？',
diff --git a/packages/translations/src/languages/ko.ts b/packages/translations/src/languages/ko.ts
index 820402d566f..60465b2a27d 100644
--- a/packages/translations/src/languages/ko.ts
+++ b/packages/translations/src/languages/ko.ts
@@ -237,6 +237,7 @@ export const koTranslations: DefaultTranslationsObject = {
     by: '작성자',
     cancel: '취소',
     changesNotSaved: '변경 사항이 저장되지 않았습니다. 지금 떠나면 변경 사항을 잃게 됩니다.',
+    checked: '확인됨',
     clear:
       '페이로드의 맥락 내에서 원문의 의미를 존중하십시오. 다음은 페이로드에서 사용되는 특정 의미를 내포하는 일반적인 페이로드 용어 목록입니다: \n- Collection: 컬렉션은 공통의 구조와 목적을 공유하는 문서의 그룹입니다. 컬렉션은 페이로드에서 콘텐츠를 정리하고 관리하는 데 사용됩니다.\n- Field: 필드는 컬렉',
     clearAll: '모두 지우기',
@@ -452,6 +453,7 @@ export const koTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}}가 휴지통으로 이동했습니다.',
     true: '참',
     unauthorized: '권한 없음',
+    unchecked: '선택되지 않음',
     unlock: '잠금 해제',
     unsavedChanges: '저장되지 않은 변경 사항이 있습니다. 계속하기 전에 저장하거나 무시하십시오.',
     unsavedChangesDuplicate: '저장되지 않은 변경 사항이 있습니다. 복제를 계속하시겠습니까?',
diff --git a/packages/translations/src/languages/lt.ts b/packages/translations/src/languages/lt.ts
index cf95f1f206f..69b201628fb 100644
--- a/packages/translations/src/languages/lt.ts
+++ b/packages/translations/src/languages/lt.ts
@@ -242,6 +242,7 @@ export const ltTranslations: DefaultTranslationsObject = {
     cancel: 'Atšaukti',
     changesNotSaved:
       'Jūsų pakeitimai nebuvo išsaugoti. Jei dabar išeisite, prarasite savo pakeitimus.',
+    checked: 'Patikrinta',
     clear: 'Aišku',
     clearAll: 'Išvalyti viską',
     close: 'Uždaryti',
@@ -455,6 +456,7 @@ export const ltTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} perkeltas į šiukšlinę.',
     true: 'Tiesa',
     unauthorized: 'Neleistinas',
+    unchecked: 'Nežymėta',
     unlock: 'Atrakinti',
     unsavedChanges: 'Turite neišsaugotų pakeitimų. Išsaugokite arba atmestkite prieš tęsdami.',
     unsavedChangesDuplicate: 'Jūs turite neišsaugotų pakeitimų. Ar norėtumėte tęsti dubliavimą?',
diff --git a/packages/translations/src/languages/lv.ts b/packages/translations/src/languages/lv.ts
index 9f8708ba30e..9b493dde891 100644
--- a/packages/translations/src/languages/lv.ts
+++ b/packages/translations/src/languages/lv.ts
@@ -239,6 +239,7 @@ export const lvTranslations: DefaultTranslationsObject = {
     by: 'Autors',
     cancel: 'Atcelt',
     changesNotSaved: 'Jūsu izmaiņas nav saglabātas. Ja tagad pametīsiet, izmaiņas tiks zaudētas.',
+    checked: 'Pārbaudīts',
     clear:
       'Izpratiet oriģinālteksta nozīmi Payload kontekstā. Šeit ir saraksts ar Payload terminiem, kas ir ļoti specifiskas nozīmes:\n    - Kolekcija: Kolekcija ir dokumentu grupa, kuriem ir kopīga struktūra un mērķis. Kolekcijas tiek izmantotas saturu organizēšanai un pārvaldīšanai Payload.\n    - Lauks: Lauks ir konkrēts datu fragments dokumentā iekš kolekcijas. Lauki definē struktūru un dat',
     clearAll: 'Notīrīt visu',
@@ -454,6 +455,7 @@ export const lvTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} pārvietoti uz miskasti.',
     true: 'Patiesi',
     unauthorized: 'Neautorizēts',
+    unchecked: 'Neatzīmēts',
     unlock: 'Atslēgt',
     unsavedChanges: 'Jums ir nesaglabātas izmaiņas. Saglabājiet vai atceliet pirms turpināšanas.',
     unsavedChangesDuplicate: 'Jums ir nesaglabātas izmaiņas. Vai vēlaties turpināt dublēšanu?',
diff --git a/packages/translations/src/languages/my.ts b/packages/translations/src/languages/my.ts
index 9b6d09ccf54..71064987c09 100644
--- a/packages/translations/src/languages/my.ts
+++ b/packages/translations/src/languages/my.ts
@@ -242,6 +242,7 @@ export const myTranslations: DefaultTranslationsObject = {
     cancel: 'မလုပ်တော့ပါ။',
     changesNotSaved:
       'သင်၏ပြောင်းလဲမှုများကို မသိမ်းဆည်းရသေးပါ။ ယခု စာမျက်နှာက ထွက်လိုက်ပါက သင်၏ပြောင်းလဲမှုများ အကုန် ဆုံးရှုံးသွားပါမည်။ အကုန်နော်။',
+    checked: 'စစ်ဆေးပြီး',
     clear: 'Jelas',
     clearAll: 'အားလုံးကိုရှင်းလင်းပါ',
     close: 'ပိတ်',
@@ -459,6 +460,7 @@ export const myTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} သို့ ဖယ်ရှားလိုက်သည်။',
     true: 'အမှန်',
     unauthorized: 'အခွင့်မရှိပါ။',
+    unchecked: 'မစစ်ဆေးရသေးပါ',
     unlock: 'ဖွင့်',
     unsavedChanges:
       'Anda mempunyai perubahan yang belum disimpan. Simpan atau buang sebelum meneruskan.',
diff --git a/packages/translations/src/languages/nb.ts b/packages/translations/src/languages/nb.ts
index 4dfad9a6232..d8b513feb1c 100644
--- a/packages/translations/src/languages/nb.ts
+++ b/packages/translations/src/languages/nb.ts
@@ -240,6 +240,7 @@ export const nbTranslations: DefaultTranslationsObject = {
     cancel: 'Avbryt',
     changesNotSaved:
       'Endringene dine er ikke lagret. Hvis du forlater nå, vil du miste endringene dine.',
+    checked: 'Kontrollert',
     clear: 'Tydelig',
     clearAll: 'Tøm alt',
     close: 'Lukk',
@@ -456,6 +457,7 @@ export const nbTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} flyttet til søppel.',
     true: 'Sann',
     unauthorized: 'Ikke autorisert',
+    unchecked: 'Uavhuket',
     unlock: 'Lås opp',
     unsavedChanges: 'Du har ulagrede endringer. Lagre eller forkast før du fortsetter.',
     unsavedChangesDuplicate: 'Du har ulagrede endringer. Vil du fortsette å duplisere?',
diff --git a/packages/translations/src/languages/nl.ts b/packages/translations/src/languages/nl.ts
index 80d2366dd77..52f0db371e7 100644
--- a/packages/translations/src/languages/nl.ts
+++ b/packages/translations/src/languages/nl.ts
@@ -246,6 +246,7 @@ export const nlTranslations: DefaultTranslationsObject = {
     cancel: 'Annuleren',
     changesNotSaved:
       'Uw wijzigingen zijn niet bewaard. Als u weggaat zullen de wijzigingen verloren gaan.',
+    checked: 'Gecontroleerd',
     clear: 'Wissen',
     clearAll: 'Alles wissen',
     close: 'Sluiten',
@@ -462,6 +463,7 @@ export const nlTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} verplaatst naar prullenbak.',
     true: 'Waar',
     unauthorized: 'Onbevoegd',
+    unchecked: 'Niet geselecteerd',
     unlock: 'Ontgrendelen',
     unsavedChanges: 'U heeft niet-opgeslagen wijzigingen. Sla op of verwijder voordat u doorgaat.',
     unsavedChangesDuplicate: 'U heeft onbewaarde wijzigingen. Wilt u doorgaan met dupliceren?',
diff --git a/packages/translations/src/languages/pl.ts b/packages/translations/src/languages/pl.ts
index ad152b8d748..df7d5cffd22 100644
--- a/packages/translations/src/languages/pl.ts
+++ b/packages/translations/src/languages/pl.ts
@@ -238,6 +238,7 @@ export const plTranslations: DefaultTranslationsObject = {
     cancel: 'Anuluj',
     changesNotSaved:
       'Twoje zmiany nie zostały zapisane. Jeśli teraz wyjdziesz, stracisz swoje zmiany.',
+    checked: 'Sprawdzone',
     clear: 'Jasne',
     clearAll: 'Wyczyść wszystko',
     close: 'Zamknij',
@@ -452,6 +453,7 @@ export const plTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} przeniesiono do kosza.',
     true: 'Prawda',
     unauthorized: 'Brak autoryzacji',
+    unchecked: 'Niezaznaczone',
     unlock: 'Odblokuj',
     unsavedChanges: 'Masz niezapisane zmiany. Zapisz lub odrzuć, zanim kontynuujesz.',
     unsavedChangesDuplicate: 'Masz niezapisane zmiany. Czy chcesz kontynuować duplikowanie?',
diff --git a/packages/translations/src/languages/pt.ts b/packages/translations/src/languages/pt.ts
index 3fc156af6aa..9b94b496151 100644
--- a/packages/translations/src/languages/pt.ts
+++ b/packages/translations/src/languages/pt.ts
@@ -240,6 +240,7 @@ export const ptTranslations: DefaultTranslationsObject = {
     cancel: 'Cancelar',
     changesNotSaved:
       'Suas alterações não foram salvas. Se você sair agora, essas alterações serão perdidas.',
+    checked: 'Verificado',
     clear: 'Claro',
     clearAll: 'Limpar Tudo',
     close: 'Fechar',
@@ -456,6 +457,7 @@ export const ptTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} movido para o lixo.',
     true: 'Verdadeiro',
     unauthorized: 'Não autorizado',
+    unchecked: 'Desmarcado',
     unlock: 'Desbloquear',
     unsavedChanges: 'Você tem alterações não salvas. Salve ou descarte antes de continuar.',
     unsavedChangesDuplicate: 'Você tem mudanças não salvas. Você gostaria de continuar a duplicar?',
diff --git a/packages/translations/src/languages/ro.ts b/packages/translations/src/languages/ro.ts
index 69e18242392..8bc6b73cd3e 100644
--- a/packages/translations/src/languages/ro.ts
+++ b/packages/translations/src/languages/ro.ts
@@ -244,6 +244,7 @@ export const roTranslations: DefaultTranslationsObject = {
     cancel: 'Anulați',
     changesNotSaved:
       'Modificările dvs. nu au fost salvate. Dacă plecați acum, vă veți pierde modificările.',
+    checked: 'Verificat',
     clear: 'Clar',
     clearAll: 'Șterge tot',
     close: 'Închide',
@@ -459,6 +460,7 @@ export const roTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} mutate la coșul de gunoi.',
     true: 'Adevărat',
     unauthorized: 'neautorizat(ă)',
+    unchecked: 'Necompletat',
     unlock: 'Deblocare',
     unsavedChanges: 'Aveți modificări nesalvate. Salvați sau renunțați înainte de a continua.',
     unsavedChangesDuplicate: 'Aveți modificări nesalvate. Doriți să continuați să duplicați?',
diff --git a/packages/translations/src/languages/rs.ts b/packages/translations/src/languages/rs.ts
index ea16ce56436..247e31fe1ea 100644
--- a/packages/translations/src/languages/rs.ts
+++ b/packages/translations/src/languages/rs.ts
@@ -240,6 +240,7 @@ export const rsTranslations: DefaultTranslationsObject = {
     by: 'Od strane',
     cancel: 'Откажи',
     changesNotSaved: 'Ваше промене нису сачуване. Ако изађете сада, изгубићете промене.',
+    checked: 'Provereno',
     clear: 'Jasno',
     clearAll: 'Obriši sve',
     close: 'Затвори',
@@ -453,6 +454,7 @@ export const rsTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} premješteno u smeće.',
     true: 'Istinito',
     unauthorized: 'Нисте ауторизовани',
+    unchecked: 'Neoznačeno',
     unlock: 'Otključaj',
     unsavedChanges: 'Imate nesačuvane izmene. Sačuvajte ili odbacite pre nego što nastavite.',
     unsavedChangesDuplicate: 'Имате несачуване промене. Да ли желите наставити са дуплицирањем?',
diff --git a/packages/translations/src/languages/rsLatin.ts b/packages/translations/src/languages/rsLatin.ts
index d86448649e5..3fa7567eb8c 100644
--- a/packages/translations/src/languages/rsLatin.ts
+++ b/packages/translations/src/languages/rsLatin.ts
@@ -240,6 +240,7 @@ export const rsLatinTranslations: DefaultTranslationsObject = {
     by: 'Od strane',
     cancel: 'Otkaži',
     changesNotSaved: 'Vaše promene nisu sačuvane. Ako izađete sada, izgubićete promene.',
+    checked: 'Provereno',
     clear: 'Jasno',
     clearAll: 'Očisti sve',
     close: 'Zatvori',
@@ -454,6 +455,7 @@ export const rsLatinTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} premešteno u kantu za smeće.',
     true: 'Istinito',
     unauthorized: 'Niste autorizovani',
+    unchecked: 'Neoznačeno',
     unlock: 'Otključaj',
     unsavedChanges: 'Imate nesačuvane promene. Sačuvajte ili odbacite pre nego što nastavite.',
     unsavedChangesDuplicate: 'Imate nesačuvane promene. Da li želite nastaviti sa dupliciranjem?',
diff --git a/packages/translations/src/languages/ru.ts b/packages/translations/src/languages/ru.ts
index b0c4c295e7e..d4af542eca3 100644
--- a/packages/translations/src/languages/ru.ts
+++ b/packages/translations/src/languages/ru.ts
@@ -241,6 +241,7 @@ export const ruTranslations: DefaultTranslationsObject = {
     cancel: 'Отмена',
     changesNotSaved:
       'Ваши изменения не были сохранены. Если вы сейчас уйдете, то потеряете свои изменения.',
+    checked: 'Проверено',
     clear: 'Четкий',
     clearAll: 'Очистить все',
     close: 'Закрыть',
@@ -455,6 +456,7 @@ export const ruTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} перемещено в корзину.',
     true: 'Правда',
     unauthorized: 'Нет доступа',
+    unchecked: 'Не отмечено',
     unlock: 'Разблокировать',
     unsavedChanges:
       'У вас есть несохраненные изменения. Сохраните или отмените их перед продолжением.',
diff --git a/packages/translations/src/languages/sk.ts b/packages/translations/src/languages/sk.ts
index f6841caee48..4fc5a4ec642 100644
--- a/packages/translations/src/languages/sk.ts
+++ b/packages/translations/src/languages/sk.ts
@@ -241,6 +241,7 @@ export const skTranslations: DefaultTranslationsObject = {
     by: 'Autor',
     cancel: 'Zrušiť',
     changesNotSaved: 'Vaše zmeny neboli uložené. Ak teraz odídete, stratíte svoje zmeny.',
+    checked: 'Skontrolované',
     clear: 'Jasný',
     clearAll: 'Vymazať všetko',
     close: 'Zavrieť',
@@ -452,6 +453,7 @@ export const skTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} presunuté do koša.',
     true: 'Pravda',
     unauthorized: 'Neoprávnený prístup',
+    unchecked: 'Nevybrané',
     unlock: 'Odomknúť',
     unsavedChanges: 'Máte neuložené zmeny. Uložte alebo zahoďte pred pokračovaním.',
     unsavedChangesDuplicate: 'Máte neuložené zmeny. Chceli by ste pokračovať v duplikovaní?',
diff --git a/packages/translations/src/languages/sl.ts b/packages/translations/src/languages/sl.ts
index a0f272b2e3b..466d6e8ecf9 100644
--- a/packages/translations/src/languages/sl.ts
+++ b/packages/translations/src/languages/sl.ts
@@ -239,6 +239,7 @@ export const slTranslations: DefaultTranslationsObject = {
     cancel: 'Prekliči',
     changesNotSaved:
       'Vaše spremembe niso shranjene. Če zapustite zdaj, boste izgubili svoje spremembe.',
+    checked: 'Preverjeno',
     clear: 'Čisto',
     clearAll: 'Počisti vse',
     close: 'Zapri',
@@ -453,6 +454,7 @@ export const slTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} premaknjeno v smeti.',
     true: 'Da',
     unauthorized: 'Nepooblaščeno',
+    unchecked: 'Nepotrjeno',
     unlock: 'Odkleni',
     unsavedChanges: 'Neshranjene spremembe',
     unsavedChangesDuplicate: 'Imate neshranjene spremembe. Želite nadaljevati s podvajanjem?',
diff --git a/packages/translations/src/languages/sv.ts b/packages/translations/src/languages/sv.ts
index 2a7b69425e2..65a37fe2652 100644
--- a/packages/translations/src/languages/sv.ts
+++ b/packages/translations/src/languages/sv.ts
@@ -240,6 +240,7 @@ export const svTranslations: DefaultTranslationsObject = {
     cancel: 'Avbryt',
     changesNotSaved:
       'Dina ändringar har inte sparats. Om du lämnar nu kommer du att förlora dina ändringar.',
+    checked: 'Kontrollerad',
     clear: 'Rensa',
     clearAll: 'Rensa alla',
     close: 'Stäng',
@@ -456,6 +457,7 @@ export const svTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} flyttades till papperskorgen.',
     true: 'Sann',
     unauthorized: 'Obehörig',
+    unchecked: 'Omarkerad',
     unlock: 'Lås upp',
     unsavedChanges: 'Du har osparade ändringar. Spara innan du fortsätter.',
     unsavedChangesDuplicate: 'Du har osparade ändringar. Vill du fortsätta att duplicera?',
diff --git a/packages/translations/src/languages/ta.ts b/packages/translations/src/languages/ta.ts
index b8ecd064834..6355dc73c4e 100644
--- a/packages/translations/src/languages/ta.ts
+++ b/packages/translations/src/languages/ta.ts
@@ -237,6 +237,7 @@ export const taTranslations: DefaultTranslationsObject = {
     by: 'மூலம்',
     cancel: 'ரத்து செய்',
     changesNotSaved: 'உங்கள் மாற்றங்கள் சேமிக்கப்படவில்லை. இப்போது வெளியேறினால், அவை இழக்கப்படும்.',
+    checked: 'சரிபாரிக்கப்பட்டது',
     clear: 'அழிக்கவும்',
     clearAll: 'அனைத்தையும் அழிக்கவும்',
     close: 'மூடவும்',
@@ -452,6 +453,7 @@ export const taTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} குப்பைக்குச் செலுத்தப்பட்டது.',
     true: 'உண்மை',
     unauthorized: 'அனுமதி இல்லை',
+    unchecked: 'தேர்வு செய்யப்படாத',
     unlock: 'திறக்க',
     unsavedChanges:
       'சேமிக்கப்படாத மாற்றங்கள் உள்ளன. தொடருவதற்கு முன் சேமிக்கவும் அல்லது நிராகரிக்கவும்.',
diff --git a/packages/translations/src/languages/th.ts b/packages/translations/src/languages/th.ts
index d10103ec0c4..2c75f64a25a 100644
--- a/packages/translations/src/languages/th.ts
+++ b/packages/translations/src/languages/th.ts
@@ -232,6 +232,7 @@ export const thTranslations: DefaultTranslationsObject = {
     by: 'โดย',
     cancel: 'ยกเลิก',
     changesNotSaved: 'การเปลี่ยนแปลงยังไม่ได้ถูกบันทึก ถ้าคุณออกตอนนี้ สิ่งที่แก้ไขไว้จะหายไป',
+    checked: 'ตรวจสอบแล้ว',
     clear:
       'ให้เคารพความหมายของข้อความต้นฉบับภายในบริบทของ Payload นี่คือรายการของคำที่มักใช้ใน Payload ที่มีความหมายที่เฉพาะเจาะจงมาก:\n    - Collection: Collection คือกลุ่มของเอกสารที่มีโครงสร้างและจุดประสงค์ท',
     clearAll: 'ล้างทั้งหมด',
@@ -446,6 +447,7 @@ export const thTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} ถูกย้ายไปยังถังขยะ',
     true: 'จริง',
     unauthorized: 'ไม่ได้รับอนุญาต',
+    unchecked: 'ยังไม่ได้เลือก',
     unlock: 'ปลดล็อค',
     unsavedChanges: 'คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก บันทึกหรือทิ้งก่อนที่จะดำเนินการต่อ',
     unsavedChangesDuplicate: 'คุณมีการแก้ไขที่ยังไม่ถูกบันทึก คุณต้องการทำสำเนาต่อหรือไม่?',
diff --git a/packages/translations/src/languages/tr.ts b/packages/translations/src/languages/tr.ts
index 2801a39ba44..5cebe5e0f5a 100644
--- a/packages/translations/src/languages/tr.ts
+++ b/packages/translations/src/languages/tr.ts
@@ -242,6 +242,7 @@ export const trTranslations: DefaultTranslationsObject = {
     cancel: 'İptal',
     changesNotSaved:
       'Değişiklikleriniz henüz kaydedilmedi. Eğer bu sayfayı terk ederseniz değişiklikleri kaybedeceksiniz.',
+    checked: 'Kontrol edildi',
     clear: 'Temiz',
     clearAll: 'Hepsini Temizle',
     close: 'Kapat',
@@ -458,6 +459,7 @@ export const trTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} çöp kutusuna taşındı.',
     true: 'Doğru',
     unauthorized: 'Yetkisiz',
+    unchecked: 'Seçilmemiş',
     unlock: 'Kilidi Aç',
     unsavedChanges: 'Kaydedilmemiş değişiklikleriniz var. Devam etmeden önce kaydedin veya atın.',
     unsavedChangesDuplicate:
diff --git a/packages/translations/src/languages/uk.ts b/packages/translations/src/languages/uk.ts
index a9432dbb78c..14641130f3a 100644
--- a/packages/translations/src/languages/uk.ts
+++ b/packages/translations/src/languages/uk.ts
@@ -239,6 +239,7 @@ export const ukTranslations: DefaultTranslationsObject = {
     by: 'Від',
     cancel: 'Скасувати',
     changesNotSaved: 'Ваши зміни не були збережені. Якщо ви вийдете зараз, то втратите свої зміни.',
+    checked: 'Перевірено',
     clear: 'Очистити',
     clearAll: 'Очистити все',
     close: 'Закрити',
@@ -451,6 +452,7 @@ export const ukTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} перенесено в кошик.',
     true: 'Так',
     unauthorized: 'Немає доступу',
+    unchecked: 'Необрано',
     unlock: 'Розблокувати',
     unsavedChanges: 'У вас є незбережені зміни. Збережіть або скасуйте перед продовженням.',
     unsavedChangesDuplicate: 'Ви маєте незбережені зміни. Чи бажаєте ви продовжити дублювання?',
diff --git a/packages/translations/src/languages/vi.ts b/packages/translations/src/languages/vi.ts
index 948d02698b4..78289aed7da 100644
--- a/packages/translations/src/languages/vi.ts
+++ b/packages/translations/src/languages/vi.ts
@@ -239,6 +239,7 @@ export const viTranslations: DefaultTranslationsObject = {
     by: 'Bởi',
     cancel: 'Hủy',
     changesNotSaved: 'Thay đổi chưa được lưu lại. Bạn sẽ mất bản chỉnh sửa nếu thoát bây giờ.',
+    checked: 'Đã kiểm tra',
     clear: 'Xóa',
     clearAll: 'Xóa tất cả',
     close: 'Đóng',
@@ -453,6 +454,7 @@ export const viTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} đã được chuyển vào thùng rác.',
     true: 'Đúng',
     unauthorized: 'Không có quyền truy cập.',
+    unchecked: 'Chưa được chọn',
     unlock: 'Mở khóa',
     unsavedChanges: 'Bạn có những thay đổi chưa được lưu. Lưu hoặc hủy trước khi tiếp tục.',
     unsavedChangesDuplicate: 'Bạn chưa lưu các thay đổi. Bạn có muốn tiếp tục tạo bản sao?',
diff --git a/packages/translations/src/languages/zh.ts b/packages/translations/src/languages/zh.ts
index c5562c43f4b..2ba3b5a2d86 100644
--- a/packages/translations/src/languages/zh.ts
+++ b/packages/translations/src/languages/zh.ts
@@ -227,6 +227,7 @@ export const zhTranslations: DefaultTranslationsObject = {
     by: '由',
     cancel: '取消',
     changesNotSaved: '您的更改尚未保存。您确定要离开吗？',
+    checked: '已检查',
     clear: '清除',
     clearAll: '清除全部',
     close: '关闭',
@@ -434,6 +435,7 @@ export const zhTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} {{label}} 被移至垃圾箱。',
     true: '是',
     unauthorized: '未经授权',
+    unchecked: '未选中',
     unlock: '解锁',
     unsavedChanges: '您有未保存的更改。请在继续之前保存或放弃修改。',
     unsavedChangesDuplicate: '您有未保存的修改。您确定要继续复制吗？',
diff --git a/packages/translations/src/languages/zhTw.ts b/packages/translations/src/languages/zhTw.ts
index d9e54beb447..3a373b3c6ee 100644
--- a/packages/translations/src/languages/zhTw.ts
+++ b/packages/translations/src/languages/zhTw.ts
@@ -225,6 +225,7 @@ export const zhTwTranslations: DefaultTranslationsObject = {
     by: '由',
     cancel: '取消',
     changesNotSaved: '變更尚未儲存。若您現在離開，將會遺失所有變更。',
+    checked: '已檢查',
     clear: '清除',
     clearAll: '全部清除',
     close: '關閉',
@@ -432,6 +433,7 @@ export const zhTwTranslations: DefaultTranslationsObject = {
     trashedCountSuccessfully: '{{count}} 個 {{label}} 已移至垃圾桶。',
     true: '是',
     unauthorized: '未經授權',
+    unchecked: '未勾選',
     unlock: '解鎖',
     unsavedChanges: '您有尚未儲存的變更。請先儲存或捨棄後再繼續。',
     unsavedChangesDuplicate: '您有尚未儲存的變更。是否仍要繼續複製？',
diff --git a/packages/ui/src/css/typography.css b/packages/ui/src/css/typography.css
index ea8afd28e5c..63cb4256d00 100644
--- a/packages/ui/src/css/typography.css
+++ b/packages/ui/src/css/typography.css
@@ -28,7 +28,7 @@
     --text-body-medium-strong-font-size: 0.6875rem; /* 11px */
     --text-body-medium-strong-font-weight: 550;
     --text-body-medium-strong-line-height: 1rem; /* 16px */
-    --text-body-medium-strong-letter-spacing: 0.5px;
+    --text-body-medium-strong-letter-spacing: 0.055px;
 
     /* Body — Large */
     --text-body-large-font-family: var(--font-family-sans);
diff --git a/packages/ui/src/elements/Button/index.css b/packages/ui/src/elements/Button/index.css
index 7a0d61cc157..ec1de08c2e1 100644
--- a/packages/ui/src/elements/Button/index.css
+++ b/packages/ui/src/elements/Button/index.css
@@ -304,6 +304,7 @@
     .popup-button {
       border-radius: var(--radius-medium);
       align-items: center;
+      justify-content: center;
 
       html:not([dir='RTL']) & {
         border-left: 1px solid var(--separator-color);
@@ -418,14 +419,60 @@
 
   .btn--withPopup.btn--style-ghost {
     --separator-color: transparent;
+    border-radius: var(--radius-medium);
+    padding-left: var(--spacer-2);
+    padding-right: var(--spacer-1);
+
     .btn,
     .popup-button {
       color: var(--color-text);
       background-color: transparent;
+    }
+
+    .btn {
+      padding: 0;
 
       &:hover,
       &:active {
-        background-color: var(--color-bg-transparent-hover);
+        background-color: transparent;
+      }
+    }
+
+    .popup-button {
+      align-self: center;
+      border-radius: var(--radius-medium);
+      border: none;
+      height: auto;
+      margin-left: var(--spacer-1);
+
+      html:not([dir='RTL']) & {
+        border-top-left-radius: var(--radius-medium);
+        border-bottom-left-radius: var(--radius-medium);
+      }
+
+      html[dir='RTL'] & {
+        border-top-right-radius: var(--radius-medium);
+        border-bottom-right-radius: var(--radius-medium);
+      }
+    }
+
+    &:hover,
+    &:active {
+      background-color: var(--color-bg-transparent-hover);
+    }
+
+    .popup-button:hover {
+      background-color: var(--color-bg-transparent-hover);
+    }
+
+    .popup-button:active {
+      background-color: var(--color-bg-transparent-pressed);
+    }
+
+    &.btn--disabled {
+      &:hover,
+      &:active {
+        background-color: transparent;
       }
     }
 
diff --git a/packages/ui/src/elements/Button/index.tsx b/packages/ui/src/elements/Button/index.tsx
index e9e3b8720e2..6e0a0e58a36 100644
--- a/packages/ui/src/elements/Button/index.tsx
+++ b/packages/ui/src/elements/Button/index.tsx
@@ -75,6 +75,7 @@ export const Button: React.FC<Props> = (props) => {
     newTab,
     onClick,
     onMouseDown,
+    popupIconSize,
     ref,
     round,
     selected,
@@ -204,7 +205,7 @@ export const Button: React.FC<Props> = (props) => {
       <div className={styleClasses}>
         {buttonElement}
         <Popup
-          button={<ChevronIcon />}
+          button={<ChevronIcon size={popupIconSize} />}
           buttonSize={size}
           className={disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : ''}
           disabled={disabled && !enableSubMenu}
@@ -212,7 +213,7 @@ export const Button: React.FC<Props> = (props) => {
           id={`${id}-popup`}
           noBackground
           render={({ close }) => SubMenuPopupContent({ close: () => close() })}
-          size="large"
+          size="small"
           verticalAlign="bottom"
         />
       </div>
diff --git a/packages/ui/src/elements/Button/types.ts b/packages/ui/src/elements/Button/types.ts
index 431be2da01e..9e83663d07f 100644
--- a/packages/ui/src/elements/Button/types.ts
+++ b/packages/ui/src/elements/Button/types.ts
@@ -30,6 +30,11 @@ export type Props = {
   newTab?: boolean
   onClick?: (event: MouseEvent) => void
   onMouseDown?: (event: MouseEvent) => void
+  /**
+   * Size of the chevron icon in the split-button popup trigger.
+   * @default 24
+   */
+  popupIconSize?: 16 | 24
   /**
    * Enables form submission via an onClick handler. This is only needed if
    * type="submit" does not trigger form submission, e.g. if the button DOM
diff --git a/packages/ui/src/elements/FieldDiffContainer/index.css b/packages/ui/src/elements/FieldDiffContainer/index.css
new file mode 100644
index 00000000000..926da3d9a29
--- /dev/null
+++ b/packages/ui/src/elements/FieldDiffContainer/index.css
@@ -0,0 +1,73 @@
+@layer payload-default {
+  .field-diff__locale-label {
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    padding-inline: var(--spacer-1);
+    margin-inline-end: var(--spacer-1);
+  }
+
+  .field-diff-container {
+    position: relative;
+  }
+
+  .field-diff-content {
+    display: grid;
+    grid-template-columns: var(--field-diff-columns, minmax(0, 1fr) minmax(0, 1fr));
+    background: var(--color-bg-secondary);
+    padding-block: var(--spacer-2);
+    border-radius: var(--radius-medium);
+    overflow: clip;
+  }
+
+  .field-diff-content > * {
+    padding-inline: var(--spacer-2-5);
+  }
+
+  @media (max-width: 768px) {
+    .field-diff-container .field-diff-content {
+      grid-template-columns: 1fr;
+      gap: calc(var(--stroke-width-small) * 2);
+      padding: 0;
+      background: transparent;
+      isolation: isolate;
+    }
+
+    .field-diff-content > * {
+      background: var(--color-bg-secondary);
+      padding: var(--spacer-1) var(--spacer-2);
+      min-height: var(--spacer-5);
+      overflow: hidden;
+      align-content: center;
+    }
+
+    .field-diff-content > *:first-child {
+      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+    }
+
+    .field-diff-content > *:last-child {
+      border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+    }
+
+    .field-diff-content > .html-diff__diff-old:has([data-match-type]) {
+      background: var(--diff-delete-parent-bg);
+    }
+
+    .field-diff-content > .html-diff__diff-new:has([data-match-type]) {
+      background: var(--diff-create-parent-bg);
+    }
+  }
+
+  .diff-no-value {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    max-height: var(--spacer-5);
+    background-color: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+  }
+}
diff --git a/packages/ui/src/elements/FieldDiffContainer/index.scss b/packages/ui/src/elements/FieldDiffContainer/index.scss
deleted file mode 100644
index 60b1265a09e..00000000000
--- a/packages/ui/src/elements/FieldDiffContainer/index.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .field-diff {
-    &__locale-label {
-      background: var(--theme-elevation-100);
-      border-radius: var(--style-radius-s);
-      padding: calc(var(--base) * 0.2);
-      // border-radius: $style-radius-m;
-      [dir='ltr'] & {
-        margin-right: calc(var(--base) * 0.25);
-      }
-      [dir='rtl'] & {
-        margin-left: calc(var(--base) * 0.25);
-      }
-    }
-
-    &-container {
-      position: relative;
-
-      // Vertical separator line - not needed anymore, as the parent version view container adds a vertical line that spans the entire height of the container.
-      /*
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: var(--left-offset);
-      width: 1px;
-      background-color: var(--theme-elevation-100);
-      transform: translateX(-50%); // Center the line
-    }*/
-    }
-
-    &-content {
-      display: grid;
-      // Need to use 50% 50% so that we can apply overflow-x without the column shrinking to the content width.
-      // Need -base(0.5) to enure the gap is center aligned - this is required when using 50% over 1fr.
-      grid-template-columns: calc(50% - base(0.5)) calc(50% - base(0.5));
-      gap: base(1);
-      background: var(--theme-elevation-50);
-      padding: base(0.5);
-    }
-  }
-}
diff --git a/packages/ui/src/elements/FieldDiffContainer/index.tsx b/packages/ui/src/elements/FieldDiffContainer/index.tsx
index 6c9bcc826f0..2be5a6d079d 100644
--- a/packages/ui/src/elements/FieldDiffContainer/index.tsx
+++ b/packages/ui/src/elements/FieldDiffContainer/index.tsx
@@ -1,13 +1,16 @@
 import type { LabelFunction, StaticLabel } from 'payload'
 
-import './index.scss'
+import './index.css'
 
 import { getTranslation, type I18nClient } from '@payloadcms/translations'
+import React from 'react'
 
 import { FieldDiffLabel } from '../FieldDiffLabel/index.js'
 
 const baseClass = 'field-diff'
 
+const gutterOffset = 6.5
+
 export const FieldDiffContainer: React.FC<{
   className?: string
   From: React.ReactNode
@@ -31,28 +34,18 @@ export const FieldDiffContainer: React.FC<{
   return (
     <div
       className={`${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`}
-      style={
-        nestingLevel
-          ? ({
-              // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns
-              '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`,
-            } as React.CSSProperties)
-          : ({
-              '--left-offset': '50%',
-            } as React.CSSProperties)
-      }
     >
       <FieldDiffLabel>
         {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
-        {typeof label !== 'function' && getTranslation(label || '', i18n)}
+        {label !== false && typeof label !== 'function' && getTranslation(label || '', i18n)}
       </FieldDiffLabel>
       <div
         className={`${baseClass}-content`}
         style={
           nestingLevel
-            ? {
-                gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`,
-              }
+            ? ({
+                '--field-diff-columns': `calc(50% - ${nestingLevel * gutterOffset}px) calc(50% + ${nestingLevel * gutterOffset}px)`,
+              } as React.CSSProperties)
             : undefined
         }
       >
diff --git a/packages/ui/src/elements/FieldDiffLabel/index.css b/packages/ui/src/elements/FieldDiffLabel/index.css
new file mode 100644
index 00000000000..8270ffd53bd
--- /dev/null
+++ b/packages/ui/src/elements/FieldDiffLabel/index.css
@@ -0,0 +1,21 @@
+@layer payload-default {
+  .field-diff-label {
+    margin-bottom: var(--spacer-2);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+    color: var(--color-text);
+  }
+
+  @media (max-width: 768px) {
+    .field-diff-label {
+      height: min-content;
+    }
+  }
+}
diff --git a/packages/ui/src/elements/FieldDiffLabel/index.scss b/packages/ui/src/elements/FieldDiffLabel/index.scss
deleted file mode 100644
index 6ad0a290555..00000000000
--- a/packages/ui/src/elements/FieldDiffLabel/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@layer payload-default {
-  .field-diff-label {
-    margin-bottom: calc(var(--base) * 0.35);
-    font-weight: 600;
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    align-items: center;
-    line-height: normal;
-  }
-}
diff --git a/packages/ui/src/elements/FieldDiffLabel/index.tsx b/packages/ui/src/elements/FieldDiffLabel/index.tsx
index 6edca55d836..1a7b7be0e45 100644
--- a/packages/ui/src/elements/FieldDiffLabel/index.tsx
+++ b/packages/ui/src/elements/FieldDiffLabel/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import './index.scss'
+import './index.css'
 
 const baseClass = 'field-diff-label'
 
diff --git a/packages/ui/src/elements/HTMLDiff/colors.css b/packages/ui/src/elements/HTMLDiff/colors.css
new file mode 100644
index 00000000000..50b18f45fdc
--- /dev/null
+++ b/packages/ui/src/elements/HTMLDiff/colors.css
@@ -0,0 +1,17 @@
+@layer payload-default {
+  :root {
+    --diff-delete-pill-bg: var(--color-bg-danger-tertiary-hover);
+    --diff-delete-pill-color: var(--color-text-danger);
+    --diff-delete-pill-border: var(--color-border-danger);
+    --diff-delete-parent-bg: var(--color-bg-danger-tertiary);
+    --diff-delete-parent-color: var(--color-text-danger);
+    --diff-delete-link-color: var(--color-text-danger);
+
+    --diff-create-pill-bg: var(--color-bg-brand-tertiary-hover);
+    --diff-create-pill-color: var(--color-text-brand);
+    --diff-create-pill-border: var(--color-border-brand);
+    --diff-create-parent-bg: var(--color-bg-brand-tertiary);
+    --diff-create-parent-color: var(--color-text-brand);
+    --diff-create-link-color: var(--color-text-brand);
+  }
+}
diff --git a/packages/ui/src/elements/HTMLDiff/colors.scss b/packages/ui/src/elements/HTMLDiff/colors.scss
deleted file mode 100644
index af5c5f591f3..00000000000
--- a/packages/ui/src/elements/HTMLDiff/colors.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  :root {
-    --diff-delete-pill-bg: var(--theme-error-200);
-    --diff-delete-pill-color: var(--theme-error-600);
-    --diff-delete-pill-border: var(--theme-error-400);
-    --diff-delete-parent-bg: var(--theme-error-100);
-    --diff-delete-parent-color: var(--theme-error-800);
-    --diff-delete-link-color: var(--theme-error-600);
-
-    --diff-create-pill-bg: var(--theme-success-200);
-    --diff-create-pill-color: var(--theme-success-600);
-    --diff-create-pill-border: var(--theme-success-400);
-    --diff-create-parent-bg: var(--theme-success-100);
-    --diff-create-parent-color: var(--theme-success-800);
-    --diff-create-link-color: var(--theme-success-600);
-  }
-
-  html[data-theme='dark'] {
-    --diff-delete-pill-bg: var(--theme-error-200);
-    --diff-delete-pill-color: var(--theme-error-650);
-    --diff-delete-pill-border: var(--theme-error-400);
-    --diff-delete-parent-bg: var(--theme-error-100);
-    --diff-delete-parent-color: var(--theme-error-900);
-    --diff-delete-link-color: var(--theme-error-750);
-
-    --diff-create-pill-bg: var(--theme-success-200);
-    --diff-create-pill-color: var(--theme-success-650);
-    --diff-create-pill-border: var(--theme-success-400);
-    --diff-create-parent-bg: var(--theme-success-100);
-    --diff-create-parent-color: var(--theme-success-900);
-    --diff-create-link-color: var(--theme-success-750);
-  }
-}
diff --git a/packages/ui/src/elements/HTMLDiff/index.css b/packages/ui/src/elements/HTMLDiff/index.css
new file mode 100644
index 00000000000..74c057dc0c0
--- /dev/null
+++ b/packages/ui/src/elements/HTMLDiff/index.css
@@ -0,0 +1,170 @@
+@layer payload-default {
+  .html-diff {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .html-diff-no-value {
+    color: var(--color-text-tertiary);
+  }
+
+  .html-diff p {
+    margin: 0;
+    align-content: center;
+  }
+
+  .html-diff pre {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  /* Apply background color to the whole field when it has diffs */
+  .html-diff:has([data-match-type='create']) {
+    background-color: var(--diff-create-parent-bg);
+    margin-block: calc(var(--spacer-2) * -1);
+    padding-block: var(--spacer-2);
+  }
+
+  .html-diff:has([data-match-type='delete']) {
+    background-color: var(--diff-delete-parent-bg);
+    margin-block: calc(var(--spacer-2) * -1);
+    padding-block: var(--spacer-2);
+  }
+
+  .html-diff li::marker {
+    color: var(--color-text);
+  }
+
+  .html-diff li:has(> [data-match-type='create'])::marker {
+    color: var(--diff-create-pill-color);
+  }
+
+  .html-diff li:has(> [data-match-type='delete'])::marker {
+    color: var(--diff-delete-pill-color);
+  }
+
+  .html-diff
+    [data-match-type='delete']:not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    color: var(--diff-delete-pill-color);
+    text-decoration-color: var(--diff-delete-pill-color);
+    text-decoration-line: line-through;
+    background-color: var(--diff-delete-pill-bg);
+    border-radius: var(--radius-medium);
+    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
+    text-decoration-thickness: var(--stroke-width-small);
+    vertical-align: baseline;
+  }
+
+  .html-diff
+    a[data-match-type='delete']:not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    color: var(--diff-delete-link-color);
+  }
+
+  .html-diff
+    a[data-match-type='create']:not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    color: var(--diff-create-link-color);
+  }
+
+  .html-diff
+    [data-match-type='create']:not(img):not([data-enable-match='false']):not(
+      :is([data-enable-match='false'] *)
+    ) {
+    background-color: var(--diff-create-pill-bg);
+    color: var(--diff-create-pill-color);
+    border-radius: var(--radius-medium);
+    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
+    vertical-align: baseline;
+  }
+
+  .html-diff-create-inline-wrapper,
+  .html-diff-delete-inline-wrapper {
+    display: inline-flex;
+  }
+
+  .html-diff-create-block-wrapper,
+  .html-diff-delete-block-wrapper {
+    display: flex;
+  }
+
+  .html-diff-create-inline-wrapper,
+  .html-diff-delete-inline-wrapper,
+  .html-diff-create-block-wrapper,
+  .html-diff-delete-block-wrapper {
+    position: relative;
+    align-items: center;
+    flex-direction: row;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      content: '';
+    }
+  }
+
+  @media (max-width: 768px) {
+    .html-diff:has([data-match-type='create']),
+    .html-diff:has([data-match-type='delete']) {
+      margin-block: 0;
+      padding-block: 0;
+      background-color: transparent;
+    }
+
+    .html-diff {
+      justify-content: center;
+    }
+
+    .html-diff p {
+      align-content: center;
+    }
+
+    .html-diff p:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h1:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h2:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h3:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h4:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h5:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff h6:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff blockquote:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff pre:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff p:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h1:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h2:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h3:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h4:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h5:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff h6:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff blockquote:not([data-enable-match='false']):has([data-match-type='delete']),
+    .html-diff pre:not([data-enable-match='false']):has([data-match-type='delete']) {
+      &::before {
+        top: calc(var(--spacer-1) * -1);
+        bottom: calc(var(--spacer-1) * -1);
+        left: calc(var(--spacer-2) * -1);
+        right: calc(var(--spacer-2) * -1);
+      }
+    }
+
+    .html-diff li:not([data-enable-match='false']):has([data-match-type='create']),
+    .html-diff li:not([data-enable-match='false']):has([data-match-type='delete']) {
+      &::before {
+        left: calc(var(--spacer-2) * -1);
+        right: calc(var(--spacer-2) * -1);
+      }
+    }
+  }
+}
diff --git a/packages/ui/src/elements/HTMLDiff/index.scss b/packages/ui/src/elements/HTMLDiff/index.scss
deleted file mode 100644
index 26647854f81..00000000000
--- a/packages/ui/src/elements/HTMLDiff/index.scss
+++ /dev/null
@@ -1,170 +0,0 @@
-@import '../../scss/styles.scss';
-@import './colors.scss';
-
-@layer payload-default {
-  .html-diff {
-    font-size: base(0.7);
-    letter-spacing: 0.02em;
-
-    &-no-value {
-      color: var(--theme-elevation-400);
-    }
-
-    pre {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    // Apply background color to parents that have children with diffs
-    p,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    blockquote,
-    pre,
-    h6 {
-      &:not([data-enable-match='false']) {
-        &:has([data-match-type='create']) {
-          position: relative;
-          z-index: 1;
-          &::before {
-            content: '';
-            position: absolute;
-            top: -(base(0.5));
-            bottom: -(base(0.5));
-            left: -10px;
-            right: -(base(0.5));
-            display: block;
-            background-color: var(--diff-create-parent-bg);
-            color: var(--diff-create-parent-color);
-            z-index: -1; /* Place behind the text */
-          }
-        }
-
-        &:has([data-match-type='delete']) {
-          position: relative;
-          z-index: 1;
-          &::before {
-            content: '';
-            position: absolute;
-            top: -(base(0.5));
-            bottom: -(base(0.5));
-            left: -(base(0.5));
-            right: -10px;
-            display: block;
-            background-color: var(--diff-delete-parent-bg);
-            color: var(--diff-delete-parent-color);
-            z-index: -1; /* Place behind the text */
-          }
-        }
-      }
-    }
-
-    li {
-      &:not([data-enable-match='false']) {
-        &:has([data-match-type='create']) {
-          position: relative;
-          z-index: 1;
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: -10px;
-            right: -(base(0.5));
-            display: block;
-            background-color: var(--diff-create-parent-bg);
-            color: var(--diff-create-parent-color);
-            z-index: -1; /* Place behind the text */
-          }
-        }
-
-        &:has([data-match-type='delete']) {
-          position: relative;
-          z-index: 1;
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: -(base(0.5));
-            right: -10px;
-            display: block;
-            background-color: var(--diff-delete-parent-bg);
-            color: var(--diff-delete-parent-color);
-            z-index: -1; /* Place behind the text */
-          }
-        }
-      }
-    }
-
-    li::marker {
-      color: var(--theme-text);
-    }
-
-    [data-match-type='delete']:not([data-enable-match='false']):not(
-        :is([data-enable-match='false'] *)
-      ) {
-      color: var(--diff-delete-pill-color);
-      text-decoration-color: var(--diff-delete-pill-color);
-      text-decoration-line: line-through;
-      background-color: var(--diff-delete-pill-bg);
-      border-radius: 4px;
-      text-decoration-thickness: 1px;
-    }
-
-    a[data-match-type='delete']
-      :not([data-enable-match='false'])
-      :not(:is([data-enable-match='false'] *)) {
-      color: var(--diff-delete-link-color);
-    }
-
-    // :not(img) required to increase specificity
-    a[data-match-type='create']:not(img)
-      :not([data-enable-match='false'])
-      :not(:is([data-enable-match='false'] *)) {
-      color: var(--diff-create-link-color);
-    }
-
-    [data-match-type='create']:not(img):not([data-enable-match='false']):not(
-        :is([data-enable-match='false'] *)
-      ) {
-      background-color: var(--diff-create-pill-bg);
-      color: var(--diff-create-pill-color);
-      border-radius: 4px;
-    }
-
-    .html-diff {
-      &-create-inline-wrapper,
-      &-delete-inline-wrapper {
-        display: inline-flex;
-      }
-
-      &-create-block-wrapper,
-      &-delete-block-wrapper {
-        display: flex;
-      }
-
-      &-create-inline-wrapper,
-      &-delete-inline-wrapper,
-      &-create-block-wrapper,
-      &-delete-block-wrapper {
-        position: relative;
-        align-items: center;
-        flex-direction: row;
-
-        &::after {
-          position: absolute;
-          top: 0;
-          left: 0;
-          display: block;
-          width: 100%;
-          height: 100%;
-          content: '';
-        }
-      }
-    }
-  }
-}
diff --git a/packages/ui/src/elements/HTMLDiff/index.tsx b/packages/ui/src/elements/HTMLDiff/index.tsx
index 108b87a5574..04c6a14b93e 100644
--- a/packages/ui/src/elements/HTMLDiff/index.tsx
+++ b/packages/ui/src/elements/HTMLDiff/index.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 
 import { HtmlDiff } from './diff/index.js'
-import './index.scss'
+import './colors.css'
+import './index.css'
 
 export { escapeDiffHTML, unescapeDiffHTML } from './escapeHtml.js'
 
diff --git a/packages/ui/src/elements/Popup/index.css b/packages/ui/src/elements/Popup/index.css
index 538de506cbd..9de59504030 100644
--- a/packages/ui/src/elements/Popup/index.css
+++ b/packages/ui/src/elements/Popup/index.css
@@ -42,7 +42,7 @@
   }
 
   .popup__content.popup--size-small {
-    min-width: 100px;
+    min-width: 80px;
   }
 
   .popup__content.popup--size-large {
diff --git a/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx b/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx
index d3a4ddba923..bc8c8e55a00 100644
--- a/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx
@@ -30,7 +30,7 @@ export const DropdownIndicator: React.FC<
       }}
       type="button"
     >
-      <ChevronIcon className={`${baseClass}__icon`} />
+      <ChevronIcon className={`${baseClass}__icon`} size={16} />
     </button>
   )
 }
diff --git a/test/localization/e2e.spec.ts b/test/localization/e2e.spec.ts
index 2d344ff3bd6..61fe930494a 100644
--- a/test/localization/e2e.spec.ts
+++ b/test/localization/e2e.spec.ts
@@ -934,7 +934,7 @@ describe('Localization', () => {
         await page.goto(urlAllFieldsLocalized.versions(docID))
 
         const firstRow = page.locator('tbody tr').first()
-        await expect(firstRow.locator('.pill__label span')).toHaveText('Currently Published')
+        await expect(firstRow.locator('.status-cell span')).toHaveText('Currently Published')
       })
 
       test('should only show published status when viewing the published locale', async () => {
@@ -961,7 +961,7 @@ describe('Localization', () => {
         await changeLocale(page, defaultLocale)
 
         const firstRow = page.locator('tbody tr').first()
-        await expect(firstRow.locator('.pill__label span')).toHaveText('Current Draft')
+        await expect(firstRow.locator('.status-cell span')).toHaveText('Current Draft')
       })
     })
   })
diff --git a/test/v4/baseConfig.ts b/test/v4/baseConfig.ts
index 0971a217136..e5ae45d490b 100644
--- a/test/v4/baseConfig.ts
+++ b/test/v4/baseConfig.ts
@@ -6,6 +6,7 @@ import { type CollectionConfig, type Config } from 'payload'
 import { resetDB } from '../__helpers/shared/clearAndSeed/reset.js'
 import { devUser } from '../credentials.js'
 import { blocksSeedData } from './seed/blocksSeedData.js'
+import { seedVersionsDiff } from './seed/versionsDiffData.js'
 import {
   blocksFieldsSlug,
   collectionSlugs,
@@ -72,12 +73,17 @@ import Rubbish from './collections/Trash/index.js'
 import Unauthorized from './collections/Unauthorized/index.js'
 import Uploads from './collections/Upload/index.js'
 import UploadFields from './collections/UploadField/index.js'
+import { VersionsDiff } from './collections/VersionsDiff/index.js'
 import {
   codeContent,
   getRichTextContent,
   getTypographyContent,
+  getUpdatedRichTextContent,
+  getUpdatedTypographyContent,
   listsContent,
   tableContent,
+  updatedCodeContent,
+  updatedListsContent,
 } from './seed/richTextData.js'
 
 export const collections: CollectionConfig[] = [
@@ -140,6 +146,7 @@ export const collections: CollectionConfig[] = [
   Autosave,
   Rubbish,
   Unauthorized,
+  VersionsDiff,
 ]
 
 export const baseConfig: Partial<Config> = {
@@ -255,7 +262,7 @@ export const baseConfig: Partial<Config> = {
 
       const richTextContent = getRichTextContent(formattedUploadID, formattedUserID)
 
-      await payload.create({
+      const richTextDoc = await payload.create({
         collection: richTextFieldsSlug,
         data: {
           title: 'Data harvest \u2013 how AI and sensors are revolutionizing farming',
@@ -266,6 +273,18 @@ export const baseConfig: Partial<Config> = {
           code: codeContent,
         },
       })
+
+      // Create a second version with updated content for diff testing
+      await payload.update({
+        id: richTextDoc.id,
+        collection: richTextFieldsSlug,
+        data: {
+          content: getUpdatedRichTextContent(formattedUploadID, formattedUserID),
+          lists: updatedListsContent,
+          typography: getUpdatedTypographyContent(formattedUserID),
+          code: updatedCodeContent,
+        },
+      })
     }
 
     // Seed relationship-fields to test join field
@@ -497,6 +516,9 @@ export const baseConfig: Partial<Config> = {
       },
     })
 
+    // Seed versions-diff collection with two versions for diff testing
+    await seedVersionsDiff(payload)
+
     // Seed draft-versions collection with many versions for pagination testing
     const { id: draftVersionsDocID } = await payload.create({
       collection: draftVersionsSlug,
diff --git a/test/v4/collections/RichText/index.ts b/test/v4/collections/RichText/index.ts
index 5ccc7820640..007651b4093 100644
--- a/test/v4/collections/RichText/index.ts
+++ b/test/v4/collections/RichText/index.ts
@@ -13,6 +13,9 @@ import { richTextFieldsSlug } from '../../slugs.js'
 
 const RichTextFields: CollectionConfig = {
   slug: richTextFieldsSlug,
+  versions: {
+    drafts: true,
+  },
   fields: [
     {
       name: 'content',
diff --git a/test/v4/collections/VersionsDiff/index.ts b/test/v4/collections/VersionsDiff/index.ts
new file mode 100644
index 00000000000..c85140681d7
--- /dev/null
+++ b/test/v4/collections/VersionsDiff/index.ts
@@ -0,0 +1,191 @@
+import type { CollectionConfig } from 'payload'
+
+import { tagsSlug, uploadsSlug, versionsDiffSlug } from '../../slugs.js'
+
+export const VersionsDiff: CollectionConfig = {
+  slug: versionsDiffSlug,
+  admin: {
+    useAsTitle: 'title',
+    group: 'Versions',
+  },
+  versions: {
+    drafts: true,
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      localized: true,
+      required: true,
+    },
+    {
+      name: 'array',
+      type: 'array',
+      fields: [
+        {
+          name: 'arrayText',
+          type: 'text',
+        },
+        {
+          name: 'nestedArray',
+          type: 'array',
+          fields: [
+            {
+              name: 'nestedText',
+              type: 'text',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'blocks',
+      type: 'blocks',
+      blocks: [
+        {
+          slug: 'textBlock',
+          fields: [
+            {
+              name: 'blockText',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          slug: 'numberBlock',
+          fields: [
+            {
+              name: 'blockNumber',
+              type: 'number',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'checkbox',
+      type: 'checkbox',
+    },
+    {
+      name: 'code',
+      type: 'code',
+    },
+    {
+      name: 'date',
+      type: 'date',
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+    },
+    {
+      name: 'email',
+      type: 'email',
+    },
+    {
+      name: 'group',
+      type: 'group',
+      fields: [
+        {
+          name: 'nestedText',
+          type: 'text',
+        },
+        {
+          name: 'nestedNumber',
+          type: 'number',
+        },
+      ],
+    },
+    {
+      name: 'json',
+      type: 'json',
+    },
+    {
+      name: 'number',
+      type: 'number',
+    },
+    {
+      name: 'numberMany',
+      type: 'number',
+      hasMany: true,
+    },
+    {
+      name: 'point',
+      type: 'point',
+    },
+    {
+      name: 'radio',
+      type: 'radio',
+      options: [
+        { label: 'Small', value: 'small' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'Large', value: 'large' },
+      ],
+    },
+    {
+      name: 'relationship',
+      type: 'relationship',
+      relationTo: tagsSlug,
+    },
+    {
+      name: 'relationshipMany',
+      type: 'relationship',
+      relationTo: tagsSlug,
+      hasMany: true,
+    },
+    {
+      name: 'select',
+      type: 'select',
+      options: [
+        { label: 'Option 1', value: 'option-1' },
+        { label: 'Option 2', value: 'option-2' },
+        { label: 'Option 3', value: 'option-3' },
+      ],
+    },
+    {
+      name: 'selectMany',
+      type: 'select',
+      hasMany: true,
+      options: [
+        { label: 'Option 1', value: 'option-1' },
+        { label: 'Option 2', value: 'option-2' },
+        { label: 'Option 3', value: 'option-3' },
+      ],
+    },
+    {
+      name: 'tabs',
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Tab One',
+          fields: [
+            {
+              name: 'tabText',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          label: 'Tab Two',
+          fields: [
+            {
+              name: 'tabNumber',
+              type: 'number',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'upload',
+      type: 'upload',
+      relationTo: uploadsSlug,
+    },
+    {
+      name: 'uploadMany',
+      type: 'upload',
+      relationTo: uploadsSlug,
+      hasMany: true,
+    },
+  ],
+}
diff --git a/test/v4/payload-types.ts b/test/v4/payload-types.ts
index 8480f884cc5..ee3f035ec82 100644
--- a/test/v4/payload-types.ts
+++ b/test/v4/payload-types.ts
@@ -103,6 +103,7 @@ export interface Config {
     autosave: Autosave;
     rubbish: Rubbish;
     'unauthorized-test': UnauthorizedTest;
+    'versions-diff': VersionsDiff;
     'payload-kv': PayloadKv;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -159,6 +160,7 @@ export interface Config {
     autosave: AutosaveSelect<false> | AutosaveSelect<true>;
     rubbish: RubbishSelect<false> | RubbishSelect<true>;
     'unauthorized-test': UnauthorizedTestSelect<false> | UnauthorizedTestSelect<true>;
+    'versions-diff': VersionsDiffSelect<false> | VersionsDiffSelect<true>;
     'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -990,6 +992,7 @@ export interface RichTextField {
   } | null;
   updatedAt: string;
   createdAt: string;
+  _status?: ('draft' | 'published') | null;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
@@ -1295,6 +1298,79 @@ export interface UnauthorizedTest {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "versions-diff".
+ */
+export interface VersionsDiff {
+  id: string;
+  title: string;
+  array?:
+    | {
+        arrayText?: string | null;
+        nestedArray?:
+          | {
+              nestedText?: string | null;
+              id?: string | null;
+            }[]
+          | null;
+        id?: string | null;
+      }[]
+    | null;
+  blocks?:
+    | (
+        | {
+            blockText?: string | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'textBlock';
+          }
+        | {
+            blockNumber?: number | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'numberBlock';
+          }
+      )[]
+    | null;
+  checkbox?: boolean | null;
+  code?: string | null;
+  date?: string | null;
+  description?: string | null;
+  email?: string | null;
+  group?: {
+    nestedText?: string | null;
+    nestedNumber?: number | null;
+  };
+  json?:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+  number?: number | null;
+  numberMany?: number[] | null;
+  /**
+   * @minItems 2
+   * @maxItems 2
+   */
+  point?: [number, number] | null;
+  radio?: ('small' | 'medium' | 'large') | null;
+  relationship?: (string | null) | Tag;
+  relationshipMany?: (string | Tag)[] | null;
+  select?: ('option-1' | 'option-2' | 'option-3') | null;
+  selectMany?: ('option-1' | 'option-2' | 'option-3')[] | null;
+  tabText?: string | null;
+  tabNumber?: number | null;
+  upload?: (string | null) | Upload;
+  uploadMany?: (string | Upload)[] | null;
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-kv".
@@ -1462,6 +1538,10 @@ export interface PayloadLockedDocument {
     | ({
         relationTo: 'unauthorized-test';
         value: string | UnauthorizedTest;
+      } | null)
+    | ({
+        relationTo: 'versions-diff';
+        value: string | VersionsDiff;
       } | null);
   globalSlug?: string | null;
   user: {
@@ -2022,6 +2102,7 @@ export interface RichTextFieldsSelect<T extends boolean = true> {
   lists?: T;
   updatedAt?: T;
   createdAt?: T;
+  _status?: T;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
@@ -2267,6 +2348,70 @@ export interface UnauthorizedTestSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "versions-diff_select".
+ */
+export interface VersionsDiffSelect<T extends boolean = true> {
+  title?: T;
+  array?:
+    | T
+    | {
+        arrayText?: T;
+        nestedArray?:
+          | T
+          | {
+              nestedText?: T;
+              id?: T;
+            };
+        id?: T;
+      };
+  blocks?:
+    | T
+    | {
+        textBlock?:
+          | T
+          | {
+              blockText?: T;
+              id?: T;
+              blockName?: T;
+            };
+        numberBlock?:
+          | T
+          | {
+              blockNumber?: T;
+              id?: T;
+              blockName?: T;
+            };
+      };
+  checkbox?: T;
+  code?: T;
+  date?: T;
+  description?: T;
+  email?: T;
+  group?:
+    | T
+    | {
+        nestedText?: T;
+        nestedNumber?: T;
+      };
+  json?: T;
+  number?: T;
+  numberMany?: T;
+  point?: T;
+  radio?: T;
+  relationship?: T;
+  relationshipMany?: T;
+  select?: T;
+  selectMany?: T;
+  tabText?: T;
+  tabNumber?: T;
+  upload?: T;
+  uploadMany?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  _status?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-kv_select".
diff --git a/test/v4/seed/richTextData.ts b/test/v4/seed/richTextData.ts
index 63a4be891ea..4ee002caffc 100644
--- a/test/v4/seed/richTextData.ts
+++ b/test/v4/seed/richTextData.ts
@@ -1,5 +1,280 @@
 import { uploadsSlug } from '../slugs.js'
 
+export function getUpdatedRichTextContent(
+  formattedUploadID: number | string,
+  formattedUserID?: number | string,
+) {
+  return JSON.parse(
+    JSON.stringify({
+      root: {
+        type: 'root',
+        format: '',
+        indent: 0,
+        version: 1,
+        children: [
+          {
+            type: 'heading',
+            tag: 'h1',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Smart farming \u2013 the future of precision agriculture',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            textFormat: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Modern agriculture is undergoing a transformation driven by data and automation. Farms of the future will rely on real-time analytics, autonomous equipment, and sustainable practices to feed a growing population.',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'upload',
+            version: 3,
+            format: '',
+            relationTo: uploadsSlug,
+            value: '{{UPLOAD_ID}}',
+          },
+          {
+            type: 'horizontalrule',
+            version: 1,
+          },
+          {
+            type: 'heading',
+            tag: 'h3',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Key technologies',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'list',
+            listType: 'check',
+            start: 1,
+            tag: 'ul',
+            version: 1,
+            direction: null,
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'listitem',
+                version: 1,
+                direction: 'ltr',
+                format: '',
+                indent: 0,
+                value: 1,
+                checked: true,
+                children: [
+                  {
+                    type: 'text',
+                    version: 1,
+                    text: 'Soil moisture sensors deployed',
+                    detail: 0,
+                    format: 0,
+                    mode: 'normal',
+                    style: '',
+                  },
+                ],
+              },
+              {
+                type: 'listitem',
+                version: 1,
+                direction: 'ltr',
+                format: '',
+                indent: 0,
+                value: 2,
+                checked: true,
+                children: [
+                  {
+                    type: 'text',
+                    version: 1,
+                    text: 'Drone mapping integrated',
+                    detail: 0,
+                    format: 0,
+                    mode: 'normal',
+                    style: '',
+                  },
+                ],
+              },
+              {
+                type: 'listitem',
+                version: 1,
+                direction: 'ltr',
+                format: '',
+                indent: 0,
+                value: 3,
+                checked: false,
+                children: [
+                  {
+                    type: 'text',
+                    version: 1,
+                    text: 'Autonomous tractor navigation',
+                    detail: 0,
+                    format: 0,
+                    mode: 'normal',
+                    style: '',
+                  },
+                ],
+              },
+              {
+                type: 'listitem',
+                version: 1,
+                direction: 'ltr',
+                format: '',
+                indent: 0,
+                value: 4,
+                checked: false,
+                children: [
+                  {
+                    type: 'text',
+                    version: 1,
+                    text: 'AI-powered crop disease detection',
+                    detail: 0,
+                    format: 0,
+                    mode: 'normal',
+                    style: '',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'block',
+            version: 2,
+            format: '',
+            fields: {
+              id: 'seed-banner-1',
+              blockType: 'banner',
+              style: 'info',
+              content: {
+                root: {
+                  type: 'root',
+                  format: '',
+                  indent: 0,
+                  version: 1,
+                  children: [
+                    {
+                      type: 'paragraph',
+                      version: 1,
+                      direction: 'ltr',
+                      format: '',
+                      indent: 0,
+                      textFormat: 0,
+                      children: [
+                        {
+                          type: 'text',
+                          version: 1,
+                          text: 'Did you know? Precision farming can reduce water usage by up to 30% while maintaining crop yields.',
+                          detail: 0,
+                          format: 0,
+                          mode: 'normal',
+                          style: '',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          {
+            type: 'heading',
+            tag: 'h6',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'SUSTAINABILITY GOALS',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            textFormat: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Eco-friendly and organic farming not only benefit the environment, but they also support the local economy. By using sustainable practices, farmers can reduce their dependence on expensive synthetic inputs, resulting in lower production costs and higher profits.',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'quote',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'The greatest threat to our planet is the belief that someone else will save it.',
+                detail: 0,
+                format: 2,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+        ],
+      },
+    })
+      .replace(/"\{\{UPLOAD_ID\}\}"/g, `${formattedUploadID}`)
+      .replace(/"\{\{USER_ID\}\}"/g, formattedUserID !== undefined ? `${formattedUserID}` : '""'),
+  )
+}
+
 export function getRichTextContent(
   formattedUploadID: number | string,
   formattedUserID?: number | string,
@@ -822,3 +1097,466 @@ export const codeContent = {
     ],
   },
 }
+
+// --- Updated V2 variants for version diff testing ---
+
+export function getUpdatedTypographyContent(formattedUserID?: number | string) {
+  return JSON.parse(
+    JSON.stringify({
+      root: {
+        type: 'root',
+        format: '',
+        indent: 0,
+        version: 1,
+        children: [
+          {
+            type: 'heading',
+            tag: 'h1',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Heading 1 (updated)',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'heading',
+            tag: 'h2',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Heading 2',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'heading',
+            tag: 'h3',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'New Heading 3',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'heading',
+            tag: 'h4',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Heading 4',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          // h5 removed
+          {
+            type: 'heading',
+            tag: 'h6',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Heading 6',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'horizontalrule',
+            version: 1,
+          },
+          {
+            type: 'paragraph',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            textFormat: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Updated paragraph replacing the original precision agriculture text with new content about vertical farming and controlled environment agriculture.',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            textFormat: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Bold and italic',
+                detail: 0,
+                format: 3,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            textFormat: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'Super',
+                detail: 0,
+                format: 64,
+                mode: 'normal',
+                style: '',
+              },
+              {
+                type: 'text',
+                version: 1,
+                text: 'script, ',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+              {
+                type: 'text',
+                version: 1,
+                text: 'Sub',
+                detail: 0,
+                format: 32,
+                mode: 'normal',
+                style: '',
+              },
+              {
+                type: 'text',
+                version: 1,
+                text: 'script',
+                detail: 0,
+                format: 0,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            textFormat: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'inline code updated',
+                detail: 0,
+                format: 16,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            textFormat: 0,
+            children: [
+              {
+                type: 'link',
+                version: 3,
+                direction: 'ltr',
+                format: '',
+                indent: 0,
+                fields: {
+                  linkType: 'custom',
+                  newTab: false,
+                  url: 'https://payloadcms.com',
+                },
+                children: [
+                  {
+                    type: 'text',
+                    version: 1,
+                    text: 'Updated external link',
+                    detail: 0,
+                    format: 0,
+                    mode: 'normal',
+                    style: '',
+                  },
+                ],
+              },
+            ],
+          },
+          ...(formattedUserID !== undefined
+            ? [
+                {
+                  type: 'paragraph',
+                  version: 1,
+                  direction: 'ltr',
+                  format: '',
+                  indent: 0,
+                  textFormat: 0,
+                  children: [
+                    {
+                      type: 'link',
+                      version: 3,
+                      direction: 'ltr',
+                      format: '',
+                      indent: 0,
+                      fields: {
+                        linkType: 'internal',
+                        newTab: false,
+                        doc: {
+                          value: '{{USER_ID}}',
+                          relationTo: 'users',
+                        },
+                      },
+                      children: [
+                        {
+                          type: 'text',
+                          version: 1,
+                          text: 'Internal link',
+                          detail: 0,
+                          format: 0,
+                          mode: 'normal',
+                          style: '',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ]
+            : []),
+          {
+            type: 'quote',
+            version: 1,
+            direction: 'ltr',
+            format: '',
+            indent: 0,
+            children: [
+              {
+                type: 'text',
+                version: 1,
+                text: 'A new blockquote added in the typography update.',
+                detail: 0,
+                format: 2,
+                mode: 'normal',
+                style: '',
+              },
+            ],
+          },
+        ],
+      },
+    }).replace(/"\{\{USER_ID\}\}"/g, formattedUserID !== undefined ? `${formattedUserID}` : '""'),
+  )
+}
+
+export const updatedListsContent = {
+  root: {
+    type: 'root',
+    format: '',
+    indent: 0,
+    version: 1,
+    direction: null,
+    children: [
+      // Ordered list — changed items, removed deepest nesting
+      nestedList('number', 'ol', [
+        listItem(0, 1, [textNode('Lorem (updated)')]),
+        listItem(0, 2, [
+          nestedList('number', 'ol', [
+            listItem(1, 1, [textNode('Ipsum')]),
+            listItem(1, 2, [
+              nestedList('number', 'ol', [listItem(2, 1, [textNode('Dolor sit amet')])]),
+            ]),
+          ]),
+        ]),
+        listItem(0, 3, [textNode('New third item')]),
+      ]),
+      // Unordered list — reordered and changed
+      nestedList('bullet', 'ul', [
+        listItem(0, 1, [textNode('Ipsum')]),
+        listItem(0, 2, [textNode('Lorem')]),
+        listItem(0, 3, [
+          nestedList('bullet', 'ul', [
+            listItem(1, 1, [textNode('Dolor')]),
+            listItem(1, 2, [textNode('New nested item')]),
+          ]),
+        ]),
+      ]),
+      // Checklist — toggled states and added items
+      nestedList('check', 'ul', [
+        checkListItem(0, 1, true, [textNode('Lorem')]),
+        checkListItem(0, 2, false, [textNode('Ipsum')]),
+        checkListItem(0, 3, true, [textNode('New checked item')]),
+        checkListItem(0, 4, false, [
+          nestedList('check', 'ul', [
+            checkListItem(1, 1, true, [textNode('Dolor')]),
+            checkListItem(1, 2, false, [textNode('Sit')]),
+          ]),
+        ]),
+      ]),
+    ],
+  },
+}
+
+export const updatedCodeContent = {
+  root: {
+    type: 'root',
+    format: '',
+    indent: 0,
+    version: 1,
+    direction: null,
+    children: [
+      {
+        type: 'heading',
+        tag: 'h2',
+        version: 1,
+        direction: 'ltr',
+        format: '',
+        indent: 0,
+        children: [
+          {
+            type: 'text',
+            version: 1,
+            text: 'Smart farming \u2013 configuration and setup',
+            detail: 0,
+            format: 0,
+            mode: 'normal',
+            style: '',
+          },
+        ],
+      },
+      {
+        type: 'paragraph',
+        version: 1,
+        direction: 'ltr',
+        format: '',
+        indent: 0,
+        textFormat: 0,
+        children: [
+          {
+            type: 'text',
+            version: 1,
+            text: 'Modern Payload configurations leverage database adapters, plugins, and rich text editors for flexible content management.',
+            detail: 0,
+            format: 0,
+            mode: 'normal',
+            style: '',
+          },
+        ],
+      },
+      {
+        type: 'block',
+        version: 2,
+        format: '',
+        fields: {
+          id: '6a7b8c9d0e1f2a3b4c5d6e7f',
+          blockName: '',
+          blockType: 'Code',
+          code: "import { postgresAdapter } from '@payloadcms/db-postgres'\nimport sharp from 'sharp'\nimport path from 'path'\nimport { buildConfig } from 'payload'\nimport { fileURLToPath } from 'url'\n\nimport { Categories } from './collections/Categories'\nimport { Media } from './collections/Media'\nimport { Pages } from './collections/Pages'\nimport { Posts } from './collections/Posts'\nimport { Users } from './collections/Users'\nimport { Footer } from './Footer/config'\nimport { Header } from './Header/config'\nimport { plugins } from './plugins'\nimport { defaultLexical } from '@/fields/defaultLexical'\nimport { getServerSideURL } from './utilities/getURL'\n\nconst filename = fileURLToPath(import.meta.url)\nconst dirname = path.dirname(filename)\n\nexport default buildConfig({\n  admin: {\n    components: {\n      beforeLogin: ['@/components/BeforeLogin'],\n    },\n    importMap: {\n      baseDir: path.resolve(dirname),\n    },\n    user: Users.slug,\n  },\n  editor: defaultLexical,\n  db: postgresAdapter({\n    pool: { connectionString: process.env.DATABASE_URI },\n  }),\n  collections: [Pages, Posts, Media, Categories, Users],\n  cors: [getServerSideURL()].filter(Boolean),\n  globals: [Header, Footer],\n  plugins: [\n    ...plugins,\n  ],\n  secret: process.env.PAYLOAD_SECRET,\n  sharp,\n  typescript: {\n    outputFile: path.resolve(dirname, 'payload-types.ts'),\n  },\n})",
+          language: 'typescript',
+        },
+      },
+      {
+        type: 'horizontalrule',
+        version: 1,
+      },
+      {
+        type: 'heading',
+        tag: 'h6',
+        version: 1,
+        direction: 'ltr',
+        format: '',
+        indent: 0,
+        children: [
+          {
+            type: 'text',
+            version: 1,
+            text: 'DEPLOYMENT NOTES',
+            detail: 0,
+            format: 0,
+            mode: 'normal',
+            style: '',
+          },
+        ],
+      },
+      {
+        type: 'paragraph',
+        version: 1,
+        direction: 'ltr',
+        format: '',
+        indent: 0,
+        textFormat: 0,
+        children: [
+          {
+            type: 'text',
+            version: 1,
+            text: 'When deploying to production, ensure environment variables are set and the database connection string is configured correctly. Use connection pooling for optimal performance.',
+            detail: 0,
+            format: 0,
+            mode: 'normal',
+            style: '',
+          },
+        ],
+      },
+    ],
+  },
+}
diff --git a/test/v4/seed/versionsDiffData.ts b/test/v4/seed/versionsDiffData.ts
new file mode 100644
index 00000000000..3c1e5471070
--- /dev/null
+++ b/test/v4/seed/versionsDiffData.ts
@@ -0,0 +1,79 @@
+import type { Payload } from 'payload'
+
+import { tagsSlug, uploadsSlug, versionsDiffSlug } from '../slugs.js'
+
+export async function seedVersionsDiff(payload: Payload) {
+  const tagDocs = await payload.find({ collection: tagsSlug, limit: 3 })
+  const tagIds = tagDocs.docs.map((d) => d.id)
+
+  const uploadDocs = await payload.find({ collection: uploadsSlug, limit: 2 })
+  const uploadIds = uploadDocs.docs.map((d) => d.id)
+
+  const versionsDiffDoc = await payload.create({
+    collection: versionsDiffSlug,
+    data: {
+      _status: 'published',
+      array: [{ arrayText: 'First item' }, { arrayText: 'Second item' }],
+      blocks: [{ blockText: 'Original block text', blockType: 'textBlock' }],
+      checkbox: false,
+      code: 'const x = 1;',
+      date: '2024-01-15T00:00:00.000Z',
+      description: 'Original description text',
+      email: 'original@example.com',
+      group: {
+        nestedNumber: 100,
+        nestedText: 'Original nested',
+      },
+      json: { key: 'original' },
+      number: 42,
+      numberMany: [1, 2, 3],
+      point: [10, 20],
+      radio: 'small',
+      relationship: tagIds[0],
+      relationshipMany: [tagIds[0]!, tagIds[1]!],
+      select: 'option-1',
+      selectMany: ['option-1', 'option-2'],
+      tabNumber: 10,
+      tabText: 'Original tab text',
+      title: 'Original Title',
+      upload: uploadIds[0],
+      uploadMany: uploadIds.length > 1 ? [uploadIds[0]!, uploadIds[1]!] : [uploadIds[0]!],
+    },
+  })
+
+  await payload.update({
+    id: versionsDiffDoc.id,
+    collection: versionsDiffSlug,
+    data: {
+      _status: 'published',
+      array: [{ arrayText: 'Updated first item' }, { arrayText: 'New third item' }],
+      blocks: [
+        { blockText: 'Updated block text', blockType: 'textBlock' },
+        { blockNumber: 42, blockType: 'numberBlock' },
+      ],
+      checkbox: true,
+      code: 'const x = 2;\nconst y = 3;',
+      date: '2025-06-01T00:00:00.000Z',
+      description: 'Updated description with more content',
+      email: 'updated@example.com',
+      group: {
+        nestedNumber: 200,
+        nestedText: 'Updated nested',
+      },
+      json: { extra: true, key: 'updated' },
+      number: 99,
+      numberMany: [4, 5],
+      point: [30, 40],
+      radio: 'large',
+      relationship: tagIds[1],
+      relationshipMany: [tagIds[1]!, tagIds[2]!],
+      select: 'option-2',
+      selectMany: ['option-2', 'option-3'],
+      tabNumber: 50,
+      tabText: 'Updated tab text',
+      title: 'Updated Title',
+      upload: uploadIds[1] || uploadIds[0],
+      uploadMany: uploadIds.length > 1 ? [uploadIds[1]!] : [uploadIds[0]!],
+    },
+  })
+}
diff --git a/test/v4/slugs.ts b/test/v4/slugs.ts
index d02226f06f3..3537c28efae 100644
--- a/test/v4/slugs.ts
+++ b/test/v4/slugs.ts
@@ -34,6 +34,7 @@ export const orderableSlug = 'orderable'
 export const rubbishSlug = 'rubbish'
 export const searchBarTestSlug = 'search-bar-test'
 export const unauthorizedSlug = 'unauthorized-test'
+export const versionsDiffSlug = 'versions-diff'
 
 export const collectionSlugs = [
   'users',
@@ -72,5 +73,6 @@ export const collectionSlugs = [
   rubbishSlug,
   searchBarTestSlug,
   unauthorizedSlug,
+  versionsDiffSlug,
   'payload-query-presets',
 ]
diff --git a/test/versions/e2e.spec.ts b/test/versions/e2e.spec.ts
index 35af376fe3b..a31500ee601 100644
--- a/test/versions/e2e.spec.ts
+++ b/test/versions/e2e.spec.ts
@@ -2304,8 +2304,8 @@ describe('Versions', () => {
 
       const checkbox = page.locator('[data-field-path="checkbox"]')
 
-      await expect(checkbox.locator('.html-diff__diff-old')).toHaveText('true')
-      await expect(checkbox.locator('.html-diff__diff-new')).toHaveText('false')
+      await expect(checkbox.locator('.checkbox-diff__label--delete')).toHaveText('Checked')
+      await expect(checkbox.locator('.checkbox-diff__label--create')).toHaveText('Unchecked')
     })
 
     test('correctly renders diff for code fields', async () => {
@@ -2437,7 +2437,7 @@ describe('Versions', () => {
 
       const zeroDepthRelationship = page.locator('[data-field-path="zeroDepthRelationship"]')
 
-      await expect(zeroDepthRelationship.locator('.html-diff__diff-old')).toBeEmpty()
+      await expect(zeroDepthRelationship.locator('.diff-no-value')).toHaveText('No value')
       await expect(
         zeroDepthRelationship.locator('.html-diff__diff-new .relationship-diff__info'),
       ).toHaveText('dev@payloadcms.com')