diff --git a/agent/app/dto/response/app.go b/agent/app/dto/response/app.go
index d23922813674..2102019f48d3 100644
--- a/agent/app/dto/response/app.go
+++ b/agent/app/dto/response/app.go
@@ -178,6 +178,7 @@ type AppParam struct {
 }
 
 type AppConfig struct {
-	Params []AppParam `json:"params"`
+	Params     []AppParam `json:"params"`
+	RawCompose string     `json:"rawCompose"`
 	request.AppContainerConfig
 }
diff --git a/agent/app/service/app_install.go b/agent/app/service/app_install.go
index 031b8f3118f9..2a724a6dc264 100644
--- a/agent/app/service/app_install.go
+++ b/agent/app/service/app_install.go
@@ -796,6 +796,9 @@ func (a *AppInstallService) GetParams(id uint) (*response.AppConfig, error) {
 	res.RestartPolicy = getRestartPolicy(install.DockerCompose)
 	res.WebUI = install.WebUI
 	res.Type = install.App.Type
+	if rawCompose, err := getUpgradeCompose(install, detail); err == nil {
+		res.RawCompose = rawCompose
+	}
 	return &res, nil
 }
 
diff --git a/frontend/src/api/interface/app.ts b/frontend/src/api/interface/app.ts
index c66dd49748a5..9fd32c2f4e16 100644
--- a/frontend/src/api/interface/app.ts
+++ b/frontend/src/api/interface/app.ts
@@ -269,6 +269,7 @@ export namespace App {
 
     export interface AppConfig {
         params: InstallParams[];
+        rawCompose?: string;
         cpuQuota: number;
         memoryLimit: number;
         memoryUnit: string;
diff --git a/frontend/src/views/app-store/installed/detail/index.vue b/frontend/src/views/app-store/installed/detail/index.vue
index d455ad9e15d4..cdc8eb8fa8fb 100644
--- a/frontend/src/views/app-store/installed/detail/index.vue
+++ b/frontend/src/views/app-store/installed/detail/index.vue
@@ -126,22 +126,26 @@
                         <span class="input-help">{{ $t('app.editComposeHelper') }}</span>
                     </el-form-item>
                     <div v-if="paramModel.editCompose">
+                        <el-button @click="openDiff()" type="primary" class="!mb-2">
+                            {{ $t('app.showDiff') }}
+                        </el-button>
                         <CodemirrorPro v-model="paramModel.dockerCompose" mode="yaml"></CodemirrorPro>
                     </div>
                 </div>
             </el-form>
         </div>
         <template #footer v-if="edit">
-            <span>
-                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" :disabled="loading" @click="submit(paramForm)">
-                    {{ $t('commons.button.confirm') }}
-                </el-button>
-            </span>
+            <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button type="primary" :disabled="loading" @click="submit(paramForm)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
         </template>
+        <Diff ref="composeDiffRef" @confirm="getNewCompose" />
     </DrawerPro>
 </template>
 <script lang="ts" setup>
+import Diff from '@/views/app-store/installed/upgrade/diff/index.vue';
+
 import { App } from '@/api/interface/app';
 import { getAppInstallParams, updateAppInstallParams, updateInstallConfig } from '@/api/modules/app';
 import { reactive, ref } from 'vue';
@@ -200,6 +204,16 @@ const limits = ref<Container.ResourceLimit>({
     memory: null as number,
 });
 const oldMemory = ref<number>(0);
+const composeDiffRef = ref();
+const rawCompose = ref('');
+
+const getNewCompose = (compose: string) => {
+    paramModel.dockerCompose = compose;
+};
+
+const openDiff = () => {
+    composeDiffRef.value.acceptParams(rawCompose.value, paramModel.dockerCompose);
+};
 
 function checkWebUI() {
     if (webUI.domain !== '') {
@@ -266,6 +280,7 @@ const get = async () => {
     try {
         loading.value = true;
         const res = await getAppInstallParams(Number(paramData.value.id));
+        rawCompose.value = res.data.rawCompose;
         const configParams = res.data.params || [];
         if (configParams && configParams.length > 0) {
             configParams.forEach((d) => {
diff --git a/frontend/src/views/app-store/installed/upgrade/index.vue b/frontend/src/views/app-store/installed/upgrade/index.vue
index e67f5e94c468..158f5e634e01 100644
--- a/frontend/src/views/app-store/installed/upgrade/index.vue
+++ b/frontend/src/views/app-store/installed/upgrade/index.vue
@@ -70,12 +70,10 @@
             </div>
         </div>
         <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onOperate" :disabled="versions == null || loading">
-                    {{ $t('commons.button.confirm') }}
-                </el-button>
-            </span>
+            <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button type="primary" @click="onOperate" :disabled="versions == null || loading">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
         </template>
         <Diff ref="composeDiffRef" @confirm="getNewCompose" />
     </DrawerPro>