diff --git a/client/modules/reconportal/src/ReconSidePanel/ReconSidePanel.module.css b/client/modules/reconportal/src/ReconSidePanel/ReconSidePanel.module.css
index d6d6248f4..c90aabedd 100644
--- a/client/modules/reconportal/src/ReconSidePanel/ReconSidePanel.module.css
+++ b/client/modules/reconportal/src/ReconSidePanel/ReconSidePanel.module.css
@@ -106,7 +106,7 @@
   font-weight: 600;
   font-size: 14px;
   text-transform: capitalize;
-  margin: 2px 0;
+  margin: 2px 2px;
 }
 
 .eventDetailCard :global(.ant-card-body) {
diff --git a/client/modules/reconportal/src/ReconSidePanel/ReconSidePanel.tsx b/client/modules/reconportal/src/ReconSidePanel/ReconSidePanel.tsx
index a665df28e..65eab07a3 100644
--- a/client/modules/reconportal/src/ReconSidePanel/ReconSidePanel.tsx
+++ b/client/modules/reconportal/src/ReconSidePanel/ReconSidePanel.tsx
@@ -127,7 +127,9 @@ export const ReconSidePanel: React.FC<LayoutProps> = ({
     const title = event.title;
     const description = event.location_description;
     const date = event.event_date;
-    const eventType = event.event_type;
+    const eventType =
+      eventTypes.find((type) => type.name === event.event_type)?.display_name ||
+      event.event_type;
 
     return (
       <div className={styles.eventContainer}>
@@ -144,11 +146,7 @@ export const ReconSidePanel: React.FC<LayoutProps> = ({
             </Text>
             <Tag
               color={getReconEventColor(event)}
-              style={{
-                fontWeight: 600,
-                fontSize: 14,
-                textTransform: 'capitalize',
-              }}
+              className={styles.eventDetailTag}
             >
               {eventType}
             </Tag>
diff --git a/client/modules/reconportal/src/utils/colors.tsx b/client/modules/reconportal/src/utils/colors.tsx
index 0e55e645b..759e6a3a8 100644
--- a/client/modules/reconportal/src/utils/colors.tsx
+++ b/client/modules/reconportal/src/utils/colors.tsx
@@ -30,6 +30,14 @@ export const EVENT_TYPE_COLORS = {
   landslide: ' #57D657',
   hurricane: ' #47A59D',
   tornado: ' #FF5722',
+  storm_surge: '#2E86AB',
+  extreme_temperature: '#8B4789',
+  drought: '#795548',
+  wind: '#1E3A8A', //Needs to be added to elastic search
+  fire: '#EC407A',
+  pandemic: '#FFA726',
+  multi: '#6B8E23',
+  thunderstorm: '#607D8B',
 };
 
 export function getReconEventColor(
@@ -49,6 +57,22 @@ export function getReconEventColor(
       return EVENT_TYPE_COLORS.hurricane;
     case 'tornado':
       return EVENT_TYPE_COLORS.tornado;
+    case 'storm_surge':
+      return EVENT_TYPE_COLORS.storm_surge;
+    case 'extreme_temperature':
+      return EVENT_TYPE_COLORS.extreme_temperature;
+    case 'drought':
+      return EVENT_TYPE_COLORS.drought;
+    case 'wind':
+      return EVENT_TYPE_COLORS.wind;
+    case 'fire':
+      return EVENT_TYPE_COLORS.fire;
+    case 'pandemic':
+      return EVENT_TYPE_COLORS.pandemic;
+    case 'multi':
+      return EVENT_TYPE_COLORS.multi;
+    case 'thunderstorm':
+      return EVENT_TYPE_COLORS.thunderstorm;
     default:
       return '#666666'; // Default gray color
   }
diff --git a/designsafe/apps/rapid/views.py b/designsafe/apps/rapid/views.py
index f433427df..801a35640 100644
--- a/designsafe/apps/rapid/views.py
+++ b/designsafe/apps/rapid/views.py
@@ -62,6 +62,7 @@ def index(request):
 
 def get_event_types(request):
     s = RapidNHEventType.search()
+    s = s.extra(size=40) # Allows up to 40 event types
     try:
         results  = s.execute(ignore_cache=True)
     except (TransportError, ConnectionTimeout) as err: