diff --git a/src/components/Event/EventParticipationCard.vue b/src/components/Event/EventParticipationCard.vue
index bc2d338bd..7f41c8f48 100644
--- a/src/components/Event/EventParticipationCard.vue
+++ b/src/components/Event/EventParticipationCard.vue
@@ -1,9 +1,9 @@
 <template>
   <article
-    class="bg-white dark:bg-mbz-purple dark:hover:bg-mbz-purple-400 mb-5 mt-4 pb-2 md:p-0 rounded-t-lg"
+    class="bg-white dark:bg-mbz-purple dark:hover:bg-mbz-purple-400 mb-5 mt-4 pb-2 md:p-0"
   >
     <div
-      class="bg-mbz-yellow-alt-100 flex p-2 text-black-title rounded-t-lg"
+      class="bg-fomo-card-1 flex p-2 text-black-title"
       dir="auto"
     >
       <figure
diff --git a/src/components/FullCalendar/EventsCalendar.vue b/src/components/FullCalendar/EventsCalendar.vue
index 9edcba324..71b937c88 100644
--- a/src/components/FullCalendar/EventsCalendar.vue
+++ b/src/components/FullCalendar/EventsCalendar.vue
@@ -74,11 +74,11 @@ const calendarOptions = computed((): object => {
     },
     nextDayThreshold: "09:00:00",
     dayMaxEventRows: 5,
-    moreLinkClassNames: "bg-mbz-yellow dark:bg-mbz-purple dark:text-white p-2",
+    moreLinkClassNames: "bg-fomo-card-1 dark:bg-mbz-purple dark:text-white p-2",
     moreLinkContent: (arg: { num: number; text: string }) => {
       return "+" + arg.num.toString();
     },
-    eventClassNames: "line-clamp-3 bg-mbz-yellow dark:bg-mbz-purple",
+    eventClassNames: "line-clamp-3 bg-fomo-card-1 dark:bg-mbz-purple",
     headerToolbar: {
       left: "prev,next,today",
       center: "title",
diff --git a/src/components/Group/GroupMemberCard.vue b/src/components/Group/GroupMemberCard.vue
index 8a3aa3f54..057fd9f56 100644
--- a/src/components/Group/GroupMemberCard.vue
+++ b/src/components/Group/GroupMemberCard.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
+  <div class="shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
     <div
-      class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg"
+      class="bg-fomo-card-1 text-black flex items-center gap-1 p-2"
       dir="auto"
     >
       <figure class="" v-if="member.actor.avatar">
diff --git a/src/components/Group/GroupSection.vue b/src/components/Group/GroupSection.vue
index f5e4cd9d7..99eefd954 100644
--- a/src/components/Group/GroupSection.vue
+++ b/src/components/Group/GroupSection.vue
@@ -6,7 +6,7 @@
       'border-yellow-1': !privateSection,
     }"
   >
-    <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-black-title">
+    <div class="flex items-stretch py-3 px-1 bg-fomo-card-1 text-black-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/src/components/PageFooter.vue b/src/components/PageFooter.vue
index 751292253..52eb9800b 100644
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="bg-zinc-900 color-secondary flex flex-col items-center py-2 px-3"
+    class="bg-black color-secondary flex flex-col items-center py-2 px-3"
     ref="footer"
   >
     <ul
diff --git a/src/components/Settings/SettingMenuItem.vue b/src/components/Settings/SettingMenuItem.vue
index 2322c48b0..187b0f855 100644
--- a/src/components/Settings/SettingMenuItem.vue
+++ b/src/components/Settings/SettingMenuItem.vue
@@ -2,8 +2,8 @@
   <li
     class="setting-menu-item"
     :class="{
-      'cursor-pointer bg-mbz-yellow-alt-500 dark:bg-mbz-purple-600': isActive,
-      'bg-mbz-yellow-alt-100 hover:bg-mbz-yellow-alt-200 dark:bg-mbz-purple-500 dark:hover:bg-mbz-purple-600 dark:text-white':
+      'cursor-pointer bg-mbz-purple-600': isActive,
+      'bg-mbz-purple-500 hover:bg-mbz-purple-600 text-white':
         !isActive,
     }"
   >
diff --git a/src/components/Settings/SettingMenuSection.vue b/src/components/Settings/SettingMenuSection.vue
index 06eb63896..bb390b144 100644
--- a/src/components/Settings/SettingMenuSection.vue
+++ b/src/components/Settings/SettingMenuSection.vue
@@ -1,6 +1,6 @@
 <template>
   <li
-    class="bg-mbz-yellow-alt-300 text-violet-2 dark:bg-mbz-purple-700 dark:text-zinc-100 text-xl"
+    class="bg-mbz-purple-700 text-zinc-100 text-xl"
   >
     <router-link
       class="cursor-pointer my-2 mx-0 py-2 px-3 font-medium block no-underline"
diff --git a/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap b/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
index 8b061ff39..1201535e4 100644
--- a/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
+++ b/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-black-title\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-fomo-card-1 text-black-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>
@@ -16,7 +16,7 @@ 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-black-title\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-fomo-card-1 text-black-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>