diff --git a/front-end/src/lang/en.js b/front-end/src/lang/en.js
index e93946c..3a0caef 100644
--- a/front-end/src/lang/en.js
+++ b/front-end/src/lang/en.js
@@ -141,7 +141,7 @@
     cancel: 'Cancel',
     confirm: 'Confirm',
     name: 'Name',
-    serviceUrl: 'ServiceUrl',
+    serviceUrl: 'Service Url',
     brokerServiceUrl: 'BrokerServiceUrl',
     tenant: 'Tenants',
     namespace: 'Namespaces',
@@ -209,6 +209,13 @@
   },
   tabs: {
     config: 'CONFIG',
+    broker: 'BROKER',
+    bookie: 'BOOKIE',
+    namespace: 'NAMESPACE',
+    overview: 'OVERVIEW',
+    topic: 'TOPIC',
+    policies: 'POLICIES',
+    configuration: 'CONFIGURATION',
     failuredomains: 'FAILURE DOMAINS',
     isolationpolicies: 'ISOLATION POLICIES'
   },
@@ -217,18 +224,248 @@
     actions: 'Actions',
     clusterLabel: 'Cluster',
     namespacesLabel: 'Namespaces',
-    regex: 'Regex'
+    regex: 'Regex',
+    inMsg: 'In - msg/s',
+    outMsg: 'Out - msg/s',
+    inBytes: 'In - bytes/s',
+    outBytes: 'Out - bytes/s',
+    storageSize: 'Storage Size',
+    enabled: 'Enabled',
+    disabled: 'Disabled'
   },
   tenant: {
+    label: 'Tenant',
+    name: 'Tenant Name',
     searchTenant: 'Search Tenants',
     newTenant: 'New Tenant',
+    deleteTenant: 'Delete Tenant',
     nameLabel: 'Tenant Name',
     adminRolesLabel: 'Admin Roles',
-    allowedClustersLabel: 'Allowed Clusters'
+    allowedClustersLabel: 'Allowed Clusters',
+    selectTenantMessage: 'Please select tenant',
+    deleteTenantMessage: 'Are you sure you want to delete this tenant?',
+    tenantInfo: 'Tenant Info',
+    allowedClustersContent: 'This is Allowed Clusters Content',
+    adminRolesContent: 'This is Admin Roles Content',
+    permissions: 'Permissions',
+    newRole: '+ New Role'
   },
   namespace: {
+    label: 'Namespace',
+    name: 'Namespace Name',
+    namespaceNumber: 'Namespace Number',
+    newNamespace: 'New Namespace',
+    deleteNamespace: 'Delete Namespace',
+    inputNamespaceMessage: 'Please input namespace',
     newTopic: 'New Topic',
-    searchTopics: 'Search Topics'
+    searchTopics: 'Search Topics',
+    deleteNamespaceMessage: 'Are you sure you want to delete this namespace?',
+    policy: {
+      label: 'Policy',
+      name: 'Policy Name',
+      cluster: 'Clusters',
+      replicatedCluster: 'Replicated Clusters',
+      replicatedClustersContent: 'This is replicatedClustersContent',
+      authorization: 'Authorization',
+      authorizationContent: 'This is authorizationContent',
+      selectRole: 'Please select role',
+      deleteRole: 'Delete Role',
+      addRole: 'Add Role',
+      subscriptionAuthentication: 'Subscription Authentication',
+      subscriptionAuthenticationMode: 'Subscription Authentication Mode',
+      subscriptionAuthenticationModeContent: 'This is subscriptionAuthenticationModeContent',
+      storage: 'Storage',
+      replicationFactor: 'Replication Factor',
+      replicationFactorContent: 'This is replicationFactorContent',
+      ensembelSize: 'Ensembel Size',
+      inputEnsemble: 'Please input ensembel',
+      writeQuorumSize: 'Write Quorum Size',
+      inputWriteQuorumSize: 'Please input Write Quorum Size',
+      readQuorumSize: 'Read Quorum Size',
+      inputReadQuorumSize: 'Please input Read Quorum Size',
+      markDeleteRate: 'Mark Delete Rate',
+      markDeleteRateContent: 'This is markDeleteRateContent',
+      inputDeleteMaxRate: 'Please input Delete Max Rate',
+      encryptionRequire: 'Encryption Require',
+      encryptionRequireContent: 'This is encryptionRequireContent',
+      deduplication: 'Deduplication',
+      deduplicationContent: 'This is deduplicationContent',
+      backlog: 'Backlog',
+      backlogQuotasLimit: 'Backlog Quotas Limit',
+      backlogQuotasLimitContent: 'This is backlogQuotasLimitContent',
+      inputBacklogQuotasLimit: 'Please input Backlog Quotas Limit',
+      backlogRententionPolicy: 'Backlog Retention Policy',
+      backlogRententionPolicyContent: 'This is backlogRententionPolicyContent',
+      inputBacklogRententionPolicyContent: 'Please select backlog rentention policy',
+      schema: 'Schema',
+      autoUpdateStrategy: 'AutoUpdate Strategy',
+      autoUpdateStrategyContent: 'This is autoUpdateStrategyContent',
+      inputAutoUpdateStrategy: 'Please select backlog autoUpdate strategy',
+      schemaValidationEnforced: 'Schema Validation Enforced',
+      schemaValidationEnforcedContent: 'This is schemaValidationEnforcedContent',
+      cleanupPolicy: 'Cleanup Policy',
+      messageTTL: 'Message TTL(Unit Second)',
+      messageTTLContent: 'This is messageTTLContent',
+      inputMessageTTL: 'Please input Backlog Quotas Limit',
+      retentionSize: 'Retention Size',
+      retentionSizeContent: 'This is retentionSizeContent',
+      inputRententionSize: 'Please input retention size',
+      retentionTime: 'Retention Time(Unit Minutes)',
+      retentionTimeContent: 'This is retentionTimeContent',
+      inputRetentionTime: 'Please input Retention Time',
+      compactionThreshold: 'Compaction Threshold',
+      compactionThresholdContent: 'This is compactionThresholdContent',
+      inputCompactionThreshold: 'Please input compaction threshold',
+      offloadThreshold: 'Offload Threshold',
+      offloadThresholdContent: 'This is offloadThresholdContent',
+      inputOffloadThreshold: 'Please input Offload Threshold',
+      offloadDeletionLag: 'Offload Deletion Lag',
+      offloadDeletionLagContent: 'This is offloadDeletionLagContent',
+      inputOffloadDeleteLag: 'Please input offload delete lag',
+      throttling: 'Throttling',
+      maxProducersPerTopic: 'Max Producers Per Topic',
+      maxProducersPerTopicContent: 'This is maxProducersPerTopicContent',
+      inputMaxProducersPerTopic: 'Please input max Producers',
+      maxConsumersPerTopic: 'Max Consumers Per Topic',
+      maxConsumersPerTopicContent: 'This is maxConsumersPerTopicContent',
+      inputMaxConsumersForTopic: 'Please input max Consumers for topic',
+      maxConsumerPerSubscription: 'Max Consumers Per Subscription',
+      maxConsumerPerSubContent: 'This is maxConsumerPerSubContent',
+      inputMaxConsumersForSub: 'Please input max consumer for sub',
+      dispatchRate: 'Dispatch Rate',
+      dispatchRatePerTopic: 'Dispatch Rate Per Topic',
+      dispatchRatePerTopicContent: 'This is dispatchRatePerTopicContent',
+      dispatchRatePerTopicBytes: 'bytes/second',
+      inputDispatchRateBytes: 'Please input dispatch rate',
+      dispatchRatePerTopicMessage: 'message/second',
+      inputDispatchRatePerTopicMessage: 'Please input dispatch rate',
+      dispatchRatePerTopicPeriod: 'period(Unit second)',
+      inputDispatchPerTopicPerPeriod: 'Please input dispatch rate',
+      dispatchRateForSub: 'Dispatch Rate Per Subscription',
+      dispatchRatePerSubContent: 'This is dispatchRatePerSubContent',
+      inputDispatchRatePerSubBytes: 'Please input dispatch rate',
+      dispatchRatePerSubBytes: 'bytes/second',
+      dispatchRatePerSubMessage: 'message/second',
+      inputDispatchRatePerSubMessage: 'Please input dispatch rate',
+      dispatchRatePerSubPeriod: 'period(Unit Second)',
+      inputDispatchRatePerSubPeriod: 'Please input dispatch rate',
+      subscribeRatePerConsumer: 'Subscribe Rate Per Consumer',
+      subscribeRatePerConsumerSub: 'message/second',
+      inputSubscribeRate: 'Please input subscribe rate',
+      subscribeRatePerConsumerContent: 'This is subscribeRatePerConsumerContent',
+      subscribeRatePerConsumerPeriod: 'period(Unit Second)',
+      antiAffinity: 'Anti Affinity',
+      antiAffinityGroup: 'Anti Affinity Group',
+      antiAffinityGroupContent: 'This is antiAffinityGroupContent',
+      inputAntiAffinityGroup: 'Please input Anti Affinity Group'
+    },
+    clearBacklog: 'Clear Backlog',
+    bundle: {
+      label: 'Bundle',
+      name: 'Bundle Name',
+      operation: 'Operation',
+      split: 'Split',
+      unload: 'Unload',
+      bundleInfoContent: 'This is Bundle Info'
+    }
+  },
+  topic: {
+    label: 'Topic',
+    name: 'Topic Name',
+    topicNumber: 'Topic Number',
+    newTopic: 'New Topic',
+    deleteTopic: 'Delete Topic',
+    delete: 'Delete',
+    persistent: 'Persistent',
+    nonPersistent: 'Non-persistent',
+    partition: 'Partition',
+    partitions: 'Partitions',
+    partitionNumber: 'Partition Number',
+    topicDomain: 'Topic Domain',
+    addRole: 'Add Role',
+    producer: {
+      label: 'Producer',
+      name: 'Producer Name',
+      producers: 'Producers',
+      producerId: 'Producer Id',
+      producerName: 'Producer Name',
+      producerNumber: 'Producer Number',
+      avgMsgSize: 'Avg Msg Size',
+      address: 'Address',
+      since: 'Since'
+    },
+    subscription: {
+      label: 'Subscription',
+      name: 'Subscription Name',
+      subscriptions: 'Subscriptions',
+      type: 'Type',
+      subscriptionNumber: 'Subscription Number',
+      msgExpired: 'Msg Expired',
+      backlog: 'Backlog',
+      skip: 'SKIP',
+      skipMessage: 'Messages',
+      expire: 'EXPIRE',
+      expireMessage: 'messages older than timestamp (in seconds)',
+      clear: 'CLEAR',
+      clearMessage: 'Clear Message',
+      reset: 'RESET',
+      resetByTimeMessage: 'Reset By Time',
+      resetById: 'Reset By Message Id',
+      messageId: 'Message ID',
+      mins: 'Mins',
+      storage: 'STORAGE',
+      storageSize: 'Storage Size',
+      entries: 'Entries',
+      segments: 'Segments'
+    },
+    segment: {
+      label: 'Segment',
+      name: 'Segment Name',
+      ledgerId: 'Ledger Id',
+      entries: 'Entries',
+      size: 'Size',
+      status: 'Status',
+      offload: 'Offload'
+    },
+    cursor: {
+      label: 'Cursor',
+      name: 'Cursor Name',
+      cursors: 'Cursors',
+      markDeletePosition: 'Mark Delete Position',
+      readPosition: 'Read Position',
+      waitingReadOp: 'Waiting Read Op',
+      pendingReadOp: 'Pending Read Op',
+      numberOfEntriesSinceFirstNotAckedMessage: 'Entries Since First Not AckedMessage'
+    },
+    policy: {
+      label: 'policy',
+      name: 'Policy Name',
+      policies: 'Policies',
+      authentication: 'Authorization',
+      authorizationContent: 'This is authorizationContent'
+    },
+    consumer: {
+      label: 'Consumer',
+      name: 'Consumer Name',
+      consumers: 'Consumers',
+      avgMsgSize: 'Avg Msg Size',
+      address: 'Address',
+      since: 'Since'
+    },
+    info: 'INFO',
+    column: 'column',
+    data: 'data',
+    terminate: 'terminate',
+    compactionName: 'COMPACTION',
+    compaction: 'compaction',
+    offloadName: 'OFFLOAD',
+    offload: 'offload',
+    status: 'STATUS',
+    unload: 'Unload',
+    deleteTopicMessage: 'Are you sure you want to delete this topic?',
+    partitionedTopicName: 'Partitioned Topic Name',
+    selectRoleMessage: 'Please Select Role',
+    backlogOpeartion: 'Backlog Operation'
   },
   cluster: {
     label: 'Cluster',
@@ -237,15 +474,36 @@
     updateCluster: 'Update Cluster',
     deleteCluster: 'Delete Cluster',
     searchClusters: 'Search Clusters',
-    selectCluster: 'Select Cluster',
+    selectCluster: 'Please select cluster',
+    serviceUrl: 'Service Url',
+    selectClusterMessage: 'Please select clusters',
     webServiceUrlPrefix: 'Http Service Url',
     webServiceUrlTlsPrefix: 'Https Service Url',
     brokerServiceUrlPrefix: 'Broker Service Url',
-    brokerServiceUrlTlsPrefix: 'Broker Service Url (TLS)'
+    brokerServiceUrlTlsPrefix: 'Broker Service Url (TLS)',
+    deleteClusterMessage: 'Are you sure you want to delete this policy?',
+    replicatedCluster: 'Replicated Clusters'
+  },
+  broker: {
+    label: 'Broker',
+    name: 'Broker Name',
+    brokerNumber: 'Broker Number',
+    ownedNamespaceNumber: 'Owned Namespace Number',
+    throughput: 'Throughput',
+    bandwidth: 'Bandwidth',
+    placeholderSelectBroker: 'Please select brokers',
+    brokerContent: 'This is Broker Content'
+  },
+  bookie: {
+    label: 'Bookie',
+    name: 'Bookie Name',
+    state: 'Bookie state',
+    storage: 'Bookie storage'
   },
   // failure domain
   fd: {
     label: 'Failure Domain',
+    failureDomainNumber: 'Failure Domain Number',
     createFdTitle: 'Add a New Failure Domain',
     name: 'Domain Name',
     brokerList: 'Broker List',
@@ -253,7 +511,8 @@
     searchFds: 'Search Failure Domains',
     newFd: 'New FailureDomain',
     updateFd: 'Update Failure Domain',
-    deleteFd: 'Delete Failure Domain'
+    deleteFd: 'Delete Failure Domain',
+    deleteFdMessage: 'Are you sure you want to delete this domain?'
   },
   // isolation policies
   ip: {
@@ -278,6 +537,7 @@
     brokerUsageThresholdLabel: 'Broker Usage Threshold',
     brokerUsageThresholdPh: 'Please input broker usage threshold',
     minimalAvailableBrokerLabel: 'Minimal Available Brokers',
-    minimalAvailableBrokerPh: 'Please input minimalAvailableBroker'
+    minimalAvailableBrokerPh: 'Please input minimalAvailableBroker',
+    deletePolicyMessage: 'Are you sure you want to delete this policy?'
   }
 }
