diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
index 71a6a21..9ede5da 100644
--- a/src/Modal/Modal.js
+++ b/src/Modal/Modal.js
@@ -6,8 +6,8 @@ import { Transition } from 'react-transition-group';
 import { FocusOn } from 'react-focus-on';
 import Portal from '../Portal';
 import Flex from '../Flex';
-import Box from '../Box';
 import Icon from '../Icon';
+import Button from '../Button';
 import { createComponent, themeGet } from '../utils';
 
 const ModalContext = createContext({});
@@ -185,27 +185,20 @@ Modal.Header = ({ title, children, showClose = true }) => {
     <ModalHeader>
       <ModalHeaderInner>
         <Flex alignItems="center">
-          {title && (
-            <Modal.Title role="heading" tabIndex="0">
-              {title}
-            </Modal.Title>
-          )}
+          {title && <Modal.Title role="heading">{title}</Modal.Title>}
           {children}
 
           {showClose && (
-            <Box ml="auto">
-              <Icon
-                name="close"
-                color="greyDarkest"
-                style={{ cursor: 'pointer' }}
-                size={24}
-                onClick={handleClose}
-                onKeyDown={handleKeyDown}
-                role="button"
-                aria-label="Close Modal"
-                tabIndex="0"
-              />
-            </Box>
+            <Button
+              variant="grey"
+              size="sm"
+              style={{ marginLeft: 'auto', border: 'none' }}
+              onClick={handleClose}
+              onKeyDown={handleKeyDown}
+              aria-label="Close Modal"
+              tabIndex="-1">
+              <Icon name="close" color="greyDarkest" size={24} />
+            </Button>
           )}
         </Flex>
       </ModalHeaderInner>