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 fb4549c50..ed2beff80 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
@@ -48,12 +48,14 @@
         <td class="label" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
         <td class="value" *ngIf="accelerationInfo.pools">
           <ng-container *ngFor="let pool of accelerationInfo.pools; let i = index;">
-            <img *ngIf="accelerationInfo.poolsData[pool]" 
-              class="pool-logo" 
-              [style.opacity]="accelerationInfo?.minedByPoolUniqueId && pool !== accelerationInfo?.minedByPoolUniqueId ? '0.3' : '1'"
-              [src]="'/resources/mining-pools/' + accelerationInfo.poolsData[pool].slug + '.svg'" 
-              onError="this.src = '/resources/mining-pools/default.svg'" 
-              [alt]="'Logo of ' + pool.name + ' mining pool'">
+            <app-mining-pool
+              *ngIf="accelerationInfo.poolsData[pool]"
+              [slug]="accelerationInfo.poolsData[pool].slug"
+              [name]="accelerationInfo.poolsData[pool].name"
+              [showName]="false"
+              [logoStyle]="'width:22px;height:22px;margin-right:4px;margin-bottom:4px;opacity:' + (accelerationInfo?.minedByPoolUniqueId && pool !== accelerationInfo?.minedByPoolUniqueId ? '0.3' : '1') + ';'"
+              [forceStandardLogo]="true"
+              ></app-mining-pool>
             <br *ngIf="i % 6 === 5">
           </ng-container>
         </td>
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 a8c4cd5cf..9dcaa65b4 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
@@ -26,15 +26,6 @@
     vertical-align: top;
   }
 
-  .pool-logo {
-    width: 22px;
-    height: 22px;
-    position: relative;
-    top: -1px;
-    margin-right: 4px;
-    margin-bottom: 4px;
-  }
-
   .oobFees {
     color: #905cf4;
   }
diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
index 47d653f78..e6763a9a8 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
@@ -52,9 +52,9 @@
             </td>
             <td class="pool text-end" *ngIf="!this.widget">
               @if (acceleration.minedByPoolUniqueId && pools[acceleration.minedByPoolUniqueId]) {
-                <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pools[acceleration.minedByPoolUniqueId].slug]" class="badge" style="color: #FFF;padding:0;">
-                  <img class="pool-logo" [src]="'/resources/mining-pools/' + pools[acceleration.minedByPoolUniqueId].slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pools[acceleration.minedByPoolUniqueId].name + ' mining pool'">
-                  {{ pools[acceleration.minedByPoolUniqueId].name }}
+                <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pools[acceleration.minedByPoolUniqueId].slug]" class="badge" style="padding:0;">
+                  <app-mining-pool [slug]="pools[acceleration.minedByPoolUniqueId].slug" [name]="pools[acceleration.minedByPoolUniqueId].name" [logoStyle]="'width:18px;height:18px;'"
+                  ></app-mining-pool>
                 </a>
               } @else {
                 ~
diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
index 9d695ce38..e3f235452 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
@@ -83,14 +83,6 @@ tr, td, th {
   @media (max-width: 700px) {
     display: none;
   }
-
-  .pool-logo {
-    width: 18px;
-    height: 18px;
-    position: relative;
-    top: -1px;
-    margin-right: 2px;
-  }
 }
 
 .status {
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index b18db6584..be0a094ac 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -195,8 +195,7 @@
                 {{ block.extras.pool.minerNames[1] }}
               }
             </span>
-            <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
-            {{ block.extras.pool.name }}
+            <app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.name"></app-mining-pool>
           </a>
         </td>
         <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
@@ -254,8 +253,7 @@
           <h3 class="block-subtitle" *ngIf="!isMobile">
             <ng-container i18n="block.stale-block">Stale Block</ng-container>
             @if (block?.extras?.pool) {
-              <img class="pool-logo large" [src]="'/resources/mining-pools/' + block?.extras?.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block?.extras?.pool.name + ' mining pool'">
-              <span class="pool-name">{{ block?.extras?.pool.name }}</span>
+              <app-mining-pool [slug]="block?.extras?.pool?.slug" [name]="block?.extras?.pool?.name" [logoStyle]="'width:30px;height:30px;margin: 0 .3em;'"></app-mining-pool>
             }
           </h3>
         } @else {
@@ -288,8 +286,7 @@
             } @else {
               <ng-container i18n="block.stale-block">Winning Block</ng-container>
               @if (canonicalBlock?.extras?.pool) {
-                <img class="pool-logo large" [src]="'/resources/mining-pools/' + canonicalBlock?.extras?.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + canonicalBlock?.extras?.pool.name + ' mining pool'">
-                <span class="pool-name">{{ canonicalBlock?.extras?.pool.name }}</span>
+                <app-mining-pool [slug]="canonicalBlock?.extras?.pool?.slug" [name]="canonicalBlock?.extras?.pool?.name" [showName]="true" [logoStyle]="'width:30px;height:30px;margin: 0 .3em;'"></app-mining-pool>
               }
             }
           } @else {
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index 2e9bfc575..99be290b2 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -86,20 +86,6 @@ h1 {
   vertical-align: top;
 }
 
-.pool-logo {
-  width: 25px;
-  height: 25px;
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-
-  &.large {
-    width: 30px;
-    height: 30px;
-    margin: 0 0.3em;
-  }
-}
-
 .row {
 	flex-direction: column;
 	@media (min-width: 768px) {
@@ -292,14 +278,6 @@ h1 {
   }
 }
 
-.pool-logo {
-  width: 15px;
-  height: 15px;
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-}
-
 .stale-block-alert {
   border-radius: 0;
   margin-bottom: 0;
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
index d97ece4ff..fee6516aa 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -79,11 +79,11 @@
         <div class="animated" *ngIf="block.extras?.pool != undefined && showPools">
           <a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge" [class.miner-name]="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
             <ng-container *ngIf="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool">
-              <img [ngbTooltip]="block.extras.pool.name" class="pool-logo faded" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
+              <app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.minerNames[1]" [logoStyle]="'filter: grayscale(100%) brightness(1.5);'" [showName]="false"></app-mining-pool>
               {{ block.extras.pool.minerNames[1] }}
             </ng-container>
             <ng-template #centralisedPool>
-              <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'"> {{ block.extras.pool.name }}
+              <app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.name"></app-mining-pool>
             </ng-template>
           </a>
         </div>
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
index e53d2e7ae..38d7e5d51 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -257,18 +257,6 @@
   }
 }
 
-.pool-logo {
-  width: 15px;
-  height: 15px;
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-}
-
-.pool-logo.faded {
-  filter: grayscale(100%) brightness(1.5);
-}
-
 .animated {
   transition: all 0.15s ease-in-out;
   white-space: nowrap;
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index 56a68692a..737e636c0 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -35,16 +35,12 @@
           <td  *ngIf="isMempoolModule" class="pool text-start" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
             <div *ngIf="indexingAvailable" class="tooltip-custom">
               <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
-                <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
-                  onError="this.onerror=null; this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
-                <span class="pool-name">{{ block.extras.pool.name }}</span>
+                <app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.name" [logoStyle]="'width:22px;height:22px;'" [textClass]="'truncate'"></app-mining-pool>
               </a>
               <span *ngIf="!widget" class="tooltiptext badge bg-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
             </div>
             <div *ngIf="!indexingAvailable" class="tooltip-custom">
-              <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
-                onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
-              <span class="pool-name">{{ block.extras.pool.name }}</span>
+                <app-mining-pool [slug]="block.extras.pool.slug" [name]="block.extras.pool.name" [logoStyle]="'width:22px;height:22px;'" [textClass]="'truncate'"></app-mining-pool>
               <span *ngIf="!widget" class="tooltiptext badge bg-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
             </div>
           </td>
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss
index 6c47eb0bf..6c4ccb426 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -73,16 +73,6 @@ tr, td, th {
     width: 60%;
   }
 }
-.pool-name {
-  display: inline-block;
-  vertical-align: text-top;
-  padding-left: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 160px;
-}
-
 .height {
   width: 8%;
 }
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index 84bd949bb..69682b560 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -109,7 +109,7 @@
         <tr *ngFor="let pool of miningStats.pools">
           <td class="d-none d-md-table-cell">{{ pool.rank }}</td>
           <td class="text-end">
-            <img width="25" height="25" src="{{ pool.logo }}" [alt]="pool.name + ' mining pool logo'" onError="this.onerror=null; this.src = '/resources/mining-pools/default.svg'">
+            <app-mining-pool [slug]="pool.slug" [name]="pool.name" [showName]="false"[logoStyle]="'width:25px;height:25px;'"></app-mining-pool>
           </td>
           <td class="pool-name"><a [routerLink]="[('/mining/pool/' + pool.slug) | relativeUrl]">{{ pool.name }}</a></td>
           <td class="" *ngIf="'24h' === this.miningWindowPreference">{{ pool.lastEstimatedHashrate | number: '1.2-2' }} {{ miningStats.miningUnits.hashrateUnit }}</td>
diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index 85105a058..7135e5a21 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -5,8 +5,7 @@
   <!-- Pool overview -->
   <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
     <div style="display:flex" class="mb-3">
-      <img width="50" height="50" src="{{ poolStats['logo'] }}" [alt]="poolStats.pool.name + ' mining pool logo'"
-        onError="this.onerror=null; this.src = '/resources/mining-pools/default.svg'" class="me-3">
+      <app-mining-pool [slug]="poolStats.pool.slug" [name]="poolStats.pool.name" [showName]="false" [logoStyle]="'width:50px;height:50px;'" [logoClass]="'me-3'"></app-mining-pool>
       <h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
     </div>
 
@@ -108,6 +107,7 @@
                       </tr>
                     </thead>
                     <tbody>
+                      <tr>
                       <td class="text-center" style="padding: 0.1rem;"><app-amount [satoshis]="poolStats.totalReward" digitsInfo="1.0-0" [noFiat]="true" [ignoreViewMode]="true"></app-amount></td>
                       <td class="text-center" style="padding: 0.1rem;">{{ poolStats.estimatedHashrate | amountShortener : 3 : 'H/s' : false : true }}</td>
                       <td class="text-center" style="padding: 0.1rem;" *ngIf="auditAvailable; else emptyTd"><span class="health-badge badge" [class.bg-success]="poolStats.avgBlockHealth >= 99"
@@ -117,6 +117,7 @@
                             <span class="health-badge badge bg-secondary" i18n="unknown">Unknown</span>
                           </ng-template>
                       </td>
+                      </tr>
                     </tbody>
                   </table>
                 </td>
@@ -134,12 +135,14 @@
                       </tr>
                     </thead>
                     <tbody>
+                      <tr>
                       <td class="text-center" style="padding: 0.1rem;">{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                         poolStats.blockShare['24h'], this.locale, '1.0-0') }}%)</td>
                       <td class="text-center" style="padding: 0.1rem;">{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                         poolStats.blockShare['1w'], this.locale, '1.0-0') }}%)</td>
                       <td class="text-center" style="padding: 0.1rem;">{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                         poolStats.blockShare['all'], this.locale, '1.0-0') }}%)</td>
