diff --git a/web/src/components/CreateBranchModal/CreateBranchModal.tsx b/web/src/components/CreateBranchModal/CreateBranchModal.tsx
index d2bdba67c..94976684c 100644
--- a/web/src/components/CreateBranchModal/CreateBranchModal.tsx
+++ b/web/src/components/CreateBranchModal/CreateBranchModal.tsx
@@ -13,7 +13,8 @@ import {
   useToaster,
   FormInput,
   Label,
-  ButtonVariation
+  ButtonVariation,
+  StringSubstitute
 } from '@harnessio/uicore'
 import { Icon } from '@harnessio/icons'
 import { FontVariation } from '@harnessio/design-system'
@@ -77,7 +78,15 @@ export function useCreateBranchModal({
             hideModal()
             onSuccess(response)
             if (showSuccessMessage) {
-              showSuccess(getString('branchCreated', { branch: name }), 5000)
+              showSuccess(
+                <StringSubstitute
+                  str={getString('branchCreated')}
+                  vars={{
+                    branch: name
+                  }}
+                />,
+                5000
+              )
             }
           })
           .catch(_error => {
diff --git a/web/src/components/CreateTagModal/CreateTagModal.tsx b/web/src/components/CreateTagModal/CreateTagModal.tsx
index ac8bda32f..813f1479e 100644
--- a/web/src/components/CreateTagModal/CreateTagModal.tsx
+++ b/web/src/components/CreateTagModal/CreateTagModal.tsx
@@ -13,7 +13,8 @@ import {
   useToaster,
   FormInput,
   Label,
-  ButtonVariation
+  ButtonVariation,
+  StringSubstitute
 } from '@harnessio/uicore'
 import { Icon } from '@harnessio/icons'
 import { FontVariation } from '@harnessio/design-system'
@@ -77,7 +78,15 @@ export function useCreateTagModal({
             hideModal()
             onSuccess(response)
             if (showSuccessMessage) {
-              showSuccess(getString('tagCreated', { tag: name }), 5000)
+              showSuccess(
+                <StringSubstitute
+                  str={getString('tagCreated')}
+                  vars={{
+                    tag: name
+                  }}
+                />,
+                5000
+              )
             }
           })
           .catch(_error => {
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 17e5effb5..54a4e7191 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -146,7 +146,7 @@ branchSource: Branch source
 branchSourceDesc: Choose a source branch
 basedOn: Based on
 failedToCreateBranch: Failed to create Branch. Please try again.
-branchCreated: Branch {{branch}} created.
+branchCreated: Branch {branch} created.
 tagCreated: Tag {{tag}} created.
 confirmation: Confirmation
 deleteBranch: Delete Branches
@@ -158,8 +158,8 @@ browseFiles: Browse Files
 compare: Compare
 commitString: 'Commit  {commit}'
 repoDeleted: Repository {{repo}} deleted.
-branchDeleted: Branch {{branch}} deleted.
-tagDeleted: Tag {{tag}} deleted.
+branchDeleted: Branch {branch} deleted.
+tagDeleted: Tag {tag} deleted.
 failedToDeleteBranch: Failed to delete Branch. Please try again.
 createFile: Create __path__
 updateFile: Update __path__
diff --git a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/BranchesContent/BranchesContent.tsx b/web/src/pages/RepositoryBranches/RepositoryBranchesContent/BranchesContent/BranchesContent.tsx
index 5c03fd96d..28d94b802 100644
--- a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/BranchesContent/BranchesContent.tsx
+++ b/web/src/pages/RepositoryBranches/RepositoryBranchesContent/BranchesContent/BranchesContent.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import { Container, TableV2 as Table, Text, Avatar, Tag, useToaster } from '@harnessio/uicore'
+import { Container, TableV2 as Table, Text, Avatar, Tag, useToaster, StringSubstitute } from '@harnessio/uicore'
 import { Color, Intent } from '@harnessio/design-system'
 import type { CellProps, Column } from 'react-table'
 import { Link, useHistory } from 'react-router-dom'
@@ -128,7 +128,15 @@ export function BranchesContent({ repoMetadata, searchTerm = '', branches, onDel
             action: async () => {
               deleteBranch({})
                 .then(() => {
-                  showSuccess(getString('branchDeleted', { branch: row.original.name }), 5000)
+                  showSuccess(
+                    <StringSubstitute
+                      str={getString('branchDeleted')}
+                      vars={{
+                        branch: row.original.name
+                      }}
+                    />,
+                    5000
+                  )
                   onDeleteSuccess()
                 })
                 .catch(error => {
diff --git a/web/src/pages/RepositoryTags/TagsContent/TagsContent.tsx b/web/src/pages/RepositoryTags/TagsContent/TagsContent.tsx
index ee939aabb..a832cae99 100644
--- a/web/src/pages/RepositoryTags/TagsContent/TagsContent.tsx
+++ b/web/src/pages/RepositoryTags/TagsContent/TagsContent.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { Container, TableV2 as Table, Text, Avatar, useToaster } from '@harnessio/uicore'
+import { Container, TableV2 as Table, Text, Avatar, useToaster, StringSubstitute } from '@harnessio/uicore'
 import { Color, Intent } from '@harnessio/design-system'
 import type { CellProps, Column } from 'react-table'
 import { Link, useHistory } from 'react-router-dom'
@@ -137,7 +137,15 @@ export function TagsContent({ repoMetadata, searchTerm = '', branches, onDeleteS
             action: async () => {
               deleteBranch({})
                 .then(() => {
-                  showSuccess(getString('tagDeleted', { branch: row.original.name }), 5000)
+                  showSuccess(
+                    <StringSubstitute
+                      str={getString('tagDeleted')}
+                      vars={{
+                        tag: row.original.name
+                      }}
+                    />,
+                    5000
+                  )
                   onDeleteSuccess()
                 })
                 .catch(error => {