diff --git a/packages/manager/modules/manager-pci-common/package.json b/packages/manager/modules/manager-pci-common/package.json
index 703d7c5cb739..6399043eb5b9 100644
--- a/packages/manager/modules/manager-pci-common/package.json
+++ b/packages/manager/modules/manager-pci-common/package.json
@@ -37,7 +37,8 @@
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "clsx": "2.1.1",
     "date-fns": "^3.6.0",
-    "lodash.isequal": "^4.5.0"
+    "lodash.isequal": "^4.5.0",
+    "@ovh-ux/manager-core-utils": "^0.3.0"
   },
   "devDependencies": {
     "@ovh-ux/manager-core-api": "^0.9.0",
diff --git a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx
index fe0ae9aa9741..659d2083a721 100644
--- a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx
@@ -17,10 +17,12 @@ const URL_INFO = {
 
 export type TFlavorLocalzoneChip = {
   isLocalZone: boolean;
+  id: string;
 };
 
 export function FlavorLocalzoneChip({
   isLocalZone,
+  id,
 }: Readonly<TFlavorLocalzoneChip>) {
   const { t } = useTranslation('pci-flavors');
   const { ovhSubsidiary } = useContext(ShellContext).environment.getUser();
@@ -31,7 +33,7 @@ export function FlavorLocalzoneChip({
 
   return (
     <>
-      <div id="popover-trigger">
+      <div id={id}>
         <OdsTag
           className={clsx(
             'text-[--ods-color-primary-500] font-bold text-[14px]',
@@ -51,7 +53,7 @@ export function FlavorLocalzoneChip({
           onClick={(event) => event.stopPropagation()}
         />
       </div>
-      <OdsPopover triggerId="popover-trigger">
+      <OdsPopover triggerId={id}>
         <OdsText preset="span">
           {isLocalZone
             ? t('pci_project_flavors_zone_localzone_tooltip')
diff --git a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorSelector.component.tsx b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorSelector.component.tsx
index f0fced073525..babb08d87539 100644
--- a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorSelector.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorSelector.component.tsx
@@ -62,6 +62,7 @@ export function FlavorSelector({
             .map((flavor) => (
               <div key={flavor.id}>
                 <FlavorTile
+                  id={flavor.id}
                   flavorName={flavor.name.toUpperCase()}
                   flavorSpecs={{
                     ram: flavor.ram,
diff --git a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx
index b66c0f665273..552cfe255241 100644
--- a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx
@@ -26,6 +26,7 @@ export interface FlavorDiskType {
 }
 
 export interface FlavorTileProps {
+  id: string;
   flavorName: string;
   flavorSpecs: {
     ram: number;
@@ -59,6 +60,7 @@ const separatorClass = 'h-px my-5 bg-[#85d9fd] border-0';
 const gigabytes = 10 ** 9;
 
 export function FlavorTile({
+  id,
   flavorName,
   flavorSpecs,
   flavorCompatibility,
@@ -136,9 +138,14 @@ export function FlavorTile({
           {t('pci_project_flavors_zone_compatible')}
         </OdsText>
         <div className="flex gap-4 mt-3">
-          {flavorCompatibility.localzone && <FlavorLocalzoneChip isLocalZone />}
+          {flavorCompatibility.localzone && (
+            <FlavorLocalzoneChip isLocalZone id={`popover-localzone-${id}`} />
+          )}
           {flavorCompatibility.globalzone && (
-            <FlavorLocalzoneChip isLocalZone={false} />
+            <FlavorLocalzoneChip
+              isLocalZone={false}
+              id={`popover-globalzone-${id}`}
+            />
           )}
         </div>
         <hr className={separatorClass} />
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/BlinkingCursor.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/BlinkingCursor.component.tsx
index 0855cca32e38..776540ed7942 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/BlinkingCursor.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/BlinkingCursor.component.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import style from './blinking-cursor.module.scss';
 
 export function BlinkingCursor() {
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/DbaasLogsAccountSelector.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/DbaasLogsAccountSelector.component.tsx
index 02cbdc99a469..a497c1d8ce88 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/DbaasLogsAccountSelector.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/DbaasLogsAccountSelector.component.tsx
@@ -1,10 +1,6 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
-import {
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsSpinner,
-} from '@ovhcloud/ods-components/react';
+import { OdsSelect, OdsSpinner } from '@ovhcloud/ods-components/react';
 import { TDbaasLog } from '../../api/data/dbaas-logs';
 import { useDbaasLogs } from '../../api/hook/useLogs';
 
@@ -26,7 +22,7 @@ export function DbaasLogsAccountSelector({
   if (isPending)
     return (
       <div className="text-center">
-        <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
+        <OdsSpinner size={ODS_SPINNER_SIZE.md} />
       </div>
     );
 
@@ -34,24 +30,24 @@ export function DbaasLogsAccountSelector({
     <>
       {dbaasLogs?.length && (
         <div className="mt-8">
-          <OsdsSelect
+          <OdsSelect
+            name="select-serviceName"
             className="w-[20rem]"
             value={account?.serviceName}
-            onOdsValueChange={(event) =>
+            onOdsChange={(event) =>
               onAccountChange(
                 dbaasLogs.find(
                   ({ serviceName }) => serviceName === `${event.detail.value}`,
                 ),
               )
             }
-            inline
           >
             {dbaasLogs.map((log) => (
-              <OsdsSelectOption value={log.serviceName} key={log.serviceName}>
+              <option value={log.serviceName} key={log.serviceName}>
                 {log.displayName || log.serviceName}
-              </OsdsSelectOption>
+              </option>
             ))}
-          </OsdsSelect>
+          </OdsSelect>
         </div>
       )}
     </>
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/LogHowTo.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/LogHowTo.component.tsx
index ed3ce97e0209..b27e97bee674 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/LogHowTo.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/LogHowTo.component.tsx
@@ -1,24 +1,16 @@
-import React, { useContext } from 'react';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-} from '@ovhcloud/ods-common-theming';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_SIZE,
 } from '@ovhcloud/ods-components';
 import {
-  OsdsButton,
-  OsdsIcon,
-  OsdsLink,
-  OsdsText,
-  OsdsTile,
+  OdsButton,
+  OdsLink,
+  OdsText,
+  OdsCard,
 } from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAllStreamIds, useDbaasLogs } from '../../api/hook/useLogs';
 import { LogContext } from './LogProvider.component';
@@ -69,64 +61,45 @@ export function LogHowTo({ onGotoStreams }: Readonly<LogHowToProps>) {
     }
   };
 
+  const getLogButtonLabel = () => {
+    if (!hasAccount) {
+      return t('log_button_create_account');
+    }
+    if (hasAccount && !hasStream) {
+      return t('log_button_create_stream');
+    }
+    return t('log_button_transfer_stream');
+  };
+
   return (
     <>
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.primary}
-        level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-        size={ODS_TEXT_SIZE._300}
-      >
-        {t('log_tile_section_title')}
-      </OsdsText>
-      <OsdsTile className="mt-4" color={ODS_THEME_COLOR_INTENT.primary}>
+      <OdsText preset="heading-1">{t('log_tile_section_title')}</OdsText>
+      <OdsCard className="mt-4">
         <div className="flex flex-col">
-          <OsdsText
-            className="block"
-            color={ODS_THEME_COLOR_INTENT.text}
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            size={ODS_TEXT_SIZE._400}
-          >
-            {t('log_tile_title')}
-          </OsdsText>
+          <OdsText preset="heading-2">{t('log_tile_title')}</OdsText>
           {t('log_tile_empty_state_description')}
           {!hasAccount && <p>{t('log_tile_desc_create_account')}</p>}
           {hasAccount && !hasStream && (
             <p>{t('log_tile_desc_create_stream')}</p>
           )}
           {logsGuideURL && (
-            <OsdsLink
+            <OdsLink
+              label={t('log_data_platform_guide_link')}
+              icon={ODS_ICON_NAME.externalLink}
               className="mt-4"
-              color={ODS_THEME_COLOR_INTENT.primary}
               href={logsGuideURL}
-              target={OdsHTMLAnchorElementTarget._blank}
-            >
-              {t('log_data_platform_guide_link')}
-              <span slot="end">
-                <OsdsIcon
-                  aria-hidden="true"
-                  className="ml-4"
-                  name={ODS_ICON_NAME.EXTERNAL_LINK}
-                  hoverable
-                  size={ODS_ICON_SIZE.xxs}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                />
-              </span>
-            </OsdsLink>
+              target="_blank"
+            />
           )}
-          <OsdsButton
+          <OdsButton
             className="mt-8"
-            inline
-            color={ODS_THEME_COLOR_INTENT.primary}
             size={ODS_BUTTON_SIZE.sm}
-            variant={ODS_BUTTON_VARIANT.stroked}
+            variant={ODS_BUTTON_VARIANT.outline}
             onClick={onCreate}
-          >
-            {!hasAccount && t('log_button_create_account')}
-            {hasAccount && !hasStream && t('log_button_create_stream')}
-            {hasAccount && hasStream && t('log_button_transfer_stream')}
-          </OsdsButton>
+            label={getLogButtonLabel()}
+          />
         </div>
-      </OsdsTile>
+      </OdsCard>
     </>
   );
 }
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/LogTileUnsubscribeAction.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/LogTileUnsubscribeAction.component.tsx
index 25398dc865df..ad7370e53c83 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/LogTileUnsubscribeAction.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/LogTileUnsubscribeAction.component.tsx
@@ -1,13 +1,12 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ApiError } from '@ovh-ux/manager-core-api';
-import { OsdsButton, OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsSpinner } from '@ovhcloud/ods-components/react';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { useRemoveSubscription } from '../../api/hook/useLogs';
 import { LogContext } from './LogProvider.component';
 
@@ -36,20 +35,18 @@ export function LogTileUnsubscribeAction({
     <>
       {isRemovePending && (
         <div className="text-center mt-8">
-          <OsdsSpinner size={ODS_SPINNER_SIZE.md} inline />
+          <OdsSpinner size={ODS_SPINNER_SIZE.md} />
         </div>
       )}
       {!isRemovePending && (
-        <OsdsButton
+        <OdsButton
+          label={t('list_button_unsubscribe')}
           className="mt-4"
-          inline
           color={ODS_THEME_COLOR_INTENT.primary}
           size={ODS_BUTTON_SIZE.sm}
           variant={ODS_BUTTON_VARIANT.ghost}
           onClick={remove}
-        >
-          {t('list_button_unsubscribe')}
-        </OsdsButton>
+        />
       )}
     </>
   );
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/LogTiles.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/LogTiles.component.tsx
index 5054561dceae..ad4043928539 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/LogTiles.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/LogTiles.component.tsx
@@ -1,30 +1,19 @@
-import React, { useContext } from 'react';
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { useNotifications } from '@ovh-ux/manager-react-components';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { ODS_BUTTON_SIZE, ODS_ICON_NAME } from '@ovhcloud/ods-components';
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-} from '@ovhcloud/ods-common-theming';
-import {
-  ODS_BUTTON_SIZE,
-  ODS_BUTTON_VARIANT,
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import {
-  OsdsButton,
-  OsdsDivider,
-  OsdsIcon,
-  OsdsText,
-  OsdsTile,
+  OdsButton,
+  OdsCard,
+  OdsDivider,
+  OdsLink,
+  OdsText,
 } from '@ovhcloud/ods-components/react';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { useContext } from 'react';
 import { Translation, useTranslation } from 'react-i18next';
-import { LogTileUnsubscribeAction } from './LogTileUnsubscribeAction.component';
-import { LogContext } from './LogProvider.component';
-import { LogHowTo } from './LogHowTo.component';
 import { useLogsDetails } from '../../api/hook/useLogs';
+import { LogHowTo } from './LogHowTo.component';
+import { LogContext } from './LogProvider.component';
+import { LogTileUnsubscribeAction } from './LogTileUnsubscribeAction.component';
 
 import '../../translations/logs';
 
@@ -51,88 +40,53 @@ export function LogTiles({ onGotoStreams }: Readonly<LogTilesProps>) {
       {logs?.length === 0 && <LogHowTo onGotoStreams={onGotoStreams} />}
       {logs?.length > 0 && (
         <>
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            size={ODS_TEXT_SIZE._300}
-          >
+          <OdsText preset="heading-1">
             {t('log_tile_subscriptions_title')}
-          </OsdsText>
-          <OsdsButton
+          </OdsText>
+          <OdsButton
+            icon={ODS_ICON_NAME.plus}
+            label={t('log_tile_subscriptions_subscribe')}
             className="mt-4"
-            color={ODS_THEME_COLOR_INTENT.primary}
             size={ODS_BUTTON_SIZE.sm}
-            variant={ODS_BUTTON_VARIANT.stroked}
             onClick={() => {
               clearNotifications();
               onGotoStreams();
             }}
-          >
-            <span slot="start">
-              <OsdsIcon
-                name={ODS_ICON_NAME.ADD}
-                size={ODS_ICON_SIZE.xxs}
-                color={ODS_THEME_COLOR_INTENT.primary}
-              />
-            </span>
-            {t('log_tile_subscriptions_subscribe')}
-          </OsdsButton>
+          />
         </>
       )}
       {logs?.map(({ data, log, stream, streamURL }) => (
-        <OsdsTile
-          key={log?.serviceName + stream?.streamId}
-          className="mt-4"
-          color={ODS_THEME_COLOR_INTENT.primary}
-        >
+        <OdsCard key={log?.serviceName + stream?.streamId} className="mt-4">
           <div className="flex flex-col">
-            <OsdsText
-              className="block"
-              color={ODS_THEME_COLOR_INTENT.text}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              size={ODS_TEXT_SIZE._400}
-            >
+            <OdsText className="block" preset="heading-1">
               {t('log_title_subscriptions_title')}
-            </OsdsText>
+            </OdsText>
             <dl className="grid grid-cols-2">
               <dt className="mb-4">
-                <OsdsText
-                  color={ODS_THEME_COLOR_INTENT.text}
-                  level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                  size={ODS_TEXT_SIZE._500}
-                >
+                <OdsText preset="span" className="font-bold">
                   {data?.displayName || log?.serviceName}
-                </OsdsText>
+                </OdsText>
               </dt>
               <dd className="text-right">{log?.serviceName}</dd>
               <dt className="mb-4">
-                <OsdsText
-                  color={ODS_THEME_COLOR_INTENT.text}
-                  level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                  size={ODS_TEXT_SIZE._500}
-                >
+                <OdsText preset="span" className="font-bold">
                   {t('log_title_subscriptions_user')}
-                </OsdsText>
+                </OdsText>
               </dt>
               <dd className="text-right">{data?.username}</dd>
               <dt>
-                <OsdsText
-                  color={ODS_THEME_COLOR_INTENT.text}
-                  level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                  size={ODS_TEXT_SIZE._500}
-                >
+                <OdsText preset="span" className="font-bold">
                   {t('logs_list_title')}
-                </OsdsText>
+                </OdsText>
               </dt>
               <dd className="text-right">{stream?.title}</dd>
             </dl>
-            <OsdsDivider color={ODS_THEME_COLOR_INTENT.primary} separator />
-            <OsdsButton
-              inline
-              color={ODS_THEME_COLOR_INTENT.primary}
-              size={ODS_BUTTON_SIZE.sm}
-              variant={ODS_BUTTON_VARIANT.stroked}
+            <OdsDivider color="dark" />
+            <OdsLink
+              className="text-[14px]"
+              label={t('log_title_subscriptions_button_watch')}
               href={streamURL?.address}
+              icon={ODS_ICON_NAME.externalLink}
               onClick={() => {
                 if (logsTracking?.graylogWatch) {
                   tracking.trackClick({
@@ -140,21 +94,9 @@ export function LogTiles({ onGotoStreams }: Readonly<LogTilesProps>) {
                   });
                 }
               }}
-              target={OdsHTMLAnchorElementTarget._blank}
-              disabled={streamURL?.address ? undefined : true}
-            >
-              {t('log_title_subscriptions_button_watch')}
-              <span slot="end">
-                <OsdsIcon
-                  aria-hidden="true"
-                  className="ml-4"
-                  name={ODS_ICON_NAME.EXTERNAL_LINK}
-                  hoverable
-                  size={ODS_ICON_SIZE.xxs}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                />
-              </span>
-            </OsdsButton>
+              target="_blank"
+              isDisabled={streamURL?.address ? undefined : true}
+            />
             <LogTileUnsubscribeAction
               subscriptionId={log.subscriptionId}
               onSuccess={() =>
@@ -180,7 +122,7 @@ export function LogTiles({ onGotoStreams }: Readonly<LogTilesProps>) {
               }
             />
           </div>
-        </OsdsTile>
+        </OdsCard>
       ))}
     </>
   );
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/LogsView.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/LogsView.component.tsx
index 232e8b6b90b8..fe1b7a7f8548 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/LogsView.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/LogsView.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import clsx from 'clsx';
 import { TailLogs, LogTiles } from '.';
 
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/StreamRetention.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/StreamRetention.component.tsx
index 34f529cc22c2..e07c63eb35e3 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/StreamRetention.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/StreamRetention.component.tsx
@@ -1,9 +1,9 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatDuration } from 'date-fns';
 import * as dateFnsLocales from 'date-fns/locale';
 import { getDateFnsLocale } from '@ovh-ux/manager-core-utils';
-import { OsdsSkeleton } from '@ovhcloud/ods-components/react';
+import { OdsSkeleton } from '@ovhcloud/ods-components/react';
 import { useRetention } from '../../api/hook/useDbaasLogs';
 
 export interface StreamRetentionProps {
@@ -41,7 +41,7 @@ export function StreamRetention({
   );
   return (
     <>
-      {isPending && <OsdsSkeleton />}
+      {isPending && <OdsSkeleton />}
       {!isPending && !retention?.duration && '-'}
       {!isPending &&
         retention?.duration &&
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/StreamSubscriptions.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/StreamSubscriptions.component.tsx
index e7d57ac14571..9eca7abbe41e 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/StreamSubscriptions.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/StreamSubscriptions.component.tsx
@@ -1,28 +1,22 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { useTranslation, Translation } from 'react-i18next';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import {
-  OsdsButton,
-  OsdsIcon,
-  OsdsLink,
-  OsdsSkeleton,
-  OsdsSpinner,
-} from '@ovhcloud/ods-components/react';
+import { ApiError } from '@ovh-ux/manager-core-api';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import { useNotifications } from '@ovh-ux/manager-react-components';
-import { ApiError } from '@ovh-ux/manager-core-api';
 import {
-  useSubscriptions,
+  OdsButton,
+  OdsLink,
+  OdsSkeleton,
+} from '@ovhcloud/ods-components/react';
+import { useContext, useEffect, useState } from 'react';
+import { Translation, useTranslation } from 'react-i18next';
+import {
   useCreateSubscription,
   useRemoveSubscription,
+  useSubscriptions,
 } from '../../api/hook/useDbaasLogs';
 import { LogContext } from './LogProvider.component';
 
@@ -110,13 +104,12 @@ export function StreamSubscriptions({
       .then(setSubscriptionsURL);
   }, []);
 
-  if (isPending) return <OsdsSkeleton />;
+  if (isPending) return <OdsSkeleton />;
   return (
     <div className="flex justify-between items-center min-w-[14rem]">
       {subscriptionCount > 0 ? (
-        <OsdsLink
-          className="mr-4"
-          color={ODS_THEME_COLOR_INTENT.primary}
+        <OdsLink
+          className="mr-4 text-[--ods-color-primary-500] text-[16px]"
           href={subscriptionsURL}
           onClick={() => {
             if (logsTracking?.ldpDetails) {
@@ -125,28 +118,18 @@ export function StreamSubscriptions({
               });
             }
           }}
-          target={OdsHTMLAnchorElementTarget._blank}
-        >
-          {subscriptionCount}
-          <span slot="end">
-            <OsdsIcon
-              aria-hidden="true"
-              className="ml-4"
-              name={ODS_ICON_NAME.EXTERNAL_LINK}
-              hoverable
-              size={ODS_ICON_SIZE.xxs}
-              color={ODS_THEME_COLOR_INTENT.primary}
-            />
-          </span>
-        </OsdsLink>
+          label={subscriptionCount.toString()}
+          icon={ODS_ICON_NAME.externalLink}
+          target="_blank"
+        />
       ) : (
         '-'
       )}
       {currentSubscription && (
-        <OsdsButton
-          color={ODS_THEME_COLOR_INTENT.primary}
+        <OdsButton
+          label={t('list_button_unsubscribe')}
           size={ODS_BUTTON_SIZE.sm}
-          variant={ODS_BUTTON_VARIANT.stroked}
+          isLoading={isRemovePending}
           onClick={() => {
             if (!isRemovePending) {
               remove(currentSubscription.subscriptionId);
@@ -157,22 +140,14 @@ export function StreamSubscriptions({
               }
             }
           }}
-          disabled={isRemovePending ? true : undefined}
-          inline
-        >
-          {t('list_button_unsubscribe')}
-          {isRemovePending && (
-            <span slot="start">
-              <OsdsSpinner className="mt-3" size={ODS_SPINNER_SIZE.sm} inline />
-            </span>
-          )}
-        </OsdsButton>
+          isDisabled={isRemovePending}
+        />
       )}
       {!currentSubscription && (
-        <OsdsButton
-          color={ODS_THEME_COLOR_INTENT.primary}
+        <OdsButton
+          label={t('list_button_subscribe')}
           size={ODS_BUTTON_SIZE.sm}
-          variant={ODS_BUTTON_VARIANT.stroked}
+          variant={ODS_BUTTON_VARIANT.outline}
           onClick={() => {
             if (!isCreationPending) {
               create();
@@ -183,16 +158,9 @@ export function StreamSubscriptions({
               }
             }
           }}
-          disabled={isCreationPending ? true : undefined}
-          inline
-        >
-          {t('list_button_subscribe')}
-          {isCreationPending && (
-            <span slot="start">
-              <OsdsSpinner className="mt-3" size={ODS_SPINNER_SIZE.sm} inline />
-            </span>
-          )}
-        </OsdsButton>
+          isLoading={isCreationPending}
+          isDisabled={isCreationPending ? true : undefined}
+        />
       )}
     </div>
   );
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/StreamsList.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/StreamsList.component.tsx
index 50242cb80808..6f69567732fa 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/StreamsList.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/StreamsList.component.tsx
@@ -1,5 +1,3 @@
-import React, { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { FilterCategories } from '@ovh-ux/manager-core-api';
 import {
   Datagrid,
@@ -8,23 +6,20 @@ import {
   useColumnFilters,
   useDataGrid,
 } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
   ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
 import {
-  OsdsButton,
-  OsdsIcon,
-  OsdsPopover,
-  OsdsPopoverContent,
-  OsdsSpinner,
+  OdsButton,
+  OdsPopover,
+  OdsSpinner,
 } from '@ovhcloud/ods-components/react';
-import { useStreams } from '../../api/hook/useDbaasLogs';
+import { useTranslation } from 'react-i18next';
 import { TDbaasLog } from '../../api/data/dbaas-logs';
+import { useStreams } from '../../api/hook/useDbaasLogs';
 import { useStreamsListColumns } from './useStreamsListColumns';
 
 import '../../translations/logs';
@@ -51,55 +46,47 @@ export function StreamsList({
     account,
     serviceName,
   });
-  const filterPopoverRef = useRef(undefined);
 
   if (isPending)
     return (
       <div className="text-center">
-        <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
+        <OdsSpinner size={ODS_SPINNER_SIZE.md} />
       </div>
     );
   return (
     <>
       <div className="flex justify-end">
-        <OsdsPopover ref={filterPopoverRef}>
-          <OsdsButton
-            slot="popover-trigger"
+        <div id="popover-trigger">
+          <OdsButton
             size={ODS_BUTTON_SIZE.sm}
             color={ODS_THEME_COLOR_INTENT.primary}
-            variant={ODS_BUTTON_VARIANT.stroked}
-          >
-            <OsdsIcon
-              name={ODS_ICON_NAME.FILTER}
-              size={ODS_ICON_SIZE.xs}
-              className="mr-2"
-              color={ODS_THEME_COLOR_INTENT.primary}
-            />
-            {tFilter('common_criteria_adder_filter_label')}
-          </OsdsButton>
-          <OsdsPopoverContent>
-            <FilterAdd
-              columns={[
-                {
-                  id: 'title',
-                  label: t('list_column_stream_name'),
-                  comparators: FilterCategories.String,
-                },
-              ]}
-              onAddFilter={(addedFilter, column) => {
-                setPagination({
-                  pageIndex: 0,
-                  pageSize: pagination.pageSize,
-                });
-                addFilter({
-                  ...addedFilter,
-                  label: column.label,
-                });
-                filterPopoverRef.current?.closeSurface();
-              }}
-            />
-          </OsdsPopoverContent>
-        </OsdsPopover>
+            variant={ODS_BUTTON_VARIANT.outline}
+            icon={ODS_ICON_NAME.filter}
+            label={tFilter('common_criteria_adder_filter_label')}
+          />
+        </div>
+
+        <OdsPopover triggerId="popover-trigger">
+          <FilterAdd
+            columns={[
+              {
+                id: 'title',
+                label: t('list_column_stream_name'),
+                comparators: FilterCategories.String,
+              },
+            ]}
+            onAddFilter={(addedFilter, column) => {
+              setPagination({
+                pageIndex: 0,
+                pageSize: pagination.pageSize,
+              });
+              addFilter({
+                ...addedFilter,
+                label: column.label,
+              });
+            }}
+          />
+        </OdsPopover>
       </div>
       <div className="my-5">
         <FilterList filters={filters} onRemoveFilter={removeFilter} />
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/TailLogs.component.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/TailLogs.component.tsx
index 7b61568028d6..59eefcdb864c 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/TailLogs.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/TailLogs.component.tsx
@@ -1,15 +1,9 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  OsdsButton,
-  OsdsIcon,
-  OsdsSearchBar,
-} from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { OdsButton, OdsInput } from '@ovhcloud/ods-components/react';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
 } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { useTailLogs } from '../../api/hook/useLogs';
@@ -104,47 +98,38 @@ export function TailLogs({
     <div className="font-mono bg-black text-white">
       <div className="p-4 relative">
         <div className="flex">
-          <OsdsSearchBar
+          <OdsInput
+            name="search"
             className="w-[25%] min-w-[10rem]"
-            value={search}
             placeholder={t('search_placeholder')}
-            onOdsValueChange={({ detail }) => {
+            type="search"
+            value={search}
+            onOdsChange={({ detail }) => {
               setSearch(detail.value);
             }}
-            onOdsSearchSubmit={({ detail }) => {
-              setSearch(detail.inputValue);
-            }}
           />
-          <OsdsButton
+          <OdsButton
             className="ml-4 min-w-[2.5rem]"
-            inline
-            color={ODS_THEME_COLOR_INTENT.primary}
-            variant={ODS_BUTTON_VARIANT.stroked}
+            variant={ODS_BUTTON_VARIANT.outline}
             size={ODS_BUTTON_SIZE.sm}
             onClick={() => setIsPolling((state) => !state)}
-          >
-            {isPolling ? '⏸︎' : '▶'}
-          </OsdsButton>
-          <OsdsButton
+            label={isPolling ? '⏸︎' : '▶'}
+          />
+          <OdsButton
             className="ml-4 min-w-[5rem]"
-            inline
-            color={ODS_THEME_COLOR_INTENT.primary}
-            variant={ODS_BUTTON_VARIANT.stroked}
+            variant={ODS_BUTTON_VARIANT.outline}
             size={ODS_BUTTON_SIZE.sm}
             onClick={clearLogs}
-          >
-            {t('clear_session')}
-          </OsdsButton>
-          <OsdsButton
+            label={t('clear_session')}
+          />
+
+          <OdsButton
             className="ml-auto min-w-[2.5rem] w-[2.5rem]"
-            inline
-            color={ODS_THEME_COLOR_INTENT.primary}
-            variant={ODS_BUTTON_VARIANT.stroked}
+            variant={ODS_BUTTON_VARIANT.outline}
             size={ODS_BUTTON_SIZE.sm}
             onClick={onToggleFullscreen}
-          >
-            {isFullscreen ? '-' : '⛶'}
-          </OsdsButton>
+            label={isFullscreen ? '-' : '⛶'}
+          />
         </div>
         <div
           ref={logsContainer}
@@ -163,20 +148,14 @@ export function TailLogs({
         </div>
         {output && (
           <div className="flex py-2">
-            <OsdsButton
+            <OdsButton
               className="ml-auto"
-              inline
-              color={ODS_THEME_COLOR_INTENT.primary}
-              variant={ODS_BUTTON_VARIANT.stroked}
+              label=""
+              icon={ODS_ICON_NAME.arrowDown}
+              variant={ODS_BUTTON_VARIANT.outline}
               size={ODS_BUTTON_SIZE.sm}
               onClick={scrollToBottom}
-            >
-              <OsdsIcon
-                name={ODS_ICON_NAME.ARROW_DOWN}
-                color={ODS_THEME_COLOR_INTENT.primary}
-                size={ODS_ICON_SIZE.xxs}
-              ></OsdsIcon>
-            </OsdsButton>
+            />
           </div>
         )}
       </div>
diff --git a/packages/manager/modules/manager-pci-common/src/components/logs/useStreamsListColumns.tsx b/packages/manager/modules/manager-pci-common/src/components/logs/useStreamsListColumns.tsx
index d42e87739efc..1606e5d761cc 100644
--- a/packages/manager/modules/manager-pci-common/src/components/logs/useStreamsListColumns.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/logs/useStreamsListColumns.tsx
@@ -1,11 +1,8 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { DataGridTextCell } from '@ovh-ux/manager-react-components';
-import { ODS_TEXT_LEVEL } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
-import { OsdsChip, OsdsLink, OsdsText } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { OdsBadge, OdsLink, OdsText } from '@ovhcloud/ods-components/react';
 import { TDbaasLog, TDbaasStream } from '../../api/data/dbaas-logs';
 import { StreamRetention } from './StreamRetention.component';
 import { StreamSubscriptions } from './StreamSubscriptions.component';
@@ -36,17 +33,13 @@ export const useStreamsListColumns = ({
       id: 'name',
       cell: () => (
         <DataGridTextCell>
-          <OsdsLink
-            color={ODS_THEME_COLOR_INTENT.primary}
-            href={accountURL}
-            target={OdsHTMLAnchorElementTarget._blank}
-          >
+          <OdsLink href={accountURL} target="_blank">
             {account.displayName || account.serviceName}
-          </OsdsLink>
+          </OdsLink>
           {account.displayName && (
-            <OsdsText className="block" level={ODS_TEXT_LEVEL.caption}>
+            <OdsText className="block" preset="caption">
               {account.serviceName}
-            </OsdsText>
+            </OdsText>
           )}
         </DataGridTextCell>
       ),
@@ -70,16 +63,10 @@ export const useStreamsListColumns = ({
       id: 'indexation',
       cell: (stream: TDbaasStream) => (
         <DataGridTextCell>
-          <OsdsChip
-            color={
-              ODS_THEME_COLOR_INTENT[
-                stream.indexingEnabled ? 'success' : 'warning'
-              ]
-            }
-            inline
-          >
-            {t(`list_indexation_status_${stream.indexingEnabled}`)}
-          </OsdsChip>
+          <OdsBadge
+            label={t(`list_indexation_status_${stream.indexingEnabled}`)}
+            color={stream.indexingEnabled ? 'success' : 'warning'}
+          />
         </DataGridTextCell>
       ),
       label: t('list_column_stream_indexation'),
diff --git a/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.spec.tsx b/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.spec.tsx
index 0718dbf0d542..5dbaaa27aa5a 100644
--- a/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.spec.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.spec.tsx
@@ -14,7 +14,12 @@ describe('QuantitySelector', () => {
 
   it('shows error message when value is below minimum', () => {
     const { getByText } = render(
-      <QuantitySelector value={0} min={1} onValueChange={() => {}} />,
+      <QuantitySelector
+        value={0}
+        min={1}
+        onValueChange={() => {}}
+        id="selector"
+      />,
       {
         wrapper,
       },
@@ -24,7 +29,12 @@ describe('QuantitySelector', () => {
 
   it('shows error message when value is above maximum', () => {
     const { getByText } = render(
-      <QuantitySelector value={6} max={5} onValueChange={() => {}} />,
+      <QuantitySelector
+        value={6}
+        max={5}
+        onValueChange={() => {}}
+        id="selector"
+      />,
     );
     expect(getByText('common_field_error_max')).toBeInTheDocument();
   });
diff --git a/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx b/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx
index db2cd44c34bb..8959c54b8821 100644
--- a/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx
@@ -20,6 +20,7 @@ export interface QuantitySelectorProps {
   max?: number;
   className?: string;
   contentClassName?: string;
+  id?: string;
 }
 
 export function QuantitySelector({
@@ -32,6 +33,7 @@ export function QuantitySelector({
   max,
   className,
   contentClassName,
+  id = 'popover-trigger',
   ...props
 }: Readonly<QuantitySelectorProps>) {
   const { t } = useTranslation('pci-quantity-selector');
@@ -44,7 +46,7 @@ export function QuantitySelector({
   return (
     <OdsFormField className={className} {...props}>
       <div className={contentClassName}>
-        <div slot="label" className="flex gap-2">
+        <div className="flex gap-2">
           {label && (
             <OdsText preset="span" className="text-[14px] font-bold">
               {label}
@@ -52,13 +54,13 @@ export function QuantitySelector({
           )}
           {labelHelpText && (
             <>
-              <div id="popover-trigger">
+              <div id={id}>
                 <OdsIcon
                   name={ODS_ICON_NAME.question}
                   className="cursor-help text-[16px]"
                 />
               </div>
-              <OdsPopover triggerId="popover-trigger" className="w-4 h-4">
+              <OdsPopover triggerId={id} className="w-4 h-4">
                 {labelHelpText}
               </OdsPopover>
             </>