diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index fc3315e80..1877a5721 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -161,27 +161,3 @@ onMounted(() => {
     onCheck();
 });
 </script>
-
-<style lang="scss">
-.app-warn {
-    text-align: center;
-    margin-top: 100px;
-    span:first-child {
-        color: #bbbfc4;
-    }
-
-    span:nth-child(2) {
-        color: $primary-color;
-        cursor: pointer;
-    }
-
-    span:nth-child(2):hover {
-        color: #74a4f3;
-    }
-
-    img {
-        width: 300px;
-        height: 300px;
-    }
-}
-</style>
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 9f8b8559c..08ec2d5c1 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -1227,6 +1227,8 @@ const message = {
             'This certificate has been associated with the following websites, and the renewal will be applied to these websites simultaneously',
     },
     firewall: {
+        notSupport:
+            'No system firewall detected (firewalld or ufw). Please refer to the official documentation for installation.',
         ccDeny: 'CC Protection',
         ipWhiteList: 'IP Whitelist',
         ipBlockList: 'IP Blacklist',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 93176dea6..1bd7ebf0d 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1220,6 +1220,7 @@ const message = {
         createAcme: '创建账户',
     },
     firewall: {
+        notSupport: '未检测到系统防火墙（firewalld 或者 ufw），请参考官方文档进行安装',
         ccDeny: 'CC 防护',
         ipWhiteList: 'IP 白名单',
         ipBlockList: 'IP 黑名单',
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 4437b7ed8..98f62fcf9 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -302,3 +302,25 @@
 .table-link:hover {
     opacity: 0.6;
 }
+
+.app-warn {
+    text-align: center;
+    margin-top: 100px;
+    span:first-child {
+        color: #bbbfc4;
+    }
+
+    span:nth-child(2) {
+        color: $primary-color;
+        cursor: pointer;
+    }
+
+    span:nth-child(2):hover {
+        color: #74a4f3;
+    }
+
+    img {
+        width: 300px;
+        height: 300px;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/views/host/firewall/ip/index.vue b/frontend/src/views/host/firewall/ip/index.vue
index 2c894c6a1..5979ad397 100644
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@@ -2,83 +2,109 @@
     <div v-loading="loading" style="position: relative">
         <FireRouter />
         <FireStatus
+            v-show="fireName !== '-'"
             ref="fireStatuRef"
             @search="search"
             v-model:loading="loading"
+            v-model:name="fireName"
             v-model:mask-show="maskShow"
             v-model:status="fireStatus"
         />
 
-        <el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
-            <span>{{ $t('firewall.firewallNotStart') }}</span>
-        </el-card>
+        <div v-if="fireName !== '-'">
+            <el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
+                <span>{{ $t('firewall.firewallNotStart') }}</span>
+            </el-card>
 
-        <LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: fireStatus != 'running' }">
-            <template #toolbar>
-                <el-row>
-                    <el-col :span="16">
-                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }}
-                        </el-button>
-                        <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
-                            {{ $t('commons.button.delete') }}
-                        </el-button>
-                    </el-col>
-                    <el-col :span="8">
-                        <TableSetting @search="search()" />
-                        <div class="search-button">
-                            <el-input
-                                v-model="searchName"
-                                clearable
-                                @clear="search()"
-                                suffix-icon="Search"
-                                @keyup.enter="search()"
-                                @blur="search()"
-                                :placeholder="$t('commons.button.search')"
-                            ></el-input>
-                        </div>
-                    </el-col>
-                </el-row>
-            </template>
-            <template #main>
-                <ComplexTable
-                    :pagination-config="paginationConfig"
-                    v-model:selects="selects"
-                    @search="search"
-                    :data="data"
-                >
-                    <el-table-column type="selection" fix />
-                    <el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
-                        <template #default="{ row }">
-                            <span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
-                            <span v-else>{{ $t('firewall.allIP') }}</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
-                        <template #default="{ row }">
-                            <el-button
-                                v-if="row.strategy === 'accept'"
-                                @click="onChangeStatus(row, 'drop')"
-                                link
-                                type="success"
+            <LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: fireStatus != 'running' }">
+                <template #toolbar>
+                    <el-row>
+                        <el-col :span="16">
+                            <el-button type="primary" @click="onOpenDialog('create')">
+                                {{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }}
+                            </el-button>
+                            <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
+                                {{ $t('commons.button.delete') }}
+                            </el-button>
+                        </el-col>
+                        <el-col :span="8">
+                            <TableSetting @search="search()" />
+                            <div class="search-button">
+                                <el-input
+                                    v-model="searchName"
+                                    clearable
+                                    @clear="search()"
+                                    suffix-icon="Search"
+                                    @keyup.enter="search()"
+                                    @blur="search()"
+                                    :placeholder="$t('commons.button.search')"
+                                ></el-input>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </template>
+                <template #main>
+                    <ComplexTable
+                        :pagination-config="paginationConfig"
+                        v-model:selects="selects"
+                        @search="search"
+                        :data="data"
+                    >
+                        <el-table-column type="selection" fix />
+                        <el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
+                            <template #default="{ row }">
+                                <span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
+                                <span v-else>{{ $t('firewall.allIP') }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
+                            <template #default="{ row }">
+                                <el-button
+                                    v-if="row.strategy === 'accept'"
+                                    @click="onChangeStatus(row, 'drop')"
+                                    link
+                                    type="success"
+                                >
+                                    {{ $t('firewall.allow') }}
+                                </el-button>
+                                <el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
+                                    {{ $t('firewall.deny') }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <fu-table-operations
+                            width="200px"
+                            :buttons="buttons"
+                            :ellipsis="10"
+                            :label="$t('commons.table.operate')"
+                            fix
+                        />
+                    </ComplexTable>
+                </template>
+            </LayoutContent>
+        </div>
+        <div v-else>
+            <LayoutContent :title="$t('firewall.firewall')" :divider="true">
+                <template #main>
+                    <div class="app-warn">
+                        <div>
+                            <span>{{ $t('firewall.notSupport') }}</span>
+                            <el-link
+                                style="font-size: 12px; margin-left: 5px"
+                                @click="toDoc"
+                                icon="Position"
+                                type="primary"
                             >
-                                {{ $t('firewall.allow') }}
-                            </el-button>
-                            <el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
-                                {{ $t('firewall.deny') }}
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                    <fu-table-operations
-                        width="200px"
-                        :buttons="buttons"
-                        :ellipsis="10"
-                        :label="$t('commons.table.operate')"
-                        fix
-                    />
-                </ComplexTable>
-            </template>
-        </LayoutContent>
+                                {{ $t('firewall.quickJump') }}
+                            </el-link>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </LayoutContent>
+        </div>
 
         <OperatrDialog @search="search" ref="dialogRef" />
     </div>
@@ -102,6 +128,7 @@ const loading = ref();
 const activeTag = ref('address');
 const selects = ref<any>([]);
 const searchName = ref();
+const fireName = ref();
 
 const maskShow = ref(true);
 const fireStatus = ref('running');
@@ -153,6 +180,10 @@ const onOpenDialog = async (
     dialogRef.value!.acceptParams(params);
 };
 
+const toDoc = () => {
+    window.open('https://1panel.cn/docs/user_manual/hosts/firewall/', '_blank');
+};
+
 const onChangeStatus = async (row: Host.RuleInfo, status: string) => {
     let operation =
         status === 'accept'
@@ -244,7 +275,9 @@ const buttons = [
 ];
 
 onMounted(() => {
-    loading.value = true;
-    fireStatuRef.value.acceptParams();
+    if (fireName.value !== '-') {
+        loading.value = true;
+        fireStatuRef.value.acceptParams();
+    }
 });
 </script>
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index b5bae2a47..3060e4a16 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -3,6 +3,7 @@
         <FireRouter />
 
         <FireStatus
+            v-show="fireName !== '-'"
             ref="fireStatuRef"
             @search="search"
             v-model:loading="loading"
@@ -10,107 +11,132 @@
             v-model:status="fireStatus"
             v-model:name="fireName"
         />
+        <div v-if="fireName !== '-'">
+            <el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
+                <span>{{ $t('firewall.firewallNotStart') }}</span>
+            </el-card>
 
-        <el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
-            <span>{{ $t('firewall.firewallNotStart') }}</span>
-        </el-card>
-
-        <LayoutContent :title="$t('firewall.portRule')" :class="{ mask: fireStatus != 'running' }">
-            <template #prompt>
-                <el-alert type="info" :closable="false">
-                    <template #default>
-                        <span>
-                            <span>{{ $t('firewall.dockerHelper', [fireName]) }}</span>
+            <LayoutContent :title="$t('firewall.portRule')" :class="{ mask: fireStatus != 'running' }">
+                <template #prompt>
+                    <el-alert type="info" :closable="false">
+                        <template #default>
+                            <span>
+                                <span>{{ $t('firewall.dockerHelper', [fireName]) }}</span>
+                                <el-link
+                                    style="font-size: 12px; margin-left: 5px"
+                                    icon="Position"
+                                    @click="quickJump()"
+                                    type="primary"
+                                >
+                                    {{ $t('firewall.quickJump') }}
+                                </el-link>
+                            </span>
+                        </template>
+                    </el-alert>
+                </template>
+                <template #toolbar>
+                    <el-row>
+                        <el-col :span="16">
+                            <el-button type="primary" @click="onOpenDialog('create')">
+                                {{ $t('commons.button.create') }}{{ $t('firewall.portRule') }}
+                            </el-button>
+                            <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
+                                {{ $t('commons.button.delete') }}
+                            </el-button>
+                        </el-col>
+                        <el-col :span="8">
+                            <TableSetting @search="search()" />
+                            <div class="search-button">
+                                <el-input
+                                    v-model="searchName"
+                                    clearable
+                                    @clear="search()"
+                                    suffix-icon="Search"
+                                    @keyup.enter="search()"
+                                    @blur="search()"
+                                    :placeholder="$t('commons.button.search')"
+                                ></el-input>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </template>
+                <template #main>
+                    <ComplexTable
+                        :pagination-config="paginationConfig"
+                        v-model:selects="selects"
+                        @search="search"
+                        :data="data"
+                    >
+                        <el-table-column type="selection" :selectable="selectable" fix />
+                        <el-table-column :label="$t('firewall.protocol')" :min-width="90" prop="protocol" />
+                        <el-table-column :label="$t('firewall.port')" :min-width="120" prop="port" />
+                        <el-table-column :label="$t('commons.table.status')" :min-width="120">
+                            <template #default="{ row }">
+                                <el-tag type="info" v-if="row.isUsed">
+                                    {{
+                                        row.appName
+                                            ? $t('firewall.used') + ' ( ' + row.appName + ' )'
+                                            : $t('firewall.used')
+                                    }}
+                                </el-tag>
+                                <el-tag type="success" v-else>{{ $t('firewall.unUsed') }}</el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
+                            <template #default="{ row }">
+                                <el-button
+                                    v-if="row.strategy === 'accept'"
+                                    :disabled="row.appName === '1panel'"
+                                    @click="onChangeStatus(row, 'drop')"
+                                    link
+                                    type="success"
+                                >
+                                    {{ $t('firewall.accept') }}
+                                </el-button>
+                                <el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
+                                    {{ $t('firewall.drop') }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
+                            <template #default="{ row }">
+                                <span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
+                                <span v-else>{{ $t('firewall.allIP') }}</span>
+                            </template>
+                        </el-table-column>
+                        <fu-table-operations
+                            width="200px"
+                            :buttons="buttons"
+                            :ellipsis="10"
+                            :label="$t('commons.table.operate')"
+                            fix
+                        />
+                    </ComplexTable>
+                </template>
+            </LayoutContent>
+        </div>
+        <div v-else>
+            <LayoutContent :title="$t('firewall.firewall')" :divider="true">
+                <template #main>
+                    <div class="app-warn">
+                        <div>
+                            <span>{{ $t('firewall.notSupport') }}</span>
                             <el-link
                                 style="font-size: 12px; margin-left: 5px"
+                                @click="toDoc"
                                 icon="Position"
-                                @click="quickJump()"
                                 type="primary"
                             >
                                 {{ $t('firewall.quickJump') }}
                             </el-link>
-                        </span>
-                    </template>
-                </el-alert>
-            </template>
-            <template #toolbar>
-                <el-row>
-                    <el-col :span="16">
-                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('commons.button.create') }}{{ $t('firewall.portRule') }}
-                        </el-button>
-                        <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
-                            {{ $t('commons.button.delete') }}
-                        </el-button>
-                    </el-col>
-                    <el-col :span="8">
-                        <TableSetting @search="search()" />
-                        <div class="search-button">
-                            <el-input
-                                v-model="searchName"
-                                clearable
-                                @clear="search()"
-                                suffix-icon="Search"
-                                @keyup.enter="search()"
-                                @blur="search()"
-                                :placeholder="$t('commons.button.search')"
-                            ></el-input>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
+                            </div>
                         </div>
-                    </el-col>
-                </el-row>
-            </template>
-            <template #main>
-                <ComplexTable
-                    :pagination-config="paginationConfig"
-                    v-model:selects="selects"
-                    @search="search"
-                    :data="data"
-                >
-                    <el-table-column type="selection" :selectable="selectable" fix />
-                    <el-table-column :label="$t('firewall.protocol')" :min-width="90" prop="protocol" />
-                    <el-table-column :label="$t('firewall.port')" :min-width="120" prop="port" />
-                    <el-table-column :label="$t('commons.table.status')" :min-width="120">
-                        <template #default="{ row }">
-                            <el-tag type="info" v-if="row.isUsed">
-                                {{
-                                    row.appName ? $t('firewall.used') + ' ( ' + row.appName + ' )' : $t('firewall.used')
-                                }}
-                            </el-tag>
-                            <el-tag type="success" v-else>{{ $t('firewall.unUsed') }}</el-tag>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
-                        <template #default="{ row }">
-                            <el-button
-                                v-if="row.strategy === 'accept'"
-                                :disabled="row.appName === '1panel'"
-                                @click="onChangeStatus(row, 'drop')"
-                                link
-                                type="success"
-                            >
-                                {{ $t('firewall.accept') }}
-                            </el-button>
-                            <el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
-                                {{ $t('firewall.drop') }}
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
-                        <template #default="{ row }">
-                            <span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
-                            <span v-else>{{ $t('firewall.allIP') }}</span>
-                        </template>
-                    </el-table-column>
-                    <fu-table-operations
-                        width="200px"
-                        :buttons="buttons"
-                        :ellipsis="10"
-                        :label="$t('commons.table.operate')"
-                        fix
-                    />
-                </ComplexTable>
-            </template>
-        </LayoutContent>
+                    </div>
+                </template>
+            </LayoutContent>
+        </div>
 
         <OperatrDialog @search="search" ref="dialogRef" />
     </div>
@@ -192,6 +218,9 @@ const onOpenDialog = async (
 const quickJump = () => {
     router.push({ name: 'ContainerSetting' });
 };
+const toDoc = () => {
+    window.open('https://1panel.cn/docs/user_manual/hosts/firewall/', '_blank');
+};
 
 const onChangeStatus = async (row: Host.RuleInfo, status: string) => {
     let operation =
@@ -300,7 +329,9 @@ const buttons = [
 ];
 
 onMounted(() => {
-    loading.value = true;
-    fireStatuRef.value.acceptParams();
+    if (fireName.value !== '-') {
+        loading.value = true;
+        fireStatuRef.value.acceptParams();
+    }
 });
 </script>
diff --git a/frontend/src/views/host/firewall/status/index.vue b/frontend/src/views/host/firewall/status/index.vue
index cd80aee19..8b24eb659 100644
--- a/frontend/src/views/host/firewall/status/index.vue
+++ b/frontend/src/views/host/firewall/status/index.vue
@@ -91,7 +91,7 @@ const onOperate = async (operation: string) => {
                     loadBaseInfo(true);
                 })
                 .catch(() => {
-                    emit('update:loading', false);
+                    loadBaseInfo(true);
                 });
         })
         .catch(() => {