diff --git a/front-end/src/lang/zh.js b/front-end/src/lang/zh.js
index 1c92c21..c5ae412 100644
--- a/front-end/src/lang/zh.js
+++ b/front-end/src/lang/zh.js
@@ -206,5 +206,338 @@
     close: '关闭',
     closeOthers: '关闭其它',
     closeAll: '关闭所有'
+  },
+  tabs: {
+    config: 'CONFIG',
+    broker: 'BROKER',
+    bookie: 'BOOKIE',
+    namespace: 'NAMESPACE',
+    overview: 'OVERVIEW',
+    topic: 'TOPIC',
+    policies: 'POLICIES',
+    configuration: 'CONFIGURATION',
+    failuredomains: 'FAILURE DOMAINS',
+    isolationpolicies: 'ISOLATION POLICIES'
+  },
+  common: {
+    dangerZone: 'Danger Zone',
+    actions: 'Actions',
+    clusterLabel: 'Cluster',
+    namespacesLabel: 'Namespaces',
+    regex: 'Regex',
+    inMsg: 'In - msg/s',
+    outMsg: 'Out - msg/s',
+    inBytes: 'In - bytes/s',
+    outBytes: 'Out - bytes/s',
+    storageSize: 'Storage Size',
+    enabled: 'Enabled',
+    disabled: 'Disabled'
+  },
+  tenant: {
+    label: 'Tenant',
+    name: 'Tenant Name',
+    searchTenant: 'Search Tenants',
+    newTenant: 'New Tenant',
+    deleteTenant: 'Delete Tenant',
+    nameLabel: 'Tenant Name',
+    adminRolesLabel: 'Admin Roles',
+    allowedClustersLabel: 'Allowed Clusters',
+    selectTenantMessage: 'Please select tenant',
+    deleteTenantMessage: 'Are you sure you want to delete this tenant?',
+    tenantInfo: 'Tenant Info',
+    allowedClustersContent: 'This is Allowed Clusters Content',
+    adminRolesContent: 'This is Admin Roles Content',
+    permissions: 'Permissions',
+    newRole: '+ New Role'
+  },
+  namespace: {
+    label: 'Namespace',
+    name: 'Namespace Name',
+    namespaceNumber: 'Namespace Number',
+    newNamespace: 'New Namespace',
+    deleteNamespace: 'Delete Namespace',
+    inputNamespaceMessage: 'Please input namespace',
+    newTopic: 'New Topic',
+    searchTopics: 'Search Topics',
+    deleteNamespaceMessage: 'Are you sure you want to delete this namespace?',
+    policy: {
+      label: 'Policy',
+      name: 'Policy Name',
+      cluster: 'Clusters',
+      replicatedCluster: 'Replicated Clusters',
+      replicatedClustersContent: 'This is replicatedClustersContent',
+      authorization: 'Authorization',
+      authorizationContent: 'This is authorizationContent',
+      selectRole: 'Please select role',
+      deleteRole: 'Delete Role',
+      addRole: 'Add Role',
+      subscriptionAuthentication: 'Subscription Authentication',
+      subscriptionAuthenticationMode: 'Subscription Authentication Mode',
+      subscriptionAuthenticationModeContent: 'This is subscriptionAuthenticationModeContent',
+      storage: 'Storage',
+      replicationFactor: 'Replication Factor',
+      replicationFactorContent: 'This is replicationFactorContent',
+      ensembelSize: 'Ensembel Size',
+      inputEnsemble: 'Please input ensembel',
+      writeQuorumSize: 'Write Quorum Size',
+      inputWriteQuorumSize: 'Please input Write Quorum Size',
+      readQuorumSize: 'Read Quorum Size',
+      inputReadQuorumSize: 'Please input Read Quorum Size',
+      markDeleteRate: 'Mark Delete Rate',
+      markDeleteRateContent: 'This is markDeleteRateContent',
+      inputDeleteMaxRate: 'Please input Delete Max Rate',
+      encryptionRequire: 'Encryption Require',
+      encryptionRequireContent: 'This is encryptionRequireContent',
+      deduplication: 'Deduplication',
+      deduplicationContent: 'This is deduplicationContent',
+      backlog: 'Backlog',
+      backlogQuotasLimit: 'Backlog Quotas Limit',
+      backlogQuotasLimitContent: 'This is backlogQuotasLimitContent',
+      inputBacklogQuotasLimit: 'Please input Backlog Quotas Limit',
+      backlogRententionPolicy: 'Backlog Retention Policy',
+      backlogRententionPolicyContent: 'This is backlogRententionPolicyContent',
+      inputBacklogRententionPolicyContent: 'Please select backlog rentention policy',
+      schema: 'Schema',
+      autoUpdateStrategy: 'AutoUpdate Strategy',
+      autoUpdateStrategyContent: 'This is autoUpdateStrategyContent',
+      inputAutoUpdateStrategy: 'Please select backlog autoUpdate strategy',
+      schemaValidationEnforced: 'Schema Validation Enforced',
+      schemaValidationEnforcedContent: 'This is schemaValidationEnforcedContent',
+      cleanupPolicy: 'Cleanup Policy',
+      messageTTL: 'Message TTL(Unit Second)',
+      messageTTLContent: 'This is messageTTLContent',
+      inputMessageTTL: 'Please input Backlog Quotas Limit',
+      retentionSize: 'Retention Size',
+      retentionSizeContent: 'This is retentionSizeContent',
+      inputRententionSize: 'Please input retention size',
+      retentionTime: 'Retention Time(Unit Minutes)',
+      retentionTimeContent: 'This is retentionTimeContent',
+      inputRetentionTime: 'Please input Retention Time',
+      compactionThreshold: 'Compaction Threshold',
+      compactionThresholdContent: 'This is compactionThresholdContent',
+      inputCompactionThreshold: 'Please input compaction threshold',
+      offloadThreshold: 'Offload Threshold',
+      offloadThresholdContent: 'This is offloadThresholdContent',
+      inputOffloadThreshold: 'Please input Offload Threshold',
+      offloadDeletionLag: 'Offload Deletion Lag',
+      offloadDeletionLagContent: 'This is offloadDeletionLagContent',
+      inputOffloadDeleteLag: 'Please input offload delete lag',
+      throttling: 'Throttling',
+      maxProducersPerTopic: 'Max Producers Per Topic',
+      maxProducersPerTopicContent: 'This is maxProducersPerTopicContent',
+      inputMaxProducersPerTopic: 'Please input max Producers',
+      maxConsumersPerTopic: 'Max Consumers Per Topic',
+      maxConsumersPerTopicContent: 'This is maxConsumersPerTopicContent',
+      inputMaxConsumersForTopic: 'Please input max Consumers for topic',
+      maxConsumerPerSubscription: 'Max Consumers Per Subscription',
+      maxConsumerPerSubContent: 'This is maxConsumerPerSubContent',
+      inputMaxConsumersForSub: 'Please input max consumer for sub',
+      dispatchRate: 'Dispatch Rate',
+      dispatchRatePerTopic: 'Dispatch Rate Per Topic',
+      dispatchRatePerTopicContent: 'This is dispatchRatePerTopicContent',
+      dispatchRatePerTopicBytes: 'bytes/second',
+      inputDispatchRateBytes: 'Please input dispatch rate',
+      dispatchRatePerTopicMessage: 'message/second',
+      inputDispatchRatePerTopicMessage: 'Please input dispatch rate',
+      dispatchRatePerTopicPeriod: 'period(Unit second)',
+      inputDispatchPerTopicPerPeriod: 'Please input dispatch rate',
+      dispatchRateForSub: 'Dispatch Rate Per Subscription',
+      dispatchRatePerSubContent: 'This is dispatchRatePerSubContent',
+      inputDispatchRatePerSubBytes: 'Please input dispatch rate',
+      dispatchRatePerSubBytes: 'bytes/second',
+      dispatchRatePerSubMessage: 'message/second',
+      inputDispatchRatePerSubMessage: 'Please input dispatch rate',
+      dispatchRatePerSubPeriod: 'period(Unit Second)',
+      inputDispatchRatePerSubPeriod: 'Please input dispatch rate',
+      subscribeRatePerConsumer: 'Subscribe Rate Per Consumer',
+      subscribeRatePerConsumerSub: 'message/second',
+      inputSubscribeRate: 'Please input subscribe rate',
+      subscribeRatePerConsumerContent: 'This is subscribeRatePerConsumerContent',
+      subscribeRatePerConsumerPeriod: 'period(Unit Second)',
+      antiAffinity: 'Anti Affinity',
+      antiAffinityGroup: 'Anti Affinity Group',
+      antiAffinityGroupContent: 'This is antiAffinityGroupContent',
+      inputAntiAffinityGroup: 'Please input Anti Affinity Group'
+    },
+    clearBacklog: 'Clear Backlog',
+    bundle: {
+      label: 'Bundle',
+      name: 'Bundle Name',
+      operation: 'Operation',
+      split: 'Split',
+      unload: 'Unload',
+      bundleInfoContent: 'This is Bundle Info'
+    }
+  },
+  topic: {
+    label: 'Topic',
+    name: 'Topic Name',
+    topicNumber: 'Topic Number',
+    newTopic: 'New Topic',
+    deleteTopic: 'Delete Topic',
+    delete: 'Delete',
+    persistent: 'Persistent',
+    nonPersistent: 'Non-persistent',
+    partition: 'Partition',
+    partitions: 'Partitions',
+    partitionNumber: 'Partition Number',
+    topicDomain: 'Topic Domain',
+    addRole: 'Add Role',
+    producer: {
+      label: 'Producer',
+      name: 'Producer Name',
+      producers: 'Producers',
+      producerId: 'Producer Id',
+      producerName: 'Producer Name',
+      producerNumber: 'Producer Number',
+      avgMsgSize: 'Avg Msg Size',
+      address: 'Address',
+      since: 'Since'
+    },
+    subscription: {
+      label: 'Subscription',
+      name: 'Subscription Name',
+      subscriptions: 'Subscriptions',
+      type: 'Type',
+      subscriptionNumber: 'Subscription Number',
+      msgExpired: 'Msg Expired',
+      backlog: 'Backlog',
+      skip: 'SKIP',
+      skipMessage: 'Messages',
+      expire: 'EXPIRE',
+      expireMessage: 'messages older than timestamp (in seconds)',
+      clear: 'CLEAR',
+      clearMessage: 'Clear Message',
+      reset: 'RESET',
+      resetByTimeMessage: 'Reset By Time',
+      resetById: 'Reset By Message Id',
+      messageId: 'Message ID',
+      mins: 'Mins',
+      storage: 'STORAGE',
+      storageSize: 'Storage Size',
+      entries: 'Entries',
+      segments: 'Segments'
+    },
+    segment: {
+      label: 'Segment',
+      name: 'Segment Name',
+      ledgerId: 'Ledger Id',
+      entries: 'Entries',
+      size: 'Size',
+      status: 'Status',
+      offload: 'Offload'
+    },
+    cursor: {
+      label: 'Cursor',
+      name: 'Cursor Name',
+      cursors: 'Cursors',
+      markDeletePosition: 'Mark Delete Position',
+      readPosition: 'Read Position',
+      waitingReadOp: 'Waiting Read Op',
+      pendingReadOp: 'Pending Read Op',
+      numberOfEntriesSinceFirstNotAckedMessage: 'Entries Since First Not AckedMessage'
+    },
+    policy: {
+      label: 'policy',
+      name: 'Policy Name',
+      policies: 'Policies',
+      authentication: 'Authorization',
+      authorizationContent: 'This is authorizationContent'
+    },
+    consumer: {
+      label: 'Consumer',
+      name: 'Consumer Name',
+      consumers: 'Consumers',
+      avgMsgSize: 'Avg Msg Size',
+      address: 'Address',
+      since: 'Since'
+    },
+    info: 'INFO',
+    column: 'column',
+    data: 'data',
+    terminate: 'terminate',
+    compactionName: 'COMPACTION',
+    compaction: 'compaction',
+    offloadName: 'OFFLOAD',
+    offload: 'offload',
+    status: 'STATUS',
+    unload: 'Unload',
+    deleteTopicMessage: 'Are you sure you want to delete this topic?',
+    partitionedTopicName: 'Partitioned Topic Name',
+    selectRoleMessage: 'Please Select Role',
+    backlogOpeartion: 'Backlog Operation'
+  },
+  cluster: {
+    label: 'Cluster',
+    name: 'Cluster Name',
+    addCluster: 'Add Cluster',
+    updateCluster: 'Update Cluster',
+    deleteCluster: 'Delete Cluster',
+    searchClusters: 'Search Clusters',
+    selectCluster: 'Please select cluster',
+    serviceUrl: 'Service Url',
+    selectClusterMessage: 'Please select clusters',
+    webServiceUrlPrefix: 'Http Service Url',
+    webServiceUrlTlsPrefix: 'Https Service Url',
+    brokerServiceUrlPrefix: 'Broker Service Url',
+    brokerServiceUrlTlsPrefix: 'Broker Service Url (TLS)',
+    deleteClusterMessage: 'Are you sure you want to delete this policy?',
+    replicatedCluster: 'Replicated Clusters'
+  },
+  broker: {
+    label: 'Broker',
+    name: 'Broker Name',
+    brokerNumber: 'Broker Number',
+    ownedNamespaceNumber: 'Owned Namespace Number',
+    throughput: 'Throughput',
+    bandwidth: 'Bandwidth',
+    placeholderSelectBroker: 'Please select brokers',
+    brokerContent: 'This is Broker Content'
+  },
+  bookie: {
+    label: 'Bookie',
+    name: 'Bookie Name',
+    state: 'Bookie state',
+    storage: 'Bookie storage'
+  },
+  // failure domain
+  fd: {
+    label: 'Failure Domain',
+    failureDomainNumber: 'Failure Domain Number',
+    createFdTitle: 'Add a New Failure Domain',
+    name: 'Domain Name',
+    brokerList: 'Broker List',
+    selectBrokers: 'Please select brokers',
+    searchFds: 'Search Failure Domains',
+    newFd: 'New FailureDomain',
+    updateFd: 'Update Failure Domain',
+    deleteFd: 'Delete Failure Domain',
+    deleteFdMessage: 'Are you sure you want to delete this domain?'
+  },
+  // isolation policies
+  ip: {
+    label: 'Policy',
+    heading: 'Namespace Isolation Policy',
+    name: 'Policy Name',
+    searchIps: 'Search Isolation Policies',
+    selectIp: 'Select Isolation Policy',
+    newIp: 'New Isolation Policy',
+    nameLabel: 'Isolation Policy',
+    numPBLabel: 'Number of Primary Brokers',
+    numSBLabel: 'Number of Secondary Brokers',
+    newIpName: 'Please input policy name',
+    selectNsLabel: 'Select Namespaces',
+    selectPbLabel: 'Select Brokers',
+    selectSbLabel: 'Select Brokers',
+    selectAfpPh: 'Please select auto failover policy',
+    pbHeading: 'Primary Brokers',
+    sbHeading: 'Secondary Brokers',
+    afpHeading: 'Auto Failover Policy',
+    ptHeading: 'Policy Type',
+    brokerUsageThresholdLabel: 'Broker Usage Threshold',
+    brokerUsageThresholdPh: 'Please input broker usage threshold',
+    minimalAvailableBrokerLabel: 'Minimal Available Brokers',
+    minimalAvailableBrokerPh: 'Please input minimalAvailableBroker',
+    deletePolicyMessage: 'Are you sure you want to delete this policy?'
   }
 }
