diff --git a/packages/core/src/components/DialogBox/Actions/Actions.tsx b/packages/core/src/components/DialogBox/Actions/Actions.tsx
deleted file mode 100644
index 7b779df06..000000000
--- a/packages/core/src/components/DialogBox/Actions/Actions.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { WithStyle } from '@medly-components/utils';
-import type { FC } from 'react';
-import { memo, useContext } from 'react';
-import { DialogBoxContext } from '../DialogBox.context';
-import * as Styled from './Actions.styled';
-import { DialogBoxActionUserProps } from './types';
-
-const Component: FC<DialogBoxActionUserProps> = memo(({ children, alignItems }) => {
-    const { id } = useContext(DialogBoxContext);
-
-    return <Styled.Actions {...{ alignItems, id: `${id}-actions` }}>{children}</Styled.Actions>;
-});
-Component.displayName = 'Actions';
-export const Actions: FC<DialogBoxActionUserProps> & WithStyle = Object.assign(Component, { Style: Styled.Actions });
diff --git a/packages/core/src/components/DialogBox/Actions/index.ts b/packages/core/src/components/DialogBox/Actions/index.ts
deleted file mode 100644
index c7fa68f81..000000000
--- a/packages/core/src/components/DialogBox/Actions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Actions as default } from './Actions';
diff --git a/packages/core/src/components/DialogBox/DialogBox.stories.mdx b/packages/core/src/components/DialogBox/DialogBox.stories.mdx
index 91067beff..5c6b7101d 100644
--- a/packages/core/src/components/DialogBox/DialogBox.stories.mdx
+++ b/packages/core/src/components/DialogBox/DialogBox.stories.mdx
@@ -6,7 +6,7 @@ import * as stories from './DialogBox.stories';
 
 # DialogBox
 
-`DialogBox` are windows that appear in front of app content to give critical information, request a decision, or involve multiple tasks.  It consists of a Header, Content, and Action.
+`DialogBox` are windows that appear in front of app content to give critical information, request a decision, or involve multiple tasks. It consists of a Header, Content, and Action.
 
 You can play with the component in the canvas tab.
 
@@ -16,13 +16,13 @@ You can play with the component in the canvas tab.
     <DialogBox.Content>
         <Input id="name-input" type="text" fullWidth label="Name" placeholder="Enter your Name" />
     </DialogBox.Content>
-    <DialogBox.Actions>
+    <DialogBox.Footer>
         <Button variant="outlined">Cancel</Button>
