diff --git a/src/assets/bulma-variables.scss b/src/assets/bulma-variables.scss
index ed5746d..18d5260 100644
--- a/src/assets/bulma-variables.scss
+++ b/src/assets/bulma-variables.scss
@@ -12,6 +12,7 @@ $input-focus-color: lighten($input-color, 10%);
 $input-hover-color: lighten($text, 7.5%);
 $input-background-color: $background;
 $input-border-color: lighten($input-background-color, 10%);
+$button-hover-color: lighten(invert($text), 5%);
 
 // These values are same as Bulma's default, however,
 // we need here in order not to load entire Bulma files for these values.
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index aa6e7d1..71101c9 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -3,6 +3,7 @@ $background: #2c3e50;
 $body-background-color: #131a22; // == darken(#1c2732, 5%);
 $border: #46627f;
 $link: #2fe3be;
+$modal-background-color: rgba($background, 0.6);
 
 $twitter-color: lighten(#1da1f2, 10%);
 
diff --git a/src/components/ResultsFilter.vue b/src/components/ResultsFilter.vue
index 3f32177..82e2e23 100644
--- a/src/components/ResultsFilter.vue
+++ b/src/components/ResultsFilter.vue
@@ -1,18 +1,28 @@
 <template>
   <div>
-    <template v-if="isFilterAvailable('is_cleared')" class="columns">
-      <div class="column is-4">
-        <form-field label="Result">
-          <div class="select is-fullwidth">
-            <select v-model="filter.is_cleared">
-              <option :value="undefined">-</option>
-              <option :value="true">Clear</option>
-              <option :value="false">Fail</option>
-            </select>
-          </div>
-        </form-field>
-      </div>
-    </template>
+    <div class="columns">
+      <template v-if="isFilterAvailable('is_cleared')" class="columns">
+        <div class="column is-4">
+          <form-field label="Result">
+            <div class="select is-fullwidth">
+              <select v-model="filter.is_cleared">
+                <option :value="undefined">-</option>
+                <option :value="true">Clear</option>
+                <option :value="false">Fail</option>
+              </select>
+            </div>
+          </form-field>
+        </div>
+      </template>
+
+      <template v-if="isFilterAvailable('is_cleared')" class="columns">
+        <div class="column is-4">
+          <form-field label="Weapons">
+            <weapon-picker :value.sync="filter.weapons" />
+          </form-field>
+        </div>
+      </template>
+    </div>
 
     <template v-if="isFilterAvailable('golden_egg')">
       <h2><img src="@/assets/golden-egg.png">Golden eggs</h2>
@@ -75,8 +85,6 @@
         </div>
       </div>
     </template>
-
-    <!-- <h2>Weapons</h2> -->
   </div>
 </template>
 
@@ -97,6 +105,7 @@ import { idKeyMapModule } from '@/store/modules/id-key-map';
 import { translate } from '@/helper';
 
 import FormField from '@/components/FormField.vue';
+import WeaponPicker from '@/components/WeaponPicker.vue';
 
 const allAvailableFilters: FilterType[] = ['is_cleared', 'golden_egg', 'power_egg', 'events', 'stages', 'weapons', 'special'];
 
@@ -178,6 +187,8 @@ export const restoreFilters = (serialziedFilters: string): ResultsFilter => {
     defaultFilter.golden_egg.max = filter.max_golden_egg || defaultFilter.golden_egg.max;
     defaultFilter.power_egg.min = filter.min_power_egg || defaultFilter.power_egg.min;
     defaultFilter.power_egg.max = filter.max_power_egg || defaultFilter.power_egg.max;
+    defaultFilter.stages = filter.stages ? filter.stages : defaultFilter.stages;
+    defaultFilter.weapons = filter.weapons ? filter.weapons : defaultFilter.weapons;
 
     return defaultFilter;
   } catch (_) {
@@ -187,7 +198,7 @@ export const restoreFilters = (serialziedFilters: string): ResultsFilter => {
 
 @Component({
   name: 'results-filter',
-  components: { FormField },
+  components: { FormField, WeaponPicker },
   computed: mapGetters('id-key-map', ['stageIds']),
   methods: { translate },
 })
diff --git a/src/components/WeaponPicker.vue b/src/components/WeaponPicker.vue
new file mode 100644
index 0000000..c40ca02
--- /dev/null
+++ b/src/components/WeaponPicker.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="container">
+    <div class="is-flex" style="align-items: center;">
+      <button class="button" @click="openModal">Open</button>
+      <p style="margin-left: .5em;">({{selectedWeapons.length}}/{{weapons.length}})</p>
+    </div>
+
+    <div :class="['modal', isOpen ? 'is-active' : '']">
+      <div class="modal-background" @click="closeModal"></div>
+      <div class="modal-content">
+        <div class="modal-controls">
+          <button class="button" v-if="isInitialState" @click="selectAll">Select All</button>
+          <button class="button" v-else @click="unselectAll">Unselect All</button>
+          <button class="button is-success" @click="closeModal">Close</button>
+        </div>
+
+        <div class="weapon-icon-container" v-for="weaponId in weapons" :key="weaponId" @click="toggleSelection(weaponId)">
+          <img
+            :class="['weapon-icon', selectedWeapons.includes(weaponId) ? 'is-selected' : '']"
+            :src="iconUrl('weapon', weaponId)"
+          >
+          <span v-if="counts[weaponId]" class="count">{{ counts[weaponId] }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/variables.scss';
+
+.modal {
+  padding: 0 1.5em;
+  background: $modal-background-color;
+}
+
+.modal-controls {
+  display: flex;
+  justify-content: space-between;
+}
+
+img:not(.is-selected) {
+  filter: grayscale(1);
+  opacity: .5;
+}
+
+.weapon-icon-container {
+  margin: 8px;
+  width: 32px;
+  height: 32px;
+  display: inline-block;
+  position: relative;
+}
+img {
+  position: static;
+}
+.count {
+  font-size: 80%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 0 .125em;
+  background-color: rgba(0,0,0,0.5);
+  color: white;
+}
+</style>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
+import { mapState } from 'vuex';
+import { iconUrl } from '@/helper';
+import { idKeyMapModule } from '@/store/modules/id-key-map';
+
+@Component({
+  methods: { iconUrl },
+})
+export default class WeaponPicker extends Vue {
+  get allWeapons(): number[] {
+    return idKeyMapModule.weaponIds;
+  }
+  get isInitialState(): boolean {
+    return this.selectedWeapons.length === 0;
+  }
+  get weapons(): number[] {
+    if (this.options.length > 0) {
+      return this.allWeapons.filter((weaponId) => this.options.includes(weaponId));
+    }
+    return this.allWeapons;
+  }
+
+  @PropSync('value', {
+    type: Array,
+  })
+  selectedWeapons!: number[];
+
+  @Prop({
+    type: Array,
+    default: () => [],
+  })
+  options!: number[];
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  counts!: { [key: string]: number };
+
+  isOpen: boolean = false;
+
+  closeModal() {
+    this.isOpen = false;
+  }
+
+  openModal() {
+    this.isOpen = true;
+  }
+
+  selectAll() {
+    this.selectedWeapons = this.weapons.map((weaponId) => weaponId);
+  }
+
+  toggleSelection(weaponId: number) {
+    if (this.selectedWeapons.includes(weaponId)) {
+      this.selectedWeapons = this.selectedWeapons.filter((w) => w !== weaponId);
+      return;
+    }
+    this.selectedWeapons = [...this.selectedWeapons, weaponId];
+  }
+
+  initialize() {
+    this.unselectAll();
+  }
+
+  unselectAll() {
+    this.selectedWeapons = [];
+  }
+
+  @Watch('options')
+  onOptionsUpdate() {
+    this.initialize();
+  }
+
+  mounted() {
+    if (!this.selectedWeapons) {
+      this.initialize();
+    }
+  }
+};
+</script>