+                      </tr>
                     </tbody>
                   </table>
                 </td>
@@ -157,7 +160,9 @@
                       </tr>
                     </thead>
                     <tbody>
+                      <tr>
                       <td *ngFor="let total of oob" class="text-center clip" style="padding: 0.1rem;"><app-amount [satoshis]="total.cost" [digitsInfo]="isMobile() ? '1.2-4' : '1.8-8'" [ignoreViewMode]="true"></app-amount></td>
+                      </tr>
                     </tbody>
                   </table>
                 </td>
@@ -491,6 +496,7 @@
                       </tr>
                     </thead>
                     <tbody>
+                      <tr>
                       <td class="text-center" style="padding: 0.1rem;">
                         <div class="skeleton-loader data"></div>
                       </td>
@@ -500,6 +506,7 @@
                       <td class="text-center" style="padding: 0.1rem;" *ngIf="auditAvailable; else emptyTd">
                         <div class="skeleton-loader data"></div>
                       </td>
+                      </tr>
                     </tbody>
                   </table>
                 </td>
@@ -516,6 +523,7 @@
                       </tr>
                     </thead>
                     <tbody>
+                      <tr>
                       <td class="text-center" style="padding: 0.1rem;">
                         <div class="skeleton-loader data"></div>
                       </td>