diff --git a/front-end/src/views/management/clusters/cluster.vue b/front-end/src/views/management/clusters/cluster.vue
index c6f902a..7c5348d 100644
--- a/front-end/src/views/management/clusters/cluster.vue
+++ b/front-end/src/views/management/clusters/cluster.vue
@@ -3,14 +3,14 @@
     <div class="createPost-container">
       <el-form :inline="true" :model="postForm" class="form-container">
         <el-form-item class="postInfo-container-item" label="Cluster">
-          <el-select v-model="postForm.cluster" placeholder="select cluster" @change="getClusterInfo()">
+          <el-select v-model="postForm.cluster" :placeholder="$t('cluster.selectCluster')" @change="getClusterInfo()">
             <el-option v-for="(item,index) in clustersListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
       </el-form>
     </div>
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="BROKERS" name="brokers">
+      <el-tab-pane :label="$t('tabs.broker')" name="brokers">
         <el-row :gutter="24">
           <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}">
             <el-table
@@ -20,29 +20,29 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column label="Brokers" min-width="50px" align="center">
+              <el-table-column :label="$t('broker.name')" min-width="50px" align="center">
                 <template slot-scope="scope">
                   <router-link :to="'/management/brokers/' + scope.row.cluster + '/' + scope.row.broker + '/broker'" class="link-type">
                     <span>{{ scope.row.broker }}</span>
                   </router-link>
                 </template>
               </el-table-column>
-              <el-table-column label="Failure Domains" align="center" min-width="100px">
+              <el-table-column :label="$t('fd.failureDomainNumber')" align="center" min-width="100px">
                 <template slot-scope="scope">
                   <span>{{ scope.row.failureDomain }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Owned Namespaces" align="center" min-width="100px">
+              <el-table-column :label="$t('broker.ownedNamespaceNumber')" align="center" min-width="100px">
                 <template slot-scope="scope">
                   <span>{{ scope.row.ownedNamespaces }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Throughput" align="center" min-width="100px">
+              <el-table-column :label="$t('broker.throughput')" align="center" min-width="100px">
                 <template slot-scope="scope">
                   <span>In:{{ scope.row.throughputIn }}<br>Out:{{ scope.row.throughputOut }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Bandwidth" align="center" min-width="100px">
+              <el-table-column :label="$t('broker.bandwidth')" align="center" min-width="100px">
                 <template slot-scope="scope">
                   <span>In: {{ scope.row.bandwidthIn }}<br>Out: {{ scope.row.bandwidthOut }}</span>
                 </template>
@@ -51,7 +51,7 @@
           </el-col>
         </el-row>
       </el-tab-pane>
-      <el-tab-pane label="BOOKIES" name="bookies">
+      <el-tab-pane :label="$t('tabs.bookie')" name="bookies">
         <el-row :gutter="24">
           <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}" style="padding-right:8px;margin-bottom:30px;">
             <el-table
@@ -61,17 +61,17 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column label="Bookies" min-width="50px" align="center">
+              <el-table-column :label="$t('bookie.name')" min-width="50px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.bookie }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="State" align="center" min-width="100px">
+              <el-table-column :label="$t('bookie.state')" align="center" min-width="100px">
                 <template slot-scope="scope">
                   <span>{{ scope.row.status }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Storage" align="center" min-width="100px">
+              <el-table-column :label="$t('bookie.storage')" align="center" min-width="100px">
                 <template slot-scope="scope">
                   <span>{{ scope.row.storage }}%</span>
                 </template>
@@ -194,9 +194,9 @@
           <el-form-item :label="$t('fd.brokerList')" prop="brokerList">
             <el-select
               v-model="temp.brokerValue"
+              :placeholder="$t('broker.placeholderSelectBroker')"
               style="width:254px;"
-              multiple
-              placeholder="Please select brokers">
+              multiple>
               <el-option v-for="item in brokerOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
@@ -207,7 +207,7 @@
         </div>
         <div v-if="dialogStatus==='deleteCluster'">
           <el-form-item>
-            <h4>Are you sure you want to delete this cluster?</h4>
+            <h4>{{ deleteClusterMessage }}</h4>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="deleteCluster()">{{ $t('table.confirm') }}</el-button>
@@ -216,7 +216,7 @@
         </div>
         <div v-if="dialogStatus==='deleteDomain'">
           <el-form-item>
-            <h4>Are you sure you want to delete this domain?</h4>
+            <h4>{{ deleteFdMessage }}</h4>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="deleteDomain()">{{ $t('table.confirm') }}</el-button>
@@ -225,7 +225,7 @@
         </div>
         <div v-if="dialogStatus==='deletePolicy'">
           <el-form-item>
-            <h4>Are you sure you want to delete this policy?</h4>
+            <h4>{{ deletePolicyMessage }}</h4>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="deletePolicy()">{{ $t('table.confirm') }}</el-button>
@@ -307,7 +307,10 @@
         deletePolicy: 'Delete Policy'
       },
       tempIsolationPolicyList: [],
-      tempFailureDomainList: []
+      tempFailureDomainList: [],
+      deleteClusterMessage: this.$i18n.t('cluster.deleteClusterMessage'),
+      deleteFdMessage: this.$i18n.t('fd.deleteFdMessage'),
+      deletePolicyMessage: this.$i18n.t('ip.deletePolicyMessage')
     }
   },
   created() {
diff --git a/front-end/src/views/management/clusters/failureDomain.vue b/front-end/src/views/management/clusters/failureDomain.vue
index 665df76..31a79cf 100644
--- a/front-end/src/views/management/clusters/failureDomain.vue
+++ b/front-end/src/views/management/clusters/failureDomain.vue
@@ -35,7 +35,7 @@
       <el-form label-position="top">
         <div v-if="dialogStatus==='delete'">
           <el-form-item>
-            <h4>Are you sure you want to delete this domain?</h4>
+            <h4>{{ deleteFdMessage }}</h4>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="deleteDomain()">{{ $t('table.confirm') }}</el-button>
@@ -71,16 +71,17 @@
     return {
       postForm: Object.assign({}, defaultForm),
       clustersListOptions: [],
-      brokersContent: 'This is BrokersContent',
+      brokersContent: this.$i18n.t('broker.brokerContent'),
       brokerValue: [],
       brokerOptions: [],
       failureDomainListOptions: [],
       firstInit: false,
       textMap: {
-        delete: 'Delete Failure Domain'
+        delete: this.$i18n.t('fd.deleteFd')
       },
       dialogStatus: '',
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      deleteFdMessage: this.$i18n.t('fd.deleteFdMessage')
     }
   },
   created() {
diff --git a/front-end/src/views/management/clusters/index.vue b/front-end/src/views/management/clusters/index.vue
index d0f81f1..33312da 100644
--- a/front-end/src/views/management/clusters/index.vue
+++ b/front-end/src/views/management/clusters/index.vue
@@ -16,21 +16,21 @@
           fit
           highlight-current-row
           style="width: 100%;">
-          <el-table-column :label="$t('table.cluster')" min-width="150px" align="center">
+          <el-table-column :label="$t('cluster.name')" min-width="150px" align="center">
             <template slot-scope="scope">
               <router-link :to="'/management/clusters/' + scope.row.cluster + '/cluster?tab=config'" class="link-type">
                 <span>{{ scope.row.cluster }}</span>
               </router-link>
             </template>
           </el-table-column>
-          <el-table-column label="Brokers" min-width="150px" align="center">
+          <el-table-column :label="$t('broker.brokerNumber')" min-width="150px" align="center">
             <template slot-scope="scope">
               <router-link :to="'/management/clusters/' + scope.row.cluster + '/cluster?tab=brokers'" class="link-type">
                 <span>{{ scope.row.brokers }}</span>
               </router-link>
             </template>
           </el-table-column>
-          <el-table-column label="Service Urls" min-width="150px" align="center">
+          <el-table-column :label="$t('cluster.serviceUrl')" min-width="150px" align="center">
             <template slot-scope="scope">
               <span>
                 data: {{ scope.row.brokerServiceUrl }}
@@ -80,7 +80,7 @@
         </div>
         <div v-if="dialogStatus==='delete'">
           <el-form-item>
-            <h4>Are you sure you want to delete this cluster?</h4>
+            <h4>{{ deleteClusterMessage }}</h4>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="deleteCluster()">{{ $t('table.confirm') }}</el-button>
@@ -155,8 +155,8 @@
       dialogFormVisible: false,
       dialogStatus: '',
       textMap: {
-        delete: 'Delete Cluster',
-        create: 'Add a new cluster'
+        delete: this.$i18n.t('cluster.deleteCluster'),
+        create: this.$i18n.t('cluster.addCluster')
       },
       dialogPvVisible: false,
       rules: {
@@ -164,7 +164,8 @@
         serviceUrl: [{ required: true, message: 'serviceUrl is required', trigger: 'change' }],
         domainName: [{ required: true, message: 'domainName is required', trigger: 'change' }],
         domainNames: [{ required: true, message: 'domainNames is required', trigger: 'change' }]
-      }
+      },
+      deleteClusterMessage: this.$i18n.t('cluster.deleteClusterMessage')
     }
   },
   created() {
diff --git a/front-end/src/views/management/namespaces/namespace.vue b/front-end/src/views/management/namespaces/namespace.vue
index f0ee0e8..b70b4f5 100644
--- a/front-end/src/views/management/namespaces/namespace.vue
+++ b/front-end/src/views/management/namespaces/namespace.vue
@@ -2,28 +2,28 @@
   <div class="app-container">
     <div class="createPost-container">
       <el-form :inline="true" :model="postForm" class="form-container">
-        <el-form-item class="postInfo-container-item" label="Tenant">
-          <el-select v-model="postForm.tenant" placeholder="select tenant" @change="getNamespacesList(postForm.tenant)">
+        <el-form-item :label="$t('tenant.label')" class="postInfo-container-item">
+          <el-select v-model="postForm.tenant" :placeholder="$t('tenant.name')" @change="getNamespacesList(postForm.tenant)">
             <el-option v-for="(item,index) in tenantsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item class="postInfo-container-item" label="Namespace">
-          <el-select v-model="postForm.namespace" placeholder="select namespace" @change="getNamespaceInfo(postForm.tenant, postForm.namespace)">
+        <el-form-item :label="$t('namespace.label')" class="postInfo-container-item">
+          <el-select v-model="postForm.namespace" :placeholder="$t('namespace.name')" @change="getNamespaceInfo(postForm.tenant, postForm.namespace)">
             <el-option v-for="(item,index) in namespacesListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
       </el-form>
     </div>
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="OVERVIEW" name="overview">
+      <el-tab-pane :label="$t('tabs.overview')" name="overview">
         <el-table
           :data="namespaceStats"
           border
           style="width: 100%">
-          <el-table-column prop="inMsg" label="In - msg/s"/>
-          <el-table-column prop="outMsg" label="Out - msg/s"/>
-          <el-table-column prop="inBytes" label="In - bytes/s"/>
-          <el-table-column prop="outBytes" label="Out - bytes/s"/>
+          <el-table-column :label="$t('common.inMsg')" prop="inMsg"/>
+          <el-table-column :label="$t('common.outMsg')" prop="outMsg"/>
+          <el-table-column :label="$t('common.inBytes')" prop="inBytes"/>
+          <el-table-column :label="$t('common.outBytes')" prop="outBytes"/>
         </el-table>
         <h4>
           Bundles
@@ -43,22 +43,22 @@
           fit
           highlight-current-row
           style="width: 100%;">
-          <el-table-column label="Bundle" align="center" min-width="100px">
+          <el-table-column :label="$t('namespace.bundle.label')" align="center" min-width="100px">
             <template slot-scope="scope">
               <span>{{ scope.row.bundle }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="Operations" align="center" class-name="small-padding fixed-width">
+          <el-table-column :label="$t('namespace.bundle.operation')" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
-              <el-button size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-share" @click="handleSplitBundle(scope.row)">Split</el-button>
-              <el-button size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-download" @click="handleUnloadBundle(scope.row)">Unload</el-button>
-              <el-button size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-close" @click="handleClearBundleBacklog(scope.row)">Clear Backlog</el-button>
+              <el-button size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-share" @click="handleSplitBundle(scope.row)">{{ $t('namespace.bundle.split') }}</el-button>
+              <el-button size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-download" @click="handleUnloadBundle(scope.row)">{{ $t('namespace.bundle.unload') }}</el-button>
+              <el-button size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-close" @click="handleClearBundleBacklog(scope.row)">{{ $t('namespace.clearBacklog') }}</el-button>
             </template>
           </el-table-column>
         </el-table>
         <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"/> -->
       </el-tab-pane>
-      <el-tab-pane label="TOPICS" name="topics">
+      <el-tab-pane :label="$t('tabs.topic')" name="topics">
         <el-input v-model="searchTopic" :placeholder="$t('namespace.searchTopics')" style="width: 200px;" @keyup.enter.native="handleFilterTopic"/>
         <el-button type="primary" icon="el-icon-search" @click="handleFilterTopic"/>
         <el-button type="primary" icon="el-icon-plus" @click="handleCreateTopic">{{ $t('namespace.newTopic') }}</el-button>
@@ -72,54 +72,54 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column label="Topic" min-width="50px" align="center">
+              <el-table-column :label="$t('topic.label')" min-width="50px" align="center">
                 <template slot-scope="scope">
                   <router-link :to="scope.row.topicLink" class="link-type">
                     <span>{{ scope.row.topic }}</span>
                   </router-link>
                 </template>
               </el-table-column>
-              <el-table-column label="Partitions" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.partitionNumber')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.partitions }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Persistent" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.persistent')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.persistent }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Producers" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.producer.producerNumber')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.producers }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Subscriptions" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.subscription.subscriptionNumber')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.subscriptions }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="In - msg/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.inMsg')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.inMsg }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Out - msg/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.outMsg')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.outMsg }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="In - bytes/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.inBytes')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.inBytes }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Out - bytes/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.outBytes')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.outBytes }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Storage Size" min-width="30px" align="center">
+              <el-table-column :label="$t('common.storageSize')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.storageSize }}</span>
                 </template>
