diff --git a/src/eventButton.js b/src/eventButton.js
index 4490792..ef4209e 100644
--- a/src/eventButton.js
+++ b/src/eventButton.js
@@ -15,8 +15,8 @@ const EventButton = (obj) => {
       <p>TransferBond: transfered bond worth {obj.data.amount / 1000000000000000000} Eth from {obj.data.oldDelegator} to {obj.data.newDelegator}</p>
     </div>
   } else if (obj.name == "Bond") {
-    eventSpecificInfo = <div className="row">
-      <p>Bond: {obj.data.delegator} transfered bond worth {obj.data.bondedAmount / 1000000000000000000} Eth from {obj.data.oldDelegate} to {obj.data.newDelegate}</p>
+    eventSpecificInfo = <div className="row" style={{backgroundColor:'rgba(50,50,50,0.3)'}}>
+      <p>Bond: {obj.data.delegator} delegated {obj.data.bondedAmount / 1000000000000000000} LPT from {obj.data.oldDelegate} to {obj.data.newDelegate}</p>
     </div>
   } else if (obj.name == "Rebond") {
     eventSpecificInfo = <div className="row">
diff --git a/src/eventViewer.js b/src/eventViewer.js
index c0116f2..5102627 100644
--- a/src/eventViewer.js
+++ b/src/eventViewer.js
@@ -5,30 +5,37 @@ import ScrollContainer from 'react-indiana-drag-scroll';
 const EventViewer = (obj) => {
   let txCounter = 0;
   let currentTx = "";
+  let eventCache = [];
+  let eventBundle = [];
   return (
     <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '200px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
-        <div className="content-wrapper">
-          <ScrollContainer className="overflow-container" hideScrollbars={false}>
-            <div className="overflow-content" style={{ cursor: 'grab' }}>
-              {obj.events.map((eventObj, idx) => {
-                if(currentTx != eventObj.transactionHash){
-                  txCounter++;
-                  currentTx = eventObj.transactionHash;
-                }
-                // TODO: make something that groups shit as long as the eventObj.transactionUrl is the same
-                return <EventButton
-                  key={eventObj.transactionUrl + idx}
-                  transactionUrl={eventObj.transactionUrl}
-                  transactionHash={eventObj.transactionHash}
-                  name={eventObj.name}
-                  data={eventObj.data}
-                  address={eventObj.address}
-                  idx={txCounter}
-                />
-              })}
-            </div>
-          </ScrollContainer>
-        </div>
+      <div className="content-wrapper">
+        <ScrollContainer className="overflow-container" hideScrollbars={false}>
+          <div className="overflow-content" style={{ cursor: 'grab' }}>
+            {obj.events.slice(0).reverse().map((eventObj, idx) => {
+              if (currentTx != eventObj.transactionHash) {
+                txCounter++;
+                currentTx = eventObj.transactionHash;
+                eventBundle = eventCache;
+                eventCache = [];
+              } else {
+                eventCache.push(eventObj);
+                return;
+              }
+              return <EventButton
+                key={eventObj.transactionUrl + idx}
+                transactionUrl={eventObj.transactionUrl}
+                transactionHash={eventObj.transactionHash}
+                name={eventObj.name}
+                data={eventObj.data}
+                address={eventObj.address}
+                idx={txCounter}
+                subEvents={eventBundle}
+              />
+            })}
+          </div>
+        </ScrollContainer>
+      </div>
     </div>
   )
 }