diff --git a/object/sms.go b/object/sms.go
index 5cb444fa..bcfb6234 100644
--- a/object/sms.go
+++ b/object/sms.go
@@ -42,7 +42,11 @@ func SendSms(provider *Provider, content string, phoneNumbers ...string) error {
 		return err
 	}
 
-	if provider.Type == sender.Aliyun {
+	if provider.Type == sender.Twilio {
+		if provider.AppId != "" {
+			phoneNumbers = append([]string{provider.AppId}, phoneNumbers...)
+		}
+	} else if provider.Type == sender.Aliyun {
 		for i, number := range phoneNumbers {
 			phoneNumbers[i] = strings.TrimPrefix(number, "+86")
 		}
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index b3677951..15c11a7a 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -236,7 +236,10 @@ class ProviderEditPage extends React.Component {
         tooltip = i18next.t("provider:Agent ID - Tooltip");
       }
     } else if (provider.category === "SMS") {
-      if (provider.type === "Tencent Cloud SMS") {
+      if (provider.type === "Twilio SMS") {
+        text = i18next.t("provider:Sender number");
+        tooltip = i18next.t("provider:Sender number - Tooltip");
+      } else if (provider.type === "Tencent Cloud SMS") {
         text = i18next.t("provider:App ID");
         tooltip = i18next.t("provider:App ID - Tooltip");
       } else if (provider.type === "Volc Engine SMS") {
@@ -674,6 +677,7 @@ class ProviderEditPage extends React.Component {
             ) : null}
           </div>
         ) : null}
+        {this.getAppIdRow(this.state.provider)}
         {
           this.state.provider.category === "Email" ? (
             <React.Fragment>
@@ -919,7 +923,6 @@ class ProviderEditPage extends React.Component {
             </Row>
           ) : null
         }
-        {this.getAppIdRow(this.state.provider)}
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("provider:Provider URL"), i18next.t("provider:Provider URL - Tooltip"))} :