diff --git a/frontend/components/containers/annotation/FilterButton.vue b/frontend/components/containers/annotation/FilterButton.vue
index 58646b82..8e7b81f0 100644
--- a/frontend/components/containers/annotation/FilterButton.vue
+++ b/frontend/components/containers/annotation/FilterButton.vue
@@ -40,7 +40,6 @@
 </template>
 
 <script>
-import { mapMutations, mapActions, mapGetters } from 'vuex'
 export default {
   data() {
     return {
@@ -53,33 +52,10 @@ export default {
     }
   },
 
-  computed: {
-    ...mapGetters('projects', ['getFilterOption'])
-  },
-
   watch: {
     selected() {
-      this.updateSearchOptions({
-        isChecked: this.items[this.selected].param,
-        filterName: this.getFilterOption
-      })
-      this.getDocumentList({
-        projectId: this.$route.params.id
-      })
-      this.setCurrent(0)
-      const checkpoint = {}
-      checkpoint[this.$route.params.id] = this.page
-      localStorage.setItem('checkpoint', JSON.stringify(checkpoint))
+      this.$emit('input', this.items[this.selected].param)
     }
-  },
-
-  created() {
-    this.initSearchOptions()
-  },
-
-  methods: {
-    ...mapActions('documents', ['getDocumentList']),
-    ...mapMutations('documents', ['setCurrent', 'updateSearchOptions', 'initSearchOptions'])
   }
 }
 </script>
diff --git a/frontend/layouts/annotation.vue b/frontend/layouts/annotation.vue
index f0a7ffa1..660c852d 100644
--- a/frontend/layouts/annotation.vue
+++ b/frontend/layouts/annotation.vue
@@ -32,7 +32,9 @@
               :approved="approved"
               :disabled="currentDoc ? false : true"
             />
-            <filter-button />
+            <filter-button
+              v-model="filterOption"
+            />
             <guideline-button />
           </v-col>
           <v-spacer />
@@ -92,12 +94,13 @@ export default {
   data() {
     return {
       drawerLeft: null,
+      filterOption: null,
       limit: 10
     }
   },
 
   computed: {
-    ...mapGetters('projects', ['getLink', 'getCurrentUserRole']),
+    ...mapGetters('projects', ['getLink', 'getCurrentUserRole', 'getFilterOption']),
     ...mapState('documents', ['loading', 'total']),
     ...mapGetters('documents', ['currentDoc', 'approved']),
     page: {
@@ -124,15 +127,14 @@ export default {
   watch: {
     offset: {
       handler() {
-        this.getDocumentList({
-          projectId: this.$route.params.id,
-          limit: this.limit,
-          offset: this.offset,
-          q: this.$route.query.q
-        })
+        this.search()
       },
       immediate: true
     },
+    filterOption() {
+      this.page = 1
+      this.search()
+    },
     current: {
       handler() {
         this.setCurrent(this.current)
@@ -148,7 +150,17 @@ export default {
   methods: {
     ...mapActions('projects', ['setCurrentProject']),
     ...mapActions('documents', ['getDocumentList']),
-    ...mapMutations('documents', ['setCurrent'])
+    ...mapMutations('documents', ['setCurrent']),
+    search() {
+      this.getDocumentList({
+        projectId: this.$route.params.id,
+        limit: this.limit,
+        offset: this.offset,
+        q: this.$route.query.q,
+        isChecked: this.filterOption,
+        filterName: this.getFilterOption
+      })
+    }
   },
 
   validate({ params, query }) {