From ec2ec6925b0edb4de9ce8aa47e9930b135af0879 Mon Sep 17 00:00:00 2001
From: baudelotphilippe <philippe@baudelot.eu>
Date: Tue, 21 May 2024 10:00:47 +0200
Subject: [PATCH 1/8] init

---
 daikoku/app/domain/tenantEntities.scala | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/daikoku/app/domain/tenantEntities.scala b/daikoku/app/domain/tenantEntities.scala
index c5c1c8d10..9468b979b 100644
--- a/daikoku/app/domain/tenantEntities.scala
+++ b/daikoku/app/domain/tenantEntities.scala
@@ -60,7 +60,7 @@ case class DaikokuStyle(
   --body-bg-color: #fff;
   --body-text-color: #212529;
   --navbar-bg-color: #7f96af;
-  --navbar-brand-color: #fff;
+  --navbar-brand-color: #aaa;
   --menu-bg-color: #fff;
   --menu-text-color: #212529;
   --menu-text-hover-bg-color: #9bb0c5;
@@ -71,13 +71,15 @@ case class DaikokuStyle(
   --addContent-bg-color: #e9ecef;
   --addContent-text-color: #000;
   --sidebar-bg-color: #f8f9fa;
+  --sidebar-text-color: #aaa;
+
 
   --btn-bg-color: #fff;
   --btn-text-color: #495057;
   --btn-border-color: #97b0c7;
 
   --badge-tags-bg-color: #ffc107;
-  --badge-tags-bg-color: #ffe1a7;
+  --badge-tags-bg-hover-color: #ffe1a7;
   --badge-tags-text-color: #212529;
 
   --pagination-text-color: #586069;

From b50a3cffb3d0b50d72c1b954867d4b353666e6c9 Mon Sep 17 00:00:00 2001
From: baudelotphilippe <philippe@baudelot.eu>
Date: Tue, 4 Jun 2024 15:58:47 +0200
Subject: [PATCH 2/8] init

---
 daikoku/app/domain/tenantEntities.scala       |   3 +-
 daikoku/app/views/error.scala.html            |   6 +-
 daikoku/app/views/response.scala.html         |   4 +-
 daikoku/javascript/src/apps/DaikokuApp.tsx    |  11 +-
 .../javascript/src/apps/DaikokuHomeApp.tsx    |   2 +-
 .../audittrail/AuditTrailList.tsx             |   4 +-
 .../adminbackoffice/cms/ContentSideView.tsx   |   8 +-
 .../components/adminbackoffice/cms/Create.tsx |  12 +-
 .../components/adminbackoffice/cms/Pages.tsx  |   4 +-
 .../adminbackoffice/cms/Revisions.tsx         |   2 +-
 .../adminbackoffice/cms/Sidebar.tsx           |   2 +-
 .../components/adminbackoffice/cms/index.tsx  |   2 +-
 .../importexport/ImportExport.tsx             |   6 +-
 .../adminbackoffice/messages/messages.tsx     |  12 +-
 .../otoroshi/TenantOtoroshis.tsx              |   4 +-
 .../otoroshi/initialization/steps.tsx         |  16 +-
 .../adminbackoffice/tenants/TenantList.tsx    |   2 +-
 .../tenants/TenantStyleEdit.tsx               |   6 +-
 .../tenants/forms/CustomizationForm.tsx       |   2 +-
 .../tenants/forms/ThirdPartyPaymentForm.tsx   |   4 +-
 .../adminbackoffice/users/UserEdit.tsx        |   6 +-
 .../backoffice/apikeys/ApiKeyCustomName.tsx   |   2 +-
 .../backoffice/apikeys/ShowApiSecret.tsx      |   4 +-
 .../backoffice/apikeys/TeamApiKeys.tsx        |   6 +-
 .../backoffice/apikeys/TeamApiKeysForApi.tsx  |  28 ++-
 .../components/backoffice/apis/TeamApi.tsx    |  10 +-
 .../backoffice/apis/TeamApiDocumentation.tsx  |   2 +-
 .../backoffice/apis/TeamApiGroup.tsx          |   4 +-
 .../backoffice/apis/TeamApiPost.tsx           |   2 +-
 .../backoffice/apis/TeamApiPricings.tsx       |  30 +--
 .../backoffice/apis/TeamApiSubscriptions.tsx  |  10 +-
 .../components/backoffice/apis/TeamApis.tsx   |   6 +-
 .../backoffice/assets/AssetsList.tsx          |  10 +-
 .../backoffice/billing/TeamBilling.tsx        |   2 +-
 .../backoffice/billing/TeamIncome.tsx         |   2 +-
 .../components/backoffice/me/MyProfile.tsx    |  10 +-
 .../notifications/NotificationList.tsx        |   2 +-
 .../components/backoffice/teams/TeamEdit.tsx  |   4 +-
 .../src/components/frontend/AtomicDesign.tsx  | 198 ++++++++++++++++++
 .../src/components/frontend/api/ApiCard.tsx   |  12 +-
 .../components/frontend/api/ApiCartidge.tsx   |   4 +-
 .../frontend/api/ApiDocumentation.tsx         |   4 +-
 .../components/frontend/api/ApiGroupHome.tsx  |   2 +-
 .../src/components/frontend/api/ApiHome.tsx   |   4 +-
 .../src/components/frontend/api/ApiPost.tsx   |   2 +-
 .../components/frontend/api/ApiPricing.tsx    |  26 +--
 .../components/frontend/api/StarsButton.tsx   |   4 +-
 .../frontend/api/issues/ApiFilter.tsx         |   8 +-
 .../frontend/api/issues/ApiIssues.tsx         |   2 +-
 .../frontend/api/issues/ApiTimelineIssue.tsx  |  12 +-
 .../frontend/fastMode/FastApiCard.tsx         |   4 +-
 .../frontend/fastMode/FastApiList.tsx         |   2 +-
 .../frontend/fastMode/FastItemView.tsx        |  25 +--
 .../src/components/frontend/index.ts          |   1 +
 .../src/components/frontend/team/ApiList.tsx  |   6 +-
 .../src/components/frontend/team/TeamCard.tsx |   4 +-
 .../src/components/frontend/team/TeamHome.tsx |   2 +-
 .../unauthenticated/UnauthenticatedHome.tsx   |   8 +-
 .../src/components/inputs/Table.tsx           |   2 +-
 .../src/components/inputs/TableFilters.tsx    |   2 +-
 .../utils/OtoroshiStatsVizualisation.tsx      |   2 +-
 .../src/components/utils/Recharts.tsx         |   2 +-
 .../utils/dnd/components/Update.tsx           |   2 +-
 .../javascript/src/components/utils/login.tsx | 163 +++++++-------
 .../src/components/utils/multiStepForm.tsx    |   2 +-
 .../src/components/utils/sidebar/SideBar.tsx  |  16 +-
 .../utils/sidebar/panels/AddPanel.tsx         |   8 +-
 .../utils/sidebar/panels/MessagePanel.tsx     |   4 +-
 .../javascript/src/contexts/modals/Alert.tsx  |   2 +-
 .../contexts/modals/AssetsChooserModal.tsx    |   4 +-
 .../contexts/modals/TeamSelectionModal.tsx    |   2 +-
 .../javascript/src/contexts/navContext.tsx    |  10 +-
 .../src/style/components/apicard.scss         |  89 +++-----
 .../src/style/components/backOffice.scss      |  43 ++--
 .../src/style/components/badge.scss           |  14 +-
 .../src/style/components/breadcrumb.scss      |  12 +-
 .../javascript/src/style/components/btn.scss  |  44 ++--
 .../src/style/components/consumptions.scss    |  10 +-
 .../src/style/components/discussion.scss      |  30 +--
 .../src/style/components/dragAndDropDoc.scss  |   4 +-
 .../src/style/components/fastMode.scss        |   6 +-
 .../src/style/components/footer.scss          |   2 +-
 .../src/style/components/input.scss           |   4 +-
 .../src/style/components/messages.scss        |   2 +-
 .../src/style/components/modal.scss           |  14 +-
 .../javascript/src/style/components/note.scss |   4 +-
 .../src/style/components/notification.scss    |  21 +-
 .../src/style/components/pagination.scss      |  21 +-
 .../src/style/components/reactSelect.scss     |   4 +-
 .../src/style/components/reactTable.scss      |   2 +-
 .../src/style/components/recharts.scss        |   4 +-
 .../src/style/components/sortable.scss        |  12 +-
 .../src/style/components/tableApi.scss        |   7 +-
 .../src/style/components/toastr.scss          |  12 +-
 .../javascript/src/style/layout/darkmode.scss |  86 ++++----
 daikoku/javascript/src/style/layout/home.scss |   5 +-
 .../javascript/src/style/layout/login.scss    |  10 +-
 .../javascript/src/style/layout/navbar.scss   |  88 ++++----
 .../javascript/src/style/layout/sidebar.scss  |   6 +-
 .../javascript/src/style/layout/style.scss    |  88 ++++++--
 .../src/style/layout/teamBilling.scss         |  41 ++--
 daikoku/javascript/src/style/variables.scss   | 125 ++++++-----
 102 files changed, 926 insertions(+), 687 deletions(-)
 create mode 100644 daikoku/javascript/src/components/frontend/AtomicDesign.tsx

diff --git a/daikoku/app/domain/tenantEntities.scala b/daikoku/app/domain/tenantEntities.scala
index 9468b979b..07b5e9358 100644
--- a/daikoku/app/domain/tenantEntities.scala
+++ b/daikoku/app/domain/tenantEntities.scala
@@ -59,8 +59,7 @@ case class DaikokuStyle(
 
   --body-bg-color: #fff;
   --body-text-color: #212529;
-  --navbar-bg-color: #7f96af;
-  --navbar-brand-color: #aaa;
+  
   --menu-bg-color: #fff;
   --menu-text-color: #212529;
   --menu-text-hover-bg-color: #9bb0c5;
diff --git a/daikoku/app/views/error.scala.html b/daikoku/app/views/error.scala.html
index 14f3a38d2..8a1ab319c 100644
--- a/daikoku/app/views/error.scala.html
+++ b/daikoku/app/views/error.scala.html
@@ -28,8 +28,8 @@
   <div id="app">
     <div class="row" style="padding-top: 60px;">
       <header>
-        <div class="navbar shadow-sm fixed-top" style="background-color: var(--navbar-bg-color, #7f96af);">
-          <div class="container-fluid d-flex justify-content-center justify-content-sm-between"><a href="/" class="navbar-brand d-flex align-items-center" style="color: var(--navbar-brand-color, #fff);"><span>大黒天</span> &nbsp; Daikoku</a></div>
+        <div class="navbar shadow-sm fixed-top" style="background-color: var(--sidebar-bg-color, #7f96af);">
+          <div class="container-fluid d-flex justify-content-center justify-content-sm-between"><a href="/" class="navbar-brand d-flex align-items-center" style="color: var(--sidebar-text-color, #fff);"><span>大黒天</span> &nbsp; Daikoku</a></div>
         </div>
       </header>
       <div class="jumbotron col-12 text-center mt-5">
@@ -47,7 +47,7 @@ <h1 class="mb-2">@error</h1>
         @if(tenant.tenantMode.toString == "Some(Maintenance)" ||
         tenant.tenantMode.toString == "Some(Construction)" ||
         path.contains("/account")) {
-            <a href=@loginLink class="mt-5 btn btn-sm btn-access-negative" style="border: 1px solid #000">
+            <a href=@loginLink class="mt-5 btn btn-sm btn-outline-primary" style="border: 1px solid #000">
               Retourner à la page d'accueil
             </a>
         }
diff --git a/daikoku/app/views/response.scala.html b/daikoku/app/views/response.scala.html
index 18cc9c37b..9fdc101ff 100644
--- a/daikoku/app/views/response.scala.html
+++ b/daikoku/app/views/response.scala.html
@@ -28,8 +28,8 @@
         <div id="app">
             <div class="row" style="padding-top: 60px;">
                 <header>
-                    <div class="navbar shadow-sm fixed-top" style="background-color: var(--navbar-bg-color, #7f96af);">
-                        <div class="container-fluid d-flex justify-content-center justify-content-sm-between"><a href="/" class="navbar-brand d-flex align-items-center" style="color: var(--navbar-brand-color, #fff);"><span>
+                    <div class="navbar shadow-sm fixed-top" style="background-color: var(--sidebar-bg-color, #7f96af);">
+                        <div class="container-fluid d-flex justify-content-center justify-content-sm-between"><a href="/" class="navbar-brand d-flex align-items-center" style="color: var(--sidebar-text-color, #fff);"><span>
                             大黒天</span> &nbsp; Daikoku</a></div>
                     </div>
                 </header>
diff --git a/daikoku/javascript/src/apps/DaikokuApp.tsx b/daikoku/javascript/src/apps/DaikokuApp.tsx
index bed7b86aa..66af2658a 100644
--- a/daikoku/javascript/src/apps/DaikokuApp.tsx
+++ b/daikoku/javascript/src/apps/DaikokuApp.tsx
@@ -17,6 +17,7 @@ import {
   UnauthenticatedFooter,
   UnauthenticatedHome,
   UnauthenticatedTopBar,
+  AtomicDesign
 } from '../components/frontend';
 
 import { MessagesProvider, MyProfile, NotificationList } from '../components/backoffice';
@@ -148,6 +149,14 @@ export const DaikokuApp = () => {
                       </RouteWithTitle>
                     }
                   />
+                  <Route
+                    path="/atomicDesign"
+                    element={
+                      <RouteWithTitle title={`${tenant.title} - ${translate('Notifications')}`}>
+                        <AtomicDesign />
+                      </RouteWithTitle>
+                    }
+                  />
                   <Route
                     path="/join"
                     element={
@@ -401,7 +410,7 @@ export const DaikokuApp = () => {
               {['/settings', '/notifications', '/me', '/:teamId/settings'].map((r) => (
                 <Route key={r} path={r} element={<></>} />
               ))}
-              <Route path="/" element={<Footer isBackOffice={false} />} />
+              <Route path="*" element={<Footer isBackOffice={false} />} />
             </Routes>
           </ModalProvider>
 
diff --git a/daikoku/javascript/src/apps/DaikokuHomeApp.tsx b/daikoku/javascript/src/apps/DaikokuHomeApp.tsx
index db917b52d..e52cfe860 100644
--- a/daikoku/javascript/src/apps/DaikokuHomeApp.tsx
+++ b/daikoku/javascript/src/apps/DaikokuHomeApp.tsx
@@ -32,7 +32,7 @@ const AvatarInput = ({
           value={value}
           onChange={(e) => onChange(e.target.value)}
         />
-        <button type="button" className="btn btn-access btn-block" onClick={setGravatarLink}>
+        <button type="button" className="btn btn-outline-primary btn-block" onClick={setGravatarLink}>
           <i className="fas fa-user-circle me-1" />
           <Translation i18nkey="Set avatar from Gravatar">Set avatar from Gravatar</Translation>
         </button>
diff --git a/daikoku/javascript/src/components/adminbackoffice/audittrail/AuditTrailList.tsx b/daikoku/javascript/src/components/adminbackoffice/audittrail/AuditTrailList.tsx
index 2506e616c..639cd87c7 100644
--- a/daikoku/javascript/src/components/adminbackoffice/audittrail/AuditTrailList.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/audittrail/AuditTrailList.tsx
@@ -60,10 +60,10 @@ export const AuditTrailList = () => {
         return (
           <button
             type="button"
-            className="btn btn-sm btn-outline-primary"
+            className="btn btn-sm btn-outline-info"
             onClick={() => alert({
               title: translate('Event.details.modal.title'),
-              message: <pre style={{ backgroundColor: '#{"var(--section-bg-color, #f8f9fa)"}', color:'#{"var(--section-text-color, #6c757d)"}', padding: 10 }}>
+              message: <pre style={{ backgroundColor: '#{"var(--level2_bg-color, #f8f9fa)"}', color:'#{"var(--level2_text-color, #6c757d)"}', padding: 10 }}>
                 {JSON.stringify(value, null, 2)}
               </pre>
             })}
diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/ContentSideView.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/ContentSideView.tsx
index 72a6f47d9..0aea0c480 100644
--- a/daikoku/javascript/src/components/adminbackoffice/cms/ContentSideView.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/cms/ContentSideView.tsx
@@ -140,12 +140,12 @@ const TopActions = ({
       }}
       id="content_sideview_parent"
     >
-      <button className="btn btn-sm btn-outline-primary me-1" type="button" onClick={select}>
+      <button className="btn btn-sm btn-outline-info me-1" type="button" onClick={select}>
         <i className="fas fa-plus pe-1" />
         {translate('cms.content_side.new_action')}
       </button>
       <div className="d-flex">
-        <button className="btn btn-sm btn-outline-primary" onClick={() => navigate('revisions')}>
+        <button className="btn btn-sm btn-outline-info" onClick={() => navigate('revisions')}>
           Révisions
         </button>
         <button
@@ -192,7 +192,7 @@ const HelperView = ({
       )}
       {content.link && (
         <a
-          className="btn btn-sm btn-outline-primary my-2"
+          className="btn btn-sm btn-outline-info my-2"
           href={`https://maif.github.io/daikoku/swagger-ui/index.html${content.link}`}
           target="_blank"
           rel="noreferrer noopener"
@@ -299,7 +299,7 @@ export const ContentSideView = ({
     marginTop: editable ? '52px' : 0,
     flex: 1,
   }}>
-    <button className="btn btn-sm btn-outline-primary m-1" type="button" style={{ maxWidth: 200 }}
+    <button className="btn btn-sm btn-outline-info m-1" type="button" style={{ maxWidth: 200 }}
       onClick={() => navigate('/settings/pages', { state: { reload: true } })}>
       {translate('cms.create.back_to_pages')}
     </button>
diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx
index 4230cc1ea..3c04f8f3e 100644
--- a/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx
@@ -127,15 +127,17 @@ export const Create = (props: any) => {
     <div
       style={{
         height: '42px',
-        backgroundColor: '#fff',
+        // backgroundColor: '#fff',
         display: 'flex',
         alignItems: 'center',
-        boxShadow: selected ? '0 1px 3px rgba(25,25,25,.5)' : 'none', //@ts-ignore //FIXME
-        backgroundColor: 'var(--sidebar-bg-color, #f8f9fa)',
+        // boxShadow: selected ? '0 1px 3px rgba(25,25,25,.5)' : 'none', //@ts-ignore //FIXME
+        // backgroundColor: 'var(--sidebar-bg-color, #f8f9fa)',
         zIndex: selected ? 2 : 0,
+        borderTopLeftRadius: "4px",
+        borderTopRightRadius:"4px"
       }}
       onClick={onClick}
-      className="px-3"
+      className={`px-3 level2-link__with-bg ${selected ? 'level2-link__active-bg' : ''}`}
     >
       <button className="btn btn-sm" type="button">
         {title}
@@ -160,7 +162,7 @@ export const Create = (props: any) => {
         pages={props.pages}
         setContentType={setContentType}
         inValue={inValue.side} />}
-      <div className="p-2 d-flex flex-column" style={{ flex: 1, overflow: 'hidden' }}>
+      <div className="p-2 d-flex flex-column level2" style={{ flex: 1, overflow: 'hidden' }}>
         {editable && <div className="d-flex align-items-center mt-2">
           {[
             { title: translate('cms.create.draft'), id: 0, showPreview: () => setTab(0) },
diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/Pages.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/Pages.tsx
index aa8606889..f4523019f 100644
--- a/daikoku/javascript/src/components/adminbackoffice/cms/Pages.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/cms/Pages.tsx
@@ -95,7 +95,7 @@ export const Pages = ({
             <Link
               to={`/settings/pages/edit/${value.id}`}
               onClick={(e) => e.stopPropagation()}>
-              <button className="btn btn-outline-primary me-1" >
+              <button className="btn btn-outline-info me-1" >
                 <i className="fas fa-pen" />
               </button>
             </Link>
@@ -106,7 +106,7 @@ export const Pages = ({
               rel="noopener noreferrer"
               onClick={(e) => e.stopPropagation()}>
               <button
-                className="btn btn-outline-primary me-1"
+                className="btn btn-outline-info me-1"
                 disabled={!value.path}
               >
                 <i className="fas fa-eye" />
diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/Revisions.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/Revisions.tsx
index 01ed65174..7d0055caa 100644
--- a/daikoku/javascript/src/components/adminbackoffice/cms/Revisions.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/cms/Revisions.tsx
@@ -149,7 +149,7 @@ export default ({ }) => {
                     {item.value.user && (<div style={{ fontStyle: 'italic', fontWeight: 'bold' }}>
                       <span>{item.value.user.name}</span>
                     </div>)}
-                    {!isCurrentVersion && isSelected && (<button className="btn btn-sm btn-outline-primary mt-2" onClick={() => {
+                    {!isCurrentVersion && isSelected && (<button className="btn btn-sm btn-outline-info mt-2" onClick={() => {
                       confirm({ message: translate('cms.revisions.delete_sentence') })
                         .then((ok) => {
                           if (ok) {
diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/Sidebar.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/Sidebar.tsx
index 931fc7d1e..8f34d3583 100644
--- a/daikoku/javascript/src/components/adminbackoffice/cms/Sidebar.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/cms/Sidebar.tsx
@@ -151,7 +151,7 @@ export default React.memo(React.forwardRef<SideBarRef, any>(({ setFinalValue, up
             </span>
           </div>)}
           <div className="d-flex mt-3">
-            <button className="btn btn-sm btn-outline-primary me-1" style={{ flex: 1 }} type="button" onClick={() => navigate('/settings/pages', { state: { reload: true } })}>
+            <button className="btn btn-sm btn-outline-info me-1" style={{ flex: 1 }} type="button" onClick={() => navigate('/settings/pages', { state: { reload: true } })}>
               {translate('cms.create.back_to_pages')}
             </button>
             <button className="btn btn-sm btn-outline-success" style={{ flex: 1 }} type="button" onClick={updatePage}>
diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/index.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/index.tsx
index 3ad37d899..f583956fb 100644
--- a/daikoku/javascript/src/components/adminbackoffice/cms/index.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/cms/index.tsx
@@ -77,7 +77,7 @@ export const CMSOffice = () => {
         <h1 className="mb-0">Pages</h1>
         <div>
           <div className="btn-group dropstart">
-            <button type="button" className="btn btn-sm me-1 btn-access" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" className="btn btn-sm me-1 btn-outline-primary" data-bs-toggle="dropdown" aria-expanded="false">
               <i className="fas fa-cog"></i>
             </button>
             <ul className="dropdown-menu">
diff --git a/daikoku/javascript/src/components/adminbackoffice/importexport/ImportExport.tsx b/daikoku/javascript/src/components/adminbackoffice/importexport/ImportExport.tsx
index f13161967..3fa295c13 100644
--- a/daikoku/javascript/src/components/adminbackoffice/importexport/ImportExport.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/importexport/ImportExport.tsx
@@ -64,7 +64,7 @@ export const ImportExport = () => {
             <a
               href={`/api/state/export?download=true&export-audit-trail=${!!exportAuditTrail}`}
               target="_blank"
-              className="btn btn-outline-primary"
+              className="btn btn-outline-info"
             >
               <i className="fas fa-download me-1" />
               <Translation i18nkey="download state">download state</Translation>
@@ -73,7 +73,7 @@ export const ImportExport = () => {
               type="button"
               style={{ marginLeft: 10 }}
               onClick={importState}
-              className="btn btn-outline-primary"
+              className="btn btn-outline-info"
             >
               <i className="fas fa-upload me-1" />
               {uploading ? translate('importing ...') : translate('import state')}
@@ -93,7 +93,7 @@ export const ImportExport = () => {
             <Translation i18nkey="Mongo migration">Mongo migration</Translation>
           </h2>
           <div className="section p-3">
-            <button type="button" onClick={migrate} className="btn btn-outline-primary">
+            <button type="button" onClick={migrate} className="btn btn-outline-info">
               <i className="fas fa-database me-1" />
               {processing
                 ? translate('migration in progress ...')
diff --git a/daikoku/javascript/src/components/adminbackoffice/messages/messages.tsx b/daikoku/javascript/src/components/adminbackoffice/messages/messages.tsx
index a61c42624..e9e180631 100644
--- a/daikoku/javascript/src/components/adminbackoffice/messages/messages.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/messages/messages.tsx
@@ -149,7 +149,7 @@ export const AdminMessages = () => {
   });
 
   return (<div className="d-flex flex-row messages-container">
-    <div className="d-flex flex-column col-12 col-md-3 messages-sender">
+    <div className="d-flex flex-column col-12 col-md-3 pt-2 messages-sender-container level2">
       <Select
         placeholder={translate('Start new conversation')}
         className="mx-2 mb-2 reactSelect"
@@ -185,8 +185,8 @@ export const AdminMessages = () => {
       }), ['unreadCount', 'maxDate', 'user.name'], ['desc', 'desc', 'asc']) //todo: maybe order
         .map(({ chat, user, messages, unreadCount, maxDate }, idx) => {
           const lastMessageDateDisplayed = moment().diff(maxDate, 'days') > 1 ? maxDate.format('D MMM.') : maxDate.fromNow(true);
-          return (<div key={idx} className={classNames('p-3 cursor-pointer d-flex flex-row', {
-            'messages-sender__active': selectedChat === chat,
+          return (<div key={idx} className={classNames('p-3 cursor-pointer d-flex flex-row messages-sender level2-link__with-bg', {
+            'level2-link__active-bg': selectedChat === chat,
           })} onClick={() => setSelectedChat(chat)}>
             <div className="col-4">
               <img className="user-avatar" src={user.picture} alt="user-avatar" style={{ width: '100%' }} />
@@ -213,7 +213,7 @@ export const AdminMessages = () => {
     </div>
     <div className="col-12 col-sm-9">
       <div className="d-flex d-sm-none justify-content-end">
-        <button className="btn btn-sm btn-access-negative ">
+        <button className="btn btn-sm btn-outline-primary ">
           <ChevronLeft />
         </button>
       </div>
@@ -227,7 +227,7 @@ export const AdminMessages = () => {
               const sender = Option(users.find((u) => u._id === m.sender))
                 .map((u: any) => u.name)
                 .getOrElse(translate('Unknown user'));
-              return (<div key={`discussion-message-${idx}`} className="discussion-message d-flex flex-column">
+              return (<div key={`discussion-message-${idx}`} className="discussion-message d-flex flex-column level2">
                 <span className="sender">{sender}</span>
                 <span className="message">{m.message}</span>
                 <span className="info">
@@ -238,7 +238,7 @@ export const AdminMessages = () => {
           </div>);
         })}
         {selectedChat && lastClosedDates.find((x) => x.chat === selectedChat).date ? (<div className="d-flex flex-row justify-content-center my-1">
-          <button className="btn btn-sm btn-outline-primary" disabled={loading} onClick={() => getPreviousMessages(selectedChat)}>
+          <button className="btn btn-sm btn-outline-info" disabled={loading} onClick={() => getPreviousMessages(selectedChat)}>
             <Translation i18nkey="Load previous messages">Load previous messages</Translation>
           </button>
         </div>) : <></>}
diff --git a/daikoku/javascript/src/components/adminbackoffice/otoroshi/TenantOtoroshis.tsx b/daikoku/javascript/src/components/adminbackoffice/otoroshi/TenantOtoroshis.tsx
index 8ba74c70b..2d8c8e57e 100644
--- a/daikoku/javascript/src/components/adminbackoffice/otoroshi/TenantOtoroshis.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/otoroshi/TenantOtoroshis.tsx
@@ -54,7 +54,7 @@ export const TenantOtoroshis = () => {
               <Link to={`/settings/otoroshis/${otoroshi._id}`}>
                 <button
                   type="button"
-                  className="btn btn-outline-primary me-1"
+                  className="btn btn-outline-info me-1"
                   title={translate('Edit this settings')}
                 >
                   <i className="fas fa-pen" />
@@ -106,7 +106,7 @@ export const TenantOtoroshis = () => {
       <div>
         <button
           type="button"
-          className="btn btn-sm btn-outline-success mb-1 ms-1"
+          className="btn btn-sm btn-outline-success my-1 ms-1"
           title={translate('otoroshi.list.add.label')}
           onClick={(e) => {
             createNewSettings();
diff --git a/daikoku/javascript/src/components/adminbackoffice/otoroshi/initialization/steps.tsx b/daikoku/javascript/src/components/adminbackoffice/otoroshi/initialization/steps.tsx
index 05fdebed3..2d924d115 100644
--- a/daikoku/javascript/src/components/adminbackoffice/otoroshi/initialization/steps.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/otoroshi/initialization/steps.tsx
@@ -19,10 +19,10 @@ export const SelectionStepStep = (props: any) => {
   const { Translation } = useContext(I18nContext);
   return (
     <div className="d-flex">
-      <button className="btn btn-outline-primary me-2" onClick={() => props.goToServices()}>
+      <button className="btn btn-outline-info me-2" onClick={() => props.goToServices()}>
         <Translation i18nkey="Import Otoroshi services">Import Otoroshi Services</Translation>
       </button>
-      <button className="btn btn-outline-primary" onClick={() => props.goToApikeys()}>
+      <button className="btn btn-outline-info" onClick={() => props.goToApikeys()}>
         <Translation i18nkey="Import Otoroshi apikeys">Import Otoroshi Apikeys</Translation>
       </button>
     </div>
@@ -107,7 +107,7 @@ export const RecapServiceStep = (props: any) => {
           })}
       </ul>
       <div className="d-flex justify-content-end">
-        <button className="btn btn-outline-primary me-1" onClick={() => props.goBackToServices()}>
+        <button className="btn btn-outline-info me-1" onClick={() => props.goBackToServices()}>
           <i className="fas fa-chevron-left me-1"></i>
           <Translation i18nkey="Back">Back</Translation>
         </button>
@@ -167,7 +167,7 @@ export const RecapSubsStep = (props: any) => {
           })}
       </ul>
       <div className="d-flex justify-content-end">
-        <button className="btn btn-outline-primary me-1" onClick={() => props.goBackToServices()}>
+        <button className="btn btn-outline-info me-1" onClick={() => props.goBackToServices()}>
           <i className="fas fa-chevron-left me-1"></i>
           <Translation i18nkey="Back">Back</Translation>
         </button>
@@ -353,10 +353,10 @@ export const ServicesStep = (props: any) => {
     <div className="d-flex justify-content-between col-12 mt-5">
       <div />
       <div>
-        <button className="btn btn-access" disabled={props.currentStep === 1} onClick={() => props.goToStep(1)}>
+        <button className="btn btn-outline-primary" disabled={props.currentStep === 1} onClick={() => props.goToStep(1)}>
           <i className="fas fa-angle-double-left" />
         </button>
-        <button className="btn btn-access me-2" disabled={props.currentStep === 1} onClick={props.previousStep}>
+        <button className="btn btn-outline-primary me-2" disabled={props.currentStep === 1} onClick={props.previousStep}>
           <i className="fas fa-angle-left" />
         </button>
         {props.maybeCreatedApi.isDefined && (<button className="btn btn-outline-success" onClick={reset}>
@@ -368,10 +368,10 @@ export const ServicesStep = (props: any) => {
         {!props.maybeCreatedApi.isDefined && (<button className="btn btn-outline-success me-2" disabled={!selectedTeam || !!error?.name} onClick={getIt}>
           <Translation i18nkey="Import">Import this service</Translation>
         </button>)}
-        <button className="btn btn-access ms-2" onClick={nextStep}>
+        <button className="btn btn-outline-primary ms-2" onClick={nextStep}>
           <i className="fas fa-angle-right" />
         </button>
-        <button className="btn btn-access" disabled={props.currentStep === props.totalSteps} onClick={() => props.goToStep(props.totalSteps)}>
+        <button className="btn btn-outline-primary" disabled={props.currentStep === props.totalSteps} onClick={() => props.goToStep(props.totalSteps)}>
           <i className="fas fa-angle-double-right" />
         </button>
       </div>
diff --git a/daikoku/javascript/src/components/adminbackoffice/tenants/TenantList.tsx b/daikoku/javascript/src/components/adminbackoffice/tenants/TenantList.tsx
index 7e082ea91..24a521ba1 100644
--- a/daikoku/javascript/src/components/adminbackoffice/tenants/TenantList.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/tenants/TenantList.tsx
@@ -59,7 +59,7 @@ export const TenantList = () => {
             <Translation i18nkey="Tenant" isPlural>
               Tenants
             </Translation>
-            <a className="btn btn-sm btn-access-negative mb-1 ms-1" title={translate('Create a new tenant')} href="#" onClick={(e) => {
+            <a className="btn btn-sm btn-outline-primary mb-1 ms-1" title={translate('Create a new tenant')} href="#" onClick={(e) => {
               e.preventDefault();
               createNewTenant();
             }}>
diff --git a/daikoku/javascript/src/components/adminbackoffice/tenants/TenantStyleEdit.tsx b/daikoku/javascript/src/components/adminbackoffice/tenants/TenantStyleEdit.tsx
index 0219c6a6c..92a93b6eb 100644
--- a/daikoku/javascript/src/components/adminbackoffice/tenants/TenantStyleEdit.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/tenants/TenantStyleEdit.tsx
@@ -102,17 +102,17 @@ export const TenantStyleEdit = () => {
       <div className="d-flex flex-row justify-content-between mb-1">
         <div>
           <button
-            className="btn btn-access-negative btn-sm"
+            className="btn btn-outline-primary btn-sm"
             onClick={() => setState({ ...state, preview: !state.preview })}
           >
             <Translation i18nkey="Preview">Preview</Translation>
           </button>
-          <button className="btn btn-access-negative btn-sm ms-2" onClick={() => reset()}>
+          <button className="btn btn-outline-primary btn-sm ms-2" onClick={() => reset()}>
             <Translation i18nkey="Reset">Reset</Translation>
           </button>
         </div>
         <div>
-          <button className="btn btn-access-negative" onClick={() => goBack()}>
+          <button className="btn btn-outline-primary" onClick={() => goBack()}>
             <Translation i18nkey="Cancel">Cancel</Translation>
           </button>
           <button className="btn btn-outline-success ms-2" onClick={() => save()}>
diff --git a/daikoku/javascript/src/components/adminbackoffice/tenants/forms/CustomizationForm.tsx b/daikoku/javascript/src/components/adminbackoffice/tenants/forms/CustomizationForm.tsx
index 1181c7016..58d16cc63 100644
--- a/daikoku/javascript/src/components/adminbackoffice/tenants/forms/CustomizationForm.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/tenants/forms/CustomizationForm.tsx
@@ -134,7 +134,7 @@ export const CustomizationForm = ({ tenant, updateTenant }: { tenant?: ITenantFu
       format: format.code,
       label: () => <div className='d-flex flex-row align-items-center'>
         <div>{translate('CSS color theme')}</div>
-        <button type="button" className="btn btn-outline-primary ms-1" onClick={() => {
+        <button type="button" className="btn btn-outline-info ms-1" onClick={() => {
           const RedirectToUI = () => navigate(`/settings/tenants/${tenant?._id}/style`);
           if (Object.keys(formRef.current?.methods.formState.dirtyFields || {}).length) {
             openSaveOrCancelModal({
diff --git a/daikoku/javascript/src/components/adminbackoffice/tenants/forms/ThirdPartyPaymentForm.tsx b/daikoku/javascript/src/components/adminbackoffice/tenants/forms/ThirdPartyPaymentForm.tsx
index 5517fd991..8686e4f43 100644
--- a/daikoku/javascript/src/components/adminbackoffice/tenants/forms/ThirdPartyPaymentForm.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/tenants/forms/ThirdPartyPaymentForm.tsx
@@ -87,7 +87,7 @@ export const ThirdPartyPaymentForm = (props: { tenant: ITenantFull, updateTenant
           <div >
             <button
               type="button"
-              className="btn btn-outline-primary me-1"
+              className="btn btn-outline-info me-1"
               title={translate('Edit')}
               onClick={() => editSettings(settings.type, settings)}
             >
@@ -198,7 +198,7 @@ export const ThirdPartyPaymentForm = (props: { tenant: ITenantFull, updateTenant
       <div>
         <button
           type="button"
-          className="btn btn-sm btn-outline-success mb-1 ms-1"
+          className="btn btn-sm btn-outline-success my-1 ms-1"
           title={translate('third-party.payment.list.add.label')}
           onClick={() => {
             openFormModal({
diff --git a/daikoku/javascript/src/components/adminbackoffice/users/UserEdit.tsx b/daikoku/javascript/src/components/adminbackoffice/users/UserEdit.tsx
index dafa99313..b557e99b7 100644
--- a/daikoku/javascript/src/components/adminbackoffice/users/UserEdit.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/users/UserEdit.tsx
@@ -99,14 +99,14 @@ const Avatar = ({
           onChange={(e) => changePicture(e.target.value)}
         />
         <div className="d-flex mt-1 justify-content-end">
-          <button type="button" className="btn btn-outline-primary me-1" onClick={setGravatarLink} disabled={!rawValues?.email}>
+          <button type="button" className="btn btn-outline-info me-1" onClick={setGravatarLink} disabled={!rawValues?.email}>
             <i className="fas fa-user-circle me-1" />
             <Translation i18nkey="Set avatar from Gravatar">Set avatar from Gravatar</Translation>
           </button>
           {isOtherOriginThanLocal && (
             <button
               type="button"
-              className="btn btn-outline-primary"
+              className="btn btn-outline-info"
               onClick={setPictureFromProvider}
               disabled={!!rawValues?.pictureFromProvider}
             >
@@ -150,7 +150,7 @@ const PictureUpload = (props: { setFiles: (l: FileList | null) => void }) => {
       />
       <button
         type="button"
-        className="btn btn-access-negative"
+        className="btn btn-outline-primary"
         disabled={uploading}
         onClick={trigger}
         style={{ width: 100, height: 100, borderRadius: '50%' }}
diff --git a/daikoku/javascript/src/components/backoffice/apikeys/ApiKeyCustomName.tsx b/daikoku/javascript/src/components/backoffice/apikeys/ApiKeyCustomName.tsx
index 737e8e675..3b94625a8 100644
--- a/daikoku/javascript/src/components/backoffice/apikeys/ApiKeyCustomName.tsx
+++ b/daikoku/javascript/src/components/backoffice/apikeys/ApiKeyCustomName.tsx
@@ -30,7 +30,7 @@ export const ApiKeyCustomName = ({
       {changes && (
                 <div className="input-group-append">
                     <button
-            className="btn btn-access-negative"
+            className="btn btn-outline-primary"
             type="button"
             onClick={() => updateCustomName(customName)}
           >
diff --git a/daikoku/javascript/src/components/backoffice/apikeys/ShowApiSecret.tsx b/daikoku/javascript/src/components/backoffice/apikeys/ShowApiSecret.tsx
index f32708b65..8c050bf46 100644
--- a/daikoku/javascript/src/components/backoffice/apikeys/ShowApiSecret.tsx
+++ b/daikoku/javascript/src/components/backoffice/apikeys/ShowApiSecret.tsx
@@ -16,7 +16,7 @@ export function ShowApiSecret(props: any) {
         }}
       >
                 <span style={{ marginRight: 5, wordBreak: 'break-all' }}>{props.secret}</span>
-                <button onClick={toggle} type="button" className="btn btn-sm btn-access-negative">
+                <button onClick={toggle} type="button" className="btn btn-sm btn-outline-primary">
                     <i className="fas fa-eye-slash" /> Hide
         </button>
       </div>
@@ -33,7 +33,7 @@ export function ShowApiSecret(props: any) {
     >
       ************{' '}
       {props.secret && (
-                <button onClick={toggle} type="button" className="btn btn-sm btn-access-negative">
+                <button onClick={toggle} type="button" className="btn btn-sm btn-outline-primary">
                     <i className="fas fa-eye" /> Show
         </button>
       )}
diff --git a/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeys.tsx b/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeys.tsx
index 62cf919d1..7251b6592 100644
--- a/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeys.tsx
+++ b/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeys.tsx
@@ -56,7 +56,7 @@ export const TeamApiKeys = () => {
             <div style={{ minWidth: 100 }}>
               <Link
                 to={`/${currentTeam._humanReadableId}/settings/apikeys/${api._humanReadableId}/${api.currentVersion}`}
-                className="btn btn-sm btn-access-negative"
+                className="btn btn-sm btn-outline-primary"
               >
                 <i className="fas fa-eye me-1" />
                 <Translation i18nkey="Api key" plural={true}>Api keys</Translation>
@@ -90,7 +90,7 @@ export const TeamApiKeys = () => {
             </h1>
             <Link
               to={`/${currentTeam._humanReadableId}/settings/consumption`}
-              className="btn btn-sm btn-access-negative mb-2"
+              className="btn btn-sm btn-outline-primary mb-2"
             >
               <i className="fas fa-chart-bar me-1" />
               <Translation i18nkey="See Stats">See Stats</Translation>
@@ -102,7 +102,7 @@ export const TeamApiKeys = () => {
                 fetchItems={() => Services.subscribedApis(currentTeam._id)}
                 ref={tableRef}
               />
-              <button className="btn btn-sm btn-danger-negative mt-1" onClick={() => cleanSubs(currentTeam)}>
+              <button className="btn btn-sm btn-outline-danger mt-1" onClick={() => cleanSubs(currentTeam)}>
                 <Translation i18nkey="clean archived apikeys">clean archived apikeys</Translation>
               </button>
             </div>
diff --git a/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx b/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx
index 48575fdd6..ea9a9517f 100644
--- a/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx
+++ b/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx
@@ -489,10 +489,10 @@ const ApiKeyCard = ({
       <div className="col-12 col-sm-6 col-md-4 mb-2">
         <div className="card">
           <div className="card-header" style={{ position: "relative" }}>
-            <div className="d-flex align-items-center justify-content-between">
+            <div className="d-flex align-items-center justify-content-between flex-column">
               {!settingMode &&
                 (!editMode ? (
-                  <>
+                  <div className="d-flex align-items-center justify-content-between">
                     <BeautifulTitle
                       title={customName || ""}
                       style={{
@@ -510,12 +510,12 @@ const ApiKeyCard = ({
                     <button
                       disabled={!subscription.enabled}
                       type="button"
-                      className="btn btn-sm btn-access-negative ms-2"
+                      className="btn btn-sm btn-outline-primary ms-2"
                       onClick={() => setEditMode(true)}
                     >
                       <i className="fas fa-pen cursor-pointer a-fake" />
                     </button>
-                  </>
+                  </div>
                 ) : (
                   <div className="input-group">
                     <input
@@ -547,16 +547,12 @@ const ApiKeyCard = ({
                   </Translation>
                 </h3>
               ) : (
-                <span
+                <div
                   className="badge bg-secondary"
-                  style={{
-                    position: "absolute",
-                    left: "1.25rem",
-                    bottom: "-8px",
-                  }}
+                  style={{ fontSize: "12px" }}
                 >
-                  {formatPlanType(plan, translate)}
-                </span>
+                  Type : {formatPlanType(plan, translate)}
+                </div>
               )}
             </div>
           </div>
@@ -583,7 +579,7 @@ const ApiKeyCard = ({
                       >
                         <Link
                           to={statsLink}
-                          className="btn btn-sm btn-access-negative ms-1"
+                          className="btn btn-sm btn-outline-primary ms-1"
                         >
                           <i className="fas fa-chart-bar" />
                         </Link>
@@ -593,7 +589,7 @@ const ApiKeyCard = ({
                       <button
                         type="button"
                         disabled={!subscription.enabled}
-                        className="btn btn-sm btn-access-negative ms-1"
+                        className="btn btn-sm btn-outline-primary ms-1"
                         onClick={() => {
                           let credentials = apiKeyValues[activeTab];
                           navigator.clipboard
@@ -613,7 +609,7 @@ const ApiKeyCard = ({
                       <BeautifulTitle title={translate("Setup rotation")}>
                         <button
                           type="button"
-                          className="btn btn-sm btn-access-negative ms-1"
+                          className="btn btn-sm btn-outline-primary ms-1"
                           onClick={() => setSettingMode(true)}
                         >
                           <i className="fas fa-history" />
@@ -824,7 +820,7 @@ const ApiKeyCard = ({
                       </div>
                     )}
                     <button
-                      className={`btn btn-sm btn-outline-primary mx-auto d-flex ${
+                      className={`btn btn-sm btn-outline-info mx-auto d-flex ${
                         showAggregatePlan ? "mt-3" : ""
                       }`}
                       onClick={() => setAggregatePlan(!showAggregatePlan)}
diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx
index c0030680d..ed75f25bd 100644
--- a/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx
+++ b/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx
@@ -69,7 +69,7 @@ const CreateNewVersionButton = ({
   };
 
   return (
-    <button onClick={promptVersion} className="btn btn-sm btn-outline-primary ms-1">
+    <button onClick={promptVersion} className="btn btn-sm btn-outline-info ms-1">
       <Plus />
     </button>
   );
@@ -206,7 +206,7 @@ export const TeamApi = (props: { creation: boolean }) => {
     if (currentTeam && api) {
       const backButton = (
         <Link
-          className="d-flex justify-content-around mt-3 align-items-center"
+          className="d-flex justify-content-around mt-3 align-items-center companion-link"
           style={{
             border: 0,
             background: 'transparent',
@@ -239,7 +239,7 @@ export const TeamApi = (props: { creation: boolean }) => {
                   component: (
                     <Link
                       to={`/${currentTeam._humanReadableId}/${params.apiId}/${params.versionId}/description`}
-                      className="btn btn-sm btn-access-negative mb-2">
+                      className="btn btn-sm btn-outline-primary mb-2">
                       {translate('View this Api')}
                     </Link>
                   ),
@@ -271,14 +271,14 @@ export const TeamApi = (props: { creation: boolean }) => {
           {props.creation ? (<h2>{_api.name}</h2>) : (<div className="d-flex align-items-center justify-content-between" style={{ flex: 1 }}>
             <h2 className="me-2">{_api.name} {additionalHeader ? ` - ${additionalHeader}` : ''}</h2>
           </div>)}
-          <button onClick={() => toggleExpertMode()} className="btn btn-sm btn-outline-primary">
+          <button onClick={() => toggleExpertMode()} className="btn btn-sm btn-outline-info">
             {expertMode && translate('Standard mode')}
             {!expertMode && translate('Expert mode')}
           </button>
         </div>
         <div className="row">
           <div className="section col container-api">
-            <div className="mt-2">
+            <div className="my-2">
               {tab === 'documentation' && (
                 <TeamApiDocumentation
                   creationInProgress={props.creation}
diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApiDocumentation.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApiDocumentation.tsx
index f883d0986..115d0b6f5 100644
--- a/daikoku/javascript/src/components/backoffice/apis/TeamApiDocumentation.tsx
+++ b/daikoku/javascript/src/components/backoffice/apis/TeamApiDocumentation.tsx
@@ -369,7 +369,7 @@ export const TeamApiDocumentation = (props: TeamApiDocumentationProps) => {
                   <button
                     onClick={props.importPage}
                     type="button"
-                    className="btn btn-sm btn-outline-primary">
+                    className="btn btn-sm btn-outline-info">
                     <i className="fas fa-download" />
                   </button>
                 }
diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApiGroup.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApiGroup.tsx
index 6b5028d43..2058dc01a 100644
--- a/daikoku/javascript/src/components/backoffice/apis/TeamApiGroup.tsx
+++ b/daikoku/javascript/src/components/backoffice/apis/TeamApiGroup.tsx
@@ -243,14 +243,14 @@ export const TeamApiGroup = () => {
           {creation ? (<h2>{_apiGroup.name}</h2>) : (<div className="d-flex align-items-center justify-content-between" style={{ flex: 1 }}>
             <h2 className="me-2">{_apiGroup.name}{additionalHeader ? ` - ${additionalHeader}` : ''}</h2>
           </div>)}
-          <button onClick={() => toggleExpertMode()} className="btn btn-sm btn-outline-primary">
+          <button onClick={() => toggleExpertMode()} className="btn btn-sm btn-outline-info">
             {expertMode && translate('Standard mode')}
             {!expertMode && translate('Expert mode')}
           </button>
         </div>
         <div className="row">
           <div className="section col container-api">
-            <div className="mt-2">
+            <div className="my-2">
               {params.tab === 'infos' && (<div>
                 <Form
                   schema={schema(_apiGroup, currentTeam)}
diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApiPost.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApiPost.tsx
index dfe1e2147..d4ac39c47 100644
--- a/daikoku/javascript/src/components/backoffice/apis/TeamApiPost.tsx
+++ b/daikoku/javascript/src/components/backoffice/apis/TeamApiPost.tsx
@@ -142,7 +142,7 @@ export function TeamApiPost({
         return (
           <div>
             <button
-              className='btn btn-sm btn-outline-primary me-2'
+              className='btn btn-sm btn-outline-info me-2'
               onClick={() => openFormModal({
                 title: translate('team_api_post.update'),
                 schema,
diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApiPricings.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApiPricings.tsx
index feedf770b..743b7bcc3 100644
--- a/daikoku/javascript/src/components/backoffice/apis/TeamApiPricings.tsx
+++ b/daikoku/javascript/src/components/backoffice/apis/TeamApiPricings.tsx
@@ -289,7 +289,7 @@ const CustomMetadataInput = (props: {
     <div>
       {!props.value?.length && (
         <div className="col-sm-10">
-          <button type="button" className="btn btn-outline-primary" onClick={e => addFirst(e)}>
+          <button type="button" className="btn btn-outline-info" onClick={e => addFirst(e)}>
             <i className="fas fa-plus" />{' '}
           </button>
         </div>
@@ -333,7 +333,7 @@ const CustomMetadataInput = (props: {
             {idx === (props.value?.length || 0) - 1 && (
               <button
                 type="button"
-                className="input-group-text btn btn-outline-primary"
+                className="input-group-text btn btn-outline-info"
                 onClick={addNext}
               >
                 <i className="fas fa-plus" />{' '}
@@ -408,10 +408,10 @@ const Card = ({
         zIndex: '100',
       }}>
         {plan.visibility === PRIVATE && (
-          <i className="fas fa-lock" />
+          <i className="fas fa-lock" style={{ color: "$card-header-text-color" }} />
         )}
         {isDefault && (
-          <i className="fas fa-star" />
+          <i className="fas fa-star" style={{ color: "$card-header-text-color" }}/>
         )}
       </div>
       {!creation && (
@@ -451,7 +451,7 @@ const Card = ({
             </span>
             <div className="dropdown-divider" />
             <span
-              className="dropdown-item cursor-pointer btn-danger-negative"
+              className="dropdown-item cursor-pointer btn-outline-danger"
               onClick={deleteWithConfirm}
             >
               {tenant.display === 'environment' ? translate('pricing.delete.env.btn.label') : translate('Delete plan')}
@@ -459,7 +459,7 @@ const Card = ({
           </div>
         </div>
       )}
-      <div className="card-img-top card-link card-skin" data-holder-rendered="true">
+      <div className="card-img-top card-link card-header" data-holder-rendered="true">
         <span>{plan.customName || formatPlanType(plan, translate)}</span>
       </div>
       <div className="card-body plan-body d-flex flex-column">
@@ -1324,7 +1324,7 @@ export const TeamApiPricings = (props: Props) => {
   const availablePlans = queryPlans.data && !isError(queryPlans.data) && tenant.environments.filter(e => (queryPlans.data as Array<IUsagePlan>).every(p => p.customName !== e))
   return (<div className="d-flex col flex-column pricing-content">
     <div className="album">
-      {planForEdition && mode !== possibleMode.list && <i onClick={cancelEdition} className="fa-regular fa-circle-left fa-lg cursor-pointer" style={{ marginTop: 0 }} />}
+      {planForEdition && mode !== possibleMode.list && <i onClick={cancelEdition} className="fa-regular fa-circle-left fa-lg cursor-pointer a-fake" style={{ marginTop: 0 }} />}
       <div className="container">
         <div className="d-flex mb-3">
           {!planForEdition && <button
@@ -1334,7 +1334,7 @@ export const TeamApiPricings = (props: Props) => {
             className="btn btn-outline-success btn-sm me-1">
             {tenant.display === 'environment' ? translate('pricing.add.new.env.btn.label') : translate('add a new plan')}
           </button>}
-          {!planForEdition && !!props.api.parent && (<button onClick={importPlan} type="button" className="btn btn-outline-primary me-1" style={{ marginTop: 0 }}>
+          {!planForEdition && !!props.api.parent && (<button onClick={importPlan} type="button" className="btn btn-outline-info me-1" style={{ marginTop: 0 }}>
             {tenant.display === 'environment' ? translate('pricing.import.env.btn.label') : translate('import a plan')}
           </button>)}
         </div>
@@ -1646,7 +1646,7 @@ const SubscriptionProcessEditor = (props: SubProcessProps) => {
     return (
       <div className='d-flex flex-column align-items-center'>
         <div> {translate('api.pricings.no.step.explanation')}</div>
-        <button className='btn btn-access-negative my-2' onClick={() => addProcess(0)}>
+        <button className='btn btn-outline-primary my-2' onClick={() => addProcess(0)}>
           {translate('api.pricings.add.first.step.btn.label')}
         </button>
       </div>
@@ -1655,7 +1655,7 @@ const SubscriptionProcessEditor = (props: SubProcessProps) => {
 
   return (
     <div className='d-flex flex-row align-items-center'>
-      <button className='btn btn-access-negative sortable-list-btn' onClick={() => addProcess(0)}><Plus /></button>
+      <button className='btn btn-outline-primary sortable-list-btn' onClick={() => addProcess(0)}><Plus /></button>
       <SortableList
         items={props.value.subscriptionProcess}
         onChange={subscriptionProcess => props.savePlan({ ...props.value, subscriptionProcess })}
@@ -1680,11 +1680,11 @@ const SubscriptionProcessEditor = (props: SubProcessProps) => {
                       'justify-content-between': !isValidationStepPayment(item),
                       'justify-content-end': isValidationStepPayment(item),
                     })}>
-                      {isValidationStepEmail(item) ? <button className='btn btn-sm btn-outline-primary' onClick={() => editMailStep(item)}><Settings size={15} /></button> : <></>}
-                      {isValidationStepHttpRequest(item) ? <button className='btn btn-sm btn-outline-primary' onClick={() => editHttpRequestStep(item)}><Settings size={15} /></button> : <></>}
+                      {isValidationStepEmail(item) ? <button className='btn btn-sm btn-outline-info' onClick={() => editMailStep(item)}><Settings size={15} /></button> : <></>}
+                      {isValidationStepHttpRequest(item) ? <button className='btn btn-sm btn-outline-info' onClick={() => editHttpRequestStep(item)}><Settings size={15} /></button> : <></>}
                       {isValidationStepTeamAdmin(item) ?
                         <button
-                          className='btn btn-sm btn-outline-primary'
+                          className='btn btn-sm btn-outline-info'
                           onClick={() => openCustomModal({
                             title: translate('motivation.form.modal.title'),
                             content: <MotivationForm value={item} saveMotivation={({ schema, formatter }) => {
@@ -1703,7 +1703,7 @@ const SubscriptionProcessEditor = (props: SubProcessProps) => {
                     step={item}
                     tenant={props.tenant} />
                 </SortableItem>
-                <button className='btn btn-access-negative sortable-list-btn' onClick={() => addProcess(idx + 1)}><Plus /></button>
+                <button className='btn btn-outline-primary sortable-list-btn' onClick={() => addProcess(idx + 1)}><Plus /></button>
               </>
             )
           }
@@ -1903,7 +1903,7 @@ const TeamApiPricingDocumentation = (props: TeamApiPricingDocumentationProps) =>
     return (
       <div>
         <div className='alert alert-warning' role="alert">{translate('documentation.not.setted.message')}</div>
-        <button type='button' className='btn btn-outline-primary' onClick={createPlanDoc}>{translate('documentation.add.button.label')}</button>
+        <button type='button' className='btn btn-outline-info' onClick={createPlanDoc}>{translate('documentation.add.button.label')}</button>
       </div>
     )
   } else {
diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApiSubscriptions.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApiSubscriptions.tsx
index 2ab42ae8d..576881cc8 100644
--- a/daikoku/javascript/src/components/backoffice/apis/TeamApiSubscriptions.tsx
+++ b/daikoku/javascript/src/components/backoffice/apis/TeamApiSubscriptions.tsx
@@ -190,7 +190,7 @@ export const TeamApiSubscriptions = ({ api, currentTeam }: TeamApiSubscriptionsP
               <span>{info.getValue()}</span>
               <BeautifulTitle title={title} html>
 
-                <div className="badge iconized">A</div>
+                <div className="badge badge-custom">A</div>
               </BeautifulTitle>
             </div>
           );
@@ -267,17 +267,17 @@ export const TeamApiSubscriptions = ({ api, currentTeam }: TeamApiSubscriptionsP
         const sub = info.row.original;
         return (<div className="btn-group">
           <BeautifulTitle title={translate('Update metadata')}>
-            <button key={`edit-meta-${sub._id}`} type="button" className="btn btn-sm btn-access-negative me-1" onClick={() => updateMeta(sub)}>
+            <button key={`edit-meta-${sub._id}`} type="button" className="btn btn-sm btn-outline-primary me-1" onClick={() => updateMeta(sub)}>
               <i className="fas fa-pen" />
             </button>
           </BeautifulTitle>
           <BeautifulTitle title={translate('Refresh secret')}>
-            <button key={`edit-meta-${sub._id}`} type="button" className="btn btn-sm btn-access-negative btn-outline-danger me-1" onClick={() => regenerateSecret(sub)}>
+            <button key={`edit-meta-${sub._id}`} type="button" className="btn btn-sm btn-outline-primary btn-outline-danger me-1" onClick={() => regenerateSecret(sub)}>
               <i className="fas fa-sync" />
             </button>
           </BeautifulTitle>
           <BeautifulTitle title={translate('api.delete.subscription')}>
-            <button key={`edit-meta-${sub._id}`} type="button" className="btn btn-sm btn-access-negative btn-outline-danger" onClick={() => deleteSubscription(sub)}>
+            <button key={`edit-meta-${sub._id}`} type="button" className="btn btn-sm btn-outline-primary btn-outline-danger" onClick={() => deleteSubscription(sub)}>
               <i className="fas fa-trash-alt"></i>
             </button>
           </BeautifulTitle>
@@ -381,7 +381,7 @@ export const TeamApiSubscriptions = ({ api, currentTeam }: TeamApiSubscriptionsP
       <Can I={manage} a={API} dispatchError={true} team={currentTeam}>
         <div className="px-2">
           <div className='d-flex flex-row justify-content-start align-items-center mb-2'>
-            <button className='btn btn-sm btn-outline-primary' onClick={() => openFormModal({
+            <button className='btn btn-sm btn-outline-info' onClick={() => openFormModal({
               actionLabel: translate("Filter"),
               onSubmit: data => {
                 setFilters(data)
diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApis.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApis.tsx
index 2a0c2750c..a6878c881 100644
--- a/daikoku/javascript/src/components/backoffice/apis/TeamApis.tsx
+++ b/daikoku/javascript/src/components/backoffice/apis/TeamApis.tsx
@@ -37,7 +37,7 @@ export const TeamApis = () => {
           return (
             <div className="d-flex flex-row justify-content-between">
               <span>{info.getValue()}</span>
-              <div className="badge iconized">API Group</div>
+              <div className="badge badge-custom">API Group</div>
             </div>
           );
         }
@@ -70,7 +70,7 @@ export const TeamApis = () => {
             <Link
               rel="noopener"
               to={viewUrl}
-              className="btn btn-sm btn-outline-primary me-1"
+              className="btn btn-sm btn-outline-info me-1"
               title="View this Api"
             >
               <i className="fas fa-eye" />
@@ -79,7 +79,7 @@ export const TeamApis = () => {
               <Link
                 key={`edit-${api._humanReadableId}`}
                 to={editUrl}
-                className="btn btn-sm btn-outline-primary me-1"
+                className="btn btn-sm btn-outline-info me-1"
                 title="Edit this Api"
               >
                 <i className="fas fa-pen" />
diff --git a/daikoku/javascript/src/components/backoffice/assets/AssetsList.tsx b/daikoku/javascript/src/components/backoffice/assets/AssetsList.tsx
index 1b7af533d..bdece5c38 100644
--- a/daikoku/javascript/src/components/backoffice/assets/AssetsList.tsx
+++ b/daikoku/javascript/src/components/backoffice/assets/AssetsList.tsx
@@ -117,7 +117,7 @@ const ReplaceButton = (props: any) => {
 
   return (
     <>
-      <button type="button" onClick={trigger} className="btn btn-sm btn-outline-primary">
+      <button type="button" onClick={trigger} className="btn btn-sm btn-outline-info">
         <i className="fas fa-retweet" />
       </button>
       <input
@@ -269,7 +269,7 @@ export const AssetsList = ({
               <button
                 type="button"
                 onClick={() => readAndUpdate(item)}
-                className="btn btn-sm btn-outline-primary"
+                className="btn btn-sm btn-outline-info"
               >
                 <i className="fas fa-pen" />
               </button>
@@ -283,7 +283,7 @@ export const AssetsList = ({
             />
             <a href={assetLink(item.meta.asset, false)} target="_blank" rel="noreferrer noopener">
               <button
-                className="btn btn-sm btn-outline-primary"
+                className="btn btn-sm btn-outline-info"
                 style={{ borderRadius: '0px', marginLeft: '0.15rem' }}
               >
                 <i className="fas fa-eye" />
@@ -291,7 +291,7 @@ export const AssetsList = ({
             </a>
             <a href={assetLink(item.meta.asset, true)} target="_blank" rel="noreferrer noopener">
               <button
-                className="btn btn-sm btn-outline-primary me-1"
+                className="btn btn-sm btn-outline-info me-1"
                 style={{ borderRadius: '0px', marginLeft: '0.15rem' }}
               >
                 <i className="fas fa-download" />
@@ -430,7 +430,7 @@ export const AssetsList = ({
       <div className="row">
         <div className="col-12 mb-3 d-flex justify-content-end">
           <button
-            className='btn btn-outline-success'
+            className='btn mt-1 me-2 btn-outline-success'
             onClick={() => openFormModal({
               title: translate("Add asset"),
               schema,
diff --git a/daikoku/javascript/src/components/backoffice/billing/TeamBilling.tsx b/daikoku/javascript/src/components/backoffice/billing/TeamBilling.tsx
index bcb7face3..a626d80d8 100644
--- a/daikoku/javascript/src/components/backoffice/billing/TeamBilling.tsx
+++ b/daikoku/javascript/src/components/backoffice/billing/TeamBilling.tsx
@@ -221,7 +221,7 @@ export const TeamBilling = () => {
                 <div className="row month__and__total">
                   <div className="col-12 month__selector d-flex align-items-center">
                     <MonthPicker updateDate={setDate} value={date} />
-                    <button className="btn btn-sm btn-access-negative ms-1" onClick={sync}>
+                    <button className="btn btn-sm btn-outline-primary ms-1" onClick={sync}>
                       <i className="fas fa-sync-alt" />
                     </button>
                     {getLastDate()}
diff --git a/daikoku/javascript/src/components/backoffice/billing/TeamIncome.tsx b/daikoku/javascript/src/components/backoffice/billing/TeamIncome.tsx
index 8e0b4f689..2e9a570e7 100644
--- a/daikoku/javascript/src/components/backoffice/billing/TeamIncome.tsx
+++ b/daikoku/javascript/src/components/backoffice/billing/TeamIncome.tsx
@@ -149,7 +149,7 @@ export const TeamIncome = () => {
                       setDate(date);
                       getBillingData(date);
                     }} value={date} />
-                    <button className="btn btn-sm btn-access-negative ms-1" onClick={sync}>
+                    <button className="btn btn-sm btn-outline-primary ms-1" onClick={sync}>
                       <i className="fas fa-sync-alt" />
                     </button>
                     {lastDate ? (<i className="ms-1">
diff --git a/daikoku/javascript/src/components/backoffice/me/MyProfile.tsx b/daikoku/javascript/src/components/backoffice/me/MyProfile.tsx
index 38dc15a68..ec064ccc6 100644
--- a/daikoku/javascript/src/components/backoffice/me/MyProfile.tsx
+++ b/daikoku/javascript/src/components/backoffice/me/MyProfile.tsx
@@ -236,14 +236,14 @@ const Avatar = ({
                     onChange={(e) => changePicture(e.target.value)}
                 />
                 <div className="d-flex mt-1 justify-content-end">
-                    <button type="button" className="btn btn-outline-primary me-1" onClick={setGravatarLink}>
+                    <button type="button" className="btn btn-outline-info me-1" onClick={setGravatarLink}>
                         <i className="fas fa-user-circle me-1"/>
                         <Translation i18nkey="Set avatar from Gravatar">Set avatar from Gravatar</Translation>
                     </button>
                     {isOtherOriginThanLocal && (
                         <button
                             type="button"
-                            className="btn btn-outline-primary"
+                            className="btn btn-outline-info"
                             onClick={setPictureFromProvider}
                             disabled={rawValues.pictureFromProvider}
                         >
@@ -292,7 +292,7 @@ const PictureUpload = (props: PictureUploadProps) => {
             />
             <button
                 type="button"
-                className="btn btn-access-negative"
+                className="btn btn-outline-primary"
                 disabled={uploading}
                 onClick={trigger}
                 style={{width: 100, height: 100, borderRadius: '50%'}}
@@ -597,7 +597,7 @@ export const MyProfile = () => {
                   <div className='d-flex align-items-center mt-3' style={{gap: '.25rem'}}>
                     <button
                         type="button"
-                        className="btn btn-sm btn-access-negative m-1"
+                        className="btn btn-sm btn-outline-primary m-1"
                         onClick={resetToken}
                     >
                       Reset token
@@ -605,7 +605,7 @@ export const MyProfile = () => {
                     <button
                         type="button"
                         disabled={copiedTimeout}
-                        className="btn btn-sm btn-access-negative m-1"
+                        className="btn btn-sm btn-outline-primary m-1"
                         onClick={copyToken}
                     >
                         {copiedTimeout ? <span>
diff --git a/daikoku/javascript/src/components/backoffice/notifications/NotificationList.tsx b/daikoku/javascript/src/components/backoffice/notifications/NotificationList.tsx
index a073f6ece..40fecdd3b 100644
--- a/daikoku/javascript/src/components/backoffice/notifications/NotificationList.tsx
+++ b/daikoku/javascript/src/components/backoffice/notifications/NotificationList.tsx
@@ -338,7 +338,7 @@ export const NotificationList = () => {
             })}
           </div>
           {(state as any).nextIsPending && <Spinner />}
-          {!(state as any).nextIsPending && moreBtnIsDisplay() && (<button className="btn btn-access-negative my-2 ms-2" onClick={() => getMoreNotifications()}>
+          {!(state as any).nextIsPending && moreBtnIsDisplay() && (<button className="btn btn-outline-primary my-2 ms-2" onClick={() => getMoreNotifications()}>
             <Translation i18nkey="more">more</Translation>
           </button>)}
         </div>
diff --git a/daikoku/javascript/src/components/backoffice/teams/TeamEdit.tsx b/daikoku/javascript/src/components/backoffice/teams/TeamEdit.tsx
index ef8ea8f44..3ebd17855 100644
--- a/daikoku/javascript/src/components/backoffice/teams/TeamEdit.tsx
+++ b/daikoku/javascript/src/components/backoffice/teams/TeamEdit.tsx
@@ -57,7 +57,7 @@ const Avatar = ({
           onChange={(e) => onChange(e.target.value)}
         />
         <div className='d-flex justify-content-end'>
-          <button type="button" className="btn btn-outline-primary me-1" onClick={setGravatarLink} disabled={!rawValues.contact}>
+          <button type="button" className="btn btn-outline-info me-1" onClick={setGravatarLink} disabled={!rawValues.contact}>
             <i className="fas fa-user-circle me-1" />
             <Translation i18nkey="Set avatar from Gravatar">Set avatar from Gravatar</Translation>
           </button>
@@ -229,7 +229,7 @@ export const TeamEdit = () => {
         {!currentTeam.verified && !alreadyClicked &&
           <div className="alert alert-warning" role="alert">
             {translate('team.email.notVerified.info')}
-            <button className="btn btn-outline-warning d-flex align-items-end" onClick={() => {
+            <button className="btn btn-outline-danger d-flex align-items-end" onClick={() => {
               Services.sendEmailVerification(currentTeam._id)
                 .then((r) => {
                   if (isError(r)) {
diff --git a/daikoku/javascript/src/components/frontend/AtomicDesign.tsx b/daikoku/javascript/src/components/frontend/AtomicDesign.tsx
new file mode 100644
index 000000000..5e5b66130
--- /dev/null
+++ b/daikoku/javascript/src/components/frontend/AtomicDesign.tsx
@@ -0,0 +1,198 @@
+import { useContext, useEffect } from "react";
+import Select from "react-select";
+
+export const AtomicDesign = () => {
+  const demoList = [
+    {label: "Service groups", options: ['1'] },
+    {label: "Services", options: ['1'] },
+    {label: "Routes", options: ['1'] },
+    ].map((team) => {
+      return { value: team, label: team.label }
+    });
+
+  return (
+    <main role="main">
+      <section className="container">
+        <div className="row">
+          <div className="col-12">
+            <h1 className="mt-3">Colors</h1>
+            Customizable
+            <div style={{ display: "flex" }}>
+              <span
+                style={{
+                  width: 100,
+                  height: 100,
+                  backgroundColor: "var(--error-color)",
+                  color: "#000",
+                }}
+              >
+                var(--error-color)
+              </span>
+              <span
+                style={{
+                  width: 100,
+                  height: 100,
+                  backgroundColor: "var(--success-color)",
+                  color: "#000",
+                }}
+              >
+                var(--success-color)
+              </span>
+              <span
+                style={{
+                  width: 100,
+                  height: 100,
+                  backgroundColor: "var(--info-color)",
+                  color: "#000",
+                }}
+              >
+                var(--info-color)
+              </span>
+              <span
+                style={{
+                  width: 100,
+                  height: 100,
+                  backgroundColor: "var(--warning-color)",
+                  color: "#000",
+                }}
+              >
+                var(--warning-color)
+              </span>
+              <span
+                style={{
+                  width: 100,
+                  height: 100,
+                  backgroundColor: "var(--danger-color)",
+                  color: "#000",
+                }}
+              >
+                var(--danger-color)
+              </span>
+            </div>
+            
+            <h1 className="mt-3">Buttons</h1>
+            Customizable :
+            <button className="btn-outline-primary btn ms-2">
+              btn btn-outline-primary
+            </button>
+            <br />
+            Mix with customizable Colors :
+            <button className="btn-outline-danger btn my-1 ms-2">
+              btn btn-outline-danger
+            </button>
+            <button className="btn-outline-success btn mx-1 my-1">
+              btn btn-outline-success
+            </button>
+            <button className="btn-outline-info btn mx-1 my-1">
+              btn btn-outline-info
+            </button>
+            <h2>Buttons size</h2>
+            <button className="btn-danger btn">button (default)</button>
+            <button className="btn-danger btn btn-sm mx-2">btn-sm</button>
+            <button className="btn-danger btn btn-lg">btn-lg</button>
+            <h1 className="mt-3">Badges</h1>
+            Customizable :
+            <div className="badge badge-custom ms-2">badge-custom</div>
+            <h1 className="mt-3">Content</h1>
+            <div className="d-flex flex-column">
+              <div className="d-flex">
+                <div
+                  style={{
+                    width: 120,
+                    backgroundColor: "var(--sidebar-bg-color)",
+                    color: "var(--sidebar-text-color)",
+                  }}
+                >
+                  sidebar
+                  <hr />
+                  <a href="" className="notification-link-color">
+                    link
+                  </a>
+                </div>
+                <div
+                  style={{
+                    width: 120,
+                    backgroundColor: "var(--menu-bg-color)",
+                    color: "var(--menu-text-color)",
+                  }}
+                >
+                  companion
+                  <hr />
+                  <a className="companion-link" href="">
+                    link
+                  </a>
+                  <br />
+                </div>
+
+                <div
+                  style={{
+                    width: 600,
+                    border: "1px solid",
+                    padding: 10,
+                  }}
+                  className="level1"
+                >
+                  level 1
+                  <hr />
+                  <a className="level1-link" href="">
+                    link
+                  </a>
+                  <div
+                    className="level2"
+                    style={{
+                      width: 300,
+                      margin: "0 auto",
+                      padding: 10,
+                    }}
+                  >
+                    level 2
+                    <hr />
+                    <a className="level2-link" href="">
+                      link
+                    </a>
+                    <div
+                      className="level3"
+                      style={{
+                        width: 200,
+                        margin: "0 auto",
+                        padding: 10,
+                      }}
+                    >
+                      level 3
+                      <hr />
+                      <a className="level3-link" href="">
+                        link
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="footer">footer</div>
+            </div>
+            <h1 className="mt-3">Card</h1>
+            <div className="card col-4">
+              <div className="card-header">Title</div>
+              <div className="card-body">
+                text{" "}
+                <a className="a-fake--bg-color_level1" href="">
+                  link
+                </a>
+              </div>
+            </div>
+            <h1 className="mt-3">Form</h1>
+            <input placeholder="class form-control" className="form-control" />
+           
+  
+  <Select
+            name="demo"
+            className="reactSelect"
+            value={demoList[0]}
+            classNamePrefix="reactSelect"
+            options={demoList}
+          />
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
diff --git a/daikoku/javascript/src/components/frontend/api/ApiCard.tsx b/daikoku/javascript/src/components/frontend/api/ApiCard.tsx
index e6180bcc9..a19d95074 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiCard.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiCard.tsx
@@ -56,7 +56,7 @@ export const ApiCard = (props: {
           allTeamSelector={true}
         >
           {isPending ? (
-            <button className="btn btn-sm btn-access-negative disabled me-1">
+            <button className="btn btn-sm btn-outline-primary disabled me-1">
               <Translation i18nkey="Pending request">Pending request</Translation>
             </button>
           ) : (
@@ -75,7 +75,7 @@ export const ApiCard = (props: {
       <div className="col-12 col-md-4">
         <div className="card mb-4 shadow-sm api-card ">
           <div
-            className={classNames('card-img-top card-link card-skin', { 'card-skin': !api.image })}
+            className={classNames('card-img-top card-link', { 'card-header': !api.image })}
             data-holder-rendered="true"
           >
             {api.image && (
@@ -86,7 +86,7 @@ export const ApiCard = (props: {
             <Can I={manage} a={API} team={team}>
               <button
                 type="button"
-                className="btn btn-sm btn-access-negative btn-edit"
+                className="btn btn-sm btn-outline-primary btn-edit"
                 onClick={props.redirectToEditPage}
               >
                 <i className="fas fa-pen" />
@@ -119,7 +119,7 @@ export const ApiCard = (props: {
   return (
     <div className="row border-bottom py-4">
       <div className="col-12 d-flex justify-content-between">
-        <div className="cursor-pointer underline-on-hover a-fake" onClick={props.redirectToApiPage}>
+        <div className="cursor-pointer underline-on-hover level2-link" onClick={props.redirectToApiPage}>
           <h3>{`${api.name}${props.groupView && props.apiWithAutho.length > 1 ? ` - ${api.currentVersion}` : ''}`}</h3>
         </div>
         <div className="ms-2">
@@ -127,7 +127,7 @@ export const ApiCard = (props: {
             <Can I={manage} a={API} team={team}>
               <button
                 type="button"
-                className="btn btn-sm btn-access-negative me-1 mb-1"
+                className="btn btn-sm btn-outline-primary me-1 mb-1"
                 onClick={props.redirectToEditPage}
               >
                 <i className="fas fa-cog" />
@@ -181,7 +181,7 @@ export const ApiCard = (props: {
       <div className="col-12 d-flex mt-2">
         {props.teamVisible && team && (
           <small
-            className="cursor-pointer underline-on-hover a-fake d-flex align-items-baseline"
+            className="cursor-pointer underline-on-hover level2-link d-flex align-items-baseline"
             onClick={() => props.handleTeamSelect(team)}
           >
             <img alt="avatar" src={team.avatar} style={{ marginRight: 5, width: 20 }} />
diff --git a/daikoku/javascript/src/components/frontend/api/ApiCartidge.tsx b/daikoku/javascript/src/components/frontend/api/ApiCartidge.tsx
index e4dded8ef..6baef19b6 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiCartidge.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiCartidge.tsx
@@ -27,7 +27,7 @@ export function ApiCartidge(props: any) {
         <Link to={`/${ownerTeam._humanReadableId}`}>{ownerTeam.name}</Link>
       </small>
       <div>
-        <button className="btn btn-xs btn-access-negative" onClick={props.openContactModal}>
+        <button className="btn btn-xs btn-outline-primary" onClick={props.openContactModal}>
           <i className="far fa-envelope me-1" />
           <Translation i18nkey="Contact us">Contact us</Translation>
         </button>
@@ -91,7 +91,7 @@ export function ApiCartidge(props: any) {
             actionLabel={translate('View your api keys')}
             allTeamSelector={false}
           >
-            <button className="btn btn-sm btn-access-negative mt-2">
+            <button className="btn btn-sm btn-outline-primary mt-2">
               <Translation i18nkey="View your api keys">View your api keys</Translation>
             </button>
           </ActionWithTeamSelector>
diff --git a/daikoku/javascript/src/components/frontend/api/ApiDocumentation.tsx b/daikoku/javascript/src/components/frontend/api/ApiDocumentation.tsx
index 0c416d75a..d27eca171 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiDocumentation.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiDocumentation.tsx
@@ -140,11 +140,11 @@ export const ApiDocumentation = (props: ApiDocumentationProps) => {
         'justify-content-between': !!prev,
         'justify-content-end': !prev,
       })}>
-        {prev && (<button className='btn btn-sm btn-access-negative' onClick={() => setPageId(prev)}>
+        {prev && (<button className='btn btn-sm btn-outline-primary' onClick={() => setPageId(prev)}>
           <i className="fas fa-chevron-left me-1" />
           <Translation i18nkey="Previous page">Previous page</Translation>
         </button>)}
-        {next && (<button className='btn btn-sm btn-access-negative' onClick={() => setPageId(next)}>
+        {next && (<button className='btn btn-sm btn-outline-primary' onClick={() => setPageId(next)}>
           <Translation i18nkey="Next page">Next page</Translation>
           <i className="fas fa-chevron-right ms-1" />
         </button>)}
diff --git a/daikoku/javascript/src/components/frontend/api/ApiGroupHome.tsx b/daikoku/javascript/src/components/frontend/api/ApiGroupHome.tsx
index 02cc986cb..15f64300c 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiGroupHome.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiGroupHome.tsx
@@ -203,7 +203,7 @@ export const ApiGroupHome = () => {
           tab={params.tab}
         />
       )}
-      <div className="album py-2 col-12 min-vh-100">
+      <div className="album py-2 me-4 min-vh-100">
         <div className={classNames({
           container: params.tab !== 'apis',
           'container-fluid': params.tab === 'apis'
diff --git a/daikoku/javascript/src/components/frontend/api/ApiHome.tsx b/daikoku/javascript/src/components/frontend/api/ApiHome.tsx
index 85c456ef1..8b3c60ef4 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiHome.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiHome.tsx
@@ -309,7 +309,7 @@ export const ApiHome = ({
         (pendingTeams.includes(teams[0]._id) || authorizedTeams.includes(teams[0]._id))) ||
         showAccessModal.api.authorizations.every((auth: any) => auth.pending && !auth.authorized) ? (<>
           <h2 className="text-center my-3">{translate('request_already_pending')}</h2>
-          <button className="btn btn-outline-primary mx-auto" style={{ width: 'fit-content' }} onClick={() => navigate(-1)}>
+          <button className="btn btn-outline-info mx-auto" style={{ width: 'fit-content' }} onClick={() => navigate(-1)}>
             {translate('go_back')}
           </button>
         </>) : (<>
@@ -344,7 +344,7 @@ export const ApiHome = ({
 
   return (<main role="main">
     <ApiHeader api={api} ownerTeam={ownerTeam} connectedUser={connectedUser} toggleStar={toggleStar} tab={params.tab} />
-    <div className="album py-2 col-12 min-vh-100">
+    <div className="album py-2 me-4 min-vh-100">
       <div className={classNames({
         'container-fluid': params.tab === 'swagger',
         container: params.tab !== 'swagger'
diff --git a/daikoku/javascript/src/components/frontend/api/ApiPost.tsx b/daikoku/javascript/src/components/frontend/api/ApiPost.tsx
index 8cae455ed..4d87858d3 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiPost.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiPost.tsx
@@ -54,7 +54,7 @@ export function ApiPost({
       </div>
       <div className="api-post" dangerouslySetInnerHTML={{ __html: converter.makeHtml((post as any).content) }} />
     </div>))}
-    {posts.length < pagination.total && (<button className="btn btn-outline-primary" onClick={() => {
+    {posts.length < pagination.total && (<button className="btn btn-outline-info" onClick={() => {
       setPagination({
         limit: 1,
         offset: pagination.offset + 1,
diff --git a/daikoku/javascript/src/components/frontend/api/ApiPricing.tsx b/daikoku/javascript/src/components/frontend/api/ApiPricing.tsx
index 8185cfa02..99d1bd7c3 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiPricing.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiPricing.tsx
@@ -185,7 +185,7 @@ const ApiPricingCard = (props: ApiPricingCardProps) => {
 
   return (
     <div className="col-md-4 card mb-4 shadow-sm usage-plan__card" data-usage-plan={plan.customName}>
-      <div className="card-img-top card-link card-skin" data-holder-rendered="true">
+      <div className="card-img-top card-link card-header" data-holder-rendered="true">
         <span>{plan.customName || formatPlanType(plan, translate)}</span>
       </div>
       <div className="card-body plan-body d-flex flex-column">
@@ -198,13 +198,13 @@ const ApiPricingCard = (props: ApiPricingCardProps) => {
             <div className='flex-shrink-1 d-flex flex-column'>
               <Link
                 to={`./${props.plan.customName}/swagger`} relative='path'
-                className={classNames("btn btn-sm btn-outline-primary mb-1", { 'link__disabled': !props.plan.swagger?.url && !props.plan.swagger?.content })}>swagger</Link>
+                className={classNames("btn btn-sm btn-outline-info mb-1", { 'link__disabled': !props.plan.swagger?.url && !props.plan.swagger?.content })}>swagger</Link>
               <Link
                 to={`./${props.plan.customName}/testing`} relative='path'
-                className={classNames("btn btn-sm btn-outline-primary mb-1", { 'link__disabled': !props.plan.testing?.enabled })}>test</Link>
+                className={classNames("btn btn-sm btn-outline-info mb-1", { 'link__disabled': !props.plan.testing?.enabled })}>test</Link>
               <Link
                 to={`./${props.plan.customName}/documentation`} relative='path'
-                className={classNames("btn btn-sm btn-outline-primary", { 'link__disabled': !props.plan.documentation?.pages.length })}>Documentation</Link>
+                className={classNames("btn btn-sm btn-outline-info", { 'link__disabled': !props.plan.documentation?.pages.length })}>Documentation</Link>
             </div>
           )}
         </div>
@@ -230,7 +230,7 @@ const ApiPricingCard = (props: ApiPricingCardProps) => {
             </Translation>
           </span>
         </div>
-        <div className="d-flex justify-content-between align-items-center">
+        <div className="d-flex justify-content-between align-items-center flex-wrap">
           {!otoroshiTargetIsDefined && props.api.visibility !== 'AdminOnly' && (
             <span className="badge bg-danger m-1">{translate('otoroshi.missing.target')}</span>
           )}
@@ -249,7 +249,7 @@ const ApiPricingCard = (props: ApiPricingCardProps) => {
               >
                 {(props.api.visibility === 'AdminOnly' ||
                   (plan.otoroshiTarget && !isAccepted)) && (
-                    <button type="button" className="btn btn-sm btn-access-negative col-12" onClick={openTeamSelectorModal}>
+                    <button type="button" className="btn btn-sm btn-outline-primary col-12" onClick={openTeamSelectorModal}>
                       <Translation
                         i18nkey={
                           isAutomaticProcess ? 'Get API key' : 'Request API key'
@@ -264,7 +264,7 @@ const ApiPricingCard = (props: ApiPricingCardProps) => {
           {connectedUser.isGuest && (
             <button
               type="button"
-              className="btn btn-sm btn-access-negative mx-auto mt-3"
+              className="btn btn-sm btn-outline-primary mx-auto mt-3"
               onClick={() => openLoginOrRegisterModal({ tenant })}
             >
               <Translation i18nkey="Get API key">Get API key</Translation>
@@ -316,13 +316,13 @@ const TeamSelector = (props: ITeamSelector) => {
                   >
                     {
                       props.pendingTeams.includes(team._id) &&
-                      <button type="button" className="btn btn-sm btn-access-negative disabled">
+                      <button type="button" className="btn btn-sm btn-outline-primary disabled">
                         {translate("Request in progress")}
                       </button>
                     }
                     {
                       displayVerifiedBtn && !team.verified &&
-                      <button type="button" className="btn btn-sm btn-danger-negative" onClick={() => {
+                      <button type="button" className="btn btn-sm btn-outline-danger" onClick={() => {
                         close()
                         navigate(`/${team._humanReadableId}/settings/edition`)
                       }}>
@@ -380,28 +380,28 @@ export const ApiPricing = (props: ApiPricingProps) => {
         <div>
           <div className="d-flex flex-row">
             <Link to={`../../${props.api.currentVersion}/pricing`} relative='path'>
-              <i className="fa-regular fa-circle-left fa-lg cursor-pointer" />
+              <i className="fa-regular fa-circle-left fa-lg cursor-pointer a-fake" />
             </Link>
             <h5 className='ms-3'>{plan.customName}</h5>
           </div>
           <div className='d-flex flex-row justify-content-around mb-2'>
             <Link
               to={`../../${props.api.currentVersion}/pricing/${plan.customName}/swagger`} relative='path'
-              className={classNames("btn btn-sm btn-access-negative mb-1",
+              className={classNames("btn btn-sm btn-outline-primary mb-1",
                 {
                   link__disabled: !plan.swagger?.content && !plan.swagger?.url,
                   disabled: !plan.swagger?.content && !plan.swagger?.url
                 })}>swagger</Link>
             <Link
               to={`../../${props.api.currentVersion}/pricing/${plan.customName}/testing`} relative='path'
-              className={classNames("btn btn-sm btn-access-negative mb-1",
+              className={classNames("btn btn-sm btn-outline-primary mb-1",
                 {
                   link__disabled: !plan.testing || !plan.testing.enabled,
                   disabled: !plan.testing || !plan.testing.enabled,
                 })}>test</Link>
             <Link
               to={`../../${props.api.currentVersion}/pricing/${plan.customName}/documentation`} relative='path'
-              className={classNames("btn btn-sm btn-access-negative",
+              className={classNames("btn btn-sm btn-outline-primary",
                 {
                   link__disabled: !plan.documentation || !plan.documentation?.pages.length,
                   disabled: !plan.documentation || !plan.documentation?.pages.length,
diff --git a/daikoku/javascript/src/components/frontend/api/StarsButton.tsx b/daikoku/javascript/src/components/frontend/api/StarsButton.tsx
index 37f8146f6..8965d4f76 100644
--- a/daikoku/javascript/src/components/frontend/api/StarsButton.tsx
+++ b/daikoku/javascript/src/components/frontend/api/StarsButton.tsx
@@ -6,13 +6,13 @@ const StarsButton = ({ stars, toggleStar, starred, connectedUser }: any) => (
       <>
         <button
           className="btn flex-row align-items-center pe-2"
-          style={{ color: 'var(--btn-bg-color, "#000")', padding: "0" }}
+          style={{ color: 'var(--btn-text-color, "#000")', padding: "0" }}
           aria-label="star"
           onClick={toggleStar}
         >
           <i className={`${starred ? "fas" : "far"} fa-star ps-2`} />
         </button>
-        <span className="btn btn-sm btn-access-negative">{stars}</span>
+        <span className="btn btn-sm btn-outline-primary">{stars}</span>
       </>
     ) : (
       stars > 0 && (
diff --git a/daikoku/javascript/src/components/frontend/api/issues/ApiFilter.tsx b/daikoku/javascript/src/components/frontend/api/issues/ApiFilter.tsx
index 35b70a775..9ea27c7dc 100644
--- a/daikoku/javascript/src/components/frontend/api/issues/ApiFilter.tsx
+++ b/daikoku/javascript/src/components/frontend/api/issues/ApiFilter.tsx
@@ -106,21 +106,21 @@ export function ApiFilter({
     <div className="d-flex flex-row justify-content-between">
       <div className="d-flex align-items-center">
         <button
-          className={classNames(`btn btn-outline-primary`, { active: filter === 'all' })}
+          className={classNames(`btn btn-outline-info`, { active: filter === 'all' })}
           style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
           onClick={() => handleFilter('all')}
         >
           {translate('All')}
         </button>
         <button
-          className={classNames(`btn btn-outline-primary`, { active: filter === 'open' })}
+          className={classNames(`btn btn-outline-info`, { active: filter === 'open' })}
           style={{ borderRadius: 0 }}
           onClick={() => handleFilter('open')}
         >
           {translate('issues.open')}
         </button>
         <button
-          className={classNames(`btn btn-outline-primary`, { active: filter === 'closed' })}
+          className={classNames(`btn btn-outline-info`, { active: filter === 'closed' })}
           style={{ borderLeft: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
           onClick={() => handleFilter('closed')}
         >
@@ -146,7 +146,7 @@ export function ApiFilter({
       {connectedUser && !connectedUser.isGuest && (
         <div>
           <Can I={manage} a={API} team={ownerTeam}>
-            <Link to={`${basePath}/labels`} className="btn btn-outline-primary">
+            <Link to={`${basePath}/labels`} className="btn btn-outline-info">
               <i className="fa fa-tag me-1" />
               {translate('issues.tags')}
             </Link>
diff --git a/daikoku/javascript/src/components/frontend/api/issues/ApiIssues.tsx b/daikoku/javascript/src/components/frontend/api/issues/ApiIssues.tsx
index a839c355c..7af00ca8e 100644
--- a/daikoku/javascript/src/components/frontend/api/issues/ApiIssues.tsx
+++ b/daikoku/javascript/src/components/frontend/api/issues/ApiIssues.tsx
@@ -50,7 +50,7 @@ export function ApiIssues({
         <div className="d-flex flex-column pt-3 mt-3">
           { filteredIssues.map(({ seqId, title, tags, by, createdDate, closedDate, open, apiVersion, _id, comments }) => (
             <Link to={`${_id}`} className="me-2">
-              <div className="border-bottom py-3 d-flex align-items-center justify-content-between" key={`issue-${seqId}`} style={{ backgroundColor: '#{"var(--section-bg-color, #f8f9fa)"}', color:'#{"var(--section-text-color, #6c757d)"}' }}>
+              <div className="border-bottom py-3 d-flex align-items-center justify-content-between" key={`issue-${seqId}`} style={{ backgroundColor: '#{"var(--level2_bg-color, #f8f9fa)"}', color:'#{"var(--level2_text-color, #6c757d)"}' }}>
                 <div className="d-flex align-items-center">
                   <i className="fa fa-exclamation-circle mx-3" style={{ color: open ? 'green' : 'red' }}></i>
                   <div>
diff --git a/daikoku/javascript/src/components/frontend/api/issues/ApiTimelineIssue.tsx b/daikoku/javascript/src/components/frontend/api/issues/ApiTimelineIssue.tsx
index 50fbd3126..4bce97575 100644
--- a/daikoku/javascript/src/components/frontend/api/issues/ApiTimelineIssue.tsx
+++ b/daikoku/javascript/src/components/frontend/api/issues/ApiTimelineIssue.tsx
@@ -19,7 +19,7 @@ import { ModalContext } from '../../../../contexts';
 
 const styles = {
   commentHeader: {
-    backgroundColor: 'var(--body-bg-color, #fff)',
+    backgroundColor: 'var(--body_bg-color, #fff)',
     borderTopLeftRadius: '8px',
     borderTopRightRadius: '8px',
   },
@@ -35,10 +35,10 @@ const styles = {
     color: '#fff'
   }),
   commentBody: {
-    border: '1px solid var(--body-bg-color, #f8f9fa)',
+    border: '1px solid var(--body_bg-color, #f8f9fa)',
     borderBottomLeftRadius: '8px',
     borderBottomRightRadius: '8px',
-    backgroundColor: 'var(--section-bg-color, #f8f9fa)',
+    backgroundColor: 'var(--level2_bg-color, #f8f9fa)',
   },
 };
 
@@ -232,11 +232,11 @@ export function ApiTimelineIssue({
             <button className="btn btn-outline-success me-1" onClick={() => updateIssue(issue)}>
               {translate('Save')}
             </button>
-            <button className="btn btn-access-negative" onClick={() => handleEdition(false)}>
+            <button className="btn btn-outline-primary" onClick={() => handleEdition(false)}>
               {translate('Cancel')}
             </button>
           </div>) : (<>
-            <button className="btn btn-access-negative me-1" onClick={() => handleEdition(true)}>
+            <button className="btn btn-outline-primary me-1" onClick={() => handleEdition(true)}>
               {translate('Edit')}
             </button>
           </>)}
@@ -337,7 +337,7 @@ function Comment({
             <>
               {showActions ? (
                 <div className="ml-auto">
-                  <button className="btn btn-xs btn-access-negative me-1" onClick={editComment}>
+                  <button className="btn btn-xs btn-outline-primary me-1" onClick={editComment}>
                     <i className="fas fa-pen align-self-center" />
                   </button>
                   {i !== 0 && (
diff --git a/daikoku/javascript/src/components/frontend/fastMode/FastApiCard.tsx b/daikoku/javascript/src/components/frontend/fastMode/FastApiCard.tsx
index 66a3959fc..eed35a29f 100644
--- a/daikoku/javascript/src/components/frontend/fastMode/FastApiCard.tsx
+++ b/daikoku/javascript/src/components/frontend/fastMode/FastApiCard.tsx
@@ -202,7 +202,7 @@ export const FastApiCard = (props: FastApiCardProps) => {
                     {((!subscriptionsCount && !isPending) || plan.allowMultipleKeys) &&
                       <button
                         style={{ whiteSpace: "nowrap" }}
-                        className={"btn btn-sm btn-outline-primary"}
+                        className={"btn btn-sm btn-outline-info"}
                         onClick={() => subscribeOrExtends(
                           selectedApi.api._id,
                           props.team,
@@ -212,7 +212,7 @@ export const FastApiCard = (props: FastApiCardProps) => {
                       </button>}
                     {isPending &&
                       <button style={{ whiteSpace: "nowrap" }} disabled={true}
-                        className={"btn btn-sm btn-outline-primary disabled"}>
+                        className={"btn btn-sm btn-outline-info disabled"}>
                         {translate('fastMode.button.pending')}
                       </button>}
                   </div>
diff --git a/daikoku/javascript/src/components/frontend/fastMode/FastApiList.tsx b/daikoku/javascript/src/components/frontend/fastMode/FastApiList.tsx
index 34b23ec56..fb3f68318 100644
--- a/daikoku/javascript/src/components/frontend/fastMode/FastApiList.tsx
+++ b/daikoku/javascript/src/components/frontend/fastMode/FastApiList.tsx
@@ -178,7 +178,7 @@ export const FastApiList = (props: FastApiListProps) => {
                 onChange={(e) => setPlanResearch(e.target.value)}
               />
             </div>
-            <button onClick={() => changeSeeOnlySubscribedApis(!seeApiSubscribed)} className="btn btn-sm btn-outline-primary">
+            <button onClick={() => changeSeeOnlySubscribedApis(!seeApiSubscribed)} className="btn btn-sm btn-outline-info">
               {seeApiSubscribed ? translate('fastMode.button.show.all.apis') : translate('fastMode.button.show.subs.apis')}
             </button>
           </div>
diff --git a/daikoku/javascript/src/components/frontend/fastMode/FastItemView.tsx b/daikoku/javascript/src/components/frontend/fastMode/FastItemView.tsx
index 10977ac01..e5ba2d67b 100644
--- a/daikoku/javascript/src/components/frontend/fastMode/FastItemView.tsx
+++ b/daikoku/javascript/src/components/frontend/fastMode/FastItemView.tsx
@@ -41,7 +41,7 @@ export const FastItemView = (props: FastItemViewProps) => {
     <div className="section p-3 mb-2 text-center">
       {props.viewMode === 'PLAN' && props.planInfo &&
         <div className="card shadow-sm">
-          <div className="card-img-top card-link card-skin" data-holder-rendered="true">
+          <div className="card-img-top card-link card-header" data-holder-rendered="true">
             <span>{props.planInfo.customName || formatPlanType(props.planInfo, translate)}</span>
           </div>
           <div className="card-body plan-body d-flex flex-column">
@@ -67,29 +67,12 @@ export const FastItemView = (props: FastItemViewProps) => {
       }
       {props.viewMode === 'APIKEY' && props.planInfo && props.subscriptions &&
         <div className="card">
-          <div className="card-header" style={{ position: 'relative' }}>
-            <div className="d-flex align-items-center justify-content-between">
-              <BeautifulTitle
-                title={props.planInfo.customName || ''}
-                style={{
-                  wordBreak: 'break-all',
-                  marginBlockEnd: '0',
-                  whiteSpace: 'nowrap',
-                  maxWidth: '85%',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  fontSize: '1.5rem'
-                }}
-                className="plan-name"
-              >
+          <div className="card-header flex-column">         
                 {props.planInfo.customName}
-              </BeautifulTitle>
-            </div>
             <span
-              className="badge bg-secondary"
-              style={{ position: 'absolute', left: '1.25rem', bottom: '-8px' }}
+              className="badge bg-secondary" style={{fontSize:"12px"}}
             >
-              {formatPlanType(props.planInfo, translate)}
+              Type : {formatPlanType(props.planInfo, translate)}
             </span>
           </div>
           <div className="card-body" style={{ margin: 0 }}>
diff --git a/daikoku/javascript/src/components/frontend/index.ts b/daikoku/javascript/src/components/frontend/index.ts
index 5a4bd08f1..e99157e91 100644
--- a/daikoku/javascript/src/components/frontend/index.ts
+++ b/daikoku/javascript/src/components/frontend/index.ts
@@ -4,3 +4,4 @@ export * from './unauthenticated';
 export * from './FrontOffice';
 export * from './MaybeHomePage';
 export * from './JoinTeam';
+export * from './AtomicDesign';
diff --git a/daikoku/javascript/src/components/frontend/team/ApiList.tsx b/daikoku/javascript/src/components/frontend/team/ApiList.tsx
index 80f8ccbbe..e1c3b0e96 100644
--- a/daikoku/javascript/src/components/frontend/team/ApiList.tsx
+++ b/daikoku/javascript/src/components/frontend/team/ApiList.tsx
@@ -301,7 +301,7 @@ export const ApiList = (props: TApiList) => {
       <div className="row mb-2 view-selectors">
         <div className="col-12 col-sm-9 d-flex justify-content-end">
           <button
-            className={classNames('btn btn-sm btn-access-negative me-2', { active: view === LIST })}
+            className={classNames('btn btn-sm btn-outline-primary me-2', { active: view === LIST })}
             onClick={() => {
               setView(LIST)
               setPage(0)
@@ -312,7 +312,7 @@ export const ApiList = (props: TApiList) => {
             <List />
           </button>
           <button
-            className={classNames('btn btn-sm btn-access-negative', { active: view === GRID })}
+            className={classNames('btn btn-sm btn-outline-primary', { active: view === GRID })}
             onClick={() => {
               setView(GRID)
               setPage(0)
@@ -484,7 +484,7 @@ const YourTeams = ({
           .map((team) => {
             return (
               <span
-                className="p-1 cursor-pointer underline-on-hover text-break"
+                className="p-1 cursor-pointer underline-on-hover text-break level2-link"
                 key={team._id}
                 onClick={() => redirectToTeam(team)}
               >
diff --git a/daikoku/javascript/src/components/frontend/team/TeamCard.tsx b/daikoku/javascript/src/components/frontend/team/TeamCard.tsx
index 71f451ba9..89ac35e48 100644
--- a/daikoku/javascript/src/components/frontend/team/TeamCard.tsx
+++ b/daikoku/javascript/src/components/frontend/team/TeamCard.tsx
@@ -46,12 +46,12 @@ export function TeamCard(props: Props) {
                         <div className="ms-2">
                             <div className="btn_group">
                 {team.canJoin && !team.alreadyJoin && (
-                                    <button className="btn btn-sm btn-access-negative me-2" onClick={props.askToJoin}>
+                                    <button className="btn btn-sm btn-outline-primary me-2" onClick={props.askToJoin}>
                                         <Translation i18nkey="Join">Join</Translation>
                   </button>
                 )}
                 {team.canJoin && team.alreadyJoin && (
-                                    <button className="btn btn-sm btn-access-negative me-2">
+                                    <button className="btn btn-sm btn-outline-primary me-2">
                                         <Translation i18nkey="Pending request">Pending request</Translation>
                   </button>
                 )}
diff --git a/daikoku/javascript/src/components/frontend/team/TeamHome.tsx b/daikoku/javascript/src/components/frontend/team/TeamHome.tsx
index 9576afaf3..a9a972739 100644
--- a/daikoku/javascript/src/components/frontend/team/TeamHome.tsx
+++ b/daikoku/javascript/src/components/frontend/team/TeamHome.tsx
@@ -71,7 +71,7 @@ export const TeamHome = () => {
               <div className="col-sm-1 d-flex flex-column">
                 <Can I={read} a={TEAM} team={team}>
                   <div>
-                    <a href="#" className="float-right team__settings btn btn-sm btn-access-negative" onClick={() => redirectToTeamSettings(team)}>
+                    <a href="#" className="float-right team__settings btn btn-sm btn-outline-primary" onClick={() => redirectToTeamSettings(team)}>
                       <i className="fas fa-cogs" />
                     </a>
                   </div>
diff --git a/daikoku/javascript/src/components/frontend/unauthenticated/UnauthenticatedHome.tsx b/daikoku/javascript/src/components/frontend/unauthenticated/UnauthenticatedHome.tsx
index 811cefa19..9eaf0f1a1 100644
--- a/daikoku/javascript/src/components/frontend/unauthenticated/UnauthenticatedHome.tsx
+++ b/daikoku/javascript/src/components/frontend/unauthenticated/UnauthenticatedHome.tsx
@@ -57,19 +57,19 @@ export function UnauthenticatedHome({ children }: PropsWithChildren) {
                 )}
                 <p>
                   {tenant.authProvider === 'Local' && (
-                    <a className="btn btn-access-negative my-2 ms-2" href={'/signup'}>
+                    <a className="btn btn-outline-primary my-2 ms-2" href={'/signup'}>
                       <i className="fas fa-plus-square me-1" />
                       <Translation i18nkey="Create your account">Create your account</Translation>
                     </a>
                   )}
                   {false && tenant.authProvider === 'Local' && (
-                    <a className="btn btn-access-negative my-2 ms-2" href={'/reset'}>
+                    <a className="btn btn-outline-primary my-2 ms-2" href={'/reset'}>
                       <i className="fas fa-bomb me-1" />
                       <Translation i18nkey="Reset your password">Reset your password</Translation>
                     </a>
                   )}
 
-                  <a className="btn btn-access-negative my-2 ms-2" href={`/auth/Local/login`}>
+                  <a className="btn btn-outline-primary my-2 ms-2" href={`/auth/Local/login`}>
                     <i className="fas fa-user me-1" />
                     <Translation i18nkey="Connect to your account">
                       Connect to your account
@@ -77,7 +77,7 @@ export function UnauthenticatedHome({ children }: PropsWithChildren) {
                   </a>
                   {tenant.authProvider !== 'Local' && (
                     <a
-                      className="btn btn-access-negative my-2 ms-2"
+                      className="btn btn-outline-primary my-2 ms-2"
                       href={`/auth/${tenant.authProvider}/login`}
                     >
                       <i className="fas fa-user me-1" />
diff --git a/daikoku/javascript/src/components/inputs/Table.tsx b/daikoku/javascript/src/components/inputs/Table.tsx
index 9fa1411c7..aefd4dfd9 100644
--- a/daikoku/javascript/src/components/inputs/Table.tsx
+++ b/daikoku/javascript/src/components/inputs/Table.tsx
@@ -187,7 +187,7 @@ const TableComponent = <T extends unknown>(props: TableProps<T>, ref: React.Ref<
       />
       <button
         type="button"
-        className="ms-3 btn btn-sm btn-access-negative float-right"
+        className="ms-3 btn btn-sm btn-outline-primary float-right"
         title={translate('Reload the table content')}
         onClick={update}
       >
diff --git a/daikoku/javascript/src/components/inputs/TableFilters.tsx b/daikoku/javascript/src/components/inputs/TableFilters.tsx
index bf6f0219a..0aaf9e9c3 100644
--- a/daikoku/javascript/src/components/inputs/TableFilters.tsx
+++ b/daikoku/javascript/src/components/inputs/TableFilters.tsx
@@ -42,7 +42,7 @@ export const BooleanColumnFilter = ({
         checked={filterValue || false}
       />
       {filterValue !== undefined && (
-        <span className="btn btn-sm btn-danger-negative table-filter-suppress">
+        <span className="btn btn-sm btn-outline-danger table-filter-suppress">
           <Sliders onClick={() => setFilter(undefined)} />
         </span>
       )}
diff --git a/daikoku/javascript/src/components/utils/OtoroshiStatsVizualisation.tsx b/daikoku/javascript/src/components/utils/OtoroshiStatsVizualisation.tsx
index 2f6613d82..6b226ec28 100644
--- a/daikoku/javascript/src/components/utils/OtoroshiStatsVizualisation.tsx
+++ b/daikoku/javascript/src/components/utils/OtoroshiStatsVizualisation.tsx
@@ -287,7 +287,7 @@ export function OtoroshiStatsVizualization(props: Iprops) {
         />
 
         <span className="col ms-2 period-display">{state.period.format(state.consumptions)}</span>
-          <button className="btn btn-access-negative" onClick={sync}>
+          <button className="btn btn-outline-primary" onClick={sync}>
             <i className="fas fa-sync-alt" />
           </button>
 
diff --git a/daikoku/javascript/src/components/utils/Recharts.tsx b/daikoku/javascript/src/components/utils/Recharts.tsx
index 0510e0006..40e1adafe 100644
--- a/daikoku/javascript/src/components/utils/Recharts.tsx
+++ b/daikoku/javascript/src/components/utils/Recharts.tsx
@@ -123,7 +123,7 @@ export function RoundChart(props: any) {
       <text
         x={x}
         y={y}
-        fill="var(--section-text-color)"
+        fill="var(--level2_text-color)"
         textAnchor={x > cx ? 'start' : 'end'}
         dominantBaseline="central"
         style={{ padding: 5 }}
diff --git a/daikoku/javascript/src/components/utils/dnd/components/Update.tsx b/daikoku/javascript/src/components/utils/dnd/components/Update.tsx
index 35b21efac..8cfa4a5c6 100644
--- a/daikoku/javascript/src/components/utils/dnd/components/Update.tsx
+++ b/daikoku/javascript/src/components/utils/dnd/components/Update.tsx
@@ -5,7 +5,7 @@ import { Action, Props as ActionProps } from "./Action";
 
 export const Update = (props: ActionProps) => {
   return (
-    <Action {...props} className="btn btn-sm btn-outline-primary d-block">
+    <Action {...props} className="btn btn-sm btn-outline-info d-block">
       <i className="fas fa-pen"></i>
     </Action>
   );
diff --git a/daikoku/javascript/src/components/utils/login.tsx b/daikoku/javascript/src/components/utils/login.tsx
index a8d898935..0766b86f1 100644
--- a/daikoku/javascript/src/components/utils/login.tsx
+++ b/daikoku/javascript/src/components/utils/login.tsx
@@ -1,13 +1,13 @@
-import React, { useContext, useState } from 'react';
-import * as Services from '../../services/index';
-import { I18nContext } from '../../contexts';
+import React, { useContext, useState } from "react";
+import * as Services from "../../services/index";
+import { I18nContext } from "../../contexts";
 
 export function LoginPage(props: any) {
   const { Translation, translate } = useContext(I18nContext);
 
   const [state, setState] = useState<any>({
-    username: '',
-    password: '',
+    username: "",
+    password: "",
     message: null,
     loginError: null,
   });
@@ -24,14 +24,16 @@ export function LoginPage(props: any) {
     e.preventDefault();
     const { username, password } = state;
 
-    Services.login(username, password, props.action, props.redirect).then((res) => {
-      if (res.status === 400)
-        setState({
-          ...state,
-          loginError: true,
-        });
-      else if (res.redirected) window.location.href = res.url;
-    });
+    Services.login(username, password, props.action, props.redirect).then(
+      (res) => {
+        if (res.status === 400)
+          setState({
+            ...state,
+            loginError: true,
+          });
+        else if (res.redirected) window.location.href = res.url;
+      }
+    );
   };
 
   const { loginError } = state;
@@ -43,81 +45,92 @@ export function LoginPage(props: any) {
           <div className="col-sm-4">
             <img
               className="organisation__avatar"
-              src={props.tenant.logo || '/assets/images/daikoku.svg'}
+              src={props.tenant.logo || "/assets/images/daikoku.svg"}
               alt="avatar"
             />
           </div>
           <h3>
-            <Translation i18nkey="login.to.tenant" replacements={[props.tenant.name]}>
+            <Translation
+              i18nkey="login.to.tenant"
+              replacements={[props.tenant.name]}
+            >
               Login to {props.tenant.name}
             </Translation>
           </h3>
         </div>
-
-        <form
-          className="form-horizontal text-start mx-auto"
-          method={props.method}
-          onSubmit={submit}
-          style={{ maxWidth: '448px' }}
-        >
-          <input type="hidden" name="token" className="form-control" value={props.token} />
-          {loginError && (
-            <span className="alert alert-danger d-flex justify-content-center">
-              <Translation i18nkey="login.failed">
-                User not found or invalid credentials
-              </Translation>
-            </span>
-          )}
-          <div className="mb-3">
-            <label className="control-label mb-2">
-              <Translation i18nkey="login.label">Email address</Translation>
-            </label>
-            <input
-              type="text"
-              name="username"
-              className="form-control"
-              value={props.username}
-              onChange={onChange}
-            />
-          </div>
-          <div className="mb-3">
-            <label className="control-label mb-2">
-              <Translation i18nkey="password.label">Password</Translation>
-            </label>
+        <div className="form-container">
+          <form
+            className="form-horizontal text-start mx-auto"
+            method={props.method}
+            onSubmit={submit}
+            style={{ maxWidth: "448px" }}
+          >
             <input
-              type="password"
-              name="password"
+              type="hidden"
+              name="token"
               className="form-control"
-              value={props.password}
-              onChange={onChange}
+              value={props.token}
             />
-          </div>
-          <div className="mb-3 d-grid gap-1">
-            <button type="submit" className="btn btn-outline-success">
-              <Translation i18nkey="login.btn.label">Login</Translation>
-            </button>
-          </div>
-          {props.provider == 'Local' && (
-            <div
-              className="mb-3 p-3 text-center"
-              style={{
-                border: '1px solid var(--form-border-color, #586069)',
-                borderRadius: '6px',
-              }}
-            >
-              <Translation
-                i18nkey="login_page.register_message"
-                replacements={[props.tenant.name]}
+            {loginError && (
+              <span className="alert alert-danger d-flex justify-content-center">
+                <Translation i18nkey="login.failed">
+                  User not found or invalid credentials
+                </Translation>
+              </span>
+            )}
+            <div className="mb-3">
+              <label className="control-label mb-2">
+                <Translation i18nkey="login.label">Email address</Translation>
+              </label>
+              <input
+                type="text"
+                name="username"
+                className="form-control"
+                value={props.username}
+                onChange={onChange}
               />
-              <a href="/signup">{' '}Create an account.</a>
             </div>
-          )}
-          <div className="mb-3">
-            <a href="/reset">
-              <Translation i18nkey="Forgot your password ?">Forgot your password ?</Translation>
-            </a>
-          </div>
-        </form>
+            <div className="mb-3">
+              <label className="control-label mb-2">
+                <Translation i18nkey="password.label">Password</Translation>
+              </label>
+              <input
+                type="password"
+                name="password"
+                className="form-control"
+                value={props.password}
+                onChange={onChange}
+              />
+            </div>
+            <div className="mb-3 d-grid gap-1">
+              <button type="submit" className="btn btn-outline-success">
+                <Translation i18nkey="login.btn.label">Login</Translation>
+              </button>
+            </div>
+            {props.provider == "Local" && (
+              <div
+                className="mb-3 p-3 text-center"
+                style={{
+                  border: "1px solid var(--form-border-color, #586069)",
+                  borderRadius: "6px",
+                }}
+              >
+                <Translation
+                  i18nkey="login_page.register_message"
+                  replacements={[props.tenant.name]}
+                />
+                <a href="/signup">{" "}Create an account.</a>
+              </div>
+            )}
+            <div className="mb-3">
+              <a href="/reset">
+                <Translation i18nkey="Forgot your password ?">
+                  Forgot your password ?
+                </Translation>
+              </a>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/daikoku/javascript/src/components/utils/multiStepForm.tsx b/daikoku/javascript/src/components/utils/multiStepForm.tsx
index bf348090e..0dbe3a42c 100644
--- a/daikoku/javascript/src/components/utils/multiStepForm.tsx
+++ b/daikoku/javascript/src/components/utils/multiStepForm.tsx
@@ -275,7 +275,7 @@ export const MultiStepForm = <T extends object>({
         <div className="flex-grow-1 d-flex justify-content-end my-3">
           {steps.findIndex((s) => s.id === step.id) !== steps.length - 1 && !!step.skipTo && (
             <button
-              className="btn btn-outline-primary me-1"
+              className="btn btn-outline-info me-1"
               disabled={!!creation || !step.skipTo}
               onClick={() => send('SKIP')}
             >
diff --git a/daikoku/javascript/src/components/utils/sidebar/SideBar.tsx b/daikoku/javascript/src/components/utils/sidebar/SideBar.tsx
index fcc72a5dc..fb266861b 100644
--- a/daikoku/javascript/src/components/utils/sidebar/SideBar.tsx
+++ b/daikoku/javascript/src/components/utils/sidebar/SideBar.tsx
@@ -74,7 +74,7 @@ export const SideBar = () => {
             <>
               <div className="nav_item mb-3 cursor-pointer">
                 <Search
-                  className="notification-link"
+                  className="notification-link notification-link-color"
                   onClick={() => {
                     setPanelState(state.opened);
                     setPanelContent(<SearchPanel />);
@@ -83,7 +83,7 @@ export const SideBar = () => {
               </div>
               <div className="nav_item mb-3 cursor-pointer">
                 <Plus
-                  className="notification-link"
+                  className="notification-link notification-link-color"
                   aria-label="create"
                   onClick={() => {
                     setPanelState(state.opened);
@@ -102,7 +102,7 @@ export const SideBar = () => {
               title={translate('fastMode.access')}
             >
               <Zap
-                className="notification-link" />
+                className="notification-link notification-link-color" />
             </Link>
           )}
         </div>
@@ -112,7 +112,7 @@ export const SideBar = () => {
             <Link
               to="/settings/messages"
               className={classNames(
-                'nav-item mb-3 notification-link messages-link cursor-pointer',
+                'nav-item mb-3 notification-link  notification-link-color messages-link cursor-pointer',
                 {
                   'unread-notifications': totalUnread > 0,
                 }
@@ -125,7 +125,7 @@ export const SideBar = () => {
           {!connectedUser.isGuest && !isAdmin && (
             <div
               className={classNames(
-                'nav-item mb-3 notification-link messages-link cursor-pointer',
+                'nav-item mb-3 notification-link notification-link-color messages-link cursor-pointer',
                 {
                   'unread-notifications': totalUnread > 0,
                 }
@@ -143,7 +143,7 @@ export const SideBar = () => {
             <div className="nav_item mb-3">
               <Link
                 className={classNames({
-                  'notification-link': true,
+                  'notification-link notification-link-color': true,
                   'unread-notifications': !!unreadNotificationsCount,
                 })}
                 to="/notifications"
@@ -154,7 +154,7 @@ export const SideBar = () => {
             </div>
           )}
           <div className="nav_item mb-3">
-            <DarkModeActivator className="notification-link" />
+            <DarkModeActivator className="notification-link notification-link-color" />
           </div>
 
           <div className="nav_item mb-3" style={{ color: '#fff' }}>
@@ -191,7 +191,7 @@ export const SideBar = () => {
         })}
       >
         <div className="mt-2 ms-2 ">
-          <div className="cursor-pointer navbar-panel__back d-flex align-items-center justify-content-center">
+          <div className="cursor-pointer navbar-panel__back d-flex align-items-center justify-content-center companion-link">
             <ArrowLeft className="" onClick={() => setPanelState(state.closed)} />
           </div>
         </div>
diff --git a/daikoku/javascript/src/components/utils/sidebar/panels/AddPanel.tsx b/daikoku/javascript/src/components/utils/sidebar/panels/AddPanel.tsx
index be006acfb..10f0b3828 100644
--- a/daikoku/javascript/src/components/utils/sidebar/panels/AddPanel.tsx
+++ b/daikoku/javascript/src/components/utils/sidebar/panels/AddPanel.tsx
@@ -140,7 +140,7 @@ export const AddPanel = () => {
                   className="block__entry__link d-flex align-items-center justify-content-between"
                   onClick={createTenant}>
                   <span>{translate('Tenant')}</span>
-                  <button className="btn btn-sm btn-access-negative me-1">
+                  <button className="btn btn-sm btn-outline-primary me-1">
                     <i className="fas fa-plus-circle" />
                   </button>
                 </span>
@@ -150,7 +150,7 @@ export const AddPanel = () => {
                 onClick={createTeam}
               >
                 <span>{translate('Team')}</span>
-                <button className="btn btn-sm btn-access-negative me-1">
+                <button className="btn btn-sm btn-outline-primary me-1">
                   <i className="fas fa-plus-circle" />
                 </button>
               </span>
@@ -159,7 +159,7 @@ export const AddPanel = () => {
                 onClick={() => createApi(maybeTeam)}
               >
                 <span>{translate('API')}</span>
-                <button className="btn btn-sm btn-access-negative me-1">
+                <button className="btn btn-sm btn-outline-primary me-1">
                   <i className="fas fa-plus-circle" />
                 </button>
               </span>
@@ -168,7 +168,7 @@ export const AddPanel = () => {
                 onClick={() => createApiGroup(maybeTeam)}
               >
                 <span>{translate('API group')}</span>
-                <button className="btn btn-sm btn-access-negative me-1">
+                <button className="btn btn-sm btn-outline-primary me-1">
                   <i className="fas fa-plus-circle" />
                 </button>
               </span>
diff --git a/daikoku/javascript/src/components/utils/sidebar/panels/MessagePanel.tsx b/daikoku/javascript/src/components/utils/sidebar/panels/MessagePanel.tsx
index eacef2320..ff103ec1a 100644
--- a/daikoku/javascript/src/components/utils/sidebar/panels/MessagePanel.tsx
+++ b/daikoku/javascript/src/components/utils/sidebar/panels/MessagePanel.tsx
@@ -74,7 +74,7 @@ export const MessagePanel = () => {
         />
         <button
           disabled={loading ? true : undefined}
-          className="ms-2 btn btn-outline-primary"
+          className="ms-2 btn btn-outline-info"
           onClick={sendMessage}
         >
           <Send />
@@ -127,7 +127,7 @@ export const MessagePanel = () => {
                   <div className="d-flex flex-row justify-content-center my-1">
                     <button
                       disabled={loading ? true : undefined}
-                      className="btn btn-sm btn-outline-primary"
+                      className="btn btn-sm btn-outline-info"
                       onClick={() => getPreviousMessages(connectedUser._id)}
                     >
                       <Translation i18nkey="Load previous messages">
diff --git a/daikoku/javascript/src/contexts/modals/Alert.tsx b/daikoku/javascript/src/contexts/modals/Alert.tsx
index d91ee42d9..71b513aef 100644
--- a/daikoku/javascript/src/contexts/modals/Alert.tsx
+++ b/daikoku/javascript/src/contexts/modals/Alert.tsx
@@ -35,7 +35,7 @@ export const Alert = (props: AlertProps) => {
         </div>
       </div>
       <div className="modal-footer">
-        <button type="button" className="btn btn-outline-primary" onClick={props.close}>
+        <button type="button" className="btn btn-outline-info" onClick={props.close}>
           {props?.closeMessage || translate('Close')}
         </button>
       </div>
diff --git a/daikoku/javascript/src/contexts/modals/AssetsChooserModal.tsx b/daikoku/javascript/src/contexts/modals/AssetsChooserModal.tsx
index 6ee7394da..f1f8bd09a 100644
--- a/daikoku/javascript/src/contexts/modals/AssetsChooserModal.tsx
+++ b/daikoku/javascript/src/contexts/modals/AssetsChooserModal.tsx
@@ -168,7 +168,7 @@ export const AssetChooserByModal = (props: AssetChooserProps) => {
     return (
       <button
         type="button"
-        className={props.classNames ? props.classNames : classNames('btn btn-access-negative ms-1', { disabled: !assets.length })}
+        className={props.classNames ? props.classNames : classNames('btn btn-outline-primary ms-1', { disabled: !assets.length })}
         onClick={() => assets.length &&
           openAssetSelectorModal({
             assets,
@@ -193,7 +193,7 @@ export const AssetChooserByModal = (props: AssetChooserProps) => {
     );
   } else {
     return (<BeautifulTitle title={(assetsRequest.error ?? '') as string}>
-      <button type="button" className="btn btn-outline-primary ms-1 cursor-help" disabled>
+      <button type="button" className="btn btn-outline-info ms-1 cursor-help" disabled>
         <i className={classNames('fas', {
           'fa-user-circle me-1': !!props.onlyPreview,
           'fa-file me-1': !props.onlyPreview,
diff --git a/daikoku/javascript/src/contexts/modals/TeamSelectionModal.tsx b/daikoku/javascript/src/contexts/modals/TeamSelectionModal.tsx
index 779540780..877891d9f 100644
--- a/daikoku/javascript/src/contexts/modals/TeamSelectionModal.tsx
+++ b/daikoku/javascript/src/contexts/modals/TeamSelectionModal.tsx
@@ -33,7 +33,7 @@ export const TeamSelectorModal = ({ title, description, teams, pendingTeams = []
   const getButton = (team: ITeamSimple) => {
     if (!allowMultipleDemand && pendingTeams.includes(team._id)) {
       return (
-        <button type="button" className="btn btn-sm btn-access disabled">
+        <button type="button" className="btn btn-sm btn-outline-primary disabled">
           <Translation i18nkey="Request in progress" />
         </button>
       );
diff --git a/daikoku/javascript/src/contexts/navContext.tsx b/daikoku/javascript/src/contexts/navContext.tsx
index 634101f23..5e441a556 100644
--- a/daikoku/javascript/src/contexts/navContext.tsx
+++ b/daikoku/javascript/src/contexts/navContext.tsx
@@ -182,7 +182,7 @@ export const useApiFrontOffice = (api?: IApi, team?: ITeamSimple) => {
               <Can I={manage} a={API} team={team}>
                 <Link
                   to={`/${team?._humanReadableId}/settings/apis/${api?._humanReadableId}/${api?.currentVersion}/infos`}
-                  className="btn btn-sm btn-access-negative mb-2"
+                  className="btn btn-sm btn-outline-primary mb-2"
                 >
                   {translate('api.configuration.btn.label')}
                 </Link>
@@ -192,7 +192,7 @@ export const useApiFrontOffice = (api?: IApi, team?: ITeamSimple) => {
           contact: {
             component: (
               <button
-                className="btn btn-sm btn-access-negative mb-2"
+                className="btn btn-sm btn-outline-primary mb-2"
                 onClick={() =>
                   openContactModal({
                     name: connectedUser.name,
@@ -304,7 +304,7 @@ export const useApiGroupFrontOffice = (apigroup: any, team: any) => {
               <Can I={manage} a={API} team={team}>
                 <Link
                   to={`/${team?._humanReadableId}/settings/apigroups/${apigroup?._humanReadableId}/infos`}
-                  className="btn btn-sm btn-access-negative mb-2"
+                  className="btn btn-sm btn-outline-primary mb-2"
                 >
                   {translate('apis.group.configuration.btn.label')}
                 </Link>
@@ -315,7 +315,7 @@ export const useApiGroupFrontOffice = (apigroup: any, team: any) => {
             label: translate('contact'),
             component: (
               <button
-                className="btn btn-sm btn-access-negative mb-2"
+                className="btn btn-sm btn-outline-primary mb-2"
                 onClick={() =>
                   openContactModal({
                     name: connectedUser.name,
@@ -573,7 +573,7 @@ export const useApiGroupBackOffice = (creation: boolean) => {
             component: (
               <Link
                 to={`/${(queries[0].data as ITeamSimple)._humanReadableId}/apigroups/${apiGroup?._humanReadableId}/apis`}
-                className="btn btn-sm btn-access-negative mb-2"
+                className="btn btn-sm btn-outline-primary mb-2"
               >
                 {translate('View this APIs Group')}
               </Link>
diff --git a/daikoku/javascript/src/style/components/apicard.scss b/daikoku/javascript/src/style/components/apicard.scss
index 509162bd4..06fc075e9 100644
--- a/daikoku/javascript/src/style/components/apicard.scss
+++ b/daikoku/javascript/src/style/components/apicard.scss
@@ -1,65 +1,29 @@
-.api--forbidden {
-  cursor: not-allowed;
-  color: #bbb;
-}
-
-/* cards */
-.apicard__container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
 .card {
-  background-color: $sidebar-bg-color;
-}
-.card-body {
-  border : none !important;
-}
-
-.card-text {
-  height: 100px;
-  overflow: hidden;
-}
-
-.cardAble .card-header {
-  background-color: #9bb0c5;
-}
-
-.cardDisable .card-header {
-  background-color: #858585;
-}
-
-.cardAble {
-  transform: none;
-  transition-duration: .2s;
-}
-
-.cardAble:hover {
-  transform: scale(1.02);
-}
-
-.cardDisable a {
-  cursor: default;
-}
-
-.cardDisable a:hover, .cardAble a:hover {
-  text-decoration: none;
-  color: #6c757d;
-}
-
-.cardDisable a, .cardAble a {
-  color: #6c757d;
+  background-color:$card-bg-color;
+  color: $card-text-color;
+  .card-body {
+    border : none !important;
+    .a-fake, a {
+      color: $card-link-color;
+      &:hover{
+        color:$card-link-hover-color;
+      }
+    }
+    .card-text {
+      height: 100px;
+      overflow: hidden;
+    }
+  }
 }
 
-.card-skin {
+.card-header {
   height: 175px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: $body-text-color;
-  background-color: $navbar-bg-color;
+  background-color:$card-header-bg-color;
+  color: $card-header-text-color;
   font-family: Arial, Helvetica, "Open Sans", sans-serif, monospace;
   font-size: 25pt;
   text-align: center;
@@ -67,6 +31,7 @@
   overflow: hidden;
 }
 
+
 .plan-name {
   font-size: 1.75rem;
   font-weight: 500;
@@ -78,7 +43,7 @@
 
 .card .plan-body {
   border: none;
-  background-color: $menu-bg-color;
+  // background-color: $companion_bg-color;
   margin: 0;
   border-radius:0;
   border-bottom-left-radius: 5px ;
@@ -99,15 +64,17 @@ a.card-link:hover, a.card-link:visited, a.card-link:link, a.card-link:active {
   }
 }
 
-.view-selectors {
-  .active {
-    color: $link-hover-color;;
-  }
-}
+// .view-selectors {
+//   // .active, .btn.active, :not(.btn-check) + .btn:active {
+//   //   color: $btn-bg-color;
+//   //   background-color: $btn-border-color;
+//   //   border-color: $btn-border-color;
+//   // }
+// }
 
 .card {
   #dropdownMenuButton {
-    color: $menu-text-color;
+    color: $card-link-color;
   }
 }
 
diff --git a/daikoku/javascript/src/style/components/backOffice.scss b/daikoku/javascript/src/style/components/backOffice.scss
index d67e888ee..1b8027670 100644
--- a/daikoku/javascript/src/style/components/backOffice.scss
+++ b/daikoku/javascript/src/style/components/backOffice.scss
@@ -36,41 +36,42 @@
   justify-content: start;
 
   .widget {
-
     height: 300px;
-    overflow-y: scroll;
+    // overflow-y: scroll;
     border-radius: 4px;
-    background-color: $sidebar-bg-color;
-    color: $sidebar-text-color;
+    background-color: $level2_bg-color;
+    color: $level2_text-color;
   }
 
-  .small{
+  .small {
     width: calc(30% - 20px);
   }
-  .medium {    width: calc(60% - 20px);
-
-  }
-  .large {    width: calc(90% - 20px);
-
+  .medium {
+    width: calc(60% - 20px);
   }
-  .widget-body {
-    overflow-y: scroll;
+  .large {
+    width: calc(90% - 20px);
   }
+  // .widget-body {
+  //   overflow-y: scroll;
+  // }
 
   .widget-title {
     padding: 0.5rem 1rem;
-    border: 0.1rem solid;
-    border-bottom: 0.5rem solid;
-    border-color: $btn-border-color;
-    background-color: $btn-bg-color;
-    color: $btn-text-color;
+    // border: 0.1rem solid;
+    // border-bottom: 0.5rem solid;
+    // border-color: $btn-border-color;
+    // background-color: $btn-bg-color;
+    // color: $btn-text-color;
+    background-color: $level2_bg-color;
+    color: $level2_text-color;
     text-align: center;
   }
 
   .widget-list-default-item,
   .widget-list-item {
-    background-color: $btn-bg-color;
-    color: $btn-text-color;
+    background-color: $level3_bg-color;
+    color: $level3_text-color;
     margin: 10px;
     border-left: 2px solid #fff;
     min-height: 30px;
@@ -87,7 +88,7 @@
   .revenus .percent {
     &.high {
       color: green;
-      i{
+      i {
         rotate: 325deg;
       }
     }
@@ -95,7 +96,7 @@
     &.low {
       color: red;
     }
-    i{
+    i {
       rotate: 45deg;
     }
   }
diff --git a/daikoku/javascript/src/style/components/badge.scss b/daikoku/javascript/src/style/components/badge.scss
index 67370ebb7..7cf709611 100644
--- a/daikoku/javascript/src/style/components/badge.scss
+++ b/daikoku/javascript/src/style/components/badge.scss
@@ -1,10 +1,10 @@
-// .bg-warning {
-//   background-color: $badge-tags-bg-color;
-//   color:$badge-tags-text-color;
-//   &:hover{
-//     background-color: $badge-tags-bg-hover-color;
-//   }
-// }
+.badge-custom {
+  background-color: $badge-tags-bg-color;
+  color:$badge-tags-text-color;
+  &:hover{
+    background-color: $badge-tags-bg-hover-color;
+  }
+}
 
 .issue__tag {
   border-radius: 7px;
diff --git a/daikoku/javascript/src/style/components/breadcrumb.scss b/daikoku/javascript/src/style/components/breadcrumb.scss
index 44e63cfcc..f66221208 100644
--- a/daikoku/javascript/src/style/components/breadcrumb.scss
+++ b/daikoku/javascript/src/style/components/breadcrumb.scss
@@ -10,7 +10,7 @@
 
     &::after {
       content: '';
-      background: $pagination-border-color;
+      background: $level3_bg-color;
       top: 6px;
       position: absolute;
       left: -24px;
@@ -28,7 +28,7 @@
         margin-top: 22px;
         width: 1px;
         height: 18px;
-        background: $pagination-border-color;
+        background: $level3_bg-color;
       }
 
     }
@@ -63,16 +63,16 @@
 .ant-steps {
   .ant-steps-item {
     .ant-steps-item-title{
-      color: $sidebar-text-color !important;
+      color: $level2_text-color !important;
 
     }
     .ant-steps-item-tail::after{
-      background-color: $sidebar-text-color !important;
+      background-color: $level2_text-color !important;
 
     }
 
     .ant-steps-item-container {
-      color: $sidebar-text-color;
+      color: $level2_text-color;
 
       .ant-steps-item-icon {
         .ant-steps-icon-dot {
@@ -84,7 +84,7 @@
     &.ant-steps-item-disabled {
       .ant-steps-item-icon {
         .ant-steps-icon-dot {
-          background: $pagination-border-color;
+          background: $level3_bg-color;
         }
       }
     }
diff --git a/daikoku/javascript/src/style/components/btn.scss b/daikoku/javascript/src/style/components/btn.scss
index 05e3665c3..49516d538 100644
--- a/daikoku/javascript/src/style/components/btn.scss
+++ b/daikoku/javascript/src/style/components/btn.scss
@@ -4,7 +4,7 @@ button {
   background-color: #fff;
 }
 
-.btn-access {
+.btn-outline {
   color: $btn-bg-color;
   background-color: $btn-text-color;
   border-color: $btn-bg-color;
@@ -14,14 +14,23 @@ button {
     background-color: $btn-text-color;
   }
 
-  &-negative {
+  &-primary {
     color: $btn-text-color;
     border-color: $btn-border-color;
     background-color: $btn-bg-color;
 
+    // , :not(.btn-check) + .btn:active
+    &.active,&:active{
+      color: $btn-bg-color !important;
+      background-color: $btn-border-color !important;
+      border-color: $btn-border-color !important;
+    }
+
     &:hover {
       color: $btn-bg-color;
       background-color: $btn-border-color;
+    border-color: $btn-border-color;
+
     }
   }
 }
@@ -56,19 +65,22 @@ button {
   border-radius: 0.2rem;
 }
 
-.btn-outline-primary:hover,
+.btn-outline-info:hover,
 .btn-outline-danger:hover,
 .btn-outline-success:hover,
 .btn.btn-danger:hover {
   color: #fff;
 }
 
+.btn-outline-primary.disabled,
+.btn-outline-primary.link__disabled,
+.btn-outline-primary:disabled,
 .btn-outline-success.disabled,
 .btn-outline-success.link__disabled,
 .btn-outline-success:disabled,
-.btn-outline-primary.disabled,
-.btn-outline-primary.link__disabled,
-.btn-outline-primary:disabled {
+.btn-outline-info.disabled,
+.btn-outline-info.link__disabled,
+.btn-outline-info:disabled {
   background-color: #fff;
   border-color: #9e9e9e;
   color: #9e9e9e;
@@ -107,8 +119,8 @@ button {
   }
 }
 
-.btn-outline-primary,
-.btn-outline-primary:focus {
+.btn-outline-info,
+.btn-outline-info:focus {
   background-color: #fff;
   color: $info-color;
   border-color: $info-color;
@@ -121,9 +133,9 @@ button {
   }
 }
 
-.btn-outline-primary:not(:disabled):not(.disabled):active,
-.btn-outline-primary:not(:disabled):not(.disabled).active,
-.show>.btn-outline-primary.dropdown-toggle {
+.btn-outline-info:not(:disabled):not(.disabled):active,
+.btn-outline-info:not(:disabled):not(.disabled).active,
+.show>.btn-outline-info.dropdown-toggle {
   color: #fff;
   border-color: $info-color;
   background-color: $info-color;
@@ -201,15 +213,15 @@ button {
 }
 
 .aggregation-button {
-  border: 1px solid $pagination-border-color;
+  border: 1px solid $level3_bg-color;
   min-height: 196px;
   border-radius: 8px;
-  color: $menu-text-color;
+  color: $companion_text-color;
 
 
   &:hover {
-    background-color: $menu-text-hover-bg-color;
-    color: $menu-text-hover-color;
-    border-color: $menu-text-hover-bg-color;
+    background-color: $companion_text-hover-bg-color;
+    color: $companion_text-hover-color;
+    border-color: $companion_text-hover-bg-color;
   }
 }
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/components/consumptions.scss b/daikoku/javascript/src/style/components/consumptions.scss
index 884ac3471..5e47459c2 100644
--- a/daikoku/javascript/src/style/components/consumptions.scss
+++ b/daikoku/javascript/src/style/components/consumptions.scss
@@ -29,8 +29,8 @@
         border: 1px solid $btn-border-color;
       }
       &:hover{
-        background-color: $btn-bg-hover-color;
-        color: $btn-text-hover-color;
+        background-color: $btn-border-color;
+        color: $btn-bg-color;
       }
 
       .ant-progress-outer {
@@ -83,8 +83,8 @@
     justify-content: center;
     align-items: flex-start;
 
-    color: $section-text-color;
-    background-color: $section-bg-color;
+    color: $level2_text-color;
+    background-color: $level2_bg-color;
     font-family: Arial, Helvetica, "Open Sans", sans-serif, monospace;
     //font-size: 25pt;
     text-align: center;
@@ -95,7 +95,7 @@
 
   .card-body {
     border: none;
-    background-color: $body-bg-color;
+    background-color: $level1_bg-color;
     margin: 0;
     height: 250px;
     overflow: scroll;
diff --git a/daikoku/javascript/src/style/components/discussion.scss b/daikoku/javascript/src/style/components/discussion.scss
index 66c706984..888acb37c 100644
--- a/daikoku/javascript/src/style/components/discussion.scss
+++ b/daikoku/javascript/src/style/components/discussion.scss
@@ -1,13 +1,17 @@
-.messages-sender{
+.messages-sender-container{
   // width: 25%;
-  background-color: $sidebar-bg-color;
+ // background-color: $level2_bg-color;
   height: calc(100vh - 160px);
   overflow: scroll;
-  .messages-sender__active {
-    background-color:$menu-text-hover-bg-color;
-    border-left: 2px solid $danger-color;
-    color:$menu-text-hover-color;
-  }
+  // .messages-sender{
+  //   color:$level2_link-color;
+
+  // }
+  // .messages-sender__active, .messages-sender:hover {
+  //   background-color:var(--level2-link-hover-bg-color);
+  //   // border-left: 2px solid $danger-color;
+  //   color:var(--level2-link-hover-text-color);
+  // }
 
   .user-avatar {
     border-radius: 50%;
@@ -62,7 +66,7 @@
     display: flex;
     flex-direction: row;
     padding: 10px;
-    background: $section-bg-color;
+    background: $level2_bg-color;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
     &__message{
@@ -89,7 +93,7 @@
       width: 70px;
       border: none;
       cursor: pointer;
-      background-color:  $section-bg-color;
+      background-color:  $level2_bg-color;
       color: $info-color;
       outline: none;
       &:hover {
@@ -148,8 +152,8 @@
     &--send {
       align-items: flex-end;
       .discussion-message {
-        color: #fff;
-        background-color: $info-color;
+        // color: $level2_text-color;
+        // background-color: $level2_bg-color;
         border-bottom-right-radius: 5px;
         border-top-right-radius: 5px;
 
@@ -187,7 +191,7 @@
 
   .delete-link {
   width: 50px;
-  color: $link-color;
+  color: $level2_link-color;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -196,6 +200,6 @@
 }
 
 .delete-link:hover {
-  color: $link-hover-color;
+  color: $level2_link-hover-color;
   text-decoration: none;
 }
diff --git a/daikoku/javascript/src/style/components/dragAndDropDoc.scss b/daikoku/javascript/src/style/components/dragAndDropDoc.scss
index 68701d6d2..04a57895c 100644
--- a/daikoku/javascript/src/style/components/dragAndDropDoc.scss
+++ b/daikoku/javascript/src/style/components/dragAndDropDoc.scss
@@ -7,9 +7,9 @@
   display: flex;
   align-items: center;
   padding: var(--vertical-padding) 10px;
-  background-color: #fff;
+  background-color: $level3_bg-color;
   border: 1px solid #dedede;
-  color: #222;
+  color: $level3_text-color;
   box-sizing: border-box;
 
   margin-top: 5px;
diff --git a/daikoku/javascript/src/style/components/fastMode.scss b/daikoku/javascript/src/style/components/fastMode.scss
index ea4d0a7d3..081afa35b 100644
--- a/daikoku/javascript/src/style/components/fastMode.scss
+++ b/daikoku/javascript/src/style/components/fastMode.scss
@@ -1,12 +1,12 @@
 @import '../variables.scss';
 /* fast cards*/
 .fast__hover:hover {
-  background-color: $menu-text-hover-bg-color;
-  color: $menu-text-hover-color;
+  background-color: $companion_text-hover-bg-color;
+  color: $companion_text-hover-color;
 }
 
 .explain__text {
-  border: 1px solid $body-text-color;
+  border: 1px solid $level1_text-color;
   padding: 10px;
   border-radius: 4px;
   text-align: justify;
diff --git a/daikoku/javascript/src/style/components/footer.scss b/daikoku/javascript/src/style/components/footer.scss
index cf9a21d99..9194093b2 100644
--- a/daikoku/javascript/src/style/components/footer.scss
+++ b/daikoku/javascript/src/style/components/footer.scss
@@ -14,7 +14,7 @@
 
 .footer {
   min-height: 60px;
-  margin-top: 35px;
+  // margin-top: 35px;
   bottom: 0;
 
   font-size: 18px;
diff --git a/daikoku/javascript/src/style/components/input.scss b/daikoku/javascript/src/style/components/input.scss
index f7e030d4b..19d9453cb 100644
--- a/daikoku/javascript/src/style/components/input.scss
+++ b/daikoku/javascript/src/style/components/input.scss
@@ -2,13 +2,13 @@
     color: $error-color;
 
     &:hover {
-        color: $error-hover-color;
+        color: $error-color;
     }
 }
 
 .accept {
     color: $success-color;
     &:hover {
-        color: $success-hover-color;
+        color: $success-color;
     }
 }
diff --git a/daikoku/javascript/src/style/components/messages.scss b/daikoku/javascript/src/style/components/messages.scss
index d72d4a255..73f1287c7 100644
--- a/daikoku/javascript/src/style/components/messages.scss
+++ b/daikoku/javascript/src/style/components/messages.scss
@@ -8,7 +8,7 @@
   right: 10px;
   background-color: $danger-color;
   border-radius: 50%;
-  border: 2px solid $navbar-bg-color;
+  // border: 2px solid $navbar-bg-color;
   box-sizing: content-box;
 }
 
diff --git a/daikoku/javascript/src/style/components/modal.scss b/daikoku/javascript/src/style/components/modal.scss
index badc205b0..aac27b113 100644
--- a/daikoku/javascript/src/style/components/modal.scss
+++ b/daikoku/javascript/src/style/components/modal.scss
@@ -1,8 +1,8 @@
 @import '../variables';
 
 .modal-header, .modal-content, .modal-body, .modal-footer{
-  background-color: $body-bg-color;
-  color: $body-text-color;
+  background-color: $level1_bg-color;
+  color: $level1_text-color;
 }
 
 .modal-footer .btn-danger{
@@ -23,7 +23,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  color: $body-text-color;
+  color: $level1_text-color;
 
   .team-selection {
     display: flex;
@@ -32,14 +32,14 @@
     width: 100%;
     padding: .5rem 1rem;
     border-bottom: 1px solid #dfdfdf;
-
+    color:$level1_link-color;
     &.team-selection__all-team {
       padding-bottom: 2rem;
     }
 
     &.selectable:hover {
       cursor: pointer;
-      background-color: $modal-selection-bg-color;
+      color:$level1_link-hover-color;
     }
 
     &:last-child {
@@ -62,10 +62,10 @@
     width: 100%;
     padding: .5rem 1rem;
     border-bottom: 1px solid #dfdfdf;
-
+    color:$level1_link-color;
     &:hover {
       cursor: pointer;
-      background-color: $modal-selection-bg-color;
+      color:$level1_link-hover-color;
     }
 
     &:last-child {
diff --git a/daikoku/javascript/src/style/components/note.scss b/daikoku/javascript/src/style/components/note.scss
index c2fe4870c..96bf47b9c 100644
--- a/daikoku/javascript/src/style/components/note.scss
+++ b/daikoku/javascript/src/style/components/note.scss
@@ -8,8 +8,8 @@
   position: relative;
   // background-color: rgba(64, 120, 192, 0.1);
   // color: #0a0a0a;
-  background-color: $body-bg-color;
-  color: $body-text-color;
+  background-color: $level1_bg-color;
+  color: $level1_text-color;
 }
 
 .note-warning {
diff --git a/daikoku/javascript/src/style/components/notification.scss b/daikoku/javascript/src/style/components/notification.scss
index dbe01e2cb..399f5ceaf 100644
--- a/daikoku/javascript/src/style/components/notification.scss
+++ b/daikoku/javascript/src/style/components/notification.scss
@@ -1,17 +1,20 @@
-.notification-link, .messages-link {
-  color: $navbar-text-color;
+.notification-link,
+.messages-link {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 
-  &:hover {
-    color: $navbar-text-hover-color;
-    text-decoration: none;
+  &-color {
+    color: $sidebar-text-color;
+    &:hover {
+      color: $sidebar-text-hover-color;
+      text-decoration: none;
 
-    &::before{
-      border-color: $navbar-text-hover-color;
-    } 
+      &::before {
+        border-color: $sidebar-text-hover-color;
+      }
+    }
   }
 }
 
@@ -25,7 +28,7 @@
   right: 3px;
   background-color: $danger-color;
   border-radius: 50%;
-  border: 2px solid $navbar-text-color;
+  // border: 2px solid $navbar-text-color;
   box-sizing: content-box;
   z-index: 1;
 }
diff --git a/daikoku/javascript/src/style/components/pagination.scss b/daikoku/javascript/src/style/components/pagination.scss
index 9ba6628ac..932b00406 100644
--- a/daikoku/javascript/src/style/components/pagination.scss
+++ b/daikoku/javascript/src/style/components/pagination.scss
@@ -8,7 +8,7 @@
   margin-top: 16px;
 
   li, li:not(.next,.previous) a {
-    color: $pagination-text-color;
+    color:$level2_link-color;
   }
 
   li.page-selector {
@@ -18,22 +18,23 @@
     align-items: center;
     justify-content: center;
     transition: color .35s ease-in-out;
-    border: 1px solid $pagination-border-color;
+    border: 1px solid $level3_bg-color;
     margin-left: -1px;
+    color:$level2_link-color;
     &:hover {
-      color:$menu-text-color;
+      color:$level2_link-hover-color;
       cursor: pointer;
     }
 
     &.active {
-      background-color: $menu-text-hover-bg-color;
+      background-color: $level3_bg-color;
       a {
-        color:$menu-text-hover-color;
+        color:$level3_link-color;
       }
     }
 
     a {
-      color: $pagination-text-color;
+      color:$level2_link-color;
       display: flex;
       width: 100%;
       height: 100%;
@@ -48,13 +49,19 @@
 
   li.next, li.previous {
     padding: 0.5rem;
-    border: 1px solid $pagination-border-color;
+    border: 1px solid $level3_bg-color;
     min-width: 30px;
         height: 30px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
+    a {
+      color:$level2_link-color;
+      &:hover {
+        color:$level2_link-hover-color;
+      }
+    }
     &.disabled {
       cursor: not-allowed;
       a {
diff --git a/daikoku/javascript/src/style/components/reactSelect.scss b/daikoku/javascript/src/style/components/reactSelect.scss
index 1de58a492..e19485405 100644
--- a/daikoku/javascript/src/style/components/reactSelect.scss
+++ b/daikoku/javascript/src/style/components/reactSelect.scss
@@ -28,8 +28,8 @@
 
 .reactSelect__group-heading{
   padding: 10px;
-  background-color: $menu-text-hover-bg-color;
-  color : $menu-text-hover-color !important;
+  background-color: $companion_text-hover-bg-color;
+  color : $companion_text-hover-color !important;
 }
 .groupStyles {
   display: flex;
diff --git a/daikoku/javascript/src/style/components/reactTable.scss b/daikoku/javascript/src/style/components/reactTable.scss
index 58ef4ec80..59475691d 100644
--- a/daikoku/javascript/src/style/components/reactTable.scss
+++ b/daikoku/javascript/src/style/components/reactTable.scss
@@ -115,7 +115,7 @@
 	}
 
 	.ReactTable a {
-		color : $menu-text-color;
+		color : $companion_text-color;
 	}
 
 	.ReactTable a:hover {
diff --git a/daikoku/javascript/src/style/components/recharts.scss b/daikoku/javascript/src/style/components/recharts.scss
index 1fa849731..6c505c25b 100644
--- a/daikoku/javascript/src/style/components/recharts.scss
+++ b/daikoku/javascript/src/style/components/recharts.scss
@@ -1,7 +1,7 @@
 .recharts{
-  background-color: $section-bg-color;
+  background-color: $level2_bg-color;
 }
 
 h4.recharts{
-  color:$section-text-color;
+  color:$level2_text-color;
 }
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/components/sortable.scss b/daikoku/javascript/src/style/components/sortable.scss
index 496f778f6..d1cdfc13e 100644
--- a/daikoku/javascript/src/style/components/sortable.scss
+++ b/daikoku/javascript/src/style/components/sortable.scss
@@ -114,11 +114,11 @@
   }
 
   &.over {
-    box-shadow: inset $navbar-bg-color 0 0 0 3px, rgba(201, 211, 219, 0.5) 20px 14px 24px;
+    box-shadow: inset $level3_bg-color 0 0 0 3px, rgba(201, 211, 219, 0.5) 20px 14px 24px;
 
     >svg {
       opacity: 1;
-      color: $navbar-bg-color;
+      color: $level3_bg-color;
     }
 
     &.dropped {
@@ -157,7 +157,7 @@
 //**************
 
 .validation-step__type {
-  border: 2px solid $navbar-bg-color;
+  border: 2px solid $level3_bg-color;
   position: absolute;
   display: flex;
   justify-content: center;
@@ -167,12 +167,12 @@
   width: 36px;
   height: 36px;
   border-radius: 50%;
-  background-color: $navbar-bg-color;
-  color: $navbar-brand-color
+  background-color: $level3_bg-color;
+  color: $level3_text-color
 }
 
 .sortable-item {
-  border: 2px solid $navbar-bg-color;
+  border: 2px solid $level3_bg-color;
   height: 200px;
   width: 120px
 }
diff --git a/daikoku/javascript/src/style/components/tableApi.scss b/daikoku/javascript/src/style/components/tableApi.scss
index 118b58b3a..71d5ab86d 100644
--- a/daikoku/javascript/src/style/components/tableApi.scss
+++ b/daikoku/javascript/src/style/components/tableApi.scss
@@ -9,11 +9,6 @@
 }
 
 .table-hover tbody tr:hover {
-  color: $link-hover-color;
-}
-
-.iconized {
-  background-color: $menu-text-hover-bg-color;
-  color: $menu-text-hover-color;
+  color: $level2_link-hover-color;
 }
 
diff --git a/daikoku/javascript/src/style/components/toastr.scss b/daikoku/javascript/src/style/components/toastr.scss
index 35d0f9616..d375d80d1 100644
--- a/daikoku/javascript/src/style/components/toastr.scss
+++ b/daikoku/javascript/src/style/components/toastr.scss
@@ -5,9 +5,9 @@
   --normal-border: var(--gray4);
   --normal-text: var(--gray12);
 
-  --success-bg: #{$success-hover-color};
-  --success-border: #{$success-hover-color};
-  --success-text: #{$success-color};
+  --success-bg: #{$success-color};
+  --success-border: #{$success-color};
+  --success-text: #FFF;
 
   --info-bg: hsl(208, 100%, 97%);
   --info-border: hsl(221, 91%, 91%);
@@ -17,9 +17,9 @@
   --warning-border: hsl(49, 91%, 91%);
   --warning-text: hsl(31, 92%, 45%);
 
-  --error-bg: #{$error-hover-color};
-  --error-border: #{$error-hover-color};
-  --error-text: #000;
+  --error-bg: #{$error-color};
+  --error-border: #{$error-color};
+  --error-text: #FFF;
 }
 
 [data-sonner-toaster][data-theme='dark'] {
diff --git a/daikoku/javascript/src/style/layout/darkmode.scss b/daikoku/javascript/src/style/layout/darkmode.scss
index a16534ed1..62b6f3b50 100644
--- a/daikoku/javascript/src/style/layout/darkmode.scss
+++ b/daikoku/javascript/src/style/layout/darkmode.scss
@@ -1,62 +1,60 @@
 
-[data-theme="DARK"] {
-    --body-text-color: #e2e2e2;
-    --body-bg-color: #121212;
+// [data-theme="DARK"] {
+//     --body_text-color: #e2e2e2;
+//     --body_bg-color: #121212;
 
-    --link-color: #e2e2e2;
-    --link--hover-color: #8fa6bf;
+//     --level2_link-color: #e2e2e2;
+//     --level2_link-hover-color: #8fa6bf;
 
-    --navbar-bg-color: #191c24;
-    --navbar-brand-color: #fff;
 
-    --sidebar-bg-color: #191c24;
-    --sidebar-text-color: #bbc0df;
+//     --sidebar-bg-color: #191c24;
+//     --sidebar-text-color: #bbc0df;
 
-    --menu-text-color: #e2e2e2;
-    --menu-text-hover-color: #fff;
-    --menu-text-hover-bg-color: #0f1015;
-    --menu-bg-color: #191c24;
+//     --menu-text-color: #e2e2e2;
+//     --menu-text-hover-color: #fff;
+//     --menu-text-hover-bg-color: #0f1015;
+//     --menu-bg-color: #191c24;
 
-    --btn-bg-color: #121212;
-    --btn-text-color: #e2e2e2;
-    --btn-border-color: #97b0c7;
-    --btn-bg-hover-color: #fff;
-    --btn-text-hover-color: #495057;
+//     --btn-bg-color: #121212;
+//     --btn-text-color: #e2e2e2;
+//     --btn-border-color: #97b0c7;
+//     --btn-bg-hover-color: #fff;
+//     --btn-text-hover-color: #495057;
 
-    --section-bg-color: #1f232d;
-    --section-text-color: #e2e2e2;
-    --section-bottom-color: #191c24;
+//     --level2_bg-color: #1f232d;
+//     --level2_text-color: #e2e2e2;
+//     --section-bottom-color: #191c24;
 
-    --form-text-color: #6c7293;
-    --form-border-color: #586069;
-    --form-bg-color: #121212;
+//     --form-text-color: #6c7293;
+//     --form-border-color: #586069;
+//     --form-bg-color: #121212;
 
-    --form-select-focused-color: #fff;
-    --form-select-focused-text-color : #ddd;
-    --form-select-hover-color: #ccc;
-    --form-select-hover-text-color: #000;
+//     --form-select-focused-color: #fff;
+//     --form-select-focused-text-color : #ddd;
+//     --form-select-hover-color: #ccc;
+//     --form-select-hover-text-color: #000;
 
 
-    --badge-tags-bg-color: #9a81b8;
-    --badge-tags-bg-hover-color: #b597d9;
-    --badge-tags-text-color: #212529;
+//     --badge-tags-bg-color: #9a81b8;
+//     --badge-tags-bg-hover-color: #b597d9;
+//     --badge-tags-text-color: #212529;
 
 
-    --error-color: #ffa494;
-    --error-hover-color: #ffa494;
-    --success-color: #76cf18;
-    --success-hover-color: #76cf18;
+//     --error-color: #ffa494;
+//     --error-hover-color: #ffa494;
+//     --success-color: #76cf18;
+//     --success-hover-color: #76cf18;
 
 
-    --pagination-text-color: #586069;
-    --pagination-border-color: #586069;
+//     --pagination-text-color: #586069;
+//     --pagination-border-color: #586069;
 
-    --table-bg-color: #f8f9fa;
+//     --table-bg-color: #f8f9fa;
 
-    --modal-selection-bg-color: rgba(27,31,35,.15);
-    --bs-backdrop-bg: #545454;
+//     --modal-selection-bg-color: rgba(27,31,35,.15);
+//     --bs-backdrop-bg: #545454;
 
-    .modal-content .btn-close {
-        filter: invert(48%) saturate(2476%) brightness(118%) contrast(119%);
-      }
-}
\ No newline at end of file
+//     .modal-content .btn-close {
+//         filter: invert(48%) saturate(2476%) brightness(118%) contrast(119%);
+//       }
+// }
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/layout/home.scss b/daikoku/javascript/src/style/layout/home.scss
index 22219e148..5b7167c55 100644
--- a/daikoku/javascript/src/style/layout/home.scss
+++ b/daikoku/javascript/src/style/layout/home.scss
@@ -1,8 +1,7 @@
 .organisation__header {
-  border-bottom: 1px solid $section-bottom-color;
   position: relative;
-  background-color: $section-bg-color;
-  color:$section-text-color;
+  background-color: $level2_bg-color;
+  color:$level2_text-color;
   .organisation__avatar {
     width: 150px;
   }
diff --git a/daikoku/javascript/src/style/layout/login.scss b/daikoku/javascript/src/style/layout/login.scss
index 2624ec472..c0a12a568 100644
--- a/daikoku/javascript/src/style/layout/login.scss
+++ b/daikoku/javascript/src/style/layout/login.scss
@@ -6,13 +6,12 @@
   padding-bottom: 20px;
 
     .login__container {
-      background-color: $menu-bg-color;
+      // background-color: $companion_bg-color;
 
       .organisation__header {
-        border-bottom: 1px solid $section-bottom-color;
         position: relative;
-        background-color: $section-bg-color;
-        color:$section-text-color;
+        background-color: $level2_bg-color;
+        color:$level2_text-color;
         margin-bottom: 15px;
         padding-bottom: 15px;
 
@@ -20,7 +19,10 @@
           width: 150px;
         }
       }
+      .form-container{
 
+        background-color: $level2_bg-color;
+      }
       form {
         padding: 5px 15px;
       }
diff --git a/daikoku/javascript/src/style/layout/navbar.scss b/daikoku/javascript/src/style/layout/navbar.scss
index b139c377d..960aa18a7 100644
--- a/daikoku/javascript/src/style/layout/navbar.scss
+++ b/daikoku/javascript/src/style/layout/navbar.scss
@@ -4,16 +4,16 @@
 }
 
 a.navbar-brand, #teamSelector:hover {
-  color:$navbar-brand-color;
-}
+  color:$sidebar-text-color;
+} 
 
 .navbar .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
   color: #fff;
 }
 
 .navbar {
-  background-color: $navbar-bg-color;
-  padding: .5rem 1rem;
+  background-color: $sidebar-bg-color;
+  // padding: .5rem 1rem;
 }
 
 .logo-anonymous {
@@ -24,17 +24,18 @@ a.navbar-brand, #teamSelector:hover {
 }
 
 .dropdown-menu {
-  background-color: $menu-bg-color;
+  background-color: $level3_bg-color;
 }
 .dropdown-item {
-  color:$menu-text-color;
+  color:$level3_link-color;
   &:hover {
-    background-color: $menu-text-hover-bg-color;
-    color: $menu-text-hover-color
+    background-color: $level3_link-hover-bg-color;
+    color: $level3_link-hover-color
   }
 }
 .dropdown-divider{
-  border-color: $menu-divider-color;
+  border-color:  $level3_link-color;
+
 }
 .add-member-select, .general-search{
   width: 400px;
@@ -66,12 +67,12 @@ a.navbar-brand, #teamSelector:hover {
   }
 }
 
-.darkmode {
-  color: $navbar-text-color;
-  &:hover{
-    color:$navbar-text-hover-color;
-  }
-}
+// .darkmode {
+//   color: $navbar-text-color;
+//   &:hover{
+//     color:$navbar-text-hover-color;
+//   }
+// }
 
 
 
@@ -101,9 +102,9 @@ a.navbar-brand, #teamSelector:hover {
   z-index: 1000;
   top: 0;
   left: 55px;
-  background-color: $body-bg-color;
-  color: $body-text-color;
-
+  background-color: $companion_bg-color;
+  color: $companion_text-color;
+  filter: brightness(105%);
   transition: width .2s ease-in-out;
 
   &.opened {
@@ -119,8 +120,8 @@ a.navbar-brand, #teamSelector:hover {
     width: 40px;
     &:hover {
       border-radius: 50%;
-      background-color: $section-bg-color;
-      color: $section-text-color;
+      background-color:   $companion_text-hover-bg-color;  
+      color: var( --companion-link-hover-text-color);
     }
   }
 }
@@ -151,26 +152,23 @@ a.navbar-brand, #teamSelector:hover {
   .blocks {
     .block {
       .block__category {
-        color: gray;
+        color: $companion_text-color;
         text-transform: capitalize;
         font-weight: 600;
         font-size: 12px;
       }
-      .block__border {
-        border-left: 1px solid var(--navbar-bg-color, #7f96af);
-      }
       .block__entries {
         .block__entry__link {
           cursor: pointer;
           font-size: 14px;
-          color: $sidebar-text-color;
+          color: $companion_link-color;
           margin-bottom: 5px;
           line-height: 40px;
           border-radius: 4px;
           padding-left: .5rem;
           &:hover {
-            background-color: var(--menu-text-hover-bg-color, #9bb0c5);
-            color: var(--menu-text-hover-color, #fff);
+            background-color: $companion_text-hover-bg-color;
+            color: $companion_text-hover-color;
           }
         }
       }
@@ -182,7 +180,9 @@ a.navbar-brand, #teamSelector:hover {
 
 .navbar-companion {
   z-index: 10;
-  background-color: $sidebar-bg-color;
+  background-color: $companion_bg-color;
+  // color: $level1_text-color;
+  filter: brightness(105%);
   height: 100vh;
   position: relative;
   min-width: 20px;
@@ -216,7 +216,7 @@ a.navbar-brand, #teamSelector:hover {
       text-overflow: ellipsis;
       white-space: nowrap;
       line-height: 1.14286;
-      color: $sidebar-text-color;
+      color: $companion_text-color;
       font-weight: 600;
 
       h3{
@@ -234,14 +234,14 @@ a.navbar-brand, #teamSelector:hover {
           .block__entry__link {
             cursor: pointer;
             font-size: 14px;
-            color: $sidebar-text-color;
+            color: $companion_link-color;
             margin-bottom: 5px;
             line-height: 40px;
             border-radius: 4px;
             padding-left: .5rem;
             &.active {
-              background-color: $menu-text-hover-bg-color;
-              color: $menu-text-hover-color;
+              background-color: $companion_text-hover-bg-color;
+              color:$companion_text-hover-color;
             }
 
             &.disabled {
@@ -250,15 +250,15 @@ a.navbar-brand, #teamSelector:hover {
             }
 
             &:not(.disabled):hover {
-              background-color: $menu-text-hover-bg-color;
-              color: var(--menu-text-hover-color, #fff);
+              background-color: $companion_text-hover-bg-color;
+              color: $companion_text-hover-color;
             }
           }
 
           .submenu__entry__link {
             cursor: pointer;
             font-size: 14px;
-            color: $sidebar-text-color;
+            color: $companion_link-color;
             margin-bottom: 4px;
             line-height: 35px;
             padding-left: .5rem;
@@ -266,8 +266,10 @@ a.navbar-brand, #teamSelector:hover {
             height: 35px;
 
             &.active {
-              border-bottom: 1px solid $menu-text-hover-bg-color;
-              // color: $menu-text-hover-color;
+              // border-bottom: 1px solid $companion_text-hover-bg-color;
+              // color: $companion_text-hover-color;
+              background-color: $companion_text-hover-bg-color;
+              color: $companion_text-hover-color;
             }
             
             &.disabled {
@@ -276,7 +278,9 @@ a.navbar-brand, #teamSelector:hover {
             }
             
             &:hover {
-              border-bottom: 1px solid $menu-text-hover-bg-color;
+              // border-bottom: 1px solid $companion_text-hover-bg-color;
+              background-color: $companion_text-hover-bg-color;
+              color: $companion_text-hover-color;
             }
           }
 
@@ -306,7 +310,7 @@ a.navbar-brand, #teamSelector:hover {
     }
 
     &:hover {
-      background-color: $navbar-bg-color;
+      // background-color: $navbar-bg-color;
       color: #fff;
       border: 1px solid rgba(0, 0, 0, .1);
     }
@@ -332,8 +336,8 @@ a.navbar-brand, #teamSelector:hover {
   border-radius: 4px;
   padding-left: .5rem;
   &.active {
-    background-color: $menu-text-hover-bg-color;
-    color: $menu-text-hover-color;
+    background-color: $companion_text-hover-bg-color;
+    color: $companion_text-hover-color;
   }
 
   &.disabled {
@@ -342,7 +346,7 @@ a.navbar-brand, #teamSelector:hover {
   }
 
   &:hover {
-    background-color: $menu-text-hover-bg-color;
+    background-color: $companion_text-hover-bg-color;
     color: var(--menu-text-hover-color, #fff);
   }
 }
diff --git a/daikoku/javascript/src/style/layout/sidebar.scss b/daikoku/javascript/src/style/layout/sidebar.scss
index 3e8169da4..b7eab422b 100644
--- a/daikoku/javascript/src/style/layout/sidebar.scss
+++ b/daikoku/javascript/src/style/layout/sidebar.scss
@@ -56,12 +56,12 @@
 }
 
 .sidebar .nav-link.active,.sidebar .nav-link.active .fas  {
-  color: $menu-text-hover-color;
-  background-color: $menu-text-hover-bg-color;
+  color: $companion_text-hover-color;
+  background-color: $companion_text-hover-bg-color;
 }
 
 .sidebar .nav-link.active .nav-icon {
-  fill: $link-color;
+  fill: $level2_link-color;
 }
 
 .sidebar .nav-link:hover .feather,.sidebar .nav-link:hover .fas,
diff --git a/daikoku/javascript/src/style/layout/style.scss b/daikoku/javascript/src/style/layout/style.scss
index e8493ee61..d78ffb7d1 100644
--- a/daikoku/javascript/src/style/layout/style.scss
+++ b/daikoku/javascript/src/style/layout/style.scss
@@ -1,7 +1,7 @@
 body {
   font-family: Custom, Raleway, Helvetica, sans-serif;
-  background-color: $body-bg-color;
-  color: $body-text-color;
+  background-color: $level1_bg-color;
+  color: $level1_text-color;
   font-size: 1rem;
 }
 
@@ -12,7 +12,7 @@ body {
 
 .a-fake,
 a {
-  color: $link-color;
+  color: $level1_link-color;
 }
 
 .a-fake {
@@ -21,7 +21,7 @@ a {
 
 .a-fake:hover,
 a:hover {
-  color: $link-hover-color;
+  color: $level1_link-hover-color;
 }
 
 .cursor-pointer {
@@ -57,7 +57,7 @@ hr {
 }
 
 main {
-  background-color: $body-bg-color;
+  background-color: $level1_bg-color;
 
   // .jumbotron {
   //   background-color: #fff;
@@ -95,8 +95,8 @@ a.nav-link.active {
 
 .section,
 .album {
-  background-color: $section-bg-color;
-  color: $section-text-color;
+  background-color: $level2_bg-color;
+  color: $level2_text-color;
 }
 
 .underline-on-hover:hover {
@@ -104,12 +104,12 @@ a.nav-link.active {
 }
 
 .additionalContent {
-  background-color: $sidebar-bg-color;
-  color: $sidebar-text-color;
+  background-color: $level2_bg-color;
+  color: $level2_text-color;
 }
 
 .navDocumentation {
-  border-right: 1px solid $link-color;
+  border-right: 1px solid $level2_link-color;
 
   ul {
     list-style: none;
@@ -124,17 +124,17 @@ a.nav-link.active {
       padding: 0 0.5rem;
       display: block;
       width: 100%;
-      color: $menu-text-color;
+      color: $companion_text-color;
       margin-bottom: 0.3rem;
 
       &:hover {
-        background-color: $menu-text-hover-bg-color;
-        color: $menu-text-hover-color;
+        background-color: $companion_text-hover-bg-color;
+        color: $companion_text-hover-color;
       }
 
       &.active {
-        background-color: $menu-text-hover-bg-color;
-        color: $menu-text-hover-color;
+        background-color: $companion_text-hover-bg-color;
+        color: $companion_text-hover-color;
       }
     }
   }
@@ -220,8 +220,8 @@ img:hover + .changePicture,
   .nav-link:hover,
   .nav-link:focus {
     cursor: pointer;
-    background-color: $btn-bg-hover-color;
-    color: $btn-text-hover-color;
+    background-color: $btn-border-color;
+    color: $btn-bg-color;
   }
 
   .nav-link.active,
@@ -311,9 +311,9 @@ img:hover + .changePicture,
 .wrapper:not(.information-container) {
   height: 100vh;
   overflow: scroll;
-  padding-top: 10px;
-  padding-left: 5px;
-  padding-right: 20px;
+  // padding-top: 10px;
+  // padding-left: 5px;
+  // padding-right: 20px;
 }
 
 a {
@@ -333,3 +333,51 @@ a {
     width: 100%;
   }
 }
+
+.companion-link {
+  color: $companion_link-color;
+  &:hover {
+    background-color: $companion_text-hover-bg-color;
+    color: $companion_text-hover-color;
+  }
+}
+
+.level1-link {
+  color: $level1_link-color;
+  &:hover {
+    color: $level1_link-hover-color;
+  }
+}
+
+.level1{
+  background-color: $level1_bg-color;
+  color: $level1_text-color;
+}
+.level2 {
+  background-color: $level2_bg-color;
+  color: $level2_text-color;
+}
+.level3 {
+  background-color: $level3_bg-color;
+  color: $level3_text-color;
+}
+.level3-link {
+  color: $level3_link-color;
+  &:hover {
+    color: $level3_link-hover-color;
+    background-color: $level3_link-hover-bg-color;
+  }
+}
+
+.level2-link {
+  color: $level2_link-color;
+  &:hover {
+    color: $level2_link-hover-color;
+  }
+  &__with-bg:hover,
+  &__active-bg {
+    color: var(--btn-text-color);
+    background-color: var(--btn-bg-color);
+    border-color: var(--btn-border-color);
+  }
+}
diff --git a/daikoku/javascript/src/style/layout/teamBilling.scss b/daikoku/javascript/src/style/layout/teamBilling.scss
index 7e84144e7..fc25e889c 100644
--- a/daikoku/javascript/src/style/layout/teamBilling.scss
+++ b/daikoku/javascript/src/style/layout/teamBilling.scss
@@ -1,4 +1,4 @@
-@import '../variables.scss';
+@import "../variables.scss";
 
 .month__and__total {
   width: 100%;
@@ -13,8 +13,8 @@
   display: flex;
   justify-content: space-between;
   //border: 1px solid #bbc9d8;
-  background-color: $sidebar-bg-color;
-
+  background-color: $level3_bg-color;
+  color: $level3_text-color;
   .title__container__bloc {
     display: flex;
     align-items: center;
@@ -36,13 +36,13 @@
 }
 
 .api__billing__card__container {
- // background-color: #ececec;
+  // background-color: #ececec;
   margin-left: 6px;
   margin-top: 10px;
 
   .api__billing__card {
     cursor: pointer;
-    background-color: $sidebar-bg-color;
+    background-color: $level3_bg-color;
     //border: 1px solid #e8e8e8;
     padding: 10px;
     width: 160px;
@@ -57,13 +57,13 @@
 
 .currency__total {
   font-size: 24px;
-  color: #007bff;
+  color: $level3_text-color;
   margin-left: 8px;
 }
 
 .currency {
   font-size: 24px;
-  color: #007bff;
+  color: $level3_text-color;
 
   .unit {
     margin-left: 10px;
@@ -88,31 +88,32 @@
 
   .price__cartridge__total {
     font-size: 18px;
-    color: #007bff;
+    color: $level3_text-color;
   }
 }
 
 .apikeys {
   text-align: center;
   margin-top: 40px;
-
+  .api-plans-consumptions {
+    background-color: $level3_bg-color;
+  }
   @media screen and (max-width: 768px) {
-        position: absolute;
-        top:120px;
-
-      .api-plans-consumptions{
-        background-color: hsla(0, 0%, 83%, 1);
-        padding-bottom: 20px;
-        border: 1px solid #7f96af;
-        // min-height: 200px;
-      }
+    position: absolute;
+    top: 120px;
+
+    .api-plans-consumptions {
+      padding-bottom: 20px;
+      border: 1px solid #7f96af;
+      // min-height: 200px;
+    }
   }
 
   .api__plans__consumption__header {
     display: flex;
     justify-content: space-between;
     font-size: 20px;
-    color: $link-color;
+    color: $level3_text-color;
     padding: 15px 5px;
 
     i.quit {
@@ -140,7 +141,7 @@
     font-size: 14px;
   }
 }
-.no-data__container{
+.no-data__container {
   display: flex;
   justify-content: center;
   margin: 10px;
diff --git a/daikoku/javascript/src/style/variables.scss b/daikoku/javascript/src/style/variables.scss
index 5022f3c31..65d13bfd0 100644
--- a/daikoku/javascript/src/style/variables.scss
+++ b/daikoku/javascript/src/style/variables.scss
@@ -1,67 +1,64 @@
-
-$body-text-color:#{"var(--body-text-color, #212529)"};//body
-$body-bg-color:#{"var(--body-bg-color, #fff)"};//body
-
-$link-color: #{"var(--link-color, #7f96af)"};//link
-$link-hover-color: #{"var(--link--hover-color, #8fa6bf)"};//link
-
-$navbar-text-color: #{"var(--navbar-text-color, #fff)"};//navbar
-$navbar-text-hover-color: #{"var(--navbar-text-hover-color, #ccc)"};//navbar
-$navbar-bg-color: #{"var(--navbar-bg-color, #7f96af)"};//navbar
-$navbar-brand-color: #{"var(--navbar-brand-color, #fff)"};//navbar
-
-$footer-text-color: #{"var(--footer-text-color, #fff)"};//footer
-$footer-bg-color: #{"var(--footer-bg-color, #7f96af)"};//footer
-
-$sidebar-text-color:#{"var(--sidebar-text-color, #000)"};//sidebar
-$sidebar-bg-color: #{"var(--sidebar-bg-color, #f8f9fa)"};//sidebar
-
-$menu-bg-color:#{"var(--menu-bg-color, #fff)"};//menu
-$menu-text-color:#{"var(--menu-text-color, #212529)"};//menu
-$menu-text-hover-bg-color:#{"var(--menu-text-hover-bg-color, #9bb0c5)"};//menu
-$menu-text-hover-color:#{"var(--menu-text-hover-color, #fff)"};//menu
-$menu-divider-color:#{"var(--menu-divider-color, #e9ecef)"};//menu
-
-$btn-bg-color: #{"var(--btn-bg-color, #fff)"};//button
-$btn-bg-hover-color: #{"var(--btn-bg-hover-color, #fff)"};//button
-$btn-text-color: #{"var(--btn-text-color, #495057)"};//button
-$btn-text-hover-color: #{"var(--btn-text-hover-color, #495057)"};//button
-$btn-border-color: #{"var(--btn-border-color, #97b0c7)"};//button
-
-
-$section-bg-color:  #{"var(--section-bg-color, #f8f9fa)"};//body
-$section-text-color:#{"var(--section-text-color, #6c757d)"};//body
-$section-bottom-color:  #{"var(--section-bottom-color, #eee)"};//body
-
-$form-text-color:#{"var(--form-text-color, #000)"};//form
-$form-border-color:#{"var(--form-border-color, #586069)"};//form
-$form-bg-color:#{"var(--form-bg-color, #fff)"};//form
-
-$form-select-focused-color:#{"var(--form-select-focused-color, #fff)"};//form
-$form-select-focused-text-color:#{"var(--form-select-focused-text-color, #ddd)"};//form
-$form-select-heading-color:#{"var(--form-select-heading-color, #3b4151)"};//form
-$form-select-hover-color:#{"var(--form-select-hover-color, #ccc)"};//form
-$form-select-hover-text-color:#{"var(--form-select-hover-text-color, #000)"};//form
-
-$badge-tags-bg-color:#{"var(--badge-tags-bg-color, #ffc107)"};//components
-$badge-tags-bg-hover-color:#{"var(--badge-tags-bg-hover-color, #ffe1a7)"};//components
-$badge-tags-text-color:#{"var(--badge-tags-text-color, #212529)"};//components
-
-
-$error-color: #{"var(--error-color, #ff6347)"};//status
-$error-hover-color: #{"var(--error--hover-color, #ffa494)"};//status
-$success-color: #{"var(--success-color, #65B741)"};//status
-$success-hover-color: #{"var(--success-hover-color, #C1F2B0)"};//status
-$info-color: #{"var(--info-color, #17a2b8)"};//status
-$warning-color: #{"var(--warning-color, #ffc107)"};//status
-$danger-color: #{"var(--danger-color, #dc3545)"};//status
-
-$pagination-text-color:#{"var(--pagination-text-color, #586069)"};//pagination
-$pagination-border-color:#{"var(--pagination-border-color, #586069)"};//pagination
-
-$table-bg-color:#{"var(--table-bg-color, #f8f9fa)"};//components
-
-$modal-selection-bg-color: #{"var(--modal-selection-bg-color, #4F5657)"};//components
+$level1_text-color: #{"var(--body_text-color, #212529)"}; //body
+$level1_bg-color: #{"var(--body_bg-color, #FFDB58)"}; //body
+$level1_link-color: #{"var(--body_link-color)"};
+$level1_link-hover-color: #{"var(--body_link-hover-color)"};
+
+$level2_bg-color: #{"var(--level2_bg-color, #f8f9fa)"}; //body
+$level2_text-color: #{"var(--level2_text-color, #6c757d)"}; //body
+$level2_link-color: #{"var(--level2_link-color, #7f96af)"}; //link
+$level2_link-hover-color: #{"var(--level2_link-hover-color, #8fa6bf)"}; //link
+
+$level3_bg-color: #{"var(--level3_bg-color, #f8f9fa)"}; //body
+$level3_text-color: #{"var(--level3_text-color, #6c757d)"}; //body
+$level3_link-color: #{"var(--level3_link-color, brown)"}; //link
+$level3_link-hover-color: #{"var(--level3_link-hover-color, grey)"}; //link
+$level3_link-hover-bg-color: #{"var(--level3_link-hover-bg-color, grey)"};
+
+$footer-text-color: #{"var(--footer-text-color, #fff)"}; //footer
+$footer-bg-color: #{"var(--footer-bg-color, #7f96af)"}; //footer
+
+
+$sidebar-text-color: #{"var(--sidebar-text-color, #000)"}; //sidebar
+$sidebar-text-hover-color: #{"var(--sidebar-text-hover-color, #000)"}; //sidebar
+$sidebar-bg-color: #{"var(--sidebar-bg-color, red)"}; //sidebar
+
+$companion_bg-color: #{"var(--menu-bg-color, #fff)"}; //menu
+$companion_text-color: #{"var(--menu-text-color, #212529)"}; //menu
+$companion_text-hover-bg-color: #{"var(--menu-text-hover-bg-color, #9bb0c5)"}; //menu
+$companion_text-hover-color: #{"var(--menu-text-hover-color, #fff)"}; //menu
+$companion_link-color: #{"var(--menu-link-color, grey)"}; //menu
+
+$btn-bg-color: #{"var(--btn-bg-color, #fff)"}; //button
+$btn-text-color: #{"var(--btn-text-color, #495057)"}; //button
+$btn-border-color: #{"var(--btn-border-color, #97b0c7)"}; //button
+
+$form-text-color: #{"var(--form-text-color, #000)"}; //form
+$form-border-color: #{"var(--form-border-color, #586069)"}; //form
+$form-bg-color: #{"var(--form-bg-color, #fff)"}; //form
+
+$form-select-focused-color: #{"var(--form-select-focused-color, red)"}; //form
+$form-select-focused-text-color: #{"var(--form-select-focused-text-color, green)"}; //form
+$form-select-heading-color: #{"var(--form-select-heading-color, yellow)"}; //form
+$form-select-hover-color: #{"var(--form-select-hover-color, black)"}; //form
+$form-select-hover-text-color: #{"var(--form-select-hover-text-color, brown)"}; //form
+
+$badge-tags-bg-color: #{"var(--badge-tags-bg-color, #ffc107)"}; //components
+$badge-tags-bg-hover-color: #{"var(--badge-tags-bg-hover-color, #ffe1a7)"}; //components
+$badge-tags-text-color: #{"var(--badge-tags-text-color, #212529)"}; //components
+
+$error-color: #{"var(--error-color, #ff6347)"}; //status
+$success-color: #{"var(--success-color, #65B741)"}; //status
+$info-color: #{"var(--info-color, #17a2b8)"}; //status
+$warning-color: #{"var(--warning-color, #ffc107)"}; //status
+$danger-color: #{"var(--danger-color, #dc3545)"}; //status
+
+
+$card-header-bg-color : #{"var(--card_header-bg-color, #aaa)"};
+$card-header-text-color : #{"var(--card-header-text-color, #fff)"};
+$card-bg-color:  #{"var(--card_bg-color, #ebecee)"};
+$card-text-color: #{"var(--card_text-color, #000)"};
+$card-link-color: #{"var(--card_level2_link-color, #7f96af)"};
+$card-link-hover-color:  #{"var(--card_link-hover-color, #8fa6bf)"};
 
 :export {
   successColor: $success-color;

From c99a66a0fa6ea58ffd75265af29461402ec46599 Mon Sep 17 00:00:00 2001
From: baudelotphilippe <philippe@baudelot.eu>
Date: Tue, 11 Jun 2024 10:26:32 +0200
Subject: [PATCH 3/8] add default theme

---
 daikoku/app/domain/tenantEntities.scala | 126 +++++++++++++++++++-----
 1 file changed, 102 insertions(+), 24 deletions(-)

diff --git a/daikoku/app/domain/tenantEntities.scala b/daikoku/app/domain/tenantEntities.scala
index 07b5e9358..73220afb5 100644
--- a/daikoku/app/domain/tenantEntities.scala
+++ b/daikoku/app/domain/tenantEntities.scala
@@ -49,46 +49,124 @@ case class DaikokuStyle(
     js: String = "",
     css: String = "",
     colorTheme: String = s""":root {
-  --error-color: #ff6347;
-  --error-color: #ffa494;
-  --success-color: #4F8A10;
-  --success-color: #76cf18;
 
-  --link-color: #7f96af;
-  --link--hover-color: #8fa6bf;
-
-  --body-bg-color: #fff;
-  --body-text-color: #212529;
+  --body_bg-color: #f1f3f6;
+  --body_text-color: #8a8a8a;
+  --body_link-color:#4c4c4d;
+  --body_link-hover-color:orange;
+  
+  --level2_bg-color: #e5e7ea;
+  --level2_text-color: #4c4c4d;
+  --level2_link-color: #605c5c;
+  --level2_link-hover-color: #fff;
+  
+  --level3_bg-color : #fff;
+  --level3_text-color : #222;
+  --level3_link-color: #4c4c4d;
+  --level3_link-hover-color : #000;
+  --level3_link-hover-bg-color, grey;
+  
+  --sidebar-bg-color: #e5e7ea;
+  --sidebar-text-color: #4c4c4d;
+  --sidebar-text-hover-color:orange;
   
   --menu-bg-color: #fff;
-  --menu-text-color: #212529;
-  --menu-text-hover-bg-color: #9bb0c5;
+  --menu-text-color: #aaa;
+  --menu-text-hover-bg-color: #444;
   --menu-text-hover-color: #fff;
-  --section-bg-color: #f8f9fa;
-  --section-text-color: #6c757d;
-  --section-bottom-color: #eee;
-  --addContent-bg-color: #e9ecef;
-  --addContent-text-color: #000;
-  --sidebar-bg-color: #f8f9fa;
-  --sidebar-text-color: #aaa;
+  --menu-link-color: #666;   
 
+  --card_header-bg-color : #404040;
+  --card_header-text-color: #fff;
+  --card_bg-color: #282828;
+  --card_text-color: #fff;
+  --card_link-color: #b3b3b3;
+  --card_link-hover-color : orange;
 
+  --btn-bg-color: #fff;
+  --btn-text-color: #495057;
+  --btn-border-color: #97b0c7;
+
+  --error-color:#dc3545;
+  --info-color: #17a2b8;
+  --success-color: #65B741;
+  --warning-color: #ffc107;
+  --danger-color: #dc3545;
+
+  --badge-tags-bg-color: #ffc107;
+  --badge-tags-bg-hover-color: #ffe1a7;
+  --badge-tags-text-color: #212529;
+    
+  --form-text-color: #000;
+  --form-border-color: #586069;
+  --form-bg-color: #fff;
+
+  --form-select-focused-color: lightgrey;
+  --form-select-focused-text-color: white;
+  --form-select-heading-color: yellow;
+  --form-select-hover-color: lightgrey;
+  --form-select-hover-text-color: white;
+}
+
+
+:root[data-theme="DARK"] {
+  --body_bg-color: #000;
+  --body_text-color: #b3b3b3;
+  --body_link-color:#b3b3b3;
+  --body_link-hover-color:orange;
+  
+  --level2_bg-color: #121212;
+  --level2_text-color: #b3b3b3;
+  --level2_link-color: #9f9e9e;
+  --level2_link-hover-color: #fff;
+
+  --level3_bg-color : #242424;
+  --level3_text-color : #e8e8e8;
+  --level3_link-color: #9f9e9e;
+  --level3_link-hover-color : #fff;
+  --level3_link-hover-bg-color : grey;
+  
+  --sidebar-bg-color: #121212;
+  --sidebar-text-color: #b3b3b3;
+  --sidebar-text-hover-color:orange;
+  
+  --menu-bg-color: #242424;
+  --menu-text-color: #fff;
+  --menu-text-hover-bg-color: #121212;
+  --menu-text-hover-color: #fff;
+  --menu-link-color: #b3b3b3;
+  
+  --card_header-bg-color : #404040;
+  --card_header-text-color: #fff;
+  --card_bg-color: #282828;
+  --card_text-color: #fff;
+  --card_link-color: #b3b3b3;
+  --card_link-hover-color : orange;
+  
   --btn-bg-color: #fff;
   --btn-text-color: #495057;
   --btn-border-color: #97b0c7;
 
+  --error-color:#dc3545;
+  --info-color: #17a2b8;
+  --success-color: #65B741;
+  --warning-color: #ffc107;
+  --danger-color: #dc3545;
+
   --badge-tags-bg-color: #ffc107;
   --badge-tags-bg-hover-color: #ffe1a7;
   --badge-tags-text-color: #212529;
 
-  --pagination-text-color: #586069;
-  --pagination-border-color: #586069;
+  --form-text-color: #000;
+  --form-border-color: #586069;
+  --form-bg-color: #fff;
 
-  --table-bg-color: #f8f9fa;
+  --form-select-focused-color: lightgrey;
+  --form-select-focused-text-color: white;
+  --form-select-heading-color: yellow;
+  --form-select-hover-color: lightgrey;
+  --form-select-hover-text-color: white;
 
-  --apicard-visibility-color: #586069;
-  --apicard-visibility-border-color: rgba(27,31,35,.15);
-  --modal-selection-bg-color: rgba(27,31,35,.15);
 }""",
     jsUrl: Option[String] = None,
     cssUrl: Option[String] = None,

From 8174e218c8218405c763641260fc6c90988c5859 Mon Sep 17 00:00:00 2001
From: baudelotphilippe <philippe@baudelot.eu>
Date: Tue, 11 Jun 2024 16:59:14 +0200
Subject: [PATCH 4/8] fix for btns value

---
 .../components/frontend/api/ApiPricing.tsx    |  6 ++---
 .../javascript/src/style/components/btn.scss  | 22 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/daikoku/javascript/src/components/frontend/api/ApiPricing.tsx b/daikoku/javascript/src/components/frontend/api/ApiPricing.tsx
index 99d1bd7c3..3884f2193 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiPricing.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiPricing.tsx
@@ -198,13 +198,13 @@ const ApiPricingCard = (props: ApiPricingCardProps) => {
             <div className='flex-shrink-1 d-flex flex-column'>
               <Link
                 to={`./${props.plan.customName}/swagger`} relative='path'
-                className={classNames("btn btn-sm btn-outline-info mb-1", { 'link__disabled': !props.plan.swagger?.url && !props.plan.swagger?.content })}>swagger</Link>
+                className={classNames("btn btn-sm btn-outline-primary mb-1", { 'link__disabled': !props.plan.swagger?.url && !props.plan.swagger?.content })}>swagger</Link>
               <Link
                 to={`./${props.plan.customName}/testing`} relative='path'
-                className={classNames("btn btn-sm btn-outline-info mb-1", { 'link__disabled': !props.plan.testing?.enabled })}>test</Link>
+                className={classNames("btn btn-sm btn-outline-primary mb-1", { 'link__disabled': !props.plan.testing?.enabled })}>test</Link>
               <Link
                 to={`./${props.plan.customName}/documentation`} relative='path'
-                className={classNames("btn btn-sm btn-outline-info", { 'link__disabled': !props.plan.documentation?.pages.length })}>Documentation</Link>
+                className={classNames("btn btn-sm btn-outline-primary", { 'link__disabled': !props.plan.documentation?.pages.length })}>Documentation</Link>
             </div>
           )}
         </div>
diff --git a/daikoku/javascript/src/style/components/btn.scss b/daikoku/javascript/src/style/components/btn.scss
index 49516d538..775f2ee14 100644
--- a/daikoku/javascript/src/style/components/btn.scss
+++ b/daikoku/javascript/src/style/components/btn.scss
@@ -5,19 +5,19 @@ button {
 }
 
 .btn-outline {
-  color: $btn-bg-color;
-  background-color: $btn-text-color;
-  border-color: $btn-bg-color;
+  color: $btn-bg-color !important; 
+  background-color: $btn-text-color !important; 
+  border-color: $btn-bg-color !important; 
 
   &:hover {
-    color: $btn-bg-color;
-    background-color: $btn-text-color;
+    color: $btn-bg-color !important; 
+    background-color: $btn-text-color !important; 
   }
 
   &-primary {
-    color: $btn-text-color;
-    border-color: $btn-border-color;
-    background-color: $btn-bg-color;
+    color: $btn-text-color !important; 
+    border-color: $btn-border-color !important; 
+    background-color: $btn-bg-color !important; 
 
     // , :not(.btn-check) + .btn:active
     &.active,&:active{
@@ -27,9 +27,9 @@ button {
     }
 
     &:hover {
-      color: $btn-bg-color;
-      background-color: $btn-border-color;
-    border-color: $btn-border-color;
+      color: $btn-bg-color !important; 
+      background-color: $btn-border-color !important; 
+    border-color: $btn-border-color !important; 
 
     }
   }

From 5b37383d015328dcfda8661748232d695a2f40d8 Mon Sep 17 00:00:00 2001
From: baudelotphilippe <philippe@baudelot.eu>
Date: Tue, 18 Jun 2024 09:00:12 +0200
Subject: [PATCH 5/8] improve redoc display

---
 daikoku/javascript/src/style/components/redoc.scss | 6 ++++++
 daikoku/javascript/src/style/main.scss             | 1 +
 2 files changed, 7 insertions(+)
 create mode 100644 daikoku/javascript/src/style/components/redoc.scss

diff --git a/daikoku/javascript/src/style/components/redoc.scss b/daikoku/javascript/src/style/components/redoc.scss
new file mode 100644
index 000000000..bf158033b
--- /dev/null
+++ b/daikoku/javascript/src/style/components/redoc.scss
@@ -0,0 +1,6 @@
+.redoc-wrap{
+    color: $level2_text-color !important;
+    h1, h2, h3 {
+      color: $level2_text-color !important;
+    }
+  }
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/main.scss b/daikoku/javascript/src/style/main.scss
index 6b0f3beb0..d35c094f3 100644
--- a/daikoku/javascript/src/style/main.scss
+++ b/daikoku/javascript/src/style/main.scss
@@ -39,3 +39,4 @@
 @import 'components/fastMode.scss';
 @import 'components/reactSelect.scss';
 @import 'components/sortable.scss';
+@import 'components/redoc.scss';

From cf7072d73c1dc1c62926f7109385970aa6f32b65 Mon Sep 17 00:00:00 2001
From: baudelotphilippe <philippe@baudelot.eu>
Date: Tue, 18 Jun 2024 09:14:25 +0200
Subject: [PATCH 6/8] clean

---
 .../javascript/src/style/layout/darkmode.scss | 60 -------------------
 .../javascript/src/style/layout/mixins.scss   |  0
 daikoku/javascript/src/style/main.scss        |  2 -
 3 files changed, 62 deletions(-)
 delete mode 100644 daikoku/javascript/src/style/layout/darkmode.scss
 delete mode 100644 daikoku/javascript/src/style/layout/mixins.scss

diff --git a/daikoku/javascript/src/style/layout/darkmode.scss b/daikoku/javascript/src/style/layout/darkmode.scss
deleted file mode 100644
index 62b6f3b50..000000000
--- a/daikoku/javascript/src/style/layout/darkmode.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-
-// [data-theme="DARK"] {
-//     --body_text-color: #e2e2e2;
-//     --body_bg-color: #121212;
-
-//     --level2_link-color: #e2e2e2;
-//     --level2_link-hover-color: #8fa6bf;
-
-
-//     --sidebar-bg-color: #191c24;
-//     --sidebar-text-color: #bbc0df;
-
-//     --menu-text-color: #e2e2e2;
-//     --menu-text-hover-color: #fff;
-//     --menu-text-hover-bg-color: #0f1015;
-//     --menu-bg-color: #191c24;
-
-//     --btn-bg-color: #121212;
-//     --btn-text-color: #e2e2e2;
-//     --btn-border-color: #97b0c7;
-//     --btn-bg-hover-color: #fff;
-//     --btn-text-hover-color: #495057;
-
-//     --level2_bg-color: #1f232d;
-//     --level2_text-color: #e2e2e2;
-//     --section-bottom-color: #191c24;
-
-//     --form-text-color: #6c7293;
-//     --form-border-color: #586069;
-//     --form-bg-color: #121212;
-
-//     --form-select-focused-color: #fff;
-//     --form-select-focused-text-color : #ddd;
-//     --form-select-hover-color: #ccc;
-//     --form-select-hover-text-color: #000;
-
-
-//     --badge-tags-bg-color: #9a81b8;
-//     --badge-tags-bg-hover-color: #b597d9;
-//     --badge-tags-text-color: #212529;
-
-
-//     --error-color: #ffa494;
-//     --error-hover-color: #ffa494;
-//     --success-color: #76cf18;
-//     --success-hover-color: #76cf18;
-
-
-//     --pagination-text-color: #586069;
-//     --pagination-border-color: #586069;
-
-//     --table-bg-color: #f8f9fa;
-
-//     --modal-selection-bg-color: rgba(27,31,35,.15);
-//     --bs-backdrop-bg: #545454;
-
-//     .modal-content .btn-close {
-//         filter: invert(48%) saturate(2476%) brightness(118%) contrast(119%);
-//       }
-// }
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/layout/mixins.scss b/daikoku/javascript/src/style/layout/mixins.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/daikoku/javascript/src/style/main.scss b/daikoku/javascript/src/style/main.scss
index d35c094f3..5c0492c9b 100644
--- a/daikoku/javascript/src/style/main.scss
+++ b/daikoku/javascript/src/style/main.scss
@@ -1,13 +1,11 @@
 @import 'variables';
 
-@import 'layout/mixins';
 @import 'layout/home';
 @import 'layout/style';
 @import 'layout/sidebar';
 @import 'layout/navbar';
 @import 'layout/login';
 @import 'layout/teamBilling';
-@import 'layout/darkmode';
 
 @import "components/antCalandar";
 @import 'components/avatarWithAction';

From 7d9f83c321b2334129e93712c5dd79089f582931 Mon Sep 17 00:00:00 2001
From: baudelotphilippe <philippe@baudelot.eu>
Date: Tue, 18 Jun 2024 14:04:49 +0200
Subject: [PATCH 7/8] clean

---
 .../components/backoffice/apis/TeamApi.tsx    |   2 +-
 .../backoffice/apis/TeamApiGroup.tsx          |   2 +-
 .../components/frontend/api/ApiCartidge.tsx   |   2 +-
 .../frontend/api/ApiDocumentation.tsx         |   2 +-
 .../src/components/frontend/team/ApiList.tsx  |   6 +-
 .../utils/dnd/components/TreeItem.module.scss |   2 -
 .../src/style/components/apicard.scss         | 136 +----------
 .../src/style/components/backOffice.scss      |  31 ---
 .../javascript/src/style/components/btn.scss  |   6 +-
 .../src/style/components/discussion.scss      |  12 -
 .../src/style/components/dragAndDropDoc.scss  |   8 +-
 .../src/style/components/error.scss           | 118 ---------
 .../src/style/components/footer.scss          |  23 --
 .../javascript/src/style/components/form.scss |  16 --
 .../src/style/components/modal.scss           |   5 -
 .../style/components/navDocumentation.scss    |  31 +++
 .../src/style/components/popover.scss         |  14 ++
 .../src/style/components/swagger.scss         |  18 ++
 .../src/style/components/tableApi.scss        |  14 --
 .../javascript/src/style/components/tabs.scss |  22 ++
 .../{layout => components}/teamBilling.scss   |   5 +
 .../javascript/src/style/layout/footer.scss   |   9 +
 .../javascript/src/style/layout/login.scss    |   7 +-
 .../javascript/src/style/layout/navbar.scss   |   9 +
 .../javascript/src/style/layout/style.scss    | 225 +++---------------
 daikoku/javascript/src/style/main.scss        |   9 +-
 26 files changed, 175 insertions(+), 559 deletions(-)
 delete mode 100644 daikoku/javascript/src/style/components/error.scss
 delete mode 100644 daikoku/javascript/src/style/components/footer.scss
 create mode 100644 daikoku/javascript/src/style/components/navDocumentation.scss
 create mode 100644 daikoku/javascript/src/style/components/swagger.scss
 delete mode 100644 daikoku/javascript/src/style/components/tableApi.scss
 create mode 100644 daikoku/javascript/src/style/components/tabs.scss
 rename daikoku/javascript/src/style/{layout => components}/teamBilling.scss (96%)
 create mode 100644 daikoku/javascript/src/style/layout/footer.scss

diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx
index ed75f25bd..8f44a5ac6 100644
--- a/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx
+++ b/daikoku/javascript/src/components/backoffice/apis/TeamApi.tsx
@@ -277,7 +277,7 @@ export const TeamApi = (props: { creation: boolean }) => {
           </button>
         </div>
         <div className="row">
-          <div className="section col container-api">
+          <div className="section col">
             <div className="my-2">
               {tab === 'documentation' && (
                 <TeamApiDocumentation
diff --git a/daikoku/javascript/src/components/backoffice/apis/TeamApiGroup.tsx b/daikoku/javascript/src/components/backoffice/apis/TeamApiGroup.tsx
index 2058dc01a..65c6b2480 100644
--- a/daikoku/javascript/src/components/backoffice/apis/TeamApiGroup.tsx
+++ b/daikoku/javascript/src/components/backoffice/apis/TeamApiGroup.tsx
@@ -249,7 +249,7 @@ export const TeamApiGroup = () => {
           </button>
         </div>
         <div className="row">
-          <div className="section col container-api">
+          <div className="section colcontainer-api">
             <div className="my-2">
               {params.tab === 'infos' && (<div>
                 <Form
diff --git a/daikoku/javascript/src/components/frontend/api/ApiCartidge.tsx b/daikoku/javascript/src/components/frontend/api/ApiCartidge.tsx
index 6baef19b6..6cc12e176 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiCartidge.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiCartidge.tsx
@@ -19,7 +19,7 @@ export function ApiCartidge(props: any) {
     .filter((team: any) => props.subscriptions.some((sub: any) => sub.team === team._id));
 
   return (
-    <div className="d-flex col-12 col-sm-3 col-md-2 text-muted flex-column p-3 additionalContent">
+    <div className="d-flex col-12 col-sm-3 col-md-2 text-muted flex-column p-3 album">
       <span>
         <Translation i18nkey="API by">API by</Translation>
       </span>
diff --git a/daikoku/javascript/src/components/frontend/api/ApiDocumentation.tsx b/daikoku/javascript/src/components/frontend/api/ApiDocumentation.tsx
index d27eca171..77badba71 100644
--- a/daikoku/javascript/src/components/frontend/api/ApiDocumentation.tsx
+++ b/daikoku/javascript/src/components/frontend/api/ApiDocumentation.tsx
@@ -44,7 +44,7 @@ export const ApiDocumentationCartidge = (props: ApiDocumentationCartidgeProps) =
 
 
   return (
-    <div className="d-flex col-12 col-sm-3 col-md-2 flex-column p-3 text-muted navDocumentation additionalContent">
+    <div className="d-flex col-12 col-sm-3 col-md-2 flex-column p-3 text-muted navDocumentation album">
       {renderLinks(props.documentation?.pages)}
     </div>
   );
diff --git a/daikoku/javascript/src/components/frontend/team/ApiList.tsx b/daikoku/javascript/src/components/frontend/team/ApiList.tsx
index e1c3b0e96..af29942be 100644
--- a/daikoku/javascript/src/components/frontend/team/ApiList.tsx
+++ b/daikoku/javascript/src/components/frontend/team/ApiList.tsx
@@ -395,7 +395,7 @@ export const ApiList = (props: TApiList) => {
             )}
             {!!bestTags.data && !!bestTags.data.length && (
               <Top
-                className="p-3 rounded additionalContent mb-2"
+                className="p-3 rounded album mb-2"
                 title="Top tags"
                 icon="fas fa-tag me-2"
                 list={bestTags.data}
@@ -405,7 +405,7 @@ export const ApiList = (props: TApiList) => {
             )}
             {!!bestCategories.data && !!bestCategories.data.length && (
               <Top
-                className="p-3 rounded additionalContent"
+                className="p-3 rounded album"
                 title="Top categories"
                 icon="fas fa-folder me-2"
                 list={bestCategories.data}
@@ -466,7 +466,7 @@ const YourTeams = ({
     ? teams.filter((team) => team.name.toLowerCase().includes(searchedTeam))
     : teams;
   return (
-    <div className={'top__container p-3 rounded additionalContent mb-2'}>
+    <div className={'top__container p-3 rounded album mb-2'}>
       <div>
         <h5>
           <i className="fas fa-users me-2" />
diff --git a/daikoku/javascript/src/components/utils/dnd/components/TreeItem.module.scss b/daikoku/javascript/src/components/utils/dnd/components/TreeItem.module.scss
index ce483222c..b90c40923 100644
--- a/daikoku/javascript/src/components/utils/dnd/components/TreeItem.module.scss
+++ b/daikoku/javascript/src/components/utils/dnd/components/TreeItem.module.scss
@@ -12,8 +12,6 @@
     padding-top: 5px;
 
     .TreeItem {
-      --vertical-padding: 5px;
-
       padding-right: 24px;
       border-radius: 4px;
       box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
diff --git a/daikoku/javascript/src/style/components/apicard.scss b/daikoku/javascript/src/style/components/apicard.scss
index 06fc075e9..fb0f19f6d 100644
--- a/daikoku/javascript/src/style/components/apicard.scss
+++ b/daikoku/javascript/src/style/components/apicard.scss
@@ -14,6 +14,17 @@
       overflow: hidden;
     }
   }
+  .plan-body {
+    border: none;
+    margin: 0;
+    border-radius:0;
+    border-bottom-left-radius: 5px ;
+    border-bottom-right-radius: 5px ;
+    overflow: scroll;
+  }
+  #dropdownMenuButton {
+    color: $card-link-color;
+  }
 }
 
 .card-header {
@@ -41,44 +52,18 @@
   font-size: .75rem;
 }
 
-.card .plan-body {
-  border: none;
-  // background-color: $companion_bg-color;
-  margin: 0;
-  border-radius:0;
-  border-bottom-left-radius: 5px ;
-  border-bottom-right-radius: 5px ;
-  overflow: scroll;
-}
-
 a.card-link:hover, a.card-link:visited, a.card-link:link, a.card-link:active {
   text-decoration: none;
 }
 
 .api__name {
   font-size: 1.5rem;
-  //cursor: pointer;
 
   &.api--forbidden {
     cursor: not-allowed;
   }
 }
 
-// .view-selectors {
-//   // .active, .btn.active, :not(.btn-check) + .btn:active {
-//   //   color: $btn-bg-color;
-//   //   background-color: $btn-border-color;
-//   //   border-color: $btn-border-color;
-//   // }
-// }
-
-.card {
-  #dropdownMenuButton {
-    color: $card-link-color;
-  }
-}
-
-
 .api-card {
   .plan-body {
     max-height: 250px;
@@ -111,105 +96,6 @@ a.card-link:hover, a.card-link:visited, a.card-link:link, a.card-link:active {
 
 .card-img-top:hover .btn { display: block;}
 
-.burger-menu {
-  width: 60px;
-  height: 45px;
-  position: relative;
-  // margin: 50px auto;
-  -webkit-transform: rotate(0deg);
-  -moz-transform: rotate(0deg);
-  -o-transform: rotate(0deg);
-  transform: rotate(0deg);
-  -webkit-transition: .5s ease-in-out;
-  -moz-transition: .5s ease-in-out;
-  -o-transition: .5s ease-in-out;
-  transition: .5s ease-in-out;
-  cursor: pointer;
-
-  span {
-    display: block;
-    position: absolute;
-    height: 9px;
-    width: 50%;
-    background: #d3531a;
-    opacity: 1;
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-    -webkit-transition: .25s ease-in-out;
-    -moz-transition: .25s ease-in-out;
-    -o-transition: .25s ease-in-out;
-    transition: .25s ease-in-out;
-  }
-
-  span:nth-child(even) {
-    left: 50%;
-    border-radius: 0 9px 9px 0;
-  }
-
-  span:nth-child(odd) {
-    left:0px;
-    border-radius: 9px 0 0 9px;
-  }
-
-  span:nth-child(1), span:nth-child(2) {
-    top: 0px;
-  }
-
-  span:nth-child(3), span:nth-child(4) {
-    top: 18px;
-  }
-
-  span:nth-child(5), span:nth-child(6) {
-    top: 36px;
-  }
-
-  &.open span:nth-child(1),&.open span:nth-child(6) {
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    -o-transform: rotate(45deg);
-    transform: rotate(45deg);
-  }
-
-  &.open span:nth-child(2),&.open span:nth-child(5) {
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    -o-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-  }
-
-  &.open span:nth-child(1) {
-    left: 5px;
-    top: 7px;
-  }
-
-  &.open span:nth-child(2) {
-    left: calc(50% - 5px);
-    top: 7px;
-  }
-
-  &.open span:nth-child(3) {
-    left: -50%;
-    opacity: 0;
-  }
-
-  &.open span:nth-child(4) {
-    left: 100%;
-    opacity: 0;
-  }
-
-  &.open span:nth-child(5) {
-    left: 5px;
-    top: 29px;
-  }
-
-  &.open span:nth-child(6) {
-    left: calc(50% - 5px);
-    top: 29px;
-  }
-}
-
 .pricing-content {
   gap: 20px;
 }
diff --git a/daikoku/javascript/src/style/components/backOffice.scss b/daikoku/javascript/src/style/components/backOffice.scss
index 1b8027670..9c440f4eb 100644
--- a/daikoku/javascript/src/style/components/backOffice.scss
+++ b/daikoku/javascript/src/style/components/backOffice.scss
@@ -1,34 +1,3 @@
-@import "../variables";
-
-.back-office-overlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  // background-color: rgba(0,0,0,0.5);
-  z-index: 2;
-  cursor: pointer;
-
-  &.active {
-    display: block;
-  }
-
-  &:not(.active) {
-    display: none;
-  }
-}
-
-// ************************
-// *** TEAM BACK OFFICE ***
-// ************************
-
-// *****************
-// *** DASHBOARD ***
-// *****************
-
 .tbo__dasboard {
   display: flex;
   flex-direction: row;
diff --git a/daikoku/javascript/src/style/components/btn.scss b/daikoku/javascript/src/style/components/btn.scss
index 775f2ee14..05c38a557 100644
--- a/daikoku/javascript/src/style/components/btn.scss
+++ b/daikoku/javascript/src/style/components/btn.scss
@@ -81,9 +81,9 @@ button {
 .btn-outline-info.disabled,
 .btn-outline-info.link__disabled,
 .btn-outline-info:disabled {
-  background-color: #fff;
-  border-color: #9e9e9e;
-  color: #9e9e9e;
+  background-color: #fff !important;
+  border-color: #9e9e9e !important;
+  color: #9e9e9e !important;
 
   &:hover,
   &.active {
diff --git a/daikoku/javascript/src/style/components/discussion.scss b/daikoku/javascript/src/style/components/discussion.scss
index 888acb37c..1302fa7f8 100644
--- a/daikoku/javascript/src/style/components/discussion.scss
+++ b/daikoku/javascript/src/style/components/discussion.scss
@@ -1,17 +1,6 @@
 .messages-sender-container{
-  // width: 25%;
- // background-color: $level2_bg-color;
   height: calc(100vh - 160px);
   overflow: scroll;
-  // .messages-sender{
-  //   color:$level2_link-color;
-
-  // }
-  // .messages-sender__active, .messages-sender:hover {
-  //   background-color:var(--level2-link-hover-bg-color);
-  //   // border-left: 2px solid $danger-color;
-  //   color:var(--level2-link-hover-text-color);
-  // }
 
   .user-avatar {
     border-radius: 50%;
@@ -19,7 +8,6 @@
   }
 }
 .messages-content{
-  // width: 75%;
   overflow: scroll;
   height: calc(100vh - 240px);
 }
diff --git a/daikoku/javascript/src/style/components/dragAndDropDoc.scss b/daikoku/javascript/src/style/components/dragAndDropDoc.scss
index 04a57895c..a34a4698c 100644
--- a/daikoku/javascript/src/style/components/dragAndDropDoc.scss
+++ b/daikoku/javascript/src/style/components/dragAndDropDoc.scss
@@ -1,12 +1,10 @@
 .tree-item {
-  --vertical-padding: 10px;
 
   border-radius: 4px;
-
   position: relative;
   display: flex;
   align-items: center;
-  padding: var(--vertical-padding) 10px;
+  padding: 10px 10px;
   background-color: $level3_bg-color;
   border: 1px solid #dedede;
   color: $level3_text-color;
@@ -18,10 +16,6 @@
     position: absolute;
     top: -10px;
     right: -10px;
-    // color: $danger-color;
-    // &:hover {
-    //   background-color: $danger-color;
-    // }
   }
 
   &:hover {
diff --git a/daikoku/javascript/src/style/components/error.scss b/daikoku/javascript/src/style/components/error.scss
deleted file mode 100644
index 91b7fce92..000000000
--- a/daikoku/javascript/src/style/components/error.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-
-.error-page {
-  margin-top: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  height: 100%;
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-
-  h1 {
-    font-size: 30vh;
-    font-weight: bold;
-    position: relative;
-    margin: -8vh 0 0;
-    padding: 0;
-
-    &:after {
-      content: attr(data-h1);
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      color: transparent;
-      /* webkit only for graceful degradation to IE */
-      background: -webkit-repeating-linear-gradient(-45deg, rgba(176,233,223,1), rgba(180,224,193,1), rgba(237,207,126,1), rgba(222,84,84,1));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-size: 400%;
-      text-shadow: 1px 1px 2px transparentize(#fff, .75);
-      animation: animateTextBackground 10s ease-in-out infinite;
-    }
-
-    + p {
-      color: #7f96af;
-      font-size: 8vh;
-      font-weight: bold;
-      line-height: 10vh;
-      position: relative;
-
-      &:after {
-        content: attr(data-p);
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        color: transparent;
-        text-shadow: 1px 1px 2px transparentize(#fff, .5);
-        -webkit-background-clip: text;
-        -moz-background-clip: text;
-        background-clip: text;
-      }
-    }
-  }
-
-  #particles-js {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  @keyframes animateTextBackground {
-    0% {
-      background-position: 0 0
-    }
-
-    25% {
-      background-position: 100% 0
-    }
-
-    50% {
-      background-position: 100% 100%
-    }
-
-    75% {
-      background-position: 0 100%
-    }
-
-    100% {
-      background-position: 0 0
-    }
-  }
-
-  @media (max-width: 767px) {
-
-    .error-page h1 {
-      font-size: 32vw
-    }
-
-    + p {
-      font-size: 8vw;
-      line-height: 10vw;
-      max-width: 70vw;
-    }
-  }
-
-  a.back {
-    position: fixed;
-    right: 40px;
-    bottom: 40px;
-    background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176);
-    border-radius: 5px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-    color: #fff;
-    font-size: 16px;
-    font-weight: bold;
-    line-height: 24px;
-    padding: 15px 30px;
-    text-decoration: none;
-    transition: 0.25s all ease-in-out;
-
-    &:hover {
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-    }
-  }
-}
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/components/footer.scss b/daikoku/javascript/src/style/components/footer.scss
deleted file mode 100644
index 9194093b2..000000000
--- a/daikoku/javascript/src/style/components/footer.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-
-.main-content-container {
-  // minHeight: '100vh',
-  // position: 'relative',
-  // paddingBottom: '6rem'
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-
-  main {
-    flex-grow: 1;
-  }
-}
-
-.footer {
-  min-height: 60px;
-  // margin-top: 35px;
-  bottom: 0;
-
-  font-size: 18px;
-  background: $footer-bg-color;
-  color:$footer-text-color;
-}
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/components/form.scss b/daikoku/javascript/src/style/components/form.scss
index 58f56bf26..405b5b870 100644
--- a/daikoku/javascript/src/style/components/form.scss
+++ b/daikoku/javascript/src/style/components/form.scss
@@ -9,22 +9,6 @@
   color: #e2e2e2;
 }
 
-.fake-form-control {
-    border-radius: 3px;
-    padding: 8px;
-    background-color: $form-bg-color;
-    color:$form-text-color;
-    border: 1px solid $form-border-color;
-}
-
-
-.form-loader {
-  width: 100%;
-  height: 80vh;
-  background-color: silver;
-  border-radius: 20px;
-}
-
 .motivation-form__editor .cm-editor {
   min-height: 0px;
 }
diff --git a/daikoku/javascript/src/style/components/modal.scss b/daikoku/javascript/src/style/components/modal.scss
index aac27b113..54855eaeb 100644
--- a/daikoku/javascript/src/style/components/modal.scss
+++ b/daikoku/javascript/src/style/components/modal.scss
@@ -1,5 +1,3 @@
-@import '../variables';
-
 .modal-header, .modal-content, .modal-body, .modal-footer{
   background-color: $level1_bg-color;
   color: $level1_text-color;
@@ -113,9 +111,6 @@
 	overflow: hidden;
 	width: 6vw;
   height: 6vw;
-  &.selected {
-
-  }
 
 	img {
 		width: 100%;
diff --git a/daikoku/javascript/src/style/components/navDocumentation.scss b/daikoku/javascript/src/style/components/navDocumentation.scss
new file mode 100644
index 000000000..a247fb266
--- /dev/null
+++ b/daikoku/javascript/src/style/components/navDocumentation.scss
@@ -0,0 +1,31 @@
+.navDocumentation {
+    border-right: 1px solid $level2_link-color;
+  
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      font-weight: bold;
+      font-size: 0.9 rem;
+  
+      .api-doc-cartridge-link a {
+        line-height: 2rem;
+        border-radius: 4px;
+        padding: 0 0.5rem;
+        display: block;
+        width: 100%;
+        color: $companion_text-color;
+        margin-bottom: 0.3rem;
+  
+        &:hover {
+          background-color: $companion_text-hover-bg-color;
+          color: $companion_text-hover-color;
+        }
+  
+        &.active {
+          background-color: $companion_text-hover-bg-color;
+          color: $companion_text-hover-color;
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/components/popover.scss b/daikoku/javascript/src/style/components/popover.scss
index cd1e61ddd..98989d1aa 100644
--- a/daikoku/javascript/src/style/components/popover.scss
+++ b/daikoku/javascript/src/style/components/popover.scss
@@ -209,3 +209,17 @@
 .ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow {
   bottom: 12px;
 }
+
+.Popover-body {
+  display: flex;
+  padding: 5px 10px;
+  background: hsl(0, 0%, 27%);
+  color: white;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+}
+
+.Popover-tipShape {
+  fill: hsl(0, 0%, 27%);
+}
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/components/swagger.scss b/daikoku/javascript/src/style/components/swagger.scss
new file mode 100644
index 000000000..d2a13bf9f
--- /dev/null
+++ b/daikoku/javascript/src/style/components/swagger.scss
@@ -0,0 +1,18 @@
+.swagger-ui .info hgroup.main a {
+    word-break: break-all;
+  }
+  
+  .swagger-ui {
+    color: $sidebar-text-color;
+    .btn {
+      color: $sidebar-text-color;
+    }
+  }
+  
+  .swagger-ui .errors-wrapper {
+    hgroup h4,
+    .errors h4,
+    .errors small {
+      color: $sidebar-text-color;
+    }
+  }
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/components/tableApi.scss b/daikoku/javascript/src/style/components/tableApi.scss
deleted file mode 100644
index 71d5ab86d..000000000
--- a/daikoku/javascript/src/style/components/tableApi.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/* table api */
-.table-plan-name td{
-  cursor: pointer;
-}
-
-.table-plan-name .planSelected {
-  background-color: #343a40;
-  color:#fff;
-}
-
-.table-hover tbody tr:hover {
-  color: $level2_link-hover-color;
-}
-
diff --git a/daikoku/javascript/src/style/components/tabs.scss b/daikoku/javascript/src/style/components/tabs.scss
new file mode 100644
index 000000000..27740e3ed
--- /dev/null
+++ b/daikoku/javascript/src/style/components/tabs.scss
@@ -0,0 +1,22 @@
+
+.nav-tabs {
+    border-color: $btn-border-color;
+  
+    .nav-link {
+      color: $btn-text-color;
+    }
+  
+    .nav-link:hover,
+    .nav-link:focus {
+      cursor: pointer;
+      background-color: $btn-border-color;
+      color: $btn-bg-color;
+    }
+  
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      color: $btn-text-color;
+      background-color: $btn-bg-color;
+      border-color: $btn-border-color;
+    }
+  }
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/layout/teamBilling.scss b/daikoku/javascript/src/style/components/teamBilling.scss
similarity index 96%
rename from daikoku/javascript/src/style/layout/teamBilling.scss
rename to daikoku/javascript/src/style/components/teamBilling.scss
index fc25e889c..7353e42e5 100644
--- a/daikoku/javascript/src/style/layout/teamBilling.scss
+++ b/daikoku/javascript/src/style/components/teamBilling.scss
@@ -149,3 +149,8 @@
 .badge.no-data {
   font-size: 20px;
 }
+
+
+.month__selector .ant-calendar-picker:hover .ant-calendar-picker-clear {
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/layout/footer.scss b/daikoku/javascript/src/style/layout/footer.scss
new file mode 100644
index 000000000..0ac058ca5
--- /dev/null
+++ b/daikoku/javascript/src/style/layout/footer.scss
@@ -0,0 +1,9 @@
+.footer {
+  min-height: 60px;
+  // margin-top: 35px;
+  bottom: 0;
+
+  font-size: 18px;
+  background: $footer-bg-color;
+  color:$footer-text-color;
+}
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/layout/login.scss b/daikoku/javascript/src/style/layout/login.scss
index c0a12a568..7042e45ae 100644
--- a/daikoku/javascript/src/style/layout/login.scss
+++ b/daikoku/javascript/src/style/layout/login.scss
@@ -6,7 +6,6 @@
   padding-bottom: 20px;
 
     .login__container {
-      // background-color: $companion_bg-color;
 
       .organisation__header {
         position: relative;
@@ -33,8 +32,4 @@
 
 .container.login {
   max-width: 730px;
-}
-
-.logo-medium{
-  width: 300px;
-}
+}
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/layout/navbar.scss b/daikoku/javascript/src/style/layout/navbar.scss
index 960aa18a7..bb132239d 100644
--- a/daikoku/javascript/src/style/layout/navbar.scss
+++ b/daikoku/javascript/src/style/layout/navbar.scss
@@ -350,3 +350,12 @@ a.navbar-brand, #teamSelector:hover {
     color: var(--menu-text-hover-color, #fff);
   }
 }
+
+.navbar_top .brand {
+  height: 39px;
+  width: 39px;
+
+  img {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/daikoku/javascript/src/style/layout/style.scss b/daikoku/javascript/src/style/layout/style.scss
index d78ffb7d1..66f2f5999 100644
--- a/daikoku/javascript/src/style/layout/style.scss
+++ b/daikoku/javascript/src/style/layout/style.scss
@@ -5,11 +5,37 @@ body {
   font-size: 1rem;
 }
 
+main {
+  background-color: $level1_bg-color;
+}
+
+[role="root-container"] {
+  padding-top: 130px;
+
+  @media screen and (min-width: 576px) {
+    padding-top: 90px;
+  }
+
+  @media screen and (min-width: 768px) {
+    padding-top: 60px;
+  }
+}
+
+.section,
+.album {
+  background-color: $level2_bg-color;
+  color: $level2_text-color;
+}
+
 //remove blue border on chrome
 *:focus {
   outline: 0;
 }
 
+a {
+  text-decoration: none;
+}
+
 .a-fake,
 a {
   color: $level1_link-color;
@@ -24,6 +50,19 @@ a:hover {
   color: $level1_link-hover-color;
 }
 
+.underline-on-hover:hover {
+  text-decoration: underline;
+}
+
+a.nav-link.active {
+  background-color: rgb(233, 236, 239);
+}
+
+.link__disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -52,18 +91,6 @@ hr {
   background-color: white;
 }
 
-.month__selector .ant-calendar-picker:hover .ant-calendar-picker-clear {
-  opacity: 0;
-}
-
-main {
-  background-color: $level1_bg-color;
-
-  // .jumbotron {
-  //   background-color: #fff;
-  // }
-}
-
 .fa-xxs {
   font-size: 0.5em;
 }
@@ -77,73 +104,6 @@ main {
   white-space: pre-wrap;
 }
 
-a.nav-link.active {
-  background-color: rgb(233, 236, 239);
-}
-
-[role="root-container"] {
-  padding-top: 130px;
-
-  @media screen and (min-width: 576px) {
-    padding-top: 90px;
-  }
-
-  @media screen and (min-width: 768px) {
-    padding-top: 60px;
-  }
-}
-
-.section,
-.album {
-  background-color: $level2_bg-color;
-  color: $level2_text-color;
-}
-
-.underline-on-hover:hover {
-  text-decoration: underline;
-}
-
-.additionalContent {
-  background-color: $level2_bg-color;
-  color: $level2_text-color;
-}
-
-.navDocumentation {
-  border-right: 1px solid $level2_link-color;
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    font-weight: bold;
-    font-size: 0.9 rem;
-
-    .api-doc-cartridge-link a {
-      line-height: 2rem;
-      border-radius: 4px;
-      padding: 0 0.5rem;
-      display: block;
-      width: 100%;
-      color: $companion_text-color;
-      margin-bottom: 0.3rem;
-
-      &:hover {
-        background-color: $companion_text-hover-bg-color;
-        color: $companion_text-hover-color;
-      }
-
-      &.active {
-        background-color: $companion_text-hover-bg-color;
-        color: $companion_text-hover-color;
-      }
-    }
-  }
-}
-
-// .navDocumentation li::before {
-//   color: #6c757d;
-// }
-
 .hr-apidescription {
   width: 100%;
   border-bottom: 1px solid #bbbbbb;
@@ -152,29 +112,6 @@ a.nav-link.active {
   margin-bottom: 5px;
 }
 
-.container-api {
-  margin-bottom: 60px;
-}
-
-.form-back-fixedBtns {
-  justify-content: flex-end;
-  bottom: 0;
-  height: 60px;
-  width: 100%;
-  left: 1px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  z-index: 5;
-}
-
-.tenantLogo {
-  width: 290px;
-}
-
-.mediumAssetChooser {
-  width: 200px;
-}
-
 .changePicture {
   position: absolute;
   display: none;
@@ -187,69 +124,6 @@ img:hover + .changePicture,
   opacity: 0.5;
 }
 
-.swagger-ui .info hgroup.main a {
-  word-break: break-all;
-}
-
-.swagger-ui {
-  color: $sidebar-text-color;
-  .btn {
-    color: $sidebar-text-color;
-  }
-}
-
-.swagger-ui .errors-wrapper {
-  hgroup h4,
-  .errors h4,
-  .errors small {
-    color: $sidebar-text-color;
-  }
-}
-
-.language-selector {
-  width: 150px;
-}
-
-.nav-tabs {
-  border-color: $btn-border-color;
-
-  .nav-link {
-    color: $btn-text-color;
-  }
-
-  .nav-link:hover,
-  .nav-link:focus {
-    cursor: pointer;
-    background-color: $btn-border-color;
-    color: $btn-bg-color;
-  }
-
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $btn-text-color;
-    background-color: $btn-bg-color;
-    border-color: $btn-border-color;
-  }
-}
-
-.beautiful-popover {
-  z-index: 100;
-  max-width: 250px;
-}
-
-.Popover-body {
-  display: flex;
-  padding: 5px 10px;
-  background: hsl(0, 0%, 27%);
-  color: white;
-  border-radius: 4px;
-  justify-content: center;
-  align-items: center;
-}
-
-.Popover-tipShape {
-  fill: hsl(0, 0%, 27%);
-}
 
 /* rwd */
 @media screen and (min-width: 576px) {
@@ -311,27 +185,6 @@ img:hover + .changePicture,
 .wrapper:not(.information-container) {
   height: 100vh;
   overflow: scroll;
-  // padding-top: 10px;
-  // padding-left: 5px;
-  // padding-right: 20px;
-}
-
-a {
-  text-decoration: none;
-}
-
-.link__disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.navbar_top .brand {
-  height: 39px;
-  width: 39px;
-
-  img {
-    width: 100%;
-  }
 }
 
 .companion-link {
diff --git a/daikoku/javascript/src/style/main.scss b/daikoku/javascript/src/style/main.scss
index 5c0492c9b..cc81fcde0 100644
--- a/daikoku/javascript/src/style/main.scss
+++ b/daikoku/javascript/src/style/main.scss
@@ -5,7 +5,7 @@
 @import 'layout/sidebar';
 @import 'layout/navbar';
 @import 'layout/login';
-@import 'layout/teamBilling';
+@import 'layout/footer.scss';
 
 @import "components/antCalandar";
 @import 'components/avatarWithAction';
@@ -19,17 +19,14 @@
 @import 'components/pagination';
 @import 'components/popover';
 @import 'components/reactTable';
-@import 'components/tableApi';
 @import 'components/tiles';
 @import 'components/toastr';
 @import 'components/input';
 @import 'components/backOffice.scss';
-@import 'components/error.scss';
 @import 'components/switch.scss';
 @import 'components/consumptions.scss';
 @import 'swagger';
 @import "components/recharts.scss";
-@import 'components/footer.scss';
 @import 'components/discussion.scss';
 @import 'components/messages.scss';
 @import 'components/breadcrumb.scss';
@@ -38,3 +35,7 @@
 @import 'components/reactSelect.scss';
 @import 'components/sortable.scss';
 @import 'components/redoc.scss';
+@import 'components/teamBilling';
+@import 'components/navDocumentation';
+@import 'components/swagger';
+@import 'components/tabs';

From f0ebbb5cc07c4a9eaec538d1bc228cc54d71da97 Mon Sep 17 00:00:00 2001
From: baudelotphilippe <philippe@baudelot.eu>
Date: Tue, 18 Jun 2024 16:26:27 +0200
Subject: [PATCH 8/8] fix some colors

---
 .../components/adminbackoffice/cms/Create.tsx |  5 +--
 .../javascript/src/style/components/tabs.scss |  2 +-
 .../javascript/src/style/layout/style.scss    | 32 +++++++++++--------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx
index 3c04f8f3e..9e3cca6a5 100644
--- a/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx
+++ b/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx
@@ -127,11 +127,8 @@ export const Create = (props: any) => {
     <div
       style={{
         height: '42px',
-        // backgroundColor: '#fff',
         display: 'flex',
         alignItems: 'center',
-        // boxShadow: selected ? '0 1px 3px rgba(25,25,25,.5)' : 'none', //@ts-ignore //FIXME
-        // backgroundColor: 'var(--sidebar-bg-color, #f8f9fa)',
         zIndex: selected ? 2 : 0,
         borderTopLeftRadius: "4px",
         borderTopRightRadius:"4px"
@@ -139,7 +136,7 @@ export const Create = (props: any) => {
       onClick={onClick}
       className={`px-3 level2-link__with-bg ${selected ? 'level2-link__active-bg' : ''}`}
     >
-      <button className="btn btn-sm" type="button">
+      <button className="btn btn-sm level2-link" type="button">
         {title}
       </button>
       {onClose && <i className="fas fa-times" />}
diff --git a/daikoku/javascript/src/style/components/tabs.scss b/daikoku/javascript/src/style/components/tabs.scss
index 27740e3ed..a736204a7 100644
--- a/daikoku/javascript/src/style/components/tabs.scss
+++ b/daikoku/javascript/src/style/components/tabs.scss
@@ -3,7 +3,7 @@
     border-color: $btn-border-color;
   
     .nav-link {
-      color: $btn-text-color;
+      color: $level2_text-color;
     }
   
     .nav-link:hover,
diff --git a/daikoku/javascript/src/style/layout/style.scss b/daikoku/javascript/src/style/layout/style.scss
index 66f2f5999..1ea819129 100644
--- a/daikoku/javascript/src/style/layout/style.scss
+++ b/daikoku/javascript/src/style/layout/style.scss
@@ -184,7 +184,7 @@ img:hover + .changePicture,
 
 .wrapper:not(.information-container) {
   height: 100vh;
-  overflow: scroll;
+  overflow: auto;
 }
 
 .companion-link {
@@ -210,6 +210,24 @@ img:hover + .changePicture,
   background-color: $level2_bg-color;
   color: $level2_text-color;
 }
+.level2-link {
+  color: $level2_link-color;
+  &:hover {
+    color: $level2_link-hover-color;
+  }
+  &__with-bg:hover{
+      cursor: pointer;
+      background-color: $btn-border-color;
+      color:  $btn-bg-color;
+  }
+  &__active-bg {
+    color: $btn-text-color;
+    background-color: $btn-bg-color;
+    border: 1px solid $btn-border-color;
+  }
+}
+
+
 .level3 {
   background-color: $level3_bg-color;
   color: $level3_text-color;
@@ -222,15 +240,3 @@ img:hover + .changePicture,
   }
 }
 
-.level2-link {
-  color: $level2_link-color;
-  &:hover {
-    color: $level2_link-hover-color;
-  }
-  &__with-bg:hover,
-  &__active-bg {
-    color: var(--btn-text-color);
-    background-color: var(--btn-bg-color);
-    border-color: var(--btn-border-color);
-  }
-}