diff --git a/src/views/AccessControl.tsx b/src/views/AccessControl.tsx
index b3060ea..20b4529 100644
--- a/src/views/AccessControl.tsx
+++ b/src/views/AccessControl.tsx
@@ -37,7 +37,7 @@ import AccessControlModalGroups from "../components/AccessControlModalGroups";
 import tableSpin from "../components/Spin";
 import {useGetAccessTokenSilently} from "../utils/token";
 
-const {Title, Paragraph} = Typography;
+const {Title, Paragraph, Text} = Typography;
 const {Column} = Table;
 const {confirm} = Modal;
 
@@ -415,7 +415,7 @@ export const AccessControl = () => {
                                                 return <Tooltip title={desc !== "" ? desc : "no description"}
                                                                 arrowPointAtCenter>
                                                     <span onClick={() => setRuleAndView(record as RuleDataTable)}
-                                                          className="tooltip-label"><strong style={{color: "#5a5c5a"}}>{text}</strong></span>
+                                                          className="tooltip-label"><Text strong>{text}</Text></span>
                                                 </Tooltip>
                                             }}
                                     />
diff --git a/src/views/Peers.tsx b/src/views/Peers.tsx
index 0a3165e..59a8183 100644
--- a/src/views/Peers.tsx
+++ b/src/views/Peers.tsx
@@ -371,15 +371,15 @@ export const Peers = () => {
         const userEmail = users?.find(u => u.id === peer.user_id)?.email
         if (!userEmail) {
             return <Button type="text" onClick={() => setUpdateGroupsVisible(peer, true)}>
-                <strong style={{color: "#5a5c5a"}}>{peer.name}</strong>
+                <Text strong>{peer.name}</Text>
             </Button>
         }
         return <div>
             <Button type="text" style={{height: "auto", whiteSpace: "normal", textAlign: "left"}}
                     onClick={() => setUpdateGroupsVisible(peer, true)}>
-                <strong style={{color: "#5a5c5a"}}>{peer.name}</strong>
+                <Text strong>{peer.name}</Text>
                 <br/>
-                <div style={{color: "#5a5c5a"}}>{userEmail}</div>
+                <Text type="secondary">{userEmail}</Text>
             </Button>
         </div>
     }
diff --git a/src/views/Routes.tsx b/src/views/Routes.tsx
index 42749ab..3689be6 100644
--- a/src/views/Routes.tsx
+++ b/src/views/Routes.tsx
@@ -43,7 +43,7 @@ import {
 } from '../utils/routes'
 import {useGetAccessTokenSilently} from "../utils/token";
 
-const {Title, Paragraph} = Typography;
+const {Title, Paragraph, Text} = Typography;
 const {Column} = Table;
 const {confirm} = Modal;
 
@@ -425,7 +425,7 @@ export const Routes = () => {
                                                 const desc = (record as RouteDataTable).description.trim()
                                                 return <Tooltip title={desc !== "" ? desc : "no description"}
                                                                 arrowPointAtCenter>
-                                                    <strong style={{color: "#5a5c5a"}}>{text}</strong>
+                                                    <Text strong>{text}</Text>
                                                 </Tooltip>
                                             }}
                                     />
diff --git a/src/views/SetupKeys.tsx b/src/views/SetupKeys.tsx
index 8a8ce91..1d55360 100644
--- a/src/views/SetupKeys.tsx
+++ b/src/views/SetupKeys.tsx
@@ -400,7 +400,7 @@ export const SetupKeys = () => {
                                             render={(text, record, index) => {
                                                 return <Button type="text"
                                                                onClick={() => setKeyAndView(record as SetupKeyDataTable)}
-                                                               className="tooltip-label"> <strong style={{color: "#5a5c5a"}}>{text}</strong>
+                                                               className="tooltip-label">  <Text strong>{text}</Text>
                                                 </Button>
                                             }}
                                             defaultSortOrder='ascend'
diff --git a/src/views/Users.tsx b/src/views/Users.tsx
index 2a2c04a..a180962 100644
--- a/src/views/Users.tsx
+++ b/src/views/Users.tsx
@@ -29,7 +29,7 @@ import {Group} from "../store/group/types";
 import {TooltipPlacement} from "antd/es/tooltip";
 import {useOidcUser} from "@axa-fr/react-oidc";
 
-const {Title, Paragraph} = Typography;
+const {Title, Paragraph, Text} = Typography;
 const {Column} = Table;
 
 interface UserDataTable extends User {
@@ -277,7 +277,7 @@ export const Users = () => {
                                                 const btn = <Button type="text"
                                                                            onClick={() => setUserAndView(record as UserDataTable)}
                                                                            className="tooltip-label">
-                                                    <strong style={{color: "#5a5c5a"}}>{(text && text.trim() !== "") ? text : (record as User).id}</strong>
+                                                    <Text strong>{(text && text.trim() !== "") ? text : (record as User).id}</Text>
                                                 </Button>
                                                 if ((record as User).id !== currentUser.id) {
                                                     return btn