diff --git a/frontend/src/components/backup/index.vue b/frontend/src/components/backup/index.vue
index 18d9ea882..9a813b590 100644
--- a/frontend/src/components/backup/index.vue
+++ b/frontend/src/components/backup/index.vue
@@ -43,14 +43,6 @@
                     <el-button type="primary" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
                         {{ $t('commons.button.delete') }}
                     </el-button>
-                    <el-form-item
-                        :label="$t('setting.compressPassword')"
-                        prop="secret"
-                        style="margin-top: 10px"
-                        v-if="type === 'app' || type === 'website'"
-                    >
-                        <el-input v-model="secret"></el-input>
-                    </el-form-item>
                 </template>
                 <el-table-column type="selection" fix />
                 <el-table-column :label="$t('commons.table.name')" prop="fileName" show-overflow-tooltip />
@@ -82,22 +74,28 @@
 
         <OpDialog ref="opRef" @search="search" />
     </div>
+
+    <AppBackUp ref="backupRef" @close="search" />
+    <AppRecover ref="recoverRef" />
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { computeSize, dateFormat, downloadFile } from '@/utils/util';
-import { getBackupList, handleBackup, handleRecover } from '@/api/modules/setting';
+import { getBackupList } from '@/api/modules/setting';
 import i18n from '@/lang';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { deleteBackupRecord, downloadBackupRecord, searchBackupRecords } from '@/api/modules/setting';
 import { Backup } from '@/api/interface/backup';
-import { MsgSuccess } from '@/utils/message';
 import router from '@/routers';
+import AppBackUp from '@/views/app-store/installed/backup/index.vue';
+import AppRecover from '@/views/app-store/installed/recover/index.vue';
 
 const selects = ref<any>([]);
 const loading = ref();
 const opRef = ref();
