diff --git a/frontend/src/components/dialogs/tasks/ViewRelatedTasksDialog.tsx b/frontend/src/components/dialogs/tasks/ViewRelatedTasksDialog.tsx
new file mode 100644
index 00000000..1b8bcf98
--- /dev/null
+++ b/frontend/src/components/dialogs/tasks/ViewRelatedTasksDialog.tsx
@@ -0,0 +1,167 @@
+import NiceModal, { useModal } from '@ebay/nice-modal-react';
+import { useTranslation } from 'react-i18next';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { PlusIcon } from 'lucide-react';
+import { openTaskForm } from '@/lib/openTaskForm';
+import { useTaskRelationships } from '@/hooks/useTaskRelationships';
+import { DataTable, type ColumnDef } from '@/components/ui/table/DataTable';
+import type { Task, TaskAttempt } from 'shared/types';
+
+export interface ViewRelatedTasksDialogProps {
+  attemptId: string;
+  projectId: string;
+  attempt: TaskAttempt | null;
+  onNavigateToTask?: (taskId: string) => void;
+}
+
+export const ViewRelatedTasksDialog =
+  NiceModal.create<ViewRelatedTasksDialogProps>(
+    ({ attemptId, projectId, attempt, onNavigateToTask }) => {
+      const modal = useModal();
+      const { t } = useTranslation('tasks');
+      const {
+        data: relationships,
+        isLoading,
+        isError,
+        refetch,
+      } = useTaskRelationships(attemptId);
+
+      // Combine parent and children into a single list of related tasks
+      const relatedTasks: Task[] = [];
+      if (relationships?.parent_task) {
+        relatedTasks.push(relationships.parent_task);
+      }
+      if (relationships?.children) {
+        relatedTasks.push(...relationships.children);
+      }
+
+      const taskColumns: ColumnDef<Task>[] = [
+        {
+          id: 'title',
+          header: t('viewRelatedTasksDialog.columns.title'),
+          accessor: (task) => (
+            <div className="truncate" title={task.title}>
+              {task.title || '—'}
+            </div>
+          ),
+          className: 'pr-4',
+          headerClassName: 'font-medium py-2 pr-4 w-1/2 bg-card',
+        },
+        {
+          id: 'description',
+          header: t('viewRelatedTasksDialog.columns.description'),
+          accessor: (task) => (
+            <div
+              className="line-clamp-1 text-muted-foreground"
+              title={task.description || ''}
+            >
+              {task.description?.trim() ? task.description : '—'}
+            </div>
+          ),
+          className: 'pr-4',
+          headerClassName: 'font-medium py-2 pr-4 bg-card',
+        },
+      ];
+
+      const handleOpenChange = (open: boolean) => {
+        if (!open) {
+          modal.hide();
+        }
+      };
+
+      const handleClickTask = (taskId: string) => {
+        onNavigateToTask?.(taskId);
+        modal.hide();
+      };
+
+      const handleCreateSubtask = async () => {
+        if (!projectId || !attempt) return;
+
+        // Close immediately - user intent is to create a subtask
+        modal.hide();
+
+        try {
+          // Yield one microtask for smooth modal transition
+          await Promise.resolve();
+
+          await openTaskForm({
+            projectId,
+            parentTaskAttemptId: attempt.id,
+            initialBaseBranch: attempt.branch || attempt.target_branch,
+          });
+        } catch {
+          // User cancelled or error occurred
+        }
+      };
+
+      return (
+        <Dialog
+          open={modal.visible}
+          onOpenChange={handleOpenChange}
+          className="max-w-3xl w-[92vw] p-0 overflow-x-hidden"
+        >
+          <DialogContent
+            className="p-0 min-w-0"
+            onKeyDownCapture={(e) => {
+              if (e.key === 'Escape') {
+                e.stopPropagation();
+                modal.hide();
+              }
+            }}
+          >
+            <DialogHeader className="px-4 py-3 border-b">
+              <DialogTitle>{t('viewRelatedTasksDialog.title')}</DialogTitle>
+            </DialogHeader>
+
+            <div className="p-4 max-h-[70vh] overflow-auto">
+              {isError && (
+                <div className="py-8 text-center space-y-3">
+                  <div className="text-sm text-destructive">
+                    {t('viewRelatedTasksDialog.error')}
+                  </div>
+                  <Button variant="outline" size="sm" onClick={() => refetch()}>
+                    {t('common:buttons.retry')}
+                  </Button>
+                </div>
+              )}
+
+              {!isError && (
+                <DataTable
+                  data={relatedTasks}
+                  columns={taskColumns}
+                  keyExtractor={(task) => task.id}
+                  onRowClick={(task) => handleClickTask(task.id)}
+                  isLoading={isLoading}
+                  emptyState={t('viewRelatedTasksDialog.empty')}
+                  headerContent={
+                    <div className="w-full flex text-left">
+                      <span className="flex-1">
+                        {t('viewRelatedTasksDialog.tasksCount', {
+                          count: relatedTasks.length,
+                        })}
+                      </span>
+                      <span>
+                        <Button
+                          variant="icon"
+                          onClick={handleCreateSubtask}
+                          disabled={!projectId || !attempt}
+                        >
+                          <PlusIcon size={16} />
+                        </Button>
+                      </span>
+                    </div>
+                  }
+                />
+              )}
+            </div>
+          </DialogContent>
+        </Dialog>
+      );
+    }
+  );
diff --git a/frontend/src/components/panels/TaskPanel.tsx b/frontend/src/components/panels/TaskPanel.tsx
index 7da9bb4e..1c0668f7 100644
--- a/frontend/src/components/panels/TaskPanel.tsx
+++ b/frontend/src/components/panels/TaskPanel.tsx
@@ -1,14 +1,16 @@
 import { useTranslation } from 'react-i18next';
 import { useProject } from '@/contexts/project-context';
 import { useTaskAttempts } from '@/hooks/useTaskAttempts';
