diff --git a/backend/utils/ssl/client.go b/backend/utils/ssl/client.go
index 754b47015..ccefdc807 100644
--- a/backend/utils/ssl/client.go
+++ b/backend/utils/ssl/client.go
@@ -10,6 +10,7 @@ import (
 	"github.com/go-acme/lego/v4/challenge/dns01"
 	"github.com/go-acme/lego/v4/lego"
 	"github.com/go-acme/lego/v4/providers/dns/alidns"
+	"github.com/go-acme/lego/v4/providers/dns/cloudflare"
 	"github.com/go-acme/lego/v4/providers/dns/dnspod"
 	"github.com/go-acme/lego/v4/providers/http/webroot"
 	"github.com/go-acme/lego/v4/registration"
@@ -62,8 +63,9 @@ func NewAcmeClient(email, privateKey string) (*AcmeClient, error) {
 type DnsType string
 
 const (
-	DnsPod DnsType = "DnsPod"
-	AliYun DnsType = "AliYun"
+	DnsPod     DnsType = "DnsPod"
+	AliYun     DnsType = "AliYun"
+	Cloudflare DnsType = "Cloudflare"
 )
 
 type DNSParam struct {
@@ -101,6 +103,15 @@ func (c *AcmeClient) UseDns(dnsType DnsType, params string) error {
 			return err
 		}
 	}
+	if dnsType == Cloudflare {
+		cloudflareConfig := cloudflare.NewDefaultConfig()
+		cloudflareConfig.AuthEmail = param.Email
+		cloudflareConfig.AuthKey = param.APIkey
+		p, err = cloudflare.NewDNSProviderConfig(cloudflareConfig)
+		if err != nil {
+			return err
+		}
+	}
 
 	return c.Client.Challenge.SetDNS01Provider(p, dns01.AddDNSTimeout(3*time.Minute))
 }
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 997c1604f..b2d00b9bd 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -729,7 +729,7 @@ export default {
         applySSL: '证书申请',
         SSLList: '证书列表',
         createDnsAccount: 'DNS账号',
-        aliyun: '阿里云',
+        aliyun: '阿里云DNS',
         manual: '手动解析',
         key: '密钥',
         check: '查看',
diff --git a/frontend/src/views/website/ssl/dns-account/create/index.vue b/frontend/src/views/website/ssl/dns-account/create/index.vue
index cdeb347d5..86176758c 100644
--- a/frontend/src/views/website/ssl/dns-account/create/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/create/index.vue
@@ -30,6 +30,14 @@
                     <el-input v-model="account.authorization['token']"></el-input>
                 </el-form-item>
             </div>
+            <div v-if="account.type === 'CloudFlare'">
+                <el-form-item label="EMAIL" prop="authorization.email">
+                    <el-input v-model="account.authorization['email']"></el-input>
+                </el-form-item>
+                <el-form-item label="API Key" prop="authorization.apiKey">
+                    <el-input v-model="account.authorization['apiKey']"></el-input>
+                </el-form-item>
+            </div>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -84,6 +92,8 @@ let rules = ref({
         secretKey: [Rules.requiredInput],
         id: [Rules.requiredInput],
         token: [Rules.requiredInput],
+        email: [Rules.requiredInput],
+        apiKey: [Rules.requiredInput],
     },
 });
 let account = ref({
diff --git a/frontend/src/views/website/ssl/dns-account/index.vue b/frontend/src/views/website/ssl/dns-account/index.vue
index c00e717be..bfa4820a5 100644
--- a/frontend/src/views/website/ssl/dns-account/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/index.vue
@@ -5,7 +5,12 @@
                 <el-button type="primary" plain @click="openCreate">{{ $t('commons.button.create') }}</el-button>
             </template>
             <el-table-column :label="$t('commons.table.name')" fix show-overflow-tooltip prop="name"></el-table-column>
-            <el-table-column :label="$t('commons.table.type')" prop="type"></el-table-column>
+            <el-table-column :label="$t('commons.table.type')" prop="type">
+                <template #default="{ row }">
+                    <span v-if="row.type == 'AliYun'">{{ $t('website.aliyun') }}</span>
+                    <span v-else>{{ row.type }}</span>
+                </template>
+            </el-table-column>
             <el-table-column :label="$t('website.key')">
                 <template #default="{ row }">
                     <el-link @click="openEdit(row)">{{ $t('website.check') }}</el-link>