diff --git a/collaborating/developing.md b/collaborating/developing.md
index 8e2e6babc5..74398b416e 100644
--- a/collaborating/developing.md
+++ b/collaborating/developing.md
@@ -24,20 +24,26 @@ To begin, ensure you have network access. Then, you'll need the following
    gh repo clone IFRCGo/go-web-app #Github CLI
    ```
 
-2. Install the dependencies
+2. Initialize submodules
+
+   ```bash
+   git submodule update --init --recursive --remote
+   ```
+
+3. Install the dependencies
 
    ```bash
    pnpm install
    ```
 
-3. Create a `.env` file in the `app` directory and add variables from [env.ts](https://github.com/IFRCGo/go-web-app/blob/develop/app/env.ts). Any variables marked with `.optional()` are not mandatory for setup and can be skipped.
+4. Create a `.env` file in the `app` directory and add variables from [env.ts](https://github.com/IFRCGo/go-web-app/blob/develop/app/env.ts). Any variables marked with `.optional()` are not mandatory for setup and can be skipped.
 
    ```bash
    cd app
    touch .env
    ```
 
-4. Start the development server:
+5. Start the development server:
 
    ```bash
    pnpm start:app
@@ -46,7 +52,7 @@ To begin, ensure you have network access. Then, you'll need the following
 > \[!NOTE]\
 > To work on a specific development task, ensure you have the backend setup appropriately and configured properly.
 
-5. Create a new branch for your work.
+6. Create a new branch for your work.
    The stable branch for IFRC GO is `develop`, and all PRs for deployment should be merged into it.
 
    ```bash
@@ -60,7 +66,7 @@ To begin, ensure you have network access. Then, you'll need the following
    * Fix Branch: For bug fixes, create branches under `fix/issue-description`.
    * Chore Branch: For maintenance tasks, create branches under `chore/task-name`.
 
-6. Once you're happy with your changes, add and commit them to your branch.If your workflow requires changesets (e.g., when changes will impact versioning or are part of a release), create one before committing. Then push the branch to origin.
+7. Once you're happy with your changes, add and commit them to your branch. If your workflow requires changesets (e.g., when changes will impact versioning or are part of a release), create one before committing. Then push the branch to origin.
 
    ```bash
    # Stage all changes
