diff --git a/.github/workflows/merge-queue.yml b/.github/workflows/merge-queue.yml
new file mode 100644
index 0000000000..505e32b358
--- /dev/null
+++ b/.github/workflows/merge-queue.yml
@@ -0,0 +1,17 @@
+name: Merge Queue Checks
+
+on:
+  merge_group:
+    types:
+      - checks_requested
+
+jobs:
+  commitlint:
+    name: Commit Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.sha }}
+
+      - uses: YossiSaadi/commitlint-github-action@vibe-fork/support-merge_group-event
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index c319969be4..0cccad06d1 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -18,3 +18,13 @@ jobs:
     uses: ./.github/workflows/test.yml
     secrets:
       npm_token: ${{ secrets.npm_token }}
+
+  commitlint:
+    name: Commit Lint
+    needs: build
+    if: false
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.sha }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index b5cf66b40a..bf38032576 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -27,6 +27,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
+          token: ${{ secrets.VIBE_GITHUB_TOKEN }}
           fetch-depth: 0
       - name: Run Setup
         uses: ./.github/actions/setup
@@ -35,7 +36,9 @@ jobs:
       - uses: ./.github/actions/git-creds
       - uses: ./.github/actions/download-builds
       - name: Generate new versions
-        run: yarn lerna version --exact --conventional-commits --conventional-graduate -y
+        run: yarn lerna version --exact --conventional-commits --conventional-graduate --message "Publish [skip ci]" -y
+        env:
+          GH_TOKEN: ${{ secrets.VIBE_GITHUB_TOKEN }}
       - run: yarn config set registry https://registry.npmjs.org/
       - name: Setup .npmrc for publish
         id: setup-npmrc
diff --git a/package.json b/package.json
index 588ae2fcd5..7fc742c9c1 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "lint": "lerna run lint",
     "test": "lerna run test",
     "storybook": "lerna run storybook --parallel --stream",
-    "postinstall": "lerna run build --scope=vibe-storybook-components"
+    "postinstall": "lerna run build --scope={vibe-storybook-components,@vibe/icons}"
   },
   "devDependencies": {
     "lerna": "^8.1.2",
diff --git a/packages/core/.eslintrc.cjs b/packages/core/.eslintrc.cjs
index 91e951502f..7fa4453b0f 100644
--- a/packages/core/.eslintrc.cjs
+++ b/packages/core/.eslintrc.cjs
@@ -97,16 +97,21 @@ module.exports = {
       }
     },
     {
-      files: [
-        "*.stories.@(js|jsx|ts|tsx)",
-        "*.stories.helpers.@(js|jsx|ts|tsx)",
-        "src/storybook/decorators/**/with*.{js,jsx,ts,tsx}"
-      ],
+      files: ["*.stories.@(js|jsx)", "*.stories.helpers.@(js|jsx)", "src/storybook/decorators/**/with*.{js,jsx}"],
       rules: {
         ...commonRules,
         "react-hooks/rules-of-hooks": "off",
         "react/jsx-key": "off"
       }
+    },
+    {
+      files: ["*.stories.@(ts|tsx)", "*.stories.helpers.@(ts|tsx)", "src/storybook/decorators/**/with*.{ts,tsx}"],
+      rules: {
+        ...commonRules,
+        "react-hooks/rules-of-hooks": "off",
+        "react/jsx-key": "off",
+        "react/require-default-props": "off"
+      }
     }
   ],
   env: {
diff --git a/packages/core/.storybook/manager-head.html b/packages/core/.storybook/manager-head.html
index 28de9e7e0a..80d7dd4962 100644
--- a/packages/core/.storybook/manager-head.html
+++ b/packages/core/.storybook/manager-head.html
@@ -3,8 +3,13 @@
 <meta property="og:title" content="Vibe Design System" />
 <meta property="og:image" content="https://irp.cdn-website.com/33477119/dms3rep/multi/og-banner.jpeg" />
 <title>Vibe Design System</title>
-<link rel="shortcut icon" href="/favicon.ico" />
 <script src="https://use.fontawesome.com/660238b999.js"></script>
+<script type="module">
+  const faviconLink = document.querySelector("link[rel='icon']");
+  if (import.meta.url.includes("localhost")) {
+    faviconLink.href = "/favicon-dev.ico";
+  }
+</script>
 <style>
   body {
     font-family: "Figtree", sans-serif;
diff --git a/packages/core/.storybook/manager.jsx b/packages/core/.storybook/manager.jsx
index 5203144af6..47e73d451d 100644
--- a/packages/core/.storybook/manager.jsx
+++ b/packages/core/.storybook/manager.jsx
@@ -27,14 +27,20 @@ addons.setConfig({
       return <SidebarItem status={parameters.status}>{name.replace(storyStatus, "").trim()}</SidebarItem>;
     },
     filters: {
-      patterns: filterStory
+      patterns: shouldShowStory
     },
     showRoots: false
   }
 });
 
