diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index ed0fe4986e..c43657c26b 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -288,6 +288,7 @@ div
       margin-right: 24px;
     }
 
+    &:focus /deep/ .top-menu-icon.svg-icon, 
     &:hover /deep/ .top-menu-icon.svg-icon {
       color: $white;
     }
diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index 6d8d114e49..c2bf0081bd 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/website/client/components/ui/customMenuDropdown.vue
@@ -12,6 +12,12 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
 
 <style lang="scss">
 @import '~client/assets/scss/colors.scss';
+.habitica-menu-dropdown {
+  &:hover,
+  &:focus { // NB focus styles match the hover styles for .svg-icon
+    outline: none;
+  }
+}
 
 .habitica-menu-dropdown.open {
   .habitica-menu-dropdown-toggle .svg-icon {