-    </DialogBox.Actions>
+    </DialogBox.Footer>
 </DialogBox>
 ```
 
-Shadow appears on the Header and Actions section if you scroll through the content.
+Shadow appears on the Header and Footer section if you scroll through the content.
 
 To close the dialog box, you can either:
 
diff --git a/packages/core/src/components/DialogBox/DialogBox.stories.tsx b/packages/core/src/components/DialogBox/DialogBox.stories.tsx
index 9f2625c34..e51665cb7 100644
--- a/packages/core/src/components/DialogBox/DialogBox.stories.tsx
+++ b/packages/core/src/components/DialogBox/DialogBox.stories.tsx
@@ -2,15 +2,15 @@ import { defaultTheme, DialogBoxTheme } from '@medly-components/theme';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 import Button from '../Button';
-import { DialogBoxActionUserProps } from './Actions/types';
 import { DialogBox } from './DialogBox';
+import { DialogBoxFooterProps } from './Footer/types';
 
 export const ThemeInterface: FC<DialogBoxTheme> = () => null;
 ThemeInterface.defaultProps = {
     ...defaultTheme.modal
 };
 
-export const DialogBoxActionProps: FC<DialogBoxActionUserProps> = () => null;
+export const DialogBoxActionProps: FC<DialogBoxFooterProps> = () => null;
 DialogBoxActionProps.defaultProps = {
     alignItems: 'right'
 };
@@ -29,12 +29,12 @@ export const Basic = () => {
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                     aliqua.
                 </DialogBox.Content>
-                <DialogBox.Actions>
+                <DialogBox.Footer>
                     <Button edges="rounded">Delete</Button>
                     <Button variant="outlined" edges="rounded" onClick={() => changeModalState()}>
                         Cancel
                     </Button>
-                </DialogBox.Actions>
+                </DialogBox.Footer>
             </DialogBox>
         </>
     );
diff --git a/packages/core/src/components/DialogBox/DialogBox.test.tsx b/packages/core/src/components/DialogBox/DialogBox.test.tsx
index a8d138471..7d20f9a3a 100644
--- a/packages/core/src/components/DialogBox/DialogBox.test.tsx
+++ b/packages/core/src/components/DialogBox/DialogBox.test.tsx
@@ -22,7 +22,7 @@ const dialogBoxRenderer = ({
                 popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                 publishing software like Aldus PageMaker including versions of Lorem Ipsum
             </DialogBox.Content>
-            <DialogBox.Actions>Demo Actions</DialogBox.Actions>
+            <DialogBox.Footer>Demo Footer</DialogBox.Footer>
         </DialogBox>
     );
 
@@ -62,9 +62,9 @@ describe('DialogBox component', () => {
             <DialogBox open onClose={mockOnClose}>
                 <DialogBox.Header>Demo Header</DialogBox.Header>
                 <DialogBox.Content>Demo Content</DialogBox.Content>
-                <DialogBox.Actions>
+                <DialogBox.Footer>
                     <p>Demo Header</p>
-                </DialogBox.Actions>
+                </DialogBox.Footer>
             </DialogBox>
         );
         expect(container.querySelector('p')).toBeInTheDocument();
diff --git a/packages/core/src/components/DialogBox/DialogBox.tsx b/packages/core/src/components/DialogBox/DialogBox.tsx
index 296372a45..6580643ea 100644
--- a/packages/core/src/components/DialogBox/DialogBox.tsx
+++ b/packages/core/src/components/DialogBox/DialogBox.tsx
@@ -2,10 +2,10 @@ import { useCombinedRefs, useKeyPress, WithStyle } from '@medly-components/utils
 import type { FC } from 'react';
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import CloseIcon from '../Modal/CloseIcon';
-import Actions from './Actions';
 import Content from './Content';
 import { DialogBoxContext } from './DialogBox.context';
 import { DialogBoxBackgroundStyled } from './DialogBox.styled';
+import Footer from './Footer';
 import Header from './Header';
 import Popup from './Popup';
 import { DialogBoxProps, DialogBoxStaticProps } from './types';
@@ -78,5 +78,5 @@ export const DialogBox: FC<DialogBoxProps> & WithStyle & DialogBoxStaticProps =
     Header,
     Popup,
     Content,
-    Actions
+    Footer
 });
diff --git a/packages/core/src/components/DialogBox/Actions/Actions.styled.tsx b/packages/core/src/components/DialogBox/Footer/Footer.styled.tsx
similarity index 80%
rename from packages/core/src/components/DialogBox/Actions/Actions.styled.tsx
rename to packages/core/src/components/DialogBox/Footer/Footer.styled.tsx
index 5d044b350..c881d9972 100644
--- a/packages/core/src/components/DialogBox/Actions/Actions.styled.tsx
+++ b/packages/core/src/components/DialogBox/Footer/Footer.styled.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { DialogBoxActionUserProps } from './types';
+import { DialogBoxFooterProps } from './types';
 
-export const Actions = styled('div')<DialogBoxActionUserProps>`
+export const Footer = styled('div')<DialogBoxFooterProps>`
     display: flex;
     z-index: 10;
     margin-top: 3rem;
@@ -28,6 +28,6 @@ export const Actions = styled('div')<DialogBoxActionUserProps>`
         }
     }
 `;
-Actions.defaultProps = {
+Footer.defaultProps = {
     alignItems: 'right'
 };
diff --git a/packages/core/src/components/DialogBox/Actions/Actions.test.tsx b/packages/core/src/components/DialogBox/Footer/Footer.test.tsx
similarity index 61%
rename from packages/core/src/components/DialogBox/Actions/Actions.test.tsx
rename to packages/core/src/components/DialogBox/Footer/Footer.test.tsx
index b51055166..9800c6a3b 100644
--- a/packages/core/src/components/DialogBox/Actions/Actions.test.tsx
+++ b/packages/core/src/components/DialogBox/Footer/Footer.test.tsx
@@ -1,16 +1,16 @@
 import { render } from '@test-utils';
-import { Actions } from './Actions';
-import { DialogBoxActionUserProps } from './types';
+import { Footer } from './Footer';
+import { DialogBoxFooterProps } from './types';
 
 describe('DialogBox action component', () => {
-    const testData: [DialogBoxActionUserProps['alignItems'], string][] = [
+    const testData: [DialogBoxFooterProps['alignItems'], string][] = [
         ['left', 'flex-start'],
         ['center', 'center'],
         ['right', 'flex-end']
     ];
 
     test.each(testData)('should align actions properly when align-items props is %s', (alignItems, flexValue) => {
-        const { container } = render(<Actions alignItems={alignItems}>Demo Actions</Actions>);
+        const { container } = render(<Footer alignItems={alignItems}>Demo Footer</Footer>);
         expect(container.querySelector('#default-id-actions')).toHaveStyle(`justify-content: ${flexValue}`);
     });
 });
diff --git a/packages/core/src/components/DialogBox/Footer/Footer.tsx b/packages/core/src/components/DialogBox/Footer/Footer.tsx
new file mode 100644
index 000000000..5192377db
--- /dev/null
+++ b/packages/core/src/components/DialogBox/Footer/Footer.tsx
@@ -0,0 +1,14 @@
+import { WithStyle } from '@medly-components/utils';
+import type { FC } from 'react';
+import { memo, useContext } from 'react';
+import { DialogBoxContext } from '../DialogBox.context';
+import * as Styled from './Footer.styled';
+import { DialogBoxFooterProps } from './types';
+
+const Component: FC<DialogBoxFooterProps> = memo(({ children, alignItems }) => {
+    const { id } = useContext(DialogBoxContext);
+
+    return <Styled.Footer {...{ alignItems, id: `${id}-actions` }}>{children}</Styled.Footer>;
+});
+Component.displayName = 'Footer';
+export const Footer: FC<DialogBoxFooterProps> & WithStyle = Object.assign(Component, { Style: Styled.Footer });
diff --git a/packages/core/src/components/DialogBox/Footer/index.ts b/packages/core/src/components/DialogBox/Footer/index.ts
new file mode 100644
index 000000000..467bde316
--- /dev/null
+++ b/packages/core/src/components/DialogBox/Footer/index.ts
@@ -0,0 +1 @@
+export { Footer as default } from './Footer';
diff --git a/packages/core/src/components/DialogBox/Actions/types.ts b/packages/core/src/components/DialogBox/Footer/types.ts
similarity index 70%
rename from packages/core/src/components/DialogBox/Actions/types.ts
rename to packages/core/src/components/DialogBox/Footer/types.ts
index 718458874..6a8c7e923 100644
--- a/packages/core/src/components/DialogBox/Actions/types.ts
+++ b/packages/core/src/components/DialogBox/Footer/types.ts
@@ -1,4 +1,4 @@
-export type DialogBoxActionUserProps = {
+export type DialogBoxFooterProps = {
     /** Use this to align actions horizontally */
     alignItems?: 'left' | 'center' | 'right';
 };
diff --git a/packages/core/src/components/DialogBox/__snapshots__/DialogBox.test.tsx.snap b/packages/core/src/components/DialogBox/__snapshots__/DialogBox.test.tsx.snap
index 434be5ae6..d2d006054 100644
--- a/packages/core/src/components/DialogBox/__snapshots__/DialogBox.test.tsx.snap
+++ b/packages/core/src/components/DialogBox/__snapshots__/DialogBox.test.tsx.snap
@@ -1,33 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DialogBox component should render properly when it is open 1`] = `
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  z-index: 10;
-  margin-top: 3rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c4 > * {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c4 > * + * {
-  margin: 1.6rem 0 0;
-}
-
 .c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -60,6 +33,33 @@ exports[`DialogBox component should render properly when it is open 1`] = `
   overflow: hidden;
 }
 
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 10;
+  margin-top: 3rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c4 > * {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c4 > * + * {
+  margin: 1.6rem 0 0;
+}
+
 .c2 {
   background-color: #ffffff;
   color: #13181D;
@@ -153,7 +153,7 @@ exports[`DialogBox component should render properly when it is open 1`] = `
         class="c4"
         id="medly-dialog-box-actions"
       >
-        Demo Actions
+        Demo Footer
       </div>
     </div>
   </div>
@@ -220,33 +220,6 @@ exports[`DialogBox component should render properly with close icon when it is o
   fill: #435465;
 }
 
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  z-index: 10;
-  margin-top: 3rem;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c6 > * {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c6 > * + * {
-  margin: 1.6rem 0 0;
-}
-
 .c5 {
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -279,6 +252,33 @@ exports[`DialogBox component should render properly with close icon when it is o
   overflow: hidden;
 }
 
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 10;
+  margin-top: 3rem;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c6 > * {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c6 > * + * {
+  margin: 1.6rem 0 0;
+}
+
 .c4 {
   background-color: #ffffff;
   color: #13181D;
@@ -389,7 +389,7 @@ exports[`DialogBox component should render properly with close icon when it is o
         class="c6"
         id="medly-dialog-box-actions"
       >
-        Demo Actions
+        Demo Footer
       </div>
     </div>
   </div>
diff --git a/packages/core/src/components/DialogBox/types.ts b/packages/core/src/components/DialogBox/types.ts
index ab84c2838..bd29b2147 100644
--- a/packages/core/src/components/DialogBox/types.ts
+++ b/packages/core/src/components/DialogBox/types.ts
@@ -1,6 +1,6 @@
 import { HTMLProps, WithStyle } from '@medly-components/utils';
 import type { FC } from 'react';
-import { DialogBoxActionUserProps } from './Actions/types';
+import { DialogBoxFooterProps } from './Footer/types';
 import { DialogBoxPopupProps } from './Popup/types';
 
 export interface DialogBoxProps extends HTMLProps<HTMLDivElement> {
@@ -26,7 +26,7 @@ export interface DialogBoxStaticProps {
     Popup: FC<DialogBoxPopupProps> & WithStyle;
     Header: FC & WithStyle;
     Content: FC & WithStyle;
-    Actions: FC<DialogBoxActionUserProps> & WithStyle;
+    Footer: FC<DialogBoxFooterProps> & WithStyle;
 }
 export interface DialogBoxContextType {
     id: string;
diff --git a/packages/core/src/components/Modal/Actions/Actions.tsx b/packages/core/src/components/Modal/Actions/Actions.tsx
deleted file mode 100644
index d4161d79a..000000000
--- a/packages/core/src/components/Modal/Actions/Actions.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { WithStyle } from '@medly-components/utils';
-import { useContext, memo } from 'react';
-import { ModalContext } from '../Modal.context';
-import * as Styled from './Actions.styled';
-import { ModalActionUserProps } from './types';
-import type { FC } from 'react';
-
-const Component: FC<ModalActionUserProps> = memo(({ children, alignItems }) => {
-    const { id, scrollState, isSmallScreen } = useContext(ModalContext);
-
-    return <Styled.Actions {...{ scrollState, isSmallScreen, alignItems, id: `${id}-actions` }}>{children}</Styled.Actions>;
-});
-Component.displayName = 'Actions';
-export const Actions: FC<ModalActionUserProps> & WithStyle = Object.assign(Component, { Style: Styled.Actions });
diff --git a/packages/core/src/components/Modal/Actions/index.ts b/packages/core/src/components/Modal/Actions/index.ts
deleted file mode 100644
index c7fa68f81..000000000
--- a/packages/core/src/components/Modal/Actions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Actions as default } from './Actions';
diff --git a/packages/core/src/components/Modal/Actions/Actions.styled.tsx b/packages/core/src/components/Modal/Footer/Footer.styled.tsx
similarity index 93%
rename from packages/core/src/components/Modal/Actions/Actions.styled.tsx
rename to packages/core/src/components/Modal/Footer/Footer.styled.tsx
index 1d70c3151..cbd3de534 100644
--- a/packages/core/src/components/Modal/Actions/Actions.styled.tsx
+++ b/packages/core/src/components/Modal/Footer/Footer.styled.tsx
@@ -3,7 +3,7 @@ import { rgba } from 'polished';
 import styled from 'styled-components';
 import { StyledProps } from './types';
 
-export const Actions = styled('div')<StyledProps>`
+export const Footer = styled('div')<StyledProps>`
     display: flex;
     z-index: 10;
     padding: ${({ theme }) => `${theme.spacing.S4} ${theme.spacing.M2} ${theme.spacing.M2}`};
@@ -26,6 +26,6 @@ export const Actions = styled('div')<StyledProps>`
         }
     `}
 `;
-Actions.defaultProps = {
+Footer.defaultProps = {
     alignItems: 'right'
 };
diff --git a/packages/core/src/components/Modal/Actions/Actions.test.tsx b/packages/core/src/components/Modal/Footer/Footer.test.tsx
similarity index 61%
rename from packages/core/src/components/Modal/Actions/Actions.test.tsx
rename to packages/core/src/components/Modal/Footer/Footer.test.tsx
index 311f041c4..a9129dd91 100644
--- a/packages/core/src/components/Modal/Actions/Actions.test.tsx
+++ b/packages/core/src/components/Modal/Footer/Footer.test.tsx
@@ -1,8 +1,8 @@
 import { render } from '@test-utils';
-import { Actions } from './Actions';
-import { ModalActionUserProps } from './types';
+import { Footer } from './Footer';
+import { ModalFooterProps } from './types';
 
-const testData: [ModalActionUserProps['alignItems'], string][] = [
+const testData: [ModalFooterProps['alignItems'], string][] = [
     ['left', 'flex-start'],
     ['center', 'center'],
     ['right', 'flex-end']
@@ -10,7 +10,7 @@ const testData: [ModalActionUserProps['alignItems'], string][] = [
 
 describe('Modal action component', () => {
     test.each(testData)('should align actions properly when align-items props is %s', (alignItems, flexValue) => {
-        const { container } = render(<Actions alignItems={alignItems}>Demo Actions</Actions>);
+        const { container } = render(<Footer alignItems={alignItems}>Demo Footer</Footer>);
         expect(container.querySelector('#default-id-actions')).toHaveStyle(`justify-content: ${flexValue}`);
     });
 });
diff --git a/packages/core/src/components/Modal/Footer/Footer.tsx b/packages/core/src/components/Modal/Footer/Footer.tsx
new file mode 100644
index 000000000..d13d4c0e0
--- /dev/null
+++ b/packages/core/src/components/Modal/Footer/Footer.tsx
@@ -0,0 +1,14 @@
+import { WithStyle } from '@medly-components/utils';
+import type { FC } from 'react';
+import { memo, useContext } from 'react';
+import { ModalContext } from '../Modal.context';
+import * as Styled from './Footer.styled';
+import { ModalFooterProps } from './types';
+
+const Component: FC<ModalFooterProps> = memo(({ children, alignItems }) => {
+    const { id, scrollState, isSmallScreen } = useContext(ModalContext);
+
+    return <Styled.Footer {...{ scrollState, isSmallScreen, alignItems, id: `${id}-actions` }}>{children}</Styled.Footer>;
+});
+Component.displayName = 'Footer';
+export const Footer: FC<ModalFooterProps> & WithStyle = Object.assign(Component, { Style: Styled.Footer });
diff --git a/packages/core/src/components/Modal/Footer/index.ts b/packages/core/src/components/Modal/Footer/index.ts
new file mode 100644
index 000000000..467bde316
--- /dev/null
+++ b/packages/core/src/components/Modal/Footer/index.ts
@@ -0,0 +1 @@
+export { Footer as default } from './Footer';
diff --git a/packages/core/src/components/Modal/Actions/types.ts b/packages/core/src/components/Modal/Footer/types.ts
similarity index 67%
rename from packages/core/src/components/Modal/Actions/types.ts
rename to packages/core/src/components/Modal/Footer/types.ts
index 13b7a086a..d13a197ad 100644
--- a/packages/core/src/components/Modal/Actions/types.ts
+++ b/packages/core/src/components/Modal/Footer/types.ts
@@ -1,11 +1,11 @@
 import { ScrollState } from '../types';
 
-export type ModalActionUserProps = {
+export type ModalFooterProps = {
     /** Use this to align actions horizontally */
     alignItems?: 'left' | 'center' | 'right';
 };
 
-export interface StyledProps extends ModalActionUserProps {
+export interface StyledProps extends ModalFooterProps {
     isSmallScreen: boolean;
     scrollState: ScrollState;
 }
diff --git a/packages/core/src/components/Modal/Modal.stories.mdx b/packages/core/src/components/Modal/Modal.stories.mdx
index a5dc0ab08..8afc6f1bf 100644
--- a/packages/core/src/components/Modal/Modal.stories.mdx
+++ b/packages/core/src/components/Modal/Modal.stories.mdx
@@ -7,7 +7,7 @@ import * as stories from './Modal.stories';
 # Modal
 
 The `Modal` components is a separate windows within an application that is overlaid on the primary window. The contents behind a modal dialog are inert, meaning you cannot interact with the content behind the dialog. It is a common user interface pattern that provides information or requires confirmation.
-It consists of a Header, Content, and Actions. You can play with the component in the canvas tab.
+It consists of a Header, Content, and Footer. You can play with the component in the canvas tab.
 
 ```tsx
 import { Modal } from '@medly-components/core';
@@ -27,9 +27,9 @@ export const DummyComponent: React.FC = React.memo(() => {
                 <Modal.Content>
                     <Input id="name-input" type="text" fullWidth label="Name" placeholder="Enter your Name" />
                 </Modal.Content>
-                <Modal.Actions>
+                <Modal.Footer>
                     <Button variant="outlined">Add User</Button>
-                </Modal.Actions>
+                </Modal.Footer>
             </Modal>
         </>
     );
@@ -40,7 +40,7 @@ DummyComponent.displayName = 'DummyComponent';
 
 ## Shadow Effect
 
-The shadow effect apears on the Header & Actions section if you scroll through the content.
+The shadow effect apears on the Header & Footer section if you scroll through the content.
 
 ### Keyboard Support
 
diff --git a/packages/core/src/components/Modal/Modal.stories.tsx b/packages/core/src/components/Modal/Modal.stories.tsx
index fd60df8b0..cdbf88a9d 100644
--- a/packages/core/src/components/Modal/Modal.stories.tsx
+++ b/packages/core/src/components/Modal/Modal.stories.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import Button from '../Button';
 import Input from '../Input';
 import SingleSelect from '../SingleSelect';
-import { ModalActionUserProps } from './Actions/types';
+import { ModalFooterProps } from './Footer/types';
 import { Modal } from './Modal';
 
 const options = [
@@ -19,7 +19,7 @@ ThemeInterface.defaultProps = {
     ...defaultTheme.modal
 };
 
-export const ModalActionProps: FC<ModalActionUserProps> = () => null;
+export const ModalActionProps: FC<ModalFooterProps> = () => null;
 ModalActionProps.defaultProps = {
     alignItems: 'right'
 };
@@ -84,9 +84,9 @@ export const Basic = () => {
                         />
                     </Form>
                 </Modal.Content>
-                <Modal.Actions>
+                <Modal.Footer>
                     <Button variant="outlined">Add User</Button>
-                </Modal.Actions>
+                </Modal.Footer>
             </Modal>
         </ModalStoryWrapper>
     );
diff --git a/packages/core/src/components/Modal/Modal.test.tsx b/packages/core/src/components/Modal/Modal.test.tsx
index bdfd7ce17..e6952290c 100644
--- a/packages/core/src/components/Modal/Modal.test.tsx
+++ b/packages/core/src/components/Modal/Modal.test.tsx
@@ -23,7 +23,7 @@ const modalRenderer = ({
                 popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                 publishing software like Aldus PageMaker including versions of Lorem Ipsum
             </Modal.Content>
-            <Modal.Actions>Demo Actions</Modal.Actions>
+            <Modal.Footer>Demo Footer</Modal.Footer>
         </Modal>
     );
 
@@ -102,9 +102,9 @@ describe('Modal component', () => {
             <Modal open onClose={mockOnClose}>
                 <Modal.Header>Demo Header</Modal.Header>
                 <Modal.Content>Demo Content</Modal.Content>
-                <Modal.Actions>
+                <Modal.Footer>
                     <p>Demo Header</p>
-                </Modal.Actions>
+                </Modal.Footer>
             </Modal>
         );
         expect(container.querySelector('p')).toBeInTheDocument();
diff --git a/packages/core/src/components/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal.tsx
index 2efbc225b..e0b7f2c90 100644
--- a/packages/core/src/components/Modal/Modal.tsx
+++ b/packages/core/src/components/Modal/Modal.tsx
@@ -1,8 +1,8 @@
 import { useCombinedRefs, useKeyPress, useWindowSize, WithStyle } from '@medly-components/utils';
 import { FC, forwardRef, memo, MouseEvent, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
-import Actions from './Actions';
 import CloseIcon from './CloseIcon';
 import Content from './Content';
+import Footer from './Footer';
 import Header from './Header';
 import { ModalContext } from './Modal.context';
 import { InnerContainerStyled, ModalBackgroundStyled } from './Modal.styled';
@@ -118,5 +118,5 @@ export const Modal: FC<ModalProps> & WithStyle & ModalStaticProps = Object.assig
     Header,
     Popup,
     Content,
-    Actions
+    Footer
 });
diff --git a/packages/core/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/packages/core/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index edd9a9ce3..0c506b37c 100644
--- a/packages/core/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/packages/core/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -88,27 +88,6 @@ exports[`Modal component background at small screen size should render properly
 `;
 
 exports[`Modal component should render properly when it is open 1`] = `
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  z-index: 10;
-  padding: 1.6rem 3.2rem 3.2rem;
-  box-shadow: 0 -1.8rem 1.6rem -1.6rem rgba(176,188,200,0.6);
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c7 > * + * {
-  margin-left: 1.6rem;
-}
-
 .c2 {
   overflow: visible;
   font-size: 2.4rem;
@@ -176,6 +155,27 @@ exports[`Modal component should render properly when it is open 1`] = `
   padding: 0.8rem 3.2rem 2.4rem;
 }
 
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 10;
+  padding: 1.6rem 3.2rem 3.2rem;
+  box-shadow: 0 -1.8rem 1.6rem -1.6rem rgba(176,188,200,0.6);
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c7 > * + * {
+  margin-left: 1.6rem;
+}
+
 .c5 {
   box-sizing: border-box;
   background-color: #ffffff;
@@ -259,18 +259,6 @@ exports[`Modal component should render properly when it is open 1`] = `
   overflow: hidden;
 }
 
-@media (max-width:767px) {
-  .c7 {
-    padding: 1.6rem;
-  }
-}
-
-@media (min-width:768px) and (max-height:700px) {
-  .c7 {
-    padding: 1.6rem 3.2rem;
-  }
-}
-
 @media (max-width:767px) {
   .c6 {
     padding: 0.8rem 1.6rem 2.4rem;
@@ -302,6 +290,18 @@ exports[`Modal component should render properly when it is open 1`] = `
   }
 }
 
+@media (max-width:767px) {
+  .c7 {
+    padding: 1.6rem;
+  }
+}
+
+@media (min-width:768px) and (max-height:700px) {
+  .c7 {
+    padding: 1.6rem 3.2rem;
+  }
+}
+
 @media (min-width:768px) {
   .c5 {
     position: relative;
@@ -425,7 +425,7 @@ exports[`Modal component should render properly when it is open 1`] = `
           class="c7"
           id="medly-modal-actions"
         >
-          Demo Actions
+          Demo Footer
         </div>
       </div>
     </div>
diff --git a/packages/core/src/components/Modal/types.ts b/packages/core/src/components/Modal/types.ts
index 9e563a5d6..c9137b957 100644
--- a/packages/core/src/components/Modal/types.ts
+++ b/packages/core/src/components/Modal/types.ts
@@ -1,6 +1,6 @@
 import { HTMLProps, WithStyle } from '@medly-components/utils';
 import type { Dispatch, FC, RefObject } from 'react';
-import { ModalActionUserProps } from './Actions/types';
+import { ModalFooterProps } from './Footer/types';
 import { ModalPopupProps } from './Popup/types';
 import { ScrollActionTypes } from './scrollStateReducer/types';
 
@@ -34,7 +34,7 @@ export interface ModalStaticProps {
     Popup: FC<ModalPopupProps> & WithStyle;
     Header: FC & WithStyle;
     Content: FC<ContentProps> & WithStyle;
-    Actions: FC<ModalActionUserProps> & WithStyle;
+    Footer: FC<ModalFooterProps> & WithStyle;
 }
 
 export interface InnerContainerProps {