-function filterStory(item) {
+/**
+ * In order to hide stories you need to add `tags: ['internal']` to the stories file metadata.
+ * In order to hide MDX, you need to add `Internal` to the title in the MDX's `Meta` declaration `title` or to the `title` in the stories file metadata.
+ *
+ * Notice that all stories are available in development mode and in Chromatic.
+ */
+function shouldShowStory(item) {
   const isDev = isChromatic() || process.env.NODE_ENV === "development";
-  const isInternal = !item.tags?.includes?.("internal") && !item.title?.startsWith?.("Internal");
-  return isDev || isInternal;
+  const isPublic = !item.tags?.includes?.("internal") && !item.title?.startsWith?.("Internal");
+  return isDev || isPublic;
 }
diff --git a/packages/core/.storybook/preview-head.html b/packages/core/.storybook/preview-head.html
index 8ef44dcf01..a8f2eb17fd 100644
--- a/packages/core/.storybook/preview-head.html
+++ b/packages/core/.storybook/preview-head.html
@@ -41,9 +41,14 @@
   .sbdocs .docs-story {
     border: var(--sb-layout-border-color);
   }
-  .sbdocs .docs-story > div {
+  .sbdocs .docs-story > div:first-child {
     background: var(--sb-secondary-background-color);
   }
+  .sbdocs .docs-story > div:nth-child(2) {
+    /* prevent Show Code from rendering above full-screen components (such as Modal's overlay) */
+    z-index: unset;
+    background: unset;
+  }
 
   .sbdocs {
     color: var(--sb-primary-text-color);
diff --git a/packages/core/.storybook/static/favicon-dev.ico b/packages/core/.storybook/static/favicon-dev.ico
new file mode 100644
index 0000000000..ba15320e49
Binary files /dev/null and b/packages/core/.storybook/static/favicon-dev.ico differ
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 1d4dfc35c3..7e87963d77 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,75 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.5.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.5.0...@vibe/core@3.5.1) (2024-12-12)
+
+
+### Bug Fixes
+
+* **List:** getting wrong tabIndex on initialization ([#2648](https://github.com/mondaycom/vibe/issues/2648)) ([7aaaa73](https://github.com/mondaycom/vibe/commit/7aaaa73fddb3c8434104785f65268ee373079634))
+
+
+
+
+
+# [3.5.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.4.1...@vibe/core@3.5.0) (2024-12-12)
+
+
+### Features
+
+* **Tooltip:** be able to change max width ([#2643](https://github.com/mondaycom/vibe/issues/2643)) ([f39633b](https://github.com/mondaycom/vibe/commit/f39633b190da5b7e453d958bf36028c8332139f5))
+
+
+
+
+
+## [3.4.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.4.0...@vibe/core@3.4.1) (2024-12-12)
+
+
+### Bug Fixes
+
+* **List:** fix ListTitle getting focus on initialization ([#2638](https://github.com/mondaycom/vibe/issues/2638)) ([0986200](https://github.com/mondaycom/vibe/commit/0986200af94f425a9ba19e4d0948786525557b2e))
+
+
+
+
+
+# [3.4.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.3.0...@vibe/core@3.4.0) (2024-12-09)
+
+
+### Bug Fixes
+
+* **table:** avoid unnecessary re-rendering if TableRowMenu doesn't exist ([#2630](https://github.com/mondaycom/vibe/issues/2630)) ([e8d093e](https://github.com/mondaycom/vibe/commit/e8d093ebc8231c90cfbfa596c686f163d1ad60c4))
+
+
+### Features
+
+* **Modal:** modal improvements, add stories for main Modal and modal's layouts ([#2627](https://github.com/mondaycom/vibe/issues/2627)) ([bead0ba](https://github.com/mondaycom/vibe/commit/bead0bae158a05d9654748e4bf020fc6ccbbc9be))
+* **Modal:** use createPortal and LayerProvider in Modal ([#2634](https://github.com/mondaycom/vibe/issues/2634)) ([b8f895b](https://github.com/mondaycom/vibe/commit/b8f895b3bea0c9a57763ef6d7fe6f604e89989e4))
+
+
+
+
+
+# [3.3.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.2.0...@vibe/core@3.3.0) (2024-12-08)
+
+
+### Bug Fixes
+
+* **Button:** fix secondary disabled border color ([#2622](https://github.com/mondaycom/vibe/issues/2622)) ([0df501d](https://github.com/mondaycom/vibe/commit/0df501db6618f1ae38b6e3581b2e6169da026746))
+* support vitest [prerelease] ([#2625](https://github.com/mondaycom/vibe/issues/2625)) ([638b19f](https://github.com/mondaycom/vibe/commit/638b19f9d582d5bc7cc9c8f6f633bde7bc333e55))
+* **table:** avoid unnecessary re-rendering of table rows ([#2626](https://github.com/mondaycom/vibe/issues/2626)) ([c83a4c4](https://github.com/mondaycom/vibe/commit/c83a4c4ea09173932b66c7cbe3c14d1266ad1388))
+
+
+### Features
+
+* **Modal:** animation enhancements and general fixes and enhancements ([#2620](https://github.com/mondaycom/vibe/issues/2620)) ([17a14fe](https://github.com/mondaycom/vibe/commit/17a14fe4e93e23bcdfd4b6da61095bc679185b3b))
+* **TransitionView:** fill parent if parent has definite height ([#2629](https://github.com/mondaycom/vibe/issues/2629)) ([da5e3b3](https://github.com/mondaycom/vibe/commit/da5e3b3d98d6f5ccdbfd34a4441526c62b5096b0))
+
+
+
+
+
 # [3.2.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.1.0...@vibe/core@3.2.0) (2024-12-04)
 
 
diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md
index 6415506300..7c66fbe642 100644
--- a/packages/core/docs/vibe-3-changelog.md
+++ b/packages/core/docs/vibe-3-changelog.md
@@ -2,7 +2,7 @@
 
 This is the complete list of changes and deprecations in the Vibe 3 release. Changes that are marked with a 🔀 are covered by a migration script (codemod).
 
-For the complete migration guide see the [Vibe 3 Migration Guide](https://style.monday.com/?path=/docs/vibe-3-migration-guide--docs).
+For the complete migration guide see the [Vibe 3 Migration Guide](https://vibe.monday.com/?path=/docs/migration-guide).
 
 ## General
 
@@ -28,7 +28,7 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ## Typography
 
-- Overhauled typography system, for more information check out the [Typography page](https://style.monday.com/?path=/docs/foundations-typography--docs)
+- Overhauled typography system, for more information check out the [Typography page](https://vibe.monday.com/?path=/docs/foundations-typography)
 - `Text` and `Heading` API and style changed
 
 ## Components
@@ -137,11 +137,11 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ### EditableInput
 
-- `EditableInput` removed, use [EditableText](https://style.monday.com/?path=/docs/inputs-editabletext--docs) instead
+- `EditableInput` removed, use [EditableText](https://vibe.monday.com/?path=/docs/components-editabletext) instead
 
 ### Heading
 
-- `Heading` component API and style changed, follow the [Heading](https://style.monday.com/?path=/docs/text-heading--docs) docs for the new API.
+- `Heading` component API and style changed, follow the [Heading](https://vibe.monday.com/?path=/docs/text-heading) docs for the new API.
 
 ### Icon
 
@@ -159,7 +159,7 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 > codemod: `InputField-component-import-migration`
 
-- `Input` removed - use [TextField](https://style.monday.com/?path=/docs/inputs-textfield--docs) 🔀
+- `Input` removed - use [TextField](https://vibe.monday.com/?path=/docs/components-textfield) 🔀
 
 ### Label
 
@@ -170,7 +170,7 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ### EditableHeading
 
-- API and style changed, follow the [EditableHeading](https://style.monday.com/?path=/docs/inputs-editableheading--docs) docs for the new API
+- API and style changed, follow the [EditableHeading](https://vibe.monday.com/?path=/docs/components-editableheading) docs for the new API
 
 ### Link
 
@@ -248,13 +248,13 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ## Search
 
-- `Search` has changed - follow the [Search](https://style.monday.com/?path=/docs/inputs-search--docs) docs for the new API.
+- `Search` has changed - follow the [Search](https://vibe.monday.com/?path=/docs/components-search) docs for the new API.
 
 ## SearchComponent
 
 > codemod: `SearchComponent-import-migration`
 
-- `SearchComponent` component removed - use [Search](https://style.monday.com/?path=/docs/inputs-search--docs) 🔀
+- `SearchComponent` component removed - use [Search](https://vibe.monday.com/?path=/docs/components-search) 🔀
 
 ## SplitButton
 
@@ -351,7 +351,7 @@ For the complete migration guide see the [Vibe 3 Migration Guide](https://style.
 
 ### ResponsiveList
 
-- Component was removed, use the [useIsOverflowing](https://style.monday.com/?path=/docs/hooks-useisoverflowing--docs) hook instead
+- Component was removed, use the [useIsOverflowing](https://vibe.monday.com/?path=/docs/hooks-useisoverflowing) hook instead
 
 ## Icons
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 537117dd60..cc94e829f2 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "3.2.0",
+  "version": "3.5.1",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "@vibe/icons": "1.1.0",
+    "@vibe/icons": "1.2.0",
     "a11y-dialog": "^7.5.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "browserslist-config-monday": "1.0.6",
@@ -96,7 +96,7 @@
     "react-is": "^16.9.0",
     "react-popper": "^2.3.0",
     "react-remove-scroll": "^2.6.0",
-    "react-select": "npm:react-select-module@^3.2.5",
+    "react-select": "npm:react-select-module@^3.2.6",
     "react-transition-group": "^4.4.5",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.7",
diff --git a/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.tsx b/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.tsx
index 91187fe5a6..4cc963e36b 100644
--- a/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.tsx
+++ b/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.tsx
@@ -295,24 +295,29 @@ export const HoverVsClickable: Story = {
     );
   }
 };
-export const Disabled = () => (
-  <AvatarGroup size="large" max={4} disabled>
-    <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-    <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-    <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-    <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-    <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-    <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-    <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-    <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-    <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-    <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-    <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
-    <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
-    <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
-    <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
-  </AvatarGroup>
-);
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <AvatarGroup size="large" max={4} disabled>
+        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
+        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
+        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
+        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
+        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
+        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
+        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
+        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+        <Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
+        <Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
+        <Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
+        <Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
+      </AvatarGroup>
+    );
+  }
+};
 
 export const LastSeenUsers: Story = {
   render: () => (
diff --git a/packages/core/src/components/ButtonGroup/ButtonGroup.module.scss b/packages/core/src/components/ButtonGroup/ButtonGroup.module.scss
index 488e122fc4..08f6d93b7a 100644
--- a/packages/core/src/components/ButtonGroup/ButtonGroup.module.scss
+++ b/packages/core/src/components/ButtonGroup/ButtonGroup.module.scss
@@ -22,7 +22,6 @@
 }
 
 .buttonsContainer .button.activeButton {
-  z-index: 20;
   background-color: var(--primary-selected-color);
   border-color: var(--primary-color);
 }
@@ -36,7 +35,6 @@
 }
 
 .optionText:not(.disabled).selected {
-  z-index: 10;
   color: var(--primary-text-color);
 }
 
diff --git a/packages/core/src/components/Dropdown/Dropdown.tsx b/packages/core/src/components/Dropdown/Dropdown.tsx
index 6cadfc7d45..4c875fd501 100644
--- a/packages/core/src/components/Dropdown/Dropdown.tsx
+++ b/packages/core/src/components/Dropdown/Dropdown.tsx
@@ -141,7 +141,14 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
     const [WindowedMenuList, setWindowedMenuList] = useState(null);
     useEffect(() => {
       if (isClient()) {
-        if (process.env.NODE_ENV === "test") {
+        let isRequireAvailable = false;
+        try {
+          isRequireAvailable = typeof require === "function" && typeof module !== "undefined";
+        } catch (e) {
+          isRequireAvailable = false;
+        }
+
+        if (isRequireAvailable) {
           // eslint-disable-next-line @typescript-eslint/no-var-requires
           const module = require("react-windowed-select");
           setWindowedMenuList(() => module.WindowedMenuList);
diff --git a/packages/core/src/components/Dropdown/hooks/useHiddenOptionsData.js b/packages/core/src/components/Dropdown/hooks/useHiddenOptionsData.js
index 2933a556b1..16267b08f9 100644
--- a/packages/core/src/components/Dropdown/hooks/useHiddenOptionsData.js
+++ b/packages/core/src/components/Dropdown/hooks/useHiddenOptionsData.js
@@ -19,7 +19,11 @@ export function useHiddenOptionsData({
 
       while (childIndex < ref.children.length && optionIndex < selectedOptionsCount) {
         const child = ref.children[childIndex];
-        const isOption = child.classList.contains(chipClassName) || child.classList.contains(chipWrapperClassName);
+        const chipClasses = chipClassName.split(" ");
+
+        const isOption =
+          child.classList.contains(chipWrapperClassName) ||
+          chipClasses.some(className => child.classList.contains(className));
 
         if (isOption) {
           const { bottom: childBottom } = child.getBoundingClientRect();
diff --git a/packages/core/src/components/Modal/Modal.module.scss b/packages/core/src/components/LegacyModal/LegacyModal.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/Modal.module.scss
rename to packages/core/src/components/LegacyModal/LegacyModal.module.scss
diff --git a/packages/core/src/components/Modal/Modal.tsx b/packages/core/src/components/LegacyModal/LegacyModal.tsx
similarity index 93%
rename from packages/core/src/components/Modal/Modal.tsx
rename to packages/core/src/components/LegacyModal/LegacyModal.tsx
index 5a8a6e2023..2c53766dfc 100644
--- a/packages/core/src/components/Modal/Modal.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModal.tsx
@@ -2,8 +2,8 @@ import React, { cloneElement, FC, ReactElement, useCallback, useMemo } from "rea
 import ReactDOM from "react-dom";
 import cx from "classnames";
 import { useA11yDialog } from "./a11yDialog";
-import ModalContent from "./ModalContent/ModalContent";
-import ModalHeader from "./ModalHeader/ModalHeader";
+import ModalContent from "./LegacyModalContent/LegacyModalContent";
+import ModalHeader from "./LegacyModalHeader/LegacyModalHeader";
 import useBodyScrollLock from "./useBodyScrollLock";
 import useShowHideModal from "./useShowHideModal";
 import {
@@ -17,12 +17,12 @@ import { NOOP } from "../../utils/function-utils";
 import { withStaticProps } from "../../types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
-import styles from "./Modal.module.scss";
-import { ModalWidth } from "./Modal.types";
+import styles from "./LegacyModal.module.scss";
+import { ModalWidth } from "./LegacyModal.types";
 import LayerProvider from "../LayerProvider/LayerProvider";
 import { isClient } from "../../utils/ssr-utils";
 
-export interface ModalProps {
+export interface LegacyModalProps {
   /**
    * Id of the modal, used internally and for accessibility
    */
@@ -87,7 +87,7 @@ export interface ModalProps {
   unmountOnClose?: boolean;
 }
 
-const Modal: FC<ModalProps> & { width?: typeof ModalWidthEnum } = ({
+const Modal: FC<LegacyModalProps> & { width?: typeof ModalWidthEnum } = ({
   classNames = { container: "", overlay: "", modal: "" },
   id,
   show,
@@ -103,7 +103,7 @@ const Modal: FC<ModalProps> & { width?: typeof ModalWidthEnum } = ({
   zIndex = 10000,
   unmountOnClose = true,
   "data-testid": dataTestId
-}: ModalProps) => {
+}: LegacyModalProps) => {
   const childrenArray: ReactElement[] = useMemo(
     () => (children ? (React.Children.toArray(children) as ReactElement[]) : []),
     [children]
diff --git a/packages/core/src/components/Modal/Modal.types.ts b/packages/core/src/components/LegacyModal/LegacyModal.types.ts
similarity index 100%
rename from packages/core/src/components/Modal/Modal.types.ts
rename to packages/core/src/components/LegacyModal/LegacyModal.types.ts
diff --git a/packages/core/src/components/Modal/ModalContent/ModalContent.module.scss b/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/ModalContent/ModalContent.module.scss
rename to packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.module.scss
diff --git a/packages/core/src/components/Modal/ModalContent/ModalContent.tsx b/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx
similarity index 67%
rename from packages/core/src/components/Modal/ModalContent/ModalContent.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx
index 42e200fdc1..ff033f01d2 100644
--- a/packages/core/src/components/Modal/ModalContent/ModalContent.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx
@@ -4,13 +4,13 @@ import Text from "../../Text/Text";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../tests/constants";
-import styles from "./ModalContent.module.scss";
+import styles from "./LegacyModalContent.module.scss";
 
-export interface ModalContentProps extends VibeComponentProps {
+export interface LegacyModalContentProps extends VibeComponentProps {
   children: ReactElement | ReactElement[] | string;
 }
 
-const ModalContent: FC<ModalContentProps> = ({ className, id, "data-testid": dataTestId, children }) => {
+const LegacyModalContent: FC<LegacyModalContentProps> = ({ className, id, "data-testid": dataTestId, children }) => {
   return (
     <Text
       type="text1"
@@ -24,8 +24,8 @@ const ModalContent: FC<ModalContentProps> = ({ className, id, "data-testid": dat
   );
 };
 
-Object.assign(ModalContent, {
+Object.assign(LegacyModalContent, {
   displayName: "ModalContent"
 });
 
-export default ModalContent;
+export default LegacyModalContent;
diff --git a/packages/core/src/components/Modal/ModalContent/__tests__/ModalContent.snapshot.test.tsx b/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx
similarity index 90%
rename from packages/core/src/components/Modal/ModalContent/__tests__/ModalContent.snapshot.test.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx
index 440811693e..2cc972d081 100644
--- a/packages/core/src/components/Modal/ModalContent/__tests__/ModalContent.snapshot.test.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import ModalContent from "../ModalContent";
+import ModalContent from "../LegacyModalContent";
 
 describe("ModalContent renders correctly", () => {
   it("with empty props", () => {
diff --git a/packages/core/src/components/Modal/ModalContent/__tests__/__snapshots__/ModalContent.snapshot.test.tsx.snap b/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/__snapshots__/LegacyModalContent.snapshot.test.tsx.snap
similarity index 100%
rename from packages/core/src/components/Modal/ModalContent/__tests__/__snapshots__/ModalContent.snapshot.test.tsx.snap
rename to packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/__snapshots__/LegacyModalContent.snapshot.test.tsx.snap
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooter.module.scss b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooter.module.scss
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.module.scss
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooter.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx
similarity index 53%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooter.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx
index b677bc2717..b83cfaeb40 100644
--- a/packages/core/src/components/Modal/ModalFooter/ModalFooter.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx
@@ -1,18 +1,18 @@
 import React, { FC, ReactElement } from "react";
 import cx from "classnames";
 import VibeComponentProps from "../../../types/VibeComponentProps";
-import styles from "./ModalFooter.module.scss";
+import styles from "./LegacyModalFooter.module.scss";
 
-export interface ModalFooterProps extends VibeComponentProps {
+export interface LegacyModalFooterProps extends VibeComponentProps {
   children: ReactElement | ReactElement[] | string;
 }
 
-const ModalFooter: FC<ModalFooterProps> = ({ className, children }) => {
+const LegacyModalFooter: FC<LegacyModalFooterProps> = ({ className, children }) => {
   return <div className={cx(styles.container, className)}>{children}</div>;
 };
 
-Object.assign(ModalFooter, {
+Object.assign(LegacyModalFooter, {
   displayName: "ModalFooter"
 });
 
-export default ModalFooter;
+export default LegacyModalFooter;
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx
similarity index 76%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx
index 247e221fd8..6b860f034b 100644
--- a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx
@@ -5,9 +5,9 @@ import { getTestId } from "../../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../../tests/constants";
 import Flex from "../../../Flex/Flex";
 import Button from "../../../Button/Button";
-import ModalFooter from "../ModalFooter";
+import LegacyModalFooter from "../LegacyModalFooter";
 
-export interface ModalFooterButtonsProps extends VibeComponentProps {
+export interface LegacyModalFooterButtonsProps extends VibeComponentProps {
   primaryButtonText: string;
   secondaryButtonText?: string;
   disablePrimaryButton?: boolean;
@@ -15,7 +15,7 @@ export interface ModalFooterButtonsProps extends VibeComponentProps {
   onSecondaryButtonClick?: () => void;
 }
 
-const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
+const LegacyModalFooterButtons: VibeComponent<LegacyModalFooterButtonsProps> = forwardRef(
   (
     {
       primaryButtonText,
@@ -26,13 +26,13 @@ const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
       className,
       id,
       "data-testid": dataTestId
-    }: ModalFooterButtonsProps,
+    }: LegacyModalFooterButtonsProps,
     // As ModalFooter does not currently forward refs
     // eslint-disable-next-line
     ref
   ) => {
     return (
-      <ModalFooter
+      <LegacyModalFooter
         id={id}
         className={className}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER_BUTTONS, id)}
@@ -47,9 +47,13 @@ const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
             {primaryButtonText}
           </Button>
         </Flex>
-      </ModalFooter>
+      </LegacyModalFooter>
     );
   }
 );
 
-export default ModalFooterButtons;
+Object.assign(LegacyModalFooterButtons, {
+  displayName: "ModalFooterButtons"
+});
+
+export default LegacyModalFooterButtons;
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.snapshot.test.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx
similarity index 92%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.snapshot.test.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx
index 3d521b9804..5d0434e1b3 100644
--- a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.snapshot.test.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import ModalFooterButtons from "../ModalFooterButtons";
+import ModalFooterButtons from "../LegacyModalFooterButtons";
 
 describe("ModalFooterButtons", () => {
   it("should render correctly", () => {
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.test.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx
similarity index 94%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.test.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx
index f1ccb6ccf2..3b21797880 100644
--- a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.test.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { fireEvent, render, cleanup } from "@testing-library/react";
-import ModalFooterButtons, { ModalFooterButtonsProps } from "../ModalFooterButtons";
+import ModalFooterButtons, {
+  LegacyModalFooterButtonsProps as ModalFooterButtonsProps
+} from "../LegacyModalFooterButtons";
 
 const PRIMARY_BUTTON_TEXT = "Confirm";
 const SECONDARY_BUTTON_TEXT = "Cancel";
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/__snapshots__/ModalFooterButtons.snapshot.test.tsx.snap b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/__snapshots__/LegacyModalFooterButtons.snapshot.test.tsx.snap
similarity index 100%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/__snapshots__/ModalFooterButtons.snapshot.test.tsx.snap
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/__snapshots__/LegacyModalFooterButtons.snapshot.test.tsx.snap
diff --git a/packages/core/src/components/Modal/ModalFooter/__tests__/ModalFooter.snapshot.test.js b/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.js
similarity index 94%
rename from packages/core/src/components/Modal/ModalFooter/__tests__/ModalFooter.snapshot.test.js
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.js
index 086abd7d59..275aa67e44 100644
--- a/packages/core/src/components/Modal/ModalFooter/__tests__/ModalFooter.snapshot.test.js
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ModalFooter from "../ModalFooter";
+import ModalFooter from "../LegacyModalFooter";
 import { cleanup, render } from "@testing-library/react";
 import { snapshotDiff } from "../../../../utils/jest-utils";
 
diff --git a/packages/core/src/components/Modal/ModalFooter/__tests__/__snapshots__/ModalFooter.snapshot.test.js.snap b/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/__snapshots__/LegacyModalFooter.snapshot.test.js.snap
similarity index 100%
rename from packages/core/src/components/Modal/ModalFooter/__tests__/__snapshots__/ModalFooter.snapshot.test.js.snap
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/__snapshots__/LegacyModalFooter.snapshot.test.js.snap
diff --git a/packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss b/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss
rename to packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.module.scss
diff --git a/packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx b/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx
similarity index 86%
rename from packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx
index 3ab31f4d5d..30a69a47e4 100644
--- a/packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx
@@ -11,10 +11,10 @@ import { ComponentDefaultTestId } from "../../../tests/constants";
 import Text from "../../Text/Text";
 import Heading from "../../Heading/Heading";
 import Flex from "../../Flex/Flex";
-import styles from "./ModalHeader.module.scss";
+import styles from "./LegacyModalHeader.module.scss";
 import { SubIcon } from "../../../types/SubIcon";
 
-interface BaseModalHeaderProps extends VibeComponentProps {
+interface BaseLegacyModalHeaderProps extends VibeComponentProps {
   /**
    * Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links
    */
@@ -58,19 +58,19 @@ interface BaseModalHeaderProps extends VibeComponentProps {
   closeButtonAriaLabel?: string;
 }
 
-interface ModalHeaderWithOnlyTitle extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyTitle extends BaseLegacyModalHeaderProps {
   title: ElementContent;
   children?: never;
 }
 
-interface ModalHeaderWithOnlyChildren extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyChildren extends BaseLegacyModalHeaderProps {
   title?: never;
   children: ElementContent;
 }
 
-export type ModalHeaderProps = ModalHeaderWithOnlyTitle | ModalHeaderWithOnlyChildren;
+export type LegacyModalHeaderProps = LegacyModalHeaderWithOnlyTitle | LegacyModalHeaderWithOnlyChildren;
 
-const ModalHeader: FC<ModalHeaderProps> = ({
+const LegacyModalHeader: FC<LegacyModalHeaderProps> = ({
   className,
   title,
   children,
@@ -128,8 +128,8 @@ const ModalHeader: FC<ModalHeaderProps> = ({
   );
 };
 
-Object.assign(ModalHeader, {
+Object.assign(LegacyModalHeader, {
   displayName: "ModalHeader"
 });
 
-export default ModalHeader;
+export default LegacyModalHeader;
diff --git a/packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.snapshot.test.js b/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.js
similarity index 96%
rename from packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.snapshot.test.js
rename to packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.js
index 0fc29e8e13..b31f8325f2 100644
--- a/packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.snapshot.test.js
+++ b/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ModalHeader from "../ModalHeader";
+import ModalHeader from "../LegacyModalHeader";
 import { Settings } from "@vibe/icons";
 import { cleanup, render } from "@testing-library/react";
 import { snapshotDiff } from "../../../../utils/jest-utils";
diff --git a/packages/core/src/components/Modal/ModalHeader/__tests__/__snapshots__/ModalHeader.snapshot.test.js.snap b/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/__snapshots__/LegacyModalHeader.snapshot.test.js.snap
similarity index 100%
rename from packages/core/src/components/Modal/ModalHeader/__tests__/__snapshots__/ModalHeader.snapshot.test.js.snap
rename to packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/__snapshots__/LegacyModalHeader.snapshot.test.js.snap
diff --git a/packages/core/src/components/Modal/ModalHelper.ts b/packages/core/src/components/LegacyModal/ModalHelper.ts
similarity index 74%
rename from packages/core/src/components/Modal/ModalHelper.ts
rename to packages/core/src/components/LegacyModal/ModalHelper.ts
index cb435b9f04..7a23ff3e3d 100644
--- a/packages/core/src/components/Modal/ModalHelper.ts
+++ b/packages/core/src/components/LegacyModal/ModalHelper.ts
@@ -1,8 +1,8 @@
 import { ReactElement } from "react";
-import ModalHeader from "./ModalHeader/ModalHeader";
-import ModalContent from "./ModalContent/ModalContent";
-import ModalFooter from "./ModalFooter/ModalFooter";
-import ModalFooterButtons from "./ModalFooter/ModalFooterButtons/ModalFooterButtons";
+import ModalHeader from "./LegacyModalHeader/LegacyModalHeader";
+import ModalContent from "./LegacyModalContent/LegacyModalContent";
+import ModalFooter from "./LegacyModalFooter/LegacyModalFooter";
+import ModalFooterButtons from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
 
 /**
  * @deprecated
diff --git a/packages/core/src/components/Modal/__stories__/Modal.mdx b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx
similarity index 86%
rename from packages/core/src/components/Modal/__stories__/Modal.mdx
rename to packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx
index e55d7a93a5..43244b7099 100644
--- a/packages/core/src/components/Modal/__stories__/Modal.mdx
+++ b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx
@@ -1,5 +1,5 @@
-import { ComponentRules, UsageGuidelines } from "vibe-storybook-components";
-import { Story, Canvas, Meta } from "@storybook/blocks";
+import { ComponentRules/*, DeprecatedWarning*/, UsageGuidelines } from "vibe-storybook-components";
+import { Canvas, Meta } from "@storybook/blocks";
 import { DIALOG, TIPSEEN, TOOLTIP } from "../../../storybook/components/related-components/component-description-map";
 import {
   DialogAsModalBadExample,
@@ -7,14 +7,18 @@ import {
   TipAlertDialog,
   TipDevDropdownInsideModal,
   TipDialog
-} from "./Modal.stories.helpers";
-import * as ModalStories from "./Modal.stories";
+} from "./LegacyModal.stories.helpers";
+import * as ModalStories from "./LegacyModal.stories";
 
 <Meta of={ModalStories} />
 
 # Modal
 
+[//]: # (// TODO should be added once new Modal is exported)
+[//]: # (<DeprecatedWarning alternativeName="Modal" alternativeLink="/?path=/docs/components-modal-new" />)
+
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Variants](#variants)
diff --git a/packages/core/src/components/Modal/__stories__/Modal.stories.helpers.tsx b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.helpers.tsx
similarity index 95%
rename from packages/core/src/components/Modal/__stories__/Modal.stories.helpers.tsx
rename to packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.helpers.tsx
index c5e8e80c2f..b227bebb21 100644
--- a/packages/core/src/components/Modal/__stories__/Modal.stories.helpers.tsx
+++ b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.helpers.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useRef, useState } from "react";
 import Button from "../../Button/Button";
-import Modal from "../Modal";
+import Modal from "../LegacyModal";
 import { Dialog, DialogContentContainer, Heading } from "../../../components";
 import Flex from "../../Flex/Flex";
-import ModalFooterButtons from "../ModalFooter/ModalFooterButtons/ModalFooterButtons";
-import styles from "./Modal.stories.module.scss";
+import ModalFooterButtons from "../LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
+import styles from "./LegacyModal.stories.module.scss";
 import cx from "classnames";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
diff --git a/packages/core/src/components/Modal/__stories__/Modal.stories.module.scss b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/__stories__/Modal.stories.module.scss
rename to packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.module.scss
diff --git a/packages/core/src/components/Modal/__stories__/Modal.stories.tsx b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx
similarity index 95%
rename from packages/core/src/components/Modal/__stories__/Modal.stories.tsx
rename to packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx
index 50c264c961..b0d6579237 100644
--- a/packages/core/src/components/Modal/__stories__/Modal.stories.tsx
+++ b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useRef, useState } from "react";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
-import ModalContent from "../ModalContent/ModalContent";
-import ModalFooter from "../ModalFooter/ModalFooter";
-import ModalHeader from "../ModalHeader/ModalHeader";
-import Modal, { ModalProps } from "../Modal";
-import { useHelperOpenModalButton } from "./Modal.stories.helpers";
+import ModalContent from "../LegacyModalContent/LegacyModalContent";
+import ModalFooter from "../LegacyModalFooter/LegacyModalFooter";
+import ModalHeader from "../LegacyModalHeader/LegacyModalHeader";
+import Modal, { LegacyModalProps as ModalProps } from "../LegacyModal";
+import { useHelperOpenModalButton } from "./LegacyModal.stories.helpers";
 import EditableHeading from "../../../components/EditableHeading/EditableHeading";
-import ModalFooterButtons from "../ModalFooter/ModalFooterButtons/ModalFooterButtons";
+import ModalFooterButtons from "../LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
 import { Upgrade } from "@vibe/icons";
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Modal,
diff --git a/packages/core/src/components/Modal/__tests__/Modal.snapshot.test.js b/packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.js
similarity index 98%
rename from packages/core/src/components/Modal/__tests__/Modal.snapshot.test.js
rename to packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.js
index b59769dbfd..adad70d100 100644
--- a/packages/core/src/components/Modal/__tests__/Modal.snapshot.test.js
+++ b/packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Modal from "../Modal";
+import Modal from "../LegacyModal";
 import { ModalContent, ModalFooter, ModalHeader } from "../../../components";
 import { cleanup, render } from "@testing-library/react";
 import { snapshotDiff } from "../../../utils/jest-utils";
diff --git a/packages/core/src/components/Modal/__tests__/Modal.test.js b/packages/core/src/components/LegacyModal/__tests__/LegacyModal.test.js
similarity index 98%
rename from packages/core/src/components/Modal/__tests__/Modal.test.js
rename to packages/core/src/components/LegacyModal/__tests__/LegacyModal.test.js
index 96490c6932..50aa0bffdc 100644
--- a/packages/core/src/components/Modal/__tests__/Modal.test.js
+++ b/packages/core/src/components/LegacyModal/__tests__/LegacyModal.test.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { render, cleanup, fireEvent } from "@testing-library/react";
 import { ModalHeader } from "../../../components";
-import { ModalExampleWrapper } from "../__stories__/Modal.stories.helpers";
+import { ModalExampleWrapper } from "../__stories__/LegacyModal.stories.helpers";
 import { ComponentDefaultTestId } from "../../../tests/test-ids-utils";
 
 const MODAL_TITLE_TEXT = "Modal title";
diff --git a/packages/core/src/components/Modal/__tests__/__snapshots__/Modal.snapshot.test.js.snap b/packages/core/src/components/LegacyModal/__tests__/__snapshots__/LegacyModal.snapshot.test.js.snap
similarity index 100%
rename from packages/core/src/components/Modal/__tests__/__snapshots__/Modal.snapshot.test.js.snap
rename to packages/core/src/components/LegacyModal/__tests__/__snapshots__/LegacyModal.snapshot.test.js.snap
diff --git a/packages/core/src/components/Modal/a11yDialog.ts b/packages/core/src/components/LegacyModal/a11yDialog.ts
similarity index 100%
rename from packages/core/src/components/Modal/a11yDialog.ts
rename to packages/core/src/components/LegacyModal/a11yDialog.ts
diff --git a/packages/core/src/components/LegacyModal/index.ts b/packages/core/src/components/LegacyModal/index.ts
new file mode 100644
index 0000000000..6c1a30d034
--- /dev/null
+++ b/packages/core/src/components/LegacyModal/index.ts
@@ -0,0 +1,19 @@
+export { default as Modal, LegacyModalProps as ModalProps } from "./LegacyModal";
+export {
+  default as ModalHeader,
+  LegacyModalHeaderProps as ModalHeaderProps
+} from "./LegacyModalHeader/LegacyModalHeader";
+export {
+  default as ModalContent,
+  LegacyModalContentProps as ModalContentProps
+} from "./LegacyModalContent/LegacyModalContent";
+export {
+  default as ModalFooter,
+  LegacyModalFooterProps as ModalFooterProps
+} from "./LegacyModalFooter/LegacyModalFooter";
+export {
+  default as ModalFooterButtons,
+  LegacyModalFooterButtonsProps as ModalFooterButtonsProps
+} from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
+
+export * from "./LegacyModal.types";
diff --git a/packages/core/src/components/Modal/useAnimationProps.ts b/packages/core/src/components/LegacyModal/useAnimationProps.ts
similarity index 100%
rename from packages/core/src/components/Modal/useAnimationProps.ts
rename to packages/core/src/components/LegacyModal/useAnimationProps.ts
diff --git a/packages/core/src/components/Modal/useBodyScrollLock.ts b/packages/core/src/components/LegacyModal/useBodyScrollLock.ts
similarity index 100%
rename from packages/core/src/components/Modal/useBodyScrollLock.ts
rename to packages/core/src/components/LegacyModal/useBodyScrollLock.ts
diff --git a/packages/core/src/components/Modal/useShowHideModal.ts b/packages/core/src/components/LegacyModal/useShowHideModal.ts
similarity index 100%
rename from packages/core/src/components/Modal/useShowHideModal.ts
rename to packages/core/src/components/LegacyModal/useShowHideModal.ts
diff --git a/packages/core/src/components/List/List.tsx b/packages/core/src/components/List/List.tsx
index 7c32fdacf5..9f48d044a0 100644
--- a/packages/core/src/components/List/List.tsx
+++ b/packages/core/src/components/List/List.tsx
@@ -5,6 +5,7 @@ import React, {
   forwardRef,
   ReactElement,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState
@@ -26,6 +27,7 @@ import {
   getListItemIndexById,
   getNextListItemIndex,
   getPrevListItemIndex,
+  isListItem,
   useListId
 } from "./utils/ListUtils";
 import styles from "./List.module.scss";
@@ -113,6 +115,20 @@ const List: VibeComponent<ListProps> & {
       ref: componentRef
     });
 
+    useEffect(() => {
+      const selectedItemIndex = childrenRefs.current.findIndex(
+        child => isListItem(child) && child?.getAttribute("aria-selected") === "true"
+      );
+      if (selectedItemIndex !== -1) {
+        updateFocusedItem(getListItemIdByIndex(childrenRefs, selectedItemIndex));
+      } else {
+        const firstFocusableIndex = childrenRefs.current.findIndex(child => isListItem(child));
+        if (firstFocusableIndex !== -1) {
+          updateFocusedItem(getListItemIdByIndex(childrenRefs, firstFocusableIndex));
+        }
+      }
+    }, [updateFocusedItem]);
+
     const overrideChildren = useMemo(() => {
       let override: ReactElement | ReactElement[] = Array.isArray(children) ? children : [children];
       if (renderOnlyVisibleItems) {
@@ -123,12 +139,13 @@ const List: VibeComponent<ListProps> & {
           if (!React.isValidElement(child)) {
             return child;
           }
-
           const id = (child.props as { id: string }).id || `${overrideId}-item-${index}`;
+          const currentRef = childrenRefs.current[index];
+          const isFocusableItem = currentRef === undefined || currentRef === null || isListItem(currentRef);
           return React.cloneElement(child, {
             // @ts-ignore not sure how to deal with ref here
             ref: ref => (childrenRefs.current[index] = ref),
-            tabIndex: focusIndex === index ? 0 : -1,
+            tabIndex: focusIndex === index && isFocusableItem ? 0 : -1,
             id,
             component: getListItemComponentType(component)
           });
diff --git a/packages/core/src/components/List/utils/ListUtils.ts b/packages/core/src/components/List/utils/ListUtils.ts
index e81291396c..443fa0d3be 100644
--- a/packages/core/src/components/List/utils/ListUtils.ts
+++ b/packages/core/src/components/List/utils/ListUtils.ts
@@ -36,7 +36,7 @@ export const getListItemComponentType = (listComponent: ListElement): ListItemEl
   }
 };
 
-const isListItem = (element: HTMLElement) => {
+export const isListItem = (element: HTMLElement) => {
   return element && element.getAttribute("role") === "option";
 };
 
diff --git a/packages/core/src/components/Modal/index.ts b/packages/core/src/components/Modal/index.ts
deleted file mode 100644
index 557878bcf3..0000000000
--- a/packages/core/src/components/Modal/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export { default as Modal, ModalProps } from "./Modal";
-export { default as ModalHeader, ModalHeaderProps } from "./ModalHeader/ModalHeader";
-export { default as ModalContent, ModalContentProps } from "./ModalContent/ModalContent";
-export { default as ModalFooter, ModalFooterProps } from "./ModalFooter/ModalFooter";
-export {
-  default as ModalFooterButtons,
-  ModalFooterButtonsProps
-} from "./ModalFooter/ModalFooterButtons/ModalFooterButtons";
-
-export * from "./Modal.types";
diff --git a/packages/core/src/components/ModalNew/Modal/Modal.module.scss b/packages/core/src/components/ModalNew/Modal/Modal.module.scss
index 982fdd57db..4da8d1afa2 100644
--- a/packages/core/src/components/ModalNew/Modal/Modal.module.scss
+++ b/packages/core/src/components/ModalNew/Modal/Modal.module.scss
@@ -1,10 +1,13 @@
 .overlay {
+  --monday-modal-z-index: 10000;
   position: fixed;
   inset: 0;
   background-color: rgba(41, 47, 76, 0.7);
+  z-index: var(--monday-modal-z-index);
 }
 
 .modal {
+  --monday-modal-z-index: 10000;
   --top-actions-spacing: var(--spacing-large);
   --top-actions-width: var(--spacing-xl);
   --modal-inline-padding: var(--spacing-xl);
@@ -12,11 +15,12 @@
   position: fixed;
   top: 50%;
   left: 50%;
+  z-index: var(--monday-modal-z-index);
 
   display: flex;
   flex-direction: column;
-  width: var(--modal-width, 50%);
-  max-height: var(--modal-max-height, 80%);
+  width: var(--modal-width);
+  max-height: var(--modal-max-height);
   background-color: var(--primary-background-color);
   overflow: hidden;
   border-radius: var(--border-radius-big);
@@ -28,58 +32,16 @@
 
   &.sizeSmall {
     --modal-max-height: 50%;
-    --modal-width: 45%;
+    --modal-width: 480px;
   }
 
   &.sizeMedium {
     --modal-max-height: 80%;
-    --modal-width: 50%;
+    --modal-width: 580px;
   }
 
   &.sizeLarge {
     --modal-max-height: 80%;
-    --modal-width: 70%;
-  }
-
-  @media (min-width: 1280px) {
-    &.sizeSmall {
-      --modal-width: 40%;
-    }
-
-    &.sizeMedium {
-      --modal-width: 44%;
-    }
-
-    &.sizeLarge {
-      --modal-width: 66%;
-    }
-  }
-
-  @media (min-width: 1440px) {
-    &.sizeSmall {
-      --modal-width: 35%;
-    }
-
-    &.sizeMedium {
-      --modal-width: 38%;
-    }
-
-    &.sizeLarge {
-      --modal-width: 60%;
-    }
-  }
-
-  @media (min-width: 1720px) {
-    &.sizeSmall {
-      --modal-width: 34%;
-    }
-
-    &.sizeMedium {
-      --modal-width: 36%;
-    }
-
-    &.sizeLarge {
-      --modal-width: 58%;
-    }
+    --modal-width: 840px;
   }
 }
diff --git a/packages/core/src/components/ModalNew/Modal/Modal.tsx b/packages/core/src/components/ModalNew/Modal/Modal.tsx
index 203cccbf63..0a0a7fae54 100644
--- a/packages/core/src/components/ModalNew/Modal/Modal.tsx
+++ b/packages/core/src/components/ModalNew/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import cx from "classnames";
 import { RemoveScroll } from "react-remove-scroll";
 import FocusLock from "react-focus-lock";
@@ -19,6 +19,9 @@ import {
   modalAnimationCenterPopVariants,
   modalAnimationOverlayVariants
 } from "../utils/animationVariants";
+import { createPortal } from "react-dom";
+import usePortalTarget from "../hooks/usePortalTarget/usePortalTarget";
+import { LayerProvider } from "../../LayerProvider";
 
 const Modal = forwardRef(
   (
@@ -32,6 +35,7 @@ const Modal = forwardRef(
       onClose = () => {},
       anchorElementRef,
       alertModal,
+      container = document.body,
       children,
       style,
       className,
@@ -39,6 +43,10 @@ const Modal = forwardRef(
     }: ModalProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
+    const portalTargetElement = usePortalTarget(container);
+
+    const overlayRef = useRef<HTMLDivElement>(null);
+
     const [titleId, setTitleId] = useState<string>();
     const [descriptionId, setDescriptionId] = useState<string>();
 
@@ -83,51 +91,59 @@ const Modal = forwardRef(
     return (
       <AnimatePresence>
         {show && (
-          <ModalProvider value={contextValue}>
-            <motion.div
-              variants={modalAnimationOverlayVariants}
-              initial={false}
-              animate="enter"
-              exit="exit"
-              data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
-              className={styles.overlay}
-              onClick={onBackdropClick}
-              aria-hidden
-            />
-            <FocusLock returnFocus>
-              <RemoveScroll forwardProps>
-                <motion.div
-                  variants={modalAnimationVariants}
-                  initial="exit"
-                  animate="enter"
-                  exit="exit"
-                  custom={anchorElementRef}
-                  ref={ref}
-                  className={cx(
-                    styles.modal,
-                    getStyle(styles, camelCase("size-" + size)),
-                    { [styles.withHeaderAction]: !!renderHeaderAction },
-                    className
-                  )}
-                  id={id}
-                  data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}
-                  role="dialog"
-                  aria-modal
-                  aria-labelledby={titleId}
-                  aria-describedby={descriptionId}
-                  style={style}
-                >
-                  {children}
-                  <ModalTopActions
-                    renderAction={renderHeaderAction}
-                    color={closeButtonTheme}
-                    closeButtonAriaLabel={closeButtonAriaLabel}
-                    onClose={onClose}
+          <LayerProvider layerRef={overlayRef}>
+            <ModalProvider value={contextValue}>
+              {createPortal(
+                <>
+                  <motion.div
+                    ref={overlayRef}
+                    variants={modalAnimationOverlayVariants}
+                    initial={false}
+                    animate="enter"
+                    exit="exit"
+                    data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
+                    className={styles.overlay}
+                    onClick={onBackdropClick}
+                    aria-hidden
                   />
-                </motion.div>
-              </RemoveScroll>
-            </FocusLock>
-          </ModalProvider>
+                  <FocusLock returnFocus>
+                    <RemoveScroll forwardProps>
+                      <motion.div
+                        variants={modalAnimationVariants}
+                        initial="exit"
+                        animate="enter"
+                        exit="exit"
+                        custom={anchorElementRef}
+                        ref={ref}
+                        className={cx(
+                          styles.modal,
+                          getStyle(styles, camelCase("size-" + size)),
+                          { [styles.withHeaderAction]: !!renderHeaderAction },
+                          className
+                        )}
+                        id={id}
+                        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}
+                        role="dialog"
+                        aria-modal
+                        aria-labelledby={titleId}
+                        aria-describedby={descriptionId}
+                        style={style}
+                      >
+                        {children}
+                        <ModalTopActions
+                          renderAction={renderHeaderAction}
+                          theme={closeButtonTheme}
+                          closeButtonAriaLabel={closeButtonAriaLabel}
+                          onClose={onClose}
+                        />
+                      </motion.div>
+                    </RemoveScroll>
+                  </FocusLock>
+                </>,
+                portalTargetElement
+              )}
+            </ModalProvider>
+          </LayerProvider>
         )}
       </AnimatePresence>
     );
diff --git a/packages/core/src/components/ModalNew/Modal/Modal.types.tsx b/packages/core/src/components/ModalNew/Modal/Modal.types.tsx
index d5fe642f3a..b9153ad4e2 100644
--- a/packages/core/src/components/ModalNew/Modal/Modal.types.tsx
+++ b/packages/core/src/components/ModalNew/Modal/Modal.types.tsx
@@ -1,6 +1,7 @@
 import { VibeComponentProps } from "../../../types";
 import React from "react";
 import { ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
+import { PortalTarget } from "../hooks/usePortalTarget/usePortalTarget.types";
 
 export type ModalSize = "small" | "medium" | "large";
 
@@ -9,15 +10,52 @@ export type ModalCloseEvent =
   | React.KeyboardEvent<HTMLBodyElement>;
 
 export interface ModalProps extends VibeComponentProps {
+  /**
+   * Unique identifier for the modal.
+   */
   id: string;
+  /**
+   * Controls the visibility of the modal.
+   */
   show: boolean;
+  /**
+   * Determines the width and max-height of the modal.
+   */
   size?: ModalSize;
-  closeButtonTheme?: ModalTopActionsProps["color"];
+  /**
+   * Theme color for the close button.
+   */
+  closeButtonTheme?: ModalTopActionsProps["theme"];
+  /**
+   * Accessibility label for the close button.
+   */
   closeButtonAriaLabel?: ModalTopActionsProps["closeButtonAriaLabel"];
+  /**
+   * Callback fired when the modal should close.
+   */
   onClose?: (event: ModalCloseEvent) => void;
+  /**
+   * Additional action to render in the header area.
+   */
   renderHeaderAction?: ModalTopActionsProps["renderAction"];
+  /**
+   * Reference to an element that triggered the modal, used for animations.
+   */
   anchorElementRef?: React.RefObject<HTMLElement>;
+  /**
+   * When true, prevents closing the modal when clicking the overlay ("click-outside") or pressing ESC.
+   */
   alertModal?: boolean;
+  /**
+   * The target element to render the modal into.
+   */
+  container?: PortalTarget;
+  /**
+   * Modal content.
+   */
   children: React.ReactNode;
+  /**
+   * Additional inline styles for the modal.
+   */
   style?: React.CSSProperties;
 }
diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/Modal.mdx b/packages/core/src/components/ModalNew/Modal/__stories__/Modal.mdx
new file mode 100644
index 0000000000..83edd6b8b4
--- /dev/null
+++ b/packages/core/src/components/ModalNew/Modal/__stories__/Modal.mdx
@@ -0,0 +1,136 @@
+import { Canvas, Meta } from "@storybook/blocks";
+import { ModalTip } from "./Modal.stories.helpers";
+import { Overview as BasicModalPreview } from "../../layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories";
+import { Overview as SideBySideModalPreview } from "../../layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories";
+import { Overview as MediaModalPreview } from "../../layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories";
+import backdropDo from "./assets/backdrop-do.png";
+import backdropDont from "./assets/backdrop-dont.png";
+import loadingDo from "./assets/loading-do.png";
+import loadingDont from "./assets/loading-dont.png";
+import ctaDo from "./assets/cta-do.png";
+import ctaDont from "./assets/cta-dont.png";
+import styles from "./Modal.stories.module.scss";
+import { StorybookLink } from "vibe-storybook-components";
+import {
+  DIALOG,
+  TIPSEEN,
+  TOOLTIP
+} from "../../../../storybook/components/related-components/component-description-map";
+
+<Meta title="Internal/Components/Modal [New]" />
+
+# Modal
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Do's and dont's](do's-and-don'ts)
+- [Related components](#related-components)
+- [Feedback](#feedback)
+
+## Overview
+
+Modals help users focus on a single task or a piece of information by popping up and blocking the rest of the page’s content. Modals disappear when user complete a required action or dismiss it. Use modals for quick, infrequent tasks.
+
+We have 3 different modal component, each one provide a different layout for a different use case:
+
+### Basic modal
+
+The Basic Modal is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.
+
+<Canvas of={BasicModalPreview} sourceState="none" />
+
+### Side by side modal
+
+The Side-by-Side Modal offers two distinct sections: the left for text or inputs, and the right for supporting visuals.
+It's ideal when users need to reference media alongside information.
+
+<Canvas of={SideBySideModalPreview} sourceState="none" />
+
+### Media modal
+
+The Media Modal includes a highlighted media section followed by text, perfect for grabbing attention with visuals before users interact with the content. Ideal for introducing new features or onboarding.
+
+<Canvas of={MediaModalPreview} sourceState="none" />
+
+## Usage
+
+<UsageGuidelines
+  guidelines={[
+    "Use modals only when you need the user's full, immediate attention.",
+    "Modals are centered on the page. To put the modal in focus, the rest of the page is dimmed.",
+    "All modals must have a title, a call to action, and a close button. The title and call to action should be simple and clear.",
+    "By default, users can close modals by clicking the close button, clicking outside the modal, or pressing the ESC key."
+  ]}
+/>
+
+<ModalTip />
+
+## Do's and don'ts
+
+<ComponentRules
+  rules={[
+    {
+      componentContainerClassName: styles.largeComponentRule,
+      positive: {
+        component: <img src={backdropDo} alt="modal with a backdrop" style={{ maxWidth: "100%" }} />,
+        description: "Modal must include backdrop element."
+      },
+      negative: {
+        component: <img src={backdropDont} alt="modal without a backdrop" style={{ maxWidth: "100%" }} />,
+        description: "Don't remove the backdrop element of the modal or the modal's title."
+      }
+    },
+    {
+      componentContainerClassName: styles.largeComponentRule,
+      positive: {
+        component: (
+          <img
+            src={loadingDo}
+            alt="modal with skeleton components as a loading experience"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description: (
+          <>
+            Use our <StorybookLink page="Feedback/Skeleton">Skeleton</StorybookLink> component if loading is needed. Try
+            that at least the actions will appear immediately.
+          </>
+        )
+      },
+      negative: {
+        component: (
+          <img
+            src={loadingDont}
+            alt="modal with a spinner loading components as a loading experience"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description: "Don't use Loader component in case of necessary loading."
+      }
+    },
+    {
+      componentContainerClassName: styles.largeComponentRule,
+      positive: {
+        component: (
+          <img
+            src={ctaDo}
+            alt="modal with a footer that includes one primary action and one tertiary action"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description: "Use one primary button as your main call to action, for extra buttons use the tertiary button."
+      },
+      negative: {
+        component: (
+          <img src={ctaDont} alt="modal with a footer that includes two primary actions" style={{ maxWidth: "100%" }} />
+        ),
+        description: "Don't use more than one primary button, we don't want to distract the user from the main action."
+      }
+    }
+  ]}
+/>
+
+## Related components
+
+<RelatedComponents componentsNames={[TOOLTIP, DIALOG, TIPSEEN]} />
diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.helpers.tsx b/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.helpers.tsx
new file mode 100644
index 0000000000..fa63e02beb
--- /dev/null
+++ b/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.helpers.tsx
@@ -0,0 +1,97 @@
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import Button from "../../../Button/Button";
+import { StorybookLink, Tip } from "vibe-storybook-components";
+import { useAfterFirstRender } from "../../../../hooks";
+import cx from "classnames";
+import styles from "./Modal.stories.module.scss";
+import { createPortal } from "react-dom";
+import { getStyle } from "../../../../helpers/typesciptCssModulesHelper";
+
+export const OpenedModalPreview = forwardRef(
+  (
+    {
+      onOpenModalClick,
+      isDocsView,
+      size = "small",
+      children: modal
+    }: {
+      onOpenModalClick: () => void;
+      isDocsView?: boolean;
+      size?: "small" | "medium" | "large";
+      children: React.ReactNode;
+    },
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const isAfterFirstRender = useAfterFirstRender();
+    return (
+      <div
+        className={cx(styles.preview, getStyle(styles, size))}
+        ref={ref}
+        // workaround to prevent modal from autofocusing on page load
+        // autofocus would work as expected when modal closes and reopens
+        {...(!isAfterFirstRender.current && isDocsView && { "data-no-autofocus": true })}
+      >
+        <Button onClick={onOpenModalClick}>Open Modal</Button>
+        {isDocsView ? modal : createPortal(modal, document.body)}
+      </div>
+    );
+  }
+);
+
+export const useRemoveModalScrollLock = (show: boolean, isDocsView?: boolean) => {
+  useEffect(() => {
+    if (show && document.body.attributes.getNamedItem("data-scroll-locked") && isDocsView) {
+      requestAnimationFrame(() => {
+        document.body.attributes.removeNamedItem("data-scroll-locked");
+        document.documentElement.addEventListener(
+          "wheel",
+          e => {
+            e.stopImmediatePropagation();
+          },
+          true
+        );
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- this is intended to run once, on mount
+  }, []);
+};
+
+export function withOpenedModalPreview(
+  Story: React.FunctionComponent<{
+    show: boolean;
+    setShow: (show: boolean) => void;
+    container?: React.RefObject<HTMLElement>;
+  }>,
+  { size, isDocsView }: { size?: "small" | "medium" | "large"; isDocsView: boolean }
+) {
+  const [show, setShow] = useState(true);
+  const container = useRef<HTMLElement>(null);
+  useRemoveModalScrollLock(show, isDocsView); // internal hook, for documentation purposes, to enable scroll on first load
+
+  return (
+    // internal component, for documentation purposes, to open modal inside a container
+    <OpenedModalPreview
+      size={size}
+      onOpenModalClick={() => setShow(true)}
+      isDocsView={isDocsView}
+      ref={element => {
+        isDocsView ? (container.current = element) : (container.current = document.body);
+      }}
+    >
+      <Story show={show} setShow={setShow} container={container} />
+    </OpenedModalPreview>
+  );
+}
+
+export const ModalTip = () => (
+  <div style={{ marginTop: 40 }}>
+    <Tip>
+      Since the modal is used for short and non-frequent tasks, consider using the main flow for common tasks. For
+      creating a popover positioned next to other components, like customized menus, check out our{" "}
+      <StorybookLink page="Popover/Dialog" size={StorybookLink.sizes.SMALL}>
+        Dialog
+      </StorybookLink>{" "}
+      component.
+    </Tip>
+  </div>
+);
diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.module.scss b/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.module.scss
new file mode 100644
index 0000000000..c54af9e71a
--- /dev/null
+++ b/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.module.scss
@@ -0,0 +1,47 @@
+.largeComponentRule {
+  height: fit-content !important;
+  width: fit-content;
+  padding: var(--sb-spacing-large);
+}
+
+.preview {
+  padding-inline-start: 32px;
+  padding-block-start: 40px;
+  height: 360px;
+  width: 100%;
+  container-type: inline-size;
+
+  &.small {
+    height: 360px;
+  }
+
+  &.medium {
+    height: 416px;
+  }
+
+  &.large {
+    height: 530px;
+  }
+
+  /**
+    * The following css is to override the default dimensions of the modal component
+    * this is necessary because in the documentation, we're "trapping" the modal component inside the preview component
+    * so the modal component width and height be relative to the preview component and not the viewport
+   */
+  [aria-modal][role="dialog"] {
+    &[class*="sizeSmall"] {
+      --modal-max-height: 50%;
+      --modal-width: 480px;
+    }
+
+    &[class*="sizeMedium"] {
+      --modal-max-height: 80%;
+      --modal-width: 580px;
+    }
+
+    &[class*="sizeLarge"] {
+      --modal-max-height: 80%;
+      --modal-width: 840px;
+    }
+  }
+}
diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-do.png b/packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-do.png
new file mode 100644
index 0000000000..b2948973c8
Binary files /dev/null and b/packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-do.png differ
diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-dont.png b/packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-dont.png
new file mode 100644
index 0000000000..6202c99e72
Binary files /dev/null and b/packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-dont.png differ
diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-do.png b/packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-do.png
new file mode 100644
index 0000000000..a30f744271
Binary files /dev/null and b/packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-do.png differ
diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-dont.png b/packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-dont.png
new file mode 100644
index 0000000000..7f2d324869
Binary files /dev/null and b/packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-dont.png differ
diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-do.png b/packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-do.png
new file mode 100644
index 0000000000..0fa869ab5f
Binary files /dev/null and b/packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-do.png differ
diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-dont.png b/packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-dont.png
new file mode 100644
index 0000000000..5a71ee77ed
Binary files /dev/null and b/packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-dont.png differ
diff --git a/packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts b/packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts
index d50def5bd6..9484a843cb 100644
--- a/packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts
+++ b/packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts
@@ -2,5 +2,8 @@ import React from "react";
 import { VibeComponentProps } from "../../../types";
 
 export interface ModalContentProps extends VibeComponentProps {
+  /**
+   * Main content of the modal.
+   */
   children?: React.ReactNode;
 }
diff --git a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts
index 8e5f9a750f..61aa13250c 100644
--- a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts
+++ b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts
@@ -7,7 +7,14 @@ interface WithoutDescription {
 }
 
 interface WithDescription {
+  /**
+   * Descriptive text or content below the title.
+   * When supplied, would also add an aria-describedby attribute to the modal dialog element.
+   */
   description: string | React.ReactNode;
+  /**
+   * Icon to display before the description. Can only be passed when description is supplied.
+   */
   descriptionIcon?:
     | SubIcon
     | {
@@ -16,4 +23,11 @@ interface WithDescription {
       };
 }
 
-export type ModalHeaderProps = { title: string } & (WithoutDescription | WithDescription) & VibeComponentProps;
+export type ModalHeaderProps = {
+  /**
+   * Main heading text of the modal.
+   * When supplied, would also add an aria-labelledby attribute to the modal dialog element.
+   */
+  title: string;
+} & (WithDescription | WithoutDescription) &
+  VibeComponentProps;
diff --git a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx
index e44eddac2d..e381325439 100644
--- a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx
+++ b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 import styles from "./ModalTopActions.module.scss";
-import { ModalTopActionsButtonColor, ModalTopActionsColor, ModalTopActionsProps } from "./ModalTopActions.types";
+import { ModalTopActionsButtonColor, ModalTopActionsTheme, ModalTopActionsProps } from "./ModalTopActions.types";
 import IconButton from "../../IconButton/IconButton";
 import { CloseMedium } from "@vibe/icons";
 import { ButtonColor } from "../../Button/ButtonConstants";
 
-const colorToButtonColor: Record<ModalTopActionsColor, ModalTopActionsButtonColor> = {
+const colorToButtonColor: Record<ModalTopActionsTheme, ModalTopActionsButtonColor> = {
   dark: ButtonColor.ON_INVERTED_BACKGROUND,
   light: ButtonColor.ON_PRIMARY_COLOR
 };
 
-const ModalTopActions = ({ renderAction, color, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => {
-  const buttonColor = colorToButtonColor[color] || ButtonColor.PRIMARY;
+const ModalTopActions = ({ renderAction, theme, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => {
+  const buttonColor = colorToButtonColor[theme] || ButtonColor.PRIMARY;
 
   return (
     <div className={styles.actions} data-no-autofocus={true}>
diff --git a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts
index 9ee221d54f..56bf075f89 100644
--- a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts
+++ b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts
@@ -3,7 +3,7 @@ import MenuButton from "../../MenuButton/MenuButton";
 import IconButton from "../../IconButton/IconButton";
 import { ButtonColor } from "../../Button/ButtonConstants";
 
-export type ModalTopActionsColor = "light" | "dark";
+export type ModalTopActionsTheme = "light" | "dark";
 export type ModalTopActionsButtonColor =
   | ButtonColor.PRIMARY
   | ButtonColor.ON_PRIMARY_COLOR
@@ -11,13 +11,22 @@ export type ModalTopActionsButtonColor =
 
 export interface ModalTopActionsProps {
   /**
-   * action can be passed either as a function or direct
-   * it allows passing back to consumer the color he chose, so he won't have to define it twice
+   * Action element or render function for the top-right area.
+   * When provided as a function, receives the current button color theme
    */
   renderAction?:
     | React.ReactElement<typeof MenuButton | typeof IconButton>
     | ((color?: ModalTopActionsButtonColor) => React.ReactElement<typeof MenuButton | typeof IconButton>);
-  color?: ModalTopActionsColor;
+  /**
+   * Color theme for the top actions
+   */
+  theme?: ModalTopActionsTheme;
+  /**
+   * Accessibility label for the close button
+   */
   closeButtonAriaLabel?: string;
+  /**
+   * Callback fired when the close button is clicked
+   */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
diff --git a/packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx b/packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx
index 8901e0e9de..38584d9fd9 100644
--- a/packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx
+++ b/packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx
@@ -41,7 +41,7 @@ describe("ModalTopActions", () => {
 
   it("calls renderAction with correct color argument", () => {
     const renderAction = jest.fn(color => <IconButton data-testid="extra-action" icon={FeedbackIcon} color={color} />);
-    render(<ModalTopActions color="dark" renderAction={renderAction} />);
+    render(<ModalTopActions theme="dark" renderAction={renderAction} />);
 
     expect(renderAction).toHaveBeenCalledWith(ButtonColor.ON_INVERTED_BACKGROUND);
   });
@@ -56,12 +56,12 @@ describe("ModalTopActions", () => {
   });
 
   it("applies the correct color when 'dark' is passed", () => {
-    const { getByLabelText } = render(<ModalTopActions color="dark" closeButtonAriaLabel={closeButtonAriaLabel} />);
+    const { getByLabelText } = render(<ModalTopActions theme="dark" closeButtonAriaLabel={closeButtonAriaLabel} />);
     expect(getByLabelText(closeButtonAriaLabel)).toHaveClass(camelCase("color-" + ButtonColor.ON_INVERTED_BACKGROUND));
   });
 
   it("applies the correct color when 'light' is passed", () => {
-    const { getByLabelText } = render(<ModalTopActions color="light" closeButtonAriaLabel={closeButtonAriaLabel} />);
+    const { getByLabelText } = render(<ModalTopActions theme="light" closeButtonAriaLabel={closeButtonAriaLabel} />);
     expect(getByLabelText(closeButtonAriaLabel)).toHaveClass(camelCase("color-" + ButtonColor.ON_PRIMARY_COLOR));
   });
 
diff --git a/packages/core/src/components/ModalNew/context/ModalContext.types.ts b/packages/core/src/components/ModalNew/context/ModalContext.types.ts
index 9ec22d54e9..4903b75bbd 100644
--- a/packages/core/src/components/ModalNew/context/ModalContext.types.ts
+++ b/packages/core/src/components/ModalNew/context/ModalContext.types.ts
@@ -3,12 +3,29 @@ import React from "react";
 export type ModalContextProps = ModalProviderValue;
 
 export type ModalProviderValue = {
+  /**
+   * Unique identifier for the modal.
+   * In use to set the modal title and description IDs to be unique.
+   */
   modalId: string;
+  /**
+   * Callback to set the title element ID for accessibility.
+   */
   setTitleId: (id: string) => void;
+  /**
+   * Callback to set the description element ID for accessibility.
+   */
   setDescriptionId: (id: string) => void;
 };
 
 export interface ModalProviderProps {
+  /**
+   * Context value containing modal state and handlers.
+   */
   value: ModalProviderValue;
+  /**
+   * Modal provider children.
+   * Should be the Modal root.
+   */
   children: React.ReactNode;
 }
diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts
index 1ce64b56ca..cd21581f4f 100644
--- a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts
+++ b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts
@@ -2,5 +2,8 @@ import React from "react";
 import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
 
 export interface ModalFooterProps extends Omit<ModalFooterBaseProps, "renderAction"> {
+  /**
+   * Optional content to render on the left side of the footer.
+   */
   renderSideAction?: React.ReactNode;
 }
diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts
index f9e2944392..4607862e8f 100644
--- a/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts
+++ b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts
@@ -3,11 +3,23 @@ import React from "react";
 import { VibeComponentProps } from "../../../../types";
 
 export interface ModalFooterActionProps extends Omit<ButtonProps, "children" | "kind" | "size"> {
+  /**
+   * Text to display as the Button's content.
+   */
   text: string;
 }
 
 export interface ModalFooterBaseProps extends VibeComponentProps {
+  /**
+   * Props for the primary action button.
+   */
   primaryButton: ModalFooterActionProps;
+  /**
+   * Props for the optional secondary action button.
+   */
   secondaryButton?: ModalFooterActionProps;
+  /**
+   * Additional content to render in the footer.
+   */
   renderAction?: React.ReactNode;
 }
diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx b/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx
index ab15e90a7e..844a4f941d 100644
--- a/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx
+++ b/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx
@@ -1,20 +1,11 @@
 import React, { forwardRef } from "react";
-import { VibeComponentProps } from "../../../../types";
 import cx from "classnames";
 import ModalFooterBase from "../ModalFooterBase/ModalFooterBase";
-import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
 import { getTestId } from "../../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../../tests/constants";
 import styles from "./ModalFooterWizard.module.scss";
 import { StepsGalleryHeader } from "../../../Steps/StepsGalleryHeader";
-
-export interface ModalFooterWizardProps
-  extends Required<Pick<ModalFooterBaseProps, "primaryButton" | "secondaryButton">>,
-    VibeComponentProps {
-  stepCount: number;
-  activeStep: number;
-  onStepClick: (stepIndex: number) => void;
-}
+import { ModalFooterWizardProps } from "./ModalFooterWizard.types";
 
 const ModalFooterWizard = forwardRef(
   (
diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.types.ts b/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.types.ts
new file mode 100644
index 0000000000..beb070e853
--- /dev/null
+++ b/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.types.ts
@@ -0,0 +1,21 @@
+import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
+import { VibeComponentProps } from "../../../../types";
+
+export interface ModalFooterWizardProps
+  extends Required<Pick<ModalFooterBaseProps, "primaryButton" | "secondaryButton">>,
+    VibeComponentProps {
+  /**
+   * Total number of steps in the wizard.
+   * This would render the appropriate number of step indicators ("dots") in the footer.
+   */
+  stepCount: number;
+  /**
+   * Current active step (0-based index).
+   * This would highlight the corresponding step indicator ("dot") in the footer.
+   */
+  activeStep: number;
+  /**
+   * Callback fired when a step indicator ("dot") is clicked.
+   */
+  onStepClick: (stepIndex: number) => void;
+}
diff --git a/packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.ts b/packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.ts
new file mode 100644
index 0000000000..ca1afbe0bf
--- /dev/null
+++ b/packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.ts
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { PortalTarget } from "./usePortalTarget.types";
+
+const usePortalTarget = (portalTarget?: PortalTarget): Element | DocumentFragment => {
+  const [resolvedTarget, setResolvedTarget] = useState<Element | DocumentFragment>(document.body);
+
+  useEffect(() => {
+    const resolveTarget = (): Element | DocumentFragment => {
+      if (!portalTarget) {
+        return document.body;
+      }
+
+      if (typeof portalTarget === "string") {
+        const target = document.querySelector(portalTarget);
+        if (!target) {
+          warn(`Target with selector "${portalTarget}" not found. Falling back to document.body.`);
+          return document.body;
+        }
+        return target;
+      }
+
+      if (portalTarget instanceof Element || portalTarget instanceof DocumentFragment) {
+        return portalTarget;
+      }
+
+      if (portalTarget.current instanceof Element) {
+        return portalTarget.current;
+      }
+
+      warn("Invalid target provided. Falling back to document.body.");
+      return document.body;
+    };
+
+    const target = resolveTarget();
+    setResolvedTarget(target);
+  }, [portalTarget, resolvedTarget]);
+
+  return resolvedTarget;
+};
+
+export default usePortalTarget;
+
+function warn(message: string): void {
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(message);
+  }
+}
diff --git a/packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.types.ts b/packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.types.ts
new file mode 100644
index 0000000000..30e1f47474
--- /dev/null
+++ b/packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.types.ts
@@ -0,0 +1,3 @@
+import React from "react";
+
+export type PortalTarget = string | React.RefObject<Element> | Element | DocumentFragment;
diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.types.ts b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.types.ts
index 67c237cdee..dc620c6948 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.types.ts
+++ b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.types.ts
@@ -2,5 +2,10 @@ import React from "react";
 import { VibeComponentProps } from "../../../../types";
 
 export interface ModalBasicLayoutProps extends VibeComponentProps {
+  /**
+   * Layout children in the following order:
+   * 1. Header content
+   * 2. Main content
+   */
   children: React.ReactNode;
 }
diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx
new file mode 100644
index 0000000000..fa7654dc84
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx
@@ -0,0 +1,129 @@
+import { Meta } from "@storybook/blocks";
+import * as ModalBasicLayoutStories from "./ModalBasicLayout.stories";
+import actionDo from "./assets/action-do.png";
+import actionDont from "./assets/action-dont.png";
+import styles from "../../../Modal/__stories__/Modal.stories.module.scss";
+import {
+  MODAL_MEDIA_LAYOUT,
+  MODAL_SIDE_BY_SIDE_LAYOUT,
+  TIPSEEN
+} from "../../../../../storybook/components/related-components/component-description-map";
+import { BasicModalTip } from "./ModalBasicLayout.stories.helpers";
+
+<Meta of={ModalBasicLayoutStories} />
+
+# Basic modal
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Variants](#variants)
+- [Scroll](#scroll)
+- [Use cases and examples](#use-cases-and-examples)
+- [Do's and dont's](do's-and-don'ts)
+- [Related components](#related-components)
+- [Feedback](#feedback)
+
+## Overview
+
+The Basic Modal is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.
+
+<Canvas of={ModalBasicLayoutStories.Overview} />
+
+## Props
+
+<PropsTable />
+
+## Usage
+
+<UsageGuidelines
+  guidelines={[
+    "Use for straightforward tasks like confirming routine actions, gathering simple info, or displaying brief instructions.",
+    "Use when users need to choose from a long list of items or options, or when they need to fill out a long form.",
+    "Use when there is no need for media (images or videos).",
+    "Use when the content is scrollable."
+  ]}
+/>
+
+<BasicModalTip />
+
+## Variants
+
+### Sizes
+
+The modal component has three sizes - small, medium, and large. The modal width is responsive and adjust in width based on screen size. Each size also has a maximum height to keep harmonic window ratio, while the content area adapting to fit.
+
+<Canvas of={ModalBasicLayoutStories.Sizes} />
+
+### Alert Modal
+
+Use the "alertModal" boolean prop in order to allow closing the modal only by the close buttons and not by ESC or by clicking outside. Use this variant in case of sensitive or important messages, and in modals that requires data from the user, such as forms.
+
+<Canvas of={ModalBasicLayoutStories.AlertModal} />
+
+## Scroll
+
+When the content of the modal is too large to fit within the viewport, the modal content should become scrollable while the header and footer stay sticky. If the scroll is too long, consider switching to a different modal size or a different layout.
+
+<Canvas of={ModalBasicLayoutStories.Scroll} />
+
+## Use cases and examples
+
+### Wizard footer
+
+When multi steps modal, use the "wizard footer". For more guidelines about the footer we recommend to check our <StorybookLink page="Components/Modal [New]/Footer">ModalFooter</StorybookLink> page.
+
+<Canvas of={ModalBasicLayoutStories.Wizard} />
+
+### Footer with side action
+
+The footer has an option to include additional content on the left side when needed. This extra content can consist of a button, checkbox, or simple text for notes. Note that this option is only available with the default footer.
+
+<Canvas of={ModalBasicLayoutStories.FooterWithSideAction} />
+
+### Header with extra icon button
+
+In case of a need of an icon button in the modal header, you can use our default header "Action slot".
+You can also use it as a <StorybookLink page="Buttons/MenuButton">menu button</StorybookLink> component.
+
+<Canvas of={ModalBasicLayoutStories.HeaderWithExtraIconButton} />
+
+### Animation
+
+Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the element trigger animation, which can be replaced with a center pop animation if there's no specific trigger. Transition animation is used exclusively for wizard modals and cannot be changed or removed.
+
+<Canvas of={ModalBasicLayoutStories.Animation} />
+
+## Do's and don'ts
+
+<ComponentRules
+  rules={[
+    {
+      componentContainerClassName: styles.largeComponentRule,
+      positive: {
+        component: (
+          <img
+            src={actionDo}
+            alt="modal featuring an extra action checkbox on the footer"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description: "Use button, checkbox, or simple text for notes as an extra content to the footer."
+      },
+      negative: {
+        component: (
+          <img
+            src={actionDont}
+            alt="modal featuring an extra action image on the footer"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description: "Don't use images, inputs or any kind of content that can overload the user."
+      }
+    }
+  ]}
+/>
+
+## Related components
+
+<RelatedComponents componentsNames={[MODAL_SIDE_BY_SIDE_LAYOUT, MODAL_MEDIA_LAYOUT, TIPSEEN]} />
diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.helpers.tsx b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.helpers.tsx
new file mode 100644
index 0000000000..aec3ffc3f6
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.helpers.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { StorybookLink, Tip } from "vibe-storybook-components";
+
+export const BasicModalTip = () => (
+  <div style={{ marginTop: 40 }}>
+    <Tip>
+      If your content is not scrollable and you need to add media as supporting element, consider using{" "}
+      <StorybookLink page="Components/Modal [New]/Side by side modal" size={StorybookLink.sizes.SMALL}>
+        Side-by-side modal
+      </StorybookLink>{" "}
+      or{" "}
+      <StorybookLink page="Components/Modal [New]/Media modal" size={StorybookLink.sizes.SMALL}>
+        Media modal
+      </StorybookLink>{" "}
+      depends on your use case.
+    </Tip>
+  </div>
+);
diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx
new file mode 100644
index 0000000000..087bba2df2
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx
@@ -0,0 +1,451 @@
+import React, { useRef, useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Modal from "../../../Modal/Modal";
+import { createStoryMetaSettingsDecorator } from "../../../../../storybook";
+import ModalBasicLayout from "../ModalBasicLayout";
+import ModalHeader from "../../../ModalHeader/ModalHeader";
+import ModalContent from "../../../ModalContent/ModalContent";
+import ModalFooter from "../../../footers/ModalFooter/ModalFooter";
+import Flex from "../../../../Flex/Flex";
+import Button from "../../../../Button/Button";
+import Text from "../../../../Text/Text";
+import Link from "../../../../Link/Link";
+import TransitionView from "../../../../TransitionView/TransitionView";
+import ModalFooterWizard from "../../../footers/ModalFooterWizard/ModalFooterWizard";
+import useWizard from "../../../../../hooks/useWizard/useWizard";
+import { Checkbox } from "../../../../Checkbox";
+import IconButton from "../../../../IconButton/IconButton";
+import { Menu } from "@vibe/icons";
+import { withOpenedModalPreview } from "../../../Modal/__stories__/Modal.stories.helpers";
+
+type Story = StoryObj<typeof Modal>;
+
+const metaSettings = createStoryMetaSettingsDecorator({
+  component: Modal
+});
+
+export default {
+  title: "Internal/Components/Modal [New]/Basic modal",
+  component: Modal,
+  subcomponents: { ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, TransitionView },
+  argTypes: metaSettings.argTypes,
+  decorators: metaSettings.decorators,
+  tags: ["internal"]
+} satisfies Meta<typeof Modal>;
+
+export const Overview: Story = {
+  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
+  render: (args, { show, setShow, container }) => {
+    return (
+      <Modal id="modal-basic" show={show} size="medium" onClose={() => setShow(false)} container={container} {...args}>
+        <ModalBasicLayout>
+          <ModalHeader
+            title="Modal title"
+            description={
+              <Text type="text1">
+                Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+              </Text>
+            }
+          />
+          <ModalContent>
+            <Text type="text1" align="inherit" element="p">
+              Modal content will appear here, you can custom it however you want, according to the user needs. Please
+              make sure that the content is clear for completing the relevant task.
+            </Text>
+          </ModalContent>
+        </ModalBasicLayout>
+        <ModalFooter
+          primaryButton={{ text: "Confirm", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }}
+        />
+      </Modal>
+    );
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const [showSmall, setShowSmall] = useState(false);
+    const [showMedium, setShowMedium] = useState(false);
+    const [showLarge, setShowLarge] = useState(false);
+
+    return (
+      <>
+        <Flex gap="large" style={{ paddingBlock: 40 }}>
+          <Button onClick={() => setShowSmall(true)}>Small</Button>
+          <Button onClick={() => setShowMedium(true)}>Medium</Button>
+          <Button onClick={() => setShowLarge(true)}>Large</Button>
+        </Flex>
+
+        <Modal id="modal-basic-small" show={showSmall} size="small" onClose={() => setShowSmall(false)}>
+          <ModalBasicLayout>
+            <ModalHeader
+              title="Modal title"
+              description={
+                <Text type="text1">
+                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+                </Text>
+              }
+            />
+            <ModalContent>
+              <Text type="text1" align="inherit" element="p">
+                Modal content will appear here, you can custom it however you want, according to the user needs. Please
+                make sure that the content is clear for completing the relevant task.
+              </Text>
+            </ModalContent>
+          </ModalBasicLayout>
+          <ModalFooter
+            primaryButton={{ text: "Confirm", onClick: () => setShowSmall(false) }}
+            secondaryButton={{ text: "Cancel", onClick: () => setShowSmall(false) }}
+          />
+        </Modal>
+
+        <Modal id="modal-basic-medium" show={showMedium} size="medium" onClose={() => setShowMedium(false)}>
+          <ModalBasicLayout>
+            <ModalHeader
+              title="Modal title"
+              description={
+                <Text type="text1">
+                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+                </Text>
+              }
+            />
+            <ModalContent>
+              <Text type="text1" align="inherit" element="p">
+                Modal content will appear here, you can custom it however you want, according to the user needs. Please
+                make sure that the content is clear for completing the relevant task.
+              </Text>
+            </ModalContent>
+          </ModalBasicLayout>
+          <ModalFooter
+            primaryButton={{ text: "Confirm", onClick: () => setShowMedium(false) }}
+            secondaryButton={{ text: "Cancel", onClick: () => setShowMedium(false) }}
+          />
+        </Modal>
+
+        <Modal id="modal-basic-large" show={showLarge} size="large" onClose={() => setShowLarge(false)}>
+          <ModalBasicLayout>
+            <ModalHeader
+              title="Modal title"
+              description={
+                <Text type="text1">
+                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+                </Text>
+              }
+            />
+            <ModalContent>
+              <Text type="text1" align="inherit" element="p">
+                Modal content will appear here, you can custom it however you want, according to the user needs. Please
+                make sure that the content is clear for completing the relevant task.
+              </Text>
+            </ModalContent>
+          </ModalBasicLayout>
+          <ModalFooter
+            primaryButton={{ text: "Confirm", onClick: () => setShowLarge(false) }}
+            secondaryButton={{ text: "Cancel", onClick: () => setShowLarge(false) }}
+          />
+        </Modal>
+      </>
+    );
+  }
+};
+
+export const AlertModal: Story = {
+  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
+  render: (_, { show, setShow, container }) => {
+    return (
+      <Modal id="modal-basic" show={show} alertModal size="medium" onClose={() => setShow(false)} container={container}>
+        <ModalBasicLayout>
+          <ModalHeader title="Alert modal" />
+          <ModalContent>
+            This will allow closing the modal only by the close buttons and not by ESC or by clicking outside.
+          </ModalContent>
+        </ModalBasicLayout>
+        <ModalFooter
+          primaryButton={{ text: "Confirm", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const Scroll: Story = {
+  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
+  render: (_, { show, setShow, container }) => {
+    return (
+      <Modal id="modal-basic" show={show} size="medium" onClose={() => setShow(false)} container={container}>
+        <ModalBasicLayout>
+          <ModalHeader title="Scrollable modal" />
+          <ModalContent>
+            <Text type="text1" align="inherit" element="p">
+              Modal content will appear here, you can custom it however you want, according to the user needs. Please
+              make sure that the content is clear for completing the relevant task. The Basic Modal is intended for
+              straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus
+              on a single task without distractions. These modals do not support images or videos. When the content of
+              the modal is too large to fit within the viewport, the modal content should become scrollable while the
+              header and footer stay sticky. If the scroll is too long, consider switching to a different modal size or
+              a different layout. Modal content will appear here, you can custom it however you want, according to the
+              user needs. Please make sure that the content is clear for completing the relevant task.
+            </Text>
+          </ModalContent>
+        </ModalBasicLayout>
+        <ModalFooter
+          primaryButton={{ text: "Confirm", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const Wizard: Story = {
+  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
+  render: (_, { show, setShow, container }) => {
+    const steps = [
+      <ModalBasicLayout>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+      </ModalBasicLayout>,
+      <ModalBasicLayout>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+      </ModalBasicLayout>,
+      <ModalBasicLayout>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+      </ModalBasicLayout>
+    ];
+
+    const { activeStep, direction, next, back, isFirstStep, goToStep } = useWizard({
+      stepCount: steps.length
+    });
+
+    return (
+      <Modal id="modal-basic" show={show} size="medium" onClose={() => setShow(false)} container={container}>
+        <TransitionView activeStep={activeStep} direction={direction}>
+          {steps}
+        </TransitionView>
+        <ModalFooterWizard
+          activeStep={activeStep}
+          stepCount={steps.length}
+          onStepClick={goToStep}
+          primaryButton={{ text: "Next", onClick: next }}
+          secondaryButton={{ text: "Back", onClick: back, disabled: isFirstStep }}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const FooterWithSideAction: Story = {
+  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
+  render: (_, { show, setShow, container }) => {
+    return (
+      <Modal id="modal-basic" show={show} size="medium" onClose={() => setShow(false)} container={container}>
+        <ModalBasicLayout>
+          <ModalHeader
+            title="Modal title"
+            description={
+              <Text type="text1">
+                Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+              </Text>
+            }
+          />
+          <ModalContent>
+            <Text type="text1" align="inherit" element="p">
+              Modal content will appear here, you can custom it however you want, according to the user needs. Please
+              make sure that the content is clear for completing the relevant task.
+            </Text>
+          </ModalContent>
+        </ModalBasicLayout>
+        <ModalFooter
+          primaryButton={{ text: "Confirm", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }}
+          renderSideAction={<Checkbox label="Don't show again" />}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const HeaderWithExtraIconButton: Story = {
+  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
+  render: (_, { show, setShow, container }) => {
+    return (
+      <Modal
+        id="modal-basic"
+        show={show}
+        renderHeaderAction={<IconButton icon={Menu} size="small" kind="tertiary" ariaLabel="Open Menu" />}
+        size="medium"
+        onClose={() => setShow(false)}
+        container={container}
+      >
+        <ModalBasicLayout>
+          <ModalHeader
+            title="Modal title"
+            description={
+              <Text type="text1">
+                Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+              </Text>
+            }
+          />
+          <ModalContent>
+            <Text type="text1" align="inherit" element="p">
+              Modal content will appear here, you can custom it however you want, according to the user needs. Please
+              make sure that the content is clear for completing the relevant task.
+            </Text>
+          </ModalContent>
+        </ModalBasicLayout>
+        <ModalFooter
+          primaryButton={{ text: "Confirm", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }}
+          renderSideAction={<Checkbox label="Don't show again" />}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const Animation: Story = {
+  render: () => {
+    const [showAnchor, setShowAnchor] = useState(false);
+    const [showCenterPop, setShowCenterPop] = useState(false);
+    const [showTransition, setShowTransition] = useState(false);
+
+    const anchorButtonRef = useRef<HTMLButtonElement>(null);
+
+    const transitionSteps = [
+      <ModalBasicLayout>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+      </ModalBasicLayout>,
+      <ModalBasicLayout>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+      </ModalBasicLayout>,
+      <ModalBasicLayout>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+      </ModalBasicLayout>
+    ];
+
+    const { activeStep, direction, next, back, isFirstStep, goToStep } = useWizard({
+      stepCount: transitionSteps.length
+    });
+
+    return (
+      <>
+        <Flex gap="large" style={{ paddingBlock: 40 }}>
+          <Button ref={anchorButtonRef} onClick={() => setShowAnchor(true)}>
+            Anchor
+          </Button>
+          <Button onClick={() => setShowCenterPop(true)}>Center pop</Button>
+          <Button onClick={() => setShowTransition(true)}>Transition</Button>
+        </Flex>
+
+        <Modal
+          id="modal-basic-anchor"
+          show={showAnchor}
+          anchorElementRef={anchorButtonRef}
+          size="medium"
+          onClose={() => setShowAnchor(false)}
+        >
+          <ModalBasicLayout>
+            <ModalHeader
+              title="Modal title"
+              description={
+                <Text type="text1">
+                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+                </Text>
+              }
+            />
+            <ModalContent>
+              <Text type="text1" align="inherit" element="p">
+                Modal content will appear here, you can custom it however you want, according to the user needs. Please
+                make sure that the content is clear for completing the relevant task.
+              </Text>
+            </ModalContent>
+          </ModalBasicLayout>
+          <ModalFooter
+            primaryButton={{ text: "Confirm", onClick: () => setShowAnchor(false) }}
+            secondaryButton={{ text: "Cancel", onClick: () => setShowAnchor(false) }}
+          />
+        </Modal>
+
+        <Modal id="modal-basic-center" show={showCenterPop} size="medium" onClose={() => setShowCenterPop(false)}>
+          <ModalBasicLayout>
+            <ModalHeader
+              title="Modal title"
+              description={
+                <Text type="text1">
+                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+                </Text>
+              }
+            />
+            <ModalContent>
+              <Text type="text1" align="inherit" element="p">
+                Modal content will appear here, you can custom it however you want, according to the user needs. Please
+                make sure that the content is clear for completing the relevant task.
+              </Text>
+            </ModalContent>
+          </ModalBasicLayout>
+          <ModalFooter
+            primaryButton={{ text: "Confirm", onClick: () => setShowCenterPop(false) }}
+            secondaryButton={{ text: "Cancel", onClick: () => setShowCenterPop(false) }}
+          />
+        </Modal>
+
+        <Modal id="modal-basic-transition" show={showTransition} size="medium" onClose={() => setShowTransition(false)}>
+          <TransitionView activeStep={activeStep} direction={direction}>
+            {transitionSteps}
+          </TransitionView>
+          <ModalFooterWizard
+            activeStep={activeStep}
+            stepCount={transitionSteps.length}
+            onStepClick={goToStep}
+            primaryButton={{ text: "Next", onClick: next }}
+            secondaryButton={{ text: "Back", onClick: back, disabled: isFirstStep }}
+          />
+        </Modal>
+      </>
+    );
+  }
+};
diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent.tsx b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent.tsx
new file mode 100644
index 0000000000..82946034da
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent.tsx
@@ -0,0 +1,24 @@
+import React, { useMemo } from "react";
+import { RelatedComponent } from "vibe-storybook-components";
+import relatedComponentImage from "./assets/related-component.png";
+
+export const ModalBasicLayoutRelatedComponent = () => {
+  const component = useMemo(() => {
+    return (
+      <img
+        src={relatedComponentImage}
+        style={{ maxHeight: "100%", maxWidth: "100%" }}
+        alt="modal with basic layout variation"
+      />
+    );
+  }, []);
+
+  return (
+    <RelatedComponent
+      component={component}
+      title="Basic modal"
+      href="/?path=/docs/feedback-modal-new-basic-modal"
+      description="Modal for straightforward tasks, helps users focus on a single task without distractions."
+    />
+  );
+};
diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-do.png b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-do.png
new file mode 100644
index 0000000000..ed743c16ab
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-do.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-dont.png b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-dont.png
new file mode 100644
index 0000000000..8f58cdc90b
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-dont.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/related-component.png b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/related-component.png
new file mode 100644
index 0000000000..b0f588188e
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/related-component.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalFooterShadow.types.ts b/packages/core/src/components/ModalNew/layouts/ModalFooterShadow.types.ts
index f3d4d656aa..8319aef7fb 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalFooterShadow.types.ts
+++ b/packages/core/src/components/ModalNew/layouts/ModalFooterShadow.types.ts
@@ -1,3 +1,6 @@
 export interface ModalFooterShadowProps {
+  /**
+   * Controls the visibility of the shadow.
+   */
   show: boolean;
 }
diff --git a/packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.types.ts b/packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.types.ts
index 7fa753ff9a..2f83533c05 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.types.ts
+++ b/packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.types.ts
@@ -1,7 +1,16 @@
 import { ReactNode, UIEventHandler } from "react";
 
 export interface ModalLayoutScrollableContentProps {
+  /**
+   * Callback fired when the content is scrolled.
+   */
   onScroll?: UIEventHandler<HTMLDivElement>;
+  /**
+   * Additional class name.
+   */
   className?: string;
+  /**
+   * Scrollable content.
+   */
   children: ReactNode;
 }
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMedia.module.scss b/packages/core/src/components/ModalNew/layouts/ModalMedia.module.scss
index 9eb13e01cf..67197d4106 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalMedia.module.scss
+++ b/packages/core/src/components/ModalNew/layouts/ModalMedia.module.scss
@@ -4,7 +4,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-shrink: 0;
+  flex: 1 0;
   overflow: hidden;
   position: relative;
 }
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMedia.types.ts b/packages/core/src/components/ModalNew/layouts/ModalMedia.types.ts
index 550b46dc33..6584a726b4 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalMedia.types.ts
+++ b/packages/core/src/components/ModalNew/layouts/ModalMedia.types.ts
@@ -2,5 +2,8 @@ import React from "react";
 import { VibeComponentProps } from "../../../types";
 
 export interface ModalMediaProps extends VibeComponentProps {
+  /**
+   * Media content to be displayed in the modal (image, video, Lottie, etc.).
+   */
   children: React.ReactNode;
 }
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.module.scss b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.module.scss
index d729853637..80609ce63f 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.module.scss
+++ b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.module.scss
@@ -11,17 +11,6 @@
     position: relative;
     width: 100%;
     flex-shrink: 0;
-
-    height: var(--modal-top-media-height, 240px);
-    @media (min-width: 1280px) {
-      --modal-top-media-height: 260px;
-    }
-    @media (min-width: 1440px) {
-      --modal-top-media-height: 260px;
-    }
-    @media (min-width: 1720px) {
-      --modal-top-media-height: 320px;
-    }
   }
 
   .header {
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.types.ts b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.types.ts
index 3d9481f36f..509075b87f 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.types.ts
+++ b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.types.ts
@@ -2,5 +2,11 @@ import React from "react";
 import { VibeComponentProps } from "../../../../types";
 
 export interface ModalMediaLayoutProps extends VibeComponentProps {
+  /**
+   * Layout children in the following order:
+   * 1. Media content
+   * 2. Header content
+   * 3. Main content
+   */
   children: React.ReactNode;
 }
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx
new file mode 100644
index 0000000000..d17590f2fa
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx
@@ -0,0 +1,101 @@
+import { Meta } from "@storybook/blocks";
+import * as MediaModalStories from "./ModalMediaLayout.stories";
+import ratioDo from "./assets/ratio-do.png";
+import ratioDont from "./assets/ratio-dont.png";
+
+import styles from "../../../Modal/__stories__/Modal.stories.module.scss";
+import {
+  MODAL_BASIC_LAYOUT,
+  MODAL_SIDE_BY_SIDE_LAYOUT,
+  TIPSEEN
+} from "../../../../../storybook/components/related-components/component-description-map";
+import { MediaModalTip } from "./ModalMediaLayout.stories.helpers";
+
+<Meta of={MediaModalStories} />
+
+# Media Modal
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Use cases and examples](#use-cases-and-examples)
+- [Do's and dont's](do's-and-don'ts)
+- [Related components](#related-components)
+- [Feedback](#feedback)
+
+## Overview
+
+The Media Modal includes a highlighted media section, followed by a textual content area. This modal is intended for cases when you need to catch the user’s attention using visual elements before they interact with the text. It’s ideal for introducing new features or short onboarding flows.
+
+<Canvas of={MediaModalStories.Overview} />
+
+## Props
+
+<PropsTable />
+
+## Usage
+
+<UsageGuidelines
+  guidelines={[
+    "Use when you want to prioritize images, videos, or other media before users engage with the text below.",
+    "Use for product highlights, feature releases, or any guides that require visuals first, followed by explanatory text."
+  ]}
+/>
+
+<MediaModalTip />
+
+## Use cases and examples
+
+### Wizard footer
+
+When multi steps modal, use the "wizard footer". For more guidelines about the footer we recommend to check our <StorybookLink page="Components/Modal [New]/Footer">ModalFooter</StorybookLink> page.
+
+<Canvas of={MediaModalStories.Wizard} />
+
+### Header with extra icon button
+
+In case of a need of an icon button in the modal header, you can use our default header "Action slot".
+You can also use it as a <StorybookLink page="Buttons/MenuButton">menu button</StorybookLink> component.
+
+<Canvas of={MediaModalStories.HeaderWithExtraIconButton} />
+
+### Animation
+
+Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the element trigger animation, which can be replaced with a center pop animation if there's no specific trigger. Transition animation is used exclusively for wizard modals and cannot be changed or removed.
+
+<Canvas of={MediaModalStories.Animation} />
+
+## Do's and don'ts
+
+<ComponentRules
+  rules={[
+    {
+      componentContainerClassName: styles.largeComponentRule,
+      positive: {
+        component: (
+          <img
+            src={ratioDo}
+            alt="modal with nice ratio between image to content and footer"
+            style={{ maxWidth: "80%" }}
+          />
+        ),
+        description: "Keep a balanced ratio between the media section, to the content and footer section."
+      },
+      negative: {
+        component: (
+          <img
+            src={ratioDont}
+            alt="modal with bad ratio between image to content and footer, image is very small"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description:
+          "Don't create a media that will be too small or too big for the modal width, as it create unbalanced look."
+      }
+    }
+  ]}
+/>
+
+## Related components
+
+<RelatedComponents componentsNames={[MODAL_SIDE_BY_SIDE_LAYOUT, MODAL_BASIC_LAYOUT, TIPSEEN]} />
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.helpers.tsx b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.helpers.tsx
new file mode 100644
index 0000000000..bc860367fc
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.helpers.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { StorybookLink, Tip } from "vibe-storybook-components";
+
+export const MediaModalTip = () => (
+  <div style={{ marginTop: 40 }}>
+    <Tip>
+      If your content is scrollable or wide (you need more space), consider using{" "}
+      <StorybookLink page="Components/Modal [New]/Basic modal" size={StorybookLink.sizes.SMALL}>
+        Basic modal
+      </StorybookLink>
+      .
+    </Tip>
+  </div>
+);
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx
new file mode 100644
index 0000000000..a0ec2dd916
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx
@@ -0,0 +1,243 @@
+import React, { useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Modal from "../../../Modal/Modal";
+import { createStoryMetaSettingsDecorator } from "../../../../../storybook";
+import ModalHeader from "../../../ModalHeader/ModalHeader";
+import ModalContent from "../../../ModalContent/ModalContent";
+import ModalMedia from "../../ModalMedia";
+import mediaImage from "./assets/media-image.png";
+import ModalFooter from "../../../footers/ModalFooter/ModalFooter";
+import ModalMediaLayout from "../ModalMediaLayout";
+import Text from "../../../../Text/Text";
+import Link from "../../../../Link/Link";
+import useWizard from "../../../../../hooks/useWizard/useWizard";
+import TransitionView from "../../../../TransitionView/TransitionView";
+import ModalFooterWizard from "../../../footers/ModalFooterWizard/ModalFooterWizard";
+import IconButton from "../../../../IconButton/IconButton";
+import { Menu } from "@vibe/icons";
+import Flex from "../../../../Flex/Flex";
+import Button from "../../../../Button/Button";
+import { withOpenedModalPreview } from "../../../Modal/__stories__/Modal.stories.helpers";
+
+type Story = StoryObj<typeof Modal>;
+
+const metaSettings = createStoryMetaSettingsDecorator({
+  component: Modal
+});
+
+export default {
+  title: "Internal/Components/Modal [New]/Media modal",
+  component: Modal,
+  subcomponents: {
+    ModalMediaLayout,
+    ModalMedia,
+    ModalHeader,
+    ModalContent,
+    ModalFooter,
+    ModalFooterWizard,
+    TransitionView
+  },
+  argTypes: metaSettings.argTypes,
+  decorators: metaSettings.decorators,
+  tags: ["internal"]
+} satisfies Meta<typeof Modal>;
+
+export const Overview: Story = {
+  decorators: [
+    (Story, context) => withOpenedModalPreview(Story, { size: "large", isDocsView: context.viewMode === "docs" })
+  ],
+  render: (args, { show, setShow, container }) => {
+    return (
+      <Modal id="modal-media" show={show} size="medium" onClose={() => setShow(false)} container={container} {...args}>
+        <ModalMediaLayout>
+          <ModalMedia>
+            <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+          </ModalMedia>
+          <ModalHeader title="Modal title" />
+          <ModalContent>
+            <Text type="text1" align="inherit" element="p">
+              The media modal is ideal for introducing new features or onboarding, the user can also{" "}
+              <Link inheritFontSize inlineText text="add a link" />.
+            </Text>
+          </ModalContent>
+        </ModalMediaLayout>
+        <ModalFooter
+          primaryButton={{ text: "Confirm", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }}
+        />
+      </Modal>
+    );
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
+};
+
+export const Wizard: Story = {
+  decorators: [
+    (Story, context) => withOpenedModalPreview(Story, { size: "large", isDocsView: context.viewMode === "docs" })
+  ],
+  render: (_, { show, setShow, container }) => {
+    const steps = [
+      <ModalMediaLayout>
+        <ModalMedia>
+          <img height={260} src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            We have made some changes to our modal component. Keep reading to see what improvements we made.
+          </Text>
+        </ModalContent>
+      </ModalMediaLayout>,
+      <ModalMediaLayout>
+        <ModalMedia>
+          <img height={260} src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an
+            animation.
+          </Text>
+        </ModalContent>
+      </ModalMediaLayout>
+    ];
+
+    const { activeStep, direction, next, back, isFirstStep, goToStep } = useWizard({
+      stepCount: steps.length
+    });
+
+    return (
+      <Modal id="modal-media" show={show} size="medium" onClose={() => setShow(false)} container={container}>
+        <TransitionView activeStep={activeStep} direction={direction}>
+          {steps}
+        </TransitionView>
+        <ModalFooterWizard
+          activeStep={activeStep}
+          stepCount={steps.length}
+          onStepClick={goToStep}
+          primaryButton={{ text: "Next", onClick: next }}
+          secondaryButton={{ text: "Back", onClick: back, disabled: isFirstStep }}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const HeaderWithExtraIconButton: Story = {
+  decorators: [
+    (Story, context) => withOpenedModalPreview(Story, { size: "large", isDocsView: context.viewMode === "docs" })
+  ],
+  render: (_, { show, setShow, container }) => {
+    return (
+      <Modal
+        id="modal-media"
+        show={show}
+        renderHeaderAction={<IconButton icon={Menu} size="small" kind="tertiary" ariaLabel="Open Menu" />}
+        size="medium"
+        onClose={() => setShow(false)}
+        container={container}
+      >
+        <ModalMediaLayout>
+          <ModalMedia>
+            <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+          </ModalMedia>
+          <ModalHeader title="Modal title" />
+          <ModalContent>
+            <Text type="text1" align="inherit" element="p">
+              The media modal is ideal for introducing new features or onboarding, the user can also{" "}
+              <Link inheritFontSize inlineText text="add a link" />.
+            </Text>
+          </ModalContent>
+        </ModalMediaLayout>
+        <ModalFooter
+          primaryButton={{ text: "Confirm", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const Animation: Story = {
+  render: () => {
+    const [showCenterPop, setShowCenterPop] = useState(false);
+    const [showTransition, setShowTransition] = useState(false);
+
+    const transitionSteps = [
+      <ModalMediaLayout>
+        <ModalMedia>
+          <img height={260} src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            We have made some changes to our modal component. Keep reading to see what improvements we made.
+          </Text>
+        </ModalContent>
+      </ModalMediaLayout>,
+      <ModalMediaLayout>
+        <ModalMedia>
+          <img height={260} src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+        <ModalHeader title="Modal with wizard" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an
+            animation.
+          </Text>
+        </ModalContent>
+      </ModalMediaLayout>
+    ];
+
+    const { activeStep, direction, next, back, isFirstStep, goToStep } = useWizard({
+      stepCount: transitionSteps.length
+    });
+
+    return (
+      <>
+        <Flex gap="large" style={{ paddingBlock: 40 }}>
+          <Button onClick={() => setShowCenterPop(true)}>Center pop</Button>
+          <Button onClick={() => setShowTransition(true)}>Transition</Button>
+        </Flex>
+
+        <Modal id="modal-media-center" show={showCenterPop} size="medium" onClose={() => setShowCenterPop(false)}>
+          <ModalMediaLayout>
+            <ModalMedia>
+              <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
+            </ModalMedia>
+            <ModalHeader title="Modal title" />
+            <ModalContent>
+              <Text type="text1" align="inherit" element="p">
+                The media modal is ideal for introducing new features or onboarding, the user can also{" "}
+                <Link inheritFontSize inlineText text="add a link" />.
+              </Text>
+            </ModalContent>
+          </ModalMediaLayout>
+          <ModalFooter
+            primaryButton={{ text: "Confirm", onClick: () => setShowCenterPop(false) }}
+            secondaryButton={{ text: "Cancel", onClick: () => setShowCenterPop(false) }}
+          />
+        </Modal>
+
+        <Modal id="modal-media-transition" show={showTransition} size="medium" onClose={() => setShowTransition(false)}>
+          <TransitionView activeStep={activeStep} direction={direction}>
+            {transitionSteps}
+          </TransitionView>
+          <ModalFooterWizard
+            activeStep={activeStep}
+            stepCount={transitionSteps.length}
+            onStepClick={goToStep}
+            primaryButton={{ text: "Next", onClick: next }}
+            secondaryButton={{ text: "Back", onClick: back, disabled: isFirstStep }}
+          />
+        </Modal>
+      </>
+    );
+  }
+};
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent.tsx b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent.tsx
new file mode 100644
index 0000000000..6dbc919d70
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent.tsx
@@ -0,0 +1,24 @@
+import React, { useMemo } from "react";
+import { RelatedComponent } from "vibe-storybook-components";
+import relatedComponentImage from "./assets/related-component.png";
+
+export const ModalMediaLayoutRelatedComponent = () => {
+  const component = useMemo(() => {
+    return (
+      <img
+        src={relatedComponentImage}
+        style={{ maxHeight: "100%", maxWidth: "100%" }}
+        alt="modal with media layout variation"
+      />
+    );
+  }, []);
+
+  return (
+    <RelatedComponent
+      component={component}
+      title="Media modal"
+      href="/?path=/docs/feedback-modal-new-media-modal"
+      description="Modal with highlighted media section, for catching the user’s attention."
+    />
+  );
+};
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/media-image.png b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/media-image.png
new file mode 100644
index 0000000000..838801c9cf
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/media-image.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-do.png b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-do.png
new file mode 100644
index 0000000000..8394ed580c
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-do.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-dont.png b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-dont.png
new file mode 100644
index 0000000000..8a65236f3c
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-dont.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/related-component.png b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/related-component.png
new file mode 100644
index 0000000000..9e5479fe31
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/related-component.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts
index 1534fd491b..205179396c 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts
+++ b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts
@@ -2,5 +2,11 @@ import { VibeComponentProps } from "../../../../types";
 import React from "react";
 
 export interface ModalSideBySideLayoutProps extends VibeComponentProps {
+  /**
+   * Layout children in the following order:
+   * 1. Header content
+   * 2. Main content
+   * 3. Media content
+   */
   children: React.ReactNode;
 }
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx
new file mode 100644
index 0000000000..ad23b65fb8
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx
@@ -0,0 +1,157 @@
+import { Meta } from "@storybook/blocks";
+import * as SideBySideModalStories from "./ModalSideBySideLayout.stories";
+import breakdownDo from "./assets/breakdown-do.png";
+import breakdownDont from "./assets/breakdown-dont.png";
+import columnsDo from "./assets/columns-do.png";
+import columnsDont from "./assets/columns-dont.png";
+import wizardDo from "./assets/wizard-do.png";
+import wizardDont from "./assets/wizard-dont.png";
+import styles from "../../../Modal/__stories__/Modal.stories.module.scss";
+import {
+  MODAL_BASIC_LAYOUT,
+  MODAL_MEDIA_LAYOUT,
+  TIPSEEN
+} from "../../../../../storybook/components/related-components/component-description-map";
+import { SideBySideModalTip } from "./ModalSideBySideLayout.stories.helpers";
+
+<Meta of={SideBySideModalStories} />
+
+# Side-by-side modal
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Use cases and examples](#use-cases-and-examples)
+- [Do's and dont's](do's-and-don'ts)
+- [Related components](#related-components)
+- [Feedback](#feedback)
+
+## Overview
+
+The Side-by-side Modal offers a layout with two distinct sections. The left side is reserved for providing information or inputs, like text fields or dropdown. The right side is reserved for visual media that supports the content on the left, like an image that adds context. This layout works best when users need to reference visual elements alongside textual information.
+
+<Canvas of={SideBySideModalStories.Overview} />
+
+## Props
+
+<PropsTable />
+
+## Usage
+
+<UsageGuidelines
+  guidelines={[
+    "This modal emphasis the balance between the textual inputs and visual media, so one doesn’t overpower the other.",
+    "Use when you need to support textual inputs with visual media, like a visual diagram or set of instructions.",
+    "Use when users need to compare textual information with visual media, like a preview or data visualization."
+  ]}
+/>
+
+<SideBySideModalTip />
+
+## Use cases and examples
+
+### Wizard footer
+
+When multi steps modal, use the "wizard footer". For more guidelines about the footer we recommend to check our <StorybookLink page="Components/Modal [New]/Footer">ModalFooter</StorybookLink> page.
+
+<Canvas of={SideBySideModalStories.Wizard} />
+
+### Header with extra icon button
+
+In case of a need of an icon button in the modal header, you can use our default header "Action slot".
+You can also use it as a <StorybookLink page="Buttons/MenuButton">menu button</StorybookLink> component.
+
+<Canvas of={SideBySideModalStories.HeaderWithExtraIconButton} />
+
+### Animation
+
+Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the element trigger animation, which can be replaced with a center pop animation if there's no specific trigger. Transition animation is used exclusively for wizard modals and cannot be changed or removed.
+
+<Canvas of={SideBySideModalStories.Animation} />
+
+## Do's and don'ts
+
+<ComponentRules
+  rules={[
+    {
+      componentContainerClassName: styles.largeComponentRule,
+      positive: {
+        component: (
+          <img
+            src={breakdownDo}
+            alt="modal without scroll and without much content in left side"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description: "Split up processes with several tasks into distinct steps using our wizard modal footer."
+      },
+      negative: {
+        component: (
+          <img
+            src={breakdownDont}
+            alt="modal with scroll and with a lot of content in left side"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description: "Don't use scrolling for side-by-side modals in case of several tasks."
+      }
+    },
+    {
+      componentContainerClassName: styles.largeComponentRule,
+      positive: {
+        component: (
+          <img
+            src={columnsDo}
+            alt="modal with side by side layout without media content in its right side"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description: "The right side of the modal is for media content. You can remove it if you don't need it."
+      },
+      negative: {
+        component: (
+          <img
+            src={columnsDont}
+            alt="modal with side by side layout with extra content in its right side"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description: (
+          <>
+            Don't turn this modal into a two-column grid. If you don't need an image, consider using the{" "}
+            <StorybookLink page="Components/Modal [New]/Basic modal">basic modal</StorybookLink>.
+          </>
+        )
+      }
+    },
+    {
+      componentContainerClassName: styles.largeComponentRule,
+      positive: {
+        component: (
+          <img
+            src={wizardDo}
+            alt="modal with a wizard footer with the last button enabled"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description:
+          "When using a wizard modal, allow the user to complete the process and close the modal by leaving the last CTA enabled. "
+      },
+      negative: {
+        component: (
+          <img
+            src={wizardDont}
+            alt="modal with a wizard footer with the last button disabled"
+            style={{ maxWidth: "100%" }}
+          />
+        ),
+        description:
+          "Don’t finish the Tipseen wizard process with a disabled CTA. Also, when in first step, make sure the “Back” button is disabled."
+      }
+    }
+  ]}
+/>
+
+## Related components
+
+<RelatedComponents componentsNames={[MODAL_MEDIA_LAYOUT, MODAL_BASIC_LAYOUT, TIPSEEN]} />
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx
new file mode 100644
index 0000000000..78e1aac6ff
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { StorybookLink, Tip } from "vibe-storybook-components";
+
+export const SideBySideModalTip = () => (
+  <div style={{ marginTop: 40 }}>
+    <Tip>
+      If your content is scrollable consider using{" "}
+      <StorybookLink page="Components/Modal [New]/Basic modal" size={StorybookLink.sizes.SMALL}>
+        Basic modal
+      </StorybookLink>
+      .
+    </Tip>
+  </div>
+);
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx
new file mode 100644
index 0000000000..4406f5f30d
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx
@@ -0,0 +1,378 @@
+import React, { useRef, useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Modal from "../../../Modal/Modal";
+import { createStoryMetaSettingsDecorator } from "../../../../../storybook";
+import { withOpenedModalPreview } from "../../../Modal/__stories__/Modal.stories.helpers";
+import ModalHeader from "../../../ModalHeader/ModalHeader";
+import ModalContent from "../../../ModalContent/ModalContent";
+import ModalSideBySideLayout from "../ModalSideBySideLayout";
+import ModalMedia from "../../ModalMedia";
+import mediaImage from "./assets/media-image.png";
+import useWizard from "../../../../../hooks/useWizard/useWizard";
+import TransitionView from "../../../../TransitionView/TransitionView";
+import ModalFooterWizard from "../../../footers/ModalFooterWizard/ModalFooterWizard";
+import TextField from "../../../../TextField/TextField";
+import Flex from "../../../../Flex/Flex";
+import Dropdown from "../../../../Dropdown/Dropdown";
+import FieldLabel from "../../../../FieldLabel/FieldLabel";
+import IconButton from "../../../../IconButton/IconButton";
+import { Menu } from "@vibe/icons";
+import ModalFooter from "../../../footers/ModalFooter/ModalFooter";
+import Button from "../../../../Button/Button";
+import Text from "../../../../Text/Text";
+import Link from "../../../../Link/Link";
+
+type Story = StoryObj<typeof Modal>;
+
+const metaSettings = createStoryMetaSettingsDecorator({
+  component: Modal
+});
+
+export default {
+  title: "Internal/Components/Modal [New]/Side by side modal",
+  component: Modal,
+  subcomponents: {
+    ModalSideBySideLayout,
+    ModalMedia,
+    ModalHeader,
+    ModalContent,
+    ModalFooter,
+    ModalFooterWizard,
+    TransitionView
+  },
+  argTypes: metaSettings.argTypes,
+  decorators: metaSettings.decorators,
+  tags: ["internal"]
+} satisfies Meta<typeof Modal>;
+
+export const Overview: Story = {
+  decorators: [
+    (Story, context) => withOpenedModalPreview(Story, { size: "medium", isDocsView: context.viewMode === "docs" })
+  ],
+  render: (args, { show, setShow, container }) => {
+    const steps = [
+      <ModalSideBySideLayout>
+        <ModalHeader
+          title="Side by side modal"
+          description={
+            <Text type="text1">
+              Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+            </Text>
+          }
+        />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+        <ModalMedia>
+          <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+      </ModalSideBySideLayout>,
+      <ModalSideBySideLayout>
+        <ModalHeader
+          title="Side by side modal"
+          description={
+            <Text type="text1">
+              Modal subtitle, can come with icon <Link inheritFontSize inlineText text="and link." />
+            </Text>
+          }
+        />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+        <ModalMedia>
+          <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+      </ModalSideBySideLayout>
+    ];
+
+    const { activeStep, direction, next, back, isFirstStep, goToStep } = useWizard({
+      stepCount: steps.length
+    });
+
+    return (
+      <Modal
+        id="modal-sbs"
+        show={show}
+        size="large"
+        onClose={() => setShow(false)}
+        style={{ height: 400 }}
+        container={container}
+        {...args}
+      >
+        <TransitionView activeStep={activeStep} direction={direction}>
+          {steps}
+        </TransitionView>
+        <ModalFooterWizard
+          activeStep={activeStep}
+          stepCount={steps.length}
+          onStepClick={goToStep}
+          primaryButton={{ text: "Next", onClick: next }}
+          secondaryButton={{ text: "Back", onClick: back, disabled: isFirstStep }}
+        />
+      </Modal>
+    );
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
+};
+
+export const Wizard: Story = {
+  decorators: [
+    (Story, context) => withOpenedModalPreview(Story, { size: "medium", isDocsView: context.viewMode === "docs" })
+  ],
+  render: (_, { show, setShow, container }) => {
+    const dropdownOptions = [
+      {
+        label: "English",
+        value: "en"
+      },
+      {
+        label: "Hebrew",
+        value: "he"
+      }
+    ];
+
+    const steps = [
+      <ModalSideBySideLayout>
+        <ModalHeader title="Modal with wizard" description="Fill in the details" />
+        <ModalContent>
+          <Flex direction="column" gap="medium">
+            <TextField title="Full name" placeholder="John Dow" />
+            <TextField title="Email" placeholder="Email@monday.com" />
+          </Flex>
+        </ModalContent>
+        <ModalMedia>
+          <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+      </ModalSideBySideLayout>,
+      <ModalSideBySideLayout>
+        <ModalHeader title="Modal with wizard" description="Update your settings defenitions" />
+        <ModalContent>
+          <Flex direction="column" gap="medium" align="stretch">
+            <TextField title="Fill address" placeholder="City, street, number" />
+            <Flex direction="column" align="stretch">
+              <FieldLabel labelText="Language preferences" />
+              <Dropdown
+                insideOverflowWithTransformContainer
+                size="small"
+                placeholder={dropdownOptions[0].label}
+                options={dropdownOptions}
+              />
+            </Flex>
+          </Flex>
+        </ModalContent>
+        <ModalMedia>
+          <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+      </ModalSideBySideLayout>
+    ];
+
+    const { activeStep, direction, next, back, isFirstStep, goToStep } = useWizard({
+      stepCount: steps.length
+    });
+
+    return (
+      <Modal
+        id="modal-sbs"
+        show={show}
+        size="large"
+        onClose={() => setShow(false)}
+        container={container}
+        style={{ height: 400 }}
+      >
+        <TransitionView activeStep={activeStep} direction={direction}>
+          {steps}
+        </TransitionView>
+        <ModalFooterWizard
+          activeStep={activeStep}
+          stepCount={steps.length}
+          onStepClick={goToStep}
+          primaryButton={{ text: "Next", onClick: next }}
+          secondaryButton={{ text: "Back", onClick: back, disabled: isFirstStep }}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const HeaderWithExtraIconButton: Story = {
+  decorators: [
+    (Story, context) => withOpenedModalPreview(Story, { size: "medium", isDocsView: context.viewMode === "docs" })
+  ],
+  render: (_, { show, setShow, container }) => {
+    return (
+      <Modal
+        id="modal-sbs"
+        show={show}
+        renderHeaderAction={<IconButton icon={Menu} size="small" kind="tertiary" ariaLabel="Open Menu" />}
+        size="large"
+        onClose={() => setShow(false)}
+        container={container}
+        style={{ height: 400 }}
+      >
+        <ModalSideBySideLayout>
+          <ModalHeader title="Modal title" />
+          <ModalContent>
+            <Text type="text1" align="inherit" element="p">
+              Modal content will appear here, you can custom it however you want, according to the user needs. Please
+              make sure that the content is clear for completing the relevant task.
+            </Text>
+          </ModalContent>
+          <ModalMedia>
+            <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+          </ModalMedia>
+        </ModalSideBySideLayout>
+        <ModalFooter
+          primaryButton={{ text: "Confirm", onClick: () => setShow(false) }}
+          secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }}
+        />
+      </Modal>
+    );
+  }
+};
+
+export const Animation: Story = {
+  render: () => {
+    const [showAnchor, setShowAnchor] = useState(false);
+    const [showCenterPop, setShowCenterPop] = useState(false);
+    const [showTransition, setShowTransition] = useState(false);
+
+    const anchorButtonRef = useRef<HTMLButtonElement>(null);
+
+    const transitionSteps = [
+      <ModalSideBySideLayout>
+        <ModalHeader title="Modal title" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+        <ModalMedia>
+          <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+      </ModalSideBySideLayout>,
+      <ModalSideBySideLayout>
+        <ModalHeader title="Modal title" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+        <ModalMedia>
+          <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+      </ModalSideBySideLayout>,
+      <ModalSideBySideLayout>
+        <ModalHeader title="Modal title" />
+        <ModalContent>
+          <Text type="text1" align="inherit" element="p">
+            Modal content will appear here, you can custom it however you want, according to the user needs. Please make
+            sure that the content is clear for completing the relevant task.
+          </Text>
+        </ModalContent>
+        <ModalMedia>
+          <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+        </ModalMedia>
+      </ModalSideBySideLayout>
+    ];
+
+    const { activeStep, direction, next, back, isFirstStep, goToStep } = useWizard({
+      stepCount: transitionSteps.length
+    });
+
+    return (
+      <>
+        <Flex gap="large" style={{ paddingBlock: 40 }}>
+          <Button ref={anchorButtonRef} onClick={() => setShowAnchor(true)}>
+            Anchor
+          </Button>
+          <Button onClick={() => setShowCenterPop(true)}>Center pop</Button>
+          <Button onClick={() => setShowTransition(true)}>Transition</Button>
+        </Flex>
+
+        <Modal
+          id="modal-sbs-anchor"
+          show={showAnchor}
+          anchorElementRef={anchorButtonRef}
+          size="large"
+          onClose={() => setShowAnchor(false)}
+          style={{ height: 400 }}
+        >
+          <ModalSideBySideLayout>
+            <ModalHeader title="Modal title" />
+            <ModalContent>
+              <Text type="text1" align="inherit" element="p">
+                Modal content will appear here, you can custom it however you want, according to the user needs. Please
+                make sure that the content is clear for completing the relevant task.
+              </Text>
+            </ModalContent>
+            <ModalMedia>
+              <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+            </ModalMedia>
+          </ModalSideBySideLayout>
+          <ModalFooter
+            primaryButton={{ text: "Confirm", onClick: () => setShowAnchor(false) }}
+            secondaryButton={{ text: "Cancel", onClick: () => setShowAnchor(false) }}
+          />
+        </Modal>
+
+        <Modal
+          id="modal-sbs-center"
+          show={showCenterPop}
+          size="large"
+          onClose={() => setShowCenterPop(false)}
+          style={{ height: 400 }}
+        >
+          <ModalSideBySideLayout>
+            <ModalHeader title="Modal title" />
+            <ModalContent>
+              <Text type="text1" align="inherit" element="p">
+                Modal content will appear here, you can custom it however you want, according to the user needs. Please
+                make sure that the content is clear for completing the relevant task.
+              </Text>
+            </ModalContent>
+            <ModalMedia>
+              <img src={mediaImage} alt="side by side placeholder" style={{ width: "100%", objectFit: "cover" }} />
+            </ModalMedia>
+          </ModalSideBySideLayout>
+          <ModalFooter
+            primaryButton={{ text: "Confirm", onClick: () => setShowCenterPop(false) }}
+            secondaryButton={{ text: "Cancel", onClick: () => setShowCenterPop(false) }}
+          />
+        </Modal>
+
+        <Modal
+          id="modal-sbs-transition"
+          show={showTransition}
+          size="large"
+          onClose={() => setShowTransition(false)}
+          style={{ height: 400 }}
+        >
+          <TransitionView activeStep={activeStep} direction={direction}>
+            {transitionSteps}
+          </TransitionView>
+          <ModalFooterWizard
+            activeStep={activeStep}
+            stepCount={transitionSteps.length}
+            onStepClick={goToStep}
+            primaryButton={{ text: "Next", onClick: next }}
+            secondaryButton={{ text: "Back", onClick: back, disabled: isFirstStep }}
+          />
+        </Modal>
+      </>
+    );
+  }
+};
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent.tsx b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent.tsx
new file mode 100644
index 0000000000..33bd78654f
--- /dev/null
+++ b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent.tsx
@@ -0,0 +1,24 @@
+import React, { useMemo } from "react";
+import { RelatedComponent } from "vibe-storybook-components";
+import relatedComponentImage from "./assets/related-component.png";
+
+export const ModalSideBySideLayoutRelatedComponent = () => {
+  const component = useMemo(() => {
+    return (
+      <img
+        src={relatedComponentImage}
+        style={{ maxHeight: "100%", maxWidth: "100%" }}
+        alt="modal with side by side layout variation"
+      />
+    );
+  }, []);
+
+  return (
+    <RelatedComponent
+      component={component}
+      title="Side by side modal"
+      href="/?path=/docs/feedback-modal-new-side-by-side-modal"
+      description="Two-section modal layout, ideal for referencing visuals alongside text."
+    />
+  );
+};
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-do.png b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-do.png
new file mode 100644
index 0000000000..31c8267988
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-do.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-dont.png b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-dont.png
new file mode 100644
index 0000000000..ff93a91e29
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-dont.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-do.png b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-do.png
new file mode 100644
index 0000000000..694392b327
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-do.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-dont.png b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-dont.png
new file mode 100644
index 0000000000..97197cecb6
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-dont.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/media-image.png b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/media-image.png
new file mode 100644
index 0000000000..9981ce2496
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/media-image.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/related-component.png b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/related-component.png
new file mode 100644
index 0000000000..bb2f2af2b1
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/related-component.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-do.png b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-do.png
new file mode 100644
index 0000000000..84b83a886f
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-do.png differ
diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-dont.png b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-dont.png
new file mode 100644
index 0000000000..fca73f6772
Binary files /dev/null and b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-dont.png differ
diff --git a/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx b/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx
index 73b8431ddb..7ff6e4ea77 100644
--- a/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx
+++ b/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx
@@ -47,6 +47,7 @@ const TableRowMenu = forwardRef(
             style={{ top: menuButtonPosition }}
             onMouseEnter={onMouseOverRowMenu}
             onMouseLeave={onMouseLeaveRowMenu}
+            data-row-menu-id={rowId}
           >
             <MenuButton
               id={id}
diff --git a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx
index d1455dc05d..b5e60fcf69 100644
--- a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx
+++ b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentType, forwardRef, useCallback, useEffect } from "react";
+import React, { ComponentType, forwardRef, useCallback, useEffect, useMemo } from "react";
 import { VibeComponentProps } from "../../../types";
 import TableBody from "../TableBody/TableBody";
 import styles from "./TableVirtualizedBody.module.scss";
@@ -101,6 +101,19 @@ const TableVirtualizedBody = forwardRef(
       if (!virtualizedWithHeader) markTableAsVirtualized();
     }, [markTableAsVirtualized, virtualizedWithHeader]);
 
+    const memoizedInnerElementType = useMemo(
+      () =>
+        virtualizedWithHeader
+          ? forwardRef(({ children, ...rest }: any, ref: React.Ref<HTMLDivElement>) => (
+              <div ref={ref} {...rest}>
+                {headerRenderer!(columns!)}
+                {children}
+              </div>
+            ))
+          : undefined,
+      [virtualizedWithHeader, headerRenderer, columns]
+    );
+
     return (
       <TableBody
         className={cx(
@@ -126,16 +139,7 @@ const TableVirtualizedBody = forwardRef(
                 outerRef={element => {
                   virtualizedListRef.current = element;
                 }}
-                innerElementType={
-                  virtualizedWithHeader
-                    ? forwardRef(({ children, ...rest }, ref) => (
-                        <div ref={ref} {...rest}>
-                          {headerRenderer(columns)}
-                          {children}
-                        </div>
-                      ))
-                    : undefined
-                }
+                innerElementType={memoizedInnerElementType}
               >
                 {itemRenderer}
               </List>
diff --git a/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx b/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx
index 04469afb34..6b6d8e8162 100644
--- a/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx
+++ b/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx
@@ -7,6 +7,7 @@ export const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderPr
   const { tableRootRef, hoveredRowRef, isMenuOpen, resetHoveredRow, setHoveredRowRef, setIsMenuOpen } = value;
   const rowMouseLeaveTimeoutId = useRef<ReturnType<typeof setTimeout>>(null);
   const [menuButtonPosition, setMenuButtonPosition] = useState(0);
+  const hasMenuRef = useRef<boolean | null>(null);
 
   const resetTimeout = useCallback(() => {
     clearTimeout(rowMouseLeaveTimeoutId.current);
@@ -15,12 +16,18 @@ export const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderPr
 
   const onMouseOverRow = useCallback(
     (rowRef: React.RefObject<HTMLDivElement>) => {
-      if (isMenuOpen || hoveredRowRef?.current === rowRef.current) return;
+      if (hasMenuRef.current === false || isMenuOpen || hoveredRowRef?.current === rowRef.current) return;
+
       resetTimeout();
       setHoveredRowRef(rowRef);
       const tableRootTop = tableRootRef.current.getBoundingClientRect().top;
       const rowTop = rowRef.current.getBoundingClientRect().top;
       setMenuButtonPosition(rowTop - tableRootTop);
+      if (hasMenuRef.current === null) {
+        requestAnimationFrame(() => {
+          hasMenuRef.current = !!document?.querySelector(`[data-row-menu-id]`);
+        });
+      }
     },
     [isMenuOpen, hoveredRowRef, resetTimeout, setHoveredRowRef, tableRootRef]
   );
diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx
index 4776080fa8..b3f7f1363b 100644
--- a/packages/core/src/components/Tooltip/Tooltip.tsx
+++ b/packages/core/src/components/Tooltip/Tooltip.tsx
@@ -129,6 +129,10 @@ interface TooltipBaseProps extends VibeComponentProps {
    * The icon of the tooltip next to the title
    */
   icon?: SubIcon;
+  /**
+   * Sets the max width of the Tooltip, defaults to 240px
+   */
+  maxWidth?: number;
 }
 // When last tooltip was shown in the last 1.5 second - the next tooltip will be shown immediately
 const IMMEDIATE_SHOW_THRESHOLD_MS = 1500;
@@ -175,7 +179,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
   }
 
   renderTooltipContent() {
-    const { theme, content, className, style, title, image, icon, id, childId } = this.props;
+    const { theme, content, className, style, maxWidth, title, image, icon, id, childId } = this.props;
     if (!content) {
       // don't render empty tooltip
       return null;
@@ -197,7 +201,10 @@ export default class Tooltip extends PureComponent<TooltipProps> {
     }
 
     return (
-      <div style={style} className={cx(styles.tooltip, getStyle(styles, camelCase(theme)), className)}>
+      <div
+        style={maxWidth ? ({ ...style, "--tooltip-max-width": `${maxWidth}px` } as CSSProperties) : style}
+        className={cx(styles.tooltip, getStyle(styles, camelCase(theme)), className)}
+      >
         {image && <img className={styles.image} src={image} alt="" />}
         <div id={id || `${childId}-tooltip`} className={cx(styles.content)}>
           {title && (
diff --git a/packages/core/src/components/TransitionView/TransitionView.tsx b/packages/core/src/components/TransitionView/TransitionView.tsx
index 8530152fc8..e0e085d7e5 100644
--- a/packages/core/src/components/TransitionView/TransitionView.tsx
+++ b/packages/core/src/components/TransitionView/TransitionView.tsx
@@ -6,19 +6,23 @@ import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./TransitionView.module.scss";
 import SlideTransition from "../SlideTransition/SlideTransition";
+import useMergeRef from "../../hooks/useMergeRef";
 
 const TransitionView = forwardRef(
   (
     { activeStep, direction, height, id, className, "data-testid": dataTestId, children }: TransitionViewProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
+    const componentRef = useRef<HTMLDivElement>(null);
+    const mergedRef = useMergeRef(ref, componentRef);
     const slideTransitionRef = useRef<HTMLDivElement>(null);
-    const [contentHeight, setContentHeight] = useState<number>(height);
-    const slideTransitionHeight = height || contentHeight > 0 ? "100%" : "auto";
+    const [contentHeight, setContentHeight] = useState<number | "100%">(height);
+    const slideTransitionHeight = height || contentHeight === "100%" || contentHeight > 0 ? "100%" : "auto";
 
     useEffect(() => {
       if (!slideTransitionRef.current) return;
-      setContentHeight(slideTransitionRef.current.scrollHeight);
+      // if parent has definite height, stretch component to fill it, otherwise use content height
+      setContentHeight(componentRef.current.clientHeight > 0 ? "100%" : slideTransitionRef.current.scrollHeight);
     }, [height, slideTransitionRef]);
 
     return (
@@ -26,7 +30,7 @@ const TransitionView = forwardRef(
         id={id}
         className={cx(styles.slideshow, className)}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TRANSITION_VIEW, id)}
-        ref={ref}
+        ref={mergedRef}
         style={{ height: height ?? contentHeight }}
       >
         <AnimatePresence initial={false} custom={direction}>
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index 9163f39e64..402992274d 100644
--- a/packages/core/src/components/index.ts
+++ b/packages/core/src/components/index.ts
@@ -40,7 +40,7 @@ export * from "./ListTitle";
 export * from "./Loader";
 export * from "./Menu";
 export * from "./MenuButton";
-export * from "./Modal";
+export * from "./LegacyModal";
 export * from "./MultiStepIndicator";
 export * from "./ProgressBars";
 export * from "./RadioButton";
diff --git a/packages/core/src/storybook/components/related-components/component-description-map.tsx b/packages/core/src/storybook/components/related-components/component-description-map.tsx
index 6f218e0c5c..74029fd604 100644
--- a/packages/core/src/storybook/components/related-components/component-description-map.tsx
+++ b/packages/core/src/storybook/components/related-components/component-description-map.tsx
@@ -59,6 +59,9 @@ import { BoxDescription } from "./descriptions/box-description";
 import { TableDescription } from "./descriptions/table-description";
 import { VirtualizedGridDescription } from "./descriptions/virtualized-grid-description/virtualized-grid-description";
 import { MenuGridItemDescription } from "./descriptions/menu-grid-item-description";
+import { ModalMediaLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent";
+import { ModalSideBySideLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent";
+import { ModalBasicLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent";
 
 export const SPLIT_BUTTON = "split-button";
 export const BUTTON_GROUP = "button-group";
@@ -81,6 +84,9 @@ export const TOAST = "toast";
 export const BADGE = "badge";
 export const MULTI_STEP_INDICATOR = "wizard";
 export const TIPSEEN = "tipseen";
+export const MODAL_BASIC_LAYOUT = "modal-basic-layout";
+export const MODAL_SIDE_BY_SIDE_LAYOUT = "modal-side-by-side-layout";
+export const MODAL_MEDIA_LAYOUT = "modal-media-layout";
 export const TEXT_FIELD = "text-field";
 export const SEARCH = "search";
 export const COMBOBOX = "combobox";
@@ -153,6 +159,9 @@ const COMPONENTS_DESCRIPTIONS_ENTRIES: [string, JSX.Element][] = [
   [STEPS, <StepsDescription />],
   [SPINNER, <SpinnerDescription />],
   [SKELETON, <SkeletonDescription />],
+  [MODAL_BASIC_LAYOUT, <ModalBasicLayoutRelatedComponent />],
+  [MODAL_SIDE_BY_SIDE_LAYOUT, <ModalSideBySideLayoutRelatedComponent />],
+  [MODAL_MEDIA_LAYOUT, <ModalMediaLayoutRelatedComponent />],
   [SLIDER, <SliderDescription />],
   [ICON_BUTTON, <IconButtonDescription />],
   [MENU_BUTTON, <MenuButtonDescription />],
diff --git a/packages/core/src/storybook/patterns/dropdown-in-modals/dropdown-in-modals.stories.tsx b/packages/core/src/storybook/patterns/dropdown-in-modals/dropdown-in-modals.stories.tsx
index e6dc4ebfac..60e64eb346 100644
--- a/packages/core/src/storybook/patterns/dropdown-in-modals/dropdown-in-modals.stories.tsx
+++ b/packages/core/src/storybook/patterns/dropdown-in-modals/dropdown-in-modals.stories.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useState, useMemo } from "react";
-import ModalContent from "../../../components/Modal/ModalContent/ModalContent";
+import ModalContent from "../../../components/LegacyModal/LegacyModalContent/LegacyModalContent";
 import Dropdown from "../../../components/Dropdown/Dropdown";
 import { DropdownOption } from "../../../components/Dropdown/Dropdown.types";
-import Modal from "../../../components/Modal/Modal";
+import Modal from "../../../components/LegacyModal/LegacyModal";
 import ModalExampleContent from "./ModalExampleContent";
 import Box from "../../../components/Box/Box";
 import Flex from "../../../components/Flex/Flex";
diff --git a/packages/core/webpack/published-ts-components.js b/packages/core/webpack/published-ts-components.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index aeb8e5201b..ce370104f5 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.1.0...@vibe/icons@1.2.0) (2024-12-12)
+
+
+### Features
+
+* **Move:** new icon ([#2646](https://github.com/mondaycom/vibe/issues/2646)) ([12b5cd1](https://github.com/mondaycom/vibe/commit/12b5cd1f72e9546c9b27ec9a237f4e9a51143a88))
+
+
+
+
+
 # [1.1.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.0.0...@vibe/icons@1.1.0) (2024-12-04)
 
 
diff --git a/packages/icons/package.json b/packages/icons/package.json
index e8d7bd23ad..8960f365f0 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vibe/icons",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Vibe's Icon Library",
   "repository": {
     "type": "git",
diff --git a/packages/icons/src/iconsMetaData.ts b/packages/icons/src/iconsMetaData.ts
index 5eecd2dccf..40b07e753e 100644
--- a/packages/icons/src/iconsMetaData.ts
+++ b/packages/icons/src/iconsMetaData.ts
@@ -12,6 +12,13 @@ type Icon = {
 export default [
   // DO NOT REMOVE THIS FOLLOWING LINE!
   // plop_marker:icon_metadata
+  {
+      name: "Move",
+      file: "Move.svg",
+      description: "Use when you need to indicate a reorder or move items in a list",
+      tags: "Reorder, Move, Change, Arrow, Expand"
+  },
+
   {
       name: "Downgrade",
       file: "Downgrade.svg",
diff --git a/packages/icons/src/svg/Move.svg b/packages/icons/src/svg/Move.svg
new file mode 100644
index 0000000000..e5b287298a
--- /dev/null
+++ b/packages/icons/src/svg/Move.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
+  <path fill-rule="evenodd" d="M9.442 2.24a.77.77 0 0 1 1.116 0l4.21 4.363a.84.84 0 0 1 0 1.157.77.77 0 0 1-1.116 0L10 3.975 6.348 7.76a.77.77 0 0 1-1.117 0 .84.84 0 0 1 0-1.157l4.21-4.363Zm-3.094 10L10 16.025l3.652-3.785a.77.77 0 0 1 1.117 0 .84.84 0 0 1 0 1.157l-4.21 4.363a.77.77 0 0 1-1.117 0l-4.21-4.363a.84.84 0 0 1 0-1.157.77.77 0 0 1 1.116 0Z" clip-rule="evenodd"/>
+</svg>
diff --git a/yarn.lock b/yarn.lock
index 8574f458b9..bef6b4acda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17786,10 +17786,10 @@ react-select@3.1.0:
     react-input-autosize "^2.2.2"
     react-transition-group "^4.3.0"
 
-"react-select@npm:react-select-module@^3.2.5":
-  version "3.2.5"
-  resolved "https://registry.npmjs.org/react-select-module/-/react-select-module-3.2.5.tgz#98866bb0a8db3969587492ef35b62e0178115373"
-  integrity sha512-Nqb6fhWlEtsvIPWMcN7VLKn50GqqFblaS0d6b37oRfp19vJkCJgnLVFQISirvSrTe0soECQpJfAAqw8K8QyaGQ==
+"react-select@npm:react-select-module@^3.2.6":
+  version "3.2.6"
+  resolved "https://registry.npmjs.org/react-select-module/-/react-select-module-3.2.6.tgz#f21939951d706b64720233b22e872ede88caa01b"
+  integrity sha512-Q8cp+tjtuDWaX48agmJZ5urczp5YDVh8KDkGe+FmkMxjOvdz0PNnjcEvZP6fon7T5x5BFNvoDQnDUFtVRvtiKg==
   dependencies:
     "@babel/runtime" "^7.4.4"
     "@emotion/cache" "^10.0.9"
@@ -19383,16 +19383,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -19487,7 +19478,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -19501,13 +19492,6 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -21330,7 +21314,7 @@ workerpool@6.2.1:
   resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -21348,15 +21332,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"