@@ -128,26 +128,26 @@
           </el-col>
         </el-row>
       </el-tab-pane>
-      <el-tab-pane label="POLICIES" name="policies">
-        <h4>Clusters</h4>
+      <el-tab-pane :label="$t('tabs.policies')" name="policies">
+        <h4>{{ $t('namespace.policy.cluster') }}</h4>
         <hr class="split-line">
         <div class="component-item">
           <div class="section-title">
-            <span>Replicated Clusters</span>
+            <span>{{ $t('namespace.policy.replicatedCluster') }}</span>
             <el-tooltip :content="replicatedClustersContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
           </div>
           <el-select
             v-model="replicationClustersValue"
+            :placeholder="$t('cluster.selectClusterMessage')"
             style="width:500px;margin-top:20px"
             multiple
-            placeholder="Please Select Cluster"
             @change="handleReplicationsClusters()">
             <el-option v-for="item in replicationClustersOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </div>
-        <h4>Authorization
+        <h4>{{ $t('namespace.policy.authorization') }}
           <el-tooltip :content="authorizationContent" class="item" effect="dark" placement="top">
             <i class="el-icon-info"/>
           </el-tooltip>
@@ -166,8 +166,8 @@
             </div>
             <el-select
               v-model="roleMap[tag]"
+              :placeholder="$t('namespace.policy.selectRole')"
               multiple
-              placeholder="Please Select Options"
               style="width:300px;"
               @change="handleChangeOptions()">
               <el-option
@@ -177,7 +177,7 @@
                 :value="item.value"
                 style="width:300px"/>
             </el-select>
-            <el-button @click.prevent="handleClose(tag)">删除</el-button>
+            <el-button @click.prevent="handleClose(tag)">{{ $t('namespace.policy.deleteRole') }}</el-button>
           </el-tag>
           <el-form-item style="margin-top:30px">
             <el-input
@@ -190,14 +190,14 @@
               @keyup.enter.native="handleInputConfirm"
               @blur="handleInputConfirm"
             />
-            <el-button @click="showInput()">Add Role</el-button>
+            <el-button @click="showInput()">{{ $t('namespace.policy.addRole') }}</el-button>
             <!-- <el-button @click="revokeAllRole()">Revoke All</el-button> -->
           </el-form-item>
         </el-form>
-        <h4>Subscription Authentication</h4>
+        <h4>{{ $t('namespace.policy.subscriptionAuthentication') }}</h4>
         <hr class="split-line">
         <div class="section-title">
-          <span>Subscription Authentication Mode</span>
+          <span>{{ $t('namespace.policy.subscriptionAuthenticationMode') }}</span>
           <el-tooltip :content="subscriptionAuthenticationModeContent" class="item" effect="dark" placement="top">
             <i class="el-icon-info"/>
           </el-tooltip>
@@ -213,60 +213,60 @@
             :label="item.label"
             :value="item.value"/>
         </el-select>
-        <h4>Storage</h4>
+        <h4>{{ $t('namespace.policy.storage') }}</h4>
         <hr class="split-line">
         <div class="section-title">
-          <span>Replication Factor</span>
+          <span>{{ $t('namespace.policy.replicationFactor') }}</span>
           <el-tooltip :content="replicationFactorContent" class="item" effect="dark" placement="top">
             <i class="el-icon-info"/>
           </el-tooltip>
         </div>
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="ensembelSize">
-            <span>Ensemble Size</span>
+            <span>{{ $t('namespace.policy.ensembelSize') }}</span>
             <md-input
               v-model="form.ensembleSize"
+              :placeholder="$t('namespace.policy.inputEnsemble')"
               class="md-input-style"
               name="ensembelSize"
-              placeholder="Please input Ensemble"
               @keyup.enter.native="handlePersistence"/>
           </el-form-item>
           <el-form-item prop="writeQuorumSize">
-            <span>Write Quorum Size</span>
+            <span>{{ $t('namespace.policy.writeQuorumSize') }}</span>
             <md-input
               v-model="form.writeQuorumSize"
+              :placeholder="$t('namespace.policy.inputWriteQuorumSize')"
               class="md-input-style"
               name="writeQuorumSize"
-              placeholder="Please input Write Quorum Size"
               @keyup.enter.native="handlePersistence"/>
           </el-form-item>
           <el-form-item prop="readQuorumSize">
-            <span>Read Quorum Size</span>
+            <span>{{ $t('namespace.policy.readQuorumSize') }}</span>
             <md-input
               v-model="form.readQuorumSize"
+              :placeholder="$t('namespace.policy.inputReadQuorumSize')"
               class="md-input-style"
               name="readQuorumSize"
-              placeholder="Please input Read Quorum Size"
               @keyup.enter.native="handlePersistence"/>
           </el-form-item>
         </el-form>
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="markDeleteMaxRate">
-            <span>Mark Delete Rate</span>
+            <span>{{ $t('namespace.policy.markDeleteRate') }}</span>
             <el-tooltip :content="markDeleteRateContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.markDeleteMaxRate"
+              :placeholder="$t('namespace.policy.inputDeleteMaxRate')"
               class="md-input-style"
               name="markDeleteMaxRate"
-              placeholder="Please input Delete Max Rate"
               @keyup.enter.native="handlePersistence"/>
           </el-form-item>
         </el-form>
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="encryptionRequire">
-            <span>Encryption Require</span>
+            <span>{{ $t('namespace.policy.encryptionRequire') }}</span>
             <el-tooltip :content="encryptionRequireContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
@@ -276,12 +276,12 @@
               size="medium"
               style="margin-top:8px;width:300px"
               @change="handleEncryption()">
-              <el-radio label="Enabled"/>
-              <el-radio label="Disabled"/>
+              <el-radio :label="$t('common.enabled')"/>
+              <el-radio :label="$t('common.disabled')"/>
             </el-radio-group>
           </el-form-item>
           <el-form-item prop="deduplication">
-            <span>Deduplication</span>
+            <span>{{ $t('namespace.policy.deduplication') }}</span>
             <el-tooltip :content="deduplicationContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
@@ -291,35 +291,35 @@
               size="medium"
               style="margin-top:8px;width:300px"
               @change="handleDeduplication()">
-              <el-radio label="Enabled"/>
-              <el-radio label="Disabled"/>
+              <el-radio :label="$t('common.enabled')"/>
+              <el-radio :label="$t('common.disabled')"/>
             </el-radio-group>
           </el-form-item>
         </el-form>
-        <h4>Backlog</h4>
+        <h4>{{ $t('namespace.policy.backlog') }}</h4>
         <hr class="split-line">
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="backlogQuotasLimit">
-            <span>Backlog Quotas Limit</span>
+            <span>{{ $t('namespace.policy.backlogQuotasLimit') }}</span>
             <el-tooltip :content="backlogQuotasLimitContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.backlogQuotasLimit"
+              :placeholder="$t('namespace.policy.inputBacklogQuotasLimit')"
               class="md-input-style"
               name="backlogQuotasLimit"
-              placeholder="Please input Backlog Quotas Limit"
               @keyup.enter.native="handleBacklogQuota"/>
           </el-form-item>
           <el-form-item style="width:300px">
-            <span>Backlog Retention Policy</span>
+            <span>{{ $t('namespace.policy.backlogRententionPolicy') }}</span>
             <el-tooltip :content="backlogRententionPolicyContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <br>
             <el-select
               v-model="form.backlogRententionPolicy"
-              placeholder="Please select backlog rentention policy"
+              :placeholder="$t('namespace.policy.inputBacklogRententionPolicyContent')"
               style="margin-top:8px;width:400px"
               @change="handleBacklogQuota()">
               <el-option
@@ -330,18 +330,18 @@
             </el-select>
           </el-form-item>
         </el-form>
-        <h4>Schema</h4>
+        <h4>{{ $t('namespace.policy.schema') }}</h4>
         <hr class="split-line">
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="autoUpdateStrategy">
-            <span>AutoUpdate Strategy</span>
+            <span>{{ $t('namespace.policy.autoUpdateStrategy') }}</span>
             <el-tooltip :content="autoUpdateStrategyContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <br>
             <el-select
               v-model="form.autoUpdateStrategy"
-              placeholder="Please select backlog autoUpdate strategy"
+              :placeholder="$t('namespace.policy.inputAutoUpdateStrategy')"
               style="margin-top:8px;width:300px"
               @change="handleSchemaAutoUpdateStrategy()">
               <el-option
@@ -352,7 +352,7 @@
             </el-select>
           </el-form-item>
           <el-form-item prop="schemaValidationEnforced">
-            <span>Schema Validation Enforced</span>
+            <span>{{ $t('namespace.policy.schemaValidationEnforced') }}</span>
             <el-tooltip :content="schemaValidationEnforcedContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
@@ -362,263 +362,263 @@
               size="medium"
               style="margin-top:8px;width:300px"
               @change="handleSchemaValidationEnforced()">
-              <el-radio label="Enabled"/>
-              <el-radio label="Disabled"/>
+              <el-radio :label="$t('common.enabled')"/>
+              <el-radio :label="$t('common.disabled')"/>
             </el-radio-group>
           </el-form-item>
         </el-form>
-        <h4>Cleanup Policy</h4>
+        <h4>{{ $t('namespace.policy.cleanupPolicy') }}</h4>
         <hr class="split-line">
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="messageTTL">
-            <span>Message TTL(Unit Second)</span>
+            <span>{{ $t('namespace.policy.messageTTL') }}</span>
             <el-tooltip :content="messageTTLContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.messageTTL"
+              :placeholder="$t('namespace.policy.inputMessageTTL')"
               class="md-input-style"
               name="messageTTL"
-              placeholder="Please input Backlog Quotas Limit"
               @keyup.enter.native="handleMessageTTL"/>
           </el-form-item>
         </el-form>
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="retentionSize">
-            <span>Retention Size</span>
+            <span>{{ $t('namespace.policy.retentionSize') }}</span>
             <el-tooltip :content="retentionSizeContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.retentionSize"
+              :placeholder="$t('namespace.policy.inputRententionSize')"
               class="md-input-style"
               name="retentionSize"
-              placeholder="Please input retention size"
               @keyup.enter.native="handleRetention"/>
           </el-form-item>
           <el-form-item prop="retentionTime">
-            <span>Retention Time(Unit Minutes)</span>
+            <span>{{ $t('namespace.policy.retentionTime') }}</span>
             <el-tooltip :content="retentionTimeContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.retentionTime"
+              :placeholder="$t('namespace.policy.inputRetentionTime')"
               class="md-input-style"
               name="retentionTime"
