diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 8bc93b50a..fe0971cff 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -5,19 +5,35 @@ import { Icon } from '../Icon';
 import { iconTypes } from '../Icon/collection';
 import colors from '../../styles/colors';
 import { Input } from '../Input';
+import { useArgs } from '@storybook/addons';
 
 export default {
     title: 'Popup/Modal',
     component: Modal,
 } as ComponentMeta<typeof Modal>;
 
-const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
+const Template: ComponentStory<typeof Modal> = (args) => {
+    const [{}, updateArgs] = useArgs();
+
+    return (
+        <Modal
+            {...args}
+            onCancel={() => {
+                console.log('canceled');
+                updateArgs({ isVisible: false });
+            }}
+            onOk={() => {
+                console.log('pressed ok');
+                updateArgs({ isVisible: false });
+            }}
+        />
+    );
+};
 
 export const Regular = Template.bind({});
 Regular.args = {
     id: 'regular',
     title: 'Confirm',
-    isVisible: true,
     children: [
         <div
             key={'0'}
diff --git a/src/components/Modal/Modal.styles.ts b/src/components/Modal/Modal.styles.ts
index 6957da624..ae8b25e3f 100644
--- a/src/components/Modal/Modal.styles.ts
+++ b/src/components/Modal/Modal.styles.ts
@@ -3,8 +3,7 @@ import { ModalProps } from './types';
 import colors from '../../styles/colors';
 import fonts from '../../styles/fonts';
 
-const ModalStyled = styled.div<Pick<ModalProps, 'isVisible'>>`
-    ${(p) => (p.isVisible ? 'display: grid;' : 'display: none;')};
+const ModalStyled = styled.div`
     ${fonts.text};
     background-color: ${colors.white};
     box-shadow: 0 4px 10px rgba(48, 71, 105, 0.1);
@@ -43,11 +42,23 @@ const ModalFooter = styled.div`
     padding: 15px 32px 20px;
 `;
 
+const ModalWrapperStyled = styled.div<Pick<ModalProps, 'isVisible'>>`
+    ${(p) => (p.isVisible ? 'display: grid;' : 'display: none;')};
+    background: rgba(0, 0, 0, 0.3);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 5;
+`;
+
 const ModalStyles = {
     ModalContent,
     ModalFooter,
     ModalHeader,
     ModalStyled,
+    ModalWrapperStyled,
 };
 
 export default ModalStyles;
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
index 5a26dbbe7..e872c6eff 100644
--- a/src/components/Modal/Modal.test.tsx
+++ b/src/components/Modal/Modal.test.tsx
@@ -1,20 +1,44 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { composeStories } from '@storybook/testing-react';
-import * as stories from './Modal.stories';
-const { Regular } = composeStories(stories);
+import Modal from './Modal';
+import { Icon } from '../Icon';
+import { iconTypes } from '../Icon/collection';
+import color from '../../styles/colors';
 
 describe('Modal - Regular', () => {
     let container: HTMLDivElement;
-    let modalTestId = 'modal-test-id';
-    let headerTestId = 'modal-header-test-id';
-    let contentTestId = 'modal-content-test-id';
-    let footerTestId = 'modal-footer-test-id';
+    const modalTestId = 'modal-test-id';
+    const headerTestId = 'modal-header-test-id';
+    const contentTestId = 'modal-content-test-id';
+    const footerTestId = 'modal-footer-test-id';
 
     beforeEach(() => {
+        const args = {
+            id: 'regular',
+            title: 'Confirm',
+            children: [
+                <div
+                    key={'0'}
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexDirection: 'column',
+                    }}
+                >
+                    <Icon
+                        svg={iconTypes.cloud}
+                        size={64}
+                        fill={color.blueDark2}
+                    />
+                    <p>Proceed uploading?</p>
+                </div>,
+            ],
+            isVisible: true,
+        };
         container = document.createElement('div');
         document.body.appendChild(container);
-        ReactDOM.render(<Regular />, container);
+        ReactDOM.render(<Modal {...args} />, container);
     });
 
     afterEach(() => {
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 1c9de921d..95decd38a 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -4,14 +4,20 @@ import Button from '../Button/Button';
 import ModalStyles from './Modal.styles';
 import { iconTypes } from '../Icon/collection';
 
-const { ModalHeader, ModalStyled, ModalFooter, ModalContent } = ModalStyles;
+const {
+    ModalHeader,
+    ModalStyled,
+    ModalFooter,
+    ModalContent,
+    ModalWrapperStyled,
+} = ModalStyles;
 
 const Modal: React.FC<ModalProps> = ({
     id = String(Date.now()),
     children,
     isOkDisabled,
     isCancelDisabled,
-    isVisible,
+    isVisible = true,
     cancelText = 'Cancel',
     okText = 'Ok',
     onCancel,
@@ -25,51 +31,60 @@ const Modal: React.FC<ModalProps> = ({
     }, [isVisible]);
 
     return (
-        <ModalStyled id={id} isVisible={visible} data-testid="modal-test-id">
-            <ModalHeader data-testid={'modal-header-test-id'}>
-                <h3>{title}</h3>
-                <Button
-                    data-testid={'modal-close-test-id'}
-                    icon={iconTypes.x}
-                    iconLayout={'icon-only'}
-                    onClick={() => setVisibility(false)}
-                    theme={'outline'}
-                />
-            </ModalHeader>
+        <ModalWrapperStyled
+            id={id}
+            isVisible={visible}
+            data-testid="modal-test-id"
+        >
+            <ModalStyled>
+                <ModalHeader data-testid={'modal-header-test-id'}>
+                    <h3>{title}</h3>
+                    <Button
+                        data-testid={'modal-close-test-id'}
+                        icon={iconTypes.x}
+                        iconLayout={'icon-only'}
+                        onClick={() => setVisibility(false)}
+                        theme={'outline'}
+                    />
+                </ModalHeader>
 
-            <ModalContent id={'content'} data-testid={'modal-content-test-id'}>
-                {children}
-            </ModalContent>
+                <ModalContent
+                    id={'content'}
+                    data-testid={'modal-content-test-id'}
+                >
+                    {children}
+                </ModalContent>
 
-            <ModalFooter data-testid={'modal-footer-test-id'}>
-                <Button
-                    data-testid={'modal-cancel-button-test-id'}
-                    disabled={isCancelDisabled}
-                    text={cancelText}
-                    onClick={
-                        onCancel
-                            ? onCancel
-                            : () => {
-                                  setVisibility(false);
-                              }
-                    }
-                    theme={'outline'}
-                />
-                <Button
-                    data-testid={'modal-ok-button-test-id'}
-                    onClick={
-                        onOk
-                            ? onOk
-                            : () => {
-                                  console.log('ok triggered');
-                              }
-                    }
-                    disabled={isOkDisabled}
-                    text={okText}
-                    theme={'primary'}
-                />
-            </ModalFooter>
-        </ModalStyled>
+                <ModalFooter data-testid={'modal-footer-test-id'}>
+                    <Button
+                        data-testid={'modal-cancel-button-test-id'}
+                        disabled={isCancelDisabled}
+                        text={cancelText}
+                        onClick={
+                            onCancel
+                                ? onCancel
+                                : () => {
+                                      setVisibility(false);
+                                  }
+                        }
+                        theme={'outline'}
+                    />
+                    <Button
+                        data-testid={'modal-ok-button-test-id'}
+                        onClick={
+                            onOk
+                                ? onOk
+                                : () => {
+                                      console.log('ok triggered');
+                                  }
+                        }
+                        disabled={isOkDisabled}
+                        text={okText}
+                        theme={'primary'}
+                    />
+                </ModalFooter>
+            </ModalStyled>
+        </ModalWrapperStyled>
     );
 };
 
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
index 415632dee..a43d3d31d 100644
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -27,7 +27,7 @@ export interface ModalProps {
     /**
      * set if modal is visible
      */
-    isVisible: boolean;
+    isVisible?: boolean;
 
     /**
      * Run function on 'Cancel'