diff --git a/public/elements/tind-refs.jsx b/public/elements/tind-refs.jsx
index fd1faa2..eb24646 100644
--- a/public/elements/tind-refs.jsx
+++ b/public/elements/tind-refs.jsx
@@ -6,13 +6,87 @@ import {
 } from "@/components/ui/accordion"
 
 export default function TindRefs () {
+  const parseTindReference = (msg) => {
+    const ref = {
+      title: null,
+      interviewers: [],
+      interviewees: [],
+      project: null,
+      link: null,
+    };
+    const lines = msg.split('\n').filter(line => line.trim() !== '');
+
+    lines.forEach(line => {
+      const parts = line.split(':');
+      const key = parts[0].trim();
+      const value = parts.slice(1).join(':').trim();
+
+      switch (key) {
+        case 'Title':
+          ref.title = value;
+          break;
+        case 'Contributor':
+          // if value ends in interviewee or interviewer, assign accordingly
+          if (value.endsWith(' interviewer')) {
+            ref.interviewers.push(value.replace(' interviewer', '').trim());
+          } else if (value.endsWith(' interviewee')) {
+            ref.interviewees.push(value.replace(' interviewee', '').trim());
+          }
+          break;
+        case 'Project Name':
+          ref.project = value;
+          break;
+        case 'Catalogue Link':
+          ref.link = value;
+          break;
+      }
+    });
+    return ref;
+  };
+  
+  let count = 0;
+
+
+  const buildTindMessage = () => {
+    const originalMessage = props.tind_message || 'no references supplied';
+    if (originalMessage === 'no references supplied') {
+      return originalMessage;
+    }
+    // Split message into parts by '___________' separator
+    const parts = originalMessage.split('___________');
+    
+    const references = parts
+      .filter(part => part.trim() !== '')
+      .map(part => parseTindReference(part));
+
+    count = references.length;
+    return (
+      <div>
+        {references.map((ref, index) => (
+          <div key={index}>
+            {ref.link && ref.link.trim() !== '' ? (
+              <a href={ref.link} style={{ textDecoration: 'underline' }}>{ref.title}</a>
+            ) : (<span>{ref.title}</span>)}
+            <p>
+              Interviewee(s): {ref.interviewees.join(' | ') || 'not listed'}<br />
+              Interviewer(s): {ref.interviewers.join(' | ') || 'not listed'}<br />
+              Project Name: {ref.project || 'not listed'}<br />
+            </p>
+            ___________
+          </div>
+        ))}
+      </div>
+    );
+  };
+  const tindMessage = buildTindMessage();
+
   return (
     <Accordion type="single" collapsible className="w-full">
       <AccordionItem value="ref-1">
-        <AccordionTrigger>Metadata</AccordionTrigger>
+        <AccordionTrigger>References{count > 0 ? ` (${count})` : ''}</AccordionTrigger>
         <AccordionContent>
           <p className="mb-2" style={{ whiteSpace: 'pre-line' }}>
-            {props.tind_message || 'no references supplied'}
+            {tindMessage}
           </p>
         </AccordionContent>
       </AccordionItem>
diff --git a/willa/web/app.py b/willa/web/app.py
index 767ecf6..722c65a 100644
--- a/willa/web/app.py
+++ b/willa/web/app.py
@@ -125,7 +125,7 @@ async def chat(message: cl.Message) -> None:
                 )
             msg = cl.Message(
                 author='TIND',
-                content='References:',
+                content='',
                 elements=[tind_refs],
                 metadata={'tind_message': reply['tind_message']}
                 )