-              placeholder="Please input Retention Time"
               @keyup.enter.native="handleRetention"/>
           </el-form-item>
         </el-form>
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="compactionThreshold">
-            <span>Compaction Threshold</span>
+            <span>{{ $t('namespace.policy.compactionThreshold') }}</span>
             <el-tooltip :content="compactionThresholdContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.compactionThreshold"
+              :placeholder="$t('namespace.policy.inputCompactionThreshold')"
               class="md-input-style"
               name="compactionThreshold"
-              placeholder="Please input retention size"
               @keyup.enter.native="handleCompactionThreshold"/>
           </el-form-item>
         </el-form>
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="offloadThreshold">
-            <span>Offload Threshold</span>
+            <span>{{ $t('namespace.policy.offloadThreshold') }}</span>
             <el-tooltip :content="offloadThresholdContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.offloadThreshold"
+              :placeholder="$t('namespace.policy.inputOffloadThreshold')"
               class="md-input-style"
               name="offloadThreshold"
-              placeholder="Please input Offload Threshold"
               @keyup.enter.native="handleOffloadThreshold"/>
           </el-form-item>
           <el-form-item prop="offloadDeletionLag">
-            <span>Offload Deletion Lag</span>
+            <span>{{ $t('namespace.policy.offloadDeletionLag') }}</span>
             <el-tooltip :content="offloadDeletionLagContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.offloadDeletionLag"
+              :placeholder="$t('namespace.policy.inputOffloadDeleteLag')"
               class="md-input-style"
               name="offloadDeletionLag"
-              placeholder="Please input Retention Time"
               @keyup.enter.native="handleOffloadDeletionLag"/>
           </el-form-item>
         </el-form>
-        <h4>Throttling</h4>
+        <h4>{{ $t('namespace.policy.throttling') }}</h4>
         <hr class="split-line">
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="maxProducersPerTopic">
-            <span>Max Producers Per Topic</span>
+            <span>{{ $t('namespace.policy.maxProducersPerTopic') }}</span>
             <el-tooltip :content="maxProducersPerTopicContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.maxProducersPerTopic"
+              :placeholder="$t('namespace.policy.inputMaxProducersPerTopic')"
               class="md-input-style"
               name="maxProducersPerTopic"
-              placeholder="Please input max Producers"
               @keyup.enter.native="handleMaxProducersPerTopic"/>
           </el-form-item>
           <el-form-item prop="maxConsumersPerTopic">
-            <span>Max Consumers Per Topic</span>
+            <span>{{ $t('namespace.policy.maxConsumersPerTopic') }}</span>
             <el-tooltip :content="maxConsumersPerTopicContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.maxConsumersPerTopic"
+              :placeholder="$t('namespace.policy.inputMaxConsumersForTopic')"
               class="md-input-style"
               name="maxConsumersPerTopic"
-              placeholder="Please input max Consumers"
               @keyup.enter.native="handleMaxConsumersPerTopic"/>
           </el-form-item>
         </el-form>
         <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
           <el-form-item prop="maxConsumerPerSub">
-            <span>Max Consumers Per Subscription</span>
+            <span>{{ $t('namespace.policy.maxConsumerPerSubscription') }}</span>
             <el-tooltip :content="maxConsumerPerSubContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.maxConsumerPerSub"
+              :placeholder="$t('namespace.policy.inputMaxConsumersForSub')"
               class="md-input-style"
               name="maxConsumerPerSub"
-              placeholder="Please input max Consumers"
               @keyup.enter.native="handleMaxConsuemrsPerSubscription"/>
           </el-form-item>
         </el-form>
-        <h4>Dispatch Rate</h4>
+        <h4>{{ $t('namespace.policy.dispatchRate') }}</h4>
         <hr class="split-line">
-        <span>Dispatch Rate Per Topic</span>
+        <span>{{ $t('namespace.policy.dispatchRatePerTopic') }}</span>
         <el-tooltip :content="dispatchRatePerTopicContent" class="item" effect="dark" placement="top">
           <i class="el-icon-info"/>
         </el-tooltip>
         <el-form :inline="true" :model="form" :rules="rules">
           <el-form-item prop="dispatchRatePerTopicBytes">
-            <span>bytes/second</span>
+            <span>{{ $t('namespace.policy.dispatchRatePerTopicBytes') }}</span>
             <md-input
               v-model="form.dispatchRatePerTopicBytes"
+              :placeholder="$t('namespace.policy.inputDispatchRateBytes')"
               class="md-input-style"
               name="dispatchRatePerTopicBytes"
-              placeholder="Please input dispatch rate"
               @keyup.enter.native="handleDispatchRatePerTopic"/>
           </el-form-item>
           <el-form-item prop="dispatchRatePerTopicMessage">
-            <span>message/second</span>
+            <span>{{ $t('namespace.policy.dispatchRatePerTopicMessage') }}</span>
             <md-input
               v-model="form.dispatchRatePerTopicMessage"
+              :placeholder="$t('namespace.policy.inputDispatchRatePerTopicMessage')"
               class="md-input-style"
               name="dispatchRatePerTopicMessage"
-              placeholder="Please input dispatch rate"
               @keyup.enter.native="handleDispatchRatePerTopic"/>
           </el-form-item>
           <el-form-item prop="dispatchRatePerTopicPeriod">
-            <span>period(Unit second)</span>
+            <span>{{ $t('namespace.policy.dispatchRatePerTopicPeriod') }}</span>
             <md-input
               v-model="form.dispatchRatePerTopicPeriod"
+              :placeholder="$t('namespace.policy.inputDispatchPerTopicPerPeriod')"
               class="md-input-style"
               name="dispatchRatePerTopicPeriod"
-              placeholder="Please input dispatch rate"
               @keyup.enter.native="handleDispatchRatePerTopic"/>
           </el-form-item>
         </el-form>
-        <span>Dispatch Rate Per Subscription</span>
+        <span>{{ $t('namespace.policy.dispatchRateForSub') }}</span>
         <el-tooltip :content="dispatchRatePerSubContent" class="item" effect="dark" placement="top">
           <i class="el-icon-info"/>
         </el-tooltip>
         <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
           <el-form-item prop="dispatchRatePerSubBytes">
-            <span>bytes/second</span>
+            <span>{{ $t('namespace.policy.dispatchRatePerSubBytes') }}</span>
             <md-input
               v-model="form.dispatchRatePerSubBytes"
+              :placeholder="$t('namespace.policy.inputDispatchRatePerSubBytes')"
               class="md-input-style"
               name="dispatchRatePerSubBytes"
-              placeholder="Please input dispatch rate"
               @keyup.enter.native="handleDispatchRatePerSub"/>
           </el-form-item>
           <el-form-item prop="dispatchRatePerSubMessage">
-            <span>message/second</span>
+            <span>{{ $t('namespace.policy.dispatchRatePerSubMessage') }}</span>
             <md-input
               v-model="form.dispatchRatePerSubMessage"
+              :placeholder="$t('namespace.policy.inputDispatchRatePerSubMessage')"
               class="md-input-style"
               name="dispatchRatePerSubMessage"
-              placeholder="Please input dispatch rate"
               @keyup.enter.native="handleDispatchRatePerSub"/>
           </el-form-item>
           <el-form-item prop="dispatchRatePerSubPeriod">
-            <span>period(Unit Second)</span>
+            <span>{{ $t('namespace.policy.dispatchRatePerSubPeriod') }}</span>
             <md-input
               v-model="form.dispatchRatePerSubPeriod"
+              :placeholder="$t('namespace.policy.inputDispatchRatePerSubPeriod')"
               class="md-input-style"
               name="dispatchRatePerSubPeriod"
-              placeholder="Please input dispatch rate"
               @keyup.enter.native="handleDispatchRatePerSub"/>
           </el-form-item>
         </el-form>
-        <span>Subscribe Rate Per Consumer</span>
+        <span>{{ $t('namespace.policy.subscribeRatePerConsumer') }}</span>
         <el-tooltip :content="subscribeRatePerConsumerContent" class="item" effect="dark" placement="top">
           <i class="el-icon-info"/>
         </el-tooltip>
         <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
           <el-form-item prop="subscribeRatePerConsumerSub">
-            <span>message/second</span>
+            <span>{{ $t('namespace.policy.subscribeRatePerConsumerSub') }}</span>
             <md-input
               v-model="form.subscribeRatePerConsumerSub"
+              :placeholder="$t('namespace.policy.inputSubscribeRate')"
               class="md-input-style"
               name="subscribeRatePerConsumerSub"
-              placeholder="Please input subscribe rate"
               @keyup.enter.native="handleSubscribeRate"/>
           </el-form-item>
           <el-form-item prop="subscribeRatePerConsumerPeriod">
-            <span>period(Unit Second)</span>
+            <span>{{ $t('namespace.policy.subscribeRatePerConsumerPeriod') }}</span>
             <md-input
               v-model="form.subscribeRatePerConsumerPeriod"
+              :placeholder="$t('namespace.policy.inputSubscribeRate')"
               class="md-input-style"
               name="subscribeRatePerConsumerPeriod"
-              placeholder="Please input subscribe rate"
               @keyup.enter.native="handleSubscribeRate"/>
           </el-form-item>
         </el-form>
-        <h4>Anti Affinity</h4>
+        <h4>{{ $t('namespace.policy.antiAffinity') }}</h4>
         <hr class="split-line">
         <el-form :inline="true" :model="form" :rules="rules" @submit.native.prevent>
           <el-form-item prop="antiAffinityGroup">
-            <span>Anti Affinity Group</span>
+            <span>{{ $t('namespace.policy.antiAffinityGroup') }}</span>
             <el-tooltip :content="antiAffinityGroupContent" class="item" effect="dark" placement="top">
               <i class="el-icon-info"/>
             </el-tooltip>
             <md-input
               v-model="form.antiAffinityGroup"
+              :placeholder="$t('namespace.policy.inputAntiAffinityGroup')"
               class="md-input-style"
               name="antiAffinityGroup"
-              placeholder="Please input Anti Affinity Group"
               @keyup.enter.native="handleAntiAffinityGroup"/>
           </el-form-item>
         </el-form>
-        <h4 style="color:#E57470">Danger Zone</h4>
+        <h4 style="color:#E57470">{{ $t('common.dangerZone') }}</h4>
         <hr class="danger-line">
-        <el-button type="danger" class="button" @click="handleDeleteNamespace">Delete Namespace</el-button>
+        <el-button type="danger" class="button" @click="handleDeleteNamespace">{{ $t('namespace.deleteNamespace') }}</el-button>
       </el-tab-pane>
     </el-tabs>
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%">
       <el-form ref="form" :rules="rules" :model="form" label-position="top">
         <div v-if="dialogStatus==='create'">
-          <el-form-item label="Topic Domain">
+          <el-form-item :label="$t('topic.topicDomain')">
             <el-radio-group
               v-model="form.isPersistent"
               size="medium">
-              <el-radio label="Persistent"/>
-              <el-radio label="Non-persistent"/>
+              <el-radio :label="$t('topic.persistent')"/>
+              <el-radio :label="$t('topic.nonPersistent')"/>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="$t('table.topic')" prop="topic">
+          <el-form-item :label="$t('topic.name')" prop="topic">
             <el-input v-model="form.topic"/>
           </el-form-item>
-          <el-form-item :label="$t('table.partition')" prop="partition">
+          <el-form-item :label="$t('topic.partition')" prop="partition">
             <el-input v-model="form.partitions"/>
           </el-form-item>
           <el-form-item>
@@ -627,7 +627,7 @@
           </el-form-item>
         </div>
         <el-form-item v-if="dialogStatus==='delete'">
-          <h4>Are you sure you want to delete this namespace?</h4>
+          <h4>{{ $t('namespace.deleteNamespaceMessage') }}</h4>
         </el-form-item>
         <el-form-item v-if="dialogStatus==='delete'">
           <el-button type="primary" @click="deleteNamespace()">{{ $t('table.confirm') }}</el-button>
@@ -703,7 +703,7 @@
         inBytes: 0,
         outBytes: 0
       }],
-      replicatedClustersContent: 'This is Allowed Clusters',
+      replicatedClustersContent: this.$i18n.t('namespace.replicatedClustersContent'),
       replicationClustersValue: [],
       replicationClustersOptions: [],
       dynamicValidateForm: {
@@ -728,9 +728,9 @@
         value: 'functions',
         label: 'functions'
       }],
-      authorizationContent: 'This is AuthorizationContent',
+      authorizationContent: this.$i18n.t('namespace.policy.authorizationContent'),
       subscriptionAuthenticationMode: '',
-      subscriptionAuthenticationModeContent: 'This is subscriptionAuthenticationMode',
+      subscriptionAuthenticationModeContent: this.$i18n.t('namespace.policy.subscriptionAuthenticationModeContent'),
       subscriptionAuthenticationModeOptions: [{
         value: 'None',
         label: 'None'
@@ -738,7 +738,7 @@
         value: 'Prefix',
         label: 'Prefix'
       }],
-      replicationFactorContent: 'This is replicationFactorContent',
+      replicationFactorContent: this.$i18n.t('namespace.policy.replicationFactorContent'),
       form: {
         ensembelSize: '',
         writeQuorumSize: '',
@@ -772,9 +772,9 @@
         topic: [{ required: true, message: 'topic is required', trigger: 'blur' }]
         // ensembelSize: [{ required: true, message: 'EnsembelSize is greater more than 0', trigger: 'blur' }]
       },
-      markDeleteRateContent: 'This is markDeleteRateContent',
-      backlogQuotasLimitContent: 'This is backlogQuotasLimitContent',
-      backlogRententionPolicyContent: 'This is backlogRententionPolicyContent',
+      markDeleteRateContent: this.$i18n.t('namespace.policy.markDeleteRateContent'),
+      backlogQuotasLimitContent: this.$i18n.t('namespace.policy.backlogQuotasLimitContent'),
+      backlogRententionPolicyContent: this.$i18n.t('namespace.policy.backlogRententionPolicyContent'),
       backlogRententionPolicyRadio: 'consumer_backlog_eviction',
       backlogRententionPolicyOption: [{
         value: 'consumer_backlog_eviction',
@@ -786,7 +786,7 @@
         value: 'producer_request_hold',
         lable: 'producer_request_hold'
       }],
