diff --git a/app/Http/Controllers/NotificationController.php b/app/Http/Controllers/NotificationController.php
index 01e0626..7bd6943 100644
--- a/app/Http/Controllers/NotificationController.php
+++ b/app/Http/Controllers/NotificationController.php
@@ -7,6 +7,7 @@
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Illuminate\Http\Response;
 use Illuminate\Notifications\DatabaseNotification;
 
 class NotificationController extends Controller
@@ -20,7 +21,7 @@ public function index(Request $request): JsonResponse
         );
     }
 
-    public function markAsRead(Request $request, DatabaseNotification $notification): RedirectResponse
+    public function markAsRead(Request $request, DatabaseNotification $notification): RedirectResponse|Response
     {
         abort_unless(
             $notification->notifiable()->whereKey($request->user()->getKey())->exists(),
@@ -29,6 +30,10 @@ public function markAsRead(Request $request, DatabaseNotification $notification)
 
         $notification->markAsRead();
 
+        if ($request->wantsJson()) {
+            return response()->noContent();
+        }
+
         return back();
     }
 
diff --git a/app/Http/Resources/EventIndexResource.php b/app/Http/Resources/EventIndexResource.php
index 4a5e2aa..8ffcaf0 100644
--- a/app/Http/Resources/EventIndexResource.php
+++ b/app/Http/Resources/EventIndexResource.php
@@ -14,12 +14,19 @@ class EventIndexResource extends JsonResource
      */
     public function toArray(Request $request): array
     {
+        $isDeclined = false;
+        if ($this->relationLoaded('attendees')) {
+            $currentUserAttendee = $this->attendees->firstWhere('id', $request->user()?->id);
+            $isDeclined = $currentUserAttendee?->pivot?->participation_status === 'declined';
+        }
+
         return [
             'id' => $this->id,
             'title' => $this->title,
             'start_at' => $this->start_at?->toIso8601String(),
             'end_at' => $this->end_at?->toIso8601String(),
             'has_video' => $this->has_video,
+            'is_declined' => $isDeclined,
         ];
     }
 }
diff --git a/app/Http/Resources/EventResource.php b/app/Http/Resources/EventResource.php
index 41a9238..a455a42 100644
--- a/app/Http/Resources/EventResource.php
+++ b/app/Http/Resources/EventResource.php
@@ -26,6 +26,13 @@ public function toArray(Request $request): array
             'room_name' => $this->room_name,
             'has_video' => $this->has_video,
             'status' => $this->status,
+            'user_participation_status' => $this->whenLoaded('attendees', function () use ($request) {
+                if ($this->organizer_id === $request->user()?->id) {
+                    return 'accepted';
+                }
+
+                return $this->attendees->firstWhere('id', $request->user()?->id)?->pivot?->participation_status;
+            }),
             'organizer' => $this->whenLoaded('organizer', fn () => [
                 'id' => $this->organizer->id,
                 'name' => $this->organizer->name,
@@ -34,6 +41,7 @@ public function toArray(Request $request): array
                 ->map(fn ($attendee) => [
                     'id' => $attendee->id,
                     'name' => $attendee->name,
+                    'participation_status' => $attendee->pivot?->participation_status,
                 ])->values()),
         ];
     }
diff --git a/app/Http/Resources/NotificationResource.php b/app/Http/Resources/NotificationResource.php
index dad7d01..174e206 100644
--- a/app/Http/Resources/NotificationResource.php
+++ b/app/Http/Resources/NotificationResource.php
@@ -3,6 +3,8 @@
 namespace App\Http\Resources;
 
 use App\Notifications\EventInvitation;
+use App\Notifications\TaskAssigned;
+use App\Notifications\TaskCommented;
 use Illuminate\Contracts\Pagination\LengthAwarePaginator;
 use Illuminate\Http\Request;
 use Illuminate\Http\Resources\Json\JsonResource;
