diff --git a/backend/app/service/app.go b/backend/app/service/app.go
index f48624933..be48f7caf 100644
--- a/backend/app/service/app.go
+++ b/backend/app/service/app.go
@@ -189,9 +189,7 @@ func (a AppService) Install(ctx context.Context, req request.AppInstallCreate) (
 	if err := checkRequiredAndLimit(app); err != nil {
 		return nil, err
 	}
-	if err := copyAppData(app.Key, appDetail.Version, req.Name, req.Params); err != nil {
-		return nil, err
-	}
+
 	paramByte, err := json.Marshal(req.Params)
 	if err != nil {
 		return nil, err
@@ -211,16 +209,25 @@ func (a AppService) Install(ctx context.Context, req request.AppInstallCreate) (
 	if err := yaml.Unmarshal([]byte(appDetail.DockerCompose), &composeMap); err != nil {
 		return nil, err
 	}
-	servicesMap := composeMap["services"].(map[string]interface{})
+
+	value, ok := composeMap["services"]
+	if !ok {
+		return nil, buserr.New("")
+	}
+	servicesMap := value.(map[string]interface{})
 	changeKeys := make(map[string]string, len(servicesMap))
-	for k, v := range servicesMap {
+	index := 0
+	for k := range servicesMap {
 		serviceName := k + "-" + common.RandStr(4)
 		changeKeys[k] = serviceName
-		value := v.(map[string]interface{})
 		containerName := constant.ContainerPrefix + k + "-" + common.RandStr(4)
-		value["container_name"] = containerName
+		if index > 0 {
+			continue
+		}
+		req.Params["CONTAINER_NAME"] = containerName
 		appInstall.ServiceName = serviceName
 		appInstall.ContainerName = containerName
+		index++
 	}
 	for k, v := range changeKeys {
 		servicesMap[v] = servicesMap[k]
@@ -232,6 +239,10 @@ func (a AppService) Install(ctx context.Context, req request.AppInstallCreate) (
 	}
 	appInstall.DockerCompose = string(composeByte)
 
+	if err := copyAppData(app.Key, appDetail.Version, req.Name, req.Params); err != nil {
+		return nil, err
+	}
+
 	fileOp := files.NewFileOp()
 	if err := fileOp.WriteFile(appInstall.GetComposePath(), strings.NewReader(string(composeByte)), 0775); err != nil {
 		return nil, err
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index b02f3cedf..160137047 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -857,7 +857,7 @@ export default {
         deleteWarn:
             'The delete operation will delete all data and backups together. This operation cannot be rolled back. Do you want to continue? ',
         syncSuccess: 'Sync successfully',
-        canUpdate: 'Upgraded',
+        canUpdate: 'Upgrade',
         backup: 'Backup',
         backupName: 'File Name',
         backupPath: 'File Path',
diff --git a/frontend/src/views/app-store/detail/install/index.vue b/frontend/src/views/app-store/detail/install/index.vue
index 9c55a9231..80519c0a9 100644
--- a/frontend/src/views/app-store/detail/install/index.vue
+++ b/frontend/src/views/app-store/detail/install/index.vue
@@ -10,7 +10,7 @@
             <Header :header="$t('app.install')" :back="handleClose" />
         </template>
 
-        <el-row>
+        <el-row v-loading="loading">
             <el-col :span="22" :offset="1">
                 <el-form
                     ref="paramForm"
@@ -64,7 +64,7 @@ let form = ref<{ [key: string]: any }>({});
 let rules = ref<FormRules>({
     NAME: [Rules.linuxName],
 });
-let loading = false;
+let loading = ref(false);
 const paramForm = ref<FormInstance>();
 const req = reactive({
     appDetailId: 0,
@@ -99,10 +99,15 @@ const submit = async (formEl: FormInstance | undefined) => {
         req.appDetailId = installData.value.appDetailId;
         req.params = form.value;
         req.name = form.value['NAME'];
-        InstallApp(req).then(() => {
-            handleClose();
-            router.push({ path: '/apps/installed' });
-        });
+        loading.value = true;
+        InstallApp(req)
+            .then(() => {
+                handleClose();
+                router.push({ path: '/apps/installed' });
+            })
+            .finally(() => {
+                loading.value = false;
+            });
     });
 };