diff --git a/test/api/v4/user/POST-user_unequip.test.js b/test/api/v4/user/POST-user_unequip.test.js
new file mode 100644
index 0000000000..6437bbe703
--- /dev/null
+++ b/test/api/v4/user/POST-user_unequip.test.js
@@ -0,0 +1,52 @@
+import {
+  generateUser,
+} from '../../../helpers/api-integration/v4';
+import { UNEQUIP_EQUIPPED } from '../../../../website/common/script/ops/unequip';
+
+describe('POST /user/unequip', () => {
+  let user;
+
+  beforeEach(async () => {
+    user = await generateUser({
+      preferences: {
+        background: 'violet',
+      },
+      items: {
+        currentMount: 'BearCub-Base',
+        currentPet: 'BearCub-Base',
+        gear: {
+          owned: {
+            weapon_warrior_0: true,
+            weapon_warrior_1: true,
+            weapon_warrior_2: true,
+            weapon_wizard_1: true,
+            weapon_wizard_2: true,
+            shield_base_0: true,
+            shield_warrior_1: true,
+          },
+          equipped: {
+            weapon: 'weapon_warrior_2',
+            shield: 'shield_warrior_1',
+          },
+          costume: {
+            weapon: 'weapon_warrior_2',
+            shield: 'shield_warrior_1',
+          },
+        },
+      },
+      stats: { gp: 200 },
+    });
+  });
+
+  // More tests in common code unit tests
+
+  context('Gear', () => {
+    it('should unequip all battle gear items', async () => {
+      await user.post(`/user/unequip/${UNEQUIP_EQUIPPED}`);
+      await user.sync();
+
+      expect(user.items.gear.equipped.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.equipped.shield).to.eq('shield_base_0');
+    });
+  });
+});
diff --git a/test/common/ops/unequip.js b/test/common/ops/unequip.js
new file mode 100644
index 0000000000..67825364d0
--- /dev/null
+++ b/test/common/ops/unequip.js
@@ -0,0 +1,100 @@
+/* eslint-disable camelcase */
+
+import {
+  generateUser,
+} from '../../helpers/common.helper';
+import {
+  UNEQUIP_ALL,
+  UNEQUIP_BACKGROUND,
+  UNEQUIP_COSTUME,
+  UNEQUIP_EQUIPPED,
+  UNEQUIP_PET_MOUNT,
+  unEquipByType,
+} from '../../../website/common/script/ops/unequip';
+
+describe('shared.ops.unequip', () => {
+  let user;
+
+  beforeEach(() => {
+    user = generateUser({
+      preferences: {
+        background: 'violet',
+      },
+      items: {
+        currentMount: 'BearCub-Base',
+        currentPet: 'BearCub-Base',
+        gear: {
+          owned: {
+            weapon_warrior_0: true,
+            weapon_warrior_1: true,
+            weapon_warrior_2: true,
+            weapon_wizard_1: true,
+            weapon_wizard_2: true,
+            shield_base_0: true,
+            shield_warrior_1: true,
+          },
+          equipped: {
+            weapon: 'weapon_warrior_2',
+            shield: 'shield_warrior_1',
+          },
+          costume: {
+            weapon: 'weapon_warrior_2',
+            shield: 'shield_warrior_1',
+          },
+        },
+      },
+      stats: { gp: 200 },
+    });
+  });
+
+  context('Gear', () => {
+    it('should unequip all battle gear items', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_EQUIPPED } });
+
+      expect(user.items.gear.equipped.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.equipped.shield).to.eq('shield_base_0');
+    });
+  });
+
+  context('Costume', () => {
+    it('should unequip all costume items', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_COSTUME } });
+
+      expect(user.items.gear.costume.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.costume.shield).to.eq('shield_base_0');
+    });
+  });
+
+  context('Pet and Mount', () => {
+    it('should unequip Pet and Mount', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_PET_MOUNT } });
+
+      expect(user.items.currentMount).to.eq('');
+      expect(user.items.currentPet).to.eq('');
+    });
+  });
+
+  context('Background', () => {
+    it('should unequip Background', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_BACKGROUND } });
+
+      expect(user.preferences.background).to.eq('');
+    });
+  });
+
+  context('All Items', () => {
+    it('should unequip all Items', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_ALL } });
+
+      expect(user.items.gear.equipped.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.equipped.shield).to.eq('shield_base_0');
+
+      expect(user.items.gear.costume.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.costume.shield).to.eq('shield_base_0');
+
+      expect(user.items.currentMount).to.eq('');
+      expect(user.items.currentPet).to.eq('');
+      expect(user.preferences.background).to.eq('');
+    });
+  });
+});
diff --git a/website/client/config/storybook/config.js b/website/client/config/storybook/config.js
index aa6696576f..f7eca53d5d 100644
--- a/website/client/config/storybook/config.js
+++ b/website/client/config/storybook/config.js
@@ -50,4 +50,5 @@ function loadStories () {
   req.keys().forEach(filename => req(filename));
 }
 
+
 configure(loadStories, module);
diff --git a/website/client/src/assets/scss/badge.scss b/website/client/src/assets/scss/badge.scss
index 9616c9d6f6..2b1fdffb78 100644
--- a/website/client/src/assets/scss/badge.scss
+++ b/website/client/src/assets/scss/badge.scss
@@ -2,13 +2,15 @@
   font-size: 12px;
   font-weight: bold;
   line-height: 1.33;
-  color: $gray-200;
-  padding: 4px 8px;
+  text-align: center;
+  color: $gray-100;
+
+  padding: 0.25rem 0.5rem;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
 }
 
 .badge-pill {
-  border-radius: 100px;
+  border-radius: 12px;
 }
 
 .badge-round {
@@ -18,7 +20,7 @@
 }
 
 .badge-default {
-  background: $gray-500;
+  background: $gray-600;
   box-shadow: none;
 }
 
diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index f4ceeee397..4aae748d97 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -5,7 +5,7 @@
   font-weight: bold;
   line-height: 1.71;
   border: 1px solid transparent;
-  padding: 0.219rem 1rem;
+  padding: 0.219rem 0.75rem;
   border-radius: 2px;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   color: $white;
@@ -22,7 +22,7 @@
     border-color: $purple-400;
   }
 
-  &:active, &.active:not(.btn-flat), &:disabled, &.disabled {
+  &:active, &.active:not(.btn-flat) {
     box-shadow: none;
   }
 
@@ -30,6 +30,13 @@
     cursor: default;
     opacity: 0.75;
   }
