diff --git a/frontend/src/components/members/MemberSelect.vue b/frontend/src/components/members/MemberSelect.vue
index 60e69e9c..5bdd734d 100644
--- a/frontend/src/components/members/MemberSelect.vue
+++ b/frontend/src/components/members/MemberSelect.vue
@@ -51,9 +51,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { useQuery } from "@pinia/colada";
-import { getAllMembers } from "@/api/members";
+import { getAllMembers, getMemberRole } from "@/api/members";
+import type { TeamRole } from "@/dto/teams";
 import {
   Select,
   SelectContent,
@@ -70,6 +71,7 @@ interface Props {
   placeholder?: string;
   disabled?: boolean;
   eventId?: number;
+  roleFilter?: TeamRole; // Filter members by role
 }
 
 const props = defineProps<Props>();
@@ -85,10 +87,55 @@ const { data: membersData } = useQuery({
   query: () => getAllMembers({ event: props.eventId }),
 });
 
+// Store member roles when filtering by role
+const memberRoles = ref<Record<string, TeamRole>>({});
+const loadingRoles = ref(false);
+
+// Fetch roles for all members when roleFilter is provided
+watch(
+  () => [membersData.value, props.roleFilter] as const,
+  async ([data, roleFilter]) => {
+    if (!data?.data || !roleFilter) {
+      memberRoles.value = {};
+      return;
+    }
+
+    loadingRoles.value = true;
+    const roles: Record<string, TeamRole> = {};
+
+    try {
+      await Promise.all(
+        data.data.map(async (member) => {
+          try {
+            const response = await getMemberRole(member.id);
+            if (response.data?.role) {
+              roles[member.id] = response.data.role as TeamRole;
+            }
+          } catch {
+            // Member might not have a role, skip
+          }
+        }),
+      );
+    } finally {
+      memberRoles.value = roles;
+      loadingRoles.value = false;
+    }
+  },
+  { immediate: true },
+);
+
 const sortedMembers = computed(() => {
   if (!membersData.value?.data) return [];
 
-  const members = membersData.value.data;
+  let members = membersData.value.data;
+
+  // Filter by role if specified
+  if (props.roleFilter && !loadingRoles.value) {
+    members = members.filter(
+      (member) => memberRoles.value[member.id] === props.roleFilter,
+    );
+  }
+
   return members.sort((a, b) =>
     a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
   );
diff --git a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
index fe0b5a6c..aa8a32a9 100644
--- a/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
+++ b/frontend/src/views/Dashboard/CoordinationTeams/CoordinationTeamsView.vue
@@ -1,185 +1,336 @@
 <template>
-  <div class="p-4">
-    <Card>
-      <CardHeader>
-        <CardTitle>Coordination Teams</CardTitle>
-        <CardDescription
-          >Manage coordination teams and their mappings</CardDescription
-        >
+  <div class="max-w-7xl mx-auto p-4 sm:p-6">
+    <div class="mb-6 sm:mb-8">
+      <h1 class="text-2xl sm:text-3xl font-bold mb-2">Coordination Teams</h1>
+      <p class="text-sm sm:text-base text-muted-foreground">
+        Manage coordination teams and assign members to coordinators
+      </p>
+    </div>
+
+    <!-- Create new team -->
+    <Card
+      class="mb-6 sm:mb-8 border-2 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <CardHeader class="pb-3 sm:pb-4">
+        <CardTitle class="text-lg sm:text-xl">Create New Team</CardTitle>
+        <p class="text-xs sm:text-sm text-muted-foreground mt-1">
+          Select a coordinator to create their team
+        </p>
       </CardHeader>
       <CardContent>
-        <div
-          class="mb-4 flex flex-col sm:flex-row gap-2 items-start sm:items-center"
-        >
-          <div class="flex flex-col w-full sm:w-auto">
-            <label class="text-sm text-zinc-700 mb-1">Coordinator</label>
+        <div class="flex flex-col sm:flex-row gap-4 items-end">
+          <div class="flex-1 w-full">
+            <label class="text-sm font-semibold mb-2 block text-foreground"
+              >Select Coordinator</label
+            >
             <MemberSelect
               v-model="newCoordinator"
               :event-id="selectedEventId"
+              placeholder="Choose a coordinator..."
+              role-filter="COORDINATOR"
             />
           </div>
-          <div class="w-full sm:w-auto">
-            <Button
-              class="w-full sm:w-auto"
-              :disabled="creating || !newCoordinator"
-              @click="createTeam"
-              >Create</Button
-            >
-          </div>
-        </div>
-
-        <div v-if="isLoading" class="py-6 text-center">Loading…</div>
-
-        <div v-else-if="teams.length === 0" class="text-zinc-500">
-          No coordination teams yet.
+          <Button
+            class="w-full sm:w-auto px-6 h-10"
+            :disabled="creating || !newCoordinator"
+            @click="createTeam"
+          >
+            <span v-if="creating" class="flex items-center gap-2">
+              <Loader2 :size="16" class="animate-spin" />
+              Creating...
+            </span>
+            <span v-else>Create Team</span>
+          </Button>
         </div>
+      </CardContent>
+    </Card>
 
-        <ul>
-          <li v-for="t in teams" :key="t.id" class="mb-4">
-            <Card class="p-3">
+    <!-- Loading state -->
+    <div
+      v-if="isLoading"
+      class="flex flex-col items-center justify-center py-20"
+    >
+      <Loader2 :size="48" class="animate-spin text-primary" />
+      <p class="mt-4 text-muted-foreground font-medium">Loading teams...</p>
+    </div>
+
+    <!-- Empty state -->
+    <div
+      v-else-if="teams.length === 0"
+      class="flex flex-col items-center justify-center py-20 px-4 border-2 border-dashed rounded-xl bg-muted/30"
+    >
+      <div
+        class="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4"
+      >
+        <Users :size="32" class="text-muted-foreground" />
+      </div>
+      <p class="text-muted-foreground text-lg font-medium">
+        No coordination teams yet
+      </p>
+      <p class="text-sm text-muted-foreground mt-2">
+        Create your first team above to get started
+      </p>
+    </div>
+
+    <!-- Teams grid -->
+    <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <Card
+        v-for="team in teams"
+        :key="team.id"
+        class="overflow-hidden hover:shadow-lg transition-shadow border-2"
+      >
+        <CardHeader class="border-b-2 pb-4">
+          <div class="flex items-start justify-between gap-2 sm:gap-4">
+            <div class="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
               <div
-                class="flex flex-col md:flex-row justify-between items-start gap-4"
+                class="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-white shadow-md flex items-center justify-center flex-shrink-0 ring-2 ring-indigo-100"
               >
-                <div class="flex-1">
-                  <div class="flex items-center gap-2">
-                    <Image
-                      v-if="t.coordinator && membersCache[t.coordinator.member]"
-                      :src="(membersCache[t.coordinator.member] as any)?.img"
-                      :alt="
-                        (membersCache[t.coordinator.member] as any)?.name ||
-                        'coordinator'
-                      "
-                      class="w-6 h-6 rounded-full object-cover border"
-                    />
-                    <div class="font-semibold">{{ t.name }}'s Team</div>
-                  </div>
-                  <div class="text-sm text-zinc-600">Coordinated members:</div>
-                  <ul class="mt-2">
-                    <li
-                      v-for="mId in t.coordinatedMembers"
-                      :key="mId"
-                      class="flex items-center gap-2"
-                    >
-                      <div class="flex items-center gap-2">
-                        <MemberWithAvatar
-                          v-if="membersCache[mId]"
-                          :member="membersCache[mId] as any"
-                          size="sm"
-                        />
-                        <div v-else class="text-sm text-zinc-700">
-                          {{ mId }}
-                        </div>
-                      </div>
-                      <Popover
-                        v-model:open="removeConfirmOpen[t.id + '_' + mId]"
-                      >
-                        <PopoverTrigger as-child>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            :disabled="removing[t.id + '_' + mId]"
-                          >
-                            {{
-                              removing[t.id + "_" + mId]
-                                ? "Removing..."
-                                : "Remove"
-                            }}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent class="w-80">
-                          <ConfirmDelete
-                            title="Remove member"
-                            message="Remove this member from the coordination team?"
-                            :is-deleting="removing[t.id + '_' + mId]"
-                            @cancel="
-                              removeConfirmOpen[t.id + '_' + mId] = false
-                            "
-                            @confirm="removeMemberConfirm(t, mId)"
-                          />
-                        </PopoverContent>
-                      </Popover>
-                    </li>
-                  </ul>
-
-                  <div class="mt-3 grid grid-cols-1 gap-2">
-                    <div class="flex gap-2 items-center">
-                      <MemberSelect
-                        v-model="selectedTeamToAdd[t.id]"
-                        :event-id="selectedEventId"
-                      />
-                      <Button
-                        :disabled="adding[t.id]"
-                        @click="addCoordinatedTeamFor(t)"
-                        >Add</Button
-                      >
-                    </div>
-                  </div>
-                </div>
-
-                <div
-                  class="flex-shrink-0 mt-3 md:mt-0 md:ml-4 w-full md:w-auto"
+                <Image
+                  v-if="team.coordinator && membersMap[team.coordinator.member]"
+                  :src="membersMap[team.coordinator.member]?.img"
+                  :alt="
+                    membersMap[team.coordinator.member]?.name || 'Coordinator'
+                  "
+                  class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover"
+                />
+                <span
+                  v-else
+                  class="text-xl sm:text-2xl font-bold text-indigo-600 select-none"
+                  >{{ team.name.charAt(0).toUpperCase() }}</span
                 >
-                  <div
-                    class="flex flex-col md:flex-row gap-2 items-stretch md:items-center"
+              </div>
+              <div class="min-w-0 flex-1">
+                <CardTitle class="text-lg sm:text-xl font-bold truncate">{{
+                  team.name
+                }}</CardTitle>
+                <p
+                  v-if="team.coordinator && membersMap[team.coordinator.member]"
+                  class="text-sm text-muted-foreground"
+                >
+                  Coordinator:
+                  {{ membersMap[team.coordinator.member]?.name }}
+                </p>
+              </div>
+            </div>
+            <div class="flex gap-1 flex-shrink-0">
+              <Button
+                size="sm"
+                variant="ghost"
+                class="hover:bg-white/80 hidden sm:flex"
+                @click="openEdit(team)"
+              >
+                <PencilLine :size="16" />
+                <span class="ml-1.5">Edit</span>
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                class="hover:bg-white/80 sm:hidden p-2"
+                @click="openEdit(team)"
+              >
+                <PencilLine :size="16" />
+              </Button>
+              <Popover v-model:open="deleteConfirmOpen[team.id]">
+                <PopoverTrigger as-child>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    class="text-red-600 hover:text-red-700 hover:bg-red-50 p-2"
                   >
+                    <Trash2 :size="16" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent class="w-80">
+                  <ConfirmDelete
+                    title="Delete coordination team"
+                    message="Are you sure you want to delete this coordination team? This action cannot be undone."
+                    :is-deleting="deleting[team.id]"
+                    @cancel="deleteConfirmOpen[team.id] = false"
+                    @confirm="deleteTeamConfirm(team)"
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent>
+          <!-- Members list -->
+          <div class="mb-5">
+            <div class="flex items-center justify-between mb-4">
+              <h4
+                class="text-sm font-bold text-foreground flex items-center gap-2"
+              >
+                <Users :size="16" />
+                Team Members
+              </h4>
+              <span
+                class="px-3 py-1 bg-indigo-100 text-indigo-700 text-xs font-bold rounded-full"
+                >{{ team.coordinatedMembers?.length || 0 }}</span
+              >
+            </div>
+            <div
+              v-if="team.coordinatedMembers?.length"
+              class="space-y-2 max-h-72 overflow-y-auto pr-2"
+            >
+              <div
+                v-for="memberId in team.coordinatedMembers"
+                :key="memberId"
+                class="flex items-center justify-between p-2 sm:p-3 rounded-lg hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 transition-all border border-transparent hover:border-indigo-100 group"
+              >
+                <div class="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
+                  <Image
+                    v-if="membersMap[memberId]"
+                    :src="membersMap[memberId]?.img"
+                    :alt="membersMap[memberId]?.name || 'Member'"
+                    class="w-8 h-8 sm:w-10 sm:h-10 rounded-full object-cover border-2 border-gray-200 group-hover:border-indigo-300 transition-colors flex-shrink-0"
+                  />
+                  <span
+                    v-if="membersMap[memberId]"
+                    class="truncate text-sm sm:text-base font-medium text-foreground"
+                    >{{ membersMap[memberId]?.name }}</span
+                  >
+                  <span
+                    v-else
+                    class="text-sm text-muted-foreground italic truncate"
+                    >{{ memberId }}</span
+                  >
+                </div>
+                <Popover
+                  v-model:open="removeConfirmOpen[team.id + '_' + memberId]"
+                >
+                  <PopoverTrigger as-child>
                     <Button
-                      class="w-full md:w-auto"
-                      variant="outline"
-                      @click="openEdit(t)"
-                      >Edit</Button
+                      size="sm"
+                      variant="ghost"
+                      class="flex-shrink-0 text-red-600 hover:text-red-700 hover:bg-red-50 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
+                      :disabled="removing[team.id + '_' + memberId]"
                     >
-                    <Popover v-model:open="deleteConfirmOpen[t.id]">
-                      <PopoverTrigger as-child>
-                        <Button class="w-full md:w-auto" variant="destructive"
-                          >Delete</Button
-                        >
-                      </PopoverTrigger>
-                      <PopoverContent class="w-80">
-                        <ConfirmDelete
-                          title="Delete coordination team"
-                          message="Are you sure you want to delete this coordination team? This action cannot be undone."
-                          :is-deleting="deleting[t.id]"
-                          @cancel="deleteConfirmOpen[t.id] = false"
-                          @confirm="deleteTeamConfirm(t)"
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
+                      <X :size="16" />
+                      <span class="ml-1 hidden sm:inline">{{
+                        removing[team.id + "_" + memberId]
+                          ? "Removing..."
+                          : "Remove"
+                      }}</span>
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent class="w-80">
+                    <ConfirmDelete
+                      title="Remove member"
+                      message="Remove this member from the coordination team?"
+                      :is-deleting="removing[team.id + '_' + memberId]"
+                      @cancel="
+                        removeConfirmOpen[team.id + '_' + memberId] = false
+                      "
+                      @confirm="removeMemberConfirm(team, memberId)"
+                    />
+                  </PopoverContent>
+                </Popover>
               </div>
-            </Card>
-          </li>
-        </ul>
-
-        <div
-          v-if="editing"
-          class="fixed inset-0 bg-black/40 flex items-center justify-center"
-        >
-          <Card class="w-full max-w-md p-6">
-            <h2 class="font-bold mb-3">Edit {{ editing.name }} Team</h2>
-            <div class="mb-3">
-              <label class="text-sm text-zinc-700 mb-1 block">Team name</label>
-              <Input v-model="editingName" />
             </div>
-            <div class="mb-3">
-              <label class="text-sm text-zinc-700 mb-1 block"
-                >Coordinator</label
-              >
+            <div
+              v-else
+              class="flex flex-col items-center justify-center py-8 px-4 border-2 border-dashed rounded-lg bg-blue-50/30"
+            >
+              <Users :size="40" class="text-indigo-300 mb-2" />
+              <p class="text-sm text-muted-foreground font-medium">
+                No members assigned yet
+              </p>
+              <p class="text-xs text-muted-foreground mt-1">
+                Add members below
+              </p>
+            </div>
+          </div>
+
+          <!-- Add member -->
+          <div class="border-t-2 pt-4 sm:pt-5 mt-4 sm:mt-5">
+            <h4
+              class="text-sm font-bold text-foreground mb-3 flex items-center gap-2"
+            >
+              <Plus :size="16" />
+              Add Member
+            </h4>
+            <div class="flex flex-col sm:flex-row gap-3">
               <MemberSelect
-                v-model="editingCoordinator"
+                v-model="selectedTeamToAdd[team.id]"
                 :event-id="selectedEventId"
+                placeholder="Select a member..."
+                class="flex-1"
               />
-            </div>
-            <div class="flex gap-2 justify-end">
-              <Button variant="outline" @click="closeEdit">Cancel</Button>
-              <Button :disabled="saving || savingEdit" @click="saveEdit"
-                >Save</Button
+              <Button
+                class="px-6 w-full sm:w-auto"
+                :disabled="adding[team.id] || !selectedTeamToAdd[team.id]"
+                @click="addCoordinatedTeamFor(team)"
               >
+                <span v-if="adding[team.id]" class="flex items-center gap-2">
+                  <Loader2 :size="16" class="animate-spin" />
+                  Adding...
+                </span>
+                <span v-else class="flex items-center gap-1.5">
+                  <Plus :size="16" />
+                  Add
+                </span>
+              </Button>
             </div>
-          </Card>
-        </div>
-      </CardContent>
-    </Card>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Edit modal -->
+    <div
+      v-if="editing"
+      class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
+      @click.self="closeEdit"
+    >
+      <Card class="w-full max-w-md shadow-2xl">
+        <CardHeader class="border-b bg-gradient-to-r from-blue-50 to-indigo-50">
+          <CardTitle class="text-2xl">Edit Team</CardTitle>
+          <p class="text-sm text-muted-foreground mt-1">
+            Update {{ editing.name }}'s team information
+          </p>
+        </CardHeader>
+        <CardContent class="space-y-5 pt-6">
+          <div>
+            <label class="text-sm font-semibold mb-2 block text-foreground"
+              >Team Name</label
+            >
+            <Input
+              v-model="editingName"
+              placeholder="Enter team name"
+              class="h-11"
+            />
+          </div>
+          <div>
+            <label class="text-sm font-semibold mb-2 block text-foreground"
+              >Coordinator</label
+            >
+            <MemberSelect
+              v-model="editingCoordinator"
+              :event-id="selectedEventId"
+              placeholder="Select coordinator..."
+              role-filter="COORDINATOR"
+            />
+          </div>
+          <div class="flex gap-3 justify-end pt-4 border-t">
+            <Button variant="outline" class="px-6" @click="closeEdit"
+              >Cancel</Button
+            >
+            <Button
+              class="px-6"
+              :disabled="saving || savingEdit"
+              @click="saveEdit"
+            >
+              <span v-if="savingEdit" class="flex items-center gap-2">
+                <Loader2 :size="16" class="animate-spin" />
+                Saving...
+              </span>
+              <span v-else>Save Changes</span>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   </div>
 </template>
 
@@ -192,13 +343,18 @@ import {
   getAllCoordinationTeams,
   createCoordinationTeam,
   updateCoordinationTeamName,
+  addCoordinatedTeam,
+  setCoordinator,
+  deleteCoordinationTeam,
+  removeCoordinatedTeam,
 } from "@/api/coordinationTeams";
+import { getAllMembers, getMemberRole } from "@/api/members";
+import { Users, PencilLine, Trash2, X, Plus, Loader2 } from "lucide-vue-next";
 
 import Card from "@/components/ui/card/Card.vue";
 import CardContent from "@/components/ui/card/CardContent.vue";
 import CardHeader from "@/components/ui/card/CardHeader.vue";
 import CardTitle from "@/components/ui/card/CardTitle.vue";
-import CardDescription from "@/components/ui/card/CardDescription.vue";
 import Button from "@/components/ui/button/Button.vue";
 import Input from "@/components/ui/input/Input.vue";
 import {
@@ -208,19 +364,33 @@ import {
 } from "@/components/ui/popover";
 import ConfirmDelete from "@/components/ConfirmDelete.vue";
 import Image from "@/components/Image.vue";
-import MemberWithAvatar from "@/components/members/MemberWithAvatar.vue";
+import MemberSelect from "@/components/members/MemberSelect.vue";
 import { useToast } from "@/lib/toast";
 
 const queryCache = useQueryCache();
+const { toast } = useToast();
+const eventStore = useEventStore();
 
 const newCoordinator = ref<string | undefined>(undefined);
 const editing = ref<CoordinationTeam | null>(null);
 const editingName = ref("");
-// coordinator being edited in the modal and original for change detection
 const editingCoordinator = ref<string | undefined>(undefined);
 const editingOriginalCoordinator = ref<string | undefined>(undefined);
 const savingEdit = ref(false);
 
+const selectedEventId = ref<number | undefined>(
+  eventStore.selectedEvent?.id ?? undefined,
+);
+
+watch(
+  () => eventStore.selectedEvent,
+  (newEvent) => {
+    selectedEventId.value = newEvent?.id ?? undefined;
+  },
+  { immediate: true },
+);
+
+// Fetch all teams
 const { data, isLoading } = useQuery({
   key: ["coordinationTeams"],
   query: () => getAllCoordinationTeams(),
@@ -228,38 +398,74 @@ const { data, isLoading } = useQuery({
 
 const teams = computed(() => data.value?.data || []);
 
+// Fetch all members once for the event
+const { data: membersData } = useQuery({
+  key: () => ["members", `${selectedEventId.value}`],
+  query: () => getAllMembers({ event: selectedEventId.value }),
+});
+
+// Create a map of member ID -> member for quick lookups
+const membersMap = computed(() => {
+  if (!membersData.value?.data) return {};
+  return membersData.value.data.reduce(
+    (acc, member) => {
+      acc[member.id] = member;
+      return acc;
+    },
+    {} as Record<string, { id: string; name: string; img: string }>,
+  );
+});
+
+// Mutations
 const { mutate: createMutate, isLoading: creating } = useMutation({
   mutation: (variables: { coordinator: string }) =>
     createCoordinationTeam({ coordinator: variables.coordinator }),
   onSuccess: () => {
     queryCache.invalidateQueries({ key: ["coordinationTeams"] });
     newCoordinator.value = undefined;
+    toast.success({
+      title: "Team created",
+      description: "Coordination team created successfully",
+    });
+  },
+  onError: (error: Error | unknown) => {
+    const errorMessage =
+      error instanceof Error && "response" in error
+        ? (error as { response?: { data?: { message?: string } } }).response
+            ?.data?.message
+        : "An error occurred";
+    toast.error({
+      title: "Failed to create team",
+      description: errorMessage || "An error occurred",
+    });
   },
 });
 
 const { mutate: updateMutate, isLoading: saving } = useMutation({
   mutation: (variables: { id: string; data: { name: string } }) =>
     updateCoordinationTeamName(variables.id, variables.data),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Team updated",
+      description: "Team name updated successfully",
+    });
+  },
 });
 
 const createTeam = async () => {
   if (!newCoordinator.value) return;
   try {
-    // validate selected member is a coordinator in the current event
     const roleRes = await getMemberRole(newCoordinator.value);
     if (roleRes.data?.role !== "COORDINATOR") {
       toast.error({
-        title: "Selected member is not a coordinator",
-        description: "Please pick a coordinator.",
+        title: "Invalid selection",
+        description: "Selected member is not a coordinator",
       });
       return;
     }
   } catch {
-    // If role check fails, log and attempt create — server will return a clear error
-    console.warn(
-      "Could not validate member role before creating coordination team",
-    );
+    console.warn("Could not validate member role before creating team");
   }
 
   createMutate({ coordinator: newCoordinator.value });
@@ -268,7 +474,6 @@ const createTeam = async () => {
 const openEdit = (t: CoordinationTeam) => {
   editing.value = t;
   editingName.value = t.name;
-  // prefill coordinator selection in the edit modal
   editingCoordinator.value = t.coordinator?.member;
   editingOriginalCoordinator.value = t.coordinator?.member;
 };
@@ -280,100 +485,36 @@ const closeEdit = () => {
   editingOriginalCoordinator.value = undefined;
 };
 
-// (variables returned from hooks above are directly usable in the template)
-import MemberSelect from "@/components/members/MemberSelect.vue";
-import {
-  addCoordinatedTeam,
-  setCoordinator,
-  deleteCoordinationTeam,
-  removeCoordinatedTeam,
-} from "@/api/coordinationTeams";
-import { getMemberById, getMemberRole } from "@/api/members";
-
-// selected maps and per-team loading states
+// State management
 const selectedTeamToAdd = reactive<Record<string, string | undefined>>({});
 const adding = reactive<Record<string, boolean>>({});
 const removing = reactive<Record<string, boolean>>({});
 const deleting = reactive<Record<string, boolean>>({});
-
-// popover open state maps (keyed by `${teamId}_${memberId}` for removes)
 const removeConfirmOpen = reactive<Record<string, boolean>>({});
 const deleteConfirmOpen = reactive<Record<string, boolean>>({});
 
-// cached member shape used in this view (subset of Member)
-type CachedMember = { id: string; name?: string; img?: string };
-
-// cache of fetched member objects by id
-const membersCache = reactive<Record<string, CachedMember | null>>({});
-
-// load member details for any member ids present in teams
-const loadMembersForTeams = async () => {
-  if (!teams.value) return;
-  for (const t of teams.value) {
-    if (!t.coordinatedMembers) continue;
-    for (const mid of t.coordinatedMembers) {
-      if (!mid) continue;
-      if (membersCache[mid]) continue;
-      try {
-        const res = await getMemberById(mid);
-        membersCache[mid] = {
-          id: res.data.id,
-          name: res.data.name,
-          img: res.data.img,
-        };
-      } catch {
-        membersCache[mid] = null;
-      }
-    }
-    // also add coordinator member details
-    if (t.coordinator && t.coordinator.member) {
-      const c = t.coordinator.member;
-      if (c && !membersCache[c]) {
-        try {
-          const res = await getMemberById(c);
-          membersCache[c] = {
-            id: res.data.id,
-            name: res.data.name,
-            img: res.data.img,
-          };
-        } catch {
-          membersCache[c] = null;
-        }
-      }
-    }
-  }
-};
-
-watch(teams, () => {
-  loadMembersForTeams();
-});
-
-const eventStore = useEventStore();
-const selectedEventId = ref<number | undefined>(
-  eventStore.selectedEvent?.id ?? undefined,
-);
-const { toast } = useToast();
-
-// Keep selectedEventId in sync with global selectedEvent
-watch(
-  () => eventStore.selectedEvent,
-  (newEvent) => {
-    const newId = newEvent?.id ?? undefined;
-    if (selectedEventId.value !== newId) selectedEventId.value = newId;
-  },
-  { immediate: true },
-);
-
 const { mutate: addCoordinatedMutate } = useMutation({
   mutation: (vars: { id: string; memberId: string }) =>
     addCoordinatedTeam(vars.id, { member: vars.memberId }),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Member added",
+      description: "Member added to team successfully",
+    });
+  },
 });
 
 const { mutate: setCoordinatorMutate } = useMutation({
   mutation: (vars: { id: string; memberId: string }) =>
     setCoordinator(vars.id, { member: vars.memberId }),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Coordinator updated",
+      description: "Team coordinator updated successfully",
+    });
+  },
 });
 
 const addCoordinatedTeamFor = async (t: CoordinationTeam) => {
@@ -383,33 +524,19 @@ const addCoordinatedTeamFor = async (t: CoordinationTeam) => {
   try {
     addCoordinatedMutate({ id: t.id, memberId });
     selectedTeamToAdd[t.id] = undefined;
-    // optimistic fetch of the member for UI
-    try {
-      const res = await getMemberById(memberId);
-      membersCache[memberId] = {
-        id: res.data.id,
-        name: res.data.name,
-        img: res.data.img,
-      };
-    } catch {
-      membersCache[memberId] = null;
-    }
   } finally {
     adding[t.id] = false;
   }
 };
 
-// save edited team name and (optionally) coordinator
 const saveEdit = async () => {
   if (!editing.value) return;
   savingEdit.value = true;
   try {
-    // update name if it changed
     if (editingName.value !== editing.value.name) {
       updateMutate({ id: editing.value.id, data: { name: editingName.value } });
     }
 
-    // if coordinator changed, validate and set
     if (
       editingCoordinator.value !== editingOriginalCoordinator.value &&
       editingCoordinator.value
@@ -418,33 +545,20 @@ const saveEdit = async () => {
         const roleRes = await getMemberRole(editingCoordinator.value);
         if (roleRes.data?.role !== "COORDINATOR") {
           toast.error({
-            title: "Selected member is not a coordinator",
-            description: "Please pick a coordinator.",
+            title: "Invalid selection",
+            description: "Selected member is not a coordinator",
           });
           savingEdit.value = false;
           return;
         }
       } catch {
-        console.warn(
-          "Could not validate member role before assigning coordinator",
-        );
+        console.warn("Could not validate member role");
       }
 
       setCoordinatorMutate({
         id: editing.value.id,
         memberId: editingCoordinator.value,
       });
-      // optimistic fetch for UI
-      try {
-        const res = await getMemberById(editingCoordinator.value);
-        membersCache[editingCoordinator.value] = {
-          id: res.data.id,
-          name: res.data.name,
-          img: res.data.img,
-        };
-      } catch {
-        membersCache[editingCoordinator.value] = null;
-      }
     }
   } finally {
     savingEdit.value = false;
@@ -452,27 +566,38 @@ const saveEdit = async () => {
   }
 };
 
-// remove a coordinated member
 const { mutate: removeCoordinatedMutate } = useMutation({
   mutation: (vars: { id: string; memberId: string }) =>
     removeCoordinatedTeam(vars.id, vars.memberId),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Member removed",
+      description: "Member removed from team successfully",
+    });
+  },
 });
 
 const removeMemberConfirm = async (t: CoordinationTeam, memberId: string) => {
+  const key = `${t.id}_${memberId}`;
   try {
-    removing[`${t.id}_${memberId}`] = true;
+    removing[key] = true;
     removeCoordinatedMutate({ id: t.id, memberId });
   } finally {
-    removing[`${t.id}_${memberId}`] = false;
-    removeConfirmOpen[`${t.id}_${memberId}`] = false;
+    removing[key] = false;
+    removeConfirmOpen[key] = false;
   }
 };
 
-// delete a coordination team
 const { mutate: deleteMutate } = useMutation({
   mutation: (id: string) => deleteCoordinationTeam(id),
-  onSuccess: () => queryCache.invalidateQueries({ key: ["coordinationTeams"] }),
+  onSuccess: () => {
+    queryCache.invalidateQueries({ key: ["coordinationTeams"] });
+    toast.success({
+      title: "Team deleted",
+      description: "Coordination team deleted successfully",
+    });
+  },
 });
 
 const deleteTeamConfirm = async (t: CoordinationTeam) => {
@@ -485,5 +610,3 @@ const deleteTeamConfirm = async (t: CoordinationTeam) => {
   }
 };
 </script>
-
-<style scoped></style>