diff --git a/packages/react/components/accordion/Accordion.tsx b/packages/react/components/accordion/Accordion.tsx
index 52fe882b..3c7e0379 100644
--- a/packages/react/components/accordion/Accordion.tsx
+++ b/packages/react/components/accordion/Accordion.tsx
@@ -8,14 +8,16 @@ import { hashClass } from "@/helpers/hashClassesHelpers"
  * Accordion Component
  * @param className {string} Additionnal CSS Classes
  */
-const Accordion = ({
-  className,
-  testId,
-  ...others
-}: AccordionProps): React.JSX.Element => {
+const Accordion = React.forwardRef((props: AccordionProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    testId,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
   const classes = hashClass(styled, clsx("accordions", className))
-  return <section className={classes} {...others} data-testid={testId} />
-}
+  return <section ref={ref} className={classes} {...others} data-testid={testId} />
+})
 
 export default Accordion
diff --git a/packages/react/components/breadcrumb/Breadcrumb.tsx b/packages/react/components/breadcrumb/Breadcrumb.tsx
index f69cf5a2..9fa95fb4 100644
--- a/packages/react/components/breadcrumb/Breadcrumb.tsx
+++ b/packages/react/components/breadcrumb/Breadcrumb.tsx
@@ -11,17 +11,20 @@ import { useTrilogyContext } from "@/context"
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  */
-const Breadcrumb = ({
-  children,
-  className,
-  testId,
-  accessibilityLabel,
-  ...others
-}: BreadcrumbWebProps): JSX.Element => {
+const Breadcrumb = React.forwardRef((props: BreadcrumbWebProps, ref: React.LegacyRef<HTMLElement>) => {
+  const {
+    children,
+    className,
+    testId,
+    accessibilityLabel,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   return (
     <nav
+      ref={ref}
       role='navigation'
       data-testid={testId}
       className={hashClass(styled, clsx("breadcrumb", className))}
@@ -31,6 +34,6 @@ const Breadcrumb = ({
       <ul>{children}</ul>
     </nav>
   )
-}
+})
 
 export default Breadcrumb
diff --git a/packages/react/components/card/Card.tsx b/packages/react/components/card/Card.tsx
index 4fb8d399..d05f72ee 100644
--- a/packages/react/components/card/Card.tsx
+++ b/packages/react/components/card/Card.tsx
@@ -24,26 +24,28 @@ import { useTrilogyContext } from "@/context"
  * @param fullheight
  * @param markup {BoxMarkup} Clickable Card => CardMarkup.A Not clickable box => CardMarkup.DIV || null
  */
-const Card = ({
-  className,
-  background,
-  backgroundSrc,
-  inverted,
-  flat,
-  horizontal,
-  floating,
-  align,
-  justify,
-  skeleton,
-  onClick,
-  reversed,
-  testId,
-  markup,
-  to,
-  fullheight,
-  active,
-  ...others
-}: CardProps): JSX.Element => {
+const Card = React.forwardRef((props: CardProps, ref: React.LegacyRef<HTMLElement>) => {
+  const {
+    className,
+    background,
+    backgroundSrc,
+    inverted,
+    flat,
+    horizontal,
+    floating,
+    align,
+    justify,
+    skeleton,
+    onClick,
+    reversed,
+    testId,
+    markup,
+    to,
+    fullheight,
+    active,
+    ...others
+  } = props
+
   const [isLoading, setIsLoading] = useState<boolean>(skeleton || false)
   const { styled } = useTrilogyContext()
 
@@ -88,6 +90,7 @@ const Card = ({
         }}
         {...others}
         className={classes}
+        ref={ref as React.LegacyRef<HTMLAnchorElement>}
       />
     )
   }
@@ -99,8 +102,8 @@ const Card = ({
       className={classes}
       style={onClick && { ...hoverStyle }}
       {...others}
+      ref={ref as React.LegacyRef<HTMLDivElement>}
     />
   )
-}
-
+})
 export default Card
diff --git a/packages/react/components/chips/list/ChipsList.tsx b/packages/react/components/chips/list/ChipsList.tsx
index bf849a7e..0d30bf3e 100644
--- a/packages/react/components/chips/list/ChipsList.tsx
+++ b/packages/react/components/chips/list/ChipsList.tsx
@@ -10,11 +10,13 @@ import { useTrilogyContext } from "@/context"
  * @param children {React.ReactNode}
  * @param multiple {boolean} Selection Multiple With checked icon
  */
-const ChipsList = ({
-  children,
-  multiple,
-  ...others
-}: ChipsListProps): JSX.Element => {
+const ChipsList = React.forwardRef((props: ChipsListProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    children,
+    multiple,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -23,10 +25,10 @@ const ChipsList = ({
   )
 
   return (
-    <div role={multiple ? "group" : "radiogroup"} className={classes} {...others}>
+    <div ref={ref} role={multiple ? "group" : "radiogroup"} className={classes} {...others}>
       {children}
     </div>
   )
-}
+})
 
 export default ChipsList
diff --git a/packages/react/components/columns/Columns.tsx b/packages/react/components/columns/Columns.tsx
index 4b7bd352..933f0593 100644
--- a/packages/react/components/columns/Columns.tsx
+++ b/packages/react/components/columns/Columns.tsx
@@ -20,19 +20,21 @@ import { useTrilogyContext } from "@/context"
  * @param mobile {boolean} Responsive mode
  * @param flex {boolean} Flex direction
  */
-const Columns = ({
-  className,
-  multiline,
-  inlined,
-  mobile,
-  centered,
-  verticalCentered,
-  gapless,
-  marginSize,
-  flex,
-  marginless,
-  ...others
-}: ColumnsProps): JSX.Element => {
+const Columns = React.forwardRef((props:ColumnsProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    multiline,
+    inlined,
+    mobile,
+    centered,
+    verticalCentered,
+    gapless,
+    marginSize,
+    flex,
+    marginless,
+    ...others
+  } = props
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -52,7 +54,7 @@ const Columns = ({
     )
   )
 
-  return <div className={classes} {...others} />
-}
+  return <div ref={ref} className={classes} {...others} />
+})
 
 export default Columns
diff --git a/packages/react/components/columns/item/ColumnsItem.tsx b/packages/react/components/columns/item/ColumnsItem.tsx
index 20248b75..ec14ac7c 100644
--- a/packages/react/components/columns/item/ColumnsItem.tsx
+++ b/packages/react/components/columns/item/ColumnsItem.tsx
@@ -30,28 +30,30 @@ import { getAlignClassName } from "@/objects"
  * @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd
  * @param align { Alignable | AlignableValues} align content
  */
-const ColumnsItem = ({
-  className,
-  size,
-  mobileSize,
-  tabletSize,
-  touchSize,
-  desktopSize,
-  widescreenSize,
-  fullhdSize,
-  offset,
-  mobileOffset,
-  tabletOffset,
-  touchOffset,
-  desktopOffset,
-  widescreenOffset,
-  fullhdOffset,
-  narrow,
-  verticalCenter,
-  centered,
-  align,
-  ...others
-}: ColumnsItemProps): JSX.Element => {
+const ColumnsItem = React.forwardRef((props: ColumnsItemProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    size,
+    mobileSize,
+    tabletSize,
+    touchSize,
+    desktopSize,
+    widescreenSize,
+    fullhdSize,
+    offset,
+    mobileOffset,
+    tabletOffset,
+    touchOffset,
+    desktopOffset,
+    widescreenOffset,
+    fullhdOffset,
+    narrow,
+    verticalCenter,
+    centered,
+    align,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -80,6 +82,7 @@ const ColumnsItem = ({
     )
   )
 
-  return <div className={classes} {...others} />
-}
+  return <div ref={ref} className={classes} {...others} />
+})
+
 export default ColumnsItem
diff --git a/packages/react/components/list/List.tsx b/packages/react/components/list/List.tsx
index 8510c19d..3f8756ff 100644
--- a/packages/react/components/list/List.tsx
+++ b/packages/react/components/list/List.tsx
@@ -11,13 +11,15 @@ import { useTrilogyContext } from "@/context"
  * @param hasIcon {boolean} If Have icon
  */
 
-const List = ({
-  className,
-  hasIcon,
-  children,
-  testId,
-  ...others
-}: ListProps): JSX.Element => {
+const List = React.forwardRef((props: ListProps, ref: React.LegacyRef<HTMLUListElement>) => {
+  const {
+    className,
+    hasIcon,
+    children,
+    testId,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -25,10 +27,10 @@ const List = ({
     clsx(hasIcon ? "icon-list" : "list", className)
   )
   return (
-    <ul data-testid={testId} className={classes} {...others}>
+    <ul ref={ref} data-testid={testId} className={classes} {...others}>
       {children}
     </ul>
   )
-}
+})
 
 export default List
diff --git a/packages/react/components/progress/Progress.tsx b/packages/react/components/progress/Progress.tsx
index b9c68a28..f63ed766 100644
--- a/packages/react/components/progress/Progress.tsx
+++ b/packages/react/components/progress/Progress.tsx
@@ -22,19 +22,21 @@ import { useTrilogyContext } from "@/context"
  * -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS classes
  */
-const Progress = ({
-  children,
-  className,
-  percent,
-  maxPercent = 100,
-  alert,
-  small,
-  stacked,
-  uniqueLegend,
-  firstExtremLegend,
-  secondExtremLegend,
-  ...others
-}: ProgressProps): JSX.Element => {
+const Progress = React.forwardRef((props: ProgressProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    children,
+    className,
+    percent,
+    maxPercent = 100,
+    alert,
+    small,
+    stacked,
+    uniqueLegend,
+    firstExtremLegend,
+    secondExtremLegend,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -55,7 +57,7 @@ const Progress = ({
 
   if (children && stacked) {
     return (
-      <div className={stackedClasses} {...others}>
+      <div ref={ref} className={stackedClasses} {...others}>
         {children}
       </div>
     )
@@ -88,6 +90,7 @@ const Progress = ({
       )}
     </>
   )
-}
+
+})
 
 export default Progress
diff --git a/packages/react/components/progress/item/ProgressItem.tsx b/packages/react/components/progress/item/ProgressItem.tsx
index 869a2078..85494059 100644
--- a/packages/react/components/progress/item/ProgressItem.tsx
+++ b/packages/react/components/progress/item/ProgressItem.tsx
@@ -17,15 +17,17 @@ import { useTrilogyContext } from "@/context"
  * -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS classes
  */
-const ProgressItem = ({
-  className,
-  percent,
-  maxPercent = 100,
-  minPercent = 0,
-  alert,
-  accessibilityLabel,
-  ...others
-}: ProgressItemProps): JSX.Element => {
+const ProgressItem = React.forwardRef((props: ProgressItemProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    percent,
+    maxPercent = 100,
+    minPercent = 0,
+    alert,
+    accessibilityLabel,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -40,6 +42,7 @@ const ProgressItem = ({
 
   return (
     <div
+      ref={ref}
       {...(percent && { style: { width: `${percent}%` } })}
       className={classes}
       role='progressbar'
@@ -50,6 +53,6 @@ const ProgressItem = ({
       {...others}
     />
   )
-}
+})
 
 export default ProgressItem
diff --git a/packages/react/components/rows/Rows.tsx b/packages/react/components/rows/Rows.tsx
index b062b945..8d22f4ff 100644
--- a/packages/react/components/rows/Rows.tsx
+++ b/packages/react/components/rows/Rows.tsx
@@ -10,11 +10,13 @@ import { useTrilogyContext } from "@/context"
  * - ------------------- WEB PROPERTIES -------------------------
  * @param className {string} additionnal CSS Classes
  */
-const Rows = ({ className, ...others }: RowsProps): JSX.Element => {
+const Rows = React.forwardRef((props: RowsProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const { className, ...others } = props 
+
   const { styled } = useTrilogyContext()
   return (
-    <div className={hashClass(styled, clsx("rows", className))} {...others} />
+    <div ref={ref} className={hashClass(styled, clsx("rows", className))} {...others} />
   )
-}
 
+})
 export default Rows
diff --git a/packages/react/components/rows/item/RowItem.tsx b/packages/react/components/rows/item/RowItem.tsx
index 7bbee9ca..e6b1ee45 100644
--- a/packages/react/components/rows/item/RowItem.tsx
+++ b/packages/react/components/rows/item/RowItem.tsx
@@ -12,17 +12,19 @@ import { useTrilogyContext } from "@/context"
  * - -------------------------- WEB PROPERTIES -------------------
  *  @param className {string} additionnal CSS Classes
  */
-const RowItem = ({
-  className,
-  narrow,
-  ...others
-}: RowsItemProps): JSX.Element => {
+const RowItem = React.forwardRef((props: RowsItemProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    narrow,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
   const classes = hashClass(
     styled,
     clsx("row", narrow && is("narrow"), className)
   )
-  return <div className={classes} {...others} />
-}
+  return <div ref={ref} className={classes} {...others} />
+})
 
 export default RowItem
diff --git a/packages/react/components/section/Section.tsx b/packages/react/components/section/Section.tsx
index 0812a3d1..4804b78d 100644
--- a/packages/react/components/section/Section.tsx
+++ b/packages/react/components/section/Section.tsx
@@ -17,17 +17,19 @@ import { useTrilogyContext } from '@/context'
  * @param verticalPaddingless {boolean} remove vertical padding
  **/
 
-const Section = ({
-  className,
-  skeleton,
-  background,
-  backgroundSrc,
-  inverted,
-  paddingless,
-  verticalPaddingless,
-  fullwidth,
-  ...others
-}: SectionProps): JSX.Element => {
+const Section = React.forwardRef((props: SectionProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    skeleton,
+    background,
+    backgroundSrc,
+    inverted,
+    paddingless,
+    verticalPaddingless,
+    fullwidth,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
   const [isLoading, setIsLoading] = useState<boolean>(skeleton || false)
 
@@ -52,6 +54,7 @@ const Section = ({
 
   return (
     <section
+      ref={ref}
       {...(backgroundSrc && {
         style: { backgroundImage: `url(${backgroundSrc})`, backgroundSize: 'cover', backgroundPosition: '50%' },
       })}
@@ -59,6 +62,6 @@ const Section = ({
       {...others}
     />
   )
-}
+})
 
 export default Section
diff --git a/packages/react/components/select/option/SelectOption.tsx b/packages/react/components/select/option/SelectOption.tsx
index 4c1cc5f3..7120b3ee 100644
--- a/packages/react/components/select/option/SelectOption.tsx
+++ b/packages/react/components/select/option/SelectOption.tsx
@@ -16,24 +16,27 @@ import { SelectOptionProps } from './SelectOptionProps'
  * @param onClick {function} onclick function
  * @param id {string} Select option custom id
  */
-const SelectOption = ({
-  id,
-  className,
-  value,
-  disabled,
-  children,
-  onClick,
-  label,
-  iconName,
-  testId,
-  ...others
-}: SelectOptionProps): JSX.Element => {
+const SelectOption = React.forwardRef((allProps: SelectOptionProps, ref: React.LegacyRef<HTMLOptionElement>) => {
+  const {
+    id,
+    className,
+    value,
+    disabled,
+    children,
+    onClick,
+    label,
+    iconName,
+    testId,
+    ...others
+  } = allProps 
+
   const { checked, native, focused, ...props } = others as {checked:boolean, native:boolean, focused:boolean}
   const selectClasses = React.useMemo(() => clsx(focused && 'focus', className), [focused, className])
 
   if (native) {
     return (
       <option
+        ref={ref}
         role='option'
         id={id}
         value={value}
@@ -64,6 +67,6 @@ const SelectOption = ({
       {...others}
     />
   )
-}
+})
 
 export default SelectOption
diff --git a/packages/react/components/stepper/Stepper.tsx b/packages/react/components/stepper/Stepper.tsx
index ea360a7e..549630b1 100644
--- a/packages/react/components/stepper/Stepper.tsx
+++ b/packages/react/components/stepper/Stepper.tsx
@@ -11,12 +11,14 @@ import { useTrilogyContext } from "@/context"
  * @param centered Center the stepper
  * @param children {ReactNode}
  */
-const Stepper = ({
-  className,
-  centered,
-  children,
-  ...others
-}: StepperProps): JSX.Element => {
+const Stepper = React.forwardRef((props: StepperProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    centered,
+    children,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(styled, clsx("stepper-wrapper", className))
@@ -51,7 +53,7 @@ const Stepper = ({
 
   if (centered) {
     return (
-      <section className={centerClasses}>
+      <section ref={ref} className={centerClasses}>
         <div className={classes} {...others}>
           {children}
           <div className='step-count'>
@@ -63,13 +65,13 @@ const Stepper = ({
   }
 
   return (
-    <div className={classes} {...others}>
+    <div ref={ref} className={classes} {...others}>
       {children}
       <div className='step-count'>
         {currentStep}/{nbChild}
       </div>
     </div>
   )
-}
 
+}) 
 export default Stepper
diff --git a/packages/react/components/stepper/step/StepperStep.tsx b/packages/react/components/stepper/step/StepperStep.tsx
index 3021fb1a..dc40bc24 100644
--- a/packages/react/components/stepper/step/StepperStep.tsx
+++ b/packages/react/components/stepper/step/StepperStep.tsx
@@ -19,18 +19,20 @@ import { IconSize } from "@/components/icon"
  * @param label {string} Step label
  * @param step {number|string} Step text circle
  */
-const StepperStep = ({
-  children,
-  className,
-  active,
-  markup,
-  current,
-  done,
-  label,
-  iconName,
-  error,
-  ...others
-}: StepperStepProps): JSX.Element => {
+const StepperStep = React.forwardRef((props: StepperStepProps, ref: React.LegacyRef<any>) => {
+  const {
+    children,
+    className,
+    active,
+    markup,
+    current,
+    done,
+    label,
+    iconName,
+    error,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
   const classesStepLabel = hashClass(styled, clsx('step-label'))
 
@@ -54,7 +56,7 @@ const StepperStep = ({
   const Tag = markup && isCorrectMarkup(markup) ? markup : StepperStepMarkup.DIV
 
   return (
-    <Tag className={classes} data-label={label} {...others}>
+    <Tag ref={ref} className={classes} data-label={label} {...others}>
       <div className={classesStepLabel}>
         {label || children}
         {
@@ -63,6 +65,7 @@ const StepperStep = ({
       </div>
     </Tag>
   )
-}
+
+})
 
 export default StepperStep
diff --git a/packages/react/components/tabs/Tabs.tsx b/packages/react/components/tabs/Tabs.tsx
index c3b091cc..b0bd1211 100644
--- a/packages/react/components/tabs/Tabs.tsx
+++ b/packages/react/components/tabs/Tabs.tsx
@@ -21,23 +21,25 @@ import { TabsProps } from './TabsProps'
  * @param fullwidth {boolean} Fullwidth tabs
  * @param leftAlign {boolean} Tabs left align
  */
-const Tabs = ({
-  children,
-  className,
-  onClick,
-  activeIndex,
-  disabled,
-  rightAlign,
-  fullwidth,
-  align,
-  centered,
-  marginless,
-  inverted,
-  shadowless,
-  textAlign,
-  testId,
-  ...others
-}: TabsProps): JSX.Element => {
+const Tabs = React.forwardRef((props: TabsProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    children,
+    className,
+    onClick,
+    activeIndex,
+    disabled,
+    rightAlign,
+    fullwidth,
+    align,
+    centered,
+    marginless,
+    inverted,
+    shadowless,
+    textAlign,
+    testId,
+    ...others
+  } = props 
+
   const [activateIndex, setActivateIndex] = useState<number>(activeIndex || 0)
   const { styled } = useTrilogyContext()
   const [isIcons, setIsIcons] = React.useState(false)
@@ -86,6 +88,7 @@ const Tabs = ({
 
   return (
     <div
+      ref={ref}
       className={hashClass(
         styled,
         clsx(
@@ -123,6 +126,6 @@ const Tabs = ({
       </div>
     </div>
   )
-}
+})
 
 export default Tabs
diff --git a/packages/react/components/tabs/item/TabsItem.tsx b/packages/react/components/tabs/item/TabsItem.tsx
index dfb65d0c..274f59fe 100644
--- a/packages/react/components/tabs/item/TabsItem.tsx
+++ b/packages/react/components/tabs/item/TabsItem.tsx
@@ -18,19 +18,21 @@ import { Icon } from "@/components/icon"
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  */
-const TabsItem = ({
-  active,
-  children,
-  className,
-  onClick,
-  to,
-  href,
-  routerLink,
-  iconName,
-  disabled,
-  testId,
-  ...others
-}: TabsItemProps): JSX.Element => {
+const TabsItem = React.forwardRef((props: TabsItemProps, ref: React.LegacyRef<any>) => {
+  const {
+    active,
+    children,
+    className,
+    onClick,
+    to,
+    href,
+    routerLink,
+    iconName,
+    disabled,
+    testId,
+    ...others
+  } = props 
+
   const [activeItem, setActiveItem] = useState<boolean>(active || false)
   const { styled } = useTrilogyContext()
 
@@ -55,6 +57,7 @@ const TabsItem = ({
     const RouterLink = (routerLink ? routerLink : "a") as React.ElementType
     return (
       <RouterLink
+        ref={ref}
         data-testid={testId}
         tabIndex={0}
         {...a11y.a}
@@ -85,6 +88,7 @@ const TabsItem = ({
 
   return (
     <button
+      ref={ref}
       aria-disabled={disabled}
       disabled={disabled}
       className={classes}
@@ -111,6 +115,7 @@ const TabsItem = ({
       {children}
     </button>
   )
-}
+
+})
 
 export default TabsItem
diff --git a/packages/react/components/tag/list/TagList.tsx b/packages/react/components/tag/list/TagList.tsx
index c91b344a..6accc221 100644
--- a/packages/react/components/tag/list/TagList.tsx
+++ b/packages/react/components/tag/list/TagList.tsx
@@ -14,17 +14,20 @@ import { is } from "@/services"
  *  - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  */
-const TagList = ({
-  className,
-  gapless,
-  centered,
-  marginless,
-  ...others
-}: TagListProps): JSX.Element => {
+const TagList = React.forwardRef((props: TagListProps, ref: React.LegacyRef<HTMLElement>) => {
+  const {
+    className,
+    gapless,
+    centered,
+    marginless,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   return (
     <span
+      ref={ref}
       className={hashClass(
         styled,
         clsx(
@@ -38,5 +41,6 @@ const TagList = ({
       {...others}
     />
   )
-}
+
+})
 export default TagList
diff --git a/packages/react/components/timeline/Timeline.tsx b/packages/react/components/timeline/Timeline.tsx
index e8c75680..ef5ca7db 100644
--- a/packages/react/components/timeline/Timeline.tsx
+++ b/packages/react/components/timeline/Timeline.tsx
@@ -13,14 +13,15 @@ import { is } from "@/services"
  * @param horizontal {boolean} timeline horizontal
  * @param className {string} Additionnal CSS Classes
  */
-const Timeline = ({
-  className,
-  notifications,
-  horizontal,
-  ...others
-}: TimelineProps): JSX.Element => {
+const Timeline = React.forwardRef((props: TimelineProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    notifications,
+    horizontal,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
-  const timelineRef = React.useRef<HTMLDivElement>(null)
   const classes = hashClass(
     styled,
     clsx(
@@ -31,7 +32,7 @@ const Timeline = ({
     )
   )
 
-  return <div ref={timelineRef} className={classes} {...others} />
-}
+  return <div ref={ref} className={classes} {...others} />
+})
 
 export default Timeline
diff --git a/packages/react/components/timeline/item/TimelineItem.tsx b/packages/react/components/timeline/item/TimelineItem.tsx
index 9f5c90a5..4ad1e733 100644
--- a/packages/react/components/timeline/item/TimelineItem.tsx
+++ b/packages/react/components/timeline/item/TimelineItem.tsx
@@ -13,14 +13,16 @@ import { hashClass } from "@/helpers"
  * @param undone {boolean} Undone Timeline Item
  * @param cancel {boolean} Cancel Timeline Item
  */
-const TimelineItem = ({
-  className,
-  done,
-  active,
-  undone,
-  cancel,
-  ...others
-}: TimelineItemWebProps): JSX.Element => {
+const TimelineItem = React.forwardRef((props: TimelineItemWebProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    done,
+    active,
+    undone,
+    cancel,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
   const classes = hashClass(
     styled,
@@ -33,7 +35,7 @@ const TimelineItem = ({
       className
     )
   )
-  return <div className={classes} {...others} />
-}
+  return <div ref={ref} className={classes} {...others} />
+}) 
 
 export default TimelineItem