@@ -525,6 +533,7 @@
                       <td class="text-center" style="padding: 0.1rem;" *ngIf="auditAvailable; else emptyTd">
                         <div class="skeleton-loader data"></div>
                       </td>
+                      </tr>
                     </tbody>
                   </table>
                 </td>
@@ -542,6 +551,7 @@
                       </tr>
                     </thead>
                     <tbody>
+                      <tr>
                       <td class="text-center" style="padding: 0.1rem;">
                         <div class="skeleton-loader data"></div>
                       </td>
@@ -551,6 +561,7 @@
                       <td class="text-center" style="padding: 0.1rem;">
                         <div class="skeleton-loader data"></div>
                       </td>
+                      </tr>
                     </tbody>
                   </table>
                 </td>
@@ -567,6 +578,7 @@
                       </tr>
                     </thead>
                     <tbody>
+                      <tr>
                       <td class="text-center" style="padding: 0.1rem;">
                         <div class="skeleton-loader data"></div>
                       </td>
@@ -576,6 +588,7 @@
                       <td class="text-center" style="padding: 0.1rem;">
                         <div class="skeleton-loader data"></div>
                       </td>
+                      </tr>
                     </tbody>
                   </table>
                 </td>
diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.html b/frontend/src/app/components/search-form/search-results/search-results.component.html
index 400b9a1c3..22e823265 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.html
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.html
@@ -47,8 +47,7 @@
     <div class="card-title" i18n="search.mining-pools">Mining Pools</div>
     <ng-template ngFor [ngForOf]="results.pools" let-pool let-i="index">
       <button (click)="clickItem(results.hashQuickMatch + results.addresses.length + i)" [class.active]="results.hashQuickMatch + results.addresses.length + i === activeIdx" [class.inactive]="!pool.active" type="button" role="option" class="dropdown-item">
-        <img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
-        <ngb-highlight [result]="pool.name" [term]="results.searchText"></ngb-highlight>
+        <app-mining-pool [slug]="pool.slug" [name]="pool.name" [searchText]="results.searchText" [logoStyle]="'margin-right:10px;'"></app-mining-pool>
       </button>
     </ng-template>
   </ng-template>
diff --git a/frontend/src/app/components/stale-list/stale-list.component.html b/frontend/src/app/components/stale-list/stale-list.component.html
index eb5e754d2..6002176b7 100644
--- a/frontend/src/app/components/stale-list/stale-list.component.html
+++ b/frontend/src/app/components/stale-list/stale-list.component.html
@@ -57,11 +57,11 @@
               <div class="animated" *ngIf="chainTip.stale?.extras?.pool != undefined">
                 <a class="badge" [class.miner-name]="chainTip.stale.extras.pool.minerNames?.length > 1 && chainTip.stale.extras.pool.minerNames[1] != ''" [routerLink]="[('/mining/pool/' + chainTip.stale.extras.pool.slug) | relativeUrl]">
                   <ng-container *ngIf="chainTip.stale.extras.pool.minerNames?.length > 1 && chainTip.stale.extras.pool.minerNames[1] != ''; else staleBlockCentralisedPool">
