diff --git a/NUCLEAR_FAMILY_TREE.md b/NUCLEAR_FAMILY_TREE.md
index fab01f5..9a4b9eb 100644
--- a/NUCLEAR_FAMILY_TREE.md
+++ b/NUCLEAR_FAMILY_TREE.md
@@ -1,141 +1,157 @@
-# Nuclear Family Tree Network View Documentation
+# D3.js Interactive Family Tree 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.
+The D3.js Interactive Family Tree provides a professional, library-powered visualization of biblical genealogies with interactive navigation, zoom controls, and hierarchical family relationships using the industry-standard D3.js library.
 
 ## Features Overview
 
-### 🌳 Interactive Nuclear Family Network
-- Visual network layout showing immediate family relationships
+### 🌳 D3.js Powered Family Tree
+- Professional hierarchical tree layout using D3.js library
+- Interactive zoom and pan controls for navigation
+- Expandable/collapsible tree nodes for large genealogies
 - 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
+- Smooth transitions and animations
+- Responsive design that adapts to screen size
 
 ### 🎯 Key Capabilities
-- **Network Visualization:** Positioned family members with connecting lines
+- **Professional Tree Layout:** D3.js tree algorithm for optimal positioning
+- **Interactive Controls:** Zoom, pan, center, expand/collapse functionality
 - **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)
+- **Connection Types:** Tree links for parent-child and marriage relationships
 - **Mobile Responsive:** Adaptive layout for different screen sizes
-- **Visual Legend:** Color-coded legend explaining family member roles
+- **Tree View Default:** Interactive tree is the primary view mode
 
 ## Technical Implementation
 
 ### 1. View Toggle System
+- **Tree View (Default):** D3.js interactive family tree visualization
 - **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
+- Tree view loads by default for better user experience
 
-### 2. Nuclear Family Network Layout
+### 2. D3.js Tree Implementation
 ```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
-};
+// D3.js tree layout with zoom and pan
+function initializeD3Tree() {
+    svg = d3.select("#tree-svg");
+    zoom = d3.zoom()
+        .scaleExtent([0.1, 3])
+        .on("zoom", (event) => {
+            g.attr("transform", event.transform);
+        });
+    tree = d3.tree().size([height - 100, width - 200]);
+}
 ```
 
