diff --git a/src/components/ExpandableCardShell.tsx b/src/components/ExpandableCardShell.tsx
new file mode 100644
index 0000000..b58cbc8
--- /dev/null
+++ b/src/components/ExpandableCardShell.tsx
@@ -0,0 +1,147 @@
+import React, { useCallback } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronRight } from 'lucide-react'
+import { hexToRgba, motionSafeTransition } from '@/lib/utils'
+
+interface ExpandableCardShellProps {
+  isExpanded: boolean
+  isHighlighted: boolean
+  accentColor: string
+  onToggle: () => void
+  ariaLabel: string
+  headerPadding?: string
+  className?: string
+  dataTileId?: string
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+  renderHeader: () => React.ReactNode
+  renderBody: () => React.ReactNode
+}
+
+export function ExpandableCardShell({
+  isExpanded,
+  isHighlighted,
+  accentColor,
+  onToggle,
+  ariaLabel,
+  headerPadding = '12px 14px',
+  className,
+  dataTileId,
+  onMouseEnter,
+  onMouseLeave,
+  renderHeader,
+  renderBody,
+}: ExpandableCardShellProps) {
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        onToggle()
+      }
+      if (e.key === 'Escape' && isExpanded) {
+        e.preventDefault()
+        onToggle()
+      }
+    },
+    [onToggle, isExpanded],
+  )
+
+  return (
+    <div
+      data-tile-id={dataTileId}
+      className={className}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div
+        style={{
+          background: isHighlighted ? hexToRgba(accentColor, 0.03) : 'var(--bg-dashboard)',
+          borderRadius: 'var(--radius-sm)',
+          border: `1px solid ${isExpanded || isHighlighted ? hexToRgba(accentColor, 0.2) : 'var(--border-light)'}`,
+          transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.15s',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={onToggle}
+          onKeyDown={handleKeyDown}
+          aria-expanded={isExpanded}
+          aria-label={ariaLabel}
+          style={{
+            display: 'flex',
+            gap: '10px',
+            padding: headerPadding,
+            cursor: 'pointer',
+            minHeight: '44px',
+            alignItems: 'flex-start',
+          }}
+          onMouseEnter={(e) => {
+            if (!isExpanded) {
+              e.currentTarget.parentElement!.style.borderColor = hexToRgba(accentColor, 0.2)
+              e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!isExpanded) {
+              e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
+              e.currentTarget.parentElement!.style.boxShadow = 'none'
+            }
+          }}
+        >
+          <div
+            aria-hidden="true"
+            style={{
+              width: '9px',
+              height: '9px',
+              borderRadius: '50%',
+              background: accentColor,
+              flexShrink: 0,
+              marginTop: '4px',
+            }}
+          />
+
+          <div style={{ flex: 1, minWidth: 0 }}>
+            {renderHeader()}
+          </div>
+
+          <ChevronRight
+            size={14}
+            style={{
+              color: 'var(--text-tertiary)',
+              flexShrink: 0,
+              marginTop: '2px',
+              transform: isExpanded ? 'rotate(90deg)' : 'none',
+              transition: 'transform 0.15s ease-out',
+            }}
+          />
+        </div>
+
+        <AnimatePresence>
+          {isExpanded && (
+            <motion.div
+              initial={{ height: 0 }}
+              animate={{ height: 'auto' }}
+              exit={{ height: 0 }}
+              transition={motionSafeTransition(0.2)}
+              style={{ overflow: 'hidden' }}
+            >
+              <div
+                style={{
+                  padding: '0 12px 12px 30px',
+                  borderTop: '1px solid var(--border-light)',
+                  paddingTop: '12px',
+                  borderLeft: `2px solid ${accentColor}`,
+                  marginLeft: '12px',
+                }}
+              >
+                {renderBody()}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/TimelineInterventionsSubsection.tsx b/src/components/TimelineInterventionsSubsection.tsx
index 5bfe867..c3c2928 100644
--- a/src/components/TimelineInterventionsSubsection.tsx
+++ b/src/components/TimelineInterventionsSubsection.tsx
@@ -1,11 +1,11 @@
-import React, { useMemo, useState, useCallback } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
+import { useMemo, useState, useCallback } from 'react'
 import { ChevronRight } from 'lucide-react'
+import { ExpandableCardShell } from './ExpandableCardShell'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
 import { timelineEntities, timelineConsultations } from '@/data/timeline'
 import { getExperienceEducationUICopy } from '@/lib/profile-content'
 import type { TimelineEntity } from '@/types/pmr'
-import { hexToRgba, motionSafeTransition } from '@/lib/utils'
+import { hexToRgba } from '@/lib/utils'
 
 interface TimelineInterventionItemProps {
   entity: TimelineEntity
@@ -30,90 +30,32 @@ function TimelineInterventionItem({
   const isEducation = entity.kind === 'education'
   const interventionLabel = isEducation ? experienceEducationCopy.educationLabel : experienceEducationCopy.employmentLabel
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault()
-        onToggle()
-      }
-      if (e.key === 'Escape' && isExpanded) {
-        e.preventDefault()
-        onToggle()
-      }
-    },
-    [isExpanded, onToggle],
-  )
-
   return (
-    <div
-      data-tile-id={isEducationAnchor ? 'section-education' : undefined}
+    <ExpandableCardShell
+      isExpanded={isExpanded}
+      isHighlighted={isHighlightedFromGraph}
+      accentColor={entity.orgColor}
+      onToggle={onToggle}
+      ariaLabel={`${entity.title} at ${entity.organization}, ${entity.dateRange.display}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
+      headerPadding="8px 8px"
       className={isEducation ? 'timeline-intervention-item timeline-intervention-item--education' : 'timeline-intervention-item'}
+      dataTileId={isEducationAnchor ? 'section-education' : undefined}
       onMouseEnter={() => onHighlight?.(entity.id)}
       onMouseLeave={() => onHighlight?.(null)}
-    >
-      <div
-        style={{
-          background: isHighlightedFromGraph ? hexToRgba(entity.orgColor, 0.03) : 'var(--bg-dashboard)',
-          borderRadius: 'var(--radius-sm)',
-          border: `1px solid ${isExpanded || isHighlightedFromGraph ? hexToRgba(entity.orgColor, 0.2) : 'var(--border-light)'}`,
-          transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.15s',
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          role="button"
-          tabIndex={0}
-          onClick={onToggle}
-          onKeyDown={handleKeyDown}
-          aria-expanded={isExpanded}
-          aria-label={`${entity.title} at ${entity.organization}, ${entity.dateRange.display}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
-          style={{
-            display: 'flex',
-            gap: '10px',
-            padding: '8px 8px',
-            cursor: 'pointer',
-            
-            alignItems: 'flex-start',
-          }}
-          onMouseEnter={(e) => {
-            if (!isExpanded) {
-              e.currentTarget.parentElement!.style.borderColor = hexToRgba(entity.orgColor, 0.2)
-              e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
-            }
-          }}
-          onMouseLeave={(e) => {
-            if (!isExpanded) {
-              e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
-              e.currentTarget.parentElement!.style.boxShadow = 'none'
-            }
-          }}
-        >
+      renderHeader={() => (
+        <>
           <div
-            aria-hidden="true"
             style={{
-              width: '9px',
-              height: '9px',
-              borderRadius: '50%',
-              background: entity.orgColor,
-              flexShrink: 0,
-              marginTop: '4px',
+              display: 'flex',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              gap: '6px',
             }}
-          />
-
-          <div style={{ flex: 1, minWidth: 0 }}>
+          >
+            <span className={isEducation ? 'timeline-intervention-pill timeline-intervention-pill--education' : 'timeline-intervention-pill'}>
+              {interventionLabel}
+            </span>
             <div
-              style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                alignItems: 'center',
-                gap: '6px',
-                
-              }}
-            >
-              <span className={isEducation ? 'timeline-intervention-pill timeline-intervention-pill--education' : 'timeline-intervention-pill'}>
-                {interventionLabel}
-              </span>
-                          <div
               style={{
                 fontSize: '14px',
                 fontWeight: 600,
@@ -123,17 +65,16 @@ function TimelineInterventionItem({
             >
               {entity.title}
             </div>
-            </div>
-                        <div
-              style={{
-                fontSize: '12px',
-                color: 'var(--text-secondary)',
-                marginTop: '2px',
-              }}
-            >
-              {entity.organization}
-            
-              <span
+          </div>
+          <div
+            style={{
+              fontSize: '12px',
+              color: 'var(--text-secondary)',
+              marginTop: '2px',
+            }}
+          >
+            {entity.organization}
+            <span
               style={{
                 fontSize: '11px',
                 paddingLeft: '6px',
@@ -144,145 +85,109 @@ function TimelineInterventionItem({
             >
               {entity.dateRange.display}
             </span>
-            </div>
-
-
-
-
           </div>
-
-          <ChevronRight
-            size={14}
+        </>
+      )}
+      renderBody={() => (
+        <>
+          <ul
             style={{
-              color: 'var(--text-tertiary)',
-              flexShrink: 0,
-              marginTop: '2px',
-              transform: isExpanded ? 'rotate(90deg)' : 'none',
-              transition: 'transform 0.15s ease-out',
-              
+              listStyle: 'none',
+              padding: 0,
+              margin: '0 0 10px 0',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '5px',
             }}
-          />
-        </div>
-
-        <AnimatePresence>
-          {isExpanded && (
-            <motion.div
-              initial={{ height: 0 }}
-              animate={{ height: 'auto' }}
-              exit={{ height: 0 }}
-              transition={motionSafeTransition(0.2)}
-              style={{ overflow: 'hidden' }}
-            >
-              <div
+          >
+            {entity.details.map((detail, i) => (
+              <li
+                key={i}
                 style={{
-                  padding: '0 12px 12px 30px',
-                  borderTop: '1px solid var(--border-light)',
-                  paddingTop: '12px',
-                  borderLeft: `2px solid ${entity.orgColor}`,
-                  marginLeft: '12px',
+                  fontSize: '13px',
+                  color: 'var(--text-primary)',
+                  lineHeight: 1.5,
+                  paddingLeft: '12px',
+                  position: 'relative',
                 }}
               >
-                <ul
+                <span
+                  aria-hidden="true"
                   style={{
-                    listStyle: 'none',
-                    padding: 0,
-                    margin: '0 0 10px 0',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '5px',
+                    position: 'absolute',
+                    left: 0,
+                    top: '6px',
+                    width: '4px',
+                    height: '4px',
+                    borderRadius: '50%',
+                    background: entity.orgColor,
+                    opacity: 0.5,
                   }}
-                >
-                  {entity.details.map((detail, i) => (
-                    <li
-                      key={i}
-                      style={{
-                        fontSize: '13px',
-                        color: 'var(--text-primary)',
-                        lineHeight: 1.5,
-                        paddingLeft: '12px',
-                        position: 'relative',
-                      }}
-                    >
-                      <span
-                        aria-hidden="true"
-                        style={{
-                          position: 'absolute',
-                          left: 0,
-                          top: '6px',
-                          width: '4px',
-                          height: '4px',
-                          borderRadius: '50%',
-                          background: entity.orgColor,
-                          opacity: 0.5,
-                        }}
-                      />
-                      {detail}
-                    </li>
-                  ))}
-                </ul>
+                />
+                {detail}
+              </li>
+            ))}
+          </ul>
 
-                {!!entity.codedEntries?.length && (
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexWrap: 'wrap',
-                      gap: '6px',
-                      marginBottom: '10px',
-                    }}
-                  >
-                    {entity.codedEntries.map((entry) => (
-                      <span
-                        key={entry.code}
-                        style={{
-                          fontSize: '11px',
-                          fontFamily: 'var(--font-geist-mono)',
-                          padding: '3px 8px',
-                          borderRadius: '4px',
-                          background: hexToRgba(entity.orgColor, 0.08),
-                          color: entity.orgColor,
-                          border: `1px solid ${hexToRgba(entity.orgColor, 0.2)}`,
-                        }}
-                      >
-                        {entry.code}: {entry.description}
-                      </span>
-                    ))}
-                  </div>
-                )}
-
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onViewFull()
-                  }}
+          {!!entity.codedEntries?.length && (
+            <div
+              style={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '6px',
+                marginBottom: '10px',
+              }}
+            >
+              {entity.codedEntries.map((entry) => (
+                <span
+                  key={entry.code}
                   style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '4px',
-                    fontSize: '12px',
-                    fontWeight: 500,
+                    fontSize: '11px',
+                    fontFamily: 'var(--font-geist-mono)',
+                    padding: '3px 8px',
+                    borderRadius: '4px',
+                    background: hexToRgba(entity.orgColor, 0.08),
                     color: entity.orgColor,
-                    background: 'transparent',
-                    border: 'none',
-                    padding: '4px 0',
-                    cursor: 'pointer',
-                    fontFamily: 'inherit',
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.opacity = '0.7'
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.opacity = '1'
+                    border: `1px solid ${hexToRgba(entity.orgColor, 0.2)}`,
                   }}
                 >
-                  {experienceEducationCopy.viewFullRecordLabel}
-                  <ChevronRight size={12} />
-                </button>
-              </div>
-            </motion.div>
+                  {entry.code}: {entry.description}
+                </span>
+              ))}
+            </div>
           )}
-        </AnimatePresence>
-      </div>
-    </div>
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              onViewFull()
+            }}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              fontSize: '12px',
+              fontWeight: 500,
+              color: entity.orgColor,
+              background: 'transparent',
+              border: 'none',
+              padding: '4px 0',
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.opacity = '0.7'
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.opacity = '1'
+            }}
+          >
+            {experienceEducationCopy.viewFullRecordLabel}
+            <ChevronRight size={12} />
+          </button>
+        </>
+      )}
+    />
   )
 }
 
diff --git a/src/components/WorkExperienceSubsection.tsx b/src/components/WorkExperienceSubsection.tsx
index a834924..07392a5 100644
--- a/src/components/WorkExperienceSubsection.tsx
+++ b/src/components/WorkExperienceSubsection.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useCallback } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
+import { useState, useCallback } from 'react'
 import { ChevronRight } from 'lucide-react'
 import { CardHeader } from './Card'
+import { ExpandableCardShell } from './ExpandableCardShell'
 import { timelineConsultations } from '@/data/timeline'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
-import { hexToRgba, motionSafeTransition } from '@/lib/utils'
+import { hexToRgba } from '@/lib/utils'
 import { DEFAULT_ORG_COLOR } from '@/lib/theme-colors'
 
 interface RoleItemProps {
@@ -17,76 +17,20 @@ interface RoleItemProps {
 }
 
 function RoleItem({ consultation, isExpanded, isHighlightedFromGraph, onToggle, onViewFull, onHighlight }: RoleItemProps) {
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault()
-        onToggle()
-      }
-      if (e.key === 'Escape' && isExpanded) {
-        e.preventDefault()
-        onToggle()
-      }
-    },
-    [onToggle, isExpanded],
-  )
+  const orgColor = consultation.orgColor ?? DEFAULT_ORG_COLOR
 
   return (
-    <div
-      style={{
-        background: isHighlightedFromGraph ? hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.03) : 'var(--bg-dashboard)',
-        borderRadius: 'var(--radius-sm)',
-        border: `1px solid ${isExpanded || isHighlightedFromGraph ? hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2) : 'var(--border-light)'}`,
-        transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.15s',
-        overflow: 'hidden',
-      }}
+    <ExpandableCardShell
+      isExpanded={isExpanded}
+      isHighlighted={isHighlightedFromGraph}
+      accentColor={orgColor}
+      onToggle={onToggle}
+      ariaLabel={`${consultation.role} at ${consultation.organization}, ${consultation.duration}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
+      headerPadding="12px 14px"
       onMouseEnter={() => onHighlight?.(consultation.id)}
       onMouseLeave={() => onHighlight?.(null)}
-    >
-      {/* Clickable header */}
-      <div
-        role="button"
-        tabIndex={0}
-        onClick={onToggle}
-        onKeyDown={handleKeyDown}
-        aria-expanded={isExpanded}
-        aria-label={`${consultation.role} at ${consultation.organization}, ${consultation.duration}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
-        style={{
-          display: 'flex',
-          gap: '10px',
-          padding: '12px 14px',
-          cursor: 'pointer',
-          minHeight: '44px',
-          alignItems: 'flex-start',
-        }}
-        onMouseEnter={(e) => {
-          if (!isExpanded) {
-            e.currentTarget.parentElement!.style.borderColor = hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2)
-            e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
-          }
-        }}
-        onMouseLeave={(e) => {
-          if (!isExpanded) {
-            e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
-            e.currentTarget.parentElement!.style.boxShadow = 'none'
-          }
-        }}
-      >
-        {/* Org colour dot */}
-        <div
-          aria-hidden="true"
-          style={{
-            width: '9px',
-            height: '9px',
-            borderRadius: '50%',
-            background: consultation.orgColor ?? DEFAULT_ORG_COLOR,
-            flexShrink: 0,
-            marginTop: '4px',
-          }}
-        />
-
-        {/* Text content */}
-        <div style={{ flex: 1, minWidth: 0 }}>
+      renderHeader={() => (
+        <>
           <div
             style={{
               fontSize: '14px',
@@ -116,141 +60,109 @@ function RoleItem({ consultation, isExpanded, isHighlightedFromGraph, onToggle,
           >
             {consultation.duration}
           </div>
-        </div>
-
-        {/* Chevron */}
-        <ChevronRight
-          size={14}
-          style={{
-            color: 'var(--text-tertiary)',
-            flexShrink: 0,
-            marginTop: '2px',
-            transform: isExpanded ? 'rotate(90deg)' : 'none',
-            transition: 'transform 0.15s ease-out',
-          }}
-        />
-      </div>
-
-      {/* Expandable detail content */}
-      <AnimatePresence>
-        {isExpanded && (
-          <motion.div
-            initial={{ height: 0 }}
-            animate={{ height: 'auto' }}
-            exit={{ height: 0 }}
-            transition={motionSafeTransition(0.2)}
-            style={{ overflow: 'hidden' }}
+        </>
+      )}
+      renderBody={() => (
+        <>
+          {/* Examination bullets */}
+          <ul
+            style={{
+              listStyle: 'none',
+              padding: 0,
+              margin: '0 0 10px 0',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '5px',
+            }}
           >
-            <div
-              style={{
-                padding: '0 12px 12px 30px',
-                borderTop: '1px solid var(--border-light)',
-                paddingTop: '12px',
-                borderLeft: `2px solid ${consultation.orgColor ?? 'var(--accent)'}`,
-                marginLeft: '12px',
-              }}
-            >
-              {/* Examination bullets */}
-              <ul
+            {consultation.examination.map((bullet, i) => (
+              <li
+                key={i}
                 style={{
-                  listStyle: 'none',
-                  padding: 0,
-                  margin: '0 0 10px 0',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: '5px',
+                  fontSize: '13px',
+                  color: 'var(--text-primary)',
+                  lineHeight: 1.5,
+                  paddingLeft: '12px',
+                  position: 'relative',
                 }}
               >
-                {consultation.examination.map((bullet, i) => (
-                  <li
-                    key={i}
-                    style={{
-                      fontSize: '13px',
-                      color: 'var(--text-primary)',
-                      lineHeight: 1.5,
-                      paddingLeft: '12px',
-                      position: 'relative',
-                    }}
-                  >
-                    <span
-                      aria-hidden="true"
-                      style={{
-                        position: 'absolute',
-                        left: 0,
-                        top: '6px',
-                        width: '4px',
-                        height: '4px',
-                        borderRadius: '50%',
-                        background: consultation.orgColor ?? 'var(--accent)',
-                        opacity: 0.5,
-                      }}
-                    />
-                    {bullet}
-                  </li>
-                ))}
-              </ul>
+                <span
+                  aria-hidden="true"
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: '6px',
+                    width: '4px',
+                    height: '4px',
+                    borderRadius: '50%',
+                    background: consultation.orgColor ?? 'var(--accent)',
+                    opacity: 0.5,
+                  }}
+                />
+                {bullet}
+              </li>
+            ))}
+          </ul>
 
-              {/* Coded entries */}
-              <div
+          {/* Coded entries */}
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '6px',
+              marginBottom: '10px',
+            }}
+          >
+            {consultation.codedEntries.map((entry) => (
+              <span
+                key={entry.code}
                 style={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: '6px',
-                  marginBottom: '10px',
-                }}
-              >
-                {consultation.codedEntries.map((entry) => (
-                  <span
-                    key={entry.code}
-                    style={{
-                      fontSize: '11px',
-                      fontFamily: 'var(--font-geist-mono)',
-                      padding: '3px 8px',
-                      borderRadius: '4px',
-                      background: hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.08),
-                      color: consultation.orgColor ?? 'var(--accent)',
-                      border: `1px solid ${hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2)}`,
-                    }}
-                  >
-                    {entry.code}: {entry.description}
-                  </span>
-                ))}
-              </div>
-
-              {/* View full record link */}
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onViewFull()
-                }}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '4px',
-                  fontSize: '12px',
-                  fontWeight: 500,
+                  fontSize: '11px',
+                  fontFamily: 'var(--font-geist-mono)',
+                  padding: '3px 8px',
+                  borderRadius: '4px',
+                  background: hexToRgba(orgColor, 0.08),
                   color: consultation.orgColor ?? 'var(--accent)',
-                  background: 'transparent',
-                  border: 'none',
-                  padding: '4px 0',
-                  cursor: 'pointer',
-                  fontFamily: 'inherit',
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.opacity = '0.7'
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.opacity = '1'
+                  border: `1px solid ${hexToRgba(orgColor, 0.2)}`,
                 }}
               >
-                View full record
-                <ChevronRight size={12} />
-              </button>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
+                {entry.code}: {entry.description}
+              </span>
+            ))}
+          </div>
+
+          {/* View full record link */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              onViewFull()
+            }}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              fontSize: '12px',
+              fontWeight: 500,
+              color: consultation.orgColor ?? 'var(--accent)',
+              background: 'transparent',
+              border: 'none',
+              padding: '4px 0',
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.opacity = '0.7'
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.opacity = '1'
+            }}
+          >
+            View full record
+            <ChevronRight size={12} />
+          </button>
+        </>
+      )}
+    />
   )
 }