-      encryptionRequireContent: 'This is encryptionRequireContent',
+      encryptionRequireContent: this.$i18n.t('namespace.policy.encryptionRequireContent'),
       encryptionRequireOption: [{
         value: 'Enabled',
         label: 'Enabled'
@@ -794,7 +794,7 @@
         value: 'Disabled',
         label: 'Disabled'
       }],
-      deduplicationContent: 'This is deduplicationContent',
+      deduplicationContent: this.$i18n.t('namespace.policy.deduplicationContent'),
       deduplication: '',
       deduplicationOption: [{
         value: 'Enabled',
@@ -803,7 +803,7 @@
         value: 'Disabled',
         label: 'Disabled'
       }],
-      autoUpdateStrategyContent: 'This is schemaValidationEnforced',
+      autoUpdateStrategyContent: this.$i18n.t('namespace.policy.autoUpdateStrategyContent'),
       autoUpdateStrategyOption: [{
         value: 'Full',
         label: 'Full'
@@ -829,21 +829,21 @@
         value: 'FullTransitive',
         label: 'FullTransitive'
       }],
-      schemaValidationEnforcedContent: 'This is schemaValidationEnforcedContent',
+      schemaValidationEnforcedContent: this.$i18n.t('namespace.policy.schemaValidationEnforcedContent'),
       schemaValidationEnforced: '',
-      messageTTLContent: 'This is messageTTLContent',
-      retentionSizeContent: 'This is retentionSizeContent',
-      retentionTimeContent: 'This is retentionTimeContent',
-      compactionThresholdContent: 'This is compactionThresholdContent',
-      offloadThresholdContent: 'This is offloadThresholdContent',
-      offloadDeletionLagContent: 'This is offloadDeletionLagContent',
-      maxProducersPerTopicContent: 'This is maxProducersPerTopicContent',
-      maxConsumersPerTopicContent: 'This is maxConsumersPerTopicContent',
-      maxConsumerPerSubContent: 'This is maxConsumerPerSubContent',
-      dispatchRatePerTopicContent: 'This is dispatchRatePerTopicContent',
-      dispatchRatePerSubContent: 'This is dispatchRatePerSubContent',
-      subscribeRatePerConsumerContent: 'This is subscribeRatePerConsumerContent',
-      antiAffinityGroupContent: 'This is antiAffinityGroupContent',
+      messageTTLContent: this.$i18n.t('namespace.policy.messageTTLContent'),
+      retentionSizeContent: this.$i18n.t('namespace.policy.retentionSizeContent'),
+      retentionTimeContent: this.$i18n.t('namespace.policy.retentionTimeContent'),
+      compactionThresholdContent: this.$i18n.t('namespace.policy.compactionThresholdContent'),
+      offloadThresholdContent: this.$i18n.t('namespace.policy.offloadThresholdContent'),
+      offloadDeletionLagContent: this.$i18n.t('namespace.policy.offloadDeletionLagContent'),
+      maxProducersPerTopicContent: this.$i18n.t('namespace.policy.maxProducersPerTopicContent'),
+      maxConsumersPerTopicContent: this.$i18n.t('namespace.policy.maxConsumersPerTopicContent'),
+      maxConsumerPerSubContent: this.$i18n.t('namespace.policy.maxConsumerPerSubContent'),
+      dispatchRatePerTopicContent: this.$i18n.t('namespace.policy.dispatchRatePerTopicContent'),
+      dispatchRatePerSubContent: this.$i18n.t('namespace.policy.dispatchRatePerSubContent'),
+      subscribeRatePerConsumerContent: this.$i18n.t('namespace.policy.subscribeRatePerConsumerContent'),
+      antiAffinityGroupContent: this.$i18n.t('namespace.policy.antiAffinityGroupContent'),
       tableKey: 0,
       topicsListLoading: true,
       topicsTableKey: 0,
@@ -863,10 +863,10 @@
       dialogFormVisible: false,
       dialogStatus: '',
       textMap: {
-        create: 'Create Topic'
+        create: this.$i18n.t('topic.newTopic')
       },
       currentTabName: '',
-      bundleInfoContent: 'This is bundleInfoContent'
+      bundleInfoContent: this.$i18n.t('bundleInfoContent')
     }
   },
   created() {
diff --git a/front-end/src/views/management/subscriptions/subscription.vue b/front-end/src/views/management/subscriptions/subscription.vue
index 039fb15..9a0c2fa 100644
--- a/front-end/src/views/management/subscriptions/subscription.vue
+++ b/front-end/src/views/management/subscriptions/subscription.vue
@@ -2,27 +2,27 @@
   <div class="app-container">
     <div class="createPost-container">
       <el-form :inline="true" :model="postForm" class="form-container">
-        <el-form-item label="Tenant">
+        <el-form-item :label="$t('tenant.label')">
           <el-select v-model="postForm.tenant" placeholder="select tenant" style="width: 150px;" @change="getNamespacesList(postForm.tenant)">
             <el-option v-for="(item,index) in tenantsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item label="Namespace">
+        <el-form-item :label="$t('namespace.label')">
           <el-select v-model="postForm.namespace" placeholder="select namespace" style="width: 150px;" @change="getTopicsList()">
             <el-option v-for="(item,index) in namespacesListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item label="Topic">
+        <el-form-item :label="$t('topic.label')">
           <el-select v-model="postForm.topic" placeholder="select topic" style="width: 150px;" @change="generatePartitions()">
             <el-option v-for="(item,index) in topicsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item label="Partition">
+        <el-form-item :label="$t('topic.partition')">
           <el-select v-model="postForm.partition" :disabled="partitionDisabled" placeholder="select partition" style="width: 150px;" @change="getSubscriptionsList()">
             <el-option v-for="(item,index) in partitionsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item label="Subscription">
+        <el-form-item :label="$t('topic.subscription.Subscription')">
           <el-select v-model="postForm.subscription" placeholder="select subscription" style="width: 150px;" @change="getSubscriptionsInfo()">
             <el-option v-for="(item,index) in subscriptionsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
@@ -30,7 +30,7 @@
       </el-form>
     </div>
     <el-tabs v-model="topActiveName" @tab-click="handleClick">
-      <el-tab-pane label="Consumers" name="consumers">
+      <el-tab-pane :label="$t('topic.consumer.consumers')" name="consumers">
         <el-row :gutter="24">
           <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}">
             <el-table
@@ -41,32 +41,32 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column label="Consumer Name" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.consumer.name')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.consumerName }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Out - msg/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.outMsg')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.outMsg }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Out - bytes/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.outBytes')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.outBytes }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Avg Msg Size" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.consumer.avgMsgSize')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.avgMsgSize }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Address" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.consumer.address')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.address }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Since" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.consumer.since')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.since }}</span>
                 </template>
@@ -75,7 +75,7 @@
           </el-col>
         </el-row>
       </el-tab-pane>
-      <el-tab-pane label="Backlog Operation" name="backlogOperation">
+      <el-tab-pane :label="$t('topic.backlogOpeartion')" name="backlogOperation">
         <el-tabs v-model="leftActiveName" :tab-position="tabPosition" @tab-click="handleLeftTabClick">
           <!-- <el-tab-pane label="INSPECT" name="inspect">
             <el-form :inline="true" :model="form">
@@ -109,50 +109,50 @@
               </el-col>
             </el-row>
           </el-tab-pane> -->
-          <el-tab-pane label="SKIP" name="skip">
+          <el-tab-pane :label="$t('topic.subscription.skip')" name="skip">
             <el-form :inline="true" :model="form">
-              <el-button type="primary" @click="handleSkipMessages">Skip</el-button>
+              <el-button type="primary" @click="handleSkipMessages">{{ $t('topic.subscription.skip') }}</el-button>
               <el-form-item>
                 <el-input v-model="form.skipNumMessages" placeholder="messages"/>
               </el-form-item>
-              <span>messages</span>
+              <span>{{ $t('topic.subscription.skipMessage') }}</span>
             </el-form>
           </el-tab-pane>
-          <el-tab-pane label="EXPIRE" name="expire">
+          <el-tab-pane :label="$t('topic.subscription.expire')" name="expire">
             <el-form :inline="true" :model="form">
-              <el-button type="primary" @click="handleExpireMessages">Expire</el-button>
+              <el-button type="primary" @click="handleExpireMessages">{{ $t('topic.subscription.expire') }}</el-button>
               <el-form-item>
                 <el-input v-model="form.expireNumMessages" placeholder="messages"/>
               </el-form-item>
-              <span>messages older than timestamp (in seconds)</span>
+              <span>{{ $t('topic.subscription.expireMessage') }}</span>
             </el-form>
           </el-tab-pane>
-          <el-tab-pane label="CLEAR" name="clear">
+          <el-tab-pane :label="$t('topic.subscription.clear')" name="clear">
             <el-form :inline="true" :model="form">
-              <el-button type="primary" @click="handleClearBacklog">Clear</el-button>
-              <span>the backlog</span>
+              <el-button type="primary" @click="handleClearBacklog">{{ $t('topic.subscription.clear') }}</el-button>
+              <span>{{ $t('topic.subscription.clearMessage') }}</span>
             </el-form>
           </el-tab-pane>
-          <el-tab-pane label="RESET" name="reset">
+          <el-tab-pane :label="$t('topic.subscription.reset')" name="reset">
             <el-form :inline="true" :model="form">
-              <el-button type="primary" @click="handleResetCursorByTime">Reset By Time</el-button>
+              <el-button type="primary" @click="handleResetCursorByTime">{{ $t('topic.subscription.resetByTimeMessage') }}</el-button>
               <span>The cursor to</span>
               <el-form-item>
                 <el-input v-model="form.minutes" placeholder="minutes"/>
               </el-form-item>
-              <span>mins</span>
+              <span>{{ $t('topic.subscription.mins') }}</span>
               <br>
-              <el-button type="primary" @click="handleResetCursorByMessageId">Reset By Message Id</el-button>
-              <span>Message ID</span>
+              <el-button type="primary" @click="handleResetCursorByMessageId">{{ $t('topic.subscription.resetById') }}</el-button>
+              <span>{{ $t('topic.subscription.messageId') }}</span>
               <el-form-item>
-                <el-select v-model="form.ledgerValue" style="width:150px" placeholder="LedgerId">
+                <el-select v-model="form.ledgerValue" :placeholder="$t('topic.subscription.ledgerId')" style="width:150px">
                   <el-option
                     v-for="item in ledgerOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"/>
                 </el-select>
-                <el-input v-model="form.messagesId" style="width: 150px" placeholder="Message id"/>
+                <el-input v-model="form.messagesId" :placeholder="$t('topic.subscription.messageId')" style="width: 150px"/>
               </el-form-item>
             </el-form>
           </el-tab-pane>
diff --git a/front-end/src/views/management/tenants/index.vue b/front-end/src/views/management/tenants/index.vue
index a5c9614..ef8fd21 100644
--- a/front-end/src/views/management/tenants/index.vue
+++ b/front-end/src/views/management/tenants/index.vue
@@ -16,26 +16,26 @@
           fit
           highlight-current-row
           style="width: 100%;">
-          <el-table-column :label="$t('table.tenant')" min-width="50px" align="center">
+          <el-table-column :label="$t('tenant.name')" min-width="50px" align="center">
             <template slot-scope="scope">
               <router-link :to="'/management/tenants/tenantInfo/' + scope.row.tenant + '?tab=namespaces'" class="link-type">
                 <span>{{ scope.row.tenant }}</span>
               </router-link>
             </template>
           </el-table-column>
-          <el-table-column :label="$t('table.namespace')" align="center" min-width="100px">
+          <el-table-column :label="$t('namespace.namespaceNumber')" align="center" min-width="100px">
             <template slot-scope="scope">
               <router-link :to="'/management/tenants/tenantInfo/' + scope.row.tenant + '?tab=namespaces'" class="link-type">
                 <span>{{ scope.row.namespace }}</span>
               </router-link>
             </template>
           </el-table-column>
-          <el-table-column :label="$t('table.allowedClusters')" align="center" min-width="100px">
+          <el-table-column :label="$t('tenant.allowedClustersLabel')" align="center" min-width="100px">
             <template slot-scope="scope">
               <span>{{ scope.row.allowedClusters }}</span>
             </template>
           </el-table-column>
-          <el-table-column :label="$t('table.adminRoles')" align="center" min-width="100px">
+          <el-table-column :label="$t('tenant.adminRolesLabel')" align="center" min-width="100px">
             <template slot-scope="scope">
               <span>{{ scope.row.adminRoles }}</span>
             </template>
@@ -55,14 +55,14 @@
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%">
       <el-form ref="form" :rules="rules" :model="form" label-position="top">
         <el-form-item v-if="dialogStatus==='create'" :label="$t('table.tenant')" prop="tenant">
-          <el-input v-model="form.tenant" placeholder="Please input tenant"/>
+          <el-input v-model="form.tenant" :placeholder="$t('tenant.selectTenantMessage')"/>
         </el-form-item>
-        <el-form-item v-if="dialogStatus==='create'" label="Allowed Clusters" prop="clusters">
-          <el-select v-model="form.clusters" multiple placeholder="Please select clusters" style="width:100%">
+        <el-form-item v-if="dialogStatus==='create'" :label="$t('tenant.allowedClustersLabel')" prop="clusters">
+          <el-select v-model="form.clusters" :placeholder="$t('cluster.selectClusterMessage')" multiple style="width:100%">
             <el-option v-for="item in clusterListOptions" :label="item.label" :value="item.value" :key="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="dialogStatus==='create'" label="Allowed Roles" prop="roles">
