diff --git a/app/client/packages/design-system/headless/src/components/Button/index.ts b/app/client/packages/design-system/headless/src/components/Button/index.ts
deleted file mode 100644
index 3bd16e178a..0000000000
--- a/app/client/packages/design-system/headless/src/components/Button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./src";
diff --git a/app/client/packages/design-system/headless/src/components/Button/src/Button.tsx b/app/client/packages/design-system/headless/src/components/Button/src/Button.tsx
deleted file mode 100644
index e2b9f3db75..0000000000
--- a/app/client/packages/design-system/headless/src/components/Button/src/Button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { forwardRef } from "react";
-import { mergeProps } from "@react-aria/utils";
-import { useButton } from "@react-aria/button";
-import { useFocusRing } from "@react-aria/focus";
-import { useHover } from "@react-aria/interactions";
-import type { AriaButtonProps as SpectrumAriaBaseButtonProps } from "@react-types/button";
-
-export interface ButtonProps extends SpectrumAriaBaseButtonProps {
-  /** classname to be passed to the button  */
-  className?: string;
-  /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.*/
-  "aria-busy"?: boolean;
-  /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
-  "aria-disabled"?: boolean;
-  /** Indicates if the button can be dragged, this is mandatory for editor because of this bug - https://bugzilla.mozilla.org/show_bug.cgi?id=568313 */
-  draggable?: boolean;
-}
-
-export type ButtonRef = React.Ref<HTMLButtonElement>;
-type ButtonRefObject = React.RefObject<HTMLButtonElement>;
-
-const _Button = (props: ButtonProps, ref: ButtonRef) => {
-  const {
-    autoFocus,
-    children,
-    className,
-    draggable = false,
-    isDisabled = false,
-    ...rest
-  } = props;
-  const { hoverProps, isHovered } = useHover({ isDisabled });
-  const { focusProps, isFocusVisible } = useFocusRing({ autoFocus });
-  const { buttonProps, isPressed } = useButton(
-    { isDisabled, ...rest },
-    ref as ButtonRefObject,
-  );
-
-  return (
-    <button
-      {...mergeProps(buttonProps, hoverProps, focusProps)}
-      aria-busy={props["aria-busy"] ?? undefined}
-      aria-disabled={props["aria-disabled"] ?? undefined}
-      className={className}
-      data-active={isPressed ? "" : undefined}
-      data-disabled={isDisabled ? "" : undefined}
-      data-focused={isFocusVisible ? "" : undefined}
-      data-hovered={isHovered ? "" : undefined}
-      draggable={draggable ? "true" : undefined}
-      ref={ref}
-    >
-      {children}
-    </button>
-  );
-};
-
-export const Button = forwardRef(_Button);
diff --git a/app/client/packages/design-system/headless/src/components/Button/src/index.ts b/app/client/packages/design-system/headless/src/components/Button/src/index.ts
deleted file mode 100644
index 7b0a8607a0..0000000000
--- a/app/client/packages/design-system/headless/src/components/Button/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Button } from "./Button";
-export type { ButtonProps, ButtonRef } from "./Button";
diff --git a/app/client/packages/design-system/headless/src/components/Button/stories/Button.stories.tsx b/app/client/packages/design-system/headless/src/components/Button/stories/Button.stories.tsx
deleted file mode 100644
index f98f65f27b..0000000000
--- a/app/client/packages/design-system/headless/src/components/Button/stories/Button.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "@design-system/headless";
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  title: "Design-system/headless/Button",
-  render: () => <Button>Button</Button>,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Main: Story = {};
diff --git a/app/client/packages/design-system/headless/src/components/Menu/stories/Menu.stories.tsx b/app/client/packages/design-system/headless/src/components/Menu/stories/Menu.stories.tsx
index de07b5fde7..bd8efe574e 100644
--- a/app/client/packages/design-system/headless/src/components/Menu/stories/Menu.stories.tsx
+++ b/app/client/packages/design-system/headless/src/components/Menu/stories/Menu.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Menu, Button, MenuList, Item } from "@design-system/headless";
+import { Menu, MenuList, Item } from "@design-system/headless";
+import { Button } from "react-aria-components";
 
 /**
  * A menu displays a list of actions or options that a user can choose.
diff --git a/app/client/packages/design-system/headless/src/components/Popover/src/PopoverTrigger.tsx b/app/client/packages/design-system/headless/src/components/Popover/src/PopoverTrigger.tsx
index 095bc8a833..01a957e15a 100644
--- a/app/client/packages/design-system/headless/src/components/Popover/src/PopoverTrigger.tsx
+++ b/app/client/packages/design-system/headless/src/components/Popover/src/PopoverTrigger.tsx
@@ -2,7 +2,7 @@ import { isValidElement, forwardRef, cloneElement } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { usePopoverContext } from "./PopoverContext";
 
-import type { ButtonProps } from "../../Button";
+import type { ButtonProps } from "react-aria-components";
 import type { AriaAttributes, Ref } from "react";
 import type { PopoverTriggerProps } from "./types";
 
diff --git a/app/client/packages/design-system/headless/src/components/Popover/stories/ControlledPopover.tsx b/app/client/packages/design-system/headless/src/components/Popover/stories/ControlledPopover.tsx
index 99c5e0111b..ed6a4818cd 100644
--- a/app/client/packages/design-system/headless/src/components/Popover/stories/ControlledPopover.tsx
+++ b/app/client/packages/design-system/headless/src/components/Popover/stories/ControlledPopover.tsx
@@ -3,8 +3,8 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-  Button,
 } from "@design-system/headless";
+import { Button } from "react-aria-components";
 
 export const ControlledPopover = () => {
   const [isOpen, setIsOpen] = useState(false);
diff --git a/app/client/packages/design-system/headless/src/components/Popover/stories/Popover.stories.tsx b/app/client/packages/design-system/headless/src/components/Popover/stories/Popover.stories.tsx
index bcb0ff147b..3496b15b7d 100644
--- a/app/client/packages/design-system/headless/src/components/Popover/stories/Popover.stories.tsx
+++ b/app/client/packages/design-system/headless/src/components/Popover/stories/Popover.stories.tsx
@@ -5,8 +5,8 @@ import {
   PopoverTrigger,
   PopoverContent,
   PopoverModalContent,
-  Button,
 } from "@design-system/headless";
+import { Button } from "react-aria-components";
 import { ControlledPopover as ControlledPopoverExample } from "./ControlledPopover";
 
 /**
diff --git a/app/client/packages/design-system/headless/src/components/Tooltip/stories/Tooltip.stories.tsx b/app/client/packages/design-system/headless/src/components/Tooltip/stories/Tooltip.stories.tsx
index 4960294d40..d5c2b5d940 100644
--- a/app/client/packages/design-system/headless/src/components/Tooltip/stories/Tooltip.stories.tsx
+++ b/app/client/packages/design-system/headless/src/components/Tooltip/stories/Tooltip.stories.tsx
@@ -4,8 +4,8 @@ import {
   TooltipRoot,
   TooltipTrigger,
   TooltipContent,
-  Button,
 } from "@design-system/headless";
+import { Button } from "react-aria-components";
 
 /**
  * A tooltip is a small pop-up that appears when a user places their cursor over an element such as a link or button. Tooltips can be used to provide users with additional information about an element without having to clutter up the UI with additional text.
diff --git a/app/client/packages/design-system/headless/src/index.ts b/app/client/packages/design-system/headless/src/index.ts
index f3c985d024..6566138ee1 100644
--- a/app/client/packages/design-system/headless/src/index.ts
+++ b/app/client/packages/design-system/headless/src/index.ts
@@ -1,5 +1,4 @@
 // components
-export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/Field";
 export * from "./components/Icon";
diff --git a/app/client/packages/design-system/theming/src/token/src/styles.module.css b/app/client/packages/design-system/theming/src/token/src/styles.module.css
index 4e95f2d2a0..f117b6e217 100644
--- a/app/client/packages/design-system/theming/src/token/src/styles.module.css
+++ b/app/client/packages/design-system/theming/src/token/src/styles.module.css
@@ -1,225 +1,225 @@
 /* THIS FILE IS CREATED AUTOMATICALLY. PLEASE DON'T EDIT IT. */
 :root {
   --outer-spacing-0: 0;
-  --outer-spacing-1: 4.6px;
-  --outer-spacing-2: 6.5px;
-  --outer-spacing-3: 9.2px;
-  --outer-spacing-4: 13px;
-  --outer-spacing-5: 18.4px;
-  --outer-spacing-6: 26px;
-  --outer-spacing-7: 36.8px;
-  --outer-spacing-8: 52px;
+  --outer-spacing-1: 5.7px;
+  --outer-spacing-2: 8.1px;
+  --outer-spacing-3: 11.5px;
+  --outer-spacing-4: 16.2px;
+  --outer-spacing-5: 22.9px;
+  --outer-spacing-6: 32.5px;
+  --outer-spacing-7: 45.9px;
+  --outer-spacing-8: 64.9px;
   --inner-spacing-0: 0;
-  --inner-spacing-1: 4.1px;
-  --inner-spacing-2: 5.8px;
-  --inner-spacing-3: 8.3px;
-  --inner-spacing-4: 11.7px;
-  --inner-spacing-5: 16.5px;
-  --inner-spacing-6: 23.3px;
-  --inner-spacing-7: 33px;
-  --inner-spacing-8: 46.7px;
+  --inner-spacing-1: 4.2px;
+  --inner-spacing-2: 6.3px;
+  --inner-spacing-3: 9.4px;
+  --inner-spacing-4: 14.2px;
+  --inner-spacing-5: 21.3px;
+  --inner-spacing-6: 31.9px;
+  --inner-spacing-7: 47.8px;
+  --inner-spacing-8: 71.8px;
   --sizing-0: 0;
-  --sizing-1: 3.2px;
-  --sizing-2: 6.4px;
-  --sizing-3: 9.6px;
-  --sizing-4: 12.8px;
-  --sizing-5: 16px;
-  --sizing-6: 19.2px;
-  --sizing-7: 22.4px;
-  --sizing-8: 25.6px;
-  --sizing-9: 28.8px;
-  --sizing-10: 32px;
-  --sizing-11: 35.2px;
-  --sizing-12: 38.4px;
-  --sizing-13: 41.6px;
-  --sizing-14: 44.8px;
-  --sizing-15: 48px;
-  --sizing-16: 51.2px;
-  --sizing-17: 54.4px;
-  --sizing-18: 57.6px;
-  --sizing-19: 60.8px;
-  --sizing-20: 64px;
-  --sizing-21: 67.2px;
-  --sizing-22: 70.4px;
-  --sizing-23: 73.6px;
-  --sizing-24: 76.8px;
-  --sizing-25: 80px;
-  --sizing-26: 83.2px;
-  --sizing-27: 86.4px;
-  --sizing-28: 89.6px;
-  --sizing-29: 92.8px;
-  --sizing-30: 96px;
-  --sizing-31: 99.2px;
-  --sizing-32: 102.4px;
-  --sizing-33: 105.6px;
-  --sizing-34: 108.8px;
-  --sizing-35: 112px;
-  --sizing-36: 115.2px;
-  --sizing-37: 118.4px;
-  --sizing-38: 121.6px;
-  --sizing-39: 124.8px;
-  --sizing-40: 128px;
-  --sizing-41: 131.2px;
-  --sizing-42: 134.4px;
-  --sizing-43: 137.6px;
-  --sizing-44: 140.8px;
-  --sizing-45: 144px;
-  --sizing-46: 147.2px;
-  --sizing-47: 150.4px;
-  --sizing-48: 153.6px;
-  --sizing-49: 156.8px;
-  --sizing-50: 160px;
-  --sizing-51: 163.2px;
-  --sizing-52: 166.4px;
-  --sizing-53: 169.6px;
-  --sizing-54: 172.8px;
-  --sizing-55: 176px;
-  --sizing-56: 179.2px;
-  --sizing-57: 182.4px;
-  --sizing-58: 185.6px;
-  --sizing-59: 188.8px;
-  --sizing-60: 192px;
-  --sizing-61: 195.2px;
-  --sizing-62: 198.4px;
-  --sizing-63: 201.6px;
-  --sizing-64: 204.8px;
-  --sizing-65: 208px;
-  --sizing-66: 211.2px;
-  --sizing-67: 214.4px;
-  --sizing-68: 217.6px;
-  --sizing-69: 220.8px;
-  --sizing-70: 224px;
-  --sizing-71: 227.2px;
-  --sizing-72: 230.4px;
-  --sizing-73: 233.6px;
-  --sizing-74: 236.8px;
-  --sizing-75: 240px;
-  --sizing-76: 243.2px;
-  --sizing-77: 246.4px;
-  --sizing-78: 249.6px;
-  --sizing-79: 252.8px;
-  --sizing-80: 256px;
-  --sizing-81: 259.2px;
-  --sizing-82: 262.4px;
-  --sizing-83: 265.6px;
-  --sizing-84: 268.8px;
-  --sizing-85: 272px;
-  --sizing-86: 275.2px;
-  --sizing-87: 278.4px;
-  --sizing-88: 281.6px;
-  --sizing-89: 284.8px;
-  --sizing-90: 288px;
-  --sizing-91: 291.2px;
-  --sizing-92: 294.4px;
-  --sizing-93: 297.6px;
-  --sizing-94: 300.8px;
-  --sizing-95: 304px;
-  --sizing-96: 307.2px;
-  --sizing-97: 310.4px;
-  --sizing-98: 313.6px;
-  --sizing-99: 316.8px;
-  --sizing-100: 320px;
-  --sizing-101: 323.2px;
-  --sizing-102: 326.4px;
-  --sizing-103: 329.6px;
-  --sizing-104: 332.8px;
-  --sizing-105: 336px;
-  --sizing-106: 339.2px;
-  --sizing-107: 342.4px;
-  --sizing-108: 345.6px;
-  --sizing-109: 348.8px;
-  --sizing-110: 352px;
-  --sizing-111: 355.2px;
-  --sizing-112: 358.4px;
-  --sizing-113: 361.6px;
-  --sizing-114: 364.8px;
-  --sizing-115: 368px;
-  --sizing-116: 371.2px;
-  --sizing-117: 374.4px;
-  --sizing-118: 377.6px;
-  --sizing-119: 380.8px;
-  --sizing-120: 384px;
-  --sizing-121: 387.2px;
-  --sizing-122: 390.4px;
-  --sizing-123: 393.6px;
-  --sizing-124: 396.8px;
-  --sizing-125: 400px;
-  --sizing-126: 403.2px;
-  --sizing-127: 406.4px;
-  --sizing-128: 409.6px;
-  --sizing-129: 412.8px;
-  --sizing-130: 416px;
-  --sizing-131: 419.2px;
-  --sizing-132: 422.4px;
-  --sizing-133: 425.6px;
-  --sizing-134: 428.8px;
-  --sizing-135: 432px;
-  --sizing-136: 435.2px;
-  --sizing-137: 438.4px;
-  --sizing-138: 441.6px;
-  --sizing-139: 444.8px;
-  --sizing-140: 448px;
-  --sizing-141: 451.2px;
-  --sizing-142: 454.4px;
-  --sizing-143: 457.6px;
-  --sizing-144: 460.8px;
-  --sizing-145: 464px;
-  --sizing-146: 467.2px;
-  --sizing-147: 470.4px;
-  --sizing-148: 473.6px;
-  --sizing-149: 476.8px;
-  --sizing-150: 480px;
-  --sizing-151: 483.2px;
-  --sizing-152: 486.4px;
-  --sizing-153: 489.6px;
-  --sizing-154: 492.8px;
-  --sizing-155: 496px;
-  --sizing-156: 499.2px;
-  --sizing-157: 502.4px;
-  --sizing-158: 505.6px;
-  --sizing-159: 508.8px;
-  --sizing-160: 512px;
-  --sizing-161: 515.2px;
-  --sizing-162: 518.4px;
-  --sizing-163: 521.6px;
-  --sizing-164: 524.8px;
-  --sizing-165: 528px;
-  --sizing-166: 531.2px;
-  --sizing-167: 534.4px;
-  --sizing-168: 537.6px;
-  --sizing-169: 540.8px;
-  --sizing-170: 544px;
-  --sizing-171: 547.2px;
-  --sizing-172: 550.4px;
-  --sizing-173: 553.6px;
-  --sizing-174: 556.8px;
-  --sizing-175: 560px;
-  --sizing-176: 563.2px;
-  --sizing-177: 566.4px;
-  --sizing-178: 569.6px;
-  --sizing-179: 572.8px;
-  --sizing-180: 576px;
-  --sizing-181: 579.2px;
-  --sizing-182: 582.4px;
-  --sizing-183: 585.6px;
-  --sizing-184: 588.8px;
-  --sizing-185: 592px;
-  --sizing-186: 595.2px;
-  --sizing-187: 598.4px;
-  --sizing-188: 601.6px;
-  --sizing-189: 604.8px;
-  --sizing-190: 608px;
-  --sizing-191: 611.2px;
-  --sizing-192: 614.4px;
-  --sizing-193: 617.6px;
-  --sizing-194: 620.8px;
-  --sizing-195: 624px;
-  --sizing-196: 627.2px;
-  --sizing-197: 630.4px;
-  --sizing-198: 633.6px;
-  --sizing-199: 636.8px;
-  --sizing-200: 640px;
-  --color-bg: rgb(93.292% 94.955% 97.227%);
+  --sizing-1: 3.4px;
+  --sizing-2: 6.8px;
+  --sizing-3: 10.2px;
+  --sizing-4: 13.6px;
+  --sizing-5: 17px;
+  --sizing-6: 20.4px;
+  --sizing-7: 23.8px;
+  --sizing-8: 27.2px;
+  --sizing-9: 30.6px;
+  --sizing-10: 34px;
+  --sizing-11: 37.4px;
+  --sizing-12: 40.8px;
+  --sizing-13: 44.2px;
+  --sizing-14: 47.6px;
+  --sizing-15: 51px;
+  --sizing-16: 54.4px;
+  --sizing-17: 57.8px;
+  --sizing-18: 61.2px;
+  --sizing-19: 64.6px;
+  --sizing-20: 68px;
+  --sizing-21: 71.4px;
+  --sizing-22: 74.8px;
+  --sizing-23: 78.2px;
+  --sizing-24: 81.6px;
+  --sizing-25: 85px;
+  --sizing-26: 88.4px;
+  --sizing-27: 91.8px;
+  --sizing-28: 95.2px;
+  --sizing-29: 98.6px;
+  --sizing-30: 102px;
+  --sizing-31: 105.4px;
+  --sizing-32: 108.8px;
+  --sizing-33: 112.2px;
+  --sizing-34: 115.6px;
+  --sizing-35: 119px;
+  --sizing-36: 122.4px;
+  --sizing-37: 125.8px;
+  --sizing-38: 129.2px;
+  --sizing-39: 132.6px;
+  --sizing-40: 136px;
+  --sizing-41: 139.4px;
+  --sizing-42: 142.8px;
+  --sizing-43: 146.2px;
+  --sizing-44: 149.6px;
+  --sizing-45: 153px;
+  --sizing-46: 156.4px;
+  --sizing-47: 159.8px;
+  --sizing-48: 163.2px;
+  --sizing-49: 166.6px;
+  --sizing-50: 170px;
+  --sizing-51: 173.4px;
+  --sizing-52: 176.8px;
+  --sizing-53: 180.2px;
+  --sizing-54: 183.6px;
+  --sizing-55: 187px;
+  --sizing-56: 190.4px;
+  --sizing-57: 193.8px;
+  --sizing-58: 197.2px;
+  --sizing-59: 200.6px;
+  --sizing-60: 204px;
+  --sizing-61: 207.4px;
+  --sizing-62: 210.8px;
+  --sizing-63: 214.2px;
+  --sizing-64: 217.6px;
+  --sizing-65: 221px;
+  --sizing-66: 224.4px;
+  --sizing-67: 227.8px;
+  --sizing-68: 231.2px;
+  --sizing-69: 234.6px;
+  --sizing-70: 238px;
+  --sizing-71: 241.4px;
+  --sizing-72: 244.8px;
+  --sizing-73: 248.2px;
+  --sizing-74: 251.6px;
+  --sizing-75: 255px;
+  --sizing-76: 258.4px;
+  --sizing-77: 261.8px;
+  --sizing-78: 265.2px;
+  --sizing-79: 268.6px;
+  --sizing-80: 272px;
+  --sizing-81: 275.4px;
+  --sizing-82: 278.8px;
+  --sizing-83: 282.2px;
+  --sizing-84: 285.6px;
+  --sizing-85: 289px;
+  --sizing-86: 292.4px;
+  --sizing-87: 295.8px;
+  --sizing-88: 299.2px;
+  --sizing-89: 302.6px;
+  --sizing-90: 306px;
+  --sizing-91: 309.4px;
+  --sizing-92: 312.8px;
+  --sizing-93: 316.2px;
+  --sizing-94: 319.6px;
+  --sizing-95: 323px;
+  --sizing-96: 326.4px;
+  --sizing-97: 329.8px;
+  --sizing-98: 333.2px;
+  --sizing-99: 336.6px;
+  --sizing-100: 340px;
+  --sizing-101: 343.4px;
+  --sizing-102: 346.8px;
+  --sizing-103: 350.2px;
+  --sizing-104: 353.6px;
+  --sizing-105: 357px;
+  --sizing-106: 360.4px;
+  --sizing-107: 363.8px;
+  --sizing-108: 367.2px;
+  --sizing-109: 370.6px;
+  --sizing-110: 374px;
+  --sizing-111: 377.4px;
+  --sizing-112: 380.8px;
+  --sizing-113: 384.2px;
+  --sizing-114: 387.6px;
+  --sizing-115: 391px;
+  --sizing-116: 394.4px;
+  --sizing-117: 397.8px;
+  --sizing-118: 401.2px;
+  --sizing-119: 404.6px;
+  --sizing-120: 408px;
+  --sizing-121: 411.4px;
+  --sizing-122: 414.8px;
+  --sizing-123: 418.2px;
+  --sizing-124: 421.6px;
+  --sizing-125: 425px;
+  --sizing-126: 428.4px;
+  --sizing-127: 431.8px;
+  --sizing-128: 435.2px;
+  --sizing-129: 438.6px;
+  --sizing-130: 442px;
+  --sizing-131: 445.4px;
+  --sizing-132: 448.8px;
+  --sizing-133: 452.2px;
+  --sizing-134: 455.6px;
+  --sizing-135: 459px;
+  --sizing-136: 462.4px;
+  --sizing-137: 465.8px;
+  --sizing-138: 469.2px;
+  --sizing-139: 472.6px;
+  --sizing-140: 476px;
+  --sizing-141: 479.4px;
+  --sizing-142: 482.8px;
+  --sizing-143: 486.2px;
+  --sizing-144: 489.6px;
+  --sizing-145: 493px;
+  --sizing-146: 496.4px;
+  --sizing-147: 499.8px;
+  --sizing-148: 503.2px;
+  --sizing-149: 506.6px;
+  --sizing-150: 510px;
+  --sizing-151: 513.4px;
+  --sizing-152: 516.8px;
+  --sizing-153: 520.2px;
+  --sizing-154: 523.6px;
+  --sizing-155: 527px;
+  --sizing-156: 530.4px;
+  --sizing-157: 533.8px;
+  --sizing-158: 537.2px;
+  --sizing-159: 540.6px;
+  --sizing-160: 544px;
+  --sizing-161: 547.4px;
+  --sizing-162: 550.8px;
+  --sizing-163: 554.2px;
+  --sizing-164: 557.6px;
+  --sizing-165: 561px;
+  --sizing-166: 564.4px;
+  --sizing-167: 567.8px;
+  --sizing-168: 571.2px;
+  --sizing-169: 574.6px;
+  --sizing-170: 578px;
+  --sizing-171: 581.4px;
+  --sizing-172: 584.8px;
+  --sizing-173: 588.2px;
+  --sizing-174: 591.6px;
+  --sizing-175: 595px;
+  --sizing-176: 598.4px;
+  --sizing-177: 601.8px;
+  --sizing-178: 605.2px;
+  --sizing-179: 608.6px;
+  --sizing-180: 612px;
+  --sizing-181: 615.4px;
+  --sizing-182: 618.8px;
+  --sizing-183: 622.2px;
+  --sizing-184: 625.6px;
+  --sizing-185: 629px;
+  --sizing-186: 632.4px;
+  --sizing-187: 635.8px;
+  --sizing-188: 639.2px;
+  --sizing-189: 642.6px;
+  --sizing-190: 646px;
+  --sizing-191: 649.4px;
+  --sizing-192: 652.8px;
+  --sizing-193: 656.2px;
+  --sizing-194: 659.6px;
+  --sizing-195: 663px;
+  --sizing-196: 666.4px;
+  --sizing-197: 669.8px;
+  --sizing-198: 673.2px;
+  --sizing-199: 676.6px;
+  --sizing-200: 680px;
+  --color-bg: rgb(95.735% 96.105% 96.612%);
   --color-bg-accent: rgb(0% 50.196% 100%);
   --color-bg-accent-hover: rgb(13.479% 56.597% 100%);
   --color-bg-accent-active: rgb(0% 47.644% 97.234%);
@@ -227,13 +227,13 @@
   --color-bg-accent-subtle-hover: rgb(88.309% 93.691% 100%);
   --color-bg-accent-subtle-active: rgb(81.868% 90.09% 100%);
   --color-bg-assistive: rgb(0% 4.2493% 16.493%);
-  --color-bg-neutral: rgb(36.27% 41.013% 47.456%);
-  --color-bg-neutral-opacity: rgb(36.27% 41.013% 47.456% / 0.5);
-  --color-bg-neutral-hover: rgb(41.835% 46.688% 53.284%);
-  --color-bg-neutral-active: rgb(35.173% 39.893% 46.305%);
-  --color-bg-neutral-subtle: rgb(89.241% 91.074% 93.578%);
-  --color-bg-neutral-subtle-hover: rgb(91.83% 93.672% 96.189%);
-  --color-bg-neutral-subtle-active: rgb(87.952% 89.78% 92.277%);
+  --color-bg-neutral: rgb(40.269% 40.585% 41.017%);
+  --color-bg-neutral-opacity: rgb(40.269% 40.585% 41.017% / 0.5);
+  --color-bg-neutral-hover: rgb(44.775% 45.097% 45.538%);
+  --color-bg-neutral-active: rgb(39.155% 39.47% 39.901%);
+  --color-bg-neutral-subtle: rgb(91.338% 91.522% 91.773%);
+  --color-bg-neutral-subtle-hover: rgb(93.938% 94.123% 94.375%);
+  --color-bg-neutral-subtle-active: rgb(90.044% 90.227% 90.478%);
   --color-bg-positive: rgb(6.7435% 63.436% 18.481%);
   --color-bg-positive-hover: rgb(18.172% 69.721% 25.266%);
   --color-bg-positive-active: rgb(0% 60.947% 15.563%);
@@ -252,43 +252,55 @@
   --color-bg-warning-subtle: rgb(100% 94.114% 80.142%);
   --color-bg-warning-subtle-hover: rgb(100% 97.012% 87.859%);
   --color-bg-warning-subtle-active: rgb(99.63% 92.81% 78.869%);
-  --color-bg-elevation-1: rgb(95.902% 97.573% 99.857%);
-  --color-bg-elevation-2: rgb(97.988% 99.528% 100%);
-  --color-bg-elevation-3: rgb(99.697% 100% 100%);
-  --color-shadow-elevation-1: rgb(0% 5.9131% 57.625% / 0.1);
-  --color-shadow-elevation-2: rgb(0% 15.277% 63.167% / 0.12);
-  --color-shadow-elevation-3: rgb(0% 16.799% 64.298% / 0.15);
-  --color-fg: rgb(0.3864% 2.2133% 6.8342%);
+  --color-bg-elevation-1: rgb(98.357% 98.73% 99.239%);
+  --color-bg-elevation-2: rgb(100% 100% 100%);
+  --color-bg-elevation-3: rgb(100% 100% 100%);
+  --color-shadow-elevation-1: rgb(15.421% 18.184% 21.936% / 0.1);
+  --color-shadow-elevation-2: rgb(20.315% 23.186% 27.086% / 0.12);
+  --color-shadow-elevation-3: rgb(21.317% 24.208% 28.136% / 0.15);
+  --color-fg: rgb(1.8308% 2.2815% 2.989%);
   --color-fg-accent: rgb(0% 31.772% 67.873%);
-  --color-fg-neutral: rgb(26.26% 33.939% 44.326%);
-  --color-fg-neutral-subtle: rgb(37.08% 45.134% 56.045%);
+  --color-fg-neutral: rgb(32.982% 33.44% 34.067%);
+  --color-fg-neutral-subtle: rgb(44.047% 44.529% 45.189%);
   --color-fg-positive: rgb(6.7435% 63.436% 18.481%);
   --color-fg-negative: rgb(100% 0% 28.453%);
   --color-fg-warning: rgb(71.79% 51.231% 0%);
-  --color-fg-on-accent: rgb(89.856% 93.58% 100%);
-  --color-fg-on-accent-subtle: rgb(0.3864% 2.2133% 6.8342%);
+  --color-fg-on-accent: rgb(92.311% 95.082% 98.864%);
+  --color-fg-on-accent-subtle: rgb(1.8308% 2.2815% 2.989%);
   --color-fg-on-assistive: rgb(92.536% 96.25% 100%);
-  --color-fg-on-neutral: rgb(90.444% 95.285% 100%);
+  --color-fg-on-neutral: rgb(94.428% 94.798% 95.304%);
   --color-fg-on-positive: rgb(89.702% 100% 89.053%);
   --color-fg-on-negative: rgb(100% 87.612% 85.249%);
   --color-fg-on-warning: rgb(21.953% 9.0775% 0%);
-  --color-bd: rgb(69.282% 74.927% 82.61%);
+  --color-bd: rgb(73.392% 74.451% 75.899%);
   --color-bd-accent: rgb(0% 50.196% 100%);
   --color-bd-focus: rgb(0% 50.196% 100%);
-  --color-bd-neutral: rgb(46.767% 52.551% 60.409%);
-  --color-bd-neutral-hover: rgb(58.499% 64.503% 72.668%);
+  --color-bd-neutral: rgb(51.832% 51.998% 52.224%);
+  --color-bd-neutral-hover: rgb(63.734% 63.906% 64.141%);
   --color-bd-positive: rgb(6.7435% 63.436% 18.481%);
   --color-bd-positive-hover: rgb(26.362% 76.094% 31.718%);
   --color-bd-negative: rgb(83.108% 4.6651% 10.252%);
-  --color-bd-negative-hover: rgb(97.525% 25.712% 23.78%);
+  --color-bd-negative-hover: rgb(94.628% 22.524% 21.261%);
   --color-bd-warning: rgb(85.145% 64.66% 8.0286%);
   --color-bd-warning-hover: rgb(98.232% 77.293% 27.893%);
   --color-bd-on-accent: rgb(0% 1.6859% 55.697%);
-  --color-bd-on-neutral: rgb(2.3313% 5.7416% 10.634%);
+  --color-bd-on-neutral: rgb(5.3992% 5.6371% 5.9622%);
+  --color-bd-on-neutral-subtle: rgb(83.624% 83.804% 84.052%);
+  --color-bd-on-neutral-subtle-hover: rgb(87.465% 87.647% 87.897%);
   --color-bd-on-positive: rgb(0% 22.552% 3.6201%);
   --color-bd-on-negative: rgb(21.923% 0% 2.8118%);
   --color-bd-on-warning: rgb(39.972% 27.552% 0%);
-  --border-radius-1: 0px;
+  --color-bd-elevation-1: rgb(86.823% 87.005% 87.253%);
+  --color-bd-elevation-2: rgb(90.691% 90.874% 91.125%);
+  --color-bd-elevation-3: rgb(92.637% 92.821% 93.073%);
+  --border-radius-elevation-1: calc(
+    var(--border-radius-elevation-base) + var(--outer-spacing-1) * 2
+  );
+  --border-radius-elevation-2: calc(
+    var(--border-radius-elevation-base) + var(--outer-spacing-1)
+  );
+  --border-radius-elevation-3: var(--border-radius-elevation-base);
+  --border-radius-elevation-base: 0px;
   --box-shadow-1: 0 var(--inner-spacing-2) var(--inner-spacing-3) 0
     var(--color-shadow-elevation-1);
   --box-shadow-2: 0 var(--inner-spacing-1) var(--inner-spacing-3) 0
@@ -302,10 +314,4 @@
   --z-index-2: 4;
   --z-index-3: 10;
   --z-index-99: 9999;
-  --stroke-width-1: 1px;
-  --stroke-width-2: 1.5px;
-  --stroke-width-3: 2px;
-  --icon-size-1: 16px;
-  --icon-size-2: 24px;
-  --icon-size-3: 32px;
 }
diff --git a/app/client/packages/design-system/theming/src/token/src/themeTokens.json b/app/client/packages/design-system/theming/src/token/src/themeTokens.json
index c4352cfdbf..79dfc41e14 100644
--- a/app/client/packages/design-system/theming/src/token/src/themeTokens.json
+++ b/app/client/packages/design-system/theming/src/token/src/themeTokens.json
@@ -1,7 +1,7 @@
 {
   "color": {
     "bg": {
-      "value": "rgb(93.292% 94.955% 97.227%)",
+      "value": "rgb(95.735% 96.105% 96.612%)",
       "type": "color"
     },
     "bg-accent": {
@@ -33,31 +33,31 @@
       "type": "color"
     },
     "bg-neutral": {
-      "value": "rgb(36.27% 41.013% 47.456%)",
+      "value": "rgb(40.269% 40.585% 41.017%)",
       "type": "color"
     },
     "bg-neutral-opacity": {
-      "value": "rgb(36.27% 41.013% 47.456% / 0.5)",
+      "value": "rgb(40.269% 40.585% 41.017% / 0.5)",
       "type": "color"
     },
     "bg-neutral-hover": {
-      "value": "rgb(41.835% 46.688% 53.284%)",
+      "value": "rgb(44.775% 45.097% 45.538%)",
       "type": "color"
     },
     "bg-neutral-active": {
-      "value": "rgb(35.173% 39.893% 46.305%)",
+      "value": "rgb(39.155% 39.47% 39.901%)",
       "type": "color"
     },
     "bg-neutral-subtle": {
-      "value": "rgb(89.241% 91.074% 93.578%)",
+      "value": "rgb(91.338% 91.522% 91.773%)",
       "type": "color"
     },
     "bg-neutral-subtle-hover": {
-      "value": "rgb(91.83% 93.672% 96.189%)",
+      "value": "rgb(93.938% 94.123% 94.375%)",
       "type": "color"
     },
     "bg-neutral-subtle-active": {
-      "value": "rgb(87.952% 89.78% 92.277%)",
+      "value": "rgb(90.044% 90.227% 90.478%)",
       "type": "color"
     },
     "bg-positive": {
@@ -133,31 +133,31 @@
       "type": "color"
     },
     "bg-elevation-1": {
-      "value": "rgb(95.902% 97.573% 99.857%)",
+      "value": "rgb(98.357% 98.73% 99.239%)",
       "type": "color"
     },
     "bg-elevation-2": {
-      "value": "rgb(97.988% 99.528% 100%)",
+      "value": "rgb(100% 100% 100%)",
       "type": "color"
     },
     "bg-elevation-3": {
-      "value": "rgb(99.697% 100% 100%)",
+      "value": "rgb(100% 100% 100%)",
       "type": "color"
     },
     "shadow-elevation-1": {
-      "value": "rgb(0% 5.9131% 57.625% / 0.1)",
+      "value": "rgb(15.421% 18.184% 21.936% / 0.1)",
       "type": "color"
     },
     "shadow-elevation-2": {
-      "value": "rgb(0% 15.277% 63.167% / 0.12)",
+      "value": "rgb(20.315% 23.186% 27.086% / 0.12)",
       "type": "color"
     },
     "shadow-elevation-3": {
-      "value": "rgb(0% 16.799% 64.298% / 0.15)",
+      "value": "rgb(21.317% 24.208% 28.136% / 0.15)",
       "type": "color"
     },
     "fg": {
-      "value": "rgb(0.3864% 2.2133% 6.8342%)",
+      "value": "rgb(1.8308% 2.2815% 2.989%)",
       "type": "color"
     },
     "fg-accent": {
@@ -165,11 +165,11 @@
       "type": "color"
     },
     "fg-neutral": {
-      "value": "rgb(26.26% 33.939% 44.326%)",
+      "value": "rgb(32.982% 33.44% 34.067%)",
       "type": "color"
     },
     "fg-neutral-subtle": {
-      "value": "rgb(37.08% 45.134% 56.045%)",
+      "value": "rgb(44.047% 44.529% 45.189%)",
       "type": "color"
     },
     "fg-positive": {
@@ -185,11 +185,11 @@
       "type": "color"
     },
     "fg-on-accent": {
-      "value": "rgb(89.856% 93.58% 100%)",
+      "value": "rgb(92.311% 95.082% 98.864%)",
       "type": "color"
     },
     "fg-on-accent-subtle": {
-      "value": "rgb(0.3864% 2.2133% 6.8342%)",
+      "value": "rgb(1.8308% 2.2815% 2.989%)",
       "type": "color"
     },
     "fg-on-assistive": {
@@ -197,7 +197,7 @@
       "type": "color"
     },
     "fg-on-neutral": {
-      "value": "rgb(90.444% 95.285% 100%)",
+      "value": "rgb(94.428% 94.798% 95.304%)",
       "type": "color"
     },
     "fg-on-positive": {
@@ -213,7 +213,7 @@
       "type": "color"
     },
     "bd": {
-      "value": "rgb(69.282% 74.927% 82.61%)",
+      "value": "rgb(73.392% 74.451% 75.899%)",
       "type": "color"
     },
     "bd-accent": {
@@ -225,11 +225,11 @@
       "type": "color"
     },
     "bd-neutral": {
-      "value": "rgb(46.767% 52.551% 60.409%)",
+      "value": "rgb(51.832% 51.998% 52.224%)",
       "type": "color"
     },
     "bd-neutral-hover": {
-      "value": "rgb(58.499% 64.503% 72.668%)",
+      "value": "rgb(63.734% 63.906% 64.141%)",
       "type": "color"
     },
     "bd-positive": {
@@ -245,7 +245,7 @@
       "type": "color"
     },
     "bd-negative-hover": {
-      "value": "rgb(97.525% 25.712% 23.78%)",
+      "value": "rgb(94.628% 22.524% 21.261%)",
       "type": "color"
     },
     "bd-warning": {
@@ -261,7 +261,15 @@
       "type": "color"
     },
     "bd-on-neutral": {
-      "value": "rgb(2.3313% 5.7416% 10.634%)",
+      "value": "rgb(5.3992% 5.6371% 5.9622%)",
+      "type": "color"
+    },
+    "bd-on-neutral-subtle": {
+      "value": "rgb(83.624% 83.804% 84.052%)",
+      "type": "color"
+    },
+    "bd-on-neutral-subtle-hover": {
+      "value": "rgb(87.465% 87.647% 87.897%)",
       "type": "color"
     },
     "bd-on-positive": {
@@ -275,12 +283,36 @@
     "bd-on-warning": {
       "value": "rgb(39.972% 27.552% 0%)",
       "type": "color"
+    },
+    "bd-elevation-1": {
+      "value": "rgb(86.823% 87.005% 87.253%)",
+      "type": "color"
+    },
+    "bd-elevation-2": {
+      "value": "rgb(90.691% 90.874% 91.125%)",
+      "type": "color"
+    },
+    "bd-elevation-3": {
+      "value": "rgb(92.637% 92.821% 93.073%)",
+      "type": "color"
     }
   },
-  "borderRadius": {
+  "borderRadiusElevation": {
     "1": {
+      "value": "calc(var(--border-radius-elevation-base) + var(--outer-spacing-1) * 2)",
+      "type": "borderRadiusElevation"
+    },
+    "2": {
+      "value": "calc(var(--border-radius-elevation-base) + var(--outer-spacing-1))",
+      "type": "borderRadiusElevation"
+    },
+    "3": {
+      "value": "var(--border-radius-elevation-base)",
+      "type": "borderRadiusElevation"
+    },
+    "base": {
       "value": "0px",
-      "type": "borderRadius"
+      "type": "borderRadiusElevation"
     }
   },
   "boxShadow": {
@@ -331,33 +363,5 @@
       "type": "zIndex"
     }
   },
-  "strokeWidth": {
-    "1": {
-      "value": "1px",
-      "type": "strokeWidth"
-    },
-    "2": {
-      "value": "1.5px",
-      "type": "strokeWidth"
-    },
-    "3": {
-      "value": "2px",
-      "type": "strokeWidth"
-    }
-  },
-  "iconSize": {
-    "1": {
-      "value": "16px",
-      "type": "iconSize"
-    },
-    "2": {
-      "value": "24px",
-      "type": "iconSize"
-    },
-    "3": {
-      "value": "32px",
-      "type": "iconSize"
-    }
-  },
   "colorMode": "light"
 }
diff --git a/app/client/packages/design-system/widgets/src/components/ActionGroup/src/ActionGroupItem.tsx b/app/client/packages/design-system/widgets/src/components/ActionGroup/src/ActionGroupItem.tsx
index 8d49540a46..939e289779 100644
--- a/app/client/packages/design-system/widgets/src/components/ActionGroup/src/ActionGroupItem.tsx
+++ b/app/client/packages/design-system/widgets/src/components/ActionGroup/src/ActionGroupItem.tsx
@@ -1,12 +1,12 @@
+import type { ForwardedRef } from "react";
 import React, { forwardRef } from "react";
 import { Button } from "@design-system/widgets";
 
 import type { ButtonGroupItemProps } from "../../../";
-import type { ButtonRef as HeadlessButtonRef } from "@design-system/headless";
 
 const _ActionGroupItem = <T extends object>(
   props: ButtonGroupItemProps<T>,
-  ref: HeadlessButtonRef,
+  ref: ForwardedRef<HTMLButtonElement>,
 ) => {
   const { color, item, variant, ...rest } = props;
 
diff --git a/app/client/packages/design-system/widgets/src/components/Button/chromatic/Button.chromatic.stories.tsx b/app/client/packages/design-system/widgets/src/components/Button/chromatic/Button.chromatic.stories.tsx
index e078061148..7219af4b27 100644
--- a/app/client/packages/design-system/widgets/src/components/Button/chromatic/Button.chromatic.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Button/chromatic/Button.chromatic.stories.tsx
@@ -18,8 +18,8 @@ type Story = StoryObj<typeof Button>;
 const states = [
   "",
   "data-hovered",
-  "data-active",
-  "data-focused",
+  "data-pressed",
+  "data-focus-visible",
   "aria-disabled",
 ];
 
diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx b/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
index 648f195075..3cf48b1327 100644
--- a/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
@@ -1,7 +1,7 @@
+import type { ForwardedRef } from "react";
 import React, { forwardRef } from "react";
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
-import { Button as HeadlessButton } from "@design-system/headless";
-import type { ButtonRef as HeadlessButtonRef } from "@design-system/headless";
+import { Button as HeadlessButton } from "react-aria-components";
 import type { SIZES } from "../../../shared";
 import clsx from "clsx";
 import { Text } from "../../Text";
@@ -10,10 +10,11 @@ import styles from "./styles.module.css";
 import type { ButtonProps } from "./types";
 import { Icon } from "../../Icon";
 
-const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => {
+const _Button = (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
   props = useVisuallyDisabled(props);
   const {
     children,
+    className,
     color = "accent",
     icon,
     iconPosition = "start",
@@ -21,11 +22,7 @@ const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => {
     isLoading = false,
     loadingText = "Loading...",
     size = "medium",
-    // eslint-disable-next-line -- TODO add onKeyUp when the bug is fixed https://github.com/adobe/react-spectrum/issues/4350
-    onKeyUp,
     variant = "filled",
-    visuallyDisabled = false,
-    className,
     ...rest
   } = props;
   const { visuallyHiddenProps } = useVisuallyHidden();
@@ -64,10 +61,6 @@ const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => {
 
   return (
     <HeadlessButton
-      aria-busy={isLoading ? true : undefined}
-      aria-disabled={
-        visuallyDisabled || isLoading || isDisabled ? true : undefined
-      }
       className={clsx(className, styles.button)}
       data-button=""
       data-color={color}
@@ -75,13 +68,11 @@ const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => {
       data-loading={isLoading ? "" : undefined}
       data-size={Boolean(size) ? size : undefined}
       data-variant={variant}
-      draggable
       isDisabled={isDisabled}
       ref={ref}
       {...rest}
     >
       {renderChildren()}
-      <span aria-hidden="true" className={styles.dragContainer} />
     </HeadlessButton>
   );
 };
@@ -93,14 +84,13 @@ export const Button = forwardRef(_Button);
  * when the button is visually disabled
  */
 const useVisuallyDisabled = (props: ButtonProps) => {
-  const { isLoading = false, visuallyDisabled = false } = props;
+  const { isLoading = false } = props;
   let computedProps = props;
 
-  if (visuallyDisabled || isLoading) {
+  if (isLoading) {
     computedProps = {
       ...props,
       isDisabled: false,
-      // disabling click/press events
       onPress: undefined,
       onPressStart: undefined,
       onPressEnd: undefined,
diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
index 48ff7df52d..d215068e22 100644
--- a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
@@ -17,11 +17,11 @@
       background-color: var(--color-bg-$(color));
       color: var(--color-fg-on-$(color));
 
-      &[data-hovered]:not([aria-disabled]) {
+      &[data-hovered]:not([data-loading]) {
         background-color: var(--color-bg-$(color)-hover);
       }
 
-      &[data-active]:not([aria-disabled]) {
+      &[data-pressed]:not([data-loading]) {
         background-color: var(--color-bg-$(color)-active);
       }
     }
@@ -33,11 +33,11 @@
       outline: var(--border-width-1) solid var(--color-bd-$(color)) !important;
       outline-offset: calc(-1 * var(--border-width-1)) !important;
 
-      &[data-hovered]:not([aria-disabled]) {
+      &[data-hovered]:not([data-loading]) {
         background-color: var(--color-bg-$(color)-subtle-hover);
       }
 
-      &[data-active]:not([aria-disabled]) {
+      &[data-pressed]:not([data-loading]) {
         background-color: var(--color-bg-$(color)-subtle-active);
       }
     }
@@ -46,11 +46,11 @@
       background: transparent;
       color: var(--color-fg-$(color));
 
-      &[data-hovered]:not([aria-disabled]) {
+      &[data-hovered]:not([data-loading]) {
         background: var(--color-bg-$(color)-subtle-hover);
       }
 
-      &[data-active]:not([aria-disabled]) {
+      &[data-pressed]:not([data-loading]) {
         background: var(--color-bg-$(color)-subtle-active);
       }
     }
@@ -83,10 +83,10 @@
 
   /**
   * ----------------------------------------------------------------------------
-  * FOCUSSED
+  * FOCUS VISIBLE
   *-----------------------------------------------------------------------------
   */
-  &[data-focused] {
+  &[data-focus-visible]:not([data-loading]) {
     box-shadow:
       0 0 0 2px var(--color-bg),
       0 0 0 4px var(--color-bd-focus);
@@ -97,7 +97,7 @@
   * DISABLED
   *-----------------------------------------------------------------------------
   */
-  &[aria-disabled] {
+  &[data-disabled] {
     cursor: not-allowed;
     opacity: var(--opacity-disabled);
   }
@@ -109,8 +109,6 @@
   */
   &[data-loading] {
     cursor: default;
-    /** adding opacity 1 here because we are lowering opacity for aria-disabled and when loading is true, aria-disabled is also true  */
-    opacity: 1;
   }
 
   &[data-loading] [data-content] {
@@ -198,20 +196,3 @@
     padding-inline-start: calc(var(--icon-size-2) + var(--inner-spacing-1));
   }
 }
-
-/**
- * We have this Bug in Firefox where we are unable to drag
- * buttons - https://bugzilla.mozilla.org/show_bug.cgi?id=568313
- *
- * We found a solution here - https://stackoverflow.com/a/43888410
- */
-.dragContainer {
-  &:after {
-    content: "";
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-  }
-}
diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/types.ts b/app/client/packages/design-system/widgets/src/components/Button/src/types.ts
index 918c6217df..0bce7a4e8e 100644
--- a/app/client/packages/design-system/widgets/src/components/Button/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Button/src/types.ts
@@ -1,4 +1,4 @@
-import type { ButtonProps as HeadlessButtonProps } from "@design-system/headless";
+import type { ButtonProps as HeadlessButtonProps } from "react-aria-components";
 
 import type { IconProps } from "../../Icon";
 import type { COLORS, SIZES } from "../../../shared";
@@ -31,8 +31,6 @@ export interface ButtonProps extends HeadlessButtonProps {
    * @default accent
    */
   iconPosition?: keyof typeof BUTTON_ICON_POSITIONS;
-  /** Makes the button visually and functionaly disabled but focusable */
-  visuallyDisabled?: boolean;
   /** Indicates the loading text that will be used by screen readers
    * when the button is in loading state
    * @default Loading...
diff --git a/app/client/packages/design-system/widgets/src/components/ButtonGroup/src/ButtonGroupItem.tsx b/app/client/packages/design-system/widgets/src/components/ButtonGroup/src/ButtonGroupItem.tsx
index b9fa332ff3..a3519ed338 100644
--- a/app/client/packages/design-system/widgets/src/components/ButtonGroup/src/ButtonGroupItem.tsx
+++ b/app/client/packages/design-system/widgets/src/components/ButtonGroup/src/ButtonGroupItem.tsx
@@ -1,12 +1,12 @@
+import type { ForwardedRef } from "react";
 import React, { forwardRef } from "react";
 import { Button } from "@design-system/widgets";
 
 import type { ButtonGroupItemProps } from "./types";
-import type { ButtonRef as HeadlessButtonRef } from "@design-system/headless";
 
 const _ButtonGroupItem = <T extends object>(
   props: ButtonGroupItemProps<T>,
-  ref: HeadlessButtonRef,
+  ref: ForwardedRef<HTMLButtonElement>,
 ) => {
   const { color, item, variant, ...rest } = props;
 
diff --git a/app/client/packages/design-system/widgets/src/components/IconButton/src/IconButton.tsx b/app/client/packages/design-system/widgets/src/components/IconButton/src/IconButton.tsx
index c698596160..5782fb16fe 100644
--- a/app/client/packages/design-system/widgets/src/components/IconButton/src/IconButton.tsx
+++ b/app/client/packages/design-system/widgets/src/components/IconButton/src/IconButton.tsx
@@ -1,12 +1,15 @@
 import React, { forwardRef } from "react";
-import type { ButtonRef as HeadlessButtonRef } from "@design-system/headless";
+import type { ForwardedRef } from "react";
 
 import { Button } from "../../Button";
 import type { ButtonProps } from "../../Button";
 
 export type IconButtonProps = Omit<ButtonProps, "iconPosition" | "children">;
 
-const _IconButton = (props: IconButtonProps, ref: HeadlessButtonRef) => {
+const _IconButton = (
+  props: IconButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+) => {
   return <Button data-icon-button="" ref={ref} {...props} />;
 };
 
diff --git a/app/client/packages/storybook/.storybook/main.ts b/app/client/packages/storybook/.storybook/main.ts
index 4eee3f743f..2916061f5c 100644
--- a/app/client/packages/storybook/.storybook/main.ts
+++ b/app/client/packages/storybook/.storybook/main.ts
@@ -1,10 +1,23 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import * as glob from "glob";
+import * as path from "path";
+
+const dsDir = path.resolve(__dirname, "../../design-system");
+
+function getStories() {
+  if (process.env.CHROMATIC) {
+    return ["../../design-system/**/*.chromatic.stories.@(ts|tsx)"];
+  }
+
+  const tsStories = glob
+    .sync(`${dsDir}/**/*.stories.@(ts|tsx)`, { nosort: true })
+    .filter((storyPath) => !storyPath.includes("chromatic"));
+
+  return ["../../design-system/**/*.mdx", ...tsStories];
+}
 
 const config: StorybookConfig = {
-  stories: [
-    "../../design-system/**/*.mdx",
-    "../../design-system/**/*.stories.@(ts|tsx)",
-  ],
+  stories: getStories(),
 
   addons: [
     "@chromatic-com/storybook",