diff --git a/apps/api/src/app/subscription/subscription.service.ts b/apps/api/src/app/subscription/subscription.service.ts
index d94dd68a..2e7c16a3 100644
--- a/apps/api/src/app/subscription/subscription.service.ts
+++ b/apps/api/src/app/subscription/subscription.service.ts
@@ -111,14 +111,14 @@ export class SubscriptionService {
     aSubscriptions: Subscription[]
   ): UserWithSettings['subscription'] {
     if (aSubscriptions.length > 0) {
-      const latestSubscription = aSubscriptions.reduce((a, b) => {
+      const { expiresAt, price } = aSubscriptions.reduce((a, b) => {
         return new Date(a.expiresAt) > new Date(b.expiresAt) ? a : b;
       });
 
       return {
-        expiresAt: latestSubscription.expiresAt,
-        offer: latestSubscription.price === 0 ? 'default' : 'renewal',
-        type: isBefore(new Date(), latestSubscription.expiresAt)
+        expiresAt,
+        offer: price ? 'renewal' : 'default',
+        type: isBefore(new Date(), expiresAt)
           ? SubscriptionType.Premium
           : SubscriptionType.Basic
       };
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html b/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html
index a2daeaf2..148b4ad3 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html
@@ -181,13 +181,14 @@
               </tr>
               <tr class="mat-mdc-row">
                 <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Pricing</td>
-                <td class="mat-mdc-cell px-1 py-2" i18n>
-                  Starting from {{ product1.pricingPerYear }} / year
+                <td class="mat-mdc-cell px-1 py-2">
+                  <span i18n>Starting from</span> ${{ price }} /
+                  <span i18n>year</span>
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
-                  <ng-container *ngIf="product2.pricingPerYear" i18n
-                    >Starting from {{ product2.pricingPerYear }} /
-                    year</ng-container
+                  <ng-container *ngIf="product2.pricingPerYear"
+                    ><span i18n>Starting from</span> {{ product2.pricingPerYear
+                    }} / <span i18n>year</span></ng-container
                   >
                 </td>
               </tr>
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products.ts
index 93b945d2..5d808ab6 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products.ts
@@ -67,7 +67,6 @@ export const products: Product[] = [
     ],
     name: 'Ghostfolio',
     origin: $localize`Switzerland`,
-    pricingPerYear: '$24',
     region: $localize`Global`,
     slogan: 'Open Source Wealth Management',
     useAnonymously: true
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/allvue-systems-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/allvue-systems-page.component.ts
index a8acb374..399abe97 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/allvue-systems-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/allvue-systems-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class AllvueSystemsPageComponent {
+export class AllvueSystemsPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/altoo-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/altoo-page.component.ts
index a74659ed..1d1164e7 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/altoo-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/altoo-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class AltooPageComponent {
+export class AltooPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/base-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/base-page.component.ts
new file mode 100644
index 00000000..23a5835b
--- /dev/null
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/base-page.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
+
+@Component({
+  selector: 'gf-base-product-page',
+  template: ''
+})
+export class BaseProductPageComponent implements OnInit {
+  public price: number;
+
+  public constructor(private dataService: DataService) {}
+
+  public ngOnInit() {
+    const { subscriptions } = this.dataService.fetchInfo();
+
+    this.price = subscriptions?.default?.price;
+  }
+}
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/basil-finance-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/basil-finance-page.component.ts
index c6ec41c5..1712f001 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/basil-finance-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/basil-finance-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class BasilFinancePageComponent {
+export class BasilFinancePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/beanvest-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/beanvest-page.component.ts
index 83c4e374..26b3b7fa 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/beanvest-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/beanvest-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class BeanvestPageComponent {
+export class BeanvestPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/capitally-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/capitally-page.component.ts
index b4356bc2..37501d4f 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/capitally-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/capitally-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class CapitallyPageComponent {
+export class CapitallyPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/capmon-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/capmon-page.component.ts
index 7df8872a..d021e207 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/capmon-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/capmon-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class CapMonPageComponent {
+export class CapMonPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/compound-planning-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/compound-planning-page.component.ts
index 03a7317c..0d455e12 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/compound-planning-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/compound-planning-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class CompoundPlanningPageComponent {
+export class CompoundPlanningPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/copilot-money-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/copilot-money-page.component.ts
index 7bab0252..f1c05855 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/copilot-money-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/copilot-money-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class CopilotMoneyPageComponent {
+export class CopilotMoneyPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/de.fi-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/de.fi-page.component.ts
index 7ece232d..b2a0d62e 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/de.fi-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/de.fi-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class DeFiPageComponent {
+export class DeFiPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/delta-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/delta-page.component.ts
index df540e0a..fe11152d 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/delta-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/delta-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class DeltaPageComponent {
+export class DeltaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/divvydiary-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/divvydiary-page.component.ts
index aad566c9..e128650d 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/divvydiary-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/divvydiary-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class DivvyDiaryPageComponent {
+export class DivvyDiaryPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/eightfigures-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/eightfigures-page.component.ts
index 3867beaf..933e1ac4 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/eightfigures-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/eightfigures-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class EightFiguresPageComponent {
+export class EightFiguresPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/empower-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/empower-page.component.ts
index 0abdc5fb..ea02c8b1 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/empower-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/empower-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class EmpowerPageComponent {
+export class EmpowerPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/exirio-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/exirio-page.component.ts
index 79a4cba9..7844350d 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/exirio-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/exirio-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class ExirioPageComponent {
+export class ExirioPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/finary-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/finary-page.component.ts
index 6b2d2582..4e64d8c8 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/finary-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/finary-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class FinaryPageComponent {
+export class FinaryPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/finwise-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/finwise-page.component.ts
index f897b80d..70f46d13 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/finwise-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/finwise-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class FinWisePageComponent {
+export class FinWisePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/folishare-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/folishare-page.component.ts
index 2f4d4da4..dfddfc2a 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/folishare-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/folishare-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class FolisharePageComponent {
+export class FolisharePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/getquin-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/getquin-page.component.ts
index a093950f..86ae168b 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/getquin-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/getquin-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class GetquinPageComponent {
+export class GetquinPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/gospatz-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/gospatz-page.component.ts
index fc859aa4..8bb604b1 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/gospatz-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/gospatz-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class GoSpatzPageComponent {
+export class GoSpatzPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/intuit-mint-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/intuit-mint-page.component.ts
index f2b594ab..a142bec5 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/intuit-mint-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/intuit-mint-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class IntuitMintPageComponent {
+export class IntuitMintPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/justetf-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/justetf-page.component.ts
index c67633da..f87ec5f4 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/justetf-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/justetf-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class JustEtfPageComponent {
+export class JustEtfPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/kubera-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/kubera-page.component.ts
index 59e39988..cb0511d4 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/kubera-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/kubera-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class KuberaPageComponent {
+export class KuberaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/magnifi-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/magnifi-page.component.ts
index 63cde2c1..4e688c11 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/magnifi-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/magnifi-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MagnifiPageComponent {
+export class MagnifiPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/markets.sh-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/markets.sh-page.component.ts
index ca9c9bc5..94bc581e 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/markets.sh-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/markets.sh-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MarketsShPageComponent {
+export class MarketsShPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/maybe-finance-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/maybe-finance-page.component.ts
index 8c101d0f..86738e13 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/maybe-finance-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/maybe-finance-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MaybeFinancePageComponent {
+export class MaybeFinancePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/monarch-money-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/monarch-money-page.component.ts
index 4b21de80..095584fb 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/monarch-money-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/monarch-money-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MonarchMoneyPageComponent {
+export class MonarchMoneyPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/monse-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/monse-page.component.ts
index a5f219c5..588854e3 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/monse-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/monse-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class MonsePageComponent {
+export class MonsePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/parqet-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/parqet-page.component.ts
index 658078ba..f6e95602 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/parqet-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/parqet-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class ParqetPageComponent {
+export class ParqetPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/plannix-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/plannix-page.component.ts
index a2e8ea37..106818ea 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/plannix-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/plannix-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class PlannixPageComponent {
+export class PlannixPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/portfolio-dividend-tracker-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/portfolio-dividend-tracker-page.component.ts
index 23c89464..da41c160 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/portfolio-dividend-tracker-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/portfolio-dividend-tracker-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class PortfolioDividendTrackerPageComponent {
+export class PortfolioDividendTrackerPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/portseido-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/portseido-page.component.ts
index ce53572f..7fb7703b 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/portseido-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/portseido-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class PortseidoPageComponent {
+export class PortseidoPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/projectionlab-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/projectionlab-page.component.ts
index aacb4626..6cd22b8f 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/projectionlab-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/projectionlab-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class ProjectionLabPageComponent {
+export class ProjectionLabPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/rocket-money-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/rocket-money-page.component.ts
index cbf2599e..7dc27944 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/rocket-money-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/rocket-money-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class RocketMoneyPageComponent {
+export class RocketMoneyPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/seeking-alpha-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/seeking-alpha-page.component.ts
index d8783ecd..825eacb3 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/seeking-alpha-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/seeking-alpha-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SeekingAlphaPageComponent {
+export class SeekingAlphaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/sharesight-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/sharesight-page.component.ts
index 94937c80..5b055417 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/sharesight-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/sharesight-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SharesightPageComponent {
+export class SharesightPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/simple-portfolio-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/simple-portfolio-page.component.ts
index d2ddc25b..8a1ae279 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/simple-portfolio-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/simple-portfolio-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SimplePortfolioPageComponent {
+export class SimplePortfolioPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/snowball-analytics-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/snowball-analytics-page.component.ts
index a002d1d9..9892af41 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/snowball-analytics-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/snowball-analytics-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SnowballAnalyticsPageComponent {
+export class SnowballAnalyticsPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/stockle-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/stockle-page.component.ts
index eb1b41a9..e06ec527 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/stockle-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/stockle-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class StocklePageComponent {
+export class StocklePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/stockmarketeye-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/stockmarketeye-page.component.ts
index 8fda8638..1c70efc0 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/stockmarketeye-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/stockmarketeye-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class StockMarketEyePageComponent {
+export class StockMarketEyePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/sumio-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/sumio-page.component.ts
index 26f9d23f..acf23f77 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/sumio-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/sumio-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class SumioPageComponent {
+export class SumioPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/tiller-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/tiller-page.component.ts
index 8f221843..69ba2759 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/tiller-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/tiller-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class TillerPageComponent {
+export class TillerPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/utluna-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/utluna-page.component.ts
index 0557cd47..8ce62c74 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/utluna-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/utluna-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class UtlunaPageComponent {
+export class UtlunaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/vyzer-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/vyzer-page.component.ts
index a8d0f7c7..37b8c4a7 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/vyzer-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/vyzer-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class VyzerPageComponent {
+export class VyzerPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/wealthica-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/wealthica-page.component.ts
index 91e57669..cea5ddf7 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/wealthica-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/wealthica-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class WealthicaPageComponent {
+export class WealthicaPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/whal-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/whal-page.component.ts
index c1a2ddc9..b336c07a 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/whal-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/whal-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class WhalPageComponent {
+export class WhalPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/yeekatee-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/yeekatee-page.component.ts
index f5f61886..bd95a70f 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/yeekatee-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/yeekatee-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class YeekateePageComponent {
+export class YeekateePageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/products/ynab-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/products/ynab-page.component.ts
index d63f70e2..0c343b4e 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/products/ynab-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/products/ynab-page.component.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 
 import { products } from '../products';
+import { BaseProductPageComponent } from './base-page.component';
 
 @Component({
   host: { class: 'page' },
@@ -13,7 +14,7 @@ import { products } from '../products';
   styleUrls: ['../product-page-template.scss'],
   templateUrl: '../product-page-template.html'
 })
-export class YnabPageComponent {
+export class YnabPageComponent extends BaseProductPageComponent {
   public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });