diff --git a/app/components/Button.js b/app/components/Button.js
index 569cc2184..07a28cd2f 100644
--- a/app/components/Button.js
+++ b/app/components/Button.js
@@ -57,9 +57,7 @@ const RealButton = styled.button`
       props.borderOnHover ? 'none' : 'rgba(0, 0, 0, 0.07) 0px 1px 2px'
     };
     border: 1px solid ${
-      props.borderOnHover
-        ? 'transparent'
-        : darken(0.1, props.theme.buttonNeutralBackground)
+      props.borderOnHover ? 'transparent' : props.theme.buttonNeutralBorder
     };
 
     svg {
@@ -68,7 +66,7 @@ const RealButton = styled.button`
 
     &:hover {
       background: ${darken(0.05, props.theme.buttonNeutralBackground)};
-      border: 1px solid ${darken(0.15, props.theme.buttonNeutralBackground)};
+      border: 1px solid ${props.theme.buttonNeutralBorder};
     }
 
     &:focus {
diff --git a/shared/styles/theme.js b/shared/styles/theme.js
index e4df7b966..9d743bbf6 100644
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@@ -97,6 +97,7 @@ export const light = {
 
   buttonNeutralBackground: colors.white,
   buttonNeutralText: colors.almostBlack,
+  buttonNeutralBorder: darken(0.15, colors.white),
 
   tooltipBackground: colors.almostBlack,
   tooltipText: colors.white,
@@ -148,6 +149,7 @@ export const dark = {
 
   buttonNeutralBackground: colors.almostBlack,
   buttonNeutralText: colors.white,
+  buttonNeutralBorder: colors.slateDark,
 
   tooltipBackground: colors.white,
   tooltipText: colors.lightBlack,