diff --git a/client/src/views/addr.js b/client/src/views/addr.js
index 747f125a..2510882c 100644
--- a/client/src/views/addr.js
+++ b/client/src/views/addr.js
@@ -119,7 +119,7 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
 
           <div className="load-more-container">
             <div>
-              { loading ? <div className="load-more g-btn font-btn-2 disabled"><span>{t`Loading...`}</span><div>{loader("big")}</div></div>
+              { loading ? <div className="load-more g-btn font-btn-2 disabled"><span>{t`Loading...`}</span></div>
                         : pagingNav(addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_txids, next_paging_txids, prev_paging_est_count, t) }
             </div>
           </div>
diff --git a/client/src/views/blocks.js b/client/src/views/blocks.js
index e358dc96..f74e6c55 100644
--- a/client/src/views/blocks.js
+++ b/client/src/views/blocks.js
@@ -11,111 +11,114 @@ const staticRoot = process.env.STATIC_ROOT || "";
 
 export const blks = (blocks, viewMore, { t, ...S }) => (
   <div className="block-container">
-    <div className="table-header">
-      <div className="table-header-icon-container">
-        <BlockIcon />
-      </div>
-      <h1 className="table-header-title">Latest Blocks</h1>
-    </div>
     {!blocks ? (
       loader()
     ) : !blocks.length ? (
       <p>{t`No recent blocks`}</p>
     ) : (
       <div className="blocks-table">
-        {blocks &&
-          blocks.map((b, index) => (
-            <a className="blocks-table-link-row" href={`block/${b.id}`}>
-              <div
-                className={`blocks-table-card ${index === 0 ? "first-blocks-table-card" : ""} ${S.newBlockEntries && S.newBlockEntries[b.id] ? "new-table-entry" : ""}`}
-              >
-                <div className="block-icon-container">
-                  <BlockIcon />
-                </div>
-                <div className="block-details">
-                  <div className="block-card-header">
-                    <div className="block-card-top-header">
-                      <div className="mobile-block-icon-container">
-                        <BlockIcon />
+        <div className="table-header">
+          <div className="table-header-icon-container">
+            <BlockIcon />
+          </div>
+          <h1 className="table-header-title">Latest Blocks</h1>
+        </div>
+        <div className="blocks-table-body">
+          {blocks &&
+            blocks.map((b, index) => (
+              <a className="blocks-table-link-row" href={`block/${b.id}`}>
+                <div
+                  className={`blocks-table-card ${S.newBlockEntries && S.newBlockEntries[b.id] ? "new-table-entry" : ""}`}
+                >
+                  <div className="block-icon-container">
+                    <BlockIcon />
+                  </div>
+                  <div className="block-details">
+                    <div className="block-card-header">
+                      <div className="block-card-top-header">
+                        <div className="mobile-block-icon-container">
+                          <BlockIcon />
+                        </div>
+                        <p className="block-number">
+                          #{b.height.toLocaleString()}
+                        </p>
+                        <div
+                          className="table-copy-button code-button-btn"
+                          role="button"
+                          tabindex="0"
+                          data-clipboardCopy={"" + b.height}
+                          aria-label={`Copy block number ${b.height}`}
+                        >
+                          <CopyIcon />
+                        </div>
+                        {index === 0 ? (
+                          <div className="latest-block-badge">Latest</div>
+                        ) : (
+                          ""
+                        )}
                       </div>
-                      <p className="block-number">
-                        #{b.height.toLocaleString()}
-                      </p>
-                      <div
-                        className="table-copy-button code-button-btn"
-                        role="button"
-                        tabindex="0"
-                        data-clipboardCopy={"" + b.height}
-                        aria-label={`Copy block number ${b.height}`}
+
+                      <p
+                        className="block-timestamp"
+                        title={new Date(b.timestamp * 1000)}
                       >
-                        <CopyIcon />
-                      </div>
-                      {index === 0 ? (
-                        <div className="latest-block-badge">Latest</div>
-                      ) : (
-                        ""
-                      )}
+                        <ClockIcon className="block-timestamp-icon" />
+                        {formatRelativeTime(b.timestamp)?.toUpperCase()}
+                      </p>
                     </div>
-
-                    <p
-                      className="block-timestamp"
-                      title={new Date(b.timestamp * 1000)}
-                    >
-                      <ClockIcon className="block-timestamp-icon" />
-                      {formatRelativeTime(b.timestamp)?.toUpperCase()}
-                    </p>
-                  </div>
-                  <div className="block-card-body">
-                    <div className="block-stat">
-                      <div className="block-stat-title">TRANSACTIONS</div>
-                      <div className="block-stat-value">
-                        {formatNumber(b.tx_count).toLocaleString()}
+                    <div className="block-card-body">
+                      <div className="block-stat">
+                        <div className="block-stat-title">TRANSACTIONS</div>
+                        <div className="block-stat-value">
+                          {formatNumber(b.tx_count).toLocaleString()}
+                        </div>
                       </div>
-                    </div>
-                    <div className="block-stat">
-                      <div className="block-stat-title">SIZE</div>
-                      <div className="block-stat-value">
-                        {formatVMB(b.size, "MB")}
+                      <div className="block-stat">
+                        <div className="block-stat-title">SIZE</div>
+                        <div className="block-stat-value">
+                          {formatVMB(b.size, "MB")}
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="block-usage">
-                    <div className="usage-and-tooltip">
-                      <p className="usage-number">
-                        {getBlockPercentageUsed(b.weight)}%
-                      </p>
-                      <div className="tooltip">
-                        <img src={`${staticRoot}img/icons/tooltip.svg`} />
-                        <div className="tooltip-dialogue">
-                          How full this block is.
+                    <div className="block-usage">
+                      <div className="usage-and-tooltip">
+                        <p className="usage-number">
+                          {getBlockPercentageUsed(b.weight)}%
+                        </p>
+                        <div className="tooltip">
+                          <img src={`${staticRoot}img/icons/tooltip.svg`} />
+                          <div className="tooltip-dialogue">
+                            How full this block is.
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div className="usage-bar">
-                      <div
-                        className="usage-bar-fill"
-                        style={{
-                          width: `${getBlockPercentageUsed(b.weight)}%`,
-                        }}
-                      ></div>
+                      <div className="usage-bar">
+                        <div
+                          className="usage-bar-fill"
+                          style={{
+                            width: `${getBlockPercentageUsed(b.weight)}%`,
+                          }}
+                        ></div>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </a>
-          ))}
-      </div>
-    )}
-    {blocks && viewMore ? (
-      <a className="view-more font-link-semibold" href="blocks/recent">
-        <span>{t`See more`}</span>
-        <div>
-          <img alt="" src={`${staticRoot}img/icons/arrow-right-blue.svg`} />
+              </a>
+            ))}
         </div>
-      </a>
-    ) : (
-      ""
+
+        {blocks && viewMore ? (
+          <a className="view-more font-link-semibold" href="blocks/recent">
+            <span>{t`See more`}</span>
+            <div>
+              <img alt="" src={`${staticRoot}img/icons/arrow-right-blue.svg`} />
+            </div>
+          </a>
+        ) : (
+          ""
+        )}
+      </div>
     )}
   </div>
 );
diff --git a/client/src/views/network-selection.js b/client/src/views/network-selection.js
index cd2f3660..f885d5f5 100644
--- a/client/src/views/network-selection.js
+++ b/client/src/views/network-selection.js
@@ -7,8 +7,10 @@ const staticRoot = process.env.STATIC_ROOT || "";
 const siteRoot = process.env.BASE_PREFIX || "";
 const withRoot = (url) => (siteRoot && url && url.charAt(0) === "/" ? siteRoot + url : url);
 const itemEntries = items ? Object.entries(items) : [];
+const networkId = name => name.replace(/ /g, "");
+const networkIconSrc = name => `${staticRoot}img/icons/${networkId(name)}-menu-logo.svg`;
 const activeName = active || (itemEntries[0] && itemEntries[0][0]);
-const activeId = activeName && activeName.replace(/ /g, "");
+const activeId = activeName && networkId(activeName);
 
 export default ({ t, page }) => (
   <div className="main-nav-container">
@@ -25,10 +27,10 @@ export default ({ t, page }) => (
               <img
                 className="menu-logo"
                 alt=""
-                src={`${staticRoot}img/icons/${activeId}-menu-logo.svg`}
+                src={networkIconSrc(activeName)}
               />
             </span>
-            <span>{t(activeName)}</span>
+            <span className="network-name">{t(activeName)}</span>
             <svg
               className="network-angle-down"
               width="17"
@@ -44,28 +46,27 @@ export default ({ t, page }) => (
           <div className="network-hover-menu-container">
             <div className="network-hover-menu">
               {itemEntries.map(([name, url]) => {
-                  return (
-                    <a
-                      id={name.replace(/ /g, "")}
-                      href={withRoot(url)}
-                      className={`network-hover-menu-option-container ${name.replace(/ /g, "").toLowerCase()} ${name === activeName ? "active" : ""}`}
-                      rel="external"
-                    >
-                      <div
-                        id={name.replace(/ /g, "")}
-                        className={`network-hover-menu-option`}
-                      >
-                        <span>
-                          <img
-                            className="menu-logo"
-                            src={`${staticRoot}img/icons/${name.replace(/ /g, "")}-menu-logo.svg`}
-                          />
-                        </span>
-                        {t(name)}
-                      </div>
-                    </a>
-                  );
-                })}
+                const id = networkId(name);
+
+                return (
+                  <a
+                    id={id}
+                    href={withRoot(url)}
+                    className={`network-hover-menu-option-container ${id.toLowerCase()} ${name === activeName ? "active" : ""}`}
+                    rel="external"
+                  >
+                    <div className="network-hover-menu-option">
+                      <span>
+                        <img
+                          className="menu-logo"
+                          src={networkIconSrc(name)}
+                        />
+                      </span>
+                      {t(name)}
+                    </div>
+                  </a>
+                );
+              })}
             </div>
           </div>
         </li>
diff --git a/flavors/bitcoin-testnet/extras.css b/flavors/bitcoin-testnet/extras.css
index 25bee7d3..ac8bf6b1 100644
--- a/flavors/bitcoin-testnet/extras.css
+++ b/flavors/bitcoin-testnet/extras.css
@@ -33,8 +33,9 @@
     text-align: center;
     font-size: 14px;
     line-height: 2.4;
+    left: 0px;
 }
 
 .sub-nav-container{
-    margin-top: 25px;
+    margin-top: 40px;
 }
