diff --git a/api/endpoints/list_members.py b/api/endpoints/list_members.py
new file mode 100644
index 0000000..cb76009
--- /dev/null
+++ b/api/endpoints/list_members.py
@@ -0,0 +1,64 @@
+# endpoints/list_members.py
+from flask import Blueprint, request, jsonify
+from neo4j import GraphDatabase
+from app import get_driver, neo4j_logger
+
+bp = Blueprint('list_members', __name__)
+
+@bp.route('/list_members', methods=['GET'])
+def list_members():
+    member_name = request.form.get('member_name')
+
+    if not member_name:
+        return jsonify({"error": "No member name provided"}), 400
+
+    driver = get_driver()
+
+    try:
+        with driver.session() as session:
+            result = session.run("""
+                MATCH (m:Person {name: $memberName})-[*]-(n)
+                RETURN m, n, collect(DISTINCT (m)-[r]->(n))
+            """, memberName=member_name)
+
+            data = {
+                "nodes": [],
+                "links": []
+            }
+
+            for record in result:
+                node1 = record["m"]
+                nodes = [record["n"]]
+
+                # Add the first node
+                if {"id": node1.id, "label": node1.labels[0], "name": node1.get("name")} not in data["nodes"]:
+                    data["nodes"].append({"id": node1.id, "label": node1.labels[0], "name": node1.get("name")})
+
+                # Add other nodes and links
+                for node2 in nodes:
+                    if {"id": node2.id, "label": node2.labels[0], "name": node2.get("name")} not in data["nodes"]:
+                        data["nodes"].append({"id": node2.id, "label": node2.labels[0], "name": node2.get("name")})
+
+                    for rel in record[2]:
+                        if {"source": rel.start_node.id, "target": rel.end_node.id, "type": rel.type} not in data["links"]:
+                            data["links"].append({"source": rel.start_node.id, "target": rel.end_node.id, "type": rel.type})
+
+            return jsonify(data)
+
+    except Exception as e:
+        neo4j_logger.error(f"Error querying Neo4j: {e}")
+        return jsonify({"error": str(e)}), 500
+
+@bp.route('/get_member_names', methods=['GET'])
+def get_member_names():
+    driver = get_driver()
+
+    try:
+        with driver.session() as session:
+            result = session.run("MATCH (p:Person) RETURN p.name AS name")
+            members = [record['name'] for record in result]
+            return jsonify(members)
+
+    except Exception as e:
+        neo4j_logger.error(f"Error fetching member names: {e}")
+        return jsonify({"error": str(e)}), 500
diff --git a/api/templates/render_member.html b/api/templates/render_member.html
new file mode 100644
index 0000000..e125b5b
--- /dev/null
+++ b/api/templates/render_member.html
@@ -0,0 +1,128 @@
+<!-- templates/render_member.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Member Network</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        .node {
+            stroke: #fff;
+            stroke-width: 1.5px;
+        }
+        .link {
+            stroke: #999;
+            stroke-opacity: 0.6;
+        }
+    </style>
+</head>
+<body>
+    <h1>Member Network</h1>
+    <select id="memberSelect">
+        <!-- Options will be populated dynamically -->
+    </select>
+    <div id="graph"></div>
+
+    <script>
+        // Fetch member names from Neo4j
+        fetch('/list_members/get_member_names')
+            .then(response => response.json())
+            .then(members => {
+                const select = document.getElementById('memberSelect');
+                members.forEach(member => {
+                    const option = document.createElement('option');
+                    option.value = member;
+                    option.text = member;
+                    select.appendChild(option);
+                });
+            });
+
+        // Handle member selection
+        document.getElementById('memberSelect').addEventListener('change', function() {
+            console.log("Member selected:", this.value); // Log the selected member name
+
+            const selectedMember = this.value;
+            fetch(`/list_members/render_member?member_name=${encodeURIComponent(selectedMember)}`, {
+                method: 'GET',
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log("Graph data received:", data); // Log the graph data
+                renderGraph(data);
+            })
+            .catch(error => {
+                console.error("Error fetching graph data:", error); // Log any errors
+            });
+        });
+
+        // Render D3 network graph
+        function renderGraph(data) {
+            const width = 800;
+            const height = 600;
+
+            const svg = d3.select("#graph")
+                .selectAll("svg") // Remove existing SVG elements first
+                .remove()
+                .append("svg")
+                .attr("width", width)
+                .attr("height", height);
+
+            const simulation = d3.forceSimulation(data.nodes)
+                .force("link", d3.forceLink(data.links).id(d => d.id))
+                .force("charge", d3.forceManyBody().strength(-500))
+                .force("center", d3.forceCenter(width / 2, height / 2));
+
+            const link = svg.append("g")
+                .attr("class", "links")
+                .selectAll("line")
+                .data(data.links)
+                .enter().append("line")
+                .attr("stroke-width", 2);
+
+            const node = svg.append("g")
+                .attr("class", "nodes")
+                .selectAll("circle")
+                .data(data.nodes)
+                .enter().append("circle")
+                .attr("r", 5)
+                .attr("fill", d => d.label === 'Person' ? 'steelblue' : 'orange')
+                .call(d3.drag()
+                    .on("start", dragstarted)
+                    .on("drag", dragged)
+                    .on("end", dragended));
+
+            node.append("title")
+                .text(d => `${d.name} (${d.label})`);
+
+            simulation.on("tick", () => {
+                link
+                    .attr("x1", d => d.source.x)
+                    .attr("y1", d => d.source.y)
+                    .attr("x2", d => d.target.x)
+                    .attr("y2", d => d.target.y);
+
+                node
+                    .attr("cx", d => d.x)
+                    .attr("cy", d => d.y);
+            });
+
+            function dragstarted(event, d) {
+                if (!event.active) simulation.alphaTarget(0.3).restart();
+                d.fx = d.x;
+                d.fy = d.y;
+            }
+
+            function dragged(event, d) {
+                d.fx = event.x;
+                d.fy = event.y;
+            }
+
+            function dragended(event, d) {
+                if (!event.active) simulation.alphaTarget(0);
+                d.fx = null;
+                d.fy = null;
+            }
+        }
+    </script>
+</body>
+</html>
