diff --git a/packages/@o3r/components/src/devkit/components-devkit.interface.ts b/packages/@o3r/components/src/devkit/components-devkit.interface.ts
index f0d7200658..8763183ea4 100644
--- a/packages/@o3r/components/src/devkit/components-devkit.interface.ts
+++ b/packages/@o3r/components/src/devkit/components-devkit.interface.ts
@@ -8,6 +8,9 @@ import type {
 import type {
   PlaceholderMode,
 } from '../stores';
+import {
+  GroupInfo,
+} from './highlight/models';
 import {
   OtterLikeComponentInfo,
 } from './inspector';
@@ -32,6 +35,40 @@ export interface ToggleInspectorMessage extends OtterMessageContent<'toggleInspe
   isRunning: boolean;
 }
 
+/**
+ * Message to toggle the highlight
+ */
+export interface ToggleHighlightMessage extends OtterMessageContent<'toggleHighlight'> {
+  /** Is the highlight displayed */
+  isRunning: boolean;
+}
+
+/**
+ * Message the change the configuration of the `HighlightService`
+ */
+export interface ChangeHighlightConfiguration extends OtterMessageContent<'changeHighlightConfiguration'> {
+  /**
+   * Minimum width of HTMLElement to be considered
+   */
+  elementMinWidth?: number;
+  /**
+   * Minimum height of HTMLElement to be considered
+   */
+  elementMinHeight?: number;
+  /**
+   * Throttle interval
+   */
+  throttleInterval?: number;
+  /**
+   * Group information to detect elements
+   */
+  groupsInfo?: Record<string, GroupInfo>;
+  /**
+   * Maximum number of ancestors
+   */
+  maxDepth?: number;
+}
+
 /**
  * Message to toggle the placeholder mode
  */
@@ -51,6 +88,8 @@ type ComponentsMessageContents =
   | IsComponentSelectionAvailableMessage
   | SelectedComponentInfoMessage
   | ToggleInspectorMessage
+  | ToggleHighlightMessage
+  | ChangeHighlightConfiguration
   | PlaceholderModeMessage;
 
 /** List of possible DataTypes for Components messages */
@@ -74,5 +113,7 @@ export const isComponentsMessage = (message: any): message is AvailableComponent
     || message.dataType === 'isComponentSelectionAvailable'
     || message.dataType === 'placeholderMode'
     || message.dataType === 'toggleInspector'
+    || message.dataType === 'toggleHighlight'
+    || message.dataType === 'changeHighlightConfiguration'
   );
 };
diff --git a/packages/@o3r/components/src/devkit/components-devtools.message.service.ts b/packages/@o3r/components/src/devkit/components-devtools.message.service.ts
index 5a3b45cbb2..eddf774b32 100644
--- a/packages/@o3r/components/src/devkit/components-devtools.message.service.ts
+++ b/packages/@o3r/components/src/devkit/components-devtools.message.service.ts
@@ -40,6 +40,9 @@ import {
   OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS,
   OTTER_COMPONENTS_DEVTOOLS_OPTIONS,
 } from './components-devtools.token';
