diff --git a/src/components/EventHeader.js b/src/components/EventHeader.js
index 8d32dee..e8454cf 100644
--- a/src/components/EventHeader.js
+++ b/src/components/EventHeader.js
@@ -2,21 +2,14 @@ import { Link } from 'react-router-dom'
 import TokenImage from './TokenImage'
 import '../styles/event-header.css'
 
-function EventHeader({ event, linkToEvent = false }) {
+function EventHeader({ event, size = 48 }) {
   return (
     <div className="event-header">
       <div className="event-header-image">
-        {linkToEvent
-          ? (
-            <Link to={`/event/${event.id}`}>
-              <TokenImage event={event} size={48} resize={true} />
-            </Link>
-          )
-          : <TokenImage event={event} size={48} resize={true} />
-        }
+        <TokenImage event={event} size={size} resize={true} />
       </div>
       <div className="event-header-info">
-        <div className="event-id">#{event.id}</div>
+        <Link className="event-id">#{event.id}</Link>
         <h2 title={event.name}>{event.name}</h2>
       </div>
     </div>
diff --git a/src/components/InCommon.js b/src/components/InCommon.js
index db5f70f..c63b968 100644
--- a/src/components/InCommon.js
+++ b/src/components/InCommon.js
@@ -143,11 +143,11 @@ function InCommon({
           {inCommonEntries.map(
             ([eventId, addresses]) => (
               <div
+                key={eventId}
                 className={`in-common-event${activeEventIds.indexOf(eventId) !== -1 ? ' selected' : ''}${showCount > 0 && showCount === addresses.length ? ' perfect' : ''}`}
                 title={events[eventId].name}
               >
                 <button
-                  key={eventId}
                   className="event-button"
                   onClick={() => toggleActiveEventId(eventId)}
                 >
@@ -160,6 +160,7 @@ function InCommon({
                     : <EventCount event={events[eventId]} count={addresses.length} size={64} />
                   }
                 </button>
+                <Link to={`/event/${eventId}`} className="event-id">#{eventId}</Link>
               </div>
             )
           )}
@@ -182,7 +183,7 @@ function InCommon({
           {activeEventIds.map((activeEventId) =>
             <div className="active-event" key={activeEventId}>
               <Card>
-                <EventHeader event={events[activeEventId]} linkToEvent={true} />
+                <EventHeader event={events[activeEventId]} size={48} />
                 <div className="active-event-actions">
                   {createActiveTopButtons(activeEventId)}
                   <ButtonClose onClose={() => removeActiveEventId(activeEventId)} />
diff --git a/src/styles/event-header.css b/src/styles/event-header.css
index 60e7854..74184c5 100644
--- a/src/styles/event-header.css
+++ b/src/styles/event-header.css
@@ -6,6 +6,7 @@
 .event-header .event-id {
   font-weight: bold;
   line-height: 1.6;
+  color: black;
 }
 
 .event-header h2 {
diff --git a/src/styles/in-common.css b/src/styles/in-common.css
index d480080..f74f185 100644
--- a/src/styles/in-common.css
+++ b/src/styles/in-common.css
@@ -30,6 +30,18 @@
   height: 64px;
 }
 
+.in-common .in-common-event .event-id {
+  text-align: center;
+  display: block;
+  cursor: pointer;
+  font-size: 80%;
+  margin: .1rem;
+}
+
+.in-common .in-common-event.selected .event-id {
+  color: white;
+}
+
 .in-common .show-more {
   display: inline-block;
   margin-left: .5rem;