From 46dfde334d4c08c2c391e4d98f3570d685e16c0b Mon Sep 17 00:00:00 2001
From: Nicolas Pierre-charles <nicolas.pierre-charles.ext@corp.ovh.com>
Date: Wed, 11 Dec 2024 18:43:44 +0100
Subject: [PATCH] feat(kms): ods18 upgrade

ref: MANAGER-15416

Signed-off-by: Nicolas Pierre-charles <nicolas.pierre-charles.ext@corp.ovh.com>
---
 .../manager-react-components/package.json     |   8 +-
 .../clipboard/clipboard.component.tsx         |   6 +-
 .../dashboard-tile.component.tsx              |   2 +-
 .../dashboard-tile/tile-block.component.tsx   |  16 +-
 .../guides-header/guides-header.component.tsx |   2 +-
 .../menus/action/action.component.tsx         |  64 +--
 .../menus/guide/guide.component.tsx           |  10 +-
 .../templates/base/base.component.tsx         |   9 +-
 .../delete-modal/delete-modal.component.tsx   |  21 +-
 .../onboarding/onboarding.component.tsx       |  47 +-
 .../update-name-modal.component.tsx           |  52 +-
 .../typography/links/links.component.tsx      |   9 +-
 .../components/typography/links/links.scss    |   4 +
 .../manager-react-components/src/lib.scss     |   1 +
 .../apps/key-management-service/package.json  |  28 +-
 .../playwright.config.ts                      |  15 -
 .../apps/key-management-service/src/App.tsx   |   3 -
 .../src/components/Breadcrumb/Breadcrumb.tsx  |  13 +-
 .../ButtonTooltip/ButtonTooltip.tsx           |  78 ---
 .../src/components/Error/Error.tsx            |  52 --
 .../components/Guide/KmsGuidesHeader.spec.tsx |  12 +-
 .../src/components/Guide/KmsGuidesHeader.tsx  |  63 ++-
 .../src/components/Listing/ListingCells.tsx   |  88 ++--
 .../src/components/Loading/Loading.tsx        |   4 +-
 .../src/components/Modal/Modal.tsx            |  29 --
 .../IdentityGroupListModal.component.tsx      |  88 ----
 ...ntityServiceAccountListModal.component.tsx |  88 ----
 .../IdentityUserListModal.component.tsx       |  90 ----
 .../CredentialDatagridCells.tsx               |  20 +-
 .../CredentialStatus.component.tsx            |  37 +-
 .../CredentialStatus.spec.tsx                 |  22 +-
 .../tile-item/tileItem.component.tsx          |  26 -
 .../tile-separator/tileSeparator.tsx          |   7 -
 .../tileValueDate.component.tsx               |   5 +-
 .../tile-value/tileValue.component.tsx        |  19 +-
 .../dashboard/tile/tile.component.tsx         |  21 -
 .../Create/OrderConfirmation.tsx              | 127 ++---
 .../layout-helpers/Create/RegionSelector.tsx  | 159 +++---
 .../layout-helpers/Dashboard/Dashboard.tsx    |  93 ++--
 .../BillingInformationsTile.constants.tsx     |   6 +
 .../BillingInformationsTile.tsx               | 233 +++++----
 .../InformationsTile.tsx                      | 195 ++++----
 .../OkmsServiceState.component.tsx            |  38 +-
 .../layout-helpers/Listing/TableContainer.tsx |  36 +-
 .../menu/KmsActionMenu.component.tsx          |  10 +-
 .../create/serviceKeyOperationCheckbox.tsx    |  42 +-
 .../create/serviceKeyTypeRadioButton.tsx      |  41 +-
 .../ServiceKeyDeactivateModal.component.tsx   | 189 --------
 .../ServiceKeyEditNameModal.component.tsx     | 144 ------
 .../ServiceKeyStateActions.component.tsx      | 113 ++---
 .../serviceKeyStatus.component.tsx            |  46 +-
 .../serviceKeyStatus.spec.tsx                 |  27 +-
 .../src/data/hooks/useCreateOkmsServiceKey.ts |   5 +-
 .../key-management-service/src/global.css     |   4 +
 .../hooks/breadcrumb/useBreadcrumb.spec.tsx   |   6 +-
 .../src/hooks/breadcrumb/useBreadcrumb.ts     |  18 +-
 .../serviceKey/useServiceKeyActions.spec.tsx  |  26 +-
 .../serviceKey/useServiceKeyActionsList.tsx   |  63 ++-
 .../key-management-service/src/index.scss     |  11 -
 .../apps/key-management-service/src/index.tsx |   4 +-
 .../key-management-service/src/pages/_app.tsx |  16 -
 .../src/pages/create/index.tsx                |  35 +-
 .../src/pages/credential/Credential.page.tsx  |  55 +--
 .../create/CreateAddIdentities.component.tsx  |  75 ++-
 .../create/CreateCredential.page.tsx          |  18 +-
 .../CreateGeneralInformations.component.tsx   |  44 +-
 ...CreateCredentialIdentityGroupList.page.tsx |  76 ++-
 ...dentialIdentityServiceAccountList.page.tsx |  76 ++-
 .../CreateCredentialIdentityUserList.page.tsx |  76 ++-
 ...CreateCredentialConfirmation.component.tsx |  24 +-
 ...redentialConfirmationDetails.component.tsx |   8 +-
 ...ntialConfirmationDetailsText.component.tsx |   7 +-
 ...entialConfirmationPrivateKey.component.tsx |  90 ++--
 ...alInformationsCreationMethod.component.tsx | 186 ++++---
 .../CreateGeneralInformationsDescription.tsx  |  58 +--
 ...reateGeneralInformationsName.component.tsx |  68 ++-
 .../CreateGeneralInformationsValidity.tsx     | 102 ++--
 .../IdentitiesRootAccount.component.tsx       |  54 +--
 .../IdentitiesSelectedBase.component.tsx      |  50 +-
 .../IdentitiesSelectedGroups.component.tsx    |   2 +-
 ...itiesSelectedServiceAccounts.component.tsx |   2 +-
 .../IdentitiesSelectedUsersList.component.tsx |  10 +-
 .../badge/IdentitiesStatusBadge.component.tsx |  69 ++-
 .../group/IdentityGroupDeleteActionCell.tsx   |  19 +-
 ...IdentityServiceAccountDeleteActionCell.tsx |  19 +-
 .../user/IdentityUserDeleteActionCell.tsx     |  19 +-
 .../user/IdentityUserStatusCell.component.tsx |   2 +-
 .../list/IdentitiesGroupList.component.tsx    |  17 +-
 ...IdentitiesServiceAccountList.component.tsx |  17 +-
 .../list/IdentitiesUserList.component.tsx     |  19 +-
 .../tile/IdentitiesBaseTile.component.tsx     |  52 +-
 .../tile/IdentitiesGroupTile.component.tsx    |  20 +-
 ...IdentitiesServiceAccountTile.component.tsx |  20 +-
 .../tile/IdentitiesTileText.component.tsx     |  17 +-
 .../tile/IdentitiesUserTile.component.tsx     |  36 +-
 .../delete/DeleteCredentialModal.page.tsx     |   1 +
 .../generalInformations.page.tsx              |  40 +-
 .../credentialList/CredentialList.page.tsx    |  53 +-
 .../delete/DeleteCredentialModal.page.tsx     |   1 +
 .../GeneralInformations.tsx                   |  10 +-
 .../updateName/OkmsNameUpdateModal.tsx        |   9 +-
 .../src/pages/dashboard/index.tsx             |  28 +-
 .../serviceKeyList/ServiceKeyList.page.tsx    |  39 +-
 .../src/pages/listing/index.tsx               |  43 +-
 .../pages/listing/terminate/TerminateKms.tsx  |   1 +
 .../src/pages/onboarding/index.tsx            |  20 +-
 .../src/pages/serviceKey/CreateKey.page.tsx   | 455 +++---------------
 .../GeneralInformationSection.component.tsx   |  91 ++++
 .../serviceKey/KeyTypeSection.component.tsx   | 199 ++++++++
 .../serviceKey/KeyUsageSection.component.tsx  |  88 ++++
 .../ProtectionLevelSection.component.tsx      |  57 +++
 .../src/pages/serviceKey/ServiceKey.page.tsx  | 284 ++++++-----
 .../DeactivateServiceKeyModal.page.tsx        | 161 ++++++-
 .../EditServiceKeyNameModal.page.tsx          | 138 +++++-
 .../key-management-service/src/setupTests.tsx |   9 +-
 .../src/types/okmsServiceKey.type.ts          |   2 +-
 .../credential/validateCredentialName.ts      |   4 +-
 .../serviceKey/validateServiceKeyName.ts      |   4 +-
 .../key-management-service/tailwind.config.js |  12 +-
 .../apps/key-management-service/tsconfig.json |   3 +-
 packages/manager/apps/zimbra/package.json     |   4 +-
 yarn.lock                                     | 168 +++++--
 122 files changed, 2810 insertions(+), 3267 deletions(-)
 create mode 100644 packages/manager-react-components/src/components/typography/links/links.scss
 delete mode 100644 packages/manager/apps/key-management-service/playwright.config.ts
 delete mode 100644 packages/manager/apps/key-management-service/src/components/ButtonTooltip/ButtonTooltip.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/Error/Error.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/Modal/Modal.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityGroupListModal.component.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityServiceAccountListModal.component.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityUserListModal.component.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/dashboard/tile-item/tileItem.component.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/dashboard/tile-separator/tileSeparator.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/dashboard/tile/tile.component.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyDeactivateModal.component.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyEditNameModal.component.tsx
 delete mode 100644 packages/manager/apps/key-management-service/src/index.scss
 delete mode 100644 packages/manager/apps/key-management-service/src/pages/_app.tsx
 create mode 100644 packages/manager/apps/key-management-service/src/pages/serviceKey/GeneralInformationSection.component.tsx
 create mode 100644 packages/manager/apps/key-management-service/src/pages/serviceKey/KeyTypeSection.component.tsx
 create mode 100644 packages/manager/apps/key-management-service/src/pages/serviceKey/KeyUsageSection.component.tsx
 create mode 100644 packages/manager/apps/key-management-service/src/pages/serviceKey/ProtectionLevelSection.component.tsx

diff --git a/packages/manager-react-components/package.json b/packages/manager-react-components/package.json
index 85b858119530..0d13813ca511 100644
--- a/packages/manager-react-components/package.json
+++ b/packages/manager-react-components/package.json
@@ -55,8 +55,8 @@
     "@ovh-ux/manager-react-shell-client": "^0.8.3",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/manager-vite-config": "^0.8.3",
-    "@ovhcloud/ods-components": "^18.3.0",
-    "@ovhcloud/ods-themes": "^18.3.0",
+    "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "@storybook/addon-docs": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
@@ -113,8 +113,8 @@
   "peerDependencies": {
     "@ovh-ux/manager-core-api": "^0.9.0-alpha.0",
     "@ovh-ux/manager-react-shell-client": "^0.8.3",
-    "@ovhcloud/ods-components": "^18.3.0",
-    "@ovhcloud/ods-themes": "^18.3.0",
+    "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "i18next": "^23.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/packages/manager-react-components/src/components/clipboard/clipboard.component.tsx b/packages/manager-react-components/src/components/clipboard/clipboard.component.tsx
index f8992e0d3dd1..e17fb1dc3a5d 100644
--- a/packages/manager-react-components/src/components/clipboard/clipboard.component.tsx
+++ b/packages/manager-react-components/src/components/clipboard/clipboard.component.tsx
@@ -4,15 +4,17 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import './translations';
 
-export const Clipboard: React.FC<Partial<OdsClipboardAttribute>> = (props) => {
+export const Clipboard: React.FC<
+  Partial<OdsClipboardAttribute> & { className?: string }
+> = (props) => {
   const { t } = useTranslation('clipboard');
 
   return (
     <OdsClipboard
-      {...props}
       data-testid="clipboard"
       labelCopySuccess={t('clipboard_copy_success')}
       labelCopy={t('clipboard_copy')}
+      {...props}
     />
   );
 };
diff --git a/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx b/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx
index 568f1f7d6497..0dd49eaba0b7 100644
--- a/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx
+++ b/packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx
@@ -5,7 +5,7 @@ import { TileBlock } from './tile-block.component';
 
 export type DashboardTileBlockItem = {
   id: string;
-  label?: string;
+  label?: React.ReactNode;
   value: React.ReactNode;
 };
 
diff --git a/packages/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx b/packages/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx
index a6dfd15cd6c2..a0f7ce29d05b 100644
--- a/packages/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx
+++ b/packages/manager-react-components/src/components/content/dashboard-tile/tile-block.component.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsText } from '@ovhcloud/ods-components/react';
 
 export type TileBlockProps = React.PropsWithChildren<{
-  label?: string;
+  label?: React.ReactNode;
 }>;
 
 export const TileBlock: React.FC<React.PropsWithChildren<TileBlockProps>> = ({
   label,
   children,
 }) => (
-  <dl className="flex flex-col gap-y-[8px] my-0">
-    <dt className="tile-block-title m-0 text-[--ods-color-heading] text-[16px] leading-[16px] font-semibold">
-      {label}
-    </dt>
-    <dd className="tile-block-description m-0 text-[--ods-color-text] text-[16px] leading-[16px] min-h-[16px]">
-      {children}
-    </dd>
-  </dl>
+  <div className="grid gap-1">
+    <OdsText preset={ODS_TEXT_PRESET.heading6}>{label}</OdsText>
+    <OdsText preset={ODS_TEXT_PRESET.paragraph}>{children}</OdsText>
+  </div>
 );
diff --git a/packages/manager-react-components/src/components/guides-header/guides-header.component.tsx b/packages/manager-react-components/src/components/guides-header/guides-header.component.tsx
index c9a7903d6220..bf6e35a0ec7a 100644
--- a/packages/manager-react-components/src/components/guides-header/guides-header.component.tsx
+++ b/packages/manager-react-components/src/components/guides-header/guides-header.component.tsx
@@ -24,7 +24,7 @@ export function GuidesHeader({
     <>
       <div id="guides-header-trigger">
         <OdsButton
-          slot={'menu-title'}
+          slot="menu-title"
           variant={ODS_BUTTON_VARIANT.ghost}
           icon={ODS_ICON_NAME.book}
           label={label}
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 06a13fc48b91..15762320f71a 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
@@ -3,8 +3,10 @@ import {
   ODS_BUTTON_VARIANT,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
+  ODS_BUTTON_COLOR,
+  ODS_LINK_COLOR,
 } from '@ovhcloud/ods-components';
-import { OdsButton, OdsPopover } from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsLink, OdsPopover } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import '../translations/translation';
 
@@ -13,6 +15,7 @@ import { ManagerButton } from '../../../ManagerButton/ManagerButton';
 export interface ActionMenuItem {
   id: number;
   rel?: string;
+  href?: string;
   download?: string;
   target?: string;
   onClick?: () => void;
@@ -21,6 +24,9 @@ export interface ActionMenuItem {
   iamActions?: string[];
   urn?: string;
   className?: string;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  color?: ODS_BUTTON_COLOR;
 }
 
 export interface ActionMenuProps {
@@ -30,6 +36,7 @@ export interface ActionMenuProps {
   variant?: ODS_BUTTON_VARIANT;
   id: string;
   isDisabled?: boolean;
+  isLoading?: boolean;
 }
 
 const MenuItem = ({
@@ -48,26 +55,29 @@ const MenuItem = ({
     className: 'w-full action-menu-item',
     ...item,
   };
+
+  if (item.href) {
+    return (
+      <div className="-mx-[2px]">
+        <OdsLink
+          className="block w-full action-menu-item p-2"
+          color={ODS_LINK_COLOR.primary}
+          href={item.href}
+          download={item.download}
+          label={item.label}
+          isDisabled={item.isDisabled}
+          onClick={item.onClick}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="-mx-[2px]">
       {!item?.iamActions || item?.iamActions?.length === 0 ? (
-        <OdsButton {...buttonProps} label={item.label}>
-          <span slot="start">
-            <span>{item.label}</span>
-          </span>
-        </OdsButton>
+        <OdsButton {...buttonProps} />
       ) : (
-        <ManagerButton
-          id={`${id}`}
-          isIamTrigger={isTrigger}
-          iamActions={item.iamActions}
-          urn={item.urn}
-          {...buttonProps}
-        >
-          <span slot="start">
-            <span>{item.label}</span>
-          </span>
-        </ManagerButton>
+        <ManagerButton id={`${id}`} isIamTrigger={isTrigger} {...buttonProps} />
       )}
     </div>
   );
@@ -79,6 +89,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   icon,
   variant = ODS_BUTTON_VARIANT.outline,
   isDisabled = false,
+  isLoading = false,
   id,
 }) => {
   const { t } = useTranslation('buttons');
@@ -94,6 +105,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
           id={id}
           variant={variant}
           isDisabled={isDisabled}
+          isLoading={isLoading}
           size={ODS_BUTTON_SIZE.sm}
           onClick={() => setIsTrigger(true)}
           {...(!isCompact && { label: t('common_actions') })}
@@ -110,16 +122,14 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
         triggerId={`navigation-action-trigger-${id}`}
         with-arrow
       >
-        {items.map(({ id: itemId, ...item }) => {
-          return (
-            <MenuItem
-              id={itemId}
-              key={itemId}
-              item={item}
-              isTrigger={isTrigger}
-            />
-          );
-        })}
+        {items.map(({ id: itemId, ...item }) => (
+          <MenuItem
+            id={itemId}
+            key={itemId}
+            item={item}
+            isTrigger={isTrigger}
+          />
+        ))}
       </OdsPopover>
     </>
   );
diff --git a/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx b/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx
index 9c76c06a6956..6782ab9d7e6a 100644
--- a/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx
@@ -21,14 +21,19 @@ export interface GuideItem {
 
 export interface GuideButtonProps {
   items: GuideItem[];
+  isLoading?: boolean;
 }
 
-export const GuideButton: React.FC<GuideButtonProps> = ({ items }) => {
+export const GuideButton: React.FC<GuideButtonProps> = ({
+  items,
+  isLoading,
+}) => {
   const { t } = useTranslation('buttons');
   return (
     <>
       <div id="navigation-menu-guide-trigger">
         <OdsButton
+          isLoading={isLoading}
           slot="menu-title"
           className="block mb-6"
           variant={ODS_BUTTON_VARIANT.ghost}
@@ -38,10 +43,11 @@ export const GuideButton: React.FC<GuideButtonProps> = ({ items }) => {
         />
       </div>
 
-      <OdsPopover triggerId="navigation-menu-guide-trigger" with-arrow="true">
+      <OdsPopover triggerId="navigation-menu-guide-trigger" withArrow>
         {items.map((item) => (
           <div key={item.id}>
             <Links
+              className="block py-2"
               href={item.href}
               target={item.target}
               download={item.download}
diff --git a/packages/manager-react-components/src/components/templates/base/base.component.tsx b/packages/manager-react-components/src/components/templates/base/base.component.tsx
index a718d0c8745d..86b05a692a2e 100644
--- a/packages/manager-react-components/src/components/templates/base/base.component.tsx
+++ b/packages/manager-react-components/src/components/templates/base/base.component.tsx
@@ -3,6 +3,7 @@ import { Headers, HeadersProps } from '../../content';
 import { OdsText } from '@ovhcloud/ods-components/react';
 import { LinkType, Links, Subtitle } from '../../typography';
 import { PageLayout } from '../layout/layout.component';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 
 export type BaseLayoutProps = React.PropsWithChildren<{
   breadcrumb?: React.ReactElement;
@@ -31,14 +32,14 @@ export const BaseLayout = ({
   tabs,
 }: BaseLayoutProps) => (
   <PageLayout>
-    <div>{breadcrumb}</div>
+    <div className="mb-5">{breadcrumb}</div>
     {header && (
-      <div className="mt-[24px]">
+      <div className="mb-4">
         <Headers {...header} />
       </div>
     )}
     {backLinkLabel && (onClickReturn || hrefPrevious) && (
-      <div className="mb-[16px]">
+      <div className="mb-4">
         <Links
           data-testid="manager-back-link"
           onClickReturn={onClickReturn}
@@ -50,7 +51,7 @@ export const BaseLayout = ({
       </div>
     )}
     {description && (
-      <OdsText className="mb-[16px]" preset="span">
+      <OdsText className="mb-4 block" preset={ODS_TEXT_PRESET.paragraph}>
         {description}
       </OdsText>
     )}
diff --git a/packages/manager-react-components/src/components/templates/delete-modal/delete-modal.component.tsx b/packages/manager-react-components/src/components/templates/delete-modal/delete-modal.component.tsx
index 4d735b61385e..76345ecba402 100644
--- a/packages/manager-react-components/src/components/templates/delete-modal/delete-modal.component.tsx
+++ b/packages/manager-react-components/src/components/templates/delete-modal/delete-modal.component.tsx
@@ -16,9 +16,11 @@ import {
   ODS_BUTTON_COLOR,
   ODS_MESSAGE_COLOR,
   ODS_MODAL_COLOR,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import { handleClick } from '../../../utils/click-utils';
 import './translations/translations';
+import { Subtitle } from '../../typography';
 
 export const defaultDeleteModalTerminateValue = 'TERMINATE';
 
@@ -61,27 +63,21 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
   return (
     <OdsModal
       color={ODS_MODAL_COLOR.warning}
-      class="modal-actions"
       onOdsClose={close}
       isOpen={isOpen}
     >
-      <div>
-        <span className="delete-modal-headline text-[--ods-color-heading] text-[24px] leading-[32px] font-bold">
-          {headline}
-        </span>
-      </div>
+      <Subtitle>{headline}</Subtitle>
       {!!error && (
         <OdsMessage color={ODS_MESSAGE_COLOR.warning}>
-          <OdsText preset="span">{t('deleteModalError', { error })}</OdsText>
+          {t('deleteModalError', { error })}
         </OdsMessage>
       )}
-      <span className="delete-modal-description text-[--ods-color-text] text-[14px] leading-[18px] my-[8px]">
-        {description}
-      </span>
-      <OdsFormField className="mb-8">
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{description}</OdsText>
+      <OdsFormField className="block mb-8">
         <label slot="label">{deleteInputLabel}</label>
         <OdsInput
-          name=""
+          className="block"
+          name="delete-input"
           aria-label="delete-input"
           isDisabled={isLoading || undefined}
           type={ODS_INPUT_TYPE.text}
@@ -92,7 +88,6 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
         />
       </OdsFormField>
       <OdsButton
-        isDisabled={isLoading}
         slot="actions"
         data-testid="manager-delete-modal-cancel"
         variant={ODS_BUTTON_VARIANT.ghost}
diff --git a/packages/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx b/packages/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx
index 8370ec72baa0..c4b0e5da380f 100644
--- a/packages/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx
+++ b/packages/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx
@@ -1,9 +1,11 @@
 import {
+  ODS_BUTTON_ICON_ALIGNMENT,
   ODS_BUTTON_SIZE,
+  ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
   ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
-import { OdsButton, OdsText, OdsLink } from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
 import React, { PropsWithChildren } from 'react';
 
 import placeholderSrc from '../../../../public/assets/placeholder.png';
@@ -12,6 +14,7 @@ type OnboardingLayoutButtonProps = {
   orderButtonLabel?: string;
   orderHref?: string;
   moreInfoHref?: string;
+  moreInfoIcon?: ODS_ICON_NAME;
   moreInfoButtonLabel?: string;
   onOrderButtonClick?: () => void;
   onmoreInfoButtonClick?: () => void;
@@ -27,10 +30,11 @@ export type OnboardingLayoutProps = OnboardingLayoutButtonProps &
   }>;
 
 const OnboardingLayoutButton: React.FC<OnboardingLayoutButtonProps> = ({
-  orderHref,
   orderButtonLabel,
+  orderHref,
   moreInfoHref,
   moreInfoButtonLabel,
+  moreInfoIcon = ODS_ICON_NAME.externalLink,
   onOrderButtonClick,
   onmoreInfoButtonClick,
   isActionDisabled,
@@ -40,20 +44,32 @@ const OnboardingLayoutButton: React.FC<OnboardingLayoutButtonProps> = ({
   }
   return (
     <div className="flex sm:pt-8 xs:pt-2.5 flex-row items-center space-x-4 justify-center">
-      {moreInfoButtonLabel && moreInfoHref && (
-        <OdsLink
-          onClick={onmoreInfoButtonClick}
-          {...(isActionDisabled && { disabled: true })}
-          href={moreInfoHref}
-          label={moreInfoButtonLabel}
-          icon={ODS_ICON_NAME.externalLink}
-        />
-      )}
       <OdsButton
         size={ODS_BUTTON_SIZE.md}
-        onClick={onOrderButtonClick}
+        onClick={() => {
+          onOrderButtonClick?.();
+          if (orderHref) {
+            window.open(orderHref, '_blank');
+          }
+        }}
         label={orderButtonLabel}
+        isDisabled={isActionDisabled}
       />
+      {moreInfoButtonLabel && (onmoreInfoButtonClick || moreInfoHref) && (
+        <OdsButton
+          size={ODS_BUTTON_SIZE.md}
+          variant={ODS_BUTTON_VARIANT.outline}
+          onClick={() => {
+            onmoreInfoButtonClick?.();
+            if (moreInfoHref) {
+              window.open(moreInfoHref, '_blank');
+            }
+          }}
+          label={moreInfoButtonLabel}
+          icon={moreInfoIcon}
+          iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.right}
+        />
+      )}
     </div>
   );
 };
@@ -62,8 +78,8 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
   hideHeadingSection,
   title,
   description,
-  orderHref,
   orderButtonLabel,
+  orderHref,
   moreInfoHref,
   moreInfoButtonLabel,
   children,
@@ -96,7 +112,10 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
             {title}
           </OdsText>
           {description && (
-            <OdsText preset="span" className="onboarding-description">
+            <OdsText
+              preset="paragraph"
+              className="block text-center xs:pt-2.5 sm:pt-8 max-w-4xl"
+            >
               {description}
             </OdsText>
           )}
diff --git a/packages/manager-react-components/src/components/templates/update-name-modal/update-name-modal.component.tsx b/packages/manager-react-components/src/components/templates/update-name-modal/update-name-modal.component.tsx
index 09b86ccaa130..ba5498e65a99 100644
--- a/packages/manager-react-components/src/components/templates/update-name-modal/update-name-modal.component.tsx
+++ b/packages/manager-react-components/src/components/templates/update-name-modal/update-name-modal.component.tsx
@@ -12,11 +12,13 @@ import {
   ODS_BUTTON_VARIANT,
   ODS_INPUT_TYPE,
   ODS_MESSAGE_COLOR,
+  ODS_TEXT_PRESET,
   OdsInputChangeEventDetail,
   OdsInputCustomEvent,
 } from '@ovhcloud/ods-components';
 import { handleClick } from '../../../utils/click-utils';
 import './translations/translations';
+import { Subtitle } from '../../typography';
 
 export type UpdateNameModalProps = {
   headline: string;
@@ -64,47 +66,37 @@ export const UpdateNameModal: React.FC<UpdateNameModalProps> = ({
 
   return (
     <OdsModal isOpen={isOpen} onOdsClose={closeModal}>
-      <div>
-        <span className="update-name-headline text-[--ods-color-heading] text-[24px] leading-[32px] font-bold">
-          {headline}
-        </span>
-      </div>
+      <Subtitle>{headline}</Subtitle>
       {!!error && (
-        <OdsMessage color={ODS_MESSAGE_COLOR.danger}>
-          <OdsText preset="span">{t('updateModalError', { error })}</OdsText>
+        <OdsMessage color={ODS_MESSAGE_COLOR.critical}>
+          {t('updateModalError', { error })}
         </OdsMessage>
       )}
-      <span className="update-name-description text-[--ods-color-text] text-[14px] leading-[18px] my-[8px]">
-        {description}
-      </span>
-      <OdsFormField className="mb-8">
-        <div slot="label">
-          <span className="update-name-input-label text-[--ods-color-text] text-[14px] leading-[18px] font-semibold">
-            {inputLabel}
-          </span>
-        </div>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>{description}</OdsText>
+      <OdsFormField className="block mb-8">
+        <label htmlFor="update-name-modal-input">
+          <OdsText preset={ODS_TEXT_PRESET.span}>{inputLabel}</OdsText>
+        </label>
         <OdsInput
+          className="block"
           aria-label="update-input"
+          name="update-name-modal-input"
           isDisabled={isLoading}
           type={ODS_INPUT_TYPE.text}
           value={displayName}
           hasError={isPatternError || undefined}
-          name="update-name-modal-input"
-          onOdsChange={(e: OdsInputCustomEvent<OdsInputChangeEventDetail>) =>
-            setDisplayName(e.detail.value as string)
-          }
+          onOdsChange={(e) => setDisplayName(e.detail.value as string)}
         />
         {patternMessage && (
-          <div className="mt-5">
-            <OdsText
-              preset="span"
-              className={`update-name-modal-pattern-message ${
-                isPatternError && pattern ? 'error' : ''
-              }`}
-            >
-              {patternMessage}
-            </OdsText>
-          </div>
+          <OdsText
+            slot="visual-hint"
+            preset="span"
+            className={`update-name-modal-pattern-message ${
+              isPatternError && pattern ? 'error' : ''
+            }`}
+          >
+            {patternMessage}
+          </OdsText>
         )}
       </OdsFormField>
       <OdsButton
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 2bbdc49fa80f..7c8665fc4cb1 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
@@ -36,9 +36,11 @@ export const Links: React.FC<LinksProps> = ({
   href,
   color = ODS_LINK_COLOR.primary,
   iconAlignment,
+  className = '',
   ...props
 }: LinksProps) => (
   <OdsLink
+    className={`mrc-link ${className}`}
     href={href}
     onClick={onClickReturn}
     color={color}
@@ -46,11 +48,14 @@ export const Links: React.FC<LinksProps> = ({
       iconAlignment: ODS_LINK_ICON_ALIGNMENT[iconAlignment],
     })}
     {...props}
-    {...(type === LinkType.back && { icon: ODS_ICON_NAME.arrowLeft })}
+    {...(type === LinkType.back && {
+      icon: ODS_ICON_NAME.arrowLeft,
+      iconAlignment: ODS_LINK_ICON_ALIGNMENT.left,
+    })}
     {...(type === LinkType.next && { icon: ODS_ICON_NAME.arrowRight })}
     {...(type === LinkType.external && { icon: ODS_ICON_NAME.externalLink })}
     label={label}
-  ></OdsLink>
+  />
 );
 
 export default Links;
diff --git a/packages/manager-react-components/src/components/typography/links/links.scss b/packages/manager-react-components/src/components/typography/links/links.scss
new file mode 100644
index 000000000000..0c3a7db8e49f
--- /dev/null
+++ b/packages/manager-react-components/src/components/typography/links/links.scss
@@ -0,0 +1,4 @@
+.mrc-link::part(link) {
+  max-width: 100%;
+  overflow: hidden;
+}
diff --git a/packages/manager-react-components/src/lib.scss b/packages/manager-react-components/src/lib.scss
index 139bbd3adaf3..e0b60653f2e8 100644
--- a/packages/manager-react-components/src/lib.scss
+++ b/packages/manager-react-components/src/lib.scss
@@ -1,3 +1,4 @@
 @import './components/templates/error/error.scss';
 @import './components/templates/update-name-modal/update-name-modal.scss';
 @import './components/filters/filters.scss';
+@import './components/typography/links/links.scss';
diff --git a/packages/manager/apps/key-management-service/package.json b/packages/manager/apps/key-management-service/package.json
index 99321659e6bd..e75fd0dc1936 100644
--- a/packages/manager/apps/key-management-service/package.json
+++ b/packages/manager/apps/key-management-service/package.json
@@ -11,9 +11,6 @@
   "license": "BSD-3-Clause",
   "author": "OVH SAS",
   "scripts": {
-    "beta-test:e2e": "tsc && npx playwright test --headed",
-    "beta-test:e2e:cii": "tsc && npx playwright test",
-    "beta-test:e2e:script": "tsc && node ../../../../scripts/run-playwright.js",
     "build": "tsc && vite build",
     "dev": "tsc && vite",
     "start": "lerna exec --stream --scope='@ovh-ux/manager-key-management-service-app' --include-dependencies -- npm run build --if-present",
@@ -25,43 +22,38 @@
   "dependencies": {
     "@ovh-ux/manager-config": "^8.0.1",
     "@ovh-ux/manager-core-api": "^0.9.0",
+    "@ovh-ux/manager-core-test-utils": "^0.1.0",
     "@ovh-ux/manager-core-utils": "*",
+    "@ovh-ux/manager-module-common-api": "^0.1.0",
     "@ovh-ux/manager-module-order": "^0.9.1",
-    "@ovh-ux/manager-react-components": "^1.41.1",
+    "@ovh-ux/manager-react-components": "^2.5.1",
     "@ovh-ux/manager-react-core-application": "^0.11.3",
     "@ovh-ux/manager-react-shell-client": "^0.8.3",
-    "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/request-tagger": "^0.4.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.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
-    "date-fns": "^3.6.0",
     "i18next": "^23.8.2",
     "i18next-http-backend": "^2.4.3",
     "react": "^18.2.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
-    "react-router": "^6.21.3",
     "react-router-dom": "^6.3.0",
     "tailwindcss": "^3.4.4"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@ovh-ux/manager-vite-config": "^0.8.3",
-    "@playwright/test": "^1.34.3",
     "@tanstack/react-query-devtools": "^5.51.21",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "element-internals-polyfill": "^1.3.11",
     "msw": "2.1.7",
     "typescript": "^5.1.6",
     "vite": "^5.2.13",
-    "vitest": "^1.2.0"
+    "vitest": "^2.1.8"
   },
   "regions": [
     "CA",
diff --git a/packages/manager/apps/key-management-service/playwright.config.ts b/packages/manager/apps/key-management-service/playwright.config.ts
deleted file mode 100644
index 4a033cc8d87d..000000000000
--- a/packages/manager/apps/key-management-service/playwright.config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineConfig } from '@playwright/test';
-
-export default defineConfig({
-  workers: 3,
-  fullyParallel: false,
-  timeout: 30 * 1000,
-  reporter: [['html', { open: 'on-failure' }]],
-  expect: {
-    timeout: 20000,
-  },
-  use: {
-    // Collect trace when retrying the failed test.
-    trace: 'retain-on-failure',
-  },
-});
diff --git a/packages/manager/apps/key-management-service/src/App.tsx b/packages/manager/apps/key-management-service/src/App.tsx
index d9e3f99e4031..57c35539b8f6 100644
--- a/packages/manager/apps/key-management-service/src/App.tsx
+++ b/packages/manager/apps/key-management-service/src/App.tsx
@@ -1,13 +1,10 @@
 import React, { useEffect, useContext } from 'react';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { odsSetup } from '@ovhcloud/ods-common-core';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { RouterProvider, createHashRouter } from 'react-router-dom';
 import appRoutes from './routes/routes';
 
-odsSetup();
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
diff --git a/packages/manager/apps/key-management-service/src/components/Breadcrumb/Breadcrumb.tsx b/packages/manager/apps/key-management-service/src/components/Breadcrumb/Breadcrumb.tsx
index e07ccef8ec87..b3b6f00ec397 100644
--- a/packages/manager/apps/key-management-service/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/manager/apps/key-management-service/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react';
+import {
+  OdsBreadcrumb,
+  OdsBreadcrumbItem,
+} from '@ovhcloud/ods-components/react';
 import {
   BreadcrumbItem,
   useBreadcrumb,
@@ -18,7 +21,13 @@ function Breadcrumb({ items }: Readonly<BreadcrumbProps>): JSX.Element {
     items,
   });
 
-  return <OsdsBreadcrumb items={breadcrumbItems} />;
+  return (
+    <OdsBreadcrumb>
+      {breadcrumbItems.map(({ label, ...props }) => (
+        <OdsBreadcrumbItem key={label} label={label} {...props} />
+      ))}
+    </OdsBreadcrumb>
+  );
 }
 
 export default Breadcrumb;
diff --git a/packages/manager/apps/key-management-service/src/components/ButtonTooltip/ButtonTooltip.tsx b/packages/manager/apps/key-management-service/src/components/ButtonTooltip/ButtonTooltip.tsx
deleted file mode 100644
index 6a1ba4cff121..000000000000
--- a/packages/manager/apps/key-management-service/src/components/ButtonTooltip/ButtonTooltip.tsx
+++ /dev/null
@@ -1,78 +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)}
-        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/key-management-service/src/components/Error/Error.tsx b/packages/manager/apps/key-management-service/src/components/Error/Error.tsx
deleted file mode 100644
index d5d5af4b9efb..000000000000
--- a/packages/manager/apps/key-management-service/src/components/Error/Error.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useShell } from '@ovh-ux/manager-react-shell-client';
-import {
-  ErrorMessage,
-  TRACKING_LABELS,
-  ErrorBanner,
-} from '@ovh-ux/manager-react-components';
-
-interface ErrorObject {
-  [key: string]: any;
-}
-
-function getTrackingTypology(error: ErrorMessage) {
-  if (error?.detail?.status && Math.floor(error.detail.status / 100) === 4) {
-    return [401, 403].includes(error.detail.status)
-      ? TRACKING_LABELS.UNAUTHORIZED
-      : TRACKING_LABELS.SERVICE_NOT_FOUND;
-  }
-  return TRACKING_LABELS.PAGE_LOAD;
-}
-
-const Errors: React.FC<ErrorObject> = ({ error }) => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const shell = useShell();
-  const { tracking, environment } = shell;
-  const env = environment.getEnvironment();
-
-  useEffect(() => {
-    env.then((response) => {
-      const { applicationName } = response;
-      const name = `errors::${getTrackingTypology(error)}::${applicationName}`;
-      tracking.trackPage({
-        name,
-        level2: '81',
-        type: 'navigation',
-        page_category: location.pathname,
-      });
-    });
-  }, []);
-
-  return (
-    <ErrorBanner
-      error={error}
-      onReloadPage={() => navigate(location.pathname, { replace: true })}
-      onRedirectHome={() => navigate('/', { replace: true })}
-    />
-  );
-};
-
-export default ErrorBanner;
diff --git a/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.spec.tsx b/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.spec.tsx
index f7c5d2e215b4..f8d036dacab9 100644
--- a/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.spec.tsx
+++ b/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.spec.tsx
@@ -68,24 +68,24 @@ describe('KMS Guides Header tests suite', () => {
     await waitFor(() => {
       let guideElement = getByText('guides_header_quick_start');
       expect(guideElement).toBeInTheDocument();
-      let osdsLinkElement = guideElement.closest('osds-link');
-      expect(osdsLinkElement).toHaveAttribute(
+      let odsLinkElement = guideElement.closest('ods-link');
+      expect(odsLinkElement).toHaveAttribute(
         'href',
         `${SUPPORT_URL.EU}${GUIDE_LIST.quickStart.FR}`,
       );
 
       guideElement = getByText('guides_header_kms_usage');
       expect(guideElement).toBeInTheDocument();
-      osdsLinkElement = guideElement.closest('osds-link');
-      expect(osdsLinkElement).toHaveAttribute(
+      odsLinkElement = guideElement.closest('ods-link');
+      expect(odsLinkElement).toHaveAttribute(
         'href',
         `${SUPPORT_URL.EU}${GUIDE_LIST.usage.FR}`,
       );
 
       guideElement = getByText('guides_header_connect_kmip_product');
       expect(guideElement).toBeInTheDocument();
-      osdsLinkElement = guideElement.closest('osds-link');
-      expect(osdsLinkElement).toHaveAttribute(
+      odsLinkElement = guideElement.closest('ods-link');
+      expect(odsLinkElement).toHaveAttribute(
         'href',
         `${SUPPORT_URL.EU}${GUIDE_LIST.kmip.FR}`,
       );
diff --git a/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.tsx b/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.tsx
index 1c3a3621ec8f..17d32165e577 100644
--- a/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.tsx
+++ b/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.tsx
@@ -1,11 +1,7 @@
 import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import { OsdsSkeleton } from '@ovhcloud/ods-components/react';
-import {
-  GuideButton,
-  useFeatureAvailability,
-} from '@ovh-ux/manager-react-components';
+import { GuideButton } from '@ovh-ux/manager-react-components';
+import { useFeatureAvailability } from '@ovh-ux/manager-module-common-api';
 import useGuideUtils from '@/hooks/guide/useGuideUtils';
 import { FEATURES } from '@/utils/feature-availability/feature-availability.constants';
 
@@ -13,40 +9,39 @@ export default function KmsGuidesHeader() {
   const { t } = useTranslation('key-management-service/guide');
   const guideLinks = useGuideUtils();
 
-  const { data: features } = useFeatureAvailability([
+  const { data: features, isPending } = useFeatureAvailability([
     FEATURES.KMS_USAGE_GUIDE,
     FEATURES.KMIP_CONNECTION_GUIDE,
   ]);
 
-  const kmsGuides = [
-    {
-      id: 1,
-      href: guideLinks?.quickStart,
-      target: OdsHTMLAnchorElementTarget._blank,
-      label: t('guides_header_quick_start'),
-    },
-  ];
-
-  if (features?.[FEATURES.KMS_USAGE_GUIDE]) {
-    kmsGuides.push({
-      id: 2,
-      href: guideLinks?.usage,
-      target: OdsHTMLAnchorElementTarget._blank,
-      label: t('guides_header_kms_usage'),
-    });
-  }
-  if (features?.[FEATURES.KMIP_CONNECTION_GUIDE]) {
-    kmsGuides.push({
-      id: 3,
-      href: guideLinks?.kmip,
-      target: OdsHTMLAnchorElementTarget._blank,
-      label: t('guides_header_connect_kmip_product'),
-    });
-  }
+  const kmsGuides = React.useMemo(
+    () =>
+      [
+        {
+          id: 1,
+          href: guideLinks?.quickStart,
+          target: '_blank',
+          label: t('guides_header_quick_start'),
+        },
+        features?.[FEATURES.KMS_USAGE_GUIDE] && {
+          id: 2,
+          href: guideLinks?.usage,
+          target: '_blank',
+          label: t('guides_header_kms_usage'),
+        },
+        features?.[FEATURES.KMIP_CONNECTION_GUIDE] && {
+          id: 3,
+          href: guideLinks?.kmip,
+          target: '_blank',
+          label: t('guides_header_connect_kmip_product'),
+        },
+      ].filter(Boolean),
+    [guideLinks, t, features],
+  );
 
   return (
-    <Suspense fallback={<OsdsSkeleton inline randomized />}>
-      <GuideButton items={kmsGuides} />
+    <Suspense fallback={<GuideButton isLoading items={kmsGuides} />}>
+      <GuideButton isLoading={isPending} items={kmsGuides} />
     </Suspense>
   );
 }
diff --git a/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx b/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx
index 0851c8d04889..e08362d69ad7 100644
--- a/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx
+++ b/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx
@@ -14,9 +14,8 @@ import {
 } from '@ovh-ux/manager-react-shell-client';
 import { useNavigate } from 'react-router-dom';
 import { ODS_ICON_NAME, ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
-import { OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { OdsSpinner } from '@ovhcloud/ods-components/react';
 import { OKMS } from '@/types/okms.type';
-import KmsActionMenu from '../menu/KmsActionMenu.component';
 import { OkmsAllServiceKeys } from '@/types/okmsServiceKey.type';
 import { useServiceKeyTypeTranslations } from '@/hooks/serviceKey/useServiceKeyTypeTranslations';
 import { ServiceKeyStatus } from '../serviceKey/serviceKeyStatus/serviceKeyStatus.component';
@@ -27,7 +26,7 @@ import { OkmsServiceState } from '../layout-helpers/Dashboard/okmsServiceState/O
 import { OkmsContext } from '@/pages/dashboard';
 
 export const DatagridCellId = (props: OKMS | OkmsAllServiceKeys) => {
-  return <Clipboard value={props.id} />;
+  return <Clipboard className="w-full" value={props.id} />;
 };
 
 export const DatagridCellName = (props: OKMS) => {
@@ -35,20 +34,18 @@ export const DatagridCellName = (props: OKMS) => {
   const navigate = useNavigate();
 
   return (
-    <div>
-      <Links
-        onClickReturn={() => {
-          trackClick({
-            location: PageLocation.datagrid,
-            buttonType: ButtonType.link,
-            actionType: 'navigation',
-            actions: ['go-to-kms'],
-          });
-          navigate(`/${props?.id}`);
-        }}
-        label={props?.iam.displayName}
-      />
-    </div>
+    <Links
+      onClickReturn={() => {
+        trackClick({
+          location: PageLocation.datagrid,
+          buttonType: ButtonType.link,
+          actionType: 'navigation',
+          actions: ['go-to-kms'],
+        });
+        navigate(`/${props?.id}`);
+      }}
+      label={props?.iam.displayName}
+    />
   );
 };
 
@@ -56,7 +53,7 @@ export const DatagridCellRegion = (kms: OKMS) => {
   return (
     <DataGridTextCell>
       <Region
-        mode={'region'}
+        mode="region"
         name={kms.region.toLowerCase().replaceAll('_', '-')}
       />
     </DataGridTextCell>
@@ -68,21 +65,12 @@ export const DatagridCellStatus = (kms: OKMS) => {
     resourceName: kms.id,
   });
   if (isLoading) {
-    return <OsdsSpinner inline size={ODS_SPINNER_SIZE.sm} />;
+    return <OdsSpinner size={ODS_SPINNER_SIZE.sm} />;
   }
   if (isError) {
     return <></>;
   }
-  return (
-    <OkmsServiceState
-      state={OkmsServiceInfos.data.resource.state}
-      inline={true}
-    ></OkmsServiceState>
-  );
-};
-
-export const DatagridActionMenu = (props: OKMS) => {
-  return <KmsActionMenu {...props} />;
+  return <OkmsServiceState state={OkmsServiceInfos.data.resource.state} />;
 };
 
 export const DatagridServiceKeyCellName = (props: OkmsAllServiceKeys) => {
@@ -90,30 +78,28 @@ export const DatagridServiceKeyCellName = (props: OkmsAllServiceKeys) => {
   const { trackClick } = useOvhTracking();
 
   return (
-    <div>
-      <Links
-        onClickReturn={() => {
-          trackClick({
-            location: PageLocation.datagrid,
-            buttonType: ButtonType.link,
-            actionType: 'navigation',
-            actions: ['details_encryption_key'],
-          });
-          navigate(`${props?.id}`);
-        }}
-        label={props?.name}
-      />
-    </div>
+    <Links
+      onClickReturn={() => {
+        trackClick({
+          location: PageLocation.datagrid,
+          buttonType: ButtonType.link,
+          actionType: 'navigation',
+          actions: ['details_encryption_key'],
+        });
+        navigate(`${props?.id}`);
+      }}
+      label={props?.name}
+    />
   );
 };
 
 export const DatagridServiceKeyCellId = (props: OkmsAllServiceKeys) => {
-  return <Clipboard value={props.id} />;
+  return <Clipboard className="w-full" value={props.id} />;
 };
 
 export const DatagridCellType = (props: OkmsAllServiceKeys) => {
   const translatedValue = useServiceKeyTypeTranslations(props.type);
-  return <DataGridTextCell> {translatedValue}</DataGridTextCell>;
+  return <DataGridTextCell>{translatedValue}</DataGridTextCell>;
 };
 
 export const DatagridCreationDate = (props: OkmsAllServiceKeys) => {
@@ -136,7 +122,7 @@ export const DatagridCreationDate = (props: OkmsAllServiceKeys) => {
 };
 
 export const DatagridStatus = (props: OkmsAllServiceKeys) => {
-  return <ServiceKeyStatus state={props.state} inline />;
+  return <ServiceKeyStatus state={props.state} />;
 };
 
 export const DatagridServiceKeyActionMenu = (props: OkmsAllServiceKeys) => {
@@ -147,15 +133,13 @@ export const DatagridServiceKeyActionMenu = (props: OkmsAllServiceKeys) => {
   });
   const actionList = useServiceKeyActionsList(okms, serviceKey?.data, true);
 
-  if (isPending) {
-    return <></>;
-  }
-
   return (
     <ActionMenu
-      items={actionList}
+      id={`service-key-actions-${props.id}`}
+      isLoading={isPending}
       isCompact
-      icon={ODS_ICON_NAME.ELLIPSIS_VERTICAL}
+      icon={ODS_ICON_NAME.ellipsisVertical}
+      items={actionList}
     />
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/components/Loading/Loading.tsx b/packages/manager/apps/key-management-service/src/components/Loading/Loading.tsx
index 4ebed78d3807..b97e7462b452 100644
--- a/packages/manager/apps/key-management-service/src/components/Loading/Loading.tsx
+++ b/packages/manager/apps/key-management-service/src/components/Loading/Loading.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { OsdsSpinner } from '@ovhcloud/ods-components/react';
+import { OdsSpinner } from '@ovhcloud/ods-components/react';
 import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
 
 export default function Loading() {
   return (
     <div className="flex justify-center h-screen items-center">
-      <OsdsSpinner inline size={ODS_SPINNER_SIZE.lg} />
+      <OdsSpinner size={ODS_SPINNER_SIZE.lg} />
     </div>
   );
 }
diff --git a/packages/manager/apps/key-management-service/src/components/Modal/Modal.tsx b/packages/manager/apps/key-management-service/src/components/Modal/Modal.tsx
deleted file mode 100644
index 9ed42d87683e..000000000000
--- a/packages/manager/apps/key-management-service/src/components/Modal/Modal.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OsdsModal } from '@ovhcloud/ods-components/react';
-import React, { useRef } from 'react';
-
-const Modal: React.FC<React.PropsWithChildren & {
-  onClose: () => void;
-  color: ODS_THEME_COLOR_INTENT;
-  headline?: string;
-}> = ({ color, headline, onClose, children }) => {
-  const modal = useRef<HTMLOsdsModalElement>(null);
-
-  const onOdsModalClose = () => {
-    onClose();
-  };
-
-  return (
-    <OsdsModal
-      color={color}
-      dismissible
-      onOdsModalClose={onOdsModalClose}
-      headline={headline}
-      ref={modal}
-    >
-      {children}
-    </OsdsModal>
-  );
-};
-
-export default Modal;
diff --git a/packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityGroupListModal.component.tsx b/packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityGroupListModal.component.tsx
deleted file mode 100644
index dc7869a95d57..000000000000
--- a/packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityGroupListModal.component.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import {
-  ODS_BUTTON_TYPE,
-  ODS_BUTTON_VARIANT,
-  ODS_SPINNER_SIZE,
-} from '@ovhcloud/ods-components';
-import {
-  OsdsButton,
-  OsdsModal,
-  OsdsSpinner,
-} from '@ovhcloud/ods-components/react';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IdentityGroup } from '@/types/identity.type';
-import { useIdentityData } from '@/hooks/credential/useIdentityData';
-import { useIdentityGroupList } from '@/data/hooks/useIdentity';
-import IdentitiesGroupList from '@/pages/credential/create/identities/list/IdentitiesGroupList.component';
-
-type IdentityGroupListModalProps = {
-  closeModal: () => void;
-};
-
-const IdentityGroupListModal = ({
-  closeModal,
-}: IdentityGroupListModalProps) => {
-  const { t } = useTranslation('key-management-service/credential');
-  const { combinedData, isLoading } = useIdentityGroupList();
-  const { groupList, setGroupList } = useIdentityData();
-  const [selectedGroupList, setSelectedGroupList] = useState<IdentityGroup[]>(
-    groupList,
-  );
-
-  const close = () => {
-    closeModal();
-  };
-
-  return (
-    <OsdsModal
-      dismissible
-      color={ODS_THEME_COLOR_INTENT.primary}
-      headline={t(
-        'key_management_service_credentials_identity_modal_group_list_headline',
-      )}
-      onOdsModalClose={close}
-    >
-      <div className="mt-8">
-        {isLoading ? (
-          <div className="flex justify-center">
-            <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
-          </div>
-        ) : (
-          <IdentitiesGroupList
-            groupList={combinedData}
-            selectedGroupList={selectedGroupList}
-            setSelectedGroupList={setSelectedGroupList}
-          />
-        )}
-      </div>
-      <OsdsButton
-        disabled={isLoading || undefined}
-        slot="actions"
-        type={ODS_BUTTON_TYPE.button}
-        variant={ODS_BUTTON_VARIANT.ghost}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={close}
-      >
-        {t(
-          'key_management_service_credentials_identity_modal_group_list_cancel',
-        )}
-      </OsdsButton>
-      <OsdsButton
-        disabled={isLoading || undefined}
-        slot="actions"
-        type={ODS_BUTTON_TYPE.button}
-        variant={ODS_BUTTON_VARIANT.flat}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={() => {
-          setGroupList(selectedGroupList);
-          close();
-        }}
-      >
-        {t('key_management_service_credentials_identity_modal_group_list_add')}
-      </OsdsButton>
-    </OsdsModal>
-  );
-};
-
-export default IdentityGroupListModal;
diff --git a/packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityServiceAccountListModal.component.tsx b/packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityServiceAccountListModal.component.tsx
deleted file mode 100644
index f5ed6614b86e..000000000000
--- a/packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityServiceAccountListModal.component.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import {
-  ODS_BUTTON_TYPE,
-  ODS_BUTTON_VARIANT,
-  ODS_SPINNER_SIZE,
-} from '@ovhcloud/ods-components';
-import {
-  OsdsButton,
-  OsdsModal,
-  OsdsSpinner,
-} from '@ovhcloud/ods-components/react';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IdentityOauthClient } from '@/types/identity.type';
-import { useIdentityData } from '@/hooks/credential/useIdentityData';
-import { useIdentityServiceAccountList } from '@/data/hooks/useIdentity';
-import IdentitiesServiceAccountList from '@/pages/credential/create/identities/list/IdentitiesServiceAccountList.component';
-
-type IdentityServiceAccountListModalProps = {
-  closeModal: () => void;
-};
-
-const IdentityServiceAccountListModal = ({
-  closeModal,
-}: IdentityServiceAccountListModalProps) => {
-  const { t } = useTranslation('key-management-service/credential');
-  const { combinedData, isLoading } = useIdentityServiceAccountList();
-  const { serviceAccountList, setServiceAccountList } = useIdentityData();
-  const [selectedServiceAccountList, setSelectedServiceAccountList] = useState<
-    IdentityOauthClient[]
-  >(serviceAccountList);
-
-  const close = () => {
-    closeModal();
-  };
-
-  return (
-    <OsdsModal
-      dismissible
-      color={ODS_THEME_COLOR_INTENT.primary}
-      headline={t(
-        'key_management_service_credentials_identity_modal_user_list_headline',
-      )}
-      onOdsModalClose={close}
-    >
-      <div className="mt-8">
-        {isLoading ? (
-          <div className="flex justify-center">
-            <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
-          </div>
-        ) : (
-          <IdentitiesServiceAccountList
-            serviceAccountList={combinedData}
-            selectedServiceAccounts={selectedServiceAccountList}
-            setSelectedServiceAccounts={setSelectedServiceAccountList}
-          />
-        )}
-      </div>
-      <OsdsButton
-        disabled={isLoading || undefined}
-        slot="actions"
-        type={ODS_BUTTON_TYPE.button}
-        variant={ODS_BUTTON_VARIANT.ghost}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={close}
-      >
-        {t(
-          'key_management_service_credentials_identity_modal_user_list_cancel',
-        )}
-      </OsdsButton>
-      <OsdsButton
-        disabled={isLoading || undefined}
-        slot="actions"
-        type={ODS_BUTTON_TYPE.button}
-        variant={ODS_BUTTON_VARIANT.flat}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={() => {
-          setServiceAccountList(selectedServiceAccountList);
-          close();
-        }}
-      >
-        {t('key_management_service_credentials_identity_modal_user_list_add')}
-      </OsdsButton>
-    </OsdsModal>
-  );
-};
-
-export default IdentityServiceAccountListModal;
diff --git a/packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityUserListModal.component.tsx b/packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityUserListModal.component.tsx
deleted file mode 100644
index 7b873260b3c7..000000000000
--- a/packages/manager/apps/key-management-service/src/components/Modal/credential/identities/IdentityUserListModal.component.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import {
-  ODS_BUTTON_TYPE,
-  ODS_BUTTON_VARIANT,
-  ODS_SPINNER_SIZE,
-} from '@ovhcloud/ods-components';
-import {
-  OsdsButton,
-  OsdsModal,
-  OsdsSpinner,
-} from '@ovhcloud/ods-components/react';
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IdentityUser } from '@/types/identity.type';
-import { useIdentityData } from '@/hooks/credential/useIdentityData';
-import { useIdentityUserList } from '@/data/hooks/useIdentity';
-import IdentitiesUserList from '@/pages/credential/create/identities/list/IdentitiesUserList.component';
-
-type IdentityUserListModalProps = {
-  closeModal: () => void;
-};
-
-const IdentityUserListModal = ({ closeModal }: IdentityUserListModalProps) => {
-  const { t } = useTranslation('key-management-service/credential');
-  const { combinedData, isLoading } = useIdentityUserList();
-  const { userList, setUserList } = useIdentityData();
-  const [selectedUserList, setSelectedUserList] = useState<IdentityUser[]>(
-    userList,
-  );
-
-  const close = () => {
-    closeModal();
-  };
-
-  useEffect(() => {
-    console.log(selectedUserList);
-  }, [selectedUserList]);
-
-  return (
-    <OsdsModal
-      dismissible
-      color={ODS_THEME_COLOR_INTENT.primary}
-      headline={t(
-        'key_management_service_credentials_identity_modal_user_list_headline',
-      )}
-      onOdsModalClose={close}
-    >
-      <div className="mt-8">
-        {isLoading ? (
-          <div className="flex justify-center">
-            <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
-          </div>
-        ) : (
-          <IdentitiesUserList
-            userList={combinedData}
-            selectedUserList={selectedUserList}
-            setSelectedUserList={setSelectedUserList}
-          />
-        )}
-      </div>
-      <OsdsButton
-        disabled={isLoading || undefined}
-        slot="actions"
-        type={ODS_BUTTON_TYPE.button}
-        variant={ODS_BUTTON_VARIANT.ghost}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={close}
-      >
-        {t(
-          'key_management_service_credentials_identity_modal_user_list_cancel',
-        )}
-      </OsdsButton>
-      <OsdsButton
-        disabled={isLoading || undefined}
-        slot="actions"
-        type={ODS_BUTTON_TYPE.button}
-        variant={ODS_BUTTON_VARIANT.flat}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={() => {
-          setUserList(selectedUserList);
-          close();
-        }}
-      >
-        {t('key_management_service_credentials_identity_modal_user_list_add')}
-      </OsdsButton>
-    </OsdsModal>
-  );
-};
-
-export default IdentityUserListModal;
diff --git a/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx b/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx
index c84df307cae9..1fbe6776ed1e 100644
--- a/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx
+++ b/packages/manager/apps/key-management-service/src/components/credential/credentialDatagrid/CredentialDatagridCells.tsx
@@ -4,16 +4,16 @@ import { useTranslation } from 'react-i18next';
 import {
   ActionMenu,
   ActionMenuItem,
-  DataGridClipboardCell,
+  Clipboard,
   DataGridTextCell,
   Links,
 } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
   ButtonType,
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
+import { ODS_BUTTON_COLOR } from '@ovhcloud/ods-components';
 import { OkmsCredential } from '@/types/okmsCredential.type';
 import { useFormattedDate } from '@/hooks/useFormattedDate';
 import { CredentialStatus } from '../credentialStatus/CredentialStatus.component';
@@ -44,7 +44,7 @@ export const DatagridCredentialCellName = (credential: OkmsCredential) => {
 };
 
 export const DatagridCredentialCellId = (credential: OkmsCredential) => {
-  return <DataGridClipboardCell text={credential.id} />;
+  return <Clipboard className="w-full" value={credential.id} />;
 };
 
 export const DatagridCredentialCellIdentities = (
@@ -91,7 +91,7 @@ export const DatagridCredentialCellExpirationDate = (
 };
 
 export const DatagridCredentialCellStatus = (credential: OkmsCredential) => {
-  return <CredentialStatus state={credential.status} inline />;
+  return <CredentialStatus state={credential.status} />;
 };
 
 export const DatagridCredentialCellActions = (credential: OkmsCredential) => {
@@ -109,7 +109,7 @@ export const DatagridCredentialCellActions = (credential: OkmsCredential) => {
       label: t('key_management_service_credential_download'),
       href,
       download: filename,
-      disabled: isDisabled,
+      isDisabled,
       onClick: () =>
         trackClick({
           location: PageLocation.datagrid,
@@ -121,7 +121,7 @@ export const DatagridCredentialCellActions = (credential: OkmsCredential) => {
     {
       id: 2,
       label: t('key_management_service_credential_delete'),
-      color: ODS_THEME_COLOR_INTENT.error,
+      color: ODS_BUTTON_COLOR.critical,
       iamActions: [kmsIamActions.credentialDelete],
       urn: okms.iam.urn,
       onClick: () => {
@@ -136,5 +136,11 @@ export const DatagridCredentialCellActions = (credential: OkmsCredential) => {
     },
   ];
 
-  return <ActionMenu items={items} isCompact />;
+  return (
+    <ActionMenu
+      id={`credentialsActions-${credential.id}`}
+      items={items}
+      isCompact
+    />
+  );
 };
diff --git a/packages/manager/apps/key-management-service/src/components/credential/credentialStatus/CredentialStatus.component.tsx b/packages/manager/apps/key-management-service/src/components/credential/credentialStatus/CredentialStatus.component.tsx
index 181df57a8ef8..767eb2fd99ba 100644
--- a/packages/manager/apps/key-management-service/src/components/credential/credentialStatus/CredentialStatus.component.tsx
+++ b/packages/manager/apps/key-management-service/src/components/credential/credentialStatus/CredentialStatus.component.tsx
@@ -1,20 +1,24 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  ODS_CHIP_SIZE,
-  ODS_TEXT_COLOR_INTENT,
-  OdsChipAttribute,
+  ODS_BADGE_COLOR,
+  ODS_BADGE_SIZE,
+  OdsBadge as OdsBadgeType,
 } from '@ovhcloud/ods-components';
-import { OsdsChip } from '@ovhcloud/ods-components/react';
+import { OdsBadge } from '@ovhcloud/ods-components/react';
 import { OkmsCredentialStatus } from '@/types/okmsCredential.type';
 
-export type KeyStatusProps = Omit<OdsChipAttribute, 'color'> & {
+export type KeyStatusProps = Omit<
+  OdsBadgeType,
+  'render' | 'color' | 'label' | 'size'
+> & {
   state: OkmsCredentialStatus;
+  size?: ODS_BADGE_SIZE;
 };
 
 export const CredentialStatus = ({
   state,
-  size = ODS_CHIP_SIZE.md,
+  size = ODS_BADGE_SIZE.md,
   ...otherProps
 }: KeyStatusProps) => {
   const { t } = useTranslation('key-management-service/credential');
@@ -22,40 +26,39 @@ export const CredentialStatus = ({
   const chipPropsByState: {
     [key in OkmsCredentialStatus]: {
       translationKey: string;
-      color: ODS_TEXT_COLOR_INTENT;
+      color: ODS_BADGE_COLOR;
     };
   } = {
     [OkmsCredentialStatus.creating]: {
       translationKey: 'key_management_service_credential_status_creating',
-      color: ODS_TEXT_COLOR_INTENT.primary,
+      color: ODS_BADGE_COLOR.information,
     },
     [OkmsCredentialStatus.deleting]: {
       translationKey: 'key_management_service_credential_status_deleting',
-      color: ODS_TEXT_COLOR_INTENT.warning,
+      color: ODS_BADGE_COLOR.warning,
     },
     [OkmsCredentialStatus.error]: {
       translationKey: 'key_management_service_credential_status_error',
-      color: ODS_TEXT_COLOR_INTENT.error,
+      color: ODS_BADGE_COLOR.critical,
     },
     [OkmsCredentialStatus.expired]: {
       translationKey: 'key_management_service_credential_status_expired',
-      color: ODS_TEXT_COLOR_INTENT.default,
+      color: ODS_BADGE_COLOR.neutral,
     },
     [OkmsCredentialStatus.ready]: {
       translationKey: 'key_management_service_credential_status_ready',
-      color: ODS_TEXT_COLOR_INTENT.success,
+      color: ODS_BADGE_COLOR.success,
     },
   };
 
   const props = chipPropsByState[state];
 
   return (
-    <OsdsChip
+    <OdsBadge
+      label={props ? t(props.translationKey) : state}
       size={size}
-      color={props?.color || ODS_TEXT_COLOR_INTENT.default}
+      color={props?.color || ODS_BADGE_COLOR.neutral}
       {...otherProps}
-    >
-      {props ? t(props.translationKey) : state}
-    </OsdsChip>
+    />
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/components/credential/credentialStatus/CredentialStatus.spec.tsx b/packages/manager/apps/key-management-service/src/components/credential/credentialStatus/CredentialStatus.spec.tsx
index 7cef51fbbbee..774f4a8d1ac5 100644
--- a/packages/manager/apps/key-management-service/src/components/credential/credentialStatus/CredentialStatus.spec.tsx
+++ b/packages/manager/apps/key-management-service/src/components/credential/credentialStatus/CredentialStatus.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {
-  ODS_TEXT_COLOR_INTENT,
-  OdsChipAttribute,
+  ODS_BADGE_COLOR,
+  OdsBadge as OdsBadgeType,
 } from '@ovhcloud/ods-components';
 import { render } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
@@ -12,37 +12,37 @@ describe('CredentialStatus component test suite', () => {
   const useCases: {
     state: OkmsCredentialStatus;
     label: string;
-    colorValue: OdsChipAttribute['color'];
+    colorValue: OdsBadgeType['color'];
   }[] = [
     {
       state: OkmsCredentialStatus.creating,
       label: 'key_management_service_credential_status_creating',
-      colorValue: ODS_TEXT_COLOR_INTENT.primary,
+      colorValue: ODS_BADGE_COLOR.information,
     },
     {
       state: OkmsCredentialStatus.deleting,
       label: 'key_management_service_credential_status_deleting',
-      colorValue: ODS_TEXT_COLOR_INTENT.warning,
+      colorValue: ODS_BADGE_COLOR.warning,
     },
     {
       state: OkmsCredentialStatus.error,
       label: 'key_management_service_credential_status_error',
-      colorValue: ODS_TEXT_COLOR_INTENT.error,
+      colorValue: ODS_BADGE_COLOR.critical,
     },
     {
       state: OkmsCredentialStatus.expired,
       label: 'key_management_service_credential_status_expired',
-      colorValue: ODS_TEXT_COLOR_INTENT.default,
+      colorValue: ODS_BADGE_COLOR.neutral,
     },
     {
       state: OkmsCredentialStatus.ready,
       label: 'key_management_service_credential_status_ready',
-      colorValue: ODS_TEXT_COLOR_INTENT.success,
+      colorValue: ODS_BADGE_COLOR.success,
     },
   ];
 
   test.each(useCases)(
-    'should return the right <OsdsChip /> configuration for $state state',
+    'should return the right <OdsBadge /> configuration for $state state',
     ({ state, colorValue, label }) => {
       // given state, colorValue and label
 
@@ -58,7 +58,7 @@ describe('CredentialStatus component test suite', () => {
     },
   );
 
-  it('should return default <OsdsChip /> configuration for unexpected state', () => {
+  it('should return default <OdsBadge /> configuration for unexpected state', () => {
     // given
     const serviceKeyState = 'AAA' as OkmsCredentialStatus;
 
@@ -70,6 +70,6 @@ describe('CredentialStatus component test suite', () => {
 
     // then
     expect(component).toHaveTextContent(serviceKeyState);
-    expect(component).toHaveProperty('color', ODS_TEXT_COLOR_INTENT.default);
+    expect(component).toHaveProperty('color', ODS_BADGE_COLOR.neutral);
   });
 });
diff --git a/packages/manager/apps/key-management-service/src/components/dashboard/tile-item/tileItem.component.tsx b/packages/manager/apps/key-management-service/src/components/dashboard/tile-item/tileItem.component.tsx
deleted file mode 100644
index 6a6c65c4af60..000000000000
--- a/packages/manager/apps/key-management-service/src/components/dashboard/tile-item/tileItem.component.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { ODS_THEME_TYPOGRAPHY_SIZE } from '@ovhcloud/ods-common-theming';
-import { CommonTitle } from '@ovh-ux/manager-react-components';
-
-type TileItemProps = {
-  title: string;
-  titleStatus?: React.ReactNode;
-};
-
-export const TileItem: React.FC<React.PropsWithChildren & TileItemProps> = ({
-  title,
-  titleStatus,
-  children,
-}) => {
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="flex flex-row justify-between ">
-        <CommonTitle typoSize={ODS_THEME_TYPOGRAPHY_SIZE._200}>
-          {title}
-        </CommonTitle>
-        {titleStatus}
-      </div>
-      {children}
-    </div>
-  );
-};
diff --git a/packages/manager/apps/key-management-service/src/components/dashboard/tile-separator/tileSeparator.tsx b/packages/manager/apps/key-management-service/src/components/dashboard/tile-separator/tileSeparator.tsx
deleted file mode 100644
index 2f5a377400bf..000000000000
--- a/packages/manager/apps/key-management-service/src/components/dashboard/tile-separator/tileSeparator.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import { ODS_DIVIDER_SIZE } from '@ovhcloud/ods-components';
-import { OsdsDivider } from '@ovhcloud/ods-components/react';
-
-export const TileSeparator = () => {
-  return <OsdsDivider separator size={ODS_DIVIDER_SIZE.one} />;
-};
diff --git a/packages/manager/apps/key-management-service/src/components/dashboard/tile-value-date/tileValueDate.component.tsx b/packages/manager/apps/key-management-service/src/components/dashboard/tile-value-date/tileValueDate.component.tsx
index b11e2f970c1f..35caba37420b 100644
--- a/packages/manager/apps/key-management-service/src/components/dashboard/tile-value-date/tileValueDate.component.tsx
+++ b/packages/manager/apps/key-management-service/src/components/dashboard/tile-value-date/tileValueDate.component.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { useFormattedDate } from '@/hooks/useFormattedDate';
-import { TileValue } from '../tile-value/tileValue.component';
 
 type FormattedDateProps = {
   value: string;
@@ -18,5 +19,5 @@ export const TileValueDate: React.FC<FormattedDateProps> = ({
     options,
   });
 
-  return <TileValue value={formattedDate} />;
+  return <OdsText preset={ODS_TEXT_PRESET.span}>{formattedDate}</OdsText>;
 };
diff --git a/packages/manager/apps/key-management-service/src/components/dashboard/tile-value/tileValue.component.tsx b/packages/manager/apps/key-management-service/src/components/dashboard/tile-value/tileValue.component.tsx
index 175acbdc16ac..6b26542b4df2 100644
--- a/packages/manager/apps/key-management-service/src/components/dashboard/tile-value/tileValue.component.tsx
+++ b/packages/manager/apps/key-management-service/src/components/dashboard/tile-value/tileValue.component.tsx
@@ -1,21 +1,14 @@
 import React from 'react';
-import { OsdsText } 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';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 
 type TileTextProps = {
   value: string;
-  isText?: boolean;
 };
 
+/**
+ * @deprecated
+ */
 export const TileValue: React.FC<TileTextProps> = ({ value }) => {
-  return (
-    <OsdsText
-      size={ODS_TEXT_SIZE._400}
-      level={ODS_TEXT_LEVEL.body}
-      color={ODS_THEME_COLOR_INTENT.default}
-    >
-      {value}
-    </OsdsText>
-  );
+  return <OdsText preset={ODS_TEXT_PRESET.span}>{value}</OdsText>;
 };
diff --git a/packages/manager/apps/key-management-service/src/components/dashboard/tile/tile.component.tsx b/packages/manager/apps/key-management-service/src/components/dashboard/tile/tile.component.tsx
deleted file mode 100644
index 3aac23e4cc1f..000000000000
--- a/packages/manager/apps/key-management-service/src/components/dashboard/tile/tile.component.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { OsdsTile } from '@ovhcloud/ods-components/react';
-import React from 'react';
-import { CommonTitle } from '@ovh-ux/manager-react-components';
-
-export type TileProps = {
-  title: string;
-};
-
-export const Tile: React.FC<React.PropsWithChildren & TileProps> = ({
-  title,
-  children,
-}) => {
-  return (
-    <OsdsTile rounded inline className="flex flex-col w-full h-fit">
-      <div className="flex flex-col gap-6 pb-4">
-        <CommonTitle>{title}</CommonTitle>
-        {children}
-      </div>
-    </OsdsTile>
-  );
-};
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx
index 9f7af6fed0d2..e1eafc1b7a22 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx
@@ -1,30 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useOrderURL } from '@ovh-ux/manager-module-order';
 import {
   ButtonType,
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
+import { OdsText, OdsButton, OdsCard } from '@ovhcloud/ods-components/react';
 import {
-  OsdsText,
-  OsdsButton,
-  OsdsLink,
-  OsdsIcon,
-  OsdsTile,
-} from '@ovhcloud/ods-components/react';
-import {
+  ODS_TEXT_PRESET,
   ODS_BUTTON_SIZE,
-  ODS_BUTTON_VARIANT,
-  ODS_ICON_SIZE,
-  ODS_ICON_NAME,
-  ODS_LINK_REFERRER_POLICY,
+  ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-} from '@ovhcloud/ods-common-theming';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { LinkType, Links, Subtitle } from '@ovh-ux/manager-react-components';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { ROUTES_URLS } from '@/routes/routes.constants';
@@ -37,17 +24,12 @@ type OrderConfirmationProps = {
 const OrderConfirmation = ({ region }: OrderConfirmationProps) => {
   const { t } = useTranslation('key-management-service/create');
   const { trackClick } = useOvhTracking();
-  const [orderLink, setOrderLink] = useState(null);
   const orderBaseUrl = useOrderURL('express_review_base');
   const navigate = useNavigate();
-
-  const generateExpressOrderLink = () => {
-    setOrderLink(getKMSExpressOrderLink({ orderBaseUrl, region }));
-  };
-
-  useEffect(() => {
-    generateExpressOrderLink();
-  }, [region]);
+  const orderLink = React.useMemo(
+    () => getKMSExpressOrderLink({ orderBaseUrl, region }),
+    [region],
+  );
 
   useEffect(() => {
     if (orderLink) {
@@ -57,64 +39,36 @@ const OrderConfirmation = ({ region }: OrderConfirmationProps) => {
 
   return (
     <>
-      <OsdsTile className="mb-6">
-        <span slot="start">
-          <div className="flex flex-col gap-6 mb-6">
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._600}
-              color={ODS_THEME_COLOR_INTENT.text}
-            >
-              {t('key_management_service_create_order_initiated_title')}
-            </OsdsText>
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.subheading}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._800}
-              color={ODS_THEME_COLOR_INTENT.text}
-            >
-              {t('key_management_service_create_order_initiated_subtitle')}
-            </OsdsText>
-            <OsdsLink
-              color={ODS_THEME_COLOR_INTENT.primary}
-              target={OdsHTMLAnchorElementTarget._blank}
-              referrerpolicy={
-                ODS_LINK_REFERRER_POLICY.strictOriginWhenCrossOrigin
-              }
-              href={orderLink}
-              onClick={() =>
-                trackClick({
-                  location: PageLocation.funnel,
-                  buttonType: ButtonType.externalLink,
-                  actionType: 'navigation',
-                  actions: ['go-back-order'],
-                })
-              }
-            >
-              {orderLink}
-              <span slot="end">
-                <OsdsIcon
-                  className="ml-4 cursor-pointer"
-                  name={ODS_ICON_NAME.EXTERNAL_LINK}
-                  size={ODS_ICON_SIZE.xs}
-                  hoverable
-                ></OsdsIcon>
-              </span>
-            </OsdsLink>
-            <OsdsText
-              level={ODS_THEME_TYPOGRAPHY_LEVEL.subheading}
-              size={ODS_THEME_TYPOGRAPHY_SIZE._800}
-              color={ODS_THEME_COLOR_INTENT.text}
-            >
-              {t('key_management_service_create_order_initiated_info')}
-            </OsdsText>
-          </div>
-        </span>
-      </OsdsTile>
-      <OsdsButton
-        inline
+      <OdsCard className="mb-6 p-4">
+        <div className="flex flex-col gap-6 mb-6">
+          <Subtitle>
+            {t('key_management_service_create_order_initiated_title')}
+          </Subtitle>
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+            {t('key_management_service_create_order_initiated_subtitle')}
+          </OdsText>
+          <Links
+            type={LinkType.external}
+            label={orderLink}
+            target="_blank"
+            href={orderLink}
+            onClickReturn={() =>
+              trackClick({
+                location: PageLocation.funnel,
+                buttonType: ButtonType.externalLink,
+                actionType: 'navigation',
+                actions: ['go-back-order'],
+              })
+            }
+          />
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+            {t('key_management_service_create_order_initiated_info')}
+          </OdsText>
+        </div>
+      </OdsCard>
+      <OdsButton
         size={ODS_BUTTON_SIZE.md}
-        variant={ODS_BUTTON_VARIANT.flat}
-        color={ODS_THEME_COLOR_INTENT.primary}
+        color={ODS_BUTTON_COLOR.primary}
         onClick={() => {
           trackClick({
             location: PageLocation.funnel,
@@ -124,9 +78,8 @@ const OrderConfirmation = ({ region }: OrderConfirmationProps) => {
           });
           navigate(ROUTES_URLS.root, { state: { hasPendingOrder: true } });
         }}
-      >
-        {t('key_management_service_create_order_initiated_cta_done')}
-      </OsdsButton>
+        label={t('key_management_service_create_order_initiated_cta_done')}
+      />
     </>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/RegionSelector.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/RegionSelector.tsx
index fd8209626568..bc4751e99d58 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/RegionSelector.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/RegionSelector.tsx
@@ -1,28 +1,21 @@
 import React, { useContext, Dispatch, SetStateAction, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  OsdsText,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsFormField,
-  OsdsButton,
-  OsdsIcon,
-  OsdsSpinner,
+  OdsText,
+  OdsSelect,
+  OdsFormField,
+  OdsButton,
+  OdsSpinner,
 } from '@ovhcloud/ods-components/react';
-
 import {
   ODS_SPINNER_SIZE,
-  ODS_ICON_SIZE,
+  ODS_BUTTON_COLOR,
   ODS_ICON_NAME,
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
-  ODS_SELECT_SIZE,
+  ODS_TEXT_PRESET,
+  ODS_BUTTON_ICON_ALIGNMENT,
 } from '@ovhcloud/ods-components';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-} from '@ovhcloud/ods-common-theming';
 import {
   ButtonType,
   PageLocation,
@@ -30,7 +23,11 @@ import {
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
 import { useNavigate } from 'react-router-dom';
-import { ErrorBanner, Region } from '@ovh-ux/manager-react-components';
+import {
+  ErrorBanner,
+  Region,
+  Subtitle,
+} from '@ovh-ux/manager-react-components';
 import { useOrderCatalogOKMS } from '@/data/hooks/useOrderCatalogOKMS';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 
@@ -66,92 +63,78 @@ const RegionSelector = ({
   return (
     <>
       <div className="flex flex-col gap-6">
-        <OsdsText
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._600}
-          color={ODS_THEME_COLOR_INTENT.text}
-        >
-          {t('key_management_service_create_region_title')}
-        </OsdsText>
-        <OsdsText
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-          color={ODS_THEME_COLOR_INTENT.text}
-        >
-          {t('key_management_service_create_region_description')}
-        </OsdsText>
-
-        <OsdsFormField inline className="mb-5">
+        <OdsFormField className="mb-5">
           <div slot="label">
+            <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+              {t('key_management_service_create_region_title')}
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+              {t('key_management_service_create_region_description')}
+            </OdsText>
             {isLoading && (
-              <OsdsSpinner className="mr-3" inline size={ODS_SPINNER_SIZE.sm} />
+              <OdsSpinner className="mr-3" size={ODS_SPINNER_SIZE.sm} />
             )}
           </div>
           {orderCatalogOKMS && !isLoading && (
-            <OsdsSelect
-              inline
-              data-testid="select-region"
-              size={ODS_SELECT_SIZE.md}
-              onOdsValueChange={(v) => {
-                const value = v.detail.value.toString();
+            <OdsSelect
+              className="md:w-[250px] sm:w-full"
+              name="select-region"
+              placeholder={t(
+                'key_management_service_create_select_placeholder',
+              )}
+              onOdsChange={(v) => {
+                const value = v.detail.value?.toString();
 
-                trackClick({
-                  location: PageLocation.funnel,
-                  buttonType: ButtonType.select,
-                  actionType: 'action',
-                  actions: ['select_location', value],
-                });
+                if (value) {
+                  trackClick({
+                    location: PageLocation.funnel,
+                    buttonType: ButtonType.select,
+                    actionType: 'action',
+                    actions: ['select_location', value],
+                  });
 
-                selectRegion(value);
+                  selectRegion(value);
+                }
               }}
             >
-              <span slot="placeholder">
-                {t('key_management_service_create_select_placeholder')}
-              </span>
               {orderCatalogOKMS.plans[0].configurations[0].values.map(
-                (region) => {
-                  return (
-                    <OsdsSelectOption
-                      value={region}
-                      key={region}
-                      data-testid={`select-region-option-${region}`}
-                    >
-                      <Region
-                        mode={'region'}
-                        name={region.toLowerCase().replaceAll('_', '-')}
-                      />
-                    </OsdsSelectOption>
-                  );
-                },
+                (region) => (
+                  <option
+                    key={region}
+                    value={region}
+                    data-testid={`select-region-option-${region}`}
+                  >
+                    <Region
+                      mode="region"
+                      name={region.toLowerCase().replaceAll('_', '-')}
+                    />
+                  </option>
+                ),
               )}
-            </OsdsSelect>
+            </OdsSelect>
           )}
-        </OsdsFormField>
+        </OdsFormField>
       </div>
-      <div className="flex flex-row mt-6 gap-4">
-        <OsdsButton
-          className="mr-1"
-          size={ODS_BUTTON_SIZE.sm}
-          variant={ODS_BUTTON_VARIANT.stroked}
-          color={ODS_THEME_COLOR_INTENT.primary}
+      <div className="flex flex-row gap-4">
+        <OdsButton
+          size={ODS_BUTTON_SIZE.md}
+          variant={ODS_BUTTON_VARIANT.outline}
+          color={ODS_BUTTON_COLOR.primary}
           onClick={() => {
             trackClick({
               location: PageLocation.funnel,
               buttonType: ButtonType.link,
               actionType: 'navigation',
-              actions: ['create_kms', 'cancel', selectedRegion],
+              actions: ['create_kms', 'cancel'],
             });
             navigate(ROUTES_URLS.root);
           }}
-        >
-          {t('key_management_service_create_cta_cancel')}
-        </OsdsButton>
-        <OsdsButton
-          className="mr-1"
-          size={ODS_BUTTON_SIZE.sm}
-          variant={ODS_BUTTON_VARIANT.flat}
-          color={ODS_THEME_COLOR_INTENT.primary}
-          disabled={!selectedRegion || undefined}
+          label={t('key_management_service_create_cta_cancel')}
+        />
+        <OdsButton
+          size={ODS_BUTTON_SIZE.md}
+          color={ODS_BUTTON_COLOR.primary}
+          isDisabled={!selectedRegion}
           onClick={() => {
             trackClick({
               location: PageLocation.funnel,
@@ -161,16 +144,10 @@ const RegionSelector = ({
             });
             setOrderInitiated();
           }}
-        >
-          <span slot="start">
-            <OsdsIcon
-              name={ODS_ICON_NAME.EXTERNAL_LINK}
-              size={ODS_ICON_SIZE.xs}
-              contrasted
-            ></OsdsIcon>
-          </span>
-          {t('key_management_service_create_cta_order')}
-        </OsdsButton>
+          icon={ODS_ICON_NAME.externalLink}
+          iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.left}
+          label={t('key_management_service_create_cta_order')}
+        />
       </div>
     </>
   );
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx
index 89e276f66743..7cbd9b516a2b 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx
@@ -1,16 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import {
-  OsdsTabs,
-  OsdsTabBar,
-  OsdsTabBarItem,
-  OsdsChip,
-} from '@ovhcloud/ods-components/react';
-import {
-  ODS_CHIP_SIZE,
-  OdsTabsChangeEventDetail,
-  OsdsTabsCustomEvent,
-} from '@ovhcloud/ods-components';
+import { OdsTabs, OdsTab, OdsBadge } from '@ovhcloud/ods-components/react';
+import { ODS_BADGE_SIZE } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import {
   ButtonType,
@@ -38,57 +29,53 @@ const Dashboard: React.FC<DashboardLayoutProps> = ({ tabs }) => {
 
   useEffect(() => {
     const activeTab = tabs.find(
-      (tab) => `/${okmsId}/${tab.url}` === location.pathname,
+      (tab) =>
+        `/${okmsId}${tab.url ? '/' : ''}${tab.url}` === location.pathname,
     );
     if (!activeTab) return;
     setActivePanel(activeTab?.url);
   }, [location]);
 
-  const handleTabChange = (
-    event: OsdsTabsCustomEvent<OdsTabsChangeEventDetail>,
-  ) => {
-    const {
-      detail: { panel },
-    } = event;
-    const url = `/${okmsId}/${panel}`;
-
-    const trackingTag = panel === '' ? 'general-informations' : panel;
+  return (
+    <div className="mb-6">
+      <OdsTabs
+        onOdsTabsSelected={(event) => {
+          const { id } = event.detail.target as HTMLElement;
+          const url = `/${okmsId}/${id}`;
 
-    trackClick({
-      location: PageLocation.page,
-      buttonType: ButtonType.tab,
-      actionType: 'navigation',
-      actions: [trackingTag],
-    });
+          const trackingTag = id ?? 'general-informations';
 
-    setActivePanel(panel);
-    navigate(url);
-  };
+          trackClick({
+            location: PageLocation.page,
+            buttonType: ButtonType.tab,
+            actionType: 'navigation',
+            actions: [trackingTag],
+          });
 
-  return (
-    <div className="mb-6">
-      <OsdsTabs
-        panel={activePanel}
-        onOdsTabsChanged={(event) => handleTabChange(event)}
+          setActivePanel(id);
+          navigate(url);
+        }}
       >
-        <OsdsTabBar slot="top">
-          {tabs.map((tab: DashboardTabItemProps) => (
-            <OsdsTabBarItem
-              key={`osds-tab-bar-item-${tab.url}`}
-              panel={tab.url}
-              disabled={tab.disabled}
-              className="flex items-center justify-center"
-            >
-              {tab.title}
-              {tab.disabled && (
-                <OsdsChip size={ODS_CHIP_SIZE.sm} inline className="ml-2">
-                  {t('key_management_service_dashboard_tab_comming_soon')}
-                </OsdsChip>
-              )}
-            </OsdsTabBarItem>
-          ))}
-        </OsdsTabBar>
-      </OsdsTabs>
+        {tabs.map((tab: DashboardTabItemProps) => (
+          <OdsTab
+            key={`ods-tab-bar-item-${tab.url}`}
+            id={tab.url}
+            isSelected={activePanel === tab.url}
+            isDisabled={tab.disabled}
+            className="flex items-center justify-center"
+            title={tab.title}
+          >
+            {tab.title}
+            {tab.disabled && (
+              <OdsBadge
+                size={ODS_BADGE_SIZE.sm}
+                className="ml-2"
+                label={t('key_management_service_dashboard_tab_comming_soon')}
+              />
+            )}
+          </OdsTab>
+        ))}
+      </OdsTabs>
     </div>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.constants.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.constants.tsx
index ebb42cf47830..3f7e73ce5388 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.constants.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.constants.tsx
@@ -1,2 +1,8 @@
 export const DISPLAY_CONTACTS_MANAGEMENT_KEY =
   'key-management-service:display-contacts-management';
+
+export const dateFormat: Intl.DateTimeFormatOptions = {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+};
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx
index 36b856b43fdc..67f446d878e6 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/BillingInformationsTile.tsx
@@ -1,18 +1,22 @@
+import React, { useContext } from 'react';
 import {
   ActionMenu,
   ActionMenuItem,
-  ServiceDetails,
-  useFeatureAvailability,
+  DashboardTile,
+  LinkType,
+  Links,
 } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import {
+  useFeatureAvailability,
+  ServiceDetails,
+} from '@ovh-ux/manager-module-common-api';
 import {
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_COLOR_INTENT,
+  ODS_TEXT_PRESET,
+  ODS_BADGE_COLOR,
 } from '@ovhcloud/ods-components';
 import { Outlet, useNavigate } from 'react-router-dom';
-import { OsdsChip, OsdsIcon, OsdsLink } from '@ovhcloud/ods-components/react';
-import React, { useContext, useEffect, useState } from 'react';
+import { OdsText, OdsBadge } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import {
   ButtonType,
@@ -21,12 +25,11 @@ import {
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
 import { OkmsServiceState } from '../okmsServiceState/OkmsServiceState.component';
-import { Tile } from '@/components/dashboard/tile/tile.component';
-import { TileItem } from '@/components/dashboard/tile-item/tileItem.component';
-import { TileValue } from '@/components/dashboard/tile-value/tileValue.component';
-import { TileSeparator } from '@/components/dashboard/tile-separator/tileSeparator';
 import { TileValueDate } from '@/components/dashboard/tile-value-date/tileValueDate.component';
-import { DISPLAY_CONTACTS_MANAGEMENT_KEY } from './BillingInformationsTile.constants';
+import {
+  DISPLAY_CONTACTS_MANAGEMENT_KEY,
+  dateFormat,
+} from './BillingInformationsTile.constants';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 
 type BillingInformationsTileProps = {
@@ -38,8 +41,8 @@ const BillingInformationsTile = ({
 }: BillingInformationsTileProps) => {
   const { t } = useTranslation('key-management-service/dashboard');
   const navigate = useNavigate();
+  const [contactUrl, setContactUrl] = React.useState('#');
   const { trackClick } = useOvhTracking();
-  const [contactUrl, setContactUrl] = useState('');
   const { data: availability } = useFeatureAvailability([
     DISPLAY_CONTACTS_MANAGEMENT_KEY,
   ]);
@@ -47,17 +50,16 @@ const BillingInformationsTile = ({
     shell: { navigation },
   } = useContext(ShellContext);
 
-  const dateFormat: Intl.DateTimeFormatOptions = {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-  };
+  React.useEffect(() => {
+    navigation
+      .getURL('dedicated', '#/contacts/services', {})
+      .then(setContactUrl, () => setContactUrl('#'));
+  }, [navigation]);
 
   const items: ActionMenuItem[] = [
     {
       id: 1,
       label: t('key_management_service_dashboard_action_billing_terminate'),
-      color: ODS_THEME_COLOR_INTENT.error,
       onClick: () => {
         trackClick({
           location: PageLocation.page,
@@ -70,100 +72,92 @@ const BillingInformationsTile = ({
     },
   ];
 
-  useEffect(() => {
-    const fetchUrl = async () => {
-      try {
-        const response = await navigation.getURL(
-          'dedicated',
-          '#/contacts/services',
-          {},
-        );
-        setContactUrl(response as string);
-      } catch (error) {
-        setContactUrl('#');
-      }
-    };
-    fetchUrl();
-  }, [navigation]);
-
   return (
     <>
-      <Tile title={t('billing_informations')}>
-        <TileSeparator />
-        <TileItem
-          title={t(
-            'key_management_service_dashboard_field_label_creation_date',
-          )}
-        >
-          <TileValueDate
-            value={okmsService?.billing.lifecycle.current.creationDate}
-            options={dateFormat}
-          />
-        </TileItem>
-        <TileSeparator />
-        <TileItem
-          title={t('key_management_service_dashboard_field_label_state')}
-        >
-          <span>
-            <OkmsServiceState state={okmsService?.resource.state} inline />
-          </span>
-        </TileItem>
-        <TileSeparator />
-        <TileItem
-          title={t(
-            'key_management_service_dashboard_field_label_next_billing_date',
-          )}
-        >
-          <div className="flex flex-row justify-between items-center">
-            <TileValueDate
-              value={okmsService?.billing.nextBillingDate}
-              options={dateFormat}
-            />
-
-            <div className="flex flex-row align-center gap-4">
-              <ActionMenu
-                items={items}
-                isCompact
-                icon={ODS_ICON_NAME.ELLIPSIS_VERTICAL}
+      <DashboardTile
+        title={t('billing_informations')}
+        items={[
+          {
+            id: 'creationDate',
+            label: t(
+              'key_management_service_dashboard_field_label_creation_date',
+            ),
+            value: (
+              <TileValueDate
+                value={okmsService?.billing.lifecycle.current.creationDate}
+                options={dateFormat}
               />
-            </div>
-          </div>
-        </TileItem>
-        <TileSeparator />
-        <TileItem
-          title={t('key_management_service_dashboard_field_label_engagement')}
-        >
-          <span>
-            <OsdsChip color={ODS_TEXT_COLOR_INTENT.error} inline>
-              {okmsService?.billing.engagement?.endRule?.strategy
-                ? okmsService.billing.engagement.endRule.strategy
-                : t(
-                    'key_management_service_dashboard_field_label_engagement_none',
-                  )}
-            </OsdsChip>
-          </span>
-        </TileItem>
-        {availability?.[DISPLAY_CONTACTS_MANAGEMENT_KEY] && (
-          <>
-            <TileSeparator />
-            <TileItem
-              title={t('key_management_service_dashboard_field_label_contacts')}
-            >
-              {okmsService?.customer.contacts.map((contact) => {
-                return (
-                  <TileValue
-                    key={contact.customerCode + contact.type}
-                    value={`${contact.customerCode} ${t(
-                      `key_management_service_dashboard_contact_type_${contact.type}`,
-                    )}`}
+            ),
+          },
+          {
+            id: 'state',
+            label: t('key_management_service_dashboard_field_label_state'),
+            value: (
+              <span>
+                <OkmsServiceState state={okmsService?.resource?.state} />
+              </span>
+            ),
+          },
+          {
+            id: 'nextBillingDate',
+            label: t(
+              'key_management_service_dashboard_field_label_next_billing_date',
+            ),
+            value: (
+              <div className="flex flex-row justify-between items-center">
+                <TileValueDate
+                  value={okmsService?.billing.nextBillingDate}
+                  options={dateFormat}
+                />
+
+                <div className="flex flex-row align-center gap-4">
+                  <ActionMenu
+                    id="nextBillingDateMenu"
+                    items={items}
+                    isCompact
+                    icon={ODS_ICON_NAME.ellipsisVertical}
                   />
-                );
-              })}
-              <div className="flex flex-row items-center">
-                <OsdsLink
-                  href={contactUrl}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  onClick={() =>
+                </div>
+              </div>
+            ),
+          },
+          {
+            id: 'engagement',
+            label: t('key_management_service_dashboard_field_label_engagement'),
+            value: (
+              <span>
+                <OdsBadge
+                  color={ODS_BADGE_COLOR.critical}
+                  label={
+                    okmsService?.billing.engagement?.endRule?.strategy ??
+                    t(
+                      'key_management_service_dashboard_field_label_engagement_none',
+                    )
+                  }
+                />
+              </span>
+            ),
+          },
+          availability?.[DISPLAY_CONTACTS_MANAGEMENT_KEY] && {
+            id: 'contacts',
+            label: t('key_management_service_dashboard_field_label_contacts'),
+            value: (
+              <>
+                <div className="mb-3">
+                  {okmsService?.customer.contacts.map((contact) => (
+                    <OdsText
+                      key={contact.customerCode + contact.type}
+                      preset={ODS_TEXT_PRESET.span}
+                      className="block mb-1"
+                    >{`${contact.customerCode} ${t(
+                      `key_management_service_dashboard_contact_type_${contact.type}`,
+                    )}`}</OdsText>
+                  ))}
+                </div>
+                <Links
+                  type={LinkType.next}
+                  href={(contactUrl as unknown) as string}
+                  onClickReturn={() =>
                     trackClick({
                       location: PageLocation.page,
                       buttonType: ButtonType.externalLink,
@@ -171,22 +165,15 @@ const BillingInformationsTile = ({
                       actions: ['contact_support'],
                     })
                   }
-                >
-                  {t(
+                  label={t(
                     'key_management_service_dashboard_field_label_manage_contacts',
                   )}
-                </OsdsLink>
-                <OsdsIcon
-                  className="pl-4"
-                  name={ODS_ICON_NAME.ARROW_RIGHT}
-                  size={ODS_ICON_SIZE.xs}
-                  color={ODS_THEME_COLOR_INTENT.info}
-                ></OsdsIcon>
-              </div>
-            </TileItem>
-          </>
-        )}
-      </Tile>
+                />
+              </>
+            ),
+          },
+        ].filter(Boolean)}
+      />
       <Outlet />
     </>
   );
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx
index 20f308b18a2b..76ef1df233e6 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx
@@ -1,38 +1,28 @@
 import React from 'react';
 import {
   Clipboard,
-  Description,
+  DashboardTile,
+  LinkType,
+  Links,
   Region,
   ServiceDetails,
 } from '@ovh-ux/manager-react-components';
-import {
-  OsdsButton,
-  OsdsIcon,
-  OsdsLink,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
 import {
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_LINK_REFERRER_POLICY,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
+  ODS_TEXT_PRESET,
+  ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
 import {
   ButtonType,
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { OKMS } from '@/types/okms.type';
-import { Tile } from '@/components/dashboard/tile/tile.component';
-import { TileSeparator } from '@/components/dashboard/tile-separator/tileSeparator';
-import { TileValue } from '@/components/dashboard/tile-value/tileValue.component';
-import { TileItem } from '@/components/dashboard/tile-item/tileItem.component';
+import { ROUTES_URLS } from '@/routes/routes.constants';
 
 type InformationTileProps = {
   okmsData?: OKMS;
@@ -48,86 +38,101 @@ const InformationsTile = ({
   const navigate = useNavigate();
 
   return (
-    <Tile title={t('general_informations')}>
-      <TileSeparator />
-      <TileItem title={t('key_management_service_dashboard_field_label_name')}>
-        <div className="flex justify-between items-center">
-          <Description className="break-all">
-            {okmsServiceInfos?.resource.displayName}
-          </Description>
-          <div className="min-w-fit">
-            <OsdsButton
-              circle
-              variant={ODS_BUTTON_VARIANT.stroked}
-              color={ODS_THEME_COLOR_INTENT.primary}
-              onClick={() => navigate('update-name')}
-            >
-              <OsdsIcon
-                aria-label="edit"
-                name={ODS_ICON_NAME.PEN}
-                size={ODS_ICON_SIZE.xs}
-                color={ODS_THEME_COLOR_INTENT.primary}
+    <>
+      <DashboardTile
+        title={t('general_informations')}
+        items={[
+          {
+            id: 'name',
+            label: t('key_management_service_dashboard_field_label_name'),
+            value: (
+              <div className="flex justify-between items-center">
+                <OdsText
+                  preset={ODS_TEXT_PRESET.paragraph}
+                  className="break-all"
+                >
+                  {okmsServiceInfos?.resource.displayName}
+                </OdsText>
+                <div className="min-w-fit">
+                  <OdsButton
+                    aria-label="edit"
+                    variant={ODS_BUTTON_VARIANT.outline}
+                    color={ODS_BUTTON_COLOR.primary}
+                    onClick={() => navigate(ROUTES_URLS.okmsUpdateName)}
+                    icon={ODS_ICON_NAME.pen}
+                    label=""
+                  />
+                </div>
+              </div>
+            ),
+          },
+          {
+            id: 'id',
+            label: t('key_management_service_dashboard_field_label_id'),
+            value: <Clipboard className="block w-full" value={okmsData?.id} />,
+          },
+          {
+            id: 'urn',
+            label: t('key_management_service_dashboard_field_label_urn'),
+            value: (
+              <Clipboard className="block w-full" value={okmsData?.iam.urn} />
+            ),
+          },
+          {
+            id: 'region',
+            label: t('key_management_service_dashboard_field_label_region'),
+            value: (
+              <OdsText preset={ODS_TEXT_PRESET.span}>
+                <Region
+                  mode="region"
+                  name={okmsData.region.toLowerCase().replaceAll('_', '-')}
+                />
+              </OdsText>
+            ),
+          },
+          {
+            id: 'restApi',
+            label: t('key_management_service_dashboard_field_label_restApi'),
+            value: (
+              <Clipboard
+                className="block w-full"
+                value={okmsData?.restEndpoint}
+              />
+            ),
+          },
+          {
+            id: 'kmip',
+            label: t('key_management_service_dashboard_field_label_kmip'),
+            value: (
+              <Clipboard
+                className="block w-full"
+                value={okmsData?.kmipEndpoint}
+              />
+            ),
+          },
+          {
+            id: 'swagger',
+            label: t('key_management_service_dashboard_field_label_swagger'),
+            value: (
+              <Links
+                type={LinkType.external}
+                href={okmsData?.swaggerEndpoint}
+                onClickReturn={() =>
+                  trackClick({
+                    location: PageLocation.page,
+                    buttonType: ButtonType.externalLink,
+                    actionType: 'navigation',
+                    actions: ['swagger-ui'],
+                  })
+                }
+                label={okmsData?.swaggerEndpoint}
               />
-            </OsdsButton>
-          </div>
-        </div>
-      </TileItem>
-      <TileSeparator />
-      <TileItem title={t('key_management_service_dashboard_field_label_id')}>
-        <Clipboard value={okmsData?.id} />
-      </TileItem>
-      <TileSeparator />
-      <TileItem title={t('key_management_service_dashboard_field_label_urn')}>
-        <Clipboard value={okmsData?.iam.urn} />
-      </TileItem>
-      <TileSeparator />
-      <TileItem
-        title={t('key_management_service_dashboard_field_label_region')}
-      >
-        <OsdsText
-          size={ODS_TEXT_SIZE._400}
-          level={ODS_TEXT_LEVEL.body}
-          color={ODS_THEME_COLOR_INTENT.default}
-        >
-          <Region
-            mode={'region'}
-            name={okmsData.region.toLowerCase().replaceAll('_', '-')}
-          />
-        </OsdsText>
-      </TileItem>
-      <TileSeparator />
-      <TileItem
-        title={t('key_management_service_dashboard_field_label_restApi')}
-      >
-        <Clipboard value={okmsData?.restEndpoint} />
-      </TileItem>
-      <TileSeparator />
-      <TileItem title={t('key_management_service_dashboard_field_label_kmip')}>
-        <Clipboard value={okmsData?.kmipEndpoint} />
-      </TileItem>
-      <TileSeparator />
-      <TileItem
-        title={t('key_management_service_dashboard_field_label_swagger')}
-      >
-        <OsdsLink
-          href={okmsData?.swaggerEndpoint}
-          color={ODS_THEME_COLOR_INTENT.primary}
-          target={OdsHTMLAnchorElementTarget._blank}
-          referrerpolicy={ODS_LINK_REFERRER_POLICY.strictOriginWhenCrossOrigin}
-          onClick={() =>
-            trackClick({
-              location: PageLocation.page,
-              buttonType: ButtonType.externalLink,
-              actionType: 'navigation',
-              actions: ['swagger-ui'],
-            })
-          }
-        >
-          {okmsData?.swaggerEndpoint}
-        </OsdsLink>
-      </TileItem>
+            ),
+          },
+        ]}
+      />
       <Outlet />
-    </Tile>
+    </>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/okmsServiceState/OkmsServiceState.component.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/okmsServiceState/OkmsServiceState.component.tsx
index d25c3dea9ca9..b916171fe51e 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/okmsServiceState/OkmsServiceState.component.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Dashboard/okmsServiceState/OkmsServiceState.component.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  ODS_CHIP_SIZE,
-  ODS_TEXT_COLOR_INTENT,
-  OdsChipAttribute,
-} from '@ovhcloud/ods-components';
-import { OsdsChip } from '@ovhcloud/ods-components/react';
+import { ODS_BADGE_COLOR, ODS_BADGE_SIZE } from '@ovhcloud/ods-components';
+import { OdsBadge } from '@ovhcloud/ods-components/react';
 import { ResourceStatus } from '@ovh-ux/manager-react-components';
 
-export type OkmsStateProps = Omit<OdsChipAttribute, 'color'> & {
+export type OkmsStateProps = {
+  size?: ODS_BADGE_SIZE;
   state: ResourceStatus;
-};
+} & Record<string, string>;
 
 export const OkmsServiceState = ({ state, ...props }: OkmsStateProps) => {
   const { t } = useTranslation('key-management-service/dashboard');
@@ -18,54 +15,57 @@ export const OkmsServiceState = ({ state, ...props }: OkmsStateProps) => {
   const { size, ...otherProps } = props;
 
   let label = '';
-  let color: OdsChipAttribute['color'];
+  let color: ODS_BADGE_COLOR;
 
   switch (state) {
     case 'active':
       label = t(
         'key_management_service_dashboard_dashboard_field_state_active',
       );
-      color = ODS_TEXT_COLOR_INTENT.success;
+      color = ODS_BADGE_COLOR.success;
       break;
     case 'deleted':
       label = t(
         'key_management_service_dashboard_dashboard_field_state_deleted',
       );
-      color = ODS_TEXT_COLOR_INTENT.error;
+      color = ODS_BADGE_COLOR.critical;
       break;
     case 'suspended':
       label = t(
         'key_management_service_dashboard_dashboard_field_state_suspended',
       );
-      color = ODS_TEXT_COLOR_INTENT.warning;
+      color = ODS_BADGE_COLOR.warning;
       break;
     case 'toActivate':
       label = t(
         'key_management_service_dashboard_dashboard_field_state_toActivate',
       );
-      color = ODS_TEXT_COLOR_INTENT.info;
+      color = ODS_BADGE_COLOR.information;
       break;
     case 'toDelete':
       label = t(
         'key_management_service_dashboard_dashboard_field_state_toDelete',
       );
-      color = ODS_TEXT_COLOR_INTENT.default;
+      color = ODS_BADGE_COLOR.neutral;
       break;
     case 'toSuspend':
       label = t(
         'key_management_service_dashboard_dashboard_field_state_toSuspend',
       );
-      color = ODS_TEXT_COLOR_INTENT.default;
+      color = ODS_BADGE_COLOR.neutral;
       break;
     default:
       label = state;
-      color = ODS_TEXT_COLOR_INTENT.default;
+      color = ODS_BADGE_COLOR.neutral;
       break;
   }
 
   return (
-    <OsdsChip size={size || ODS_CHIP_SIZE.md} color={color} {...otherProps}>
-      {label}
-    </OsdsChip>
+    <OdsBadge
+      size={size || ODS_BADGE_SIZE.md}
+      color={color}
+      label={label}
+      {...otherProps}
+    />
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Listing/TableContainer.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Listing/TableContainer.tsx
index 6bfc2d6f5670..74449980b798 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Listing/TableContainer.tsx
+++ b/packages/manager/apps/key-management-service/src/components/layout-helpers/Listing/TableContainer.tsx
@@ -10,10 +10,8 @@ import {
   flexRender,
 } from '@tanstack/react-table';
 import { useNavigate } from 'react-router-dom';
-import { Table } from '@ovh-ux/manager-react-components';
-import { OsdsText, OsdsLink } from '@ovhcloud/ods-components/react';
-import { ODS_TEXT_SIZE } from '@ovhcloud/ods-components/';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { OdsTable, OdsText, OdsLink } from '@ovhcloud/ods-components/react';
+import { ODS_TEXT_PRESET, ODS_LINK_COLOR } from '@ovhcloud/ods-components';
 import appConfig from '@/key-management-service.config';
 
 interface TableContainer {
@@ -32,29 +30,33 @@ function DisplayCellText({ cell }: DisplayCellText) {
   const columnDef: string = cell?.column?.columnDef?.header;
   const navigate = useNavigate();
   let label = cell.renderValue() as string;
+
   if (columnDef === serviceKey) {
     return (
-      <OsdsLink
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={() => navigate(label)}
-      >
-        {label}
-      </OsdsLink>
+      <OdsLink
+        color={ODS_LINK_COLOR.primary}
+        onClick={(e) => {
+          e.preventDefault();
+          navigate(label);
+        }}
+        href={label}
+        label={label}
+      />
     );
   }
+
   if (typeof label === 'object') {
     label = '-';
   }
-  return (
-    <OsdsText color={ODS_THEME_COLOR_INTENT.text}>{label || '-'}</OsdsText>
-  );
+
+  return <OdsText preset={ODS_TEXT_PRESET.paragraph}>{label || '-'}</OdsText>;
 }
 
 function HeaderTableTh({ header }: DisplayCellText) {
   return (
-    <OsdsText color={ODS_THEME_COLOR_INTENT.text} size={ODS_TEXT_SIZE._500}>
+    <OdsText preset={ODS_TEXT_PRESET.heading4}>
       {flexRender(header.column.columnDef.header, header.getContext())}
-    </OsdsText>
+    </OdsText>
   );
 }
 
@@ -76,7 +78,7 @@ function TableContainer({ data, hasNextPage = false }: TableContainer) {
   return (
     <div>
       <div>
-        <Table fullWidth={true}>
+        <OdsTable>
           <thead
             className={
               hasNextPage || data.length > 10 ? 'sticky top-0 z-1 bg-white' : ''
@@ -108,7 +110,7 @@ function TableContainer({ data, hasNextPage = false }: TableContainer) {
               </tr>
             ))}
           </tbody>
-        </Table>
+        </OdsTable>
       </div>
     </div>
   );
diff --git a/packages/manager/apps/key-management-service/src/components/menu/KmsActionMenu.component.tsx b/packages/manager/apps/key-management-service/src/components/menu/KmsActionMenu.component.tsx
index b0d42c45e04c..0878684626cd 100644
--- a/packages/manager/apps/key-management-service/src/components/menu/KmsActionMenu.component.tsx
+++ b/packages/manager/apps/key-management-service/src/components/menu/KmsActionMenu.component.tsx
@@ -4,15 +4,14 @@ import {
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import React from 'react';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import { ODS_BUTTON_COLOR, ODS_ICON_NAME } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { OKMS } from '@/types/okms.type';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 
-const KmsActionMenu: React.FC<OKMS> = ({ id }) => {
+const KmsActionMenu = ({ id }: OKMS) => {
   const { t } = useTranslation('key-management-service/listing');
   const { trackClick } = useOvhTracking();
   const navigate = useNavigate();
@@ -21,7 +20,7 @@ const KmsActionMenu: React.FC<OKMS> = ({ id }) => {
     {
       id: 1,
       label: t('key_management_service_listing_terminate'),
-      color: ODS_THEME_COLOR_INTENT.error,
+      color: ODS_BUTTON_COLOR.critical,
       onClick: () => {
         trackClick({
           location: PageLocation.datagrid,
@@ -36,9 +35,10 @@ const KmsActionMenu: React.FC<OKMS> = ({ id }) => {
 
   return (
     <ActionMenu
+      id={`kmsActionMenu-${id}`}
       items={items}
       isCompact
-      icon={ODS_ICON_NAME.ELLIPSIS_VERTICAL}
+      icon={ODS_ICON_NAME.ellipsisVertical}
     />
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/components/serviceKey/create/serviceKeyOperationCheckbox.tsx b/packages/manager/apps/key-management-service/src/components/serviceKey/create/serviceKeyOperationCheckbox.tsx
index b1cb2e0a569a..9c3842b1c482 100644
--- a/packages/manager/apps/key-management-service/src/components/serviceKey/create/serviceKeyOperationCheckbox.tsx
+++ b/packages/manager/apps/key-management-service/src/components/serviceKey/create/serviceKeyOperationCheckbox.tsx
@@ -1,42 +1,46 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import { OsdsCheckboxButton, OsdsText } from '@ovhcloud/ods-components/react';
+  ODS_TEXT_PRESET,
+  OdsCheckboxCustomEvent,
+  OdsCheckboxChangeEventDetail,
+  OdsCheckbox as OdsCheckboxType,
+} from '@ovhcloud/ods-components';
+import { OdsCheckbox, OdsText } from '@ovhcloud/ods-components/react';
 import { useServiceKeyOperationsTranslations } from '@/hooks/serviceKey/useServiceKeyOperationsTranslations';
 import { OkmsServiceKeyReferenceOperations } from '@/types/okmsServiceKeyReference.type';
 
 type TServiceKeyOperationCheckbox = {
+  name: string;
   operation: OkmsServiceKeyReferenceOperations;
-};
+  onOdsChange?: (
+    e: OdsCheckboxCustomEvent<OdsCheckboxChangeEventDetail>,
+  ) => void;
+} & Partial<OdsCheckboxType>;
 
 export const ServiceKeyOperationCheckbox = ({
   operation,
+  ...props
 }: TServiceKeyOperationCheckbox) => {
   const { t } = useTranslation('key-management-service/serviceKeys');
   const translatedOperations = useServiceKeyOperationsTranslations(
     operation.value,
   );
+  const key = operation.value.join('_');
 
   return (
-    <OsdsCheckboxButton color={ODS_THEME_COLOR_INTENT.primary}>
-      <span slot="end">
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-        >
+    <div className="flex items-center">
+      <OdsCheckbox inputId={key} value={key} {...props} />
+      <label className="ml-2" htmlFor={key}>
+        <OdsText className="block" preset={ODS_TEXT_PRESET.paragraph}>
           {translatedOperations.join(' / ')}
-        </OsdsText>
-        <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
+        </OdsText>
+        <OdsText preset={ODS_TEXT_PRESET.caption}>
           {t(
-            `key_management_service_service-keys_create_crypto_field_usage_description_${operation.value.join(
-              '_',
-            )}`,
+            `key_management_service_service-keys_create_crypto_field_usage_description_${key}`,
           )}
-        </OsdsText>
-      </span>
-    </OsdsCheckboxButton>
+        </OdsText>
+      </label>
+    </div>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/components/serviceKey/create/serviceKeyTypeRadioButton.tsx b/packages/manager/apps/key-management-service/src/components/serviceKey/create/serviceKeyTypeRadioButton.tsx
index e274bca8db2c..709a2609726b 100644
--- a/packages/manager/apps/key-management-service/src/components/serviceKey/create/serviceKeyTypeRadioButton.tsx
+++ b/packages/manager/apps/key-management-service/src/components/serviceKey/create/serviceKeyTypeRadioButton.tsx
@@ -1,45 +1,40 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
-import { ODS_RADIO_BUTTON_SIZE } from '@ovhcloud/ods-components';
-import { OsdsRadioButton, OsdsText } from '@ovhcloud/ods-components/react';
+  ODS_TEXT_PRESET,
+  OdsRadio as OdsRadioType,
+} from '@ovhcloud/ods-components';
+import { OdsRadio, OdsText } from '@ovhcloud/ods-components/react';
 import { useServiceKeyTypeTranslations } from '@/hooks/serviceKey/useServiceKeyTypeTranslations';
 import { OkmsKeyTypes } from '@/types/okmsServiceKey.type';
 
 type TServiceKeyTypeRadioButton = {
+  name: string;
   type: OkmsKeyTypes;
-  onClick: React.MouseEventHandler<HTMLOsdsRadioButtonElement>;
-};
+  onClick: React.MouseEventHandler<HTMLOdsRadioElement>;
+} & Partial<OdsRadioType>;
 
 export const ServiceKeyTypeRadioButton = ({
   type,
-  onClick,
+  ...props
 }: TServiceKeyTypeRadioButton) => {
   const { t } = useTranslation('key-management-service/serviceKeys');
   const translatedType = useServiceKeyTypeTranslations(type);
+  const buttonId = `serviceKeyType-${type}`;
 
   return (
-    <OsdsRadioButton
-      size={ODS_RADIO_BUTTON_SIZE.sm}
-      color={ODS_THEME_COLOR_INTENT.primary}
-      onClick={onClick}
-    >
-      <span slot="end">
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-        >
+    <div className="flex items-center">
+      <OdsRadio inputId={buttonId} {...props} />
+      <label className="ml-2" htmlFor={buttonId}>
+        <OdsText className="block" preset={ODS_TEXT_PRESET.paragraph}>
           {translatedType}
-        </OsdsText>
-        <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
+        </OdsText>
+        <OdsText preset={ODS_TEXT_PRESET.caption}>
           {t(
             `key_management_service_service-keys_create_crypto_field_type_description_${type.toLowerCase()}`,
           )}
-        </OsdsText>
-      </span>
-    </OsdsRadioButton>
+        </OdsText>
+      </label>
+    </div>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyDeactivateModal.component.tsx b/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyDeactivateModal.component.tsx
deleted file mode 100644
index 17d957fbb24a..000000000000
--- a/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyDeactivateModal.component.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import {
-  OsdsButton,
-  OsdsFormField,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsSpinner,
-} from '@ovhcloud/ods-components/react';
-import {
-  ODS_BUTTON_VARIANT,
-  ODS_SELECT_SIZE,
-  ODS_SPINNER_SIZE,
-  OdsSelectValueChangeEvent,
-} from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { useNotifications } from '@ovh-ux/manager-react-components';
-import {
-  ButtonType,
-  PageLocation,
-  PageType,
-  useOvhTracking,
-} from '@ovh-ux/manager-react-shell-client';
-import Modal from '@/components/Modal/Modal';
-
-import { useUpdateOkmsServiceKey } from '@/data/hooks/useUpdateOkmsServiceKey';
-import {
-  OkmsServiceKeyDeactivationReason,
-  OkmsServiceKeyDeactivationReasonTypes,
-  OkmsServiceKeyPutState,
-  OkmsServiceKeyState,
-} from '@/types/okmsServiceKey.type';
-
-type ServiceKeyEditNameModalProps = {
-  okmsId: string;
-  keyId: string;
-};
-
-export const ServiceKeyDeactivateModal = ({
-  okmsId,
-  keyId,
-}: ServiceKeyEditNameModalProps) => {
-  const [deactivationReason, setDeactivationReason] = useState<
-    OkmsServiceKeyDeactivationReason
-  >();
-  const { addSuccess, clearNotifications } = useNotifications();
-  const { t } = useTranslation('key-management-service/serviceKeys');
-  const { t: tCommon } = useTranslation('key-management-service/common');
-  const { trackClick, trackPage } = useOvhTracking();
-  const navigate = useNavigate();
-
-  const closeModal = () => navigate('..');
-
-  const { updateKmsServiceKey, isPending } = useUpdateOkmsServiceKey({
-    okmsId,
-    keyId,
-    onSuccess: () => {
-      clearNotifications();
-      addSuccess(
-        t('key_management_service_service-keys_deactivation_success'),
-        true,
-      );
-      trackPage({
-        pageType: PageType.bannerSuccess,
-        pageName: 'deactivate_encryption_key',
-      });
-      closeModal();
-    },
-    onError: () => {
-      trackPage({
-        pageType: PageType.bannerError,
-        pageName: 'deactivate_encryption_key',
-      });
-      closeModal();
-    },
-  });
-
-  const onUpdateServiceKeyStatus = () => {
-    let newState: OkmsServiceKeyPutState;
-    switch (deactivationReason) {
-      case 'AFFILIATION_CHANGED':
-        newState = OkmsServiceKeyState.deactivated;
-        break;
-
-      case 'CA_COMPROMISE':
-        newState = OkmsServiceKeyState.compromised;
-        break;
-
-      case 'CESSATION_OF_OPERATION':
-        newState = OkmsServiceKeyState.deactivated;
-        break;
-
-      case 'KEY_COMPROMISE':
-        newState = OkmsServiceKeyState.compromised;
-        break;
-
-      case 'PRIVILEGE_WITHDRAWN':
-        newState = OkmsServiceKeyState.deactivated;
-        break;
-
-      case 'SUPERSEDED':
-        newState = OkmsServiceKeyState.deactivated;
-        break;
-
-      case 'UNSPECIFIED':
-        newState = OkmsServiceKeyState.deactivated;
-        break;
-      default:
-        break;
-    }
-    updateKmsServiceKey({ state: newState, deactivationReason });
-  };
-
-  return (
-    <Modal
-      headline={t(
-        'key_management_service_service-keys_modal_deactivation_heading',
-      )}
-      onClose={closeModal}
-      color={ODS_THEME_COLOR_INTENT.warning}
-    >
-      {isPending ? (
-        <div className="flex justify-center">
-          <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
-        </div>
-      ) : (
-        <OsdsFormField className="my-4">
-          <OsdsSelect
-            inline
-            value={deactivationReason}
-            onOdsValueChange={(e: OdsSelectValueChangeEvent) =>
-              setDeactivationReason(
-                e?.detail.value as OkmsServiceKeyDeactivationReason,
-              )
-            }
-            size={ODS_SELECT_SIZE.md}
-          >
-            <span slot="placeholder">
-              {t(
-                'key_management_service_service-keys_modal_deactivation_reason_select_placeholder',
-              )}
-            </span>
-            {OkmsServiceKeyDeactivationReasonTypes?.map((reason) => (
-              <OsdsSelectOption key={reason} value={reason}>
-                {t(
-                  `key_management_service_service-keys_deactivation_reason_${reason.toLowerCase()}`,
-                )}
-              </OsdsSelectOption>
-            ))}
-          </OsdsSelect>
-        </OsdsFormField>
-      )}
-      <OsdsButton
-        slot="actions"
-        variant={ODS_BUTTON_VARIANT.stroked}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={() => {
-          trackClick({
-            location: PageLocation.popup,
-            buttonType: ButtonType.button,
-            actionType: 'action',
-            actions: ['cancel'],
-          });
-          navigate('..');
-        }}
-      >
-        {tCommon('key_management_service_cancel')}
-      </OsdsButton>
-      <OsdsButton
-        disabled={!deactivationReason || isPending || undefined}
-        slot="actions"
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={() => {
-          trackClick({
-            location: PageLocation.popup,
-            buttonType: ButtonType.button,
-            actionType: 'action',
-            actions: ['confirm'],
-          });
-          onUpdateServiceKeyStatus();
-        }}
-        aria-label="edit-name-okms"
-      >
-        {t('key_management_service_service-keys_deactivation_button_confirm')}
-      </OsdsButton>
-    </Modal>
-  );
-};
diff --git a/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyEditNameModal.component.tsx b/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyEditNameModal.component.tsx
deleted file mode 100644
index fecdf3293d77..000000000000
--- a/packages/manager/apps/key-management-service/src/components/serviceKey/modals/ServiceKeyEditNameModal.component.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { PageType, useOvhTracking } from '@ovh-ux/manager-react-shell-client';
-import {
-  OsdsButton,
-  OsdsFormField,
-  OsdsInput,
-  OsdsSpinner,
-} from '@ovhcloud/ods-components/react';
-import {
-  ODS_BUTTON_VARIANT,
-  ODS_INPUT_TYPE,
-  ODS_SPINNER_SIZE,
-  OdsInputValueChangeEventDetail,
-  OsdsInputCustomEvent,
-} from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { useNotifications } from '@ovh-ux/manager-react-components';
-import Modal from '@/components/Modal/Modal';
-
-import { useUpdateOkmsServiceKey } from '@/data/hooks/useUpdateOkmsServiceKey';
-import {
-  ServiceKeyNameErrorsType,
-  validateServiceKeyName,
-} from '@/utils/serviceKey/validateServiceKeyName';
-
-type ServiceKeyEditNameModalProps = {
-  okmsId: string;
-  keyId: string;
-  name: string;
-};
-
-export const ServiceKeyEditNameModal = ({
-  okmsId,
-  keyId,
-  name,
-}: ServiceKeyEditNameModalProps) => {
-  const [serviceKeyName, setServiceKeyName] = useState(name);
-  const serviceKeyNameError = validateServiceKeyName(serviceKeyName);
-  const { addSuccess, clearNotifications } = useNotifications();
-  const { t } = useTranslation('key-management-service/serviceKeys');
-  const { t: tCommon } = useTranslation('key-management-service/common');
-  const { trackPage } = useOvhTracking();
-
-  const navigate = useNavigate();
-
-  const closeModal = () => navigate('..');
-
-  const { updateKmsServiceKey, isPending } = useUpdateOkmsServiceKey({
-    okmsId,
-    keyId,
-    onSuccess: () => {
-      clearNotifications();
-      addSuccess(
-        t('key_management_service_service-keys_update_name_success'),
-        true,
-      );
-      trackPage({
-        pageType: PageType.bannerSuccess,
-        pageName: 'rename_encryption_key',
-      });
-      closeModal();
-    },
-    onError: () => {
-      trackPage({
-        pageType: PageType.bannerError,
-        pageName: 'rename_encryption_key',
-      });
-      closeModal();
-    },
-  });
-
-  const getErrorMessage = (error: ServiceKeyNameErrorsType) => {
-    switch (error) {
-      case 'REQUIRED':
-        return t(
-          'key_management_service_service-keys_update_name_error_required',
-        );
-      case 'INVALID_CHARACTERS':
-        return t(
-          'key_management_service_service-keys_update_name_error_invalid_characters',
-        );
-      case 'TOO_MANY_CHARACTERS':
-        return t('key_management_service_service-keys_update_name_error_max');
-
-      default:
-        return undefined;
-    }
-  };
-
-  return (
-    <Modal
-      headline={t('key_management_service_service-keys_dashboard_field_name')}
-      onClose={closeModal}
-      color={ODS_THEME_COLOR_INTENT.primary}
-    >
-      {isPending ? (
-        <div className="flex justify-center">
-          <OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />
-        </div>
-      ) : (
-        <OsdsFormField error={getErrorMessage(serviceKeyNameError)}>
-          <OsdsInput
-            aria-label="input-edit-service-key-name"
-            error={!!serviceKeyNameError}
-            type={ODS_INPUT_TYPE.text}
-            value={serviceKeyName}
-            required
-            onOdsValueChange={(
-              event: OsdsInputCustomEvent<OdsInputValueChangeEventDetail>,
-            ) => {
-              setServiceKeyName(event.target.value as string);
-            }}
-          />
-        </OsdsFormField>
-      )}
-      <OsdsButton
-        slot="actions"
-        variant={ODS_BUTTON_VARIANT.stroked}
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={() => {
-          navigate('..');
-        }}
-      >
-        {tCommon('key_management_service_cancel')}
-      </OsdsButton>
-      <OsdsButton
-        disabled={
-          !!serviceKeyNameError ||
-          isPending ||
-          serviceKeyName === name ||
-          undefined
-        }
-        slot="actions"
-        color={ODS_THEME_COLOR_INTENT.primary}
-        onClick={() => updateKmsServiceKey({ name: serviceKeyName })}
-        aria-label="edit-name-okms"
-      >
-        {tCommon('key_management_service_modify')}
-      </OsdsButton>
-    </Modal>
-  );
-};
diff --git a/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStateActions/ServiceKeyStateActions.component.tsx b/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStateActions/ServiceKeyStateActions.component.tsx
index 8fd659428096..baf32a456dae 100644
--- a/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStateActions/ServiceKeyStateActions.component.tsx
+++ b/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStateActions/ServiceKeyStateActions.component.tsx
@@ -1,14 +1,25 @@
 import React from 'react';
-import { OsdsIcon, OsdsButton } from '@ovhcloud/ods-components/react';
+import { OdsLink } from '@ovhcloud/ods-components/react';
 import { ManagerButton } from '@ovh-ux/manager-react-components';
 import {
+  ODS_LINK_COLOR,
   ODS_BUTTON_SIZE,
-  ODS_BUTTON_TEXT_ALIGN,
+  ODS_BUTTON_ICON_ALIGNMENT,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
+  ODS_LINK_ICON_ALIGNMENT,
 } from '@ovhcloud/ods-components';
-import { OkmsAllServiceKeys } from '@/types/okmsServiceKey.type';
+import { useTranslation } from 'react-i18next';
+import {
+  useOvhTracking,
+  ButtonType,
+  PageLocation,
+} from '@ovh-ux/manager-react-shell-client';
+import {
+  OkmsAllServiceKeys,
+  OkmsKeyTypes,
+  OkmsServiceKeyState,
+} from '@/types/okmsServiceKey.type';
 import useServiceKeyActionsList from '@/hooks/serviceKey/useServiceKeyActionsList';
 import { OKMS } from '@/types/okms.type';
 
@@ -18,70 +29,62 @@ type ServiceKeyStateActionsProps = {
 };
 
 const ActionsIcons = [
-  { id: 1, icon: ODS_ICON_NAME.DOWNLOAD },
-  { id: 2, icon: ODS_ICON_NAME.CLOSE },
-  { id: 3, icon: ODS_ICON_NAME.REFRESH },
-  { id: 4, icon: ODS_ICON_NAME.TRASH },
+  { id: 1, icon: ODS_ICON_NAME.download },
+  { id: 2, icon: ODS_ICON_NAME.lockClose },
+  { id: 3, icon: ODS_ICON_NAME.refresh },
+  { id: 4, icon: ODS_ICON_NAME.trash },
 ];
 
+const getActionIcon = (id: number) =>
+  ActionsIcons.find((actionIcon) => actionIcon.id === id)?.icon;
+
 const ServiceKeyStateActions = ({
   okms,
   okmsKey,
 }: ServiceKeyStateActionsProps) => {
+  const { t } = useTranslation('key-management-service/serviceKeys');
   const actionList = useServiceKeyActionsList(okms, okmsKey);
+  const { trackClick } = useOvhTracking();
 
-  const getActionIcon = (id: number) => {
-    return ActionsIcons.find((actionIcon) => actionIcon.id === id)?.icon;
-  };
   return (
-    <>
-      {actionList.map((action) => {
-        return action.iamActions ? (
+    <div className="flex flex-col max-w-fit justify-start gap-3 mt-2">
+      {okmsKey?.type !== OkmsKeyTypes.oct && (
+        <OdsLink
+          className="block pl-1"
+          label={t('key_management_service_service-keys_link_download_key')}
+          color={ODS_LINK_COLOR.primary}
+          isDisabled={okmsKey?.state !== OkmsServiceKeyState.active}
+          download={`${okmsKey?.name}.jwk`}
+          href={`data:text/json;charset=utf-8,${encodeURIComponent(
+            JSON.stringify(okmsKey?.keys),
+          )}`}
+          onClick={() => {
+            trackClick({
+              location: PageLocation.page,
+              buttonType: ButtonType.button,
+              actionType: 'action',
+              actions: ['download_encryption_key'],
+            });
+          }}
+          icon={ODS_ICON_NAME.download}
+          iconAlignment={ODS_LINK_ICON_ALIGNMENT.right}
+        />
+      )}
+      {actionList
+        .filter((action) => !action.href)
+        .map((action) => (
           <ManagerButton
-            key={action.id}
+            {...action}
+            key={`action-list-${action.id}`}
+            id={`action-list-${action.id}`}
             color={action.color}
             variant={ODS_BUTTON_VARIANT.ghost}
             size={ODS_BUTTON_SIZE.sm}
-            textAlign={ODS_BUTTON_TEXT_ALIGN.start}
-            onClick={action.onClick}
-            disabled={action.disabled || undefined}
-            href={action.href}
-            download={action.download}
-            urn={action.urn}
-            iamActions={action.iamActions}
-          >
-            <span slot="start">{action.label}</span>
-            <span slot="end">
-              <OsdsIcon
-                name={getActionIcon(action.id)}
-                size={ODS_ICON_SIZE.xxs}
-                color={action.color}
-              />
-            </span>
-          </ManagerButton>
-        ) : (
-          <OsdsButton
-            key={action.id}
-            variant={ODS_BUTTON_VARIANT.ghost}
-            size={ODS_BUTTON_SIZE.sm}
-            color={action.color}
-            href={action.href}
-            download={action.download}
-            disabled={action.disabled || undefined}
-            onClick={action.onClick}
-          >
-            <span slot="start">{action.label}</span>
-            <span slot="end">
-              <OsdsIcon
-                name={getActionIcon(action.id)}
-                size={ODS_ICON_SIZE.xxs}
-                color={action.color}
-              />
-            </span>
-          </OsdsButton>
-        );
-      })}
-    </>
+            iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.right}
+            icon={getActionIcon(action.id)}
+          />
+        ))}
+    </div>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStatus/serviceKeyStatus.component.tsx b/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStatus/serviceKeyStatus.component.tsx
index 28408cc4333c..12baa06b8d67 100644
--- a/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStatus/serviceKeyStatus.component.tsx
+++ b/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStatus/serviceKeyStatus.component.tsx
@@ -1,78 +1,72 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  ODS_CHIP_SIZE,
-  ODS_TEXT_COLOR_INTENT,
-  OdsChipAttribute,
-} from '@ovhcloud/ods-components';
-import { OsdsChip } from '@ovhcloud/ods-components/react';
+import { ODS_BADGE_SIZE, ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
+import { OdsBadge } from '@ovhcloud/ods-components/react';
 import { OkmsServiceKeyState } from '@/types/okmsServiceKey.type';
 
-export type KeyStatusProps = Omit<OdsChipAttribute, 'color'> & {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  state: OkmsServiceKeyState | (string & {});
-};
+export type KeyStatusProps = {
+  size?: ODS_BADGE_SIZE;
+  state: OkmsServiceKeyState;
+} & Record<string, string>;
 
-export const ServiceKeyStatus = ({ state, ...props }: KeyStatusProps) => {
+export const ServiceKeyStatus = ({
+  state,
+  size = ODS_BADGE_SIZE.md,
+  ...props
+}: KeyStatusProps) => {
   const { t } = useTranslation('key-management-service/serviceKeys');
 
-  const { size, ...otherProps } = props;
-
   let label = '';
-  let color: OdsChipAttribute['color'];
+  let color: ODS_BADGE_COLOR;
 
   switch (state) {
     case OkmsServiceKeyState.active:
       label = t(
         'key_management_service_service-keys_dashboard_field_state_active',
       );
-      color = ODS_TEXT_COLOR_INTENT.success;
+      color = ODS_BADGE_COLOR.success;
       break;
 
     case OkmsServiceKeyState.compromised:
       label = t(
         'key_management_service_service-keys_dashboard_field_state_compromised',
       );
-      color = ODS_TEXT_COLOR_INTENT.warning;
+      color = ODS_BADGE_COLOR.warning;
       break;
 
     case OkmsServiceKeyState.deactivated:
       label = t(
         'key_management_service_service-keys_dashboard_field_state_deactivated',
       );
-      color = ODS_TEXT_COLOR_INTENT.warning;
+      color = ODS_BADGE_COLOR.warning;
       break;
 
     case OkmsServiceKeyState.destroyed:
       label = t(
         'key_management_service_service-keys_dashboard_field_state_destroyed',
       );
-      color = ODS_TEXT_COLOR_INTENT.error;
+      color = ODS_BADGE_COLOR.critical;
       break;
 
     case OkmsServiceKeyState.destroyed_compromised:
       label = t(
         'key_management_service_service-keys_dashboard_field_state_destroyed_compromised',
       );
-      color = ODS_TEXT_COLOR_INTENT.error;
+      color = ODS_BADGE_COLOR.critical;
       break;
 
     case OkmsServiceKeyState.pre_active:
       label = t(
         'key_management_service_service-keys_dashboard_field_state_pre_active',
       );
-      color = ODS_TEXT_COLOR_INTENT.info;
+      color = ODS_BADGE_COLOR.information;
       break;
 
     default:
       label = state;
-      color = ODS_TEXT_COLOR_INTENT.default;
+      color = ODS_BADGE_COLOR.neutral;
       break;
   }
 
-  return (
-    <OsdsChip size={size || ODS_CHIP_SIZE.md} color={color} {...otherProps}>
-      {label}
-    </OsdsChip>
-  );
+  return <OdsBadge size={size} color={color} label={label} {...props} />;
 };
diff --git a/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStatus/serviceKeyStatus.spec.tsx b/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStatus/serviceKeyStatus.spec.tsx
index 3e094de4e9e3..d9fcdfaef71c 100644
--- a/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStatus/serviceKeyStatus.spec.tsx
+++ b/packages/manager/apps/key-management-service/src/components/serviceKey/serviceKeyStatus/serviceKeyStatus.spec.tsx
@@ -1,8 +1,5 @@
 import React from 'react';
-import {
-  ODS_TEXT_COLOR_INTENT,
-  OdsChipAttribute,
-} from '@ovhcloud/ods-components';
+import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
 import { render } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 import { ServiceKeyStatus } from './serviceKeyStatus.component';
@@ -12,47 +9,47 @@ describe('ServiceKeyStatus component test suite', () => {
   const useCases: {
     state: OkmsServiceKeyState;
     label: string;
-    colorValue: OdsChipAttribute['color'];
+    colorValue: ODS_BADGE_COLOR;
   }[] = [
     {
       state: OkmsServiceKeyState.active,
       label: 'key_management_service_service-keys_dashboard_field_state_active',
-      colorValue: ODS_TEXT_COLOR_INTENT.success,
+      colorValue: ODS_BADGE_COLOR.success,
     },
     {
       state: OkmsServiceKeyState.compromised,
       label:
         'key_management_service_service-keys_dashboard_field_state_compromised',
-      colorValue: ODS_TEXT_COLOR_INTENT.warning,
+      colorValue: ODS_BADGE_COLOR.warning,
     },
     {
       state: OkmsServiceKeyState.deactivated,
       label:
         'key_management_service_service-keys_dashboard_field_state_deactivated',
-      colorValue: ODS_TEXT_COLOR_INTENT.warning,
+      colorValue: ODS_BADGE_COLOR.warning,
     },
     {
       state: OkmsServiceKeyState.destroyed,
       label:
         'key_management_service_service-keys_dashboard_field_state_destroyed',
-      colorValue: ODS_TEXT_COLOR_INTENT.error,
+      colorValue: ODS_BADGE_COLOR.critical,
     },
     {
       state: OkmsServiceKeyState.destroyed_compromised,
       label:
         'key_management_service_service-keys_dashboard_field_state_destroyed_compromised',
-      colorValue: ODS_TEXT_COLOR_INTENT.error,
+      colorValue: ODS_BADGE_COLOR.critical,
     },
     {
       state: OkmsServiceKeyState.pre_active,
       label:
         'key_management_service_service-keys_dashboard_field_state_pre_active',
-      colorValue: ODS_TEXT_COLOR_INTENT.info,
+      colorValue: ODS_BADGE_COLOR.information,
     },
   ];
 
   test.each(useCases)(
-    'should return the right <OsdsChip /> configuration for $state state',
+    'should return the right <OdsBadge /> configuration for $state state',
     ({ state, colorValue, label }) => {
       // given state, colorValue and label
 
@@ -68,9 +65,9 @@ describe('ServiceKeyStatus component test suite', () => {
     },
   );
 
-  it('should return default <OsdsChip /> configuration for unexpected state', () => {
+  it('should return default <OdsBadge /> configuration for unexpected state', () => {
     // given
-    const serviceKeyState = 'AAA';
+    const serviceKeyState = 'unknown' as OkmsServiceKeyState;
 
     // when
     const { getByTestId } = render(
@@ -80,6 +77,6 @@ describe('ServiceKeyStatus component test suite', () => {
 
     // then
     expect(component).toHaveTextContent(serviceKeyState);
-    expect(component).toHaveProperty('color', ODS_TEXT_COLOR_INTENT.default);
+    expect(component).toHaveProperty('color', ODS_BADGE_COLOR.neutral);
   });
 });
diff --git a/packages/manager/apps/key-management-service/src/data/hooks/useCreateOkmsServiceKey.ts b/packages/manager/apps/key-management-service/src/data/hooks/useCreateOkmsServiceKey.ts
index 302f2c2e1193..63dcb2cf1e5a 100644
--- a/packages/manager/apps/key-management-service/src/data/hooks/useCreateOkmsServiceKey.ts
+++ b/packages/manager/apps/key-management-service/src/data/hooks/useCreateOkmsServiceKey.ts
@@ -25,9 +25,8 @@ export const useCreateOkmsServiceKey = ({
   const { t } = useTranslation('key-management-service/serviceKeys');
 
   const { mutate: createKmsServiceKey, isPending } = useMutation({
-    mutationFn: (data: OkmsServiceKeyPostPayload) => {
-      return createOkmsServiceKeyResource({ okmsId, data });
-    },
+    mutationFn: (data: OkmsServiceKeyPostPayload) =>
+      createOkmsServiceKeyResource({ okmsId, data }),
     onSuccess: async () => {
       await queryClient.invalidateQueries({
         queryKey: getOkmsServiceKeyResourceListQueryKey(okmsId),
diff --git a/packages/manager/apps/key-management-service/src/global.css b/packages/manager/apps/key-management-service/src/global.css
index 65dd5f63a7df..8d9e61389c51 100644
--- a/packages/manager/apps/key-management-service/src/global.css
+++ b/packages/manager/apps/key-management-service/src/global.css
@@ -1 +1,5 @@
 @tailwind utilities;
+
+html {
+  font-family: var(--ods-font-family-default);
+}
diff --git a/packages/manager/apps/key-management-service/src/hooks/breadcrumb/useBreadcrumb.spec.tsx b/packages/manager/apps/key-management-service/src/hooks/breadcrumb/useBreadcrumb.spec.tsx
index b4bc6e3858f5..476521c19ff6 100644
--- a/packages/manager/apps/key-management-service/src/hooks/breadcrumb/useBreadcrumb.spec.tsx
+++ b/packages/manager/apps/key-management-service/src/hooks/breadcrumb/useBreadcrumb.spec.tsx
@@ -57,7 +57,7 @@ describe('useBreadcumb test suite', () => {
     const { result } = renderHook(() => useBreadcrumb({ rootLabel, items }));
 
     // when
-    result.current[0].onClick();
+    result.current[0].onLinkClick({} as MouseEvent);
 
     // then
     expect(useNavigateMock).toHaveBeenCalledWith(ROUTES_URLS.root);
@@ -84,7 +84,7 @@ describe('useBreadcumb test suite', () => {
     const { result } = renderHook(() => useBreadcrumb({ rootLabel, items }));
 
     // when
-    result.current[2].onClick();
+    result.current[2].onLinkClick({} as MouseEvent);
 
     // then
     expect(useNavigateMock).toHaveBeenCalledWith(items[1].navigateTo);
@@ -95,6 +95,6 @@ describe('useBreadcumb test suite', () => {
     const { result } = renderHook(() => useBreadcrumb({ rootLabel, items }));
 
     // then
-    expect(result.current[3].onClick).not.toBeDefined();
+    expect(result.current[3].onLinkClick).not.toBeDefined();
   });
 });
diff --git a/packages/manager/apps/key-management-service/src/hooks/breadcrumb/useBreadcrumb.ts b/packages/manager/apps/key-management-service/src/hooks/breadcrumb/useBreadcrumb.ts
index c27de6a7dad2..76833a5b1171 100644
--- a/packages/manager/apps/key-management-service/src/hooks/breadcrumb/useBreadcrumb.ts
+++ b/packages/manager/apps/key-management-service/src/hooks/breadcrumb/useBreadcrumb.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { OdsBreadcrumbAttributeItem } from '@ovhcloud/ods-components';
+import { OdsBreadcrumbItem as OdsBreadcrumbItemType } from '@ovhcloud/ods-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 
@@ -9,25 +9,21 @@ export type BreadcrumbItem = {
   navigateTo: string;
 };
 
-export type BreadcrumbAttributeItem = OdsBreadcrumbAttributeItem & {
-  onClick?: () => void;
-};
-
 export interface BreadcrumbProps {
   rootLabel: string;
   items?: BreadcrumbItem[];
 }
 
 export const useBreadcrumb = ({ rootLabel, items }: BreadcrumbProps) => {
-  const [pathItems, setPathItems] = useState<BreadcrumbAttributeItem[]>([]);
+  const [pathItems, setPathItems] = useState<OdsBreadcrumbItemType[]>([]);
   const location = useLocation();
   const navigate = useNavigate();
   const pathnames = location.pathname.split('/').filter((x) => x);
 
-  const rootItem: BreadcrumbAttributeItem = {
+  const rootItem = ({
     label: rootLabel,
-    onClick: () => navigate(ROUTES_URLS.root),
-  };
+    onOdsClick: () => navigate(ROUTES_URLS.root),
+  } as unknown) as OdsBreadcrumbItemType;
 
   useEffect(() => {
     const pathNamesItems = pathnames.map((value) => {
@@ -41,11 +37,11 @@ export const useBreadcrumb = ({ rootLabel, items }: BreadcrumbProps) => {
 
       return {
         label: item.label,
-        onClick: () => navigate(item.navigateTo),
+        onOdsClick: () => navigate(item.navigateTo),
       };
     });
 
-    setPathItems(pathNamesItems);
+    setPathItems(pathNamesItems as OdsBreadcrumbItemType[]);
   }, [location, items]);
 
   return [rootItem, ...pathItems];
diff --git a/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx b/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx
index 786815747890..6754656d6965 100644
--- a/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx
+++ b/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { renderHook } from '@testing-library/react';
+import { ODS_BUTTON_COLOR } from '@ovhcloud/ods-components';
 import {
   OkmsAllServiceKeys,
   OkmsKeyTypes,
@@ -83,8 +83,8 @@ describe('useServiceKeyActionsList', () => {
         {
           id: 1,
           label: 'key_management_service_service-keys_link_download_key',
-          color: ODS_THEME_COLOR_INTENT.primary,
-          disabled: false,
+          color: ODS_BUTTON_COLOR.primary,
+          isDisabled: false,
           href: `data:text/json;charset=utf-8,${encodeURIComponent(
             JSON.stringify([]),
           )}`,
@@ -93,12 +93,12 @@ describe('useServiceKeyActionsList', () => {
         {
           id: 2,
           label: 'key_management_service_service-keys_link_deactivate_key',
-          color: ODS_THEME_COLOR_INTENT.primary,
+          color: ODS_BUTTON_COLOR.primary,
         },
         {
           id: 4,
           label: 'key_management_service_service-keys_link_delete_key',
-          color: ODS_THEME_COLOR_INTENT.error,
+          color: ODS_BUTTON_COLOR.critical,
           disabled: true,
         },
       ],
@@ -114,7 +114,7 @@ describe('useServiceKeyActionsList', () => {
         {
           id: 1,
           label: 'key_management_service_service-keys_link_download_key',
-          color: ODS_THEME_COLOR_INTENT.primary,
+          color: ODS_BUTTON_COLOR.primary,
           disabled: true,
           href: `data:text/json;charset=utf-8,${encodeURIComponent(
             JSON.stringify([]),
@@ -124,13 +124,13 @@ describe('useServiceKeyActionsList', () => {
         {
           id: 3,
           label: 'key_management_service_service-keys_link_reactivate_key',
-          color: ODS_THEME_COLOR_INTENT.primary,
+          color: ODS_BUTTON_COLOR.primary,
           disabled: false,
         },
         {
           id: 4,
           label: 'key_management_service_service-keys_link_delete_key',
-          color: ODS_THEME_COLOR_INTENT.error,
+          color: ODS_BUTTON_COLOR.critical,
           disabled: false,
         },
       ],
@@ -146,7 +146,7 @@ describe('useServiceKeyActionsList', () => {
         {
           id: 1,
           label: 'key_management_service_service-keys_link_download_key',
-          color: ODS_THEME_COLOR_INTENT.primary,
+          color: ODS_BUTTON_COLOR.primary,
           disabled: true,
           href: `data:text/json;charset=utf-8,${encodeURIComponent(
             JSON.stringify([]),
@@ -156,13 +156,13 @@ describe('useServiceKeyActionsList', () => {
         {
           id: 3,
           label: 'key_management_service_service-keys_link_reactivate_key',
-          color: ODS_THEME_COLOR_INTENT.primary,
+          color: ODS_BUTTON_COLOR.primary,
           disabled: false,
         },
         {
           id: 4,
           label: 'key_management_service_service-keys_link_delete_key',
-          color: ODS_THEME_COLOR_INTENT.error,
+          color: ODS_BUTTON_COLOR.critical,
           disabled: false,
         },
       ],
@@ -187,12 +187,12 @@ describe('useServiceKeyActionsList', () => {
         {
           id: 2,
           label: 'key_management_service_service-keys_link_deactivate_key',
-          color: ODS_THEME_COLOR_INTENT.primary,
+          color: ODS_BUTTON_COLOR.primary,
         },
         {
           id: 4,
           label: 'key_management_service_service-keys_link_delete_key',
-          color: ODS_THEME_COLOR_INTENT.error,
+          color: ODS_BUTTON_COLOR.critical,
           disabled: true,
         },
       ],
diff --git a/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx b/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx
index 84423c38b2d8..e6891fba8429 100644
--- a/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx
+++ b/packages/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx
@@ -2,7 +2,7 @@ import {
   ActionMenuItem,
   useNotifications,
 } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_BUTTON_COLOR } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import {
@@ -79,18 +79,16 @@ const useServiceKeyActionsList = (
     },
   });
 
-  const items: ActionMenuItem[] = [];
-
-  if (okmsKey?.type !== OkmsKeyTypes.oct) {
-    items.push({
+  const items: ActionMenuItem[] = [
+    okmsKey?.type !== OkmsKeyTypes.oct && {
       id: 1,
       label: t('key_management_service_service-keys_link_download_key'),
-      color: ODS_THEME_COLOR_INTENT.primary,
-      disabled: okmsKey?.state !== OkmsServiceKeyState.active,
+      color: ODS_BUTTON_COLOR.primary,
+      isDisabled: okmsKey?.state !== OkmsServiceKeyState.active,
+      download: `${okmsKey?.name}.jwk`,
       href: `data:text/json;charset=utf-8,${encodeURIComponent(
         JSON.stringify(okmsKey?.keys),
       )}`,
-      download: `${okmsKey?.name}.jwk`,
       onClick: () => {
         trackClick({
           location: trackLocation,
@@ -99,13 +97,12 @@ const useServiceKeyActionsList = (
           actions: ['download_encryption_key'],
         });
       },
-    });
-  }
-  if (okmsKey?.state === OkmsServiceKeyState.active) {
-    items.push({
+    },
+
+    okmsKey?.state === OkmsServiceKeyState.active && {
       id: 2,
       label: t('key_management_service_service-keys_link_deactivate_key'),
-      color: ODS_THEME_COLOR_INTENT.primary,
+      color: ODS_BUTTON_COLOR.primary,
       onClick: () => {
         trackClick({
           location: trackLocation,
@@ -124,17 +121,15 @@ const useServiceKeyActionsList = (
         kmsIamActions.serviceKeyDeactivate,
       ],
       urn: okmsKey?.iam.urn,
-    });
-  }
-  if (
-    okmsKey?.state === OkmsServiceKeyState.deactivated ||
-    okmsKey?.state === OkmsServiceKeyState.compromised
-  ) {
-    items.push({
+    },
+
+    [OkmsServiceKeyState.deactivated, OkmsServiceKeyState.compromised].includes(
+      okmsKey?.state,
+    ) && {
       id: 3,
       label: t('key_management_service_service-keys_link_reactivate_key'),
-      color: ODS_THEME_COLOR_INTENT.primary,
-      disabled: updateIsPending,
+      color: ODS_BUTTON_COLOR.primary,
+      isLoading: updateIsPending,
       iamActions: [
         kmsIamActions.serviceKeyUpdate,
         kmsIamActions.serviceKeyActivate,
@@ -149,18 +144,17 @@ const useServiceKeyActionsList = (
         });
         updateKmsServiceKey({ state: OkmsServiceKeyState.active });
       },
-    });
-  }
-  if (
-    okmsKey?.state !== OkmsServiceKeyState.destroyed &&
-    okmsKey?.state !== OkmsServiceKeyState.destroyed_compromised
-  ) {
-    items.push({
+    },
+
+    ![
+      OkmsServiceKeyState.destroyed,
+      OkmsServiceKeyState.destroyed_compromised,
+    ].includes(okmsKey?.state) && {
       id: 4,
       label: t('key_management_service_service-keys_link_delete_key'),
-      color: ODS_THEME_COLOR_INTENT.error,
-      disabled:
-        okmsKey?.state === OkmsServiceKeyState.active || deleteIsPending,
+      color: ODS_BUTTON_COLOR.critical,
+      isDisabled: okmsKey?.state === OkmsServiceKeyState.active,
+      isLoading: deleteIsPending,
       iamActions: [kmsIamActions.serviceKeyDelete],
       urn: okmsKey?.iam.urn,
       onClick: () => {
@@ -172,8 +166,9 @@ const useServiceKeyActionsList = (
         });
         deleteKmsServiceKey();
       },
-    });
-  }
+    },
+  ].filter(Boolean);
+
   return items;
 };
 
diff --git a/packages/manager/apps/key-management-service/src/index.scss b/packages/manager/apps/key-management-service/src/index.scss
deleted file mode 100644
index ab8b62543fad..000000000000
--- a/packages/manager/apps/key-management-service/src/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.border-ods-primary-100 {
-  border-color: var(--ods-color-primary-100);
-}
-
-.background-ods-primary-100 {
-  background-color: var(--ods-color-primary-100);
-}
-
-.background-ods-primary-000 {
-  background-color: var(--ods-color-primary-000);
-}
diff --git a/packages/manager/apps/key-management-service/src/index.tsx b/packages/manager/apps/key-management-service/src/index.tsx
index 3b57e185868d..ecc80cad784b 100644
--- a/packages/manager/apps/key-management-service/src/index.tsx
+++ b/packages/manager/apps/key-management-service/src/index.tsx
@@ -6,9 +6,9 @@ import {
   initI18n,
 } from '@ovh-ux/manager-react-shell-client';
 import App from './App';
-
+import '@ovh-ux/manager-react-components/dist/style.css';
+import '@ovhcloud/ods-themes/default';
 import './global.css';
-import '@ovhcloud/ods-theme-blue-jeans';
 
 import { UNIVERSE, SUB_UNIVERSE, APP_NAME, LEVEL2 } from './tracking.constant';
 
diff --git a/packages/manager/apps/key-management-service/src/pages/_app.tsx b/packages/manager/apps/key-management-service/src/pages/_app.tsx
deleted file mode 100644
index 5b5b062bd4af..000000000000
--- a/packages/manager/apps/key-management-service/src/pages/_app.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// TODO: delete this file
-
-import React from 'react';
-import i18next from 'i18next';
-
-export function breadcrumb() {
-  return i18next.t('key-management-service:crumb');
-}
-
-export default function App({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return <>{children}</>;
-}
diff --git a/packages/manager/apps/key-management-service/src/pages/create/index.tsx b/packages/manager/apps/key-management-service/src/pages/create/index.tsx
index c76140a3b042..de347e69e3a1 100644
--- a/packages/manager/apps/key-management-service/src/pages/create/index.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/create/index.tsx
@@ -1,12 +1,7 @@
 import React, { useState } from 'react';
-import { OsdsText, OsdsDivider } from '@ovhcloud/ods-components/react';
-
-import { Notifications } from '@ovh-ux/manager-react-components';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-} from '@ovhcloud/ods-common-theming';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { Title } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 import RegionSelector from '@/components/layout-helpers/Create/RegionSelector';
@@ -29,30 +24,16 @@ export default function Create() {
           },
         ]}
       />
-      <div className={'flex items-center justify-between mt-4 mb-2'}>
-        <OsdsText
-          level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-          size={ODS_THEME_TYPOGRAPHY_SIZE._600}
-          color={ODS_THEME_COLOR_INTENT.text}
-        >
-          {t('key_management_service_create_title')}
-        </OsdsText>
+      <div className="flex items-center justify-between mt-4 mb-2">
+        <Title>{t('key_management_service_create_title')}</Title>
         <KmsGuidesHeader />
       </div>
-      <OsdsText
-        level={ODS_THEME_TYPOGRAPHY_LEVEL.subheading}
-        size={ODS_THEME_TYPOGRAPHY_SIZE._100}
-        color={ODS_THEME_COLOR_INTENT.text}
-      >
+      <OdsText className="block mb-5" preset={ODS_TEXT_PRESET.paragraph}>
         {t('key_management_service_create_subtitle')}
-      </OsdsText>
-      <OsdsDivider></OsdsDivider>
-      <Notifications />
+      </OdsText>
       {!isOrderInitiated ? (
         <RegionSelector
-          setOrderInitiated={() => {
-            setIsOrderInitiated(true);
-          }}
+          setOrderInitiated={() => setIsOrderInitiated(true)}
           selectRegion={setSelectedRegion}
           selectedRegion={selectedRegion}
         />
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx
index 7040c4c6a4d7..915f4e0d68a2 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   NavLink,
@@ -19,11 +19,7 @@ import {
   Notifications,
 } from '@ovh-ux/manager-react-components';
 import { queryClient } from '@ovh-ux/manager-react-core-application';
-import {
-  OsdsTabBar,
-  OsdsTabBarItem,
-  OsdsTabs,
-} from '@ovhcloud/ods-components/react';
+import { OdsTabs, OdsTab } from '@ovhcloud/ods-components/react';
 import {
   getOkmsCredentialQueryKey,
   useOkmsCredentialById,
@@ -50,7 +46,6 @@ const CredentialDashboard = () => {
   const { trackClick } = useOvhTracking();
   const navigate = useNavigate();
   const { t } = useTranslation('key-management-service/credential');
-  const [activePanel, setActivePanel] = useState('');
   const location = useLocation();
   const { okmsId, credentialId } = useParams();
 
@@ -67,10 +62,6 @@ const CredentialDashboard = () => {
     credentialId,
   });
 
-  useEffect(() => {
-    setActivePanel(location.pathname);
-  }, [location]);
-
   if (isLoadingCredential || isLoadingKms) return <Loading />;
 
   if (errorCredential || errorKms) {
@@ -134,8 +125,13 @@ const CredentialDashboard = () => {
           });
         }}
         tabs={
-          <OsdsTabs panel={activePanel}>
-            <OsdsTabBar slot="top">
+          <OdsTabs>
+            <OdsTab
+              isSelected={
+                location.pathname ===
+                `/${okmsId}/${ROUTES_URLS.credentials}/${credentialId}`
+              }
+            >
               <NavLink
                 to={`/${okmsId}/${ROUTES_URLS.credentials}/${credentialId}`}
                 className="flex no-underline"
@@ -148,15 +144,17 @@ const CredentialDashboard = () => {
                   });
                 }}
               >
-                <OsdsTabBarItem
-                  panel={`/${okmsId}/${ROUTES_URLS.credentials}/${credentialId}`}
-                  role="tab"
-                >
-                  {t(
-                    'key_management_service_credential_dashboard_tab_informations',
-                  )}
-                </OsdsTabBarItem>
+                {t(
+                  'key_management_service_credential_dashboard_tab_informations',
+                )}
               </NavLink>
+            </OdsTab>
+            <OdsTab
+              isSelected={
+                location.pathname ===
+                `/${okmsId}/${ROUTES_URLS.credentials}/${credentialId}/${ROUTES_URLS.credentialIdentities}`
+              }
+            >
               <NavLink
                 to={`/${okmsId}/${ROUTES_URLS.credentials}/${credentialId}/${ROUTES_URLS.credentialIdentities}`}
                 className="flex no-underline"
@@ -169,17 +167,12 @@ const CredentialDashboard = () => {
                   });
                 }}
               >
-                <OsdsTabBarItem
-                  panel={`/${okmsId}/${ROUTES_URLS.credentials}/${credentialId}/${ROUTES_URLS.credentialIdentities}`}
-                  role="tab"
-                >
-                  {t(
-                    'key_management_service_credential_dashboard_tab_identities',
-                  )}
-                </OsdsTabBarItem>
+                {t(
+                  'key_management_service_credential_dashboard_tab_identities',
+                )}
               </NavLink>
-            </OsdsTabBar>
-          </OsdsTabs>
+            </OdsTab>
+          </OdsTabs>
         }
       >
         <Outlet
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateAddIdentities.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateAddIdentities.component.tsx
index 78f5940d31b2..c03b9c03b452 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateAddIdentities.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateAddIdentities.component.tsx
@@ -7,14 +7,14 @@ import React, {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { OsdsButton, OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsIcon, OdsText } from '@ovhcloud/ods-components/react';
 import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
   ButtonType,
   PageLocation,
@@ -52,18 +52,17 @@ const CreateAddIdentities = ({
   const { trackClick } = useOvhTracking();
 
   useEffect(() => {
-    if (isRootAccount) {
-      setIdentityURNs([
-        `urn:v1:${region.toLowerCase()}:identity:account:${auth.account}`,
-      ]);
-      return;
-    }
-    const userURNs = userList.map((user) => user.urn);
-    const groupURNs = groupList.map((group) => group.urn);
-    const serviceAccountURNs = serviceAccountList.map(
-      (serviceAccount) => serviceAccount.identity,
+    setIdentityURNs(
+      isRootAccount
+        ? [`urn:v1:${region.toLowerCase()}:identity:account:${auth.account}`]
+        : [
+            ...userList.map((user) => user.urn),
+            ...groupList.map((group) => group.urn),
+            ...serviceAccountList.map(
+              (serviceAccount) => serviceAccount.identity,
+            ),
+          ],
     );
-    setIdentityURNs([...userURNs, ...groupURNs, ...serviceAccountURNs]);
   }, [userList, groupList, serviceAccountList, isRootAccount]);
 
   return (
@@ -80,17 +79,13 @@ const CreateAddIdentities = ({
 
           {!isRootAccount && (
             <>
-              <div className="flex">
-                <OsdsIcon
-                  name={ODS_ICON_NAME.INFO}
-                  size={ODS_ICON_SIZE.sm}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                />
-                <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
+              <div className="flex items-center gap-1">
+                <OdsIcon name={ODS_ICON_NAME.circleInfo} />
+                <OdsText preset={ODS_TEXT_PRESET.span}>
                   {t(
                     'key_management_service_credential_create_identities_max_label',
                   )}
-                </OsdsText>
+                </OdsText>
               </div>
               <IdentitiesSelectedUsersList identityURNs={identityURNs} />
               <IdentitiesSelectedGroups identityURNs={identityURNs} />
@@ -99,10 +94,9 @@ const CreateAddIdentities = ({
           )}
         </div>
         <div className="flex gap-4">
-          <OsdsButton
-            inline
-            variant={ODS_BUTTON_VARIANT.stroked}
-            color={ODS_THEME_COLOR_INTENT.primary}
+          <OdsButton
+            variant={ODS_BUTTON_VARIANT.outline}
+            color={ODS_BUTTON_COLOR.primary}
             size={ODS_BUTTON_SIZE.sm}
             onClick={() => {
               trackClick({
@@ -113,15 +107,13 @@ const CreateAddIdentities = ({
               });
               navigate(`/${okmsId}/${ROUTES_URLS.credentials}`);
             }}
-          >
-            {t(
+            label={t(
               'key_management_service_credential_create_identities_button_cancel_label',
             )}
-          </OsdsButton>
-          <OsdsButton
-            inline
+          />
+          <OdsButton
             variant={ODS_BUTTON_VARIANT.ghost}
-            color={ODS_THEME_COLOR_INTENT.primary}
+            color={ODS_BUTTON_COLOR.primary}
             size={ODS_BUTTON_SIZE.sm}
             onClick={() => {
               trackClick({
@@ -132,14 +124,12 @@ const CreateAddIdentities = ({
               });
               prevStep();
             }}
-          >
-            {t(
+            label={t(
               'key_management_service_credential_create_identities_button_back_label',
             )}
-          </OsdsButton>
-          <OsdsButton
-            inline
-            color={ODS_THEME_COLOR_INTENT.primary}
+          />
+          <OdsButton
+            color={ODS_BUTTON_COLOR.primary}
             size={ODS_BUTTON_SIZE.sm}
             onClick={() => {
               trackClick({
@@ -150,14 +140,11 @@ const CreateAddIdentities = ({
               });
               nextStep();
             }}
-            disabled={
-              identityURNs.length > 25 || identityURNs.length === 0 || undefined
-            }
-          >
-            {t(
+            isDisabled={identityURNs.length > 25 || identityURNs.length === 0}
+            label={t(
               'key_management_service_credential_create_identities_button_create_label',
             )}
-          </OsdsButton>
+          />
         </div>
       </div>
     </div>
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx
index 1be630be133c..1f59eace7dd4 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx
@@ -27,7 +27,7 @@ const CreateCredential = () => {
   const { data: okms, isLoading, error } = useOKMSById(okmsId);
   const { t } = useTranslation('key-management-service/credential');
   const [step, setStep] = useState<number>(1);
-  const [name, setName] = useState<string>('');
+  const [name, setName] = useState<string>(null);
   const [validity, setValidity] = useState<number>(30);
   const [description, setDescription] = useState<string | null>();
   const [csr, setCsr] = useState<string | null>(null);
@@ -98,12 +98,10 @@ const CreateCredential = () => {
           description: t('key_management_service_credential_create_subtitle'),
           headerButton: <KmsGuidesHeader />,
         }}
+        message={<Notifications />}
       >
         <IdentityDataProvider>
           <div className="w-full block">
-            <div className="mb-6">
-              <Notifications />
-            </div>
             {step === 1 && (
               <CreateGeneralInformations
                 name={name}
@@ -123,19 +121,17 @@ const CreateCredential = () => {
               <CreateAddIdentities
                 identityURNs={identityURNs}
                 setIdentityURNs={setIdentityURNs}
-                prevStep={() => {
-                  setStep(1);
-                }}
-                nextStep={() => {
+                prevStep={() => setStep(1)}
+                nextStep={() =>
                   createKmsCredential({
                     name,
                     identityURNs,
                     description,
                     validity,
                     ...(csr ? { csr } : {}),
-                  });
-                }}
-              ></CreateAddIdentities>
+                  })
+                }
+              />
             )}
             {step === 3 && (
               <CreateCredentialConfirmation okmsCredential={okmsCredential} />
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateGeneralInformations.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateGeneralInformations.component.tsx
index ce4d29461b59..782429e75024 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateGeneralInformations.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateGeneralInformations.component.tsx
@@ -1,9 +1,12 @@
 import React, { Dispatch, SetStateAction, useEffect } from 'react';
 import { Subtitle } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
-import { OsdsButton } from '@ovhcloud/ods-components/react';
-import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { OdsButton } from '@ovhcloud/ods-components/react';
+import {
+  ODS_BUTTON_COLOR,
+  ODS_BUTTON_SIZE,
+  ODS_BUTTON_VARIANT,
+} from '@ovhcloud/ods-components';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
   ButtonType,
@@ -88,11 +91,6 @@ const CreateGeneralInformations = ({
             setValidity={setValidity}
             credentialValidityError={credentialValidityError}
           />
-          <Subtitle>
-            {t(
-              'key_management_service_credential_create_general_creation_method_title',
-            )}
-          </Subtitle>
           <CreateGeneralInformationsCreationMethod
             csr={csr}
             setCsr={setCsr}
@@ -101,11 +99,10 @@ const CreateGeneralInformations = ({
             credentialCreationMethodError={credentialCreationMethodError}
           />
           <div className="flex gap-4">
-            <OsdsButton
+            <OdsButton
               size={ODS_BUTTON_SIZE.md}
-              inline
-              variant={ODS_BUTTON_VARIANT.stroked}
-              color={ODS_THEME_COLOR_INTENT.primary}
+              variant={ODS_BUTTON_VARIANT.outline}
+              color={ODS_BUTTON_COLOR.primary}
               onClick={() => {
                 trackClick({
                   location: PageLocation.funnel,
@@ -115,13 +112,11 @@ const CreateGeneralInformations = ({
                 });
                 navigate(`/${okmsId}/${ROUTES_URLS.credentials}`);
               }}
-            >
-              {t('key_management_service_credential_create_cta_cancel')}
-            </OsdsButton>
-            <OsdsButton
+              label={t('key_management_service_credential_create_cta_cancel')}
+            />
+            <OdsButton
               size={ODS_BUTTON_SIZE.md}
-              inline
-              color={ODS_THEME_COLOR_INTENT.primary}
+              color={ODS_BUTTON_COLOR.primary}
               onClick={() => {
                 trackClick({
                   location: PageLocation.funnel,
@@ -131,16 +126,17 @@ const CreateGeneralInformations = ({
                 });
                 nextStep();
               }}
-              disabled={
+              isDisabled={
+                !name ||
                 !!credentialNameError ||
                 !!credentialDescriptionError ||
                 !!credentialValidityError ||
-                (!!credentialCreationMethodError && isCustomCsr) ||
-                undefined
+                (!!credentialCreationMethodError && isCustomCsr)
               }
-            >
-              {t('key_management_service_credential_create_cta_add_identities')}
-            </OsdsButton>
+              label={t(
+                'key_management_service_credential_create_cta_add_identities',
+              )}
+            />
           </div>
         </div>
       </div>
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/addGroups/CreateCredentialIdentityGroupList.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/addGroups/CreateCredentialIdentityGroupList.page.tsx
index dd579bc61fa7..c97da44ad4c8 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/addGroups/CreateCredentialIdentityGroupList.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/addGroups/CreateCredentialIdentityGroupList.page.tsx
@@ -1,15 +1,79 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  ODS_BUTTON_COLOR,
+  ODS_BUTTON_VARIANT,
+  ODS_SPINNER_SIZE,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
 import { useNavigate } from 'react-router-dom';
-import IdentityGroupListModal from '@/components/Modal/credential/identities/IdentityGroupListModal.component';
+import {
+  OdsButton,
+  OdsModal,
+  OdsSpinner,
+  OdsText,
+} from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import { IdentityGroup } from '@/types/identity.type';
+import { useIdentityData } from '@/hooks/credential/useIdentityData';
+import { useIdentityGroupList } from '@/data/hooks/useIdentity';
+import IdentitiesGroupList from '@/pages/credential/create/identities/list/IdentitiesGroupList.component';
 
 const CreateCredentialIdentityGroupList = () => {
+  const { t } = useTranslation('key-management-service/credential');
+  const { combinedData, isLoading } = useIdentityGroupList();
+  const { groupList, setGroupList } = useIdentityData();
+  const [selectedGroupList, setSelectedGroupList] = useState<IdentityGroup[]>(
+    groupList,
+  );
   const navigate = useNavigate();
 
-  const closeModal = () => {
-    navigate('..');
-  };
+  const closeModal = () => navigate('..');
 
-  return <IdentityGroupListModal closeModal={closeModal} />;
+  return (
+    <OdsModal isOpen isDismissible onOdsClose={closeModal}>
+      <OdsText preset={ODS_TEXT_PRESET.heading3}>
+        {t(
+          'key_management_service_credentials_identity_modal_group_list_headline',
+        )}
+      </OdsText>
+      <div className="mt-4">
+        {isLoading ? (
+          <div className="flex justify-center">
+            <OdsSpinner size={ODS_SPINNER_SIZE.md} />
+          </div>
+        ) : (
+          <IdentitiesGroupList
+            groupList={combinedData}
+            selectedGroupList={selectedGroupList}
+            setSelectedGroupList={setSelectedGroupList}
+          />
+        )}
+      </div>
+      <OdsButton
+        slot="actions"
+        type="button"
+        variant={ODS_BUTTON_VARIANT.ghost}
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={closeModal}
+        label={t(
+          'key_management_service_credentials_identity_modal_group_list_cancel',
+        )}
+      />
+      <OdsButton
+        isLoading={isLoading}
+        slot="actions"
+        type="button"
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={() => {
+          setGroupList(selectedGroupList);
+          closeModal();
+        }}
+        label={t(
+          'key_management_service_credentials_identity_modal_group_list_add',
+        )}
+      />
+    </OdsModal>
+  );
 };
 
 export default CreateCredentialIdentityGroupList;
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/addServiceAccount/CreateCredentialIdentityServiceAccountList.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/addServiceAccount/CreateCredentialIdentityServiceAccountList.page.tsx
index 737f71eb41e1..426af8d66892 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/addServiceAccount/CreateCredentialIdentityServiceAccountList.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/addServiceAccount/CreateCredentialIdentityServiceAccountList.page.tsx
@@ -1,15 +1,79 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  ODS_BUTTON_VARIANT,
+  ODS_SPINNER_SIZE,
+  ODS_BUTTON_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
 import { useNavigate } from 'react-router-dom';
-import IdentityServiceAccountListModal from '@/components/Modal/credential/identities/IdentityServiceAccountListModal.component';
+import {
+  OdsButton,
+  OdsModal,
+  OdsSpinner,
+  OdsText,
+} from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import { IdentityOauthClient } from '@/types/identity.type';
+import { useIdentityData } from '@/hooks/credential/useIdentityData';
+import { useIdentityServiceAccountList } from '@/data/hooks/useIdentity';
+import IdentitiesServiceAccountList from '@/pages/credential/create/identities/list/IdentitiesServiceAccountList.component';
 
 const CreateCredentialIdentityServiceAccountList = () => {
+  const { t } = useTranslation('key-management-service/credential');
+  const { combinedData, isLoading } = useIdentityServiceAccountList();
+  const { serviceAccountList, setServiceAccountList } = useIdentityData();
+  const [selectedServiceAccountList, setSelectedServiceAccountList] = useState<
+    IdentityOauthClient[]
+  >(serviceAccountList);
   const navigate = useNavigate();
 
-  const closeModal = () => {
-    navigate('..');
-  };
+  const closeModal = () => navigate('..');
 
-  return <IdentityServiceAccountListModal closeModal={closeModal} />;
+  return (
+    <OdsModal isOpen isDismissible onOdsClose={closeModal}>
+      <OdsText preset={ODS_TEXT_PRESET.heading3}>
+        {t(
+          'key_management_service_credentials_identity_modal_user_list_headline',
+        )}
+      </OdsText>
+      <div className="mt-4">
+        {isLoading ? (
+          <div className="flex justify-center">
+            <OdsSpinner size={ODS_SPINNER_SIZE.md} />
+          </div>
+        ) : (
+          <IdentitiesServiceAccountList
+            serviceAccountList={combinedData}
+            selectedServiceAccounts={selectedServiceAccountList}
+            setSelectedServiceAccounts={setSelectedServiceAccountList}
+          />
+        )}
+      </div>
+      <OdsButton
+        slot="actions"
+        type="button"
+        variant={ODS_BUTTON_VARIANT.ghost}
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={closeModal}
+        label={t(
+          'key_management_service_credentials_identity_modal_user_list_cancel',
+        )}
+      />
+      <OdsButton
+        isLoading={isLoading}
+        slot="actions"
+        type="button"
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={() => {
+          setServiceAccountList(selectedServiceAccountList);
+          closeModal();
+        }}
+        label={t(
+          'key_management_service_credentials_identity_modal_user_list_add',
+        )}
+      />
+    </OdsModal>
+  );
 };
 
 export default CreateCredentialIdentityServiceAccountList;
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/addUsers/CreateCredentialIdentityUserList.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/addUsers/CreateCredentialIdentityUserList.page.tsx
index df1cbef2b3f2..a67744d02f72 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/addUsers/CreateCredentialIdentityUserList.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/addUsers/CreateCredentialIdentityUserList.page.tsx
@@ -1,15 +1,79 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  ODS_BUTTON_VARIANT,
+  ODS_SPINNER_SIZE,
+  ODS_BUTTON_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
 import { useNavigate } from 'react-router-dom';
-import IdentityUserListModal from '@/components/Modal/credential/identities/IdentityUserListModal.component';
+import {
+  OdsButton,
+  OdsModal,
+  OdsSpinner,
+  OdsText,
+} from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import { IdentityUser } from '@/types/identity.type';
+import { useIdentityData } from '@/hooks/credential/useIdentityData';
+import { useIdentityUserList } from '@/data/hooks/useIdentity';
+import IdentitiesUserList from '@/pages/credential/create/identities/list/IdentitiesUserList.component';
 
 const CreateCredentialIdentityUserList = () => {
+  const { t } = useTranslation('key-management-service/credential');
+  const { combinedData, isLoading } = useIdentityUserList();
+  const { userList, setUserList } = useIdentityData();
+  const [selectedUserList, setSelectedUserList] = useState<IdentityUser[]>(
+    userList,
+  );
   const navigate = useNavigate();
 
-  const closeModal = () => {
-    navigate('..');
-  };
+  const closeModal = () => navigate('..');
 
-  return <IdentityUserListModal closeModal={closeModal} />;
+  return (
+    <OdsModal isOpen isDismissible onOdsClose={closeModal}>
+      <OdsText preset={ODS_TEXT_PRESET.heading3}>
+        {t(
+          'key_management_service_credentials_identity_modal_user_list_headline',
+        )}
+      </OdsText>
+      <div className="mt-4">
+        {isLoading ? (
+          <div className="flex justify-center">
+            <OdsSpinner size={ODS_SPINNER_SIZE.md} />
+          </div>
+        ) : (
+          <IdentitiesUserList
+            userList={combinedData}
+            selectedUserList={selectedUserList}
+            setSelectedUserList={setSelectedUserList}
+          />
+        )}
+      </div>
+      <OdsButton
+        slot="actions"
+        type="button"
+        variant={ODS_BUTTON_VARIANT.ghost}
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={closeModal}
+        label={t(
+          'key_management_service_credentials_identity_modal_user_list_cancel',
+        )}
+      />
+      <OdsButton
+        isLoading={isLoading}
+        slot="actions"
+        type="button"
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={() => {
+          setUserList(selectedUserList);
+          closeModal();
+        }}
+        label={t(
+          'key_management_service_credentials_identity_modal_user_list_add',
+        )}
+      />
+    </OdsModal>
+  );
 };
 
 export default CreateCredentialIdentityUserList;
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmation.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmation.component.tsx
index fb67de5d8095..015eae9037af 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmation.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmation.component.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { OsdsButton } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { OdsButton } from '@ovhcloud/ods-components/react';
+import { ODS_BUTTON_COLOR } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import CreateCredentialConfirmationDetails from './CreateCredentialConfirmationDetails.component';
@@ -29,18 +29,14 @@ const CreateCredentialConfirmation = ({
         isKeyDownloaded={isKeyDownloaded}
         setIsKeyDownloaded={setIsKeyDownloaded}
       />
-      <span>
-        <OsdsButton
-          color={ODS_THEME_COLOR_INTENT.primary}
-          disabled={!isKeyDownloaded || undefined}
-          onClick={() => navigate(`/${okmsId}/${ROUTES_URLS.credentials}`)}
-          inline
-        >
-          {t(
-            'key_management_service_credential_create_confirmation_button_done_label',
-          )}
-        </OsdsButton>
-      </span>
+      <OdsButton
+        color={ODS_BUTTON_COLOR.primary}
+        isDisabled={!isKeyDownloaded}
+        onClick={() => navigate(`/${okmsId}/${ROUTES_URLS.credentials}`)}
+        label={t(
+          'key_management_service_credential_create_confirmation_button_done_label',
+        )}
+      />
     </div>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationDetails.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationDetails.component.tsx
index 56303e71e9b5..9fcf7fb2bc37 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationDetails.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationDetails.component.tsx
@@ -1,7 +1,7 @@
 import { Subtitle } from '@ovh-ux/manager-react-components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { OsdsTile } from '@ovhcloud/ods-components/react';
+import { OdsCard } from '@ovhcloud/ods-components/react';
 import CreateCredentialConfirmationDetailsText from './CreateCredentialConfirmationDetailsText.component';
 import { OkmsCredential } from '@/types/okmsCredential.type';
 import { getDaysFromDate } from '@/utils/credential/validityDateUtils';
@@ -16,8 +16,8 @@ const CreateCredentialConfirmationDetails = ({
   const { t } = useTranslation('key-management-service/credential');
 
   return (
-    <OsdsTile>
-      <div className="flex flex-col w-full gap-7 md:gap-9 break-words">
+    <OdsCard className="p-4">
+      <div className="flex flex-col w-full gap-4 md:gap-5 break-words">
         <Subtitle>
           {t(
             'key_management_service_credential_create_confirmation_details_title',
@@ -51,7 +51,7 @@ const CreateCredentialConfirmationDetails = ({
           )}
         />
       </div>
-    </OsdsTile>
+    </OdsCard>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationDetailsText.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationDetailsText.component.tsx
index 3b132655cc8d..3651ca0e4b34 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationDetailsText.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationDetailsText.component.tsx
@@ -1,5 +1,6 @@
-import { Description } from '@ovh-ux/manager-react-components';
 import React from 'react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsText } from '@ovhcloud/ods-components/react';
 
 type CreateCredentialConfirmationDetailsTextProps = {
   label: string;
@@ -12,8 +13,8 @@ const CreateCredentialConfirmationDetailsText = ({
 }: CreateCredentialConfirmationDetailsTextProps) => {
   return (
     <div className="grid grid-cols-2">
-      <Description>{`${label}:`}</Description>
-      <Description>{value}</Description>
+      <OdsText preset={ODS_TEXT_PRESET.span}>{`${label}:`}</OdsText>
+      <OdsText preset={ODS_TEXT_PRESET.span}>{value}</OdsText>
     </div>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationPrivateKey.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationPrivateKey.component.tsx
index 3254397e3974..b862c2db3cea 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationPrivateKey.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/confirmation/CreateCredentialConfirmationPrivateKey.component.tsx
@@ -1,20 +1,20 @@
+import React, { Dispatch, SetStateAction } from 'react';
 import { Subtitle } from '@ovh-ux/manager-react-components';
 import {
-  ODS_BUTTON_SIZE,
-  ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
+  ODS_LINK_COLOR,
+  ODS_MESSAGE_COLOR,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import {
-  OsdsButton,
-  OsdsCheckbox,
-  OsdsCheckboxButton,
-  OsdsMessage,
-  OsdsText,
-  OsdsTile,
+  OdsLink,
+  OdsCheckbox,
+  OdsMessage,
+  OdsText,
+  OdsCard,
+  OdsFormField,
 } from '@ovhcloud/ods-components/react';
-import React, { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 
 type CreateCredentialConfirmationPrivateKeyProps = {
   privateKey: string;
@@ -31,53 +31,49 @@ const CreateCredentialConfirmationPrivateKey = ({
 }: CreateCredentialConfirmationPrivateKeyProps) => {
   const { t } = useTranslation('key-management-service/credential');
   return (
-    <OsdsTile>
-      <div className="flex flex-col w-full gap-7 md:gap-9">
+    <OdsCard className="p-4">
+      <div className="flex flex-col w-full gap-4 md:gap-5">
         <Subtitle>
           {t(
             'key_management_service_credential_create_confirmation_private-key_title',
           )}
         </Subtitle>
-        <OsdsMessage
-          icon={ODS_ICON_NAME.WARNING}
-          color={ODS_THEME_COLOR_INTENT.warning}
-        >
+        <OdsMessage color={ODS_MESSAGE_COLOR.warning}>
           {t(
             'key_management_service_credential_create_confirmation_private-key_warn',
           )}
-        </OsdsMessage>
-        <span>
-          <OsdsButton
-            variant={ODS_BUTTON_VARIANT.stroked}
-            color={ODS_THEME_COLOR_INTENT.primary}
-            href={`data:text/plain;charset=utf-8,${encodeURIComponent(
-              privateKey.replace(/\n/g, '\r\n'),
-            )}`}
-            download={`${credentialId}_privatekey.pem`}
-            inline
-            size={ODS_BUTTON_SIZE.sm}
+        </OdsMessage>
+        <OdsLink
+          icon={ODS_ICON_NAME.download}
+          color={ODS_LINK_COLOR.primary}
+          href={`data:text/plain;charset=utf-8,${encodeURIComponent(
+            privateKey.replace(/\n/g, '\r\n'),
+          )}`}
+          download={`${credentialId}_privatekey.pem`}
+          label={t(
+            'key_management_service_credential_create_confirmation_private-key_download_label',
+          )}
+        />
+        <OdsFormField className="flex flex-row items-center">
+          <OdsCheckbox
+            name="confirmation-private-key"
+            inputId="confirmation-private-key"
+            isChecked={isKeyDownloaded}
+            onOdsChange={() => setIsKeyDownloaded(!isKeyDownloaded)}
+          />
+          <label
+            className="ml-2 cursor-pointer"
+            htmlFor="confirmation-private-key"
           >
-            {t(
-              'key_management_service_credential_create_confirmation_private-key_download_label',
-            )}
-          </OsdsButton>
-        </span>
-        <OsdsCheckbox
-          checked={isKeyDownloaded}
-          onOdsCheckedChange={() => setIsKeyDownloaded(!isKeyDownloaded)}
-        >
-          <OsdsCheckboxButton color={ODS_THEME_COLOR_INTENT.primary}>
-            <span slot="end">
-              <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
-                {t(
-                  'key_management_service_credential_create_confirmation_private-key_checkbox_label',
-                )}
-              </OsdsText>
-            </span>
-          </OsdsCheckboxButton>
-        </OsdsCheckbox>
+            <OdsText preset={ODS_TEXT_PRESET.span}>
+              {t(
+                'key_management_service_credential_create_confirmation_private-key_checkbox_label',
+              )}
+            </OdsText>
+          </label>
+        </OdsFormField>
       </div>
-    </OsdsTile>
+    </OdsCard>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsCreationMethod.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsCreationMethod.component.tsx
index 31a4fbf0e9f3..3ab063c3dffd 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsCreationMethod.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsCreationMethod.component.tsx
@@ -1,31 +1,17 @@
-import {
-  CommonTitle,
-  Description,
-  Subtitle,
-} from '@ovh-ux/manager-react-components';
+import React, { Dispatch, SetStateAction } from 'react';
+import { Title, Subtitle } from '@ovh-ux/manager-react-components';
 import {
   ButtonType,
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import {
-  ODS_THEME_TYPOGRAPHY_SIZE,
-  ODS_THEME_COLOR_INTENT,
-} from '@ovhcloud/ods-common-theming';
-import {
-  ODS_RADIO_BUTTON_SIZE,
-  OdsTextAreaValueChangeEvent,
-  OsdsTextareaCustomEvent,
-} from '@ovhcloud/ods-components';
-import {
-  OsdsFormField,
-  OsdsRadio,
-  OsdsRadioButton,
-  OsdsRadioGroup,
-  OsdsText,
-  OsdsTextarea,
+  OdsText,
+  OdsFormField,
+  OdsRadio,
+  OdsTextarea,
 } from '@ovhcloud/ods-components/react';
-import React, { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CSR_PLACEHOLDER } from '../CreateGeneralInformations.constants';
 import { CredentialCreationMethodErrorsType } from '@/utils/credential/validateCredentialCreationMethod';
@@ -60,17 +46,25 @@ const CreateGeneralInformationsCreationMethod = ({
   };
 
   return (
-    <div className="flex flex-col gap-5 md:gap-6">
-      <Description>
-        {t(
-          'key_management_service_credential_create_general_information_creation_method_subtitle',
-        )}
-      </Description>
-      <OsdsRadioGroup className="flex flex-col gap-6">
-        <OsdsRadio checked={!isCustomCsr}>
-          <OsdsRadioButton
-            size={ODS_RADIO_BUTTON_SIZE.sm}
-            color={ODS_THEME_COLOR_INTENT.primary}
+    <>
+      <OdsFormField>
+        <div slot="label">
+          <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+            {t(
+              'key_management_service_credential_create_general_creation_method_title',
+            )}
+          </OdsText>
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+            {t(
+              'key_management_service_credential_create_general_information_creation_method_subtitle',
+            )}
+          </OdsText>
+        </div>
+        <div className="flex items-center">
+          <OdsRadio
+            name="creationMethod"
+            inputId="creationMethodNoKey"
+            isChecked={!isCustomCsr}
             onClick={() => {
               trackClick({
                 location: PageLocation.funnel,
@@ -80,28 +74,25 @@ const CreateGeneralInformationsCreationMethod = ({
               });
               setIsCustomCsr(false);
             }}
-          >
-            <span slot="end">
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-              >
-                {t(
-                  'key_management_service_credential_create_general_information_creation_method_no_key',
-                )}
-              </OsdsText>
-              <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
-                {t(
-                  `key_management_service_credential_create_general_information_creation_method_no_key_desc`,
-                )}
-              </OsdsText>
-            </span>
-          </OsdsRadioButton>
-        </OsdsRadio>
-        <OsdsRadio checked={isCustomCsr}>
-          <OsdsRadioButton
-            size={ODS_RADIO_BUTTON_SIZE.sm}
-            color={ODS_THEME_COLOR_INTENT.primary}
+          />
+          <label className="ml-2" htmlFor="creationMethodNoKey">
+            <OdsText className="block" preset={ODS_TEXT_PRESET.paragraph}>
+              {t(
+                'key_management_service_credential_create_general_information_creation_method_no_key',
+              )}
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.caption}>
+              {t(
+                `key_management_service_credential_create_general_information_creation_method_no_key_desc`,
+              )}
+            </OdsText>
+          </label>
+        </div>
+        <div className="flex items-center">
+          <OdsRadio
+            name="creationMethod"
+            inputId="creationMethodKey"
+            isChecked={isCustomCsr}
             onClick={() => {
               trackClick({
                 location: PageLocation.funnel,
@@ -111,55 +102,48 @@ const CreateGeneralInformationsCreationMethod = ({
               });
               setIsCustomCsr(true);
             }}
-          >
-            <span slot="end">
-              <OsdsText
-                color={ODS_THEME_COLOR_INTENT.text}
-                size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-              >
-                {t(
-                  'key_management_service_credential_create_general_information_creation_method_key',
-                )}
-              </OsdsText>
-              <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
-                {t(
-                  `key_management_service_credential_create_general_information_creation_method_key_desc`,
-                )}
-              </OsdsText>
-            </span>
-          </OsdsRadioButton>
-        </OsdsRadio>
-      </OsdsRadioGroup>
+          />
+          <label className="ml-2" htmlFor="creationMethodKey">
+            <OdsText className="block" preset={ODS_TEXT_PRESET.paragraph}>
+              {t(
+                'key_management_service_credential_create_general_information_creation_method_key',
+              )}
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.caption}>
+              {t(
+                `key_management_service_credential_create_general_information_creation_method_key_desc`,
+              )}
+            </OdsText>
+          </label>
+        </div>
+      </OdsFormField>
       {isCustomCsr && (
-        <>
-          <Subtitle>
-            {t(
-              'key_management_service_credential_create_general_information_csr_title',
-            )}
-          </Subtitle>
-          <CommonTitle>
-            {t(
-              'key_management_service_credential_create_general_information_csr_subtitle',
-            )}
-          </CommonTitle>
-          <OsdsFormField
-            error={getCreationMethodErrorMessage(credentialCreationMethodError)}
-          >
-            <OsdsTextarea
-              value={csr}
-              error={!!credentialCreationMethodError || undefined}
-              placeholder={CSR_PLACEHOLDER}
-              rows={10}
-              onOdsValueChange={(
-                e: OsdsTextareaCustomEvent<OdsTextAreaValueChangeEvent>,
-              ) => {
-                return setCsr(e.detail.value);
-              }}
-            ></OsdsTextarea>
-          </OsdsFormField>
-        </>
+        <OdsFormField
+          error={getCreationMethodErrorMessage(credentialCreationMethodError)}
+        >
+          <div slot="label">
+            <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+              {t(
+                'key_management_service_credential_create_general_information_csr_title',
+              )}
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+              {t(
+                'key_management_service_credential_create_general_information_csr_subtitle',
+              )}
+            </OdsText>
+          </div>
+          <OdsTextarea
+            name="credentialCreationMethod"
+            value={csr}
+            hasError={!!credentialCreationMethodError}
+            placeholder={CSR_PLACEHOLDER}
+            rows={10}
+            onOdsChange={(e) => setCsr(e.detail.value)}
+          />
+        </OdsFormField>
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsDescription.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsDescription.tsx
index 1eda24c086a3..39d5bf4de94d 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsDescription.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsDescription.tsx
@@ -1,17 +1,11 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import { CommonTitle } from '@ovh-ux/manager-react-components';
 import {
-  OsdsFormField,
-  OsdsText,
-  OsdsTextarea,
+  OdsFormField,
+  OdsText,
+  OdsTextarea,
 } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
-import {
-  ODS_TEXT_LEVEL,
-  OdsTextAreaValueChangeEvent,
-  OsdsTextareaCustomEvent,
-} from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import {
   CredentialDescriptionErrorsType,
   CredentialDescriptionMaxCharacters,
@@ -24,7 +18,7 @@ type CreateGeneralInformationsDescriptionProps = {
 };
 
 const CreateGeneralInformationsDescription = ({
-  description,
+  description = '',
   setDescription,
   credentialDescriptionError,
 }: CreateGeneralInformationsDescriptionProps) => {
@@ -42,41 +36,31 @@ const CreateGeneralInformationsDescription = ({
         return t(
           'key_management_service_credential_update_description_error_max',
         );
-
       default:
         return null;
     }
   };
 
   return (
-    <div className="flex flex-col gap-5 md:gap-6">
-      <CommonTitle>
+    <OdsFormField
+      error={getDescriptionErrorMessage(credentialDescriptionError)}
+    >
+      <OdsText slot="label" preset={ODS_TEXT_PRESET.heading5}>
         {t(
           'key_management_service_credential_create_general_information_description_title',
         )}
-      </CommonTitle>
-      <OsdsFormField
-        error={getDescriptionErrorMessage(credentialDescriptionError)}
-      >
-        <OsdsTextarea
-          value={description || ''}
-          error={!!credentialDescriptionError || undefined}
-          onOdsValueChange={(
-            e: OsdsTextareaCustomEvent<OdsTextAreaValueChangeEvent>,
-          ) => {
-            return setDescription(e.detail.value);
-          }}
-        ></OsdsTextarea>
-        <OsdsText
-          slot="helper"
-          color={ODS_THEME_COLOR_INTENT.text}
-          level={ODS_TEXT_LEVEL.body}
-          className="text-right"
-        >
-          {description?.length || 0}/{CredentialDescriptionMaxCharacters}
-        </OsdsText>
-      </OsdsFormField>
-    </div>
+      </OdsText>
+      <OdsTextarea
+        name="credentialDescription"
+        value={description}
+        hasError={!!credentialDescriptionError}
+        onOdsChange={(e) => setDescription(e.detail.value)}
+        rows={4}
+      />
+      <OdsText slot="visual-hint" preset={ODS_TEXT_PRESET.span}>
+        {description?.length || 0}/{CredentialDescriptionMaxCharacters}
+      </OdsText>
+    </OdsFormField>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsName.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsName.component.tsx
index d27f7fc49c8f..a3eb9079827b 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsName.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsName.component.tsx
@@ -1,11 +1,11 @@
-import { CommonTitle, Description } from '@ovh-ux/manager-react-components';
-import {
-  ODS_INPUT_TYPE,
-  OdsInputValueChangeEventDetail,
-  OsdsInputCustomEvent,
-} from '@ovhcloud/ods-components';
-import { OsdsFormField, OsdsInput } from '@ovhcloud/ods-components/react';
 import React, { Dispatch, SetStateAction } from 'react';
+import { Subtitle, Title } from '@ovh-ux/manager-react-components';
+import { ODS_INPUT_TYPE, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import {
+  OdsFormField,
+  OdsInput,
+  OdsText,
+} from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { CredentialNameErrorsType } from '@/utils/credential/validateCredentialName';
 
@@ -39,36 +39,34 @@ const CreateGeneralInformationsName = ({
         return null;
     }
   };
+
   return (
-    <div className="flex flex-col gap-5 md:gap-6">
-      <CommonTitle>
-        {t(
-          'key_management_service_credential_create_general_information_display_name_title',
-        )}
-      </CommonTitle>
-      <Description>
-        {t(
-          'key_management_service_credential_create_general_information_display_name_subtitle',
-        )}
-      </Description>
-      <OsdsFormField error={getNameErrorMessage(credentialNameError)}>
-        <OsdsInput
-          aria-label="input-service-key-name"
-          type={ODS_INPUT_TYPE.text}
-          error={!!credentialNameError}
-          required
-          placeholder={t(
-            'key_management_service_credential_create_general_information_display_name_placeholder',
+    <OdsFormField error={getNameErrorMessage(credentialNameError)}>
+      <div slot="label">
+        <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+          {t(
+            'key_management_service_credential_create_general_information_display_name_title',
+          )}
+        </OdsText>
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+          {t(
+            'key_management_service_credential_create_general_information_display_name_subtitle',
           )}
-          value={name}
-          onOdsValueChange={(
-            e: OsdsInputCustomEvent<OdsInputValueChangeEventDetail>,
-          ) => {
-            return setName(e.detail.value);
-          }}
-        />
-      </OsdsFormField>
-    </div>
+        </OdsText>
+      </div>
+      <OdsInput
+        name="input-service-key-name"
+        aria-label="input-service-key-name"
+        type={ODS_INPUT_TYPE.text}
+        hasError={!!credentialNameError}
+        isRequired
+        placeholder={t(
+          'key_management_service_credential_create_general_information_display_name_placeholder',
+        )}
+        value={name}
+        onOdsChange={(e) => setName(e.detail.value as string)}
+      />
+    </OdsFormField>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsValidity.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsValidity.tsx
index 2211f6c9d882..5858ce859b04 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsValidity.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/generalInformations/CreateGeneralInformationsValidity.tsx
@@ -1,14 +1,11 @@
-import { CommonTitle, Description } from '@ovh-ux/manager-react-components';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import {
-  OsdsDatepicker,
-  OsdsFormField,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsText,
+  OdsDatepicker,
+  OdsFormField,
+  OdsSelect,
+  OdsText,
 } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_TEXT_LEVEL } from '@ovhcloud/ods-components';
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { VALIDITY_PERIOD_PRESET } from '../CreateGeneralInformations.constants';
 import { ValidityPeriodErrorsType } from '@/utils/credential/validateValidityDate';
@@ -51,7 +48,6 @@ const CreateGeneralInformationsValidity = ({
         return t(
           'key_management_service_credential_update_validity_error_max_period',
         );
-
       default:
         return null;
     }
@@ -67,57 +63,57 @@ const CreateGeneralInformationsValidity = ({
   }, [validityPresetPeriod, validityDatepicker]);
 
   return (
-    <div className="flex flex-col gap-5 md:gap-6">
-      <CommonTitle>
-        {t(
-          'key_management_service_credential_create_general_information_validity_title',
-        )}
-      </CommonTitle>
-      <Description>
-        {t(
-          'key_management_service_credential_create_general_information_validity_subtitle',
-        )}
-      </Description>
-      <OsdsSelect
-        value={validityPresetPeriod}
-        onOdsValueChange={(v) => {
-          return setValidityPresetPeriod(Number(v.detail.value));
-        }}
-      >
-        {VALIDITY_PERIOD_PRESET.map((validityEntry) => (
-          <OsdsSelectOption value={validityEntry.days} key={validityEntry.days}>
-            {t(validityEntry.label)}
-          </OsdsSelectOption>
-        ))}
-      </OsdsSelect>
+    <>
+      <OdsFormField>
+        <div slot="label">
+          <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+            {t(
+              'key_management_service_credential_create_general_information_validity_title',
+            )}
+          </OdsText>
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+            {t(
+              'key_management_service_credential_create_general_information_validity_subtitle',
+            )}
+          </OdsText>
+        </div>
+        <OdsSelect
+          name="validityPeriod"
+          onOdsChange={(v) => setValidityPresetPeriod(Number(v.detail.value))}
+          defaultValue={validityPresetPeriod.toString()}
+        >
+          {VALIDITY_PERIOD_PRESET.map((validityEntry) => (
+            <option value={validityEntry.days} key={validityEntry.days}>
+              {t(validityEntry.label)}
+            </option>
+          ))}
+        </OdsSelect>
+      </OdsFormField>
       {validityPresetPeriod === -1 && (
-        <OsdsFormField error={getValidityErrorMessage(credentialValidityError)}>
-          <OsdsDatepicker
-            error={!!credentialValidityError || undefined}
-            value={validityDatepicker}
-            onOdsDatepickerValueChange={(v) => {
-              setValidityDatepicker(v.detail.value);
-            }}
-            maxDate={addDaysToDate(365)}
-            minDate={addDaysToDate(1)}
-          ></OsdsDatepicker>
-          <OsdsText slot="label" color={ODS_THEME_COLOR_INTENT.text}>
+        <OdsFormField error={getValidityErrorMessage(credentialValidityError)}>
+          <OdsText slot="label" preset={ODS_TEXT_PRESET.heading5}>
             {t(
               'key_management_service_credential_create_validity_custom_date_label',
             )}
-          </OsdsText>
-          <OsdsText
-            level={ODS_TEXT_LEVEL.body}
-            color={ODS_THEME_COLOR_INTENT.text}
-            slot="helper"
-          >
+          </OdsText>
+          <OdsDatepicker
+            name="credentialValidity"
+            hasError={!!credentialValidityError}
+            value={validityDatepicker}
+            onOdsChange={(v) => {
+              setValidityDatepicker(v.detail.value);
+            }}
+            max={addDaysToDate(365)}
+            min={addDaysToDate(1)}
+          />
+          <OdsText slot="visual-hint" preset={ODS_TEXT_PRESET.span}>
             {t(
               'key_management_service_credential_update_validity_error_max_period',
             )}
-          </OsdsText>
-        </OsdsFormField>
+          </OdsText>
+        </OdsFormField>
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesRootAccount.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesRootAccount.component.tsx
index b9960ae7e76e..ca35ad985f53 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesRootAccount.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesRootAccount.component.tsx
@@ -1,15 +1,12 @@
 import React, { Dispatch, SetStateAction } from 'react';
 import {
-  OsdsToggle,
-  OsdsText,
-  OsdsFormField,
-  OsdsCheckbox,
+  OdsToggle,
+  OdsText,
+  OdsFormField,
+  OdsCheckbox,
 } from '@ovhcloud/ods-components/react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_SIZE,
-} from '@ovhcloud/ods-common-theming';
 import {
   ButtonType,
   PageLocation,
@@ -29,38 +26,35 @@ const IdentitiesRootAccount = ({
   const { trackClick } = useOvhTracking();
 
   return (
-    <OsdsFormField inline>
-      <OsdsCheckbox
-        checked={isRootAccount}
-        onOdsCheckedChange={() => {
+    <OdsFormField>
+      <label htmlFor="rootAccount" slot="label">
+        <OdsText className="block" preset={ODS_TEXT_PRESET.heading4}>
+          {t(
+            'key_management_service_credential_create_identities_root_account_toggle_label',
+          )}
+        </OdsText>
+      </label>
+      <OdsToggle
+        name="rootAccount"
+        id="rootAccount"
+        defaultChecked={isRootAccount}
+        onOdsChange={(event) => {
           trackClick({
             location: PageLocation.funnel,
             buttonType: ButtonType.button,
             actionType: 'action',
             actions: ['toggle_root_identity', !isRootAccount ? 'on' : 'off'],
           });
-          setIsRootAccount(!isRootAccount);
+          setIsRootAccount(event.detail.value);
         }}
-      >
-        <OsdsToggle>
-          <OsdsText
-            slot="end"
-            color={ODS_THEME_COLOR_INTENT.text}
-            size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-            className="pl-3"
-          >
-            {t(
-              'key_management_service_credential_create_identities_root_account_toggle_label',
-            )}
-          </OsdsText>
-        </OsdsToggle>
-      </OsdsCheckbox>
-      <OsdsText color={ODS_THEME_COLOR_INTENT.text} slot="helper">
+      />
+
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
         {t(
           'key_management_service_credential_create_identities_root_account_toggle_helper',
         )}
-      </OsdsText>
-    </OsdsFormField>
+      </OdsText>
+    </OdsFormField>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedBase.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedBase.component.tsx
index 9b7041ca026d..3ab7d04167b0 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedBase.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedBase.component.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
+import { Datagrid, DatagridColumn } from '@ovh-ux/manager-react-components';
 import {
-  CommonTitle,
-  Datagrid,
-  DatagridColumn,
-} from '@ovh-ux/manager-react-components';
-import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
-import { OsdsButton } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+  ODS_BUTTON_SIZE,
+  ODS_BUTTON_VARIANT,
+  ODS_BUTTON_COLOR,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
+import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 
 type IdentitiesSelectedBaseProps = {
@@ -26,45 +26,41 @@ const IdentitiesSelectedBase = ({
   addButtonLabel,
   deleteCallback,
   datagridColumns,
-  items,
+  items = [],
 }: IdentitiesSelectedBaseProps) => {
   const { t } = useTranslation('key-management-service/credential');
   return (
-    <>
-      <CommonTitle>{title}</CommonTitle>
+    <div className="grid gap-4">
+      <OdsText preset={ODS_TEXT_PRESET.heading4}>{title}</OdsText>
       <div className="flex gap-3">
-        <OsdsButton
-          inline
-          variant={ODS_BUTTON_VARIANT.stroked}
+        <OdsButton
+          variant={ODS_BUTTON_VARIANT.outline}
           size={ODS_BUTTON_SIZE.sm}
-          color={ODS_THEME_COLOR_INTENT.primary}
-          disabled={identityURNs.length > 25 || undefined}
+          color={ODS_BUTTON_COLOR.primary}
+          isDisabled={identityURNs.length > 25}
           onClick={addCallback}
-        >
-          {addButtonLabel}
-        </OsdsButton>
-        <OsdsButton
-          inline
+          label={addButtonLabel}
+        />
+        <OdsButton
           size={ODS_BUTTON_SIZE.sm}
-          color={ODS_THEME_COLOR_INTENT.error}
-          disabled={items.length === 0 || undefined}
+          color={ODS_BUTTON_COLOR.critical}
+          isDisabled={items.length === 0}
           onClick={deleteCallback}
-        >
-          {t(
+          label={t(
             'key_management_service_credential_create_identities_users_list_button_delete_all_label',
           )}
-        </OsdsButton>
+        />
       </div>
       <Datagrid
         columns={datagridColumns}
-        items={items || []}
+        items={items}
         totalItems={items?.length}
         contentAlignLeft
         noResultLabel={t(
           'key_management_service_credential_create_identities_list_button_no_result_label',
         )}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedGroups.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedGroups.component.tsx
index a46f7054dce2..8e4f36b206c0 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedGroups.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedGroups.component.tsx
@@ -56,7 +56,7 @@ const IdentitiesSelectedGroups = ({
       datagridColumns={columns}
       items={groupList}
       identityURNs={identityURNs}
-    ></IdentitiesSelectedBase>
+    />
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedServiceAccounts.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedServiceAccounts.component.tsx
index 95f49d40c3f1..3f1c1dd91835 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedServiceAccounts.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedServiceAccounts.component.tsx
@@ -58,7 +58,7 @@ const IdentitiesSelectedServiceAccounts = ({
       datagridColumns={columns}
       items={serviceAccountList}
       identityURNs={identityURNs}
-    ></IdentitiesSelectedBase>
+    />
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedUsersList.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedUsersList.component.tsx
index 17e532a3ec9a..9428d5a45937 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedUsersList.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/IdentitiesSelectedUsersList.component.tsx
@@ -53,19 +53,15 @@ const IdentitiesSelectedUsersList = ({
       title={t(
         'key_management_service_credential_create_identities_users_list_title',
       )}
-      addCallback={() => {
-        return navigate(ROUTES_URLS.createCredentialAddUserModal);
-      }}
+      addCallback={() => navigate(ROUTES_URLS.createCredentialAddUserModal)}
       addButtonLabel={t(
         'key_management_service_credential_create_identities_users_list_button_add_label',
       )}
-      deleteCallback={() => {
-        setUserList([]);
-      }}
+      deleteCallback={() => setUserList([])}
       datagridColumns={columns}
       items={userList}
       identityURNs={identityURNs}
-    ></IdentitiesSelectedBase>
+    />
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/badge/IdentitiesStatusBadge.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/badge/IdentitiesStatusBadge.component.tsx
index 309ce87ae2ba..c1991844e847 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/badge/IdentitiesStatusBadge.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/badge/IdentitiesStatusBadge.component.tsx
@@ -1,56 +1,51 @@
 import React from 'react';
-import { OsdsChip } from '@ovhcloud/ods-components/react';
-import {
-  ODS_CHIP_SIZE,
-  ODS_TEXT_COLOR_INTENT,
-  OdsChipAttribute,
-} from '@ovhcloud/ods-components';
+import { OdsBadge } from '@ovhcloud/ods-components/react';
+import { ODS_BADGE_COLOR, ODS_BADGE_SIZE } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { IdentityStatus } from '@/types/identity.type';
 
-type IdentitiesStatusBadgeProps = Omit<OdsChipAttribute, 'color'> & {
-  status: IdentityStatus;
+const chipPropsByStatus: {
+  [key in IdentityStatus]: {
+    translationKey: string;
+    color: ODS_BADGE_COLOR;
+  };
+} = {
+  [IdentityStatus.password_change_required]: {
+    translationKey:
+      'key_management_service_credential_identity_status_password_change_required',
+    color: ODS_BADGE_COLOR.warning,
+  },
+  [IdentityStatus.disabled]: {
+    translationKey:
+      'key_management_service_credential_identity_status_disabled',
+    color: ODS_BADGE_COLOR.critical,
+  },
+  [IdentityStatus.ok]: {
+    translationKey: 'key_management_service_credential_identity_status_ok',
+    color: ODS_BADGE_COLOR.success,
+  },
 };
 
+type IdentitiesStatusBadgeProps = {
+  size?: ODS_BADGE_SIZE;
+  status: IdentityStatus;
+} & Record<string, string>;
+
 const IdentitiesStatusBadge = ({
   status,
-  size = ODS_CHIP_SIZE.md,
+  size = ODS_BADGE_SIZE.md,
   ...otherProps
 }: IdentitiesStatusBadgeProps) => {
   const { t } = useTranslation('key-management-service/credential');
-
-  const chipPropsByStatus: {
-    [key in IdentityStatus]: {
-      translationKey: string;
-      color: ODS_TEXT_COLOR_INTENT;
-    };
-  } = {
-    [IdentityStatus.password_change_required]: {
-      translationKey:
-        'key_management_service_credential_identity_status_password_change_required',
-      color: ODS_TEXT_COLOR_INTENT.warning,
-    },
-    [IdentityStatus.disabled]: {
-      translationKey:
-        'key_management_service_credential_identity_status_disabled',
-      color: ODS_TEXT_COLOR_INTENT.error,
-    },
-    [IdentityStatus.ok]: {
-      translationKey: 'key_management_service_credential_identity_status_ok',
-      color: ODS_TEXT_COLOR_INTENT.success,
-    },
-  };
-
   const props = chipPropsByStatus[status];
 
   return (
-    <OsdsChip
+    <OdsBadge
       size={size}
-      color={props?.color || ODS_TEXT_COLOR_INTENT.default}
+      color={props?.color || ODS_BADGE_COLOR.neutral}
       {...otherProps}
-    >
-      {props ? t(props.translationKey) : status}
-    </OsdsChip>
+      label={props ? t(props.translationKey) : status}
+    />
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/group/IdentityGroupDeleteActionCell.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/group/IdentityGroupDeleteActionCell.tsx
index f445efca56e7..1ee3919489f4 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/group/IdentityGroupDeleteActionCell.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/group/IdentityGroupDeleteActionCell.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 import {
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
+  ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
-import { OsdsButton, OsdsIcon } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { OdsButton } from '@ovhcloud/ods-components/react';
 import { useIdentityData } from '@/hooks/credential/useIdentityData';
 import { IdentityGroup } from '@/types/identity.type';
 
@@ -13,21 +12,17 @@ const IdentityGroupDeleteActionCell = (group: IdentityGroup) => {
   const { setGroupList } = useIdentityData();
 
   return (
-    <OsdsButton
-      circle
+    <OdsButton
+      color={ODS_BUTTON_COLOR.primary}
       variant={ODS_BUTTON_VARIANT.ghost}
       onClick={() => {
         setGroupList((prevGroupList) =>
           prevGroupList.filter((groupInList) => groupInList.urn !== group.urn),
         );
       }}
-    >
-      <OsdsIcon
-        name={ODS_ICON_NAME.TRASH}
-        size={ODS_ICON_SIZE.xs}
-        color={ODS_THEME_COLOR_INTENT.primary}
-      ></OsdsIcon>
-    </OsdsButton>
+      icon={ODS_ICON_NAME.trash}
+      label=""
+    />
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/service-account/IdentityServiceAccountDeleteActionCell.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/service-account/IdentityServiceAccountDeleteActionCell.tsx
index 35deb6f46254..18406ff59428 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/service-account/IdentityServiceAccountDeleteActionCell.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/service-account/IdentityServiceAccountDeleteActionCell.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 import {
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
+  ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
-import { OsdsButton, OsdsIcon } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { OdsButton } from '@ovhcloud/ods-components/react';
 import { IdentityOauthClient } from '@/types/identity.type';
 import { useIdentityData } from '@/hooks/credential/useIdentityData';
 
@@ -15,8 +14,8 @@ const IdentityServiceAccountDeleteActionCell = (
   const { setServiceAccountList } = useIdentityData();
 
   return (
-    <OsdsButton
-      circle
+    <OdsButton
+      color={ODS_BUTTON_COLOR.primary}
       variant={ODS_BUTTON_VARIANT.ghost}
       onClick={() => {
         setServiceAccountList((prevServiceAccountList) =>
@@ -26,13 +25,9 @@ const IdentityServiceAccountDeleteActionCell = (
           ),
         );
       }}
-    >
-      <OsdsIcon
-        name={ODS_ICON_NAME.TRASH}
-        size={ODS_ICON_SIZE.xs}
-        color={ODS_THEME_COLOR_INTENT.primary}
-      ></OsdsIcon>
-    </OsdsButton>
+      icon={ODS_ICON_NAME.trash}
+      label=""
+    />
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/user/IdentityUserDeleteActionCell.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/user/IdentityUserDeleteActionCell.tsx
index d152cfcc6030..cb34daa23072 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/user/IdentityUserDeleteActionCell.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/user/IdentityUserDeleteActionCell.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 import {
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
+  ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
-import { OsdsButton, OsdsIcon } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { OdsButton } from '@ovhcloud/ods-components/react';
 import { IdentityUser } from '@/types/identity.type';
 import { useIdentityData } from '@/hooks/credential/useIdentityData';
 
@@ -13,21 +12,17 @@ const IdentityUserDeleteActionCell = (user: IdentityUser) => {
   const { setUserList } = useIdentityData();
 
   return (
-    <OsdsButton
-      circle
+    <OdsButton
+      color={ODS_BUTTON_COLOR.primary}
       variant={ODS_BUTTON_VARIANT.ghost}
       onClick={() => {
         setUserList((prevUserList) =>
           prevUserList.filter((userInList) => userInList.urn !== user.urn),
         );
       }}
-    >
-      <OsdsIcon
-        name={ODS_ICON_NAME.TRASH}
-        size={ODS_ICON_SIZE.xs}
-        color={ODS_THEME_COLOR_INTENT.primary}
-      ></OsdsIcon>
-    </OsdsButton>
+      icon={ODS_ICON_NAME.trash}
+      label=""
+    />
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/user/IdentityUserStatusCell.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/user/IdentityUserStatusCell.component.tsx
index 3245a03ef87d..71c18a239432 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/user/IdentityUserStatusCell.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/cell/user/IdentityUserStatusCell.component.tsx
@@ -5,7 +5,7 @@ import IdentitiesStatusBadge from '../../badge/IdentitiesStatusBadge.component';
 const IdentityUserStatusCell = (user: IdentityUser) => {
   return (
     <span>
-      <IdentitiesStatusBadge status={user.status} inline />
+      <IdentitiesStatusBadge status={user.status} />
     </span>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesGroupList.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesGroupList.component.tsx
index c4d5beca970c..8f5ad58afe2b 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesGroupList.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesGroupList.component.tsx
@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
-import { OsdsSearchBar, OsdsDivider } from '@ovhcloud/ods-components/react';
+import { OdsInput } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { IdentityGroup } from '@/types/identity.type';
 import IdentitiesGroupTile from '../tile/IdentitiesGroupTile.component';
@@ -31,19 +31,16 @@ const IdentitiesGroupList = ({
 
   return (
     <>
-      <OsdsSearchBar
-        onOdsValueChange={(searchText) => {
-          return filterTerms(searchText.detail.value);
-        }}
-        onOdsSearchSubmit={(searchText) => {
-          return filterTerms(searchText.detail.inputValue);
-        }}
+      <OdsInput
+        className="mb-4 w-full"
+        name="search"
         placeholder={t(
           'key_management_service_credential_create_identities_group_list_search_placeholder',
         )}
+        onOdsChange={(event) => filterTerms(event.detail.value as string)}
+        type="search"
       />
-      <OsdsDivider />
-      <div className="flex flex-col gap-3">
+      <div className="grid gap-3 mb-4">
         {sortedFilteredGroups.map((group) => (
           <IdentitiesGroupTile
             group={group}
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesServiceAccountList.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesServiceAccountList.component.tsx
index 2c056d6c26fa..be3fda35e564 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesServiceAccountList.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesServiceAccountList.component.tsx
@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
-import { OsdsSearchBar, OsdsDivider } from '@ovhcloud/ods-components/react';
+import { OdsInput } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { IdentityOauthClient } from '@/types/identity.type';
 import IdentitiesServiceAccountTile from '../tile/IdentitiesServiceAccountTile.component';
@@ -36,19 +36,16 @@ const IdentitiesServiceAccountList = ({
   };
   return (
     <>
-      <OsdsSearchBar
-        onOdsValueChange={(searchText) => {
-          return filterTerms(searchText.detail.value);
-        }}
-        onOdsSearchSubmit={(searchText) => {
-          return filterTerms(searchText.detail.inputValue);
-        }}
+      <OdsInput
+        className="mb-4 w-full"
+        name="search"
         placeholder={t(
           'key_management_service_credential_create_identities_service-account_list_search_placeholder',
         )}
+        onOdsChange={(event) => filterTerms(event.detail.value as string)}
+        type="search"
       />
-      <OsdsDivider />
-      <div className="flex flex-col gap-3">
+      <div className="grid gap-3 mb-4">
         {sortedFilteredServiceAccount.map((serviceAccount) => (
           <IdentitiesServiceAccountTile
             serviceAccount={serviceAccount}
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesUserList.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesUserList.component.tsx
index 326c6a768c2c..a9d62132757f 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesUserList.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/list/IdentitiesUserList.component.tsx
@@ -1,9 +1,9 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
-import { OsdsSearchBar, OsdsDivider } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import IdentitiesUserTile from '../tile/IdentitiesUserTile.component';
 import { IdentityUser } from '@/types/identity.type';
 import identityListSortAndFilter from '@/utils/credential/identityListSortAndFilter';
+import { OdsInput } from '@ovhcloud/ods-components/react';
 
 type IdentitiesUserListProps = {
   userList: IdentityUser[];
@@ -32,23 +32,20 @@ const IdentitiesUserList = ({
 
   return (
     <>
-      <OsdsSearchBar
-        onOdsValueChange={(searchText) => {
-          return filterTerms(searchText.detail.value);
-        }}
-        onOdsSearchSubmit={(searchText) => {
-          return filterTerms(searchText.detail.inputValue);
-        }}
+      <OdsInput
+        className="mb-4 w-full"
+        name="search"
         placeholder={t(
           'key_management_service_credential_create_identities_user_list_search_placeholder',
         )}
+        onOdsChange={(event) => filterTerms(event.detail.value as string)}
+        type="search"
       />
-      <OsdsDivider />
-      <div className="flex flex-col gap-3">
+      <div className="grid gap-3 mb-4">
         {sortedFilteredUsers.map((user) => (
           <IdentitiesUserTile
-            user={user}
             key={user.urn}
+            user={user}
             selectedUserList={selectedUserList}
             setSelectedUserList={setSelectedUserList}
           />
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesBaseTile.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesBaseTile.component.tsx
index efe56bb99ac6..27e6c6d9a8fa 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesBaseTile.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesBaseTile.component.tsx
@@ -1,11 +1,7 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
-import {
-  OsdsCheckbox,
-  OsdsText,
-  OsdsTile,
-} from '@ovhcloud/ods-components/react';
 import React, { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ODS_CARD_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsCard, OdsText } from '@ovhcloud/ods-components/react';
+import { Subtitle } from '@ovh-ux/manager-react-components';
 
 type IdentitiesBaseTileProps = {
   title: string;
@@ -18,38 +14,22 @@ type IdentitiesBaseTileProps = {
 
 const IdentitiesBaseTile = ({
   title,
-  urn,
   updateCallback,
   isChecked,
   setIsChecked,
   children,
-}: IdentitiesBaseTileProps) => {
-  return (
-    <OsdsCheckbox
-      value={urn}
-      checked={isChecked}
-      onClick={() => {
-        setIsChecked(!isChecked);
-        updateCallback(!isChecked);
-      }}
-    >
-      <OsdsTile
-        hoverable
-        color={isChecked ? ODS_THEME_COLOR_INTENT.primary : undefined}
-      >
-        <div slot="start" className="flex flex-col gap-3">
-          <OsdsText
-            level={ODS_TEXT_LEVEL.subheading}
-            size={ODS_TEXT_SIZE._100}
-            color={ODS_THEME_COLOR_INTENT.text}
-          >
-            {title}
-          </OsdsText>
-          <div className="flex flex-col pl-3 gap-3">{children}</div>
-        </div>
-      </OsdsTile>
-    </OsdsCheckbox>
-  );
-};
+}: IdentitiesBaseTileProps) => (
+  <OdsCard
+    className="p-3 cursor-pointer"
+    color={isChecked ? ODS_CARD_COLOR.primary : ODS_CARD_COLOR.neutral}
+    onClick={() => {
+      setIsChecked(!isChecked);
+      updateCallback(!isChecked);
+    }}
+  >
+    <OdsText preset={ODS_TEXT_PRESET.heading5}>{title}</OdsText>
+    <div className="grid gap-1">{children}</div>
+  </OdsCard>
+);
 
 export default IdentitiesBaseTile;
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesGroupTile.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesGroupTile.component.tsx
index 89bc469562ed..63dee47c8557 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesGroupTile.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesGroupTile.component.tsx
@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
-import { ODS_TEXT_COLOR_INTENT } from '@ovhcloud/ods-components';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { IdentityGroup } from '@/types/identity.type';
 import IdentitiesBaseTile from './IdentitiesBaseTile.component';
 import IdentitiesTileText from './IdentitiesTileText.component';
@@ -43,24 +43,24 @@ const IdentitiesGroupTile = ({
       isChecked={isChecked}
       setIsChecked={setIsChecked}
     >
-      <span>
-        <OsdsText color={ODS_TEXT_COLOR_INTENT.text}>
+      <div>
+        <OdsText preset={ODS_TEXT_PRESET.caption}>
           {t(
             'key_management_service_credential_create_identities_group_tile_description_label',
           )}
           :
-        </OsdsText>
+        </OdsText>
         <IdentitiesTileText>{group.description}</IdentitiesTileText>
-      </span>
-      <span>
-        <OsdsText color={ODS_TEXT_COLOR_INTENT.text}>
+      </div>
+      <div>
+        <OdsText preset={ODS_TEXT_PRESET.caption}>
           {t(
             'key_management_service_credential_create_identities_group_tile_identity_label',
           )}
           :
-        </OsdsText>
+        </OdsText>
         <IdentitiesTileText>{group.urn}</IdentitiesTileText>
-      </span>
+      </div>
     </IdentitiesBaseTile>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesServiceAccountTile.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesServiceAccountTile.component.tsx
index 8d6d5f8cc303..5dc98d230f3a 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesServiceAccountTile.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesServiceAccountTile.component.tsx
@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
-import { ODS_TEXT_COLOR_INTENT } from '@ovhcloud/ods-components';
 import { IdentityOauthClient } from '@/types/identity.type';
 import IdentitiesBaseTile from './IdentitiesBaseTile.component';
 import IdentitiesTileText from './IdentitiesTileText.component';
@@ -56,24 +56,24 @@ const IdentitiesServiceAccountTile = ({
       isChecked={isChecked}
       setIsChecked={setIsChecked}
     >
-      <span>
-        <OsdsText color={ODS_TEXT_COLOR_INTENT.text}>
+      <div>
+        <OdsText preset={ODS_TEXT_PRESET.caption}>
           {t(
             'key_management_service_credential_create_identities_service-account_tile_description_label',
           )}
           :
-        </OsdsText>
+        </OdsText>
         <IdentitiesTileText>{serviceAccount.description}</IdentitiesTileText>
-      </span>
-      <span>
-        <OsdsText color={ODS_TEXT_COLOR_INTENT.text}>
+      </div>
+      <div>
+        <OdsText preset={ODS_TEXT_PRESET.caption}>
           {t(
             'key_management_service_credential_create_identities_service-account_tile_identity_label',
           )}
           :
-        </OsdsText>
+        </OdsText>
         <IdentitiesTileText>{serviceAccount.identity}</IdentitiesTileText>
-      </span>
+      </div>
     </IdentitiesBaseTile>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesTileText.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesTileText.component.tsx
index cc145b84cb9f..ad20d9322c4d 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesTileText.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesTileText.component.tsx
@@ -1,10 +1,6 @@
-import {
-  ODS_TEXT_COLOR_INTENT,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import { OsdsText } from '@ovhcloud/ods-components/react';
 import React, { ReactNode } from 'react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsText } from '@ovhcloud/ods-components/react';
 
 type IdentitiesTileTextProps = {
   children: ReactNode;
@@ -12,14 +8,9 @@ type IdentitiesTileTextProps = {
 
 const IdentitiesTileText = ({ children }: IdentitiesTileTextProps) => {
   return (
-    <OsdsText
-      color={ODS_TEXT_COLOR_INTENT.text}
-      level={ODS_TEXT_LEVEL.body}
-      size={ODS_TEXT_SIZE._200}
-      className="pl-3"
-    >
+    <OdsText preset={ODS_TEXT_PRESET.paragraph} className="pl-3">
       {children}
-    </OsdsText>
+    </OdsText>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesUserTile.component.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesUserTile.component.tsx
index e9bde0714934..e23db742d5d1 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesUserTile.component.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/create/identities/tile/IdentitiesUserTile.component.tsx
@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
-import { ODS_CHIP_SIZE, ODS_TEXT_COLOR_INTENT } from '@ovhcloud/ods-components';
+import { ODS_BADGE_SIZE, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { IdentityUser } from '@/types/identity.type';
 import IdentitiesTileText from './IdentitiesTileText.component';
 import IdentitiesBaseTile from './IdentitiesBaseTile.component';
@@ -45,40 +45,34 @@ const IdentitiesUserTile = ({
       isChecked={isChecked}
       setIsChecked={setIsChecked}
     >
-      <span>
-        <OsdsText color={ODS_TEXT_COLOR_INTENT.text}>
+      <div>
+        <OdsText preset={ODS_TEXT_PRESET.caption}>
           {t(
             'key_management_service_credential_create_identities_user_tile_email_label',
           )}
           :
-        </OsdsText>
+        </OdsText>
         <IdentitiesTileText>{user.email}</IdentitiesTileText>
-      </span>
-      <span>
-        <OsdsText color={ODS_TEXT_COLOR_INTENT.text}>
+      </div>
+      <div>
+        <OdsText preset={ODS_TEXT_PRESET.caption}>
           {t(
             'key_management_service_credential_create_identities_user_tile_group_label',
           )}
           :
-        </OsdsText>
+        </OdsText>
         <IdentitiesTileText>{user.group} </IdentitiesTileText>
-      </span>
-      <span>
-        <OsdsText color={ODS_TEXT_COLOR_INTENT.text}>
+      </div>
+      <div>
+        <OdsText preset={ODS_TEXT_PRESET.caption}>
           {t(
             'key_management_service_credential_create_identities_user_tile_identity_label',
           )}
           :
-        </OsdsText>
+        </OdsText>
         <IdentitiesTileText>{user.urn}</IdentitiesTileText>
-      </span>
-      <span>
-        <IdentitiesStatusBadge
-          status={user.status}
-          inline
-          size={ODS_CHIP_SIZE.sm}
-        />
-      </span>
+      </div>
+      <IdentitiesStatusBadge status={user.status} />
     </IdentitiesBaseTile>
   );
 };
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/delete/DeleteCredentialModal.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/delete/DeleteCredentialModal.page.tsx
index 1df785c2ba32..ffd8fcca81e8 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/delete/DeleteCredentialModal.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/delete/DeleteCredentialModal.page.tsx
@@ -43,6 +43,7 @@ const DeleteCredentialPage = () => {
 
   return (
     <DeleteModal
+      isOpen
       headline={t('key_management_service_credential_delete_modal_headline')}
       deleteInputLabel={t(
         'key_management_service_credential_delete_modal_input_label',
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/generalInformations.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/generalInformations.page.tsx
index 5ef8420a7c76..9bd9faab71d6 100644
--- a/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/generalInformations.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/credential/generalInformations/generalInformations.page.tsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useNavigate } from 'react-router-dom';
-import { OsdsButton } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
+import { OdsLink } from '@ovhcloud/ods-components/react';
+import {
+  ODS_BUTTON_SIZE,
+  ODS_BUTTON_VARIANT,
+  ODS_BUTTON_COLOR,
+  ODS_LINK_COLOR,
+  ODS_ICON_NAME,
+} from '@ovhcloud/ods-components';
 import {
   Clipboard,
   DashboardTile,
@@ -52,7 +57,7 @@ const CredentialGeneralInformations = () => {
     {
       id: 'id',
       label: t('key_management_service_credential_dashboard_id'),
-      value: <Clipboard value={credential.id} />,
+      value: <Clipboard className="w-full" value={credential.id} />,
     },
     {
       id: 'description',
@@ -62,7 +67,7 @@ const CredentialGeneralInformations = () => {
     {
       id: 'status',
       label: t('key_management_service_credential_dashboard_status'),
-      value: <CredentialStatus state={credential.status} inline />,
+      value: <CredentialStatus state={credential.status} />,
     },
     {
       id: 'creation',
@@ -85,13 +90,12 @@ const CredentialGeneralInformations = () => {
       id: 'actions',
       label: t('key_management_service_credential_dashboard_actions'),
       value: (
-        <div className="flex gap-4">
-          <OsdsButton
-            size={ODS_BUTTON_SIZE.sm}
-            color={ODS_THEME_COLOR_INTENT.primary}
+        <div className="flex items-center gap-4">
+          <OdsLink
+            color={ODS_LINK_COLOR.primary}
             href={href}
             download={filename}
-            disabled={isDisabled || undefined}
+            isDisabled={isDisabled}
             onClick={() =>
               trackClick({
                 location: PageLocation.page,
@@ -100,12 +104,13 @@ const CredentialGeneralInformations = () => {
                 actions: ['download_access_certificate'],
               })
             }
-          >
-            {t('key_management_service_credential_download')}
-          </OsdsButton>
+            label={t('key_management_service_credential_download')}
+            icon={ODS_ICON_NAME.download}
+          />
           <ManagerButton
+            id="deleteAccessCertificate"
             size={ODS_BUTTON_SIZE.sm}
-            color={ODS_THEME_COLOR_INTENT.error}
+            color={ODS_BUTTON_COLOR.critical}
             variant={ODS_BUTTON_VARIANT.ghost}
             iamActions={[kmsIamActions.credentialDelete]}
             onClick={() => {
@@ -118,9 +123,8 @@ const CredentialGeneralInformations = () => {
               navigate(ROUTES_URLS.credentialDelete);
             }}
             urn={okms.iam.urn}
-          >
-            {t('key_management_service_credential_delete')}
-          </ManagerButton>
+            label={t('key_management_service_credential_delete')}
+          />
         </div>
       ),
     },
@@ -133,7 +137,7 @@ const CredentialGeneralInformations = () => {
           'key_management_service_credential_dashboard_tile_general_informations',
         )}
         items={items}
-      ></DashboardTile>
+      />
       <Outlet />
     </div>
   );
diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx
index ca60f9670f2d..55cb7d1ffa4d 100644
--- a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/CredentialList.page.tsx
@@ -1,25 +1,23 @@
 import React, { useContext } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OsdsIcon } from '@ovhcloud/ods-components/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
 import {
-  Description,
   ManagerButton,
   useAuthorizationIam,
 } from '@ovh-ux/manager-react-components';
 import {
+  ODS_BUTTON_COLOR,
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
+  ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
 import {
   ButtonType,
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
-import Loading from '@/components/Loading/Loading';
 import CredentialDatagrid from '../../../components/credential/credentialDatagrid/CredentialDatagrid';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 import { OkmsContext } from '..';
@@ -36,19 +34,18 @@ const CredentialList = () => {
     okms.iam.urn,
   );
 
-  if (isLoadingIam) return <Loading />;
-
   return (
-    <div className={'flex flex-col gap-8 mt-8'}>
-      <Description>
+    <div className="flex flex-col gap-8 mt-8">
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
         {t('key_management_service_credential_headline')}
-      </Description>
+      </OdsText>
       <ManagerButton
+        id="createAccessCertificate"
+        isLoading={isLoadingIam}
         size={ODS_BUTTON_SIZE.sm}
-        inline
-        color={ODS_THEME_COLOR_INTENT.primary}
-        variant={ODS_BUTTON_VARIANT.stroked}
-        className={'w-fit'}
+        color={ODS_BUTTON_COLOR.primary}
+        variant={ODS_BUTTON_VARIANT.outline}
+        className="w-fit"
         onClick={() => {
           trackClick({
             location: PageLocation.page,
@@ -60,23 +57,17 @@ const CredentialList = () => {
         }}
         iamActions={[kmsIamActions.credentialCreate]}
         urn={okms.iam.urn}
-      >
-        <span slot="start">
-          <OsdsIcon
-            name={ODS_ICON_NAME.ADD}
-            size={ODS_ICON_SIZE.xs}
-            color={ODS_THEME_COLOR_INTENT.primary}
-          ></OsdsIcon>
-        </span>
-        {t('key_management_service_credential_cta_create')}
-      </ManagerButton>
-      {isAuthorized ? (
-        <CredentialDatagrid />
-      ) : (
-        <Description>
-          {t('key_management_service_credential_not_authorized')}
-        </Description>
-      )}
+        label={t('key_management_service_credential_cta_create')}
+        icon={ODS_ICON_NAME.plus}
+      />
+      {!isLoadingIam &&
+        (isAuthorized ? (
+          <CredentialDatagrid />
+        ) : (
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+            {t('key_management_service_credential_not_authorized')}
+          </OdsText>
+        ))}
       <Outlet />
     </div>
   );
diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/delete/DeleteCredentialModal.page.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/delete/DeleteCredentialModal.page.tsx
index 09e4fc818e9d..9156a4b91c1c 100644
--- a/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/delete/DeleteCredentialModal.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/dashboard/credentialList/delete/DeleteCredentialModal.page.tsx
@@ -42,6 +42,7 @@ const DeleteCredentialPage = () => {
 
   return (
     <DeleteModal
+      isOpen
       headline={t('key_management_service_credential_delete_modal_headline')}
       deleteInputLabel={t(
         'key_management_service_credential_delete_modal_input_label',
diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx
index 3f7e3329a5dd..f0004ef2cbb9 100644
--- a/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/GeneralInformations.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
-
 import { useNavigate, useParams } from 'react-router-dom';
-import { useServiceDetails } from '@ovh-ux/manager-react-components';
+import {
+  DashboardGridLayout,
+  useServiceDetails,
+} from '@ovh-ux/manager-react-components';
 import { useOKMSById } from '@/data/hooks/useOKMS';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 import InformationsTile from '@/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile';
@@ -31,13 +33,13 @@ function GeneralInformationsTab() {
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
+    <DashboardGridLayout>
       <InformationsTile
         okmsData={okms.data}
         okmsServiceInfos={okmsService.data}
       />
       <BillingInformationsTile okmsService={okmsService.data} />
-    </div>
+    </DashboardGridLayout>
   );
 }
 
diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/updateName/OkmsNameUpdateModal.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/updateName/OkmsNameUpdateModal.tsx
index 6b8f6df04750..06897510afec 100644
--- a/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/updateName/OkmsNameUpdateModal.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/dashboard/generalInformations/updateName/OkmsNameUpdateModal.tsx
@@ -26,6 +26,7 @@ const OkmsNameUpdateModal = () => {
 
   return (
     <UpdateNameModal
+      isOpen
       headline={tDashboard('key_management_service_dashboard_modal_title')}
       inputLabel={tCredential(
         'key_management_service_credential_dashboard_name',
@@ -36,10 +37,10 @@ const OkmsNameUpdateModal = () => {
       closeModal={() => {
         navigate('..');
       }}
-      updateDisplayName={(newDisplayName: string) => {
-        updateKmsName({ okms: okmsId, displayName: newDisplayName });
-      }}
-    ></UpdateNameModal>
+      updateDisplayName={(newDisplayName: string) =>
+        updateKmsName({ okms: okmsId, displayName: newDisplayName })
+      }
+    />
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx
index b98b684f651f..f084c5db8523 100644
--- a/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx
@@ -114,20 +114,22 @@ export default function DashboardPage() {
 
   return (
     <Suspense fallback={<Loading />}>
-      <BaseLayout
-        header={headerProps}
-        onClickReturn={() => {
-          navigate(ROUTES_URLS.root);
-        }}
-        backLinkLabel={tDashboard('key_management_service_dashboard_back_link')}
-        breadcrumb={<Breadcrumb items={breadcrumbItems} />}
-        message={<Notifications />}
-        tabs={<Dashboard tabs={tabsList} />}
-      >
-        <OkmsContext.Provider value={okms.data}>
+      <OkmsContext.Provider value={okms?.data}>
+        <BaseLayout
+          header={headerProps}
+          onClickReturn={() => {
+            navigate(ROUTES_URLS.root);
+          }}
+          backLinkLabel={tDashboard(
+            'key_management_service_dashboard_back_link',
+          )}
+          breadcrumb={<Breadcrumb items={breadcrumbItems} />}
+          message={<Notifications />}
+          tabs={<Dashboard tabs={tabsList} />}
+        >
           <Outlet />
-        </OkmsContext.Provider>
-      </BaseLayout>
+        </BaseLayout>
+      </OkmsContext.Provider>
     </Suspense>
   );
 }
diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx
index 7616dd5872c0..0a8350fdfd6f 100644
--- a/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/dashboard/serviceKeyList/ServiceKeyList.page.tsx
@@ -3,21 +3,21 @@ import { Outlet, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { queryClient } from '@ovh-ux/manager-react-core-application';
 import {
-  ODS_MESSAGE_TYPE,
+  ODS_MESSAGE_COLOR,
   ODS_BUTTON_SIZE,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
   ODS_BUTTON_VARIANT,
+  ODS_TEXT_PRESET,
+  ODS_BUTTON_ICON_ALIGNMENT,
+  ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
-import { OsdsMessage, OsdsIcon } from '@ovhcloud/ods-components/react';
+import { OdsMessage, OdsText } from '@ovhcloud/ods-components/react';
 import {
   Datagrid,
-  Description,
   ErrorBanner,
   ManagerButton,
   useDatagridSearchParams,
 } from '@ovh-ux/manager-react-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
   ButtonType,
   PageLocation,
@@ -103,20 +103,20 @@ export default function Keys() {
 
   return (
     <div className="flex flex-col gap-8">
-      <Description>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
         {t('key_management_service_service-keys_headline')}
-      </Description>
+      </OdsText>
       {error && (
-        <OsdsMessage className="mt-4" type={ODS_MESSAGE_TYPE.error}>
+        <OdsMessage className="mt-4" color={ODS_MESSAGE_COLOR.critical}>
           {tError('manager_error_page_default')}
-        </OsdsMessage>
+        </OdsMessage>
       )}
       <div>
         <ManagerButton
+          id="createEncryptionKey"
           size={ODS_BUTTON_SIZE.sm}
-          inline
-          color={ODS_THEME_COLOR_INTENT.primary}
-          variant={ODS_BUTTON_VARIANT.stroked}
+          color={ODS_BUTTON_COLOR.primary}
+          variant={ODS_BUTTON_VARIANT.outline}
           onClick={() => {
             trackClick({
               location: PageLocation.page,
@@ -128,17 +128,10 @@ export default function Keys() {
           }}
           urn={okms.iam.urn}
           iamActions={[kmsIamActions.serviceKeyCreate]}
-        >
-          <span slot="start">
-            <OsdsIcon
-              name={ODS_ICON_NAME.ADD}
-              size={ODS_ICON_SIZE.xs}
-              color={ODS_THEME_COLOR_INTENT.primary}
-            ></OsdsIcon>
-          </span>
-
-          {t('key_management_service_service-keys_cta_create')}
-        </ManagerButton>
+          label={t('key_management_service_service-keys_cta_create')}
+          icon={ODS_ICON_NAME.plus}
+          iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.left}
+        />
       </div>
       <Datagrid
         columns={columns}
diff --git a/packages/manager/apps/key-management-service/src/pages/listing/index.tsx b/packages/manager/apps/key-management-service/src/pages/listing/index.tsx
index 74d44a53bdc8..36044e0adf28 100644
--- a/packages/manager/apps/key-management-service/src/pages/listing/index.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/listing/index.tsx
@@ -2,16 +2,15 @@ import React, { useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
-  ODS_MESSAGE_TYPE,
+  ODS_MESSAGE_COLOR,
   ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
+  ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
-import { OsdsButton, OsdsMessage } from '@ovhcloud/ods-components/react';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { OdsButton, OdsMessage } from '@ovhcloud/ods-components/react';
 import {
   BaseLayout,
   Datagrid,
-  HeadersProps,
   Notifications,
   RedirectionGuard,
   useNotifications,
@@ -24,7 +23,6 @@ import {
 import { useOKMSList } from '@/data/hooks/useOKMS';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 import {
-  DatagridActionMenu,
   DatagridCellId,
   DatagridCellName,
   DatagridCellRegion,
@@ -33,6 +31,7 @@ import {
 import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader';
 import { useAutoRefetch } from '@/data/hooks/useAutoRefetch';
 import { getOkmsServicesResourceListQueryKey } from '@/data/api/okms';
+import KmsActionMenu from '@/components/menu/KmsActionMenu.component';
 
 export default function Listing() {
   const { t } = useTranslation('key-management-service/listing');
@@ -68,7 +67,7 @@ export default function Listing() {
     },
     {
       id: 'action',
-      cell: DatagridActionMenu,
+      cell: KmsActionMenu,
       isSortable: false,
       label: '',
     },
@@ -92,11 +91,6 @@ export default function Listing() {
     onFinish: () => setIsRefetchEnabled(false),
   });
 
-  const headerProps: HeadersProps = {
-    title: t('key_management_service_listing_title'),
-    headerButton: <KmsGuidesHeader />,
-  };
-
   return (
     <RedirectionGuard
       isLoading={isLoading || !flattenData}
@@ -108,18 +102,24 @@ export default function Listing() {
       route={ROUTES_URLS.onboarding}
       isError={isError}
       errorComponent={
-        <OsdsMessage className="mt-4" type={ODS_MESSAGE_TYPE.error}>
+        <OdsMessage className="mt-4" color={ODS_MESSAGE_COLOR.critical}>
           {tError('manager_error_page_default')}
-        </OsdsMessage>
+        </OdsMessage>
       }
     >
-      <BaseLayout header={headerProps} message={<Notifications />}>
-        <div className={'flex mb-3 mt-6'}>
-          <OsdsButton
+      <BaseLayout
+        header={{
+          title: t('key_management_service_listing_title'),
+          headerButton: <KmsGuidesHeader />,
+        }}
+        message={<Notifications />}
+      >
+        <div className="flex mb-3 mt-6">
+          <OdsButton
             className="mr-1"
             size={ODS_BUTTON_SIZE.sm}
-            variant={ODS_BUTTON_VARIANT.stroked}
-            color={ODS_THEME_COLOR_INTENT.primary}
+            variant={ODS_BUTTON_VARIANT.outline}
+            color={ODS_BUTTON_COLOR.primary}
             onClick={() => {
               clearNotifications();
               trackClick({
@@ -130,12 +130,11 @@ export default function Listing() {
               });
               navigate(ROUTES_URLS.createKeyManagementService);
             }}
-          >
-            {t('key_management_service_listing_add_kms_button')}
-          </OsdsButton>
+            label={t('key_management_service_listing_add_kms_button')}
+          />
         </div>
         {flattenData && (
-          <div className={'mt-8'}>
+          <div className="mt-8">
             <Datagrid
               columns={columns}
               items={flattenData}
diff --git a/packages/manager/apps/key-management-service/src/pages/listing/terminate/TerminateKms.tsx b/packages/manager/apps/key-management-service/src/pages/listing/terminate/TerminateKms.tsx
index 89b6c6c7fcbf..5034287020d0 100644
--- a/packages/manager/apps/key-management-service/src/pages/listing/terminate/TerminateKms.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/listing/terminate/TerminateKms.tsx
@@ -40,6 +40,7 @@ export default function TerminateKms() {
 
   return (
     <DeleteModal
+      isOpen
       headline={t('key_management_service_terminate_heading')}
       closeModal={() => {
         trackClick({
diff --git a/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx b/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx
index ebf84b9f71ae..06c941ecd66f 100644
--- a/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx
@@ -5,12 +5,8 @@ import {
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
-import {
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-  ODS_TEXT_COLOR_INTENT,
-} from '@ovhcloud/ods-components';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsText } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import useGuideUtils from '@/hooks/guide/useGuideUtils';
@@ -29,15 +25,13 @@ export default function Onboarding() {
       title={t('title')}
       img={{ src: onboardingImgSrc }}
       description={descriptionsKeys.map((descKey) => (
-        <OsdsText
-          level={ODS_TEXT_LEVEL.body}
-          size={ODS_TEXT_SIZE._800}
-          color={ODS_TEXT_COLOR_INTENT.text}
-          className="block text-center mb-4"
+        <OdsText
           key={descKey}
+          className="block text-center mb-4"
+          preset={ODS_TEXT_PRESET.paragraph}
         >
           {t(descKey)}
-        </OsdsText>
+        </OdsText>
       ))}
       orderButtonLabel={t('orderButtonLabel')}
       onOrderButtonClick={() => {
@@ -51,6 +45,6 @@ export default function Onboarding() {
       }}
       moreInfoButtonLabel={t('moreInfoButtonLabel')}
       moreInfoHref={guideLinks?.quickStart}
-    ></OnboardingLayout>
+    />
   );
 }
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/CreateKey.page.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/CreateKey.page.tsx
index 375b925d5008..e2d30fc25dc6 100644
--- a/packages/manager/apps/key-management-service/src/pages/serviceKey/CreateKey.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/CreateKey.page.tsx
@@ -1,36 +1,15 @@
-import React, { Suspense, useContext, useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import {
   BaseLayout,
-  CommonTitle,
-  Description,
   ErrorBanner,
-  IntervalUnitType,
   Notifications,
-  OvhSubsidiary,
-  Price,
-  Subtitle,
 } 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_INPUT_TYPE,
-  OdsCheckboxCheckedChangeEventDetail,
-  OdsInputValueChangeEventDetail,
-  OsdsCheckboxCustomEvent,
-  OsdsInputCustomEvent,
 } from '@ovhcloud/ods-components';
-import {
-  OsdsButton,
-  OsdsCheckbox,
-  OsdsFormField,
-  OsdsInput,
-  OsdsRadio,
-  OsdsRadioGroup,
-  OsdsSelect,
-  OsdsSelectOption,
-  OsdsTile,
-} from '@ovhcloud/ods-components/react';
+import { OdsButton } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useNavigate, useParams } from 'react-router-dom';
 import {
@@ -38,7 +17,6 @@ import {
   PageLocation,
   PageType,
   useOvhTracking,
-  ShellContext,
 } from '@ovh-ux/manager-react-shell-client';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 import { OkmsServiceKeyReference } from '@/types/okmsServiceKeyReference.type';
@@ -49,28 +27,23 @@ import {
   OkmsServiceKeyTypeOctSize,
   OkmsServiceKeyTypeRSASize,
 } from '@/types/okmsServiceKey.type';
-import {
-  ServiceKeyNameErrorsType,
-  validateServiceKeyName,
-} from '@/utils/serviceKey/validateServiceKeyName';
+import { ServiceKeyNameErrorsType } from '@/utils/serviceKey/validateServiceKeyName';
 import { useOkmsServiceKeyReference } from '@/data/hooks/useOkmsReferenceServiceKey';
 import { useCreateOkmsServiceKey } from '@/data/hooks/useCreateOkmsServiceKey';
 import { useOKMSById } from '@/data/hooks/useOKMS';
 import { BreadcrumbItem } from '@/hooks/breadcrumb/useBreadcrumb';
-import { ServiceKeyOperationCheckbox } from '@/components/serviceKey/create/serviceKeyOperationCheckbox';
-import { ServiceKeyTypeRadioButton } from '@/components/serviceKey/create/serviceKeyTypeRadioButton';
 import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader';
 import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
 import Loading from '@/components/Loading/Loading';
-import { KEY_SOFTWARE_PROTECTION_PRICE } from './CreateKey.constants';
+import { ProtectionLevelSection } from './ProtectionLevelSection.component';
+import { GeneralInformationSection } from './GeneralInformationSection.component';
+import { KeyTypeSection } from './KeyTypeSection.component';
+import { KeyUsageSection } from './KeyUsageSection.component';
 
 export default function CreateKey() {
   const { okmsId } = useParams();
   const navigate = useNavigate();
   const { t } = useTranslation('key-management-service/serviceKeys');
-  const { environment } = useContext(ShellContext);
-  const { ovhSubsidiary } = environment.getUser();
-  const userLocale = environment.getUserLocale();
 
   const {
     data: okms,
@@ -89,14 +62,16 @@ export default function CreateKey() {
   const [key, setKey] = useState<OkmsServiceKeyReference>();
   const [keyType, setKeyType] = useState<OkmsKeyTypes>();
   const [keySize, setKeySize] = useState<
-    OkmsServiceKeyTypeOctSize & OkmsServiceKeyTypeRSASize
+    OkmsServiceKeyTypeOctSize | OkmsServiceKeyTypeRSASize
   >();
   const [keyCurve, setKeyCurve] = useState<OkmsServiceKeyTypeECCurve>();
   const [keyOperations, setKeyOperations] = useState<
     OkmsServiceKeyOperations[][]
   >();
-  const [keyDisplayName, setKeyDisplayName] = useState<string>('');
-  const serviceKeyNameError = validateServiceKeyName(keyDisplayName);
+  const [keyDisplayName, setKeyDisplayName] = useState<string>(null);
+  const [serviceKeyNameError, setServiceKeyNameError] = useState<
+    ServiceKeyNameErrorsType
+  >(null);
   const { trackClick, trackPage } = useOvhTracking();
   const { createKmsServiceKey, isPending } = useCreateOkmsServiceKey({
     okmsId,
@@ -115,40 +90,6 @@ export default function CreateKey() {
     },
   });
 
-  const getErrorMessage = (error: ServiceKeyNameErrorsType) => {
-    switch (error) {
-      case 'REQUIRED':
-        return t(
-          'key_management_service_service-keys_update_name_error_required',
-        );
-      case 'INVALID_CHARACTERS':
-        return t(
-          'key_management_service_service-keys_update_name_error_invalid_characters',
-        );
-      case 'TOO_MANY_CHARACTERS':
-        return t('key_management_service_service-keys_update_name_error_max');
-
-      default:
-        return null;
-    }
-  };
-
-  const selectKeyType = (reference: OkmsServiceKeyReference) => {
-    setKey(reference);
-    setKeyType(reference.type);
-  };
-
-  const submitCreateKey = () => {
-    createKmsServiceKey({
-      name: keyDisplayName,
-      context: keyDisplayName,
-      curve: keyCurve,
-      size: keySize,
-      operations: keyOperations.flat(),
-      type: keyType,
-    });
-  };
-
   useEffect(() => {
     if (okms && !okmsIsLoading && !servicekeyReference) {
       refetchServiceKeyReference();
@@ -166,26 +107,6 @@ export default function CreateKey() {
     }
   }, [servicekeyReference, serviceKeyReferenceIsLoading]);
 
-  useEffect(() => {
-    key?.sizes.forEach((size) => {
-      if (size.default) {
-        setKeySize(size.value);
-        setKeyCurve(null);
-      }
-    });
-    key?.curves.forEach((curve) => {
-      if (curve.default) {
-        setKeyCurve(curve.value);
-        setKeySize(null);
-      }
-    });
-    key?.operations.forEach((operation) => {
-      if (operation.default) {
-        setKeyOperations([operation.value]);
-      }
-    });
-  }, [key]);
-
   const breadcrumbItems: BreadcrumbItem[] = [
     {
       id: okmsId,
@@ -237,294 +158,40 @@ export default function CreateKey() {
           description: t('key_management_service_service-keys_create_subtitle'),
           headerButton: <KmsGuidesHeader />,
         }}
+        message={<Notifications />}
       >
         <div className="w-full block">
-          <div className="mb-6">
-            <Notifications />
-          </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
             <div className="flex flex-col gap-7 md:gap-9">
-              <div className="flex flex-col gap-6 md:gap-8">
-                <Subtitle>
-                  {t(
-                    'key_management_service_service-keys_create_protection_level_title',
-                  )}
-                </Subtitle>
-                <Description>
-                  {t(
-                    'key_management_service_service-keys_create_protection_level_subtitle',
-                  )}
-                </Description>
-                <OsdsTile
-                  rounded
-                  inline
-                  color={ODS_THEME_COLOR_INTENT.info}
-                  className="flex flex-col w-full h-fit"
-                >
-                  <div className="flex flex-col gap-6 pb-4 justify-center align-middle text-center">
-                    <CommonTitle>
-                      {t(
-                        'key_management_service_service-keys_create_software_protection_title',
-                      )}
-                    </CommonTitle>
-                    <Description>
-                      {t(
-                        'key_management_service_service-keys_create_software_protection_subtitle',
-                      )}
-                    </Description>
-                    <Price
-                      value={KEY_SOFTWARE_PROTECTION_PRICE}
-                      ovhSubsidiary={
-                        OvhSubsidiary[
-                          ovhSubsidiary as keyof typeof OvhSubsidiary
-                        ]
-                      }
-                      locale={userLocale}
-                      intervalUnit={IntervalUnitType.month}
-                    ></Price>
-                  </div>
-                </OsdsTile>
-              </div>
-              <div className="flex flex-col gap-6 md:gap-8">
-                <Subtitle>
-                  {t(
-                    'key_management_service_service-keys_create_general_information_title',
-                  )}
-                </Subtitle>
-                <div className="flex flex-col gap-5 md:gap-6">
-                  <CommonTitle>
-                    {t(
-                      'key_management_service_service-keys_create_general_information_field_name_title',
-                    )}
-                  </CommonTitle>
-                  <Description>
-                    {t(
-                      'key_management_service_service-keys_create_general_information_field_name_subtitle',
-                    )}
-                  </Description>
-                  <OsdsFormField error={getErrorMessage(serviceKeyNameError)}>
-                    <OsdsInput
-                      aria-label="input-service-key-name"
-                      type={ODS_INPUT_TYPE.text}
-                      error={!!serviceKeyNameError}
-                      required
-                      className="p-3"
-                      placeholder={t(
-                        'key_management_service_service-keys_create_general_information_field_name_placeholder',
-                      )}
-                      value={keyDisplayName}
-                      onOdsValueChange={(
-                        e: OsdsInputCustomEvent<OdsInputValueChangeEventDetail>,
-                      ) => {
-                        setKeyDisplayName(e.detail.value);
-                      }}
-                    />
-                  </OsdsFormField>
-                </div>
-              </div>
-              <div className="flex flex-col gap-6 md:gap-8">
-                <Subtitle>
-                  {t('key_management_service_service-keys_create_crypto_title')}
-                </Subtitle>
-                <div className="flex flex-col gap-5 md:gap-6">
-                  <CommonTitle>
-                    {t(
-                      'key_management_service_service-keys_create_crypto_origin_title',
-                    )}
-                  </CommonTitle>
-                  <Description>
-                    {t(
-                      'key_management_service_service-keys_create_crypto_origin_subtitle',
-                    )}
-                  </Description>
-                </div>
-                <div className="flex flex-col gap-5 md:gap-6">
-                  <CommonTitle>
-                    {t(
-                      'key_management_service_service-keys_create_crypto_field_type_title',
-                    )}
-                  </CommonTitle>
-                  <Description>
-                    {t(
-                      'key_management_service_service-keys_create_crypto_field_type_subtitle',
-                    )}
-                  </Description>
-                  <OsdsRadioGroup
-                    value={keyType}
-                    className="flex flex-col gap-6"
-                  >
-                    {servicekeyReference?.data.map((reference) => {
-                      return (
-                        <OsdsRadio
-                          id={reference.type.toString()}
-                          value={reference.type.toString()}
-                          key={reference.type.toString()}
-                          checked={key?.type === reference.type}
-                        >
-                          <ServiceKeyTypeRadioButton
-                            type={reference.type}
-                            onClick={() => {
-                              trackClick({
-                                location: PageLocation.funnel,
-                                buttonType: ButtonType.button,
-                                actionType: 'action',
-                                actions: ['select_type_key', reference.type],
-                              });
-                              selectKeyType(reference);
-                            }}
-                          />
-                        </OsdsRadio>
-                      );
-                    })}
-                  </OsdsRadioGroup>
-                </div>
-                {key?.type === OkmsKeyTypes.EC && (
-                  <div className="flex flex-col gap-5 md:gap-6">
-                    <CommonTitle>
-                      {t(
-                        'key_management_service_service-keys_create_crypto_field_curve_title',
-                      )}
-                    </CommonTitle>
-                    <Description>
-                      {t(
-                        'key_management_service_service-keys_create_crypto_field_curve_subtitle',
-                      )}
-                    </Description>
-                    <OsdsSelect
-                      value={keyCurve}
-                      onOdsValueChange={(event) => {
-                        setKeyCurve(
-                          event.detail.value as OkmsServiceKeyTypeECCurve,
-                        );
-                      }}
-                    >
-                      {key?.curves.map((curve) => {
-                        return (
-                          <OsdsSelectOption
-                            key={curve.value}
-                            value={curve.value}
-                          >
-                            {curve.value}{' '}
-                            {curve.default &&
-                              t(
-                                'key_management_service_service-keys_create_crypto_field_size_curve_suffix_default',
-                              )}
-                          </OsdsSelectOption>
-                        );
-                      })}
-                    </OsdsSelect>
-                  </div>
-                )}
-                {(key?.type === OkmsKeyTypes.oct ||
-                  key?.type === OkmsKeyTypes.RSA) && (
-                  <div className="flex flex-col gap-5 md:gap-6">
-                    <CommonTitle>
-                      {t(
-                        'key_management_service_service-keys_create_crypto_field_size_title',
-                      )}
-                    </CommonTitle>
-                    <Description>
-                      {t(
-                        'key_management_service_service-keys_create_crypto_field_size_subtitle',
-                      )}
-                    </Description>
-
-                    <OsdsSelect
-                      value={keySize}
-                      onOdsValueChange={(event) => {
-                        setKeySize(
-                          event.detail.value as OkmsServiceKeyTypeOctSize &
-                            OkmsServiceKeyTypeRSASize,
-                        );
-                      }}
-                    >
-                      {key?.sizes.map((size) => {
-                        return (
-                          <OsdsSelectOption key={size.value} value={size.value}>
-                            {t(
-                              'key_management_service_service-keys_create_crypto_field_size_unit',
-                              { size: size.value },
-                            )}{' '}
-                            {size.default &&
-                              t(
-                                'key_management_service_service-keys_create_crypto_field_size_curve_suffix_default',
-                              )}
-                          </OsdsSelectOption>
-                        );
-                      })}
-                    </OsdsSelect>
-                  </div>
-                )}
-                <div className="flex flex-col gap-5 md:gap-6">
-                  <CommonTitle>
-                    {t(
-                      'key_management_service_service-keys_create_crypto_field_usage_title',
-                    )}
-                  </CommonTitle>
-                  <Description>
-                    {t(
-                      'key_management_service_service-keys_create_crypto_field_usage_subtitle',
-                    )}
-                  </Description>
-                  {key?.operations.map((operation) => {
-                    return (
-                      <OsdsCheckbox
-                        key={operation.value[0]}
-                        checked={keyOperations?.includes(operation.value)}
-                        disabled={
-                          keyType === OkmsKeyTypes.EC ||
-                          keyType === OkmsKeyTypes.RSA
-                        }
-                        onOdsCheckedChange={(
-                          event: OsdsCheckboxCustomEvent<
-                            OdsCheckboxCheckedChangeEventDetail
-                          >,
-                        ) => {
-                          trackPage({
-                            pageType: PageType.bannerSuccess,
-                            pageName: 'deactivate_encryption_key',
-                          });
-                          let newOperations: OkmsServiceKeyOperations[][];
-
-                          if (event.detail.checked) {
-                            setKeyOperations((prev) => {
-                              newOperations = [...prev, operation.value];
-                              return newOperations;
-                            });
-                          } else {
-                            const operationIndex = keyOperations.indexOf(
-                              operation.value,
-                            );
-
-                            newOperations = [...keyOperations];
-                            newOperations.splice(operationIndex, 1);
-
-                            setKeyOperations(newOperations);
-                          }
-
-                          trackClick({
-                            location: PageLocation.funnel,
-                            buttonType: ButtonType.button,
-                            actionType: 'action',
-                            actions: [
-                              'select_use_key',
-                              newOperations.flat().join('_'),
-                            ],
-                          });
-                        }}
-                      >
-                        <ServiceKeyOperationCheckbox operation={operation} />
-                      </OsdsCheckbox>
-                    );
-                  })}
-                </div>
-              </div>
+              <ProtectionLevelSection />
+              <GeneralInformationSection
+                keyDisplayName={keyDisplayName}
+                setKeyDisplayName={setKeyDisplayName}
+                serviceKeyNameError={serviceKeyNameError}
+                setServiceKeyNameError={setServiceKeyNameError}
+              />
+              <KeyTypeSection
+                serviceKey={key}
+                keyCurve={keyCurve}
+                keySize={keySize}
+                keyType={keyType}
+                region={okms?.data?.region}
+                setServiceKey={setKey}
+                setKeyCurve={setKeyCurve}
+                setKeySize={setKeySize}
+                setKeyType={setKeyType}
+              />
+              <KeyUsageSection
+                serviceKey={key}
+                keyOperations={keyOperations}
+                setKeyOperations={setKeyOperations}
+                keyType={keyType}
+              />
               <div className="flex gap-4">
-                <OsdsButton
+                <OdsButton
                   size={ODS_BUTTON_SIZE.md}
-                  inline
-                  variant={ODS_BUTTON_VARIANT.stroked}
-                  color={ODS_THEME_COLOR_INTENT.primary}
+                  variant={ODS_BUTTON_VARIANT.outline}
+                  color={ODS_BUTTON_COLOR.primary}
                   onClick={() => {
                     trackClick({
                       location: PageLocation.funnel,
@@ -534,13 +201,13 @@ export default function CreateKey() {
                     });
                     navigate(`/${okmsId}/${ROUTES_URLS.keys}`);
                   }}
-                >
-                  {t('key_management_service_service-keys_create_cta_cancel')}
-                </OsdsButton>
-                <OsdsButton
+                  label={t(
+                    'key_management_service_service-keys_create_cta_cancel',
+                  )}
+                />
+                <OdsButton
                   size={ODS_BUTTON_SIZE.md}
-                  inline
-                  color={ODS_THEME_COLOR_INTENT.primary}
+                  color={ODS_BUTTON_COLOR.primary}
                   onClick={() => {
                     trackClick({
                       location: PageLocation.funnel,
@@ -548,17 +215,29 @@ export default function CreateKey() {
                       actionType: 'action',
                       actions: ['confirm'],
                     });
-                    submitCreateKey();
+                    createKmsServiceKey({
+                      name: keyDisplayName,
+                      context: keyDisplayName,
+                      curve: keyCurve,
+                      size: keySize
+                        ? (Number(keySize) as
+                            | OkmsServiceKeyTypeOctSize
+                            | OkmsServiceKeyTypeRSASize)
+                        : null,
+                      operations: keyOperations.flat(),
+                      type: keyType,
+                    });
                   }}
-                  disabled={
+                  isLoading={isPending}
+                  isDisabled={
+                    !keyDisplayName ||
                     !!serviceKeyNameError ||
-                    keyOperations.length === 0 ||
-                    isPending ||
-                    undefined
+                    keyOperations?.length === 0
                   }
-                >
-                  {t('key_management_service_service-keys_create_cta_submit')}
-                </OsdsButton>
+                  label={t(
+                    'key_management_service_service-keys_create_cta_submit',
+                  )}
+                />
               </div>
             </div>
           </div>
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/GeneralInformationSection.component.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/GeneralInformationSection.component.tsx
new file mode 100644
index 000000000000..94d6cae94dc6
--- /dev/null
+++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/GeneralInformationSection.component.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Subtitle } from '@ovh-ux/manager-react-components';
+import { ODS_INPUT_TYPE, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import {
+  OdsFormField,
+  OdsInput,
+  OdsText,
+} from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import {
+  ServiceKeyNameErrorsType,
+  validateServiceKeyName,
+} from '@/utils/serviceKey/validateServiceKeyName';
+
+export type GeneralInformationSectionProps = {
+  serviceKeyNameError?: ServiceKeyNameErrorsType;
+  setServiceKeyNameError?: React.Dispatch<
+    React.SetStateAction<ServiceKeyNameErrorsType>
+  >;
+  keyDisplayName: string;
+  setKeyDisplayName: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export const GeneralInformationSection: React.FC<GeneralInformationSectionProps> = ({
+  serviceKeyNameError,
+  setServiceKeyNameError,
+  keyDisplayName,
+  setKeyDisplayName,
+}) => {
+  const { t } = useTranslation('key-management-service/serviceKeys');
+
+  const getErrorMessage = (error: ServiceKeyNameErrorsType) => {
+    switch (error) {
+      case 'REQUIRED':
+        return t(
+          'key_management_service_service-keys_update_name_error_required',
+        );
+      case 'INVALID_CHARACTERS':
+        return t(
+          'key_management_service_service-keys_update_name_error_invalid_characters',
+        );
+      case 'TOO_MANY_CHARACTERS':
+        return t('key_management_service_service-keys_update_name_error_max');
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="grid gap-6 md:gap-8">
+      <Subtitle>
+        {t(
+          'key_management_service_service-keys_create_general_information_title',
+        )}
+      </Subtitle>
+      <div className="grid gap-5 md:gap-6">
+        <OdsFormField error={getErrorMessage(serviceKeyNameError)}>
+          <div slot="label">
+            <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+              {t(
+                'key_management_service_service-keys_create_general_information_field_name_title',
+              )}
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+              {t(
+                'key_management_service_service-keys_create_general_information_field_name_subtitle',
+              )}
+            </OdsText>
+          </div>
+          <OdsInput
+            name="input-service-key-name"
+            aria-label="input-service-key-name"
+            type={ODS_INPUT_TYPE.text}
+            hasError={!!serviceKeyNameError}
+            isRequired
+            placeholder={t(
+              'key_management_service_service-keys_create_general_information_field_name_placeholder',
+            )}
+            value={keyDisplayName}
+            onOdsChange={(e) => {
+              const newServiceKeyName = e.detail.value as string;
+              setServiceKeyNameError(validateServiceKeyName(newServiceKeyName));
+              setKeyDisplayName(newServiceKeyName);
+            }}
+          />
+        </OdsFormField>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/KeyTypeSection.component.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/KeyTypeSection.component.tsx
new file mode 100644
index 000000000000..6526eebc3978
--- /dev/null
+++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/KeyTypeSection.component.tsx
@@ -0,0 +1,199 @@
+import React from 'react';
+import { Subtitle } from '@ovh-ux/manager-react-components';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import {
+  OdsFormField,
+  OdsSelect,
+  OdsText,
+} from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
+import { OkmsServiceKeyReference } from '@/types/okmsServiceKeyReference.type';
+import {
+  OkmsKeyTypes,
+  OkmsServiceKeyTypeECCurve,
+  OkmsServiceKeyTypeOctSize,
+  OkmsServiceKeyTypeRSASize,
+} from '@/types/okmsServiceKey.type';
+import { useOkmsServiceKeyReference } from '@/data/hooks/useOkmsReferenceServiceKey';
+import { ServiceKeyTypeRadioButton } from '@/components/serviceKey/create/serviceKeyTypeRadioButton';
+
+export type KeyTypeSectionProps = {
+  region: string;
+  serviceKey: OkmsServiceKeyReference;
+  setServiceKey: React.Dispatch<React.SetStateAction<OkmsServiceKeyReference>>;
+  keyType: OkmsKeyTypes;
+  setKeyType: React.Dispatch<React.SetStateAction<OkmsKeyTypes>>;
+  keySize: OkmsServiceKeyTypeOctSize | OkmsServiceKeyTypeRSASize;
+  setKeySize: React.Dispatch<
+    React.SetStateAction<OkmsServiceKeyTypeOctSize | OkmsServiceKeyTypeRSASize>
+  >;
+  keyCurve: OkmsServiceKeyTypeECCurve;
+  setKeyCurve: React.Dispatch<React.SetStateAction<OkmsServiceKeyTypeECCurve>>;
+};
+
+export const KeyTypeSection: React.FC<KeyTypeSectionProps> = ({
+  region,
+  serviceKey,
+  setServiceKey,
+  keyType,
+  setKeyType,
+  keyCurve,
+  setKeyCurve,
+  keySize,
+  setKeySize,
+}) => {
+  const { t } = useTranslation('key-management-service/serviceKeys');
+  const { data: servicekeyReference } = useOkmsServiceKeyReference(region);
+  const { trackClick } = useOvhTracking();
+
+  React.useEffect(() => {
+    serviceKey?.sizes.forEach((size) => {
+      if (size.default) {
+        setKeySize(size.value);
+        setKeyCurve(null);
+      }
+    });
+    serviceKey?.curves.forEach((curve) => {
+      if (curve.default) {
+        setKeyCurve(curve.value);
+        setKeySize(null);
+      }
+    });
+  }, [serviceKey]);
+
+  return (
+    <>
+      <div className="flex flex-col gap-6 md:gap-8">
+        <Subtitle>
+          {t('key_management_service_service-keys_create_crypto_title')}
+        </Subtitle>
+        <OdsFormField>
+          <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+            {t(
+              'key_management_service_service-keys_create_crypto_origin_title',
+            )}
+          </OdsText>
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+            {t(
+              'key_management_service_service-keys_create_crypto_origin_subtitle',
+            )}
+          </OdsText>
+        </OdsFormField>
+        <OdsFormField>
+          <div slot="label">
+            <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+              {t(
+                'key_management_service_service-keys_create_crypto_field_type_title',
+              )}
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+              {t(
+                'key_management_service_service-keys_create_crypto_field_type_subtitle',
+              )}
+            </OdsText>
+          </div>
+          <div className="grid gap-3">
+            {servicekeyReference?.data.map((reference) => (
+              <ServiceKeyTypeRadioButton
+                key={reference.type.toString()}
+                type={reference.type}
+                value={reference.type.toString()}
+                name={keyType}
+                isChecked={serviceKey?.type === reference.type}
+                onClick={() => {
+                  trackClick({
+                    location: PageLocation.funnel,
+                    buttonType: ButtonType.button,
+                    actionType: 'action',
+                    actions: ['select_type_key', reference.type],
+                  });
+                  setServiceKey(reference);
+                  setKeyType(reference.type);
+                }}
+              />
+            ))}
+          </div>
+        </OdsFormField>
+      </div>
+      {[OkmsKeyTypes.oct, OkmsKeyTypes.RSA].includes(serviceKey?.type) && (
+        <OdsFormField key={serviceKey.type}>
+          <div slot="label">
+            <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+              {t(
+                'key_management_service_service-keys_create_crypto_field_size_title',
+              )}
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+              {t(
+                'key_management_service_service-keys_create_crypto_field_size_subtitle',
+              )}
+            </OdsText>
+          </div>
+          <OdsSelect
+            name="keySize"
+            value={keySize?.toString()}
+            onOdsChange={(event) => {
+              const newKeySize = (event.detail.value as unknown) as
+                | OkmsServiceKeyTypeOctSize
+                | OkmsServiceKeyTypeRSASize;
+              if (newKeySize) setKeySize(newKeySize);
+            }}
+          >
+            {serviceKey?.sizes.map((size) => (
+              <option key={size.value} value={size.value}>
+                {t(
+                  'key_management_service_service-keys_create_crypto_field_size_unit',
+                  { size: size.value },
+                )}{' '}
+                {size.default &&
+                  t(
+                    'key_management_service_service-keys_create_crypto_field_size_curve_suffix_default',
+                  )}
+              </option>
+            ))}
+          </OdsSelect>
+        </OdsFormField>
+      )}
+      {serviceKey?.type === OkmsKeyTypes.EC && (
+        <OdsFormField>
+          <div slot="label">
+            <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+              {t(
+                'key_management_service_service-keys_create_crypto_field_curve_title',
+              )}
+            </OdsText>
+            <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+              {t(
+                'key_management_service_service-keys_create_crypto_field_curve_subtitle',
+              )}
+            </OdsText>
+          </div>
+          <OdsSelect
+            name="keyCurve"
+            value={keyCurve}
+            onOdsChange={(event) => {
+              const newKeyCurve = event.detail
+                .value as OkmsServiceKeyTypeECCurve;
+              if (newKeyCurve) setKeyCurve(newKeyCurve);
+            }}
+          >
+            {serviceKey?.curves.map((curve) => (
+              <option key={curve.value} value={curve.value}>
+                {curve.value}{' '}
+                {curve.default &&
+                  t(
+                    'key_management_service_service-keys_create_crypto_field_size_curve_suffix_default',
+                  )}
+              </option>
+            ))}
+          </OdsSelect>
+        </OdsFormField>
+      )}
+    </>
+  );
+};
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/KeyUsageSection.component.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/KeyUsageSection.component.tsx
new file mode 100644
index 000000000000..1d10fad4260e
--- /dev/null
+++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/KeyUsageSection.component.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsFormField, OdsText } from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
+import { OkmsServiceKeyReference } from '@/types/okmsServiceKeyReference.type';
+import {
+  OkmsKeyTypes,
+  OkmsServiceKeyOperations,
+} from '@/types/okmsServiceKey.type';
+import { ServiceKeyOperationCheckbox } from '@/components/serviceKey/create/serviceKeyOperationCheckbox';
+
+export type KeyUsageSectionProps = {
+  serviceKey: OkmsServiceKeyReference;
+  keyType: OkmsKeyTypes;
+  keyOperations: OkmsServiceKeyOperations[][];
+  setKeyOperations: React.Dispatch<
+    React.SetStateAction<OkmsServiceKeyOperations[][]>
+  >;
+};
+
+export const KeyUsageSection: React.FC<KeyUsageSectionProps> = ({
+  serviceKey,
+  keyType,
+  keyOperations,
+  setKeyOperations,
+}) => {
+  const { t } = useTranslation('key-management-service/serviceKeys');
+  const { trackClick } = useOvhTracking();
+
+  React.useEffect(() => {
+    serviceKey?.operations.forEach((operation) => {
+      if (operation.default) {
+        setKeyOperations([operation.value]);
+      }
+    });
+  }, [serviceKey]);
+
+  return (
+    <OdsFormField>
+      <div slot="label">
+        <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+          {t(
+            'key_management_service_service-keys_create_crypto_field_usage_title',
+          )}
+        </OdsText>
+        <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+          {t(
+            'key_management_service_service-keys_create_crypto_field_usage_subtitle',
+          )}
+        </OdsText>
+      </div>
+      <div className="grid gap-3">
+        {serviceKey?.operations.map((operation) => (
+          <ServiceKeyOperationCheckbox
+            name="serviceKeyOperation"
+            key={operation.value[0]}
+            operation={operation}
+            isChecked={keyOperations?.includes(operation.value)}
+            isDisabled={
+              keyType === OkmsKeyTypes.EC || keyType === OkmsKeyTypes.RSA
+            }
+            onOdsChange={() =>
+              setKeyOperations((prev) => {
+                const newOperations: OkmsServiceKeyOperations[][] = prev.includes(
+                  operation.value,
+                )
+                  ? prev.filter((op) => op !== operation.value)
+                  : [...prev, operation.value];
+                trackClick({
+                  location: PageLocation.funnel,
+                  buttonType: ButtonType.button,
+                  actionType: 'action',
+                  actions: ['select_use_key', newOperations.flat().join('_')],
+                });
+                return newOperations;
+              })
+            }
+          />
+        ))}
+      </div>
+    </OdsFormField>
+  );
+};
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/ProtectionLevelSection.component.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/ProtectionLevelSection.component.tsx
new file mode 100644
index 000000000000..720c4793b578
--- /dev/null
+++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/ProtectionLevelSection.component.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  IntervalUnitType,
+  OvhSubsidiary,
+  Price,
+  Subtitle,
+} from '@ovh-ux/manager-react-components';
+import { ODS_CARD_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsText, OdsCard } from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { KEY_SOFTWARE_PROTECTION_PRICE } from './CreateKey.constants';
+
+export const ProtectionLevelSection: React.FC = () => {
+  const { t } = useTranslation('key-management-service/serviceKeys');
+  const { environment } = React.useContext(ShellContext);
+  const { ovhSubsidiary } = environment.getUser();
+  const userLocale = environment.getUserLocale();
+
+  return (
+    <div className="flex flex-col gap-6 md:gap-8">
+      <Subtitle>
+        {t('key_management_service_service-keys_create_protection_level_title')}
+      </Subtitle>
+      <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+        {t(
+          'key_management_service_service-keys_create_protection_level_subtitle',
+        )}
+      </OdsText>
+      <OdsCard
+        color={ODS_CARD_COLOR.primary}
+        className="flex flex-col w-full h-fit px-3 pt-3"
+      >
+        <div className="flex flex-col gap-6 pb-4 justify-center align-middle text-center">
+          <OdsText className="block" preset={ODS_TEXT_PRESET.heading5}>
+            {t(
+              'key_management_service_service-keys_create_software_protection_title',
+            )}
+          </OdsText>
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+            {t(
+              'key_management_service_service-keys_create_software_protection_subtitle',
+            )}
+          </OdsText>
+          <Price
+            value={KEY_SOFTWARE_PROTECTION_PRICE}
+            ovhSubsidiary={
+              OvhSubsidiary[ovhSubsidiary as keyof typeof OvhSubsidiary]
+            }
+            locale={userLocale}
+            intervalUnit={IntervalUnitType.month}
+          />
+        </div>
+      </OdsCard>
+    </div>
+  );
+};
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx
index 1e531ae4d7c1..048e63525129 100644
--- a/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/ServiceKey.page.tsx
@@ -4,23 +4,20 @@ import { useQueryClient } from '@tanstack/react-query';
 import {
   BaseLayout,
   Clipboard,
+  DashboardGridLayout,
+  DashboardTile,
   ErrorBanner,
   ManagerButton,
   Notifications,
 } from '@ovh-ux/manager-react-components';
 import { Outlet, useNavigate, useParams } from 'react-router-dom';
+import { OdsTabs, OdsTab, OdsText } from '@ovhcloud/ods-components/react';
 import {
-  OsdsIcon,
-  OsdsTabBar,
-  OsdsTabBarItem,
-  OsdsTabs,
-} from '@ovhcloud/ods-components/react';
-import {
+  ODS_TEXT_PRESET,
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
-  ODS_ICON_SIZE,
+  ODS_BUTTON_COLOR,
 } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
   ButtonType,
   PageLocation,
@@ -30,14 +27,10 @@ import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
 import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader';
 import { useOkmsServiceKeyById } from '@/data/hooks/useOkmsServiceKeys';
 import Loading from '@/components/Loading/Loading';
-import { TileItem } from '@/components/dashboard/tile-item/tileItem.component';
-import { Tile } from '@/components/dashboard/tile/tile.component';
-import { TileValue } from '@/components/dashboard/tile-value/tileValue.component';
 import { TileValueDate } from '@/components/dashboard/tile-value-date/tileValueDate.component';
 import { ServiceKeyStatus } from '@/components/serviceKey/serviceKeyStatus/serviceKeyStatus.component';
 import { ServiceKeyOperations } from '@/components/serviceKey/serviceKeyOperations/serviceKeyOperations.component';
 import { ServiceKeyType } from '@/components/serviceKey/serviceKeyType/serviceKeyType.component';
-import { TileSeparator } from '@/components/dashboard/tile-separator/tileSeparator';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 import { getOkmsServiceKeyResourceQueryKey } from '@/data/api/okmsServiceKey';
 import { BreadcrumbItem } from '@/hooks/breadcrumb/useBreadcrumb';
@@ -131,148 +124,153 @@ export default function Key() {
         backLinkLabel={t('key_management_service_service_keys_back_link')}
         message={<Notifications />}
         tabs={
-          <OsdsTabs>
-            <OsdsTabBar slot="top">
-              <OsdsTabBarItem panel="tab1" role="tab">
-                {t(
-                  'key_management_service_service-keys_dashboard_tab_informations',
-                )}
-              </OsdsTabBarItem>
-            </OsdsTabBar>
-          </OsdsTabs>
+          <OdsTabs>
+            <OdsTab>
+              {t(
+                'key_management_service_service-keys_dashboard_tab_informations',
+              )}
+            </OdsTab>
+          </OdsTabs>
         }
       >
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
-          <Tile
+        <DashboardGridLayout>
+          <DashboardTile
             title={t(
               'key_management_service_service-keys_dashboard_tile_general_informations',
             )}
-          >
-            <TileSeparator />
-            <TileItem
-              title={t(
-                'key_management_service_service-keys_dashboard_field_name',
-              )}
-            >
-              <div className="flex justify-between items-center">
-                <TileValue value={kmsKey.name} />
-                <ManagerButton
-                  circle
-                  variant={ODS_BUTTON_VARIANT.stroked}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  urn={serviceKey.data.iam.urn}
-                  iamActions={[kmsIamActions.serviceKeyUpdate]}
-                  onClick={() => {
-                    trackClick({
-                      location: PageLocation.page,
-                      buttonType: ButtonType.button,
-                      actionType: 'action',
-                      actions: ['rename_encryption_key'],
-                    });
-                    navigate(ROUTES_URLS.serviceKeyEditName);
-                  }}
-                >
-                  <OsdsIcon
-                    name={ODS_ICON_NAME.PEN}
-                    size={ODS_ICON_SIZE.xs}
-                    color={ODS_THEME_COLOR_INTENT.primary}
+            items={[
+              {
+                id: 'name',
+                label: t(
+                  'key_management_service_service-keys_dashboard_field_name',
+                ),
+                value: (
+                  <div className="flex justify-between items-center">
+                    <OdsText
+                      className="max-w-1/2 text-ellipsis overflow-hidden"
+                      preset={ODS_TEXT_PRESET.paragraph}
+                    >
+                      {kmsKey.name}
+                    </OdsText>
+                    <ManagerButton
+                      id="editName"
+                      label=""
+                      variant={ODS_BUTTON_VARIANT.outline}
+                      color={ODS_BUTTON_COLOR.primary}
+                      urn={serviceKey.data.iam.urn}
+                      iamActions={[kmsIamActions.serviceKeyUpdate]}
+                      onClick={() => {
+                        trackClick({
+                          location: PageLocation.page,
+                          buttonType: ButtonType.button,
+                          actionType: 'action',
+                          actions: ['rename_encryption_key'],
+                        });
+                        navigate(ROUTES_URLS.serviceKeyEditName);
+                      }}
+                      icon={ODS_ICON_NAME.pen}
+                    />
+                  </div>
+                ),
+              },
+              {
+                id: 'id',
+                label: t(
+                  'key_management_service_service-keys_dashboard_field_id',
+                ),
+                value: <Clipboard className="w-full" value={kmsKey.id} />,
+              },
+              {
+                id: 'state',
+                label: (
+                  <div className="flex flex-row items-center">
+                    {t(
+                      'key_management_service_service-keys_dashboard_field_state',
+                    )}
+                    <OdsText className="ml-auto">
+                      <ServiceKeyStatus state={kmsKey.state} />
+                    </OdsText>
+                  </div>
+                ),
+                value: <ServiceKeyStateActions okms={kms} okmsKey={kmsKey} />,
+              },
+              {
+                id: 'createdAt',
+                label: t(
+                  'key_management_service_service-keys_dashboard_field_created_at',
+                ),
+                value: (
+                  <TileValueDate
+                    value={kmsKey.createdAt}
+                    options={{
+                      hour12: false,
+                      year: 'numeric',
+                      month: 'numeric',
+                      day: 'numeric',
+                      hour: 'numeric',
+                      minute: 'numeric',
+                      second: 'numeric',
+                    }}
                   />
-                </ManagerButton>
-              </div>
-            </TileItem>
-            <TileSeparator />
-            <TileItem
-              title={t(
-                'key_management_service_service-keys_dashboard_field_id',
-              )}
-            >
-              <Clipboard value={kmsKey.id} />
-            </TileItem>
-            <TileSeparator />
-            <TileItem
-              title={t(
-                'key_management_service_service-keys_dashboard_field_state',
-              )}
-              titleStatus={<ServiceKeyStatus state={kmsKey.state} />}
-            >
-              <div className="flex flex-col max-w-fit justify-start">
-                <ServiceKeyStateActions okms={kms} okmsKey={kmsKey} />
-              </div>
-            </TileItem>
-            <TileSeparator />
-            <TileItem
-              title={t(
-                'key_management_service_service-keys_dashboard_field_created_at',
-              )}
-            >
-              <TileValueDate
-                value={kmsKey.createdAt}
-                options={{
-                  hour12: false,
-                  year: 'numeric',
-                  month: 'numeric',
-                  day: 'numeric',
-                  hour: 'numeric',
-                  minute: 'numeric',
-                  second: 'numeric',
-                }}
-              />
-            </TileItem>
-          </Tile>
-          <Tile
+                ),
+              },
+            ]}
+          />
+          <DashboardTile
             title={t(
               'key_management_service_service-keys_dashboard_tile_crypto_properties',
             )}
-          >
-            <TileSeparator />
-            <TileItem
-              title={t(
-                'key_management_service_service-keys_dashboard_field_origin',
-              )}
-            >
-              <TileValue
-                value={t(
-                  'key_management_service_service-keys_dashboard_field_origin_okms',
-                )}
-              />
-            </TileItem>
-            <TileSeparator />
-            <TileItem
-              title={t(
-                'key_management_service_service-keys_dashboard_field_type',
-              )}
-            >
-              <ServiceKeyType type={kmsKey.type} />
-            </TileItem>
-            <TileSeparator />
-            {kmsKey.size && (
-              <TileItem
-                title={t(
+            items={[
+              {
+                id: 'origin',
+                label: t(
+                  'key_management_service_service-keys_dashboard_field_origin',
+                ),
+                value: (
+                  <OdsText preset={ODS_TEXT_PRESET.span}>
+                    {t(
+                      'key_management_service_service-keys_dashboard_field_origin_okms',
+                    )}
+                  </OdsText>
+                ),
+              },
+              {
+                id: 'type',
+                label: t(
+                  'key_management_service_service-keys_dashboard_field_type',
+                ),
+                value: <ServiceKeyType type={kmsKey.type} />,
+              },
+              kmsKey.size && {
+                id: 'size',
+                label: t(
                   'key_management_service_service-keys_dashboard_field_size',
-                )}
-              >
-                <TileValue value={kmsKey.size} />
-              </TileItem>
-            )}
-            {kmsKey.curve && (
-              <TileItem
-                title={t(
+                ),
+                value: (
+                  <OdsText preset={ODS_TEXT_PRESET.span}>{kmsKey.size}</OdsText>
+                ),
+              },
+              kmsKey.curve && {
+                id: 'size',
+                label: t(
                   'key_management_service_service-keys_dashboard_field_curve',
-                )}
-              >
-                <TileValue value={kmsKey.curve} />
-              </TileItem>
-            )}
-            <TileSeparator />
-            <TileItem
-              title={t(
-                'key_management_service_service-keys_dashboard_field_operations',
-              )}
-            >
-              <ServiceKeyOperations operations={kmsKey.operations} />
-            </TileItem>
-          </Tile>
-        </div>
+                ),
+                value: (
+                  <OdsText preset={ODS_TEXT_PRESET.span}>
+                    {kmsKey.curve}
+                  </OdsText>
+                ),
+              },
+              {
+                id: 'operations',
+                label: t(
+                  'key_management_service_service-keys_dashboard_field_operations',
+                ),
+                value: <ServiceKeyOperations operations={kmsKey.operations} />,
+              },
+            ].filter(Boolean)}
+          />
+        </DashboardGridLayout>
         <Outlet />
       </BaseLayout>
     </Suspense>
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/deactivateServiceKeyModal/DeactivateServiceKeyModal.page.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/deactivateServiceKeyModal/DeactivateServiceKeyModal.page.tsx
index 9046c63d0d74..cc15fb248d53 100644
--- a/packages/manager/apps/key-management-service/src/pages/serviceKey/deactivateServiceKeyModal/DeactivateServiceKeyModal.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/deactivateServiceKeyModal/DeactivateServiceKeyModal.page.tsx
@@ -1,15 +1,160 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { ServiceKeyDeactivateModal } from '@/components/serviceKey/modals/ServiceKeyDeactivateModal.component';
+import React, { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  OdsButton,
+  OdsFormField,
+  OdsSelect,
+  OdsSpinner,
+  OdsText,
+  OdsModal,
+} from '@ovhcloud/ods-components/react';
+import {
+  ODS_BUTTON_VARIANT,
+  ODS_SPINNER_SIZE,
+  ODS_TEXT_PRESET,
+  ODS_BUTTON_COLOR,
+  ODS_MODAL_COLOR,
+} from '@ovhcloud/ods-components';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import {
+  ButtonType,
+  PageLocation,
+  PageType,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 
-const DisableServiceKeyModal = () => {
+import { useUpdateOkmsServiceKey } from '@/data/hooks/useUpdateOkmsServiceKey';
+import {
+  OkmsServiceKeyDeactivationReason,
+  OkmsServiceKeyDeactivationReasonTypes,
+  OkmsServiceKeyPutState,
+  OkmsServiceKeyState,
+} from '@/types/okmsServiceKey.type';
+
+const stateByReason: {
+  [deactivationReason: string]: OkmsServiceKeyPutState;
+} = {
+  AFFILIATION_CHANGED: OkmsServiceKeyState.deactivated,
+  CA_COMPROMISE: OkmsServiceKeyState.compromised,
+  CESSATION_OF_OPERATION: OkmsServiceKeyState.deactivated,
+  KEY_COMPROMISE: OkmsServiceKeyState.compromised,
+  PRIVILEGE_WITHDRAWN: OkmsServiceKeyState.deactivated,
+  SUPERSEDED: OkmsServiceKeyState.deactivated,
+  UNSPECIFIED: OkmsServiceKeyState.deactivated,
+};
+
+export const DisableServiceKeyModal = () => {
   const { okmsId, keyId } = useParams();
+  const [deactivationReason, setDeactivationReason] = useState<
+    OkmsServiceKeyDeactivationReason
+  >();
+  const { addSuccess, clearNotifications } = useNotifications();
+  const { t } = useTranslation('key-management-service/serviceKeys');
+  const { t: tCommon } = useTranslation('key-management-service/common');
+  const { trackClick, trackPage } = useOvhTracking();
+  const navigate = useNavigate();
+
+  const closeModal = () => navigate('..');
+
+  const { updateKmsServiceKey, isPending } = useUpdateOkmsServiceKey({
+    okmsId,
+    keyId,
+    onSuccess: () => {
+      clearNotifications();
+      addSuccess(
+        t('key_management_service_service-keys_deactivation_success'),
+        true,
+      );
+      trackPage({
+        pageType: PageType.bannerSuccess,
+        pageName: 'deactivate_encryption_key',
+      });
+      closeModal();
+    },
+    onError: () => {
+      trackPage({
+        pageType: PageType.bannerError,
+        pageName: 'deactivate_encryption_key',
+      });
+      closeModal();
+    },
+  });
 
   return (
-    <ServiceKeyDeactivateModal
-      okmsId={okmsId}
-      keyId={keyId}
-    ></ServiceKeyDeactivateModal>
+    <OdsModal
+      isOpen
+      isDismissible
+      onOdsClose={closeModal}
+      color={ODS_MODAL_COLOR.warning}
+    >
+      <OdsText preset={ODS_TEXT_PRESET.heading2}>
+        {t('key_management_service_service-keys_modal_deactivation_heading')}
+      </OdsText>
+      {isPending ? (
+        <OdsSpinner className="block my-4" size={ODS_SPINNER_SIZE.md} />
+      ) : (
+        <OdsFormField className="block my-4">
+          <OdsSelect
+            name="deactivation-reason"
+            value={deactivationReason}
+            onOdsChange={(e) =>
+              setDeactivationReason(
+                e?.detail.value as OkmsServiceKeyDeactivationReason,
+              )
+            }
+            placeholder={t(
+              'key_management_service_service-keys_modal_deactivation_reason_select_placeholder',
+            )}
+          >
+            {OkmsServiceKeyDeactivationReasonTypes?.map((reason) => (
+              <option key={reason} value={reason}>
+                {t(
+                  `key_management_service_service-keys_deactivation_reason_${reason.toLowerCase()}`,
+                )}
+              </option>
+            ))}
+          </OdsSelect>
+        </OdsFormField>
+      )}
+      <OdsButton
+        slot="actions"
+        variant={ODS_BUTTON_VARIANT.outline}
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={() => {
+          trackClick({
+            location: PageLocation.popup,
+            buttonType: ButtonType.button,
+            actionType: 'action',
+            actions: ['cancel'],
+          });
+          closeModal();
+        }}
+        label={tCommon('key_management_service_cancel')}
+      />
+      <OdsButton
+        isLoading={isPending}
+        isDisabled={!deactivationReason}
+        slot="actions"
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={() => {
+          trackClick({
+            location: PageLocation.popup,
+            buttonType: ButtonType.button,
+            actionType: 'action',
+            actions: ['confirm'],
+          });
+          updateKmsServiceKey({
+            state: stateByReason[deactivationReason],
+            deactivationReason,
+          });
+        }}
+        aria-label="edit-name-okms"
+        label={t(
+          'key_management_service_service-keys_deactivation_button_confirm',
+        )}
+      />
+    </OdsModal>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/editServiceKeyNameModal/EditServiceKeyNameModal.page.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/editServiceKeyNameModal/EditServiceKeyNameModal.page.tsx
index bef2ad2f59f4..be1d4f3338dd 100644
--- a/packages/manager/apps/key-management-service/src/pages/serviceKey/editServiceKeyNameModal/EditServiceKeyNameModal.page.tsx
+++ b/packages/manager/apps/key-management-service/src/pages/serviceKey/editServiceKeyNameModal/EditServiceKeyNameModal.page.tsx
@@ -1,25 +1,139 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { ServiceKeyEditNameModal } from '@/components/serviceKey/modals/ServiceKeyEditNameModal.component';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams, useNavigate } from 'react-router-dom';
+import { PageType, useOvhTracking } from '@ovh-ux/manager-react-shell-client';
+import {
+  OdsButton,
+  OdsFormField,
+  OdsInput,
+  OdsSpinner,
+  OdsModal,
+  OdsText,
+} from '@ovhcloud/ods-components/react';
+import {
+  ODS_BUTTON_COLOR,
+  ODS_BUTTON_VARIANT,
+  ODS_INPUT_TYPE,
+  ODS_SPINNER_SIZE,
+  ODS_TEXT_PRESET,
+} from '@ovhcloud/ods-components';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { useUpdateOkmsServiceKey } from '@/data/hooks/useUpdateOkmsServiceKey';
 import Loading from '@/components/Loading/Loading';
 import { useOkmsServiceKeyById } from '@/data/hooks/useOkmsServiceKeys';
+import {
+  ServiceKeyNameErrorsType,
+  validateServiceKeyName,
+} from '@/utils/serviceKey/validateServiceKeyName';
 
-const EditServiceKeyNameModal = () => {
+export const EditServiceKeyNameModal = () => {
   const { okmsId, keyId } = useParams();
-
   const { data, isLoading, error } = useOkmsServiceKeyById({ okmsId, keyId });
+  const [serviceKeyName, setServiceKeyName] = useState(data?.data?.name || '');
+  const serviceKeyNameError = validateServiceKeyName(serviceKeyName);
+  const { addSuccess, clearNotifications } = useNotifications();
+  const { t } = useTranslation('key-management-service/serviceKeys');
+  const { t: tCommon } = useTranslation('key-management-service/common');
+  const { trackPage } = useOvhTracking();
+  const navigate = useNavigate();
 
-  if (isLoading) return <Loading />;
+  const closeModal = () => navigate('..');
+
+  const { updateKmsServiceKey, isPending } = useUpdateOkmsServiceKey({
+    okmsId,
+    keyId,
+    onSuccess: () => {
+      clearNotifications();
+      addSuccess(
+        t('key_management_service_service-keys_update_name_success'),
+        true,
+      );
+      trackPage({
+        pageType: PageType.bannerSuccess,
+        pageName: 'rename_encryption_key',
+      });
+      closeModal();
+    },
+    onError: () => {
+      trackPage({
+        pageType: PageType.bannerError,
+        pageName: 'rename_encryption_key',
+      });
+      closeModal();
+    },
+  });
+
+  const getErrorMessage = (err: ServiceKeyNameErrorsType) => {
+    switch (err) {
+      case 'REQUIRED':
+        return t(
+          'key_management_service_service-keys_update_name_error_required',
+        );
+      case 'INVALID_CHARACTERS':
+        return t(
+          'key_management_service_service-keys_update_name_error_invalid_characters',
+        );
+      case 'TOO_MANY_CHARACTERS':
+        return t('key_management_service_service-keys_update_name_error_max');
+
+      default:
+        return undefined;
+    }
+  };
+
+  React.useEffect(() => {
+    setServiceKeyName(data?.data?.name);
+  }, [data]);
 
-  // TODO: handle error
   if (error) return <div>{error.response.data.message}</div>;
 
+  if (isLoading) return <Loading />;
+
   return (
-    <ServiceKeyEditNameModal
-      okmsId={okmsId}
-      keyId={keyId}
-      name={data.data.name}
-    ></ServiceKeyEditNameModal>
+    <OdsModal isOpen isDismissible onOdsClose={closeModal}>
+      <OdsText preset={ODS_TEXT_PRESET.heading3}>
+        {t('key_management_service_service-keys_dashboard_field_name')}
+      </OdsText>
+      {isPending ? (
+        <OdsSpinner className="block my-3" size={ODS_SPINNER_SIZE.md} />
+      ) : (
+        <OdsFormField
+          className="block my-3"
+          error={getErrorMessage(serviceKeyNameError)}
+        >
+          <OdsInput
+            className="w-full"
+            name="input-edit-service-key-name"
+            aria-label="input-edit-service-key-name"
+            hasError={!!serviceKeyNameError}
+            type={ODS_INPUT_TYPE.text}
+            value={serviceKeyName}
+            isRequired
+            onOdsChange={(event) => {
+              setServiceKeyName(event.target.value as string);
+            }}
+          />
+        </OdsFormField>
+      )}
+      <OdsButton
+        slot="actions"
+        variant={ODS_BUTTON_VARIANT.outline}
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={closeModal}
+        label={tCommon('key_management_service_cancel')}
+      />
+      <OdsButton
+        isLoading={isPending}
+        isDisabled={
+          !!serviceKeyNameError || serviceKeyName === data?.data?.name
+        }
+        slot="actions"
+        color={ODS_BUTTON_COLOR.primary}
+        onClick={() => updateKmsServiceKey({ name: serviceKeyName })}
+        aria-label="edit-name-okms"
+        label={tCommon('key_management_service_modify')}
+      />
+    </OdsModal>
   );
 };
 
diff --git a/packages/manager/apps/key-management-service/src/setupTests.tsx b/packages/manager/apps/key-management-service/src/setupTests.tsx
index 141b5063ffb0..90b28bebdc0c 100644
--- a/packages/manager/apps/key-management-service/src/setupTests.tsx
+++ b/packages/manager/apps/key-management-service/src/setupTests.tsx
@@ -1,12 +1,11 @@
-import { odsSetup } from '@ovhcloud/ods-common-core';
 import { SetupServer, setupServer } from 'msw/node';
-import { toMswHandlers } from '../../../../../playwright-helpers';
-import { getAuthenticationMocks } from '../../../../../playwright-helpers/mocks/auth';
+import {
+  toMswHandlers,
+  getAuthenticationMocks,
+} from '@ovh-ux/manager-core-test-utils';
 import '@testing-library/jest-dom';
 import 'element-internals-polyfill';
 
-odsSetup();
-
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
   var server: SetupServer;
diff --git a/packages/manager/apps/key-management-service/src/types/okmsServiceKey.type.ts b/packages/manager/apps/key-management-service/src/types/okmsServiceKey.type.ts
index 19688396e470..93a9af8ea3d4 100644
--- a/packages/manager/apps/key-management-service/src/types/okmsServiceKey.type.ts
+++ b/packages/manager/apps/key-management-service/src/types/okmsServiceKey.type.ts
@@ -123,7 +123,7 @@ export type OkmsServiceKeyPostPayload = {
   name: string;
   context: string;
   curve?: OkmsServiceKeyTypeECCurve;
-  size?: OkmsServiceKeyTypeOctSize & OkmsServiceKeyTypeRSASize;
+  size?: OkmsServiceKeyTypeOctSize | OkmsServiceKeyTypeRSASize;
   operations: OkmsServiceKeyOperations[];
   type: OkmsKeyTypes;
 };
diff --git a/packages/manager/apps/key-management-service/src/utils/credential/validateCredentialName.ts b/packages/manager/apps/key-management-service/src/utils/credential/validateCredentialName.ts
index 1e93b0e6fa61..6cfdfd849574 100644
--- a/packages/manager/apps/key-management-service/src/utils/credential/validateCredentialName.ts
+++ b/packages/manager/apps/key-management-service/src/utils/credential/validateCredentialName.ts
@@ -14,7 +14,9 @@ export type CredentialNameErrorsType = typeof CredentialNameErrors[keyof typeof
 
 export const credentialNameMaxCharacters = 50;
 
-export const validateCredentialName = (name: string) => {
+export const validateCredentialName = (name: string | null) => {
+  if (name === null) return undefined;
+
   if (name.length === 0) return CredentialNameErrors.required;
 
   if (name.length > credentialNameMaxCharacters)
diff --git a/packages/manager/apps/key-management-service/src/utils/serviceKey/validateServiceKeyName.ts b/packages/manager/apps/key-management-service/src/utils/serviceKey/validateServiceKeyName.ts
index f5478f06bea1..07e4f78cf791 100644
--- a/packages/manager/apps/key-management-service/src/utils/serviceKey/validateServiceKeyName.ts
+++ b/packages/manager/apps/key-management-service/src/utils/serviceKey/validateServiceKeyName.ts
@@ -14,7 +14,9 @@ export type ServiceKeyNameErrorsType = typeof ServiceKeyNameErrors[keyof typeof
 
 export const serviceKeyMaxCharacters = 32;
 
-export const validateServiceKeyName = (name: string) => {
+export const validateServiceKeyName = (name: string | null) => {
+  if (name === null) return undefined;
+
   if (name.length === 0) return ServiceKeyNameErrors.required;
 
   if (name.length > 32) return ServiceKeyNameErrors.tooManyCharacters;
diff --git a/packages/manager/apps/key-management-service/tailwind.config.js b/packages/manager/apps/key-management-service/tailwind.config.js
index 657ab11bb87d..9697fd991205 100644
--- a/packages/manager/apps/key-management-service/tailwind.config.js
+++ b/packages/manager/apps/key-management-service/tailwind.config.js
@@ -1,9 +1,7 @@
 import path from 'path';
-import config from '@ovh-ux/manager-tailwind-config';
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  ...config,
   content: [
     './src/**/*.{js,jsx,ts,tsx}',
     path.join(
@@ -11,4 +9,14 @@ module.exports = {
       '**/*.{js,jsx,ts,tsx}',
     ),
   ],
+  theme: {
+    screens: {
+      xs: '0',
+      sm: '36em',
+      md: '48em',
+      lg: '62em',
+      xl: '75em',
+      xxl: '87.5em',
+    },
+  },
 };
diff --git a/packages/manager/apps/key-management-service/tsconfig.json b/packages/manager/apps/key-management-service/tsconfig.json
index a9c9f2ceec7b..a92d6883f770 100644
--- a/packages/manager/apps/key-management-service/tsconfig.json
+++ b/packages/manager/apps/key-management-service/tsconfig.json
@@ -19,8 +19,7 @@
     "jsx": "react",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
-      "@playwright-helpers/*": ["../../../../playwright-helpers/*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["src"],
diff --git a/packages/manager/apps/zimbra/package.json b/packages/manager/apps/zimbra/package.json
index 75daa7d63465..2cdc0f0288b7 100644
--- a/packages/manager/apps/zimbra/package.json
+++ b/packages/manager/apps/zimbra/package.json
@@ -31,8 +31,8 @@
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/request-tagger": "^0.4.0",
     "@ovh-ux/shell": "^4.1.0",
-    "@ovhcloud/ods-components": "^18.3.1",
-    "@ovhcloud/ods-themes": "^18.3.1",
+    "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "element-internals-polyfill": "^1.3.10",
diff --git a/yarn.lock b/yarn.lock
index d6d4b1ddf056..93a13f11eddf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -303,7 +303,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/core@^7.23.0", "@babel/core@^7.23.2":
+"@babel/core@^7.23.0", "@babel/core@^7.23.2", "@babel/core@^7.26.0":
   version "7.26.0"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
   integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
@@ -2162,6 +2162,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.7"
 
+"@babel/plugin-transform-react-jsx-self@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz#c0b6cae9c1b73967f7f9eb2fca9536ba2fad2858"
+  integrity sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
 "@babel/plugin-transform-react-jsx-source@^7.14.5", "@babel/plugin-transform-react-jsx-source@^7.19.6":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.22.5.tgz#49af1615bfdf6ed9d3e9e43e425e0b2b65d15b6c"
@@ -2190,6 +2197,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.7"
 
+"@babel/plugin-transform-react-jsx-source@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz#4c6b8daa520b5f155b5fb55547d7c9fa91417503"
+  integrity sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
 "@babel/plugin-transform-react-jsx@^7.19.0", "@babel/plugin-transform-react-jsx@^7.22.5":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz#393f99185110cea87184ea47bcb4a7b0c2e39312"
@@ -6087,22 +6101,10 @@
     "@ovhcloud/ods-common-stencil" "17.2.2"
     "@ovhcloud/ods-common-theming" "17.2.2"
 
-"@ovhcloud/ods-components@^18.3.0":
-  version "18.3.0"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-components/-/ods-components-18.3.0.tgz#f5fa856bb45ad7df3ebe421d64ab334f41c7206c"
-  integrity sha512-E2bDV7RDnNty8fR7Fbvkxug2pySmsy4BQIt9rY0VTZWtcbaUlazmKbr+l+TjeL7vRxiPR4+9xLidI1kwt26O9A==
-  dependencies:
-    "@floating-ui/dom" "1.6.11"
-    "@stencil/core" "4.16.0"
-    google-libphonenumber "3.2.35"
-    tom-select "2.3.1"
-    tslib "2.6.3"
-    vanillajs-datepicker "1.3.4"
-
-"@ovhcloud/ods-components@^18.3.1":
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-components/-/ods-components-18.3.1.tgz#544eb89299090f82fd993606f20e5a2235bc5bab"
-  integrity sha512-HP+EtbeS+cqc/D03O/KCqEgklZr3PnaBwlAmsRBWA0O5jpGxvn678uXj9GzJO/lIk0W6/p5elZfaXGlJccSrxg==
+"@ovhcloud/ods-components@^18.4.1":
+  version "18.4.1"
+  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-components/-/ods-components-18.4.1.tgz#44e21d23fbf844348e94b966d2aa5c38d8376dc8"
+  integrity sha512-aS7BArn0691hyHAn2/ND/7XYIX01gAmVCSvEl8uT9umT4iDDvodipkWRtGxBUin6ndvyED1Jx0BfCbtYsrKPeQ==
   dependencies:
     "@floating-ui/dom" "1.6.11"
     "@stencil/core" "4.16.0"
@@ -6125,15 +6127,10 @@
   dependencies:
     "@ovhcloud/ods-common-theming" "17.2.2"
 
-"@ovhcloud/ods-themes@^18.3.0":
-  version "18.3.0"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-themes/-/ods-themes-18.3.0.tgz#804e3502e6791f7ec2efc24abb107d27cd4e02e0"
-  integrity sha512-mTxtcM4tCUPk98x65PeslXqGONJraTryXgkbgbZuvtOYf9SgVl+zFJfyisD2sYGuJvVf6hJP1NvJkyrxOUqtSw==
-
-"@ovhcloud/ods-themes@^18.3.1":
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-themes/-/ods-themes-18.3.1.tgz#de608212bd8171249c2e7730fd42b642a0452555"
-  integrity sha512-VoKERtF39uX6wTR+2SjqJSPGCNyfzcG88psnhfIUk9CYgU/v0sCQ7w5JSbwD2h7Gd+YCQiJb5QdYRgczZsbiWA==
+"@ovhcloud/ods-themes@^18.4.1":
+  version "18.4.1"
+  resolved "https://registry.yarnpkg.com/@ovhcloud/ods-themes/-/ods-themes-18.4.1.tgz#1c8dfeff1ba0b829fd61e8dea41af4cdbed46912"
+  integrity sha512-bezBp/Bgbo19IFPJ/+a/bFt2IArjq8wGrHPshpk/bVVZsxkgpAiUfRERmftU+l7gYU3e+yvFdopNL6eRaJDPWQ==
 
 "@ovhcloud/reket-axios-client@^0.2.1":
   version "0.2.1"
@@ -9762,6 +9759,17 @@
     "@types/babel__core" "^7.20.5"
     react-refresh "^0.14.2"
 
+"@vitejs/plugin-react@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz#c64be10b54c4640135a5b28a2432330e88ad7c20"
+  integrity sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==
+  dependencies:
+    "@babel/core" "^7.26.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.25.9"
+    "@babel/plugin-transform-react-jsx-source" "^7.25.9"
+    "@types/babel__core" "^7.20.5"
+    react-refresh "^0.14.2"
+
 "@vitejs/plugin-vue@^5.0.4":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.0.tgz#d29f2aad9127c73b578e7a463e76249e89256e0b"
@@ -9877,15 +9885,6 @@
     test-exclude "^7.0.1"
     tinyrainbow "^1.2.0"
 
-"@vitest/expect@1.3.1":
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/@vitest/expect/-/expect-1.3.1.tgz#d4c14b89c43a25fd400a6b941f51ba27fe0cb918"
-  integrity sha512-xofQFwIzfdmLLlHa6ag0dPV8YsnKOCP1KdAeVVh34vSjN2dcUiXYCD9htu/9eM7t8Xln4v03U9HLxLpPlsXdZw==
-  dependencies:
-    "@vitest/spy" "1.3.1"
-    "@vitest/utils" "1.3.1"
-    chai "^4.3.10"
-
 "@vitest/expect@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-1.4.0.tgz#d64e17838a20007fecd252397f9b96a1ca81bfb0"
@@ -9944,6 +9943,16 @@
     chai "^5.1.2"
     tinyrainbow "^1.2.0"
 
+"@vitest/expect@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.8.tgz#13fad0e8d5a0bf0feb675dcf1d1f1a36a1773bc1"
+  integrity sha512-8ytZ/fFHq2g4PJVAtDX57mayemKgDR6X3Oa2Foro+EygiOJHUXhCqBAAKQYYajZpFoIfvBCF1j6R6IYRSIUFuw==
+  dependencies:
+    "@vitest/spy" "2.1.8"
+    "@vitest/utils" "2.1.8"
+    chai "^5.1.2"
+    tinyrainbow "^1.2.0"
+
 "@vitest/mocker@2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.3.tgz#a3593b426551be5715fa108faf04f8a9ddb0a9cc"
@@ -9971,6 +9980,15 @@
     estree-walker "^3.0.3"
     magic-string "^0.30.12"
 
+"@vitest/mocker@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.8.tgz#51dec42ac244e949d20009249e033e274e323f73"
+  integrity sha512-7guJ/47I6uqfttp33mgo6ga5Gr1VnL58rcqYKyShoRK9ebu8T5Rs6HN3s1NABiBeVTdWNrwUMcHH54uXZBN4zA==
+  dependencies:
+    "@vitest/spy" "2.1.8"
+    estree-walker "^3.0.3"
+    magic-string "^0.30.12"
+
 "@vitest/pretty-format@2.0.5", "@vitest/pretty-format@^2.0.5":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.0.5.tgz#91d2e6d3a7235c742e1a6cc50e7786e2f2979b1e"
@@ -9999,6 +10017,13 @@
   dependencies:
     tinyrainbow "^1.2.0"
 
+"@vitest/pretty-format@2.1.8", "@vitest/pretty-format@^2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.8.tgz#88f47726e5d0cf4ba873d50c135b02e4395e2bca"
+  integrity sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==
+  dependencies:
+    tinyrainbow "^1.2.0"
+
 "@vitest/runner@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-1.4.0.tgz#907c2d17ad5975b70882c25ab7a13b73e5a28da9"
@@ -10049,6 +10074,14 @@
     "@vitest/utils" "2.1.5"
     pathe "^1.1.2"
 
+"@vitest/runner@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.8.tgz#b0e2dd29ca49c25e9323ea2a45a5125d8729759f"
+  integrity sha512-17ub8vQstRnRlIU5k50bG+QOMLHRhYPAna5tw8tYbj+jzjcspnwnwtPtiOlkuKC4+ixDPTuLZiqiWWQ2PSXHVg==
+  dependencies:
+    "@vitest/utils" "2.1.8"
+    pathe "^1.1.2"
+
 "@vitest/snapshot@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-1.4.0.tgz#2945b3fb53767a3f4f421919e93edfef2935b8bd"
@@ -10103,12 +10136,14 @@
     magic-string "^0.30.12"
     pathe "^1.1.2"
 
-"@vitest/spy@1.3.1":
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/@vitest/spy/-/spy-1.3.1.tgz#814245d46d011b99edd1c7528f5725c64e85a88b"
-  integrity sha512-xAcW+S099ylC9VLU7eZfdT9myV67Nor9w9zhf0mGCYJSO+zM2839tOeROTdikOi/8Qeusffvxb/MyBSOja1Uig==
+"@vitest/snapshot@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.8.tgz#d5dc204f4b95dc8b5e468b455dfc99000047d2de"
+  integrity sha512-20T7xRFbmnkfcmgVEz+z3AU/3b0cEzZOt/zmnvZEctg64/QZbSDJEVm9fLnnlSi74KibmRsO9/Qabi+t0vCRPg==
   dependencies:
-    tinyspy "^2.2.0"
+    "@vitest/pretty-format" "2.1.8"
+    magic-string "^0.30.12"
+    pathe "^1.1.2"
 
 "@vitest/spy@1.4.0":
   version "1.4.0"
@@ -10152,6 +10187,13 @@
   dependencies:
     tinyspy "^3.0.2"
 
+"@vitest/spy@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.8.tgz#bc41af3e1e6a41ae3b67e51f09724136b88fa447"
+  integrity sha512-5swjf2q95gXeYPevtW0BLk6H8+bPlMb4Vw/9Em4hFxDcaOxS+e0LOX4yqNxoHzMR2akEB2xfpnWUzkZokmgWDg==
+  dependencies:
+    tinyspy "^3.0.2"
+
 "@vitest/ui@^1.4.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@vitest/ui/-/ui-1.6.0.tgz#ffcc97ebcceca7fec840c29ab68632d0cd01db93"
@@ -10222,6 +10264,15 @@
     loupe "^3.1.2"
     tinyrainbow "^1.2.0"
 
+"@vitest/utils@2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.8.tgz#f8ef85525f3362ebd37fd25d268745108d6ae388"
+  integrity sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==
+  dependencies:
+    "@vitest/pretty-format" "2.1.8"
+    loupe "^3.1.2"
+    tinyrainbow "^1.2.0"
+
 "@volar/language-core@1.11.1", "@volar/language-core@~1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.11.1.tgz#ecdf12ea8dc35fb8549e517991abcbf449a5ad4f"
@@ -28351,6 +28402,17 @@ vite-node@2.1.5:
     pathe "^1.1.2"
     vite "^5.0.0"
 
+vite-node@2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.8.tgz#9495ca17652f6f7f95ca7c4b568a235e0c8dbac5"
+  integrity sha512-uPAwSr57kYjAUux+8E2j0q0Fxpn8M9VoyfGiRI8Kfktz9NcYMCenwY5RnZxnF1WTu3TGiYipirIzacLL3VVGFg==
+  dependencies:
+    cac "^6.7.14"
+    debug "^4.3.7"
+    es-module-lexer "^1.5.4"
+    pathe "^1.1.2"
+    vite "^5.0.0"
+
 vite-plugin-dts@3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-3.5.1.tgz#58c225f7ecabff2ed76027e003e1ec8ca964a078"
@@ -28623,6 +28685,32 @@ vitest@^2.1.4:
     vite-node "2.1.5"
     why-is-node-running "^2.3.0"
 
+vitest@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.8.tgz#2e6a00bc24833574d535c96d6602fb64163092fa"
+  integrity sha512-1vBKTZskHw/aosXqQUlVWWlGUxSJR8YtiyZDJAFeW2kPAeX6S3Sool0mjspO+kXLuxVWlEDDowBAeqeAQefqLQ==
+  dependencies:
+    "@vitest/expect" "2.1.8"
+    "@vitest/mocker" "2.1.8"
+    "@vitest/pretty-format" "^2.1.8"
+    "@vitest/runner" "2.1.8"
+    "@vitest/snapshot" "2.1.8"
+    "@vitest/spy" "2.1.8"
+    "@vitest/utils" "2.1.8"
+    chai "^5.1.2"
+    debug "^4.3.7"
+    expect-type "^1.1.0"
+    magic-string "^0.30.12"
+    pathe "^1.1.2"
+    std-env "^3.8.0"
+    tinybench "^2.9.0"
+    tinyexec "^0.3.1"
+    tinypool "^1.0.1"
+    tinyrainbow "^1.2.0"
+    vite "^5.0.0"
+    vite-node "2.1.8"
+    why-is-node-running "^2.3.0"
+
 void-elements@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"