+
+  &.with-icon {
+    height: 2rem; // otherwise would something set the height to 33px
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .btn-front {
@@ -41,34 +48,49 @@
 .btn-primary {
   background: $purple-200;
   border: 1px solid transparent;
-
-  &:hover:not(:disabled):not(.disabled) {
-    background: #5d3b9c;
-    border: 1px solid transparent;
-  }
+  --icon-color: #{$purple-500};
 
   &:focus {
     background: $purple-200;
     border-color: $purple-400;
+    --icon-color: #{$white};
   }
 
   &:not(:disabled):not(.disabled) {
+    &:hover {
+      background: #5d3b9c;
+      border: 1px solid transparent;
+
+      --icon-color: #{$white};
+    }
+
+    &:active, &.active {
+      background: $purple-200;
+      border: 1px solid transparent;
+
+      --icon-color: #{$white};
+    }
+
     &:active:focus, &.active:focus {
       box-shadow: none;
       border-color: $purple-400;
     }
   }
 
-  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
-    background: $purple-200;
-    border: 1px solid transparent;
-  }
-
   &:disabled, &.disabled {
-    background: $purple-200;
+    background: $gray-700;
     border: 1px solid transparent;
     cursor: default;
-    opacity: 0.75;
+    color: $gray-50;
+
+    --icon-color: #{$gray-300};
+  }
+
+
+  &.with-icon {
+    .svg-icon.color {
+      color: var(--icon-color);
+    }
   }
 }
 
@@ -80,29 +102,27 @@
   border: 1px solid transparent;
   color: $gray-50;
 
+  --icon-color: #{$gray-200};
+
   &:focus, &:active {
     color: $gray-50;
     background: $white;
     border-color: $purple-400;
+
+    --icon-color: #{$purple-300};
   }
 
   &:not(:disabled):not(.disabled) {
-    &:active:focus,
-    &.active:focus {
+    &:active, &.active {
       color: $purple-300;
-      box-shadow: none;
-      border-color: $purple-400;
-    }
+      --icon-color: #{$purple-300};
 
-    &:active,
-    &.active {
-      color: $purple-300;
-
-      &.dropdown-toggle {
-        color: $gray-50;
+      &:focus {
+        color: $purple-300;
+        box-shadow: none;
+        border-color: $purple-400;
       }
 
-
       background: $white;
       border: 1px solid transparent;
     }
@@ -110,12 +130,10 @@
     &:hover {
       color: $purple-300;
 
-      &.dropdown-toggle {
-        color: $gray-50;
-      }
-
       background: $white !important;
       border: 1px solid transparent;
+
+      --icon-color: #{$purple-300};
     }
   }
 
@@ -125,6 +143,14 @@
     border: 1px solid transparent;
     cursor: default;
     opacity: 0.75;
+
+    --icon-color: #{$gray-300};
+  }
+
+  &.with-icon {
+    .svg-icon.color {
+      color: var(--icon-color);
+    }
   }
 }
 
diff --git a/website/client/src/assets/scss/drawer.scss b/website/client/src/assets/scss/drawer.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/website/client/src/assets/scss/dropdown.scss b/website/client/src/assets/scss/dropdown.scss
index 0f810febcb..0589c35853 100644
--- a/website/client/src/assets/scss/dropdown.scss
+++ b/website/client/src/assets/scss/dropdown.scss
@@ -1,9 +1,8 @@
 .dropdown > .btn {
-  padding: 0.25rem 0.75rem;
+  padding: 0.219rem 0.75rem;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: normal;
-  line-height: 1.43;
 }
 
 .dropdown-toggle:hover {
@@ -25,6 +24,8 @@
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
   vertical-align: 0;
+  margin-left: 1rem;
+  margin-bottom: 0.1rem;
 }
 
 .dropdown-menu {
@@ -54,8 +55,8 @@
 
 
   &:active, &:hover, &:focus, &.active {
-    background-color: rgba($purple-600, 0.32) !important;
-    color: $purple-200 !important;
+    background-color: rgba($purple-600, 0.25) !important;
+    color: $purple-300 !important;
   }
 
   &.dropdown-inactive {
@@ -75,10 +76,17 @@
 .dropdown-label {
   font-size: 14px;
   font-weight: bold;
-  line-height: 1.43;
-  color: $gray-10;
+  line-height: 1.71;
   margin-right: 20px;
   margin-left: 20px;
+
+  height: 1.5rem;
+  font-stretch: normal;
+  font-style: normal;
+  text-align: right;
+
+  margin-top: calc(0.25rem + 1px); // Padding of the dropdown buttons + button border width
+  margin-bottom: 0.25rem;
 }
 
 .dropdown-icon-item {
diff --git a/website/client/src/assets/scss/form.scss b/website/client/src/assets/scss/form.scss
index 11fbce2903..c5cf0b61f7 100644
--- a/website/client/src/assets/scss/form.scss
+++ b/website/client/src/assets/scss/form.scss
@@ -42,11 +42,16 @@ input, textarea, input.form-control, textarea.form-control {
   }
 
   &.input-search {
-    background-repeat: no-repeat;
-    background-position: center left 16px;
-    background-size: 16px 16px;
-    background-image: url(~@/assets/svg/for-css/search.svg);
-    padding-left: 40px;
+    height: 2rem;
+    border-radius: 2px;
+    border: solid 1px $gray-400;
+    background-color: $white;
+
+    font-size: 14px;
+    line-height: 1.71;
+    color: $gray-200;
+
+    padding: 0.25rem 1rem 0.25rem 0.75rem;
   }
 
   &.input-valid, &.input-invalid {
@@ -170,7 +175,7 @@ input, textarea, input.form-control, textarea.form-control {
 }
 
 .form-check {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.875rem;
   padding-left: 0px;
 }
 
@@ -182,17 +187,21 @@ $bg-disabled-control: #34303a;
   margin-bottom: .5rem;
 
   &-label {
-    padding-top: 3px;
+    padding-top: 2px;
     padding-left: 3px;
-  }
 
-  .custom-control-label::before {
-    width: 18px;
-    height: 18px;
-    background-size: 75% 75%;
-    background-color: transparent;
-    border: 2px solid $gray-200;
-    transition-property: box-shadow;
+    font-size: 14px;
+    line-height: 1.71;
+    color: $gray-50;
+
+    &::before {
+      width: 18px;
+      height: 18px;
+      background-size: 75% 75%;
+      background-color: transparent;
+      border: 2px solid $gray-200;
+      transition-property: box-shadow;
+    }
   }
 }
 
diff --git a/website/client/src/assets/scss/item.scss b/website/client/src/assets/scss/item.scss
index 3b03d38a22..ffe1ae5807 100644
--- a/website/client/src/assets/scss/item.scss
+++ b/website/client/src/assets/scss/item.scss
@@ -5,10 +5,6 @@
   margin-right: 24px;
 }
 
-.items > div:last-of-type {
-  margin-right: 0px;
-}
-
 .item-wrapper {
   position: relative;
   display: inline-block;
@@ -45,14 +41,13 @@
   position: relative;
   width: 94px;
   height: 92px;
-  border-radius: 2px;
+  border-radius: 4px;
   background: $white;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   border: 1px solid transparent;
   cursor: pointer;
 
   &-empty {
-    background: $gray-10;
     box-shadow: none;
     cursor: auto;
   }
@@ -85,7 +80,7 @@
   margin: 0 auto;
 }
 
-.drawer-content .item:hover {
+.drawer-content .item.item-empty:hover {
   border-color: transparent;
   box-shadow: none;
 }
diff --git a/website/client/src/assets/scss/page.scss b/website/client/src/assets/scss/page.scss
index b424111b25..9c2a08b136 100644
--- a/website/client/src/assets/scss/page.scss
+++ b/website/client/src/assets/scss/page.scss
@@ -20,5 +20,18 @@ body {
 }
 
 .page-header {
-  color: $purple-200;
+  color: $purple-300;
+
+  height: 2rem;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1.33;
+}
+
+.sub-header {
+  height: 1.75rem;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1.4;
+  color: $gray-10;
 }
diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss
index 5331e7b121..30474404ed 100644
--- a/website/client/src/assets/scss/typography.scss
+++ b/website/client/src/assets/scss/typography.scss
@@ -46,12 +46,16 @@ a, a:not([href]):not([tabindex]) {
 }
 
 // Headers
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h5, h6 {
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: bold;
   color: $gray-10;
 }
 
+h3, h4 {
+  font-weight: bold;
+}
+
 h1 {
   font-size: 24px;
   line-height: 1.67;
@@ -65,15 +69,15 @@ h2 {
 }
 
 h3 {
-  font-size: 16px;
-  line-height: 1.5;
-  color: $gray-50;
-  margin-bottom: 4px;
+  font-size: 0.875rem;
+  line-height: 1.71;
+  color: $gray-10;
 }
 
 h4 {
-  font-size: 14px;
-  line-height: 1.43;
+  font-size: 0.875rem;
+  line-height: 1.71;
+  color: $gray-100;
 }
 
 .textCondensed {
diff --git a/website/client/src/assets/svg/equip.svg b/website/client/src/assets/svg/equip.svg
new file mode 100644
index 0000000000..b36adf27d9
--- /dev/null
+++ b/website/client/src/assets/svg/equip.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#878190;" d="M12,7.9h2c0,4.1-3,7.5-7,8.1h0h0c-4-0.6-7-4-7-8.1V3l7-3v2.2
+	L2,4.3v3.6c0,2.9,2.1,5.5,5,6C9.9,13.4,12,10.9,12,7.9z M14,2V0h-2v2h-2v2h2v2h2V4h2V2H14z"/>
+</svg>
diff --git a/website/client/src/assets/svg/unequip.svg b/website/client/src/assets/svg/unequip.svg
new file mode 100644
index 0000000000..cdffe603de
--- /dev/null
+++ b/website/client/src/assets/svg/unequip.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#878190;" d="M12,7.9h2c0,4.1-3,7.5-7,8.1h0h0c-4-0.6-7-4-7-8.1V3l7-3v2.2
+	L2,4.3v3.6c0,2.9,2.1,5.5,5,6C9.9,13.4,12,10.9,12,7.9z M10,6h6V4h-6V6z"/>
+</svg>
diff --git a/website/client/src/components/inventory/equipment/attributesGrid.vue b/website/client/src/components/inventory/equipment/attributesGrid.vue
index 00bee8de14..4ef8a82528 100644
--- a/website/client/src/components/inventory/equipment/attributesGrid.vue
+++ b/website/client/src/components/inventory/equipment/attributesGrid.vue
@@ -4,6 +4,7 @@
       v-for="attr in ATTRIBUTES"
       :key="attr"
       class="popover-content-attr"
+      :class="`attr-${attr}`"
     >
       <div class="group-content">
         <span
@@ -11,7 +12,7 @@
           :class="{'hasValue': hasSumValue(attr) }"
         >{{ `${$t(attr)}: ` }}</span>
         <span
-          class="popover-content-attr-cell label value"
+          class="popover-content-attr-cell label key-value value"
           :class="{'green': hasSumValue(attr) }"
         >{{ `${stats.sum[attr]}` }}</span>
         <span
@@ -53,6 +54,16 @@
     width: calc(50% - 1px);
     background-color: $gray-50;
 
+    .attr-str, .attr-int {
+      padding-top: 0.25rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .attr-con, .attr-per {
+      padding-bottom: 0.75rem;
+      padding-top: 0.5rem;
+    }
+
     &:nth-of-type(even) {
       margin-left: 1px;
     }
@@ -70,12 +81,12 @@
   }
 
   .popover-content-attr-cell {
-    width: 70%;
+    width: 65%;
     text-align: left;
 
     &:nth-of-type(even) {
       text-align: right;
-      width: 30%;
+      width: 35%;
     }
 
     &.key {
@@ -115,7 +126,7 @@
   .modal-body {
 
     .group-content {
-      padding: 8px 17px;
+      padding: 0.25rem 1rem;
     }
 
     .popover-content-attr {
@@ -129,32 +140,43 @@
 
     .popover-content-attr-cell {
       &.key {
-        color: $gray-400;
-        font-size: 16px;
+        color: $gray-100;
+        font-size: 0.875rem;
         font-weight: bold;
-        line-height: 1.25;
+        line-height: 1.71;
+
+        opacity: 0.5;
 
         &.hasValue {
-          color: $gray-50;
+          opacity: 1;
         }
       }
 
       &.label {
-        color: $gray-400;
-        font-size: 12px;
-        font-weight: bold;
+        color: $gray-100;
+        font-size: 0.75rem;
         line-height: 1.33;
+        opacity: 0.5;
+
+        &.bold {
+          font-weight: bold;
+        }
+
+        &.key-value {
+          line-height: 1.71;
+        }
 
         &.hasValue {
-          color: $gray-200;
+          opacity: 1;
         }
       }
 
       &.label.value {
+        text-align: right;
 
         &.green {
           color: $green-10;
-
+          opacity: 1;
         }
       }
     }
diff --git a/website/client/src/components/inventory/equipment/equipGearModal.vue b/website/client/src/components/inventory/equipment/equipGearModal.vue
index 90406e66cc..e1d83dc686 100644
--- a/website/client/src/components/inventory/equipment/equipGearModal.vue
+++ b/website/client/src/components/inventory/equipment/equipGearModal.vue
@@ -4,15 +4,11 @@
     id="equipgear-modal"
     :visible="true"
     :hide-header="true"
+    :hide-footer="true"
     @change="onChange($event)"
   >
-    <div class="close">
-      <span
-        class="svg-icon inline icon-10"
-        aria-hidden="true"
-        @click="hideDialog()"
-        v-html="icons.close"
-      ></span>
+    <div class="dialog-close">
+      <close-icon @click="hideDialog()" />
     </div>
     <div
       v-if="item != null"
@@ -23,11 +19,12 @@
           :member="user"
           :avatar-only="true"
           :with-background="true"
+          :hide-class-badge="true"
           :override-avatar-gear="memberOverrideAvatarGear(item)"
           :sprites-margin="'0px auto auto -1px'"
           :show-visual-buffs="false"
         />
-        <h4 class="title">
+        <h4 class="title mt-3">
           {{ itemText }}
         </h4>
         <div
@@ -36,14 +33,14 @@
         ></div>
         <span
           v-if="showClassTag"
-          class="classTag"
+          class="classTag mt-3"
         >
           <span
-            class="svg-icon inline icon-24"
+            class="svg-icon inline icon-16"
             v-html="icons[itemClass]"
           ></span>
           <span
-            class="className textCondensed"
+            class="className"
             :class="itemClass"
           >{{ getClassName(itemClass) }}</span>
         </span>
@@ -54,10 +51,17 @@
           :item="item"
         />
         <button
-          class="btn btn-primary"
+          class="btn with-icon mt-4"
+          :class="{'btn-primary': !isEquipped, 'btn-secondary': isEquipped }"
           @click="equipItem()"
         >
-          {{ $t(isEquipped ? 'unequip' : 'equip') }}
+          <span
+            class="svg-icon color inline icon-16 mr-2"
+            v-html="isEquipped ? icons.unEquip : icons.equip"
+          ></span>
+          <span class="button-label">
+            {{ $t(isEquipped ? 'unequip' : 'equip') }}
+          </span>
         </button>
       </div>
     </div>
@@ -69,15 +73,38 @@
 </template>
 
 <style lang="scss">
-
   @import '~@/assets/scss/colors.scss';
   @import '~@/assets/scss/mixins.scss';
 
   #equipgear-modal {
     @include centeredModal();
 
+    .modal-content {
+      border-radius: 8px;
+      box-shadow: 0 14px 28px 0 #1a181d3d, 0 10px 10px 0 #1a181d47;
+    }
+
+    .modal-body {
+      padding: 2rem 1.5rem;
+    }
+
+    .dialog-close {
+
+    }
+
     .modal-dialog {
       width: 330px;
+
+      .text {
+        min-height: 0;
+      }
+    }
+
+    .text {
+      font-size: 0.875rem;
+      line-height: 1.71;
+      text-align: center;
+      color: $gray-50;
     }
 
     .content {
@@ -89,7 +116,6 @@
     }
 
     .inner-content {
-      margin: 33px auto auto;
       width: 282px;
     }
 
@@ -102,10 +128,11 @@
 
     .className {
       height: 24px;
-      font-size: 16px;
-      line-height: 1.5;
+      font-size: 0.875rem;
+      line-height: 1.71;
       text-align: left;
       margin-left: 8px;
+      font-weight: bold;
     }
 
     .healer {
@@ -124,10 +151,15 @@
       color: $wizard-color;
     }
 
+    .title {
+      color: $gray-10;
+    }
+
     .attributesGrid {
       background-color: $gray-500;
-
-      margin: 10px 0 24px;
+      margin: 1rem 0 0;
+      border-radius: 4px;
+      border: 1px solid #f4f4f4;
     }
 
     .avatar {
@@ -139,9 +171,9 @@
       }
     }
 
-    button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
+    button.btn {
+      display: inline-flex;
+      align-items: center;
     }
   }
 </style>
@@ -154,14 +186,18 @@ import svgWarrior from '@/assets/svg/warrior.svg';
 import svgWizard from '@/assets/svg/wizard.svg';
 import svgRogue from '@/assets/svg/rogue.svg';
 import svgHealer from '@/assets/svg/healer.svg';
+import svgEquipIcon from '@/assets/svg/equip.svg';
+import svgUnEquipIcon from '@/assets/svg/unequip.svg';
 
 import Avatar from '@/components/avatar';
 import attributesGrid from '@/components/inventory/equipment/attributesGrid.vue';
+import closeIcon from '@/components/shared/closeIcon';
 
 export default {
   components: {
     Avatar,
     attributesGrid,
+    closeIcon,
   },
   props: {
     item: {
@@ -185,6 +221,8 @@ export default {
         wizard: svgWizard,
         rogue: svgRogue,
         healer: svgHealer,
+        equip: svgEquipIcon,
+        unEquip: svgUnEquipIcon,
       }),
     };
   },
diff --git a/website/client/src/components/inventory/equipment/index.vue b/website/client/src/components/inventory/equipment/index.vue
index 4b587f88d1..0be161765f 100644
--- a/website/client/src/components/inventory/equipment/index.vue
+++ b/website/client/src/components/inventory/equipment/index.vue
@@ -1,65 +1,57 @@
 <template>
   <div class="row">
     <div class="standard-sidebar d-none d-sm-block">
-      <div class="form-group">
-        <input
-          v-model="searchText"
-          class="form-control input-search"
-          type="text"
-          :placeholder="$t('search')"
-        >
-      </div>
-      <div class="form">
-        <h2 v-once>
-          {{ $t('filter') }}
-        </h2>
-        <h3>{{ groupBy === 'type' ? $t('equipmentType') : $t('class') }}</h3>
-        <div class="form-group">
-          <div
-            v-for="group in itemsGroups"
-            :key="group.key"
-            class="form-check"
+      <filter-sidebar>
+        <div class="form-group" slot="search">
+          <input
+            v-model="searchText"
+            class="form-control input-search"
+            type="text"
+            :placeholder="$t('search')"
           >
-            <div class="custom-control custom-checkbox">
-              <input
-                :id="groupBy + group.key"
-                v-model="viewOptions[group.key].selected"
-                class="custom-control-input"
-                type="checkbox"
-              >
-              <label
-                v-once
-                class="custom-control-label"
-                :for="groupBy + group.key"
-              >{{ group.label }}</label>
-            </div>
-          </div>
         </div>
-      </div>
+
+        <div class="form">
+          <filter-group :title="groupBy === 'type' ? $t('equipmentType') : $t('class')">
+            <checkbox v-for="group in itemsGroups"
+                      :key="group.key"
+                      :id="groupBy + group.key"
+                      :checked.sync="viewOptions[group.key].selected"
+                      :text="group.label"/>
+          </filter-group>
+        </div>
+      </filter-sidebar>
     </div>
     <div class="standard-page">
       <div class="clearfix">
-        <h1
-          v-once
-          class="float-left mb-4 page-header"
-        >
-          {{ $t('equipment') }}
-        </h1>
-        <div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span>
-          <b-dropdown
-            :text="$t(selectedSortGearBy)"
-            right="right"
+        <div class="mb-4 float-left">
+          <button
+            class="page-header btn-flat equipment-type-button textCondensed"
+            :class="{'active': !costumeMode}"
+            @click="selectDrawerTab('equipment')"
           >
-            <b-dropdown-item
-              v-for="sort in sortGearBy"
-              :key="sort"
-              :active="selectedSortGearBy === sort"
-              @click="selectedSortGearBy = sort"
-            >
-              {{ $t(sort) }}
-            </b-dropdown-item>
-          </b-dropdown>
+            {{ $t('battleGear') }}
+          </button>
+          <button
+            class="page-header btn-flat equipment-type-button textCondensed"
+            :class="{'active': costumeMode}"
+            @click="selectDrawerTab('costume')"
+          >
+            {{ $t('costume') }}
+          </button>
+        </div>
+
+        <div class="float-right top-menu">
+          <span class="dropdown-label">{{ $t('sortBy') }}</span>
+          <select-translated-array
+            :right="true"
+            :items="sortGearBy"
+            :value="selectedSortGearBy"
+            @select="selectedSortGearBy = $event"
+            class="inline"
+            :inlineDropdown="false"
+          />
+
           <span class="dropdown-label">{{ $t('groupBy2') }}</span>
           <b-dropdown
             :text="$t(groupBy === 'type' ? 'equipmentType' : 'class')"
@@ -78,31 +70,37 @@
               {{ $t('class') }}
             </b-dropdown-item>
           </b-dropdown>
+
+          <span class="divider"></span>
+          <unequip-dropdown />
         </div>
       </div>
+
       <drawer
-        :title="$t('equipment')"
+        :no-title-bottom-padding="true"
         :error-message="(costumeMode && !user.preferences.costume) ? $t('costumeDisabled') : null"
         :open-status="openStatus"
         @toggled="drawerToggled"
       >
+        <div slot="drawer-title-row" class="title-row-tabs">
+          <div class="drawer-tab">
+            <a
+              class="drawer-tab-text"
+              :class="{'drawer-tab-text-active': !costumeMode}"
+              @click.prevent.stop="selectDrawerTab('equipment')"
+            >{{ $t('battleGear') }}</a>
+          </div>
+          <div class="drawer-tab">
+            <a
+              class="drawer-tab-text"
+              :class="{'drawer-tab-text-active': costumeMode}"
+              @click.prevent.stop="selectDrawerTab('costume')"
+            >{{ $t('costume') }}</a>
+          </div>
+        </div>
         <div slot="drawer-header">
           <div class="drawer-tab-container">
-            <div class="drawer-tab text-right">
-              <a
-                class="drawer-tab-text"
-                :class="{'drawer-tab-text-active': !costumeMode}"
-                @click="selectDrawerTab('equipment')"
-              >{{ $t('equipment') }}</a>
-            </div>
             <div class="clearfix">
-              <div class="drawer-tab float-left">
-                <a
-                  class="drawer-tab-text"
-                  :class="{'drawer-tab-text-active': costumeMode}"
-                  @click="selectDrawerTab('costume')"
-                >{{ $t('costume') }}</a>
-              </div>
               <toggle-switch
                 class="float-right align-with-tab"
                 :label="$t(costumeMode ? 'useCostume' : 'autoEquipBattleGear')"
@@ -115,7 +113,7 @@
         </div>
         <div
           slot="drawer-slider"
-          class="items items-one-line"
+          class="equipment items items-one-line"
         >
           <item
             v-for="(label, group) in gearTypesToStrings"
@@ -130,7 +128,7 @@
             :popover-position="'top'"
             :show-popover="flatGear[activeItems[group]]
               && Boolean(flatGear[activeItems[group]].text)"
-            @click="equipItem(flatGear[activeItems[group]])"
+            @click="openEquipDialog(flatGear[activeItems[group]])"
           >
             <template
               slot="popoverContent"
@@ -142,8 +140,8 @@
               slot="itemBadge"
               slot-scope="context"
             >
-              <starBadge
-                :selected="true"
+              <equip-badge
+                :equipped="true"
                 :show="!costumeMode || user.preferences.costume"
                 @click="equipItem(context.item)"
               />
@@ -187,8 +185,8 @@
                 slot="itemBadge"
                 slot-scope="context"
               >
-                <starBadge
-                  :selected="activeItems[context.item.type] === context.item.key"
+                <equip-badge
+                  :equipped="activeItems[context.item.type] === context.item.key"
                   :show="!costumeMode || user.preferences.costume"
                   @click="equipItem(context.item)"
                 />
@@ -215,17 +213,76 @@
 </template>
 
 <style lang="scss">
+@import '~@/assets/scss/colors.scss';
+
 .pointer {
   cursor: pointer;
 }
 
 .align-with-tab {
   margin-top: 3px;
+  margin-right: 3px;
 }
 
 .drawer-tab-text {
   display: inline-block;
 }
+
+.equipment.items .item-empty {
+  background: $gray-10 !important;
+}
+
+</style>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+.page-header.btn-flat {
+  background: transparent;
+}
+
+.title-row-tabs {
+  display: flex;
+  justify-content: center;
+
+  .drawer-tab {
+    background: transparent;
+  }
+}
+
+.equipment-type-button {
+  height: 2rem;
+  font-size: 24px;
+  font-weight: bold;
+  font-stretch: condensed;
+  line-height: 1.33;
+  letter-spacing: normal;
+  color: $gray-10;
+
+  margin-right: 1.125rem;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 2.5rem;
+
+  &.active, &:hover {
+    color: $purple-300;
+    box-shadow: 0px -0.25rem 0px $purple-300 inset;
+    outline: none;
+  }
+}
+
+.divider {
+  width: 0.063rem;
+  height: 2rem;
+  background-color: $gray-500;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.top-menu {
+  display: flex;
+  align-items: center;
+}
 </style>
 
 <script>
@@ -242,13 +299,19 @@ import toggleSwitch from '@/components/ui/toggleSwitch';
 import Item from '@/components/inventory/item';
 import ItemRows from '@/components/ui/itemRows';
 import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
-import StarBadge from '@/components/ui/starBadge';
 import Drawer from '@/components/ui/drawer';
 
 import i18n from '@/../../common/script/i18n';
 
 import EquipGearModal from './equipGearModal';
 
+import FilterGroup from '@/components/ui/filterGroup';
+import FilterSidebar from '@/components/ui/filterSidebar';
+import Checkbox from '@/components/ui/checkbox';
+import UnequipDropdown from '@/components/inventory/equipment/unequipDropdown';
+import EquipBadge from '@/components/ui/equipBadge';
+import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
+
 const sortGearTypes = ['sortByName', 'sortByCon', 'sortByPer', 'sortByStr', 'sortByInt'];
 
 const sortGearTypeMap = {
@@ -262,10 +325,15 @@ const sortGearTypeMap = {
 export default {
   name: 'Equipment',
   components: {
+    SelectTranslatedArray,
+    EquipBadge,
+    UnequipDropdown,
+    Checkbox,
+    FilterSidebar,
+    FilterGroup,
     Item,
     ItemRows,
     EquipmentAttributesPopover,
-    StarBadge,
     Drawer,
     toggleSwitch,
     EquipGearModal,
@@ -452,6 +520,7 @@ export default {
         this.costumeMode = false;
       }
       setLocalSetting(CONSTANTS.keyConstants.CURRENT_EQUIPMENT_DRAWER_TAB, tabNameValue);
+      this.$store.state.equipmentDrawerOpen = true;
     },
     openEquipDialog (item) {
       this.gearToEquip = item;
diff --git a/website/client/src/components/inventory/equipment/unequipDropdown.vue b/website/client/src/components/inventory/equipment/unequipDropdown.vue
new file mode 100644
index 0000000000..a05eef067a
--- /dev/null
+++ b/website/client/src/components/inventory/equipment/unequipDropdown.vue
@@ -0,0 +1,123 @@
+<template>
+  <b-dropdown
+    right="right"
+    toggle-class="with-icon"
+  >
+     <template v-slot:button-content>
+       <span class="svg-icon inline color"
+            v-html="icons.unequipIcon">
+      </span>
+      <span class="button-label" v-once>{{ $t('unequip') }}</span>
+    </template>
+    <b-dropdown-item
+      @click="unequipBattleGear()"
+    >
+      {{ $t('battleGear') }}
+    </b-dropdown-item>
+    <b-dropdown-item
+      @click="unequipCostume()"
+    >
+      {{ $t('costume') }}
+    </b-dropdown-item>
+    <b-dropdown-item
+      @click="unequipPetMount()"
+    >
+      {{ $t('petAndMount') }}
+    </b-dropdown-item>
+    <b-dropdown-item
+      @click="unequipBackground()"
+    >
+      {{ $t('background') }}
+    </b-dropdown-item>
+    <b-dropdown-item
+      @click="unequipAllItems()"
+    >
+      {{ $t('allItems') }}
+    </b-dropdown-item>
+</b-dropdown>
+</template>
+
+<script>
+import {
+  UNEQUIP_ALL,
+  UNEQUIP_COSTUME,
+  UNEQUIP_EQUIPPED,
+  UNEQUIP_BACKGROUND,
+  UNEQUIP_PET_MOUNT,
+} from '../../../../../common/script/ops/unequip';
+
+import unequipIcon from '@/assets/svg/unequip.svg';
+
+export default {
+  name: 'unequipDropdown',
+  data () {
+    return {
+      icons: Object.freeze({
+        unequipIcon,
+      }),
+    };
+  },
+  methods: {
+    unequipPetMountBackground () {
+      this.$store.dispatch('user:unequip', {
+        type: UNEQUIP_PET_MOUNT,
+      });
+    },
+    unequipBattleGear () {
+      this.$store.dispatch('user:unequip', {
+        type: UNEQUIP_EQUIPPED,
+      });
+    },
+    unequipCostume () {
+      this.$store.dispatch('user:unequip', {
+        type: UNEQUIP_COSTUME,
+      });
+    },
+    unequipPetMount () {
+      this.$store.dispatch('user:unequip', {
+        type: UNEQUIP_PET_MOUNT,
+      });
+    },
+    unequipBackground () {
+      this.$store.dispatch('user:unequip', {
+        type: UNEQUIP_BACKGROUND,
+      });
+    },
+    unequipAllItems () {
+      this.$store.dispatch('user:unequip', {
+        type: UNEQUIP_ALL,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+::v-deep {
+  .btn {
+    display: flex;
+    align-items: center;
+
+    &::after {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.svg-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.5rem;
+}
+
+.button-label {
+  width: 3.25rem;
+  height: 1.5rem;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.71;
+}
+
+</style>
diff --git a/website/client/src/components/inventory/items/index.vue b/website/client/src/components/inventory/items/index.vue
index 7fd4e61594..35ff9a1633 100644
--- a/website/client/src/components/inventory/items/index.vue
+++ b/website/client/src/components/inventory/items/index.vue
@@ -5,71 +5,45 @@
     @mouseMoved="mouseMoved($event)"
   >
     <div class="standard-sidebar d-none d-sm-block">
-      <div class="form-group">
-        <input
-          v-model="searchText"
-          class="form-control input-search"
-          type="text"
-          :placeholder="$t('search')"
-        >
-      </div>
-      <div class="form">
-        <h2 v-once>
-          {{ $t('filter') }}
-        </h2>
-        <h3 v-once>
-          {{ $t('equipmentType') }}
-        </h3>
-        <div class="form-group">
-          <div
-            v-for="group in groups"
-            :key="group.key"
-            class="form-check"
+      <filter-sidebar>
+        <div class="form-group" slot="search">
+          <input
+            v-model="searchText"
+            class="form-control input-search"
+            type="text"
+            :placeholder="$t('search')"
           >
-            <div class="custom-control custom-checkbox">
-              <input
-                :id="group.key"
-                v-model="group.selected"
-                class="custom-control-input"
-                type="checkbox"
-              >
-              <label
-                v-once
-                class="custom-control-label"
-                :for="group.key"
-              >{{ $t(group.key) }}</label>
-            </div>
-          </div>
         </div>
-      </div>
+
+        <div class="form">
+          <filter-group :title="$t('equipmentType')">
+            <checkbox v-for="group in groups"
+                      :key="group.key"
+                      :id="group.key"
+                      :checked.sync="group.selected"
+                      :text="$t(group.key)"/>
+          </filter-group>
+        </div>
+      </filter-sidebar>
     </div>
     <div class="standard-page">
       <div class="clearfix">
         <h1
           v-once
-          class="float-left mb-4 page-header"
+          class="float-left mb-3 page-header"
         >
           {{ $t('items') }}
         </h1>
         <div class="float-right">
           <span class="dropdown-label">{{ $t('sortBy') }}</span>
-          <b-dropdown
-            :text="$t(sortBy)"
-            right="right"
-          >
-            <b-dropdown-item
-              :active="sortBy === 'quantity'"
-              @click="sortBy = 'quantity'"
-            >
-              {{ $t('quantity') }}
-            </b-dropdown-item>
-            <b-dropdown-item
-              :active="sortBy === 'AZ'"
-              @click="sortBy = 'AZ'"
-            >
-              {{ $t('AZ') }}
-            </b-dropdown-item>
-          </b-dropdown>
+          <select-translated-array
+            :right="true"
+            :items="['quantity', 'AZ']"
+            :value="sortBy"
+            @select="sortBy = $event"
+            class="inline"
+            :inlineDropdown="false"
+          />
         </div>
       </div>
 
@@ -80,7 +54,7 @@
         :key="group.key"
       >
         <!-- eslint-enable vue/no-use-v-if-with-v-for -->
-        <h2 class="d-flex align-items-center mb-3">
+        <h2 class="d-flex align-items-center mb-3 sub-header">
           {{ $t(group.key) }}
           <span
             v-if="group.key != 'special'"
@@ -320,6 +294,8 @@
 </template>
 
 <style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
   .eggInfo, .hatchingPotionInfo {
     position: absolute;
     left: -500px;
@@ -347,6 +323,7 @@
       text-align: center;
     }
   }
+
 </style>
 
 <script>
@@ -356,6 +333,7 @@ import moment from 'moment';
 import Item from '@/components/inventory/item';
 import ItemRows from '@/components/ui/itemRows';
 import CountBadge from '@/components/ui/countBadge';
+import FilterSidebar from '@/components/ui/filterSidebar';
 
 import cardsModal from './cards-modal';
 
@@ -369,6 +347,9 @@ import { createAnimal } from '@/libs/createAnimal';
 import notifications from '@/mixins/notifications';
 import DragDropDirective from '@/directives/dragdrop.directive';
 import MouseMoveDirective from '@/directives/mouseposition.directive';
+import FilterGroup from '@/components/ui/filterGroup';
+import Checkbox from '@/components/ui/checkbox';
+import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 
 const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
 
@@ -391,6 +372,9 @@ let lastMouseMoveEvent = {};
 export default {
   name: 'Items',
   components: {
+    SelectTranslatedArray,
+    Checkbox,
+    FilterGroup,
     Item,
     ItemRows,
     HatchedPetDialog,
@@ -398,6 +382,7 @@ export default {
     startQuestModal,
     cardsModal,
     QuestInfo,
+    FilterSidebar,
   },
   directives: {
     drag: DragDropDirective,
diff --git a/website/client/src/components/inventory/stable/hatchingModal.vue b/website/client/src/components/inventory/stable/hatchingModal.vue
index bf68909c42..ba05037e82 100644
--- a/website/client/src/components/inventory/stable/hatchingModal.vue
+++ b/website/client/src/components/inventory/stable/hatchingModal.vue
@@ -47,6 +47,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/mixins.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #hatching-modal {
     @include centeredModal();
@@ -66,7 +67,7 @@
       font-weight: bold;
       line-height: 1.2;
       text-align: center;
-      color: #4e4a57;
+      color: $gray-50;
     }
 
     .text {
@@ -75,7 +76,7 @@
       font-size: 14px;
       line-height: 1.43;
       text-align: center;
-      color: #686274;
+      color: $gray-100;
     }
 
     span.svg-icon.icon-10 {
@@ -87,6 +88,27 @@
     .modal-footer {
       justify-content: center;
     }
+
+    .potionEggGroup {
+      margin: 0 auto;
+    }
+
+    .potionEggBackground {
+      display: inline-flex;
+      align-items: center;
+      width: 112px;
+      height: 112px;
+      border-radius: 4px;
+      background-color: $gray-700;
+
+      &:first-child {
+        margin-right: 24px;
+      }
+
+      div {
+        margin: 0 auto;
+      }
+    }
   }
 </style>
 
diff --git a/website/client/src/components/inventory/stable/index.vue b/website/client/src/components/inventory/stable/index.vue
index 3e68179c51..d0415b9f78 100644
--- a/website/client/src/components/inventory/stable/index.vue
+++ b/website/client/src/components/inventory/stable/index.vue
@@ -5,92 +5,92 @@
     @mouseMoved="mouseMoved($event)"
   >
     <div class="standard-sidebar d-none d-sm-block">
-      <div>
+      <filter-sidebar>
+        <div slot="header">
+          <div
+            id="npmMattStable"
+            class="npc_matt"
+          ></div>
+          <b-popover
+            triggers="hover"
+            placement="right"
+            target="npmMattStable"
+          >
+            <h4
+              v-once
+              class="popover-content-title"
+            >
+              {{ $t('mattBoch') }}
+            </h4>
+            <div
+              v-once
+              class="popover-content-text"
+            >
+              {{ $t('mattBochText1') }}
+            </div>
+          </b-popover>
+        </div>
         <div
-          id="npmMattStable"
-          class="npc_matt"
-        ></div>
-        <b-popover
-          triggers="hover"
-          placement="right"
-          target="npmMattStable"
+          slot="search"
+          class="form-group"
         >
-          <h4
-            v-once
-            class="popover-content-title"
+          <input
+            v-model="searchText"
+            class="form-control input-search"
+            type="text"
+            :placeholder="$t('search')"
           >
-            {{ $t('mattBoch') }}
-          </h4>
-          <div
-            v-once
-            class="popover-content-text"
-          >
-            {{ $t('mattBochText1') }}
-          </div>
-        </b-popover>
-      </div>
-      <div class="form-group">
-        <input
-          v-model="searchText"
-          class="form-control input-search"
-          type="text"
-          :placeholder="$t('search')"
-        >
-      </div>
-      <div class="form">
-        <h2 v-once>
-          {{ $t('filter') }}
-        </h2>
-        <h3 v-once>
-          {{ $t('pets') }}
-        </h3>
-        <div class="form-group">
-          <div
-            v-for="petGroup in petGroups"
-            :key="petGroup.key"
-            class="form-check"
-          >
-            <div class="custom-control custom-checkbox">
-              <input
-                :id="petGroup.key"
-                v-model="viewOptions[petGroup.key].selected"
-                class="custom-control-input"
-                type="checkbox"
-                :disabled="viewOptions[petGroup.key].animalCount == 0"
-              >
-              <label
-                v-once
-                class="custom-control-label"
-                :for="petGroup.key"
-              >{{ petGroup.label }}</label>
+        </div>
+
+        <filter-group :title="$t('pets')">
+          <div class="form-group">
+            <div
+              v-for="petGroup in petGroups"
+              :key="petGroup.key"
+              class="form-check"
+            >
+              <div class="custom-control custom-checkbox">
+                <input
+                  :id="petGroup.key"
+                  v-model="viewOptions[petGroup.key].selected"
+                  class="custom-control-input"
+                  type="checkbox"
+                  :disabled="viewOptions[petGroup.key].animalCount == 0"
+                >
+                <label
+                  v-once
+                  class="custom-control-label"
+                  :for="petGroup.key"
+                >{{ petGroup.label }}</label>
+              </div>
             </div>
           </div>
-        </div>
-        <h3 v-once>
-          {{ $t('mounts') }}
-        </h3>
-        <div class="form-group">
-          <div
-            v-for="mountGroup in mountGroups"
-            :key="mountGroup.key"
-            class="form-check"
-          >
-            <div class="custom-control custom-checkbox">
-              <input
-                :id="mountGroup.key"
-                v-model="viewOptions[mountGroup.key].selected"
-                class="custom-control-input"
-                type="checkbox"
-                :disabled="viewOptions[mountGroup.key].animalCount == 0"
-              >
-              <label
-                v-once
-                class="custom-control-label"
-                :for="mountGroup.key"
-              >{{ mountGroup.label }}</label>
+        </filter-group>
+        <filter-group :title="$t('mounts')">
+          <div class="form-group">
+            <div
+              v-for="mountGroup in mountGroups"
+              :key="mountGroup.key"
+              class="form-check"
+            >
+              <div class="custom-control custom-checkbox">
+                <input
+                  :id="mountGroup.key"
+                  v-model="viewOptions[mountGroup.key].selected"
+                  class="custom-control-input"
+                  type="checkbox"
+                  :disabled="viewOptions[mountGroup.key].animalCount == 0"
+                >
+                <label
+                  v-once
+                  class="custom-control-label"
+                  :for="mountGroup.key"
+                >{{ mountGroup.label }}</label>
+              </div>
             </div>
           </div>
-        </div>
+        </filter-group>
+
         <div class="form-group clearfix">
           <h3 class="float-left">
             {{ $t('hideMissing') }}
@@ -101,7 +101,7 @@
             @change="updateHideMissing"
           />
         </div>
-      </div>
+      </filter-sidebar>
     </div>
     <div class="standard-page">
       <div class="clearfix">
@@ -113,19 +113,14 @@
         </h1>
         <div class="float-right">
           <span class="dropdown-label">{{ $t('sortBy') }}</span>
-          <b-dropdown
-            :text="$t(selectedSortBy)"
-            right="right"
-          >
-            <b-dropdown-item
-              v-for="sort in sortByItems"
-              :key="sort"
-              :active="selectedSortBy === sort"
-              @click="selectedSortBy = sort"
-            >
-              {{ $t(sort) }}
-            </b-dropdown-item>
-          </b-dropdown>
+          <select-translated-array
+            :right="true"
+            :items="sortByItems"
+            :value="selectedSortBy"
+            @select="selectedSortBy = $event"
+            class="inline"
+            :inlineDropdown="false"
+          />
         </div>
       </div>
       <h2 class="mb-3">
@@ -174,8 +169,8 @@
                 slot="itemBadge"
                 slot-scope="context"
               >
-                <starBadge
-                  :selected="context.item.key === currentPet"
+                <equip-badge
+                  :equipped="context.item.key === currentPet"
                   :show="isOwned('pet', context.item)"
                   @click="selectPet(context.item)"
                 />
@@ -183,13 +178,12 @@
             </petItem>
           </div>
         </div>
-        <div
+        <show-more-button
           v-if="petGroup.key !== 'specialPets' && !(petGroup.key === 'wackyPets' && selectedSortBy !== 'sortByColor')"
-          class="btn btn-flat btn-show-more"
+          :show-all="$_openedItemRows_isToggled(petGroup.key)"
+          class="show-more-button"
           @click="setShowMore(petGroup.key)"
-        >
-          {{ $_openedItemRows_isToggled(petGroup.key) ? $t('showLess') : $t('showMore') }}
-        </div>
+        />
       </div>
       <h2>
         {{ $t('mounts') }}
@@ -234,8 +228,8 @@
               <template
                 slot="itemBadge"
               >
-                <starBadge
-                  :selected="item.key === currentMount"
+                <equip-badge
+                  :equipped="item.key === currentMount"
                   :show="isOwned('mount', item)"
                   @click="selectMount(item)"
                 />
@@ -243,13 +237,11 @@
             </mountItem>
           </div>
         </div>
-        <div
+        <show-more-button
           v-if="mountGroup.key !== 'specialMounts'"
-          class="btn btn-flat btn-show-more"
+          :show-all="$_openedItemRows_isToggled(mountGroup.key)"
           @click="setShowMore(mountGroup.key)"
-        >
-          {{ $_openedItemRows_isToggled(mountGroup.key) ? $t('showLess') : $t('showMore') }}
-        </div>
+        />
       </div>
       <inventoryDrawer>
         <template
@@ -332,50 +324,17 @@
   @import '~@/assets/scss/colors.scss';
   @import '~@/assets/scss/mixins.scss';
 
-  .standard-page .clearfix .float-right {
-    margin-right: 24px;
-  }
-
   .inventory-item-container {
     padding: 20px;
     border: 1px solid;
     display: inline-block;
   }
 
-  .hatchablePopover {
-    width: 180px
-  }
-
-  .potionEggGroup {
-    margin: 0 auto;
-  }
-
-  .potionEggBackground {
-    display: inline-flex;
-    align-items: center;
-
-    width: 112px;
-    height: 112px;
-    border-radius: 4px;
-    background-color: #f9f9f9;
-
-    &:first-child {
-      margin-right: 24px;
-    }
-
-    & div {
-      margin: 0 auto;
-    }
-  }
-
   .GreyedOut {
     opacity: 0.3;
   }
 
   .item.item-empty {
-    width: 94px;
-    height: 92px;
-    border-radius: 2px;
     background-color: #edecee;
   }
 
@@ -389,6 +348,10 @@
       padding-right:0;
     }
 
+    .standard-page .clearfix .float-right {
+      margin-right: 24px;
+    }
+
     .svg-icon.inline.icon-16 {
       vertical-align: bottom;
     }
@@ -439,8 +402,7 @@
     width: 180px;
 
     .potionEggGroup {
-      margin: 0 auto;
-      margin-top: 10px;
+      margin: 10px auto 0;
     }
 
     .potionEggBackground {
@@ -456,7 +418,7 @@
         margin-right: 24px;
       }
 
-      & div {
+      div {
         margin: 0 auto;
       }
     }
@@ -480,7 +442,6 @@ import MountRaisedModal from './mountRaisedModal';
 import WelcomeModal from './welcomeModal';
 import HatchingModal from './hatchingModal';
 import toggleSwitch from '@/components/ui/toggleSwitch';
-import StarBadge from '@/components/ui/starBadge';
 import InventoryDrawer from '@/components/shared/inventoryDrawer';
 
 import ResizeDirective from '@/directives/resize.directive';
@@ -497,6 +458,11 @@ import petMixin from '@/mixins/petMixin';
 
 import { CONSTANTS, setLocalSetting, getLocalSetting } from '@/libs/userlocalManager';
 import { isOwned } from '../../../libs/createAnimal';
+import FilterSidebar from '@/components/ui/filterSidebar';
+import FilterGroup from '@/components/ui/filterGroup';
+import ShowMoreButton from '@/components/ui/showMoreButton';
+import EquipBadge from '@/components/ui/equipBadge';
+import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 
 // TODO Normalize special pets and mounts
 // import Store from '@/store';
@@ -507,11 +473,15 @@ let lastMouseMoveEvent = {};
 
 export default {
   components: {
+    SelectTranslatedArray,
+    EquipBadge,
+    ShowMoreButton,
+    FilterGroup,
+    FilterSidebar,
     PetItem,
     FoodItem,
     MountItem,
     toggleSwitch,
-    StarBadge,
     HatchedPetDialog,
     MountRaisedModal,
     WelcomeModal,
@@ -832,9 +802,6 @@ export default {
 
       return groupBy(mounts, groupKey);
     },
-    hasDrawerTabItems (index) {
-      return this.drawerTabs && this.drawerTabs[index].items.length !== 0;
-    },
     // Actions
     updateHideMissing (newVal) {
       this.hideMissing = newVal;
diff --git a/website/client/src/components/payments/buttons/list.vue b/website/client/src/components/payments/buttons/list.vue
index ab13fea223..5f06500061 100644
--- a/website/client/src/components/payments/buttons/list.vue
+++ b/website/client/src/components/payments/buttons/list.vue
@@ -2,14 +2,14 @@
   <div class="payments-column mx-auto mt-auto">
     <button
       v-if="stripeAvailable"
-      class="btn btn-primary payment-button payment-item"
+      class="btn btn-primary payment-button payment-item with-icon"
       :class="{disabled}"
       :disabled="disabled"
       @click="stripeFn()"
     >
       <div
         v-once
-        class="svg-icon credit-card-icon"
+        class="svg-icon color credit-card-icon"
         v-html="icons.creditCardIcon"
       ></div>
       {{ $t('card') }}
diff --git a/website/client/src/components/secondaryMenu.vue b/website/client/src/components/secondaryMenu.vue
index 6e438f8dff..5a12154b38 100644
--- a/website/client/src/components/secondaryMenu.vue
+++ b/website/client/src/components/secondaryMenu.vue
@@ -11,18 +11,22 @@
   background: $gray-600;
   box-shadow: 0 1px 2px 0 rgba($black, 0.2);
   z-index: 9;
+  height: 3rem;
 }
 
 .nav-link {
-  font-size: 16px;
-  line-height: 1.5;
-  padding: 16px 24px;
+  font-size: 14px;
   font-weight: bold;
+  line-height: 1.71;
+  text-align: center;
+
+  padding: 0.75rem;
+
   color: $gray-50;
 
   &.active {
-    color: $purple-200;
-    box-shadow: 0px -4px 0px $purple-300 inset;
+    color: $purple-300;
+    box-shadow: 0px -0.25rem 0px $purple-300 inset;
   }
 
   &:hover {
diff --git a/website/client/src/components/shared/closeIcon.vue b/website/client/src/components/shared/closeIcon.vue
new file mode 100644
index 0000000000..739ddaa591
--- /dev/null
+++ b/website/client/src/components/shared/closeIcon.vue
@@ -0,0 +1,53 @@
+<template>
+  <button title="close dialog"
+          @click="$emit('click', $event)">
+    <div v-once
+         class="svg-icon"
+         v-html="icons.close"
+    ></div>
+  </button>
+</template>
+
+<script>
+import svgClose from '@/assets/svg/close.svg';
+
+export default {
+  name: 'closeIcon',
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+      }),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    cursor: pointer;
+    opacity: 1;
+
+    border: 0;
+    outline: 0;
+    padding: 0.125rem;
+    background: transparent;
+    width: 1rem;
+    height: 1rem;
+
+    ::v-deep svg path {
+      stroke: $gray-200;
+    }
+
+    &:hover {
+      ::v-deep svg path {
+        stroke: $gray-100;
+      }
+    }
+  }
+</style>
diff --git a/website/client/src/components/shared/inventoryDrawer.vue b/website/client/src/components/shared/inventoryDrawer.vue
index 1b4b945543..7d5605787b 100644
--- a/website/client/src/components/shared/inventoryDrawer.vue
+++ b/website/client/src/components/shared/inventoryDrawer.vue
@@ -1,12 +1,23 @@
 <template>
   <drawer
     class="inventoryDrawer"
-    :title="$t('quickInventory')"
+    :no-title-bottom-padding="true"
     :error-message="inventoryDrawerErrorMessage(selectedDrawerItemType)"
+    ref="drawer"
   >
+    <div slot="drawer-title-row" class="title-row-tabs">
+      <div class="drawer-tab" v-for="(tab, index) of filteredTabs"
+           :key="tab.key">
+        <a
+          class="drawer-tab-text"
+          :class="{'drawer-tab-text-active': filteredTabs[selectedDrawerTab].key === tab.key}"
+          @click.prevent.stop="tabSelected(index); $refs.drawer.open();"
+        >{{ tab.label }}</a>
+      </div>
+    </div>
     <div slot="drawer-header">
       <drawer-header-tabs
-        :tabs="filteredTabs"
+        :tabs="[]"
         @changedPosition="tabSelected($event)"
       >
         <div slot="right-item">
@@ -15,7 +26,7 @@
             id="petLikeToEatMarket"
             class="drawer-help-text"
           >
-            {{ $t('petLikeToEat') + ' ' }}
+            <span>{{ $t('petLikeToEat') + ' ' }}</span>
             <span
               class="svg-icon inline icon-16"
               v-html="icons.information"
@@ -178,5 +189,28 @@ export default {
     .drawer-slider {
       height: 126px;
     }
+
+    .drawer-tab-text {
+      display: inline-block;
+    }
+
+    .drawer-help-text {
+      display: flex;
+      margin-top: 0.65rem;
+
+      .svg-icon {
+        position: inherit;
+        top: 0;
+      }
+    }
+
+    .title-row-tabs {
+      display: flex;
+      justify-content: center;
+
+      .drawer-tab {
+        background: transparent;
+      }
+    }
   }
 </style>
diff --git a/website/client/src/components/tasks/modal-controls/selectDifficulty.vue b/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
index c6bc8e8d34..5b52499f5b 100644
--- a/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
+++ b/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
@@ -7,6 +7,7 @@
       :class="{disabled: disabled}"
       :disabled="disabled"
       :value="selected"
+      :hide-icon="true"
       @select="$emit('select', $event.value)"
     >
       <template v-slot:item="{ item, button }">
diff --git a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
index 2add616e24..0b201f3d11 100644
--- a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
+++ b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
@@ -6,6 +6,9 @@
       class="array-select"
       :class="{disabled: disabled}"
       :disabled="disabled"
+      :right="right"
+      :hide-icon="false"
+      :inline-dropdown="inlineDropdown"
       @select="selectItem($event)"
     >
       <template v-slot:item="{ item }">
@@ -60,6 +63,13 @@ export default {
       type: Boolean,
     },
     value: [String, Number, Object],
+    right: {
+      type: Boolean,
+    },
+    inlineDropdown: {
+      type: Boolean,
+      default: true,
+    },
   },
   data () {
     return {
diff --git a/website/client/src/components/tasks/user.vue b/website/client/src/components/tasks/user.vue
index bdea7150a5..97c252b2f6 100644
--- a/website/client/src/components/tasks/user.vue
+++ b/website/client/src/components/tasks/user.vue
@@ -251,10 +251,6 @@
     padding-top: 16px;
   }
 
-  .input-search, .search-button {
-    height: 40px;
-  }
-
   .tasks-navigation {
     margin-bottom: 20px;
   }
diff --git a/website/client/src/components/ui/buttons.stories.js b/website/client/src/components/ui/buttons.stories.js
new file mode 100644
index 0000000000..977b28e3d8
--- /dev/null
+++ b/website/client/src/components/ui/buttons.stories.js
@@ -0,0 +1,129 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import positiveIcon from '@/assets/svg/positive.svg';
+
+const stories = storiesOf('Buttons', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('all', () => ({
+    components: { },
+    data () {
+      return {
+        icon: positiveIcon,
+      };
+    },
+    template: `      
+      <div style="position: absolute; margin: 20px; display: flex; flex-direction: row;">
+        <div class="mr-3">
+          <h3>Button</h3>
+          <button class="btn btn-primary">Button Primary</button>
+          <br/><br/>
+          <button class="btn btn-primary" disabled>Button Primary Disabled</button>
+          <br/><br/>
+
+          <button class="btn btn-secondary">Button Secondary</button>
+          <br/><br/>
+          <button class="btn btn-secondary" disabled>Button Secondary Disabled</button>
+        </div>
+        <div class="">
+          <h3>Button with Icon</h3>
+          <button class="btn btn-primary with-icon">
+             <span class="svg-icon color inline icon-12 mr-2"
+                   v-html="icon"
+             >
+               
+             </span>
+            <span class="button-label">
+              Button Primary
+            </span>
+          </button>
+          <br/>
+          <button class="btn btn-primary with-icon" disabled>
+            <span class="svg-icon color inline icon-12 mr-2"
+                  v-html="icon"
+            >
+               
+             </span>
+            <span class="button-label">
+              Button Primary Disabled
+            </span>
+          </button>
+          <br/>
+
+          <button class="btn btn-secondary with-icon">
+            <span class="svg-icon color inline icon-12 mr-2"
+                  v-html="icon"
+            >
+               
+             </span>
+            <span class="button-label">
+              Button Secondary
+            </span>
+          </button>
+          <br/>
+          <button class="btn btn-secondary with-icon" disabled>
+            <span class="svg-icon color inline icon-12 mr-2"
+                  v-html="icon"
+            >
+               
+            </span>
+            <span class="button-label">
+              Button Secondary Disabled
+            </span>
+          </button>
+        </div>
+      </div>
+    `,
+  }))
+  .add('dropdowns', () => ({
+    components: { },
+    data () {
+      return {
+        items: ['one', 'two', 'three'],
+      };
+    },
+    template: `      
+      <div style="position: absolute; margin: 20px; display: flex; flex-direction: row;">
+        <div class="mr-3">
+          <h3>Dropdowns</h3>
+          <b-dropdown
+            text="Dropdown Primary"
+            right="right"
+          >
+            <b-dropdown-item
+              v-for="item in items"
+              :key="item"
+            >
+              {{ item }}
+            </b-dropdown-item>
+          </b-dropdown>
+          <br/><br/>
+          <b-dropdown
+            text="Dropdown Primary Disabled"
+            right="right"
+            disabled
+          >
+          </b-dropdown>
+        </div>
+        <div class="">
+          <h3>Button</h3>
+          <button class="btn btn-secondary">
+            <span class="button-label">
+              Button Primary
+            </span>
+          </button>
+          <br/>
+          <br/>
+          <button class="btn btn-secondary" disabled>
+            <span class="button-label">
+              Button Primary Disabled
+            </span>
+          </button>
+        </div>
+      </div>
+    `,
+  }));
diff --git a/website/client/src/components/ui/checkbox.vue b/website/client/src/components/ui/checkbox.vue
index ce8490116a..bb89f95652 100644
--- a/website/client/src/components/ui/checkbox.vue
+++ b/website/client/src/components/ui/checkbox.vue
@@ -26,6 +26,13 @@
   label:not(:disabled):not(.disabled) {
     cursor: pointer;
   }
+
+  .custom-control.custom-checkbox {
+    display: flex;
+    flex-direction: row;
+
+    justify-items: center;
+  }
 </style>
 
 <script>
diff --git a/website/client/src/components/ui/drawer.vue b/website/client/src/components/ui/drawer.vue
index 7998e3630a..5e83653f3b 100644
--- a/website/client/src/components/ui/drawer.vue
+++ b/website/client/src/components/ui/drawer.vue
@@ -2,9 +2,14 @@
   <div class="drawer-container">
     <div
       class="drawer-title"
+      :class="{'no-padding': noTitleBottomPadding}"
       @click="toggle()"
     >
-      {{ title }}
+      <div  class="title-row">
+        <slot name="drawer-title-row">
+          <div class="text-only">{{ title }}</div>
+        </slot>
+      </div>
       <div
         class="drawer-toggle-icon svg-icon icon-10"
         :class="{ closed: !isOpen }"
@@ -59,7 +64,7 @@
   .drawer-toggle-icon {
     position: absolute;
     right: 16px;
-    top: 16px;
+    bottom: 0;
 
     &.closed {
       top: 10px;
@@ -67,6 +72,7 @@
   }
 
   .drawer-title {
+    height: 2rem;
     position: relative;
     background-color: $gray-10;
     box-shadow: 0 1px 2px 0 rgba($black, 0.2);
@@ -74,9 +80,30 @@
     border-top-right-radius: 8px;
     border-top-left-radius: 8px;
     text-align: center;
-    line-height: 1.67;
+    line-height: 1.33;
     color: $white;
-    padding: 6px 0;
+
+    font-size: 12px;
+    font-weight: bold;
+    display: flex;
+
+    &.no-padding {
+      padding-bottom: 0;
+    }
+  }
+
+  .text-only {
+    padding-top: 0.5rem;
+  }
+
+  .title-row {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+
+    & > div {
+      flex: 1;
+    }
   }
 
   .drawer-content {
@@ -103,13 +130,14 @@
     &-text {
       font-size: 12px;
       font-weight: bold;
-      line-height: 1.67;
       text-align: center;
-      color: $white;
+      color: $gray-400;
+      text-decoration: none !important;
       border-bottom: 2px solid transparent;
-      padding: 0px 8px 8px 8px;
+      padding: 0.5rem;
 
-      &-active {
+      &-active, &:hover {
+        color: $white !important;
         border-color: $purple-400;
       }
     }
@@ -167,7 +195,6 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
     },
     errorMessage: {
       type: String,
@@ -175,10 +202,13 @@ export default {
     openStatus: {
       type: Number,
     },
+    noTitleBottomPadding: {
+      type: Boolean,
+    },
   },
   data () {
     return {
-      open: true,
+      isOpened: true,
       icons: Object.freeze({
         expand: expandIcon,
         minimize: minimizeIcon,
@@ -189,13 +219,17 @@ export default {
     isOpen () {
       // Open status is a number so we can tell if the value was passed
       if (this.openStatus !== undefined) return this.openStatus === 1;
-      return this.open;
+      return this.isOpened;
     },
   },
   methods: {
     toggle () {
-      this.open = !this.isOpen;
-      this.$emit('toggled', this.open);
+      this.isOpened = !this.isOpen;
+      this.$emit('toggled', this.isOpened);
+    },
+    open () {
+      this.isOpened = true;
+      this.$emit('toggled', this.isOpened);
     },
   },
 };
diff --git a/website/client/src/components/ui/equipBadge.vue b/website/client/src/components/ui/equipBadge.vue
new file mode 100644
index 0000000000..f6e378c76b
--- /dev/null
+++ b/website/client/src/components/ui/equipBadge.vue
@@ -0,0 +1,99 @@
+<template>
+  <span
+    v-if="show"
+    class="badge badge-round badge-item badge-equip"
+    :class="{'is-equipped': equipped === true}"
+    @click.stop="click"
+  >
+    <div
+      class="svg-icon color equip-icon"
+      v-html="icons.equip"
+      v-once
+    >
+    </div>
+    <div
+      class="svg-icon color unequip-icon"
+      v-html="icons.unEquip"
+      v-once
+    >
+    </div>
+  </span>
+</template>
+
+<style lang="scss">
+@import '~@/assets/scss/colors.scss';
+
+  .badge-equip {
+    cursor: pointer;
+    display: none;
+    left: -9px;
+    color: $gray-200;
+    background: $white;
+    padding: 0.375rem;
+
+    .unequip-icon {
+      display: none;
+    }
+
+    &.is-equipped {
+      display: block;
+      background: $teal-50;
+      color: $white;
+
+      &:hover {
+        .unequip-icon {
+          display: block;
+          color: $maroon-50;
+        }
+
+        .equip-icon {
+          display: none;
+        }
+
+        background: $white;
+      }
+    }
+
+    &:hover:not(.is-equipped) {
+      color: $purple-400;
+    }
+
+    .svg-icon {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .item:hover > .badge-equip {
+    display: block;
+  }
+</style>
+
+<script>
+import svgEquip from '@/assets/svg/equip.svg';
+import svgUnEquip from '@/assets/svg/unequip.svg';
+
+export default {
+  props: {
+    show: {
+      type: Boolean,
+    },
+    equipped: {
+      type: Boolean,
+    },
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        equip: svgEquip,
+        unEquip: svgUnEquip,
+      }),
+    };
+  },
+  methods: {
+    click () {
+      this.$emit('click');
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/ui/filterGroup.vue b/website/client/src/components/ui/filterGroup.vue
new file mode 100644
index 0000000000..b4f972a9b2
--- /dev/null
+++ b/website/client/src/components/ui/filterGroup.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h4>
+      {{ title }}
+    </h4>
+    <div class="form-group">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'filterGroup',
+  props: ['title'],
+};
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  h4 {
+    min-height: 1.5rem;
+  }
+
+  .form-group ::v-deep {
+    .form-check {
+      margin-bottom: 0.5rem;
+    }
+
+    .custom-checkbox {
+      // min height for longer labels
+      min-height: 1.5rem;
+    }
+  }
+</style>
diff --git a/website/client/src/components/ui/filterSidebar.vue b/website/client/src/components/ui/filterSidebar.vue
new file mode 100644
index 0000000000..28f91251a5
--- /dev/null
+++ b/website/client/src/components/ui/filterSidebar.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="filter">
+    <slot name="header"></slot>
+    <slot name="search"></slot>
+    <div class="form">
+      <h3 v-once class="filter-label">
+        {{ $t('filters') }}
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'filterSidebar',
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+.filter-label {
+  min-height: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+</style>
diff --git a/website/client/src/components/ui/itemRows.vue b/website/client/src/components/ui/itemRows.vue
index f0479722d9..954372126a 100644
--- a/website/client/src/components/ui/itemRows.vue
+++ b/website/client/src/components/ui/itemRows.vue
@@ -17,13 +17,11 @@
         {{ noItemsLabel }}
       </p>
     </div>
-    <div
+    <show-more-button
       v-if="items.length > itemsPerRow"
-      class="btn btn-flat btn-show-more"
       @click="toggleItemsToShow()"
-    >
-      {{ showAll ? $t('showLess') : $t('showMore') }}
-    </div>
+      :show-all="showAll"
+    />
     <div
       v-else
       class="fill-height"
@@ -32,12 +30,14 @@
 </template>
 
 <style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
   .fill-height {
     height: 38px; // button + margin + padding
   }
 
   .item-rows {
-    margin-right: -24px;
+    margin-right: -1.5rem;
   }
 </style>
 
@@ -45,9 +45,11 @@
 import _take from 'lodash/take';
 import ResizeDirective from '@/directives/resize.directive';
 import openedItemRowsMixin from '@/mixins/openedItemRows';
+import ShowMoreButton from '@/components/ui/showMoreButton';
 
 
 export default {
+  components: { ShowMoreButton },
   directives: {
     resize: ResizeDirective,
   },
diff --git a/website/client/src/components/ui/selectList.vue b/website/client/src/components/ui/selectList.vue
index 7f57027361..7212ac5863 100644
--- a/website/client/src/components/ui/selectList.vue
+++ b/website/client/src/components/ui/selectList.vue
@@ -1,9 +1,11 @@
 <template>
   <div>
     <b-dropdown
-      class="inline-dropdown"
+      class="select-list"
+      :class="{'inline-dropdown':inlineDropdown}"
       :toggle-class="isOpened ? 'active' : null"
       :disabled="disabled"
+      :right="right"
       @show="isOpened = true"
       @hide="isOpened = false"
     >
@@ -21,7 +23,12 @@
         v-for="item in items"
         :key="keyProp ? item[keyProp] : item"
         :disabled="typeof item[disabledProp] === 'undefined' ? false : item[disabledProp]"
-        :class="{active: item === selected, selectListItem: true}"
+        :active="item === selected"
+        :class="{
+          active: item === selected,
+          selectListItem: true,
+          showIcon: !hideIcon && item === selected
+        }"
         @click="selectItem(item)"
       >
         <slot
@@ -32,6 +39,12 @@
           <!-- Fallback content -->
           {{ item }}
         </slot>
+
+        <div
+          v-once
+          class="svg-icon color check-icon"
+          v-html="icons.check"
+        ></div>
       </b-dropdown-item>
     </b-dropdown>
   </div>
@@ -40,9 +53,30 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
+  .select-list ::v-deep .selectListItem {
+    position: relative;
+
+    &:not(.showIcon) {
+      .svg-icon.check-icon {
+        display: none;
+      }
+    }
+
+    .svg-icon.check-icon.color {
+      position: absolute;
+      right: 0.855rem;
+      top: 0.688rem;
+      bottom: 0.688rem;
+      width: 0.77rem;
+      height: 0.615rem;
+      color: $purple-300;
+    }
+  }
 </style>
 
 <script>
+import svgCheck from '@/assets/svg/check.svg';
+
 export default {
   props: {
     items: {
@@ -58,11 +92,24 @@ export default {
     disabledProp: {
       type: String,
     },
+    hideIcon: {
+      type: Boolean,
+    },
+    right: {
+      type: Boolean,
+    },
+    inlineDropdown: {
+      type: Boolean,
+      default: true,
+    },
   },
   data () {
     return {
       isOpened: false,
       selected: this.value,
+      icons: Object.freeze({
+        check: svgCheck,
+      }),
     };
   },
   methods: {
diff --git a/website/client/src/components/ui/showMoreButton.vue b/website/client/src/components/ui/showMoreButton.vue
new file mode 100644
index 0000000000..a2f5163e3c
--- /dev/null
+++ b/website/client/src/components/ui/showMoreButton.vue
@@ -0,0 +1,41 @@
+<template>
+  <button class="btn btn-flat btn-show-more mb-4"
+          @click="$emit('click')"
+  >
+    <span class="button-text">
+      {{ showAll ? $t('showLess') : $t('showMore') }}
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  props: ['showAll'],
+};
+</script>
+
+<style scoped lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .btn-show-more {
+    height: 2rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-radius: 2px;
+
+    .button-text {
+       height: 1.5rem;
+       font-size: 14px;
+       font-weight: bold;
+       line-height: 1.71;
+       text-align: center;
+       color: $gray-100;
+    }
+
+    &:hover {
+      .button-text {
+        color: $purple-300;
+      }
+    }
+  }
+</style>
diff --git a/website/client/src/components/ui/toggleSwitch.stories.js b/website/client/src/components/ui/toggleSwitch.stories.js
new file mode 100644
index 0000000000..5ae7e1c1ee
--- /dev/null
+++ b/website/client/src/components/ui/toggleSwitch.stories.js
@@ -0,0 +1,39 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { text, withKnobs } from '@storybook/addon-knobs';
+import toggleSwitch from './toggleSwitch';
+
+const stories = storiesOf('Toggle Switch', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('label only', () => ({
+    components: { toggleSwitch },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <toggle-switch :label="label"></toggle-switch>
+      </div>
+    `,
+    props: {
+      label: {
+        default: text('Label', 'example text'),
+      },
+    },
+  }))
+  .add('with description', () => ({
+    components: { toggleSwitch },
+    template: `
+      <div style="position: absolute; margin: 20px">
+        <toggle-switch :label="label" :hover-text="description"></toggle-switch>
+      </div>
+    `,
+    props: {
+      label: {
+        default: text('Label', 'example text'),
+      },
+      description: {
+        default: text('Description', 'description text'),
+      },
+    },
+  }));
diff --git a/website/client/src/components/ui/toggleSwitch.vue b/website/client/src/components/ui/toggleSwitch.vue
index dce32fcc4b..aa181865d5 100644
--- a/website/client/src/components/ui/toggleSwitch.vue
+++ b/website/client/src/components/ui/toggleSwitch.vue
@@ -1,16 +1,23 @@
 <template>
   <div class="popover-box">
     <div
-      :id="containerId"
       class="clearfix toggle-switch-outer"
     >
       <div
         v-if="label"
         class="float-left toggle-switch-description"
-        :class="hoverText ? 'hasPopOver' : ''"
+        :class="{'bold': boldLabel}"
       >
         <span>{{ label }}</span>
       </div>
+      <span
+        v-if="hoverText"
+        :id="containerId"
+        class="svg-icon inline icon-16  float-left"
+        v-html="icons.information"
+      >
+
+      </span>
       <div class="toggle-switch float-left">
         <input
           :id="toggleId"
@@ -51,11 +58,16 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
+  .toggle-switch-outer {
+    display: flex;
+    align-items: center;
+  }
+
   .toggle-switch {
     position: relative;
     width: 40px;
     user-select: none;
-    margin-left: 9px;
+    margin-left: 0.5rem;
   }
 
   .toggle-switch-description {
@@ -64,6 +76,10 @@
     }
   }
 
+  .svg-icon {
+    margin: 2px 0.5rem 2px 0.5rem;
+  }
+
   .toggle-switch-checkbox {
     display: none;
   }
@@ -74,7 +90,7 @@
     cursor: pointer;
     border-radius: 100px;
     margin-bottom: 0px;
-    margin-top: 3px;
+    margin-top: 2px;
   }
 
   .toggle-switch-inner {
@@ -110,7 +126,7 @@
     display: block;
     width: 20px;
     margin: -2px;
-    margin-top: 1px;
+    margin-top: 0;
     height: 20px;
     background: $white;
     position: absolute;
@@ -133,9 +149,15 @@
   .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
     right: 0px;
   }
+
+  .bold {
+    font-weight: bold;
+  }
 </style>
 
 <script>
+import svgInformation from '@/assets/svg/information.svg';
+
 export default {
   model: {
     prop: 'checked',
@@ -148,6 +170,10 @@ export default {
     label: {
       type: String,
     },
+    boldLabel: {
+      type: Boolean,
+      default: false,
+    },
     checked: {
       type: Boolean,
       default: false,
@@ -163,6 +189,10 @@ export default {
       // The container requires a unique id to link it to the pop-over
       containerId: this.generateId(),
       focused: false,
+
+      icons: Object.freeze({
+        information: svgInformation,
+      }),
     };
   },
   computed: {
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index ec5be70f9e..b1ebb40271 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -488,10 +488,10 @@
     margin-right: 1em;
 
     button {
-      width: 40px;
-      height: 40px;
-      padding: .7em;
-      margin-right: .5em;
+      width: 32px;
+      height: 32px;
+      padding: 0.5em;
+      margin-right: 0.5em;
     }
   }
 
diff --git a/website/client/src/store/actions/user.js b/website/client/src/store/actions/user.js
index 0d4327366b..0100a7f2bd 100644
--- a/website/client/src/store/actions/user.js
+++ b/website/client/src/store/actions/user.js
@@ -6,6 +6,7 @@ import { togglePinnedItem as togglePinnedItemOp } from '@/../../common/script/op
 import changeClassOp from '@/../../common/script/ops/changeClass';
 import disableClassesOp from '@/../../common/script/ops/disableClasses';
 import openMysteryItemOp from '@/../../common/script/ops/openMysteryItem';
+import { unEquipByType } from '../../../../common/script/ops/unequip';
 import markPMSRead from '../../../../common/script/ops/markPMSRead';
 
 export function fetch (store, options = {}) { // eslint-disable-line no-shadow
@@ -223,3 +224,19 @@ export function newPrivateMessageTo (store, params) {
     userStyles,
   };
 }
+
+export async function unequip (store, params) {
+  const user = store.state.user.data;
+
+  unEquipByType(user, { params });
+
+  const response = await axios.post(`/api/v4/user/unequip/${params.type}`);
+
+  store.dispatch('snackbars:add', {
+    title: 'Habitica',
+    text: response.data.message,
+    type: 'info',
+  });
+
+  return response.data.data;
+}
diff --git a/website/client/tests/unit/components/ui/drawer.spec.js b/website/client/tests/unit/components/ui/drawer.spec.js
index c2b2e661e8..3245744e33 100644
--- a/website/client/tests/unit/components/ui/drawer.spec.js
+++ b/website/client/tests/unit/components/ui/drawer.spec.js
@@ -5,7 +5,7 @@ describe('DrawerComponent', () => {
   it('sets the correct default data', () => {
     expect(DrawerComponent.data).to.be.a('function');
     const defaultData = DrawerComponent.data();
-    expect(defaultData.open).to.be.true;
+    expect(defaultData.isOpened).to.be.true;
   });
 
   it('renders the correct title', () => {
diff --git a/website/common/locales/en/challenge.json b/website/common/locales/en/challenge.json
index fa89a1c1e7..42d37b60e0 100644
--- a/website/common/locales/en/challenge.json
+++ b/website/common/locales/en/challenge.json
@@ -15,6 +15,7 @@
   "selectWinner": "Select a winner and close the challenge:",
   "endChallenge": "End Challenge",
   "filter": "Filter",
+  "filters": "Filters",
   "groups": "Groups",
   "category": "Category",
   "membership": "Membership",
diff --git a/website/common/locales/en/inventory.json b/website/common/locales/en/inventory.json
index d57c815d0f..8394d194c0 100644
--- a/website/common/locales/en/inventory.json
+++ b/website/common/locales/en/inventory.json
@@ -4,5 +4,7 @@
   "eggsItemType": "Eggs",
   "hatchingPotionsItemType": "Hatching Potions",
   "specialItemType": "Special items",
-  "lockedItem": "Locked Item"
+  "lockedItem": "Locked Item",
+  "petAndMount": "Pet and Mount",
+  "allItems": "All Items"
 }
diff --git a/website/common/locales/en/messages.json b/website/common/locales/en/messages.json
index b195e812aa..79d98479a9 100644
--- a/website/common/locales/en/messages.json
+++ b/website/common/locales/en/messages.json
@@ -12,6 +12,11 @@
   "messageDontEnjoyFood": "<%= egg %> eats <%= foodText %> but doesn't seem to enjoy it.",
   "messageBought": "Bought <%= itemText %>",
   "messageUnEquipped": "<%= itemText %> unequipped.",
+  "messageBattleGearUnEquipped": "Battle Gear unequipped.",
+  "messageCostumeUnEquipped": "Costume unequipped.",
+  "messagePetMountUnEquipped": "Pet and Mount unequipped.",
+  "messageBackgroundUnEquipped": "Background unequipped.",
+  "messageAllUnEquipped": "Everything unequipped.",
   "messageMissingEggPotion": "You're missing either that egg or that potion",
   "messageInvalidEggPotionCombo": "You can't hatch Quest Pet Eggs with Magic Hatching Potions! Try a different egg.",
   "messageAlreadyPet": "You already have that pet. Try hatching a different combination!",
diff --git a/website/common/script/index.js b/website/common/script/index.js
index d3e05c26af..672abbd9d5 100644
--- a/website/common/script/index.js
+++ b/website/common/script/index.js
@@ -87,6 +87,7 @@ import unlock from './ops/unlock';
 import updateTask from './ops/updateTask';
 // TODO under api.libs.statHelpers?
 import * as statHelpers from './statHelpers';
+import { unEquipByType } from './ops/unequip';
 
 const api = {};
 api.content = content;
@@ -182,6 +183,7 @@ api.ops = {
   reset,
   markPmsRead,
   pinnedGearUtils,
+  unEquipByType,
 };
 
 api.errorMessages = {
diff --git a/website/common/script/ops/index.js b/website/common/script/ops/index.js
index f3a773a8a0..df9f60eeea 100644
--- a/website/common/script/ops/index.js
+++ b/website/common/script/ops/index.js
@@ -31,6 +31,7 @@ import openMysteryItem from './openMysteryItem';
 import scoreTask from './scoreTask';
 import markPmsRead from './markPMSRead';
 import * as pinnedGearUtils from './pinnedGearUtils';
+import { unEquipByType } from './unequip';
 
 export default {
   sleep,
@@ -66,4 +67,5 @@ export default {
   scoreTask,
   markPmsRead,
   pinnedGearUtils,
+  unEquipByType,
 };
diff --git a/website/common/script/ops/unequip.js b/website/common/script/ops/unequip.js
new file mode 100644
index 0000000000..da3923685b
--- /dev/null
+++ b/website/common/script/ops/unequip.js
@@ -0,0 +1,78 @@
+import get from 'lodash/get';
+import content from '../content/index';
+import i18n from '../i18n';
+import {
+  BadRequest,
+} from '../libs/errors';
+import errorMessage from '../libs/errorMessage';
+
+export const UNEQUIP_PET_MOUNT = 'pet';
+export const UNEQUIP_BACKGROUND = 'background';
+export const UNEQUIP_ALL = 'all';
+export const UNEQUIP_COSTUME = 'costume';
+export const UNEQUIP_EQUIPPED = 'equipped';
+
+const allTypes = [
+  UNEQUIP_PET_MOUNT, UNEQUIP_BACKGROUND,
+  UNEQUIP_ALL, UNEQUIP_COSTUME, UNEQUIP_EQUIPPED,
+];
+
+function unequipEquipment (user, type) {
+  for (const gearType of content.gearTypes) {
+    user.items.gear[type][gearType] = `${gearType}_base_0`;
+  }
+}
+
+export function unEquipByType (user, req = {}) {
+  // Being type a parameter followed by another parameter
+  // when using the API it must be passes specifically in the URL, it's won't default to equipped
+  const type = get(req, 'params.type', 'equipped');
+
+  if (allTypes.indexOf(type) === -1) {
+    throw new BadRequest(errorMessage('invalidTypeEquip'));
+  }
+
+  let message;
+
+  switch (type) { // eslint-disable-line default-case
+    case UNEQUIP_PET_MOUNT: {
+      user.items.currentPet = '';
+      user.items.currentMount = '';
+
+      message = i18n.t('messagePetMountUnEquipped', {}, req.language);
+      break;
+    }
+    case UNEQUIP_BACKGROUND: {
+      user.preferences.background = '';
+
+      message = i18n.t('messageBackgroundUnEquipped', {}, req.language);
+      break;
+    }
+    case UNEQUIP_ALL: {
+      user.items.currentMount = '';
+      user.items.currentPet = '';
+      user.preferences.background = '';
+
+      unequipEquipment(user, UNEQUIP_COSTUME);
+      unequipEquipment(user, UNEQUIP_EQUIPPED);
+
+      message = i18n.t('messageAllUnEquipped', {}, req.language);
+      break;
+    }
+
+    case UNEQUIP_COSTUME:
+    case UNEQUIP_EQUIPPED: {
+      unequipEquipment(user, type);
+
+      message = i18n.t(type === UNEQUIP_COSTUME
+        ? 'messageCostumeUnEquipped'
+        : 'messageBattleGearUnEquipped', {}, req.language);
+
+      break;
+    }
+  }
+
+  const res = [user.items];
+  if (message) res.push(message);
+  return res;
+}
diff --git a/website/server/controllers/api-v4/user.js b/website/server/controllers/api-v4/user.js
index 6a75da5c7b..684d458dc1 100644
--- a/website/server/controllers/api-v4/user.js
+++ b/website/server/controllers/api-v4/user.js
@@ -1,6 +1,7 @@
 import { authWithHeaders } from '../../middlewares/auth';
 import * as userLib from '../../libs/user';
 import { verifyDisplayName } from '../../libs/user/validation';
+import common from '../../../common';
 
 const api = {};
 
@@ -244,4 +245,38 @@ api.verifyDisplayName = {
   },
 };
 
+/**
+ * @api {post} /api/v4/user/unequip/:type Unequip all items by type
+ * @apiName UserUnEquipByType
+ * @apiGroup User
+ *
+ * @apiParam (Path) {String="pet-mount-background","costume","equipped"} type The type of items
+ *                                                                       to unequip.
+ *
+ * @apiParamExample {URL} Example-URL
+ * https://habitica.com/api/v4/user/unequip/equipped
+ *
+ * @apiSuccess {Object} data user.items
+ * @apiSuccess {String} message Optional success message for unequipping an items
+ *
+ * @apiSuccessExample {json} Example return:
+ *  {
+ *   "success": true,
+ *   "data": {---DATA TRUNCATED---},
+ *   "message": "Battle Gear unequipped.
+ * }
+ *
+ */
+api.unequip = {
+  method: 'POST',
+  middlewares: [authWithHeaders()],
+  url: '/user/unequip/:type',
+  async handler (req, res) {
+    const { user } = res.locals;
+    const equipRes = common.ops.unEquipByType(user, req);
+    await user.save();
+    res.respond(200, ...equipRes);
+  },
+};
+
 export default api;