diff --git a/packages/core/src/components/modal/modal.scss b/packages/core/src/components/modal/modal.scss
index 34a1dbe51..2fa0c9766 100644
--- a/packages/core/src/components/modal/modal.scss
+++ b/packages/core/src/components/modal/modal.scss
@@ -1,6 +1,8 @@
 @import '~@atomium/scss-utils/index';
 
 .atom-modal {
+  position: fixed;
+
   &__close {
     position: absolute;
     right: var(--spacing-small);
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
index 42a0805fd..7a3abc475 100644
--- a/packages/core/src/components/modal/modal.tsx
+++ b/packages/core/src/components/modal/modal.tsx
@@ -28,6 +28,7 @@ export class AtomModal {
   @Prop() hasFooter = true
   @Prop() disablePrimary = false
   @Prop() disableSecondary = false
+  @Prop() isOpen = false
 
   @Event() atomCloseClick: EventEmitter
   @Event() atomDidDismiss: EventEmitter
@@ -49,7 +50,7 @@ export class AtomModal {
   }
 
   componentDidLoad() {
-    document.body.classList.remove(BACKDROP_NO_SCROLL)
+    document.body.classList.add(BACKDROP_NO_SCROLL)
 
     this.modal.close = async () => {
       await this.modal.dismiss()
@@ -95,6 +96,7 @@ export class AtomModal {
           }}
           onIonModalDidDismiss={this.handleDidDimiss}
           onDidPresent={this.handleDidPresent}
+          isOpen={this.isOpen}
         >
           <header part='header' class='atom-modal__header'>
             {iconType && (