diff --git a/frontend/components/containers/annotation/ApproveButton.vue b/frontend/components/containers/annotation/ApproveButton.vue
index 4f102b9a..fd39f362 100644
--- a/frontend/components/containers/annotation/ApproveButton.vue
+++ b/frontend/components/containers/annotation/ApproveButton.vue
@@ -6,13 +6,13 @@
         min-width="36"
         outlined
         v-on="on"
-        @click="dialog=true"
+        @click="approveDocument"
       >
         <v-icon v-if="approved">
-          mdi-checkbox-blank-circle-outline
+          mdi-check-circle-outline
         </v-icon>
         <v-icon v-else>
-          mdi-check-circle-outline
+          mdi-checkbox-blank-circle-outline
         </v-icon>
       </v-btn>
     </template>
@@ -21,10 +21,23 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+
 export default {
-  data() {
-    return {
-      approved: true
+  props: {
+    approved: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+
+  methods: {
+    ...mapActions('documents', ['approve']),
+    approveDocument() {
+      this.approve({
+        projectId: this.$route.params.id
+      })
     }
   }
 }
diff --git a/frontend/pages/projects/_id/sequence-labeling/index.vue b/frontend/pages/projects/_id/sequence-labeling/index.vue
index 1ae4176e..aa969926 100644
--- a/frontend/pages/projects/_id/sequence-labeling/index.vue
+++ b/frontend/pages/projects/_id/sequence-labeling/index.vue
@@ -5,8 +5,8 @@
         no-gutters
         class="d-none d-sm-flex"
       >
-        <v-col>
-          <approve-button />
+        <v-col v-if="currentDoc">
+          <approve-button :approved="approved" />
           <filter-button />
           <guideline-button />
         </v-col>
@@ -61,7 +61,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters('documents', ['currentDoc'])
+    ...mapGetters('documents', ['currentDoc', 'approved'])
   },
 
   validate({ params }) {
diff --git a/frontend/services/document.service.js b/frontend/services/document.service.js
index 7b4fe751..de8eeaf5 100644
--- a/frontend/services/document.service.js
+++ b/frontend/services/document.service.js
@@ -43,6 +43,10 @@ class DocumentService {
     }
     return this.request.get(`/projects/${projectId}/docs/download`, config)
   }
+
+  approveDocument(projectId, docId, payload) {
+    return this.request.post(`/projects/${projectId}/docs/${docId}/approve-labels`, payload)
+  }
 }
 
 export default new DocumentService()
diff --git a/frontend/store/documents.js b/frontend/store/documents.js
index 3679c001..80d775b7 100644
--- a/frontend/store/documents.js
+++ b/frontend/store/documents.js
@@ -16,25 +16,6 @@ export const getters = {
   isDocumentSelected(state) {
     return state.selected.length > 0
   },
-  formatList() {
-    return [
-      {
-        type: 'csv',
-        text: 'Upload a CSV file from your computer',
-        accept: '.csv'
-      },
-      {
-        type: 'plain',
-        text: 'Upload text items from your computer',
-        accept: '.txt'
-      },
-      {
-        type: 'json',
-        text: 'Upload a JSON file from your computer',
-        accept: '.json,.jsonl'
-      }
-    ]
-  },
   headers() {
     return [
       {
@@ -51,6 +32,9 @@ export const getters = {
       }
     ]
   },
+  approved(state) {
+    return state.items[state.current].annotation_approver !== null
+  },
   parsedDoc(state) {
     if ('data' in state.parsed) {
       return state.parsed.data
@@ -226,5 +210,18 @@ export const actions = {
       .catch((error) => {
         alert(error)
       })
+  },
+  approve({ commit, getters }, payload) {
+    const documentId = getters.currentDoc.id
+    const data = {
+      approved: !getters.currentDoc.annotation_approver
+    }
+    DocumentService.approveDocument(payload.projectId, documentId, data)
+      .then((response) => {
+        commit('updateDocument', response)
+      })
+      .catch((error) => {
+        alert(error)
+      })
   }
 }