diff --git a/src/actions/livepeer.js b/src/actions/livepeer.js
index d689bf3..e448fc2 100644
--- a/src/actions/livepeer.js
+++ b/src/actions/livepeer.js
@@ -119,14 +119,14 @@ export const getEvents = () => async dispatch => {
             eventFrom = "";
             eventTo = "";
             if (eventContainsBond) {
-              const subtext = "activated their orchestrator";
+              const subtext = "activated";
               const descriptions = [
                 tmpAmount.toFixed(2) + " LPT stake",
                 "round " + tmpWhen
               ]
               eventDescription = <Ticket icon={"🚀"} subtext={subtext} descriptions={descriptions} />
             } else {
-              const subtext = "reactivated their orchestrator";
+              const subtext = "reactivated";
               const descriptions = [
                 "round " + tmpWhen
               ]
@@ -154,7 +154,7 @@ export const getEvents = () => async dispatch => {
           else if (eventContainsRebond) {
             eventType = "Stake";
             eventColour = stakeColour;
-            const subtext = "changed stake amount";
+            const subtext = "changed stake";
             const descriptions = [
               tmpAmount.toFixed(2) + " LPT"
             ]
@@ -173,7 +173,7 @@ export const getEvents = () => async dispatch => {
                 <Ticket icon={"⌛"} subtext={subtext} descriptions={descriptions} />
             } else if (eventFrom === eventTo) {
               eventFrom = "";
-              const subtext = "changed stake amount";
+              const subtext = "changed stake";
               const descriptions = [
                 tmpAmount.toFixed(2) + " LPT"
               ]
@@ -261,7 +261,7 @@ export const getEvents = () => async dispatch => {
           if (amount < thresholdFees) {
             continue;
           }
-          const subtext = "withdrew fee rewards";
+          const subtext = "withdrew fees";
           const descriptions = [
             amount.toFixed(4) + " Eth"
           ]
@@ -286,7 +286,7 @@ export const getEvents = () => async dispatch => {
           eventContainsTranscoderUpdate = true;
           const amount1 = parseFloat(eventObj.data.rewardCut) / 10000;
           const amount2 = 100 - (eventObj.data.feeShare / 10000);
-          const subtext = "changed commission rates";
+          const subtext = "changed commission";
           const descriptions = [
             amount1.toFixed(2) + "% on staking rewards",
             amount2.toFixed(2) + "% on transcoding fees"
@@ -315,9 +315,9 @@ export const getEvents = () => async dispatch => {
           if (amount1 < thresholdStaking && amount2 < thresholdFees) {
             continue;
           }
-          const subtext = "delegator claimed rewards";
+          const subtext = "delegator claimed";
           const descriptions = [
-            "of " + (eventObj.data.endRound - eventObj.data.startRound + 1) + " rounds",
+            (eventObj.data.endRound - eventObj.data.startRound + 1) + " rounds",
             "+" + amount1.toFixed(2) + " LPT rewards",
             "+" + amount2.toFixed(4) + " Eth fees"
           ]
diff --git a/src/components/BlockViewer.js b/src/components/BlockViewer.js
index 10235e6..b8cc510 100644
--- a/src/components/BlockViewer.js
+++ b/src/components/BlockViewer.js
@@ -6,15 +6,15 @@ const Block = (obj) => {
   dateObj.setUTCSeconds(thisEpoch);
   const [thisDate, thisTime] = dateObj.toISOString().split('T');
   return (
-    <div className="rowAlignLeft" style={{ width: '100%', marginTop: '1em' }}>
+    <div className="rowAlignLeft" style={{ marginTop: '1em' }}>
       <a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={obj.url}>
         <img alt="" src="arb.svg" width="20em" height="20em" />
       </a>
       <a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://arbiscan.io/block/" + obj.block}>
-        <h3 style={{ margin: 0, padding: '0.2em', cursor: 'alias' }}>🔗</h3>
+        <h3 style={{ padding: '0.2em', cursor: 'alias' }}>🔗</h3>
       </a>
-      <span className="rowAlignRight elipsText">
-        <p className="darkText mobileSmallerFont">UTC&nbsp;📅{thisDate} - {thisTime.split('.')[0]} </p>
+      <span className="rowAlignRight darkText mobileSmallerFont">
+        UTC&nbsp;📅{thisDate} - {thisTime.split('.')[0]}
       </span>
     </div>
   )
diff --git a/src/components/ContractPrices.js b/src/components/ContractPrices.js
index 8623292..0f153cf 100644
--- a/src/components/ContractPrices.js
+++ b/src/components/ContractPrices.js
@@ -94,11 +94,11 @@ const ContractPrices = (obj) => {
   }
 
   return (
-    <div className="stroke metaSidebar" style={{ padding: 0, maxWidth: "300px" }}>
-      <div className="row" style={{ margin: 0, padding: 0 }}>
-        <h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3>
+    <div className="stroke" style={{ maxWidth: "300px" }}>
+      <div className="row">
+        <h3>Smart contract prices</h3>
       </div>
-      <div className="stroke" style={{ margin: 0, padding: 0 }}>
+      <div className="stroke">
         <div className='rowAlignRight'>
           <Stat header={"Reward Call"} content1={"$" + redeemRewardCostL2USD + " ($" + redeemRewardCostL1USD + " on L1)"} />
           <Stat header={"Claim Ticket"} content1={"$" + claimTicketCostL2USD + " ($" + claimTicketCostL1USD + " on L1)"} />
diff --git a/src/components/OrchAddressViewer.js b/src/components/OrchAddressViewer.js
index 5bc6776..b9365c3 100644
--- a/src/components/OrchAddressViewer.js
+++ b/src/components/OrchAddressViewer.js
@@ -2,11 +2,11 @@ import React from "react";
 
 const Address = (obj) => {
   return (
-    <div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
+    <div className="rowAlignLeft">
       <a className="selectOrchLight" target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/" + obj.address} >
-        <div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
+        <div className="rowAlignLeft">
           <img alt="" src="livepeer.png" width="20" height="20" />
-          <span className="elipsText elipsOnMobile" style={{ marginRight: "0.5em" }}>{obj.address}</span>
+          <span className="elipsText elipsOnMobile">{obj.address}</span>
         </div>
       </a>
     </div>
diff --git a/src/components/OrchDelegatorViewer.js b/src/components/OrchDelegatorViewer.js
index d91c5e7..f1cc0b2 100644
--- a/src/components/OrchDelegatorViewer.js
+++ b/src/components/OrchDelegatorViewer.js
@@ -39,6 +39,7 @@ const OrchDelegatorViewer = (obj) => {
         <div className="row">
           <h3>The selected Orchestrator has no Delegators</h3>
         </div>
+        <div className="verticalDivider"/>
       </div>
     </div >
   )
diff --git a/src/components/OrchInfoViewer.js b/src/components/OrchInfoViewer.js
index 1b0bc87..9aab279 100644
--- a/src/components/OrchInfoViewer.js
+++ b/src/components/OrchInfoViewer.js
@@ -69,22 +69,22 @@ const OrchInfoViewer = (obj) => {
     }
 
     return (
-      <div className="row sideMargin">
-        <div className="stroke stretchAndBetween sideMargin">
+      <div className="row">
+        <div className="stroke sideMargin">
           <div className="verticalDivider" />
-          <div className="row" style={{ borderBottom: '2px solid rgba(15,15,15,0.05)' }}>
+          <div className="row">
             <a href={thisUrl}>
               <h3 >Orchestrator Info</h3>
               <Address address={thisID} />
             </a>
           </div>
-          <div className="stretchAndBetween sideMargin" >
+          <div className="stretchAndBetween" style={{ borderTop: '2px solid rgba(15,15,15,0.05)', marginTop: '0.2em' }} >
             <Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} />
           </div>
-          <div className="stretchAndBetween sideMargin" >
+          <div className="stretchAndBetween" >
             <Stat header={"Commission"} title1={"Reward"} content1={rewardCut + "%"} title2={"Fee"} content2={feeCut + "%"} />
           </div>
-          <div className="stretchAndBetween sideMargin" >
+          <div className="stretchAndBetween" >
             <Stat header={"Stake"} title1={"Total"} content1={totalStake + " LPT"} title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} />
           </div>
           <div className="stretchAndBetween strokeSmollLeft">
diff --git a/src/components/eventButton.js b/src/components/eventButton.js
index 81d6b11..07b50ff 100644
--- a/src/components/eventButton.js
+++ b/src/components/eventButton.js
@@ -1,20 +1,13 @@
 import React from "react";
-import {
-  getOrchestratorInfo
-} from "../actions/livepeer";
-import { useDispatch } from 'react-redux';
 import Block from "./BlockViewer";
+import EventButtonAddress from "./eventButtonAddress";
 
 /// Displays a single event. Sets selected Orchestrator info in the redux store
 
 const EventButton = (obj) => {
-  const dispatch = useDispatch();
-
-
   let eventTo;
   let eventFrom;
   let eventCaller;
-  let eventRightAddr;
   if (obj.eventObj.eventFrom === "0x0000000000000000000000000000000000000000") {
     obj.eventObj.eventFrom = "";
   }
@@ -24,52 +17,16 @@ const EventButton = (obj) => {
   if (obj.eventObj.eventTo || obj.eventObj.eventFrom || obj.eventObj.eventCaller) {
     if (obj.eventObj.eventTo) {
       eventTo =
-        <div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}>
-          <a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventTo}>
-            <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
-          </a>
-          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventTo) }} >
-            <span className="elipsText">🔎</span>
-          </button>
-          <span>To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;</span>
-          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} >
-            <span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventTo}</span>
-          </button>
-        </div>
+        <EventButtonAddress name="To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;" address={obj.eventObj.eventTo} />
     }
     if (obj.eventObj.eventFrom) {
       eventFrom =
-        <div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}>
-          <a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventFrom}>
-            <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
-          </a>
-          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventFrom) }} >
-            <span className="elipsText">🔎</span>
-          </button>
-          <span>From&nbsp;&nbsp;:&nbsp;</span>
-          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventFrom)) }}>
-            <span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventFrom}</span>
-          </button>
-        </div >
+        <EventButtonAddress name="From&nbsp;&nbsp;:&nbsp;" address={obj.eventObj.eventFrom} />
     }
     if (obj.eventObj.eventCaller) {
       eventCaller =
-        <div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}>
-          <a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
-            <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
-          </a>
-          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventCaller) }} >
-            <span className="elipsText">🔎</span>
-          </button>
-          <span>Caller&nbsp;:&nbsp;</span>
-          <button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventCaller)) }} >
-            <span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventCaller}</span>
-          </button>
-        </div>
+        <EventButtonAddress name="Caller&nbsp;:&nbsp;" address={obj.eventObj.eventCaller} />
     }