-                    <img [ngbTooltip]="chainTip.stale.extras.pool.name" class="pool-logo faded" [src]="'/resources/mining-pools/' + chainTip.stale.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + chainTip.stale.extras.pool.name + ' mining pool'">
+                    <app-mining-pool [slug]="chainTip.stale.extras.pool.slug" [name]="chainTip.stale.extras.pool.name" [logoStyle]="'filter: grayscale(100%) brightness(1.5);'" [showName]="false"></app-mining-pool>
                     {{ chainTip.stale.extras.pool.minerNames[1] }}
                   </ng-container>
                   <ng-template #staleBlockCentralisedPool>
-                    <img class="pool-logo" [src]="'/resources/mining-pools/' + chainTip.stale.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + chainTip.stale.extras.pool.name + ' mining pool'"> {{ chainTip.stale.extras.pool.name }}
+                    <app-mining-pool [slug]="chainTip.stale.extras.pool.slug" [name]="chainTip.stale.extras.pool.name"></app-mining-pool>
                   </ng-template>
                 </a>
               </div>
@@ -103,11 +103,11 @@
               <div class="animated" *ngIf="chainTip.canonical?.extras?.pool != undefined">
                 <a class="badge" [class.miner-name]="chainTip.canonical.extras.pool.minerNames?.length > 1 && chainTip.canonical.extras.pool.minerNames[1] != ''" [routerLink]="[('/mining/pool/' + chainTip.canonical.extras.pool.slug) | relativeUrl]">
                   <ng-container *ngIf="chainTip.canonical.extras.pool.minerNames?.length > 1 && chainTip.canonical.extras.pool.minerNames[1] != ''; else canonicalBlockCentralisedPool">
-                    <img [ngbTooltip]="chainTip.canonical.extras.pool.name" class="pool-logo faded" [src]="'/resources/mining-pools/' + chainTip.canonical.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + chainTip.canonical.extras.pool.name + ' mining pool'">
+                    <app-mining-pool [slug]="chainTip.canonical.extras.pool.slug" [name]="chainTip.canonical.extras.pool.name" [logoStyle]="'filter: grayscale(100%) brightness(1.5);'" [showName]="false"></app-mining-pool>
                     {{ chainTip.canonical.extras.pool.minerNames[1] }}
                   </ng-container>
                   <ng-template #canonicalBlockCentralisedPool>
-                    <img class="pool-logo" [src]="'/resources/mining-pools/' + chainTip.canonical.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + chainTip.canonical.extras.pool.name + ' mining pool'"> {{ chainTip.canonical.extras.pool.name }}
+                    <app-mining-pool [slug]="chainTip.canonical.extras.pool.slug" [name]="chainTip.canonical.extras.pool.name"></app-mining-pool>
                   </ng-template>
                 </a>
               </div>
diff --git a/frontend/src/app/components/stale-list/stale-list.component.scss b/frontend/src/app/components/stale-list/stale-list.component.scss
index 148ce7c40..d1c910476 100644
--- a/frontend/src/app/components/stale-list/stale-list.component.scss
+++ b/frontend/src/app/components/stale-list/stale-list.component.scss
@@ -188,18 +188,6 @@
   }
 }
 
-.pool-logo {
-  width: 15px;
-  height: 15px;
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-
-  &.faded {
-    filter: grayscale(100%) brightness(1.5);
-  }
-}
-
 .beta {
   font-size: 10px;
   margin: 5px;
diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
index c13c885d0..644916fec 100644
--- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
+++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
@@ -33,8 +33,7 @@
             <td class="pool">
               @if (pools[row.job.pool]) {
                 <a class="badge" [routerLink]="[('/mining/pool/' + pools[row.job.pool].slug) | relativeUrl]">
-                  <img class="pool-logo" [src]="'/resources/mining-pools/' + pools[row.job.pool].slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pools[row.job.pool].name + ' mining pool'"> 
-                  {{ pools[row.job.pool].name}}
+                  <app-mining-pool [slug]="pools[row.job.pool].slug" [name]="pools[row.job.pool].name"></app-mining-pool>
                 </a>
               }
             </td>
diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
index 3d274ef2a..0d2a9819d 100644
--- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
+++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
@@ -128,11 +128,3 @@ td {
   position: relative;
   color: #FFF;
 }
-
-.pool-logo {
-  width: 15px;
-  height: 15px;
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-}
\ No newline at end of file
diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
index 2dfd124c2..1bfbef4c1 100644
--- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
+++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
@@ -304,7 +304,7 @@
         <td class="td-width" i18n="block.miner">Miner</td>
         @if (pool) {
           <td class="wrap-cell">
-            <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pool.slug]" class="badge" style="color: #FFF;padding:0;">
+            <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pool.slug]" class="badge" style="color: var(--fg);padding:0;">
               <span class="miner-name" *ngIf="pool.minerNames?.length > 1 && pool.minerNames[1] != ''">
                 @if (pool.minerNames[1].length > 16) {
                   {{ pool.minerNames[1].slice(0, 15) }}…
@@ -312,8 +312,7 @@
                   {{ pool.minerNames[1] }}
                 }
               </span>
