diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.md
index aff968a3d26..3020ac4735b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/demos.md
@@ -7,7 +7,7 @@ SimpleDrawerExample,
 FullDrawerExample,
 DrawerCallbackExample,
 DrawerCustomTriggerExample,
-DrawerNoAnimationNoSpacing
+DrawerNoAnimationNoSpacing,
 } from 'Docs/uilib/components/drawer/Examples'
 
 ## Demos
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/Examples.tsx
new file mode 100644
index 00000000000..7152ceaf5ef
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/Examples.tsx
@@ -0,0 +1,68 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+
+export const DrawerScrollViewSetup = () => (
+  <ComponentBox useRender data-visual-test="drawer-scroll-view">
+    {
+      /* jsx */ `
+const DrawerMock = () => {
+  const scrollRef = React.useRef()
+  const innerRef = React.useRef()
+  const [errorMessage, setErrorMessage] = React.useState(null)
+
+  const message = errorMessage
+    ? errorMessage
+    : 'Yes, the "dnb-scroll-view" is used!'
+
+  return (
+    <Drawer
+      contentRef={innerRef}
+      scrollRef={scrollRef}
+      onOpen={() => {
+        const innerOverflowY = window.getComputedStyle(
+          innerRef.current
+        ).overflowY
+
+        const contentElem = scrollRef.current.querySelector(
+          '.dnb-drawer__content'
+        )
+        const contentOverflowY =
+          window.getComputedStyle(contentElem)?.overflowY
+
+        const scxrollOverflowY = window.getComputedStyle(
+          scrollRef.current
+        ).overflowY
+
+        if (contentOverflowY !== 'visible') {
+          setErrorMessage(
+            '.dnb-drawer__content was "'+contentOverflowY+'" and not "visible"'
+          )
+        } else if (innerOverflowY !== 'visible') {
+          setErrorMessage(
+            '.dnb-drawer__inner was "'+innerOverflowY+'" and not "visible"'
+          )
+        } else if (scxrollOverflowY !== 'auto') {
+          setErrorMessage('.dnb-scroll-view was not "auto"')
+        }
+      }}
+    >
+      <Drawer.Body>
+        <div style={{ height: '100rem' }}>
+          <div className="drawer-scroll-view">
+            <P size="x-large">{message}</P>
+          </div>
+        </div>
+      </Drawer.Body>
+    </Drawer>
+  )
+}
+render(<DrawerMock />)
+`
+    }
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/hidden-tests.md b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/hidden-tests.md
new file mode 100644
index 00000000000..6eba4d2c4a1
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/hidden-tests.md
@@ -0,0 +1,9 @@
+---
+draft: true
+---
+
+import {
+DrawerScrollViewSetup,
+} from 'Docs/uilib/components/drawer/visual-tests/Examples'
+
+<DrawerScrollViewSetup />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/Examples.js
index 2a8e251e9cd..96f5dbbb103 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/Examples.js
@@ -6,123 +6,6 @@
 import React from 'react'
 import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
 
-export const ModalExampleDrawerHeader = () => (
-  <ComponentBox data-visual-test="modal-drawer-header">
-    {
-      /* jsx */ `
-<Modal
-  mode="drawer"
-  trigger_text="Open Drawer"
->
-  <Modal.Bar>
-    <Breadcrumb />
-  </Modal.Bar>
-  <Modal.Header>
-    <H1 size="x-large" bottom>
-      Title
-    </H1>
-    <P bottom>This is a lorem ipsum dolor</P>
-    <Button bottom size="large" right>
-      Lorem ipsum
-    </Button>
-    <Button bottom size="large" variant="secondary">
-      Dolor sit
-    </Button>
-    <FormStatus state="info">This is a lorem ipsum dolor</FormStatus>
-    <Tabs
-      id="unique-linked-id"
-      data={[
-        {
-          title: 'One',
-          key: 'one',
-        },
-        {
-          title: 'Two',
-          key: 'two',
-        },
-      ]}
-    />
-  </Modal.Header>
-  <Modal.Content>
-    <Tabs.Content id="unique-linked-id">
-      {({ title }) => {
-        return (
-          <H2>{title}</H2>
-        )
-      }}
-    </Tabs.Content>
-    <P top>
-      Elementum eu suspendisse sit platea elit porttitor
-      magna laoreet ad ultrices tempus urna curae parturient
-      conubia quisque viverra eget vestibulum neque pulvinar
-      semper vulputate id dis varius pellentesque nunc
-      egestas risus amet mus aptent luctus imperdiet netus
-      natoque cubilia mattis nostra proin ornare scelerisque
-      sodales faucibus placerat sem bibendum pretium rutrum
-      vitae sociis ligula inceptos morbi quam mi sed pharetra
-      fermentum tortor ullamcorper ipsum tellus eros euismod
-      volutpat nisl dui lectus fames suscipit phasellus
-      praesent justo mollis montes velit taciti gravida lacus
-      commodo senectus feugiat lorem etiam consequat
-      penatibus cum hendrerit accumsan orci potenti purus
-      nulla interdum metus sollicitudin magnis libero sapien
-      habitant non class ridiculus consectetur congue nec
-      litora sociosqu aliquet felis in rhoncus nascetur odio
-      ultricies nullam a iaculis massa nisi ante nam cras
-      aenean erat facilisi vivamus ut cursus auctor arcu
-      lobortis himenaeos dictum habitasse tristique mauris at
-      blandit sagittis nibh dignissim condimentum per integer
-      duis lacinia malesuada est adipiscing maecenas donec
-      eleifend turpis dictumst dapibus tempor fusce aliquam
-      torquent hac ac curabitur venenatis et tincidunt augue
-      porta vehicula enim facilisis posuere primis molestie
-      convallis diam vel fringilla dolor leo quis diam cursus
-      massa sapien tristique cum senectus sed tortor natoque
-      amet hendrerit ut fusce ipsum quis
-    </P>
-  </Modal.Content>
-</Modal>
-	`
-    }
-  </ComponentBox>
-)
-
-export const ModalExampleDrawerBasic = () => (
-  <ComponentBox data-visual-test="modal-drawer-basic">
-    {
-      /* jsx */ `
-<Modal
-  mode="drawer"
-  title="Drawer Title"
-  trigger_text="Open Drawer"
->
-  <Modal.Content>
-    <P top>This is a left aligned Drawer content.</P>
-  </Modal.Content>
-</Modal>
-	`
-    }
-  </ComponentBox>
-)
-export const DrawerWithoutSpacing = () => (
-  <ComponentBox data-visual-test="drawer-no-spacing">
-    {
-      /* jsx */ `
-<Modal
-  mode="drawer"
-  title="Drawer without spacing"
-  trigger_text="Open Drawer with no spacing"
-  spacing={false}
->
-  <Modal.Content>
-    <P top>This is a left aligned Drawer content.</P>
-  </Modal.Content>
-</Modal>
-  `
-    }
-  </ComponentBox>
-)
-
 export const ModalExampleDefault = () => (
   <ComponentBox data-visual-test="modal-trigger-default">
     {
@@ -173,18 +56,3 @@ export const ModalExampleFullscreen = () => (
     }
   </ComponentBox>
 )
-
-export const DrawerExamplePlacementLeft = () => (
-  <ComponentBox data-visual-test="modal-drawer-leftsided">
-    {
-      /* jsx */ `
-<Modal
-  mode="drawer"
-  title="Modal title"
-  container_placement="left"
-  modal_content="This is the modal text. Triggered by a tertiary button."
-/>
-	`
-    }
-  </ComponentBox>
-)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/hidden-tests.md b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/hidden-tests.md
index f4a22e64527..78facf2a7fe 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/hidden-tests.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/visual-tests/hidden-tests.md
@@ -3,43 +3,13 @@ draft: true
 ---
 
 import {
-ModalExampleDrawerHeader,
-ModalExampleDrawerBasic,
-DrawerWithoutSpacing,
 ModalExampleDefault,
 ModalExampleHelpButton,
 ModalExampleFullscreen,
-DrawerExamplePlacementLeft,
 } from 'Docs/uilib/components/modal/visual-tests/Examples'
 
-## Demos
-
-### Basic drawer
-
-<ModalExampleDrawerBasic />
-
-### Drawer with navigation
-
-<ModalExampleDrawerHeader />
-
-### Drawer without spacing
-
-<DrawerWithoutSpacing />
-
-## Drawer with container placement left
-
-<DrawerExamplePlacementLeft />
-
-### Triggered by the help button
-
 <ModalExampleDefault />
 
-### Help button and suffix
-
-Most of the components do have a `suffix` property you can make use of.
-
 <ModalExampleHelpButton />
 
-### Fullscreen Modal, triggered by a tertiary button
-
 <ModalExampleFullscreen />
diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/Dialog.test.tsx b/packages/dnb-eufemia/src/components/dialog/__tests__/Dialog.test.tsx
index 8766175e9a9..fbcf9d1559d 100644
--- a/packages/dnb-eufemia/src/components/dialog/__tests__/Dialog.test.tsx
+++ b/packages/dnb-eufemia/src/components/dialog/__tests__/Dialog.test.tsx
@@ -11,6 +11,7 @@ import {
   attachToBody,
 } from '../../../core/jest/jestSetup'
 import * as helpers from '../../../shared/helpers'
+import { render } from '@testing-library/react'
 
 const props = fakeProps(require.resolve('../Dialog.tsx'), {
   all: true,
@@ -93,6 +94,29 @@ describe('Dialog', () => {
     expect(on_close).toHaveBeenCalledTimes(1)
   })
 
+  it('will accept custom refs', () => {
+    const contentRef = React.createRef<HTMLElement>()
+    const scrollRef = React.createRef<HTMLElement>()
+
+    const MockComponent = () => {
+      return (
+        <Dialog
+          openState
+          noAnimation
+          contentRef={contentRef}
+          scrollRef={scrollRef}
+        >
+          content
+        </Dialog>
+      )
+    }
+
+    render(<MockComponent />)
+
+    expect(contentRef.current).toBeTruthy()
+    expect(scrollRef.current).toBeTruthy()
+  })
+
   it('will use props from global context', () => {
     const contextTitle = 'Custom title'
     const Comp = mount(
diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
index 36166ba5800..15fb20b7da4 100644
--- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -1354,7 +1354,8 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
 `;
 
 exports[`Dialog scss have to match snapshot 1`] = `
-"/*
+"@charset \\"UTF-8\\";
+/*
 * DNB Drawer
 *
 */
@@ -2153,11 +2154,15 @@ button.dnb-button::-moz-focus-inner {
     display: flex;
     flex-direction: column;
     z-index: 10;
-    /** Sets the color on scroll overflow (at the bottom) */
-    background-color: var(--modal-background-color, transparent);
+    /** 
+      NB: Do not use \\"overflow-x: hidden;\\" in here,
+      (overflowing one direction, will influence the other – we can't just have one at a time) 
+      To make the Drawer scroll, we use .dnb-scroll-view
+    */
     width: 100%;
     height: 100%;
-    overflow-x: hidden; }
+    /** Sets the color on scroll overflow (at the bottom) */
+    background-color: var(--modal-background-color, transparent); }
   .dnb-drawer--spacing .dnb-drawer__inner {
     padding: 0 var(--drawer-spacing) 0; }
     @media screen and (min-width: 72em) {
@@ -2264,8 +2269,8 @@ button.dnb-button::-moz-focus-inner {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
-    padding: 0 var(--drawer-spacing); }
+    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1 * 1.75);
+    padding: 0 calc(var(--drawer-spacing) * 1.5); }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {
diff --git a/packages/dnb-eufemia/src/components/drawer/Drawer.tsx b/packages/dnb-eufemia/src/components/drawer/Drawer.tsx
index cd599078418..040087e3ba0 100644
--- a/packages/dnb-eufemia/src/components/drawer/Drawer.tsx
+++ b/packages/dnb-eufemia/src/components/drawer/Drawer.tsx
@@ -49,6 +49,8 @@ function Drawer({
   triggerAttributes,
   overlayClass,
   contentClass,
+  contentRef,
+  scrollRef,
 
   top,
   bottom,
@@ -92,6 +94,8 @@ function Drawer({
     trigger,
     triggerAttributes,
     overlayClass,
+    contentRef,
+    scrollRef,
     top,
     bottom,
     left,
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/Drawer.screenshot.test.js b/packages/dnb-eufemia/src/components/drawer/__tests__/Drawer.screenshot.test.js
index 52d65243f70..bfb952f64ae 100644
--- a/packages/dnb-eufemia/src/components/drawer/__tests__/Drawer.screenshot.test.js
+++ b/packages/dnb-eufemia/src/components/drawer/__tests__/Drawer.screenshot.test.js
@@ -115,3 +115,22 @@ describe('Drawer no animation/spacing screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 })
+
+describe('Drawer screenshot', () => {
+  setupPageScreenshot({
+    url: '/uilib/components/drawer/visual-tests/hidden-tests',
+    pageViewport,
+  })
+
+  it('have to match correct scroll view setup', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="drawer-scroll-view"]',
+      simulate: 'click',
+      simulateSelector:
+        '[data-visual-test="drawer-scroll-view"] button:first-of-type',
+      screenshotSelector: '.drawer-scroll-view',
+      rootClassName: 'hide-page-content',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/Drawer.test.tsx b/packages/dnb-eufemia/src/components/drawer/__tests__/Drawer.test.tsx
index ae760cb85cf..7efb1ba7d9b 100644
--- a/packages/dnb-eufemia/src/components/drawer/__tests__/Drawer.test.tsx
+++ b/packages/dnb-eufemia/src/components/drawer/__tests__/Drawer.test.tsx
@@ -11,6 +11,7 @@ import {
   axeComponent,
   attachToBody,
 } from '../../../core/jest/jestSetup'
+import { render } from '@testing-library/react'
 
 const props = fakeProps(require.resolve('../Drawer.tsx'), {
   all: true,
@@ -283,6 +284,29 @@ describe('Drawer', () => {
     ).toBe(false)
   })
 
+  it('will accept custom refs', () => {
+    const contentRef = React.createRef<HTMLElement>()
+    const scrollRef = React.createRef<HTMLElement>()
+
+    const MockComponent = () => {
+      return (
+        <Drawer
+          openState
+          noAnimation
+          contentRef={contentRef}
+          scrollRef={scrollRef}
+        >
+          content
+        </Drawer>
+      )
+    }
+
+    render(<MockComponent />)
+
+    expect(contentRef.current).toBeTruthy()
+    expect(scrollRef.current).toBeTruthy()
+  })
+
   it('can contain drawer parts', () => {
     const Comp = mount(
       <Drawer noAnimation directDomReturn={false}>
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 078bd4843e2..b8e1079f6ea 100644
--- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -1369,7 +1369,8 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
 `;
 
 exports[`Drawer scss have to match snapshot 1`] = `
-"/*
+"@charset \\"UTF-8\\";
+/*
 * DNB Drawer
 *
 */
@@ -2168,11 +2169,15 @@ button.dnb-button::-moz-focus-inner {
     display: flex;
     flex-direction: column;
     z-index: 10;
-    /** Sets the color on scroll overflow (at the bottom) */
-    background-color: var(--modal-background-color, transparent);
+    /** 
+      NB: Do not use \\"overflow-x: hidden;\\" in here,
+      (overflowing one direction, will influence the other – we can't just have one at a time) 
+      To make the Drawer scroll, we use .dnb-scroll-view
+    */
     width: 100%;
     height: 100%;
-    overflow-x: hidden; }
+    /** Sets the color on scroll overflow (at the bottom) */
+    background-color: var(--modal-background-color, transparent); }
   .dnb-drawer--spacing .dnb-drawer__inner {
     padding: 0 var(--drawer-spacing) 0; }
     @media screen and (min-width: 72em) {
@@ -2279,8 +2284,8 @@ button.dnb-button::-moz-focus-inner {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
-    padding: 0 var(--drawer-spacing); }
+    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1 * 1.75);
+    padding: 0 calc(var(--drawer-spacing) * 1.5); }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-custom-trigger-screenshot-have-to-match-default-drawer-window-1-61a92.snap.png b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-custom-trigger-screenshot-have-to-match-default-drawer-window-1-61a92.snap.png
index 1f0bc61eda6..cfabfb46d04 100644
Binary files a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-custom-trigger-screenshot-have-to-match-default-drawer-window-1-61a92.snap.png and b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-custom-trigger-screenshot-have-to-match-default-drawer-window-1-61a92.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-full-screenshot-have-to-match-default-drawer-window-1-9a1ea.snap.png b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-full-screenshot-have-to-match-default-drawer-window-1-9a1ea.snap.png
index 39cb4e6300a..e061ed495f1 100644
Binary files a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-full-screenshot-have-to-match-default-drawer-window-1-9a1ea.snap.png and b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-full-screenshot-have-to-match-default-drawer-window-1-9a1ea.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-no-animation-spacing-screenshot-have-to-match-default-drawer-window-1-11b99.snap.png b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-no-animation-spacing-screenshot-have-to-match-default-drawer-window-1-11b99.snap.png
index 0badfbd9360..3954852f395 100644
Binary files a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-no-animation-spacing-screenshot-have-to-match-default-drawer-window-1-11b99.snap.png and b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-no-animation-spacing-screenshot-have-to-match-default-drawer-window-1-11b99.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-correct-scroll-view-setup-1-ed515.snap.png b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-correct-scroll-view-setup-1-ed515.snap.png
new file mode 100644
index 00000000000..e3bc21b6888
Binary files /dev/null and b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-correct-scroll-view-setup-1-ed515.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-customized-drawer-trigger-1-93330.snap.png b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-customized-drawer-trigger-1-93330.snap.png
index 377f1fedd5a..942c384fed8 100644
Binary files a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-customized-drawer-trigger-1-93330.snap.png and b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-customized-drawer-trigger-1-93330.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-default-drawer-trigger-1-794d3.snap.png b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-default-drawer-trigger-1-794d3.snap.png
index e0c64c13c4e..c90ec240423 100644
Binary files a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-default-drawer-trigger-1-794d3.snap.png and b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-screenshot-have-to-match-default-drawer-trigger-1-794d3.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-simple-screenshot-have-to-match-default-drawer-window-1-a61a9.snap.png b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-simple-screenshot-have-to-match-default-drawer-window-1-a61a9.snap.png
index 1e7e2435a65..caf4f1bf23a 100644
Binary files a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-simple-screenshot-have-to-match-default-drawer-window-1-a61a9.snap.png and b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/drawer-screenshot-test-js-drawer-simple-screenshot-have-to-match-default-drawer-window-1-a61a9.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/drawer/style/_drawer.scss b/packages/dnb-eufemia/src/components/drawer/style/_drawer.scss
index 13ef84578f1..2c6273a1053 100644
--- a/packages/dnb-eufemia/src/components/drawer/style/_drawer.scss
+++ b/packages/dnb-eufemia/src/components/drawer/style/_drawer.scss
@@ -28,7 +28,6 @@
   }
 
   @include defaultDropShadow();
-  //border-radius: 0.5rem;
   user-select: text;
   -webkit-user-select: text; // Safari / Touch fix
   border: none;
@@ -46,12 +45,17 @@
     flex-direction: column;
     z-index: 10;
 
-    /** Sets the color on scroll overflow (at the bottom) */
-    background-color: var(--modal-background-color, transparent);
+    /** 
+      NB: Do not use "overflow-x: hidden;" in here,
+      (overflowing one direction, will influence the other – we can't just have one at a time) 
+      To make the Drawer scroll, we use .dnb-scroll-view
+    */
 
     width: 100%;
     height: 100%;
-    overflow-x: hidden;
+
+    /** Sets the color on scroll overflow (at the bottom) */
+    background-color: var(--modal-background-color, transparent);
   }
 
   &--spacing &__inner {
@@ -218,8 +222,8 @@
     z-index: 99; // below #dropdown and #date-picker
 
     // on large screens
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
-    padding: 0 var(--drawer-spacing);
+    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1 * 1.75);
+    padding: 0 calc(var(--drawer-spacing) * 1.5);
   }
   &--spacing &__navigation.dnb-section#{&}__navigation--sticky {
     z-index: 2999; // above #dropdown and #date-picker and below #modal
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/Modal.screenshot.test.js b/packages/dnb-eufemia/src/components/modal/__tests__/Modal.screenshot.test.js
index d2f8b2e2908..2ffc57cf639 100644
--- a/packages/dnb-eufemia/src/components/modal/__tests__/Modal.screenshot.test.js
+++ b/packages/dnb-eufemia/src/components/modal/__tests__/Modal.screenshot.test.js
@@ -63,26 +63,6 @@ describe('Modal screenshot', () => {
   })
 })
 
-describe('Drawer screenshot', () => {
-  setupPageScreenshot({
-    url: '/uilib/components/modal/visual-tests/hidden-tests',
-    pageViewport,
-  })
-
-  it('have to match the default drawer window', async () => {
-    const screenshot = await testPageScreenshot({
-      selector: 'div#dnb-modal-root', // only to make sure we have a valid selector
-      simulate: 'click',
-      simulateSelector:
-        '[data-visual-test="modal-drawer-basic"] button:first-of-type',
-      screenshotSelector: '.dnb-modal__content',
-      rootClassName: 'hide-page-content',
-      waitBeforeSimulate: 200,
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})
-
 describe('Additional Modal screenshot', () => {
   const pageViewport = {
     width: 400,
@@ -105,42 +85,3 @@ describe('Additional Modal screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 })
-
-describe('Drawer without spacing', () => {
-  setupPageScreenshot({
-    url: '/uilib/components/modal/visual-tests/hidden-tests',
-    pageViewport,
-  })
-
-  it('have to match drawer without spacing', async () => {
-    const screenshot = await testPageScreenshot({
-      selector: 'div#dnb-modal-root', // only to make sure we have a valid selector
-      simulate: 'click',
-      simulateSelector:
-        '[data-visual-test="drawer-no-spacing"] button:first-of-type',
-      screenshotSelector: '.dnb-modal__content',
-      rootClassName: 'hide-page-content',
-      waitBeforeSimulate: 200,
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})
-
-describe('Drawer left screenshot', () => {
-  setupPageScreenshot({
-    url: '/uilib/components/modal/visual-tests/hidden-tests',
-    pageViewport,
-  })
-
-  it('have to match the drawer with containerplacement left', async () => {
-    const screenshot = await testPageScreenshot({
-      selector: 'div#dnb-modal-root', // only to make sure we have a valid selector
-      simulate: 'click',
-      simulateSelector:
-        '[data-visual-test="modal-drawer-leftsided"] button:first-of-type',
-      screenshotSelector: '.dnb-modal__content',
-      rootClassName: 'hide-page-content',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/Modal.test.tsx b/packages/dnb-eufemia/src/components/modal/__tests__/Modal.test.tsx
index c6d483717b5..99e5b4311d4 100644
--- a/packages/dnb-eufemia/src/components/modal/__tests__/Modal.test.tsx
+++ b/packages/dnb-eufemia/src/components/modal/__tests__/Modal.test.tsx
@@ -12,7 +12,7 @@ import {
   attachToBody, // in order to use document.activeElement properly
   loadScss,
 } from '../../../core/jest/jestSetup'
-
+import { render } from '@testing-library/react'
 import Input from '../../input/Input'
 import Component, { OriginalComponent } from '../Modal'
 import Button from '../../button/Button'
@@ -177,6 +177,29 @@ describe('Modal component', () => {
     expect(Comp.find('h1').text()).toBe(props.title)
   })
 
+  it('will accept custom refs', () => {
+    const contentRef = React.createRef<HTMLElement>()
+    const scrollRef = React.createRef<HTMLElement>()
+
+    const MockComponent = () => {
+      return (
+        <Component
+          openState
+          noAnimation
+          contentRef={contentRef}
+          scrollRef={scrollRef}
+        >
+          content
+        </Component>
+      )
+    }
+
+    render(<MockComponent />)
+
+    expect(contentRef.current).toBeTruthy()
+    expect(scrollRef.current).toBeTruthy()
+  })
+
   it('has no trigger button once we set omitTriggerButton', () => {
     const Comp = mount(<Component {...props} />)
     Comp.setProps({
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
index db7af8561ef..8540b9838e7 100644
--- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -1345,7 +1345,8 @@ exports[`Modal component have to match snapshot 1`] = `
 `;
 
 exports[`Modal scss have to match snapshot 1`] = `
-"/*
+"@charset \\"UTF-8\\";
+/*
 * DNB Modal
 *
 */
@@ -2140,11 +2141,15 @@ button.dnb-button::-moz-focus-inner {
     display: flex;
     flex-direction: column;
     z-index: 10;
-    /** Sets the color on scroll overflow (at the bottom) */
-    background-color: var(--modal-background-color, transparent);
+    /** 
+      NB: Do not use \\"overflow-x: hidden;\\" in here,
+      (overflowing one direction, will influence the other – we can't just have one at a time) 
+      To make the Drawer scroll, we use .dnb-scroll-view
+    */
     width: 100%;
     height: 100%;
-    overflow-x: hidden; }
+    /** Sets the color on scroll overflow (at the bottom) */
+    background-color: var(--modal-background-color, transparent); }
   .dnb-drawer--spacing .dnb-drawer__inner {
     padding: 0 var(--drawer-spacing) 0; }
     @media screen and (min-width: 72em) {
@@ -2251,8 +2256,8 @@ button.dnb-button::-moz-focus-inner {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
-    padding: 0 var(--drawer-spacing); }
+    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1 * 1.75);
+    padding: 0 calc(var(--drawer-spacing) * 1.5); }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-drawer-left-screenshot-have-to-match-the-drawer-with-containerplacement-left-1-f64fc.snap.png b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-drawer-left-screenshot-have-to-match-the-drawer-with-containerplacement-left-1-f64fc.snap.png
deleted file mode 100644
index 34eede84139..00000000000
Binary files a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-drawer-left-screenshot-have-to-match-the-drawer-with-containerplacement-left-1-f64fc.snap.png and /dev/null differ
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-drawer-screenshot-have-to-match-the-default-drawer-window-1-03237.snap.png b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-drawer-screenshot-have-to-match-the-default-drawer-window-1-03237.snap.png
deleted file mode 100644
index 226db1d4448..00000000000
Binary files a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-drawer-screenshot-have-to-match-the-default-drawer-window-1-03237.snap.png and /dev/null differ
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-drawer-without-spacing-have-to-match-drawer-without-spacing-1-afcd4.snap.png b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-drawer-without-spacing-have-to-match-drawer-without-spacing-1-afcd4.snap.png
deleted file mode 100644
index 590716b83c4..00000000000
Binary files a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-drawer-without-spacing-have-to-match-drawer-without-spacing-1-afcd4.snap.png and /dev/null differ
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-trigger-button-1-0ba52.snap.png b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-trigger-button-1-0ba52.snap.png
index 512beb8ec51..c90ec240423 100644
Binary files a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-trigger-button-1-0ba52.snap.png and b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-trigger-button-1-0ba52.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-window-1-b836a.snap.png b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-window-1-b836a.snap.png
index e3252c640d7..a9ebcdf0c60 100644
Binary files a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-window-1-b836a.snap.png and b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-window-1-b836a.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-window-with-title-1-8e313.snap.png b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-window-with-title-1-8e313.snap.png
index 7a63a8426bc..f9571bd7c8b 100644
Binary files a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-window-with-title-1-8e313.snap.png and b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-default-modal-window-with-title-1-8e313.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-suffix-help-button-usage-1-64d4d.snap.png b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-suffix-help-button-usage-1-64d4d.snap.png
index d55e1c97ddc..2ee2294afaa 100644
Binary files a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-suffix-help-button-usage-1-64d4d.snap.png and b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/modal-screenshot-test-js-modal-screenshot-have-to-match-the-suffix-help-button-usage-1-64d4d.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/step-indicator-screenshot-test-js-step-indicator-screenshot-have-to-match-static-mode-after-click-simulation-1-0c21f.snap.png b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/step-indicator-screenshot-test-js-step-indicator-screenshot-have-to-match-static-mode-after-click-simulation-1-0c21f.snap.png
index 8382e8fa6a5..79cc3ddce2b 100644
Binary files a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/step-indicator-screenshot-test-js-step-indicator-screenshot-have-to-match-static-mode-after-click-simulation-1-0c21f.snap.png and b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/step-indicator-screenshot-test-js-step-indicator-screenshot-have-to-match-static-mode-after-click-simulation-1-0c21f.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/step-indicator-screenshot-test-js-step-indicator-screenshot-have-to-match-strict-mode-for-small-screens-after-click-simulation-1-cdbb8.snap.png b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/step-indicator-screenshot-test-js-step-indicator-screenshot-have-to-match-strict-mode-for-small-screens-after-click-simulation-1-cdbb8.snap.png
index 191f0607a60..66a0d484400 100644
Binary files a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/step-indicator-screenshot-test-js-step-indicator-screenshot-have-to-match-strict-mode-for-small-screens-after-click-simulation-1-cdbb8.snap.png and b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/step-indicator-screenshot-test-js-step-indicator-screenshot-have-to-match-strict-mode-for-small-screens-after-click-simulation-1-cdbb8.snap.png differ