diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index c40f4c4b346d..4371ca39b604 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -92,7 +92,7 @@
                         <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <div>{{ $t('app.checkInstalledWarn', [data.app]) }}</div>
                             <span @click="goRouter(key)" class="flex items-center justify-center gap-0.5">
-                                <el-icon class="flex items-center justify-center"><Position /></el-icon>
+                                <el-icon><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
                         </div>
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 2e8002cf056f..f216f7dc95dd 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -229,15 +229,15 @@
             <LayoutContent :title="'MySQL ' + $t('menu.database')" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('app.checkInstalledWarn', [$t('database.noMysql')]) }}</span>
-                            <span @click="goRouter('app')">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="goRouter('app')" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index f127d3d78144..185af7f2044c 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -189,15 +189,15 @@
             <LayoutContent :title="'PostgreSQL ' + $t('menu.database')" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('app.checkInstalledWarn', [$t('database.noPostgresql')]) }}</span>
-                            <span @click="goRouter('app')">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="goRouter('app')" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index 39cc4361494e..9fcb087af289 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -99,15 +99,15 @@
             <LayoutContent :title="'Redis ' + $t('menu.database')" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('app.checkInstalledWarn', ['Redis']) }}</span>
-                            <span @click="goRouter('app')">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="goRouter('app')" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/host/firewall/forward/index.vue b/frontend/src/views/host/firewall/forward/index.vue
index f5a0090021e0..da43329009b0 100644
--- a/frontend/src/views/host/firewall/forward/index.vue
+++ b/frontend/src/views/host/firewall/forward/index.vue
@@ -61,15 +61,15 @@
                 <LayoutContent :title="$t('firewall.firewall')" :divider="true">
                     <template #main>
                         <div class="app-warn">
-                            <div>
+                            <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                                 <span>{{ $t('firewall.notSupport') }}</span>
-                                <span @click="toDoc">
-                                    <el-icon class="ml-2"><Position /></el-icon>
+                                <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                    <el-icon><Position /></el-icon>
                                     {{ $t('firewall.quickJump') }}
                                 </span>
-                                <div>
-                                    <img src="@/assets/images/no_app.svg" />
-                                </div>
+                            </div>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
                             </div>
                         </div>
                     </template>
diff --git a/frontend/src/views/host/firewall/ip/index.vue b/frontend/src/views/host/firewall/ip/index.vue
index 161e78015eb2..a61af4fe696d 100644
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@@ -99,15 +99,15 @@
                 <LayoutContent :title="$t('firewall.firewall')" :divider="true">
                     <template #main>
                         <div class="app-warn">
-                            <div>
+                            <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                                 <span>{{ $t('firewall.notSupport') }}</span>
-                                <span @click="toDoc">
-                                    <el-icon class="ml-2"><Position /></el-icon>
+                                <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                    <el-icon><Position /></el-icon>
                                     {{ $t('firewall.quickJump') }}
                                 </span>
-                                <div>
-                                    <img src="@/assets/images/no_app.svg" />
-                                </div>
+                            </div>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
                             </div>
                         </div>
                     </template>
@@ -130,6 +130,7 @@ import { Host } from '@/api/interface/host';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import {Position} from "@element-plus/icons-vue";
 
 const loading = ref();
 const activeTag = ref('address');
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index b26100b9a6af..b9ddfa43a731 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -149,15 +149,15 @@
                 <LayoutContent :title="$t('firewall.firewall')" :divider="true">
                     <template #main>
                         <div class="app-warn">
-                            <div>
+                            <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                                 <span>{{ $t('firewall.notSupport') }}</span>
-                                <span @click="toDoc">
-                                    <el-icon class="ml-2"><Position /></el-icon>
+                                <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                    <el-icon><Position /></el-icon>
                                     {{ $t('firewall.quickJump') }}
                                 </span>
-                                <div>
-                                    <img src="@/assets/images/no_app.svg" />
-                                </div>
+                            </div>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
                             </div>
                         </div>
                     </template>
diff --git a/frontend/src/views/toolbox/clam/status/index.vue b/frontend/src/views/toolbox/clam/status/index.vue
index da98622334dc..28dec602a8cd 100644
--- a/frontend/src/views/toolbox/clam/status/index.vue
+++ b/frontend/src/views/toolbox/clam/status/index.vue
@@ -76,15 +76,15 @@
         <LayoutContent :title="$t('toolbox.clam.clam')" :divider="true" v-if="!data.isExist" v-loading="loading">
             <template #main>
                 <div class="app-warn">
-                    <div>
+                    <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                         <span v-if="!data.isExist">{{ $t('toolbox.clam.noClam') }}</span>
-                        <span @click="toDoc()" v-if="!data.isExist">
-                            <el-icon class="ml-2"><Position /></el-icon>
+                        <span @click="toDoc()" v-if="!data.isExist" class="flex items-center justify-center gap-0.5">
+                            <el-icon><Position /></el-icon>
                             {{ $t('firewall.quickJump') }}
                         </span>
-                        <div>
-                            <img alt="" src="@/assets/images/no_app.svg" />
-                        </div>
+                    </div>
+                    <div>
+                        <img alt="" src="@/assets/images/no_app.svg" />
                     </div>
                 </div>
             </template>
diff --git a/frontend/src/views/toolbox/fail2ban/index.vue b/frontend/src/views/toolbox/fail2ban/index.vue
index d4491c4385c3..4eb624b000dc 100644
--- a/frontend/src/views/toolbox/fail2ban/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/index.vue
@@ -149,15 +149,15 @@
             <LayoutContent title="Fail2ban" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('toolbox.fail2ban.noFail2ban') }}</span>
-                            <span @click="toDoc">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('firewall.quickJump') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
index 08a02fa3357a..014fd20decbd 100644
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@@ -148,15 +148,15 @@
             <LayoutContent title="FTP" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('toolbox.ftp.noFtp') }}</span>
-                            <span @click="toDoc">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('firewall.quickJump') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/toolbox/supervisor/status/index.vue b/frontend/src/views/toolbox/supervisor/status/index.vue
index 9bd2b5277dd2..6f66ff0adcd7 100644
--- a/frontend/src/views/toolbox/supervisor/status/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/index.vue
@@ -40,17 +40,17 @@
         >
             <template #main>
                 <div class="app-warn">
-                    <div>
+                    <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                         <span v-if="!data.isExist">{{ $t('tool.supervisor.notSupport') }}</span>
                         <span v-else-if="!data.ctlExist">{{ $t('tool.supervisor.notSupportCrl') }}</span>
                         <span v-else-if="data.init">{{ $t('tool.supervisor.initHelper') }}</span>
-                        <span @click="toDoc()" v-if="!data.isExist || !data.ctlExist">
-                            <el-icon class="ml-2"><Position /></el-icon>
+                        <span @click="toDoc()" v-if="!data.isExist || !data.ctlExist" class="flex items-center justify-center gap-0.5">
+                            <el-icon><Position /></el-icon>
                             {{ $t('firewall.quickJump') }}
                         </span>
-                        <div>
-                            <img alt="" src="@/assets/images/no_app.svg" />
-                        </div>
+                    </div>
+                    <div>
+                        <img alt="" src="@/assets/images/no_app.svg" />
                     </div>
                 </div>
             </template>