diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
index ed2beff80..522359607 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
@@ -21,26 +21,26 @@
       </tr>
       <tr *ngIf="accelerationInfo.fee">
         <td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
-        <td class="value">{{ accelerationInfo.fee | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
+        <td class="value">{{ accelerationInfo.fee | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
       </tr>
       <tr *ngIf="accelerationInfo.bidBoost >= 0 || accelerationInfo.feeDelta">
         <td class="label" i18n="transaction.out-of-band-fees">Out-of-band fees</td>
         @if (accelerationInfo.status === 'accelerated') {
-          <td class="value oobFees">{{ accelerationInfo.feeDelta | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
+          <td class="value oobFees">{{ accelerationInfo.feeDelta | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
         } @else {
-          <td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
+          <td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
         }
       </tr>
       <tr *ngIf="accelerationInfo.fee && accelerationInfo.weight">
         @if (accelerationInfo.status === 'seen') {
           <td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
-          <td class="value"><app-fee-rate [fee]="accelerationInfo.fee" [weight]="accelerationInfo.weight"></app-fee-rate></td>
+          <td class="value"><app-fee-rate [fee]="accelerationInfo.fee" [weight]="accelerationInfo.weight" [unitStyle]="'color: #ffffff66'"></app-fee-rate></td>
         } @else if (accelerationInfo.status === 'accelerated' || accelerationInfo.status === 'mined') {
           <td class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
           @if (accelerationInfo.status === 'accelerated') {
-            <td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.feeDelta || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
+            <td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.feeDelta || 0)" [weight]="accelerationInfo.weight" [unitStyle]="'color: #ffffff66'"></app-fee-rate></td>
           } @else {
-            <td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.bidBoost || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
+            <td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.bidBoost || 0)" [weight]="accelerationInfo.weight" [unitStyle]="'color: #ffffff66'"></app-fee-rate></td>
           }
         }
       </tr>
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
index 9dcaa65b4..1ad826621 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
@@ -1,7 +1,7 @@
 .acceleration-tooltip {
   position: fixed;
   z-index: 3;
-  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+	background: color-mix(in srgb, #11131f 95%, transparent);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: var(--tooltip-grey);
diff --git a/frontend/src/app/components/amount/amount.component.html b/frontend/src/app/components/amount/amount.component.html
index ac469939f..56a8d46b1 100644
--- a/frontend/src/app/components/amount/amount.component.html
+++ b/frontend/src/app/components/amount/amount.component.html
@@ -23,7 +23,7 @@
   <ng-template #default>
     @if ((viewAmountMode$ | async) === 'btc' || (viewAmountMode$ | async) === 'fiat' || ignoreViewMode === true) {
       &lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
-      <span class="symbol">
+      <span class="symbol" [style]="unitStyle">
         <ng-container *ngTemplateOutlet="prefix"></ng-container>BTC
       </span>
     } @else {
@@ -32,7 +32,7 @@
       } @else { 
         &lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis | amountShortener : (satoshis < 1000 && satoshis > -1000 ? 0 : 1) : undefined : true }}
       }
-      <span class="symbol">
+      <span class="symbol" [style]="unitStyle">
         <ng-container *ngTemplateOutlet="prefix"></ng-container>sats
       </span>
     }
diff --git a/frontend/src/app/components/amount/amount.component.ts b/frontend/src/app/components/amount/amount.component.ts
index 2ad0c0fc5..817f5741a 100644
--- a/frontend/src/app/components/amount/amount.component.ts
+++ b/frontend/src/app/components/amount/amount.component.ts
@@ -27,6 +27,7 @@ export class AmountComponent implements OnInit, OnDestroy {
   @Input() forceBtc: boolean = false;
   @Input() ignoreViewMode: boolean = false;
   @Input() forceBlockConversion: boolean = false; // true = displays fiat price as 0 if blockConversion is undefined instead of falling back to conversions
+  @Input() unitStyle: any;
 
   constructor(
     private stateService: StateService,
diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
index ac919c1cd..9443c7fe6 100644
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
@@ -36,32 +36,32 @@
       </tr>
       <tr>
         <td class="label" i18n="dashboard.latest-transactions.amount">Amount</td>
-        <td class="value"><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true"></app-amount></td>
+        <td class="value"><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true" [unitStyle]="{color: '#ffffff66'}"></app-amount></td>
       </tr>
       <tr>
         <td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
-        <td class="value">{{ fee | number }} <span class="symbol" i18n="shared.sats">sats</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
+        <td class="value">{{ fee | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
       </tr>
       <tr>
         <td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
         <td class="value">
-          <app-fee-rate [fee]="feeRate"></app-fee-rate>
+          <app-fee-rate [fee]="feeRate" [unitStyle]="'color: #ffffff66'"></app-fee-rate>
         </td>
       </tr>
       <tr *ngIf="hasEffectiveRate && effectiveRate != null">
         <td *ngIf="!this.acceleration" class="label" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
         <td *ngIf="this.acceleration" class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
         <td class="value" [class.oobFees]="this.acceleration">
-          <app-fee-rate [fee]="effectiveRate"></app-fee-rate>
+          <app-fee-rate [fee]="effectiveRate" [unitStyle]="'color: #ffffff66'"></app-fee-rate>
         </td>
       </tr>
       <tr *only-vsize>
         <td class="label" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
-        <td class="value" [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
+        <td class="value fixed-unit-color" [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
       </tr>
       <tr *only-weight>
         <td class="label" i18n="transaction.weight|Transaction Weight">Weight</td>
-        <td class="value" [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
+        <td class="value fixed-unit-color" [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
       </tr>
       <tr *ngIf="auditEnabled && tx && tx.status && tx.status.length">
         <td class="label" i18n="transaction.audit-status">Audit status</td>
diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
index 0b2c05948..ac362fb75 100644
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
@@ -1,6 +1,6 @@
 .block-overview-tooltip {
   position: absolute;
-	background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+	background: color-mix(in srgb, #11131f 95%, transparent);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: var(--tooltip-grey);
@@ -13,12 +13,18 @@
   max-width: 400px;
   pointer-events: none;
   z-index: 11;
+  --link-color: #1bd8f4;
+  --link-hover-color: #09a3ba;
 
   &.clickable {
     pointer-events: all;
   }
 }
 
+.block-overview-tooltip ::ng-deep .fixed-unit-color .symbol {
+  color: #ffffff66;
+}
+
 th, td {
   &.label {
     width: 30%;
diff --git a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
index e4fd989af..972a46420 100644
--- a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
@@ -1,6 +1,6 @@
 .difficulty-tooltip {
   position: fixed;
-  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+  background: color-mix(in srgb, #11131f 95%, transparent);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: var(--tooltip-grey);
diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html
index d5119201c..d1e321b9f 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html
@@ -19,15 +19,15 @@
       </tr>
       <tr>
         <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
-        <td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
+        <td>{{ rbfInfo.tx.fee | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
       </tr>
       <tr *only-vsize>
         <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
-        <td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
+        <td class="fixed-unit-color" [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
       </tr>
       <tr *only-weight>
         <td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
-        <td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize * 4 | vbytes: 2)"></td>
+        <td class="fixed-unit-color" [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize * 4 | vbytes: 2)"></td>
       </tr>
       <tr>
         <td class="td-width" i18n="transaction.status|Transaction Status">Status</td>
diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
index eeb40a52d..733e03e24 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
@@ -1,7 +1,7 @@
 .rbf-tooltip {
   position: fixed;
   z-index: 3;
-  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+	background: color-mix(in srgb, #11131f 95%, transparent);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: var(--tooltip-grey);
@@ -11,6 +11,8 @@
   padding: 10px 15px;
   text-align: left;
   pointer-events: none;
+  --link-color: #1bd8f4;
+  --link-hover-color: #09a3ba;
 
   .badge {
     margin-right: 1em;
@@ -20,6 +22,10 @@
   }
 }
 
+.rbf-tooltip ::ng-deep .symbol {
+  color: #ffffff66;
+}
+
 .td-width {
   padding-right: 10px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss b/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss
index 18d212b6e..1835a4ac4 100644
--- a/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss
+++ b/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss
@@ -222,7 +222,7 @@
 
 .supply-tooltip {
   position: fixed;
-  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+  background: color-mix(in srgb, #11131f 95%, transparent);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: var(--tooltip-grey);
diff --git a/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss b/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss
index 0d1972ca6..ecf5a7661 100644
--- a/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss
+++ b/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss
@@ -215,7 +215,7 @@
 
 .verify-tooltip {
   position: fixed;
-  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+  background: color-mix(in srgb, #11131f 95%, transparent);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: var(--tooltip-grey);
diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html
index b75fe9319..0996fa4b4 100644
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html
@@ -29,7 +29,7 @@
   <ng-template #pegout>
     <ng-container *ngIf="line.pegout; else normal">
       <p *ngIf="!isConnector">Peg Out</p>
-      <p *ngIf="line.displayValue != null"><app-amount [satoshis]="line.displayValue"></app-amount></p>
+      <p *ngIf="line.displayValue != null"><app-amount [satoshis]="line.displayValue" [unitStyle]="'color: #ffffff66'"></app-amount></p>
       <p class="address">
         <app-truncate [text]="line.pegout"></app-truncate>
       </p>
@@ -106,7 +106,7 @@
           </ng-template>
         </ng-template>
         <ng-template #defaultOutput>
-          <app-amount [blockConversion]="isConnector ? blockConversions[line?.status?.block_time] : blockConversions[line?.timestamp]" [satoshis]="line.displayValue" [forceBlockConversion]="isConnector && line?.status?.block_time"></app-amount>
+          <app-amount [blockConversion]="isConnector ? blockConversions[line?.status?.block_time] : blockConversions[line?.timestamp]" [satoshis]="line.displayValue" [forceBlockConversion]="isConnector && line?.status?.block_time" [unitStyle]="'color: #ffffff66'"></app-amount>
         </ng-template>
       </p>
       <p *ngIf="line.type !== 'fee' && line.address" class="address">
diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
index dfb429096..9875e57a4 100644
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
+++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
@@ -1,6 +1,6 @@
 .bowtie-graph-tooltip {
   position: absolute;
-  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
+	background: color-mix(in srgb, #11131f 95%, transparent);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: var(--tooltip-grey);