diff --git a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
index a11372c9f..e9fea8a11 100644
--- a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
+++ b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
@@ -73,6 +73,8 @@ type MedicationResult = {
 type MedicationRow = {
   result: MedicationResult;
   badges: ClinicalBadgeItem[];
+  /** Per-medication (drug-class) identity accent hex, for a subtle icon tint. */
+  accent?: string;
 };
 
 type MedicationResultFilter = "best" | "indication" | "safety" | "monitoring";
@@ -298,8 +300,25 @@ function FilterStrip({
   );
 }
 
-function ResultToneIcon({ result }: { result: MedicationResult }) {
+function ResultToneIcon({ result, accent }: { result: MedicationResult; accent?: string }) {
   const tone = result.tone === "teal" ? "teal" : result.tone === "blue" ? "blue" : "slate";
+  if (accent) {
+    // Decorative per-medication (class) accent tint; a soft wash + border keeps
+    // it legible in light and dark without carrying semantic meaning.
+    return (
+      <span
+        aria-hidden="true"
+        style={{
+          background: `color-mix(in srgb, ${accent} 12%, var(--surface))`,
+          borderColor: `color-mix(in srgb, ${accent} 34%, var(--surface))`,
+          color: accent,
+        }}
+        className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border shadow-[var(--shadow-inset)]"
+      >
+        <Pill className="h-[54%] w-[54%]" aria-hidden="true" />
+      </span>
+    );
+  }
   return <IconTile icon={Pill} tone={tone} className="h-9 w-9" />;
 }
 
@@ -382,14 +401,15 @@ function MedicationResults({
     const governance = catalog.data?.governance;
     const toRow = (result: MedicationResult, medication?: MedicationRecord): MedicationRow => {
       const badges = medication ? medicationIdentityBadges(medication, governance?.[medication.slug]) : [];
+      const accent = medication?.accent;
       // Prepend a per-patient alert badge so the highest-severity consideration
       // surfaces first in the row's badge cluster (priority-sorted by tone).
       if (medication && !profileEmpty) {
         const alerts = evaluatePatientAlerts(medication, profile);
         const alertBadge = considerationSummaryBadge(alerts.considerations.length, alerts.highestTone);
-        if (alertBadge) return { result, badges: [alertBadge, ...badges] };
+        if (alertBadge) return { result, badges: [alertBadge, ...badges], accent };
       }
-      return { result, badges };
+      return { result, badges, accent };
     };
     const sourceRows =
       catalog.data?.matches?.map((match) => toRow(match.result, match.medication)) ??
@@ -510,7 +530,7 @@ function MedicationResults({
               const rowContent = (
                 <>
                   <div className="flex min-w-0 items-center gap-2.5">
-                    <ResultToneIcon result={result} />
+                    <ResultToneIcon result={result} accent={row.accent} />
                     <div className="min-w-0">
                       <span className="block break-words text-base-minus font-semibold text-[color:var(--text-heading)]">
                         <HighlightedName text={result.name} term={query} />
@@ -590,7 +610,7 @@ function MedicationResults({
           );
           const cardContent = (
             <div className="grid grid-cols-[2.25rem_minmax(0,1fr)_auto] items-start gap-2.5">
-              <ResultToneIcon result={result} />
+              <ResultToneIcon result={result} accent={row.accent} />
               <div className="min-w-0 space-y-1.5">
                 <div className="min-w-0">
                   <p className="line-clamp-2 break-words text-base-minus font-semibold leading-5 text-[color:var(--text-heading)]">
diff --git a/src/components/clinical-dashboard/medication-record-page.tsx b/src/components/clinical-dashboard/medication-record-page.tsx
index 7e2bf80ef..dc1aa5526 100644
--- a/src/components/clinical-dashboard/medication-record-page.tsx
+++ b/src/components/clinical-dashboard/medication-record-page.tsx
@@ -6,17 +6,20 @@ import {
   TriangleAlert,
   ArrowLeft,
   BadgeCheck,
+  BookOpen,
   CalendarDays,
   ChevronDown,
   ClipboardList,
   FlaskConical,
+  Gauge,
   Lock,
   Pill,
   ShieldCheck,
+  Sparkles,
   type LucideIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent } from "react";
 
 import { BadgeCluster, clinicalBadgeToneClass } from "@/components/clinical-dashboard/clinical-badge";
 import { MedicationConsiderations } from "@/components/clinical-dashboard/medication-considerations";
@@ -31,7 +34,7 @@ import {
   type MedicationGovernance,
 } from "@/lib/medication-badges";
 import { medicationDetailTiles, type MedicationRecord, type MedicationSection } from "@/lib/medications";
-import { cn, pageContainer } from "@/components/ui-primitives";
+import { cn, EmptyState, LoadingPanel, pageContainer, toneDanger } from "@/components/ui-primitives";
 
 const sectionIcons: Record<string, LucideIcon> = {
   dose: CalendarDays,
@@ -43,35 +46,108 @@ const sectionIcons: Record<string, LucideIcon> = {
   src: BadgeCheck,
 };
 
+// Per-section toned icon tiles. Semantic tones stay reserved (red = contra/safety,
+// amber = risk/caution, green = safe/verified); other sections use the neutral
+// categorical --type-* hues so the list reads with colour without misusing meaning.
+const sectionToneClass: Record<string, string> = {
+  contra: "border-[color:var(--danger)]/25 bg-[color:var(--danger-soft)] text-[color:var(--danger)]",
+  risk: "border-[color:var(--warning)]/30 bg-[color:var(--warning-soft)] text-[color:var(--warning)]",
+  safe: "border-[color:var(--success)]/25 bg-[color:var(--success-soft)] text-[color:var(--success)]",
+  src: "border-[color:var(--success)]/25 bg-[color:var(--success-soft)] text-[color:var(--success)]",
+  mon: "border-[color:var(--info-border)] bg-[color:var(--info-soft)] text-[color:var(--info)]",
+  dose: "border-[color:var(--type-document-border)] bg-[color:var(--type-document-soft)] text-[color:var(--type-document)]",
+  inter: "border-[color:var(--type-source-border)] bg-[color:var(--type-source-soft)] text-[color:var(--type-source)]",
+};
+const defaultSectionTone =
+  "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]";
+
+// Decorative per-medication identity accent (record.accent is keyed to drug
+// class). Exposed as CSS custom properties and softened with color-mix so it
+// drives washes/rails only — never text — keeping contrast safe in light + dark
+// and staying within the colour contract (semantic colour uses the tokens).
+function medicationAccentStyle(accent: string | undefined): CSSProperties {
+  const base = accent?.trim() || "var(--clinical-accent)";
+  return {
+    "--med-accent": base,
+    "--med-accent-soft": `color-mix(in srgb, ${base} 12%, var(--surface))`,
+    "--med-accent-border": `color-mix(in srgb, ${base} 34%, var(--surface))`,
+  } as CSSProperties;
+}
+
+// Icon + categorical chip per detail tile (index-aligned with medicationDetailTiles:
+// Prescribing answer / Dosing / Dose ceiling / Avoid). The danger tile is toned
+// separately below.
+const detailTileDecor: Array<{ icon: LucideIcon; chip: string }> = [
+  {
+    icon: Sparkles,
+    chip: "border-[color:var(--type-source-border)] bg-[color:var(--type-source-soft)] text-[color:var(--type-source)]",
+  },
+  {
+    icon: CalendarDays,
+    chip: "border-[color:var(--type-document-border)] bg-[color:var(--type-document-soft)] text-[color:var(--type-document)]",
+  },
+  {
+    icon: Gauge,
+    chip: "border-[color:var(--type-service-border)] bg-[color:var(--type-service-soft)] text-[color:var(--type-service)]",
+  },
+  { icon: Ban, chip: "border-[color:var(--danger)]/25 bg-[color:var(--danger-soft)] text-[color:var(--danger)]" },
+];
+
 function DetailTile({
   label,
   value,
   meta,
   danger = false,
+  icon: Icon,
+  chip,
 }: {
   label: string;
   value: string;
   meta?: string;
   danger?: boolean;
+  icon: LucideIcon;
+  chip: string;
 }) {
   return (
     <div
       className={cn(
-        "rounded-lg border bg-[color:var(--surface-raised)] p-3 shadow-[var(--shadow-inset)]",
-        danger ? "border-[color:var(--danger-border)]/60" : "border-[color:var(--border)]",
+        "rounded-lg border p-3 shadow-[var(--shadow-inset)]",
+        danger ? toneDanger : "border-[color:var(--border)] bg-[color:var(--surface-raised)]",
       )}
     >
-      <p className="text-2xs font-semibold uppercase tracking-[0.08em] text-[color:var(--text-muted)]">{label}</p>
+      <div className="flex items-center gap-2">
+        <span
+          className={cn(
+            "grid h-6 w-6 shrink-0 place-items-center rounded-md border",
+            danger ? "border-[color:var(--danger)]/25 bg-[color:var(--surface)] text-[color:var(--danger)]" : chip,
+          )}
+        >
+          <Icon className="h-3.5 w-3.5" aria-hidden="true" />
+        </span>
+        <p
+          className={cn(
+            "text-2xs font-semibold uppercase tracking-[0.08em]",
+            danger ? "text-[color:var(--danger)]" : "text-[color:var(--text-muted)]",
+          )}
+        >
+          {label}
+        </p>
+      </div>
       <p
         className={cn(
-          "mt-1 text-sm-minus font-semibold leading-5",
+          "mt-1.5 text-sm-minus font-semibold leading-5",
           danger ? "text-[color:var(--danger-text)]" : "text-[color:var(--text-heading)]",
         )}
       >
         {value}
       </p>
       {meta ? (
-        <p className="mt-0.5 text-2xs font-semibold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+        <p
+          className={cn(
+            "mt-0.5 text-2xs font-semibold uppercase tracking-[0.06em]",
+            danger ? "text-[color:var(--danger-text)]" : "text-[color:var(--text-muted)]",
+          )}
+        >
           {meta}
         </p>
       ) : null}
@@ -79,18 +155,89 @@ function DetailTile({
   );
 }
 
+const detailTabs = [
+  ["summary", "Summary"],
+  ["dosing", "Dosing"],
+  ["safety", "Safety"],
+  ["more", "More"],
+] as const;
+type MedicationTabId = (typeof detailTabs)[number][0];
+
+function SectionTabs({ active, onChange }: { active: MedicationTabId; onChange: (id: MedicationTabId) => void }) {
+  const tabRefs = useRef(new Map<MedicationTabId, HTMLButtonElement>());
+
+  function handleKeyDown(event: ReactKeyboardEvent<HTMLElement>) {
+    const order = detailTabs.map((tab) => tab[0]);
+    const index = order.indexOf(active);
+    const next =
+      event.key === "ArrowRight"
+        ? order[(index + 1) % order.length]
+        : event.key === "ArrowLeft"
+          ? order[(index - 1 + order.length) % order.length]
+          : event.key === "Home"
+            ? order[0]
+            : event.key === "End"
+              ? order[order.length - 1]
+              : null;
+    if (!next) return;
+    event.preventDefault();
+    if (next !== active) onChange(next);
+    tabRefs.current.get(next)?.focus();
+  }
+
+  return (
+    <nav
+      role="tablist"
+      aria-label="Medication sections"
+      onKeyDown={handleKeyDown}
+      className="flex gap-1 border-b border-[color:var(--border)] text-sm font-semibold text-[color:var(--text-muted)]"
+    >
+      {detailTabs.map(([id, label]) => {
+        const isActive = active === id;
+        return (
+          <button
+            key={id}
+            ref={(element) => {
+              if (element) tabRefs.current.set(id, element);
+              else tabRefs.current.delete(id);
+            }}
+            type="button"
+            role="tab"
+            id={`medication-tab-${id}`}
+            aria-selected={isActive}
+            aria-controls={`medication-panel-${id}`}
+            tabIndex={isActive ? 0 : -1}
+            onClick={() => onChange(id)}
+            className={cn(
+              "min-h-tap flex-1 whitespace-nowrap border-b-2 px-1 pb-2.5 pt-1.5 text-center text-2xs transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:flex-none sm:px-4 sm:text-sm",
+              isActive
+                ? "border-[color:var(--clinical-accent)] text-[color:var(--clinical-accent)]"
+                : "border-transparent hover:text-[color:var(--text-heading)]",
+            )}
+          >
+            {label}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
+
 function SectionCard({ section }: { section: MedicationSection }) {
   const Icon = sectionIcons[section.type] || ClipboardList;
+  const toneClass = sectionToneClass[section.type] || defaultSectionTone;
 
   return (
     <details
       className="group scroll-mt-16 border-b border-[color:var(--border)] last:border-b-0"
       open={section.type === "summary" || section.type === "dose"}
     >
-      <summary className="flex min-h-10 cursor-pointer list-none items-center justify-between gap-3 px-3 text-left text-sm-minus font-semibold text-[color:var(--text-heading)] [&::-webkit-details-marker]:hidden">
-        <span className="flex min-w-0 items-center gap-2">
-          <Icon className="h-4 w-4 shrink-0 text-[color:var(--clinical-accent)]" aria-hidden="true" />
-          <span className="truncate">{section.title}</span>
+      <summary className="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-3 text-left [&::-webkit-details-marker]:hidden">
+        <span className="flex min-w-0 items-center gap-2.5">
+          <span className={cn("grid h-8 w-8 shrink-0 place-items-center rounded-lg border", toneClass)}>
+            <Icon className="h-4 w-4" aria-hidden="true" />
+          </span>
+          <span className="truncate text-sm-minus font-semibold text-[color:var(--text-heading)]">{section.title}</span>
         </span>
         <ChevronDown
           className="h-4 w-4 shrink-0 text-[color:var(--text-soft)] transition group-open:rotate-180"
@@ -118,17 +265,25 @@ function SectionCard({ section }: { section: MedicationSection }) {
   );
 }
 
+function SidebarCard({ title, icon: Icon, children }: { title: string; icon: LucideIcon; children: React.ReactNode }) {
+  return (
+    <section className="overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] shadow-[var(--shadow-inset)]">
+      <div className="flex items-center gap-2 border-b border-[color:var(--border)] px-3 py-2">
+        <Icon className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+        <h4 className="text-sm-minus font-semibold text-[color:var(--text-heading)]">{title}</h4>
+      </div>
+      {children}
+    </section>
+  );
+}
+
 function MedicationAccessPanel({ record }: { record: MedicationRecord }) {
   const badges = useMemo(() => medicationAccessBadges(record), [record]);
   const fields = useMemo(() => medicationAccessFields(record), [record]);
   if (!badges.length && !fields.length) return null;
 
   return (
-    <section className="overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] shadow-[var(--shadow-inset)]">
-      <div className="mb-0 flex items-center gap-2 border-b border-[color:var(--border)] px-3 py-2">
-        <Lock className="h-4 w-4 text-[color:var(--clinical-accent)]" aria-hidden="true" />
-        <h4 className="text-sm-minus font-semibold text-[color:var(--text-heading)]">Access</h4>
-      </div>
+    <SidebarCard title="Access" icon={Lock}>
       <div className="p-3">
         <BadgeCluster items={badges} compact limit={3} className="mb-2.5" />
         {fields.length ? (
@@ -148,7 +303,7 @@ function MedicationAccessPanel({ record }: { record: MedicationRecord }) {
           </dl>
         ) : null}
       </div>
-    </section>
+    </SidebarCard>
   );
 }
 
@@ -161,7 +316,7 @@ function MedicationRecordDetail({
 }) {
   const tiles = useMemo(() => medicationDetailTiles(record), [record]);
   const badges = useMemo(() => medicationIdentityBadges(record, governance), [record, governance]);
-  const [activeTab, setActiveTab] = useState<"summary" | "dosing" | "safety" | "more">("summary");
+  const [activeTab, setActiveTab] = useState<MedicationTabId>("summary");
 
   const sectionsByTab = useMemo(() => {
     const summaryTypes = new Set(["summary", "ind", "form"]);
@@ -179,19 +334,23 @@ function MedicationRecordDetail({
   const activeSections = sectionsByTab[activeTab];
 
   return (
-    <div className={cn(pageContainer, "space-y-3 py-1 sm:py-2")}>
-      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_21rem]">
+    <div className={cn(pageContainer, "space-y-3 py-1 sm:py-2")} style={medicationAccentStyle(record.accent)}>
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_21rem]">
         <div className="space-y-3.5">
-          <section className="scroll-mt-16 px-1 sm:px-0">
+          <section className="scroll-mt-16 overflow-hidden rounded-xl border border-[color:var(--border)] border-l-4 border-l-[color:var(--med-accent)] bg-[color:var(--surface-raised)] p-3.5 shadow-[var(--shadow-soft)] sm:p-5">
             <div className="flex items-start gap-3 sm:items-center sm:gap-4">
-              <span className="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-[color:var(--clinical-accent)]/20 bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] sm:h-14 sm:w-14">
-                <Pill className="h-[54%] w-[54%]" aria-hidden="true" />
+              <span className="grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-[color:var(--med-accent-border)] bg-[color:var(--surface)] text-[color:var(--med-accent)] shadow-[var(--shadow-inset)] sm:h-14 sm:w-14">
+                <Pill className="h-[52%] w-[52%]" aria-hidden="true" />
               </span>
               <div className="min-w-0 flex-1">
                 <h1 className="text-2xl font-semibold leading-tight tracking-normal text-[color:var(--text-heading)] sm:text-3xl">
                   {record.name}
                 </h1>
                 <p className="mt-1 text-sm-minus font-medium leading-5 text-[color:var(--text-muted)] sm:text-sm">
+                  <span
+                    className="mr-1.5 inline-block h-2 w-2 rounded-full bg-[color:var(--med-accent)] align-middle"
+                    aria-hidden="true"
+                  />
                   {record.subclass || record.class}
                   {record.category ? (
                     <>
@@ -206,85 +365,71 @@ function MedicationRecordDetail({
           </section>
 
           <section className="grid grid-cols-2 gap-2.5 xl:grid-cols-4">
-            {tiles.map((tile) => (
-              <DetailTile
-                key={tile.label}
-                label={tile.label}
-                value={tile.value}
-                meta={tile.meta}
-                danger={tile.danger}
-              />
-            ))}
+            {tiles.map((tile, index) => {
+              const decor = detailTileDecor[index] ?? detailTileDecor[detailTileDecor.length - 1];
+              return (
+                <DetailTile
+                  key={tile.label}
+                  label={tile.label}
+                  value={tile.value}
+                  meta={tile.meta}
+                  danger={tile.danger}
+                  icon={tile.danger ? Ban : decor.icon}
+                  chip={decor.chip}
+                />
+              );
+            })}
           </section>
 
           <section className="space-y-2.5">
-            <PatientProfilePanel />
+            <PatientProfilePanel defaultOpen={false} />
             <MedicationConsiderations record={record} />
           </section>
 
-          <div className="flex flex-wrap gap-2">
-            {(
-              [
-                ["summary", "Summary"],
-                ["dosing", "Dosing"],
-                ["safety", "Safety"],
-                ["more", "More"],
-              ] as const
-            ).map(([id, label]) => (
-              <button
-                key={id}
-                type="button"
-                aria-pressed={activeTab === id}
-                onClick={() => setActiveTab(id)}
-                className={cn(
-                  "min-h-tap rounded-lg border px-2.5 text-2xs font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:px-3 sm:text-xs",
-                  activeTab === id
-                    ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
-                    : "border-[color:var(--border)] bg-[color:var(--surface-raised)] text-[color:var(--text-muted)] hover:border-[color:var(--border-strong)] hover:text-[color:var(--text-heading)]",
-                )}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
+          <SectionTabs active={activeTab} onChange={setActiveTab} />
 
-          <section className="overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] shadow-[var(--shadow-soft)]">
+          <section
+            role="tabpanel"
+            id={`medication-panel-${activeTab}`}
+            aria-labelledby={`medication-tab-${activeTab}`}
+            className="overflow-hidden rounded-lg border border-[color:var(--border)] border-l-[3px] border-l-[color:var(--med-accent)] bg-[color:var(--surface-raised)] shadow-[var(--shadow-soft)]"
+          >
             {activeSections.length ? (
               activeSections.map((section) => (
                 <SectionCard key={`${section.type}-${section.title}`} section={section} />
               ))
             ) : (
-              <p className="px-3 py-4 text-sm text-[color:var(--text-muted)]">No sections in this view.</p>
+              <div className="p-3">
+                <EmptyState
+                  icon={ClipboardList}
+                  title="Nothing in this view"
+                  body="Switch tabs to see dosing, safety, or more detail for this medication."
+                />
+              </div>
             )}
           </section>
         </div>
 
-        <aside className="hidden space-y-3 lg:sticky lg:top-20 lg:block lg:self-start">
-          <section className="overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] shadow-[var(--shadow-inset)]">
-            <div className="border-b border-[color:var(--border)] px-3 py-2 text-sm-minus font-semibold text-[color:var(--text-heading)]">
-              Quick reference
-            </div>
+        <aside className="space-y-3 lg:sticky lg:top-20 lg:self-start">
+          <SidebarCard title="Quick reference" icon={BookOpen}>
             <div className="divide-y divide-[color:var(--border)]">
               {record.quick.map((row) => (
                 <div key={row.label} className="px-3 py-2.5">
                   <p className="text-2xs font-semibold uppercase tracking-[0.08em] text-[color:var(--text-muted)]">
                     {row.label}
                   </p>
-                  <p className="mt-1 text-xs leading-5 text-[color:var(--text-muted)]">
+                  <p className="mt-1 text-xs leading-5 text-[color:var(--text-heading)]">
                     {row.value.replace(/\*\*/g, "")}
                   </p>
                 </div>
               ))}
             </div>
-          </section>
+          </SidebarCard>
 
           <MedicationAccessPanel record={record} />
 
           {record.stats.length ? (
-            <section className="overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] shadow-[var(--shadow-inset)]">
-              <div className="border-b border-[color:var(--border)] px-3 py-2 text-sm-minus font-semibold text-[color:var(--text-heading)]">
-                Key stats
-              </div>
+            <SidebarCard title="Key stats" icon={Gauge}>
               <div className="grid grid-cols-2 gap-2 p-3">
                 {record.stats.map((stat) => {
                   const tone = medicationStatTone(stat);
@@ -304,7 +449,7 @@ function MedicationRecordDetail({
                   );
                 })}
               </div>
-            </section>
+            </SidebarCard>
           ) : null}
         </aside>
       </div>
@@ -329,7 +474,9 @@ export function MedicationRecordPage({ slug }: { slug: string }) {
       </div>
       <div className="px-3 py-3 sm:px-6 lg:px-8">
         {loading ? (
-          <p className="text-sm text-[color:var(--text-muted)]">Loading medication reference…</p>
+          <div className="mx-auto max-w-7xl">
+            <LoadingPanel label="Loading medication reference…" variant="skeleton" lines={6} />
+          </div>
         ) : error || !data?.record ? (
           <div className="rounded-lg border border-[color:var(--danger-border)] bg-[color:var(--danger-bg)] p-4 text-sm text-[color:var(--danger-text)]">
             <div className="flex items-start gap-2">
diff --git a/src/components/clinical-dashboard/patient-profile-panel.tsx b/src/components/clinical-dashboard/patient-profile-panel.tsx
index ecb12f9d1..1e2e01cce 100644
--- a/src/components/clinical-dashboard/patient-profile-panel.tsx
+++ b/src/components/clinical-dashboard/patient-profile-panel.tsx
@@ -77,13 +77,16 @@ function NumberField({
 
 export function PatientProfilePanel({
   variant = "full",
+  defaultOpen,
   className,
 }: {
   variant?: "full" | "compact";
+  /** Initial expanded state; falls back to `variant === "full"` when omitted. */
+  defaultOpen?: boolean;
   className?: string;
 }) {
   const { profile, updateField, toggleAllergy, clear, isEmpty } = usePatientProfile();
-  const [open, setOpen] = useState(variant === "full");
+  const [open, setOpen] = useState(defaultOpen ?? variant === "full");
   const allergies = new Set(profile.allergies ?? []);
 
   return (