diff --git a/frontend/assets/images/icons/widgets/index.jsx b/frontend/assets/images/icons/widgets/index.jsx
index 058bf838e1..7ecb678d1b 100644
--- a/frontend/assets/images/icons/widgets/index.jsx
+++ b/frontend/assets/images/icons/widgets/index.jsx
@@ -137,6 +137,7 @@ const WidgetIcon = (props) => {
     case 'map':
       return <Map {...props} />;
     case 'modal':
+    case 'modallegacy':
       return <Modal {...props} />;
     case 'multiselect':
     case 'multiselectv2':
diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
index 436c04a430..bb4d4fc69b 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
@@ -29,7 +29,7 @@ export const ConfigHandle = ({
   );
 
   const setComponentToInspect = useStore((state) => state.setComponentToInspect);
-
+  const isModal = componentType === 'Modal' || componentType === 'ModalV2';
   const _showHandle = useStore((state) => {
     const isWidgetHovered = state.getHoveredComponentForGrid() === id || state.hoveredComponentBoundaryId === id;
     const anyComponentHovered = state.getHoveredComponentForGrid() !== '' || state.hoveredComponentBoundaryId !== '';
@@ -37,7 +37,7 @@ export const ConfigHandle = ({
     return (
       isWidgetHovered ||
       (showHandle &&
-        (!isMultipleComponentsSelected || (componentType === 'Modal' && isModalOpen)) &&
+        (!isMultipleComponentsSelected || (isModal && isModalOpen)) &&
         !anyComponentHovered)
     );
   }, shallow);
@@ -63,7 +63,7 @@ export const ConfigHandle = ({
     >
       <span
         style={{
-          background: componentType === 'Modal' && isModalOpen ? '#c6cad0' : '#4D72FA',
+          background: isModal && isModalOpen ? '#c6cad0' : '#4D72FA',
         }}
         className="badge handle-content"
       >
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
index d27a66b0ec..6821f43ce2 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/Grid.jsx
@@ -22,6 +22,7 @@ import {
 } from './gridUtils';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { resolveWidgetFieldValue } from '@/_helpers/utils';
+import { dragContextBuilder, getAdjustedDropPosition } from './helpers/dragEnd';
 import useStore from '@/AppBuilder/_stores/store';
 import './Grid.css';
 import { NO_OF_GRIDS, SUBCONTAINER_WIDGETS } from '../appCanvasConstants';
@@ -54,6 +55,7 @@ export default function Grid({ gridWidth, currentLayout }) {
   const canvasWidth = NO_OF_GRIDS * gridWidth;
   const getHoveredComponentForGrid = useStore((state) => state.getHoveredComponentForGrid, shallow);
   const getResolvedComponent = useStore((state) => state.getResolvedComponent, shallow);
+  const [canvasBounds, setCanvasBounds] = useState(CANVAS_BOUNDS);
   const draggingComponentId = useGridStore((state) => state.draggingComponentId, shallow);
   const resizingComponentId = useGridStore((state) => state.resizingComponentId, shallow);
   const [dragParentId, setDragParentId] = useState(null);
@@ -794,7 +796,7 @@ export default function Grid({ gridWidth, currentLayout }) {
           //  to handle their own interactions like column resizing or card dragging
           let isDragOnInnerElement = false;
 
-          /* If the drag or click is on a calender popup draggable interactions are not executed so that popups and other components inside calender popup works. 
+          /* If the drag or click is on a calender popup draggable interactions are not executed so that popups and other components inside calender popup works.
             Also user dont need to drag an calender from using popup */
           if (hasParentWithClass(e.inputEvent.target, 'react-datepicker-popper')) {
             return false;
@@ -835,109 +837,47 @@ export default function Grid({ gridWidth, currentLayout }) {
             newDragParentId.current = null;
             setDragParentId(null);
 
-            if (!e.lastEvent) {
-              return;
+            if (!e.lastEvent) return;
+
+            // Build the drag context from the event
+            const dragContext = dragContextBuilder({ event: e, widgets: boxList });
+            const { target, source, dragged } = dragContext;
+
+            const targetSlotId = target?.slotId;
+            const targetGridWidth = useGridStore.getState().subContainerWidths[targetSlotId] || gridWidth;
+
+            // const restrictedWidgets = RESTRICTED_WIDGETS_CONFIG?.[source.widgetType] || [];
+            // const draggedWidgetType = dragged.widgetType;
+            const isParentChangeAllowed = dragContext.isDroppable;
+
+            // Compute new position
+            let { left, top } = getAdjustedDropPosition(e, target, isParentChangeAllowed, targetGridWidth, dragged);
+
+            const isModalToCanvas = source.isModal && target.slotId === 'real-canvas';
+
+            if (isParentChangeAllowed && !isModalToCanvas) {
+              const parent = target.slotId === 'real-canvas' ? null : target.slotId;
+              // Special case for Modal; If source widget is modal, prevent drops to canvas
+              handleDragEnd([{ id: e.target.id, x: left, y: top, parent }]);
+            } else {
+              const sourcegridWidth = useGridStore.getState().subContainerWidths[source.slotId] || gridWidth;
+
+              left = dragged.left * sourcegridWidth;
+              top = dragged.top;
+
+              !isModalToCanvas ??
+                toast.error(`${dragged.widgetType} is not compatible as a child component of ${target.widgetType}`);
             }
 
-            let draggedOverElemId = boxList.find((box) => box.id === e.target.id)?.parent;
-            let draggedOverElemIdType;
-            const parentComponent = boxList.find((box) => box.id === boxList.find((b) => b.id === e.target.id)?.parent);
-            let draggedOverElem;
-            if (document.elementFromPoint(e.clientX, e.clientY) && parentComponent?.component?.component !== 'Modal') {
-              const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
-              draggedOverElem = targetElems.find((ele) => {
-                const isOwnChild = e.target.contains(ele); // if the hovered element is a child of actual draged element its not considered
-                if (isOwnChild) return false;
+            // Apply transform for smooth transition
+            e.target.style.transform = `translate(${left}px, ${top}px)`;
 
-                let isDroppable = ele.id !== e.target.id && ele.classList.contains('drag-container-parent');
-                if (isDroppable) {
-                  let widgetId = ele?.getAttribute('component-id') || ele.id;
-                  let widgetType = boxList.find(({ id }) => id === widgetId)?.component?.component;
-                  if (!widgetType) {
-                    widgetId = widgetId.split('-').slice(0, -1).join('-');
-                    widgetType = boxList.find(({ id }) => id === widgetId)?.component?.component;
-                  }
-                  if (
-                    !['Calendar', 'Kanban', 'Form', 'Tabs', 'Modal', 'Listview', 'Container', 'Table'].includes(
-                      widgetType
-                    )
-                  ) {
-                    isDroppable = false;
-                  }
-                }
-                return isDroppable;
-              });
-              draggedOverElemId = draggedOverElem?.getAttribute('component-id') || draggedOverElem?.id;
-              draggedOverElemIdType = draggedOverElem?.getAttribute('data-parent-type');
-            }
-
-            const _gridWidth = useGridStore.getState().subContainerWidths[draggedOverElemId] || gridWidth;
-            const currentParentId = boxList.find(({ id: widgetId }) => e.target.id === widgetId)?.component?.parent;
-            let left = e.lastEvent?.translate[0];
-            let top = e.lastEvent?.translate[1];
-            if (
-              ['Listview', 'Kanban', 'Container'].includes(
-                boxList.find((box) => box.id === draggedOverElemId)?.component?.component
-              )
-            ) {
-              const elemContainer = e.target.closest('.real-canvas');
-              const containerHeight = elemContainer.clientHeight;
-              const maxY = containerHeight - e.target.clientHeight;
-              top = top > maxY ? maxY : top;
-            }
-
-            const currentWidget = boxList.find(({ id }) => id === e.target.id)?.component?.component;
-            const parentId = draggedOverElemId?.length > 36 ? draggedOverElemId.slice(0, 36) : draggedOverElemId;
-            draggedOverElemIdType = getComponentTypeFromId(parentId);
-            const parentWidget = draggedOverElemIdType === 'Kanban' ? 'Kanban_card' : draggedOverElemIdType;
-            const restrictedWidgets = RESTRICTED_WIDGETS_CONFIG?.[parentWidget] || [];
-            const isParentChangeAllowed = !restrictedWidgets.includes(currentWidget);
-            if (draggedOverElemId !== currentParentId) {
-              if (isParentChangeAllowed) {
-                const draggedOverWidget = boxList.find((box) => box.id === draggedOverElemId);
-
-                let parentWidgetType = boxList.find((box) => box.id === draggedOverElemId)?.component?.component;
-                // @TODO - When dropping back to container from canvas, the boxList doesn't have canvas header,
-                // boxList will return null. But we need to tell getMouseDistanceFromParentDiv parentWidgetType is container
-                // As container id is like 'canvas-2375e23765e-123234'
-                if (parentId && !parentWidgetType && draggedOverElemId.includes('-header')) {
-                  parentWidgetType = 'Container';
-                }
-
-                let { left: _left, top: _top } = getMouseDistanceFromParentDiv(
-                  e,
-                  draggedOverWidget?.component?.component === 'Kanban' ? draggedOverElem : draggedOverElemId,
-                  parentWidgetType
-                );
-                left = _left;
-                top = _top;
-              } else {
-                const currBox = boxList.find((l) => l.id === e.target.id);
-                left = currBox.left * gridWidth;
-                top = currBox.top;
-                toast.error(`${currentWidget} is not compatible as a child component of ${parentWidget}`);
-              }
-            }
-
-            e.target.style.transform = `translate(${Math.round(left / _gridWidth) * _gridWidth}px, ${
-              Math.round(top / GRID_HEIGHT) * GRID_HEIGHT
-            }px)`;
-            if (draggedOverElemId === currentParentId || isParentChangeAllowed) {
-              handleDragEnd([
-                {
-                  id: e.target.id,
-                  x: left,
-                  y: Math.round(top / GRID_HEIGHT) * GRID_HEIGHT,
-                  parent: isParentChangeAllowed ? draggedOverElemId : undefined,
-                },
-              ]);
-            }
-            const box = boxList.find((box) => box.id === e.target.id);
-            //
-            setTimeout(() => setSelectedComponents([box.id]));
+            // Select the dragged component after drop
+            setTimeout(() => setSelectedComponents([dragged.id]));
           } catch (error) {
-            console.log('draggedOverElemId->error', error);
+            console.error('Error in onDragEnd:', error);
           }
+          setCanvasBounds({ ...CANVAS_BOUNDS });
           hideGridLines();
           toggleCanvasUpdater();
         }}
@@ -965,16 +905,31 @@ export default function Grid({ gridWidth, currentLayout }) {
           }
 
           // Special case for Modal
-          const parentComponent = boxList.find((box) => box.id === boxList.find((b) => b.id === e.target.id)?.parent);
-          if (parentComponent?.component?.component === 'Modal') {
-            const elemContainer = e.target.closest('.real-canvas');
-            const containerHeight = elemContainer.clientHeight;
-            const containerWidth = elemContainer.clientWidth;
-            const maxY = containerHeight - e.target.clientHeight;
-            const maxLeft = containerWidth - e.target.clientWidth;
+          const oldParentId = boxList.find((b) => b.id === e.target.id)?.parent;
+          const parentId = oldParentId?.length > 36 ? oldParentId.slice(0, 36) : oldParentId;
+          const parentComponent = boxList.find((box) => box.id === parentId);
+          const parentWidgetType = parentComponent?.component?.component;
+          const isOnHeaderOrFooter = oldParentId
+            ? oldParentId.includes('-header') || oldParentId.includes('-footer')
+            : false;
+          const isParentModalSlot = parentWidgetType === 'ModalV2' && isOnHeaderOrFooter;
+          const isParentNewModal = parentComponent?.component?.component === 'ModalV2';
+          const isParentLegacyModal = parentComponent?.component?.component === 'Modal';
+          const isParentModal = isParentNewModal || isParentLegacyModal || isParentModalSlot;
 
-            top = top < 0 ? 0 : top > maxY ? maxY : top;
-            left = left < 0 ? 0 : left > maxLeft ? maxLeft : left;
+          if (isParentModal) {
+            const modalContainer = e.target.closest('.tj-modal-widget-content');
+            const mainCanvas = document.getElementById('real-canvas');
+
+            const mainRect = mainCanvas.getBoundingClientRect();
+            const modalRect = modalContainer.getBoundingClientRect();
+            const relativePosition = {
+              top: modalRect.top - mainRect.top,
+              right: mainRect.right - modalRect.right + modalContainer.offsetWidth,
+              bottom: modalRect.height + (modalRect.top - mainRect.top),
+              left: modalRect.left - mainRect.left,
+            };
+            setCanvasBounds({ ...relativePosition });
           }
 
           e.target.style.transform = `translate(${left}px, ${top}px)`;
@@ -1063,6 +1018,7 @@ export default function Grid({ gridWidth, currentLayout }) {
         snapGap={false}
         isDisplaySnapDigit={false}
         snapThreshold={GRID_HEIGHT}
+        bounds={canvasBounds}
         // Guidelines configuration
         elementGuidelines={elementGuidelines}
         snapDirections={{
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
index 4bfd030a3c..2889fc06db 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
@@ -291,6 +291,7 @@ export function getMouseDistanceFromParentDiv(event, id, parentWidgetType) {
       ? document.getElementById(id)
       : id
     : document.getElementsByClassName('real-canvas')[0];
+  parentDiv = id === 'real-canvas' ? document.getElementById('real-canvas') : document.getElementById('canvas-' + id);
   if (parentWidgetType === 'Container' || parentWidgetType === 'Modal') {
     parentDiv = document.getElementById('canvas-' + id);
   }
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/helpers/dragEnd.js b/frontend/src/AppBuilder/AppCanvas/Grid/helpers/dragEnd.js
new file mode 100644
index 0000000000..a9405d043e
--- /dev/null
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/helpers/dragEnd.js
@@ -0,0 +1,266 @@
+/**
+ * Drag Context Breakdown:
+ *
+ * This object encapsulates all relevant details about a drag event,
+ * grouping the **source (where the widget came from)** and **target (where it's being dropped)**.
+ *
+ * Core Concepts:
+ * - `draggedWidget` → The widget being dragged (`e.target`).
+ * - `sourceSlot` → The original parent container of `draggedWidget`.
+ *   - This could be a **header, footer, or a sub-container (like a container body)**.
+ * - `targetSlot` → The new parent container where `draggedWidget` is dropped.
+ * - `sourceWidget` → The **widget that owns** `sourceSlot` (its direct parent).
+ * - `targetWidget` → The **widget that owns** `targetSlot` (its direct parent).
+ *
+ * These entities are structured into a **contextual grouping**, allowing for easy access:
+ *
+ * {
+ *   source: {
+ *     widget: sourceWidget,  // The original widget that holds the source slot.
+ *     slot: sourceSlot,      // The slot where the widget was initially located.
+ *     id: sourceWidget.id,   // Unique identifier of the source widget.
+ *     slotId: sourceSlot.id, // Unique identifier of the source slot.
+ *
+ *     isModal: computed function,  // Checks if sourceWidget is a Modal.
+ *     slotType: computed function, // Determines if the slot is a header, footer, or body.
+ *     widgetType: computed function, // Returns the type of the widget (e.g., Table, Form, etc.).
+ *   },
+ *
+ *   target: {
+ *     widget: targetWidget,  // The new widget where the dragged widget is being placed.
+ *     slot: targetSlot,      // The slot inside `targetWidget` where the drop is happening.
+ *     id: targetWidget.id,   // Unique identifier of the target widget.
+ *     slotId: targetSlot.id, // Unique identifier of the target slot.
+ *
+ *     isModal: computed function,  // Checks if targetWidget is a Modal.
+ *     slotType: computed function, // Determines if the slot is a header, footer, or body.
+ *     widgetType: computed function, // Returns the type of the target widget.
+ *   }
+ * }
+ *
+ * Additional Checks:
+ * - `isSourceModal` → **Is the source inside a modal?**
+ * - `isTargetModal` → **Is the target inside a modal?**
+ * - `isDraggingToModalSlots` → **Is the widget being dragged into a modal slot (header/footer)?**
+ * - `targetSlotType` → **Determines whether the drop is happening in a header, footer, or body.**
+ *
+ * Why This Matters?
+ * - This structure helps **validate and restrict movements**, ensuring widgets follow UI constraints.
+ * - Prevents invalid drops (e.g., putting a button inside a Table component).
+ * - Enables **modular and flexible** widget movement across different UI sections.
+ */
+import { getMouseDistanceFromParentDiv } from '../gridUtils';
+import {
+  RESTRICTED_WIDGETS_CONFIG,
+  RESTRICTED_WIDGET_SLOTS_CONFIG,
+} from '@/AppBuilder/WidgetManager/configs/restrictedWidgetsConfig';
+
+const CANVAS_ID = 'canvas';
+const REAL_CANVAS_ID = 'real-canvas';
+
+/**
+ * Represents the widget being dragged.
+ *
+ * This class encapsulates all necessary information about the dragged widget,
+ * including its type, position, and whether it is allowed to move into certain areas.
+ */
+export class DragEntity {
+  constructor(widget) {
+    this.widget = widget; // The widget object being dragged
+    this.id = widget?.id || null; // Unique ID of the dragged widget
+    this.left = widget.left; // Initial X position (relative to grid)
+    this.top = widget.top; // Initial Y position (relative to grid)
+  }
+
+  get widgetType() {
+    return this.widget?.component?.component || null;
+  }
+}
+
+/**
+ * Defines a **droppable area** in the canvas.
+ *
+ * A droppable area is a container that can accept dragged widgets.
+ * This class helps determine if a slot is valid and handles various properties like modals.
+ */
+export class DropAreaEntity {
+  static dropAreaWidgets = ['Calendar', 'Kanban', 'Form', 'Tabs', 'Modal', 'ModalV2', 'Listview', 'Container', 'Table'];
+
+  constructor(widget, slotId) {
+    this.widget = widget; // The widget that owns this slot
+    this.id = widget?.id || CANVAS_ID; // ID of the widget
+    this.slotId = slotId || REAL_CANVAS_ID; // ID of the slot where the widget is located
+  }
+
+  // Checks if the widget is a modal
+  get isModal() {
+    return ['Modal', 'ModalV2'].includes(this.widget?.component?.component);
+  }
+
+  // Checks if the widget is the new version of modal
+  get isNewModal() {
+    return this.widget?.component?.component === 'ModalV2';
+  }
+
+  // Checks if the widget is the legacy modal
+  get isLegacyModal() {
+    return this.widget?.component?.component === 'Modal';
+  }
+
+  // Determines if the slot belongs to a modal's header/footer
+  get isInModalSlot() {
+    return this.isNewModal && this.isOnCustomSlot;
+  }
+
+  // Identifies if the slot is a custom slot (e.g., modal header/footer)
+  get isOnCustomSlot() {
+    return this.slotId.includes('-header') || this.slotId.includes('-footer');
+  }
+
+  // Determines if the slot is a valid drop target
+  get isDroppable() {
+    return DropAreaEntity.dropAreaWidgets.includes(this.widgetType);
+  }
+
+  // Returns the type of slot (header, footer, body, etc.)
+  get slotType() {
+    return this.slotId ? this.slotId.split('-').pop() : CANVAS_ID;
+  }
+
+  // Returns the type of the widget inside the slot
+  get widgetType() {
+    return this.widget?.component?.component || CANVAS_ID;
+  }
+}
+
+/**
+ * Represents the **dragging context**, encapsulating information
+ * about the source, target, and the dragged widget.
+ *
+ * This helps determine:
+ * - Whether the move is valid
+ * - Where the widget should be placed
+ * - Any restrictions based on parent-child relationships
+ */
+export class DragContext {
+  constructor({ sourceSlotId, targetSlotId, draggedWidgetId, widgets }) {
+    const sourceWidgetId = sourceSlotId?.slice(0, 36);
+    const sourceWidget = getWidgetById(widgets, sourceWidgetId);
+
+    const targetWidgetId = targetSlotId?.slice(0, 36);
+    const targetWidget = getWidgetById(widgets, targetWidgetId);
+
+    const draggedWidget = getWidgetById(widgets, draggedWidgetId);
+
+    this.source = new DropAreaEntity(sourceWidget, sourceSlotId);
+    this.target = new DropAreaEntity(targetWidget, targetSlotId);
+    this.dragged = new DragEntity(draggedWidget);
+    this.widgets = widgets;
+  }
+
+  /**
+   * Updates the **target slot** dynamically as the drag event progresses.
+   */
+  updateTarget(targetSlotId) {
+    const targetWidgetId = targetSlotId?.slice(0, 36);
+    const targetWidget = getWidgetById(this.widgets, targetWidgetId);
+    this.target = new DropAreaEntity(targetWidget, targetSlotId);
+  }
+
+  get isDroppable() {
+    const { dragged, target } = this;
+
+    const restrictedWidgetsOnTarget = RESTRICTED_WIDGETS_CONFIG?.[target.widgetType] || [];
+    const restrictedWidgetsOnTargetSlot = RESTRICTED_WIDGET_SLOTS_CONFIG?.[target.slotType] || [];
+
+    const restrictedWidgets = [...restrictedWidgetsOnTarget, ...restrictedWidgetsOnTargetSlot];
+    return !restrictedWidgets.includes(dragged.widgetType);
+    ß;
+  }
+}
+
+/**
+ * Constructs the **dragging context** by gathering all relevant details from the event.
+ */
+export function dragContextBuilder({ event, widgets }) {
+  const draggedWidgetId = event.target.id;
+  const draggedWidget = getWidgetById(widgets, draggedWidgetId);
+  const sourceSlotId = draggedWidget.parent;
+
+  // Initialize drag context
+  const context = new DragContext({ widgets, draggedWidgetId, sourceSlotId, targetSlotId: sourceSlotId });
+
+  // Determine the potential drop target
+  const targetSlotId = getDroppableSlotIdOnScreen(event, widgets);
+  context.updateTarget(targetSlotId);
+
+  return context;
+}
+
+/**
+ * Given an event, finds the **nearest valid droppable slot**.
+ */
+export const getDroppableSlotIdOnScreen = (event, widgets) => {
+  const [slotId] = document
+    .elementsFromPoint(event.clientX, event.clientY)
+    .filter(
+      (ele) =>
+        !event.target.contains(ele) && ele.id !== event.target.id && ele.classList.contains('drag-container-parent')
+    )
+    .map((ele) => extractSlotId(ele))
+    .filter((slotId) => {
+      const widgetType = getWidgetById(widgets, slotId.slice(0, 36))?.component?.component || CANVAS_ID;
+      return DropAreaEntity.dropAreaWidgets.includes(widgetType);
+    });
+
+  return slotId;
+};
+
+/**
+ * Finds a widget by its ID.
+ */
+export function getWidgetById(boxList, targetId) {
+  return boxList.find((box) => box.id === targetId) ?? null;
+}
+
+/**
+ * Extracts the **slot ID** from a given DOM element.
+ */
+const extractSlotId = (element) => {
+  return element?.getAttribute('component-id') || element.id.replace(/^canvas-/, '');
+};
+
+/**
+ * Computes the final (left, top) position for a dragged widget based on grid snapping and drop conditions.
+ *
+ * @param {Object} event - Drag event object containing movement data.
+ * @param {DropAreaEntity} target - The target drop area entity (where widget is dropped).
+ * @param {boolean} isParentChangeAllowed - Whether the widget can move to the target.
+ * @param {number} gridWidth - The width of the grid for alignment.
+ * @param {DragEntity} dragged - The entity being dragged.
+ * @returns {Object} { left, top } - The computed position.
+ */
+export const getAdjustedDropPosition = (event, target, isParentChangeAllowed, gridWidth, dragged) => {
+  let left = event.lastEvent?.translate[0];
+  let top = event.lastEvent?.translate[1];
+
+  if (isParentChangeAllowed) {
+    // Compute the relative position inside the new container
+    const { left: adjustedLeft, top: adjustedTop } = getMouseDistanceFromParentDiv(
+      event,
+      target.slotId,
+      target.widgetType
+    );
+
+    return {
+      left: Math.round(adjustedLeft / gridWidth) * gridWidth, // Snap to the nearest grid column
+      top: Math.round(adjustedTop / 10) * 10, // Snap to the nearest 10px
+    };
+  }
+
+  // If movement is restricted, revert to original position
+  return {
+    left: dragged.left * gridWidth,
+    top: dragged.top,
+  };
+};
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
index 6ca8f97e2f..75b3402331 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasConstants.js
@@ -6,7 +6,7 @@ export const CANVAS_WIDTHS = Object.freeze({
   rightSideBarWidth: 300,
 });
 
-export const WIDGETS_WITH_DEFAULT_CHILDREN = ['Listview', 'Tabs', 'Form', 'Kanban', 'Container'];
+export const WIDGETS_WITH_DEFAULT_CHILDREN = ['Listview', 'Tabs', 'Form', 'Kanban', 'Container', 'ModalV2'];
 
 export const DEFAULT_CANVAS_WIDTH = 1292;
 
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index 2c4259c22f..4e7b56ea70 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -89,7 +89,8 @@ export function addChildrenWidgetsToParent(componentType, parentId, currentLayou
     const defaultChildren = deepClone(parentMeta)['defaultChildren'];
 
     defaultChildren.forEach((child) => {
-      const { componentName, layout, incrementWidth, properties, accessorKey, tab, defaultValue, styles } = child;
+      const { componentName, layout, incrementWidth, properties, accessorKey, tab, defaultValue, styles, slotName } =
+        child;
 
       const componentMeta = deepClone(componentTypes.find((component) => component.component === componentName));
       const componentData = JSON.parse(JSON.stringify(componentMeta));
@@ -139,7 +140,12 @@ export function addChildrenWidgetsToParent(componentType, parentId, currentLayou
       }
 
       const nonActiveLayout = currentLayout === 'desktop' ? 'mobile' : 'desktop';
-      const _parent = getParentComponentIdByType(child, parentMeta.component, parentId);
+      const _parent = getParentComponentIdByType({
+        child,
+        parentComponent: parentMeta.component,
+        parentId,
+        slotName,
+      });
 
       const newChildComponent = {
         id: uuidv4(),
@@ -199,7 +205,8 @@ export const getAllChildComponents = (allComponents, parentId) => {
       allComponents[parentId]?.component?.component === 'Tabs' ||
       allComponents[parentId]?.component?.component === 'Calendar' ||
       allComponents[parentId]?.component?.component === 'Kanban' ||
-      allComponents[parentId]?.component?.component === 'Container';
+      allComponents[parentId]?.component?.component === 'Container' ||
+      allComponents[parentId]?.component?.component === 'ModalV2';
 
     if (componentParentId && isParentTabORCalendar) {
       let childComponent = deepClone(allComponents[componentId]);
@@ -319,7 +326,8 @@ const isChildOfTabsOrCalendar = (component, allComponents = [], componentParentI
     return (
       parentComponent.component.component === 'Tabs' ||
       parentComponent.component.component === 'Calendar' ||
-      parentComponent.component.component === 'Container'
+      parentComponent.component.component === 'Container' ||
+      parentComponent.component.component === 'ModalV2'
     );
   }
 
@@ -657,10 +665,23 @@ export const computeViewerBackgroundColor = (isAppDarkMode, canvasBgColor) => {
   return canvasBgColor;
 };
 
-export const getParentComponentIdByType = (child, parentComponent, parentId) => {
+export const getParentComponentIdByType = ({ child, parentComponent, parentId, slotName = 'header' }) => {
   const { tab } = child;
 
   if (parentComponent === 'Tabs') return `${parentId}-${tab}`;
-  else if (parentComponent === 'Container') return `${parentId}-header`;
+  else if (parentComponent === 'Container' || parentComponent === 'ModalV2') {
+    return `${parentId}-${slotName}`;
+  }
   return parentId;
 };
+
+export const getParentWidgetFromId = (parentType, parentId) => {
+  const isAddingToSlot = parentId?.includes('-header') || parentId?.includes('-footer');
+
+  if (parentType === 'ModalV2' && isAddingToSlot) {
+    return 'ModalSlot';
+  } else if (parentType === 'Kanban') {
+    return 'Kanban_card';
+  }
+  return parentType;
+};
diff --git a/frontend/src/AppBuilder/CodeEditor/TJDBHinter.jsx b/frontend/src/AppBuilder/CodeEditor/TJDBHinter.jsx
index 4edd8a0fda..625b11dedd 100644
--- a/frontend/src/AppBuilder/CodeEditor/TJDBHinter.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/TJDBHinter.jsx
@@ -150,7 +150,7 @@ const TJDBCodeEditor = (props) => {
       className="cm-codehinter position-relative"
       style={{
         width: '100%',
-        height: isOpen ? '350p' : 'auto',
+        height: isOpen ? '350px' : 'auto',
       }}
     >
       <div className={`cm-codehinter  ${darkMode && 'cm-codehinter-dark-themed'}`}>
@@ -167,14 +167,14 @@ const TJDBCodeEditor = (props) => {
           componentName={componentName}
           key={componentName}
           forceUpdate={forceUpdate}
-          optionalProps={{ styles: { height: 300 }, cls: '' }}
+          optionalProps={{ styles: { height: 300 }, cls: 'tjdb-hinter-portal' }}
           darkMode={darkMode}
           selectors={{ className: 'preview-block-portal tjdb-portal-codehinter' }}
           dragResizePortal={true}
           callgpt={null}
         >
           <ErrorBoundary>
-            <div className={`${errorState && 'tjdb-hinter-error'}`} data-cy={`${cyLabel}-input-field`}>
+            <div className={`${errorState && 'tjdb-hinter-error'} h-100`} data-cy={`${cyLabel}-input-field`}>
               <CodeMirror
                 value={currentValue}
                 placeholder={placeholder}
diff --git a/frontend/src/AppBuilder/CodeEditor/styles.scss b/frontend/src/AppBuilder/CodeEditor/styles.scss
index 73ba4ac36e..2b7b5d4d11 100644
--- a/frontend/src/AppBuilder/CodeEditor/styles.scss
+++ b/frontend/src/AppBuilder/CodeEditor/styles.scss
@@ -656,4 +656,10 @@
 
 .cm-custom-singleline-completion-info {
     display: none;
+}
+
+.tjdb-hinter-portal{
+    .cm-theme{
+        height: 100% ;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/BaseUrl.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/BaseUrl.jsx
index 858f6b3aa6..43a6b672df 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/BaseUrl.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/BaseUrl.jsx
@@ -1,21 +1,31 @@
 import React from 'react';
+import OverflowTooltip from '@/_components/OverflowTooltip';
 
-export const BaseUrl = ({ dataSourceURL, theme }) => {
+export const BaseUrl = ({ dataSourceURL, theme, className = 'col-auto', style = {} }) => {
   return (
     <span
-      className="col-auto"
-      htmlFor=""
+      className={`${className} base-url-container`}
       style={{
         padding: '5px',
         border: theme === 'default' ? '1px solid rgb(217 220 222)' : '1px solid white',
         borderRightWidth: 0,
         background: theme === 'default' ? 'rgb(246 247 251)' : '#20211e',
         color: theme === 'default' ? '#9ca1a6' : '#9e9e9e',
-        height: '32px',
         borderRadius: '6px 0 0 6px',
+        display: 'flex',
+        transition: 'height 0.2s ease',
+        ...style,
       }}
     >
-      {dataSourceURL}
+      <OverflowTooltip
+        text={dataSourceURL}
+        width="559px"
+        whiteSpace="normal"
+        placement="auto"
+        style={{ height: '100%' }}
+      >
+        {dataSourceURL}
+      </OverflowTooltip>
     </span>
   );
 };
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx
index feaeadcb23..4c89ad849e 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx
@@ -28,7 +28,10 @@ class Restapi extends React.Component {
 
     this.state = {
       options,
+      codeHinterHeight: 32, // Default height
     };
+    this.codeHinterRef = React.createRef();
+    this.resizeObserver = null;
   }
 
   componentDidUpdate(prevProps) {
@@ -40,21 +43,95 @@ class Restapi extends React.Component {
         },
       });
     }
+    // Setup resize observer if it's not already set up
+    if (this.codeHinterRef.current && !this.resizeObserver) {
+      this.setupResizeObserver();
+    }
   }
 
   componentDidMount() {
     try {
+      if (isEmpty(this.state.options['headers'])) {
+        this.addNewKeyValuePair('headers');
+      }
+      if (isEmpty(this.state.options['cookies'])) {
+        this.addNewKeyValuePair('cookies');
+      }
       if (isEmpty(this.state.options['method'])) {
         changeOption(this, 'method', 'get');
       }
+      setTimeout(() => {
+        if (isEmpty(this.state.options['url_params'])) {
+          this.addNewKeyValuePair('url_params');
+        }
+      }, 1000);
+      setTimeout(() => {
+        if (isEmpty(this.state.options['body'])) {
+          this.addNewKeyValuePair('body');
+        }
+      }, 1000);
       setTimeout(() => {
         this.initizalizeRetryNetworkErrorsToggle();
       }, 1000);
+
+      this.setupResizeObserver();
     } catch (error) {
       console.log(error);
     }
   }
 
+  componentWillUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
+  setupResizeObserver() {
+    if (!this.codeHinterRef.current) return;
+
+    // Try to find the editor element, checking multiple possible selectors
+    const findEditorElement = () => {
+      const element =
+        this.codeHinterRef.current.querySelector('.cm-editor') ||
+        this.codeHinterRef.current.querySelector('.codehinter-input') ||
+        this.codeHinterRef.current.querySelector('.code-hinter-wrapper');
+      return element;
+    };
+
+    // Initial attempt to find editor
+    let editorElement = findEditorElement();
+
+    // If not found immediately, try again after a short delay
+    if (!editorElement) {
+      setTimeout(() => {
+        editorElement = findEditorElement();
+        if (editorElement) {
+          this.setupObserverForElement(editorElement);
+        }
+      }, 100);
+      return;
+    }
+
+    this.setupObserverForElement(editorElement);
+  }
+
+  setupObserverForElement(element) {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const height = Math.max(32, Math.min(entry.contentRect.height, 220));
+        if (height !== this.state.codeHinterHeight) {
+          this.setState({ codeHinterHeight: height });
+        }
+      }
+    });
+
+    this.resizeObserver.observe(element);
+  }
+
   initizalizeRetryNetworkErrorsToggle = () => {
     const isRetryNetworkErrorToggleUnused = this.props.options.retry_network_errors === null;
     if (isRetryNetworkErrorToggleUnused) {
@@ -212,13 +289,30 @@ class Restapi extends React.Component {
                     useCustomStyles={true}
                   />
                 </div>
-                <div className={`field w-100 rest-methods-url`}>
+                <div
+                  className={`field rest-methods-url ${dataSourceURL && 'data-source-exists'}`}
+                  style={{ width: 'calc(100% - 214px)' }}
+                >
                   <div className="font-weight-medium color-slate12">URL</div>
-                  <div className="d-flex">
+                  <div className="d-flex h-100 w-100">
                     {dataSourceURL && (
-                      <BaseUrl theme={this.props.darkMode ? 'monokai' : 'default'} dataSourceURL={dataSourceURL} />
+                      <BaseUrl
+                        theme={this.props.darkMode ? 'monokai' : 'default'}
+                        dataSourceURL={dataSourceURL}
+                        style={{
+                          overflowWrap: 'anywhere',
+                          maxWidth: '40%',
+                          width: 'fit-content',
+                          height: `${this.state.codeHinterHeight}px`,
+                          minHeight: '32px',
+                          maxHeight: '220px',
+                        }}
+                      />
                     )}
-                    <div className={`flex-grow-1 rest-api-url-codehinter  ${dataSourceURL ? 'url-input-group' : ''}`}>
+                    <div
+                      ref={this.codeHinterRef}
+                      className={` flex-grow-1 rest-api-url-codehinter ${dataSourceURL ? 'url-input-group' : ''}`}
+                    >
                       <CodeHinter
                         type="basic"
                         initialValue={options.url}
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/BulkUploadPrimaryKey.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/BulkUploadPrimaryKey.jsx
index 2948a31eee..d1a9dfa3aa 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/BulkUploadPrimaryKey.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/BulkUploadPrimaryKey.jsx
@@ -33,7 +33,7 @@ export const BulkUploadPrimaryKey = () => {
         >
           <input
             type="text"
-            value={bulkUpdatePrimaryKey?.primary_key?.join() || ''}
+            value={bulkUpdatePrimaryKey?.primary_key?.join(', ') || ''}
             style={{
               width: '100%',
               height: '100%',
@@ -53,7 +53,7 @@ export const BulkUploadPrimaryKey = () => {
         <div className="field flex-grow-1 minw-400-w-400">
           <CodeHinter
             type="basic"
-            initialValue={bulkUpdatePrimaryKey?.rows_update ?? {}}
+            initialValue={`{{${JSON.stringify(bulkUpdatePrimaryKey?.rows_update ?? [])}}}`}
             className="codehinter-plugins"
             placeholder="{{ [ { 'column1': 'value', ... } ] }}"
             onChange={(newValue) => {
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss
index 95d2ab56e0..23d1c7f7cf 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss
@@ -214,4 +214,9 @@
 .input-value-padding {
   box-sizing: border-box;
   padding-right: 30px !important;
+}
+
+.react-datepicker__navigation{
+  overflow: visible !important;
+  height: inherit !important;
 }
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx
index e3f31c974d..e873228888 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx
@@ -677,6 +677,7 @@ const ToolJetDbOperations = ({ optionchanged, options, darkMode, isHorizontalLay
             }}
             componentName="TooljetDatabase"
             delayOnChange={false}
+            className="w-100"
           />
         </div>
       )}
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx
index ef70343140..2ad7977496 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx
@@ -133,7 +133,7 @@ export const ComponentsManagerTab = ({ darkMode }) => {
         'StarRating',
       ];
       const integrationItems = ['Map'];
-      const layoutItems = ['Container', 'Listview', 'Tabs', 'Modal'];
+      const layoutItems = ['Container', 'Listview', 'Tabs', 'ModalV2'];
 
       filteredComponents.forEach((f) => {
         if (commonItems.includes(f)) commonSection.items.push(f);
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/constants.js b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/constants.js
index cc66756eff..fda26656ca 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/constants.js
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/constants.js
@@ -1 +1 @@
-export const LEGACY_ITEMS = ['ToggleSwitch', 'DropDown', 'Multiselect', 'RadioButton', 'Datepicker'];
+export const LEGACY_ITEMS = ['ToggleSwitch', 'DropDown', 'Multiselect', 'RadioButton', 'Datepicker', 'Modal'];
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx
index acd1908bba..d680f21d1e 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx
@@ -23,6 +23,7 @@ const SHOW_ADDITIONAL_ACTIONS = [
   'Button',
   'RichTextEditor',
   'Image',
+  'ModalV2',
 ];
 const PROPERTIES_VS_ACCORDION_TITLE = {
   Text: 'Data',
@@ -34,6 +35,7 @@ const PROPERTIES_VS_ACCORDION_TITLE = {
   Button: 'Data',
   Image: 'Data',
   Container: 'Data',
+  ModalV2: 'Data',
 };
 
 export const DefaultComponent = ({ componentMeta, darkMode, ...restProps }) => {
@@ -151,7 +153,8 @@ export const baseComponentProperties = (
           'properties',
           currentState,
           allComponents,
-          darkMode
+          darkMode,
+          ''
         )
       ),
     });
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/ModalV2.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/ModalV2.jsx
new file mode 100644
index 0000000000..4131217386
--- /dev/null
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/ModalV2.jsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import Accordion from '@/_ui/Accordion';
+import { renderElement } from '../Utils';
+import { baseComponentProperties } from './DefaultComponent';
+import { resolveReferences } from '@/_helpers/utils';
+
+const INDEX_OF_TRIGGER = 2;
+
+export const ModalV2 = ({ componentMeta, darkMode, ...restProps }) => {
+  const {
+    layoutPropertyChanged,
+    component,
+    paramUpdated,
+    dataQueries,
+    currentState,
+    eventsChanged,
+    apps,
+    allComponents,
+  } = restProps;
+
+  let properties = [];
+  let additionalActions = [];
+  let dataProperties = [];
+
+  const events = Object.keys(componentMeta.events);
+  const validations = Object.keys(componentMeta.validation || {});
+
+  for (const [key] of Object.entries(componentMeta?.properties)) {
+    if (componentMeta?.properties[key]?.section === 'additionalActions') {
+      additionalActions.push(key);
+    } else if (componentMeta?.properties[key]?.accordian === 'Data') {
+      dataProperties.push(key);
+    } else {
+      properties.push(key);
+    }
+  }
+
+  const renderCustomElement = (param, paramType = 'properties') => {
+    return renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState);
+  };
+  const conditionalAccordionItems = (component) => {
+    const useDefaultButton = resolveReferences(
+      component.component.definition.properties.useDefaultButton?.value ?? false
+    );
+    const accordionItems = [];
+    let renderOptions = [];
+    const options = ['visibility', 'disabledTrigger', 'useDefaultButton'];
+
+    options.map((option) => renderOptions.push(renderCustomElement(option)));
+
+    const conditionalOptions = [{ name: 'triggerButtonLabel', condition: useDefaultButton }];
+
+    conditionalOptions.map(({ name, condition }) => {
+      if (condition) renderOptions.push(renderCustomElement(name));
+    });
+
+    accordionItems.push({
+      title: 'Trigger',
+      children: renderOptions,
+    });
+
+    return accordionItems;
+  };
+
+  if (component.component.definition.properties.size.value === 'fullscreen') {
+    component.component.properties.modalHeight = {
+      ...component.component.properties.modalHeight,
+      isHidden: true,
+    };
+  }
+
+  if (component.component.definition.properties.showHeader.value === '{{false}}') {
+    component.component.properties.headerHeight = {
+      ...component.component.properties.headerHeight,
+      isHidden: true,
+    };
+  }
+
+  if (component.component.definition.properties.showFooter.value === '{{false}}') {
+    component.component.properties.footerHeight = {
+      ...component.component.properties.footerHeight,
+      isHidden: true,
+    };
+  }
+
+  const accordionItems = baseComponentProperties(
+    dataProperties,
+    events,
+    component,
+    componentMeta,
+    layoutPropertyChanged,
+    paramUpdated,
+    dataQueries,
+    currentState,
+    eventsChanged,
+    apps,
+    allComponents,
+    validations,
+    darkMode,
+    [],
+    additionalActions
+  );
+
+  const [optionsItems] = conditionalAccordionItems(component);
+
+  // Insert the Trigger option as the third item
+  accordionItems.splice(INDEX_OF_TRIGGER, 0, optionsItems);
+
+  return <Accordion items={accordionItems} />;
+};
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx
index 7ee512ee20..c74e023c0b 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx
@@ -19,6 +19,7 @@ export const Code = ({
   accordian,
   placeholder,
   validationFn,
+  isHidden = false,
 }) => {
   const currentState = useCurrentState();
 
@@ -43,6 +44,7 @@ export const Code = ({
     onChange({ name: 'iconVisibility' }, 'value', value, 'styles');
   }
 
+  if (isHidden) return null;
   return (
     <div className={`field ${options.className}`} style={{ marginBottom: '8px' }}>
       <CodeEditor
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
index 16ed1112b7..6a3465403d 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx
@@ -9,6 +9,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { DefaultComponent } from './Components/DefaultComponent';
 import { FilePicker } from './Components/FilePicker';
 import { Modal } from './Components/Modal';
+import { ModalV2 } from './Components/ModalV2';
 import { CustomComponent } from './Components/CustomComponent';
 import { Icon } from './Components/Icon';
 import useFocus from '@/_hooks/use-focus';
@@ -78,6 +79,7 @@ const NEW_REVAMPED_COMPONENTS = [
   'Icon',
   'Image',
   'Container',
+  'ModalV2',
 ];
 
 export const Inspector = ({ componentDefinitionChanged, darkMode, pages, selectedComponentId }) => {
@@ -703,6 +705,9 @@ const GetAccordion = React.memo(
       case 'FilePicker':
         return <FilePicker {...restProps} />;
 
+      case 'ModalV2':
+        return <ModalV2 {...restProps} />;
+
       case 'Modal':
         return <Modal {...restProps} />;
 
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js
index 0ddda9f572..62ee032172 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js
@@ -50,7 +50,8 @@ export function renderCustomStyles(
     componentConfig.component == 'MultiselectV2' ||
     componentConfig.component == 'RadioButtonV2' ||
     componentConfig.component == 'Button' ||
-    componentConfig.component == 'Image'
+    componentConfig.component == 'Image' ||
+    componentConfig.component == 'ModalV2'
   ) {
     const paramTypeConfig = componentMeta[paramType] || {};
     const paramConfig = paramTypeConfig[param] || {};
@@ -131,6 +132,7 @@ export function renderElement(
   const paramTypeDefinition = componentDefinition[paramType] || {};
   const definition = paramTypeDefinition[param] || {};
   const meta = componentMeta[paramType][param];
+  const isHidden = component.component.properties[param]?.isHidden ?? false;
 
   if (
     componentConfig.component == 'DropDown' ||
@@ -170,6 +172,7 @@ export function renderElement(
       component={component}
       placeholder={placeholder}
       validationFn={validationFn}
+      isHidden={isHidden}
     />
   );
 }
diff --git a/frontend/src/AppBuilder/RightSideBar/WidgetBox/WidgetBox.jsx b/frontend/src/AppBuilder/RightSideBar/WidgetBox/WidgetBox.jsx
index 1226bfba3e..69ded14971 100644
--- a/frontend/src/AppBuilder/RightSideBar/WidgetBox/WidgetBox.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/WidgetBox/WidgetBox.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import WidgetIcon from '@/../assets/images/icons/widgets';
 import { useTranslation } from 'react-i18next';
 
-const LEGACY_WIDGETS = ['ToggleSwitch', 'DropDown', 'Multiselect', 'RadioButton', 'Datepicker'];
+const LEGACY_WIDGETS = ['ToggleSwitch', 'DropDown', 'Multiselect', 'RadioButton', 'Datepicker', 'Modal'];
 const NEW_WIDGETS = [
   'ToggleSwitchV2',
   'DropdownV2',
@@ -12,6 +12,7 @@ const NEW_WIDGETS = [
   'DaterangePicker',
   'DatePickerV2',
   'TimePicker',
+  'ModalV2',
 ];
 
 export const WidgetBox = ({ component, darkMode }) => {
diff --git a/frontend/src/AppBuilder/WidgetManager/configs/restrictedWidgetsConfig.js b/frontend/src/AppBuilder/WidgetManager/configs/restrictedWidgetsConfig.js
index 4ad52da372..6933f4a5a5 100644
--- a/frontend/src/AppBuilder/WidgetManager/configs/restrictedWidgetsConfig.js
+++ b/frontend/src/AppBuilder/WidgetManager/configs/restrictedWidgetsConfig.js
@@ -4,7 +4,14 @@ export const RESTRICTED_WIDGETS_CONFIG = {
   Calendar: ['Calendar', 'Kanban'],
   Container: ['Calendar', 'Kanban'],
   Modal: ['Calendar', 'Kanban'],
+  ModalV2: ['Calendar', 'Kanban'],
+  ModalSlot: ['Calendar', 'Kanban', 'Table', 'Listview', 'Container'],
   Tabs: ['Calendar', 'Kanban'],
   Kanban_popout: ['Calendar', 'Kanban'],
   Listview: ['Calendar', 'Kanban'],
 };
+
+export const RESTRICTED_WIDGET_SLOTS_CONFIG = {
+  header: ['Calendar', 'Kanban', 'Table', 'Listview', 'Container'],
+  footer: ['Calendar', 'Kanban', 'Table', 'Listview', 'Container'],
+};
diff --git a/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js b/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js
index 13832857fb..be2855c476 100644
--- a/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js
+++ b/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js
@@ -3,6 +3,7 @@ import {
   tableConfig,
   chartConfig,
   modalConfig,
+  modalV2Config,
   formConfig,
   textinputConfig,
   numberinputConfig,
@@ -64,6 +65,7 @@ export const widgets = [
   buttonConfig,
   chartConfig,
   modalConfig,
+  modalV2Config,
   formConfig,
   textinputConfig,
   numberinputConfig,
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/index.js b/frontend/src/AppBuilder/WidgetManager/widgets/index.js
index 2540cdeeef..ce0e73fdf5 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/index.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/index.js
@@ -2,6 +2,7 @@ import { buttonConfig } from './button';
 import { tableConfig } from './table';
 import { chartConfig } from './chart';
 import { modalConfig } from './modal';
+import { modalV2Config } from './modalV2';
 import { formConfig } from './form';
 import { textinputConfig } from './textinput';
 import { numberinputConfig } from './numberinput';
@@ -62,7 +63,8 @@ export {
   buttonConfig,
   tableConfig,
   chartConfig,
-  modalConfig,
+  modalConfig, //Deprecated
+  modalV2Config,
   formConfig,
   textinputConfig,
   numberinputConfig,
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/modal.js b/frontend/src/AppBuilder/WidgetManager/widgets/modal.js
index 42740ad9c1..8f0c34b566 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/modal.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/modal.js
@@ -1,6 +1,6 @@
 export const modalConfig = {
-  name: 'Modal',
-  displayName: 'Modal',
+  name: 'ModalLegacy',
+  displayName: 'Modal (Legacy)',
   description: 'Show pop-up windows',
   component: 'Modal',
   defaultSize: {
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js
new file mode 100644
index 0000000000..e7e96c4398
--- /dev/null
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/modalV2.js
@@ -0,0 +1,277 @@
+export const modalV2Config = {
+  name: 'Modal',
+  displayName: 'Modal',
+  description: 'Show pop-up windows',
+  component: 'ModalV2',
+  defaultSize: {
+    width: 10,
+    height: 34,
+  },
+  others: {
+    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+  },
+  properties: {
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Modal trigger visibility',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    disabledTrigger: {
+      type: 'toggle',
+      displayName: 'Disable modal trigger',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    disabledModal: {
+      type: 'toggle',
+      displayName: 'Disable modal window',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    useDefaultButton: {
+      type: 'toggle',
+      displayName: 'Use default trigger button',
+      validation: {
+        schema: {
+          type: 'boolean',
+        },
+        defaultValue: true,
+      },
+    },
+    triggerButtonLabel: {
+      type: 'code',
+      displayName: 'Trigger button label',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'Launch Modal',
+      },
+    },
+
+    // Data Accordion
+    showHeader: { type: 'toggle', displayName: 'Header', accordian: 'Data' },
+    showFooter: { type: 'toggle', displayName: 'Footer', accordian: 'Data' },
+
+    size: {
+      type: 'select',
+      displayName: 'Width',
+      accordian: 'Data',
+      options: [
+        { name: 'small', value: 'sm' },
+        { name: 'medium', value: 'lg' },
+        { name: 'large', value: 'xl' },
+        { name: 'fullscreen', value: 'fullscreen' },
+      ],
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'lg',
+      },
+    },
+    modalHeight: {
+      type: 'numberInput',
+      displayName: 'Height',
+      accordian: 'Data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 400 },
+    },
+    headerHeight: {
+      type: 'numberInput',
+      displayName: 'Header height',
+      accordian: 'Data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+    },
+    footerHeight: {
+      type: 'numberInput',
+      displayName: 'Footer height',
+      accordian: 'Data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+    },
+    hideOnEsc: { type: 'toggle', displayName: 'Close on escape key', section: 'additionalActions' },
+    closeOnClickingOutside: { type: 'toggle', displayName: 'Close on clicking outside', section: 'additionalActions' },
+    hideCloseButton: { type: 'toggle', displayName: 'Hide close button', section: 'additionalActions' },
+  },
+  events: {
+    onOpen: { displayName: 'On open' },
+    onClose: { displayName: 'On close' },
+  },
+  defaultChildren: [
+    {
+      componentName: 'Text',
+      slotName: 'header',
+      layout: {
+        top: 21,
+        left: 1,
+        height: 40,
+      },
+      displayName: 'ModalHeaderTitle',
+      properties: ['text'],
+      accessorKey: 'text',
+      styles: ['fontWeight', 'textSize', 'textColor'],
+      defaultValue: {
+        text: 'Modal title',
+        textSize: 20,
+        textColor: '#000',
+      },
+    },
+    {
+      componentName: 'Button',
+      slotName: 'footer',
+      layout: {
+        top: 24,
+        left: 22,
+        height: 36,
+      },
+      displayName: 'ModalFooterCancel',
+      properties: ['text'],
+      styles: ['type', 'borderColor', 'padding'],
+      defaultValue: {
+        text: 'Button1',
+        type: 'outline',
+        borderColor: '#CCD1D5',
+      },
+    },
+    {
+      componentName: 'Button',
+      slotName: 'footer',
+      layout: {
+        top: 24,
+        left: 32,
+        height: 36,
+      },
+      displayName: 'ModalFooterConfirm',
+      properties: ['text'],
+      defaultValue: {
+        text: 'Button2',
+        padding: 'none',
+      },
+    },
+  ],
+  styles: {
+    headerBackgroundColor: {
+      type: 'color',
+      displayName: 'Header background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ffffffff',
+      },
+    },
+    footerBackgroundColor: {
+      type: 'color',
+      displayName: 'Footer background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ffffffff',
+      },
+    },
+    bodyBackgroundColor: {
+      type: 'color',
+      displayName: 'Body background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ffffffff',
+      },
+    },
+    triggerButtonBackgroundColor: {
+      type: 'color',
+      displayName: 'Trigger button background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: false,
+      },
+    },
+    triggerButtonTextColor: {
+      type: 'color',
+      displayName: 'Trigger button text color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: false,
+      },
+    },
+  },
+  exposedVariables: {
+    show: false,
+    isDisabledModal: false,
+    isDisabledTrigger: false,
+    isVisible: true,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'open',
+      displayName: 'Open',
+    },
+    {
+      handle: 'close',
+      displayName: 'Close',
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisableTrigger',
+      displayName: 'Set disable trigger',
+      params: [{ handle: 'setDisableTrigger', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisableModal',
+      displayName: 'Set disable modal',
+      params: [{ handle: 'setDisableModal', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
+  definition: {
+    others: {
+      showOnDesktop: { value: '{{true}}' },
+      showOnMobile: { value: '{{false}}' },
+    },
+    properties: {
+      loadingState: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
+      disabledTrigger: { value: '{{false}}' },
+      disabledModal: { value: '{{false}}' },
+      useDefaultButton: { value: `{{true}}` },
+      triggerButtonLabel: { value: `Launch Modal` },
+      size: { value: 'lg' },
+      showHeader: { value: '{{true}}' },
+      showFooter: { value: '{{true}}' },
+      hideCloseButton: { value: '{{false}}' },
+      hideOnEsc: { value: '{{true}}' },
+      closeOnClickingOutside: { value: '{{false}}' },
+      modalHeight: { value: 400 },
+      headerHeight: { value: 80 },
+      footerHeight: { value: 80 },
+    },
+    events: [],
+    styles: {
+      headerBackgroundColor: { value: '#ffffffff' },
+      footerBackgroundColor: { value: '#ffffffff' },
+      bodyBackgroundColor: { value: '#ffffffff' },
+      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      triggerButtonTextColor: { value: '#ffffffff' },
+    },
+  },
+};
diff --git a/frontend/src/AppBuilder/Widgets/Container.jsx b/frontend/src/AppBuilder/Widgets/Container.jsx
index 16623280a5..1334098423 100644
--- a/frontend/src/AppBuilder/Widgets/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container.jsx
@@ -45,6 +45,7 @@ export const Container = ({
     border: `1px solid ${borderColor}`,
     height,
     display: isVisible ? 'flex' : 'none',
+    flexDirection: 'column',
     position: 'relative',
     boxShadow,
   };
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
new file mode 100644
index 0000000000..e25027ce33
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { default as BootstrapModal } from 'react-bootstrap/Modal';
+import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
+import { getCanvasHeight } from '@/AppBuilder/Widgets/ModalV2/helpers/utils';
+
+export const ModalFooter = React.memo(({ id, isDisabled, customStyles, darkMode, width, footerHeight, onClick }) => {
+  const canvasFooterHeight = getCanvasHeight(footerHeight);
+  return (
+    <BootstrapModal.Footer style={{ ...customStyles.modalFooter }} data-cy={`modal-footer`} onClick={onClick}>
+      <SubContainer
+        id={`${id}-footer`}
+        canvasHeight={canvasFooterHeight}
+        canvasWidth={width}
+        allowContainerSelect={false}
+        darkMode={darkMode}
+        styles={{
+          margin: 0,
+          backgroundColor: 'transparent',
+          overflowX: 'hidden',
+          overflowY: isDisabled ? 'hidden' : 'auto',
+        }}
+      />
+      {isDisabled && (
+        <div
+          id={`${id}-footer-disabled`}
+          className="tj-modal-disabled-overlay"
+          style={{ height: footerHeight || '100%' }}
+          onClick={onClick}
+          onDrop={(e) => e.stopPropagation()}
+        />
+      )}
+    </BootstrapModal.Footer>
+  );
+});
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
new file mode 100644
index 0000000000..bda916cce1
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { default as BootstrapModal } from 'react-bootstrap/Modal';
+import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
+import { getCanvasHeight } from '@/AppBuilder/Widgets/ModalV2/helpers/utils';
+
+export const ModalHeader = React.memo(
+  ({ id, isDisabled, customStyles, hideCloseButton, darkMode, width, onHideModal, headerHeight, onClick }) => {
+    const canvasHeaderHeight = getCanvasHeight(headerHeight);
+
+    return (
+      <BootstrapModal.Header style={{ ...customStyles.modalHeader }} data-cy={`modal-header`} onClick={onClick}>
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+          <SubContainer
+            id={`${id}-header`}
+            canvasHeight={canvasHeaderHeight}
+            canvasWidth={width}
+            allowContainerSelect={false}
+            darkMode={darkMode}
+            styles={{
+              backgroundColor: 'transparent',
+              overflowX: 'hidden',
+              overflowY: isDisabled ? 'hidden' : 'auto',
+            }}
+          />
+        </div>
+        {isDisabled && (
+          <div
+            id={`${id}-header-disabled`}
+            className="tj-modal-disabled-overlay"
+            style={{ height: headerHeight || '100%' }}
+            onClick={onClick}
+            onDrop={(e) => e.stopPropagation()}
+          />
+        )}
+        {!hideCloseButton && (
+          <div className="tw-w-14 tw-h-14 tw-flex tw-items-center tw-justify-center tw-pr-4 tw-relative">
+            <span
+              className={`tj-modal-close-button ${isDisabled ? 'is-disabled' : ''}`}
+              data-cy={`modal-close-button`}
+              size="sm"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onHideModal();
+              }}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="icon icon-tabler icon-tabler-x"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                strokeWidth="2"
+                stroke="currentColor"
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </span>
+          </div>
+        )}
+      </BootstrapModal.Header>
+    );
+  }
+);
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
new file mode 100644
index 0000000000..25796a9951
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
@@ -0,0 +1,134 @@
+import React, { useEffect } from 'react';
+import { default as BootstrapModal } from 'react-bootstrap/Modal';
+import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
+import { ConfigHandle } from '@/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle';
+import { ModalHeader } from '@/AppBuilder/Widgets/ModalV2/Components/Header';
+import { ModalFooter } from '@/AppBuilder/Widgets/ModalV2/Components/Footer';
+
+export const ModalWidget = ({ ...restProps }) => {
+  const {
+    customStyles,
+    parentRef,
+    id,
+    showConfigHandler,
+    isDisabled,
+    isLoading,
+    modalBodyHeight,
+    onHideModal,
+    hideCloseButton,
+    darkMode,
+    modalWidth,
+    showHeader,
+    hideOnEsc,
+    showFooter,
+    headerHeight,
+    footerHeight,
+    onSelectModal,
+  } = restProps['modalProps'];
+
+  // When the modal body is clicked capture it and use the callback to set the selected component as modal
+  const handleModalSlotClick = (event) => {
+    const clickedComponentId = event.target.getAttribute('component-id');
+    const clickedId = event.target.getAttribute('id');
+
+    // Check if the clicked element is part of the modal canvas & same widget with id
+    if (clickedComponentId?.includes(id)) {
+      onSelectModal(id);
+    } else if (clickedId?.includes(id)) {
+      onSelectModal(id);
+    }
+  };
+
+  useEffect(() => {
+    // When modal is active, prevent drop event on backdrop (else widgets droppped will get added to canvas)
+    const preventBackdropDrop = (e) => {
+      if (e.target.className === 'fade modal show') {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    document.addEventListener('drop', preventBackdropDrop);
+    return () => {
+      document.removeEventListener('drop', preventBackdropDrop);
+    };
+  }, []);
+
+  return (
+    <BootstrapModal
+      {...restProps}
+      contentClassName="modal-component tj-modal-widget-content"
+      animation={true}
+      onEscapeKeyDown={(e) => {
+        e.preventDefault();
+        if (hideOnEsc) {
+          onHideModal();
+        }
+      }}
+      onClick={handleModalSlotClick}
+    >
+      {showConfigHandler && (
+        <ConfigHandle
+          id={id}
+          customClassName={showHeader ? '' : 'modalWidget-config-handle tw-h-0'}
+          showHandle={showConfigHandler}
+          setSelectedComponentAsModal={onSelectModal}
+          componentType="Modal"
+          isModalOpen={true}
+        />
+      )}
+      {showHeader && (
+        <ModalHeader
+          id={id}
+          isDisabled={isDisabled}
+          customStyles={customStyles}
+          hideCloseButton={hideCloseButton}
+          darkMode={darkMode}
+          width={modalWidth}
+          onHideModal={onHideModal}
+          headerHeight={headerHeight}
+          onClick={handleModalSlotClick}
+        />
+      )}
+      <BootstrapModal.Body style={{ ...customStyles.modalBody }} ref={parentRef} id={id} data-cy={`modal-body`}>
+        {isDisabled && (
+          <div
+            id={`${id}-body-disabled`}
+            className="tj-modal-disabled-overlay"
+            style={{
+              height: modalBodyHeight || '100%',
+            }}
+            onDrop={(e) => e.stopPropagation()}
+          />
+        )}
+        {!isLoading ? (
+          <>
+            <SubContainer
+              id={`${id}`}
+              canvasHeight={modalBodyHeight}
+              styles={{ backgroundColor: customStyles.modalBody.backgroundColor, height: 'inherit' }}
+              canvasWidth={modalWidth}
+              darkMode={darkMode}
+            />
+          </>
+        ) : (
+          <div className="p-2">
+            <center>
+              <div className="spinner-border mt-5" role="status"></div>
+            </center>
+          </div>
+        )}
+      </BootstrapModal.Body>
+      {showFooter && (
+        <ModalFooter
+          id={id}
+          isDisabled={isDisabled}
+          darkMode={darkMode}
+          customStyles={customStyles}
+          width={modalWidth}
+          footerHeight={footerHeight}
+          onClick={handleModalSlotClick}
+        />
+      )}
+    </BootstrapModal>
+  );
+};
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/ModalV2.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/ModalV2.jsx
new file mode 100644
index 0000000000..bfe1431ad0
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/ModalV2.jsx
@@ -0,0 +1,243 @@
+import React, { useRef, useState, useEffect } from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+import { useExposeState } from '@/AppBuilder/Widgets/ModalV2/hooks/useModalCSA';
+import { useResetZIndex } from '@/AppBuilder/Widgets/ModalV2/hooks/useModalZIndex';
+import { useModalEventSideEffects } from '@/AppBuilder/Widgets/ModalV2/hooks/useResizeSideEffects';
+import { useEventListener } from '@/_hooks/use-event-listener';
+import { ModalWidget } from '@/AppBuilder/Widgets/ModalV2/Components/Modal';
+
+import {
+  getModalBodyHeight,
+  getModalHeaderHeight,
+  getModalFooterHeight,
+} from '@/AppBuilder/Widgets/ModalV2/helpers/utils';
+import { createModalStyles } from '@/AppBuilder/Widgets/ModalV2/helpers/stylesFactory';
+import { onShowSideEffects, onHideSideEffects } from '@/AppBuilder/Widgets/ModalV2/helpers/sideEffects';
+
+import '@/AppBuilder/Widgets/ModalV2/style.scss';
+
+export const ModalV2 = function Modal({
+  id,
+  component,
+  darkMode,
+  properties,
+  styles,
+  setExposedVariable,
+  setExposedVariables,
+  fireEvent,
+  dataCy,
+  height,
+}) {
+  const [showModal, setShowModal] = useState(false);
+  const {
+    closeOnClickingOutside = false,
+    hideOnEsc,
+    hideCloseButton,
+    hideTitleBar,
+    useDefaultButton,
+    triggerButtonLabel,
+    modalHeight,
+    showHeader,
+    showFooter,
+    headerHeight,
+    footerHeight,
+  } = properties;
+  const {
+    headerBackgroundColor,
+    footerBackgroundColor,
+    bodyBackgroundColor,
+    triggerButtonBackgroundColor,
+    triggerButtonTextColor,
+    boxShadow,
+  } = styles;
+  const isInitialRender = useRef(true);
+  const title = properties.title ?? '';
+  const titleAlignment = properties.titleAlignment ?? 'left';
+  const size = properties.size ?? 'lg';
+  const setSelectedComponentAsModal = useStore((state) => state.setSelectedComponentAsModal, shallow);
+  const mode = useStore((state) => state.currentMode, shallow);
+
+  const computedModalBodyHeight = getModalBodyHeight(modalHeight, showHeader, showFooter, headerHeight, footerHeight);
+  const headerHeightPx = getModalHeaderHeight(showHeader, headerHeight);
+  const footerHeightPx = getModalFooterHeight(showFooter, footerHeight);
+  const isFullScreen = properties.size === 'fullscreen';
+  const computedCanvasHeight = isFullScreen
+    ? `calc(100vh - 48px - 40px - ${headerHeightPx} - ${footerHeightPx})`
+    : computedModalBodyHeight;
+
+  useEffect(() => {
+    const exposedVariables = {
+      open: async function () {
+        setExposedVariable('show', true);
+        setShowModal(true);
+      },
+      close: async function () {
+        setExposedVariable('show', false);
+        setShowModal(false);
+      },
+    };
+    setExposedVariables(exposedVariables);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function hideModal() {
+    setExposedVariable('show', false);
+    setShowModal(false);
+  }
+
+  function openModal() {
+    setExposedVariable('show', true);
+    setShowModal(true);
+  }
+
+  useEventListener('resize', onShowSideEffects, window);
+
+  const onShowModal = () => {
+    openModal();
+    onShowSideEffects();
+    fireEvent('onOpen');
+    setSelectedComponentAsModal(id);
+  };
+
+  const onHideModal = () => {
+    onHideSideEffects(() => fireEvent('onOpen'));
+    hideModal();
+    setSelectedComponentAsModal(null);
+  };
+
+  useEffect(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+
+    const inputRef = document?.getElementsByClassName('tj-text-input-widget')?.[0];
+    inputRef?.blur();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showModal]);
+
+  useEffect(() => {
+    // When modal is active, prevent drop event on backdrop (else widgets droppped will get added to canvas)
+    const preventBackdropDrop = (e) => {
+      if (e.target.className === 'fade modal show') {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    document.addEventListener('drop', preventBackdropDrop);
+    return () => {
+      document.removeEventListener('drop', preventBackdropDrop);
+    };
+  }, []);
+
+  const { controlBoxRef } = useResetZIndex({ showModal, id, mode });
+  const { isDisabledTrigger, isDisabledModal, isVisible, isLoading } = useExposeState({
+    loadingState: properties.loadingState,
+    visibleState: properties.visibility,
+    disabledModalState: properties.disabledModal,
+    disabledTriggerState: properties.disabledTrigger,
+    setExposedVariables,
+    setExposedVariable,
+    onHideModal,
+    onShowModal,
+  });
+
+  const customStyles = createModalStyles({
+    height,
+    modalHeight,
+    computedCanvasHeight,
+    bodyBackgroundColor,
+    darkMode,
+    isDisabledModal,
+    headerBackgroundColor,
+    headerHeightPx,
+    footerBackgroundColor,
+    footerHeightPx,
+    triggerButtonBackgroundColor,
+    triggerButtonTextColor,
+    isVisible,
+    boxShadow,
+  });
+
+  const { modalWidth, parentRef } = useModalEventSideEffects({
+    showModal,
+    size,
+    id,
+    onShowSideEffects,
+    closeOnClickingOutside,
+    onHideModal,
+  });
+
+  return (
+    <div
+      className="container d-flex align-items-center"
+      data-disabled={isDisabledTrigger}
+      data-cy={dataCy}
+      style={{ height }}
+    >
+      {useDefaultButton && isVisible && (
+        <button
+          disabled={isDisabledTrigger}
+          className="jet-button btn btn-primary p-1 overflow-hidden"
+          style={customStyles.buttonStyles}
+          onClick={(event) => {
+            /**** Start - Logic to reduce the zIndex of modal control box ****/
+            controlBoxRef.current = document.querySelector(`.selected-component.sc-${id}`)?.parentElement;
+            if (mode === 'edit' && controlBoxRef.current) {
+              controlBoxRef.current.classList.add('modal-moveable');
+            }
+            /**** End - Logic to reduce the zIndex of modal control box ****/
+
+            event.stopPropagation();
+            setShowModal(true);
+          }}
+          data-cy={`${dataCy}-launch-button`}
+        >
+          {triggerButtonLabel ?? 'Show Modal'}
+        </button>
+      )}
+
+      <ModalWidget
+        show={showModal}
+        contentClassName="modal-component"
+        container={document.getElementsByClassName('real-canvas')[0]}
+        size={size}
+        keyboard={true}
+        enforceFocus={false}
+        animation={false}
+        onShow={() => onShowModal()}
+        onHide={() => onHideModal()}
+        onEscapeKeyDown={() => hideOnEsc && onHideModal()}
+        id="modal-container"
+        component-id={id}
+        backdrop={'static'}
+        scrollable={true}
+        modalProps={{
+          customStyles,
+          parentRef,
+          id,
+          title,
+          titleAlignment,
+          hideTitleBar,
+          hideCloseButton,
+          onHideModal,
+          component,
+          hideOnEsc,
+          modalHeight,
+          isLoading,
+          isDisabled: isDisabledModal,
+          showConfigHandler: mode === 'edit',
+          fullscreen: isFullScreen,
+          showHeader,
+          showFooter,
+          headerHeight: headerHeightPx,
+          footerHeight: footerHeightPx,
+          modalBodyHeight: computedCanvasHeight,
+          modalWidth,
+          onSelectModal: setSelectedComponentAsModal,
+        }}
+      />
+    </div>
+  );
+};
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/helpers/sideEffects.js b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/sideEffects.js
new file mode 100644
index 0000000000..e0dd8191b5
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/sideEffects.js
@@ -0,0 +1,35 @@
+// Side effects for modal, which include dom manipulation to hide overflow when opening
+// And cleaning up dom when modal is closed
+
+export const onShowSideEffects = () => {
+  const canvasElement = document.querySelector('.page-container.canvas-container');
+  const realCanvasEl = document.getElementsByClassName('real-canvas')[0];
+  const allModalContainers = realCanvasEl.querySelectorAll('.modal');
+  const modalContainer = allModalContainers[allModalContainers.length - 1];
+
+  if (canvasElement && realCanvasEl && modalContainer) {
+    const currentScroll = canvasElement.scrollTop;
+    canvasElement.style.overflowY = 'hidden';
+
+    modalContainer.style.height = `${canvasElement.offsetHeight}px`;
+    modalContainer.style.top = `${currentScroll}px`;
+  }
+};
+
+export const onHideSideEffects = (callback = () => {}) => {
+  const canvasElement = document.querySelector('.page-container.canvas-container');
+  const realCanvasEl = document.getElementsByClassName('real-canvas')[0];
+  const allModalContainers = realCanvasEl.querySelectorAll('.modal');
+  const modalContainer = allModalContainers[allModalContainers.length - 1];
+  const hasManyModalsOpen = allModalContainers.length > 1;
+
+  if (canvasElement && realCanvasEl && modalContainer) {
+    modalContainer.style.height = ``;
+    modalContainer.style.top = ``;
+    callback();
+    // fireEvent('onClose');
+  }
+  if (canvasElement && !hasManyModalsOpen) {
+    canvasElement.style.overflow = 'auto';
+  }
+};
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js
new file mode 100644
index 0000000000..ee536dcfe1
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/stylesFactory.js
@@ -0,0 +1,49 @@
+var tinycolor = require('tinycolor2');
+
+export function createModalStyles({
+  height,
+  modalHeight,
+  computedCanvasHeight,
+  bodyBackgroundColor,
+  darkMode,
+  isDisabledModal,
+  headerBackgroundColor,
+  headerHeightPx,
+  footerBackgroundColor,
+  footerHeightPx,
+  triggerButtonBackgroundColor,
+  triggerButtonTextColor,
+  isVisible,
+  boxShadow,
+}) {
+  const backwardCompatibilityCheck = height == '34' || modalHeight != undefined ? true : false;
+
+  return {
+    modalBody: {
+      height: backwardCompatibilityCheck ? computedCanvasHeight : height,
+      backgroundColor:
+        ['#fff', '#ffffffff'].includes(bodyBackgroundColor) && darkMode ? '#1F2837' : bodyBackgroundColor,
+      overflowY: isDisabledModal ? 'hidden' : 'auto',
+    },
+    modalHeader: {
+      backgroundColor:
+        ['#fff', '#ffffffff'].includes(headerBackgroundColor) && darkMode ? '#1F2837' : headerBackgroundColor,
+      height: headerHeightPx,
+      overflowY: isDisabledModal ? 'hidden' : 'auto',
+    },
+    modalFooter: {
+      backgroundColor:
+        ['#fff', '#ffffffff'].includes(footerBackgroundColor) && darkMode ? '#1F2837' : footerBackgroundColor,
+      height: footerHeightPx,
+      overflowY: isDisabledModal ? 'hidden' : 'auto',
+    },
+    buttonStyles: {
+      backgroundColor: triggerButtonBackgroundColor,
+      color: triggerButtonTextColor,
+      width: '100%',
+      display: isVisible ? '' : 'none',
+      '--tblr-btn-color-darker': tinycolor(triggerButtonBackgroundColor).darken(8).toString(),
+      boxShadow,
+    },
+  };
+}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/helpers/utils.js b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/utils.js
new file mode 100644
index 0000000000..e3a9276a75
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/helpers/utils.js
@@ -0,0 +1,44 @@
+const MODAL_HEADER = {
+  HEIGHT: 80,
+};
+const MODAL_FOOTER = {
+  HEIGHT: 80,
+};
+
+export const getCanvasHeight = (height) => {
+  const parsedHeight = height.includes('px') ? parseInt(height, 10) : height;
+
+  return Math.ceil(parsedHeight);
+};
+
+export const getModalBodyHeight = (
+  height,
+  showHeader,
+  showFooter,
+  headerHeight = MODAL_HEADER.HEIGHT,
+  footerHeight = MODAL_FOOTER.HEIGHT
+) => {
+  let modalHeight = height ? parseInt(height, 10) : 0;
+  let parsedHeaderHeight = showHeader ? parseInt(headerHeight, 10) : 0;
+  let parsedFooterHeight = showFooter ? parseInt(footerHeight, 10) : 0;
+
+  if (showHeader) {
+    modalHeight = modalHeight - parsedHeaderHeight;
+  }
+  if (showFooter) {
+    modalHeight = modalHeight - parsedFooterHeight;
+  }
+  return `${Math.max(modalHeight, 40)}px`;
+};
+
+export const getModalHeaderHeight = (showHeader, headerHeight = MODAL_FOOTER.HEIGHT) => {
+  let parsedHeight = showHeader ? parseInt(headerHeight, 10) : 0;
+
+  return `${parsedHeight}px`;
+};
+
+export const getModalFooterHeight = (showFooter, footerHeight = MODAL_FOOTER.HEIGHT) => {
+  let parsedHeight = showFooter ? parseInt(footerHeight, 10) : 0;
+
+  return `${parsedHeight}px`;
+};
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/hooks/useModalCSA.js b/frontend/src/AppBuilder/Widgets/ModalV2/hooks/useModalCSA.js
new file mode 100644
index 0000000000..43ed5278dc
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/hooks/useModalCSA.js
@@ -0,0 +1,84 @@
+import { useEffect, useState, useRef } from 'react';
+
+export const useExposeState = ({
+  loadingState,
+  visibleState,
+  disabledModalState,
+  disabledTriggerState,
+  setExposedVariables,
+  setExposedVariable,
+  onHideModal,
+  onShowModal,
+}) => {
+  const [isVisible, setVisibility] = useState(visibleState ?? true);
+  const [isLoading, setLoading] = useState(loadingState ?? false);
+  const [isDisabledModal, setDisabledModal] = useState(disabledModalState ?? false);
+  const [isDisabledTrigger, setDisabledTrigger] = useState(disabledTriggerState ?? false);
+
+  // Track previous values to prevent redundant updates
+  const prevValues = useRef({});
+
+  // Effect to sync state with props (only when props change)
+  useEffect(() => {
+    setDisabledModal(disabledModalState);
+  }, [disabledModalState]);
+
+  useEffect(() => {
+    setDisabledTrigger(disabledTriggerState);
+  }, [disabledTriggerState]);
+
+  useEffect(() => {
+    setVisibility(visibleState);
+  }, [visibleState]);
+
+  useEffect(() => {
+    setLoading(loadingState);
+  }, [loadingState]);
+
+  // Expose state-modifying functions only once
+  useEffect(() => {
+    setExposedVariables({
+      setDisableTrigger: async (value) => setDisabledTrigger(value),
+      setDisableModal: async (value) => setDisabledModal(value),
+      setVisibility: async (value) => setVisibility(value),
+      setLoading: async (value) => setLoading(value),
+      open: async () => onShowModal(),
+      close: async () => onHideModal(),
+    });
+  }, []);
+
+  // Prevent redundant updates to `setExposedVariable`
+  const updateExposedVariable = (key, value) => {
+    if (prevValues.current[key] !== value) {
+      prevValues.current[key] = value;
+      setExposedVariable(key, value);
+    }
+  };
+
+  useEffect(() => {
+    updateExposedVariable('isDisabledModal', isDisabledModal);
+  }, [isDisabledModal]);
+
+  useEffect(() => {
+    updateExposedVariable('isDisabledTrigger', isDisabledTrigger);
+  }, [isDisabledTrigger]);
+
+  useEffect(() => {
+    updateExposedVariable('isVisible', isVisible);
+  }, [isVisible]);
+
+  useEffect(() => {
+    updateExposedVariable('isLoading', isLoading);
+  }, [isLoading]);
+
+  return {
+    isDisabledTrigger,
+    setDisabledTrigger,
+    isDisabledModal,
+    setDisabledModal,
+    isVisible,
+    setVisibility,
+    isLoading,
+    setLoading,
+  };
+};
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/hooks/useModalZIndex.js b/frontend/src/AppBuilder/Widgets/ModalV2/hooks/useModalZIndex.js
new file mode 100644
index 0000000000..e3a18f445d
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/hooks/useModalZIndex.js
@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+import { useGridStore } from '@/_stores/gridStore';
+
+/**** Start - Logic to reset the zIndex of modal control box ****/
+export const useResetZIndex = ({ showModal, id, mode }) => {
+  const controlBoxRef = useRef(null);
+
+  useEffect(() => {
+    if (!showModal && mode === 'edit') {
+      controlBoxRef.current?.classList?.remove('modal-moveable');
+      controlBoxRef.current = null;
+    }
+    if (showModal) {
+      useGridStore.getState().actions.setOpenModalWidgetId(id);
+    } else {
+      if (useGridStore.getState().openModalWidgetId === id) {
+        useGridStore.getState().actions.setOpenModalWidgetId(null);
+      }
+    }
+  }, [showModal, id, mode]);
+  /**** End - Logic to reset the zIndex of modal control box ****/
+
+  return {
+    controlBoxRef,
+  };
+};
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/hooks/useResizeSideEffects.js b/frontend/src/AppBuilder/Widgets/ModalV2/hooks/useResizeSideEffects.js
new file mode 100644
index 0000000000..8d1c0808f2
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/hooks/useResizeSideEffects.js
@@ -0,0 +1,80 @@
+import { useState, useEffect, useRef } from 'react';
+
+export function useModalEventSideEffects({
+  showModal,
+  size,
+  id,
+  onShowSideEffects,
+  closeOnClickingOutside,
+  onHideModal,
+}) {
+  const [modalWidth, setModalWidth] = useState();
+  const parentRef = useRef(null);
+
+  // When query panel opens or closes, the modal container height should change to
+  // accomodate the new height of the canvas
+
+  useEffect(() => {
+    // Select the DOM element
+    const canvasElement = document.querySelector('.page-container.canvas-container');
+
+    if (!canvasElement) return; // Ensure the element exists
+
+    // Create a ResizeObserver
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        // Update the height state when the element's height changes
+        onShowSideEffects();
+
+        // When modal is in fullscreen and width of browser changes, update the modal width
+        if (size === 'fullscreen') {
+          const width = entry.target.offsetWidth;
+          setModalWidth(width);
+        }
+      }
+    });
+
+    // Observe the canvas element
+    resizeObserver.observe(canvasElement);
+
+    return () => {
+      // Cleanup observer on component unmount
+      resizeObserver.disconnect();
+    };
+  }, [size, onShowSideEffects]);
+
+  useEffect(() => {
+    if (showModal && parentRef.current) {
+      if (size === 'fullscreen') {
+        // First time modal is opened, the whole modal is part of the full body, later put into the canvas
+        // This delay is to get the correct width of the modal
+
+        const canvasElement = document.querySelector('.page-container.canvas-container');
+        const width = canvasElement.offsetWidth;
+        setModalWidth(width);
+      } else {
+        setModalWidth(parentRef.current.offsetWidth);
+      }
+    }
+  }, [showModal, size, id]);
+
+  useEffect(() => {
+    if (closeOnClickingOutside) {
+      const handleClickOutside = (event) => {
+        const modalRef = parentRef?.current?.parentElement?.parentElement?.parentElement;
+
+        if (modalRef && modalRef === event.target) {
+          onHideModal();
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [closeOnClickingOutside, parentRef]);
+
+  return { modalWidth, parentRef };
+}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/style.scss b/frontend/src/AppBuilder/Widgets/ModalV2/style.scss
new file mode 100644
index 0000000000..18b4bb8d3b
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/style.scss
@@ -0,0 +1,66 @@
+.modal-open .modal.show {
+  /* To fix the padding issue */
+  scrollbar-gutter: auto;
+  //  padding-right: 0 !important;
+}
+
+.modal-content.modal-component.tj-modal-widget-content {
+  border: 0;
+
+  .tj-modal-close-button {
+    padding: 8px;
+    width: 40px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--interactive-hover);
+    }
+
+    &.is-disabled {
+      position: absolute;
+      top: 8px;
+      bottom: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      left: 0;
+      z-index: 1;
+    }
+  }
+
+  .tj-modal-disabled-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 1;
+    margin: 0;
+  }
+
+  .modal-header {
+    padding: 0;
+    position: relative;
+  }
+
+  .modal-body {
+    overflow-x: hidden;
+    position: relative;
+  }
+
+  .modal-footer {
+    position: relative;
+    padding: 0;
+    border-top: 1px solid var(--border-weak);
+    overflow-x: hidden;
+    width: 100%;
+  }
+}
diff --git a/frontend/src/AppBuilder/_helpers/editorHelpers.js b/frontend/src/AppBuilder/_helpers/editorHelpers.js
index 9abeb9a56b..38e9abd955 100644
--- a/frontend/src/AppBuilder/_helpers/editorHelpers.js
+++ b/frontend/src/AppBuilder/_helpers/editorHelpers.js
@@ -65,6 +65,7 @@ import { Tabs } from '@/AppBuilder/Widgets/Tabs';
 import { Kanban } from '@/AppBuilder/Widgets/Kanban/Kanban';
 import { Form } from '@/AppBuilder/Widgets/Form/Form';
 import { Modal } from '@/AppBuilder/Widgets/Modal';
+import { ModalV2 } from '@/AppBuilder/Widgets/ModalV2/ModalV2';
 import { Calendar } from '@/AppBuilder/Widgets/Calendar/Calendar';
 // import './requestIdleCallbackPolyfill';
 
@@ -106,6 +107,7 @@ export const AllComponents = {
   Multiselect,
   MultiselectV2,
   Modal,
+  ModalV2,
   Chart,
   Map: MapComponent,
   QrScanner,
diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
index 702bb8dfcc..14971be9d7 100644
--- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
@@ -10,7 +10,11 @@ import {
 import { extractAndReplaceReferencesFromString } from '@/AppBuilder/_stores/ast';
 import { deepClone } from '@/_helpers/utilities/utils.helpers';
 import { cloneDeep, merge, set as lodashSet } from 'lodash';
-import { computeComponentName, getAllChildComponents } from '@/AppBuilder/AppCanvas/appCanvasUtils';
+import {
+  computeComponentName,
+  getAllChildComponents,
+  getParentWidgetFromId,
+} from '@/AppBuilder/AppCanvas/appCanvasUtils';
 import { pageConfig } from '@/AppBuilder/RightSideBar/PageSettingsTab/pageConfig';
 import { RIGHT_SIDE_BAR_TAB } from '@/AppBuilder/RightSideBar/rightSidebarConstants';
 import { DEFAULT_COMPONENT_STRUCTURE } from './resolvedSlice';
@@ -761,7 +765,7 @@ export const createComponentsSlice = (set, get) => ({
     const { getComponentTypeFromId } = get();
     const transformedParentId = parentId?.length > 36 ? parentId.slice(0, 36) : parentId;
     let parentType = getComponentTypeFromId(transformedParentId, moduleId);
-    const parentWidget = parentType === 'Kanban' ? 'Kanban_card' : parentType;
+    const parentWidget = getParentWidgetFromId(parentType, parentId);
     const restrictedWidgets = RESTRICTED_WIDGETS_CONFIG?.[parentWidget] || [];
     const isParentChangeAllowed = !restrictedWidgets.includes(currentWidget);
     if (!isParentChangeAllowed)
diff --git a/frontend/src/Editor/ControlledComponentToRender.jsx b/frontend/src/Editor/ControlledComponentToRender.jsx
index 4765d0d69f..54a451188b 100644
--- a/frontend/src/Editor/ControlledComponentToRender.jsx
+++ b/frontend/src/Editor/ControlledComponentToRender.jsx
@@ -10,7 +10,7 @@ function deepEqualityCheckusingLoDash(obj1, obj2) {
 export const shouldUpdate = (prevProps, nextProps) => {
   const listToRender = getComponentsToRenders();
   // evaluate change in exposedVariables only for Modal component, because open/close in modal relies on exposedVariables
-  const compareExposedVariables = nextProps.componentName === 'Modal';
+  const compareExposedVariables = nextProps.componentName === 'Modal' || nextProps.componentName === 'ModalV2';
 
   let needToRender = false;
 
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/DateTimePicker.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/DateTimePicker.jsx
index 40818a3bb9..7a4a0b0bce 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/DateTimePicker.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/DateTimePicker.jsx
@@ -163,7 +163,7 @@ export const DateTimePicker = ({
             <div className={`fw-400 tjdbCellMenuShortcutsText`}>Save Changes</div>
           </div>
           <div className="d-flex align-items-center gap-1">
-            <div className={`fw-500 tjdbCellMenuShortcutsInfo`} id="escbutton">
+            <div className={`fw-500 tjdbCellMenuShortcutsInfo esc-btn-datepicker`} id="escbutton">
               Esc
             </div>
             <div className={`fw-400 tjdbCellMenuShortcutsText`}>Discard Changes</div>
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss
index 95d2ab56e0..55d0e7f3ed 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss
@@ -214,4 +214,24 @@
 .input-value-padding {
   box-sizing: border-box;
   padding-right: 30px !important;
+}
+
+.datepicker-widget.theme-tjdb{
+  .react-datepicker__navigation{
+    overflow: visible !important;
+    height: inherit !important;
+  }
+}
+
+.esc-btn-datepicker{
+  height: 18px ;
+  align-items: center;
+}
+
+.tjdb-td-wrapper{
+  .react-datepicker-time__input{
+    input{
+      line-height: normal !important;
+    }
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/Editor/WidgetManager/configs/index.js b/frontend/src/Editor/WidgetManager/configs/index.js
index d73cd8934f..93e45fd06c 100644
--- a/frontend/src/Editor/WidgetManager/configs/index.js
+++ b/frontend/src/Editor/WidgetManager/configs/index.js
@@ -2,6 +2,7 @@ import { buttonConfig } from './button';
 import { tableConfig } from './table';
 import { chartConfig } from './chart';
 import { modalConfig } from './modal';
+import { modalV2Config } from './modalV2';
 import { formConfig } from './form';
 import { textinputConfig } from './textinput';
 import { numberinputConfig } from './numberinput';
@@ -59,7 +60,8 @@ export {
   buttonConfig,
   tableConfig,
   chartConfig,
-  modalConfig,
+  modalConfig, //!Depreciated
+  modalV2Config,
   formConfig,
   textinputConfig,
   numberinputConfig,
diff --git a/frontend/src/Editor/WidgetManager/configs/modal.js b/frontend/src/Editor/WidgetManager/configs/modal.js
index 60f791831e..7716ac8e2c 100644
--- a/frontend/src/Editor/WidgetManager/configs/modal.js
+++ b/frontend/src/Editor/WidgetManager/configs/modal.js
@@ -1,6 +1,6 @@
 export const modalConfig = {
-  name: 'Modal',
-  displayName: 'Modal',
+  name: 'ModalLegacy',
+  displayName: 'Modal (Legacy)',
   description: 'Show pop-up windows',
   component: 'Modal',
   defaultSize: {
diff --git a/frontend/src/Editor/WidgetManager/configs/modalV2.js b/frontend/src/Editor/WidgetManager/configs/modalV2.js
new file mode 100644
index 0000000000..e7e96c4398
--- /dev/null
+++ b/frontend/src/Editor/WidgetManager/configs/modalV2.js
@@ -0,0 +1,277 @@
+export const modalV2Config = {
+  name: 'Modal',
+  displayName: 'Modal',
+  description: 'Show pop-up windows',
+  component: 'ModalV2',
+  defaultSize: {
+    width: 10,
+    height: 34,
+  },
+  others: {
+    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+  },
+  properties: {
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Modal trigger visibility',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    disabledTrigger: {
+      type: 'toggle',
+      displayName: 'Disable modal trigger',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    disabledModal: {
+      type: 'toggle',
+      displayName: 'Disable modal window',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    useDefaultButton: {
+      type: 'toggle',
+      displayName: 'Use default trigger button',
+      validation: {
+        schema: {
+          type: 'boolean',
+        },
+        defaultValue: true,
+      },
+    },
+    triggerButtonLabel: {
+      type: 'code',
+      displayName: 'Trigger button label',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'Launch Modal',
+      },
+    },
+
+    // Data Accordion
+    showHeader: { type: 'toggle', displayName: 'Header', accordian: 'Data' },
+    showFooter: { type: 'toggle', displayName: 'Footer', accordian: 'Data' },
+
+    size: {
+      type: 'select',
+      displayName: 'Width',
+      accordian: 'Data',
+      options: [
+        { name: 'small', value: 'sm' },
+        { name: 'medium', value: 'lg' },
+        { name: 'large', value: 'xl' },
+        { name: 'fullscreen', value: 'fullscreen' },
+      ],
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'lg',
+      },
+    },
+    modalHeight: {
+      type: 'numberInput',
+      displayName: 'Height',
+      accordian: 'Data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 400 },
+    },
+    headerHeight: {
+      type: 'numberInput',
+      displayName: 'Header height',
+      accordian: 'Data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+    },
+    footerHeight: {
+      type: 'numberInput',
+      displayName: 'Footer height',
+      accordian: 'Data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+    },
+    hideOnEsc: { type: 'toggle', displayName: 'Close on escape key', section: 'additionalActions' },
+    closeOnClickingOutside: { type: 'toggle', displayName: 'Close on clicking outside', section: 'additionalActions' },
+    hideCloseButton: { type: 'toggle', displayName: 'Hide close button', section: 'additionalActions' },
+  },
+  events: {
+    onOpen: { displayName: 'On open' },
+    onClose: { displayName: 'On close' },
+  },
+  defaultChildren: [
+    {
+      componentName: 'Text',
+      slotName: 'header',
+      layout: {
+        top: 21,
+        left: 1,
+        height: 40,
+      },
+      displayName: 'ModalHeaderTitle',
+      properties: ['text'],
+      accessorKey: 'text',
+      styles: ['fontWeight', 'textSize', 'textColor'],
+      defaultValue: {
+        text: 'Modal title',
+        textSize: 20,
+        textColor: '#000',
+      },
+    },
+    {
+      componentName: 'Button',
+      slotName: 'footer',
+      layout: {
+        top: 24,
+        left: 22,
+        height: 36,
+      },
+      displayName: 'ModalFooterCancel',
+      properties: ['text'],
+      styles: ['type', 'borderColor', 'padding'],
+      defaultValue: {
+        text: 'Button1',
+        type: 'outline',
+        borderColor: '#CCD1D5',
+      },
+    },
+    {
+      componentName: 'Button',
+      slotName: 'footer',
+      layout: {
+        top: 24,
+        left: 32,
+        height: 36,
+      },
+      displayName: 'ModalFooterConfirm',
+      properties: ['text'],
+      defaultValue: {
+        text: 'Button2',
+        padding: 'none',
+      },
+    },
+  ],
+  styles: {
+    headerBackgroundColor: {
+      type: 'color',
+      displayName: 'Header background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ffffffff',
+      },
+    },
+    footerBackgroundColor: {
+      type: 'color',
+      displayName: 'Footer background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ffffffff',
+      },
+    },
+    bodyBackgroundColor: {
+      type: 'color',
+      displayName: 'Body background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ffffffff',
+      },
+    },
+    triggerButtonBackgroundColor: {
+      type: 'color',
+      displayName: 'Trigger button background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: false,
+      },
+    },
+    triggerButtonTextColor: {
+      type: 'color',
+      displayName: 'Trigger button text color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: false,
+      },
+    },
+  },
+  exposedVariables: {
+    show: false,
+    isDisabledModal: false,
+    isDisabledTrigger: false,
+    isVisible: true,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'open',
+      displayName: 'Open',
+    },
+    {
+      handle: 'close',
+      displayName: 'Close',
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisableTrigger',
+      displayName: 'Set disable trigger',
+      params: [{ handle: 'setDisableTrigger', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisableModal',
+      displayName: 'Set disable modal',
+      params: [{ handle: 'setDisableModal', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
+  definition: {
+    others: {
+      showOnDesktop: { value: '{{true}}' },
+      showOnMobile: { value: '{{false}}' },
+    },
+    properties: {
+      loadingState: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
+      disabledTrigger: { value: '{{false}}' },
+      disabledModal: { value: '{{false}}' },
+      useDefaultButton: { value: `{{true}}` },
+      triggerButtonLabel: { value: `Launch Modal` },
+      size: { value: 'lg' },
+      showHeader: { value: '{{true}}' },
+      showFooter: { value: '{{true}}' },
+      hideCloseButton: { value: '{{false}}' },
+      hideOnEsc: { value: '{{true}}' },
+      closeOnClickingOutside: { value: '{{false}}' },
+      modalHeight: { value: 400 },
+      headerHeight: { value: 80 },
+      footerHeight: { value: 80 },
+    },
+    events: [],
+    styles: {
+      headerBackgroundColor: { value: '#ffffffff' },
+      footerBackgroundColor: { value: '#ffffffff' },
+      bodyBackgroundColor: { value: '#ffffffff' },
+      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      triggerButtonTextColor: { value: '#ffffffff' },
+    },
+  },
+};
diff --git a/frontend/src/Editor/WidgetManager/constants.js b/frontend/src/Editor/WidgetManager/constants.js
index 35ea9d5252..8c593455e1 100644
--- a/frontend/src/Editor/WidgetManager/constants.js
+++ b/frontend/src/Editor/WidgetManager/constants.js
@@ -1 +1,7 @@
-export const LEGACY_ITEMS = ['ToggleSwitchLegacy', 'DropdownLegacy', 'MultiselectLegacy', 'RadioButtonLegacy'];
+export const LEGACY_ITEMS = [
+  'ToggleSwitchLegacy',
+  'DropdownLegacy',
+  'MultiselectLegacy',
+  'RadioButtonLegacy',
+  'ModalLegacy',
+];
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 30bfdfc7f2..2b03f5c3f5 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -3,6 +3,7 @@ import {
   tableConfig,
   chartConfig,
   modalConfig,
+  modalV2Config,
   formConfig,
   textinputConfig,
   numberinputConfig,
@@ -62,6 +63,7 @@ export const widgets = [
   buttonConfig,
   chartConfig,
   modalConfig,
+  modalV2Config,
   formConfig,
   textinputConfig,
   numberinputConfig,
diff --git a/frontend/src/TooljetDatabase/Filter/index.jsx b/frontend/src/TooljetDatabase/Filter/index.jsx
index 84b0110fe4..6c8f7c811d 100644
--- a/frontend/src/TooljetDatabase/Filter/index.jsx
+++ b/frontend/src/TooljetDatabase/Filter/index.jsx
@@ -251,11 +251,7 @@ const Filter = ({
               }
             />
             <div className="tw-flex items-center tw-ml-[3px]">
-              {filterCount > 0 ? (
-                <span>{pluralize(validFilterCountRef.current, 'filter')}</span>
-              ) : (
-                <div>&nbsp;&nbsp;Filter</div>
-              )}
+              {filterCount > 0 ? <span>{pluralize(filterCount, 'filter')}</span> : <div>&nbsp;&nbsp;Filter</div>}
             </div>
             {/* {areFiltersApplied && (
               <span>ed by {pluralize(Object.values(filters).filter(checkIsFilterObjectEmpty).length, 'column')}</span>
diff --git a/frontend/src/_components/OverflowTooltip.jsx b/frontend/src/_components/OverflowTooltip.jsx
index 297f17d236..1523ae449a 100644
--- a/frontend/src/_components/OverflowTooltip.jsx
+++ b/frontend/src/_components/OverflowTooltip.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ToolTip } from '@/_components';
 
-export default function OverflowTooltip({ children, className, whiteSpace = 'nowrap', ...rest }) {
+export default function OverflowTooltip({ children, className, whiteSpace = 'nowrap', placement = 'bottom', ...rest }) {
   const [isOverflowed, setIsOverflow] = useState(false);
   const textElementRef = useRef();
 
@@ -17,7 +17,7 @@ export default function OverflowTooltip({ children, className, whiteSpace = 'now
       className={className}
       delay={{ show: '0', hide: '0' }}
       tooltipClassName="overflow-tooltip"
-      placement="bottom"
+      placement={placement}
       message={children}
       show={isOverflowed}
       width={rest?.width}
diff --git a/frontend/src/_helpers/authorizeWorkspace.js b/frontend/src/_helpers/authorizeWorkspace.js
index 540d4f9b73..a03d7b986d 100644
--- a/frontend/src/_helpers/authorizeWorkspace.js
+++ b/frontend/src/_helpers/authorizeWorkspace.js
@@ -226,7 +226,7 @@ export const authorizeUserAndHandleErrors = (workspace_id, workspace_slug, callb
           const unauthorized_organization_slug = workspace_slug;
 
           /* get current session's workspace id */
-          authenticationService
+          sessionService
             .validateSession()
             .then(({ current_organization_id, ...restSessionData }) => {
               /* change current organization id to valid one [current logged in organization] */
diff --git a/frontend/src/_services/custom_styles.service.js b/frontend/src/_services/custom_styles.service.js
index d3c98d6382..73de321466 100644
--- a/frontend/src/_services/custom_styles.service.js
+++ b/frontend/src/_services/custom_styles.service.js
@@ -3,13 +3,13 @@ import { authHeader, handleResponse, handleResponseWithoutValidation } from '@/_
 
 function save(body) {
   const requestOptions = { method: 'POST', headers: authHeader(), credentials: 'include', body: JSON.stringify(body) };
-  return fetch(`${config.apiUrl}/custom-styles/`, requestOptions).then(handleResponse);
+  return fetch(`${config.apiUrl}/custom-styles`, requestOptions).then(handleResponse);
 }
 
 function get(validateResponse = true) {
   const requestOptions = { method: 'GET', headers: authHeader(), credentials: 'include' };
   const handleOutput = validateResponse ? handleResponse : handleResponseWithoutValidation;
-  return fetch(`${config.apiUrl}/custom-styles/`, requestOptions).then(handleOutput);
+  return fetch(`${config.apiUrl}/custom-styles`, requestOptions).then(handleOutput);
 }
 
 function getForAppViewerEditor(validateResponse = true) {
diff --git a/frontend/src/_styles/queryManager.scss b/frontend/src/_styles/queryManager.scss
index 8a9eaf972a..7b256c3812 100644
--- a/frontend/src/_styles/queryManager.scss
+++ b/frontend/src/_styles/queryManager.scss
@@ -1250,6 +1250,11 @@ $border-radius: 4px;
         color: var(--slate12) !important;
       }
     }
+    &.data-source-exists {
+      .cm-editor {
+        border-radius: 0 4px 4px 0 !important;
+      }
+    }
   }
 
   .rest-api-methods-select-element-container {
diff --git a/frontend/src/_styles/tabler.scss b/frontend/src/_styles/tabler.scss
index 192915bec9..6ea0021701 100644
--- a/frontend/src/_styles/tabler.scss
+++ b/frontend/src/_styles/tabler.scss
@@ -5277,7 +5277,8 @@ fieldset:disabled .btn {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    outline: 0
+    outline: 0;
+    padding-left: 0 !important;
 }
 
 .modal-dialog {
@@ -5311,7 +5312,7 @@ fieldset:disabled .btn {
 }
 
 .modal-dialog-scrollable .modal-content {
-    max-height: 100%;
+    max-height: 88%;
     overflow: hidden
 }
 
@@ -5447,6 +5448,10 @@ fieldset:disabled .btn {
     margin: 0
 }
 
+.real-canvas .modal-dialog.modal-fullscreen {
+    width: 100%;
+}
+
 .modal-fullscreen .modal-content {
     height: 100%;
     border: 0;
@@ -5465,6 +5470,12 @@ fieldset:disabled .btn {
     border-radius: 0
 }
 
+.modal-dialog-scrollable.modal-fullscreen .modal-content.modal-component {
+    // Modal header height
+    padding-bottom: 56px;
+    max-height: 100%;
+}
+
 @media (max-width:575.98px) {
     .modal-fullscreen-sm-down {
         width: 100vw;
@@ -19129,4 +19140,4 @@ img {
         background: #1f2936;
         border-color: #dadcde
     }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index f2a9c4c010..ff2e935de6 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -2665,10 +2665,18 @@ hr {
     overflow-y: initial !important
   }
 
-  .modal-dialog-scrollable .modal-content {
+  .modal-dialog-scrollable:not(.modal-fullscreen) .modal-content {
     max-height: 88% !important;
   }
 
+  .modal-dialog-scrollable.modal-fullscreen .modal-content {
+    max-height: 100% !important;
+  }
+
+  .modal-dialog-scrollable.modal-fullscreen .modal-content.modal-component {
+    // Modal header height
+    padding-bottom: 0;
+  }
 }
 
 
@@ -14022,8 +14030,8 @@ tbody {
 }
 
 /*
-* remove this once whole app is migrated to new styles. use only `theme-dark` class everywhere. 
-* This is added since some of the pages are in old theme and making changes to `theme-dark` styles can break UI style somewhere else 
+* remove this once whole app is migrated to new styles. use only `theme-dark` class everywhere.
+* This is added since some of the pages are in old theme and making changes to `theme-dark` styles can break UI style somewhere else
 */
 .tj-dark-mode {
   background-color: var(--base) !important;
@@ -18622,4 +18630,4 @@ section.ai-message-prompt-input-wrapper {
       background: #FFFAEB !important;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/modules/WorkspaceSettings/pages/WorkspaceLogin/WorkspaceLoginSettings.jsx b/frontend/src/modules/WorkspaceSettings/pages/WorkspaceLogin/WorkspaceLoginSettings.jsx
index 367de75afc..429490cda4 100644
--- a/frontend/src/modules/WorkspaceSettings/pages/WorkspaceLogin/WorkspaceLoginSettings.jsx
+++ b/frontend/src/modules/WorkspaceSettings/pages/WorkspaceLogin/WorkspaceLoginSettings.jsx
@@ -31,6 +31,7 @@ class OrganizationLogin extends React.Component {
       instanceSSO: [],
       featureAccess: {},
       isBasicPlan: false,
+      isCommunity: false,
       canToggleAutomaticSSOLogin: false,
       showDisableAutoSSOModal: false,
     };
@@ -152,6 +153,7 @@ class OrganizationLogin extends React.Component {
   async setLoginConfigs() {
     const featureAccess = await licenseService.getFeatureAccess();
     const isBasicPlan = !featureAccess?.licenseStatus?.isLicenseValid || featureAccess?.licenseStatus?.isExpired;
+    const isCommunity = !featureAccess?.licenseStatus?.isLicenseValid && featureAccess?.expiry == '';
     const settings = await this.fetchSSOSettings();
     const instanceSSOResult = await instanceSettingsService.fetchSSOConfigs();
     const instanceSSO = !Array.isArray(instanceSSOResult)
@@ -180,7 +182,8 @@ class OrganizationLogin extends React.Component {
     const enabledSSOs = combinedSSOConfigs.filter(
       (obj) => obj.enabled && obj.sso !== 'form' && (!this.protectedSSO.includes(obj.sso) || featureAccess?.[obj.sso])
     );
-    let passwordLoginEnabled = isBasicPlan ? true : ssoConfigs?.find((obj) => obj.sso === 'form')?.enabled || false;
+    let passwordLoginEnabled =
+      isBasicPlan && !isCommunity ? true : ssoConfigs?.find((obj) => obj.sso === 'form')?.enabled || false;
 
     if (enabledSSOs.length === 0) {
       try {
@@ -211,6 +214,7 @@ class OrganizationLogin extends React.Component {
       instanceSSO: [...instanceSSO],
       featureAccess: featureAccess,
       isBasicPlan: isBasicPlan,
+      isCommunity: isCommunity,
       canToggleAutomaticSSOLogin: canToggleAutomaticSSOLogin,
       isAnySSOEnabled:
         ssoConfigs?.some(
@@ -447,6 +451,7 @@ class OrganizationLogin extends React.Component {
       instanceSSO,
       featureAccess,
       isBasicPlan,
+      isCommunity,
       canToggleAutomaticSSOLogin,
     } = this.state;
     const flexContainerStyle = {
@@ -588,7 +593,7 @@ class OrganizationLogin extends React.Component {
                                 onChange={() => this.handleCheckboxChange('passwordLoginEnabled')}
                                 data-cy="password-enable-toggle"
                                 checked={options?.passwordLoginEnabled === true}
-                                disabled={isBasicPlan ? true : !isAnySSOEnabled}
+                                disabled={isBasicPlan && !isCommunity ? true : !isAnySSOEnabled}
                               />
                               <label className="form-check-label bold-text" data-cy="label-password-login">
                                 Password login
diff --git a/frontend/src/modules/onboarding/pages/InvitationPage/InvitationPage.jsx b/frontend/src/modules/onboarding/pages/InvitationPage/InvitationPage.jsx
index f157f4744b..e2a4360943 100644
--- a/frontend/src/modules/onboarding/pages/InvitationPage/InvitationPage.jsx
+++ b/frontend/src/modules/onboarding/pages/InvitationPage/InvitationPage.jsx
@@ -9,6 +9,7 @@ import { utils } from '@/modules/common/helpers';
 import { getSubpath } from '@/_helpers/routes';
 import { TJLoader } from '@/_ui/TJLoader/TJLoader';
 import useOnboardingStore from '@/modules/common/helpers/onboardingStoreHelper';
+import useInvitationsStore from '@/modules/common/helpers/invitationStoreHelper';
 
 const PostOnboardingComponent = () => <TJLoader />;
 export const InvitationPage = (darkMode = false) => {
@@ -24,7 +25,7 @@ export const InvitationPage = (darkMode = false) => {
   const source = searchParams.get('source');
   const redirectTo = searchParams.get('redirectTo');
 
-  const { initiateInvitedUserOnboarding } = invitationsStore();
+  const { initiateInvitedUserOnboarding } = useInvitationsStore();
   const { resumeSignupOnboarding, isOnboardingStepsCompleted } = useOnboardingStore();
   useEffect(() => {
     // getUserDetails();
diff --git a/server/src/modules/app/module.ts b/server/src/modules/app/module.ts
index 1f3939cd32..c0ca97e4be 100644
--- a/server/src/modules/app/module.ts
+++ b/server/src/modules/app/module.ts
@@ -40,6 +40,7 @@ import { ImportExportResourcesModule } from '@modules/import-export-resources/mo
 import { TooljetDbModule } from '@modules/tooljet-db/module';
 import { WorkflowsModule } from '@modules/workflows/module';
 import { AiModule } from '@modules/ai/module';
+import { CustomStylesModule } from '@modules/custom-styles/module';
 
 export class AppModule implements OnModuleInit {
   static async register(configs: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
@@ -92,6 +93,7 @@ export class AppModule implements OnModuleInit {
       await TooljetDbModule.register(configs),
       await WorkflowsModule.register(configs),
       await AiModule.register(configs),
+      await CustomStylesModule.register(configs),
     ];
 
     return {
diff --git a/server/src/modules/apps/ability/index.ts b/server/src/modules/apps/ability/index.ts
index 478fa4a3d6..4200a1c463 100644
--- a/server/src/modules/apps/ability/index.ts
+++ b/server/src/modules/apps/ability/index.ts
@@ -94,26 +94,11 @@ export class FeatureAbilityFactory extends AbilityFactory<FEATURE_KEY, Subjects>
 
     if (isAllAppsViewable) {
       // add view permissions for all apps
-      can(
-        [
-          FEATURE_KEY.GET_ONE,
-          FEATURE_KEY.GET_BY_SLUG,
-          FEATURE_KEY.VALIDATE_PRIVATE_APP_ACCESS,
-          FEATURE_KEY.VALIDATE_RELEASED_APP_ACCESS,
-        ],
-        App
-      );
+      can([FEATURE_KEY.GET_ONE, FEATURE_KEY.GET_BY_SLUG, FEATURE_KEY.VALIDATE_RELEASED_APP_ACCESS], App);
     } else if (userAppPermissions?.viewableAppsId?.length) {
-      can(
-        [
-          FEATURE_KEY.GET_ONE,
-          FEATURE_KEY.GET_BY_SLUG,
-          FEATURE_KEY.VALIDATE_PRIVATE_APP_ACCESS,
-          FEATURE_KEY.VALIDATE_RELEASED_APP_ACCESS,
-        ],
-        App,
-        { id: { $in: userAppPermissions.viewableAppsId } }
-      );
+      can([FEATURE_KEY.GET_ONE, FEATURE_KEY.GET_BY_SLUG, FEATURE_KEY.VALIDATE_RELEASED_APP_ACCESS], App, {
+        id: { $in: userAppPermissions.viewableAppsId },
+      });
     }
   }
 }
diff --git a/server/src/modules/apps/services/widget-config/index.js b/server/src/modules/apps/services/widget-config/index.js
index 5ded535dd9..bef9a2ea99 100644
--- a/server/src/modules/apps/services/widget-config/index.js
+++ b/server/src/modules/apps/services/widget-config/index.js
@@ -2,6 +2,7 @@ import { buttonConfig } from './button';
 import { tableConfig } from './table';
 import { chartConfig } from './chart';
 import { modalConfig } from './modal';
+import { modalV2Config } from './modalV2';
 import { formConfig } from './form';
 import { textinputConfig } from './textinput';
 import { numberinputConfig } from './numberinput';
@@ -62,7 +63,8 @@ const widgets = {
   buttonConfig,
   tableConfig,
   chartConfig,
-  modalConfig,
+  modalConfig, //!Depreciated
+  modalV2Config,
   formConfig,
   textinputConfig,
   numberinputConfig,
diff --git a/server/src/modules/apps/services/widget-config/modal.js b/server/src/modules/apps/services/widget-config/modal.js
index 60f791831e..7716ac8e2c 100644
--- a/server/src/modules/apps/services/widget-config/modal.js
+++ b/server/src/modules/apps/services/widget-config/modal.js
@@ -1,6 +1,6 @@
 export const modalConfig = {
-  name: 'Modal',
-  displayName: 'Modal',
+  name: 'ModalLegacy',
+  displayName: 'Modal (Legacy)',
   description: 'Show pop-up windows',
   component: 'Modal',
   defaultSize: {
diff --git a/server/src/modules/apps/services/widget-config/modalV2.js b/server/src/modules/apps/services/widget-config/modalV2.js
new file mode 100644
index 0000000000..e7e96c4398
--- /dev/null
+++ b/server/src/modules/apps/services/widget-config/modalV2.js
@@ -0,0 +1,277 @@
+export const modalV2Config = {
+  name: 'Modal',
+  displayName: 'Modal',
+  description: 'Show pop-up windows',
+  component: 'ModalV2',
+  defaultSize: {
+    width: 10,
+    height: 34,
+  },
+  others: {
+    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+  },
+  properties: {
+    loadingState: {
+      type: 'toggle',
+      displayName: 'Loading state',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    visibility: {
+      type: 'toggle',
+      displayName: 'Modal trigger visibility',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: true,
+      },
+    },
+    disabledTrigger: {
+      type: 'toggle',
+      displayName: 'Disable modal trigger',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+    },
+    disabledModal: {
+      type: 'toggle',
+      displayName: 'Disable modal window',
+      validation: {
+        schema: { type: 'boolean' },
+        defaultValue: false,
+      },
+      section: 'additionalActions',
+    },
+    useDefaultButton: {
+      type: 'toggle',
+      displayName: 'Use default trigger button',
+      validation: {
+        schema: {
+          type: 'boolean',
+        },
+        defaultValue: true,
+      },
+    },
+    triggerButtonLabel: {
+      type: 'code',
+      displayName: 'Trigger button label',
+      validation: {
+        schema: {
+          type: 'string',
+        },
+        defaultValue: 'Launch Modal',
+      },
+    },
+
+    // Data Accordion
+    showHeader: { type: 'toggle', displayName: 'Header', accordian: 'Data' },
+    showFooter: { type: 'toggle', displayName: 'Footer', accordian: 'Data' },
+
+    size: {
+      type: 'select',
+      displayName: 'Width',
+      accordian: 'Data',
+      options: [
+        { name: 'small', value: 'sm' },
+        { name: 'medium', value: 'lg' },
+        { name: 'large', value: 'xl' },
+        { name: 'fullscreen', value: 'fullscreen' },
+      ],
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'lg',
+      },
+    },
+    modalHeight: {
+      type: 'numberInput',
+      displayName: 'Height',
+      accordian: 'Data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 400 },
+    },
+    headerHeight: {
+      type: 'numberInput',
+      displayName: 'Header height',
+      accordian: 'Data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+    },
+    footerHeight: {
+      type: 'numberInput',
+      displayName: 'Footer height',
+      accordian: 'Data',
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+    },
+    hideOnEsc: { type: 'toggle', displayName: 'Close on escape key', section: 'additionalActions' },
+    closeOnClickingOutside: { type: 'toggle', displayName: 'Close on clicking outside', section: 'additionalActions' },
+    hideCloseButton: { type: 'toggle', displayName: 'Hide close button', section: 'additionalActions' },
+  },
+  events: {
+    onOpen: { displayName: 'On open' },
+    onClose: { displayName: 'On close' },
+  },
+  defaultChildren: [
+    {
+      componentName: 'Text',
+      slotName: 'header',
+      layout: {
+        top: 21,
+        left: 1,
+        height: 40,
+      },
+      displayName: 'ModalHeaderTitle',
+      properties: ['text'],
+      accessorKey: 'text',
+      styles: ['fontWeight', 'textSize', 'textColor'],
+      defaultValue: {
+        text: 'Modal title',
+        textSize: 20,
+        textColor: '#000',
+      },
+    },
+    {
+      componentName: 'Button',
+      slotName: 'footer',
+      layout: {
+        top: 24,
+        left: 22,
+        height: 36,
+      },
+      displayName: 'ModalFooterCancel',
+      properties: ['text'],
+      styles: ['type', 'borderColor', 'padding'],
+      defaultValue: {
+        text: 'Button1',
+        type: 'outline',
+        borderColor: '#CCD1D5',
+      },
+    },
+    {
+      componentName: 'Button',
+      slotName: 'footer',
+      layout: {
+        top: 24,
+        left: 32,
+        height: 36,
+      },
+      displayName: 'ModalFooterConfirm',
+      properties: ['text'],
+      defaultValue: {
+        text: 'Button2',
+        padding: 'none',
+      },
+    },
+  ],
+  styles: {
+    headerBackgroundColor: {
+      type: 'color',
+      displayName: 'Header background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ffffffff',
+      },
+    },
+    footerBackgroundColor: {
+      type: 'color',
+      displayName: 'Footer background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ffffffff',
+      },
+    },
+    bodyBackgroundColor: {
+      type: 'color',
+      displayName: 'Body background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: '#ffffffff',
+      },
+    },
+    triggerButtonBackgroundColor: {
+      type: 'color',
+      displayName: 'Trigger button background color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: false,
+      },
+    },
+    triggerButtonTextColor: {
+      type: 'color',
+      displayName: 'Trigger button text color',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: false,
+      },
+    },
+  },
+  exposedVariables: {
+    show: false,
+    isDisabledModal: false,
+    isDisabledTrigger: false,
+    isVisible: true,
+    isLoading: false,
+  },
+  actions: [
+    {
+      handle: 'open',
+      displayName: 'Open',
+    },
+    {
+      handle: 'close',
+      displayName: 'Close',
+    },
+    {
+      handle: 'setVisibility',
+      displayName: 'Set visibility',
+      params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisableTrigger',
+      displayName: 'Set disable trigger',
+      params: [{ handle: 'setDisableTrigger', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisableModal',
+      displayName: 'Set disable modal',
+      params: [{ handle: 'setDisableModal', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setLoading',
+      displayName: 'Set loading',
+      params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+  ],
+  definition: {
+    others: {
+      showOnDesktop: { value: '{{true}}' },
+      showOnMobile: { value: '{{false}}' },
+    },
+    properties: {
+      loadingState: { value: `{{false}}` },
+      visibility: { value: '{{true}}' },
+      disabledTrigger: { value: '{{false}}' },
+      disabledModal: { value: '{{false}}' },
+      useDefaultButton: { value: `{{true}}` },
+      triggerButtonLabel: { value: `Launch Modal` },
+      size: { value: 'lg' },
+      showHeader: { value: '{{true}}' },
+      showFooter: { value: '{{true}}' },
+      hideCloseButton: { value: '{{false}}' },
+      hideOnEsc: { value: '{{true}}' },
+      closeOnClickingOutside: { value: '{{false}}' },
+      modalHeight: { value: 400 },
+      headerHeight: { value: 80 },
+      footerHeight: { value: 80 },
+    },
+    events: [],
+    styles: {
+      headerBackgroundColor: { value: '#ffffffff' },
+      footerBackgroundColor: { value: '#ffffffff' },
+      bodyBackgroundColor: { value: '#ffffffff' },
+      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      triggerButtonTextColor: { value: '#ffffffff' },
+    },
+  },
+};
diff --git a/server/src/modules/custom-styles/module.ts b/server/src/modules/custom-styles/module.ts
index 9ff9dc290b..20608341f2 100644
--- a/server/src/modules/custom-styles/module.ts
+++ b/server/src/modules/custom-styles/module.ts
@@ -1,11 +1,21 @@
-import { Module } from '@nestjs/common';
-import { CustomStylesController } from '@modules/custom-styles/controller';
-import { CustomStylesService } from '@modules/custom-styles/service';
+import { DynamicModule } from '@nestjs/common';
+import { getImportPath } from '@modules/app/constants';
+import { OrganizationsModule } from '@modules/organizations/module';
+import { FeatureAbilityFactory } from './ability';
+import { OrganizationRepository } from '@modules/organizations/repository';
+import { AppsRepository } from '@modules/apps/repository';
 
-@Module({
-  imports: [],
-  providers: [CustomStylesService],
-  controllers: [CustomStylesController],
-  exports: [],
-})
-export class CustomStylesModule {}
+export class CustomStylesModule {
+  static async register(configs?: { IS_GET_CONTEXT: boolean }): Promise<DynamicModule> {
+    const importPath = await getImportPath(configs?.IS_GET_CONTEXT);
+    const { CustomStylesController } = await import(`${importPath}/custom-styles/controller`);
+    const { CustomStylesService } = await import(`${importPath}/custom-styles/service`);
+    return {
+      module: CustomStylesModule,
+      imports: [await OrganizationsModule.register(configs)],
+      providers: [CustomStylesService, FeatureAbilityFactory, OrganizationRepository, AppsRepository],
+      controllers: [CustomStylesController],
+      exports: [],
+    };
+  }
+}
diff --git a/server/src/modules/data-sources/service.ts b/server/src/modules/data-sources/service.ts
index 201889101d..62c363b948 100644
--- a/server/src/modules/data-sources/service.ts
+++ b/server/src/modules/data-sources/service.ts
@@ -61,11 +61,24 @@ export class DataSourcesService implements IDataSourcesService {
       environmentId: selectedEnvironmentId,
     });
     for (const dataSource of dataSources) {
-      if (dataSource.pluginId) {
-        dataSource.plugin.iconFile.data = dataSource.plugin.iconFile.data.toString('utf8');
-        dataSource.plugin.manifestFile.data = JSON.parse(decode(dataSource.plugin.manifestFile.data.toString('utf8')));
-        dataSource.plugin.operationsFile.data = JSON.parse(
-          decode(dataSource.plugin.operationsFile.data.toString('utf8'))
+      const parseIfNeeded = (data: any) => {
+        if (typeof data === 'object' && data !== null) return data;
+        if (Buffer.isBuffer(data) || typeof data === 'string') {
+          return JSON.parse(decode(data.toString('utf8')));
+        }
+        return data;
+      };
+      try {
+        if (dataSource.pluginId) {
+          if (Buffer.isBuffer(dataSource.plugin.iconFile.data)) {
+            dataSource.plugin.iconFile.data = dataSource.plugin.iconFile.data.toString('utf8');
+          }
+          dataSource.plugin.manifestFile.data = parseIfNeeded(dataSource.plugin.manifestFile.data);
+          dataSource.plugin.operationsFile.data = parseIfNeeded(dataSource.plugin.operationsFile.data);
+        }
+      } catch (error) {
+        throw new BadRequestException(
+          `Error parsing plugin data for dataSourceId: ${dataSource.id}. Details: ${error.message}`
         );
       }
     }
diff --git a/server/src/modules/onboarding/guards/personal-workspace.guard.ts b/server/src/modules/onboarding/guards/personal-workspace.guard.ts
index 33d67b0d3e..82421d4274 100644
--- a/server/src/modules/onboarding/guards/personal-workspace.guard.ts
+++ b/server/src/modules/onboarding/guards/personal-workspace.guard.ts
@@ -10,10 +10,11 @@ export class AllowPersonalWorkspaceGuard implements CanActivate {
   async canActivate(context: ExecutionContext): Promise<boolean> {
     const request = context.switchToHttp().getRequest();
     const user = request.user;
+    const organizationId = request.body.organizationId;
 
     const isPersonalWorkspaceEnabled =
       (await this.instanceSettingsUtilService.getSettings(INSTANCE_USER_SETTINGS.ALLOW_PERSONAL_WORKSPACE)) === 'true';
 
-    return isSuperAdmin(user) || isPersonalWorkspaceEnabled;
+    return isSuperAdmin(user) || isPersonalWorkspaceEnabled || !!organizationId;
   }
 }
diff --git a/server/src/modules/organization-constants/controller.ts b/server/src/modules/organization-constants/controller.ts
index 39862dee29..894ed5da88 100644
--- a/server/src/modules/organization-constants/controller.ts
+++ b/server/src/modules/organization-constants/controller.ts
@@ -113,7 +113,7 @@ export class OrganizationConstantController implements IOrganizationConstantCont
   async delete(@User() user, @Param('id') constantId, @Query('environmentId') environmentId) {
     const { organizationId } = user;
 
-    await this.organizationConstantsService.delete(constantId, organizationId, environmentId);
+    await this.organizationConstantsService.delete(constantId, organizationId);
 
     return { statusCode: 204 };
   }
diff --git a/server/src/modules/organization-constants/util.service.ts b/server/src/modules/organization-constants/util.service.ts
index bf81f5daaa..6a6afb0bc4 100644
--- a/server/src/modules/organization-constants/util.service.ts
+++ b/server/src/modules/organization-constants/util.service.ts
@@ -84,7 +84,7 @@ export class OrganizationConstantsUtilService implements IOrganizationConstantsU
   async deleteOrgEnvironmentConstant(
     constantId: string,
     organizationId: string,
-    environmentId: string
+    environmentId?: string
   ): Promise<DeleteResult> {
     return await dbTransactionWrap(async (manager: EntityManager) => {
       const constantToDelete = await this.organizationConstantRepository.findOneByIdAndOrganizationId(
@@ -95,6 +95,11 @@ export class OrganizationConstantsUtilService implements IOrganizationConstantsU
         throw new Error('Constant not found');
       }
 
+      // If no environmentId is provided, delete the constant from all environments
+      if (!environmentId) {
+        return this.organizationConstantRepository.deleteOneById(constantId);
+      }
+
       if (constantToDelete.orgEnvironmentConstantValues.length === 1) {
         return this.organizationConstantRepository.deleteOneById(constantId);
       } else {
diff --git a/server/src/modules/organization-themes/constants/feature.ts b/server/src/modules/organization-themes/constants/feature.ts
index 0fa5e3dfd3..25b8274fa4 100644
--- a/server/src/modules/organization-themes/constants/feature.ts
+++ b/server/src/modules/organization-themes/constants/feature.ts
@@ -7,7 +7,7 @@ export const FEATURES: FeaturesConfig = {
   [MODULES.ORGANIZATION_THEMES]: {
     [FEATURE_KEY.THEMES_CREATE]: { license: LICENSE_FIELD.CUSTOM_THEMES },
     [FEATURE_KEY.THEMES_DELETE]: { license: LICENSE_FIELD.CUSTOM_THEMES },
-    [FEATURE_KEY.THEMES_GET_ALL]: { license: LICENSE_FIELD.CUSTOM_THEMES },
+    [FEATURE_KEY.THEMES_GET_ALL]: {},
     [FEATURE_KEY.THEMES_UPDATE_DEFAULT]: { license: LICENSE_FIELD.CUSTOM_THEMES },
     [FEATURE_KEY.THEMES_UPDATE_DEFINITION]: { license: LICENSE_FIELD.CUSTOM_THEMES },
     [FEATURE_KEY.THEMES_UPDATE_NAME]: { license: LICENSE_FIELD.CUSTOM_THEMES },
diff --git a/server/src/modules/session/guards/invited-user-session.guard.ts b/server/src/modules/session/guards/invited-user-session.guard.ts
index f47cecfbea..4711fd0fbd 100644
--- a/server/src/modules/session/guards/invited-user-session.guard.ts
+++ b/server/src/modules/session/guards/invited-user-session.guard.ts
@@ -150,7 +150,7 @@ export class InvitedUserSessionAuthGuard extends AuthGuard('jwt') {
         return invitedUser;
       }
       /* User doesn't have a session. Next?: login again and accept invite */
-      const organization = await this.organizationRepository.fetchOrganization(invitedUser.invitedOrganizationId);
+      const organization = await this.organizationRepository.fetchOrganization(invitedUser.organizationId);
 
       if (!organization || organization.status !== WORKSPACE_STATUS.ACTIVE) {
         throw new BadRequestException('Organization is Archived');
diff --git a/server/src/modules/users/repository.ts b/server/src/modules/users/repository.ts
index 2771eb5d9b..0a4f77902a 100644
--- a/server/src/modules/users/repository.ts
+++ b/server/src/modules/users/repository.ts
@@ -65,6 +65,7 @@ export class UserRepository extends Repository<User> {
           organizationId: true,
           organization: {
             name: true,
+            status: true,
           },
         },
       },
diff --git a/server/src/services/ignored/app_import_export.service.ts b/server/src/services/ignored/app_import_export.service.ts
index 20c8af0eac..e0569a36cf 100644
--- a/server/src/services/ignored/app_import_export.service.ts
+++ b/server/src/services/ignored/app_import_export.service.ts
@@ -815,7 +815,7 @@ export class AppImportExportService {
             if (newButtonToSubmitValue) set(component, 'properties.buttonToSubmit.value', newButtonToSubmitValue);
           }
 
-          const isParentTabOrCalendar = isChildOfTabsOrCalendar(component, pageComponents, parentId, true);
+          const isParentTabOrCalendar = hasSlottedChildren(component, pageComponents, parentId, true);
 
           if (isParentTabOrCalendar) {
             const childTabId = component?.parent ? component.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[2] : null;
@@ -1926,7 +1926,7 @@ function transformComponentData(
 
     let parentId = component.parent ? component.parent : null;
 
-    const isParentTabOrCalendar = isChildOfTabsOrCalendar(
+    const isParentTabOrCalendar = hasSlottedChildren(
       component,
       allComponents,
       parentId,
@@ -1982,7 +1982,7 @@ function transformComponentData(
   return transformedComponents;
 }
 
-const isChildOfTabsOrCalendar = (
+const hasSlottedChildren = (
   component,
   allComponents = [],
   componentParentId = undefined,
@@ -1993,6 +1993,10 @@ const isChildOfTabsOrCalendar = (
 
     const parentComponent = allComponents.find((comp) => comp.id === parentId);
 
+    const hasSlotedHeaderOrFooter = componentParentId.includes('-header') || componentParentId.includes('-footer');
+    const isParentModal = parentComponent.type === 'Modal' || parentComponent.type === 'ModalV2';
+
+    if (isParentModal && hasSlotedHeaderOrFooter) return true;
     if (parentComponent) {
       if (!isNormalizedAppDefinitionSchema) {
         return parentComponent.component.component === 'Tabs' || parentComponent.component.component === 'Calendar';