diff --git a/frontend/src/components/input-output/add-source/AddSource.jsx b/frontend/src/components/input-output/add-source/AddSource.jsx
index eb56d76a2..ddaff0a34 100644
--- a/frontend/src/components/input-output/add-source/AddSource.jsx
+++ b/frontend/src/components/input-output/add-source/AddSource.jsx
@@ -10,6 +10,22 @@ import { EmptyState } from "../../widgets/empty-state/EmptyState";
 import { ConfigureDs } from "../configure-ds/ConfigureDs";
 import { useExceptionHandler } from "../../../hooks/useExceptionHandler";
 
+let transformLlmWhispererJsonSchema;
+let LLMW_V2_ID;
+let PLAN_TYPES;
+let unstractSubscriptionPlanStore;
+try {
+  transformLlmWhispererJsonSchema =
+    require("../../../plugins/unstract-subscription/helper/transformLlmWhispererJsonSchema").transformLlmWhispererJsonSchema;
+  LLMW_V2_ID =
+    require("../../../plugins/unstract-subscription/helper/transformLlmWhispererJsonSchema").LLMW_V2_ID;
+  PLAN_TYPES =
+    require("../../../plugins/unstract-subscription/helper/constants").PLAN_TYPES;
+  unstractSubscriptionPlanStore = require("../../../plugins/store/unstract-subscription-plan-store");
+} catch (err) {
+  // Ignore if not available
+}
+
 function AddSource({
   selectedSourceId,
   selectedSourceName,
@@ -32,6 +48,13 @@ function AddSource({
   const axiosPrivate = useAxiosPrivate();
   const handleException = useExceptionHandler();
 
+  let planType;
+  if (unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore) {
+    planType = unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore(
+      (state) => state?.unstractSubscriptionPlan?.planType
+    );
+  }
+
   useEffect(() => {
     if (!selectedSourceId) {
       setSpec({});
@@ -56,7 +79,19 @@ function AddSource({
       .then((res) => {
         const data = res?.data;
         setFormData(metadata || {});
-        setSpec(data?.json_schema || {});
+
+        if (
+          LLMW_V2_ID &&
+          transformLlmWhispererJsonSchema &&
+          PLAN_TYPES &&
+          selectedSourceId === LLMW_V2_ID &&
+          planType === PLAN_TYPES?.PAID
+        ) {
+          setSpec(transformLlmWhispererJsonSchema(data?.json_schema || {}));
+        } else {
+          setSpec(data?.json_schema || {});
+        }
+
         if (data?.oauth) {
           setOAuthProvider(data?.python_social_auth_backend);
         } else {
diff --git a/frontend/src/components/rjsf-custom-widgets/alt-date-time-widget/AltDateTimeWidget.jsx b/frontend/src/components/rjsf-custom-widgets/alt-date-time-widget/AltDateTimeWidget.jsx
index 25112fa3b..3a20feb3a 100644
--- a/frontend/src/components/rjsf-custom-widgets/alt-date-time-widget/AltDateTimeWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/alt-date-time-widget/AltDateTimeWidget.jsx
@@ -11,6 +11,7 @@ const AltDateTimeWidget = ({
   label,
   schema,
   required,
+  readonly,
 }) => {
   const description = schema?.description || "";
   const handleDateChange = (date) => {
@@ -34,10 +35,12 @@ const AltDateTimeWidget = ({
         id={id}
         value={value ? moment(value) : null}
         onChange={handleDateChange}
+        disabled={readonly}
       />
       <TimePicker
         value={value ? moment(value) : null}
         onChange={handleTimeChange}
+        disabled={readonly}
       />
     </RjsfWidgetLayout>
   );
@@ -49,7 +52,8 @@ AltDateTimeWidget.propTypes = {
   onChange: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
-  required: PropTypes.bool,
+  required: PropTypes.bool.isRequired,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { AltDateTimeWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/alt-date-widget/AltDateWidget.jsx b/frontend/src/components/rjsf-custom-widgets/alt-date-widget/AltDateWidget.jsx
index 7c996c060..d683ed55d 100644
--- a/frontend/src/components/rjsf-custom-widgets/alt-date-widget/AltDateWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/alt-date-widget/AltDateWidget.jsx
@@ -4,7 +4,8 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const AltDateWidget = ({ id, value, onChange, label, schema, required }) => {
+const AltDateWidget = (props) => {
+  const { id, value, onChange, label, schema, required, readonly } = props;
   const description = schema?.description || "";
 
   const handleDateChange = (date) => {
@@ -21,6 +22,7 @@ const AltDateWidget = ({ id, value, onChange, label, schema, required }) => {
         id={id}
         value={value ? moment(value) : null}
         onChange={handleDateChange}
+        disabled={readonly}
       />
     </RjsfWidgetLayout>
   );
@@ -33,6 +35,7 @@ AltDateWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { AltDateWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/array-field/ArrayField.jsx b/frontend/src/components/rjsf-custom-widgets/array-field/ArrayField.jsx
index 434847c50..bc91174c7 100644
--- a/frontend/src/components/rjsf-custom-widgets/array-field/ArrayField.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/array-field/ArrayField.jsx
@@ -7,7 +7,7 @@ import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidget
 import "./ArrayField.css";
 
 const ArrayField = (props) => {
-  const { schema, formData, onChange, required } = props;
+  const { schema, formData, onChange, required, readonly } = props;
   const [dropdownList, setDropdownList] = useState([]);
   const [options, setOptions] = useState([]);
 
@@ -54,6 +54,7 @@ const ArrayField = (props) => {
         value={formData}
         onChange={handleChange}
         options={options}
+        disabled={readonly}
       />
     </RjsfWidgetLayout>
   );
@@ -65,6 +66,7 @@ ArrayField.propTypes = {
   formData: PropTypes.array,
   onChange: PropTypes.func.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { ArrayField };
diff --git a/frontend/src/components/rjsf-custom-widgets/checkbox-widget/CheckboxWidget.jsx b/frontend/src/components/rjsf-custom-widgets/checkbox-widget/CheckboxWidget.jsx
index 4ea6ba0b1..5d508cde4 100644
--- a/frontend/src/components/rjsf-custom-widgets/checkbox-widget/CheckboxWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/checkbox-widget/CheckboxWidget.jsx
@@ -1,8 +1,17 @@
 import { Checkbox, Space, Typography } from "antd";
 import PropTypes from "prop-types";
+
 import "./CheckboxWidget.css";
 import CustomMarkdown from "../../helpers/custom-markdown/CustomMarkdown";
-const CheckboxWidget = ({ id, value, onChange, label, schema, required }) => {
+const CheckboxWidget = ({
+  id,
+  value,
+  onChange,
+  label,
+  schema,
+  required,
+  readonly,
+}) => {
   const description = schema?.description || "";
   const handleCheckboxChange = (event) => {
     onChange(event.target.checked);
@@ -10,7 +19,12 @@ const CheckboxWidget = ({ id, value, onChange, label, schema, required }) => {
 
   return (
     <Space direction="vertical" className="checkbox-widget-main" size={0}>
-      <Checkbox id={id} checked={value} onChange={handleCheckboxChange}>
+      <Checkbox
+        id={id}
+        checked={value}
+        onChange={handleCheckboxChange}
+        disabled={readonly}
+      >
         <Typography>
           {required && <span className="form-item-required">* </span>}
           {label}
@@ -34,6 +48,7 @@ CheckboxWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { CheckboxWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/checkboxes-widget/CheckboxesWidget.jsx b/frontend/src/components/rjsf-custom-widgets/checkboxes-widget/CheckboxesWidget.jsx
index 76fbf0873..3fb43bb6f 100644
--- a/frontend/src/components/rjsf-custom-widgets/checkboxes-widget/CheckboxesWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/checkboxes-widget/CheckboxesWidget.jsx
@@ -11,6 +11,7 @@ const CheckboxesWidget = ({
   label,
   schema,
   required,
+  readonly,
 }) => {
   const description = schema?.description || "";
   const handleCheckboxChange = (optionValue) => {
@@ -35,6 +36,7 @@ const CheckboxesWidget = ({
           key={option.value}
           checked={value?.includes(option.value)}
           onChange={() => handleCheckboxChange(option.value)}
+          disabled={readonly}
         >
           {option.label}
         </Checkbox>
@@ -51,6 +53,7 @@ CheckboxesWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { CheckboxesWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/color-widget/ColorWidget.jsx b/frontend/src/components/rjsf-custom-widgets/color-widget/ColorWidget.jsx
index d6a1b4750..7bb0ea6db 100644
--- a/frontend/src/components/rjsf-custom-widgets/color-widget/ColorWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/color-widget/ColorWidget.jsx
@@ -3,7 +3,15 @@ import { Input } from "antd";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const ColorWidget = ({ id, value, onChange, schema, label, required }) => {
+const ColorWidget = ({
+  id,
+  value,
+  onChange,
+  schema,
+  label,
+  required,
+  readonly,
+}) => {
   const description = schema?.description || "";
 
   const handleColorChange = (event) => {
@@ -16,7 +24,13 @@ const ColorWidget = ({ id, value, onChange, schema, label, required }) => {
       description={description}
       required={required}
     >
-      <Input type="color" id={id} value={value} onChange={handleColorChange} />
+      <Input
+        type="color"
+        id={id}
+        value={value}
+        onChange={handleColorChange}
+        disabled={readonly}
+      />
     </RjsfWidgetLayout>
   );
 };
@@ -28,6 +42,7 @@ ColorWidget.propTypes = {
   schema: PropTypes.object.isRequired,
   label: PropTypes.string.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { ColorWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/date-time-widget/DateTimeWidget.jsx b/frontend/src/components/rjsf-custom-widgets/date-time-widget/DateTimeWidget.jsx
index a3b2df307..74d28bc99 100644
--- a/frontend/src/components/rjsf-custom-widgets/date-time-widget/DateTimeWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/date-time-widget/DateTimeWidget.jsx
@@ -4,7 +4,15 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const DateTimeWidget = ({ id, value, onChange, label, schema, required }) => {
+const DateTimeWidget = ({
+  id,
+  value,
+  onChange,
+  label,
+  schema,
+  required,
+  readonly,
+}) => {
   const description = schema?.description || "";
   const handleDateTimeChange = (dateTime) => {
     onChange(dateTime?.toISOString());
@@ -21,6 +29,7 @@ const DateTimeWidget = ({ id, value, onChange, label, schema, required }) => {
         id={id}
         value={value ? moment(value) : null}
         onChange={handleDateTimeChange}
+        disabled={readonly}
       />
     </RjsfWidgetLayout>
   );
@@ -33,6 +42,7 @@ DateTimeWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { DateTimeWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/date-widget/DateWidget.jsx b/frontend/src/components/rjsf-custom-widgets/date-widget/DateWidget.jsx
index 06ea0a494..5e4e5cd11 100644
--- a/frontend/src/components/rjsf-custom-widgets/date-widget/DateWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/date-widget/DateWidget.jsx
@@ -4,7 +4,15 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const DateWidget = ({ id, value, onChange, label, schema, required }) => {
+const DateWidget = ({
+  id,
+  value,
+  onChange,
+  label,
+  schema,
+  required,
+  readonly,
+}) => {
   const description = schema?.description || "";
   const handleDateChange = (date) => {
     onChange(date?.toISOString());
@@ -20,6 +28,7 @@ const DateWidget = ({ id, value, onChange, label, schema, required }) => {
         id={id}
         value={value ? moment(value) : null}
         onChange={handleDateChange}
+        disabled={readonly}
       />
     </RjsfWidgetLayout>
   );
@@ -32,6 +41,7 @@ DateWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { DateWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/email-widget/EmailWidget.jsx b/frontend/src/components/rjsf-custom-widgets/email-widget/EmailWidget.jsx
index 711cb0b5d..183e0c0b7 100644
--- a/frontend/src/components/rjsf-custom-widgets/email-widget/EmailWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/email-widget/EmailWidget.jsx
@@ -3,7 +3,15 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const EmailWidget = ({ id, value, onChange, label, schema, required }) => {
+const EmailWidget = ({
+  id,
+  value,
+  onChange,
+  label,
+  schema,
+  required,
+  readonly,
+}) => {
   const description = schema?.description || "";
   const handleEmailChange = (event) => {
     onChange(event.target.value);
@@ -15,7 +23,13 @@ const EmailWidget = ({ id, value, onChange, label, schema, required }) => {
       description={description}
       required={required}
     >
-      <Input type="email" id={id} value={value} onChange={handleEmailChange} />
+      <Input
+        type="email"
+        id={id}
+        value={value}
+        onChange={handleEmailChange}
+        disabled={readonly}
+      />
     </RjsfWidgetLayout>
   );
 };
@@ -27,6 +41,7 @@ EmailWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { EmailWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/file-widget/FileWidget.jsx b/frontend/src/components/rjsf-custom-widgets/file-widget/FileWidget.jsx
index 4a43ed121..9a43dcaaa 100644
--- a/frontend/src/components/rjsf-custom-widgets/file-widget/FileWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/file-widget/FileWidget.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const FileWidget = ({ id, onChange, label, schema, required }) => {
+const FileWidget = ({ id, onChange, label, schema, required, readonly }) => {
   const description = schema?.description || "";
   const handleFileChange = (info) => {
     if (info.file.status === "done") {
@@ -19,7 +19,7 @@ const FileWidget = ({ id, onChange, label, schema, required }) => {
       description={description}
       required={required}
     >
-      <Upload id={id} onChange={handleFileChange}>
+      <Upload id={id} onChange={handleFileChange} disabled={readonly}>
         <Button icon={<UploadOutlined />}>Upload File</Button>
       </Upload>
     </RjsfWidgetLayout>
@@ -32,6 +32,7 @@ FileWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { FileWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/password-widget/PasswordWidget.jsx b/frontend/src/components/rjsf-custom-widgets/password-widget/PasswordWidget.jsx
index e7f8f53db..b21d5339a 100644
--- a/frontend/src/components/rjsf-custom-widgets/password-widget/PasswordWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/password-widget/PasswordWidget.jsx
@@ -3,7 +3,15 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const PasswordWidget = ({ id, value, onChange, label, schema, required }) => {
+const PasswordWidget = ({
+  id,
+  value,
+  onChange,
+  label,
+  schema,
+  required,
+  readonly,
+}) => {
   const description = schema?.description || "";
   const handlePasswordChange = (event) => {
     onChange(event.target.value);
@@ -15,7 +23,12 @@ const PasswordWidget = ({ id, value, onChange, label, schema, required }) => {
       description={description}
       required={required}
     >
-      <Input.Password id={id} value={value} onChange={handlePasswordChange} />
+      <Input.Password
+        id={id}
+        value={value}
+        onChange={handlePasswordChange}
+        disabled={readonly}
+      />
     </RjsfWidgetLayout>
   );
 };
@@ -27,6 +40,7 @@ PasswordWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { PasswordWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/select-widget/SelectWidget.jsx b/frontend/src/components/rjsf-custom-widgets/select-widget/SelectWidget.jsx
index 49af88ee7..6540dfdab 100644
--- a/frontend/src/components/rjsf-custom-widgets/select-widget/SelectWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/select-widget/SelectWidget.jsx
@@ -1,10 +1,12 @@
 import { Form, Select, Space, Typography } from "antd";
 import PropTypes from "prop-types";
+
 import CustomMarkdown from "../../helpers/custom-markdown/CustomMarkdown";
 
 const { Option } = Select;
 const SelectWidget = (props) => {
-  const { id, value, options, onChange, label, schema, rawErrors } = props;
+  const { id, value, options, onChange, label, schema, rawErrors, readonly } =
+    props;
   const description = schema?.description || "";
 
   const handleSelectChange = (selectedValue) => {
@@ -22,6 +24,7 @@ const SelectWidget = (props) => {
             value={value}
             onChange={handleSelectChange}
             showSearch
+            disabled={readonly}
           >
             {options?.enumOptions &&
               options.enumOptions.map((option, index) => (
@@ -51,6 +54,7 @@ SelectWidget.propTypes = {
   rawErrors: PropTypes.array,
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { SelectWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/text-widget/TextWidget.jsx b/frontend/src/components/rjsf-custom-widgets/text-widget/TextWidget.jsx
index 6951b7c64..30017f32b 100644
--- a/frontend/src/components/rjsf-custom-widgets/text-widget/TextWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/text-widget/TextWidget.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
 const TextWidget = (props) => {
-  const { id, value, onChange, label, schema, required } = props;
+  const { id, value, onChange, label, schema, required, readonly } = props;
   const description = schema?.description || "";
   const handleTextChange = (event) => {
     onChange(event.target.value);
@@ -16,7 +16,12 @@ const TextWidget = (props) => {
       description={description}
       required={required}
     >
-      <Input id={id} value={value} onChange={handleTextChange} />
+      <Input
+        id={id}
+        value={value}
+        onChange={handleTextChange}
+        disabled={readonly}
+      />
     </RjsfWidgetLayout>
   );
 };
@@ -28,6 +33,7 @@ TextWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { TextWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/time-widget/TimeWidget.jsx b/frontend/src/components/rjsf-custom-widgets/time-widget/TimeWidget.jsx
index bad749ffa..81c371c76 100644
--- a/frontend/src/components/rjsf-custom-widgets/time-widget/TimeWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/time-widget/TimeWidget.jsx
@@ -4,7 +4,15 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const TimeWidget = ({ id, value, onChange, label, schema, required }) => {
+const TimeWidget = ({
+  id,
+  value,
+  onChange,
+  label,
+  schema,
+  required,
+  readonly,
+}) => {
   const description = schema?.description || "";
   const handleTimeChange = (time) => {
     onChange(time?.toISOString());
@@ -20,6 +28,7 @@ const TimeWidget = ({ id, value, onChange, label, schema, required }) => {
         id={id}
         value={value ? moment(value) : null}
         onChange={handleTimeChange}
+        disabled={readonly}
       />
     </RjsfWidgetLayout>
   );
@@ -32,6 +41,7 @@ TimeWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { TimeWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/up-down-widget/UpDownWidget.jsx b/frontend/src/components/rjsf-custom-widgets/up-down-widget/UpDownWidget.jsx
index 23f0cf8e8..e33f8b0ae 100644
--- a/frontend/src/components/rjsf-custom-widgets/up-down-widget/UpDownWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/up-down-widget/UpDownWidget.jsx
@@ -3,7 +3,15 @@ import PropTypes from "prop-types";
 
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout.jsx";
 
-const UpDownWidget = ({ id, value, onChange, label, schema, required }) => {
+const UpDownWidget = ({
+  id,
+  value,
+  onChange,
+  label,
+  schema,
+  required,
+  readonly,
+}) => {
   const description = schema?.description || "";
   const handleNumberChange = (numberValue) => {
     onChange(numberValue);
@@ -15,7 +23,12 @@ const UpDownWidget = ({ id, value, onChange, label, schema, required }) => {
       description={description}
       required={required}
     >
-      <InputNumber id={id} value={value} onChange={handleNumberChange} />
+      <InputNumber
+        id={id}
+        value={value}
+        onChange={handleNumberChange}
+        disabled={readonly}
+      />
     </RjsfWidgetLayout>
   );
 };
@@ -27,6 +40,7 @@ UpDownWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { UpDownWidget };
diff --git a/frontend/src/components/rjsf-custom-widgets/url-widget/URLWidget.jsx b/frontend/src/components/rjsf-custom-widgets/url-widget/URLWidget.jsx
index ab1425713..4b501203e 100644
--- a/frontend/src/components/rjsf-custom-widgets/url-widget/URLWidget.jsx
+++ b/frontend/src/components/rjsf-custom-widgets/url-widget/URLWidget.jsx
@@ -1,9 +1,10 @@
 import { Input } from "antd";
 import PropTypes from "prop-types";
+
 import { RjsfWidgetLayout } from "../../../layouts/rjsf-widget-layout/RjsfWidgetLayout";
 
 const URLWidget = (props) => {
-  const { id, value, onChange, label, schema, required } = props;
+  const { id, value, onChange, label, schema, required, readonly } = props;
   const description = schema?.description || "";
   const handleURLChange = (event) => {
     onChange(event.target.value);
@@ -15,7 +16,13 @@ const URLWidget = (props) => {
       description={description}
       required={required}
     >
-      <Input type="url" id={id} value={value} onChange={handleURLChange} />
+      <Input
+        type="url"
+        id={id}
+        value={value}
+        onChange={handleURLChange}
+        disabled={readonly}
+      />
     </RjsfWidgetLayout>
   );
 };
@@ -27,6 +34,7 @@ URLWidget.propTypes = {
   label: PropTypes.string.isRequired,
   schema: PropTypes.object.isRequired,
   required: PropTypes.bool,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export { URLWidget };