-    eventRightAddr = <div className="strokeSmollLeft" style={{ width: 'unset', padding: 0, margin: 0 }}>
-
-    </div>
   }
 
   let blockNumber;
@@ -78,24 +35,29 @@ const EventButton = (obj) => {
   }
 
   return (
-    <div className="stroke" style={{ width: '100%', padding: '0', margin: 0, marginBottom: '1.0em' }}>
+    <div className="strokeSmollLeft">
       {blockNumber}
-      <div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: obj.eventObj.eventColour, boxShadow: "5px 8px 5px 4px  " + obj.eventObj.eventColour, padding: '0', margin: 0, width: '100%' }}>
-        <div className="rowAlignLeft" style={{ marginTop: '0.5em' }}>
+      <div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: obj.eventObj.eventColour, opacity: 0.9, border: '0.1em solid rgba(54, 46, 46, 0.1)', boxShadow: "4px 2px 3px 2px rgba(54, 46, 46, 0.1)" }}>
+        <div className="halfVerticalDivider" />
+        <div className="rowAlignLeft">
           {eventCaller}
         </div>
-        <div className="row" style={{marginBottom: '0.5em', marginTop: '0.5em'}}>
-          <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch' ,maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', border: '0.1em solid rgba(54, 46, 46, 0.1)', boxShadow: "4px 2px 3px 2px rgba(54, 46, 46, 0.1)" }}>
+        <div className="halfVerticalDivider" />
+        <div className="row">
+          <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: obj.eventObj.eventColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
             {obj.eventObj.eventDescription}
           </div>
         </div>
