From cf36844e25932eabb594059d6758e624166bf7db Mon Sep 17 00:00:00 2001
From: stif59100 <steeve.vanderstocken@ovhcloud.com>
Date: Thu, 17 Oct 2024 10:07:32 +0200
Subject: [PATCH] feat(zimbra): add ods version 18.1

ref:MANAGER-15662

Signed-off-by: stif59100 <steeve.vanderstocken@ovhcloud.com>
Signed-off-by: Tristan WAGNER <t.wagner66250@gmail.com>
---
 .../manager-react-components/package.json     |   4 +-
 .../content/headers/headers.stories.tsx       |   2 +-
 .../menus/action/action.component.tsx         |  29 +-
 .../navigation/menus/action/action.spec.tsx   |   1 +
 .../typography/links/links.component.tsx      |  22 +-
 packages/manager/apps/zimbra/package.json     |  10 +-
 .../zimbra/src/components/BadgeStatus.tsx     |  16 +-
 .../src/components/Breadcrumb/Breadcrumb.tsx  |  28 +-
 .../ButtonTooltip/ButtonTooltip.tsx           |  79 ---
 .../__test__/ButtonTooltip.spec.tsx           |  14 -
 .../zimbra/src/components/DiagnosticBadge.tsx |  56 +--
 .../apps/zimbra/src/components/GuideLink.tsx  |  12 +-
 .../apps/zimbra/src/components/LabelChip.tsx  |  17 +-
 .../zimbra/src/components/Loading/Loading.tsx |   7 +-
 .../zimbra/src/components/Modals/Modal.tsx    |  73 +--
 .../apps/zimbra/src/components/TileBlock.tsx  |  35 --
 .../layout-helpers/Dashboard/Dashboard.tsx    |   5 +-
 .../layout-helpers/Dashboard/TabsPanel.tsx    |  61 +--
 packages/manager/apps/zimbra/src/index.scss   |  12 +-
 .../dashboard/AutoReplies/AutoReplies.tsx     |  28 +-
 .../Domains/ActionButtonDomain.component.tsx  |  15 +-
 .../dashboard/Domains/AddDomain.page.tsx      | 457 +++++++-----------
 .../src/pages/dashboard/Domains/Domains.tsx   | 104 ++--
 .../Domains/ModalDeleteDomain.component.tsx   |  75 +--
 .../ModalDiagnosticDnsRecord.component.tsx    |  80 +--
 .../Domains/ModalEditDomain.component.tsx     |  94 ++--
 .../AccountTabsPanel.component.tsx            |  70 +--
 .../ActionButtonAlias.component.tsx           |   9 +-
 .../ActionButtonEmail.component.tsx           |  14 +-
 .../AddAndEditEmailAccount.page.tsx           |   8 +-
 .../EmailAccountSettings.page.tsx             | 378 ++++++---------
 .../dashboard/EmailAccounts/EmailAccounts.tsx | 128 ++---
 .../EmailAccounts/EmailAccountsAlias.page.tsx |  41 +-
 .../EmailAccounts/ModalAddAlias.component.tsx | 126 ++---
 .../ModalDeleteAlias.component.tsx            |  51 +-
 .../ModalDeleteEmailAccount.component.tsx     |  98 ++--
 .../GeneralInformation/GeneralInformation.tsx | 157 +++---
 .../GeneralInformation/OngoingTasks.tsx       |  22 +-
 .../ActionButtonMailingList.component.tsx     |  26 +-
 .../AddAndEditMailingList.page.tsx            |  10 +-
 .../MailingLists/MailingListSettings.page.tsx | 417 ++++++----------
 .../dashboard/MailingLists/MailingLists.tsx   |  84 +---
 .../ActionButtonOrganization.component.tsx    |  16 +-
 .../pages/dashboard/Organizations/IdLink.tsx  |  25 +-
 .../ModalAddAndEditOrganization.page.tsx      | 193 +++-----
 .../ModalDeleteOrganization.component.tsx     |  74 +--
 .../dashboard/Organizations/Organizations.tsx |  44 +-
 .../ActionButtonRedirections.component.tsx    |  15 +-
 .../ModalAddAndEditRedirections.page.tsx      | 175 +++----
 .../ModalDeleteRedirections.component.tsx     |  44 +-
 .../dashboard/Redirections/Redirections.tsx   |  30 +-
 yarn.lock                                     |  54 +--
 52 files changed, 1369 insertions(+), 2276 deletions(-)
 delete mode 100644 packages/manager/apps/zimbra/src/components/ButtonTooltip/ButtonTooltip.tsx
 delete mode 100644 packages/manager/apps/zimbra/src/components/ButtonTooltip/__test__/ButtonTooltip.spec.tsx
 delete mode 100644 packages/manager/apps/zimbra/src/components/TileBlock.tsx

diff --git a/packages/manager-react-components/package.json b/packages/manager-react-components/package.json
index 518ce5769f99..8ecf86effdc4 100644
--- a/packages/manager-react-components/package.json
+++ b/packages/manager-react-components/package.json
@@ -28,8 +28,8 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@ovh-ux/manager-core-api": "^0.8.0",
     "@ovh-ux/manager-react-shell-client": "^0.7.2",
