diff --git a/packages/components/src/components/Text/Text.tsx b/packages/components/src/components/Text/Text.tsx
index f282558..fe864bb 100644
--- a/packages/components/src/components/Text/Text.tsx
+++ b/packages/components/src/components/Text/Text.tsx
@@ -57,7 +57,7 @@ const renderTypography =
       const hasEmbed = node?.content?.some((child: any) => child.nodeType?.includes('embedded'));
       return (
         <>
-          {variant?.startsWith('h') && node?.data?.id ? <a id={node?.data?.id} className="jumplink" /> : null}
+          {variant?.startsWith('h') && node?.data?.id ? <hr id={node?.data?.id} className="jumplink" /> : null}
           {/* Use div as Typograph to use the correct styles and avoid invalid DOM nesting when there embedded entries */}
           <Typography variant={variant} {...(hasEmbed && { component: 'span' })} data-testid={`Text-${variant}`}>
             {children.map((child: any) => {
@@ -80,7 +80,7 @@ const renderTypography =
 
     return (
       <>
-        {variant?.startsWith('h') && node?.data?.id ? <a id={node?.data?.id} className="jumplink" /> : null}
+        {variant?.startsWith('h') && node?.data?.id ? <hr id={node?.data?.id} className="jumplink" /> : null}
         <Typography variant={variant} data-testid={`Text-${variant}`}>
           {children}
         </Typography>
@@ -239,7 +239,7 @@ const Root = styled(Box, {
   overridesResolver: (_, styles) => [styles.root]
 })<{ variant?: string }>(({ theme }) => {
   return {
-    '& a.jumplink': {
+    '& hr.jumplink': {
       display: 'block',
       position: 'relative',
       visibility: 'hidden',