diff --git a/app/client/packages/design-system/widgets/src/components/Flex/Flex.tsx b/app/client/packages/design-system/widgets/src/components/Flex/Flex.tsx
index 70608dc7e8..d4b76200e8 100644
--- a/app/client/packages/design-system/widgets/src/components/Flex/Flex.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Flex/Flex.tsx
@@ -1,14 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { StyledContainerFlex, StyledFlex } from "./index.styled";
 import type { FlexProps } from "./types";
 
-export const Flex = (props: FlexProps) => {
+const _Flex = (props: FlexProps, ref: React.Ref<HTMLDivElement>) => {
   const {
     alignContent,
     alignItems,
     alignSelf,
     children,
-    className,
     columnGap,
     direction,
     flex,
@@ -17,6 +16,7 @@ export const Flex = (props: FlexProps) => {
     flexShrink,
     gap,
     height,
+    id,
     isContainer = false,
     isHidden = false,
     justifyContent,
@@ -37,7 +37,6 @@ export const Flex = (props: FlexProps) => {
     paddingRight,
     paddingTop,
     rowGap,
-    style,
     width,
     wrap,
   } = props;
@@ -77,8 +76,8 @@ export const Flex = (props: FlexProps) => {
         $rowGap={rowGap}
         $width={width}
         $wrap={wrap}
-        className={className}
-        style={style}
+        id={id}
+        ref={ref}
       >
         {children}
       </StyledFlex>
@@ -92,3 +91,5 @@ export const Flex = (props: FlexProps) => {
     </>
   );
 };
+
+export const Flex = forwardRef(_Flex);
diff --git a/app/client/packages/design-system/widgets/src/components/Flex/types.ts b/app/client/packages/design-system/widgets/src/components/Flex/types.ts
index e9ed4a0c87..8c63d8c935 100644
--- a/app/client/packages/design-system/widgets/src/components/Flex/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Flex/types.ts
@@ -1,4 +1,4 @@
-import type { ReactNode, CSSProperties } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import type { OmitRename } from "../../utils";
 import type { SizingDimension, SpacingDimension } from "./dimensions";
 
@@ -179,6 +179,11 @@ export interface FlexProps {
   className?: string;
   /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use style props instead. */
   style?: CSSProperties;
+  /** Sets the HTML [id](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) for the element. */
+  id?: string;
 }
 
-export type StyledFlexProps = OmitRename<FlexProps, "style" | "className">;
+export type StyledFlexProps = OmitRename<
+  FlexProps,
+  "style" | "className" | "id"
+>;