diff --git a/src/views/settings/components/WebPush.vue b/src/views/settings/components/WebPush.vue
index 7ca65648..28115093 100644
--- a/src/views/settings/components/WebPush.vue
+++ b/src/views/settings/components/WebPush.vue
@@ -1,19 +1,6 @@
 <template>
-  <el-form v-if="!loading" ref="vapidDetails" :model="vapidDetails" :label-width="labelWidth">
-    <el-form-item label="Subject">
-      <el-input :value="vapidDetails.subject" @input="updateSetting($event, 'vapid_details', 'subject')"/>
-      <p class="expl">A mailto link for the administrative contact. It’s best if this email is not a personal email address,
-      but rather a group email so that if a person leaves an organization, is unavailable for an extended period,
-      or otherwise can’t respond, someone else on the list can.</p>
-    </el-form-item>
-    <el-form-item label="Public key">
-      <el-input :value="vapidDetails.public_key" @input="updateSetting($event, 'vapid_details', 'public_key')"/>
-      <p class="expl">VAPID public key</p>
-    </el-form-item>
-    <el-form-item label="Private key">
-      <el-input :value="vapidDetails.private_key" @input="updateSetting($event, 'vapid_details', 'private_key')"/>
-      <p class="expl">VAPID private key</p>
-    </el-form-item>
+  <el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-width="labelWidth">
+    <setting :settings-group="vapidDetails" :data="vapidDetailsData"/>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">Submit</el-button>
     </el-form-item>
@@ -23,12 +10,14 @@
 <script>
 import i18n from '@/lang'
 import { mapGetters } from 'vuex'
+import Setting from './Setting'
 
 export default {
   name: 'WebPush',
+  components: { Setting },
   computed: {
     ...mapGetters([
-      'vapidDetails'
+      'settings'
     ]),
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -38,12 +27,15 @@ export default {
     },
     loading() {
       return this.$store.state.settings.loading
+    },
+    vapidDetails() {
+      return this.settings.description.find(setting => setting.key === ':vapid_details')
+    },
+    vapidDetailsData() {
+      return this.settings.settings[':vapid_details']
     }
   },
   methods: {
-    updateSetting(value, tab, input) {
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
-    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')