-    "@ovhcloud/ods-components": "18.0.0",
-    "@ovhcloud/ods-themes": "18.0.0",
+    "@ovhcloud/ods-components": "18.1.0",
+    "@ovhcloud/ods-themes": "18.1.0",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "@types/lodash.isdate": "^4.0.9",
diff --git a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
index 138d77884259..f246832d6acb 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
@@ -46,7 +46,7 @@ const guideItems = [
 const HeadingWithActionButton: HeadersProps = {
   title: 'Example for header with actions ',
   description: 'description for header',
-  headerButton: <ActionMenu items={actionItems} />,
+  headerButton: <ActionMenu id="1" items={actionItems} />,
 };
 const HeadingWithGuideButton: HeadersProps = {
   title: 'Example for header with guides',
diff --git a/packages/manager-react-components/src/components/navigation/menus/action/action.component.tsx b/packages/manager-react-components/src/components/navigation/menus/action/action.component.tsx
index 4635bd86b908..e216ab9ddb2a 100644
--- a/packages/manager-react-components/src/components/navigation/menus/action/action.component.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/action/action.component.tsx
@@ -14,12 +14,11 @@ export interface ActionMenuItem {
   id: number;
   rel?: string;
   download?: string;
-  href?: string;
   target?: string;
   onClick?: () => void;
   label: string;
   variant?: ODS_BUTTON_VARIANT;
-  disabled?: boolean;
+  isDisabled?: boolean;
   iamActions?: string[];
   urn?: string;
 }
@@ -29,7 +28,8 @@ export interface ActionMenuProps {
   isCompact?: boolean;
   icon?: ODS_ICON_NAME;
   variant?: ODS_BUTTON_VARIANT;
-  disabled?: boolean;
+  isDisabled?: boolean;
+  id: string;
 }
 
 const MenuItem = ({
@@ -52,7 +52,7 @@ const MenuItem = ({
       {!item?.iamActions || item?.iamActions?.length === 0 ? (
         <OdsButton
           {...buttonProps}
-          isDisabled={buttonProps.disabled}
+          isDisabled={buttonProps.isDisabled}
           label={item.label}
         >
           <span slot="start">
@@ -66,7 +66,7 @@ const MenuItem = ({
           iamActions={item.iamActions}
           urn={item.urn}
           {...buttonProps}
-          isDisabled={buttonProps.disabled || undefined}
+          isDisabled={buttonProps.isDisabled || undefined}
         >
           <span slot="start">
             <span>{item.label}</span>
@@ -82,19 +82,21 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   isCompact,
   icon,
   variant = ODS_BUTTON_VARIANT.outline,
-  disabled,
+  isDisabled,
+  id,
 }) => {
   const { t } = useTranslation('buttons');
   const [isTrigger, setIsTrigger] = React.useState(false);
 
   return (
     <>
-      <div id="navigation-action-trigger">
+      <div key={id} id={`navigation-action-trigger-${id}`}>
         <OdsButton
           data-testid="navigation-action-trigger-action"
           slot="menu-title"
+          id={id}
           variant={variant}
-          isDisabled={disabled}
+          isDisabled={isDisabled}
           size={ODS_BUTTON_SIZE.sm}
           onClick={() => setIsTrigger(true)}
           {...(!isCompact && { label: t('common_actions') })}
@@ -107,12 +109,17 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
       </div>
       <OdsPopover
         className="py-[8px] px-0 overflow-hidden"
-        triggerId="navigation-action-trigger"
+        triggerId={`navigation-action-trigger-${id}`}
         with-arrow
       >
-        {items.map(({ id, ...item }) => {
+        {items.map(({ id: itemId, ...item }) => {
           return (
-            <MenuItem id={id} key={id} item={item} isTrigger={isTrigger} />
+            <MenuItem
+              id={itemId}
+              key={itemId}
+              item={item}
+              isTrigger={isTrigger}
+            />
           );
         })}
       </OdsPopover>
diff --git a/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx b/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx
index 67f8a5cdf2da..3e64e789f42c 100644
--- a/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx
@@ -8,6 +8,7 @@ import { IamAuthorizationResponse } from '../../../../hooks/iam/iam.interface';
 jest.mock('../../../../hooks/iam');
 
 const actionItems: ActionMenuProps = {
+  id: 'action-menu-test-id',
   items: [
     {
       id: 1,
diff --git a/packages/manager-react-components/src/components/typography/links/links.component.tsx b/packages/manager-react-components/src/components/typography/links/links.component.tsx
index 47ec4bbaa43f..fa2c3e15ff09 100644
--- a/packages/manager-react-components/src/components/typography/links/links.component.tsx
+++ b/packages/manager-react-components/src/components/typography/links/links.component.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import {
+  ODS_ICON_NAME,
+  ODS_LINK_COLOR,
+  ODS_LINK_ICON_ALIGNMENT,
+} from '@ovhcloud/ods-components';
 import { OdsLink } from '@ovhcloud/ods-components/react';
 
 export enum LinkType {
@@ -7,14 +11,20 @@ export enum LinkType {
   next = 'next',
   external = 'external',
 }
+export enum IconLinkAlignmentType {
+  left = 'left',
+  right = 'right',
+}
 
 export interface LinksProps {
   className?: string;
+  color?: ODS_LINK_COLOR;
   download?: string;
   label?: string;
   href?: string;
   rel?: string;
   target?: string;
+  iconAlignment?: IconLinkAlignmentType;
   type?: LinkType;
   onClickReturn?: () => void;
 }
@@ -24,12 +34,22 @@ export const Links: React.FC<LinksProps> = ({
   onClickReturn,
   type,
   href,
+  color,
+  iconAlignment,
   ...props
 }: LinksProps) => (
   <OdsLink
     href={href}
     onClick={onClickReturn}
+    color={color}
+    {...(iconAlignment === IconLinkAlignmentType.left && {
+      iconAlignment: ODS_LINK_ICON_ALIGNMENT.left,
+    })}
+    {...(iconAlignment === IconLinkAlignmentType.right && {
+      iconAlignment: ODS_LINK_ICON_ALIGNMENT.right,
+    })}
     {...props}
+    {...(type === LinkType.back && { icon: ODS_ICON_NAME.arrowLeft })}
     {...(type === LinkType.next && { icon: ODS_ICON_NAME.arrowRight })}
     {...(type === LinkType.external && { icon: ODS_ICON_NAME.externalLink })}
     label={label}
diff --git a/packages/manager/apps/zimbra/package.json b/packages/manager/apps/zimbra/package.json
index 52a3853d4136..92e62f4d92c5 100644
--- a/packages/manager/apps/zimbra/package.json
+++ b/packages/manager/apps/zimbra/package.json
@@ -24,16 +24,14 @@
     "@ovh-ux/manager-config": "^7.4.0",
     "@ovh-ux/manager-core-api": "^0.8.0",
     "@ovh-ux/manager-core-utils": "^0.3.0",
-    "@ovh-ux/manager-react-components": "^1.38.0",
+    "@ovh-ux/manager-react-components": "2.0.0",
     "@ovh-ux/manager-react-core-application": "^0.10.2",
     "@ovh-ux/manager-react-shell-client": "^0.7.2",
-    "@ovh-ux/manager-tailwind-config": "^0.2.0",
+    "@ovh-ux/manager-tailwind-config": "*",
     "@ovh-ux/request-tagger": "^0.3.0",
     "@ovh-ux/shell": "^3.8.0",
-    "@ovhcloud/ods-common-core": "17.2.2",
-    "@ovhcloud/ods-common-theming": "17.2.2",
-    "@ovhcloud/ods-components": "17.2.2",
-    "@ovhcloud/ods-theme-blue-jeans": "17.2.2",
+    "@ovhcloud/ods-components": "18.1.0",
+    "@ovhcloud/ods-themes": "18.1.0",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "element-internals-polyfill": "^1.3.10",
diff --git a/packages/manager/apps/zimbra/src/components/BadgeStatus.tsx b/packages/manager/apps/zimbra/src/components/BadgeStatus.tsx
index f097c0413acf..48d4708a8b50 100644
--- a/packages/manager/apps/zimbra/src/components/BadgeStatus.tsx
+++ b/packages/manager/apps/zimbra/src/components/BadgeStatus.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OsdsChip } from '@ovhcloud/ods-components/react';
+import { OdsBadge } from '@ovhcloud/ods-components/react';
+import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
 import { ResourceStatus } from '@/api/api.type';
 
 export type BadgeStatusProps = {
@@ -11,19 +11,15 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({ itemStatus }) => {
   const getStatusColor = (status: string) => {
     switch (status) {
       case ResourceStatus.READY:
-        return ODS_THEME_COLOR_INTENT.success;
+        return ODS_BADGE_COLOR.success;
       case ResourceStatus.ERROR:
-        return ODS_THEME_COLOR_INTENT.error;
+        return ODS_BADGE_COLOR.critical;
       default:
-        return ODS_THEME_COLOR_INTENT.primary;
+        return ODS_BADGE_COLOR.information;
     }
   };
 
   const statusColor = getStatusColor(itemStatus);
 
-  return (
-    <OsdsChip inline color={statusColor}>
-      {itemStatus}
-    </OsdsChip>
-  );
+  return <OdsBadge color={statusColor} label={itemStatus} />;
 };
diff --git a/packages/manager/apps/zimbra/src/components/Breadcrumb/Breadcrumb.tsx b/packages/manager/apps/zimbra/src/components/Breadcrumb/Breadcrumb.tsx
index 86735b42281c..5dd4861a58a1 100644
--- a/packages/manager/apps/zimbra/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/manager/apps/zimbra/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
-import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
+import { useParams, useLocation } from 'react-router-dom';
+import {
+  OdsBreadcrumb,
+  OdsBreadcrumbItem,
+} from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { urls } from '@/routes/routes.constants';
 import { useGenerateUrl, useOrganization } from '@/hooks';
@@ -16,7 +19,6 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
 }) => {
   const { serviceName } = useParams();
   const { t } = useTranslation('dashboard');
-  const navigate = useNavigate();
   const location = useLocation();
   const { data: organization, isLoading } = useOrganization();
 
@@ -30,13 +32,13 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   const breadcrumbItems = [
     {
       label: t('zimbra_dashboard_title'),
-      onClick: () => navigate(urls.root),
+      href: urls.root,
     },
     ...(organization && !isLoading
       ? [
           {
             label: organization?.currentState.name,
-            onClick: () => navigate(overviewUrlValue),
+            href: overviewUrlValue,
           },
         ]
       : []),
@@ -49,18 +51,22 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
       );
       return {
         label,
-        onClick: () => navigate(url),
+        href: url,
       };
     }),
     ...items,
   ].filter(Boolean);
 
   return (
-    <OsdsBreadcrumb
-      data-testid="breadcrumb"
-      className="mb-4"
-      items={breadcrumbItems}
-    />
+    <OdsBreadcrumb data-testid="breadcrumb" className="mb-4">
+      {breadcrumbItems.map((item) => (
+        <OdsBreadcrumbItem
+          key={item.href}
+          href={item.href}
+          label={item.label}
+        />
+      ))}
+    </OdsBreadcrumb>
   );
 };
 
diff --git a/packages/manager/apps/zimbra/src/components/ButtonTooltip/ButtonTooltip.tsx b/packages/manager/apps/zimbra/src/components/ButtonTooltip/ButtonTooltip.tsx
deleted file mode 100644
index 8d990ec00662..000000000000
--- a/packages/manager/apps/zimbra/src/components/ButtonTooltip/ButtonTooltip.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { OsdsButton, OsdsIcon } from '@ovhcloud/ods-components/react';
-import {
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_BUTTON_TYPE,
-  ODS_BUTTON_VARIANT,
-} from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-
-interface TooltipItem {
-  label: string;
-}
-
-interface ButtonTooltipProps {
-  tooltipContent: TooltipItem[];
-}
-
-const ButtonTooltip: React.FC<ButtonTooltipProps> = (props) => {
-  const { tooltipContent } = props;
-  const [showTooltip, setShowTooltip] = useState(false);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleDocumentClick = (event: MouseEvent) => {
-      if (
-        tooltipRef.current &&
-        !tooltipRef.current.contains(event.target as Node)
-      ) {
-        setShowTooltip(false);
-      }
-    };
-
-    document.addEventListener('click', handleDocumentClick);
-
-    return () => {
-      document.removeEventListener('click', handleDocumentClick);
-    };
-  }, []);
-
-  const handleTooltipToggle = (
-    event: React.MouseEvent<HTMLOsdsButtonElement, MouseEvent>,
-  ) => {
-    event.stopPropagation();
-    setShowTooltip(!showTooltip);
-  };
-
-  return (
-    <>
-      <OsdsButton
-        type={ODS_BUTTON_TYPE.button}
-        variant={ODS_BUTTON_VARIANT.stroked}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={(event) => handleTooltipToggle(event)}
-        data-testid="button-tooltip"
-        circle
-      >
-        <OsdsIcon
-          name={ODS_ICON_NAME.ELLIPSIS_VERTICAL}
-          size={ODS_ICON_SIZE.xxs}
-          color={ODS_THEME_COLOR_INTENT.primary}
-        />
-      </OsdsButton>
-      {showTooltip && (
-        <div ref={tooltipRef} className="relative inline-block left-[-80%]">
-          <div className="absolute bg-white rounded whitespace-nowrap mt-[-4px] right-[-100%] border-2 border-gray-300 text-left z-50">
-            {tooltipContent.map((item: TooltipItem) => (
-              <div key={item.label} className="px-10 py-20 cursor-pointer">
-                {item.label}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default ButtonTooltip;
diff --git a/packages/manager/apps/zimbra/src/components/ButtonTooltip/__test__/ButtonTooltip.spec.tsx b/packages/manager/apps/zimbra/src/components/ButtonTooltip/__test__/ButtonTooltip.spec.tsx
deleted file mode 100644
index 642be269473b..000000000000
--- a/packages/manager/apps/zimbra/src/components/ButtonTooltip/__test__/ButtonTooltip.spec.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { describe, expect } from 'vitest';
-import { render } from '@/utils/test.provider';
-import ButtonTooltip from '../ButtonTooltip';
-
-describe('ButtonTooltip component', () => {
-  it('should render', async () => {
-    const { getByTestId } = render(
-      <ButtonTooltip tooltipContent={[{ label: 'Test' }]} />,
-    );
-    const cmp = getByTestId('button-tooltip');
-    expect(cmp).toBeInTheDocument();
-  });
-});
diff --git a/packages/manager/apps/zimbra/src/components/DiagnosticBadge.tsx b/packages/manager/apps/zimbra/src/components/DiagnosticBadge.tsx
index ef444a8ef14f..66fd498eab68 100644
--- a/packages/manager/apps/zimbra/src/components/DiagnosticBadge.tsx
+++ b/packages/manager/apps/zimbra/src/components/DiagnosticBadge.tsx
@@ -1,21 +1,12 @@
 import React from 'react';
-import {
-  OsdsChip,
-  OsdsText,
-  OsdsTooltip,
-  OsdsTooltipContent,
-} from '@ovhcloud/ods-components/react';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
+import { OdsTooltip, OdsText, OdsTag } from '@ovhcloud/ods-components/react';
+import { ODS_TAG_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { DnsRecordType } from '@/utils';
 import { useGenerateUrl } from '@/hooks';
 
-type StatusProps = 'error' | 'success' | 'warning';
+type StatusProps = 'critical' | 'success' | 'warning';
 type DiagnosticBadgeProps = {
   diagType: DnsRecordType;
   status?: StatusProps;
@@ -28,10 +19,10 @@ export const DiagnosticBadge: React.FC<DiagnosticBadgeProps> = ({
   domainId,
 }) => {
   const { t } = useTranslation('domains');
-  const chipColor = status as ODS_THEME_COLOR_INTENT;
+  const chipColor = status as ODS_TAG_COLOR;
   const navigate = useNavigate();
   const hasAction = !!(
-    status === 'error' &&
+    status === 'critical' &&
     [DnsRecordType.MX, DnsRecordType.SPF, DnsRecordType.SRV].some(
       (diag) => diag === diagType,
     ) &&
@@ -41,7 +32,6 @@ export const DiagnosticBadge: React.FC<DiagnosticBadgeProps> = ({
   const href = useGenerateUrl('./diagnostic', 'path', {
     domainId,
     dnsRecordType: diagType,
-    // remove when we get it from api
     isOvhDomain: 'false',
   });
 
@@ -50,40 +40,28 @@ export const DiagnosticBadge: React.FC<DiagnosticBadgeProps> = ({
   };
 
   return (
-    <OsdsTooltip className="mr-4">
+    <OdsTooltip className="mr-4" triggerId="tooltip-trigger">
       {status === 'success' ? (
         <>
-          <OsdsChip color={chipColor}>{diagType}</OsdsChip>
-          <OsdsTooltipContent
-            slot="tooltip-content"
-            className="flex items-start flex-col p-2 "
-          >
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            >
+          <OdsTag color={chipColor} label={diagType}></OdsTag>
+          <div id="tooltip-trigger" className="flex items-start flex-col p-2 ">
+            <OdsText preset={ODS_TEXT_PRESET.heading4}>
               {t('zimbra_domains_datagrid_diagnostic_tooltip_title', {
                 diagType,
               })}
-            </OsdsText>
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-            >
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
               {t('zimbra_domains_datagrid_diagnostic_configuration_ok')}
-            </OsdsText>
-          </OsdsTooltipContent>
+            </OdsText>
+          </div>
         </>
       ) : (
-        <OsdsChip
+        <OdsTag
+          label={diagType}
           color={chipColor}
           {...(hasAction ? { selectable: true, onClick: handleChipClick } : {})}
-        >
-          {diagType}
-        </OsdsChip>
+        />
       )}
-    </OsdsTooltip>
+    </OdsTooltip>
   );
 };
diff --git a/packages/manager/apps/zimbra/src/components/GuideLink.tsx b/packages/manager/apps/zimbra/src/components/GuideLink.tsx
index 26dd2c86ec82..fab1d7126bb8 100644
--- a/packages/manager/apps/zimbra/src/components/GuideLink.tsx
+++ b/packages/manager/apps/zimbra/src/components/GuideLink.tsx
@@ -1,7 +1,11 @@
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import React, { useContext } from 'react';
-import { Links, LinkType } from '@ovh-ux/manager-react-components';
+import {
+  IconLinkAlignmentType,
+  Links,
+  LinkType,
+} from '@ovh-ux/manager-react-components';
+import { ODS_LINK_COLOR } from '@ovhcloud/ods-components';
 import { Guide } from '@/guides.constants';
 
 interface GuideLinkProps {
@@ -16,7 +20,9 @@ export default function GuideLink({ label, guide }: Readonly<GuideLinkProps>) {
   return (
     <Links
       type={LinkType.external}
-      target={OdsHTMLAnchorElementTarget._blank}
+      color={ODS_LINK_COLOR.primary}
+      iconAlignment={IconLinkAlignmentType.right}
+      target="_blank"
       href={
         typeof guide.url === 'string'
           ? guide.url
diff --git a/packages/manager/apps/zimbra/src/components/LabelChip.tsx b/packages/manager/apps/zimbra/src/components/LabelChip.tsx
index d78c5217b7bd..c012f4fdd7d6 100644
--- a/packages/manager/apps/zimbra/src/components/LabelChip.tsx
+++ b/packages/manager/apps/zimbra/src/components/LabelChip.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OsdsChip } from '@ovhcloud/ods-components/react';
+import { OdsButton } from '@ovhcloud/ods-components/react';
+import { ODS_BUTTON_COLOR, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 interface LabelChipProps {
@@ -26,14 +26,13 @@ const LabelChip: React.FC<LabelChipProps> = ({ id, children }) => {
   };
 
   return (
-    <OsdsChip
-      inline
-      color={ODS_THEME_COLOR_INTENT.primary}
-      selectable
+    <OdsButton
+      color={ODS_BUTTON_COLOR.primary}
+      inline-block
+      variant={ODS_BUTTON_VARIANT.outline}
       onClick={handleLinkClick}
-    >
-      {children}
-    </OsdsChip>
+      label={children}
+    />
   );
 };
 
diff --git a/packages/manager/apps/zimbra/src/components/Loading/Loading.tsx b/packages/manager/apps/zimbra/src/components/Loading/Loading.tsx
index 303bc4571e2e..b366cd22dc39 100644
--- a/packages/manager/apps/zimbra/src/components/Loading/Loading.tsx
+++ b/packages/manager/apps/zimbra/src/components/Loading/Loading.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import { OsdsSpinner } from '@ovhcloud/ods-components/react';
-import { ODS_SPINNER_MODE, ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
+import { OdsSpinner } from '@ovhcloud/ods-components/react';
+import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
 
 export default function Loading({
   className = 'flex justify-center my-5',
-  mode = ODS_SPINNER_MODE.indeterminate,
   size = ODS_SPINNER_SIZE.md,
 }) {
   return (
     <div data-testid="spinner" className={className}>
-      <OsdsSpinner mode={mode} size={size} inline></OsdsSpinner>
+      <OdsSpinner size={size} inline-block></OdsSpinner>
     </div>
   );
 }
diff --git a/packages/manager/apps/zimbra/src/components/Modals/Modal.tsx b/packages/manager/apps/zimbra/src/components/Modals/Modal.tsx
index 5d00408bb36b..0e972cc6703f 100644
--- a/packages/manager/apps/zimbra/src/components/Modals/Modal.tsx
+++ b/packages/manager/apps/zimbra/src/components/Modals/Modal.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
-import { OsdsButton, OsdsModal } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
+import { OdsButton, OdsModal, OdsText } from '@ovhcloud/ods-components/react';
+import {
+  ODS_BUTTON_VARIANT,
+  ODS_MODAL_COLOR,
+  ODS_BUTTON_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
 import Loading from '@/components/Loading/Loading';
 
 export interface ButtonType {
@@ -9,15 +13,16 @@ export interface ButtonType {
   action: () => void;
   label: string;
   disabled?: boolean;
-  color?: ODS_THEME_COLOR_INTENT;
+  color?: ODS_BUTTON_COLOR;
   variant?: ODS_BUTTON_VARIANT;
 }
 
 export interface ModalProps {
   title?: string;
-  color?: ODS_THEME_COLOR_INTENT;
-  dismissible?: boolean;
+  color?: ODS_MODAL_COLOR;
+  isDismissible?: boolean;
   isLoading?: boolean;
+  isOpen?: boolean;
   onDismissible?: () => void;
   children?: React.ReactElement;
   primaryButton?: ButtonType;
@@ -25,58 +30,68 @@ export interface ModalProps {
 }
 
 const Modal: React.FC<ModalProps> = ({
-  title,
-  color,
-  dismissible,
+  color = ODS_MODAL_COLOR.information,
+  isDismissible,
   onDismissible,
   isLoading,
   primaryButton,
   secondaryButton,
   children,
+  isOpen,
+  title,
 }) => {
+  const mapModalColorToButtonColor = (modalColor: ODS_MODAL_COLOR) => {
+    if (modalColor === ODS_MODAL_COLOR.critical) {
+      return ODS_BUTTON_COLOR.critical;
+    }
+    return ODS_BUTTON_COLOR.primary;
+  };
+
+  const buttonColor = mapModalColorToButtonColor(color);
+
   return (
-    <OsdsModal
+    <OdsModal
       data-testid="modal"
       color={color}
-      headline={title}
-      dismissible={dismissible}
+      isDismissible={isDismissible}
       className="text-left"
-      onOdsModalClose={onDismissible}
+      onOdsClose={onDismissible}
+      isOpen={isOpen}
     >
+      <OdsText preset={ODS_TEXT_PRESET.heading6}>{title}</OdsText>
       {!isLoading && <div className="flex flex-col text-left">{children}</div>}
       {isLoading && <Loading />}
-
       {secondaryButton && (
-        <OsdsButton
+        <OdsButton
           {...(secondaryButton.testid
             ? { 'data-testid': secondaryButton.testid }
             : {})}
           slot="actions"
-          inline
-          color={secondaryButton.color ?? ODS_THEME_COLOR_INTENT.primary}
+          inline-block
+          color={buttonColor}
           onClick={!secondaryButton.disabled ? secondaryButton.action : null}
           {...(secondaryButton.disabled || isLoading ? { disabled: true } : {})}
-          variant={secondaryButton.variant ?? ODS_BUTTON_VARIANT.stroked}
-        >
-          {secondaryButton.label}
-        </OsdsButton>
+          variant={secondaryButton.variant ?? ODS_BUTTON_VARIANT.outline}
+          label={secondaryButton.label}
+          className="mt-4"
+        />
       )}
       {primaryButton && (
-        <OsdsButton
+        <OdsButton
           {...(primaryButton.testid
             ? { 'data-testid': primaryButton.testid }
             : {})}
           slot="actions"
-          inline
-          color={primaryButton.color ?? ODS_THEME_COLOR_INTENT.primary}
+          inline-block
+          color={buttonColor}
           onClick={!primaryButton.disabled ? primaryButton.action : null}
           {...(primaryButton.disabled || isLoading ? { disabled: true } : {})}
-          variant={primaryButton.variant ?? ODS_BUTTON_VARIANT.flat}
-        >
-          {primaryButton.label}
-        </OsdsButton>
+          variant={primaryButton.variant ?? ODS_BUTTON_VARIANT.outline}
+          label={primaryButton.label}
+          className="mt-4"
+        />
       )}
-    </OsdsModal>
+    </OdsModal>
   );
 };
 
diff --git a/packages/manager/apps/zimbra/src/components/TileBlock.tsx b/packages/manager/apps/zimbra/src/components/TileBlock.tsx
deleted file mode 100644
index 1ec2653d00df..000000000000
--- a/packages/manager/apps/zimbra/src/components/TileBlock.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { OsdsText, OsdsDivider } from '@ovhcloud/ods-components/react';
-import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-
-export type TileBlockProps = {
-  label: string;
-  testid?: string;
-};
-
-export const TileBlock: React.FC<React.PropsWithChildren<TileBlockProps>> = ({
-  label,
-  testid,
-  children,
-}) => (
-  <div data-testid={testid} className="flex flex-col mb-3">
-    <OsdsDivider separator />
-    <OsdsText
-      className="mb-2"
-      size={ODS_TEXT_SIZE._200}
-      level={ODS_TEXT_LEVEL.heading}
-      color={ODS_THEME_COLOR_INTENT.text}
-    >
-      {label}
-    </OsdsText>
-    <OsdsText
-      className="mb-2"
-      size={ODS_TEXT_SIZE._100}
-      level={ODS_TEXT_LEVEL.body}
-      color={ODS_THEME_COLOR_INTENT.text}
-    >
-      {children}
-    </OsdsText>
-  </div>
-);
diff --git a/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/Dashboard.tsx b/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/Dashboard.tsx
index 03db113dc680..da02cd62379f 100644
--- a/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/Dashboard.tsx
+++ b/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/Dashboard.tsx
@@ -10,9 +10,9 @@ import {
   BaseLayout,
   GuideButton,
   GuideItem,
+  Notifications,
 } from '@ovh-ux/manager-react-components';
 
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { useTranslation } from 'react-i18next';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import TabsPanel, { TabItemProps } from './TabsPanel';
@@ -36,7 +36,7 @@ export const Dashboard: React.FC = () => {
       id: 1,
       href: `${GUIDES_LIST.administrator_guide.url[ovhSubsidiary] ||
         GUIDES_LIST.administrator_guide.url.DEFAULT}`,
-      target: OdsHTMLAnchorElementTarget._blank,
+      target: '_blank',
       label: t('zimbra_dashboard_administrator_guide'),
     },
   ];
@@ -119,6 +119,7 @@ export const Dashboard: React.FC = () => {
         title: 'Zimbra',
         headerButton: <GuideButton items={guideItems} />,
       }}
+      message={<Notifications />}
       tabs={<TabsPanel tabs={tabsList} />}
     >
       <Outlet />
diff --git a/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/TabsPanel.tsx b/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/TabsPanel.tsx
index 96697321089c..b3101c816ce1 100644
--- a/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/TabsPanel.tsx
+++ b/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/TabsPanel.tsx
@@ -1,14 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
-import {
-  OsdsTabs,
-  OsdsTabBar,
-  OsdsTabBarItem,
-  OsdsChip,
-} from '@ovhcloud/ods-components/react';
+import { OdsTabs, OdsTab, OdsTag } from '@ovhcloud/ods-components/react';
 import { Headers } from '@ovh-ux/manager-react-components';
-import { ODS_CHIP_SIZE } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_TAG_COLOR } from '@ovhcloud/ods-components';
 import { useOverridePage, useOrganization } from '@/hooks';
 
 export type TabItemProps = {
@@ -30,6 +24,7 @@ const TabsPanel: React.FC<TabsProps> = ({ tabs }) => {
   const { data } = useOrganization();
 
   const isOverriddedPage = useOverridePage();
+
   useEffect(() => {
     if (!location.pathname) {
       setActivePanel(tabs[0].name);
@@ -53,40 +48,36 @@ const TabsPanel: React.FC<TabsProps> = ({ tabs }) => {
       {data && (
         <div className="flex items-center mb-4">
           <Headers subtitle={data.currentState.name} />
-          <OsdsChip
-            removable
-            inline
-            size={ODS_CHIP_SIZE.sm}
-            color={ODS_THEME_COLOR_INTENT.primary}
+          <OdsTag
+            color={ODS_TAG_COLOR.information}
             onClick={() => navigate(location.pathname)}
             className="ml-4"
-          >
-            {data.currentState.label}
-          </OsdsChip>
+            label={data.currentState.label}
+          />
         </div>
       )}
 
       {!isOverriddedPage && (
-        <OsdsTabBar slot="top">
-          <OsdsTabs panel={activePanel}>
-            {tabs.map(
-              (tab: TabItemProps) =>
-                !tab.hidden && (
-                  <NavLink
-                    key={`osds-tab-bar-item-${tab.name}`}
-                    to={
-                      data?.id ? `${tab.to}?organizationId=${data?.id}` : tab.to
-                    }
-                    className="no-underline"
+        <OdsTabs>
+          {tabs.map(
+            (tab: TabItemProps) =>
+              !tab.hidden && (
+                <NavLink
+                  key={`osds-tab-bar-item-${tab.name}`}
+                  to={tab.to}
+                  className="no-underline"
+                >
+                  <OdsTab
+                    id={tab.name}
+                    role="tab"
+                    isSelected={activePanel === tab.name}
                   >
-                    <OsdsTabBarItem panel={tab.name}>
-                      {tab.title}
-                    </OsdsTabBarItem>
-                  </NavLink>
-                ),
-            )}
-          </OsdsTabs>
-        </OsdsTabBar>
+                    {tab.title}
+                  </OdsTab>
+                </NavLink>
+              ),
+          )}
+        </OdsTabs>
       )}
     </>
   );
diff --git a/packages/manager/apps/zimbra/src/index.scss b/packages/manager/apps/zimbra/src/index.scss
index d205283b74a8..bb4185167bd1 100644
--- a/packages/manager/apps/zimbra/src/index.scss
+++ b/packages/manager/apps/zimbra/src/index.scss
@@ -1,13 +1,7 @@
 @tailwind utilities;
 
-.border-ods-primary-100 {
-  border-color: var(--ods-color-primary-100);
-}
-
-.background-ods-primary-100 {
-  background-color: var(--ods-color-primary-100);
-}
+@import '@ovhcloud/ods-themes/default';
 
-.background-ods-primary-000 {
-  background-color: var(--ods-color-primary-000);
+html {
+  font-family: var(--ods-font-family-default);
 }
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AutoReplies.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AutoReplies.tsx
index 582551816a16..5cf16d2c5af6 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AutoReplies.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/AutoReplies/AutoReplies.tsx
@@ -3,14 +3,13 @@ import {
   DatagridColumn,
   Notifications,
 } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
 } from '@ovhcloud/ods-components';
-import { OsdsButton, OsdsIcon } from '@ovhcloud/ods-components/react';
+import { OdsButton } from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet } from 'react-router-dom';
@@ -63,20 +62,14 @@ const columns: DatagridColumn<AutoRepliesItem>[] = [
   {
     id: 'deleteButton',
     cell: () => (
-      <>
-        <OsdsButton
-          inline
-          size={ODS_BUTTON_SIZE.sm}
-          color={ODS_THEME_COLOR_INTENT.primary}
-          variant={ODS_BUTTON_VARIANT.ghost}
-        >
-          <OsdsIcon
-            name={ODS_ICON_NAME.BIN}
-            size={ODS_ICON_SIZE.xs}
-            color={ODS_THEME_COLOR_INTENT.primary}
-          ></OsdsIcon>
-        </OsdsButton>
-      </>
+      <OdsButton
+        inline-block
+        size={ODS_BUTTON_SIZE.sm}
+        color={ODS_BUTTON_COLOR.primary}
+        variant={ODS_BUTTON_VARIANT.outline}
+        icon={ODS_ICON_NAME.trash}
+        label=""
+      ></OdsButton>
     ),
     label: '',
   },
@@ -86,7 +79,6 @@ export function AutoReplies() {
 
   return (
     <div data-testid="autoreplies" className="py-6 mt-8">
-      <Notifications />
       <Outlet />
       <Datagrid
         columns={columns.map((column) => ({
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ActionButtonDomain.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ActionButtonDomain.component.tsx
index 2fac4212b396..265e17a8cf0b 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ActionButtonDomain.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ActionButtonDomain.component.tsx
@@ -13,24 +13,32 @@ const ActionButtonDomain: React.FC<ActionButtonDomainProps> = ({
   domainItem,
 }) => {
   const { t } = useTranslation('domains');
+
   const hrefDeleteDomain = useGenerateUrl('./delete', 'href', {
     deleteDomainId: domainItem.id,
   });
+  const handleDeleteDomainClick = () => {
+    window.location.href = hrefDeleteDomain;
+  };
   const hrefEditDomain = useGenerateUrl('./edit', 'href', {
     editDomainId: domainItem.id,
   });
+
+  const handleEditDomainClick = () => {
+    window.location.href = hrefEditDomain;
+  };
   const { platformUrn } = usePlatform();
   const actionItems = [
     {
       id: 1,
-      href: hrefEditDomain,
+      onclick: handleEditDomainClick,
       label: t('zimbra_domains_tooltip_configure'),
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.domain.edit],
     },
     {
       id: 2,
-      href: hrefDeleteDomain,
+      onclick: handleDeleteDomainClick,
       label: t('zimbra_domains_tooltip_delete'),
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.domain.delete],
@@ -38,7 +46,8 @@ const ActionButtonDomain: React.FC<ActionButtonDomainProps> = ({
   ];
   return (
     <ActionMenu
-      disabled={domainItem.status !== ResourceStatus.READY}
+      id={domainItem.id}
+      isDisabled={domainItem.status !== ResourceStatus.READY}
       items={actionItems}
       isCompact
     />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/AddDomain.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/AddDomain.page.tsx
index b42c44648b96..22d6df85d0f4 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/AddDomain.page.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/AddDomain.page.tsx
@@ -5,46 +5,38 @@ import {
   Subtitle,
   useNotifications,
   Clipboard,
+  IconLinkAlignmentType,
 } from '@ovh-ux/manager-react-components';
 
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import {
-  OsdsFormField,
-  OsdsRadio,
-  OsdsRadioButton,
-  OsdsRadioGroup,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsSpinner,
-  OsdsText,
-  OsdsButton,
-  OsdsInput,
-  OsdsMessage,
-  OsdsCheckboxButton,
-  OsdsCheckbox,
+  OdsFormField,
+  OdsRadio,
+  OdsSelect,
+  OdsSpinner,
+  OdsText,
+  OdsButton,
+  OdsInput,
+  OdsMessage,
+  OdsCheckbox,
 } from '@ovhcloud/ods-components/react';
+
 import {
-  ODS_THEME_COLOR_HUE,
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import {
-  ODS_ICON_NAME,
   ODS_INPUT_TYPE,
-  ODS_MESSAGE_TYPE,
-  ODS_RADIO_BUTTON_SIZE,
-  ODS_SPINNER_MODE,
   ODS_SPINNER_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-  OdsCheckboxCheckedChangeEventDetail,
-  OdsInputValueChangeEvent,
-  OdsSelectValueChangeEventDetail,
-  OsdsCheckboxCustomEvent,
-  OsdsRadioGroupCustomEvent,
-  OsdsSelectCustomEvent,
+  ODS_TEXT_PRESET,
+  OdsCheckboxChangeEventDetail,
+  OdsInputChangeEvent,
+  OdsSelectChangeEventDetail,
+  OdsCheckboxCustomEvent,
+  OdsRadioCustomEvent,
+  OdsSelectCustomEvent,
+  ODS_SPINNER_COLOR,
+  ODS_MESSAGE_COLOR,
+  ODS_BUTTON_COLOR,
+  OdsRadioChangeEventDetail,
+  ODS_LINK_COLOR,
 } from '@ovhcloud/ods-components';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { ApiError } from '@ovh-ux/manager-core-api';
@@ -125,14 +117,14 @@ export default function AddDomain() {
   ];
 
   const handleOrganizationChange = (
-    event: OsdsSelectCustomEvent<OdsSelectValueChangeEventDetail>,
+    event: OdsSelectCustomEvent<OdsSelectChangeEventDetail>,
   ) => {
     setSelectedOrganization(event.detail.value);
   };
   const handleDomainOvhChange = (
-    event: OsdsSelectCustomEvent<OdsSelectValueChangeEventDetail>,
+    event: OdsSelectCustomEvent<OdsSelectChangeEventDetail>,
   ) => {
-    setSelectedDomainName(event.detail.value as string);
+    setSelectedDomainName(event.detail.value);
     if (FEATURE_FLAGS.DOMAIN_DNS_CONFIGURATION) {
       setSelectedRadioConfigurationType('');
     }
@@ -145,27 +137,17 @@ export default function AddDomain() {
     selectedRadioConfigurationType === 'expertConfiguration';
 
   const handleRadioDomainChange = useCallback(
-    (
-      event: OsdsRadioGroupCustomEvent<{
-        newValue?: string;
-        previousValue?: string;
-      }>,
-    ) => {
-      const type = `${event.detail.newValue}` || '';
-      setSelectedRadioDomain(type);
+    (event: OdsRadioCustomEvent<OdsRadioChangeEventDetail>) => {
+      const newValue = event.detail.value || '';
+      setSelectedRadioDomain(newValue);
       setSelectedDomainName('');
     },
     [setSelectedRadioDomain],
   );
 
   const handleRadioConfigurationTypeChange = useCallback(
-    (
-      event: OsdsRadioGroupCustomEvent<{
-        newValue?: string;
-        previousValue?: string;
-      }>,
-    ) => {
-      const type = `${event.detail.newValue}` || '';
+    (event: OdsRadioCustomEvent<OdsRadioChangeEventDetail>) => {
+      const type = `${event.detail.value}` || '';
       setSelectedRadioConfigurationType(type);
       setExpertConfigItemsState({});
     },
@@ -173,10 +155,10 @@ export default function AddDomain() {
   );
 
   const handleExpertConfigItemsChange = useCallback(
-    (event: OsdsCheckboxCustomEvent<OdsCheckboxCheckedChangeEventDetail>) => {
+    (event: OdsCheckboxCustomEvent<OdsCheckboxChangeEventDetail>) => {
       setExpertConfigItemsState((prev) => ({
         ...prev,
-        [event.target.name as string]: event.detail.checked,
+        [event.target.name]: event.detail.checked,
       }));
     },
     [expertConfigItemsState],
@@ -188,13 +170,9 @@ export default function AddDomain() {
     },
     onSuccess: (domain: DomainType) => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_TEXT_SIZE._100}
-          level={ODS_TEXT_LEVEL.body}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_domains_add_domain_success_message')}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
       if (domain.currentState.expectedDNSConfig.ownership.cname) {
@@ -203,15 +181,11 @@ export default function AddDomain() {
     },
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_TEXT_SIZE._100}
-          level={ODS_TEXT_LEVEL.body}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_domains_add_domain_error_message', {
             error: error?.response?.data?.message,
           })}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -233,7 +207,7 @@ export default function AddDomain() {
     addDomain(formData);
   };
 
-  const handleInputChange = (event: OdsInputValueChangeEvent) => {
+  const handleInputChange = (event: OdsInputChangeEvent) => {
     setSelectedDomainName(event.detail.value as string);
   };
 
@@ -243,8 +217,10 @@ export default function AddDomain() {
       data-testid="add-domain-page"
     >
       <Links
+        iconAlignment={IconLinkAlignmentType.left}
         type={LinkType.back}
         href={backLinkUrl}
+        color={ODS_LINK_COLOR.primary}
         label={t('zimbra_domains_add_domain_cta_back')}
       />
       {!cnameToCheck ? (
@@ -253,21 +229,17 @@ export default function AddDomain() {
             {t('zimbra_domains_add_domain_title_select')}
           </Subtitle>
 
-          <OsdsFormField className="w-full mt-8">
-            <div slot="label">
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_TEXT_SIZE._100}
-                level={ODS_TEXT_LEVEL.heading}
-              >
+          <OdsFormField className="w-full mt-8">
+            <label htmlFor="form-field-input" slot="label">
+              <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                 {t('zimbra_domains_add_domain_organization')}
-              </OsdsText>
-            </div>
-            <OsdsSelect
+              </OdsText>
+            </label>
+            <OdsSelect
               name="organization"
-              disabled={isLoading || organization?.id}
+              isDisabled={isLoading || organization?.id}
               value={selectedOrganization}
-              onOdsValueChange={(event) => handleOrganizationChange(event)}
+              onOdsChange={(event) => handleOrganizationChange(event)}
               className="mt-2 w-1/2"
               data-testid="select-organization"
             >
@@ -275,232 +247,175 @@ export default function AddDomain() {
                 {t('zimbra_domains_add_domain_organization_select')}
               </span>
               {data?.map((item) => (
-                <OsdsSelectOption key={item.id} value={item.id}>
+                <option key={item.id} value={item.id}>
                   {item.targetSpec?.name}
-                </OsdsSelectOption>
+                </option>
               ))}
-            </OsdsSelect>
+            </OdsSelect>
             {isLoading && (
               <div slot="helper">
-                <OsdsSpinner
-                  color={ODS_THEME_COLOR_INTENT.primary}
+                <OdsSpinner
+                  color={ODS_SPINNER_COLOR.primary}
                   size={ODS_SPINNER_SIZE.sm}
-                  inline
                 />
               </div>
             )}
-          </OsdsFormField>
+          </OdsFormField>
           {FEATURE_FLAGS.DOMAIN_NOT_OVH &&
             selectedOrganization &&
             !isLoadingDomain && (
-              <OsdsFormField className="w-full mt-8">
-                <OsdsRadioGroup
-                  value={selectedRadioDomain}
-                  data-testid="radio-group"
-                  onOdsValueChange={(value) => handleRadioDomainChange(value)}
+              <OdsFormField className="w-full mt-8">
+                <OdsRadio
+                  value="ovhDomain"
+                  name="radio-group"
+                  isChecked={selectedRadioDomain === 'ovhDomain'}
+                  onOdsChange={(value) => handleRadioDomainChange(value)}
                 >
-                  <OsdsRadio value="ovhDomain">
-                    <OsdsRadioButton
-                      color={ODS_THEME_COLOR_INTENT.primary}
-                      size={ODS_RADIO_BUTTON_SIZE.sm}
-                    >
-                      <span slot="end">
-                        <OsdsText
-                          color={ODS_THEME_COLOR_INTENT.text}
-                          size={ODS_TEXT_SIZE._400}
-                          level={ODS_TEXT_LEVEL.body}
-                        >
-                          {t('zimbra_domains_add_domain_select_title')}
-                        </OsdsText>
-                      </span>
-                    </OsdsRadioButton>
-                  </OsdsRadio>
-                  <OsdsRadio value="externalDomain">
-                    <OsdsRadioButton
-                      color={ODS_THEME_COLOR_INTENT.primary}
-                      size={ODS_RADIO_BUTTON_SIZE.sm}
-                    >
-                      <span slot="end">
-                        <OsdsText
-                          color={ODS_THEME_COLOR_INTENT.text}
-                          size={ODS_TEXT_SIZE._400}
-                          level={ODS_TEXT_LEVEL.body}
-                        >
-                          {t('zimbra_domains_add_domain_input_title')}
-                        </OsdsText>
-                      </span>
-                    </OsdsRadioButton>
-                  </OsdsRadio>
-                </OsdsRadioGroup>
+                  <span slot="end">
+                    <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+                      {t('zimbra_domains_add_domain_select_title')}
+                    </OdsText>
+                  </span>
+                </OdsRadio>
+
+                <OdsRadio
+                  value="externalDomain"
+                  name="radio-group"
+                  isChecked={selectedRadioDomain === 'externalDomain'}
+                  onOdsChange={(value) => handleRadioDomainChange(value)}
+                >
+                  <span slot="end">
+                    <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+                      {t('zimbra_domains_add_domain_input_title')}
+                    </OdsText>
+                  </span>
+                </OdsRadio>
+
                 {isLoadingDomain && (
                   <div slot="helper">
-                    <OsdsSpinner
-                      color={ODS_THEME_COLOR_INTENT.primary}
+                    <OdsSpinner
+                      color={ODS_SPINNER_COLOR.primary}
                       size={ODS_SPINNER_SIZE.sm}
-                      inline
                     />
                   </div>
                 )}
-              </OsdsFormField>
+              </OdsFormField>
             )}
           {selectedOrganization && selectedRadioDomain && (
-            <OsdsFormField className="w-full mt-8">
-              <div slot="label">
-                <OsdsText
-                  color={ODS_THEME_COLOR_INTENT.text}
-                  size={ODS_TEXT_SIZE._100}
-                  level={ODS_TEXT_LEVEL.heading}
-                >
-                  {t('zimbra_domains_add_domain_title')}
-                </OsdsText>
-              </div>
+            <OdsFormField className="w-full mt-8">
+              <label htmlFor="form-field-input" slot="label">
+                {t('zimbra_domains_add_domain_title')}
+              </label>
               {ovhDomain && domains ? (
-                <OsdsSelect
+                <OdsSelect
                   className="w-1/2"
                   value={selectedDomainName}
                   data-testid="select-domain"
-                  onOdsValueChange={(event) => handleDomainOvhChange(event)}
+                  onOdsChange={(
+                    event: OdsSelectCustomEvent<OdsSelectChangeEventDetail>,
+                  ) => handleDomainOvhChange(event)}
+                  name={''}
                 >
                   <span slot="placeholder">
-                    <OsdsText
-                      color={ODS_THEME_COLOR_INTENT.text}
-                      size={ODS_TEXT_SIZE._100}
-                      level={ODS_TEXT_LEVEL.body}
-                    >
+                    <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                       {t('zimbra_domains_add_domain_select')}
-                    </OsdsText>
+                    </OdsText>
                   </span>
                   {domains.map((domain: string) => (
-                    <OsdsSelectOption key={domain} value={domain}>
+                    <option key={domain} value={domain}>
                       {domain}
-                    </OsdsSelectOption>
+                    </option>
                   ))}
-                </OsdsSelect>
+                </OdsSelect>
               ) : (
                 <>
-                  <OsdsInput
+                  <OdsInput
                     type={ODS_INPUT_TYPE.text}
-                    onOdsValueChange={handleInputChange}
+                    onOdsChange={handleInputChange}
                     data-testid="input-external-domain"
                     placeholder={t('zimbra_domains_add_domain_input')}
                     className="w-1/2"
+                    name=""
                   />
-                  <OsdsMessage
+                  <OdsMessage
                     className="mt-6 w-3/5"
-                    color={ODS_THEME_COLOR_INTENT.primary}
-                    icon={ODS_ICON_NAME.INFO_CONCEPT}
-                    type={ODS_MESSAGE_TYPE.info}
+                    color={ODS_MESSAGE_COLOR.information}
                   >
-                    <OsdsText
-                      level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                      color={ODS_THEME_COLOR_INTENT.text}
-                      size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                    >
+                    <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                       {t(
                         'zimbra_domains_add_domain_warning_modification_domain',
                       )}
-                    </OsdsText>
-                  </OsdsMessage>
+                    </OdsText>
+                  </OdsMessage>
                 </>
               )}
-            </OsdsFormField>
+            </OdsFormField>
           )}
           {FEATURE_FLAGS.DOMAIN_DNS_CONFIGURATION &&
             selectedRadioDomain &&
             ovhDomain &&
             selectedDomainName && (
-              <OsdsFormField className="w-full mt-8 space-y-5">
-                <OsdsText
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  size={ODS_TEXT_SIZE._600}
-                  level={ODS_TEXT_LEVEL.body}
-                  hue={ODS_THEME_COLOR_HUE._800}
-                >
+              <OdsFormField className="w-full mt-8 space-y-5">
+                <label htmlFor="form-field-input" slot="label">
                   {t('zimbra_domains_add_domain_configuration_title')}
-                </OsdsText>
-                <OsdsText
-                  color={ODS_THEME_COLOR_INTENT.text}
-                  size={ODS_TEXT_SIZE._400}
-                  level={ODS_TEXT_LEVEL.body}
-                >
+                </label>
+                <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                   {t('zimbra_domains_add_domain_configuration_description')}
-                </OsdsText>
-                <OsdsRadioGroup
-                  className="space-y-5"
-                  value={selectedRadioConfigurationType}
-                  data-testid="radio-group-config"
-                  onOdsValueChange={(value) =>
-                    handleRadioConfigurationTypeChange(value)
-                  }
-                >
-                  {[DNS_CONFIG_TYPE.STANDARD, DNS_CONFIG_TYPE.EXPERT].map(
-                    (type) => (
-                      <OsdsRadio key={type} value={`${type}Configuration`}>
-                        <OsdsRadioButton
-                          color={ODS_THEME_COLOR_INTENT.primary}
-                          size={ODS_RADIO_BUTTON_SIZE.sm}
-                        >
-                          <div slot="end" className="flex flex-col">
-                            <OsdsText
-                              color={ODS_THEME_COLOR_INTENT.text}
-                              size={ODS_TEXT_SIZE._400}
-                              level={ODS_TEXT_LEVEL.body}
-                            >
-                              {t(
-                                `zimbra_domains_add_domain_configuration_choice_${type}`,
-                              )}
-                            </OsdsText>
-                            <OsdsText
-                              color={ODS_THEME_COLOR_INTENT.text}
-                              size={ODS_TEXT_SIZE._100}
-                              level={ODS_TEXT_LEVEL.body}
-                            >
-                              {t(
-                                `zimbra_domains_add_domain_configuration_choice_${type}_info`,
-                              )}
-                            </OsdsText>
-                          </div>
-                        </OsdsRadioButton>
-                      </OsdsRadio>
-                    ),
-                  )}
-                </OsdsRadioGroup>
-              </OsdsFormField>
+                </OdsText>
+                {[DNS_CONFIG_TYPE.STANDARD, DNS_CONFIG_TYPE.EXPERT].map(
+                  (type) => (
+                    <OdsRadio
+                      className="space-y-5"
+                      key={type}
+                      name={type}
+                      // value={selectedRadioConfigurationType}
+                      value={`${type}Configuration`}
+                      onOdsChange={(value) =>
+                        handleRadioConfigurationTypeChange(value)
+                      }
+                      data-testid="radio-group-config"
+                    >
+                      <div slot="end" className="flex flex-col">
+                        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+                          {t(
+                            `zimbra_domains_add_domain_configuration_choice_${type}`,
+                          )}
+                        </OdsText>
+                        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+                          {t(
+                            `zimbra_domains_add_domain_configuration_choice_${type}_info`,
+                          )}
+                        </OdsText>
+                      </div>
+                    </OdsRadio>
+                  ),
+                )}
+              </OdsFormField>
             )}
           {isExpertConfigurationSelected && (
-            <OsdsFormField className="w-full mt-8 space-y-5">
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_TEXT_SIZE._400}
-                level={ODS_TEXT_LEVEL.body}
-              >
+            <OdsFormField className="w-full mt-8 space-y-5">
+              <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                 <Trans
                   t={t}
                   i18nKey="zimbra_domains_add_domain_configuration_expert_title"
                   values={{ domain: selectedDomainName }}
                 />
-              </OsdsText>
+              </OdsText>
               {expertConfigItems.map(({ name, label }) => (
-                <OsdsCheckbox
+                <OdsCheckbox
                   key={name}
-                  checked={expertConfigItemsState[name]}
+                  isChecked={expertConfigItemsState[name]}
                   name={name}
-                  onOdsCheckedChange={handleExpertConfigItemsChange}
+                  onOdsChange={handleExpertConfigItemsChange}
                 >
-                  <OsdsCheckboxButton color={ODS_THEME_COLOR_INTENT.primary}>
-                    <span slot="end">
-                      <OsdsText
-                        color={ODS_THEME_COLOR_INTENT.text}
-                        size={ODS_TEXT_SIZE._400}
-                        level={ODS_TEXT_LEVEL.body}
-                      >
-                        {label}
-                      </OsdsText>
-                    </span>
-                  </OsdsCheckboxButton>
-                </OsdsCheckbox>
+                  <span slot="end">
+                    <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+                      {label}
+                    </OdsText>
+                  </span>
+                </OdsCheckbox>
               ))}
-            </OsdsFormField>
+            </OdsFormField>
           )}
         </>
       ) : (
@@ -508,32 +423,15 @@ export default function AddDomain() {
           <Subtitle>
             {t('zimbra_domains_add_domain_configuration_cname_title')}
           </Subtitle>
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_TEXT_SIZE._100}
-            level={ODS_TEXT_LEVEL.body}
-          >
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
             {t('zimbra_domains_add_domain_configuration_cname_description')}
-          </OsdsText>
+          </OdsText>
           <Clipboard value={cnameToCheck} />
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_TEXT_SIZE._100}
-            level={ODS_TEXT_LEVEL.body}
-          >
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
             {t('zimbra_domains_add_domain_configuration_info')}
-          </OsdsText>
-          <OsdsMessage
-            className="mt-6"
-            color={ODS_THEME_COLOR_INTENT.primary}
-            icon={ODS_ICON_NAME.INFO_CONCEPT}
-            type={ODS_MESSAGE_TYPE.info}
-          >
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            >
+          </OdsText>
+          <OdsMessage className="mt-6" color={ODS_MESSAGE_COLOR.information}>
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
               {t('zimbra_domains_add_domain_configuration_part_1')}
               {t('zimbra_domains_add_domain_configuration_part_2')}
               <span className="block mt-2">
@@ -544,39 +442,32 @@ export default function AddDomain() {
                   )}
                 />
               </span>
-            </OsdsText>
-          </OsdsMessage>
-          <OsdsButton color={ODS_THEME_COLOR_INTENT.primary} onClick={onClose}>
-            {t('zimbra_domains_add_domain_cta_access_domains')}
-          </OsdsButton>
+            </OdsText>
+          </OdsMessage>
+          <OdsButton
+            color={ODS_BUTTON_COLOR.primary}
+            onClick={onClose}
+            label={t('zimbra_domains_add_domain_cta_access_domains')}
+          ></OdsButton>
         </>
       )}
       {!cnameToCheck && (
-        <OsdsFormField>
-          <OsdsButton
+        <OdsFormField>
+          <OdsButton
             data-testid="add-domain-submit-btn"
-            color={ODS_THEME_COLOR_INTENT.primary}
+            color={ODS_BUTTON_COLOR.primary}
             onClick={handleAddDomainClick}
-            inline
             className="mt-8"
             {...(!selectedOrganization ||
             !selectedDomainName ||
             (!selectedRadioConfigurationType && ovhDomain) ||
             isSending
-              ? { disabled: true }
+              ? { isDisabled: true }
               : {})}
-          >
-            {isSending && (
-              <OsdsSpinner
-                inline
-                contrasted
-                mode={ODS_SPINNER_MODE.indeterminate}
-                size={ODS_SPINNER_SIZE.sm}
-              />
-            )}
-            {t('zimbra_domains_add_domain_cta_confirm')}
-          </OsdsButton>
-        </OsdsFormField>
+            isLoading={isSending}
+            label={t('zimbra_domains_add_domain_cta_confirm')}
+          ></OdsButton>
+        </OdsFormField>
       )}
     </div>
   );
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx
index e27657df3818..c355e5e358c2 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/Domains.tsx
@@ -1,29 +1,17 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { OdsText, OdsTooltip, OdsButton } from '@ovhcloud/ods-components/react';
+
 import {
-  OsdsButton,
-  OsdsIcon,
-  OsdsText,
-  OsdsTooltip,
-  OsdsTooltipContent,
-} from '@ovhcloud/ods-components/react';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import {
   Datagrid,
   DatagridColumn,
   ManagerButton,
-  Notifications,
 } from '@ovh-ux/manager-react-components';
 import { Outlet } from 'react-router-dom';
 import {
@@ -60,13 +48,7 @@ const columns: DatagridColumn<DomainsItem>[] = [
   {
     id: 'domains',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.name}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.name}</OdsText>
     ),
     label: 'zimbra_domains_datagrid_domain_label',
   },
@@ -80,13 +62,7 @@ const columns: DatagridColumn<DomainsItem>[] = [
   {
     id: 'account',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.account}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.account}</OdsText>
     ),
     label: 'zimbra_domains_datagrid_account_number',
   },
@@ -98,17 +74,17 @@ const columns: DatagridColumn<DomainsItem>[] = [
           <DiagnosticBadge
             diagType={DnsRecordType.MX}
             domainId={item.id}
-            status="error"
+            status="critical"
           />
           <DiagnosticBadge
             diagType={DnsRecordType.SRV}
             domainId={item.id}
-            status="error"
+            status="critical"
           />
           <DiagnosticBadge
             diagType={DnsRecordType.SPF}
             domainId={item.id}
-            status="error"
+            status="critical"
           />
           <DiagnosticBadge
             diagType={DnsRecordType.DKIM}
@@ -150,6 +126,10 @@ export default function Domains() {
 
   const hrefAddDomain = useGenerateUrl('./add', 'href');
 
+  const handleAddDomainClick = () => {
+    window.location.href = hrefAddDomain;
+  };
+
   const items: DomainsItem[] =
     data?.map((item: DomainType) => ({
       name: item.currentState.name,
@@ -166,61 +146,39 @@ export default function Domains() {
 
   return (
     <div className="py-6 mt-8">
-      <Notifications />
       <Outlet />
       {platformUrn && !isOverridedPage && (
         <>
           <div className="flex items-center justify-between">
             {(data?.length > 0 || dataOrganizations?.length > 0) && (
               <ManagerButton
-                color={ODS_THEME_COLOR_INTENT.primary}
-                inline
+                id="add-domain-btn"
+                color={ODS_BUTTON_COLOR.primary}
                 size={ODS_BUTTON_SIZE.sm}
-                href={hrefAddDomain}
+                onClick={handleAddDomainClick}
                 urn={platformUrn}
                 iamActions={[IAM_ACTIONS.domain.create]}
                 data-testid="add-domain-btn"
                 className="mb-6"
-              >
-                <span slot="start">
-                  <OsdsIcon
-                    name={ODS_ICON_NAME.PLUS}
-                    size={ODS_ICON_SIZE.sm}
-                    color={ODS_THEME_COLOR_INTENT.primary}
-                    contrasted
-                  ></OsdsIcon>
-                </span>
-                <span slot="end">{t('zimbra_domains_add_domain_title')}</span>
-              </ManagerButton>
+                icon={ODS_ICON_NAME.plus}
+                label={t('zimbra_domains_add_domain_title')}
+              />
             )}
             {dataOrganizations?.length === 0 && (
-              <OsdsTooltip className="mb-6">
-                <OsdsButton
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  inline
+              <OdsTooltip className="mb-6" triggerId="tooltip-trigger">
+                <OdsButton
+                  color={ODS_BUTTON_COLOR.primary}
                   size={ODS_BUTTON_SIZE.sm}
-                  disabled
-                >
-                  <span slot="start">
-                    <OsdsIcon
-                      name={ODS_ICON_NAME.PLUS}
-                      size={ODS_ICON_SIZE.sm}
-                      color={ODS_THEME_COLOR_INTENT.primary}
-                      contrasted
-                    ></OsdsIcon>
-                  </span>
-                  <span slot="end">{t('zimbra_domains_add_domain_title')}</span>
-                </OsdsButton>
-                <OsdsTooltipContent slot="tooltip-content">
-                  <OsdsText
-                    level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                    color={ODS_THEME_COLOR_INTENT.text}
-                    size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                  >
+                  isDisabled
+                  icon={ODS_ICON_NAME.plus}
+                  label={t('zimbra_domains_add_domain_title')}
+                ></OdsButton>
+                <div id="tooltip-trigger">
+                  <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                     {t('zimbra_domains_tooltip_need_organization')}
-                  </OsdsText>
-                </OsdsTooltipContent>
-              </OsdsTooltip>
+                  </OdsText>
+                </div>
+              </OdsTooltip>
             )}
           </div>
           {isLoading ? (
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalDeleteDomain.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalDeleteDomain.component.tsx
index 22f055e55abd..40ffd2f1e8b3 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalDeleteDomain.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalDeleteDomain.component.tsx
@@ -2,13 +2,12 @@ import React from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
-import { OsdsMessage, OsdsText } from '@ovhcloud/ods-components/react';
+  ODS_BUTTON_COLOR,
+  ODS_BUTTON_VARIANT,
+  ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
+import { OdsMessage, OdsText } from '@ovhcloud/ods-components/react';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { ApiError } from '@ovh-ux/manager-core-api';
 import { useMutation } from '@tanstack/react-query';
@@ -43,29 +42,19 @@ export default function ModalDeleteDomain() {
     },
     onSuccess: () => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_domain_delete_success_message')}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_domain_delete_error_message', {
             error: error?.response?.data?.message,
           })}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -79,58 +68,40 @@ export default function ModalDeleteDomain() {
   });
 
   const handleDeleteClick = () => {
-    deleteDomain(deleteDomainId as string);
+    deleteDomain(deleteDomainId);
   };
 
   return (
     <Modal
       title={t('zimbra_domain_delete_modal_title')}
-      color={ODS_THEME_COLOR_INTENT.warning}
+      color={ODS_MODAL_COLOR.warning}
       onDismissible={onClose}
-      dismissible={true}
+      isDismissible={true}
       isLoading={isLoading}
+      isOpen
       primaryButton={{
         label: t('zimbra_domain_delete'),
+        variant: ODS_BUTTON_VARIANT.default,
         action: handleDeleteClick,
         disabled: accounts?.length > 0 || isSending || !deleteDomainId,
         testid: 'delete-btn',
       }}
     >
       <>
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.span} className="mb-4">
           {t('zimbra_domain_delete_modal_content')}
-        </OsdsText>
+        </OdsText>
         {accounts?.length > 0 && (
-          <OsdsMessage
-            color={ODS_THEME_COLOR_INTENT.error}
-            icon={ODS_ICON_NAME.WARNING_CIRCLE}
-            className="mt-4"
-            data-testid="banner-message"
-          >
+          <OdsMessage className="mt-4" data-testid="banner-message">
             <div className="flex flex-col text-left ml-4">
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-                hue={ODS_THEME_COLOR_HUE._500}
-              >
+              <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                 {t('zimbra_domain_delete_modal_message_disabled_part1')}
-              </OsdsText>
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                hue={ODS_THEME_COLOR_HUE._500}
-              >
+              </OdsText>
+              <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                 {t('zimbra_domain_delete_modal_message_disabled_part2')}
-              </OsdsText>
+              </OdsText>
             </div>
-          </OsdsMessage>
+          </OdsMessage>
         )}
       </>
     </Modal>
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalDiagnosticDnsRecord.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalDiagnosticDnsRecord.component.tsx
index b94159018546..a245eebf7fa3 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalDiagnosticDnsRecord.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalDiagnosticDnsRecord.component.tsx
@@ -1,13 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import { ODS_MODAL_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { useGenerateUrl, useDomain } from '@/hooks';
 import Modal from '@/components/Modals/Modal';
 import { DomainType } from '@/api/domain';
@@ -149,9 +144,10 @@ export default function ModalDiagnosticDnsRecord(
   return (
     <Modal
       title={t(`zimbra_domain_modal_diagnostic_${dnsRecordTypeKey}_title`)}
-      color={ODS_THEME_COLOR_INTENT.info}
+      color={ODS_MODAL_COLOR.information}
       onDismissible={onClose}
-      dismissible={true}
+      isDismissible={true}
+      isOpen
       isLoading={isLoading}
       primaryButton={getPrimaryButtonProps()}
       secondaryButton={{
@@ -169,13 +165,10 @@ export default function ModalDiagnosticDnsRecord(
       {domain && (
         <div className="flex flex-col w-full mt-6">
           {getContentHeaderKeys(dnsRecordTypeKey, isOvhDomain).map((key) => (
-            <OsdsText
+            <OdsText
               className="mt-2"
               key={key}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              hue={ODS_THEME_COLOR_HUE._500}
+              preset={ODS_TEXT_PRESET.paragraph}
             >
               <Trans
                 t={t}
@@ -190,64 +183,49 @@ export default function ModalDiagnosticDnsRecord(
                   ),
                 }}
               />
-            </OsdsText>
+            </OdsText>
           ))}
           {dnsRecordType === DnsRecordType.SRV && (
             <div className="flex gap-4 w-full mt-4">
-              <OsdsText
+              <OdsText
                 className="w-1/3 flex justify-end"
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                hue={ODS_THEME_COLOR_HUE._500}
+                preset={ODS_TEXT_PRESET.paragraph}
               >
                 <strong>
                   {t(
                     `zimbra_domain_modal_diagnostic_${dnsRecordTypeKey}_domain`,
                   )}
                 </strong>
-              </OsdsText>
-              <OsdsText
-                className="w-2/3"
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                hue={ODS_THEME_COLOR_HUE._500}
-              >
+              </OdsText>
+              <OdsText className="w-2/3" preset={ODS_TEXT_PRESET.paragraph}>
                 {domain?.currentState?.name}
-              </OsdsText>
+              </OdsText>
             </div>
           )}
           {!isOvhDomain && (
             <div className="flex gap-4 w-full mt-4">
-              <OsdsText
+              <OdsText
                 className="w-1/3 flex justify-end"
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                hue={ODS_THEME_COLOR_HUE._500}
+                preset={ODS_TEXT_PRESET.paragraph}
               >
                 <strong>
                   {t(`zimbra_domain_modal_diagnostic_fields`)} {dnsRecordType}
                 </strong>
-              </OsdsText>
+              </OdsText>
               <div className="flex flex-col w-2/3">
                 {mxFields && dnsRecordType === DnsRecordType.MX && (
                   <div className="flex flex-col">
                     {mxFields.map(({ priority, target }) => (
-                      <OsdsText
+                      <OdsText
                         key={`${priority}-${target}`}
-                        color={ODS_THEME_COLOR_INTENT.text}
-                        size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-                        level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                        hue={ODS_THEME_COLOR_HUE._500}
+                        preset={ODS_TEXT_PRESET.paragraph}
                       >
                         {t(`zimbra_domain_modal_diagnostic_field_priority`)}
                         <strong> {priority}</strong>
                         {' ; '}
                         {t(`zimbra_domain_modal_diagnostic_field_target`)}
                         <strong> {target}</strong>
-                      </OsdsText>
+                      </OdsText>
                     ))}
                   </div>
                 )}
@@ -259,16 +237,10 @@ export default function ModalDiagnosticDnsRecord(
                         ? srvFields
                         : spfFields,
                     ).map(([key, value]) => (
-                      <OsdsText
-                        key={key}
-                        color={ODS_THEME_COLOR_INTENT.text}
-                        size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-                        level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                        hue={ODS_THEME_COLOR_HUE._500}
-                      >
+                      <OdsText key={key} preset={ODS_TEXT_PRESET.paragraph}>
                         {t(`zimbra_domain_modal_diagnostic_field_${key}`)}
                         <strong> {value}</strong>
-                      </OsdsText>
+                      </OdsText>
                     ))}
                   </div>
                 )}
@@ -276,18 +248,12 @@ export default function ModalDiagnosticDnsRecord(
             </div>
           )}
           {!isOvhDomain && dnsRecordType === DnsRecordType.MX ? (
-            <OsdsText
-              className="mt-4"
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              hue={ODS_THEME_COLOR_HUE._500}
-            >
+            <OdsText className="mt-4" preset={ODS_TEXT_PRESET.paragraph}>
               <Trans
                 t={t}
                 i18nKey={`zimbra_domain_modal_diagnostic_${dnsRecordTypeKey}_content_footer`}
               />
-            </OsdsText>
+            </OdsText>
           ) : null}
         </div>
       )}
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalEditDomain.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalEditDomain.component.tsx
index 9b99a2bc7611..474fa3495264 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalEditDomain.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Domains/ModalEditDomain.component.tsx
@@ -1,19 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import { ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
+  ODS_BUTTON_VARIANT,
+  ODS_INPUT_TYPE,
+  ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
 import {
-  OsdsFormField,
-  OsdsInput,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsText,
+  OdsFormField,
+  OdsInput,
+  OdsSelect,
+  OdsText,
 } from '@ovhcloud/ods-components/react';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { ApiError } from '@ovh-ux/manager-core-api';
@@ -61,29 +60,19 @@ export default function ModalEditDomain() {
       }),
     onSuccess: () => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_domain_edit_success_message')}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_domain_edit_error_message', {
             error: error?.response?.data?.message,
           })}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -105,13 +94,15 @@ export default function ModalEditDomain() {
   return (
     <Modal
       title={t('zimbra_domain_edit_modal_title')}
-      color={ODS_THEME_COLOR_INTENT.info}
+      color={ODS_MODAL_COLOR.information}
       onDismissible={onClose}
-      dismissible={true}
+      isOpen
+      isDismissible={true}
       isLoading={isLoadingDomain || isLoadingOrganizations}
       primaryButton={{
         label: t('zimbra_domain_edit_confirm'),
         action: handleEditDomain,
+        variant: ODS_BUTTON_VARIANT.default,
         disabled:
           isSending ||
           detailDomain?.currentState?.organizationId === selectedOrganization,
@@ -125,48 +116,33 @@ export default function ModalEditDomain() {
       }}
     >
       <>
-        <OsdsFormField className="mt-5">
-          <div slot="label">
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            >
-              {t('zimbra_domain_edit_domain_label')}
-            </OsdsText>
-          </div>
-          <OsdsInput
+        <OdsFormField className="mt-5">
+          <label slot="label">{t('zimbra_domain_edit_domain_label')}</label>
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
-            disabled={true}
+            isDisabled={true}
+            name={detailDomain?.currentState?.name}
             value={detailDomain?.currentState?.name}
             data-testid="input-domain"
-          ></OsdsInput>
-        </OsdsFormField>
-        <OsdsFormField className="mt-5">
-          <div slot="label">
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            >
-              {t('zimbra_domain_edit_organization_label')}
-            </OsdsText>
-          </div>
-          <OsdsSelect
+          ></OdsInput>
+        </OdsFormField>
+        <OdsFormField className="mt-5">
+          <label slot="label">
+            {t('zimbra_domain_edit_organization_label')}
+          </label>
+          <OdsSelect
             name="organization"
             value={selectedOrganization}
-            onOdsValueChange={(e) =>
-              setSelectedOrganization(e.detail.value as string)
-            }
+            onOdsChange={(e) => setSelectedOrganization(e.detail.value)}
             data-testid="select-organization"
           >
             {organizationsList?.map((organization) => (
-              <OsdsSelectOption value={organization.id} key={organization.id}>
+              <option key={organization.id} value={organization.id}>
                 {organization.currentState.label}
-              </OsdsSelectOption>
+              </option>
             ))}
-          </OsdsSelect>
-        </OsdsFormField>
+          </OdsSelect>
+        </OdsFormField>
       </>
     </Modal>
   );
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AccountTabsPanel.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AccountTabsPanel.component.tsx
index b16e8d036848..03c782bf0ebc 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AccountTabsPanel.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AccountTabsPanel.component.tsx
@@ -1,10 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
-import {
-  OsdsTabs,
-  OsdsTabBar,
-  OsdsTabBarItem,
-} from '@ovhcloud/ods-components/react';
+import { OdsTabs, OdsTab } from '@ovhcloud/ods-components/react';
 
 export type TabItemProps = {
   name: string;
@@ -24,39 +20,45 @@ export const AccountTabsPanel: React.FC<TabsProps> = ({ tabs }) => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (!location.pathname) {
-      setActivePanel(tabs[0].name);
-      navigate(tabs[0].to);
-    } else {
-      const activeTab = tabs.find(
-        (tab) =>
-          tab.to === location.pathname ||
-          tab.pathMatchers?.some((pathMatcher) =>
-            pathMatcher.test(location.pathname),
-          ),
-      );
-      if (activeTab) {
-        setActivePanel(activeTab.name);
+    if (tabs.length > 0) {
+      if (!location.pathname) {
+        setActivePanel(tabs[0].name);
+        navigate(tabs[0].to);
+      } else {
+        const activeTab = tabs.find(
+          (tab) =>
+            tab.to === location.pathname ||
+            tab.pathMatchers?.some((pathMatcher) =>
+              pathMatcher.test(location.pathname),
+            ),
+        );
+        if (activeTab) {
+          setActivePanel(activeTab.name);
+        }
       }
     }
-  }, [location.pathname]);
+  }, [location.pathname, tabs]);
 
   return (
-    <OsdsTabBar slot="top">
-      <OsdsTabs panel={activePanel}>
-        {tabs.map(
-          (tab: TabItemProps) =>
-            !tab.hidden && (
-              <NavLink
-                key={`osds-tab-bar-item-${tab.name}`}
-                to={tab.to}
-                className="no-underline"
+    <OdsTabs>
+      {tabs.map(
+        (tab: TabItemProps) =>
+          !tab.hidden && (
+            <NavLink
+              key={`osds-tab-bar-item-${tab.name}`}
+              to={tab.to}
+              className="no-underline"
+            >
+              <OdsTab
+                id={tab.name}
+                role="tab"
+                isSelected={activePanel === tab.name}
               >
-                <OsdsTabBarItem panel={tab.name}>{tab.title}</OsdsTabBarItem>
-              </NavLink>
-            ),
-        )}
-      </OsdsTabs>
-    </OsdsTabBar>
+                {tab.title}
+              </OdsTab>
+            </NavLink>
+          ),
+      )}
+    </OdsTabs>
   );
 };
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ActionButtonAlias.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ActionButtonAlias.component.tsx
index c1f7d2b4b802..8961387dc47d 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ActionButtonAlias.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ActionButtonAlias.component.tsx
@@ -23,10 +23,14 @@ const ActionButtonAlias: React.FC<ActionButtonAliasAccountProps> = ({
     deleteAliasId: aliasItem.id,
     editEmailAccountId,
   });
+
+  const handleDeleteAliasClick = () => {
+    window.location.href = hrefDeleteAlias;
+  };
   const actionItems = [
     {
       id: 1,
-      href: hrefDeleteAlias,
+      onClick: handleDeleteAliasClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.alias.delete],
       label: t('zimbra_account_alias_datagrid_tooltip_delete'),
@@ -34,7 +38,8 @@ const ActionButtonAlias: React.FC<ActionButtonAliasAccountProps> = ({
   ];
   return (
     <ActionMenu
-      disabled={aliasItem.status !== ResourceStatus.READY}
+      id={aliasItem.id}
+      isDisabled={aliasItem.status !== ResourceStatus.READY}
       items={actionItems}
       isCompact
     />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ActionButtonEmail.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ActionButtonEmail.component.tsx
index e1c640661c58..c6d88a09f297 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ActionButtonEmail.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ActionButtonEmail.component.tsx
@@ -19,21 +19,28 @@ const ActionButtonEmail: React.FC<ActionButtonEmailAccountProps> = ({
   const hrefEditEmailAccount = useGenerateUrl('./settings', 'href', {
     editEmailAccountId: emailsItem.id,
   });
+  const handleEditEmailClick = () => {
+    window.location.href = hrefEditEmailAccount;
+  };
 
   const hrefDeleteEmailAccount = useGenerateUrl('./delete', 'href', {
     deleteEmailAccountId: emailsItem.id,
   });
+
+  const handleDeleteEmailClick = () => {
+    window.location.href = hrefDeleteEmailAccount;
+  };
   const actionItems = [
     {
       id: 1,
-      href: hrefEditEmailAccount,
+      onClick: handleEditEmailClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.account.edit],
       label: t('zimbra_account_datagrid_tooltip_modification'),
     },
     {
       id: 2,
-      href: hrefDeleteEmailAccount,
+      onClick: handleDeleteEmailClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.account.delete],
       label: t('zimbra_account_datagrid_tooltip_delete'),
@@ -41,7 +48,8 @@ const ActionButtonEmail: React.FC<ActionButtonEmailAccountProps> = ({
   ];
   return (
     <ActionMenu
-      disabled={emailsItem.status !== ResourceStatus.READY}
+      id={emailsItem.id}
+      isDisabled={emailsItem.status !== ResourceStatus.READY}
       items={actionItems}
       isCompact
     />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AddAndEditEmailAccount.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AddAndEditEmailAccount.page.tsx
index e46acebd6755..c87512709459 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AddAndEditEmailAccount.page.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/AddAndEditEmailAccount.page.tsx
@@ -1,5 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { LinkType, Links, Subtitle } from '@ovh-ux/manager-react-components';
+import {
+  IconLinkAlignmentType,
+  LinkType,
+  Links,
+  Subtitle,
+} from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { useDomains, useGenerateUrl, usePlatform, useAccount } from '@/hooks';
@@ -115,6 +120,7 @@ export default function AddAndEditAccount() {
             data-testid="page-title"
           >
             <Links
+              iconAlignment={IconLinkAlignmentType.left}
               type={LinkType.back}
               onClickReturn={goBack}
               label={t('zimbra_account_add_cta_back')}
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountSettings.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountSettings.page.tsx
index a1e8a42e298e..9f94838e3c2d 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountSettings.page.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountSettings.page.tsx
@@ -3,28 +3,21 @@ import { useNotifications } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
-  OsdsButton,
-  OsdsFormField,
-  OsdsInput,
-  OsdsMessage,
-  OsdsPassword,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsText,
-  OsdsTextarea,
+  OdsButton,
+  OdsFormField,
+  OdsInput,
+  OdsMessage,
+  OdsPassword,
+  OdsSelect,
+  OdsText,
+  OdsTextarea,
 } from '@ovhcloud/ods-components/react';
 import {
-  ODS_THEME_COLOR_HUE,
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_VARIANT,
-  ODS_INPUT_SIZE,
   ODS_INPUT_TYPE,
-  ODS_MESSAGE_TYPE,
-  ODS_TEXTAREA_SIZE,
+  ODS_MESSAGE_COLOR,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import { ApiError } from '@ovh-ux/manager-core-api';
 import { useMutation } from '@tanstack/react-query';
@@ -157,29 +150,19 @@ export default function EmailAccountSettings({
     },
     onSuccess: () => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t(
             editEmailAccountId
               ? 'zimbra_account_edit_success_message'
               : 'zimbra_account_add_success_message',
           )}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t(
             editEmailAccountId
               ? 'zimbra_account_edit_error_message'
@@ -188,7 +171,7 @@ export default function EmailAccountSettings({
               error: error?.response?.data?.message,
             },
           )}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -201,6 +184,7 @@ export default function EmailAccountSettings({
   });
 
   const handleSaveClick = () => {
+    console.log('toto');
     const {
       account: { value: account },
       domain: { value: domain },
@@ -225,308 +209,222 @@ export default function EmailAccountSettings({
 
   return (
     <div className="w-full md:w-3/4 space-y-5">
-      <OsdsText
-        className="mt-5"
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-        level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-      >
+      <OdsText preset={ODS_TEXT_PRESET.paragraph} className="block">
         {t('zimbra_account_add_input_mandatory')}
-      </OsdsText>
+      </OdsText>
 
-      <OsdsFormField>
-        <div slot="label">
-          <OsdsText
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          >
-            {t('zimbra_account_add_input_email_label')} *
-          </OsdsText>
-        </div>
+      <OdsFormField>
+        <label slot="label">
+          {t('zimbra_account_add_input_email_label')} *
+        </label>
         <div className="flex">
-          <OsdsInput
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
             name="account"
             placeholder={t('zimbra_account_add_input_email_placeholder')}
-            color={
-              form.account.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            size={ODS_INPUT_SIZE.md}
+            hasError={form.account.hasError}
             value={form.account.value}
-            onOdsInputBlur={({ target: { name, value } }) =>
+            onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) => {
-              handleFormChange(name, value);
+            onOdsChange={({ detail: { name, value } }) => {
+              handleFormChange(name, String(value));
             }}
-            required
+            isRequired
             className="rounded-r-none w-1/2"
             data-testid="input-account"
-          ></OsdsInput>
-          <OsdsInput
+          ></OdsInput>
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
-            color={ODS_THEME_COLOR_INTENT.default}
-            size={ODS_INPUT_SIZE.md}
+            name={'@'}
             value={'@'}
-            readOnly={true}
-            disabled={true}
+            isReadonly={true}
+            isDisabled={true}
             className="w-10 rounded-none"
-          ></OsdsInput>
-          <OsdsSelect
+          ></OdsInput>
+          <OdsSelect
             name="domain"
             value={form.domain.value}
             className="rounded-l-none w-1/2"
-            color={
-              form.domain.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            required
-            onOdsValueChange={(e) =>
-              handleDomainChange(e.detail.value as string)
-            }
+            hasError={form.domain.hasError}
+            isRequired
+            onOdsChange={(e) => handleDomainChange(e.detail.value)}
             data-testid="select-domain"
           >
             <span slot="placeholder">
               {t('zimbra_account_add_select_domain_placeholder')}
             </span>
             {domainList?.map(({ currentState: domain }) => (
-              <OsdsSelectOption key={domain.name} value={domain.name}>
+              <option key={domain.name} value={domain.name}>
                 {domain.name}
-              </OsdsSelectOption>
+              </option>
             ))}
-          </OsdsSelect>
+          </OdsSelect>
         </div>
-        <div slot="helper">
-          <OsdsText
-            color={
-              form.account.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-            className="flex flex-col"
-          >
-            <span>{t('zimbra_account_add_input_email_helper')}</span>
-            {[1, 2, 3].map((elm) => (
-              <span key={elm}>
-                - {t(`zimbra_account_add_input_email_helper_rule_${elm}`)}
-              </span>
-            ))}
-          </OsdsText>
-        </div>
-      </OsdsFormField>
-      {selectedDomainOrganization && (
-        <OsdsMessage
-          color={ODS_THEME_COLOR_INTENT.primary}
-          type={ODS_MESSAGE_TYPE.info}
+        <OdsText
+          slot="helper"
+          preset={ODS_TEXT_PRESET.paragraph}
+          className="flex flex-col"
         >
-          <OsdsText
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          >
+          <span className="block">
+            {t('zimbra_account_add_input_email_helper')}
+          </span>
+          {[1, 2, 3].map((elm) => (
+            <span key={elm} className="block">
+              - {t(`zimbra_account_add_input_email_helper_rule_${elm}`)}
+            </span>
+          ))}
+        </OdsText>
+      </OdsFormField>
+      {selectedDomainOrganization && (
+        <OdsMessage color={ODS_MESSAGE_COLOR.information}>
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
             {t('zimbra_account_add_message_organization', {
               organizationLabel: selectedDomainOrganization,
             })}
-          </OsdsText>
-        </OsdsMessage>
+          </OdsText>
+        </OdsMessage>
       )}
       <div className="flex">
-        <OsdsFormField className="w-full md:w-1/2 pr-6">
-          <div slot="label">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            >
-              {t('zimbra_account_add_input_lastName_label')}
-            </OsdsText>
-          </div>
-          <OsdsInput
+        <OdsFormField className="w-full md:w-1/2 pr-6">
+          <label slot="label">
+            {t('zimbra_account_add_input_lastName_label')}
+          </label>
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
             name="lastName"
             placeholder={t('zimbra_account_add_input_lastName_placeholder')}
-            color={ODS_THEME_COLOR_INTENT.default}
-            size={ODS_INPUT_SIZE.md}
             value={form.lastName.value}
-            onOdsInputBlur={({ target: { name, value } }) =>
+            onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) => {
-              handleFormChange(name, value);
+            onOdsChange={({ detail: { name, value } }) => {
+              handleFormChange(name, String(value));
             }}
-          ></OsdsInput>
-        </OsdsFormField>
+          ></OdsInput>
+        </OdsFormField>
 
-        <OsdsFormField className="w-full md:w-1/2 pl-6">
-          <div slot="label">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            >
-              {t('zimbra_account_add_input_firstName_label')}
-            </OsdsText>
-          </div>
-          <OsdsInput
+        <OdsFormField className="w-full md:w-1/2 pl-6">
+          <label slot="label">
+            {t('zimbra_account_add_input_firstName_label')}
+          </label>
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
             name="firstName"
             placeholder={t('zimbra_account_add_input_firstName_placeholder')}
-            color={ODS_THEME_COLOR_INTENT.default}
-            size={ODS_INPUT_SIZE.md}
             value={form.firstName.value}
-            onOdsInputBlur={({ target: { name, value } }) =>
+            onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) => {
-              handleFormChange(name, value);
+            onOdsChange={({ detail: { name, value } }) => {
+              handleFormChange(name, String(value));
             }}
-          ></OsdsInput>
-        </OsdsFormField>
+          ></OdsInput>
+        </OdsFormField>
       </div>
 
       <div className={'flex w-full md:w-1/2'}>
-        <OsdsFormField className="w-full md:pr-6">
-          <div slot="label">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            >
-              {t('zimbra_account_add_input_displayName_label')}
-            </OsdsText>
-          </div>
-          <OsdsInput
+        <OdsFormField className="w-full md:pr-6">
+          <label slot="label">
+            {t('zimbra_account_add_input_displayName_label')}
+          </label>
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
             name="displayName"
             placeholder={t('zimbra_account_add_input_displayName_placeholder')}
-            color={ODS_THEME_COLOR_INTENT.default}
-            size={ODS_INPUT_SIZE.md}
             value={form.displayName.value}
-            onOdsInputBlur={({ target: { name, value } }) =>
+            onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) => {
-              handleFormChange(name, value);
+            onOdsChange={({ detail: { name, value } }) => {
+              handleFormChange(name, String(value));
             }}
-          ></OsdsInput>
-        </OsdsFormField>
+          ></OdsInput>
+        </OdsFormField>
       </div>
 
       {editAccountDetail && (
         <div className="flex">
-          <OsdsFormField className="w-full">
-            <div slot="label">
-              <OsdsText
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              >
-                {t('zimbra_account_add_input_description_label')}
-              </OsdsText>
-            </div>
-            <OsdsTextarea
-              color={ODS_THEME_COLOR_INTENT.default}
+          <OdsFormField className="w-full">
+            <label slot="label">
+              {t('zimbra_account_add_input_description_label')}
+            </label>
+            <OdsTextarea
               name="description"
               placeholder={t(
                 'zimbra_account_add_input_description_placeholder',
               )}
-              resizable
-              size={ODS_TEXTAREA_SIZE.md}
+              isResizable
               value={form.description.value}
               onOdsBlur={({ target: { name, value } }) =>
                 handleFormChange(name, value.toString())
               }
-              onOdsValueChange={({ detail: { name, value } }) => {
+              onOdsChange={({ detail: { name, value } }) => {
                 handleFormChange(name, value);
               }}
-            ></OsdsTextarea>
-          </OsdsFormField>
+            ></OdsTextarea>
+          </OdsFormField>
         </div>
       )}
 
       <div className="flex w-full md:w-1/2">
-        <OsdsFormField className="w-full md:pr-6">
-          <div slot="label">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            >
-              {t('zimbra_account_add_input_password_label')}
-              {!editAccountDetail && ' *'}
-            </OsdsText>
-          </div>
-          <OsdsPassword
-            color={
-              form.password.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            masked={true}
+        <OdsFormField className="w-full md:pr-6">
+          <label slot="label">
+            {t('zimbra_account_add_input_password_label')}
+            {!editAccountDetail && ' *'}
+          </label>
+          <OdsPassword
+            hasError={form.password.hasError}
+            isMasked
             name="password"
-            size={ODS_INPUT_SIZE.md}
             value={form.password.value}
             onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) => {
-              handleFormChange(name, value);
+            onOdsChange={({ detail: { name, value } }) => {
+              handleFormChange(name, String(value));
             }}
             data-testid="input-password"
-          ></OsdsPassword>
-          <div slot="helper">
-            <OsdsText
-              color={
-                form.password.hasError
-                  ? ODS_THEME_COLOR_INTENT.error
-                  : ODS_THEME_COLOR_INTENT.default
-              }
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              className="flex flex-col"
-            >
-              <span>{t('zimbra_account_add_input_password_helper')}</span>
-              {[1, 2, 3].map((elm) => (
-                <span key={elm}>
-                  - {t(`zimbra_account_add_input_password_helper_rule_${elm}`)}
-                </span>
-              ))}
-            </OsdsText>
-          </div>
-        </OsdsFormField>
+          ></OdsPassword>
+          <OdsText
+            slot="helper"
+            preset={ODS_TEXT_PRESET.span}
+            className="flex flex-col"
+          >
+            <span className="block">
+              {t('zimbra_account_add_input_password_helper')}
+            </span>
+            {[1, 2, 3].map((elm) => (
+              <span key={elm} className="block">
+                - {t(`zimbra_account_add_input_password_helper_rule_${elm}`)}
+              </span>
+            ))}
+          </OdsText>
+        </OdsFormField>
       </div>
 
       <div className="flex space-x-5">
-        <OsdsButton
+        <OdsButton
           slot="actions"
-          inline
-          color={ODS_THEME_COLOR_INTENT.primary}
-          variant={ODS_BUTTON_VARIANT.flat}
+          color={ODS_BUTTON_COLOR.primary}
           {...(!isFormValid || isSending ? { disabled: true } : {})}
           onClick={handleSaveClick}
           data-testid="confirm-btn"
-        >
-          {!editAccountDetail
-            ? t('zimbra_account_add_button_confirm')
-            : t('zimbra_account_add_button_save')}
-        </OsdsButton>
+          label={
+            !editAccountDetail
+              ? t('zimbra_account_add_button_confirm')
+              : t('zimbra_account_add_button_save')
+          }
+        />
 
         {editAccountDetail && (
-          <OsdsButton
+          <OdsButton
             slot="actions"
-            inline
             onClick={goBack}
-            color={ODS_THEME_COLOR_INTENT.primary}
-            variant={ODS_BUTTON_VARIANT.stroked}
-          >
-            {t('zimbra_account_add_button_cancel')}
-          </OsdsButton>
+            color={ODS_BUTTON_COLOR.primary}
+            variant={ODS_BUTTON_VARIANT.outline}
+            label={t('zimbra_account_add_button_cancel')}
+          />
         )}
       </div>
     </div>
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx
index 3cb652eb7029..c7d234f65804 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccounts.tsx
@@ -1,29 +1,17 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { OdsButton, OdsText, OdsTooltip } from '@ovhcloud/ods-components/react';
+
 import {
-  OsdsButton,
-  OsdsIcon,
-  OsdsText,
-  OsdsTooltip,
-  OsdsTooltipContent,
-} from '@ovhcloud/ods-components/react';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_COLOR_HUE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import {
   Datagrid,
   DatagridColumn,
+  IconLinkAlignmentType,
   Links,
   LinkType,
   ManagerButton,
@@ -68,13 +56,7 @@ const columns: DatagridColumn<EmailsItem>[] = [
   {
     id: 'email account',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.email}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.email}</OdsText>
     ),
     label: 'zimbra_account_datagrid_email_label',
   },
@@ -88,13 +70,7 @@ const columns: DatagridColumn<EmailsItem>[] = [
   {
     id: 'offer',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.offer}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.offer}</OdsText>
     ),
     label: 'zimbra_account_datagrid_offer_label',
   },
@@ -106,13 +82,9 @@ const columns: DatagridColumn<EmailsItem>[] = [
   {
     id: 'quota',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
         {convertOctets(item.used)} / {convertOctets(item.available)}
-      </OsdsText>
+      </OdsText>
     ),
     label: 'zimbra_account_datagrid_quota',
   },
@@ -164,27 +136,28 @@ export default function EmailAccounts() {
 
   const hrefAddEmailAccount = useGenerateUrl('./add', 'href');
 
+  const handleAddEmailAccountClick = () => {
+    window.location.href = hrefAddEmailAccount;
+  };
   return (
     <div className="py-6 mt-8">
-      <Notifications />
       <Outlet />
       {platformUrn && !isOverridedPage && (
         <>
           <div className="mb-8 flex gap-8">
             <div>
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                hue={ODS_TEXT_COLOR_HUE._500}
-                size={ODS_TEXT_SIZE._200}
+              <OdsText
+                preset={ODS_TEXT_PRESET.heading6}
                 className="font-bold mr-4"
               >
                 {t('zimbra_account_datagrid_webmail_label')}
-              </OsdsText>
+              </OdsText>
               <Links
+                iconAlignment={IconLinkAlignmentType.right}
                 href={webmailUrl}
                 type={LinkType.external}
                 label={webmailUrl}
-                target={OdsHTMLAnchorElementTarget._blank}
+                target="_blank"
               ></Links>
             </div>
             <div>
@@ -196,14 +169,12 @@ export default function EmailAccounts() {
                 {accountsStatistics?.length > 0
                   ? accountsStatistics?.map((stats: AccountStatistics) => (
                       <div key={stats.offer}>
-                        <OsdsText
-                          color={ODS_THEME_COLOR_INTENT.text}
-                          hue={ODS_TEXT_COLOR_HUE._500}
-                          size={ODS_TEXT_SIZE._200}
-                          className="font-bold mr-4"
+                        <OdsText
+                          preset={ODS_TEXT_PRESET.heading6}
+                          className=" mr-4"
                         >
                           {`Zimbra ${stats.offer.toLowerCase()} :`}
-                        </OsdsText>
+                        </OdsText>
                         <span>{`${
                           stats.configuredAccountsCount
                         } / ${stats.configuredAccountsCount +
@@ -219,54 +190,33 @@ export default function EmailAccounts() {
           </div>
           {(data?.length > 0 || dataDomains?.length > 0) && (
             <ManagerButton
-              color={ODS_THEME_COLOR_INTENT.primary}
-              inline
+              id="add-account-btn"
+              color={ODS_BUTTON_COLOR.primary}
               size={ODS_BUTTON_SIZE.sm}
               urn={platformUrn}
               iamActions={[IAM_ACTIONS.account.create]}
-              href={hrefAddEmailAccount}
+              onClick={handleAddEmailAccountClick}
               data-testid="add-account-btn"
               className="mb-6"
-            >
-              <span slot="start">
-                <OsdsIcon
-                  name={ODS_ICON_NAME.PLUS}
-                  size={ODS_ICON_SIZE.sm}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  contrasted
-                ></OsdsIcon>
-              </span>
-              <span slot="end">{t('zimbra_account_account_add')}</span>
-            </ManagerButton>
+              icon={ODS_ICON_NAME.plus}
+              label={t('zimbra_account_account_add')}
+            />
           )}
           {dataDomains?.length === 0 && (
-            <OsdsTooltip className="mb-6">
-              <OsdsButton
-                color={ODS_THEME_COLOR_INTENT.primary}
-                inline
+            <OdsTooltip className="mb-6" triggerId="tooltip-trigger">
+              <OdsButton
+                color={ODS_BUTTON_COLOR.primary}
                 size={ODS_BUTTON_SIZE.sm}
-                disabled
-              >
-                <span slot="start">
-                  <OsdsIcon
-                    name={ODS_ICON_NAME.PLUS}
-                    size={ODS_ICON_SIZE.sm}
-                    color={ODS_THEME_COLOR_INTENT.primary}
-                    contrasted
-                  ></OsdsIcon>
-                </span>
-                <span slot="end">{t('zimbra_account_account_add')}</span>
-              </OsdsButton>
-              <OsdsTooltipContent slot="tooltip-content">
-                <OsdsText
-                  level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                  color={ODS_THEME_COLOR_INTENT.text}
-                  size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                >
+                isDisabled
+                icon={ODS_ICON_NAME.plus}
+                label={t('zimbra_account_account_add')}
+              ></OdsButton>
+              <div id="tooltip-trigger">
+                <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                   {t('zimbra_domains_tooltip_need_domain')}
-                </OsdsText>
-              </OsdsTooltipContent>
-            </OsdsTooltip>
+                </OdsText>
+              </div>
+            </OdsTooltip>
           )}
           {isLoading ? (
             <Loading />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountsAlias.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountsAlias.page.tsx
index 6e5f710b54a8..2f1dad2f420f 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountsAlias.page.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/EmailAccountsAlias.page.tsx
@@ -6,15 +6,13 @@ import {
   Notifications,
   Subtitle,
 } from '@ovh-ux/manager-react-components';
-import { OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
 import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
 import { Outlet, useSearchParams } from 'react-router-dom';
@@ -51,13 +49,7 @@ export default function EmailAccountsAlias() {
     {
       id: 'alias',
       cell: (item: AliasItem) => (
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_TEXT_SIZE._100}
-          level={ODS_TEXT_LEVEL.body}
-        >
-          {item.alias}
-        </OsdsText>
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.alias}</OdsText>
       ),
       label: 'zimbra_account_alias_datagrid_alias_label',
     },
@@ -76,7 +68,9 @@ export default function EmailAccountsAlias() {
   ];
 
   const hrefAddAlias = useGenerateUrl('./add', 'href', { editEmailAccountId });
-
+  const handleAddAliasClick = () => {
+    window.location.href = hrefAddAlias;
+  };
   const items: AliasItem[] =
     data?.map((item: AliasType) => ({
       id: item.id,
@@ -87,7 +81,6 @@ export default function EmailAccountsAlias() {
   return (
     <div className="py-6 mt-8">
       <Outlet />
-      <Notifications />
       {platformUrn && (
         <>
           <div className="mb-8">
@@ -95,25 +88,17 @@ export default function EmailAccountsAlias() {
           </div>
           <div className="flex items-center justify-between">
             <ManagerButton
+              id="add-alias-btn"
               className="mb-6"
-              color={ODS_THEME_COLOR_INTENT.primary}
-              inline
+              color={ODS_BUTTON_COLOR.primary}
               size={ODS_BUTTON_SIZE.sm}
-              href={hrefAddAlias}
+              onClick={handleAddAliasClick}
               urn={platformUrn}
               iamActions={[IAM_ACTIONS.alias.create]}
               data-testid="add-alias-btn"
-            >
-              <span slot="start">
-                <OsdsIcon
-                  name={ODS_ICON_NAME.PLUS}
-                  size={ODS_ICON_SIZE.sm}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  contrasted
-                ></OsdsIcon>
-              </span>
-              <span slot="end">{t('zimbra_account_alias_cta')}</span>
-            </ManagerButton>
+              icon={ODS_ICON_NAME.plus}
+              label={t('zimbra_account_alias_cta')}
+            ></ManagerButton>
           </div>
           {isLoading ? (
             <Loading />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalAddAlias.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalAddAlias.component.tsx
index f04309640671..b660ea9b3f29 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalAddAlias.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalAddAlias.component.tsx
@@ -1,20 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import {
-  OsdsFormField,
-  OsdsInput,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsText,
+  OdsFormField,
+  OdsInput,
+  OdsSelect,
+  OdsText,
 } from '@ovhcloud/ods-components/react';
-import { ODS_INPUT_SIZE, ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
+import {
+  ODS_BUTTON_COLOR,
+  ODS_INPUT_TYPE,
+  ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { useMutation } from '@tanstack/react-query';
 import { ApiError } from '@ovh-ux/manager-core-api';
@@ -89,29 +88,19 @@ export default function ModalAddAndEditOrganization() {
     },
     onSuccess: () => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_account_alias_add_success_message')}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_account_alias_add_error_message', {
             error: error?.response?.data?.message,
           })}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -138,77 +127,62 @@ export default function ModalAddAndEditOrganization() {
   return (
     <Modal
       title={t('zimbra_account_alias_add_modal_title')}
-      color={ODS_THEME_COLOR_INTENT.info}
+      color={ODS_MODAL_COLOR.information}
+      isOpen
       onDismissible={goBack}
-      dismissible={true}
+      isDismissible
       isLoading={isLoading}
       primaryButton={{
         testid: 'confirm-btn',
-        color: ODS_THEME_COLOR_INTENT.primary,
+        color: ODS_BUTTON_COLOR.primary,
         label: t('zimbra_account_alias_add_btn_confirm'),
         disabled: isLoading || !isFormValid || isSubmitting,
         action: handleNewAliasClick,
       }}
     >
       <>
-        <OsdsText
-          className="mt-5 mb-5"
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph} className="mt-5 mb-5">
           {t('zimbra_account_alias_add_description', {
             account: editAccountDetail?.currentState.email,
           })}
-        </OsdsText>
+        </OdsText>
 
-        <OsdsFormField>
+        <OdsFormField>
           <div className="flex">
-            <OsdsInput
+            <OdsInput
               type={ODS_INPUT_TYPE.text}
               name="alias"
               placeholder={t(
                 'zimbra_account_alias_add_input_email_placeholder',
               )}
-              color={
-                form.alias.hasError
-                  ? ODS_THEME_COLOR_INTENT.error
-                  : ODS_THEME_COLOR_INTENT.default
-              }
-              size={ODS_INPUT_SIZE.md}
+              hasError={form.alias.hasError}
               value={form.alias.value}
-              onOdsInputBlur={({ target: { name, value } }) =>
+              onOdsBlur={({ target: { name, value } }) =>
                 handleFormChange(name, value.toString())
               }
-              onOdsValueChange={({ detail: { name, value } }) => {
-                handleFormChange(name, value);
+              onOdsChange={({ detail: { name, value } }) => {
+                handleFormChange(name, String(value));
               }}
-              required
+              isRequired
               className="rounded-r-none border-r-0 w-1/2"
               data-testid="input-alias"
-            ></OsdsInput>
-            <OsdsInput
+            ></OdsInput>
+            <OdsInput
+              name={'@'}
               type={ODS_INPUT_TYPE.text}
-              color={ODS_THEME_COLOR_INTENT.default}
-              size={ODS_INPUT_SIZE.md}
               value={'@'}
-              readOnly={true}
-              disabled={true}
+              isReadonly
+              isDisabled
               className="w-10 rounded-none pl-5 pr-0"
-            ></OsdsInput>
-            <OsdsSelect
+            ></OdsInput>
+            <OdsSelect
               name="domain"
               value={form.domain.value}
               className="rounded-l-none border-l-0 w-1/2"
-              color={
-                form.domain.hasError
-                  ? ODS_THEME_COLOR_INTENT.error
-                  : ODS_THEME_COLOR_INTENT.default
-              }
-              required
-              onOdsValueChange={({ detail: { name, value } }) =>
-                handleFormChange(name, value as string)
+              hasError={form.domain.hasError}
+              isRequired
+              onOdsChange={({ detail: { name, value } }) =>
+                handleFormChange(name, value)
               }
               data-testid="select-domain"
             >
@@ -216,33 +190,27 @@ export default function ModalAddAndEditOrganization() {
                 {t('zimbra_account_alias_add_select_domain_placeholder')}
               </span>
               {domainList?.map(({ currentState: domain }) => (
-                <OsdsSelectOption key={domain.name} value={domain.name}>
+                <option key={domain.name} value={domain.name}>
                   {domain.name}
-                </OsdsSelectOption>
+                </option>
               ))}
-            </OsdsSelect>
+            </OdsSelect>
           </div>
           <div slot="helper">
-            <OsdsText
-              color={
-                form.alias.hasError
-                  ? ODS_THEME_COLOR_INTENT.error
-                  : ODS_THEME_COLOR_INTENT.default
-              }
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+            <OdsText
+              preset={ODS_TEXT_PRESET.paragraph}
               className="flex flex-col"
             >
               <span>{t('zimbra_account_alias_add_input_email_helper')}</span>
               {[1, 2, 3].map((elm) => (
                 <span key={elm}>
-                  -{' '}
+                  -
                   {t(`zimbra_account_alias_add_input_email_helper_rule_${elm}`)}
                 </span>
               ))}
-            </OsdsText>
+            </OdsText>
           </div>
-        </OsdsFormField>
+        </OdsFormField>
       </>
     </Modal>
   );
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteAlias.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteAlias.component.tsx
index a560d692fd76..6402772beaf4 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteAlias.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteAlias.component.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+
+import { OdsText } from '@ovhcloud/ods-components/react';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { useMutation } from '@tanstack/react-query';
 import { ApiError } from '@ovh-ux/manager-core-api';
+import {
+  ODS_BUTTON_VARIANT,
+  ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
 import { useGenerateUrl, usePlatform } from '@/hooks';
 import Modal from '@/components/Modals/Modal';
 import {
@@ -38,29 +38,19 @@ export default function ModalDeleteDomain() {
     mutationFn: () => deleteZimbraPlatformAlias(platformId, deleteAliasId),
     onSuccess: () => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_account_alias_delete_success_message')}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_account_alias_delete_error_message', {
             error: error?.response?.data?.message,
           })}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -75,9 +65,10 @@ export default function ModalDeleteDomain() {
   return (
     <Modal
       title={t('zimbra_account_alias_delete_modal_title')}
-      color={ODS_THEME_COLOR_INTENT.warning}
+      color={ODS_MODAL_COLOR.warning}
       onDismissible={goBack}
-      dismissible={true}
+      isOpen
+      isDismissible
       secondaryButton={{
         label: t('zimbra_account_alias_delete_modal_cancel_btn'),
         action: goBack,
@@ -85,20 +76,14 @@ export default function ModalDeleteDomain() {
       primaryButton={{
         label: t('zimbra_account_alias_delete_modal_delete_btn'),
         action: handleDeleteClick,
+        variant: ODS_BUTTON_VARIANT.default,
         disabled: isDeleting,
         testid: 'delete-btn',
       }}
     >
-      <>
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
-          {t('zimbra_account_alias_delete_modal_description')}
-        </OsdsText>
-      </>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+        {t('zimbra_account_alias_delete_modal_description')}
+      </OdsText>
     </Modal>
   );
 }
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteEmailAccount.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteEmailAccount.component.tsx
index a535825f9afc..fc6ffc37a589 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteEmailAccount.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/EmailAccounts/ModalDeleteEmailAccount.component.tsx
@@ -2,17 +2,11 @@ import React, { useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
-import {
-  OsdsContentAddon,
-  OsdsMessage,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
+  ODS_BUTTON_VARIANT,
+  ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
+import { OdsMessage, OdsText } from '@ovhcloud/ods-components/react';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { useMutation } from '@tanstack/react-query';
 import { ApiError } from '@ovh-ux/manager-core-api';
@@ -44,29 +38,19 @@ export default function ModalDeleteEmailAccount() {
     },
     onSuccess: () => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_account_delete_success_message')}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_account_delete_error_message', {
             error: error?.response?.data?.message,
           })}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -86,10 +70,11 @@ export default function ModalDeleteEmailAccount() {
   return (
     <Modal
       title={t('zimbra_account_delete_modal_title')}
-      color={ODS_THEME_COLOR_INTENT.warning}
+      color={ODS_MODAL_COLOR.warning}
       onDismissible={onClose}
-      dismissible={true}
+      isDismissible={true}
       isLoading={isLoading}
+      isOpen
       secondaryButton={{
         label: t('zimbra_account_delete_button_cancel'),
         action: onClose,
@@ -98,72 +83,51 @@ export default function ModalDeleteEmailAccount() {
         label: t('zimbra_account_delete_button_delete'),
         action: step === 1 ? () => setStep(2) : handleDeleteClick,
         disabled: step === 1 ? false : isSending,
+        variant: ODS_BUTTON_VARIANT.default,
         testid: 'primary-btn',
       }}
     >
       <>
         {step === 1 && (
           <>
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              hue={ODS_THEME_COLOR_HUE._500}
+            <OdsText
+              preset={ODS_TEXT_PRESET.paragraph}
               data-testid="text-step-1"
             >
               {t('zimbra_account_delete_modal_content_step1')}
-            </OsdsText>
-            <OsdsContentAddon className="mt-5">
+            </OdsText>
+            <span className="mt-5">
               <span slot="start">
-                <OsdsText
-                  level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-                  color={ODS_THEME_COLOR_INTENT.text}
-                  size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                  hue={ODS_THEME_COLOR_HUE._500}
+                <OdsText
+                  preset={ODS_TEXT_PRESET.paragraph}
+                  className="font-bold"
                 >
                   {t('zimbra_account_delete_modal_mail_label')}
-                </OsdsText>
+                </OdsText>
               </span>
 
               <span slot="main" className="ml-5">
-                <OsdsText
-                  color={ODS_THEME_COLOR_INTENT.text}
-                  size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                  level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                  hue={ODS_THEME_COLOR_HUE._500}
-                >
+                <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                   {data?.currentState.email}
-                </OsdsText>
+                </OdsText>
               </span>
-            </OsdsContentAddon>
+            </span>
           </>
         )}
 
         {step === 2 && (
           <>
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              hue={ODS_THEME_COLOR_HUE._500}
+            <OdsText
+              preset={ODS_TEXT_PRESET.paragraph}
               data-testid="text-step-2"
             >
               {t('zimbra_account_delete_modal_content_step2')}
-            </OsdsText>
-            <OsdsMessage
-              color={ODS_THEME_COLOR_INTENT.warning}
-              icon={ODS_ICON_NAME.WARNING_CIRCLE}
-              className="mt-4"
-            >
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-                hue={ODS_THEME_COLOR_HUE._500}
-              >
+            </OdsText>
+            <OdsMessage className="mt-4">
+              <OdsText preset={ODS_TEXT_PRESET.paragraph} className="font-bold">
                 {t('zimbra_account_delete_modal_warn_message')}
-              </OsdsText>
-            </OsdsMessage>
+              </OdsText>
+            </OdsMessage>
           </>
         )}
       </>
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/GeneralInformation.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/GeneralInformation.tsx
index 6bed7266cb09..1422277594cf 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/GeneralInformation.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/GeneralInformation.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
-import { OsdsTile, OsdsDivider } from '@ovhcloud/ods-components/react';
-import { ManagerText, Subtitle } from '@ovh-ux/manager-react-components';
+import { OdsDivider } from '@ovhcloud/ods-components/react';
+import {
+  DashboardTile,
+  ManagerText,
+  Subtitle,
+  TileBlock,
+} from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import { AccountStatistics } from '@/api/api.type';
-import { TileBlock } from '@/components/TileBlock';
 import { BadgeStatus } from '@/components/BadgeStatus';
 import { useOrganization, usePlatform } from '@/hooks';
 // import { OngoingTasks } from './OngoingTasks';
@@ -21,11 +25,16 @@ function GeneralInformation() {
   const { data: organisation } = useOrganization();
 
   const guideLinks = (links: GuideLinks) => {
-    return Object.entries(links).map(([key, value]) => {
+    const entries = Object.entries(links);
+    return entries.map(([key, value], index) => {
+      const isFirst = index === 0;
+      const isLast = index === entries.length - 1;
       return (
         <div key={key} className="block">
-          <OsdsDivider separator />
-          <GuideLink label={t(key)} guide={value} />
+          <div className={`mb-4 ${!isFirst ? 'mt-4' : ''}`}>
+            <GuideLink label={t(key)} guide={value} />
+          </div>
+          {!isLast && <OdsDivider />}
         </div>
       );
     });
@@ -35,89 +44,73 @@ function GeneralInformation() {
     ? organisation.currentState.accountsStatistics
     : platform?.currentState?.accountsStatistics;
 
+  const itemsStatus = [
+    {
+      id: 'ongoing-task',
+      label: t(
+        'Coming Soon',
+      ) /* label={t('zimbra_dashboard_tile_status_ongoingTask')} */,
+      value: platformUrn && (
+        <ManagerText urn={platformUrn} iamActions={[IAM_ACTIONS.platform.get]}>
+          Coming Soon
+        </ManagerText>
+      ),
+    },
+  ];
+
+  const itemsConsumption = [
+    {
+      id: 'account-offer',
+      label: t('zimbra_dashboard_tile_serviceConsumption_accountOffer'),
+      value: platformUrn ? (
+        <ManagerText
+          data-testid="platform-accounts"
+          urn={platformUrn}
+          iamActions={[IAM_ACTIONS.account.get]}
+        >
+          {accountsStatistics?.length > 0
+            ? accountsStatistics?.map((stats) => (
+                <span key={stats.offer}>{`${
+                  stats.configuredAccountsCount
+                } / ${stats.configuredAccountsCount +
+                  stats.availableAccountsCount} ${stats.offer}`}</span>
+              ))
+            : t('zimbra_dashboard_tile_serviceConsumption_noAccountOffer')}
+        </ManagerText>
+      ) : null,
+    },
+  ];
+
+  const itemsUsefulLinks = [
+    {
+      id: 'useful-links',
+      value: guideLinks({
+        zimbra_dashboard_webmail: GUIDES_LIST.webmail,
+        zimbra_dashboard_administrator_guide: GUIDES_LIST.administrator_guide,
+        zimbra_dashboard_user_guides: GUIDES_LIST.user_guide,
+      }),
+    },
+  ];
+
   return (
     <div className="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 py-6 mt-8">
       <div className="p-3">
-        <OsdsTile>
-          <div className="flex flex-col w-full">
-            <Subtitle>{t('zimbra_dashboard_tile_status_title')}</Subtitle>
-            {organisation && (
-              <TileBlock
-                testid="tileblock-orga"
-                label={t('zimbra_dashboard_tile_status_serviceStatus')}
-              >
-                <BadgeStatus itemStatus={organisation?.resourceStatus} />
-              </TileBlock>
-            )}
-            {/* To uncomment to have task
-             */}
-            <TileBlock
-              label={t(
-                'Coming Soon',
-              )} /* label={t('zimbra_dashboard_tile_status_ongoingTask')}> */
-            >
-              {/* {platformUrn && (
-                <ManagerText
-                  urn={platformUrn}
-                  iamActions={[IAM_ACTIONS.platform.get, IAM_ACTIONS.task.get]}
-                >
-
-                   <OngoingTasks />
-                </ManagerText>
-              )} */}
-              <ManagerText
-                urn={platformUrn}
-                iamActions={[IAM_ACTIONS.platform.get]}
-              >
-                Coming Soon
-              </ManagerText>
-            </TileBlock>
-          </div>
-        </OsdsTile>
+        <DashboardTile
+          title={t('zimbra_dashboard_tile_status_title')}
+          items={itemsStatus}
+        />
       </div>
       <div className="p-3">
-        <OsdsTile>
-          <div className="flex flex-col w-full">
-            <Subtitle>
-              {t('zimbra_dashboard_tile_serviceConsumption_title')}
-            </Subtitle>
-            <TileBlock
-              label={t('zimbra_dashboard_tile_serviceConsumption_accountOffer')}
-            >
-              {platformUrn && (
-                <ManagerText
-                  data-testid="platform-accounts"
-                  urn={platformUrn}
-                  iamActions={[IAM_ACTIONS.account.get]}
-                >
-                  {accountsStatistics?.length > 0
-                    ? accountsStatistics?.map((stats) => (
-                        <span key={stats.offer}>{`${
-                          stats.configuredAccountsCount
-                        } / ${stats.configuredAccountsCount +
-                          stats.availableAccountsCount} ${stats.offer}`}</span>
-                      ))
-                    : t(
-                        'zimbra_dashboard_tile_serviceConsumption_noAccountOffer',
-                      )}
-                </ManagerText>
-              )}
-            </TileBlock>
-          </div>
-        </OsdsTile>
+        <DashboardTile
+          title={t('zimbra_dashboard_tile_serviceConsumption_title')}
+          items={itemsConsumption}
+        />
       </div>
       <div className="p-3">
-        <OsdsTile className="w-full flex-col">
-          <div className="flex flex-col w-full">
-            <Subtitle>{t('zimbra_dashboard_tile_usefulLinks_title')}</Subtitle>
-            {guideLinks({
-              zimbra_dashboard_webmail: GUIDES_LIST.webmail,
-              zimbra_dashboard_administrator_guide:
-                GUIDES_LIST.administrator_guide,
-              zimbra_dashboard_user_guides: GUIDES_LIST.user_guide,
-            })}
-          </div>
-        </OsdsTile>
+        <DashboardTile
+          title={t('zimbra_dashboard_tile_usefulLinks_title')}
+          items={itemsUsefulLinks}
+        />
       </div>
     </div>
   );
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/OngoingTasks.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/OngoingTasks.tsx
index a4453594821b..3283091caacd 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/OngoingTasks.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/GeneralInformation/OngoingTasks.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { OsdsIcon, OsdsLink } from '@ovhcloud/ods-components/react';
-import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
+import { OdsIcon, OdsLink } from '@ovhcloud/ods-components/react';
+import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import { Links } from '@ovh-ux/manager-react-components';
 import { useTasks } from '@/hooks';
 
 export const OngoingTasks: React.FC = () => {
@@ -20,23 +21,24 @@ export const OngoingTasks: React.FC = () => {
         <span key={task.id}>{`${task.type} ${task.message}`}</span>
       ))}
       {data?.length > 5 && (
-        <OsdsLink className="mt-5" onClick={() => setLoadMore(!loadMore)}>
+        <OdsLink
+          className="mt-5"
+          onClick={() => setLoadMore(!loadMore)}
+          href="#"
+        >
           <span slot="start"></span>
           {!loadMore
             ? t('zimbra_dashboard_tile_status_ongoingTask_viewMore')
             : t('zimbra_dashboard_tile_status_ongoingTask_viewLess')}
           <span slot="end">
-            <OsdsIcon
+            <OdsIcon
               className="ml-3"
               name={
-                !loadMore
-                  ? ODS_ICON_NAME.CHEVRON_DOWN
-                  : ODS_ICON_NAME.CHEVRON_UP
+                !loadMore ? ODS_ICON_NAME.chevronDown : ODS_ICON_NAME.chevronUp
               }
-              size={ODS_ICON_SIZE.xs}
-            ></OsdsIcon>
+            ></OdsIcon>
           </span>
-        </OsdsLink>
+        </OdsLink>
       )}
     </div>
   );
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/ActionButtonMailingList.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/ActionButtonMailingList.component.tsx
index e70ae4e7dc05..2bdedb0e4981 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/ActionButtonMailingList.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/ActionButtonMailingList.component.tsx
@@ -20,10 +20,18 @@ const ActionButtonMailingList: React.FC<ActionButtonMailingListProps> = ({
     deleteMailingListId: mailingListItem.id,
   });
 
+  const handleDeleteMailingListClick = () => {
+    window.location.href = hrefDeleteMailingList;
+  };
+
   const hrefEditMailingList = useGenerateUrl('./settings', 'href', {
     editMailingListId: mailingListItem.id,
   });
 
+  const handleEditMailingListClick = () => {
+    window.location.href = hrefEditMailingList;
+  };
+
   const hrefDefineMembersMailingList = useGenerateUrl(
     './define_members',
     'href',
@@ -31,7 +39,9 @@ const ActionButtonMailingList: React.FC<ActionButtonMailingListProps> = ({
       mailingListId: mailingListItem.id,
     },
   );
-
+  const handleDefineMembersMailingListClick = () => {
+    window.location.href = hrefDefineMembersMailingList;
+  };
   const hrefConfigureDelegationMailingList = useGenerateUrl(
     './configure_delegation',
     'href',
@@ -40,31 +50,34 @@ const ActionButtonMailingList: React.FC<ActionButtonMailingListProps> = ({
     },
   );
 
+  const handleDefineConfigureDelegationMailingList = () => {
+    window.location.href = hrefConfigureDelegationMailingList;
+  };
   const actionItems = [
     {
       id: 1,
-      href: hrefEditMailingList,
+      onClick: handleEditMailingListClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.mailingList.edit],
       label: t('zimbra_mailinglists_datagrid_action_edit'),
     },
     {
       id: 2,
-      href: hrefDefineMembersMailingList,
+      onClick: handleDefineMembersMailingListClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.mailingList.edit],
       label: t('zimbra_mailinglists_datagrid_action_define_members'),
     },
     {
       id: 3,
-      href: hrefConfigureDelegationMailingList,
+      onClick: handleDefineConfigureDelegationMailingList,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.mailingList.edit],
       label: t('zimbra_mailinglists_datagrid_action_configure_delegation'),
     },
     {
       id: 4,
-      href: hrefDeleteMailingList,
+      onClick: handleDeleteMailingListClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.mailingList.delete],
       label: t('zimbra_mailinglists_datagrid_action_delete'),
@@ -73,7 +86,8 @@ const ActionButtonMailingList: React.FC<ActionButtonMailingListProps> = ({
 
   return (
     <ActionMenu
-      disabled={mailingListItem.status !== ResourceStatus.READY}
+      id={mailingListItem.id}
+      isDisabled={mailingListItem.status !== ResourceStatus.READY}
       items={actionItems}
       isCompact
     />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/AddAndEditMailingList.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/AddAndEditMailingList.page.tsx
index 246e2080b411..7087bcd32457 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/AddAndEditMailingList.page.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/AddAndEditMailingList.page.tsx
@@ -1,7 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { Links, LinkType, Subtitle } from '@ovh-ux/manager-react-components';
+import {
+  IconLinkAlignmentType,
+  Links,
+  LinkType,
+  Subtitle,
+} from '@ovh-ux/manager-react-components';
+import { ODS_LINK_COLOR } from '@ovhcloud/ods-components';
 import {
   useDomains,
   useGenerateUrl,
@@ -58,7 +64,9 @@ export default function AddAndEditMailingList() {
             <Links
               data-testid="back-btn"
               type={LinkType.back}
+              iconAlignment={IconLinkAlignmentType.left}
               onClickReturn={goBack}
+              color={ODS_LINK_COLOR.primary}
               label={t('zimbra_mailinglist_add_cta_back')}
             />
             <Subtitle>
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingListSettings.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingListSettings.page.tsx
index ded5e55e2a32..f77c6c20bf2e 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingListSettings.page.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingListSettings.page.tsx
@@ -3,37 +3,24 @@ import { useNotifications } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
-  OsdsButton,
-  OsdsFormField,
-  OsdsInput,
-  OsdsMessage,
-  OsdsRadio,
-  OsdsRadioButton,
-  OsdsRadioGroup,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsText,
-  OsdsToggle,
-  OsdsTooltipContent,
-  OsdsIcon,
-  OsdsTooltip,
+  OdsButton,
+  OdsFormField,
+  OdsInput,
+  OdsMessage,
+  OdsRadio,
+  OdsSelect,
+  OdsText,
+  OdsToggle,
+  OdsIcon,
+  OdsTooltip,
 } from '@ovhcloud/ods-components/react';
 import {
-  ODS_THEME_COLOR_HUE,
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_INPUT_SIZE,
   ODS_INPUT_TYPE,
-  ODS_MESSAGE_TYPE,
-  ODS_RADIO_BUTTON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_MESSAGE_COLOR,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import { ApiError } from '@ovh-ux/manager-core-api';
 import { useMutation } from '@tanstack/react-query';
@@ -224,29 +211,19 @@ export default function MailingListSettings({
     },
     onSuccess: () => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t(
             editMailingListId
               ? 'zimbra_mailinglist_edit_success_message'
               : 'zimbra_mailinglist_add_success_message',
           )}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t(
             editMailingListId
               ? 'zimbra_mailinglist_edit_error_message'
@@ -255,7 +232,7 @@ export default function MailingListSettings({
               error: error.response?.data?.message,
             },
           )}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -273,253 +250,166 @@ export default function MailingListSettings({
 
   return (
     <div className="w-full md:w-3/4 flex flex-col space-y-5">
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-        level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-      >
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
         {!editMailingListId
           ? t('zimbra_mailinglist_add_header')
           : t('zimbra_mailinglist_edit_header')}
-      </OsdsText>
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-        level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-      >
+      </OdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
         {t('zimbra_mailinglist_mandatory_fields')}
-      </OsdsText>
-      <OsdsFormField>
-        <div slot="label">
-          <OsdsText
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          >
-            {t('zimbra_mailinglist_add_input_email_label')} *
-          </OsdsText>
-        </div>
+      </OdsText>
+      <OdsFormField>
+        <label slot="label">
+          {t('zimbra_mailinglist_add_input_email_label')} *
+        </label>
         <div className="flex">
-          <OsdsInput
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
             name="account"
             placeholder={t('zimbra_mailinglist_add_input_email_placeholder')}
-            color={
-              form.account.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            size={ODS_INPUT_SIZE.md}
+            hasError={form.account.hasError}
             value={form.account.value}
-            required
+            isRequired
             className="rounded-r-none w-1/2"
             data-testid="input-account"
-            onOdsInputBlur={({ target: { name, value } }) =>
+            onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) => {
-              handleFormChange(name, value);
+            onOdsChange={({ detail: { name, value } }) => {
+              handleFormChange(name, String(value));
             }}
-          ></OsdsInput>
-          <OsdsInput
+          ></OdsInput>
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
-            color={ODS_THEME_COLOR_INTENT.default}
-            size={ODS_INPUT_SIZE.md}
+            name={'@'}
             value={'@'}
-            readOnly={true}
-            disabled={true}
+            isReadonly
+            isDisabled
             className="w-10 rounded-none"
-          ></OsdsInput>
-          <OsdsSelect
+          ></OdsInput>
+          <OdsSelect
             name="domain"
             value={form.domain.value}
             className="rounded-l-none w-1/2"
-            color={
-              form.domain.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            required
-            onOdsValueChange={(e) =>
-              handleDomainChange(e.detail.value as string)
-            }
+            hasError={form.domain.hasError}
+            isRequired
+            onOdsChange={(e) => handleDomainChange(e.detail.value)}
             data-testid="select-domain"
           >
             <span slot="placeholder">
               {t('zimbra_mailinglist_add_select_domain_placeholder')}
             </span>
             {domainList?.map(({ currentState: domain }) => (
-              <OsdsSelectOption key={domain.name} value={domain.name}>
+              <option key={domain.name} value={domain.name}>
                 {domain.name}
-              </OsdsSelectOption>
+              </option>
             ))}
-          </OsdsSelect>
+          </OdsSelect>
         </div>
-      </OsdsFormField>
+      </OdsFormField>
       {selectedDomainOrganization && !organizationIdParam && (
-        <OsdsMessage
-          color={ODS_THEME_COLOR_INTENT.primary}
-          type={ODS_MESSAGE_TYPE.info}
-        >
-          <OsdsText
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-          >
+        <OdsMessage color={ODS_MESSAGE_COLOR.information}>
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
             {t('zimbra_mailinglist_add_message_organization', {
               organization: selectedDomainOrganization,
             })}
-          </OsdsText>
-        </OsdsMessage>
+          </OdsText>
+        </OdsMessage>
       )}
-      <OsdsFormField>
-        <div slot="label">
-          <OsdsText
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          >
-            {t('zimbra_mailinglist_add_input_owner_label')} *
-          </OsdsText>
-        </div>
+      <OdsFormField>
+        <label slot="label">
+          {t('zimbra_mailinglist_add_input_owner_label')} *
+        </label>
         <div className="flex">
-          <OsdsInput
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
             name="owner"
             placeholder={t('zimbra_mailinglist_add_input_owner_placeholder')}
-            color={
-              form.owner.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            size={ODS_INPUT_SIZE.md}
+            hasError={form.owner.hasError}
             value={form.owner.value}
-            required
+            isRequired
             className="rounded-r-none w-1/2"
             data-testid="input-owner"
-            onOdsInputBlur={({ target: { name, value } }) =>
+            onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) => {
-              handleFormChange(name, value);
+            onOdsChange={({ detail: { name, value } }) => {
+              handleFormChange(name, String(value));
             }}
-          ></OsdsInput>
-        </div>
-      </OsdsFormField>
-      <OsdsFormField>
-        <div slot="label">
-          <OsdsText
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          >
-            {t('zimbra_mailinglist_add_reply_to_label')} *
-          </OsdsText>
+          ></OdsInput>
         </div>
+      </OdsFormField>
+      <OdsFormField>
+        <label slot="label">
+          {t('zimbra_mailinglist_add_reply_to_label')} *
+        </label>
         <div className="flex">
-          <OsdsRadioGroup
-            value={form.defaultReplyTo.value}
-            data-testid="radio-group-reply-to"
-            onOdsValueChange={(event) =>
-              handleFormChange('defaultReplyTo', event.detail.newValue)
-            }
-          >
-            {replyToChoices.map(({ value, key }) => (
-              <OsdsRadio key={value} value={value}>
-                <OsdsRadioButton
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  size={ODS_RADIO_BUTTON_SIZE.sm}
-                >
-                  <span slot="end">
-                    <OsdsText
-                      color={ODS_THEME_COLOR_INTENT.text}
-                      size={ODS_TEXT_SIZE._400}
-                      level={ODS_TEXT_LEVEL.body}
-                    >
-                      {t(key)}
-                    </OsdsText>
-                  </span>
-                </OsdsRadioButton>
-              </OsdsRadio>
-            ))}
-          </OsdsRadioGroup>
-        </div>
-      </OsdsFormField>
-      <OsdsFormField>
-        <div slot="label">
-          <OsdsText
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          >
-            {t('zimbra_mailinglist_add_language_label')} *
-          </OsdsText>
+          {replyToChoices.map(({ value, key }) => (
+            <OdsRadio
+              className="space-y-5"
+              key={value}
+              name="replyTo"
+              value={form.defaultReplyTo.value}
+              isChecked={form.defaultReplyTo.value === value}
+              onOdsChange={(event) =>
+                handleFormChange('defaultReplyTo', event.detail.value)
+              }
+              data-testid="radio-replyTo"
+            >
+              <div slot="end" className="flex flex-col">
+                <OdsText preset={ODS_TEXT_PRESET.paragraph}>{t(key)}</OdsText>
+              </div>
+            </OdsRadio>
+          ))}
         </div>
+      </OdsFormField>
+
+      <OdsFormField>
+        <label slot="label">
+          {t('zimbra_mailinglist_add_language_label')} *
+        </label>
         <div className="flex">
-          <OsdsSelect
+          <OdsSelect
             name="language"
             value={form.language.value}
             className="rounded-l-none w-1/2"
-            color={
-              form.language.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            required
+            hasError={form.language.hasError}
+            isRequired
             data-testid="select-language"
-            onOdsValueChange={(e) =>
-              handleFormChange(e.detail.name, e.detail.value as string)
-            }
+            onOdsChange={(e) => handleFormChange(e.detail.name, e.detail.value)}
           >
             <span slot="placeholder">
               {t('zimbra_mailinglist_add_select_language_placeholder')}
             </span>
             {languageList?.map((lang) => (
-              <OsdsSelectOption key={lang} value={lang}>
+              <option key={lang} value={lang}>
                 {lang}
-              </OsdsSelectOption>
+              </option>
             ))}
-          </OsdsSelect>
-        </div>
-      </OsdsFormField>
-      <OsdsFormField>
-        <div slot="label">
-          <OsdsText
-            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          >
-            {t('zimbra_mailinglist_add_moderation_choice_label')}
-          </OsdsText>
+          </OdsSelect>
         </div>
+      </OdsFormField>
+      <OdsFormField>
+        <label slot="label">
+          {t('zimbra_mailinglist_add_moderation_choice_label')}
+        </label>
         <div>
-          <OsdsRadioGroup
-            value={form.moderationOption.value}
-            data-testid="radio-group-moderation-option"
-            onOdsValueChange={(event) =>
-              handleFormChange('moderationOption', event.detail.newValue)
-            }
-          >
-            {moderationChoices.map(({ value, key }) => (
-              <OsdsRadio key={value} value={value}>
-                <OsdsRadioButton
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  size={ODS_RADIO_BUTTON_SIZE.sm}
-                >
-                  <span slot="end">
-                    <OsdsText
-                      color={ODS_THEME_COLOR_INTENT.text}
-                      size={ODS_TEXT_SIZE._400}
-                      level={ODS_TEXT_LEVEL.body}
-                    >
-                      {t(key)}
-                    </OsdsText>
-                  </span>
-                </OsdsRadioButton>
-              </OsdsRadio>
-            ))}
-          </OsdsRadioGroup>
-          <OsdsToggle
+          {moderationChoices.map(({ value, key }) => (
+            <OdsRadio
+              key={value}
+              name="moderationOption"
+              value={value}
+              onOdsChange={(event) =>
+                handleFormChange('moderationOption', event.detail.value)
+              }
+              data-testid="radio-group-moderation-option"
+            >
+              <div slot="end" className="flex flex-col">
+                <OdsText preset={ODS_TEXT_PRESET.paragraph}>{t(key)}</OdsText>
+              </div>
+            </OdsRadio>
+          ))}
+          <OdsToggle
             className="mt-4"
             data-testid="toggle-subscriber-moderation"
             onClick={() =>
@@ -529,71 +419,56 @@ export default function MailingListSettings({
               )
             }
             {...(form.subscriberModeration.value === 'true'
-              ? { checked: true }
+              ? { isChecked: true }
               : {})}
+            name="toggle-subscriber-moderation"
           >
             <div slot="end" className="flex flex-col ml-4">
-              <OsdsText
-                className="flex"
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_TEXT_SIZE._400}
-                level={ODS_TEXT_LEVEL.body}
-              >
+              <OdsText preset={ODS_TEXT_PRESET.paragraph} className="flex">
                 {t('zimbra_mailinglist_add_subscriber_moderation')}
-                <OsdsTooltip className="ml-4 flex items-center">
-                  <OsdsIcon
-                    color={ODS_THEME_COLOR_INTENT.primary}
-                    size={ODS_ICON_SIZE.xxs}
-                    name={ODS_ICON_NAME.HELP_CIRCLE}
-                  />
-                  <OsdsTooltipContent slot="tooltip-content">
-                    <OsdsText
-                      level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                      color={ODS_THEME_COLOR_INTENT.text}
-                      size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                    >
+                <OdsTooltip
+                  className="ml-4 flex items-center"
+                  triggerId="tooltip-trigger"
+                >
+                  <OdsIcon name={ODS_ICON_NAME.circleInfo} />
+                  <div id="tooltip-trigger">
+                    <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                       {t(
                         'zimbra_mailinglist_add_subscriber_moderation_tooltip',
                       )}
-                    </OsdsText>
-                  </OsdsTooltipContent>
-                </OsdsTooltip>
-              </OsdsText>
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_TEXT_SIZE._100}
-                level={ODS_TEXT_LEVEL.body}
-              >
+                    </OdsText>
+                  </div>
+                </OdsTooltip>
+              </OdsText>
+              <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                 {t('zimbra_mailinglist_add_subscriber_moderation_info', {
                   max: 250,
                 })}
-              </OsdsText>
+              </OdsText>
             </div>
-          </OsdsToggle>
+          </OdsToggle>
         </div>
-      </OsdsFormField>
+      </OdsFormField>
       <div className="flex space-x-5">
-        <OsdsButton
+        <OdsButton
           slot="actions"
-          inline
-          color={ODS_THEME_COLOR_INTENT.primary}
-          variant={ODS_BUTTON_VARIANT.flat}
+          inline-block
+          color={ODS_BUTTON_COLOR.primary}
+          variant={ODS_BUTTON_VARIANT.default}
           {...(!isFormValid || isSending ? { disabled: true } : {})}
           onClick={handleSavelick}
           data-testid="confirm-btn"
-        >
-          {t('zimbra_mailinglist_add_button_confirm')}
-        </OsdsButton>
+          label={t('zimbra_mailinglist_add_button_confirm')}
+        />
         {editMailingListId && (
-          <OsdsButton
+          <OdsButton
             slot="actions"
-            inline
+            inline-block
             onClick={goBack}
-            color={ODS_THEME_COLOR_INTENT.primary}
-            variant={ODS_BUTTON_VARIANT.stroked}
-          >
-            {t('zimbra_mailinglist_add_button_cancel')}
-          </OsdsButton>
+            color={ODS_BUTTON_COLOR.primary}
+            variant={ODS_BUTTON_VARIANT.outline}
+            label={t('zimbra_mailinglist_add_button_cancel')}
+          />
         )}
       </div>
     </div>
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingLists.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingLists.tsx
index b9fd5fa0fe57..9c7715bfad6c 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingLists.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/MailingLists/MailingLists.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsIcon, OdsText } from '@ovhcloud/ods-components/react';
 import { Outlet } from 'react-router-dom';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_COLOR_HUE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import {
   Datagrid,
@@ -48,13 +45,7 @@ const columns: DatagridColumn<MailingListItem>[] = [
   {
     id: 'domains',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.name}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.name}</OdsText>
     ),
     label: 'zimbra_mailinglists_datagrid_name_label',
   },
@@ -69,52 +60,28 @@ const columns: DatagridColumn<MailingListItem>[] = [
   {
     id: 'owner',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.owner}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.owner}</OdsText>
     ),
     label: 'zimbra_mailinglists_datagrid_owner_label',
   },
   {
     id: 'aliases',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.aliases}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.aliases}</OdsText>
     ),
     label: 'zimbra_mailinglists_datagrid_aliases_label',
   },
   {
     id: 'moderators',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.moderators}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.moderators}</OdsText>
     ),
     label: 'zimbra_mailinglists_datagrid_moderators_label',
   },
   {
     id: 'subscribers',
     cell: (item) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.subscribers}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.subscribers}</OdsText>
     ),
     label: 'zimbra_mailinglists_datagrid_subscribers_label',
   },
@@ -158,47 +125,40 @@ export default function MailingLists() {
 
   const hrefAddMailingList = useGenerateUrl('./add', 'href');
 
+  const handleAddMailingListClick = () => {
+    window.location.href = hrefAddMailingList;
+  };
   // this will need to be updated
   const quota = platformData?.currentState?.quota || 0;
 
   return (
     <div className="py-6 mt-8">
-      <Notifications />
       <Outlet />
       {platformUrn && !isOverridedPage && (
         <>
           <div className="flex flex-col items-start">
             <div className="mb-8">
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                hue={ODS_TEXT_COLOR_HUE._500}
-                size={ODS_TEXT_SIZE._200}
-                className="mr-4"
+              <OdsText
+                preset={ODS_TEXT_PRESET.paragraph}
+                className="mr-4 font-bold"
               >
                 <strong>{t('zimbra_mailinglists_quota_label')}</strong>
                 {` ${quota}/1000`}
-              </OsdsText>
+              </OdsText>
             </div>
             <ManagerButton
-              color={ODS_THEME_COLOR_INTENT.primary}
-              inline
+              id="add-mailinglist-btn"
+              color={ODS_BUTTON_COLOR.primary}
+              inline-block
               size={ODS_BUTTON_SIZE.sm}
-              href={hrefAddMailingList}
+              onClick={handleAddMailingListClick}
               urn={platformUrn}
               iamActions={[IAM_ACTIONS.mailingList.create]}
               data-testid="add-mailinglist-btn"
               className="mb-6"
-            >
-              <span slot="start">
-                <OsdsIcon
-                  name={ODS_ICON_NAME.PLUS}
-                  size={ODS_ICON_SIZE.sm}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  contrasted
-                ></OsdsIcon>
-              </span>
-              <span slot="end">{t('zimbra_mailinglists_datagrid_cta')}</span>
-            </ManagerButton>
+              icon={ODS_ICON_NAME.plus}
+              label={t('zimbra_mailinglists_datagrid_cta')}
+            />
           </div>
           {isLoading ? (
             <Loading />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ActionButtonOrganization.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ActionButtonOrganization.component.tsx
index 96cbb0a3c809..6f60247b050c 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ActionButtonOrganization.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ActionButtonOrganization.component.tsx
@@ -20,20 +20,29 @@ const ActionButtonOrganization: React.FC<ActionButtonOrganizationProps> = ({
     deleteOrganizationId: organizationItem.id,
   });
 
+  const handleDeleteOrganizationClick = () => {
+    window.location.href = hrefDeleteOrganization;
+  };
+
   const hrefEditOrganization = useGenerateUrl('./edit', 'href', {
     editOrganizationId: organizationItem.id,
   });
+
+  const handleEditOrganizationClick = () => {
+    window.location.href = hrefEditOrganization;
+  };
+
   const actionItems = [
     {
       id: 1,
-      href: hrefEditOrganization,
+      onClick: handleEditOrganizationClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.organization.edit],
       label: t('zimbra_organization_edit'),
     },
     {
       id: 2,
-      href: hrefDeleteOrganization,
+      onClick: handleDeleteOrganizationClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.organization.delete],
       label: t('zimbra_organization_delete'),
@@ -42,7 +51,8 @@ const ActionButtonOrganization: React.FC<ActionButtonOrganizationProps> = ({
 
   return (
     <ActionMenu
-      disabled={organizationItem.status !== ResourceStatus.READY}
+      id={organizationItem.id}
+      isDisabled={organizationItem.status !== ResourceStatus.READY}
       items={actionItems}
       isCompact
     />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/IdLink.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/IdLink.tsx
index ffec17b290e0..cfa8abeb709c 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/IdLink.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/IdLink.tsx
@@ -1,23 +1,32 @@
 import React from 'react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OsdsLink } from '@ovhcloud/ods-components/react';
+import { OdsLink } from '@ovhcloud/ods-components/react';
 import { useNavigate } from 'react-router-dom';
+import {
+  ODS_LINK_COLOR,
+  ODS_LINK_ICON_ALIGNMENT,
+} from '@ovhcloud/ods-components';
+import { IconLinkAlignmentType } from '@ovh-ux/manager-react-components';
 
 interface IdLinkProps {
   id: string;
-  children: string;
+  label: string;
 }
 
-const IdLink: React.FC<IdLinkProps> = ({ id, children }) => {
+const IdLink: React.FC<IdLinkProps> = ({ id, label }) => {
   const navigate = useNavigate();
-  const handleLinkClick = () => {
+  const handleLinkClick = (event: React.MouseEvent) => {
+    event.preventDefault();
     navigate(`..?organizationId=${id}`);
   };
 
   return (
-    <OsdsLink color={ODS_THEME_COLOR_INTENT.primary} onClick={handleLinkClick}>
-      {children}
-    </OsdsLink>
+    <OdsLink
+      color={ODS_LINK_COLOR.primary}
+      onClick={handleLinkClick}
+      label={label}
+      iconAlignment={IconLinkAlignmentType.left}
+      href={`#`}
+    />
   );
 };
 
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ModalAddAndEditOrganization.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ModalAddAndEditOrganization.page.tsx
index 90e2ee471642..5bc17226b0b1 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ModalAddAndEditOrganization.page.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ModalAddAndEditOrganization.page.tsx
@@ -2,25 +2,18 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import {
-  OsdsFormField,
-  OsdsIcon,
-  OsdsInput,
-  OsdsText,
-  OsdsTooltip,
-  OsdsTooltipContent,
+  OdsFormField,
+  OdsIcon,
+  OdsInput,
+  OdsText,
+  OdsTooltip,
 } from '@ovhcloud/ods-components/react';
 import {
+  ODS_BUTTON_COLOR,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_INPUT_SIZE,
   ODS_INPUT_TYPE,
-  ODS_TOOLTIP_VARIANT,
+  ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { useMutation } from '@tanstack/react-query';
@@ -87,29 +80,19 @@ export default function ModalAddAndEditOrganization() {
     },
     onSuccess: () => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t(
             editOrganizationId
               ? 'zimbra_organization_edit_success_message'
               : 'zimbra_organization_add_success_message',
           )}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t(
             editOrganizationId
               ? 'zimbra_organization_add_error_message'
@@ -118,7 +101,7 @@ export default function ModalAddAndEditOrganization() {
               error: error.response?.data?.message,
             },
           )}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -163,18 +146,19 @@ export default function ModalAddAndEditOrganization() {
 
   return (
     <Modal
+      isOpen
       title={
         editOrganizationId
           ? t('zimbra_organization_edit_modal_title')
           : t('zimbra_organization_add_modal_title')
       }
-      color={ODS_THEME_COLOR_INTENT.info}
+      color={ODS_MODAL_COLOR.information}
       onDismissible={onClose}
-      dismissible={true}
+      isDismissible
       isLoading={isLoading}
       primaryButton={{
         testid: 'confirm-btn',
-        color: ODS_THEME_COLOR_INTENT.primary,
+        color: ODS_BUTTON_COLOR.primary,
         label: t('zimbra_organization_add'),
         disabled: isLoading || !isFormValid || isSending,
         action: handleSaveClick,
@@ -183,34 +167,19 @@ export default function ModalAddAndEditOrganization() {
       <>
         {!editOrganizationId && (
           <>
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              hue={ODS_THEME_COLOR_HUE._500}
-            >
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
               {t('zimbra_organization_add_modal_content_part1')}
-            </OsdsText>
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              hue={ODS_THEME_COLOR_HUE._500}
-            >
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
               {t('zimbra_organization_add_modal_content_part2')}
-            </OsdsText>
+            </OdsText>
           </>
         )}
-        <OsdsText
-          className="mt-5"
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+
+        <OdsText preset={ODS_TEXT_PRESET.paragraph} className="mt-5">
           {t('zimbra_organization_add_form_input_mandatory')}
-        </OsdsText>
-        <OsdsFormField
+        </OdsText>
+        <OdsFormField
           data-testid="field-name"
           error={
             form.name.hasError
@@ -219,41 +188,29 @@ export default function ModalAddAndEditOrganization() {
           }
           className="mt-5"
         >
-          <div slot="label">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              hue={ODS_THEME_COLOR_HUE._500}
-            >
-              {t('zimbra_organization_add_form_input_name_title')} *
-            </OsdsText>
-          </div>
+          <label slot="label">
+            {t('zimbra_organization_add_form_input_name_title')} *
+          </label>
 
-          <OsdsInput
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
             name="name"
             data-testid="input-name"
             placeholder={t(
               'zimbra_organization_add_form_input_name_placeholder',
             )}
-            color={
-              form.name.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            size={ODS_INPUT_SIZE.md}
+            hasError={form.name.hasError}
             value={form.name.value}
-            onOdsInputBlur={({ target: { name, value } }) =>
+            onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) => {
-              handleFormChange(name, value);
+            onOdsChange={({ detail: { name, value } }) => {
+              handleFormChange(name, String(value));
             }}
-            required
-          ></OsdsInput>
-        </OsdsFormField>
-        <OsdsFormField
+            isRequired
+          ></OdsInput>
+        </OdsFormField>
+        <OdsFormField
           data-testid="field-label"
           error={
             form.label.hasError
@@ -264,73 +221,47 @@ export default function ModalAddAndEditOrganization() {
           }
           className="mt-5"
         >
-          <div slot="label">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              hue={ODS_THEME_COLOR_HUE._500}
-            >
-              {t('zimbra_organization_add_form_input_label_title')} *
-              {
-                <OsdsTooltip
-                  role="tooltip"
-                  variant={ODS_TOOLTIP_VARIANT.standard}
-                >
-                  <OsdsTooltipContent slot="tooltip-content">
-                    <OsdsText
-                      level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                      color={ODS_THEME_COLOR_INTENT.text}
-                      size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                      hue={ODS_THEME_COLOR_HUE._500}
-                    >
-                      {t('zimbra_organization_add_form_input_label_tooltip')}
-                    </OsdsText>
-                  </OsdsTooltipContent>
-                  <OsdsIcon
-                    className="ml-2"
-                    name={ODS_ICON_NAME.HELP_CIRCLE}
-                    size={ODS_ICON_SIZE.xxs}
-                  ></OsdsIcon>
-                </OsdsTooltip>
-              }
-            </OsdsText>
-          </div>
-          <OsdsInput
+          <label slot="label">
+            {t('zimbra_organization_add_form_input_label_title')} *
+            {
+              <OdsTooltip role="tooltip" triggerId="tooltip-trigger">
+                <div id="tooltip-trigger">
+                  <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+                    {t('zimbra_organization_add_form_input_label_tooltip')}
+                  </OdsText>
+                </div>
+                <OdsIcon
+                  className="ml-2"
+                  name={ODS_ICON_NAME.circleQuestion}
+                ></OdsIcon>
+              </OdsTooltip>
+            }
+          </label>
+          <OdsInput
             type={ODS_INPUT_TYPE.text}
             data-testid="input-label"
             name="label"
             placeholder={t(
               'zimbra_organization_add_form_input_label_placeholder',
             )}
-            color={
-              form.label.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            size={ODS_INPUT_SIZE.md}
+            hasError={form.label.hasError}
             value={form.label.value}
-            onOdsInputBlur={({ target: { name, value } }) =>
+            onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) =>
-              handleFormChange(name, value)
+            onOdsChange={({ detail: { name, value } }) =>
+              handleFormChange(name, String(value))
             }
-            required
-          ></OsdsInput>
+            isRequired
+          ></OdsInput>
           <div slot="helper">
-            <OsdsText
-              color={ODS_THEME_COLOR_INTENT.default}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-              hue={ODS_THEME_COLOR_HUE._500}
-            >
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
               {t('zimbra_organization_add_form_input_label_helper', {
                 value: 12,
               })}
-            </OsdsText>
+            </OdsText>
           </div>
-        </OsdsFormField>
+        </OdsFormField>
       </>
     </Modal>
   );
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ModalDeleteOrganization.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ModalDeleteOrganization.component.tsx
index 67f257988ca5..9e390c826dd7 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ModalDeleteOrganization.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/ModalDeleteOrganization.component.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_COLOR_HUE,
-} from '@ovhcloud/ods-common-theming';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
-import { OsdsMessage, OsdsText } from '@ovhcloud/ods-components/react';
+  ODS_BUTTON_COLOR,
+  ODS_BUTTON_VARIANT,
+  ODS_MESSAGE_COLOR,
+  ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
+import { OdsMessage, OdsText } from '@ovhcloud/ods-components/react';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { useMutation } from '@tanstack/react-query';
 import { ApiError } from '@ovh-ux/manager-core-api';
@@ -39,30 +40,20 @@ export default function ModalDeleteOrganization() {
       deleteZimbraPlatformOrganization(platformId, organizationId),
     onSuccess: () => {
       addSuccess(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_organization_delete_success_message')}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
 
     onError: (error: ApiError) => {
       addError(
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_organization_delete_error_message', {
             error: error?.response?.data?.message,
           })}
-        </OsdsText>,
+        </OdsText>,
         true,
       );
     },
@@ -81,14 +72,15 @@ export default function ModalDeleteOrganization() {
 
   return (
     <Modal
+      isOpen
       title={t('zimbra_organization_delete_modal_title')}
-      color={ODS_THEME_COLOR_INTENT.warning}
+      color={ODS_MODAL_COLOR.warning}
       onDismissible={onClose}
-      dismissible={true}
+      isDismissible
       isLoading={isLoading}
       primaryButton={{
         testid: 'delete-btn',
-        color: ODS_THEME_COLOR_INTENT.primary,
+        variant: ODS_BUTTON_VARIANT.default,
         label: t('zimbra_organization_delete'),
         action: handleDeleteClick,
         disabled:
@@ -99,41 +91,25 @@ export default function ModalDeleteOrganization() {
       }}
     >
       <>
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          hue={ODS_THEME_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('zimbra_organization_delete_modal_content')}
-        </OsdsText>
+        </OdsText>
 
         {domains?.length > 0 && (
-          <OsdsMessage
-            color={ODS_THEME_COLOR_INTENT.error}
-            icon={ODS_ICON_NAME.WARNING_CIRCLE}
+          <OdsMessage
+            color={ODS_MESSAGE_COLOR.critical}
             className="mt-4"
             data-testid="banner-message"
           >
             <div className="flex flex-col text-left ml-4">
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-                hue={ODS_THEME_COLOR_HUE._500}
-              >
+              <OdsText preset={ODS_TEXT_PRESET.paragraph} className="font-bold">
                 {t('zimbra_organization_delete_modal_message_disabled_part1')}
-              </OsdsText>
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-                hue={ODS_THEME_COLOR_HUE._500}
-              >
+              </OdsText>
+              <OdsText preset={ODS_TEXT_PRESET.paragraph}>
                 {t('zimbra_organization_delete_modal_message_disabled_part2')}
-              </OsdsText>
+              </OdsText>
             </div>
-          </OsdsMessage>
+          </OdsMessage>
         )}
       </>
     </Modal>
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/Organizations.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/Organizations.tsx
index 35e1e8893926..d1a5b63716b4 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/Organizations.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Organizations/Organizations.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
 import { Outlet } from 'react-router-dom';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import {
   Datagrid,
@@ -38,7 +36,7 @@ export type OrganizationItem = {
 const columns: DatagridColumn<OrganizationItem>[] = [
   {
     id: 'name',
-    cell: (item: OrganizationItem) => <IdLink id={item.id}>{item.name}</IdLink>,
+    cell: (item: OrganizationItem) => <IdLink id={item.id} label={item.name} />,
     label: 'zimbra_organization_name',
   },
   {
@@ -50,13 +48,7 @@ const columns: DatagridColumn<OrganizationItem>[] = [
   {
     id: 'account',
     cell: (item: OrganizationItem) => (
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.text}
-        size={ODS_TEXT_SIZE._100}
-        level={ODS_TEXT_LEVEL.body}
-      >
-        {item.account}
-      </OsdsText>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.account}</OdsText>
     ),
     label: 'zimbra_organization_account_number',
   },
@@ -103,34 +95,28 @@ export default function Organizations() {
     })) ?? [];
 
   const hrefAddOrganization = useGenerateUrl('./add', 'href');
-
+  const handleOrganizationClick = () => {
+    window.location.href = hrefAddOrganization;
+  };
   return (
     <div className="py-6 mt-8">
-      <Notifications />
       <Outlet />
       {platformUrn && (
         <>
           <div className="flex items-center justify-between">
             <ManagerButton
-              color={ODS_THEME_COLOR_INTENT.primary}
-              inline
+              id="add-organization-btn"
+              color={ODS_BUTTON_COLOR.primary}
+              inline-block
               size={ODS_BUTTON_SIZE.sm}
-              href={hrefAddOrganization}
+              onClick={handleOrganizationClick}
               urn={platformUrn}
               iamActions={[IAM_ACTIONS.organization.create]}
               data-testid="add-organization-btn"
               className="mb-6"
-            >
-              <span slot="start">
-                <OsdsIcon
-                  name={ODS_ICON_NAME.PLUS}
-                  size={ODS_ICON_SIZE.sm}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  contrasted
-                ></OsdsIcon>
-              </span>
-              <span slot="end">{t('zimbra_organization_cta')}</span>
-            </ManagerButton>
+              icon={ODS_ICON_NAME.plus}
+              label={t('zimbra_organization_cta')}
+            />
           </div>
           {isLoading ? (
             <Loading />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ActionButtonRedirections.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ActionButtonRedirections.component.tsx
index 8913db0808df..d0e90fecb57c 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ActionButtonRedirections.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ActionButtonRedirections.component.tsx
@@ -26,15 +26,21 @@ const ActionButtonRedirections: React.FC<ActionButtonRedirectionsAccountProps> =
     ...params,
   });
 
+  const handleEditRedirectionsClick = () => {
+    window.location.href = hrefEditRedirections;
+  };
+
   const hrefDeleteRedirections = useGenerateUrl('./delete', 'href', {
     deleteRedirectionId: redirectionsItem.id,
     ...params,
   });
-
+  const handleDeleteRedirectionsClick = () => {
+    window.location.href = hrefDeleteRedirections;
+  };
   const actionItems = [
     {
       id: 1,
-      href: hrefEditRedirections,
+      onClick: handleEditRedirectionsClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.redirection.edit],
       label: t('zimbra_redirections_datagrid_tooltip_modification'),
@@ -42,7 +48,7 @@ const ActionButtonRedirections: React.FC<ActionButtonRedirectionsAccountProps> =
     },
     {
       id: 2,
-      href: hrefDeleteRedirections,
+      onClick: handleDeleteRedirectionsClick,
       urn: platformUrn,
       iamActions: [IAM_ACTIONS.redirection.delete],
       label: t('zimbra_redirections_datagrid_tooltip_delete'),
@@ -50,7 +56,8 @@ const ActionButtonRedirections: React.FC<ActionButtonRedirectionsAccountProps> =
   ];
   return (
     <ActionMenu
-      disabled={redirectionsItem.status !== ResourceStatus.READY}
+      id={redirectionsItem.id}
+      isDisabled={redirectionsItem.status !== ResourceStatus.READY}
       items={actionItems.filter((i) => !i.hidden)}
       isCompact
     />
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalAddAndEditRedirections.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalAddAndEditRedirections.page.tsx
index 089e94627ce6..c135fddf6eff 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalAddAndEditRedirections.page.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalAddAndEditRedirections.page.tsx
@@ -1,23 +1,18 @@
 import React, { useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import {
-  OsdsCheckboxButton,
-  OsdsFormField,
-  OsdsInput,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsText,
+  OdsCheckbox,
+  OdsFormField,
+  OdsInput,
+  OdsSelect,
+  OdsText,
 } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import {
-  ODS_CHECKBOX_BUTTON_SIZE,
-  ODS_INPUT_SIZE,
+  ODS_BUTTON_COLOR,
   ODS_INPUT_TYPE,
+  ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import Modal from '@/components/Modals/Modal';
@@ -151,8 +146,9 @@ export default function ModalAddAndEditRedirections() {
 
   return (
     <Modal
-      color={ODS_THEME_COLOR_INTENT.primary}
-      dismissible
+      isOpen
+      color={ODS_MODAL_COLOR.information}
+      isDismissible
       title={t(
         editRedirectionId
           ? 'zimbra_redirections_title_edit'
@@ -161,13 +157,13 @@ export default function ModalAddAndEditRedirections() {
       onDismissible={onClose}
       secondaryButton={{
         testid: 'cancel-btn',
-        color: ODS_THEME_COLOR_INTENT.primary,
+        color: ODS_BUTTON_COLOR.primary,
         label: t('zimbra_redirections_add_btn_cancel'),
         action: onClose,
       }}
       primaryButton={{
         testid: 'confirm-btn',
-        color: ODS_THEME_COLOR_INTENT.primary,
+        color: ODS_BUTTON_COLOR.primary,
         label: t('zimbra_redirections_add_btn_confirm'),
         action: handleClickConfirm,
         disabled: !isFormValid,
@@ -175,102 +171,76 @@ export default function ModalAddAndEditRedirections() {
       isLoading={isLoadingDomain || isLoadingAccount}
     >
       <>
-        <OsdsText
-          className="mt-5"
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           <div>{t('zimbra_redirections_edit_1')}</div>
-        </OsdsText>
-        <OsdsText
-          className="my-5"
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-        >
+        </OdsText>
+        <OdsText preset={ODS_TEXT_PRESET.paragraph} className="my-5">
           <div>{t('zimbra_redirections_edit_2')}</div>
-        </OsdsText>
+        </OdsText>
 
-        <OsdsFormField data-testid="field-from" className="mt-5">
-          <div slot="label">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            >
-              {t('zimbra_redirections_add_form_input_name_title_from')} *
-            </OsdsText>
-          </div>
+        <OdsFormField data-testid="field-from" className="mt-5">
+          <label slot="label">
+            {t('zimbra_redirections_add_form_input_name_title_from')} *
+          </label>
           {editEmailAccountId || editRedirectionId ? (
-            <OsdsInput
+            <OdsInput
               type={ODS_INPUT_TYPE.email}
               data-testid="input-from"
               name="from"
               value={accountDetail?.currentState?.email}
-              disabled={true}
-              readOnly={true}
+              isDisabled
+              isReadonly
             />
           ) : (
             <>
               <div className="flex">
-                <OsdsInput
+                <OdsInput
                   type={ODS_INPUT_TYPE.text}
                   name="account"
                   placeholder={t(
                     'zimbra_redirections_add_input_email_placeholder',
                   )}
-                  color={
-                    form.account.hasError
-                      ? ODS_THEME_COLOR_INTENT.error
-                      : ODS_THEME_COLOR_INTENT.default
-                  }
-                  size={ODS_INPUT_SIZE.md}
+                  hasError={form.account.hasError}
                   value={form.account.value}
-                  onOdsInputBlur={({ target: { name, value } }) =>
+                  onOdsBlur={({ target: { name, value } }) =>
                     handleFormChange(name, value.toString())
                   }
-                  onOdsValueChange={({ detail: { name, value } }) => {
-                    handleFormChange(name, value);
+                  onOdsChange={({ detail: { name, value } }) => {
+                    handleFormChange(name, String(value));
                   }}
-                  required
+                  isRequired
                   className="rounded-r-none border-r-0 w-1/2"
                   data-testid="input-account"
-                ></OsdsInput>
-                <OsdsInput
+                ></OdsInput>
+                <OdsInput
                   type={ODS_INPUT_TYPE.text}
-                  color={ODS_THEME_COLOR_INTENT.default}
-                  size={ODS_INPUT_SIZE.md}
                   value={'@'}
-                  readOnly={true}
-                  disabled={true}
+                  name={'@'}
+                  isReadonly
+                  isDisabled
                   className="w-10 rounded-none pl-5 pr-0"
-                ></OsdsInput>
-                <OsdsSelect
+                ></OdsInput>
+                <OdsSelect
                   name="domain"
                   value={form.domain.value}
                   className="rounded-l-none border-l-0 w-1/2"
-                  color={
-                    form.domain.hasError
-                      ? ODS_THEME_COLOR_INTENT.error
-                      : ODS_THEME_COLOR_INTENT.default
-                  }
-                  required
+                  hasError={form.domain.hasError}
+                  isRequired
                   data-testid="select-domain"
                   {...(isLoadingDomain && { disabled: true })}
-                  onOdsValueChange={({ detail: { name, value } }) =>
-                    handleFormChange(name, value as string)
+                  onOdsChange={({ detail: { name, value } }) =>
+                    handleFormChange(name, value)
                   }
                 >
                   <span slot="placeholder">
                     {t('zimbra_redirections_add_select_domain_placeholder')}
                   </span>
                   {domainList?.map(({ currentState: domain }) => (
-                    <OsdsSelectOption key={domain.name} value={domain.name}>
+                    <option key={domain.name} value={domain.name}>
                       {domain.name}
-                    </OsdsSelectOption>
+                    </option>
                   ))}
-                </OsdsSelect>
+                </OdsSelect>
               </div>
               {isLoadingDomain && (
                 <div slot="helper">
@@ -279,60 +249,41 @@ export default function ModalAddAndEditRedirections() {
               )}
             </>
           )}
-        </OsdsFormField>
-        <OsdsFormField data-testid="field-to" className="mt-5">
-          <div slot="label">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-            >
-              {t('zimbra_redirections_add_form_input_name_title_to')} *
-            </OsdsText>
-          </div>
-          <OsdsInput
+        </OdsFormField>
+        <OdsFormField data-testid="field-to" className="mt-5">
+          <label slot="label">
+            {t('zimbra_redirections_add_form_input_name_title_to')} *
+          </label>
+          <OdsInput
             type={ODS_INPUT_TYPE.email}
             data-testid="input-to"
             name="to"
             value={form.to.value}
-            error={form.to.hasError}
-            color={
-              form.to.hasError
-                ? ODS_THEME_COLOR_INTENT.error
-                : ODS_THEME_COLOR_INTENT.default
-            }
-            onOdsInputBlur={({ target: { name, value } }) =>
+            hasError={form.to.hasError}
+            onOdsBlur={({ target: { name, value } }) =>
               handleFormChange(name, value.toString())
             }
-            onOdsValueChange={({ detail: { name, value } }) =>
-              handleFormChange(name, value)
+            onOdsChange={({ detail: { name, value } }) =>
+              handleFormChange(name, String(value))
             }
-            required
+            isRequired
           />
-        </OsdsFormField>
+        </OdsFormField>
 
-        <OsdsFormField data-testid="field-checkbox" className="mt-5">
-          <OsdsCheckboxButton
-            size={ODS_CHECKBOX_BUTTON_SIZE.sm}
-            checked={form.checked.value === 'checked'}
+        <OdsFormField data-testid="field-checkbox" className="mt-5">
+          <OdsCheckbox
+            isChecked={form.checked.value === 'checked'}
             onClick={() =>
               handleFormChange(
                 'checked',
                 form.checked.value === 'checked' ? '' : 'checked',
               )
             }
+            name="checkbox-button-redirection"
           >
-            <span slot="end">
-              <OsdsText
-                level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-              >
-                {t('zimbra_redirections_add_form_input_checkbox')}
-              </OsdsText>
-            </span>
-          </OsdsCheckboxButton>
-        </OsdsFormField>
+            {t('zimbra_redirections_add_form_input_checkbox')}
+          </OdsCheckbox>
+        </OdsFormField>
       </>
     </Modal>
   );
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalDeleteRedirections.component.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalDeleteRedirections.component.tsx
index f842dbb31331..74c4f6f1ca31 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalDeleteRedirections.component.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/ModalDeleteRedirections.component.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
 import {
-  ODS_TEXT_COLOR_HUE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_BUTTON_COLOR,
+  ODS_BUTTON_VARIANT,
+  ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import Modal from '@/components/Modals/Modal';
 import { useGenerateUrl } from '@/hooks';
 
@@ -23,13 +23,14 @@ export default function ModalDeleteRedirections() {
   const goBack = () => navigate(goBackUrl);
 
   const buttonProps = {
-    color: ODS_THEME_COLOR_INTENT.primary,
+    color: ODS_BUTTON_COLOR.primary,
     action: goBack,
   };
 
   return (
     <Modal
-      color={ODS_THEME_COLOR_INTENT.warning}
+      isOpen
+      color={ODS_MODAL_COLOR.warning}
       title={t('zimbra_redirections_delete_modal_title')}
       onDismissible={goBack}
       secondaryButton={{
@@ -40,38 +41,27 @@ export default function ModalDeleteRedirections() {
       primaryButton={{
         ...buttonProps,
         testid: 'delete-btn',
+        variant: ODS_BUTTON_VARIANT.default,
         label: t('zimbra_redirections_delete_button_delete'),
       }}
-      dismissible
+      isDismissible
     >
       <>
-        <OsdsText
+        <OdsText
+          preset={ODS_TEXT_PRESET.paragraph}
           className="mt-5 mb-5"
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_TEXT_SIZE._100}
-          level={ODS_TEXT_LEVEL.body}
           data-testid="modal-content"
         >
           {t('zimbra_redirections_delete_modal_content')}
-        </OsdsText>
+        </OdsText>
 
-        <OsdsText
-          size={ODS_TEXT_SIZE._500}
-          color={ODS_THEME_COLOR_INTENT.text}
-          level={ODS_TEXT_LEVEL.body}
-          hue={ODS_TEXT_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph} className="font-bold">
           {t('zimbra_redirections_delete_modal_from')}
-        </OsdsText>
+        </OdsText>
 
-        <OsdsText
-          size={ODS_TEXT_SIZE._500}
-          color={ODS_THEME_COLOR_INTENT.text}
-          level={ODS_TEXT_LEVEL.body}
-          hue={ODS_TEXT_COLOR_HUE._500}
-        >
+        <OdsText preset={ODS_TEXT_PRESET.paragraph} className="font-bold">
           {t('zimbra_redirections_delete_modal_to')}
-        </OsdsText>
+        </OdsText>
       </>
     </Modal>
   );
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/Redirections.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/Redirections.tsx
index 36492e33fa1d..3ae83c1d7918 100644
--- a/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/Redirections.tsx
+++ b/packages/manager/apps/zimbra/src/pages/dashboard/Redirections/Redirections.tsx
@@ -8,13 +8,11 @@ import {
 } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useSearchParams } from 'react-router-dom';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
 } from '@ovhcloud/ods-components';
-import { OsdsIcon } from '@ovhcloud/ods-components/react';
 import ActionButtonRedirections from './ActionButtonRedirections.component';
 import { useGenerateUrl, usePlatform } from '@/hooks';
 import { IAM_ACTIONS } from '@/utils/iamAction.constants';
@@ -80,12 +78,15 @@ export function Redirections() {
   const [searchParams] = useSearchParams();
   const editEmailAccountId = searchParams.get('editEmailAccountId');
   const hrefAddRedirection = useGenerateUrl('./add', 'href');
+
+  const handleAddEmailRedirectionClick = () => {
+    window.location.href = hrefAddRedirection;
+  };
   // to update
   const isLoading = false;
 
   return (
     <div className="py-6 mt-8">
-      {!editEmailAccountId && <Notifications />}
       <Outlet />
       {platformUrn && (
         <>
@@ -96,25 +97,18 @@ export function Redirections() {
           )}
           <div className="flex items-center justify-between">
             <ManagerButton
-              color={ODS_THEME_COLOR_INTENT.primary}
-              inline
+              color={ODS_BUTTON_COLOR.primary}
+              inline-block
               size={ODS_BUTTON_SIZE.sm}
-              href={hrefAddRedirection}
+              onClick={handleAddEmailRedirectionClick}
               urn={platformUrn}
               iamActions={[IAM_ACTIONS.redirection.create]}
               data-testid="add-redirection-btn"
+              id="add-redirection-btn"
               className="mb-6"
-            >
-              <span slot="start">
-                <OsdsIcon
-                  name={ODS_ICON_NAME.PLUS}
-                  size={ODS_ICON_SIZE.sm}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  contrasted
-                ></OsdsIcon>
-              </span>
-              <span slot="end">{t('zimbra_redirections_cta')}</span>
-            </ManagerButton>
+              icon={ODS_ICON_NAME.plus}
+              label={t('zimbra_redirections_cta')}
+            />
           </div>
           {isLoading ? (
             <Loading />
diff --git a/yarn.lock b/yarn.lock
index 0e6ff4dc44b8..36be67550685 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4481,10 +4481,10 @@
     "@ovhcloud/ods-common-stencil" "17.2.2"
     "@ovhcloud/ods-common-theming" "17.2.2"
 
-"@ovhcloud/ods-components@18.0.0":
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-components/-/ods-components-18.0.0.tgz#b0e4da6c35c19004f35bac6b34abb1f78c6d1af0"
-  integrity sha512-Nhgi8iMX/+tWJb6D8WSN8qNqC32XEwdDL0rc7o9V0OwcXPwSqu7QtTYKB+1s1kGTDxfyl7HGrSDYbqgUI0niMw==
+"@ovhcloud/ods-components@18.1.0":
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-components/-/ods-components-18.1.0.tgz#f44ac8bfef7779fe91d11344b8d34ab32e9d23d4"
+  integrity sha512-sVRK//y/EtB8etcHgsXqvVKVdfsjcSCTxRjPSOe+9OqRecxGiQGQGD8mWbJS7Mn8wbRkVcLKseHB4qsHuyfN5Q==
   dependencies:
     "@floating-ui/dom" "1.6.3"
     "@stencil/core" "4.16.0"
@@ -4507,10 +4507,10 @@
   dependencies:
     "@ovhcloud/ods-common-theming" "17.2.2"
 
-"@ovhcloud/ods-themes@18.0.0":
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-themes/-/ods-themes-18.0.0.tgz#0a7c658e0e9d572262ed41896fee4819c2764167"
-  integrity sha512-0PfXUyF6bX9emb/a6S16QThKsSXyvrNYT3n1zQF/le8tMXP7292TGKIgqXhsZmkcD9tCdD6VLXuJTS8Zv3a5Yg==
+"@ovhcloud/ods-themes@18.1.0":
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-themes/-/ods-themes-18.1.0.tgz#018aa644f1a133556072b0dcdb6ce2d64fdec54d"
+  integrity sha512-2TAHVQKG1c/1h0t5Cna9Vmbal/LiBbvY+neaXSDPLd9bLgGPf0og5Q7GB0XHCPYUv6w2uA86XptmBZnw89NdZg==
 
 "@ovhcloud/reket-axios-client@^0.2.1":
   version "0.2.1"
@@ -9592,12 +9592,7 @@ angular-ui-utils@angular-ui/ui-utils#0.2.3:
   version "0.0.0"
   resolved "https://codeload.github.com/angular-ui/ui-utils/tar.gz/125cb72d692f9f116454f338f6a5471f3088f9b9"
 
-angular-ui-validate@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/angular-ui-validate/-/angular-ui-validate-1.2.3.tgz#beb141f64409bfddba65c12f7581b893ddf59321"
-  integrity sha512-RiBd6JEt/zXXbSQMZ6j+0b5xxQfh2P9VFqDPaFEqOO68P/sindp318EQ59BoFn/DnQ3qI+b9MQQGv24sGZhZ2A==
-
-angular-ui-validate@angular-ui/ui-validate#~1.2.2:
+angular-ui-validate@^1.2.3, angular-ui-validate@angular-ui/ui-validate#~1.2.2:
   version "1.2.3"
   resolved "https://codeload.github.com/angular-ui/ui-validate/tar.gz/0d982055360032be2421b969fa1c83bf053e735a"
 
@@ -25138,16 +25133,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -25277,14 +25263,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -27882,7 +27861,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -27908,15 +27887,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"