diff --git a/app/components/UI/Modal.js b/app/components/UI/Modal.js
index 58f65e67..d0dd6d29 100644
--- a/app/components/UI/Modal.js
+++ b/app/components/UI/Modal.js
@@ -36,12 +36,12 @@ class Modal extends React.Component {
       <Flex flexDirection="column" width={1} p={3} bg="darkestBackground" css={{ height: '100%' }}>
         <Flex justifyContent="flex-end" as="header" color="primaryText">
           <Box
-            css={{ cursor: 'pointer' }}
+            css={{ cursor: 'pointer', opacity: hover ? 0.6 : 1 }}
             ml="auto"
             onClick={onClose}
             onMouseEnter={this.hoverOn}
             onMouseLeave={this.hoverOff}
-            color={hover ? 'lightningOrange' : null}
+            p={2}
           >
             <X width="2em" height="2em" />
           </Box>
diff --git a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
index 2bfe5c18..d2a8a2c5 100644
--- a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
@@ -3,7 +3,9 @@
 exports[`component.UI.Modal should render correctly 1`] = `
 .c2 {
   margin-left: auto;
+  padding: 8px;
   cursor: pointer;
+  opacity: 1;
 }
 
 .c3 {
@@ -49,7 +51,6 @@ exports[`component.UI.Modal should render correctly 1`] = `
   >
     <div
       className="c2"
-      color={null}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >