diff --git a/frontend/src/component/common/Highlight/Highlight.tsx b/frontend/src/component/common/Highlight/Highlight.tsx
index b4e66197f977..e977fc3e7bf2 100644
--- a/frontend/src/component/common/Highlight/Highlight.tsx
+++ b/frontend/src/component/common/Highlight/Highlight.tsx
@@ -1,5 +1,5 @@
 import { alpha, styled } from '@mui/material';
-import type { ReactNode } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { useHighlightContext } from './HighlightContext';
 import type { HighlightKey } from './HighlightProvider';
 
@@ -27,17 +27,23 @@ const StyledHighlight = styled('div', {
     },
 }));
 
-interface IHighlightProps {
+interface IHighlightProps extends HTMLAttributes<HTMLDivElement> {
     highlightKey: HighlightKey;
     children: ReactNode;
 }
 
-export const Highlight = ({ highlightKey, children }: IHighlightProps) => {
-    const { isHighlighted } = useHighlightContext();
+export const Highlight = forwardRef<HTMLDivElement, IHighlightProps>(
+    ({ highlightKey, children, ...props }, ref) => {
+        const { isHighlighted } = useHighlightContext();
 
-    return (
-        <StyledHighlight highlighted={isHighlighted(highlightKey)}>
-            {children}
-        </StyledHighlight>
-    );
-};
+        return (
+            <StyledHighlight
+                ref={ref}
+                highlighted={isHighlighted(highlightKey)}
+                {...props}
+            >
+                {children}
+            </StyledHighlight>
+        );
+    },
+);
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx
index 1ec11675a0bc..583b771110e9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx
@@ -128,13 +128,13 @@ export const TagRow = ({ feature }: IFeatureOverviewSidePanelTagsProps) => {
                                 const tagLabel = `${tag.type}:${tag.value}`;
                                 return (
                                     <Tooltip
+                                        key={tagLabel}
                                         title={
                                             tagLabel.length > 35 ? tagLabel : ''
                                         }
                                         arrow
                                     >
                                         <StyledAddedTag
-                                            key={tagLabel}
                                             label={tagLabel}
                                             size='small'
                                             deleteIcon={