+        <div className="halfVerticalDivider" />
         <div className="rowAlignLeft">
           {eventFrom}
         </div>
         <div className="rowAlignLeft">
           {eventTo}
         </div>
+        <div className="halfVerticalDivider" />
       </div>
+      <div className="halfVerticalDivider" />
     </div>
   )
 }
diff --git a/src/components/eventButtonAddress.js b/src/components/eventButtonAddress.js
new file mode 100644
index 0000000..7a6edba
--- /dev/null
+++ b/src/components/eventButtonAddress.js
@@ -0,0 +1,26 @@
+import React from "react";
+import {
+  getOrchestratorInfo
+} from "../actions/livepeer";
+import { useDispatch } from 'react-redux';
+
+const EventButtonAddress = (obj) => {
+  const dispatch = useDispatch();
+
+  return (
+    <div className="rowAlignLeft" style={{ width: '100%' }}>
+      <a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.address}>
+        <img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
+      </a>
+      <button className="selectOrch" style={{ padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.address) }} >
+        <span className="elipsText">🔎</span>
+      </button>
+      <span>{obj.name}</span>
+      <button className="selectOrch" style={{ padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.address)) }} >
+        <span className="elipsText elipsOnMobileExtra">{obj.address}</span>
+      </button>
+    </div>
+  )
+}
+
+export default EventButtonAddress;
\ No newline at end of file
diff --git a/src/components/eventViewer.js b/src/components/eventViewer.js
index ecc7c12..1264cd7 100644
--- a/src/components/eventViewer.js
+++ b/src/components/eventViewer.js
@@ -196,20 +196,21 @@ const EventViewer = (obj) => {
   let showMoreButton;
   if (hidden == 0) {
     showMoreButton =
-      <div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}>
-        <div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: greyColour, padding: 0, margin: 0, width: '100%' }}>
-          <p className="row withWrap" style={{ maxWidth: '600px' }}>
+      <div className="row">
+        <div className="strokeSmollLeft" style={{ width: '100%' }}>
+          <p className="row buttonPadding" style={{ borderRadius: "1.2em", backgroundColor: greyColour, maxWidth: '600px' }}>
             ☑️ Reached end of results
           </p>
         </div>
       </div>
   } else {
     showMoreButton =
-      <div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}>
-        <div className="strokeSmollLeft" style={{ borderRadius: "1.2em", padding: 0, margin: 0, width: '100%' }}>
-          <button className="row nonHomeButton buttonPadding" style={{ backgroundColor: greyColour }} onClick={() => {
-            obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
-          }}>
+      <div className="row">
+        <div className="strokeSmollLeft" style={{ width: '100%' }}>
+          <button className="row nonHomeButton buttonPadding" style={{ borderRadius: "1.2em", backgroundColor: greyColour, maxWidth: '600px' }}
+            onClick={() => {
+              obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
+            }}>
             <h3>🔄 Show More</h3>
           </button>
         </div>
