diff --git a/frontend/src/components/heats/HeatBadges.jsx b/frontend/src/components/heats/HeatBadges.jsx
index feb5018..cb906b2 100644
--- a/frontend/src/components/heats/HeatBadges.jsx
+++ b/frontend/src/components/heats/HeatBadges.jsx
@@ -6,6 +6,7 @@
  * @param {number} maxVisible - Maximum number of badges to show before "+X more" (default: 3)
  * @param {boolean} compact - Use compact display (default: true)
  * @param {string} className - Additional CSS classes for container
+ * @param {string} badgeClassName - Custom CSS classes for individual badges (overrides default styling)
  *
  * @example
  * <HeatBadges heats={userHeats} maxVisible={3} />
@@ -15,7 +16,8 @@ const HeatBadges = ({
   heats = [],
   maxVisible = 3,
   compact = true,
-  className = ''
+  className = '',
+  badgeClassName = ''
 }) => {
   if (!heats || heats.length === 0) return null;
 
@@ -39,12 +41,15 @@ const HeatBadges = ({
   const visibleHeats = heats.slice(0, maxVisible);
   const remainingCount = heats.length - maxVisible;
 
+  const defaultBadgeClass = "text-xs px-1.5 py-0.5 bg-amber-100 text-amber-800 rounded font-mono";
+  const badgeClass = badgeClassName || defaultBadgeClass;
+
   return (
     <div className={`flex flex-wrap gap-1 ${className}`}>
       {visibleHeats.map((heat, idx) => (
         <span
           key={idx}
-          className="text-xs px-1.5 py-0.5 bg-amber-100 text-amber-800 rounded font-mono"
+          className={badgeClass}
           title={`${heat.competitionType?.name || ''} ${heat.division?.name || ''} Heat ${heat.heatNumber} (${heat.role || ''})`}
         >
           {formatHeat(heat)}
diff --git a/frontend/src/pages/EventChatPage.jsx b/frontend/src/pages/EventChatPage.jsx
index 685afc4..f8926a4 100644
--- a/frontend/src/pages/EventChatPage.jsx
+++ b/frontend/src/pages/EventChatPage.jsx
@@ -6,6 +6,7 @@ import { Send, UserPlus, Loader2, LogOut, AlertTriangle, QrCode, Edit2, Filter,
 import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
 import { eventsAPI, heatsAPI, matchesAPI } from '../services/api';
 import HeatsBanner from '../components/heats/HeatsBanner';
+import HeatBadges from '../components/heats/HeatBadges';
 import Avatar from '../components/common/Avatar';
 import ChatMessageList from '../components/chat/ChatMessageList';
 import ChatInput from '../components/chat/ChatInput';
@@ -356,16 +357,11 @@ const EventChatPage = () => {
                   {myHeats.length > 0 && (
                     <div className="flex items-center gap-2">
                       <span className="text-xs text-primary-100">Your heats:</span>
-                      <div className="flex flex-wrap gap-1">
-                        {myHeats.map((heat, idx) => (
-                          <span
-                            key={idx}
-                            className="text-xs px-2 py-0.5 bg-primary-700 text-white rounded font-mono"
-                          >
-                            {formatHeat(heat)}
-                          </span>
-                        ))}
-                      </div>
+                      <HeatBadges
+                        heats={myHeats}
+                        maxVisible={10}
+                        badgeClassName="text-xs px-2 py-0.5 bg-primary-700 text-white rounded font-mono"
+                      />
                     </div>
                   )}
                 </div>