diff --git a/src/api/settings.js b/src/api/settings.js
index 8596d18a9a7301f69fece05c1142208302047929..61c9523e0e8aac84fa5c5cbd3f2cc90e8ed75704 100644
--- a/src/api/settings.js
+++ b/src/api/settings.js
@@ -77,13 +77,13 @@ export async function fetchFrontends(authHost, token) {
   })
 }
 
-export async function installFrontend(name, ref, file, buildUrl, buildDir, authHost, token) {
+export async function installFrontend(data, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
     url: `/api/pleroma/admin/frontends/install`,
     method: 'post',
     headers: authHeaders(token),
-    data: { name, ref, file, build_url: buildUrl, build_dir: buildDir }
+    data
   })
 }
 
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index df6646899abf4399e1544f0fbac9e51b812f510e..05b3084e7cee6d9a800ca21879260d41c4a54abe 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -4,6 +4,7 @@ import {
   fetchFrontends,
   fetchSettings,
   getInstanceDocument,
+  installFrontend,
   removeSettings,
   updateInstanceDocument,
   updateSettings } from '@/api/settings'
@@ -121,6 +122,12 @@ const settings = {
       commit('TOGGLE_TABS', false)
       commit('SET_LOADING', false)
     },
+    async InstallFrontend({ commit, getters }, { name, _ref, _file, _buildUrl, _buildDir }) {
+      const { data } = _ref
+        ? await installFrontend({ name, ref: _ref, file: _file, build_url: _buildUrl, build_dir: _buildDir }, getters.authHost, getters.token)
+        : await installFrontend({ name }, getters.authHost, getters.token)
+      commit('SET_FRONTENDS', data)
+    },
     async RemoveInstanceDocument({ dispatch, getters }, name) {
       await deleteInstanceDocument(name, getters.authHost, getters.token)
       await dispatch('FetchInstanceDocument', name)
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index ee01e3cd379143b6a9b14f24da63ebcb6c9ef4ec..50cc471995ca6985b1195bb6d7e64ff163fcfb61 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -21,7 +21,7 @@
             prop="installed">
             <template slot-scope="scope">
               <el-button
-                v-if="!scope.row.installed"
+                v-if="scope.row.installed"
                 disabled
                 type="text"
                 size="small">
@@ -169,6 +169,9 @@ export default {
     await this.$store.dispatch('FetchFrontends')
   },
   methods: {
+    installFrontend({ name }) {
+      this.$store.dispatch('InstallFrontend', { name })
+    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')