diff --git a/package.json b/package.json
index aea0b3f..b95fe8a 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "react-dom": "^16.12.0",
     "react-indiana-drag-scroll": "^2.1.0",
     "react-markdown": "^7.1.1",
+    "react-paginate": "^8.1.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.0.2",
     "react-scripts": "3.2.0",
diff --git a/src/eventButton.js b/src/eventButton.js
index 200d279..719dbd0 100644
--- a/src/eventButton.js
+++ b/src/eventButton.js
@@ -11,6 +11,7 @@ const rewardColour = "rgba(20, 99, 29, 0.3)";
 const updateColour = "rgba(122, 63, 23, 0.3)";
 const withdrawStakeColour = "rgba(102, 3, 10, 0.3)";
 const stakeColour = "rgba(71, 23, 122, 0.3)";
+const unbondColour = "rgba(122, 23, 51, 0.3)";
 const claimColour = "rgba(77, 91, 42, 0.3)";
 const migrateColour = "rgba(56, 23, 122, 0.3)";
 
@@ -55,10 +56,14 @@ const EventButton = (obj) => {
     // Unbond: defines transactionWhen. Defines transactionAmount as X / 1000000000000000000 LPT
     if (eventObj.name === "Unbond") {
       // Caller and from will get overwritten by TransferBond or Rebond, but might as well set them
-      if (isOnlyBondRelated) {
+      if (isOnlyBondRelated || hasEarningsClaimed) {
+        transactionName = "Unbond";
+        hasEarningsClaimed = false;
         transactionCaller = eventObj.data.delegate.toLowerCase();
         transactionFrom = eventObj.data.delegator.toLowerCase();
+        transactionWhen = eventObj.data.withdrawRound;
         transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
+        thisColour = unbondColour;
       }
       hasUnbondTransaction = true;
     }
@@ -92,7 +97,7 @@ const EventButton = (obj) => {
     }
 
     // TranscoderActivated: defines transactionName as a stake claim. Defines transactionWhen
-    if (eventObj.name === "EarningsClaimed" && !hasActivation && !hasBondTransaction && !hasRebondTransaction) {
+    if (eventObj.name === "EarningsClaimed" && !hasUnbondTransaction && !hasActivation && !hasBondTransaction && !hasRebondTransaction) {
       transactionName = "Claim";
       transactionWhen = eventObj.data.endRound;
       transactionFrom = eventObj.data.delegate;
@@ -141,10 +146,7 @@ const EventButton = (obj) => {
       isOnlyBondRelated = false;
     }
     if (eventObj.name === "WithdrawFees") {
-      console.log("Skipping WithdrawFees");
-    }
-    if (eventObj.name === "Unbond") {
-      console.log("Skipping WithdrawFees");
+      // console.log("Skipping WithdrawFees");
     }
   })
 
@@ -215,6 +217,12 @@ const EventButton = (obj) => {
     }
     count++;
   }
+  if (obj.unbondActivated) {
+    if (transactionName === "Unbond") {
+      isFiltered = false;
+    }
+    count++;
+  }
   if (obj.delegatorRewardActivated) {
     if (transactionName === "Claim") {
       isFiltered = false;
@@ -245,7 +253,7 @@ const EventButton = (obj) => {
       console.log(thisData);
       return null;
     }
-    let claimString = "claimed ";
+    let claimString = "delegator claimed ";
     if (transactionAmount > thresholdStaking) {
       claimString += transactionAmount.toFixed(2) + " LPT staking rewards";
       if (transactionAdditionalAmount > thresholdFees) {
@@ -265,6 +273,11 @@ const EventButton = (obj) => {
       <div className="rowAlignLeft">
         <p>changed their reward commission to {transactionAmount.toFixed(2)}% and their fee commission to {transactionAdditionalAmount.toFixed(2)}%</p>
       </div>
+  } else if (transactionName === "Unbond") {
+    eventSpecificInfo =
+      <div className="rowAlignLeft">
+        <p> unbonded {transactionAmount.toFixed(2)} LPT from {transactionFrom} starting from round {transactionWhen}</p>
+      </div>
   } else if (transactionName === "Stake") {
     if (transactionFrom == "0x0000000000000000000000000000000000000000") {
       eventSpecificInfo =
diff --git a/src/eventViewer.js b/src/eventViewer.js
index f507e70..d9d43c5 100644
--- a/src/eventViewer.js
+++ b/src/eventViewer.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import EventButton from "./eventButton";
 import ScrollContainer from 'react-indiana-drag-scroll';
-
+import ReactPaginate from 'react-paginate';
 /// A scrollable and filterable list of EventButtons
 
 const activationColour = "rgba(23, 60, 122, 0.3)";
@@ -10,6 +10,7 @@ const updateColour = "rgba(122, 63, 23, 0.3)";
 const withdrawStakeColour = "rgba(102, 3, 10, 0.3)";
 const stakeColour = "rgba(71, 23, 122, 0.3)";
 const claimColour = "rgba(77, 91, 42, 0.3)";
+const unbondColour = "rgba(122, 23, 51, 0.3)";
 
 const EventViewer = (obj) => {
   const [searchTerm, setSearchTerm] = useState(obj.prefill || "");
@@ -19,6 +20,7 @@ const EventViewer = (obj) => {
   const [withdrawActivated, setWithdrawActivated] = useState(false);
   const [stakeActivated, setStakeActivated] = useState(false);
   const [delegatorRewardActivated, setDelegatorRewardActivated] = useState(false);
+  const [unbondActivated, setUnbondActivated] = useState(false);
   console.log("Rendering EventViewer");
 
   let txCounter = 0;
@@ -33,7 +35,7 @@ const EventViewer = (obj) => {
   let finalIdx = 0;
   return (
     <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '300px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
-      <div className="fixed-container" style={{ padding: 0, width: '300px'}}>
+      <div className="fixed-container" style={{ padding: 0, width: '300px' }}>
         <input className="searchField" style={{ width: '300px' }}
           value={searchTerm}
           onChange={(evt) => setSearchTerm(evt.target.value)}
@@ -78,42 +80,48 @@ const EventViewer = (obj) => {
                   withdrawActivated={withdrawActivated}
                   stakeActivated={stakeActivated}
                   delegatorRewardActivated={delegatorRewardActivated}
+                  unbondActivated={unbondActivated}
                 />
               }
             })}
           </div>
         </ScrollContainer>
         <div className="strokeSmollLeft" style={{ marginRight: "1em" }}>
-          <button className={filterActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: activationColour }} onClick={() => {
+          <button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: activationColour }} onClick={() => {
             setFilterActivated(!filterActivated);
           }}>
             <h3>Activated</h3>
           </button>
-          <button className={rewardActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: rewardColour }} onClick={() => {
+          <button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardColour }} onClick={() => {
             setRewardActivated(!rewardActivated);
           }}>
             <h3>Reward</h3>
           </button>
-          <button className={updateActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: updateColour }} onClick={() => {
+          <button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateColour }} onClick={() => {
             setUpdateActivated(!updateActivated);
           }}>
             <h3>Update</h3>
           </button>
-          <button className={withdrawActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: withdrawStakeColour }} onClick={() => {
+          <button className={withdrawActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: withdrawStakeColour }} onClick={() => {
             setWithdrawActivated(!withdrawActivated);
           }}>
             <h3>Withdraw</h3>
           </button>
-          <button className={stakeActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: stakeColour }} onClick={() => {
+          <button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeColour }} onClick={() => {
             setStakeActivated(!stakeActivated);
           }}>
             <h3>Stake</h3>
           </button>
-          <button className={delegatorRewardActivated ? "row homeButton active" : "row homeButton"} style={{ backgroundColor: claimColour }} onClick={() => {
+          <button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: claimColour }} onClick={() => {
             setDelegatorRewardActivated(!delegatorRewardActivated);
           }}>
             <h3>Claim</h3>
           </button>
+          <button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondColour }} onClick={() => {
+            setUnbondActivated(!unbondActivated);
+          }}>
+            <h3>Unbond</h3>
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/loadingScreen.js b/src/loadingScreen.js
index 12116f2..2220f33 100644
--- a/src/loadingScreen.js
+++ b/src/loadingScreen.js
@@ -10,8 +10,8 @@ import { login } from "./actions/session";
 
 // Shows a loading screen on first load and gets fresh data every refreshInterval milliseconds
 
-// Refresh every 30 seconds
-const refreshInterval = 30000;
+// Refresh every 60 seconds
+const refreshInterval = 60000;
 
 const Startup = (obj) => {
   const [isLoaded, setIsLoaded] = useState(false);
diff --git a/src/orchestratorViewer.js b/src/orchestratorViewer.js
index 12516e4..e4f1a72 100644
--- a/src/orchestratorViewer.js
+++ b/src/orchestratorViewer.js
@@ -92,7 +92,7 @@ const Orchestrator = (obj) => {
         </div>
         <div className="strokeSmollLeft" style={{ alignItems: 'stretch', flex: 2, marginLeft: '1em', borderLeft: '3px solid rgba(15,15,15,0.05)' }}>
           <div className="row" style={{ marginTop: '1em' }}>
-            <h3 style={{ padding: 0, margin: 0 }}>Current Delegators</h3>
+            <h3 style={{ padding: 0, margin: 0 }}>{delegators.length} Current Delegators</h3>
           </div>
           <div className="content-wrapper">
             <ScrollContainer className="overflow-container" hideScrollbars={false}>
diff --git a/src/style.css b/src/style.css
index 6010fb1..3665eb6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -360,12 +360,17 @@ svg {
   display: flex;
   justify-content: space-evenly;
   z-index: 10; 
+  margin-bottom: 0.7em;
 }
 .nonHomeButton:hover {
+  box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692);
   backdrop-filter: blur(6px);
 }
+.nonHomeButton:active {
+  box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692);
+}
 .active {
-  box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692);
+  box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692);
 }
 .searchField {
   margin: auto;