diff --git a/src/components/BlockViewer.js b/src/components/BlockViewer.js
index b8cc510..9c0d6e1 100644
--- a/src/components/BlockViewer.js
+++ b/src/components/BlockViewer.js
@@ -6,14 +6,14 @@ const Block = (obj) => {
   dateObj.setUTCSeconds(thisEpoch);
   const [thisDate, thisTime] = dateObj.toISOString().split('T');
   return (
-    <div className="rowAlignLeft" style={{ marginTop: '1em' }}>
-      <a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={obj.url}>
+    <div className="rowAlignLeft" style={{ margin: 0, marginTop: '1em', width: '100%'}}>
+      <a className="selectOrch" style={{ cursor: 'alias', margin: 0 }} 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}>
+      <a className="selectOrch" style={{ cursor: 'alias', margin: 0 }} target="_blank" rel="noopener noreferrer" href={"https://arbiscan.io/block/" + obj.block}>
         <h3 style={{ padding: '0.2em', cursor: 'alias' }}>🔗</h3>
       </a>
-      <span className="rowAlignRight darkText mobileSmallerFont">
+      <span className="rowAlignRight darkText mobileSmallerFont" style={{margin: 0}}>
         UTC&nbsp;📅{thisDate} - {thisTime.split('.')[0]}
       </span>
     </div>
diff --git a/src/components/MonthlyGraphs.js b/src/components/MonthlyGraphs.js
index f0b6b88..4f322fe 100644
--- a/src/components/MonthlyGraphs.js
+++ b/src/components/MonthlyGraphs.js
@@ -98,11 +98,11 @@ const MonthlyGraphs = (obj) => {
       <VictoryPie padding={0} data={pieList} x="address" y="sum"
         sortOrder="descending"
         sortKey="sum"
-        radius={300}
-        width={620}
-        height={620}
-        innerRadius={50}
-        labelRadius={130}
+        radius={400}
+        width={800}
+        height={800}
+        innerRadius={140}
+        labelRadius={170}
         cornerRadius={3}
         colorScale={[
           "#282678",
@@ -136,7 +136,7 @@ const MonthlyGraphs = (obj) => {
             fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
           },
           labels: {
-            fontSize: 16, zIndex: 999
+            fontSize: 24, zIndex: 999
           }
         }}
         labelPosition="centroid"
@@ -180,11 +180,11 @@ const MonthlyGraphs = (obj) => {
       <VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
         sortOrder="descending"
         sortKey="sum"
-        radius={300}
-        width={620}
-        height={620}
-        innerRadius={50}
-        labelRadius={130}
+        radius={400}
+        width={800}
+        height={800}
+        innerRadius={140}
+        labelRadius={170}
         cornerRadius={3}
         colorScale={[
           "#282678",
@@ -218,7 +218,7 @@ const MonthlyGraphs = (obj) => {
             fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
           },
           labels: {
-            fontSize: 16, zIndex: 999
+            fontSize: 24, zIndex: 999
           }
         }}
         labelPosition="centroid"
@@ -265,11 +265,11 @@ const MonthlyGraphs = (obj) => {
       <VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
         sortOrder="descending"
         sortKey="sum"
-        radius={300}
-        width={620}
-        height={620}
-        innerRadius={50}
-        labelRadius={130}
+        radius={400}
+        width={800}
+        height={800}
+        innerRadius={140}
+        labelRadius={170}
         cornerRadius={3}
         colorScale={[
           "#282678",
@@ -303,7 +303,7 @@ const MonthlyGraphs = (obj) => {
             fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
           },
           labels: {
-            fontSize: 16, zIndex: 999
+            fontSize: 24, zIndex: 999
           }
         }}
         labelPosition="centroid"
diff --git a/src/components/OrchDelegatorViewer.js b/src/components/OrchDelegatorViewer.js
index 15128f0..abfd566 100644
--- a/src/components/OrchDelegatorViewer.js
+++ b/src/components/OrchDelegatorViewer.js
@@ -52,7 +52,7 @@ const OrchDelegatorViewer = (obj) => {
                         <div className="flexContainer forceWrap" key={"delegator" + idx}>
                           <div className="rowAlignLeft">
                             <div className="strokeSmollLeft" style={{ marginLeft: '0.2em', whiteSpace: 'nowrap' }} >
-                              <h3>{idx}</h3>
+                              <h3>{idx + 1}</h3>
                             </div>
                             <div className="rowAlignLeft">
                               <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
diff --git a/src/components/eventButton.js b/src/components/eventButton.js
index d52286c..21cf5e8 100644
--- a/src/components/eventButton.js
+++ b/src/components/eventButton.js
@@ -122,15 +122,15 @@ const EventButton = (obj) => {
   if (eventTo || eventFrom || eventCaller) {
     if (eventTo) {
       eventTo =
-        <EventButtonAddress name="To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;" address={eventTo} setSearchTerm={obj.setSearchTerm} />
+        <EventButtonAddress name="To" address={eventTo} setSearchTerm={obj.setSearchTerm} />
     }
     if (eventFrom) {
       eventFrom =
-        <EventButtonAddress name="From&nbsp;&nbsp;:&nbsp;" address={eventFrom} setSearchTerm={obj.setSearchTerm} />
+        <EventButtonAddress name="From" address={eventFrom} setSearchTerm={obj.setSearchTerm} />
     }
     if (eventCaller) {
       eventCaller =
-        <EventButtonAddress name="Caller&nbsp;:&nbsp;" address={eventCaller} setSearchTerm={obj.setSearchTerm} />
+        <EventButtonAddress name="" address={eventCaller} setSearchTerm={obj.setSearchTerm} />
     }
   }
 
@@ -140,27 +140,31 @@ const EventButton = (obj) => {
   }
 
   return (
-    <div className="strokeSmollLeft" style={{ width: '100%', minWidth: '200px', maxWidth: '500px' }}>
-      {blockNumber}
-      <div className="strokeSmollLeft" style={{ width: "100%", borderRadius: "1.2em", backgroundColor: 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="halfVerticalDivider" />
-        <div className="row">
-          <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: eventColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
-            {eventDescription}
+    <div className="strokeSmollLeft" style={{ width: '100%', margin: 0, padding: 0 }}>
+      <div className="row" style={{ paddingLeft: '1em', paddingRight: '1em' }}>
+        {blockNumber}
+      </div>
+      <div className="row" style={{ margin: 0, padding: 0 }}>
+        <div className="stroke infoContainer" style={{ width: "100%", padding: 0, margin: 0, minWidth: '200px', maxWidth: '400px' }}>
+          <div className="rowAlignLeft infoBar" style={{ margin: 0 }}>
+            {eventCaller}
+          </div>
+          <div className="halfVerticalDivider" />
+          <div className="row">
+            <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: eventColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
+              {eventDescription}
+            </div>
+          </div>
+          <div className="halfVerticalDivider" />
+          <div className="stroke infoBar">
+            <div className="rowAlignLeft" style={{ margin: 0 }}>
+              {eventFrom}
+            </div>
+            <div className="rowAlignLeft" style={{ margin: 0 }}>
+              {eventTo}
+            </div>
           </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
index 7dce464..2989c3a 100644
--- a/src/components/eventButtonAddress.js
+++ b/src/components/eventButtonAddress.js
@@ -3,6 +3,7 @@ import {
   getOrchestratorInfo, getEnsInfo, getThreeBoxInfo, setCachedOrch, getOrchestratorInfoSilent
 } from "../actions/livepeer";
 import { useDispatch, useSelector } from 'react-redux';
+import { Text } from '@mantine/core';
 
 const EventButtonAddress = (obj) => {
   const dispatch = useDispatch();
@@ -122,44 +123,48 @@ const EventButtonAddress = (obj) => {
   let thisName;
   let thisIcon;
   if (orchInfo && orchInfo.domain) {
-    thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.domain}</h4>;
+    thisName = <Text style={{ textOverflow: "ellipsis", overflow: "hidden", width: '100%' }} >{orchInfo.domain}</Text>;
     if (orchInfo.avatar) {
       thisIcon =
-        <a className="selectOrch" style={{ marginRight: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + orchInfo.domain + "/details"} >
-          <img alt="" src={orchInfo.avatar.url} width="20em" height="20em" style={{ margin: '0.2em', padding: '0.2em' }} />
+        <a className="selectOrch" style={{ padding: '0.3em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + orchInfo.domain + "/details"} >
+          <img alt="" src={orchInfo.avatar.url} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
         </a >
     }
   } else if (orchInfo && (orchInfo.name || orchInfo.image)) {
     if (orchInfo.name) {
-      thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.name}</h4>;
+      thisName = <Text style={{ textOverflow: "ellipsis", overflow: "hidden", width: '100%' }} >{orchInfo.name}</Text>;
     } else {
-      thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>;
+      thisName = <Text style={{ textOverflow: "ellipsis", overflow: "hidden", width: '100%', maxWidth: '10vw' }} >{obj.address}</Text>;
     }
     if (orchInfo.image) {
       thisIcon =
-        <a className="selectOrch" style={{ marginRight: '0.5em', cursor: 'grab'}} disabled>
-          <img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + orchInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} style={{ margin: 0, padding: 0 }} />
+        <a className="selectOrch" style={{ padding: '0.3em', cursor: 'grab' }} disabled>
+          <img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + orchInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
         </a >
     } else {
       thisIcon = null;
     }
   } else {
-    thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>;
+    thisName = <Text style={{ textOverflow: "ellipsis", overflow: "hidden", width: '100%', maxWidth: '10vw' }} >{obj.address}</Text>;
     thisIcon = null;
   }
 
 
   return (
-    <div className="rowAlignLeft" style={{ width: '100%' }}>
-      <a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.address}>
+    <div className="rowAlignLeft" style={{
+      width: '100%', display: 'flex', padding: 0, margin: 0,
+      justifyContent: 'spaceAround',
+      flexFlow: 'row wrap',
+      alignItems: 'stretch'
+    }}>
+      <a className="selectOrch" style={{ padding: '0.3em', 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 className="selectOrch" style={{ padding: '0.3em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.address) }} >
+        <span style={{ margin: 0 }}>🔎</span>
       </button>
-      <span>{obj.name}</span>
       {thisIcon}
-      <button className="selectOrch" style={{ padding: '0.5em', cursor: 'help' }} onClick={() => {
+      <button className="selectOrch" style={{ padding: '0.3em', cursor: 'help', flex: 1, flexGrow: 3 }} onClick={() => {
         // Check if cached as an orchestrator
         if (livepeer.orchInfo) {
           for (const thisOrch of livepeer.orchInfo) {
@@ -175,8 +180,11 @@ const EventButtonAddress = (obj) => {
         }
         dispatch(getOrchestratorInfo(obj.address));
       }} >
-        <span className="elipsText elipsOnMobileExtra">{thisName}</span>
+        <div className="row">
+          <span>{obj.name}</span> {thisName}
+        </div>
       </button>
+
     </div>
   )
 }
diff --git a/src/components/eventViewer.js b/src/components/eventViewer.js
index 1101502..40c05d6 100644
--- a/src/components/eventViewer.js
+++ b/src/components/eventViewer.js
@@ -453,15 +453,14 @@ const EventViewer = (obj) => {
           searchTerm={obj.searchTerm} setSearchTerm={obj.setSearchTerm} />
       </div>
   }
-
   return (
     <div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}>
       {filterBit}
       <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} style={{ width: '100%' }}>
-              <div className="overflow-content" style={{ cursor: 'grab', padding: 0 }}>
+            <ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false} style={{ width: '100%', overflowX: 'hidden' }}>
+              <div className="overflow-content" style={{ cursor: 'grab', padding: 0, width: '100%' }}>
                 <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} >
                   <div className="verticalDivider" />
                   {
@@ -471,9 +470,9 @@ const EventViewer = (obj) => {
                         return (
                           <div className="flexContainer forceWrap" style={{ marginLeft: '0.2em', marginRight: '0.2em', width: '100%' }} key={"ticket-" + idx}>
                             <div className="rowAlignLeft">
-                              <div className="strokeSmollLeft showNeverOnMobile" style={{ marginLeft: '0.2em', marginRight: '0.2em', whiteSpace: 'nowrap' }} >
-                                <h3>{idx}</h3>
-                              </div>
+                              {/* <div className="showNeverOnMobile" >
+                                <h3 style={{ width: '2em', marginLeft: '0.2em', marginRight: '0.2em', whiteSpace: 'nowrap' }}>{idx + 1}</h3>
+                              </div> */}
                               <div className="row">
                                 {delObj}
                               </div>
@@ -533,7 +532,7 @@ const EventViewer = (obj) => {
             </div>
           </div>
           <div className="row" style={{ marginTop: '1em', marginBottom: '1em', justifyContent: 'space-evenly', display: "flex" }}>
-            <Pagination page={activePage} onChange={setPage} total={(limitShown + (itemsPerPage - (limitShown % itemsPerPage))) / itemsPerPage} siblings={3} initialPage={1} />
+            <Pagination page={activePage} onChange={setPage} total={(limitShown + (itemsPerPage - (limitShown % itemsPerPage))) / itemsPerPage} siblings={2} initialPage={1} />
           </div>
         </div>
       </div>
diff --git a/src/pages/MonthlyStats.js b/src/pages/MonthlyStats.js
index 17e4a61..b3b8117 100644
--- a/src/pages/MonthlyStats.js
+++ b/src/pages/MonthlyStats.js
@@ -13,7 +13,7 @@ const MonthlyStats = (obj) => {
   } else if (activePage == 2) {
     thisColour = "indigo";
   } else if (activePage == 3) {
-    thisColour = "red";
+    thisColour = "gray";
   }
 
   return (
@@ -98,7 +98,7 @@ const MonthlyStats = (obj) => {
           data={[
             { label: 'Info', value: '1' },
             { label: 'Graph', value: '2' },
-            { label: 'Score', value: '3' }
+            { label: 'Fees', value: '3' }
           ]}
         />
       </div>
diff --git a/src/pages/stats.js b/src/pages/stats.js
index 2be569e..728a6e1 100644
--- a/src/pages/stats.js
+++ b/src/pages/stats.js
@@ -28,120 +28,116 @@ const Stats = (obj) => {
         </div>
       </div>
       <div id='bodyContent'>
-        <div className="mainContent">
-          <div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}>
-            <div className="row" style={{ width: '100%', height: '100%' }}>
-              <div className="stroke roundedOpaque onlyVerticalScroll" style={{ width: '40vw', minWidth: '300px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
-                <div className="content-wrapper" style={{ width: '100%' }}>
-                  <div className="overflow-container">
-                    <div className="overflow-content" style={{ padding: 0 }}>
-                      <div className="flexContainer forceWrap" >
-                        <Accordion initialItem={0} className="stroke"
-                          style={{
-                            width: '100%', alignItems: 'stretch'
-                          }}
-                          styles={{
-                            item: {
-                              padding: 0, width: '100%', alignItems: 'stretch',
-                              color: 'black',
-                              border: '1px solid rgba(56, 56, 56, 0.9)',
-                              '&:hover': {
-                                color: 'black',
-                                border: '1px solid rgba(56, 56, 56, 0.9)',
-                              },
-                              '&': {
-                                color: 'black',
-                                border: '1px solid rgba(56, 56, 56, 0.9)',
-                              }
-                            },
-                            itemOpened: { padding: 0, width: '100%', alignItems: 'stretch' },
-                            itemTitle: {
-                              color: 'rgba(218, 218, 218, 0.9)',
-                              padding: 0, width: '100%',
-                            },
-                            control: {
-                              color: 'rgba(218, 218, 218, 0.9)',
-                              padding: 0, margin: 0, height: '100%',
-                              backgroundColor: 'rgba(56, 56, 56, 0.8)',
-                              boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)',
-                              color: 'black',
-                              border: 'none',
-                              '&:hover': {
-                                color: 'black',
-                                backgroundColor: 'rgba(56, 56, 56, 0.9)',
-                              },
-                              '&': {
-                                color: 'black',
-                                backgroundColor: 'rgba(56, 56, 56, 0.8)',
-                                border: 'none',
-                              }
-                            },
-                            label: {
-                              color: 'rgba(218, 218, 218, 0.9)',
-                              padding: '1em', width: '100%',
-                              backgroundColor: 'rgba(56, 56, 56, 0.8)',
-                              boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
-                            },
-                            icon: {
-                              padding: '0.2em', margin: '0.2em',
-                            },
-                            content: {
-                              padding: 0, alignItems: 'stretch', width: '100%', height: '100%',
-                              backgroundColor: 'rgba(56, 56, 56, 0.3)',
-                              boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
-                            },
-                            contentInner: { padding: 0, width: '100%', height: '100%' },
-                          }}>
-                          {
-                            livepeer.monthlyStats.slice(0).reverse().map(function (data, i) {
-                              let thisMonth = "";
-                              let monthAsNum = data.month;
-                              if (monthAsNum == 0) {
-                                thisMonth = "Januari";;
-                              } else if (monthAsNum == 1) {
-                                thisMonth = "Februari";;
-                              } else if (monthAsNum == 2) {
-                                thisMonth = "March";;
-                              } else if (monthAsNum == 3) {
-                                thisMonth = "April";
-                              } else if (monthAsNum == 4) {
-                                thisMonth = "May";
-                              } else if (monthAsNum == 5) {
-                                thisMonth = "June";
-                              } else if (monthAsNum == 6) {
-                                thisMonth = "July";
-                              } else if (monthAsNum == 7) {
-                                thisMonth = "August";
-                              } else if (monthAsNum == 8) {
-                                thisMonth = "September";
-                              } else if (monthAsNum == 9) {
-                                thisMonth = "October";
-                              } else if (monthAsNum == 10) {
-                                thisMonth = "November";
-                              } else if (monthAsNum == 11) {
-                                thisMonth = "December";;
-                              }
-
-                              const title = data.year + "-" + thisMonth + ": " + data.winningTicketsReceived.length + " orchestrators earned " + data.winningTicketsReceivedSum.toFixed(2) + " Eth";
-
-                              return (
-                                <Accordion.Item
-                                  label={title}
-                                  icon={"🔄"}
-                                  className="stroke"
-                                  style={{ width: '100%', alignItems: 'stretch' }}
-                                  key={"accord" + i + data.year + "-" + data.month + "-" + data.total}>
-                                  <MonthlyStats
-                                    data={data}
-                                    seed={"win" + i + data.year + "-" + data.month + "-" + data.total}
-                                  />
-                                </Accordion.Item>
-                              )
-                            })
+        <div className="row">
+          <div className="stroke roundedOpaque onlyVerticalScroll" style={{ minWidth: '350px', width: '50vw', maxWidth: '1200px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
+            <div className="content-wrapper" style={{ width: '100%' }}>
+              <div className="overflow-container">
+                <div className="overflow-content" style={{ padding: 0 }}>
+                  <div className="flexContainer forceWrap" >
+                    <Accordion initialItem={0} className="stroke"
+                      style={{
+                        width: '100%', alignItems: 'stretch'
+                      }}
+                      styles={{
+                        item: {
+                          padding: 0, width: '100%', alignItems: 'stretch',
+                          color: 'black',
+                          border: '1px solid rgba(56, 56, 56, 0.9)',
+                          '&:hover': {
+                            color: 'black',
+                            border: '1px solid rgba(56, 56, 56, 0.9)',
+                          },
+                          '&': {
+                            color: 'black',
+                            border: '1px solid rgba(56, 56, 56, 0.9)',
                           }
-                        </Accordion>
-                      </div>
-                    </div>
+                        },
+                        itemOpened: { padding: 0, width: '100%', alignItems: 'stretch' },
+                        itemTitle: {
+                          color: 'rgba(218, 218, 218, 0.9)',
+                          padding: 0, width: '100%',
+                        },
+                        control: {
+                          color: 'rgba(218, 218, 218, 0.9)',
+                          padding: 0, margin: 0, height: '100%',
+                          backgroundColor: 'rgba(56, 56, 56, 0.8)',
+                          boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)',
+                          color: 'black',
+                          border: 'none',
+                          '&:hover': {
+                            color: 'black',
+                            backgroundColor: 'rgba(56, 56, 56, 0.9)',
+                          },
+                          '&': {
+                            color: 'black',
+                            backgroundColor: 'rgba(56, 56, 56, 0.8)',
+                            border: 'none',
+                          }
+                        },
+                        label: {
+                          color: 'rgba(218, 218, 218, 0.9)',
+                          padding: '1em', width: '100%',
+                          backgroundColor: 'rgba(56, 56, 56, 0.8)',
+                          boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
+                        },
+                        icon: {
+                          padding: '0.2em', margin: '0.2em',
+                        },
+                        content: {
+                          padding: 0, alignItems: 'stretch', width: '100%', height: '100%',
+                          backgroundColor: 'rgba(56, 56, 56, 0.3)',
+                          boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
+                        },
+                        contentInner: { padding: 0, width: '100%', height: '100%' },
+                      }}>
+                      {
+                        livepeer.monthlyStats.slice(0).reverse().map(function (data, i) {
+                          let thisMonth = "";
+                          let monthAsNum = data.month;
+                          if (monthAsNum == 0) {
+                            thisMonth = "Januari";;
+                          } else if (monthAsNum == 1) {
+                            thisMonth = "Februari";;
+                          } else if (monthAsNum == 2) {
+                            thisMonth = "March";;
+                          } else if (monthAsNum == 3) {
+                            thisMonth = "April";
+                          } else if (monthAsNum == 4) {
+                            thisMonth = "May";
+                          } else if (monthAsNum == 5) {
+                            thisMonth = "June";
+                          } else if (monthAsNum == 6) {
+                            thisMonth = "July";
+                          } else if (monthAsNum == 7) {
+                            thisMonth = "August";
+                          } else if (monthAsNum == 8) {
+                            thisMonth = "September";
+                          } else if (monthAsNum == 9) {
+                            thisMonth = "October";
+                          } else if (monthAsNum == 10) {
+                            thisMonth = "November";
+                          } else if (monthAsNum == 11) {
+                            thisMonth = "December";;
+                          }
+
+                          const title = data.year + "-" + thisMonth + ": " + data.winningTicketsReceived.length + " orchestrators earned " + data.winningTicketsReceivedSum.toFixed(2) + " Eth";
+
+                          return (
+                            <Accordion.Item
+                              label={title}
+                              icon={"🔄"}
+                              className="stroke"
+                              style={{ width: '100%', alignItems: 'stretch' }}
+                              key={"accord" + i + data.year + "-" + data.month + "-" + data.total}>
+                              <MonthlyStats
+                                data={data}
+                                seed={"win" + i + data.year + "-" + data.month + "-" + data.total}
+                              />
+                            </Accordion.Item>
+                          )
+                        })
+                      }
+                    </Accordion>
                   </div>
                 </div>
               </div>
diff --git a/src/style.css b/src/style.css
index 30a63ba..78d1afa 100644
--- a/src/style.css
+++ b/src/style.css
@@ -70,7 +70,7 @@ p {
 
 /* width */
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 15px;
   border-radius: 10px;
 }
 
@@ -228,6 +228,42 @@ svg {
   border-radius: 1em;
 }
 
+.infoBar {
+  cursor: default;
+  text-align: start;
+  padding: 0;
+  margin: 0;
+  user-select: text;
+  font-size: small;
+  color: rgba(15, 15, 15, 0.8750);
+  background-color: rgba(192, 188, 202, 0.335);
+  -webkit-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.2);
+  -moz-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.2);
+  box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.2);
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  border-radius: 0.5em;
+}
+
+.infoContainer {
+  cursor: default;
+  text-align: start;
+  padding: 0;
+  margin: 0;
+  user-select: text;
+  font-size: small;
+  color: rgba(15, 15, 15, 0.8750);
+  background: rgba(2, 0, 36, 0.5);
+  background: linear-gradient(120deg, rgba(4, 3, 24, 0.10) 0%, rgba(78, 78, 85, 0.05) 35%, rgba(49, 79, 85, 0.10) 100%);
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  border-radius: 0.5em;
+}
+
 .insetEffect {
   background-color: rgba(206, 206, 206, 0.26);
   -webkit-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05);
@@ -576,6 +612,9 @@ svg {
   text-shadow: 0.5px 0.5px 0.8px #9493aa;
   background-color: transparent;
   border: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
 }
 
 .selectOrch:hover, .selectOrch a:hover{