@@ -19,6 +21,8 @@ class NotificationResource extends JsonResource
      */
     private const TYPE_ALIASES = [
         EventInvitation::class => 'event_invitation',
+        TaskAssigned::class => 'task_assigned',
+        TaskCommented::class => 'task_commented',
     ];
 
     /**
diff --git a/app/Jobs/NotifyEventInvitees.php b/app/Jobs/NotifyEventInvitees.php
new file mode 100644
index 0000000..0ec81c1
--- /dev/null
+++ b/app/Jobs/NotifyEventInvitees.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Jobs;
+
+use App\Models\Event;
+use App\Models\User;
+use App\Notifications\EventInvitation;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Queue\Queueable;
+use Illuminate\Queue\SerializesModels;
+
+class NotifyEventInvitees implements ShouldQueue
+{
+    use Queueable, SerializesModels;
+
+    /**
+     * The number of times the job may be attempted.
+     */
+    public int $tries = 3;
+
+    /**
+     * @param  array<int>  $userIds
+     */
+    public function __construct(
+        public Event $event,
+        public array $userIds,
+    ) {}
+
+    public function handle(): void
+    {
+        if (empty($this->userIds)) {
+            return;
+        }
+
+        User::query()
+            ->whereIn('id', $this->userIds)
+            ->get()
+            ->each(fn (User $user) => $user->notify(new EventInvitation($this->event)));
+    }
+}
diff --git a/app/Jobs/NotifyTaskAssignee.php b/app/Jobs/NotifyTaskAssignee.php
new file mode 100644
index 0000000..77ccc87
--- /dev/null
+++ b/app/Jobs/NotifyTaskAssignee.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Jobs;
+
+use App\Models\Task;
+use App\Models\User;
+use App\Notifications\TaskAssigned;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Queue\Queueable;
+use Illuminate\Queue\SerializesModels;
+
+class NotifyTaskAssignee implements ShouldQueue
+{
+    use Queueable, SerializesModels;
+
+    /**
+     * The number of times the job may be attempted.
+     */
+    public int $tries = 3;
+
+    public function __construct(
+        public Task $task,
+        public User $actor,
+    ) {}
+
+    public function handle(): void
+    {
+        if (empty($this->task->assigned_to) || $this->task->assigned_to === $this->actor->id) {
+            return;
+        }
+
+        $this->task->assignee?->notify(new TaskAssigned($this->task, $this->actor));
+    }
+}
diff --git a/app/Jobs/NotifyTaskCommentStakeholders.php b/app/Jobs/NotifyTaskCommentStakeholders.php
new file mode 100644
index 0000000..17176e2
--- /dev/null
+++ b/app/Jobs/NotifyTaskCommentStakeholders.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Jobs;
+
+use App\Models\Task;
+use App\Models\TaskComment;
+use App\Models\User;
+use App\Notifications\TaskCommented;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Queue\Queueable;
+use Illuminate\Queue\SerializesModels;
+
+class NotifyTaskCommentStakeholders implements ShouldQueue
+{
+    use Queueable, SerializesModels;
+
+    /**
+     * The number of times the job may be attempted.
+     */
+    public int $tries = 3;
+
+    public function __construct(
+        public Task $task,
+        public TaskComment $comment,
+        public User $actor,
+    ) {}
+
+    public function handle(): void
+    {
+        $recipientIds = collect([
+            $this->task->assigned_to,
+            $this->task->created_by,
+            $this->comment->parent?->user_id,
+        ])
+            ->filter()
+            ->unique()
+            ->reject(fn (int $id) => $id === $this->actor->id);
+
+        if ($recipientIds->isEmpty()) {
+            return;
+        }
+
+        User::query()
+            ->whereIn('id', $recipientIds)
+            ->get()
+            ->each(fn (User $user) => $user->notify(new TaskCommented($this->task, $this->comment, $this->actor)));
+    }
+}
diff --git a/app/Notifications/TaskAssigned.php b/app/Notifications/TaskAssigned.php
new file mode 100644
index 0000000..a99f06b
--- /dev/null
+++ b/app/Notifications/TaskAssigned.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Notifications;
+
+use App\Models\Task;
+use App\Models\User;
+use Illuminate\Bus\Queueable;
+use Illuminate\Notifications\Messages\MailMessage;
+use Illuminate\Notifications\Notification;
+
+class TaskAssigned extends Notification
+{
+    use Queueable;
+
+    public function __construct(public Task $task, public User $actor) {}
+
+    public function via(object $notifiable): array
+    {
+        return ['database', 'mail'];
+    }
+
+    public function toDatabase(object $notifiable): array
+    {
+        return [
+            'task_id' => $this->task->id,
+            'task_title' => $this->task->title,
+            'assigner' => $this->actor->name,
+            'due_date' => $this->task->due_date?->toISOString(),
+        ];
+    }
+
+    public function toArray(object $notifiable): array
+    {
+        return $this->toDatabase($notifiable);
+    }
+
+    public function toMail(object $notifiable): MailMessage
+    {
+        $mail = (new MailMessage)
+            ->subject('You have been assigned: '.$this->task->title)
+            ->greeting('Hello '.$notifiable->name.',')
+            ->line($this->actor->name.' assigned you to a task on Taskly.')
+            ->line($this->task->title)
+            ->action('View task', url('/tasks?id='.$this->task->id));
+
+        if ($this->task->due_date) {
+            $mail->line('Due: '.$this->task->due_date->format('l, F j, Y'));
+        }
+
+        return $mail->line('Open the task to see all the details.');
+    }
+}
diff --git a/app/Notifications/TaskCommented.php b/app/Notifications/TaskCommented.php
new file mode 100644
index 0000000..0392e37
--- /dev/null
+++ b/app/Notifications/TaskCommented.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Notifications;
+
+use App\Models\Task;
+use App\Models\TaskComment;
+use App\Models\User;
+use Illuminate\Bus\Queueable;
+use Illuminate\Notifications\Messages\MailMessage;
+use Illuminate\Notifications\Notification;
+use Illuminate\Support\Str;
+
+class TaskCommented extends Notification
+{
+    use Queueable;
+
+    public function __construct(public Task $task, public TaskComment $comment, public User $actor) {}
+
+    public function via(object $notifiable): array
+    {
+        return ['database', 'mail'];
+    }
+
+    public function toDatabase(object $notifiable): array
+    {
+        return [
+            'task_id' => $this->task->id,
+            'task_title' => $this->task->title,
+            'commenter' => $this->actor->name,
+            'comment' => $this->excerpt(),
+            'is_reply' => $this->comment->parent_id !== null,
+        ];
+    }
+
+    public function toArray(object $notifiable): array
+    {
+        return $this->toDatabase($notifiable);
+    }
+
+    public function toMail(object $notifiable): MailMessage
+    {
+        return (new MailMessage)
+            ->subject('New comment on: '.$this->task->title)
+            ->greeting('Hello '.$notifiable->name.',')
+            ->line($this->actor->name.' commented on a task you are following on Taskly.')
+            ->line($this->task->title)
+            ->line('"'.$this->excerpt().'"')
+            ->action('View comment', url('/tasks?id='.$this->task->id))
+            ->line('Open the task to read the full conversation.');
+    }
+
+    /**
+     * A short plain-text version of the comment for previews.
+     */
+    private function excerpt(): string
+    {
+        return Str::limit(strip_tags($this->comment->body), 140);
+    }
+}
diff --git a/app/Policies/EventPolicy.php b/app/Policies/EventPolicy.php
index 1d3b742..5e23d7f 100644
--- a/app/Policies/EventPolicy.php
+++ b/app/Policies/EventPolicy.php
@@ -29,8 +29,7 @@ public function update(User $user, Event $event): bool
      */
     public function delete(User $user, Event $event): bool
     {
-        return $event->calendar?->team_id !== null
-            && $user->canAccessTeam($event->calendar->team_id);
+        return $user->id === $event->organizer_id;
     }
 
     /**
diff --git a/app/Services/CalendarService.php b/app/Services/CalendarService.php
index 0cc2ddd..3bc959e 100644
--- a/app/Services/CalendarService.php
+++ b/app/Services/CalendarService.php
@@ -2,6 +2,7 @@
 
 namespace App\Services;
 
+use App\Jobs\NotifyEventInvitees;
 use App\Models\Calendar;
 use App\Models\Event;
 use App\Models\User;
@@ -45,12 +46,13 @@ public function indexData(User $user, ?string $start = null, ?string $end = null
             ->where(fn ($query) => $query->where('organizer_id', $user->id)
                 ->orWhereHas('attendees', fn ($attendees) => $attendees
                     ->where(self::ATTENDEE_TABLE.'.user_id', $user->id)
-                    ->where(self::ATTENDEE_TABLE.'.participation_status', 'accepted')))
+                    ->whereIn(self::ATTENDEE_TABLE.'.participation_status', ['accepted', 'declined'])))
             ->whereDoesntHave('attendees', fn ($attendees) => $attendees
                 ->where(self::ATTENDEE_TABLE.'.user_id', $user->id)
                 ->whereNotNull(self::ATTENDEE_TABLE.'.hidden_at'))
             ->where('start_at', '<=', $end)
             ->where('end_at', '>=', $start)
+            ->with(['attendees' => fn ($query) => $query->where(self::ATTENDEE_TABLE.'.user_id', $user->id)])
             ->orderBy('start_at')
             ->get();
 
@@ -105,7 +107,7 @@ public function create(array $data, User $user): Event
         );
 
         $event->load('attendees');
-        $event->attendees->each->notify(new EventInvitation($event));
+        NotifyEventInvitees::dispatch($event, $event->attendees->pluck('id')->all());
 
         return $event;
     }
@@ -144,8 +146,7 @@ public function update(Event $event, array $data): void
         $addedIds = $attendeeIds->diff($existing->keys());
 
         if ($addedIds->isNotEmpty()) {
-            $this->teamAttendees($event->calendar->team_id, $addedIds)
-                ->each->notify(new EventInvitation($event));
+            NotifyEventInvitees::dispatch($event, $addedIds->all());
         }
 
         $this->deleteInvitationNotifications($event, $existing->keys()->diff($attendeeIds));
diff --git a/app/Services/CommentService.php b/app/Services/CommentService.php
index b1dec6c..d2ffcb8 100644
--- a/app/Services/CommentService.php
+++ b/app/Services/CommentService.php
@@ -2,6 +2,7 @@
 
 namespace App\Services;
 
+use App\Jobs\NotifyTaskCommentStakeholders;
 use App\Models\Task;
 use App\Models\TaskComment;
 use App\Models\User;
@@ -27,11 +28,15 @@ public function listComments(Task $task): Collection
      */
     public function createComment(Task $task, array $data, User $user): TaskComment
     {
-        return $task->comments()->create([
+        $comment = $task->comments()->create([
             'user_id' => $user->id,
             'parent_id' => $data['parent_id'] ?? null,
             'body' => $data['body'],
         ]);
+
+        NotifyTaskCommentStakeholders::dispatch($task, $comment, $user);
+
+        return $comment;
     }
 
     /**
diff --git a/app/Services/TaskService.php b/app/Services/TaskService.php
index 31e51ea..2d7f673 100644
--- a/app/Services/TaskService.php
+++ b/app/Services/TaskService.php
@@ -2,11 +2,14 @@
 
 namespace App\Services;
 
+use App\Jobs\NotifyTaskAssignee;
 use App\Models\Column;
 use App\Models\Tag;
 use App\Models\Task;
 use App\Models\TaskAttachment;
 use App\Models\User;
+use App\Notifications\TaskAssigned;
+use App\Notifications\TaskCommented;
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Storage;
@@ -91,7 +94,7 @@ public function createTask(array $data, User $user): Task
 
         $columnName = Column::query()->where('id', $columnId)->value('name');
 
-        return DB::transaction(function () use ($data, $user, $columnId, $order, $columnName, $tagIds, $newFiles) {
+        $task = DB::transaction(function () use ($data, $user, $columnId, $order, $columnName, $tagIds, $newFiles) {
             $task = Task::create(array_merge($data, [
                 'team_id' => $user->team_id,
                 'created_by' => $data['created_by'] ?? $user->id,
@@ -144,6 +147,10 @@ public function createTask(array $data, User $user): Task
 
             return $task;
         });
+
+        $this->dispatchAssigneeNotification($task, $user);
+
+        return $task;
     }
 
     /**
@@ -183,6 +190,8 @@ public function updateTask(Task $task, array $data, User $actor): bool
                     'previous_assigned_to' => $oldAssignedTo,
                 ],
             ]);
+
+            $this->dispatchAssigneeNotification($task, $actor);
         }
 
         if (! empty($removedIds)) {
@@ -286,6 +295,16 @@ public function updateSequence(Task $task, int $newColumnId, int $newOrder, User
      */
     public function deleteTask(Task $task): ?bool
     {
+        DB::table('notifications')
+            ->whereIn('type', [TaskAssigned::class, TaskCommented::class])
+            ->where('data->task_id', $task->id)
+            ->delete();
+
         return $task->delete();
     }
+
+    private function dispatchAssigneeNotification(Task $task, User $actor): void
+    {
+        NotifyTaskAssignee::dispatch($task, $actor);
+    }
 }
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
deleted file mode 100644
index 7cc083a..0000000
--- a/resources/js/components/AppHeader.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<script setup lang="ts">
-import AppLogo from '@/components/AppLogo.vue';
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
-import Breadcrumbs from '@/components/Breadcrumbs.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-    NavigationMenu,
-    NavigationMenuItem,
-    NavigationMenuList,
-    navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu';
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger,
-} from '@/components/ui/sheet';
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from '@/components/ui/tooltip';
-import UserMenuContent from '@/components/UserMenuContent.vue';
-import { getInitials } from '@/composables/useInitials';
-import { toUrl, urlIsActive } from '@/lib/utils';
-import { dashboard } from '@/routes';
-import type { BreadcrumbItem, NavItem } from '@/types';
-import { InertiaLinkProps, Link, usePage } from '@inertiajs/vue3';
-import { BookOpen, Folder, LayoutGrid, Menu, Search } from '@lucide/vue';
-import { computed } from 'vue';
-
-interface Props {
-    breadcrumbs?: BreadcrumbItem[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    breadcrumbs: () => [],
-});
-
-const page = usePage();
-const auth = computed(() => page.props.auth);
-
-const isCurrentRoute = computed(
-    () => (url: NonNullable<InertiaLinkProps['href']>) =>
-        urlIsActive(url, page.url),
-);
-
-const activeItemStyles = computed(
-    () => (url: NonNullable<InertiaLinkProps['href']>) =>
-        isCurrentRoute.value(toUrl(url))
-            ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
-            : '',
-);
-
-const mainNavItems: NavItem[] = [
-    {
-        title: 'Dashboard',
-        href: dashboard(),
-        icon: LayoutGrid,
-    },
-];
-
-const rightNavItems: NavItem[] = [
-    {
-        title: 'Repository',
-        href: 'https://github.com/laravel/vue-starter-kit',
-        icon: Folder,
-    },
-    {
-        title: 'Documentation',
-        href: 'https://laravel.com/docs/starter-kits#vue',
-        icon: BookOpen,
-    },
-];
-</script>
-
-<template>
-    <div>
-        <div class="border-b border-sidebar-border/80">
-            <div class="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
-                <!-- Mobile Menu -->
-                <div class="lg:hidden">
-                    <Sheet>
-                        <SheetTrigger :as-child="true">
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="mr-2 h-9 w-9"
-                            >
-                                <Menu class="h-5 w-5" />
-                            </Button>
-                        </SheetTrigger>
-                        <SheetContent side="left" class="w-[300px] p-6">
-                            <SheetTitle class="sr-only"
-                                >Navigation Menu</SheetTitle
-                            >
-                            <SheetHeader class="flex justify-start text-left">
-                                <AppLogoIcon
-                                    class="size-6 fill-current text-black dark:text-white"
-                                />
-                            </SheetHeader>
-                            <div
-                                class="flex h-full flex-1 flex-col justify-between space-y-4 py-6"
-                            >
-                                <nav class="-mx-3 space-y-1">
-                                    <Link
-                                        v-for="item in mainNavItems"
-                                        :key="item.title"
-                                        :href="item.href"
-                                        class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
-                                        :class="activeItemStyles(item.href)"
-                                    >
-                                        <component
-                                            v-if="item.icon"
-                                            :is="item.icon"
-                                            class="h-5 w-5"
-                                        />
-                                        {{ item.title }}
-                                    </Link>
-                                </nav>
-                                <div class="flex flex-col space-y-4">
-                                    <a
-                                        v-for="item in rightNavItems"
-                                        :key="item.title"
-                                        :href="toUrl(item.href)"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="flex items-center space-x-2 text-sm font-medium"
-                                    >
-                                        <component
-                                            v-if="item.icon"
-                                            :is="item.icon"
-                                            class="h-5 w-5"
-                                        />
-                                        <span>{{ item.title }}</span>
-                                    </a>
-                                </div>
-                            </div>
-                        </SheetContent>
-                    </Sheet>
-                </div>
-
-                <Link :href="dashboard()" class="flex items-center gap-x-2">
-                    <AppLogo />
-                </Link>
-
-                <!-- Desktop Menu -->
-                <div class="hidden h-full lg:flex lg:flex-1">
-                    <NavigationMenu class="ml-10 flex h-full items-stretch">
-                        <NavigationMenuList
-                            class="flex h-full items-stretch space-x-2"
-                        >
-                            <NavigationMenuItem
-                                v-for="(item, index) in mainNavItems"
-                                :key="index"
-                                class="relative flex h-full items-center"
-                            >
-                                <Link
-                                    :class="[
-                                        navigationMenuTriggerStyle(),
-                                        activeItemStyles(item.href),
-                                        'h-9 cursor-pointer px-3',
-                                    ]"
-                                    :href="item.href"
-                                >
-                                    <component
-                                        v-if="item.icon"
-                                        :is="item.icon"
-                                        class="mr-2 h-4 w-4"
-                                    />
-                                    {{ item.title }}
-                                </Link>
-                                <div
-                                    v-if="isCurrentRoute(item.href)"
-                                    class="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"
-                                ></div>
-                            </NavigationMenuItem>
-                        </NavigationMenuList>
-                    </NavigationMenu>
-                </div>
-
-                <div class="ml-auto flex items-center space-x-2">
-                    <div class="relative flex items-center space-x-1">
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            class="group h-9 w-9 cursor-pointer"
-                        >
-                            <Search
-                                class="size-5 opacity-80 group-hover:opacity-100"
-                            />
-                        </Button>
-
-                        <div class="hidden space-x-1 lg:flex">
-                            <template
-                                v-for="item in rightNavItems"
-                                :key="item.title"
-                            >
-                                <TooltipProvider :delay-duration="0">
-                                    <Tooltip>
-                                        <TooltipTrigger>
-                                            <Button
-                                                variant="ghost"
-                                                size="icon"
-                                                as-child
-                                                class="group h-9 w-9 cursor-pointer"
-                                            >
-                                                <a
-                                                    :href="toUrl(item.href)"
-                                                    target="_blank"
-                                                    rel="noopener noreferrer"
-                                                >
-                                                    <span class="sr-only">{{
-                                                        item.title
-                                                    }}</span>
-                                                    <component
-                                                        :is="item.icon"
-                                                        class="size-5 opacity-80 group-hover:opacity-100"
-                                                    />
-                                                </a>
-                                            </Button>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            <p>{{ item.title }}</p>
-                                        </TooltipContent>
-                                    </Tooltip>
-                                </TooltipProvider>
-                            </template>
-                        </div>
-                    </div>
-
-                    <DropdownMenu>
-                        <DropdownMenuTrigger :as-child="true">
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary"
-                            >
-                                <Avatar
-                                    class="size-8 overflow-hidden rounded-full"
-                                >
-                                    <AvatarImage
-                                        v-if="auth.user.avatar"
-                                        :src="auth.user.avatar"
-                                        :alt="auth.user.name"
-                                    />
-                                    <AvatarFallback
-                                        class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
-                                    >
-                                        {{ getInitials(auth.user?.name) }}
-                                    </AvatarFallback>
-                                </Avatar>
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" class="w-56">
-                            <UserMenuContent :user="auth.user" />
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </div>
-            </div>
-        </div>
-
-        <div
-            v-if="props.breadcrumbs.length > 1"
-            class="flex w-full border-b border-sidebar-border/70"
-        >
-            <div
-                class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl"
-            >
-                <Breadcrumbs :breadcrumbs="breadcrumbs" />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/components/Icon.vue b/resources/js/components/Icon.vue
deleted file mode 100644
index e84d20c..0000000
--- a/resources/js/components/Icon.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import * as icons from '@lucide/vue';
-import { computed } from 'vue';
-
-interface Props {
-    name: string;
-    class?: string;
-    size?: number | string;
-    color?: string;
-    strokeWidth?: number | string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    class: '',
-    size: 16,
-    strokeWidth: 2,
-});
-
-const className = computed(() => cn('h-4 w-4', props.class));
-
-const icon = computed(() => {
-    const iconName = props.name.charAt(0).toUpperCase() + props.name.slice(1);
-    return (icons as Record<string, any>)[iconName];
-});
-</script>
-
-<template>
-    <component
-        :is="icon"
-        :class="className"
-        :size="size"
-        :stroke-width="strokeWidth"
-        :color="color"
-    />
-</template>
diff --git a/resources/js/components/NotificationBell.vue b/resources/js/components/NotificationBell.vue
index 7d1a011..7586373 100644
--- a/resources/js/components/NotificationBell.vue
+++ b/resources/js/components/NotificationBell.vue
@@ -6,6 +6,7 @@ import {
     DropdownMenuContent,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
 import {
@@ -15,20 +16,29 @@ import {
     Check,
     CheckCheck,
     ChevronDown,
+    MessageSquare,
+    UserPlus,
     X,
 } from '@lucide/vue';
 import { respond } from '@/routes/calendar/events';
-import { index, readAll } from '@/routes/notifications';
+import { index as calendarIndex } from '@/routes/calendar';
+import { index, markAsRead, readAll } from '@/routes/notifications';
+import { index as tasksIndex } from '@/routes/tasks';
 import {
     relativeTime,
     formatDateTimeRange,
+    formatDate,
+    nowIso,
 } from '@/composables/useDateFormatter';
 import { usePaginatedList } from '@/composables/usePaginatedList';
+import { useInitials } from '@/composables/useInitials';
 import type { AppNotification, NotificationType } from '@/types';
 
 const isType = (notification: AppNotification, type: NotificationType) =>
     notification.type === type;
 
+const { getInitials } = useInitials();
+
 const page = usePage();
 const unreadCount = computed(() => page.props.notifications.unreadCount);
 const {
@@ -67,13 +77,107 @@ const eventDateTime = (notification: AppNotification): string | null =>
         notification.data.end_time ?? null,
     );
 
+const isTaskNotification = (notification: AppNotification) =>
+    isType(notification, 'task_assigned') ||
+    isType(notification, 'task_commented');
+
+const iconFor = (notification: AppNotification) => {
+    if (isType(notification, 'task_assigned')) return UserPlus;
+    if (isType(notification, 'task_commented')) return MessageSquare;
+    return CalendarDays;
+};
+
+const actorNameFor = (notification: AppNotification): string | null => {
+    if (isType(notification, 'task_assigned')) {
+        return notification.data.assigner ?? null;
+    }
+    if (isType(notification, 'task_commented')) {
+        return notification.data.commenter ?? null;
+    }
+    if (isType(notification, 'event_invitation')) {
+        return notification.data.inviter ?? null;
+    }
+    return null;
+};
+
+const initialsFor = (notification: AppNotification): string =>
+    getInitials(actorNameFor(notification) ?? '');
+
+const dueDate = (notification: AppNotification): string | null =>
+    notification.data.due_date ? formatDate(notification.data.due_date) : null;
+
 const markAllAsRead = () =>
     router.post(readAll().url, {}, { preserveScroll: true });
 
+const openTask = async (notification: AppNotification) => {
+    const taskId = notification.data.task_id;
+    if (typeof taskId !== 'number') return;
+
+    notificationsLoaded.value = false;
+
+    if (!notification.read_at) {
+        notification.read_at = nowIso();
+
+        try {
+            await fetch(markAsRead({ notification: notification.id }).url, {
+                method: 'POST',
+                headers: { Accept: 'application/json' },
+            });
+            if (page.props.notifications.unreadCount > 0) {
+                page.props.notifications.unreadCount--;
+            }
+        } catch {}
+    }
+
+    const currentPath = window.location.pathname;
+    if (currentPath === '/tasks' || currentPath.startsWith('/tasks?')) {
+        window.dispatchEvent(
+            new CustomEvent('open-task', { detail: { taskId } }),
+        );
+    } else {
+        router.visit(tasksIndex({ query: { id: taskId } }).url, {
+            preserveScroll: false,
+        });
+    }
+};
+
+const openEvent = async (notification: AppNotification) => {
+    const eventId = notification.data.event_id;
+    if (typeof eventId !== 'number') return;
+
+    notificationsLoaded.value = false;
+
+    if (!notification.read_at) {
+        notification.read_at = nowIso();
+
+        try {
+            await fetch(markAsRead({ notification: notification.id }).url, {
+                method: 'POST',
+                headers: { Accept: 'application/json' },
+            });
+            if (page.props.notifications.unreadCount > 0) {
+                page.props.notifications.unreadCount--;
+            }
+        } catch {}
+    }
+
+    const currentPath = window.location.pathname;
+    if (currentPath === '/calendar' || currentPath.startsWith('/calendar?')) {
+        window.dispatchEvent(
+            new CustomEvent('open-event', { detail: { eventId } }),
+        );
+    } else {
+        router.visit(calendarIndex({ query: { id: eventId } }).url, {
+            preserveScroll: false,
+        });
+    }
+};
+
 const respondTo = (
     notification: AppNotification,
     response: 'accepted' | 'declined',
-) =>
+) => {
+    const wasUnread = !notification.read_at;
     router.post(
         respond({ event: notification.data.event_id!, response }).url,
         {},
@@ -81,10 +185,14 @@ const respondTo = (
             preserveScroll: true,
             onSuccess: () => {
                 notification.data.response = response;
-                notification.read_at = new Date().toISOString();
+                notification.read_at = nowIso();
+                if (wasUnread && page.props.notifications.unreadCount > 0) {
+                    page.props.notifications.unreadCount--;
+                }
             },
         },
     );
+};
 </script>
 
 <template>
@@ -144,16 +252,76 @@ const respondTo = (
                         v-for="notification in notifications"
                         :key="notification.id"
                         class="flex flex-col gap-2 px-4 py-3 transition-colors hover:bg-muted/50"
-                        :class="!notification.read_at ? 'bg-primary/2' : ''"
+                        :class="[
+                            !notification.read_at ? 'bg-primary/2' : '',
+                            isTaskNotification(notification) ||
+                            isType(notification, 'event_invitation')
+                                ? 'cursor-pointer'
+                                : '',
+                        ]"
+                        :role="
+                            isTaskNotification(notification) ||
+                            isType(notification, 'event_invitation')
+                                ? 'button'
+                                : undefined
+                        "
+                        :tabindex="
+                            isTaskNotification(notification) ||
+                            isType(notification, 'event_invitation')
+                                ? 0
+                                : undefined
+                        "
+                        @click="
+                            isTaskNotification(notification)
+                                ? openTask(notification)
+                                : isType(notification, 'event_invitation')
+                                  ? openEvent(notification)
+                                  : undefined
+                        "
+                        @keydown.enter="
+                            isTaskNotification(notification)
+                                ? openTask(notification)
+                                : isType(notification, 'event_invitation')
+                                  ? openEvent(notification)
+                                  : undefined
+                        "
                     >
                         <div class="flex items-start gap-3">
-                            <div
-                                class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
-                            >
-                                <CalendarDays class="size-4" />
+                            <div class="relative mt-0.5 shrink-0">
+                                <Avatar class="size-9">
+                                    <AvatarFallback
+                                        class="text-xs font-medium text-muted-foreground uppercase"
+                                    >
+                                        <template
+                                            v-if="initialsFor(notification)"
+                                        >
+                                            {{ initialsFor(notification) }}
+                                        </template>
+                                        <component
+                                            v-else
+                                            :is="iconFor(notification)"
+                                            class="size-4"
+                                        />
+                                    </AvatarFallback>
+                                </Avatar>
+                                <span
+                                    v-if="initialsFor(notification)"
+                                    class="absolute -right-1 -bottom-1 flex size-4 items-center justify-center rounded-full border border-border bg-background text-muted-foreground"
+                                >
+                                    <component
+                                        :is="iconFor(notification)"
+                                        class="size-2.5"
+                                        :stroke-width="2.5"
+                                    />
+                                </span>
                             </div>
                             <div class="min-w-0 flex-1">
-                                <p class="text-sm leading-snug text-foreground">
+                                <p
+                                    v-if="
+                                        isType(notification, 'event_invitation')
+                                    "
+                                    class="text-sm leading-snug text-foreground"
+                                >
                                     <span class="font-medium">{{
                                         notification.data.inviter
                                     }}</span>
@@ -163,11 +331,74 @@ const respondTo = (
                                     }}</span>
                                 </p>
                                 <p