-              <img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
-              {{ pool.name }}
+              <app-mining-pool [slug]="pool.slug" [name]="pool.name"></app-mining-pool>
             </a>
           </td>
         } @else {
diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss
index af2255427..2666fce87 100644
--- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss
+++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.scss
@@ -29,14 +29,6 @@
   vertical-align: top;
 }
 
-.pool-logo {
-  width: 25px;
-  height: 25px;
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-}
-
 .badge.badge-accelerated {
   background-color: var(--tertiary);
   color: white;
@@ -173,14 +165,6 @@
   width: 2.7em;
 }
 
-.pool-logo {
-  width: 15px;
-  height: 15px;
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-}
-
 .oobFees {
   color: #905cf4;
 }
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index e1be2890c..942a68076 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -294,14 +294,6 @@
   width: 2.7em;
 }
 
-.pool-logo {
-  width: 15px;
-  height: 15px;
-  position: relative;
-  top: -1px;
-  margin-right: 2px;
-}
-
 .oobFees {
   color: #905cf4;
 }
diff --git a/frontend/src/app/shared/components/mining-pool/mining-pool.component.html b/frontend/src/app/shared/components/mining-pool/mining-pool.component.html
new file mode 100644
index 000000000..dddd19a9a
--- /dev/null
+++ b/frontend/src/app/shared/components/mining-pool/mining-pool.component.html
@@ -0,0 +1,9 @@
+<img class="mining-pool-logo" [ngClass]="logoClass" [src]="logoSrc" [alt]="logoAlt" [style]="logoStyle" (error)="onImageError($event)">
+
+@if (showName) {
+  @if (searchText) {
+  <ngb-highlight class="mining-pool-name" [ngClass]="textClass" [result]="name" [term]="searchText" [style]="textStyle"></ngb-highlight>
+  } @else {
+  <span class="mining-pool-name" [ngClass]="textClass" [style]="textStyle">{{ name }}</span>
+  }
+}
diff --git a/frontend/src/app/shared/components/mining-pool/mining-pool.component.scss b/frontend/src/app/shared/components/mining-pool/mining-pool.component.scss
new file mode 100644
index 000000000..b32cb34fd
--- /dev/null
+++ b/frontend/src/app/shared/components/mining-pool/mining-pool.component.scss
@@ -0,0 +1,22 @@
+.mining-pool-logo {
+  width: 15px;
+  height: 15px;
+  position: relative;
+  top: -1px;
+  margin-right: 5px;
+}
+
+.mining-pool-name {
+  display: inline;
+  color: var(--fg);
+
+  &.truncate {
+    display: inline-block;
+    vertical-align: text-top;
+    padding-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 160px;
+  }
+}
diff --git a/frontend/src/app/shared/components/mining-pool/mining-pool.component.ts b/frontend/src/app/shared/components/mining-pool/mining-pool.component.ts
new file mode 100644
index 000000000..b18bea2e4
--- /dev/null
+++ b/frontend/src/app/shared/components/mining-pool/mining-pool.component.ts
@@ -0,0 +1,78 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ThemeService } from '@app/services/theme.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-mining-pool',
+  templateUrl: './mining-pool.component.html',
+  styleUrls: ['./mining-pool.component.scss'],
+  standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MiningPoolComponent implements OnInit, OnDestroy {
+  private static readonly missingLightLogoSlugs = new Set<string>();
+  private themeStateSubscription: Subscription;
+  private loadedTheme = 'default';
+
+  constructor(
+    private themeService: ThemeService,
+    private cd: ChangeDetectorRef,
+  ) { }
+
+  @Input() slug: string;
+  @Input() name: string | null = null;
+  @Input() showName: boolean = true;
+  @Input() searchText: string | null = null;
+  @Input() logoStyle: string | null = null;
+  @Input() logoClass: string | null = null;
+  @Input() textStyle: string | null = null;
+  @Input() textClass: string | null = null;
+  @Input() forceStandardLogo: boolean = false;
+
+  ngOnInit(): void {
+    this.themeStateSubscription = this.themeService.themeState$.subscribe((state) => {
+      if (state.loading) {
+        return;
+      }
+      this.loadedTheme = state.theme;
+      this.cd.markForCheck();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeStateSubscription?.unsubscribe();
+  }
+
+  get logoSrc(): string {
+    return `/resources/mining-pools/${this.slug}${this.useLightLogo ? '.light' : ''}.svg`;
+  }
+
+  get logoAlt(): string {
+    return this.name ? `Logo of ${this.name} mining pool` : 'Mining pool logo';
+  }
+
+  onImageError(event: Event): void {
+    const target = event.target as HTMLImageElement | null;
+
+    if (!target) {
+      return;
+    }
+
+    // If light logo is missing, fall back to the standard logo and don't try to load the light logo again
+    if (this.useLightLogo && target.src.endsWith(`${this.slug}.light.svg`)) {
+      MiningPoolComponent.missingLightLogoSlugs.add(this.slug);
+      target.src = `/resources/mining-pools/${this.slug}.svg`;
+      return;
+    }
+
+    if (target.src.endsWith('/resources/mining-pools/default.svg') || target.src.endsWith('/resources/mining-pools/default.light.svg')) {
+      return;
+    }
+
+    target.src = !this.forceStandardLogo && this.loadedTheme === 'nymkappa' ? '/resources/mining-pools/default.light.svg' : '/resources/mining-pools/default.svg';
+  }
+
+  get useLightLogo(): boolean {
+    return !this.forceStandardLogo && this.loadedTheme === 'nymkappa' && !MiningPoolComponent.missingLightLogoSlugs.has(this.slug);
+  }
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index eabb7bbd3..457f0a945 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -107,6 +107,7 @@ import { GeolocationComponent } from '@app/shared/components/geolocation/geoloca
 import { TestnetAlertComponent } from '@app/shared/components/testnet-alert/testnet-alert.component';
 import { GlobalFooterComponent } from '@app/shared/components/global-footer/global-footer.component';
 import { MempoolErrorComponent } from '@app/shared/components/mempool-error/mempool-error.component';
+import { MiningPoolComponent } from '@app/shared/components/mining-pool/mining-pool.component';
 import { AccelerationsListComponent } from '@components/acceleration/accelerations-list/accelerations-list.component';
 import { PendingStatsComponent } from '@components/acceleration/pending-stats/pending-stats.component';
 import { AccelerationStatsComponent } from '@components/acceleration/acceleration-stats/acceleration-stats.component';
@@ -231,6 +232,7 @@ import { GithubLogin } from '@components/github-login.component/github-login.com
     GeolocationComponent,
     TestnetAlertComponent,
     GlobalFooterComponent,
+    MiningPoolComponent,
     CalculatorComponent,
     BitcoinsatoshisPipe,
     BlockViewComponent,
@@ -383,6 +385,7 @@ import { GithubLogin } from '@components/github-login.component/github-login.com
     ToggleComponent,
     GeolocationComponent,
     TestnetAlertComponent,
+    MiningPoolComponent,
     PreviewTitleComponent,
     GlobalFooterComponent,
     MempoolErrorComponent,