@@ -81,7 +87,7 @@ To begin, ensure you have network access. Then, you'll need the following
 > \[!NOTE]\
 > Review the [Changesets documentation](./release.md#changesets) and the [versioning guidelines](./release.md#versioning-guidelines-for-ifrc-go-project) for more details on versioning and tracking changes.
 
-7. Create a Pull Request.
+8. Create a Pull Request.
    Please read the [Issues and Pull Requests](./issues-and-pull-requests.md) guide for further information.
 
 > \[!IMPORTANT]\
diff --git a/collaborating/repository-structure.md b/collaborating/repository-structure.md
index 5a4e943695..9da53c8a48 100644
--- a/collaborating/repository-structure.md
+++ b/collaborating/repository-structure.md
@@ -19,7 +19,7 @@ The [app](../app/) directory contains the main codebase for the web application
 * [app/generated/](../app/generated/) contains the API endpoint type definitions generated by [openapi-typescript](https://github.com/openapi-ts/openapi-typescript).
 
 * [app/scripts/](../app/scripts/) contains scripts executed as part of the project.
-  * [app/scripts/translate/](../app/scripts/translate/) contains scripts for synchronizing translations between the application code and the server.
+  * [app/scripts/translatte/](../app/scripts/translatte/) contains scripts for synchronizing translations between the application code and the translation server.
 
 * [app/src/](../app/src/) houses the core web application code.
   * [app/src/App/](../app/src/App/) contains the base application logic for IFRC GO, including authentication handling, routing, and React context setup.
@@ -56,4 +56,10 @@ The [packages/go-ui-storybook](../packages/go-ui-storybook/) directory contains
 
 The [nginx-serve](../nginx-serve) directory contains nginx config and helm charts to run the web application.
 
-> NOTE: We need to add more information later.
+### Submodules
+
+The repository uses the following git submodules:
+
+* [go-api/](../go-api/) contains the OpenAPI schema for the GO backend API. Used to generate TypeScript types via `openapi-typescript`.
+* [go-risk-module-api/](../go-risk-module-api/) contains the OpenAPI schema for the GO risk module API.
+* [cacheppuccino/](../cacheppuccino/) contains the OpenAPI schema for the cacheppuccino translation caching service.
diff --git a/collaborating/technology.md b/collaborating/technology.md
index 3f2e214b77..a29e24a5f9 100644
--- a/collaborating/technology.md
+++ b/collaborating/technology.md
@@ -18,8 +18,16 @@ The IFRC GO web application is built using [React](https://react.dev/) and [Vite
 * **Routing**
   * [React Router](https://www.npmjs.com/package/react-router-dom) for client-side routing
 
-* **Excel Exports**
+* **Rich Text Editing**
+  * [TinyMCE](https://www.tiny.cloud/) via [tinymce-react](https://www.npmjs.com/package/@tinymce/tinymce-react) for rich text input fields
+
+* **Business Intelligence**
+  * [powerbi-client](https://www.npmjs.com/package/powerbi-client) for embedding Power BI reports
+
+* **Excel and CSV I/O**
   * [exceljs](https://www.npmjs.com/package/exceljs) for generating and importing Excel files
+  * [xlsx](https://www.npmjs.com/package/xlsx) for reading Excel files
+  * [papaparse](https://www.npmjs.com/package/papaparse) for parsing CSV files
 
 * **Data Fetching**
   * [@togglecorp/toggle-request](https://www.npmjs.com/package/@togglecorp/toggle-request), a hooks-based request library
@@ -33,5 +41,9 @@ The IFRC GO web application is built using [React](https://react.dev/) and [Vite
   * [Playwright](https://playwright.dev/) for end-to-end testing
   * [Vitest](https://vitest.dev/) for unit testing
 
+* **Translation**
+  * [translatte](../app/scripts/translatte/) — custom CLI tooling for managing translation strings, generating migration files, and syncing with the translation server
+  * [cacheppuccino](../cacheppuccino/) — translation caching service (git submodule); provides an OpenAPI schema used to generate TypeScript types for translation API calls
+
 * **Versioning and Changelog**
   * [Changesets](https://github.com/changesets/changesets) for managing versioning and generating changelogs
diff --git a/collaborating/translation.md b/collaborating/translation.md
index de9d9bc73f..15366c563c 100644
--- a/collaborating/translation.md
+++ b/collaborating/translation.md
@@ -2,4 +2,65 @@
 
 The IFRC GO application supports the four official languages of the IFRC: English, French, Spanish, and Arabic.
 
-TODO: Add documentation regarding translations
+### Overview
+
+Translation strings are stored in `i18n.json` files co-located with each component or view (e.g. `app/src/views/Home/i18n.json`). These files are the source of truth for all translatable strings. A custom CLI tool called **translatte** (located at `app/scripts/translatte/`) manages the full lifecycle of translations: linting, generating migration files, and pushing strings to the translation server.
+
+At runtime the application fetches translations from the **cacheppuccino** service, a translation caching service whose endpoint is configured via the `APP_TRANSLATION_API_ENDPOINT` environment variable.
+
+### Adding or Changing Strings
+
+1. Edit the relevant `i18n.json` file alongside the component.
+2. Lint the translation files to catch duplicates or formatting errors:
+
+   ```bash
+   pnpm translatte lint ./src/**/i18n.json
+   ```
+
+3. Generate a migration file that captures the diff between the current strings and the last recorded state:
+
+   ```bash
+   pnpm translatte generate-migration ./src/translationMigrations ./src/**/i18n.json
+   ```
+
+   Or using the convenience script:
+
+   ```bash
+   pnpm translatte:generate
+   ```
+
+4. Commit the new migration file alongside your code changes.
+
+### Translatte CLI Reference
+
+All commands are run from within the `app/` workspace directory.
+
+| Command | Description |
+|---|---|
+| `translatte lint <TRANSLATION_FILE..>` | Lint `i18n.json` files for duplicated strings. Pass `--fix` to auto-fix. |
+| `translatte lint-migrations <MIGRATION_DIR_PATH>` | Lint migration files for diverging migrations. |
+| `translatte list-migrations <MIGRATION_FILE_PATH>` | List all migration files. |
+| `translatte generate-migration <MIGRATION_FILE_PATH> <TRANSLATION_FILE..>` | Generate a new migration file from current translation files. |
+| `translatte merge-migrations <MIGRATION_FILE_PATH> --from <file> --to <file>` | Merge a range of migration files into one. |
+| `translatte apply-migrations <MIGRATION_FILE_PATH> --source <file> --destination <file>` | Apply pending migrations to a strings JSON file. |
+| `translatte export-migration-to-excel <MIGRATION_FILE_PATH> <OUTPUT_DIR>` | Export a migration file to XLSX for external translators. |
+| `translatte push-strings-from-excel <IMPORT_FILE_PATH> --api-url <url> --auth-token <token>` | Push translated strings from an XLSX file to the GO API. |
+| `translatte push-strings-from-excel-to-ifrc <IMPORT_FILE_PATH> --api-url <url> --api-key <key> --application-id <id>` | Push translated strings from an XLSX file to the IFRC translation service. |
+| `translatte push-migrations-to-go <MIGRATION_DIR_PATH> --api-url <url> --auth-token <token>` | Push pending migrations directly to the GO API. |
+| `translatte push-migrations-to-ifrc <MIGRATION_DIR_PATH> --api-url <url> --api-key <key> --application-id <id>` | Push pending migrations to the IFRC translation service. |
+| `translatte export-server-strings <API_URL>` | Export current server strings to an XLSX file. |
+| `translatte clear-server-strings --api-url <url> --auth-token <token>` | Remove all existing strings from the server. |
+
+### Environment Variables
+
+| Variable | Required | Description |
+|---|---|---|
+| `APP_TRANSLATION_API_ENDPOINT` | Yes | Base URL for the cacheppuccino translation caching service. |
+
+### Translation Workflow (Deployment)
+
+1. Developer adds/changes strings and generates a migration file (`translatte generate-migration`).
+2. Migration file is committed and merged into `develop`.
+3. During deployment, migrations are applied to produce an updated strings JSON (`translatte apply-migrations`).
+4. The updated strings are pushed to the server (`translatte push-migrations-to-go` or `translatte push-migrations-to-ifrc`).
+5. Translators receive an XLSX export (`translatte export-migration-to-excel`), translate the new strings, and the translated file is pushed back (`translatte push-strings-from-excel-to-ifrc`).
diff --git a/packages/ui/package.json b/packages/ui/package.json
index fa41dca580..329e8d5961 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -56,12 +56,11 @@
     "dependencies": {
         "@ifrc-go/icons": "^2.0.1",
         "@togglecorp/fujs": "^2.1.1",
-        "jiti": "^2.5.1",
         "react-focus-on": "^3.9.1",
         "sanitize-html": "^2.11.0"
     },
     "peerDependencies": {
-        "@ifrc-go/icons": "^1.3.1",
+        "@ifrc-go/icons": "^2.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
@@ -91,9 +90,8 @@
         "postcss": "^8.5.3",
         "postcss-nested": "^7.0.2",
         "postcss-normalize": "^13.0.1",
+        "jiti": "^2.5.1",
         "postcss-preset-env": "^10.1.5",
-        "react-focus-on": "^3.9.1",
-        "sanitize-html": "^2.11.0",
         "stylelint": "^16.17.0",
         "stylelint-config-concentric": "^2.0.2",
         "stylelint-config-recommended": "^15.0.0",
diff --git a/packages/ui/src/components/ChartContainer/index.tsx b/packages/ui/src/components/ChartContainer/index.tsx
index 7e17d210ba..6b48e6a618 100644
--- a/packages/ui/src/components/ChartContainer/index.tsx
+++ b/packages/ui/src/components/ChartContainer/index.tsx
@@ -2,7 +2,7 @@ import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.module.css';
 
-interface Props {
+export interface Props {
     className?: string;
     children: React.ReactNode;
     chartData: {
diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx
index 4f7ee4a666..f6defa2e51 100644
--- a/packages/ui/src/components/Checkbox/index.tsx
+++ b/packages/ui/src/components/Checkbox/index.tsx
@@ -1,4 +1,7 @@
-import { useCallback } from 'react';
+import {
+    useCallback,
+    useId,
+} from 'react';
 import { _cs } from '@togglecorp/fujs';
 
 import InputError from '../InputError';
@@ -64,6 +67,7 @@ function Checkbox<const NAME>(props: Props<NAME>) {
         [name, onChange, invertedLogic],
     );
 
+    const inputId = useId();
     const checked = invertedLogic ? !value : value;
 
     const className = _cs(
@@ -77,12 +81,14 @@ function Checkbox<const NAME>(props: Props<NAME>) {
     );
 
     return (
-        <label // eslint-disable-line jsx-a11y/label-has-associated-control
+        <label
             className={className}
             title={tooltip}
+            htmlFor={inputId}
         >
             <div className={_cs(styles.checkmarkContainer, checkmarkContainerClassName)}>
                 <input
+                    id={inputId}
                     onChange={handleChange}
                     className={_cs(styles.input, inputClassName)}
                     type="checkbox"
diff --git a/packages/ui/src/components/DropdownMenu/index.tsx b/packages/ui/src/components/DropdownMenu/index.tsx
index 3b762438be..82afc5aae7 100644
--- a/packages/ui/src/components/DropdownMenu/index.tsx
+++ b/packages/ui/src/components/DropdownMenu/index.tsx
@@ -136,6 +136,8 @@ function DropdownMenu(props: Props) {
                 colorVariant={labelColorVariant}
                 withoutPadding={labelWithoutPadding}
                 spacing={labelSpacing}
+                aria-expanded={showDropdown}
+                aria-haspopup="menu"
                 after={hasAfterContent ? (
                     <>
                         {labelAfter}
@@ -159,6 +161,7 @@ function DropdownMenu(props: Props) {
                     )}
                     parentRef={buttonRef}
                     preferredWidth={preferredPopupWidth}
+                    role="menu"
                 >
                     {children}
                 </Popup>
diff --git a/packages/ui/src/components/Modal/index.tsx b/packages/ui/src/components/Modal/index.tsx
index a7148fb4b6..9b100c4c60 100644
--- a/packages/ui/src/components/Modal/index.tsx
+++ b/packages/ui/src/components/Modal/index.tsx
@@ -1,6 +1,7 @@
 import {
     useCallback,
     useEffect,
+    useId,
 } from 'react';
 import { FocusOn } from 'react-focus-on';
 import { CloseFillIcon } from '@ifrc-go/icons';
@@ -53,6 +54,7 @@ function Modal(props: Props) {
     } = props;
 
     const strings = useTranslation(i18n);
+    const headingId = useId();
 
     useEffect(
         () => {
@@ -80,6 +82,8 @@ function Modal(props: Props) {
         }
     }, [onClose, closeOnEscape]);
 
+    const { heading, ...restContainerProps } = containerProps;
+
     return (
         <Portal>
             <div className={_cs(styles.overlay, overlayClassName)}>
@@ -88,11 +92,14 @@ function Modal(props: Props) {
                     onClickOutside={handleClickOutside}
                     onEscapeKey={handleEscape}
                     gapMode="padding"
-                    // gapMode={null}
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby={heading ? headingId : undefined}
                 >
                     <Container
                         // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...containerProps}
+                        {...restContainerProps}
+                        heading={heading ? <span id={headingId}>{heading}</span> : undefined}
                         withPadding
                         withoutWrapInHeader
                         withoutWrapInFooter
diff --git a/packages/ui/src/components/Pager/index.tsx b/packages/ui/src/components/Pager/index.tsx
index cdd29336a6..9e346a5146 100644
--- a/packages/ui/src/components/Pager/index.tsx
+++ b/packages/ui/src/components/Pager/index.tsx
@@ -233,7 +233,7 @@ function Pager(props: Props) {
                 onClick={onActivePageChange}
                 disabled={activePage >= numPages || disabled}
                 className={styles.pageButton}
-                title={`${strings.rawButtonGoToPage} ${activePage - 1}`}
+                title={`${strings.rawButtonGoToPage} ${activePage + 1}`}
             >
                 <ChevronRightLineIcon className={styles.icon} />
             </RawButton>
diff --git a/packages/ui/src/components/Popup/index.tsx b/packages/ui/src/components/Popup/index.tsx
index 8874749507..085f546c99 100644
--- a/packages/ui/src/components/Popup/index.tsx
+++ b/packages/ui/src/components/Popup/index.tsx
@@ -12,6 +12,7 @@ export interface Props {
     parentRef: React.RefObject<HTMLElement | undefined>;
     children?: React.ReactNode;
     preferredWidth?: number;
+    role?: React.AriaRole;
 }
 
 function Popup(props: Props) {
@@ -22,6 +23,7 @@ function Popup(props: Props) {
         className,
         pointerClassName,
         preferredWidth,
+        role,
     } = props;
 
     const {
@@ -44,6 +46,7 @@ function Popup(props: Props) {
                     orientation.vertical === 'bottom' && styles.topOrientation,
                     className,
                 )}
+                role={role}
             >
                 {children}
             </div>
diff --git a/packages/ui/src/components/ProgressBar/index.tsx b/packages/ui/src/components/ProgressBar/index.tsx
index ccf2aa5a47..c82f861f27 100644
--- a/packages/ui/src/components/ProgressBar/index.tsx
+++ b/packages/ui/src/components/ProgressBar/index.tsx
@@ -77,6 +77,10 @@ function ProgressBar(props: Props) {
                     && colorVariantToClassName[colorVariant],
                 className,
             )}
+            role="progressbar"
+            aria-valuenow={percentage}
+            aria-valuemin={0}
+            aria-valuemax={100}
         >
             {(title || showPercentageInTitle) && (
                 <div className={styles.title}>
diff --git a/packages/ui/src/components/TabLayout/index.tsx b/packages/ui/src/components/TabLayout/index.tsx
index 186dbf54d8..533d2e2430 100644
--- a/packages/ui/src/components/TabLayout/index.tsx
+++ b/packages/ui/src/components/TabLayout/index.tsx
@@ -141,7 +141,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/Tabs/Tab/index.tsx b/packages/ui/src/components/Tabs/Tab/index.tsx
index 361b7cd986..9424e5915e 100644
--- a/packages/ui/src/components/Tabs/Tab/index.tsx
+++ b/packages/ui/src/components/Tabs/Tab/index.tsx
@@ -65,6 +65,8 @@ export default function Tab<NAME extends TabKey>(props: Props<NAME>) {
             name={name}
             disabled={disabled}
             type="button"
+            role="tab"
+            aria-selected={isActive}
         >
             <TabLayout
                 // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/packages/ui/src/components/Tooltip/index.tsx b/packages/ui/src/components/Tooltip/index.tsx
index 9b4882ab93..4928aad738 100644
--- a/packages/ui/src/components/Tooltip/index.tsx
+++ b/packages/ui/src/components/Tooltip/index.tsx
@@ -37,11 +37,11 @@ function Tooltip(props: Props) {
 
     useEffect(
         () => {
-            const handleMouseEnter = () => {
+            const handleShow = () => {
                 setShowPopup(true);
             };
 
-            const handleMouseOut = () => {
+            const handleHide = () => {
                 setShowPopup(false);
             };
 
@@ -60,13 +60,17 @@ function Tooltip(props: Props) {
             }
 
             parentRef.current = parentNode as HTMLElement;
-            parentNode.addEventListener('mouseover', handleMouseEnter);
-            parentNode.addEventListener('mouseout', handleMouseOut);
+            parentNode.addEventListener('mouseover', handleShow);
+            parentNode.addEventListener('mouseout', handleHide);
+            parentNode.addEventListener('focusin', handleShow);
+            parentNode.addEventListener('focusout', handleHide);
             setHasParentRef(true);
 
             return () => {
-                parentNode.removeEventListener('mouseover', handleMouseEnter);
-                parentNode.removeEventListener('mouseout', handleMouseOut);
+                parentNode.removeEventListener('mouseover', handleShow);
+                parentNode.removeEventListener('mouseout', handleHide);
+                parentNode.removeEventListener('focusin', handleShow);
+                parentNode.removeEventListener('focusout', handleHide);
             };
         },
         [],
@@ -86,6 +90,7 @@ function Tooltip(props: Props) {
                     parentRef={parentRef as React.RefObject<HTMLElement>}
                     pointerClassName={styles.pointer}
                     preferredWidth={preferredWidth}
+                    role="tooltip"
                 >
                     <Container
                         heading={title}
diff --git a/packages/ui/src/components/TopBanner/index.tsx b/packages/ui/src/components/TopBanner/index.tsx
index df9b18a656..05742b0468 100644
--- a/packages/ui/src/components/TopBanner/index.tsx
+++ b/packages/ui/src/components/TopBanner/index.tsx
@@ -3,7 +3,7 @@ import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.module.css';
 
-interface Props {
+export interface Props {
   className?: string;
   children?: React.ReactNode;
   variant: 'warning' | 'negative' | 'positive' | 'information';
diff --git a/packages/ui/src/hooks/useFloatPlacement.ts b/packages/ui/src/hooks/useFloatPlacement.ts
index e3d9db01cf..2550505b2f 100644
--- a/packages/ui/src/hooks/useFloatPlacement.ts
+++ b/packages/ui/src/hooks/useFloatPlacement.ts
@@ -9,10 +9,9 @@ import {
     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;
+// NOTE: ONE_REM, MIN_WIDTH, and VERTICAL_OFFSET are computed inside calculatePlacement
+// to avoid calling getComputedStyle at module scope (which crashes in SSR and produces
+// stale values if the root font-size changes at runtime).
 
 type Orientation = {
     vertical: 'top' | 'bottom';
@@ -72,6 +71,10 @@ function useFloatPlacement(
             return;
         }
 
+        const ONE_REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const MIN_WIDTH = 16 * ONE_REM;
+        const VERTICAL_OFFSET = 0.5 * ONE_REM;
+
         const parentBCR = parentRef.current.getBoundingClientRect();
         const {
             x: parentX,
diff --git a/packages/ui/src/hooks/useKeyboard.ts b/packages/ui/src/hooks/useKeyboard.ts
index d6a7b4448a..06be75ef92 100644
--- a/packages/ui/src/hooks/useKeyboard.ts
+++ b/packages/ui/src/hooks/useKeyboard.ts
@@ -10,8 +10,8 @@ enum Keys {
     Tab = 9,
     Esc = 27,
     Enter = 13,
-    Down = 38,
-    Up = 40,
+    Up = 38,
+    Down = 40,
     Backspace = 8,
 }
 
@@ -100,12 +100,12 @@ function useKeyboard<T, Q extends OptionKey>(
             } else if (keyCode === Keys.Up) {
                 e.stopPropagation();
                 e.preventDefault();
-                const newFocusedKey = getNewKey(myKey, 1, options, keySelector);
+                const newFocusedKey = getNewKey(myKey, -1, options, keySelector);
                 onFocusChange(newFocusedKey ? { key: newFocusedKey } : undefined);
             } else if (keyCode === Keys.Down) {
                 e.stopPropagation();
                 e.preventDefault();
-                const newFocusedKey = getNewKey(myKey, -1, options, keySelector);
+                const newFocusedKey = getNewKey(myKey, 1, options, keySelector);
                 onFocusChange(newFocusedKey ? { key: newFocusedKey } : undefined);
             }
         },
diff --git a/packages/ui/src/hooks/useSpacingToken.ts b/packages/ui/src/hooks/useSpacingToken.ts
index e0265be39b..d4f1691776 100644
--- a/packages/ui/src/hooks/useSpacingToken.ts
+++ b/packages/ui/src/hooks/useSpacingToken.ts
@@ -1,10 +1,9 @@
 import {
     useEffect,
-    useState,
+    useRef,
 } from 'react';
 import {
     isNotDefined,
-    randomString,
 } from '@togglecorp/fujs';
 
 import {
@@ -22,9 +21,41 @@ interface Props {
     withAdditionalInlinePadding?: boolean;
 }
 
-function useSpacingToken(props: Props) {
-    const [className] = useState(() => `spacing-token-${randomString()}`);
+// Shared style element and ref-count map to avoid injecting duplicate <style> tags
+// when multiple component instances use the same spacing parameters.
+let sharedStyleEl: HTMLStyleElement | null = null;
+const ruleRefCount = new Map<string, number>();
+
+function getOrCreateStyleEl(): HTMLStyleElement {
+    if (!sharedStyleEl || !sharedStyleEl.isConnected) {
+        sharedStyleEl = document.createElement('style');
+        document.head.appendChild(sharedStyleEl);
+    }
+    return sharedStyleEl;
+}
+
+function buildCssRule(
+    className: string,
+    spacing: SpacingType,
+    offset: number,
+    modes: SpacingMode[],
+    withoutOpticalCorrection: boolean | undefined,
+    withAdditionalInlinePadding: boolean | undefined,
+) {
+    const spacingValue = getSpacingValue(spacing, offset);
+    const declarations = 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('; ');
+    return `.${className} { ${declarations} }`;
+}
 
+function useSpacingToken(props: Props) {
     const {
         spacing = 'md',
         modes = ['padding-inline', 'padding-block'],
@@ -33,40 +64,62 @@ function useSpacingToken(props: Props) {
         withAdditionalInlinePadding,
     } = props;
 
+    // Build a deterministic key from the spacing parameters
+    const key = `${spacing}__${offset}__${modes.join(',')}__${!!withoutOpticalCorrection}__${!!withAdditionalInlinePadding}`;
+    // Use the key as the class name so identical params share the same rule
+    const className = `go-ui-st-${key.replace(/[^a-z0-9]/gi, '-')}`;
+    const classNameRef = useRef(className);
+    classNameRef.current = className;
+
     useEffect(
         () => {
             if (isNotDefined(spacing)) {
                 return undefined;
             }
 
-            const spacingValue = getSpacingValue(spacing, offset);
+            const currentClassName = classNameRef.current;
+            const currentCount = ruleRefCount.get(currentClassName) ?? 0;
 
-            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}`;
+            if (currentCount === 0) {
+                const styleEl = getOrCreateStyleEl();
+                if (styleEl.sheet) {
+                    const rule = buildCssRule(
+                        currentClassName,
+                        spacing,
+                        offset,
+                        modes,
+                        withoutOpticalCorrection,
+                        withAdditionalInlinePadding,
+                    );
+                    styleEl.sheet.insertRule(rule);
                 }
+            }
 
-                return `${mode}: ${getOpticallyCorrectedSpacingValue(spacingValue, mode)}`;
-            }).join('; ');
-
-            style.sheet.insertRule(`.${className} { ${rules} }`);
+            ruleRefCount.set(currentClassName, currentCount + 1);
 
             return () => {
-                style.remove();
+                const count = ruleRefCount.get(currentClassName) ?? 0;
+                const newCount = count - 1;
+                if (newCount <= 0) {
+                    ruleRefCount.delete(currentClassName);
+                    // Remove the rule from the shared sheet
+                    const styleEl = sharedStyleEl;
+                    if (styleEl?.sheet) {
+                        const { cssRules } = styleEl.sheet;
+                        for (let i = 0; i < cssRules.length; i += 1) {
+                            if (cssRules[i].cssText.startsWith(`.${currentClassName}`)) {
+                                styleEl.sheet.deleteRule(i);
+                                break;
+                            }
+                        }
+                    }
+                } else {
+                    ruleRefCount.set(currentClassName, newCount);
+                }
             };
         },
-        [spacing, modes, className, offset, withoutOpticalCorrection, withAdditionalInlinePadding],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [key],
     );
 
     return className;
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index 3b772df240..ab6635b38f 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -4,18 +4,18 @@
     --go-ui-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
     --go-ui-optical-correction-factor: 1.5;
-    --base-font-size: 0.875rem;
+    --go-ui-base-font-size: 0.875rem;
     --go-ui-font-size-export: 0.6875rem;
 
-    --go-ui-font-size-2xs: calc(var(--base-font-size) * 0.64);
-    --go-ui-font-size-xs: calc(var(--base-font-size) * 0.714);
-    --go-ui-font-size-sm: calc(var(--base-font-size) * 0.857);
-    --go-ui-font-size-md: var(--base-font-size);
-    --go-ui-font-size-lg: calc(var(--base-font-size) * 1.12857);
-    --go-ui-font-size-xl: calc(var(--base-font-size) * 1.4285);
-    --go-ui-font-size-2xl: calc(var(--base-font-size) * 1.7142);
-    --go-ui-font-size-3xl: calc(var(--base-font-size) * 2.1428);
-    --go-ui-font-size-4xl: calc(var(--base-font-size) * 2.7142);
+    --go-ui-font-size-2xs: calc(var(--go-ui-base-font-size) * 0.64);
+    --go-ui-font-size-xs: calc(var(--go-ui-base-font-size) * 0.714);
+    --go-ui-font-size-sm: calc(var(--go-ui-base-font-size) * 0.857);
+    --go-ui-font-size-md: var(--go-ui-base-font-size);
+    --go-ui-font-size-lg: calc(var(--go-ui-base-font-size) * 1.12857);
+    --go-ui-font-size-xl: calc(var(--go-ui-base-font-size) * 1.4285);
+    --go-ui-font-size-2xl: calc(var(--go-ui-base-font-size) * 1.7142);
+    --go-ui-font-size-3xl: calc(var(--go-ui-base-font-size) * 2.1428);
+    --go-ui-font-size-4xl: calc(var(--go-ui-base-font-size) * 2.7142);
 
     --go-ui-height-icon-multiplier: 1.33em;
 
@@ -36,7 +36,7 @@
     --go-ui-font-weight-normal: 400;
     --go-ui-font-weight-medium: 500;
     --go-ui-font-weight-semibold: 600;
-    --go-ui-font-weight-bold: 600;
+    --go-ui-font-weight-bold: 700;
 
     --go-ui-width-screen-sm: 640px;
     --go-ui-width-screen-md: 768px;
@@ -44,38 +44,38 @@
     --go-ui-width-screen-xl: 1280px;
     --go-ui-width-screen-2xl: 1536px;
 
-    --base-spacing: 0.03125rem;
-
-    --go-ui-spacing-5xs: calc(var(--base-spacing) * 3);
-    --go-ui-spacing-4xs: calc(var(--base-spacing) * 6);
-    --go-ui-spacing-3xs: calc(var(--base-spacing) * 10);
-    --go-ui-spacing-2xs: calc(var(--base-spacing) * 15);
-    --go-ui-spacing-xs: calc(var(--base-spacing) * 21);
-    --go-ui-spacing-sm: calc(var(--base-spacing) * 28);
-    --go-ui-spacing-md: calc(var(--base-spacing) * 36);
-    --go-ui-spacing-lg:  calc(var(--base-spacing) * 47);
-    --go-ui-spacing-xl:  calc(var(--base-spacing) * 62);
-    --go-ui-spacing-2xl: calc(var(--base-spacing) * 82);
-    --go-ui-spacing-3xl: calc(var(--base-spacing) * 110);
-    --go-ui-spacing-4xl: calc(var(--base-spacing) * 145);
-    --go-ui-spacing-5xl: calc(var(--base-spacing) * 195);
+    --go-ui-base-spacing: 0.03125rem;
+
+    --go-ui-spacing-5xs: calc(var(--go-ui-base-spacing) * 3);
+    --go-ui-spacing-4xs: calc(var(--go-ui-base-spacing) * 6);
+    --go-ui-spacing-3xs: calc(var(--go-ui-base-spacing) * 10);
+    --go-ui-spacing-2xs: calc(var(--go-ui-base-spacing) * 15);
+    --go-ui-spacing-xs: calc(var(--go-ui-base-spacing) * 21);
+    --go-ui-spacing-sm: calc(var(--go-ui-base-spacing) * 28);
+    --go-ui-spacing-md: calc(var(--go-ui-base-spacing) * 36);
+    --go-ui-spacing-lg:  calc(var(--go-ui-base-spacing) * 47);
+    --go-ui-spacing-xl:  calc(var(--go-ui-base-spacing) * 62);
+    --go-ui-spacing-2xl: calc(var(--go-ui-base-spacing) * 82);
+    --go-ui-spacing-3xl: calc(var(--go-ui-base-spacing) * 110);
+    --go-ui-spacing-4xl: calc(var(--go-ui-base-spacing) * 145);
+    --go-ui-spacing-5xl: calc(var(--go-ui-base-spacing) * 195);
 
     @media screen and (max-width: 40rem) {
         --base-spacing: 0.0277777rem;
     }
 
-    --go-ui-width-separator-sm: 1pt;
-    --go-ui-width-separator-md: 2pt;
-    --go-ui-width-separator-lg: 4pt;
-    --go-ui-width-separator-xl: 8pt;
+    --go-ui-width-separator-sm: 1px;
+    --go-ui-width-separator-md: 2px;
+    --go-ui-width-separator-lg: 4px;
+    --go-ui-width-separator-xl: 8px;
 
-    --go-ui-width-separator-thin: 1pt;
-    --go-ui-width-separator-small: 2pt;
-    --go-ui-width-separator-thick: 4pt;
-    --go-ui-width-separator-medium: 6pt;
-    --go-ui-width-separator-large: 8pt;
-    --go-ui-width-separator-dense: 12pt;
-    --go-ui-width-separator-extra-dense: 14pt;
+    --go-ui-width-separator-thin: 1px;
+    --go-ui-width-separator-small: 2px;
+    --go-ui-width-separator-thick: 4px;
+    --go-ui-width-separator-medium: 6px;
+    --go-ui-width-separator-large: 8px;
+    --go-ui-width-separator-dense: 12px;
+    --go-ui-width-separator-extra-dense: 14px;
 
     --go-ui-border-radius-none: 0;
     --go-ui-border-radius-sm: 0.125rem;
@@ -86,13 +86,13 @@
     --go-ui-border-radius-3xl: 1.5rem;
     --go-ui-border-radius-full: 100vh;
 
-    --go-ui-box-shadow-xs: 0 1pt 2pt rgb(0 0 0 / 0.2);
-    --go-ui-box-shadow-sm: 0 1pt 4pt rgb(0 0 0 / 0.2);
-    --go-ui-box-shadow-md: 0 1pt 5pt -2pt rgb(0 0 0 / 0.375);
-    --go-ui-box-shadow-lg: 0 2pt 8pt -4pt rgb(0 0 0 / 0.5);
-    --go-ui-box-shadow-xl: 0 3pt 16pt -6pt rgb(0 0 0 / 0.5);
-    --go-ui-box-shadow-2xl: 0 4pt 16pt -6pt rgb(0 0 0 / 1);
-    --go-ui-box-shadow-inner: inset 0 2pt 4pt 0 rgb(0 0 0 / 0.375);
+    --go-ui-box-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.2);
+    --go-ui-box-shadow-sm: 0 1px 4px rgb(0 0 0 / 0.2);
+    --go-ui-box-shadow-md: 0 1px 5px -2px rgb(0 0 0 / 0.375);
+    --go-ui-box-shadow-lg: 0 2px 8px -4px rgb(0 0 0 / 0.5);
+    --go-ui-box-shadow-xl: 0 3px 16px -6px rgb(0 0 0 / 0.5);
+    --go-ui-box-shadow-2xl: 0 4px 16px -6px rgb(0 0 0 / 1);
+    --go-ui-box-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.375);
     --go-ui-box-shadow-none: 0 0 #0000;
 
     --go-ui-duration-transition-fast: .1s;
@@ -226,8 +226,8 @@
 
     --go-ui-export-page-margin: 10mm 10mm 16mm 10mm;
 
-    --go-ui-width-scrollbar: 4pt;
+    --go-ui-width-scrollbar: 4px;
     --go-ui-color-scrollbar-foreground: rgba(0, 0, 0, .2);
     --go-ui-color-scrollbar-background: rgba(0, 0, 0, .01);
-    --go-ui-radius-scrollbar-border: 2pt;
+    --go-ui-radius-scrollbar-border: 2px;
 }
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index d8e6453f8b..7b40584df4 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -21,6 +21,7 @@ export { default as Button } from './components/Button';
 export type { Props as ButtonLayoutProps } from './components/ButtonLayout';
 export { default as ButtonLayout } from './components/ButtonLayout';
 export { default as ChartAxes } from './components/ChartAxes';
+export type { Props as ChartContainerProps } from './components/ChartContainer';
 export { default as ChartContainer } from './components/ChartContainer';
 export type { Props as CheckboxProps } from './components/Checkbox';
 export { default as Checkbox } from './components/Checkbox';
@@ -86,6 +87,7 @@ 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 LegendProps } from './components/Legend';
 export { default as Legend } from './components/Legend';
 export type{ Props as LegendItemProps } from './components/LegendItem';
 export { default as LegendItem } from './components/LegendItem';
@@ -179,11 +181,14 @@ export type { Props as TabsProps } from './components/Tabs';
 export { default as Tabs } from './components/Tabs';
 export type { Props as TabProps } from './components/Tabs/Tab';
 export { default as Tab } from './components/Tabs/Tab';
+export type { Props as TabListProps } from './components/TabListLayout';
 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 TextAreaProps } from './components/TextArea';
 export { default as TextArea } from './components/TextArea';
+export type { Props as TextBadgeProps } from './components/TextBadge';
+export { default as TextBadge } from './components/TextBadge';
 export type { Props as TextInputProps } from './components/TextInput';
 export { default as TextInput } from './components/TextInput';
 export type { Props as TextOutputProps } from './components/TextOutput';
@@ -193,6 +198,7 @@ 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 {
     BaseCell,
diff --git a/packages/ui/src/utils/common.ts b/packages/ui/src/utils/common.ts
index 4bce1c2342..76b40f9e91 100644
--- a/packages/ui/src/utils/common.ts
+++ b/packages/ui/src/utils/common.ts
@@ -355,7 +355,7 @@ function getMaximumFractionDigits(value: number) {
 }
 
 interface FormatNumberOptions {
-    currency?: boolean;
+    currency?: Intl.NumberFormatOptions['currency'];
     unit?: Intl.NumberFormatOptions['unit'];
     maximumFractionDigits?: Intl.NumberFormatOptions['maximumFractionDigits'];
     compact?: boolean;
@@ -403,7 +403,8 @@ export function formatNumber(
         formattingOptions.unit = unit;
         formattingOptions.unitDisplay = 'short';
     }
-    if (currency) {
+    if (isTruthyString(currency)) {
+        formattingOptions.currency = currency;
         formattingOptions.currencyDisplay = 'narrowSymbol';
         formattingOptions.style = 'currency';
     }
@@ -689,7 +690,7 @@ export function addNumMonthsToDate(
     }
 
     const dateSafe = new Date(date);
-    if (Number.isNaN(dateSafe)) {
+    if (Number.isNaN(dateSafe.getTime())) {
         return undefined;
     }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4badf690d..21b92d7ed2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -420,9 +420,6 @@ importers:
       '@togglecorp/fujs':
         specifier: ^2.1.1
         version: 2.2.0
-      jiti:
-        specifier: ^2.5.1
-        version: 2.5.1
       react:
         specifier: ^18.2.0
         version: 18.3.1
@@ -502,6 +499,9 @@ importers:
       glob:
         specifier: ^10.3.10
         version: 10.4.5
+      jiti:
+        specifier: ^2.5.1
+        version: 2.5.1
       postcss:
         specifier: ^8.5.3
         version: 8.5.3