-                                    v-if="eventDateTime(notification)"
+                                    v-else-if="
+                                        isType(notification, 'task_assigned')
+                                    "
+                                    class="text-sm leading-snug text-foreground"
+                                >
+                                    <span class="font-medium">{{
+                                        notification.data.assigner
+                                    }}</span>
+                                    assigned you to
+                                    <span class="font-medium">{{
+                                        notification.data.task_title
+                                    }}</span>
+                                </p>
+                                <p
+                                    v-else-if="
+                                        isType(notification, 'task_commented')
+                                    "
+                                    class="text-sm leading-snug text-foreground"
+                                >
+                                    <span class="font-medium">{{
+                                        notification.data.commenter
+                                    }}</span>
+                                    commented on
+                                    <span class="font-medium">{{
+                                        notification.data.task_title
+                                    }}</span>
+                                </p>
+                                <p
+                                    v-else
+                                    class="text-sm leading-snug text-foreground"
+                                >
+                                    {{
+                                        notification.data.title ??
+                                        'You have a new notification'
+                                    }}
+                                </p>
+
+                                <p
+                                    v-if="
+                                        isType(
+                                            notification,
+                                            'event_invitation',
+                                        ) && eventDateTime(notification)
+                                    "
                                     class="mt-0.5 text-xs text-muted-foreground"
                                 >
                                     {{ eventDateTime(notification) }}
                                 </p>
