diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js
index e3d4fd0d..03fabd4f 100644
--- a/frontend/src/components/header/index.js
+++ b/frontend/src/components/header/index.js
@@ -41,15 +41,15 @@ const StyledAvatarWrapper = styled.div`
 
     ${pseudoEl({
       top: '50%',
-      right: remcalc(-10)
+      right: '0'
     })}
   }
 `;
 
 const StyledTooltipWrapper = styled.div`
   position: absolute;
-  right: ${remcalc-18};
-  bottom: ${remcalc(-180)};
+  right: ${remcalc(-18)};
+  bottom: ${remcalc(-140)};
 `;
 
 const StyledName = styled.span`
@@ -64,6 +64,7 @@ const StyledName = styled.span`
 const EmptyButton = styled.button`
   background: none;
   border: none;
+  padding-right: ${remcalc(20)};
 `;
 
 const StyledAvatar = styled(Avatar)`
diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js
index ba49fbe5..2a4cdd1c 100644
--- a/ui/src/components/tooltip/index.js
+++ b/ui/src/components/tooltip/index.js
@@ -6,17 +6,16 @@ import React from 'react';
 
 const ItemPadder = 9;
 const WrapperPadder = 24;
-const ulPadder = `${WrapperPadder - ItemPadder} 0`;
 
 const StyledList = styled.ul`
   position: relative;
-  background: #fff;
-  color: #646464;
+  background: ${colors.base.white};
+  color: ${colors.base.text};
   display: inline-block;
   font-family: sans-serif;
   list-style-type: none;
   margin: 0;
-  padding: ${remcalc(ulPadder)};
+  padding: 0;
   min-width: ${remcalc(200)};
 
   ${props => props.styles}
@@ -42,7 +41,7 @@ const StyledList = styled.ul`
 
   &:after {
     border-color: rgba(255, 255, 255, 0);
-    border-bottom-color: #fff;
+    border-bottom-color: ${colors.base.white};
     border-width: ${remcalc(10)};
     margin-left: ${remcalc(-10)};
   }