diff --git a/design-system/packages/ui/src/components/ScrollArea/ScrollArea.tsx b/design-system/packages/ui/src/components/ScrollArea/ScrollArea.tsx
index 646771634e..303e87be85 100644
--- a/design-system/packages/ui/src/components/ScrollArea/ScrollArea.tsx
+++ b/design-system/packages/ui/src/components/ScrollArea/ScrollArea.tsx
@@ -8,6 +8,8 @@ export type ScrollbarVisibility = "auto" | "always" | "hidden";
 export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
   orientation?: ScrollAreaOrientation;
   scrollbarVisibility?: ScrollbarVisibility;
+  "data-bf-component"?: string;
+  "data-bf-part"?: string;
 }
 
 export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
@@ -15,15 +17,17 @@ export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
     className,
     orientation = "vertical",
     scrollbarVisibility = "auto",
+    "data-bf-component": dataBfComponent = "scroll-area",
+    "data-bf-part": dataBfPart = "viewport",
     ...props
   }, ref) {
     return (
       <div
         {...props}
         className={classNames(styles.root, className)}
-        data-bf-component="scroll-area"
+        data-bf-component={dataBfComponent}
         data-bf-orientation={orientation}
-        data-bf-part="viewport"
+        data-bf-part={dataBfPart}
         data-bf-scrollbar-visibility={scrollbarVisibility}
         ref={ref}
       />
diff --git a/design-system/packages/ui/tests/scroll-area.test.mjs b/design-system/packages/ui/tests/scroll-area.test.mjs
index a1b1d8719a..9ca3bb5eb2 100644
--- a/design-system/packages/ui/tests/scroll-area.test.mjs
+++ b/design-system/packages/ui/tests/scroll-area.test.mjs
@@ -30,6 +30,23 @@ test("ScrollArea exposes orientation and scrollbar visibility contracts", () =>
   assert.match(markup, /data-bf-scrollbar-visibility="always"/);
 });
 
+test("ScrollArea preserves caller-owned appearance metadata", () => {
+  const markup = renderToStaticMarkup(
+    createElement(
+      ScrollArea,
+      {
+        "data-bf-component": "model-settings",
+        "data-bf-part": "provider-list",
+      },
+      "Content",
+    ),
+  );
+
+  assert.match(markup, /data-bf-component="model-settings"/);
+  assert.match(markup, /data-bf-part="provider-list"/);
+  assert.match(markup, /data-bf-orientation="vertical"/);
+});
+
 test("ScrollArea styling uses public scrollbar tokens and preserves native scrolling", async () => {
   const styles = await readFile(
     new URL("../src/components/ScrollArea/ScrollArea.module.css", import.meta.url),
diff --git a/src/web-ui/src/infrastructure/config/components/HooksConfig.test.tsx b/src/web-ui/src/infrastructure/config/components/HooksConfig.test.tsx
index 6dc7eb9515..2dd4b4e2a3 100644
--- a/src/web-ui/src/infrastructure/config/components/HooksConfig.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/HooksConfig.test.tsx
@@ -30,6 +30,7 @@ vi.mock('@bitfun/ui', () => ({
   Button: ({ children, disabled, onClick }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
     <button type="button" disabled={disabled} onClick={onClick}>{children}</button>
   ),
+  Icon: ({ name }: { name: string }) => <span data-icon={name} />,
   ConfirmDialog: ({ confirmText, isOpen, message, onConfirm, title }: {
     confirmText?: string;
     isOpen: boolean;