diff --git a/frontend/src/components/system-upgrade/index.vue b/frontend/src/components/system-upgrade/index.vue
index ceb4a02c2..fb35d8adc 100644
--- a/frontend/src/components/system-upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/index.vue
@@ -7,18 +7,18 @@
         <el-tag v-else round style="margin-left: 10px">{{ $t('setting.upgrading') }}</el-tag>
     </div>
 
-    <el-drawer :close-on-click-modal="false" :key="refresh" v-model="drawerVisiable" size="50%">
+    <el-drawer :close-on-click-modal="false" :key="refresh" v-model="drawerVisiable" size="50%" append-to-body>
         <template #header>
             <DrawerHeader :header="$t('setting.upgrade')" :back="handleClose" />
         </template>
-        <el-form label-width="120px">
-            <el-form-item :label="$t('setting.newVersion')">
-                <el-tag>{{ upgradeInfo.newVersion }}</el-tag>
-            </el-form-item>
-            <el-form-item :label="$t('setting.upgradeNotes')">
-                <MdEditor style="height: calc(100vh - 330px)" v-model="upgradeInfo.releaseNote" previewOnly />
-            </el-form-item>
-        </el-form>
+        <div class="panel-MdEditor">
+            <div class="default-theme">
+                <h2 class="inline-block">{{ $t('setting.newVersion') }}</h2>
+                <el-tag class="inline-block tag">{{ upgradeInfo.newVersion }}</el-tag>
+            </div>
+            <MdEditor v-model="upgradeInfo.releaseNote" previewOnly />
+        </div>
+
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
@@ -29,6 +29,7 @@
 </template>
 <script setup lang="ts">
 import { getSettingInfo, loadUpgradeInfo, upgrade } from '@/api/modules/setting';
+import MdEditor from 'md-editor-v3';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { onMounted, ref } from 'vue';
@@ -98,4 +99,21 @@ onMounted(() => {
     text-decoration: none;
     letter-spacing: 0.5px;
 }
+.panel-MdEditor {
+    height: calc(100vh - 330px);
+    margin-left: 70px;
+    .tag {
+        margin-left: 20px;
+        margin-top: -6px;
+        vertical-align: middle;
+    }
+    :deep(.md-editor-preview) {
+        font-size: 14px;
+    }
+    :deep(.default-theme h2) {
+        margin: 13px 0;
+        padding: 0;
+        font-size: 16px;
+    }
+}
 </style>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 910c5d825..0e27fdfba 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -3,3 +3,4 @@
 @use './element-dark.scss';
 @use './reset.scss';
 @use './var.scss';
+@use 'md-editor-v3/lib/style.css';
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index f88ef62d8..f306e2dfc 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -94,7 +94,6 @@
 import { GetApp, GetAppDetail } from '@/api/modules/app';
 import LayoutContent from '@/layout/layout-content.vue';
 import MdEditor from 'md-editor-v3';
-import 'md-editor-v3/lib/style.css';
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Install from './install/index.vue';
diff --git a/frontend/src/views/setting/about/index.vue b/frontend/src/views/setting/about/index.vue
index fdfe64cdc..6d17505bd 100644
--- a/frontend/src/views/setting/about/index.vue
+++ b/frontend/src/views/setting/about/index.vue
@@ -38,7 +38,6 @@
 import LayoutContent from '@/layout/layout-content.vue';
 import { getSettingInfo, getSystemAvailable } from '@/api/modules/setting';
 import { onMounted, ref } from 'vue';
-import 'md-editor-v3/lib/style.css';
 import SystemUpgrade from '@/components/system-upgrade/index.vue';
 
 const version = ref();