@@ -219,7 +220,7 @@ const EventViewer = (obj) => {
   let filterBit;
   if (obj.showFilter) {
     filterBit =
-      <div className="strokeSmollLeft roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}>
+      <div className="strokeSmollLeft roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, width: '100%' }}>
         <div className="row">
           <span>Showing {hidden + unfiltered} out of {limitShown} results</span>
         </div>
@@ -229,23 +230,25 @@ const EventViewer = (obj) => {
   }
 
   return (
-    <div className="strokeSmollLeft" style={{ padding: 0, margin: 0, height: 'calc( 100vh - 50px)' }}>
+    <div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}>
       {filterBit}
-      <div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}>
-        <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', minWidth: "400px", height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}>
+      <div className="row" style={{ width: '100%', height: '100%' }}>
+        <div className="stroke roundedOpaque onlyVerticalScroll" style={{ width: '40vw', minWidth: '400px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
           <div className="content-wrapper" style={{ width: '100%' }}>
             <ScrollContainer activationDistance={1} className="overflow-container"
               hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>
               <div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
-                <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} style={{ margin: 0, textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} >
                   {eventList}
+                  <div className="verticalDivider" />
                   {showMoreButton}
+                  <div className="verticalDivider" />
                 </div>
               </div>
             </ScrollContainer>
             <div className="strokeSmollLeft sideMargin">
-              <div className="verticalDivider"/>
-              <button className={delegatorRewardActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: delegatorActivatedColour}} onClick={() => {
+              <div className="verticalDivider" />
+              <button className={delegatorRewardActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: delegatorActivatedColour }} onClick={() => {
                 setDelegatorRewardActivated(!delegatorRewardActivated);
               }}>
                 <h3>Claim</h3>
diff --git a/src/pages/grafana.js b/src/pages/grafana.js
index ef5ba0a..977cfd4 100644
--- a/src/pages/grafana.js
+++ b/src/pages/grafana.js
@@ -42,7 +42,7 @@ const Grafana = (obj) => {
       </div>
       <div className="verticalDivider"/>
       <div className="stroke" >
-        <div className="flexContainer">
+        <div className="flexContainer makeItWide">
           <div className="stroke">
             <div className="stroke roundedOpaque">
             <div className="verticalDivider"/>
diff --git a/src/style.css b/src/style.css
index 0f19e3f..ab04aaa 100644
--- a/src/style.css
+++ b/src/style.css
@@ -239,6 +239,12 @@ svg {
   align-items: stretch;
 }
 
+.halfVerticalDivider {
+  height: 10px;
+  display: flex;
+  align-items: stretch;
+}
+
 .smallVerticalDivider {
   height: 5px;
   display: flex;
@@ -254,7 +260,10 @@ svg {
   align-items: center;
   justify-content: center;
   flex-direction: row;
-  width: auto;
+}
+
+.makeItWide {
+  width: 50vw;
 }
 
 .forceVertical {
@@ -500,6 +509,11 @@ svg {
   padding-right: 1em;
 }
 
+.onlyVerticalScroll {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 
 .noCursor {
   cursor: default;
@@ -514,8 +528,8 @@ svg {
 }
 
 .roundedOpaqueDark {
-  background-color: rgba(17, 18, 23, 0.95);
-  box-shadow: 9px 13px 18px 8px  rgba(20, 20, 19, 0.692);
+  background-color: rgba(5, 5, 10, 0.95);
+  box-shadow: 9px 13px 18px 8px  rgba(5, 5, 10, 0.6);
   box-sizing: border-box;
   backdrop-filter: blur(6px);
   border-radius: 1em;