diff --git a/js/src/components/Group/GroupSection.vue b/js/src/components/Group/GroupSection.vue
index 038409c04..864b55efd 100644
--- a/js/src/components/Group/GroupSection.vue
+++ b/js/src/components/Group/GroupSection.vue
@@ -3,10 +3,10 @@
     class="flex flex-col mb-3 border-2"
     :class="{
       'border-mbz-purple': privateSection,
-      'border-yellow-1': !privateSection,
+      'border-fomo-blue': !privateSection,
     }"
   >
-    <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
+    <div class="flex items-stretch py-3 px-1 bg-fomo-blue text-violet-title">
       <div class="flex flex-1 gap-1">
         <o-icon :icon="icon" custom-size="36" />
         <h2 class="text-2xl font-medium mt-0">{{ title }}</h2>
diff --git a/js/src/components/PageFooter.vue b/js/src/components/PageFooter.vue
index 751292253..2a730e605 100644
--- a/js/src/components/PageFooter.vue
+++ b/js/src/components/PageFooter.vue
@@ -4,7 +4,7 @@
     ref="footer"
   >
     <ul
-      class="inline-flex flex-wrap justify-around gap-3 text-lg text-white underline decoration-yellow-1"
+      class="inline-flex flex-wrap justify-around gap-3 text-lg text-white underline decoration-fomo-blue"
     >
       <li>
         <o-select
@@ -46,7 +46,7 @@
         <a href="#navbar">{{ t("Back to top") }}</a>
       </li>
     </ul>
-    <div class="text-center flex-1 pt-2 text-yellow-1">
+    <div class="text-center flex-1 pt-2 text-fomo-blue">
       <i18n-t
         tag="span"
         keypath="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
@@ -54,7 +54,7 @@
         <template #mobilizon>
           <a
             rel="external"
-            class="text-white underline decoration-yellow-1"
+            class="text-white underline decoration-fomo-blue"
             href="https://joinmobilizon.org"
             >{{ t("Mobilizon") }}</a
           >
@@ -65,7 +65,7 @@
         <template #contributors>
           <a
             rel="external"
-            class="text-white underline decoration-yellow-1"
+            class="text-white underline decoration-fomo-blue"
             href="https://joinmobilizon.org/hall-of-fame"
             >{{ t("more than 1360 contributors") }}</a
           >
diff --git a/js/src/components/TagElement.vue b/js/src/components/TagElement.vue
index 128751d82..fc702a72a 100644
--- a/js/src/components/TagElement.vue
+++ b/js/src/components/TagElement.vue
@@ -30,7 +30,7 @@ const typeClasses = computed(() => {
     case "info":
       return "bg-mbz-info dark:text-black";
     case "warning":
-      return "bg-yellow-1";
+      return "bg-fomo-blue";
     case "danger":
       return "bg-mbz-danger dark:text-white";
   }
diff --git a/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap b/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
index de0a9aef7..a15da3f0d 100644
--- a/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
+++ b/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`GroupSection > renders group section with basic informations 1`] = `
 "<section class=\\"flex flex-col mb-3 border-2 border-mbz-purple\\">
-  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-fomo-blue text-violet-title\\">
     <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
       <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
     </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
@@ -15,8 +15,8 @@ exports[`GroupSection > renders group section with basic informations 1`] = `
 `;
 
 exports[`GroupSection > renders public group section 1`] = `
-"<section class=\\"flex flex-col mb-3 border-2 border-yellow-1\\">
-  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+"<section class=\\"flex flex-col mb-3 border-2 border-fomo-blue\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-fomo-blue text-violet-title\\">
     <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
       <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
     </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>