diff --git a/.changeset/gold-llamas-restructure.md b/.changeset/gold-llamas-restructure.md
new file mode 100644
index 0000000000..3fc6b135bf
--- /dev/null
+++ b/.changeset/gold-llamas-restructure.md
@@ -0,0 +1,15 @@
+---
+"@ifrc-go/ui": major
+---
+
+Restructure the library around a declared component layer model (raw → generic → specific) and token specs.
+
+- **Token specs**: `textSize`, `backgroundColor`, `borderRadius` and `boxShadow` join `spacing` as token-valued props resolved through static utility classes (no more runtime style injection; `useSpacingToken` is replaced by the pure `getSpacingClassName`). Ordinal specs support offsets.
+- **Variant model**: generic components keep the two-axis `colorVariant` + `styleVariant` API; specific components expose a single curated `variant` (`Button`: `primary`/`secondary`/`tertiary`/`subtle`; `Alert`'s `type` and `ProgressBar`'s `colorVariant` are renamed to `variant`).
+- **Boolean→token conversions**: `withBackground`/`withDarkBackground`/`withLightBackground` → `backgroundColor`; `withShadow`/`withoutShadow` → `boxShadow`.
+- **Naming**: `variant` → `styleVariant` on Container/InputContainer/Heading; `containerRef` → `elementRef`; `layoutElementRef` removed.
+- **Structural**: new generic `RawOutput`→`RawDisplay` value-rendering adapter (DataDisplay and KeyFigure rebuilt on it); `KeyFigureView` → `KeyFigureCard`; `RawFileInput` split into a headless primitive plus the new `FileInputButton`; `List` removed in favor of `ListView` + `RawList` + `DefaultMessage`.
+- **HTML/ARIA-aligned renames**: `Modal`→`Dialog`, `Popup`→`Popover`, `InlineFrame`→`Iframe`, `Pager`→`Pagination`, `Label`→`DisplayLabel`, `ReducedListDisplay`→`TruncatedList`, `TextOutput`→`DataDisplay` (renders `<dl>`), the `*Output` value family → `*Display` (renders `<data>`/`<time>`), `InfoPopup`→`MoreInfo`, `DropdownMenu`→`Menu` (+ new generic `Dropdown`), `Chip` split into `ChipLayout`/`Tag`/`Selection`/`SelectionList` (replacing the `Dismissable*Output` trio), `DropdownMenuContext`→`MenuContext`.
+- **Accessibility**: form-field label/`aria-describedby`/`aria-invalid`/`role="alert"` wiring in `InputContainer`; dialog/switch/live-region/disclosure/nav roles; and the value-output pattern (native `<data value>`/`<time dateTime>` for machine + tests, `role="img"`+`aria-label` exposing the full reading of abbreviated values to screen readers). Some widget patterns (combobox, tabs roving-tabindex, tooltip keyboard) are deferred and marked `FIXME(a11y-tier2)`.
+
+See `packages/ui/MIGRATION.md` for exact call-site rewrites.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 924a83da4e..536930d482 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -91,7 +91,9 @@ jobs:
       - name: Run Chromatic
         uses: chromaui/action@v1
         with:
-          exitZeroOnChanges: true
+          # exitZeroOnChanges removed: visual diffs on a PR now fail the
+          # check so they require explicit review/acceptance. Trunk
+          # (develop) still auto-accepts via autoAcceptChanges below.
           exitOnceUploaded: true
           onlyChanged: true
           skip: "@(renovate/**|dependabot/**)"
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8e87ac57ed..55a31102ae 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -47,6 +47,9 @@ jobs:
       - name: Lint JS
         run: pnpm lint:js
 
+      - name: Test
+        run: pnpm test
+
       - name: Build
         run: pnpm build
 
diff --git a/app/src/App/PageError/index.tsx b/app/src/App/PageError/index.tsx
index 8c6d836bc7..41f190299e 100644
--- a/app/src/App/PageError/index.tsx
+++ b/app/src/App/PageError/index.tsx
@@ -58,7 +58,7 @@ function PageError() {
                     <Button
                         name={undefined}
                         onClick={toggleFullErrorVisibility}
-                        styleVariant="action"
+                        variant="tertiary"
                     >
                         {fullErrorVisible ? strings.errorPageHide : strings.errorPageShowError}
                     </Button>
diff --git a/app/src/components/CatalogueInfoCard/index.tsx b/app/src/components/CatalogueInfoCard/index.tsx
index c0bbe6a0be..4b78b818d1 100644
--- a/app/src/components/CatalogueInfoCard/index.tsx
+++ b/app/src/components/CatalogueInfoCard/index.tsx
@@ -58,8 +58,8 @@ function CatalogueInfoCard(props: Props) {
             withHeaderBorder
             headerDescription={description}
             withPadding
-            withBackground
-            withShadow
+            backgroundColor="foreground"
+            boxShadow="md"
         >
             <ListView
                 layout="block"
diff --git a/app/src/components/DiffWrapper/index.tsx b/app/src/components/DiffWrapper/index.tsx
index 47c6290d8e..0716c83c35 100644
--- a/app/src/components/DiffWrapper/index.tsx
+++ b/app/src/components/DiffWrapper/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     _cs,
@@ -68,7 +68,7 @@ function DiffWrapper<
             {children}
             {showPreviousValue
                 && (
-                    <TextOutput
+                    <DataDisplay
                         className={styles.previousValue}
                         label={strings.previousValueLabel}
                         value={previousValue}
diff --git a/app/src/components/DropdownMenuItem/i18n.json b/app/src/components/DropdownMenuItem/i18n.json
new file mode 100644
index 0000000000..4f07fa5aea
--- /dev/null
+++ b/app/src/components/DropdownMenuItem/i18n.json
@@ -0,0 +1,9 @@
+{
+    "namespace": "common",
+    "strings": {
+        "confirmation": "Confirmation",
+        "confirmMessage": "Are you sure you want to continue?",
+        "buttonCancel": "Cancel",
+        "buttonOk": "Ok"
+    }
+}
diff --git a/app/src/components/DropdownMenuItem/index.tsx b/app/src/components/DropdownMenuItem/index.tsx
index a17730a65a..e8f7b91eb7 100644
--- a/app/src/components/DropdownMenuItem/index.tsx
+++ b/app/src/components/DropdownMenuItem/index.tsx
@@ -1,24 +1,32 @@
 import {
     useCallback,
     useContext,
+    useState,
 } from 'react';
 import {
     Button,
+    ButtonLayout,
     type ButtonProps,
-    ConfirmButton,
     type ConfirmButtonProps,
+    Dialog,
+    ListView,
+    RawButton,
 } from '@ifrc-go/ui';
-import { DropdownMenuContext } from '@ifrc-go/ui/contexts';
+import { MenuContext } from '@ifrc-go/ui/contexts';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import { isDefined } from '@togglecorp/fujs';
 
 import Link, { type Props as LinkProps } from '#components/Link';
 
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
 type CommonProp = {
     persist?: boolean;
     withoutFullWidth?: boolean;
 }
 
-type ButtonTypeProps<NAME> = Omit<ButtonProps<NAME>, 'type'> & {
+type ButtonTypeProps<NAME> = Omit<ButtonProps<NAME>, 'type' | 'variant' | 'withFullWidth'> & {
     type: 'button';
 }
 
@@ -27,7 +35,7 @@ type LinkTypeProps = LinkProps & {
     onClick?: never;
 }
 
-type ConfirmButtonTypeProps<NAME> = Omit<ConfirmButtonProps<NAME>, 'type'> & {
+type ConfirmButtonTypeProps<NAME> = Omit<ConfirmButtonProps<NAME>, 'type' | 'variant' | 'withFullWidth'> & {
     type: 'confirm-button',
 }
 
@@ -43,7 +51,13 @@ function DropdownMenuItem<NAME>(props: Props<NAME>) {
         ...remainingProps
     } = props;
 
-    const { setShowDropdown } = useContext(DropdownMenuContext);
+    const strings = useTranslation(i18n);
+    const { setShowDropdown } = useContext(MenuContext);
+    const [showConfirmation, setShowConfirmation] = useState(false);
+
+    const onConfirm = remainingProps.type === 'confirm-button'
+        ? remainingProps.onConfirm
+        : undefined;
 
     const handleLinkClick = useCallback(
         () => {
@@ -70,6 +84,24 @@ function DropdownMenuItem<NAME>(props: Props<NAME>) {
         [setShowDropdown, persist, onClick, remainingProps.type],
     );
 
+    const handleConfirmButtonClick = useCallback(
+        (name: NAME, e: React.MouseEvent<HTMLButtonElement>) => {
+            handleButtonClick(name, e);
+            setShowConfirmation(true);
+        },
+        [handleButtonClick],
+    );
+
+    const handleConfirmClick = useCallback(
+        (name: NAME) => {
+            setShowConfirmation(false);
+            if (isDefined(onConfirm)) {
+                onConfirm(name);
+            }
+        },
+        [onConfirm],
+    );
+
     if (remainingProps.type === 'link') {
         const {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -98,18 +130,47 @@ function DropdownMenuItem<NAME>(props: Props<NAME>) {
         const {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             type: _,
-            styleVariant = 'transparent',
+            after,
+            before,
+            children,
+            className,
+            disabled,
+            elementRef,
+            spacing,
+            spacingOffset = -3,
+            textSize,
+            withoutPadding,
             ...otherProps
         } = remainingProps;
 
+        // NOTE: composing RawButton + ButtonLayout to preserve the old
+        // (text, transparent) menu item look, which is not in Button's
+        // curated variant set
         return (
-            <Button
+            <RawButton
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...otherProps}
-                styleVariant={styleVariant}
+                className={styles.menuItem}
                 onClick={handleButtonClick}
-                withFullWidth={!withoutFullWidth}
-            />
+                disabled={disabled}
+            >
+                <ButtonLayout
+                    className={className}
+                    elementRef={elementRef}
+                    colorVariant="text"
+                    styleVariant="transparent"
+                    spacing={spacing}
+                    spacingOffset={spacingOffset}
+                    withoutPadding={withoutPadding}
+                    withFullWidth={!withoutFullWidth}
+                    before={before}
+                    after={after}
+                    textSize={textSize}
+                    disabled={disabled}
+                >
+                    {children}
+                </ButtonLayout>
+            </RawButton>
         );
     }
 
@@ -117,18 +178,82 @@ function DropdownMenuItem<NAME>(props: Props<NAME>) {
         const {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             type: _,
-            styleVariant = 'transparent',
+            after,
+            before,
+            children,
+            className,
+            confirmHeading = strings.confirmation,
+            confirmMessage = strings.confirmMessage,
+            disabled,
+            elementRef,
+            name,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            onConfirm: _unusedOnConfirm,
+            spacing,
+            spacingOffset = -3,
+            textSize,
+            withoutPadding,
             ...otherProps
         } = remainingProps;
 
+        // NOTE: composing RawButton + ButtonLayout to preserve the old
+        // (text, transparent) menu item look, which is not in
+        // ConfirmButton's curated variant set; the confirmation dialog
+        // is replicated from ConfirmButton
         return (
-            <ConfirmButton
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...otherProps}
-                styleVariant={styleVariant}
-                onClick={handleButtonClick}
-                withFullWidth={!withoutFullWidth}
-            />
+            <>
+                <RawButton
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...otherProps}
+                    name={name}
+                    className={styles.menuItem}
+                    onClick={handleConfirmButtonClick}
+                    disabled={disabled}
+                >
+                    <ButtonLayout
+                        className={className}
+                        elementRef={elementRef}
+                        colorVariant="text"
+                        styleVariant="transparent"
+                        spacing={spacing}
+                        spacingOffset={spacingOffset}
+                        withoutPadding={withoutPadding}
+                        withFullWidth={!withoutFullWidth}
+                        before={before}
+                        after={after}
+                        textSize={textSize}
+                        disabled={disabled}
+                    >
+                        {children}
+                    </ButtonLayout>
+                </RawButton>
+                {showConfirmation && (
+                    <Dialog
+                        heading={confirmHeading}
+                        closeOnEscape={false}
+                        size="sm"
+                        footerActions={(
+                            <ListView spacing="sm">
+                                <Button
+                                    name={false}
+                                    onClick={setShowConfirmation}
+                                >
+                                    {strings.buttonCancel}
+                                </Button>
+                                <Button
+                                    name={name}
+                                    variant="primary"
+                                    onClick={handleConfirmClick}
+                                >
+                                    {strings.buttonOk}
+                                </Button>
+                            </ListView>
+                        )}
+                    >
+                        {confirmMessage}
+                    </Dialog>
+                )}
+            </>
         );
     }
 }
diff --git a/app/src/components/DropdownMenuItem/styles.module.css b/app/src/components/DropdownMenuItem/styles.module.css
new file mode 100644
index 0000000000..78085f2a26
--- /dev/null
+++ b/app/src/components/DropdownMenuItem/styles.module.css
@@ -0,0 +1,3 @@
+.menu-item {
+    display: contents;
+}
diff --git a/app/src/components/GoMapContainer/index.tsx b/app/src/components/GoMapContainer/index.tsx
index 7ba28d6d48..a78076b7cf 100644
--- a/app/src/components/GoMapContainer/index.tsx
+++ b/app/src/components/GoMapContainer/index.tsx
@@ -12,11 +12,11 @@ import {
 import {
     Button,
     Container,
-    DateOutput,
+    DateDisplay,
+    DisplayLabel,
     IconButton,
-    InfoPopup,
-    Label,
     ListView,
+    MoreInfo,
     RawButton,
 } from '@ifrc-go/ui';
 import {
@@ -173,7 +173,7 @@ function GoMapContainer(props: Props) {
                     withSpacingOpticalCorrection
                 >
                     {title}
-                    <DateOutput
+                    <DateDisplay
                         className={styles.headerDate}
                         value={(new Date()).toDateString()}
                     />
@@ -184,8 +184,8 @@ function GoMapContainer(props: Props) {
                     {printMode && (
                         <Container
                             className={styles.floatingActions}
-                            withShadow
-                            withBackground
+                            boxShadow="md"
+                            backgroundColor="foreground"
                             withPadding
                         >
                             <ListView>
@@ -248,69 +248,68 @@ function GoMapContainer(props: Props) {
                     <MapContainer
                         className={styles.map}
                     />
-                    <InfoPopup
-                        infoLabel={strings.infoLabel}
+                    <MoreInfo
+                        label={strings.infoLabel}
                         className={styles.mapDisclaimer}
-                        description={(
+                    >
+                        <ListView
+                            layout="block"
+                            withSpacingOpticalCorrection
+                            spacing="sm"
+                        >
+                            <DisplayLabel>
+                                {strings.mapDisclaimer}
+                            </DisplayLabel>
+                            <ListView
+                                withSpacingOpticalCorrection
+                                spacing="xs"
+                                withWrap
+                            >
+                                {mapSources}
+                            </ListView>
                             <ListView
-                                layout="block"
+                                className="mapboxgl-ctrl-attrib-inner"
+                                spacing="xs"
                                 withSpacingOpticalCorrection
-                                spacing="sm"
+                                withWrap
                             >
-                                <Label>
-                                    {strings.mapDisclaimer}
-                                </Label>
-                                <ListView
-                                    withSpacingOpticalCorrection
+                                <Link
+                                    href="https://www.mapbox.com/about/maps/"
+                                    external
+                                    title={strings.mapContainerMapbox}
+                                    aria-label={strings.mapContainerMapbox}
+                                    role="listitem"
+                                    withLinkIcon
+                                    spacing="xs"
+                                >
+                                    {strings.copyrightMapbox}
+                                </Link>
+                                <Link
+                                    href="https://www.openstreetmap.org/about/"
+                                    external
+                                    title={strings.mapContainerOpenStreetMap}
+                                    aria-label={strings.mapContainerOpenStreetMap}
+                                    role="listitem"
+                                    withLinkIcon
                                     spacing="xs"
-                                    withWrap
                                 >
-                                    {mapSources}
-                                </ListView>
-                                <ListView
-                                    className="mapboxgl-ctrl-attrib-inner"
+                                    {strings.copyrightOSM}
+                                </Link>
+                                <Link
+                                    className="mapbox-improve-map"
+                                    href={`https://apps.mapbox.com/feedback/?owner=go-ifrc&amp;id=ckrfe16ru4c8718phmckdfjh0&amp;access_token=${mbtoken}`}
+                                    external
+                                    title={strings.feedbackAriaLabel}
+                                    aria-label={strings.feedbackAriaLabel}
+                                    role="listitem"
+                                    withLinkIcon
                                     spacing="xs"
-                                    withSpacingOpticalCorrection
-                                    withWrap
                                 >
-                                    <Link
-                                        href="https://www.mapbox.com/about/maps/"
-                                        external
-                                        title={strings.mapContainerMapbox}
-                                        aria-label={strings.mapContainerMapbox}
-                                        role="listitem"
-                                        withLinkIcon
-                                        spacing="xs"
-                                    >
-                                        {strings.copyrightMapbox}
-                                    </Link>
-                                    <Link
-                                        href="https://www.openstreetmap.org/about/"
-                                        external
-                                        title={strings.mapContainerOpenStreetMap}
-                                        aria-label={strings.mapContainerOpenStreetMap}
-                                        role="listitem"
-                                        withLinkIcon
-                                        spacing="xs"
-                                    >
-                                        {strings.copyrightOSM}
-                                    </Link>
-                                    <Link
-                                        className="mapbox-improve-map"
-                                        href={`https://apps.mapbox.com/feedback/?owner=go-ifrc&amp;id=ckrfe16ru4c8718phmckdfjh0&amp;access_token=${mbtoken}`}
-                                        external
-                                        title={strings.feedbackAriaLabel}
-                                        aria-label={strings.feedbackAriaLabel}
-                                        role="listitem"
-                                        withLinkIcon
-                                        spacing="xs"
-                                    >
-                                        {strings.improveMapLabel}
-                                    </Link>
-                                </ListView>
+                                    {strings.improveMapLabel}
+                                </Link>
                             </ListView>
-                        )}
-                    />
+                        </ListView>
+                    </MoreInfo>
                     {withPresentationMode && !printMode && !presentationMode && (
                         <Button
                             className={styles.presentationModeButton}
@@ -339,7 +338,7 @@ function GoMapContainer(props: Props) {
                     <ListView
                         withPadding
                         withWrap
-                        withDarkBackground
+                        backgroundColor="background"
                         withSpaceBetweenContents
                     >
                         {footer}
diff --git a/app/src/components/Link/index.tsx b/app/src/components/Link/index.tsx
index 4e8b84eb50..0ecf5f7561 100644
--- a/app/src/components/Link/index.tsx
+++ b/app/src/components/Link/index.tsx
@@ -105,7 +105,6 @@ function Link(props: Props) {
 
     const content = (
         <ButtonLayout
-            // elementRef={layoutElementRef}
             className={_cs(className, styles.layout, withUnderline && styles.withUnderline)}
             withEllipsizedContent={withEllipsizedContent}
             colorVariant={colorVariant}
diff --git a/app/src/components/MapPopup/index.tsx b/app/src/components/MapPopup/index.tsx
index 9f71ec5ec0..5abda2f7f8 100644
--- a/app/src/components/MapPopup/index.tsx
+++ b/app/src/components/MapPopup/index.tsx
@@ -54,7 +54,7 @@ function MapPopup(props: Props) {
                 withHeaderBorder
                 withoutWrapInHeader
                 withPadding
-                withBackground
+                backgroundColor="foreground"
                 withContentOverflow
                 headerActions={(
                     <>
@@ -62,7 +62,7 @@ function MapPopup(props: Props) {
                         <Button
                             className={styles.closeButton}
                             name={undefined}
-                            styleVariant="action"
+                            variant="tertiary"
                             onClick={onCloseButtonClick}
                             title={strings.messagePopupClose}
                         >
diff --git a/app/src/components/MultiSelectOutput/index.tsx b/app/src/components/MultiSelectOutput/index.tsx
index 97cfe4612a..d37897faad 100644
--- a/app/src/components/MultiSelectOutput/index.tsx
+++ b/app/src/components/MultiSelectOutput/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { listToMap } from '@togglecorp/fujs';
 
 interface Props<VALUE, OPTION> {
@@ -40,12 +40,12 @@ function MultiSelectOutput<VALUE extends string | number, OPTION>(props: Props<V
     );
 
     return (
-        <TextOutput
+        <DataDisplay
             className={className}
             label={label}
             value={valueLabel}
             strongLabel
-            withBackground={withBackground}
+            backgroundColor={withBackground ? 'background' : undefined}
         />
     );
 }
diff --git a/app/src/components/Navbar/AuthenticatedUserDropdown/index.tsx b/app/src/components/Navbar/AuthenticatedUserDropdown/index.tsx
index 8a51bc0cc2..ce175be1b1 100644
--- a/app/src/components/Navbar/AuthenticatedUserDropdown/index.tsx
+++ b/app/src/components/Navbar/AuthenticatedUserDropdown/index.tsx
@@ -2,7 +2,7 @@ import {
     useCallback,
     useContext,
 } from 'react';
-import { DropdownMenu } from '@ifrc-go/ui';
+import { Menu } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import DropdownMenuItem from '#components/DropdownMenuItem';
@@ -41,16 +41,15 @@ function AuthenticatedUserDropdown(props: Props) {
     }
 
     return (
-        <DropdownMenu
+        <Menu
             className={className}
             label={(
                 userMe
                     ? getUserName(userMe)
                     : userDetails?.displayName ?? strings.userDisplayNameAnonymous
             )}
-            labelStyleVariant="action"
+            labelVariant="tertiary"
             persistent
-            labelColorVariant="text"
             labelSpacing="sm"
         >
             <DropdownMenuItem
@@ -67,7 +66,7 @@ function AuthenticatedUserDropdown(props: Props) {
             >
                 {strings.userMenuLogout}
             </DropdownMenuItem>
-        </DropdownMenu>
+        </Menu>
     );
 }
 
diff --git a/app/src/components/Navbar/CountryDropdown/index.tsx b/app/src/components/Navbar/CountryDropdown/index.tsx
index 27e95bf585..e161a6dfb2 100644
--- a/app/src/components/Navbar/CountryDropdown/index.tsx
+++ b/app/src/components/Navbar/CountryDropdown/index.tsx
@@ -10,8 +10,8 @@ import {
 import { SearchLineIcon } from '@ifrc-go/icons';
 import {
     Container,
-    DropdownMenu,
     ListView,
+    Menu,
     Tab,
     TabList,
     TabPanel,
@@ -105,10 +105,9 @@ function CountryDropdown() {
     );
 
     return (
-        <DropdownMenu
+        <Menu
             label={strings.menuCountriesLabel}
-            labelColorVariant="text"
-            labelStyleVariant="action"
+            labelVariant="tertiary"
             popupClassName={styles.countryDropdown}
             persistent
             preferredPopupWidth={56}
@@ -191,7 +190,7 @@ function CountryDropdown() {
                                                     value={countrySearch}
                                                     onChange={setCountrySearch}
                                                     icons={<SearchLineIcon />}
-                                                    variant="general"
+                                                    styleVariant="general"
                                                 />
                                             </ListView>
                                         )}
@@ -232,7 +231,7 @@ function CountryDropdown() {
                     </ListView>
                 </Tabs>
             </Container>
-        </DropdownMenu>
+        </Menu>
     );
 }
 
diff --git a/app/src/components/Navbar/LanguageDropdown/index.tsx b/app/src/components/Navbar/LanguageDropdown/index.tsx
index 8367aef5db..7d65ffb13c 100644
--- a/app/src/components/Navbar/LanguageDropdown/index.tsx
+++ b/app/src/components/Navbar/LanguageDropdown/index.tsx
@@ -4,7 +4,7 @@ import {
     useEffect,
 } from 'react';
 import { CheckFillIcon } from '@ifrc-go/icons';
-import { DropdownMenu } from '@ifrc-go/ui';
+import { Menu } from '@ifrc-go/ui';
 import {
     type Language,
     LanguageContext,
@@ -53,9 +53,9 @@ function LanguageDropdown() {
     );
 
     return (
-        <DropdownMenu
+        <Menu
             label={languageNameMapEn[currentLanguage]}
-            labelStyleVariant="action"
+            labelVariant="tertiary"
             persistent
             labelSpacing="sm"
         >
@@ -80,7 +80,7 @@ function LanguageDropdown() {
                     </DropdownMenuItem>
                 ),
             )}
-        </DropdownMenu>
+        </Menu>
     );
 }
 
diff --git a/app/src/components/Navbar/NavDropdownMenu/index.tsx b/app/src/components/Navbar/NavDropdownMenu/index.tsx
index 071c24c3ee..a92ebf03b8 100644
--- a/app/src/components/Navbar/NavDropdownMenu/index.tsx
+++ b/app/src/components/Navbar/NavDropdownMenu/index.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import {
     Description,
-    DropdownMenu,
     ListView,
+    Menu,
     TabList,
     Tabs,
 } from '@ifrc-go/ui';
@@ -27,11 +27,10 @@ function NavDropdownMenu(props: Props) {
     const [tabValue, setTabValue] = useState<string>(initialValue);
 
     return (
-        <DropdownMenu
+        <Menu
             popupClassName={styles.dropdown}
             label={label}
-            labelColorVariant="text"
-            labelStyleVariant="action"
+            labelVariant="tertiary"
             persistent
             preferredPopupWidth={42}
             withoutPopupPadding
@@ -69,7 +68,7 @@ function NavDropdownMenu(props: Props) {
                     </ListView>
                 </ListView>
             </Tabs>
-        </DropdownMenu>
+        </Menu>
     );
 }
 
diff --git a/app/src/components/Navbar/NavDropdownTabDetails/index.tsx b/app/src/components/Navbar/NavDropdownTabDetails/index.tsx
index 18269cc8be..47135a261a 100644
--- a/app/src/components/Navbar/NavDropdownTabDetails/index.tsx
+++ b/app/src/components/Navbar/NavDropdownTabDetails/index.tsx
@@ -48,7 +48,7 @@ function NavDropdownTabDetails(props: Props) {
                     <ListView
                         layout="block"
                         withSpacingOpticalCorrection
-                        withDarkBackground
+                        backgroundColor="background"
                         withPadding
                     >
                         {footer}
diff --git a/app/src/components/Navbar/index.tsx b/app/src/components/Navbar/index.tsx
index 8f99fd95ad..8ba1f0e69c 100644
--- a/app/src/components/Navbar/index.tsx
+++ b/app/src/components/Navbar/index.tsx
@@ -1,8 +1,8 @@
 import {
     ButtonLayout,
     Description,
-    DropdownMenu,
     ListView,
+    Menu,
     NavigationTabList,
     PageContainer,
     Tab,
@@ -115,9 +115,8 @@ function Navbar(props: Props) {
                             </>
                         )}
                         <AuthenticatedUserDropdown />
-                        <DropdownMenu
+                        <Menu
                             label={strings.headerCreateAReportLabel}
-                            labelColorVariant="primary"
                             labelSpacing="lg"
                         >
                             <DropdownMenuItem
@@ -144,7 +143,7 @@ function Navbar(props: Props) {
                             >
                                 {strings.headerDropdownNewFlashUpdate}
                             </DropdownMenuItem>
-                        </DropdownMenu>
+                        </Menu>
                     </NavigationTabList>
                 </ListView>
             </PageContainer>
diff --git a/app/src/components/NavigationTab/index.tsx b/app/src/components/NavigationTab/index.tsx
index 8278612d55..8a49823f6a 100644
--- a/app/src/components/NavigationTab/index.tsx
+++ b/app/src/components/NavigationTab/index.tsx
@@ -176,7 +176,6 @@ function NavigationTab(props: Props) {
 
     const content = (
         <TabLayout
-            // elementRef={layoutElementRef}
             className={className}
             active={isActive}
             colorVariant={colorVariant}
diff --git a/app/src/components/PerExportModal/index.tsx b/app/src/components/PerExportModal/index.tsx
index f7a855357e..d5967dac98 100644
--- a/app/src/components/PerExportModal/index.tsx
+++ b/app/src/components/PerExportModal/index.tsx
@@ -3,8 +3,8 @@ import {
     useState,
 } from 'react';
 import {
+    Dialog,
     Message,
-    Modal,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -92,7 +92,7 @@ function PerExportModal(props: Props) {
     });
 
     return (
-        <Modal
+        <Dialog
             heading={strings.perExportTitle}
             onClose={onCancel}
         >
@@ -136,7 +136,7 @@ function PerExportModal(props: Props) {
                     )}
                 />
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/components/SelectOutput/index.tsx b/app/src/components/SelectOutput/index.tsx
index 621b272b56..a36b59978c 100644
--- a/app/src/components/SelectOutput/index.tsx
+++ b/app/src/components/SelectOutput/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { isDefined } from '@togglecorp/fujs';
 
 export interface Props<VALUE, OPTION> {
@@ -34,12 +34,12 @@ function SelectOutput<VALUE, OPTION>(props: Props<VALUE, OPTION>) {
     ), [labelSelector, selectedOption]);
 
     return (
-        <TextOutput
+        <DataDisplay
             className={className}
             label={label}
             value={valueLabel}
             strongLabel
-            withBackground={withBackground}
+            backgroundColor={withBackground ? 'background' : undefined}
         />
     );
 }
diff --git a/app/src/components/domain/ActiveOperationMap/OperationMapContainer/index.tsx b/app/src/components/domain/ActiveOperationMap/OperationMapContainer/index.tsx
index 59a7f55eed..6ba96d46ea 100644
--- a/app/src/components/domain/ActiveOperationMap/OperationMapContainer/index.tsx
+++ b/app/src/components/domain/ActiveOperationMap/OperationMapContainer/index.tsx
@@ -5,10 +5,10 @@ import {
 } from 'react';
 import {
     Container,
+    DataDisplay,
     LegendItem,
     ListView,
     RadioInput,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { sumSafe } from '@ifrc-go/ui/utils';
@@ -292,7 +292,7 @@ function OperationMapContainer(props: Props) {
                                 key={appeal.id}
                                 heading={appeal.name}
                                 headerDescription={(
-                                    <TextOutput
+                                    <DataDisplay
                                         textSize="sm"
                                         valueType="date"
                                         withLightText
@@ -308,19 +308,19 @@ function OperationMapContainer(props: Props) {
                                     spacing="2xs"
                                     withSpacingOpticalCorrection
                                 >
-                                    <TextOutput
+                                    <DataDisplay
                                         value={appeal.num_beneficiaries}
                                         description={strings.operationPopoverPeopleAffected}
                                         valueType="number"
                                         textSize="sm"
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         value={appeal.amount_requested}
                                         description={strings.operationPopoverAmountRequested}
                                         valueType="number"
                                         textSize="sm"
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         value={appeal.amount_funded}
                                         description={strings.operationPopoverAmountFunded}
                                         valueType="number"
diff --git a/app/src/components/domain/ActiveOperationMap/index.tsx b/app/src/components/domain/ActiveOperationMap/index.tsx
index 78dacc9d39..8d48ef2b22 100644
--- a/app/src/components/domain/ActiveOperationMap/index.tsx
+++ b/app/src/components/domain/ActiveOperationMap/index.tsx
@@ -7,9 +7,9 @@ import {
     Button,
     Container,
     DateInput,
-    InfoPopup,
     InlineLayout,
     ListView,
+    MoreInfo,
     SelectInput,
     Tab,
     TabList,
@@ -361,10 +361,11 @@ function ActiveOperationMap(props: Props) {
                                 >
                                     {strings.crisisTabName}
                                 </Tab>
-                                <InfoPopup
+                                <MoreInfo
                                     title={strings.crisisTabName}
-                                    description={strings.crisisCategorisationDescription}
-                                />
+                                >
+                                    {strings.crisisCategorisationDescription}
+                                </MoreInfo>
                             </ListView>
                             <Tab
                                 name="appeal"
diff --git a/app/src/components/domain/Admin2Input/index.tsx b/app/src/components/domain/Admin2Input/index.tsx
index 9771f90d17..3f5109397f 100644
--- a/app/src/components/domain/Admin2Input/index.tsx
+++ b/app/src/components/domain/Admin2Input/index.tsx
@@ -9,9 +9,9 @@ import {
     Button,
     ButtonLayout,
     Container,
+    Dialog,
     InputError,
     ListView,
-    Modal,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -341,7 +341,7 @@ function Admin2Input<const NAME>(props: Props<NAME>) {
                                 <Button
                                     name={admin2Id}
                                     onClick={removeSelection}
-                                    styleVariant="action"
+                                    variant="tertiary"
                                     readOnly
                                     disabled={readOnly}
                                 >
@@ -362,7 +362,7 @@ function Admin2Input<const NAME>(props: Props<NAME>) {
                 </InputError>
             )}
             {showModal && (
-                <Modal
+                <Dialog
                     onClose={setShowModalFalse}
                     // FIXME: use strings
                     heading="Select Admin-2"
@@ -434,7 +434,7 @@ function Admin2Input<const NAME>(props: Props<NAME>) {
                             </>
                         )}
                     </BaseMap>
-                </Modal>
+                </Dialog>
             )}
         </ListView>
     );
diff --git a/app/src/components/domain/AppealsOverYearsChart/PointDetails/index.tsx b/app/src/components/domain/AppealsOverYearsChart/PointDetails/index.tsx
index 28505da109..6f01029ac7 100644
--- a/app/src/components/domain/AppealsOverYearsChart/PointDetails/index.tsx
+++ b/app/src/components/domain/AppealsOverYearsChart/PointDetails/index.tsx
@@ -1,7 +1,7 @@
 import {
     Container,
+    DataDisplay,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { _cs } from '@togglecorp/fujs';
@@ -46,7 +46,7 @@ function PointDetails(props: Props) {
             filtered={false}
             errored={false}
             empty={!data}
-            withDarkBackground
+            backgroundColor="background"
         >
             <ListView
                 layout="block"
@@ -56,7 +56,7 @@ function PointDetails(props: Props) {
                     withSpacingOpticalCorrection
                     spacing="sm"
                 >
-                    <TextOutput
+                    <DataDisplay
                         icon={<div className={styles.emergencyAppealPointIcon} />}
                         label={strings.timelineChartEmergencyAppealLabel}
                         value={data?.emergencyAppeal?.count ?? 0}
@@ -64,13 +64,13 @@ function PointDetails(props: Props) {
                         strongValue
                         strongLabel
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.timelineChartAmountFundedLabel}
                         value={data?.emergencyAppeal?.amount_funded}
                         valueType="number"
                         strongValue
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.timelineChartPeopleTargetedLabel}
                         value={data?.emergencyAppeal?.beneficiaries}
                         valueType="number"
@@ -82,7 +82,7 @@ function PointDetails(props: Props) {
                     withSpacingOpticalCorrection
                     spacing="sm"
                 >
-                    <TextOutput
+                    <DataDisplay
                         icon={<div className={styles.drefPointIcon} />}
                         label={strings.timelineChartDrefLabel}
                         value={data?.dref?.count ?? 0}
@@ -90,13 +90,13 @@ function PointDetails(props: Props) {
                         strongValue
                         strongLabel
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.timelineChartAmountFundedLabel}
                         value={data?.dref?.amount_funded}
                         valueType="number"
                         strongValue
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.timelineChartPeopleTargetedLabel}
                         value={Number(data?.dref?.beneficiaries)}
                         valueType="number"
diff --git a/app/src/components/domain/AppealsTable/index.tsx b/app/src/components/domain/AppealsTable/index.tsx
index 665405b795..35e3777bd5 100644
--- a/app/src/components/domain/AppealsTable/index.tsx
+++ b/app/src/components/domain/AppealsTable/index.tsx
@@ -7,7 +7,7 @@ import {
     Button,
     Container,
     DateInput,
-    Pager,
+    Pagination,
     SelectInput,
     Table,
 } from '@ifrc-go/ui';
@@ -338,7 +338,7 @@ function AppealsTable(props: Props) {
                 </>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={appealsResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/components/domain/DistrictSearchMultiSelectInput/index.tsx b/app/src/components/domain/DistrictSearchMultiSelectInput/index.tsx
index f113c99561..d85ab876d3 100644
--- a/app/src/components/domain/DistrictSearchMultiSelectInput/index.tsx
+++ b/app/src/components/domain/DistrictSearchMultiSelectInput/index.tsx
@@ -135,7 +135,7 @@ function DistrictSearchMultiSelectInput<const NAME>(
                     name={undefined}
                     onClick={handleSelectAllClick}
                     disabled={isNotDefined(countryId) || pendingSelectAll}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.selectAll}
                 >
                     <CheckDoubleFillIcon className={styles.icon} />
diff --git a/app/src/components/domain/DrefExportModal/index.tsx b/app/src/components/domain/DrefExportModal/index.tsx
index 4240a3bf2f..b5eb07f7ad 100644
--- a/app/src/components/domain/DrefExportModal/index.tsx
+++ b/app/src/components/domain/DrefExportModal/index.tsx
@@ -7,8 +7,8 @@ import { DownloadLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Checkbox,
+    Dialog,
     Message,
-    Modal,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -188,7 +188,7 @@ function DrefExportModal(props: Props) {
     ]);
 
     return (
-        <Modal
+        <Dialog
             heading={strings.drefExportTitle}
             onClose={onCancel}
             className={styles.drefExportModal}
@@ -250,7 +250,7 @@ function DrefExportModal(props: Props) {
                     )}
                 />
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/components/domain/DrefShareModal/index.tsx b/app/src/components/domain/DrefShareModal/index.tsx
index 0185bedea9..692f0cb12c 100644
--- a/app/src/components/domain/DrefShareModal/index.tsx
+++ b/app/src/components/domain/DrefShareModal/index.tsx
@@ -5,8 +5,8 @@ import {
 import {
     Button,
     Container,
+    Dialog,
     ListView,
-    Modal,
     RawList,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -102,7 +102,7 @@ function DrefShareModal(props: Props) {
     ]);
 
     return (
-        <Modal
+        <Dialog
             heading={strings.drefShareTitle}
             headerDescription={strings.drefShareDescription}
             onClose={onCancel}
@@ -150,7 +150,7 @@ function DrefShareModal(props: Props) {
                     </ListView>
                 </Container>
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/components/domain/EapExportModal/index.tsx b/app/src/components/domain/EapExportModal/index.tsx
index 31e8c3fd62..e91279f53d 100644
--- a/app/src/components/domain/EapExportModal/index.tsx
+++ b/app/src/components/domain/EapExportModal/index.tsx
@@ -5,8 +5,8 @@ import {
 } from 'react';
 import { DownloadLineIcon } from '@ifrc-go/icons';
 import {
+    Dialog,
     Message,
-    Modal,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -152,7 +152,7 @@ function EapExportModal(props: Props) {
     ]);
 
     return (
-        <Modal
+        <Dialog
             heading={strings.exportTitle}
             onClose={onClose}
             className={styles.drefExportModal}
@@ -193,7 +193,7 @@ function EapExportModal(props: Props) {
                     )}
                 />
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/components/domain/EapIndicatorListInput/index.tsx b/app/src/components/domain/EapIndicatorListInput/index.tsx
index d6f486afa0..3a56f28d6c 100644
--- a/app/src/components/domain/EapIndicatorListInput/index.tsx
+++ b/app/src/components/domain/EapIndicatorListInput/index.tsx
@@ -76,7 +76,7 @@ function EapIndicatorListInput<const NAME extends FormName>(props: Props<NAME>)
     return (
         <Container
             spacing="sm"
-            withDarkBackground
+            backgroundColor="background"
             withHeaderBorder
             withPadding
             heading={(
diff --git a/app/src/components/domain/EapObsoleteResolutionModal/index.tsx b/app/src/components/domain/EapObsoleteResolutionModal/index.tsx
index a33d8c6010..fa2a847500 100644
--- a/app/src/components/domain/EapObsoleteResolutionModal/index.tsx
+++ b/app/src/components/domain/EapObsoleteResolutionModal/index.tsx
@@ -1,10 +1,10 @@
 import {
     BlockLoading,
     Button,
+    DataDisplay,
     Description,
+    Dialog,
     ListView,
-    Modal,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -54,7 +54,7 @@ function EapObsoleteResolutionModal(props: Props) {
     const pending = fullEapPending || simplifiedEapPending;
 
     return (
-        <Modal
+        <Dialog
             heading={strings.changesConflictWhileSaving}
             headingLevel={3}
             withoutCloseButton
@@ -75,20 +75,20 @@ function EapObsoleteResolutionModal(props: Props) {
         >
             {pending ? <BlockLoading /> : (
                 <ListView layout="block">
-                    <TextOutput
+                    <DataDisplay
                         label={strings.conflictWhileSaving}
                         strongValue
                         value={getUserName(response?.modified_by_details)}
                     />
                     <Description>{strings.changesWillBeOverridden}</Description>
-                    <TextOutput
+                    <DataDisplay
                         label={strings.changesNoteLabel}
                         strongLabel
                         value={strings.changesWillBeOverridden}
                     />
                 </ListView>
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/index.tsx b/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/index.tsx
index d94c47b047..7764362eab 100644
--- a/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/index.tsx
+++ b/app/src/components/domain/EapOperationActivityInput/TimeSpanCheck/index.tsx
@@ -19,6 +19,8 @@ function TimeSpanCheck<const NAME>(props: CheckboxProps<NAME>) {
         labelContainerClassName,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         description,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        backgroundColor,
 
         className: classNameFromProps,
         disabled,
@@ -31,8 +33,6 @@ function TimeSpanCheck<const NAME>(props: CheckboxProps<NAME>) {
         readOnly,
         tooltip,
         value,
-        withBackground,
-        withDarkBackground,
         ...otherProps
     } = props;
 
@@ -53,8 +53,6 @@ function TimeSpanCheck<const NAME>(props: CheckboxProps<NAME>) {
         styles.checkbox,
         classNameFromProps,
         !indeterminate && checked && styles.checked,
-        withBackground && styles.withBackground,
-        withDarkBackground && styles.withDarkBackground,
         disabled && styles.disabledCheckbox,
         readOnly && styles.readOnly,
     );
diff --git a/app/src/components/domain/EapOperationActivityListInput/index.tsx b/app/src/components/domain/EapOperationActivityListInput/index.tsx
index e5b90a2771..97f493d992 100644
--- a/app/src/components/domain/EapOperationActivityListInput/index.tsx
+++ b/app/src/components/domain/EapOperationActivityListInput/index.tsx
@@ -122,7 +122,7 @@ function EapOperationActivityListInput<const NAME extends ActivityInputType>(pro
     return (
         <Container
             spacing="sm"
-            withDarkBackground
+            backgroundColor="background"
             withHeaderBorder
             withPadding
             heading={(
diff --git a/app/src/components/domain/EapShareModal/index.tsx b/app/src/components/domain/EapShareModal/index.tsx
index ac480436ff..96654f1f94 100644
--- a/app/src/components/domain/EapShareModal/index.tsx
+++ b/app/src/components/domain/EapShareModal/index.tsx
@@ -5,8 +5,8 @@ import {
 import {
     Button,
     Container,
+    Dialog,
     ListView,
-    Modal,
     RawList,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -120,7 +120,7 @@ function EapShareModal(props: Props) {
     ]);
 
     return (
-        <Modal
+        <Dialog
             heading={strings.eapShareTitle}
             headerDescription={strings.eapShareDescription}
             onClose={onCancel}
@@ -166,7 +166,7 @@ function EapShareModal(props: Props) {
                     </ListView>
                 </Container>
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/components/domain/ExportButton/index.tsx b/app/src/components/domain/ExportButton/index.tsx
index 13070a18af..0e41767d28 100644
--- a/app/src/components/domain/ExportButton/index.tsx
+++ b/app/src/components/domain/ExportButton/index.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { DownloadTwoLineIcon } from '@ifrc-go/icons';
 import {
     Button,
-    NumberOutput,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
@@ -36,7 +36,7 @@ function ExportButton(props: Props) {
                 strings.exportDownloadingButtonLabel,
                 {
                     progress: (
-                        <NumberOutput
+                        <NumberDisplay
                             value={progress * 100}
                             maximumFractionDigits={0}
                         />
diff --git a/app/src/components/domain/GoMultiFileInput/index.tsx b/app/src/components/domain/GoMultiFileInput/index.tsx
index a83f06105c..a2bfb2fa8f 100644
--- a/app/src/components/domain/GoMultiFileInput/index.tsx
+++ b/app/src/components/domain/GoMultiFileInput/index.tsx
@@ -8,14 +8,15 @@ import {
 } from '@ifrc-go/icons';
 import {
     Button,
+    type ButtonLayoutProps,
     type CommonRawFileInputProps,
     Description,
+    FileInputButton,
     IconButton,
     InlineLayout,
     InputError,
     ListView,
     type NameType,
-    RawFileInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -51,7 +52,9 @@ function getFileNameFromUrl(urlString: string | undefined) {
     return splits[splits.length - 1];
 }
 
-type Props<NAME> = Omit<CommonRawFileInputProps<NAME>, 'value'> & {
+type Props<NAME> = Omit<CommonRawFileInputProps<NAME>, 'value'>
+    & Pick<ButtonLayoutProps, 'after' | 'before' | 'colorVariant' | 'styleVariant'>
+    & {
     name: NAME;
     clearable?: boolean;
     description?: React.ReactNode;
@@ -201,7 +204,7 @@ function GoMultiFileInput<T extends NameType>(props: Props<T>) {
                 spacing="sm"
                 withSpacingOpticalCorrection
             >
-                <RawFileInput
+                <FileInputButton
                     name={name}
                     onChange={handleChange}
                     accept={accept}
@@ -216,7 +219,7 @@ function GoMultiFileInput<T extends NameType>(props: Props<T>) {
                     multiple
                 >
                     {children}
-                </RawFileInput>
+                </FileInputButton>
                 {clearable && value && value.length > 0 && (
                     <IconButton
                         name={undefined}
@@ -252,7 +255,7 @@ function GoMultiFileInput<T extends NameType>(props: Props<T>) {
                                 after={(
                                     <Button
                                         name={valueUrl.id}
-                                        styleVariant="action"
+                                        variant="tertiary"
                                         onClick={handleFileRemove}
                                         title={strings.goMultiDeleteButton}
                                     >
diff --git a/app/src/components/domain/GoSingleFileInput/index.tsx b/app/src/components/domain/GoSingleFileInput/index.tsx
index 15be93e8dc..953204bad8 100644
--- a/app/src/components/domain/GoSingleFileInput/index.tsx
+++ b/app/src/components/domain/GoSingleFileInput/index.tsx
@@ -1,12 +1,13 @@
 import { useCallback } from 'react';
 import { DeleteBinLineIcon } from '@ifrc-go/icons';
 import {
+    type ButtonLayoutProps,
     type CommonRawFileInputProps,
     Description,
+    FileInputButton,
     IconButton,
     InputError,
     ListView,
-    RawFileInput,
     type SingleRawFileInputProps,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -25,7 +26,9 @@ import i18n from './i18n.json';
 
 export type SupportedPaths = '/api/v2/per-file/' | '/api/v2/dref-files/' | '/api/v2/flash-update-file/' | '/api/v2/per-document-upload/' | '/api/v2/eap-file/';
 
-type Props<NAME> = Omit<CommonRawFileInputProps<NAME>, 'value'> & {
+type Props<NAME> = Omit<CommonRawFileInputProps<NAME>, 'value'>
+    & Pick<ButtonLayoutProps, 'after' | 'before' | 'colorVariant' | 'styleVariant'>
+    & {
     name: NAME;
     clearable?: boolean;
     description?: React.ReactNode;
@@ -164,7 +167,7 @@ function GoSingleFileInput<const NAME>(props: Props<NAME>) {
                 spacing="sm"
                 withSpacingOpticalCorrection
             >
-                <RawFileInput
+                <FileInputButton
                     name={name}
                     onChange={handleChange}
                     accept={accept}
@@ -177,7 +180,7 @@ function GoSingleFileInput<const NAME>(props: Props<NAME>) {
                     after={after}
                 >
                     {children}
-                </RawFileInput>
+                </FileInputButton>
                 {isNotDefined(selectedFileUrl) && !withoutStatus && (
                     <Description withLightText>
                         {strings.noFileSelected}
diff --git a/app/src/components/domain/HighlightedOperations/OperationCard/index.tsx b/app/src/components/domain/HighlightedOperations/OperationCard/index.tsx
index 4ae729b53d..f29d844d2b 100644
--- a/app/src/components/domain/HighlightedOperations/OperationCard/index.tsx
+++ b/app/src/components/domain/HighlightedOperations/OperationCard/index.tsx
@@ -4,13 +4,13 @@ import {
     Button,
     ButtonLayout,
     Container,
-    DateOutput,
+    DataDisplay,
+    DateDisplay,
+    DisplayLabel,
     KeyFigure,
-    Label,
     ListView,
-    NumberOutput,
+    NumberDisplay,
     ProgressBar,
-    TextOutput,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -118,8 +118,8 @@ function OperationCard(props: Props) {
         <Container
             className={className}
             withPadding
-            withBackground
-            withShadow
+            backgroundColor="foreground"
+            boxShadow="md"
             pending={false}
             empty={false}
             filtered={false}
@@ -147,9 +147,9 @@ function OperationCard(props: Props) {
                                 <ListView spacing="xs">
                                     <SeverityIndicator level={ifrc_severity_level} />
                                     {ifrc_severity_level_display}
-                                    <DateOutput value={ifrc_severity_level_update_date} />
+                                    <DateDisplay value={ifrc_severity_level_update_date} />
                                 </ListView>
-                                <TextOutput
+                                <DataDisplay
                                     label={<FocusLineIcon />}
                                     value={countriesInfoDisplay}
                                     withoutLabelColon
@@ -192,7 +192,7 @@ function OperationCard(props: Props) {
                             {appealTypes.join(', ')}
                         </ButtonLayout>
                     ) : <div />}
-                    <TextOutput
+                    <DataDisplay
                         label={strings.operationCardLastUpdated}
                         value={updated_at}
                         valueType="date"
@@ -211,10 +211,10 @@ function OperationCard(props: Props) {
                             spacing="xs"
                             withSpaceBetweenContents
                         >
-                            <Label withUppercaseLetters>
+                            <DisplayLabel withUppercaseLetters>
                                 {strings.operationCardFundingCoverage}
-                            </Label>
-                            <NumberOutput
+                            </DisplayLabel>
+                            <NumberDisplay
                                 value={coverage}
                                 suffix="%"
                             />
@@ -240,7 +240,7 @@ function OperationCard(props: Props) {
                     )}
                     value={targetedPopulation}
                     valueType="number"
-                    valueOptions={{ compact: true }}
+                    compact
                 />
                 <KeyFigure
                     value={amountRequested}
@@ -254,7 +254,7 @@ function OperationCard(props: Props) {
                         </Link>
                     )}
                     valueType="number"
-                    valueOptions={{ compact: true }}
+                    compact
                 />
             </ListView>
         </Container>
diff --git a/app/src/components/domain/HistoricalDataChart/index.tsx b/app/src/components/domain/HistoricalDataChart/index.tsx
index 10e5a407f0..eb3474000b 100644
--- a/app/src/components/domain/HistoricalDataChart/index.tsx
+++ b/app/src/components/domain/HistoricalDataChart/index.tsx
@@ -8,8 +8,8 @@ import {
     ChartAxes,
     ChartContainer,
     Container,
+    DataDisplay,
     SelectInput,
-    TextOutput,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -28,6 +28,7 @@ import {
 
 import useInputState from '#hooks/useInputState';
 import useTemporalChartData from '#hooks/useTemporalChartData';
+import { resolveCssColor } from '#utils/common';
 import {
     COLOR_HAZARD_CYCLONE,
     COLOR_HAZARD_DROUGHT,
@@ -77,12 +78,14 @@ function isValidDisaster(
     return validDisastersForChart[disaster.id]!;
 }
 
+// Sourced from @ifrc-go/ui --go-ui-color-hazard-* tokens; COLOR_HAZARD_*
+// are load-time fallbacks (see utils/common.ts resolveCssColor).
 const hazardIdToColorMap: Record<number, string> = {
-    [DISASTER_FLOOD]: COLOR_HAZARD_FLOOD,
-    [DISASTER_FLASH_FLOOD]: COLOR_HAZARD_FLOOD,
-    [DISASTER_CYCLONE]: COLOR_HAZARD_CYCLONE,
-    [DISASTER_FOOD_INSECURITY]: COLOR_HAZARD_FOOD_INSECURITY,
-    [DISASTER_DROUGHT]: COLOR_HAZARD_DROUGHT,
+    [DISASTER_FLOOD]: resolveCssColor('--go-ui-color-hazard-flood', COLOR_HAZARD_FLOOD),
+    [DISASTER_FLASH_FLOOD]: resolveCssColor('--go-ui-color-hazard-flood', COLOR_HAZARD_FLOOD),
+    [DISASTER_CYCLONE]: resolveCssColor('--go-ui-color-hazard-cyclone', COLOR_HAZARD_CYCLONE),
+    [DISASTER_FOOD_INSECURITY]: resolveCssColor('--go-ui-color-hazard-fi', COLOR_HAZARD_FOOD_INSECURITY),
+    [DISASTER_DROUGHT]: resolveCssColor('--go-ui-color-hazard-drought', COLOR_HAZARD_DROUGHT),
 };
 
 const hazardIdToIconMap: Record<number, React.ReactNode> = {
@@ -250,26 +253,26 @@ function HistoricalDataChart(props: Props) {
                                         title={point.originalData.dtype.name}
                                         description={(
                                             <>
-                                                <TextOutput
+                                                <DataDisplay
                                                     label="Start date"
                                                     value={point.originalData.disaster_start_date}
                                                     valueType="date"
                                                     strongValue
                                                 />
-                                                <TextOutput
+                                                <DataDisplay
                                                     value={point.originalData.num_affected}
                                                     label={strings.peopleAffectedLabel}
                                                     valueType="number"
                                                     strongValue
                                                 />
-                                                <TextOutput
+                                                <DataDisplay
                                                     value={funded}
                                                     label={strings.fundedLabel}
                                                     valueType="number"
                                                     strongValue
                                                     maximumFractionDigits={0}
                                                 />
-                                                <TextOutput
+                                                <DataDisplay
                                                     value={coverage}
                                                     valueType="number"
                                                     suffix="%"
diff --git a/app/src/components/domain/ImminentEventListItem/index.tsx b/app/src/components/domain/ImminentEventListItem/index.tsx
index 01e72c8c49..d69de16db2 100644
--- a/app/src/components/domain/ImminentEventListItem/index.tsx
+++ b/app/src/components/domain/ImminentEventListItem/index.tsx
@@ -61,7 +61,7 @@ function ImminentEventListItem(props: Props) {
                 <Button
                     name={eventId}
                     onClick={onExpandClick}
-                    styleVariant="action"
+                    variant="tertiary"
                     // FIXME: use strings
                     title={expanded ? 'Hide details' : 'Show details'}
                 >
@@ -72,7 +72,7 @@ function ImminentEventListItem(props: Props) {
             )}
             headerDescription={description}
             spacing="sm"
-            withDarkBackground
+            backgroundColor="background"
             withPadding
             withoutSpacingOpticalCorrection
             withContentWell
diff --git a/app/src/components/domain/InfoModal/index.tsx b/app/src/components/domain/InfoModal/index.tsx
index ddcf1f5383..801e39e494 100644
--- a/app/src/components/domain/InfoModal/index.tsx
+++ b/app/src/components/domain/InfoModal/index.tsx
@@ -1,8 +1,8 @@
 import {
     Button,
     type ButtonProps,
+    Dialog,
     IconButton,
-    Modal,
 } from '@ifrc-go/ui';
 import { useBooleanState } from '@ifrc-go/ui/hooks';
 
@@ -22,7 +22,7 @@ type LabelButtonProps = {
 type ButtonTypeProps = IconButtonProps | LabelButtonProps;
 
 // FIXME: make the props consistent with other similar components
-// e.g. DropdownMenu
+// e.g. Menu
 interface BaseProps extends ButtonProps<undefined> {
     heading?: string;
     modalContent: React.ReactNode;
@@ -72,13 +72,13 @@ function InfoModal(props: Props) {
                 </Button>
             )}
             {showInfoModal && (
-                <Modal
+                <Dialog
                     onClose={setShowInfoModalFalse}
                     heading={heading}
                     size="auto"
                 >
                     {modalContent}
-                </Modal>
+                </Dialog>
             )}
         </>
     );
diff --git a/app/src/components/domain/KeywordSearchSelectInput/index.tsx b/app/src/components/domain/KeywordSearchSelectInput/index.tsx
index d89a2097bd..07469dd3cf 100644
--- a/app/src/components/domain/KeywordSearchSelectInput/index.tsx
+++ b/app/src/components/domain/KeywordSearchSelectInput/index.tsx
@@ -315,7 +315,7 @@ function KeywordSearchSelectInput() {
             icons={<SearchLineIcon />}
             selectedOnTop={false}
             onEnterWithoutOption={handleSearchInputEnter}
-            variant="general"
+            styleVariant="general"
             withoutDropdownIcon
         />
     );
diff --git a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
index cafd69f5e1..7125a58048 100644
--- a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
+++ b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
@@ -185,7 +185,7 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
                                 layout="block"
                                 spacing="xs"
                                 withSpacingOpticalCorrection
-                                withDarkBackground
+                                backgroundColor="background"
                                 withPadding
                             >
                                 <InlineLayout
diff --git a/app/src/components/domain/OperationListItem/index.tsx b/app/src/components/domain/OperationListItem/index.tsx
index 9b9389fcea..4060b6356a 100644
--- a/app/src/components/domain/OperationListItem/index.tsx
+++ b/app/src/components/domain/OperationListItem/index.tsx
@@ -1,7 +1,7 @@
 import {
     Button,
     Container,
-    TextOutput,
+    DataDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -65,9 +65,9 @@ function OperationInfoCard(props: Props) {
                 </Button>
             )}
             withPadding
-            withDarkBackground
+            backgroundColor="background"
         >
-            <TextOutput
+            <DataDisplay
                 label={strings.operationLastUpdatedLabel}
                 value={updated_at}
                 valueType="date"
diff --git a/app/src/components/domain/PerAssessmentSummary/index.tsx b/app/src/components/domain/PerAssessmentSummary/index.tsx
index 4fed14e507..2956f67c0e 100644
--- a/app/src/components/domain/PerAssessmentSummary/index.tsx
+++ b/app/src/components/domain/PerAssessmentSummary/index.tsx
@@ -1,10 +1,10 @@
 import {
+    DataDisplay,
+    DisplayLabel,
     ExpandableContainer,
-    Label,
     ListView,
     ProgressBar,
     StackedProgressBar,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -209,7 +209,7 @@ function PerAssessmentSummary(props: Props) {
             headerDescription={description}
             withHeaderBorder
             withPadding
-            withBackground
+            backgroundColor="foreground"
             spacing="lg"
         >
             <ListView
@@ -234,7 +234,7 @@ function PerAssessmentSummary(props: Props) {
                         <ListView>
                             {groupedResponseList.map(
                                 (groupedResponse) => (
-                                    <TextOutput
+                                    <DataDisplay
                                         key={groupedResponse.answer}
                                         label={groupedResponse.answerDisplay}
                                         value={groupedResponse.responses.length}
@@ -261,7 +261,7 @@ function PerAssessmentSummary(props: Props) {
                                 spacing="none"
                                 className={styles.rating}
                             >
-                                <TextOutput
+                                <DataDisplay
                                     value={rating.rating}
                                     valueType="number"
                                     strongValue
@@ -276,12 +276,12 @@ function PerAssessmentSummary(props: Props) {
                                         }}
                                     />
                                 </div>
-                                <Label
+                                <DisplayLabel
                                     strong
                                     textSize="sm"
                                 >
                                     {rating.areaDisplay}
-                                </Label>
+                                </DisplayLabel>
                             </ListView>
                         ),
                     )}
diff --git a/app/src/components/domain/RegionKeyFigures/index.tsx b/app/src/components/domain/RegionKeyFigures/index.tsx
index 307d3e8281..4389ab7ed5 100644
--- a/app/src/components/domain/RegionKeyFigures/index.tsx
+++ b/app/src/components/domain/RegionKeyFigures/index.tsx
@@ -7,9 +7,9 @@ import {
     TargetedPopulationIcon,
 } from '@ifrc-go/icons';
 import {
-    InfoPopup,
-    KeyFigureView,
+    KeyFigureCard,
     ListView,
+    MoreInfo,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { getPercentage } from '@ifrc-go/ui/utils';
@@ -55,68 +55,68 @@ function RegionKeyFigures(props: Props) {
             layout="grid"
             numPreferredGridColumns={6}
         >
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<DrefIcon />}
                 value={aggregatedAppealResponse.active_drefs}
                 valueType="number"
                 info={(
-                    <InfoPopup
+                    <MoreInfo
                         title={strings.regionKeyFiguresDrefTitle}
-                        description={strings.regionKeyFiguresDrefDescription}
-                    />
+                    >
+                        {strings.regionKeyFiguresDrefDescription}
+                    </MoreInfo>
                 )}
                 label={strings.regionKeyFiguresActiveDrefs}
-                size="lg"
+                textSize="4xl"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<AppealsIcon />}
                 value={aggregatedAppealResponse.active_appeals}
                 valueType="number"
                 info={(
-                    <InfoPopup
+                    <MoreInfo
                         title={strings.regionKeyFiguresActiveAppealsTitle}
-                        description={strings.regionKeyFigureActiveAppealDescription}
-                    />
+                    >
+                        {strings.regionKeyFigureActiveAppealDescription}
+                    </MoreInfo>
                 )}
                 label={strings.regionKeyFiguresActiveAppeals}
-                size="lg"
+                textSize="4xl"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<FundingIcon />}
                 value={aggregatedAppealResponse.amount_requested_dref_included}
                 valueType="number"
-                size="lg"
-                valueOptions={{ compact: true }}
+                textSize="4xl"
+                compact
                 label={strings.regionKeyFiguresBudget}
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<FundingCoverageIcon />}
                 value={getPercentage(
                     aggregatedAppealResponse?.amount_funded_dref_included,
                     aggregatedAppealResponse?.amount_requested_dref_included,
                 )}
                 valueType="number"
-                valueOptions={{
-                    compact: true,
-                    suffix: '%',
-                }}
-                size="lg"
+                compact
+                suffix="%"
+                textSize="4xl"
                 label={strings.regionKeyFiguresAppealsFunding}
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<TargetedPopulationIcon />}
                 value={aggregatedAppealResponse.target_population}
                 valueType="number"
-                size="lg"
-                valueOptions={{ compact: true }}
+                textSize="4xl"
+                compact
                 label={strings.regionKeyFiguresTargetPop}
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<AppealsTwoIcon />}
                 value={regionResponse.country_plan_count}
                 valueType="number"
-                size="lg"
-                valueOptions={{ compact: true }}
+                textSize="4xl"
+                compact
                 label={strings.regionKeyFiguresCountryPlan}
             />
         </ListView>
diff --git a/app/src/components/domain/RiskImminentEventMap/LayerOptions/index.tsx b/app/src/components/domain/RiskImminentEventMap/LayerOptions/index.tsx
index ce7496d8c0..2b629007da 100644
--- a/app/src/components/domain/RiskImminentEventMap/LayerOptions/index.tsx
+++ b/app/src/components/domain/RiskImminentEventMap/LayerOptions/index.tsx
@@ -91,14 +91,14 @@ function LayerOptions(props: Props) {
                 name="showStormPosition"
                 value={value.showStormPosition}
                 onChange={setFieldValue}
-                withBackground
+                backgroundColor="foreground"
                 withInvertedView
             />
             {!exposureAreaControlHidden && (
                 <ListView
                     layout="block"
                     spacing="sm"
-                    withBackground
+                    backgroundColor="foreground"
                     withPadding
                 >
                     <Switch
@@ -127,7 +127,7 @@ function LayerOptions(props: Props) {
                 name="showTrackLine"
                 value={value.showTrackLine}
                 onChange={setFieldValue}
-                withBackground
+                backgroundColor="foreground"
                 withInvertedView
             />
             <Switch
@@ -136,7 +136,7 @@ function LayerOptions(props: Props) {
                 name="showForecastUncertainty"
                 value={value.showForecastUncertainty}
                 onChange={setFieldValue}
-                withBackground
+                backgroundColor="foreground"
                 withInvertedView
             />
         </ListView>
diff --git a/app/src/components/domain/RiskImminentEventMap/index.tsx b/app/src/components/domain/RiskImminentEventMap/index.tsx
index 7c6bede3fa..b8fb2b6a01 100644
--- a/app/src/components/domain/RiskImminentEventMap/index.tsx
+++ b/app/src/components/domain/RiskImminentEventMap/index.tsx
@@ -483,8 +483,8 @@ function RiskImminentEventMap<
                 empty={isNotDefined(events) || events.length === 0}
                 emptyMessage={strings.emptyImminentEventMessage}
                 withPadding
-                withBackground
-                withShadow
+                backgroundColor="foreground"
+                boxShadow="md"
                 withContentOverflow
                 withContentWell
                 spacing="sm"
diff --git a/app/src/components/domain/RiskImminentEvents/Gdacs/EventDetails/index.tsx b/app/src/components/domain/RiskImminentEvents/Gdacs/EventDetails/index.tsx
index c92d2cba86..e91c680baa 100644
--- a/app/src/components/domain/RiskImminentEvents/Gdacs/EventDetails/index.tsx
+++ b/app/src/components/domain/RiskImminentEvents/Gdacs/EventDetails/index.tsx
@@ -1,8 +1,8 @@
 import {
     Container,
+    DataDisplay,
     InlineLayout,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { isDefined } from '@togglecorp/fujs';
@@ -91,74 +91,74 @@ function EventDetails(props: Props) {
                 spacing="xs"
             >
                 {isDefined(eventDetails?.source) && (
-                    <TextOutput
+                    <DataDisplay
                         label={strings.eventSourceLabel}
                         value={eventDetails?.source}
                         strongValue
-                        withLightBackground
+                        backgroundColor="foreground"
                     />
                 )}
                 {isDefined(populationExposure?.death) && (
-                    <TextOutput
+                    <DataDisplay
                         label={strings.eventDeathLabel}
                         value={populationExposure?.death}
                         maximumFractionDigits={2}
                         compact
                         valueType="number"
                         strongValue
-                        withLightBackground
+                        backgroundColor="foreground"
                     />
                 )}
                 {isDefined(populationExposure?.displaced) && (
-                    <TextOutput
+                    <DataDisplay
                         label={strings.eventDisplacedLabel}
                         value={populationExposure?.displaced}
                         maximumFractionDigits={2}
                         compact
                         valueType="number"
                         strongValue
-                        withLightBackground
+                        backgroundColor="foreground"
                     />
                 )}
                 {isDefined(populationExposure?.exposed_population) && (
-                    <TextOutput
+                    <DataDisplay
                         label={strings.eventPopulationLabel}
                         value={populationExposure?.exposed_population}
                         strongValue
-                        withLightBackground
+                        backgroundColor="foreground"
                     />
                 )}
                 {isDefined(populationExposure?.people_affected) && (
-                    <TextOutput
+                    <DataDisplay
                         label={strings.eventPeopleAffectedLabel}
                         value={populationExposure?.people_affected}
                         strongValue
-                        withLightBackground
+                        backgroundColor="foreground"
                     />
                 )}
                 {isDefined(populationExposure?.impact) && (
-                    <TextOutput
+                    <DataDisplay
                         label={strings.eventImpactLabel}
                         value={populationExposure?.impact}
                         strongValue
-                        withLightBackground
+                        backgroundColor="foreground"
                     />
                 )}
                 {isDefined(eventDetails?.severitydata)
                     && (isDefined(eventDetails) && (eventDetails?.eventtype) && !(eventDetails.eventtype === 'FL')) && (
-                    <TextOutput
+                    <DataDisplay
                         label={strings.eventSeverityLabel}
                         value={eventDetails?.severitydata?.severitytext}
                         strongValue
-                        withLightBackground
+                        backgroundColor="foreground"
                     />
                 )}
                 {isDefined(eventDetails?.alertlevel) && (
-                    <TextOutput
+                    <DataDisplay
                         label={strings.eventAlertType}
                         value={eventDetails?.alertlevel}
                         strongValue
-                        withLightBackground
+                        backgroundColor="foreground"
                     />
                 )}
                 {isDefined(eventDetails)
diff --git a/app/src/components/domain/RiskImminentEvents/Gdacs/EventListItem/index.tsx b/app/src/components/domain/RiskImminentEvents/Gdacs/EventListItem/index.tsx
index f3cb2b4f45..4997ae23c8 100644
--- a/app/src/components/domain/RiskImminentEvents/Gdacs/EventListItem/index.tsx
+++ b/app/src/components/domain/RiskImminentEvents/Gdacs/EventListItem/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import ImminentEventListItem from '#components/domain/ImminentEventListItem';
@@ -35,7 +35,7 @@ function EventListItem(props: Props) {
             onExpandClick={onExpandClick}
             heading={hazard_name ?? '--'}
             description={(
-                <TextOutput
+                <DataDisplay
                     label={strings.gdacsEventStartedOn}
                     value={start_date}
                     valueType="date"
diff --git a/app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventDetails/index.tsx b/app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventDetails/index.tsx
index 1351fdfcd9..2e0e0d1673 100644
--- a/app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventDetails/index.tsx
+++ b/app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventDetails/index.tsx
@@ -4,11 +4,11 @@ import {
 } from 'react';
 import {
     Container,
-    DateOutput,
+    DataDisplay,
+    DateDisplay,
     Description,
     ListView,
-    NumberOutput,
-    TextOutput,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -176,7 +176,7 @@ function EventDetails(props: Props) {
             >
                 <ListView layout="block">
                     {impactList.map((impact) => (
-                        <TextOutput
+                        <DataDisplay
                             key={impact.key}
                             label={resolveToComponent(
                                 strings.impactLabel,
@@ -189,21 +189,21 @@ function EventDetails(props: Props) {
                                 strings.meteoSwissImpactValue,
                                 {
                                     value: (
-                                        <NumberOutput
+                                        <NumberDisplay
                                             value={impact.value}
                                             compact
                                             maximumFractionDigits={2}
                                         />
                                     ),
                                     fivePercent: (
-                                        <NumberOutput
+                                        <NumberDisplay
                                             value={impact.fivePercentValue}
                                             compact
                                             maximumFractionDigits={2}
                                         />
                                     ),
                                     ninetyFivePercent: (
-                                        <NumberOutput
+                                        <NumberDisplay
                                             value={impact.ninetyFivePercentValue}
                                             compact
                                             maximumFractionDigits={2}
@@ -226,14 +226,14 @@ function EventDetails(props: Props) {
                     {
                         model: model_name ?? '--',
                         updatedAt: (
-                            <DateOutput
+                            <DateDisplay
                                 value={updated_at}
                                 format={UPDATED_AT_FORMAT}
                             />
                         ),
                         eventName: hazard_name,
                         countryName: country_details?.name ?? '--',
-                        eventDate: <DateOutput value={start_date} />,
+                        eventDate: <DateDisplay value={start_date} />,
                     },
                 )}
             </div>
diff --git a/app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventListItem/index.tsx b/app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventListItem/index.tsx
index 0e3f42ec6e..9d48b2c056 100644
--- a/app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventListItem/index.tsx
+++ b/app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventListItem/index.tsx
@@ -2,7 +2,7 @@ import {
     useEffect,
     useRef,
 } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import ImminentEventListItem from '#components/domain/ImminentEventListItem';
@@ -62,7 +62,7 @@ function EventListItem(props: Props) {
             onExpandClick={onExpandClick}
             heading={hazardName}
             description={(
-                <TextOutput
+                <DataDisplay
                     label={strings.meteoSwissEventListStartedOn}
                     value={start_date}
                     valueType="date"
diff --git a/app/src/components/domain/RiskImminentEvents/Pdc/EventDetails/index.tsx b/app/src/components/domain/RiskImminentEvents/Pdc/EventDetails/index.tsx
index 33d74aae64..3a49fad634 100644
--- a/app/src/components/domain/RiskImminentEvents/Pdc/EventDetails/index.tsx
+++ b/app/src/components/domain/RiskImminentEvents/Pdc/EventDetails/index.tsx
@@ -1,7 +1,7 @@
 import {
     Container,
+    DataDisplay,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -55,60 +55,60 @@ function EventDetails(props: Props) {
                 layout="block"
                 spacing="xs"
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.eventDetailsCreatedOn}
                     value={pdc_created_at}
                     valueType="date"
                     strongValue
-                    withLightBackground
+                    backgroundColor="foreground"
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.eventDetailsUpdatedOn}
                     value={pdc_updated_at}
                     valueType="date"
                     strongValue
-                    withLightBackground
+                    backgroundColor="foreground"
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.eventDetailsPeopleExposed}
                     value={popExposure?.total?.valueFormatted}
                     strongValue
-                    withLightBackground
+                    backgroundColor="foreground"
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.eventDetailsHouseholdExposed}
                     value={popExposure?.households?.valueFormatted}
                     strongValue
-                    withLightBackground
+                    backgroundColor="foreground"
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.eventDetailsPeopleGroups}
                     value={popExposure?.vulnerable?.valueFormatted}
                     strongValue
-                    withLightBackground
+                    backgroundColor="foreground"
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.eventDetailsValueExposed}
                     value={capitalExposure?.total?.valueFormatted}
                     strongValue
-                    withLightBackground
+                    backgroundColor="foreground"
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.eventDetailsSchoolExposed}
                     value={capitalExposure?.school?.valueFormatted}
                     strongValue
-                    withLightBackground
+                    backgroundColor="foreground"
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.eventHospitalsExposed}
                     value={capitalExposure?.hospital?.valueFormatted}
                     strongValue
-                    withLightBackground
+                    backgroundColor="foreground"
                 />
-                <TextOutput
+                <DataDisplay
                     valueType="text"
                     value={description}
-                    withLightBackground
+                    backgroundColor="foreground"
                 />
                 {children}
             </ListView>
diff --git a/app/src/components/domain/RiskImminentEvents/Pdc/EventListItem/index.tsx b/app/src/components/domain/RiskImminentEvents/Pdc/EventListItem/index.tsx
index 787e2a921b..1b0368f059 100644
--- a/app/src/components/domain/RiskImminentEvents/Pdc/EventListItem/index.tsx
+++ b/app/src/components/domain/RiskImminentEvents/Pdc/EventListItem/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import ImminentEventListItem from '#components/domain/ImminentEventListItem';
@@ -32,7 +32,7 @@ function EventListItem(props: Props) {
             className={className}
             heading={hazard_name ?? '--'}
             description={(
-                <TextOutput
+                <DataDisplay
                     label={strings.eventListStartedOn}
                     value={start_date}
                     valueType="date"
diff --git a/app/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/index.tsx b/app/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/index.tsx
index b4584a98c6..dd53882909 100644
--- a/app/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/index.tsx
+++ b/app/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/index.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import {
     Container,
+    DataDisplay,
     ListView,
-    TextOutput,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -268,13 +268,13 @@ function EventDetails(props: Props) {
                 )}
                 <div>
                     {isDefined(eventDetails?.wind_speed) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpWindSpeed}
                             value={eventDetails?.wind_speed}
                         />
                     )}
                     {isDefined(populationImpact) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpPeopleExposed}
                             value={populationImpact}
                             valueType="number"
@@ -284,53 +284,53 @@ function EventDetails(props: Props) {
                 </div>
                 <div>
                     {isDefined(eventDetails?.source) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpSource}
                             value={eventDetails?.source}
                         />
                     )}
                     {isDefined(eventDetails?.sitrep) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpSitrep}
                             value={eventDetails?.sitrep}
                         />
                     )}
                     {isDefined(eventDetails?.mag) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpMagnitude}
                             value={eventDetails?.mag}
                             valueType="number"
                         />
                     )}
                     {isDefined(eventDetails?.depth) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpDepth}
                             value={eventDetails?.depth}
                             valueType="number"
                         />
                     )}
                     {isDefined(eventDetails?.alert_level) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpAlertType}
                             value={eventDetails?.alert_level}
                         />
                     )}
                     {isDefined(eventDetails?.effective_date) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpEffective}
                             value={eventDetails?.effective_date}
                             valueType="date"
                         />
                     )}
                     {isDefined(eventDetails?.from_date) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpFromDate}
                             value={eventDetails?.from_date}
                             valueType="date"
                         />
                     )}
                     {isDefined(eventDetails?.to_date) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpToDate}
                             value={eventDetails?.to_date}
                             valueType="date"
@@ -339,7 +339,7 @@ function EventDetails(props: Props) {
                 </div>
                 <div>
                     {isDefined(populationExposure?.exposure_60_kmh) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpExposed60}
                             value={populationExposure?.exposure_60_kmh}
                             valueType="number"
@@ -347,7 +347,7 @@ function EventDetails(props: Props) {
                         />
                     )}
                     {isDefined(populationExposure?.exposure_90_kmh) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpExposed90}
                             value={populationExposure?.exposure_90_kmh}
                             valueType="number"
@@ -355,7 +355,7 @@ function EventDetails(props: Props) {
                         />
                     )}
                     {isDefined(populationExposure?.exposure_120_kmh) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpExposed120}
                             value={populationExposure?.exposure_120_kmh}
                             valueType="number"
@@ -363,7 +363,7 @@ function EventDetails(props: Props) {
                         />
                     )}
                     {isDefined(eventDetails?.flood_area) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpFloodArea}
                             value={eventDetails?.flood_area}
                             valueType="number"
@@ -371,7 +371,7 @@ function EventDetails(props: Props) {
                         />
                     )}
                     {isDefined(eventDetails?.fl_croplnd) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.wfpFloodCropland}
                             value={eventDetails?.fl_croplnd}
                             valueType="number"
diff --git a/app/src/components/domain/RiskImminentEvents/WfpAdam/EventListItem/index.tsx b/app/src/components/domain/RiskImminentEvents/WfpAdam/EventListItem/index.tsx
index 6351e1134f..22d25d81d6 100644
--- a/app/src/components/domain/RiskImminentEvents/WfpAdam/EventListItem/index.tsx
+++ b/app/src/components/domain/RiskImminentEvents/WfpAdam/EventListItem/index.tsx
@@ -2,7 +2,7 @@ import {
     useEffect,
     useRef,
 } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import ImminentEventListItem from '#components/domain/ImminentEventListItem';
@@ -58,7 +58,7 @@ function EventListItem(props: Props) {
             onExpandClick={onExpandClick}
             heading={title}
             description={(
-                <TextOutput
+                <DataDisplay
                     label={strings.wfpEventListPublishedOn}
                     value={publish_date}
                     valueType="date"
diff --git a/app/src/components/domain/RiskImminentEvents/index.tsx b/app/src/components/domain/RiskImminentEvents/index.tsx
index 12282dd4a5..8c495c2ce1 100644
--- a/app/src/components/domain/RiskImminentEvents/index.tsx
+++ b/app/src/components/domain/RiskImminentEvents/index.tsx
@@ -12,9 +12,9 @@ import {
 } from '@ifrc-go/icons';
 import {
     Container,
-    InfoPopup,
     LegendItem,
     ListView,
+    MoreInfo,
     Radio,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -123,7 +123,7 @@ function RiskImminentEvents(props: Props) {
             footer={(
                 <ListView
                     withWrap
-                    withDarkBackground
+                    backgroundColor="background"
                     withSpaceBetweenContents
                     withPadding
                 >
@@ -151,9 +151,10 @@ function RiskImminentEvents(props: Props) {
                             value={activeView === 'gdacs'}
                             onClick={handleRadioClick}
                             after={(
-                                <InfoPopup
+                                <MoreInfo
                                     title={strings.gdacsTitle}
-                                    description={resolveToComponent(
+                                >
+                                    {resolveToComponent(
                                         strings.gdacsDescription,
                                         {
                                             here: (
@@ -167,7 +168,7 @@ function RiskImminentEvents(props: Props) {
                                             ),
                                         },
                                     )}
-                                />
+                                </MoreInfo>
                             )}
                         >
                             {strings.imminentEventsSourceGdacsLabel}
@@ -177,9 +178,10 @@ function RiskImminentEvents(props: Props) {
                             value={activeView === 'pdc'}
                             onClick={handleRadioClick}
                             after={(
-                                <InfoPopup
+                                <MoreInfo
                                     title={strings.pdcTooltipTitle}
-                                    description={resolveToComponent(
+                                >
+                                    {resolveToComponent(
                                         strings.pdcTooltipDescription,
                                         {
                                             here: (
@@ -193,7 +195,7 @@ function RiskImminentEvents(props: Props) {
                                             ),
                                         },
                                     )}
-                                />
+                                </MoreInfo>
                             )}
                         >
                             {strings.imminentEventsSourcePdcLabel}
@@ -204,9 +206,10 @@ function RiskImminentEvents(props: Props) {
                                 value={activeView === 'wfpAdam'}
                                 onClick={handleRadioClick}
                                 after={(
-                                    <InfoPopup
+                                    <MoreInfo
                                         title={strings.wfpAdamTitle}
-                                        description={resolveToComponent(
+                                    >
+                                        {resolveToComponent(
                                             strings.wfpAdamDescription,
                                             {
                                                 here: (
@@ -220,7 +223,7 @@ function RiskImminentEvents(props: Props) {
                                                 ),
                                             },
                                         )}
-                                    />
+                                    </MoreInfo>
                                 )}
                             >
                                 {strings.imminentEventsSourceWfpAdamLabel}
@@ -232,32 +235,31 @@ function RiskImminentEvents(props: Props) {
                                 value={activeView === 'meteoSwiss'}
                                 onClick={handleRadioClick}
                                 after={(
-                                    <InfoPopup
+                                    <MoreInfo
                                         title={strings.meteoSwissTitle}
-                                        description={(
-                                            <ListView layout="block">
-                                                <div>
-                                                    {strings.meteoSwissDescriptionOne}
-                                                </div>
-                                                <div>
-                                                    {resolveToComponent(
-                                                        strings.meteoSwissDescriptionTwo,
-                                                        {
-                                                            here: (
-                                                                <Link
-                                                                    href="https://www.meteoswiss.admin.ch/about-us/research-and-cooperation/projects/2021/weather4un.html"
-                                                                    styleVariant="action"
-                                                                    external
-                                                                >
-                                                                    {strings.here}
-                                                                </Link>
-                                                            ),
-                                                        },
-                                                    )}
-                                                </div>
-                                            </ListView>
-                                        )}
-                                    />
+                                    >
+                                        <ListView layout="block">
+                                            <div>
+                                                {strings.meteoSwissDescriptionOne}
+                                            </div>
+                                            <div>
+                                                {resolveToComponent(
+                                                    strings.meteoSwissDescriptionTwo,
+                                                    {
+                                                        here: (
+                                                            <Link
+                                                                href="https://www.meteoswiss.admin.ch/about-us/research-and-cooperation/projects/2021/weather4un.html"
+                                                                styleVariant="action"
+                                                                external
+                                                            >
+                                                                {strings.here}
+                                                            </Link>
+                                                        ),
+                                                    },
+                                                )}
+                                            </div>
+                                        </ListView>
+                                    </MoreInfo>
                                 )}
                             >
                                 {strings.imminentEventsSourceMeteoSwissLabel}
diff --git a/app/src/components/domain/RiskSeasonalMap/CountryListItem/index.tsx b/app/src/components/domain/RiskSeasonalMap/CountryListItem/index.tsx
index 4deba1f72f..de2b5381f1 100644
--- a/app/src/components/domain/RiskSeasonalMap/CountryListItem/index.tsx
+++ b/app/src/components/domain/RiskSeasonalMap/CountryListItem/index.tsx
@@ -55,7 +55,7 @@ function CountryListItem(props: Props) {
                 )}
                 spacing="sm"
                 withPadding
-                withDarkBackground
+                backgroundColor="background"
                 withoutSpacingOpticalCorrection
             >
                 <ListView
diff --git a/app/src/components/domain/RiskSeasonalMap/TooltipContent/index.tsx b/app/src/components/domain/RiskSeasonalMap/TooltipContent/index.tsx
index 9230712619..d8ac2a48ad 100644
--- a/app/src/components/domain/RiskSeasonalMap/TooltipContent/index.tsx
+++ b/app/src/components/domain/RiskSeasonalMap/TooltipContent/index.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import {
     ColorPreview,
     Container,
-    TextOutput,
+    DataDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { formatNumber } from '@ifrc-go/ui/utils';
@@ -80,14 +80,14 @@ function TooltipContent(props: Props) {
                 )}
                 spacing="sm"
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.riskScoreLabel}
                     strongValue
                     value={riskCategoryToLabelMap[riskCategory]}
                     textSize="sm"
                 />
                 {selectedRiskMetric !== 'riskScore' && (
-                    <TextOutput
+                    <DataDisplay
                         label={riskMetricLabelMap[selectedRiskMetric]}
                         strongValue
                         value={formatNumber(Math.ceil(value), { maximumFractionDigits: 0 })}
diff --git a/app/src/components/domain/RiskSeasonalMap/index.tsx b/app/src/components/domain/RiskSeasonalMap/index.tsx
index 1c46b40b75..29d4677fdf 100644
--- a/app/src/components/domain/RiskSeasonalMap/index.tsx
+++ b/app/src/components/domain/RiskSeasonalMap/index.tsx
@@ -6,10 +6,10 @@ import {
 } from 'react';
 import {
     Container,
+    DataDisplay,
     InlineLayout,
     LegendItem,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -817,12 +817,12 @@ function RiskSeasonalMap(props: Props) {
             withHeaderBorder
             footer={(
                 <ListView
-                    withDarkBackground
+                    backgroundColor="background"
                     withPadding
                     withWrap
                     withSpaceBetweenContents
                 >
-                    <TextOutput
+                    <DataDisplay
                         label={strings.severityLegendLabel}
                         value={(
                             <ListView
@@ -840,7 +840,7 @@ function RiskSeasonalMap(props: Props) {
                             </ListView>
                         )}
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.hazardsTypeLegendLabel}
                         value={(
                             <ListView
@@ -913,9 +913,9 @@ function RiskSeasonalMap(props: Props) {
                     pending={dataPending}
                     empty={isNotDefined(filteredData) || filteredData?.length === 0}
                     withPadding
-                    withBackground
+                    backgroundColor="foreground"
                     withContentOverflow
-                    withShadow
+                    boxShadow="md"
                     withContentWell
                     withoutSpacingOpticalCorrection
                     spacing="sm"
diff --git a/app/src/components/domain/ShareUserItem/index.tsx b/app/src/components/domain/ShareUserItem/index.tsx
index 60eb2ba591..d7c505c169 100644
--- a/app/src/components/domain/ShareUserItem/index.tsx
+++ b/app/src/components/domain/ShareUserItem/index.tsx
@@ -41,7 +41,7 @@ function ShareUserItem(props: Props) {
                 <Button
                     name={userId}
                     onClick={onUserRemove}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.removeUser}
                 >
                     <CloseLineIcon />
diff --git a/app/src/components/domain/SourceInformationInput/index.tsx b/app/src/components/domain/SourceInformationInput/index.tsx
index af5923a2b8..f6dcd34861 100644
--- a/app/src/components/domain/SourceInformationInput/index.tsx
+++ b/app/src/components/domain/SourceInformationInput/index.tsx
@@ -92,7 +92,7 @@ function SourceInformationInput(props: Props) {
                 className={styles.removeButton}
                 name={index}
                 onClick={onRemove}
-                styleVariant="action"
+                variant="tertiary"
                 disabled={disabled || readOnly}
                 title={strings.sourceInformationDeleteButton}
             >
diff --git a/app/src/components/domain/SurgeCatalogueContainer/index.tsx b/app/src/components/domain/SurgeCatalogueContainer/index.tsx
index f91c1316a2..7853bea615 100644
--- a/app/src/components/domain/SurgeCatalogueContainer/index.tsx
+++ b/app/src/components/domain/SurgeCatalogueContainer/index.tsx
@@ -71,7 +71,7 @@ function SurgeCatalogueContainer(props: Props) {
                 <Button
                     name={undefined}
                     onClick={handleBackButtonClick}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.surgeGoBack}
                     textSize="lg"
                 >
diff --git a/app/src/components/printable/PrintableDataDisplay/index.tsx b/app/src/components/printable/PrintableDataDisplay/index.tsx
index b2d6d08ed7..ed590a2ddc 100644
--- a/app/src/components/printable/PrintableDataDisplay/index.tsx
+++ b/app/src/components/printable/PrintableDataDisplay/index.tsx
@@ -1,19 +1,19 @@
 import { useMemo } from 'react';
 import {
-    BooleanOutput,
-    type BooleanOutputProps,
-    DateOutput,
-    type DateOutputProps,
+    BooleanDisplay,
+    type BooleanDisplayProps,
+    DateDisplay,
+    type DateDisplayProps,
     ListView,
-    NumberOutput,
-    type NumberOutputProps,
+    NumberDisplay,
+    type NumberDisplayProps,
 } from '@ifrc-go/ui';
-import { useSpacingToken } from '@ifrc-go/ui/hooks';
 import {
     DEFAULT_INVALID_TEXT,
     DEFAULT_PRINT_DATE_FORMAT,
     fullSpacings,
     gapSpacings,
+    getSpacingClassName,
     paddingSpacings,
     type SpacingType,
 } from '@ifrc-go/ui/utils';
@@ -40,17 +40,17 @@ interface BaseProps {
     withDiff: boolean;
 }
 
-interface BooleanProps extends BooleanOutputProps {
+interface BooleanProps extends BooleanDisplayProps {
     valueType: 'boolean',
-    prevValue?: BooleanOutputProps['value'];
+    prevValue?: BooleanDisplayProps['value'];
 }
 
-interface NumberProps extends NumberOutputProps {
+interface NumberProps extends NumberDisplayProps {
     valueType: 'number',
-    prevValue?: NumberOutputProps['value'];
+    prevValue?: NumberDisplayProps['value'];
 }
 
-interface DateProps extends DateOutputProps {
+interface DateProps extends DateDisplayProps {
     valueType: 'date',
     prevValue?: DateProps['value'];
 }
@@ -96,7 +96,7 @@ function PrintableDataDisplay(props: Props) {
 
         if (componentProps.valueType === 'number') {
             return (
-                <NumberOutput
+                <NumberDisplay
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...componentProps}
                     invalidText={invalidText}
@@ -106,7 +106,7 @@ function PrintableDataDisplay(props: Props) {
 
         if (componentProps.valueType === 'date') {
             return (
-                <DateOutput
+                <DateDisplay
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...componentProps}
                     invalidText={invalidText}
@@ -117,7 +117,7 @@ function PrintableDataDisplay(props: Props) {
 
         if (componentProps.valueType === 'boolean') {
             return (
-                <BooleanOutput
+                <BooleanDisplay
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...componentProps}
                     invalidText={invalidText}
@@ -145,7 +145,7 @@ function PrintableDataDisplay(props: Props) {
 
         if (componentProps.valueType === 'number') {
             return (
-                <NumberOutput
+                <NumberDisplay
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...componentProps}
                     invalidText={invalidText}
@@ -156,7 +156,7 @@ function PrintableDataDisplay(props: Props) {
 
         if (componentProps.valueType === 'date') {
             return (
-                <DateOutput
+                <DateDisplay
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...componentProps}
                     invalidText={invalidText}
@@ -168,7 +168,7 @@ function PrintableDataDisplay(props: Props) {
 
         if (componentProps.valueType === 'boolean') {
             return (
-                <BooleanOutput
+                <BooleanDisplay
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...componentProps}
                     invalidText={invalidText}
@@ -208,13 +208,13 @@ function PrintableDataDisplay(props: Props) {
 
     const spacingOffset = -3;
 
-    const spacingClassName = useSpacingToken({
+    const spacingClassName = getSpacingClassName({
         spacing,
         offset: spacingOffset,
         modes: withPadding ? fullSpacings : gapSpacings,
     });
 
-    const innerPaddingClassName = useSpacingToken({
+    const innerPaddingClassName = getSpacingClassName({
         spacing,
         offset: spacingOffset,
         modes: paddingSpacings,
diff --git a/app/src/utils/common.ts b/app/src/utils/common.ts
index 855251944c..adb678160c 100644
--- a/app/src/utils/common.ts
+++ b/app/src/utils/common.ts
@@ -25,6 +25,27 @@ export const defaultRanking: Record<SearchResponseKeys, number> = {
     rapid_response_deployments: 9,
 };
 
+/**
+ * Resolve a CSS custom property (design token) to its computed value.
+ *
+ * Use where a literal color string is required and `var(...)` cannot be
+ * used — notably Mapbox GL paint expressions, which don't evaluate CSS
+ * variables. Falls back to the provided value when the token is
+ * unavailable (no DOM, or stylesheet not yet applied), so callers always
+ * get a valid color.
+ */
+export function resolveCssColor(token: string, fallback: string): string {
+    if (typeof document === 'undefined') {
+        return fallback;
+    }
+
+    const value = getComputedStyle(document.documentElement)
+        .getPropertyValue(token)
+        .trim();
+
+    return value || fallback;
+}
+
 export function downloadFile(
     blob: Blob,
     filename: string,
diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index fc0b0b3ae6..8c2fe15a59 100644
--- a/app/src/utils/constants.ts
+++ b/app/src/utils/constants.ts
@@ -34,6 +34,9 @@ export const SEARCH_TEXT_LENGTH_MIN = 3;
 
 // Risk
 
+// Hazard colors — canonical source is @ifrc-go/ui's --go-ui-color-hazard-*
+// design tokens. These literals are load-time fallbacks for resolveCssColor
+// (Mapbox paint can't parse var()). Keep in sync with the ui tokens.
 export const COLOR_HAZARD_CYCLONE = '#a4bede';
 export const COLOR_HAZARD_DROUGHT = '#b68fba';
 export const COLOR_HAZARD_FOOD_INSECURITY = '#b7c992';
diff --git a/app/src/utils/domain/risk.ts b/app/src/utils/domain/risk.ts
index abef1dd06e..f376201136 100644
--- a/app/src/utils/domain/risk.ts
+++ b/app/src/utils/domain/risk.ts
@@ -15,6 +15,7 @@ import {
 } from '@togglecorp/fujs';
 
 import { type components } from '#generated/riskTypes';
+import { resolveCssColor } from '#utils/common';
 import {
     CATEGORY_RISK_HIGH,
     CATEGORY_RISK_LOW,
@@ -38,17 +39,21 @@ type CountrySeasonal = RiskApiResponse<'/api/v1/country-seasonal/'>;
 type IpcData = CountrySeasonal[number]['ipc_displacement_data'];
 type GwisData = CountrySeasonal[number]['gwis'];
 
+// Hazard colors are sourced from the @ifrc-go/ui design tokens
+// (--go-ui-color-hazard-*), resolved to literal hex at module load — this
+// map also feeds a Mapbox paint expression (RiskImminentEventMap/mapStyles)
+// which can't parse var(). The imported COLOR_HAZARD_* act as fallbacks.
 export const hazardTypeToColorMap: Record<HazardType, string> = {
-    EQ: COLOR_HAZARD_EARTHQUAKE,
-    FL: COLOR_HAZARD_FLOOD,
-    TC: COLOR_HAZARD_CYCLONE,
+    EQ: resolveCssColor('--go-ui-color-hazard-earthquake', COLOR_HAZARD_EARTHQUAKE),
+    FL: resolveCssColor('--go-ui-color-hazard-flood', COLOR_HAZARD_FLOOD),
+    TC: resolveCssColor('--go-ui-color-hazard-cyclone', COLOR_HAZARD_CYCLONE),
     EP: COLOR_LIGHT_GREY,
-    FI: COLOR_HAZARD_FOOD_INSECURITY,
-    SS: COLOR_HAZARD_STORM,
-    DR: COLOR_HAZARD_DROUGHT,
-    TS: COLOR_HAZARD_CYCLONE,
+    FI: resolveCssColor('--go-ui-color-hazard-fi', COLOR_HAZARD_FOOD_INSECURITY),
+    SS: resolveCssColor('--go-ui-color-hazard-storm', COLOR_HAZARD_STORM),
+    DR: resolveCssColor('--go-ui-color-hazard-drought', COLOR_HAZARD_DROUGHT),
+    TS: resolveCssColor('--go-ui-color-hazard-cyclone', COLOR_HAZARD_CYCLONE),
     CD: COLOR_LIGHT_GREY,
-    WF: COLOR_HAZARD_WILDFIRE,
+    WF: resolveCssColor('--go-ui-color-hazard-wildfire', COLOR_HAZARD_WILDFIRE),
 };
 
 export function getDataWithTruthyHazardType<
diff --git a/app/src/utils/domain/tableHelpers/index.ts b/app/src/utils/domain/tableHelpers/index.ts
index 59cead6fc0..ce18c71509 100644
--- a/app/src/utils/domain/tableHelpers/index.ts
+++ b/app/src/utils/domain/tableHelpers/index.ts
@@ -2,11 +2,11 @@ import {
     type Column,
     HeaderCell,
     type HeaderCellProps,
-    type NumberOutputProps,
-    ReducedListDisplay,
-    type ReducedListDisplayProps,
+    type NumberDisplayProps,
     type SortDirection,
     type TableActionsProps,
+    TruncatedList,
+    type TruncatedListProps,
 } from '@ifrc-go/ui';
 import {
     createNumberColumn,
@@ -108,7 +108,7 @@ export function createCountryListColumn<DATUM, KEY>(
     const item: Column<
         DATUM,
         KEY,
-        ReducedListDisplayProps<PartialCountry, CountryLinkProps>,
+        TruncatedListProps<PartialCountry, CountryLinkProps>,
         HeaderCellProps
     > = {
         id,
@@ -118,7 +118,7 @@ export function createCountryListColumn<DATUM, KEY>(
             sortable: false,
         },
         headerContainerClassName: options?.headerContainerClassName,
-        cellRenderer: ReducedListDisplay,
+        cellRenderer: TruncatedList,
         cellRendererParams: (_, datum) => {
             const countryList = countryListSelector(datum);
             return {
@@ -149,7 +149,7 @@ export function createRegionListColumn<DATUM, KEY>(
     const item: Column<
         DATUM,
         KEY,
-        ReducedListDisplayProps<PartialRegion, RegionLinkProps>,
+        TruncatedListProps<PartialRegion, RegionLinkProps>,
         HeaderCellProps
     > = {
         id,
@@ -159,7 +159,7 @@ export function createRegionListColumn<DATUM, KEY>(
             sortable: false,
         },
         headerContainerClassName: options?.headerContainerClassName,
-        cellRenderer: ReducedListDisplay,
+        cellRenderer: TruncatedList,
         cellRendererParams: (_, datum) => {
             const regionList = regionListSelector(datum);
 
@@ -275,7 +275,7 @@ export function createBudgetColumn<D, K extends string | number>(
     id: string,
     title: string,
     accessor: (item: D) => number | undefined | null,
-    options?: Options<D, K, NumberOutputProps, HeaderCellProps>,
+    options?: Options<D, K, NumberDisplayProps, HeaderCellProps>,
 ) {
     return createNumberColumn<D, K>(
         id,
diff --git a/app/src/views/AccountDetails/ChangePassword/index.tsx b/app/src/views/AccountDetails/ChangePassword/index.tsx
index 3f5150c95b..17531952c0 100644
--- a/app/src/views/AccountDetails/ChangePassword/index.tsx
+++ b/app/src/views/AccountDetails/ChangePassword/index.tsx
@@ -4,8 +4,8 @@ import {
 } from 'react';
 import {
     Button,
+    Dialog,
     ListView,
-    Modal,
     TextInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -155,7 +155,7 @@ function ChangePasswordModal(props: Props) {
     const fieldError = getErrorObject(formError);
 
     return (
-        <Modal
+        <Dialog
             heading={strings.changePasswordModalHeading}
             onClose={handleModalCloseButton}
             withoutCloseButton
@@ -171,7 +171,7 @@ function ChangePasswordModal(props: Props) {
                         name={undefined}
                         onClick={handleSubmitPassword}
                         disabled={updatePasswordPending}
-                        styleVariant="filled"
+                        variant="primary"
                     >
                         {strings.changePasswordConfirmButtonLabel}
                     </Button>
@@ -219,7 +219,7 @@ function ChangePasswordModal(props: Props) {
                     withAsterisk
                 />
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/AccountDetails/EditAccountInfo/index.tsx b/app/src/views/AccountDetails/EditAccountInfo/index.tsx
index 7c532b1291..a7163ea03a 100644
--- a/app/src/views/AccountDetails/EditAccountInfo/index.tsx
+++ b/app/src/views/AccountDetails/EditAccountInfo/index.tsx
@@ -4,8 +4,8 @@ import {
 } from 'react';
 import {
     Button,
+    Dialog,
     ListView,
-    Modal,
     SelectInput,
     TextInput,
 } from '@ifrc-go/ui';
@@ -207,7 +207,7 @@ function EditAccountInfo(props: Props) {
     const profileError = getErrorObject(fieldError?.profile);
 
     return (
-        <Modal
+        <Dialog
             heading={strings.editUserProfileHeading}
             headingLevel={3}
             onClose={handleModalCloseButton}
@@ -224,7 +224,7 @@ function EditAccountInfo(props: Props) {
                         name={undefined}
                         onClick={handleFormSubmit}
                         disabled={updateAccountPending}
-                        styleVariant="filled"
+                        variant="primary"
                     >
                         {strings.editProfileConfirmButtonLabel}
                     </Button>
@@ -334,7 +334,7 @@ function EditAccountInfo(props: Props) {
                     disabled={updateAccountPending}
                 />
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/AccountDetails/GenerateMontandonTokenModal/index.tsx b/app/src/views/AccountDetails/GenerateMontandonTokenModal/index.tsx
index f2a5308eaf..3b2f622bfb 100644
--- a/app/src/views/AccountDetails/GenerateMontandonTokenModal/index.tsx
+++ b/app/src/views/AccountDetails/GenerateMontandonTokenModal/index.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 import {
     Button,
+    Dialog,
     ListView,
-    Modal,
     TextInput,
 } from '@ifrc-go/ui';
 import {
@@ -67,7 +67,7 @@ function GenerateMontandonTokenModal(props: Props) {
     );
 
     return (
-        <Modal
+        <Dialog
             className={styles.generateMontandonTokenModal}
             heading={strings.title}
             onClose={onClose}
@@ -101,7 +101,7 @@ function GenerateMontandonTokenModal(props: Props) {
                                 onClick={handleAcceptAndGenerateClick}
                                 disabled={isNotDefined(tokenTitle)
                                     || tokenTitle.trim().length < MIN_TITLE_LENGTH}
-                                styleVariant="filled"
+                                variant="primary"
                             >
                                 {strings.acceptButtonLabel}
                             </Button>
@@ -151,7 +151,7 @@ function GenerateMontandonTokenModal(props: Props) {
                     </>
                 )}
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/AccountDetails/TokenDetails/index.tsx b/app/src/views/AccountDetails/TokenDetails/index.tsx
index 3be3f919c6..54940eded7 100644
--- a/app/src/views/AccountDetails/TokenDetails/index.tsx
+++ b/app/src/views/AccountDetails/TokenDetails/index.tsx
@@ -3,9 +3,9 @@ import { CopyLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Container,
+    DataDisplay,
     Description,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { isDefined } from '@togglecorp/fujs';
@@ -46,7 +46,7 @@ function TokenDetails(props: Props) {
             headerActions={isDefined(data?.token) && (
                 <Button
                     name={data?.token}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.copyButtonLabel}
                     onClick={handleCopyButtonClick}
                 >
@@ -59,13 +59,13 @@ function TokenDetails(props: Props) {
                     spacing="3xs"
                     layout="block"
                 >
-                    <TextOutput
+                    <DataDisplay
                         label={strings.createdAtLabel}
                         value={data?.created_at}
                         valueType="date"
                         textSize="sm"
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.expiresOnLabel}
                         value={data?.expire_timestamp}
                         valueType="date"
@@ -73,7 +73,7 @@ function TokenDetails(props: Props) {
                     />
                 </ListView>
             )}
-            withBackground={!withoutPadding}
+            backgroundColor={!withoutPadding ? 'foreground' : undefined}
             withPadding={!withoutPadding}
         >
             {isDefined(data?.token) && (
diff --git a/app/src/views/AccountDetails/index.tsx b/app/src/views/AccountDetails/index.tsx
index 911a656ae1..f12162c788 100644
--- a/app/src/views/AccountDetails/index.tsx
+++ b/app/src/views/AccountDetails/index.tsx
@@ -6,9 +6,9 @@ import { PencilFillIcon } from '@ifrc-go/icons';
 import {
     Button,
     Container,
+    DataDisplay,
     ListView,
-    Pager,
-    TextOutput,
+    Pagination,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -122,12 +122,12 @@ export function Component() {
                     layout="grid"
                     numPreferredGridColumns={3}
                 >
-                    <TextOutput
+                    <DataDisplay
                         label={strings.usernameLabel}
                         value={meResponse?.username}
                         strongLabel
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.fullNameLabel}
                         strongLabel
                         value={
@@ -136,32 +136,32 @@ export function Component() {
                                 .filter(isTruthyString).join(' ')
                         }
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.emailLabel}
                         value={meResponse?.email}
                         strongLabel
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.phoneNumberLabel}
                         value={meResponse?.profile?.phone_number}
                         strongLabel
                     />
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.countryLabel}
                         value={userCountry?.name}
                     />
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.cityLabel}
                         value={meResponse?.profile?.city}
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.organizationLabel}
                         value={meResponse?.profile?.org}
                         strongLabel
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.organizationTypeLabel}
                         value={
                             isDefined(meResponse?.profile.org_type)
@@ -170,12 +170,12 @@ export function Component() {
                         }
                         strongLabel
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.departmentLabel}
                         value={meResponse?.profile?.department}
                         strongLabel
                     />
-                    <TextOutput
+                    <DataDisplay
                         label={strings.positionLabel}
                         value={meResponse?.profile?.position}
                         strongLabel
@@ -216,7 +216,7 @@ export function Component() {
                     footerActions={isDefined(montandonTokenResponse)
                         && isDefined(montandonTokenResponse.count)
                         && (
-                            <Pager
+                            <Pagination
                                 activePage={page}
                                 itemsCount={montandonTokenResponse.count}
                                 maxItemsPerPage={TOKEN_PAGE_SIZE}
@@ -225,7 +225,7 @@ export function Component() {
                         )}
                     overlayPending
                     withPadding
-                    withDarkBackground
+                    backgroundColor="background"
                     spacing="lg"
                     empty={isNotDefined(montandonTokenResponse)
                         || montandonTokenResponse.results.length === 0}
diff --git a/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx b/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx
index 6c6c7da303..949610b71f 100644
--- a/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx
+++ b/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx
@@ -5,11 +5,11 @@ import {
 } from 'react';
 import {
     Container,
+    DataDisplay,
     ListView,
-    Pager,
+    Pagination,
     Table,
     TableBodyContent,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { type RowOptions } from '@ifrc-go/ui';
 import { type Language } from '@ifrc-go/ui/contexts';
@@ -290,7 +290,7 @@ function ActiveDrefTable(props: Props) {
                             withSpacingOpticalCorrection
                         >
                             {statusDescription?.map((status) => (
-                                <TextOutput
+                                <DataDisplay
                                     key={status.key}
                                     strongLabel
                                     withoutLabelColon
@@ -463,7 +463,7 @@ function ActiveDrefTable(props: Props) {
             heading={strings.activeDrefTitle}
             headerActions={actions}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={activeDrefResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/AccountMyFormsDref/CompletedDrefTable/index.tsx b/app/src/views/AccountMyFormsDref/CompletedDrefTable/index.tsx
index 5877c3f8fb..a340bfe8a3 100644
--- a/app/src/views/AccountMyFormsDref/CompletedDrefTable/index.tsx
+++ b/app/src/views/AccountMyFormsDref/CompletedDrefTable/index.tsx
@@ -5,7 +5,7 @@ import {
 } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     Table,
     TableBodyContent,
 } from '@ifrc-go/ui';
@@ -236,7 +236,7 @@ function CompletedDrefTable(props: Props) {
             heading={strings.completedDrefTitle}
             headerActions={actions}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={completedDrefResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/DownloadImportTemplateModal/index.tsx b/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/DownloadImportTemplateModal/index.tsx
index f177f572da..7d9d0d3e49 100644
--- a/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/DownloadImportTemplateModal/index.tsx
+++ b/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/DownloadImportTemplateModal/index.tsx
@@ -6,8 +6,8 @@ import {
 import {
     Button,
     Description,
+    Dialog,
     ListView,
-    Modal,
     RadioInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -90,7 +90,7 @@ function DownloadImportTemplateModal(props: Props) {
     ]);
 
     return (
-        <Modal
+        <Dialog
             heading={strings.heading}
             footerActions={(
                 <Button
@@ -119,7 +119,7 @@ function DownloadImportTemplateModal(props: Props) {
                     {strings.description}
                 </Description>
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/AccountMyFormsDref/DrefTableActions/index.tsx b/app/src/views/AccountMyFormsDref/DrefTableActions/index.tsx
index c918033733..1c3281f714 100644
--- a/app/src/views/AccountMyFormsDref/DrefTableActions/index.tsx
+++ b/app/src/views/AccountMyFormsDref/DrefTableActions/index.tsx
@@ -15,9 +15,9 @@ import {
 import type { ButtonProps } from '@ifrc-go/ui';
 import {
     Button,
+    Dialog,
     ListView,
     Message,
-    Modal,
     RadioInput,
     TableActions,
 } from '@ifrc-go/ui';
@@ -734,7 +734,7 @@ function DrefTableActions(props: Props) {
                 />
             )}
             {showOperationConfirmModal && (
-                <Modal
+                <Dialog
                     heading={strings.dropdownActionImminentNewOpsUpdateConfirmationHeading}
                     onClose={setShowOperationConfirmModalFalse}
                     footerActions={(
@@ -768,10 +768,10 @@ function DrefTableActions(props: Props) {
                             </>
                         )}
                     </ListView>
-                </Modal>
+                </Dialog>
             )}
             {showFinalReportConfirmModal && (
-                <Modal
+                <Dialog
                     heading={strings.dropdownActionNewFinalReportConfirmationHeading}
                     onClose={setShowFinalReportConfirmModalFalse}
                     footerActions={(
@@ -805,15 +805,15 @@ function DrefTableActions(props: Props) {
                             </>
                         )}
                     </ListView>
-                </Modal>
+                </Dialog>
             )}
             {drefApprovalPending && (
-                <Modal>
+                <Dialog>
                     <Message
                         pending
                         title={strings.drefApprovalInProgressTitle}
                     />
-                </Modal>
+                </Dialog>
             )}
         </TableActions>
     );
diff --git a/app/src/views/AccountMyFormsDref/index.tsx b/app/src/views/AccountMyFormsDref/index.tsx
index b7cfee6153..82785e0150 100644
--- a/app/src/views/AccountMyFormsDref/index.tsx
+++ b/app/src/views/AccountMyFormsDref/index.tsx
@@ -47,7 +47,7 @@ export function Component() {
                         <Button
                             name="completed"
                             onClick={setCurrentView}
-                            styleVariant="action"
+                            variant="tertiary"
                             after={<ChevronRightLineIcon className={styles.icon} />}
                         >
                             {strings.showCompletedButtonLabel}
@@ -61,7 +61,7 @@ export function Component() {
                         <Button
                             name="active"
                             onClick={setCurrentView}
-                            styleVariant="action"
+                            variant="tertiary"
                             before={<ChevronLeftLineIcon className={styles.icon} />}
                         >
                             {strings.backToActiveButtonLabel}
diff --git a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
index 17ebf8a0b7..e8019d7304 100644
--- a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
@@ -11,11 +11,11 @@ import {
     Alert,
     Button,
     Description,
-    DropdownMenu,
-    Label,
+    Dialog,
+    DisplayLabel,
+    FileInputButton,
     ListView,
-    Modal,
-    RawFileInput,
+    Menu,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -186,10 +186,9 @@ function EapStatus(props: Props) {
 
     return (
         <>
-            <DropdownMenu
+            <Menu
                 label={statusLabelMapping?.[status] ?? '--'}
-                labelColorVariant="text"
-                labelStyleVariant="translucent"
+                labelVariant="subtle"
             >
                 {eapStatusOptions?.map((option) => (
                     <DropdownMenuItem
@@ -203,9 +202,9 @@ function EapStatus(props: Props) {
                         {option.value}
                     </DropdownMenuItem>
                 ))}
-            </DropdownMenu>
+            </Menu>
             {isDefined(newStatus) && (
-                <Modal
+                <Dialog
                     heading={strings.updateStatusHeading}
                     onClose={handleStatusUpdateCancel}
                     footerActions={(
@@ -263,13 +262,13 @@ function EapStatus(props: Props) {
                             {strings.updateStatusDescription}
                         </Description>
                         <ListView spacing="sm">
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {statusLabelMapping?.[status]}
-                            </Label>
+                            </DisplayLabel>
                             <ArrowRightFillIcon />
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {statusLabelMapping?.[newStatus]}
-                            </Label>
+                            </DisplayLabel>
                         </ListView>
                         {newStatus === EAP_STATUS_NS_ADDRESSING_COMMENTS && (
                             <ListView
@@ -279,26 +278,26 @@ function EapStatus(props: Props) {
                                 <Description withLightText>
                                     {strings.reviewChecklistDescription}
                                 </Description>
-                                <RawFileInput
+                                <FileInputButton
                                     name="review_checklist_file"
                                     onChange={setChecklistFile}
                                     before={<UploadLineIcon />}
                                     accept=".pdf, .docx, .pptx, .xlsx, .xlsm"
                                 >
                                     {strings.reviewChecklistInputLabel}
-                                </RawFileInput>
-                                <Label>
+                                </FileInputButton>
+                                <DisplayLabel>
                                     {isDefined(checklistFile) && checklistFile.name}
-                                </Label>
+                                </DisplayLabel>
                             </ListView>
                         )}
                         {(isSimplifiedEapLocked || isFullEapLocked) && (
                             <Alert
                                 name="revise-error-warning"
-                                type="warning"
+                                variant="warning"
                                 title={strings.reviseFormErrorMessage}
                                 withLightBackground
-                                withoutShadow
+                                boxShadow="none"
                             />
                         )}
                         {!(isSimplifiedEapLocked || isFullEapLocked)
@@ -306,23 +305,23 @@ function EapStatus(props: Props) {
                             && (
                                 <Alert
                                     name="form-error-warning"
-                                    type="warning"
+                                    variant="warning"
                                     title={strings.submitFormErrorMessage}
                                     withLightBackground
-                                    withoutShadow
+                                    boxShadow="none"
                                 />
                             )}
                         {newStatus === EAP_STATUS_PENDING_PFA && !hasValidatedBudgetFile && (
                             <Alert
                                 name="no-budget-file-warning"
-                                type="danger"
+                                variant="danger"
                                 title={strings.noBudgetAlertTitle}
                                 withLightBackground
-                                withoutShadow
+                                boxShadow="none"
                             />
                         )}
                     </ListView>
-                </Modal>
+                </Dialog>
             )}
         </>
     );
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/index.tsx
index de9faa01dc..199b120545 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/BudgetFileInput/index.tsx
@@ -7,10 +7,10 @@ import { UploadLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Description,
-    Label,
+    Dialog,
+    DisplayLabel,
+    FileInputButton,
     ListView,
-    Modal,
-    RawFileInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { isDefined } from '@togglecorp/fujs';
@@ -100,7 +100,7 @@ function BudgetFileInput(props: Props) {
                 {hasBudgetFile ? strings.updateBudgetFileLabel : strings.newBudgetFileUploadLabel}
             </Button>
             {showUploadModal && (
-                <Modal
+                <Dialog
                     heading={strings.newBudgetFileUploadLabel}
                     onClose={handleUploadModalClose}
                     footerActions={(
@@ -119,18 +119,18 @@ function BudgetFileInput(props: Props) {
                         <Description>
                             {strings.uploadFileDescription}
                         </Description>
-                        <RawFileInput
+                        <FileInputButton
                             name={undefined}
                             onChange={setBudgetFile}
                             before={<UploadLineIcon />}
                         >
                             {strings.fileInputLabel}
-                        </RawFileInput>
-                        <Label>
+                        </FileInputButton>
+                        <DisplayLabel>
                             {isDefined(budgetFile) && budgetFile.name}
-                        </Label>
+                        </DisplayLabel>
                     </ListView>
-                </Modal>
+                </Dialog>
             )}
         </>
     );
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
index a58a3dcb16..8d4a7592e6 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
@@ -9,9 +9,11 @@ import {
 } from '@ifrc-go/icons';
 import {
     Button,
+    ButtonLayout,
     ConfirmButton,
+    Dialog,
     ListView,
-    Modal,
+    RawButton,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -42,6 +44,7 @@ import { type EapExpandedListItem } from '../utils';
 import BudgetFileInput from './BudgetFileInput';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
 
 export interface Props {
     expandedListItem: EapExpandedListItem;
@@ -270,16 +273,21 @@ function EapTableActions(props: Props) {
                         && (isDefined(details?.data.theory_of_change_table_file_details)
                         || isDefined(details?.data.forecast_table_file_details))
                         && (
-                            <Button
+                            <RawButton
+                                className={styles.additionalFilesButton}
                                 name={undefined}
                                 onClick={setShowAdditionalFileModalTrue}
-                                colorVariant="text"
-                                styleVariant="transparent"
-                                before={<DownloadTwoLineIcon />}
-                                withoutPadding
                             >
-                                {strings.additionalFilesButtonLabel}
-                            </Button>
+                                <ButtonLayout
+                                    colorVariant="text"
+                                    styleVariant="transparent"
+                                    spacingOffset={-3}
+                                    before={<DownloadTwoLineIcon />}
+                                    withoutPadding
+                                >
+                                    {strings.additionalFilesButtonLabel}
+                                </ButtonLayout>
+                            </RawButton>
                         )}
                     {isDefined(details?.data.version)
                         && details.data.version > 1
@@ -289,7 +297,7 @@ function EapTableActions(props: Props) {
                                     name
                                     onClick={setShowExportModalTrue}
                                     before={<DownloadTwoLineIcon />}
-                                    styleVariant="action"
+                                    variant="tertiary"
                                 >
                                     {resolveToString(
                                         strings.exportWithChangesButtonLabel,
@@ -468,7 +476,7 @@ function EapTableActions(props: Props) {
                         name={false}
                         onClick={setShowExportModalTrue}
                         before={<DownloadTwoLineIcon />}
-                        styleVariant="action"
+                        variant="tertiary"
                     >
                         {strings.exportButtonLabel}
                     </Button>
@@ -517,7 +525,7 @@ function EapTableActions(props: Props) {
                                 name={false}
                                 onClick={setShowSummaryExportTrue}
                                 before={<DownloadTwoLineIcon />}
-                                styleVariant="action"
+                                variant="tertiary"
                             >
                                 {strings.exportSummaryButtonLabel}
                             </Button>
@@ -538,7 +546,7 @@ function EapTableActions(props: Props) {
                 />
             )}
             {showAdditionalFileModal && details?.eapType === EAP_TYPE_FULL && (
-                <Modal
+                <Dialog
                     heading={strings.additionalFilesButtonLabel}
                     onClose={setShowAdditionalFileModalFalse}
                 >
@@ -562,7 +570,7 @@ function EapTableActions(props: Props) {
                             </Link>
                         )}
                     </ListView>
-                </Modal>
+                </Dialog>
             )}
         </ListView>
     );
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/styles.module.css b/app/src/views/AccountMyFormsEap/EapTableActions/styles.module.css
new file mode 100644
index 0000000000..452accc059
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/styles.module.css
@@ -0,0 +1,3 @@
+.additional-files-button {
+    display: contents;
+}
diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
index 2585e83fbd..b60884a586 100644
--- a/app/src/views/AccountMyFormsEap/index.tsx
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -5,7 +5,7 @@ import {
 } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     type RowOptions,
     Table,
     TableBodyContent,
@@ -353,7 +353,7 @@ export function Component() {
                 </Link>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={eapListResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/AccountMyFormsFieldReport/index.tsx b/app/src/views/AccountMyFormsFieldReport/index.tsx
index f06d041054..a0ed67e14c 100644
--- a/app/src/views/AccountMyFormsFieldReport/index.tsx
+++ b/app/src/views/AccountMyFormsFieldReport/index.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import {
     Container,
-    NumberOutput,
-    Pager,
+    NumberDisplay,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -119,7 +119,7 @@ export function Component() {
             strings.pageHeading,
             {
                 numFieldReports: (
-                    <NumberOutput
+                    <NumberDisplay
                         value={fieldReportResponse?.count}
                     />
                 ),
@@ -142,7 +142,7 @@ export function Component() {
                 </Link>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={fieldReportResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/AccountMyFormsPer/index.tsx b/app/src/views/AccountMyFormsPer/index.tsx
index c395ec143f..2f4d44e4f7 100644
--- a/app/src/views/AccountMyFormsPer/index.tsx
+++ b/app/src/views/AccountMyFormsPer/index.tsx
@@ -5,7 +5,7 @@ import {
 } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     Table,
     TableBodyContent,
 } from '@ifrc-go/ui';
@@ -258,7 +258,7 @@ export function Component() {
                 </>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     onActivePageChange={setPage}
                     itemsCount={aggregatedStatusResponse?.count ?? 0}
diff --git a/app/src/views/AccountMyFormsThreeW/index.tsx b/app/src/views/AccountMyFormsThreeW/index.tsx
index 0228a4aeec..dfe9b5e165 100644
--- a/app/src/views/AccountMyFormsThreeW/index.tsx
+++ b/app/src/views/AccountMyFormsThreeW/index.tsx
@@ -4,7 +4,7 @@ import {
 } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -259,7 +259,7 @@ export function Component(props: Props) {
                 )}
                 withHeaderBorder
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={activityActivePage}
                         onActivePageChange={setActivityActivePage}
                         itemsCount={activityResponse?.count ?? 0}
diff --git a/app/src/views/AccountNotifications/EmailPreferences/SubscriptionModal/index.tsx b/app/src/views/AccountNotifications/EmailPreferences/SubscriptionModal/index.tsx
index bc253f3c38..ebde2bf56f 100644
--- a/app/src/views/AccountNotifications/EmailPreferences/SubscriptionModal/index.tsx
+++ b/app/src/views/AccountNotifications/EmailPreferences/SubscriptionModal/index.tsx
@@ -6,10 +6,10 @@ import {
     Button,
     Checklist,
     Container,
+    Dialog,
     ExpandableContainer,
     InputError,
     ListView,
-    Modal,
     Radio,
     RadioInput,
     Switch,
@@ -348,7 +348,7 @@ function SubscriptionModal(props: Props) {
     }, [setFieldValue, countryDetailsById, updateRegionSelection]);
 
     return (
-        <Modal
+        <Dialog
             heading={isDefined(subscriptionId)
                 ? strings.editSubscriptionHeading
                 : strings.addSubscriptionHeading}
@@ -368,7 +368,7 @@ function SubscriptionModal(props: Props) {
                     <Button
                         name={undefined}
                         onClick={handleUpdateButtonClick}
-                        styleVariant="filled"
+                        variant="primary"
                         disabled={pristine
                             || updateSubscriptionPending
                             || createSubscriptionPending}
@@ -446,7 +446,7 @@ function SubscriptionModal(props: Props) {
                                     key={region.key}
                                     heading={region.value}
                                     headingLevel={6}
-                                    withDarkBackground
+                                    backgroundColor="background"
                                     withPadding
                                     headerActions={(
                                         <>
@@ -486,7 +486,7 @@ function SubscriptionModal(props: Props) {
                                                 label={country.name}
                                                 value={selectedCountriesIdMap?.[country.id]}
                                                 onChange={updateCountrySelection}
-                                                withBackground
+                                                backgroundColor="foreground"
                                                 withInvertedView
                                             />
                                         ))}
@@ -525,7 +525,7 @@ function SubscriptionModal(props: Props) {
                     />
                 </Container>
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/AccountNotifications/EmailPreferences/index.tsx b/app/src/views/AccountNotifications/EmailPreferences/index.tsx
index 1469bebf85..9603f6e483 100644
--- a/app/src/views/AccountNotifications/EmailPreferences/index.tsx
+++ b/app/src/views/AccountNotifications/EmailPreferences/index.tsx
@@ -11,8 +11,8 @@ import {
     Button,
     ConfirmButton,
     Container,
+    DataDisplay,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -128,7 +128,7 @@ function EmailPreferences() {
                         <Container
                             key={item.id}
                             heading={item.title}
-                            withDarkBackground
+                            backgroundColor="background"
                             withPadding
                             headerActions={(
                                 <>
@@ -137,15 +137,13 @@ function EmailPreferences() {
                                         onClick={handleSubscriptionEditClick}
                                         title={strings.editSubscriptionTitle}
                                         before={<PencilLineIcon />}
-                                        styleVariant="action"
-                                        colorVariant="primary"
+                                        variant="tertiary"
                                     >
                                         {strings.editSubscriptionLabel}
                                     </Button>
                                     <ConfirmButton
                                         name={item.id}
-                                        styleVariant="action"
-                                        colorVariant="primary"
+                                        variant="tertiary"
                                         title={strings.deleteSubscriptionTitle}
                                         onConfirm={handleSubscriptionDelete}
                                         // eslint-disable-next-line max-len
@@ -168,24 +166,24 @@ function EmailPreferences() {
                                 withSpacingOpticalCorrection
                                 spacing="xs"
                             >
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.alertFrequencies}
                                     value={isDefined(item.alert_per_day)
                                         ? item.alert_per_day_display
                                         : strings.unlimitedOption}
                                     strongLabel
                                 />
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.regions}
                                     value={item.regions_detail.map((c) => c.name).join(', ')}
                                     strongLabel
                                 />
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.countries}
                                     value={item.countries_detail.map((c) => c.name).join(', ')}
                                     strongLabel
                                 />
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.disasters}
                                     value={item.hazard_types_detail.map((c) => c.name).join(', ')}
                                     strongLabel
diff --git a/app/src/views/AccountNotifications/SubscriptionPreferences/index.tsx b/app/src/views/AccountNotifications/SubscriptionPreferences/index.tsx
index 0b32fcd426..c1b48c90a5 100644
--- a/app/src/views/AccountNotifications/SubscriptionPreferences/index.tsx
+++ b/app/src/views/AccountNotifications/SubscriptionPreferences/index.tsx
@@ -222,7 +222,6 @@ function SubscriptionPreferences() {
                 <Button
                     name={value}
                     onClick={handleUpdateButtonClick}
-                    colorVariant="primary"
                 >
                     {strings.subscriptionUpdateButtonLabel}
                 </Button>
diff --git a/app/src/views/AccountNotifications/index.tsx b/app/src/views/AccountNotifications/index.tsx
index cc4938707d..5737ce2135 100644
--- a/app/src/views/AccountNotifications/index.tsx
+++ b/app/src/views/AccountNotifications/index.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import {
     Container,
     ListView,
-    Pager,
+    Pagination,
     RawList,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -79,7 +79,7 @@ export function Component() {
                 heading={strings.operationFollowingHeading}
                 withHeaderBorder
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={page}
                         itemsCount={subscribedEventsResponse?.count ?? 0}
                         maxItemsPerPage={limit}
diff --git a/app/src/views/ActiveSurgeDeployments/ActiveRapidResponseTable/index.tsx b/app/src/views/ActiveSurgeDeployments/ActiveRapidResponseTable/index.tsx
index f45147d342..a4f0ba55ee 100644
--- a/app/src/views/ActiveSurgeDeployments/ActiveRapidResponseTable/index.tsx
+++ b/app/src/views/ActiveSurgeDeployments/ActiveRapidResponseTable/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -183,7 +183,7 @@ function ActiveRapidResponseAlertsTable() {
             headerDescription={strings.surgeAlertsTableHeaderDescription}
             withHeaderBorder
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={surgeAlertsResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/SurgeCard/index.tsx b/app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/SurgeCard/index.tsx
index 89c0deb03d..9c7e50ec2f 100644
--- a/app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/SurgeCard/index.tsx
+++ b/app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/SurgeCard/index.tsx
@@ -4,10 +4,10 @@ import {
 } from 'react';
 import {
     Container,
+    DataDisplay,
     KeyFigure,
     ListView,
-    ReducedListDisplay,
-    TextOutput,
+    TruncatedList,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -120,7 +120,7 @@ function SurgeCard(props: Props) {
                 </Link>
             )}
             headerDescription={(
-                <TextOutput
+                <DataDisplay
                     label={strings.operationStartDateLabel}
                     value={operationStartDate}
                     valueType="date"
@@ -135,8 +135,8 @@ function SurgeCard(props: Props) {
                 />
             )}
             withPadding
-            withBackground
-            withShadow
+            backgroundColor="foreground"
+            boxShadow="md"
         >
             <ListView
                 layout="block"
@@ -157,9 +157,9 @@ function SurgeCard(props: Props) {
                                 value={deployedERUCount}
                                 label={strings.surgeEmergencyResponseUnit}
                                 valueType="number"
-                                valueOptions={{ compact: true }}
+                                compact
                             />
-                            <ReducedListDisplay
+                            <TruncatedList
                                 list={deployedERUTypes}
                                 keySelector={stringNameSelector}
                                 renderer={DisplayName}
@@ -167,10 +167,10 @@ function SurgeCard(props: Props) {
                                 maxItems={3}
                             />
                         </ListView>
-                        <TextOutput
+                        <DataDisplay
                             className={styles.deployingOrganizations}
                             value={(
-                                <ReducedListDisplay
+                                <TruncatedList
                                     list={eruDeployingOrganizations}
                                     keySelector={stringNameSelector}
                                     renderer={DisplayName}
@@ -200,9 +200,9 @@ function SurgeCard(props: Props) {
                                 value={deployedPersonnelCount}
                                 label={strings.surgeRapidResponsePersonnel}
                                 valueType="number"
-                                valueOptions={{ compact: true }}
+                                compact
                             />
-                            <ReducedListDisplay
+                            <TruncatedList
                                 list={deployedPersonnelTypes}
                                 keySelector={stringNameSelector}
                                 renderer={DisplayName}
@@ -210,10 +210,10 @@ function SurgeCard(props: Props) {
                                 maxItems={3}
                             />
                         </ListView>
-                        <TextOutput
+                        <DataDisplay
                             className={styles.deployingOrganizations}
                             value={(
-                                <ReducedListDisplay
+                                <TruncatedList
                                     list={personnelDeployingOrganizations}
                                     keySelector={stringNameSelector}
                                     renderer={DisplayName}
diff --git a/app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/index.tsx b/app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/index.tsx
index 7c4c9bfbb6..e0b5d7fb7a 100644
--- a/app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/index.tsx
+++ b/app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/index.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import {
     Container,
     ListView,
-    Pager,
+    Pagination,
     RawList,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -65,7 +65,7 @@ function ActiveSurgeSupport() {
             pending={aggregatedSurgePending}
             errored={isDefined(aggregatedSurgeResponseError)}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={aggregatedSurgeResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx
index 4651f306d3..e9bc35fe2e 100644
--- a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx
+++ b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx
@@ -7,7 +7,7 @@ import {
     Container,
     LegendItem,
     ListView,
-    Pager,
+    Pagination,
     SelectInput,
     Table,
     TableBodyContent,
@@ -273,7 +273,7 @@ function OngoingEruDeployments() {
             heading={strings.eruHeading}
             withHeaderBorder
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={deployedEruResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx
index 68e7116df9..92959de893 100644
--- a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx
+++ b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx
@@ -7,7 +7,7 @@ import {
     Container,
     LegendItem,
     ListView,
-    Pager,
+    Pagination,
     Table,
     TableBodyContent,
 } from '@ifrc-go/ui';
@@ -284,7 +284,7 @@ function OngoingRapidResponseDeployments() {
             heading={strings.rapidResponseDeploymentHeading}
             withHeaderBorder
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={rapidResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/ActiveSurgeDeployments/SurgeMap/index.tsx b/app/src/views/ActiveSurgeDeployments/SurgeMap/index.tsx
index 7ea2a0fea3..adcf4f54e9 100644
--- a/app/src/views/ActiveSurgeDeployments/SurgeMap/index.tsx
+++ b/app/src/views/ActiveSurgeDeployments/SurgeMap/index.tsx
@@ -6,12 +6,12 @@ import {
 import {
     Button,
     Container,
+    DataDisplay,
     LegendItem,
     ListView,
     RadioInput,
-    ReducedListDisplay,
     SelectInput,
-    TextOutput,
+    TruncatedList,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -429,17 +429,17 @@ function SurgeMap(props: Props) {
                                     heading={event?.name}
                                     headingLevel={5}
                                 >
-                                    <TextOutput
+                                    <DataDisplay
                                         value={event.units}
                                         label={strings.deployedEru}
                                         strongLabel
                                         valueType="number"
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         className={styles.textOutput}
                                         labelClassName={styles.label}
                                         value={(
-                                            <ReducedListDisplay
+                                            <TruncatedList
                                                 list={event.eruType}
                                                 keySelector={stringNameSelector}
                                                 renderer={DisplayName}
@@ -449,11 +449,11 @@ function SurgeMap(props: Props) {
                                         label={strings.eruType}
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         className={styles.textOutput}
                                         labelClassName={styles.label}
                                         value={(
-                                            <ReducedListDisplay
+                                            <TruncatedList
                                                 list={event.deployingNS}
                                                 keySelector={stringNameSelector}
                                                 renderer={DisplayName}
@@ -473,17 +473,17 @@ function SurgeMap(props: Props) {
                                     heading={event?.name}
                                     headingLevel={5}
                                 >
-                                    <TextOutput
+                                    <DataDisplay
                                         value={event.units}
                                         label={strings.deployedPersonnel}
                                         strongLabel
                                         valueType="number"
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         className={styles.textOutput}
                                         labelClassName={styles.label}
                                         value={(
-                                            <ReducedListDisplay
+                                            <TruncatedList
                                                 list={event.roleProfile}
                                                 keySelector={stringNameSelector}
                                                 renderer={DisplayName}
@@ -493,11 +493,11 @@ function SurgeMap(props: Props) {
                                         label={strings.roleProfile}
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         className={styles.textOutput}
                                         labelClassName={styles.label}
                                         value={(
-                                            <ReducedListDisplay
+                                            <TruncatedList
                                                 list={event.deployingNS}
                                                 keySelector={stringNameSelector}
                                                 renderer={DisplayName}
diff --git a/app/src/views/AllAppeals/index.tsx b/app/src/views/AllAppeals/index.tsx
index 14932371bc..662655a088 100644
--- a/app/src/views/AllAppeals/index.tsx
+++ b/app/src/views/AllAppeals/index.tsx
@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import {
     Container,
     DateInput,
-    NumberOutput,
-    Pager,
+    NumberDisplay,
+    Pagination,
     SelectInput,
     Table,
 } from '@ifrc-go/ui';
@@ -282,7 +282,7 @@ export function Component() {
             strings.allAppealsHeading,
             {
                 numAppeals: (
-                    <NumberOutput
+                    <NumberDisplay
                         value={appealsResponse?.count}
                     />
                 ),
@@ -392,7 +392,7 @@ export function Component() {
                     />
                 )}
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={page}
                         itemsCount={appealsResponse?.count ?? 0}
                         maxItemsPerPage={limit}
diff --git a/app/src/views/AllDeployedEmergencyResponseUnits/index.tsx b/app/src/views/AllDeployedEmergencyResponseUnits/index.tsx
index 46ff718e15..c42db4741c 100644
--- a/app/src/views/AllDeployedEmergencyResponseUnits/index.tsx
+++ b/app/src/views/AllDeployedEmergencyResponseUnits/index.tsx
@@ -4,7 +4,7 @@ import {
 } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     SelectInput,
     Table,
 } from '@ifrc-go/ui';
@@ -252,7 +252,7 @@ export function Component() {
                     />
                 )}
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={page}
                         itemsCount={eruResponse?.count ?? 0}
                         maxItemsPerPage={limit}
diff --git a/app/src/views/AllDeployedPersonnel/index.tsx b/app/src/views/AllDeployedPersonnel/index.tsx
index bdf9c6b1d7..01163fcf62 100644
--- a/app/src/views/AllDeployedPersonnel/index.tsx
+++ b/app/src/views/AllDeployedPersonnel/index.tsx
@@ -6,7 +6,7 @@ import {
 import {
     Container,
     DateInput,
-    Pager,
+    Pagination,
     Table,
     TextInput,
 } from '@ifrc-go/ui';
@@ -420,7 +420,7 @@ export function Component() {
                     </>
                 )}
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={page}
                         itemsCount={personnelResponse?.count ?? 0}
                         maxItemsPerPage={limit}
diff --git a/app/src/views/AllEmergencies/index.tsx b/app/src/views/AllEmergencies/index.tsx
index 1a5019a124..53b0444919 100644
--- a/app/src/views/AllEmergencies/index.tsx
+++ b/app/src/views/AllEmergencies/index.tsx
@@ -5,8 +5,8 @@ import {
 import {
     Container,
     DateInput,
-    NumberOutput,
-    Pager,
+    NumberDisplay,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -223,7 +223,7 @@ export function Component() {
             strings.allEmergenciesHeading,
             {
                 numEmergencies: (
-                    <NumberOutput
+                    <NumberDisplay
                         value={eventResponse?.count}
                     />
                 ),
@@ -326,7 +326,7 @@ export function Component() {
                     />
                 )}
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={page}
                         itemsCount={eventResponse?.count ?? 0}
                         maxItemsPerPage={limit}
diff --git a/app/src/views/AllFieldReports/index.tsx b/app/src/views/AllFieldReports/index.tsx
index cbeb7b6d2e..43ed602a6e 100644
--- a/app/src/views/AllFieldReports/index.tsx
+++ b/app/src/views/AllFieldReports/index.tsx
@@ -5,8 +5,8 @@ import {
 import {
     Container,
     DateInput,
-    NumberOutput,
-    Pager,
+    NumberDisplay,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -198,7 +198,7 @@ export function Component() {
             strings.allFieldReportsHeading,
             {
                 numFieldReports: (
-                    <NumberOutput
+                    <NumberDisplay
                         value={fieldReportResponse?.count}
                     />
                 ),
@@ -296,7 +296,7 @@ export function Component() {
                     />
                 )}
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={page}
                         itemsCount={fieldReportResponse?.count ?? 0}
                         maxItemsPerPage={limit}
diff --git a/app/src/views/AllFlashUpdates/index.tsx b/app/src/views/AllFlashUpdates/index.tsx
index 40ddcdc8bd..9a73ef0bfb 100644
--- a/app/src/views/AllFlashUpdates/index.tsx
+++ b/app/src/views/AllFlashUpdates/index.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import {
     Container,
-    NumberOutput,
-    Pager,
+    NumberDisplay,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -127,7 +127,7 @@ export function Component() {
             strings.allFlashUpdatesHeading,
             {
                 numFlashUpdates: (
-                    <NumberOutput
+                    <NumberDisplay
                         value={flashUpdateResponse?.count}
                     />
                 ),
@@ -145,7 +145,7 @@ export function Component() {
             <Container
                 className={styles.flashUpdatesTable}
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={page}
                         itemsCount={flashUpdateResponse?.count ?? 0}
                         maxItemsPerPage={limit}
diff --git a/app/src/views/AllSurgeAlerts/index.tsx b/app/src/views/AllSurgeAlerts/index.tsx
index 346cba4dca..5141f10753 100644
--- a/app/src/views/AllSurgeAlerts/index.tsx
+++ b/app/src/views/AllSurgeAlerts/index.tsx
@@ -5,8 +5,8 @@ import {
 } from 'react';
 import {
     Container,
-    NumberOutput,
-    Pager,
+    NumberDisplay,
+    Pagination,
     Table,
     TextInput,
 } from '@ifrc-go/ui';
@@ -344,7 +344,7 @@ export function Component() {
 
     const heading = resolveToComponent(
         strings.allSurgeAlertsHeading,
-        { numSurgeAlerts: <NumberOutput value={surgeResponse?.count} invalidText="--" /> },
+        { numSurgeAlerts: <NumberDisplay value={surgeResponse?.count} invalidText="--" /> },
     );
 
     return (
@@ -390,7 +390,7 @@ export function Component() {
                     </>
                 )}
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={page}
                         onActivePageChange={setPage}
                         itemsCount={surgeResponse?.count ?? 0}
diff --git a/app/src/views/AllThreeWActivity/index.tsx b/app/src/views/AllThreeWActivity/index.tsx
index 85b637e320..1bbba072f9 100644
--- a/app/src/views/AllThreeWActivity/index.tsx
+++ b/app/src/views/AllThreeWActivity/index.tsx
@@ -4,7 +4,7 @@ import {
 } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -309,7 +309,7 @@ export function Component() {
                     />
                 )}
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={projectActivePage}
                         onActivePageChange={setProjectActivePage}
                         itemsCount={projectResponse?.count ?? 0}
diff --git a/app/src/views/CountryAdditionalInfo/index.tsx b/app/src/views/CountryAdditionalInfo/index.tsx
index dc9dc51202..504748ceb7 100644
--- a/app/src/views/CountryAdditionalInfo/index.tsx
+++ b/app/src/views/CountryAdditionalInfo/index.tsx
@@ -8,10 +8,11 @@ import {
 } from 'react-router-dom';
 import {
     Container,
-    HtmlOutput,
-    type HtmlOutputProps,
-    List,
+    HtmlDisplay,
+    type HtmlDisplayProps,
+    ListView,
     Message,
+    RawList,
     Table,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -66,7 +67,7 @@ export function Component() {
     const strings = useTranslation(i18n);
 
     const countrySnippetRendererParams = useCallback(
-        (_: number, data: CountrySnippetType): HtmlOutputProps => ({
+        (_: number, data: CountrySnippetType): HtmlDisplayProps => ({
             value: data.snippet,
         }),
         [],
@@ -125,17 +126,14 @@ export function Component() {
             )}
         >
             {hasCountrySnippet && (
-                <List
-                    data={countrySnippetResponse.results}
-                    renderer={HtmlOutput}
-                    rendererParams={countrySnippetRendererParams}
-                    keySelector={numericIdSelector}
-                    withoutMessage
-                    compact
-                    pending={countrySnippetPending}
-                    errored={false}
-                    filtered={false}
-                />
+                <ListView layout="block">
+                    <RawList
+                        data={countrySnippetResponse.results}
+                        renderer={HtmlDisplay}
+                        rendererParams={countrySnippetRendererParams}
+                        keySelector={numericIdSelector}
+                    />
+                </ListView>
             )}
             {hasCountryContacts && (
                 <Container
@@ -156,17 +154,14 @@ export function Component() {
                     withHeaderBorder
                     heading={strings.linkTitle}
                 >
-                    <List
-                        data={countryResponse.links}
-                        renderer={Link}
-                        rendererParams={countryLinkRendererParams}
-                        keySelector={numericIdSelector}
-                        withoutMessage
-                        compact
-                        pending={false}
-                        errored={false}
-                        filtered={false}
-                    />
+                    <ListView layout="block">
+                        <RawList
+                            data={countryResponse.links}
+                            renderer={Link}
+                            rendererParams={countryLinkRendererParams}
+                            keySelector={numericIdSelector}
+                        />
+                    </ListView>
                 </Container>
             )}
             {!isDataAvailable && (
diff --git a/app/src/views/CountryNsOverviewActivities/NationalSocietyDevelopmentInitiatives/InitiativeCard/index.tsx b/app/src/views/CountryNsOverviewActivities/NationalSocietyDevelopmentInitiatives/InitiativeCard/index.tsx
index 0570b1cd0e..3396618acb 100644
--- a/app/src/views/CountryNsOverviewActivities/NationalSocietyDevelopmentInitiatives/InitiativeCard/index.tsx
+++ b/app/src/views/CountryNsOverviewActivities/NationalSocietyDevelopmentInitiatives/InitiativeCard/index.tsx
@@ -1,8 +1,8 @@
 import {
     Container,
+    DataDisplay,
     ListView,
-    NumberOutput,
-    TextOutput,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
@@ -43,21 +43,21 @@ function InitiativeCard(props: Props) {
                 },
             )}
             footer={(
-                <TextOutput
+                <DataDisplay
                     label={strings.initiativeCategoriesTitle}
                     value={initiative.categories}
                     valueType="text"
                 />
             )}
-            withBackground
-            withShadow
+            backgroundColor="foreground"
+            boxShadow="md"
             withPadding
         >
             <ListView
                 layout="grid"
                 minGridColumnSize="6rem"
             >
-                <TextOutput
+                <DataDisplay
                     value={resolveToString(
                         strings.initiativeYearApprovedAndDuration,
                         {
@@ -69,9 +69,9 @@ function InitiativeCard(props: Props) {
                     strongValue
                     withoutLabelColon
                 />
-                <TextOutput
+                <DataDisplay
                     value={(
-                        <NumberOutput
+                        <NumberDisplay
                             value={initiative.allocation}
                         />
                     )}
diff --git a/app/src/views/CountryNsOverviewActivities/NationalSocietyDevelopmentInitiatives/index.tsx b/app/src/views/CountryNsOverviewActivities/NationalSocietyDevelopmentInitiatives/index.tsx
index 3c42dd51e1..f2cc146764 100644
--- a/app/src/views/CountryNsOverviewActivities/NationalSocietyDevelopmentInitiatives/index.tsx
+++ b/app/src/views/CountryNsOverviewActivities/NationalSocietyDevelopmentInitiatives/index.tsx
@@ -2,9 +2,9 @@ import { useCallback } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
+    DataDisplay,
     ListView,
     RawList,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -50,7 +50,7 @@ function NationalSocietyDirectoryInitiatives() {
             footerActions={isDefined(countryResponse)
                 && isDefined(countryResponse.initiatives)
                 && countryResponse.initiatives.length > 0 && (
-                <TextOutput
+                <DataDisplay
                     label={strings.source}
                     value={(
                         <Link
diff --git a/app/src/views/CountryNsOverviewCapacity/CountryNsCapacityStrengthening/OCACListItem/index.tsx b/app/src/views/CountryNsOverviewCapacity/CountryNsCapacityStrengthening/OCACListItem/index.tsx
index c9047a32f7..f321a7227e 100644
--- a/app/src/views/CountryNsOverviewCapacity/CountryNsCapacityStrengthening/OCACListItem/index.tsx
+++ b/app/src/views/CountryNsOverviewCapacity/CountryNsCapacityStrengthening/OCACListItem/index.tsx
@@ -33,15 +33,13 @@ function OCACListItem(props: Props) {
             }
             headingLevel={4}
             withPadding
-            withBackground
-            withShadow
+            backgroundColor="foreground"
+            boxShadow="md"
         >
             <KeyFigure
                 value={capacity.submission_date}
                 valueType="date"
-                valueOptions={{
-                    format: 'MMM yyyy',
-                }}
+                format="MMM yyyy"
                 label={strings.capacityListItemDateOfAssessment}
             />
         </Container>
diff --git a/app/src/views/CountryNsOverviewCapacity/CountryNsCapacityStrengthening/index.tsx b/app/src/views/CountryNsOverviewCapacity/CountryNsCapacityStrengthening/index.tsx
index 268d27ecd4..5c0f575029 100644
--- a/app/src/views/CountryNsOverviewCapacity/CountryNsCapacityStrengthening/index.tsx
+++ b/app/src/views/CountryNsOverviewCapacity/CountryNsCapacityStrengthening/index.tsx
@@ -2,10 +2,10 @@ import { useCallback } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
+    DataDisplay,
     KeyFigure,
     ListView,
     RawList,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -68,7 +68,7 @@ function CountryNsCapacityStrengthening() {
             headerDescription={strings.countryNsCapacityStrengtheningDescription}
             withHeaderBorder
             footerActions={!isEmpty && (
-                <TextOutput
+                <DataDisplay
                     label={strings.moreDetailsLabel}
                     value={(
                         <Link
@@ -106,15 +106,15 @@ function CountryNsCapacityStrengthening() {
                         pending={false}
                         heading={strings.bocaAssessment}
                         headingLevel={4}
-                        withShadow
-                        withBackground
+                        boxShadow="md"
+                        backgroundColor="foreground"
                         withPadding
                     >
                         <KeyFigure
                             value={uniqueLocalUnits.length}
                             label={strings.localUnits}
                             valueType="number"
-                            valueOptions={{ compact: true }}
+                            compact
                         />
                     </Container>
                 )}
diff --git a/app/src/views/CountryNsOverviewCapacity/index.tsx b/app/src/views/CountryNsOverviewCapacity/index.tsx
index a7e6135d5a..cf7cfd3416 100644
--- a/app/src/views/CountryNsOverviewCapacity/index.tsx
+++ b/app/src/views/CountryNsOverviewCapacity/index.tsx
@@ -1,8 +1,8 @@
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
+    DataDisplay,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -90,7 +90,7 @@ export function Component() {
                     </Link>
                 )}
                 footerActions={(
-                    <TextOutput
+                    <DataDisplay
                         label={strings.moreDetails}
                         value={(
                             <Link
@@ -147,11 +147,11 @@ export function Component() {
                                         withSpacingOpticalCorrection
                                         spacing="sm"
                                     >
-                                        <TextOutput
+                                        <DataDisplay
                                             label={strings.perTypeOfAssessmentLabel}
                                             value={perProcess.type_of_assessment_details?.name}
                                         />
-                                        <TextOutput
+                                        <DataDisplay
                                             label={strings.perFocalPointLabel}
                                             value={[perProcess.ns_focal_point_name, perProcess.ns_focal_point_email].filter(isTruthyString).join(', ')}
                                         />
@@ -159,20 +159,20 @@ export function Component() {
                                 )}
                                 withFooterBorder
                                 withPadding
-                                withBackground
-                                withShadow
+                                backgroundColor="foreground"
+                                boxShadow="md"
                             >
                                 <ListView
                                     layout="grid"
                                     minGridColumnSize="6rem"
                                 >
-                                    <TextOutput
+                                    <DataDisplay
                                         value={perProcess.phase_display}
                                         description={strings.perPhaseLabel}
                                         withBlockLayout
                                         strongValue
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         value={perProcess.date_of_assessment}
                                         description={strings.perAssessmentDateLabel}
                                         withBlockLayout
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx
index 05a3a96eb0..0adf75efe2 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx
@@ -1,9 +1,9 @@
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
+    DataDisplay,
     ListView,
     RawList,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -59,7 +59,7 @@ function NationalSocietyDirectory(props: Props) {
                 && directoryList.length > 0
                 && isDefined(countryResponse?.society_name)
                 && isDefined(countryResponse.url_ifrc) && (
-                <TextOutput
+                <DataDisplay
                     label={strings.countryNSDirectorySource}
                     value={(
                         <Link
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIncomeOverTime/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIncomeOverTime/index.tsx
index 62e5c62e2c..b280d0dcd4 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIncomeOverTime/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIncomeOverTime/index.tsx
@@ -8,7 +8,7 @@ import {
     ChartContainer,
     ChartPoint,
     Container,
-    TextOutput,
+    DataDisplay,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -106,7 +106,7 @@ function NationalSocietyIncomeOverTime(props: Props) {
             <Tooltip
                 title={year}
                 description={(
-                    <TextOutput
+                    <DataDisplay
                         label={strings.nsIncomeOverTimeTooltipTotalLabel}
                         value={incomeByYear?.[Number(year)]?.value}
                         suffix=" CHF"
@@ -139,7 +139,7 @@ function NationalSocietyIncomeOverTime(props: Props) {
             withHeaderBorder
             footerActions={isDefined(countryResponse?.fdrs)
                 && isDefined(countryResponse.society_name) && (
-                <TextOutput
+                <DataDisplay
                     label={strings.sourceLabel}
                     value={(
                         <Link
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIncomeSourceBreakdown/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIncomeSourceBreakdown/index.tsx
index 79b4523a95..9fe2f5dce3 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIncomeSourceBreakdown/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIncomeSourceBreakdown/index.tsx
@@ -3,8 +3,8 @@ import { useOutletContext } from 'react-router-dom';
 import {
     BarChart,
     Container,
+    DataDisplay,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -85,7 +85,7 @@ function NationalSocietyIncomeSourceBreakdown(props: Props) {
             footerActions={isDefined(countryResponse?.fdrs)
                 && isDefined(countryResponse.society_name) && (
                 <ListView withSpacingOpticalCorrection>
-                    <TextOutput
+                    <DataDisplay
                         label={strings.incomeSourceBreakdownSourceLabel}
                         value={(
                             <Link
@@ -104,7 +104,7 @@ function NationalSocietyIncomeSourceBreakdown(props: Props) {
                             </Link>
                         )}
                     />
-                    <TextOutput
+                    <DataDisplay
                         value={selectedYear}
                         strongValue
                     />
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIndicators/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIndicators/index.tsx
index fa06a7e811..9757beaa1c 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIndicators/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIndicators/index.tsx
@@ -3,14 +3,14 @@ import { HumanResourcesIcon } from '@ifrc-go/icons';
 import {
     Button,
     Container,
+    DataDisplay,
+    Dialog,
     Heading,
-    InfoPopup,
     ListView,
     Message,
-    Modal,
-    NumberOutput,
+    MoreInfo,
+    NumberDisplay,
     ProgressBar,
-    TextOutput,
     Tooltip,
 } from '@ifrc-go/ui';
 import {
@@ -47,14 +47,12 @@ function YearPopup(props: YearPopupProps) {
     }
 
     return (
-        <InfoPopup
-            description={(
-                <TextOutput
-                    label="Data year"
-                    value={year}
-                />
-            )}
-        />
+        <MoreInfo>
+            <DataDisplay
+                label="Data year"
+                value={year}
+            />
+        </MoreInfo>
     );
 }
 
@@ -269,7 +267,7 @@ function NationalSocietyIndicators(props: Props) {
             withHeaderBorder
             footerActions={isDefined(countryResponse?.fdrs)
                 && isDefined(countryResponse.society_name) && (
-                <TextOutput
+                <DataDisplay
                     label={strings.indicatorSourceLabel}
                     value={(
                         <Link
@@ -293,13 +291,13 @@ function NationalSocietyIndicators(props: Props) {
                 withSpacingOpticalCorrection
                 spacing="sm"
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.nationalSocietyFoundedDateLabel}
                     value={founded_date}
                     valueType="date"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.nationalSocietyTrainedInFirstAidLabel}
                     value={fdrs_trained_in_first_aid}
                     valueType="number"
@@ -307,7 +305,7 @@ function NationalSocietyIndicators(props: Props) {
                         && <YearPopup year={fdrs_trained_in_first_aid_data_year} />)}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.nationalSocietyIncomeLabel}
                     value={fdrs_income}
                     valueType="number"
@@ -315,7 +313,7 @@ function NationalSocietyIndicators(props: Props) {
                         && <YearPopup year={fdrs_income_data_year} />}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.nationalSocietyVolunteersLabel}
                     value={fdrs_volunteer_total}
                     valueType="number"
@@ -327,7 +325,7 @@ function NationalSocietyIndicators(props: Props) {
                                 <Button
                                     name={undefined}
                                     onClick={setShowVolunteerDisaggregationTrue}
-                                    styleVariant="action"
+                                    variant="tertiary"
                                     // FIXME: use strings
                                     title="Show disaggregation"
                                 >
@@ -337,7 +335,7 @@ function NationalSocietyIndicators(props: Props) {
                         </ListView>
                     )}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.nationalSocietyYouthLabel}
                     value={youthValue}
                     valueType="number"
@@ -345,7 +343,7 @@ function NationalSocietyIndicators(props: Props) {
                         && <YearPopup year={fdrs_volunteer_data_year} />}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.nationalSocietyExpendituresLabel}
                     value={fdrs_expenditures}
                     description={(isDefined(fdrs_expenditures)
@@ -353,7 +351,7 @@ function NationalSocietyIndicators(props: Props) {
                     valueType="number"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.nationalSocietyBranchesLabel}
                     value={fdrs_branches}
                     description={(isDefined(fdrs_branches)
@@ -361,7 +359,7 @@ function NationalSocietyIndicators(props: Props) {
                     valueType="number"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.nationalSocietyStaffLabel}
                     value={fdrs_staff_total}
                     valueType="number"
@@ -373,7 +371,7 @@ function NationalSocietyIndicators(props: Props) {
                                 <Button
                                     name={undefined}
                                     onClick={setShowStaffDisaggregationTrue}
-                                    styleVariant="action"
+                                    variant="tertiary"
                                     // FIXME: use strings
                                     title="Show disaggregation"
                                 >
@@ -385,7 +383,7 @@ function NationalSocietyIndicators(props: Props) {
                 />
             </ListView>
             {showVolunteerDisaggregation && (
-                <Modal
+                <Dialog
                     empty={false}
                     pending={false}
                     filtered={false}
@@ -403,7 +401,7 @@ function NationalSocietyIndicators(props: Props) {
                         <ListView layout="block">
                             <div className={styles.volunteer}>
                                 <div />
-                                <TextOutput
+                                <DataDisplay
                                     className={styles.maleLabel}
                                     description={strings.maleLabel}
                                     value={getPercentage(
@@ -420,7 +418,7 @@ function NationalSocietyIndicators(props: Props) {
                                 >
                                     {strings.ageLabel}
                                 </Heading>
-                                <TextOutput
+                                <DataDisplay
                                     label="Female"
                                     value={getPercentage(
                                         totalFemaleVolunteer,
@@ -439,7 +437,7 @@ function NationalSocietyIndicators(props: Props) {
                                         key={volunteer.label}
                                         className={styles.volunteer}
                                     >
-                                        <NumberOutput
+                                        <NumberDisplay
                                             className={styles.malePercentage}
                                             value={getPercentage(
                                                 volunteer.male,
@@ -456,7 +454,7 @@ function NationalSocietyIndicators(props: Props) {
                                                 title={strings.volunteerTooltipMaleLabel}
                                                 description={(
                                                     <>
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={resolveToString(
                                                                 strings.tooltipAgeLabel,
                                                                 { ageRange: volunteer.label },
@@ -465,7 +463,7 @@ function NationalSocietyIndicators(props: Props) {
                                                             valueType="number"
                                                             strongValue
                                                         />
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={strings.totalLabel}
                                                             value={totalMaleVolunteer}
                                                             valueType="number"
@@ -483,13 +481,13 @@ function NationalSocietyIndicators(props: Props) {
                                             className={styles.femaleDisaggregation}
                                             value={volunteer.female}
                                             totalValue={maxVolunteerInDisaggregation}
-                                            colorVariant="primary"
+                                            variant="primary"
                                         >
                                             <Tooltip
                                                 title={strings.volunteerTooltipFemaleLabel}
                                                 description={(
                                                     <>
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={resolveToString(
                                                                 strings.tooltipAgeLabel,
                                                                 { ageRange: volunteer.label },
@@ -498,7 +496,7 @@ function NationalSocietyIndicators(props: Props) {
                                                             valueType="number"
                                                             strongValue
                                                         />
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={strings.totalLabel}
                                                             value={totalFemaleVolunteer}
                                                             valueType="number"
@@ -509,7 +507,7 @@ function NationalSocietyIndicators(props: Props) {
 
                                             />
                                         </ProgressBar>
-                                        <NumberOutput
+                                        <NumberDisplay
                                             className={styles.femalePercentage}
                                             value={getPercentage(
                                                 volunteer.female,
@@ -522,10 +520,10 @@ function NationalSocietyIndicators(props: Props) {
                             )}
                         </ListView>
                     )}
-                </Modal>
+                </Dialog>
             )}
             {showStaffDisaggregation && (
-                <Modal
+                <Dialog
                     empty={false}
                     pending={false}
                     filtered={false}
@@ -543,7 +541,7 @@ function NationalSocietyIndicators(props: Props) {
                         <ListView layout="block">
                             <div className={styles.staff}>
                                 <div />
-                                <TextOutput
+                                <DataDisplay
                                     className={styles.maleLabel}
                                     description={strings.maleLabel}
                                     value={getPercentage(
@@ -560,7 +558,7 @@ function NationalSocietyIndicators(props: Props) {
                                 >
                                     {strings.ageLabel}
                                 </Heading>
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.femaleLabel}
                                     value={getPercentage(
                                         totalFemaleStaff,
@@ -579,7 +577,7 @@ function NationalSocietyIndicators(props: Props) {
                                         key={staff.label}
                                         className={styles.staff}
                                     >
-                                        <NumberOutput
+                                        <NumberDisplay
                                             className={styles.malePercentage}
                                             value={getPercentage(
                                                 staff.male ?? 0,
@@ -596,7 +594,7 @@ function NationalSocietyIndicators(props: Props) {
                                                 title={strings.staffTooltipMaleLabel}
                                                 description={(
                                                     <>
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={resolveToString(
                                                                 strings.tooltipAgeLabel,
                                                                 { ageRange: staff.label },
@@ -605,7 +603,7 @@ function NationalSocietyIndicators(props: Props) {
                                                             valueType="number"
                                                             strongValue
                                                         />
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={strings.totalLabel}
                                                             value={totalMaleStaff}
                                                             valueType="number"
@@ -628,7 +626,7 @@ function NationalSocietyIndicators(props: Props) {
                                                 title={strings.staffTooltipFemaleLabel}
                                                 description={(
                                                     <>
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={resolveToString(
                                                                 strings.tooltipAgeLabel,
                                                                 { ageRange: staff.label },
@@ -637,7 +635,7 @@ function NationalSocietyIndicators(props: Props) {
                                                             valueType="number"
                                                             strongValue
                                                         />
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={strings.totalLabel}
                                                             value={totalFemaleStaff}
                                                             valueType="number"
@@ -648,7 +646,7 @@ function NationalSocietyIndicators(props: Props) {
 
                                             />
                                         </ProgressBar>
-                                        <NumberOutput
+                                        <NumberDisplay
                                             className={styles.femalePercentage}
                                             value={getPercentage(
                                                 staff.female ?? 0,
@@ -661,7 +659,7 @@ function NationalSocietyIndicators(props: Props) {
                             )}
                         </ListView>
                     )}
-                </Modal>
+                </Dialog>
             )}
         </Container>
     );
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/index.tsx
index 13dd725c70..22d954983b 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/DocumentListCard/index.tsx
@@ -32,8 +32,8 @@ function DocumentListCard(props: Props) {
             headingLevel={4}
             withHeaderBorder
             withPadding
-            withShadow
-            withBackground
+            boxShadow="md"
+            backgroundColor="foreground"
             withContentOverflow
             withFixedHeight
         >
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx
index 2c2249c888..4093df86c6 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx
@@ -3,11 +3,11 @@ import { useOutletContext } from 'react-router-dom';
 import { SearchLineIcon } from '@ifrc-go/icons';
 import {
     Container,
+    DataDisplay,
     DateInput,
     ListView,
     RawList,
     TextInput,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
@@ -124,7 +124,7 @@ function NationalSocietyKeyDocuments() {
             footerActions={isDefined(groupedDocumentsList)
                 && groupedDocumentsList.length > 0
                 && isDefined(countryResponse?.fdrs) && (
-                <TextOutput
+                <DataDisplay
                     label={strings.source}
                     value={(
                         <Link
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/SwitchWithConfirmation/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/SwitchWithConfirmation/index.tsx
index e90d032dc1..2ab72034f2 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/SwitchWithConfirmation/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/SwitchWithConfirmation/index.tsx
@@ -6,8 +6,8 @@ import {
 import { useOutletContext } from 'react-router-dom';
 import {
     Button,
+    Dialog,
     ListView,
-    Modal,
     Switch,
     TextInput,
 } from '@ifrc-go/ui';
@@ -61,11 +61,11 @@ function SwitchWithConfirmation<const NAME extends number>(props: Props<NAME>) {
                 label={label}
                 value={value}
                 withInvertedView
-                withDarkBackground
+                backgroundColor="background"
                 onChange={setNewValue}
             />
             {newValue !== value && (
-                <Modal
+                <Dialog
                     onClose={handleCancelButtonClick}
                     heading={strings.confirmationModalHeading}
                     headerDescription={strings.confirmationModalDescription}
@@ -81,7 +81,7 @@ function SwitchWithConfirmation<const NAME extends number>(props: Props<NAME>) {
                             <Button
                                 name={undefined}
                                 onClick={handleConfirmButtonClick}
-                                styleVariant="filled"
+                                variant="primary"
                                 disabled={confirmDisabled}
                             >
                                 {strings.confirmButtonLabel}
@@ -105,7 +105,7 @@ function SwitchWithConfirmation<const NAME extends number>(props: Props<NAME>) {
                                 { localUnitType: label },
                             )}
                     </ListView>
-                </Modal>
+                </Dialog>
             )}
         </>
     );
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/index.tsx
index 2de66a11fd..24ea4492cb 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/ConfigureLocalUnitsModal/index.tsx
@@ -6,8 +6,8 @@ import { useOutletContext } from 'react-router-dom';
 import {
     Button,
     Container,
+    Dialog,
     ListView,
-    Modal,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
@@ -175,7 +175,7 @@ function ConfigureLocalUnitsModal(props: Props) {
         || externallyManagedUpdatePending;
 
     return (
-        <Modal
+        <Dialog
             heading={resolveToString(
                 strings.modalHeading,
                 { countryName: countryResponse?.name ?? '--' },
@@ -213,7 +213,7 @@ function ConfigureLocalUnitsModal(props: Props) {
                     ))}
                 </ListView>
             </Container>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitDeleteModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitDeleteModal/index.tsx
index e3b363bf29..54b103db83 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitDeleteModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitDeleteModal/index.tsx
@@ -4,8 +4,8 @@ import {
 } from 'react';
 import {
     Button,
+    Dialog,
     ListView,
-    Modal,
     RadioInput,
     TextArea,
 } from '@ifrc-go/ui';
@@ -143,7 +143,7 @@ function LocalUnitDeleteModal(props: Props) {
     );
 
     return (
-        <Modal
+        <Dialog
             heading={resolveToString(
                 strings.deleteLocalUnitHeading,
                 { localUnitName },
@@ -185,7 +185,7 @@ function LocalUnitDeleteModal(props: Props) {
                     error={error?.deprecated_reason_overview}
                 />
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportHistoryModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportHistoryModal/index.tsx
index 4bd971fde6..dd2fd640e3 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportHistoryModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportHistoryModal/index.tsx
@@ -9,8 +9,8 @@ import {
     TableRow,
 } from '@ifrc-go/ui';
 import {
-    Modal,
-    Pager,
+    Dialog,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -171,7 +171,7 @@ function LocalUnitImportHistoryModal(props: Props) {
     ), [expandedRow]);
 
     return (
-        <Modal
+        <Dialog
             className={styles.bulkUploadHistoryModal}
             heading={resolveToString(
                 strings.modalHeading,
@@ -180,7 +180,7 @@ function LocalUnitImportHistoryModal(props: Props) {
             footerActions={isDefined(uploadHistoryResponse)
                 && isDefined(uploadHistoryResponse.count)
                 && uploadHistoryResponse.count > limit ? (
-                    <Pager
+                    <Pagination
                         activePage={page}
                         itemsCount={uploadHistoryResponse.count}
                         maxItemsPerPage={limit}
@@ -200,7 +200,7 @@ function LocalUnitImportHistoryModal(props: Props) {
                 rowModifier={rowModifier}
                 rowClassName={getRowClassName}
             />
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportModal/index.tsx
index fa820d03c4..00ae7fdcb0 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportModal/index.tsx
@@ -12,12 +12,12 @@ import {
 import {
     Button,
     Container,
+    DataDisplay,
+    Dialog,
+    FileInputButton,
     InlineLayout,
     ListView,
-    Modal,
-    RawFileInput,
     SelectInput,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -207,7 +207,7 @@ function LocalUnitBulkUploadModal(props: Props) {
         || importSummaryResponse?.status === BULK_UPLOAD_PENDING;
 
     return (
-        <Modal
+        <Dialog
             heading={resolveToString(strings.modalHeading, {
                 countryName: countryResponse?.name ?? '--',
             })}
@@ -254,7 +254,7 @@ function LocalUnitBulkUploadModal(props: Props) {
                         <ListView layout="block">
                             {error && <NonFieldError error={error as Error<PartialLocalUnits>} />}
                             {isNotDefined(bulkUploadFile) && (
-                                <RawFileInput
+                                <FileInputButton
                                     name="file"
                                     accept=".xlsx, .xlsm"
                                     onChange={setBulkUploadFile}
@@ -265,12 +265,12 @@ function LocalUnitBulkUploadModal(props: Props) {
                                     before={<DrefTwoIcon className={styles.icon} />}
                                 >
                                     {strings.selectFileButtonLabel}
-                                </RawFileInput>
+                                </FileInputButton>
                             )}
                             {isDefined(bulkUploadFile) && (
                                 <ListView
                                     withPadding
-                                    withDarkBackground
+                                    backgroundColor="background"
                                     withSpaceBetweenContents
                                 >
                                     <InlineLayout
@@ -289,7 +289,7 @@ function LocalUnitBulkUploadModal(props: Props) {
                                         <Button
                                             name={undefined}
                                             onClick={handleStartUploadButtonClick}
-                                            styleVariant="filled"
+                                            variant="primary"
                                         >
                                             {strings.startUploadButtonLabel}
                                         </Button>
@@ -319,7 +319,7 @@ function LocalUnitBulkUploadModal(props: Props) {
                                         ),
                                     })}
                                 </span>
-                                <TextOutput
+                                <DataDisplay
                                     strongLabel
                                     valueType="text"
                                     label={strings.contentStructureNoteLabel}
@@ -334,7 +334,7 @@ function LocalUnitBulkUploadModal(props: Props) {
                 {isDefined(importSummaryResponse) && (
                     <LocalUnitImportSummary
                         value={importSummaryResponse}
-                        withBackground
+                        backgroundColor="foreground"
                         withPadding
                     />
                 )}
@@ -348,7 +348,7 @@ function LocalUnitBulkUploadModal(props: Props) {
                     </InlineLayout>
                 )}
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportSummary/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportSummary/index.tsx
index 6050edf668..6b78af5941 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportSummary/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportSummary/index.tsx
@@ -5,10 +5,11 @@ import {
 } from '@ifrc-go/icons';
 import {
     Container,
+    type ContainerProps,
+    DataDisplay,
     ListView,
-    NumberOutput,
+    NumberDisplay,
     ProgressBar,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
@@ -34,14 +35,14 @@ const BULK_UPLOAD_PENDING = 3 satisfies BulkStatusKey;
 interface Props {
     value: BulkUploadResponse | undefined;
     withPadding?: boolean;
-    withBackground?: boolean;
+    backgroundColor?: ContainerProps['backgroundColor'];
 }
 
 function LocalUnitImportSummary(props: Props) {
     const {
         value,
         withPadding,
-        withBackground,
+        backgroundColor,
     } = props;
     const strings = useTranslation(i18n);
 
@@ -55,7 +56,7 @@ function LocalUnitImportSummary(props: Props) {
             pending={value?.status === BULK_UPLOAD_PENDING}
             pendingMessage={strings.processingMessage}
             withPadding={withPadding}
-            withBackground={withBackground}
+            backgroundColor={backgroundColor}
         >
             <ListView layout="block">
                 {isDefined(totalCount) && (
@@ -66,12 +67,12 @@ function LocalUnitImportSummary(props: Props) {
                             strings.rowsSuccessLabel,
                             {
                                 numRows: (
-                                    <NumberOutput
+                                    <NumberDisplay
                                         value={value?.success_count}
                                     />
                                 ),
                                 total: (
-                                    <NumberOutput
+                                    <NumberDisplay
                                         value={totalCount}
                                     />
                                 ),
@@ -90,7 +91,7 @@ function LocalUnitImportSummary(props: Props) {
                     layout="block"
                     withSpacingOpticalCorrection
                 >
-                    <TextOutput
+                    <DataDisplay
                         label={strings.statusLabel}
                         value={value?.status_details}
                         strongValue
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateModal/index.tsx
index eac99f7c04..611363eb27 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateModal/index.tsx
@@ -5,8 +5,8 @@ import {
 import {
     Button,
     Container,
+    Dialog,
     ListView,
-    Modal,
     RadioInput,
     TextArea,
 } from '@ifrc-go/ui';
@@ -158,7 +158,7 @@ function LocalUnitValidateModal(props: Props) {
     }, [validateLocalUnit, revertChanges, rejectionReason]);
 
     return (
-        <Modal
+        <Dialog
             onClose={onClose}
             heading={
                 resolveToString(
@@ -212,7 +212,7 @@ function LocalUnitValidateModal(props: Props) {
                     />
                 )}
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/OtherProfilesDiffOutput/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/OtherProfilesDiffOutput/index.tsx
index 1b7d9bf956..a97b61fa21 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/OtherProfilesDiffOutput/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/OtherProfilesDiffOutput/index.tsx
@@ -1,8 +1,10 @@
 import {
+    DataDisplay,
     ListView,
-    TextOutput,
+    type ListViewProps,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import { isDefined } from '@togglecorp/fujs';
 
 import DiffWrapper from '#components/DiffWrapper';
 
@@ -17,22 +19,22 @@ type OtherProfile = NonNullable<
 interface Props {
     newValue: OtherProfile;
     oldValue: OtherProfile | undefined;
-    withBackground?: boolean;
+    backgroundColor?: ListViewProps['backgroundColor'];
 }
 
 function OtherProfilesDiffOutput(props: Props) {
     const {
         newValue,
         oldValue,
-        withBackground,
+        backgroundColor,
     } = props;
 
     const strings = useTranslation(i18n);
 
     return (
         <ListView
-            withPadding={withBackground}
-            withBackground={withBackground}
+            withPadding={isDefined(backgroundColor)}
+            backgroundColor={backgroundColor}
             spacing="sm"
             layout="grid"
         >
@@ -42,7 +44,7 @@ function OtherProfilesDiffOutput(props: Props) {
                 previousValue={oldValue?.position}
                 diffViewEnabled
             >
-                <TextOutput
+                <DataDisplay
                     strongValue
                     value={newValue.position}
                     label={strings.otherProfilePositionOutputLabel}
@@ -54,7 +56,7 @@ function OtherProfilesDiffOutput(props: Props) {
                 previousValue={oldValue?.number}
                 diffViewEnabled
             >
-                <TextOutput
+                <DataDisplay
                     strongValue
                     valueType="number"
                     label={strings.otherProfileNumberOutputLabel}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/index.tsx
index 42692a732f..fcb81b0f7c 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitView/index.tsx
@@ -4,8 +4,8 @@ import {
 } from 'react';
 import {
     Container,
+    DataDisplay,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -146,7 +146,7 @@ function LocalUnitView(props: Props) {
             emptyMessage={strings.localUnitViewNoChanges}
             footer={isDefined(newValue?.update_reason_overview)
                 && isNotDefined(locallyChangedValue) && (
-                <TextOutput
+                <DataDisplay
                     valueClassName={styles.updateReasonText}
                     strongLabel
                     value={newValue?.update_reason_overview}
@@ -202,13 +202,13 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.location_json?.lat}
                     value={newValue?.location_json?.lat}
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewLatitude}
                         value={newValue?.location_json?.lat}
                         valueType="number"
                         maximumFractionDigits={10}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 <DiffWrapper
@@ -217,13 +217,13 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.location_json?.lng}
                     value={newValue?.location_json?.lng}
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewLongitude}
                         value={newValue?.location_json?.lng}
                         valueType="number"
                         maximumFractionDigits={10}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 <DiffWrapper
@@ -232,12 +232,12 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.date_of_data}
                     diffViewEnabled
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewDateOfUpdate}
                         value={newValue?.date_of_data}
                         valueType="date"
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 <DiffWrapper
@@ -246,11 +246,11 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.subtype}
                     diffViewEnabled
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewSubtype}
                         value={newValue?.subtype}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 <DiffWrapper
@@ -259,11 +259,11 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.english_branch_name}
                     diffViewEnabled
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewLocalUnitNameEn}
                         value={newValue?.english_branch_name}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 <DiffWrapper
@@ -272,11 +272,11 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.local_branch_name}
                     diffViewEnabled
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewLocalUnitNameLocal}
                         value={newValue?.local_branch_name}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 {newValue?.type !== TYPE_HEALTH_CARE && (
@@ -307,11 +307,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.focal_person_en}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewFocalPersonEn}
                                 value={newValue?.focal_person_en}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -320,11 +320,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.focal_person_loc}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewFocalPersonLocal}
                                 value={newValue?.focal_person_loc}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                     </>
@@ -337,11 +337,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.source_en}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewSourceEn}
                                 value={newValue?.source_en}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -350,11 +350,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.source_loc}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewSourceLocal}
                                 value={newValue?.source_loc}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                     </>
@@ -385,11 +385,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.other_affiliation}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewOtherAffiliation}
                                 value={newValue?.health?.other_affiliation}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <SelectDiffWrapper
@@ -436,12 +436,12 @@ function LocalUnitView(props: Props) {
                             }
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewTeachingHospital}
                                 value={newValue?.health?.is_teaching_hospital}
                                 valueType="boolean"
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -452,12 +452,12 @@ function LocalUnitView(props: Props) {
                             }
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewInPatientCapacity}
                                 value={newValue?.health?.is_in_patient_capacity}
                                 valueType="boolean"
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -468,12 +468,12 @@ function LocalUnitView(props: Props) {
                             }
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewIsolationRoomsWards}
                                 value={newValue?.health?.is_isolation_rooms_wards}
                                 valueType="boolean"
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <SelectDiffWrapper
@@ -502,11 +502,11 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.address_en}
                     diffViewEnabled
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewAddressEn}
                         value={newValue?.address_en}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 <DiffWrapper
@@ -515,11 +515,11 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.address_loc}
                     diffViewEnabled
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewAddressLocal}
                         value={newValue?.address_loc}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 <DiffWrapper
@@ -528,11 +528,11 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.city_en}
                     diffViewEnabled
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewLocalityEn}
                         value={newValue?.city_en}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 <DiffWrapper
@@ -541,11 +541,11 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.city_loc}
                     diffViewEnabled
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewLocalityLocal}
                         value={newValue?.city_loc}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 <DiffWrapper
@@ -554,11 +554,11 @@ function LocalUnitView(props: Props) {
                     previousValue={oldValue?.postcode}
                     diffViewEnabled
                 >
-                    <TextOutput
+                    <DataDisplay
                         strongLabel
                         label={strings.localUnitViewPostCode}
                         value={newValue?.postcode}
-                        withBackground
+                        backgroundColor="background"
                     />
                 </DiffWrapper>
                 {newValue?.type !== TYPE_HEALTH_CARE && (
@@ -569,11 +569,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.phone}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewPhone}
                                 value={newValue?.phone}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -582,11 +582,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.email}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewEmail}
                                 value={newValue?.email}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -595,12 +595,12 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.link}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewWebsite}
                                 value={newValue?.link}
                                 valueType="text"
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                     </>
@@ -631,11 +631,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.other_facility_type}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewOtherFacilityType}
                                 value={newValue?.health?.other_facility_type}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <SelectDiffWrapper
@@ -662,11 +662,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.speciality}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewSpecialties}
                                 value={newValue?.health?.speciality}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <MultiSelectDiffWrapper
@@ -712,11 +712,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.other_services}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewOtherServices}
                                 value={newValue?.health?.other_services}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <MultiSelectDiffWrapper
@@ -761,11 +761,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.number_of_isolation_rooms}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewNumberOfIsolationRooms}
                                 value={newValue?.health?.number_of_isolation_rooms}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -774,11 +774,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.maximum_capacity}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewMaximumCapacity}
                                 value={newValue?.health?.maximum_capacity}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -787,12 +787,12 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.is_warehousing}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 valueType="boolean"
                                 label={strings.localUnitViewWarehousing}
                                 value={newValue?.health?.is_warehousing}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -801,12 +801,12 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.is_cold_chain}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 valueType="boolean"
                                 label={strings.localUnitViewColdChain}
                                 value={newValue?.health?.is_cold_chain}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -815,11 +815,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.ambulance_type_a}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewAmbulanceTypeA}
                                 value={newValue?.health?.ambulance_type_a}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -828,11 +828,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.ambulance_type_b}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewAmbulanceTypeB}
                                 value={newValue?.health?.ambulance_type_b}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -841,11 +841,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.ambulance_type_c}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewAmbulanceTypeC}
                                 value={newValue?.health?.ambulance_type_c}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -854,11 +854,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.total_number_of_human_resource}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewTotalNumberOfHumanResources}
                                 value={newValue?.health?.total_number_of_human_resource}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -867,11 +867,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.general_practitioner}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewGeneralPractitioner}
                                 value={newValue?.health?.general_practitioner}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -880,11 +880,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.specialist}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewSpecialist}
                                 value={newValue?.health?.specialist}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -893,11 +893,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.residents_doctor}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewResidentsDoctor}
                                 value={newValue?.health?.residents_doctor}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -906,11 +906,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.nurse}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewNurse}
                                 value={newValue?.health?.nurse}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -919,11 +919,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.dentist}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewDentist}
                                 value={newValue?.health?.dentist}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -932,11 +932,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.nursing_aid}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewNursingAid}
                                 value={newValue?.health?.nursing_aid}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -945,11 +945,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.midwife}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewMidwife}
                                 value={newValue?.health?.midwife}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -958,11 +958,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.pharmacists}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewPharmacists}
                                 value={newValue?.health?.pharmacists}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         {isDefined(changedOtherProfiles) && changedOtherProfiles.length > 0 && (
@@ -975,7 +975,7 @@ function LocalUnitView(props: Props) {
                                         key={profile.client_id}
                                         newValue={profile}
                                         oldValue={getPreviousProfileValue(profile.client_id)}
-                                        withBackground
+                                        backgroundColor="foreground"
                                     />
                                 ))}
                             </>
@@ -990,7 +990,7 @@ function LocalUnitView(props: Props) {
                                         key={profile.client_id}
                                         newValue={profile}
                                         oldValue={undefined}
-                                        withBackground
+                                        backgroundColor="foreground"
                                     />
                                 ))}
                             </>
@@ -1001,12 +1001,12 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.other_medical_heal}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 valueType="boolean"
                                 label={strings.localUnitViewOtherMedicalHeal}
                                 value={newValue?.health?.other_medical_heal}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -1015,11 +1015,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.feedback}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewCommentsNS}
                                 value={newValue?.health?.feedback}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -1028,11 +1028,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.focal_point_position}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewFocalPointPosition}
                                 value={newValue?.health?.focal_point_position}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -1041,11 +1041,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.focal_point_email}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewFocalPointEmail}
                                 value={newValue?.health?.focal_point_email}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                         <DiffWrapper
@@ -1054,11 +1054,11 @@ function LocalUnitView(props: Props) {
                             previousValue={oldValue?.health?.focal_point_phone_number}
                             diffViewEnabled
                         >
-                            <TextOutput
+                            <DataDisplay
                                 strongLabel
                                 label={strings.localUnitViewFocalPointPhoneNumber}
                                 value={newValue?.health?.focal_point_phone_number}
-                                withBackground
+                                backgroundColor="background"
                             />
                         </DiffWrapper>
                     </>
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitViewModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitViewModal/index.tsx
index 55b08935af..f40d760f75 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitViewModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitViewModal/index.tsx
@@ -1,6 +1,6 @@
 import {
+    Dialog,
     ListView,
-    Modal,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -29,7 +29,7 @@ function LocalUnitViewModal(props: Props) {
     const strings = useTranslation(i18n);
 
     return (
-        <Modal
+        <Dialog
             heading={strings.confirmChangesModalHeading}
             headerDescription={strings.confirmChangesContentQuestion}
             withHeaderBorder
@@ -44,7 +44,7 @@ function LocalUnitViewModal(props: Props) {
                 />
                 {children}
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsExportModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsExportModal/index.tsx
index 141ca319e1..8a530c4836 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsExportModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsExportModal/index.tsx
@@ -3,8 +3,8 @@ import { useOutletContext } from 'react-router-dom';
 import {
     Button,
     Description,
+    Dialog,
     ListView,
-    Modal,
     SelectInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -101,7 +101,7 @@ function LocalUnitsExportModal(props: Props) {
     });
 
     return (
-        <Modal
+        <Dialog
             heading={resolveToString(strings.modalHeading, {
                 countryName: countryResponse?.name ?? '--',
             })}
@@ -131,7 +131,7 @@ function LocalUnitsExportModal(props: Props) {
                     <Button
                         name={null}
                         disabled={isNotDefined(countryId) || isNotDefined(selectedLocalUnitType)}
-                        styleVariant="filled"
+                        variant="primary"
                         onClick={triggerExport}
                     >
                         {strings.generateExportButtonLabel}
@@ -140,7 +140,7 @@ function LocalUnitsExportModal(props: Props) {
                 <NonFieldError error={exportError?.value.messageForNotification} />
                 <div />
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/HealthFields/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/HealthFields/index.tsx
index 71d8a92ae3..9736ed5a23 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/HealthFields/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/HealthFields/index.tsx
@@ -132,7 +132,7 @@ function HealthFields(props: Props) {
                     <ListView layout="grid">
                         <ListView
                             layout="block"
-                            withDarkBackground
+                            backgroundColor="background"
                             withPadding
                         >
                             <SelectInput
@@ -426,7 +426,7 @@ function HealthFields(props: Props) {
                         headingLevel={6}
                         spacing="sm"
                         withPadding
-                        withDarkBackground
+                        backgroundColor="background"
                     >
                         <ListView
                             layout="grid"
@@ -481,7 +481,7 @@ function HealthFields(props: Props) {
                 <ListView layout="block">
                     <ListView
                         layout="grid"
-                        withDarkBackground
+                        backgroundColor="background"
                         withPadding
                     >
                         <ListView layout="block">
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx
index 257fc12999..8e1d00c9c0 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx
@@ -7,11 +7,11 @@ import { useOutletContext } from 'react-router-dom';
 import {
     Button,
     Container,
+    DateDisplay,
     DateInput,
-    DateOutput,
-    Label,
+    Dialog,
+    DisplayLabel,
     ListView,
-    Modal,
     SelectInput,
     Switch,
     TextArea,
@@ -188,7 +188,7 @@ function LocalUnitsFormModal(props: Props) {
                 {
                     variant: 'danger',
                     description: messageForNotification,
-                    // FIXME: debug message copy button cannot be clicked because of Modal
+                    // FIXME: debug message copy button cannot be clicked because of Dialog
                     // debugMessage,
                 },
             );
@@ -230,7 +230,7 @@ function LocalUnitsFormModal(props: Props) {
                 {
                     variant: 'danger',
                     description: messageForNotification,
-                    // FIXME: debug message copy button cannot be clicked because of Modal
+                    // FIXME: debug message copy button cannot be clicked because of Dialog
                     // debugMessage,
                 },
             );
@@ -472,7 +472,7 @@ function LocalUnitsFormModal(props: Props) {
         : '??';
 
     return (
-        <Modal
+        <Dialog
             heading={resolveToString(
                 strings.localUnitsModalHeading,
                 { localUnitType: localUnitName },
@@ -519,7 +519,7 @@ function LocalUnitsFormModal(props: Props) {
                                     strings.lastUpdateLabel,
                                     {
                                         modifiedAt: (
-                                            <DateOutput
+                                            <DateDisplay
                                                 value={localUnitDetailsResponse.modified_at}
                                             />
                                         ),
@@ -571,9 +571,9 @@ function LocalUnitsFormModal(props: Props) {
                         withWrap
                         withSpacingOpticalCorrection
                     >
-                        <Label strong>
+                        <DisplayLabel strong>
                             {strings.type}
-                        </Label>
+                        </DisplayLabel>
                         <SelectInput
                             required
                             name="type"
@@ -592,9 +592,9 @@ function LocalUnitsFormModal(props: Props) {
                         withWrap
                         withSpacingOpticalCorrection
                     >
-                        <Label strong>
+                        <DisplayLabel strong>
                             {strings.visibility}
-                        </Label>
+                        </DisplayLabel>
                         <SelectInput
                             name="visibility"
                             required
@@ -984,7 +984,7 @@ function LocalUnitsFormModal(props: Props) {
                     onActionSuccess={handleLocalUnitValidate}
                 />
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
index 696449da5c..cbb98881fb 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
@@ -11,11 +11,11 @@ import {
 import {
     Button,
     Container,
+    DataDisplay,
     InlineLayout,
     Legend,
     ListView,
     RawList,
-    TextOutput,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -438,8 +438,8 @@ function LocalUnitsMap(props: Props) {
                             filtered={false}
                             empty={false}
                             withPadding
-                            withShadow
-                            withBackground
+                            boxShadow="md"
+                            backgroundColor="foreground"
                             className={styles.contactDetails}
                         >
                             <ListView
@@ -546,7 +546,7 @@ function LocalUnitsMap(props: Props) {
                         heading={(
                             <Button
                                 name={undefined}
-                                styleVariant="action"
+                                variant="tertiary"
                                 onClick={handleLocalUnitHeadingClick}
                                 disabled={!isAuthenticated}
                             >
@@ -571,24 +571,24 @@ function LocalUnitsMap(props: Props) {
                             withSpacingOpticalCorrection
                             spacing="sm"
                         >
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.localUnitsMapLastUpdate}
                                 value={localUnitDetail?.modified_at}
                                 strongValue
                                 valueType="date"
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.localUnitsMapAddress}
                                 strongValue
                                 value={localUnitAddress}
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.localUnitsMapLocalUnitType}
                                 strongValue
                                 value={localUnitDetail?.type_details.name}
                             />
                             {isDefined(localUnitDetail?.health) && (
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.localUnitsMapHealthFacilityType}
                                     strongValue
                                     value={
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx
index b7240b2d91..81d45ea86e 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx
@@ -5,7 +5,7 @@ import {
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
-    Pager,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -239,7 +239,7 @@ function LocalUnitsTable(props: Props) {
         <Container
             footerActions={isDefined(localUnitsResponse)
                 && isDefined(localUnitsResponse.count) && (
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={localUnitsResponse.count}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/i18n.json b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/i18n.json
index 50de77c832..08a27f139e 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/i18n.json
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/i18n.json
@@ -8,6 +8,7 @@
         "exportButtonLabel": "Export Local Units",
         "configureDropdownLabel": "Configure Local Units",
         "importDropdownLabel": "Import Local Units",
-        "viewPreviousImportsDropdownLabel": "View previous imports"
+        "viewPreviousImportsDropdownLabel": "View previous imports",
+        "moreOptionsLabel": "More options"
     }
 }
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/index.tsx
index 158def87d1..b60e6cf204 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/index.tsx
@@ -13,8 +13,8 @@ import {
 import {
     Button,
     Container,
-    DropdownMenu,
     InlineLayout,
+    Menu,
     Tab,
     TabList,
     TabPanel,
@@ -163,10 +163,11 @@ function NationalSocietyLocalUnits(props: Props) {
                             {strings.addLocalUnitLabel}
                         </Button>
                         {canSeeMoreOptions && (
-                            <DropdownMenu
+                            <Menu
                                 withoutDropdownIcon
-                                labelStyleVariant="action"
+                                labelVariant="tertiary"
                                 label={<MoreTwoFillIcon className={styles.icon} />}
+                                ariaLabel={strings.moreOptionsLabel}
                                 persistent
                             >
                                 {isSuperUser && (
@@ -207,7 +208,7 @@ function NationalSocietyLocalUnits(props: Props) {
                                         </DropdownMenuItem>
                                     </>
                                 )}
-                            </DropdownMenu>
+                            </Menu>
                         )}
                     </>
                 )}
diff --git a/app/src/views/CountryNsOverviewStrategicPriorities/index.tsx b/app/src/views/CountryNsOverviewStrategicPriorities/index.tsx
index 1aca7b5e80..b640831ff9 100644
--- a/app/src/views/CountryNsOverviewStrategicPriorities/index.tsx
+++ b/app/src/views/CountryNsOverviewStrategicPriorities/index.tsx
@@ -6,10 +6,10 @@ import {
 } from '@ifrc-go/icons';
 import {
     Container,
+    DataDisplay,
     Description,
-    KeyFigureView,
+    KeyFigureCard,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
@@ -200,7 +200,7 @@ export function Component() {
                     empty={false}
                     heading={strings.nsStrategicPrioritiesHeading}
                     footerActions={(
-                        <TextOutput
+                        <DataDisplay
                             label={strings.source}
                             value={strings.unifiedPlanning}
                             strongValue
@@ -261,19 +261,19 @@ export function Component() {
                                 layout="grid"
                                 minGridColumnSize="6rem"
                             >
-                                <KeyFigureView
+                                <KeyFigureCard
                                     value={countryPlanResponse.requested_amount}
                                     label={strings.countryPlanKeyFigureRequestedAmount}
                                     valueType="number"
-                                    valueOptions={{ compact: true }}
-                                    withShadow
+                                    compact
+                                    boxShadow="md"
                                 />
-                                <KeyFigureView
+                                <KeyFigureCard
                                     value={countryPlanResponse.people_targeted}
                                     label={strings.countryPlanPeopleTargeted}
                                     valueType="number"
-                                    valueOptions={{ compact: true }}
-                                    withShadow
+                                    compact
+                                    boxShadow="md"
                                 />
                             </ListView>
                         </ListView>
@@ -310,8 +310,8 @@ export function Component() {
                                                     key={strengthComponent.component}
                                                     className={styles.strengthComponent}
                                                     withPadding
-                                                    withShadow
-                                                    withBackground
+                                                    boxShadow="md"
+                                                    backgroundColor="foreground"
                                                 >
                                                     {strengthComponent?.component_details.title}
                                                 </Container>
@@ -334,8 +334,8 @@ export function Component() {
                                                 )}
                                                 className={styles.strengthComponent}
                                                 withPadding
-                                                withShadow
-                                                withBackground
+                                                boxShadow="md"
+                                                backgroundColor="foreground"
                                             >
                                                 {strengthComponent?.component_details.title}
                                             </Container>
@@ -367,8 +367,8 @@ export function Component() {
                                                     key={keyDevelopmentComponent.component}
                                                     className={styles.priorityComponent}
                                                     withPadding
-                                                    withShadow
-                                                    withBackground
+                                                    boxShadow="md"
+                                                    backgroundColor="foreground"
                                                 >
                                                     {keyDevelopmentComponent
                                                         ?.component_details.title}
@@ -391,8 +391,8 @@ export function Component() {
                                                 )}
                                                 className={styles.priorityComponent}
                                                 withPadding
-                                                withShadow
-                                                withBackground
+                                                boxShadow="md"
+                                                backgroundColor="foreground"
                                             >
                                                 {keyDevelopmentComponent
                                                     ?.component_details.title}
diff --git a/app/src/views/CountryNsOverviewSupportingPartners/MembershipCoordinationTable/index.tsx b/app/src/views/CountryNsOverviewSupportingPartners/MembershipCoordinationTable/index.tsx
index 955434e205..e5be2294c3 100644
--- a/app/src/views/CountryNsOverviewSupportingPartners/MembershipCoordinationTable/index.tsx
+++ b/app/src/views/CountryNsOverviewSupportingPartners/MembershipCoordinationTable/index.tsx
@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
 import {
     Container,
+    DataDisplay,
     Table,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -131,7 +131,7 @@ function MembershipCoordinationTable(props: Props) {
             heading={strings.membershipCoordinationTableTitle}
             withHeaderBorder
             footerActions={(
-                <TextOutput
+                <DataDisplay
                     label={strings.membershipSource}
                     value={strings.unifiedPlanning}
                     strongValue
diff --git a/app/src/views/CountryNsOverviewSupportingPartners/Presence/index.tsx b/app/src/views/CountryNsOverviewSupportingPartners/Presence/index.tsx
index b5b61f4075..a6e7a4a478 100644
--- a/app/src/views/CountryNsOverviewSupportingPartners/Presence/index.tsx
+++ b/app/src/views/CountryNsOverviewSupportingPartners/Presence/index.tsx
@@ -2,11 +2,11 @@ import { useCallback } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
-    InfoPopup,
+    DataDisplay,
     InlineLayout,
     ListView,
+    MoreInfo,
     RawList,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
@@ -52,7 +52,7 @@ function DelegationInformation(props: DelegationInformationProps) {
 
     return (
         <div className={styles.delegation}>
-            <TextOutput
+            <DataDisplay
                 label={resolveToString(
                     strings.countryIFRCPresenceHeadOfDelegation,
                     { delegationOfficeType },
@@ -62,18 +62,18 @@ function DelegationInformation(props: DelegationInformationProps) {
             />
             {/* NOTE: Hide it for now, not sure if we can publish or not */}
             {/*
-            <TextOutput
+            <DataDisplay
                 label={strings.countryIFRCContact}
                 value={contact}
                 strongValue
             />
               */}
-            <TextOutput
+            <DataDisplay
                 label={strings.countryIFRCDelegationType}
                 value={delegationOfficeType}
                 strongValue
             />
-            <TextOutput
+            <DataDisplay
                 valueClassName={styles.location}
                 label={strings.countryIFRCLocation}
                 value={address}
@@ -117,12 +117,12 @@ function Presence() {
                 pending={false}
                 className={styles.presenceCard}
                 heading={strings.countryIFRCPresenceTitle}
-                withShadow
+                boxShadow="md"
                 withPadding
-                withBackground
+                backgroundColor="foreground"
                 // NOTE: Hide it for now, not sure if we can publish or not
                 // footerActions={(
-                //     <TextOutput
+                //     <DataDisplay
                 //         label={strings.source}
                 //         value={(
                 //             <Link
@@ -141,9 +141,9 @@ function Presence() {
                     <ListView withWrap>
                         <InlineLayout
                             after={(
-                                <InfoPopup
-                                    description={strings.disclaimer}
-                                />
+                                <MoreInfo>
+                                    {strings.disclaimer}
+                                </MoreInfo>
                             )}
                             spacing="2xs"
                         >
@@ -192,7 +192,7 @@ function Presence() {
                     className={styles.presenceCard}
                     heading={strings.countryICRCPresenceTitle}
                     footerActions={isDefined(countryResponse.icrc_presence.url) && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.source}
                             value={(
                                 <Link
@@ -207,9 +207,9 @@ function Presence() {
                         />
                     )}
                     withHeaderBorder
-                    withShadow
+                    boxShadow="md"
                     withPadding
-                    withBackground
+                    backgroundColor="foreground"
                 >
                     {
                         resolveToString(
diff --git a/app/src/views/CountryOngoingActivitiesEmergencies/CountryKeyFigures/index.tsx b/app/src/views/CountryOngoingActivitiesEmergencies/CountryKeyFigures/index.tsx
index b984a7f24c..6204581447 100644
--- a/app/src/views/CountryOngoingActivitiesEmergencies/CountryKeyFigures/index.tsx
+++ b/app/src/views/CountryOngoingActivitiesEmergencies/CountryKeyFigures/index.tsx
@@ -6,9 +6,9 @@ import {
     TargetedPopulationIcon,
 } from '@ifrc-go/icons';
 import {
-    InfoPopup,
-    KeyFigureView,
+    KeyFigureCard,
     ListView,
+    MoreInfo,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { getPercentage } from '@ifrc-go/ui/utils';
@@ -36,63 +36,61 @@ function CountryKeyFigures(props: Props) {
             layout="grid"
             numPreferredGridColumns={5}
         >
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<DrefIcon />}
                 value={data.active_drefs}
                 valueType="number"
                 info={(
-                    <InfoPopup
+                    <MoreInfo
                         title={strings.countryOngoingActivitiesKeyFiguresDrefTitle}
-                        description={strings.countryOngoingActivitiesKeyFiguresDref}
-                    />
+                    >
+                        {strings.countryOngoingActivitiesKeyFiguresDref}
+                    </MoreInfo>
                 )}
                 label={strings.activeDrefOperationsLabel}
-                withShadow
+                boxShadow="md"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<AppealsIcon />}
                 value={data.active_appeals}
                 valueType="number"
                 info={(
-                    <InfoPopup
+                    <MoreInfo
                         title={strings.countryOngoingActivitiesKeyFiguresAppealsTitle}
-                        description={
-                            strings.countryOngoingActivitiesFigureAppealDescription
-                        }
-                    />
+                    >
+                        {strings.countryOngoingActivitiesFigureAppealDescription}
+                    </MoreInfo>
                 )}
                 label={strings.countryOngoingActivitiesKeyFiguresActiveAppeals}
-                withShadow
+                boxShadow="md"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<TargetedPopulationIcon />}
                 value={data.target_population}
                 valueType="number"
-                valueOptions={{ compact: true }}
+                compact
                 label={strings.countryOngoingActivitiesKeyFiguresTargetPop}
-                withShadow
+                boxShadow="md"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<FundingIcon />}
                 value={data.amount_requested_dref_included}
                 valueType="number"
-                valueOptions={{ compact: true }}
+                compact
                 label={strings.countryOngoingActivitiesKeyFiguresBudget}
-                withShadow
+                boxShadow="md"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<FundingCoverageIcon />}
                 value={getPercentage(
                     data.amount_funded_dref_included,
                     data.amount_requested_dref_included,
                 )}
                 valueType="number"
-                valueOptions={{
-                    suffix: '%',
-                    compact: true,
-                }}
+                suffix="%"
+                compact
                 label={strings.countryOngoingActivitiesKeyFiguresAppealsFunding}
-                withShadow
+                boxShadow="md"
             />
         </ListView>
     );
diff --git a/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx b/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx
index 8b985c77c6..e09ae9d716 100644
--- a/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx
+++ b/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx
@@ -11,12 +11,12 @@ import {
 } from 'react-router-dom';
 import {
     Container,
+    DataDisplay,
     LegendItem,
     ListView,
-    Pager,
+    Pagination,
     RadioInput,
     Table,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -444,19 +444,19 @@ export function Component() {
                     withSpacingOpticalCorrection
                     spacing="2xs"
                 >
-                    <TextOutput
+                    <DataDisplay
                         value={appeal.num_beneficiaries}
                         description={strings.operationPopoverPeopleAffected}
                         valueType="number"
                         textSize="sm"
                     />
-                    <TextOutput
+                    <DataDisplay
                         value={appeal.amount_requested}
                         description={strings.operationAmountRequested}
                         valueType="number"
                         textSize="sm"
                     />
-                    <TextOutput
+                    <DataDisplay
                         value={appeal.amount_funded}
                         description={strings.operationPopoverAmountFunded}
                         valueType="number"
@@ -539,7 +539,7 @@ export function Component() {
                         </Link>
                     )}
                     footerActions={(
-                        <Pager
+                        <Pagination
                             activePage={page}
                             itemsCount={appealsResponse?.count ?? 0}
                             maxItemsPerPage={limit}
diff --git a/app/src/views/CountryPreparedness/DocumentCard/index.tsx b/app/src/views/CountryPreparedness/DocumentCard/index.tsx
index a4632b38b7..225fb59e70 100644
--- a/app/src/views/CountryPreparedness/DocumentCard/index.tsx
+++ b/app/src/views/CountryPreparedness/DocumentCard/index.tsx
@@ -5,8 +5,8 @@ import {
 } from '@ifrc-go/icons';
 import {
     ConfirmButton,
-    DateOutput,
-    Label,
+    DateDisplay,
+    DisplayLabel,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -77,10 +77,10 @@ function DocumentCard(props: Props) {
                 withSpacingOpticalCorrection
                 spacing="xs"
             >
-                <Label>
+                <DisplayLabel>
                     {getFileNameFromUrl(document.file)}
-                </Label>
-                <DateOutput value={document.created_at} />
+                </DisplayLabel>
+                <DateDisplay value={document.created_at} />
             </ListView>
             <ListView spacing="2xs">
                 <Link
@@ -96,7 +96,7 @@ function DocumentCard(props: Props) {
                     name={document.id}
                     onConfirm={handleFileDelete}
                     title={strings.removeFileButtonTitle}
-                    styleVariant="action"
+                    variant="tertiary"
                     spacing="none"
                     disabled={perDocumentDeletePending}
                 >
diff --git a/app/src/views/CountryPreparedness/PreviousAssessmentChart/index.tsx b/app/src/views/CountryPreparedness/PreviousAssessmentChart/index.tsx
index 077243c902..64be14b81c 100644
--- a/app/src/views/CountryPreparedness/PreviousAssessmentChart/index.tsx
+++ b/app/src/views/CountryPreparedness/PreviousAssessmentChart/index.tsx
@@ -6,8 +6,8 @@ import {
     ChartAxes,
     ChartContainer,
     ChartPoint,
-    DateOutput,
-    TextOutput,
+    DataDisplay,
+    DateDisplay,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -91,15 +91,15 @@ function PreviousAssessmentCharts(props: Props) {
 
             return (
                 <Tooltip
-                    title={<DateOutput value={datum.date_of_assessment} />}
+                    title={<DateDisplay value={datum.date_of_assessment} />}
                     description={(
                         <>
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.performanceTooltipCycleLabel}
                                 value={datum.assessment_number}
                                 valueType="number"
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.performanceTooltipAverageRatingLabel}
                                 value={datum.average_rating}
                                 valueType="number"
diff --git a/app/src/views/CountryPreparedness/PrivateCountryPreparedness/index.tsx b/app/src/views/CountryPreparedness/PrivateCountryPreparedness/index.tsx
index 4648b0ec0d..7beecc8353 100644
--- a/app/src/views/CountryPreparedness/PrivateCountryPreparedness/index.tsx
+++ b/app/src/views/CountryPreparedness/PrivateCountryPreparedness/index.tsx
@@ -14,10 +14,11 @@ import {
 import {
     Button,
     Container,
+    DataDisplay,
     Description,
+    DisplayLabel,
     InlineLayout,
     KeyFigure,
-    Label,
     LegendItem,
     ListView,
     Message,
@@ -25,7 +26,6 @@ import {
     ProgressBar,
     RawList,
     StackedProgressBar,
-    TextOutput,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -458,7 +458,7 @@ function PrivateCountryPreparedness() {
             >
                 <Container
                     headerDescription={(
-                        <TextOutput
+                        <DataDisplay
                             label={strings.lastUpdatedLabel}
                             value={processStatusResponse?.updated_at}
                             valueType="date"
@@ -466,42 +466,42 @@ function PrivateCountryPreparedness() {
                         />
                     )}
                     withPadding
-                    withBackground
-                    withShadow
+                    backgroundColor="foreground"
+                    boxShadow="md"
                     spacing="lg"
                 >
                     <ListView
                         layout="grid"
                         numPreferredGridColumns={3}
                     >
-                        <TextOutput
+                        <DataDisplay
                             label={strings.startDateLabel}
                             value={perOverview?.date_of_assessment}
                             valueType="date"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.perPhaseLabel}
                             value={processStatusResponse?.phase_display}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.focalPointNameLabel}
                             value={perOverview?.ns_focal_point_name}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.perCycleLabel}
                             value={perOverview?.assessment_number}
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.typeOfAssessmentLabel}
                             value={perOverview?.type_of_assessment?.name}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.focalPointEmailTitle}
                             value={perOverview?.ns_focal_point_email}
                             strongValue
@@ -596,7 +596,7 @@ function PrivateCountryPreparedness() {
                                             )}
                                             withoutWrapInHeader
                                             withPadding
-                                            withDarkBackground
+                                            backgroundColor="background"
                                         >
                                             {component.details.title}
                                         </Container>
@@ -619,17 +619,17 @@ function PrivateCountryPreparedness() {
 
                                         return (
                                             <Fragment key={priorityComponent.id}>
-                                                <Label strong>
+                                                <DisplayLabel strong>
                                                     {getFormattedComponentName({
                                                         component_num: priorityComponent.num,
                                                         component_letter: priorityComponent.letter,
                                                         title: priorityComponent.label,
                                                     })}
-                                                </Label>
+                                                </DisplayLabel>
                                                 <ProgressBar
                                                     value={priorityComponent.rating?.value ?? 0}
                                                     totalValue={5}
-                                                    colorVariant="custom"
+                                                    variant="custom"
                                                     color={progressBarColor}
                                                 />
                                             </Fragment>
@@ -647,10 +647,10 @@ function PrivateCountryPreparedness() {
                     withHeaderBorder
                     footer={(
                         <ListView
-                            withDarkBackground
+                            backgroundColor="background"
                             withPadding
                         >
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.perAreas}
                                 value={(
                                     <ListView
@@ -698,22 +698,22 @@ function PrivateCountryPreparedness() {
                                     withPadding
                                     spacing="sm"
                                 >
-                                    <Label strong>
+                                    <DisplayLabel strong>
                                         {getFormattedComponentName(component.details)}
-                                    </Label>
+                                    </DisplayLabel>
                                     <InlineLayout contentAlignment="center">
                                         <ProgressBar
                                             value={component.rating?.value ?? 0}
                                             totalValue={5}
-                                            colorVariant="custom"
+                                            variant="custom"
                                             color={progressBarColor}
                                         />
                                     </InlineLayout>
-                                    <Label strong>
+                                    <DisplayLabel strong>
                                         {isDefined(component.rating)
                                             ? `${component.rating.value} - ${component.rating.title}`
                                             : strings.componentNotReviewed}
-                                    </Label>
+                                    </DisplayLabel>
                                     <Description>
                                         {component.notes}
                                     </Description>
diff --git a/app/src/views/CountryPreparedness/PublicCountryPreparedness/index.tsx b/app/src/views/CountryPreparedness/PublicCountryPreparedness/index.tsx
index 14dcefd4ae..30598824d9 100644
--- a/app/src/views/CountryPreparedness/PublicCountryPreparedness/index.tsx
+++ b/app/src/views/CountryPreparedness/PublicCountryPreparedness/index.tsx
@@ -3,10 +3,10 @@ import { useParams } from 'react-router-dom';
 import { ArrowLeftLineIcon } from '@ifrc-go/icons';
 import {
     Container,
-    Label,
+    DataDisplay,
+    DisplayLabel,
     ListView,
     Message,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -155,7 +155,7 @@ function PublicCountryPreparedness() {
             >
                 <Container
                     headerDescription={(
-                        <TextOutput
+                        <DataDisplay
                             label={strings.publicLastUpdatedLabel}
                             value={processStatusResponse?.updated_at}
                             valueType="date"
@@ -167,34 +167,34 @@ function PublicCountryPreparedness() {
                         layout="grid"
                         numPreferredGridColumns={3}
                     >
-                        <TextOutput
+                        <DataDisplay
                             label={strings.publicStartDateLabel}
                             value={perStats?.date_of_assessment}
                             valueType="date"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.publicPerPhaseLabel}
                             value={processStatusResponse?.phase_display}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.publicFocalPointNameLabel}
                             value={perStats?.ns_focal_point_name}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.publicPerCycleLabel}
                             value={perStats?.assessment_number}
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.publicTypeOfAssessmentLabel}
                             value={perStats?.type_of_assessment?.name}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.publicFocalPointEmailTitle}
                             value={perStats?.ns_focal_point_email}
                             strongValue
@@ -217,7 +217,7 @@ function PublicCountryPreparedness() {
                                     (component) => (
                                         <Container
                                             key={component.details.id}
-                                            withDarkBackground
+                                            backgroundColor="background"
                                             withPadding
                                         >
                                             {component.details.title}
@@ -238,7 +238,7 @@ function PublicCountryPreparedness() {
                             >
                                 {componentsToBeStrengthened.map(
                                     (priorityComponent) => (
-                                        <Label
+                                        <DisplayLabel
                                             key={priorityComponent.id}
                                             strong
                                         >
@@ -247,7 +247,7 @@ function PublicCountryPreparedness() {
                                                 component_letter: priorityComponent.componentLetter,
                                                 title: priorityComponent.label,
                                             })}
-                                        </Label>
+                                        </DisplayLabel>
                                     ),
                                 )}
                             </ListView>
diff --git a/app/src/views/CountryProfileOverview/ClimateChart/index.tsx b/app/src/views/CountryProfileOverview/ClimateChart/index.tsx
index 38e9342b03..941e5a5b46 100644
--- a/app/src/views/CountryProfileOverview/ClimateChart/index.tsx
+++ b/app/src/views/CountryProfileOverview/ClimateChart/index.tsx
@@ -6,8 +6,8 @@ import {
     ChartAxes,
     ChartContainer,
     Container,
+    DataDisplay,
     ListView,
-    TextOutput,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -127,19 +127,19 @@ function ClimateChart(props: Props) {
                     title={currentData.month_display}
                     description={(
                         <>
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.climateChartMax}
                                 value={currentData.max_temp}
                                 suffix=" °C"
                                 valueType="number"
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.climateChangeAverage}
                                 value={currentData.avg_temp}
                                 suffix=" °C"
                                 valueType="number"
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.climateChangeMin}
                                 value={currentData.min_temp}
                                 suffix=" °C"
@@ -175,7 +175,7 @@ function ClimateChart(props: Props) {
                 <Tooltip
                     title={currentData.month_display}
                     description={(
-                        <TextOutput
+                        <DataDisplay
                             label={strings.climateChangePrecipitation}
                             suffix=" mm"
                             value={currentData.precipitation}
@@ -200,7 +200,7 @@ function ClimateChart(props: Props) {
             heading={strings.climateChangeChart}
             withHeaderBorder
             footerActions={(
-                <TextOutput
+                <DataDisplay
                     label={strings.climateChartSource}
                     value={(
                         <Link
diff --git a/app/src/views/CountryProfileOverview/PopulationMap/index.tsx b/app/src/views/CountryProfileOverview/PopulationMap/index.tsx
index 24756a4817..fd763f518f 100644
--- a/app/src/views/CountryProfileOverview/PopulationMap/index.tsx
+++ b/app/src/views/CountryProfileOverview/PopulationMap/index.tsx
@@ -5,8 +5,8 @@ import {
 } from 'react';
 import {
     Container,
-    NumberOutput,
-    TextOutput,
+    DataDisplay,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { maxSafe } from '@ifrc-go/ui/utils';
@@ -294,7 +294,7 @@ function PopulationMap(props: Props) {
             className={styles.populationMap}
             withHeaderBorder
             footer={(
-                <TextOutput
+                <DataDisplay
                     label={strings.populationLegendLabel}
                     value={(
                         <div className={styles.legendContent}>
@@ -303,8 +303,8 @@ function PopulationMap(props: Props) {
                                 style={{ background: `linear-gradient(90deg, ${COLOR_LIGHT_BLUE}, ${COLOR_PRIMARY_BLUE})` }}
                             />
                             <div className={styles.labelList}>
-                                <NumberOutput value={0} />
-                                <NumberOutput
+                                <NumberDisplay value={0} />
+                                <NumberDisplay
                                     value={maxPopulation}
                                     compact
                                     maximumFractionDigits={0}
@@ -315,7 +315,7 @@ function PopulationMap(props: Props) {
                 />
             )}
             footerActions={(
-                <TextOutput
+                <DataDisplay
                     label={strings.populationMapSource}
                     value={(
                         <Link
@@ -392,13 +392,13 @@ function PopulationMap(props: Props) {
                         coordinates={clickedPointProperties.lngLat}
                         heading={clickedPointProperties.feature.properties.name}
                     >
-                        <TextOutput
+                        <DataDisplay
                             label={strings.populationPopupYearLabel}
                             value={selectedDistrict.year}
                         />
-                        <TextOutput
+                        <DataDisplay
                             value={(
-                                <NumberOutput
+                                <NumberDisplay
                                     value={selectedDistrict.population}
                                 />
                             )}
diff --git a/app/src/views/CountryProfileOverview/index.tsx b/app/src/views/CountryProfileOverview/index.tsx
index 211e614b7c..b8e7e602e7 100644
--- a/app/src/views/CountryProfileOverview/index.tsx
+++ b/app/src/views/CountryProfileOverview/index.tsx
@@ -1,10 +1,10 @@
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
+    DataDisplay,
     LegendItem,
     ListView,
     Message,
-    TextOutput,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -88,22 +88,22 @@ function SeasonalCalendarEvent(props: SeasonalCalendarEventProps) {
                 title={data.label}
                 description={(
                     <>
-                        <TextOutput
+                        <DataDisplay
                             strongLabel
                             label={strings.seasonalCalendarTooltipEventTypeLabel}
                             value={event_type}
                         />
-                        <TextOutput
+                        <DataDisplay
                             strongLabel
                             label={strings.seasonalCalendarTooltipEventLabel}
                             value={data.event?.join(', ')}
                         />
-                        <TextOutput
+                        <DataDisplay
                             strongLabel
                             label={strings.seasonalCalendarTooltipMonthsLabel}
                             value={data.month?.join(', ')}
                         />
-                        <TextOutput
+                        <DataDisplay
                             strongLabel
                             label={strings.seasonalCalendarTooltipSourceLabel}
                             value={data.source}
@@ -231,7 +231,7 @@ export function Component() {
                     heading={strings.countryIndicatorsHeading}
                     withHeaderBorder
                     footerActions={(
-                        <TextOutput
+                        <DataDisplay
                             label={strings.sources}
                             value={joinList([
                                 <Link
@@ -273,13 +273,13 @@ export function Component() {
                         numPreferredGridColumns={3}
                         withSpacingOpticalCorrection
                     >
-                        <TextOutput
+                        <DataDisplay
                             label={strings.countryIndicatorsPopulationLabel}
                             value={databankResponse?.world_bank_population}
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.countryIndicatorsPopulationUnder18Label}
                             suffix=" %"
                             maximumFractionDigits={2}
@@ -287,14 +287,14 @@ export function Component() {
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.countryIndicatorsUrbanPopulationLabel}
                             suffix=" %"
                             value={databankResponse?.world_bank_urban_population_percentage}
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.countryIndicatorsGDPLabel}
                             prefix="$"
                             maximumFractionDigits={0}
@@ -302,7 +302,7 @@ export function Component() {
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.countryIndicatorsCapitaLabel}
                             prefix="$"
                             maximumFractionDigits={0}
@@ -310,7 +310,7 @@ export function Component() {
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.countryIndicatorsPovertyLabel}
                             suffix=" %"
                             maximumFractionDigits={2}
@@ -318,13 +318,13 @@ export function Component() {
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.countryIndicatorsLifeExpectancyLabel}
                             value={databankResponse?.world_bank_life_expectancy}
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.countryIndicatorsLiteracyLabel}
                             suffix=" %"
                             maximumFractionDigits={2}
@@ -332,7 +332,7 @@ export function Component() {
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.countryIndicatorsGenderInequalityIndexLabel}
                             value={databankResponse?.hdr_gii}
                             valueType="number"
@@ -361,7 +361,7 @@ export function Component() {
                 <Container
                     heading={strings.seasonalCalendarHeading}
                     footerActions={(
-                        <TextOutput
+                        <DataDisplay
                             label={strings.source}
                             value={(
                                 <Link
diff --git a/app/src/views/CountryProfilePreviousEvents/CountryHistoricalKeyFigures/index.tsx b/app/src/views/CountryProfilePreviousEvents/CountryHistoricalKeyFigures/index.tsx
index 298ac537be..90955074c9 100644
--- a/app/src/views/CountryProfilePreviousEvents/CountryHistoricalKeyFigures/index.tsx
+++ b/app/src/views/CountryProfilePreviousEvents/CountryHistoricalKeyFigures/index.tsx
@@ -6,9 +6,9 @@ import {
     TargetedPopulationIcon,
 } from '@ifrc-go/icons';
 import {
-    InfoPopup,
-    KeyFigureView,
+    KeyFigureCard,
     ListView,
+    MoreInfo,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { getPercentage } from '@ifrc-go/ui/utils';
@@ -37,63 +37,61 @@ function CountryHistoricalKeyFigures(props: Props) {
             numPreferredGridColumns={5}
             className={className}
         >
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<DrefIcon />}
                 value={data.active_drefs}
                 valueType="number"
                 info={(
-                    <InfoPopup
+                    <MoreInfo
                         title={strings.keyFiguresDrefTitle}
-                        description={strings.keyFiguresDref}
-                    />
+                    >
+                        {strings.keyFiguresDref}
+                    </MoreInfo>
                 )}
                 label={strings.countryHistoricalDREFOperations}
-                withShadow
+                boxShadow="md"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<AppealsIcon />}
                 value={data.active_appeals}
                 valueType="number"
                 info={(
-                    <InfoPopup
+                    <MoreInfo
                         title={strings.keyFiguresEmergencyAppealTitle}
-                        description={
-                            strings.countryHistoricalFigureEmergencyAppealDescription
-                        }
-                    />
+                    >
+                        {strings.countryHistoricalFigureEmergencyAppealDescription}
+                    </MoreInfo>
                 )}
                 label={strings.keyFiguresEmergencyAppeals}
-                withShadow
+                boxShadow="md"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<TargetedPopulationIcon />}
                 value={data.target_population}
                 valueType="number"
-                valueOptions={{ compact: true }}
+                compact
                 label={strings.keyFiguresTargetPopulation}
-                withShadow
+                boxShadow="md"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<FundingIcon />}
                 value={data.amount_requested_dref_included}
                 valueType="number"
-                valueOptions={{ compact: true }}
+                compact
                 label={strings.keyFiguresFundingRequirements}
-                withShadow
+                boxShadow="md"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<FundingCoverageIcon />}
                 value={getPercentage(
                     data.amount_funded_dref_included,
                     data.amount_requested_dref_included,
                 )}
                 valueType="number"
-                valueOptions={{
-                    suffix: '%',
-                    compact: true,
-                }}
+                suffix="%"
+                compact
                 label={strings.keyFiguresAppealsFundingCoverage}
-                withShadow
+                boxShadow="md"
             />
         </ListView>
     );
diff --git a/app/src/views/CountryProfilePreviousEvents/EmergenciesOverMonth/index.tsx b/app/src/views/CountryProfilePreviousEvents/EmergenciesOverMonth/index.tsx
index 2591385943..a9592e36f6 100644
--- a/app/src/views/CountryProfilePreviousEvents/EmergenciesOverMonth/index.tsx
+++ b/app/src/views/CountryProfilePreviousEvents/EmergenciesOverMonth/index.tsx
@@ -2,8 +2,8 @@ import {
     ChartAxes,
     ChartContainer,
     ChartPoint,
-    DateOutput,
-    TextOutput,
+    DataDisplay,
+    DateDisplay,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -74,8 +74,8 @@ function EmergenciesOverMonth(props: Props) {
                             title={dataPoint.originalData.disaster_name}
                             description={(
                                 <>
-                                    <DateOutput value={dataPoint.originalData.date} />
-                                    <TextOutput
+                                    <DateDisplay value={dataPoint.originalData.date} />
+                                    <DataDisplay
                                         label={strings.emergenciesOverMonthTargetedPopulation}
                                         value={dataPoint.originalData.targeted_population}
                                         valueType="number"
diff --git a/app/src/views/CountryProfilePreviousEvents/PastEventsChart/index.tsx b/app/src/views/CountryProfilePreviousEvents/PastEventsChart/index.tsx
index b280b8c157..1140c7fcf7 100644
--- a/app/src/views/CountryProfilePreviousEvents/PastEventsChart/index.tsx
+++ b/app/src/views/CountryProfilePreviousEvents/PastEventsChart/index.tsx
@@ -7,9 +7,9 @@ import {
     ChartContainer,
     ChartPoint,
     Container,
-    DateOutput,
+    DataDisplay,
+    DateDisplay,
     SelectInput,
-    TextOutput,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -199,21 +199,21 @@ function PastEventsChart(props: Props) {
                                 title={chartPoint.originalData.disaster_name}
                                 description={(
                                     <>
-                                        <DateOutput
+                                        <DateDisplay
                                             value={chartPoint.originalData.date}
                                             format="yyyy MMM"
                                         />
-                                        <TextOutput
+                                        <DataDisplay
                                             label={strings.pastEventsTargetedPopulation}
                                             value={chartPoint.originalData.targeted_population}
                                             valueType="number"
                                         />
-                                        <TextOutput
+                                        <DataDisplay
                                             label={strings.pastEventsAmountRequested}
                                             value={chartPoint.originalData.amount_requested}
                                             valueType="number"
                                         />
-                                        <TextOutput
+                                        <DataDisplay
                                             label={strings.pastEventsAmountFunded}
                                             value={getPercentage(
                                                 chartPoint.originalData.amount_funded,
diff --git a/app/src/views/CountryProfileRiskWatch/CountryRiskSourcesOutput/index.tsx b/app/src/views/CountryProfileRiskWatch/CountryRiskSourcesOutput/index.tsx
index 80bd0bebfc..89c390ee77 100644
--- a/app/src/views/CountryProfileRiskWatch/CountryRiskSourcesOutput/index.tsx
+++ b/app/src/views/CountryProfileRiskWatch/CountryRiskSourcesOutput/index.tsx
@@ -2,7 +2,7 @@ import {
     Fragment,
     useMemo,
 } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -44,7 +44,7 @@ function CountryRiskSourcesOutput() {
     );
 
     return (
-        <TextOutput
+        <DataDisplay
             label={strings.source}
             value={
                 riskByMonthSources.map((source, i) => (
diff --git a/app/src/views/CountryProfileRiskWatch/PossibleEarlyActionTable/index.tsx b/app/src/views/CountryProfileRiskWatch/PossibleEarlyActionTable/index.tsx
index fa08664953..f23ce6a153 100644
--- a/app/src/views/CountryProfileRiskWatch/PossibleEarlyActionTable/index.tsx
+++ b/app/src/views/CountryProfileRiskWatch/PossibleEarlyActionTable/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     SelectInput,
     Table,
 } from '@ifrc-go/ui';
@@ -183,7 +183,7 @@ function PossibleEarlyActionTable(props: Props) {
                 </>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={possibleEarlyActionResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/CountryProfileRiskWatch/ReturnPeriodTable/index.tsx b/app/src/views/CountryProfileRiskWatch/ReturnPeriodTable/index.tsx
index 5f4a3b38b0..08ffc63da3 100644
--- a/app/src/views/CountryProfileRiskWatch/ReturnPeriodTable/index.tsx
+++ b/app/src/views/CountryProfileRiskWatch/ReturnPeriodTable/index.tsx
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import {
     Container,
+    DataDisplay,
     SelectInput,
     Table,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -191,7 +191,7 @@ function ReturnPeriodTable(props: Props) {
             heading={strings.returnPeriodTableHeading}
             withHeaderBorder
             footerActions={(
-                <TextOutput
+                <DataDisplay
                     label={strings.returnPeriodSource}
                     value={strings.returnPeriodIfrcMontandon}
                     strongValue
diff --git a/app/src/views/CountryProfileRiskWatch/RiskBarChart/CombinedChart/index.tsx b/app/src/views/CountryProfileRiskWatch/RiskBarChart/CombinedChart/index.tsx
index 0c0eed88b6..d1dca681ca 100644
--- a/app/src/views/CountryProfileRiskWatch/RiskBarChart/CombinedChart/index.tsx
+++ b/app/src/views/CountryProfileRiskWatch/RiskBarChart/CombinedChart/index.tsx
@@ -6,8 +6,8 @@ import {
 import {
     ChartAxes,
     ChartContainer,
-    NumberOutput,
-    TextOutput,
+    DataDisplay,
+    NumberDisplay,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -224,7 +224,7 @@ function CombinedChart(props: Props) {
             }
 
             return (
-                <NumberOutput
+                <NumberDisplay
                     value={value}
                     compact
                     maximumFractionDigits={0}
@@ -304,13 +304,13 @@ function CombinedChart(props: Props) {
                                                 <>
                                                     {datum.originalData.date.toLocaleDateString('default', { month: 'long' })}
                                                     {selectedRiskMetricDetail.key === 'riskScore' ? (
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={strings.riskScoreLabel}
                                                             value={riskCategoryToLabelMap[value]}
                                                             strongValue
                                                         />
                                                     ) : (
-                                                        <TextOutput
+                                                        <DataDisplay
                                                             label={selectedRiskMetricDetail.label}
                                                             value={value}
                                                             valueType="number"
diff --git a/app/src/views/CountryProfileRiskWatch/RiskBarChart/FoodInsecurityChart/FiChartPoint/index.tsx b/app/src/views/CountryProfileRiskWatch/RiskBarChart/FoodInsecurityChart/FiChartPoint/index.tsx
index aeb1e32e0c..af05124961 100644
--- a/app/src/views/CountryProfileRiskWatch/RiskBarChart/FoodInsecurityChart/FiChartPoint/index.tsx
+++ b/app/src/views/CountryProfileRiskWatch/RiskBarChart/FoodInsecurityChart/FiChartPoint/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import {
     ChartPoint,
-    TextOutput,
+    DataDisplay,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -77,13 +77,13 @@ function FiChartPoint(props: Props) {
                 description={(
                     <>
                         {isDefined(originalData.analysis_date) && (
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.foodInsecurityAnalysisDate}
                                 value={originalData.analysis_date}
                                 valueType="date"
                             />
                         )}
-                        <TextOutput
+                        <DataDisplay
                             label={strings.foodInsecurityPeopleExposed}
                             value={originalData.total_displacement}
                             valueType="number"
diff --git a/app/src/views/CountryProfileRiskWatch/RiskBarChart/WildfireChart/index.tsx b/app/src/views/CountryProfileRiskWatch/RiskBarChart/WildfireChart/index.tsx
index 730d51fbc2..f84e8eab0c 100644
--- a/app/src/views/CountryProfileRiskWatch/RiskBarChart/WildfireChart/index.tsx
+++ b/app/src/views/CountryProfileRiskWatch/RiskBarChart/WildfireChart/index.tsx
@@ -7,7 +7,7 @@ import {
     ChartAxes,
     ChartContainer,
     ChartPoint,
-    TextOutput,
+    DataDisplay,
     Tooltip,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -149,7 +149,7 @@ function WildfireChart(props: Props) {
                     title={date.toLocaleString(navigator.language, { month: 'long' })}
                     description={(
                         <>
-                            <TextOutput
+                            <DataDisplay
                                 value={resolveToString(
                                     strings.minMaxValue,
                                     {
@@ -160,13 +160,13 @@ function WildfireChart(props: Props) {
                                 strongValue
                                 label={resolveToString(strings.minMax, { currentYear })}
                             />
-                            <TextOutput
+                            <DataDisplay
                                 value={monthData.average}
                                 label={resolveToString(strings.average, { currentYear })}
                                 valueType="number"
                                 strongValue
                             />
-                            <TextOutput
+                            <DataDisplay
                                 value={monthData.current}
                                 label={resolveToString(strings.year, { currentYear })}
                                 valueType="number"
diff --git a/app/src/views/CountryProfileRiskWatch/index.tsx b/app/src/views/CountryProfileRiskWatch/index.tsx
index 3fcb84b094..a71390773c 100644
--- a/app/src/views/CountryProfileRiskWatch/index.tsx
+++ b/app/src/views/CountryProfileRiskWatch/index.tsx
@@ -190,9 +190,9 @@ export function Component() {
                     </Link>
                 )}
                 spacing="lg"
-                withShadow
+                boxShadow="md"
                 withPadding
-                withBackground
+                backgroundColor="foreground"
             >
                 {strings.eapDescription}
             </Container>
diff --git a/app/src/views/DrefApplicationExport/PgaExport/index.tsx b/app/src/views/DrefApplicationExport/PgaExport/index.tsx
index 8e3226361f..9b3a9c0b0c 100644
--- a/app/src/views/DrefApplicationExport/PgaExport/index.tsx
+++ b/app/src/views/DrefApplicationExport/PgaExport/index.tsx
@@ -1,11 +1,11 @@
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     Container,
+    DataDisplay,
+    type DataDisplayProps,
     DescriptionText,
     Heading,
     Signature,
-    TextOutput,
-    type TextOutputProps,
 } from '@ifrc-go/ui/printable';
 
 import i18n from './i18n.json';
@@ -13,13 +13,13 @@ import styles from './styles.module.css';
 
 const DREF_IMMINENT_OBLIGATION_EXACT_AMOUNT = 75000;
 
-export function BlockTextOutput(props: TextOutputProps
-    & { variant?: never, withoutLabelColon?: never }) {
+export function BlockTextOutput(props: DataDisplayProps
+    & { styleVariant?: never, withoutLabelColon?: never }) {
     return (
-        <TextOutput
+        <DataDisplay
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            variant="contents"
+            styleVariant="contents"
             withoutLabelColon
         />
     );
@@ -159,14 +159,14 @@ function PgaExport() {
                 headingLevel={4}
             >
                 <div className={styles.drefSigned}>
-                    <TextOutput
+                    <DataDisplay
                         className={styles.drefTable}
                         label={strings.imminentDrefSigned}
                         invalidText={null}
                         strongLabel
                         withoutLabelColon
                     />
-                    <TextOutput
+                    <DataDisplay
                         className={styles.drefTable}
                         label={strings.imminentIFRCSigned}
                         invalidText={null}
diff --git a/app/src/views/DrefApplicationExport/index.tsx b/app/src/views/DrefApplicationExport/index.tsx
index 14e3951769..ed490b60e7 100644
--- a/app/src/views/DrefApplicationExport/index.tsx
+++ b/app/src/views/DrefApplicationExport/index.tsx
@@ -5,16 +5,16 @@ import {
 } from 'react';
 import { useParams } from 'react-router-dom';
 import {
-    DateOutput,
-    NumberOutput,
+    DateDisplay,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     Container,
+    DataDisplay,
     DescriptionText,
     Heading,
     Image,
-    TextOutput,
 } from '@ifrc-go/ui/printable';
 import {
     DEFAULT_PRINT_DATE_FORMAT,
@@ -680,14 +680,14 @@ export function Component() {
                     </Container>
                 )}
             <Container childrenContainerClassName={styles.metaSection}>
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.appealLabel}
                     value={appeal_code}
                     strongValue
                 />
                 {type_of_dref === TYPE_IMMINENT && is_dref_imminent_v2 && (
-                    <TextOutput
+                    <DataDisplay
                         className={styles.metaItem}
                         label={strings.drefAllocatedLabel}
                         value={drefAllocated?.total_cost}
@@ -696,13 +696,13 @@ export function Component() {
                         strongValue
                     />
                 )}
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.hazardLabel}
                     value={disaster_type_details?.name}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.countryLabel}
                     value={country_details?.name}
@@ -710,21 +710,21 @@ export function Component() {
                 />
                 {type_of_dref === TYPE_IMMINENT && is_dref_imminent_v2 && (
                     <>
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.drefFormRiskPeopleLabel}
                             value={num_affected}
                             strongValue
                             valueType="number"
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.operationStartDateLabel}
                             value={date_of_approval}
                             valueType="date"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.operationEndDateLabel}
                             value={end_date}
@@ -736,13 +736,13 @@ export function Component() {
                 )}
                 {(type_of_dref !== TYPE_IMMINENT || !is_dref_imminent_v2) && (
                     <>
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.typeOfDrefLabel}
                             value={type_of_dref_display}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.crisisCategoryLabel}
                             value={disaster_category_display}
@@ -755,7 +755,7 @@ export function Component() {
                         />
                     </>
                 )}
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.eventOnsetLabel}
                     value={type_of_onset_display}
@@ -763,13 +763,13 @@ export function Component() {
                 />
                 {type_of_dref === DREF_TYPE_IMMINENT && is_dref_imminent_v2 && (
                     <>
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.drefApplicationExportForecastedLabel}
                             value={hazard_date}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.operationTimeframeLabel}
                             value={operation_timeframe_imminent}
@@ -782,7 +782,7 @@ export function Component() {
                 )}
                 {(type_of_dref !== DREF_TYPE_IMMINENT || !is_dref_imminent_v2) && (
                     <>
-                        <TextOutput
+                        <DataDisplay
                             className={styles.budget}
                             label={strings.drefAllocationLabel}
                             value={amount_requested}
@@ -790,13 +790,13 @@ export function Component() {
                             prefix={strings.chfPrefix}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.glideNumberLabel}
                             value={glide_code}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={type_of_dref === DREF_TYPE_RESPONSE
                                 ? strings.peopleAffectedLabel
@@ -806,7 +806,7 @@ export function Component() {
                             suffix={strings.peopleSuffix}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.budget}
                             label={strings.peopleTargetedLabel}
                             value={total_targeted_population}
@@ -814,14 +814,14 @@ export function Component() {
                             valueType="number"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.operationStartDateLabel}
                             value={date_of_approval}
                             valueType="date"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.operationTimeframeLabel}
                             value={operation_timeframe}
@@ -829,14 +829,14 @@ export function Component() {
                             suffix={strings.monthsSuffix}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.operationEndDateLabel}
                             value={end_date}
                             valueType="date"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             label={strings.drefPublishedLabel}
                             value={publishing_date}
@@ -845,7 +845,7 @@ export function Component() {
                         />
                     </>
                 )}
-                <TextOutput
+                <DataDisplay
                     className={styles.targetedAreas}
                     label={strings.targetedAreasLabel}
                     value={riskRegions}
@@ -900,7 +900,7 @@ export function Component() {
                                 ? strings.dateWhenTriggerWasMetHeading
                                 : strings.dateOfEventSlowHeading}
                         >
-                            <DateOutput
+                            <DateDisplay
                                 value={event_date}
                                 format={DEFAULT_PRINT_DATE_FORMAT}
                             />
@@ -1042,7 +1042,7 @@ export function Component() {
                         value={ns_request_text}
                         valueType="text"
                     />
-                    <TextOutput
+                    <DataDisplay
                         className={styles.recurrentEventJustification}
                         label={strings.recurrentEventJustificationLabel}
                         value={dref_recurrent_text}
@@ -1050,7 +1050,7 @@ export function Component() {
                         valueType="text"
                     />
                     {lessonsLearnedDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.lessonsLearned}
                             label={strings.lessonsLearnedLabel}
                             value={lessons_learned}
@@ -1065,13 +1065,13 @@ export function Component() {
                         strongValue
                     />
                     {childSafeguardingRiskLevelDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.childSafeguardingRiskLevel}
                             label={strings.childSafeguardingRiskLevelLabel}
                             value={child_safeguarding_risk_level}
                             valueType="text"
                             strongValue
-                            variant="contents"
+                            styleVariant="contents"
                         />
                     )}
                 </Container>
@@ -1087,7 +1087,7 @@ export function Component() {
                                 ? strings.nationalSocietyActionsHeading
                                 : strings.drefFormNsResponseStarted}
                         >
-                            <DateOutput
+                            <DateDisplay
                                 value={ns_respond_date}
                                 format={DEFAULT_PRINT_DATE_FORMAT}
                             />
@@ -1176,7 +1176,7 @@ export function Component() {
                         />
                     )}
                     {majorCoordinationMechanismDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.otherActionsMajorCoordinationMechanism}
                             label={strings.majorCoordinationMechanismLabel}
                             value={major_coordination_mechanism}
@@ -1426,7 +1426,7 @@ export function Component() {
                         </>
                     )}
                     {riskSecurityConcernDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.riskSecurityConcern}
                             label={strings.safetyConcernHeading}
                             value={risk_security_concern}
@@ -1460,14 +1460,14 @@ export function Component() {
                                 {plannedIntervention.title_display}
                             </Heading>
                             <Container>
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.budgetLabel}
                                     value={plannedIntervention.budget}
                                     valueType="number"
                                     prefix={strings.chfPrefix}
                                     strongLabel
                                 />
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.targetedPersonsLabel}
                                     value={plannedIntervention.person_targeted}
                                     valueType="number"
@@ -1632,7 +1632,7 @@ export function Component() {
                                                     className={styles.budget}
                                                     style={{ gridRow: `span ${action.activities.length}` }}
                                                 >
-                                                    <NumberOutput
+                                                    <NumberDisplay
                                                         value={action.total_budget}
                                                         prefix={strings.chfPrefix}
                                                     />
@@ -1647,7 +1647,7 @@ export function Component() {
                     <div className={styles.costLabel}>
                         {strings.priorityActionsSubTotal}
                     </div>
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.costValue}
                         value={sub_total_cost}
                         prefix={strings.chfPrefix}
@@ -1657,7 +1657,7 @@ export function Component() {
                             <div className={styles.costLabel}>
                                 {strings.priorityActionsSurgeDeployment}
                             </div>
-                            <NumberOutput
+                            <NumberDisplay
                                 className={styles.costValue}
                                 value={surge_deployment_cost}
                                 prefix={strings.chfPrefix}
@@ -1667,7 +1667,7 @@ export function Component() {
                     <div className={styles.costLabel}>
                         {strings.priorityActionsIndirectCost}
                     </div>
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.costValue}
                         value={indirect_cost}
                         prefix={strings.chfPrefix}
@@ -1675,7 +1675,7 @@ export function Component() {
                     <div className={styles.costLabel}>
                         {strings.priorityActionsTotal}
                     </div>
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.costValue}
                         value={total_cost}
                         prefix={strings.chfPrefix}
@@ -1712,7 +1712,7 @@ export function Component() {
                     </Container>
                     <Container childrenContainerClassName={styles.contactList}>
                         {nsContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nsContactHeading}
                                 value={nsContactText}
@@ -1720,7 +1720,7 @@ export function Component() {
                             />
                         )}
                         {appealManagerContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.appealManagerContactHeading}
                                 value={appealManagerContactText}
@@ -1728,7 +1728,7 @@ export function Component() {
                             />
                         )}
                         {projectManagerContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.projectManagerContactHeading}
                                 value={projectManagerContactText}
@@ -1736,7 +1736,7 @@ export function Component() {
                             />
                         )}
                         {focalPointContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.focalPointContactHeading}
                                 value={focalPointContactText}
@@ -1744,7 +1744,7 @@ export function Component() {
                             />
                         )}
                         {mediaContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.mediaContactHeading}
                                 value={mediaContactText}
@@ -1752,7 +1752,7 @@ export function Component() {
                             />
                         )}
                         {nationalSocietyIntegrityContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nationalSocietyIntegrityHeading}
                                 value={nationalSocietyIntegrityContactText}
@@ -1760,7 +1760,7 @@ export function Component() {
                             />
                         )}
                         {nationalSocietyHotlineDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nationalSocietyHotlineHeading}
                                 value={national_society_hotline_phone_number}
diff --git a/app/src/views/DrefApplicationForm/Actions/NSActionInput/index.tsx b/app/src/views/DrefApplicationForm/Actions/NSActionInput/index.tsx
index 238f45e54c..9f84773599 100644
--- a/app/src/views/DrefApplicationForm/Actions/NSActionInput/index.tsx
+++ b/app/src/views/DrefApplicationForm/Actions/NSActionInput/index.tsx
@@ -73,7 +73,7 @@ function NsActionInput(props: Props) {
                     <Button
                         name={index}
                         onClick={onRemove}
-                        styleVariant="action"
+                        variant="tertiary"
                         title={strings.drefApplicationNSActionRemoveNeed}
                         disabled={disabled || readOnly}
                     >
diff --git a/app/src/views/DrefApplicationForm/Actions/NeedInput/index.tsx b/app/src/views/DrefApplicationForm/Actions/NeedInput/index.tsx
index 09e5e5b38a..9d2b425fc4 100644
--- a/app/src/views/DrefApplicationForm/Actions/NeedInput/index.tsx
+++ b/app/src/views/DrefApplicationForm/Actions/NeedInput/index.tsx
@@ -72,7 +72,7 @@ function NeedInput(props: Props) {
                     <Button
                         name={index}
                         onClick={onRemove}
-                        styleVariant="action"
+                        variant="tertiary"
                         title={strings.drefApplicationRemoveNeed}
                         disabled={disabled || readOnly}
                     >
diff --git a/app/src/views/DrefApplicationForm/Actions/index.tsx b/app/src/views/DrefApplicationForm/Actions/index.tsx
index ee8039ca64..bdec4bfda5 100644
--- a/app/src/views/DrefApplicationForm/Actions/index.tsx
+++ b/app/src/views/DrefApplicationForm/Actions/index.tsx
@@ -256,7 +256,7 @@ function Actions(props: Props) {
                         </InlineLayout>
                     </InputSection>
                     <ListView
-                        withBackground
+                        backgroundColor="foreground"
                         withPadding
                     >
                         <NonFieldError
diff --git a/app/src/views/DrefApplicationForm/DrefImportButton/DrefImportModal/index.tsx b/app/src/views/DrefApplicationForm/DrefImportButton/DrefImportModal/index.tsx
index 095ccc5a70..2a6eeb2f64 100644
--- a/app/src/views/DrefApplicationForm/DrefImportButton/DrefImportModal/index.tsx
+++ b/app/src/views/DrefApplicationForm/DrefImportButton/DrefImportModal/index.tsx
@@ -4,9 +4,9 @@ import {
 } from 'react';
 import { DrefTwoIcon } from '@ifrc-go/icons';
 import {
+    Dialog,
+    FileInputButton,
     ListView,
-    Modal,
-    RawFileInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { encodeDate } from '@ifrc-go/ui/utils';
@@ -188,14 +188,14 @@ function DrefImportModal(props: Props) {
     ]);
 
     return (
-        <Modal
+        <Dialog
             heading={strings.drefImportApplication}
             onClose={onClose}
             className={styles.importDrefApplicationModal}
         >
             <ListView layout="block">
                 <DrefTwoIcon className={styles.icon} />
-                <RawFileInput
+                <FileInputButton
                     name={undefined}
                     accept=".xlsx"
                     onChange={handleChange}
@@ -203,12 +203,12 @@ function DrefImportModal(props: Props) {
                     disabled={isNotDefined(drefFormSchema) || importPending}
                 >
                     {strings.drefImportSelectFile}
-                </RawFileInput>
+                </FileInputButton>
                 <div>
                     {strings.drefImportTemplate}
                 </div>
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/DrefApplicationForm/ObsoletePayloadModal/index.tsx b/app/src/views/DrefApplicationForm/ObsoletePayloadModal/index.tsx
index a1a00bc56c..1edc6b636e 100644
--- a/app/src/views/DrefApplicationForm/ObsoletePayloadModal/index.tsx
+++ b/app/src/views/DrefApplicationForm/ObsoletePayloadModal/index.tsx
@@ -1,7 +1,7 @@
 import {
     BlockLoading,
     Button,
-    Modal,
+    Dialog,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -42,7 +42,7 @@ function ObsoletePayloadResolutionModal(props: Props) {
     });
 
     return (
-        <Modal
+        <Dialog
             heading={strings.drefChangesConflictWhileSaving}
             headingLevel={3}
             className={styles.obsoletePayloadResolutionModal}
@@ -87,7 +87,7 @@ function ObsoletePayloadResolutionModal(props: Props) {
                     </div>
                 </>
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/DrefApplicationForm/Operation/InterventionInput/IndicatorInput/index.tsx b/app/src/views/DrefApplicationForm/Operation/InterventionInput/IndicatorInput/index.tsx
index 25288f7156..304938dcfc 100644
--- a/app/src/views/DrefApplicationForm/Operation/InterventionInput/IndicatorInput/index.tsx
+++ b/app/src/views/DrefApplicationForm/Operation/InterventionInput/IndicatorInput/index.tsx
@@ -60,7 +60,7 @@ function IndicatorInput(props: Props) {
                 <Button
                     name={index}
                     onClick={onRemove}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.drefIndicatorRemoveButtonLabel}
                     disabled={disabled || readOnly}
                 >
diff --git a/app/src/views/DrefApplicationForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx b/app/src/views/DrefApplicationForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx
index 795e27dd63..4a3e7fbf4f 100644
--- a/app/src/views/DrefApplicationForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx
+++ b/app/src/views/DrefApplicationForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx
@@ -69,7 +69,7 @@ function ActivitiesInput(props: Props) {
     return (
         <ListView
             layout="block"
-            withDarkBackground
+            backgroundColor="background"
             withPadding
         >
             <InlineLayout
diff --git a/app/src/views/DrefApplicationForm/Operation/RiskSecurityInput/index.tsx b/app/src/views/DrefApplicationForm/Operation/RiskSecurityInput/index.tsx
index 9ca5bccce9..bc0300a3fa 100644
--- a/app/src/views/DrefApplicationForm/Operation/RiskSecurityInput/index.tsx
+++ b/app/src/views/DrefApplicationForm/Operation/RiskSecurityInput/index.tsx
@@ -85,7 +85,7 @@ function RiskSecurityInput(props: Props) {
                 className={styles.removeButton}
                 name={index}
                 onClick={onRemove}
-                styleVariant="action"
+                variant="tertiary"
                 disabled={disabled || readOnly}
                 title={strings.drefFormDeleteRisk}
             >
diff --git a/app/src/views/DrefApplicationForm/Operation/index.tsx b/app/src/views/DrefApplicationForm/Operation/index.tsx
index 3542b8165f..813f98e388 100644
--- a/app/src/views/DrefApplicationForm/Operation/index.tsx
+++ b/app/src/views/DrefApplicationForm/Operation/index.tsx
@@ -798,14 +798,14 @@ function Operation(props: Props) {
                         </InputSection>
                         <ListView
                             withPadding
-                            withBackground
+                            backgroundColor="foreground"
                             withSpacingOpticalCorrection
                         >
                             <NonFieldError error={getErrorObject(error?.planned_interventions)} />
                         </ListView>
                         <ListView
                             withPadding
-                            withBackground
+                            backgroundColor="foreground"
                             withSpacingOpticalCorrection
                         >
                             <Description>
diff --git a/app/src/views/DrefFinalReportExport/index.tsx b/app/src/views/DrefFinalReportExport/index.tsx
index c77d7fc3f4..6a61ff27a3 100644
--- a/app/src/views/DrefFinalReportExport/index.tsx
+++ b/app/src/views/DrefFinalReportExport/index.tsx
@@ -5,17 +5,17 @@ import {
 } from 'react';
 import { useParams } from 'react-router-dom';
 import {
-    DateOutput,
-    NumberOutput,
+    DateDisplay,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     Container,
+    DataDisplay,
+    type DataDisplayProps,
     DescriptionText,
     Heading,
     Image,
-    TextOutput,
-    type TextOutputProps,
 } from '@ifrc-go/ui/printable';
 import {
     DEFAULT_PRINT_DATE_FORMAT,
@@ -60,12 +60,13 @@ import {
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-function BlockTextOutput(props: TextOutputProps & { variant?: never, withoutLabelColon?: never }) {
+function BlockTextOutput(props: DataDisplayProps
+    & { styleVariant?: never, withoutLabelColon?: never }) {
     return (
-        <TextOutput
+        <DataDisplay
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            variant="contents"
+            styleVariant="contents"
             withoutLabelColon
         />
     );
@@ -421,13 +422,13 @@ export function Component() {
                     </Container>
                 )}
             <Container childrenContainerClassName={styles.metaSection}>
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.appealLabel}
                     value={drefResponse?.appeal_code}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.drefAllocationLabel}
                     value={drefResponse?.total_dref_allocation}
@@ -435,21 +436,21 @@ export function Component() {
                     prefix={strings.chfPrefix}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.hazardLabel}
                     value={drefResponse?.disaster_type_details?.name}
                     strongValue
                 />
                 {drefResponse?.type_of_dref === DREF_TYPE_IMMINENT ? (
-                    <TextOutput
+                    <DataDisplay
                         className={styles.metaItem}
                         label={strings.countryLabel}
                         value={drefResponse?.country_details.name}
                         strongValue
                     />
                 ) : (
-                    <TextOutput
+                    <DataDisplay
                         className={styles.metaItem}
                         label={strings.crisisCategoryLabel}
                         value={drefResponse?.disaster_category_display}
@@ -463,14 +464,14 @@ export function Component() {
                     />
                 )}
                 {drefResponse?.type_of_dref !== DREF_TYPE_IMMINENT && (
-                    <TextOutput
+                    <DataDisplay
                         className={styles.metaItem}
                         label={strings.glideNumberLabel}
                         value={drefResponse?.glide_code}
                         strongValue
                     />
                 )}
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={drefResponse?.type_of_dref === DREF_TYPE_RESPONSE
                         ? strings.peopleAffectedLabel
@@ -480,7 +481,7 @@ export function Component() {
                     suffix={strings.peopleSuffix}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.peopleTargetedLabel}
                     value={drefResponse?.total_targeted_population}
@@ -488,7 +489,7 @@ export function Component() {
                     valueType="number"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.peopleAssistedLabel}
                     value={drefResponse?.num_assisted}
@@ -496,20 +497,20 @@ export function Component() {
                     valueType="number"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.eventOnsetLabel}
                     value={drefResponse?.type_of_onset_display}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.operationStartDateLabel}
                     value={drefResponse?.operation_start_date}
                     valueType="date"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.operationEndDateLabel}
                     value={drefResponse?.operation_end_date}
@@ -517,7 +518,7 @@ export function Component() {
                     strongValue
                 />
                 {drefResponse?.type_of_dref === DREF_TYPE_IMMINENT ? (
-                    <TextOutput
+                    <DataDisplay
                         className={styles.metaItem}
                         label={strings.operationTimeframeLabel}
                         value={drefResponse?.total_operation_timeframe_imminent}
@@ -526,7 +527,7 @@ export function Component() {
                         strongValue
                     />
                 ) : (
-                    <TextOutput
+                    <DataDisplay
                         className={styles.metaItem}
                         label={strings.operationTimeframeLabel}
                         value={drefResponse?.total_operation_timeframe}
@@ -536,7 +537,7 @@ export function Component() {
                     />
                 )}
                 {drefResponse?.type_of_dref === DREF_TYPE_IMMINENT && (
-                    <TextOutput
+                    <DataDisplay
                         className={styles.metaItem}
                         label={strings.publicationDate}
                         value={drefResponse?.date_of_publication}
@@ -544,7 +545,7 @@ export function Component() {
                         strongValue
                     />
                 )}
-                <TextOutput
+                <DataDisplay
                     className={styles.targetedAreas}
                     label={strings.targetedAreasLabel}
                     value={drefResponse?.district_details?.map(
@@ -590,7 +591,7 @@ export function Component() {
                                 ? strings.dateWhenTriggerWasMetHeading
                                 : strings.dateOfEventSlowHeading}
                         >
-                            <DateOutput
+                            <DateDisplay
                                 value={drefResponse?.event_date}
                                 format={DEFAULT_PRINT_DATE_FORMAT}
                             />
@@ -723,7 +724,7 @@ export function Component() {
                                                     className={styles.budget}
                                                     style={{ gridRow: `span ${action.activities.length}` }}
                                                 >
-                                                    <NumberOutput
+                                                    <NumberDisplay
                                                         value={action.total_budget}
                                                         prefix={strings.chfPrefix}
                                                     />
@@ -734,7 +735,7 @@ export function Component() {
                                                     className={styles.budget}
                                                     style={{ gridRow: `span ${action.activities.length}` }}
                                                 >
-                                                    <NumberOutput
+                                                    <NumberDisplay
                                                         value={action.total_expenditure}
                                                         prefix={strings.chfPrefix}
                                                     />
@@ -749,12 +750,12 @@ export function Component() {
                     <div className={styles.costLabel}>
                         {strings.priorityActionsSubTotal}
                     </div>
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.costValue}
                         value={drefResponse?.sub_total_cost}
                         prefix={strings.chfPrefix}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.costValue}
                         value={drefResponse?.sub_total_expenditure_cost}
                         prefix={strings.chfPrefix}
@@ -764,12 +765,12 @@ export function Component() {
                             <div className={styles.costLabel}>
                                 {strings.priorityActionsSurgeDeployment}
                             </div>
-                            <NumberOutput
+                            <NumberDisplay
                                 className={styles.costValue}
                                 value={drefResponse.surge_deployment_cost}
                                 prefix={strings.chfPrefix}
                             />
-                            <NumberOutput
+                            <NumberDisplay
                                 className={styles.costValue}
                                 value={drefResponse.surge_deployment_expenditure_cost}
                                 prefix={strings.chfPrefix}
@@ -779,12 +780,12 @@ export function Component() {
                     <div className={styles.costLabel}>
                         {strings.priorityActionsIndirectCost}
                     </div>
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.costValue}
                         value={drefResponse?.indirect_cost}
                         prefix={strings.chfPrefix}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.costValue}
                         value={drefResponse?.indirect_expenditure_cost}
                         prefix={strings.chfPrefix}
@@ -792,12 +793,12 @@ export function Component() {
                     <div className={styles.costLabel}>
                         {strings.priorityActionsTotal}
                     </div>
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.costValue}
                         value={drefResponse?.total_cost}
                         prefix={strings.chfPrefix}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.costValue}
                         value={drefResponse?.total_expenditure_cost}
                         prefix={strings.chfPrefix}
@@ -893,7 +894,7 @@ export function Component() {
                         />
                     )}
                     {majorCoordinationMechanismDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.otherActionsMajorCoordinationMechanism}
                             label={strings.majorCoordinationMechanismLabel}
                             value={drefResponse?.major_coordination_mechanism}
@@ -1126,7 +1127,7 @@ export function Component() {
                         </>
                     )}
                     {riskSecurityConcernDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.riskSecurityConcern}
                             label={strings.safetyConcernHeading}
                             value={drefResponse?.risk_security_concern}
@@ -1161,32 +1162,32 @@ export function Component() {
                                     {plannedIntervention.title_display}
                                 </Heading>
                                 <Container>
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.budgetLabel}
                                         value={plannedIntervention.budget}
                                         valueType="number"
                                         prefix={strings.chfPrefix}
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.targetedPersonsLabel}
                                         value={plannedIntervention.person_targeted}
                                         valueType="number"
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.assistedPersonsLabel}
                                         value={plannedIntervention.person_assisted}
                                         valueType="number"
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.targetedMaleLabel}
                                         value={plannedIntervention.male}
                                         valueType="number"
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.targetedFemaleLabel}
                                         value={plannedIntervention.female}
                                         valueType="number"
@@ -1215,11 +1216,11 @@ export function Component() {
                                                 <div className={styles.title}>
                                                     {indicator.title}
                                                 </div>
-                                                <NumberOutput
+                                                <NumberDisplay
                                                     className={styles.target}
                                                     value={indicator.target}
                                                 />
-                                                <NumberOutput
+                                                <NumberDisplay
                                                     className={styles.actual}
                                                     value={indicator.actual}
                                                 />
@@ -1329,7 +1330,7 @@ export function Component() {
                     </Container>
                     <Container childrenContainerClassName={styles.contactList}>
                         {nsContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nsContactHeading}
                                 value={nsContactText}
@@ -1337,7 +1338,7 @@ export function Component() {
                             />
                         )}
                         {appealManagerContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.appealManagerContactHeading}
                                 value={appealManagerContactText}
@@ -1345,7 +1346,7 @@ export function Component() {
                             />
                         )}
                         {projectManagerContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.projectManagerContactHeading}
                                 value={projectManagerContactText}
@@ -1353,7 +1354,7 @@ export function Component() {
                             />
                         )}
                         {focalPointContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.focalPointContactHeading}
                                 value={focalPointContactText}
@@ -1361,7 +1362,7 @@ export function Component() {
                             />
                         )}
                         {mediaContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.mediaContactHeading}
                                 value={mediaContactText}
@@ -1369,7 +1370,7 @@ export function Component() {
                             />
                         )}
                         {nationalSocietyIntegrityContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nationalSocietyIntegrityHeading}
                                 value={nationalSocietyIntegrityContactText}
@@ -1377,7 +1378,7 @@ export function Component() {
                             />
                         )}
                         {nationalSocietyHotlineDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nationalSocietyHotlineHeading}
                                 value={drefResponse?.national_society_hotline_phone_number}
diff --git a/app/src/views/DrefFinalReportForm/Actions/NeedInput/index.tsx b/app/src/views/DrefFinalReportForm/Actions/NeedInput/index.tsx
index 61bcb879c0..3a13e9542e 100644
--- a/app/src/views/DrefFinalReportForm/Actions/NeedInput/index.tsx
+++ b/app/src/views/DrefFinalReportForm/Actions/NeedInput/index.tsx
@@ -72,7 +72,7 @@ function NeedInput(props: Props) {
                     <Button
                         name={index}
                         onClick={onRemove}
-                        styleVariant="action"
+                        variant="tertiary"
                         title={strings.drefFinalReportFormRemoveNeed}
                         disabled={disabled || readOnly}
                     >
diff --git a/app/src/views/DrefFinalReportForm/ObsoletePayloadModal/index.tsx b/app/src/views/DrefFinalReportForm/ObsoletePayloadModal/index.tsx
index 6bee828ab4..8dfd520bac 100644
--- a/app/src/views/DrefFinalReportForm/ObsoletePayloadModal/index.tsx
+++ b/app/src/views/DrefFinalReportForm/ObsoletePayloadModal/index.tsx
@@ -1,7 +1,7 @@
 import {
     BlockLoading,
     Button,
-    Modal,
+    Dialog,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -42,7 +42,7 @@ function ObsoletePayloadResolutionModal(props: Props) {
     });
 
     return (
-        <Modal
+        <Dialog
             heading={strings.drefChangesConflictWhileSaving}
             headingLevel={3}
             className={styles.obsoletePayloadResolutionModal}
@@ -87,7 +87,7 @@ function ObsoletePayloadResolutionModal(props: Props) {
                     </div>
                 </>
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/DrefFinalReportForm/Operation/InterventionInput/index.tsx b/app/src/views/DrefFinalReportForm/Operation/InterventionInput/index.tsx
index c706009634..b1dc80d846 100644
--- a/app/src/views/DrefFinalReportForm/Operation/InterventionInput/index.tsx
+++ b/app/src/views/DrefFinalReportForm/Operation/InterventionInput/index.tsx
@@ -140,7 +140,7 @@ function InterventionInput(props: Props) {
                 <Button
                     name={index}
                     onClick={onRemove}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.drefFormRemoveIntervention}
                     disabled={disabled || readOnly}
                     before={<DeleteBinTwoLineIcon />}
diff --git a/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx b/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx
index ccaabeff7c..93b03a22fa 100644
--- a/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx
+++ b/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx
@@ -69,7 +69,7 @@ function ActivitiesInput(props: Props) {
     return (
         <ListView
             layout="block"
-            withDarkBackground
+            backgroundColor="background"
             withPadding
         >
             <InlineLayout
diff --git a/app/src/views/DrefFinalReportForm/Operation/RiskSecurityInput/index.tsx b/app/src/views/DrefFinalReportForm/Operation/RiskSecurityInput/index.tsx
index 0c2943392a..03b5100d3b 100644
--- a/app/src/views/DrefFinalReportForm/Operation/RiskSecurityInput/index.tsx
+++ b/app/src/views/DrefFinalReportForm/Operation/RiskSecurityInput/index.tsx
@@ -85,7 +85,7 @@ function RiskSecurityInput(props: Props) {
                 className={styles.removeButton}
                 name={index}
                 onClick={onRemove}
-                styleVariant="action"
+                variant="tertiary"
                 disabled={disabled || readOnly}
                 title={strings.drefFinalReportDeleteRisk}
             >
diff --git a/app/src/views/DrefOperationalUpdateExport/index.tsx b/app/src/views/DrefOperationalUpdateExport/index.tsx
index cc78867fe5..9f989af8db 100644
--- a/app/src/views/DrefOperationalUpdateExport/index.tsx
+++ b/app/src/views/DrefOperationalUpdateExport/index.tsx
@@ -8,17 +8,17 @@ import {
     useParams,
 } from 'react-router-dom';
 import {
-    DateOutput,
-    NumberOutput,
+    DateDisplay,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     Container,
+    DataDisplay,
+    type DataDisplayProps,
     DescriptionText,
     Heading,
     Image,
-    TextOutput,
-    type TextOutputProps,
 } from '@ifrc-go/ui/printable';
 import { DEFAULT_PRINT_DATE_FORMAT } from '@ifrc-go/ui/utils';
 import {
@@ -50,12 +50,13 @@ import { useRequest } from '#utils/restRequest';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-function BlockTextOutput(props: TextOutputProps & { variant?: never, withoutLabelColon?: never }) {
+function BlockTextOutput(props: DataDisplayProps
+    & { styleVariant?: never, withoutLabelColon?: never }) {
     return (
-        <TextOutput
+        <DataDisplay
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            variant="contents"
+            styleVariant="contents"
             withoutLabelColon
         />
     );
@@ -359,13 +360,13 @@ export function Component() {
                     </Container>
                 )}
             <Container childrenContainerClassName={styles.metaSection}>
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.appealLabel}
                     value={drefResponse?.appeal_code}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.drefAllocationLabel}
                     value={drefResponse?.total_dref_allocation}
@@ -373,7 +374,7 @@ export function Component() {
                     prefix={strings.chfPrefix}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.crisisCategoryLabel}
                     value={drefResponse?.disaster_category_display}
@@ -384,19 +385,19 @@ export function Component() {
                     )}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.hazardLabel}
                     value={drefResponse?.disaster_type_details?.name}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.glideNumberLabel}
                     value={drefResponse?.glide_code}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={drefResponse?.type_of_dref === DREF_TYPE_RESPONSE
                         ? strings.peopleAffectedLabel
@@ -406,7 +407,7 @@ export function Component() {
                     suffix={strings.peopleSuffix}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.peopleTargeted}
                     label={strings.peopleTargetedLabel}
                     value={drefResponse?.total_targeted_population}
@@ -414,27 +415,27 @@ export function Component() {
                     valueType="number"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.eventOnsetLabel}
                     value={drefResponse?.type_of_onset_display}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.operationStartDateLabel}
                     value={drefResponse?.new_operational_start_date}
                     valueType="date"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.operationEndDateLabel}
                     value={drefResponse?.new_operational_end_date}
                     valueType="date"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.operationTimeframeLabel}
                     value={drefResponse?.total_operation_timeframe}
@@ -442,28 +443,28 @@ export function Component() {
                     suffix={strings.monthsSuffix}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.reportingTimeframeStartDate}
                     label={strings.reportingTimeframeStartDateLabel}
                     value={drefResponse?.reporting_start_date}
                     valueType="date"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.reportingTimeframeEndDate}
                     label={strings.reportingTimeframeEndDateLabel}
                     value={drefResponse?.reporting_end_date}
                     valueType="date"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.additionalAllocation}
                     label={strings.additionalAllocationRequestedLabel}
                     value={drefResponse?.additional_allocation}
                     valueType="number"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.targetedAreas}
                     label={strings.targetedAreasLabel}
                     value={drefResponse?.district_details?.map(
@@ -499,7 +500,7 @@ export function Component() {
                                 ? strings.dateWhenTriggerWasMetHeading
                                 : strings.dateOfEventSlowHeading}
                         >
-                            <DateOutput
+                            <DateDisplay
                                 value={drefResponse?.event_date}
                                 format={DEFAULT_PRINT_DATE_FORMAT}
                             />
@@ -624,7 +625,7 @@ export function Component() {
                         strongValue
                     />
                     {summaryOfChangeDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.summary}
                             label={strings.changeSummaryLabel}
                             value={drefResponse?.summary_of_change}
@@ -633,7 +634,7 @@ export function Component() {
                         />
                     )}
                     {specifiedTriggerMetDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.specifiedTriggerMet}
                             label={strings.specifiedTriggerMetLabel}
                             value={drefResponse?.specified_trigger_met}
@@ -709,7 +710,7 @@ export function Component() {
                         />
                     )}
                     {majorCoordinationMechanismDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.otherActionsMajorCoordinationMechanism}
                             label={strings.majorCoordinationMechanismLabel}
                             value={drefResponse?.major_coordination_mechanism}
@@ -941,7 +942,7 @@ export function Component() {
                         </>
                     )}
                     {riskSecurityConcernDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.riskSecurityConcern}
                             label={strings.safetyConcernHeading}
                             value={drefResponse?.risk_security_concern}
@@ -976,26 +977,26 @@ export function Component() {
                                     {plannedIntervention.title_display}
                                 </Heading>
                                 <Container>
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.budgetLabel}
                                         value={plannedIntervention.budget}
                                         valueType="number"
                                         prefix={strings.chfPrefix}
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.targetedPersonsLabel}
                                         value={plannedIntervention.person_targeted}
                                         valueType="number"
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.targetedMaleLabel}
                                         value={plannedIntervention.male}
                                         valueType="number"
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.targetedFemaleLabel}
                                         value={plannedIntervention.female}
                                         valueType="number"
@@ -1024,11 +1025,11 @@ export function Component() {
                                                 <div className={styles.title}>
                                                     {indicator.title}
                                                 </div>
-                                                <NumberOutput
+                                                <NumberDisplay
                                                     className={styles.target}
                                                     value={indicator.target}
                                                 />
-                                                <NumberOutput
+                                                <NumberDisplay
                                                     className={styles.actual}
                                                     value={indicator.actual}
                                                 />
@@ -1144,7 +1145,7 @@ export function Component() {
                     </Container>
                     <Container childrenContainerClassName={styles.contactList}>
                         {nsContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nsContactHeading}
                                 value={nsContactText}
@@ -1152,7 +1153,7 @@ export function Component() {
                             />
                         )}
                         {appealManagerContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.appealManagerContactHeading}
                                 value={appealManagerContactText}
@@ -1160,7 +1161,7 @@ export function Component() {
                             />
                         )}
                         {projectManagerContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.projectManagerContactHeading}
                                 value={projectManagerContactText}
@@ -1168,7 +1169,7 @@ export function Component() {
                             />
                         )}
                         {focalPointContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.focalPointContactHeading}
                                 value={focalPointContactText}
@@ -1176,7 +1177,7 @@ export function Component() {
                             />
                         )}
                         {mediaContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.mediaContactHeading}
                                 value={mediaContactText}
@@ -1184,7 +1185,7 @@ export function Component() {
                             />
                         )}
                         {nationalSocietyIntegrityContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nationalSocietyIntegrityHeading}
                                 value={nationalSocietyIntegrityContactText}
@@ -1192,7 +1193,7 @@ export function Component() {
                             />
                         )}
                         {nationalSocietyHotlineDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nationalSocietyHotlineHeading}
                                 value={drefResponse?.national_society_hotline_phone_number}
diff --git a/app/src/views/DrefOperationalUpdateForm/Actions/NeedInput/index.tsx b/app/src/views/DrefOperationalUpdateForm/Actions/NeedInput/index.tsx
index 352f86e786..a81d1caabd 100644
--- a/app/src/views/DrefOperationalUpdateForm/Actions/NeedInput/index.tsx
+++ b/app/src/views/DrefOperationalUpdateForm/Actions/NeedInput/index.tsx
@@ -73,7 +73,7 @@ function NeedInput(props: Props) {
                     <Button
                         name={index}
                         onClick={onRemove}
-                        styleVariant="action"
+                        variant="tertiary"
                         title={strings.drefOperationalUpdateFormRemoveNeed}
                         disabled={disabled || readOnly}
                     >
diff --git a/app/src/views/DrefOperationalUpdateForm/ObsoletePayloadModal/index.tsx b/app/src/views/DrefOperationalUpdateForm/ObsoletePayloadModal/index.tsx
index 063a520e8b..e069b2fcf0 100644
--- a/app/src/views/DrefOperationalUpdateForm/ObsoletePayloadModal/index.tsx
+++ b/app/src/views/DrefOperationalUpdateForm/ObsoletePayloadModal/index.tsx
@@ -1,7 +1,7 @@
 import {
     BlockLoading,
     Button,
-    Modal,
+    Dialog,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -42,7 +42,7 @@ function ObsoletePayloadResolutionModal(props: Props) {
     });
 
     return (
-        <Modal
+        <Dialog
             heading={strings.drefChangesConflictWhileSaving}
             headingLevel={3}
             className={styles.obsoletePayloadResolutionModal}
@@ -50,7 +50,6 @@ function ObsoletePayloadResolutionModal(props: Props) {
                 <>
                     <Button
                         name={false}
-                        styleVariant="outline"
                         onClick={onCancelButtonClick}
                     >
                         {strings.drefChangesCancelButton}
@@ -88,7 +87,7 @@ function ObsoletePayloadResolutionModal(props: Props) {
                     </div>
                 </>
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/DrefOperationalUpdateForm/Operation/InterventionInput/IndicatorInput/index.tsx b/app/src/views/DrefOperationalUpdateForm/Operation/InterventionInput/IndicatorInput/index.tsx
index 56a6516c87..995af65f2a 100644
--- a/app/src/views/DrefOperationalUpdateForm/Operation/InterventionInput/IndicatorInput/index.tsx
+++ b/app/src/views/DrefOperationalUpdateForm/Operation/InterventionInput/IndicatorInput/index.tsx
@@ -93,7 +93,7 @@ function IndicatorInput(props: Props) {
                 name={index}
                 className={styles.removeButton}
                 onClick={onRemove}
-                styleVariant="action"
+                variant="tertiary"
                 title={strings.drefIndicatorRemoveButtonLabel}
                 disabled={disabled || readOnly}
             >
diff --git a/app/src/views/DrefOperationalUpdateForm/Operation/InterventionInput/index.tsx b/app/src/views/DrefOperationalUpdateForm/Operation/InterventionInput/index.tsx
index 112d9feb24..4234445322 100644
--- a/app/src/views/DrefOperationalUpdateForm/Operation/InterventionInput/index.tsx
+++ b/app/src/views/DrefOperationalUpdateForm/Operation/InterventionInput/index.tsx
@@ -151,7 +151,7 @@ function InterventionInput(props: Props) {
                     <Button
                         name={index}
                         onClick={onRemove}
-                        styleVariant="action"
+                        variant="tertiary"
                         title={strings.drefFormRemoveIntervention}
                         disabled={disabled}
                         readOnly={readOnly}
diff --git a/app/src/views/DrefOperationalUpdateForm/Operation/RiskSecurityInput/index.tsx b/app/src/views/DrefOperationalUpdateForm/Operation/RiskSecurityInput/index.tsx
index 29f0e76e22..baca218ca5 100644
--- a/app/src/views/DrefOperationalUpdateForm/Operation/RiskSecurityInput/index.tsx
+++ b/app/src/views/DrefOperationalUpdateForm/Operation/RiskSecurityInput/index.tsx
@@ -85,7 +85,7 @@ function RiskSecurityInput(props: Props) {
                 className={styles.removeButton}
                 name={index}
                 onClick={onRemove}
-                styleVariant="action"
+                variant="tertiary"
                 disabled={disabled || readOnly}
                 title={strings.drefOperationalUpdateFormDeleteRisk}
             >
diff --git a/app/src/views/DrefOperationalUpdateForm/Operation/index.tsx b/app/src/views/DrefOperationalUpdateForm/Operation/index.tsx
index 05004deb30..4afa1eb94c 100644
--- a/app/src/views/DrefOperationalUpdateForm/Operation/index.tsx
+++ b/app/src/views/DrefOperationalUpdateForm/Operation/index.tsx
@@ -604,7 +604,6 @@ function Operation(props: Props) {
                         <Button
                             name={undefined}
                             onClick={handleRiskSecurityAdd}
-                            styleVariant="outline"
                             disabled={disabled || readOnly}
                         >
                             {strings.drefFormRiskSecurityAddButton}
@@ -813,7 +812,6 @@ function Operation(props: Props) {
                         />
                         <Button
                             className={styles.action}
-                            styleVariant="outline"
                             name={selectedIntervention}
                             onClick={handleInterventionAddButtonClick}
                             disabled={isNotDefined(selectedIntervention) || disabled || readOnly}
diff --git a/app/src/views/DrefOperationalUpdateForm/Overview/index.tsx b/app/src/views/DrefOperationalUpdateForm/Overview/index.tsx
index 12c0c4cf52..aa44c1774a 100644
--- a/app/src/views/DrefOperationalUpdateForm/Overview/index.tsx
+++ b/app/src/views/DrefOperationalUpdateForm/Overview/index.tsx
@@ -17,10 +17,10 @@ import {
     BooleanInput,
     Button,
     Container,
+    Dialog,
     InlineLayout,
     InputSection,
     ListView,
-    Modal,
     NumberInput,
     RawList,
     SelectInput,
@@ -223,7 +223,7 @@ function Overview(props: Props) {
                 && !isPreviousImminent
                 && showChangeDrefTypeModal
                 && value?.type_of_dref === TYPE_ASSESSMENT && (
-                <Modal
+                <Dialog
                     size="sm"
                     heading={strings.changeToResponseHeading}
                     onClose={setShowChangeDrefTypeModalFalse}
@@ -245,7 +245,7 @@ function Overview(props: Props) {
                     )}
                 >
                     {strings.isDrefChangingToResponse}
-                </Modal>
+                </Dialog>
             )}
             <Container heading={strings.drefFormSharingHeading}>
                 <InputSection
diff --git a/app/src/views/EapFullForm/EapActivationProcess/index.tsx b/app/src/views/EapFullForm/EapActivationProcess/index.tsx
index 66677083ea..ff2f6d3e75 100644
--- a/app/src/views/EapFullForm/EapActivationProcess/index.tsx
+++ b/app/src/views/EapFullForm/EapActivationProcess/index.tsx
@@ -4,8 +4,8 @@ import {
     Button,
     Container,
     Description,
+    DisplayLabel,
     InputSection,
-    Label,
     ListView,
     NumberInput,
     TextArea,
@@ -89,9 +89,9 @@ function EapActivationProcess(props: Props) {
                     heading={strings.activationSectionHeading}
                     content={(
                         <ListView layout="block" withSpacingOpticalCorrection>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.activationSectionCriteriaIntroduction1}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.activationSectionCriteriaComment11}
@@ -103,15 +103,15 @@ function EapActivationProcess(props: Props) {
                                     {strings.activationSectionCriteriaComment13}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.activationSectionCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <Description>
                                 {strings.activationSectionCriteriaComment2}
                             </Description>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.activationSectionCriteriaIntroduction3}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.activationSectionCriteriaComment31}
@@ -141,7 +141,7 @@ function EapActivationProcess(props: Props) {
                         />
                     </ListView>
                 )}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -157,17 +157,17 @@ function EapActivationProcess(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.activationProcessExplanatoryLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.activationImplementationExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.activationProcessRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>
@@ -232,17 +232,17 @@ function EapActivationProcess(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.activationProcessExplanatoryLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.activationTriggerExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.activationProcessRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>
@@ -318,17 +318,17 @@ function EapActivationProcess(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.activationProcessExplanatoryLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.activationSelectionExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.activationProcessRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>
@@ -377,17 +377,17 @@ function EapActivationProcess(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.activationProcessExplanatoryLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.activationStopMechanismExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.activationProcessRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>{strings.activationStopDescription1}</li>
diff --git a/app/src/views/EapFullForm/FinanceLogistics/index.tsx b/app/src/views/EapFullForm/FinanceLogistics/index.tsx
index 7aad93333a..405f95585f 100644
--- a/app/src/views/EapFullForm/FinanceLogistics/index.tsx
+++ b/app/src/views/EapFullForm/FinanceLogistics/index.tsx
@@ -1,13 +1,13 @@
 import { useCallback } from 'react';
 import {
     Container,
+    DataDisplay,
     Description,
+    DisplayLabel,
     InputSection,
-    Label,
     ListView,
     NumberInput,
     TextArea,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { sumSafe } from '@ifrc-go/ui/utils';
@@ -108,29 +108,29 @@ function FinanceLogistics(props: Props) {
                     content={(
                         <ListView layout="block" withSpacingOpticalCorrection>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                <Label strong>
+                                <DisplayLabel strong>
                                     {strings.financeCriteriaIntroduction11}
-                                </Label>
-                                <Label>
+                                </DisplayLabel>
+                                <DisplayLabel>
                                     {strings.financeCriteriaIntroduction12}
-                                </Label>
+                                </DisplayLabel>
                             </ListView>
                             <Description>
                                 {strings.financeCriteriaComment1}
                             </Description>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.financeCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <Description>
                                 {strings.financeCriteriaComment2}
                             </Description>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                <Label strong>
+                                <DisplayLabel strong>
                                     {strings.financeCriteriaIntroduction31}
-                                </Label>
-                                <Label>
+                                </DisplayLabel>
+                                <DisplayLabel>
                                     {strings.financeCriteriaIntroduction32}
-                                </Label>
+                                </DisplayLabel>
                             </ListView>
                             <Description>
                                 {strings.financeCriteriaComment3}
@@ -142,7 +142,7 @@ function FinanceLogistics(props: Props) {
         >
             <Container
                 heading={strings.financeHeading}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView layout="block" spacing="sm">
                     <InputSection
@@ -154,9 +154,9 @@ function FinanceLogistics(props: Props) {
                                 title={strings.financeBudgetTitle}
                                 content={(
                                     <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.financeExplanatoryNoteLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             {strings.financeExplanatoryNote}
                                         </Description>
@@ -174,7 +174,7 @@ function FinanceLogistics(props: Props) {
                         )}
                         withAsteriskOnTitle
                     >
-                        <TextOutput
+                        <DataDisplay
                             valueType="number"
                             strongLabel
                             label={strings.financeTotalBudgetLabel}
@@ -212,12 +212,10 @@ function FinanceLogistics(props: Props) {
                             value={value?.budget_file}
                             error={getErrorString(error?.budget_file)}
                             setFileIdToUrlMap={setFileIdToUrlMap}
-                            required
                             clearable
                             disabled={disabled}
                             readOnly={readOnly}
                             useCurrentLanguageForMutation
-                            label={strings.financeUploadBudgetLabel}
                         >
                             {strings.financeUploadButtonLabel}
                         </GoSingleFileInput>
@@ -232,17 +230,17 @@ function FinanceLogistics(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.financeExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.financeReadinessCostExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.financeRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>
@@ -297,17 +295,17 @@ function FinanceLogistics(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.financeExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.financePrePositioningExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.financeRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>
@@ -366,17 +364,17 @@ function FinanceLogistics(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.financeExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.financeEarlyActionCostExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.financeRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>
@@ -433,7 +431,7 @@ function FinanceLogistics(props: Props) {
             </Container>
             <Container
                 heading={strings.financeEapEndorsementHeading}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView layout="block" spacing="sm">
                     <InputSection
@@ -445,9 +443,9 @@ function FinanceLogistics(props: Props) {
                                 title={strings.financeEapEndorsementTitle}
                                 content={(
                                     <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.financeExplanatoryNoteLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             {strings.financeEapEndorsementExplanatoryNote}
                                         </Description>
diff --git a/app/src/views/EapFullForm/Meal/index.tsx b/app/src/views/EapFullForm/Meal/index.tsx
index 254149d12d..9c587931a7 100644
--- a/app/src/views/EapFullForm/Meal/index.tsx
+++ b/app/src/views/EapFullForm/Meal/index.tsx
@@ -4,8 +4,8 @@ import {
     Button,
     Container,
     Description,
+    DisplayLabel,
     InputSection,
-    Label,
     ListView,
     TextArea,
 } from '@ifrc-go/ui';
@@ -85,9 +85,9 @@ function Meal(props: Props) {
                     content={(
                         <ListView layout="block" withSpacingOpticalCorrection>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                <Label strong>
+                                <DisplayLabel strong>
                                     {strings.mealCriteriaIntroduction1}
-                                </Label>
+                                </DisplayLabel>
                                 <Description>
                                     <ol>
                                         <li>{strings.mealCriteriaIntroduction11}</li>
@@ -105,7 +105,7 @@ function Meal(props: Props) {
             )}
         >
             <Container
-                variant="form"
+                styleVariant="form"
                 heading={strings.mealHeading}
             >
                 <ListView
@@ -122,17 +122,17 @@ function Meal(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.mealExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.mealExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.mealRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>{strings.mealDescription1}</li>
diff --git a/app/src/views/EapFullForm/NationalSocietyCapacity/index.tsx b/app/src/views/EapFullForm/NationalSocietyCapacity/index.tsx
index 632c1ae1ae..3613e79c8a 100644
--- a/app/src/views/EapFullForm/NationalSocietyCapacity/index.tsx
+++ b/app/src/views/EapFullForm/NationalSocietyCapacity/index.tsx
@@ -4,8 +4,8 @@ import {
     Button,
     Container,
     Description,
+    DisplayLabel,
     InputSection,
-    Label,
     ListView,
     TextArea,
 } from '@ifrc-go/ui';
@@ -86,12 +86,12 @@ function NationalSocietyCapacity(props: Props) {
                     content={(
                         <ListView layout="block" withSpacingOpticalCorrection>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                <Label strong>
+                                <DisplayLabel strong>
                                     {strings.capacityCriteriaIntroduction11}
-                                </Label>
-                                <Label>
+                                </DisplayLabel>
+                                <DisplayLabel>
                                     {strings.capacityCriteriaIntroduction12}
-                                </Label>
+                                </DisplayLabel>
                             </ListView>
                             <Description>
                                 {strings.capacityCriteriaComment1}
@@ -117,7 +117,7 @@ function NationalSocietyCapacity(props: Props) {
                         />
                     </ListView>
                 )}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -172,17 +172,17 @@ function NationalSocietyCapacity(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.capacityExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.capacityExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.capacityRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>{strings.capacityFinancialDescription}</li>
diff --git a/app/src/views/EapFullForm/Overview/index.tsx b/app/src/views/EapFullForm/Overview/index.tsx
index 40e34adab8..ab81e38174 100644
--- a/app/src/views/EapFullForm/Overview/index.tsx
+++ b/app/src/views/EapFullForm/Overview/index.tsx
@@ -6,8 +6,8 @@ import {
     Container,
     DateInput,
     Description,
+    DisplayLabel,
     InputSection,
-    Label,
     ListView,
     TextArea,
     TextInput,
@@ -156,7 +156,7 @@ function Overview(props: Props) {
         >
             <Container
                 heading={strings.overviewHeading}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -269,7 +269,7 @@ function Overview(props: Props) {
             </Container>
             <Container
                 heading={strings.formContacts}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -278,7 +278,7 @@ function Overview(props: Props) {
                     <Container
                         heading={strings.nationalHeader}
                         headingLevel={4}
-                        variant="form"
+                        styleVariant="form"
                     >
                         <ListView
                             layout="block"
@@ -326,7 +326,7 @@ function Overview(props: Props) {
                     <Container
                         heading={strings.delegationHeader}
                         headingLevel={4}
-                        variant="form"
+                        styleVariant="form"
                     >
                         <ListView
                             layout="block"
@@ -357,7 +357,7 @@ function Overview(props: Props) {
                     <Container
                         heading={strings.regionalHeader}
                         headingLevel={4}
-                        variant="form"
+                        styleVariant="form"
                     >
                         <ListView
                             layout="block"
@@ -415,7 +415,7 @@ function Overview(props: Props) {
             </Container>
             <Container
                 heading={strings.stakeholderHeader}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -430,9 +430,9 @@ function Overview(props: Props) {
                                 title={strings.workWithGovernmentTitle}
                                 content={(
                                     <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.overviewExplanatoryNoteLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             {strings.workExplanatoryNote}
                                         </Description>
@@ -481,17 +481,17 @@ function Overview(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.overviewExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.actorsExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.overviewRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>{strings.overviewRequiredPoint1}</li>
diff --git a/app/src/views/EapFullForm/RiskAnalysis/PrioritisedImpactInput/index.tsx b/app/src/views/EapFullForm/RiskAnalysis/PrioritisedImpactInput/index.tsx
index 8e614c8b7b..691475961f 100644
--- a/app/src/views/EapFullForm/RiskAnalysis/PrioritisedImpactInput/index.tsx
+++ b/app/src/views/EapFullForm/RiskAnalysis/PrioritisedImpactInput/index.tsx
@@ -61,7 +61,6 @@ function PrioritisedImpactInput(props: Props) {
                     <IconButton
                         name={index}
                         onClick={onRemove}
-                        styleVariant="action"
                         disabled={disabled || readOnly}
                         // FIXME use translation strings
                         title="Remove prioritized impact"
diff --git a/app/src/views/EapFullForm/RiskAnalysis/index.tsx b/app/src/views/EapFullForm/RiskAnalysis/index.tsx
index 249c9d5912..a838b9c269 100644
--- a/app/src/views/EapFullForm/RiskAnalysis/index.tsx
+++ b/app/src/views/EapFullForm/RiskAnalysis/index.tsx
@@ -4,8 +4,8 @@ import {
     Button,
     Container,
     Description,
+    DisplayLabel,
     InputSection,
-    Label,
     ListView,
     TextArea,
 } from '@ifrc-go/ui';
@@ -115,9 +115,9 @@ function RiskAnalysis(props: Props) {
                     heading={strings.riskAnalysisSectionHeading}
                     content={(
                         <ListView withSpacingOpticalCorrection layout="block">
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.riskSectionCriteriaIntroduction1}
-                            </Label>
+                            </DisplayLabel>
                             <ListView withSpacingOpticalCorrection spacing="xs" layout="block">
                                 <Description>
                                     {strings.riskSectionCriteriaComment11}
@@ -132,9 +132,9 @@ function RiskAnalysis(props: Props) {
                                     {strings.riskSectionCriteriaComment14}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.riskSectionCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" withSpacingOpticalCorrection layout="block">
                                 <Description>
                                     {strings.riskSectionCriteriaComment21}
@@ -143,9 +143,9 @@ function RiskAnalysis(props: Props) {
                                     {strings.riskSectionCriteriaComment22}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.riskSectionCriteriaIntroduction3}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" withSpacingOpticalCorrection layout="block">
                                 <Description>
                                     {strings.riskSectionCriteriaComment31}
@@ -154,9 +154,9 @@ function RiskAnalysis(props: Props) {
                                     {strings.riskSectionCriteriaComment32}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.riskSectionCriteriaIntroduction4}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" withSpacingOpticalCorrection layout="block">
                                 <Description>
                                     {strings.riskSectionCriteriaComment41}
@@ -165,16 +165,16 @@ function RiskAnalysis(props: Props) {
                                     {strings.riskSectionCriteriaComment42}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.riskSectionCriteriaIntroduction5}
-                            </Label>
+                            </DisplayLabel>
                             <Description>
                                 {strings.riskSectionCriteriaComment5}
                             </Description>
                             <ListView spacing="xs" withSpacingOpticalCorrection layout="block">
-                                <Label strong>
+                                <DisplayLabel strong>
                                     {strings.riskSectionCriteriaIntroduction6}
-                                </Label>
+                                </DisplayLabel>
                                 <Description>
                                     <ol>
                                         <li>{strings.riskSectionCriteriaIntroduction61}</li>
@@ -204,7 +204,7 @@ function RiskAnalysis(props: Props) {
         >
             <Container
                 heading={strings.riskAnalysisHeading}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView layout="block" spacing="sm">
                     <InputSection
@@ -216,15 +216,15 @@ function RiskAnalysis(props: Props) {
                                 heading={strings.hazardSelectionTitle}
                                 content={(
                                     <ListView layout="block">
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.riskExplanatoryNoteLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             {strings.hazardSelectionExplanatoryNote}
                                         </Description>
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.riskRequiredPointsLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             <ul>
                                                 <li>
@@ -294,15 +294,15 @@ function RiskAnalysis(props: Props) {
                                 title={strings.exposeElementTitle}
                                 content={(
                                     <ListView layout="block">
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.riskExplanatoryNoteLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             {strings.exposeElementExplanatoryNote}
                                         </Description>
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.riskRequiredPointsLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             <ul>
                                                 <li>
@@ -370,9 +370,9 @@ function RiskAnalysis(props: Props) {
                                 ariaLabel={strings.prioritisedImpactTitle}
                                 content={(
                                     <ListView layout="block">
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.riskExplanatoryNoteLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             {strings.prioritisedImpactExplanatoryNote}
                                         </Description>
@@ -459,7 +459,6 @@ function RiskAnalysis(props: Props) {
                             error={getErrorString(error?.risk_analysis_relevant_files)}
                             setFileIdToUrlMap={setFileIdToUrlMap}
                             clearable
-                            required
                             disabled={disabled}
                             readOnly={readOnly}
                             useCurrentLanguageForMutation
diff --git a/app/src/views/EapFullForm/SelectionActions/ApproachesInput/index.tsx b/app/src/views/EapFullForm/SelectionActions/ApproachesInput/index.tsx
index 0e72cd79fc..b6563e1f0b 100644
--- a/app/src/views/EapFullForm/SelectionActions/ApproachesInput/index.tsx
+++ b/app/src/views/EapFullForm/SelectionActions/ApproachesInput/index.tsx
@@ -72,7 +72,7 @@ function ApproachesInput(props: Props) {
                 <Button
                     name={index}
                     onClick={onRemove}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.approachRemoveButton}
                     disabled={disabled || readOnly}
                 >
@@ -80,7 +80,7 @@ function ApproachesInput(props: Props) {
                 </Button>
             )}
             withPadding
-            withBackground
+            backgroundColor="foreground"
             initiallyExpanded
             withHeaderBorder
             // FIXME: add non field error and error indicator
diff --git a/app/src/views/EapFullForm/SelectionActions/OperationInput/index.tsx b/app/src/views/EapFullForm/SelectionActions/OperationInput/index.tsx
index 7fee2c460d..4d836fd362 100644
--- a/app/src/views/EapFullForm/SelectionActions/OperationInput/index.tsx
+++ b/app/src/views/EapFullForm/SelectionActions/OperationInput/index.tsx
@@ -77,7 +77,7 @@ function OperationsInput(props: Props) {
                 <Button
                     name={index}
                     onClick={onRemove}
-                    styleVariant="action"
+                    variant="tertiary"
                     disabled={disabled || readOnly}
                     title={strings.selectionActionsPlannedOperationRemoveButton}
                 >
@@ -85,7 +85,7 @@ function OperationsInput(props: Props) {
                 </Button>
             )}
             withPadding
-            withBackground
+            backgroundColor="foreground"
             initiallyExpanded
             withHeaderBorder
             // FIXME: add non field error and error indicator
diff --git a/app/src/views/EapFullForm/SelectionActions/index.tsx b/app/src/views/EapFullForm/SelectionActions/index.tsx
index 9f40f9461a..7d7fb81d0a 100644
--- a/app/src/views/EapFullForm/SelectionActions/index.tsx
+++ b/app/src/views/EapFullForm/SelectionActions/index.tsx
@@ -8,8 +8,8 @@ import {
     Checklist,
     Container,
     Description,
+    DisplayLabel,
     InputSection,
-    Label,
     ListView,
     TextArea,
 } from '@ifrc-go/ui';
@@ -252,15 +252,15 @@ function SelectionActions(props: Props) {
                     heading={strings.actionsStatementSectionHeading}
                     content={(
                         <ListView withSpacingOpticalCorrection layout="block">
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.actionsSectionCriteriaIntroduction1}
-                            </Label>
+                            </DisplayLabel>
                             <Description>
                                 {strings.actionsSectionCriteriaComment1}
                             </Description>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.actionsSectionCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.actionsSectionCriteriaComment21}
@@ -269,9 +269,9 @@ function SelectionActions(props: Props) {
                                     {strings.actionsSectionCriteriaComment22}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.actionsSectionCriteriaIntroduction3}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.actionsSectionCriteriaComment31}
@@ -281,23 +281,23 @@ function SelectionActions(props: Props) {
                                 </Description>
                             </ListView>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                <Label strong>
+                                <DisplayLabel strong>
                                     {strings.actionsSectionCriteriaIntroduction41}
-                                </Label>
-                                <Label>
+                                </DisplayLabel>
+                                <DisplayLabel>
                                     {strings.actionsSectionCriteriaIntroduction42}
-                                </Label>
+                                </DisplayLabel>
                             </ListView>
                             <Description>
                                 {strings.actionsSectionCriteriaComment4}
                             </Description>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                <Label strong>
+                                <DisplayLabel strong>
                                     {strings.actionsSectionCriteriaIntroduction51}
-                                </Label>
-                                <Label>
+                                </DisplayLabel>
+                                <DisplayLabel>
                                     {strings.actionsSectionCriteriaIntroduction52}
-                                </Label>
+                                </DisplayLabel>
                             </ListView>
                             <Description>
                                 {strings.actionsSectionCriteriaComment5}
@@ -323,7 +323,7 @@ function SelectionActions(props: Props) {
                         />
                     </ListView>
                 )}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView layout="block">
                     <InputSection
@@ -336,17 +336,17 @@ function SelectionActions(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.selectionActionExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.selectionProcessExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.selectionActionRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>
@@ -464,13 +464,11 @@ function SelectionActions(props: Props) {
                             url="/api/v2/eap-file/"
                             value={value.theory_of_change_table_file}
                             error={error?.theory_of_change_table_file}
-                            label={strings.selectionActionUploadTableLabel}
                             onChange={setFieldValue}
                             fileIdToUrlMap={fileIdToUrlMap}
                             setFileIdToUrlMap={setFileIdToUrlMap}
                             disabled={disabled}
                             readOnly={readOnly}
-                            required
                             clearable
                         >
                             {strings.selectionActionUploadLabel}
@@ -485,9 +483,9 @@ function SelectionActions(props: Props) {
                                 ariaLabel={strings.evidenceBaseTitle}
                                 content={(
                                     <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.selectionActionExplanatoryNoteLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             {strings.evidenceBaseExplanatoryNote}
                                         </Description>
@@ -565,7 +563,7 @@ function SelectionActions(props: Props) {
                 headerDescription={
                     strings.selectionActionPlannedOperationHeadingDescription
                 }
-                variant="form"
+                styleVariant="form"
             >
                 <ListView layout="block">
                     <InputSection
@@ -644,9 +642,9 @@ function SelectionActions(props: Props) {
                                 title={strings.useFulnessActionsTitle}
                                 content={(
                                     <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.selectionActionExplanatoryNoteLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             {strings.useFulnessActionsExplanatoryNote}
                                         </Description>
@@ -678,17 +676,17 @@ function SelectionActions(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.selectionActionExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.feasibilityExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.selectionActionRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>{strings.feasibilityRequiredPoint1}</li>
diff --git a/app/src/views/EapFullForm/TriggerModel/index.tsx b/app/src/views/EapFullForm/TriggerModel/index.tsx
index ee5feee9d4..faf7d5c3f6 100644
--- a/app/src/views/EapFullForm/TriggerModel/index.tsx
+++ b/app/src/views/EapFullForm/TriggerModel/index.tsx
@@ -4,8 +4,8 @@ import {
     Button,
     Container,
     Description,
+    DisplayLabel,
     InputSection,
-    Label,
     ListView,
     NumberInput,
     SelectInput,
@@ -141,9 +141,9 @@ function TriggerModel(props: Props) {
                     heading={strings.triggerSectionHeading}
                     content={(
                         <ListView withSpacingOpticalCorrection layout="block">
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.triggerSectionCriteriaIntroduction1}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.triggerSectionCriteriaComment11}
@@ -158,9 +158,9 @@ function TriggerModel(props: Props) {
                                     {strings.triggerSectionCriteriaComment14}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.triggerSectionCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.triggerSectionCriteriaComment21}
@@ -169,9 +169,9 @@ function TriggerModel(props: Props) {
                                     {strings.triggerSectionCriteriaComment22}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.triggerSectionCriteriaIntroduction3}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.triggerSectionCriteriaComment31}
@@ -180,9 +180,9 @@ function TriggerModel(props: Props) {
                                     {strings.triggerSectionCriteriaComment32}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.triggerSectionCriteriaIntroduction4}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.triggerSectionCriteriaComment41}
@@ -191,16 +191,16 @@ function TriggerModel(props: Props) {
                                     {strings.triggerSectionCriteriaComment42}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.triggerSectionCriteriaIntroduction5}
-                            </Label>
+                            </DisplayLabel>
                             <Description>
                                 {strings.triggerSectionCriteriaComment5}
                             </Description>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                <Label strong>
+                                <DisplayLabel strong>
                                     {strings.triggerSectionCriteriaIntroduction6}
-                                </Label>
+                                </DisplayLabel>
                                 <Description>
                                     <ol>
                                         <li>{strings.triggerSectionCriteriaIntroduction61}</li>
@@ -244,7 +244,7 @@ function TriggerModel(props: Props) {
                         />
                     </ListView>
                 )}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView layout="block" spacing="sm">
                     <InputSection
@@ -256,9 +256,9 @@ function TriggerModel(props: Props) {
                                 title={strings.triggerStatementTitle}
                                 content={(
                                     <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {strings.triggerExplanatoryNoteLabel}
-                                        </Label>
+                                        </DisplayLabel>
                                         <Description>
                                             {strings.triggerStatementExplanatoryNote}
                                         </Description>
@@ -351,17 +351,17 @@ function TriggerModel(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.triggerExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.forecastExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.triggerRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>{strings.forecastRequiredPoint1}</li>
@@ -423,12 +423,10 @@ function TriggerModel(props: Props) {
                             value={value.forecast_table_file}
                             error={getErrorString(error?.forecast_table_file)}
                             setFileIdToUrlMap={setFileIdToUrlMap}
-                            required
                             clearable
                             disabled={disabled}
                             readOnly={readOnly}
                             useCurrentLanguageForMutation
-                            label={strings.attachRelevantFilesUploadLabel}
                         >
                             {strings.triggerUploadTableLabel}
                         </GoSingleFileInput>
@@ -443,17 +441,17 @@ function TriggerModel(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.triggerExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.definitionJustificationExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.triggerRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>{strings.definitionRequiredPoint1}</li>
@@ -514,17 +512,17 @@ function TriggerModel(props: Props) {
                                 content={(
                                     <ListView layout="block">
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.triggerExplanatoryNoteLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.identificationInterventionExplanatoryNote}
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.triggerRequiredPointsLabel}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 <ul>
                                                     <li>
diff --git a/app/src/views/EapFullForm/index.tsx b/app/src/views/EapFullForm/index.tsx
index 42955dbbd2..24183b9848 100644
--- a/app/src/views/EapFullForm/index.tsx
+++ b/app/src/views/EapFullForm/index.tsx
@@ -14,11 +14,11 @@ import { ShareFillIcon } from '@ifrc-go/icons';
 import {
     Alert,
     Button,
+    Dialog,
     IconButton,
     InlineLayout,
     ListView,
     Message,
-    Modal,
     Tab,
     TabList,
     TabPanel,
@@ -1158,7 +1158,7 @@ export function Component() {
                                         name={undefined}
                                         onClick={handleRequestForApprovalButtonClick}
                                         disabled={readOnly}
-                                        styleVariant="filled"
+                                        variant="primary"
                                     >
                                         {strings.submitButtonLabel}
                                     </Button>
@@ -1166,7 +1166,7 @@ export function Component() {
                             </ListView>
                         </InlineLayout>
                         {shouldSubmit && (
-                            <Modal
+                            <Dialog
                                 heading={strings.submitConfirmHeading}
                                 onClose={handleRequestForApprovalCancel}
                                 pending={createFullEapPending || updateFullFormPending}
@@ -1187,13 +1187,13 @@ export function Component() {
                                         <Alert
                                             name="form-error-warning"
                                             title={strings.submitFormErrorMessage}
-                                            type="warning"
+                                            variant="warning"
                                             withLightBackground
-                                            withoutShadow
+                                            boxShadow="none"
                                         />
                                     )}
                                 </ListView>
-                            </Modal>
+                            </Dialog>
                         )}
                         {showShareModal && isDefined(eapId) && (
                             <EapShareModal
diff --git a/app/src/views/EapRegistration/index.tsx b/app/src/views/EapRegistration/index.tsx
index c46982c13c..8722f7b057 100644
--- a/app/src/views/EapRegistration/index.tsx
+++ b/app/src/views/EapRegistration/index.tsx
@@ -8,9 +8,9 @@ import {
     Button,
     Container,
     DateInput,
+    Dialog,
     InputSection,
     ListView,
-    Modal,
     Radio,
     RadioInput,
 } from '@ifrc-go/ui';
@@ -203,7 +203,7 @@ export function Component() {
             >
                 <Container
                     heading={strings.applicationDetails}
-                    variant="form"
+                    styleVariant="form"
                 >
                     <ListView
                         layout="block"
@@ -313,7 +313,7 @@ export function Component() {
                 </Container>
                 <Container
                     heading={strings.contacts}
-                    variant="form"
+                    styleVariant="form"
                 >
                     <ListView
                         layout="block"
@@ -357,7 +357,7 @@ export function Component() {
                 </ListView>
             </ListView>
             {showEapRegistrationsuccessModal && (
-                <Modal
+                <Dialog
                     size="sm"
                     heading={strings.successModalHeading}
                     withHeaderBorder
@@ -365,7 +365,7 @@ export function Component() {
                     footerActions={(
                         <Button
                             name={undefined}
-                            styleVariant="filled"
+                            variant="primary"
                             onClick={handleRegistrationsuccessModalClose}
                         >
                             {strings.closeButtonLabel}
@@ -373,7 +373,7 @@ export function Component() {
                     )}
                 >
                     {strings.successModalDescription}
-                </Modal>
+                </Dialog>
             )}
         </Page>
     );
diff --git a/app/src/views/EapSimplifiedExport/index.tsx b/app/src/views/EapSimplifiedExport/index.tsx
index 73aed0ad77..50687cfe4b 100644
--- a/app/src/views/EapSimplifiedExport/index.tsx
+++ b/app/src/views/EapSimplifiedExport/index.tsx
@@ -4,7 +4,7 @@ import {
     useSearchParams,
 } from 'react-router-dom';
 import {
-    Label,
+    DisplayLabel,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -580,16 +580,16 @@ export function Component() {
                                 headingLevel={4}
                             >
                                 <div className={styles.indicatorItems}>
-                                    <Label
+                                    <DisplayLabel
                                         // FIXME: create and use printable labels
                                         textSize="sm"
                                         strong
                                     >
                                         {strings.indicatorTitleLabel}
-                                    </Label>
-                                    <Label textSize="sm" strong>
+                                    </DisplayLabel>
+                                    <DisplayLabel textSize="sm" strong>
                                         {strings.indicatorTargetLabel}
-                                    </Label>
+                                    </DisplayLabel>
                                     {operation.indicators.map((indicator) => {
                                         const prevIndicator = isDefined(indicator.previous_id)
                                             ? prevOperationIndicatorMap?.[indicator.previous_id]
@@ -752,16 +752,16 @@ export function Component() {
                                 headingLevel={4}
                             >
                                 <div className={styles.indicatorItems}>
-                                    <Label
+                                    <DisplayLabel
                                         // FIXME: create and use printable labels
                                         textSize="sm"
                                         strong
                                     >
                                         {strings.indicatorTitleLabel}
-                                    </Label>
-                                    <Label textSize="sm" strong>
+                                    </DisplayLabel>
+                                    <DisplayLabel textSize="sm" strong>
                                         {strings.indicatorTargetLabel}
-                                    </Label>
+                                    </DisplayLabel>
                                     {approach.indicators.map((indicator) => {
                                         const prevIndicator = prevApproachIndicatorMap
                                             ?.[indicator.previous_id!];
diff --git a/app/src/views/EapSimplifiedForm/DeliveryAndBudget/index.tsx b/app/src/views/EapSimplifiedForm/DeliveryAndBudget/index.tsx
index fd781d9b22..14d96e5e98 100644
--- a/app/src/views/EapSimplifiedForm/DeliveryAndBudget/index.tsx
+++ b/app/src/views/EapSimplifiedForm/DeliveryAndBudget/index.tsx
@@ -1,14 +1,14 @@
 import { useCallback } from 'react';
 import {
     Container,
+    DataDisplay,
     Description,
+    DisplayLabel,
     Heading,
     InputSection,
-    Label,
     ListView,
     NumberInput,
     TextArea,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -108,9 +108,9 @@ function DeliveryAndBudget(props: Props) {
                             <Heading level={5}>
                                 {strings.nationalSocietySectionHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.deliverSectionCriteriaIntroduction1}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.deliverSectionCriteriaComment11}
@@ -122,9 +122,9 @@ function DeliveryAndBudget(props: Props) {
                             <Heading level={5}>
                                 {strings.budgetHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.deliverSectionCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.deliverSectionCriteriaComment21}
@@ -136,18 +136,18 @@ function DeliveryAndBudget(props: Props) {
                                     {strings.deliverSectionCriteriaComment23}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.deliverSectionCriteriaIntroduction3}
-                            </Label>
+                            </DisplayLabel>
                             <Description>
                                 {strings.deliverSectionCriteriaComment3}
                             </Description>
                             <Heading level={5}>
                                 {strings.coordinationSectionCriteriaHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.deliverSectionCriteriaIntroduction4}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.deliverSectionCriteriaComment41}
@@ -163,7 +163,7 @@ function DeliveryAndBudget(props: Props) {
         >
             <Container
                 heading={strings.deliverHeading}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -211,9 +211,9 @@ function DeliveryAndBudget(props: Props) {
                                             {strings.deliverInvolvedTooltipDescriptionOne}
                                         </Description>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.deliverInvolvedTooltipDescriptionTwo}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {resolveToComponent(
                                                     strings.deliverInvolvedTooltipDescriptionThree,
@@ -328,7 +328,7 @@ function DeliveryAndBudget(props: Props) {
                         />
                     </ListView>
                 )}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -351,7 +351,7 @@ function DeliveryAndBudget(props: Props) {
                         )}
                         withAsteriskOnTitle
                     >
-                        <TextOutput
+                        <DataDisplay
                             valueType="number"
                             strongLabel
                             label={strings.totalBudgetLabel}
diff --git a/app/src/views/EapSimplifiedForm/EarlyAction/index.tsx b/app/src/views/EapSimplifiedForm/EarlyAction/index.tsx
index 870e848dec..2f82ad2a20 100644
--- a/app/src/views/EapSimplifiedForm/EarlyAction/index.tsx
+++ b/app/src/views/EapSimplifiedForm/EarlyAction/index.tsx
@@ -1,10 +1,10 @@
 import {
     Container,
     Description,
+    DisplayLabel,
     Heading,
     InlineLayout,
     InputSection,
-    Label,
     ListView,
     NumberInput,
     SelectInput,
@@ -85,9 +85,9 @@ function EarlyAction(props: Props) {
                             <Heading level={5}>
                                 {strings.triggerModelSectionHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.earlySectionCriteriaIntroduction1}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.earlySectionCriteriaComment11}
@@ -105,9 +105,9 @@ function EarlyAction(props: Props) {
                             <Heading level={5}>
                                 {strings.eapActivationSectionCriteriaHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.earlySectionCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.earlySectionCriteriaComment21}
@@ -116,9 +116,9 @@ function EarlyAction(props: Props) {
                                     {strings.earlySectionCriteriaComment22}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.earlySectionCriteriaIntroduction3}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.earlySectionCriteriaComment31}
@@ -137,7 +137,7 @@ function EarlyAction(props: Props) {
         >
             <Container
                 heading={strings.actionHeading}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -268,7 +268,7 @@ function EarlyAction(props: Props) {
                     <ListView
                         layout="block"
                         spacing="none"
-                        withBackground
+                        backgroundColor="foreground"
                     >
                         <InputSection
                             title={strings.actionOperation}
@@ -346,9 +346,9 @@ function EarlyAction(props: Props) {
                                             {strings.actionsStatementTooltipDescriptionOne}
                                         </Description>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.actionsStatementTooltipDescriptionTwo}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.actionsStatementTooltipDescriptionThree}
                                             </Description>
@@ -370,9 +370,9 @@ function EarlyAction(props: Props) {
                                             </Description>
                                         </ListView>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.actionsStatementTooltipDescriptionFour}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.actionsStatementTooltipDescriptionFive}
                                             </Description>
@@ -484,9 +484,9 @@ function EarlyAction(props: Props) {
                                             {strings.justificationTooltipDescriptionOne}
                                         </Description>
                                         <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                            <Label strong>
+                                            <DisplayLabel strong>
                                                 {strings.justificationTooltipDescriptionTwo}
-                                            </Label>
+                                            </DisplayLabel>
                                             <Description>
                                                 {strings.justificationTooltipDescriptionThree}
                                             </Description>
diff --git a/app/src/views/EapSimplifiedForm/EnablingApproaches/ApproachesInput/index.tsx b/app/src/views/EapSimplifiedForm/EnablingApproaches/ApproachesInput/index.tsx
index 4465a0d606..04b4ba01d4 100644
--- a/app/src/views/EapSimplifiedForm/EnablingApproaches/ApproachesInput/index.tsx
+++ b/app/src/views/EapSimplifiedForm/EnablingApproaches/ApproachesInput/index.tsx
@@ -71,7 +71,7 @@ function OperationsBySectorInput(props: Props) {
                 <Button
                     name={index}
                     onClick={onRemove}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.approachRemoveButton}
                     disabled={disabled || readOnly}
                 >
@@ -79,7 +79,7 @@ function OperationsBySectorInput(props: Props) {
                 </Button>
             )}
             withPadding
-            withBackground
+            backgroundColor="foreground"
             initiallyExpanded
             withHeaderBorder
         >
diff --git a/app/src/views/EapSimplifiedForm/EnablingApproaches/index.tsx b/app/src/views/EapSimplifiedForm/EnablingApproaches/index.tsx
index c5358deb24..6c3e099d4e 100644
--- a/app/src/views/EapSimplifiedForm/EnablingApproaches/index.tsx
+++ b/app/src/views/EapSimplifiedForm/EnablingApproaches/index.tsx
@@ -6,9 +6,9 @@ import {
     Checklist,
     Container,
     Description,
+    DisplayLabel,
     Heading,
     InputSection,
-    Label,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -117,9 +117,9 @@ function EnablingApproaches(props: Props) {
                             <Heading level={5}>
                                 {strings.eapEnablingSectionHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.enablingSectionCriteriaIntroduction1}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.enablingSectionCriteriaComment11}
@@ -128,9 +128,9 @@ function EnablingApproaches(props: Props) {
                                     {strings.enablingSectionCriteriaComment12}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.enablingSectionCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.enablingSectionCriteriaComment21}
@@ -145,9 +145,9 @@ function EnablingApproaches(props: Props) {
                             <Heading level={5}>
                                 {strings.enablingMonitoringSectionCriteriaHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.enablingSectionCriteriaIntroduction3}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.enablingSectionCriteriaComment31}
@@ -163,7 +163,7 @@ function EnablingApproaches(props: Props) {
         >
             <Container
                 heading={strings.enablingApproachesTitle}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
diff --git a/app/src/views/EapSimplifiedForm/Overview/index.tsx b/app/src/views/EapSimplifiedForm/Overview/index.tsx
index 08edecf752..8d688503b0 100644
--- a/app/src/views/EapSimplifiedForm/Overview/index.tsx
+++ b/app/src/views/EapSimplifiedForm/Overview/index.tsx
@@ -4,8 +4,8 @@ import {
     Button,
     Container,
     Description,
+    DisplayLabel,
     InputSection,
-    Label,
     ListView,
     NumberInput,
 } from '@ifrc-go/ui';
@@ -99,12 +99,12 @@ function Overview(props: Props) {
                     content={(
                         <ListView withSpacingOpticalCorrection layout="block">
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
-                                <Label strong>
+                                <DisplayLabel strong>
                                     {strings.sectionCriteriaIntroduction11}
-                                </Label>
-                                <Label>
+                                </DisplayLabel>
+                                <DisplayLabel>
                                     {strings.sectionCriteriaIntroduction12}
-                                </Label>
+                                </DisplayLabel>
                             </ListView>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
@@ -121,7 +121,7 @@ function Overview(props: Props) {
         >
             <Container
                 heading={strings.detailsHeading}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -220,7 +220,7 @@ function Overview(props: Props) {
             </Container>
             <Container
                 heading={strings.contacts}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -229,7 +229,7 @@ function Overview(props: Props) {
                     <Container
                         heading={strings.nationalHeader}
                         headingLevel={4}
-                        variant="form"
+                        styleVariant="form"
                     >
                         <ListView
                             layout="block"
@@ -289,7 +289,7 @@ function Overview(props: Props) {
                     <Container
                         heading={strings.delegationHeader}
                         headingLevel={4}
-                        variant="form"
+                        styleVariant="form"
                     >
                         <ListView
                             layout="block"
@@ -320,7 +320,7 @@ function Overview(props: Props) {
                     <Container
                         heading={strings.regionalHeader}
                         headingLevel={4}
-                        variant="form"
+                        styleVariant="form"
                     >
                         <ListView
                             layout="block"
diff --git a/app/src/views/EapSimplifiedForm/PlannedOperations/OperationsInput/index.tsx b/app/src/views/EapSimplifiedForm/PlannedOperations/OperationsInput/index.tsx
index 9ce2a3fd86..3ea91419d8 100644
--- a/app/src/views/EapSimplifiedForm/PlannedOperations/OperationsInput/index.tsx
+++ b/app/src/views/EapSimplifiedForm/PlannedOperations/OperationsInput/index.tsx
@@ -72,7 +72,7 @@ function OperationsBySectorInput(props: Props) {
                 <Button
                     name={index}
                     onClick={onRemove}
-                    styleVariant="action"
+                    variant="tertiary"
                     disabled={disabled || readOnly}
                     title={strings.operationRemoveButton}
                 >
@@ -80,7 +80,7 @@ function OperationsBySectorInput(props: Props) {
                 </Button>
             )}
             withPadding
-            withBackground
+            backgroundColor="foreground"
             initiallyExpanded
             withHeaderBorder
             // FIXME: add non field error and error indicator
diff --git a/app/src/views/EapSimplifiedForm/PlannedOperations/index.tsx b/app/src/views/EapSimplifiedForm/PlannedOperations/index.tsx
index 8540733ec8..0c380e7b95 100644
--- a/app/src/views/EapSimplifiedForm/PlannedOperations/index.tsx
+++ b/app/src/views/EapSimplifiedForm/PlannedOperations/index.tsx
@@ -6,9 +6,9 @@ import {
     Checklist,
     Container,
     Description,
+    DisplayLabel,
     Heading,
     InputSection,
-    Label,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -116,9 +116,9 @@ function PlannedOperations(props: Props) {
                             <Heading level={5}>
                                 {strings.eapPlannedSectionHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.plannedSectionCriteriaIntroduction1}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.plannedSectionCriteriaComment11}
@@ -127,9 +127,9 @@ function PlannedOperations(props: Props) {
                                     {strings.plannedSectionCriteriaComment12}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.plannedSectionCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.plannedSectionCriteriaComment21}
@@ -144,9 +144,9 @@ function PlannedOperations(props: Props) {
                             <Heading level={5}>
                                 {strings.monitoringSectionCriteriaHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.plannedSectionCriteriaIntroduction3}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.plannedSectionCriteriaComment31}
@@ -162,7 +162,7 @@ function PlannedOperations(props: Props) {
         >
             <Container
                 heading={strings.plannedOperationsTitle}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
diff --git a/app/src/views/EapSimplifiedForm/RiskAnalysis/index.tsx b/app/src/views/EapSimplifiedForm/RiskAnalysis/index.tsx
index 972611e1de..ad7010f242 100644
--- a/app/src/views/EapSimplifiedForm/RiskAnalysis/index.tsx
+++ b/app/src/views/EapSimplifiedForm/RiskAnalysis/index.tsx
@@ -1,9 +1,9 @@
 import {
     Container,
     Description,
+    DisplayLabel,
     Heading,
     InputSection,
-    Label,
     ListView,
     TextArea,
 } from '@ifrc-go/ui';
@@ -61,9 +61,9 @@ function RiskAnalysis(props: Props) {
                             <Heading level={5}>
                                 {strings.riskHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.riskSectionCriteriaIntroduction1}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.riskSectionCriteriaComment11}
@@ -75,18 +75,18 @@ function RiskAnalysis(props: Props) {
                                     {strings.riskSectionCriteriaComment13}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.riskSectionCriteriaIntroduction2}
-                            </Label>
+                            </DisplayLabel>
                             <Description>
                                 {strings.riskSectionCriteriaComment2}
                             </Description>
                             <Heading level={5}>
                                 {strings.earlyActionSectionCriteriaHeading}
                             </Heading>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.riskSectionCriteriaIntroduction3}
-                            </Label>
+                            </DisplayLabel>
                             <ListView spacing="xs" layout="block" withSpacingOpticalCorrection>
                                 <Description>
                                     {strings.riskSectionCriteriaComment31}
@@ -98,9 +98,9 @@ function RiskAnalysis(props: Props) {
                                     {strings.riskSectionCriteriaComment33}
                                 </Description>
                             </ListView>
-                            <Label strong>
+                            <DisplayLabel strong>
                                 {strings.riskSectionCriteriaIntroduction4}
-                            </Label>
+                            </DisplayLabel>
                             <Description>
                                 {strings.riskSectionCriteriaComment4}
                             </Description>
@@ -111,7 +111,7 @@ function RiskAnalysis(props: Props) {
         >
             <Container
                 heading={strings.riskHeading}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
@@ -255,7 +255,7 @@ function RiskAnalysis(props: Props) {
             </Container>
             <Container
                 heading={strings.earlyActionSelection}
-                variant="form"
+                styleVariant="form"
             >
                 <ListView
                     layout="block"
diff --git a/app/src/views/EapSimplifiedForm/index.tsx b/app/src/views/EapSimplifiedForm/index.tsx
index c04c0ab532..caebf63d73 100644
--- a/app/src/views/EapSimplifiedForm/index.tsx
+++ b/app/src/views/EapSimplifiedForm/index.tsx
@@ -14,11 +14,11 @@ import { ShareFillIcon } from '@ifrc-go/icons';
 import {
     Alert,
     Button,
+    Dialog,
     IconButton,
     InlineLayout,
     ListView,
     Message,
-    Modal,
     Tab,
     TabList,
     TabPanel,
@@ -898,7 +898,7 @@ export function Component() {
                             </ListView>
                         </InlineLayout>
                         {shouldSubmit && (
-                            <Modal
+                            <Dialog
                                 heading={strings.submitConfirmHeading}
                                 onClose={handleRequestForApprovalCancel}
                                 pending={
@@ -921,13 +921,13 @@ export function Component() {
                                         <Alert
                                             name="form-error-warning"
                                             title={strings.submitFormErrorMessage}
-                                            type="warning"
+                                            variant="warning"
                                             withLightBackground
-                                            withoutShadow
+                                            boxShadow="none"
                                         />
                                     )}
                                 </ListView>
-                            </Modal>
+                            </Dialog>
                         )}
                         {showShareModal && isDefined(eapId) && (
                             <EapShareModal
diff --git a/app/src/views/EapSummaryExport/index.tsx b/app/src/views/EapSummaryExport/index.tsx
index c178253207..19300fb81e 100644
--- a/app/src/views/EapSummaryExport/index.tsx
+++ b/app/src/views/EapSummaryExport/index.tsx
@@ -4,7 +4,7 @@ import {
     useSearchParams,
 } from 'react-router-dom';
 import {
-    Label,
+    DisplayLabel,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -253,12 +253,12 @@ export function Component() {
                                 headingLevel={3}
                             >
                                 <div className={styles.indicatorItems}>
-                                    <Label textSize="sm" strong>
+                                    <DisplayLabel textSize="sm" strong>
                                         {strings.indicatorTitleLabel}
-                                    </Label>
-                                    <Label textSize="sm" strong>
+                                    </DisplayLabel>
+                                    <DisplayLabel textSize="sm" strong>
                                         {strings.indicatorTargetLabel}
-                                    </Label>
+                                    </DisplayLabel>
                                     {operation.indicators.map((indicator) => (
                                         <PrintableDataDisplay
                                             key={indicator.id}
@@ -380,12 +380,12 @@ export function Component() {
                                 headingLevel={3}
                             >
                                 <div className={styles.indicatorItems}>
-                                    <Label textSize="sm" strong>
+                                    <DisplayLabel textSize="sm" strong>
                                         {strings.indicatorTitleLabel}
-                                    </Label>
-                                    <Label textSize="sm" strong>
+                                    </DisplayLabel>
+                                    <DisplayLabel textSize="sm" strong>
                                         {strings.indicatorTargetLabel}
-                                    </Label>
+                                    </DisplayLabel>
                                     {approach.indicators.map((indicator) => (
                                         <PrintableDataDisplay
                                             key={indicator.id}
diff --git a/app/src/views/Emergencies/EmergenciesTable/index.tsx b/app/src/views/Emergencies/EmergenciesTable/index.tsx
index fdac36c377..f3361150d0 100644
--- a/app/src/views/Emergencies/EmergenciesTable/index.tsx
+++ b/app/src/views/Emergencies/EmergenciesTable/index.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import {
     Container,
     DateInput,
-    Pager,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -185,7 +185,7 @@ function EventItemsTable() {
                 </>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={eventResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/Emergencies/FieldReportsTable/index.tsx b/app/src/views/Emergencies/FieldReportsTable/index.tsx
index 09e6f515ec..70624d1ea3 100644
--- a/app/src/views/Emergencies/FieldReportsTable/index.tsx
+++ b/app/src/views/Emergencies/FieldReportsTable/index.tsx
@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import {
     Container,
     DateInput,
-    NumberOutput,
-    Pager,
+    NumberDisplay,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -134,7 +134,7 @@ function FieldReportsTable() {
             strings.fieldReportsTableTitle,
             {
                 numFieldReports: (
-                    <NumberOutput
+                    <NumberDisplay
                         value={fieldReportResponse?.count}
                     />
                 ),
@@ -174,7 +174,7 @@ function FieldReportsTable() {
                 </Link>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={fieldReportResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/Emergencies/FlashUpdatesTable/index.tsx b/app/src/views/Emergencies/FlashUpdatesTable/index.tsx
index 0f2935217d..048bee003f 100644
--- a/app/src/views/Emergencies/FlashUpdatesTable/index.tsx
+++ b/app/src/views/Emergencies/FlashUpdatesTable/index.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import {
     Container,
-    NumberOutput,
-    Pager,
+    NumberDisplay,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -131,7 +131,7 @@ function FlashUpdateTable() {
             strings.flashUpdateTableTitle,
             {
                 numFlashUpdates: (
-                    <NumberOutput
+                    <NumberDisplay
                         value={flashUpdateResponse?.count}
                     />
                 ),
@@ -146,7 +146,7 @@ function FlashUpdateTable() {
             heading={heading}
             withHeaderBorder
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={flashUpdateResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/Emergencies/Map/index.tsx b/app/src/views/Emergencies/Map/index.tsx
index 83650ebbd7..81a5135143 100644
--- a/app/src/views/Emergencies/Map/index.tsx
+++ b/app/src/views/Emergencies/Map/index.tsx
@@ -5,11 +5,11 @@ import {
 } from 'react';
 import {
     Container,
+    DataDisplay,
     Description,
     LegendItem,
     ListView,
     RadioInput,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -344,7 +344,7 @@ function EmergenciesMap(props: Props) {
                                         headingLevel={6}
                                         spacing="2xs"
                                     >
-                                        <TextOutput
+                                        <DataDisplay
                                             label={strings.emergenciesPeopleAffected}
                                             value={getNumAffected(event.details)}
                                             valueType="number"
diff --git a/app/src/views/Emergencies/index.tsx b/app/src/views/Emergencies/index.tsx
index aa82e51e3c..fc9e0a3727 100644
--- a/app/src/views/Emergencies/index.tsx
+++ b/app/src/views/Emergencies/index.tsx
@@ -12,7 +12,7 @@ import {
 import {
     BarChart,
     Container,
-    KeyFigureView,
+    KeyFigureCard,
     ListView,
     TimeSeriesChart,
 } from '@ifrc-go/ui';
@@ -231,28 +231,28 @@ export function Component() {
                         layout="grid"
                         numPreferredGridColumns={4}
                     >
-                        <KeyFigureView
+                        <KeyFigureCard
                             className={styles.keyFigure}
                             icon={<EmergenciesIcon />}
                             value={eventsResponse?.count}
                             valueType="number"
                             label={strings.emergenciesStatsTitle}
                         />
-                        <KeyFigureView
+                        <KeyFigureCard
                             className={styles.keyFigure}
                             icon={<TargetedPopulationIcon />}
                             value={numAffected}
                             valueType="number"
                             label={strings.emergenciesStatsAffected}
                         />
-                        <KeyFigureView
+                        <KeyFigureCard
                             className={styles.keyFigure}
                             icon={<FundingCoverageIcon />}
                             value={amountRequested}
                             valueType="number"
                             label={strings.emergenciesStatsRequested}
                         />
-                        <KeyFigureView
+                        <KeyFigureCard
                             className={styles.keyFigure}
                             icon={<FundingIcon />}
                             value={funding}
@@ -268,9 +268,9 @@ export function Component() {
                     heading={strings.emergenciesByTypeTitle}
                     className={styles.emergenciesByType}
                     withHeaderBorder
-                    withShadow
+                    boxShadow="md"
                     withPadding
-                    withBackground
+                    backgroundColor="foreground"
                     pending={eventsPending}
                 >
                     <BarChart
@@ -284,9 +284,9 @@ export function Component() {
                     heading={strings.emergenciesOverLastYearTitle}
                     className={styles.emergenciesOverLastYear}
                     withHeaderBorder
-                    withShadow
+                    boxShadow="md"
                     withPadding
-                    withBackground
+                    backgroundColor="foreground"
                 >
                     {aggregateEventResponse && (
                         <TimeSeriesChart
diff --git a/app/src/views/Emergency/index.tsx b/app/src/views/Emergency/index.tsx
index 8be8a851fa..8e21ba9876 100644
--- a/app/src/views/Emergency/index.tsx
+++ b/app/src/views/Emergency/index.tsx
@@ -15,7 +15,7 @@ import {
 import {
     Breadcrumbs,
     Button,
-    KeyFigureView,
+    KeyFigureCard,
     ListView,
     NavigationTabList,
 } from '@ifrc-go/ui';
@@ -301,30 +301,30 @@ export function Component() {
                     numPreferredGridColumns={3}
                 >
                     {isDefined(peopleTargeted) && (
-                        <KeyFigureView
+                        <KeyFigureCard
                             icon={<TargetedPopulationIcon />}
                             value={peopleTargeted}
                             valueType="number"
-                            valueOptions={{ compact: true }}
+                            compact
                             label={strings.emergencyPeopleTargetedLabel}
                         />
                     )}
                     {isDefined(fundingRequirements) && (
-                        <KeyFigureView
+                        <KeyFigureCard
                             icon={<FundingIcon />}
                             value={fundingRequirements}
                             valueType="number"
-                            valueOptions={{ compact: true }}
+                            compact
                             label={strings.emergencyFundingRequirementsLabel}
                         />
 
                     )}
                     {isDefined(funding) && (
-                        <KeyFigureView
+                        <KeyFigureCard
                             icon={<FundingCoverageIcon />}
                             value={funding}
                             valueType="number"
-                            valueOptions={{ compact: true }}
+                            compact
                             label={strings.emergencyFundingLabel}
                         />
                     )}
diff --git a/app/src/views/EmergencyActivities/ActivitiesMap/index.tsx b/app/src/views/EmergencyActivities/ActivitiesMap/index.tsx
index bbd86a4ba7..93d73d47aa 100644
--- a/app/src/views/EmergencyActivities/ActivitiesMap/index.tsx
+++ b/app/src/views/EmergencyActivities/ActivitiesMap/index.tsx
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
+    DataDisplay,
     LegendItem,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -163,7 +163,7 @@ function ActivitiesMap(props: Props) {
                 <GoMapContainer
                     title="Response Activity Map"
                     footer={(
-                        <TextOutput
+                        <DataDisplay
                             label={strings.numberOfProjects}
                             value={(
                                 <ListView
diff --git a/app/src/views/EmergencyActivities/ActivityActions/index.tsx b/app/src/views/EmergencyActivities/ActivityActions/index.tsx
index 042f0d4052..d913fb7a4a 100644
--- a/app/src/views/EmergencyActivities/ActivityActions/index.tsx
+++ b/app/src/views/EmergencyActivities/ActivityActions/index.tsx
@@ -4,7 +4,7 @@ import {
     PencilFillIcon,
     ShareBoxLineIcon,
 } from '@ifrc-go/icons';
-import { DropdownMenu } from '@ifrc-go/ui';
+import { Menu } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import DropdownMenuItem from '#components/DropdownMenuItem';
@@ -25,11 +25,12 @@ function ActivityActions(props: Props) {
     const strings = useTranslation(i18n);
 
     return (
-        <DropdownMenu
+        <Menu
             className={className}
-            labelStyleVariant="action"
+            labelVariant="tertiary"
             withoutDropdownIcon
             label={<MoreFillIcon />}
+            ariaLabel="Actions"
             persistent
         >
             <DropdownMenuItem
@@ -56,7 +57,7 @@ function ActivityActions(props: Props) {
             >
                 {strings.threeWDuplicate}
             </DropdownMenuItem>
-        </DropdownMenu>
+        </Menu>
     );
 }
 
diff --git a/app/src/views/EmergencyActivities/ActivityDetail/index.tsx b/app/src/views/EmergencyActivities/ActivityDetail/index.tsx
index 60f1d0b47b..c7d112f7eb 100644
--- a/app/src/views/EmergencyActivities/ActivityDetail/index.tsx
+++ b/app/src/views/EmergencyActivities/ActivityDetail/index.tsx
@@ -10,15 +10,15 @@ import {
     Button,
     ButtonLayout,
     Container,
+    DataDisplay,
     ExpandableContainer,
-    InfoPopup,
     InlineLayout,
     ListView,
-    NumberOutput,
+    MoreInfo,
+    NumberDisplay,
     ProgressBar,
     RawList,
-    ReducedListDisplay,
-    TextOutput,
+    TruncatedList,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -65,11 +65,11 @@ function Activity({ activity }: ActivityProps) {
         <Container
             heading={activity.action_details?.title ?? activity.custom_action}
             headingLevel={6}
-            withDarkBackground
+            backgroundColor="background"
             withPadding
             spacing="xs"
         >
-            <TextOutput
+            <DataDisplay
                 label={strings.peopleReached}
                 value={getPeopleReachedInActivity(activity)}
                 description={activity.details}
@@ -135,7 +135,7 @@ function ProjectListItem(props: ProjectListItemProps) {
             withoutWrapInHeader
             footerActions={(
                 <Button
-                    styleVariant="action"
+                    variant="tertiary"
                     name={undefined}
                     onClick={detailsShown ? hideDetails : showDetails}
                     textSize="sm"
@@ -149,14 +149,14 @@ function ProjectListItem(props: ProjectListItemProps) {
                     spacing="xs"
                     withSpacingOpticalCorrection
                 >
-                    <TextOutput
+                    <DataDisplay
                         value={project.start_date}
                         valueType="date"
                         textSize="sm"
                         description={isDefined(project.end_date) && '-'}
                     />
                     {isDefined(project.end_date) && (
-                        <TextOutput
+                        <DataDisplay
                             value={project.end_date}
                             valueType="date"
                             textSize="sm"
@@ -164,7 +164,7 @@ function ProjectListItem(props: ProjectListItemProps) {
                     )}
                 </ListView>
             )}
-            withBackground
+            backgroundColor="foreground"
             withPadding
             spacing="sm"
         >
@@ -173,7 +173,7 @@ function ProjectListItem(props: ProjectListItemProps) {
                 spacing="xs"
             >
                 {project.districts_details && (
-                    <ReducedListDisplay
+                    <TruncatedList
                         list={project.districts_details}
                         keySelector={numericIdSelector}
                         renderer={DistrictNameOutput}
@@ -230,18 +230,18 @@ function ActivityDetail(props: Props) {
                     spacing="sm"
                     after={(
                         <ListView spacing="xs">
-                            <NumberOutput
+                            <NumberDisplay
                                 value={projectCount}
                             />
-                            <InfoPopup
-                                description={resolveToString(
+                            <MoreInfo>
+                                {resolveToString(
                                     strings.completedProject,
                                     {
                                         totalProjects: projectCount,
                                         completeProjectCount,
                                     },
                                 )}
-                            />
+                            </MoreInfo>
                         </ListView>
                     )}
                 >
@@ -252,7 +252,7 @@ function ActivityDetail(props: Props) {
                 </InlineLayout>
             )}
             withPadding
-            withDarkBackground
+            backgroundColor="background"
             spacing="sm"
         >
             <ListView
diff --git a/app/src/views/EmergencyActivities/index.tsx b/app/src/views/EmergencyActivities/index.tsx
index fb733e5e6a..d1f8c206d2 100644
--- a/app/src/views/EmergencyActivities/index.tsx
+++ b/app/src/views/EmergencyActivities/index.tsx
@@ -3,11 +3,11 @@ import { useOutletContext } from 'react-router-dom';
 import { InformationLineIcon } from '@ifrc-go/icons';
 import {
     Container,
-    InfoPopup,
     InlineLayout,
     KeyFigure,
     ListView,
-    Pager,
+    MoreInfo,
+    Pagination,
     PieChart,
     Table,
 } from '@ifrc-go/ui';
@@ -353,9 +353,9 @@ export function Component() {
                     numPreferredGridColumns={3}
                 >
                     <Container
-                        withShadow
+                        boxShadow="md"
                         withPadding
-                        withBackground
+                        backgroundColor="foreground"
                     >
                         <ListView
                             layout="grid"
@@ -369,13 +369,13 @@ export function Component() {
                             <KeyFigure
                                 value={peopleReached}
                                 valueType="number"
-                                valueOptions={{ compact: true }}
+                                compact
                                 label={(
                                     <InlineLayout
                                         after={(
-                                            <InfoPopup
-                                                description={strings.peopleReachedTooltip}
-                                            />
+                                            <MoreInfo>
+                                                {strings.peopleReachedTooltip}
+                                            </MoreInfo>
                                         )}
                                     >
                                         {strings.peopleInNeedReached}
@@ -385,9 +385,9 @@ export function Component() {
                         </ListView>
                     </Container>
                     <Container
-                        withShadow
+                        boxShadow="md"
                         withPadding
-                        withBackground
+                        backgroundColor="foreground"
                     >
                         <ListView
                             layout="grid"
@@ -410,9 +410,9 @@ export function Component() {
                         </ListView>
                     </Container>
                     <Container
-                        withShadow
+                        boxShadow="md"
                         withPadding
-                        withBackground
+                        backgroundColor="foreground"
                     >
                         <ListView
                             layout="grid"
@@ -446,7 +446,7 @@ export function Component() {
                     />
                 )}
                 footerActions={(
-                    <Pager
+                    <Pagination
                         activePage={activePage}
                         onActivePageChange={setActivePage}
                         itemsCount={filteredProjectList.length}
@@ -464,8 +464,8 @@ export function Component() {
                             emptyMessage={strings.dataNotAvailable}
                             headingLevel={4}
                             withContentOverflow
-                            withBackground
-                            withShadow
+                            backgroundColor="foreground"
+                            boxShadow="md"
                             withPadding
                             withoutSpacingOpticalCorrection
                         >
diff --git a/app/src/views/EmergencyAdditionalTab/index.tsx b/app/src/views/EmergencyAdditionalTab/index.tsx
index ac12f37daf..76823a2de3 100644
--- a/app/src/views/EmergencyAdditionalTab/index.tsx
+++ b/app/src/views/EmergencyAdditionalTab/index.tsx
@@ -6,7 +6,7 @@ import {
     useOutletContext,
     useParams,
 } from 'react-router-dom';
-import { HtmlOutput } from '@ifrc-go/ui';
+import { HtmlDisplay } from '@ifrc-go/ui';
 import { isDefined } from '@togglecorp/fujs';
 
 import TabPage from '#components/TabPage';
@@ -53,7 +53,7 @@ export function Component(props: Props) {
     return (
         <TabPage>
             {additionalTab?.snippets?.map((snippet) => (
-                <HtmlOutput
+                <HtmlDisplay
                     key={snippet.id}
                     value={snippet.snippet}
                 />
diff --git a/app/src/views/EmergencyDetails/FieldReportStats/index.tsx b/app/src/views/EmergencyDetails/FieldReportStats/index.tsx
index 1c67a40dee..70a450bdbc 100644
--- a/app/src/views/EmergencyDetails/FieldReportStats/index.tsx
+++ b/app/src/views/EmergencyDetails/FieldReportStats/index.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import {
-    DateOutput,
+    DataDisplay,
+    DateDisplay,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
@@ -45,7 +45,7 @@ function FieldReportStats(props: Props) {
                 </Link>
             ),
             date: (
-                <DateOutput value={report.updated_at ?? report.created_at} />
+                <DateDisplay value={report.updated_at ?? report.created_at} />
             ),
         },
     );
@@ -92,30 +92,30 @@ function FieldReportStats(props: Props) {
                 layout="block"
                 withSpacingOpticalCorrection
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.potentiallyAffected}
                     valueType="number"
                     strongValue
                     value={numPotentiallyAffected}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.highestRisk}
                     valueType="number"
                     strongValue
                     value={numHighestRisk}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.affectedPopCenters}
                     strongValue
                     value={affectedPopulationCenters}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.assistedByGovernment}
                     valueType="number"
                     strongValue
                     value={report.gov_num_assisted}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.assistedByRCRC}
                     valueType="number"
                     strongValue
@@ -132,36 +132,36 @@ function FieldReportStats(props: Props) {
                 layout="block"
                 withSpacingOpticalCorrection
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.cases}
                     valueType="number"
                     strongValue
                     value={report.epi_cases}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.numberOfDead}
                     valueType="number"
                     strongValue
                     value={report.epi_num_dead}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.epiSource}
                     strongValue
                     value={report.epi_figures_source_display}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.assisted}
                     valueType="number"
                     strongValue
                     value={numAssisted}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.localStaff}
                     valueType="number"
                     strongValue
                     value={report.num_localstaff}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.volunteers}
                     valueType="number"
                     strongValue
@@ -177,60 +177,60 @@ function FieldReportStats(props: Props) {
                 layout="block"
                 withSpacingOpticalCorrection
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.cases}
                     valueType="number"
                     strongValue
                     value={report.epi_cases}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.suspectedCases}
                     valueType="number"
                     strongValue
                     value={report.epi_suspected_cases}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.probableCases}
                     valueType="number"
                     strongValue
                     value={report.epi_probable_cases}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.confirmedCases}
                     valueType="number"
                     strongValue
                     value={report.epi_confirmed_cases}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.numberOfDead}
                     valueType="number"
                     strongValue
                     value={report.epi_num_dead}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.epiSource}
                     strongValue
                     value={report.epi_figures_source_display}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.assisted}
                     valueType="number"
                     strongValue
                     value={numAssisted}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.localStaff}
                     valueType="number"
                     strongValue
                     value={report.num_localstaff}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.volunteers}
                     valueType="number"
                     strongValue
                     value={report.num_volunteers}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.delegates}
                     valueType="number"
                     strongValue
@@ -245,55 +245,55 @@ function FieldReportStats(props: Props) {
             layout="block"
             withSpacingOpticalCorrection
         >
-            <TextOutput
+            <DataDisplay
                 label={strings.affected}
                 valueType="number"
                 strongValue
                 value={numAffected}
             />
-            <TextOutput
+            <DataDisplay
                 label={strings.injured}
                 valueType="number"
                 strongValue
                 value={numInjured}
             />
-            <TextOutput
+            <DataDisplay
                 label={strings.dead}
                 valueType="number"
                 strongValue
                 value={numDead}
             />
-            <TextOutput
+            <DataDisplay
                 label={strings.missing}
                 valueType="number"
                 strongValue
                 value={numMissing}
             />
-            <TextOutput
+            <DataDisplay
                 label={strings.displaced}
                 valueType="number"
                 strongValue
                 value={numDisplaced}
             />
-            <TextOutput
+            <DataDisplay
                 label={strings.assisted}
                 valueType="number"
                 strongValue
                 value={numAssisted}
             />
-            <TextOutput
+            <DataDisplay
                 label={strings.localStaff}
                 valueType="number"
                 strongValue
                 value={report.num_localstaff}
             />
-            <TextOutput
+            <DataDisplay
                 label={strings.volunteers}
                 valueType="number"
                 strongValue
                 value={report.num_volunteers}
             />
-            <TextOutput
+            <DataDisplay
                 label={strings.delegates}
                 valueType="number"
                 strongValue
diff --git a/app/src/views/EmergencyDetails/index.tsx b/app/src/views/EmergencyDetails/index.tsx
index 788ad2e35a..59c0caed44 100644
--- a/app/src/views/EmergencyDetails/index.tsx
+++ b/app/src/views/EmergencyDetails/index.tsx
@@ -2,12 +2,12 @@ import { useMemo } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
+    DataDisplay,
     Description,
-    HtmlOutput,
-    InfoPopup,
-    KeyFigureView,
+    HtmlDisplay,
+    KeyFigureCard,
     ListView,
-    TextOutput,
+    MoreInfo,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
@@ -157,7 +157,7 @@ export function Component() {
                     >
                         {emergencyResponse?.key_figures.map(
                             (keyFigure) => (
-                                <KeyFigureView
+                                <KeyFigureCard
                                     key={keyFigure.id}
                                     // FIXME: fix typing in server (medium priority)
                                     // FIXME: Rounding this because it was previously rounded
@@ -185,7 +185,7 @@ export function Component() {
                                             </div>
                                         </ListView>
                                     )}
-                                    withShadow
+                                    boxShadow="md"
                                 />
                             ),
                         )}
@@ -202,7 +202,7 @@ export function Component() {
                         withSpacingOpticalCorrection
                         numPreferredGridColumns={3}
                     >
-                        <TextOutput
+                        <DataDisplay
                             label={strings.disasterCategorisation}
                             value={(
                                 <ListView
@@ -215,58 +215,56 @@ export function Component() {
                                         level={emergencyResponse.ifrc_severity_level}
                                     />
                                     {emergencyResponse.ifrc_severity_level_update_date && (
-                                        <InfoPopup
-                                            description={(
-                                                <TextOutput
-                                                    label={strings.severityLevelUpdateDateLabel}
-                                                    value={
-                                                        emergencyResponse
-                                                            .ifrc_severity_level_update_date
-                                                    }
-                                                    valueType="date"
-                                                />
-                                            )}
-                                        />
+                                        <MoreInfo>
+                                            <DataDisplay
+                                                label={strings.severityLevelUpdateDateLabel}
+                                                value={
+                                                    emergencyResponse
+                                                        .ifrc_severity_level_update_date
+                                                }
+                                                valueType="date"
+                                            />
+                                        </MoreInfo>
                                     )}
                                 </ListView>
                             )}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.disasterType}
                             value={disasterType?.name}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.startDate}
                             valueType="date"
                             value={emergencyResponse?.disaster_start_date}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.visibility}
                             value={isDefined(emergencyResponse.visibility)
                                 ? visibilityMap?.[emergencyResponse.visibility]
                                 : '--'}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.MDRCode}
                             value={mdrCode}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.GLIDENumber}
                             value={emergencyResponse?.glide}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.assistanceRequestedByNS}
                             valueType="boolean"
                             value={assistanceIsRequestedByNS}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={strings.assistanceRequestedByGovernment}
                             valueType="boolean"
                             value={assistanceIsRequestedByCountry}
@@ -283,7 +281,7 @@ export function Component() {
                         heading={strings.situationalOverviewTitle}
                         withHeaderBorder
                     >
-                        <HtmlOutput
+                        <HtmlDisplay
                             value={emergencyResponse.summary}
                         />
                     </Container>
@@ -376,8 +374,8 @@ export function Component() {
                                                 headingLevel={6}
                                                 heading={contact.name}
                                                 withPadding
-                                                withShadow
-                                                withBackground
+                                                boxShadow="md"
+                                                backgroundColor="foreground"
                                             >
                                                 <ListView
                                                     layout="block"
diff --git a/app/src/views/EmergencyReportAndDocument/index.tsx b/app/src/views/EmergencyReportAndDocument/index.tsx
index dac6b34195..94cd6dcc81 100644
--- a/app/src/views/EmergencyReportAndDocument/index.tsx
+++ b/app/src/views/EmergencyReportAndDocument/index.tsx
@@ -9,7 +9,7 @@ import {
     Description,
     Image,
     ListView,
-    Pager,
+    Pagination,
     RawList,
     Table,
 } from '@ifrc-go/ui';
@@ -289,8 +289,8 @@ export function Component() {
                         {emergencyResponse.featured_documents.map((featuredDocument) => (
                             <Container
                                 key={featuredDocument.id}
-                                withBackground
-                                withShadow
+                                backgroundColor="foreground"
+                                boxShadow="md"
                                 withPadding
                                 withoutSpacingOpticalCorrection
                                 spacing="sm"
@@ -352,8 +352,8 @@ export function Component() {
                                 headingLevel={6}
                                 withHeaderBorder
                                 withPadding
-                                withShadow
-                                withBackground
+                                boxShadow="md"
+                                backgroundColor="foreground"
                                 withContentOverflow
                                 withFixedHeight
                                 spacing="sm"
@@ -385,7 +385,7 @@ export function Component() {
                     )}
                     withHeaderBorder
                     footerActions={(
-                        <Pager
+                        <Pagination
                             activePage={fieldReportsPage}
                             itemsCount={emergencyResponse?.field_reports.length ?? 0}
                             maxItemsPerPage={PAGE_SIZE}
@@ -412,7 +412,7 @@ export function Component() {
                     )}
                     withHeaderBorder
                     footerActions={(
-                        <Pager
+                        <Pagination
                             activePage={appealDocumentsPage}
                             itemsCount={appealDocumentsResponse?.count ?? 0}
                             maxItemsPerPage={PAGE_SIZE}
diff --git a/app/src/views/EmergencySurge/DeployedErusTable/index.tsx b/app/src/views/EmergencySurge/DeployedErusTable/index.tsx
index a43f58468f..e813256924 100644
--- a/app/src/views/EmergencySurge/DeployedErusTable/index.tsx
+++ b/app/src/views/EmergencySurge/DeployedErusTable/index.tsx
@@ -4,7 +4,7 @@ import {
 } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -176,7 +176,7 @@ export default function DeployedErusTable(props: Props) {
                 </Link>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={eruResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx
index fe6c986c28..dcc460339f 100644
--- a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx
+++ b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx
@@ -4,7 +4,7 @@ import {
 } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -220,7 +220,7 @@ export default function RapidResponsePersonnelTable(props: Props) {
                 </Link>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={personnelResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/EmergencySurge/SurgeTable/index.tsx b/app/src/views/EmergencySurge/SurgeTable/index.tsx
index 54f2affc9b..e45982a92d 100644
--- a/app/src/views/EmergencySurge/SurgeTable/index.tsx
+++ b/app/src/views/EmergencySurge/SurgeTable/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import {
     Container,
-    Pager,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -199,7 +199,7 @@ export default function SurgeTable(props: Props) {
                 </Link>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={projectActivePage}
                     onActivePageChange={setProjectActivePage}
                     itemsCount={surgeResponse?.count ?? 0}
diff --git a/app/src/views/EmergencySurge/index.tsx b/app/src/views/EmergencySurge/index.tsx
index 5616a55670..267b8e7e06 100644
--- a/app/src/views/EmergencySurge/index.tsx
+++ b/app/src/views/EmergencySurge/index.tsx
@@ -4,7 +4,7 @@ import {
     EmergencyResponseUnitIcon,
 } from '@ifrc-go/icons';
 import {
-    KeyFigureView,
+    KeyFigureCard,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -42,23 +42,23 @@ export function Component() {
                 layout="grid"
                 numPreferredGridColumns={4}
             >
-                <KeyFigureView
+                <KeyFigureCard
                     icon={<DeployedIcon />}
                     className={styles.keyFigure}
                     value={deploymentResponse?.active_rapid_response_personnel}
                     valueType="number"
-                    valueOptions={{ compact: true }}
+                    compact
                     label={strings.emergencyActiveDeployments}
-                    withShadow
+                    boxShadow="md"
                 />
-                <KeyFigureView
+                <KeyFigureCard
                     icon={<EmergencyResponseUnitIcon />}
                     className={styles.keyFigure}
                     value={deploymentResponse?.active_emergency_response_units}
                     valueType="number"
-                    valueOptions={{ compact: true }}
+                    compact
                     label={strings.emergencyActiveErus}
-                    withShadow
+                    boxShadow="md"
                 />
             </ListView>
             <SurgeTable emergencyId={emergencyId} />
diff --git a/app/src/views/EruReadinessForm/index.tsx b/app/src/views/EruReadinessForm/index.tsx
index 7137caa0f3..c45ad56643 100644
--- a/app/src/views/EruReadinessForm/index.tsx
+++ b/app/src/views/EruReadinessForm/index.tsx
@@ -356,7 +356,7 @@ export function Component() {
                     <Button
                         name={undefined}
                         onClick={handleFormSubmit}
-                        styleVariant="filled"
+                        variant="primary"
                         disabled={pending || isNotDefined(value.eru_owner)}
                     >
                         {strings.eruSaveAndCloseButton}
diff --git a/app/src/views/FieldReportDetails/CovidNumericDetails/index.tsx b/app/src/views/FieldReportDetails/CovidNumericDetails/index.tsx
index 93286e9144..82742fd16e 100644
--- a/app/src/views/FieldReportDetails/CovidNumericDetails/index.tsx
+++ b/app/src/views/FieldReportDetails/CovidNumericDetails/index.tsx
@@ -1,6 +1,6 @@
 import {
+    DataDisplay,
     KeyFigure,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -53,7 +53,7 @@ function CovidNumericDetails(props: Props) {
                 valueType="number"
             />
             {/* FIXME: This is not there in old details */}
-            <TextOutput
+            <DataDisplay
                 label={strings.covidSourceLabel}
                 value={value?.other_sources}
                 strongLabel
diff --git a/app/src/views/FieldReportDetails/index.tsx b/app/src/views/FieldReportDetails/index.tsx
index 3e17b32b80..e7c77f48ce 100644
--- a/app/src/views/FieldReportDetails/index.tsx
+++ b/app/src/views/FieldReportDetails/index.tsx
@@ -7,14 +7,14 @@ import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
 import {
     Breadcrumbs,
     Container,
-    DateOutput,
+    DataDisplay,
+    DateDisplay,
     Description,
-    HtmlOutput,
+    DisplayLabel,
+    HtmlDisplay,
     InlineLayout,
-    Label,
     ListView,
     Message,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -298,7 +298,7 @@ export function Component() {
                         {resolveToComponent(strings.lastUpdatedByLabel, {
                             user: user || '--',
                             date: (
-                                <DateOutput
+                                <DateDisplay
                                     value={lastTouchedAt}
                                 />
                             ),
@@ -335,34 +335,34 @@ export function Component() {
                         layout="grid"
                         numPreferredGridColumns={3}
                     >
-                        <TextOutput
+                        <DataDisplay
                             label={strings.visibilityLabel}
                             value={visibility}
                             strongValue
                         />
                         {reportType === 'EW' ? (
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.forecastedDateLabel}
                                 value={startDate}
                                 valueType="date"
                                 strongValue
                             />
                         ) : (
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.startDateLabel}
                                 value={startDate}
                                 valueType="date"
                                 strongValue
                             />
                         )}
-                        <TextOutput
+                        <DataDisplay
                             label={strings.reportDateLabel}
                             value={reportDate}
                             valueType="date"
                             strongValue
                         />
                         {reportType === 'COVID' && (
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.covidFieldReportLabel}
                                 value
                                 valueType="boolean"
@@ -379,14 +379,14 @@ export function Component() {
                                 numPreferredGridColumns={3}
                             >
                                 {(reportType === 'EPI' || reportType === 'COVID') && isTruthyString(sitFieldsDate) && (
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.dateOfData}
                                         value={sitFieldsDate}
                                         valueType="date"
                                     />
                                 )}
                                 {(reportType === 'EPI' || reportType === 'COVID') && isTruthyString(epiSources) && (
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.epiSource}
                                         value={epiSources}
                                     />
@@ -428,7 +428,7 @@ export function Component() {
                             heading={strings.notesLabel}
                             withHeaderBorder
                         >
-                            <HtmlOutput
+                            <HtmlDisplay
                                 value={epiNotesSinceLastFr}
                             />
                         </Container>
@@ -438,7 +438,7 @@ export function Component() {
                             heading={strings.sourcesForDataMarkedLabel}
                             withHeaderBorder
                         >
-                            <HtmlOutput
+                            <HtmlDisplay
                                 value={otherSources}
                             />
                         </Container>
@@ -449,7 +449,7 @@ export function Component() {
                             heading={reportType === 'EW' ? strings.riskAnalysisTitle : strings.descriptionTitle}
                             withHeaderBorder
                         >
-                            <HtmlOutput
+                            <HtmlDisplay
                                 value={description}
                             />
                         </Container>
@@ -464,13 +464,13 @@ export function Component() {
                             withSpacingOpticalCorrection
                             spacing="sm"
                         >
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.governmentAssistanceLabel}
                                 value={requestAssistance}
                                 valueType="boolean"
                                 strongValue
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.nsAssistanceLabel}
                                 value={nsRequestAssistance}
                                 valueType="boolean"
@@ -541,19 +541,19 @@ export function Component() {
                                                     </InlineLayout>
                                                 ))}
                                                 {reportType === 'COVID' && value.category === 'Health' && (
-                                                    <TextOutput
+                                                    <DataDisplay
                                                         label={strings.fieldReportDetailsNotes}
                                                         value={notesHealth}
                                                     />
                                                 )}
                                                 {reportType === 'COVID' && value.category === 'NS Institutional Strengthening' && (
-                                                    <TextOutput
+                                                    <DataDisplay
                                                         label={strings.fieldReportDetailsNotes}
                                                         value={notesNs}
                                                     />
                                                 )}
                                                 {reportType === 'COVID' && value.category === 'Socioeconomic Interventions' && (
-                                                    <TextOutput
+                                                    <DataDisplay
                                                         label={strings.fieldReportDetailsNotes}
                                                         value={notesSocioeco}
                                                     />
@@ -561,7 +561,7 @@ export function Component() {
                                             </ListView>
                                         </Container>
                                     ))}
-                                    <TextOutput
+                                    <DataDisplay
                                         strongLabel
                                         label={strings.fieldReportDetailsSummary}
                                         value={actionTaken.summary}
@@ -575,7 +575,7 @@ export function Component() {
                             heading={strings.actionsTakenByOthersHeading}
                             withHeaderBorder
                         >
-                            <HtmlOutput
+                            <HtmlDisplay
                                 value={actionsOthers}
                             />
                         </Container>
@@ -616,7 +616,7 @@ export function Component() {
                             withHeaderBorder
                         >
                             {plannedResponses.map((plannedResponse) => (
-                                <TextOutput
+                                <DataDisplay
                                     key={plannedResponse.key}
                                     label={plannedResponse.title}
                                     value={isDefined(plannedResponse.value)
@@ -632,7 +632,7 @@ export function Component() {
                             withHeaderBorder
                         >
                             {sources.map((source) => (
-                                <TextOutput
+                                <DataDisplay
                                     key={source.id}
                                     label={source.stype}
                                     value={source.spec}
@@ -656,9 +656,9 @@ export function Component() {
                                         withSpacingOpticalCorrection
                                         spacing="sm"
                                     >
-                                        <Label strong>
+                                        <DisplayLabel strong>
                                             {contact.ctype}
-                                        </Label>
+                                        </DisplayLabel>
                                         <div>
                                             {joinList([
                                                 isTruthyString(contact.name)
diff --git a/app/src/views/FieldReportForm/ActionsFields/index.tsx b/app/src/views/FieldReportForm/ActionsFields/index.tsx
index 89c907bdd4..a6f3dba372 100644
--- a/app/src/views/FieldReportForm/ActionsFields/index.tsx
+++ b/app/src/views/FieldReportForm/ActionsFields/index.tsx
@@ -275,7 +275,7 @@ function ActionsFields(props: Props) {
                 <ListView
                     layout="grid"
                     numPreferredGridColumns={3}
-                    withBackground
+                    backgroundColor="foreground"
                     withPadding
                     spacing="lg"
                 >
diff --git a/app/src/views/FieldReportForm/ContextFields/TitlePreview/index.tsx b/app/src/views/FieldReportForm/ContextFields/TitlePreview/index.tsx
index 501af424ab..97f02ad6bc 100644
--- a/app/src/views/FieldReportForm/ContextFields/TitlePreview/index.tsx
+++ b/app/src/views/FieldReportForm/ContextFields/TitlePreview/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import useAlert from '#hooks/useAlert';
@@ -63,7 +63,7 @@ function TitlePreview(props: Props) {
     });
 
     return (
-        <TextOutput
+        <DataDisplay
             value={generateTitleResponse?.title}
             label={strings.titlePreview}
             strongLabel
diff --git a/app/src/views/FieldReportForm/ContextFields/index.tsx b/app/src/views/FieldReportForm/ContextFields/index.tsx
index d736a6d1a4..2ab0d4c1d7 100644
--- a/app/src/views/FieldReportForm/ContextFields/index.tsx
+++ b/app/src/views/FieldReportForm/ContextFields/index.tsx
@@ -6,12 +6,12 @@ import { useParams } from 'react-router-dom';
 import {
     BooleanInput,
     Container,
+    DataDisplay,
     DateInput,
     InputSection,
     ListView,
     RadioInput,
     TextInput,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -317,7 +317,7 @@ function ContextFields(props: Props) {
                                         id={value.id}
                                     />
                                 ) : (
-                                    <TextOutput
+                                    <DataDisplay
                                         value={value.summary}
                                         label={isDefined(fieldReportId)
                                             ? strings.originalTitle : strings.generatedTitlePreview}
diff --git a/app/src/views/FieldReportForm/SituationFields/index.tsx b/app/src/views/FieldReportForm/SituationFields/index.tsx
index 7d178ebf16..15eaa56b7e 100644
--- a/app/src/views/FieldReportForm/SituationFields/index.tsx
+++ b/app/src/views/FieldReportForm/SituationFields/index.tsx
@@ -83,7 +83,7 @@ function SituationFields(props: Props) {
                         layout="grid"
                         numPreferredGridColumns={3}
                         withPadding
-                        withBackground
+                        backgroundColor="foreground"
                         spacing="lg"
                     >
                         <NumberInput
diff --git a/app/src/views/FlashUpdateDetails/FlashUpdateExportModal/index.tsx b/app/src/views/FlashUpdateDetails/FlashUpdateExportModal/index.tsx
index 18852a80eb..ef53449866 100644
--- a/app/src/views/FlashUpdateDetails/FlashUpdateExportModal/index.tsx
+++ b/app/src/views/FlashUpdateDetails/FlashUpdateExportModal/index.tsx
@@ -1,6 +1,6 @@
 import {
+    Dialog,
     Message,
-    Modal,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { isDefined } from '@togglecorp/fujs';
@@ -44,7 +44,7 @@ function FlashUpdateExportModal(props: Props) {
     });
 
     return (
-        <Modal
+        <Dialog
             heading={strings.flashUpdateExportTitle}
             onClose={onClose}
         >
@@ -75,7 +75,7 @@ function FlashUpdateExportModal(props: Props) {
                     )}
                 />
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/FlashUpdateDetails/FlashUpdateShareModal/index.tsx b/app/src/views/FlashUpdateDetails/FlashUpdateShareModal/index.tsx
index 59d94e0273..e8178c9cd6 100644
--- a/app/src/views/FlashUpdateDetails/FlashUpdateShareModal/index.tsx
+++ b/app/src/views/FlashUpdateDetails/FlashUpdateShareModal/index.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import {
     Button,
+    Dialog,
     ListView,
     Message,
-    Modal,
     MultiSelectInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -90,7 +90,7 @@ function FlashUpdateShareModal(props: Props) {
     const pending = sharePending || donorResponsePending || donorGroupResponsePending;
 
     return (
-        <Modal
+        <Dialog
             heading={strings.flashUpdateShareTitle}
             onClose={onClose}
             footerActions={(
@@ -133,7 +133,7 @@ function FlashUpdateShareModal(props: Props) {
                     name={undefined}
                 />
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/FlashUpdateDetails/index.tsx b/app/src/views/FlashUpdateDetails/index.tsx
index 0b117f51d7..dbd737b688 100644
--- a/app/src/views/FlashUpdateDetails/index.tsx
+++ b/app/src/views/FlashUpdateDetails/index.tsx
@@ -11,13 +11,13 @@ import {
     Breadcrumbs,
     Button,
     Container,
-    DateOutput,
-    HtmlOutput,
+    DataDisplay,
+    DateDisplay,
+    DisplayLabel,
+    HtmlDisplay,
     Image,
-    Label,
     ListView,
     Message,
-    TextOutput,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -199,7 +199,7 @@ export function Component() {
                             heading={strings.flashUpdateSituationalOverviewHeading}
                             withHeaderBorder
                         >
-                            <HtmlOutput
+                            <HtmlDisplay
                                 value={flashUpdateResponse.situational_overview}
                             />
                         </Container>
@@ -259,7 +259,7 @@ export function Component() {
                                     >
                                         <ListView layout="block">
                                             {isTruthyString(actionTaken.summary) && (
-                                                <TextOutput
+                                                <DataDisplay
                                                     label={strings.flashUpdateActionDescription}
                                                     value={actionTaken.summary}
                                                     strongLabel
@@ -274,9 +274,9 @@ export function Component() {
                                                     <ListView withWrap>
                                                         {actionTaken.action_details.map(
                                                             (actionDetail) => (
-                                                                <Label key={actionDetail.id}>
+                                                                <DisplayLabel key={actionDetail.id}>
                                                                     {actionDetail.name}
-                                                                </Label>
+                                                                </DisplayLabel>
                                                             ),
                                                         )}
                                                     </ListView>
@@ -304,12 +304,12 @@ export function Component() {
                                             key={reference.id}
                                             heading={reference.source_description}
                                             headerDescription={(
-                                                <DateOutput value={reference.date} />
+                                                <DateDisplay value={reference.date} />
                                             )}
                                             headingLevel={4}
                                             withPadding
-                                            withBackground
-                                            withShadow
+                                            backgroundColor="foreground"
+                                            boxShadow="md"
                                         >
                                             {isTruthyString(reference.url) && (
                                                 <Link
diff --git a/app/src/views/FlashUpdateForm/ContextTab/CountryProvinceInput/index.tsx b/app/src/views/FlashUpdateForm/ContextTab/CountryProvinceInput/index.tsx
index 03f0e72bf2..0da0ff8b6f 100644
--- a/app/src/views/FlashUpdateForm/ContextTab/CountryProvinceInput/index.tsx
+++ b/app/src/views/FlashUpdateForm/ContextTab/CountryProvinceInput/index.tsx
@@ -106,7 +106,6 @@ function CountryProvinceInput(props: Props) {
                 onClick={onRemove}
                 title={strings.flashUpdateRemove}
                 ariaLabel={strings.flashUpdateRemove}
-                styleVariant="action"
                 disabled={disabled}
             >
                 <DeleteBinLineIcon />
diff --git a/app/src/views/FlashUpdateForm/ContextTab/ReferenceInput/index.tsx b/app/src/views/FlashUpdateForm/ContextTab/ReferenceInput/index.tsx
index 4e07a72037..1697b24754 100644
--- a/app/src/views/FlashUpdateForm/ContextTab/ReferenceInput/index.tsx
+++ b/app/src/views/FlashUpdateForm/ContextTab/ReferenceInput/index.tsx
@@ -111,7 +111,6 @@ function ReferenceInput(props: Props) {
                     ariaLabel={strings.deleteButtonTitle}
                     title={strings.deleteButtonTitle}
                     onClick={onRemove}
-                    styleVariant="action"
                     disabled={disabled}
                 >
                     <DeleteBinLineIcon />
diff --git a/app/src/views/FlashUpdateForm/ContextTab/index.tsx b/app/src/views/FlashUpdateForm/ContextTab/index.tsx
index 0171dba0b2..967f4e397d 100644
--- a/app/src/views/FlashUpdateForm/ContextTab/index.tsx
+++ b/app/src/views/FlashUpdateForm/ContextTab/index.tsx
@@ -202,7 +202,7 @@ function ContextTab(props: Props) {
                             name={undefined}
                             disabled={!value.country_district || !value.hazard_type}
                             onClick={handleTitleGenerateButtonClick}
-                            styleVariant="action"
+                            variant="tertiary"
                         >
                             {strings.flashUpdateFormGenerateButtonLabel}
                         </Button>
diff --git a/app/src/views/Home/index.tsx b/app/src/views/Home/index.tsx
index d86aacf9f6..af42163bc8 100644
--- a/app/src/views/Home/index.tsx
+++ b/app/src/views/Home/index.tsx
@@ -7,9 +7,9 @@ import {
 } from '@ifrc-go/icons';
 import {
     Container,
-    InfoPopup,
-    KeyFigureView,
+    KeyFigureCard,
     ListView,
+    MoreInfo,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { getPercentage } from '@ifrc-go/ui/utils';
@@ -42,61 +42,61 @@ export function Component() {
             layout="grid"
             numPreferredGridColumns={5}
         >
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<DrefIcon />}
                 value={aggregatedAppealResponse.active_drefs}
                 valueType="number"
-                size="lg"
+                textSize="4xl"
                 info={(
-                    <InfoPopup
+                    <MoreInfo
                         title={strings.keyFiguresDrefTitle}
-                        description={strings.keyFiguresDrefDescription}
-                    />
+                    >
+                        {strings.keyFiguresDrefDescription}
+                    </MoreInfo>
                 )}
                 label={strings.homeKeyFiguresActiveDrefs}
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<AppealsIcon />}
                 value={aggregatedAppealResponse.active_appeals}
                 valueType="number"
-                size="lg"
+                textSize="4xl"
                 info={(
-                    <InfoPopup
+                    <MoreInfo
                         title={strings.keyFiguresActiveAppealsTitle}
-                        description={strings.keyFigureActiveAppealDescription}
-                    />
+                    >
+                        {strings.keyFigureActiveAppealDescription}
+                    </MoreInfo>
                 )}
                 label={strings.homeKeyFiguresActiveAppeals}
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<FundingIcon />}
                 value={aggregatedAppealResponse.amount_requested_dref_included}
                 valueType="number"
-                size="lg"
-                valueOptions={{ compact: true }}
+                textSize="4xl"
+                compact
                 label={strings.homeKeyFiguresBudget}
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<FundingCoverageIcon />}
                 value={getPercentage(
                     aggregatedAppealResponse?.amount_funded_dref_included,
                     aggregatedAppealResponse?.amount_requested_dref_included,
                 )}
                 valueType="number"
-                valueOptions={{
-                    compact: true,
-                    suffix: '%',
-                }}
+                compact
+                suffix="%"
                 label={strings.homeKeyFiguresAppealsFunding}
-                size="lg"
+                textSize="4xl"
             />
-            <KeyFigureView
+            <KeyFigureCard
                 icon={<TargetedPopulationIcon />}
                 value={aggregatedAppealResponse.target_population}
                 valueType="number"
-                valueOptions={{ compact: true }}
+                compact
                 label={strings.homeKeyFiguresTargetPop}
-                size="lg"
+                textSize="4xl"
             />
         </ListView>
     );
diff --git a/app/src/views/MontandonLandingPage/index.tsx b/app/src/views/MontandonLandingPage/index.tsx
index c7c539cfa0..f4337b255c 100644
--- a/app/src/views/MontandonLandingPage/index.tsx
+++ b/app/src/views/MontandonLandingPage/index.tsx
@@ -5,13 +5,13 @@ import {
 } from '@ifrc-go/icons';
 import {
     Container,
+    DataDisplay,
     Description,
-    DropdownMenu,
+    DisplayLabel,
     Heading,
-    InlineFrame,
-    Label,
+    Iframe,
     ListView,
-    TextOutput,
+    Menu,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
@@ -40,10 +40,9 @@ export function Component() {
             description={strings.montandonHeadingDescription}
             actions={(
                 <>
-                    <DropdownMenu
+                    <Menu
                         label={strings.sourcePopupTitle}
                         labelBefore={<DrefTwoIcon />}
-                        labelColorVariant="primary"
                         preferredPopupWidth={30}
                         persistent
                     >
@@ -58,24 +57,24 @@ export function Component() {
                                 withSpacingOpticalCorrection
                                 spacing="sm"
                             >
-                                <TextOutput
+                                <DataDisplay
                                     strongLabel
                                     label={strings.stacIdLabel}
                                     value={strings.stacIdValue}
                                 />
-                                <TextOutput
+                                <DataDisplay
                                     strongLabel
                                     label={strings.stacVersionLabel}
                                     value={strings.stacVersionValue}
                                 />
-                                <TextOutput
+                                <DataDisplay
                                     strongLabel
                                     label={strings.validLabel}
                                     value={strings.validValue}
                                 />
-                                <Label>
+                                <DisplayLabel>
                                     {strings.stacLocationText}
-                                </Label>
+                                </DisplayLabel>
                                 <Link
                                     external
                                     href="https://montandon-eoapi-stage.ifrc.org/stac/"
@@ -87,11 +86,10 @@ export function Component() {
                                 </Link>
                             </ListView>
                         </Container>
-                    </DropdownMenu>
-                    <DropdownMenu
+                    </Menu>
+                    <Menu
                         label={strings.sharePopupTitle}
                         labelBefore={<ShareLineIcon />}
-                        labelColorVariant="primary"
                         preferredPopupWidth={30}
                         persistent
                     >
@@ -114,9 +112,9 @@ export function Component() {
                                 </Link>
                             )}
                         >
-                            <Label>
+                            <DisplayLabel>
                                 {strings.shareUrlLabel}
-                            </Label>
+                            </DisplayLabel>
                             <Link
                                 href="https://radiantearth.github.io/stac-browser/#/external/montandon-eoapi-stage.ifrc.org/stac/"
                                 external
@@ -126,11 +124,11 @@ export function Component() {
                                 https://radiantearth.github.io/stac-browser/#/external/montandon-eoapi-stage.ifrc.org/stac/
                             </Link>
                         </Container>
-                    </DropdownMenu>
+                    </Menu>
                 </>
             )}
             info={(
-                <InlineFrame
+                <Iframe
                     src="https://www.youtube.com/embed/BEWxqYfrQek"
                     title={strings.videoTitle}
                     allowFullScreen
@@ -161,8 +159,8 @@ export function Component() {
                         heading={strings.gettingStartedGuide}
                         withHeaderBorder
                         withPadding
-                        withBackground
-                        withShadow
+                        backgroundColor="foreground"
+                        boxShadow="md"
                     >
                         <ListView
                             layout="block"
@@ -242,8 +240,8 @@ export function Component() {
                         <Container
                             heading={strings.blogPosts}
                             withPadding
-                            withBackground
-                            withShadow
+                            backgroundColor="foreground"
+                            boxShadow="md"
                             withHeaderBorder
                         >
                             <ListView
@@ -269,8 +267,8 @@ export function Component() {
                         <Container
                             heading={strings.contact}
                             withPadding
-                            withBackground
-                            withShadow
+                            backgroundColor="foreground"
+                            boxShadow="md"
                             withHeaderBorder
                         >
                             <ListView
diff --git a/app/src/views/OldDrefFinalReportExport/index.tsx b/app/src/views/OldDrefFinalReportExport/index.tsx
index ccf848f636..fc4f84c6d3 100644
--- a/app/src/views/OldDrefFinalReportExport/index.tsx
+++ b/app/src/views/OldDrefFinalReportExport/index.tsx
@@ -5,17 +5,17 @@ import {
 } from 'react';
 import { useParams } from 'react-router-dom';
 import {
-    DateOutput,
-    NumberOutput,
+    DateDisplay,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     Container,
+    DataDisplay,
+    type DataDisplayProps,
     DescriptionText,
     Heading,
     Image,
-    TextOutput,
-    type TextOutputProps,
 } from '@ifrc-go/ui/printable';
 import { DEFAULT_PRINT_DATE_FORMAT } from '@ifrc-go/ui/utils';
 import {
@@ -46,12 +46,13 @@ import { useRequest } from '#utils/restRequest';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-function BlockTextOutput(props: TextOutputProps & { variant?: never, withoutLabelColon?: never }) {
+function BlockTextOutput(props: DataDisplayProps
+    & { styleVariant?: never, withoutLabelColon?: never }) {
     return (
-        <TextOutput
+        <DataDisplay
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            variant="contents"
+            styleVariant="contents"
             withoutLabelColon
         />
     );
@@ -328,13 +329,13 @@ export function Component() {
                     </Container>
                 )}
             <Container childrenContainerClassName={styles.metaSection}>
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.appealLabel}
                     value={drefResponse?.appeal_code}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.drefAllocationLabel}
                     value={drefResponse?.total_dref_allocation}
@@ -342,7 +343,7 @@ export function Component() {
                     prefix={strings.chfPrefix}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.crisisCategoryLabel}
                     value={drefResponse?.disaster_category_display}
@@ -354,19 +355,19 @@ export function Component() {
                     )}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.hazardLabel}
                     value={drefResponse?.disaster_type_details?.name}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.glideNumberLabel}
                     value={drefResponse?.glide_code}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.peopleAffectedLabel}
                     value={drefResponse?.number_of_people_affected}
@@ -374,7 +375,7 @@ export function Component() {
                     suffix={strings.peopleSuffix}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.peopleTargetedLabel}
                     value={drefResponse?.total_targeted_population}
@@ -382,7 +383,7 @@ export function Component() {
                     valueType="number"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.peopleAssistedLabel}
                     value={drefResponse?.num_assisted}
@@ -390,27 +391,27 @@ export function Component() {
                     valueType="number"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.eventOnsetLabel}
                     value={drefResponse?.type_of_onset_display}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.operationStartDateLabel}
                     value={drefResponse?.operation_start_date}
                     valueType="date"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.operationEndDateLabel}
                     value={drefResponse?.operation_end_date}
                     valueType="date"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.metaItem}
                     label={strings.operationTimeframeLabel}
                     value={drefResponse?.total_operation_timeframe}
@@ -418,7 +419,7 @@ export function Component() {
                     suffix={strings.monthsSuffix}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     className={styles.targetedAreas}
                     label={strings.targetedAreasLabel}
                     value={drefResponse?.district_details?.map(
@@ -461,7 +462,7 @@ export function Component() {
                                 ? strings.dateWhenTriggerWasMetHeading
                                 : strings.dateOfEventSlowHeading}
                         >
-                            <DateOutput
+                            <DateDisplay
                                 value={drefResponse?.event_date}
                                 format={DEFAULT_PRINT_DATE_FORMAT}
                             />
@@ -621,7 +622,7 @@ export function Component() {
                         />
                     )}
                     {majorCoordinationMechanismDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.otherActionsMajorCoordinationMechanism}
                             label={strings.majorCoordinationMechanismLabel}
                             value={drefResponse?.major_coordination_mechanism}
@@ -854,7 +855,7 @@ export function Component() {
                         </>
                     )}
                     {riskSecurityConcernDefined && (
-                        <TextOutput
+                        <DataDisplay
                             className={styles.riskSecurityConcern}
                             label={strings.safetyConcernHeading}
                             value={drefResponse?.risk_security_concern}
@@ -889,32 +890,32 @@ export function Component() {
                                     {plannedIntervention.title_display}
                                 </Heading>
                                 <Container>
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.budgetLabel}
                                         value={plannedIntervention.budget}
                                         valueType="number"
                                         prefix={strings.chfPrefix}
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.targetedPersonsLabel}
                                         value={plannedIntervention.person_targeted}
                                         valueType="number"
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.assistedPersonsLabel}
                                         value={plannedIntervention.person_assisted}
                                         valueType="number"
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.targetedMaleLabel}
                                         value={plannedIntervention.male}
                                         valueType="number"
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.targetedFemaleLabel}
                                         value={plannedIntervention.female}
                                         valueType="number"
@@ -943,11 +944,11 @@ export function Component() {
                                                 <div className={styles.title}>
                                                     {indicator.title}
                                                 </div>
-                                                <NumberOutput
+                                                <NumberDisplay
                                                     className={styles.target}
                                                     value={indicator.target}
                                                 />
-                                                <NumberOutput
+                                                <NumberDisplay
                                                     className={styles.actual}
                                                     value={indicator.actual}
                                                 />
@@ -1037,7 +1038,7 @@ export function Component() {
                     </Container>
                     <Container childrenContainerClassName={styles.contactList}>
                         {nsContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nsContactHeading}
                                 value={nsContactText}
@@ -1045,7 +1046,7 @@ export function Component() {
                             />
                         )}
                         {appealManagerContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.appealManagerContactHeading}
                                 value={appealManagerContactText}
@@ -1053,7 +1054,7 @@ export function Component() {
                             />
                         )}
                         {projectManagerContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.projectManagerContactHeading}
                                 value={projectManagerContactText}
@@ -1061,7 +1062,7 @@ export function Component() {
                             />
                         )}
                         {focalPointContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.focalPointContactHeading}
                                 value={focalPointContactText}
@@ -1069,7 +1070,7 @@ export function Component() {
                             />
                         )}
                         {mediaContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.mediaContactHeading}
                                 value={mediaContactText}
@@ -1077,7 +1078,7 @@ export function Component() {
                             />
                         )}
                         {nationalSocietyIntegrityContactDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nationalSocietyIntegrityHeading}
                                 value={nationalSocietyIntegrityContactText}
@@ -1085,7 +1086,7 @@ export function Component() {
                             />
                         )}
                         {nationalSocietyHotlineDefined && (
-                            <TextOutput
+                            <DataDisplay
                                 labelClassName={styles.contactPersonLabel}
                                 label={strings.nationalSocietyHotlineHeading}
                                 value={drefResponse?.national_society_hotline_phone_number}
diff --git a/app/src/views/OldDrefFinalReportForm/Actions/NeedInput/index.tsx b/app/src/views/OldDrefFinalReportForm/Actions/NeedInput/index.tsx
index 61bcb879c0..3a13e9542e 100644
--- a/app/src/views/OldDrefFinalReportForm/Actions/NeedInput/index.tsx
+++ b/app/src/views/OldDrefFinalReportForm/Actions/NeedInput/index.tsx
@@ -72,7 +72,7 @@ function NeedInput(props: Props) {
                     <Button
                         name={index}
                         onClick={onRemove}
-                        styleVariant="action"
+                        variant="tertiary"
                         title={strings.drefFinalReportFormRemoveNeed}
                         disabled={disabled || readOnly}
                     >
diff --git a/app/src/views/OldDrefFinalReportForm/ObsoletePayloadModal/index.tsx b/app/src/views/OldDrefFinalReportForm/ObsoletePayloadModal/index.tsx
index 6bee828ab4..8dfd520bac 100644
--- a/app/src/views/OldDrefFinalReportForm/ObsoletePayloadModal/index.tsx
+++ b/app/src/views/OldDrefFinalReportForm/ObsoletePayloadModal/index.tsx
@@ -1,7 +1,7 @@
 import {
     BlockLoading,
     Button,
-    Modal,
+    Dialog,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -42,7 +42,7 @@ function ObsoletePayloadResolutionModal(props: Props) {
     });
 
     return (
-        <Modal
+        <Dialog
             heading={strings.drefChangesConflictWhileSaving}
             headingLevel={3}
             className={styles.obsoletePayloadResolutionModal}
@@ -87,7 +87,7 @@ function ObsoletePayloadResolutionModal(props: Props) {
                     </div>
                 </>
             )}
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/OldDrefFinalReportForm/Operation/InterventionInput/index.tsx b/app/src/views/OldDrefFinalReportForm/Operation/InterventionInput/index.tsx
index d28267d1af..c3232111b0 100644
--- a/app/src/views/OldDrefFinalReportForm/Operation/InterventionInput/index.tsx
+++ b/app/src/views/OldDrefFinalReportForm/Operation/InterventionInput/index.tsx
@@ -139,7 +139,7 @@ function InterventionInput(props: Props) {
                     <Button
                         name={index}
                         onClick={onRemove}
-                        styleVariant="action"
+                        variant="tertiary"
                         title={strings.drefFormRemoveIntervention}
                         disabled={disabled || readOnly}
                         before={<DeleteBinTwoLineIcon />}
diff --git a/app/src/views/OldDrefFinalReportForm/Operation/RiskSecurityInput/index.tsx b/app/src/views/OldDrefFinalReportForm/Operation/RiskSecurityInput/index.tsx
index 0c2943392a..03b5100d3b 100644
--- a/app/src/views/OldDrefFinalReportForm/Operation/RiskSecurityInput/index.tsx
+++ b/app/src/views/OldDrefFinalReportForm/Operation/RiskSecurityInput/index.tsx
@@ -85,7 +85,7 @@ function RiskSecurityInput(props: Props) {
                 className={styles.removeButton}
                 name={index}
                 onClick={onRemove}
-                styleVariant="action"
+                variant="tertiary"
                 disabled={disabled || readOnly}
                 title={strings.drefFinalReportDeleteRisk}
             >
diff --git a/app/src/views/OperationalLearning/KeyInsights/index.tsx b/app/src/views/OperationalLearning/KeyInsights/index.tsx
index 63dd20ce7e..ca1e9215eb 100644
--- a/app/src/views/OperationalLearning/KeyInsights/index.tsx
+++ b/app/src/views/OperationalLearning/KeyInsights/index.tsx
@@ -4,7 +4,7 @@ import {
     Description,
     ExpandableContainer,
     ListView,
-    NumberOutput,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -37,7 +37,7 @@ function KeyInsights(props: Props) {
         <Container
             heading={strings.opsLearningSummariesHeading}
             withPadding
-            withDarkBackground
+            backgroundColor="background"
             headingLevel={5}
             spacing="lg"
         >
@@ -78,12 +78,12 @@ function KeyInsights(props: Props) {
                 <Description withLightText>
                     {resolveToComponent(strings.keyInsightsDisclaimer, {
                         numOfExtractsUsed: (
-                            <NumberOutput
+                            <NumberDisplay
                                 value={opsLearningSummaryResponse.used_extracts_count}
                             />
                         ),
                         totalNumberOfExtracts: (
-                            <NumberOutput
+                            <NumberDisplay
                                 value={opsLearningSummaryResponse.total_extracts_count}
                             />
                         ),
diff --git a/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/index.tsx b/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/index.tsx
index 91808d1412..cc86e0923a 100644
--- a/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/index.tsx
+++ b/app/src/views/OperationalLearning/Sources/AllExtractsModal/Extract/index.tsx
@@ -1,6 +1,6 @@
 import {
     Container,
-    TextOutput,
+    DataDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -56,7 +56,7 @@ function Extract(props: Props) {
                 </Link>
             )}
             footer={(
-                <TextOutput
+                <DataDisplay
                     label={strings.dateOfOperation}
                     value={operationStartDate}
                     strongValue
@@ -64,7 +64,7 @@ function Extract(props: Props) {
                 />
             )}
             withPadding
-            withDarkBackground
+            backgroundColor="background"
         >
             {extract}
         </Container>
diff --git a/app/src/views/OperationalLearning/Sources/AllExtractsModal/index.tsx b/app/src/views/OperationalLearning/Sources/AllExtractsModal/index.tsx
index ba521e7764..9f1fad0a45 100644
--- a/app/src/views/OperationalLearning/Sources/AllExtractsModal/index.tsx
+++ b/app/src/views/OperationalLearning/Sources/AllExtractsModal/index.tsx
@@ -1,9 +1,9 @@
 import {
-    Chip,
+    Dialog,
     ListView,
-    Modal,
-    Pager,
+    Pagination,
     RawList,
+    Tag,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -83,15 +83,14 @@ function AllExtractsModal(props: Props) {
     const opsLearningCount = opsLearningResponse?.count ?? 0;
 
     return (
-        <Modal
+        <Dialog
             heading={strings.allExtractsModalHeading}
             onClose={onCancel}
             pending={opsLearningPending}
             size="full"
             headerDescription={(
                 <ListView>
-                    <Chip
-                        name="extractsCount"
+                    <Tag
                         label={(opsLearningCount > 1) ? (
                             resolveToString(
                                 strings.allExtractsModalExtractsCount,
@@ -103,12 +102,12 @@ function AllExtractsModal(props: Props) {
                                 { count: opsLearningCount },
                             )
                         )}
-                        variant="tertiary"
+                        colorVariant="tertiary"
                     />
                 </ListView>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={opsLearningActivePage}
                     onActivePageChange={setOpsLearningActivePage}
                     itemsCount={opsLearningCount}
@@ -132,7 +131,7 @@ function AllExtractsModal(props: Props) {
                     rendererParams={extractsRendererParams}
                 />
             </ListView>
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/OperationalLearning/Sources/Emergency/index.tsx b/app/src/views/OperationalLearning/Sources/Emergency/index.tsx
index 118d06b10f..e4ecd1b0ec 100644
--- a/app/src/views/OperationalLearning/Sources/Emergency/index.tsx
+++ b/app/src/views/OperationalLearning/Sources/Emergency/index.tsx
@@ -23,7 +23,7 @@ function Emergency(props: Props) {
 
     return (
         <Container
-            withBackground
+            backgroundColor="foreground"
             withPadding
         >
             <ListView
diff --git a/app/src/views/OperationalLearning/Sources/index.tsx b/app/src/views/OperationalLearning/Sources/index.tsx
index 41805a7235..b2a1200909 100644
--- a/app/src/views/OperationalLearning/Sources/index.tsx
+++ b/app/src/views/OperationalLearning/Sources/index.tsx
@@ -3,7 +3,7 @@ import {
     Button,
     Container,
     ListView,
-    Pager,
+    Pagination,
     RawList,
 } from '@ifrc-go/ui';
 import {
@@ -86,7 +86,7 @@ function Sources(props: Props) {
     });
 
     const pager = (
-        <Pager
+        <Pagination
             activePage={appealDocumentActivePage}
             onActivePageChange={setAppealDocumentActivePage}
             itemsCount={appealDocumentResponse?.count ?? 0}
diff --git a/app/src/views/OperationalLearning/Stats/OperationalLearningMap/index.tsx b/app/src/views/OperationalLearning/Stats/OperationalLearningMap/index.tsx
index 6d7c91a85a..c9c67ec235 100644
--- a/app/src/views/OperationalLearning/Stats/OperationalLearningMap/index.tsx
+++ b/app/src/views/OperationalLearning/Stats/OperationalLearningMap/index.tsx
@@ -5,9 +5,9 @@ import {
 } from 'react';
 import {
     Container,
+    DataDisplay,
     ListView,
-    NumberOutput,
-    TextOutput,
+    NumberDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { maxSafe } from '@ifrc-go/ui/utils';
@@ -181,7 +181,7 @@ function OperationalLearningMap(props: Props) {
             <GoMapContainer
                 title={strings.downloadMapTitle}
                 footer={(
-                    <TextOutput
+                    <DataDisplay
                         label={strings.learningCount}
                         value={(
                             <ListView
@@ -193,8 +193,8 @@ function OperationalLearningMap(props: Props) {
                                     endColor={LEARNING_COUNT_HIGH_COLOR}
                                 />
                                 <ListView withSpaceBetweenContents>
-                                    <NumberOutput value={MIN_LEARNING_COUNT} />
-                                    <NumberOutput value={maxLearning} />
+                                    <NumberDisplay value={MIN_LEARNING_COUNT} />
+                                    <NumberDisplay value={maxLearning} />
                                 </ListView>
                             </ListView>
                         )}
@@ -235,7 +235,7 @@ function OperationalLearningMap(props: Props) {
                     <Container
                         headingLevel={5}
                     >
-                        <TextOutput
+                        <DataDisplay
                             value={clickedPointProperties.feature.properties.learningCount}
                             label={strings.learningCount}
                             valueType="number"
diff --git a/app/src/views/OperationalLearning/Stats/index.tsx b/app/src/views/OperationalLearning/Stats/index.tsx
index c9d2a5b5ba..f8639f85b7 100644
--- a/app/src/views/OperationalLearning/Stats/index.tsx
+++ b/app/src/views/OperationalLearning/Stats/index.tsx
@@ -7,10 +7,10 @@ import {
     BarChart,
     ColorPreview,
     Container,
-    KeyFigureView,
+    DataDisplay,
+    KeyFigureCard,
     LegendItem,
     ListView,
-    TextOutput,
     TimeSeriesChart,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -191,29 +191,29 @@ function Stats(props: Props) {
                     layout="grid"
                     numPreferredGridColumns={4}
                 >
-                    <KeyFigureView
+                    <KeyFigureCard
                         value={learningStatsResponse?.operations_included}
                         valueType="number"
                         label={strings.operationsIncluded}
-                        withShadow
+                        boxShadow="md"
                     />
-                    <KeyFigureView
+                    <KeyFigureCard
                         value={learningStatsResponse?.sources_used}
                         valueType="number"
                         label={strings.sourcesUsed}
-                        withShadow
+                        boxShadow="md"
                     />
-                    <KeyFigureView
+                    <KeyFigureCard
                         value={learningStatsResponse?.learning_extracts}
                         valueType="number"
                         label={strings.learningExtract}
-                        withShadow
+                        boxShadow="md"
                     />
-                    <KeyFigureView
+                    <KeyFigureCard
                         value={learningStatsResponse?.sectors_covered}
                         valueType="number"
                         label={strings.sectorsCovered}
-                        withShadow
+                        boxShadow="md"
                     />
                 </ListView>
                 <ListView
@@ -231,8 +231,8 @@ function Stats(props: Props) {
                             empty={isNotDefined(learningStatsResponse?.learning_by_sector)
                                 || learningStatsResponse.learning_by_sector.length === 0}
                             withPadding
-                            withShadow
-                            withBackground
+                            boxShadow="md"
+                            backgroundColor="foreground"
                         >
                             <BarChart
                                 data={learningStatsResponse?.learning_by_sector}
@@ -248,8 +248,8 @@ function Stats(props: Props) {
                             empty={isNotDefined(learningStatsResponse?.learning_by_region)
                                 || learningStatsResponse?.learning_by_region.length === 0}
                             withPadding
-                            withShadow
-                            withBackground
+                            boxShadow="md"
+                            backgroundColor="foreground"
                         >
                             <BarChart
                                 data={learningStatsResponse?.learning_by_region}
@@ -264,33 +264,33 @@ function Stats(props: Props) {
                             pending={learningStatsPending}
                             empty={dateList.length === 0}
                             withPadding
-                            withShadow
-                            withBackground
+                            boxShadow="md"
+                            backgroundColor="foreground"
                             footer={isDefined(activePointKey) ? (
                                 <ListView
                                     withWrap
                                     spacing="sm"
                                     withSpacingOpticalCorrection
                                 >
-                                    <TextOutput
+                                    <DataDisplay
                                         value={activePointKey}
                                         valueType="date"
                                         format="yyyy"
                                         strongValue
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         icon={<ColorPreview value="var(--color-source-dref)" />}
                                         label={strings.sourceDREF}
                                         value={activePointData?.dref}
                                         valueType="number"
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         icon={<ColorPreview value="var(--color-source-emergency-appeal)" />}
                                         label={strings.sourceEmergencyAppeal}
                                         value={activePointData?.emergencyAppeal}
                                         valueType="number"
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         icon={<ColorPreview value="var(--color-source-emergency-appeal)" />}
                                         label={strings.sourceOthers}
                                         value={activePointData?.others}
@@ -298,7 +298,7 @@ function Stats(props: Props) {
                                     />
                                 </ListView>
                             ) : (
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.sourcesTypeLegendLabel}
                                     value={(
                                         <ListView
diff --git a/app/src/views/OperationalLearning/Summary/index.tsx b/app/src/views/OperationalLearning/Summary/index.tsx
index dca001f23d..6706228930 100644
--- a/app/src/views/OperationalLearning/Summary/index.tsx
+++ b/app/src/views/OperationalLearning/Summary/index.tsx
@@ -50,7 +50,7 @@ function Summary(props: Props) {
             )}
             headerDescription={summaryContent}
             withPadding
-            withDarkBackground
+            backgroundColor="background"
             withToggleButtonOnFooter
             toggleButtonLabel={[strings.seeSources, strings.closeSources]}
             spacing="lg"
diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
index 8e4e866114..70545c7a43 100644
--- a/app/src/views/OperationalLearning/index.tsx
+++ b/app/src/views/OperationalLearning/index.tsx
@@ -9,11 +9,10 @@ import {
     ButtonLayout,
     Container,
     Description,
-    DismissableListOutput,
-    DismissableMultiListOutput,
-    DismissableTextOutput,
     ListView,
     RawList,
+    Selection,
+    SelectionList,
     Tab,
     TabList,
     TabPanel,
@@ -427,15 +426,15 @@ export function Component() {
                         withWrap
                         spacing="xs"
                     >
-                        <DismissableListOutput
+                        <Selection
                             name="region"
                             value={rawFilter.region}
-                            onDismiss={onFilterChange}
+                            onDismiss={(_value: unknown, name: 'region') => onFilterChange(undefined, name)}
                             options={regionList}
                             labelSelector={stringValueSelector}
                             keySelector={regionKeySelector}
                         />
-                        <DismissableMultiListOutput
+                        <SelectionList
                             name="countries"
                             onDismiss={onFilterChange}
                             value={rawFilter.countries}
@@ -443,7 +442,7 @@ export function Component() {
                             labelSelector={stringNameSelector}
                             keySelector={numericIdSelector}
                         />
-                        <DismissableMultiListOutput
+                        <SelectionList
                             name="disasterTypes"
                             onDismiss={onFilterChange}
                             value={rawFilter.disasterTypes}
@@ -451,7 +450,7 @@ export function Component() {
                             labelSelector={disasterTypeLabelSelector}
                             keySelector={numericIdSelector}
                         />
-                        <DismissableMultiListOutput
+                        <SelectionList
                             name="secondarySectors"
                             onDismiss={onFilterChange}
                             value={rawFilter.secondarySectors}
@@ -459,7 +458,7 @@ export function Component() {
                             labelSelector={stringLabelSelector}
                             keySelector={numericKeySelector}
                         />
-                        <DismissableMultiListOutput
+                        <SelectionList
                             name="perComponents"
                             onDismiss={onFilterChange}
                             value={rawFilter.perComponents}
@@ -467,7 +466,7 @@ export function Component() {
                             labelSelector={getFormattedComponentName}
                             keySelector={numericIdSelector}
                         />
-                        <DismissableMultiListOutput
+                        <SelectionList
                             name="organizationTypes"
                             onDismiss={onFilterChange}
                             value={rawFilter.organizationTypes}
@@ -475,7 +474,7 @@ export function Component() {
                             labelSelector={stringTitleSelector}
                             keySelector={numericIdSelector}
                         />
-                        <DismissableMultiListOutput
+                        <SelectionList
                             name="perLearningTypes"
                             onDismiss={onFilterChange}
                             value={rawFilter.perLearningTypes}
@@ -483,17 +482,17 @@ export function Component() {
                             labelSelector={stringValueSelector}
                             keySelector={perLearningTypeKeySelector}
                         />
-                        <DismissableTextOutput
+                        <Selection
                             name="appealStartDateAfter"
                             value={rawFilter.appealStartDateAfter}
                             onDismiss={onFilterChange}
                         />
-                        <DismissableTextOutput
+                        <Selection
                             name="appealStartDateBefore"
                             value={rawFilter.appealStartDateBefore}
                             onDismiss={onFilterChange}
                         />
-                        <DismissableTextOutput
+                        <Selection
                             name="appealSearchText"
                             value={rawFilter.appealSearchText}
                             onDismiss={onFilterChange}
diff --git a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/QuestionInput/index.tsx b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/QuestionInput/index.tsx
index fb35342e87..b6337ad0bf 100644
--- a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/QuestionInput/index.tsx
+++ b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/QuestionInput/index.tsx
@@ -84,7 +84,7 @@ function QuestionInput(props: Props) {
             }
             headingLevel={6}
             headerDescription={question.description}
-            withDarkBackground
+            backgroundColor="background"
             withPadding
         >
             <ListView
diff --git a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx
index 31eb18f949..a8f9626378 100644
--- a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx
+++ b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import {
     Container,
     ExpandableContainer,
-    HtmlOutput,
+    HtmlDisplay,
     InputSection,
     ListView,
     SelectInput,
@@ -212,7 +212,7 @@ function ComponentInput(props: Props) {
             withToggleButtonOnFooter
             withoutWrapInFooter
             initiallyExpanded
-            withBackground
+            backgroundColor="foreground"
             withPadding
             spacing="lg"
         >
@@ -283,7 +283,7 @@ function ComponentInput(props: Props) {
                         withoutPadding
                         title={strings.epiConsiderationTitle}
                         description={(
-                            <HtmlOutput value={component?.epi_considerations_guidance} />
+                            <HtmlDisplay value={component?.epi_considerations_guidance} />
                         )}
                     >
                         <TextArea
@@ -302,7 +302,7 @@ function ComponentInput(props: Props) {
                         withoutPadding
                         title={strings.urbanConsiderationTitle}
                         description={(
-                            <HtmlOutput value={component?.urban_considerations_guidance} />
+                            <HtmlDisplay value={component?.urban_considerations_guidance} />
                         )}
                     >
                         <TextArea
@@ -321,7 +321,7 @@ function ComponentInput(props: Props) {
                         withoutPadding
                         title={strings.environmentConsiderationTitle}
                         description={(
-                            <HtmlOutput
+                            <HtmlDisplay
                                 value={component?.climate_environmental_considerations_guidance}
                             />
                         )}
diff --git a/app/src/views/PerExport/index.tsx b/app/src/views/PerExport/index.tsx
index e9e4cff910..cdd71e74c2 100644
--- a/app/src/views/PerExport/index.tsx
+++ b/app/src/views/PerExport/index.tsx
@@ -15,8 +15,8 @@ import {
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     Container,
+    DataDisplay,
     Heading,
-    TextOutput,
 } from '@ifrc-go/ui/printable';
 import {
     numericCountSelector,
@@ -397,34 +397,34 @@ export function Component() {
                 heading={strings.perExportNSPreparedness}
                 headingLevel={3}
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.perExportStartDateLabel}
                     value={perResponse?.date_of_assessment}
                     valueType="date"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.perExportPhaseLabel}
                     value={processStatusResponse?.phase_display}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.perExportFocalPointNameLabel}
                     value={perResponse?.ns_focal_point_name}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.perExportCycleLabel}
                     value={perResponse?.assessment_number}
                     valueType="number"
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.perExportTypeOfAssessmentLabel}
                     value={perResponse?.type_of_assessment_details?.name}
                     strongValue
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.perExportFocalPointEmailTitle}
                     value={perResponse?.ns_focal_point_email}
                     strongValue
@@ -536,7 +536,7 @@ export function Component() {
                                 <ProgressBar
                                     value={component.rating?.value ?? 0}
                                     totalValue={5}
-                                    colorVariant="custom"
+                                    variant="custom"
                                     color={progressBarColor}
                                     title={(
                                         isDefined(component.rating)
diff --git a/app/src/views/PerPrioritizationForm/ComponentInput/QuestionOutput/index.tsx b/app/src/views/PerPrioritizationForm/ComponentInput/QuestionOutput/index.tsx
index 3510d79e6a..1107bd8ca2 100644
--- a/app/src/views/PerPrioritizationForm/ComponentInput/QuestionOutput/index.tsx
+++ b/app/src/views/PerPrioritizationForm/ComponentInput/QuestionOutput/index.tsx
@@ -1,8 +1,9 @@
 import {
     Description,
+    DisplayLabel,
     InlineLayout,
-    Label,
     ListView,
+    type ListViewProps,
 } from '@ifrc-go/ui';
 import { isNotDefined } from '@togglecorp/fujs';
 
@@ -13,7 +14,7 @@ interface Props {
     questionNum: number | undefined | null;
     componentNum: number;
     notes?: string | null;
-    withDarkBackground?: boolean;
+    backgroundColor?: ListViewProps['backgroundColor'];
 }
 
 function QuestionOutput(props: Props) {
@@ -23,7 +24,7 @@ function QuestionOutput(props: Props) {
         question,
         answer,
         notes,
-        withDarkBackground,
+        backgroundColor,
     } = props;
 
     if (isNotDefined(questionNum)) {
@@ -35,15 +36,15 @@ function QuestionOutput(props: Props) {
             layout="block"
             withSpacingOpticalCorrection
             withPadding
-            withDarkBackground={withDarkBackground}
+            backgroundColor={backgroundColor}
             spacing="sm"
         >
             <InlineLayout
                 before={`${componentNum}.${questionNum}.`}
                 after={(
-                    <Label strong>
+                    <DisplayLabel strong>
                         {answer}
-                    </Label>
+                    </DisplayLabel>
                 )}
             >
                 {question}
diff --git a/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx b/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx
index 2a2835e370..b66038a660 100644
--- a/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx
+++ b/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx
@@ -5,10 +5,10 @@ import {
 import {
     ButtonLayout,
     Checkbox,
+    DataDisplay,
     ExpandableContainer,
     ListView,
     TextArea,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
@@ -212,7 +212,7 @@ function ComponentInput(props: Props) {
                                         readOnly
                                         // FIXME: use tag component
                                     >
-                                        <TextOutput
+                                        <DataDisplay
                                             key={answerStat.answer}
                                             label={answerStat.answer}
                                             value={answerStat.num}
@@ -239,7 +239,7 @@ function ComponentInput(props: Props) {
             )}
             pending={formQuestionsPending}
             withPadding
-            withBackground
+            backgroundColor="foreground"
             spacing="lg"
         >
             <ListView
@@ -260,7 +260,7 @@ function ComponentInput(props: Props) {
                             componentNum={componentNum}
                             answer={mappedQuestionResponses?.[perFormQuestion.id]?.answerDisplay}
                             notes={mappedQuestionResponses?.[perFormQuestion.id]?.notes}
-                            withDarkBackground={i % 2 === 0}
+                            backgroundColor={i % 2 === 0 ? 'background' : undefined}
                         />
                     ),
                 )}
diff --git a/app/src/views/PerPrioritizationForm/index.tsx b/app/src/views/PerPrioritizationForm/index.tsx
index 78cf5d3d44..9ab4ab5327 100644
--- a/app/src/views/PerPrioritizationForm/index.tsx
+++ b/app/src/views/PerPrioritizationForm/index.tsx
@@ -13,8 +13,8 @@ import {
     Button,
     ConfirmButton,
     Container,
-    DropdownMenu,
     ListView,
+    Menu,
     Message,
     Portal,
 } from '@ifrc-go/ui';
@@ -466,12 +466,12 @@ export function Component() {
                 withCenteredHeading
                 headingLevel={2}
                 headerActions={(
-                    <DropdownMenu
+                    <Menu
                         label={resolveToString(
                             strings.sortButtonLabel,
                             { sort: sortKeyToLabel[sortBy] },
                         )}
-                        labelStyleVariant="action"
+                        labelVariant="tertiary"
                         popupClassName={styles.sortByDropdownContent}
                     >
                         {sortOptions.map(
@@ -494,7 +494,7 @@ export function Component() {
                                 </DropdownMenuItem>
                             ),
                         )}
-                    </DropdownMenu>
+                    </Menu>
                 )}
                 footerActions={value?.is_draft !== false ? (
                     <ConfirmButton
diff --git a/app/src/views/PerWorkPlanForm/AdditionalActionInput/index.tsx b/app/src/views/PerWorkPlanForm/AdditionalActionInput/index.tsx
index 05c13a365b..e013d9f62a 100644
--- a/app/src/views/PerWorkPlanForm/AdditionalActionInput/index.tsx
+++ b/app/src/views/PerWorkPlanForm/AdditionalActionInput/index.tsx
@@ -107,7 +107,7 @@ function AdditionalActionInput(props: Props) {
                 <Button
                     name={index ?? -1}
                     onClick={onRemove}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.actionInputRemoveButtonLabel}
                 >
                     <DeleteBinLineIcon />
@@ -116,7 +116,7 @@ function AdditionalActionInput(props: Props) {
             headerDescription={(
                 <NonFieldError error={error} />
             )}
-            withBackground
+            backgroundColor="foreground"
             withPadding
         >
             <ListView
diff --git a/app/src/views/PerWorkPlanForm/PrioritizedActionInput/index.tsx b/app/src/views/PerWorkPlanForm/PrioritizedActionInput/index.tsx
index cf66060bc3..ac3119b15e 100644
--- a/app/src/views/PerWorkPlanForm/PrioritizedActionInput/index.tsx
+++ b/app/src/views/PerWorkPlanForm/PrioritizedActionInput/index.tsx
@@ -115,7 +115,7 @@ function PrioritizedActionInput(props: Props) {
                 <NonFieldError error={error} />
             )}
             withPadding
-            withBackground
+            backgroundColor="foreground"
         >
             <ListView
                 layout="grid"
diff --git a/app/src/views/PerWorkPlanForm/index.tsx b/app/src/views/PerWorkPlanForm/index.tsx
index 5ab8aae572..c4e0b336e2 100644
--- a/app/src/views/PerWorkPlanForm/index.tsx
+++ b/app/src/views/PerWorkPlanForm/index.tsx
@@ -9,10 +9,10 @@ import {
     Button,
     ConfirmButton,
     Container,
+    DataDisplay,
     InlineLayout,
     ListView,
     Portal,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -359,18 +359,18 @@ export function Component() {
             />
             <ListView
                 layout="block"
-                withBackground
+                backgroundColor="foreground"
                 spacing="lg"
                 withPadding
                 withSpacingOpticalCorrection
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.workPlanDate}
                     value={workPlanResponse?.overview_details?.workplan_development_date}
                     strongValue
                 />
                 <ListView>
-                    <TextOutput
+                    <DataDisplay
                         label={strings.perResponsibleLabel}
                         value={workPlanResponse?.overview_details?.ns_focal_point_name}
                         description={workPlanResponse?.overview_details?.ns_focal_point_email}
diff --git a/app/src/views/RegionAdditionalInfo/index.tsx b/app/src/views/RegionAdditionalInfo/index.tsx
index c001c0d915..d1f98467dc 100644
--- a/app/src/views/RegionAdditionalInfo/index.tsx
+++ b/app/src/views/RegionAdditionalInfo/index.tsx
@@ -3,9 +3,9 @@ import { useOutletContext } from 'react-router-dom';
 import {
     Container,
     Description,
-    HtmlOutput,
-    type HtmlOutputProps,
-    KeyFigureView,
+    HtmlDisplay,
+    type HtmlDisplayProps,
+    KeyFigureCard,
     ListView,
     RawList,
 } from '@ifrc-go/ui';
@@ -47,7 +47,7 @@ function RegionKeyFigure(props: RegionKeyFigureProps) {
     const strings = useTranslation(i18n);
 
     return (
-        <KeyFigureView
+        <KeyFigureCard
             // FIXME: fix typings from server (medium priority)
             // FIXME: Do we need to round this similar to EmergencyDetails/KeyFigure?
             value={Number.parseFloat(figure)}
@@ -69,7 +69,7 @@ function RegionKeyFigure(props: RegionKeyFigureProps) {
                     </Description>
                 </ListView>
             )}
-            withShadow
+            boxShadow="md"
         />
     );
 }
@@ -102,7 +102,7 @@ export function Component() {
     );
 
     const regionSnippetParams = useCallback(
-        (_: number, data: RegionSnippetType): HtmlOutputProps => ({
+        (_: number, data: RegionSnippetType): HtmlDisplayProps => ({
             value: data.snippet,
         }),
         [],
@@ -140,7 +140,7 @@ export function Component() {
                         <RawList
                             data={snippets}
                             keySelector={snippetKeySelector}
-                            renderer={HtmlOutput}
+                            renderer={HtmlDisplay}
                             rendererParams={regionSnippetParams}
                         />
                     </ListView>
diff --git a/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx b/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx
index 20660b9891..2525602312 100644
--- a/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx
+++ b/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import {
     Container,
-    NumberOutput,
-    Pager,
+    NumberDisplay,
+    Pagination,
     Table,
 } from '@ifrc-go/ui';
 import { SortContext } from '@ifrc-go/ui/contexts';
@@ -164,7 +164,7 @@ function EventItemsTable(props: Props) {
         () => (
             resolveToComponent(
                 strings.regionEmergenciesTableTitle,
-                { numEmergencies: <NumberOutput value={eventResponse?.count} /> },
+                { numEmergencies: <NumberDisplay value={eventResponse?.count} /> },
             )
         ),
         [strings.regionEmergenciesTableTitle, eventResponse],
@@ -185,7 +185,7 @@ function EventItemsTable(props: Props) {
                 </Link>
             )}
             footerActions={(
-                <Pager
+                <Pagination
                     activePage={page}
                     itemsCount={eventResponse?.count ?? 0}
                     maxItemsPerPage={limit}
diff --git a/app/src/views/RegionOperations/index.tsx b/app/src/views/RegionOperations/index.tsx
index 1e73c00881..8234ac30ae 100644
--- a/app/src/views/RegionOperations/index.tsx
+++ b/app/src/views/RegionOperations/index.tsx
@@ -4,7 +4,7 @@ import {
 } from 'react-router-dom';
 import {
     Container,
-    HtmlOutput,
+    HtmlDisplay,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -69,7 +69,7 @@ export function Component() {
                         heading={emergencySnippet.title}
                         withHeaderBorder={isTruthyString(emergencySnippet.title)}
                     >
-                        <HtmlOutput
+                        <HtmlDisplay
                             value={emergencySnippet.snippet}
                             key={emergencySnippet.id}
                         />
diff --git a/app/src/views/RegionPreparedness/index.tsx b/app/src/views/RegionPreparedness/index.tsx
index 60001232ac..2bf8c7921e 100644
--- a/app/src/views/RegionPreparedness/index.tsx
+++ b/app/src/views/RegionPreparedness/index.tsx
@@ -2,9 +2,12 @@ import { useCallback } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
     Container,
-    HtmlOutput,
-    List,
+    DefaultMessage,
+    HtmlDisplay,
+    ListView,
+    RawList,
 } from '@ifrc-go/ui';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import {
     type RegionOutletContext,
@@ -36,7 +39,7 @@ function Snippet(props: SnippetProps) {
             heading={title}
             withHeaderBorder
         >
-            <HtmlOutput
+            <HtmlDisplay
                 value={snippet}
             />
         </Container>
@@ -53,17 +56,26 @@ export function Component() {
         snippet: data.snippet,
     }), []);
 
+    const snippets = regionResponse?.preparedness_snippets;
+
     return (
-        <List
+        <ListView
             className={styles.regionPreparedness}
-            data={regionResponse?.preparedness_snippets}
-            keySelector={keySelector}
-            rendererParams={snippetListRendererParams}
-            renderer={Snippet}
-            pending={false}
-            errored={false}
-            filtered={false}
-        />
+            layout="block"
+        >
+            <RawList
+                data={snippets}
+                keySelector={keySelector}
+                rendererParams={snippetListRendererParams}
+                renderer={Snippet}
+            />
+            <DefaultMessage
+                pending={false}
+                errored={false}
+                filtered={false}
+                empty={isNotDefined(snippets) || snippets.length === 0}
+            />
+        </ListView>
     );
 }
 
diff --git a/app/src/views/RegionProfile/index.tsx b/app/src/views/RegionProfile/index.tsx
index ac4c96a971..94780e8cdf 100644
--- a/app/src/views/RegionProfile/index.tsx
+++ b/app/src/views/RegionProfile/index.tsx
@@ -3,8 +3,8 @@ import { RedCrossNationalSocietyIcon } from '@ifrc-go/icons';
 import {
     Container,
     Description,
-    HtmlOutput,
-    KeyFigureView,
+    HtmlDisplay,
+    KeyFigureCard,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -36,12 +36,12 @@ export function Component() {
                 layout="grid"
                 numPreferredGridColumns={3}
             >
-                <KeyFigureView
+                <KeyFigureCard
                     icon={<RedCrossNationalSocietyIcon />}
                     value={Number(regionResponse?.national_society_count)}
-                    valueOptions={{ compact: true }}
+                    compact
                     valueType="number"
-                    size="lg"
+                    textSize="4xl"
                     label={(
                         <ListView
                             layout="block"
@@ -62,7 +62,7 @@ export function Component() {
                             </Description>
                         </ListView>
                     )}
-                    withShadow
+                    boxShadow="md"
                 />
             </ListView>
             {regionResponse?.profile_snippets.filter(
@@ -73,7 +73,7 @@ export function Component() {
                     heading={profileSnippet.title}
                     withHeaderBorder
                 >
-                    <HtmlOutput
+                    <HtmlDisplay
                         value={profileSnippet.snippet}
                         key={profileSnippet.id}
                     />
@@ -118,8 +118,8 @@ export function Component() {
                                 heading={contact.name}
                                 headingLevel={5}
                                 headerDescription={contact.title}
-                                withBackground
-                                withShadow
+                                backgroundColor="foreground"
+                                boxShadow="md"
                                 withPadding
                             >
                                 <ListView
diff --git a/app/src/views/Resources/VideoList/index.tsx b/app/src/views/Resources/VideoList/index.tsx
index f6e7b41e3c..a9eb04b70a 100644
--- a/app/src/views/Resources/VideoList/index.tsx
+++ b/app/src/views/Resources/VideoList/index.tsx
@@ -1,7 +1,7 @@
 import {
     Description,
     Heading,
-    InlineFrame,
+    Iframe,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -60,12 +60,12 @@ function VideoList() {
                     <ListView
                         key={videoLink.id}
                         layout="block"
-                        withDarkBackground
+                        backgroundColor="background"
                         withPadding
                         className={styles.videoItem}
                         spacing="sm"
                     >
-                        <InlineFrame
+                        <Iframe
                             title={videoLink.heading}
                             src={videoLink.embedId}
                             allowFullScreen
diff --git a/app/src/views/Resources/index.tsx b/app/src/views/Resources/index.tsx
index 36cff0fc93..ab364c5211 100644
--- a/app/src/views/Resources/index.tsx
+++ b/app/src/views/Resources/index.tsx
@@ -1,9 +1,9 @@
 import {
     Container,
     Description,
+    DisplayLabel,
+    Iframe,
     Image,
-    InlineFrame,
-    Label,
     ListView,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -44,7 +44,7 @@ export function Component() {
             heading={strings.aboutResources}
             description={strings.resourcesDescription}
             info={(
-                <InlineFrame
+                <Iframe
                     className={styles.introductionVideo}
                     title="GO introduction video"
                     src="https://www.youtube.com/embed/dwPsQzla9A4"
@@ -66,9 +66,9 @@ export function Component() {
                         heading={strings.goReferenceMaterial}
                         headerDescription={strings.goUserReferenceMaterial}
                         withHeaderBorder
-                        withBackground
+                        backgroundColor="foreground"
                         withPadding
-                        withShadow
+                        boxShadow="md"
                         headingLevel={5}
                     >
                         <ListView
@@ -143,8 +143,8 @@ export function Component() {
                         heading={strings.aboutSurgeLinks}
                         withHeaderBorder
                         withPadding
-                        withBackground
-                        withShadow
+                        backgroundColor="foreground"
+                        boxShadow="md"
                         headingLevel={5}
                     >
                         <ListView
@@ -200,8 +200,8 @@ export function Component() {
                         heading={strings.aboutGuidanceMaterial}
                         withHeaderBorder
                         withPadding
-                        withBackground
-                        withShadow
+                        backgroundColor="foreground"
+                        boxShadow="md"
                         headingLevel={5}
                     >
                         <ListView
@@ -243,8 +243,8 @@ export function Component() {
                         heading={strings.aboutOtherResources}
                         withHeaderBorder
                         withPadding
-                        withBackground
-                        withShadow
+                        backgroundColor="foreground"
+                        boxShadow="md"
                         headingLevel={5}
                     >
                         <ListView
@@ -312,17 +312,17 @@ export function Component() {
                                 heading={contact.extent}
                                 headingLevel={6}
                                 withPadding
-                                withShadow
-                                withBackground
+                                boxShadow="md"
+                                backgroundColor="foreground"
                             >
                                 <ListView
                                     layout="block"
                                     withSpacingOpticalCorrection
                                     spacing="sm"
                                 >
-                                    <Label strong>
+                                    <DisplayLabel strong>
                                         {contact.name}
-                                    </Label>
+                                    </DisplayLabel>
                                     <Link
                                         href={`mailto:${contact.email}`}
                                         external
diff --git a/app/src/views/RootLayout/index.tsx b/app/src/views/RootLayout/index.tsx
index 30aec42bd1..092d2d0b3f 100644
--- a/app/src/views/RootLayout/index.tsx
+++ b/app/src/views/RootLayout/index.tsx
@@ -463,7 +463,7 @@ export function Component() {
                                             </Link>
                                             <Button
                                                 name={undefined}
-                                                styleVariant="filled"
+                                                variant="primary"
                                                 onClick={handleClick}
                                             >
                                                 {strings.cookiesBannerIAccept}
diff --git a/app/src/views/Search/ResultList/index.tsx b/app/src/views/Search/ResultList/index.tsx
index 4fd9fff9ed..a16d6c0fe8 100644
--- a/app/src/views/Search/ResultList/index.tsx
+++ b/app/src/views/Search/ResultList/index.tsx
@@ -86,7 +86,7 @@ function ResultList(props: Props) {
                             <ListView
                                 key={result.id}
                                 withCenteredContents
-                                withDarkBackground
+                                backgroundColor="background"
                             >
                                 {resultKey === 'regions' && (
                                     <Link
diff --git a/app/src/views/Search/index.tsx b/app/src/views/Search/index.tsx
index a7b4a8dd04..122925d9ce 100644
--- a/app/src/views/Search/index.tsx
+++ b/app/src/views/Search/index.tsx
@@ -223,7 +223,7 @@ export function Component() {
             return (
                 <Button
                     name={undefined}
-                    styleVariant="action"
+                    variant="tertiary"
                     before={(
                         <ChevronLeftLineIcon
                             className={styles.backIcon}
@@ -271,13 +271,13 @@ export function Component() {
                         <TextInput
                             name="search"
                             className={styles.searchInput}
-                            variant="general"
+                            styleVariant="general"
                             hint={strings.searchHint}
                             icons={<SearchLineIcon />}
                             actions={searchStringTemp && (
                                 <Button
                                     name={undefined}
-                                    styleVariant="action"
+                                    variant="tertiary"
                                     onClick={handleClearSearchInput}
                                 >
                                     <CloseLineIcon className={styles.closeIcon} />
@@ -353,7 +353,7 @@ export function Component() {
                         const action = data.length > MAX_VIEW_PER_SECTION ? (
                             <Button
                                 name={searchResponseKey}
-                                styleVariant="action"
+                                variant="tertiary"
                                 after={(
                                     <ChevronRightLineIcon
                                         className={styles.forwardIcon}
diff --git a/app/src/views/Surge/index.tsx b/app/src/views/Surge/index.tsx
index 141c87d0c9..5bce2767cd 100644
--- a/app/src/views/Surge/index.tsx
+++ b/app/src/views/Surge/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@ifrc-go/icons';
 import {
     Container,
-    KeyFigureView,
+    KeyFigureCard,
     ListView,
     NavigationTabList,
 } from '@ifrc-go/ui';
@@ -39,35 +39,35 @@ export function Component() {
             info={(
                 <Container pending={surgeAggregatedResponsePending}>
                     <ListView layout="grid" numPreferredGridColumns={4}>
-                        <KeyFigureView
+                        <KeyFigureCard
                             icon={<DeployedIcon />}
                             value={aggregatedResponse?.active_rapid_response_personnel}
                             valueType="number"
                             label={strings.activeRapidResponsePersonnel}
-                            size="lg"
+                            textSize="4xl"
                         />
-                        <KeyFigureView
+                        <KeyFigureCard
                             icon={<DeployedIcon />}
                             value={aggregatedResponse?.rapid_response_deployments_this_year}
                             valueType="number"
                             label={strings.rapidResponseDeployments}
-                            size="lg"
+                            textSize="4xl"
                         />
-                        <KeyFigureView
+                        <KeyFigureCard
                             icon={<EmergencyResponseUnitIcon />}
                             value={aggregatedResponse?.active_emergency_response_units}
                             valueType="number"
                             label={strings.activeErus}
-                            size="lg"
+                            textSize="4xl"
                         />
-                        <KeyFigureView
+                        <KeyFigureCard
                             icon={<ClinicIcon />}
                             value={
                                 aggregatedResponse?.emergency_response_unit_deployed_this_year
                             }
                             valueType="number"
                             label={strings.eruDeploymentsThisYear}
-                            size="lg"
+                            textSize="4xl"
                         />
                     </ListView>
                 </Container>
diff --git a/app/src/views/SurgeCatalogueBasecampEruLarge/index.tsx b/app/src/views/SurgeCatalogueBasecampEruLarge/index.tsx
index 0e0b456748..f6722a4968 100644
--- a/app/src/views/SurgeCatalogueBasecampEruLarge/index.tsx
+++ b/app/src/views/SurgeCatalogueBasecampEruLarge/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -82,12 +82,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.compositionValue}
                     label={strings.compositionLabel}
                     strongLabel
@@ -114,17 +114,17 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsVolumeValue}
                     label={strings.specificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueBasecampEruMedium/index.tsx b/app/src/views/SurgeCatalogueBasecampEruMedium/index.tsx
index b9b3932ea4..944c59daff 100644
--- a/app/src/views/SurgeCatalogueBasecampEruMedium/index.tsx
+++ b/app/src/views/SurgeCatalogueBasecampEruMedium/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -82,12 +82,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.compositionValue}
                     label={strings.compositionLabel}
                     strongLabel
@@ -114,17 +114,17 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsVolumeValue}
                     label={strings.specificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueBasecampEruSmall/index.tsx b/app/src/views/SurgeCatalogueBasecampEruSmall/index.tsx
index 792200dbf8..0a4eb78dac 100644
--- a/app/src/views/SurgeCatalogueBasecampEruSmall/index.tsx
+++ b/app/src/views/SurgeCatalogueBasecampEruSmall/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -80,7 +80,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
@@ -103,22 +103,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsWeightValue}
                     label={strings.specificationsWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsVolumeValue}
                     label={strings.specificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueBasecampFacilityManagement/index.tsx b/app/src/views/SurgeCatalogueBasecampFacilityManagement/index.tsx
index f99e5215ba..37e2949ab1 100644
--- a/app/src/views/SurgeCatalogueBasecampFacilityManagement/index.tsx
+++ b/app/src/views/SurgeCatalogueBasecampFacilityManagement/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -45,22 +45,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsWeightValue}
                     label={strings.specificationsWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsVolumeValue}
                     label={strings.specificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueBasecampOffice/index.tsx b/app/src/views/SurgeCatalogueBasecampOffice/index.tsx
index ce9a510a71..73b6d2ec37 100644
--- a/app/src/views/SurgeCatalogueBasecampOffice/index.tsx
+++ b/app/src/views/SurgeCatalogueBasecampOffice/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -56,12 +56,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.compositionValue}
                     label={strings.compositionLabel}
                     strongLabel
@@ -82,17 +82,17 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsVolumeValue}
                     label={strings.specificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueBasecampWelcome/index.tsx b/app/src/views/SurgeCatalogueBasecampWelcome/index.tsx
index 65306d5e95..300114a60b 100644
--- a/app/src/views/SurgeCatalogueBasecampWelcome/index.tsx
+++ b/app/src/views/SurgeCatalogueBasecampWelcome/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -52,12 +52,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.compositionValue}
                     label={strings.compositionLabel}
                     strongLabel
@@ -85,17 +85,17 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsVolumeValue}
                     label={strings.specificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueCashRapidResponse/index.tsx b/app/src/views/SurgeCatalogueCashRapidResponse/index.tsx
index f6f29023dd..0765da5cf1 100644
--- a/app/src/views/SurgeCatalogueCashRapidResponse/index.tsx
+++ b/app/src/views/SurgeCatalogueCashRapidResponse/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -70,22 +70,22 @@ export function Component() {
                 heading={strings.designedFor}
             >
                 <div>{strings.designedForDetailsSectionOne}</div>
-                <TextOutput
+                <DataDisplay
                     value={strings.designedForAssessmentValue}
                     label={strings.designedForAssessmentValueLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.designedForResponseAnalysisValue}
                     label={strings.designedForResponseAnalysisValueLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.designedForSetUpValue}
                     label={strings.designedForSetUpValueLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.designedForMonitoringValue}
                     label={strings.designedForMonitoringValueLabel}
                     strongLabel
@@ -94,12 +94,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={(
                         <ul>
                             <li>{strings.personnelCompositionValueOne}</li>
@@ -119,12 +119,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueCommunicationErtOne/index.tsx b/app/src/views/SurgeCatalogueCommunicationErtOne/index.tsx
index e11eeb38dc..3ea11d6482 100644
--- a/app/src/views/SurgeCatalogueCommunicationErtOne/index.tsx
+++ b/app/src/views/SurgeCatalogueCommunicationErtOne/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -79,12 +79,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -98,12 +98,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueCommunicationErtThree/index.tsx b/app/src/views/SurgeCatalogueCommunicationErtThree/index.tsx
index 5c18b5a4fd..14b8658aa9 100644
--- a/app/src/views/SurgeCatalogueCommunicationErtThree/index.tsx
+++ b/app/src/views/SurgeCatalogueCommunicationErtThree/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -91,12 +91,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -110,12 +110,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueCommunicationErtTwo/index.tsx b/app/src/views/SurgeCatalogueCommunicationErtTwo/index.tsx
index 1787543c33..9dae7a9db6 100644
--- a/app/src/views/SurgeCatalogueCommunicationErtTwo/index.tsx
+++ b/app/src/views/SurgeCatalogueCommunicationErtTwo/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -133,12 +133,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -152,12 +152,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueCommunityEngagementRapidResponse/index.tsx b/app/src/views/SurgeCatalogueCommunityEngagementRapidResponse/index.tsx
index 9440d20a83..1afd17ddba 100644
--- a/app/src/views/SurgeCatalogueCommunityEngagementRapidResponse/index.tsx
+++ b/app/src/views/SurgeCatalogueCommunityEngagementRapidResponse/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -75,12 +75,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueEmergencyNeedsAssessmentCell/index.tsx b/app/src/views/SurgeCatalogueEmergencyNeedsAssessmentCell/index.tsx
index a66afc4ea4..77a22d0729 100644
--- a/app/src/views/SurgeCatalogueEmergencyNeedsAssessmentCell/index.tsx
+++ b/app/src/views/SurgeCatalogueEmergencyNeedsAssessmentCell/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -78,12 +78,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.compositionValue}
                     label={strings.compositionLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthCommunityBasedSurveillance/index.tsx b/app/src/views/SurgeCatalogueHealthCommunityBasedSurveillance/index.tsx
index eea500980e..fbd57bc765 100644
--- a/app/src/views/SurgeCatalogueHealthCommunityBasedSurveillance/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthCommunityBasedSurveillance/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -40,7 +40,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.communityBasedPersonnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={(
                         <ul>
                             <li>{strings.communityBasedPersonnelListItemOne}</li>
@@ -64,22 +64,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.communityBasedSpecificationsLabel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.communityBasedSpecificationsWeightValue}
                     label={strings.communityBasedSpecificationsWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.communityBasedSpecificationsVolumeLabel}
                     label={strings.communityBasedSpecificationsVolumeValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.communityBasedSpecificationsCostValue}
                     label={strings.communityBasedSpecificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.communityBasedSpecificationsNationValue}
                     label={strings.communityBasedSpecificationsNationLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthCommunityCaseManagementCholera/index.tsx b/app/src/views/SurgeCatalogueHealthCommunityCaseManagementCholera/index.tsx
index aefbcbdda9..ecfd904e2b 100644
--- a/app/src/views/SurgeCatalogueHealthCommunityCaseManagementCholera/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthCommunityCaseManagementCholera/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -50,12 +50,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.communityCasePersonnel}
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.communityCasePersonnelLabel}
                     value={strings.communityCasePersonnelValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.communityCasePersonnelCompositionValue}
                     label={strings.communityCasePersonnelCompositionLabel}
                     strongLabel
@@ -84,17 +84,17 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.communityCaseSpecifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.communityCaseSpecificationsWeightValue}
                     label={strings.communityCaseSpecificationsWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.communityCaseSpecificationsVolumeValue}
                     label={strings.communityCaseSpecificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.communityCaseSpecificationNationalSocietiesValue}
                     label={strings.communityCaseSpecificationNationalSocietiesLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthCommunityManagementMalnutrition/index.tsx b/app/src/views/SurgeCatalogueHealthCommunityManagementMalnutrition/index.tsx
index a295d42f0f..54b1084e66 100644
--- a/app/src/views/SurgeCatalogueHealthCommunityManagementMalnutrition/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthCommunityManagementMalnutrition/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -34,7 +34,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.healthCCMMDesignedSpecification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.healthCCMMNsValue}
                     label={strings.healthCCMMNsLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthEmergencyClinic/index.tsx b/app/src/views/SurgeCatalogueHealthEmergencyClinic/index.tsx
index 8507581f57..6898190843 100644
--- a/app/src/views/SurgeCatalogueHealthEmergencyClinic/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthEmergencyClinic/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -69,12 +69,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.emergencyClinicPersonnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.emergencyClinicTotalPersonnelValue}
                     label={strings.emergencyClinicTotalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.emergencyClinicPersonnelCompositionValue}
                     label={strings.emergencyClinicPersonnelCompositionLabel}
                     strongLabel
@@ -84,27 +84,27 @@ export function Component() {
                 heading={strings.emergencyClinicStandardComponents}
             >
                 <div>{strings.emergencyClinicStandardComponentsDetails}</div>
-                <TextOutput
+                <DataDisplay
                     value={strings.emergencyClinicModuleOneValue}
                     label={strings.emergencyClinicModuleOneLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.emergencyClinicModuleTwoValue}
                     label={strings.emergencyClinicModuleTwoLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.emergencyClinicModuleThreeValue}
                     label={strings.emergencyClinicModuleThreeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.emergencyClinicModuleFourValue}
                     label={strings.emergencyClinicModuleFourLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.emergencyClinicModuleFiveValue}
                     label={strings.emergencyClinicModuleFiveLabel}
                     strongLabel
@@ -113,7 +113,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.emergencyClinicSpecifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.emergencyClinicSpecificationsWeightValue}
                     label={strings.emergencyClinicSpecificationsWeightLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthEruCholeraTreatment/index.tsx b/app/src/views/SurgeCatalogueHealthEruCholeraTreatment/index.tsx
index d7a3c12c84..0f87f0907d 100644
--- a/app/src/views/SurgeCatalogueHealthEruCholeraTreatment/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthEruCholeraTreatment/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -39,12 +39,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.choleraDesignedPersonnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraTotalPersonnelValue}
                     label={strings.choleraTotalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraTotalPersonnelCompositionValue}
                     label={strings.choleraTotalPersonnelCompositionLabel}
                     strongLabel
@@ -54,62 +54,62 @@ export function Component() {
                 heading={strings.choleraStandardComponentsLabel}
             >
                 <div>{strings.choleraStandardComponentsDescription}</div>
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleOneValue}
                     label={strings.choleraStandardModuleOneLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleTwoValue}
                     label={strings.choleraStandardModuleTwoLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleThreeValue}
                     label={strings.choleraStandardModuleThreeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleFourValue}
                     label={strings.choleraStandardModuleFourLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleFiveValue}
                     label={strings.choleraStandardModuleFiveLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleSixValue}
                     label={strings.choleraStandardModuleSixLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleSevenValue}
                     label={strings.choleraStandardModuleSevenLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleEightValue}
                     label={strings.choleraStandardModuleEightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleNineValue}
                     label={strings.choleraStandardModuleNineLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleTenValue}
                     label={strings.choleraStandardModuleTenLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleElevenValue}
                     label={strings.choleraStandardModuleElevenLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraStandardModuleTwelveValue}
                     label={strings.choleraStandardModuleTwelveLabel}
                     strongLabel
@@ -118,7 +118,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.choleraSpecifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.choleraSpecificationsValue}
                     label={strings.choleraSpecificationsLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthEruClinic/index.tsx b/app/src/views/SurgeCatalogueHealthEruClinic/index.tsx
index 69d608b2d9..9516de251a 100644
--- a/app/src/views/SurgeCatalogueHealthEruClinic/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthEruClinic/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -91,12 +91,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -108,7 +108,7 @@ export function Component() {
                 <div>{strings.standardComponentsDetails}</div>
                 <ul>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.opdModuleValue}
                             label={strings.opdModuleValueLabel}
                             withoutLabelColon
@@ -116,7 +116,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.maternalModuleValue}
                             label={strings.maternalModuleLabel}
                             withoutLabelColon
@@ -124,7 +124,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.pharmaceuticalModuleValue}
                             label={strings.pharmaceuticalModuleLabel}
                             withoutLabelColon
@@ -132,7 +132,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.pssModuleValue}
                             label={strings.pssModuleValueLabel}
                             withoutLabelColon
@@ -140,7 +140,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.storeModuleValue}
                             label={strings.storeModuleValueLabel}
                             withoutLabelColon
@@ -148,7 +148,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.wasteManagementModuleValue}
                             label={strings.wasteManagementModuleLabel}
                             withoutLabelColon
@@ -156,7 +156,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.waterTreatmentModuleValue}
                             label={strings.waterTreatmentModuleLabel}
                             withoutLabelColon
@@ -164,7 +164,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.sanitationModuleValue}
                             label={strings.sanitationModuleLabel}
                             withoutLabelColon
@@ -172,7 +172,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.infrastructureModuleValue}
                             label={strings.infrastructureModuleLabel}
                             withoutLabelColon
@@ -180,7 +180,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.powerModuleValue}
                             label={strings.powerModuleLabel}
                             withoutLabelColon
@@ -188,7 +188,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.administrationModuleValue}
                             label={strings.administrationModuleLabel}
                             withoutLabelColon
@@ -196,7 +196,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.itModuleValue}
                             label={strings.itModuleLabel}
                             withoutLabelColon
@@ -204,7 +204,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.vehiclesValue}
                             label={strings.vehiclesLabel}
                             withoutLabelColon
@@ -212,7 +212,7 @@ export function Component() {
                         />
                     </li>
                     <li>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.basecampsValue}
                             label={strings.basecampsLabel}
                             withoutLabelColon
@@ -224,22 +224,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsWeightValue}
                     label={strings.specificationsWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsVolumeValue}
                     label={strings.specificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthEruHospital/index.tsx b/app/src/views/SurgeCatalogueHealthEruHospital/index.tsx
index 3232274fff..7d45a58242 100644
--- a/app/src/views/SurgeCatalogueHealthEruHospital/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthEruHospital/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -111,12 +111,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -126,37 +126,37 @@ export function Component() {
                 heading={strings.standardComponents}
             >
                 <div>{strings.standardComponentsDetails}</div>
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleOneValue}
                     label={strings.moduleOneLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleTwoValue}
                     label={strings.moduleTwoLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleThreeValue}
                     label={strings.moduleThreeLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleFourValue}
                     label={strings.moduleFourLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleFiveValue}
                     label={strings.moduleFiveLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleSixValue}
                     label={strings.moduleSixLabel}
                     withoutLabelColon
@@ -166,22 +166,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsWeightValue}
                     label={strings.specificationsWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsVolumeValue}
                     label={strings.specificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthEruPsychosocialSupport/index.tsx b/app/src/views/SurgeCatalogueHealthEruPsychosocialSupport/index.tsx
index 56d96c02ed..0af5fac57f 100644
--- a/app/src/views/SurgeCatalogueHealthEruPsychosocialSupport/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthEruPsychosocialSupport/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -40,12 +40,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.healthPSSPersonnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.healthPSSPersonnelTotalValue}
                     label={strings.healthPSSPersonnelTotalLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.healthPSSPersonnelCompositionValue}
                     label={strings.healthPSSPersonnelCompositionLabel}
                     strongLabel
@@ -64,7 +64,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.healthPSSSpecificationsTitle}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.healthPSSSpecificationsNsValue}
                     label={strings.healthPSSSpecificationsNsLabel}
                 />
diff --git a/app/src/views/SurgeCatalogueHealthEruSurgical/index.tsx b/app/src/views/SurgeCatalogueHealthEruSurgical/index.tsx
index 1320dff698..07a2310815 100644
--- a/app/src/views/SurgeCatalogueHealthEruSurgical/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthEruSurgical/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -35,12 +35,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -50,31 +50,31 @@ export function Component() {
                 heading={strings.standardComponents}
             >
                 <div>{strings.standardComponentsDetails}</div>
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleOneValue}
                     label={strings.moduleOneLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleTwoValue}
                     label={strings.moduleTwoLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleThreeValue}
                     label={strings.moduleThreeLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleFourValue}
                     label={strings.moduleFourLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleFiveValue}
                     label={strings.moduleFiveLabel}
                     withoutLabelColon
@@ -84,12 +84,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsCostValue}
                     label={strings.specificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthInfectionPreventionAndControl/index.tsx b/app/src/views/SurgeCatalogueHealthInfectionPreventionAndControl/index.tsx
index 441e68f381..0cb4ee2a5e 100644
--- a/app/src/views/SurgeCatalogueHealthInfectionPreventionAndControl/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthInfectionPreventionAndControl/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -44,12 +44,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.healthIPCPersonnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.healthIPCTotalValue}
                     label={strings.healthIPCTotalLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.healthIPCCompositionValue}
                     label={strings.healthIPCCompositionLabel}
                     strongLabel
@@ -70,22 +70,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.healthIPCSpecificationsLabel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.healthIPCSpecificationsWeightValue}
                     label={strings.healthIPCSpecificationsWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.healthIPCSpecificationsVolumeValue}
                     label={strings.healthIPCSpecificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.healthIPCSpecificationsCostValue}
                     label={strings.healthIPCSpecificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.healthIPCSpecificationsNsValue}
                     label={strings.healthIPCSpecificationsNsLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthMaternalNewbornClinic/index.tsx b/app/src/views/SurgeCatalogueHealthMaternalNewbornClinic/index.tsx
index 1d523b0432..6868dbdb0d 100644
--- a/app/src/views/SurgeCatalogueHealthMaternalNewbornClinic/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthMaternalNewbornClinic/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -39,12 +39,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -54,31 +54,31 @@ export function Component() {
                 heading={strings.standardComponents}
             >
                 <div>{strings.standardComponentsDetails}</div>
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleOneValue}
                     label={strings.moduleOneLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleTwoValue}
                     label={strings.moduleTwoLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleThreeValue}
                     label={strings.moduleThreeLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleFourValue}
                     label={strings.moduleFourLabel}
                     withoutLabelColon
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.moduleFiveValue}
                     label={strings.moduleFiveLabel}
                     withoutLabelColon
@@ -88,7 +88,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationsNationalSocietyValue}
                     label={strings.specificationsNationalSocietyLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueHealthSafeDignifiedBurials/index.tsx b/app/src/views/SurgeCatalogueHealthSafeDignifiedBurials/index.tsx
index 36dffd08d3..713dfdf67c 100644
--- a/app/src/views/SurgeCatalogueHealthSafeDignifiedBurials/index.tsx
+++ b/app/src/views/SurgeCatalogueHealthSafeDignifiedBurials/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -29,12 +29,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.healthBurialsPersonnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.healthBurialsTotalValue}
                     label={strings.healthBurialsTotalLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.healthBurialsCompositionValue}
                     label={strings.healthBurialsCompositionLabel}
                     strongLabel
@@ -55,22 +55,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.healthBurialsSpecificationsLabel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.healthBurialsSpecificationsWeightValue}
                     label={strings.healthBurialsSpecificationsWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.healthBurialsSpecificationsVolumeValue}
                     label={strings.healthBurialsSpecificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.healthBurialsSpecificationsCostValue}
                     label={strings.healthBurialsSpecificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.healthBurialsSpecificationsNsValue}
                     label={strings.healthBurialsSpecificationsNsLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueInformationManagementSatelliteImagery/index.tsx b/app/src/views/SurgeCatalogueInformationManagementSatelliteImagery/index.tsx
index 8d5bd104f8..3cf9e75284 100644
--- a/app/src/views/SurgeCatalogueInformationManagementSatelliteImagery/index.tsx
+++ b/app/src/views/SurgeCatalogueInformationManagementSatelliteImagery/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -260,7 +260,7 @@ export function Component() {
                 </Link>
                 <div>{strings.imagerySourcesInternationalSpaceTextOne}</div>
                 <div>{strings.imagerySourcesInternationalSpaceTextTwo}</div>
-                <TextOutput
+                <DataDisplay
                     label={strings.imagerySourcesInternationalSpaceTextThree}
                     value={(
                         <Link
diff --git a/app/src/views/SurgeCatalogueLivelihoodServices/index.tsx b/app/src/views/SurgeCatalogueLivelihoodServices/index.tsx
index 62060c9e55..66ce37eacd 100644
--- a/app/src/views/SurgeCatalogueLivelihoodServices/index.tsx
+++ b/app/src/views/SurgeCatalogueLivelihoodServices/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -146,7 +146,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.livelihoodSpecificationTitle}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.livelihoodSpecificationValue}
                     label={strings.livelihoodSpecificationLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueLogisticsEru/index.tsx b/app/src/views/SurgeCatalogueLogisticsEru/index.tsx
index 5a5e08aafc..f9c0e5396a 100644
--- a/app/src/views/SurgeCatalogueLogisticsEru/index.tsx
+++ b/app/src/views/SurgeCatalogueLogisticsEru/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -88,12 +88,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.logisticsPersonnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsPersonnelValue}
                     label={strings.logisticsPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsPersonnelCompositionValue}
                     label={strings.logisticsPersonnelCompositionLabel}
                     strongLabel
@@ -116,22 +116,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.logisticsSpecifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsSpecificationsWeightValue}
                     label={strings.logisticsSpecificationsWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsSpecificationsVolumeValue}
                     label={strings.logisticsSpecificationsVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsSpecificationsCostValue}
                     label={strings.logisticsSpecificationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsSpecificationsNSValue}
                     label={strings.logisticsSpecificationsNSLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueLogisticsLpscmNs/index.tsx b/app/src/views/SurgeCatalogueLogisticsLpscmNs/index.tsx
index 510c728d37..578f845170 100644
--- a/app/src/views/SurgeCatalogueLogisticsLpscmNs/index.tsx
+++ b/app/src/views/SurgeCatalogueLogisticsLpscmNs/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -41,12 +41,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.logisticsDesignedFor}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsDesignedForMobilizationValue}
                     label={strings.logisticsDesignedForMobilizationLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={(
                         <div>
                             <div>{strings.logisticsDesignedForProcurementValueOne}</div>
@@ -57,27 +57,27 @@ export function Component() {
                     label={strings.logisticsDesignedForProcurementLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsDesignedForQAValue}
                     label={strings.logisticsDesignedForQALabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsDesignedForFleetValue}
                     label={strings.logisticsDesignedForFleetLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsDesignedForWarehousingValue}
                     label={strings.logisticsDesignedForWarehousingLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsDesignedForStockValue}
                     label={strings.logisticsDesignedForStockLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.logisticsDesignedForSupportValue}
                     label={strings.logisticsDesignedForSupportLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueOperationsManagementHeops/index.tsx b/app/src/views/SurgeCatalogueOperationsManagementHeops/index.tsx
index 05b1e4e2f6..6b6699873c 100644
--- a/app/src/views/SurgeCatalogueOperationsManagementHeops/index.tsx
+++ b/app/src/views/SurgeCatalogueOperationsManagementHeops/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -54,12 +54,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.surgeOperationsSpecifications}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.surgeOperationsCostValue}
                     label={strings.surgeOperationsCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.surgeOperationsNSValue}
                     label={strings.surgeOperationsNSLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCataloguePgiServices/index.tsx b/app/src/views/SurgeCataloguePgiServices/index.tsx
index b596a34948..2e8b9f3faa 100644
--- a/app/src/views/SurgeCataloguePgiServices/index.tsx
+++ b/app/src/views/SurgeCataloguePgiServices/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -116,12 +116,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.protectionPersonnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.protectionTotalValue}
                     label={strings.protectionTotalLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.protectionCompositionValue}
                     label={strings.protectionCompositionLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCataloguePmerEmergencyPlanAction/index.tsx b/app/src/views/SurgeCataloguePmerEmergencyPlanAction/index.tsx
index 31ab337f3b..6b65c89900 100644
--- a/app/src/views/SurgeCataloguePmerEmergencyPlanAction/index.tsx
+++ b/app/src/views/SurgeCataloguePmerEmergencyPlanAction/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -43,12 +43,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specificationsTitle}
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationsCostTitle}
                     strongLabel
                     value={strings.specificationsCostDetails}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationsNSTitle}
                     strongLabel
                     value={strings.specificationsNSDetails}
diff --git a/app/src/views/SurgeCataloguePmerRealTimeEvaluation/index.tsx b/app/src/views/SurgeCataloguePmerRealTimeEvaluation/index.tsx
index a4dfd41490..0a3d669ebb 100644
--- a/app/src/views/SurgeCataloguePmerRealTimeEvaluation/index.tsx
+++ b/app/src/views/SurgeCataloguePmerRealTimeEvaluation/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -39,12 +39,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specificationsTitle}
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationsCostTitle}
                     strongLabel
                     value={strings.specificationsCostDetails}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationsNSTitle}
                     strongLabel
                     value={strings.specificationsNSDetails}
diff --git a/app/src/views/SurgeCatalogueReliefEru/index.tsx b/app/src/views/SurgeCatalogueReliefEru/index.tsx
index 388ecfdfdd..b3789fc493 100644
--- a/app/src/views/SurgeCatalogueReliefEru/index.tsx
+++ b/app/src/views/SurgeCatalogueReliefEru/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -104,12 +104,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnelTitle}
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.personnelTotal}
                     strongLabel
                     value={strings.personnelTotalDetail}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.personnelComposition}
                     strongLabel
                     value={strings.personnelCompositionDetail}
@@ -127,17 +127,17 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specificationsTitle}
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationsWeightTitle}
                     strongLabel
                     value={strings.specificationsWeightDetails}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationsVolumeTitle}
                     strongLabel
                     value={strings.specificationsVolumeDetails}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationsNSTitle}
                     strongLabel
                     value={strings.specificationsNSDetails}
diff --git a/app/src/views/SurgeCatalogueSecurityManagement/index.tsx b/app/src/views/SurgeCatalogueSecurityManagement/index.tsx
index d4ba4796f3..389f5d17e5 100644
--- a/app/src/views/SurgeCatalogueSecurityManagement/index.tsx
+++ b/app/src/views/SurgeCatalogueSecurityManagement/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -48,27 +48,27 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.designedForTitle}
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.strategic}
                     strongLabel
                     value={strings.strategicContent}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.operational}
                     strongLabel
                     value={strings.operationalContent}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.compliance}
                     strongLabel
                     value={strings.complianceContent}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.coordination}
                     strongLabel
                     value={strings.coordinationContent}
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.training}
                     strongLabel
                     value={strings.trainingContent}
diff --git a/app/src/views/SurgeCatalogueShelterCoordinatorTeam/index.tsx b/app/src/views/SurgeCatalogueShelterCoordinatorTeam/index.tsx
index 4c9c5ea185..38da2de46f 100644
--- a/app/src/views/SurgeCatalogueShelterCoordinatorTeam/index.tsx
+++ b/app/src/views/SurgeCatalogueShelterCoordinatorTeam/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -61,37 +61,37 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.designedFor}
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.designedForItemOneLabel}
                     value={strings.designedForItemOneValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.designedForItemTwoLabel}
                     value={strings.designedForItemTwoValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.designedForItemThreeLabel}
                     value={strings.designedForItemThreeValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.designedForItemFourLabel}
                     value={strings.designedForItemFourValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.designedForItemFiveLabel}
                     value={strings.designedForItemFiveValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.designedForItemSixLabel}
                     value={strings.designedForItemSixValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.designedForItemSevenLabel}
                     value={strings.designedForItemSevenValue}
                     strongLabel
@@ -100,12 +100,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -114,7 +114,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationValue}
                     label={strings.specificationLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueShelterTechnicalTeam/index.tsx b/app/src/views/SurgeCatalogueShelterTechnicalTeam/index.tsx
index 83cd58a38e..828928b3d5 100644
--- a/app/src/views/SurgeCatalogueShelterTechnicalTeam/index.tsx
+++ b/app/src/views/SurgeCatalogueShelterTechnicalTeam/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -108,12 +108,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -122,7 +122,7 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationValue}
                     label={strings.specificationLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueWashHwts/index.tsx b/app/src/views/SurgeCatalogueWashHwts/index.tsx
index ceb05fd980..95e478733b 100644
--- a/app/src/views/SurgeCatalogueWashHwts/index.tsx
+++ b/app/src/views/SurgeCatalogueWashHwts/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -46,12 +46,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.personnelCompositionLabel}
                     value={(
                         <ul>
@@ -87,22 +87,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationWeightValue}
                     label={strings.specificationWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationVolumeValue}
                     label={strings.specificationVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationCostValue}
                     label={strings.specificationCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationNSValue}
                     label={strings.specificationNSLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueWashKit2/index.tsx b/app/src/views/SurgeCatalogueWashKit2/index.tsx
index 699c823197..c8244364ed 100644
--- a/app/src/views/SurgeCatalogueWashKit2/index.tsx
+++ b/app/src/views/SurgeCatalogueWashKit2/index.tsx
@@ -1,6 +1,6 @@
 import {
+    DataDisplay,
     Image,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -37,12 +37,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.washKit2Specification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.washKit2SpecificationWeightValue}
                     label={strings.washKit2SpecificationWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.washKit2SpecificationVolumeValue}
                     label={strings.washKit2SpecificationVolumeLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueWashKit5/index.tsx b/app/src/views/SurgeCatalogueWashKit5/index.tsx
index 8f053322b7..61cc352582 100644
--- a/app/src/views/SurgeCatalogueWashKit5/index.tsx
+++ b/app/src/views/SurgeCatalogueWashKit5/index.tsx
@@ -1,6 +1,6 @@
 import {
+    DataDisplay,
     Image,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -37,12 +37,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.washKit5Specification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.washKit5SpecificationWeightValue}
                     label={strings.washKit5SpecificationWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.washKit5SpecificationVolumeValue}
                     label={strings.washKit5SpecificationVolumeLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueWashKitM15Eru/index.tsx b/app/src/views/SurgeCatalogueWashKitM15Eru/index.tsx
index fff09144bb..fdba4a45b3 100644
--- a/app/src/views/SurgeCatalogueWashKitM15Eru/index.tsx
+++ b/app/src/views/SurgeCatalogueWashKitM15Eru/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -104,12 +104,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -118,22 +118,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationWeightValue}
                     label={strings.specificationWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationVolumeValue}
                     label={strings.specificationVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationCostValue}
                     label={strings.specificationCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationNSValue}
                     label={strings.specificationNSLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueWashKitM40Eru/index.tsx b/app/src/views/SurgeCatalogueWashKitM40Eru/index.tsx
index e626884dbb..86b71a3d67 100644
--- a/app/src/views/SurgeCatalogueWashKitM40Eru/index.tsx
+++ b/app/src/views/SurgeCatalogueWashKitM40Eru/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -77,12 +77,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -94,22 +94,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationWeightValue}
                     label={strings.specificationWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationVolumeValue}
                     label={strings.specificationVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationCostValue}
                     label={strings.specificationCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationNSValue}
                     label={strings.specificationNSLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueWashKitMsm20Eru/index.tsx b/app/src/views/SurgeCatalogueWashKitMsm20Eru/index.tsx
index beb3b5abf1..5c9cb50cf1 100644
--- a/app/src/views/SurgeCatalogueWashKitMsm20Eru/index.tsx
+++ b/app/src/views/SurgeCatalogueWashKitMsm20Eru/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -91,12 +91,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.personnelCompositionValue}
                     label={strings.personnelCompositionLabel}
                     strongLabel
@@ -108,22 +108,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationWeightValue}
                     label={strings.specificationWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationVolumeValue}
                     label={strings.specificationVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationCostValue}
                     label={strings.specificationCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationNSValue}
                     label={strings.specificationNSLabel}
                     strongLabel
diff --git a/app/src/views/SurgeCatalogueWashSludge/index.tsx b/app/src/views/SurgeCatalogueWashSludge/index.tsx
index 6d552b16ce..75a0809f7a 100644
--- a/app/src/views/SurgeCatalogueWashSludge/index.tsx
+++ b/app/src/views/SurgeCatalogueWashSludge/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeCatalogueContainer from '#components/domain/SurgeCatalogueContainer';
@@ -108,7 +108,7 @@ export function Component() {
                     <dt>{strings.totalPersonnelHeader}</dt>
                     <br />
                     <dd>
-                        <TextOutput
+                        <DataDisplay
                             value={strings.totalPersonnelValue}
                             label={strings.totalPersonnelLabel}
                             strongLabel
@@ -129,27 +129,27 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specification}
             >
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationWeightLabel}
                     value={strings.specificationWeightValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationVolumeLabel}
                     value={strings.specificationVolumeValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationCostLabel}
                     value={strings.specificationCostValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationTemperatureLabel}
                     value={strings.specificationTemperatureValue}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.specificationModularityLabel}
                     value={(
                         <ul>
diff --git a/app/src/views/SurgeCatalogueWashWaterSupplyRehabilitation/index.tsx b/app/src/views/SurgeCatalogueWashWaterSupplyRehabilitation/index.tsx
index 0c8295b27b..e1d50e68b3 100644
--- a/app/src/views/SurgeCatalogueWashWaterSupplyRehabilitation/index.tsx
+++ b/app/src/views/SurgeCatalogueWashWaterSupplyRehabilitation/index.tsx
@@ -1,4 +1,4 @@
-import { TextOutput } from '@ifrc-go/ui';
+import { DataDisplay } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
 
@@ -40,12 +40,12 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.personnel}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.totalPersonnelValue}
                     label={strings.totalPersonnelLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     label={strings.personnelCompositionLabel}
                     value={(
                         <ul>
@@ -70,22 +70,22 @@ export function Component() {
             <SurgeContentContainer
                 heading={strings.specification}
             >
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationWeightValue}
                     label={strings.specificationWeightLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationVolumeValue}
                     label={strings.specificationVolumeLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationCostValue}
                     label={strings.specificationCostLabel}
                     strongLabel
                 />
-                <TextOutput
+                <DataDisplay
                     value={strings.specificationNSValue}
                     label={strings.specificationNSLabel}
                     strongLabel
diff --git a/app/src/views/SurgeOperationalToolbox/index.tsx b/app/src/views/SurgeOperationalToolbox/index.tsx
index bcb648020c..a9bdbcf857 100644
--- a/app/src/views/SurgeOperationalToolbox/index.tsx
+++ b/app/src/views/SurgeOperationalToolbox/index.tsx
@@ -1,11 +1,11 @@
 import { type MouseEventHandler } from 'react';
 import {
     Container,
+    DataDisplay,
     Description,
+    DisplayLabel,
     ExpandableContainer,
-    Label,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
@@ -586,17 +586,17 @@ export function Component() {
 
     return (
         <TabPage>
-            <Label
+            <DisplayLabel
                 strong
                 textSize="lg"
             >
                 {strings.surgeOperationalToolboxHeadingDescription}
-            </Label>
+            </DisplayLabel>
             <ListView layout="block">
                 <ExpandableContainer
                     heading={strings.operationalToolboxOverviewHeading}
                     initiallyExpanded
-                    withDarkBackground
+                    backgroundColor="background"
                     withPadding
                     spacing="lg"
                     headerDescription={strings.overviewSectionHeader}
@@ -607,13 +607,13 @@ export function Component() {
                         withContentWell
                     >
                         <ListView layout="block">
-                            <TextOutput
+                            <DataDisplay
                                 value={strings.toolboxValue}
                                 label={strings.toolboxLabel}
                                 strongLabel
                                 withBlockLayout
                             />
-                            <TextOutput
+                            <DataDisplay
                                 value={strings.timelineValue}
                                 label={strings.timelineLabel}
                                 withBlockLayout
@@ -635,7 +635,7 @@ export function Component() {
                     layout="block"
                     withSpacingOpticalCorrection
                     withPadding
-                    withDarkBackground
+                    backgroundColor="background"
                 >
                     <div>{fundingCoverageDescription}</div>
                     <div>{perSectionHeading}</div>
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
index 3ef314d7a9..a8255b8721 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
@@ -2,9 +2,9 @@ import { useMemo } from 'react';
 import {
     Button,
     Container,
+    DataDisplay,
+    Dialog,
     ListView,
-    Modal,
-    TextOutput,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -81,7 +81,7 @@ function EmergencyResponseUnitTypeCard(props: Props) {
             heading={typeDisplay}
             headingLevel={4}
             headerDescription={(
-                <TextOutput
+                <DataDisplay
                     label={strings.emergencyResponseUnitOwnerCardLastUpdated}
                     value={updatedAt}
                     valueType="date"
@@ -93,18 +93,18 @@ function EmergencyResponseUnitTypeCard(props: Props) {
                 <Button
                     name={undefined}
                     onClick={setShowReadinessInfoTrue}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.eruSeeReadinessInfoButton}
                 >
                     {strings.eruSeeReadinessInfoButton}
                 </Button>
             )}
             withPadding
-            withBackground
-            withShadow
+            backgroundColor="foreground"
+            boxShadow="md"
         >
             <ListView layout="block">
-                <TextOutput
+                <DataDisplay
                     label={strings.emergencyResponseUnitNationalSociety}
                     value={nationalSocieties}
                     strongValue
@@ -122,7 +122,7 @@ function EmergencyResponseUnitTypeCard(props: Props) {
                 </ListView>
             </ListView>
             {showReadinessInfo && (
-                <Modal
+                <Dialog
                     heading={typeDisplay}
                     headerDescription={strings.eruReadinessInformationHeading}
                     onClose={setShowReadinessInfoFalse}
@@ -187,7 +187,7 @@ function EmergencyResponseUnitTypeCard(props: Props) {
                             )}
                         </ListView>
                     )}
-                </Modal>
+                </Dialog>
             )}
         </Container>
     );
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EruReadinessList/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EruReadinessList/index.tsx
index bfed90724e..81ef80e997 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EruReadinessList/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EruReadinessList/index.tsx
@@ -24,7 +24,7 @@ function EruReadinessList(props: Props) {
         <Container
             heading={heading}
             headingLevel={6}
-            withDarkBackground
+            backgroundColor="background"
             withPadding
         >
             <ListView
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
index 898dc72325..a4194e3fd9 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
@@ -2,9 +2,9 @@ import { useMemo } from 'react';
 import {
     Button,
     Container,
+    DataDisplay,
+    Dialog,
     ListView,
-    Modal,
-    TextOutput,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -67,7 +67,7 @@ function NationalSocietyCard(props: Props) {
             withFooterBorder
             heading={eruData?.eru_owner_details?.national_society_country_details?.society_name ?? '??'}
             headerDescription={(
-                <TextOutput
+                <DataDisplay
                     label={strings.emergencyResponseUnitOwnerNSCardLastUpdated}
                     value={eruData.updated_at}
                     valueType="date"
@@ -78,23 +78,23 @@ function NationalSocietyCard(props: Props) {
                 <Button
                     name={undefined}
                     onClick={setShowReadinessInfoTrue}
-                    styleVariant="action"
+                    variant="tertiary"
                     title={strings.eruNSSeeReadinessInfoButton}
                 >
                     {strings.eruNSSeeReadinessInfoButton}
                 </Button>
             )}
             withPadding
-            withShadow
-            withBackground
+            boxShadow="md"
+            backgroundColor="foreground"
         >
-            <TextOutput
+            <DataDisplay
                 label={strings.eruTypesLabel}
                 value={eruTypes}
                 strongValue
             />
             {showReadinessInfo && (
-                <Modal
+                <Dialog
                     heading={
                         eruData.eru_owner_details.national_society_country_details.society_name
                     }
@@ -154,7 +154,7 @@ function NationalSocietyCard(props: Props) {
                             )}
                         </ListView>
                     )}
-                </Modal>
+                </Dialog>
             )}
         </Container>
     );
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIcon/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIcon/index.tsx
index 5680a43cdb..2628c6d2ca 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIcon/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIcon/index.tsx
@@ -4,7 +4,7 @@ import {
     CloseCircleLineIcon,
 } from '@ifrc-go/icons';
 import {
-    Label,
+    DisplayLabel,
     ListView,
 } from '@ifrc-go/ui';
 import { isDefined } from '@togglecorp/fujs';
@@ -50,9 +50,9 @@ function ReadinessIcon(props: Props) {
             <div className={styles.icon}>
                 {icon}
             </div>
-            <Label>
+            <DisplayLabel>
                 {isDefined(label) && label}
-            </Label>
+            </DisplayLabel>
         </ListView>
     );
 }
diff --git a/app/src/views/SurgeOverview/RapidResponsePersonnel/index.tsx b/app/src/views/SurgeOverview/RapidResponsePersonnel/index.tsx
index 183beca5c8..8373088190 100644
--- a/app/src/views/SurgeOverview/RapidResponsePersonnel/index.tsx
+++ b/app/src/views/SurgeOverview/RapidResponsePersonnel/index.tsx
@@ -109,8 +109,8 @@ export function Component() {
                     withHeaderBorder
                     pending={pending}
                     withPadding
-                    withBackground
-                    withShadow
+                    backgroundColor="foreground"
+                    boxShadow="md"
                 >
                     <BarChart
                         data={deploymentsByNationalSocietyResponse ?? []}
@@ -124,8 +124,8 @@ export function Component() {
                     withHeaderBorder
                     pending={pending}
                     withPadding
-                    withBackground
-                    withShadow
+                    backgroundColor="foreground"
+                    boxShadow="md"
                 >
                     {deploymentsByNationalSocietyResponse && (
                         <TimeSeriesChart
diff --git a/app/src/views/TermsAndConditions/ConditionsModal/index.tsx b/app/src/views/TermsAndConditions/ConditionsModal/index.tsx
index d71db7c4cc..bfbe3e37cd 100644
--- a/app/src/views/TermsAndConditions/ConditionsModal/index.tsx
+++ b/app/src/views/TermsAndConditions/ConditionsModal/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import {
-    Modal,
+    Dialog,
     Table,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -228,7 +228,7 @@ function ConditionalModal(props: Props) {
     );
 
     return (
-        <Modal
+        <Dialog
             heading={strings.hereConditionTitle}
             onClose={onClose}
             size="full"
@@ -241,7 +241,7 @@ function ConditionalModal(props: Props) {
                 data={tableData}
                 pending={false}
             />
-        </Modal>
+        </Dialog>
     );
 }
 
diff --git a/app/src/views/ThreeWActivityDetail/ActivityListItem/index.tsx b/app/src/views/ThreeWActivityDetail/ActivityListItem/index.tsx
index 80ab22eb9f..04e72c0b52 100644
--- a/app/src/views/ThreeWActivityDetail/ActivityListItem/index.tsx
+++ b/app/src/views/ThreeWActivityDetail/ActivityListItem/index.tsx
@@ -1,8 +1,8 @@
 import {
     Container,
-    Label,
+    DataDisplay,
+    DisplayLabel,
     ListView,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { isDefined } from '@togglecorp/fujs';
@@ -58,31 +58,31 @@ function ActivityListItem(props: Props) {
                     spacing="2xs"
                     withSpacingOpticalCorrection
                 >
-                    <TextOutput
+                    <DataDisplay
                         label={strings.emergencySector}
                         value={sector_details?.title}
                         strongLabel
                     />
-                    <Label>
+                    <DisplayLabel>
                         {action_details?.title}
-                    </Label>
+                    </DisplayLabel>
                     {is_simplified_report && people_households === 'people' && (
                         <>
                             {(isDefined(male_count) || isDefined(female_count)) && (
                                 <>
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.emergencyMale}
                                         value={male_count}
                                         strongLabel
                                     />
-                                    <TextOutput
+                                    <DataDisplay
                                         label={strings.emergencyFemale}
                                         value={female_count}
                                         strongLabel
                                     />
                                 </>
                             )}
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.emergencyTotalPeople}
                                 value={people_count}
                                 strongLabel
@@ -90,7 +90,7 @@ function ActivityListItem(props: Props) {
                         </>
                     )}
                     {people_households === 'households' && (
-                        <TextOutput
+                        <DataDisplay
                             label={strings.emergencyTotalHouseholds}
                             value={household_count}
                             strongLabel
@@ -110,7 +110,7 @@ function ActivityListItem(props: Props) {
                             spacing="2xs"
                         >
                             {Object.entries(supplies).map(([supply, value]) => (
-                                <TextOutput
+                                <DataDisplay
                                     key={supply}
                                     label={supplyMapping?.[Number(supply)]?.title}
                                     value={value}
@@ -132,7 +132,7 @@ function ActivityListItem(props: Props) {
                             spacing="2xs"
                         >
                             {Object.entries(custom_supplies).map(([supply, value]) => (
-                                <TextOutput
+                                <DataDisplay
                                     key={supply}
                                     label={supply}
                                     value={value}
diff --git a/app/src/views/ThreeWActivityDetail/index.tsx b/app/src/views/ThreeWActivityDetail/index.tsx
index 8b222518e5..f36bfeeef1 100644
--- a/app/src/views/ThreeWActivityDetail/index.tsx
+++ b/app/src/views/ThreeWActivityDetail/index.tsx
@@ -6,11 +6,11 @@ import { useParams } from 'react-router-dom';
 import { PencilFillIcon } from '@ifrc-go/icons';
 import {
     Container,
-    DateOutput,
+    DataDisplay,
+    DateDisplay,
     ListView,
     Message,
     RawList,
-    TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
@@ -130,7 +130,7 @@ export function Component() {
                     strings.emergencyLastModifiedOnTitle,
                     {
                         date: (
-                            <DateOutput
+                            <DateDisplay
                                 value={modifiedAt}
                             />
                         ),
@@ -156,7 +156,7 @@ export function Component() {
                             layout="block"
                             withSpacingOpticalCorrection
                         >
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.emergencyIFRCSupportedOperation}
                                 value={(
                                     <Link
@@ -169,7 +169,7 @@ export function Component() {
                                 )}
                                 strongLabel
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.emergencyCountry}
                                 value={(
                                     <Link
@@ -182,36 +182,36 @@ export function Component() {
                                 )}
                                 strongLabel
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.emergencyProvince}
                                 value={districtsName}
                                 strongLabel
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.emergencyStartDate}
                                 value={startDate}
                                 valueType="date"
                                 strongLabel
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.emergencyStatus}
                                 value={statusName}
                                 strongLabel
                             />
-                            <TextOutput
+                            <DataDisplay
                                 label={strings.emergencyActivityLead}
                                 value={activityLeadName}
                                 strongLabel
                             />
                             {activityLead === 'deployed_eru' && (
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.emergencyERU}
                                     value={eruNationalSocietyName}
                                     strongLabel
                                 />
                             )}
                             {activityLead === 'national_society' && (
-                                <TextOutput
+                                <DataDisplay
                                     label={strings.emergencyNationalSociety}
                                     value={nationalSocietyName}
                                     strongLabel
diff --git a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/ActionSupplyInput/index.tsx b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/ActionSupplyInput/index.tsx
index 4636505f8c..dcf7758c41 100644
--- a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/ActionSupplyInput/index.tsx
+++ b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/ActionSupplyInput/index.tsx
@@ -83,7 +83,6 @@ function ActionSupplyInput(props: Props) {
             />
             <IconButton
                 name={index}
-                styleVariant="action"
                 ariaLabel={strings.actionRemoveLabel}
                 title={strings.actionRemoveLabel}
                 onClick={onRemove}
diff --git a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/CustomSuppliesInput/index.tsx b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/CustomSuppliesInput/index.tsx
index 9751704ad2..9367334710 100644
--- a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/CustomSuppliesInput/index.tsx
+++ b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/CustomSuppliesInput/index.tsx
@@ -71,7 +71,6 @@ function CustomSupplyInput(props: Props) {
             />
             <IconButton
                 name={index}
-                styleVariant="action"
                 title={strings.removeCustomSupplyLabel}
                 ariaLabel={strings.removeCustomSupplyLabel}
                 onClick={onRemove}
diff --git a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/DisaggregationInput/index.tsx b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/DisaggregationInput/index.tsx
index a60ed94f89..3f20fa15c7 100644
--- a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/DisaggregationInput/index.tsx
+++ b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/DisaggregationInput/index.tsx
@@ -1,6 +1,6 @@
 import {
+    NumberDisplay,
     NumberInput,
-    NumberOutput,
     Switch,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -227,7 +227,7 @@ function DisaggregationInput(props: Props) {
                     </div>
                     <NumberInput
                         className={styles.cell}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="male_0_1_count"
                         onChange={setFieldValue}
                         value={value?.male_0_1_count}
@@ -237,7 +237,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="male_2_5_count"
                         value={value?.male_2_5_count}
                         disabled={disabled}
@@ -246,7 +246,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="male_6_12_count"
                         value={value?.male_6_12_count}
                         disabled={disabled}
@@ -255,7 +255,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="male_13_17_count"
                         value={value?.male_13_17_count}
                         disabled={disabled}
@@ -264,7 +264,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="male_18_59_count"
                         value={value?.male_18_59_count}
                         disabled={disabled}
@@ -273,7 +273,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="male_60_plus_count"
                         value={value?.male_60_plus_count}
                         disabled={disabled}
@@ -282,13 +282,13 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="male_unknown_age_count"
                         value={value?.male_unknown_age_count}
                         disabled={disabled}
                         error={error?.male_unknown_age_count}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_male}
                     />
@@ -301,7 +301,7 @@ function DisaggregationInput(props: Props) {
                         className={styles.cell}
                         name="female_0_1_count"
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         value={value?.female_0_1_count}
                         disabled={disabled}
                         error={error?.female_0_1_count}
@@ -309,7 +309,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="female_2_5_count"
                         value={value?.female_2_5_count}
                         disabled={disabled}
@@ -318,7 +318,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="female_6_12_count"
                         value={value?.female_6_12_count}
                         disabled={disabled}
@@ -327,7 +327,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="female_13_17_count"
                         value={value?.female_13_17_count}
                         disabled={disabled}
@@ -336,7 +336,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="female_18_59_count"
                         value={value?.female_18_59_count}
                         disabled={disabled}
@@ -345,7 +345,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="female_60_plus_count"
                         value={value?.female_60_plus_count}
                         disabled={disabled}
@@ -354,13 +354,13 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="female_unknown_age_count"
                         value={value?.female_unknown_age_count}
                         disabled={disabled}
                         error={error?.female_unknown_age_count}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_female}
                     />
@@ -373,7 +373,7 @@ function DisaggregationInput(props: Props) {
                         className={styles.cell}
                         name="other_0_1_count"
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         value={value?.other_0_1_count}
                         disabled={disabled}
                         error={error?.other_0_1_count}
@@ -381,7 +381,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="other_2_5_count"
                         value={value?.other_2_5_count}
                         disabled={disabled}
@@ -390,7 +390,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="other_6_12_count"
                         value={value?.other_6_12_count}
                         disabled={disabled}
@@ -399,7 +399,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="other_13_17_count"
                         value={value?.other_13_17_count}
                         disabled={disabled}
@@ -408,7 +408,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="other_18_59_count"
                         value={value?.other_18_59_count}
                         disabled={disabled}
@@ -417,7 +417,7 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="other_60_plus_count"
                         value={value?.other_60_plus_count}
                         disabled={disabled}
@@ -426,13 +426,13 @@ function DisaggregationInput(props: Props) {
                     <NumberInput
                         className={styles.cell}
                         onChange={setFieldValue}
-                        variant="transparent"
+                        styleVariant="transparent"
                         name="other_unknown_age_count"
                         value={value?.other_unknown_age_count}
                         disabled={disabled}
                         error={error?.other_unknown_age_count}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_other}
                     />
@@ -441,35 +441,35 @@ function DisaggregationInput(props: Props) {
                     <div className={_cs(styles.cell, styles.header)}>
                         {strings.totalHeader}
                     </div>
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_0_1_count}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_2_5_count}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_6_12_count}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_13_17_count}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_18_59_count}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_60_plus_count}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total_unknown}
                     />
-                    <NumberOutput
+                    <NumberDisplay
                         className={_cs(styles.cell, styles.output)}
                         value={total}
                     />
@@ -522,7 +522,7 @@ function DisaggregationInput(props: Props) {
                             className={styles.cell}
                             name="disabled_male_0_1_count"
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             value={value?.disabled_male_0_1_count}
                             disabled={disabled}
                             error={error?.disabled_male_0_1_count}
@@ -530,7 +530,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_male_2_5_count"
                             value={value?.disabled_male_2_5_count}
                             disabled={disabled}
@@ -539,7 +539,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_male_6_12_count"
                             value={value?.disabled_male_6_12_count}
                             disabled={disabled}
@@ -548,7 +548,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_male_13_17_count"
                             value={value?.disabled_male_13_17_count}
                             disabled={disabled}
@@ -557,7 +557,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_male_18_59_count"
                             value={value?.disabled_male_18_59_count}
                             disabled={disabled}
@@ -566,7 +566,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_male_60_plus_count"
                             value={value?.disabled_male_60_plus_count}
                             disabled={disabled}
@@ -575,13 +575,13 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_male_unknown_age_count"
                             value={value?.disabled_male_unknown_age_count}
                             disabled={disabled}
                             error={error?.disabled_male_unknown_age_count}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_male}
                         />
@@ -594,7 +594,7 @@ function DisaggregationInput(props: Props) {
                             className={styles.cell}
                             name="disabled_female_0_1_count"
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             value={value?.disabled_female_0_1_count}
                             disabled={disabled}
                             error={error?.disabled_female_0_1_count}
@@ -602,7 +602,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_female_2_5_count"
                             value={value?.disabled_female_2_5_count}
                             disabled={disabled}
@@ -611,7 +611,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_female_6_12_count"
                             value={value?.disabled_female_6_12_count}
                             disabled={disabled}
@@ -620,7 +620,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_female_13_17_count"
                             value={value?.disabled_female_13_17_count}
                             disabled={disabled}
@@ -629,7 +629,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_female_18_59_count"
                             value={value?.disabled_female_18_59_count}
                             disabled={disabled}
@@ -638,7 +638,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_female_60_plus_count"
                             value={value?.disabled_female_60_plus_count}
                             disabled={disabled}
@@ -647,13 +647,13 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_female_unknown_age_count"
                             value={value?.disabled_female_unknown_age_count}
                             disabled={disabled}
                             error={error?.disabled_female_unknown_age_count}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_female}
                         />
@@ -666,7 +666,7 @@ function DisaggregationInput(props: Props) {
                             className={styles.cell}
                             name="disabled_other_0_1_count"
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             value={value?.disabled_other_0_1_count}
                             disabled={disabled}
                             error={error?.disabled_other_0_1_count}
@@ -674,7 +674,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_other_2_5_count"
                             value={value?.disabled_other_2_5_count}
                             disabled={disabled}
@@ -683,7 +683,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_other_6_12_count"
                             value={value?.disabled_other_6_12_count}
                             disabled={disabled}
@@ -692,7 +692,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_other_13_17_count"
                             value={value?.disabled_other_13_17_count}
                             disabled={disabled}
@@ -701,7 +701,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_other_18_59_count"
                             value={value?.disabled_other_18_59_count}
                             disabled={disabled}
@@ -710,7 +710,7 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_other_60_plus_count"
                             value={value?.disabled_other_60_plus_count}
                             disabled={disabled}
@@ -719,13 +719,13 @@ function DisaggregationInput(props: Props) {
                         <NumberInput
                             className={styles.cell}
                             onChange={setFieldValue}
-                            variant="transparent"
+                            styleVariant="transparent"
                             name="disabled_other_unknown_age_count"
                             value={value?.disabled_other_unknown_age_count}
                             disabled={disabled}
                             error={error?.disabled_other_unknown_age_count}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_other}
                         />
@@ -734,35 +734,35 @@ function DisaggregationInput(props: Props) {
                         <div className={_cs(styles.cell, styles.header)}>
                             {strings.totalHeader}
                         </div>
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_0_1_count}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_2_5_count}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_6_12_count}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_13_17_count}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_18_59_count}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_60_plus_count}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total_unknown}
                         />
-                        <NumberOutput
+                        <NumberDisplay
                             className={_cs(styles.cell, styles.output)}
                             value={disabled_total}
                         />
diff --git a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/PointInput/index.tsx b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/PointInput/index.tsx
index 56e10bc2e9..55a21b4525 100644
--- a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/PointInput/index.tsx
+++ b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/PointInput/index.tsx
@@ -84,7 +84,6 @@ function PointInput(props: Props) {
             <IconButton
                 className={styles.removeButton}
                 name={index}
-                styleVariant="action"
                 title={strings.removeLabel}
                 ariaLabel={strings.removeLabel}
                 onClick={onRemove}
diff --git a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/index.tsx b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/index.tsx
index c01ca2b35e..20cc7e4c1d 100644
--- a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/index.tsx
+++ b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/ActivityInput/index.tsx
@@ -236,7 +236,7 @@ function ActivityInput(props: Props) {
                 </Button>
             )}
             heading={type === 'custom' ? `${strings.customActivityHeading} #${itemNumber}` : actionDetails?.title}
-            withDarkBackground
+            backgroundColor="background"
             withPadding
         >
             <ListView layout="block">
@@ -460,7 +460,7 @@ function ActivityInput(props: Props) {
                                 headerActions={(
                                     <Button
                                         name={undefined}
-                                        styleVariant="translucent"
+                                        variant="subtle"
                                         disabled={disabled}
                                         before={(
                                             <AddLineIcon />
diff --git a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/index.tsx b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/index.tsx
index ba569b8168..ff6aa44927 100644
--- a/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/index.tsx
+++ b/app/src/views/ThreeWActivityForm/ActivitiesBySectorInput/index.tsx
@@ -171,7 +171,7 @@ function ActivitiesBySectorInput(props: Props) {
             heading={sectorDetails?.title}
             withHeaderBorder
             withPadding
-            withBackground
+            backgroundColor="foreground"
         >
             <ListView layout="block">
                 <ListView
@@ -194,7 +194,7 @@ function ActivitiesBySectorInput(props: Props) {
                         <Button
                             name={undefined}
                             onClick={handleCustomActivityAdd}
-                            styleVariant="translucent"
+                            variant="subtle"
                             disabled={disabled}
                             before={(
                                 <AddLineIcon />
diff --git a/app/src/views/ThreeWActivityForm/index.tsx b/app/src/views/ThreeWActivityForm/index.tsx
index fda793f648..64f2905c9a 100644
--- a/app/src/views/ThreeWActivityForm/index.tsx
+++ b/app/src/views/ThreeWActivityForm/index.tsx
@@ -13,15 +13,15 @@ import {
     Button,
     Checklist,
     Container,
+    DataDisplay,
     DateInput,
+    Dialog,
     InputSection,
     ListView,
     Message,
-    Modal,
     RadioInput,
     SegmentInput,
     TextInput,
-    TextOutput,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -865,7 +865,7 @@ export function Component() {
                 </ListView>
             )}
             {submitConfirmationShown && (
-                <Modal
+                <Dialog
                     heading={strings.monitoring3wHeading}
                     className={styles.confirmModal}
                     onClose={hideSubmitConfirmation}
@@ -895,7 +895,7 @@ export function Component() {
                     )}
                     headerDescription={(
                         <ListView
-                            withDarkBackground
+                            backgroundColor="background"
                             layout="block"
                             withSpacingOpticalCorrection
                             withPadding
@@ -912,7 +912,7 @@ export function Component() {
                         withSpacingOpticalCorrection
                         spacing="sm"
                     >
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             labelClassName={styles.metaLabel}
                             valueClassName={styles.metaValue}
@@ -920,7 +920,7 @@ export function Component() {
                             value={selectedCountryDetail?.name}
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             labelClassName={styles.metaLabel}
                             valueClassName={styles.metaValue}
@@ -929,7 +929,7 @@ export function Component() {
                             valueType="date"
                             strongValue
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             labelClassName={styles.metaLabel}
                             valueClassName={styles.metaValue}
@@ -941,7 +941,7 @@ export function Component() {
                                 selectedNationalSocietyDetail?.society_name
                             )}
                         />
-                        <TextOutput
+                        <DataDisplay
                             className={styles.metaItem}
                             labelClassName={styles.metaLabel}
                             valueClassName={styles.sectorsList}
@@ -958,7 +958,7 @@ export function Component() {
                                             && isDefined(activity.action)
                                         ),
                                     ).map((activity) => (
-                                        <TextOutput
+                                        <DataDisplay
                                             icon={(<LegendIcon />)}
                                             key={activity.client_id}
                                             value={(
@@ -974,7 +974,7 @@ export function Component() {
                             ))}
                         />
                     </ListView>
-                </Modal>
+                </Dialog>
             )}
         </Page>
     );
diff --git a/packages/go-ui-storybook/src/stories/Alert.stories.tsx b/packages/go-ui-storybook/src/stories/Alert.stories.tsx
index c5de4a7fa3..ea5f823000 100644
--- a/packages/go-ui-storybook/src/stories/Alert.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Alert.stories.tsx
@@ -31,7 +31,7 @@ export const Info: Story = {
     args: {
         name: 'info',
         title: 'Information',
-        type: 'info',
+        variant: 'info',
         description: 'This alert provides informative details to the user.',
     },
     parameters: {
@@ -47,7 +47,7 @@ export const Success: Story = {
     args: {
         name: 'success',
         title: 'Success',
-        type: 'success',
+        variant: 'success',
         description: 'This alert indicates a successful operation or task.',
     },
     parameters: {
@@ -63,7 +63,7 @@ export const Warning : Story = {
     args: {
         name: 'warning',
         title: 'Warning',
-        type: 'warning',
+        variant: 'warning',
         description: 'This alert warns the user about potential issues or risks.',
     },
 };
@@ -72,7 +72,7 @@ export const Danger : Story = {
     args: {
         name: 'danger',
         title: 'Danger',
-        type: 'danger',
+        variant: 'danger',
         description: 'This alert indicates a dangerous or potentially harmful situation.',
     },
     parameters: {
@@ -88,7 +88,7 @@ export const NonDismissable: Story = {
     args: {
         name: 'danger',
         title: 'Danger',
-        type: 'danger',
+        variant: 'danger',
         description: 'This alert indicates a dangerous or potentially harmful situation.',
         nonDismissable: true,
     },
diff --git a/packages/go-ui-storybook/src/stories/BooleanOutput.stories.tsx b/packages/go-ui-storybook/src/stories/BooleanDisplay.stories.tsx
similarity index 75%
rename from packages/go-ui-storybook/src/stories/BooleanOutput.stories.tsx
rename to packages/go-ui-storybook/src/stories/BooleanDisplay.stories.tsx
index 14d2a7a1cd..0afa8a022e 100644
--- a/packages/go-ui-storybook/src/stories/BooleanOutput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/BooleanDisplay.stories.tsx
@@ -1,16 +1,16 @@
-import { BooleanOutputProps } from '@ifrc-go/ui';
+import { BooleanDisplayProps } from '@ifrc-go/ui';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 
-import BooleanOutput from './BooleanOutput';
+import BooleanDisplay from './BooleanDisplay';
 
-type Story = StoryObj<BooleanOutputProps>;
+type Story = StoryObj<BooleanDisplayProps>;
 
-const meta: Meta<typeof BooleanOutput> = {
-    title: 'Outputs/BooleanOutput',
-    component: BooleanOutput,
+const meta: Meta<typeof BooleanDisplay> = {
+    title: 'Outputs/BooleanDisplay',
+    component: BooleanDisplay,
     parameters: {
         layout: 'centered',
         design: {
diff --git a/packages/go-ui-storybook/src/stories/BooleanDisplay.tsx b/packages/go-ui-storybook/src/stories/BooleanDisplay.tsx
new file mode 100644
index 0000000000..188f420d8d
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/BooleanDisplay.tsx
@@ -0,0 +1,12 @@
+import {
+    BooleanDisplay as PureBooleanDisplay,
+    BooleanDisplayProps,
+} from '@ifrc-go/ui';
+
+function BooleanDisplay(props: BooleanDisplayProps) {
+    return (
+        <PureBooleanDisplay {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default BooleanDisplay;
diff --git a/packages/go-ui-storybook/src/stories/BooleanOutput.tsx b/packages/go-ui-storybook/src/stories/BooleanOutput.tsx
deleted file mode 100644
index d8142c0c14..0000000000
--- a/packages/go-ui-storybook/src/stories/BooleanOutput.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-    BooleanOutput as PureBooleanOutput,
-    BooleanOutputProps,
-} from '@ifrc-go/ui';
-
-function BooleanOutput(props: BooleanOutputProps) {
-    return (
-        <PureBooleanOutput {...props} />// eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default BooleanOutput;
diff --git a/packages/go-ui-storybook/src/stories/Button.stories.tsx b/packages/go-ui-storybook/src/stories/Button.stories.tsx
index 2275128c12..84851917eb 100644
--- a/packages/go-ui-storybook/src/stories/Button.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Button.stories.tsx
@@ -26,7 +26,12 @@ const meta = {
         onClick: fn(),
     },
     tags: ['autodocs'],
-    argTypes: {},
+    argTypes: {
+        variant: {
+            options: ['primary', 'secondary', 'tertiary', 'subtle'],
+            control: { type: 'select' },
+        },
+    },
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -35,302 +40,79 @@ type Story = StoryObj<typeof meta>;
 function AllVariant() {
     return (
         <ListView layout="block">
-            <Container heading="Primary">
-                <ListView>
-                    <Button
-                        name="filled"
-                        styleVariant="filled"
-                        colorVariant="primary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Filled
-                    </Button>
-                    <Button
-                        name="outline"
-                        styleVariant="outline"
-                        colorVariant="primary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Outline
-                    </Button>
-                    <Button
-                        name="action"
-                        styleVariant="action"
-                        colorVariant="primary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Action
-                    </Button>
-                    <Button
-                        name="translucent"
-                        styleVariant="translucent"
-                        colorVariant="primary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Translucent
-                    </Button>
-                    <Button
-                        name="transparent"
-                        styleVariant="transparent"
-                        colorVariant="primary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Transparent
-                    </Button>
-                </ListView>
-            </Container>
-            <Container heading="Secondary">
+            <Container heading="Variants">
                 <ListView>
                     <Button
-                        name="filled"
-                        styleVariant="filled"
-                        colorVariant="secondary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Filled
-                    </Button>
-                    <Button
-                        name="outline"
-                        styleVariant="outline"
-                        colorVariant="secondary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Outline
-                    </Button>
-                    <Button
-                        name="action"
-                        styleVariant="action"
-                        colorVariant="secondary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Action
-                    </Button>
-                    <Button
-                        name="translucent"
-                        styleVariant="translucent"
-                        colorVariant="secondary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Translucent
-                    </Button>
-                    <Button
-                        name="transparent"
-                        styleVariant="transparent"
-                        colorVariant="secondary"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Transparent
-                    </Button>
-                </ListView>
-            </Container>
-            <Container heading="Success">
-                <ListView>
-                    <Button
-                        name="filled"
-                        styleVariant="filled"
-                        colorVariant="success"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Filled
-                    </Button>
-                    <Button
-                        name="outline"
-                        styleVariant="outline"
-                        colorVariant="success"
+                        name="primary"
+                        variant="primary"
                         textSize="md"
                         onClick={fn()}
                     >
-                        Outline
+                        Primary
                     </Button>
                     <Button
-                        name="action"
-                        styleVariant="action"
-                        colorVariant="success"
+                        name="secondary"
+                        variant="secondary"
                         textSize="md"
                         onClick={fn()}
                     >
-                        Action
+                        Secondary
                     </Button>
                     <Button
-                        name="translucent"
-                        styleVariant="translucent"
-                        colorVariant="success"
+                        name="tertiary"
+                        variant="tertiary"
                         textSize="md"
                         onClick={fn()}
                     >
-                        Translucent
+                        Tertiary
                     </Button>
                     <Button
-                        name="transparent"
-                        styleVariant="transparent"
-                        colorVariant="success"
+                        name="subtle"
+                        variant="subtle"
                         textSize="md"
                         onClick={fn()}
                     >
-                        Transparent
-                    </Button>
-                </ListView>
-            </Container>
-            <Container heading="Danger">
-                <ListView>
-                    <Button
-                        name="filled"
-                        styleVariant="filled"
-                        colorVariant="danger"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Filled
-                    </Button>
-                    <Button
-                        name="outline"
-                        styleVariant="outline"
-                        colorVariant="danger"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Outline
-                    </Button>
-                    <Button
-                        name="action"
-                        styleVariant="action"
-                        colorVariant="danger"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Action
-                    </Button>
-                    <Button
-                        name="translucent"
-                        styleVariant="translucent"
-                        colorVariant="danger"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Translucent
-                    </Button>
-                    <Button
-                        name="transparent"
-                        styleVariant="transparent"
-                        colorVariant="danger"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Transparent
-                    </Button>
-                </ListView>
-            </Container>
-            <Container heading="Text">
-                <ListView>
-                    <Button
-                        name="filled"
-                        styleVariant="filled"
-                        colorVariant="text"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Filled
-                    </Button>
-                    <Button
-                        name="outline"
-                        styleVariant="outline"
-                        colorVariant="text"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Outline
-                    </Button>
-                    <Button
-                        name="action"
-                        styleVariant="action"
-                        colorVariant="text"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Action
-                    </Button>
-                    <Button
-                        name="translucent"
-                        styleVariant="translucent"
-                        colorVariant="text"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Translucent
-                    </Button>
-                    <Button
-                        name="transparent"
-                        styleVariant="transparent"
-                        colorVariant="text"
-                        textSize="md"
-                        onClick={fn()}
-                    >
-                        Transparent
+                        Subtle
                     </Button>
                 </ListView>
             </Container>
             <Container heading="Disabled">
                 <ListView>
                     <Button
-                        name="filled"
-                        styleVariant="filled"
-                        colorVariant="primary"
+                        name="primary"
+                        variant="primary"
                         textSize="md"
                         onClick={fn()}
                         disabled
                     >
-                        Filled
+                        Primary
                     </Button>
                     <Button
-                        name="outline"
-                        styleVariant="outline"
-                        colorVariant="primary"
+                        name="secondary"
+                        variant="secondary"
                         textSize="md"
                         onClick={fn()}
                         disabled
                     >
-                        Outline
+                        Secondary
                     </Button>
                     <Button
-                        name="action"
-                        styleVariant="action"
-                        colorVariant="primary"
+                        name="tertiary"
+                        variant="tertiary"
                         textSize="md"
                         onClick={fn()}
                         disabled
                     >
-                        Action
+                        Tertiary
                     </Button>
                     <Button
-                        name="translucent"
-                        styleVariant="translucent"
-                        colorVariant="primary"
+                        name="subtle"
+                        variant="subtle"
                         textSize="md"
                         onClick={fn()}
                         disabled
                     >
-                        Translucent
-                    </Button>
-                    <Button
-                        name="transparent"
-                        styleVariant="transparent"
-                        colorVariant="primary"
-                        textSize="md"
-                        disabled
-                        onClick={fn()}
-                    >
-                        Transparent
+                        Subtle
                     </Button>
                 </ListView>
             </Container>
@@ -345,8 +127,7 @@ function AllSpacing() {
                 <ListView>
                     <Button
                         name="small"
-                        styleVariant="filled"
-                        colorVariant="primary"
+                        variant="primary"
                         textSize="md"
                         onClick={fn()}
                         spacing="xs"
@@ -355,8 +136,7 @@ function AllSpacing() {
                     </Button>
                     <Button
                         name="small"
-                        styleVariant="filled"
-                        colorVariant="primary"
+                        variant="primary"
                         textSize="md"
                         onClick={fn()}
                         spacing="sm"
@@ -365,8 +145,7 @@ function AllSpacing() {
                     </Button>
                     <Button
                         name="medium"
-                        styleVariant="filled"
-                        colorVariant="primary"
+                        variant="primary"
                         textSize="md"
                         onClick={fn()}
                         spacing="md"
@@ -375,8 +154,7 @@ function AllSpacing() {
                     </Button>
                     <Button
                         name="large"
-                        styleVariant="filled"
-                        colorVariant="primary"
+                        variant="primary"
                         textSize="md"
                         onClick={fn()}
                         spacing="lg"
@@ -385,8 +163,7 @@ function AllSpacing() {
                     </Button>
                     <Button
                         name="small"
-                        styleVariant="filled"
-                        colorVariant="primary"
+                        variant="primary"
                         textSize="md"
                         onClick={fn()}
                         spacing="xl"
@@ -399,8 +176,7 @@ function AllSpacing() {
                 <ListView>
                     <Button
                         name="small"
-                        styleVariant="filled"
-                        colorVariant="secondary"
+                        variant="secondary"
                         textSize="sm"
                         onClick={fn()}
                         spacing="sm"
@@ -409,8 +185,7 @@ function AllSpacing() {
                     </Button>
                     <Button
                         name="medium"
-                        styleVariant="filled"
-                        colorVariant="secondary"
+                        variant="secondary"
                         textSize="md"
                         onClick={fn()}
                         spacing="md"
@@ -419,8 +194,7 @@ function AllSpacing() {
                     </Button>
                     <Button
                         name="large"
-                        styleVariant="filled"
-                        colorVariant="secondary"
+                        variant="secondary"
                         textSize="lg"
                         onClick={fn()}
                         spacing="lg"
diff --git a/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts b/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts
index e67f0c325d..e897b4ab23 100644
--- a/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts
+++ b/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts
@@ -56,6 +56,38 @@ export const Danger: Story = {
     },
 };
 
+export const Translucent: Story = {
+    args: {
+        colorVariant: 'primary',
+        styleVariant: 'translucent',
+        children: 'Translucent Button',
+    },
+};
+
+export const Transparent: Story = {
+    args: {
+        colorVariant: 'primary',
+        styleVariant: 'transparent',
+        children: 'Transparent Button',
+    },
+};
+
+export const SecondaryFilled: Story = {
+    args: {
+        colorVariant: 'secondary',
+        styleVariant: 'filled',
+        children: 'Secondary Filled',
+    },
+};
+
+export const TextAction: Story = {
+    args: {
+        colorVariant: 'text',
+        styleVariant: 'action',
+        children: 'Text Action',
+    },
+};
+
 export const Disabled: Story = {
     args: {
         disabled: true,
diff --git a/packages/go-ui-storybook/src/stories/Chip.tsx b/packages/go-ui-storybook/src/stories/Chip.tsx
deleted file mode 100644
index b25315e078..0000000000
--- a/packages/go-ui-storybook/src/stories/Chip.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-    Chip as PureChip,
-    ChipProps as PureChipProps,
-} from '@ifrc-go/ui';
-
-type ChipProps<N> = PureChipProps<N>
-
-function Chip<const N>(props: ChipProps<N>) {
-    return (
-        <PureChip {...props} />// eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default Chip;
diff --git a/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx b/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx
index 4923c746e4..b37c0e9e40 100644
--- a/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx
@@ -57,21 +57,28 @@ function Template(args:Args) {
 export const Primary: Story = {
     render: Template,
     args: {
-        styleVariant: 'filled',
+        variant: 'primary',
     },
 };
 
 export const Secondary: Story = {
     render: Template,
     args: {
-        styleVariant: 'outline',
+        variant: 'secondary',
     },
 };
 
-export const Translucent: Story = {
+export const Tertiary: Story = {
     render: Template,
     args: {
-        styleVariant: 'translucent',
+        variant: 'tertiary',
+    },
+};
+
+export const Subtle: Story = {
+    render: Template,
+    args: {
+        variant: 'subtle',
     },
 };
 
diff --git a/packages/go-ui-storybook/src/stories/Container.stories.tsx b/packages/go-ui-storybook/src/stories/Container.stories.tsx
index 81844874be..5ea0cb014a 100644
--- a/packages/go-ui-storybook/src/stories/Container.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Container.stories.tsx
@@ -111,7 +111,7 @@ export const WithBackground: Story = {
         heading: 'Container with Background',
         headerDescription: 'This container has a background',
         children: 'Content goes here',
-        withBackground: true,
+        backgroundColor: 'foreground',
         withPadding: true,
     },
 };
@@ -120,7 +120,7 @@ export const WithShadow: Story = {
     args: {
         heading: 'Container with Shadow',
         children: 'Content with shadow',
-        withShadow: true,
+        boxShadow: 'md',
         withPadding: true,
     },
 };
@@ -130,7 +130,7 @@ export const WithPadding: Story = {
         heading: 'Container with Padding',
         children: 'Content with internal padding',
         withPadding: true,
-        withBackground: true,
+        backgroundColor: 'foreground',
     },
 };
 
diff --git a/packages/go-ui-storybook/src/stories/DateRangeOutput.stories.tsx b/packages/go-ui-storybook/src/stories/DateRangeDisplay.stories.tsx
similarity index 65%
rename from packages/go-ui-storybook/src/stories/DateRangeOutput.stories.tsx
rename to packages/go-ui-storybook/src/stories/DateRangeDisplay.stories.tsx
index ad2f0e5b8c..0ed113e95d 100644
--- a/packages/go-ui-storybook/src/stories/DateRangeOutput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/DateRangeDisplay.stories.tsx
@@ -1,16 +1,16 @@
-import { DateRangeOutputProps } from '@ifrc-go/ui';
+import { DateRangeDisplayProps } from '@ifrc-go/ui';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 
-import DateRangeOutput from './DateRangeOutput';
+import DateRangeDisplay from './DateRangeDisplay';
 
-type Story = StoryObj<DateRangeOutputProps>;
+type Story = StoryObj<DateRangeDisplayProps>;
 
-const meta: Meta<typeof DateRangeOutput> = {
-    title: 'Outputs/DateRangeOutput',
-    component: DateRangeOutput,
+const meta: Meta<typeof DateRangeDisplay> = {
+    title: 'Outputs/DateRangeDisplay',
+    component: DateRangeDisplay,
     parameters: {
         layout: 'centered',
         design: {
diff --git a/packages/go-ui-storybook/src/stories/DateRangeDisplay.tsx b/packages/go-ui-storybook/src/stories/DateRangeDisplay.tsx
new file mode 100644
index 0000000000..976004c8dc
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/DateRangeDisplay.tsx
@@ -0,0 +1,13 @@
+import {
+    DateRangeDisplay as PureDateRangeDisplay,
+    DateRangeDisplayProps,
+} from '@ifrc-go/ui';
+
+function DateRangeDisplay(props: DateRangeDisplayProps) {
+    return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+        <PureDateRangeDisplay {...props} />
+    );
+}
+
+export default DateRangeDisplay;
diff --git a/packages/go-ui-storybook/src/stories/DateRangeOutput.tsx b/packages/go-ui-storybook/src/stories/DateRangeOutput.tsx
deleted file mode 100644
index 1e439b8e33..0000000000
--- a/packages/go-ui-storybook/src/stories/DateRangeOutput.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {
-    DateRangeOutput as PureDateRangeOutput,
-    DateRangeOutputProps,
-} from '@ifrc-go/ui';
-
-function DateRangeOutput(props: DateRangeOutputProps) {
-    return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-        <PureDateRangeOutput {...props} />
-    );
-}
-
-export default DateRangeOutput;
diff --git a/packages/go-ui-storybook/src/stories/Modal.stories.tsx b/packages/go-ui-storybook/src/stories/Dialog.stories.tsx
similarity index 84%
rename from packages/go-ui-storybook/src/stories/Modal.stories.tsx
rename to packages/go-ui-storybook/src/stories/Dialog.stories.tsx
index 2d0ae579dc..68a83008d8 100644
--- a/packages/go-ui-storybook/src/stories/Modal.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Dialog.stories.tsx
@@ -4,7 +4,7 @@ import {
 } from 'react';
 import {
     Button,
-    ModalProps,
+    DialogProps,
 } from '@ifrc-go/ui';
 import { useArgs } from '@storybook/preview-api';
 import type {
@@ -13,15 +13,15 @@ import type {
 } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import Modal from './Modal';
+import Dialog from './Dialog';
 
-type ModalSpecificProps = ModalProps;
+type DialogSpecificProps = DialogProps;
 
-type Story = StoryObj<typeof Modal>;
+type Story = StoryObj<typeof Dialog>;
 
-const meta: Meta<ModalSpecificProps> = {
-    title: 'Components/Modal',
-    component: Modal,
+const meta: Meta<DialogSpecificProps> = {
+    title: 'Components/Dialog',
+    component: Dialog,
     parameters: {
         layout: 'centered',
         design: {
@@ -37,7 +37,7 @@ const meta: Meta<ModalSpecificProps> = {
 
 export default meta;
 
-function Template(args: ModalSpecificProps) {
+function Template(args: DialogSpecificProps) {
     const [isOpen, setIsOpen] = useState(false);
     const [
         {
@@ -58,13 +58,12 @@ function Template(args: ModalSpecificProps) {
         <>
             <Button
                 name={undefined}
-                styleVariant="outline"
                 onClick={handleClick}
             >
-                Open Modal
+                Open Dialog
             </Button>
             {isOpen && (
-                <Modal
+                <Dialog
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...args}
                     onClose={handleClose}
@@ -95,14 +94,13 @@ export const Default: Story = {
             <>
                 <Button
                     name={undefined}
-                    styleVariant="outline"
                     onClick={undefined}
                 >
                     Cancel
                 </Button>
                 <Button
                     name={undefined}
-                    styleVariant="filled"
+                    variant="primary"
                     onClick={undefined}
                 >
                     Submit
diff --git a/packages/go-ui-storybook/src/stories/Dialog.tsx b/packages/go-ui-storybook/src/stories/Dialog.tsx
new file mode 100644
index 0000000000..925826577c
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/Dialog.tsx
@@ -0,0 +1,14 @@
+import {
+    Dialog as PureDialog,
+    DialogProps as PureDialogProps,
+} from '@ifrc-go/ui';
+
+type DialogProps = PureDialogProps
+
+function Dialog(props: DialogProps) {
+    return (
+        <PureDialog {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default Dialog;
diff --git a/packages/go-ui-storybook/src/stories/DropdownMenu.tsx b/packages/go-ui-storybook/src/stories/DropdownMenu.tsx
deleted file mode 100644
index e146e0b705..0000000000
--- a/packages/go-ui-storybook/src/stories/DropdownMenu.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-    DropdownMenu as PureDropdownMenu,
-    DropdownMenuProps,
-} from '@ifrc-go/ui';
-
-function DropdownMenu(props: DropdownMenuProps) {
-    return (
-        <PureDropdownMenu {...props} />// eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default DropdownMenu;
diff --git a/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx b/packages/go-ui-storybook/src/stories/FileInputButton.stories.tsx
similarity index 69%
rename from packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx
rename to packages/go-ui-storybook/src/stories/FileInputButton.stories.tsx
index e9bf857152..7cf9732887 100644
--- a/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/FileInputButton.stories.tsx
@@ -1,19 +1,19 @@
-import { RawFileInputProps } from '@ifrc-go/ui';
+import { FileInputButtonProps } from '@ifrc-go/ui';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import RawFileInput from './RawFileInput';
+import FileInputButton from './FileInputButton';
 
-type RawFileInputSpecificProps = RawFileInputProps<string>;
+type FileInputButtonSpecificProps = FileInputButtonProps<string>;
 
-type Story = StoryObj<RawFileInputSpecificProps>;
+type Story = StoryObj<FileInputButtonSpecificProps>;
 
-const meta: Meta<typeof RawFileInput> = {
-    title: 'Inputs/RawFileInput',
-    component: RawFileInput,
+const meta: Meta<typeof FileInputButton> = {
+    title: 'Inputs/FileInputButton',
+    component: FileInputButton,
     parameters: {
         layout: 'centered',
         design: {
@@ -28,7 +28,7 @@ export default meta;
 
 export const Default: Story = {
     args: {
-        name: 'RawFileInput',
+        name: 'FileInputButton',
         children: 'Upload File',
         onChange: fn(),
     },
@@ -36,7 +36,7 @@ export const Default: Story = {
 
 export const Multiple: Story = {
     args: {
-        name: 'RawFileInput',
+        name: 'FileInputButton',
         children: 'Upload Files',
         multiple: true,
         styleVariant: 'outline',
@@ -47,7 +47,7 @@ export const Multiple: Story = {
 
 export const WithAccept: Story = {
     args: {
-        name: 'RawFileInput',
+        name: 'FileInputButton',
         accept: 'image/png,image/jpeg',
         children: 'Upload Image',
         onChange: fn(),
@@ -56,7 +56,7 @@ export const WithAccept: Story = {
 
 export const Disabled: Story = {
     args: {
-        name: 'RawFileInput',
+        name: 'FileInputButton',
         children: 'Export',
         onChange: fn(),
         disabled: true,
@@ -65,7 +65,7 @@ export const Disabled: Story = {
 
 export const ReadOnly: Story = {
     args: {
-        name: 'RawFileInput',
+        name: 'FileInputButton',
         children: 'Export',
         readOnly: true,
         onChange: fn(),
diff --git a/packages/go-ui-storybook/src/stories/FileInputButton.tsx b/packages/go-ui-storybook/src/stories/FileInputButton.tsx
new file mode 100644
index 0000000000..bf7dc0e94d
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/FileInputButton.tsx
@@ -0,0 +1,14 @@
+import {
+    FileInputButton as PureFileInputButton,
+    FileInputButtonProps,
+} from '@ifrc-go/ui';
+
+function FileInputButton< const N>(props: FileInputButtonProps<N>) {
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <PureFileInputButton {...props} />
+
+    );
+}
+
+export default FileInputButton;
diff --git a/packages/go-ui-storybook/src/stories/HtmlOutput.stories.tsx b/packages/go-ui-storybook/src/stories/HtmlDisplay.stories.tsx
similarity index 84%
rename from packages/go-ui-storybook/src/stories/HtmlOutput.stories.tsx
rename to packages/go-ui-storybook/src/stories/HtmlDisplay.stories.tsx
index 738301d0f2..f45af0e4c6 100644
--- a/packages/go-ui-storybook/src/stories/HtmlOutput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/HtmlDisplay.stories.tsx
@@ -3,13 +3,13 @@ import type {
     StoryObj,
 } from '@storybook/react';
 
-import HtmlOutput from './HtmlOutput';
+import HtmlDisplay from './HtmlDisplay';
 
-type Story = StoryObj<typeof HtmlOutput>;
+type Story = StoryObj<typeof HtmlDisplay>;
 
-const meta: Meta<typeof HtmlOutput> = {
-    title: 'Outputs/HtmlOutput',
-    component: HtmlOutput,
+const meta: Meta<typeof HtmlDisplay> = {
+    title: 'Outputs/HtmlDisplay',
+    component: HtmlDisplay,
     parameters: {
         layout: 'centered',
         design: {
diff --git a/packages/go-ui-storybook/src/stories/HtmlDisplay.tsx b/packages/go-ui-storybook/src/stories/HtmlDisplay.tsx
new file mode 100644
index 0000000000..1d4f748bd0
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/HtmlDisplay.tsx
@@ -0,0 +1,12 @@
+import {
+    HtmlDisplay as PureHtmlDisplay,
+    HtmlDisplayProps,
+} from '@ifrc-go/ui';
+
+function HtmlDisplay(props:HtmlDisplayProps) {
+    return (
+        <PureHtmlDisplay {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default HtmlDisplay;
diff --git a/packages/go-ui-storybook/src/stories/HtmlOutput.tsx b/packages/go-ui-storybook/src/stories/HtmlOutput.tsx
deleted file mode 100644
index 4308be6f79..0000000000
--- a/packages/go-ui-storybook/src/stories/HtmlOutput.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-    HtmlOutput as PureHtmlOutput,
-    HtmlOutputProps,
-} from '@ifrc-go/ui';
-
-function HtmlOutput(props:HtmlOutputProps) {
-    return (
-        <PureHtmlOutput {...props} /> // eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default HtmlOutput;
diff --git a/packages/go-ui-storybook/src/stories/IconButton.stories.tsx b/packages/go-ui-storybook/src/stories/IconButton.stories.tsx
index 589c530134..c4590e8bee 100644
--- a/packages/go-ui-storybook/src/stories/IconButton.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/IconButton.stories.tsx
@@ -32,14 +32,37 @@ export default meta;
 export const Default: Story = {
     args: {
         title: 'Add Item',
+        ariaLabel: 'Add Item',
         children: <AddFillIcon />,
+    },
+};
+export const Primary: Story = {
+    args: {
+        ...Default.args,
         variant: 'primary',
     },
 };
+export const Secondary: Story = {
+    args: {
+        ...Default.args,
+        variant: 'secondary',
+    },
+};
+export const Tertiary: Story = {
+    args: {
+        ...Default.args,
+        variant: 'tertiary',
+    },
+};
+export const Subtle: Story = {
+    args: {
+        ...Default.args,
+        variant: 'subtle',
+    },
+};
 export const Disabled: Story = {
     args: {
-        title: 'Download',
-        children: <AddFillIcon />,
+        ...Default.args,
         variant: 'secondary',
         disabled: true,
     },
diff --git a/packages/go-ui-storybook/src/stories/InfoPopup.tsx b/packages/go-ui-storybook/src/stories/InfoPopup.tsx
deleted file mode 100644
index 26adde83e4..0000000000
--- a/packages/go-ui-storybook/src/stories/InfoPopup.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-    InfoPopup as PureInfoPopup,
-    InfoPopupProps,
-} from '@ifrc-go/ui';
-
-function InfoPopup(props: InfoPopupProps) {
-    return (
-        <PureInfoPopup {...props} />// eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default InfoPopup;
diff --git a/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx b/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx
index 54348270f6..13bd62c9a0 100644
--- a/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx
@@ -43,10 +43,10 @@ export const Default: Story = {
         hint: '',
         readOnly: false,
         required: false,
-        variant: 'form',
+        styleVariant: 'form',
         withAsterisk: false,
         className: '',
-        containerRef: undefined,
+        elementRef: undefined,
         inputSectionRef: undefined,
     },
 };
@@ -93,10 +93,10 @@ export const ErrorOnTooltip: Story = {
     },
 };
 
-export const Variant: Story = {
+export const StyleVariant: Story = {
     args: {
         ...Default.args,
-        variant: 'form',
+        styleVariant: 'form',
     },
 };
 
@@ -118,6 +118,6 @@ export const WithPadding: Story = {
     args: {
         ...Default.args,
         withPadding: true,
-        withBackground: true,
+        backgroundColor: 'foreground',
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/InputSection.stories.tsx b/packages/go-ui-storybook/src/stories/InputSection.stories.tsx
index 04054472d4..ac1df82752 100644
--- a/packages/go-ui-storybook/src/stories/InputSection.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/InputSection.stories.tsx
@@ -114,7 +114,7 @@ export const WithShadow: Story = {
     args: {
         title: 'Shadowed Section',
         description: 'Container shadow enabled.',
-        withShadow: true,
+        boxShadow: 'md',
         children: Items(1),
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/KeyFigure.stories.tsx b/packages/go-ui-storybook/src/stories/KeyFigure.stories.tsx
new file mode 100644
index 0000000000..34365a2d6d
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/KeyFigure.stories.tsx
@@ -0,0 +1,34 @@
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import KeyFigure from './KeyFigure';
+
+type Story = StoryObj<typeof KeyFigure>;
+
+const meta = {
+    title: 'Components/KeyFigure',
+    component: KeyFigure,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof KeyFigure>;
+
+export default meta;
+
+export const Default = {
+    args: {
+        value: 500,
+        label: 'Targeted population',
+    },
+} satisfies Story;
+
+export const WithSupplement = {
+    args: {
+        value: 3.5,
+        supplement: '/ 4',
+        label: 'Average PER score',
+    },
+} satisfies Story;
diff --git a/packages/go-ui-storybook/src/stories/KeyFigure.tsx b/packages/go-ui-storybook/src/stories/KeyFigure.tsx
new file mode 100644
index 0000000000..544a06f8f3
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/KeyFigure.tsx
@@ -0,0 +1,12 @@
+import {
+    KeyFigure as PureKeyFigure,
+    KeyFigureProps,
+} from '@ifrc-go/ui';
+
+function KeyFigure(props: KeyFigureProps) {
+    return (
+        <PureKeyFigure {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default KeyFigure;
diff --git a/packages/go-ui-storybook/src/stories/KeyFigureView.stories.tsx b/packages/go-ui-storybook/src/stories/KeyFigureCard.stories.tsx
similarity index 80%
rename from packages/go-ui-storybook/src/stories/KeyFigureView.stories.tsx
rename to packages/go-ui-storybook/src/stories/KeyFigureCard.stories.tsx
index b30464780f..69a6fa5563 100644
--- a/packages/go-ui-storybook/src/stories/KeyFigureView.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/KeyFigureCard.stories.tsx
@@ -4,13 +4,13 @@ import type {
     StoryObj,
 } from '@storybook/react';
 
-import KeyFigureView from './KeyFigureView';
+import KeyFigureCard from './KeyFigureCard';
 
-type Story = StoryObj<typeof KeyFigureView>
+type Story = StoryObj<typeof KeyFigureCard>
 
 const meta = {
-    title: 'Views/KeyFigureView',
-    component: KeyFigureView,
+    title: 'Components/KeyFigureCard',
+    component: KeyFigureCard,
     parameters: {
         layout: 'centered',
         design: {
@@ -20,7 +20,7 @@ const meta = {
         },
     },
     tags: ['autodocs'],
-} satisfies Meta<typeof KeyFigureView>;
+} satisfies Meta<typeof KeyFigureCard>;
 
 export default meta;
 
@@ -47,6 +47,5 @@ export const WithIconAndInfo = {
         progressDescription: '22% received',
         icon: <HealthadviceIcon />,
         info: 'Africa - Hunger Crisis',
-        children: 'Last updated: 2023-10-06',
     },
 } satisfies Story;
diff --git a/packages/go-ui-storybook/src/stories/KeyFigureCard.tsx b/packages/go-ui-storybook/src/stories/KeyFigureCard.tsx
new file mode 100644
index 0000000000..b76b8c1424
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/KeyFigureCard.tsx
@@ -0,0 +1,12 @@
+import {
+    KeyFigureCard as PureKeyFigureCard,
+    KeyFigureCardProps,
+} from '@ifrc-go/ui';
+
+function KeyFigureCard(props: KeyFigureCardProps) {
+    return (
+        <PureKeyFigureCard {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default KeyFigureCard;
diff --git a/packages/go-ui-storybook/src/stories/KeyFigureView.tsx b/packages/go-ui-storybook/src/stories/KeyFigureView.tsx
deleted file mode 100644
index 37451cb300..0000000000
--- a/packages/go-ui-storybook/src/stories/KeyFigureView.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-    KeyFigureView as PureKeyFigureView,
-    KeyFigureViewProps,
-} from '@ifrc-go/ui';
-
-function KeyFigureView(props: KeyFigureViewProps) {
-    return (
-        <PureKeyFigureView {...props} /> // eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default KeyFigureView;
diff --git a/packages/go-ui-storybook/src/stories/List.stories.tsx b/packages/go-ui-storybook/src/stories/List.stories.tsx
deleted file mode 100644
index 03582e705e..0000000000
--- a/packages/go-ui-storybook/src/stories/List.stories.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { ListProps } from '@ifrc-go/ui';
-import type {
-    Meta,
-    StoryObj,
-} from '@storybook/react';
-
-import List from './List';
-
-interface Option {
-    key: string;
-    label: string;
-}
-
-const options: Option[] = [
-    { key: '1', label: 'Apple' },
-    { key: '2', label: 'Banana' },
-    { key: '3', label: 'Cherry' },
-    { key: '4', label: 'Date' },
-    { key: '5', label: 'Elderberry' },
-];
-
-interface RendererProps {
-    label: string;
-}
-type Story = StoryObj<ListProps<Option, string, RendererProps>>;
-
-const meta: Meta<typeof List> = {
-    title: 'Components/List',
-    component: List,
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/myeW85ibN5p2SlnXcEpxFD/IFRC-GO---UI-Current---1?type=design&node-id=0-4957&mode=design&t=KwxbuoUQxqcLyZbG-0',
-        },
-    },
-    tags: ['autodocs'],
-};
-
-export default meta;
-
-function Option({ label }: RendererProps) {
-    return (
-        <div>
-            { label }
-        </div>
-    );
-}
-
-const keySelector = (datum: Option) => datum.key;
-const rendererParams = (_key: string, option: Option) => ({ label: option.label });
-
-export const Default: Story = {
-    args: {
-        data: options,
-        keySelector,
-        renderer: Option,
-        rendererParams,
-    },
-};
-
-export const Pending: Story = {
-    args: {
-        className: 'list-story',
-        keySelector,
-        renderer: Option,
-        rendererParams,
-        pending: true,
-        compact: true,
-        pendingMessage: 'We are populating the data...',
-    },
-};
-
-export const Errored: Story = {
-    args: {
-        className: 'list-story',
-        keySelector,
-        renderer: Option,
-        rendererParams,
-        errored: true,
-        errorMessage: 'Failed to fetch data!',
-    },
-};
-
-export const Filtered: Story = {
-    args: {
-        className: 'list-story',
-        keySelector,
-        renderer: Option,
-        rendererParams,
-        filtered: true,
-        filteredEmptyMessage: 'Data is not available for selected filters',
-    },
-};
diff --git a/packages/go-ui-storybook/src/stories/List.tsx b/packages/go-ui-storybook/src/stories/List.tsx
deleted file mode 100644
index 328bd442a2..0000000000
--- a/packages/go-ui-storybook/src/stories/List.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {
-    List as PureList,
-    ListProps as PureListProps,
-} from '@ifrc-go/ui';
-
-type ListKey = string | number | boolean
-// eslint-disable-next-line max-len
-type ListProps<DATUM, KEY extends ListKey, RENDERER_PROPS> = PureListProps<DATUM, KEY, RENDERER_PROPS>
-
-function List<
-    DATUM,
-    KEY extends ListKey,
-    RENDERER_PROPS,
->(props: ListProps<DATUM, KEY, RENDERER_PROPS>) {
-    return (
-        <PureList {...props} />// eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default List;
diff --git a/packages/go-ui-storybook/src/stories/DropdownMenu.stories.tsx b/packages/go-ui-storybook/src/stories/Menu.stories.tsx
similarity index 83%
rename from packages/go-ui-storybook/src/stories/DropdownMenu.stories.tsx
rename to packages/go-ui-storybook/src/stories/Menu.stories.tsx
index 782b6d9ee1..d7de5dee7e 100644
--- a/packages/go-ui-storybook/src/stories/DropdownMenu.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Menu.stories.tsx
@@ -1,17 +1,17 @@
 import { Fragment } from 'react';
-import { DropdownMenuProps } from '@ifrc-go/ui';
+import { MenuProps } from '@ifrc-go/ui';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 
-import DropdownMenu from './DropdownMenu';
+import Menu from './Menu';
 
-type Story = StoryObj<DropdownMenuProps>;
+type Story = StoryObj<MenuProps>;
 
 const meta = {
-    title: 'Components/DropdownMenu',
-    component: DropdownMenu,
+    title: 'Components/Menu',
+    component: Menu,
     parameters: {
         layout: 'centered',
         design: {
@@ -20,7 +20,7 @@ const meta = {
         },
     },
     tags: ['autodocs'],
-} satisfies Meta<typeof DropdownMenu>;
+} satisfies Meta<typeof Menu>;
 
 export default meta;
 
diff --git a/packages/go-ui-storybook/src/stories/Menu.tsx b/packages/go-ui-storybook/src/stories/Menu.tsx
new file mode 100644
index 0000000000..32120c79b6
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/Menu.tsx
@@ -0,0 +1,12 @@
+import {
+    Menu as PureMenu,
+    MenuProps,
+} from '@ifrc-go/ui';
+
+function Menu(props: MenuProps) {
+    return (
+        <PureMenu {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default Menu;
diff --git a/packages/go-ui-storybook/src/stories/Modal.tsx b/packages/go-ui-storybook/src/stories/Modal.tsx
deleted file mode 100644
index 03cb0324d2..0000000000
--- a/packages/go-ui-storybook/src/stories/Modal.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-    Modal as PureModal,
-    ModalProps as PureModalProps,
-} from '@ifrc-go/ui';
-
-type ModalProps = PureModalProps
-
-function Modal(props: ModalProps) {
-    return (
-        <PureModal {...props} /> // eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default Modal;
diff --git a/packages/go-ui-storybook/src/stories/InfoPopup.stories.tsx b/packages/go-ui-storybook/src/stories/MoreInfo.stories.tsx
similarity index 54%
rename from packages/go-ui-storybook/src/stories/InfoPopup.stories.tsx
rename to packages/go-ui-storybook/src/stories/MoreInfo.stories.tsx
index 939b01d3ee..cabf6afd80 100644
--- a/packages/go-ui-storybook/src/stories/InfoPopup.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/MoreInfo.stories.tsx
@@ -1,16 +1,16 @@
-import { InfoPopupProps } from '@ifrc-go/ui';
+import { MoreInfoProps } from '@ifrc-go/ui';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 
-import InfoPopup from './InfoPopup';
+import MoreInfo from './MoreInfo';
 
-type Story = StoryObj<InfoPopupProps>;
+type Story = StoryObj<MoreInfoProps>;
 
-const meta: Meta<typeof InfoPopup> = {
-    title: 'Components/InfoPopup',
-    component: InfoPopup,
+const meta: Meta<typeof MoreInfo> = {
+    title: 'Components/MoreInfo',
+    component: MoreInfo,
     parameters: {
         layout: 'centered',
         design: {
@@ -26,13 +26,13 @@ export default meta;
 export const Default: Story = {
     args: {
         title: 'Important Update',
-        description: 'Stay informed with the latest updates and announcements. Please read through the details and take necessary actions. Thank you!',
+        children: 'Stay informed with the latest updates and announcements. Please read through the details and take necessary actions. Thank you!',
     },
 };
 
-export const Infolabel: Story = {
+export const WithLabel: Story = {
     args: {
         ...Default.args,
-        infoLabel: 'Notice',
+        label: 'Notice',
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/MoreInfo.tsx b/packages/go-ui-storybook/src/stories/MoreInfo.tsx
new file mode 100644
index 0000000000..6da2b66271
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/MoreInfo.tsx
@@ -0,0 +1,12 @@
+import {
+    MoreInfo as PureMoreInfo,
+    MoreInfoProps,
+} from '@ifrc-go/ui';
+
+function MoreInfo(props: MoreInfoProps) {
+    return (
+        <PureMoreInfo {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default MoreInfo;
diff --git a/packages/go-ui-storybook/src/stories/NumberOutput.stories.tsx b/packages/go-ui-storybook/src/stories/NumberDisplay.stories.tsx
similarity index 74%
rename from packages/go-ui-storybook/src/stories/NumberOutput.stories.tsx
rename to packages/go-ui-storybook/src/stories/NumberDisplay.stories.tsx
index 59611dfdac..e25d224c10 100644
--- a/packages/go-ui-storybook/src/stories/NumberOutput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/NumberDisplay.stories.tsx
@@ -1,18 +1,18 @@
-import { NumberOutputProps } from '@ifrc-go/ui';
+import { NumberDisplayProps } from '@ifrc-go/ui';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 
-import NumberOutput from './NumberOutput';
+import NumberDisplay from './NumberDisplay';
 
-type NumberOutputSpecificProps = NumberOutputProps;
+type NumberDisplaySpecificProps = NumberDisplayProps;
 
-type Story = StoryObj<NumberOutputSpecificProps>;
+type Story = StoryObj<NumberDisplaySpecificProps>;
 
-const meta: Meta<typeof NumberOutput> = {
-    title: 'Outputs/NumberOutput',
-    component: NumberOutput,
+const meta: Meta<typeof NumberDisplay> = {
+    title: 'Outputs/NumberDisplay',
+    component: NumberDisplay,
     parameters: {
         layout: 'centered',
         design: {
diff --git a/packages/go-ui-storybook/src/stories/NumberDisplay.tsx b/packages/go-ui-storybook/src/stories/NumberDisplay.tsx
new file mode 100644
index 0000000000..9290133425
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/NumberDisplay.tsx
@@ -0,0 +1,12 @@
+import {
+    NumberDisplay as PureNumberDisplay,
+    NumberDisplayProps,
+} from '@ifrc-go/ui';
+
+function NumberDisplay(props: NumberDisplayProps) {
+    return (
+        <PureNumberDisplay {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default NumberDisplay;
diff --git a/packages/go-ui-storybook/src/stories/NumberOutput.tsx b/packages/go-ui-storybook/src/stories/NumberOutput.tsx
deleted file mode 100644
index 109f6d6b9e..0000000000
--- a/packages/go-ui-storybook/src/stories/NumberOutput.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-    NumberOutput as PureNumberOutput,
-    NumberOutputProps,
-} from '@ifrc-go/ui';
-
-function NumberOutput(props: NumberOutputProps) {
-    return (
-        <PureNumberOutput {...props} />// eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default NumberOutput;
diff --git a/packages/go-ui-storybook/src/stories/PageHeader.stories.tsx b/packages/go-ui-storybook/src/stories/PageHeader.stories.tsx
index d92f6b4b0c..15aff49072 100644
--- a/packages/go-ui-storybook/src/stories/PageHeader.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/PageHeader.stories.tsx
@@ -42,6 +42,14 @@ export const WithDescription: Story = {
     },
 };
 
+export const WithOverline: Story = {
+    args: {
+        overline: 'Emergency Appeal',
+        heading: 'IFRC Disaster Response and Preparedness',
+        description: 'IFRC GO aims to make all disaster information universally accessible and useful to IFRC responders for better decision making.',
+    },
+};
+
 export const WithAction: Story = {
     args: {
         heading: 'IFRC Disaster Response and Preparedness',
diff --git a/packages/go-ui-storybook/src/stories/Pager.tsx b/packages/go-ui-storybook/src/stories/Pager.tsx
deleted file mode 100644
index f3fc14aa05..0000000000
--- a/packages/go-ui-storybook/src/stories/Pager.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-    Pager as PurePager,
-    PagerProps,
-} from '@ifrc-go/ui';
-
-function Pager(props: PagerProps) {
-    return (
-        <PurePager {...props} />// eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default Pager;
diff --git a/packages/go-ui-storybook/src/stories/Pager.stories.tsx b/packages/go-ui-storybook/src/stories/Pagination.stories.tsx
similarity index 87%
rename from packages/go-ui-storybook/src/stories/Pager.stories.tsx
rename to packages/go-ui-storybook/src/stories/Pagination.stories.tsx
index 610db47d4d..8c72889064 100644
--- a/packages/go-ui-storybook/src/stories/Pager.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Pagination.stories.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { PagerProps } from '@ifrc-go/ui';
+import { PaginationProps } from '@ifrc-go/ui';
 import { useArgs } from '@storybook/preview-api';
 import type {
     Args,
@@ -8,13 +8,13 @@ import type {
 } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import Pager from './Pager';
+import Pagination from './Pagination';
 
-type Story = StoryObj<PagerProps>;
+type Story = StoryObj<PaginationProps>;
 
 const meta = {
-    title: 'Inputs/Pager',
-    component: Pager,
+    title: 'Inputs/Pagination',
+    component: Pagination,
     parameters: {
         layout: 'centered',
         design: {
@@ -26,7 +26,7 @@ const meta = {
         onActivePageChange: fn(),
     },
     tags: ['autodocs'],
-} satisfies Meta<typeof Pager>;
+} satisfies Meta<typeof Pagination>;
 
 export default meta;
 
@@ -43,7 +43,7 @@ function Template(args:Args) {
     }, [handleArgsChange, onActivePageChange]);
 
     return (
-        <Pager
+        <Pagination
             itemsCount={10}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...args}
diff --git a/packages/go-ui-storybook/src/stories/Pagination.tsx b/packages/go-ui-storybook/src/stories/Pagination.tsx
new file mode 100644
index 0000000000..ef5ee3b49e
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/Pagination.tsx
@@ -0,0 +1,12 @@
+import {
+    Pagination as PurePagination,
+    PaginationProps,
+} from '@ifrc-go/ui';
+
+function Pagination(props: PaginationProps) {
+    return (
+        <PurePagination {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default Pagination;
diff --git a/packages/go-ui-storybook/src/stories/Popup.stories.tsx b/packages/go-ui-storybook/src/stories/Popover.stories.tsx
similarity index 64%
rename from packages/go-ui-storybook/src/stories/Popup.stories.tsx
rename to packages/go-ui-storybook/src/stories/Popover.stories.tsx
index 08481264f2..bc78f0a035 100644
--- a/packages/go-ui-storybook/src/stories/Popup.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Popover.stories.tsx
@@ -1,19 +1,19 @@
-import { PopupProps } from '@ifrc-go/ui';
+import { PopoverProps } from '@ifrc-go/ui';
 import { useRef } from '@storybook/preview-api';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 
-import Popup from './Popup';
+import Popover from './Popover';
 
-type PopupSpecificProps = PopupProps;
+type PopoverSpecificProps = PopoverProps;
 
-type Story = StoryObj<PopupSpecificProps>;
+type Story = StoryObj<PopoverSpecificProps>;
 
-const meta: Meta<typeof Popup> = {
-    title: 'Components/Popup',
-    component: Popup,
+const meta: Meta<typeof Popover> = {
+    title: 'Components/Popover',
+    component: Popover,
     parameters: {
         layout: 'centered',
         design: {
@@ -30,12 +30,12 @@ export const Default: Story = () => {
 
     return (
         <div>
-            <div ref={containerRef}>Popup</div>
-            <Popup parentRef={containerRef}>
+            <div ref={containerRef}>Popover</div>
+            <Popover parentRef={containerRef}>
                 <div style={{ padding: '20px' }}>
-                    This is the popup message
+                    This is the popover message
                 </div>
-            </Popup>
+            </Popover>
         </div>
     );
 };
diff --git a/packages/go-ui-storybook/src/stories/Popover.tsx b/packages/go-ui-storybook/src/stories/Popover.tsx
new file mode 100644
index 0000000000..aeef332c8d
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/Popover.tsx
@@ -0,0 +1,12 @@
+import {
+    Popover as PurePopover,
+    PopoverProps,
+} from '@ifrc-go/ui';
+
+function Popover(props: PopoverProps) {
+    return (
+        <PurePopover {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default Popover;
diff --git a/packages/go-ui-storybook/src/stories/Popup.tsx b/packages/go-ui-storybook/src/stories/Popup.tsx
deleted file mode 100644
index a7013328ae..0000000000
--- a/packages/go-ui-storybook/src/stories/Popup.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-    Popup as PurePopup,
-    PopupProps,
-} from '@ifrc-go/ui';
-
-function Popup(props: PopupProps) {
-    return (
-        <PurePopup {...props} />// eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default Popup;
diff --git a/packages/go-ui-storybook/src/stories/Progressbar.stories.ts b/packages/go-ui-storybook/src/stories/Progressbar.stories.ts
index 27324cf066..ce24ef453c 100644
--- a/packages/go-ui-storybook/src/stories/Progressbar.stories.ts
+++ b/packages/go-ui-storybook/src/stories/Progressbar.stories.ts
@@ -30,7 +30,7 @@ export const Default: Story = {
         value: 75,
         title: 'Total Projects Completed',
         totalValue: 150,
-        colorVariant: 'primary',
+        variant: 'primary',
     },
 };
 
@@ -53,7 +53,7 @@ export const Success: Story = {
         value: 40,
         totalValue: 100,
         title: 'Successful Projects',
-        colorVariant: 'success',
+        variant: 'success',
     },
 };
 
@@ -62,7 +62,7 @@ export const Danger: Story = {
         value: 20,
         totalValue: 100,
         title: 'Failed Projects',
-        colorVariant: 'danger',
+        variant: 'danger',
     },
 };
 
@@ -71,7 +71,7 @@ export const CustomColor: Story = {
         value: 50,
         totalValue: 100,
         title: 'Custom Color Progress',
-        colorVariant: 'custom',
+        variant: 'custom',
         color: '#FF5733',
         showPercentageInTitle: true,
     },
diff --git a/packages/go-ui-storybook/src/stories/RadioInput.tsx b/packages/go-ui-storybook/src/stories/RadioInput.tsx
index d89612b309..c53cc74f35 100644
--- a/packages/go-ui-storybook/src/stories/RadioInput.tsx
+++ b/packages/go-ui-storybook/src/stories/RadioInput.tsx
@@ -5,7 +5,7 @@ import {
 } from '@ifrc-go/ui';
 
 // eslint-disable-next-line max-len
-function RadioInput<const N, O extends object, V extends string | number | boolean, RRP extends RadioProps<V, N>>(props: RadioInputProps<N, O, V, RRP, never>) {
+function RadioInput<const N, O extends object, V extends string | number | boolean, RRP extends RadioProps<V>>(props: RadioInputProps<N, O, V, RRP>) {
     return (
         <PureRadioInput {...props} /> // eslint-disable-line react/jsx-props-no-spreading
     );
diff --git a/packages/go-ui-storybook/src/stories/RawFileInput.tsx b/packages/go-ui-storybook/src/stories/RawFileInput.tsx
deleted file mode 100644
index 855397262f..0000000000
--- a/packages/go-ui-storybook/src/stories/RawFileInput.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-    RawFileInput as PureRawFileInput,
-    RawFileInputProps,
-} from '@ifrc-go/ui';
-
-function RawFileInput< const N>(props: RawFileInputProps<N>) {
-    return (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <PureRawFileInput {...props} />
-
-    );
-}
-
-export default RawFileInput;
diff --git a/packages/go-ui-storybook/src/stories/ReducedListDisplay.tsx b/packages/go-ui-storybook/src/stories/ReducedListDisplay.tsx
deleted file mode 100644
index 263f49eb17..0000000000
--- a/packages/go-ui-storybook/src/stories/ReducedListDisplay.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-    ReducedListDisplay as PureReducedListDisplay,
-    ReducedListDisplayProps as PureReducedListDisplayProps,
-} from '@ifrc-go/ui';
-
-// eslint-disable-next-line max-len
-type ReducedListDisplayProps<LIST_ITEM, RENDERER_PROPS> = PureReducedListDisplayProps<LIST_ITEM, RENDERER_PROPS>
-
-function ReducedListDisplay
-
-<LIST_ITEM, RENDERER_PROPS>(props: ReducedListDisplayProps<LIST_ITEM, RENDERER_PROPS>) {
-    return (
-        <PureReducedListDisplay {...props} />// eslint-disable-line react/jsx-props-no-spreading
-    );
-}
-
-export default ReducedListDisplay;
diff --git a/packages/go-ui-storybook/src/stories/SegmentInput.tsx b/packages/go-ui-storybook/src/stories/SegmentInput.tsx
index 7db54b908f..01c66d26e0 100644
--- a/packages/go-ui-storybook/src/stories/SegmentInput.tsx
+++ b/packages/go-ui-storybook/src/stories/SegmentInput.tsx
@@ -1,12 +1,10 @@
 import {
-    RadioProps,
     SegmentInput as PureSegmentInput,
     SegmentInputProps as PureSegmentInputProps,
 } from '@ifrc-go/ui';
 
-function SegmentInput<const N, O extends object, V
-extends string | number | boolean, RRP extends RadioProps<V, N>>(
-    props: PureSegmentInputProps<N, O, V, RRP>,
+function SegmentInput<const N, O extends object, V extends string | number | boolean>(
+    props: PureSegmentInputProps<N, O, V>,
 ) {
     return (
         <PureSegmentInput {...props} /> // eslint-disable-line react/jsx-props-no-spreading
diff --git a/packages/go-ui-storybook/src/stories/Chip.stories.tsx b/packages/go-ui-storybook/src/stories/Tag.stories.tsx
similarity index 63%
rename from packages/go-ui-storybook/src/stories/Chip.stories.tsx
rename to packages/go-ui-storybook/src/stories/Tag.stories.tsx
index ef3712a0e8..5492522f9d 100644
--- a/packages/go-ui-storybook/src/stories/Chip.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Tag.stories.tsx
@@ -3,13 +3,13 @@ import type {
     StoryObj,
 } from '@storybook/react';
 
-import Chip from './Chip';
+import Tag from './Tag';
 
-type Story = StoryObj<typeof Chip>;
+type Story = StoryObj<typeof Tag>;
 
-const meta: Meta<typeof Chip> = {
-    title: 'Components/Chip',
-    component: Chip,
+const meta: Meta<typeof Tag> = {
+    title: 'Components/Tag',
+    component: Tag,
     parameters: {
         layout: 'centered',
         design: {
@@ -18,30 +18,27 @@ const meta: Meta<typeof Chip> = {
         },
     },
     args: {
-        label: 'Chip',
+        label: 'Tag',
     },
     tags: ['autodocs'],
-    argTypes: {
-        onDelete: { action: 'deleted' },
-    },
 };
 
 export default meta;
 
 export const Primary: Story = {
     args: {
-        variant: 'primary',
+        colorVariant: 'primary',
     },
 };
 
 export const Secondary: Story = {
     args: {
-        variant: 'secondary',
+        colorVariant: 'secondary',
     },
 };
 
 export const Tertiary: Story = {
     args: {
-        variant: 'tertiary',
+        colorVariant: 'tertiary',
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/Tag.tsx b/packages/go-ui-storybook/src/stories/Tag.tsx
new file mode 100644
index 0000000000..b3c09e9efd
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/Tag.tsx
@@ -0,0 +1,12 @@
+import {
+    Tag as PureTag,
+    TagProps,
+} from '@ifrc-go/ui';
+
+function Tag(props: TagProps) {
+    return (
+        <PureTag {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default Tag;
diff --git a/packages/go-ui-storybook/src/stories/TextInput.stories.tsx b/packages/go-ui-storybook/src/stories/TextInput.stories.tsx
index dace6c2eab..4ece0d2096 100644
--- a/packages/go-ui-storybook/src/stories/TextInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/TextInput.stories.tsx
@@ -94,9 +94,9 @@ export const WithAsterisk: Story = {
     },
 };
 
-export const Variant: Story = {
+export const StyleVariant: Story = {
     args: {
         ...Default.args,
-        variant: 'general',
+        styleVariant: 'general',
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/TopBanner.stories.tsx b/packages/go-ui-storybook/src/stories/TopBanner.stories.tsx
new file mode 100644
index 0000000000..e423757074
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/TopBanner.stories.tsx
@@ -0,0 +1,40 @@
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import TopBanner from './TopBanner';
+
+type Story = StoryObj<typeof TopBanner>;
+
+const meta = {
+    title: 'Components/TopBanner',
+    component: TopBanner,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof TopBanner>;
+
+export default meta;
+
+export const Brand = {
+    args: {
+        variant: 'brand',
+        children: 'Scheduled maintenance on Sunday 02:00–04:00 UTC.',
+    },
+} satisfies Story;
+
+export const Information = {
+    args: {
+        variant: 'information',
+        children: 'A new version of IFRC GO is available.',
+    },
+} satisfies Story;
+
+export const Warning = {
+    args: {
+        variant: 'warning',
+        children: 'Some services are currently running in a degraded mode.',
+    },
+} satisfies Story;
diff --git a/packages/go-ui-storybook/src/stories/TopBanner.tsx b/packages/go-ui-storybook/src/stories/TopBanner.tsx
new file mode 100644
index 0000000000..d143c5ee20
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/TopBanner.tsx
@@ -0,0 +1,12 @@
+import {
+    TopBanner as PureTopBanner,
+    TopBannerProps,
+} from '@ifrc-go/ui';
+
+function TopBanner(props: TopBannerProps) {
+    return (
+        <PureTopBanner {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default TopBanner;
diff --git a/packages/go-ui-storybook/src/stories/ReducedListDisplay.stories.tsx b/packages/go-ui-storybook/src/stories/TruncatedList.stories.tsx
similarity index 77%
rename from packages/go-ui-storybook/src/stories/ReducedListDisplay.stories.tsx
rename to packages/go-ui-storybook/src/stories/TruncatedList.stories.tsx
index 75c49a5c8c..cd89fe40c1 100644
--- a/packages/go-ui-storybook/src/stories/ReducedListDisplay.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/TruncatedList.stories.tsx
@@ -1,10 +1,10 @@
-import { ReducedListDisplayProps } from '@ifrc-go/ui';
+import { TruncatedListProps } from '@ifrc-go/ui';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 
-import ReducedListDisplay from './ReducedListDisplay';
+import TruncatedList from './TruncatedList';
 
 interface Option {
     label: string;
@@ -22,13 +22,13 @@ type RendererProps = {
     value: React.ReactNode
 };
 
-type ReducedListDisplaySpecificProps = ReducedListDisplayProps<Option, RendererProps>;
+type TruncatedListSpecificProps = TruncatedListProps<Option, RendererProps>;
 
-type Story = StoryObj<ReducedListDisplaySpecificProps>;
+type Story = StoryObj<TruncatedListSpecificProps>;
 
-const meta: Meta<typeof ReducedListDisplay> = {
-    title: 'Components/ReducedListDisplay',
-    component: ReducedListDisplay,
+const meta: Meta<typeof TruncatedList> = {
+    title: 'Components/TruncatedList',
+    component: TruncatedList,
     parameters: {
         layout: 'centered',
         design: {
diff --git a/packages/go-ui-storybook/src/stories/TruncatedList.tsx b/packages/go-ui-storybook/src/stories/TruncatedList.tsx
new file mode 100644
index 0000000000..f209ac83e6
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/TruncatedList.tsx
@@ -0,0 +1,17 @@
+import {
+    TruncatedList as PureTruncatedList,
+    TruncatedListProps as PureTruncatedListProps,
+} from '@ifrc-go/ui';
+
+// eslint-disable-next-line max-len
+type TruncatedListProps<LIST_ITEM, RENDERER_PROPS> = PureTruncatedListProps<LIST_ITEM, RENDERER_PROPS>
+
+function TruncatedList
+
+<LIST_ITEM, RENDERER_PROPS>(props: TruncatedListProps<LIST_ITEM, RENDERER_PROPS>) {
+    return (
+        <PureTruncatedList {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default TruncatedList;
diff --git a/packages/ui/CONTRIBUTING.md b/packages/ui/CONTRIBUTING.md
index b42bab0966..8a349b5f3a 100644
--- a/packages/ui/CONTRIBUTING.md
+++ b/packages/ui/CONTRIBUTING.md
@@ -1 +1,123 @@
-## Contributing to IFRC GO UI
+# Contributing to IFRC GO UI
+
+This document records the library's architectural conventions. Every component and every PR is expected to follow them; deviations need an explicit reason in review.
+
+## Component layers
+
+Every component belongs to exactly one layer:
+
+| Layer | Naming | Definition | Examples |
+| --- | --- | --- | --- |
+| **Raw** | `Raw*` | Unstyled behavioral primitives. No spec props, no sibling component imports, no visual opinion. | `RawButton`, `RawInput`, `RawList`, `RawFileInput` |
+| **Generic** | `*Layout`, `*View`, and blessed building blocks | Cover most designs through composition. `*Layout` = slot arrangement meant to be **embedded inside another component's element** (e.g. `ButtonLayout` inside `RawButton`). `*View` = **standalone** generic block placed directly in a page. | `InlineLayout`, `TabLayout`, `ButtonLayout`, `BlockView`, `InlineView`, `ListView`, `Container`, `InputContainer`, `Heading`, `RawOutput` |
+| **Specific** | No suffix | Consumer-facing, domain-meaningful components composed from generic + raw pieces. | `Button`, `Alert`, `KeyFigureCard`, `FileInputButton`, `TextOutput` |
+
+Dependency rule (convention, enforced in review): **imports point downward only.** Specific components import generic and raw components — never each other. Generic components import raw components and other generic components below them. Raw components import nothing from the library. A component that needs "a button" inside it imports `ButtonLayout` or `RawButton`, not `Button`.
+
+## Token specs
+
+Visual dimensions are expressed as **specs**: token-valued props backed by the CSS variable scales in `src/index.css` and applied through static utility classes (`src/utils/specs.module.css`) via the resolvers in `src/utils/style.ts`.
+
+| Spec | Prop | Type | Scale | Offset prop |
+| --- | --- | --- | --- | --- |
+| Spacing | `spacing` | `SpacingType` | `none`, `5xs`–`5xl` (`--go-ui-spacing-*`) | `spacingOffset` |
+| Text size | `textSize` | `TextSizeType` | `2xs`–`4xl` (`--go-ui-font-size-*`) | `textSizeOffset` (where needed) |
+| Background | `backgroundColor` | `BackgroundColorType` | `foreground` (white surface), `background` (page gray), `element` (input well) | — (categorical) |
+| Border radius | `borderRadius` | `BorderRadiusType` | `none`–`3xl`, `full` (`--go-ui-border-radius-*`) | `borderRadiusOffset` (where needed) |
+| Shadow | `boxShadow` | `BoxShadowType` | `none`, `xs`–`2xl` (`--go-ui-box-shadow-*`) | `boxShadowOffset` (where needed) |
+
+Rules:
+
+- A spec is defined **once** in `src/utils/style.ts` (type + scale + resolver). Components never declare private size/color scales. To constrain a spec, narrow the shared type: `Extract<TextSizeType, 'xs' | 'sm' | 'md' | 'lg'>`.
+- **Offsets** exist on ordinal specs only. An offset shifts the resolved token along the scale (clamped at both ends), so a component rendered in a visually larger or smaller context can shift its whole scale without inventing new tokens.
+- `spacing` is **unified**: one value drives gaps and (when `withPadding` is set) padding. Do not split it into separate gap/padding props.
+- **Tokens only.** Spec props accept tokens, never arbitrary CSS values. The single exception: data-driven visualization components (`ProgressBar`, charts) may take custom colors through a discriminated union (`variant: 'custom'` + `color`), because there the color encodes data, not design. If a design needs a value the scale lacks, extend the scale — don't add an escape hatch.
+
+## Variants
+
+- **Generic** components expose the two-axis API: `colorVariant` (semantic color) + `styleVariant` (visual treatment). Example: `ButtonLayout`, `TabLayout`.
+- **Specific** components expose a single curated `variant` whose values map to axis pairs internally. Example: `Button`'s `variant="primary"` → `ButtonLayout` `colorVariant="primary" styleVariant="filled"`.
+- `type` is reserved for HTML semantics (`button type`, `input type`) — never for styling.
+
+## Boolean props
+
+Booleans are for true binaries only (`disabled`, `readOnly`, `withAsterisk`). Anything backed by a token scale or with three or more states must be a token/enum prop (`backgroundColor`, not `withBackground`/`withDarkBackground`).
+
+**Polarity follows the default:** `withX` names a feature that is off by default; `withoutX` names a feature that is on by default. A bare boolean attribute therefore always *flips* the default. When a feature's default changes, its prop must be renamed — that's intentional, it surfaces the behavior change at every call site.
+
+## Refs and styling slots
+
+- `elementRef` always refers to the component's **root** DOM node.
+- Secondary nodes get `<slot>Ref` names (`inputElementRef`, `inputSectionRef`).
+- Styling escape hatches are flat `<slot>ClassName` props (`labelClassName`, `afterContainerClassName`); `className` applies to the root and is merged last, so consumer overrides win.
+
+## Accessibility
+
+Accessibility is a convention here, not an afterthought. The guiding rule is **native semantics first**: reach for the correct HTML element or ARIA role before building a custom widget, because most of the keyboard and screen-reader behaviour comes for free when you do. This is also why component names track HTML/ARIA vocabulary — a component named for what it *is* tends to render the right thing.
+
+### Form fields
+
+The label↔control↔hint↔error relationship is wired once, in `InputContainer` — individual inputs must not re-implement it. A field generates a stable id (`useId`) and:
+
+- the label is a real `<label htmlFor={id}>` (`InputLabel`), not a styled `<div>`;
+- the control gets `aria-describedby` pointing at the hint and/or error nodes (by id);
+- the control gets `aria-invalid` when errored and `aria-required` when required (the visual asterisk stays `aria-hidden`);
+- the error node carries `role="alert"` so validation is announced.
+
+Grouped controls (`RadioInput`, `Checklist`, `SegmentInput`) wrap their options in `role="radiogroup"`/`role="group"` and associate the group-level label/error.
+
+### Accessible value outputs (core pattern)
+
+Formatted outputs (`NumberOutput`, `DateOutput`, `BooleanOutput`, and anything built on them like `KeyFigure`/`TextOutput`) speak to **three audiences at once**:
+
+| Audience | Content | Carrier |
+| --- | --- | --- |
+| Sighted user | the visible, possibly abbreviated string (`1.5M`) | rendered text |
+| Screen reader | the full, un-abbreviated reading (`1,500,000`, with prefix/suffix/currency/unit, localised) | `role="img"` + `aria-label` |
+| Machine / test | the raw input value (`1500000`) | native `<data value>` / `<time datetime>` |
+
+```tsx
+// NumberOutput, compact, value={1500000}
+<data value="1500000" role="img" aria-label="1,500,000">1.5M</data>
+
+// DateOutput, value="2026-06-13"
+<time dateTime="2026-06-13" role="img" aria-label="13 June 2026">13 Jun</time>
+```
+
+Rules:
+
+- The full screen-reader string is produced by the **same formatter with abbreviation off** (e.g. `formatNumber(value, { compact: false, … })`) — never hand-written.
+- `role="img"` is applied **only when the visible string is lossy** (compact numbers, short dates, abbreviated units). When the visible text already equals the full reading (`42`, `Yes`), render a plain `<data>`/`<time>` with no role and no `aria-label` — the text reads correctly on its own.
+- The native attribute (`value` / `dateTime`) is **always present** and is the machine-readable + test hook — read `el.value` / `el.dateTime` in tests rather than asserting on the formatted text. There is no separate `data-*` attribute; the native one is the contract.
+- `role="img"` is deliberate, not a hack: `img` is the role whose children are presentational and whose name comes from `aria-label`, so the label *replaces* the inner text for assistive tech. `role="presentation"`/`none` does the opposite (strips semantics, ignores `aria-label`) and must not be used for this.
+- Never rely on `title` for the accessible value — it is inconsistently announced and invisible on touch.
+
+### Interactive widgets
+
+Follow the WAI-ARIA Authoring Practices pattern for the widget:
+
+- **Dialog** (`Modal`): `role="dialog"` + `aria-modal` + `aria-labelledby` wired to the heading; focus trap, Escape, and focus restore (via `react-focus-on`).
+- **Tabs**: `role="tablist"`/`tab`/`tabpanel`, `aria-selected`, tab↔panel `aria-controls`/`aria-labelledby`, arrow-key navigation with a roving `tabindex`.
+- **Combobox** (`SelectInputContainer` and the select family): `role="combobox"`/`listbox`/`option`, `aria-expanded`, `aria-controls`, `aria-activedescendant`, `aria-selected`.
+- **Menu vs popover**: `role="menu"`/`menuitem"` (with menu keyboard semantics) is only for action menus. A popover holding arbitrary content (e.g. `InfoPopup`) is **not** a menu — don't give it menu roles.
+- **Disclosure** (`ExpandableContainer`): toggle is a `<button>` with `aria-expanded` + `aria-controls`.
+- **Switch** (`Switch`): `role="switch"` + `aria-checked`, even though it's built on a checkbox.
+
+### Status, landmarks, and controls
+
+- Live regions: transient notifications use `role="alert"` (assertive); status/loading uses `role="status"` + `aria-busy`. `Alert`, `Message`, `BlockLoading` follow this.
+- Navigation: `Breadcrumbs` and `Pager` are `<nav>` landmarks with an `aria-label`; the current item gets `aria-current="page"`.
+- Icon-only controls require an accessible name — `IconButton` enforces `ariaLabel`; decorative icons elsewhere are `aria-hidden`.
+
+## Documentation
+
+- Every exported component carries a JSDoc block: what it is, which layer it belongs to, and notes on non-obvious props. These flow into Storybook automatically via react-docgen.
+- Breaking changes ship with a changeset **and** a `MIGRATION.md` entry containing exact before/after call-site rewrites.
+
+## Translations
+
+Keep `strings.*` usages inside the component's own `index.tsx`. The `i18n-usage` lint rule only scans the co-located `index.tsx`, and its autofix deletes keys it believes are unused.
+
+## Releases
+
+Versioning is handled with [changesets](https://github.com/changesets/changesets). Run `npx changeset` at the repo root, pick the bump level, and describe the change from a consumer's perspective.
diff --git a/packages/ui/MIGRATION.md b/packages/ui/MIGRATION.md
new file mode 100644
index 0000000000..6d6e21cb66
--- /dev/null
+++ b/packages/ui/MIGRATION.md
@@ -0,0 +1,112 @@
+# Migration guide
+
+## v2.x → v3.0.0
+
+v3 restructures the library around two ideas: a declared **component layer model** (raw → generic → specific) and **token specs** — visual props (`spacing`, `textSize`, `backgroundColor`, `borderRadius`, `boxShadow`) resolved against the shared token scales through static CSS utility classes. See `CONTRIBUTING.md` for the conventions and `README.md` for the spec reference. Everything below is a mechanical rewrite; visual changes are explicitly flagged.
+
+### Component renames (HTML/ARIA-aligned)
+
+Pure renames — update the import, the JSX tag, and the `Props` type; props are otherwise unchanged:
+
+| Old | New |
+| --- | --- |
+| `Modal` / `ModalProps` | `Dialog` / `DialogProps` |
+| `Popup` / `PopupProps` | `Popover` / `PopoverProps` |
+| `InlineFrame` / `InlineFrameProps` | `Iframe` / `IframeProps` |
+| `Pager` / `PagerProps` | `Pagination` / `PaginationProps` |
+| `Label` / `LabelProps` | `DisplayLabel` / `DisplayLabelProps` (the generic text label; **not** the form `InputLabel`) |
+| `ReducedListDisplay` / `…Props` | `TruncatedList` / `TruncatedListProps` (now a disclosure — full list in DOM, `aria-expanded`) |
+| `TextOutput` / `TextOutputProps` | `DataDisplay` / `DataDisplayProps` (now renders `<dl>/<dt>/<dd>`) |
+| `NumberOutput` → `NumberDisplay`, `DateOutput` → `DateDisplay`, `BooleanOutput` → `BooleanDisplay`, `DateRangeOutput` → `DateRangeDisplay`, `HtmlOutput` → `HtmlDisplay`, `RawOutput` → `RawDisplay` | the read-only value family is now `*Display` (mirrors `*Input`) |
+| `Chip` | split → `ChipLayout` (generic base, `styleVariant`), `Tag` (static label), `Selection` / `SelectionList` (removable selected values) |
+| `DropdownMenu` / `DropdownMenuProps` | `Menu` / `MenuProps` (action menu; `role="menu"`). Icon-only triggers should pass `ariaLabel`. |
+| `InfoPopup` / `InfoPopupProps` | `MoreInfo` / `MoreInfoProps` — generic info affordance, `as="popover" \| "dialog"`; `infoLabel`→`label`, `description`→`children` (old names kept as deprecated aliases) |
+| `DismissableTextOutput`, `DismissableListOutput` | `Selection` (same props) |
+| `DismissableMultiListOutput` | `SelectionList` (same props; optional `label` group prefix) |
+| `DropdownMenuContext` / `DropdownMenuContextProps` (`@ifrc-go/ui/contexts`) | `MenuContext` / `MenuContextProps` (member `setShowDropdown` unchanged) |
+| `TextBadge` | `CharacterCount` (internal; was not exported) |
+
+New: `Dropdown` (generic disclosure that `Menu` composes), `Tag`, `Selection`, `SelectionList`, `ChipLayout`. Unchanged: `KeyFigure`, `KeyFigureCard`, `ColorPreview`, `InputLabel`, `Tooltip`.
+
+Overlays now use native platform features where they fit — no public API changes:
+- `Dialog` uses the native `<dialog>` element opened with `showModal()`: focus trapping, focus restore, background inerting, top-layer rendering and the `::backdrop` come from the platform (the `react-focus-on` dependency and the portal are gone; `aria-labelledby` is wired to the Container heading). Escape and backdrop clicks route through `onClose` gated by `closeOnEscape`/`closeOnClickOutside`.
+- `Popover` (and the disclosure-style consumers built on it — `Dropdown`, `Menu`, `MoreInfo`, the select dropdowns, floating `InputError`) uses the native Popover API (`popover="manual"`) + **CSS Anchor Positioning** (`anchor-name`/`position-anchor`/`position-area` + `position-try-fallbacks`), with a Portal fallback when the Popover API is unavailable. This path is for **HTML-element triggers**.
+- `Tooltip` is intentionally simpler and does **not** use the native Popover API: it renders a `Portal` positioned with `useFloatPlacement` (JS). This keeps the surface in the HTML namespace and uses `getBoundingClientRect`, so tooltips placed **inside `<svg>` (e.g. chart points)** work — the native Popover API is `HTMLElement`-only and CSS anchor positioning doesn't handle SVG anchors.
+
+**Removed dependency:** `react-focus-on` is dropped — the native `<dialog>` provides focus trapping/restore. (`useFloatPlacement` remains, used by `Tooltip`.)
+
+### Accessibility
+
+- **Form fields**: `InputContainer` now wires `<label htmlFor>` (`InputLabel` renders a real `<label>`), generated ids, `aria-describedby`→hint/error, `aria-invalid`, `aria-required`, and `role="alert"` on errors. Grouped controls (`RadioInput`, `Checklist`) get `role="radiogroup"`/`group"`.
+- **Roles added**: `Dialog` (`role="dialog"`+`aria-modal`+`aria-labelledby`), `Switch` (`role="switch"`+`aria-checked`), live regions on `Alert`/`Message`/`BlockLoading`/`Spinner`, `Pagination` (`<nav>`+`aria-current`), `Breadcrumbs` (`aria-current`), disclosures (`ExpandableContainer`/`Dropdown`/`MoreInfo`/`TruncatedList`: `aria-expanded`+`aria-controls`).
+- **Formatted value outputs** (`NumberDisplay`/`DateDisplay`/`BooleanDisplay`) render native `<data value>` / `<time dateTime>` (machine-readable + test hook — assert on `el.value`/`el.dateTime`, not the formatted text). When the visible text is abbreviated (e.g. `compact` "1.5M"), the full reading is exposed to screen readers via `role="img"`+`aria-label`.
+- Deferred to a follow-up (marked `// FIXME(a11y-tier2)`): full `SelectInputContainer` combobox roles, `Tabs` roving-tabindex arrow navigation, `Tooltip` keyboard trigger, `Menu` advanced keyboard nav.
+
+### Spec engine (internal mechanism — `spacing` props unchanged)
+
+- `useSpacingToken(options)` (from `@ifrc-go/ui/hooks`) → `getSpacingClassName(options)` (pure function, from `@ifrc-go/ui/utils`). Same options object, same className semantics, no more runtime `<style>` injection.
+- `getSpacingValue` / `getOpticallyCorrectedSpacingValue` remain in `@ifrc-go/ui/utils`.
+- New resolvers exported alongside: `getTextSizeClassName`, `getBackgroundColorClassName`, `getBorderRadiusClassName`, `getBoxShadowClassName`, plus the scale types `TextSizeType`, `BackgroundColorType`, `BorderRadiusType`, `BoxShadowType`.
+
+### Background tokens
+
+`BackgroundColorType` = `'foreground'` (white card surface) · `'background'` (page gray) · `'element'` (input-well gray). The boolean props below map onto these.
+
+### Button family
+
+| Old | New |
+| --- | --- |
+| `Button`/`ConfirmButton` `colorVariant` + `styleVariant` | single `variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'subtle'` (default `'secondary'`) |
+| `(primary, filled)` | `variant="primary"` |
+| `(primary, outline)` / lone `styleVariant="outline"` | `variant="secondary"` (the default — usually just delete the props) |
+| `(text, action)` / lone `styleVariant="action"` | `variant="tertiary"` |
+| `(primary, translucent)` | `variant="subtle"` |
+| any other pair (`text-on-dark`, `success`, `danger`, …) | compose `RawButton` + `ButtonLayout` with the two-axis pair (`ButtonLayout` keeps the full axis API) |
+| `Button` `layoutElementRef` | `elementRef` (refs the visual root) |
+| `IconButton` `round` | removed — icon buttons are always round |
+| `IconButton` `colorVariant`/`styleVariant` | removed — these were **silently ignored** before; delete them |
+| `DropdownMenu` `labelColorVariant`+`labelStyleVariant` | `labelVariant` (same mapping as Button) |
+
+`IconButton` defaults to `variant="tertiary"` (preserves the old transparent look). Flagged visual deltas: button padding is now spacing-token-driven and IconButton hover feedback comes from ButtonLayout — minor visual differences possible at dense call sites.
+
+### Status components
+
+- `Alert`: `type` → `variant` (same values). `withoutShadow` → `boxShadow="none"`.
+- `ProgressBar`: `colorVariant` → `variant`. The data-driven escape (`variant="custom"` + `color`) is unchanged.
+- `TopBanner`: `variant` is now optional (default `'information'`).
+- Behavior fixes shipped along the way: `Message` now renders `erroredDescription` when errored (previously rendered an empty block); `DefaultMessage` styles error states with the error variant.
+
+### Containers
+
+- `Container` / `Modal` / `ExpandableContainer` / `InputSection` (Props extend Container's): `withBackground` → `backgroundColor="foreground"` · `withDarkBackground` → `backgroundColor="background"` · `withShadow` → `boxShadow="md"` · `variant` → `styleVariant`. Corner radius now follows `backgroundColor`/`withBorder` automatically (override with the new `borderRadius` prop).
+- `ListView`: `withBackground` → `backgroundColor="foreground"` · `withDarkBackground` → `backgroundColor="background"`.
+- `Heading`: `variant` → `styleVariant`.
+
+### Inputs
+
+Everything built on `InputContainer` (`TextInput`, `NumberInput`, `DateInput`, `PasswordInput`, `TextArea`, select inputs, `RadioInput`, `Checklist`, `BooleanInput`, …):
+
+- `containerRef` → `elementRef` (root node, per the ref convention)
+- `variant` → `styleVariant` (`'form' | 'general' | 'transparent'`)
+- `withBackground`/`withDarkBackground` → `backgroundColor`
+- `TextArea`'s `inputElementRef` is now correctly typed `HTMLTextAreaElement`; `inputElementRef` props are now actually forwarded to the inner node (previously a silent no-op on several inputs).
+- `Checkbox`/`Switch`: `withBackground`/`withDarkBackground` → `backgroundColor`.
+- `SegmentInput`: background props removed entirely — the track styles itself.
+
+### Outputs and figures
+
+- New generic `RawOutput` component: the `valueType` discriminated union (`'boolean' | 'number' | 'date' | 'text'` or plain node) previously duplicated inside `TextOutput` and `KeyFigure`. Use it instead of hand-rolled switches.
+- `TextOutput`: `withBackground` → `backgroundColor="background"` (page gray — note this is the **inverse** of Container's mapping) · `withLightBackground` → `backgroundColor="foreground"` · `textSize` now accepts the full shared scale (old values unchanged).
+- `KeyFigure`: `size` → `textSize` (`'sm'`→`"2xl"`, `'md'`→default, `'lg'`→`"4xl"`); `valueOptions` object flattened into direct props.
+- `KeyFigureView` → **`KeyFigureCard`** (`KeyFigureViewProps` → `KeyFigureCardProps`); `withShadow` → `boxShadow="md"`; the never-rendered `children` prop is gone.
+- printable `TextOutput`: `variant` → `styleVariant` · `withBackground` → `backgroundColor="background"`.
+
+### File inputs
+
+- `RawFileInput` → **`FileInputButton`** for every existing call site (props 1:1, including the two-axis ButtonLayout styling props).
+- The new `RawFileInput` is a true raw primitive: hidden input + `children` as a custom trigger, no styling props.
+
+### Removed
+
+- `List` / `ListProps` — compose `ListView` + `RawList` + `DefaultMessage`.
+- `Tab`'s `active` prop — it was always overridden by the Tabs context.
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 1767db2e33..5e91c74ba3 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -35,7 +35,7 @@ function Example() {
         <Button
             name="button"
             onClick={handleButtonClick}
-            styleVariant="action"
+            variant="tertiary"
         >
             Button
         </Button>
@@ -70,6 +70,51 @@ All spacing uses a unified token scale, ensuring predictable rhythm and easy col
 Subtle optical adjustments compensate for line‑height inconsistencies (e.g., in ListView), producing visually balanced layouts.
 
 
+## Component Layers
+
+Every component belongs to one of three layers (see [CONTRIBUTING.md](./CONTRIBUTING.md) for the full rules):
+
+- **Raw** (`Raw*`) — unstyled behavioral primitives (`RawButton`, `RawInput`, `RawList`). No visual opinion, no spec props.
+- **Generic** — the small set that covers most designs through composition. `*Layout` components arrange slots *inside* another component's element (`ButtonLayout` inside `RawButton`); `*View` components are *standalone* generic blocks (`BlockView`, `InlineView`, `ListView`); plus building blocks like `Container`, `InputContainer`, `Heading`, and `RawOutput`. Generic components carry the token-spec props and expose two-axis variants (`colorVariant` + `styleVariant`).
+- **Specific** — consumer-facing components composed from the layers below (`Button`, `Alert`, `TextOutput`, `KeyFigureCard`). They expose a single curated `variant` and narrow spec scales to their design needs.
+
+Imports point downward only: specific components never import each other.
+
+## Token Specs
+
+Visual dimensions are token-valued props ("specs") resolved against the CSS-variable scales in `index.css` through static utility classes:
+
+| Spec | Prop | Values | Offset |
+| --- | --- | --- | --- |
+| Spacing | `spacing` | `none`, `5xs`–`5xl` | `spacingOffset` |
+| Text size | `textSize` | `2xs`–`4xl` | `textSizeOffset` |
+| Background | `backgroundColor` | `foreground`, `background`, `element` | — |
+| Border radius | `borderRadius` | `none`–`3xl`, `full` | `borderRadiusOffset` |
+| Shadow | `boxShadow` | `none`, `xs`–`2xl` | `boxShadowOffset` |
+
+Ordinal specs accept an **offset**: the resolved token shifts along the scale (clamped), so the same `spacing="md"` or `textSize="md"` can resolve one step larger or smaller inside a visually bigger or denser context — without inventing new tokens.
+
+## Accessibility
+
+The library is built **native-semantics-first**: components reach for the correct HTML element or ARIA role rather than re-creating behaviour on a `<div>`, so keyboard and screen-reader support largely come for free. See [CONTRIBUTING.md](./CONTRIBUTING.md#accessibility) for the full conventions; the highlights:
+
+- **Form fields** wire `label`↔control↔hint↔error once in `InputContainer` — real `<label htmlFor>`, `aria-describedby`, `aria-invalid`, and `role="alert"` on errors.
+- **Interactive widgets** follow the WAI-ARIA Authoring Practices pattern (dialog, tabs, combobox, switch, disclosure).
+- **Formatted outputs speak to three audiences at once** — the headline accessibility pattern:
+
+| Audience | Sees / hears / reads | Carrier |
+| --- | --- | --- |
+| Sighted | `1.5M` | visible text |
+| Screen reader | `1,500,000` | `role="img"` + `aria-label` |
+| Machine / test | `1500000` | native `<data value>` / `<time datetime>` |
+
+```tsx
+<data value="1500000" role="img" aria-label="1,500,000">1.5M</data>
+<time dateTime="2026-06-13" role="img" aria-label="13 June 2026">13 Jun</time>
+```
+
+The `role="img"` (and `aria-label`) appear **only when the visible text is an abbreviated, lossy form** of the value; full values render as a plain `<data>`/`<time>` that reads correctly on its own. Tests assert on the native `value`/`dateTime` attribute, never on the formatted text.
+
 ## UI Layout Concepts
 
 ### ListView
@@ -247,12 +292,12 @@ The spacing system provides a **shared vocabulary** paddings and gaps across all
 #### Principles
 
 - Tokens (`5xs` → `5xl`) define a modular scale.  
-- The `useSpacingToken()` hook resolves tokens to values.  
+- The `getSpacingClassName()` resolver maps tokens to static utility classes.  
 - Shared across ListView, BlockView, Inline*, and Container.  
 - Adjusts for **optical harmony** and **density presets** (Compact ↔ Comfortable).  
 - Scales subtly with breakpoints for comfort and consistency.
 
-`useSpacingToken` resolves semantic spacing tokens into usable CSS values for gaps, padding, or margins.
+`getSpacingClassName` (from `@ifrc-go/ui/utils`) resolves semantic spacing tokens into static classes applying gaps and padding; `getSpacingValue` returns the raw CSS value for the rare inline-style case.
 
 #### Design intent
 
diff --git a/packages/ui/eslint.config.ts b/packages/ui/eslint.config.ts
index 8797d45d8a..54ebfda57b 100644
--- a/packages/ui/eslint.config.ts
+++ b/packages/ui/eslint.config.ts
@@ -1,6 +1,7 @@
 import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
 import json from "@eslint/json";
+import jsdoc from 'eslint-plugin-jsdoc';
 import tseslint  from 'typescript-eslint';
 import process from 'process';
 import { Linter } from 'eslint';
@@ -64,10 +65,12 @@ const appConfigs = compat.config({
             {
                 devDependencies: [
                     '**/*.test.{ts,tsx}',
+                    '**/setupTests.ts',
                     'eslint.config.js',
                     'postcss.config.cjs',
                     'stylelint.config.cjs',
                     'vite.config.ts',
+                    'vitest.config.ts',
                 ],
                 optionalDependencies: false,
             },
@@ -142,6 +145,22 @@ const jsonConfig: Linter.Config = {
     },
 };
 
+// CONTRIBUTING.md: every exported component carries a JSDoc block. Scoped to
+// component entry files (not utils/hooks/types) and introduced as a warning to
+// ratchet — ~22 components are currently missing one; flip to 'error' once
+// backfilled.
+const jsdocConfig: Linter.Config = {
+    files: ['src/components/*/index.tsx'],
+    plugins: { jsdoc },
+    rules: {
+        'jsdoc/require-jsdoc': ['warn', {
+            publicOnly: true,
+            require: { FunctionDeclaration: true },
+            exemptEmptyFunctions: true,
+        }],
+    },
+};
+
 const config = tseslint.config(
     // ...tseslint.configs.recommended,
     {
@@ -152,6 +171,7 @@ const config = tseslint.config(
     ...appConfigs,
     otherConfig,
     jsonConfig,
+    jsdocConfig,
 );
 
 export default config;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c141bb3f0b..941d508496 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -22,7 +22,9 @@
         "lint:js": "eslint src",
         "lint:css": "stylelint \"./src/**/*.css\"",
         "lint": "pnpm lint:js && pnpm lint:css",
-        "lint:fix": "pnpm lint:js --fix && pnpm lint:css --fix"
+        "lint:fix": "pnpm lint:js --fix && pnpm lint:css --fix",
+        "test": "vitest run",
+        "test:watch": "vitest"
     },
     "files": [
         "dist/*"
@@ -57,7 +59,6 @@
         "@ifrc-go/icons": "^2.0.1",
         "@togglecorp/fujs": "^2.2.0",
         "jiti": "^2.6.1",
-        "react-focus-on": "^3.10.2",
         "sanitize-html": "^2.17.2"
     },
     "peerDependencies": {
@@ -69,6 +70,10 @@
         "@eslint/eslintrc": "^3.3.5",
         "@eslint/js": "^9.39.4",
         "@eslint/json": "^1.0.0",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/node": "^20.19.37",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
@@ -82,17 +87,18 @@
         "eslint-import-resolver-typescript": "^4.0.0",
         "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-import-newlines": "^1.4.1",
+        "eslint-plugin-jsdoc": "^63.0.4",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^7.0.0",
         "eslint-plugin-react-refresh": "^0.4.26",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "glob": "^13.0.0",
+        "happy-dom": "^20.0.0",
         "postcss": "^8.5.8",
         "postcss-nested": "^7.0.2",
         "postcss-normalize": "^13.0.1",
         "postcss-preset-env": "^11.0.0",
-        "react-focus-on": "^3.9.1",
         "sanitize-html": "^2.11.0",
         "stylelint": "^17.0.0",
         "stylelint-config-concentric": "^2.0.2",
@@ -104,6 +110,6 @@
         "vite-plugin-dts": "^4.0.0",
         "vite-plugin-lib-inject-css": "^2.0.0",
         "vite-tsconfig-paths": "^6.0.0",
-        "vitest": "^4.0.0"
+        "vitest": "^4.1.2"
     }
 }
diff --git a/packages/ui/src/components/Alert/index.tsx b/packages/ui/src/components/Alert/index.tsx
index 162f2191ef..a94440c557 100644
--- a/packages/ui/src/components/Alert/index.tsx
+++ b/packages/ui/src/components/Alert/index.tsx
@@ -8,11 +8,12 @@ import {
 } from '@ifrc-go/icons';
 import { _cs } from '@togglecorp/fujs';
 
-import Button from '#components/Button';
+import ButtonLayout from '#components/ButtonLayout';
 import Container from '#components/Container';
-import IconButton from '#components/IconButton';
+import RawButton from '#components/RawButton';
 import { AlertType } from '#contexts/alert';
 import useTranslation from '#hooks/useTranslation';
+import { BoxShadowType } from '#utils/style';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -20,17 +21,25 @@ import styles from './styles.module.css';
 export interface Props<N> {
     name: N;
     className?: string;
-    type?: AlertType;
+    /** Semantic status of the alert */
+    variant?: AlertType;
     title?: React.ReactNode;
     description?: React.ReactNode;
+    /** Hide the close button so the user cannot dismiss the alert */
     nonDismissable?: boolean;
     onCloseButtonClick?: (name: N) => void;
+    /** Technical error details, surfaced through a copy action */
     debugMessage?: string;
+    /**
+     * Use a variant-tinted light surface with variant-colored text
+     * instead of the default filled variant background
+     */
     withLightBackground?: boolean;
-    withoutShadow?: boolean;
+    /** Shadow spec for the alert surface */
+    boxShadow?: BoxShadowType;
 }
 
-const alertTypeToClassNameMap: {
+const alertVariantToClassNameMap: {
     [key in AlertType]: string;
 } = {
     success: styles.success,
@@ -48,18 +57,23 @@ const icon: {
     warning: <QuestionLineIcon className={styles.icon} />,
 };
 
+/**
+ * Alert notifies the user about the result of an action
+ * (typically rendered through AlertContainer).
+ * Specific layer: exposes a single semantic `variant` prop.
+ */
 function Alert<N extends string>(props: Props<N>) {
     const {
         name,
         className,
-        type = 'info',
+        variant = 'info',
         title,
         description,
         onCloseButtonClick,
         nonDismissable,
         debugMessage,
         withLightBackground,
-        withoutShadow,
+        boxShadow = 'md',
     } = props;
 
     const strings = useTranslation(i18n);
@@ -84,42 +98,59 @@ function Alert<N extends string>(props: Props<N>) {
 
     return (
         <Container
+            // NOTE: transient, assertive notification -> role="alert" (live region)
+            role="alert"
             className={_cs(
                 styles.alert,
-                alertTypeToClassNameMap[type],
+                alertVariantToClassNameMap[variant],
                 withLightBackground && styles.withLightBackground,
                 className,
             )}
-            headerIcons={icon[type]}
+            headerIcons={icon[variant]}
             heading={title}
             headingLevel={5}
             headerActions={!nonDismissable && (
-                <IconButton
+                // NOTE: text-on-dark is not part of the curated Button
+                // variants, so this composes RawButton + ButtonLayout directly
+                <RawButton
+                    className={styles.dismissButton}
                     name={undefined}
                     onClick={handleCloseButtonClick}
-                    colorVariant="text-on-dark"
                     title={strings.closeButtonTitle}
-                    ariaLabel={strings.closeButtonTitle}
+                    aria-label={strings.closeButtonTitle}
                 >
-                    <CloseLineIcon />
-                </IconButton>
+                    <ButtonLayout
+                        colorVariant="text-on-dark"
+                        styleVariant="transparent"
+                    >
+                        <CloseLineIcon className={styles.closeIcon} />
+                    </ButtonLayout>
+                </RawButton>
             )}
             withoutWrapInHeader
             withoutWrapInFooter
             footerActions={debugMessage && (
-                <Button
+                // NOTE: text-on-dark + translucent is not part of the curated
+                // Button variants, so this composes RawButton + ButtonLayout
+                // directly (spacingOffset mirrors the Button default)
+                <RawButton
+                    className={styles.copyDebugButton}
                     name={undefined}
                     onClick={handleCopyDebugMessageButtonClick}
-                    colorVariant="text-on-dark"
-                    styleVariant="translucent"
-                    textSize="sm"
-                    spacing="sm"
                 >
-                    {strings.alertCopyErrorDetails}
-                </Button>
+                    <ButtonLayout
+                        colorVariant="text-on-dark"
+                        styleVariant="translucent"
+                        textSize="sm"
+                        spacing="sm"
+                        spacingOffset={-3}
+                    >
+                        {strings.alertCopyErrorDetails}
+                    </ButtonLayout>
+                </RawButton>
             )}
             withPadding
-            withShadow={!withoutShadow}
+            boxShadow={boxShadow}
         >
             {description}
         </Container>
diff --git a/packages/ui/src/components/Alert/styles.module.css b/packages/ui/src/components/Alert/styles.module.css
index 95aa9974bd..cd89a2f2db 100644
--- a/packages/ui/src/components/Alert/styles.module.css
+++ b/packages/ui/src/components/Alert/styles.module.css
@@ -18,6 +18,11 @@
         font-size: var(--go-ui-font-size-2xl);
     }
 
+    .dismiss-button,
+    .copy-debug-button {
+        display: contents;
+    }
+
     &.info {
         --variant-color: var(--go-ui-color-gray-80);
         --text-color: var(--go-ui-color-text-on-dark);
diff --git a/packages/ui/src/components/AlertContainer/index.tsx b/packages/ui/src/components/AlertContainer/index.tsx
index 19e5c3593a..7fccae6318 100644
--- a/packages/ui/src/components/AlertContainer/index.tsx
+++ b/packages/ui/src/components/AlertContainer/index.tsx
@@ -74,7 +74,7 @@ function AlertContainer(props: Props) {
                         name={alert.name}
                         className={styles.alert}
                         nonDismissable={alert.nonDismissable}
-                        type={alert.variant}
+                        variant={alert.variant}
                         onCloseButtonClick={handleAlertCloseButtonClick}
                         debugMessage={alert.debugMessage}
                         title={alert.title}
diff --git a/packages/ui/src/components/BarChart/index.tsx b/packages/ui/src/components/BarChart/index.tsx
index ae1ed0fa12..7db0cbec2e 100644
--- a/packages/ui/src/components/BarChart/index.tsx
+++ b/packages/ui/src/components/BarChart/index.tsx
@@ -5,7 +5,7 @@ import {
     isNotDefined,
 } from '@togglecorp/fujs';
 
-import NumberOutput from '#components/NumberOutput';
+import NumberDisplay from '#components/NumberDisplay';
 import Tooltip from '#components/Tooltip';
 import {
     getPercentage,
@@ -27,6 +27,10 @@ export interface Props<D> {
     compactValue?: boolean;
 }
 
+/**
+ * BarChart renders a sorted horizontal bar visualization of the data.
+ * Specific (data-viz) layer.
+ */
 function BarChart<D>(props: Props<D>) {
     const {
         className,
@@ -98,7 +102,7 @@ function BarChart<D>(props: Props<D>) {
                             }}
                         />
                     </div>
-                    <NumberOutput
+                    <NumberDisplay
                         className={styles.value}
                         value={datum.value}
                         compact={compactValue}
diff --git a/packages/ui/src/components/BlockLoading/index.tsx b/packages/ui/src/components/BlockLoading/index.tsx
index 3b1598c407..cb299ed4e2 100644
--- a/packages/ui/src/components/BlockLoading/index.tsx
+++ b/packages/ui/src/components/BlockLoading/index.tsx
@@ -7,10 +7,17 @@ import styles from './styles.module.css';
 export interface Props {
     className?: string;
     message?: React.ReactNode;
+    /** Use reduced sizing for constrained contexts */
     compact?: boolean;
+    /** Drop the default dashed border around the loading area */
     withoutBorder?: boolean;
 }
 
+/**
+ * BlockLoading is a block-level loading indicator that reserves space
+ * for content being fetched.
+ * Specific layer: no variants.
+ */
 function BlockLoading(props: Props) {
     const {
         className,
@@ -21,6 +28,9 @@ function BlockLoading(props: Props) {
 
     return (
         <div
+            // NOTE: loading status -> polite live region marked busy
+            role="status"
+            aria-busy
             className={
                 _cs(
                     styles.blockLoading,
diff --git a/packages/ui/src/components/BlockView/index.tsx b/packages/ui/src/components/BlockView/index.tsx
index 6052ccd481..19ed7a4233 100644
--- a/packages/ui/src/components/BlockView/index.tsx
+++ b/packages/ui/src/components/BlockView/index.tsx
@@ -8,10 +8,10 @@ import {
     isDefined,
 } from '@togglecorp/fujs';
 
-import useSpacingToken from '#hooks/useSpacingToken';
 import {
     fullSpacings,
     gapSpacings,
+    getSpacingClassName,
     SpacingMode,
     SpacingType,
 } from '#utils/style';
@@ -19,6 +19,7 @@ import {
 import styles from './styles.module.css';
 
 export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'ref' | 'before' | 'after'> {
+    /** Ref to the root DOM node */
     elementRef?: RefObject<HTMLDivElement | null>;
     className?: string;
 
@@ -39,6 +40,10 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'ref' | 'before'
     withOverflow?: boolean;
 }
 
+/**
+ * Vertical before/children/after stack with spec-driven spacing and
+ * optional separators (generic layer).
+ */
 function BlockView(props: Props) {
     const {
         className,
@@ -68,14 +73,14 @@ function BlockView(props: Props) {
         return fullSpacings;
     }, [withPadding]);
 
-    const spacingClassName = useSpacingToken({
+    const spacingClassName = getSpacingClassName({
         spacing,
         modes: spacingModes,
         offset: spacingOffset,
         withoutOpticalCorrection: withoutSpacingOpticalCorrection,
     });
 
-    const innerSpacingClassName = useSpacingToken({
+    const innerSpacingClassName = getSpacingClassName({
         spacing,
         modes: gapSpacings,
         offset: spacingOffset,
diff --git a/packages/ui/src/components/BooleanOutput/i18n.json b/packages/ui/src/components/BooleanDisplay/i18n.json
similarity index 100%
rename from packages/ui/src/components/BooleanOutput/i18n.json
rename to packages/ui/src/components/BooleanDisplay/i18n.json
diff --git a/packages/ui/src/components/BooleanOutput/index.tsx b/packages/ui/src/components/BooleanDisplay/index.tsx
similarity index 51%
rename from packages/ui/src/components/BooleanOutput/index.tsx
rename to packages/ui/src/components/BooleanDisplay/index.tsx
index f84665c3c8..3a0a1f2908 100644
--- a/packages/ui/src/components/BooleanOutput/index.tsx
+++ b/packages/ui/src/components/BooleanDisplay/index.tsx
@@ -1,4 +1,7 @@
-import { _cs } from '@togglecorp/fujs';
+import {
+    _cs,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import useTranslation from '#hooks/useTranslation';
 
@@ -11,7 +14,15 @@ export interface Props {
     invalidText?: React.ReactNode;
 }
 
-function BooleanOutput(props: Props) {
+/**
+ * Renders a boolean as localised Yes/No text (raw layer).
+ *
+ * The root is a native `<data value>` carrying the raw boolean as the
+ * machine-readable / test contract. The visible Yes/No text is not
+ * lossy, so no `role="img"` / `aria-label` is added — the text reads
+ * correctly on its own.
+ */
+function BooleanDisplay(props: Props) {
     const {
         className,
         invalidText,
@@ -30,10 +41,13 @@ function BooleanOutput(props: Props) {
     }
 
     return (
-        <div className={_cs(styles.booleanOutput, className)}>
+        <data
+            className={_cs(styles.booleanDisplay, className)}
+            value={isNotDefined(value) ? '' : String(value)}
+        >
             {content}
-        </div>
+        </data>
     );
 }
 
-export default BooleanOutput;
+export default BooleanDisplay;
diff --git a/packages/ui/src/components/BooleanDisplay/styles.module.css b/packages/ui/src/components/BooleanDisplay/styles.module.css
new file mode 100644
index 0000000000..8f94dcbb17
--- /dev/null
+++ b/packages/ui/src/components/BooleanDisplay/styles.module.css
@@ -0,0 +1,4 @@
+.boolean-display {
+    display: block;
+    color: inherit;
+}
diff --git a/packages/ui/src/components/BooleanInput/index.tsx b/packages/ui/src/components/BooleanInput/index.tsx
index 2a0b28a7be..53021e9597 100644
--- a/packages/ui/src/components/BooleanInput/index.tsx
+++ b/packages/ui/src/components/BooleanInput/index.tsx
@@ -27,6 +27,9 @@ RadioInputProps<
     onChange: (value: boolean | undefined, name: NAME) => void;
 })
 
+/**
+ * Yes/No RadioInput over a boolean value (specific layer).
+ */
 function BooleanInput<const NAME>(props: BooleanInputProps<NAME>) {
     const strings = useTranslation(i18n);
 
diff --git a/packages/ui/src/components/BooleanOutput/styles.module.css b/packages/ui/src/components/BooleanOutput/styles.module.css
deleted file mode 100644
index f01730fcc6..0000000000
--- a/packages/ui/src/components/BooleanOutput/styles.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.boolean-output {
-    color: inherit;
-}
diff --git a/packages/ui/src/components/Chip/i18n.json b/packages/ui/src/components/Breadcrumbs/i18n.json
similarity index 55%
rename from packages/ui/src/components/Chip/i18n.json
rename to packages/ui/src/components/Breadcrumbs/i18n.json
index f25c590899..50a67294d6 100644
--- a/packages/ui/src/components/Chip/i18n.json
+++ b/packages/ui/src/components/Breadcrumbs/i18n.json
@@ -1,6 +1,6 @@
 {
     "namespace": "common",
     "strings": {
-        "deleteButtonLabel": "Close"
+        "breadcrumbNavLabel": "Breadcrumb"
     }
 }
diff --git a/packages/ui/src/components/Breadcrumbs/index.tsx b/packages/ui/src/components/Breadcrumbs/index.tsx
index cbba6d48bd..d3818451d4 100644
--- a/packages/ui/src/components/Breadcrumbs/index.tsx
+++ b/packages/ui/src/components/Breadcrumbs/index.tsx
@@ -2,6 +2,9 @@ import { Children } from 'react';
 import { ChevronRightLineIcon } from '@ifrc-go/icons';
 import { _cs } from '@togglecorp/fujs';
 
+import useTranslation from '#hooks/useTranslation';
+
+import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 export interface BreadcrumbsProps {
@@ -11,6 +14,11 @@ export interface BreadcrumbsProps {
     children: React.ReactNode;
 }
 
+/**
+ * Breadcrumbs renders a `<nav>` trail of crumbs separated by a divider.
+ * Specific layer: the last crumb is marked `aria-current="page"` and the
+ * separators are `aria-hidden`.
+ */
 function Breadcrumbs(props: BreadcrumbsProps) {
     const {
         className,
@@ -19,12 +27,16 @@ function Breadcrumbs(props: BreadcrumbsProps) {
         itemClassName,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     const items = Children.toArray(children).reduce<React.ReactNode[]>(
         (acc, child, index, array) => {
+            const isLast = index === array.length - 1;
             const item = (
                 <div
                     key={`breadcrumb-${index}`} // eslint-disable-line react/no-array-index-key
                     className={_cs(styles.item, itemClassName)}
+                    aria-current={isLast ? 'page' : undefined}
                 >
                     {child}
                 </div>
@@ -32,11 +44,12 @@ function Breadcrumbs(props: BreadcrumbsProps) {
 
             acc.push(item);
 
-            if (index !== array.length - 1) {
+            if (!isLast) {
                 acc.push(
                     <span
                         key={`separator-${index}`} // eslint-disable-line react/no-array-index-key
                         className={styles.separator}
+                        aria-hidden
                     >
                         {separator}
                     </span>,
@@ -51,7 +64,7 @@ function Breadcrumbs(props: BreadcrumbsProps) {
     return (
         <nav
             className={_cs(styles.breadcrumbs, className)}
-            aria-label="breadcrumb"
+            aria-label={strings.breadcrumbNavLabel}
         >
             {items}
         </nav>
diff --git a/packages/ui/src/components/Breadcrumbs/styles.module.css b/packages/ui/src/components/Breadcrumbs/styles.module.css
index d4cd002ba9..a90057e038 100644
--- a/packages/ui/src/components/Breadcrumbs/styles.module.css
+++ b/packages/ui/src/components/Breadcrumbs/styles.module.css
@@ -12,6 +12,7 @@
 
         &:last-child {
             color: var(--go-ui-color-black);
+            font-weight: var(--go-ui-font-weight-semibold);
         }
     }
 
diff --git a/packages/ui/src/components/Button/index.test.tsx b/packages/ui/src/components/Button/index.test.tsx
new file mode 100644
index 0000000000..66bcda5d13
--- /dev/null
+++ b/packages/ui/src/components/Button/index.test.tsx
@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+    describe,
+    expect,
+    it,
+    vi,
+} from 'vitest';
+
+import Button from './index';
+
+describe('Button', () => {
+    it('is queryable by role + accessible name and fires onClick', async () => {
+        const handleClick = vi.fn();
+        const { getByRole } = render(
+            <Button name="save" onClick={handleClick}>
+                Save
+            </Button>,
+        );
+
+        const button = getByRole('button', { name: 'Save' });
+        expect(button).toBeEnabled();
+
+        await userEvent.click(button);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('reflects the disabled state', () => {
+        const { getByRole } = render(
+            <Button name="save" disabled>
+                Save
+            </Button>,
+        );
+
+        expect(getByRole('button', { name: 'Save' })).toBeDisabled();
+    });
+});
diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx
index ca15467719..369f7bfd70 100644
--- a/packages/ui/src/components/Button/index.tsx
+++ b/packages/ui/src/components/Button/index.tsx
@@ -1,36 +1,61 @@
-import { useMemo } from 'react';
-import { isDefined } from '@togglecorp/fujs';
+import { _cs } from '@togglecorp/fujs';
 
-import ButtonLayout, {
-    ButtonColorVariant,
-    Props as ButtonLayoutProps,
-} from '#components/ButtonLayout';
+import ButtonLayout, { Props as ButtonLayoutProps } from '#components/ButtonLayout';
 import RawButton, { Props as RawButtonProps } from '#components/RawButton';
 
 import styles from './styles.module.css';
 
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'subtle';
+
+const variantToLayoutVariant: Record<
+    ButtonVariant,
+    Required<Pick<ButtonLayoutProps, 'colorVariant' | 'styleVariant'>>
+> = {
+    primary: { colorVariant: 'primary', styleVariant: 'filled' },
+    secondary: { colorVariant: 'primary', styleVariant: 'outline' },
+    tertiary: { colorVariant: 'text', styleVariant: 'action' },
+    subtle: { colorVariant: 'primary', styleVariant: 'translucent' },
+};
+
 type PickedButtonLayoutProps =
-    | 'styleVariant'
-    | 'colorVariant'
+    | 'after'
+    | 'before'
+    | 'children'
+    | 'elementRef'
     | 'spacing'
     | 'spacingOffset'
-    | 'withoutPadding'
-    | 'withFullWidth'
-    | 'children'
-    | 'before'
     | 'textSize'
-    | 'after'
+    | 'withFullWidth'
+    | 'withoutPadding';
 
-export type Props<NAME> = Omit<RawButtonProps<NAME>, 'elementRef' | 'children'>
+export type Props<NAME> = Omit<RawButtonProps<NAME>, 'children' | 'elementRef'>
 & Pick<ButtonLayoutProps, PickedButtonLayoutProps>
 & {
-    layoutElementRef?: ButtonLayoutProps['elementRef'];
+    /**
+     * Curated visual variant, mapped internally to the ButtonLayout
+     * colorVariant + styleVariant axes:
+     * primary=(primary, filled), secondary=(primary, outline),
+     * tertiary=(text, action), subtle=(primary, translucent)
+     */
+    variant?: ButtonVariant;
 };
 
+/**
+ * Standard button (specific layer).
+ *
+ * Composes RawButton (behavior) with ButtonLayout (visuals) and exposes
+ * a single curated `variant` prop instead of ButtonLayout's two-axis
+ * colorVariant + styleVariant API. For axis pairs outside the curated
+ * set, compose RawButton + ButtonLayout directly.
+ *
+ * Note on `elementRef`: it references the root element rendered by
+ * ButtonLayout, which is the visual root of the component (the native
+ * button element wrapping it has `display: contents` and generates
+ * no box).
+ */
 function Button<const NAME>(props: Props<NAME>) {
     const {
-        colorVariant: colorVariantFromProps,
-        styleVariant = 'outline',
+        variant = 'secondary',
         spacing,
         spacingOffset = -3,
         withoutPadding,
@@ -39,7 +64,7 @@ function Button<const NAME>(props: Props<NAME>) {
         after,
         textSize,
 
-        layoutElementRef,
+        elementRef,
 
         name,
         onClick,
@@ -52,23 +77,16 @@ function Button<const NAME>(props: Props<NAME>) {
         ...rawButtonProps
     } = props;
 
-    const colorVariant = useMemo<ButtonColorVariant>(() => {
-        if (isDefined(colorVariantFromProps)) {
-            return colorVariantFromProps;
-        }
-
-        if (styleVariant === 'action' || styleVariant === 'transparent') {
-            return 'text';
-        }
-
-        return 'primary';
-    }, [styleVariant, colorVariantFromProps]);
+    const {
+        colorVariant,
+        styleVariant,
+    } = variantToLayoutVariant[variant];
 
     return (
         <RawButton
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rawButtonProps}
-            className={styles.button}
+            className={_cs(styles.button, withFullWidth && styles.fullWidth)}
             name={name}
             onClick={onClick}
             type={type}
@@ -76,7 +94,7 @@ function Button<const NAME>(props: Props<NAME>) {
         >
             <ButtonLayout
                 className={className}
-                elementRef={layoutElementRef}
+                elementRef={elementRef}
                 colorVariant={colorVariant}
                 styleVariant={styleVariant}
                 spacing={spacing}
diff --git a/packages/ui/src/components/Button/styles.module.css b/packages/ui/src/components/Button/styles.module.css
index 6a29de287f..02cfdc83bc 100644
--- a/packages/ui/src/components/Button/styles.module.css
+++ b/packages/ui/src/components/Button/styles.module.css
@@ -1,3 +1,24 @@
+/*
+ * A real (focusable) box rather than `display: contents`: a display:contents
+ * <button> is NOT keyboard-focusable in Firefox (no focus, no focus ring, no
+ * keyboard activation). inline-flex hugs the ButtonLayout child so the visual
+ * result is unchanged, while keeping the native button focusable.
+ */
 .button {
-    display: contents;
+    display: inline-flex;
+
+    /*
+     * RawButton sets `position: relative`, which was inert under the old
+     * `display: contents` but — now that this wrapper is a real box — would
+     * make it the containing block for a ButtonLayout that a consumer
+     * positions via `className` (e.g. a map overlay button placed with
+     * `position: absolute`). Stay layout-transparent so such positioning keeps
+     * resolving against the consumer's own positioned ancestor, as it did
+     * before the focusability fix.
+     */
+    position: static;
+}
+
+.button.full-width {
+    width: 100%;
 }
diff --git a/packages/ui/src/components/ButtonLayout/index.tsx b/packages/ui/src/components/ButtonLayout/index.tsx
index 49b1a01f41..b9366dbf78 100644
--- a/packages/ui/src/components/ButtonLayout/index.tsx
+++ b/packages/ui/src/components/ButtonLayout/index.tsx
@@ -1,15 +1,16 @@
-import {
-    _cs,
-    isDefined,
-} from '@togglecorp/fujs';
+import { _cs } from '@togglecorp/fujs';
 
 import InlineLayout, { type Props as InlineLayoutProps } from '#components/InlineLayout';
+import {
+    getTextSizeClassName,
+    type TextSizeType,
+} from '#utils/style';
 
 import styles from './styles.module.css';
 
 export type ButtonColorVariant = 'text' | 'text-on-dark' | 'primary' | 'secondary' | 'success' | 'danger';
 export type ButtonStyleVariant = 'outline' | 'filled' | 'transparent' | 'action' | 'translucent';
-export type ButtonTextSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonTextSize = Extract<TextSizeType, 'xs' | 'sm' | 'md' | 'lg'>;
 
 const colorVariantToClassName: Record<ButtonColorVariant, string> = {
     text: styles.colorVariantText,
@@ -28,24 +29,31 @@ const styleVariantToClassName: Record<ButtonStyleVariant, string> = {
     action: styles.styleVariantAction,
 };
 
-const textSizeToClassName: Record<ButtonTextSize, string> = {
-    xs: styles.textSizeExtraSmall,
-    sm: styles.textSizeSmall,
-    md: styles.textSizeMedium,
-    lg: styles.textSizeLarge,
-};
-
 export interface Props extends Omit<InlineLayoutProps, 'withPadding'> {
     className?: string;
     children?: React.ReactNode;
+    /** Color axis: which semantic color drives outline/background/text */
     colorVariant?: ButtonColorVariant;
+    /** Style axis: how the color is applied (filled, outline, etc.) */
     styleVariant?: ButtonStyleVariant;
+    /** Removes the default inner padding (padding is on by default) */
     withoutPadding?: boolean;
     disabled?: boolean;
+    /** Stretches the layout to fill the parent's width */
     withFullWidth?: boolean;
+    /** Font size of the button content, narrowed from the spec text-size scale */
     textSize?: ButtonTextSize;
 }
 
+/**
+ * Generic layout for button-like elements (generic layer).
+ *
+ * Renders only the visuals (two-axis colorVariant + styleVariant,
+ * spacing, before/after slots) without any button behavior; compose it
+ * with RawButton or other interactive primitives. Consumer-facing
+ * components (Button, IconButton, ConfirmButton) expose a single curated
+ * `variant` prop that maps to these two axes internally.
+ */
 function ButtonLayout(props: Props) {
     const {
         colorVariant = 'secondary',
@@ -70,7 +78,7 @@ function ButtonLayout(props: Props) {
                 styleVariantToClassName[styleVariant],
                 disabled && styles.disabled,
                 withFullWidth && styles.withFullWidth,
-                isDefined(textSize) && textSizeToClassName[textSize],
+                getTextSizeClassName(textSize),
                 readOnly && styles.readOnly,
                 className,
             )}
diff --git a/packages/ui/src/components/ButtonLayout/styles.module.css b/packages/ui/src/components/ButtonLayout/styles.module.css
index 0105cf622b..a13f123844 100644
--- a/packages/ui/src/components/ButtonLayout/styles.module.css
+++ b/packages/ui/src/components/ButtonLayout/styles.module.css
@@ -77,22 +77,6 @@
         padding: 0;
     }
 
-    &.text-size-extra-small {
-        font-size: var(--go-ui-font-size-xs);
-    }
-
-    &.text-size-small {
-        font-size: var(--go-ui-font-size-sm);
-    }
-
-    &.text-size-medium {
-        font-size: var(--go-ui-font-size-md);
-    }
-
-    &.text-size-large {
-        font-size: var(--go-ui-font-size-lg);
-    }
-
     &.disabled {
         opacity: var(--go-ui-opacity-disabled-element);
     }
@@ -119,7 +103,7 @@
         pointer-events: none;
     }
 
-    &:not(.disabled):not(.readOnly) {
+    &:not(.disabled):not(.read-only) {
         cursor: pointer;
 
         &:hover {
@@ -157,3 +141,4 @@
         }
     }
 }
+
diff --git a/packages/ui/src/components/TextBadge/index.tsx b/packages/ui/src/components/CharacterCount/index.tsx
similarity index 53%
rename from packages/ui/src/components/TextBadge/index.tsx
rename to packages/ui/src/components/CharacterCount/index.tsx
index 4310f7f9b0..a1fa38b981 100644
--- a/packages/ui/src/components/TextBadge/index.tsx
+++ b/packages/ui/src/components/CharacterCount/index.tsx
@@ -4,11 +4,17 @@ import Description from '#components/Description';
 import InlineLayout from '#components/InlineLayout';
 
 export interface Props {
+    /** Maximum allowed character count; nothing renders when undefined */
     maxLength?: number;
+    /** Current character count */
     length?: number;
 }
 
-function TextBadge(props: Props) {
+/**
+ * CharacterCount shows a "current / max" character counter for text inputs.
+ * Specific layer: no variants.
+ */
+function CharacterCount(props: Props) {
     const { maxLength, length = 0 } = props;
 
     if (isNotDefined(maxLength)) {
@@ -18,6 +24,9 @@ function TextBadge(props: Props) {
     return (
         <InlineLayout
             after={(
+                // FIXME(a11y-tier2): wrap the count in an aria-live="polite"
+                // region so the remaining-characters update is announced as
+                // the user types.
                 <Description withLightText textSize="sm">
                     {`${length} / ${maxLength}`}
                 </Description>
@@ -26,4 +35,4 @@ function TextBadge(props: Props) {
     );
 }
 
-export default TextBadge;
+export default CharacterCount;
diff --git a/packages/ui/src/components/Checkbox/Checkmark/index.tsx b/packages/ui/src/components/Checkbox/Checkmark/index.tsx
index 884925fbcb..42562be847 100644
--- a/packages/ui/src/components/Checkbox/Checkmark/index.tsx
+++ b/packages/ui/src/components/Checkbox/Checkmark/index.tsx
@@ -1,7 +1,7 @@
 import {
     CheckboxBlankLineIcon,
-    CheckboxIndeterminateLineIcon,
-    CheckboxLineIcon,
+    CheckboxFillIcon,
+    CheckboxIndeterminateFillIcon,
 } from '@ifrc-go/icons';
 
 export interface CheckmarkProps {
@@ -20,12 +20,12 @@ function Checkmark(props: CheckmarkProps) {
     return (
         <>
             {indeterminate && (
-                <CheckboxIndeterminateLineIcon
+                <CheckboxIndeterminateFillIcon
                     className={className}
                 />
             )}
             {value && !indeterminate && (
-                <CheckboxLineIcon
+                <CheckboxFillIcon
                     className={className}
                 />
             )}
diff --git a/packages/ui/src/components/Checkbox/index.test.tsx b/packages/ui/src/components/Checkbox/index.test.tsx
new file mode 100644
index 0000000000..5bd425c09e
--- /dev/null
+++ b/packages/ui/src/components/Checkbox/index.test.tsx
@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+
+import Checkbox from './index';
+
+describe('Checkbox', () => {
+    it('reflects the indeterminate state on the native input and aria-checked', () => {
+        const { getByRole } = render(
+            <Checkbox
+                name="accept"
+                label="Accept"
+                value={false}
+                onChange={() => undefined}
+                indeterminate
+            />,
+        );
+
+        const input = getByRole('checkbox') as HTMLInputElement;
+        expect(input.indeterminate).toBe(true);
+        expect(input).toHaveAttribute('aria-checked', 'mixed');
+    });
+});
diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx
index acc9f2110b..a6f6c3801d 100644
--- a/packages/ui/src/components/Checkbox/index.tsx
+++ b/packages/ui/src/components/Checkbox/index.tsx
@@ -1,7 +1,19 @@
-import { useCallback } from 'react';
-import { _cs } from '@togglecorp/fujs';
+import {
+    useCallback,
+    useEffect,
+    useRef,
+} from 'react';
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
+
+import InputError from '#components/InputError';
+import {
+    BackgroundColorType,
+    getBackgroundColorClassName,
+} from '#utils/style';
 
-import InputError from '../InputError';
 import DefaultCheckmark, { CheckmarkProps } from './Checkmark';
 
 import styles from './styles.module.css';
@@ -25,10 +37,25 @@ export interface Props<NAME> {
     tooltip?: string;
     value: boolean | undefined | null;
     description?: React.ReactNode;
-    withBackground?: boolean;
-    withDarkBackground?: boolean;
+    /** Surface color token; setting it also adds padding and rounded corners */
+    backgroundColor?: BackgroundColorType;
+    /**
+     * ARIA role for the control input. Switch passes `'switch'` so it is
+     * announced as a switch rather than a checkbox.
+     */
+    role?: React.AriaRole;
+    /**
+     * Explicit `aria-checked` for the control. Only needed when `role`
+     * overrides the native checkbox semantics (e.g. Switch); otherwise
+     * the native `checked` attribute conveys the state.
+     */
+    'aria-checked'?: boolean | 'mixed';
 }
 
+/**
+ * Checkbox input with label, description and optional custom checkmark
+ * (specific layer).
+ */
 function Checkbox<const NAME>(props: Props<NAME>) {
     const {
         className: classNameFromProps,
@@ -48,8 +75,9 @@ function Checkbox<const NAME>(props: Props<NAME>) {
         tooltip,
         value,
         description,
-        withBackground,
-        withDarkBackground,
+        backgroundColor,
+        role,
+        'aria-checked': ariaChecked,
         ...otherProps
     } = props;
 
@@ -66,12 +94,23 @@ function Checkbox<const NAME>(props: Props<NAME>) {
 
     const checked = invertedLogic ? !value : value;
 
+    const inputRef = useRef<HTMLInputElement>(null);
+    // `indeterminate` is a DOM property, not an attribute, so React can't set
+    // it declaratively — apply it imperatively (and re-apply on checked change,
+    // since toggling `checked` clears the indeterminate flag).
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = !!indeterminate;
+        }
+    }, [indeterminate, checked]);
+
     const className = _cs(
         styles.checkbox,
         classNameFromProps,
         !indeterminate && checked && styles.checked,
-        withBackground && styles.withBackground,
-        withDarkBackground && styles.withDarkBackground,
+        indeterminate && styles.indeterminate,
+        getBackgroundColorClassName(backgroundColor),
+        isDefined(backgroundColor) && styles.withBackgroundColor,
         disabled && styles.disabled,
         readOnly && styles.readOnly,
     );
@@ -83,9 +122,12 @@ function Checkbox<const NAME>(props: Props<NAME>) {
         >
             <div className={_cs(styles.checkmarkContainer, checkmarkContainerClassName)}>
                 <input
+                    ref={inputRef}
                     onChange={handleChange}
                     className={_cs(styles.input, inputClassName)}
                     type="checkbox"
+                    role={role}
+                    aria-checked={ariaChecked ?? (indeterminate ? 'mixed' : undefined)}
                     checked={checked ?? false}
                     disabled={disabled || readOnly}
                     readOnly={readOnly}
diff --git a/packages/ui/src/components/Checkbox/styles.module.css b/packages/ui/src/components/Checkbox/styles.module.css
index b7a5e4668a..95b14bf66f 100644
--- a/packages/ui/src/components/Checkbox/styles.module.css
+++ b/packages/ui/src/components/Checkbox/styles.module.css
@@ -4,15 +4,9 @@
     cursor: pointer;
     gap: var(--go-ui-spacing-3xs);
 
-    &.with-background {
+    /* background-color itself comes from the spec utility class */
+    &.with-background-color {
         border-radius: var(--go-ui-border-radius-md);
-        background-color: var(--go-ui-color-foreground);
-        padding: var(--go-ui-spacing-sm);
-    }
-
-    &.with-dark-background {
-        border-radius: var(--go-ui-border-radius-md);
-        background-color: var(--go-ui-color-background);
         padding: var(--go-ui-spacing-sm);
     }
 
@@ -55,6 +49,12 @@
         }
     }
 
+    &.indeterminate {
+        .checkmark {
+            color: var(--go-ui-color-primary-red);
+        }
+    }
+
     &:focus,
     &:hover {
         .checkmark {
diff --git a/packages/ui/src/components/Checklist/index.tsx b/packages/ui/src/components/Checklist/index.tsx
index 5203d09836..97f86c1241 100644
--- a/packages/ui/src/components/Checklist/index.tsx
+++ b/packages/ui/src/components/Checklist/index.tsx
@@ -2,9 +2,11 @@ import {
     type ComponentType,
     type ReactNode,
     useCallback,
+    useId,
     useMemo,
 } from 'react';
 import {
+    isDefined,
     listToMap,
     OptionKey,
 } from '@togglecorp/fujs';
@@ -14,7 +16,10 @@ import InputContainer from '#components/InputContainer';
 import ListView from '#components/ListView';
 import RawList, { type ListKey } from '#components/RawList';
 import { getHighlightMode } from '#utils/common';
-import { SpacingType } from '#utils/style';
+import {
+    BackgroundColorType,
+    SpacingType,
+} from '#utils/style';
 
 export interface Props<
     KEY extends ListKey,
@@ -41,8 +46,8 @@ export interface Props<
     checkListLayoutMinGridColumnSize?: string;
     spacing?: SpacingType;
     withPadding?: boolean;
-    withBackground?: boolean;
-    withDarkBackground?: boolean;
+    /** Surface color token for the input container root */
+    backgroundColor?: BackgroundColorType;
     renderer?: ComponentType<CheckboxProps<KEY>>
     withoutOpticalSpacingCorrection?: boolean;
 
@@ -52,6 +57,10 @@ export interface Props<
     required?: boolean;
 }
 
+/**
+ * Multi-select checkbox list driven by options and selectors
+ * (specific layer).
+ */
 function Checklist<
     KEY extends ListKey,
     const NAME,
@@ -78,8 +87,7 @@ function Checklist<
         checkListLayoutMinGridColumnSize,
         spacing,
         withPadding,
-        withBackground,
-        withDarkBackground,
+        backgroundColor,
 
         prevValue,
         withDiffView,
@@ -89,6 +97,10 @@ function Checklist<
         withoutOpticalSpacingCorrection,
     } = props;
 
+    const generatedId = useId();
+    const errorId = isDefined(error) ? `${generatedId}-error` : undefined;
+    const hintId = isDefined(hint) ? `${generatedId}-hint` : undefined;
+
     const highlightMode = useMemo(
         () => getHighlightMode(value, prevValue, withDiffView),
         [value, prevValue, withDiffView],
@@ -150,9 +162,11 @@ function Checklist<
 
     return (
         <InputContainer
+            role="group"
+            hintId={hintId}
+            errorId={errorId}
             className={className}
-            withBackground={withBackground}
-            withDarkBackground={withDarkBackground}
+            backgroundColor={backgroundColor}
             withPadding={withPadding}
             disabled={disabled}
             required={required}
@@ -163,7 +177,7 @@ function Checklist<
             prevValue={prevValueDisplay}
             withPrevValue={withPrevValue}
             errorOnTooltip={errorOnTooltip}
-            variant="transparent"
+            styleVariant="transparent"
             withoutInputSectionPadding
             input={(
                 <>
diff --git a/packages/ui/src/components/Chip/index.tsx b/packages/ui/src/components/Chip/index.tsx
deleted file mode 100644
index 6365b00638..0000000000
--- a/packages/ui/src/components/Chip/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useCallback } from 'react';
-import { CloseFillIcon } from '@ifrc-go/icons';
-import {
-    _cs,
-    isDefined,
-    isNotDefined,
-} from '@togglecorp/fujs';
-
-import IconButton from '#components/IconButton';
-import useTranslation from '#hooks/useTranslation';
-
-import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-export type ChipVariant = 'primary' | 'secondary' | 'tertiary';
-
-const chipVariantToClassNameMap: Record<ChipVariant, string> = {
-    primary: styles.primary,
-    secondary: styles.secondary,
-    tertiary: styles.tertiary,
-};
-export interface Props<N> {
-    className?: string;
-    name: N;
-    label: React.ReactNode;
-    variant?: ChipVariant;
-    onDelete?: (name: N, e: React.MouseEvent<HTMLButtonElement>) => void;
-}
-
-function Chip<const N>(props: Props<N>) {
-    const {
-        className,
-        name,
-        label,
-        variant = 'primary',
-        onDelete,
-    } = props;
-
-    const strings = useTranslation(i18n);
-
-    const handleDeleteButtonClick = useCallback((n: N, e: React.MouseEvent<HTMLButtonElement>) => {
-        if (onDelete) {
-            onDelete(n, e);
-        }
-    }, [onDelete]);
-
-    return (
-        <div className={_cs(
-            styles.chip,
-            chipVariantToClassNameMap[variant],
-            isNotDefined(onDelete) && styles.noDeleteIcon,
-            className,
-        )}
-        >
-            <span>
-                {label}
-            </span>
-            {isDefined(onDelete) && (
-                <IconButton
-                    className={styles.closeIcon}
-                    spacing="none"
-                    name={name}
-                    title={strings.deleteButtonLabel}
-                    ariaLabel={strings.deleteButtonLabel}
-                    onClick={handleDeleteButtonClick}
-                    variant={variant}
-                >
-                    <CloseFillIcon />
-                </IconButton>
-            )}
-        </div>
-    );
-}
-
-export default Chip;
diff --git a/packages/ui/src/components/Chip/styles.module.css b/packages/ui/src/components/Chip/styles.module.css
deleted file mode 100644
index 3c6d34e45b..0000000000
--- a/packages/ui/src/components/Chip/styles.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.chip {
-    --color-border: transparent;
-    --color-text: inherit;
-    --color-background: transparent;
-    --border-radius: var(--go-ui-border-radius-full);
-    --padding: var(--go-ui-spacing-4xs) var(--go-ui-spacing-4xs) var(--go-ui-spacing-4xs) var(--go-ui-spacing-sm);
-
-    display: flex;
-    align-items: center;
-    border: var(--go-ui-width-separator-sm) solid var(--color-border);
-    border-radius: var(--border-radius);
-    background-color: var(--color-background);
-    padding: var(--padding);
-    color: var(--color-text);
-    gap: var(--go-ui-spacing-3xs);
-
-    &.no-delete-icon {
-        --padding: var(--go-ui-spacing-4xs) var(--go-ui-spacing-sm);
-    }
-
-    &.primary {
-        --color-border: var(--go-ui-color-primary-red);
-        --color-background: var(--go-ui-color-primary-red);
-        --color-text: var(--go-ui-color-white);
-    }
-
-    &.secondary {
-        --color-border: var(--go-ui-color-primary-red);
-        --color-background: var(--go-ui-color-white);
-        --color-text: var(--go-ui-color-primary-red);
-    }
-
-    &.tertiary {
-        --color-border: var(--go-ui-color-gray-40);
-        --color-background: var(--go-ui-color-gray-30);
-        --color-text: inherit;
-    }
-
-    .close-icon {
-        font-size: var(--go-ui-font-size-sm);
-    }
-}
diff --git a/packages/ui/src/components/ChipLayout/index.tsx b/packages/ui/src/components/ChipLayout/index.tsx
new file mode 100644
index 0000000000..37bdaf6ab5
--- /dev/null
+++ b/packages/ui/src/components/ChipLayout/index.tsx
@@ -0,0 +1,93 @@
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+export type ChipColorVariant = 'primary' | 'secondary' | 'tertiary';
+export type ChipStyleVariant = 'tag' | 'selection';
+
+const colorVariantToClassNameMap: Record<ChipColorVariant, string> = {
+    primary: styles.colorVariantPrimary,
+    secondary: styles.colorVariantSecondary,
+    tertiary: styles.colorVariantTertiary,
+};
+
+const styleVariantToClassNameMap: Record<ChipStyleVariant, string> = {
+    tag: styles.styleVariantTag,
+    selection: styles.styleVariantSelection,
+};
+
+export interface Props {
+    className?: string;
+    /** Leading slot, typically an icon */
+    leading?: React.ReactNode;
+    /** The pill's visible label */
+    label: React.ReactNode;
+    /** Trailing slot, typically an action (e.g. a remove button) */
+    trailing?: React.ReactNode;
+    /** Style axis: the visual treatment of the pill */
+    styleVariant?: ChipStyleVariant;
+    /** Color axis: which semantic color drives border/background/text */
+    colorVariant?: ChipColorVariant;
+    leadingClassName?: string;
+    labelClassName?: string;
+    trailingClassName?: string;
+    /** HTML element rendered as the root (defaults to `span`) */
+    as?: 'span' | 'div' | 'li';
+}
+
+/**
+ * Shared presentational pill (generic layer).
+ *
+ * Arranges three slots — leading (icon) · label · trailing (action) — inside
+ * a rounded pill. Exposes a two-axis API: `styleVariant` ('tag' | 'selection')
+ * for the visual treatment and `colorVariant` for the semantic color. It holds
+ * no interaction logic itself; consumer-facing components (`Tag`, `Selection`)
+ * compose it and own the behaviour.
+ */
+function ChipLayout(props: Props) {
+    const {
+        className,
+        leading,
+        label,
+        trailing,
+        styleVariant = 'tag',
+        colorVariant = 'tertiary',
+        leadingClassName,
+        labelClassName,
+        trailingClassName,
+        as = 'span',
+    } = props;
+
+    const Element = as;
+
+    return (
+        <Element
+            className={_cs(
+                styles.chipLayout,
+                styleVariantToClassNameMap[styleVariant],
+                colorVariantToClassNameMap[colorVariant],
+                isDefined(trailing) && styles.withTrailing,
+                className,
+            )}
+        >
+            {isDefined(leading) && (
+                <span className={_cs(styles.leading, leadingClassName)}>
+                    {leading}
+                </span>
+            )}
+            <span className={labelClassName}>
+                {label}
+            </span>
+            {isDefined(trailing) && (
+                <span className={_cs(styles.trailing, trailingClassName)}>
+                    {trailing}
+                </span>
+            )}
+        </Element>
+    );
+}
+
+export default ChipLayout;
diff --git a/packages/ui/src/components/ChipLayout/styles.module.css b/packages/ui/src/components/ChipLayout/styles.module.css
new file mode 100644
index 0000000000..94279ae6c7
--- /dev/null
+++ b/packages/ui/src/components/ChipLayout/styles.module.css
@@ -0,0 +1,66 @@
+.chip-layout {
+    --color-border: transparent;
+    --color-text: inherit;
+    --color-background: transparent;
+    --border-radius: var(--go-ui-border-radius-full);
+    --padding: var(--go-ui-spacing-4xs) var(--go-ui-spacing-sm);
+
+    display: inline-flex;
+    align-items: center;
+    border: var(--go-ui-width-separator-sm) solid var(--color-border);
+    border-radius: var(--border-radius);
+    background-color: var(--color-background);
+    padding: var(--padding);
+    list-style: none;
+    color: var(--color-text);
+    gap: var(--go-ui-spacing-3xs);
+
+    /* Style axis: how the pill looks. */
+    &.style-variant-tag {
+        --color-border: transparent;
+        --color-background: var(--go-ui-color-gray-20);
+        --color-text: var(--go-ui-color-dark-blue-40);
+    }
+
+    &.style-variant-selection {
+        --color-border: transparent;
+        --color-background: var(--go-ui-color-gray-20);
+        --color-text: var(--go-ui-color-dark-blue-40);
+    }
+
+    /* Color axis: which semantic color drives border/background/text. */
+    &.color-variant-primary {
+        --color-border: var(--go-ui-color-primary-red);
+        --color-background: var(--go-ui-color-primary-red);
+        --color-text: var(--go-ui-color-white);
+    }
+
+    &.color-variant-secondary {
+        --color-border: var(--go-ui-color-primary-red);
+        --color-background: var(--go-ui-color-white);
+        --color-text: var(--go-ui-color-primary-red);
+    }
+
+    &.color-variant-tertiary {
+        --color-border: transparent;
+        --color-background: var(--go-ui-color-gray-20);
+        --color-text: var(--go-ui-color-dark-blue-40);
+    }
+
+    /* When a trailing action is present, tighten the trailing padding so the
+       action sits closer to the edge. */
+    &.with-trailing {
+        --padding: var(--go-ui-spacing-4xs) var(--go-ui-spacing-4xs) var(--go-ui-spacing-4xs) var(--go-ui-spacing-sm);
+    }
+
+    .leading {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .trailing {
+        display: inline-flex;
+        align-items: center;
+        font-size: var(--go-ui-font-size-sm);
+    }
+}
diff --git a/packages/ui/src/components/ColorPreview/index.tsx b/packages/ui/src/components/ColorPreview/index.tsx
index a3011b62b2..c0683b2c3c 100644
--- a/packages/ui/src/components/ColorPreview/index.tsx
+++ b/packages/ui/src/components/ColorPreview/index.tsx
@@ -9,6 +9,10 @@ export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'si
     size?: 'sm' | 'md' | 'lg';
 }
 
+/**
+ * ColorPreview is a presentational swatch rendering a solid color in a round
+ * or square shape at a preset size (raw layer).
+ */
 function ColorPreview(props: Props) {
     const {
         value,
diff --git a/packages/ui/src/components/ColorPreview/styles.module.css b/packages/ui/src/components/ColorPreview/styles.module.css
index bff3368449..9542ecc127 100644
--- a/packages/ui/src/components/ColorPreview/styles.module.css
+++ b/packages/ui/src/components/ColorPreview/styles.module.css
@@ -8,7 +8,7 @@
         border-radius: 50%;
     }
 
-    &.square-shap {
+    &.square-shape {
         border-radius: initial;
     }
 
diff --git a/packages/ui/src/components/ConfirmButton/index.tsx b/packages/ui/src/components/ConfirmButton/index.tsx
index 1cf9387a84..9257515e29 100644
--- a/packages/ui/src/components/ConfirmButton/index.tsx
+++ b/packages/ui/src/components/ConfirmButton/index.tsx
@@ -4,19 +4,29 @@ import {
 } from 'react';
 
 import Button, { Props as ButtonProps } from '#components/Button';
+import Dialog from '#components/Dialog';
 import ListView from '#components/ListView';
-import Modal from '#components/Modal';
 import useTranslation from '#hooks/useTranslation';
 
 import i18n from './i18n.json';
 
 export interface Props<NAME> extends ButtonProps<NAME> {
+    /** Body content of the confirmation dialog */
     confirmMessage?: React.ReactNode;
+    /** Heading of the confirmation dialog */
     confirmHeading?: React.ReactNode;
     onClick?: (name: NAME, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Called with the button name once the user confirms */
     onConfirm: (name: NAME) => void;
 }
 
+/**
+ * Button that asks for confirmation before acting (specific layer).
+ *
+ * Extends Button (including its curated `variant` API); `onClick` fires
+ * immediately while `onConfirm` only fires after the user accepts the
+ * confirmation dialog.
+ */
 function ConfirmButton<NAME>(props: Props<NAME>) {
     const strings = useTranslation(i18n);
 
@@ -58,9 +68,10 @@ function ConfirmButton<NAME>(props: Props<NAME>) {
                 onClick={handleOnClick}
             />
             {showConfirmation && (
-                <Modal
+                <Dialog
                     heading={confirmHeading}
-                    closeOnEscape={false}
+                    closeOnEscape
+                    onClose={() => setShowConfirmation(false)}
                     size="sm"
                     footerActions={(
                         <ListView spacing="sm">
@@ -72,7 +83,7 @@ function ConfirmButton<NAME>(props: Props<NAME>) {
                             </Button>
                             <Button
                                 name={name}
-                                styleVariant="filled"
+                                variant="primary"
                                 onClick={handleConfirmClick}
                             >
                                 {strings.buttonOk}
@@ -81,7 +92,7 @@ function ConfirmButton<NAME>(props: Props<NAME>) {
                     )}
                 >
                     {confirmMessage}
-                </Modal>
+                </Dialog>
             )}
         </>
     );
diff --git a/packages/ui/src/components/Container/index.tsx b/packages/ui/src/components/Container/index.tsx
index 6ac2167d65..f16b6f8fe2 100644
--- a/packages/ui/src/components/Container/index.tsx
+++ b/packages/ui/src/components/Container/index.tsx
@@ -15,8 +15,14 @@ import Description from '#components/Description';
 import Heading, { type Props as HeadingProps } from '#components/Heading';
 import InlineView, { Props as InlineViewProps } from '#components/InlineView';
 import ListView from '#components/ListView';
-import useSpacingToken from '#hooks/useSpacingToken';
 import {
+    BackgroundColorType,
+    BorderRadiusType,
+    BoxShadowType,
+    getBackgroundColorClassName,
+    getBorderRadiusClassName,
+    getBoxShadowClassName,
+    getSpacingClassName,
     getSpacingValue,
     paddingSpacings,
     SpacingType,
@@ -25,10 +31,16 @@ import {
 import styles from './styles.module.css';
 
 export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'ref'>{
+    /** Ref to the root DOM node */
     elementRef?: RefObject<HTMLDivElement | null>;
     className?: string;
 
     heading?: React.ReactNode;
+    /**
+     * id on the heading element; used for aria-labelledby wiring
+     * (e.g. Dialog points its aria-labelledby here)
+     */
+    headingId?: string;
     withEllipsizedHeading?: boolean;
     headingLevel?: HeadingProps['level'];
     headerDescription?: React.ReactNode;
@@ -38,7 +50,8 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'ref'>{
     withCenteredHeaderDescription?: boolean;
     withCenteredHeading?: boolean;
     withoutWrapInHeader?: boolean;
-    variant?: 'form' | 'default';
+    /** 'form' adds a separator below the header and a foreground header well */
+    styleVariant?: 'form' | 'default';
 
     filters?: React.ReactNode;
     children: React.ReactNode;
@@ -66,9 +79,15 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'ref'>{
     withoutMessageIcon?: boolean;
     withCompactMessage?: boolean;
 
-    withBackground?: boolean;
-    withDarkBackground?: boolean;
-    withShadow?: boolean;
+    /** Surface color token for the container root */
+    backgroundColor?: BackgroundColorType;
+    /**
+     * Corner radius token; defaults to 'lg' whenever backgroundColor
+     * or withBorder is set
+     */
+    borderRadius?: BorderRadiusType;
+    /** Shadow token (the old withShadow boolean meant 'md') */
+    boxShadow?: BoxShadowType;
     withPadding?: boolean;
 
     withBorder?: boolean;
@@ -82,12 +101,17 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'ref'>{
     withOverflow?: boolean;
 }
 
+/**
+ * Layout container with optional header, filters, footer and
+ * empty/pending/errored content states (generic layer).
+ */
 function Container(props: Props) {
     const {
         className,
         elementRef,
 
         heading,
+        headingId,
         withEllipsizedHeading,
         headingLevel = 3,
         headerIcons,
@@ -98,7 +122,7 @@ function Container(props: Props) {
         withCenteredHeaderDescription,
         withoutWrapInHeader,
         withLargeBreakpointInHeader,
-        variant = 'default',
+        styleVariant = 'default',
 
         filters,
 
@@ -124,9 +148,9 @@ function Container(props: Props) {
         withoutMessageIcon,
         withCompactMessage,
 
-        withBackground,
-        withDarkBackground,
-        withShadow,
+        backgroundColor,
+        borderRadius: borderRadiusFromProps,
+        boxShadow,
         withPadding,
         withBorder,
         withFixedHeight,
@@ -150,7 +174,12 @@ function Container(props: Props) {
         || isDefined(footerIcons)
         || isDefined(footerActions);
 
-    const contentSpacingClassName = useSpacingToken({
+    // A set background or border implies a rounded container; the design uses
+    // a ~4px (md) card radius.
+    const borderRadius = borderRadiusFromProps
+        ?? ((isDefined(backgroundColor) || withBorder) ? 'md' : undefined);
+
+    const contentSpacingClassName = getSpacingClassName({
         spacing,
         offset: spacingOffset,
         modes: paddingSpacings,
@@ -215,14 +244,14 @@ function Container(props: Props) {
             elementRef={elementRef}
             className={_cs(
                 styles.container,
-                withBackground && styles.withBackground,
-                withDarkBackground && styles.withDarkBackground,
-                withShadow && styles.withShadow,
+                getBackgroundColorClassName(backgroundColor),
+                getBorderRadiusClassName(borderRadius),
+                getBoxShadowClassName(boxShadow),
                 withContentWell && styles.withContentWell,
                 withFixedHeight && styles.withFixedHeight,
                 withCenteredContent && styles.withCenteredContent,
                 withBorder && styles.withBorder,
-                variant === 'form' && styles.formVariant,
+                styleVariant === 'form' && styles.formVariant,
                 className,
             )}
             spacing={spacing}
@@ -236,8 +265,8 @@ function Container(props: Props) {
                     spacingOffset={spacingOffset}
                     layout="block"
                     withSpacingOpticalCorrection
-                    withBackground={variant === 'form'}
-                    withPadding={variant === 'form'}
+                    backgroundColor={styleVariant === 'form' ? 'foreground' : undefined}
+                    withPadding={styleVariant === 'form'}
                 >
                     {shouldShowHeadingRow && (
                         <InlineView
@@ -257,6 +286,7 @@ function Container(props: Props) {
                             )}
                         >
                             <Heading
+                                id={headingId}
                                 level={headingLevel}
                                 ellipsize={withEllipsizedHeading}
                                 spacing={spacing}
diff --git a/packages/ui/src/components/Container/styles.module.css b/packages/ui/src/components/Container/styles.module.css
index 095f2c8224..0bb09bebf8 100644
--- a/packages/ui/src/components/Container/styles.module.css
+++ b/packages/ui/src/components/Container/styles.module.css
@@ -10,23 +10,12 @@
         max-height: 18rem;
     }
 
-    &.with-shadow {
-        box-shadow: var(--go-ui-box-shadow-md);
-    }
-
-    &.with-background {
-        border-radius: var(--go-ui-border-radius-lg);
-        background-color: var(--go-ui-color-foreground);
-    }
-
+    /*
+     * background-color, border-radius and box-shadow come from the
+     * spec utility classes (see #utils/style)
+     */
     &.with-border {
         border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
-        border-radius: var(--go-ui-border-radius-lg);
-    }
-
-    &.with-dark-background {
-        border-radius: var(--go-ui-border-radius-lg);
-        background-color: var(--go-ui-color-background);
     }
 
     &.form-variant {
diff --git a/packages/ui/src/components/DataDisplay/index.tsx b/packages/ui/src/components/DataDisplay/index.tsx
new file mode 100644
index 0000000000..217c89546c
--- /dev/null
+++ b/packages/ui/src/components/DataDisplay/index.tsx
@@ -0,0 +1,148 @@
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
+
+import RawDisplay, { Props as RawDisplayProps } from '#components/RawDisplay';
+import { DEFAULT_INVALID_TEXT } from '#utils/constants';
+import {
+    BackgroundColorType,
+    fullSpacings,
+    gapSpacings,
+    getBackgroundColorClassName,
+    getBorderRadiusClassName,
+    getSpacingClassName,
+    getTextSizeClassName,
+    SpacingType,
+    TextSizeType,
+} from '#utils/style';
+
+import styles from './styles.module.css';
+
+interface BaseProps {
+    className?: string;
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    valueClassName?: string;
+    strongValue?: boolean;
+    strongLabel?: boolean;
+    strongDescription?: boolean;
+    /** Suppresses the ':' appended after the label by default */
+    withoutLabelColon?: boolean;
+    /**
+     * Surface color token; setting it also pads the row and rounds
+     * its corners ('md')
+     */
+    backgroundColor?: BackgroundColorType;
+    /** Font size token applied to the whole row */
+    textSize?: TextSizeType;
+    /** Stacks label, value and description vertically */
+    withBlockLayout?: boolean;
+    spacing?: SpacingType;
+    withUppercaseLetters?: boolean;
+    withLightText?: boolean;
+}
+
+export type Props = BaseProps & RawDisplayProps;
+
+/**
+ * Labelled value pair: icon, label, typed value and description
+ * (specific layer).
+ *
+ * Renders as a description list (`<dl>`): the label is a `<dt>`, the
+ * typed value a `<dd>`, and the description a second `<dd>`. Value
+ * rendering is delegated to RawDisplay, so the `valueType` discriminated
+ * union (boolean/number/date/text or a plain node) and the per-type
+ * props come from RawDisplayProps.
+ */
+function DataDisplay(props: Props) {
+    const {
+        className,
+        label,
+        icon,
+        description,
+        labelClassName,
+        descriptionClassName,
+        valueClassName,
+        strongLabel,
+        strongValue,
+        strongDescription,
+        withoutLabelColon,
+        backgroundColor,
+        invalidText = DEFAULT_INVALID_TEXT,
+        textSize,
+        withBlockLayout,
+        spacing,
+        withUppercaseLetters,
+        withLightText,
+        ...rawDisplayProps
+    } = props;
+
+    const spacingClassName = getSpacingClassName({
+        spacing,
+        offset: -2,
+        modes: isDefined(backgroundColor)
+            ? fullSpacings
+            : gapSpacings,
+    });
+
+    return (
+        <dl
+            className={_cs(
+                styles.dataDisplay,
+                getBackgroundColorClassName(backgroundColor),
+                isDefined(backgroundColor) && getBorderRadiusClassName('md'),
+                getTextSizeClassName(textSize),
+                withBlockLayout && styles.withBlockLayout,
+                withUppercaseLetters && styles.withUppercaseLetters,
+                withLightText && styles.withLightText,
+                spacingClassName,
+                className,
+            )}
+        >
+            {icon}
+            {label && (
+                <dt
+                    className={_cs(
+                        styles.label,
+                        strongLabel && styles.strong,
+                        labelClassName,
+                        !withoutLabelColon && styles.withColon,
+                    )}
+                >
+                    {label}
+                </dt>
+            )}
+            <dd
+                className={_cs(
+                    styles.value,
+                    strongValue && styles.strong,
+                    rawDisplayProps.valueType === 'text' && styles.textType,
+                    valueClassName,
+                )}
+            >
+                <RawDisplay
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...rawDisplayProps}
+                    invalidText={invalidText}
+                />
+            </dd>
+            {description && (
+                <dd
+                    className={_cs(
+                        styles.description,
+                        strongDescription && styles.strong,
+                        descriptionClassName,
+                    )}
+                >
+                    {description}
+                </dd>
+            )}
+        </dl>
+    );
+}
+
+export default DataDisplay;
diff --git a/packages/ui/src/components/TextOutput/styles.module.css b/packages/ui/src/components/DataDisplay/styles.module.css
similarity index 53%
rename from packages/ui/src/components/TextOutput/styles.module.css
rename to packages/ui/src/components/DataDisplay/styles.module.css
index f60c80d7db..a06ed10dad 100644
--- a/packages/ui/src/components/TextOutput/styles.module.css
+++ b/packages/ui/src/components/DataDisplay/styles.module.css
@@ -1,6 +1,13 @@
-.text-output {
+.data-display {
     display: flex;
     flex-wrap: wrap;
+    margin: 0;
+
+    .label,
+    .value,
+    .description {
+        margin: 0;
+    }
 
     &.with-uppercase-letters {
         text-transform: uppercase;
@@ -15,16 +22,6 @@
         flex-wrap: initial;
     }
 
-    &.with-background {
-        border-radius: var(--go-ui-border-radius-md);
-        background-color: var(--go-ui-color-background);
-    }
-
-    &.with-light-background {
-        border-radius: var(--go-ui-border-radius-md);
-        background-color: var(--go-ui-color-foreground);
-    }
-
     .label {
         &.with-colon::after {
             content: ':';
@@ -42,16 +39,4 @@
     .strong {
         font-weight: var(--go-ui-font-weight-semibold);
     }
-
-    &.text-size-small {
-        font-size: var(--go-ui-font-size-sm);
-    }
-
-    &.text-size-medium {
-        font-size: var(--go-ui-font-size-md);
-    }
-
-    &.text-size-large {
-        font-size: var(--go-ui-font-size-lg);
-    }
 }
diff --git a/packages/ui/src/components/DateDisplay/index.tsx b/packages/ui/src/components/DateDisplay/index.tsx
new file mode 100644
index 0000000000..873cb6409f
--- /dev/null
+++ b/packages/ui/src/components/DateDisplay/index.tsx
@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import {
+    _cs,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import {
+    DateLike,
+    encodeDate,
+    formatDate,
+} from '#utils/common';
+
+import styles from './styles.module.css';
+
+// Full, spelled-out reading for assistive tech (e.g. '13 Jun 2026').
+const FULL_DATE_FORMAT = 'dd MMM yyyy';
+
+export interface Props {
+    className?: string;
+    value: DateLike | undefined | null;
+    format?: string;
+    invalidText?: React.ReactNode;
+}
+
+/**
+ * Renders a localised, formatted date (raw layer).
+ *
+ * The root is a native `<time dateTime>` carrying the ISO date as the
+ * machine-readable / test contract. When the visible (possibly
+ * abbreviated/short) format differs from the full spelled-out reading,
+ * the full date is exposed to assistive tech via `role="img"` +
+ * `aria-label`; when they match, a plain `<time>` is rendered.
+ */
+function DateDisplay(props: Props) {
+    const {
+        value,
+        format,
+        className,
+        invalidText,
+    } = props;
+
+    const formattedDate = useMemo(
+        () => formatDate(
+            value,
+            format,
+        ),
+        [value, format],
+    );
+
+    const isoDate = useMemo(
+        () => (isNotDefined(value) ? undefined : encodeDate(value)),
+        [value],
+    );
+
+    const fullDate = useMemo(
+        () => formatDate(
+            value,
+            FULL_DATE_FORMAT,
+        ),
+        [value],
+    );
+
+    if (isNotDefined(formattedDate)) {
+        return (
+            <time className={_cs(styles.dateDisplay, className)}>
+                {invalidText}
+            </time>
+        );
+    }
+
+    // role="img" only when the visible string is lossy (differs from the
+    // full reading) — typically short/abbreviated date formats.
+    const isLossy = formattedDate !== fullDate;
+
+    return (
+        <time
+            className={_cs(styles.dateDisplay, className)}
+            dateTime={isoDate}
+            role={isLossy ? 'img' : undefined}
+            aria-label={isLossy ? fullDate : undefined}
+        >
+            {formattedDate}
+        </time>
+    );
+}
+
+export default DateDisplay;
diff --git a/packages/ui/src/components/DateOutput/styles.module.css b/packages/ui/src/components/DateDisplay/styles.module.css
similarity index 58%
rename from packages/ui/src/components/DateOutput/styles.module.css
rename to packages/ui/src/components/DateDisplay/styles.module.css
index 5f5e43ae1d..fa1828e162 100644
--- a/packages/ui/src/components/DateOutput/styles.module.css
+++ b/packages/ui/src/components/DateDisplay/styles.module.css
@@ -1,3 +1,3 @@
-.date-output {
+.date-display {
     display: inline;
 }
diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx
index d917be7fc3..a071bf5730 100644
--- a/packages/ui/src/components/DateInput/index.tsx
+++ b/packages/ui/src/components/DateInput/index.tsx
@@ -1,6 +1,10 @@
-import { useMemo } from 'react';
+import {
+    useId,
+    useMemo,
+} from 'react';
+import { isDefined } from '@togglecorp/fujs';
 
-import DateOutput from '#components/DateOutput';
+import DateDisplay from '#components/DateDisplay';
 import InputContainer, { Props as InputContainerProps } from '#components/InputContainer';
 import RawInput, { Props as RawInputProps } from '#components/RawInput';
 import { getHighlightMode } from '#utils/common';
@@ -10,6 +14,7 @@ type InheritedProps<NAME> = Omit<InputContainerProps, 'input' | 'highlightMode'>
 & Omit<RawInputProps<NAME>, 'type' | 'className' | 'elementRef'>;
 
 export interface Props<NAME> extends InheritedProps<NAME> {
+    /** Ref to the inner <input> node (elementRef refers to the root) */
     inputElementRef?: React.RefObject<HTMLInputElement | null>;
     inputClassName?: string;
     withDiffView?: boolean;
@@ -17,10 +22,15 @@ export interface Props<NAME> extends InheritedProps<NAME> {
     type?: 'date' | 'month';
 }
 
+/**
+ * Date/month input composed of InputContainer and RawInput
+ * (specific layer).
+ */
 function DateInput<const T>(props: Props<T>) {
     const {
         disabled,
         inputClassName,
+        inputElementRef,
         readOnly,
         required,
         withDiffView,
@@ -34,13 +44,21 @@ function DateInput<const T>(props: Props<T>) {
         otherProps,
     );
 
+    const generatedId = useId();
+    const inputId = generatedId;
+    const hasError = isDefined(inputContainerProps.error);
+    const hasHint = isDefined(inputContainerProps.hint);
+    const errorId = hasError ? `${generatedId}-error` : undefined;
+    const hintId = hasHint ? `${generatedId}-hint` : undefined;
+    const describedBy = [hintId, errorId].filter(isDefined).join(' ') || undefined;
+
     const highlightMode = useMemo(
         () => getHighlightMode(value, prevValue, withDiffView),
         [value, prevValue, withDiffView],
     );
 
     const prevValueDisplay = useMemo(
-        () => <DateOutput value={prevValue} />,
+        () => <DateDisplay value={prevValue} />,
         [prevValue],
     );
 
@@ -48,6 +66,9 @@ function DateInput<const T>(props: Props<T>) {
         <InputContainer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...inputContainerProps}
+            inputId={inputId}
+            hintId={hintId}
+            errorId={errorId}
             disabled={disabled}
             readOnly={readOnly}
             required={required}
@@ -57,6 +78,11 @@ function DateInput<const T>(props: Props<T>) {
                 <RawInput
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...rawInputProps}
+                    id={inputId}
+                    aria-invalid={hasError}
+                    aria-required={required}
+                    aria-describedby={describedBy}
+                    elementRef={inputElementRef}
                     value={value}
                     readOnly={readOnly}
                     disabled={disabled}
diff --git a/packages/ui/src/components/DateOutput/index.tsx b/packages/ui/src/components/DateOutput/index.tsx
deleted file mode 100644
index e00a241465..0000000000
--- a/packages/ui/src/components/DateOutput/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useMemo } from 'react';
-import { _cs } from '@togglecorp/fujs';
-
-import {
-    DateLike,
-    formatDate,
-} from '#utils/common';
-
-import styles from './styles.module.css';
-
-export interface Props {
-    className?: string;
-    value: DateLike | undefined | null;
-    format?: string;
-    invalidText?: React.ReactNode;
-}
-
-function DateOutput(props: Props) {
-    const {
-        value,
-        format,
-        className,
-        invalidText,
-    } = props;
-
-    const formattedDate = useMemo(
-        () => formatDate(
-            value,
-            format,
-        ),
-        [value, format],
-    );
-
-    return (
-        <div className={_cs(styles.dateOutput, className)}>
-            {formattedDate ?? invalidText}
-        </div>
-    );
-}
-
-export default DateOutput;
diff --git a/packages/ui/src/components/DateRangeOutput/index.tsx b/packages/ui/src/components/DateRangeDisplay/index.tsx
similarity index 55%
rename from packages/ui/src/components/DateRangeOutput/index.tsx
rename to packages/ui/src/components/DateRangeDisplay/index.tsx
index 85c091d3c9..b5b23e6715 100644
--- a/packages/ui/src/components/DateRangeOutput/index.tsx
+++ b/packages/ui/src/components/DateRangeDisplay/index.tsx
@@ -1,6 +1,6 @@
 import { _cs } from '@togglecorp/fujs';
 
-import DateOutput from '#components/DateOutput';
+import DateDisplay from '#components/DateDisplay';
 
 import styles from './styles.module.css';
 
@@ -10,7 +10,14 @@ export interface Props{
     endDate: string;
 }
 
-function DateRangeOutput(props: Props) {
+/**
+ * Renders a start–end date range as two `<time dateTime>` elements
+ * (specific layer).
+ *
+ * Each endpoint is rendered via DateDisplay, so each carries its own ISO
+ * `dateTime` machine contract and accessible full-date reading.
+ */
+function DateRangeDisplay(props: Props) {
     const {
         className,
         startDate,
@@ -20,15 +27,15 @@ function DateRangeOutput(props: Props) {
     // TODO: Add startDate and endDate validation
     return (
         <div className={_cs(styles.dateRange, className)}>
-            <DateOutput
+            <DateDisplay
                 value={startDate}
             />
             -
-            <DateOutput
+            <DateDisplay
                 value={endDate}
             />
         </div>
     );
 }
 
-export default DateRangeOutput;
+export default DateRangeDisplay;
diff --git a/packages/ui/src/components/DateRangeOutput/styles.module.css b/packages/ui/src/components/DateRangeDisplay/styles.module.css
similarity index 100%
rename from packages/ui/src/components/DateRangeOutput/styles.module.css
rename to packages/ui/src/components/DateRangeDisplay/styles.module.css
diff --git a/packages/ui/src/components/DefaultMessage/index.tsx b/packages/ui/src/components/DefaultMessage/index.tsx
index 57984fd2af..cfceeb6e78 100644
--- a/packages/ui/src/components/DefaultMessage/index.tsx
+++ b/packages/ui/src/components/DefaultMessage/index.tsx
@@ -24,6 +24,11 @@ export interface Props {
     withoutIcon?: boolean;
 }
 
+/**
+ * DefaultMessage maps common data states (pending, errored, filtered,
+ * empty) to a Message with sensible default texts.
+ * Specific layer: composes the generic Message.
+ */
 function DefaultMessage(props: Props) {
     const {
         className,
@@ -91,6 +96,7 @@ function DefaultMessage(props: Props) {
             compact={compact}
             title={messageTitle}
             pending={pending}
+            variant={errored && !pending ? 'error' : undefined}
         />
     );
 }
diff --git a/packages/ui/src/components/Description/index.tsx b/packages/ui/src/components/Description/index.tsx
index 6c3c1764f1..7c1c888688 100644
--- a/packages/ui/src/components/Description/index.tsx
+++ b/packages/ui/src/components/Description/index.tsx
@@ -1,16 +1,28 @@
 import { _cs } from '@togglecorp/fujs';
 
+import {
+    getTextSizeClassName,
+    type TextSizeType,
+} from '#utils/style';
+
 import styles from './styles.module.css';
 
 export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
     className?: string;
     children?: React.ReactNode;
+    /** Center the text and cap its width to the content max-width */
     withCenteredContent?: boolean;
+    /** Ref to the root DOM node */
     elementRef?: React.RefObject<HTMLDivElement | null>;
-    textSize?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Text size token from the shared scale (default 'md') */
+    textSize?: Extract<TextSizeType, 'xs' | 'sm' | 'md' | 'lg'>;
+    /** Render in the light (muted) text color */
     withLightText?: boolean;
 }
 
+/**
+ * Generic typography component for secondary, descriptive body text.
+ */
 function Description(props: Props) {
     const {
         className,
@@ -30,10 +42,7 @@ function Description(props: Props) {
             className={_cs(
                 styles.description,
                 withCenteredContent && styles.withCenteredContent,
-                textSize === 'xs' && styles.textSizeExtraSmall,
-                textSize === 'sm' && styles.textSizeSmall,
-                textSize === 'md' && styles.textSizeMedium,
-                textSize === 'lg' && styles.textSizeLarge,
+                getTextSizeClassName(textSize),
                 withLightText && styles.withLightText,
                 className,
             )}
diff --git a/packages/ui/src/components/Description/styles.module.css b/packages/ui/src/components/Description/styles.module.css
index b2297093d4..4961ef8626 100644
--- a/packages/ui/src/components/Description/styles.module.css
+++ b/packages/ui/src/components/Description/styles.module.css
@@ -7,22 +7,6 @@
         text-align: center;
     }
 
-    &.text-size-extra-small {
-        font-size: var(--go-ui-font-size-xs);
-    }
-
-    &.text-size-small {
-        font-size: var(--go-ui-font-size-sm);
-    }
-
-    &.text-size-medium {
-        font-size: var(--go-ui-font-size-md);
-    }
-
-    &.text-size-large {
-        font-size: var(--go-ui-font-size-lg);
-    }
-
     &.with-light-text {
         color: var(--go-ui-color-text-light);
     }
diff --git a/packages/ui/src/components/Modal/i18n.json b/packages/ui/src/components/Dialog/i18n.json
similarity index 100%
rename from packages/ui/src/components/Modal/i18n.json
rename to packages/ui/src/components/Dialog/i18n.json
diff --git a/packages/ui/src/components/Dialog/index.tsx b/packages/ui/src/components/Dialog/index.tsx
new file mode 100644
index 0000000000..abe3044ed1
--- /dev/null
+++ b/packages/ui/src/components/Dialog/index.tsx
@@ -0,0 +1,179 @@
+import {
+    useCallback,
+    useEffect,
+    useId,
+    useRef,
+} from 'react';
+import { CloseFillIcon } from '@ifrc-go/icons';
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
+
+import Button from '#components/Button';
+import Container, { type Props as ContainerProps } from '#components/Container';
+import useTranslation from '#hooks/useTranslation';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'pageWidth' | 'full' | 'auto';
+
+const sizeToStyleMap: Record<DialogSize, string> = {
+    sm: styles.sizeSm,
+    md: styles.sizeMd,
+    lg: styles.sizeLg,
+    xl: styles.sizeXl,
+    full: styles.sizeFull,
+    auto: styles.sizeAuto,
+    pageWidth: styles.pageWidth,
+};
+
+export interface Props extends Omit<ContainerProps, 'withInternalPadding' | 'withoutWrapInHeading' | 'size' | 'headingId' | 'role'> {
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    onClose?: () => void;
+    /** Applied to the `<dialog>` element (its `::backdrop` is the dim layer) */
+    overlayClassName?: string;
+    modalContainerClassName?: string;
+    size?: DialogSize;
+    withoutCloseButton?: boolean;
+    /**
+     * Accessible name for a dialog with no `heading`. Ignored when `heading`
+     * is set (that wires `aria-labelledby` to the heading instead).
+     */
+    ariaLabel?: string;
+}
+
+/**
+ * Modal dialog built on the native `<dialog>` element (specific layer).
+ *
+ * Opened with `showModal()`, so focus trapping, focus restore, background
+ * inerting, top-layer rendering and the `::backdrop` come from the platform —
+ * no portal or focus-trap library needed. Its accessible name is wired via
+ * `aria-labelledby` to the Container heading (`Container.headingId`). Escape
+ * and backdrop clicks are routed through `onClose` (gated by `closeOnEscape` /
+ * `closeOnClickOutside`) so React stays the source of truth for open state.
+ */
+function Dialog(props: Props) {
+    const {
+        closeOnClickOutside = false,
+        closeOnEscape = false,
+        onClose,
+        overlayClassName,
+        size = 'md',
+        withoutCloseButton = false,
+        ariaLabel,
+
+        className,
+        heading,
+        headerActions,
+        modalContainerClassName,
+
+        ...containerProps
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const dialogRef = useRef<HTMLDialogElement>(null);
+    const headingId = useId();
+
+    useEffect(
+        () => {
+            const dialogElement = dialogRef.current;
+            dialogElement?.showModal();
+
+            // showModal() inerts the background but does not lock its scroll.
+            const prevOverflow = document.body.style.overflow;
+            const prevScrollbarGutter = document.documentElement.style.scrollbarGutter;
+            document.body.style.overflow = 'hidden';
+            document.documentElement.style.scrollbarGutter = 'initial';
+
+            return () => {
+                document.body.style.overflow = prevOverflow;
+                document.documentElement.style.scrollbarGutter = prevScrollbarGutter;
+                dialogElement?.close();
+            };
+        },
+        [],
+    );
+
+    const handleCancel = useCallback(
+        (event: React.SyntheticEvent<HTMLDialogElement>) => {
+            // Never let the element close itself on Escape; route through
+            // onClose so the owner unmounts us (keeping React authoritative).
+            event.preventDefault();
+            if (closeOnEscape) {
+                onClose?.();
+            }
+        },
+        [closeOnEscape, onClose],
+    );
+
+    useEffect(
+        () => {
+            const dialogElement = dialogRef.current;
+            if (!dialogElement) {
+                return undefined;
+            }
+            // A click whose target is the <dialog> itself is a backdrop click
+            // (content sits in the child Container). Attached imperatively so
+            // the listener lives on the genuinely-interactive dialog element.
+            const handleBackdropClick = (event: MouseEvent) => {
+                if (event.target === dialogElement && closeOnClickOutside) {
+                    onClose?.();
+                }
+            };
+            dialogElement.addEventListener('click', handleBackdropClick);
+            return () => {
+                dialogElement.removeEventListener('click', handleBackdropClick);
+            };
+        },
+        [closeOnClickOutside, onClose],
+    );
+
+    const sizeStyle = sizeToStyleMap[size];
+
+    // Only show the close button when it can actually do something — closing a
+    // mount-to-show dialog needs the owner's onClose. Avoids a dead "×".
+    const showCloseButton = !withoutCloseButton && isDefined(onClose);
+
+    return (
+        <dialog
+            ref={dialogRef}
+            className={_cs(styles.dialog, sizeStyle, overlayClassName, modalContainerClassName)}
+            aria-labelledby={heading ? headingId : undefined}
+            aria-label={!heading ? ariaLabel : undefined}
+            onCancel={handleCancel}
+        >
+            <Container
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...containerProps}
+                heading={heading}
+                headingId={headingId}
+                withPadding
+                withoutWrapInHeader
+                withoutWrapInFooter
+                className={_cs(styles.modal, className)}
+                withContentOverflow
+                headerActions={(showCloseButton || headerActions) ? (
+                    <>
+                        {headerActions}
+                        {showCloseButton && (
+                            <Button
+                                name={undefined}
+                                onClick={onClose}
+                                variant="tertiary"
+                                aria-label={strings.closeButtonLabel}
+                                title={strings.closeButtonLabel}
+                            >
+                                <CloseFillIcon className={styles.closeIcon} />
+                            </Button>
+                        )}
+                    </>
+                ) : undefined}
+            />
+        </dialog>
+    );
+}
+
+export default Dialog;
diff --git a/packages/ui/src/components/Dialog/styles.module.css b/packages/ui/src/components/Dialog/styles.module.css
new file mode 100644
index 0000000000..8a87fa220f
--- /dev/null
+++ b/packages/ui/src/components/Dialog/styles.module.css
@@ -0,0 +1,106 @@
+.dialog {
+    --spacing: calc(var(--go-ui-spacing-md) * 2);
+    --max-full-width: calc(100% - var(--spacing));
+    --max-page-width: calc(var(--go-ui-page-width-max) - var(--spacing));
+    --max-full-height: calc(100% - var(--spacing));
+
+    --max-width: min(var(--max-full-width), var(--max-page-width));
+    --max-height: var(--max-full-height);
+
+    /* centre in the top layer: inset:0 + margin:auto with a non-stretching
+       (fit-content) height; reset the UA border/padding/background */
+    display: flex;
+    position: fixed;
+    inset: 0;
+    flex-direction: column;
+    margin: auto;
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    width: 100%;
+    max-width: var(--max-width);
+    /* fit-content (not auto) hugs the content AND centres via margin:auto +
+       inset:0; capped by max-height, scrolling internally when taller */
+    height: fit-content;
+    max-height: var(--max-height);
+    overflow: hidden;
+    animation: slide-down var(--go-ui-duration-transition-medium) ease-in forwards;
+
+    &::backdrop {
+        background-color: var(--go-ui-color-background-overlay-dark);
+        animation: fade-in var(--go-ui-duration-transition-medium) ease-in forwards;
+    }
+
+    /* sized variants keep the centred fit-content height from the base, with a
+       sensible minimum (capped by the viewport) so they are never too short */
+    &.size-sm {
+        max-width: min(var(--max-width), var(--go-ui-width-modal-sm));
+        min-height: min(var(--max-height), 12rem);
+    }
+
+    &.size-md {
+        max-width: min(var(--max-width), var(--go-ui-width-modal-md));
+        min-height: min(var(--max-height), 20rem);
+    }
+
+    &.size-lg {
+        max-width: min(var(--max-width), var(--go-ui-width-modal-lg));
+        min-height: min(var(--max-height), 28rem);
+        max-height: min(var(--max-height), 70vh);
+    }
+
+    &.size-xl {
+        max-width: min(var(--max-width), var(--go-ui-width-modal-xl));
+        min-height: min(var(--max-height), 36rem);
+        max-height: min(var(--max-height), 90vh);
+    }
+
+    /* FIXME: remove either size-full or page-width variant */
+    &.size-full {
+        width: 100%;
+        height: 100%;
+    }
+
+    &.page-width {
+        width: 100%;
+        height: 100%;
+    }
+
+    &.size-auto {
+        width: max-content;
+        height: max-content;
+    }
+
+    .modal {
+        /* grow to fill the dialog box (so the surface covers it fully) while
+           min-height:0 lets it shrink so its content can scroll */
+        flex: 1 1 auto;
+        border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+        border-radius: var(--go-ui-border-radius-lg);
+        box-shadow: var(--go-ui-box-shadow-2xl);
+        background-color: var(--go-ui-color-white);
+        width: 100%;
+        min-height: 0;
+        max-height: 100%;
+        overflow: auto;
+
+        .close-icon {
+            font-size: var(--go-ui-height-icon-multiplier);
+        }
+
+        .content {
+            flex-grow: 1;
+            overflow: auto;
+        }
+    }
+}
+
+@keyframes fade-in {
+    from { opacity: 0 }
+    to { opacity: 1 }
+}
+
+@keyframes slide-down {
+    from { transform: translateY(-5pt) }
+    to { transform: translateY(0) }
+}
diff --git a/packages/ui/src/components/DismissableListOutput/index.tsx b/packages/ui/src/components/DismissableListOutput/index.tsx
deleted file mode 100644
index 8de24998d1..0000000000
--- a/packages/ui/src/components/DismissableListOutput/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-    useCallback,
-    useMemo,
-} from 'react';
-import { isNotDefined } from '@togglecorp/fujs';
-
-import Chip from '#components/Chip';
-
-export interface Props<
-    O,
-    V extends string | number,
-    N extends string | number
-> {
-    value: V | undefined;
-    name: N;
-    onDismiss: (value: V | undefined, name: N) => void;
-    keySelector: (value: O) => V;
-    labelSelector: (value: O) => string;
-    options: O[] | undefined | null;
-}
-
-function DismissableListOutput<
-    O,
-    V extends string | number,
-    N extends string | number
->(
-    props: Props<O, V, N>,
-) {
-    const {
-        name,
-        value,
-        onDismiss,
-        labelSelector,
-        keySelector,
-        options,
-    } = props;
-
-    const item = useMemo(() => {
-        if (isNotDefined(options) || isNotDefined(value)) {
-            return undefined;
-        }
-        return options?.find((option) => keySelector(option) === value);
-    }, [value, options, keySelector]);
-
-    const handleDismiss = useCallback(() => {
-        onDismiss(undefined, name);
-    }, [name, onDismiss]);
-
-    if (isNotDefined(value) || isNotDefined(item)) {
-        return null;
-    }
-
-    const itemName = labelSelector(item);
-
-    return (
-        <Chip
-            label={itemName}
-            name={value}
-            onDelete={handleDismiss}
-            variant="tertiary"
-        />
-    );
-}
-
-export default DismissableListOutput;
diff --git a/packages/ui/src/components/DismissableMultiListOutput/index.tsx b/packages/ui/src/components/DismissableMultiListOutput/index.tsx
deleted file mode 100644
index f230abf7fd..0000000000
--- a/packages/ui/src/components/DismissableMultiListOutput/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-    useCallback,
-    useMemo,
-} from 'react';
-import { isNotDefined } from '@togglecorp/fujs';
-
-import Chip, { type Props as ChipProps } from '#components/Chip';
-import RawList from '#components/RawList';
-
-export interface Props<
-    O,
-    V extends string | number,
-    N extends string | number
-> {
-    value: V[] | undefined;
-    name: N;
-    onDismiss: (value: V[] | undefined, name: N) => void;
-    keySelector: (value: O) => V;
-    labelSelector: (value: O) => string;
-    options: O[] | undefined | null;
-}
-
-function DismissableMultiListOutput<
-    O,
-    V extends string | number,
-    N extends string | number
->(
-    props: Props<O, V, N>,
-) {
-    const {
-        name,
-        value,
-        onDismiss,
-        labelSelector,
-        keySelector,
-        options,
-    } = props;
-
-    const values = useMemo(() => {
-        if (isNotDefined(options) || !Array.isArray(value)) {
-            return undefined;
-        }
-        return options?.filter((option) => value?.includes(keySelector(option)));
-    }, [value, options, keySelector]);
-
-    const handleDismiss = useCallback((val: V) => {
-        const updatedValue = value?.filter((item) => item !== val);
-        onDismiss(updatedValue, name);
-    }, [name, onDismiss, value]);
-
-    const chipRendererParams = useCallback((key: V, item: O): ChipProps<V> => ({
-        label: labelSelector(item),
-        name: key,
-        onDelete: handleDismiss,
-        variant: 'tertiary',
-    }), [handleDismiss, labelSelector]);
-
-    if (isNotDefined(value) || value.length < 1) {
-        return null;
-    }
-
-    return (
-        <RawList
-            data={values}
-            renderer={Chip<V>}
-            rendererParams={chipRendererParams}
-            keySelector={keySelector}
-        />
-    );
-}
-
-export default DismissableMultiListOutput;
diff --git a/packages/ui/src/components/DismissableTextOutput/index.tsx b/packages/ui/src/components/DismissableTextOutput/index.tsx
deleted file mode 100644
index f2b4f12c13..0000000000
--- a/packages/ui/src/components/DismissableTextOutput/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useCallback } from 'react';
-import { isNotDefined } from '@togglecorp/fujs';
-
-import Chip from '#components/Chip';
-
-export interface Props<T extends string | number> {
-    value: string | undefined;
-    name: T;
-    onDismiss: (value: undefined, name: T) => void;
-}
-
-function DismissableTextOutput<T extends string | number>(
-    props: Props<T>,
-) {
-    const {
-        value,
-        name,
-        onDismiss,
-    } = props;
-
-    const handleDismiss = useCallback(() => {
-        onDismiss(undefined, name);
-    }, [name, onDismiss]);
-
-    if (isNotDefined(value)) {
-        return null;
-    }
-
-    return (
-        <Chip
-            label={value}
-            name={name}
-            onDelete={handleDismiss}
-            variant="tertiary"
-        />
-    );
-}
-
-export default DismissableTextOutput;
diff --git a/packages/ui/src/components/Label/index.tsx b/packages/ui/src/components/DisplayLabel/index.tsx
similarity index 55%
rename from packages/ui/src/components/Label/index.tsx
rename to packages/ui/src/components/DisplayLabel/index.tsx
index c9fbf98598..8438ed3eea 100644
--- a/packages/ui/src/components/Label/index.tsx
+++ b/packages/ui/src/components/DisplayLabel/index.tsx
@@ -1,23 +1,29 @@
 import { _cs } from '@togglecorp/fujs';
 
-import styles from './styles.module.css';
-
-type TextSize = 'sm' | 'md' | 'lg';
+import {
+    getTextSizeClassName,
+    type TextSizeType,
+} from '#utils/style';
 
-const textSizeToClassName: Record<TextSize, string> = {
-    sm: styles.textSizeSmall,
-    md: styles.textSizeMedium,
-    lg: styles.textSizeLarge,
-};
+import styles from './styles.module.css';
 
 export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'size'> {
+    /** Ref to the root DOM node */
     elementRef?: React.RefObject<HTMLDivElement | null>;
+    /** Use the medium font weight */
     strong?: boolean;
-    textSize?: TextSize;
+    /** Text size token from the shared scale (default 'md') */
+    textSize?: Extract<TextSizeType, 'sm' | 'md' | 'lg'>;
+    /** Transform the label text to uppercase */
     withUppercaseLetters?: boolean;
 }
 
-function Label(props: Props) {
+/**
+ * DisplayLabel is a generic typography component for short labelling text.
+ * It is presentational only (not a form `<label>` — use InputLabel for that).
+ * Renders nothing when there are no children.
+ */
+function DisplayLabel(props: Props) {
     const {
         children,
         elementRef,
@@ -37,7 +43,7 @@ function Label(props: Props) {
             className={_cs(
                 styles.label,
                 strong && styles.strong,
-                textSizeToClassName[textSize],
+                getTextSizeClassName(textSize),
                 withUppercaseLetters && styles.withUppercaseLetters,
                 className,
             )}
@@ -47,4 +53,4 @@ function Label(props: Props) {
     );
 }
 
-export default Label;
+export default DisplayLabel;
diff --git a/packages/ui/src/components/DisplayLabel/styles.module.css b/packages/ui/src/components/DisplayLabel/styles.module.css
new file mode 100644
index 0000000000..4951bcc48e
--- /dev/null
+++ b/packages/ui/src/components/DisplayLabel/styles.module.css
@@ -0,0 +1,9 @@
+.label {
+    &.strong {
+        font-weight: var(--go-ui-font-weight-medium);
+    }
+
+    &.with-uppercase-letters {
+        text-transform: uppercase;
+    }
+}
diff --git a/packages/ui/src/components/DropdownMenu/index.tsx b/packages/ui/src/components/Dropdown/index.tsx
similarity index 62%
rename from packages/ui/src/components/DropdownMenu/index.tsx
rename to packages/ui/src/components/Dropdown/index.tsx
index ae83c80c5c..ac509bd454 100644
--- a/packages/ui/src/components/DropdownMenu/index.tsx
+++ b/packages/ui/src/components/Dropdown/index.tsx
@@ -1,7 +1,7 @@
 import {
     useCallback,
     useEffect,
-    useMemo,
+    useId,
     useRef,
     useState,
 } from 'react';
@@ -12,8 +12,7 @@ import {
 import { _cs } from '@togglecorp/fujs';
 
 import Button, { Props as ButtonProps } from '#components/Button';
-import Popup from '#components/Popup';
-import DropdownMenuContext, { type DropdownMenuContextProps } from '#contexts/dropdown-menu';
+import Popover from '#components/Popover';
 import useBlurEffect from '#hooks/useBlurEffect';
 import { SpacingType } from '#utils/style';
 
@@ -21,6 +20,7 @@ import styles from './styles.module.css';
 
 export interface Props {
     className?: string;
+    /** Applied to the toggle button while the dropdown is open */
     activeClassName?: string;
 
     popupClassName?: string;
@@ -31,21 +31,46 @@ export interface Props {
     labelBefore?: React.ReactNode;
     labelAfter?: React.ReactNode;
     labelSpacing?: SpacingType;
-    labelColorVariant?: ButtonProps<undefined>['colorVariant'];
-    labelStyleVariant?: ButtonProps<undefined>['styleVariant'];
+    /** Curated Button variant for the toggle button */
+    labelVariant?: ButtonProps<undefined>['variant'];
     labelWithoutPadding?: boolean;
 
     children?: React.ReactNode;
 
     withoutDropdownIcon?: boolean;
+    /**
+     * Value for the trigger's `aria-haspopup` (defaults to `'true'`).
+     * Composing components set this to the kind of surface they reveal
+     * (e.g. `'menu'`, `'dialog'`).
+     */
+    ariaHasPopup?: React.AriaAttributes['aria-haspopup'];
+    /**
+     * Accessible name for the trigger, applied as `aria-label`. Use when the
+     * trigger has no visible text label (e.g. an icon-only affordance).
+     */
+    ariaLabel?: string;
+    /** Imperative handle to open/close the dropdown programmatically */
     componentRef?: React.RefObject<{
         setShowDropdown: React.Dispatch<React.SetStateAction<boolean>>;
     } | null>;
+    /** Refers to the toggle button's root element (also used as the popover parent) */
     elementRef?: React.RefObject<HTMLDivElement | null>;
+    /** Keeps the dropdown open when clicking inside the popover */
     persistent?: boolean;
+
+    /** Renders the popover content; allows wrapping it (e.g. with menu roles) */
+    popupContentRenderer?: (children: React.ReactNode) => React.ReactNode;
 }
 
-function DropdownMenu(props: Props) {
+/**
+ * Generic disclosure (generic layer).
+ *
+ * A real `<button>` trigger (with `aria-haspopup`/`aria-expanded`/
+ * `aria-controls`) toggles a Popover holding arbitrary `children`. Escape and
+ * outside-click close it. It carries no menu roles — composing components
+ * (e.g. Menu, MoreInfo) layer their own semantics on top.
+ */
+function Dropdown(props: Props) {
     const newButtonRef = useRef<HTMLDivElement>(null);
     const {
         className,
@@ -57,11 +82,12 @@ function DropdownMenu(props: Props) {
         labelBefore,
         labelAfter,
         labelSpacing,
-        labelColorVariant,
-        labelStyleVariant,
+        labelVariant,
         labelWithoutPadding,
 
         withoutDropdownIcon,
+        ariaHasPopup = 'true',
+        ariaLabel,
         componentRef,
         elementRef: buttonRef = newButtonRef,
         persistent,
@@ -69,8 +95,11 @@ function DropdownMenu(props: Props) {
         popupClassName,
         preferredPopupWidth,
         withoutPopupPadding,
+
+        popupContentRenderer,
     } = props;
 
+    const popupId = useId();
     const dropdownRef = useRef<HTMLDivElement>(null);
     const [showDropdown, setShowDropdown] = useState(false);
 
@@ -105,6 +134,15 @@ function DropdownMenu(props: Props) {
         [setShowDropdown, persistent],
     );
 
+    const handleKeyDown = useCallback(
+        (event: React.KeyboardEvent<HTMLButtonElement>) => {
+            if (event.key === 'Escape') {
+                setShowDropdown(false);
+            }
+        },
+        [setShowDropdown],
+    );
+
     useBlurEffect(
         showDropdown,
         handleBlurCallback,
@@ -112,28 +150,25 @@ function DropdownMenu(props: Props) {
         buttonRef,
     );
 
-    const contextValue = useMemo<DropdownMenuContextProps>(
-        () => ({
-            setShowDropdown,
-        }),
-        [setShowDropdown],
-    );
-
     const hasAfterContent = !!labelAfter || !withoutDropdownIcon;
 
     return (
-        <DropdownMenuContext.Provider value={contextValue}>
+        <>
             <Button
                 name={undefined}
                 className={_cs(
-                    styles.dropdownMenu,
+                    styles.dropdown,
                     showDropdown && activeClassName,
                     className,
                 )}
-                layoutElementRef={buttonRef}
+                elementRef={buttonRef}
                 onClick={handleMenuClick}
-                styleVariant={labelStyleVariant}
-                colorVariant={labelColorVariant}
+                onKeyDown={handleKeyDown}
+                aria-haspopup={ariaHasPopup}
+                aria-expanded={showDropdown}
+                aria-controls={showDropdown ? popupId : undefined}
+                aria-label={ariaLabel}
+                variant={labelVariant}
                 withoutPadding={labelWithoutPadding}
                 spacing={labelSpacing}
                 after={hasAfterContent ? (
@@ -150,7 +185,8 @@ function DropdownMenu(props: Props) {
                 {label}
             </Button>
             {showDropdown && (
-                <Popup
+                <Popover
+                    id={popupId}
                     elementRef={dropdownRef}
                     className={_cs(
                         styles.dropdownContent,
@@ -160,11 +196,11 @@ function DropdownMenu(props: Props) {
                     parentRef={buttonRef}
                     preferredWidth={preferredPopupWidth}
                 >
-                    {children}
-                </Popup>
+                    {popupContentRenderer ? popupContentRenderer(children) : children}
+                </Popover>
             )}
-        </DropdownMenuContext.Provider>
+        </>
     );
 }
 
-export default DropdownMenu;
+export default Dropdown;
diff --git a/packages/ui/src/components/DropdownMenu/styles.module.css b/packages/ui/src/components/Dropdown/styles.module.css
similarity index 95%
rename from packages/ui/src/components/DropdownMenu/styles.module.css
rename to packages/ui/src/components/Dropdown/styles.module.css
index ecc4a9d0da..a93121f42a 100644
--- a/packages/ui/src/components/DropdownMenu/styles.module.css
+++ b/packages/ui/src/components/Dropdown/styles.module.css
@@ -1,4 +1,4 @@
-.dropdown-menu {
+.dropdown {
     align-items: center;
 
     >* {
diff --git a/packages/ui/src/components/ExpandableContainer/index.tsx b/packages/ui/src/components/ExpandableContainer/index.tsx
index 3061100b93..c348134f07 100644
--- a/packages/ui/src/components/ExpandableContainer/index.tsx
+++ b/packages/ui/src/components/ExpandableContainer/index.tsx
@@ -1,5 +1,6 @@
 import {
     useEffect,
+    useId,
     useMemo,
 } from 'react';
 import {
@@ -12,24 +13,29 @@ import {
 } from '@togglecorp/fujs';
 
 import Button from '#components/Button';
+import Container, { Props as ContainerProps } from '#components/Container';
 import useBooleanState from '#hooks/useBooleanState';
 import useTranslation from '#hooks/useTranslation';
 
-import Container, { Props as ContainerProps } from '../Container';
-
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 export interface Props extends ContainerProps {
     initiallyExpanded?: boolean;
     onExpansionChange?: (isExpanded: boolean) => void;
+    /** Imperative handle to control the expansion state from outside */
     componentRef?: React.RefObject<{
         setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
     } | null>;
+    /** [expandLabel, collapseLabel] for the toggle button */
     toggleButtonLabel?: [React.ReactNode, React.ReactNode];
     withToggleButtonOnFooter?: boolean;
 }
 
+/**
+ * Container whose children can be collapsed/expanded with a toggle
+ * button in the header or footer (specific layer).
+ */
 function ExpandableContainer(props: Props) {
     const {
         className,
@@ -47,6 +53,7 @@ function ExpandableContainer(props: Props) {
 
     // const containerRef = useRef<HTMLDivElement>(null);
     const strings = useTranslation(i18n);
+    const contentId = useId();
 
     const [
         expanded,
@@ -100,19 +107,22 @@ function ExpandableContainer(props: Props) {
 
     const toggleButton = useMemo(() => (
         <Button
-            styleVariant="action"
+            variant="tertiary"
             name={undefined}
             onClick={toggleExpanded}
             title={expanded
                 ? strings.expandableContainerCollapse
                 : strings.expandableContainerExpand}
             after={icon}
+            aria-expanded={expanded}
+            aria-controls={contentId}
         >
             {expanded ? collapseLabel : expandLabel}
         </Button>
     ), [
         toggleExpanded,
         expanded,
+        contentId,
         strings.expandableContainerCollapse,
         strings.expandableContainerExpand,
         icon,
@@ -141,7 +151,11 @@ function ExpandableContainer(props: Props) {
                 </>
             )}
         >
-            {(expanded) && children}
+            {expanded && (
+                <div id={contentId}>
+                    {children}
+                </div>
+            )}
         </Container>
     );
 }
diff --git a/packages/ui/src/components/FileInputButton/index.tsx b/packages/ui/src/components/FileInputButton/index.tsx
new file mode 100644
index 0000000000..00d51a4a28
--- /dev/null
+++ b/packages/ui/src/components/FileInputButton/index.tsx
@@ -0,0 +1,87 @@
+import ButtonLayout, { type Props as ButtonLayoutProps } from '#components/ButtonLayout';
+import RawFileInput, {
+    type CommonRawFileInputProps,
+    type MultipleRawFileInputProps,
+    type SingleRawFileInputProps,
+} from '#components/RawFileInput';
+
+export type Props<NAME> = Omit<ButtonLayoutProps, 'onChange'>
+    & Omit<CommonRawFileInputProps<NAME>, 'children' | 'className'>
+    & (SingleRawFileInputProps<NAME> | MultipleRawFileInputProps<NAME>);
+
+/**
+ * Button-like file input (specific layer).
+ *
+ * Composes RawFileInput (hidden-input plumbing) with ButtonLayout
+ * (visuals); this is the styled half of the former RawFileInput, which
+ * now only keeps the plumbing.
+ *
+ * Deliberately retains ButtonLayout's two-axis colorVariant +
+ * styleVariant API instead of the curated Button `variant`: the
+ * historical default pair (colorVariant 'secondary', styleVariant
+ * 'translucent') has no curated equivalent, so a curated prop could
+ * not preserve existing visuals.
+ *
+ * `className` and `children` go to the ButtonLayout; `elementRef`
+ * references the ButtonLayout root, the visual root of the component
+ * (the label element wrapping it has `display: contents` and
+ * generates no box).
+ */
+function FileInputButton<NAME>(props: Props<NAME>) {
+    const {
+        accept,
+        disabled,
+        inputProps,
+        inputRef,
+        multiple,
+        name,
+        onChange,
+        readOnly,
+        spacingOffset = -3,
+        ...buttonLayoutProps
+    } = props;
+
+    const buttonLayout = (
+        <ButtonLayout
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...buttonLayoutProps}
+            spacingOffset={spacingOffset}
+            disabled={disabled}
+            readOnly={readOnly}
+        />
+    );
+
+    const commonInputProps = {
+        accept,
+        disabled,
+        inputProps,
+        inputRef,
+        name,
+        readOnly,
+    };
+
+    if (multiple) {
+        return (
+            <RawFileInput
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...commonInputProps}
+                multiple
+                onChange={onChange}
+            >
+                {buttonLayout}
+            </RawFileInput>
+        );
+    }
+
+    return (
+        <RawFileInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...commonInputProps}
+            onChange={onChange}
+        >
+            {buttonLayout}
+        </RawFileInput>
+    );
+}
+
+export default FileInputButton;
diff --git a/packages/ui/src/components/Heading/index.tsx b/packages/ui/src/components/Heading/index.tsx
index a7a5e420ca..44a147611f 100644
--- a/packages/ui/src/components/Heading/index.tsx
+++ b/packages/ui/src/components/Heading/index.tsx
@@ -5,8 +5,8 @@ import {
 } from 'react';
 import { _cs } from '@togglecorp/fujs';
 
-import useSpacingToken from '#hooks/useSpacingToken';
 import {
+    getSpacingClassName,
     paddingSpacings,
     SpacingType,
 } from '#utils/style';
@@ -26,26 +26,33 @@ const levelToClassName: Record<HeadingLevel, string> = {
 
 export interface Props {
     className?: string;
+    /** id on the heading element (e.g. for aria-labelledby wiring) */
+    id?: string;
     level?: HeadingLevel;
     children: ReactNode;
     ellipsize?: boolean;
     centerAligned?: boolean;
-    variant?: 'form' | 'container';
+    /** 'form' adds padding, a bottom border and a foreground background */
+    styleVariant?: 'form' | 'container';
     spacing?: SpacingType;
 }
 
+/**
+ * Semantic h1-h6 heading with level-based sizing (generic layer).
+ */
 function Heading(props: Props) {
     const {
         className,
+        id,
         level = 3,
         children,
         ellipsize,
         centerAligned,
-        variant = 'container',
+        styleVariant = 'container',
         spacing,
     } = props;
 
-    const spacingClassName = useSpacingToken({
+    const spacingClassName = getSpacingClassName({
         spacing,
         modes: paddingSpacings,
     });
@@ -59,14 +66,15 @@ function Heading(props: Props) {
 
     return (
         <HeadingTag
+            id={id}
             className={_cs(
                 styles.heading,
                 ellipsize && styles.ellipsized,
                 levelToClassName[level],
                 centerAligned && styles.centerAligned,
-                variant === 'form' && spacingClassName,
-                variant === 'form' && styles.withBottomBorder,
-                variant === 'form' && styles.withLightBackground,
+                styleVariant === 'form' && spacingClassName,
+                styleVariant === 'form' && styles.withBottomBorder,
+                styleVariant === 'form' && styles.withLightBackground,
                 className,
             )}
             ref={headingElementRef}
diff --git a/packages/ui/src/components/Heading/styles.module.css b/packages/ui/src/components/Heading/styles.module.css
index 659d7399c6..2949eda9c7 100644
--- a/packages/ui/src/components/Heading/styles.module.css
+++ b/packages/ui/src/components/Heading/styles.module.css
@@ -30,7 +30,7 @@
     }
 
     &.level-two {
-        --font-size: 1.875rem;
+        --font-size: var(--go-ui-font-size-3xl);
 
         @media print {
             color: var(--go-ui-color-primary-blue);
diff --git a/packages/ui/src/components/HtmlOutput/index.tsx b/packages/ui/src/components/HtmlDisplay/index.tsx
similarity index 89%
rename from packages/ui/src/components/HtmlOutput/index.tsx
rename to packages/ui/src/components/HtmlDisplay/index.tsx
index 2a65b4e983..a96d9871be 100644
--- a/packages/ui/src/components/HtmlOutput/index.tsx
+++ b/packages/ui/src/components/HtmlDisplay/index.tsx
@@ -79,7 +79,14 @@ export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'dangerousl
     value: string | null | undefined;
 }
 
-function HtmlOutput(props: Props) {
+/**
+ * Renders a string of sanitized HTML into a `<div>` (raw layer).
+ *
+ * The value is sanitized before being set as inner HTML. There is no
+ * `value` attribute / value-output treatment here: the rendered content
+ * is rich markup, not a single formatted value.
+ */
+function HtmlDisplay(props: Props) {
     const {
         className,
         value,
@@ -92,7 +99,7 @@ function HtmlOutput(props: Props) {
         <div
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...otherProps}
-            className={_cs(styles.htmlOutput, className)}
+            className={_cs(styles.htmlDisplay, className)}
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={isDefined(sanitizedValue) ? {
                 __html: sanitizedValue,
@@ -101,4 +108,4 @@ function HtmlOutput(props: Props) {
     );
 }
 
-export default HtmlOutput;
+export default HtmlDisplay;
diff --git a/packages/ui/src/components/HtmlOutput/styles.module.css b/packages/ui/src/components/HtmlDisplay/styles.module.css
similarity index 85%
rename from packages/ui/src/components/HtmlOutput/styles.module.css
rename to packages/ui/src/components/HtmlDisplay/styles.module.css
index ba0345d49d..41f8811e45 100644
--- a/packages/ui/src/components/HtmlOutput/styles.module.css
+++ b/packages/ui/src/components/HtmlDisplay/styles.module.css
@@ -1,4 +1,4 @@
-.html-output {
+.html-display {
     p {
         margin: var(--go-ui-spacing-xs);
     }
diff --git a/packages/ui/src/components/IconButton/index.tsx b/packages/ui/src/components/IconButton/index.tsx
index 0bfec634bf..45c4df9b9d 100644
--- a/packages/ui/src/components/IconButton/index.tsx
+++ b/packages/ui/src/components/IconButton/index.tsx
@@ -1,45 +1,46 @@
 import { _cs } from '@togglecorp/fujs';
 
-import type { Props as RawButtonProps } from '#components/Button';
-import RawButton from '#components/RawButton';
+import Button, { Props as ButtonProps } from '#components/Button';
 
 import styles from './styles.module.css';
 
-type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
-
-export interface Props<N> extends RawButtonProps<N> {
+export interface Props<N> extends ButtonProps<N> {
+    /** Accessible name for the icon-only content (rendered as aria-label) */
     ariaLabel: string;
-    disabled?: boolean;
-    round?: boolean;
+    /** Tooltip text; required since the visible content is only an icon */
     title: string;
-    variant?: IconButtonVariant;
 }
 
-function IconButton<N>(props: Props<N>) {
+/**
+ * Button for icon-only content (specific layer).
+ *
+ * Wraps Button (and therefore shares its curated `variant` API) and
+ * enforces an accessible name (`ariaLabel`) and a `title`, since the
+ * visible content carries no text. The icon is sized through the
+ * standard icon height multiplier.
+ *
+ * Unlike Button, the default variant is 'tertiary': a bare icon
+ * button renders as a plain icon, not an outlined pill.
+ */
+function IconButton<const N>(props: Props<N>) {
     const {
         ariaLabel,
         children,
         className,
         variant = 'tertiary',
-        round = true,
         ...otherProps
     } = props;
 
-    const buttonClassName = _cs(
-        styles.button,
-        styles[variant],
-        round && styles.round,
-        className,
-    );
-
     return (
-        <RawButton
-            className={buttonClassName}
+        <Button
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...otherProps}
+            variant={variant}
+            className={_cs(styles.iconButton, className)}
             aria-label={ariaLabel}
-            {...otherProps} /* eslint-disable-line react/jsx-props-no-spreading */
         >
             {children}
-        </RawButton>
+        </Button>
     );
 }
 
diff --git a/packages/ui/src/components/IconButton/styles.module.css b/packages/ui/src/components/IconButton/styles.module.css
index f5bb1c56a7..a011061547 100644
--- a/packages/ui/src/components/IconButton/styles.module.css
+++ b/packages/ui/src/components/IconButton/styles.module.css
@@ -1,92 +1,3 @@
-.button {
-    --color-border: transparent;
-    --color-text: transparent;
-    --color-background: transparent;
-    --font-size: var(--go-ui-height-icon-multiplier);
-    --border-radius: var(--go-ui-border-radius-md);
-    --text-transform: none;
-    --cursor: default;
-    --spacing: var(--go-ui-spacing-4xs);
-    --padding: var(--spacing);
-
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    border: var(--go-ui-width-separator-sm) solid var(--color-border);
-    border-radius: var(--border-radius);
-    background-color: var(--color-background);
-    cursor: var(--cursor);
-    padding: var(--padding);
-    width: fit-content;
-    max-width: 100%;
-    overflow: hidden;
-    text-transform: var(--text-transform);
-    color: var(--color-text);
-    font-family: inherit;
-    font-size: var(--font-size);
-    font-weight: var(--go-ui-font-weight-normal);
-    gap: var(--spacing);
-
-    &.round {
-        --border-radius: 50%;
-    }
-    &.primary {
-        --border-color: var(--go-ui-color-primary-red);
-        --color-background: var(--go-ui-color-primary-red);
-        --color-text: var(--go-ui-color-white);
-
-        &:disabled {
-            --border-color: var(--go-ui-color-gray-40);
-            --color-background: var(--go-ui-color-gray-40);
-        }
-
-        &:not(:disabled) {
-            &:hover {
-                --color-background: var(--go-ui-color-red-hover);
-            }
-        }
-    }
-
-    &.secondary {
-        --color-border: var(--go-ui-color-primary-red);
-        --color-background: var(--go-ui-color-white);
-        --color-text: var(--go-ui-color-primary-red);
-
-        &:disabled {
-            --color-text: var(--go-ui-color-gray-40);
-            --color-border: var(--go-ui-color-gray-40);
-        }
-
-        &:not(:disabled) {
-            &:hover {
-                --color-text: var(--go-ui-color-white);
-                --color-background: var(--go-ui-color-red-hover);
-            }
-        }
-    }
-
-    &.tertiary {
-        --color-background: transparent;
-        --color-text: inherit;
-
-        &:disabled {
-            --color-text: var(--go-ui-color-gray-40);
-        }
-
-        &:not(:disabled) {
-            &:hover {
-                --color-background: var(--go-ui-color-gray-20);
-                --color-text: var(--go-ui-color-primary-red);
-            }
-        }
-    }
-
-    &:disabled {
-        --cursor: not-allowed;
-    }
-
-    &:not(:disabled) {
-        --cursor: pointer;
-    }
+.icon-button {
+    font-size: var(--go-ui-height-icon-multiplier);
 }
diff --git a/packages/ui/src/components/InlineFrame/index.tsx b/packages/ui/src/components/Iframe/index.tsx
similarity index 66%
rename from packages/ui/src/components/InlineFrame/index.tsx
rename to packages/ui/src/components/Iframe/index.tsx
index 76ea1e387c..9c77093e8e 100644
--- a/packages/ui/src/components/InlineFrame/index.tsx
+++ b/packages/ui/src/components/Iframe/index.tsx
@@ -3,11 +3,20 @@ import { _cs } from '@togglecorp/fujs';
 import styles from './styles.module.css';
 
 export interface Props extends Omit<React.HTMLProps<HTMLIFrameElement>, 'ref' | 'size'> {
+    /** Ref to the root DOM node (the iframe element) */
     elementRef?: React.RefObject<HTMLIFrameElement | null>;
+    /**
+     * Physical dimensions of the frame (max-width/max-height presets,
+     * default 'md'). This is true size semantics, not a style variant.
+     */
     size?: 'sm' | 'md' | 'lg';
 }
 
-function InlineFrame(props: Props) {
+/**
+ * Specific component for embedding an external document in an iframe
+ * with preset physical dimensions.
+ */
+function Iframe(props: Props) {
     const {
         className,
         elementRef,
@@ -22,7 +31,7 @@ function InlineFrame(props: Props) {
             {...otherProps}
             title={title}
             className={_cs(
-                styles.inlineFrame,
+                styles.iframe,
                 className,
                 size === 'sm' && styles.smSize,
                 size === 'md' && styles.mdSize,
@@ -33,4 +42,4 @@ function InlineFrame(props: Props) {
     );
 }
 
-export default InlineFrame;
+export default Iframe;
diff --git a/packages/ui/src/components/InlineFrame/styles.module.css b/packages/ui/src/components/Iframe/styles.module.css
similarity index 95%
rename from packages/ui/src/components/InlineFrame/styles.module.css
rename to packages/ui/src/components/Iframe/styles.module.css
index 56efcb4a92..f8ed11f908 100644
--- a/packages/ui/src/components/InlineFrame/styles.module.css
+++ b/packages/ui/src/components/Iframe/styles.module.css
@@ -1,4 +1,4 @@
-.inline-frame {
+.iframe {
     margin: 0 auto;
     border: none;
     background-color: var(--go-ui-color-gray-30);
diff --git a/packages/ui/src/components/Image/i18n.json b/packages/ui/src/components/Image/i18n.json
new file mode 100644
index 0000000000..e194704a09
--- /dev/null
+++ b/packages/ui/src/components/Image/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "expandImageLabel": "Expand image"
+    }
+}
diff --git a/packages/ui/src/components/Image/index.test.tsx b/packages/ui/src/components/Image/index.test.tsx
new file mode 100644
index 0000000000..036108506a
--- /dev/null
+++ b/packages/ui/src/components/Image/index.test.tsx
@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+
+import Image from './index';
+
+describe('Image accessibility', () => {
+    it('keeps the content image accessible (alt preserved, no presentation role)', () => {
+        const { container } = render(<Image src="/x.png" alt="A map of the region" />);
+        const img = container.querySelector('img');
+
+        expect(img).not.toBeNull();
+        expect(img).toHaveAttribute('alt', 'A map of the region');
+        expect(img).not.toHaveAttribute('role', 'presentation');
+    });
+
+    it('exposes a keyboard-operable, named button when expandable', () => {
+        const { getByRole } = render(<Image src="/x.png" alt="A map" expandable />);
+
+        expect(getByRole('button', { name: 'Expand image' })).toBeInTheDocument();
+    });
+});
diff --git a/packages/ui/src/components/Image/index.tsx b/packages/ui/src/components/Image/index.tsx
index 7d95c4a5bc..3e7fb1a2bb 100644
--- a/packages/ui/src/components/Image/index.tsx
+++ b/packages/ui/src/components/Image/index.tsx
@@ -3,9 +3,12 @@ import {
     isDefined,
 } from '@togglecorp/fujs';
 
-import Modal from '#components/Modal';
+import Dialog from '#components/Dialog';
+import RawButton from '#components/RawButton';
 import useBooleanState from '#hooks/useBooleanState';
+import useTranslation from '#hooks/useTranslation';
 
+import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 export interface Props {
@@ -22,6 +25,10 @@ export interface Props {
     withoutBackground?: boolean;
 }
 
+/**
+ * Specific component for an image with an optional caption that can be
+ * expanded into a full-size Dialog overlay.
+ */
 function Image(props: Props) {
     const {
         className,
@@ -45,6 +52,8 @@ function Image(props: Props) {
         },
     ] = useBooleanState(false);
 
+    const strings = useTranslation(i18n);
+
     if (!src) {
         return null;
     }
@@ -64,20 +73,33 @@ function Image(props: Props) {
             )}
             title={withoutCaption && typeof caption === 'string' ? caption : undefined}
         >
-            <img
-                role="presentation"
-                onClick={expandable ? setIsExpandedTrue : undefined}
-                src={src}
-                alt={alt}
-                className={_cs(styles.imgElement, imgElementClassName)}
-            />
+            {expandable ? (
+                <RawButton
+                    name={undefined}
+                    onClick={setIsExpandedTrue}
+                    className={styles.expandButton}
+                    aria-label={strings.expandImageLabel}
+                >
+                    <img
+                        src={src}
+                        alt={alt}
+                        className={_cs(styles.imgElement, imgElementClassName)}
+                    />
+                </RawButton>
+            ) : (
+                <img
+                    src={src}
+                    alt={alt}
+                    className={_cs(styles.imgElement, imgElementClassName)}
+                />
+            )}
             {!withoutCaption && isDefined(caption) && (
                 <figcaption className={_cs(captionClassName, styles.caption)}>
                     {caption}
                 </figcaption>
             )}
             {isExpanded && (
-                <Modal
+                <Dialog
                     className={styles.expandedModal}
                     size="full"
                     heading={caption}
@@ -89,7 +111,7 @@ function Image(props: Props) {
                         src={src}
                         alt={alt}
                     />
-                </Modal>
+                </Dialog>
             )}
         </figure>
     );
diff --git a/packages/ui/src/components/Image/styles.module.css b/packages/ui/src/components/Image/styles.module.css
index 450d91380b..2683908c8f 100644
--- a/packages/ui/src/components/Image/styles.module.css
+++ b/packages/ui/src/components/Image/styles.module.css
@@ -21,14 +21,19 @@
         object-position: center center;
     }
 
+    .expand-button {
+        display: block;
+        width: 100%;
+    }
+
     &:not(.without-background) {
-        >.img-element {
+        .img-element {
             background-color: var(--go-ui-color-background);
         }
     }
 
     &.with-contained-fit {
-        >.img-element {
+        .img-element {
             object-fit: contain;
         }
     }
diff --git a/packages/ui/src/components/InfoPopup/index.tsx b/packages/ui/src/components/InfoPopup/index.tsx
deleted file mode 100644
index 4475e6ffdd..0000000000
--- a/packages/ui/src/components/InfoPopup/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { InformationLineIcon } from '@ifrc-go/icons';
-import { _cs } from '@togglecorp/fujs';
-
-import Container from '#components/Container';
-import DropdownMenu from '#components/DropdownMenu';
-
-import styles from './styles.module.css';
-
-export interface Props {
-    icon?: React.ReactNode;
-    withoutIcon?: boolean;
-    infoLabel?: React.ReactNode;
-    title?: React.ReactNode;
-    description?: React.ReactNode;
-    popupClassName?: string;
-    className?: string;
-}
-
-function InfoPopup(props: Props) {
-    const {
-        className,
-        icon = <InformationLineIcon />,
-        infoLabel,
-        title,
-        description,
-        withoutIcon,
-        popupClassName,
-    } = props;
-
-    return (
-        <DropdownMenu
-            label={(
-                <div className={styles.label}>
-                    {infoLabel}
-                    {!withoutIcon && icon && (
-                        <div className={styles.icon}>
-                            {icon}
-                        </div>
-                    )}
-                </div>
-            )}
-            popupClassName={_cs(styles.dropdownContainer, popupClassName)}
-            className={_cs(styles.infoPopup, className)}
-            labelStyleVariant="action"
-            labelColorVariant="text"
-            labelSpacing="none"
-            withoutDropdownIcon
-        >
-            <Container
-                pending={false}
-                empty={false}
-                filtered={false}
-                errored={false}
-                heading={title}
-                withPadding
-            >
-                {description}
-            </Container>
-        </DropdownMenu>
-    );
-}
-
-export default InfoPopup;
diff --git a/packages/ui/src/components/InlineLayout/index.tsx b/packages/ui/src/components/InlineLayout/index.tsx
index 2f124c75eb..b694f92427 100644
--- a/packages/ui/src/components/InlineLayout/index.tsx
+++ b/packages/ui/src/components/InlineLayout/index.tsx
@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import { _cs } from '@togglecorp/fujs';
 
-import useSpacingToken from '#hooks/useSpacingToken';
 import {
     fullSpacings,
     gapSpacings,
+    getSpacingClassName,
     SpacingMode,
     SpacingType,
 } from '#utils/style';
@@ -12,6 +12,7 @@ import {
 import styles from './styles.module.css';
 
 export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'before' | 'after' | 'name' | 'value' | 'onClick'> {
+    /** Ref to the root DOM node */
     elementRef?: React.RefObject<HTMLDivElement | null>;
     className?: string;
 
@@ -34,6 +35,10 @@ export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'be
     withInlineDisplay?: boolean;
 }
 
+/**
+ * Horizontal before/children/after row with spec-driven spacing
+ * (generic layer).
+ */
 function InlineLayout(props: Props) {
     const {
         className,
@@ -64,7 +69,7 @@ function InlineLayout(props: Props) {
         return fullSpacings;
     }, [withPadding]);
 
-    const spacingClassName = useSpacingToken({
+    const spacingClassName = getSpacingClassName({
         spacing,
         modes: spacingModes,
         offset: spacingOffset ?? 0,
@@ -72,7 +77,7 @@ function InlineLayout(props: Props) {
         withoutOpticalCorrection: withoutSpacingOpticalCorrection,
     });
 
-    const innerSpacingClassName = useSpacingToken({
+    const innerSpacingClassName = getSpacingClassName({
         spacing,
         modes: gapSpacings,
         offset: spacingOffset ?? 0,
diff --git a/packages/ui/src/components/InlineView/index.tsx b/packages/ui/src/components/InlineView/index.tsx
index cbec1de224..0685c430ec 100644
--- a/packages/ui/src/components/InlineView/index.tsx
+++ b/packages/ui/src/components/InlineView/index.tsx
@@ -6,10 +6,16 @@ import styles from './styles.module.css';
 
 export interface Props extends InlineLayoutProps {
     layoutClassName?: string;
+    /** Ref to the inner InlineLayout node (elementRef refers to the root) */
     layoutElementRef?: InlineLayoutProps['elementRef'];
+    /** Container width below which before/children/after stack vertically */
     wrapBreakpoint?: 'sm' | 'md' | 'lg' | 'none';
 }
 
+/**
+ * InlineLayout wrapped in a container that stacks its slots below a
+ * configurable container breakpoint (generic layer).
+ */
 function InlineView(props: Props) {
     const {
         layoutElementRef,
diff --git a/packages/ui/src/components/InputContainer/index.tsx b/packages/ui/src/components/InputContainer/index.tsx
index 3de95e3998..226014b8bf 100644
--- a/packages/ui/src/components/InputContainer/index.tsx
+++ b/packages/ui/src/components/InputContainer/index.tsx
@@ -1,22 +1,28 @@
+import { useId } from 'react';
 import {
     _cs,
     isDefined,
 } from '@togglecorp/fujs';
 
 import Description from '#components/Description';
+import DisplayLabel from '#components/DisplayLabel';
 import InlineLayout from '#components/InlineLayout';
 import InputError from '#components/InputError';
 import InputLabel from '#components/InputLabel';
-import Label from '#components/Label';
 import ListView from '#components/ListView';
-import useSpacingToken from '#hooks/useSpacingToken';
-import { SpacingType } from '#utils/style';
+import {
+    BackgroundColorType,
+    getSpacingClassName,
+    SpacingType,
+} from '#utils/style';
 
 import styles from './styles.module.css';
 
 export interface Props {
     className?: string;
-    containerRef?: React.RefObject<HTMLDivElement | null>;
+    /** Ref to the root DOM node */
+    elementRef?: React.RefObject<HTMLDivElement | null>;
+    /** Ref to the inner input section node (icons + input + actions row) */
     inputSectionRef?: React.RefObject<HTMLDivElement | null>;
 
     label?: React.ReactNode;
@@ -29,6 +35,22 @@ export interface Props {
     error?: React.ReactNode;
     errorOnTooltip?: boolean;
 
+    /**
+     * Id of the rendered control, used to wire `<label htmlFor>` to it
+     * (the field passes the same id to its RawInput/RawTextArea).
+     */
+    inputId?: string;
+    /** Id applied to the hint node so the control can `aria-describedby` it */
+    hintId?: string;
+    /** Id applied to the error node so the control can `aria-describedby` it */
+    errorId?: string;
+    /**
+     * ARIA role for the container root. Grouped controls (RadioInput,
+     * Checklist) pass `'radiogroup'`/`'group'`; the root then carries a
+     * group-level `aria-describedby` pointing at the hint/error nodes.
+     */
+    role?: 'radiogroup' | 'group';
+
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
@@ -37,19 +59,27 @@ export interface Props {
     prevValue?: React.ReactNode;
     withPrevValue?: boolean;
 
-    variant?: 'form' | 'general' | 'transparent';
+    /**
+     * 'form' shows an input well, 'general' only a bottom border,
+     * 'transparent' no input section decoration
+     */
+    styleVariant?: 'form' | 'general' | 'transparent';
     withAsterisk?: boolean;
     spacing?: SpacingType;
 
     withPadding?: boolean;
-    withBackground?: boolean;
-    withDarkBackground?: boolean;
+    /** Surface color token for the container root */
+    backgroundColor?: BackgroundColorType;
     withoutInputSectionPadding?: boolean;
 }
 
+/**
+ * Layout shell shared by the input components: label, input section
+ * (icons + input + actions), hint, error and diff highlight (generic layer).
+ */
 function InputContainer(props: Props) {
     const {
-        containerRef,
+        elementRef,
         inputSectionRef,
         actions,
         className,
@@ -59,39 +89,60 @@ function InputContainer(props: Props) {
         hint,
         icons,
         input,
+        inputId,
+        hintId,
+        errorId,
+        role,
         label,
         readOnly,
         required,
-        variant = 'form',
+        styleVariant = 'form',
         withAsterisk,
         spacing,
         prevValue,
         withPrevValue,
         highlightMode,
         withPadding,
-        withBackground,
-        withDarkBackground,
+        backgroundColor,
         withoutInputSectionPadding,
     } = props;
 
     const isRequired = withAsterisk ?? required;
-    const paddingClassName = useSpacingToken({
+    const paddingClassName = getSpacingClassName({
         spacing,
-        offset: variant === 'transparent' ? -2 : -3,
+        offset: styleVariant === 'transparent' ? -2 : -3,
         modes: withoutInputSectionPadding ? [] : ['padding-inline'],
     });
 
+    // Group-level description for radiogroup/group containers; individual
+    // text-style fields wire aria-describedby on the control itself instead.
+    const groupDescribedBy = isDefined(role)
+        ? ([hintId, errorId].filter(isDefined).join(' ') || undefined)
+        : undefined;
+
+    // A grouped container (radiogroup/group) has no single control for the
+    // label's htmlFor to target, so name the group via aria-labelledby and
+    // surface invalid/required on the group root itself.
+    const generatedId = useId();
+    const isGrouped = isDefined(role);
+    const labelId = (isGrouped && isDefined(label)) ? `${generatedId}-label` : undefined;
+
     return (
         <ListView
-            elementRef={containerRef}
+            elementRef={elementRef}
+            role={role}
+            aria-describedby={groupDescribedBy}
+            aria-labelledby={labelId}
+            aria-invalid={isGrouped && !!error ? true : undefined}
+            aria-required={isGrouped && isRequired ? true : undefined}
             layout="block"
             className={_cs(
                 styles.inputContainer,
                 !!error && styles.errored,
                 readOnly && styles.readOnly,
-                variant === 'form' && styles.formVariant,
-                variant === 'general' && styles.generalVariant,
-                variant === 'transparent' && styles.transparentVariant,
+                styleVariant === 'form' && styles.formVariant,
+                styleVariant === 'general' && styles.generalVariant,
+                styleVariant === 'transparent' && styles.transparentVariant,
                 disabled && styles.disabled,
                 highlightMode === 'add' && styles.withAddHighlight,
                 highlightMode === 'update' && styles.withUpdateHighlight,
@@ -103,11 +154,12 @@ function InputContainer(props: Props) {
                 : undefined}
             spacing={spacing}
             spacingOffset={-4}
-            withBackground={withBackground}
-            withDarkBackground={withDarkBackground}
+            backgroundColor={backgroundColor}
             withPadding={withPadding}
         >
             <InputLabel
+                id={labelId}
+                htmlFor={inputId}
                 disabled={disabled}
                 required={isRequired}
             >
@@ -127,12 +179,13 @@ function InputContainer(props: Props) {
                 {input}
             </InlineLayout>
             {withPrevValue && prevValue && isDefined(highlightMode) && (
-                <Label strong>
+                <DisplayLabel strong>
                     {prevValue}
-                </Label>
+                </DisplayLabel>
             )}
             {!error && !errorOnTooltip && hint && (
                 <Description
+                    id={hintId}
                     withLightText
                     textSize="sm"
                 >
@@ -141,6 +194,7 @@ function InputContainer(props: Props) {
             )}
             {error && (
                 <InputError
+                    id={errorId}
                     disabled={disabled}
                     floating={errorOnTooltip}
                 >
diff --git a/packages/ui/src/components/InputContainer/styles.module.css b/packages/ui/src/components/InputContainer/styles.module.css
index 385ed8a56d..79720c7066 100644
--- a/packages/ui/src/components/InputContainer/styles.module.css
+++ b/packages/ui/src/components/InputContainer/styles.module.css
@@ -55,7 +55,7 @@
 
     &.form-variant {
         .input-section { /* stylelint-disable-line no-descending-specificity */
-            background-color: var(--go-ui-color-element-background);
+            background-color: var(--go-ui-color-gray-20);
         }
 
         &.errored {
diff --git a/packages/ui/src/components/InputError/index.tsx b/packages/ui/src/components/InputError/index.tsx
index e0a83d184c..e857e61bda 100644
--- a/packages/ui/src/components/InputError/index.tsx
+++ b/packages/ui/src/components/InputError/index.tsx
@@ -10,7 +10,7 @@ import {
 } from '@togglecorp/fujs';
 
 import InlineLayout from '#components/InlineLayout';
-import Popup from '#components/Popup';
+import Popover from '#components/Popover';
 
 import styles from './styles.module.css';
 
@@ -19,14 +19,22 @@ export interface Props {
     children?: React.ReactNode;
     disabled?: boolean;
     floating?: boolean;
+    /** Id wired from the field's `aria-describedby` */
+    id?: string;
 }
 
+/**
+ * Form-field error message (generic layer). Carries `role="alert"` so
+ * validation errors are announced by assistive tech; can also float in
+ * a Popover when `floating` is set.
+ */
 function InputError(props: Props) {
     const {
         children,
         className,
         disabled,
         floating,
+        id,
     } = props;
 
     const [hasParentRef, setHasParentRef] = useState(false);
@@ -60,6 +68,8 @@ function InputError(props: Props) {
 
     const content = (
         <InlineLayout
+            id={id}
+            role="alert"
             className={styles.errorContent}
             before={(
                 <AlertLineIcon className={styles.icon} />
@@ -83,13 +93,13 @@ function InputError(props: Props) {
                 />
             )}
             {children && !disabled && (
-                <Popup
+                <Popover
                     className={_cs(styles.inputError, className)}
                     pointerClassName={styles.pointer}
                     parentRef={parentRef}
                 >
                     {content}
-                </Popup>
+                </Popover>
             )}
         </>
     );
diff --git a/packages/ui/src/components/InputError/styles.module.css b/packages/ui/src/components/InputError/styles.module.css
index c94d826c3d..67192f9344 100644
--- a/packages/ui/src/components/InputError/styles.module.css
+++ b/packages/ui/src/components/InputError/styles.module.css
@@ -1,5 +1,5 @@
 .error-content {
-    color: var(--go-ui-color-red);
+    color: var(--go-ui-color-negative);
 }
 
 .input-error {
@@ -17,7 +17,7 @@
     opacity: 0;
     animation: fade-in var(--go-ui-duration-transition-medium) ease-in forwards;
     animation-delay: var(--go-ui-duration-transition-medium);
-    color: var(--go-ui-color-red);
+    color: var(--go-ui-color-negative);
 }
 
 @keyframes slide-down {
diff --git a/packages/ui/src/components/InputHint/index.tsx b/packages/ui/src/components/InputHint/index.tsx
index 80cbe3b620..d2f4039400 100644
--- a/packages/ui/src/components/InputHint/index.tsx
+++ b/packages/ui/src/components/InputHint/index.tsx
@@ -6,12 +6,19 @@ import styles from './styles.module.css';
 export interface Props {
     children?: React.ReactNode;
     className?: string;
+    /** Id wired from the field's `aria-describedby` */
+    id?: string;
 }
 
+/**
+ * Form-field hint text (generic layer). Accepts an `id` so the field's
+ * control can reference it via `aria-describedby`.
+ */
 function InputHint(props: Props) {
     const {
         children,
         className,
+        id,
     } = props;
 
     if (!children) {
@@ -20,6 +27,7 @@ function InputHint(props: Props) {
 
     return (
         <div
+            id={id}
             className={_cs(
                 styles.inputHint,
                 className,
diff --git a/packages/ui/src/components/InputLabel/index.tsx b/packages/ui/src/components/InputLabel/index.tsx
index 923e58589a..4b9ac90612 100644
--- a/packages/ui/src/components/InputLabel/index.tsx
+++ b/packages/ui/src/components/InputLabel/index.tsx
@@ -5,17 +5,29 @@ import styles from './styles.module.css';
 export interface Props {
     children?: React.ReactNode;
     className?: string;
+    /** Id applied to the `<label>`; lets a grouped control reference it via `aria-labelledby`. */
+    id?: string;
     disabled?: boolean;
     // FIXME: change prop name to withAsterisk
     required?: boolean;
+    /** Id of the control this labels; renders a real `<label htmlFor>` */
+    htmlFor?: string;
 }
 
+/**
+ * Form-field label (generic layer). Renders a real `<label htmlFor>` so
+ * the label is programmatically associated with its control; the
+ * required asterisk is `aria-hidden` (requiredness is conveyed via
+ * `aria-required` on the control).
+ */
 function InputLabel(props: Props) {
     const {
         children,
         className,
+        id,
         disabled,
         required,
+        htmlFor,
     } = props;
 
     if (!children) {
@@ -23,7 +35,9 @@ function InputLabel(props: Props) {
     }
 
     return (
-        <div
+        <label
+            id={id}
+            htmlFor={htmlFor}
             className={_cs(
                 styles.inputLabel,
                 disabled && styles.disabled,
@@ -36,7 +50,7 @@ function InputLabel(props: Props) {
                     *
                 </span>
             )}
-        </div>
+        </label>
     );
 }
 
diff --git a/packages/ui/src/components/InputLabel/styles.module.css b/packages/ui/src/components/InputLabel/styles.module.css
index 734fb7f467..657f139e79 100644
--- a/packages/ui/src/components/InputLabel/styles.module.css
+++ b/packages/ui/src/components/InputLabel/styles.module.css
@@ -1,14 +1,15 @@
 .input-label {
     display: flex;
     gap: var(--go-ui-spacing-4xs);
-    color: var(--go-ui-color-text-light);
-    font-size: var(--go-ui-font-size-sm);
+    color: var(--go-ui-color-text);
+    font-size: var(--go-ui-font-size-md);
+    font-weight: var(--go-ui-font-weight-medium);
 
     &.disabled {
         color: var(--go-ui-color-gray-40);
     }
 
     .required {
-        color: var(--go-ui-color-primary-red);
+        color: var(--go-ui-color-text);
     }
 }
diff --git a/packages/ui/src/components/InputSection/index.tsx b/packages/ui/src/components/InputSection/index.tsx
index 963a0b3291..27797863d4 100644
--- a/packages/ui/src/components/InputSection/index.tsx
+++ b/packages/ui/src/components/InputSection/index.tsx
@@ -1,7 +1,8 @@
 import Container from '#components/Container';
 import Description from '#components/Description';
-import InfoPopup from '#components/InfoPopup';
 import ListView from '#components/ListView';
+import MoreInfo from '#components/MoreInfo';
+import { BoxShadowType } from '#utils/style';
 
 type NumColumn = 1 | 2 | 3 | 4;
 export interface Props {
@@ -14,13 +15,19 @@ export interface Props {
     withoutTitleSection?: boolean;
     withFullWidthContent?: boolean;
     withoutPadding?: boolean;
+    /** Drops the default foreground surface */
     withoutBackground?: boolean;
     withAsteriskOnTitle?: boolean;
     numPreferredColumns?: NumColumn;
-    withShadow?: boolean;
+    /** Shadow token forwarded to the underlying Container */
+    boxShadow?: BoxShadowType;
     headerActions?: React.ReactNode;
 }
 
+/**
+ * Form section grouping inputs under a titled, padded card
+ * (specific layer).
+ */
 function InputSection(props: Props) {
     const {
         // className,
@@ -35,7 +42,7 @@ function InputSection(props: Props) {
         withAsteriskOnTitle,
         numPreferredColumns = 1,
         withFullWidthContent,
-        withShadow,
+        boxShadow,
         headerActions,
     } = props;
 
@@ -53,7 +60,7 @@ function InputSection(props: Props) {
                     )}
                     headerActions={(
                         <>
-                            {tooltip && <InfoPopup description={tooltip} />}
+                            {tooltip && <MoreInfo>{tooltip}</MoreInfo>}
                             {headerActions}
                         </>
                     )}
@@ -84,8 +91,8 @@ function InputSection(props: Props) {
     return (
         <Container
             withPadding={!withoutPadding}
-            withBackground={!withoutBackground}
-            withShadow={withShadow}
+            backgroundColor={withoutBackground ? undefined : 'foreground'}
+            boxShadow={boxShadow}
             spacing="lg"
             // className={_cs(
             //     styles.inputSection,
diff --git a/packages/ui/src/components/KeyFigure/index.tsx b/packages/ui/src/components/KeyFigure/index.tsx
index 6f75217ca3..2ddd56fda2 100644
--- a/packages/ui/src/components/KeyFigure/index.tsx
+++ b/packages/ui/src/components/KeyFigure/index.tsx
@@ -1,103 +1,77 @@
-import { useMemo } from 'react';
-import { _cs } from '@togglecorp/fujs';
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
 
-import BooleanOutput, { Props as BooleanOutputProps } from '#components/BooleanOutput';
-import DateOutput, { Props as DateOutputProps } from '#components/DateOutput';
-import NumberOutput, { Props as NumberOutputProps } from '#components/NumberOutput';
+import RawDisplay, { Props as RawDisplayProps } from '#components/RawDisplay';
+import {
+    getTextSizeClassName,
+    TextSizeType,
+} from '#utils/style';
 
 import styles from './styles.module.css';
 
+export type KeyFigureTextSize = Extract<TextSizeType, '2xl' | '3xl' | '4xl'>;
+
 interface CommonProps {
     className?: string;
     label?: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg';
-}
-
-interface BooleanProps {
-    valueType: 'boolean',
-    value: BooleanOutputProps['value'];
-    valueOptions?: Omit<BooleanOutputProps, 'value'>
-}
-
-interface NumberProps {
-    valueType: 'number',
-    value: NumberOutputProps['value'];
-    valueOptions?: Omit<NumberOutputProps, 'value'>;
-}
-
-interface DateProps {
-    valueType: 'date',
-    value: DateOutputProps['value'],
-    valueOptions?: Omit<DateOutputProps, 'value'>;
+    /** De-emphasised trailing text shown beside the value (e.g. "/ 4"). */
+    supplement?: React.ReactNode;
+    /**
+     * Font size token for the figure value, narrowed to the large end
+     * of the text-size scale (the old size prop mapped sm/md/lg to
+     * 2xl/3xl/4xl)
+     */
+    textSize?: KeyFigureTextSize;
 }
 
-interface TextProps {
-    valueType: 'text',
-    value: string | null | undefined;
-    valueOptions?: never;
-}
-
-export type Props = CommonProps & (
-    BooleanProps | NumberProps | DateProps | TextProps
-);
-
+export type Props = CommonProps & RawDisplayProps;
+
+/**
+ * Embeddable key figure: a large typed value over a small label
+ * (specific layer).
+ *
+ * Value rendering is delegated to RawDisplay, so the `valueType`
+ * discriminated union (boolean/number/date/text or a plain node)
+ * and the per-type props come from RawDisplayProps. The big value
+ * therefore inherits the value-output treatment (native `<data>` /
+ * `<time>` plus a full reading for assistive tech) from the display
+ * primitives.
+ */
 function KeyFigure(props: Props) {
     const {
         className,
         label,
-        size = 'md',
-
-        valueType,
-        value,
-        valueOptions,
+        supplement,
+        textSize = '3xl',
+        ...rawDisplayProps
     } = props;
 
-    const valueComponent = useMemo(() => {
-        if (valueType === 'boolean') {
-            return (
-                <BooleanOutput
-                    value={value}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...valueOptions}
-                />
-            );
-        }
-
-        if (valueType === 'number') {
-            return (
-                <NumberOutput
-                    value={value}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...valueOptions}
-                />
-            );
-        }
-
-        if (valueType === 'date') {
-            return (
-                <DateOutput
-                    value={value}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...valueOptions}
-                />
-            );
-        }
-
-        return value;
-    }, [valueType, value, valueOptions]);
-
     return (
         <div
             className={_cs(
                 styles.keyFigure,
-                size === 'sm' && styles.smallSize,
-                size === 'md' && styles.mediumSize,
-                size === 'lg' && styles.largeSize,
                 className,
             )}
         >
-            <div className={styles.value}>
-                {valueComponent}
+            <div className={styles.valueRow}>
+                <div
+                    className={_cs(
+                        styles.value,
+                        getTextSizeClassName(textSize),
+                    )}
+                >
+                    <RawDisplay
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...rawDisplayProps}
+                    />
+                </div>
+                {isDefined(supplement) && (
+                    <div className={styles.supplement}>
+                        {supplement}
+                    </div>
+                )}
             </div>
             <div className={styles.label}>
                 {label}
diff --git a/packages/ui/src/components/KeyFigure/styles.module.css b/packages/ui/src/components/KeyFigure/styles.module.css
index 9acd376fa1..c458f356c2 100644
--- a/packages/ui/src/components/KeyFigure/styles.module.css
+++ b/packages/ui/src/components/KeyFigure/styles.module.css
@@ -1,23 +1,22 @@
 .key-figure {
-    .value {
-        font-weight: var(--go-ui-font-weight-medium);
+    .value-row {
+        display: flex;
+        align-items: baseline;
+        gap: var(--go-ui-spacing-4xs);
     }
 
-    &.small-size {
-        .value {
-            font-size: var(--go-ui-font-size-2xl);
-        }
+    .value {
+        font-weight: var(--go-ui-font-weight-bold);
     }
 
-    &.medium-size {
-        .value {
-            font-size: var(--go-ui-font-size-3xl);
-        }
+    .supplement {
+        color: var(--go-ui-color-text-light);
+        font-size: var(--go-ui-font-size-xl);
+        font-weight: var(--go-ui-font-weight-normal);
     }
 
-    &.large-size {
-        .value {
-            font-size: var(--go-ui-font-size-4xl);
-        }
+    /* Label reads visibly smaller than the value (design guideline). */
+    .label {
+        font-size: var(--go-ui-font-size-sm);
     }
 }
diff --git a/packages/ui/src/components/KeyFigureView/index.tsx b/packages/ui/src/components/KeyFigureCard/index.tsx
similarity index 77%
rename from packages/ui/src/components/KeyFigureView/index.tsx
rename to packages/ui/src/components/KeyFigureCard/index.tsx
index 83860198b9..849c133353 100644
--- a/packages/ui/src/components/KeyFigureView/index.tsx
+++ b/packages/ui/src/components/KeyFigureCard/index.tsx
@@ -8,12 +8,12 @@ import InlineLayout from '#components/InlineLayout';
 import KeyFigure, { type Props as KeyFigureProps } from '#components/KeyFigure';
 import ListView from '#components/ListView';
 import ProgressBar from '#components/ProgressBar';
+import { BoxShadowType } from '#utils/style';
 
 import styles from './styles.module.css';
 
 export type Props = {
     className?: string;
-    children?: React.ReactNode;
 
     icon?: React.ReactNode;
     info?: React.ReactNode;
@@ -22,10 +22,18 @@ export type Props = {
     progress?: number;
     progressDescription?: React.ReactNode;
 
-    withShadow?: boolean;
+    /** Shadow token for the card surface (the old withShadow boolean meant 'md') */
+    boxShadow?: BoxShadowType;
 } & KeyFigureProps;
 
-function KeyFigureView(props: Props) {
+/**
+ * KeyFigure presented on a white card surface, optionally with an
+ * icon, an info slot and a progress bar (specific layer).
+ *
+ * All KeyFigure props (label, textSize and the RawDisplay value union)
+ * are forwarded to the embedded KeyFigure.
+ */
+function KeyFigureCard(props: Props) {
     const {
         className,
 
@@ -34,7 +42,7 @@ function KeyFigureView(props: Props) {
         progressDescription,
         icon,
         info,
-        withShadow,
+        boxShadow,
 
         ...keyFigureProps
     } = props;
@@ -45,10 +53,10 @@ function KeyFigureView(props: Props) {
             empty={false}
             errored={false}
             filtered={false}
-            className={_cs(styles.keyFigureView, className)}
+            className={_cs(styles.keyFigureCard, className)}
             withPadding
-            withBackground
-            withShadow={withShadow}
+            backgroundColor="foreground"
+            boxShadow={boxShadow}
             withoutSpacingOpticalCorrection={isDefined(icon) || isDefined(info)}
         >
             <ListView layout="block">
@@ -83,4 +91,4 @@ function KeyFigureView(props: Props) {
     );
 }
 
-export default KeyFigureView;
+export default KeyFigureCard;
diff --git a/packages/ui/src/components/KeyFigureView/styles.module.css b/packages/ui/src/components/KeyFigureCard/styles.module.css
similarity index 88%
rename from packages/ui/src/components/KeyFigureView/styles.module.css
rename to packages/ui/src/components/KeyFigureCard/styles.module.css
index 92599bf5d4..c747d4f157 100644
--- a/packages/ui/src/components/KeyFigureView/styles.module.css
+++ b/packages/ui/src/components/KeyFigureCard/styles.module.css
@@ -1,4 +1,4 @@
-.key-figure-view {
+.key-figure-card {
     .icon {
         line-height: 1;
         color: var(--go-ui-color-primary-red);
diff --git a/packages/ui/src/components/Label/styles.module.css b/packages/ui/src/components/Label/styles.module.css
deleted file mode 100644
index ac7cdb83b1..0000000000
--- a/packages/ui/src/components/Label/styles.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.label {
-    &.strong {
-        font-weight: var(--go-ui-font-weight-medium);
-    }
-
-    &.with-uppercase-letters {
-        text-transform: uppercase;
-    }
-
-    &.text-size-small {
-        font-size: var(--go-ui-font-size-sm);
-    }
-
-    &.text-size-medium {
-        font-size: var(--go-ui-font-size-md);
-    }
-
-    &.text-size-large {
-        font-size: var(--go-ui-font-size-lg);
-    }
-}
diff --git a/packages/ui/src/components/LegendItem/styles.module.css b/packages/ui/src/components/LegendItem/styles.module.css
index f1d3d8e91f..8857caea34 100644
--- a/packages/ui/src/components/LegendItem/styles.module.css
+++ b/packages/ui/src/components/LegendItem/styles.module.css
@@ -30,7 +30,7 @@
         &.with-color-inverted-icon {
             > * {
                 transform: scale(1.2);
-                color: #000;
+                color: var(--go-ui-color-black);
                 filter: invert(1);
             }
         }
diff --git a/packages/ui/src/components/List/index.tsx b/packages/ui/src/components/List/index.tsx
deleted file mode 100644
index 146a34cbfe..0000000000
--- a/packages/ui/src/components/List/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import {
-    _cs,
-    isNotDefined,
-} from '@togglecorp/fujs';
-
-import DefaultMessage from '#components/DefaultMessage';
-import RawList, {
-    type ListKey,
-    type Props as RawListProps,
-} from '#components/RawList';
-
-import styles from './styles.module.css';
-
-export interface Props<
-    DATUM,
-    KEY extends ListKey,
-    RENDERER_PROPS
-> extends RawListProps<DATUM, KEY, RENDERER_PROPS> {
-    className?: string;
-    messageClassName?: string;
-
-    pending: boolean;
-    errored: boolean;
-    filtered: boolean;
-
-    emptyMessage?: React.ReactNode;
-    pendingMessage?: React.ReactNode;
-    errorMessage?: React.ReactNode;
-    filteredEmptyMessage?: React.ReactNode;
-
-    compact?: boolean;
-    withoutMessage?: boolean;
-}
-
-function List<DATUM, KEY extends ListKey, RENDERER_PROPS>(
-    props: Props<DATUM, KEY, RENDERER_PROPS>,
-) {
-    const {
-        className,
-        data,
-        keySelector,
-        renderer,
-        rendererParams,
-
-        pending,
-        errored,
-        filtered,
-
-        errorMessage,
-        emptyMessage,
-        pendingMessage,
-        filteredEmptyMessage,
-
-        compact,
-        withoutMessage = false,
-        messageClassName,
-    } = props;
-
-    const isEmpty = isNotDefined(data) || data.length === 0;
-
-    return (
-        <div
-            className={_cs(
-                styles.list,
-                compact && styles.compact,
-                pending && styles.pending,
-                className,
-            )}
-        >
-            <RawList
-                data={data}
-                keySelector={keySelector}
-                renderer={renderer}
-                rendererParams={rendererParams}
-            />
-            {!withoutMessage && (
-                <DefaultMessage
-                    className={messageClassName}
-                    pending={pending}
-                    filtered={filtered}
-                    empty={isEmpty}
-                    errored={errored}
-                    compact={compact}
-                    emptyMessage={emptyMessage}
-                    filteredEmptyMessage={filteredEmptyMessage}
-                    pendingMessage={pendingMessage}
-                    errorMessage={errorMessage}
-                    overlayPending
-                />
-            )}
-        </div>
-    );
-}
-
-export default List;
diff --git a/packages/ui/src/components/List/styles.module.css b/packages/ui/src/components/List/styles.module.css
deleted file mode 100644
index de1054f365..0000000000
--- a/packages/ui/src/components/List/styles.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.list {
-    position: relative;
-    min-height: var(--go-ui-content-min-height);
-
-    &.compact {
-        min-height: unset;
-
-        &.pending {
-            min-height: var(--go-ui-compact-content-min-height);
-        }
-    }
-}
diff --git a/packages/ui/src/components/ListView/index.tsx b/packages/ui/src/components/ListView/index.tsx
index ce16d0a2ac..71f18f15f6 100644
--- a/packages/ui/src/components/ListView/index.tsx
+++ b/packages/ui/src/components/ListView/index.tsx
@@ -3,12 +3,17 @@ import {
     useLayoutEffect,
     useRef,
 } from 'react';
-import { _cs } from '@togglecorp/fujs';
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
 
-import useSpacingToken from '#hooks/useSpacingToken';
 import {
+    BackgroundColorType,
     fullSpacings,
     gapSpacings,
+    getBackgroundColorClassName,
+    getSpacingClassName,
     getSpacingValue,
     SpacingType,
 } from '#utils/style';
@@ -28,17 +33,23 @@ function useFallbackRef<T>(ref?: React.Ref<T>) {
 
 interface CommonProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
     className?: string;
+    /** Ref to the root DOM node */
     elementRef?: RefObject<HTMLDivElement | null>;
 
     spacing?: SpacingType;
     spacingOffset?: number;
+    /**
+     * Defaults to false, unlike the sibling layout components
+     * (which default the correction on): list items usually carry
+     * their own line-height compensation
+     */
     withSpacingOpticalCorrection?: boolean;
 
     children?: React.ReactNode;
     withPadding?: boolean;
     withFullWidth?: boolean;
-    withBackground?: boolean;
-    withDarkBackground?: boolean;
+    /** Surface color token; setting it also rounds the corners ('md') */
+    backgroundColor?: BackgroundColorType;
     withOverflow?: boolean;
     withGrow?: boolean;
 }
@@ -110,6 +121,10 @@ InlineLayoutProps
 | GridLayoutWithSidebarProps
 );
 
+/**
+ * List/grid layout primitive with inline, block, grid and
+ * grid-with-sidebar modes (generic layer).
+ */
 function ListView(props: Props) {
     const {
         className,
@@ -120,8 +135,7 @@ function ListView(props: Props) {
         withStartAlignment,
         spacing,
         withPadding,
-        withBackground,
-        withDarkBackground,
+        backgroundColor,
         children,
         numPreferredGridColumns = 2,
         minGridColumnSize = '12rem',
@@ -162,7 +176,7 @@ function ListView(props: Props) {
         }
     }, [numPreferredGridColumns, minGridColumnSize, layout, withPadding, spacing, elementRef]);
 
-    const spacingClassName = useSpacingToken({
+    const spacingClassName = getSpacingClassName({
         spacing,
         offset: spacingOffset,
         modes: withPadding ? fullSpacings : gapSpacings,
@@ -185,14 +199,13 @@ function ListView(props: Props) {
                 withSpaceBetweenContents && styles.withSpaceBetweenContents,
                 withCenteredContents && styles.withCenteredContents,
                 withFullWidth && styles.withFullWidth,
-                withBackground && styles.withBackground,
-                withDarkBackground && styles.withDarkBackground,
+                getBackgroundColorClassName(backgroundColor),
+                isDefined(backgroundColor) && styles.withBackgroundColor,
                 withSidebar && styles.withSidebar,
                 withOverflow && styles.withOverflow,
                 withGrow && styles.withGrow,
                 className,
             )}
-            role={layout !== 'grid' ? 'list' : undefined}
         >
             {layout === 'grid' && (
                 <div
@@ -207,7 +220,6 @@ function ListView(props: Props) {
                         sidebarSize === 'md' && styles.mdSidebar,
                         sidebarSize === 'lg' && styles.lgSidebar,
                     )}
-                    role="grid"
                 >
                     {children}
                 </div>
diff --git a/packages/ui/src/components/ListView/styles.module.css b/packages/ui/src/components/ListView/styles.module.css
index 5f383b0d12..f773346b3e 100644
--- a/packages/ui/src/components/ListView/styles.module.css
+++ b/packages/ui/src/components/ListView/styles.module.css
@@ -109,14 +109,9 @@
         width: 100%;
     }
 
-    &.with-background {
+    /* background-color itself comes from the spec utility class */
+    &.with-background-color {
         --border-radius: var(--go-ui-border-radius-md);
-        background-color: var(--go-ui-color-foreground);
-    }
-
-    &.with-dark-background {
-        --border-radius: var(--go-ui-border-radius-md);
-        background-color: var(--go-ui-color-background);
     }
 
     &:empty {
diff --git a/packages/ui/src/components/Menu/index.tsx b/packages/ui/src/components/Menu/index.tsx
new file mode 100644
index 0000000000..3e4b3567c4
--- /dev/null
+++ b/packages/ui/src/components/Menu/index.tsx
@@ -0,0 +1,150 @@
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+} from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import { Props as ButtonProps } from '#components/Button';
+import Dropdown from '#components/Dropdown';
+import MenuContext, { type MenuContextProps } from '#contexts/menu';
+import { SpacingType } from '#utils/style';
+
+import styles from './styles.module.css';
+
+type DropdownHandle = {
+    setShowDropdown: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export interface Props {
+    className?: string;
+    /** Applied to the toggle button while the dropdown is open */
+    activeClassName?: string;
+
+    popupClassName?: string;
+    withoutPopupPadding?: boolean;
+    preferredPopupWidth?: number;
+
+    label?: React.ReactNode;
+    labelBefore?: React.ReactNode;
+    labelAfter?: React.ReactNode;
+    labelSpacing?: SpacingType;
+    /** Curated Button variant for the toggle button */
+    labelVariant?: ButtonProps<undefined>['variant'];
+    labelWithoutPadding?: boolean;
+
+    children?: React.ReactNode;
+
+    withoutDropdownIcon?: boolean;
+    /** Accessible name for the trigger when it has no visible text label */
+    ariaLabel?: string;
+    /** Imperative handle to open/close the menu programmatically */
+    componentRef?: React.RefObject<DropdownHandle | null>;
+    /** Refers to the toggle button's root element (also used as the popover parent) */
+    elementRef?: React.RefObject<HTMLDivElement | null>;
+    /** Keeps the menu open when clicking inside the popover */
+    persistent?: boolean;
+}
+
+/**
+ * Action menu (specific layer).
+ *
+ * Composes the generic Dropdown disclosure and layers menu semantics on top:
+ * the trigger advertises `aria-haspopup="menu"`, the popover content gets
+ * `role="menu"`, and each child is wrapped in a `role="menuitem"`. Escape and
+ * outside-click close it. Items can close the menu via `MenuContext`.
+ */
+function Menu(props: Props) {
+    const {
+        className,
+        activeClassName,
+
+        children,
+
+        label,
+        labelBefore,
+        labelAfter,
+        labelSpacing,
+        labelVariant,
+        labelWithoutPadding,
+
+        withoutDropdownIcon,
+        ariaLabel,
+        componentRef,
+        elementRef,
+        persistent,
+
+        popupClassName,
+        preferredPopupWidth,
+        withoutPopupPadding,
+    } = props;
+
+    const dropdownHandleRef = useRef<DropdownHandle | null>(null);
+
+    // Mirror the Dropdown imperative handle onto the public componentRef.
+    useEffect(() => {
+        if (componentRef) {
+            componentRef.current = dropdownHandleRef.current;
+        }
+    });
+
+    // Stable proxy so MenuContext consumers (e.g. menu items) can close the
+    // menu without depending on the Dropdown handle being populated yet.
+    const setShowDropdown = useCallback<MenuContextProps['setShowDropdown']>(
+        (value) => {
+            dropdownHandleRef.current?.setShowDropdown(value);
+        },
+        [],
+    );
+
+    const contextValue = useMemo<MenuContextProps>(
+        () => ({
+            setShowDropdown,
+        }),
+        [setShowDropdown],
+    );
+
+    // The container carries `role="menu"`; the interactive `role="menuitem"`
+    // belongs on each item's own focusable element (app-side DropdownMenuItem),
+    // not on a wrapper, so children are rendered as-is.
+    // FIXME(a11y-tier2): add arrow-key roving tabindex and type-ahead between
+    // menu items (only basic menu roles + Escape are wired here).
+    const renderMenuContent = useCallback(
+        (content: React.ReactNode) => (
+            <div role="menu">
+                {content}
+            </div>
+        ),
+        [],
+    );
+
+    return (
+        <MenuContext.Provider value={contextValue}>
+            <Dropdown
+                className={_cs(styles.menu, className)}
+                activeClassName={activeClassName}
+                componentRef={dropdownHandleRef}
+                elementRef={elementRef}
+                persistent={persistent}
+                label={label}
+                labelBefore={labelBefore}
+                labelAfter={labelAfter}
+                labelSpacing={labelSpacing}
+                labelVariant={labelVariant}
+                labelWithoutPadding={labelWithoutPadding}
+                withoutDropdownIcon={withoutDropdownIcon}
+                ariaLabel={ariaLabel}
+                ariaHasPopup="menu"
+                popupClassName={popupClassName}
+                preferredPopupWidth={preferredPopupWidth}
+                withoutPopupPadding={withoutPopupPadding}
+                popupContentRenderer={renderMenuContent}
+            >
+                {children}
+            </Dropdown>
+        </MenuContext.Provider>
+    );
+}
+
+export default Menu;
diff --git a/packages/ui/src/components/Menu/styles.module.css b/packages/ui/src/components/Menu/styles.module.css
new file mode 100644
index 0000000000..1805455100
--- /dev/null
+++ b/packages/ui/src/components/Menu/styles.module.css
@@ -0,0 +1,3 @@
+.menu {
+    align-items: center;
+}
diff --git a/packages/ui/src/components/Message/index.tsx b/packages/ui/src/components/Message/index.tsx
index 67f86614c0..90cf50f436 100644
--- a/packages/ui/src/components/Message/index.tsx
+++ b/packages/ui/src/components/Message/index.tsx
@@ -11,20 +11,29 @@ type MessageVariant = 'info' | 'error';
 
 export interface Props {
     className?: string;
+    /** Semantic tone of the message; 'error' highlights the title */
     variant?: MessageVariant;
     icon?: React.ReactNode;
     actions?: React.ReactNode;
+    /** Use reduced sizing and spacing for constrained contexts */
     compact?: boolean;
 
+    /** Show a spinner in place of the icon */
     pending?: boolean;
     title?: React.ReactNode;
     description?: React.ReactNode;
 
+    /** Show the errored title/description instead of the default ones */
     errored?: boolean;
     erroredTitle?: React.ReactNode;
     erroredDescription?: React.ReactNode;
 }
 
+/**
+ * Message displays status feedback content (pending, empty or errored
+ * states) with an optional icon, title, description and actions.
+ * Generic layer: consumed by DefaultMessage, Container, etc.
+ */
 function Message(props: Props) {
     const {
         className,
@@ -45,6 +54,9 @@ function Message(props: Props) {
 
     return (
         <div
+            // NOTE: status feedback (pending/empty/errored) -> polite live region
+            role="status"
+            aria-busy={pending}
             className={_cs(
                 styles.message,
                 variant === 'error' && styles.errored,
@@ -65,7 +77,7 @@ function Message(props: Props) {
             )}
             {showDescription && (
                 <div className={styles.description}>
-                    {description}
+                    {errored ? erroredDescription : description}
                 </div>
             )}
             {actions && (
diff --git a/packages/ui/src/components/Modal/index.tsx b/packages/ui/src/components/Modal/index.tsx
deleted file mode 100644
index a7148fb4b6..0000000000
--- a/packages/ui/src/components/Modal/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
-    useCallback,
-    useEffect,
-} from 'react';
-import { FocusOn } from 'react-focus-on';
-import { CloseFillIcon } from '@ifrc-go/icons';
-import { _cs } from '@togglecorp/fujs';
-
-import Button from '#components/Button';
-import Container, { type Props as ContainerProps } from '#components/Container';
-import Portal from '#components/Portal';
-import useTranslation from '#hooks/useTranslation';
-
-import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'pageWidth' | 'full' | 'auto';
-
-const sizeToStyleMap: Record<ModalSize, string> = {
-    sm: styles.sizeSm,
-    md: styles.sizeMd,
-    lg: styles.sizeLg,
-    xl: styles.sizeXl,
-    full: styles.sizeFull,
-    auto: styles.sizeAuto,
-    pageWidth: styles.pageWidth,
-};
-
-export interface Props extends Omit<ContainerProps, 'withInternalPadding' | 'withoutWrapInHeading' | 'size'> {
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    onClose?: () => void;
-    overlayClassName?: string;
-    modalContainerClassName?: string;
-    size?: ModalSize;
-    withoutCloseButton?: boolean;
-}
-
-function Modal(props: Props) {
-    const {
-        closeOnClickOutside = false,
-        closeOnEscape = false,
-        onClose,
-        overlayClassName,
-        size = 'md',
-        withoutCloseButton = false,
-
-        className,
-        headerActions,
-        modalContainerClassName,
-
-        ...containerProps
-    } = props;
-
-    const strings = useTranslation(i18n);
-
-    useEffect(
-        () => {
-            const prevValue = document.documentElement.style.scrollbarGutter;
-            document.documentElement.style.scrollbarGutter = 'initial';
-
-            return () => {
-                document.documentElement.style.scrollbarGutter = prevValue;
-            };
-        },
-        [],
-    );
-
-    const sizeStyle = sizeToStyleMap[size];
-
-    const handleClickOutside = useCallback(() => {
-        if (closeOnClickOutside && onClose) {
-            onClose();
-        }
-    }, [onClose, closeOnClickOutside]);
-
-    const handleEscape = useCallback(() => {
-        if (closeOnEscape && onClose) {
-            onClose();
-        }
-    }, [onClose, closeOnEscape]);
-
-    return (
-        <Portal>
-            <div className={_cs(styles.overlay, overlayClassName)}>
-                <FocusOn
-                    className={_cs(styles.focusContainer, modalContainerClassName, sizeStyle)}
-                    onClickOutside={handleClickOutside}
-                    onEscapeKey={handleEscape}
-                    gapMode="padding"
-                    // gapMode={null}
-                >
-                    <Container
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...containerProps}
-                        withPadding
-                        withoutWrapInHeader
-                        withoutWrapInFooter
-                        className={_cs(styles.modal, className)}
-                        withContentOverflow
-                        headerActions={(!withoutCloseButton || headerActions) ? (
-                            <>
-                                {headerActions}
-                                <Button
-                                    name={undefined}
-                                    onClick={onClose}
-                                    styleVariant="action"
-                                    colorVariant="text"
-                                    title={strings.closeButtonLabel}
-                                >
-                                    <CloseFillIcon className={styles.closeIcon} />
-                                </Button>
-                            </>
-                        ) : undefined}
-                    />
-                </FocusOn>
-            </div>
-        </Portal>
-    );
-}
-
-export default Modal;
diff --git a/packages/ui/src/components/Modal/styles.module.css b/packages/ui/src/components/Modal/styles.module.css
deleted file mode 100644
index 92bf7e39d8..0000000000
--- a/packages/ui/src/components/Modal/styles.module.css
+++ /dev/null
@@ -1,100 +0,0 @@
-.overlay {
-    display: flex;
-    position: fixed;
-    top: 0;
-    left: 0;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--go-ui-color-background-overlay-dark);
-    width: 100vw;
-    height: 100vh;
-    overflow: auto;
-    animation: fade-in var(--go-ui-duration-transition-medium) ease-in forwards;
-
-    .focus-container {
-        --spacing: calc(var(--go-ui-spacing-md) * 2);
-        --max-full-width: calc(100% - var(--spacing));
-        --max-page-width: calc(var(--go-ui-page-width-max) - var(--spacing));
-        --max-full-height: calc(100% - var(--spacing));
-
-        --max-width: min(var(--max-full-width), var(--max-page-width));
-        --max-height: var(--max-full-height);
-
-        display: block;
-        width: 100%;
-        max-width: var(--max-width);
-        height: 100%;
-        max-height: var(--max-height);
-        overflow: auto;
-        animation: slide-down var(--go-ui-duration-transition-medium) ease-in forwards;
-
-        &.size-sm {
-            max-width: min(var(--max-width), var(--go-ui-width-modal-sm));
-            height: auto;
-            /* FIXME: use variable */
-            min-height: min(var(--max-height), 18vh, 12rem);
-        }
-
-        &.size-md {
-            max-width: min(var(--max-width), var(--go-ui-width-modal-md));
-            height: auto;
-            /* FIXME: use variable */
-            min-height: min(var(--max-height), 32vh, 20rem);
-        }
-
-        &.size-lg {
-            max-width: min(var(--max-width), var(--go-ui-width-modal-lg));
-            max-height: min(var(--max-height), 70vh);
-        }
-
-        &.size-xl {
-            max-width: min(var(--max-width), var(--go-ui-width-modal-xl));
-            max-height: min(var(--max-height), 90vh);
-        }
-
-        /* FIXME: remove either size-full or page-width variant */
-        &.size-full {
-            width: 100%;
-            height: 100%;
-        }
-
-        &.page-width {
-            width: 100%;
-            height: 100%;
-        }
-
-        &.size-auto {
-            width: max-content;
-            height: max-content;
-        }
-
-        .modal {
-            border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
-            border-radius: var(--go-ui-border-radius-lg);
-            box-shadow: var(--go-ui-box-shadow-2xl);
-            background-color: var(--go-ui-color-white);
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-
-            .close-icon {
-                font-size: var(--go-ui-height-icon-multiplier);
-            }
-
-            .content {
-                flex-grow: 1;
-                overflow: auto;
-            }
-        }
-    }
-}
-
-@keyframes fade-in {
-    from { opacity: 0 }
-    to { opacity: 1 }
-}
-
-@keyframes slide-down {
-    from { transform: translateY(-5pt) }
-    to { transform: translateY(0) }
-}
diff --git a/packages/ui/src/components/MoreInfo/i18n.json b/packages/ui/src/components/MoreInfo/i18n.json
new file mode 100644
index 0000000000..b985516f87
--- /dev/null
+++ b/packages/ui/src/components/MoreInfo/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "moreInfoLabel": "More information"
+    }
+}
diff --git a/packages/ui/src/components/MoreInfo/index.tsx b/packages/ui/src/components/MoreInfo/index.tsx
new file mode 100644
index 0000000000..57403f32c8
--- /dev/null
+++ b/packages/ui/src/components/MoreInfo/index.tsx
@@ -0,0 +1,146 @@
+import {
+    useCallback,
+    useState,
+} from 'react';
+import { InformationLineIcon } from '@ifrc-go/icons';
+import {
+    _cs,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import Button from '#components/Button';
+import Container from '#components/Container';
+import Dialog from '#components/Dialog';
+import Dropdown from '#components/Dropdown';
+import useTranslation from '#hooks/useTranslation';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+export interface Props {
+    /** How the info content is revealed (defaults to `'popover'`) */
+    as?: 'popover' | 'dialog';
+    icon?: React.ReactNode;
+    /** Hide the info icon (shown by default) */
+    withoutIcon?: boolean;
+    /** Visible trigger content (replaces the deprecated `infoLabel`) */
+    label?: React.ReactNode;
+    /**
+     * @deprecated use `label`
+     */
+    infoLabel?: React.ReactNode;
+    /** Accessible name for the trigger when it has no visible text label */
+    ariaLabel?: string;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /**
+     * @deprecated use `children`
+     */
+    description?: React.ReactNode;
+    popupClassName?: string;
+    className?: string;
+}
+
+/**
+ * Generic info affordance (specific layer).
+ *
+ * A small trigger (an info icon by default) that reveals a title and body in a
+ * Popover (`as='popover'`, via the generic Dropdown disclosure) or in a modal
+ * Dialog (`as='dialog'`). The trigger is a real `<button>` advertising
+ * `aria-haspopup` and an accessible name.
+ */
+function MoreInfo(props: Props) {
+    const {
+        as = 'popover',
+        className,
+        icon = <InformationLineIcon />,
+        label,
+        infoLabel,
+        ariaLabel,
+        title,
+        children,
+        description,
+        withoutIcon,
+        popupClassName,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [showDialog, setShowDialog] = useState(false);
+
+    const handleDialogOpen = useCallback(() => { setShowDialog(true); }, []);
+    const handleDialogClose = useCallback(() => { setShowDialog(false); }, []);
+
+    const triggerLabel = label ?? infoLabel;
+    const body = children ?? description;
+    const hasVisibleLabel = !isNotDefined(triggerLabel);
+    const accessibleName = ariaLabel
+        ?? (hasVisibleLabel ? undefined : strings.moreInfoLabel);
+
+    const triggerContent = (
+        <div className={styles.label}>
+            {triggerLabel}
+            {!withoutIcon && icon && (
+                <div className={styles.icon}>
+                    {icon}
+                </div>
+            )}
+        </div>
+    );
+
+    if (as === 'dialog') {
+        return (
+            <div className={_cs(styles.moreInfo, className)}>
+                <Button
+                    name={undefined}
+                    onClick={handleDialogOpen}
+                    variant="tertiary"
+                    spacing="none"
+                    aria-haspopup="dialog"
+                    aria-expanded={showDialog}
+                    aria-label={accessibleName}
+                >
+                    {triggerContent}
+                </Button>
+                {showDialog && (
+                    <Dialog
+                        heading={title}
+                        onClose={handleDialogClose}
+                        closeOnEscape
+                        closeOnClickOutside
+                        size="sm"
+                        className={popupClassName}
+                    >
+                        {body}
+                    </Dialog>
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <Dropdown
+            label={triggerContent}
+            ariaHasPopup="dialog"
+            ariaLabel={accessibleName}
+            popupClassName={_cs(styles.dropdownContainer, popupClassName)}
+            className={_cs(styles.moreInfo, className)}
+            labelVariant="tertiary"
+            labelSpacing="none"
+            withoutDropdownIcon
+        >
+            <Container
+                pending={false}
+                empty={false}
+                filtered={false}
+                errored={false}
+                heading={title}
+                withPadding
+            >
+                {body}
+            </Container>
+        </Dropdown>
+    );
+}
+
+export default MoreInfo;
diff --git a/packages/ui/src/components/InfoPopup/styles.module.css b/packages/ui/src/components/MoreInfo/styles.module.css
similarity index 97%
rename from packages/ui/src/components/InfoPopup/styles.module.css
rename to packages/ui/src/components/MoreInfo/styles.module.css
index 40af02efb7..0e0203528a 100644
--- a/packages/ui/src/components/InfoPopup/styles.module.css
+++ b/packages/ui/src/components/MoreInfo/styles.module.css
@@ -1,4 +1,4 @@
-.info-popup {
+.more-info {
     display: inline-flex;
 
     .label {
diff --git a/packages/ui/src/components/NumberDisplay/index.test.tsx b/packages/ui/src/components/NumberDisplay/index.test.tsx
new file mode 100644
index 0000000000..562a5d334c
--- /dev/null
+++ b/packages/ui/src/components/NumberDisplay/index.test.tsx
@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+
+import NumberDisplay from './index';
+
+describe('NumberDisplay accessible value-output contract', () => {
+    it('exposes the raw value on the native <data> element (machine/test contract)', () => {
+        const { container } = render(<NumberDisplay value={42} />);
+        const el = container.querySelector('data');
+
+        expect(el).not.toBeNull();
+        // native attribute is the test hook — read el.value, not the text
+        expect(el).toHaveAttribute('value', '42');
+        // visible text already equals the full reading -> plain <data>, no role
+        expect(el).not.toHaveAttribute('role');
+        expect(el).not.toHaveAttribute('aria-label');
+    });
+
+    it('adds role="img" + full-reading aria-label when the compact text is lossy', () => {
+        const { getByRole } = render(<NumberDisplay value={1500000} compact />);
+        const el = getByRole('img');
+
+        expect(el).toHaveAttribute('value', '1500000');
+        expect(el).toHaveAttribute('aria-label', '1,500,000');
+        expect(el.textContent).toMatch(/M/);
+    });
+});
diff --git a/packages/ui/src/components/NumberDisplay/index.tsx b/packages/ui/src/components/NumberDisplay/index.tsx
new file mode 100644
index 0000000000..dc1c8fb413
--- /dev/null
+++ b/packages/ui/src/components/NumberDisplay/index.tsx
@@ -0,0 +1,156 @@
+import {
+    useContext,
+    useMemo,
+} from 'react';
+import {
+    _cs,
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import LanguageContext from '#contexts/language';
+import { formatNumber } from '#utils/common';
+import { DEFAULT_INVALID_TEXT } from '#utils/constants';
+
+import styles from './styles.module.css';
+
+export interface Props {
+    className?: string;
+    /**
+     * Text to show if invalid value is supplied
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Normalize number into Millions(M), Billion(B)
+     */
+    compact?: boolean;
+    /**
+     * Specify which separator to use for thousands
+     */
+    separatorHidden?: boolean,
+    /**
+     * The value of the numeral
+     */
+    value: number | undefined | null,
+    /**
+     * Text for tooltip
+     */
+    tooltip?: number | string | null | undefined;
+    currency?: boolean;
+    unit?: Intl.NumberFormatOptions['unit'];
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    maximumFractionDigits?: Intl.NumberFormatOptions['maximumFractionDigits'];
+
+}
+
+/**
+ * Renders a localised, formatted number (raw layer).
+ *
+ * The root is a native `<data value>` carrying the raw numeric value as
+ * the machine-readable / test contract. When abbreviation makes the
+ * visible string lossy (e.g. `compact`), the same formatter is re-run
+ * with abbreviation off to produce the full reading, exposed to
+ * assistive tech via `role="img"` + `aria-label`; when the visible text
+ * already equals the full reading, a plain `<data>` is rendered (no role
+ * / aria-label).
+ */
+function NumberDisplay(props: Props) {
+    const {
+        className,
+        invalidText = DEFAULT_INVALID_TEXT,
+        separatorHidden,
+        compact,
+        currency,
+        value,
+        tooltip,
+        unit,
+        prefix,
+        suffix,
+        maximumFractionDigits = 1,
+    } = props;
+
+    const { currentLanguage } = useContext(LanguageContext);
+
+    const formattedValue = useMemo(
+        () => formatNumber(
+            value,
+            {
+                currency,
+                compact,
+                separatorHidden,
+                maximumFractionDigits,
+                unit,
+                language: currentLanguage,
+            },
+        ),
+        [
+            value,
+            compact,
+            separatorHidden,
+            currency,
+            unit,
+            maximumFractionDigits,
+            currentLanguage,
+        ],
+    );
+
+    // The full, un-abbreviated reading for assistive tech: the same
+    // formatter with abbreviation (compact) off, keeping
+    // currency/unit/locale.
+    const fullFormattedValue = useMemo(
+        () => formatNumber(
+            value,
+            {
+                currency,
+                compact: false,
+                separatorHidden,
+                unit,
+                language: currentLanguage,
+            },
+        ),
+        [
+            value,
+            separatorHidden,
+            currency,
+            unit,
+            currentLanguage,
+        ],
+    );
+
+    if (isNotDefined(value)) {
+        return (
+            <data
+                className={_cs(styles.numberDisplay, className)}
+                value=""
+            >
+                {invalidText}
+            </data>
+        );
+    }
+
+    // role="img" only when the visible (possibly compacted) string is
+    // lossy, i.e. differs from the full reading. String prefix/suffix are
+    // folded into the label so the reading stays complete; non-string
+    // prefix/suffix (nodes) are left to their own semantics.
+    const isLossy = formattedValue !== fullFormattedValue;
+    const labelPrefix = typeof prefix === 'string' ? prefix : '';
+    const labelSuffix = typeof suffix === 'string' ? suffix : '';
+    const fullLabel = `${labelPrefix}${fullFormattedValue ?? ''}${labelSuffix}`;
+
+    return (
+        <data
+            className={_cs(styles.numberDisplay, className)}
+            value={String(value)}
+            title={isDefined(tooltip) ? String(tooltip) : undefined}
+            role={isLossy ? 'img' : undefined}
+            aria-label={isLossy ? fullLabel : undefined}
+        >
+            {prefix}
+            {formattedValue}
+            {suffix}
+        </data>
+    );
+}
+
+export default NumberDisplay;
diff --git a/packages/ui/src/components/NumberOutput/styles.module.css b/packages/ui/src/components/NumberDisplay/styles.module.css
similarity index 72%
rename from packages/ui/src/components/NumberOutput/styles.module.css
rename to packages/ui/src/components/NumberDisplay/styles.module.css
index ca313ab566..0f50fd1239 100644
--- a/packages/ui/src/components/NumberOutput/styles.module.css
+++ b/packages/ui/src/components/NumberDisplay/styles.module.css
@@ -1,4 +1,4 @@
-.number-output {
+.number-display {
     display: inline;
     font-size: inherit;
 }
diff --git a/packages/ui/src/components/NumberInput/index.tsx b/packages/ui/src/components/NumberInput/index.tsx
index 908026b1e2..fb76cacec4 100644
--- a/packages/ui/src/components/NumberInput/index.tsx
+++ b/packages/ui/src/components/NumberInput/index.tsx
@@ -1,6 +1,7 @@
 import {
     useCallback,
     useEffect,
+    useId,
     useMemo,
     useState,
 } from 'react';
@@ -18,6 +19,7 @@ type InheritedProps<NAME> = Omit<InputContainerProps, 'input'>
 & Omit<RawInputProps<NAME>, 'onChange' | 'value' | 'className' | 'elementRef'>;
 
 export interface Props<NAME> extends InheritedProps<NAME> {
+    /** Ref to the inner <input> node (elementRef refers to the root) */
     inputElementRef?: React.RefObject<HTMLInputElement | null>;
     inputClassName?: string;
     value: number | undefined | null;
@@ -30,11 +32,16 @@ export interface Props<NAME> extends InheritedProps<NAME> {
     prevValue?: number | undefined | null;
 }
 
+/**
+ * Numeric input composed of InputContainer and RawInput; keeps a local
+ * string state so partial input does not emit NaN (specific layer).
+ */
 function NumberInput<const T>(props: Props<T>) {
     const {
         disabled,
         readOnly,
         inputClassName,
+        inputElementRef,
         value: valueFromProps,
         required,
         onChange,
@@ -47,6 +54,15 @@ function NumberInput<const T>(props: Props<T>) {
     const [inputContainerProps, rawInputProps] = extractInputContainerProps(
         otherProps,
     );
+
+    const generatedId = useId();
+    const inputId = generatedId;
+    const hasError = isDefined(inputContainerProps.error);
+    const hasHint = isDefined(inputContainerProps.hint);
+    const errorId = hasError ? `${generatedId}-error` : undefined;
+    const hintId = hasHint ? `${generatedId}-hint` : undefined;
+    const describedBy = [hintId, errorId].filter(isDefined).join(' ') || undefined;
+
     const [tempValue, setTempValue] = useState<string | undefined>(String(valueFromProps ?? ''));
 
     useEffect(() => {
@@ -81,6 +97,9 @@ function NumberInput<const T>(props: Props<T>) {
         <InputContainer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...inputContainerProps}
+            inputId={inputId}
+            hintId={hintId}
+            errorId={errorId}
             disabled={disabled}
             readOnly={readOnly}
             required={required}
@@ -90,6 +109,11 @@ function NumberInput<const T>(props: Props<T>) {
                 <RawInput
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...rawInputProps}
+                    id={inputId}
+                    aria-invalid={hasError}
+                    aria-required={required}
+                    aria-describedby={describedBy}
+                    elementRef={inputElementRef}
                     className={inputClassName}
                     disabled={disabled}
                     onChange={handleChange}
diff --git a/packages/ui/src/components/NumberOutput/index.tsx b/packages/ui/src/components/NumberOutput/index.tsx
deleted file mode 100644
index a4b1d2be4f..0000000000
--- a/packages/ui/src/components/NumberOutput/index.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import {
-    useContext,
-    useMemo,
-} from 'react';
-import {
-    _cs,
-    isDefined,
-    isNotDefined,
-} from '@togglecorp/fujs';
-
-import LanguageContext from '#contexts/language';
-import { formatNumber } from '#utils/common';
-import { DEFAULT_INVALID_TEXT } from '#utils/constants';
-
-import styles from './styles.module.css';
-
-export interface Props {
-    className?: string;
-    /**
-     * Text to show if invalid value is supplied
-     */
-    invalidText?: React.ReactNode;
-    /**
-     * Normalize number into Millions(M), Billion(B)
-     */
-    compact?: boolean;
-    /**
-     * Specify which separator to use for thousands
-     */
-    separatorHidden?: boolean,
-    /**
-     * The value of the numeral
-     */
-    value: number | undefined | null,
-    /**
-     * Text for tooltip
-     */
-    tooltip?: number | string | null | undefined;
-    currency?: boolean;
-    unit?: Intl.NumberFormatOptions['unit'];
-    prefix?: React.ReactNode;
-    suffix?: React.ReactNode;
-    maximumFractionDigits?: Intl.NumberFormatOptions['maximumFractionDigits'];
-
-}
-
-/**
- * NumberOutput component for formatted numbers
- */
-function NumberOutput(props: Props) {
-    const {
-        className,
-        invalidText = DEFAULT_INVALID_TEXT,
-        separatorHidden,
-        compact,
-        currency,
-        value,
-        tooltip,
-        unit,
-        prefix,
-        suffix,
-        maximumFractionDigits = 1,
-    } = props;
-
-    const { currentLanguage } = useContext(LanguageContext);
-
-    const val = useMemo(
-        () => {
-            if (isNotDefined(value)) {
-                return invalidText;
-            }
-
-            const formattedValue = formatNumber(
-                value,
-                {
-                    currency,
-                    compact,
-                    separatorHidden,
-                    maximumFractionDigits,
-                    unit,
-                    language: currentLanguage,
-                },
-            );
-
-            return (
-                <>
-                    {prefix}
-                    {formattedValue}
-                    {suffix}
-                </>
-            );
-        },
-        [
-            invalidText,
-            value,
-            compact,
-            separatorHidden,
-            currency,
-            unit,
-            maximumFractionDigits,
-            prefix,
-            currentLanguage,
-            suffix,
-        ],
-    );
-
-    return (
-        <div
-            className={_cs(styles.numberOutput, className)}
-            title={isDefined(tooltip) ? String(tooltip) : undefined}
-        >
-            {val}
-        </div>
-    );
-}
-
-export default NumberOutput;
diff --git a/packages/ui/src/components/PageHeader/index.tsx b/packages/ui/src/components/PageHeader/index.tsx
index 769b9b2e31..57eb2ee1f4 100644
--- a/packages/ui/src/components/PageHeader/index.tsx
+++ b/packages/ui/src/components/PageHeader/index.tsx
@@ -11,6 +11,8 @@ import styles from './styles.module.css';
 
 export interface Props {
     className?: string;
+    /** Red uppercase eyebrow shown above the heading. */
+    overline?: React.ReactNode;
     heading?: React.ReactNode;
     description?: React.ReactNode;
     actions?: React.ReactNode;
@@ -22,6 +24,7 @@ export interface Props {
 function PageHeader(props: Props) {
     const {
         className,
+        overline,
         heading,
         description,
         actions,
@@ -30,7 +33,7 @@ function PageHeader(props: Props) {
         wikiLink,
     } = props;
 
-    if (!(actions || breadCrumbs || info || description || heading)) {
+    if (!(actions || breadCrumbs || info || description || heading || overline)) {
         return null;
     }
 
@@ -63,6 +66,11 @@ function PageHeader(props: Props) {
                 <ListView
                     layout="block"
                 >
+                    {overline && (
+                        <div className={styles.overline}>
+                            {overline}
+                        </div>
+                    )}
                     <Heading
                         level={1}
                         className={styles.heading}
diff --git a/packages/ui/src/components/PageHeader/styles.module.css b/packages/ui/src/components/PageHeader/styles.module.css
index b9171f13a8..9467c2329e 100644
--- a/packages/ui/src/components/PageHeader/styles.module.css
+++ b/packages/ui/src/components/PageHeader/styles.module.css
@@ -1,4 +1,13 @@
 .page-header {
+    .overline {
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: var(--go-ui-spacing-5xs);
+        color: var(--go-ui-color-primary-red);
+        font-size: var(--go-ui-font-size-sm);
+        font-weight: var(--go-ui-font-weight-semibold);
+    }
+
     .heading {
         text-align: center;
     }
diff --git a/packages/ui/src/components/Pager/i18n.json b/packages/ui/src/components/Pagination/i18n.json
similarity index 51%
rename from packages/ui/src/components/Pager/i18n.json
rename to packages/ui/src/components/Pagination/i18n.json
index af8637f3c1..10a7d0f2d1 100644
--- a/packages/ui/src/components/Pager/i18n.json
+++ b/packages/ui/src/components/Pagination/i18n.json
@@ -2,6 +2,7 @@
     "namespace": "common",
     "strings": {
         "rawButtonGoTo":"Go to",
-        "rawButtonGoToPage":"Go to page"
+        "rawButtonGoToPage":"Go to page",
+        "paginationLabel":"Pagination"
     }
 }
diff --git a/packages/ui/src/components/Pager/index.tsx b/packages/ui/src/components/Pagination/index.tsx
similarity index 88%
rename from packages/ui/src/components/Pager/index.tsx
rename to packages/ui/src/components/Pagination/index.tsx
index cdd29336a6..daf405158f 100644
--- a/packages/ui/src/components/Pager/index.tsx
+++ b/packages/ui/src/components/Pagination/index.tsx
@@ -157,7 +157,12 @@ export type Props = {
     totalCapacity?: number;
 }
 
-function Pager(props: Props) {
+/**
+ * Pagination is a specific component for page-based navigation, built on
+ * RawButton. Rendered as a `<nav>` landmark with the active page marked
+ * `aria-current="page"`.
+ */
+function Pagination(props: Props) {
     const {
         activePage: activePageProps,
         className,
@@ -185,6 +190,7 @@ function Pager(props: Props) {
                 onClick={onActivePageChange}
                 className={styles.pageButton}
                 disabled={activePage <= 1 || disabled}
+                aria-label={`${strings.rawButtonGoToPage} ${activePage - 1}`}
                 title={`${strings.rawButtonGoToPage} ${activePage - 1}`}
             >
                 <ChevronLeftLineIcon className={styles.icon} />
@@ -198,6 +204,7 @@ function Pager(props: Props) {
                             name={page.index}
                             onClick={onActivePageChange}
                             disabled={disabled}
+                            aria-label={`${strings.rawButtonGoTo} ${page.index}`}
                             title={`${strings.rawButtonGoTo} ${page.index}`}
                         >
                             {page.index}
@@ -205,10 +212,12 @@ function Pager(props: Props) {
                     );
                 }
                 if (page.type === 'fakeButton') {
+                    // Current page is a location indicator, not an action:
+                    // render a non-interactive span with aria-current.
                     return (
-                        <RawButton
+                        <span
                             key={`button-${page.key}`}
-                            name={undefined}
+                            aria-current="page"
                             className={_cs(
                                 styles.pageButton,
                                 styles.active,
@@ -216,13 +225,14 @@ function Pager(props: Props) {
                             )}
                         >
                             {page.label}
-                        </RawButton>
+                        </span>
                     );
                 }
                 return (
                     <div
                         key={`span-${page.key}`}
                         className={styles.pageButton}
+                        aria-hidden
                     >
                         {page.label}
                     </div>
@@ -233,7 +243,8 @@ function Pager(props: Props) {
                 onClick={onActivePageChange}
                 disabled={activePage >= numPages || disabled}
                 className={styles.pageButton}
-                title={`${strings.rawButtonGoToPage} ${activePage - 1}`}
+                aria-label={`${strings.rawButtonGoToPage} ${activePage + 1}`}
+                title={`${strings.rawButtonGoToPage} ${activePage + 1}`}
             >
                 <ChevronRightLineIcon className={styles.icon} />
             </RawButton>
@@ -245,9 +256,12 @@ function Pager(props: Props) {
     }
 
     return (
-        <div className={_cs(className, styles.pager)}>
+        <nav
+            className={_cs(className, styles.pagination)}
+            aria-label={strings.paginationLabel}
+        >
             {pageList}
-        </div>
+        </nav>
     );
 }
-export default Pager;
+export default Pagination;
diff --git a/packages/ui/src/components/Pager/styles.module.css b/packages/ui/src/components/Pagination/styles.module.css
similarity index 98%
rename from packages/ui/src/components/Pager/styles.module.css
rename to packages/ui/src/components/Pagination/styles.module.css
index e13fc3c901..3ebb2a3922 100644
--- a/packages/ui/src/components/Pager/styles.module.css
+++ b/packages/ui/src/components/Pagination/styles.module.css
@@ -1,4 +1,4 @@
-.pager {
+.pagination {
     .page-list {
         display: flex;
         align-items: center;
diff --git a/packages/ui/src/components/PasswordInput/index.test.tsx b/packages/ui/src/components/PasswordInput/index.test.tsx
new file mode 100644
index 0000000000..c36cf81700
--- /dev/null
+++ b/packages/ui/src/components/PasswordInput/index.test.tsx
@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+
+import PasswordInput from './index';
+
+describe('PasswordInput', () => {
+    it('gives the show/hide toggle an accessible name and pressed state', () => {
+        const { getByRole } = render(
+            <PasswordInput
+                name="pw"
+                value=""
+                onChange={() => undefined}
+                label="Password"
+            />,
+        );
+
+        const toggle = getByRole('button', { name: 'Show password' });
+        expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    });
+});
diff --git a/packages/ui/src/components/PasswordInput/index.tsx b/packages/ui/src/components/PasswordInput/index.tsx
index c580ea6ed3..8c5787b153 100644
--- a/packages/ui/src/components/PasswordInput/index.tsx
+++ b/packages/ui/src/components/PasswordInput/index.tsx
@@ -1,33 +1,40 @@
 import {
     useCallback,
+    useId,
     useState,
 } from 'react';
 import {
     EyeFillIcon,
     EyeOffLineIcon,
 } from '@ifrc-go/icons';
+import { isDefined } from '@togglecorp/fujs';
 
+import Button from '#components/Button';
 import InputContainer, { Props as InputContainerProps } from '#components/InputContainer';
 import RawInput, { Props as RawInputProps } from '#components/RawInput';
 import useTranslation from '#hooks/useTranslation';
 import { extractInputContainerProps } from '#utils/inputs';
 
-import Button from '../Button';
-
 import i18n from './i18n.json';
 
 type InheritedProps<NAME> = Omit<InputContainerProps, 'input'>
 & Omit<RawInputProps<NAME>, 'type' | 'className' | 'elementRef'>;
 
 export interface Props<T> extends InheritedProps<T> {
+    /** Ref to the inner <input> node (elementRef refers to the root) */
     inputElementRef?: React.RefObject<HTMLInputElement | null>;
     inputClassName?: string;
 }
 
+/**
+ * Password input with a show/hide toggle, composed of InputContainer
+ * and RawInput (specific layer).
+ */
 function PasswordInput<const T>(props: Props<T>) {
     const {
         disabled,
         inputClassName,
+        inputElementRef,
         readOnly,
         required,
         actions,
@@ -38,6 +45,14 @@ function PasswordInput<const T>(props: Props<T>) {
         otherProps,
     );
 
+    const generatedId = useId();
+    const inputId = generatedId;
+    const hasError = isDefined(inputContainerProps.error);
+    const hasHint = isDefined(inputContainerProps.hint);
+    const errorId = hasError ? `${generatedId}-error` : undefined;
+    const hintId = hasHint ? `${generatedId}-hint` : undefined;
+    const describedBy = [hintId, errorId].filter(isDefined).join(' ') || undefined;
+
     const [showPassword, setShowPassword] = useState(false);
     const strings = useTranslation(i18n);
     const handleButtonClick = useCallback(() => {
@@ -48,6 +63,9 @@ function PasswordInput<const T>(props: Props<T>) {
         <InputContainer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...inputContainerProps}
+            inputId={inputId}
+            hintId={hintId}
+            errorId={errorId}
             disabled={disabled}
             readOnly={readOnly}
             required={required}
@@ -56,9 +74,11 @@ function PasswordInput<const T>(props: Props<T>) {
                     {actions}
                     <Button
                         onClick={handleButtonClick}
-                        styleVariant="action"
+                        variant="tertiary"
                         disabled={disabled}
                         name={undefined}
+                        aria-label={showPassword ? strings.hidePassword : strings.showPassword}
+                        aria-pressed={showPassword}
                         title={showPassword ? strings.hidePassword : strings.showPassword}
                     >
                         {showPassword ? <EyeFillIcon /> : <EyeOffLineIcon />}
@@ -69,6 +89,11 @@ function PasswordInput<const T>(props: Props<T>) {
                 <RawInput
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...rawInputProps}
+                    id={inputId}
+                    aria-invalid={hasError}
+                    aria-required={required}
+                    aria-describedby={describedBy}
+                    elementRef={inputElementRef}
                     className={inputClassName}
                     readOnly={readOnly}
                     disabled={disabled}
diff --git a/packages/ui/src/components/PieChart/index.tsx b/packages/ui/src/components/PieChart/index.tsx
index 2b4cb2393f..31cc103bd3 100644
--- a/packages/ui/src/components/PieChart/index.tsx
+++ b/packages/ui/src/components/PieChart/index.tsx
@@ -5,8 +5,8 @@ import {
     isNotDefined,
 } from '@togglecorp/fujs';
 
+import DataDisplay from '#components/DataDisplay';
 import LegendItem from '#components/LegendItem';
-import TextOutput from '#components/TextOutput';
 import Tooltip from '#components/Tooltip';
 import {
     getPercentage,
@@ -86,6 +86,10 @@ export type Props<D> = {
     colorSelector?: never;
 })
 
+/**
+ * PieChart renders proportions of the data as pie segments with a legend.
+ * Specific (data-viz) layer.
+ */
 function PieChart<D>(props: Props<D>) {
     const {
         className,
@@ -165,7 +169,7 @@ function PieChart<D>(props: Props<D>) {
                         >
                             <Tooltip
                                 description={(
-                                    <TextOutput
+                                    <DataDisplay
                                         label={datum.label}
                                         value={datum.value}
                                     />
@@ -181,7 +185,7 @@ function PieChart<D>(props: Props<D>) {
                         className={styles.legendItem}
                         key={datum.key}
                         label={showPercentageInLegend ? (
-                            <TextOutput
+                            <DataDisplay
                                 label={datum.label}
                                 value={datum.percentage}
                                 valueType="number"
diff --git a/packages/ui/src/components/Popover/index.tsx b/packages/ui/src/components/Popover/index.tsx
new file mode 100644
index 0000000000..62cb765845
--- /dev/null
+++ b/packages/ui/src/components/Popover/index.tsx
@@ -0,0 +1,169 @@
+import {
+    useId,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from 'react';
+import {
+    _cs,
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import Portal from '#components/Portal';
+
+import styles from './styles.module.css';
+
+// The native Popover API (showPopover + popover="manual" top layer) shipped in
+// Chromium 114 / Firefox 125 / Safari 17. Where it's unavailable we fall back
+// to a Portal so the surface is still rendered (escaping ancestor overflow).
+const SUPPORTS_POPOVER = typeof HTMLElement !== 'undefined'
+    && typeof HTMLElement.prototype.showPopover === 'function';
+
+export interface Props {
+    /**
+     * Id for the floating surface. Used by disclosure components
+     * (e.g. Dropdown) to wire `aria-controls` from their trigger.
+     */
+    id?: string;
+    className?: string;
+    pointerClassName?: string;
+    elementRef?: React.RefObject<HTMLDivElement | null>;
+    parentRef: React.RefObject<HTMLElement | null>;
+    children?: React.ReactNode;
+    preferredWidth?: number;
+}
+
+function showPopoverSafely(element: HTMLElement | null) {
+    // Skip entirely when the Popover API is unavailable (the element is then
+    // Portal-rendered without the popover attribute). The isConnected /
+    // :popover-open guards also cover React StrictMode's double-invoked effects.
+    if (!SUPPORTS_POPOVER || !element || !element.isConnected) {
+        return;
+    }
+    if (!element.matches(':popover-open')) {
+        element.showPopover();
+    }
+}
+
+/**
+ * Bare floating surface (generic layer).
+ *
+ * Rendered in the browser top layer via the native Popover API
+ * (`popover="manual"`) and positioned with native CSS Anchor Positioning
+ * relative to `parentRef`. Intended for triggers that are HTML elements
+ * (buttons, inputs); SVG-embedded overlays (e.g. chart tooltips) should not
+ * use this — see `Tooltip`, which positions a Portal with JS instead. The
+ * composing component controls open/close by mounting/unmounting it (manual
+ * popovers do not light-dismiss). It carries no own ARIA role.
+ */
+function Popover(props: Props) {
+    const {
+        id,
+        parentRef,
+        elementRef,
+        children,
+        className,
+        pointerClassName,
+        preferredWidth,
+    } = props;
+
+    const generatedId = useId();
+    // A valid CSS dashed-ident anchor name (useId may contain ':').
+    const anchorName = `--popover-${generatedId.replace(/[^\w-]/g, '')}`;
+
+    const internalContentRef = useRef<HTMLDivElement>(null);
+    const contentRef = elementRef ?? internalContentRef;
+    const pointerRef = useRef<HTMLDivElement>(null);
+
+    // CSS anchor positioning flips the content box above the trigger when there
+    // is no room below; we read that resolved orientation back so the (separate)
+    // pointer can sit on the matching side instead of flipping on its own.
+    const [isFlipped, setIsFlipped] = useState(false);
+
+    useLayoutEffect(
+        () => {
+            const parentElement = parentRef.current;
+            const contentElement = contentRef.current;
+            // Establish the anchor on the trigger so the popover (which lives in
+            // the top layer) can position against it via CSS anchor positioning.
+            parentElement?.style.setProperty('anchor-name', anchorName);
+
+            // Reveal once on mount; the composing component unmounts to close.
+            showPopoverSafely(contentElement);
+            showPopoverSafely(pointerRef.current);
+
+            const updateOrientation = () => {
+                if (isNotDefined(parentElement) || isNotDefined(contentElement)) {
+                    return;
+                }
+                const parentRect = parentElement.getBoundingClientRect();
+                const contentRect = contentElement.getBoundingClientRect();
+                // content sits entirely above the trigger => flipped
+                setIsFlipped(contentRect.bottom <= parentRect.top + 1);
+            };
+
+            updateOrientation();
+            window.addEventListener('scroll', updateOrientation, true);
+            window.addEventListener('resize', updateOrientation);
+
+            return () => {
+                parentElement?.style.removeProperty('anchor-name');
+                window.removeEventListener('scroll', updateOrientation, true);
+                window.removeEventListener('resize', updateOrientation);
+            };
+        },
+        [parentRef, anchorName, contentRef],
+    );
+
+    // CSS custom properties aren't part of the CSSProperties type
+    const anchorStyle = {
+        '--popover-anchor-name': anchorName,
+        '--popover-preferred-width': isDefined(preferredWidth) ? `${preferredWidth}rem` : undefined,
+    } as unknown as React.CSSProperties;
+
+    // native top layer when supported; otherwise no popover attribute (so the
+    // element is visible) and a Portal is used to escape ancestor overflow.
+    const popoverValue = SUPPORTS_POPOVER ? 'manual' : undefined;
+
+    const content = (
+        <>
+            <div
+                popover={popoverValue}
+                id={id}
+                ref={contentRef}
+                style={anchorStyle}
+                className={_cs(styles.popup, className)}
+            >
+                {children}
+            </div>
+            <div
+                popover={popoverValue}
+                ref={pointerRef}
+                style={anchorStyle}
+                className={_cs(styles.pointer, isFlipped && styles.flipped, pointerClassName)}
+            >
+                <svg
+                    className={styles.icon}
+                    viewBox="0 0 200 100"
+                >
+                    <path
+                        d="M0 100 L100 0 L200 100Z"
+                    />
+                </svg>
+            </div>
+        </>
+    );
+
+    if (SUPPORTS_POPOVER) {
+        return content;
+    }
+
+    return (
+        <Portal>
+            {content}
+        </Portal>
+    );
+}
+
+export default Popover;
diff --git a/packages/ui/src/components/Popover/styles.module.css b/packages/ui/src/components/Popover/styles.module.css
new file mode 100644
index 0000000000..939bea8205
--- /dev/null
+++ b/packages/ui/src/components/Popover/styles.module.css
@@ -0,0 +1,56 @@
+.popup {
+    /* defaults declared so the JS-injected inline values are "known" */
+    --popover-anchor-name: --none;
+    --popover-preferred-width: anchor-size(width);
+
+    /* reset native [popover] UA defaults so anchor positioning controls it */
+    position: fixed;
+    position-anchor: var(--popover-anchor-name);
+    position-area: bottom;
+    justify-self: anchor-center;
+    margin: 0;
+    margin-block-start: var(--go-ui-spacing-2xs);
+    border: 0;
+    border-radius: var(--go-ui-border-radius-xl);
+    box-shadow: var(--go-ui-box-shadow-2xl);
+    background-color: var(--go-ui-color-white);
+    padding: 0;
+    inset: auto;
+    width: clamp(16rem, var(--popover-preferred-width), calc(100vw - 2rem));
+    max-height: 50vh;
+    overflow: auto;
+    /* flip above the trigger when there is not enough room below */
+    position-try-fallbacks: flip-block;
+}
+
+.pointer {
+    --popover-anchor-name: --none;
+
+    position: fixed;
+    position-anchor: var(--popover-anchor-name);
+    position-area: bottom;
+    justify-self: anchor-center;
+    margin: 0;
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    inset: auto;
+    line-height: 0;
+    color: var(--go-ui-color-white);
+    font-size: 0.5rem;
+    pointer-events: none;
+    filter: drop-shadow(0 -1pt 1pt rgb(0 0 0 / .1));
+
+    /* matches the content box's flip (driven by JS-read orientation) so the
+       pointer stays attached on the trigger-facing side */
+    &.flipped {
+        position-area: top;
+        transform: rotate(180deg);
+    }
+
+    .icon {
+        width: 2em;
+        height: 1em;
+        fill: currentColor;
+    }
+}
diff --git a/packages/ui/src/components/Popup/index.tsx b/packages/ui/src/components/Popup/index.tsx
deleted file mode 100644
index c6149c7afa..0000000000
--- a/packages/ui/src/components/Popup/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { _cs } from '@togglecorp/fujs';
-
-import Portal from '#components/Portal';
-import useFloatPlacement from '#hooks/useFloatPlacement';
-
-import styles from './styles.module.css';
-
-export interface Props {
-    className?: string;
-    pointerClassName?: string;
-    elementRef?: React.RefObject<HTMLDivElement | null>;
-    parentRef: React.RefObject<HTMLElement | null>;
-    children?: React.ReactNode;
-    preferredWidth?: number;
-}
-
-function Popup(props: Props) {
-    const {
-        parentRef,
-        elementRef,
-        children,
-        className,
-        pointerClassName,
-        preferredWidth,
-    } = props;
-
-    const {
-        content,
-        pointer,
-        width,
-        orientation,
-    } = useFloatPlacement(parentRef, preferredWidth);
-
-    return (
-        <Portal>
-            <div
-                ref={elementRef}
-                style={{
-                    ...content,
-                    width,
-                }}
-                className={_cs(
-                    styles.popup,
-                    orientation.vertical === 'bottom' && styles.topOrientation,
-                    className,
-                )}
-            >
-                {children}
-            </div>
-            <div
-                className={_cs(
-                    styles.pointer,
-                    orientation.vertical === 'bottom' && styles.topOrientation,
-                    pointerClassName,
-                )}
-                style={{ ...pointer }}
-            >
-                <svg
-                    className={styles.icon}
-                    viewBox="0 0 200 100"
-                >
-                    <path
-                        d="M0 100 L100 0 L200 100Z"
-                    />
-                </svg>
-            </div>
-        </Portal>
-    );
-}
-
-export default Popup;
diff --git a/packages/ui/src/components/Popup/styles.module.css b/packages/ui/src/components/Popup/styles.module.css
deleted file mode 100644
index 3eae3be78b..0000000000
--- a/packages/ui/src/components/Popup/styles.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.popup {
-    position: fixed;
-    border-radius: var(--go-ui-spacing-xs);
-    box-shadow: var(--go-ui-box-shadow-2xl);
-    background-color: var(--go-ui-color-white);
-    max-height: 50vh;
-    overflow: auto;
-
-    &.top-orientation {
-        /* FIXME: add variable */
-        box-shadow: 0 -8pt 20pt -5pt rgb(0 0 0 / 0.5);
-    }
-}
-
-.pointer {
-    position: fixed;
-    transform: translateX(-50%);
-    background-color: transparent;
-    line-height: 0;
-    color: var(--go-ui-color-white);
-    font-size: 0.5rem;
-    pointer-events: none;
-    filter: drop-shadow(0 -1pt 1pt rgb(0 0 0 / .1));
-
-    .icon {
-        width: 2em;
-        height: 1em;
-        fill: currentColor;
-    }
-
-    &.top-orientation {
-        transform: translateX(-50%) rotate(180deg);
-    }
-}
diff --git a/packages/ui/src/components/ProgressBar/index.tsx b/packages/ui/src/components/ProgressBar/index.tsx
index ccf2aa5a47..08702fd096 100644
--- a/packages/ui/src/components/ProgressBar/index.tsx
+++ b/packages/ui/src/components/ProgressBar/index.tsx
@@ -3,28 +3,31 @@ import {
     isDefined,
 } from '@togglecorp/fujs';
 
-import NumberOutput from '#components/NumberOutput';
+import NumberDisplay from '#components/NumberDisplay';
 
 import styles from './styles.module.css';
 
-type ProgressColorVariant = 'text' | 'text-on-dark' | 'primary' | 'secondary' | 'success' | 'danger';
+type ProgressBarVariant = 'text' | 'text-on-dark' | 'primary' | 'secondary' | 'success' | 'danger';
 
-const colorVariantToClassName: Record<ProgressColorVariant, string> = {
-    text: styles.colorVariantText,
-    primary: styles.colorVariantPrimary,
-    secondary: styles.colorVariantSecondary,
-    success: styles.colorVariantSuccess,
-    danger: styles.colorVariantDanger,
-    'text-on-dark': styles.colorVariantTextOnDark,
+const variantToClassName: Record<ProgressBarVariant, string> = {
+    text: styles.variantText,
+    primary: styles.variantPrimary,
+    secondary: styles.variantSecondary,
+    success: styles.variantSuccess,
+    danger: styles.variantDanger,
+    'text-on-dark': styles.variantTextOnDark,
 };
 
-type PreDefinedColorVariantProps = {
-    colorVariant?: ProgressColorVariant;
+type PreDefinedVariantProps = {
+    /** Predefined color scheme for the progress track */
+    variant?: ProgressBarVariant;
     color?: never;
 }
 
-type CustomColorVariantProps = {
-    colorVariant: 'custom';
+type CustomVariantProps = {
+    /** Data-driven visualization escape: requires an explicit `color` */
+    variant: 'custom';
+    /** CSS color for the progress track (only with `variant="custom"`) */
     color: string;
 }
 
@@ -39,9 +42,15 @@ interface BaseProps {
 }
 
 export type Props = BaseProps & (
-    PreDefinedColorVariantProps | CustomColorVariantProps
+    PreDefinedVariantProps | CustomVariantProps
 );
 
+/**
+ * ProgressBar visualizes a value against a total as a horizontal bar.
+ * Specific (data-viz) layer: exposes a single `variant` prop, with the
+ * blessed data-driven escape `variant="custom"` + `color` for
+ * visualizations whose colors come from data.
+ */
 function ProgressBar(props: Props) {
     const {
         className,
@@ -51,7 +60,7 @@ function ProgressBar(props: Props) {
         value: valueUnsafe,
         showPercentageInTitle,
         children,
-        colorVariant = 'secondary',
+        variant = 'secondary',
         color,
     } = props;
 
@@ -73,8 +82,8 @@ function ProgressBar(props: Props) {
         <div
             className={_cs(
                 styles.progressWrapper,
-                colorVariant !== 'custom'
-                    && colorVariantToClassName[colorVariant],
+                variant !== 'custom'
+                    && variantToClassName[variant],
                 className,
             )}
         >
@@ -82,7 +91,7 @@ function ProgressBar(props: Props) {
                 <div className={styles.title}>
                     {title}
                     {showPercentageInTitle && (
-                        <NumberOutput
+                        <NumberDisplay
                             value={percentage}
                             suffix="%"
                         />
@@ -94,7 +103,7 @@ function ProgressBar(props: Props) {
                     className={styles.progress}
                     style={{
                         width: `${percentage}%`,
-                        backgroundColor: colorVariant === 'custom' ? color : undefined,
+                        backgroundColor: variant === 'custom' ? color : undefined,
                     }}
                 />
             </div>
diff --git a/packages/ui/src/components/ProgressBar/styles.module.css b/packages/ui/src/components/ProgressBar/styles.module.css
index 7dba7f7907..2209c4ae13 100644
--- a/packages/ui/src/components/ProgressBar/styles.module.css
+++ b/packages/ui/src/components/ProgressBar/styles.module.css
@@ -19,27 +19,27 @@
         }
     }
 
-    &.color-variant-text {
+    &.variant-text {
         --variant-color: var(--go-ui-color-text);
     }
 
-    &.color-variant-text-on-dark {
+    &.variant-text-on-dark {
         --variant-color: var(--go-ui-color-text-on-dark);
     }
 
-    &.color-variant-primary {
+    &.variant-primary {
         --variant-color: var(--go-ui-color-primary-red);
     }
 
-    &.color-variant-secondary {
+    &.variant-secondary {
         --variant-color: var(--go-ui-color-primary-blue);
     }
 
-    &.color-variant-success {
+    &.variant-success {
         --variant-color: var(--go-ui-color-positive);
     }
 
-    &.color-variant-danger {
+    &.variant-danger {
         --variant-color: var(--go-ui-color-negative);
     }
 }
diff --git a/packages/ui/src/components/RadioInput/Radio/index.tsx b/packages/ui/src/components/RadioInput/Radio/index.tsx
index 2b19392f08..674fa43e09 100644
--- a/packages/ui/src/components/RadioInput/Radio/index.tsx
+++ b/packages/ui/src/components/RadioInput/Radio/index.tsx
@@ -6,7 +6,7 @@ import {
 
 import ButtonLayout from '#components/ButtonLayout';
 import Description from '#components/Description';
-import Label from '#components/Label';
+import DisplayLabel from '#components/DisplayLabel';
 import ListView from '#components/ListView';
 import { SpacingType } from '#utils/style';
 
@@ -46,12 +46,25 @@ function Radio<NAME>(props: Props<NAME>) {
         after,
     } = props;
 
-    const handleClick = React.useCallback(() => {
+    // Native radios fire `change` on selection (keyboard arrow keys, and a
+    // click on an unselected radio), so selection is wired through onChange to
+    // stay keyboard-operable.
+    const handleChange = React.useCallback(() => {
         if (onClick && !disabled && !readOnly) {
             onClick(name);
         }
     }, [disabled, name, onClick, readOnly]);
 
+    // A native radio does not fire `change` when the already-selected radio is
+    // re-clicked, so handle that case here to preserve the clearable behaviour
+    // (RadioInput toggles the value off). Guarded to the selected radio so an
+    // unselected click is not double-handled alongside onChange.
+    const handleClick = React.useCallback(() => {
+        if (value && onClick && !disabled && !readOnly) {
+            onClick(name);
+        }
+    }, [value, disabled, name, onClick, readOnly]);
+
     const inputId = useId();
 
     return (
@@ -79,9 +92,9 @@ function Radio<NAME>(props: Props<NAME>) {
                     spacingOffset={-3}
                     spacing={spacing}
                 >
-                    <Label>
+                    <DisplayLabel>
                         {children}
-                    </Label>
+                    </DisplayLabel>
                     <Description textSize="sm">
                         {description}
                     </Description>
@@ -93,9 +106,9 @@ function Radio<NAME>(props: Props<NAME>) {
                 type="radio"
                 name={typeof inputName === 'string' ? inputName : undefined}
                 checked={value}
+                onChange={handleChange}
                 onClick={handleClick}
                 disabled={disabled}
-                readOnly
             />
         </label>
     );
diff --git a/packages/ui/src/components/RadioInput/Radio/styles.module.css b/packages/ui/src/components/RadioInput/Radio/styles.module.css
index bebf87d287..7b064e2d84 100644
--- a/packages/ui/src/components/RadioInput/Radio/styles.module.css
+++ b/packages/ui/src/components/RadioInput/Radio/styles.module.css
@@ -9,6 +9,7 @@
 
     .blank-icon {
         /* FIXME: use variables */
+        color: var(--go-ui-color-gray-40);
         font-size: 1.25rem;
     }
 
@@ -21,4 +22,15 @@
         height: 0;
         pointer-events: none;
     }
+
+    /* The native input is visually hidden, so surface the keyboard focus ring
+       on the visible radio icon instead. */
+    &:has(.input:focus-visible) {
+        .active-icon,
+        .blank-icon {
+            outline: var(--go-ui-width-separator-md) solid var(--go-ui-color-primary-blue);
+            outline-offset: var(--go-ui-width-separator-sm);
+            border-radius: var(--go-ui-border-radius-full);
+        }
+    }
 }
diff --git a/packages/ui/src/components/RadioInput/index.test.tsx b/packages/ui/src/components/RadioInput/index.test.tsx
new file mode 100644
index 0000000000..b51725a004
--- /dev/null
+++ b/packages/ui/src/components/RadioInput/index.test.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+
+import RadioInput from './index';
+
+interface Option {
+    key: string;
+    label: string;
+}
+
+const options: Option[] = [
+    { key: 'a', label: 'Option A' },
+    { key: 'b', label: 'Option B' },
+];
+
+function ControlledRadioInput() {
+    const [value, setValue] = useState<string | undefined>('a');
+    return (
+        <RadioInput
+            name="pick"
+            label="Pick one"
+            options={options}
+            keySelector={(option) => option.key}
+            labelSelector={(option) => option.label}
+            value={value}
+            clearable
+            onChange={(next) => setValue(next)}
+        />
+    );
+}
+
+describe('RadioInput', () => {
+    it('names the group and shares a native radio name across options', () => {
+        const { getByRole, getAllByRole } = render(<ControlledRadioInput />);
+
+        expect(getByRole('radiogroup')).toHaveAccessibleName('Pick one');
+
+        const radios = getAllByRole('radio') as HTMLInputElement[];
+        expect(radios).toHaveLength(2);
+        // a shared name makes them one native radio group (arrow-key nav)
+        expect(radios[0].name).toBe(radios[1].name);
+    });
+
+    it('selects via change (keyboard-operable native radio)', async () => {
+        const { getAllByRole } = render(<ControlledRadioInput />);
+        const radios = getAllByRole('radio') as HTMLInputElement[];
+
+        await userEvent.click(radios[1]);
+
+        expect(radios[1].checked).toBe(true);
+    });
+});
diff --git a/packages/ui/src/components/RadioInput/index.tsx b/packages/ui/src/components/RadioInput/index.tsx
index 71714b308a..aeafd66977 100644
--- a/packages/ui/src/components/RadioInput/index.tsx
+++ b/packages/ui/src/components/RadioInput/index.tsx
@@ -1,5 +1,9 @@
-import React, { useMemo } from 'react';
+import React, {
+    useId,
+    useMemo,
+} from 'react';
 import {
+    isDefined,
     isNotDefined,
     listToMap,
     OptionKey,
@@ -9,7 +13,10 @@ import InputContainer from '#components/InputContainer';
 import ListView from '#components/ListView';
 import RawList from '#components/RawList';
 import { getHighlightMode } from '#utils/common';
-import { SpacingType } from '#utils/style';
+import {
+    BackgroundColorType,
+    SpacingType,
+} from '#utils/style';
 
 import Radio, { Props as RadioProps } from './Radio';
 
@@ -35,8 +42,8 @@ export interface CommonProps<NAME, OPTION, VALUE, RADIO_RENDERER_PROPS extends R
     radioListLayoutPreferredGridColumns?: number;
     spacing?: SpacingType;
     withPadding?: boolean;
-    withBackground?: boolean;
-    withDarkBackground?: boolean;
+    /** Surface color token for the input container root */
+    backgroundColor?: BackgroundColorType;
 
     prevValue?: VALUE | undefined | null;
     withPrevValue?: boolean;
@@ -62,6 +69,10 @@ RADIO_RENDERER_PROPS extends RadioProps<VALUE>
     ClearableProps<VALUE, NAME> | NonClearableProps<VALUE, NAME>
 )
 
+/**
+ * Single-select radio list driven by options and selectors; renderer
+ * can be swapped (e.g. SegmentInput) (specific layer).
+ */
 function RadioInput<
     const NAME,
     OPTION extends object,
@@ -90,8 +101,7 @@ function RadioInput<
         radioListLayoutPreferredGridColumns,
         spacing,
         withPadding,
-        withBackground,
-        withDarkBackground,
+        backgroundColor,
 
         prevValue,
         withDiffView,
@@ -100,6 +110,13 @@ function RadioInput<
         ...otherOptions
     } = props;
 
+    const generatedId = useId();
+    const errorId = isDefined(error) ? `${generatedId}-error` : undefined;
+    const hintId = isDefined(hint) ? `${generatedId}-hint` : undefined;
+    // A shared name across every radio makes them a single native radio group,
+    // which provides arrow-key navigation between options for free.
+    const inputName = `${generatedId}-radio`;
+
     const highlightMode = useMemo(
         () => getHighlightMode(value, prevValue, withDiffView),
         [value, prevValue, withDiffView],
@@ -140,7 +157,7 @@ function RadioInput<
         k: VALUE,
         i: OPTION,
     ) => RADIO_RENDERER_PROPS = React.useCallback((key: VALUE, item: OPTION) => {
-        const radioProps: Pick<RADIO_RENDERER_PROPS, 'children' | 'name' | 'onClick' | 'value' | 'disabled' | 'readOnly' | 'description'> = {
+        const radioProps: Pick<RADIO_RENDERER_PROPS, 'children' | 'name' | 'onClick' | 'value' | 'disabled' | 'readOnly' | 'description' | 'inputName'> = {
             children: labelSelector(item),
             description: descriptionSelector ? descriptionSelector(item) : undefined,
             name: key,
@@ -148,6 +165,7 @@ function RadioInput<
             value: key === value,
             disabled,
             readOnly,
+            inputName,
         };
 
         const combinedProps = {
@@ -164,6 +182,7 @@ function RadioInput<
         disabled,
         readOnly,
         descriptionSelector,
+        inputName,
     ]);
 
     const radioList = (
@@ -179,9 +198,11 @@ function RadioInput<
 
     return (
         <InputContainer
+            role="radiogroup"
+            hintId={hintId}
+            errorId={errorId}
             className={className}
-            withBackground={withBackground}
-            withDarkBackground={withDarkBackground}
+            backgroundColor={backgroundColor}
             withPadding={withPadding}
             disabled={disabled}
             required={required}
@@ -193,7 +214,7 @@ function RadioInput<
             withPrevValue={withPrevValue}
             withAsterisk={withAsterisk}
             errorOnTooltip={errorOnTooltip}
-            variant="transparent"
+            styleVariant="transparent"
             withoutInputSectionPadding
             input={(
                 <>
diff --git a/packages/ui/src/components/RawButton/styles.module.css b/packages/ui/src/components/RawButton/styles.module.css
index 73861d1d80..988b4c4aa3 100644
--- a/packages/ui/src/components/RawButton/styles.module.css
+++ b/packages/ui/src/components/RawButton/styles.module.css
@@ -11,7 +11,7 @@
 
     &:focus-visible,
     &.focused {
-        outline: var(--go-ui-width-separator-thin) dashed var(--go-ui-color-gray-40);
-        outline-offset: -4px;
+        outline: var(--go-ui-width-separator-md) solid var(--go-ui-color-primary-blue);
+        outline-offset: var(--go-ui-width-separator-sm);
     }
 }
diff --git a/packages/ui/src/components/RawDisplay/index.tsx b/packages/ui/src/components/RawDisplay/index.tsx
new file mode 100644
index 0000000000..da19d7014f
--- /dev/null
+++ b/packages/ui/src/components/RawDisplay/index.tsx
@@ -0,0 +1,98 @@
+import BooleanDisplay, { Props as BooleanDisplayProps } from '#components/BooleanDisplay';
+import DateDisplay, { Props as DateDisplayProps } from '#components/DateDisplay';
+import NumberDisplay, { Props as NumberDisplayProps } from '#components/NumberDisplay';
+
+export interface BooleanValueProps extends BooleanDisplayProps {
+    valueType: 'boolean';
+}
+
+export interface NumberValueProps extends NumberDisplayProps {
+    valueType: 'number';
+}
+
+export interface DateValueProps extends DateDisplayProps {
+    valueType: 'date';
+}
+
+export interface TextValueProps {
+    valueType: 'text';
+    value: string | null | undefined;
+    /** Rendered when value is absent or empty */
+    invalidText?: React.ReactNode;
+}
+
+export interface NodeValueProps {
+    valueType?: never;
+    value?: React.ReactNode;
+    /** Rendered when value is absent or empty */
+    invalidText?: React.ReactNode;
+}
+
+export type Props =
+    | BooleanValueProps
+    | DateValueProps
+    | NodeValueProps
+    | NumberValueProps
+    | TextValueProps;
+
+/**
+ * Value-type multiplexer shared by labelled output components
+ * (generic layer).
+ *
+ * Renders the display primitive matching `valueType` (BooleanDisplay,
+ * DateDisplay or NumberDisplay, forwarding their respective props), plain
+ * text for 'text', or the value as-is when `valueType` is omitted.
+ * Carries no styling of its own; compose it inside styled components
+ * such as DataDisplay or KeyFigure.
+ *
+ * `invalidText` has no default here: each display primitive applies its
+ * own fallback, so wrappers can opt into a shared fallback by passing
+ * one explicitly.
+ */
+function RawDisplay(props: Props) {
+    const {
+        invalidText,
+        ...otherProps
+    } = props;
+
+    if (otherProps.valueType === 'boolean') {
+        return (
+            <BooleanDisplay
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...otherProps}
+                invalidText={invalidText}
+            />
+        );
+    }
+
+    if (otherProps.valueType === 'number') {
+        return (
+            <NumberDisplay
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...otherProps}
+                invalidText={invalidText}
+            />
+        );
+    }
+
+    if (otherProps.valueType === 'date') {
+        return (
+            <DateDisplay
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...otherProps}
+                invalidText={invalidText}
+            />
+        );
+    }
+
+    const { value } = otherProps;
+
+    // A raw Date is not a renderable node; treat it as an invalid value
+    if (value instanceof Date) {
+        return invalidText;
+    }
+
+    return value || invalidText;
+}
+
+export default RawDisplay;
diff --git a/packages/ui/src/components/RawFileInput/index.tsx b/packages/ui/src/components/RawFileInput/index.tsx
index 7e80e2b2af..09b1258857 100644
--- a/packages/ui/src/components/RawFileInput/index.tsx
+++ b/packages/ui/src/components/RawFileInput/index.tsx
@@ -2,21 +2,30 @@ import {
     useCallback,
     useState,
 } from 'react';
-import { randomString } from '@togglecorp/fujs';
-
-import type { Props as ButtonLayoutProps } from '#components/ButtonLayout';
-import ButtonLayout from '#components/ButtonLayout';
+import {
+    _cs,
+    randomString,
+} from '@togglecorp/fujs';
 
 import styles from './styles.module.css';
 
-export type CommonRawFileInputProps<NAME> = Omit<ButtonLayoutProps, 'elementRef' | 'onChange'> & {
+export interface CommonRawFileInputProps<NAME> {
     accept?: string;
+    /**
+     * Visible trigger content; the whole component acts as a label
+     * for the hidden file input, so clicking any child opens the
+     * file picker
+     */
+    children?: React.ReactNode;
+    className?: string;
     disabled?: boolean;
+    /** Props forwarded to the hidden file input element */
     inputProps?: React.ComponentPropsWithoutRef<'input'>;
+    /** Ref to the hidden file input element */
     inputRef?: React.RefObject<HTMLInputElement | null>;
     name: NAME;
     readOnly?: boolean;
-};
+}
 
 export interface MultipleRawFileInputProps<NAME> {
     multiple: true;
@@ -32,9 +41,19 @@ export type Props<NAME> = CommonRawFileInputProps<NAME> & (
     SingleRawFileInputProps<NAME> | MultipleRawFileInputProps<NAME>
 );
 
+/**
+ * Unstyled file input primitive (raw layer).
+ *
+ * Renders only the hidden file input and its change/reset plumbing,
+ * wrapped in a `display: contents` label so the children act as the
+ * trigger. Carries no visuals; use FileInputButton for the styled,
+ * button-like file input.
+ */
 function RawFileInput<NAME>(props: Props<NAME>) {
     const {
         accept,
+        children,
+        className,
         disabled,
         inputProps,
         inputRef,
@@ -42,8 +61,6 @@ function RawFileInput<NAME>(props: Props<NAME>) {
         name,
         onChange,
         readOnly,
-        spacingOffset = -3,
-        ...buttonLayoutProps
     } = props;
 
     const [inputId] = useState(randomString);
@@ -65,15 +82,9 @@ function RawFileInput<NAME>(props: Props<NAME>) {
     return (
         <label
             htmlFor={inputId}
-            className={styles.fileInput}
+            className={_cs(styles.rawFileInput, className)}
         >
-            <ButtonLayout
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...buttonLayoutProps}
-                spacingOffset={spacingOffset}
-                disabled={disabled}
-                readOnly={readOnly}
-            />
+            {children}
             <input
                 id={inputId}
                 className={styles.input}
diff --git a/packages/ui/src/components/RawFileInput/styles.module.css b/packages/ui/src/components/RawFileInput/styles.module.css
index f724c6bb10..9759f29ab2 100644
--- a/packages/ui/src/components/RawFileInput/styles.module.css
+++ b/packages/ui/src/components/RawFileInput/styles.module.css
@@ -1,4 +1,4 @@
-.file-input {
+.raw-file-input {
     display: contents;
 
     .input {
diff --git a/packages/ui/src/components/RawInput/styles.module.css b/packages/ui/src/components/RawInput/styles.module.css
index 42e6e0f37d..cbf0b6af3b 100644
--- a/packages/ui/src/components/RawInput/styles.module.css
+++ b/packages/ui/src/components/RawInput/styles.module.css
@@ -13,4 +13,8 @@
     &:disabled {
         cursor: not-allowed;
     }
+
+    &::placeholder {
+        color: var(--go-ui-color-gray-60);
+    }
 }
diff --git a/packages/ui/src/components/ReducedListDisplay/i18n.json b/packages/ui/src/components/ReducedListDisplay/i18n.json
deleted file mode 100644
index 42620583fe..0000000000
--- a/packages/ui/src/components/ReducedListDisplay/i18n.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "namespace": "common",
-    "strings": {
-        "reducedListDisplayMoreLabel": "... and {n} more"
-    }
-}
diff --git a/packages/ui/src/components/ReducedListDisplay/index.tsx b/packages/ui/src/components/ReducedListDisplay/index.tsx
deleted file mode 100644
index 95baed2d5a..0000000000
--- a/packages/ui/src/components/ReducedListDisplay/index.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { Fragment } from 'react';
-import { isNotDefined } from '@togglecorp/fujs';
-
-import InfoPopup from '#components/InfoPopup';
-import useTranslation from '#hooks/useTranslation';
-import { resolveToString } from '#utils/translation';
-
-import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-function joinList<LIST_ITEM, RENDERER_PROPS>(
-    list: LIST_ITEM[],
-    keySelector: (item: LIST_ITEM, i: number) => string | number,
-    renderer: React.ComponentType<RENDERER_PROPS>,
-    rendererParams: (item: LIST_ITEM, i: number) => RENDERER_PROPS,
-    separator: React.ReactNode,
-) {
-    return list.reduce<React.ReactNode[]>(
-        (acc, child, index, array) => {
-            const itemKey = keySelector(child, index);
-
-            const Component = renderer;
-            const item = (
-                <Component
-                    key={itemKey}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...rendererParams(child, index)}
-                />
-            );
-
-            acc.push(item);
-
-            if (index !== array.length - 1) {
-                acc.push(
-                    <Fragment
-                        key={`separator-${itemKey}`}
-                    >
-                        {separator}
-                    </Fragment>,
-                );
-            }
-
-            return acc;
-        },
-        [],
-    );
-}
-
-export interface Props<LIST_ITEM, RENDERER_PROPS> {
-    list?: LIST_ITEM[];
-    keySelector: (item: LIST_ITEM, i: number) => string | number;
-    renderer: React.ComponentType<RENDERER_PROPS>
-    rendererParams: (item: LIST_ITEM, i: number) => RENDERER_PROPS;
-    title?: React.ReactNode;
-    separator?: React.ReactNode;
-    maxItems?: number;
-    minItems?: number;
-}
-
-function ReducedListDisplay<LIST_ITEM, RENDERER_PROPS>(props: Props<LIST_ITEM, RENDERER_PROPS>) {
-    const {
-        list,
-        title,
-        renderer,
-        rendererParams,
-        keySelector,
-        separator = ', ',
-        maxItems = 4,
-        minItems = 2,
-    } = props;
-
-    const strings = useTranslation(i18n);
-    if (isNotDefined(list) || list.length === 0) {
-        return null;
-    }
-
-    const allItemList = joinList(list, keySelector, renderer, rendererParams, separator);
-
-    if (list.length <= maxItems) {
-        return (
-            <div className={styles.reducedListDisplay}>
-                {allItemList}
-            </div>
-        );
-    }
-
-    const newList = list.slice(0, minItems);
-    const infoLabel = resolveToString(
-        strings.reducedListDisplayMoreLabel,
-        { n: list.length - minItems },
-    );
-
-    const newJoinedList = joinList(newList, keySelector, renderer, rendererParams, separator);
-
-    return (
-        <div className={styles.reducedListDisplay}>
-            {newJoinedList}
-            <InfoPopup
-                className={styles.reducedListLabel}
-                infoLabel={infoLabel}
-                withoutIcon
-                title={title}
-                description={(
-                    <div>
-                        {allItemList}
-                    </div>
-                )}
-            />
-        </div>
-    );
-}
-
-export default ReducedListDisplay;
diff --git a/packages/ui/src/components/ReducedListDisplay/styles.module.css b/packages/ui/src/components/ReducedListDisplay/styles.module.css
deleted file mode 100644
index 72830a82c5..0000000000
--- a/packages/ui/src/components/ReducedListDisplay/styles.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.reduced-list-display {
-    display: inline-block;
-}
-
-.reduced-list-label {
-    padding: 0;
-    text-decoration: underline;
-    color: var(--go-ui-color-blue-90);
-    font-weight: var(--go-ui-font-weight-medium);
-
-    &:hover,
-    &:focus {
-        opacity: 1;
-        color: var(--go-ui-color-primary-red);
-    }
-}
diff --git a/packages/ui/src/components/SearchMultiSelectInput/index.tsx b/packages/ui/src/components/SearchMultiSelectInput/index.tsx
index dd55c3d7c9..3d224a2407 100644
--- a/packages/ui/src/components/SearchMultiSelectInput/index.tsx
+++ b/packages/ui/src/components/SearchMultiSelectInput/index.tsx
@@ -335,6 +335,8 @@ function SearchMultiSelectInput<
             persistentOptionPopup
             nonClearable={false}
             hasValue={isDefined(value) && value.length > 0}
+            optionSelector={(key) => value.findIndex((item) => item === key) !== -1}
+            multiSelect
             prevValue={prevValueDisplay}
             highlightMode={highlightMode}
         />
diff --git a/packages/ui/src/components/SearchSelectInput/index.tsx b/packages/ui/src/components/SearchSelectInput/index.tsx
index deb163127f..296e0fe22b 100644
--- a/packages/ui/src/components/SearchSelectInput/index.tsx
+++ b/packages/ui/src/components/SearchSelectInput/index.tsx
@@ -343,6 +343,7 @@ function SearchSelectInput<
             focusedKey={focusedKey}
             onFocusedKeyChange={setFocusedKey}
             hasValue={isDefined(value)}
+            optionSelector={(key) => key === value}
             persistentOptionPopup={false}
             onEnterWithoutOption={handleEnterWithoutOption}
             prevValue={prevValueDisplay}
diff --git a/packages/ui/src/components/SegmentInput/index.tsx b/packages/ui/src/components/SegmentInput/index.tsx
index ea278c8867..63806f35d4 100644
--- a/packages/ui/src/components/SegmentInput/index.tsx
+++ b/packages/ui/src/components/SegmentInput/index.tsx
@@ -29,6 +29,8 @@ function Segment<NAME>(props: SegmentProps<NAME>) {
             className={styles.rawButton}
             name={name}
             onClick={onClick}
+            role="radio"
+            aria-checked={value}
         >
             <ButtonLayout
                 // eslint-disable-next-line react/jsx-props-no-spreading
@@ -53,7 +55,7 @@ export type Props<
     VALUE,
 > = Omit<
     RadioInputProps<NAME, OPTION, VALUE, SegmentProps<VALUE>>,
-    'radioListLayout' | 'radioListLayoutPreferredGridColumns' | 'withDarkBackground'
+    'radioListLayout' | 'radioListLayoutPreferredGridColumns' | 'backgroundColor'
 > & {
     value: VALUE | undefined | null;
     onChange: (value: VALUE, name: NAME) => void;
@@ -62,6 +64,10 @@ export type Props<
     labelSelector: RadioInputProps<NAME, OPTION, VALUE, SegmentProps<VALUE>>['labelSelector'];
 }
 
+/**
+ * Single-select input rendered as a row of segments (a RadioInput with
+ * a button-like renderer on a page-gray track) (specific layer).
+ */
 function SegmentInput<
     const NAME,
     OPTION extends object,
@@ -84,7 +90,7 @@ function SegmentInput<
             rendererParams={rendererParams}
             keySelector={keySelector}
             labelSelector={labelSelector}
-            withDarkBackground
+            backgroundColor="background"
             spacing="none"
         />
     );
diff --git a/packages/ui/src/components/SegmentInput/styles.module.css b/packages/ui/src/components/SegmentInput/styles.module.css
index 082ed0d095..0cd10e1d89 100644
--- a/packages/ui/src/components/SegmentInput/styles.module.css
+++ b/packages/ui/src/components/SegmentInput/styles.module.css
@@ -3,6 +3,12 @@
 }
 
 .segment-input {
-    border-radius: var(--go-ui-border-radius-full);
+    border-radius: var(--go-ui-border-radius-md);
     width: fit-content;
+
+    /* Square the inner segment buttons to match the squared track
+       (overrides ButtonLayout's full radius via descendant specificity). */
+    .segment {
+        border-radius: var(--go-ui-border-radius-md);
+    }
 }
diff --git a/packages/ui/src/components/SelectInput/index.test.tsx b/packages/ui/src/components/SelectInput/index.test.tsx
new file mode 100644
index 0000000000..0ddff98d73
--- /dev/null
+++ b/packages/ui/src/components/SelectInput/index.test.tsx
@@ -0,0 +1,43 @@
+import { render } from '@testing-library/react';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+
+import SelectInput from './index';
+
+interface Option {
+    id: string;
+    label: string;
+}
+
+const options: Option[] = [
+    { id: 'a', label: 'Apple' },
+    { id: 'b', label: 'Banana' },
+];
+
+describe('SelectInput combobox semantics', () => {
+    it('exposes a labelled combobox with a collapsed state', () => {
+        const { getByRole, container } = render(
+            <SelectInput
+                name="fruit"
+                label="Fruit"
+                options={options}
+                keySelector={(option) => option.id}
+                labelSelector={(option) => option.label}
+                value={undefined}
+                onChange={() => undefined}
+            />,
+        );
+
+        const combobox = getByRole('combobox');
+        expect(combobox).toHaveAttribute('aria-haspopup', 'listbox');
+        expect(combobox).toHaveAttribute('aria-expanded', 'false');
+
+        // label is associated with the combobox control
+        const label = container.querySelector<HTMLLabelElement>(`label[for="${combobox.id}"]`);
+        expect(label).not.toBeNull();
+        expect(label).toHaveTextContent('Fruit');
+    });
+});
diff --git a/packages/ui/src/components/SelectInputContainer/GenericOption/index.tsx b/packages/ui/src/components/SelectInputContainer/GenericOption/index.tsx
index fd80900a41..a35cd4045a 100644
--- a/packages/ui/src/components/SelectInputContainer/GenericOption/index.tsx
+++ b/packages/ui/src/components/SelectInputContainer/GenericOption/index.tsx
@@ -27,6 +27,10 @@ export interface Props<
     optionKey: OPTION_KEY;
     onClick: (optionKey: OPTION_KEY, option: OPTION) => void;
     focusedKey?: { key: OPTION_KEY, mouse?: boolean } | undefined;
+    /** DOM id so the combobox input can point aria-activedescendant at it. */
+    optionNodeId?: string;
+    /** Whether this option is currently chosen (drives aria-selected). */
+    isSelected?: boolean;
 }
 function GenericOption<
     RENDER_PROPS extends ContentBaseProps,
@@ -41,6 +45,8 @@ function GenericOption<
         onClick,
         optionKey,
         focusedKey,
+        optionNodeId,
+        isSelected = false,
     } = props;
 
     const params = contentRendererParam(optionKey, option);
@@ -77,6 +83,10 @@ function GenericOption<
     return (
         <RawButton
             elementRef={divRef}
+            id={optionNodeId}
+            role="option"
+            aria-selected={isSelected}
+            tabIndex={-1}
             className={_cs(
                 styles.genericOption,
                 optionContainerClassName,
diff --git a/packages/ui/src/components/SelectInputContainer/GenericOption/styles.module.css b/packages/ui/src/components/SelectInputContainer/GenericOption/styles.module.css
index b28631ffe3..ecb60de68b 100644
--- a/packages/ui/src/components/SelectInputContainer/GenericOption/styles.module.css
+++ b/packages/ui/src/components/SelectInputContainer/GenericOption/styles.module.css
@@ -1,7 +1,10 @@
 .generic-option {
     display: flex;
     gap: var(--go-ui-spacing-sm);
-    padding: var(--go-ui-spacing-2xs);
+
+    /* Airy rows with a larger inline-start inset (design dropdown spec). */
+    padding-block: var(--go-ui-spacing-sm);
+    padding-inline: var(--go-ui-spacing-md) var(--go-ui-spacing-sm);
     text-align: left;
 
     &:hover {
diff --git a/packages/ui/src/components/SelectInputContainer/index.tsx b/packages/ui/src/components/SelectInputContainer/index.tsx
index 718f547ca5..a263876b19 100644
--- a/packages/ui/src/components/SelectInputContainer/index.tsx
+++ b/packages/ui/src/components/SelectInputContainer/index.tsx
@@ -1,4 +1,7 @@
-import React, { useRef } from 'react';
+import React, {
+    useId,
+    useRef,
+} from 'react';
 import {
     ArrowDownSmallFillIcon,
     ArrowUpSmallFillIcon,
@@ -7,14 +10,17 @@ import {
 } from '@ifrc-go/icons';
 import {
     _cs,
+    isDefined,
     isTruthyString,
 } from '@togglecorp/fujs';
 
 import Button, { Props as ButtonProps } from '#components/Button';
+import DefaultMessage from '#components/DefaultMessage';
 import InputContainer, { Props as InputContainerProps } from '#components/InputContainer';
-import List from '#components/List';
-import Popup from '#components/Popup';
+import ListView from '#components/ListView';
+import Popover from '#components/Popover';
 import RawInput from '#components/RawInput';
+import RawList from '#components/RawList';
 import useBlurEffect from '#hooks/useBlurEffect';
 import useKeyboard from '#hooks/useKeyboard';
 import useTranslation from '#hooks/useTranslation';
@@ -71,6 +77,10 @@ interface SelectInputContainerProps<
     onEnterWithoutOption?: () => void;
     dropdownHidden?: boolean;
     withoutDropdownIcon?: boolean;
+    /** Predicate for whether an option is currently chosen (drives aria-selected). */
+    optionSelector?: (optionKey: OPTION_KEY, option: OPTION) => boolean;
+    /** True for multi-select variants; sets aria-multiselectable on the listbox. */
+    multiSelect?: boolean;
 }
 
 export type Props<
@@ -78,10 +88,20 @@ export type Props<
     NAME,
     OPTION,
     RENDER_PROPS extends ContentBaseProps,
-> = SelectInputContainerProps<OPTION_KEY, NAME, OPTION, RENDER_PROPS> & Omit<InputContainerProps, 'input' | 'inputSectionRef' | 'containerRef'>
+> = SelectInputContainerProps<OPTION_KEY, NAME, OPTION, RENDER_PROPS> & Omit<InputContainerProps, 'input' | 'inputSectionRef' | 'elementRef'>
 
 const emptyList: unknown[] = [];
 
+/**
+ * Shared shell for the select inputs: search input, clear/select-all/
+ * dropdown actions and the options popup (generic layer).
+ *
+ * Implements the WAI-ARIA combobox pattern: role="combobox" on the search input
+ * (aria-expanded/-controls/-haspopup/-autocomplete + aria-activedescendant
+ * tracking the keyboard-focused option), role="listbox" on the options popup,
+ * and role="option" + aria-selected on each option (see GenericOption). The
+ * label/hint/error contract is wired through InputContainer via inputId.
+ */
 function SelectInputContainer<
     OPTION_KEY extends OptionKey,
     const NAME,
@@ -134,6 +154,8 @@ function SelectInputContainer<
         onEnterWithoutOption,
         dropdownHidden,
         withoutDropdownIcon,
+        optionSelector,
+        multiSelect,
     } = selectInputContainerProps;
 
     const options = optionsFromProps ?? (emptyList as OPTION[]);
@@ -144,6 +166,16 @@ function SelectInputContainer<
     const inputElementRef = useRef<HTMLInputElement>(null);
     const popupRef = useRef<HTMLDivElement>(null);
 
+    const generatedId = useId();
+    const inputId = generatedId;
+    const listboxId = `${generatedId}-listbox`;
+    const getOptionNodeId = (key: OPTION_KEY) => `${generatedId}-option-${key}`;
+    const hasError = isDefined(inputContainerProps.error);
+    const hasHint = isDefined(inputContainerProps.hint);
+    const errorId = hasError ? `${generatedId}-error` : undefined;
+    const hintId = hasHint ? `${generatedId}-hint` : undefined;
+    const describedBy = [hintId, errorId].filter(isDefined).join(' ') || undefined;
+
     // FIXME(frozenhelium): useCallback removed for React Compiler compatibility
     const handleSearchInputChange = (value: string | undefined) => {
         if (!dropdownShown) {
@@ -207,6 +239,8 @@ function SelectInputContainer<
         onClick: handleOptionClick,
         onFocus: onFocusedKeyChange,
         optionContainerClassName: _cs(optionContainerClassName, styles.listItem),
+        optionNodeId: getOptionNodeId(key),
+        isSelected: optionSelector ? optionSelector(key, option) : false,
     });
 
     useBlurEffect(
@@ -242,8 +276,11 @@ function SelectInputContainer<
             <InputContainer
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...inputContainerProps}
-                containerRef={containerRef}
+                elementRef={containerRef}
                 inputSectionRef={inputSectionRef}
+                inputId={inputId}
+                hintId={hintId}
+                errorId={errorId}
                 disabled={disabled}
                 readOnly={readOnly}
                 required={required}
@@ -254,8 +291,7 @@ function SelectInputContainer<
                             <Button
                                 onClick={onSelectAllButtonClick}
                                 disabled={disabled}
-                                colorVariant="text"
-                                styleVariant="action"
+                                variant="tertiary"
                                 name={undefined}
                                 title={strings.buttonTitleSelect}
                             >
@@ -266,8 +302,7 @@ function SelectInputContainer<
                             <Button
                                 onClick={onClearButtonClick}
                                 disabled={disabled}
-                                colorVariant="text"
-                                styleVariant="action"
+                                variant="tertiary"
                                 name={undefined}
                                 title={strings.buttonTitleClear}
                             >
@@ -277,8 +312,7 @@ function SelectInputContainer<
                         {!readOnly && !withoutDropdownIcon && (
                             <Button
                                 onClick={handleToggleDropdown}
-                                colorVariant="text"
-                                styleVariant="action"
+                                variant="tertiary"
                                 name={undefined}
                                 disabled={disabled}
                                 title={dropdownShownActual
@@ -295,6 +329,20 @@ function SelectInputContainer<
                 input={(
                     <RawInput
                         name={name}
+                        id={inputId}
+                        role="combobox"
+                        aria-expanded={dropdownShownActual}
+                        aria-controls={dropdownShownActual ? listboxId : undefined}
+                        aria-haspopup="listbox"
+                        aria-autocomplete="list"
+                        aria-activedescendant={
+                            dropdownShownActual && focusedKey
+                                ? getOptionNodeId(focusedKey.key)
+                                : undefined
+                        }
+                        aria-invalid={hasError}
+                        aria-required={required}
+                        aria-describedby={describedBy}
                         elementRef={inputElementRef}
                         readOnly={readOnly}
                         disabled={disabled}
@@ -311,32 +359,47 @@ function SelectInputContainer<
                 )}
             />
             {dropdownShownActual && (
-                <Popup
+                <Popover
                     elementRef={popupRef}
                     parentRef={inputSectionRef}
                     className={_cs(optionsPopupClassName, styles.popup)}
                 >
-                    <List<OPTION, OPTION_KEY, GenericOptionProps<RENDER_PROPS, OPTION_KEY, OPTION>>
+                    <ListView
                         className={styles.list}
-                        data={options}
-                        keySelector={optionKeySelector}
-                        renderer={GenericOption}
-                        rendererParams={optionListRendererParams}
-                        errored={optionsErrored}
-                        filtered={optionsFiltered}
-                        pending={optionsPending}
-                        pendingMessage={strings.selectInputPendingMessage}
-                        emptyMessage={strings.selectInputEmptyMessage}
-                        filteredEmptyMessage={strings.selectInputFilteredMessage}
-                        errorMessage={strings.selectInputErrorMessage}
-                        compact
-                    />
+                        layout="block"
+                        spacing="none"
+                        role="listbox"
+                        id={listboxId}
+                        aria-multiselectable={multiSelect ? true : undefined}
+                    >
+                        <RawList<
+                            OPTION,
+                            OPTION_KEY,
+                            GenericOptionProps<RENDER_PROPS, OPTION_KEY, OPTION>
+                        >
+                            data={options}
+                            keySelector={optionKeySelector}
+                            renderer={GenericOption}
+                            rendererParams={optionListRendererParams}
+                        />
+                        <DefaultMessage
+                            pending={optionsPending}
+                            filtered={optionsFiltered}
+                            errored={optionsErrored}
+                            empty={options.length === 0}
+                            pendingMessage={strings.selectInputPendingMessage}
+                            emptyMessage={strings.selectInputEmptyMessage}
+                            filteredEmptyMessage={strings.selectInputFilteredMessage}
+                            errorMessage={strings.selectInputErrorMessage}
+                            compact
+                        />
+                    </ListView>
                     {!optionsPending && !optionsErrored && !!infoMessage && (
                         <div className={styles.infoMessage}>
                             {infoMessage}
                         </div>
                     )}
-                </Popup>
+                </Popover>
             )}
         </>
     );
diff --git a/packages/ui/src/components/Selection/i18n.json b/packages/ui/src/components/Selection/i18n.json
new file mode 100644
index 0000000000..45cc8e2fc3
--- /dev/null
+++ b/packages/ui/src/components/Selection/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "removeButtonLabel": "Remove {label}"
+    }
+}
diff --git a/packages/ui/src/components/Selection/index.tsx b/packages/ui/src/components/Selection/index.tsx
new file mode 100644
index 0000000000..11b66a9ba5
--- /dev/null
+++ b/packages/ui/src/components/Selection/index.tsx
@@ -0,0 +1,120 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import { CloseFillIcon } from '@ifrc-go/icons';
+import { isNotDefined } from '@togglecorp/fujs';
+
+import ChipLayout from '#components/ChipLayout';
+import IconButton from '#components/IconButton';
+import useTranslation from '#hooks/useTranslation';
+import { resolveToString } from '#utils/translation';
+
+import i18n from './i18n.json';
+
+export interface Props<O, V extends string | number, N extends string | number> {
+    className?: string;
+    name: N;
+    /** HTML element rendered as the pill root (use `'li'` inside a list) */
+    as?: 'span' | 'div' | 'li';
+    /**
+     * The selected value. Used directly as the label (raw variant, the old
+     * `DismissableTextOutput`), or resolved to a label through
+     * `options`/`labelSelector` when those are supplied (the old
+     * `DismissableListOutput`).
+     */
+    value: V | undefined;
+    onDismiss: (value: V | undefined, name: N) => void;
+    keySelector?: (option: O) => V;
+    labelSelector?: (option: O) => string;
+    options?: O[] | undefined | null;
+}
+
+/**
+ * One removable selected value (specific layer, interactive).
+ *
+ * Composes `ChipLayout` (selection style) with a real remove `<button>` in
+ * the trailing slot. The label comes either from a raw `value` (covers the old
+ * `DismissableTextOutput`) or is resolved through `keySelector`/`labelSelector`
+ * over `options` (covers the old `DismissableListOutput`). Calls `onDismiss`
+ * with the cleared value and `name` when removed.
+ */
+function Selection<O, V extends string | number, N extends string | number>(
+    props: Props<O, V, N>,
+) {
+    const strings = useTranslation(i18n);
+
+    const {
+        className,
+        name,
+        value,
+        as = 'span',
+        onDismiss,
+        keySelector,
+        labelSelector,
+        options,
+    } = props;
+
+    const label = useMemo(
+        () => {
+            if (isNotDefined(value)) {
+                return undefined;
+            }
+            if (isNotDefined(keySelector) || isNotDefined(labelSelector)) {
+                // Raw-value variant: value is the label.
+                return String(value);
+            }
+            if (isNotDefined(options)) {
+                return undefined;
+            }
+            const matchingOption = options.find(
+                (option) => keySelector(option) === value,
+            );
+            if (isNotDefined(matchingOption)) {
+                return undefined;
+            }
+            return labelSelector(matchingOption);
+        },
+        [value, keySelector, labelSelector, options],
+    );
+
+    const handleDismiss = useCallback(
+        () => {
+            // Both variants clear to `undefined`; the value type is N-agnostic.
+            onDismiss(undefined, name);
+        },
+        [name, onDismiss],
+    );
+
+    if (isNotDefined(value) || isNotDefined(label)) {
+        return null;
+    }
+
+    const removeLabel = resolveToString(
+        strings.removeButtonLabel,
+        { label },
+    );
+
+    return (
+        <ChipLayout
+            className={className}
+            as={as}
+            styleVariant="selection"
+            label={label}
+            trailing={(
+                <IconButton
+                    name={undefined}
+                    spacing="none"
+                    title={removeLabel}
+                    ariaLabel={removeLabel}
+                    onClick={handleDismiss}
+                    variant="tertiary"
+                >
+                    <CloseFillIcon />
+                </IconButton>
+            )}
+        />
+    );
+}
+
+export default Selection;
diff --git a/packages/ui/src/components/SelectionList/index.tsx b/packages/ui/src/components/SelectionList/index.tsx
new file mode 100644
index 0000000000..3b863f6478
--- /dev/null
+++ b/packages/ui/src/components/SelectionList/index.tsx
@@ -0,0 +1,121 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import {
+    _cs,
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import RawList from '#components/RawList';
+import Selection, { type Props as SelectionProps } from '#components/Selection';
+
+import styles from './styles.module.css';
+
+export interface Props<
+    O,
+    V extends string | number,
+    N extends string | number
+> {
+    className?: string;
+    listClassName?: string;
+    value: V[] | undefined;
+    name: N;
+    onDismiss: (value: V[] | undefined, name: N) => void;
+    keySelector: (option: O) => V;
+    labelSelector: (option: O) => string;
+    options: O[] | undefined | null;
+    /** Optional group prefix (e.g. "Filter Type:"); also shows the left accent */
+    label?: React.ReactNode;
+}
+
+/**
+ * Multiple removable selected values (specific layer, interactive).
+ *
+ * Renders a list (`<ul>` of `<li>` selections) of `Selection` pills, each
+ * resolved through `keySelector`/`labelSelector` over `options`. Removing one
+ * recomputes the value array and calls `onDismiss`. Covers the old
+ * `DismissableMultiListOutput`. An optional group `label` renders a prefix and
+ * a left accent.
+ */
+function SelectionList<
+    O,
+    V extends string | number,
+    N extends string | number
+>(
+    props: Props<O, V, N>,
+) {
+    const {
+        className,
+        listClassName,
+        name,
+        value,
+        onDismiss,
+        labelSelector,
+        keySelector,
+        options,
+        label,
+    } = props;
+
+    const selectedOptions = useMemo(
+        () => {
+            if (isNotDefined(options) || !Array.isArray(value)) {
+                return undefined;
+            }
+            return options.filter((option) => value.includes(keySelector(option)));
+        },
+        [value, options, keySelector],
+    );
+
+    const handleDismiss = useCallback(
+        (dismissedValue: V | undefined) => {
+            const updatedValue = value?.filter((item) => item !== dismissedValue);
+            onDismiss(updatedValue, name);
+        },
+        [name, onDismiss, value],
+    );
+
+    const rendererParams = useCallback(
+        (key: V): SelectionProps<O, V, V> => ({
+            value: key,
+            name: key,
+            as: 'li',
+            onDismiss: handleDismiss,
+            options,
+            keySelector,
+            labelSelector,
+        }),
+        [handleDismiss, options, keySelector, labelSelector],
+    );
+
+    if (isNotDefined(value) || value.length < 1) {
+        return null;
+    }
+
+    return (
+        <div
+            className={_cs(
+                styles.selectionList,
+                isDefined(label) && styles.withLabel,
+                className,
+            )}
+        >
+            {isDefined(label) && (
+                <span className={styles.label}>
+                    {label}
+                </span>
+            )}
+            <ul className={_cs(styles.list, listClassName)}>
+                <RawList
+                    data={selectedOptions}
+                    renderer={Selection<O, V, V>}
+                    rendererParams={rendererParams}
+                    keySelector={keySelector}
+                />
+            </ul>
+        </div>
+    );
+}
+
+export default SelectionList;
diff --git a/packages/ui/src/components/SelectionList/styles.module.css b/packages/ui/src/components/SelectionList/styles.module.css
new file mode 100644
index 0000000000..aa8ed4c419
--- /dev/null
+++ b/packages/ui/src/components/SelectionList/styles.module.css
@@ -0,0 +1,25 @@
+.selection-list {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--go-ui-spacing-3xs);
+
+    &.with-label {
+        border-left: var(--go-ui-width-separator-md) solid var(--go-ui-color-primary-red);
+        padding-left: var(--go-ui-spacing-2xs);
+    }
+
+    .label {
+        color: var(--go-ui-color-text-light);
+        font-weight: var(--go-ui-font-weight-bold);
+    }
+
+    .list {
+        display: inline-flex;
+        align-items: center;
+        flex-wrap: wrap;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        gap: var(--go-ui-spacing-3xs);
+    }
+}
diff --git a/packages/ui/src/components/Spinner/index.tsx b/packages/ui/src/components/Spinner/index.tsx
index fdba458360..bcea311047 100644
--- a/packages/ui/src/components/Spinner/index.tsx
+++ b/packages/ui/src/components/Spinner/index.tsx
@@ -5,14 +5,24 @@ import styles from './styles.module.css';
 export interface Props {
     className?: string;
 }
+
+/**
+ * Spinner is a busy/loading indicator (raw layer).
+ * It exposes itself as a `role="status"` live region marked `aria-busy`;
+ * the animated dots are decorative and `aria-hidden`.
+ */
 function Spinner(props: Props) {
     const { className } = props;
 
     return (
-        <div className={_cs(styles.spinner, className)}>
-            <div className={styles.spinnerBounce} />
-            <div className={styles.spinnerBounce} />
-            <div className={styles.spinnerBounce} />
+        <div
+            role="status"
+            aria-busy
+            className={_cs(styles.spinner, className)}
+        >
+            <div className={styles.spinnerBounce} aria-hidden />
+            <div className={styles.spinnerBounce} aria-hidden />
+            <div className={styles.spinnerBounce} aria-hidden />
         </div>
     );
 }
diff --git a/packages/ui/src/components/Spinner/styles.module.css b/packages/ui/src/components/Spinner/styles.module.css
index 143fd758e4..5ddc870c03 100644
--- a/packages/ui/src/components/Spinner/styles.module.css
+++ b/packages/ui/src/components/Spinner/styles.module.css
@@ -1,14 +1,11 @@
 .spinner {
     display: inline-flex;
-    border-radius: var(--go-ui-border-radius-full);
-    background: var(--go-ui-color-gray-40);
-    padding: 0.2em;
-    line-height: 0;
     gap: 0.2em;
+    line-height: 0;
 
     .spinner-bounce {
         border-radius: 50%;
-        background: var(--go-ui-color-white);
+        background: var(--go-ui-color-gray-50);
         width: 0.6em;
         height: 0.6em;
         animation: spinner-bounce-delay var(--go-ui-duration-animation-slow) infinite ease-in-out both;
@@ -26,6 +23,12 @@
         }
     }
 
+    /* Show three static dots instead of the bounce for reduced-motion users. */
+    @media (prefers-reduced-motion: reduce) {
+        .spinner-bounce {
+            animation: none;
+        }
+    }
 }
 
 @keyframes spinner-bounce-delay {
diff --git a/packages/ui/src/components/StackedProgressBar/index.tsx b/packages/ui/src/components/StackedProgressBar/index.tsx
index bf9ef5568c..0d567b0726 100644
--- a/packages/ui/src/components/StackedProgressBar/index.tsx
+++ b/packages/ui/src/components/StackedProgressBar/index.tsx
@@ -3,7 +3,7 @@ import { _cs } from '@togglecorp/fujs';
 
 import LegendItem from '#components/LegendItem';
 import ListView from '#components/ListView';
-import NumberOutput from '#components/NumberOutput';
+import NumberDisplay from '#components/NumberDisplay';
 import {
     getPercentage,
     sumSafe,
@@ -16,9 +16,16 @@ export interface Props<VALUE> {
     data: VALUE[];
     valueSelector: (value: VALUE, index: number) => number;
     labelSelector: (value: VALUE, index: number) => React.ReactNode;
+    /** CSS color for each segment (data-driven visualization exception) */
     colorSelector: (value: VALUE, index: number) => string;
 }
 
+/**
+ * StackedProgressBar visualizes the proportions of multiple values as
+ * segments of a single bar, with a legend.
+ * Specific (data-viz) layer: segment colors come from data via
+ * `colorSelector`, the blessed data-driven exception.
+ */
 function StackedProgressBar<VALUE>(props: Props<VALUE>) {
     const {
         className,
@@ -49,12 +56,12 @@ function StackedProgressBar<VALUE>(props: Props<VALUE>) {
                             className={styles.barInfo}
                             style={{ width: `${percentage}%` }}
                         >
-                            <NumberOutput
+                            <NumberDisplay
                                 className={styles.value}
                                 value={datum.value}
                             />
                             {(percentage > 10) && (
-                                <NumberOutput
+                                <NumberDisplay
                                     className={styles.percentage}
                                     value={getPercentage(datum.value, total)}
                                     prefix="("
diff --git a/packages/ui/src/components/StackedProgressBar/styles.module.css b/packages/ui/src/components/StackedProgressBar/styles.module.css
index 1356532ebc..d046e586b7 100644
--- a/packages/ui/src/components/StackedProgressBar/styles.module.css
+++ b/packages/ui/src/components/StackedProgressBar/styles.module.css
@@ -26,7 +26,7 @@
         --height: 1rem;
         display: flex;
         border-radius: calc(0.5 * var(--height));
-        background-color: var(--go-ui-color-gray-50);
+        background-color: var(--go-ui-color-gray-30);
         height: var(--height);
         overflow: hidden;
 
diff --git a/packages/ui/src/components/Switch/SwitchIcon/styles.module.css b/packages/ui/src/components/Switch/SwitchIcon/styles.module.css
index 2b93ba2ad3..6cf3ac87d5 100644
--- a/packages/ui/src/components/Switch/SwitchIcon/styles.module.css
+++ b/packages/ui/src/components/Switch/SwitchIcon/styles.module.css
@@ -2,7 +2,7 @@
     --gap: .05em;
     --border-width: var(--go-ui-width-separator-sm);
     --knob-diameter: calc(1em - 2 * var(--gap) - 2 * var(--border-width));
-    --background-color: var(--go-ui-color-gray-50);
+    --background-color: var(--go-ui-color-gray-30);
     --border-color: var(--go-ui-color-gray-30);
     --knob-color: var(--go-ui-color-white);
 
diff --git a/packages/ui/src/components/Switch/index.tsx b/packages/ui/src/components/Switch/index.tsx
index b478c3956b..466d4eb6b5 100644
--- a/packages/ui/src/components/Switch/index.tsx
+++ b/packages/ui/src/components/Switch/index.tsx
@@ -10,6 +10,13 @@ export interface SwitchProps<N extends string | number> extends Omit<CheckboxPro
     withInvertedView?: boolean;
 }
 
+/**
+ * Boolean toggle rendered as a switch (a Checkbox with a switch
+ * checkmark) (specific layer).
+ *
+ * Sets `role="switch"` + `aria-checked` on the underlying control so it
+ * is announced as a switch (not a checkbox) by assistive tech.
+ */
 function Switch<N extends string | number>(props: SwitchProps<N>) {
     const {
         className,
@@ -18,10 +25,15 @@ function Switch<N extends string | number>(props: SwitchProps<N>) {
         ...otherProps
     } = props;
 
+    const { value, invertedLogic = false } = otherProps;
+    const checked = invertedLogic ? !value : value;
+
     return (
         <Checkbox
             className={_cs(styles.switch, withInvertedView && styles.withInvertedView, className)}
             {...otherProps} // eslint-disable-line react/jsx-props-no-spreading
+            role="switch"
+            aria-checked={checked ?? false}
             checkmarkContainerClassName={_cs(
                 styles.checkmarkContainer,
                 checkmarkContainerClassName,
diff --git a/packages/ui/src/components/TabLayout/index.tsx b/packages/ui/src/components/TabLayout/index.tsx
index aacfe08137..535a3e3427 100644
--- a/packages/ui/src/components/TabLayout/index.tsx
+++ b/packages/ui/src/components/TabLayout/index.tsx
@@ -9,7 +9,7 @@ import type {
     TabColorVariant,
     TabStyleVariant,
 } from '#contexts/tab';
-import useSpacingToken from '#hooks/useSpacingToken';
+import { getSpacingClassName } from '#utils/style';
 
 import styles from './styles.module.css';
 
@@ -74,7 +74,7 @@ function TabLayout(props: Props) {
         ...inlineLayoutProps
     } = props;
 
-    const wrapperSpacingClassName = useSpacingToken({
+    const wrapperSpacingClassName = getSpacingClassName({
         modes: ['padding-inline'],
         spacing,
         offset: -5,
@@ -140,7 +140,6 @@ function TabLayout(props: Props) {
                     isFirstStep && styles.firstStep,
                     isLastStep && styles.lastStep,
                 )}
-                role="tab"
             >
                 <div className={styles.dotWrapper}>
                     <div className={styles.beforeLine} />
diff --git a/packages/ui/src/components/TabLayout/styles.module.css b/packages/ui/src/components/TabLayout/styles.module.css
index 1d4f703dac..ed493e2251 100644
--- a/packages/ui/src/components/TabLayout/styles.module.css
+++ b/packages/ui/src/components/TabLayout/styles.module.css
@@ -63,6 +63,7 @@
         --background-color: transparent;
 
         &.active {
+            --background-color: var(--go-ui-color-foreground);
             color: var(--go-ui-color-primary-red);
             border-inline-start: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
             border-inline-end: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
@@ -81,6 +82,16 @@
 
         &.active {
             --text-color: var(--variant-color);
+
+            /* Active accent underline in the variant color (design: red nav). */
+            &::after {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                border-bottom: var(--go-ui-width-separator-md) solid var(--variant-color);
+                content: '';
+            }
         }
     }
 
diff --git a/packages/ui/src/components/TabListLayout/index.tsx b/packages/ui/src/components/TabListLayout/index.tsx
index 90148aa518..20b4d5f29c 100644
--- a/packages/ui/src/components/TabListLayout/index.tsx
+++ b/packages/ui/src/components/TabListLayout/index.tsx
@@ -59,6 +59,7 @@ function TabListLayout(props: Props) {
                 <ListView
                     layout="block"
                     role="tablist"
+                    aria-orientation="vertical"
                     spacing={styleVariant === 'vertical' ? 'none' : spacing}
                     withSpacingOpticalCorrection={styleVariant === 'vertical-compact'}
                     spacingOffset={styleVariant === 'vertical-compact' ? -2 : 0}
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/ExpandButton/index.tsx b/packages/ui/src/components/Table/ColumnShortcuts/ExpandButton/index.tsx
index b419ea1ac1..5f09d6eb24 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/ExpandButton/index.tsx
+++ b/packages/ui/src/components/Table/ColumnShortcuts/ExpandButton/index.tsx
@@ -17,6 +17,10 @@ export interface ExpandButtonProps<ROW> {
     disabled?: boolean;
 }
 
+/**
+ * Specific component for the row expansion toggle used by the
+ * expand-row table column shortcut.
+ */
 function ExpandButton<K>(props : ExpandButtonProps<K>) {
     const {
         className,
@@ -34,8 +38,7 @@ function ExpandButton<K>(props : ExpandButtonProps<K>) {
             )}
             name={row}
             onClick={onClick}
-            colorVariant="text"
-            styleVariant="action"
+            variant="tertiary"
             disabled={disabled}
         >
             {expanded ? (
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/MultiTimelineHeader/index.tsx b/packages/ui/src/components/Table/ColumnShortcuts/MultiTimelineHeader/index.tsx
index 4bc06d0198..dde173e183 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/MultiTimelineHeader/index.tsx
+++ b/packages/ui/src/components/Table/ColumnShortcuts/MultiTimelineHeader/index.tsx
@@ -1,6 +1,6 @@
 import { _cs } from '@togglecorp/fujs';
 
-import DateOutput from '#components/DateOutput';
+import DateDisplay from '#components/DateDisplay';
 
 import HeaderCell, { HeaderCellProps } from '../../HeaderCell';
 
@@ -14,6 +14,10 @@ export interface Props extends HeaderCellProps {
     } | undefined;
 }
 
+/**
+ * Specific table header cell that labels a multi-timeline column with its
+ * start and end dates.
+ */
 function MultiTimelineHeader(props: Props) {
     const {
         className,
@@ -29,10 +33,10 @@ function MultiTimelineHeader(props: Props) {
             titleClassName={styles.title}
             title={(
                 <>
-                    <DateOutput
+                    <DateDisplay
                         value={dateRange?.start}
                     />
-                    <DateOutput
+                    <DateDisplay
                         value={dateRange?.end}
                     />
                 </>
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/MultiTimelineItem/index.tsx b/packages/ui/src/components/Table/ColumnShortcuts/MultiTimelineItem/index.tsx
index 158fc8502f..71d8344775 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/MultiTimelineItem/index.tsx
+++ b/packages/ui/src/components/Table/ColumnShortcuts/MultiTimelineItem/index.tsx
@@ -3,7 +3,7 @@ import {
     isNotDefined,
 } from '@togglecorp/fujs';
 
-import TextOutput from '#components/TextOutput';
+import DataDisplay from '#components/DataDisplay';
 import Tooltip from '#components/Tooltip';
 import {
     type DateLike,
@@ -28,6 +28,10 @@ export interface Props {
     highlightedEndDateLabel: string;
 }
 
+/**
+ * Specific table cell component that draws a date-range bar plus a
+ * highlighted sub-range on a shared timeline, with a tooltip of the dates.
+ */
 function MultiTimelineItem(props: Props) {
     const {
         className,
@@ -95,24 +99,24 @@ function MultiTimelineItem(props: Props) {
             <Tooltip
                 description={(
                     <>
-                        <TextOutput
+                        <DataDisplay
                             valueType="date"
                             label={startDateLabel}
                             value={startDate}
                         />
-                        <TextOutput
+                        <DataDisplay
                             label={endDateLabel}
                             value={endDate}
                             valueType="date"
                         />
                         {highlightedStartDate && highlightedEndDate && (
                             <>
-                                <TextOutput
+                                <DataDisplay
                                     label={highlightedStartDateLabel}
                                     value={highlightedStartDate}
                                     valueType="date"
                                 />
-                                <TextOutput
+                                <DataDisplay
                                     label={highlightedEndDateLabel}
                                     value={highlightedEndDate}
                                     valueType="date"
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx b/packages/ui/src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx
index d5958e5538..9772642d34 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx
+++ b/packages/ui/src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx
@@ -1,6 +1,6 @@
 import { _cs } from '@togglecorp/fujs';
 
-import DateOutput from '#components/DateOutput';
+import DateDisplay from '#components/DateDisplay';
 
 import HeaderCell, { HeaderCellProps } from '../../HeaderCell';
 
@@ -14,6 +14,10 @@ export interface Props extends HeaderCellProps {
     } | undefined;
 }
 
+/**
+ * Specific table header cell that labels a timeline column with its
+ * start and end dates.
+ */
 function TimelineHeader(props: Props) {
     const {
         className,
@@ -29,10 +33,10 @@ function TimelineHeader(props: Props) {
             titleClassName={styles.title}
             title={(
                 <>
-                    <DateOutput
+                    <DateDisplay
                         value={dateRange?.start}
                     />
-                    <DateOutput
+                    <DateDisplay
                         value={dateRange?.end}
                     />
                 </>
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/TimelineItem/index.tsx b/packages/ui/src/components/Table/ColumnShortcuts/TimelineItem/index.tsx
index e24d0c5279..66988efc15 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/TimelineItem/index.tsx
+++ b/packages/ui/src/components/Table/ColumnShortcuts/TimelineItem/index.tsx
@@ -3,7 +3,7 @@ import {
     isNotDefined,
 } from '@togglecorp/fujs';
 
-import TextOutput from '#components/TextOutput';
+import DataDisplay from '#components/DataDisplay';
 import Tooltip from '#components/Tooltip';
 import {
     type DateLike,
@@ -22,6 +22,10 @@ export interface Props {
     } | undefined;
 }
 
+/**
+ * Specific table cell component that draws a single date-range bar on a
+ * shared timeline, with a tooltip of the start/end dates.
+ */
 function TimelineItem(props: Props) {
     const {
         className,
@@ -71,13 +75,13 @@ function TimelineItem(props: Props) {
             <Tooltip
                 description={(
                     <>
-                        <TextOutput
+                        <DataDisplay
                             valueType="date"
                             // FIXME: use translation
                             label="Start Date"
                             value={startDate}
                         />
-                        <TextOutput
+                        <DataDisplay
                             // FIXME: use translation
                             label="End Date"
                             value={endDate}
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/index.ts b/packages/ui/src/components/Table/ColumnShortcuts/index.ts
index 8356c613c7..cb475d5186 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/index.ts
+++ b/packages/ui/src/components/Table/ColumnShortcuts/index.ts
@@ -7,12 +7,12 @@ import {
     randomString,
 } from '@togglecorp/fujs';
 
-import BooleanOutput, { type Props as BooleanOutputProps } from '#components/BooleanOutput';
-import DateOutput, { type Props as DateOutputProps } from '#components/DateOutput';
-import DateRangeOutput, { type Props as DateRangeOutputProps } from '#components/DateRangeOutput';
-import NumberOutput, { type Props as NumberOutputProps } from '#components/NumberOutput';
+import BooleanDisplay, { type Props as BooleanDisplayProps } from '#components/BooleanDisplay';
+import DateDisplay, { type Props as DateDisplayProps } from '#components/DateDisplay';
+import DateRangeDisplay, { type Props as DateRangeDisplayProps } from '#components/DateRangeDisplay';
+import NumberDisplay, { type Props as NumberDisplayProps } from '#components/NumberDisplay';
 import ProgressBar, { type Props as ProgressBarProps } from '#components/ProgressBar';
-import ReducedListDisplay, { Props as ReducedListDisplayProps } from '#components/ReducedListDisplay';
+import TruncatedList, { Props as TruncatedListProps } from '#components/TruncatedList';
 
 import Cell, { type CellProps } from '../Cell';
 import HeaderCell, { type HeaderCellProps } from '../HeaderCell';
@@ -52,9 +52,9 @@ export function createBooleanColumn<D, K>(
     id: string,
     title: string,
     accessor: (item: D) => boolean | undefined | null,
-    options?: Options<D, K, BooleanOutputProps, HeaderCellProps>,
+    options?: Options<D, K, BooleanDisplayProps, HeaderCellProps>,
 ) {
-    const item: Column<D, K, BooleanOutputProps, HeaderCellProps> & {
+    const item: Column<D, K, BooleanDisplayProps, HeaderCellProps> & {
         valueSelector: (item: D) => boolean | undefined | null,
         valueComparator: (foo: D, bar: D) => number,
     } = {
@@ -71,8 +71,8 @@ export function createBooleanColumn<D, K>(
         },
         cellRendererClassName: options?.cellRendererClassName,
         cellContainerClassName: options?.cellContainerClassName,
-        cellRenderer: BooleanOutput,
-        cellRendererParams: (_: K, datum: D): BooleanOutputProps => ({
+        cellRenderer: BooleanDisplay,
+        cellRendererParams: (_: K, datum: D): BooleanDisplayProps => ({
             value: accessor(datum),
         }),
         valueSelector: accessor,
@@ -112,7 +112,7 @@ export function createProgressColumn<D, K>(
             value: accessor(datum),
             totalValue: 100,
             showPercentageInTitle: true,
-            colorVariant: 'primary',
+            variant: 'primary',
         }),
         valueSelector: accessor,
         valueComparator: (foo: D, bar: D) => compareNumber(accessor(foo), accessor(bar)),
@@ -183,12 +183,12 @@ export function createNumberColumn<D, K extends string | number>(
     id: string,
     title: string,
     accessor: (item: D) => number | undefined | null,
-    options?: Options<D, K, NumberOutputProps, HeaderCellProps> & {
-        suffix?: NumberOutputProps['suffix'];
-        maximumFractionDigits?: NumberOutputProps['maximumFractionDigits'];
+    options?: Options<D, K, NumberDisplayProps, HeaderCellProps> & {
+        suffix?: NumberDisplayProps['suffix'];
+        maximumFractionDigits?: NumberDisplayProps['maximumFractionDigits'];
     },
 ) {
-    const item: Column<D, K, NumberOutputProps, HeaderCellProps> & {
+    const item: Column<D, K, NumberDisplayProps, HeaderCellProps> & {
         valueSelector: (item: D) => number | undefined | null,
         valueComparator: (foo: D, bar: D) => number,
     } = {
@@ -211,8 +211,8 @@ export function createNumberColumn<D, K extends string | number>(
             options?.cellRendererClassName,
         ),
         cellContainerClassName: options?.cellContainerClassName,
-        cellRenderer: NumberOutput,
-        cellRendererParams: (_: K, datum: D): NumberOutputProps => ({
+        cellRenderer: NumberDisplay,
+        cellRendererParams: (_: K, datum: D): NumberDisplayProps => ({
             value: accessor(datum),
             suffix: options?.suffix,
             // compact: true,
@@ -232,9 +232,9 @@ export function createDateColumn<D, K>(
     id: string,
     title: string,
     accessor: (item: D) => string | undefined | null,
-    options?: Options<D, K, DateOutputProps, HeaderCellProps>,
+    options?: Options<D, K, DateDisplayProps, HeaderCellProps>,
 ) {
-    const item: Column<D, K, DateOutputProps, HeaderCellProps> & {
+    const item: Column<D, K, DateDisplayProps, HeaderCellProps> & {
         valueSelector: (item: D) => string | undefined | null,
         valueComparator: (foo: D, bar: D) => number,
     } = {
@@ -251,8 +251,8 @@ export function createDateColumn<D, K>(
         },
         cellRendererClassName: options?.cellRendererClassName,
         cellContainerClassName: options?.cellContainerClassName,
-        cellRenderer: DateOutput,
-        cellRendererParams: (_: K, datum: D): DateOutputProps => ({
+        cellRenderer: DateDisplay,
+        cellRendererParams: (_: K, datum: D): DateDisplayProps => ({
             value: accessor(datum),
             invalidText: '--',
         }),
@@ -269,9 +269,9 @@ export function createDateRangeColumn<D, K>(
     id: string,
     title: string,
     accessor: (item: D) => { startDate: string, endDate: string },
-    options?: Options<D, K, DateRangeOutputProps, HeaderCellProps>,
+    options?: Options<D, K, DateRangeDisplayProps, HeaderCellProps>,
 ) {
-    const item: Column<D, K, DateRangeOutputProps, HeaderCellProps> & {
+    const item: Column<D, K, DateRangeDisplayProps, HeaderCellProps> & {
         valueSelector: (item: D) => string | undefined | null,
         valueComparator: (foo: D, bar: D) => number,
     } = {
@@ -287,9 +287,9 @@ export function createDateRangeColumn<D, K>(
             infoDescription: options?.headerInfoDescription,
         },
         cellRendererClassName: options?.cellRendererClassName,
-        cellRenderer: DateRangeOutput,
+        cellRenderer: DateRangeDisplay,
         cellContainerClassName: options?.cellContainerClassName,
-        cellRendererParams: (_: K, datum: D): DateRangeOutputProps => ({
+        cellRendererParams: (_: K, datum: D): DateRangeDisplayProps => ({
             ...accessor(datum),
         }),
         valueSelector: (datum) => accessor(datum).startDate,
@@ -513,13 +513,13 @@ export function createMultiTimelineColumn<DATUM, KEY>(
 export function createListDisplayColumn<DATUM, KEY, LIST_ITEM, RENDERER_PROPS>(
     id: string,
     title: string,
-    rendererParams: (datum: DATUM) => ReducedListDisplayProps<LIST_ITEM, RENDERER_PROPS>,
+    rendererParams: (datum: DATUM) => TruncatedListProps<LIST_ITEM, RENDERER_PROPS>,
     options?: Options<DATUM, KEY, TableActionsProps, HeaderCellProps>,
 ) {
     const item: Column<
         DATUM,
         KEY,
-        ReducedListDisplayProps<LIST_ITEM, RENDERER_PROPS>,
+        TruncatedListProps<LIST_ITEM, RENDERER_PROPS>,
         HeaderCellProps
     > = {
         id,
@@ -529,7 +529,7 @@ export function createListDisplayColumn<DATUM, KEY, LIST_ITEM, RENDERER_PROPS>(
             sortable: false,
         },
         headerContainerClassName: options?.headerContainerClassName,
-        cellRenderer: ReducedListDisplay,
+        cellRenderer: TruncatedList,
         cellRendererParams: (_, datum) => ({
             ...rendererParams(datum),
         }),
diff --git a/packages/ui/src/components/Table/HeaderCell/index.tsx b/packages/ui/src/components/Table/HeaderCell/index.tsx
index 9065797c20..04219283d1 100644
--- a/packages/ui/src/components/Table/HeaderCell/index.tsx
+++ b/packages/ui/src/components/Table/HeaderCell/index.tsx
@@ -14,7 +14,7 @@ import {
 } from '@togglecorp/fujs';
 
 import Button from '#components/Button';
-import InfoPopup from '#components/InfoPopup';
+import MoreInfo from '#components/MoreInfo';
 import useTranslation from '#hooks/useTranslation';
 
 import type {
@@ -27,12 +27,18 @@ import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 export interface HeaderCellProps extends BaseHeader {
+    /** Show the sort toggle button and wire it to the surrounding SortContext */
     sortable?: boolean;
+    /** Direction applied on the first sort interaction (default 'asc') */
     defaultSortDirection?: SortDirection;
     infoTitle?: React.ReactNode;
     infoDescription?: React.ReactNode;
 }
 
+/**
+ * Specific component for a table column header cell with optional
+ * sorting control and info popup.
+ */
 function HeaderCell(props: HeaderCellProps) {
     const {
         className,
@@ -92,7 +98,7 @@ function HeaderCell(props: HeaderCellProps) {
             {sortable && (
                 <Button
                     name={undefined}
-                    styleVariant="action"
+                    variant="tertiary"
                     onClick={handleSortClick}
                     title={strings.sortTableButtonTitle}
                     className={styles.sortButton}
@@ -107,11 +113,12 @@ function HeaderCell(props: HeaderCellProps) {
                 {title}
             </div>
             {(infoTitle || infoDescription) && (
-                <InfoPopup
+                <MoreInfo
                     className={styles.infoPopupIcon}
                     title={infoTitle}
-                    description={infoDescription}
-                />
+                >
+                    {infoDescription}
+                </MoreInfo>
             )}
         </div>
     );
diff --git a/packages/ui/src/components/Table/TableActions/index.tsx b/packages/ui/src/components/Table/TableActions/index.tsx
index 00672261a1..e56c67b7fb 100644
--- a/packages/ui/src/components/Table/TableActions/index.tsx
+++ b/packages/ui/src/components/Table/TableActions/index.tsx
@@ -2,17 +2,23 @@ import React from 'react';
 import { MoreFillIcon } from '@ifrc-go/icons';
 import { _cs } from '@togglecorp/fujs';
 
-import DropdownMenu from '#components/DropdownMenu';
+import Menu from '#components/Menu';
 
 import styles from './styles.module.css';
 
 export interface Props {
     className?: string;
     children?: React.ReactNode;
+    /** Additional actions shown inside an overflow ("more") dropdown */
     extraActions?: React.ReactNode;
+    /** Keep the dropdown open after an action is clicked */
     persistent?: boolean;
 }
 
+/**
+ * Specific component for the actions cell of a table row, with an
+ * optional overflow dropdown for extra actions.
+ */
 function TableActions(props: Props) {
     const {
         className,
@@ -25,15 +31,14 @@ function TableActions(props: Props) {
         <div className={_cs(styles.tableActions, className)}>
             {children}
             {extraActions && (
-                <DropdownMenu
+                <Menu
                     withoutDropdownIcon
-                    labelColorVariant="text"
-                    labelStyleVariant="action"
+                    labelVariant="tertiary"
                     label={<MoreFillIcon className={styles.moreIcon} />}
                     persistent={persistent}
                 >
                     {extraActions}
-                </DropdownMenu>
+                </Menu>
             )}
         </div>
     );
diff --git a/packages/ui/src/components/Table/TableData/styles.module.css b/packages/ui/src/components/Table/TableData/styles.module.css
index fcd5d81388..3be0e65748 100644
--- a/packages/ui/src/components/Table/TableData/styles.module.css
+++ b/packages/ui/src/components/Table/TableData/styles.module.css
@@ -12,4 +12,8 @@
         --cell-border-color: var(--go-ui-color-separator-light);
         --cell-background-color: var(--go-ui-color-background);
     }
+
+    &.without-border {
+        --cell-border-color: transparent;
+    }
 }
diff --git a/packages/ui/src/components/Tabs/Tab/index.tsx b/packages/ui/src/components/Tabs/Tab/index.tsx
index 361b7cd986..de7ba96680 100644
--- a/packages/ui/src/components/Tabs/Tab/index.tsx
+++ b/packages/ui/src/components/Tabs/Tab/index.tsx
@@ -1,18 +1,32 @@
 import React from 'react';
-import { isDefined } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import RawButton from '#components/RawButton';
 import TabLayout, { Props as TabLayoutProps } from '#components/TabLayout';
-import TabContext, { type TabKey } from '#contexts/tab';
+import TabContext, {
+    getTabNodeId,
+    getTabPanelNodeId,
+    type TabKey,
+} from '#contexts/tab';
 
 import styles from './styles.module.css';
 
-export interface Props<NAME extends TabKey> extends Omit<TabLayoutProps, 'colorVariant' | 'styleVariant' | 'isActive'> {
+export interface Props<NAME extends TabKey> extends Omit<TabLayoutProps, 'colorVariant' | 'styleVariant' | 'active'> {
     name: NAME;
+    /** Position of this tab when used inside a 'step' style tab list (1-based) */
     step?: number;
+    /** Show the errored state on the tab */
     errored?: boolean;
 }
 
+/**
+ * Specific component for a single tab item, to be used inside Tabs.
+ * Renders a RawButton wrapping a TabLayout; the visual variants and active
+ * state come from the surrounding Tabs context, not from props.
+ */
 export default function Tab<NAME extends TabKey>(props: Props<NAME>) {
     const context = React.useContext(TabContext);
 
@@ -25,6 +39,9 @@ export default function Tab<NAME extends TabKey>(props: Props<NAME>) {
         setStep,
         step: stepFromContext,
         tabs,
+        idBase,
+        activeTab,
+        setActiveTab,
     } = context;
 
     const numTabs = tabs.length;
@@ -45,7 +62,7 @@ export default function Tab<NAME extends TabKey>(props: Props<NAME>) {
         return () => { unregisterTab(name); };
     }, [registerTab, unregisterTab, name]);
 
-    const isActive = context.activeTab === name;
+    const isActive = activeTab === name;
     React.useEffect(() => {
         if (isActive && setStep) {
             setStep(step);
@@ -58,13 +75,60 @@ export default function Tab<NAME extends TabKey>(props: Props<NAME>) {
 
     const disabled = disabledFromContext || disabledFromProps;
 
+    const tabId = getTabNodeId(idBase, name);
+    const panelId = getTabPanelNodeId(idBase, name);
+    const isVertical = styleVariant === 'vertical' || styleVariant === 'vertical-compact';
+
+    // Roving tabindex: only the active tab is in the tab order. If nothing is
+    // active yet, the first registered tab stays focusable so the tablist is
+    // reachable with Tab.
+    const isFocusable = isActive || (isNotDefined(activeTab) && tabs[0] === name);
+
+    const handleKeyDown = React.useCallback(
+        (event: React.KeyboardEvent<HTMLButtonElement>) => {
+            const currentIndex = tabs.indexOf(name);
+            if (currentIndex === -1) {
+                return;
+            }
+            const lastIndex = tabs.length - 1;
+            const forwardKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+            const backwardKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+
+            let nextIndex: number | undefined;
+            if (event.key === forwardKey) {
+                nextIndex = currentIndex === lastIndex ? 0 : currentIndex + 1;
+            } else if (event.key === backwardKey) {
+                nextIndex = currentIndex === 0 ? lastIndex : currentIndex - 1;
+            } else if (event.key === 'Home') {
+                nextIndex = 0;
+            } else if (event.key === 'End') {
+                nextIndex = lastIndex;
+            } else {
+                return;
+            }
+
+            event.preventDefault();
+            const nextTab = tabs[nextIndex];
+            setActiveTab(nextTab);
+            // Automatic activation: move focus to the newly-activated tab.
+            document.getElementById(getTabNodeId(idBase, nextTab))?.focus();
+        },
+        [tabs, name, isVertical, setActiveTab, idBase],
+    );
+
     return (
         <RawButton
+            id={tabId}
             className={styles.tab}
-            onClick={context.setActiveTab}
+            onClick={setActiveTab}
             name={name}
             disabled={disabled}
             type="button"
+            role="tab"
+            aria-selected={isActive}
+            aria-controls={isActive ? panelId : undefined}
+            tabIndex={isFocusable ? 0 : -1}
+            onKeyDown={handleKeyDown}
         >
             <TabLayout
                 // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/packages/ui/src/components/Tabs/TabPanel/index.tsx b/packages/ui/src/components/Tabs/TabPanel/index.tsx
index c6715ec87a..5babc3c7e2 100644
--- a/packages/ui/src/components/Tabs/TabPanel/index.tsx
+++ b/packages/ui/src/components/Tabs/TabPanel/index.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { _cs } from '@togglecorp/fujs';
 
-import TabContext, { type TabKey } from '#contexts/tab';
+import TabContext, {
+    getTabNodeId,
+    getTabPanelNodeId,
+    type TabKey,
+} from '#contexts/tab';
 
 import styles from './styles.module.css';
 
@@ -32,12 +36,15 @@ export default function TabPanel(props: Props) {
         <div
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...otherProps}
+            id={getTabPanelNodeId(context.idBase, name)}
             className={_cs(
                 styles.tabPanel,
                 withContentsOnly && styles.withContentsOnly,
                 className,
             )}
             role="tabpanel"
+            aria-labelledby={getTabNodeId(context.idBase, name)}
+            tabIndex={0}
             ref={elementRef}
         />
     );
diff --git a/packages/ui/src/components/Tabs/index.test.tsx b/packages/ui/src/components/Tabs/index.test.tsx
new file mode 100644
index 0000000000..373abfa991
--- /dev/null
+++ b/packages/ui/src/components/Tabs/index.test.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+
+import Tabs from './index';
+import Tab from './Tab';
+import TabList from './TabList';
+import TabPanel from './TabPanel';
+
+function ControlledTabs() {
+    const [value, setValue] = useState<'a' | 'b' | 'c'>('a');
+    return (
+        <Tabs value={value} onChange={setValue}>
+            <TabList>
+                <Tab name="a">Tab A</Tab>
+                <Tab name="b">Tab B</Tab>
+                <Tab name="c">Tab C</Tab>
+            </TabList>
+            <TabPanel name="a">Panel A</TabPanel>
+            <TabPanel name="b">Panel B</TabPanel>
+            <TabPanel name="c">Panel C</TabPanel>
+        </Tabs>
+    );
+}
+
+describe('Tabs APG keyboard model', () => {
+    it('wires roles, roving tabindex, and tab<->panel ids', () => {
+        const { getAllByRole, getByRole } = render(<ControlledTabs />);
+        const tabs = getAllByRole('tab');
+
+        expect(tabs).toHaveLength(3);
+        // roving tabindex: only the active tab is in the tab order
+        expect(tabs[0]).toHaveAttribute('tabindex', '0');
+        expect(tabs[1]).toHaveAttribute('tabindex', '-1');
+        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+
+        // active tab controls the panel; panel is labelled by the tab
+        const panel = getByRole('tabpanel');
+        expect(tabs[0].getAttribute('aria-controls')).toBe(panel.id);
+        expect(panel.getAttribute('aria-labelledby')).toBe(tabs[0].id);
+    });
+
+    it('moves selection with ArrowRight (automatic activation)', async () => {
+        const { getAllByRole, getByRole } = render(<ControlledTabs />);
+        getAllByRole('tab')[0].focus();
+
+        await userEvent.keyboard('{ArrowRight}');
+
+        expect(getAllByRole('tab')[1]).toHaveAttribute('aria-selected', 'true');
+        expect(getByRole('tabpanel')).toHaveTextContent('Panel B');
+    });
+});
diff --git a/packages/ui/src/components/Tabs/index.tsx b/packages/ui/src/components/Tabs/index.tsx
index 0cfdf55ac3..f7ad9daa71 100644
--- a/packages/ui/src/components/Tabs/index.tsx
+++ b/packages/ui/src/components/Tabs/index.tsx
@@ -1,5 +1,6 @@
 import {
     useCallback,
+    useId,
     useMemo,
     useState,
 } from 'react';
@@ -32,6 +33,7 @@ function Tabs<const VALUE extends TabKey>(props: Props<VALUE>) {
 
     const [tabs, setTabs] = useState<TabKey[]>([]);
     const [step, setStep] = useState(0);
+    const idBase = useId();
 
     const registerTab = useCallback((name: TabKey) => {
         setTabs((prevTabs) => {
@@ -68,6 +70,7 @@ function Tabs<const VALUE extends TabKey>(props: Props<VALUE>) {
         unregisterTab,
         step,
         setStep,
+        idBase,
     }), [
         tabs,
         value,
@@ -79,6 +82,7 @@ function Tabs<const VALUE extends TabKey>(props: Props<VALUE>) {
         unregisterTab,
         step,
         setStep,
+        idBase,
     ]);
 
     return (
diff --git a/packages/ui/src/components/Tag/index.tsx b/packages/ui/src/components/Tag/index.tsx
new file mode 100644
index 0000000000..0d7c9b36b9
--- /dev/null
+++ b/packages/ui/src/components/Tag/index.tsx
@@ -0,0 +1,43 @@
+import ChipLayout, { type ChipColorVariant } from '#components/ChipLayout';
+
+export interface Props {
+    className?: string;
+    /** The visible label */
+    label: React.ReactNode;
+    /** Optional leading icon */
+    icon?: React.ReactNode;
+    /** Color axis, forwarded to the underlying ChipLayout */
+    colorVariant?: ChipColorVariant;
+    /** Render as a list item when used inside a `<ul>`/`<ol>` */
+    as?: 'span' | 'div' | 'li';
+}
+
+/**
+ * Static label pill (specific layer, display).
+ *
+ * Composes `ChipLayout` with the 'tag' style to render a non-interactive,
+ * inline label — no remove action, no behaviour. Pass `as="li"` to use it
+ * safely as a list item.
+ */
+function Tag(props: Props) {
+    const {
+        className,
+        label,
+        icon,
+        colorVariant = 'tertiary',
+        as = 'span',
+    } = props;
+
+    return (
+        <ChipLayout
+            className={className}
+            styleVariant="tag"
+            colorVariant={colorVariant}
+            leading={icon}
+            label={label}
+            as={as}
+        />
+    );
+}
+
+export default Tag;
diff --git a/packages/ui/src/components/TextArea/index.tsx b/packages/ui/src/components/TextArea/index.tsx
index 7ba199c4c3..c88cd54795 100644
--- a/packages/ui/src/components/TextArea/index.tsx
+++ b/packages/ui/src/components/TextArea/index.tsx
@@ -1,13 +1,18 @@
-import React, { useMemo } from 'react';
-import { isNotDefined } from '@togglecorp/fujs';
-
+import React, {
+    useId,
+    useMemo,
+} from 'react';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import CharacterCount from '#components/CharacterCount';
+import InputContainer, { Props as InputContainerProps } from '#components/InputContainer';
+import RawTextArea, { Props as RawTextAreaProps } from '#components/RawTextArea';
 import { getHighlightMode } from '#utils/common';
 import { extractInputContainerProps } from '#utils/inputs';
 
-import InputContainer, { Props as InputContainerProps } from '../InputContainer';
-import RawTextArea, { Props as RawTextAreaProps } from '../RawTextArea';
-import TextBadge from '../TextBadge';
-
 const BULLET = '•';
 const KEY_ENTER = 'Enter';
 
@@ -15,17 +20,23 @@ type InheritedProps<NAME> = Omit<InputContainerProps, 'input'>
 & Omit<RawTextAreaProps<NAME>, 'type' | 'className' | 'elementRef'>;
 
 export interface Props<NAME> extends InheritedProps<NAME> {
-    inputElementRef?: React.RefObject<HTMLInputElement | null>;
+    /** Ref to the inner <textarea> node (elementRef refers to the root) */
+    inputElementRef?: React.RefObject<HTMLTextAreaElement | null>;
     autoBullets?: boolean;
     inputClassName?: string;
     withDiffView?: boolean;
     prevValue?: RawTextAreaProps<NAME>['value'];
 }
 
+/**
+ * Multi-line text input composed of InputContainer and RawTextArea,
+ * with optional auto-bullets and a character counter (specific layer).
+ */
 function TextArea<const N>(props: Props<N>) {
     const {
         disabled,
         inputClassName,
+        inputElementRef,
         readOnly,
         required,
         onChange,
@@ -45,6 +56,14 @@ function TextArea<const N>(props: Props<N>) {
         otherProps,
     );
 
+    const generatedId = useId();
+    const inputId = generatedId;
+    const hasError = isDefined(inputContainerProps.error);
+    const hasHint = isDefined(inputContainerProps.hint);
+    const errorId = hasError ? `${generatedId}-error` : undefined;
+    const hintId = hasHint ? `${generatedId}-hint` : undefined;
+    const describedBy = [hintId, errorId].filter(isDefined).join(' ') || undefined;
+
     const highlightMode = useMemo(
         () => getHighlightMode(value, prevValue, withDiffView),
         [value, prevValue, withDiffView],
@@ -74,6 +93,9 @@ function TextArea<const N>(props: Props<N>) {
         <InputContainer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...inputContainerProps}
+            inputId={inputId}
+            hintId={hintId}
+            errorId={errorId}
             disabled={disabled}
             readOnly={readOnly}
             required={required}
@@ -84,6 +106,11 @@ function TextArea<const N>(props: Props<N>) {
                     <RawTextArea
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...rawInputProps}
+                        id={inputId}
+                        aria-invalid={hasError}
+                        aria-required={required}
+                        aria-describedby={describedBy}
+                        elementRef={inputElementRef}
                         value={value}
                         className={inputClassName}
                         disabled={disabled}
@@ -96,7 +123,7 @@ function TextArea<const N>(props: Props<N>) {
                         maxLength={maxLength}
                         rows={rows}
                     />
-                    <TextBadge
+                    <CharacterCount
                         length={value?.length}
                         maxLength={maxLength}
                     />
diff --git a/packages/ui/src/components/TextInput/index.test.tsx b/packages/ui/src/components/TextInput/index.test.tsx
new file mode 100644
index 0000000000..813b1134b3
--- /dev/null
+++ b/packages/ui/src/components/TextInput/index.test.tsx
@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+
+import TextInput from './index';
+
+describe('TextInput accessibility wiring (via InputContainer)', () => {
+    it('associates label, error and required state with the control', () => {
+        const { getByRole, container } = render(
+            <TextInput
+                name="email"
+                label="Email address"
+                value=""
+                onChange={() => undefined}
+                error="Email is required"
+                required
+            />,
+        );
+
+        const input = getByRole('textbox');
+        const errorNode = getByRole('alert');
+        const label = container.querySelector<HTMLLabelElement>(`label[for="${input.id}"]`);
+
+        // a real <label htmlFor> pointing at the control
+        expect(label).not.toBeNull();
+        expect(label).toHaveTextContent('Email address');
+
+        // control carries invalid + required + describedby(error)
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(input).toHaveAttribute('aria-required', 'true');
+        expect(errorNode).toHaveTextContent('Email is required');
+        expect(input.getAttribute('aria-describedby') ?? '').toContain(errorNode.id);
+    });
+});
diff --git a/packages/ui/src/components/TextInput/index.tsx b/packages/ui/src/components/TextInput/index.tsx
index 82a56c6060..025db0bd98 100644
--- a/packages/ui/src/components/TextInput/index.tsx
+++ b/packages/ui/src/components/TextInput/index.tsx
@@ -1,4 +1,8 @@
-import { useMemo } from 'react';
+import {
+    useId,
+    useMemo,
+} from 'react';
+import { isDefined } from '@togglecorp/fujs';
 
 import InputContainer, { Props as InputContainerProps } from '#components/InputContainer';
 import RawInput, { Props as RawInputProps } from '#components/RawInput';
@@ -9,6 +13,7 @@ type InheritedProps<NAME> = Omit<InputContainerProps, 'input' | 'highlightMode'>
 & Omit<RawInputProps<NAME>, 'type' | 'className' | 'elementRef'>;
 
 export interface Props<NAME> extends InheritedProps<NAME> {
+    /** Ref to the inner <input> node (elementRef refers to the root) */
     inputElementRef?: React.RefObject<HTMLInputElement | null>;
     inputClassName?: string;
     type?: 'text' | 'password';
@@ -16,10 +21,15 @@ export interface Props<NAME> extends InheritedProps<NAME> {
     prevValue?: RawInputProps<NAME>['value'];
 }
 
+/**
+ * Single-line text input composed of InputContainer and RawInput
+ * (specific layer).
+ */
 function TextInput<const NAME>(props: Props<NAME>) {
     const {
         disabled,
         inputClassName,
+        inputElementRef,
         readOnly,
         required,
         type = 'text',
@@ -33,6 +43,14 @@ function TextInput<const NAME>(props: Props<NAME>) {
         otherProps,
     );
 
+    const generatedId = useId();
+    const inputId = generatedId;
+    const hasError = isDefined(inputContainerProps.error);
+    const hasHint = isDefined(inputContainerProps.hint);
+    const errorId = hasError ? `${generatedId}-error` : undefined;
+    const hintId = hasHint ? `${generatedId}-hint` : undefined;
+    const describedBy = [hintId, errorId].filter(isDefined).join(' ') || undefined;
+
     const highlightMode = useMemo(
         () => getHighlightMode(value, prevValue, withDiffView),
         [value, prevValue, withDiffView],
@@ -42,6 +60,9 @@ function TextInput<const NAME>(props: Props<NAME>) {
         <InputContainer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...inputContainerProps}
+            inputId={inputId}
+            hintId={hintId}
+            errorId={errorId}
             disabled={disabled}
             readOnly={readOnly}
             required={required}
@@ -51,6 +72,11 @@ function TextInput<const NAME>(props: Props<NAME>) {
                 <RawInput
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...rawInputProps}
+                    id={inputId}
+                    aria-invalid={hasError}
+                    aria-required={required}
+                    aria-describedby={describedBy}
+                    elementRef={inputElementRef}
                     value={value}
                     className={inputClassName}
                     disabled={disabled}
diff --git a/packages/ui/src/components/TextOutput/index.tsx b/packages/ui/src/components/TextOutput/index.tsx
deleted file mode 100644
index d6aeee5114..0000000000
--- a/packages/ui/src/components/TextOutput/index.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { _cs } from '@togglecorp/fujs';
-
-import BooleanOutput, { Props as BooleanOutputProps } from '#components/BooleanOutput';
-import DateOutput, { Props as DateOutputProps } from '#components/DateOutput';
-import NumberOutput, { Props as NumberOutputProps } from '#components/NumberOutput';
-import useSpacingToken from '#hooks/useSpacingToken';
-import { DEFAULT_INVALID_TEXT } from '#utils/constants';
-import {
-    fullSpacings,
-    gapSpacings,
-    SpacingType,
-} from '#utils/style';
-
-import styles from './styles.module.css';
-
-interface BaseProps {
-    className?: string;
-    icon?: React.ReactNode;
-    label?: React.ReactNode;
-    description?: React.ReactNode;
-    labelClassName?: string;
-    descriptionClassName?: string;
-    valueClassName?: string;
-    strongValue?: boolean;
-    strongLabel?: boolean;
-    strongDescription?: boolean;
-    withoutLabelColon?: boolean;
-    invalidText?: React.ReactNode;
-    withBackground?: boolean;
-    withLightBackground?: boolean;
-    textSize?: 'sm' | 'md' | 'lg';
-    withBlockLayout?: boolean;
-    spacing?: SpacingType;
-    withUppercaseLetters?: boolean;
-    withLightText?: boolean;
-}
-
-interface BooleanProps extends BooleanOutputProps {
-    valueType: 'boolean',
-}
-
-interface NumberProps extends NumberOutputProps {
-    valueType: 'number',
-}
-
-interface DateProps extends DateOutputProps {
-    valueType: 'date',
-}
-
-interface TextProps {
-    valueType: 'text',
-    value: string | null | undefined;
-}
-
-interface NodeProps {
-    valueType?: never;
-    value?: React.ReactNode;
-}
-
-export type Props = BaseProps & (
-    NodeProps | TextProps | DateProps | NumberProps | BooleanProps
-);
-
-function TextOutput(props: Props) {
-    const {
-        className,
-        label,
-        icon,
-        description,
-        labelClassName,
-        descriptionClassName,
-        valueClassName,
-        strongLabel,
-        strongValue,
-        strongDescription,
-        withoutLabelColon,
-        withBackground,
-        withLightBackground,
-        invalidText = DEFAULT_INVALID_TEXT,
-        textSize,
-        withBlockLayout,
-        spacing,
-        withUppercaseLetters,
-        withLightText,
-        ...otherProps
-    } = props;
-
-    const spacingClassName = useSpacingToken({
-        spacing,
-        offset: -2,
-        modes: (withBackground || withLightBackground)
-            ? fullSpacings
-            : gapSpacings,
-    });
-
-    const { value: propValue } = props;
-    let valueComponent: React.ReactNode = invalidText;
-
-    if (otherProps.valueType === 'number') {
-        valueComponent = (
-            <NumberOutput
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...otherProps}
-                invalidText={invalidText}
-            />
-        );
-    } else if (otherProps.valueType === 'date') {
-        valueComponent = (
-            <DateOutput
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...otherProps}
-                invalidText={invalidText}
-            />
-        );
-    } else if (otherProps.valueType === 'boolean') {
-        valueComponent = (
-            <BooleanOutput
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...otherProps}
-                invalidText={invalidText}
-            />
-        );
-    } else if (!(propValue instanceof Date)) {
-        valueComponent = propValue || invalidText;
-    }
-
-    return (
-        <div
-            className={_cs(
-                styles.textOutput,
-                withBackground && styles.withBackground,
-                withLightBackground && styles.withLightBackground,
-                textSize === 'sm' && styles.textSizeSmall,
-                textSize === 'md' && styles.textSizeMedium,
-                textSize === 'lg' && styles.textSizeLarge,
-                withBlockLayout && styles.withBlockLayout,
-                withUppercaseLetters && styles.withUppercaseLetters,
-                withLightText && styles.withLightText,
-                spacingClassName,
-                className,
-            )}
-        >
-            {icon}
-            {label && (
-                <div
-                    className={_cs(
-                        styles.label,
-                        strongLabel && styles.strong,
-                        labelClassName,
-                        !withoutLabelColon && styles.withColon,
-                    )}
-                >
-                    {label}
-                </div>
-            )}
-            <div
-                className={_cs(
-                    styles.value,
-                    strongValue && styles.strong,
-                    otherProps.valueType === 'text' && styles.textType,
-                    valueClassName,
-                )}
-            >
-                {valueComponent}
-            </div>
-            {description && (
-                <div
-                    className={_cs(
-                        styles.description,
-                        strongDescription && styles.strong,
-                        descriptionClassName,
-                    )}
-                >
-                    {description}
-                </div>
-            )}
-        </div>
-    );
-}
-
-export default TextOutput;
diff --git a/packages/ui/src/components/Tooltip/index.tsx b/packages/ui/src/components/Tooltip/index.tsx
index 9417efd78d..321d231bd2 100644
--- a/packages/ui/src/components/Tooltip/index.tsx
+++ b/packages/ui/src/components/Tooltip/index.tsx
@@ -5,12 +5,14 @@ import {
 } from 'react';
 import {
     _cs,
+    isDefined,
     isNotDefined,
 } from '@togglecorp/fujs';
 
 import Container from '#components/Container';
 import ListView from '#components/ListView';
-import Popup from '#components/Popup';
+import Portal from '#components/Portal';
+import useFloatPlacement from '#hooks/useFloatPlacement';
 
 import styles from './styles.module.css';
 
@@ -21,6 +23,17 @@ export interface Props {
     preferredWidth?: number;
 }
 
+/**
+ * Hover-triggered tooltip attached to its parent element (specific layer).
+ *
+ * Deliberately simpler than `Popover`: it renders a Portal positioned with
+ * `useFloatPlacement` (JS) rather than the native Popover API. That keeps the
+ * surface in the HTML namespace and uses `getBoundingClientRect`, so a Tooltip
+ * placed inside an `<svg>` (e.g. a chart point) works — where the native
+ * Popover API (HTMLElement-only) and CSS anchor positioning do not.
+ */
+// FIXME(a11y-tier2): tooltip is hover-only; add keyboard/focus trigger and
+// `aria-describedby` wiring from the parent control to the tooltip content.
 function Tooltip(props: Props) {
     const {
         className,
@@ -30,7 +43,7 @@ function Tooltip(props: Props) {
     } = props;
 
     const [hasParentRef, setHasParentRef] = useState(false);
-    const [showPopup, setShowPopup] = useState(false);
+    const [showTooltip, setShowTooltip] = useState(false);
 
     const parentRef = useRef<HTMLElement | null>(null);
     const dummyRef = useRef<HTMLDivElement>(null);
@@ -38,11 +51,11 @@ function Tooltip(props: Props) {
     useEffect(
         () => {
             const handleMouseEnter = () => {
-                setShowPopup(true);
+                setShowTooltip(true);
             };
 
             const handleMouseOut = () => {
-                setShowPopup(false);
+                setShowTooltip(false);
             };
 
             if (isNotDefined(dummyRef.current)) {
@@ -74,6 +87,11 @@ function Tooltip(props: Props) {
         [],
     );
 
+    const {
+        style,
+        orientation,
+    } = useFloatPlacement(parentRef);
+
     return (
         <>
             {!hasParentRef && (
@@ -82,26 +100,34 @@ function Tooltip(props: Props) {
                     ref={dummyRef}
                 />
             )}
-            {showPopup && (
-                <Popup
-                    className={_cs(styles.tooltipContent, className)}
-                    parentRef={parentRef as React.RefObject<HTMLElement | null>}
-                    pointerClassName={styles.pointer}
-                    preferredWidth={preferredWidth}
-                >
-                    <Container
-                        heading={title}
-                        withPadding
+            {showTooltip && (
+                <Portal>
+                    <div
+                        style={{
+                            ...style,
+                            width: isDefined(preferredWidth) ? `${preferredWidth}rem` : undefined,
+                        }}
+                        className={_cs(
+                            styles.tooltipContent,
+                            orientation === 'bottom' && styles.topOrientation,
+                            className,
+                        )}
                     >
-                        <ListView
-                            layout="block"
-                            withSpacingOpticalCorrection
-                            spacing="sm"
+                        <Container
+                            role="tooltip"
+                            heading={title}
+                            withPadding
                         >
-                            {description}
-                        </ListView>
-                    </Container>
-                </Popup>
+                            <ListView
+                                layout="block"
+                                withSpacingOpticalCorrection
+                                spacing="sm"
+                            >
+                                {description}
+                            </ListView>
+                        </Container>
+                    </div>
+                </Portal>
             )}
         </>
     );
diff --git a/packages/ui/src/components/Tooltip/styles.module.css b/packages/ui/src/components/Tooltip/styles.module.css
index 4416a86261..8ea5f02bf9 100644
--- a/packages/ui/src/components/Tooltip/styles.module.css
+++ b/packages/ui/src/components/Tooltip/styles.module.css
@@ -5,18 +5,17 @@
 }
 
 .tooltip-content {
+    position: fixed;
     opacity: 0;
-    padding: 0;
+    border-radius: var(--go-ui-border-radius-xl);
+    box-shadow: var(--go-ui-box-shadow-2xl);
+    background-color: var(--go-ui-color-white);
+    max-height: 50vh;
+    overflow: auto;
     animation: slide-down var(--go-ui-duration-transition-medium) ease-in forwards;
     animation-delay: var(--go-ui-duration-transition-fast);
 }
 
-.pointer {
-    opacity: 0;
-    animation: fade-in var(--go-ui-duration-transition-medium) ease-in forwards;
-    animation-delay: var(--go-ui-duration-transition-medium);
-}
-
 @keyframes slide-down {
     from {
         transform: translateY(-5pt);
@@ -27,12 +26,3 @@
         opacity: 1;
     }
 }
-
-@keyframes fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
diff --git a/packages/ui/src/components/TopBanner/index.tsx b/packages/ui/src/components/TopBanner/index.tsx
index df9b18a656..7510417565 100644
--- a/packages/ui/src/components/TopBanner/index.tsx
+++ b/packages/ui/src/components/TopBanner/index.tsx
@@ -3,12 +3,18 @@ import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.module.css';
 
-interface Props {
-  className?: string;
-  children?: React.ReactNode;
-  variant: 'warning' | 'negative' | 'positive' | 'information';
+export interface Props {
+    className?: string;
+    children?: React.ReactNode;
+    /** Semantic status of the banner */
+    variant?: 'brand' | 'warning' | 'negative' | 'positive' | 'information';
 }
 
+/**
+ * TopBanner is a full-width announcement strip shown at the top of a
+ * page (e.g. maintenance or degraded-service notices).
+ * Specific layer: exposes a single semantic `variant` prop.
+ */
 function TopBanner(props: Props) {
     const {
         className,
@@ -17,14 +23,18 @@ function TopBanner(props: Props) {
     } = props;
 
     return (
-        <div className={_cs(
-            styles.topBanner,
-            variant === 'negative' && styles.negative,
-            variant === 'warning' && styles.warning,
-            variant === 'positive' && styles.positive,
-            variant === 'information' && styles.information,
-            className,
-        )}
+        <div
+            // NOTE: page-level announcement -> polite live region
+            role="status"
+            className={_cs(
+                styles.topBanner,
+                variant === 'brand' && styles.brand,
+                variant === 'negative' && styles.negative,
+                variant === 'warning' && styles.warning,
+                variant === 'positive' && styles.positive,
+                variant === 'information' && styles.information,
+                className,
+            )}
         >
             {children}
         </div>
diff --git a/packages/ui/src/components/TopBanner/styles.module.css b/packages/ui/src/components/TopBanner/styles.module.css
index b0c8fb91a6..2463cdaf94 100644
--- a/packages/ui/src/components/TopBanner/styles.module.css
+++ b/packages/ui/src/components/TopBanner/styles.module.css
@@ -1,10 +1,17 @@
 .top-banner {
-    --variant-color: var(--go-ui-color-background);
-    background-color: color-mix(in srgb, var(--variant-color) 10%, transparent);
+    --variant-color: var(--go-ui-color-information);
+    background-color: color-mix(in srgb, var(--variant-color) 16%, var(--go-ui-color-foreground));
     padding: var(--go-ui-spacing-md);
     text-align: center;
     font-weight: var(--go-ui-font-weight-medium);
 
+    /* Solid full-bleed announcement strip (design's primary TopBanner). */
+    &.brand {
+        --variant-color: var(--go-ui-color-primary-red);
+        background-color: var(--variant-color);
+        color: var(--go-ui-color-text-on-dark);
+    }
+
     &.negative {
         --variant-color: var(--go-ui-color-negative);
     }
diff --git a/packages/ui/src/components/TruncatedList/i18n.json b/packages/ui/src/components/TruncatedList/i18n.json
new file mode 100644
index 0000000000..0fdbc41014
--- /dev/null
+++ b/packages/ui/src/components/TruncatedList/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "common",
+    "strings": {
+        "truncatedListShowMoreLabel": "... and {n} more",
+        "truncatedListShowMoreAriaLabel": "Show {n} more",
+        "truncatedListShowLessAriaLabel": "Show less"
+    }
+}
diff --git a/packages/ui/src/components/TruncatedList/index.tsx b/packages/ui/src/components/TruncatedList/index.tsx
new file mode 100644
index 0000000000..6df80e20fc
--- /dev/null
+++ b/packages/ui/src/components/TruncatedList/index.tsx
@@ -0,0 +1,162 @@
+import {
+    Fragment,
+    useId,
+} from 'react';
+import {
+    _cs,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import RawButton from '#components/RawButton';
+import useBooleanState from '#hooks/useBooleanState';
+import useTranslation from '#hooks/useTranslation';
+import { resolveToString } from '#utils/translation';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+function joinList<LIST_ITEM, RENDERER_PROPS>(
+    list: LIST_ITEM[],
+    keySelector: (item: LIST_ITEM, i: number) => string | number,
+    renderer: React.ComponentType<RENDERER_PROPS>,
+    rendererParams: (item: LIST_ITEM, i: number) => RENDERER_PROPS,
+    separator: React.ReactNode,
+    leadingSeparator = false,
+) {
+    return list.reduce<React.ReactNode[]>(
+        (acc, child, index) => {
+            const itemKey = keySelector(child, index);
+
+            if (leadingSeparator || index !== 0) {
+                acc.push(
+                    <Fragment key={`separator-${itemKey}`}>
+                        {separator}
+                    </Fragment>,
+                );
+            }
+
+            const Component = renderer;
+            acc.push(
+                <Component
+                    key={itemKey}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...rendererParams(child, index)}
+                />,
+            );
+
+            return acc;
+        },
+        [],
+    );
+}
+
+export interface Props<LIST_ITEM, RENDERER_PROPS> {
+    list?: LIST_ITEM[];
+    keySelector: (item: LIST_ITEM, i: number) => string | number;
+    renderer: React.ComponentType<RENDERER_PROPS>
+    rendererParams: (item: LIST_ITEM, i: number) => RENDERER_PROPS;
+    title?: React.ReactNode;
+    separator?: React.ReactNode;
+    maxItems?: number;
+    minItems?: number;
+    className?: string;
+}
+
+/**
+ * TruncatedList renders a list inline, collapsing everything past `minItems`
+ * behind a "+N more" disclosure once the list is longer than `maxItems`.
+ * Specific layer: the full list is always mounted in the DOM (the remainder is
+ * collapsed via CSS, not unmounted) and the reveal is a real `<button>` with
+ * `aria-expanded`/`aria-controls`, so it is keyboard- and screen-reader-friendly.
+ */
+function TruncatedList<LIST_ITEM, RENDERER_PROPS>(props: Props<LIST_ITEM, RENDERER_PROPS>) {
+    const {
+        list,
+        title,
+        renderer,
+        rendererParams,
+        keySelector,
+        separator = ', ',
+        maxItems = 4,
+        minItems = 2,
+        className,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const remainderId = useId();
+    const [
+        expanded,
+        { toggle: toggleExpanded },
+    ] = useBooleanState(false);
+
+    if (isNotDefined(list) || list.length === 0) {
+        return null;
+    }
+
+    if (list.length <= maxItems) {
+        return (
+            <div className={_cs(styles.truncatedList, className)}>
+                {joinList(list, keySelector, renderer, rendererParams, separator)}
+            </div>
+        );
+    }
+
+    const inlineList = list.slice(0, minItems);
+    const remainderList = list.slice(minItems);
+
+    const remainderCount = remainderList.length;
+    const showMoreLabel = resolveToString(
+        strings.truncatedListShowMoreLabel,
+        { n: remainderCount },
+    );
+    const toggleAriaLabel = expanded
+        ? strings.truncatedListShowLessAriaLabel
+        : resolveToString(
+            strings.truncatedListShowMoreAriaLabel,
+            { n: remainderCount },
+        );
+
+    return (
+        <div className={_cs(styles.truncatedList, className)}>
+            {joinList(inlineList, keySelector, renderer, rendererParams, separator)}
+            <RawButton
+                name={undefined}
+                className={styles.toggleButton}
+                onClick={toggleExpanded}
+                aria-expanded={expanded}
+                aria-controls={remainderId}
+                aria-label={toggleAriaLabel}
+            >
+                {showMoreLabel}
+            </RawButton>
+            {/* NOTE: the remainder is always mounted; it is collapsed via CSS
+              * (not unmounted) so assistive tech can reach it and the reveal
+              * stays a pure disclosure rather than a mount-on-open popover. */}
+            <div
+                id={remainderId}
+                className={_cs(
+                    styles.remainder,
+                    expanded && styles.expanded,
+                )}
+            >
+                {isNotDefined(title) ? null : (
+                    <div className={styles.title}>
+                        {title}
+                    </div>
+                )}
+                <div className={styles.remainderList}>
+                    {joinList(
+                        remainderList,
+                        keySelector,
+                        renderer,
+                        rendererParams,
+                        separator,
+                        true,
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default TruncatedList;
diff --git a/packages/ui/src/components/TruncatedList/styles.module.css b/packages/ui/src/components/TruncatedList/styles.module.css
new file mode 100644
index 0000000000..84fa070f0e
--- /dev/null
+++ b/packages/ui/src/components/TruncatedList/styles.module.css
@@ -0,0 +1,33 @@
+.truncated-list {
+    display: inline-block;
+    position: relative;
+
+    .toggle-button {
+        text-decoration: underline;
+        color: var(--go-ui-color-blue-90);
+        font-weight: var(--go-ui-font-weight-medium);
+
+        &:hover,
+        &:focus {
+            opacity: 1;
+            color: var(--go-ui-color-primary-red);
+        }
+    }
+
+    .remainder {
+        display: none;
+
+        &.expanded {
+            display: block;
+            position: absolute;
+            border-radius: var(--go-ui-border-radius-md);
+            box-shadow: var(--go-ui-box-shadow-md);
+            background-color: var(--go-ui-color-white);
+            padding: var(--go-ui-spacing-sm);
+
+            .title {
+                font-weight: var(--go-ui-font-weight-bold);
+            }
+        }
+    }
+}
diff --git a/packages/ui/src/components/printable/DataDisplay/index.tsx b/packages/ui/src/components/printable/DataDisplay/index.tsx
new file mode 100644
index 0000000000..cbdf9e6c89
--- /dev/null
+++ b/packages/ui/src/components/printable/DataDisplay/index.tsx
@@ -0,0 +1,113 @@
+import { _cs } from '@togglecorp/fujs';
+
+import RawDisplay, { Props as RawDisplayProps } from '#components/RawDisplay';
+import {
+    DEFAULT_INVALID_TEXT,
+    DEFAULT_PRINT_DATE_FORMAT,
+} from '#utils/constants';
+import {
+    BackgroundColorType,
+    getBackgroundColorClassName,
+} from '#utils/style';
+
+import styles from './styles.module.css';
+
+interface BaseProps {
+    className?: string;
+    label?: React.ReactNode;
+    labelClassName?: string;
+    valueClassName?: string;
+    strongValue?: boolean;
+    strongLabel?: boolean;
+    /** Suppresses the ':' appended after the label by default */
+    withoutLabelColon?: boolean;
+    /** Layout variant: inline row, stacked block or display-contents cells */
+    styleVariant?: 'block' | 'default' | 'contents';
+    withPadding?: boolean;
+    /** Surface color token (the old withBackground boolean meant 'background') */
+    backgroundColor?: BackgroundColorType;
+}
+
+export type Props = BaseProps & RawDisplayProps;
+
+/**
+ * Labelled value pair for print layouts (specific, printable layer).
+ *
+ * Print counterpart of DataDisplay: value rendering is delegated to
+ * RawDisplay, so the `valueType` discriminated union and per-type props
+ * come from RawDisplayProps. Dates are always formatted with the print
+ * date format.
+ */
+function DataDisplay(props: Props) {
+    const {
+        className,
+        label,
+        labelClassName,
+        valueClassName,
+        strongLabel,
+        strongValue,
+        withoutLabelColon,
+        invalidText = DEFAULT_INVALID_TEXT,
+        styleVariant = 'default',
+        withPadding,
+        backgroundColor,
+        ...rawDisplayProps
+    } = props;
+
+    let valueComponent: React.ReactNode;
+    if (rawDisplayProps.valueType === 'date') {
+        valueComponent = (
+            <RawDisplay
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...rawDisplayProps}
+                invalidText={invalidText}
+                format={DEFAULT_PRINT_DATE_FORMAT}
+            />
+        );
+    } else {
+        valueComponent = (
+            <RawDisplay
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...rawDisplayProps}
+                invalidText={invalidText}
+            />
+        );
+    }
+
+    return (
+        <div
+            className={_cs(
+                styles.dataDisplay,
+                styleVariant === 'default' && styles.defaultVariant,
+                styleVariant === 'contents' && styles.contentsVariant,
+                styleVariant === 'block' && styles.blockVariant,
+                withPadding && styles.withPadding,
+                getBackgroundColorClassName(backgroundColor),
+                className,
+            )}
+        >
+            <div
+                className={_cs(
+                    styles.label,
+                    strongLabel && styles.strong,
+                    labelClassName,
+                    !withoutLabelColon && styles.withColon,
+                )}
+            >
+                {label}
+            </div>
+            <div
+                className={_cs(
+                    styles.value,
+                    strongValue && styles.strong,
+                    rawDisplayProps.valueType === 'text' && styles.textType,
+                    valueClassName,
+                )}
+            >
+                {valueComponent}
+            </div>
+        </div>
+    );
+}
+
+export default DataDisplay;
diff --git a/packages/ui/src/components/printable/TextOutput/styles.module.css b/packages/ui/src/components/printable/DataDisplay/styles.module.css
similarity index 88%
rename from packages/ui/src/components/printable/TextOutput/styles.module.css
rename to packages/ui/src/components/printable/DataDisplay/styles.module.css
index 0367a14b47..a1fa7ed026 100644
--- a/packages/ui/src/components/printable/TextOutput/styles.module.css
+++ b/packages/ui/src/components/printable/DataDisplay/styles.module.css
@@ -1,14 +1,10 @@
-.text-output {
+.data-display {
     break-inside: avoid;
 
     &.with-padding {
         padding: var(--go-ui-spacing-sm);
     }
 
-    &.with-background {
-        background-color: var(--go-ui-color-background);
-    }
-
     &.block-variant {
         display: flex;
         flex-direction: column;
@@ -49,4 +45,3 @@
         font-weight: var(--go-ui-font-weight-semibold);
     }
 }
-
diff --git a/packages/ui/src/components/printable/Heading/styles.module.css b/packages/ui/src/components/printable/Heading/styles.module.css
index 718fde38b3..e05dc13bb8 100644
--- a/packages/ui/src/components/printable/Heading/styles.module.css
+++ b/packages/ui/src/components/printable/Heading/styles.module.css
@@ -1,7 +1,7 @@
 .heading {
     --font-size: var(--go-ui-font-size-xl);
 
-    font-family: Montserrat, sans-serif;
+    font-family: var(--go-ui-font-family-sans-serif);
     font-size: var(--font-size);
     font-weight: var(--go-ui-font-weight-bold);
     break-after: avoid;
diff --git a/packages/ui/src/components/printable/TextOutput/index.tsx b/packages/ui/src/components/printable/TextOutput/index.tsx
deleted file mode 100644
index 1f4cc0acf1..0000000000
--- a/packages/ui/src/components/printable/TextOutput/index.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { _cs } from '@togglecorp/fujs';
-
-import BooleanOutput, { Props as BooleanOutputProps } from '#components/BooleanOutput';
-import DateOutput, { Props as DateOutputProps } from '#components/DateOutput';
-import NumberOutput, { Props as NumberOutputProps } from '#components/NumberOutput';
-import {
-    DEFAULT_INVALID_TEXT,
-    DEFAULT_PRINT_DATE_FORMAT,
-} from '#utils/constants';
-
-import styles from './styles.module.css';
-
-interface BaseProps {
-    className?: string;
-    label?: React.ReactNode;
-    labelClassName?: string;
-    valueClassName?: string;
-    strongValue?: boolean;
-    strongLabel?: boolean;
-    withoutLabelColon?: boolean;
-    invalidText?: React.ReactNode;
-    variant?: 'block' | 'default' | 'contents';
-    withPadding?: boolean;
-    withBackground?: boolean;
-}
-
-interface BooleanProps extends BooleanOutputProps {
-    valueType: 'boolean',
-}
-
-interface NumberProps extends NumberOutputProps {
-    valueType: 'number',
-}
-
-interface DateProps extends DateOutputProps {
-    valueType: 'date',
-}
-
-interface TextProps {
-    valueType: 'text',
-    value: string | null | undefined;
-}
-
-interface NodeProps {
-    valueType?: never;
-    value?: React.ReactNode;
-}
-
-export type Props = BaseProps & (
-    NodeProps | TextProps | DateProps | NumberProps | BooleanProps
-);
-
-function TextOutput(props: Props) {
-    const {
-        className,
-        label,
-        labelClassName,
-        valueClassName,
-        strongLabel,
-        strongValue,
-        withoutLabelColon,
-        invalidText = DEFAULT_INVALID_TEXT,
-        variant = 'default',
-        withPadding,
-        withBackground,
-        ...otherProps
-    } = props;
-
-    const { value: propValue } = props;
-    let valueComponent: React.ReactNode = invalidText;
-
-    if (otherProps.valueType === 'number') {
-        valueComponent = (
-            <NumberOutput
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...otherProps}
-                invalidText={invalidText}
-            />
-        );
-    } else if (otherProps.valueType === 'date') {
-        valueComponent = (
-            <DateOutput
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...otherProps}
-                invalidText={invalidText}
-                format={DEFAULT_PRINT_DATE_FORMAT}
-            />
-        );
-    } else if (otherProps.valueType === 'boolean') {
-        valueComponent = (
-            <BooleanOutput
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...otherProps}
-                invalidText={invalidText}
-            />
-        );
-    } else if (!(propValue instanceof Date)) {
-        valueComponent = propValue || invalidText;
-    }
-
-    return (
-        <div
-            className={_cs(
-                styles.textOutput,
-                variant === 'default' && styles.defaultVariant,
-                variant === 'contents' && styles.contentsVariant,
-                variant === 'block' && styles.blockVariant,
-                withPadding && styles.withPadding,
-                withBackground && styles.withBackground,
-                className,
-            )}
-        >
-            <div
-                className={_cs(
-                    styles.label,
-                    strongLabel && styles.strong,
-                    labelClassName,
-                    !withoutLabelColon && styles.withColon,
-                )}
-            >
-                {label}
-            </div>
-            <div
-                className={_cs(
-                    styles.value,
-                    strongValue && styles.strong,
-                    otherProps.valueType === 'text' && styles.textType,
-                    valueClassName,
-                )}
-            >
-                {valueComponent}
-            </div>
-        </div>
-    );
-}
-
-export default TextOutput;
diff --git a/packages/ui/src/components/printable/index.tsx b/packages/ui/src/components/printable/index.tsx
index 39bc84205d..f2ae6e7493 100644
--- a/packages/ui/src/components/printable/index.tsx
+++ b/packages/ui/src/components/printable/index.tsx
@@ -1,5 +1,7 @@
 export type { Props as ContainerProps } from './Container';
 export { default as Container } from './Container';
+export type { Props as DataDisplayProps } from './DataDisplay';
+export { default as DataDisplay } from './DataDisplay';
 export type { DescriptionTextProps } from './DescriptionText';
 export { default as DescriptionText } from './DescriptionText';
 export type { Props as HeadingProps } from './Heading';
@@ -8,5 +10,3 @@ export type { Props as ImageProps } from './Image';
 export { default as Image } from './Image';
 export type { Props as SignatureProps } from './Signature';
 export { default as Signature } from './Signature';
-export type { Props as TextOutputProps } from './TextOutput';
-export { default as TextOutput } from './TextOutput';
diff --git a/packages/ui/src/contexts/dropdown-menu.tsx b/packages/ui/src/contexts/dropdown-menu.tsx
deleted file mode 100644
index 2133cda93e..0000000000
--- a/packages/ui/src/contexts/dropdown-menu.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext } from 'react';
-
-export interface DropdownMenuContextProps {
-    setShowDropdown: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const DropdownMenuContext = createContext<DropdownMenuContextProps>({
-    setShowDropdown: () => {
-        // eslint-disable-next-line no-console
-        console.warn('DropdownMenuContext::setShowDropdown called without a provider');
-    },
-});
-
-export default DropdownMenuContext;
diff --git a/packages/ui/src/contexts/index.tsx b/packages/ui/src/contexts/index.tsx
index ff70979e83..750d64e952 100644
--- a/packages/ui/src/contexts/index.tsx
+++ b/packages/ui/src/contexts/index.tsx
@@ -1,9 +1,9 @@
 export { SortContext } from '../components/Table/useSorting';
 export type { AlertContextProps, AlertParams, AlertType } from './alert';
 export { default as AlertContext } from './alert';
-export type { DropdownMenuContextProps } from './dropdown-menu';
-export { default as DropdownMenuContext } from './dropdown-menu';
 export type { Language, LanguageContextProps, LanguageNamespaceStatus } from './language';
 export { default as LanguageContext } from './language';
+export type { MenuContextProps } from './menu';
+export { default as MenuContext } from './menu';
 export type { NavigationTabContextProps } from './navigation-tab';
 export { default as NavigationTabContext } from './navigation-tab';
diff --git a/packages/ui/src/contexts/menu.tsx b/packages/ui/src/contexts/menu.tsx
new file mode 100644
index 0000000000..6cf4026c8c
--- /dev/null
+++ b/packages/ui/src/contexts/menu.tsx
@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+export interface MenuContextProps {
+    setShowDropdown: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const MenuContext = createContext<MenuContextProps>({
+    setShowDropdown: () => {
+        // eslint-disable-next-line no-console
+        console.warn('MenuContext::setShowDropdown called without a provider');
+    },
+});
+
+export default MenuContext;
diff --git a/packages/ui/src/contexts/tab.tsx b/packages/ui/src/contexts/tab.tsx
index cbc9d33483..a47c186c7f 100644
--- a/packages/ui/src/contexts/tab.tsx
+++ b/packages/ui/src/contexts/tab.tsx
@@ -16,6 +16,18 @@ export interface TabContextProps {
     setActiveTab: (key: TabKey) => void;
     step: number | undefined;
     setStep: React.Dispatch<React.SetStateAction<number>>;
+    /** Stable id prefix used to wire each tab to its panel (aria-controls/labelledby). */
+    idBase: string;
+}
+
+/** DOM id for a tab button, referenced by its panel's aria-labelledby. */
+export function getTabNodeId(idBase: string, key: TabKey) {
+    return `${idBase}-tab-${key}`;
+}
+
+/** DOM id for a tab panel, referenced by its tab's aria-controls. */
+export function getTabPanelNodeId(idBase: string, key: TabKey) {
+    return `${idBase}-panel-${key}`;
 }
 
 const TabContext = createContext<TabContextProps>({
@@ -25,6 +37,7 @@ const TabContext = createContext<TabContextProps>({
     tabs: [],
     activeTab: undefined,
     step: undefined,
+    idBase: '',
 
     // eslint-disable-next-line no-console
     setActiveTab: () => { console.warn('TabContext::setActiveTab called before it was initialized'); },
diff --git a/packages/ui/src/hooks/index.tsx b/packages/ui/src/hooks/index.tsx
index 72f5842c96..835ae02cba 100644
--- a/packages/ui/src/hooks/index.tsx
+++ b/packages/ui/src/hooks/index.tsx
@@ -5,5 +5,4 @@ export { default as useDebouncedValue } from './useDebouncedValue';
 export { default as useFloatPlacement } from './useFloatPlacement';
 export { default as useKeyboard } from './useKeyboard';
 export { default as useSizeTracking } from './useSizeTracking';
-export { default as useSpacingToken } from './useSpacingToken';
 export { default as useTranslation } from './useTranslation';
diff --git a/packages/ui/src/hooks/useFloatPlacement.ts b/packages/ui/src/hooks/useFloatPlacement.ts
index 763ae56cc9..f3734d5ffe 100644
--- a/packages/ui/src/hooks/useFloatPlacement.ts
+++ b/packages/ui/src/hooks/useFloatPlacement.ts
@@ -3,150 +3,76 @@ import {
     useEffect,
     useState,
 } from 'react';
-import {
-    bound,
-    isDefined,
-    isNotDefined,
-} from '@togglecorp/fujs';
-
-const ONE_REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
-// px
-const MIN_WIDTH = 16 * ONE_REM;
-const VERTICAL_OFFSET = 0.5 * ONE_REM;
-
-type Orientation = {
-    vertical: 'top' | 'bottom';
-    horizontal: 'left' | 'right';
-};
-
-const defaultOrientation: Orientation = {
-    vertical: 'bottom',
-    horizontal: 'right',
-};
+import { isNotDefined } from '@togglecorp/fujs';
 
-function getPreferredOrientation(position: DOMRect): Orientation {
-    const windowCenterX = window.innerWidth / 2;
-    const windowCenterY = window.innerHeight / 2;
-
-    const centerX = position.x + position.width / 2;
-    const centerY = position.y + position.height / 2;
-
-    return {
-        horizontal: centerX < windowCenterX ? 'left' : 'right',
-        vertical: centerY < windowCenterY ? 'top' : 'bottom',
-    };
-}
+export type Orientation = 'top' | 'bottom';
 
 interface Placement {
-    top: string;
-    left: string;
-    right: string;
-    bottom: string;
+    style: React.CSSProperties;
+    orientation: Orientation;
 }
 
 const defaultPlacement: Placement = {
-    top: 'unset',
-    left: 'unset',
-    right: 'unset',
-    bottom: 'unset',
+    style: { position: 'fixed' },
+    orientation: 'bottom',
 };
 
-function useFloatPlacement(
-    parentRef: React.RefObject<HTMLElement | null>,
-    preferredWidth?: number,
-) {
-    const [placements, setPlacements] = useState<{
-        content: Placement,
-        pointer: Placement,
-        width: string,
-        orientation: Orientation,
-    }>({
-        content: defaultPlacement,
-        pointer: defaultPlacement,
-        width: 'auto',
-        orientation: defaultOrientation,
-    });
-
-    const calculatePlacement = useCallback(() => {
-        if (isNotDefined(parentRef.current)) {
-            return;
-        }
-
-        const parentBCR = parentRef.current.getBoundingClientRect();
-        const {
-            x: parentX,
-            y: parentY,
-            width: parentWidth,
-            height: parentHeight,
-        } = parentBCR;
-
-        const horizontalPadding = ONE_REM;
-        const minX = horizontalPadding;
-        const maxX = window.innerWidth - horizontalPadding;
-        const maxWidth = window.innerWidth - 2 * horizontalPadding;
-
-        const orientation = getPreferredOrientation(parentBCR);
-        const parentCenterX = parentX + parentWidth / 2;
-
-        const width = bound(
-            isDefined(preferredWidth) ? preferredWidth * ONE_REM : parentWidth,
-            MIN_WIDTH,
-            maxWidth,
-        );
-
-        let x1 = parentCenterX - width / 2;
-        let x2 = parentCenterX + width / 2;
-
-        if (x1 < minX) {
-            const diff = minX - x1 - horizontalPadding;
-            x1 = minX;
-            x2 += diff;
-        }
-
-        if (x2 > maxX) {
-            const diff = x2 - maxX - horizontalPadding;
-            x2 = maxX;
-            x1 -= diff;
-        }
-
-        setPlacements({
-            content: {
-                bottom: orientation.vertical === 'bottom'
-                    ? `${window.innerHeight - parentY + VERTICAL_OFFSET}px`
-                    : 'unset',
-                top: orientation.vertical === 'top'
-                    ? `${parentY + parentHeight + VERTICAL_OFFSET}px`
-                    : 'unset',
-                left: orientation.horizontal === 'left' ? `${x1}px` : 'unset',
-                right: orientation.horizontal === 'right' ? `${window.innerWidth - x2}px` : 'unset',
-            },
-            pointer: {
-                left: `${parentCenterX}px`,
-                top: orientation.vertical === 'top' ? `${parentY + parentHeight}px` : `${parentY - VERTICAL_OFFSET}px`,
-                right: 'unset',
-                bottom: 'unset',
-            },
-            width: `${x2 - x1}px`,
-            orientation,
-        });
-    }, [parentRef, preferredWidth]);
-
-    useEffect(() => {
-        calculatePlacement();
-        // TODO: throttle and debounce callbacks
-        const handleScroll = calculatePlacement;
-        const handleResize = calculatePlacement;
-
-        window.addEventListener('scroll', handleScroll, true);
-        window.addEventListener('resize', handleResize, true);
-
-        return () => {
-            window.removeEventListener('scroll', handleScroll, true);
-            window.removeEventListener('resize', handleResize, true);
-        };
-    }, [calculatePlacement]);
-
-    return placements;
+/**
+ * Minimal fixed-position placement for a floating element next to `parentRef`.
+ *
+ * Deliberately simple: the element is placed directly below the parent, or
+ * above it when there is more room above than below. No horizontal clamping,
+ * width sizing, centering or other adjustments.
+ */
+function useFloatPlacement(parentRef: React.RefObject<HTMLElement | null>) {
+    const [placement, setPlacement] = useState<Placement>(defaultPlacement);
+
+    const calculatePlacement = useCallback(
+        () => {
+            const parent = parentRef.current;
+            if (isNotDefined(parent)) {
+                return;
+            }
+
+            const rect = parent.getBoundingClientRect();
+            const showAbove = rect.top > (window.innerHeight - rect.bottom);
+
+            setPlacement({
+                orientation: showAbove ? 'top' : 'bottom',
+                style: showAbove
+                    ? {
+                        position: 'fixed',
+                        left: rect.left,
+                        bottom: window.innerHeight - rect.top,
+                    }
+                    : {
+                        position: 'fixed',
+                        left: rect.left,
+                        top: rect.bottom,
+                    },
+            });
+        },
+        [parentRef],
+    );
+
+    useEffect(
+        () => {
+            // measure-then-position: the initial placement must be computed from
+            // the DOM rect on mount, which requires a synchronous setState
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            calculatePlacement();
+            window.addEventListener('scroll', calculatePlacement, true);
+            window.addEventListener('resize', calculatePlacement);
+
+            return () => {
+                window.removeEventListener('scroll', calculatePlacement, true);
+                window.removeEventListener('resize', calculatePlacement);
+            };
+        },
+        [calculatePlacement],
+    );
+
+    return placement;
 }
 
 export default useFloatPlacement;
diff --git a/packages/ui/src/hooks/useSpacingToken.ts b/packages/ui/src/hooks/useSpacingToken.ts
deleted file mode 100644
index e0265be39b..0000000000
--- a/packages/ui/src/hooks/useSpacingToken.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-    useEffect,
-    useState,
-} from 'react';
-import {
-    isNotDefined,
-    randomString,
-} from '@togglecorp/fujs';
-
-import {
-    getOpticallyCorrectedSpacingValue,
-    getSpacingValue,
-    SpacingMode,
-    SpacingType,
-} from '#utils/style';
-
-interface Props {
-    spacing?: SpacingType;
-    offset?: number;
-    modes?: SpacingMode[];
-    withoutOpticalCorrection?: boolean;
-    withAdditionalInlinePadding?: boolean;
-}
-
-function useSpacingToken(props: Props) {
-    const [className] = useState(() => `spacing-token-${randomString()}`);
-
-    const {
-        spacing = 'md',
-        modes = ['padding-inline', 'padding-block'],
-        offset = 0,
-        withoutOpticalCorrection,
-        withAdditionalInlinePadding,
-    } = props;
-
-    useEffect(
-        () => {
-            if (isNotDefined(spacing)) {
-                return undefined;
-            }
-
-            const spacingValue = getSpacingValue(spacing, offset);
-
-            const style = document.createElement('style');
-            document.head.appendChild(style);
-            if (!style.sheet) {
-                style.remove();
-                return undefined;
-            }
-
-            const rules = modes.map((mode) => {
-                if (mode === 'padding-inline' && withAdditionalInlinePadding) {
-                    return `${mode}: calc(${spacingValue} * 1.5 + var(--go-ui-spacing-2xs))`;
-                }
-
-                if (withoutOpticalCorrection) {
-                    return `${mode}: ${spacingValue}`;
-                }
-
-                return `${mode}: ${getOpticallyCorrectedSpacingValue(spacingValue, mode)}`;
-            }).join('; ');
-
-            style.sheet.insertRule(`.${className} { ${rules} }`);
-
-            return () => {
-                style.remove();
-            };
-        },
-        [spacing, modes, className, offset, withoutOpticalCorrection, withAdditionalInlinePadding],
-    );
-
-    return className;
-}
-
-export default useSpacingToken;
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index 3b772df240..cc2db1aee1 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -4,6 +4,9 @@
     --go-ui-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
     --go-ui-optical-correction-factor: 1.5;
+    /* Additive term applied to vertical spacing (padding-block, row-gap) to
+       compensate for the extra perceived whitespace from text line-height */
+    --go-ui-spacing-optical-correction: calc(1rem / var(--go-ui-optical-correction-factor) - 1rem);
     --base-font-size: 0.875rem;
     --go-ui-font-size-export: 0.6875rem;
 
@@ -21,7 +24,7 @@
 
     --go-ui-height-brand-icon: 2.25rem;
     --go-ui-height-social-icon: 2.5rem;
-    --go-ui-height-key-figure-icon: 3rem;
+    --go-ui-height-key-figure-icon: 2rem;
     --go-ui-height-status-icon: 2.536rem;
     --go-ui-height-compact-status-icon: 2rem;
 
@@ -153,11 +156,13 @@
 
     --go-ui-color-red-hover: #DE2934;
 
-    --go-ui-color-purple-per: #8648B3;
-    --go-ui-color-orange-per: #FF8654;
-    --go-ui-color-blue-per: #418FDE;
-    --go-ui-color-teal-per: #00B2A2;
-    --go-ui-color-red-per: #DA283D;
+    /* Desaturated to match the design's flat PER category swatches
+       (Guidelines "Colours PER"); the vivid values were chart-only. */
+    --go-ui-color-purple-per: #806792;
+    --go-ui-color-orange-per: #FFA17A;
+    --go-ui-color-blue-per: #778BAD;
+    --go-ui-color-teal-per: #429089;
+    --go-ui-color-red-per: #C4515F;
 
     --go-ui-color-text-black: rgb(0 0 0 / 1);
     --go-ui-color-text: rgb(0 0 0 / 0.8);
@@ -167,7 +172,7 @@
     --go-ui-color-positive: var(--go-ui-color-green);
     --go-ui-color-information: var(--go-ui-color-blue);
     --go-ui-color-warning: var(--go-ui-color-yellow);
-    --go-ui-color-negative: var(--go-ui-color-red);
+    --go-ui-color-negative: var(--go-ui-color-primary-red);
 
     --go-ui-color-separator: rgb(0 0 0 / 0.1);
     --go-ui-color-separator-light: rgb(0 0 0 / 0.05);
@@ -209,7 +214,21 @@
     --go-ui-saturate-150: 1.5;
     --go-ui-saturate-200: 2;
 
+    /* Categorical hazard palette. Canonical source for hazard colors;
+       the app resolves these to literal hex at runtime
+       (app/src/utils/common.ts resolveCssColor) because Mapbox paint
+       expressions can't parse var(). The COLOR_HAZARD_* in
+       app/src/utils/constants.ts are kept only as load-time fallbacks.
+       cyclone/drought/flood/fi are design-export verified
+       (GRAPHS & LEGENDS + Guidelines); storm/wildfire mirror the app's
+       prior values (no design specimen). */
+    --go-ui-color-hazard-cyclone: #a4bede;
+    --go-ui-color-hazard-drought: #b68fba;
+    --go-ui-color-hazard-earthquake: #eca48c;
+    --go-ui-color-hazard-flood: #5a80b0;
     --go-ui-color-hazard-fi: #b7c992;
+    --go-ui-color-hazard-storm: #97b8c2;
+    --go-ui-color-hazard-wildfire: #ff5014;
 
     --go-ui-color-map-dot-appeals: #f5333f;
     --go-ui-color-map-dot-dref: #ff9e00;
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index d8e6453f8b..2668f32f4b 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -10,10 +10,10 @@ export type { Props as BlockLoadingProps } from './components/BlockLoading';
 export { default as BlockLoading } from './components/BlockLoading';
 export type { Props as BlockViewProps } from './components/BlockView';
 export { default as BlockView } from './components/BlockView';
+export type { Props as BooleanDisplayProps } from './components/BooleanDisplay';
+export { default as BooleanDisplay } from './components/BooleanDisplay';
 export type { BooleanInputProps } from './components/BooleanInput';
 export { default as BooleanInput } from './components/BooleanInput';
-export type { Props as BooleanOutputProps } from './components/BooleanOutput';
-export { default as BooleanOutput } from './components/BooleanOutput';
 export type { BreadcrumbsProps } from './components/Breadcrumbs';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
 export type { Props as ButtonProps } from './components/Button';
@@ -26,46 +26,46 @@ export type { Props as CheckboxProps } from './components/Checkbox';
 export { default as Checkbox } from './components/Checkbox';
 export type { Props as ChecklistProps } from './components/Checklist';
 export { default as Checklist } from './components/Checklist';
-export type { Props as ChipProps } from './components/Chip';
-export { default as Chip } from './components/Chip';
+export type { Props as ChipLayoutProps } from './components/ChipLayout';
+export { default as ChipLayout } from './components/ChipLayout';
 export type { Props as ColorPreviewProps } from './components/ColorPreview';
 export { default as ColorPreview } from './components/ColorPreview';
 export type { Props as ConfirmButtonProps } from './components/ConfirmButton';
 export { default as ConfirmButton } from './components/ConfirmButton';
 export type { Props as ContainerProps } from './components/Container';
 export { default as Container } from './components/Container';
+export type { Props as DataDisplayProps } from './components/DataDisplay';
+export { default as DataDisplay } from './components/DataDisplay';
+export type { Props as DateDisplayProps } from './components/DateDisplay';
+export { default as DateDisplay } from './components/DateDisplay';
 export type { Props as DateInputProps } from './components/DateInput';
 export { default as DateInput } from './components/DateInput';
-export type { Props as DateOutputProps } from './components/DateOutput';
-export { default as DateOutput } from './components/DateOutput';
-export type { Props as DateRangeOutputProps } from './components/DateRangeOutput';
-export { default as DateRangeOutput } from './components/DateRangeOutput';
+export type { Props as DateRangeDisplayProps } from './components/DateRangeDisplay';
+export { default as DateRangeDisplay } from './components/DateRangeDisplay';
 export type { Props as DefaultMessageProps } from './components/DefaultMessage';
 export { default as DefaultMessage } from './components/DefaultMessage';
 export type { Props as DescriptionProps } from './components/Description';
 export { default as Description } from './components/Description';
-export type { Props as DismissableListOutputProps } from './components/DismissableListOutput';
-export { default as DismissableListOutput } from './components/DismissableListOutput';
-export type { Props as DismissableMultiListOutputProps } from './components/DismissableMultiListOutput';
-export { default as DismissableMultiListOutput } from './components/DismissableMultiListOutput';
-export type { Props as DismissableTextOutputProps } from './components/DismissableTextOutput';
-export { default as DismissableTextOutput } from './components/DismissableTextOutput';
-export type { Props as DropdownMenuProps } from './components/DropdownMenu';
-export { default as DropdownMenu } from './components/DropdownMenu';
+export type { Props as DialogProps } from './components/Dialog';
+export { default as Dialog } from './components/Dialog';
+export type { Props as DisplayLabelProps } from './components/DisplayLabel';
+export { default as DisplayLabel } from './components/DisplayLabel';
+export type { Props as DropdownProps } from './components/Dropdown';
+export { default as Dropdown } from './components/Dropdown';
 export type { Props as ExpandableContainerProps } from './components/ExpandableContainer';
 export { default as ExpandableContainer } from './components/ExpandableContainer';
+export type { Props as FileInputButtonProps } from './components/FileInputButton';
+export { default as FileInputButton } from './components/FileInputButton';
 export type { Props as HeadingProps } from './components/Heading';
 export { default as Heading } from './components/Heading';
-export type { Props as HtmlOutputProps } from './components/HtmlOutput';
-export { default as HtmlOutput } from './components/HtmlOutput';
+export type { Props as HtmlDisplayProps } from './components/HtmlDisplay';
+export { default as HtmlDisplay } from './components/HtmlDisplay';
 export type { Props as IconButtonProps } from './components/IconButton';
 export { default as IconButton } from './components/IconButton';
+export type { Props as IframeProps } from './components/Iframe';
+export { default as Iframe } from './components/Iframe';
 export type { Props as ImageProps } from './components/Image';
 export { default as Image } from './components/Image';
-export type { Props as InfoPopupProps } from './components/InfoPopup';
-export { default as InfoPopup } from './components/InfoPopup';
-export type { Props as InlineFrameProps } from './components/InlineFrame';
-export { default as InlineFrame } from './components/InlineFrame';
 export type { Props as InlineLayoutProps } from './components/InlineLayout';
 export { default as InlineLayout } from './components/InlineLayout';
 export type { Props as InlineViewProps } from './components/InlineView';
@@ -82,41 +82,39 @@ export type { Props as InputSectionProps } from './components/InputSection';
 export { default as InputSection } from './components/InputSection';
 export type { Props as KeyFigureProps } from './components/KeyFigure';
 export { default as KeyFigure } from './components/KeyFigure';
-export type { Props as KeyFigureViewProps } from './components/KeyFigureView';
-export { default as KeyFigureView } from './components/KeyFigureView';
-export type { Props as LabelProps } from './components/Label';
-export { default as Label } from './components/Label';
+export type { Props as KeyFigureCardProps } from './components/KeyFigureCard';
+export { default as KeyFigureCard } from './components/KeyFigureCard';
 export { default as Legend } from './components/Legend';
 export type{ Props as LegendItemProps } from './components/LegendItem';
 export { default as LegendItem } from './components/LegendItem';
-export type { Props as ListProps } from './components/List';
-export { default as List } from './components/List';
 export type { Props as ListViewProps } from './components/ListView';
 export { default as ListView } from './components/ListView';
+export type { Props as MenuProps } from './components/Menu';
+export { default as Menu } from './components/Menu';
 export type { Props as MessageProps } from './components/Message';
 export { default as Message } from './components/Message';
-export type { Props as ModalProps } from './components/Modal';
-export { default as Modal } from './components/Modal';
+export type { Props as MoreInfoProps } from './components/MoreInfo';
+export { default as MoreInfo } from './components/MoreInfo';
 export type { MultiSelectInputProps } from './components/MultiSelectInput';
 export { default as MultiSelectInput } from './components/MultiSelectInput';
 export type { Props as NavigationTabListProps } from './components/NavigationTabList';
 export { default as NavigationTabList } from './components/NavigationTabList';
+export type { Props as NumberDisplayProps } from './components/NumberDisplay';
+export { default as NumberDisplay } from './components/NumberDisplay';
 export type { Props as NumberInputProps } from './components/NumberInput';
 export { default as NumberInput } from './components/NumberInput';
-export type { Props as NumberOutputProps } from './components/NumberOutput';
-export { default as NumberOutput } from './components/NumberOutput';
 export type { Props as PageContainerProps } from './components/PageContainer';
 export { default as PageContainer } from './components/PageContainer';
 export type { Props as PageHeaderProps } from './components/PageHeader';
 export { default as PageHeader } from './components/PageHeader';
-export type { Props as PagerProps } from './components/Pager';
-export { default as Pager } from './components/Pager';
+export type { Props as PaginationProps } from './components/Pagination';
+export { default as Pagination } from './components/Pagination';
 export type { Props as PasswordInputProps } from './components/PasswordInput';
 export { default as PasswordInput } from './components/PasswordInput';
 export type { Props as PieChartProps } from './components/PieChart';
 export { default as PieChart } from './components/PieChart';
-export type { Props as PopupProps } from './components/Popup';
-export { default as Popup } from './components/Popup';
+export type { Props as PopoverProps } from './components/Popover';
+export { default as Popover } from './components/Popover';
 export type { Props as PortalProps } from './components/Portal';
 export { default as Portal } from './components/Portal';
 export type { Props as ProgressBarProps } from './components/ProgressBar';
@@ -127,6 +125,8 @@ export type { Props as RadioProps } from './components/RadioInput/Radio';
 export { default as Radio } from './components/RadioInput/Radio';
 export type { Props as RawButtonProps } from './components/RawButton';
 export { default as RawButton } from './components/RawButton';
+export type { Props as RawDisplayProps } from './components/RawDisplay';
+export { default as RawDisplay } from './components/RawDisplay';
 export type {
     CommonRawFileInputProps,
     MultipleRawFileInputProps,
@@ -141,8 +141,6 @@ export type { ListKey } from './components/RawList';
 export { default as RawList } from './components/RawList';
 export type { Props as RawTextAreaProps } from './components/RawTextArea';
 export { default as RawTextArea } from './components/RawTextArea';
-export type { Props as ReducedListDisplayProps } from './components/ReducedListDisplay';
-export { default as ReducedListDisplay } from './components/ReducedListDisplay';
 export type { SearchMultiSelectInputProps } from './components/SearchMultiSelectInput';
 export { default as SearchMultiSelectInput } from './components/SearchMultiSelectInput';
 export type { Props as SearchSelectInputProps } from './components/SearchSelectInput';
@@ -153,6 +151,10 @@ export type { Props as SelectInputProps } from './components/SelectInput';
 export { default as SelectInput } from './components/SelectInput';
 export type { Props as SelectInputContainerProps } from './components/SelectInputContainer';
 export { default as SelectInputContainer } from './components/SelectInputContainer';
+export type { Props as SelectionProps } from './components/Selection';
+export { default as Selection } from './components/Selection';
+export type { Props as SelectionListProps } from './components/SelectionList';
+export { default as SelectionList } from './components/SelectionList';
 export type { Props as SpinnerProps } from './components/Spinner';
 export { default as Spinner } from './components/Spinner';
 export type { Props as StackedProgressBarProps } from './components/StackedProgressBar';
@@ -182,18 +184,21 @@ export { default as Tab } from './components/Tabs/Tab';
 export { default as TabList } from './components/Tabs/TabList';
 export type { Props as TabPanelProps } from './components/Tabs/TabPanel';
 export { default as TabPanel } from './components/Tabs/TabPanel';
+export type { Props as TagProps } from './components/Tag';
+export { default as Tag } from './components/Tag';
 export type { Props as TextAreaProps } from './components/TextArea';
 export { default as TextArea } from './components/TextArea';
 export type { Props as TextInputProps } from './components/TextInput';
 export { default as TextInput } from './components/TextInput';
-export type { Props as TextOutputProps } from './components/TextOutput';
-export { default as TextOutput } from './components/TextOutput';
 export type { Props as TimeSeriesChartProps } from './components/TimeSeriesChart';
 export { default as TimeSeriesChart } from './components/TimeSeriesChart';
 export { default as ChartPoint } from './components/TimeSeriesChart/ChartPoint';
 export type { Props as TooltipProps } from './components/Tooltip';
 export { default as Tooltip } from './components/Tooltip';
+export type { Props as TopBannerProps } from './components/TopBanner';
 export { default as TopBanner } from './components/TopBanner';
+export type { Props as TruncatedListProps } from './components/TruncatedList';
+export { default as TruncatedList } from './components/TruncatedList';
 export type {
     BaseCell,
     BaseHeader,
diff --git a/packages/ui/src/setupTests.ts b/packages/ui/src/setupTests.ts
new file mode 100644
index 0000000000..a3c33ee504
--- /dev/null
+++ b/packages/ui/src/setupTests.ts
@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom/vitest';
+
+import { cleanup } from '@testing-library/react';
+import {
+    afterEach,
+    vi,
+} from 'vitest';
+
+// React Testing Library does not auto-clean when `globals` is off.
+afterEach(() => {
+    cleanup();
+});
+
+// --- happy-dom polyfills for browser APIs the components rely on ---
+
+globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
+    observe: () => undefined,
+    unobserve: () => undefined,
+    disconnect: () => undefined,
+})) as unknown as typeof ResizeObserver;
+
+if (typeof window.matchMedia !== 'function') {
+    window.matchMedia = ((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => undefined,
+        removeListener: () => undefined,
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+        dispatchEvent: () => false,
+    })) as unknown as typeof window.matchMedia;
+}
+
+if (typeof window.HTMLElement.prototype.scrollIntoView !== 'function') {
+    window.HTMLElement.prototype.scrollIntoView = () => undefined;
+}
diff --git a/packages/ui/src/utils/inputs.ts b/packages/ui/src/utils/inputs.ts
index a591e0b894..ddcc952c53 100644
--- a/packages/ui/src/utils/inputs.ts
+++ b/packages/ui/src/utils/inputs.ts
@@ -8,7 +8,7 @@ export function extractInputContainerProps<MIXED_PROPS extends Partial<InputCont
 ): [Pick<MIXED_PROPS, keyof InputContainerProps>, Omit<MIXED_PROPS, keyof InputContainerProps>] {
     const keysToExtract: Record<(keyof InputContainerProps), boolean> = {
         className: true,
-        containerRef: true,
+        elementRef: true,
         inputSectionRef: true,
         label: true,
         icons: true,
@@ -23,11 +23,14 @@ export function extractInputContainerProps<MIXED_PROPS extends Partial<InputCont
         withPrevValue: true,
         highlightMode: true,
         required: true,
-        variant: true,
+        inputId: true,
+        hintId: true,
+        errorId: true,
+        role: true,
+        styleVariant: true,
         withAsterisk: true,
         spacing: true,
-        withBackground: true,
-        withDarkBackground: true,
+        backgroundColor: true,
         withPadding: true,
         withoutInputSectionPadding: true,
     };
diff --git a/packages/ui/src/utils/specs.module.css b/packages/ui/src/utils/specs.module.css
new file mode 100644
index 0000000000..2e94afa76c
--- /dev/null
+++ b/packages/ui/src/utils/specs.module.css
@@ -0,0 +1,237 @@
+/*
+ * Static utility classes for the token-spec system (see utils/style.ts).
+ *
+ * Each spec follows the same shape: one class per token on the scale, applied
+ * by components through the get<Spec>ClassName resolvers. Property-carrying
+ * selectors are doubled (.x.x) so a spec value set via props wins over
+ * same-specificity component rules regardless of bundle order — matching the
+ * behavior of the runtime-injected spacing styles this system replaces.
+ *
+ * Spacing splits token and mode: token classes only set custom properties;
+ * mode classes apply them to padding/gap so one element can combine any
+ * subset of modes with a single token class.
+ */
+
+.spacing-none {
+    --spec-spacing: 0rem;
+    --spec-spacing-correction: 0rem;
+    --spec-spacing-additional: 0rem;
+}
+
+.spacing-5xs {
+    --spec-spacing: var(--go-ui-spacing-5xs);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-5xs) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-4xs {
+    --spec-spacing: var(--go-ui-spacing-4xs);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-4xs) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-3xs {
+    --spec-spacing: var(--go-ui-spacing-3xs);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-3xs) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-2xs {
+    --spec-spacing: var(--go-ui-spacing-2xs);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-2xs) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-xs {
+    --spec-spacing: var(--go-ui-spacing-xs);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-xs) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-sm {
+    --spec-spacing: var(--go-ui-spacing-sm);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-sm) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-md {
+    --spec-spacing: var(--go-ui-spacing-md);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-md) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-lg {
+    --spec-spacing: var(--go-ui-spacing-lg);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-lg) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-xl {
+    --spec-spacing: var(--go-ui-spacing-xl);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-xl) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-2xl {
+    --spec-spacing: var(--go-ui-spacing-2xl);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-2xl) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-3xl {
+    --spec-spacing: var(--go-ui-spacing-3xl);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-3xl) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-4xl {
+    --spec-spacing: var(--go-ui-spacing-4xl);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-4xl) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-5xl {
+    --spec-spacing: var(--go-ui-spacing-5xl);
+    --spec-spacing-correction: var(--go-ui-spacing-optical-correction);
+    --spec-spacing-additional: calc(var(--go-ui-spacing-5xl) * 1.5 + var(--go-ui-spacing-2xs));
+}
+
+.spacing-padding-inline.spacing-padding-inline {
+    padding-inline: var(--spec-spacing);
+}
+
+.spacing-padding-inline-additional.spacing-padding-inline-additional {
+    padding-inline: var(--spec-spacing-additional);
+}
+
+.spacing-padding-block.spacing-padding-block {
+    padding-block: calc(var(--spec-spacing) + var(--spec-spacing-correction));
+}
+
+.spacing-padding-block-plain.spacing-padding-block-plain {
+    padding-block: var(--spec-spacing);
+}
+
+.spacing-row-gap.spacing-row-gap {
+    row-gap: calc(var(--spec-spacing) + var(--spec-spacing-correction));
+}
+
+.spacing-row-gap-plain.spacing-row-gap-plain {
+    row-gap: var(--spec-spacing);
+}
+
+.spacing-column-gap.spacing-column-gap {
+    column-gap: var(--spec-spacing);
+}
+
+.text-size-2xs.text-size-2xs {
+    font-size: var(--go-ui-font-size-2xs);
+}
+
+.text-size-xs.text-size-xs {
+    font-size: var(--go-ui-font-size-xs);
+}
+
+.text-size-sm.text-size-sm {
+    font-size: var(--go-ui-font-size-sm);
+}
+
+.text-size-md.text-size-md {
+    font-size: var(--go-ui-font-size-md);
+}
+
+.text-size-lg.text-size-lg {
+    font-size: var(--go-ui-font-size-lg);
+}
+
+.text-size-xl.text-size-xl {
+    font-size: var(--go-ui-font-size-xl);
+}
+
+.text-size-2xl.text-size-2xl {
+    font-size: var(--go-ui-font-size-2xl);
+}
+
+.text-size-3xl.text-size-3xl {
+    font-size: var(--go-ui-font-size-3xl);
+}
+
+.text-size-4xl.text-size-4xl {
+    font-size: var(--go-ui-font-size-4xl);
+}
+
+.background-color-foreground.background-color-foreground {
+    background-color: var(--go-ui-color-foreground);
+}
+
+.background-color-background.background-color-background {
+    background-color: var(--go-ui-color-background);
+}
+
+.background-color-element.background-color-element {
+    background-color: var(--go-ui-color-element-background);
+}
+
+.background-color-surface-raised.background-color-surface-raised {
+    background-color: var(--go-ui-color-gray-10);
+}
+
+.border-radius-none.border-radius-none {
+    border-radius: var(--go-ui-border-radius-none);
+}
+
+.border-radius-sm.border-radius-sm {
+    border-radius: var(--go-ui-border-radius-sm);
+}
+
+.border-radius-md.border-radius-md {
+    border-radius: var(--go-ui-border-radius-md);
+}
+
+.border-radius-lg.border-radius-lg {
+    border-radius: var(--go-ui-border-radius-lg);
+}
+
+.border-radius-xl.border-radius-xl {
+    border-radius: var(--go-ui-border-radius-xl);
+}
+
+.border-radius-2xl.border-radius-2xl {
+    border-radius: var(--go-ui-border-radius-2xl);
+}
+
+.border-radius-3xl.border-radius-3xl {
+    border-radius: var(--go-ui-border-radius-3xl);
+}
+
+.border-radius-full.border-radius-full {
+    border-radius: var(--go-ui-border-radius-full);
+}
+
+.box-shadow-none.box-shadow-none {
+    box-shadow: var(--go-ui-box-shadow-none);
+}
+
+.box-shadow-xs.box-shadow-xs {
+    box-shadow: var(--go-ui-box-shadow-xs);
+}
+
+.box-shadow-sm.box-shadow-sm {
+    box-shadow: var(--go-ui-box-shadow-sm);
+}
+
+.box-shadow-md.box-shadow-md {
+    box-shadow: var(--go-ui-box-shadow-md);
+}
+
+.box-shadow-lg.box-shadow-lg {
+    box-shadow: var(--go-ui-box-shadow-lg);
+}
+
+.box-shadow-xl.box-shadow-xl {
+    box-shadow: var(--go-ui-box-shadow-xl);
+}
+
+.box-shadow-2xl.box-shadow-2xl {
+    box-shadow: var(--go-ui-box-shadow-2xl);
+}
diff --git a/packages/ui/src/utils/style.ts b/packages/ui/src/utils/style.ts
index b74d2df534..a62479c456 100644
--- a/packages/ui/src/utils/style.ts
+++ b/packages/ui/src/utils/style.ts
@@ -1,6 +1,42 @@
-import { bound } from '@togglecorp/fujs';
+import {
+    _cs,
+    bound,
+} from '@togglecorp/fujs';
+
+import specs from './specs.module.css';
+
+/*
+ * Token-spec system
+ *
+ * Each visual dimension ("spec") is defined once here as:
+ *   - a scale: the ordered list of token values (matching the CSS variables
+ *     declared in index.css)
+ *   - a type derived from that scale
+ *   - a resolver returning the static utility class for a token (see
+ *     specs.module.css)
+ *
+ * Ordinal specs (spacing, textSize, borderRadius, boxShadow) also accept an
+ * offset: the resolved token is shifted along the scale by that amount and
+ * clamped at both ends, so a component embedded in a visually larger or
+ * smaller context can shift its whole scale without renaming tokens.
+ * backgroundColor is categorical and has no offset.
+ */
+
+export const spacingScale = ['none', '5xs', '4xs', '3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'] as const;
+export type SpacingType = (typeof spacingScale)[number];
+
+export const textSizeScale = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] as const;
+export type TextSizeType = (typeof textSizeScale)[number];
+
+export const borderRadiusScale = ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'] as const;
+export type BorderRadiusType = (typeof borderRadiusScale)[number];
+
+export const boxShadowScale = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;
+export type BoxShadowType = (typeof boxShadowScale)[number];
+
+export const backgroundColors = ['foreground', 'background', 'element', 'surface-raised'] as const;
+export type BackgroundColorType = (typeof backgroundColors)[number];
 
-export type SpacingType = 'none' | '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
 export type SpacingMode = 'row-gap' | 'column-gap' | 'padding-inline' | 'padding-block';
 
 export const gapSpacings: SpacingMode[] = ['row-gap', 'column-gap'];
@@ -10,11 +46,186 @@ export const fullSpacings: SpacingMode[] = [
     ...paddingSpacings,
 ];
 
+function resolveSpecToken<T extends string>(
+    scale: readonly T[],
+    value: T,
+    offset = 0,
+): T {
+    return scale[bound(scale.indexOf(value) + offset, 0, scale.length - 1)];
+}
+
+const spacingTokenToClassName: Record<SpacingType, string> = {
+    none: specs.spacingNone,
+    '5xs': specs.spacing5Xs,
+    '4xs': specs.spacing4Xs,
+    '3xs': specs.spacing3Xs,
+    '2xs': specs.spacing2Xs,
+    xs: specs.spacingXs,
+    sm: specs.spacingSm,
+    md: specs.spacingMd,
+    lg: specs.spacingLg,
+    xl: specs.spacingXl,
+    '2xl': specs.spacing2Xl,
+    '3xl': specs.spacing3Xl,
+    '4xl': specs.spacing4Xl,
+    '5xl': specs.spacing5Xl,
+};
+
+const textSizeTokenToClassName: Record<TextSizeType, string> = {
+    '2xs': specs.textSize2Xs,
+    xs: specs.textSizeXs,
+    sm: specs.textSizeSm,
+    md: specs.textSizeMd,
+    lg: specs.textSizeLg,
+    xl: specs.textSizeXl,
+    '2xl': specs.textSize2Xl,
+    '3xl': specs.textSize3Xl,
+    '4xl': specs.textSize4Xl,
+};
+
+const borderRadiusTokenToClassName: Record<BorderRadiusType, string> = {
+    none: specs.borderRadiusNone,
+    sm: specs.borderRadiusSm,
+    md: specs.borderRadiusMd,
+    lg: specs.borderRadiusLg,
+    xl: specs.borderRadiusXl,
+    '2xl': specs.borderRadius2Xl,
+    '3xl': specs.borderRadius3Xl,
+    full: specs.borderRadiusFull,
+};
+
+const boxShadowTokenToClassName: Record<BoxShadowType, string> = {
+    none: specs.boxShadowNone,
+    xs: specs.boxShadowXs,
+    sm: specs.boxShadowSm,
+    md: specs.boxShadowMd,
+    lg: specs.boxShadowLg,
+    xl: specs.boxShadowXl,
+    '2xl': specs.boxShadow2Xl,
+};
+
+const backgroundColorToClassName: Record<BackgroundColorType, string> = {
+    foreground: specs.backgroundColorForeground,
+    background: specs.backgroundColorBackground,
+    element: specs.backgroundColorElement,
+    'surface-raised': specs.backgroundColorSurfaceRaised,
+};
+
+// The class keys above depend on vite's camelCaseOnly locals convention
+// (lodash camelCase); verify the mapping survives toolchain upgrades
+function validateSpecClassNames() {
+    [
+        spacingTokenToClassName,
+        textSizeTokenToClassName,
+        borderRadiusTokenToClassName,
+        boxShadowTokenToClassName,
+        backgroundColorToClassName,
+        {
+            'padding-inline': specs.spacingPaddingInline,
+            'padding-inline-additional': specs.spacingPaddingInlineAdditional,
+            'padding-block': specs.spacingPaddingBlock,
+            'padding-block-plain': specs.spacingPaddingBlockPlain,
+            'row-gap': specs.spacingRowGap,
+            'row-gap-plain': specs.spacingRowGapPlain,
+            'column-gap': specs.spacingColumnGap,
+        },
+    ].forEach((tokenMap) => {
+        Object.entries(tokenMap).forEach(([token, className]) => {
+            if (className === undefined) {
+                // eslint-disable-next-line no-console
+                console.error(`Spec utility class missing for token "${token}". Check specs.module.css and the css modules locals convention.`);
+            }
+        });
+    });
+}
+validateSpecClassNames();
+
+export interface SpacingClassNameOptions {
+    spacing?: SpacingType;
+    offset?: number;
+    modes?: SpacingMode[];
+    withoutOpticalCorrection?: boolean;
+    withAdditionalInlinePadding?: boolean;
+}
+
+export function getSpacingClassName(options: SpacingClassNameOptions) {
+    const {
+        spacing = 'md',
+        offset = 0,
+        modes = ['padding-inline', 'padding-block'],
+        withoutOpticalCorrection,
+        withAdditionalInlinePadding,
+    } = options;
+
+    const token = resolveSpecToken(spacingScale, spacing, offset);
+
+    return _cs(
+        spacingTokenToClassName[token],
+        ...modes.map((mode) => {
+            if (mode === 'padding-inline') {
+                return withAdditionalInlinePadding
+                    ? specs.spacingPaddingInlineAdditional
+                    : specs.spacingPaddingInline;
+            }
+            if (mode === 'padding-block') {
+                return withoutOpticalCorrection
+                    ? specs.spacingPaddingBlockPlain
+                    : specs.spacingPaddingBlock;
+            }
+            if (mode === 'row-gap') {
+                return withoutOpticalCorrection
+                    ? specs.spacingRowGapPlain
+                    : specs.spacingRowGap;
+            }
+            return specs.spacingColumnGap;
+        }),
+    );
+}
+
+export function getTextSizeClassName(
+    textSize: TextSizeType | undefined,
+    offset = 0,
+) {
+    if (textSize === undefined) {
+        return undefined;
+    }
+    return textSizeTokenToClassName[resolveSpecToken(textSizeScale, textSize, offset)];
+}
+
+export function getBackgroundColorClassName(
+    backgroundColor: BackgroundColorType | undefined,
+) {
+    if (backgroundColor === undefined) {
+        return undefined;
+    }
+    return backgroundColorToClassName[backgroundColor];
+}
+
+export function getBorderRadiusClassName(
+    borderRadius: BorderRadiusType | undefined,
+    offset = 0,
+) {
+    if (borderRadius === undefined) {
+        return undefined;
+    }
+    return borderRadiusTokenToClassName[resolveSpecToken(borderRadiusScale, borderRadius, offset)];
+}
+
+export function getBoxShadowClassName(
+    boxShadow: BoxShadowType | undefined,
+    offset = 0,
+) {
+    if (boxShadow === undefined) {
+        return undefined;
+    }
+    return boxShadowTokenToClassName[resolveSpecToken(boxShadowScale, boxShadow, offset)];
+}
+
 export function getOpticallyCorrectedSpacingValue(value: string, mode: SpacingMode) {
     // Horizontal padding seems a bit imbalanced
     // due to the gap from the line height in vertical padding
     if (mode === 'padding-block' || mode === 'row-gap') {
-        return `calc(${value} + (1rem / var(--go-ui-optical-correction-factor) - 1rem))`;
+        return `calc(${value} + var(--go-ui-spacing-optical-correction))`;
     }
 
     return value;
@@ -41,30 +252,11 @@ export function getSpacingValue(
         'var(--go-ui-spacing-5xl)',
     ] as const;
 
-    const spacingTypeToStartIndexMap: Record<SpacingType, number> = {
-        none: 0,
-        '5xs': 1,
-        '4xs': 2,
-        '3xs': 3,
-        '2xs': 4,
-        xs: 5,
-        sm: 6,
-        md: 7,
-        lg: 8,
-        xl: 9,
-        '2xl': 10,
-        '3xl': 11,
-        '4xl': 12,
-        '5xl': 13,
-    };
-
     const startIndex = bound(
-        spacingTypeToStartIndexMap[spacing] + offset,
+        spacingScale.indexOf(spacing) + offset,
         0,
         spacingTokens.length - 1,
     );
 
-    const spacingValue = spacingTokens[startIndex];
-
-    return spacingValue;
+    return spacingTokens[startIndex];
 }
diff --git a/packages/ui/stylelint.config.js b/packages/ui/stylelint.config.js
index 32704b367d..4d6fbbd6f2 100644
--- a/packages/ui/stylelint.config.js
+++ b/packages/ui/stylelint.config.js
@@ -20,7 +20,28 @@ const config  = {
                 ignorePseudoClasses: ['global'],
             },
         ],
+        // Design-token adherence gate: components must route colour through
+        // the --go-ui-color-* tokens, never raw hex. index.css (the token
+        // source of truth) is exempted in the override below.
+        'color-no-hex': true,
+        // Raw px is a token-bypass too; surfaced as a warning to ratchet to
+        // error once the remaining offenders are tokenised (see GO_UI_AUDIT).
+        'unit-disallowed-list': [
+            ['px'],
+            { severity: 'warning' },
+        ],
     },
+    overrides: [
+        {
+            // index.css defines the token scales, so raw hex/px values are
+            // expected and allowed there.
+            files: ['src/index.css'],
+            rules: {
+                'color-no-hex': null,
+                'unit-disallowed-list': null,
+            },
+        },
+    ],
 };
 
 export default config;
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 4d5ba08e6e..b76b79f465 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -38,6 +38,7 @@ export default defineConfig(({ mode }) => {
                         'src/**/*.{ts,tsx}',
                         { 'ignore': [
                             'src/**/*.test.{ts,tsx}',
+                            'src/setupTests.ts',
                             'src/**/*.d.ts',
                             'src/**/.json',
                         ]}
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
new file mode 100644
index 0000000000..820b86288e
--- /dev/null
+++ b/packages/ui/vitest.config.ts
@@ -0,0 +1,19 @@
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vitest/config';
+
+// Component test harness for @ifrc-go/ui.
+// JSX is transformed by Vite's esbuild (tsconfig `jsx: react-jsx`), so no
+// React plugin is needed; tsconfigPaths resolves the `#components/*` etc.
+// aliases. CSS is disabled — these are behaviour/accessibility tests, not
+// visual ones, so CSS-module class lookups resolving to undefined is fine.
+// `happy-dom` matches the environment the app package already uses.
+export default defineConfig({
+    plugins: [tsconfigPaths()],
+    test: {
+        environment: 'happy-dom',
+        globals: false,
+        setupFiles: ['./src/setupTests.ts'],
+        include: ['src/**/*.test.{ts,tsx}'],
+        css: false,
+    },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8eddf18a9c..edb30f71e1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,7 +154,7 @@ importers:
         version: 4.3.0(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
       '@vitest/coverage-v8':
         specifier: ^4.0.0
-        version: 4.1.2(vitest@4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@15.2.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3)))
+        version: 4.1.2(vitest@4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@29.1.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3)))
       autoprefixer:
         specifier: ^10.4.27
         version: 10.4.27(postcss@8.5.8)
@@ -268,7 +268,7 @@ importers:
         version: 6.1.1(typescript@5.9.3)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
       vitest:
         specifier: ^4.0.0
-        version: 4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@15.2.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
+        version: 4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@29.1.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
       yargs:
         specifier: ^18.0.0
         version: 18.0.0
@@ -432,9 +432,6 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.2.4(react@19.2.4)
-      react-focus-on:
-        specifier: ^3.10.2
-        version: 3.10.2(@types/react@19.2.14)(react@19.2.4)
       sanitize-html:
         specifier: ^2.17.2
         version: 2.17.2
@@ -448,6 +445,18 @@ importers:
       '@eslint/json':
         specifier: ^1.0.0
         version: 1.2.0
+      '@testing-library/dom':
+        specifier: ^10.4.1
+        version: 10.4.1
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/node':
         specifier: ^20.19.37
         version: 20.19.37
@@ -487,6 +496,9 @@ importers:
       eslint-plugin-import-newlines:
         specifier: ^1.4.1
         version: 1.4.1(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-jsdoc:
+        specifier: ^63.0.4
+        version: 63.0.4(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-jsx-a11y:
         specifier: ^6.10.2
         version: 6.10.2(eslint@9.39.4(jiti@2.6.1))
@@ -505,6 +517,9 @@ importers:
       glob:
         specifier: ^13.0.0
         version: 13.0.6
+      happy-dom:
+        specifier: ^20.0.0
+        version: 20.8.9
       postcss:
         specifier: ^8.5.8
         version: 8.5.8
@@ -548,14 +563,29 @@ importers:
         specifier: ^6.0.0
         version: 6.1.1(typescript@5.9.3)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
       vitest:
-        specifier: ^4.0.0
-        version: 4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@15.2.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
+        specifier: ^4.1.2
+        version: 4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@29.1.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
 
 packages:
 
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
+  '@asamuzakjp/css-color@5.1.11':
+    resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    resolution: {integrity: sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/generational-cache@1.0.1':
+    resolution: {integrity: sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
+
   '@ast-grep/napi-darwin-arm64@0.36.3':
     resolution: {integrity: sha512-uM0Hrm5gcHqaBL64ktmPBFMTorTlPKWsUfi0E2Cg09GJfeYWvZmicCqgd7qVtjURmQvFQdb4JSqHIkJvws6Uqw==}
     engines: {node: '>= 10'}
@@ -693,6 +723,10 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
+
   '@cacheable/memory@2.0.8':
     resolution: {integrity: sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==}
 
@@ -780,6 +814,13 @@ packages:
       '@csstools/css-parser-algorithms': ^4.0.0
       '@csstools/css-tokenizer': ^4.0.0
 
+  '@csstools/css-calc@3.2.1':
+    resolution: {integrity: sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
   '@csstools/css-color-parser@4.0.2':
     resolution: {integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==}
     engines: {node: '>=20.19.0'}
@@ -787,6 +828,13 @@ packages:
       '@csstools/css-parser-algorithms': ^4.0.0
       '@csstools/css-tokenizer': ^4.0.0
 
+  '@csstools/css-color-parser@4.1.7':
+    resolution: {integrity: sha512-CmjJFQTFQx/U/xNJhSjCQ0ilpesPmNQ8+eOUeM/+kDOVW33qsIjeOXc27vrQDdWVkf83ZSWwtg7kXSUvKDJ8cQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
   '@csstools/css-parser-algorithms@4.0.0':
     resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
     engines: {node: '>=20.19.0'}
@@ -801,6 +849,14 @@ packages:
       css-tree:
         optional: true
 
+  '@csstools/css-syntax-patches-for-csstree@1.1.5':
+    resolution: {integrity: sha512-oNjBvzLq2GPZtJphCjLqXow/cHySHSgtxvKZb7OqSZ/xHgw6NWNhfad+6AB9cLeVm6eA9d/qMll3JdEHjy6M+A==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
   '@csstools/css-tokenizer@4.0.0':
     resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
     engines: {node: '>=20.19.0'}
@@ -1094,6 +1150,14 @@ packages:
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
+  '@es-joy/jsdoccomment@0.87.0':
+    resolution: {integrity: sha512-mFXZloZMzuJZXSHUmAFu/pXTk0ZJTJBluuAkrvbzidpTN8W6F2bpRFuedSH+85kbdlRLJqc+gfN+kD3JOLJK5g==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@es-joy/resolve.exports@1.2.0':
+    resolution: {integrity: sha512-Q9hjxWI5xBM+qW2enxfe8wDKdFWMfd0Z29k5ZJnuBqD/CasY5Zryj09aCA6owbGATWz+39p5uIdaHXpopOcG8g==}
+    engines: {node: '>=10'}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -1594,6 +1658,15 @@ packages:
     resolution: {integrity: sha512-iH1B076HoAshH1mLpHMgwdGeTs0CYwL0SPMkGuSebZrwBp16v415e9NZXg2jtrqPVQjf6IANe2Vtlr5KswtcZQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@exodus/bytes@1.15.1':
+    resolution: {integrity: sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
   '@fast-csv/format@4.3.5':
     resolution: {integrity: sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==}
 
@@ -2310,6 +2383,10 @@ packages:
     peerDependencies:
       react: ^16.14.0 || 17.x || 18.x || 19.x
 
+  '@sindresorhus/base62@1.0.0':
+    resolution: {integrity: sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA==}
+    engines: {node: '>=18'}
+
   '@sindresorhus/merge-streams@4.0.0':
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
@@ -2733,16 +2810,45 @@ packages:
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
 
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
   '@testing-library/jest-dom@6.5.0':
     resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@testing-library/user-event@14.5.2':
     resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@tinymce/tinymce-react@6.3.0':
     resolution: {integrity: sha512-E++xnn0XzDzpKr40jno2Kj7umfAE6XfINZULEBBeNjTMvbACWzA6CjiR6V8eTDc9yVmdVhIPqVzV4PqD5TZ/4g==}
     peerDependencies:
@@ -2835,6 +2941,9 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
   '@types/file-saver@2.0.7':
     resolution: {integrity: sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==}
 
@@ -2939,6 +3048,10 @@ packages:
     resolution: {integrity: sha512-O9CjxypDT89fbHxRfETNoAnHj/i6IpRK0CvbVN3qibxlLdo5p5hcLmUuCCrHMpxiWSwKyI8mCP7qRNYuOJ0Uww==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/types@8.61.1':
+    resolution: {integrity: sha512-G+CRlPqLv7Bz1IZVs03x5K59F1veqL0EJUROAdGhKsEq8qOiRiZbI+HUojPq5l0fEGOKModD9br6lObhB8zkoA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/typescript-estree@8.58.0':
     resolution: {integrity: sha512-7vv5UWbHqew/dvs+D3e1RvLv1v2eeZ9txRHPnEEBUgSNLx5ghdzjHa0sgLWYVKssH+lYmV0JaWdoubo0ncGYLA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3142,32 +3255,11 @@ packages:
   '@vue/shared@3.5.31':
     resolution: {integrity: sha512-nBxuiuS9Lj5bPkPbWogPUnjxxWpkRniX7e5UBQDWl6Fsf4roq9wwV+cR7ezQ4zXswNvPIlsdj1slcLB7XCsRAw==}
 
-  abab@2.0.6:
-    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
-    deprecated: Use your platform's native atob() and btoa() methods instead
-
-  acorn-globals@4.3.4:
-    resolution: {integrity: sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==}
-
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-walk@6.2.0:
-    resolution: {integrity: sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==}
-    engines: {node: '>=0.4.0'}
-
-  acorn@6.4.2:
-    resolution: {integrity: sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
-  acorn@7.4.1:
-    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   acorn@8.16.0:
     resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
     engines: {node: '>=0.4.0'}
@@ -3266,16 +3358,16 @@ packages:
     resolution: {integrity: sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==}
     engines: {node: '>= 10'}
 
+  are-docs-informative@0.0.2:
+    resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
+    engines: {node: '>=14'}
+
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-hidden@1.2.6:
-    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
-    engines: {node: '>=10'}
-
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -3287,9 +3379,6 @@ packages:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
 
-  array-equal@1.0.2:
-    resolution: {integrity: sha512-gUHx76KtnhEgB3HOuFYiCm3FIdEs6ocM2asHvNTkfu/Y09qQVrrVVaOKENmS2KkSaGoxgXNqC+ZVtR/n0MOkSA==}
-
   array-includes@3.1.9:
     resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
     engines: {node: '>= 0.4'}
@@ -3641,6 +3730,9 @@ packages:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   big-integer@1.6.52:
     resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
     engines: {node: '>=0.6'}
@@ -3675,9 +3767,6 @@ packages:
   browser-assert@1.2.1:
     resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==}
 
-  browser-process-hrtime@1.0.0:
-    resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
-
   browserslist@4.28.2:
     resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -3862,6 +3951,10 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comment-parser@1.4.7:
+    resolution: {integrity: sha512-0h+uSNtQGW3D98eQt3jJ8L06Fves8hncB4V/PKdw/Qb8Hnk19VaKuTr55UNRYiSoVa7WwrFls+rh3ux9agmkeQ==}
+    engines: {node: '>= 12.0.0'}
+
   compare-versions@6.1.1:
     resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
 
@@ -3982,16 +4075,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  cssom@0.3.8:
-    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
-
-  cssom@0.4.4:
-    resolution: {integrity: sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==}
-
-  cssstyle@2.3.0:
-    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
-    engines: {node: '>=8'}
-
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -4008,8 +4091,9 @@ packages:
     resolution: {integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==}
     engines: {node: '>=0.10'}
 
-  data-urls@1.1.0:
-    resolution: {integrity: sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==}
+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
@@ -4054,6 +4138,9 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
@@ -4112,9 +4199,6 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
-  detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-
   diff-match-patch@1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
 
@@ -4146,10 +4230,6 @@ packages:
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
-  domexception@1.0.1:
-    resolution: {integrity: sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==}
-    deprecated: Use your platform's native DOMException instead
-
   domhandler@5.0.3:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
@@ -4219,6 +4299,10 @@ packages:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
 
+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -4300,11 +4384,6 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  escodegen@1.14.3:
-    resolution: {integrity: sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==}
-    engines: {node: '>=4.0'}
-    hasBin: true
-
   eslint-config-airbnb-base@15.0.0:
     resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -4388,6 +4467,12 @@ packages:
       '@typescript-eslint/parser':
         optional: true
 
+  eslint-plugin-jsdoc@63.0.4:
+    resolution: {integrity: sha512-CzfD5nlKm91L0b4DQq47ERIlL4s4cK5+iQJMI99MDvVWLz+SkwUSGYcIr8ZYsyRw2gQ2MSKsE2StbT1CctdG0A==}
+    engines: {node: ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
+
   eslint-plugin-jsx-a11y@6.10.2:
     resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
     engines: {node: '>=4.0'}
@@ -4452,6 +4537,10 @@ packages:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  espree@11.2.0:
+    resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -4465,10 +4554,6 @@ packages:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
 
-  estraverse@4.3.0:
-    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
-    engines: {node: '>=4.0'}
-
   estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -4591,10 +4676,6 @@ packages:
   flatted@3.4.2:
     resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
 
-  focus-lock@1.3.6:
-    resolution: {integrity: sha512-Ik/6OCk9RQQ0T5Xw+hKNLWrjSMtv51dD4GRmJjbD5a58TIEpI5a5iXagKVl3Z5UuyslMCA8Xwnu76jQob62Yhg==}
-    engines: {node: '>=10'}
-
   follow-redirects@1.15.11:
     resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
     engines: {node: '>=4.0'}
@@ -4696,10 +4777,6 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
-  get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
-
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -4862,8 +4939,12 @@ packages:
   hookified@2.1.1:
     resolution: {integrity: sha512-AHb76R16GB5EsPBE2J7Ko5kiEyXwviB9P5SMrAKcuAu4vJPZttViAbj9+tZeaQE5zjDme+1vcHP78Yj/WoAveA==}
 
-  html-encoding-sniffer@1.0.2:
-    resolution: {integrity: sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==}
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  html-entities@2.6.0:
+    resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
 
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
@@ -4951,10 +5032,6 @@ packages:
   invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
 
-  ip-regex@2.1.0:
-    resolution: {integrity: sha512-58yWmlHpp7VYfcdTwMTvwMmqx/Elfxjd9RXTDyMsbL7lLWmhMylLEqiYVLKuLzOZqVgiWXD9MfR62Vv89VRxkw==}
-    engines: {node: '>=4'}
-
   is-arguments@1.2.0:
     resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
     engines: {node: '>= 0.4'}
@@ -5075,6 +5152,9 @@ packages:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -5192,11 +5272,15 @@ packages:
     resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
     engines: {node: '>=12.0.0'}
 
-  jsdom@15.2.1:
-    resolution: {integrity: sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g==}
-    engines: {node: '>=8'}
+  jsdoc-type-pratt-parser@7.2.0:
+    resolution: {integrity: sha512-dh140MMgjyg3JhJZY/+iEzW+NO5xR2gpbDFKHqotCmexElVntw7GjWjt511+C/Ef02RU5TKYrJo/Xlzk+OLaTw==}
+    engines: {node: '>=20.0.0'}
+
+  jsdom@29.1.1:
+    resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
     peerDependencies:
-      canvas: ^2.5.0
+      canvas: ^3.0.0
     peerDependenciesMeta:
       canvas:
         optional: true
@@ -5305,10 +5389,6 @@ packages:
     resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
     engines: {node: '>= 0.6.3'}
 
-  levn@0.3.0:
-    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
-    engines: {node: '>= 0.8.0'}
-
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -5450,9 +5530,6 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  lodash.sortby@4.7.0:
-    resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
-
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
@@ -5492,6 +5569,10 @@ packages:
     resolution: {integrity: sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==}
     engines: {node: 20 || >=22}
 
+  lru-cache@11.5.1:
+    resolution: {integrity: sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==}
+    engines: {node: 20 || >=22}
+
   lru-cache@4.1.5:
     resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
 
@@ -5675,9 +5756,6 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
-  nwsapi@2.2.23:
-    resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
-
   oauth-sign@0.9.0:
     resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
 
@@ -5685,6 +5763,9 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  object-deep-merge@2.0.1:
+    resolution: {integrity: sha512-aKttDKcU3pyZqKcCkDhsMn70WmZFG2JGDQLP9EcLyTSIFQRCPWLAmBZRLJnrVUrhPG1jETEEbfdgbNtJf1LyMg==}
+
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -5739,10 +5820,6 @@ packages:
     resolution: {integrity: sha512-pMsA8GrMQKtNOPPjKnJbDotA2UpKsIcTHecMw2Bl3M/2eWTVs8zAYBm/cgaE9Qz5GrcVCDIru9GQX/P9vxtUFg==}
     hasBin: true
 
-  optionator@0.8.3:
-    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
-    engines: {node: '>= 0.8.0'}
-
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -5813,6 +5890,9 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-imports-exports@0.2.4:
+    resolution: {integrity: sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==}
+
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -5820,8 +5900,11 @@ packages:
   parse-srcset@1.0.2:
     resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
 
-  parse5@5.1.0:
-    resolution: {integrity: sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==}
+  parse-statements@1.0.11:
+    resolution: {integrity: sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==}
+
+  parse5@8.0.1:
+    resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
 
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
@@ -5895,9 +5978,6 @@ packages:
   pkg-types@2.3.0:
     resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
-  pn@1.1.0:
-    resolution: {integrity: sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==}
-
   polished@4.3.1:
     resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
     engines: {node: '>=10'}
@@ -6117,10 +6197,6 @@ packages:
     resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
     engines: {node: '>=20'}
 
-  prelude-ls@1.1.2:
-    resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
-    engines: {node: '>= 0.8.0'}
-
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -6193,11 +6269,6 @@ packages:
   quickselect@2.0.0:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
 
-  react-clientside-effect@1.2.8:
-    resolution: {integrity: sha512-ma2FePH0z3px2+WOu6h+YycZcEvFmmxIlAb62cF52bG86eMySciO/EQZeQMXd07kPCYB0a1dWDT5J+KE9mCDUw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-
   react-confetti@6.4.0:
     resolution: {integrity: sha512-5MdGUcqxrTU26I2EU7ltkWPwxvucQTuqMm8dUz72z2YMqTD6s9vMcDUysk7n9jnC+lXuCPeJJ7Knf98VEYE9Rg==}
     engines: {node: '>=16'}
@@ -6218,51 +6289,12 @@ packages:
     peerDependencies:
       react: ^19.2.4
 
-  react-focus-lock@2.13.7:
-    resolution: {integrity: sha512-20lpZHEQrXPb+pp1tzd4ULL6DyO5D2KnR0G69tTDdydrmNhU7pdFmbQUYVyHUgp+xN29IuFR0PVuhOmvaZL9Og==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-focus-on@3.10.2:
-    resolution: {integrity: sha512-Ytdx2dh6yoCc2HI4Y7u5bI1xF1oeeRud52v8zQdGsyxyVC5W/dwcgQGp+CCpoLGQegwKHybH8diVj+Qn23y+hA==}
-    engines: {node: '>=8.5.0'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-remove-scroll-bar@2.3.8:
-    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.7.2:
-    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-router-dom@7.14.0:
     resolution: {integrity: sha512-2G3ajSVSZMEtmTjIklRWlNvo8wICEpLihfD/0YMDxbWK2UyP5EGfnoIn9AIQGnF3G/FX0MRbHXdFcD+rL1ZreQ==}
     engines: {node: '>=20.0.0'}
@@ -6280,16 +6312,6 @@ packages:
       react-dom:
         optional: true
 
-  react-style-singleton@2.2.3:
-    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react@19.2.4:
     resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
@@ -6355,19 +6377,6 @@ packages:
     resolution: {integrity: sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==}
     engines: {node: '>=0.10.0'}
 
-  request-promise-core@1.1.4:
-    resolution: {integrity: sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==}
-    engines: {node: '>=0.10.0'}
-    peerDependencies:
-      request: ^2.34
-
-  request-promise-native@1.0.9:
-    resolution: {integrity: sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==}
-    engines: {node: '>=0.12.0'}
-    deprecated: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
-    peerDependencies:
-      request: ^2.34
-
   request@2.88.2:
     resolution: {integrity: sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==}
     engines: {node: '>= 6'}
@@ -6377,6 +6386,10 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  reserved-identifiers@1.2.0:
+    resolution: {integrity: sha512-yE7KUfFvaBFzGPs5H3Ops1RevfUEsDc5Iz65rOwWg4lE8HJSYtle77uul3+573457oHvBKuHYDl/xqUkKpEEdw==}
+    engines: {node: '>=18'}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -6496,14 +6509,14 @@ packages:
   sanitize.css@13.0.0:
     resolution: {integrity: sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==}
 
-  saxes@3.1.11:
-    resolution: {integrity: sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==}
-    engines: {node: '>=8'}
-
   saxes@5.0.1:
     resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
     engines: {node: '>=10'}
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -6521,6 +6534,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.8.4:
+    resolution: {integrity: sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   set-cookie-parser@2.7.2:
     resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
 
@@ -6630,6 +6648,15 @@ packages:
   spawndamnit@3.0.1:
     resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
 
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@4.0.0:
+    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
+
+  spdx-license-ids@3.0.23:
+    resolution: {integrity: sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==}
+
   split@0.3.1:
     resolution: {integrity: sha512-hCHXkQDs1HFKRsrT9EutGT1hmjS1FW1Aei8dk/CxrT7mslcMtAxbiv8LYA/AYDvjB6h9rSXgW8zAZwg20tKMTw==}
 
@@ -6655,10 +6682,6 @@ packages:
   std-env@4.0.0:
     resolution: {integrity: sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==}
 
-  stealthy-require@1.1.1:
-    resolution: {integrity: sha512-ZnWpYnYugiOVEY5GkcuJK1io5V8QmNYChG62gSit9pQVGErXtrKuPC55ITaVSukmMta5qpMU7vqLt2Lnni4f/g==}
-    engines: {node: '>=0.10.0'}
-
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -6904,6 +6927,13 @@ packages:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
+  tldts-core@7.4.3:
+    resolution: {integrity: sha512-27ep5H9PzdBrNd5OFM/j3WCU8F3kPwM9D0BOaOf7uYfxMJfyr0K5Tjj69Gri+sZlh2WXd5buIm47NuPF29CDiw==}
+
+  tldts@7.4.3:
+    resolution: {integrity: sha512-A3BDQBeeukYPzB4QdQ1DtdlUmp4x2OCH8n5UVhEWbyANxNep8GavottKzd1xYKFJKjUgMyPT7EzOfnBO55s8Sg==}
+    hasBin: true
+
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -6920,16 +6950,21 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  to-valid-identifier@1.0.0:
+    resolution: {integrity: sha512-41wJyvKep3yT2tyPqX/4blcfybknGB4D+oETKLs7Q76UiPqRpUJK3hr1nxelyYO0PHKVzJwlu0aCeEAsGI6rpw==}
+    engines: {node: '>=20'}
+
   tough-cookie@2.5.0:
     resolution: {integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==}
     engines: {node: '>=0.8'}
 
-  tough-cookie@3.0.1:
-    resolution: {integrity: sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==}
-    engines: {node: '>=6'}
+  tough-cookie@6.0.1:
+    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
+    engines: {node: '>=16'}
 
-  tr46@1.0.1:
-    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
 
   traverse@0.3.9:
     resolution: {integrity: sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==}
@@ -6989,10 +7024,6 @@ packages:
   tweetnacl@0.14.5:
     resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
 
-  type-check@0.3.2:
-    resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
-    engines: {node: '>= 0.8.0'}
-
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -7050,6 +7081,10 @@ packages:
     resolution: {integrity: sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==}
     engines: {node: '>=14.0'}
 
+  undici@7.28.0:
+    resolution: {integrity: sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==}
+    engines: {node: '>=20.18.1'}
+
   unicorn-magic@0.3.0:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
@@ -7088,26 +7123,6 @@ packages:
   url-parse-as-address@1.0.0:
     resolution: {integrity: sha512-1WJ8YX1Kcec9wgxy8d/ATzGP1ayO6BRnd3iB6NlM+7cOnn6U8p5PKppRTCPLobh3CSdJ4d0TdPjopzyU2KcVFw==}
 
-  use-callback-ref@1.3.3:
-    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-sidecar@1.1.3:
-    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -7325,36 +7340,32 @@ packages:
   vt-pbf@3.1.3:
     resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
 
-  w3c-hr-time@1.0.2:
-    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
-    deprecated: Use your platform's native performance.now() and performance.timeOrigin.
-
-  w3c-xmlserializer@1.1.2:
-    resolution: {integrity: sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==}
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
 
   walk-up-path@4.0.0:
     resolution: {integrity: sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A==}
     engines: {node: 20 || >=22}
 
-  webidl-conversions@4.0.2:
-    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
 
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
-  whatwg-encoding@1.0.5:
-    resolution: {integrity: sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==}
-    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
-
-  whatwg-mimetype@2.3.0:
-    resolution: {integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==}
-
   whatwg-mimetype@3.0.0:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
 
-  whatwg-url@7.1.0:
-    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
@@ -7424,18 +7435,6 @@ packages:
     resolution: {integrity: sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  ws@7.5.10:
-    resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==}
-    engines: {node: '>=8.3.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: ^5.0.2
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-
   ws@8.20.0:
     resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
     engines: {node: '>=10.0.0'}
@@ -7457,8 +7456,9 @@ packages:
     engines: {node: '>=0.8'}
     hasBin: true
 
-  xml-name-validator@3.0.0:
-    resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==}
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
 
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
@@ -7514,6 +7514,30 @@ snapshots:
 
   '@adobe/css-tools@4.4.4': {}
 
+  '@asamuzakjp/css-color@5.1.11':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.7(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+    optional: true
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+    optional: true
+
+  '@asamuzakjp/generational-cache@1.0.1':
+    optional: true
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    optional: true
+
   '@ast-grep/napi-darwin-arm64@0.36.3':
     optional: true
 
@@ -7661,6 +7685,11 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
+    optional: true
+
   '@cacheable/memory@2.0.8':
     dependencies:
       '@cacheable/utils': 2.4.1
@@ -7843,6 +7872,12 @@ snapshots:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
+  '@csstools/css-calc@3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+    optional: true
+
   '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/color-helpers': 6.0.2
@@ -7850,6 +7885,14 @@ snapshots:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
+  '@csstools/css-color-parser@4.1.7(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/color-helpers': 6.0.2
+      '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+    optional: true
+
   '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
@@ -7858,6 +7901,11 @@ snapshots:
     optionalDependencies:
       css-tree: 3.2.1
 
+  '@csstools/css-syntax-patches-for-csstree@1.1.5(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
+    optional: true
+
   '@csstools/css-tokenizer@4.0.0': {}
 
   '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
@@ -8173,6 +8221,16 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@es-joy/jsdoccomment@0.87.0':
+    dependencies:
+      '@types/estree': 1.0.9
+      '@typescript-eslint/types': 8.61.1
+      comment-parser: 1.4.7
+      esquery: 1.7.0
+      jsdoc-type-pratt-parser: 7.2.0
+
+  '@es-joy/resolve.exports@1.2.0': {}
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -8460,6 +8518,9 @@ snapshots:
       '@eslint/core': 1.1.1
       levn: 0.4.1
 
+  '@exodus/bytes@1.15.1':
+    optional: true
+
   '@fast-csv/format@4.3.5':
     dependencies:
       '@types/node': 14.18.63
@@ -9058,6 +9119,8 @@ snapshots:
       '@sentry/core': 10.47.0
       react: 19.2.4
 
+  '@sindresorhus/base62@1.0.0': {}
+
   '@sindresorhus/merge-streams@4.0.0': {}
 
   '@standard-schema/spec@1.1.0': {}
@@ -9513,6 +9576,17 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/runtime': 7.29.2
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
   '@testing-library/jest-dom@6.5.0':
     dependencies:
       '@adobe/css-tools': 4.4.4
@@ -9523,10 +9597,33 @@ snapshots:
       lodash: 4.18.1
       redent: 3.0.0
 
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@testing-library/dom': 10.4.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
     dependencies:
       '@testing-library/dom': 10.4.0
 
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
   '@tinymce/tinymce-react@6.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tinymce@7.9.2)':
     dependencies:
       prop-types: 15.8.1
@@ -9658,6 +9755,8 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@types/estree@1.0.9': {}
+
   '@types/file-saver@2.0.7': {}
 
   '@types/geojson@7946.0.16': {}
@@ -9774,6 +9873,8 @@ snapshots:
 
   '@typescript-eslint/types@8.58.0': {}
 
+  '@typescript-eslint/types@8.61.1': {}
+
   '@typescript-eslint/typescript-estree@8.58.0(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.58.0(typescript@5.9.3)
@@ -9880,7 +9981,7 @@ snapshots:
     transitivePeerDependencies:
       - '@swc/helpers'
 
-  '@vitest/coverage-v8@4.1.2(vitest@4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@15.2.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3)))':
+  '@vitest/coverage-v8@4.1.2(vitest@4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@29.1.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3)))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.1.2
@@ -9892,7 +9993,7 @@ snapshots:
       obug: 2.1.1
       std-env: 4.0.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@15.2.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
+      vitest: 4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@29.1.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
 
   '@vitest/expect@2.0.5':
     dependencies:
@@ -10012,28 +10113,10 @@ snapshots:
 
   '@vue/shared@3.5.31': {}
 
-  abab@2.0.6:
-    optional: true
-
-  acorn-globals@4.3.4:
-    dependencies:
-      acorn: 6.4.2
-      acorn-walk: 6.2.0
-    optional: true
-
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
 
-  acorn-walk@6.2.0:
-    optional: true
-
-  acorn@6.4.2:
-    optional: true
-
-  acorn@7.4.1:
-    optional: true
-
   acorn@8.16.0: {}
 
   adler-32@1.3.1: {}
@@ -10130,16 +10213,14 @@ snapshots:
       tar-stream: 2.2.0
       zip-stream: 4.1.1
 
+  are-docs-informative@0.0.2: {}
+
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
 
   argparse@2.0.1: {}
 
-  aria-hidden@1.2.6:
-    dependencies:
-      tslib: 2.8.1
-
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -10151,9 +10232,6 @@ snapshots:
       call-bound: 1.0.4
       is-array-buffer: 3.0.5
 
-  array-equal@1.0.2:
-    optional: true
-
   array-includes@3.1.9:
     dependencies:
       call-bind: 1.0.8
@@ -10816,6 +10894,11 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+    optional: true
+
   big-integer@1.6.52: {}
 
   binary@0.3.0:
@@ -10854,9 +10937,6 @@ snapshots:
 
   browser-assert@1.2.1: {}
 
-  browser-process-hrtime@1.0.0:
-    optional: true
-
   browserslist@4.28.2:
     dependencies:
       baseline-browser-mapping: 2.10.13
@@ -11032,6 +11112,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comment-parser@1.4.7: {}
+
   compare-versions@6.1.1: {}
 
   compress-commons@4.1.2:
@@ -11141,17 +11223,6 @@ snapshots:
 
   cssesc@3.0.0: {}
 
-  cssom@0.3.8:
-    optional: true
-
-  cssom@0.4.4:
-    optional: true
-
-  cssstyle@2.3.0:
-    dependencies:
-      cssom: 0.3.8
-    optional: true
-
   csstype@3.2.3: {}
 
   d3-array@1.2.4: {}
@@ -11166,11 +11237,12 @@ snapshots:
     dependencies:
       assert-plus: 1.0.0
 
-  data-urls@1.1.0:
+  data-urls@7.0.0:
     dependencies:
-      abab: 2.0.6
-      whatwg-mimetype: 2.3.0
-      whatwg-url: 7.1.0
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
     optional: true
 
   data-view-buffer@1.0.2:
@@ -11207,6 +11279,9 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decimal.js@10.6.0:
+    optional: true
+
   deep-eql@5.0.2: {}
 
   deep-is@0.1.4: {}
@@ -11251,8 +11326,6 @@ snapshots:
   detect-libc@2.1.2:
     optional: true
 
-  detect-node-es@1.1.0: {}
-
   diff-match-patch@1.0.5: {}
 
   diff@8.0.4: {}
@@ -11281,11 +11354,6 @@ snapshots:
 
   domelementtype@2.3.0: {}
 
-  domexception@1.0.1:
-    dependencies:
-      webidl-conversions: 4.0.2
-    optional: true
-
   domhandler@5.0.3:
     dependencies:
       domelementtype: 2.3.0
@@ -11356,6 +11424,9 @@ snapshots:
 
   entities@7.0.1: {}
 
+  entities@8.0.0:
+    optional: true
+
   env-paths@2.2.1: {}
 
   environment@1.1.0: {}
@@ -11567,16 +11638,6 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  escodegen@1.14.3:
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 4.3.0
-      esutils: 2.0.3
-      optionator: 0.8.3
-    optionalDependencies:
-      source-map: 0.6.1
-    optional: true
-
   eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       confusing-browser-globals: 1.0.11
@@ -11676,6 +11737,26 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
+  eslint-plugin-jsdoc@63.0.4(eslint@9.39.4(jiti@2.6.1)):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.87.0
+      '@es-joy/resolve.exports': 1.2.0
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.7
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.39.4(jiti@2.6.1)
+      espree: 11.2.0
+      esquery: 1.7.0
+      html-entities: 2.6.0
+      object-deep-merge: 2.0.1
+      parse-imports-exports: 0.2.4
+      semver: 7.8.4
+      spdx-expression-parse: 4.0.0
+      to-valid-identifier: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       aria-query: 5.3.2
@@ -11804,6 +11885,12 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.16.0)
       eslint-visitor-keys: 4.2.1
 
+  espree@11.2.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 5.0.1
+
   esprima@4.0.1: {}
 
   esquery@1.7.0:
@@ -11814,9 +11901,6 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  estraverse@4.3.0:
-    optional: true
-
   estraverse@5.3.0: {}
 
   estree-walker@2.0.2: {}
@@ -11935,10 +12019,6 @@ snapshots:
 
   flatted@3.4.2: {}
 
-  focus-lock@1.3.6:
-    dependencies:
-      tslib: 2.8.1
-
   follow-redirects@1.15.11: {}
 
   for-each@0.3.5:
@@ -12042,8 +12122,6 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
-  get-nonce@1.0.1: {}
-
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -12216,11 +12294,15 @@ snapshots:
 
   hookified@2.1.1: {}
 
-  html-encoding-sniffer@1.0.2:
+  html-encoding-sniffer@6.0.0:
     dependencies:
-      whatwg-encoding: 1.0.5
+      '@exodus/bytes': 1.15.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
     optional: true
 
+  html-entities@2.6.0: {}
+
   html-escaper@2.0.2: {}
 
   html-tags@5.1.0: {}
@@ -12310,9 +12392,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  ip-regex@2.1.0:
-    optional: true
-
   is-arguments@1.2.0:
     dependencies:
       call-bound: 1.0.4
@@ -12419,6 +12498,9 @@ snapshots:
 
   is-plain-object@5.0.0: {}
 
+  is-potential-custom-element-name@1.0.1:
+    optional: true
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -12533,37 +12615,33 @@ snapshots:
 
   jsdoc-type-pratt-parser@4.8.0: {}
 
-  jsdom@15.2.1:
-    dependencies:
-      abab: 2.0.6
-      acorn: 7.4.1
-      acorn-globals: 4.3.4
-      array-equal: 1.0.2
-      cssom: 0.4.4
-      cssstyle: 2.3.0
-      data-urls: 1.1.0
-      domexception: 1.0.1
-      escodegen: 1.14.3
-      html-encoding-sniffer: 1.0.2
-      nwsapi: 2.2.23
-      parse5: 5.1.0
-      pn: 1.1.0
-      request: 2.88.2
-      request-promise-native: 1.0.9(request@2.88.2)
-      saxes: 3.1.11
+  jsdoc-type-pratt-parser@7.2.0: {}
+
+  jsdom@29.1.1:
+    dependencies:
+      '@asamuzakjp/css-color': 5.1.11
+      '@asamuzakjp/dom-selector': 7.1.1
+      '@bramus/specificity': 2.4.2
+      '@csstools/css-syntax-patches-for-csstree': 1.1.5(css-tree@3.2.1)
+      '@exodus/bytes': 1.15.1
+      css-tree: 3.2.1
+      data-urls: 7.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.5.1
+      parse5: 8.0.1
+      saxes: 6.0.0
       symbol-tree: 3.2.4
-      tough-cookie: 3.0.1
-      w3c-hr-time: 1.0.2
-      w3c-xmlserializer: 1.1.2
-      webidl-conversions: 4.0.2
-      whatwg-encoding: 1.0.5
-      whatwg-mimetype: 2.3.0
-      whatwg-url: 7.1.0
-      ws: 7.5.10
-      xml-name-validator: 3.0.0
+      tough-cookie: 6.0.1
+      undici: 7.28.0
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+      xml-name-validator: 5.0.0
     transitivePeerDependencies:
-      - bufferutil
-      - utf-8-validate
+      - '@noble/hashes'
     optional: true
 
   jsesc@0.5.0: {}
@@ -12674,12 +12752,6 @@ snapshots:
     dependencies:
       readable-stream: 2.3.8
 
-  levn@0.3.0:
-    dependencies:
-      prelude-ls: 1.1.2
-      type-check: 0.3.2
-    optional: true
-
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -12797,9 +12869,6 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
-  lodash.sortby@4.7.0:
-    optional: true
-
   lodash.startcase@4.4.0: {}
 
   lodash.truncate@4.4.2: {}
@@ -12834,6 +12903,9 @@ snapshots:
 
   lru-cache@11.2.7: {}
 
+  lru-cache@11.5.1:
+    optional: true
+
   lru-cache@4.1.5:
     dependencies:
       pseudomap: 1.0.2
@@ -13014,13 +13086,12 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
-  nwsapi@2.2.23:
-    optional: true
-
   oauth-sign@0.9.0: {}
 
   object-assign@4.1.1: {}
 
+  object-deep-merge@2.0.1: {}
+
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -13099,16 +13170,6 @@ snapshots:
       undici: 5.29.0
       yargs-parser: 21.1.1
 
-  optionator@0.8.3:
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.3.0
-      prelude-ls: 1.1.2
-      type-check: 0.3.2
-      word-wrap: 1.2.5
-    optional: true
-
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -13222,6 +13283,10 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse-imports-exports@0.2.4:
+    dependencies:
+      parse-statements: 1.0.11
+
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -13231,7 +13296,11 @@ snapshots:
 
   parse-srcset@1.0.2: {}
 
-  parse5@5.1.0:
+  parse-statements@1.0.11: {}
+
+  parse5@8.0.1:
+    dependencies:
+      entities: 8.0.0
     optional: true
 
   path-browserify@1.0.1: {}
@@ -13291,9 +13360,6 @@ snapshots:
       exsolve: 1.0.8
       pathe: 2.0.3
 
-  pn@1.1.0:
-    optional: true
-
   polished@4.3.1:
     dependencies:
       '@babel/runtime': 7.29.2
@@ -13579,9 +13645,6 @@ snapshots:
 
   powershell-utils@0.1.0: {}
 
-  prelude-ls@1.1.2:
-    optional: true
-
   prelude-ls@1.2.1: {}
 
   prettier@2.8.8: {}
@@ -13634,11 +13697,6 @@ snapshots:
 
   quickselect@2.0.0: {}
 
-  react-clientside-effect@1.2.8(react@19.2.4):
-    dependencies:
-      '@babel/runtime': 7.29.2
-      react: 19.2.4
-
   react-confetti@6.4.0(react@19.2.4):
     dependencies:
       react: 19.2.4
@@ -13668,53 +13726,10 @@ snapshots:
       react: 19.2.4
       scheduler: 0.27.0
 
-  react-focus-lock@2.13.7(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      '@babel/runtime': 7.29.2
-      focus-lock: 1.3.6
-      prop-types: 15.8.1
-      react: 19.2.4
-      react-clientside-effect: 1.2.8(react@19.2.4)
-      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.4)
-      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  react-focus-on@3.10.2(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      aria-hidden: 1.2.6
-      react: 19.2.4
-      react-focus-lock: 2.13.7(@types/react@19.2.14)(react@19.2.4)
-      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
-      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
-      tslib: 2.8.1
-      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.4)
-      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
-      tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.4)
-      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.4)
-    optionalDependencies:
-      '@types/react': 19.2.14
-
   react-router-dom@7.14.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       react: 19.2.4
@@ -13729,14 +13744,6 @@ snapshots:
     optionalDependencies:
       react-dom: 19.2.4(react@19.2.4)
 
-  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      get-nonce: 1.0.1
-      react: 19.2.4
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.14
-
   react@19.2.4: {}
 
   read-yaml-file@1.1.0:
@@ -13831,20 +13838,6 @@ snapshots:
     dependencies:
       is-finite: 1.1.0
 
-  request-promise-core@1.1.4(request@2.88.2):
-    dependencies:
-      lodash: 4.18.1
-      request: 2.88.2
-    optional: true
-
-  request-promise-native@1.0.9(request@2.88.2):
-    dependencies:
-      request: 2.88.2
-      request-promise-core: 1.1.4(request@2.88.2)
-      stealthy-require: 1.1.1
-      tough-cookie: 2.5.0
-    optional: true
-
   request@2.88.2:
     dependencies:
       aws-sign2: 0.7.0
@@ -13870,6 +13863,8 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  reserved-identifiers@1.2.0: {}
+
   resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
@@ -14035,14 +14030,14 @@ snapshots:
 
   sanitize.css@13.0.0: {}
 
-  saxes@3.1.11:
+  saxes@5.0.1:
     dependencies:
       xmlchars: 2.2.0
-    optional: true
 
-  saxes@5.0.1:
+  saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
+    optional: true
 
   scheduler@0.27.0: {}
 
@@ -14054,6 +14049,8 @@ snapshots:
 
   semver@7.7.4: {}
 
+  semver@7.8.4: {}
+
   set-cookie-parser@2.7.2: {}
 
   set-function-length@1.2.2:
@@ -14167,6 +14164,15 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  spdx-exceptions@2.5.0: {}
+
+  spdx-expression-parse@4.0.0:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.23
+
+  spdx-license-ids@3.0.23: {}
+
   split@0.3.1:
     dependencies:
       through: 2.3.8
@@ -14195,9 +14201,6 @@ snapshots:
 
   std-env@4.0.0: {}
 
-  stealthy-require@1.1.1:
-    optional: true
-
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -14510,6 +14513,14 @@ snapshots:
 
   tinyspy@3.0.2: {}
 
+  tldts-core@7.4.3:
+    optional: true
+
+  tldts@7.4.3:
+    dependencies:
+      tldts-core: 7.4.3
+    optional: true
+
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
@@ -14522,19 +14533,22 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  to-valid-identifier@1.0.0:
+    dependencies:
+      '@sindresorhus/base62': 1.0.0
+      reserved-identifiers: 1.2.0
+
   tough-cookie@2.5.0:
     dependencies:
       psl: 1.15.0
       punycode: 2.3.1
 
-  tough-cookie@3.0.1:
+  tough-cookie@6.0.1:
     dependencies:
-      ip-regex: 2.1.0
-      psl: 1.15.0
-      punycode: 2.3.1
+      tldts: 7.4.3
     optional: true
 
-  tr46@1.0.1:
+  tr46@6.0.0:
     dependencies:
       punycode: 2.3.1
     optional: true
@@ -14587,11 +14601,6 @@ snapshots:
 
   tweetnacl@0.14.5: {}
 
-  type-check@0.3.2:
-    dependencies:
-      prelude-ls: 1.1.2
-    optional: true
-
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -14668,6 +14677,9 @@ snapshots:
     dependencies:
       '@fastify/busboy': 2.1.1
 
+  undici@7.28.0:
+    optional: true
+
   unicorn-magic@0.3.0: {}
 
   unicorn-magic@0.4.0: {}
@@ -14730,21 +14742,6 @@ snapshots:
 
   url-parse-as-address@1.0.0: {}
 
-  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      react: 19.2.4
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.14
-
-  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.4):
-    dependencies:
-      detect-node-es: 1.1.0
-      react: 19.2.4
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.14
-
   util-deprecate@1.0.2: {}
 
   util@0.12.5:
@@ -14890,7 +14887,7 @@ snapshots:
       tsx: 4.21.0
       yaml: 2.8.3
 
-  vitest@4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@15.2.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3)):
+  vitest@4.1.2(@types/node@20.19.37)(happy-dom@20.8.9)(jsdom@29.1.1)(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3)):
     dependencies:
       '@vitest/expect': 4.1.2
       '@vitest/mocker': 4.1.2(vite@6.4.1(@types/node@20.19.37)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.3))
@@ -14915,7 +14912,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.19.37
       happy-dom: 20.8.9
-      jsdom: 15.2.1
+      jsdom: 29.1.1
     transitivePeerDependencies:
       - msw
 
@@ -14927,40 +14924,30 @@ snapshots:
       '@mapbox/vector-tile': 1.3.1
       pbf: 3.3.0
 
-  w3c-hr-time@1.0.2:
+  w3c-xmlserializer@5.0.0:
     dependencies:
-      browser-process-hrtime: 1.0.0
-    optional: true
-
-  w3c-xmlserializer@1.1.2:
-    dependencies:
-      domexception: 1.0.1
-      webidl-conversions: 4.0.2
-      xml-name-validator: 3.0.0
+      xml-name-validator: 5.0.0
     optional: true
 
   walk-up-path@4.0.0: {}
 
-  webidl-conversions@4.0.2:
+  webidl-conversions@8.0.1:
     optional: true
 
   webpack-virtual-modules@0.6.2: {}
 
-  whatwg-encoding@1.0.5:
-    dependencies:
-      iconv-lite: 0.4.24
-    optional: true
+  whatwg-mimetype@3.0.0: {}
 
-  whatwg-mimetype@2.3.0:
+  whatwg-mimetype@5.0.0:
     optional: true
 
-  whatwg-mimetype@3.0.0: {}
-
-  whatwg-url@7.1.0:
+  whatwg-url@16.0.1:
     dependencies:
-      lodash.sortby: 4.7.0
-      tr46: 1.0.1
-      webidl-conversions: 4.0.2
+      '@exodus/bytes': 1.15.1
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
     optional: true
 
   which-boxed-primitive@1.1.1:
@@ -15057,9 +15044,6 @@ snapshots:
     dependencies:
       signal-exit: 4.1.0
 
-  ws@7.5.10:
-    optional: true
-
   ws@8.20.0: {}
 
   wsl-utils@0.3.1:
@@ -15077,7 +15061,7 @@ snapshots:
       wmf: 1.0.2
       word: 0.3.0
 
-  xml-name-validator@3.0.0:
+  xml-name-validator@5.0.0:
     optional: true
 
   xmlchars@2.2.0: {}