diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 30edec26..22e9ec7d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,14 +12,14 @@
         "@pinia/colada": "^0.17.1",
         "@tailwindcss/vite": "^4.1.11",
         "@vee-validate/zod": "^4.15.1",
-        "@vueuse/core": "^13.6.0",
+        "@vueuse/core": "^13.9.0",
         "@vueuse/integrations": "^13.6.0",
         "axios": "^1.11.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-vue-next": "^0.536.0",
         "pinia": "^3.0.3",
-        "reka-ui": "^2.7.0",
+        "reka-ui": "^2.8.0",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.11",
         "tw-animate-css": "^1.3.6",
@@ -2327,14 +2327,14 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "13.6.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.6.0.tgz",
-      "integrity": "sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==",
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
+      "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "13.6.0",
-        "@vueuse/shared": "13.6.0"
+        "@vueuse/metadata": "13.9.0",
+        "@vueuse/shared": "13.9.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -2343,6 +2343,18 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.9.0.tgz",
+      "integrity": "sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@vueuse/integrations": {
       "version": "13.6.0",
       "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-13.6.0.tgz",
@@ -2409,7 +2421,24 @@
         }
       }
     },
-    "node_modules/@vueuse/metadata": {
+    "node_modules/@vueuse/integrations/node_modules/@vueuse/core": {
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.6.0.tgz",
+      "integrity": "sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.6.0",
+        "@vueuse/shared": "13.6.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/integrations/node_modules/@vueuse/metadata": {
       "version": "13.6.0",
       "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.6.0.tgz",
       "integrity": "sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ==",
@@ -2418,6 +2447,15 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
+      "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@vueuse/shared": {
       "version": "13.6.0",
       "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.6.0.tgz",
@@ -5313,9 +5351,9 @@
       "license": "MIT"
     },
     "node_modules/reka-ui": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
-      "integrity": "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.8.0.tgz",
+      "integrity": "sha512-N4JOyIrmDE7w2i06WytqcV2QICubtS2PsK5Uo8FIMAgmO13KhUAgAByP26cXjjm2oF/w7rTyRs8YaqtvaBT+SA==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",
@@ -5323,8 +5361,8 @@
         "@internationalized/date": "^3.5.0",
         "@internationalized/number": "^3.5.0",
         "@tanstack/vue-virtual": "^3.12.0",
-        "@vueuse/core": "^12.5.0",
-        "@vueuse/shared": "^12.5.0",
+        "@vueuse/core": "^14.1.0",
+        "@vueuse/shared": "^14.1.0",
         "aria-hidden": "^1.2.4",
         "defu": "^6.1.4",
         "ohash": "^2.0.11"
@@ -5334,39 +5372,41 @@
       }
     },
     "node_modules/reka-ui/node_modules/@vueuse/core": {
-      "version": "12.8.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.8.2.tgz",
-      "integrity": "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.0.tgz",
+      "integrity": "sha512-tpjzVl7KCQNVd/qcaCE9XbejL38V6KJAEq/tVXj7mDPtl6JtzmUdnXelSS+ULRkkrDgzYVK7EerQJvd2jR794Q==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "12.8.2",
-        "@vueuse/shared": "12.8.2",
-        "vue": "^3.5.13"
+        "@vueuse/metadata": "14.2.0",
+        "@vueuse/shared": "14.2.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
       }
     },
     "node_modules/reka-ui/node_modules/@vueuse/metadata": {
-      "version": "12.8.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.8.2.tgz",
-      "integrity": "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.0.tgz",
+      "integrity": "sha512-i3axTGjU8b13FtyR4Keeama+43iD+BwX9C2TmzBVKqjSHArF03hjkp2SBZ1m72Jk2UtrX0aYCugBq2R1fhkuAQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/reka-ui/node_modules/@vueuse/shared": {
-      "version": "12.8.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.8.2.tgz",
-      "integrity": "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.0.tgz",
+      "integrity": "sha512-Z0bmluZTlAXgUcJ4uAFaML16JcD8V0QG00Db3quR642I99JXIDRa2MI2LGxiLVhcBjVnL1jOzIvT5TT2lqJlkA==",
       "license": "MIT",
-      "dependencies": {
-        "vue": "^3.5.13"
-      },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
       }
     },
     "node_modules/require-directory": {
diff --git a/frontend/package.json b/frontend/package.json
index 181f139b..85bbe55d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,14 +21,14 @@
     "@pinia/colada": "^0.17.1",
     "@tailwindcss/vite": "^4.1.11",
     "@vee-validate/zod": "^4.15.1",
-    "@vueuse/core": "^13.6.0",
+    "@vueuse/core": "^13.9.0",
     "@vueuse/integrations": "^13.6.0",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.536.0",
     "pinia": "^3.0.3",
-    "reka-ui": "^2.7.0",
+    "reka-ui": "^2.8.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11",
     "tw-animate-css": "^1.3.6",
diff --git a/frontend/src/components/ParticipationChip.vue b/frontend/src/components/ParticipationChip.vue
deleted file mode 100644
index e9a7684e..00000000
--- a/frontend/src/components/ParticipationChip.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<template>
-  <div
-    ref="toolbar"
-    class="flex flex-wrap gap-3 my-4 items-center"
-    role="toolbar"
-    aria-label="Participation status filters"
-    @keydown="onToolbarKeydown"
-  >
-    <!-- All chip -->
-    <button
-      :ref="(el) => setButtonRef(el, 0)"
-      type="button"
-      :aria-pressed="selected === null"
-      title="Show all participations"
-      :tabindex="focusedIndex === 0 ? 0 : -1"
-      :class="[
-        'inline-flex items-center gap-2 px-4 py-1 rounded-full text-sm transition duration-150 ease-out cursor-pointer select-none transform-gpu',
-        selected === null
-          ? 'bg-black/5 text-slate-900 font-semibold ring-2 ring-offset-1 ring-slate-300'
-          : 'bg-white text-slate-700 hover:bg-slate-50',
-        // make focus with keyboard very visible
-        'focus-visible:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400',
-      ]"
-      @click="setSelected(null)"
-      @focus="focusedIndex = 0"
-      @keydown="onButtonKeydown"
-    >
-      <Check
-        v-if="selected === null"
-        class="w-4 h-4 text-slate-900 stroke-current"
-        aria-hidden="true"
-      />
-      <span>All</span>
-    </button>
-
-    <!-- Status chips -->
-    <button
-      v-for="(status, idx) in statusesOrdered"
-      :key="status"
-      :ref="(el) => setButtonRef(el, idx + 1)"
-      type="button"
-      :aria-pressed="selected === status"
-      :title="humanReadableParticipationStatus[status]"
-      :tabindex="focusedIndex === idx + 1 ? 0 : -1"
-      :class="[
-        'inline-flex items-center gap-3 px-4 py-1 rounded-full text-sm transition-colors duration-150 ease-out cursor-pointer select-none transform-gpu',
-        chipClass(status),
-        selected === status ? 'font-semibold shadow' : 'font-medium',
-        // selected gets a persistent ring; otherwise show a visible focus ring for keyboard users
-        selected === status
-          ? ['ring-2', 'ring-offset-1', participationStatusColor[status].ring]
-          : [
-              'focus-visible:outline-none',
-              'focus-visible:scale-105',
-              'focus-visible:ring-2',
-              'focus-visible:ring-offset-2',
-              participationStatusColor[status].ring,
-            ],
-      ]"
-      @click="setSelected(status)"
-      @focus="focusedIndex = idx + 1"
-      @keydown="onButtonKeydown"
-    >
-      <!-- show an icon only when this status is selected to avoid extra left space -->
-      <Check
-        v-if="selected === status"
-        :class="[
-          'w-4 h-4 stroke-current',
-          status === 'GIVEN_UP' ? 'text-slate-900' : 'text-white',
-        ]"
-        aria-hidden="true"
-      />
-      <span class="whitespace-nowrap">{{
-        humanReadableParticipationStatus[status]
-      }}</span>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, nextTick, type ComponentPublicInstance } from "vue";
-import { Check } from "lucide-vue-next";
-import type { ParticipationStatus } from "@/dto";
-import {
-  humanReadableParticipationStatus,
-  participationStatusColor,
-} from "@/dto";
-
-const props = defineProps<{
-  selected?: ParticipationStatus | null;
-}>();
-
-const emit = defineEmits<{
-  (e: "update:selected", value: ParticipationStatus | null): void;
-}>();
-
-const statusesOrdered: ParticipationStatus[] = [
-  "ANNOUNCED",
-  "ACCEPTED",
-  "CONTACTED",
-  "GIVEN_UP",
-  "IN_CONVERSATIONS",
-  "ON_HOLD",
-  "REJECTED",
-  "SELECTED",
-  "SUGGESTED",
-];
-
-const selected = computed<ParticipationStatus | null>({
-  get: () => props.selected ?? null,
-  set: (val) => emit("update:selected", val),
-});
-
-const chipClass = (status: ParticipationStatus) => {
-  const color = participationStatusColor[status];
-  return `${color.background} border border-transparent`;
-};
-
-function setSelected(val: ParticipationStatus | null) {
-  selected.value = val;
-}
-
-// Keyboard navigation support
-const focusedIndex = ref(0);
-const chipButtons = ref<(HTMLElement | undefined)[]>([]);
-const toolbar = ref<HTMLElement | null>(null);
-
-function focusButton(idx: number) {
-  nextTick(() => {
-    const buttons = chipButtons.value || [];
-    const button = buttons[idx];
-    if (button) {
-      focusedIndex.value = idx;
-      button.focus();
-    }
-  });
-}
-
-function handleNavigationKeydown(e: KeyboardEvent) {
-  const key = e.key;
-  if (
-    key === "ArrowRight" ||
-    key === "ArrowDown" ||
-    key === "Right" ||
-    key === "Down" ||
-    key === "39"
-  ) {
-    e.preventDefault();
-    focusedIndex.value =
-      (focusedIndex.value + 1) % (statusesOrdered.length + 1);
-    focusButton(focusedIndex.value);
-    return true;
-  } else if (
-    key === "ArrowLeft" ||
-    key === "ArrowUp" ||
-    key === "Left" ||
-    key === "Up" ||
-    key === "37"
-  ) {
-    e.preventDefault();
-    focusedIndex.value =
-      (focusedIndex.value - 1 + statusesOrdered.length + 1) %
-      (statusesOrdered.length + 1);
-    focusButton(focusedIndex.value);
-    return true;
-  }
-  return false;
-}
-
-function onToolbarKeydown(e: KeyboardEvent) {
-  if (e.target && (e.target as HTMLElement).tagName === "BUTTON") return;
-  handleNavigationKeydown(e);
-}
-
-function onButtonKeydown(e: KeyboardEvent) {
-  handleNavigationKeydown(e);
-}
-
-function setButtonRef(
-  el: Element | ComponentPublicInstance | null,
-  idx: number,
-) {
-  if (!chipButtons.value) chipButtons.value = [];
-  if (el) {
-    chipButtons.value[idx] = (el as HTMLElement) ?? undefined;
-  } else {
-    chipButtons.value[idx] = undefined;
-  }
-}
-</script>
diff --git a/frontend/src/components/ParticipationFilters.vue b/frontend/src/components/ParticipationFilters.vue
new file mode 100644
index 00000000..a7ec3bbb
--- /dev/null
+++ b/frontend/src/components/ParticipationFilters.vue
@@ -0,0 +1,225 @@
+<template>
+  <div
+    class="flex flex-wrap gap-2 my-4 items-center"
+    role="group"
+    aria-label="Filter by participation status"
+  >
+    <!-- Package filter (only shown when packages are provided) -->
+    <template v-if="packages && packages.length > 0">
+      <Select v-model="selectedPackageModel">
+        <SelectTrigger
+          class="h-8 w-auto min-w-[140px] rounded-full text-sm font-medium"
+        >
+          <Package class="size-3.5" aria-hidden="true" />
+          <SelectValue placeholder="All Packages" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem :value="ALL_PACKAGES_VALUE"> All Packages </SelectItem>
+          <SelectItem v-for="pkg in packages" :key="pkg.id" :value="pkg.id">
+            {{ pkg.name }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </template>
+
+    <!-- All chip -->
+    <button
+      type="button"
+      :aria-pressed="selected === null"
+      aria-label="Show all participations"
+      :class="[
+        'inline-flex items-center h-8 px-3.5 rounded-full transition-all duration-150 cursor-pointer',
+        selected === null
+          ? 'bg-slate-900 text-white shadow-sm hover:bg-slate-800'
+          : 'bg-slate-100 text-slate-600 hover:bg-slate-200',
+      ]"
+      @click="setSelected(null)"
+    >
+      <Check
+        v-if="selected === null"
+        class="size-3.5 mr-1"
+        aria-hidden="true"
+      />
+      <span class="text-sm font-medium">All</span>
+    </button>
+
+    <Separator orientation="vertical" class="h-8 mx-1" />
+
+    <!-- Status chips -->
+    <button
+      v-for="status in statusesOrdered"
+      :key="status"
+      type="button"
+      :aria-pressed="selected === status"
+      :aria-label="humanReadableParticipationStatus[status]"
+      :class="[
+        'inline-flex items-center h-8 px-3.5 rounded-full transition-all duration-150 cursor-pointer',
+        selected === status
+          ? [
+              statusStyles[status].selectedBg,
+              statusStyles[status].selectedText,
+              statusStyles[status].selectedHoverBg,
+              'shadow-sm',
+            ]
+          : [
+              statusStyles[status].defaultBg,
+              statusStyles[status].defaultText,
+              statusStyles[status].defaultHoverBg,
+            ],
+      ]"
+      @click="setSelected(status)"
+    >
+      <Check
+        v-if="selected === status"
+        class="size-3.5 mr-1"
+        aria-hidden="true"
+      />
+      <span class="text-sm font-medium whitespace-nowrap">
+        {{ humanReadableParticipationStatus[status] }}
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Check, Package } from "lucide-vue-next";
+import { Separator } from "@/components/ui/separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ParticipationStatus, ObjectID } from "@/dto";
+import { humanReadableParticipationStatus } from "@/dto";
+import type { Package as PackageType } from "@/dto/packages";
+
+// Special value to represent "All Packages" since Select doesn't handle null well
+const ALL_PACKAGES_VALUE = "__all__";
+
+const props = defineProps<{
+  selected?: ParticipationStatus | null;
+  packages?: PackageType[];
+  selectedPackage?: ObjectID | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:selected", value: ParticipationStatus | null): void;
+  (e: "update:selectedPackage", value: ObjectID | null): void;
+}>();
+
+const statusesOrdered: ParticipationStatus[] = [
+  "ANNOUNCED",
+  "ACCEPTED",
+  "CONTACTED",
+  "GIVEN_UP",
+  "IN_CONVERSATIONS",
+  "ON_HOLD",
+  "REJECTED",
+  "SELECTED",
+  "SUGGESTED",
+];
+
+// Status-specific styling with solid colors
+const statusStyles: Record<
+  ParticipationStatus,
+  {
+    selectedBg: string;
+    selectedText: string;
+    selectedHoverBg: string;
+    defaultBg: string;
+    defaultText: string;
+    defaultHoverBg: string;
+  }
+> = {
+  SUGGESTED: {
+    selectedBg: "bg-amber-400",
+    selectedText: "text-amber-950",
+    selectedHoverBg: "hover:bg-amber-500",
+    defaultBg: "bg-amber-100",
+    defaultText: "text-amber-800",
+    defaultHoverBg: "hover:bg-amber-200",
+  },
+  SELECTED: {
+    selectedBg: "bg-violet-500",
+    selectedText: "text-white",
+    selectedHoverBg: "hover:bg-violet-600",
+    defaultBg: "bg-violet-100",
+    defaultText: "text-violet-800",
+    defaultHoverBg: "hover:bg-violet-200",
+  },
+  ON_HOLD: {
+    selectedBg: "bg-zinc-500",
+    selectedText: "text-white",
+    selectedHoverBg: "hover:bg-zinc-600",
+    defaultBg: "bg-zinc-200",
+    defaultText: "text-zinc-700",
+    defaultHoverBg: "hover:bg-zinc-300",
+  },
+  CONTACTED: {
+    selectedBg: "bg-orange-400",
+    selectedText: "text-orange-950",
+    selectedHoverBg: "hover:bg-orange-500",
+    defaultBg: "bg-orange-100",
+    defaultText: "text-orange-800",
+    defaultHoverBg: "hover:bg-orange-200",
+  },
+  IN_CONVERSATIONS: {
+    selectedBg: "bg-sky-500",
+    selectedText: "text-white",
+    selectedHoverBg: "hover:bg-sky-600",
+    defaultBg: "bg-sky-100",
+    defaultText: "text-sky-800",
+    defaultHoverBg: "hover:bg-sky-200",
+  },
+  ACCEPTED: {
+    selectedBg: "bg-lime-500",
+    selectedText: "text-lime-950",
+    selectedHoverBg: "hover:bg-lime-600",
+    defaultBg: "bg-lime-100",
+    defaultText: "text-lime-800",
+    defaultHoverBg: "hover:bg-lime-200",
+  },
+  REJECTED: {
+    selectedBg: "bg-red-500",
+    selectedText: "text-white",
+    selectedHoverBg: "hover:bg-red-600",
+    defaultBg: "bg-red-100",
+    defaultText: "text-red-800",
+    defaultHoverBg: "hover:bg-red-200",
+  },
+  GIVEN_UP: {
+    selectedBg: "bg-slate-400",
+    selectedText: "text-slate-950",
+    selectedHoverBg: "hover:bg-slate-500",
+    defaultBg: "bg-slate-200",
+    defaultText: "text-slate-700",
+    defaultHoverBg: "hover:bg-slate-300",
+  },
+  ANNOUNCED: {
+    selectedBg: "bg-green-600",
+    selectedText: "text-white",
+    selectedHoverBg: "hover:bg-green-700",
+    defaultBg: "bg-green-100",
+    defaultText: "text-green-800",
+    defaultHoverBg: "hover:bg-green-200",
+  },
+};
+
+const selected = computed<ParticipationStatus | null>({
+  get: () => props.selected ?? null,
+  set: (val) => emit("update:selected", val),
+});
+
+const selectedPackageModel = computed<string>({
+  get: () => props.selectedPackage ?? ALL_PACKAGES_VALUE,
+  set: (val) =>
+    emit("update:selectedPackage", val === ALL_PACKAGES_VALUE ? null : val),
+});
+
+function setSelected(val: ParticipationStatus | null) {
+  selected.value = val;
+}
+</script>
diff --git a/frontend/src/components/ParticipationStatusBadge.vue b/frontend/src/components/ParticipationStatusBadge.vue
new file mode 100644
index 00000000..516fc300
--- /dev/null
+++ b/frontend/src/components/ParticipationStatusBadge.vue
@@ -0,0 +1,104 @@
+<template>
+  <Popover :open="isStatusMenuOpen" @update:open="isStatusMenuOpen = $event">
+    <PopoverTrigger as-child>
+      <Badge
+        :class="participationStatusColor[currentStatus]?.background"
+        class="text-xs flex items-center gap-1 cursor-pointer"
+      >
+        {{ humanReadableParticipationStatus[currentStatus] }}
+        <Loader2 v-if="isUpdating" class="w-3 h-3 animate-spin" />
+        <ChevronDown v-else class="w-3 h-3" />
+      </Badge>
+    </PopoverTrigger>
+    <PopoverContent class="w-56 p-0 z-50">
+      <div class="flex flex-col">
+        <button
+          v-for="(label, value) in humanReadableParticipationStatus"
+          :key="value"
+          :class="[
+            'px-3 py-2 text-sm text-left hover:bg-accent cursor-pointer',
+            currentStatus === value && 'bg-accent',
+          ]"
+          :disabled="isUpdating"
+          @click="selectStatus(value as ParticipationStatus)"
+        >
+          {{ label }}
+        </button>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import {
+  humanReadableParticipationStatus,
+  participationStatusColor,
+  type ParticipationStatus,
+} from "@/dto";
+import { Badge } from "@/components/ui/badge";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ChevronDown, Loader2 } from "lucide-vue-next";
+
+interface Props {
+  status: ParticipationStatus;
+  entityId: string;
+  entityType: "company" | "speaker";
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  "update:status": [status: ParticipationStatus];
+  updated: [];
+}>();
+
+const isStatusMenuOpen = ref(false);
+const isUpdating = ref(false);
+const currentStatus = ref<ParticipationStatus>(props.status);
+
+// Sync currentStatus when props change (e.g., after query refetch)
+watch(
+  () => props.status,
+  (newStatus) => {
+    currentStatus.value = newStatus;
+  },
+);
+
+// Import mutations dynamically based on entity type
+import { useCompanyParticipationStatusMutation } from "@/mutations/companies";
+import { useSpeakerParticipationStatusMutation } from "@/mutations/speakers";
+
+const companyStatusMutation = useCompanyParticipationStatusMutation();
+const speakerStatusMutation = useSpeakerParticipationStatusMutation();
+
+const selectStatus = async (status: ParticipationStatus) => {
+  const previous = currentStatus.value;
+  currentStatus.value = status;
+  isStatusMenuOpen.value = false;
+
+  try {
+    isUpdating.value = true;
+
+    if (props.entityType === "company") {
+      companyStatusMutation.companyId.value = props.entityId;
+      await companyStatusMutation.mutateAsync(status);
+    } else {
+      speakerStatusMutation.speakerId.value = props.entityId;
+      await speakerStatusMutation.mutateAsync(status);
+    }
+
+    emit("update:status", status);
+    emit("updated");
+  } catch (err) {
+    console.error("Failed to update participation status:", err);
+    currentStatus.value = previous;
+  } finally {
+    isUpdating.value = false;
+  }
+};
+</script>
diff --git a/frontend/src/components/cards/CompanyCard.vue b/frontend/src/components/cards/CompanyCard.vue
index 93de3c2e..0aa76192 100644
--- a/frontend/src/components/cards/CompanyCard.vue
+++ b/frontend/src/components/cards/CompanyCard.vue
@@ -73,6 +73,16 @@
         <div class="flex-1 min-w-0">
           <CardTitle class="text-lg truncate">{{ company.name }}</CardTitle>
           <div class="flex flex-wrap gap-1 mt-2">
