diff --git a/website/client/assets/scss/task.scss b/website/client/assets/scss/task.scss
index 35ee425538..cb5873e251 100644
--- a/website/client/assets/scss/task.scss
+++ b/website/client/assets/scss/task.scss
@@ -291,19 +291,30 @@
 .habit-control {
   border-radius: 100px;
   color: $white;
+  display: flex;
+  flex-direction: column;
 
   .svg-icon {
     width: 10px;
     height: 10px;
-    margin: 0 auto;
+    margin: auto;
   }
+}
 
-  .positive {
-    margin-top: 9px;
+.positive,
+.negative {
+  align-items: center;
+  display: flex;
+
+  > svg {
+    margin: auto;
+    width: 10px;
   }
+}
 
-  .negative {
-    margin-top: 13px;
+.negative {
+  > svg {
+    height: 2px;
   }
 }
 
diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index 04ae3439e6..caef07f6e0 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -290,6 +290,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/shops/shopItem.vue b/website/client/components/shops/shopItem.vue
index 15daa6097e..24d0399b8f 100644
--- a/website/client/components/shops/shopItem.vue
+++ b/website/client/components/shops/shopItem.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 div
   .item-wrapper(@click="click()", :id="itemId")
-    .item(:class="getItemClasses()")
+    button.item(:class="getItemClasses()")
       slot(name="itemBadge", :item="item", :emptyItem="emptyItem")
 
       span.badge.badge-pill.badge-item.badge-clock(
diff --git a/website/client/components/snackbars/notification.vue b/website/client/components/snackbars/notification.vue
index 918f6b226e..66ff16e44e 100644
--- a/website/client/components/snackbars/notification.vue
+++ b/website/client/components/snackbars/notification.vue
@@ -40,6 +40,11 @@ transition(name="fade")
     width: 300px;
     margin-left: 1em;
     margin-bottom: 1em;
+
+    .row {
+      margin: 0;
+      width: 100%;
+    }
   }
 
   .info {
diff --git a/website/client/components/tasks/task.vue b/website/client/components/tasks/task.vue
index 18c35ceab5..8a0f0ef6d4 100644
--- a/website/client/components/tasks/task.vue
+++ b/website/client/components/tasks/task.vue
@@ -5,11 +5,11 @@
     .d-flex(:class="{'task-not-scoreable': isUser !== true}")
       // Habits left side control
       .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up.bg")
-        .task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
+        button.task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
           .svg-icon.positive(v-html="icons.positive")
       // Dailies and todos left side control
       .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass.bg")
-        .task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
+        button.task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
           .svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
       // Task title, description and icons
       .task-content(:class="contentClass")
@@ -98,10 +98,10 @@
 
       // Habits right side control
       .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg")
-        .task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
+        button.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
           .svg-icon.negative(v-html="icons.negative")
       // Rewards right side control
-      .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
+      button.right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
         .svg-icon(v-html="icons.gold")
         .small-text {{task.value}}
     approval-footer(:task='task', v-if='this.task.group.id', :group='group')
@@ -180,11 +180,15 @@
   }
 
   .task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
+    background: $white;
+    border: 0;
+    border-radius: 0;
     opacity: 0;
     padding: 0 8px;
     transition: opacity 0.15s ease-in;
   }
 
+  .task /deep/ .habitica-menu-dropdown:focus .habitica-menu-dropdown-toggle,
   .task:hover /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
     opacity: 1;
   }
@@ -197,6 +201,7 @@
     }
   }
 
+  .task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:focus .svg-icon,
   .task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:hover .svg-icon {
     color: $purple-400 !important;
   }
@@ -417,11 +422,13 @@
   }
 
   .left-control {
+    align-items: center;
     border-top-left-radius: 2px;
     border-bottom-left-radius: 2px;
     min-height: 60px;
     border: 1px solid transparent;
     border-right: none;
+    flex-direction: row;
 
     & + .task-content {
       border-left: none;
@@ -439,7 +446,14 @@
   }
 
   .task-control:not(.task-disabled-habit-control-inner), .reward-control {
+    align-items: center;
     cursor: pointer;
+    margin: 0;
+    padding: 0;
+  }
+
+  .task-control {
+    border: none;
   }
 
   .task-not-scoreable {
diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index ddbf549e59..3a908bf002 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/website/client/components/ui/customMenuDropdown.vue
@@ -3,7 +3,7 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
 -->
 
 <template lang="pug">
-.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", :class="{open: isOpen}")
+.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", @keypress.enter.space.stop.prevent="toggleDropdown()", role="button", tabindex="0", :class="{open: isOpen}", :aria-pressed="isPressed")
   .habitica-menu-dropdown-toggle
     slot(name="dropdown-toggle")
   .dropdown-menu(:class="{'dropdown-menu-right': right}")
@@ -12,12 +12,27 @@ 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 {
     color: $white !important;
   }
 }
+
+// Firefox outline fix for dropdown menu
+@supports (-moz-appearance:meterbar) and (all:initial) {
+  .habitica-menu-dropdown.open {
+    &:focus {
+      outline: none;
+    }
+  }
+}
 </style>
 <style lang='scss' scoped>
 @import '~client/assets/scss/colors.scss';
@@ -66,6 +81,9 @@ export default {
       if (this.openStatus !== undefined) return this.openStatus === 1 ? true : false;
       return this.isDropdownOpen;
     },
+    isPressed () {
+      return this.isOpen ? 'true' : 'false';
+    },
   },
   mounted () {
     document.documentElement.addEventListener('click', this._clickOutListener);