\ No newline at end of file
diff --git a/flavors/bitcoin-testnet4/extras.css b/flavors/bitcoin-testnet4/extras.css
index 5aa4ecc6..a7bd4b2d 100644
--- a/flavors/bitcoin-testnet4/extras.css
+++ b/flavors/bitcoin-testnet4/extras.css
@@ -33,10 +33,11 @@
     text-align: center;
     font-size: 14px;
     line-height: 2.4;
+    left: 0px;
 }
 
 .sub-nav-container{
-    margin-top: 25px;
+    margin-top: 40px;
 }
 
 .block-header-title, .transaction-header-title{
diff --git a/flavors/liquid-mainnet/extras.css b/flavors/liquid-mainnet/extras.css
index 8b25c238..f1ba7c97 100644
--- a/flavors/liquid-mainnet/extras.css
+++ b/flavors/liquid-mainnet/extras.css
@@ -5,19 +5,19 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background: #46beae;
+    background: var(--accent-color);
     height: 3px;
     border-radius: 10px;
 }
 
 .details-btn > div {
-    color: #46beae;
-    border: 1px solid #46beae;
+    color: var(--accent-color);
+    border: 1px solid var(--accent-color);
     background: none;
 }
 
 .transaction-box > .footer > div:nth-child(3) {
-    color: #46beae;
+    color: var(--accent-color);
 }
 
 .navbar {
diff --git a/flavors/liquid-testnet/extras.css b/flavors/liquid-testnet/extras.css
index 333094cd..6966607c 100644
--- a/flavors/liquid-testnet/extras.css
+++ b/flavors/liquid-testnet/extras.css
@@ -37,10 +37,11 @@
     text-align: center;
     font-size: 14px;
     line-height: 2.4;
+    left: 0px;
 }
 
 .sub-nav-container{
-    margin-top: 25px;
+    margin-top: 40px;
 }
 
 .block-header-title:after, .transaction-header-title:after, .asset-page h1:after {
diff --git a/flavors/liquid/extras.css b/flavors/liquid/extras.css
index b996df38..4aa4ce5d 100644
--- a/flavors/liquid/extras.css
+++ b/flavors/liquid/extras.css
@@ -1,9 +1,23 @@
-/* START ASSET TABLE */
-
 :root {
-  --primary-color: #22E1C9;
+  --accent-color: #22E1C9;
+  --background-color: #0E012D;
+  --surface-primary-color: #0C1537;
+  --surface-secondary-color: #172146;
+  --surface-primary-alt-color: #111F3C;
+}
+
+.search-bar {
+  background-color: var(--surface-primary-color);
+  border: 1px solid var(--surface-secondary-color);
 }
 
+.nav-link {
+  background-color: var(--surface-primary-color);
+  border: 1px solid var(--surface-secondary-color);
+}
+
+/* START ASSET TABLE */
+
 .assets-table .assets-table-row {
   display: table;
   table-layout: fixed;
@@ -64,7 +78,7 @@
 
 .asset-container {
   margin-top: 40px;
-  background-color: #1c1c1c;
+  background-color: var(--surface-primary-color);
   padding: 24px;
   border-radius: 12px;
 }
@@ -151,8 +165,8 @@
 
 .assets-table-row {
   display: flex;
-  background-color: #181818;
-  border: 1px solid #181818;
+  background-color: var(--surface-secondary-color);
+  border: 1px solid var(--surface-secondary-color);
   padding: 10px 12px;
   border-radius: 4px;
   font-size: 14px;
@@ -161,7 +175,7 @@
 }
 
 .assets-table-row:hover {
-  border: 1px solid var(--primary-color);
+  border: 1px solid var(--accent-color);
   cursor: pointer;
 }
 
@@ -238,7 +252,7 @@
 .pagination-dropdown {
   position: relative;
   min-width: 85px;
-  background-color: #282828;
+  background-color: var(--surface-secondary-color);
   color: white;
   border-radius: 4px;
   outline: none;
@@ -265,7 +279,7 @@
   min-width: 100%;
   max-height: 220px;
   overflow-y: auto;
-  background-color: #181818;
+  background-color: var(--surface-secondary-color);
   border-radius: 4px;
   box-shadow: 0px 8px 20px rgba(0, 0, 0, .24);
 }
diff --git a/www/img/icons/LiquidRegtest-menu-logo.svg b/www/img/icons/LiquidRegtest-menu-logo.svg
new file mode 100644
index 00000000..e3a75ce4
--- /dev/null
+++ b/www/img/icons/LiquidRegtest-menu-logo.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="#8C8C8C"/>
+<path d="M9.30267 8.28449C9.77864 5.43812 12.8182 5.81512 13.1811 5.87167C13.5581 5.98477 13.9257 5.61248 13.7136 5.24961C12.8748 3.817 11.2065 2.88392 9.93886 2.81795C10.2546 2.56818 11.3102 2.43152 12.4318 2.47864C12.8276 2.49278 12.9926 1.9744 12.658 1.76234C12.6297 1.74349 12.6014 1.72464 12.559 1.7105C11.0275 1.23925 9.38278 1.19683 7.81822 1.60683C6.65894 1.90843 5.53735 2.45508 4.54301 3.26093C4.12831 3.60023 3.74659 3.96781 3.412 4.35895C0.91907 7.25715 0.612756 11.5173 2.73811 14.7548C2.78052 14.8208 2.82293 14.882 2.86535 14.948C2.90305 14.9951 2.91719 15.0187 2.93132 15.0376C3.03029 15.1836 3.13867 15.325 3.25177 15.4664C3.3743 15.6172 3.50625 15.7633 3.6382 15.9047C3.67119 15.9424 3.70418 15.9753 3.74188 16.013C3.8644 16.1403 3.99164 16.2675 4.12359 16.3853C4.13302 16.3948 4.14716 16.4042 4.15658 16.4183C4.29796 16.5456 4.44405 16.6681 4.59013 16.7859C4.62312 16.8142 4.66082 16.8425 4.69852 16.8707C4.83519 16.9744 4.97185 17.0734 5.10851 17.1723C5.12736 17.1818 5.1415 17.1959 5.16035 17.21C5.31586 17.3137 5.47609 17.4174 5.64103 17.5116C5.67402 17.5305 5.70701 17.5493 5.73528 17.5682C5.88608 17.653 6.03688 17.7331 6.18768 17.8085C6.20653 17.8179 6.22067 17.8274 6.23952 17.8321C6.41388 17.9169 6.58825 17.9923 6.76733 18.063C6.79089 18.0724 6.81445 18.0819 6.83801 18.0913C7.00766 18.1573 7.17732 18.2185 7.34697 18.2704C7.3611 18.2704 7.37524 18.2798 7.38467 18.2845C7.57317 18.3458 7.76167 18.3976 7.95488 18.4447C7.96431 18.4447 7.97373 18.4447 7.97845 18.4447C8.16695 18.4918 8.35545 18.5295 8.54866 18.5625H8.57223C8.97279 18.6285 9.37336 18.6662 9.77863 18.6803H9.78806C11.7815 18.7322 13.7984 18.1054 15.4714 16.7529C16.494 15.9235 17.281 14.915 17.8182 13.8029C17.8465 13.7416 17.8795 13.6756 17.9078 13.6144C18.0633 13.2704 18.1999 12.9122 18.3083 12.554C13.0774 14.5239 8.7136 11.8425 9.30738 8.2892V8.27978L9.30267 8.28449Z" fill="#C5C5C5"/>
+<path d="M6.2392 9.15631C7.25711 7.78496 7.72836 8.0253 7.82733 7.60117C7.95928 7.02153 5.84335 6.51729 4.19396 7.78496C6.48426 4.91974 10.0516 4.25998 13.0912 5.83397C13.4965 6.04603 13.9489 5.64075 13.718 5.24961C12.8792 3.817 11.2109 2.88392 9.94326 2.81795C10.259 2.56818 11.3146 2.43152 12.4362 2.47864C12.832 2.49278 12.997 1.9744 12.6624 1.76234C12.6341 1.74349 12.6058 1.72464 12.5634 1.7105C11.0319 1.23925 9.38718 1.19683 7.82262 1.60683C6.66333 1.90843 5.54175 2.45508 4.5474 3.26093C4.1327 3.60023 3.75099 3.96781 3.4164 4.35895C0.923464 7.25715 0.61715 11.5173 2.7425 14.7548C2.78492 14.8208 2.82733 14.882 2.86974 14.948C2.90744 14.9951 2.92158 15.0187 2.93572 15.0375C3.03468 15.1836 3.14307 15.325 3.25617 15.4664C5.47577 18.2091 9.0196 19.2411 12.2194 18.3976C4.03845 17.1865 5.28727 10.4428 6.2392 9.16102V9.15631Z" fill="white"/>
+</svg>
diff --git a/www/img/icons/copy.svg b/www/img/icons/copy.svg
new file mode 100644
index 00000000..8930c695
--- /dev/null
+++ b/www/img/icons/copy.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path d="M6.25 6.875V3.125C6.25 2.77982 6.52982 2.5 6.875 2.5H16.875C17.2202 2.5 17.5 2.77982 17.5 3.125V13.125C17.5 13.4702 17.2202 13.75 16.875 13.75H13.125C12.7798 13.75 12.5 13.4702 12.5 13.125C12.5 12.7798 12.7798 12.5 13.125 12.5H16.25V3.75H7.5V6.875C7.5 7.22018 7.22018 7.5 6.875 7.5C6.52982 7.5 6.25 7.22018 6.25 6.875Z" fill="white" />
+    <path d="M13.125 6.25C13.4702 6.25 13.75 6.52982 13.75 6.875V16.875C13.75 17.2202 13.4702 17.5 13.125 17.5H3.125C2.77982 17.5 2.5 17.2202 2.5 16.875V6.875C2.5 6.52982 2.77982 6.25 3.125 6.25H13.125ZM3.75 16.25H12.5V7.5H3.75V16.25Z" fill="white" />
+  </svg>
\ No newline at end of file
diff --git a/www/style.css b/www/style.css
index ae2f18ac..8ca80de4 100644
--- a/www/style.css
+++ b/www/style.css
@@ -1,9 +1,5 @@
 @import url("font/inconsolata/index.css");
 
-:root {
-  --primary-color: #FA8A00;
-}
-
 @font-face {
   font-family: Inter;
   src: url("font/Inter-VariableFont_opsz,wght.ttf") format("opentype");
@@ -27,12 +23,20 @@ html {
   overflow: auto;
 }
 
+:root {
+  --accent-color: #FA8A00;
+  --background-color: #181818;
+  --surface-primary-color: #1C1C1C;
+  --surface-primary-alt-color: #26221D;
+  --surface-secondary-color: #262626;
+}
+
 body {
   direction: ltr;
   text-align: left;
   font-family: "Inter", sans-serif;
   color: #fff;
-  background-color: #181818;
+  background-color: var(--background-color);
   margin: 0px;
   padding: 0px;
   line-height: 1.5;
@@ -418,7 +422,17 @@ ul {
 
 .g-btn:hover, .g-btn:active { box-shadow: 149 157 165/20% 0px 8px 24px; transition: 0.3s ease-out; text-decoration: none; }
 
-.primary-btn { background: #FF9417; border: 1px solid #FF9417; color: #0C0C0F; border-radius: 2px; }
+.primary-btn {
+  background: var(--accent-color);
+  border: 1px solid var(--accent-color);
+  color: #0C0C0F;
+  border-radius: 2px;
+}
+
+.landing-page .primary-btn {
+  background-color: #FF9417 !important;
+  border: 1px solid #FF9417 !important;
+}
 
 .primary-btn:link, .primary-btn:visited, .primary-btn:hover, .primary-btn:focus {
   color: #0C0C0F;
@@ -504,6 +518,10 @@ a, a:link, a:visited, a:hover, a:focus {
   height: 24px;
 }
 
+.main-nav .network-name {
+  white-space: nowrap;
+}
+
 /* Menu Toggle Icon -- Toggle Style and Animation*/
 
 .toggle-container{
@@ -561,7 +579,7 @@ a, a:link, a:visited, a:hover, a:focus {
   transition: .1s;
   border-radius: 8px;
   box-shadow: 0 20px 40px black;
-  background-color: #1D2127;
+  background-color: var(--surface-primary-color);
 }
 
 /** Loading **/
@@ -618,7 +636,7 @@ a, a:link, a:visited, a:hover, a:focus {
 
 /* buttons */
 .btn-primary {
-  background: #21272d;
+  background-color: var(--surface-primary-color);
   color: #fff;
   border-radius: 5px;
   border: 0;
@@ -629,7 +647,7 @@ a, a:link, a:visited, a:hover, a:focus {
 }
 
 .btn-primary:hover {
-  background: #292e35;
+  background: var(--surface-primary-alt-color);
 }
 .btn-xl {
   padding: 1rem 2rem;
@@ -681,10 +699,6 @@ table th {
 
 /* HEADER START */
 
-.block-page .block-hash, .transaction-page .block-hash {
-  margin: 0px 0px 50px 0;
-}
-
 .code-button {
   display: inline-block;
   margin-left: 12px;
@@ -696,7 +710,8 @@ table th {
 .code-button .code-button-btn {
   height: 23px;
   width: 30px;
-  background: url(img/icons/copy.png) no-repeat;
+  background: url(img/icons/copy.svg) no-repeat;
+  background-size: contain;
 }
 
 .code-button .code-button-btn img {
@@ -937,7 +952,7 @@ table th {
   width: 140px !important;
   height: 40px;
   border-radius: 5px;
-  background-color: rgba(33, 39, 45, 1);
+  background-color: var(--surface-primary-color);
 }
 
 .prev-next-blocks-btns > div a > div {
@@ -1026,7 +1041,7 @@ table th {
 
 .stats-table > div {
   height: 52px;
-  border-top: 1px solid #2d2f39;
+  border-top: 1px solid var(--surface-secondary-color);
   /* font-size: 16px; */
 }
 
@@ -1042,7 +1057,7 @@ table th {
 }
 
 .stats-table > div:last-child {
-  border-bottom: 1px solid #2d2f39;
+  border-bottom: 1px solid var(--surface-secondary-color);
 }
 
 .stats-table > div > div:nth-child(1) {
@@ -1087,7 +1102,7 @@ table th {
 }
 
 .transaction-box {
-  background-color: #15181C;
+  background-color: var(--surface-primary-color);
   padding: 0 24px;
   border-radius: 5px;
 }
@@ -1143,7 +1158,7 @@ table th {
   max-width: 140px;
   width: 100%;
   height: 50px;
-  background-color: var(--primary-color);
+  background-color: var(--accent-color);
   color: #0C0C0F;
   display: table;
   table-layout: fixed;
@@ -1210,9 +1225,9 @@ table th {
 }
 
 .transaction-box > .ins-and-outs > .vins > div:not(.vin-loading), .transaction-box > .ins-and-outs .vouts > div:not(.vin-loading) {
-  background-color: #21272D;
+  background-color: var(--surface-secondary-color);
   border-radius: 5px;
-  border: 1px solid #21272D;
+  border: 1px solid var(--surface-secondary-color);
   min-height: 46px;
   line-height: 20px;
   font-size: 14px;
@@ -1258,7 +1273,7 @@ table th {
 
 .transaction-box > .ins-and-outs > .vins > div:not(.vin-loading) > .vin-body, .transaction-box > .ins-and-outs > .vins > div:not(.vin-loading) .vout-body, .transaction-box > .ins-and-outs .vouts > div:not(.vin-loading) > .vin-body, .transaction-box > .ins-and-outs .vouts > div:not(.vin-loading) .vout-body {
   word-wrap: break-word;
-  background-color: #15191e;
+  background-color: var(--surface-primary-color);
   padding: 30px 24px;
   border-radius: 0 0 5px 5px;
 }
@@ -1313,7 +1328,7 @@ table th {
 }
 
 .vin.active, .vout.active {
-  background: #3B4147 !important;
+  background: rgba(255, 255, 255, .1) !important;
 }
 .transaction-box > .footer {
   height: 64px;
@@ -1416,7 +1431,7 @@ table th {
 
 .language-selector, .language-submit {
   color: #FFF;
-  background-color: #181818;
+  background-color: var(--background-color);
   border: 1px solid #22242c;
   border-radius: 4px;
 }
@@ -1713,7 +1728,7 @@ body::after{
 }
 
 #Bitcoin .nav-link {
-  border: 1px solid var(--primary-color);
+  border: 1px solid var(--accent-color);
 }
 
 #LiquidTestnet .nav-link,
@@ -1731,7 +1746,7 @@ body::after{
   border-radius: 8px;
   display: flex;
   align-items: center;
-  background-color: #1C1C1C;
+  background-color: var(--surface-primary-color);
   font-family: "Inter";
   font-size: 16px;
   font-weight: normal;
@@ -2263,6 +2278,7 @@ dl.mempool-histogram dd {
   height: 40px;
   padding-left: 65px;
   margin-bottom: 0.25rem;
+  box-sizing: border-box;
 }
 dl.mempool-histogram .label {
   margin-left: 3px;
@@ -2515,7 +2531,7 @@ dl.mempool-histogram .bar:before {
   bottom:0;
   left:0;
   right:0;
-  background: var(--primary-color);
+  background: var(--accent-color);
   height:3px;
   border-radius: 10px;
 }
@@ -2559,7 +2575,7 @@ dl.mempool-histogram .bar:before {
   position: relative;
   min-width: 200px;
   margin-top: 8px;
-  background-color: #1C1C1C;
+  background-color: var(--surface-primary-color);
   border-radius: 8px;
   padding: 12px 16px;
 }
@@ -2580,7 +2596,7 @@ dl.mempool-histogram .bar:before {
   border-radius: 10px;
 }
 
-.network-hover-menu-option-container.bitcoin:hover::before {
+.network-hover-menu-option-container.bitcoin::before {
   background-color: #FF9417;
 }
 
@@ -2662,7 +2678,7 @@ dl.mempool-histogram .bar:before {
   align-items: center;
   width: 100%;
   border-radius: 8px;
-  background-color: #1C1C1C;
+  background-color: var(--surface-primary-color);
   border: 1px solid #525252;
   padding: 12px;
   height: 56px;
@@ -2737,7 +2753,7 @@ a.back-link img{
   padding: 30px 0;
   border-radius: 8px;
   box-shadow: 0 20px 32px 0 rgba(0, 0, 0, 0.08);
-  background: #1D2127;
+  background-color: var(--surface-primary-color);
 }
 
 .stats-table{
@@ -3447,62 +3463,11 @@ a.back-link img{
   line-height: 22px;
 }
 
-
-/******* SHARED TABLE STYLES *******/
-
-.table-header {
-  display: flex;
-  align-items: center;
-}
-
-.table-header-title {
-  margin-left: 16px;
-  color: #B5BDC2;
-  font-family: "Rigid Square", sans-serif;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.new-table-entry {
-  background-color: #26221D;
-  border: 1px solid #26221D;
-}
-
-.table-copy-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: 0;
-  color: #FAFAFA;
-  background: transparent;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.table-copy-button:hover {
-  color: var(--primary-color);
-}
-
-.table-title-row {
-  display: flex;
-  margin-top: 12px;
-  font-size: 10px;
-  padding: 0px 12px;
-}
-
-.table-title-row a {
-  color: white !important;
-}
-
 /******* LATEST BLOCKS TABLE *******/
 
-.block-container {
+.blocks-table {
   margin-top: 40px;
-  background-color: #1c1c1c;
+  background-color: var(--surface-primary-color);
   padding: 24px;
   border-radius: 12px;
 }
@@ -3528,7 +3493,7 @@ a.back-link img{
   max-width: 200px;
   padding: 6px;
   border-radius: 4px;
-  background-color: #181818;
+  background-color: var(--background-color);
   font-size: 11px;
   color: #FAFAFA;
   top: 10px;
@@ -3543,12 +3508,12 @@ a.back-link img{
   width: 52px;
   height: 52px;
   border-radius: 4px;
-  background-color: #262626;
+  background-color: var(--surface-secondary-color)
 }
 
 .table-header-icon-container svg {
   width: 23px;
-  color: var(--primary-color);
+  color: var(--accent-color);
 }
 
 .block-card-header {
@@ -3589,15 +3554,15 @@ a.back-link img{
   padding: 12px;
   box-sizing: border-box;
   border-radius: 4px;
-  background-color: #262626;
-  border: 1px solid #262626;
+  background-color: var(--surface-secondary-color);
+  border: 1px solid var(--surface-secondary-color);
   cursor: pointer;
   color: white;
   transition: background-color .3s;
 }
 
 .blocks-table-card:hover {
-  border: 1px solid var(--primary-color);
+  border: 1px solid var(--accent-color);
 }
 
 .block-icon-container {
@@ -3606,7 +3571,7 @@ a.back-link img{
   align-items: center;
   width: 72px;
   height: 72px;
-  color: var(--primary-color);
+  color: var(--accent-color);
 }
 
 .mobile-block-icon-container {
@@ -3682,7 +3647,7 @@ a.back-link img{
   width: 162px;
   height: 6px;
   border-radius: 13px;
-  background-color: #1C1C1C;
+  background-color: var(--surface-primary-color);
   margin-left: auto;
   margin-top: 6px;
 }
@@ -3690,10 +3655,10 @@ a.back-link img{
 .usage-bar-fill {
   height: 100%;
   border-radius: 13px;
-  background-color: var(--primary-color);
+  background-color: var(--accent-color);
 }
 
-.blocks-table {
+.blocks-table-body {
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -3708,7 +3673,7 @@ a.back-link img{
 
 .transaction-table {
   margin-top: 40px;
-  background-color: #1c1c1c;
+  background-color: var(--surface-primary-color);
   padding: 24px;
   border-radius: 12px;
 }
@@ -3746,8 +3711,8 @@ a.back-link img{
 
 .transaction-table-row {
   display: flex;
-  background-color: #181818;
-  border: 1px solid #181818;
+  background-color: var(--surface-secondary-color);
+  border: 1px solid var(--surface-secondary-color);
   padding: 10px 12px;
   border-radius: 4px;
   font-size: 14px;
@@ -3755,14 +3720,8 @@ a.back-link img{
   transition: background-color .3s;
 }
 
-.blocks-table-card.new-table-entry,
-.transaction-table-row.new-table-entry {
-  background-color: #26221D;
-  border: 1px solid #26221D;
-}
-
 .transaction-table-row:hover {
-  border: 1px solid var(--primary-color);
+  border: 1px solid var(--accent-color);
 }
 
 .transaction-table-row .transaction-table-transaction-id {
@@ -3813,6 +3772,56 @@ a.back-link img{
   border-radius: 18px;
 }
 
+/******* SHARED TABLE STYLES *******/
+
+.table-header {
+  display: flex;
+  align-items: center;
+}
+
+.table-header-title {
+  margin-left: 16px;
+  color: #B5BDC2;
+  font-family: "Rigid Square", sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.table-copy-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  color: #FAFAFA;
+  background: transparent;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.table-copy-button:hover {
+  color: var(--accent-color);
+}
+
+.table-title-row {
+  display: flex;
+  margin-top: 12px;
+  font-size: 10px;
+  padding: 0px 12px;
+}
+
+.table-title-row a {
+  color: white !important;
+}
+
+.new-table-entry {
+  background-color: var(--surface-primary-alt-color);
+  border: 1px solid var(--surface-primary-alt-color);
+}
+
 @media only screen and (max-width: 1100px) {
 
   .block-details {
@@ -3854,7 +3863,7 @@ a.back-link img{
     justify-content: center;
     align-items: center;
     width: 32px;
-    color: var(--primary-color);
+    color: var(--accent-color);
   }
 
   .mobile-block-icon-container svg {