diff --git a/client/src/app.js b/client/src/app.js
index b27463aa..7f85cbe8 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -542,6 +542,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
     })
 
     on('.table-copy-button', 'click', { preventDefault: true }).subscribe(e => e.stopPropagation())
+    on('.tooltip', 'click', { preventDefault: true }).subscribe(e => e.stopPropagation())
 
     on('.toggle-container', 'click').subscribe(({ ownerTarget: burgerMenu }) => {
       burgerMenu.classList.toggle('open-menu');
@@ -564,12 +565,19 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search
     })
 
     document.addEventListener('click', e => {
+      const activeTooltip = document.activeElement
+      if (activeTooltip && activeTooltip.classList.contains('tooltip') && !e.target.closest('.tooltip')) {
+        activeTooltip.blur()
+      }
       if (e.target.closest('.main-nav-container')) return
       closeNetworkMenus()
     })
 
     document.addEventListener('keydown', e => {
-      if (e.key == 'Escape') closeNetworkMenus()
+      if (e.key == 'Escape') {
+        closeNetworkMenus()
+        document.activeElement && document.activeElement.classList.contains('tooltip') && document.activeElement.blur()
+      }
 
       const hasModifier = e.metaKey || e.ctrlKey
       , noExtraModifiers = !e.altKey && !e.shiftKey
diff --git a/client/src/components/info-card.js b/client/src/components/info-card.js
index 9b655ea1..993d0538 100644
--- a/client/src/components/info-card.js
+++ b/client/src/components/info-card.js
@@ -1,3 +1,5 @@
+import { Tooltip } from "./tooltip";
+
 export const InfoCard = ({
   title,
   tooltip,
@@ -16,12 +18,7 @@ export const InfoCard = ({
     <div className="info-card-header">
       {iconSrc ? <img className="menu-logo" alt="" src={iconSrc} /> : null}
       <p className="info-card-title">{title}</p>
-      {tooltip ? (
-        <div className="tooltip">
-          <img alt="" src={tooltip.iconSrc} />
-          <div className="tooltip-dialogue">{tooltip.text}</div>
-        </div>
-      ) : null}
+      {tooltip ? <Tooltip iconSrc={tooltip.iconSrc} text={tooltip.text} /> : null}
       {headerValue !== undefined ? (
         <p className="info-card-header-value">{headerValue}</p>
       ) : null}
diff --git a/client/src/components/tooltip.js b/client/src/components/tooltip.js
new file mode 100644
index 00000000..8e36464e
--- /dev/null
+++ b/client/src/components/tooltip.js
@@ -0,0 +1,10 @@
+export const Tooltip = ({ iconSrc, text }) => (
+  <button
+    type="button"
+    className="tooltip"
+    aria-label={`More information: ${text}`}
+  >
+    <img alt="" src={iconSrc} />
+    <span className="tooltip-dialogue" role="tooltip">{text}</span>
+  </button>
+);
diff --git a/client/src/views/blocks.js b/client/src/views/blocks.js
index f74e6c55..e705b345 100644
--- a/client/src/views/blocks.js
+++ b/client/src/views/blocks.js
@@ -6,6 +6,7 @@ import {
 } from "./util";
 import loader from "../components/loading";
 import { BlockIcon, ClockIcon, CopyIcon } from "../components/icons";
+import { Tooltip } from "../components/tooltip";
 
 const staticRoot = process.env.STATIC_ROOT || "";
 
@@ -86,12 +87,10 @@ export const blks = (blocks, viewMore, { t, ...S }) => (
                         <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>
+                        <Tooltip
+                          iconSrc={`${staticRoot}img/icons/tooltip.svg`}
+                          text="How full this block is."
+                        />
                       </div>
                       <div className="usage-bar">
                         <div
diff --git a/client/src/views/difficulty-adjustment.js b/client/src/views/difficulty-adjustment.js
index 9e253621..b26be218 100644
--- a/client/src/views/difficulty-adjustment.js
+++ b/client/src/views/difficulty-adjustment.js
@@ -1,5 +1,6 @@
 import { ArrowsInSimpleIcon } from "../components/icons";
 import { InfoCard } from "../components/info-card";
+import { Tooltip } from "../components/tooltip";
 import { difficultyPeriod } from "../const";
 
 const staticRoot = process.env.STATIC_ROOT || "";
@@ -198,8 +199,8 @@ const adjustmentStat = (title, value, className = "") => (
   </div>
 );
 
-const statDivider = () => (
-  <div className="difficulty-adjustment-stat-divider"></div>
+const statDivider = (className) => (
+  <div className={["difficulty-adjustment-stat-divider", className || ""].join(" ")}></div>
 );
 
 export default ({
@@ -236,10 +237,10 @@ export default ({
             <ArrowsInSimpleIcon />
           </div>
           <h1 className="table-header-title">Difficulty Adjustment</h1>
-          <div className="tooltip">
-            <img alt="" src={`${staticRoot}img/icons/tooltip.svg`} />
-            <div className="tooltip-dialogue">How hard it is to mine new blocks. Bitcoin retargets mining difficulty every 2,016 blocks to keep blocks near 10 minutes. Current is the projected next change; Previous was the last change.</div>
-          </div>
+          <Tooltip
+            iconSrc={`${staticRoot}img/icons/tooltip.svg`}
+            text="How hard it is to mine new blocks. Bitcoin retargets mining difficulty every 2,016 blocks to keep blocks near 10 minutes. Current is the projected next change; Previous was the last change."
+          />
         </div>
         <div className="difficulty-adjustment-stats">
           {adjustmentStat("AVERAGE BLOCK TIME", averageBlockTime)}
@@ -251,7 +252,7 @@ export default ({
             adjustmentClass(expected),
           )}
 
-          {statDivider()}
+          {statDivider("difficulty-adjustment-stat-divider-middle")}
           {adjustmentStat(
             "PREVIOUS ADJ",
             formatAdjustment(previous),
diff --git a/client/src/views/transactions.js b/client/src/views/transactions.js
index d9876c82..dfc4bd13 100644
--- a/client/src/views/transactions.js
+++ b/client/src/views/transactions.js
@@ -45,24 +45,36 @@ export const transactions = (txs, viewMore, { t, ...S }) => (
             return (
               <a href={`tx/${txOverview.txid}`}>
               <div className={`transaction-table-row ${S.newTxEntries && S.newTxEntries[txOverview.txid] ? "new-table-entry" : ""}`}>
-                <div className="transaction-table-transaction-id">
-                  <p>{truncateTxid(txOverview.txid)}</p>
-                  <div
-                    className="table-copy-button code-button-btn"
-                    role="button"
-                    tabindex="0"
-                    data-clipboardCopy={txOverview.txid}
-                    aria-label={`Copy transaction id ${txOverview.txid}`}
-                  >
-                    <CopyIcon />
+                <div className="transaction-table-field transaction-table-transaction-id">
+                  <div className="transaction-table-field-label">{t`TX ID`}</div>
+                  <div className="transaction-table-field-value">
+                    <p>{truncateTxid(txOverview.txid)}</p>
+                    <div
+                      className="table-copy-button code-button-btn"
+                      role="button"
+                      tabindex="0"
+                      data-clipboardCopy={txOverview.txid}
+                      aria-label={`Copy transaction id ${txOverview.txid}`}
+                    >
+                      <CopyIcon />
+                    </div>
                   </div>
                 </div>
-                <div className="transaction-table-transaction-value">
-                  {txOverview.value ?
-                    formatSat(txOverview.value) : "Confidential"}
+                <div className="transaction-table-field transaction-table-transaction-value">
+                  <div className="transaction-table-field-label">{t`VALUE`}</div>
+                  <div className="transaction-table-field-value">
+                    {txOverview.value ?
+                      formatSat(txOverview.value) : "Confidential"}
+                  </div>
+                </div>
+                <div className="transaction-table-field transaction-table-transaction-size">
+                  <div className="transaction-table-field-label">{t`SIZE`}</div>
+                  <div className="transaction-table-field-value">{`${formatNumber(txOverview.vsize)} vB`}</div>
+                </div>
+                <div className={`transaction-table-field transaction-table-transaction-fee ${feeClass}`}>
+                  <div className="transaction-table-field-label">{t`FEE`}</div>
+                  <div className="transaction-table-field-value">{`${feerate.toFixed(2)} sat/vB`}</div>
                 </div>
-                <div className="transaction-table-transaction-size">{`${formatNumber(txOverview.vsize)} vB`}</div>
-                <div className={`transaction-table-transaction-fee ${feeClass}`}>{`${feerate.toFixed(2)} sat/vB`}</div>
               </div>
               </a>
             );
diff --git a/www/style.css b/www/style.css
index dde0ce11..d6041379 100644
--- a/www/style.css
+++ b/www/style.css
@@ -1193,12 +1193,12 @@ table th {
 }
 
 .transaction-box {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
   margin-top: 24px;
-}
-
-.transaction-box {
   background-color: var(--surface-primary-color);
-  padding: 0 24px;
+  padding: 24px;
   border-radius: 5px;
 }
 
@@ -1213,10 +1213,6 @@ table th {
   width: 75px;
 }
 
-.transaction-box > .header {
-  height: 88px;
-}
-
 .transaction-box > .header {
   display: table;
   table-layout: fixed;
@@ -1425,9 +1421,6 @@ table th {
 .vin.active, .vout.active {
   background: rgba(255, 255, 255, .1) !important;
 }
-.transaction-box > .footer {
-  height: 64px;
-}
 
 .transaction-box > .footer {
   display: table;
@@ -1935,7 +1928,6 @@ body::after{
   .transaction-box .header {
     display: flex;
     flex-direction: column-reverse;
-    height: 150px;
     justify-content: space-evenly;
   }
 
@@ -2117,11 +2109,6 @@ body::after{
 }
 
 @media only screen and (max-width: 500px) {
-
-  .footer {
-    height: auto !important;
-  }
-
   .footer_container_content_row_onion_container {
     margin-top: 10px;
   }
@@ -2868,137 +2855,6 @@ a.back-link img{
   width: 18px;
 }
 
-@media only screen and (max-width: 1100px) {
-  .explorer-container {
-    box-sizing: border-box;
-  }
-
-  .nav-container {
-    flex-wrap: wrap;
-  }
-
-  .main-nav-container {
-    flex-basis: 48px;
-    order: 1;
-    width: 48px;
-  }
-
-  .sub-nav {
-    order: 2;
-    margin-top: 32px;
-  }
-
-  .sub-navbar {
-    margin-top: 32px;
-  }
-
-  .toggle-container{
-    z-index: 100;
-  }
-
-  .toggle-menu .section2 .link-list{
-    margin-right: 20px;
-  }
-
-  .toggle-menu .section1, .toggle-menu .section2{
-    padding: 0 20px;
-  }
-
-/****
-  * Burger Menu for Mobile
-  * A javascript function (toggleIcon) adds a className (open-menu) to toggle the menu
-*****/
-  .toggle-container .toggle-menu{
-    width: 95vw;
-    position: absolute;
-    top: 0px;
-    z-index: 1;
-    transition: none;
-  }
-
-  .toggle-container.open-menu .toggle-menu{
-    visibility: visible;
-    height: auto;
-    padding: 20px 0;
-  }
-
-  .toggle-container.open-menu .burger-icon span{
-    opacity: 0;
-    top: 50%;
-  }
-
-  .toggle-container.open-menu .burger-icon span:first-child {
-    opacity: 1;
-    transform: rotate(45deg);
-  }
-
-  .toggle-container.open-menu .burger-icon span:last-child {
-    opacity: 1;
-    transform: rotate(-45deg);
-  }
-
-  .toggle-container .toggle-menu .toggle-menu-header {
-    justify-content: flex-start;
-  }
-
-  .toggle-menu .section1 .wallets-link{
-    flex-direction: column;
-  }
-
-  .toggle-menu .section1 .wallets-link .wallets-logo{
-    width: auto;
-  }
-
-  .toggle-menu .section1 .wallets-link .store-icons{
-    width: 100%;
-    margin-top: 30px;
-  }
-
-  .navbar-brand{
-    margin-right: 0;
-  }
-
-  .main-nav li{
-    margin-right: 15px;
-  }
-
-  .sub-nav-container{
-    height: auto;
-    flex-direction: column;
-    gap: 24px;
-    align-items: initial;
-  }
-
-  .sub-nav{
-    gap: initial;
-    width: 100%;
-    padding: 0px;
-    justify-content: space-between;
-  }
-
-  .sub-nav a{
-    margin-right: 0;
-  }
-
-  .search-bar{
-    margin: 0;
-    max-width: 100%;
-  }
-
-  .assets-table .assets-table-row{
-    padding:20px;
-  }
-
-  .stats-table{
-    padding: 20px;
-  }
-
-  .search {
-    width: 100%;
-    min-width: auto;
-  }
-}
-
 @media only screen and (max-width: 500px) {
   .toggle-container{
     padding: 30px 0 30px 10px;
@@ -3010,7 +2866,6 @@ a.back-link img{
 
   .sub-nav{
     flex-wrap: wrap;
-    padding-top: auto;
   }
 }
 
@@ -3571,8 +3426,14 @@ a.back-link img{
 }
 
 .tooltip {
+  display: flex;
   position: relative;
   margin-left: 6px;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
   cursor: pointer;
 }
 
@@ -3580,10 +3441,17 @@ a.back-link img{
   width: 13px;
 }
 
-.tooltip:hover .tooltip-dialogue {
+.tooltip:hover .tooltip-dialogue,
+.tooltip:focus .tooltip-dialogue {
   display: initial;
 }
 
+.tooltip:focus-visible {
+  border-radius: 2px;
+  outline: 2px solid var(--accent-color);
+  outline-offset: 3px;
+}
+
 .tooltip-dialogue {
   display: none;
   position: absolute;
@@ -3597,9 +3465,23 @@ a.back-link img{
   top: 10px;
   left: 15px;
   text-align: left;
+  white-space: normal;
+  overflow-wrap: anywhere;
   z-index: 999;
 }
 
+@keyframes tooltip-mobile-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .table-header-icon-container {
   display: flex;
   justify-content: center;
@@ -3818,6 +3700,16 @@ a.back-link img{
   transition: background-color .3s;
 }
 
+.transaction-table-field-label {
+  display: none;
+}
+
+.transaction-table-row .transaction-table-transaction-id .transaction-table-field-value {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .transaction-table-row:hover {
   border: 1px solid var(--accent-color);
 }
@@ -3844,7 +3736,7 @@ a.back-link img{
 }
 
 .transaction-table-row .transaction-table-transaction-fee.warning {
-  color: #00C3FF;
+  color: white;
 }
 
 .transaction-table-row .transaction-table-transaction-fee.danger {
@@ -3875,6 +3767,7 @@ a.back-link img{
 .table-header {
   display: flex;
   align-items: center;
+  white-space: nowrap;
 }
 
 .table-header-title {
@@ -3924,55 +3817,6 @@ a.back-link img{
   margin-top: var(--page-gap);
 }
 
-@media only screen and (max-width: 1100px) {
-
-  .block-details {
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .block-card-header {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    height: fit-content;
-    width: 100%;
-  }
-
-  .block-usage {
-    width: 100%;
-  }
-
-  .usage-bar, .usage-number {
-    margin-left: initial;
-  }
-
-  .usage-bar {
-    width: initial;
-  }
-
-  .block-card-body {
-    margin-top: 0px;
-    width: initial;
-  }
-
-  .block-icon-container {
-    display: none;
-  }
-
-  .mobile-block-icon-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 32px;
-    color: var(--accent-color);
-  }
-
-  .mobile-block-icon-container svg {
-    width: 14px;
-  }
-}
-
 .overview {
   margin-top: 24px;
   display: flex;
@@ -4159,6 +4003,10 @@ a.back-link img{
   color: #B5BDC2;
 }
 
+.difficulty-adjustment-stat-value {
+  font-size: 14px;
+}
+
 .difficulty-adjustment-stat-value.success {
   color: #17C964;
 }
@@ -4177,3 +4025,259 @@ a.back-link img{
 .difficulty-adjustment-metric-card {
   flex: 1;
 }
+
+@media only screen and (max-width: 1100px) {
+  .explorer-container {
+    box-sizing: border-box;
+  }
+
+  .nav-container {
+    flex-wrap: wrap;
+  }
+
+  .main-nav-container {
+    flex-basis: 48px;
+    order: 1;
+    width: 48px;
+  }
+
+  .sub-nav {
+    order: 2;
+    margin-top: 32px;
+    gap: 30px;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .sub-navbar {
+    margin-top: 32px;
+  }
+
+  .toggle-container{
+    z-index: 100;
+  }
+
+  .toggle-menu .section2 .link-list{
+    margin-right: 20px;
+  }
+
+  .toggle-menu .section1, .toggle-menu .section2{
+    padding: 0 20px;
+  }
+
+/****
+  * Burger Menu for Mobile
+  * A javascript function (toggleIcon) adds a className (open-menu) to toggle the menu
+*****/
+  .toggle-container .toggle-menu{
+    width: 95vw;
+    position: absolute;
+    top: 0px;
+    z-index: 1;
+    transition: none;
+  }
+
+  .toggle-container.open-menu .toggle-menu{
+    visibility: visible;
+    height: auto;
+    padding: 20px 0;
+  }
+
+  .toggle-container.open-menu .burger-icon span{
+    opacity: 0;
+    top: 50%;
+  }
+
+  .toggle-container.open-menu .burger-icon span:first-child {
+    opacity: 1;
+    transform: rotate(45deg);
+  }
+
+  .toggle-container.open-menu .burger-icon span:last-child {
+    opacity: 1;
+    transform: rotate(-45deg);
+  }
+
+  .toggle-container .toggle-menu .toggle-menu-header {
+    justify-content: flex-start;
+  }
+
+  .toggle-menu .section1 .wallets-link{
+    flex-direction: column;
+  }
+
+  .toggle-menu .section1 .wallets-link .wallets-logo{
+    width: auto;
+  }
+
+  .toggle-menu .section1 .wallets-link .store-icons{
+    width: 100%;
+    margin-top: 30px;
+  }
+
+  .navbar-brand{
+    margin-right: 0;
+  }
+
+  .main-nav li{
+    margin-right: 15px;
+  }
+
+  .sub-nav-container{
+    height: auto;
+    flex-direction: column;
+    gap: 24px;
+    align-items: initial;
+  }
+
+  .sub-nav a{
+    margin-right: 0;
+  }
+
+  .search-bar{
+    margin: 0;
+    max-width: 100%;
+  }
+
+  .assets-table .assets-table-row{
+    padding:20px;
+  }
+
+  .stats-table{
+    padding: 20px;
+  }
+
+  .search {
+    width: 100%;
+    min-width: auto;
+  }
+
+  .tooltip-dialogue {
+    position: fixed;
+    top: auto;
+    right: 24px;
+    bottom: 24px;
+    left: 24px;
+    width: auto;
+    max-width: none;
+    padding: 12px;
+    border: 1px solid var(--accent-color);
+    animation: tooltip-mobile-enter .2s ease-out;
+  }
+
+  .transaction-table .table-title-row {
+    display: none;
+  }
+
+  .transaction-table-row {
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .transaction-table-row .transaction-table-field {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    text-align: right;
+  }
+
+  .transaction-table-field-label {
+    display: block;
+    color: #B5BDC2;
+    font-size: 10px;
+    font-weight: 400;
+    text-align: left;
+  }
+
+  .transaction-table-field-value {
+    min-width: 0;
+    text-align: right;
+    font-size: 10px;
+  }
+
+  .transaction-table-transaction-id p {
+    font-size: 10px;
+  }
+
+  .transaction-table-field-value .table-copy-button {
+    display: none;
+  }
+
+  .block-number {
+    font-size: 16px;
+  }
+
+  .block-card-top-header .table-copy-button,
+  .block-card-top-header .latest-block-badge {
+    display: none;
+  }
+
+  .block-details {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .block-card-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: fit-content;
+    width: 100%;
+  }
+
+  .block-usage {
+    width: 100%;
+  }
+
+  .usage-bar, .usage-number {
+    margin-left: initial;
+  }
+
+  .usage-bar {
+    width: initial;
+  }
+
+  .block-card-body {
+    margin-top: 0px;
+    width: initial;
+  }
+
+  .block-icon-container {
+    display: none;
+  }
+
+  .mobile-block-icon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    color: var(--accent-color);
+  }
+
+  .mobile-block-icon-container svg {
+    width: 14px;
+  }
+
+  .difficulty-adjustment-stats {
+    flex-wrap: wrap;
+    row-gap: 20px;
+  }
+
+  .difficulty-adjustment-stat {
+    flex: initial;
+    width: 49%;
+  }
+
+  .difficulty-adjustment-stat-divider-middle {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 1100px) and (prefers-reduced-motion: reduce) {
+  .tooltip-dialogue {
+    animation: none;
+  }
+}