diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index 8033221e..119423cf 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -65,13 +65,6 @@
   align-self: flex-end;
 }
 
-/* Section header */
-.sectionTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
 .sectionMeta {
   font-size: 12px;
   color: var(--text-muted);
@@ -249,22 +242,6 @@
   margin-top: 20px;
 }
 
-/* Event card (timeline panel) — card styling via sectionStyles.section */
-.eventCard {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  max-height: 420px;
-}
-
-.eventCardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
 /* Compact app card */
 .compactCard {
   background: color-mix(in srgb, var(--card-accent) 8%, var(--bg-raised));
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index f2b82a0f..710bcd16 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -975,9 +975,9 @@ export default function AgentHealth() {
           </InfiniteScrollArea>
         </div>
 
-        <div className={`${sectionStyles.section} ${styles.eventCard}`}>
-          <div className={styles.eventCardHeader}>
-            <span className={styles.sectionTitle}>Timeline</span>
+        <div className={logStyles.logCard}>
+          <div className={logStyles.logHeader}>
+            <SectionHeader>Timeline</SectionHeader>
             <div className={logStyles.headerActions}>
               <span className={styles.sectionMeta}>{eventStream.items.length} events</span>
               <Button variant="ghost" size="sm" onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
diff --git a/ui/src/pages/AgentInstance/AgentInstance.module.css b/ui/src/pages/AgentInstance/AgentInstance.module.css
index bbcf8454..02e59a88 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.module.css
+++ b/ui/src/pages/AgentInstance/AgentInstance.module.css
@@ -84,17 +84,3 @@
   min-height: 300px;
 }
 
-/* Timeline card — card styling via sectionStyles.section */
-.timelineCard {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.timelineHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx
index 59d1a872..df225e01 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -481,9 +481,9 @@ export default function AgentInstance() {
           </InfiniteScrollArea>
         </div>
 
-        <div className={`${sectionStyles.section} ${styles.timelineCard}`}>
-          <div className={styles.timelineHeader}>
-            <span className={styles.chartTitle}>Timeline</span>
+        <div className={logStyles.logCard}>
+          <div className={logStyles.logHeader}>
+            <SectionHeader>Timeline</SectionHeader>
             <div className={logStyles.headerActions}>
               <span className={styles.chartMeta}>{eventStream.items.length} events</span>
               <button className={logStyles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>