diff --git a/docs/IMMEDIATE_FAMILY_SECTION_DESIGN.md b/docs/IMMEDIATE_FAMILY_SECTION_DESIGN.md
new file mode 100644
index 0000000..b4ebd17
--- /dev/null
+++ b/docs/IMMEDIATE_FAMILY_SECTION_DESIGN.md
@@ -0,0 +1,87 @@
+# Immediate Family Section Design
+
+## Problem
+
+Topola Viewer renders an interactive graphical family tree centered on a selected individual, displaying connected nodes for ancestors, descendants, and spouses. However, as family structures expand or users zoom in for detail, directly related family members frequently flow off the visible screen boundaries, requiring tedious canvas manipulation to locate and select them. To improve navigation efficiency and provide clear relational context at a glance, the application needs a dedicated layout block in the side panel that consolidates and displays the focused person's parents, spouses, and children. Providing these primary relationships as direct clickable links ensures users can rapidly transition focus between immediate family members regardless of their current viewport position on the graphical canvas.
+
+## Technical Plan
+
+To introduce the immediate family view without disrupting existing features, the implementation introduces a focused visual component that acts as an intermediary between the raw genealogy data and the user interface. 
+
+The system relies on three primary components working together:
+1. **Genealogy Data Store**: The core repository containing all parsed individuals and family records. It provides lookup utilities to resolve cross-references between children and their parents or spouses.
+2. **Immediate Family Component**: A dedicated new interface element embedded directly inside the side panel. It queries the data store for the currently selected person, extracts their primary set of parents, and groups all associated children under their respective spouses or partners.
+3. **Navigation Module**: When a user clicks on any parent, spouse, or child link within the new block, this module updates the application's active web address with the chosen relative's identifier. This action instantly re-centers both the side panel and the primary visual tree onto the newly selected family member.
+
+## Alternatives
+
+During the initial design discussions, several alternative implementation strategies were evaluated and ultimately ruled out to ensure optimal user experience and maintainability:
+
+### 1. Integrating Relationships into the Event Timeline
+* **Concept**: Interweave parents and children directly into the chronologically sorted lifecycle event list (e.g., rendering children as "Child Born" timeline events and placing parents near the target person's birth event).
+* **Reason for Rejection**: Structural relationships are fundamentally distinct from point-in-time events. Forcing them into an event-driven layout scatters family members across the full vertical height of the panel, creating severe timeline clutter and undermining the core goal of rapid navigation.
+
+### 2. Removing the Timeline Spouse Link
+* **Concept**: Strip out the standalone spouse navigation link from the chronological marriage event entries to prevent duplicating the link in both the timeline and the new Immediate Family block.
+* **Reason for Rejection**: Detaching the spouse link from the timeline breaks historical context, separating the marriage ceremony record from the actual partner involved. Maintaining both preserves event completeness while establishing a centralized navigation block.
+
+### 3. Rendering a Flat List of Children
+* **Concept**: Consolidate all children into a single flat list ordered strictly by birth date, omitting spousal boundaries.
+* **Reason for Rejection**: Fails to represent blended families clearly. Explicitly grouping children under their respective spouse or partner headers makes full-sibling versus half-sibling structures immediately obvious to the user.
+
+### 4. Uniformly Showing or Hiding Unknown Spouses
+* **Concept**: Apply a blanket rule to either always display an "Unknown Spouse" header for single-parent records or entirely hide unknown headers across all scenarios.
+* **Reason for Rejection**: Always showing the header adds unnecessary visual noise to standard single-family layouts. Always hiding it obscures complex relationship boundaries when an individual has children across multiple partners where some partner names are unrecorded. The conditional approach dynamically cleans up single-family displays while preserving vital structural boundaries for multi-partner families.
+
+### 5. Supporting Multiple Sets of Parents Immediately
+* **Concept**: Query all associated `FAMC` records to display biological, adoptive, and foster parent sets side-by-side from day one.
+* **Reason for Rejection**: Introduces substantial UI complexity for labeling pedigree types (`PEDI` sub-tags) and requires wider structural refactoring of active focus state handling across the core canvas layout. Deferring to a single primary parent set keeps the initial feature scope robust and achievable.
+
+## Detailed Implementation
+
+Executing this feature requires clean extensions across the side panel architecture. To maintain high code quality and ensure strict boundaries, the implementation avoids modifying shared core state or event logic directly, instead isolating rendering responsibilities into modular layers. 
+
+Below is the exhaustive file-by-file breakdown enumerating every file that will be created or modified, accompanied by detailed implementation step guidelines and specific technical rationale.
+
+### 1. Component Creation
+#### [NEW] [immediate-family.tsx](../src/sidepanel/details/immediate-family.tsx)
+* **Rationale**: Encapsulating the new feature inside a dedicated component file separates concerns, avoids bloating the orchestration component ([details.tsx](../src/sidepanel/details/details.tsx)), and centralizes specialized rendering logic for single parent sets, childless spouses, conditional unknown headers, and chronologically sorted child groupings.
+* **Implementation Steps**:
+  1. **Imports**: Import React elements, Semantic UI layout wrappers (`Item`, `Header`), navigation routing dependencies (`Link`, `useLocation` from `react-router`, `query-string`), localization wrappers (`FormattedMessage`, `useIntl` from `react-intl`), and GEDCOM utility functions from `../../util/gedcom_util` ([dereference](../src/util/gedcom_util.ts#L171-L183), [getName](../src/util/gedcom_util.ts#L292-L302), [pointerToId](../src/util/gedcom_util.ts#L42-L44), [resolveDate](../src/util/gedcom_util.ts#L339-L342)).
+  2. **Relative Link Helper**: Define an internal component (e.g., `RelativeLink`) that renders an individual relative profile as a `<Link>`. It extracts the target relative's plain ID directly from the raw sub-entry string via `pointerToId(subEntry.data)` before dereferencing to prevent runtime crashes on broken references. It parses `location.search` using `useLocation()`, sets the `indi` query parameter to the target ID, stringifies the search parameters, routes to `/view`, and outputs the resolved display name via `getName` (falling back to localized unknown string if undefined).
+  3. **Parents Block Renderer**: Implement a rendering method that extracts the active individual's tree array. Find the first sub-entry where `tag === 'FAMC'`. Guard against `undefined` if parents are unrecorded. Safely dereference this pointer against the repository's family mapping array to locate the parental family record. Scan the resolved family entry for all `HUSB` and `WIFE` sub-entries. Extract plain IDs via `pointerToId(subEntry.data)` and dereference each against the repository's individual mapping array to resolve profile records. Conditionally output localized sub-headers (e.g., "Father", "Mother") accompanied by clickable `RelativeLink` instances only for present parent records.
+  4. **Spouses and Children Block Renderer**: Implement a rendering method that iterates over all `FAMS` tags within the active individual's tree. Dereference each entry to fetch its corresponding family record. For each family record, extract the partner/spouse pointers (`HUSB` or `WIFE` tags ensuring `!subEntry.data.includes(props.indi)` to prevent extracting the focused person as their own spouse) and extract all child records (`CHIL`).
+  5. **Child Record Dereferencing and Sorting**: Explicitly dereference each extracted `CHIL` sub-entry against `gedcom.indis` to access child profile records. Extract their birth dates using `resolveDate` and sort the children array chronologically by birth date before outputting to ensure correct relational flow.
+  6. **Conditional Unknown Spouse Logic**: Prior to outputting headers, evaluate the total length of the mapped `FAMS` array. Guard against incomplete/empty family entries by suppressing groups containing neither a valid spouse pointer nor children. If a spouse profile pointer is absent and total `FAMS` equals `1`, suppress the spouse header output. If a spouse pointer is absent and total valid `FAMS` groups exceed `1`, output a visible "Spouse: Unknown" block header to clearly define half-sibling boundaries.
+  7. **Sequential Group Output**: Output each valid spousal family group as an encapsulated sub-block. Render childless spouses as complete standalone items. Output the resolved, sorted children collection as relative links below their respective spouse/partner header.
+  8. **Container Wrapper**: Export the primary `ImmediateFamily` component wrapper. If active parent, spouse, or child nodes exist, wrap the consolidated layout blocks inside a single Semantic UI `<Item>` container structured with `<Item.Content>`. If no immediate family members exist, return `null` to prevent empty dividers in the side panel DOM.
+
+### 2. Orchestration Layer Modification
+#### [MODIFY] [details.tsx](../src/sidepanel/details/details.tsx)
+* **Rationale**: Acts as the root layout orchestrator for the side panel info tab. Needs to import and render the new view block near the top of the component flow to guarantee primary relational links are visible above the fold without requiring users to scroll past massive event timelines.
+* **Implementation Steps**:
+  1. Import the `ImmediateFamily` component from `./immediate-family`.
+  2. Locate the main [Details](../src/sidepanel/details/details.tsx#L338-L387) component export function.
+  3. Identify the execution block rendering `{getSectionForEachMatchingEntry(entries, props.gedcom, ['OBJE'], imageDetails)}` (line 350-355).
+  4. Directly below this block, and strictly *before* the `<Events>` timeline rendering execution line, embed `<ImmediateFamily gedcom={props.gedcom} indi={props.indi} />` directly within the `<Item.Group divided>` flow. Rely on the component's internal conditional logic to render the outer item bounds.
+
+### 3. Registry and Documentation Updates
+#### [MODIFY] [README.md](../src/sidepanel/details/README.md)
+* **Rationale**: Functions as the official index cataloging all available component views within the side panel details sub-package. Documenting the new file preserves architectural readability.
+* **Implementation Steps**:
+  1. Locate the alphabetical files registry list.
+  2. Insert a descriptive entry for `immediate-family.tsx`, explaining its role as a dedicated side panel module for grouping and displaying parents, spouses, and children as rapid-navigation links.
+
+### 4. Localization Contracts
+#### [MODIFY] Translation JSON Files (`src/translations/*.json`)
+* **Rationale**: Guarantees that every new UI header label introduced by the feature supports multi-language localization cleanly across all supported international environments.
+* **Implementation Steps**:
+  1. Establish explicit string descriptor keys to be mapped across all JSON locale files (e.g., `src/translations/en.json`, `de.json`, `pl.json`, `fr.json`, `it.json`, etc.) to avoid production fallback leakage:
+     * `"family.immediate_family": "Immediate Family"`
+     * `"family.parents": "Parents"`
+     * `"family.father": "Father"`
+     * `"family.mother": "Mother"`
+     * `"family.spouse": "Spouse"`
+     * `"family.unknown_spouse": "Unknown Spouse"`
+     * `"family.children": "Children"`
+  2. Ensure corresponding `<FormattedMessage>` invocations inside `immediate-family.tsx` reference these specific string descriptor keys.
diff --git a/docs/README.md b/docs/README.md
index 6bb4017..b0baae7 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -9,6 +9,7 @@ While new features *may* follow this methodology to ensure robust design validat
 ## Design Documents Registry
 
 * **[DOCKER_DESIGN.md](DOCKER_DESIGN.md)**: Docker container packaging, lightweight Caddy web server configuration, and GitHub Actions publishing pipelines.
+* **[IMMEDIATE_FAMILY_SECTION_DESIGN.md](IMMEDIATE_FAMILY_SECTION_DESIGN.md)**: Side panel block consolidating parents, spouses, and children for efficient off-screen tree navigation.
 * **[PLAYWRIGHT_DESIGN.md](PLAYWRIGHT_DESIGN.md)**: Playwright E2E testing architecture, Vite development/preview server lifecycle integration, tracking blocker interceptors, and embedded iframe communication.
 * **[SCREENSHOT_TESTS_DESIGN.md](SCREENSHOT_TESTS_DESIGN.md)**: Pixel-perfect visual regression testing infrastructure, animation stabilization, sandbox environment/DOM sanitization, and isolated Playwright projects.
 * **[WEBMCP_DESIGN.md](WEBMCP_DESIGN.md)**: Model Context Protocol (MCP) bridge and TS tool registration for AI agent interaction.
diff --git a/docs/SCREENSHOT_TESTS_DESIGN.md b/docs/SCREENSHOT_TESTS_DESIGN.md
index f7213de..ac67aae 100644
--- a/docs/SCREENSHOT_TESTS_DESIGN.md
+++ b/docs/SCREENSHOT_TESTS_DESIGN.md
@@ -106,6 +106,10 @@ This section defines the granular, step-by-step implementation steps and enumera
      * Mock `**/family.ged` containing complex nested fact (`FACT`), source (`SOUR`), and note (`NOTE`) trees.
      * Select the individual and wait for `#sidebar` to load.
      * Assert sidebar visual representation: `expect(page.locator('#sidebar')).toHaveScreenshot('details-events-sources.png')`.
+   * **Immediate Family Rendering Test:**
+     * Mock `**/family.ged` containing an individual with explicit parental links (`FAMC`) and multi-partner spousal families (`FAMS`) to display biological parents, spouses, and chronologically sorted children blocks.
+     * Select the individual and wait for `#sidebar` to load.
+     * Assert sidebar visual representation: `expect(page.locator('#sidebar')).toHaveScreenshot('details-immediate-family.png')`.
 
 #### Step 5: Configurations Integration Spec (`tests/config_visual.spec.ts`)
 1. Define a test block tagged `@visual` with a locked browser window viewport size of `1280x720` via `playwright.config.ts`.
diff --git a/src/index.css b/src/index.css
index 8ba8595..8874cb4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -162,7 +162,7 @@ div.zoom {
 
 .details .item-header .header {
   text-transform: uppercase;
-  margin: 0;
+  margin: 0 0 8px 0;
   min-width: 40%;
 }
 
@@ -335,6 +335,14 @@ div.zoom {
   white-space: pre;
 }
 
+.parents-block {
+  margin-bottom: 7px;
+}
+
+.children-block {
+  display: flex;
+}
+
 @media (max-width: 450px) {
   /* Hide the title from the top bar when the viewport is too small to display
      it alongside the search box. */
diff --git a/src/sidepanel/details/README.md b/src/sidepanel/details/README.md
index 7cb015c..4d00cc3 100644
--- a/src/sidepanel/details/README.md
+++ b/src/sidepanel/details/README.md
@@ -9,8 +9,10 @@ This directory contains React components for displaying detailed information abo
 - [details.tsx](details.tsx): The main component that orchestrates the display of all details for an individual, including name, images, events, facts, notes, and sources.
 - [event-extras.tsx](event-extras.tsx): Displays additional content for events (images, notes, sources, files) in a tabbed interface.
 - [events.tsx](events.tsx): Handles the logic and display for all events related to an individual, sorting them by date and grouping them by life stages.
+- [immediate-family.tsx](immediate-family.tsx): A dedicated side panel module for grouping and displaying parents, spouses, and children as rapid-navigation links.
 - [linkify-new-tab.tsx](linkify-new-tab.tsx): A helper component that wraps content and makes URLs clickable, opening them in a new tab.
 - [multiline-text.tsx](multiline-text.tsx): Helper component to display multi-line text with linkified URLs.
+- [person-link.tsx](person-link.tsx): Component that renders a clickable link to navigate to a person's profile view.
 - [sources.tsx](sources.tsx): Displays a list of sources cited for an entry.
 - [translated-tag.tsx](translated-tag.tsx): Component to translate GEDCOM tags into human-readable labels.
 - [wrapped-image.tsx](wrapped-image.tsx): Component to display images with loading placeholders, error fallback, and a click-to-enlarge modal.
diff --git a/src/sidepanel/details/details.tsx b/src/sidepanel/details/details.tsx
index b5e20b1..16d35d1 100644
--- a/src/sidepanel/details/details.tsx
+++ b/src/sidepanel/details/details.tsx
@@ -14,6 +14,7 @@ import {
 import {Config, Ids} from '../config/config';
 import {AdditionalFiles, FileEntry} from './additional-files';
 import {ALL_SUPPORTED_EVENT_TYPES, Events} from './events';
+import {ImmediateFamily} from './immediate-family';
 import {MultilineText} from './multiline-text';
 import {Sources} from './sources';
 import {TranslatedTag} from './translated-tag';
@@ -353,6 +354,7 @@ export function Details(props: Props) {
           ['OBJE'],
           imageDetails,
         )}
+        <ImmediateFamily gedcom={props.gedcom} indi={props.indi} />
         <Events gedcom={props.gedcom} entries={entries} indi={props.indi} />
         {props.config.id === Ids.SHOW ? getSectionForId(props.indi) : null}
         {getSectionForEachMatchingEntry(
diff --git a/src/sidepanel/details/events.tsx b/src/sidepanel/details/events.tsx
index 9eabf9b..ac04b2a 100644
--- a/src/sidepanel/details/events.tsx
+++ b/src/sidepanel/details/events.tsx
@@ -1,8 +1,6 @@
 import flatMap from 'array.prototype.flatmap';
 import {GedcomEntry} from 'parse-gedcom';
-import queryString from 'query-string';
-import {FormattedMessage, IntlShape, useIntl} from 'react-intl';
-import {Link, useLocation} from 'react-router';
+import {IntlShape, useIntl} from 'react-intl';
 import {Header, Item} from 'semantic-ui-react';
 import {DateOrRange, getDate} from 'topola';
 import {calcAge} from '../../util/age_util';
@@ -13,39 +11,17 @@ import {
   getData,
   getFileName,
   getImageFileEntry,
-  getName,
   getNonImageFileEntry,
   mapToSource,
-  pointerToId,
   resolveDate,
   resolveType,
   Source,
 } from '../../util/gedcom_util';
 import {FileEntry} from './additional-files';
 import {EventExtras, Image} from './event-extras';
+import {PersonLink} from './person-link';
 import {TranslatedTag} from './translated-tag';
 
-function PersonLink(props: {person: GedcomEntry}) {
-  const location = useLocation();
-
-  const name = getName(props.person);
-
-  const search = queryString.parse(location.search);
-  search['indi'] = pointerToId(props.person.pointer);
-
-  return (
-    <Item.Meta>
-      <Link to={{pathname: '/view', search: queryString.stringify(search)}}>
-        {name ? (
-          name
-        ) : (
-          <FormattedMessage id="name.unknown_name" defaultMessage="N.N." />
-        )}
-      </Link>
-    </Item.Meta>
-  );
-}
-
 interface Props {
   gedcom: GedcomData;
   indi: string;
diff --git a/src/sidepanel/details/immediate-family.tsx b/src/sidepanel/details/immediate-family.tsx
new file mode 100644
index 0000000..293ef04
--- /dev/null
+++ b/src/sidepanel/details/immediate-family.tsx
@@ -0,0 +1,218 @@
+import {GedcomEntry} from 'parse-gedcom';
+import {FormattedMessage} from 'react-intl';
+import {Header, Item} from 'semantic-ui-react';
+import {getDate} from 'topola';
+import {compareDates} from '../../util/date_util';
+import {GedcomData, pointerToId, resolveDate} from '../../util/gedcom_util';
+import {PersonLink} from './person-link';
+
+interface Props {
+  gedcom: GedcomData;
+  indi: string;
+}
+
+function mapSpousalFamily(
+  familyRecord: GedcomEntry,
+  gedcom: GedcomData,
+  indi: string,
+) {
+  const spouseSubEntry = familyRecord.tree?.find(
+    (sub) =>
+      ['HUSB', 'WIFE'].includes(sub.tag) && pointerToId(sub.data) !== indi,
+  );
+  const spouseId = spouseSubEntry
+    ? pointerToId(spouseSubEntry.data)
+    : undefined;
+  const spouseRecord = spouseId ? gedcom.indis[spouseId] : undefined;
+
+  const chilSubEntries =
+    familyRecord.tree?.filter((sub) => sub.tag === 'CHIL') || [];
+
+  const validChildren = chilSubEntries.filter(
+    (childSub) => !!gedcom.indis[pointerToId(childSub.data)],
+  );
+
+  // Pre-parse dates to avoid redundant O(N log N) parsing inside sort comparator
+  const mappedChildren = validChildren.map((childSub) => {
+    const childEntry = gedcom.indis[pointerToId(childSub.data)];
+    const birt = childEntry?.tree.find((sub) => sub.tag === 'BIRT');
+    const dateSub = birt ? resolveDate(birt) : undefined;
+    const parsedDate = dateSub ? getDate(dateSub.data) : undefined;
+    return {
+      childEntry,
+      parsedDate,
+    };
+  });
+
+  const sortedChildren = mappedChildren
+    .sort((a, b) => compareDates(a.parsedDate, b.parsedDate))
+    .map((item) => item.childEntry);
+
+  return {
+    familyId: pointerToId(familyRecord.pointer),
+    spouseTag: spouseSubEntry?.tag,
+    spouseRecord,
+    children: sortedChildren,
+  };
+}
+
+/**
+ * Renders the immediate family section of a person, displaying their parents,
+ * spouses, and children.
+ */
+export function ImmediateFamily(props: Props) {
+  const personEntry = props.gedcom.indis[props.indi];
+  if (!personEntry) {
+    return null;
+  }
+
+  const entries = personEntry.tree;
+
+  // --- Parents Block Renderer ---
+  const famcEntry = entries.find((sub) => sub.tag === 'FAMC');
+  const parentalFamily = famcEntry
+    ? props.gedcom.fams[pointerToId(famcEntry.data)]
+    : undefined;
+
+  const isParentalFamilyValid = parentalFamily?.tag === 'FAM';
+
+  const husbEntry = isParentalFamilyValid
+    ? parentalFamily?.tree.find((sub) => sub.tag === 'HUSB')
+    : undefined;
+  const wifeEntry = isParentalFamilyValid
+    ? parentalFamily?.tree.find((sub) => sub.tag === 'WIFE')
+    : undefined;
+
+  const fatherId = husbEntry ? pointerToId(husbEntry.data) : undefined;
+  const fatherRecord = fatherId ? props.gedcom.indis[fatherId] : undefined;
+
+  const motherId = wifeEntry ? pointerToId(wifeEntry.data) : undefined;
+  const motherRecord = motherId ? props.gedcom.indis[motherId] : undefined;
+
+  const hasParents = fatherRecord || motherRecord;
+
+  // --- Spouses and Children Block Renderer ---
+  const famsEntries = entries.filter((sub) => sub.tag === 'FAMS');
+  const spousalFamilies = famsEntries.map(
+    (entry) => props.gedcom.fams[pointerToId(entry.data)],
+  );
+
+  const mappedFamilies = spousalFamilies.map((familyRecord) =>
+    mapSpousalFamily(familyRecord, props.gedcom, props.indi),
+  );
+
+  const validMappedFamilies = mappedFamilies.filter(
+    (group) => group.spouseRecord || group.children.length > 0,
+  );
+
+  const totalValidFams = validMappedFamilies.length;
+  const hasSpousesOrChildren = totalValidFams > 0;
+
+  if (!hasParents && !hasSpousesOrChildren) {
+    return null;
+  }
+
+  return (
+    <Item>
+      <Item.Content>
+        <div className="item-header">
+          <Header as="span" size="small">
+            <FormattedMessage
+              id="family.immediate_family"
+              defaultMessage="Immediate Family"
+            />
+          </Header>
+        </div>
+        {hasParents && (
+          <div className="parents-block">
+            {fatherRecord && (
+              <div>
+                <strong>
+                  <FormattedMessage
+                    id="family.father"
+                    defaultMessage="Father"
+                  />
+                </strong>
+                : <PersonLink person={fatherRecord} />
+              </div>
+            )}
+            {motherRecord && (
+              <div>
+                <strong>
+                  <FormattedMessage
+                    id="family.mother"
+                    defaultMessage="Mother"
+                  />
+                </strong>
+                : <PersonLink person={motherRecord} />
+              </div>
+            )}
+          </div>
+        )}
+
+        {validMappedFamilies.map((group) => {
+          const showUnknownSpouse = !group.spouseRecord && totalValidFams > 1;
+          return (
+            <div key={group.familyId} className="spousal-group">
+              {group.spouseRecord ? (
+                <div>
+                  <strong>
+                    {group.spouseTag === 'HUSB' ? (
+                      <FormattedMessage
+                        id="family.husband"
+                        defaultMessage="Husband"
+                      />
+                    ) : (
+                      <FormattedMessage
+                        id="family.wife"
+                        defaultMessage="Wife"
+                      />
+                    )}
+                  </strong>
+                  : <PersonLink person={group.spouseRecord} />
+                </div>
+              ) : showUnknownSpouse ? (
+                <div>
+                  <strong>
+                    <FormattedMessage
+                      id="family.unknown_spouse"
+                      defaultMessage="Unknown Spouse"
+                    />
+                  </strong>
+                </div>
+              ) : null}
+
+              {group.children.length > 0 && (
+                <div className="children-block">
+                  <div>
+                    <strong>
+                      {group.children.length === 1 ? (
+                        <FormattedMessage
+                          id="family.child"
+                          defaultMessage="Child"
+                        />
+                      ) : (
+                        <FormattedMessage
+                          id="family.children"
+                          defaultMessage="Children"
+                        />
+                      )}
+                    </strong>
+                    :&nbsp;
+                  </div>
+                  <div>
+                    {group.children.map((child) => (
+                      <div key={child.pointer}>
+                        <PersonLink person={child} />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </Item.Content>
+    </Item>
+  );
+}
diff --git a/src/sidepanel/details/person-link.tsx b/src/sidepanel/details/person-link.tsx
new file mode 100644
index 0000000..4cf6d86
--- /dev/null
+++ b/src/sidepanel/details/person-link.tsx
@@ -0,0 +1,31 @@
+import {GedcomEntry} from 'parse-gedcom';
+import queryString from 'query-string';
+import {FormattedMessage} from 'react-intl';
+import {Link, useLocation} from 'react-router';
+import {getName, pointerToId} from '../../util/gedcom_util';
+
+interface Props {
+  person: GedcomEntry;
+}
+
+/**
+ * Renders a clickable link to an individual's profile view, preserving existing query parameters.
+ */
+export function PersonLink(props: Props) {
+  const location = useLocation();
+
+  const name = getName(props.person);
+
+  const search = queryString.parse(location.search);
+  search['indi'] = pointerToId(props.person.pointer);
+
+  return (
+    <Link to={{pathname: '/view', search: queryString.stringify(search)}}>
+      {name ? (
+        name
+      ) : (
+        <FormattedMessage id="name.unknown_name" defaultMessage="N.N." />
+      )}
+    </Link>
+  );
+}
diff --git a/src/translations/bg.json b/src/translations/bg.json
index 683a6c0..89f27ff 100644
--- a/src/translations/bg.json
+++ b/src/translations/bg.json
@@ -134,5 +134,14 @@
   "extras.images": "Изображение",
   "extras.notes": "Бележки",
   "extras.sources": "Източници",
-  "extras.files": "Допълнителни файлове"
+  "extras.files": "Допълнителни файлове",
+  "family.immediate_family": "Най-близко семейство",
+  "family.parents": "Родители",
+  "family.father": "Баща",
+  "family.mother": "Майка",
+  "family.husband": "Съпруг",
+  "family.wife": "Съпруга",
+  "family.unknown_spouse": "Неизвестен съпруг/а",
+  "family.children": "Деца",
+  "family.child": "Дете"
 }
diff --git a/src/translations/cs.json b/src/translations/cs.json
index acdd258..a1a1072 100644
--- a/src/translations/cs.json
+++ b/src/translations/cs.json
@@ -134,5 +134,14 @@
   "extras.images": "Obrázky",
   "extras.notes": "Poznámky",
   "extras.sources": "Zdroje",
-  "extras.files": "Další soubory"
+  "extras.files": "Další soubory",
+  "family.immediate_family": "Nejbližší rodina",
+  "family.parents": "Rodiče",
+  "family.father": "Otec",
+  "family.mother": "Matka",
+  "family.husband": "Manžel",
+  "family.wife": "Manželka",
+  "family.unknown_spouse": "Neznámý manžel/ka",
+  "family.children": "Děti",
+  "family.child": "Dítě"
 }
diff --git a/src/translations/de.json b/src/translations/de.json
index ad53fdb..2a97c5e 100644
--- a/src/translations/de.json
+++ b/src/translations/de.json
@@ -134,5 +134,14 @@
   "extras.images": "Bilder",
   "extras.notes": "Notizen",
   "extras.sources": "Quellen",
-  "extras.files": "Weitere Dateien"
+  "extras.files": "Weitere Dateien",
+  "family.immediate_family": "Engere Familie",
+  "family.parents": "Eltern",
+  "family.father": "Vater",
+  "family.mother": "Mutter",
+  "family.husband": "Ehemann",
+  "family.wife": "Ehefrau",
+  "family.unknown_spouse": "Unbekannter Ehepartner",
+  "family.children": "Kinder",
+  "family.child": "Kind"
 }
diff --git a/src/translations/fr.json b/src/translations/fr.json
index 1af1f57..4ac4129 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -134,5 +134,14 @@
   "extras.images": "Images",
   "extras.notes": "Notes",
   "extras.sources": "Sources",
-  "extras.files": "Fichiers supplémentaires"
+  "extras.files": "Fichiers supplémentaires",
+  "family.immediate_family": "Famille proche",
+  "family.parents": "Parents",
+  "family.father": "Père",
+  "family.mother": "Mère",
+  "family.husband": "Mari",
+  "family.wife": "Femme",
+  "family.unknown_spouse": "Conjoint inconnu",
+  "family.children": "Enfants",
+  "family.child": "Enfant"
 }
diff --git a/src/translations/it.json b/src/translations/it.json
index 59cbd6f..fdc4235 100644
--- a/src/translations/it.json
+++ b/src/translations/it.json
@@ -134,5 +134,14 @@
   "extras.images": "Immagini",
   "extras.notes": "Appunti",
   "extras.sources": "Fonti",
-  "extras.files": "File aggiuntivi"
+  "extras.files": "File aggiuntivi",
+  "family.immediate_family": "Famiglia stretta",
+  "family.parents": "Genitori",
+  "family.father": "Padre",
+  "family.mother": "Madre",
+  "family.husband": "Marito",
+  "family.wife": "Moglie",
+  "family.unknown_spouse": "Coniuge sconosciuto",
+  "family.children": "Figli",
+  "family.child": "Figlio"
 }
diff --git a/src/translations/pl.json b/src/translations/pl.json
index 0dc2373..2fd1d6a 100644
--- a/src/translations/pl.json
+++ b/src/translations/pl.json
@@ -134,5 +134,14 @@
   "extras.images": "Zdjęcia",
   "extras.notes": "Notatki",
   "extras.sources": "Źródła",
-  "extras.files": "Dodatkowe pliki"
+  "extras.files": "Dodatkowe pliki",
+  "family.immediate_family": "Najbliższa rodzina",
+  "family.parents": "Rodzice",
+  "family.father": "Ojciec",
+  "family.mother": "Matka",
+  "family.husband": "Mąż",
+  "family.wife": "Żona",
+  "family.unknown_spouse": "Nieznany współmałżonek",
+  "family.children": "Dzieci",
+  "family.child": "Dziecko"
 }
diff --git a/src/translations/ru.json b/src/translations/ru.json
index a8e3fc8..fb71fd3 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -134,5 +134,14 @@
   "extras.images": "Картинки",
   "extras.notes": "Примечание",
   "extras.sources": "Источники",
-  "extras.files": "Дополнительные файлы"
+  "extras.files": "Дополнительные файлы",
+  "family.immediate_family": "Ближайшие родственники",
+  "family.parents": "Родители",
+  "family.father": "Отец",
+  "family.mother": "Мать",
+  "family.husband": "Муж",
+  "family.wife": "Жена",
+  "family.unknown_spouse": "Неизвестный супруг(а)",
+  "family.children": "Дети",
+  "family.child": "Ребёнок"
 }
diff --git a/tests/details_visual.spec.ts b/tests/details_visual.spec.ts
index c2e182d..ea1a17a 100644
--- a/tests/details_visual.spec.ts
+++ b/tests/details_visual.spec.ts
@@ -135,4 +135,70 @@ test.describe('Details panel visual validation @visual', () => {
     await sidebar.waitFor();
     await expect(sidebar).toHaveScreenshot('details-events-sources.png');
   });
+
+  test('Immediate Family Rendering Test', async ({page, context}) => {
+    const immediateFamilyGedcom = dedent`
+      0 HEAD
+      1 GEDC
+      2 VERS 5.5.1
+      2 FORM Lineage-Linked
+      1 CHAR UTF-8
+      0 @I1@ INDI
+      1 NAME Focus /Person/
+      1 SEX M
+      1 FAMC @F1@
+      1 FAMS @F2@
+      1 FAMS @F3@
+      0 @I2@ INDI
+      1 NAME Father /Person/
+      1 SEX M
+      1 FAMS @F1@
+      0 @I3@ INDI
+      1 NAME Mother /Person/
+      1 SEX F
+      1 FAMS @F1@
+      0 @I4@ INDI
+      1 NAME Spouse /Person/
+      1 SEX F
+      1 FAMS @F2@
+      0 @I5@ INDI
+      1 NAME Older /Child/
+      1 SEX M
+      1 BIRT
+      2 DATE 1 JAN 2000
+      1 FAMC @F2@
+      0 @I6@ INDI
+      1 NAME Younger /Child/
+      1 SEX F
+      1 BIRT
+      2 DATE 1 JAN 2005
+      1 FAMC @F2@
+      0 @I7@ INDI
+      1 NAME Half /Child/
+      1 SEX M
+      1 BIRT
+      2 DATE 1 JAN 2010
+      1 FAMC @F3@
+      0 @F1@ FAM
+      1 HUSB @I2@
+      1 WIFE @I3@
+      1 CHIL @I1@
+      0 @F2@ FAM
+      1 HUSB @I1@
+      1 WIFE @I4@
+      1 CHIL @I5@
+      1 CHIL @I6@
+      0 @F3@ FAM
+      1 HUSB @I1@
+      1 CHIL @I7@
+      0 TRLR
+    `;
+
+    await mockGedcomResponse(context, immediateFamilyGedcom);
+
+    await page.goto('/#/view?url=https://example.org/family.ged');
+    const sidebar = page.locator('#sidebar');
+    await sidebar.waitFor();
+    await expect(sidebar).toHaveScreenshot('details-immediate-family.png');
+  });
 });
diff --git a/tests/details_visual.spec.ts-snapshots/details-events-sources-visual-linux.png b/tests/details_visual.spec.ts-snapshots/details-events-sources-visual-linux.png
index c41a6e4..98649ec 100644
Binary files a/tests/details_visual.spec.ts-snapshots/details-events-sources-visual-linux.png and b/tests/details_visual.spec.ts-snapshots/details-events-sources-visual-linux.png differ
diff --git a/tests/details_visual.spec.ts-snapshots/details-immediate-family-visual-linux.png b/tests/details_visual.spec.ts-snapshots/details-immediate-family-visual-linux.png
new file mode 100644
index 0000000..b3d2e0c
Binary files /dev/null and b/tests/details_visual.spec.ts-snapshots/details-immediate-family-visual-linux.png differ