+const backupRef = ref();
+const recoverRef = ref();
 
 const data = ref();
 const paginationConfig = reactive({
@@ -177,60 +175,25 @@ const search = async () => {
 };
 
 const onBackup = async () => {
-    ElMessageBox.confirm(
-        i18n.global.t('commons.msg.backupHelper', [name.value + '( ' + detailName.value + ' )']),
-        i18n.global.t('commons.button.backup'),
-        {
-            confirmButtonText: i18n.global.t('commons.button.confirm'),
-            cancelButtonText: i18n.global.t('commons.button.cancel'),
-        },
-    ).then(async () => {
-        let params = {
-            type: type.value,
-            name: name.value,
-            detailName: detailName.value,
-            secret: secret.value,
-        };
-        loading.value = true;
-        await handleBackup(params)
-            .then(() => {
-                loading.value = false;
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                search();
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-    });
+    let params = {
+        type: type.value,
+        name: name.value,
+        detailName: detailName.value,
+        secret: secret.value,
+    };
+    backupRef.value.acceptParams(params);
 };
 
 const onRecover = async (row: Backup.RecordInfo) => {
-    ElMessageBox.confirm(
-        i18n.global.t('commons.msg.recoverHelper', [row.fileName]),
-        i18n.global.t('commons.button.recover'),
-        {
-            confirmButtonText: i18n.global.t('commons.button.confirm'),
-            cancelButtonText: i18n.global.t('commons.button.cancel'),
-        },
-    ).then(async () => {
-        let params = {
-            source: row.source,
-            type: type.value,
-            name: name.value,
-            detailName: detailName.value,
-            file: row.fileDir + '/' + row.fileName,
-            secret: secret.value,
-        };
-        loading.value = true;
-        await handleRecover(params)
-            .then(() => {
-                loading.value = false;
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-    });
+    let params = {
+        source: row.source,
+        type: type.value,
+        name: name.value,
+        detailName: detailName.value,
+        file: row.fileDir + '/' + row.fileName,
+        secret: secret.value,
+    };
+    recoverRef.value.acceptParams(params);
 };
 
 const onDownload = async (row: Backup.RecordInfo) => {
diff --git a/frontend/src/components/upload/index.vue b/frontend/src/components/upload/index.vue
index 5f8354506..672005881 100644
--- a/frontend/src/components/upload/index.vue
+++ b/frontend/src/components/upload/index.vue
@@ -68,14 +68,6 @@
                         >
                             {{ $t('commons.button.delete') }}
                         </el-button>
-                        <el-form-item
-                            :label="$t('setting.compressPassword')"
-                            prop="secret"
-                            style="margin-top: 10px"
-                            v-if="type === 'app' || type === 'website'"
-                        >
-                            <el-input v-model="secret"></el-input>
-                        </el-form-item>
                     </template>
                     <el-table-column type="selection" fix />
                     <el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="name" />
@@ -102,12 +94,12 @@
 
         <OpDialog ref="opRef" @search="search" />
     </div>
+    <AppRecover ref="recoverRef" />
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { computeSize } from '@/utils/util';
-import { handleRecoverByUpload } from '@/api/modules/setting';
 import i18n from '@/lang';
 import { UploadFile, UploadFiles, UploadInstance } from 'element-plus';
 import { File } from '@/api/interface/file';
@@ -115,6 +107,7 @@ import DrawerHeader from '@/components/drawer-header/index.vue';
 import { BatchDeleteFile, CheckFile, ChunkUploadFileData, GetUploadList } from '@/api/modules/files';
 import { loadBaseDir } from '@/api/modules/setting';
 import { MsgError, MsgSuccess } from '@/utils/message';
+import AppRecover from '@/views/app-store/installed/recover/index.vue';
 
 const loading = ref();
 const isUpload = ref();
@@ -122,6 +115,7 @@ const uploadPercent = ref<number>(0);
 const selects = ref<any>([]);
 const baseDir = ref();
 const opRef = ref();
+const recoverRef = ref();
 
 const data = ref();
 const title = ref();
@@ -186,32 +180,16 @@ const search = async () => {
 };
 
 const onRecover = async (row: File.File) => {
-    ElMessageBox.confirm(
-        i18n.global.t('commons.msg.recoverHelper', [row.name]),
-        i18n.global.t('commons.button.recover'),
-        {
-            confirmButtonText: i18n.global.t('commons.button.confirm'),
-            cancelButtonText: i18n.global.t('commons.button.cancel'),
-        },
-    ).then(async () => {
-        let params = {
-            source: 'LOCAL',
-            type: type.value,
-            name: name.value,
-            detailName: detailName.value,
-            file: baseDir.value + row.name,
-            secret: secret.value,
-        };
-        loading.value = true;
-        await handleRecoverByUpload(params)
-            .then(() => {
-                loading.value = false;
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-    });
+    let params = {
+        source: 'LOCAL',
+        type: type.value,
+        name: name.value,
+        detailName: detailName.value,
+        file: baseDir.value + row.name,
+        secret: secret.value,
+        recoverType: 'upload',
+    };
+    recoverRef.value.acceptParams(params);
 };
 
 const uploaderFiles = ref<UploadFiles>([]);
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 029ea8a4a..c0d8d71ce 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -1546,6 +1546,8 @@ const message = {
         menu: 'Menu',
         confirmMessage: 'The page will be refreshed to update the advanced menu list. Continue?',
         compressPassword: 'Compression Password',
+        backupRecoverMessage:
+            'If you need to set a compression or decompression password, please enter it. (Leave blank if not needed)',
     },
     license: {
         community: 'Community Edition: ',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index f2195046f..802fc35d7 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -1438,6 +1438,7 @@ const message = {
         menu: '選單',
         confirmMessage: '即將刷新頁面更新高級功能菜單列表，是否繼續？',
         compressPassword: '壓縮密碼',
+        backupRecoverMessage: '如果需要設定壓縮或者解壓縮密碼，請輸入。（不填則不設定）',
     },
     license: {
         community: '社區版：',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index eb1af8ac4..a15340ecb 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1439,6 +1439,7 @@ const message = {
         menu: '菜单',
         confirmMessage: '即将刷新页面更新高级功能菜单列表，是否继续？',
         compressPassword: '压缩密码',
+        backupRecoverMessage: '如果需要设置压缩或者解压缩密码，请输入。（不填则不设置）',
     },
     license: {
         community: '社区版：',
diff --git a/frontend/src/views/app-store/installed/backup/index.vue b/frontend/src/views/app-store/installed/backup/index.vue
new file mode 100644
index 000000000..38b4e673a
--- /dev/null
+++ b/frontend/src/views/app-store/installed/backup/index.vue
@@ -0,0 +1,96 @@
+<template>
+    <el-dialog
+        v-model="open"
+        :title="$t('commons.button.backup') + ' - ' + appInstallName"
+        width="40%"
+        :close-on-click-modal="false"
+        :before-close="handleClose"
+    >
+        <el-form ref="backupForm" label-position="left" v-loading="loading">
+            <el-form-item
+                :label="$t('setting.compressPassword')"
+                style="margin-top: 10px"
+                v-if="backupReq.type === 'app' || backupReq.type === 'website'"
+            >
+                <el-input v-model="backupReq.secret" :placeholder="$t('setting.backupRecoverMessage')" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose" :disabled="loading">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button type="primary" @click="submit" :disabled="loading">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import i18n from '@/lang';
+import { handleBackup } from '@/api/modules/setting';
+import { MsgSuccess } from '@/utils/message';
+
+let appInstallName = ref('');
+let loading = ref(false);
+let open = ref(false);
+const backupForm = ref<FormInstance>();
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+interface DialogProps {
+    type: string;
+    name: string;
+    detailName: string;
+    status: string;
+}
+
+let backupReq = ref({
+    type: '',
+    name: '',
+    detailName: '',
+    secret: '',
+});
+
+const handleClose = () => {
+    open.value = false;
+};
+const acceptParams = (params: DialogProps): void => {
+    appInstallName.value = params.name;
+    backupReq.value = {
+        type: params.type,
+        name: params.name,
+        detailName: params.detailName,
+        secret: '',
+    };
+    open.value = true;
+};
+
+const submit = async () => {
+    let params = {
+        type: backupReq.value.type,
+        name: backupReq.value.name,
+        detailName: backupReq.value.detailName,
+        secret: backupReq.value.secret,
+    };
+    loading.value = true;
+    await handleBackup(params)
+        .then(() => {
+            loading.value = false;
+            handleClose();
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+            emit('search');
+        })
+        .catch(() => {
+            loading.value = false;
+        });
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/app-store/installed/recover/index.vue b/frontend/src/views/app-store/installed/recover/index.vue
new file mode 100644
index 000000000..ce2678c05
--- /dev/null
+++ b/frontend/src/views/app-store/installed/recover/index.vue
@@ -0,0 +1,116 @@
+<template>
+    <el-dialog
+        v-model="open"
+        :title="$t('commons.button.recover') + ' - ' + appInstallName"
+        width="40%"
+        :close-on-click-modal="false"
+        :before-close="handleClose"
+    >
+        <el-form ref="recoverForm" label-position="left" v-loading="loading">
+            <el-form-item
+                :label="$t('setting.compressPassword')"
+                style="margin-top: 10px"
+                v-if="recoverReq.type === 'app' || recoverReq.type === 'website'"
+            >
+                <el-input v-model="recoverReq.secret" :placeholder="$t('setting.backupRecoverMessage')" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose" :disabled="loading">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button type="primary" @click="submit" :disabled="loading">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+import { handleRecover, handleRecoverByUpload } from '@/api/modules/setting';
+
+let appInstallName = ref('');
+let loading = ref(false);
+let open = ref(false);
+const recoverForm = ref<FormInstance>();
+
+interface DialogProps {
+    source: string;
+    type: string;
+    name: string;
+    detailName: string;
+    file: string;
+    recoverType: string;
+}
+
+let recoverReq = ref({
+    source: '',
+    type: '',
+    name: '',
+    detailName: '',
+    file: '',
+    secret: '',
+    recoverType: '',
+});
+
+const handleClose = () => {
+    open.value = false;
+};
+const acceptParams = (params: DialogProps): void => {
+    appInstallName.value = params.name;
+    recoverReq.value = {
+        source: params.source,
+        type: params.type,
+        name: params.name,
+        detailName: params.detailName,
+        file: params.file,
+        secret: '',
+        recoverType: params.recoverType,
+    };
+    open.value = true;
+};
+
+const submit = async () => {
+    let params = {
+        source: recoverReq.value.source,
+        type: recoverReq.value.type,
+        name: recoverReq.value.name,
+        detailName: recoverReq.value.detailName,
+        file: recoverReq.value.file,
+        secret: recoverReq.value.secret,
+    };
+    loading.value = true;
+    if (recoverReq.value.recoverType === 'upload') {
+        await handleRecoverByUpload(params)
+            .then(() => {
+                loading.value = false;
+                handleClose();
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+        return false;
+    }
+    await handleRecover(params)
+        .then(() => {
+            loading.value = false;
+            handleClose();
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+        })
+        .catch(() => {
+            loading.value = false;
+        });
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
+<style scoped lang="scss"></style>