diff --git a/package.json b/package.json
index 6363c3c..c185bc0 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "react-retro-hit-counter": "^1.0.1",
     "react-router-dom": "^6.0.2",
     "react-scripts": "3.2.0",
-    "react-tooltip": "^4.2.21",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
     "styled-components": "^5.3.3"
diff --git a/src/actions/livepeer.js b/src/actions/livepeer.js
index 5032efc..10ae72e 100644
--- a/src/actions/livepeer.js
+++ b/src/actions/livepeer.js
@@ -1,16 +1,16 @@
 import * as apiUtil from "../util/livepeer";
 import { receiveErrors } from "./error";
 
-const activationColour = "rgba(23, 60, 122, 0.3)";
-const rewardColour = "rgba(20, 99, 29, 0.3)";
-const updateColour = "rgba(122, 63, 23, 0.3)";
-const withdrawStakeColour = "rgba(115, 110, 22, 0.3)";
-const stakeColour = "rgba(56, 23, 122, 0.3)";
-const unbondColour = "rgba(122, 23, 51, 0.3)";
-const claimColour = "rgba(77, 91, 42, 0.3)";
+const claimColour = "rgba(25, 158, 29, 0.3)";
+const stakeColour = "rgba(25, 158, 147, 0.3)";
+const ticketRedeemColour = "rgba(25, 98, 158, 0.3)";
+const rewardColour = "rgba(25, 27, 158, 0.3)";
+const unbondColour = "rgba(105, 25, 158, 0.3)";
+const updateColour = "rgba(158, 25, 52, 0.3)";
+const withdrawStakeColour = "rgba(158, 98, 25, 0.3)";
+const activationColour = "rgba(154, 158, 25, 0.3)";
 
 const ticketTransferColour = "rgba(88, 91, 42, 0.3)";
-const ticketRedeemColour = "rgba(42, 44, 91, 0.3)";
 
 const thresholdStaking = 0.001;
 const thresholdFees = 0.00009;
@@ -117,16 +117,16 @@ export const getEvents = () => async dispatch => {
             eventFrom = "";
             eventTo = "";
             if (eventContainsBond) {
-              eventDescription = "activated with a self stake of " + tmpAmount.toFixed(2) + " LPT and will become active in round " + tmpWhen;
+              eventDescription = "🚀activated with a self stake of " + tmpAmount.toFixed(2) + " LPT and will become active in round " + tmpWhen;
             } else {
-              eventDescription = "reactivated and will become active in round " + tmpWhen;
+              eventDescription = "🚀reactivated and will become active in round " + tmpWhen;
             }
           }
           // Lone Unbond => Unbond Event
           else if (eventContainsUnbond) {
             eventType = "Unbond";
             eventColour = unbondColour;
-            eventDescription = "unbonded " + tmpAmount.toFixed(2) + " LPT starting from round " + tmpWhen;
+            eventDescription = "❌unbonded " + tmpAmount.toFixed(2) + " LPT starting from round " + tmpWhen;
 
           }
           // Lone Bond => Stake Event
