diff --git a/packages/frontendmu-nuxt/components/cards/EventCard.vue b/packages/frontendmu-nuxt/components/cards/EventCard.vue
index f0d315de..61f202dd 100644
--- a/packages/frontendmu-nuxt/components/cards/EventCard.vue
+++ b/packages/frontendmu-nuxt/components/cards/EventCard.vue
@@ -22,7 +22,7 @@
 
         <template v-if="event.Date">
           <div :class="[
-            !isUpcoming(event.Date) ? 'text-green-600 font-bold' : 'text-verse-900 dark:text-verse-300',
+            isUpcoming(event.Date) ? 'text-green-600 font-bold' : 'text-verse-900 dark:text-verse-300',
             'flex flex-col font-mono text-sm font-medium gap-2 w-full justify-between',
           ]">
 
diff --git a/packages/frontendmu-nuxt/components/cards/EventTilt.vue b/packages/frontendmu-nuxt/components/cards/EventTilt.vue
index e91ca447..e4cb857a 100644
--- a/packages/frontendmu-nuxt/components/cards/EventTilt.vue
+++ b/packages/frontendmu-nuxt/components/cards/EventTilt.vue
@@ -9,20 +9,6 @@ const props = defineProps({
   },
 });
 
-const dateInPast = function (firstDate: Date, secondDate: Date) {
-  if (firstDate.setHours(0, 0, 0, 0) <= secondDate.setHours(0, 0, 0, 0)) {
-    return true;
-  }
-  return false;
-};
-
-const isUpcoming = (currentEventDate: string) => {
-  const past = new Date(currentEventDate);
-  const today = new Date();
-  const verifyValue = dateInPast(past, today);
-  return verifyValue;
-};
-
 const tiltOptions = {
   reverse: false,
   speed: 1000,
@@ -46,8 +32,8 @@ const tiltOptions = {
 
       <div class="flex flex-col md:flex-row w-full justify-between gap-4 border-gray-100">
         <span v-if="props.event.Date" class="inline-flex rounded-lg p-3 ring-4 ring-white dark:ring-white/10" :class="isUpcoming(props.event.Date)
-          ? 'bg-gray-50 text-gray-700'
-          : 'bg-green-50 text-green-600 font-bold dark:bg-verse-900'
+            ? 'bg-green-50 text-green-600 font-bold dark:bg-verse-900'
+            : 'bg-gray-50 text-gray-700'
           ">
           <Icon name="carbon:calendar" class="mr-2 h-6 w-6" />
           <span>{{ new Date(props.event.Date).toDateString() }}</span>
diff --git a/packages/frontendmu-nuxt/components/cards/event-card-modern.vue b/packages/frontendmu-nuxt/components/cards/event-card-modern.vue
index 26664b11..3a98c718 100644
--- a/packages/frontendmu-nuxt/components/cards/event-card-modern.vue
+++ b/packages/frontendmu-nuxt/components/cards/event-card-modern.vue
@@ -6,8 +6,8 @@
       <div v-if="event.Date" class="">
         <span :title="isUpcoming(event.Date) ? 'Upcoming' : 'Past'" :class="[
           isUpcoming(event.Date)
-            ? 'bg-gray-50  dark:bg-transparent text-verse-500 dark:text-verse-400  dark:font-bold'
-            : 'bg-green-50 text-green-600 font-bold',
+            ? 'bg-green-50 text-green-600 font-bold'
+            : 'bg-gray-50 dark:bg-transparent text-verse-500 dark:text-verse-400  dark:font-bold',
           'inline-flex rounded-lg p-[0.35rem] md:p-3 font-mono text-sm font-medium items-center',
         ]">
           <Icon name="carbon:calendar" class="mr-2 h-6 w-6" />
diff --git a/packages/frontendmu-nuxt/components/cards/small-event-card.vue b/packages/frontendmu-nuxt/components/cards/small-event-card.vue
index 87d0fe37..376ab816 100644
--- a/packages/frontendmu-nuxt/components/cards/small-event-card.vue
+++ b/packages/frontendmu-nuxt/components/cards/small-event-card.vue
@@ -15,8 +15,8 @@ const props = defineProps({
     class="mt-4 md:mt-0 relative rounded-xl flex flex-col gap-2 group bg-white dark:bg-verse-700/40 p-6 shadow-md transition-all hover:shadow-lg">
     <div v-if="event.Date" class="">
       <span class="inline-flex rounded-lg p-3 ring-4 ring-white dark:ring-white/5" :class="isUpcoming(event.Date)
-        ? 'bg-gray-50 text-gray-700 '
-        : 'bg-verse-50 text-verse-600 dark:text-verse-400 font-bold dark:bg-verse-900/10'
+        ? 'bg-verse-50 text-verse-600 dark:text-verse-400 font-bold dark:bg-verse-900/10'
+        : 'bg-gray-50 text-gray-700'
         ">
         <div class="mr-2 h-6 w-6">
           <Icon name="carbon:calendar" />
diff --git a/packages/frontendmu-nuxt/composables/useMeetups.ts b/packages/frontendmu-nuxt/composables/useMeetups.ts
index b2eb6376..c8d36f47 100644
--- a/packages/frontendmu-nuxt/composables/useMeetups.ts
+++ b/packages/frontendmu-nuxt/composables/useMeetups.ts
@@ -12,14 +12,19 @@ export default function useMeetups() {
         return acc;
     }, {}));
 
+    const sortedMeetups = computed(() => {
+        return (allMeetups || []).sort((a, b) => {
+            return (
+                new Date(b.Date).getTime() - new Date(a.Date).getTime()
+            );
+        });
+    })
+
     function upcomingMeetups() {
         if (!allMeetups) return [];
-        const sortedData = allMeetups.sort((a, b) => {
-            return new Date(b.Date).getTime() - new Date(a.Date).getTime();
-        });
 
-        return sortedData.filter((item) => {
-            return !isUpcoming(item.Date);
+        return sortedMeetups.value.filter((item) => {
+          return isUpcoming(item.Date);
         });
     };
 
@@ -29,15 +34,12 @@ export default function useMeetups() {
 
     const pastMeetups = computed(() => {
         if (!allMeetups) return [];
-        const sortedData = allMeetups.sort((a, b) => {
-            return new Date(b.Date).getTime() - new Date(a.Date).getTime();
-        });
 
-        const withoutUpcoming = sortedData.filter((item) => {
-            return isUpcoming(item.Date);
+        const pastMeetupsData = sortedMeetups.value.filter((item) => {
+          return !isUpcoming(item.Date);
         });
 
-        return withoutUpcoming.slice(0, 10);
+        return pastMeetupsData.slice(0, 10);
     })