diff --git a/app/Http/Controllers/TaskController.php b/app/Http/Controllers/TaskController.php
index fa1a00a..378c26e 100644
--- a/app/Http/Controllers/TaskController.php
+++ b/app/Http/Controllers/TaskController.php
@@ -7,12 +7,14 @@
 use App\Models\User;
 use App\Services\TaskService;
 use App\Http\Resources\ColumnResource;
+use App\Http\Resources\TaskResource;
 use Inertia\Inertia;
 use Inertia\Response;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\TaskCreateRequest;
 use App\Http\Requests\TaskCommentStoreRequest;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 use App\Http\Requests\TaskUpdateRequest;
 
@@ -36,10 +38,6 @@ public function index(Request $request): Response
                     ->with([
                         'creator:id,name',
                         'assignee:id,name',
-                        'comments' => fn($query) => $query
-                            ->whereNull('parent_id')
-                            ->with(['user:id,name', 'replies']),
-                        'events.actor:id,name',
                     ])
                     ->orderBy('order')
                     ->paginate(10)
@@ -57,6 +55,24 @@ public function index(Request $request): Response
         ]);
     }
 
+    public function show(Request $request, Task $task): JsonResponse
+    {
+        if ($task->team_id !== $request->user()->team_id) {
+            abort(403, 'You are not authorized to view this task.');
+        }
+
+        $task->load([
+            'creator:id,name',
+            'assignee:id,name',
+            'comments' => fn($query) => $query
+                ->whereNull('parent_id')
+                ->with(['user:id,name', 'replies']),
+            'events.actor:id,name',
+        ]);
+
+        return response()->json((new TaskResource($task))->resolve());
+    }
+
     public function store(TaskCreateRequest $request): RedirectResponse
     {
         $this->taskService->createTask($request->safe()->all(), $request->user());
diff --git a/resources/js/components/tasks/TaskActivityDiscussionPanel.vue b/resources/js/components/tasks/TaskActivityDiscussionPanel.vue
new file mode 100644
index 0000000..0131b4e
--- /dev/null
+++ b/resources/js/components/tasks/TaskActivityDiscussionPanel.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import InputError from '@/components/InputError.vue';
+import TaskCommentThreadItem from '@/components/tasks/TaskCommentThreadItem.vue';
+import TaskRichTextEditor from '@/components/tasks/TaskRichTextEditor.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import type { Task, TaskComment, TaskEvent } from '@/types';
+import { Calendar, ClockAlert, MessageSquarePlus } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps<{
+    isLoadingDetails: boolean;
+    timelineEvents: TaskEvent[];
+    getEventLabel: (event: TaskEvent) => string;
+    formatTimelineDate: (value: string) => string;
+    activeTask: Task | null;
+    isOverdue: boolean;
+    commentsList: TaskComment[];
+    commentBody: string;
+    commentError?: string;
+    commentProcessing: boolean;
+    activeReplyToId: number | null;
+    replyBody: string;
+    replyError?: string;
+    postingReply: boolean;
+    formatDate: (value: string) => string;
+    getInitials: (value: string) => string;
+}>();
+
+const emit = defineEmits<{
+    submitComment: [];
+    updateCommentBody: [value: string];
+    startReply: [commentId: number];
+    cancelReply: [];
+    updateReplyBody: [value: string];
+    submitReply: [commentId: number];
+}>();
+
+const cleanedCommentBody = computed(() => {
+    return props.commentBody
+        .replace(/<[^>]*>/g, ' ')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+});
+
+const dueDateLabel = computed(() => {
+    if (!props.activeTask?.due_date) return null;
+
+    return new Date(props.activeTask.due_date).toLocaleDateString('en-US', {
+        day: 'numeric',
+        month: 'short',
+    });
+});
+
+const daysInColumnLabel = computed(() => {
+    const days = props.activeTask?.days_in_column;
+
+    if (days === null || days === undefined) return null;
+    return days === 0 ? 'Today' : `${days}d`;
+});
+</script>
+
+<template>
+    <div
+        class="border-t border-border p-6 pt-4 xl:overflow-y-auto xl:overscroll-contain xl:border-t-0 xl:border-l xl:pl-8"
+    >
+        <div
+            v-if="isLoadingDetails"
+            class="mb-6 flex items-center gap-2 rounded-lg border border-border/70 bg-muted/20 px-3 py-2 text-sm text-muted-foreground"
+        >
+            <Spinner class="size-4" />
+            Loading task details...
+        </div>
+
+        <div class="mb-6 space-y-3">
+            <h3 class="text-base font-semibold">Activity</h3>
+
+            <div
+                v-if="timelineEvents.length === 0"
+                class="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground"
+            >
+                No activity yet.
+            </div>
+
+            <ol v-else class="space-y-2">
+                <li
+                    v-for="event in timelineEvents"
+                    :key="event.id"
+                    class="rounded-lg border border-border/70 bg-muted/20 px-3 py-2 text-sm"
+                >
+                    <p class="font-medium text-foreground">
+                        {{ getEventLabel(event) }}
+                    </p>
+                    <p class="text-xs text-muted-foreground">
+                        {{ formatTimelineDate(event.created_at) }}
+                    </p>
+                </li>
+            </ol>
+        </div>
+
+        <div class="mb-4 space-y-3">
+            <h3 class="text-base font-semibold">Discussion</h3>
+            <div
+                class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground"
+            >
+                <Badge
+                    v-if="dueDateLabel"
+                    :variant="isOverdue ? 'destructive' : 'secondary'"
+                    class="gap-1"
+                >
+                    <Calendar class="size-3" />
+                    {{ dueDateLabel }}
+                </Badge>
+                <Badge
+                    v-if="daysInColumnLabel"
+                    variant="secondary"
+                    class="gap-1"
+                >
+                    <ClockAlert class="size-3" />
+                    {{ daysInColumnLabel }}
+                </Badge>
+            </div>
+        </div>
+
+        <form class="space-y-3" @submit.prevent="emit('submitComment')">
+            <div class="grid gap-2">
+                <Label>Leave a comment</Label>
+                <TaskRichTextEditor
+                    :model-value="commentBody"
+                    placeholder="Share progress, blockers, or next steps..."
+                    @update:model-value="emit('updateCommentBody', $event)"
+                />
+                <InputError :message="commentError" />
+            </div>
+
+            <Button
+                type="submit"
+                :disabled="commentProcessing || !cleanedCommentBody"
+            >
+                <MessageSquarePlus class="size-4" />
+                Post comment
+            </Button>
+        </form>
+
+        <div class="mt-4 space-y-3">
+            <div
+                v-if="commentsList.length === 0"
+                class="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground"
+            >
+                No comments yet. Start the discussion.
+            </div>
+
+            <TaskCommentThreadItem
+                v-for="comment in commentsList"
+                :key="comment.id"
+                :comment="comment"
+                :active-reply-to-id="activeReplyToId"
+                :reply-body="replyBody"
+                :reply-error="replyError"
+                :posting-reply="postingReply"
+                :format-date="formatDate"
+                :get-initials="getInitials"
+                @start-reply="emit('startReply', $event)"
+                @cancel-reply="emit('cancelReply')"
+                @update-reply-body="emit('updateReplyBody', $event)"
+                @submit-reply="emit('submitReply', $event)"
+            />
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/tasks/TaskEditDialog.vue b/resources/js/components/tasks/TaskEditDialog.vue
index c3b232b..55583d4 100644
--- a/resources/js/components/tasks/TaskEditDialog.vue
+++ b/resources/js/components/tasks/TaskEditDialog.vue
@@ -1,39 +1,19 @@
 <script setup lang="ts">
-import InputError from '@/components/InputError.vue';
-import TaskAssigneeSelect from '@/components/tasks/TaskAssigneeSelect.vue';
-import TaskCommentThreadItem from '@/components/tasks/TaskCommentThreadItem.vue';
-import TaskRichTextEditor from '@/components/tasks/TaskRichTextEditor.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import TaskActivityDiscussionPanel from '@/components/tasks/TaskActivityDiscussionPanel.vue';
+import TaskEditFormPanel from '@/components/tasks/TaskEditFormPanel.vue';
 import {
     Dialog,
     DialogContent,
     DialogDescription,
-    DialogFooter,
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
 import { useInitials } from '@/composables/useInitials';
-import { update } from '@/routes/tasks';
+import { show, update } from '@/routes/tasks';
 import comments from '@/routes/tasks/comments';
-import type {
-    AppPageProps,
-    Task,
-    TaskComment,
-    TaskEvent,
-    TeamMember,
-} from '@/types';
-import { useForm, usePage } from '@inertiajs/vue3';
-import {
-    Calendar,
-    ClockAlert,
-    MessageSquarePlus,
-    Save,
-    X,
-} from 'lucide-vue-next';
+import type { Task, TaskComment, TaskEvent, TeamMember } from '@/types';
+import { useForm } from '@inertiajs/vue3';
+import { X } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 
@@ -42,11 +22,14 @@ const props = defineProps<{
     teamMembers: TeamMember[];
 }>();
 
-const page = usePage<AppPageProps>();
 const { getInitials } = useInitials();
 const isOpen = defineModel<boolean>('open', { default: false });
+const taskDetails = ref<Task | null>(null);
+const isLoadingDetails = ref(false);
 const commentsList = ref<TaskComment[]>([]);
 
+const activeTask = computed(() => taskDetails.value ?? props.task);
+
 const form = useForm({
     title: '',
     description: '',
@@ -73,29 +56,45 @@ const stripRichText = (value: string) => {
         .trim();
 };
 
-const syncCommentsFromLatestPage = () => {
-    if (!props.task) return false;
+const hydrateFormsFromTask = (task: Task) => {
+    form.title = task.title;
+    form.description = task.description || '';
+    form.due_date = task.due_date
+        ? new Date(task.due_date).toISOString().slice(0, 16)
+        : '';
+    form.assigned_to = task.assigned_to ?? null;
+    commentsList.value = [...(task.comments ?? [])];
+};
 
-    const pageColumns = ((page.props as unknown as { columns?: unknown[] })
-        .columns ?? []) as Array<{ tasks?: Task[] }>;
+const loadTaskDetails = async (taskId: number) => {
+    isLoadingDetails.value = true;
 
-    for (const column of pageColumns) {
-        const foundTask = column.tasks?.find((candidate) => {
-            return candidate.id === props.task?.id;
+    try {
+        const response = await fetch(show(taskId).url, {
+            headers: {
+                Accept: 'application/json',
+            },
         });
 
-        if (foundTask) {
-            commentsList.value = [...(foundTask.comments ?? [])];
-            return true;
+        if (!response.ok) {
+            throw new Error('Could not load task details');
         }
-    }
 
-    return false;
+        const task = (await response.json()) as Task;
+        taskDetails.value = task;
+        hydrateFormsFromTask(task);
+        return true;
+    } catch {
+        toast.error('Unable to load task details');
+        return false;
+    } finally {
+        isLoadingDetails.value = false;
+    }
 };
 
 const isOverdue = computed(() => {
-    return props.task?.due_date
-        ? new Date(props.task.due_date) < new Date()
+    return activeTask.value?.due_date
+        ? new Date(activeTask.value.due_date) < new Date()
         : false;
 });
 
@@ -119,7 +118,7 @@ const formatTimelineDate = (value: string) => {
 };
 
 const timelineEvents = computed(() => {
-    return [...(props.task?.events ?? [])].sort((a, b) => {
+    return [...(activeTask.value?.events ?? [])].sort((a, b) => {
         return (
             new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
         );
@@ -157,9 +156,9 @@ const getEventLabel = (event: TaskEvent) => {
 };
 
 const submit = () => {
-    if (!props.task) return;
+    if (!activeTask.value) return;
 
-    form.put(update(props.task.id).url, {
+    form.put(update(activeTask.value.id).url, {
         preserveScroll: true,
         onSuccess: () => {
             isOpen.value = false;
@@ -169,17 +168,18 @@ const submit = () => {
 };
 
 const submitComment = () => {
-    if (!props.task) return;
+    if (!activeTask.value) return;
+    const taskId = activeTask.value.id;
 
     const bodyText = stripRichText(commentForm.body);
 
     if (!bodyText) return;
 
-    commentForm.post(comments.store(props.task.id).url, {
+    commentForm.post(comments.store(taskId).url, {
         preserveScroll: true,
         onSuccess: () => {
-            syncCommentsFromLatestPage();
             commentForm.reset('body');
+            void loadTaskDetails(taskId);
             toast.success('Comment posted');
         },
     });
@@ -200,17 +200,18 @@ const cancelReply = () => {
 };
 
 const submitReply = (commentId: number) => {
-    if (!props.task) return;
+    if (!activeTask.value) return;
+    const taskId = activeTask.value.id;
 
     const bodyText = stripRichText(replyForm.body);
     if (!bodyText) return;
 
     replyForm.parent_id = commentId;
-    replyForm.post(comments.store(props.task.id).url, {
+    replyForm.post(comments.store(taskId).url, {
         preserveScroll: true,
         onSuccess: () => {
-            syncCommentsFromLatestPage();
             cancelReply();
+            void loadTaskDetails(taskId);
             toast.success('Reply posted');
         },
     });
@@ -218,19 +219,19 @@ const submitReply = (commentId: number) => {
 
 watch([() => props.task, isOpen], ([task, open]) => {
     if (task && open) {
-        form.title = task.title;
-        form.description = task.description || '';
-        form.due_date = task.due_date
-            ? new Date(task.due_date).toISOString().slice(0, 16)
-            : '';
-        form.assigned_to = task.assigned_to ?? null;
+        taskDetails.value = null;
+        hydrateFormsFromTask(task);
+        void loadTaskDetails(task.id);
         form.clearErrors();
-        commentsList.value = [...(task.comments ?? [])];
-        syncCommentsFromLatestPage();
         commentForm.reset('body');
         commentForm.clearErrors();
         cancelReply();
     }
+
+    if (!open) {
+        taskDetails.value = null;
+        commentsList.value = [];
+    }
 });
 </script>
 
@@ -266,201 +267,42 @@ watch([() => props.task, isOpen], ([task, open]) => {
                 <div
                     class="grid xl:h-[calc(92vh-96px)] xl:grid-cols-[minmax(0,1.1fr)_minmax(420px,0.9fr)]"
                 >
-                    <div class="p-6 xl:pr-8">
-                        <form class="space-y-4" @submit.prevent="submit">
-                            <div class="grid gap-2">
-                                <Label for="edit-task-title">Title</Label>
-                                <Input
-                                    id="edit-task-title"
-                                    type="text"
-                                    placeholder="Enter task title..."
-                                    v-model="form.title"
-                                />
-                                <InputError :message="form.errors.title" />
-                            </div>
-
-                            <div class="grid gap-2">
-                                <Label for="edit-task-description"
-                                    >Description</Label
-                                >
-                                <TaskRichTextEditor
-                                    v-model="form.description"
-                                    placeholder="Add more details..."
-                                    min-height="20rem"
-                                />
-                                <InputError
-                                    :message="form.errors.description"
-                                />
-                            </div>
-
-                            <div class="grid gap-2 sm:grid-cols-2">
-                                <div class="grid gap-2">
-                                    <Label for="edit-task-due-date"
-                                        >Due date</Label
-                                    >
-                                    <Input
-                                        id="edit-task-due-date"
-                                        type="datetime-local"
-                                        v-model="form.due_date"
-                                    />
-                                    <InputError
-                                        :message="form.errors.due_date"
-                                    />
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label>Assigned to</Label>
-                                    <TaskAssigneeSelect
-                                        v-model="form.assigned_to"
-                                        :team-members="teamMembers"
-                                    />
-                                    <InputError
-                                        :message="form.errors.assigned_to"
-                                    />
-                                </div>
-                            </div>
-
-                            <DialogFooter class="pt-2">
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    @click="isOpen = false"
-                                >
-                                    Cancel
-                                </Button>
-                                <Button
-                                    type="submit"
-                                    :disabled="!form.isDirty || form.processing"
-                                >
-                                    <Spinner v-if="form.processing" />
-                                    <Save v-else class="size-4" />
-                                    Save changes
-                                </Button>
-                            </DialogFooter>
-                        </form>
-                    </div>
-
-                    <div
-                        class="border-t border-border p-6 pt-4 xl:overflow-y-auto xl:overscroll-contain xl:border-t-0 xl:border-l xl:pl-8"
-                    >
-                        <div class="mb-6 space-y-3">
-                            <h3 class="text-base font-semibold">Activity</h3>
-
-                            <div
-                                v-if="timelineEvents.length === 0"
-                                class="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground"
-                            >
-                                No activity yet.
-                            </div>
-
-                            <ol v-else class="space-y-2">
-                                <li
-                                    v-for="event in timelineEvents"
-                                    :key="event.id"
-                                    class="rounded-lg border border-border/70 bg-muted/20 px-3 py-2 text-sm"
-                                >
-                                    <p class="font-medium text-foreground">
-                                        {{ getEventLabel(event) }}
-                                    </p>
-                                    <p class="text-xs text-muted-foreground">
-                                        {{
-                                            formatTimelineDate(event.created_at)
-                                        }}
-                                    </p>
-                                </li>
-                            </ol>
-                        </div>
-
-                        <div class="mb-4 space-y-3">
-                            <h3 class="text-base font-semibold">Discussion</h3>
-                            <div
-                                class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground"
-                            >
-                                <Badge
-                                    v-if="task?.due_date"
-                                    :variant="
-                                        isOverdue ? 'destructive' : 'secondary'
-                                    "
-                                    class="gap-1"
-                                >
-                                    <Calendar class="size-3" />
-                                    {{
-                                        new Date(
-                                            task.due_date,
-                                        ).toLocaleDateString('en-US', {
-                                            day: 'numeric',
-                                            month: 'short',
-                                        })
-                                    }}
-                                </Badge>
-                                <Badge
-                                    v-if="task?.days_in_column !== null"
-                                    variant="secondary"
-                                    class="gap-1"
-                                >
-                                    <ClockAlert class="size-3" />
-                                    {{
-                                        task?.days_in_column === 0
-                                            ? 'Today'
-                                            : `${task?.days_in_column}d`
-                                    }}
-                                </Badge>
-                            </div>
-                        </div>
-
-                        <form class="space-y-3" @submit.prevent="submitComment">
-                            <div class="grid gap-2">
-                                <Label>Leave a comment</Label>
-                                <TaskRichTextEditor
-                                    v-model="commentForm.body"
-                                    placeholder="Share progress, blockers, or next steps..."
-                                />
-                                <InputError
-                                    :message="commentForm.errors.body"
-                                />
-                            </div>
-
-                            <Button
-                                type="submit"
-                                :disabled="
-                                    commentForm.processing ||
-                                    !commentForm.body
-                                        .replace(/<[^>]*>/g, ' ')
-                                        .replace(/&nbsp;/g, ' ')
-                                        .replace(/\s+/g, ' ')
-                                        .trim()
-                                "
-                            >
-                                <MessageSquarePlus class="size-4" />
-                                Post comment
-                            </Button>
-                        </form>
-
-                        <div class="mt-4 space-y-3">
-                            <div
-                                v-if="commentsList.length === 0"
-                                class="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground"
-                            >
-                                No comments yet. Start the discussion.
-                            </div>
-
-                            <TaskCommentThreadItem
-                                v-for="comment in commentsList"
-                                :key="comment.id"
-                                :comment="comment"
-                                :active-reply-to-id="activeReplyToId"
-                                :reply-body="replyForm.body"
-                                :reply-error="replyForm.errors.body"
-                                :posting-reply="replyForm.processing"
-                                :format-date="formatDate"
-                                :get-initials="getInitials"
-                                @start-reply="startReply"
-                                @cancel-reply="cancelReply"
-                                @update-reply-body="replyForm.body = $event"
-                                @submit-reply="submitReply"
-                            />
-                        </div>
-                    </div>
+                    <TaskEditFormPanel
+                        :form="form"
+                        :team-members="teamMembers"
+                        :is-loading-details="isLoadingDetails"
+                        @submit="submit"
+                        @cancel="isOpen = false"
+                        @update:title="form.title = $event"
+                        @update:description="form.description = $event"
+                        @update:due-date="form.due_date = $event"
+                        @update:assigned-to="form.assigned_to = $event"
+                    />
+
+                    <TaskActivityDiscussionPanel
+                        :is-loading-details="isLoadingDetails"
+                        :timeline-events="timelineEvents"
+                        :get-event-label="getEventLabel"
+                        :format-timeline-date="formatTimelineDate"
+                        :active-task="activeTask"
+                        :is-overdue="isOverdue"
+                        :comments-list="commentsList"
+                        :comment-body="commentForm.body"
+                        :comment-error="commentForm.errors.body"
+                        :comment-processing="commentForm.processing"
+                        :active-reply-to-id="activeReplyToId"
+                        :reply-body="replyForm.body"
+                        :reply-error="replyForm.errors.body"
+                        :posting-reply="replyForm.processing"
+                        :format-date="formatDate"
+                        :get-initials="getInitials"
+                        @submit-comment="submitComment"
+                        @update-comment-body="commentForm.body = $event"
+                        @start-reply="startReply"
+                        @cancel-reply="cancelReply"
+                        @update-reply-body="replyForm.body = $event"
+                        @submit-reply="submitReply"
+                    />
                 </div>
             </div>
         </DialogContent>
diff --git a/resources/js/components/tasks/TaskEditFormPanel.vue b/resources/js/components/tasks/TaskEditFormPanel.vue
new file mode 100644
index 0000000..11c70a6
--- /dev/null
+++ b/resources/js/components/tasks/TaskEditFormPanel.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import InputError from '@/components/InputError.vue';
+import TaskAssigneeSelect from '@/components/tasks/TaskAssigneeSelect.vue';
+import TaskRichTextEditor from '@/components/tasks/TaskRichTextEditor.vue';
+import { Button } from '@/components/ui/button';
+import { DialogFooter } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import type { TeamMember } from '@/types';
+import { TaskEditFormState } from '@/types';
+import { Save } from 'lucide-vue-next';
+
+defineProps<{
+    form: TaskEditFormState;
+    teamMembers: TeamMember[];
+    isLoadingDetails: boolean;
+}>();
+
+defineEmits<{
+    submit: [];
+    cancel: [];
+    'update:title': [value: string];
+    'update:description': [value: string];
+    'update:due-date': [value: string];
+    'update:assigned-to': [value: number | null];
+}>();
+</script>
+
+<template>
+    <div class="p-6 xl:pr-8">
+        <form class="space-y-4" @submit.prevent="$emit('submit')">
+            <div class="grid gap-2">
+                <Label for="edit-task-title">Title</Label>
+                <Input
+                    id="edit-task-title"
+                    type="text"
+                    placeholder="Enter task title..."
+                    :model-value="form.title"
+                    @update:model-value="$emit('update:title', String($event))"
+                />
+                <InputError :message="form.errors.title" />
+            </div>
+
+            <div class="grid gap-2">
+                <Label for="edit-task-description">Description</Label>
+                <TaskRichTextEditor
+                    :model-value="form.description"
+                    placeholder="Add more details..."
+                    min-height="20rem"
+                    @update:model-value="$emit('update:description', $event)"
+                />
+                <InputError :message="form.errors.description" />
+            </div>
+
+            <div class="grid gap-2 sm:grid-cols-2">
+                <div class="grid gap-2">
+                    <Label for="edit-task-due-date">Due date</Label>
+                    <Input
+                        id="edit-task-due-date"
+                        type="datetime-local"
+                        :model-value="form.due_date"
+                        @update:model-value="
+                            $emit('update:due-date', String($event))
+                        "
+                    />
+                    <InputError :message="form.errors.due_date" />
+                </div>
+
+                <div class="grid gap-2">
+                    <Label>Assigned to</Label>
+                    <TaskAssigneeSelect
+                        :model-value="form.assigned_to"
+                        :team-members="teamMembers"
+                        @update:model-value="
+                            $emit('update:assigned-to', $event)
+                        "
+                    />
+                    <InputError :message="form.errors.assigned_to" />
+                </div>
+            </div>
+
+            <DialogFooter class="pt-2">
+                <Button
+                    type="button"
+                    variant="outline"
+                    @click="$emit('cancel')"
+                >
+                    Cancel
+                </Button>
+                <Button
+                    type="submit"
+                    :disabled="
+                        !form.isDirty || form.processing || isLoadingDetails
+                    "
+                >
+                    <Spinner v-if="form.processing" />
+                    <Save v-else class="size-4" />
+                    Save changes
+                </Button>
+            </DialogFooter>
+        </form>
+    </div>
+</template>
diff --git a/resources/js/components/tasks/TaskItem.vue b/resources/js/components/tasks/TaskItem.vue
index e97c6f1..cd622be 100644
--- a/resources/js/components/tasks/TaskItem.vue
+++ b/resources/js/components/tasks/TaskItem.vue
@@ -28,18 +28,6 @@ const isOverdue = (task: Task) => {
     return task.due_date ? new Date(task.due_date) < new Date() : false;
 };
 
-const descriptionToText = (description?: string | null) => {
-    if (!description) return '';
-
-    const text = description
-        .replace(/<[^>]*>/g, ' ')
-        .replace(/&nbsp;/g, ' ')
-        .replace(/\s+/g, ' ')
-        .trim();
-
-    return text;
-};
-
 const deleteTask = () => {
     router.delete(destroy(props.task.id).url, {
         preserveScroll: true,
@@ -92,11 +80,10 @@ const deleteTask = () => {
             <!-- Description Preview -->
             <div
                 v-if="task.description"
-                class="flex items-center gap-1.5 text-[12px] text-muted-foreground"
-                :title="descriptionToText(task.description)"
+                class="max-h-16 min-w-0 overflow-hidden text-[12px] leading-relaxed text-muted-foreground"
             >
                 <div
-                    class="task-description-preview max-h-24 min-w-0 overflow-hidden leading-relaxed"
+                    class="task-description-preview"
                     v-html="task.description"
                 ></div>
             </div>
@@ -201,11 +188,4 @@ const deleteTask = () => {
 .task-description-preview :deep(ol) {
     list-style: decimal;
 }
-
-.task-description-preview :deep(pre) {
-    margin-top: 0.25rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: pre-wrap;
-}
 </style>
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 3ab9b03..ee7f59a 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -148,4 +148,14 @@ export interface PaginationLink {
     active: boolean;
 }
 
+export interface TaskEditFormState {
+    title: string;
+    description: string;
+    due_date: string;
+    assigned_to: number | null;
+    errors: Record<string, string | undefined>;
+    isDirty: boolean;
+    processing: boolean;
+}
+
 export type BreadcrumbItemType = BreadcrumbItem;
diff --git a/routes/tasks.php b/routes/tasks.php
index bca839e..07d69fc 100644
--- a/routes/tasks.php
+++ b/routes/tasks.php
@@ -10,6 +10,7 @@
     ->group(function () {
         Route::controller(TaskController::class)->group(function () {
             Route::get('tasks', 'index')->name('tasks.index');
+            Route::get('tasks/{task}', 'show')->name('tasks.show');
             Route::post('tasks', 'store')->name('tasks.store');
             Route::put('tasks/{task}', 'update')->name('tasks.update');
             Route::post('tasks/{task}/comments', 'storeComment')->name('tasks.comments.store');
diff --git a/tests/Feature/TaskCommentTest.php b/tests/Feature/TaskCommentTest.php
index 51f8026..814bb14 100644
--- a/tests/Feature/TaskCommentTest.php
+++ b/tests/Feature/TaskCommentTest.php
@@ -5,7 +5,6 @@
 use App\Models\TaskComment;
 use App\Models\Team;
 use App\Models\User;
-use Inertia\Testing\AssertableInertia as Assert;
 
 beforeEach(function () {
     $this->team = Team::factory()->create();
@@ -100,7 +99,7 @@
             ->assertSessionHasErrors('parent_id');
     });
 
-    test('includes threaded replies in tasks page payload', function () {
+    test('includes threaded replies in task details payload', function () {
         $task = Task::factory()->create([
             'team_id' => $this->team->id,
             'column_id' => $this->column->id,
@@ -120,12 +119,9 @@
         ]);
 
         $this->actingAs($this->user)
-            ->get(route('tasks.index'))
-            ->assertInertia(
-                fn(Assert $page) => $page
-                    ->component('Tasks')
-                    ->where('columns.0.tasks.0.comments.0.body', 'Top level comment')
-                    ->where('columns.0.tasks.0.comments.0.replies.0.body', 'Nested reply')
-            );
+            ->get(route('tasks.show', $task))
+            ->assertOk()
+            ->assertJsonPath('comments.0.body', 'Top level comment')
+            ->assertJsonPath('comments.0.replies.0.body', 'Nested reply');
     });
 });
diff --git a/tests/Feature/TaskTest.php b/tests/Feature/TaskTest.php
index 1d1f58b..d9de02a 100644
--- a/tests/Feature/TaskTest.php
+++ b/tests/Feature/TaskTest.php
@@ -4,6 +4,7 @@
 use App\Models\Team;
 use App\Models\User;
 use App\Models\Column;
+use App\Models\TaskComment;
 
 beforeEach(function () {
     $this->team = Team::factory()->create();
@@ -64,6 +65,38 @@ function ($page) use ($column, $creator) {
     });
 });
 
+describe('show', function () {
+    test('returns full task details for the same team', function () {
+        $column = Column::create(['team_id' => $this->team->id, 'name' => 'To Do', 'order' => 1]);
+        $task = Task::factory()->create([
+            'team_id' => $this->team->id,
+            'column_id' => $column->id,
+            'created_by' => $this->user->id,
+        ]);
+
+        TaskComment::create([
+            'task_id' => $task->id,
+            'user_id' => $this->user->id,
+            'body' => 'First comment',
+        ]);
+
+        $this->actingAs($this->user)
+            ->get(route('tasks.show', $task))
+            ->assertOk()
+            ->assertJsonPath('id', $task->id)
+            ->assertJsonPath('creator.id', $this->user->id)
+            ->assertJsonPath('comments.0.body', 'First comment');
+    });
+
+    test('forbids showing a task from another team', function () {
+        $task = Task::factory()->create(['team_id' => $this->otherTeam->id]);
+
+        $this->actingAs($this->user)
+            ->get(route('tasks.show', $task))
+            ->assertStatus(403);
+    });
+});
+
 describe('store', function () {
     beforeEach(function () {
         Column::create([