@@ -138,18 +138,18 @@ export const getEvents = () => async dispatch => {
           else if (eventContainsRebond) {
             eventType = "Stake";
             eventColour = stakeColour;
-            eventDescription = "is now staking " + tmpAmount.toFixed(2) + " LPT";
+            eventDescription = "⌛is now staking " + tmpAmount.toFixed(2) + " LPT";
           }
 
           // Fill description of Stake Event if it wasn't set yet
           if (eventType === "Stake" && eventDescription === "") {
             if (eventFrom === "0x0000000000000000000000000000000000000000") {
-              eventDescription = "staked " + tmpAmount.toFixed(2) + " LPT";
+              eventDescription = "⌛staked " + tmpAmount.toFixed(2) + " LPT";
             } else if (eventFrom === eventTo) {
               eventFrom = "";
-              eventDescription = "is now staking " + tmpAmount.toFixed(2) + " LPT";
+              eventDescription = "⌛is now staking " + tmpAmount.toFixed(2) + " LPT";
             } else {
-              eventDescription = "moved a " + tmpAmount.toFixed(2) + " LPT stake";
+              eventDescription = "⌛moved a " + tmpAmount.toFixed(2) + " LPT stake";
             }
           }
           // If we have an eventType at this point, we have a completed Event from the previous transaction
@@ -199,7 +199,7 @@ export const getEvents = () => async dispatch => {
           if (amount < thresholdFees) {
             continue;
           }
-          const txt = " withdrew a " + amount.toFixed(2) + " LPT stake in round " + eventObj.data.withdrawRound;
+          const txt = "🏦withdrew a " + amount.toFixed(2) + " LPT stake in round " + eventObj.data.withdrawRound;
           finalEventList.push({
             eventType: "Withdraw",
             eventDescription: txt,
@@ -218,7 +218,7 @@ export const getEvents = () => async dispatch => {
           if (amount < thresholdFees) {
             continue;
           }
-          const txt = " withdrew " + amount.toFixed(2) + " LPT earned fees";
+          const txt = "🏦withdrew " + amount.toFixed(2) + " LPT earned fees";
           finalEventList.push({
             eventType: "Withdraw",
             eventDescription: txt,
@@ -238,7 +238,7 @@ export const getEvents = () => async dispatch => {
           eventContainsTranscoderUpdate = true;
           const amount1 = parseFloat(eventObj.data.rewardCut) / 10000;
           const amount2 = 100 - (eventObj.data.feeShare / 10000);
-          const txt = "changed their reward commission to " + amount1.toFixed(2) + "% and their fee commission to " + amount2.toFixed(2) + "%";
+          const txt = "🔄changed their reward commission to " + amount1.toFixed(2) + "% and their fee commission to " + amount2.toFixed(2) + "%";
           finalEventList.push({
             eventType: "Update",
             eventDescription: txt,
@@ -261,7 +261,7 @@ export const getEvents = () => async dispatch => {
           if (amount1 < thresholdStaking && amount2 < thresholdFees) {
             continue;
           }
-          let txt = "delegator claimed ";
+          let txt = "💰delegator claimed ";
           if (amount1 > thresholdStaking) {
             txt += amount1.toFixed(2) + " LPT staking rewards";
             if (amount2 > thresholdFees) {
@@ -290,7 +290,7 @@ export const getEvents = () => async dispatch => {
         else if (eventObj.name === "Reward") {
           eventContainsReward = true;
           const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000;
-          let txt = "called reward worth " + amount1.toFixed(2) + " LPT";
+          let txt = "💸called reward worth " + amount1.toFixed(2) + " LPT";
           if (Math.floor(amount1) == 69) {
             txt += "... Nice!";
           }
@@ -389,7 +389,7 @@ export const getTickets = () => async dispatch => {
         // Always split off WithdrawStake as a separate Withdraw Event
         if (eventObj.name === "WinningTicketRedeemed") {
           const amount = parseFloat(eventObj.data.faceValue) / 1000000000000000000;
-          const txt = " redeemed a winning ticket worth " + amount.toFixed(4) + " Eth";
+          const txt = "🎟️winning ticket worth " + amount.toFixed(4) + " Eth";
           finalTicketList.push({
             eventType: "RedeemTicket",
             eventDescription: txt,
diff --git a/src/components/OrchAddressViewer.js b/src/components/OrchAddressViewer.js
index c683c4c..5bc6776 100644
--- a/src/components/OrchAddressViewer.js
+++ b/src/components/OrchAddressViewer.js
@@ -1,18 +1,14 @@
 import React from "react";
-import ReactTooltip from "react-tooltip";
 
 const Address = (obj) => {
   return (
     <div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
-      <a className="selectOrchLight" target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/" + obj.address} data-tip data-for={obj.seed} >
+      <a className="selectOrchLight" target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/" + obj.address} >
         <div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}>
           <img alt="" src="livepeer.png" width="20" height="20" />
-          <span className="elipsText elipsOnMobile">{obj.address}</span>
+          <span className="elipsText elipsOnMobile" style={{ marginRight: "0.5em" }}>{obj.address}</span>
         </div>
       </a>
-      <ReactTooltip id={obj.seed} place="top" effect="solid">
-        {"https://explorer.livepeer.org/accounts/" + obj.address}
-      </ReactTooltip>
     </div>
   )
 }
diff --git a/src/components/OrchDelegatorViewer.js b/src/components/OrchDelegatorViewer.js
index 5ae5f59..2121f17 100644
--- a/src/components/OrchDelegatorViewer.js
+++ b/src/components/OrchDelegatorViewer.js
@@ -12,12 +12,12 @@ const OrchDelegatorViewer = (obj) => {
             <h3 style={{ padding: 0, margin: 0 }}>{delegators.length} Current Delegators</h3>
           </div>
           <div className="content-wrapper">
-            <ScrollContainer className="overflow-container" hideScrollbars={false}>
-              <div className="overflow-content" style={{ cursor: 'grab', padding: 0, maxHeight: '300px' }}>
+            <ScrollContainer className="overflow-container" hideScrollbars={false} style={{  }}>
+              <div className="overflow-content" style={{ cursor: 'grab', padding: 0, maxHeight: '300px', margin: '0.5em' }}>
                 {
                   delegators.map((delObj, idx) => {
                     return (
-                      <div className="flexContainer forceWrap" key={"delegator" + idx} style={{ margin: 0, textAlign: 'center',alignItems: 'center', justifyContent:'center' }}>
+                      <div className="flexContainer forceWrap" key={"delegator" + idx} style={{ margin: 0, textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}>
                         <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
                         <div className="rowAlignRight" style={{ margin: 0 }}>
                           <p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
diff --git a/src/components/OrchInfoViewer.js b/src/components/OrchInfoViewer.js
index e908ce9..d008730 100644
--- a/src/components/OrchInfoViewer.js
+++ b/src/components/OrchInfoViewer.js
@@ -1,6 +1,5 @@
 import React from "react";
 import Stat from "./statViewer";
-import ReactTooltip from "react-tooltip";
 import Address from "./OrchAddressViewer";
 
 function updateClipboard(newClip) {
@@ -88,14 +87,11 @@ const OrchInfoViewer = (obj) => {
             <Stat header={"Stake"} title1={"Total"} content1={totalStake + " LPT"} title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} />
           </div>
           <div className="strokeSmollLeft" style={{ display: "flex" }}>
-            <button style={{ marginBottom: '1em' }} className="selectOrchLight" data-tip data-for="registerTip" onClick={() => {
+            <button style={{ marginBottom: '1em' }} className="selectOrchLight" onClick={() => {
               copyLink(shareUrl);
             }}>
               <img alt="" src="clipboard.svg" width="20em" height="20em" />
             </button>
-            <ReactTooltip id="registerTip" place="top" effect="solid">
-              Copy to clipboard
-            </ReactTooltip>
           </div>
         </div>
       </div>
diff --git a/src/components/eventButton.js b/src/components/eventButton.js
index 78e3f60..1d76f3b 100644
--- a/src/components/eventButton.js
+++ b/src/components/eventButton.js
@@ -24,14 +24,14 @@ 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, marginLeft: '0.5em' }}>
+        <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;:</span>
+          <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>
@@ -39,14 +39,14 @@ const EventButton = (obj) => {
     }
     if (obj.eventObj.eventFrom) {
       eventFrom =
-        <div className="rowAlignLeft" style={{ width: '100%', margin: 0, marginLeft: '0.5em' }}>
+        <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;:</span>
+          <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>
@@ -54,14 +54,14 @@ const EventButton = (obj) => {
     }
     if (obj.eventObj.eventCaller) {
       eventCaller =
-        <div className="rowAlignLeft" style={{ width: '100%', margin: 0, marginLeft: '0.5em' }}>
+        <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;:</span>
+          <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>
@@ -86,7 +86,7 @@ const EventButton = (obj) => {
         </div>
         <div className="row">
           <p className="row withWrap" style={{ 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)" }}>
-            💬 {obj.eventObj.eventDescription}
+            {obj.eventObj.eventDescription}
           </p>
         </div>
         <div className="rowAlignLeft">
diff --git a/src/components/eventViewer.js b/src/components/eventViewer.js
index a90a393..5450d22 100644
--- a/src/components/eventViewer.js
+++ b/src/components/eventViewer.js
@@ -5,15 +5,15 @@ import Filter from './filterComponent';
 import ReactPaginate from 'react-paginate';
 /// A scrollable and filterable list of EventButtons
 
-const activationColour = "rgba(23, 60, 122, 0.3)";
-const rewardColour = "rgba(20, 99, 29, 0.3)";
-const updateColour = "rgba(122, 63, 23, 0.3)";
-const withdrawStakeColour = "rgba(115, 110, 22, 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 ticketRedeemColour = "rgba(42, 44, 91, 0.3)";
-const greyColour = "rgba(122, 128, 127, 0.3)";
+const claimColour = "rgba(25, 158, 29, 0.4)";
+const stakeColour = "rgba(25, 158, 147, 0.4)";
+const ticketRedeemColour = "rgba(25, 98, 158, 0.4)";
+const rewardColour = "rgba(25, 27, 158, 0.4)";
+const unbondColour = "rgba(105, 25, 158, 0.4)";
+const updateColour = "rgba(158, 25, 52, 0.4)";
+const withdrawStakeColour = "rgba(158, 98, 25, 0.4)";
+const activationColour = "rgba(154, 158, 25, 0.4)";
+const greyColour = "rgba(122, 128, 127, 0.4)";
 
 const defaultIncrementMaxShown = 100;
 
@@ -244,16 +244,31 @@ const EventViewer = (obj) => {
               </div>
             </ScrollContainer>
             <div className="strokeSmollLeft" style={{ marginRight: "1em" }}>
-              <button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour, marginTop: '0.7em' }} onClick={() => {
-                setFilterActivated(!filterActivated);
+              <button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: delegatorActivatedColour, marginTop: '0.7em' }} onClick={() => {
+                setDelegatorRewardActivated(!delegatorRewardActivated);
               }}>
-                <h3>Activated</h3>
+                <h3>Claim</h3>
+              </button>
+              <button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => {
+                setStakeActivated(!stakeActivated);
+              }}>
+                <h3>Stake</h3>
+              </button>
+              <button className={ticketRedemptionActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: ticketActivatedColour }} onClick={() => {
+                setTicketRedemptionActivated(!ticketRedemptionActivated);
+              }}>
+                <h3>Tickets</h3>
               </button>
               <button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardActivatedColour }} onClick={() => {
                 setRewardActivated(!rewardActivated);
               }}>
                 <h3>Reward</h3>
               </button>
+              <button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => {
+                setUnbondActivated(!unbondActivated);
+              }}>
+                <h3>Unbond</h3>
+              </button>
               <button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateActivatedColour }} onClick={() => {
                 setUpdateActivated(!updateActivated);
               }}>
@@ -264,25 +279,10 @@ const EventViewer = (obj) => {
               }}>
                 <h3>Withdraw</h3>
               </button>
-              <button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => {
-                setStakeActivated(!stakeActivated);
+              <button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour }} onClick={() => {
+                setFilterActivated(!filterActivated);
               }}>
-                <h3>Stake</h3>
-              </button>
-              <button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: delegatorActivatedColour }} onClick={() => {
-                setDelegatorRewardActivated(!delegatorRewardActivated);
-              }}>
-                <h3>Claim</h3>
-              </button>
-              <button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => {
-                setUnbondActivated(!unbondActivated);
-              }}>
-                <h3>Unbond</h3>
-              </button>
-              <button className={ticketRedemptionActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: ticketActivatedColour }} onClick={() => {
-                setTicketRedemptionActivated(!ticketRedemptionActivated);
-              }}>
-                <h3>Tickets</h3>
+                <h3>Activated</h3>
               </button>
             </div>
           </div>
diff --git a/src/pages/livepeer.js b/src/pages/livepeer.js
index 4c02291..4e67da6 100644
--- a/src/pages/livepeer.js
+++ b/src/pages/livepeer.js
@@ -76,16 +76,16 @@ const Livepeer = (obj) => {
           }}>
             <h1 style={{ margin: 0, padding: 0 }}>🏠</h1>
           </button>
-          <h4 className="rowAlignLeft withWrap elipsOnMobile">{headerString}</h4>
+          <h4 className="rowAlignLeft withWrap showNeverOnMobile">{headerString}</h4>
         </div>
         <div className='rowAlignRight'>
-          <button className="homeButton" style={{ padding: 0, paddingRight: '1em', paddingLeft: '1em' }} onClick={() => {
+          <button className="homeButton" onClick={() => {
             dispatch(clearOrchestrator());
             setSearchTerm("");
             setAmountFilter(0);
             setMaxAmount(defaultMaxShown);
           }}>
-            <h4>✖️ Clear</h4>
+            <h4 style={{margin: 0, padding: 0}}>✖️ Clear</h4>
           </button>
           <p>Sidebar</p>
           <div className="toggle-container" onClick={() => setShowSidebar(!showSidebar)}>
diff --git a/src/style.css b/src/style.css
index 2cb31c7..9af82bf 100644
--- a/src/style.css
+++ b/src/style.css
@@ -42,9 +42,9 @@ code, pre{
 }
 
 h2, h3, h1, h4, h5, h6 {
-  text-shadow: 0.5px 0.5px 0.8px #948dff;
+  text-shadow: 0.5px 0.5px 0.8px #9493aa;
   color: #1a1b26;
-  cursor: default;
+  cursor: inherit;
   text-align: center;
   justify-content: center;
   align-items: center;
@@ -61,7 +61,7 @@ h2, h3, h1, h4, h5, h6 {
 }
 
 p {
-  text-shadow: 0.5px 0.5px 0.8px #948dff;
+  text-shadow: 0.5px 0.5px 0.8px #9493aa;
   color: #1a1b26;
   font-size: 1.2em;
   margin: 0.3em;
@@ -75,19 +75,19 @@ p {
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background-color: rgba(146, 144, 196, 0.9);
+  background-color: rgba(61, 61, 66, 0.3);
   border-radius: 10px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(51, 50, 78, 0.9);
+  background-color: rgba(44, 44, 46, 0.7);
   border-radius: 10px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(25, 25, 59, 0.9);
+  background-color: rgba(35, 35, 39, 0.9);
 }
 
 #dvdlogo {
@@ -145,7 +145,7 @@ svg {
   height: 50px;
   display: flex;
   align-items: center;
-  background-color: rgba(180, 175, 252, 0.80);
+  background-color: rgba(214, 214, 214, 0.80);
 }
 #bodyContent {
   height: calc( 100vh - 50px);
@@ -155,9 +155,9 @@ svg {
   overflow: hidden;
 }
 #sideContent {
-  background-color: rgba(180, 175, 252, 0.80);
+  background-color: rgba(214, 214, 214, 0.8);
   backdrop-filter: blur(6px);
-  box-shadow: 9px 13px 8px 8px  rgba(8, 7, 56, 0.692);
+  box-shadow: 9px 13px 8px 8px  rgba(27, 23, 19, 0.692);
   border-bottom-right-radius: 1em;
   width: 400px;
   overflow-y: auto;
@@ -187,7 +187,7 @@ svg {
 }
 
 .lightText {
-  color: rgba(162, 161, 255, 0.5);
+  color: rgba(176, 175, 218, 0.7);
 }
 
 .darkText {
@@ -205,7 +205,7 @@ svg {
   user-select: text;
   font-size: small;
   color: rgba(15, 15, 15, 0.8750);
-  background-color: rgba(148, 154, 184, 0.8);
+  background-color: rgba(206, 206, 206, 0.8);
   -webkit-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);
   -moz-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);
   box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);
@@ -328,8 +328,8 @@ svg {
   padding: 8px;
   border: 0;
   border-radius: 5px;
-  background-color: rgba(163, 161, 255, 0.9);
-  box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692);
+  background-color: rgba(157, 157, 158, 0.9);
+  box-shadow: 4px 5px 3px 2px rgba(20, 20, 19, 0.692);
   text-align: center;
   justify-content: center;
   align-items: center;
@@ -339,7 +339,7 @@ svg {
   backdrop-filter: blur(6px);
 }
 .waveButton:hover {
-  background-color: rgba(122, 121, 207, 0.9);
+  background-color: rgba(192, 195, 200, 0.8);
 }
 .waveButton:disabled {
   cursor: default;
@@ -360,11 +360,11 @@ svg {
   z-index: 10; 
 }
 .homeButton:hover {
-  box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692);
+  box-shadow: 4px 5px 3px 2px rgba(20, 20, 19, 0.692);
   backdrop-filter: blur(6px);
 }
 .homeButton:active {
-  box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692);
+  box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
 }
 .homeButton:disabled {
   cursor: default;
@@ -385,30 +385,29 @@ svg {
   margin-bottom: 0.7em;
 }
 .nonHomeButton:hover {
-  box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692);
+  box-shadow: 4px 5px 3px 2px rgba(20, 20, 19, 0.692);
   backdrop-filter: blur(6px);
 }
 .nonHomeButton:active {
-  box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692);
+  box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
 }
 .active {
-  box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692);
+  box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
 }
 .searchField {
   margin: auto;
   display: flex;
-  background-color: rgba(44, 96, 238, 0.199);
+  background-color: rgba(107, 111, 122, 0.199);
   padding: 5px;
   border-radius: 20px;
-  color:rgba(8, 7, 56, 0.747);
+  color:rgba(20, 20, 19, 0.747);
 }
 .searchField::placeholder {
-  color:rgba(8, 7, 56, 0.445);
+  color:rgba(20, 20, 19, 0.445);
 }
 .searchField:focus {
   outline: none !important;
-  border:2px solid rgba(49, 13, 134, 0.459);
-  box-shadow: 0px 0px 3px 2px rgba(53, 118, 138, 0.8);
+  box-shadow: 0px 0px 3px 2px rgba(99, 109, 112, 0.8);
 }
 
 .main-container {
@@ -450,8 +449,8 @@ svg {
 }
 
 .roundedOpaque {
-  background-color: rgba(180, 175, 252, 0.80);
-  box-shadow: 9px 13px 18px 8px  rgba(8, 7, 56, 0.692);
+  background-color: rgba(214, 214, 214, 0.80);
+  box-shadow: 9px 13px 18px 8px  rgba(20, 20, 19, 0.692);
   border-radius: 30px;
   box-sizing: border-box;
   backdrop-filter: blur(6px);
@@ -479,7 +478,7 @@ svg {
 }
 
 .selectOrch, .selectOrch a{
-  text-shadow: 0.5px 0.5px 0.8px #948dff;
+  text-shadow: 0.5px 0.5px 0.8px #9493aa;
   background-color: transparent;
   border: none;
 }
@@ -492,7 +491,7 @@ svg {
 }
 
 .selectOrchLight, .selectOrchLight a{
-  text-shadow: 0.5px 0.5px 0.8px #948dff;
+  text-shadow: 0.5px 0.5px 0.8px #9493aa;
   background-color: transparent;
   border: none;
 }
@@ -501,7 +500,7 @@ svg {
   backdrop-filter: blur(6px);
   text-decoration: none;
   cursor: pointer;
-  background-color: rgba(115, 114, 146, 0.9);
+  background-color: rgba(187, 187, 187, 0.9);
   border-radius: 1em;
 }
 
@@ -541,7 +540,7 @@ svg {
 }
 
 .disabled {
-  background-color: #384e5c;
+  background-color: #495258;
   left: 2px;
 }