+        <el-form-item v-if="dialogStatus==='create'" :label="$t('tenant.adminRolesLabel')" prop="roles">
           <el-tag
             v-for="tag in form.dynamicRoles"
             :key="tag"
@@ -81,7 +81,7 @@
           <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Role</el-button>
         </el-form-item>
         <el-form-item v-if="dialogStatus==='delete'">
-          <h4>Are you sure you want to delete this tenant?</h4>
+          <h4>{{ deleteTenantMessage }}</h4>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleOptions()">{{ $t('table.confirm') }}</el-button>
@@ -128,15 +128,16 @@
       dialogFormVisible: false,
       dialogStatus: '',
       textMap: {
-        create: 'New Tenant',
-        delete: 'Delete Tenant'
+        create: this.$i18n.t('tenant.newTenant'),
+        delete: this.$i18n.t('tenant.deleteTenant')
       },
       rules: {
         tenant: [{ required: true, message: 'Tenant is required', trigger: 'blur' }],
         clusters: [{ required: true, message: 'Cluster is required', trigger: 'blur' }]
       },
       inputVisible: false,
-      inputValue: ''
+      inputValue: '',
+      deleteTenantMessage: this.$i18n.t('tenant.deleteTenantMessage')
     }
   },
   created() {
diff --git a/front-end/src/views/management/tenants/tenant.vue b/front-end/src/views/management/tenants/tenant.vue
index bbf9ae7..9393cbd 100644
--- a/front-end/src/views/management/tenants/tenant.vue
+++ b/front-end/src/views/management/tenants/tenant.vue
@@ -3,14 +3,14 @@
     <div class="createPost-container">
       <el-form :inline="true" :model="postForm" class="form-container">
         <el-form-item class="postInfo-container-item" label="Tenant">
-          <el-select v-model="postForm.tenant" placeholder="select tenant" @change="getNamespacesList(postForm.tenant)">
+          <el-select v-model="postForm.tenant" :placeholder="$t('tenant.selectTenantMessage')" @change="getNamespacesList(postForm.tenant)">
             <el-option v-for="(item,index) in tenantsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
       </el-form>
     </div>
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="Namespaces" name="namespaces">
+      <el-tab-pane :label="$t('tabs.namespace')" name="namespaces">
         <div class="filter-container">
           <el-input
             :placeholder="$t('table.namespace')"
@@ -18,7 +18,7 @@
             style="width: 200px;"
             @keyup.enter.native="handleFilterNamespace"/>
           <el-button type="primary" icon="el-icon-search" @click="handleFilterNamespace"/>
-          <el-button type="primary" icon="el-icon-plus" @click="handleCreateNamespace">New Namespace</el-button>
+          <el-button type="primary" icon="el-icon-plus" @click="handleCreateNamespace">{{ $t('namespace.newNamespace') }}</el-button>
         </div>
         <el-row :gutter="24">
           <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}">
@@ -30,14 +30,14 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column :label="$t('table.namespace')" align="center">
+              <el-table-column :label="$t('namespace.name')" align="center">
                 <template slot-scope="scope">
                   <router-link :to="'/management/namespaces/' + scope.row.tenant +'/' + scope.row.namespace + '/namespace?tab=overview'" class="link-type">
                     <span>{{ scope.row.namespace }}</span>
                   </router-link>
                 </template>
               </el-table-column>
-              <el-table-column label="topics" align="center">
+              <el-table-column :label="$t('topic.topicNumber')" align="center">
                 <template slot-scope="scope">
                   <router-link :to="'/management/namespaces/' + scope.row.tenant + '/' + scope.row.namespace + '/namespace?tab=topics'" class="link-type">
                     <span>{{ scope.row.topics }}</span>
@@ -56,35 +56,35 @@
           </el-col>
         </el-row>
       </el-tab-pane>
-      <el-tab-pane label="Configuration" name="configuration">
+      <el-tab-pane :label="$t('tabs.configuration')" name="configuration">
         <el-row :gutter="24">
           <el-col :span="24">
             <div slot="header" class="clearfix">
-              <h2>Tenant Info</h2>
+              <h2>{{ $t('tenant.tenantInfo') }}</h2>
             </div>
             <h4>Clusters</h4>
             <hr class="split-line">
             <div class="component-item">
               <div class="section-title">
-                <span>Allowed Clusters</span>
+                <span>{{ $t('tenant.allowedClustersLabel') }}</span>
                 <el-tooltip :content="allowedClustersContent" class="item" effect="dark" placement="top">
                   <i class="el-icon-info"/>
                 </el-tooltip>
               </div>
               <el-select
                 v-model="clusterValue"
+                :placeholder="$t('cluster.selectCluster')"
                 style="width:500px;margin-top:20px"
                 multiple
-                placeholder="Please Select Cluster"
                 @change="handleSelectClusters()">
                 <el-option v-for="item in clusterOptions" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </div>
-            <h4>Permissions</h4>
+            <h4>{{ $t('tenant.permissions') }}</h4>
             <hr class="split-line">
             <div class="component-item">
               <div class="section-title">
-                <span>Admin Roles</span>
+                <span>{{ $t('tenant.adminRolesLabel') }}</span>
                 <el-tooltip :content="adminRolesContent" class="item" effect="dark" placement="top">
                   <i class="el-icon-info"/>
                 </el-tooltip>
@@ -105,12 +105,12 @@
                   size="small"
                   class="input-new-tag"
                   @keyup.enter.native="handleInputConfirm"/>
-                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Role</el-button>
+                <el-button v-else class="button-new-tag" size="small" @click="showInput">{{ $t('tenant.newRole') }}</el-button>
               </div>
             </div>
-            <h4 style="color:#E57470">Danger Zone</h4>
+            <h4 style="color:#E57470">{{ $t('common.dangerZone') }}</h4>
             <hr class="danger-line">
-            <el-button type="danger" class="button" @click="handleDeleteTenant">Delete Tenant</el-button>
+            <el-button type="danger" class="button" @click="handleDeleteTenant">{{ $t('tenant.deleteTenant') }}</el-button>
           </el-col>
         </el-row>
       </el-tab-pane>
@@ -118,13 +118,13 @@
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%">
       <el-form ref="temp" :model="temp" :rules="rules" label-position="top">
         <el-form-item v-if="dialogStatus==='createNamespace'" :label="$t('table.namespace')" prop="namespace">
-          <el-input v-model="temp.namespace" placeholder="Please input namespace"/>
+          <el-input v-model="temp.namespace" :placeholder="$t('namespace.inputNamespaceMessage')"/>
         </el-form-item>
         <el-form-item v-if="dialogStatus==='deleteNamespace'">
-          <h4>Are you sure you want to delete this namespace {{ temp.tenant }}/{{ temp.namespace }}?</h4>
+          <h4>{{ $t('namespace.deleteNamespaceMessage') }}</h4>
         </el-form-item>
         <el-form-item v-if="dialogStatus==='deleteTenant'">
-          <h4>Are you sure you want to delete this tenant?</h4>
+          <h4>{{ $t('tenant.deleteTenantMessage') }}</h4>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleOptions()">{{ $t('table.confirm') }}</el-button>
@@ -158,8 +158,8 @@
       inputVisible: false,
       inputValue: '',
       adminRoles: '',
-      allowedClustersContent: 'This is Allowed Clusters',
-      adminRolesContent: 'This is Admin Roles',
+      allowedClustersContent: this.$i18n.t('tenant.allowedClustersContent'),
+      adminRolesContent: this.$i18n.t('tenant.adminRolesContent'),
       clusterValue: [],
       clusterOptions: [],
       activeName: 'configuration',
@@ -187,9 +187,9 @@
       },
       currentTabName: '',
       textMap: {
-        createNamespace: 'New Namespace',
-        deleteNamespace: 'Delete Namespace',
-        deleteTenant: 'Delete Tenant'
+        createNamespace: this.$i18n.t('namespace.newNamespace'),
+        deleteNamespace: this.$i18n.t('namespace.deleteNamespace'),
+        deleteTenant: this.$i18n.t('tenant.deleteTenant')
       },
       tempNamespacesList: [],
       searchNamespace: '',
diff --git a/front-end/src/views/management/topics/partitionedTopic.vue b/front-end/src/views/management/topics/partitionedTopic.vue
index aa2fe25..8d164e3 100644
--- a/front-end/src/views/management/topics/partitionedTopic.vue
+++ b/front-end/src/views/management/topics/partitionedTopic.vue
@@ -2,17 +2,17 @@
   <div class="app-container">
     <div class="createPost-container">
       <el-form :inline="true" :model="postForm" label-position="top" class="form-container">
-        <el-form-item class="postInfo-container-item" label="Tenant">
+        <el-form-item :label="$t('tenant.label')">
           <el-select v-model="postForm.tenant" placeholder="select tenant" @change="getNamespacesList(postForm.tenant)">
             <el-option v-for="(item,index) in tenantsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item class="postInfo-container-item" label="Namespace">
+        <el-form-item :label="$t('namespace.label')">
           <el-select v-model="postForm.namespace" placeholder="select namespace" @change="getTopicsList()">
             <el-option v-for="(item,index) in namespacesListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item class="postInfo-container-item" label="Topic">
+        <el-form-item :label="$t('topic.label')">
           <el-select v-model="postForm.topic" placeholder="select topic" @change="getPartitionTopicInfo()">
             <el-option v-for="(item,index) in topicsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
@@ -20,17 +20,17 @@
       </el-form>
     </div>
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="OVERVIEW" name="overview">
+      <el-tab-pane :label="$t('tabs.overview')" name="overview">
         <el-table
           :data="partitionTopicStats"
           border
           style="width: 100%">
-          <el-table-column prop="inMsg" label="In - msg/s"/>
-          <el-table-column prop="outMsg" label="Out - msg/s"/>
-          <el-table-column prop="inBytes" label="In - bytes/s"/>
-          <el-table-column prop="outBytes" label="Out - bytes/s"/>
+          <el-table-column :label="$t('common.inMsg')" prop="inMsg"/>
+          <el-table-column :label="$t('common.outMsg')" prop="outMsg"/>
+          <el-table-column :label="$t('common.inBytes')" prop="inBytes"/>
+          <el-table-column :label="$t('common.outBytes')" prop="outBytes"/>
         </el-table>
-        <h4>Partitions</h4>
+        <h4>{{ $t('topic.partitions') }}</h4>
         <hr class="split-line">
         <el-row :gutter="24">
           <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}">
@@ -41,44 +41,44 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column label="Partition" min-width="50px" align="center">
+              <el-table-column :label="$t('topic.partition')" min-width="50px" align="center">
                 <template slot-scope="scope">
                   <router-link :to="scope.row.partitionTopicLink" class="link-type">
                     <span>{{ scope.row.partition }}</span>
                   </router-link>
                 </template>
               </el-table-column>
-              <el-table-column label="Producers" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.producer.producerNumber')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.producers }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Subscriptions" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.subscription.subscriptionNumber')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.subscriptions }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="In - msg/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.inMsg')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.inMsg }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Out - msg/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.outMsg')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.outMsg }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="In - bytes/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.inBytes')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.inBytes }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Out - bytes/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.outBytes')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.outBytes }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Storage Size" min-width="30px" align="center">
+              <el-table-column :label="$t('common.storageSize')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.storageSize }}</span>
                 </template>
@@ -88,10 +88,10 @@
         </el-row>
       </el-tab-pane>
       <el-tab-pane label="POLICIES" name="policies">
-        <h4>Partitioned Topic Name</h4>
+        <h4>{{ $t('topic.partitionedTopicName') }}</h4>
         <hr class="split-line">
         <span>{{ partitionedTopicName }}</span>
-        <h4>Authorization
+        <h4>{{ $t('topic.policy.authentication') }}
           <el-tooltip :content="authorizationContent" class="item" effect="dark" placement="top">
             <i class="el-icon-info"/>
           </el-tooltip>
@@ -110,8 +110,8 @@
             </div>
             <el-select
               v-model="roleMap[tag]"
+              :placeholder="$t('topic.selectRoleMessage')"
               multiple
-              placeholder="Please Select Options"
               style="width:300px;"
               @change="handleChangeOptions()">
               <el-option
@@ -121,7 +121,7 @@
                 :value="item.value"
                 style="width:300px"/>
             </el-select>
-            <el-button @click.prevent="handleClose(tag)">删除</el-button>
+            <el-button @click.prevent="handleClose(tag)">{{ $t('topic.delete') }}</el-button>
           </el-tag>
           <el-form-item style="margin-top:30px">
             <el-input
@@ -134,11 +134,11 @@
               @keyup.enter.native="handleInputConfirm"
               @blur="handleInputConfirm"
             />
-            <el-button @click="showInput()">Add Role</el-button>
+            <el-button @click="showInput()">{{ $t('topic.addRole') }}</el-button>
             <!-- <el-button @click="revokeAllRole()">Revoke All</el-button> -->
           </el-form-item>
         </el-form>
-        <h4 style="color:#E57470">Danager Zone</h4>
+        <h4 style="color:#E57470">{{ $t('common.dangerZone') }}</h4>
         <hr class="danger-line">
         <el-button type="danger" class="button" @click="handleDeletePartitionTopic">Delete Topic</el-button>
       </el-tab-pane>
@@ -146,7 +146,7 @@
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%">
       <el-form label-position="top">
         <el-form-item v-if="dialogStatus==='delete'">
-          <h4>Are you sure you want to delete this topic?</h4>
+          <h4>{{ $t('topic.deleteTopicMessage') }}</h4>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="deleteParititionTopic">{{ $t('table.confirm') }}</el-button>
@@ -204,13 +204,13 @@
         value: 'functions',
         label: 'functions'
       }],