+import {
+  HighlightService,
+} from './highlight/highlight.service';
 import {
   OtterInspectorService,
   OtterLikeComponentInfo,
@@ -51,6 +54,7 @@ import {
 export class ComponentsDevtoolsMessageService implements DevtoolsServiceInterface {
   private readonly options: ComponentsDevtoolsServiceOptions;
   private readonly inspectorService: OtterInspectorService;
+  private readonly highlightService: HighlightService;
   private readonly sendMessage = sendOtterMessage<AvailableComponentsMessageContents>;
   private readonly destroyRef = inject(DestroyRef);
 
@@ -65,6 +69,8 @@ export class ComponentsDevtoolsMessageService implements DevtoolsServiceInterfac
     };
 
     this.inspectorService = new OtterInspectorService();
+    this.highlightService = new HighlightService();
+
     if (this.options.isActivatedOnBootstrap) {
       this.activate();
     }
@@ -130,6 +136,36 @@ export class ComponentsDevtoolsMessageService implements DevtoolsServiceInterfac
         this.inspectorService.toggleInspector(message.isRunning);
         break;
       }
+      case 'toggleHighlight': {
+        if (message.isRunning) {
+          this.highlightService.start();
+        } else {
+          this.highlightService.stop();
+        }
+        break;
+      }
+      case 'changeHighlightConfiguration': {
+        if (message.elementMinWidth) {
+          this.highlightService.elementMinWidth = message.elementMinWidth;
+        }
+        if (message.elementMinHeight) {
+          this.highlightService.elementMinHeight = message.elementMinHeight;
+        }
+        if (message.throttleInterval) {
+          this.highlightService.throttleInterval = message.throttleInterval;
+        }
+        if (message.groupsInfo) {
+          this.highlightService.groupsInfo = message.groupsInfo;
+        }
+        if (message.maxDepth) {
+          this.highlightService.maxDepth = message.maxDepth;
+        }
+        if (this.highlightService.isRunning()) {
+          // Re-start to recompute the highlight with the new configuration
+          this.highlightService.start();
+        }
+        break;
+      }
       case 'placeholderMode': {
         this.store.dispatch(togglePlaceholderModeTemplate({ mode: message.mode }));
         break;
diff --git a/packages/@o3r/components/src/devkit/highlight/constants.ts b/packages/@o3r/components/src/devkit/highlight/constants.ts
new file mode 100644
index 0000000000..83cb2c5fed
--- /dev/null
+++ b/packages/@o3r/components/src/devkit/highlight/constants.ts
@@ -0,0 +1,32 @@
+/**
+ * Class applied on the wrapper of highlight elements
+ */
+export const HIGHLIGHT_WRAPPER_CLASS = 'highlight-wrapper';
+
+/**
+ * Class applied on the overlay elements
+ */
+export const HIGHLIGHT_OVERLAY_CLASS = 'highlight-overlay';
+
+/**
+ * Class applied on the chip elements
+ */
+export const HIGHLIGHT_CHIP_CLASS = 'highlight-chip';
+
+/**
+ * Default value for maximum number of ancestors
+ */
+export const DEFAULT_MAX_DEPTH = 10;
+
+/**
+ * Default value for element min height
+ */
+export const DEFAULT_ELEMENT_MIN_HEIGHT = 30;
+/**
+ * Default value for element min width
+ */
+export const DEFAULT_ELEMENT_MIN_WIDTH = 60;
+/**
+ * Default value for throttle interval
+ */
+export const DEFAULT_THROTTLE_INTERVAL = 500;
diff --git a/packages/@o3r/components/src/devkit/highlight/helpers.ts b/packages/@o3r/components/src/devkit/highlight/helpers.ts
new file mode 100644
index 0000000000..52d2e4bf66
--- /dev/null
+++ b/packages/@o3r/components/src/devkit/highlight/helpers.ts
@@ -0,0 +1,154 @@
+import {
+  HIGHLIGHT_CHIP_CLASS,
+  HIGHLIGHT_OVERLAY_CLASS,
+  HIGHLIGHT_WRAPPER_CLASS,
+} from './constants';
+import {
+  ElementWithGroupInfo,
+} from './models';
+
+/**
+ * Retrieve the identifier of the element
+ * @param element
+ */
+export function getIdentifier(element: ElementWithGroupInfo): string {
+  const { tagName, attributes, classList } = element.htmlElement;
+  const regexp = new RegExp(element.regexp, 'i');
+  if (!regexp.test(tagName)) {
+    const attribute = Array.from(attributes).find((att) => regexp.test(att.name));
+    if (attribute) {
+      return `${attribute.name}${attribute.value ? `="${attribute.value}"` : ''}`;
+    }
+    const className = Array.from(classList).find((cName) => regexp.test(cName));
+    if (className) {
+      return className;
+    }
+  }
+  return tagName;
+}
+
+/**
+ * Compute the number of ancestors of a given element based on a list of elements
+ * @param element
+ * @param elementList
+ */
+export function computeNumberOfAncestors(element: HTMLElement, elementList: HTMLElement[]) {
+  return elementList.filter((el: HTMLElement) => el.contains(element)).length;
+}
+
+/**
+ * Throttle {@link fn} with a {@link delay}
+ * @param fn method to run
+ * @param delay given in ms
+ */
+export function throttle<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void {
+  let timerFlag: ReturnType<typeof setTimeout> | null = null;
+
+  const throttleFn = (...args: Parameters<T>) => {
+    if (timerFlag === null) {
+      fn(...args);
+      timerFlag = setTimeout(() => {
+        fn(...args);
+        timerFlag = null;
+      }, delay);
+    }
+  };
+  return throttleFn;
+}
+
+/**
+ * Run {@link refreshFn} if {@link mutations} implies to refresh elements inside {@link highlightWrapper}
+ * @param mutations
+ * @param highlightWrapper
+ * @param refreshFn
+ */
+export function runRefreshIfNeeded(mutations: MutationRecord[], highlightWrapper: Element | null, refreshFn: () => void) {
+  if (
+    mutations.some((mutation) =>
+      mutation.target !== highlightWrapper
+      || (
+        mutation.target === document.body
+        && Array.from<HTMLElement>(mutation.addedNodes.values() as any)
+          .concat(...mutation.removedNodes.values() as any)
+          .some((node) => !node.classList.contains(HIGHLIGHT_WRAPPER_CLASS))
+      )
+    )
+  ) {
+    refreshFn();
+  }
+}
+
+/**
+ * Options to create an overlay element
+ */
+export interface CreateOverlayOptions {
+  top: string;
+  left: string;
+  position: string;
+  width: string;
+  height: string;
+  backgroundColor: string;
+}
+
+/**
+ * Create an overlay element
+ * @param doc HTML Document
+ * @param opts
+ */
+export function createOverlay(doc: Document, opts: CreateOverlayOptions) {
+  const overlay = doc.createElement('div');
+  overlay.classList.add(HIGHLIGHT_OVERLAY_CLASS);
+  // All static style could be moved in a <style>
+  overlay.style.top = opts.top;
+  overlay.style.left = opts.left;
+  overlay.style.width = opts.width;
+  overlay.style.height = opts.height;
+  overlay.style.border = `1px solid ${opts.backgroundColor}`;
+  overlay.style.zIndex = '10000';
+  overlay.style.position = opts.position;
+  overlay.style.pointerEvents = 'none';
+  return overlay;
+}
+
+/**
+ * Options to create a chip element
+ */
+export interface CreateChipOptions {
+  displayName: string;
+  depth: number;
+  top: string;
+  left: string;
+  position: string;
+  backgroundColor: string;
+  color?: string;
+  name: string;
+}
+
+/**
+ * Create a chip element
+ * @param doc HTML Document
+ * @param opts
+ */
+export function createChip(doc: Document, opts: CreateChipOptions) {
+  const chip = doc.createElement('div');
+  chip.classList.add(HIGHLIGHT_CHIP_CLASS);
+  chip.textContent = `${opts.displayName} ${opts.depth}`;
+  // All static style could be moved in a <style>
+  chip.style.top = opts.top;
+  chip.style.left = opts.left;
+  chip.style.backgroundColor = opts.backgroundColor;
+  chip.style.color = opts.color ?? '#FFF';
+  chip.style.position = opts.position;
+  chip.style.display = 'inline-block';
+  chip.style.padding = '2px 4px';
+  chip.style.borderRadius = '0 0 4px';
+  chip.style.cursor = 'pointer';
+  chip.style.zIndex = '10000';
+  chip.style.textWrap = 'no-wrap';
+  chip.title = opts.name;
+  chip.addEventListener('click', () => {
+    // Should we log in the console as well ?
+    void navigator.clipboard.writeText(opts.name);
+  });
+  return chip;
+}
diff --git a/packages/@o3r/components/src/devkit/highlight/highlight.service.ts b/packages/@o3r/components/src/devkit/highlight/highlight.service.ts
new file mode 100644
index 0000000000..ce08ec9d0f
--- /dev/null
+++ b/packages/@o3r/components/src/devkit/highlight/highlight.service.ts
@@ -0,0 +1,206 @@
+import {
+  DOCUMENT,
+} from '@angular/common';
+import {
+  DestroyRef,
+  inject,
+} from '@angular/core';
+import {
+  DEFAULT_ELEMENT_MIN_HEIGHT,
+  DEFAULT_ELEMENT_MIN_WIDTH,
+  DEFAULT_MAX_DEPTH,
+  DEFAULT_THROTTLE_INTERVAL,
+  HIGHLIGHT_WRAPPER_CLASS,
+} from './constants';
+import {
+  computeNumberOfAncestors,
+  createChip,
+  createOverlay,
+  getIdentifier,
+  runRefreshIfNeeded,
+  throttle,
+} from './helpers';
+import {
+  ElementWithGroupInfo,
+  ElementWithGroupInfoAndDepth,
+  GroupInfo,
+} from './models';
+
+export class HighlightService {
+  /**
+   * Group information
+   * Value could be changed through chrome extension options
+   */
+  public groupsInfo: Record<string, GroupInfo> = {};
+
+  /**
+   * Maximum number of components ancestor
+   * Value could be changed through chrome extension view
+   */
+  public maxDepth = DEFAULT_MAX_DEPTH;
+
+  /**
+   * Element min height to be considered
+   * Value could be changed through chrome extension options
+   */
+  public elementMinHeight = DEFAULT_ELEMENT_MIN_HEIGHT;
+
+  /**
+   * Element min width to be considered
+   * Value could be changed through chrome extension options
+   */
+  public elementMinWidth = DEFAULT_ELEMENT_MIN_WIDTH;
+
+  /**
+   * Throttle interval to refresh the highlight elements
+   * Value could be changed through chrome extension options
+   */
+  public throttleInterval = DEFAULT_THROTTLE_INTERVAL;
+
+  private throttleRun: (() => void) | undefined;
+
+  private readonly document = inject(DOCUMENT);
+
+  private readonly mutationObserver = new MutationObserver((mutations) =>
+    runRefreshIfNeeded(
+      mutations,
+      this.getHighlightWrapper(),
+      () => this.throttleRun?.()
+    )
+  );
+
+  private readonly resizeObserver = new ResizeObserver(() => this.throttleRun?.());
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => this.stop());
+  }
+
+  private getHighlightWrapper() {
+    return this.document.body.querySelector(`.${HIGHLIGHT_WRAPPER_CLASS}`);
+  }
+
+  private cleanHighlightWrapper() {
+    this.getHighlightWrapper()?.querySelectorAll('*').forEach((node) => node.remove());
+  }
+
+  private initializeHighlightWrapper() {
+    let wrapper = this.getHighlightWrapper();
+    if (!wrapper) {
+      wrapper = this.document.createElement('div');
+      wrapper.classList.add(HIGHLIGHT_WRAPPER_CLASS);
+      this.document.body.append(wrapper);
+    }
+    this.cleanHighlightWrapper();
+  }
+
+  private run() {
+    this.initializeHighlightWrapper();
+    const wrapper = this.getHighlightWrapper()!;
+
+    // We have to select all elements from document because
+    // with CSSSelector it's impossible to select element by regex on their `tagName`, attribute name or attribute value
+    const elementsWithInfo = Array.from(this.document.body.querySelectorAll<HTMLElement>('*'))
+      .reduce((acc: ElementWithGroupInfo[], element) => {
+        const { height, width } = element.getBoundingClientRect();
+        if (height < this.elementMinHeight || width < this.elementMinWidth) {
+          return acc;
+        }
+        const elementInfo = Object.values(this.groupsInfo).find((info) => {
+          const regexp = new RegExp(info.regexp, 'i');
+
+          return regexp.test(element.tagName)
+            || Array.from(element.attributes).some((attr) => regexp.test(attr.name))
+            || Array.from(element.classList).some((cName) => regexp.test(cName));
+        });
+        if (elementInfo) {
+          return acc.concat({ ...elementInfo, htmlElement: element });
+        }
+        return acc;
+      }, [])
+      .reduce((acc: ElementWithGroupInfoAndDepth[], elementWithInfo, _, array) => {
+        const depth = computeNumberOfAncestors(elementWithInfo.htmlElement, array.map((e) => e.htmlElement));
+        if (depth <= this.maxDepth) {
+          return acc.concat({
+            ...elementWithInfo,
+            depth
+          });
+        }
+        return acc;
+      }, []);
+
+    const overlayData: Record<string, { chip: HTMLElement; overlay: HTMLElement; depth: number }[]> = {};
+    elementsWithInfo.forEach((item) => {
+      const { htmlElement: element, backgroundColor, color, displayName, depth } = item;
+      const rect = element.getBoundingClientRect();
+      const position = element.computedStyleMap().get('position')?.toString() === 'fixed' ? 'fixed' : 'absolute';
+      const top = `${position === 'fixed' ? rect.top : (rect.top + window.scrollY)}px`;
+      const left = `${position === 'fixed' ? rect.left : (rect.left + window.scrollX)}px`;
+      const overlay = createOverlay(this.document, {
+        top, left, width: `${rect.width}px`, height: `${rect.height}px`, position, backgroundColor
+      });
+      wrapper.append(overlay);
+      const chip = createChip(this.document, {
+        displayName,
+        depth,
+        top,
+        left,
+        backgroundColor,
+        color,
+        position,
+        name: getIdentifier(item)
+      });
+      wrapper.append(chip);
+      const positionKey = `${top};${left}`;
+      if (!overlayData[positionKey]) {
+        overlayData[positionKey] = [];
+      }
+      overlayData[positionKey].push({ chip, overlay, depth });
+    });
+    Object.values(overlayData).forEach((chips) => {
+      chips
+        .sort(({ depth: depthA }, { depth: depthB }) => depthA - depthB)
+        .forEach(({ chip, overlay }, index, array) => {
+          if (index !== 0) {
+            const translateX = array.slice(0, index).reduce((sum, e) => sum + e.chip.getBoundingClientRect().width, 0);
+            chip.style.transform = `translateX(${translateX}px)`;
+            overlay.style.margin = `${index}px 0 0 ${index}px`;
+            overlay.style.width = `${+overlay.style.width.replace('px', '') - 2 * index}px`;
+            overlay.style.height = `${+overlay.style.height.replace('px', '') - 2 * index}px`;
+            overlay.style.zIndex = `${+overlay.style.zIndex - index}`;
+          }
+        });
+    });
+  }
+
+  /**
+   * Returns true if the highlight is displayed
+   */
+  public isRunning() {
+    return !!this.throttleRun;
+  }
+
+  /**
+   * Start the highlight of elements
+   */
+  public start() {
+    this.stop();
+    this.throttleRun = throttle(() => this.run(), this.throttleInterval);
+    this.throttleRun();
+    this.document.body.addEventListener('scroll', this.throttleRun, true);
+    this.resizeObserver.observe(this.document.body);
+    this.mutationObserver.observe(this.document.body, { childList: true, subtree: true });
+  }
+
+  /**
+   * Stop the highlight of elements
+   */
+  public stop() {
+    this.cleanHighlightWrapper();
+    if (this.throttleRun) {
+      this.document.body.removeEventListener('scroll', this.throttleRun, true);
+      this.resizeObserver.disconnect();
+      this.mutationObserver.disconnect();
+      this.throttleRun = undefined;
+    }
+  }
+}
diff --git a/packages/@o3r/components/src/devkit/highlight/models.ts b/packages/@o3r/components/src/devkit/highlight/models.ts
new file mode 100644
index 0000000000..26d2f4a355
--- /dev/null
+++ b/packages/@o3r/components/src/devkit/highlight/models.ts
@@ -0,0 +1,39 @@
+/**
+ * Model to describe a group of elements
+ */
+export interface GroupInfo {
+  /**
+   * Text color for the {@link displayName}
+   */
+  color?: string;
+  /**
+   * Color of the border of the element once highlighted
+   */
+  backgroundColor: string;
+  /**
+   * Name of the group display
+   */
+  displayName: string;
+  /**
+   * Regexp to detect the elements part of the group
+   */
+  regexp: string;
+}
+
+/**
+ * Element associated to his group information
+ */
+export interface ElementWithGroupInfo extends GroupInfo {
+  /** HTML element */
+  htmlElement: HTMLElement;
+}
+
+/**
+ * Element associated to his group information and depth
+ */
+export interface ElementWithGroupInfoAndDepth extends ElementWithGroupInfo {
+  /**
+   * Number of ancestors
+   */
+  depth: number;
+}