diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/Modal.tsx b/app/client/packages/design-system/widgets/src/components/Modal/src/Modal.tsx
index 46226b8d962c..fc3764d1dc9b 100644
--- a/app/client/packages/design-system/widgets/src/components/Modal/src/Modal.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Modal/src/Modal.tsx
@@ -1,14 +1,16 @@
+import clsx from "clsx";
 import React from "react";
 import { Popover, PopoverModalContent } from "@appsmith/wds-headless";
-import styles from "./styles.module.css";
+
 import type { ModalProps } from "./types";
-import clsx from "clsx";
+import styles from "./styles.module.css";
 
 export const Modal = (props: ModalProps) => {
   const {
     children,
-    dataAttributes = {},
     overlayClassName,
+    overlayProps = {},
+    size = "medium",
     triggerRef,
     ...rest
   } = props;
@@ -17,7 +19,8 @@ export const Modal = (props: ModalProps) => {
     // don't forget to change the transition-duration CSS as well
     <Popover duration={200} modal triggerRef={triggerRef} {...rest}>
       <PopoverModalContent
-        {...dataAttributes}
+        data-size={size}
+        {...overlayProps}
         overlayClassName={clsx(styles.overlay, overlayClassName)}
       >
         {children}
diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts b/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts
index ac0629904be3..df2b3fe57291 100644
--- a/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts
@@ -3,6 +3,7 @@ import type {
   PopoverProps,
 } from "@appsmith/wds-headless";
 import type { ReactNode } from "react";
+import type { SIZES } from "@appsmith/wds";
 
 export interface ModalProps
   extends Pick<
@@ -15,9 +16,14 @@ export interface ModalProps
       | "dismissClickOutside"
     >,
     Pick<PopoverModalContentProps, "overlayClassName"> {
-  dataAttributes?: Record<string, string>;
+  /** size of the modal
+   * @default medium
+   */
+  size?: Omit<keyof typeof SIZES, "xSmall">;
   /** The children of the component. */
   children: ReactNode;
+  /** Additional props to be passed to the overlay */
+  overlayProps?: Record<string, string>;
 }
 
 export interface ModalContentProps {
diff --git a/app/client/packages/design-system/widgets/src/components/Modal/stories/ModalExamples.tsx b/app/client/packages/design-system/widgets/src/components/Modal/stories/ModalExamples.tsx
index 9a4f72f0c974..79f5189c57b0 100644
--- a/app/client/packages/design-system/widgets/src/components/Modal/stories/ModalExamples.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Modal/stories/ModalExamples.tsx
@@ -51,10 +51,10 @@ export const ModalExamples = () => {
         }}
       />
       <Modal
-        dataAttributes={{ "data-size": "large" }}
         initialFocus={2}
         isOpen={isLargeOpen}
         setOpen={setLargeOpen}
+        size="large"
         triggerRef={largeRef}
       >
         <Unstyled>
@@ -121,10 +121,10 @@ export const ModalExamples = () => {
         </Unstyled>
       </Modal>
       <Modal
-        dataAttributes={{ "data-size": "small" }}
         initialFocus={2}
         isOpen={isSmallOpen}
         setOpen={setSmallOpen}
+        size="small"
         triggerRef={smallRef}
       >
         <Unstyled>
diff --git a/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx b/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx
index cd72b7137e1e..1b43400a6880 100644
--- a/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx
+++ b/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx
@@ -202,10 +202,10 @@ export const ComplexForm = () => {
           Ok
         </Button>
         <Modal
-          dataAttributes={{ "data-size": "small" }}
           initialFocus={2}
           isOpen={isModalOpen}
           setOpen={setModalOpen}
+          size="small"
           triggerRef={submitRef}
         >
           <ModalContent>
diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSModalWidget/widget/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSModalWidget/widget/index.tsx
index 7af7d3e668c5..cd5410d2c10b 100644
--- a/app/client/src/modules/ui-builder/ui/wds/WDSModalWidget/widget/index.tsx
+++ b/app/client/src/modules/ui-builder/ui/wds/WDSModalWidget/widget/index.tsx
@@ -140,16 +140,17 @@ class WDSModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
 
     return (
       <Modal
-        dataAttributes={{
+        isOpen={this.state.isVisible as boolean}
+        onClose={this.onModalClose}
+        overlayProps={{
           [AnvilDataAttributes.MODAL_SIZE]: this.props.size,
           [AnvilDataAttributes.WIDGET_NAME]: this.props.widgetName,
           [AnvilDataAttributes.IS_SELECTED_WIDGET]: this.props.isWidgetSelected
             ? "true"
             : "false",
         }}
-        isOpen={this.state.isVisible as boolean}
-        onClose={this.onModalClose}
         setOpen={(val) => this.setState({ isVisible: val })}
+        size={this.props.size}
       >
         {this.state.isVisible && (
           <ModalContent className={modalClassNames.trim()}>