+import { useTaskAttempt } from '@/hooks/useTaskAttempt';
 import { useNavigateWithSearch } from '@/hooks';
 import { paths } from '@/lib/paths';
-import type { TaskWithAttemptStatus } from 'shared/types';
+import type { TaskWithAttemptStatus, TaskAttempt } from 'shared/types';
 import { NewCardContent } from '../ui/new-card';
 import { Button } from '../ui/button';
 import { PlusIcon } from 'lucide-react';
 import NiceModal from '@ebay/nice-modal-react';
 import MarkdownRenderer from '@/components/ui/markdown-renderer';
+import { DataTable, type ColumnDef } from '@/components/ui/table';
 
 interface TaskPanelProps {
   task: TaskWithAttemptStatus | null;
@@ -25,6 +27,10 @@ const TaskPanel = ({ task }: TaskPanelProps) => {
     isError: isAttemptsError,
   } = useTaskAttempts(task?.id);
 
+  const { data: parentAttempt, isLoading: isParentLoading } = useTaskAttempt(
+    task?.parent_task_attempt || undefined
+  );
+
   const formatTimeAgo = (iso: string) => {
     const d = new Date(iso);
     const diffMs = Date.now() - d.getTime();
@@ -71,6 +77,27 @@ const TaskPanel = ({ task }: TaskPanelProps) => {
   const titleContent = `# ${task.title || 'Task'}`;
   const descriptionContent = task.description || '';
 
+  const attemptColumns: ColumnDef<TaskAttempt>[] = [
+    {
+      id: 'executor',
+      header: '',
+      accessor: (attempt) => attempt.executor || 'Base Agent',
+      className: 'pr-4',
+    },
+    {
+      id: 'branch',
+      header: '',
+      accessor: (attempt) => attempt.branch || '—',
+      className: 'pr-4',
+    },
+    {
+      id: 'time',
+      header: '',
+      accessor: (attempt) => formatTimeAgo(attempt.created_at),
+      className: 'pr-0 text-right',
+    },
+  ];
+
   return (
     <>
       <NewCardContent>
@@ -82,82 +109,66 @@ const TaskPanel = ({ task }: TaskPanelProps) => {
             )}
           </div>
 
-          <div className="mt-6 flex-shrink-0">
-            {isAttemptsLoading && (
+          <div className="mt-6 flex-shrink-0 space-y-4">
+            {task.parent_task_attempt && (
+              <DataTable
+                data={parentAttempt ? [parentAttempt] : []}
+                columns={attemptColumns}
+                keyExtractor={(attempt) => attempt.id}
+                onRowClick={(attempt) => {
+                  if (projectId) {
+                    navigate(
+                      paths.attempt(projectId, attempt.task_id, attempt.id)
+                    );
+                  }
+                }}
+                isLoading={isParentLoading}
+                headerContent="Parent Attempt"
+              />
+            )}
+
+            {isAttemptsLoading ? (
               <div className="text-muted-foreground">
                 {t('taskPanel.loadingAttempts')}
               </div>
-            )}
-            {isAttemptsError && (
+            ) : isAttemptsError ? (
               <div className="text-destructive">
                 {t('taskPanel.errorLoadingAttempts')}
               </div>
-            )}
-            {!isAttemptsLoading && !isAttemptsError && (
-              <table className="w-full text-sm">
-                <thead className="uppercase text-muted-foreground">
-                  <tr>
-                    <th colSpan={3}>
-                      <div className="w-full flex text-left">
-                        <span className="flex-1">
-                          {t('taskPanel.attemptsCount', {
-                            count: displayedAttempts.length,
-                          })}
-                        </span>
-                        <span>
-                          <Button
-                            variant="icon"
-                            onClick={() =>
-                              NiceModal.show('create-attempt', {
-                                taskId: task.id,
-                                latestAttempt,
-                              })
-                            }
-                          >
-                            <PlusIcon size={16} />
-                          </Button>
-                        </span>
-                      </div>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {displayedAttempts.length === 0 ? (
-                    <tr>
-                      <td
-                        colSpan={3}
-                        className="py-2 text-muted-foreground border-t"
+            ) : (
+              <DataTable
+                data={displayedAttempts}
+                columns={attemptColumns}
+                keyExtractor={(attempt) => attempt.id}
+                onRowClick={(attempt) => {
+                  if (projectId && task.id) {
+                    navigate(paths.attempt(projectId, task.id, attempt.id));
+                  }
+                }}
+                emptyState={t('taskPanel.noAttempts')}
+                headerContent={
+                  <div className="w-full flex text-left">
+                    <span className="flex-1">
+                      {t('taskPanel.attemptsCount', {
+                        count: displayedAttempts.length,
+                      })}
+                    </span>
+                    <span>
+                      <Button
+                        variant="icon"
+                        onClick={() =>
+                          NiceModal.show('create-attempt', {
+                            taskId: task.id,
+                            latestAttempt,
+                          })
+                        }
                       >
-                        {t('taskPanel.noAttempts')}
-                      </td>
-                    </tr>
-                  ) : (
-                    displayedAttempts.map((attempt) => (
-                      <tr
-                        key={attempt.id}
-                        className="border-t cursor-pointer hover:bg-muted"
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => {
-                          if (projectId && task.id && attempt.id) {
-                            navigate(
-                              paths.attempt(projectId, task.id, attempt.id)
-                            );
-                          }
-                        }}
-                      >
-                        <td className="py-2 pr-4">
-                          {attempt.executor || 'Base Agent'}
-                        </td>
-                        <td className="py-2 pr-4">{attempt.branch || '—'}</td>
-                        <td className="py-2 pr-0 text-right">
-                          {formatTimeAgo(attempt.created_at)}
-                        </td>
-                      </tr>
-                    ))
-                  )}
-                </tbody>
-              </table>
+                        <PlusIcon size={16} />
+                      </Button>
+                    </span>
+                  </div>
+                }
+              />
             )}
           </div>
         </div>
diff --git a/frontend/src/components/tasks/TaskCard.tsx b/frontend/src/components/tasks/TaskCard.tsx
index 1605fe5b..b85d01ea 100644
--- a/frontend/src/components/tasks/TaskCard.tsx
+++ b/frontend/src/components/tasks/TaskCard.tsx
@@ -1,8 +1,12 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { KanbanCard } from '@/components/ui/shadcn-io/kanban';
-import { CheckCircle, Loader2, XCircle } from 'lucide-react';
+import { CheckCircle, Link, Loader2, XCircle } from 'lucide-react';
 import type { TaskWithAttemptStatus } from 'shared/types';
 import { ActionsDropdown } from '@/components/ui/ActionsDropdown';
+import { Button } from '@/components/ui/button';
+import { useNavigateWithSearch } from '@/hooks';
+import { paths } from '@/lib/paths';
+import { attemptsApi } from '@/lib/api';
 
 type Task = TaskWithAttemptStatus;
 
@@ -12,6 +16,7 @@ interface TaskCardProps {
   status: string;
   onViewDetails: (task: Task) => void;
   isOpen?: boolean;
+  projectId: string;
 }
 
 export function TaskCard({
@@ -20,11 +25,38 @@ export function TaskCard({
   status,
   onViewDetails,
   isOpen,
+  projectId,
 }: TaskCardProps) {
+  const navigate = useNavigateWithSearch();
+  const [isNavigatingToParent, setIsNavigatingToParent] = useState(false);
+
   const handleClick = useCallback(() => {
     onViewDetails(task);
   }, [task, onViewDetails]);
 
+  const handleParentClick = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (!task.parent_task_attempt || isNavigatingToParent) return;
+
+      setIsNavigatingToParent(true);
+      try {
+        const parentAttempt = await attemptsApi.get(task.parent_task_attempt);
+        navigate(
+          paths.attempt(
+            projectId,
+            parentAttempt.task_id,
+            task.parent_task_attempt
+          )
+        );
+      } catch (error) {
+        console.error('Failed to navigate to parent task attempt:', error);
+        setIsNavigatingToParent(false);
+      }
+    },
+    [task.parent_task_attempt, projectId, navigate, isNavigatingToParent]
+  );
+
   const localRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -54,27 +86,34 @@ export function TaskCard({
         <h4 className="flex-1 min-w-0 line-clamp-2 font-light text-sm">
           {task.title}
         </h4>
-        <div className="flex items-center space-x-1">
+        <div className="flex items-center gap-1">
           {/* In Progress Spinner */}
           {task.has_in_progress_attempt && (
-            <Loader2 className="h-3 w-3 animate-spin text-blue-500" />
+            <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
           )}
           {/* Merged Indicator */}
           {task.has_merged_attempt && (
-            <CheckCircle className="h-3 w-3 text-green-500" />
+            <CheckCircle className="h-4 w-4 text-green-500" />
           )}
           {/* Failed Indicator */}
           {task.last_attempt_failed && !task.has_merged_attempt && (
-            <XCircle className="h-3 w-3 text-destructive" />
+            <XCircle className="h-4 w-4 text-destructive" />
+          )}
+          {/* Parent Task Indicator */}
+          {task.parent_task_attempt && (
+            <Button
+              variant="icon"
+              onClick={handleParentClick}
+              onPointerDown={(e) => e.stopPropagation()}
+              onMouseDown={(e) => e.stopPropagation()}
+              disabled={isNavigatingToParent}
+              title="Navigate to parent task attempt"
+            >
+              <Link className="h-4 w-4" />
+            </Button>
           )}
           {/* Actions Menu */}
-          <div
-            onPointerDown={(e) => e.stopPropagation()}
-            onMouseDown={(e) => e.stopPropagation()}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <ActionsDropdown task={task} />
-          </div>
+          <ActionsDropdown task={task} />
         </div>
       </div>
       {task.description && (
diff --git a/frontend/src/components/tasks/TaskKanbanBoard.tsx b/frontend/src/components/tasks/TaskKanbanBoard.tsx
index 3d8e2119..e8ac26ff 100644
--- a/frontend/src/components/tasks/TaskKanbanBoard.tsx
+++ b/frontend/src/components/tasks/TaskKanbanBoard.tsx
@@ -20,6 +20,7 @@ interface TaskKanbanBoardProps {
   onViewTaskDetails: (task: Task) => void;
   selectedTask?: Task;
   onCreateTask?: () => void;
+  projectId: string;
 }
 
 function TaskKanbanBoard({
@@ -28,6 +29,7 @@ function TaskKanbanBoard({
   onViewTaskDetails,
   selectedTask,
   onCreateTask,
+  projectId,
 }: TaskKanbanBoardProps) {
   return (
     <KanbanProvider onDragEnd={onDragEnd}>
@@ -47,6 +49,7 @@ function TaskKanbanBoard({
                 status={status}
                 onViewDetails={onViewTaskDetails}
                 isOpen={selectedTask?.id === task.id}
+                projectId={projectId}
               />
             ))}
           </KanbanCards>
diff --git a/frontend/src/components/ui/ActionsDropdown.tsx b/frontend/src/components/ui/ActionsDropdown.tsx
index 49956c74..8b32b750 100644
--- a/frontend/src/components/ui/ActionsDropdown.tsx
+++ b/frontend/src/components/ui/ActionsDropdown.tsx
@@ -14,6 +14,8 @@ import { useOpenInEditor } from '@/hooks/useOpenInEditor';
 import NiceModal from '@ebay/nice-modal-react';
 import { useProject } from '@/contexts/project-context';
 import { openTaskForm } from '@/lib/openTaskForm';
+import { ViewRelatedTasksDialog } from '@/components/dialogs/tasks/ViewRelatedTasksDialog';
+import { useNavigate } from 'react-router-dom';
 
 interface ActionsDropdownProps {
   task?: TaskWithAttemptStatus | null;
@@ -24,21 +26,25 @@ export function ActionsDropdown({ task, attempt }: ActionsDropdownProps) {
   const { t } = useTranslation('tasks');
   const { projectId } = useProject();
   const openInEditor = useOpenInEditor(attempt?.id);
+  const navigate = useNavigate();
 
   const hasAttemptActions = Boolean(attempt);
   const hasTaskActions = Boolean(task);
 
-  const handleEdit = () => {
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
     if (!projectId || !task) return;
     openTaskForm({ projectId, task });
   };
 
-  const handleDuplicate = () => {
+  const handleDuplicate = (e: React.MouseEvent) => {
+    e.stopPropagation();
     if (!projectId || !task) return;
     openTaskForm({ projectId, initialTask: task });
   };
 
-  const handleDelete = async () => {
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.stopPropagation();
     if (!projectId || !task) return;
     try {
       await NiceModal.show('delete-task-confirmation', {
@@ -62,6 +68,21 @@ export function ActionsDropdown({ task, attempt }: ActionsDropdownProps) {
     NiceModal.show('view-processes', { attemptId: attempt.id });
   };
 
+  const handleViewRelatedTasks = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!attempt?.id || !projectId) return;
+    NiceModal.show(ViewRelatedTasksDialog, {
+      attemptId: attempt.id,
+      projectId,
+      attempt,
+      onNavigateToTask: (taskId: string) => {
+        if (projectId) {
+          navigate(`/projects/${projectId}/tasks/${taskId}/attempts/latest`);
+        }
+      },
+    });
+  };
+
   const handleCreateNewAttempt = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (!task?.id) return;
@@ -98,6 +119,8 @@ export function ActionsDropdown({ task, attempt }: ActionsDropdownProps) {
           <Button
             variant="icon"
             aria-label="Actions"
+            onPointerDown={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
             onClick={(e) => e.stopPropagation()}
           >
             <MoreHorizontal className="h-4 w-4" />
@@ -119,6 +142,12 @@ export function ActionsDropdown({ task, attempt }: ActionsDropdownProps) {
               >
                 {t('actionsMenu.viewProcesses')}
               </DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={!attempt?.id}
+                onClick={handleViewRelatedTasks}
+              >
+                {t('actionsMenu.viewRelatedTasks')}
+              </DropdownMenuItem>
               <DropdownMenuItem onClick={handleCreateNewAttempt}>
                 {t('actionsMenu.createNewAttempt')}
               </DropdownMenuItem>
diff --git a/frontend/src/components/ui/table/DataTable.tsx b/frontend/src/components/ui/table/DataTable.tsx
new file mode 100644
index 00000000..061cb04d
--- /dev/null
+++ b/frontend/src/components/ui/table/DataTable.tsx
@@ -0,0 +1,98 @@
+import {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+  TableEmpty,
+  TableLoading,
+} from './Table';
+
+export type ColumnDef<T> = {
+  id: string;
+  header: React.ReactNode;
+  accessor: (row: T) => React.ReactNode;
+  className?: string;
+  headerClassName?: string;
+};
+
+export interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  keyExtractor: (row: T) => string;
+  onRowClick?: (row: T) => void;
+  isLoading?: boolean;
+  emptyState?: React.ReactNode;
+  headerContent?: React.ReactNode;
+}
+
+export function DataTable<T>({
+  data,
+  columns,
+  keyExtractor,
+  onRowClick,
+  isLoading,
+  emptyState,
+  headerContent,
+}: DataTableProps<T>) {
+  const colSpan = columns.length;
+
+  return (
+    <Table>
+      <TableHead>
+        <tr>
+          {headerContent ? (
+            <TableHeaderCell colSpan={colSpan}>{headerContent}</TableHeaderCell>
+          ) : (
+            columns.map((column) => (
+              <TableHeaderCell
+                key={column.id}
+                className={column.headerClassName}
+              >
+                {column.header}
+              </TableHeaderCell>
+            ))
+          )}
+        </tr>
+      </TableHead>
+      <TableBody>
+        {isLoading ? (
+          <TableLoading colSpan={colSpan} />
+        ) : data.length === 0 ? (
+          <TableEmpty colSpan={colSpan}>{emptyState || 'No data'}</TableEmpty>
+        ) : (
+          data.map((row) => {
+            const key = keyExtractor(row);
+            const handleClick = onRowClick ? () => onRowClick(row) : undefined;
+            const handleKeyDown = onRowClick
+              ? (e: React.KeyboardEvent) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onRowClick(row);
+                  }
+                }
+              : undefined;
+
+            return (
+              <TableRow
+                key={key}
+                clickable={!!onRowClick}
+                role={onRowClick ? 'button' : undefined}
+                tabIndex={onRowClick ? 0 : undefined}
+                onClick={handleClick}
+                onKeyDown={handleKeyDown}
+              >
+                {columns.map((column) => (
+                  <TableCell key={column.id} className={column.className}>
+                    {column.accessor(row)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            );
+          })
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/frontend/src/components/ui/table/Table.tsx b/frontend/src/components/ui/table/Table.tsx
new file mode 100644
index 00000000..c0535227
--- /dev/null
+++ b/frontend/src/components/ui/table/Table.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <table ref={ref} className={cn('w-full text-sm', className)} {...props} />
+));
+Table.displayName = 'Table';
+
+const TableHead = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn('uppercase text-muted-foreground', className)}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={className} {...props} />
+));
+TableBody.displayName = 'TableBody';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    clickable?: boolean;
+  }
+>(({ className, clickable, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-t',
+      clickable && 'cursor-pointer hover:bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHeaderCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th ref={ref} className={cn('text-left', className)} {...props} />
+));
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn('py-2', className)} {...props} />
+));
+TableCell.displayName = 'TableCell';
+
+const TableEmpty = ({
+  colSpan,
+  children,
+}: {
+  colSpan: number;
+  children: React.ReactNode;
+}) => (
+  <TableRow>
+    <TableCell colSpan={colSpan} className="text-muted-foreground">
+      {children}
+    </TableCell>
+  </TableRow>
+);
+
+const TableLoading = ({ colSpan }: { colSpan: number }) => (
+  <TableRow>
+    <TableCell colSpan={colSpan}>
+      <div className="h-5 w-full bg-muted/30 rounded animate-pulse" />
+    </TableCell>
+  </TableRow>
+);
+
+export {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+  TableEmpty,
+  TableLoading,
+};
diff --git a/frontend/src/components/ui/table/index.ts b/frontend/src/components/ui/table/index.ts
new file mode 100644
index 00000000..9bb23b39
--- /dev/null
+++ b/frontend/src/components/ui/table/index.ts
@@ -0,0 +1,12 @@
+export {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+  TableEmpty,
+  TableLoading,
+} from './Table';
+export { DataTable } from './DataTable';
+export type { ColumnDef, DataTableProps } from './DataTable';
diff --git a/frontend/src/hooks/useTaskMutations.ts b/frontend/src/hooks/useTaskMutations.ts
index ce947940..ef403567 100644
--- a/frontend/src/hooks/useTaskMutations.ts
+++ b/frontend/src/hooks/useTaskMutations.ts
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigateWithSearch } from '@/hooks';
 import { tasksApi } from '@/lib/api';
 import { paths } from '@/lib/paths';
+import { taskRelationshipsKeys } from '@/hooks/useTaskRelationships';
 import type {
   CreateTask,
   CreateAndStartTaskRequest,
@@ -25,6 +26,14 @@ export function useTaskMutations(projectId?: string) {
     mutationFn: (data: CreateTask) => tasksApi.create(data),
     onSuccess: (createdTask: Task) => {
       invalidateQueries();
+      // Invalidate parent's relationships cache if this is a subtask
+      if (createdTask.parent_task_attempt) {
+        queryClient.invalidateQueries({
+          queryKey: taskRelationshipsKeys.byAttempt(
+            createdTask.parent_task_attempt
+          ),
+        });
+      }
       if (projectId) {
         navigate(`${paths.task(projectId, createdTask.id)}/attempts/latest`);
       }
@@ -39,6 +48,14 @@ export function useTaskMutations(projectId?: string) {
       tasksApi.createAndStart(data),
     onSuccess: (createdTask: TaskWithAttemptStatus) => {
       invalidateQueries();
+      // Invalidate parent's relationships cache if this is a subtask
+      if ((createdTask as any).parent_task_attempt) {
+        queryClient.invalidateQueries({
+          queryKey: taskRelationshipsKeys.byAttempt(
+            (createdTask as any).parent_task_attempt
+          ),
+        });
+      }
       if (projectId) {
         navigate(`${paths.task(projectId, createdTask.id)}/attempts/latest`);
       }
@@ -65,6 +82,8 @@ export function useTaskMutations(projectId?: string) {
       invalidateQueries(taskId);
       // Remove single-task cache entry to avoid stale data flashes
       queryClient.removeQueries({ queryKey: ['task', taskId], exact: true });
+      // Invalidate all task relationships caches (safe approach since we don't know parent)
+      queryClient.invalidateQueries({ queryKey: taskRelationshipsKeys.all });
     },
     onError: (err) => {
       console.error('Failed to delete task:', err);
diff --git a/frontend/src/hooks/useTaskRelationships.ts b/frontend/src/hooks/useTaskRelationships.ts
new file mode 100644
index 00000000..ce0b8c38
--- /dev/null
+++ b/frontend/src/hooks/useTaskRelationships.ts
@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+import { attemptsApi } from '@/lib/api';
+import type { TaskRelationships } from 'shared/types';
+
+export const taskRelationshipsKeys = {
+  all: ['taskRelationships'] as const,
+  byAttempt: (attemptId: string | undefined) =>
+    ['taskRelationships', attemptId] as const,
+};
+
+type Options = {
+  enabled?: boolean;
+  refetchInterval?: number | false;
+  staleTime?: number;
+  retry?: number | false;
+};
+
+export function useTaskRelationships(attemptId?: string, opts?: Options) {
+  const enabled = (opts?.enabled ?? true) && !!attemptId;
+
+  return useQuery<TaskRelationships>({
+    queryKey: taskRelationshipsKeys.byAttempt(attemptId),
+    queryFn: async () => {
+      const data = await attemptsApi.getChildren(attemptId!);
+      return data;
+    },
+    enabled,
+    refetchInterval: opts?.refetchInterval ?? false,
+    staleTime: opts?.staleTime ?? 10_000,
+    retry: opts?.retry ?? 2,
+  });
+}
diff --git a/frontend/src/i18n/locales/en/tasks.json b/frontend/src/i18n/locales/en/tasks.json
index 34d42105..62f5e147 100644
--- a/frontend/src/i18n/locales/en/tasks.json
+++ b/frontend/src/i18n/locales/en/tasks.json
@@ -238,14 +238,27 @@
   "viewProcessesDialog": {
     "title": "Execution processes"
   },
+  "viewRelatedTasksDialog": {
+    "title": "Related tasks",
+    "empty": "No related tasks for this attempt",
+    "error": "Failed to load related tasks",
+    "tasksCount": "Tasks ({{count}})",
+    "columns": {
+      "title": "Title",
+      "description": "Description",
+      "status": "Status"
+    }
+  },
   "attemptHeaderActions": {
     "preview": "Preview",
-    "diffs": "Diffs"
+    "diffs": "Diffs",
+    "relatedTasks": "Related tasks"
   },
   "actionsMenu": {
     "attempt": "Attempt",
     "openInIde": "Open attempt in IDE",
     "viewProcesses": "View processes",
+    "viewRelatedTasks": "View related tasks",
     "createNewAttempt": "Create new attempt",
     "createSubtask": "Create subtask",
     "gitActions": "Git actions",
diff --git a/frontend/src/i18n/locales/es/tasks.json b/frontend/src/i18n/locales/es/tasks.json
index e6be9469..5ea1389a 100644
--- a/frontend/src/i18n/locales/es/tasks.json
+++ b/frontend/src/i18n/locales/es/tasks.json
@@ -10,7 +10,8 @@
     "gitActions": "Acciones de Git",
     "openInIde": "Open attempt in IDE",
     "task": "Task",
-    "viewProcesses": "View processes"
+    "viewProcesses": "View processes",
+    "viewRelatedTasks": "View related tasks"
   },
   "attempt": {
     "actions": {
@@ -48,7 +49,8 @@
   },
   "attemptHeaderActions": {
     "diffs": "Diffs",
-    "preview": "Preview"
+    "preview": "Preview",
+    "relatedTasks": "Related tasks"
   },
   "branches": {
     "changeTarget": {
@@ -252,6 +254,17 @@
   "viewProcessesDialog": {
     "title": "Execution processes"
   },
+  "viewRelatedTasksDialog": {
+    "title": "Related tasks",
+    "empty": "No related tasks for this attempt",
+    "error": "Failed to load related tasks",
+    "tasksCount": "Tasks ({{count}})",
+    "columns": {
+      "title": "Title",
+      "description": "Description",
+      "status": "Status"
+    }
+  },
   "showcases": {
     "taskPanel": {
       "companion": {
diff --git a/frontend/src/i18n/locales/ja/tasks.json b/frontend/src/i18n/locales/ja/tasks.json
index 7b00641d..50fc4eaa 100644
--- a/frontend/src/i18n/locales/ja/tasks.json
+++ b/frontend/src/i18n/locales/ja/tasks.json
@@ -10,7 +10,8 @@
     "gitActions": "Gitアクション",
     "openInIde": "Open attempt in IDE",
     "task": "Task",
-    "viewProcesses": "View processes"
+    "viewProcesses": "View processes",
+    "viewRelatedTasks": "View related tasks"
   },
   "attempt": {
     "actions": {
@@ -48,7 +49,8 @@
   },
   "attemptHeaderActions": {
     "diffs": "Diffs",
-    "preview": "Preview"
+    "preview": "Preview",
+    "relatedTasks": "Related tasks"
   },
   "branches": {
     "changeTarget": {
@@ -252,6 +254,17 @@
   "viewProcessesDialog": {
     "title": "Execution processes"
   },
+  "viewRelatedTasksDialog": {
+    "title": "Related tasks",
+    "empty": "No related tasks for this attempt",
+    "error": "Failed to load related tasks",
+    "tasksCount": "Tasks ({{count}})",
+    "columns": {
+      "title": "Title",
+      "description": "Description",
+      "status": "Status"
+    }
+  },
   "showcases": {
     "taskPanel": {
       "companion": {
diff --git a/frontend/src/i18n/locales/ko/tasks.json b/frontend/src/i18n/locales/ko/tasks.json
index aeef5c58..8171108f 100644
--- a/frontend/src/i18n/locales/ko/tasks.json
+++ b/frontend/src/i18n/locales/ko/tasks.json
@@ -10,7 +10,8 @@
     "gitActions": "Git 작업",
     "openInIde": "Open attempt in IDE",
     "task": "Task",
-    "viewProcesses": "View processes"
+    "viewProcesses": "View processes",
+    "viewRelatedTasks": "View related tasks"
   },
   "attempt": {
     "actions": {
@@ -48,7 +49,8 @@
   },
   "attemptHeaderActions": {
     "diffs": "Diffs",
-    "preview": "Preview"
+    "preview": "Preview",
+    "relatedTasks": "Related tasks"
   },
   "branches": {
     "changeTarget": {
@@ -252,6 +254,17 @@
   "viewProcessesDialog": {
     "title": "Execution processes"
   },
+  "viewRelatedTasksDialog": {
+    "title": "Related tasks",
+    "empty": "No related tasks for this attempt",
+    "error": "Failed to load related tasks",
+    "tasksCount": "Tasks ({{count}})",
+    "columns": {
+      "title": "Title",
+      "description": "Description",
+      "status": "Status"
+    }
+  },
   "showcases": {
     "taskPanel": {
       "companion": {
diff --git a/frontend/src/pages/project-tasks.tsx b/frontend/src/pages/project-tasks.tsx
index c1f327fc..4a19b3e4 100644
--- a/frontend/src/pages/project-tasks.tsx
+++ b/frontend/src/pages/project-tasks.tsx
@@ -656,6 +656,7 @@ export function ProjectTasks() {
           onViewTaskDetails={handleViewTaskDetails}
           selectedTask={selectedTask || undefined}
           onCreateTask={handleCreateNewTask}
+          projectId={projectId!}
         />
       </div>
     );