diff --git a/web/src/locales/en-US.js b/web/src/locales/en-US.js
index ba2e4b19..ccc92a72 100644
--- a/web/src/locales/en-US.js
+++ b/web/src/locales/en-US.js
@@ -64,7 +64,8 @@ export default {
   'form.publicUsers.option.C': 'Colleague C',
   'form.button.search': 'Search',
   'form.button.new': 'New',
-  'form.button.Create': 'Create',
+  'form.button.create': 'Create',
+  'form.button.add': 'Add',
   'form.button.edit': 'Edit',
   'form.button.update': 'Update',
   'form.button.delete': 'Delete',
diff --git a/web/src/locales/en-US/alert.js b/web/src/locales/en-US/alert.js
index 64a52b34..5bf5da28 100644
--- a/web/src/locales/en-US/alert.js
+++ b/web/src/locales/en-US/alert.js
@@ -80,6 +80,7 @@ export default {
 
   'alert.destination': 'Destinations',
   'alert.destination.self': 'destination',
+  'alert.destination.self-upper': 'Destination',
   'alert.destination.destinations': 'Destinations',
   'alert.destination.actions': 'Actions',
   'alert.destination.actions.manager-email-senders': 'Manage email senders',
@@ -95,6 +96,13 @@ export default {
   'alert.destination.type.chime': 'Amazon Chime',
   'alert.destination.table.columns.name': 'Destination name',
   'alert.destination.table.columns.type': 'Destination type',
+  'alert.destination.create.from.field.name': 'Name',
+  'alert.destination.create.from.field.name.help-text': 'Specify a name of the destination.',
+  'alert.destination.create.from.field.type': 'Type',
+  'alert.destination.create.settings': 'Settings',
+  'alert.destination.create.settings.webhook-url': 'Webhook URL',
+  'alert.destination.create.settings.fullUrl.label': 'Define endpoint by URL',
+  'alert.destination.create.settings.attributes.label': 'Define endpoint by custom attributes URL',
 
   'alert.trigger': 'Triggers',
   'alert.trigger.self': 'trigger',
diff --git a/web/src/locales/zh-CN.js b/web/src/locales/zh-CN.js
index 1db0a167..39f78a5b 100644
--- a/web/src/locales/zh-CN.js
+++ b/web/src/locales/zh-CN.js
@@ -71,6 +71,7 @@ export default {
   'form.button.search': '搜索',
   'form.button.new': '新建',
   'form.button.create': '创建',
+  'form.button.add': '添加',
   'form.button.edit': '编辑',
   'form.button.update': '更新',
   'form.button.delete': '删除',
diff --git a/web/src/locales/zh-CN/alert.js b/web/src/locales/zh-CN/alert.js
index c886d655..5f2f9fa9 100644
--- a/web/src/locales/zh-CN/alert.js
+++ b/web/src/locales/zh-CN/alert.js
@@ -81,6 +81,7 @@ export default {
 
   'alert.destination': '通知渠道',
   'alert.destination.self': '通知渠道',
+  'alert.destination.self-upper': '通知渠道',
   'alert.destination.destinations': '通知渠道管理',
   'alert.destination.actions': '操作',
   'alert.destination.actions.manager-email-senders': '管理邮件发送者',
@@ -96,6 +97,13 @@ export default {
   'alert.destination.type.chime': 'Amazon Chime',
   'alert.destination.table.columns.name': '渠道名称',
   'alert.destination.table.columns.type': '渠道类型',
+  'alert.destination.create.from.field.name': '名称',
+  'alert.destination.create.from.field.name.help-text': '指定渠道名称。',
+  'alert.destination.create.from.field.type': '类型',
+  'alert.destination.create.settings': '设置',
+  'alert.destination.create.settings.webhook-url': 'Webhook URL',
+  'alert.destination.create.settings.fullUrl.label': '通过 URL 定义端点',
+  'alert.destination.create.settings.attributes.label': '通过自定义属性 URL 定义端点',
 
   'alert.trigger': '触发器',
 };
diff --git a/web/src/pages/Alerting/pages/Destinations/components/createDestinations/CustomWebhook/URLInfo.js b/web/src/pages/Alerting/pages/Destinations/components/createDestinations/CustomWebhook/URLInfo.js
index 4805ab33..9cc823b1 100644
--- a/web/src/pages/Alerting/pages/Destinations/components/createDestinations/CustomWebhook/URLInfo.js
+++ b/web/src/pages/Alerting/pages/Destinations/components/createDestinations/CustomWebhook/URLInfo.js
@@ -27,6 +27,7 @@ import { URL_TYPE } from '../../../containers/CreateDestination/utils/constants'
 import { formikInitialValues } from '../../../containers/CreateDestination/utils/constants';
 import { DESTINATION_TYPE } from '../../../utils/constants';
 import QueryParamsEditor from './QueryParamsEditor';
+import { formatMessage } from 'umi/locale';
 
 const propTypes = {
   type: PropTypes.string.isRequired,
@@ -48,7 +49,7 @@ const URLInfo = ({ type, values }) => {
           id: 'fullUrl',
           value: URL_TYPE.FULL_URL,
           checked: isUrlEnabled,
-          label: 'Define endpoint by URL',
+          label: formatMessage({ id: 'alert.destination.create.settings.fullUrl.label' }),
           onChange: (e, field, form) => {
             // Clear Custom URL if user switched to custom URL
             if (field.value === URL_TYPE.ATTRIBUTE_URL) {
@@ -107,7 +108,7 @@ const URLInfo = ({ type, values }) => {
           id: 'customUrl',
           value: URL_TYPE.ATTRIBUTE_URL,
           checked: !isUrlEnabled,
-          label: 'Define endpoint by custom attributes URL',
+          label: formatMessage({ id: 'alert.destination.create.settings.attributes.label' }),
           onChange: (e, field, form) => {
             // Clear Full URL if user switched to custom URL
             if (field.value === URL_TYPE.FULL_URL) {
diff --git a/web/src/pages/Alerting/pages/Destinations/components/createDestinations/Webhook/Webhook.js b/web/src/pages/Alerting/pages/Destinations/components/createDestinations/Webhook/Webhook.js
index b0c073ad..8785f11a 100644
--- a/web/src/pages/Alerting/pages/Destinations/components/createDestinations/Webhook/Webhook.js
+++ b/web/src/pages/Alerting/pages/Destinations/components/createDestinations/Webhook/Webhook.js
@@ -17,6 +17,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormikFieldText } from '../../../../../components/FormControls';
 import { hasError, isInvalid, required } from '../../../../../utils/validate';
+import { formatMessage } from 'umi/locale';
 
 //TODO:: verify the Regex for all the cases based on what backend support
 const validateURL = (value) => {
@@ -34,7 +35,7 @@ const Webhook = ({ type }) => {
       formRow
       fieldProps={{ validate: validateURL }}
       rowProps={{
-        label: 'Webhook URL:',
+        label: formatMessage({ id: 'alert.destination.create.settings.webhook-url' }),
         style: { paddingLeft: '10px' },
         isInvalid,
         error: hasError,
diff --git a/web/src/pages/Alerting/pages/Destinations/containers/CreateDestination/CreateDestination.js b/web/src/pages/Alerting/pages/Destinations/containers/CreateDestination/CreateDestination.js
index 99e9ee42..b8d28a30 100644
--- a/web/src/pages/Alerting/pages/Destinations/containers/CreateDestination/CreateDestination.js
+++ b/web/src/pages/Alerting/pages/Destinations/containers/CreateDestination/CreateDestination.js
@@ -38,6 +38,7 @@ import { Webhook, CustomWebhook, Email } from '../../components/createDestinatio
 import { SubmitErrorHandler } from '../../../../utils/SubmitErrorHandler';
 import { getAllowList } from '../../utils/helpers';
 import { backendErrorNotification } from '../../../../utils/helpers';
+import { formatMessage } from 'umi/locale';
 
 const destinationType = {
   [DESTINATION_TYPE.SLACK]: (props) => <Webhook {...props} />,
@@ -186,10 +187,10 @@ class CreateDestination extends React.Component {
           {({ values, handleSubmit, isSubmitting, errors, isValid }) => (
             <Fragment>
               <EuiTitle size="l">
-                <h1>{edit ? 'Edit' : 'Add'} destination</h1>
+                <h1>{edit ? formatMessage({ id: 'form.button.edit' }) : formatMessage({ id: 'form.button.add' })} {formatMessage({ id: 'alert.destination.self' })}</h1>
               </EuiTitle>
               <EuiSpacer size="m" />
-              <ContentPanel title="Destination" titleSize="s" bodyStyles={{ padding: 'initial' }}>
+              <ContentPanel title={formatMessage({ id: 'alert.destination.self-upper' })} titleSize="s" bodyStyles={{ padding: 'initial' }}>
                 <div style={{ padding: '0px 10px' }}>
                   <FormikFieldText
                     name="name"
@@ -201,8 +202,8 @@ class CreateDestination extends React.Component {
                       ),
                     }}
                     rowProps={{
-                      label: 'Name',
-                      helpText: 'Specify a name of the destination.',
+                      label: formatMessage({ id: 'alert.destination.create.from.field.name' }),
+                      helpText: formatMessage({ id: 'alert.destination.create.from.field.name.help-text' }),
                       style: { paddingLeft: '10px' },
                       isInvalid,
                       error: hasError,
@@ -225,7 +226,7 @@ class CreateDestination extends React.Component {
                       validate: validateDestinationType(httpClient, notifications),
                     }}
                     rowProps={{
-                      label: 'Type',
+                      label: formatMessage({ id: 'alert.destination.create.from.field.type' }),
                       style: { paddingLeft: '10px' },
                       isInvalid,
                       error: hasError,
@@ -237,7 +238,7 @@ class CreateDestination extends React.Component {
                     }}
                   />
                   <EuiSpacer size="m" />
-                  <SubHeader title={<h4>Settings</h4>} description={''} />
+                  <SubHeader title={<h4>{formatMessage({ id: 'alert.destination.create.settings' })}</h4>} description={''} />
                   <EuiSpacer size="m" />
                   {destinationType[values.type]({
                     httpClient,
@@ -251,11 +252,11 @@ class CreateDestination extends React.Component {
               <EuiSpacer />
               <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
                 <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty onClick={this.handleCancel}>Cancel</EuiButtonEmpty>
+                  <EuiButtonEmpty onClick={this.handleCancel}>{formatMessage({ id: 'form.button.cancel' })}</EuiButtonEmpty>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiButton fill onClick={handleSubmit} isLoading={isSubmitting}>
-                    {edit ? 'Update' : 'Create'}
+                    {edit ? formatMessage({ id: 'form.button.update' }) : formatMessage({ id: 'form.button.create' })}
                   </EuiButton>
                 </EuiFlexItem>
               </EuiFlexGroup>