+            <ParticipationStatusBadge
+              v-if="company.participation?.status"
+              :status="company.participation.status"
+              :entity-id="company.id"
+              entity-type="company"
+              @updated="emit('updated')"
+            />
+            <Badge v-if="packageData?.name" variant="outline">
+              {{ packageData.name }}
+            </Badge>
             <Badge v-if="company.participation?.partner" variant="secondary">
               Partner
             </Badge>
@@ -138,6 +148,7 @@ import type {
 } from "@/dto/companies";
 import { useCompanyInfoMutation } from "@/mutations/companies";
 import { useCompanyImageUploadMutation } from "@/mutations/companies";
+import { usePackageQuery } from "@/mutations/packages";
 import { deleteCompany } from "@/api/companies";
 import { useAuthStore } from "@/stores/auth";
 import { useQueryCache } from "@pinia/colada";
@@ -154,6 +165,7 @@ import CompanyInfoForm from "../companies/CompanyInfoForm.vue";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { TrashIcon } from "lucide-vue-next";
 import ConfirmDelete from "@/components/ConfirmDelete.vue";
+import ParticipationStatusBadge from "@/components/ParticipationStatusBadge.vue";
 
 const props = defineProps<{
   company: CompanyWithParticipation;
@@ -164,6 +176,10 @@ const emit = defineEmits<{
   deleted: [];
 }>();
 
+// Fetch package data if the company has a package
+const packageId = computed(() => props.company.participation?.package);
+const { data: packageData } = usePackageQuery(packageId);
+
 const isDescriptionExpanded = ref(false);
 const isEditing = ref(false);
 const isDeleteConfirmOpen = ref(false);
diff --git a/frontend/src/components/cards/CompanyWorkflowCard.vue b/frontend/src/components/cards/CompanyWorkflowCard.vue
index bc932a52..199f4cf9 100644
--- a/frontend/src/components/cards/CompanyWorkflowCard.vue
+++ b/frontend/src/components/cards/CompanyWorkflowCard.vue
@@ -4,28 +4,97 @@
     :image="company.imgs?.internal || company.imgs?.public"
     :title="company.name"
     :current-status="company.participation?.status"
-    :badge="company.participation?.partner ? 'Partner' : ''"
+    :badges="badges"
+    :is-loading="isUpdatingStatus"
     :to="{ name: 'company', params: { companyId: company.id } }"
     @status-change="updateCompanyStatus(company, $event)"
   />
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import type { CompanyWithParticipation } from "@/dto/companies";
 import { useCompanyParticipationStepMutation } from "@/mutations/companies";
-import WorkflowCard from "./WorkflowCard.vue";
+import { usePackageQuery } from "@/mutations/packages";
+import WorkflowCard, { type WorkflowBadge } from "./WorkflowCard.vue";
+import { Handshake, Crown, Trophy, Medal, Package } from "lucide-vue-next";
 
-defineProps<{
+const props = defineProps<{
   company: CompanyWithParticipation;
 }>();
 
+// Fetch package data if the company has a package
+const packageId = computed(() => props.company.participation?.package);
+const { data: packageData } = usePackageQuery(packageId);
+
+// Get appropriate icon and colors for package tier
+const getPackageConfig = (packageName: string) => {
+  const name = packageName.toLowerCase();
+  if (name.includes("platinum")) {
+    return {
+      icon: Crown,
+      color: "text-blue-600",
+      bgColor: "bg-blue-100 hover:bg-blue-200",
+    };
+  }
+  if (name.includes("gold")) {
+    return {
+      icon: Trophy,
+      color: "text-yellow-600",
+      bgColor: "bg-yellow-100 hover:bg-yellow-200",
+    };
+  }
+  if (name.includes("silver")) {
+    return {
+      icon: Medal,
+      color: "text-gray-400",
+      bgColor: "bg-gray-100 hover:bg-gray-200",
+    };
+  }
+  return {
+    icon: Package,
+    color: "text-muted-foreground",
+    bgColor: "bg-muted hover:bg-muted/80",
+  };
+};
+
+// Build badges array with icons
+const badges = computed(() => {
+  const result: WorkflowBadge[] = [];
+  if (props.company.participation?.partner) {
+    result.push({
+      icon: Handshake,
+      label: "Partner",
+      color: "text-emerald-600",
+      bgColor: "bg-emerald-100 hover:bg-emerald-200",
+    });
+  }
+  if (packageData.value?.name) {
+    const config = getPackageConfig(packageData.value.name);
+    result.push({
+      icon: config.icon,
+      label: packageData.value.name,
+      color: config.color,
+      bgColor: config.bgColor,
+    });
+  }
+  return result;
+});
+
 const companyParticipationStepMutation = useCompanyParticipationStepMutation();
-const updateCompanyStatus = (
+const isUpdatingStatus = ref(false);
+
+const updateCompanyStatus = async (
   company: CompanyWithParticipation,
   step: number,
 ) => {
   companyParticipationStepMutation.companyId.value = company.id;
   companyParticipationStepMutation.step.value = step;
-  companyParticipationStepMutation.mutate();
+  isUpdatingStatus.value = true;
+  try {
+    await companyParticipationStepMutation.mutateAsync();
+  } finally {
+    isUpdatingStatus.value = false;
+  }
 };
 </script>
diff --git a/frontend/src/components/cards/SpeakerCard.vue b/frontend/src/components/cards/SpeakerCard.vue
index 6c801c2d..74bb20b6 100644
--- a/frontend/src/components/cards/SpeakerCard.vue
+++ b/frontend/src/components/cards/SpeakerCard.vue
@@ -81,6 +81,13 @@
             {{ speaker.title }}
           </div>
           <div class="flex flex-wrap gap-1 mt-2">
+            <ParticipationStatusBadge
+              v-if="speaker.participation?.status"
+              :status="speaker.participation.status"
+              :entity-id="speaker.id"
+              entity-type="speaker"
+              @updated="emit('updated')"
+            />
             <Badge v-if="speaker.companyName">{{ speaker.companyName }}</Badge>
           </div>
         </div>
@@ -141,6 +148,7 @@ import SpeakerInfoForm from "../speakers/SpeakerInfoForm.vue";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { TrashIcon } from "lucide-vue-next";
 import ConfirmDelete from "@/components/ConfirmDelete.vue";
+import ParticipationStatusBadge from "@/components/ParticipationStatusBadge.vue";
 
 const props = defineProps<{
   speaker: SpeakerWithParticipation;
diff --git a/frontend/src/components/cards/SpeakerWorkflowCard.vue b/frontend/src/components/cards/SpeakerWorkflowCard.vue
index 01f2d541..9fc4c499 100644
--- a/frontend/src/components/cards/SpeakerWorkflowCard.vue
+++ b/frontend/src/components/cards/SpeakerWorkflowCard.vue
@@ -6,12 +6,14 @@
     "
     :title="speaker.name"
     :current-status="speaker.participation?.status"
+    :is-loading="isUpdatingStatus"
     :to="{ name: 'speaker', params: { speakerId: speaker.id } }"
     @status-change="updateSpeakerStatus(speaker, $event)"
   />
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import WorkflowCard from "./WorkflowCard.vue";
 import type { SpeakerWithParticipation } from "@/dto/speakers";
 import { useSpeakerParticipationStepMutation } from "@/mutations/speakers";
@@ -21,12 +23,19 @@ defineProps<{
 }>();
 
 const speakerParticipationStepMutation = useSpeakerParticipationStepMutation();
-const updateSpeakerStatus = (
+const isUpdatingStatus = ref(false);
+
+const updateSpeakerStatus = async (
   speaker: SpeakerWithParticipation,
   step: number,
 ) => {
   speakerParticipationStepMutation.speakerId.value = speaker.id;
   speakerParticipationStepMutation.step.value = step;
-  speakerParticipationStepMutation.mutate();
+  isUpdatingStatus.value = true;
+  try {
+    await speakerParticipationStepMutation.mutateAsync();
+  } finally {
+    isUpdatingStatus.value = false;
+  }
 };
 </script>
diff --git a/frontend/src/components/cards/WorkflowCard.vue b/frontend/src/components/cards/WorkflowCard.vue
index 628e1ed4..f8da7254 100644
--- a/frontend/src/components/cards/WorkflowCard.vue
+++ b/frontend/src/components/cards/WorkflowCard.vue
@@ -8,24 +8,37 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
-import { computed, watch, ref } from "vue";
+import { computed, watch, ref, type Component } from "vue";
 import {
   humanReadableParticipationStatus,
   participationNextValues,
   participationStatusColor,
   type ParticipationStatus,
 } from "@/dto";
-import { Badge } from "../ui/badge";
 import type { RouteLocationRaw } from "vue-router";
 import ConfettiExplosion from "vue-confetti-explosion";
 import confettiAudio from "@/assets/audio/confetti.mp3";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import { Loader2 } from "lucide-vue-next";
+
+export interface WorkflowBadge {
+  icon: Component;
+  label: string;
+  color?: string;
+  bgColor?: string;
+}
 
 const props = defineProps<{
   title: string;
   currentStatus?: ParticipationStatus;
   image?: string;
-  loading?: boolean;
-  badge?: string;
+  isLoading?: boolean;
+  badges?: WorkflowBadge[];
   to?: RouteLocationRaw;
 }>();
 
@@ -102,13 +115,18 @@ watch(
         <div
           v-if="!possibleStates.length"
           :class="[
-            'w-full flex items-center rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs pointer-events-none',
+            'w-full flex items-center rounded-md border px-3 py-2 text-sm shadow-xs pointer-events-none',
             participationStatusColor[selectedStatus].background,
           ]"
         >
           {{ humanReadableParticipationStatus[selectedStatus] }}
         </div>
-        <Select v-else v-model="selectedStatus" class="relative z-10">
+        <Select
+          v-else
+          v-model="selectedStatus"
+          class="relative z-10"
+          :disabled="isLoading"
+        >
           <SelectTrigger
             :class="[
               'w-full',
@@ -116,7 +134,10 @@ watch(
             ]"
           >
             <SelectValue placeholder="State">
-              {{ humanReadableParticipationStatus[selectedStatus] }}
+              <span class="flex items-center gap-2">
+                {{ humanReadableParticipationStatus[selectedStatus] }}
+                <Loader2 v-if="isLoading" class="w-3 h-3 animate-spin" />
+              </span>
             </SelectValue>
           </SelectTrigger>
           <SelectContent>
@@ -139,7 +160,27 @@ watch(
       </CardContent>
       <CardHeader>
         <CardTitle>{{ title }}</CardTitle>
-        <Badge v-if="badge">{{ badge }}</Badge>
+        <div v-if="badges?.length" class="flex flex-wrap gap-1">
+          <TooltipProvider v-for="badge in badges" :key="badge.label">
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <div
+                  class="inline-flex items-center justify-center w-6 h-6 rounded-full transition-colors"
+                  :class="badge.bgColor || 'bg-muted hover:bg-muted/80'"
+                >
+                  <component
+                    :is="badge.icon"
+                    class="w-3.5 h-3.5"
+                    :class="badge.color || 'text-muted-foreground'"
+                  />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{{ badge.label }}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
       </CardHeader>
     </Card>
   </component>
diff --git a/frontend/src/components/companies/ContractDownload.vue b/frontend/src/components/companies/ContractDownload.vue
index 65a502ee..e741e67d 100644
--- a/frontend/src/components/companies/ContractDownload.vue
+++ b/frontend/src/components/companies/ContractDownload.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-row flex-wrap w-full gap-2">
     <Button
       size="sm"
-      class="w-full"
+      variant="outline"
+      class="flex-1 min-w-fit"
       :disabled="isLoading"
       @click="download('pt')"
     >
@@ -10,7 +11,8 @@
     </Button>
     <Button
       size="sm"
-      class="w-full"
+      variant="outline"
+      class="flex-1 min-w-fit"
       :disabled="isLoading"
       @click="download('en')"
     >
diff --git a/frontend/src/components/companies/EditableCompanyParticipation.vue b/frontend/src/components/companies/EditableCompanyParticipation.vue
index 3458026e..c3e2720f 100644
--- a/frontend/src/components/companies/EditableCompanyParticipation.vue
+++ b/frontend/src/components/companies/EditableCompanyParticipation.vue
@@ -5,35 +5,11 @@
         <h4 class="font-medium">{{ getEventName(participation.event) }}</h4>
 
         <div class="flex items-center gap-2">
-          <Popover
-            :open="isStatusMenuOpen"
-            @update:open="isStatusMenuOpen = $event"
-          >
-            <PopoverTrigger as-child>
-              <Badge
-                :class="participationStatusColor[selectedStatus]?.background"
-                class="text-xs flex items-center gap-1 cursor-pointer"
-              >
-                {{ humanReadableParticipationStatus[selectedStatus] }}
-                <ChevronDown class="w-3 h-3" />
-              </Badge>
-            </PopoverTrigger>
-            <PopoverContent class="w-56 p-0">
-              <div class="flex flex-col">
-                <button
-                  v-for="(label, value) in humanReadableParticipationStatus"
-                  :key="value"
-                  :class="[
-                    'px-3 py-2 text-sm text-left hover:bg-accent cursor-pointer',
-                    selectedStatus === value && 'bg-accent',
-                  ]"
-                  @click="selectStatus(value as ParticipationStatus)"
-                >
-                  {{ label }}
-                </button>
-              </div>
-            </PopoverContent>
-          </Popover>
+          <ParticipationStatusBadge
+            :status="participation.status"
+            :entity-id="companyId"
+            entity-type="company"
+          />
 
           <Button
             v-if="!isEditing"
@@ -45,18 +21,8 @@
           </Button>
 
           <div v-else class="flex gap-2">
-            <Button
-              size="sm"
-              :disabled="isSaving || isStatusUpdating"
-              @click="saveChanges"
-            >
-              {{
-                isSaving
-                  ? "Saving..."
-                  : isStatusUpdating
-                    ? "Updating..."
-                    : "Save"
-              }}
+            <Button size="sm" :disabled="isSaving" @click="saveChanges">
+              {{ isSaving ? "Saving..." : "Save" }}
             </Button>
             <Button variant="outline" size="sm" @click="cancelEditing"
               >Cancel</Button
@@ -84,13 +50,8 @@
 
           <div v-if="participation.confirmed" class="text-sm">
             <span class="font-medium">Confirmed:</span>
-            <div class="mt-1 text-muted-foreground flex items-center gap-4">
+            <div class="mt-1 text-muted-foreground">
               <span>{{ formatDate(participation.confirmed) }}</span>
-              <span
-                v-if="participation.package && packageName"
-                class="text-xs text-muted-foreground"
-                >· {{ packageName }}</span
-              >
             </div>
           </div>
 
@@ -102,8 +63,19 @@
           </div>
         </div>
 
-        <div v-if="participation.partner" class="flex items-center gap-1">
-          <Badge variant="secondary" class="text-xs">Partner</Badge>
+        <div
+          v-if="participation.partner || packageName"
+          class="flex items-center gap-1"
+        >
+          <Badge
+            v-if="participation.partner"
+            variant="secondary"
+            class="text-xs"
+            >Partner</Badge
+          >
+          <Badge v-if="packageName" variant="outline" class="text-xs">{{
+            packageName
+          }}</Badge>
         </div>
       </div>
 
@@ -203,10 +175,7 @@ import useToast from "@/lib/toast";
 import { useQuery } from "@pinia/colada";
 import { getAllEvents } from "@/api/events";
 import { getAllMembers } from "@/api/members";
-import {
-  useCompanyParticipationMutation,
-  useCompanyParticipationStatusMutation,
-} from "@/mutations/companies";
+import { useCompanyParticipationMutation } from "@/mutations/companies";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -219,17 +188,6 @@ import type {
   CompanyParticipation,
   UpdateCompanyParticipationData,
 } from "@/dto/companies";
-import {
-  humanReadableParticipationStatus,
-  type ParticipationStatus,
-  participationStatusColor,
-} from "@/dto";
-import { ChevronDown } from "lucide-vue-next";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -238,6 +196,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import Image from "../Image.vue";
+import ParticipationStatusBadge from "@/components/ParticipationStatusBadge.vue";
 
 interface Props {
   participation: CompanyParticipation;
@@ -248,13 +207,8 @@ const props = defineProps<Props>();
 
 const isEditing = ref(false);
 const isSaving = ref(false);
-const isStatusMenuOpen = ref(false);
-const isStatusUpdating = ref(false);
-const selectedStatus = ref<ParticipationStatus>(props.participation.status);
 
 const updateMutation = useCompanyParticipationMutation();
-const statusMutation = useCompanyParticipationStatusMutation();
-statusMutation.companyId.value = props.companyId;
 
 const formatToISOString = (date: Date): string => {
   return date.toISOString();
@@ -323,27 +277,9 @@ const { data: membersData } = useQuery({
   query: () => getAllMembers(),
 });
 
-const selectStatus = async (status: ParticipationStatus) => {
-  const previous = selectedStatus.value;
-  selectedStatus.value = status;
-  isStatusMenuOpen.value = false;
-  try {
-    isStatusUpdating.value = true;
-    statusMutation.companyId.value = props.companyId;
-    await statusMutation.mutate(status);
-  } catch (err) {
-    console.error("Failed to update participation status:", err);
-    // revert value on error
-    selectedStatus.value = previous;
-  } finally {
-    isStatusUpdating.value = false;
-  }
-};
-
 const startEditing = () => {
   // entering edit mode for participation
   isEditing.value = true;
-  selectedStatus.value = props.participation.status;
   editForm.member = props.participation.member;
   editForm.partner = props.participation.partner;
   // If no confirmed date exists, set it to current time, otherwise convert existing date
diff --git a/frontend/src/components/companies/MembersCompanies.vue b/frontend/src/components/companies/MembersCompanies.vue
index a76e72d3..f24ad823 100644
--- a/frontend/src/components/companies/MembersCompanies.vue
+++ b/frontend/src/components/companies/MembersCompanies.vue
@@ -4,7 +4,11 @@
     <CreateCompanyDialogTrigger />
   </div>
 
-  <ParticipationChip v-model:selected="selectedStatus" />
+  <ParticipationFilters
+    v-model:selected="selectedStatus"
+    v-model:selected-package="selectedPackage"
+    :packages="packages"
+  />
 
   <div
     v-if="!membersSorted.length && companiesLoading"
@@ -69,14 +73,15 @@ import type { Member } from "@/dto/members";
 import MemberWithAvatar from "@/components/members/MemberWithAvatar.vue";
 import { DynamicScroller } from "vue-virtual-scroller";
 import { useInsertionSort, useSortByParticipationStatus } from "@/lib/utils";
-import { Skeleton } from "../ui/skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
 import CompanyWorkflowCard from "../cards/CompanyWorkflowCard.vue";
 import CreateCompanyDialogTrigger from "./CreateCompanyDialogTrigger.vue";
-import ParticipationChip from "@/components/ParticipationChip.vue";
 import { ref, computed, type ComputedRef } from "vue";
 import { ChevronDown } from "lucide-vue-next";
 import { useParticipationFilter } from "@/composables/useParticipationFilter";
-import type { ParticipationStatus } from "@/dto";
+import type { ObjectID, ParticipationStatus } from "@/dto";
+import ParticipationFilters from "@/components/ParticipationFilters.vue";
+import { useEventPackagesQuery } from "@/mutations/packages";
 
 const props = defineProps<{
   companies: Company[];
@@ -132,10 +137,15 @@ const participations = computed(() =>
 );
 
 const selectedStatus = ref<ParticipationStatus | null>(null);
+const selectedPackage = ref<ObjectID | null>(null);
+
+// Fetch packages for filter, pre-filtered by current event
+const { data: packages } = useEventPackagesQuery();
 
 const participationsFiltered = useParticipationFilter<CompanyWithParticipation>(
   participations as ComputedRef<Map<string, CompanyWithParticipation[]>>,
   selectedStatus,
+  selectedPackage,
 );
 
 // Track expanded/collapsed state per member. Default to expanded (true)
diff --git a/frontend/src/components/speakers/EditableSpeakerParticipation.vue b/frontend/src/components/speakers/EditableSpeakerParticipation.vue
index ebbfaa67..ef60fc82 100644
--- a/frontend/src/components/speakers/EditableSpeakerParticipation.vue
+++ b/frontend/src/components/speakers/EditableSpeakerParticipation.vue
@@ -6,35 +6,11 @@
           {{ getEventName(participation.event) }}
         </h4>
         <div class="flex items-center gap-2">
-          <Popover
-            :open="isStatusMenuOpen"
-            @update:open="isStatusMenuOpen = $event"
-          >
-            <PopoverTrigger as-child>
-              <Badge
-                :class="participationStatusColor[selectedStatus]?.background"
-                class="text-xs flex items-center gap-1 cursor-pointer"
-              >
-                {{ humanReadableParticipationStatus[selectedStatus] }}
-                <ChevronDown class="w-3 h-3" />
-              </Badge>
-            </PopoverTrigger>
-            <PopoverContent class="w-56 p-0">
-              <div class="flex flex-col">
-                <button
-                  v-for="(label, value) in humanReadableParticipationStatus"
-                  :key="value"
-                  :class="[
-                    'px-3 py-2 text-sm text-left hover:bg-accent cursor-pointer',
-                    selectedStatus === value && 'bg-accent',
-                  ]"
-                  @click="selectStatus(value as ParticipationStatus)"
-                >
-                  {{ label }}
-                </button>
-              </div>
-            </PopoverContent>
-          </Popover>
+          <ParticipationStatusBadge
+            :status="participation.status"
+            :entity-id="speakerId"
+            entity-type="speaker"
+          />
           <Button
             v-if="!isEditing"
             variant="outline"
@@ -44,18 +20,8 @@
             Edit
           </Button>
           <div v-else class="flex gap-2">
-            <Button
-              size="sm"
-              :disabled="isSaving || isStatusUpdating"
-              @click="saveChanges"
-            >
-              {{
-                isSaving
-                  ? "Saving..."
-                  : isStatusUpdating
-                    ? "Updating..."
-                    : "Save"
-              }}
+            <Button size="sm" :disabled="isSaving" @click="saveChanges">
+              {{ isSaving ? "Saving..." : "Save Changes" }}
             </Button>
             <Button variant="outline" size="sm" @click="cancelEditing">
               Cancel
@@ -192,10 +158,7 @@ import { ref, reactive } from "vue";
 import { useQuery } from "@pinia/colada";
 import { getAllEvents } from "@/api/events";
 import { getAllMembers } from "@/api/members";
-import {
-  useSpeakerParticipationMutation,
-  useSpeakerParticipationStatusMutation,
-} from "@/mutations/speakers";
+import { useSpeakerParticipationMutation } from "@/mutations/speakers";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -205,18 +168,8 @@ import type {
   SpeakerParticipation,
   UpdateSpeakerParticipationData,
 } from "@/dto/speakers";
-import {
-  humanReadableParticipationStatus,
-  type ParticipationStatus,
-  participationStatusColor,
-} from "@/dto";
 import Image from "../Image.vue";
-import { ChevronDown } from "lucide-vue-next";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import ParticipationStatusBadge from "@/components/ParticipationStatusBadge.vue";
 
 interface Props {
   participation: SpeakerParticipation;
@@ -226,9 +179,6 @@ interface Props {
 const props = defineProps<Props>();
 const isEditing = ref(false);
 const isSaving = ref(false);
-const isStatusMenuOpen = ref(false);
-const isStatusUpdating = ref(false);
-const selectedStatus = ref<ParticipationStatus>(props.participation.status);
 
 const editForm = reactive<UpdateSpeakerParticipationData>({
   member: props.participation.member,
@@ -251,15 +201,12 @@ const { data: membersData } = useQuery({
 });
 
 const updateMutation = useSpeakerParticipationMutation();
-const statusMutation = useSpeakerParticipationStatusMutation();
 
 updateMutation.speakerId.value = props.speakerId;
-statusMutation.speakerId.value = props.speakerId;
 
 const startEditing = () => {
   isEditing.value = true;
-  // Reset form and status to current values
-  selectedStatus.value = props.participation.status;
+  // Reset form to current values
   editForm.member = props.participation.member;
   editForm.feedback = props.participation.feedback;
   editForm.room = {
@@ -286,23 +233,6 @@ const saveChanges = async () => {
   }
 };
 
-const selectStatus = async (status: ParticipationStatus) => {
-  const previous = selectedStatus.value;
-  selectedStatus.value = status;
-  isStatusMenuOpen.value = false;
-
-  try {
-    isStatusUpdating.value = true;
-    statusMutation.speakerId.value = props.speakerId;
-    await statusMutation.mutate(status);
-  } catch (err) {
-    console.error("Failed to update participation status:", err);
-    selectedStatus.value = previous;
-  } finally {
-    isStatusUpdating.value = false;
-  }
-};
-
 const getEventName = (eventId: number) => {
   if (!eventsData.value?.data) return `Event ${eventId}`;
   const event = eventsData.value.data.find((e) => e.id === eventId);
diff --git a/frontend/src/components/speakers/MembersSpeakers.vue b/frontend/src/components/speakers/MembersSpeakers.vue
index 25bb73a1..9cca60e2 100644
--- a/frontend/src/components/speakers/MembersSpeakers.vue
+++ b/frontend/src/components/speakers/MembersSpeakers.vue
@@ -4,7 +4,7 @@
     <CreateSpeakerDialogTrigger />
   </div>
 
-  <ParticipationChip v-model:selected="selectedStatus" />
+  <ParticipationFilters v-model:selected="selectedStatus" />
 
   <div
     v-if="!membersSorted.length && speakersLoading"
@@ -69,14 +69,14 @@ import MemberWithAvatar from "@/components/members/MemberWithAvatar.vue";
 import { DynamicScroller } from "vue-virtual-scroller";
 import type { Speaker, SpeakerWithParticipation } from "@/dto/speakers";
 import { useInsertionSort, useSortByParticipationStatus } from "@/lib/utils";
-import { Skeleton } from "../ui/skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
 import SpeakerWorkflowCard from "../cards/SpeakerWorkflowCard.vue";
 import CreateSpeakerDialogTrigger from "./CreateSpeakerDialogTrigger.vue";
-import ParticipationChip from "@/components/ParticipationChip.vue";
 import { ref, computed, type ComputedRef } from "vue";
 import { ChevronDown } from "lucide-vue-next";
 import { useParticipationFilter } from "@/composables/useParticipationFilter";
 import type { ParticipationStatus } from "@/dto";
+import ParticipationFilters from "@/components/ParticipationFilters.vue";
 
 const props = defineProps<{
   speakers: Speaker[];
diff --git a/frontend/src/composables/useParticipationFilter.ts b/frontend/src/composables/useParticipationFilter.ts
index 166377a6..e0b7befe 100644
--- a/frontend/src/composables/useParticipationFilter.ts
+++ b/frontend/src/composables/useParticipationFilter.ts
@@ -1,24 +1,35 @@
 import { computed } from "vue";
 import type { Ref } from "vue";
-import type { ParticipationStatus } from "@/dto";
+import type { ObjectID, ParticipationStatus } from "@/dto";
 
-// Generic composable to filter a Map<string, T[]> by participation.status
+// Generic composable to filter a Map<string, T[]> by participation.status and optionally by package
 export function useParticipationFilter<
-  T extends { participation?: { status?: ParticipationStatus } },
+  T extends {
+    participation?: { status?: ParticipationStatus; package?: ObjectID };
+  },
 >(
   participations: Ref<Map<string, T[]> | undefined>,
   selectedStatus: Ref<ParticipationStatus | null>,
+  selectedPackage?: Ref<ObjectID | null>,
 ) {
   return computed(() => {
     if (!participations.value) return new Map<string, T[]>();
 
-    if (!selectedStatus.value) return participations.value;
+    const hasStatusFilter = !!selectedStatus.value;
+    const hasPackageFilter = !!selectedPackage?.value;
+
+    if (!hasStatusFilter && !hasPackageFilter) return participations.value;
 
     const map = new Map<string, T[]>();
     for (const [memberId, items] of participations.value.entries()) {
-      const filtered = items.filter(
-        (it) => it.participation?.status === selectedStatus.value,
-      );
+      const filtered = items.filter((it) => {
+        const matchesStatus =
+          !hasStatusFilter || it.participation?.status === selectedStatus.value;
+        const matchesPackage =
+          !hasPackageFilter ||
+          it.participation?.package === selectedPackage?.value;
+        return matchesStatus && matchesPackage;
+      });
       if (filtered.length) map.set(memberId, filtered);
     }
 
diff --git a/frontend/src/dto/packages.ts b/frontend/src/dto/packages.ts
index cbf4e257..5015391b 100644
--- a/frontend/src/dto/packages.ts
+++ b/frontend/src/dto/packages.ts
@@ -12,6 +12,11 @@ export interface Package {
   items: PackageItem[];
   price: number;
   vat: number;
+
+  /**
+   * Computed locally
+   */
+  event: string;
 }
 
 export interface PackageItemPublic {
diff --git a/frontend/src/mutations/companies.ts b/frontend/src/mutations/companies.ts
index 27a7834a..45d462e2 100644
--- a/frontend/src/mutations/companies.ts
+++ b/frontend/src/mutations/companies.ts
@@ -80,6 +80,7 @@ export const useCompanyParticipationStatusMutation = defineMutation(() => {
       updateCompanyParticipationStatus(companyId.value!, status),
     onSettled: () => {
       queryCache.invalidateQueries({ key: ["companies"] });
+      queryCache.invalidateQueries({ key: ["company", companyId.value!] });
       queryCache.invalidateQueries({ key: ["responsibilities"] });
     },
   });
diff --git a/frontend/src/mutations/packages.ts b/frontend/src/mutations/packages.ts
index 4f00f52a..3307fe2e 100644
--- a/frontend/src/mutations/packages.ts
+++ b/frontend/src/mutations/packages.ts
@@ -13,7 +13,9 @@ import {
   deletePackage,
   updatePackageItems,
 } from "@/api/packages";
-import type { PackageItem } from "@/dto/packages";
+import type { Package, PackageItem } from "@/dto/packages";
+import { useEventStore } from "@/stores/event";
+import { computed } from "vue";
 
 // Shared packages list query
 export const usePackagesQuery = (params?: Record<string, unknown>) =>
@@ -22,6 +24,44 @@ export const usePackagesQuery = (params?: Record<string, unknown>) =>
     query: () => getPackages(params),
   });
 
+// Extract "SINFO XX" event prefix from package name
+const extractEventName = (name: string) => {
+  const match = name.match(/^(SINFO\s*\d+)\s*/i);
+  return match ? match[1] : "";
+};
+
+// Remove "SINFO XX " prefix from package name
+const formatPackageName = (name: string) => {
+  return name.replace(/^SINFO\s*\d+\s*/i, "").trim();
+};
+
+// Packages query filtered by current event
+export const useEventPackagesQuery = () => {
+  const eventStore = useEventStore();
+  const eventName = computed(() => eventStore.selectedEvent?.name || "");
+
+  const query = useQuery({
+    key: () => ["packages", "event", eventName.value],
+    query: () => getPackages(),
+  });
+
+  const data = computed(() => {
+    if (!query.data.value || !eventName.value) return [];
+    return (query.data.value as Package[])
+      .filter((p) => String(p.name || "").startsWith(eventName.value))
+      .map((p) => ({
+        ...p,
+        name: formatPackageName(p.name),
+        event: extractEventName(p.name),
+      }));
+  });
+
+  return {
+    ...query,
+    data,
+  };
+};
+
 // Single package query by id
 export const usePackageQuery = (
   id: string | Ref<string | null | undefined> | null | undefined,
@@ -32,20 +72,29 @@ export const usePackageQuery = (
     (v as Record<string, unknown>) &&
     "value" in (v as Record<string, unknown>);
 
-  return useQuery({
+  const query = useQuery({
     key: () => [
       "package",
       isRef(id) ? (id as Ref<string | null | undefined>).value || "" : id || "",
     ],
     enabled: () =>
       isRef(id) ? !!(id as Ref<string | null | undefined>).value : !!id,
-    query: () =>
-      getPackageById(
+    query: async () => {
+      const pkg = await getPackageById(
         isRef(id)
           ? (id as Ref<string | null | undefined>).value!
           : (id as string)!,
-      ),
+      );
+      // Format the package name to remove "SINFO XX " prefix
+      return {
+        ...pkg,
+        name: formatPackageName(pkg.name),
+        event: extractEventName(pkg.name),
+      };
+    },
   });
+
+  return query;
 };
 
 export const useCreatePackageMutation = defineMutation(() => {
diff --git a/frontend/src/views/Dashboard/CoordinationTeams/CoordinatorTeamView.vue b/frontend/src/views/Dashboard/CoordinationTeams/CoordinatorTeamView.vue
index a73f39fd..f228f435 100644
--- a/frontend/src/views/Dashboard/CoordinationTeams/CoordinatorTeamView.vue
+++ b/frontend/src/views/Dashboard/CoordinationTeams/CoordinatorTeamView.vue
@@ -31,7 +31,7 @@
         </div>
       </div>
 
-      <ParticipationChip v-model:selected="selectedStatus" />
+      <ParticipationFilters v-model:selected="selectedStatus" />
 
       <TabsContent value="companies">
         <div v-if="isTeamsLoading || isMembersLoading" class="py-6 text-center">
@@ -214,7 +214,7 @@ import { DynamicScroller } from "vue-virtual-scroller";
 import MemberWithAvatar from "@/components/members/MemberWithAvatar.vue";
 import SpeakerWorkflowCard from "@/components/cards/SpeakerWorkflowCard.vue";
 import CompanyWorkflowCard from "@/components/cards/CompanyWorkflowCard.vue";
-import ParticipationChip from "@/components/ParticipationChip.vue";
+import ParticipationFilters from "@/components/ParticipationFilters.vue";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ChevronDown } from "lucide-vue-next";
 import { useInsertionSort, useSortByParticipationStatus } from "@/lib/utils";
diff --git a/frontend/src/views/Dashboard/Packages/PackagesView.vue b/frontend/src/views/Dashboard/Packages/PackagesView.vue
index 5dba67a4..d0b31340 100644
--- a/frontend/src/views/Dashboard/Packages/PackagesView.vue
+++ b/frontend/src/views/Dashboard/Packages/PackagesView.vue
@@ -35,14 +35,14 @@
         <div v-if="isLoading" class="text-muted-foreground">Loading...</div>
         <div v-else>
           <div
-            v-if="filtered.length === 0"
+            v-if="packages.length === 0"
             class="text-sm text-muted-foreground"
           >
             No packages for this event yet.
           </div>
           <div class="grid gap-4">
             <PackageCard
-              v-for="pkg in filtered"
+              v-for="pkg in packages"
               :key="pkg.id"
               :pkg="pkg"
               :event-name="eventName"
@@ -59,30 +59,20 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useEventStore } from "@/stores/event";
-import { usePackagesQuery } from "@/mutations/packages";
+import { useEventPackagesQuery } from "@/mutations/packages";
 import Card from "@/components/ui/card/Card.vue";
 import CardContent from "@/components/ui/card/CardContent.vue";
 import PackageForm from "@/components/packages/PackageForm.vue";
 import PackageCard from "@/components/packages/PackageCard.vue";
-import type { Package } from "@/dto/packages";
 
 const eventStore = useEventStore();
 const eventName = computed(() => eventStore.selectedEvent?.name || "");
 
-const { data: packagesData, refetch, isLoading } = usePackagesQuery();
-
-const filtered = computed(() => {
-  if (!packagesData.value || !eventName.value) return [];
-  return (packagesData.value as Package[]).filter((p) =>
-    String(p.name || "").startsWith(eventName.value),
-  );
-});
+const { data: packages, refetch, isLoading } = useEventPackagesQuery();
 
 const refetchPackages = async () => {
   await refetch();
 };
 
 const onCreated = () => refetchPackages();
-
-// export filtered
 </script>