diff --git a/web/pageComponents/shared/ButtonLink.tsx b/web/pageComponents/shared/ButtonLink.tsx
index 7f4a88367..d714ae51b 100644
--- a/web/pageComponents/shared/ButtonLink.tsx
+++ b/web/pageComponents/shared/ButtonLink.tsx
@@ -3,10 +3,11 @@ import NextLink, { LinkProps } from 'next/link'
 import { getUrlFromAction } from '../../common/helpers/getUrlFromAction'
 import { getLocaleFromName } from '../../lib/localization'
 import type { LinkData } from '../../types/types'
+import { cloneElement } from 'react'
 
 type Props = {
   action: LinkData
-  children?: React.ReactNode
+  children?: React.ReactElement
 } & (ButtonLinkProps | LinkProps)
 
 export const ButtonLink = ({ action, children, ...rest }: Props) => {
@@ -21,9 +22,10 @@ export const ButtonLink = ({ action, children, ...rest }: Props) => {
   // If the URL is a static AEM page it should behave as an internal link in the web
   if (type === 'internalUrl') {
     const locale = getLocaleFromName(action.link?.lang)
+    const child = children ? cloneElement(children, { href: url, locale: locale, ariaLabel: ariaLabel }) : undefined
     return (
       <>
-        {children || (
+        {child || (
           <Link locale={locale} href={url} aria-label={ariaLabel} {...(rest as ButtonLinkProps)}>
             {label}
           </Link>
diff --git a/web/pageComponents/topicPages/PromoTileButton.tsx b/web/pageComponents/topicPages/PromoTileButton.tsx
index 965901d8f..2563f30f2 100644
--- a/web/pageComponents/topicPages/PromoTileButton.tsx
+++ b/web/pageComponents/topicPages/PromoTileButton.tsx
@@ -1,6 +1,6 @@
 import { LinkData } from '../../types/types'
 import { ButtonLink } from '../shared/ButtonLink'
-import { Card } from '@components'
+import { Card, Link } from '@components'
 import { CSSProperties } from 'react'
 import styled from 'styled-components'
 
@@ -10,11 +10,14 @@ type Props = {
   template?: 'default' | 'icon'
 }
 
-const StyledButtonLink = styled(ButtonLink)`
-  text-decoration: none;
+const StyledLink = styled(Link)`
   gap: var(--space-medium);
   border-bottom: none;
 `
+
+const StyledButtonLink = styled(ButtonLink)`
+  text-decoration: none;
+`
 const Wrapper = styled.div`
   padding: 0 var(--space-medium);
 `
@@ -22,17 +25,19 @@ const Wrapper = styled.div`
 const IconButtonLink = ({ action, hasImage }: { action: LinkData; hasImage: boolean }) => {
   return (
     <Wrapper>
-      <StyledButtonLink legacyBehavior action={action} aria-label={action.ariaLabel}>
-        <Card.Title
-          style={
-            {
-              '--card-title-fontSize': hasImage ? 'var(--typeScale-2)' : 'var(--typeScale-4)',
-              '--card-title-fontWeight': hasImage ? '450' : '400',
-            } as CSSProperties
-          }
-        >
-          {action.label}
-        </Card.Title>
+      <StyledButtonLink action={action}>
+        <StyledLink variant="contentLink" underline={false} aria-label={action.ariaLabel}>
+          <Card.Title
+            style={
+              {
+                '--card-title-fontSize': hasImage ? 'var(--typeScale-2)' : 'var(--typeScale-4)',
+                '--card-title-fontWeight': hasImage ? '450' : '400',
+              } as CSSProperties
+            }
+          >
+            {action.label}
+          </Card.Title>
+        </StyledLink>
       </StyledButtonLink>
     </Wrapper>
   )