-### 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
+### 3. D3.js Node Styling
+- **Current Person:** Primary color circle with bold white text
+- **Spouse:** Green circle (#e8f5e8) with green stroke
+- **Parents:** Yellow circle (#fff3cd) with yellow stroke
+- **Children:** Red circle (#f8d7da) with red stroke
+- **Hover Effects:** Animated circle radius and stroke changes
 
-### 4. Connection Line System
+### 4. D3.js Link 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
+// D3.js hierarchical links
+const links = g.selectAll('.tree-link')
+    .data(treeLayout.links())
+    .enter()
+    .append('path')
+    .attr('d', d3.linkHorizontal());
+
+// Marriage connections
+const spouseLinks = g.selectAll('.spouse-link')
+    .attr('class', 'tree-link marriage');
 ```
 
-## Network Layout Structure
+## D3.js Tree Structure
 
-### **Family Positioning:**
+### **Hierarchical Layout:**
 ```
-    [Parent 1]     [Parent 2]
-           \         /
-            \       /
-             \     /
-      [Current Person] ——— [Spouse]
-             |
-             |
-    [Child 1] [Child 2] [Child 3]
+    [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
+### **D3.js Features:**
+- **Tree Algorithm:** Automatic optimal positioning using D3.js tree layout
+- **Zoom Controls:** Mouse wheel and button controls for navigation
+- **Pan Support:** Drag to move around large family trees
+- **Smooth Transitions:** Animated updates when changing focus person
 
 ## 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
+- **Hover Effects:** Animated circle radius and stroke changes
+- **Tree Controls:** Center, Expand All, Collapse All buttons
+- **Zoom/Pan:** Mouse controls for navigating large family trees
+- **Role Colors:** Visual distinction through circle colors and strokes
 
 ### **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
+- **Desktop:** Full 600px height with D3.js optimal spacing
+- **Mobile:** Reduced to 400px height with responsive text
+- **SVG Scaling:** Vector graphics scale perfectly on all devices
+- **Touch Support:** Touch-friendly controls for mobile interaction
 
 ## Implementation Details
 
-### **Family Member Creation:**
+### **D3.js Node 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`;
+function updateD3Tree(person, personId) {
+    const root = d3.hierarchy(treeData);
+    const treeLayout = tree(root);
     
-    member.innerHTML = `
-        <div class="name">${person.name}</div>
-        <div class="role">${role}</div>
-    `;
-    
-    return member;
+    const nodes = g.selectAll('.tree-node')
+        .data(treeLayout.descendants())
+        .enter()
+        .append('g')
+        .attr('class', d => `tree-node ${d.data.id === personId ? 'current' : ''}`)
+        .on('click', (event, d) => {
+            selectPerson(d.data.id);
+        });
 }
 ```
 
-### **Connection Line Drawing:**
+### **D3.js Link Generation:**
 ```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
+function drawTreeLinks() {
+    // D3.js automatically calculates optimal link paths
+    const links = g.selectAll('.tree-link')
+        .data(treeLayout.links())
+        .enter()
+        .append('path')
+        .attr('d', d3.linkHorizontal()
+            .x(d => d.y)
+            .y(d => d.x));
 }
 ```
 
 ## 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
+### **D3.js Node Styling:**
+- **Base:** SVG circles with stroke and fill colors
+- **Current Person:** Primary color fill with white text
+- **Hover Effects:** Animated radius changes and stroke width
+- **Role Colors:** CSS classes applied to SVG elements for styling
 
-### **Connection Line Styling:**
-- **Marriage Lines:** 3px height, green color (#28a745)
-- **Parent-Child Lines:** 3px width, blue color (#007bff)
-- **Positioning:** Absolute positioning with calculated coordinates
+### **D3.js Link Styling:**
+- **Tree Links:** SVG paths with smooth curves
+- **Marriage Lines:** Dashed green lines for spouse connections
+- **Parent-Child Links:** Standard tree hierarchy connections
+- **Vector Graphics:** Crisp lines at any zoom level
 
 ## 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
+- **Container Height:** Reduced from 600px to 400px on mobile
+- **Node Size:** Scalable SVG circles maintain usability
+- **Font Sizes:** Responsive text sizing for mobile readability
+- **Control Positioning:** Tree controls adapt to mobile screens
+- **Touch Targets:** SVG elements sized for touch interaction
 
 ## Navigation Integration
 
@@ -152,9 +168,11 @@ function createConnectionLine(from, to, type) {
 
 ## 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
+- **Advanced D3.js Layouts:** Implement radial or force-directed layouts
+- **Multiple Generations:** Recursive tree expansion for deeper genealogies
+- **Family Statistics:** Interactive data visualization with D3.js charts
+- **Export Features:** SVG export for high-quality printable diagrams
+- **Animation Libraries:** Enhanced transitions with D3.js animation
+- **Advanced Zoom:** Semantic zoom with detail levels
+- **Search Integration:** Highlight search results in tree view
+- **Timeline Integration:** Connect family tree with biblical timeline
\ No newline at end of file
diff --git a/kjvstudy_org/templates/family_tree.html b/kjvstudy_org/templates/family_tree.html
index d8d0982..bcfde98 100644
--- a/kjvstudy_org/templates/family_tree.html
+++ b/kjvstudy_org/templates/family_tree.html
@@ -217,31 +217,31 @@
     }
 
     .tree-node circle {
-        fill: #fff;
-        stroke: var(--primary-color);
+        fill: #2d3436;
+        stroke: #ffc107;
         stroke-width: 3px;
         transition: all 0.3s ease;
     }
 
     .tree-node.current circle {
-        fill: var(--primary-color);
-        stroke: var(--primary-color);
+        fill: #ffc107;
+        stroke: #ffc107;
         stroke-width: 4px;
     }
 
     .tree-node.spouse circle {
-        fill: #e8f5e8;
+        fill: #2d3436;
         stroke: #28a745;
     }
 
     .tree-node.parent circle {
-        fill: #fff3cd;
-        stroke: #ffc107;
+        fill: #2d3436;
+        stroke: #74b9ff;
     }
 
     .tree-node.child circle {
-        fill: #f8d7da;
-        stroke: #dc3545;
+        fill: #2d3436;
+        stroke: #fd79a8;
     }
 
     .tree-node:hover circle {
@@ -251,25 +251,25 @@
 
     .tree-node text {
         font: 12px sans-serif;
-        fill: var(--text-color);
+        fill: #f8f9fa;
         text-anchor: middle;
         dominant-baseline: central;
         pointer-events: none;
     }
 
     .tree-node.current text {
-        fill: white;
+        fill: #2d3436;
         font-weight: bold;
     }
 
     .tree-link {
         fill: none;
-        stroke: #ccc;
+        stroke: #636e72;
         stroke-width: 2px;
     }
 
     .tree-link.marriage {
-        stroke: #28a745;
+        stroke: #00b894;
         stroke-width: 3px;
         stroke-dasharray: 5,5;
     }
@@ -278,26 +278,28 @@
         position: absolute;
         top: 1rem;
         left: 1rem;
-        background: white;
-        border: 1px solid var(--border-color);
+        background: #2d3436;
+        border: 1px solid #636e72;
         border-radius: 8px;
         padding: 0.5rem;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     }
 
     .tree-controls button {
         margin: 0.25rem;
         padding: 0.25rem 0.5rem;
-        border: 1px solid var(--border-color);
-        background: white;
+        border: 1px solid #636e72;
+        background: #2d3436;
+        color: #f8f9fa;
         border-radius: 4px;
         cursor: pointer;
         font-size: 0.8rem;
     }
 
     .tree-controls button:hover {
-        background: var(--primary-color);
-        color: white;
+        background: #ffc107;
+        color: #2d3436;
+        border-color: #ffc107;
     }
 
     @media (max-width: 768px) {