-      authorizationContent: 'This is authorizationContent',
+      authorizationContent: this.$i18n.t('topic.policy.authorizationContent'),
       partitionedTopicName: '',
       firstInit: false,
       firstInitTopic: false,
       currentTabName: '',
       textMap: {
-        delete: 'Delete Topic'
+        delete: this.$i18n.t('topic.deleteTopic')
       },
       dialogFormVisible: false,
       dialogStatus: ''
diff --git a/front-end/src/views/management/topics/topic.vue b/front-end/src/views/management/topics/topic.vue
index 9e48321..55ca9ca 100644
--- a/front-end/src/views/management/topics/topic.vue
+++ b/front-end/src/views/management/topics/topic.vue
@@ -2,22 +2,22 @@
   <div class="app-container">
     <div class="createPost-container">
       <el-form :inline="true" :model="postForm" class="form-container">
-        <el-form-item label="Tenant">
+        <el-form-item :label="$t('tenant.label')">
           <el-select v-model="postForm.tenant" placeholder="select tenant" @change="getNamespacesList(postForm.tenant)">
             <el-option v-for="(item,index) in tenantsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item label="Namespace">
+        <el-form-item :label="$t('namespace.label')">
           <el-select v-model="postForm.namespace" placeholder="select namespace" @change="getTopicsList()">
             <el-option v-for="(item,index) in namespacesListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item label="Topic">
+        <el-form-item :label="$t('topic.label')">
           <el-select v-model="postForm.topic" placeholder="select topic" @change="generatePartitions()">
             <el-option v-for="(item,index) in topicsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item label="Partition">
+        <el-form-item :label="$t('topic.partition')">
           <el-select v-model="postForm.partition" :disabled="partitionDisabled" placeholder="select partition" @change="getTopicInfo()">
             <el-option v-for="(item,index) in partitionsListOptions" :key="item+index" :label="item" :value="item"/>
           </el-select>
@@ -25,41 +25,41 @@
       </el-form>
     </div>
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="OVERVIEW" name="overview">
+      <el-tab-pane :label="$t('tabs.overview')" name="overview">
         <el-row :gutter="12">
           <el-col :span="12">
             <el-card style="height: 305px">
-              <h4>INFO</h4>
+              <h4>{{ $t('topic.info') }}</h4>
               <el-table
                 :data="infoData"
                 :show-header="false"
                 border
                 style="width: 100%">
-                <el-table-column prop="infoColumn" label="column"/>
-                <el-table-column prop="data" label="data"/>
+                <el-table-column :label="$t('topic.column')" prop="infoColumn"/>
+                <el-table-column :label="$t('topic.data')" prop="data"/>
               </el-table>
-              <el-button class="filter-item" type="primary" style="margin-top:15px;" @click="handleUnload">Unload</el-button>
+              <el-button class="filter-item" type="primary" style="margin-top:15px;" @click="handleUnload">{{ $t('topic.unload') }}</el-button>
             </el-card>
           </el-col>
           <el-col v-if="nonPersistent===false" :span="4">
             <el-card>
-              <h4>STATUS</h4>
+              <h4>{{ $t('topic.status') }}</h4>
               <el-button type="primary" circle class="circle"><span class="circle-font">{{ terminateStatus }}</span></el-button>
-              <el-button type="primary" style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" @click="handleTerminate">terminate</el-button>
+              <el-button type="primary" style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" @click="handleTerminate">{{ $t('topic.terminate') }}</el-button>
             </el-card>
           </el-col>
           <el-col v-if="nonPersistent===false" :span="4">
             <el-card>
-              <h4>COMPACTION</h4>
+              <h4>{{ $t('topic.compactionName') }}</h4>
               <el-button type="primary" circle class="circle"><span class="circle-font">{{ compaction }}</span></el-button>
-              <el-button type="primary" style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" @click="handleCompaction">compaction</el-button>
+              <el-button type="primary" style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" @click="handleCompaction">{{ $t('topic.compaction') }}</el-button>
             </el-card>
           </el-col>
           <el-col v-if="nonPersistent===false" :span="4">
             <el-card>
-              <h4>OFFLOAD</h4>
+              <h4>{{ $t('topic.offloadName') }}</h4>
               <el-button type="primary" circle class="circle"><span class="circle-font">{{ offload }}</span></el-button>
-              <el-button type="primary" style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" @click="handleOffload">offload</el-button>
+              <el-button type="primary" style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" @click="handleOffload">{{ $t('topic.offload') }}</el-button>
             </el-card>
           </el-col>
         </el-row>
@@ -67,12 +67,12 @@
           :data="topicStats"
           border
           style="width: 100%">
-          <el-table-column prop="inMsg" label="In - msg/s"/>
-          <el-table-column prop="outMsg" label="Out - msg/s"/>
-          <el-table-column prop="inBytes" label="In - bytes/s"/>
-          <el-table-column prop="outBytes" label="Out - bytes/s"/>
+          <el-table-column :label="$t('common.inMsg')" prop="inMsg"/>
+          <el-table-column :label="$t('common.outMsg')" prop="outMsg"/>
+          <el-table-column :label="$t('common.inBytes')" prop="inBytes"/>
+          <el-table-column :label="$t('common.outBytes')" prop="outBytes"/>
         </el-table>
-        <h4>Producers</h4>
+        <h4>{{ $t('topic.producer.producers') }}</h4>
         <el-row :gutter="24">
           <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}">
             <el-table
@@ -83,37 +83,37 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column label="Producer Id" min-width="50px" align="center">
+              <el-table-column :label="$t('topic.producer.producerId')" min-width="50px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.producerId }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Producer Name" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.producer.producerName')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.producerName }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="In - msg/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.inMsg')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.inMsg }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="In - bytes/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.inBytes')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.inBytes }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Avg Msg Size" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.producer.avgMsgSize')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.avgMsgSize }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Address" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.producer.address')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.address }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Since" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.producer.since')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.since }}</span>
                 </template>
@@ -121,7 +121,7 @@
             </el-table>
           </el-col>
         </el-row>
-        <h4>Subscriptions</h4>
+        <h4>{{ $t('topic.subscription.subscriptions') }}</h4>
         <el-row :gutter="24">
           <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}">
             <el-table
@@ -132,50 +132,50 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column label="Subscription" min-width="50px" align="center">
+              <el-table-column :label="$t('topic.subscription.name')" min-width="50px" align="center">
                 <template slot-scope="scope">
                   <router-link :to="scope.row.subscriptionLink" class="link-type">
                     <span>{{ scope.row.subscription }}</span>
                   </router-link>
                 </template>
               </el-table-column>
-              <el-table-column label="type" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.subscription.type')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.type }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Out - msg/s" min-width="30px" align="center">
+              <el-table-column :label="$t('common.outMsg')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.outMsg }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="outBytes" min-width="30px" align="center">
+              <el-table-column :label="$t('common.outBytes')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.outBytes }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Msg Expired" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.subscription.msgExpired')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.msgExpired }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Backlog" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.subscription.backlog')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.backlog }}</span>
                   <el-dropdown>
                     <span class="el-dropdown-link"><i class="el-icon-more"/></span>
                     <el-dropdown-menu slot="dropdown">
                       <router-link :to="scope.row.subscriptionLink + '?topTab=backlogOperation&leftTab=skip'" class="link-type">
-                        <el-dropdown-item command="skip">SKIP</el-dropdown-item>
+                        <el-dropdown-item command="skip">{{ $t('topic.subscription.skip') }}</el-dropdown-item>
                       </router-link>
                       <router-link :to="scope.row.subscriptionLink + '?topTab=backlogOperation&leftTab=expire'" class="link-type">
-                        <el-dropdown-item command="expire">EXPIRE</el-dropdown-item>
+                        <el-dropdown-item command="expire">{{ $t('topic.subscription.expire') }}</el-dropdown-item>
                       </router-link>
                       <router-link :to="scope.row.subscriptionLink + '?topTab=backlogOperation&leftTab=clear'" class="link-type">
-                        <el-dropdown-item command="clear">CLEAR</el-dropdown-item>
+                        <el-dropdown-item command="clear">{{ $t('topic.subscription.clear') }}</el-dropdown-item>
                       </router-link>
                       <router-link :to="scope.row.subscriptionLink + '?topTab=backlogOperation&leftTab=reset'" class="link-type">
-                        <el-dropdown-item command="reset">RESET</el-dropdown-item>
+                        <el-dropdown-item command="reset">{{ $t('topic.subscription.reset') }}</el-dropdown-item>
                       </router-link>
                     </el-dropdown-menu>
                   </el-dropdown>
@@ -185,25 +185,25 @@
           </el-col>
         </el-row>
       </el-tab-pane>
-      <el-tab-pane v-if="nonPersistent===false" label="STORAGE" name="storage">
+      <el-tab-pane v-if="nonPersistent===false" :label="$t('topic.subscription.storage')" name="storage">
         <el-row :gutter="12">
           <el-col :span="8">
             <el-card>
-              <el-button type="primary" class="circle"><span>Storage Size <br>{{ storageSize }}</span></el-button>
+              <el-button type="primary" class="circle"><span>{{ $t('topic.subscription.storageSize') }} <br>{{ storageSize }}</span></el-button>
             </el-card>
           </el-col>
           <el-col :span="8">
             <el-card>
-              <el-button type="primary" class="circle"><span>Entries <br>{{ entries }}</span></el-button>
+              <el-button type="primary" class="circle"><span>{{ $t('topic.subscription.entries') }} <br>{{ entries }}</span></el-button>
             </el-card>
           </el-col>
           <el-col :span="8">
             <el-card>
-              <el-button type="primary" class="circle"><span>Segments<br>{{ segments }}</span></el-button>
+              <el-button type="primary" class="circle"><span>{{ $t('topic.subscription.segments') }}<br>{{ segments }}</span></el-button>
             </el-card>
           </el-col>
         </el-row>
-        <h4>Segments</h4>
+        <h4>{{ $t('topic.segment.label') }}</h4>
         <el-row :gutter="24">
           <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}">
             <el-table
@@ -214,27 +214,27 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column label="Ledger Id" min-width="50px" align="center">
+              <el-table-column :label="$t('topic.segment.ledgerId')" min-width="50px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.ledgerId }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Entries" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.segment.entries')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.entries }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Size" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.segment.size')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.size }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Status" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.segment.status')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.status }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Offload" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.segment.offload')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.offload }}</span>
                 </template>
@@ -242,7 +242,7 @@
             </el-table>
           </el-col>
         </el-row>
-        <h4>Cursors</h4>
+        <h4>{{ $t('topic.cursor.cursors') }}</h4>
         <el-row :gutter="24">
           <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}">
             <el-table
@@ -253,32 +253,32 @@
               fit
               highlight-current-row
               style="width: 100%;">
-              <el-table-column label="Name" min-width="50px" align="center">
+              <el-table-column :label="$t('topic.cursor.label')" min-width="50px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.name }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Mark Delete Position" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.cursor.markDeletePosition')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.markDeletePosition }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Read Position" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.cursor.readPosition')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.readPosition }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Waiting Read Op" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.cursor.waitingReadOp')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.waitingReadOp }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Pending Read Ops" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.cursor.pendingReadOp')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.pendingReadOps }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="Entries Since First Not AckedMessage" min-width="30px" align="center">
+              <el-table-column :label="$t('topic.cursor.numberOfEntriesSinceFirstNotAckedMessage')" min-width="30px" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.numberOfEntriesSinceFirstNotAckedMessage }}</span>
                 </template>
@@ -287,9 +287,9 @@
           </el-col>
         </el-row>
       </el-tab-pane>
-      <el-tab-pane label="POLICIES" name="policies">
+      <el-tab-pane :label="$t('topic.policy.policies')" name="policies">
         <span>{{ topicName }}</span>
-        <h4>Authorization
+        <h4>{{ $t('topic.policy.authentication') }}
           <el-tooltip :content="authorizationContent" class="item" effect="dark" placement="top">
             <i class="el-icon-info"/>
           </el-tooltip>
@@ -319,7 +319,7 @@
                 :value="item.value"
                 style="width:300px"/>
             </el-select>
-            <el-button @click.prevent="handleClose(tag)">删除</el-button>
+            <el-button @click.prevent="handleClose(tag)">{{ $t('topic.delete') }}</el-button>
           </el-tag>
           <el-form-item style="margin-top:30px">
             <el-input
@@ -332,19 +332,19 @@
               @keyup.enter.native="handleInputConfirm"
               @blur="handleInputConfirm"
             />
-            <el-button @click="showInput()">Add Role</el-button>
+            <el-button @click="showInput()">{{ $t('topic.addRole') }}</el-button>
             <!-- <el-button @click="revokeAllRole()">Revoke All</el-button> -->
           </el-form-item>
         </el-form>
-        <h4 style="color:#E57470">Danager Zone</h4>
+        <h4 style="color:#E57470">{{ $t('common.dangerZone') }}</h4>
         <hr class="danger-line">
-        <el-button type="danger" class="button" @click="handleDeleteTopic">Delete Topic</el-button>
+        <el-button type="danger" class="button" @click="handleDeleteTopic">{{ $t('topic.deleteTopic') }}</el-button>
       </el-tab-pane>
     </el-tabs>
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%">
       <el-form label-position="top">
         <el-form-item v-if="dialogStatus==='delete'">
-          <h4>Are you sure you want to delete this topic?</h4>
+          <h4>{{ $t(topic.deleteTopicMessage) }}</h4>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="deleteTopic">{{ $t('table.confirm') }}</el-button>
@@ -435,7 +435,7 @@
         value: 'functions',
         label: 'functions'
       }],
-      authorizationContent: 'This is authorizationContent',
+      authorizationContent: this.$i18n.t('topic.policy.authorizationContent'),
       topicName: '',
       firstInit: false,
       firstInitTopic: false,
@@ -445,7 +445,7 @@
       currentTabName: '',
       nonPersistent: false,
       textMap: {
-        delete: 'Delete Topic'
+        delete: this.$i18n.t('topic.deleteTopic')
       },
       dialogFormVisible: false,
       dialogStatus: '',