+                                <p
+                                    v-else-if="
+                                        isType(notification, 'task_assigned') &&
+                                        dueDate(notification)
+                                    "
+                                    class="mt-0.5 text-xs text-muted-foreground"
+                                >
+                                    Due {{ dueDate(notification) }}
+                                </p>
+                                <p
+                                    v-else-if="
+                                        isType(
+                                            notification,
+                                            'task_commented',
+                                        ) && notification.data.comment
+                                    "
+                                    class="mt-0.5 line-clamp-2 text-xs text-muted-foreground"
+                                >
+                                    "{{ notification.data.comment }}"
+                                </p>
                             </div>
                             <span
                                 class="shrink-0 text-xs text-muted-foreground"
@@ -178,7 +409,7 @@ const respondTo = (
                         </div>
                         <div
                             v-if="isType(notification, 'event_invitation')"
-                            class="flex items-center gap-2 pl-11"
+                            class="flex items-center gap-2 pl-12"
                         >
                             <template
                                 v-if="response(notification) === 'needs_action'"
@@ -186,7 +417,9 @@ const respondTo = (
                                 <Button
                                     size="sm"
                                     class="h-8"
-                                    @click="respondTo(notification, 'accepted')"
+                                    @click.stop="
+                                        respondTo(notification, 'accepted')
+                                    "
                                 >
                                     <Check class="mr-1.5 size-3.5" />
                                     Accept
@@ -195,33 +428,58 @@ const respondTo = (
                                     size="sm"
                                     variant="outline"
                                     class="h-8 text-muted-foreground hover:text-foreground"
-                                    @click="respondTo(notification, 'declined')"
+                                    @click.stop="
+                                        respondTo(notification, 'declined')
+                                    "
                                 >
                                     <X class="mr-1.5 size-3.5" />
                                     Decline
                                 </Button>
                             </template>
-                            <span
-                                v-else
-                                class="inline-flex items-center gap-1.5 text-xs font-medium"
-                                :class="
-                                    response(notification) === 'accepted'
-                                        ? 'text-primary'
-                                        : 'text-muted-foreground'
-                                "
-                            >
-                                <Check
-                                    v-if="response(notification) === 'accepted'"
-                                    class="size-3.5"
-                                />
-                                <X v-else class="size-3.5" />
-                                You
-                                {{
-                                    response(notification) === 'accepted'
-                                        ? 'accepted'
-                                        : 'declined'
-                                }}
-                            </span>
+                            <div v-else class="flex items-center gap-2">
+                                <span
+                                    class="inline-flex items-center gap-1.5 text-xs font-medium"
+                                    :class="
+                                        response(notification) === 'accepted'
+                                            ? 'text-primary'
+                                            : 'text-muted-foreground'
+                                    "
+                                >
+                                    <Check
+                                        v-if="
+                                            response(notification) ===
+                                            'accepted'
+                                        "
+                                        class="size-3.5"
+                                    />
+                                    <X v-else class="size-3.5" />
+                                    You
+                                    {{
+                                        response(notification) === 'accepted'
+                                            ? 'accepted'
+                                            : 'declined'
+                                    }}
+                                </span>
+                                <button
+                                    type="button"
+                                    class="text-xs text-muted-foreground underline hover:text-foreground"
+                                    @click.stop="
+                                        respondTo(
+                                            notification,
+                                            response(notification) ===
+                                                'accepted'
+                                                ? 'declined'
+                                                : 'accepted',
+                                        )
+                                    "
+                                >
+                                    {{
+                                        response(notification) === 'accepted'
+                                            ? 'Decline'
+                                            : 'Accept'
+                                    }}
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </template>
@@ -237,8 +495,8 @@ const respondTo = (
                     </div>
                     <p class="text-sm font-medium">You're all caught up</p>
                     <p class="text-xs text-muted-foreground">
-                        Notifications for invitations and updates will appear
-                        here.
+                        Notifications for invitations, assignments and comments
+                        will appear here.
                     </p>
                 </div>
 
diff --git a/resources/js/components/PlaceholderPattern.vue b/resources/js/components/PlaceholderPattern.vue
deleted file mode 100644
index 95556e3..0000000
--- a/resources/js/components/PlaceholderPattern.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const patternId = computed(
-    () => `pattern-${Math.random().toString(36).substring(2, 9)}`,
-);
-</script>
-
-<template>
-    <svg
-        class="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20"
-        fill="none"
-    >
-        <defs>
-            <pattern
-                :id="patternId"
-                x="0"
-                y="0"
-                width="8"
-                height="8"
-                patternUnits="userSpaceOnUse"
-            >
-                <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
-            </pattern>
-        </defs>
-        <rect
-            stroke="none"
-            :fill="`url(#${patternId})`"
-            width="100%"
-            height="100%"
-        ></rect>
-    </svg>
-</template>
diff --git a/resources/js/components/calendar/EventDialog.vue b/resources/js/components/calendar/EventDialog.vue
index 3db4450..a6f7612 100644
--- a/resources/js/components/calendar/EventDialog.vue
+++ b/resources/js/components/calendar/EventDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { router, useForm, usePage } from '@inertiajs/vue3';
 import { toast } from 'vue-sonner';
 import {
@@ -10,15 +10,33 @@ import {
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import InputError from '@/components/InputError.vue';
 import DateTimeField from '@/components/calendar/DateTimeField.vue';
-import { store, update, destroy, room } from '@/routes/calendar/events';
+import {
+    store,
+    update,
+    destroy,
+    room,
+    respond,
+} from '@/routes/calendar/events';
+import { useInitials } from '@/composables/useInitials';
 import type { CalendarEvent, TeamMember } from '@/types';
-import { Save, Check, Trash, UserPlus, Video, X } from '@lucide/vue';
+import {
+    Save,
+    Check,
+    Trash,
+    UserPlus,
+    Video,
+    X,
+    Clock,
+    Users,
+} from '@lucide/vue';
 
 const props = defineProps<{
     teamMembers: TeamMember[];
@@ -30,6 +48,10 @@ const props = defineProps<{
 
 const isOpen = defineModel<boolean>('open', { default: false });
 
+const emit = defineEmits<{
+    (e: 'responded', response: 'accepted' | 'declined'): void;
+}>();
+
 const currentUserId = usePage().props.auth.user.id;
 
 const form = useForm({
@@ -42,9 +64,54 @@ const form = useForm({
 });
 
 const isEdit = computed(() => Boolean(props.event));
-const isOwner = computed(() => props.event?.organizer?.id === currentUserId);
+const isOwner = computed(() => {
+    const orgId = props.event?.organizer?.id ?? props.event?.organizer_id;
+    return orgId === currentUserId;
+});
 const isReadOnly = computed(() => isEdit.value && !isOwner.value);
 
+const localParticipationStatus = ref<'accepted' | 'declined' | null>(null);
+
+const myParticipationStatus = computed(() => {
+    if (isOwner.value) return 'accepted';
+    if (localParticipationStatus.value) {
+        return localParticipationStatus.value;
+    }
+    if (props.event?.user_participation_status) {
+        return props.event.user_participation_status;
+    }
+    const me = props.event?.attendees?.find((p) => p.id === currentUserId);
+    return me?.participation_status ?? null;
+});
+
+const canRemove = computed(() => isEdit.value && isOwner.value);
+
+const { getInitials } = useInitials();
+
+const attendeeStatus = (attendeeId: number) => {
+    if (attendeeId === currentUserId && localParticipationStatus.value) {
+        return localParticipationStatus.value;
+    }
+    const attendee = props.event?.attendees?.find((a) => a.id === attendeeId);
+    return attendee?.participation_status ?? null;
+};
+
+const attendeeStats = computed(() => {
+    const attendees = props.event?.attendees ?? [];
+    let accepted = 0;
+    let declined = 0;
+    let pending = 0;
+
+    for (const a of attendees) {
+        const status = attendeeStatus(a.id);
+        if (status === 'accepted') accepted++;
+        else if (status === 'declined') declined++;
+        else pending++;
+    }
+
+    return { total: attendees.length, accepted, declined, pending };
+});
+
 const fillFromEvent = () => {
     if (!props.event) return;
     form.title = props.event.title;
@@ -75,26 +142,6 @@ const applyDefaultStart = () => {
     form.end_at = new Date(start.getTime() + 60 * 60 * 1000).toISOString();
 };
 
-watch(isOpen, () => {
-    form.clearErrors();
-    if (props.event) {
-        fillFromEvent();
-    } else {
-        form.reset();
-        applyDefaultStart();
-    }
-});
-
-watch(
-    () => props.event,
-    (newEvent) => {
-        if (newEvent && isOpen.value) {
-            fillFromEvent();
-        }
-    },
-    { deep: true },
-);
-
 const submit = () => {
     if (props.event) {
         form.put(update(props.event.id).url, {
@@ -129,6 +176,60 @@ const joinRoom = () => {
     isOpen.value = false;
     router.visit(room(props.event.id).url);
 };
+
+const isResponding = ref(false);
+
+const respondToEvent = (response: 'accepted' | 'declined') => {
+    if (!props.event) return;
+    isResponding.value = true;
+    router.post(
+        respond({ event: props.event.id, response }).url,
+        {},
+        {
+            preserveScroll: true,
+            preserveState: true,
+            onSuccess: () => {
+                localParticipationStatus.value = response;
+                emit('responded', response);
+                if (response === 'accepted') {
+                    toast.success('Event invitation accepted');
+                } else {
+                    toast.success('Event invitation declined');
+                }
+            },
+            onFinish: () => {
+                isResponding.value = false;
+            },
+        },
+    );
+};
+
+watch(
+    () => [props.event?.id, isOpen.value],
+    () => {
+        localParticipationStatus.value = null;
+    },
+);
+
+watch(isOpen, () => {
+    form.clearErrors();
+    if (props.event) {
+        fillFromEvent();
+    } else {
+        form.reset();
+        applyDefaultStart();
+    }
+});
+
+watch(
+    () => props.event,
+    (newEvent) => {
+        if (newEvent && isOpen.value) {
+            fillFromEvent();
+        }
+    },
+    { deep: true },
+);
 </script>
 
 <template>
@@ -224,52 +325,239 @@ const joinRoom = () => {
                             </div>
                         </div>
                     </div>
-                    <div v-if="teamMembers.length" class="space-y-2">
+                    <div v-if="isReadOnly" class="space-y-3">
                         <div class="flex items-center justify-between">
-                            <Label>Invite teammates</Label
-                            ><span class="text-xs text-muted-foreground"
-                                >{{ form.attendee_ids.length }} selected</span
+                            <Label
+                                class="flex items-center gap-1.5 font-medium"
+                            >
+                                <Users class="size-4 text-muted-foreground" />
+                                Participants
+                            </Label>
+                            <span
+                                v-if="event?.attendees?.length"
+                                class="text-xs text-muted-foreground"
                             >
+                                {{ attendeeStats.accepted }} accepted ·
+                                {{ attendeeStats.declined }} declined ·
+                                {{ attendeeStats.pending }} pending
+                            </span>
                         </div>
+
                         <div
-                            class="grid max-h-36 gap-1 overflow-y-auto rounded-xl border p-2 sm:grid-cols-2"
+                            class="max-h-52 space-y-1.5 overflow-y-auto rounded-xl border p-2"
+                        >
+                            <!-- Organizer -->
+                            <div
+                                v-if="event?.organizer"
+                                class="flex items-center justify-between rounded-lg bg-muted/40 px-3 py-2 text-sm"
+                            >
+                                <div class="flex min-w-0 items-center gap-2.5">
+                                    <Avatar class="size-7 border border-border">
+                                        <AvatarFallback
+                                            class="text-[10px] font-semibold"
+                                        >
+                                            {{
+                                                getInitials(
+                                                    event.organizer.name,
+                                                )
+                                            }}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <span
+                                        class="truncate font-medium text-foreground"
+                                    >
+                                        {{ event.organizer.name }}
+                                        <span
+                                            v-if="
+                                                event.organizer.id ===
+                                                currentUserId
+                                            "
+                                            class="ml-1 text-xs font-normal text-muted-foreground"
+                                            >(You)</span
+                                        >
+                                    </span>
+                                </div>
+                                <Badge
+                                    variant="secondary"
+                                    class="text-[11px] font-normal"
+                                >
+                                    Organizer
+                                </Badge>
+                            </div>
+
+                            <!-- Attendees -->
+                            <template v-if="event?.attendees?.length">
+                                <div
+                                    v-for="attendee in event.attendees"
+                                    :key="attendee.id"
+                                    class="flex items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors hover:bg-muted/30"
+                                >
+                                    <div
+                                        class="flex min-w-0 items-center gap-2.5"
+                                    >
+                                        <Avatar
+                                            class="size-7 border border-border"
+                                        >
+                                            <AvatarFallback
+                                                class="text-[10px] font-semibold"
+                                            >
+                                                {{ getInitials(attendee.name) }}
+                                            </AvatarFallback>
+                                        </Avatar>
+                                        <span class="truncate text-foreground">
+                                            {{ attendee.name }}
+                                            <span
+                                                v-if="
+                                                    attendee.id ===
+                                                    currentUserId
+                                                "
+                                                class="ml-1 text-xs text-muted-foreground"
+                                                >(You)</span
+                                            >
+                                        </span>
+                                    </div>
+
+                                    <Badge
+                                        v-if="
+                                            attendeeStatus(attendee.id) ===
+                                            'accepted'
+                                        "
+                                        variant="outline"
+                                        class="border-emerald-500/30 bg-emerald-500/10 text-[11px] text-emerald-600 dark:text-emerald-400"
+                                    >
+                                        <Check class="mr-1 size-3" /> Accepted
+                                    </Badge>
+                                    <Badge
+                                        v-else-if="
+                                            attendeeStatus(attendee.id) ===
+                                            'declined'
+                                        "
+                                        variant="outline"
+                                        class="border-destructive/30 bg-destructive/10 text-[11px] text-destructive"
+                                    >
+                                        <X class="mr-1 size-3" /> Declined
+                                    </Badge>
+                                    <Badge
+                                        v-else
+                                        variant="outline"
+                                        class="border-amber-500/30 bg-amber-500/10 text-[11px] text-amber-600 dark:text-amber-400"
+                                    >
+                                        <Clock class="mr-1 size-3" /> Pending
+                                    </Badge>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+
+                    <div v-else-if="teamMembers.length" class="space-y-2">
+                        <div class="flex items-center justify-between">
+                            <Label class="flex items-center gap-1.5">
+                                <Users class="size-4 text-muted-foreground" />
+                                Invite teammates
+                            </Label>
+                            <div
+                                class="flex items-center gap-2 text-xs text-muted-foreground"
+                            >
+                                <span v-if="isEdit && event?.attendees?.length">
+                                    {{ attendeeStats.accepted }} accepted ·
+                                    {{ attendeeStats.declined }} declined ·
+                                    {{ attendeeStats.pending }} pending
+                                </span>
+                                <span v-else>
+                                    {{ form.attendee_ids.length }} selected
+                                </span>
+                            </div>
+                        </div>
+                        <div
+                            class="grid max-h-48 gap-1 overflow-y-auto rounded-xl border p-2 sm:grid-cols-2"
                         >
                             <label
                                 v-for="member in teamMembers"
                                 :key="member.id"
-                                class="flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors hover:bg-muted"
+                                class="flex cursor-pointer items-center justify-between gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors hover:bg-muted"
                                 :class="[
                                     form.attendee_ids.includes(member.id)
                                         ? 'bg-primary/8 text-primary'
                                         : '',
-                                    isReadOnly ? 'cursor-default' : '',
                                 ]"
                             >
-                                <span
-                                    class="flex size-5 items-center justify-center rounded border"
-                                    :class="
-                                        form.attendee_ids.includes(member.id)
-                                            ? 'border-primary bg-primary text-primary-foreground'
-                                            : 'border-input'
-                                    "
-                                >
-                                    <Check
-                                        v-if="
+                                <div class="flex min-w-0 items-center gap-2">
+                                    <span
+                                        class="flex size-5 shrink-0 items-center justify-center rounded border"
+                                        :class="
                                             form.attendee_ids.includes(
                                                 member.id,
                                             )
+                                                ? 'border-primary bg-primary text-primary-foreground'
+                                                : 'border-input'
                                         "
-                                        class="size-3.5"
+                                    >
+                                        <Check
+                                            v-if="
+                                                form.attendee_ids.includes(
+                                                    member.id,
+                                                )
+                                            "
+                                            class="size-3.5"
+                                        />
+                                    </span>
+                                    <input
+                                        v-model="form.attendee_ids"
+                                        class="sr-only"
+                                        type="checkbox"
+                                        :value="member.id"
                                     />
-                                </span>
-                                <input
-                                    v-model="form.attendee_ids"
-                                    class="sr-only"
-                                    type="checkbox"
-                                    :value="member.id"
-                                    :disabled="isReadOnly"
-                                />
-                                <span class="truncate">{{ member.name }}</span>
+                                    <span class="truncate">{{
+                                        member.name
+                                    }}</span>
+                                </div>
+
+                                <template
+                                    v-if="
+                                        isEdit &&
+                                        form.attendee_ids.includes(member.id)
+                                    "
+                                >
+                                    <Badge
+                                        v-if="
+                                            attendeeStatus(member.id) ===
+                                            'accepted'
+                                        "
+                                        variant="outline"
+                                        class="shrink-0 border-emerald-500/30 bg-emerald-500/10 text-[10px] text-emerald-600 dark:text-emerald-400"
+                                    >
+                                        <Check class="mr-0.5 size-2.5" />
+                                        Accepted
+                                    </Badge>
+                                    <Badge
+                                        v-else-if="
+                                            attendeeStatus(member.id) ===
+                                            'declined'
+                                        "
+                                        variant="outline"
+                                        class="shrink-0 border-destructive/30 bg-destructive/10 text-[10px] text-destructive"
+                                    >
+                                        <X class="mr-0.5 size-2.5" /> Declined
+                                    </Badge>
+                                    <Badge
+                                        v-else-if="
+                                            attendeeStatus(member.id) ===
+                                            'needs_action'
+                                        "
+                                        variant="outline"
+                                        class="shrink-0 border-amber-500/30 bg-amber-500/10 text-[10px] text-amber-600 dark:text-amber-400"
+                                    >
+                                        <Clock class="mr-0.5 size-2.5" />
+                                        Pending
+                                    </Badge>
+                                    <Badge
+                                        v-else
+                                        variant="secondary"
+                                        class="shrink-0 text-[10px]"
+                                    >
+                                        New
+                                    </Badge>
+                                </template>
                             </label>
                         </div>
                     </div>
@@ -354,7 +642,7 @@ const joinRoom = () => {
                             </Button>
 
                             <Button
-                                v-if="isEdit"
+                                v-if="canRemove"
                                 type="button"
                                 variant="outline"
                                 class="w-full text-destructive hover:text-destructive sm:w-auto"
@@ -366,6 +654,67 @@ const joinRoom = () => {
                         </div>
 
                         <div class="flex flex-col gap-2 sm:flex-row">
+                            <template v-if="isReadOnly">
+                                <template
+                                    v-if="
+                                        myParticipationStatus === 'needs_action'
+                                    "
+                                >
+                                    <Button
+                                        type="button"
+                                        class="w-full sm:w-auto"
+                                        :disabled="isResponding"
+                                        @click="respondToEvent('accepted')"
+                                    >
+                                        <Check class="mr-2 size-4" />
+                                        Accept
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        class="w-full text-muted-foreground hover:text-foreground sm:w-auto"
+                                        :disabled="isResponding"
+                                        @click="respondToEvent('declined')"
+                                    >
+                                        <X class="mr-2 size-4" />
+                                        Decline
+                                    </Button>
+                                </template>
+
+                                <template
+                                    v-else-if="
+                                        myParticipationStatus === 'declined'
+                                    "
+                                >
+                                    <Button
+                                        type="button"
+                                        class="w-full sm:w-auto"
+                                        :disabled="isResponding"
+                                        @click="respondToEvent('accepted')"
+                                    >
+                                        <Check class="mr-2 size-4" />
+                                        Accept invitation
+                                    </Button>
+                                </template>
+
+                                <template
+                                    v-else-if="
+                                        myParticipationStatus === 'accepted'
+                                    "
+                                >
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        class="w-full text-muted-foreground hover:text-foreground sm:w-auto"
+                                        :disabled="isResponding"
+                                        @click="respondToEvent('declined')"
+                                    >
+                                        <X class="mr-2 size-4" />
+                                        Decline invitation
+                                    </Button>
+                                </template>
+                            </template>
+
                             <Button
                                 type="button"
                                 variant="outline"
diff --git a/resources/js/components/tasks/TaskList.vue b/resources/js/components/tasks/TaskList.vue
deleted file mode 100644
index 1a31e81..0000000
--- a/resources/js/components/tasks/TaskList.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import TaskItem from '@/components/tasks/TaskItem.vue';
-import type { Task } from '@/types';
-import { router, usePage } from '@inertiajs/vue3';
-import { watch } from 'vue';
-
-const props = defineProps<{
-    tasks: Task[];
-}>();
-
-const emit = defineEmits<{
-    edit: [task: Task];
-}>();
-
-const page = usePage();
-
-watch(
-    () => props.tasks,
-    (tasks) => {
-        if (tasks.length === 0) {
-            router.get(
-                `/tasks?page=${Math.max(1, parseInt(((page.props as any).query?.page as string) || '1') - 1)}`,
-            );
-        }
-    },
-);
-</script>
-
-<template>
-    <div
-        v-if="tasks.length === 0"
-        class="rounded-xl border border-dashed p-8 text-center"
-    >
-        <p class="text-muted-foreground">No tasks !</p>
-    </div>
-
-    <div v-else class="space-y-3">
-        <TaskItem
-            v-for="task in tasks"
-            :key="task.id"
-            :task="task"
-            @edit="emit('edit', $event)"
-        />
-    </div>
-</template>
diff --git a/resources/js/components/ui/collapsible/Collapsible.vue b/resources/js/components/ui/collapsible/Collapsible.vue
deleted file mode 100644
index 70a9497..0000000
--- a/resources/js/components/ui/collapsible/Collapsible.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui"
-import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<CollapsibleRootProps>()
-const emits = defineEmits<CollapsibleRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <CollapsibleRoot
-    v-slot="slotProps"
-    data-slot="collapsible"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </CollapsibleRoot>
-</template>
diff --git a/resources/js/components/ui/collapsible/CollapsibleContent.vue b/resources/js/components/ui/collapsible/CollapsibleContent.vue
deleted file mode 100644
index 8be0a11..0000000
--- a/resources/js/components/ui/collapsible/CollapsibleContent.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { CollapsibleContentProps } from "reka-ui"
-import { CollapsibleContent } from "reka-ui"
-
-const props = defineProps<CollapsibleContentProps>()
-</script>
-
-<template>
-  <CollapsibleContent
-    data-slot="collapsible-content"
-    v-bind="props"
-  >
-    <slot />
-  </CollapsibleContent>
-</template>
diff --git a/resources/js/components/ui/collapsible/CollapsibleTrigger.vue b/resources/js/components/ui/collapsible/CollapsibleTrigger.vue
deleted file mode 100644
index 33bec78..0000000
--- a/resources/js/components/ui/collapsible/CollapsibleTrigger.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { CollapsibleTriggerProps } from "reka-ui"
-import { CollapsibleTrigger } from "reka-ui"
-
-const props = defineProps<CollapsibleTriggerProps>()
-</script>
-
-<template>
-  <CollapsibleTrigger
-    data-slot="collapsible-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </CollapsibleTrigger>
-</template>
diff --git a/resources/js/components/ui/collapsible/index.ts b/resources/js/components/ui/collapsible/index.ts
deleted file mode 100644
index 86a031d..0000000
--- a/resources/js/components/ui/collapsible/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Collapsible } from "./Collapsible.vue"
-export { default as CollapsibleContent } from "./CollapsibleContent.vue"
-export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue"
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenu.vue b/resources/js/components/ui/navigation-menu/NavigationMenu.vue
deleted file mode 100644
index 6042a77..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenu.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuRoot,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import NavigationMenuViewport from "./NavigationMenuViewport.vue"
-
-const props = withDefaults(defineProps<NavigationMenuRootProps & {
-  class?: HTMLAttributes["class"]
-  viewport?: boolean
-}>(), {
-  viewport: true,
-})
-const emits = defineEmits<NavigationMenuRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class", "viewport")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuRoot
-    v-slot="slotProps"
-    data-slot="navigation-menu"
-    :data-viewport="viewport"
-    v-bind="forwarded"
-    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
-  >
-    <slot v-bind="slotProps" />
-    <NavigationMenuViewport v-if="viewport" />
-  </NavigationMenuRoot>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue b/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
deleted file mode 100644
index 395dc2d..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<NavigationMenuContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuContent
-    data-slot="navigation-menu-content"
-    v-bind="forwarded"
-    :class="cn(
-      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-      'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
-      props.class,
-    )"
-  >
-    <slot />
-  </NavigationMenuContent>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
deleted file mode 100644
index 2558371..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuIndicatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuIndicator
-    data-slot="navigation-menu-indicator"
-    v-bind="forwardedProps"
-    :class="cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', props.class)"
-  >
-    <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-  </NavigationMenuIndicator>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue b/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
deleted file mode 100644
index 1a8595b..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuItem } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <NavigationMenuItem
-    data-slot="navigation-menu-item"
-    v-bind="delegatedProps"
-    :class="cn('relative', props.class)"
-  >
-    <slot />
-  </NavigationMenuItem>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue b/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
deleted file mode 100644
index 07f16a6..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuLink,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<NavigationMenuLinkEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuLink
-    data-slot="navigation-menu-link"
-    v-bind="forwarded"
-    :class="cn('data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
-  >
-    <slot />
-  </NavigationMenuLink>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuList.vue b/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
deleted file mode 100644
index a702d70..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuList, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuList
-    data-slot="navigation-menu-list"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'group flex flex-1 list-none items-center justify-center gap-1',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </NavigationMenuList>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue b/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
deleted file mode 100644
index 15f8c43..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronDown } from "@lucide/vue"
-import {
-  NavigationMenuTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { navigationMenuTriggerStyle } from "."
-
-const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuTrigger
-    data-slot="navigation-menu-trigger"
-    v-bind="forwardedProps"
-    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
-  >
-    <slot />
-    <ChevronDown
-      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuTrigger>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
deleted file mode 100644
index 74edf86..0000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuViewportProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuViewport,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
-    <NavigationMenuViewport
-      data-slot="navigation-menu-viewport"
-      v-bind="forwardedProps"
-      :class="
-        cn(
-          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
-          props.class,
-        )
-      "
-    />
-  </div>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/index.ts b/resources/js/components/ui/navigation-menu/index.ts
deleted file mode 100644
index 9005591..0000000
--- a/resources/js/components/ui/navigation-menu/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { cva } from "class-variance-authority"
-
-export { default as NavigationMenu } from "./NavigationMenu.vue"
-export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
-export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
-export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
-export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
-export { default as NavigationMenuList } from "./NavigationMenuList.vue"
-export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
-export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
-
-export const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
-)
diff --git a/resources/js/composables/useCalendarConfig.ts b/resources/js/composables/useCalendarConfig.ts
index aa1474a..8a57d31 100644
--- a/resources/js/composables/useCalendarConfig.ts
+++ b/resources/js/composables/useCalendarConfig.ts
@@ -5,7 +5,11 @@ import interactionPlugin from '@fullcalendar/vue3/interaction';
 import formaTheme from '@fullcalendar/vue3/themes/forma';
 import timeGridPlugin from '@fullcalendar/vue3/timegrid';
 import { computed, type Ref } from 'vue';
-import { toDateInputValue, toTimeInputValue } from './useDateFormatter';
+import {
+    scrollTimeBeforeNow,
+    toDateInputValue,
+    toTimeInputValue,
+} from './useDateFormatter';
 
 export interface CalendarHandlers {
     initialView: string;
@@ -29,18 +33,32 @@ export function useCalendarConfig(
     handlers: CalendarHandlers,
 ) {
     const calendarEvents = computed(() =>
-        events.value.map((event) => ({
-            id: String(event.id),
-            title: event.title,
-            start: event.start_at,
-            end: event.end_at,
-            class: event.has_video
-                ? 'taskly-event event-video'
-                : 'taskly-event event-standard',
-            extendedProps: { hasVideo: event.has_video },
-        })),
+        events.value.map((event) => {
+            const classes = ['taskly-event'];
+            if (event.is_declined) {
+                classes.push('event-declined');
+            } else if (event.has_video) {
+                classes.push('event-video');
+            } else {
+                classes.push('event-standard');
+            }
+
+            return {
+                id: String(event.id),
+                title: event.title,
+                start: event.start_at,
+                end: event.end_at,
+                class: classes.join(' '),
+                extendedProps: {
+                    hasVideo: event.has_video,
+                    isDeclined: Boolean(event.is_declined),
+                },
+            };
+        }),
     );
 
+    const scrollTime = scrollTimeBeforeNow();
+
     const calendarOptions = computed<CalendarOptions>(() => ({
         plugins: [formaTheme, interactionPlugin, dayGridPlugin, timeGridPlugin],
         initialView: handlers.initialView,
@@ -72,7 +90,7 @@ export function useCalendarConfig(
         locale: 'en-gb',
         firstDay: 1,
         nowIndicator: true,
-        scrollTime: toTimeInputValue(new Date()),
+        scrollTime,
         snapDuration: '00:15:00',
         selectable: true,
         unselectAuto: false,
@@ -86,6 +104,11 @@ export function useCalendarConfig(
                 ? 'New event'
                 : arg.event.title || 'Untitled event';
 
+            if (arg.event.extendedProps.isDeclined) {
+                content.classList.add('taskly-event-declined');
+                title.classList.add('taskly-event-declined-title');
+            }
+
             if (arg.view.type === 'dayGridMonth') {
                 content.append(title);
 
diff --git a/resources/js/composables/useDateFormatter.ts b/resources/js/composables/useDateFormatter.ts
index 00157b5..f7199a0 100644
--- a/resources/js/composables/useDateFormatter.ts
+++ b/resources/js/composables/useDateFormatter.ts
@@ -112,3 +112,23 @@ export const fromDatetimeParts = (date: string, time: string): string => {
 
     return parsed.toISOString();
 };
+
+/**
+ * Return the current time as an ISO 8601 string.
+ */
+export const nowIso = (): string => new Date().toISOString();
+
+/**
+ * Return a "HH:mm" scroll-time value offset minutes before now, clamped to
+ * midnight, so that the now-indicator is visible with context above it in
+ * FullCalendar time-grid views.
+ */
+export const scrollTimeBeforeNow = (offsetMinutes = 120): string => {
+    const now = new Date();
+    const scrollDate = new Date(now.getTime() - offsetMinutes * 60 * 1000);
+    // Clamp to midnight when the offset crosses into the previous day
+    if (scrollDate.getDate() !== now.getDate()) {
+        scrollDate.setHours(0, 0, 0, 0);
+    }
+    return toTimeInputValue(scrollDate);
+};
diff --git a/resources/js/composables/useEventDialog.ts b/resources/js/composables/useEventDialog.ts
index 6552e1e..0dd1980 100644
--- a/resources/js/composables/useEventDialog.ts
+++ b/resources/js/composables/useEventDialog.ts
@@ -25,8 +25,14 @@ export function useEventDialog({ events, focusOn }: EventDialogOptions) {
     const urlEventId = computed(() => {
         if (typeof window === 'undefined') return null;
 
-        const url = new URL(page.url, window.location.origin);
-        const id = parseInt(url.searchParams.get('id') ?? '', 10);
+        const currentUrl = page.url || window.location.href;
+        const url = new URL(currentUrl, window.location.origin);
+        let idStr = url.searchParams.get('id');
+        if (!idStr && typeof window !== 'undefined') {
+            const winUrl = new URL(window.location.href);
+            idStr = winUrl.searchParams.get('id');
+        }
+        const id = parseInt(idStr ?? '', 10);
         return Number.isNaN(id) ? null : id;
     });
 
@@ -118,9 +124,11 @@ export function useEventDialog({ events, focusOn }: EventDialogOptions) {
 
     watch(
         urlEventId,
-        (id) => {
+        (id, oldId) => {
             if (id === null) {
-                close();
+                if (oldId && isOpen.value) {
+                    close();
+                }
             } else if (event.value?.id !== id) {
                 open(id);
             }
diff --git a/resources/js/layouts/app/AppHeaderLayout.vue b/resources/js/layouts/app/AppHeaderLayout.vue
deleted file mode 100644
index 0f0f84e..0000000
--- a/resources/js/layouts/app/AppHeaderLayout.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import AppContent from '@/components/AppContent.vue';
-import AppHeader from '@/components/AppHeader.vue';
-import AppShell from '@/components/AppShell.vue';
-import type { BreadcrumbItemType } from '@/types';
-
-interface Props {
-    breadcrumbs?: BreadcrumbItemType[];
-}
-
-withDefaults(defineProps<Props>(), {
-    breadcrumbs: () => [],
-});
-</script>
-
-<template>
-    <AppShell class="flex-col">
-        <AppHeader :breadcrumbs="breadcrumbs" />
-        <AppContent>
-            <slot />
-        </AppContent>
-    </AppShell>
-</template>
diff --git a/resources/js/layouts/auth/AuthSplitLayout.vue b/resources/js/layouts/auth/AuthSplitLayout.vue
deleted file mode 100644
index 3da79a4..0000000
--- a/resources/js/layouts/auth/AuthSplitLayout.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
-import { home } from '@/routes';
-import { Link, usePage } from '@inertiajs/vue3';
-
-const page = usePage();
-const name = page.props.name;
-const quote = page.props.quote;
-
-defineProps<{
-    title?: string;
-    description?: string;
-}>();
-</script>
-
-<template>
-    <div
-        class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0"
-    >
-        <div
-            class="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r"
-        >
-            <div class="absolute inset-0 bg-zinc-900" />
-            <Link
-                :href="home()"
-                class="relative z-20 flex items-center text-lg font-medium"
-            >
-                <AppLogoIcon class="mr-2 size-8 fill-current text-white" />
-                {{ name }}
-            </Link>
-            <div v-if="quote" class="relative z-20 mt-auto">
-                <blockquote class="space-y-2">
-                    <p class="text-lg">&ldquo;{{ quote.message }}&rdquo;</p>
-                    <footer class="text-sm text-neutral-300">
-                        {{ quote.author }}
-                    </footer>
-                </blockquote>
-            </div>
-        </div>
-        <div class="lg:p-8">
-            <div
-                class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"
-            >
-                <div class="flex flex-col space-y-2 text-center">
-                    <h1 class="text-xl font-medium tracking-tight" v-if="title">
-                        {{ title }}
-                    </h1>
-                    <p class="text-sm text-muted-foreground" v-if="description">
-                        {{ description }}
-                    </p>
-                </div>
-                <slot />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/pages/Calendar/Index.vue b/resources/js/pages/Calendar/Index.vue
index 19a96bc..621990c 100644
--- a/resources/js/pages/Calendar/Index.vue
+++ b/resources/js/pages/Calendar/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { reactive, ref, toRef, watch } from 'vue';
-import { Head } from '@inertiajs/vue3';
+import { onMounted, onUnmounted, reactive, ref, toRef, watch } from 'vue';
+import { Head, usePage } from '@inertiajs/vue3';
 import FullCalendar, {
     type CalendarApi as FullCalendarApi,
 } from '@fullcalendar/vue3';
@@ -23,6 +23,8 @@ const props = defineProps<{
     end?: string | null;
 }>();
 
+const page = usePage();
+
 const breadcrumbs: BreadcrumbItem[] = [
     { title: 'Calendar', href: '/calendar' },
 ];
@@ -60,9 +62,9 @@ const dialog = reactive(
 );
 const hasDragSelection = ref(false);
 
-const openCreateAtRange = (start: Date, end: Date, allDay: boolean) => {
+const openCreateAtRange = (start: Date, end: Date) => {
     hasDragSelection.value = true;
-    dialog.openCreateAtRange(start, end, allDay);
+    dialog.openCreateAtRange(start, end);
 };
 
 const openEvent = (id: string) => {
@@ -70,15 +72,38 @@ const openEvent = (id: string) => {
     dialog.open(id);
 };
 
-watch(
-    () => dialog.isOpen,
-    (isOpen, wasOpen) => {
-        if (!isOpen && wasOpen && hasDragSelection.value) {
-            hasDragSelection.value = false;
-            calendarRef.value?.getApi().unselect();
-        }
-    },
-);
+const handleEventResponded = (response: 'accepted' | 'declined') => {
+    if (!dialog.event) return;
+
+    dialog.event = {
+        ...dialog.event,
+        user_participation_status: response,
+        attendees: dialog.event.attendees?.map((a) =>
+            a.id === page.props.auth.user.id
+                ? { ...a, participation_status: response }
+                : a,
+        ),
+    };
+
+    const existing = localEvents.value?.find((e) => e.id === dialog.event?.id);
+    if (existing) {
+        existing.is_declined = response === 'declined';
+    } else if (localEvents.value && dialog.event) {
+        localEvents.value.push({
+            id: dialog.event.id,
+            title: dialog.event.title,
+            start_at: dialog.event.start_at,
+            end_at: dialog.event.end_at,
+            has_video: dialog.event.has_video,
+            is_declined: response === 'declined',
+        });
+    }
+};
+
+const handleOpenEventMessage = (e: Event) => {
+    const { eventId } = (e as CustomEvent<{ eventId: number }>).detail;
+    openEvent(String(eventId));
+};
 
 const { calendarOptions } = useCalendarConfig(
     toRef(() => localEvents.value || []),
@@ -91,6 +116,21 @@ const { calendarOptions } = useCalendarConfig(
         onRangeChange: view.onRangeChange,
     },
 );
+
+watch(
+    () => dialog.isOpen,
+    (isOpen, wasOpen) => {
+        if (!isOpen && wasOpen && hasDragSelection.value) {
+            hasDragSelection.value = false;
+            calendarRef.value?.getApi().unselect();
+        }
+    },
+);
+
+onMounted(() => window.addEventListener('open-event', handleOpenEventMessage));
+onUnmounted(() =>
+    window.removeEventListener('open-event', handleOpenEventMessage),
+);
 </script>
 
 <template>
@@ -186,6 +226,7 @@ const { calendarOptions } = useCalendarConfig(
             :default-end="dialog.defaultEnd"
             :event="dialog.event"
             :is-loading="dialog.isLoading"
+            @responded="handleEventResponded"
         />
     </AppLayout>
 </template>
@@ -226,4 +267,15 @@ body {
     --fc-forma-event: var(--chart-2);
     --fc-forma-event-contrast: #fff;
 }
+
+.taskly-full-calendar .event-declined {
+    --fc-forma-event: var(--muted);
+    --fc-forma-event-contrast: var(--muted-foreground);
+    opacity: 0.65;
+    border-style: dashed !important;
+}
+
+.taskly-full-calendar .taskly-event-declined-title {
+    text-decoration: line-through;
+}
 </style>
diff --git a/resources/js/pages/Tasks.vue b/resources/js/pages/Tasks.vue
index c096f05..f7dc372 100644
--- a/resources/js/pages/Tasks.vue
+++ b/resources/js/pages/Tasks.vue
@@ -6,11 +6,10 @@ import TaskFilters from '@/components/tasks/TaskFilters.vue';
 import TasksPageSkeleton from '@/components/tasks/TasksPageSkeleton.vue';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { ensureMinimumDelay } from '@/lib/utils';
-import { index, show } from '@/routes/tasks';
-import { toast } from 'vue-sonner';
+import { index } from '@/routes/tasks';
 import type { BreadcrumbItem, Column, Tag, Task, TeamMember } from '@/types';
 import { Head, router, usePage } from '@inertiajs/vue3';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 const props = defineProps<{
     columns?: Column[];
@@ -79,9 +78,9 @@ watch(
 
 watch(
     taskIdFromUrl,
-    async (id) => {
+    (id) => {
         if (id) {
-            let partialTask = undefined;
+            let partialTask: Task | undefined;
             if (localColumns.value) {
                 for (const col of localColumns.value) {
                     partialTask = col.tasks.find((t) => t.id === id);
@@ -89,33 +88,10 @@ watch(
                 }
             }
 
-            if (partialTask) {
-                if (!taskToEdit.value || taskToEdit.value.id !== id) {
-                    taskToEdit.value = partialTask;
-                }
-                isEditModalOpen.value = true;
-            } else {
-                taskToEdit.value = { id } as Task;
-                try {
-                    const response = await fetch(show(id).url, {
-                        headers: { Accept: 'application/json' },
-                    });
-                    if (!response.ok) throw new Error('Task not found');
-                    if (!isEditModalOpen.value) {
-                        isEditModalOpen.value = true;
-                    }
-                } catch (error) {
-                    console.error(error);
-                    toast.error('Task not found');
-                    isEditModalOpen.value = false;
-                    taskToEdit.value = null;
-                    if (typeof window !== 'undefined') {
-                        const url = new URL(window.location.href);
-                        url.searchParams.delete('id');
-                        window.history.replaceState({}, '', url.toString());
-                    }
-                }
+            if (!taskToEdit.value || taskToEdit.value.id !== id) {
+                taskToEdit.value = partialTask ?? ({ id } as Task);
             }
+            isEditModalOpen.value = true;
         } else {
             isEditModalOpen.value = false;
         }
@@ -123,6 +99,28 @@ watch(
     { immediate: true },
 );
 
+const handleOpenTaskEvent = (e: Event) => {
+    const { taskId } = (e as CustomEvent<{ taskId: number }>).detail;
+
+    let partialTask: Task | undefined;
+    if (localColumns.value) {
+        for (const col of localColumns.value) {
+            partialTask = col.tasks.find((t) => t.id === taskId);
+            if (partialTask) break;
+        }
+    }
+
+    taskToEdit.value = partialTask ?? ({ id: taskId } as Task);
+    isEditModalOpen.value = true;
+
+    const url = new URL(window.location.href);
+    url.searchParams.set('id', taskId.toString());
+    window.history.replaceState(null, '', url.pathname + url.search);
+};
+
+onMounted(() => window.addEventListener('open-task', handleOpenTaskEvent));
+onUnmounted(() => window.removeEventListener('open-task', handleOpenTaskEvent));
+
 watch(isEditModalOpen, (isOpen) => {
     const url = new URL(window.location.href);
     if (isOpen && taskToEdit.value) {
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 58e7369..28c10e0 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -160,6 +160,13 @@ export interface AppNotificationData {
     inviter?: string | null;
     has_video?: boolean;
     response?: 'needs_action' | 'accepted' | 'declined' | 'tentative';
+    task_id?: number;
+    task_title?: string;
+    assigner?: string;
+    commenter?: string;
+    comment?: string;
+    due_date?: string | null;
+    is_reply?: boolean;
     [key: string]: unknown;
 }
 
@@ -167,7 +174,8 @@ export interface AppNotificationData {
  * Notification type aliases — must match the TYPE_ALIASES map in
  * App\Http\Resources\NotificationResource.
  */
-export type NotificationType = 'event_invitation' | (string & {});
+export type NotificationType =
+    'event_invitation' | 'task_assigned' | 'task_commented' | (string & {});
 
 export interface AppNotification {
     id: string;
@@ -271,6 +279,7 @@ export interface CalendarEventIndex {
     start_at: string;
     end_at: string;
     has_video: boolean;
+    is_declined?: boolean;
 }
 
 export interface CalendarEvent {
@@ -285,6 +294,8 @@ export interface CalendarEvent {
     room_name: string | null;
     has_video: boolean;
     status: 'confirmed' | 'cancelled';
+    user_participation_status?:
+        'needs_action' | 'accepted' | 'declined' | 'tentative' | null;
     organizer?: {
         id: number;
         name: string;
@@ -292,5 +303,7 @@ export interface CalendarEvent {
     attendees?: {
         id: number;
         name: string;
+        participation_status?:
+            'needs_action' | 'accepted' | 'declined' | 'tentative';
     }[];
 }
diff --git a/tests/Feature/TaskNotificationTest.php b/tests/Feature/TaskNotificationTest.php
new file mode 100644
index 0000000..f13f9fb
--- /dev/null
+++ b/tests/Feature/TaskNotificationTest.php
@@ -0,0 +1,228 @@
+<?php
+
+use App\Models\Column;
+use App\Models\Task;
+use App\Models\Team;
+use App\Models\TeamMembership;
+use App\Models\User;
+use App\Notifications\TaskAssigned;
+use App\Notifications\TaskCommented;
+use Illuminate\Support\Facades\Notification;
+
+beforeEach(function () {
+    $this->team = Team::factory()->create();
+    $this->user = User::factory()->create(['team_id' => $this->team->id]);
+    TeamMembership::create(['team_id' => $this->team->id, 'user_id' => $this->user->id]);
+
+    $this->assignee = User::factory()->create(['team_id' => $this->team->id]);
+    TeamMembership::create(['team_id' => $this->team->id, 'user_id' => $this->assignee->id]);
+
+    $this->creator = User::factory()->create(['team_id' => $this->team->id]);
+    TeamMembership::create(['team_id' => $this->team->id, 'user_id' => $this->creator->id]);
+
+    $this->column = Column::create(['team_id' => $this->team->id, 'name' => 'To Do', 'order' => 1]);
+
+    $this->makeTask = fn (array $overrides = []) => Task::factory()->create(array_merge([
+        'team_id' => $this->team->id,
+        'column_id' => $this->column->id,
+        'created_by' => $this->creator->id,
+        'assigned_to' => null,
+    ], $overrides));
+});
+
+describe('assignment notifications', function () {
+    test('notifies the assignee when a task is created', function () {
+        Notification::fake();
+
+        $this->actingAs($this->user)
+            ->post(route('tasks.store'), [
+                'title' => 'New task',
+                'assigned_to' => $this->assignee->id,
+            ])
+            ->assertRedirect(route('tasks.index'));
+
+        Notification::assertSentTo(
+            $this->assignee,
+            TaskAssigned::class,
+            fn (TaskAssigned $notification, array $channels) => $channels === ['database', 'mail']
+        );
+        Notification::assertNotSentTo($this->user, TaskAssigned::class);
+    });
+
+    test('does not notify when the actor assigns the task to themselves', function () {
+        Notification::fake();
+
+        $this->actingAs($this->user)
+            ->post(route('tasks.store'), [
+                'title' => 'Self assigned task',
+                'assigned_to' => $this->user->id,
+            ])
+            ->assertRedirect(route('tasks.index'));
+
+        Notification::assertNothingSent();
+    });
+
+    test('notifies the new assignee when a task is reassigned', function () {
+        Notification::fake();
+        $task = ($this->makeTask)();
+
+        $this->actingAs($this->user)
+            ->put(route('tasks.update', $task), [
+                'assigned_to' => $this->assignee->id,
+            ])
+            ->assertRedirect();
+
+        Notification::assertSentTo($this->assignee, TaskAssigned::class);
+    });
+
+    test('does not notify the previous assignee when a task is reassigned', function () {
+        Notification::fake();
+        $previous = User::factory()->create(['team_id' => $this->team->id]);
+        TeamMembership::create(['team_id' => $this->team->id, 'user_id' => $previous->id]);
+        $task = ($this->makeTask)(['assigned_to' => $previous->id]);
+
+        $this->actingAs($this->user)
+            ->put(route('tasks.update', $task), [
+                'assigned_to' => $this->assignee->id,
+            ])
+            ->assertRedirect();
+
+        Notification::assertSentTo($this->assignee, TaskAssigned::class);
+        Notification::assertNotSentTo($previous, TaskAssigned::class);
+    });
+
+    test('stores the assignment notification in the database', function () {
+        $this->actingAs($this->user)
+            ->post(route('tasks.store'), [
+                'title' => 'Notify me',
+                'assigned_to' => $this->assignee->id,
+            ])
+            ->assertRedirect(route('tasks.index'));
+
+        $notification = $this->assignee->notifications()
+            ->where('type', TaskAssigned::class)
+            ->first();
+
+        expect($notification)->not->toBeNull()
+            ->and($notification->data['task_id'])->toBe(Task::first()->id)
+            ->and($notification->data['task_title'])->toBe('Notify me')
+            ->and($notification->data['assigner'])->toBe($this->user->name)
+            ->and($this->user->notifications()->count())->toBe(0);
+    });
+
+    test('maps the assignment notification to a frontend alias', function () {
+        $this->actingAs($this->user)
+            ->post(route('tasks.store'), [
+                'title' => 'Aliased task',
+                'assigned_to' => $this->assignee->id,
+            ])
+            ->assertRedirect(route('tasks.index'));
+
+        $this->actingAs($this->assignee)
+            ->getJson(route('notifications.index'))
+            ->assertJsonPath('data.0.type', 'task_assigned');
+    });
+
+    test('removes task notifications when the task is deleted', function () {
+        $task = ($this->makeTask)(['assigned_to' => $this->assignee->id]);
+
+        $this->actingAs($this->user)
+            ->post(route('tasks.comments.store', $task), ['body' => 'On this task'])
+            ->assertStatus(204);
+
+        expect($this->assignee->notifications()->count())->toBe(1);
+
+        $this->actingAs($this->user)
+            ->delete(route('tasks.destroy', $task))
+            ->assertRedirect();
+
+        $this->assertDatabaseMissing('notifications', ['data->task_id' => $task->id]);
+    });
+});
+
+describe('comment notifications', function () {
+    test('notifies the assignee and the creator when someone comments', function () {
+        Notification::fake();
+        $task = ($this->makeTask)(['assigned_to' => $this->assignee->id]);
+
+        $this->actingAs($this->user)
+            ->post(route('tasks.comments.store', $task), [
+                'body' => 'A useful comment',
+            ])
+            ->assertStatus(204);
+
+        Notification::assertSentTo(
+            $this->assignee,
+            TaskCommented::class,
+            fn (TaskCommented $notification, array $channels) => $channels === ['database', 'mail']
+        );
+        Notification::assertSentTo($this->creator, TaskCommented::class);
+        Notification::assertNotSentTo($this->user, TaskCommented::class);
+    });
+
+    test('does not notify the author of their own comment', function () {
+        Notification::fake();
+        $task = ($this->makeTask)(['assigned_to' => $this->user->id]);
+
+        $this->actingAs($this->user)
+            ->post(route('tasks.comments.store', $task), [
+                'body' => 'Commenting on my own task',
+            ])
+            ->assertStatus(204);
+
+        Notification::assertNotSentTo($this->user, TaskCommented::class);
+        Notification::assertSentTo($this->creator, TaskCommented::class);
+    });
+
+    test('notifies the parent comment author when replying', function () {
+        Notification::fake();
+        $task = ($this->makeTask)();
+
+        $parent = $task->comments()->create([
+            'user_id' => $this->assignee->id,
+            'body' => 'Root comment',
+        ]);
+
+        $this->actingAs($this->user)
+            ->post(route('tasks.comments.store', $task), [
+                'body' => 'A reply to the root comment',
+                'parent_id' => $parent->id,
+            ])
+            ->assertStatus(204);
+
+        Notification::assertSentTo($this->assignee, TaskCommented::class);
+        Notification::assertSentTo($this->creator, TaskCommented::class);
+    });
+
+    test('sends a single notification when a stakeholder holds several roles', function () {
+        Notification::fake();
+        $task = ($this->makeTask)(['assigned_to' => $this->creator->id]);
+
+        $this->actingAs($this->user)
+            ->post(route('tasks.comments.store', $task), [
+                'body' => 'Only one notification for the creator',
+            ])
+            ->assertStatus(204);
+
+        Notification::assertSentToTimes($this->creator, TaskCommented::class, 1);
+    });
+
+    test('stores the comment notification with its payload and alias', function () {
+        $task = ($this->makeTask)(['assigned_to' => $this->assignee->id, 'title' => 'Commented task']);
+
+        $this->actingAs($this->user)
+            ->post(route('tasks.comments.store', $task), [
+                'body' => 'Looks good to me',
+            ])
+            ->assertStatus(204);
+
+        $response = $this->actingAs($this->assignee)
+            ->getJson(route('notifications.index'));
+
+        $response->assertJsonPath('data.0.type', 'task_commented');
+        expect($response->json('data.0.data.task_id'))->toBe($task->id)
+            ->and($response->json('data.0.data.task_title'))->toBe('Commented task')
+            ->and($response->json('data.0.data.commenter'))->toBe($this->user->name)
+            ->and($response->json('data.0.data.comment'))->toContain('Looks good to me');
+    });
+});