diff --git a/NUCLEAR_FAMILY_TREE.md b/NUCLEAR_FAMILY_TREE.md
new file mode 100644
index 0000000..fab01f5
--- /dev/null
+++ b/NUCLEAR_FAMILY_TREE.md
@@ -0,0 +1,160 @@
+# Nuclear Family Tree Network View Documentation
+
+The Nuclear Family Tree Network View provides an interactive visualization of immediate family relationships, showing the current person with their spouse, parents, and children in a connected network layout.
+
+## Features Overview
+
+### 🌳 Interactive Nuclear Family Network
+- Visual network layout showing immediate family relationships
+- Color-coded family members by role (current person, spouse, parents, children)
+- Connection lines showing marriage and parent-child relationships
+- Clickable nodes to navigate between family members
+- Responsive positioning that adapts to screen size
+
+### 🎯 Key Capabilities
+- **Network Visualization:** Positioned family members with connecting lines
+- **Role-Based Coloring:** Visual distinction between family roles
+- **Interactive Navigation:** Click any family member to select them
+- **Connection Types:** Marriage lines (horizontal, green) and parent-child lines (vertical, blue)
+- **Mobile Responsive:** Adaptive layout for different screen sizes
+- **Visual Legend:** Color-coded legend explaining family member roles
+
+## Technical Implementation
+
+### 1. View Toggle System
+- **Details View:** Traditional list-based family information
+- **Tree View:** Nuclear family network visualization
+- Toggle buttons allow switching between views
+- View preference maintained during person selection
+
+### 2. Nuclear Family Network Layout
+```javascript
+// Responsive positioning system
+const positions = {
+    current: { x: containerWidth * 0.3, y: containerHeight * 0.4 },
+    spouse: { x: containerWidth * 0.6, y: containerHeight * 0.4 },
+    parent1: { x: containerWidth * 0.2, y: containerHeight * 0.1 },
+    parent2: { x: containerWidth * 0.5, y: containerHeight * 0.1 },
+    children: [] // Dynamically positioned based on number of children
+};
+```
+
+### 3. Family Member Roles and Colors
+- **Current Person:** Primary blue background with white text
+- **Spouse:** Light green background (#e8f5e8) with green border
+- **Parents:** Light yellow background (#fff3cd) with yellow border  
+- **Children:** Light red background (#f8d7da) with red border
+
+### 4. Connection Line System
+```javascript
+// Three types of connection lines
+- Marriage Lines: Horizontal green lines connecting spouses
+- Parent-Child Lines: Vertical blue lines connecting generations
+- Dynamic Positioning: Lines calculated based on element positions
+```
+
+## Network Layout Structure
+
+### **Family Positioning:**
+```
+    [Parent 1]     [Parent 2]
+           \         /
+            \       /
+             \     /
+      [Current Person] ——— [Spouse]
+             |
+             |
+    [Child 1] [Child 2] [Child 3]
+```
+
+### **Connection Types:**
+- **Marriage Connection:** Horizontal line between current person and spouse
+- **Parent-Child Connections:** Vertical lines from parents to current person
+- **Children Connections:** Vertical lines from current person (and spouse) to children
+
+## User Interface Features
+
+### **Interactive Elements:**
+- **Clickable Nodes:** All family members are clickable for navigation
+- **Hover Effects:** Scale and shadow effects on family member hover
+- **Role Indicators:** Text labels showing family role (Current, Spouse, Parent, Child)
+- **Visual Legend:** Color-coded legend explaining family member types
+
+### **Responsive Design:**
+- **Desktop:** Full 500px height with optimal spacing
+- **Mobile:** Reduced to 350px height with compressed layout
+- **Adaptive Positioning:** Percentage-based positioning for different screen sizes
+- **Scalable Text:** Font sizes adjust for mobile viewing
+
+## Implementation Details
+
+### **Family Member Creation:**
+```javascript
+function createFamilyMember(person, personId, role, position) {
+    const member = document.createElement('div');
+    member.className = `family-member ${role}`;
+    member.onclick = () => selectPerson(personId);
+    member.style.left = `${position.x}px`;
+    member.style.top = `${position.y}px`;
+    
+    member.innerHTML = `
+        <div class="name">${person.name}</div>
+        <div class="role">${role}</div>
+    `;
+    
+    return member;
+}
+```
+
+### **Connection Line Drawing:**
+```javascript
+function createConnectionLine(from, to, type) {
+    // Calculates positions and creates lines between family members
+    // Handles both horizontal (marriage) and vertical (parent-child) lines
+    // Dynamically positions based on element locations
+}
+```
+
+## CSS Styling Features
+
+### **Family Member Styling:**
+- **Base:** White background with rounded corners and shadow
+- **Current Person:** Primary color background with prominence
+- **Hover Effects:** Scale transform and enhanced shadows
+- **Role Colors:** Distinct colors for easy identification
+
+### **Connection Line Styling:**
+- **Marriage Lines:** 3px height, green color (#28a745)
+- **Parent-Child Lines:** 3px width, blue color (#007bff)
+- **Positioning:** Absolute positioning with calculated coordinates
+
+## Mobile Optimization
+
+### **Responsive Adjustments:**
+- **Container Height:** Reduced from 500px to 350px on mobile
+- **Family Member Size:** Smaller min-width and padding
+- **Font Sizes:** Scaled down text for mobile readability
+- **Legend Positioning:** Adjusted for mobile screen real estate
+- **Touch Targets:** Maintained adequate size for touch interaction
+
+## Navigation Integration
+
+### **Person Selection:**
+- Clicking any family member navigates to that person
+- Network updates to show new person's family relationships
+- Maintains view preference (tree vs details)
+- Updates both views simultaneously
+
+### **View Synchronization:**
+- Tree view updates when person changes in details view
+- Family member selection works from both views
+- Consistent navigation experience across view types
+
+## Future Enhancement Opportunities
+
+- **Extended Family:** Add grandparents and grandchildren to network
+- **Multiple Generations:** Expandable tree showing more generations
+- **Family Statistics:** Show family size and generation information
+- **Export Features:** Generate printable family tree diagrams
+- **Animation Effects:** Smooth transitions when changing family focus
+- **Zoom and Pan:** Navigation controls for larger family networks
\ No newline at end of file