From a26896f5ac7c237043c847618db73cf8cb7f0848 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 14 Oct 2026 17:31:51 +0200
Subject: [PATCH] Task/replace text-muted with text-body-secondary (#8173)

Replace text-muted with text-body-secondary
---
 .../admin-market-data/admin-market-data.html  | 16 ++-
 .../asset-profile-dialog.html                 |  4 +-
 .../admin-settings.component.html             |  6 +-
 .../benchmark-comparator.component.html       |  5 +-
 .../components/footer/footer.component.html   |  2 +-
 .../home-overview/home-overview.html          |  2 +-
 .../login-with-access-token-dialog.html       |  2 +-
 .../src/app/components/markets/markets.html   |  4 +-
 .../portfolio-performance.component.html      |  2 +-
 .../portfolio-summary.component.html          | 20 ++--
 .../app/components/rule/rule.component.html   |  2 +-
 .../create-or-update-access-dialog.html       |  2 +-
 .../user-account-membership.html              |  4 +-
 .../user-account-settings.html                | 22 +++--
 .../about/oss-friends/oss-friends-page.html   |  2 +-
 .../hallo-ghostfolio-page.html                |  2 +-
 .../hello-ghostfolio-page.html                |  2 +-
 .../first-months-in-open-source-page.html     |  2 +-
 ...ostfolio-meets-internet-identity-page.html |  2 +-
 ...ow-do-i-get-my-finances-in-order-page.html |  2 +-
 .../500-stars-on-github-page.html             |  2 +-
 .../hacktoberfest-2022-page.html              |  2 +-
 .../black-friday-2022-page.html               |  2 +-
 ...-tracking-your-personal-finances-page.html |  2 +-
 ...stfolio-auf-sackgeld-vorgestellt-page.html |  2 +-
 .../ghostfolio-meets-umbrel-page.html         |  2 +-
 .../1000-stars-on-github-page.html            |  2 +-
 ...ancial-potential-with-ghostfolio-page.html |  2 +-
 .../exploring-the-path-to-fire-page.html      |  2 +-
 .../ghostfolio-joins-oss-friends-page.html    |  2 +-
 .../09/ghostfolio-2/ghostfolio-2-page.html    |  2 +-
 .../hacktoberfest-2023-page.html              |  2 +-
 .../black-week-2023/black-week-2023-page.html |  2 +-
 .../hacktoberfest-2023-debriefing-page.html   |  2 +-
 .../hacktoberfest-2024-page.html              |  2 +-
 .../black-weeks-2024-page.html                |  2 +-
 .../hacktoberfest-2025-page.html              |  2 +-
 .../black-weeks-2025-page.html                |  2 +-
 .../04/ghostfolio-3/ghostfolio-3-page.html    |  2 +-
 apps/client/src/app/pages/blog/blog-page.html | 98 +++++++++----------
 .../src/app/pages/features/features-page.html |  2 +-
 .../src/app/pages/landing/landing-page.html   | 16 +--
 .../create-or-update-activity-dialog.html     | 32 ++++--
 .../import-activities-dialog.html             |  8 +-
 .../portfolio/analysis/analysis-page.html     |  6 +-
 .../app/pages/portfolio/fire/fire-page.html   |  2 +-
 .../portfolio/x-ray/x-ray-page.component.html |  5 +-
 .../src/app/pages/pricing/pricing-page.html   | 10 +-
 .../src/app/pages/register/register-page.html |  2 +-
 .../personal-finance-tools-page.html          |  2 +-
 .../personal-finance-tools/product-page.html  |  4 +-
 .../src/app/pages/webauthn/webauthn-page.html |  2 +-
 .../account-balances.component.html           |  2 +-
 .../account-selector.component.html           |  2 +-
 .../activities-table.component.html           |  4 +-
 .../assistant-list-item.html                  |  2 +-
 .../assistant-list-item.scss                  |  4 +-
 libs/ui/src/lib/assistant/assistant.html      | 12 ++-
 .../lib/benchmark/benchmark.component.html    |  4 +-
 .../data-provider-credits.component.html      |  2 +-
 .../fear-and-greed-index.component.html       |  2 +-
 .../fire-calculator.component.html            |  2 +-
 .../historical-market-data-editor-dialog.html |  4 +-
 .../holdings-table.component.html             |  4 +-
 .../membership-card.component.html            |  8 +-
 .../lib/page-tabs/page-tabs.component.html    |  2 +-
 .../portfolio-filter-form.component.html      |  2 +-
 .../premium-indicator.component.html          |  2 +-
 .../symbol-autocomplete.component.html        |  2 +-
 .../top-holdings/top-holdings.component.html  |  4 +-
 .../trend-indicator.component.html            | 10 +-
 libs/ui/src/lib/value/value.component.html    |  6 +-
 72 files changed, 227 insertions(+), 185 deletions(-)

diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.html b/apps/client/src/app/components/admin-market-data/admin-market-data.html
index f9ce16676f..32dc2cdfbe 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.html
@@ -95,7 +95,9 @@
               <div class="text-truncate">{{ element.name }}</div>
               @if (!isUUID(element.symbol)) {
                 <div>
-                  <small class="text-muted">{{ element.symbol }}</small>
+                  <small class="text-body-secondary">{{
+                    element.symbol
+                  }}</small>
                 </div>
               }
             </td>
@@ -116,7 +118,9 @@
               </div>
               @if (element.dataProviderInfo?.name) {
                 <div>
-                  <small class="text-muted">{{ element.dataSource }}</small>
+                  <small class="text-body-secondary">{{
+                    element.dataSource
+                  }}</small>
                 </div>
               }
             </td>
@@ -134,7 +138,9 @@
               <div>{{ translate(element.assetClass) }}</div>
               @if (element.assetClass) {
                 <div>
-                  <small class="text-muted">{{ element.assetClass }}</small>
+                  <small class="text-body-secondary">{{
+                    element.assetClass
+                  }}</small>
                 </div>
               }
             </td>
@@ -152,7 +158,9 @@
               <div>{{ translate(element.assetSubClass) }}</div>
               @if (element.assetSubClass) {
                 <div>
-                  <small class="text-muted">{{ element.assetSubClass }}</small>
+                  <small class="text-body-secondary">{{
+                    element.assetSubClass
+                  }}</small>
                 </div>
               }
             </td>
diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
index 3ed3b0c3b4..0b9e038a02 100644
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
@@ -164,7 +164,7 @@
                   </button>
                 </form>
                 @if (data.dataSource !== DataSource.MANUAL) {
-                  <p class="my-1 px-1 text-muted" i18n>or</p>
+                  <p class="my-1 px-1 text-body-secondary" i18n>or</p>
                   <button
                     color="accent"
                     mat-flat-button
@@ -573,7 +573,7 @@
                       [for]="dateOfSplit"
                     >
                       <ion-icon
-                        class="text-muted"
+                        class="text-body-secondary"
                         matDatepickerToggleIcon
                         name="calendar-clear-outline"
                       />
diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.html b/apps/client/src/app/components/admin-settings/admin-settings.component.html
index bfaf2da846..32cd9eaf4c 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.html
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.html
@@ -30,7 +30,7 @@
             >
               <ng-container i18n>Get Access</ng-container>
             </a>
-            <div class="mx-3 text-muted">
+            <div class="mx-3 text-body-secondary">
               <small i18n>or</small>
             </div>
             <a
@@ -91,7 +91,7 @@
                 </a>
                 @if (isGhostfolioApiKeyValid === true) {
                   <div class="line-height-1">
-                    <small class="text-muted">
+                    <small class="text-body-secondary">
                       <ng-container i18n>Valid until</ng-container>
                       {{
                         ghostfolioApiStatus?.subscription?.expiresAt
@@ -165,7 +165,7 @@
                         100
                     "
                   />
-                  <small class="text-muted">
+                  <small class="text-body-secondary">
                     {{ ghostfolioApiStatus.dailyRequests }}
                     <ng-container i18n>of</ng-container>
                     {{ ghostfolioApiStatus.dailyRequestsMax }}
diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
index 8004727b6e..04adcdeca7 100644
--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
+++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
@@ -31,7 +31,10 @@
         @if (hasPermissionToAccessAdminControl) {
           <mat-option [routerLink]="routerLinkAdminControlMarketData">
             <div class="align-items-center d-flex">
-              <ion-icon class="me-2 text-muted" name="arrow-forward-outline" />
+              <ion-icon
+                class="me-2 text-body-secondary"
+                name="arrow-forward-outline"
+              />
               <span i18n>Manage Benchmarks</span>
             </div>
           </mat-option>
diff --git a/apps/client/src/app/components/footer/footer.component.html b/apps/client/src/app/components/footer/footer.component.html
index 1c31013a29..dbaaab11a4 100644
--- a/apps/client/src/app/components/footer/footer.component.html
+++ b/apps/client/src/app/components/footer/footer.component.html
@@ -181,7 +181,7 @@
       <a href="https://ghostfol.io">Ghostfolio</a>
     </div>
   </div>
-  <div class="row text-center text-muted">
+  <div class="row text-body-secondary text-center">
     <div class="col">
       <small class="d-block" i18n
         >The risk of loss in trading can be substantial. It is not advisable to
diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html
index 944bb7382f..64789ddc7d 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@@ -13,7 +13,7 @@
         <ol class="fw-bold">
           <li
             class="mb-2"
-            [class.text-muted]="(user()?.accounts?.length ?? 0) > 1"
+            [class.text-body-secondary]="(user()?.accounts?.length ?? 0) > 1"
           >
             <a class="d-block" [routerLink]="routerLinkAccounts"
               ><span i18n>Setup your accounts</span><br />
diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
index 0cd23210b6..ba7003f1e6 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
+++ b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
@@ -30,7 +30,7 @@
       @if (
         data.hasPermissionToUseAuthGoogle && data.hasPermissionToUseAuthToken
       ) {
-        <div class="my-3 text-center text-muted" i18n>or</div>
+        <div class="my-3 text-body-secondary text-center" i18n>or</div>
       }
 
       @if (data.hasPermissionToUseAuthGoogle) {
diff --git a/apps/client/src/app/components/markets/markets.html b/apps/client/src/app/components/markets/markets.html
index b0b4c1bd14..eeb6ce5791 100644
--- a/apps/client/src/app/components/markets/markets.html
+++ b/apps/client/src/app/components/markets/markets.html
@@ -20,7 +20,7 @@
               />
             </div>
           }
-          <div class="mb-2 text-center text-muted">
+          <div class="mb-2 text-body-secondary text-center">
             <small i18n>Last {{ numberOfDays }} Days</small>
           </div>
           <gf-line-chart
@@ -58,7 +58,7 @@
       />
       @if (benchmarks()?.length) {
         <div
-          class="gf-text-wrap-balance line-height-1 mt-3 text-center text-muted"
+          class="gf-text-wrap-balance line-height-1 mt-3 text-body-secondary text-center"
         >
           <small i18n>
             Calculations are based on delayed market data and may not be
diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
index 5b69251c38..9be2be344e 100644
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
+++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
@@ -1,6 +1,6 @@
 <div class="container p-0">
   <div class="d-flex flex-wrap">
-    <div class="px-1 status-container text-end text-muted">
+    <div class="px-1 status-container text-body-secondary text-end">
       @if ((errors()?.length ?? 0) > 0 && !isLoading()) {
         <ion-icon
           i18n-title
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
index fb1300e918..d40249cafb 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
@@ -98,7 +98,7 @@
       />
     </div>
   </div>
-  <div class="d-flex py-1 text-muted">
+  <div class="d-flex py-1 text-body-secondary">
     <div class="flex-grow-1 indent-1 text-truncate" i18n>thereof Dividend</div>
     <div class="justify-content-end">
       <gf-value
@@ -154,7 +154,7 @@
         PerformanceCalculationType.ROAI
       ) {
         <abbr
-          class="d-none d-sm-inline-block initialism ms-2 text-muted"
+          class="d-none d-sm-inline-block initialism ms-2 text-body-secondary"
           i18n-title
           title="Return on Average Investment (total return with dividends)"
           >(ROAI)</abbr
@@ -173,7 +173,7 @@
       />
     </div>
   </div>
-  <div class="d-flex py-1 text-muted">
+  <div class="d-flex py-1 text-body-secondary">
     <div class="flex-grow-1 indent-2 text-truncate">
       <ng-container i18n>thereof Dividend Performance</ng-container>
     </div>
@@ -217,7 +217,7 @@
           class="align-items-center caret-container d-inline-flex justify-content-center"
         >
           <ion-icon
-            class="caret text-muted"
+            class="caret text-body-secondary"
             name="caret-forward-outline"
             [class.caret-expanded]="isHoldingsExpanded"
           />
@@ -230,7 +230,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ms-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-body-secondary"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -295,7 +295,7 @@
           class="align-items-center caret-container d-inline-flex justify-content-center"
         >
           <ion-icon
-            class="caret text-muted"
+            class="caret text-body-secondary"
             name="caret-forward-outline"
             [class.caret-expanded]="isCashExpanded"
           />
@@ -308,7 +308,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ms-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-body-secondary"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -371,7 +371,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ms-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-body-secondary"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -456,7 +456,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ms-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-body-secondary"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -486,7 +486,7 @@
         user?.subscription?.type !== 'Basic'
       ) {
         <ion-icon
-          class="me-1 text-muted"
+          class="me-1 text-body-secondary"
           name="ellipsis-horizontal-circle-outline"
         />
       }
diff --git a/apps/client/src/app/components/rule/rule.component.html b/apps/client/src/app/components/rule/rule.component.html
index 2322bed990..f9fc603830 100644
--- a/apps/client/src/app/components/rule/rule.component.html
+++ b/apps/client/src/app/components/rule/rule.component.html
@@ -24,7 +24,7 @@
         } @else if (rule?.isActive === true) {
           <ion-icon name="warning-outline" />
         } @else {
-          <ion-icon class="text-muted" name="remove-circle-outline" />
+          <ion-icon class="text-body-secondary" name="remove-circle-outline" />
         }
       </div>
     }
diff --git a/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html b/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html
index 04a59596e5..6b078a8bd0 100644
--- a/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html
+++ b/apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html
@@ -60,7 +60,7 @@
         />
         <mat-datepicker-toggle class="me-2" matSuffix [for]="expiresAt">
           <ion-icon
-            class="text-muted"
+            class="text-body-secondary"
             matDatepickerToggleIcon
             name="calendar-clear-outline"
           />
diff --git a/apps/client/src/app/components/user-account-membership/user-account-membership.html b/apps/client/src/app/components/user-account-membership/user-account-membership.html
index 030ba82e7a..ae23dc9860 100644
--- a/apps/client/src/app/components/user-account-membership/user-account-membership.html
+++ b/apps/client/src/app/components/user-account-membership/user-account-membership.html
@@ -26,7 +26,7 @@
               @if (price) {
                 <div class="mt-1 text-center">
                   @if (coupon) {
-                    <del class="text-muted"
+                    <del class="text-body-secondary"
                       >{{ baseCurrency }}&nbsp;{{ price }}</del
                     >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon }}
                   } @else {
@@ -75,7 +75,7 @@
             </div>
           </div>
         } @else {
-          <div class="mt-3 text-muted">
+          <div class="mt-3 text-body-secondary">
             <small i18n>No auto-renewal on membership.</small>
           </div>
         }
diff --git a/apps/client/src/app/components/user-account-settings/user-account-settings.html b/apps/client/src/app/components/user-account-settings/user-account-settings.html
index 3895bd7dfe..055276129a 100644
--- a/apps/client/src/app/components/user-account-settings/user-account-settings.html
+++ b/apps/client/src/app/components/user-account-settings/user-account-settings.html
@@ -23,7 +23,7 @@
                   [currencies]="currencies"
                 />
                 @if (hasImpersonationId) {
-                  <mat-hint class="mt-1 text-muted text-truncate" i18n
+                  <mat-hint class="mt-1 text-body-secondary text-truncate" i18n
                     >Derived from the portfolio you are viewing</mat-hint
                   >
                 }
@@ -60,7 +60,7 @@
             <div class="pe-1 w-50">
               <div i18n>Language</div>
               @if (isCommunityLanguage()) {
-                <div class="hint-text text-muted" i18n>
+                <div class="hint-text text-body-secondary" i18n>
                   If a translation is missing, kindly support us in extending it
                   <a
                     href="https://github.com/ghostfolio/ghostfolio/blob/main/apps/client/src/locales/messages.{{
@@ -154,7 +154,7 @@
           <div class="align-items-center d-flex mb-4">
             <div class="pe-1 w-50">
               <div i18n>Locale</div>
-              <div class="hint-text text-muted">
+              <div class="hint-text text-body-secondary">
                 <ng-container i18n>Date and number format</ng-container>
               </div>
             </div>
@@ -176,7 +176,7 @@
                     <mat-option [value]="locale">{{ locale }}</mat-option>
                   }
                 </mat-select>
-                <mat-hint class="d-flex mt-2 text-muted text-truncate">
+                <mat-hint class="d-flex mt-2 text-body-secondary text-truncate">
                   <gf-value
                     [deviceType]="deviceType()"
                     [isDate]="true"
@@ -224,7 +224,7 @@
       <div class="align-items-center d-flex mt-4 py-1">
         <div class="pe-1 w-50">
           <div i18n>Presenter View</div>
-          <div class="hint-text text-muted" i18n>
+          <div class="hint-text text-body-secondary" i18n>
             Protection for sensitive information like absolute performances and
             quantity values
           </div>
@@ -242,7 +242,7 @@
       <div class="d-flex mt-4 py-1">
         <div class="pe-1 w-50">
           <div i18n>Zen Mode</div>
-          <div class="hint-text text-muted" i18n>
+          <div class="hint-text text-body-secondary" i18n>
             Distraction-free experience for turbulent times
           </div>
         </div>
@@ -259,7 +259,9 @@
       <div class="align-items-center d-flex mt-4 py-1">
         <div class="pe-1 w-50">
           <div i18n>Biometric Authentication</div>
-          <div class="hint-text text-muted" i18n>Sign in with fingerprint</div>
+          <div class="hint-text text-body-secondary" i18n>
+            Sign in with fingerprint
+          </div>
         </div>
         <div class="ps-1 w-50">
           <mat-slide-toggle
@@ -276,7 +278,7 @@
       <div class="align-items-center d-flex mt-4 py-1">
         <div class="pe-1 w-50">
           <div i18n>Experimental Features</div>
-          <div class="hint-text text-muted" i18n>
+          <div class="hint-text text-body-secondary" i18n>
             Sneak peek at upcoming functionality
           </div>
         </div>
@@ -294,7 +296,7 @@
         <div class="align-items-center d-flex mt-4 py-1">
           <div class="pe-1 w-50">
             <div>Ghostfolio AI</div>
-            <div class="hint-text text-muted" i18n>
+            <div class="hint-text text-body-secondary" i18n>
               Powered by third-party AI providers
             </div>
           </div>
@@ -401,7 +403,7 @@
               <button color="warn" i18n mat-flat-button [disabled]="true">
                 Close Account
               </button>
-              <div class="hint-text mt-2 text-muted" i18n>
+              <div class="hint-text mt-2 text-body-secondary" i18n>
                 For security reasons, please delete all activities and accounts
                 first before your Ghostfolio account can be closed.
               </div>
diff --git a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html
index f4f65b47d6..cf8bb9b804 100644
--- a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html
+++ b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html
@@ -5,7 +5,7 @@
         <span class="d-none d-sm-block"
           ><ng-container i18n>Our</ng-container> OSS Friends</span
         >
-        <small class="text-muted" i18n
+        <small class="text-body-secondary" i18n
           >Discover other exciting Open Source Software projects</small
         >
       </h1>
diff --git a/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html b/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html
index 035200fe96..0aab341645 100644
--- a/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html
+++ b/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hallo Ghostfolio 👋</h1>
-          <div class="text-muted"><small>2021-07-31</small></div>
+          <div class="text-body-secondary"><small>2021-07-31</small></div>
         </div>
         <section class="mb-4">
           <p>
diff --git a/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html b/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html
index 6e06434014..49a8c97631 100644
--- a/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html
+++ b/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hello Ghostfolio 👋</h1>
-          <div class="text-muted"><small>2021-07-31</small></div>
+          <div class="text-body-secondary"><small>2021-07-31</small></div>
         </div>
         <section class="mb-4">
           <p>
diff --git a/apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.html b/apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.html
index ca5ecfea1e..655f70a471 100644
--- a/apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.html
+++ b/apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.html
@@ -7,7 +7,7 @@
             👻 Ghostfolio –
             <span class="text-nowrap">First months in Open Source</span>
           </h1>
-          <div class="text-muted"><small>2022-01-05</small></div>
+          <div class="text-body-secondary"><small>2022-01-05</small></div>
         </div>
         <section class="mb-4">
           <p>
diff --git a/apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.html b/apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.html
index 61641aa5ac..0f1ddff1a9 100644
--- a/apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.html
+++ b/apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio meets Internet Identity</h1>
-          <div class="mb-3 text-muted"><small>2022-07-23</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-07-23</small></div>
           <img
             alt="Ghostfolio meets Internet Identity Teaser"
             class="border rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.html b/apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.html
index f06a35ebe5..237f057868 100644
--- a/apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.html
+++ b/apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">How do I get my finances in order?</h1>
-          <div class="text-muted"><small>2022-07-14</small></div>
+          <div class="text-body-secondary"><small>2022-07-14</small></div>
         </div>
         <section class="mb-4">
           <p>
diff --git a/apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.html b/apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.html
index 80937a2a51..bcd76f245c 100644
--- a/apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.html
+++ b/apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">500 Stars</h1>
-          <div class="mb-3 text-muted"><small>2022-08-18</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-08-18</small></div>
           <img
             alt="500 Stars on GitHub Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.html b/apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.html
index 87a0b3bd2a..7ba19e1c89 100644
--- a/apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.html
+++ b/apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2022</h1>
-          <div class="mb-3 text-muted"><small>2022-10-01</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-10-01</small></div>
           <img
             alt="Hacktoberfest 2022 with Ghostfolio Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html b/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html
index 2e4635bb08..cac7bc56bf 100644
--- a/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html
+++ b/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Black Friday 2022</h1>
-          <div class="mb-3 text-muted"><small>2022-11-13</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-11-13</small></div>
           <img
             alt="Black Friday 2022 Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.html b/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.html
index 28641c5db6..a4b18b6717 100644
--- a/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.html
+++ b/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.html
@@ -6,7 +6,7 @@
           <h1 class="mb-1">
             The importance of tracking your personal finances
           </h1>
-          <div class="mb-3 text-muted"><small>2022-12-26</small></div>
+          <div class="mb-3 text-body-secondary"><small>2022-12-26</small></div>
           <img
             alt="The importance of tracking your personal finances Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.html b/apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.html
index 439b32986a..48f4fd29d3 100644
--- a/apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.html
+++ b/apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio auf Sackgeld.com vorgestellt</h1>
-          <div class="mb-3 text-muted"><small>2023-01-21</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-01-21</small></div>
           <img
             alt="Ghostfolio auf Sackgeld.com vorgestellt Teaser"
             class="border rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.html b/apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.html
index 950218ae07..12c750b2d9 100644
--- a/apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.html
+++ b/apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio meets Umbrel</h1>
-          <div class="mb-3 text-muted"><small>2023-02-25</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-02-25</small></div>
           <img
             alt="Ghostfolio meets Umbrel Teaser"
             class="border rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.html b/apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.html
index c0c673594e..19a0c0fb24 100644
--- a/apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.html
+++ b/apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio reaches 1’000 Stars on GitHub</h1>
-          <div class="mb-3 text-muted"><small>2023-03-25</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-03-25</small></div>
           <img
             alt="1000 Stars on GitHub Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.html b/apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.html
index d73b58248e..c20350264d 100644
--- a/apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.html
+++ b/apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Unlock your Financial Potential with Ghostfolio</h1>
-          <div class="mb-3 text-muted"><small>2023-05-20</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-05-20</small></div>
           <img
             alt="Unlock your financial potential with Ghostfolio Teaser"
             class="border rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.html b/apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.html
index 1040cef15d..e11055385e 100644
--- a/apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.html
+++ b/apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.html
@@ -7,7 +7,7 @@
             Exploring the Path to Financial Independence and Retiring Early
             (FIRE)
           </h1>
-          <div class="mb-3 text-muted"><small>2023-07-01</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-07-01</small></div>
           <img
             alt="Exploring the Path to Financial Independence and Retiring Early (FIRE) Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/08/ghostfolio-joins-oss-friends/ghostfolio-joins-oss-friends-page.html b/apps/client/src/app/pages/blog/2023/08/ghostfolio-joins-oss-friends/ghostfolio-joins-oss-friends-page.html
index 51d010c181..dbd6a8d906 100644
--- a/apps/client/src/app/pages/blog/2023/08/ghostfolio-joins-oss-friends/ghostfolio-joins-oss-friends-page.html
+++ b/apps/client/src/app/pages/blog/2023/08/ghostfolio-joins-oss-friends/ghostfolio-joins-oss-friends-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio joins OSS Friends</h1>
-          <div class="mb-3 text-muted"><small>2023-08-23</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-08-23</small></div>
           <img
             alt="Ghostfolio joins OSS Friends Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/09/ghostfolio-2/ghostfolio-2-page.html b/apps/client/src/app/pages/blog/2023/09/ghostfolio-2/ghostfolio-2-page.html
index 54ebe806dc..a2a215f158 100644
--- a/apps/client/src/app/pages/blog/2023/09/ghostfolio-2/ghostfolio-2-page.html
+++ b/apps/client/src/app/pages/blog/2023/09/ghostfolio-2/ghostfolio-2-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio 2.0</h1>
-          <div class="mb-3 text-muted"><small>2023-09-09</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-09-09</small></div>
           <img
             alt="Ghostfolio 2.0 Teaser"
             class="border rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/09/hacktoberfest-2023/hacktoberfest-2023-page.html b/apps/client/src/app/pages/blog/2023/09/hacktoberfest-2023/hacktoberfest-2023-page.html
index 58b3b0f63b..ca2ded06fb 100644
--- a/apps/client/src/app/pages/blog/2023/09/hacktoberfest-2023/hacktoberfest-2023-page.html
+++ b/apps/client/src/app/pages/blog/2023/09/hacktoberfest-2023/hacktoberfest-2023-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2023</h1>
-          <div class="mb-3 text-muted"><small>2023-09-26</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-09-26</small></div>
           <img
             alt="Hacktoberfest 2023 with Ghostfolio Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.html b/apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.html
index c5f14d6654..049a7b6e78 100644
--- a/apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.html
+++ b/apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Black Week 2023</h1>
-          <div class="mb-3 text-muted"><small>2023-11-19</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-11-19</small></div>
           <img
             alt="Black Week 2023 Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2023/11/hacktoberfest-2023-debriefing/hacktoberfest-2023-debriefing-page.html b/apps/client/src/app/pages/blog/2023/11/hacktoberfest-2023-debriefing/hacktoberfest-2023-debriefing-page.html
index 11926dc9bb..ad5519a733 100644
--- a/apps/client/src/app/pages/blog/2023/11/hacktoberfest-2023-debriefing/hacktoberfest-2023-debriefing-page.html
+++ b/apps/client/src/app/pages/blog/2023/11/hacktoberfest-2023-debriefing/hacktoberfest-2023-debriefing-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2023 Debriefing</h1>
-          <div class="mb-3 text-muted"><small>2023-11-05</small></div>
+          <div class="mb-3 text-body-secondary"><small>2023-11-05</small></div>
           <img
             alt="Hacktoberfest 2023 with Ghostfolio Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2024/09/hacktoberfest-2024/hacktoberfest-2024-page.html b/apps/client/src/app/pages/blog/2024/09/hacktoberfest-2024/hacktoberfest-2024-page.html
index 863e1cd731..f45aeaf2f3 100644
--- a/apps/client/src/app/pages/blog/2024/09/hacktoberfest-2024/hacktoberfest-2024-page.html
+++ b/apps/client/src/app/pages/blog/2024/09/hacktoberfest-2024/hacktoberfest-2024-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2024</h1>
-          <div class="mb-3 text-muted"><small>2024-09-24</small></div>
+          <div class="mb-3 text-body-secondary"><small>2024-09-24</small></div>
           <img
             alt="Hacktoberfest 2024 with Ghostfolio Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2024/11/black-weeks-2024/black-weeks-2024-page.html b/apps/client/src/app/pages/blog/2024/11/black-weeks-2024/black-weeks-2024-page.html
index 5f0566a1fe..9060b2f9a3 100644
--- a/apps/client/src/app/pages/blog/2024/11/black-weeks-2024/black-weeks-2024-page.html
+++ b/apps/client/src/app/pages/blog/2024/11/black-weeks-2024/black-weeks-2024-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Black Weeks 2024</h1>
-          <div class="mb-3 text-muted"><small>2024-11-16</small></div>
+          <div class="mb-3 text-body-secondary"><small>2024-11-16</small></div>
           <img
             alt="Black Week 2024 Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2025/09/hacktoberfest-2025/hacktoberfest-2025-page.html b/apps/client/src/app/pages/blog/2025/09/hacktoberfest-2025/hacktoberfest-2025-page.html
index ae6b7d0b75..35361a8b36 100644
--- a/apps/client/src/app/pages/blog/2025/09/hacktoberfest-2025/hacktoberfest-2025-page.html
+++ b/apps/client/src/app/pages/blog/2025/09/hacktoberfest-2025/hacktoberfest-2025-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hacktoberfest 2025</h1>
-          <div class="mb-3 text-muted"><small>2025-09-27</small></div>
+          <div class="mb-3 text-body-secondary"><small>2025-09-27</small></div>
           <img
             alt="Hacktoberfest 2025 with Ghostfolio Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2025/11/black-weeks-2025/black-weeks-2025-page.html b/apps/client/src/app/pages/blog/2025/11/black-weeks-2025/black-weeks-2025-page.html
index 79b61f15f6..33b35077eb 100644
--- a/apps/client/src/app/pages/blog/2025/11/black-weeks-2025/black-weeks-2025-page.html
+++ b/apps/client/src/app/pages/blog/2025/11/black-weeks-2025/black-weeks-2025-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Black Weeks 2025</h1>
-          <div class="mb-3 text-muted"><small>2025-11-16</small></div>
+          <div class="mb-3 text-body-secondary"><small>2025-11-16</small></div>
           <img
             alt="Black Week 2025 Teaser"
             class="rounded w-100"
diff --git a/apps/client/src/app/pages/blog/2026/04/ghostfolio-3/ghostfolio-3-page.html b/apps/client/src/app/pages/blog/2026/04/ghostfolio-3/ghostfolio-3-page.html
index 8e5ea3b020..0acf12bca0 100644
--- a/apps/client/src/app/pages/blog/2026/04/ghostfolio-3/ghostfolio-3-page.html
+++ b/apps/client/src/app/pages/blog/2026/04/ghostfolio-3/ghostfolio-3-page.html
@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Ghostfolio 3.0</h1>
-          <div class="mb-3 text-muted"><small>2026-04-23</small></div>
+          <div class="mb-3 text-body-secondary"><small>2026-04-23</small></div>
           <img
             alt="Ghostfolio 3.0 Teaser"
             class="border rounded w-100"
diff --git a/apps/client/src/app/pages/blog/blog-page.html b/apps/client/src/app/pages/blog/blog-page.html
index cfd60ea224..d5958559a4 100644
--- a/apps/client/src/app/pages/blog/blog-page.html
+++ b/apps/client/src/app/pages/blog/blog-page.html
@@ -3,7 +3,7 @@
     <div class="col">
       <h1 class="h3 line-height-1 mb-4 text-center">
         <span class="d-none d-sm-block" i18n>Blog</span>
-        <small class="text-muted" i18n
+        <small class="text-body-secondary" i18n
           >Discover the latest Ghostfolio updates and insights on personal
           finance</small
         >
@@ -20,11 +20,11 @@
                   <div class="h6 m-0 text-truncate">
                     Announcing Ghostfolio 3.0
                   </div>
-                  <div class="d-flex text-muted">2026-04-03</div>
+                  <div class="d-flex text-body-secondary">2026-04-03</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -45,11 +45,11 @@
                 >
                   <div class="flex-grow-1 overflow-hidden">
                     <div class="h6 m-0 text-truncate">Black Weeks 2025</div>
-                    <div class="d-flex text-muted">2025-11-15</div>
+                    <div class="d-flex text-body-secondary">2025-11-15</div>
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -70,11 +70,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hacktoberfest 2025</div>
-                  <div class="d-flex text-muted">2025-09-27</div>
+                  <div class="d-flex text-body-secondary">2025-09-27</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -95,11 +95,11 @@
                 >
                   <div class="flex-grow-1 overflow-hidden">
                     <div class="h6 m-0 text-truncate">Black Weeks 2024</div>
-                    <div class="d-flex text-muted">2024-11-16</div>
+                    <div class="d-flex text-body-secondary">2024-11-16</div>
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -120,11 +120,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hacktoberfest 2024</div>
-                  <div class="d-flex text-muted">2024-09-24</div>
+                  <div class="d-flex text-body-secondary">2024-09-24</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -145,11 +145,11 @@
                 >
                   <div class="flex-grow-1 overflow-hidden">
                     <div class="h6 m-0 text-truncate">Black Week 2023</div>
-                    <div class="d-flex text-muted">2023-11-19</div>
+                    <div class="d-flex text-body-secondary">2023-11-19</div>
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -172,11 +172,11 @@
                   <div class="h6 m-0 text-truncate">
                     Hacktoberfest 2023 Debriefing
                   </div>
-                  <div class="d-flex text-muted">2023-11-05</div>
+                  <div class="d-flex text-body-secondary">2023-11-05</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -196,11 +196,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hacktoberfest 2023</div>
-                  <div class="d-flex text-muted">2023-09-26</div>
+                  <div class="d-flex text-body-secondary">2023-09-26</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -222,11 +222,11 @@
                   <div class="h6 m-0 text-truncate">
                     Announcing Ghostfolio 2.0
                   </div>
-                  <div class="d-flex text-muted">2023-09-09</div>
+                  <div class="d-flex text-body-secondary">2023-09-09</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -248,11 +248,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio joins OSS Friends
                   </div>
-                  <div class="d-flex text-muted">2023-08-23</div>
+                  <div class="d-flex text-body-secondary">2023-08-23</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -275,11 +275,11 @@
                     Exploring the Path to Financial Independence and Retiring
                     Early (FIRE)
                   </div>
-                  <div class="d-flex text-muted">2023-07-01</div>
+                  <div class="d-flex text-body-secondary">2023-07-01</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -301,11 +301,11 @@
                   <div class="h6 m-0 text-truncate">
                     Unlock your Financial Potential with Ghostfolio
                   </div>
-                  <div class="d-flex text-muted">2023-05-20</div>
+                  <div class="d-flex text-body-secondary">2023-05-20</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -327,11 +327,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio reaches 1’000 Stars on GitHub
                   </div>
-                  <div class="d-flex text-muted">2023-03-25</div>
+                  <div class="d-flex text-body-secondary">2023-03-25</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -353,11 +353,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio meets Umbrel
                   </div>
-                  <div class="d-flex text-muted">2023-02-25</div>
+                  <div class="d-flex text-body-secondary">2023-02-25</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -379,11 +379,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio auf Sackgeld.com vorgestellt
                   </div>
-                  <div class="d-flex text-muted">2023-01-21</div>
+                  <div class="d-flex text-body-secondary">2023-01-21</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -405,11 +405,11 @@
                   <div class="h6 m-0 text-truncate">
                     The importance of tracking your personal finances
                   </div>
-                  <div class="d-flex text-muted">2022-12-26</div>
+                  <div class="d-flex text-body-secondary">2022-12-26</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -430,11 +430,11 @@
                 >
                   <div class="flex-grow-1 overflow-hidden">
                     <div class="h6 m-0 text-truncate">Black Friday 2022</div>
-                    <div class="d-flex text-muted">2022-11-13</div>
+                    <div class="d-flex text-body-secondary">2022-11-13</div>
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -455,11 +455,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hacktoberfest 2022</div>
-                  <div class="d-flex text-muted">2022-10-01</div>
+                  <div class="d-flex text-body-secondary">2022-10-01</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -479,11 +479,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">500 Stars on GitHub</div>
-                  <div class="d-flex text-muted">2022-08-18</div>
+                  <div class="d-flex text-body-secondary">2022-08-18</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -505,11 +505,11 @@
                   <div class="h6 m-0 text-truncate">
                     Ghostfolio meets Internet Identity
                   </div>
-                  <div class="d-flex text-muted">2022-07-23</div>
+                  <div class="d-flex text-body-secondary">2022-07-23</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -531,11 +531,11 @@
                   <div class="h6 m-0 text-truncate">
                     How do I get my finances in order?
                   </div>
-                  <div class="d-flex text-muted">2022-07-14</div>
+                  <div class="d-flex text-body-secondary">2022-07-14</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -557,11 +557,11 @@
                   <div class="h6 m-0 text-truncate">
                     First months in Open Source
                   </div>
-                  <div class="d-flex text-muted">2022-01-05</div>
+                  <div class="d-flex text-body-secondary">2022-01-05</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -581,11 +581,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hello Ghostfolio</div>
-                  <div class="d-flex text-muted">2021-07-31</div>
+                  <div class="d-flex text-body-secondary">2021-07-31</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -605,11 +605,11 @@
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate">Hallo Ghostfolio</div>
-                  <div class="d-flex text-muted">2021-07-31</div>
+                  <div class="d-flex text-body-secondary">2021-07-31</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-muted"
+                    class="chevron text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
diff --git a/apps/client/src/app/pages/features/features-page.html b/apps/client/src/app/pages/features/features-page.html
index 14c772c74e..b57ecba2e4 100644
--- a/apps/client/src/app/pages/features/features-page.html
+++ b/apps/client/src/app/pages/features/features-page.html
@@ -3,7 +3,7 @@
     <div class="col">
       <h1 class="h3 line-height-1 mb-4 text-center">
         <span class="d-none d-sm-block" i18n>Features</span>
-        <small class="text-muted" i18n>
+        <small class="text-body-secondary" i18n>
           Check out the numerous features of Ghostfolio to manage your wealth
         </small>
       </h1>
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index a11058eeec..9327f9286e 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@@ -44,7 +44,7 @@
       }
       @if (hasPermissionForDemo) {
         @if (hasPermissionToCreateUser) {
-          <div class="mx-3 text-muted" i18n>or</div>
+          <div class="mx-3 text-body-secondary" i18n>or</div>
         }
         <a i18n mat-stroked-button [routerLink]="routerLinkDemo">Live Demo</a>
       }
@@ -114,7 +114,7 @@
   }
 
   <div class="row mb-5">
-    <div class="col-12 text-center text-muted">
+    <div class="col-12 text-body-secondary text-center">
       <small i18n>As seen in</small>
     </div>
     <div class="col-12">
@@ -242,7 +242,7 @@
               />
               <div>
                 <div>{{ testimonial.quote }}</div>
-                <div class="mt-2 text-muted">
+                <div class="mt-2 text-body-secondary">
                   —
                   @if (testimonial.url) {
                     <a target="_blank" [href]="testimonial.url">{{
@@ -292,11 +292,11 @@
           <mat-card-content class="d-flex flex-row">
             <div class="flex-grow-1">
               <div class="fw-bold" i18n>Sign up anonymously*</div>
-              <div class="text-muted" i18n>
+              <div class="text-body-secondary" i18n>
                 <small>* no e-mail address nor credit card required</small>
               </div>
             </div>
-            <div class="ps-2 text-end text-muted">1</div>
+            <div class="ps-2 text-body-secondary text-end">1</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -308,7 +308,7 @@
                 Add any of your historical transactions
               </div>
             </div>
-            <div class="ps-2 text-end text-muted">2</div>
+            <div class="ps-2 text-body-secondary text-end">2</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -320,7 +320,7 @@
                 Get valuable insights of your portfolio composition
               </div>
             </div>
-            <div class="ps-2 text-end text-muted">3</div>
+            <div class="ps-2 text-body-secondary text-end">3</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -348,7 +348,7 @@
             >Get Started</a
           >
           @if (hasPermissionForDemo) {
-            <div class="mx-3 text-muted" i18n>or</div>
+            <div class="mx-3 text-body-secondary" i18n>or</div>
             <a i18n mat-stroked-button [routerLink]="routerLinkDemo"
               >Live Demo</a
             >
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
index 11e707f89d..693e63dad2 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
@@ -21,7 +21,9 @@
             <span
               ><b>{{ typesTranslationMap['BUY'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
@@ -29,7 +31,9 @@
             <span
               ><b>{{ typesTranslationMap['FEE'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >One-time fee, annual account fees</small
             >
           </mat-option>
@@ -37,7 +41,9 @@
             <span
               ><b>{{ typesTranslationMap['DIVIDEND'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Distribution of corporate earnings</small
             >
           </mat-option>
@@ -45,7 +51,9 @@
             <span
               ><b>{{ typesTranslationMap['INTEREST'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Revenue for lending out money</small
             >
           </mat-option>
@@ -53,7 +61,9 @@
             <span
               ><b>{{ typesTranslationMap['LIABILITY'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Mortgages, personal loans, credit cards</small
             >
           </mat-option>
@@ -61,7 +71,9 @@
             <span
               ><b>{{ typesTranslationMap['SELL'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
@@ -69,7 +81,9 @@
             <span
               ><b>{{ typesTranslationMap['VALUABLE'] }}</b></span
             >
-            <small class="d-block line-height-1 text-muted text-nowrap" i18n
+            <small
+              class="d-block line-height-1 text-body-secondary text-nowrap"
+              i18n
               >Luxury items, real estate, private companies</small
             >
           </mat-option>
@@ -144,7 +158,7 @@
         />
         <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
           <ion-icon
-            class="text-muted"
+            class="text-body-secondary"
             matDatepickerToggleIcon
             name="calendar-clear-outline"
           />
@@ -222,7 +236,7 @@
             type="button"
             (click)="applyCurrentMarketPrice()"
           >
-            <ion-icon class="text-muted" name="refresh-outline" />
+            <ion-icon class="text-body-secondary" name="refresh-outline" />
           </button>
         }
       </div>
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
index f05a5b83ea..ae67e5a97e 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
@@ -51,7 +51,7 @@
                       ><b>{{ holding.assetProfile.name }}</b></span
                     >
                     <br />
-                    <small class="text-muted"
+                    <small class="text-body-secondary"
                       >{{ holding.assetProfile.symbol }} ·
                       {{ holding.assetProfile.currency }}</small
                     >
@@ -77,14 +77,14 @@
           <div class="d-flex flex-column justify-content-center">
             @if (isLoading) {
               <div
-                class="align-items-center d-flex drop-area flex-column justify-content-center p-4 text-center text-muted"
+                class="align-items-center d-flex drop-area flex-column justify-content-center p-4 text-body-secondary text-center"
               >
                 <mat-spinner [diameter]="20" />
                 <span i18n>Ghostfolio AI is processing the file...</span>
               </div>
             } @else {
               <button
-                class="drop-area p-4 text-center text-muted"
+                class="drop-area p-4 text-body-secondary text-center"
                 gfFileDrop
                 (click)="onSelectFile(stepper)"
                 (filesDropped)="onFilesDropped({ stepper, files: $event })"
@@ -139,7 +139,7 @@
                 <span
                   class="align-items-center d-flex"
                   matTooltipPosition="above"
-                  [class.text-muted]="isLoading"
+                  [class.text-body-secondary]="isLoading"
                   [matTooltip]="ghostfolioAiTooltip"
                 >
                   <ion-icon name="information-circle-outline" />
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
index a46478de68..255ede038a 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@@ -259,7 +259,7 @@
                 PerformanceCalculationType.ROAI
               ) {
                 <abbr
-                  class="d-none d-sm-inline-block initialism ms-2 text-muted"
+                  class="d-none d-sm-inline-block initialism ms-2 text-body-secondary"
                   i18n-title
                   title="Return on Average Investment (total return with dividends)"
                   >(ROAI)</abbr
@@ -280,7 +280,7 @@
               />
             </div>
           </div>
-          <div class="d-flex ms-3 py-1 text-muted">
+          <div class="d-flex ms-3 py-1 text-body-secondary">
             <div
               class="align-items-center d-flex flex-grow-1 me-2 text-truncate"
             >
@@ -301,7 +301,7 @@
               />
             </div>
           </div>
-          <div class="d-flex ms-3 py-1 text-muted">
+          <div class="d-flex ms-3 py-1 text-body-secondary">
             <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>thereof Dividend Performance</ng-container>
             </div>
diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.html b/apps/client/src/app/pages/portfolio/fire/fire-page.html
index 28a435109e..9fba0c2696 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.html
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html
@@ -63,7 +63,7 @@
         />
       </div>
     } @else {
-      <div [class.text-muted]="user?.subscription?.type === 'Basic'">
+      <div [class.text-body-secondary]="user?.subscription?.type === 'Basic'">
         <div class="mb-2">
           <ng-container i18n
             >If you retire today, you would be able to withdraw
diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
index 25077329e2..c45682f076 100644
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
+++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
@@ -49,7 +49,10 @@
               statistics?.rulesActiveCount === 0 ||
               statistics?.rulesFulfilledCount === 0
             ) {
-              <ion-icon class="text-muted" name="remove-circle-outline" />
+              <ion-icon
+                class="text-body-secondary"
+                name="remove-circle-outline"
+              />
             } @else if (
               statistics?.rulesFulfilledCount === statistics?.rulesActiveCount
             ) {
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index cb246e5f07..b3a24fe323 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -90,7 +90,7 @@
               @if (user?.subscription?.type === 'Basic') {
                 <div class="d-none d-lg-block invisible mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
-                  <p class="m-0 text-muted">
+                  <p class="m-0 text-body-secondary">
                     <small>&nbsp;</small>
                   </p>
                 </div>
@@ -156,7 +156,7 @@
               @if (user?.subscription?.type === 'Basic') {
                 <div class="d-none d-lg-block invisible mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
-                  <p class="m-0 text-muted">
+                  <p class="m-0 text-body-secondary">
                     <small>&nbsp;</small>
                   </p>
                 </div>
@@ -264,7 +264,7 @@
                 <p class="h5 text-end">
                   <span class="fw-normal">
                     @if (coupon) {
-                      <del class="text-muted"
+                      <del class="text-body-secondary"
                         >{{ baseCurrency }}&nbsp;{{ price }}</del
                       >&nbsp;{{ baseCurrency }}&nbsp;<strong>{{
                         price - coupon
@@ -293,7 +293,7 @@
                       <ng-container i18n>Upgrade Plan</ng-container>
                     }
                   </button>
-                  <p class="m-0 text-muted">
+                  <p class="m-0 text-body-secondary">
                     <small i18n>One-time payment, no auto-renewal.</small>
                   </p>
                 </div>
@@ -371,7 +371,7 @@
           [routerLink]="routerLinkRegister"
           >Get Started</a
         >
-        <p class="m-0 text-muted"><small i18n>It’s free.</small></p>
+        <p class="m-0 text-body-secondary"><small i18n>It’s free.</small></p>
       </div>
     </div>
   }
diff --git a/apps/client/src/app/pages/register/register-page.html b/apps/client/src/app/pages/register/register-page.html
index be94c35c8d..88efc57d41 100644
--- a/apps/client/src/app/pages/register/register-page.html
+++ b/apps/client/src/app/pages/register/register-page.html
@@ -27,7 +27,7 @@
             </button>
           }
           @if (hasPermissionForAuthToken && hasPermissionForAuthGoogle) {
-            <div class="my-3 text-muted" i18n>or</div>
+            <div class="my-3 text-body-secondary" i18n>or</div>
           }
           @if (hasPermissionForAuthGoogle) {
             <a
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html b/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html
index 8a55cc4b10..2017891510 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html
@@ -45,7 +45,7 @@
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-muted"
+                      class="chevron text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html
index 5aeb878ae6..d3be2cca7d 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html
@@ -9,7 +9,9 @@
           </h1>
         </div>
         @if (product2().isArchived) {
-          <div class="info-container my-4 p-2 rounded text-center text-muted">
+          <div
+            class="info-container my-4 p-2 rounded text-body-secondary text-center"
+          >
             <ng-container i18n>This page has been archived.</ng-container>
           </div>
         }
diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.html b/apps/client/src/app/pages/webauthn/webauthn-page.html
index d4d73386ae..603fcfc0df 100644
--- a/apps/client/src/app/pages/webauthn/webauthn-page.html
+++ b/apps/client/src/app/pages/webauthn/webauthn-page.html
@@ -20,7 +20,7 @@
           >
             <ng-container i18n>Try again</ng-container>
           </button>
-          <div class="my-2 text-muted">
+          <div class="my-2 text-body-secondary">
             <ng-container i18n>or</ng-container>
           </div>
           <button mat-stroked-button (click)="deregisterDevice()">
diff --git a/libs/ui/src/lib/account-balances/account-balances.component.html b/libs/ui/src/lib/account-balances/account-balances.component.html
index ba71167270..c00857a079 100644
--- a/libs/ui/src/lib/account-balances/account-balances.component.html
+++ b/libs/ui/src/lib/account-balances/account-balances.component.html
@@ -24,7 +24,7 @@
           />
           <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
             <ion-icon
-              class="text-muted"
+              class="text-body-secondary"
               matDatepickerToggleIcon
               name="calendar-clear-outline"
             />
diff --git a/libs/ui/src/lib/account-selector/account-selector.component.html b/libs/ui/src/lib/account-selector/account-selector.component.html
index 223765b3f2..ff52e30d88 100644
--- a/libs/ui/src/lib/account-selector/account-selector.component.html
+++ b/libs/ui/src/lib/account-selector/account-selector.component.html
@@ -39,7 +39,7 @@
           <div class="line-height-1">
             <span>{{ account.name }}</span>
             <br />
-            <small class="text-muted">
+            <small class="text-body-secondary">
               @if (account.platform?.name) {
                 {{ account.platform?.name }} ·
               }
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index b3d6f73f5d..8769d5c032 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@@ -196,7 +196,9 @@
           !isUUID(element.assetProfile?.symbol)
         ) {
           <div>
-            <small class="text-muted">{{ element.assetProfile?.symbol }}</small>
+            <small class="text-body-secondary">{{
+              element.assetProfile?.symbol
+            }}</small>
           </div>
         }
       </td>
diff --git a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
index 45a84866bb..2c7498754c 100644
--- a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
+++ b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
@@ -7,7 +7,7 @@
   ><span>{{ item?.name }}</span>
   @if (item && isAsset(item)) {
     <br />
-    <small class="text-muted"
+    <small class="text-body-secondary"
       >{{ item?.symbol }}
       @if (item.currency) {
         · {{ item.currency }}
diff --git a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss
index 7c33c0ff95..da4f828913 100644
--- a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss
+++ b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss
@@ -8,7 +8,7 @@
       color: rgba(var(--light-primary-text));
       font-weight: bold;
 
-      .text-muted {
+      .text-body-secondary {
         color: rgba(var(--light-primary-text)) !important;
       }
     }
@@ -20,7 +20,7 @@
     a {
       color: rgba(var(--dark-primary-text));
 
-      .text-muted {
+      .text-body-secondary {
         color: rgba(var(--dark-primary-text)) !important;
       }
     }
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index 156fff1bb9..2d186f1828 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -49,13 +49,15 @@
           searchResults.holdings?.length === 0 &&
           searchResults.quickLinks?.length === 0
         ) {
-          <div class="px-3 py-1 text-muted" i18n>No results found...</div>
+          <div class="px-3 py-1 text-body-secondary" i18n>
+            No results found...
+          </div>
         } @else {
           @if (
             isLoading.quickLinks || searchResults?.quickLinks?.length !== 0
           ) {
             <div class="mb-2">
-              <div class="fw-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-body-secondary title">
                 <ng-container i18n>Quick Links</ng-container>
               </div>
               @for (
@@ -81,7 +83,7 @@
           }
           @if (isLoading.accounts || searchResults?.accounts?.length !== 0) {
             <div>
-              <div class="fw-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-body-secondary title">
                 <ng-container i18n>Accounts</ng-container>
               </div>
               @for (
@@ -107,7 +109,7 @@
           }
           @if (isLoading.holdings || searchResults?.holdings?.length !== 0) {
             <div>
-              <div class="fw-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-body-secondary title">
                 <ng-container i18n>Holdings</ng-container>
               </div>
               @for (
@@ -137,7 +139,7 @@
               searchResults?.assetProfiles?.length !== 0)
           ) {
             <div class="mt-2">
-              <div class="fw-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-body-secondary title">
                 <ng-container i18n>Asset Profiles</ng-container>
               </div>
               @for (
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index 8263ebb7ed..f65cb3045f 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/libs/ui/src/lib/benchmark/benchmark.component.html
@@ -32,7 +32,7 @@
         </div>
         @if (showSymbol()) {
           <div>
-            <small class="text-muted">{{ element?.symbol }}</small>
+            <small class="text-body-secondary">{{ element?.symbol }}</small>
           </div>
         }
       </td>
@@ -226,7 +226,7 @@
     }"
   />
 } @else if (benchmarks()?.length === 0) {
-  <div class="p-3 text-center text-muted">
+  <div class="p-3 text-body-secondary text-center">
     <small i18n>No data available</small>
   </div>
 }
diff --git a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html
index fb72e72cd7..95261dc1d0 100644
--- a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html
+++ b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html
@@ -1,4 +1,4 @@
-<small class="text-muted">
+<small class="text-body-secondary">
   <ng-container i18n>Market data provided by</ng-container>{{ ' ' }}
   @for (
     dataProviderInfo of dataProviderInfos;
diff --git a/libs/ui/src/lib/fear-and-greed-index/fear-and-greed-index.component.html b/libs/ui/src/lib/fear-and-greed-index/fear-and-greed-index.component.html
index 9ffef3224e..0ba843506d 100644
--- a/libs/ui/src/lib/fear-and-greed-index/fear-and-greed-index.component.html
+++ b/libs/ui/src/lib/fear-and-greed-index/fear-and-greed-index.component.html
@@ -13,7 +13,7 @@
       <div class="h4 mb-0">
         <span class="me-2">{{ fearAndGreedIndexText() }}</span>
         @let value = fearAndGreedIndex() | number: '1.0-0';
-        <small class="text-muted"
+        <small class="text-body-secondary"
           ><span [class.fw-bold]="value">{{ value ?? placeholder }}</span
           >/100</small
         >
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
index 5aad763836..2a6d880373 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
@@ -45,7 +45,7 @@
             [for]="date"
           >
             <ion-icon
-              class="text-muted"
+              class="text-body-secondary"
               matDatepickerToggleIcon
               name="calendar-clear-outline"
             />
diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html
index 1c74f7688f..2c7109d3f0 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html
+++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html
@@ -11,7 +11,7 @@
         <input formControlName="date" matInput [matDatepicker]="date" />
         <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
           <ion-icon
-            class="text-muted"
+            class="text-body-secondary"
             matDatepickerToggleIcon
             name="calendar-clear-outline"
           />
@@ -33,7 +33,7 @@
         type="button"
         (click)="onFetchSymbolForDate()"
       >
-        <ion-icon class="text-muted" name="refresh-outline" />
+        <ion-icon class="text-body-secondary" name="refresh-outline" />
       </button>
     </div>
   </div>
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index e1c012ab15..49f2fa5967 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html
@@ -53,7 +53,9 @@
         </div>
         @if (mode() === 'default') {
           <div>
-            <small class="text-muted">{{ element.assetProfile.symbol }}</small>
+            <small class="text-body-secondary">{{
+              element.assetProfile.symbol
+            }}</small>
           </div>
         }
       </td>
diff --git a/libs/ui/src/lib/membership-card/membership-card.component.html b/libs/ui/src/lib/membership-card/membership-card.component.html
index 7a73995cdb..d399364a2a 100644
--- a/libs/ui/src/lib/membership-card/membership-card.component.html
+++ b/libs/ui/src/lib/membership-card/membership-card.component.html
@@ -16,13 +16,13 @@
       <div class="d-flex justify-content-end">
         <gf-logo
           size="large"
-          [class.text-muted]="name === 'Basic'"
+          [class.text-body-secondary]="name === 'Basic'"
           [showLabel]="false"
         />
       </div>
       @if (hasPermissionToCreateApiKey) {
         <div class="mt-5">
-          <div class="heading text-muted" i18n>API Key</div>
+          <div class="heading text-body-secondary" i18n>API Key</div>
           <div class="align-items-center d-flex">
             <div class="font-monospace value">* * * * * * * * *</div>
             <div class="ms-1">
@@ -41,12 +41,12 @@
       }
       <div class="d-flex justify-content-between">
         <div>
-          <div class="heading text-muted" i18n>Membership</div>
+          <div class="heading text-body-secondary" i18n>Membership</div>
           <div class="text-truncate value">{{ name }}</div>
         </div>
         @if (expiresAt) {
           <div>
-            <div class="heading text-muted" i18n>Valid until</div>
+            <div class="heading text-body-secondary" i18n>Valid until</div>
             <div class="text-truncate value">
               {{ expiresAt }}
             </div>
diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.html b/libs/ui/src/lib/page-tabs/page-tabs.component.html
index 3190101f44..343ce24bcc 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.html
+++ b/libs/ui/src/lib/page-tabs/page-tabs.component.html
@@ -21,7 +21,7 @@
             *ngTemplateOutlet="tabContent; context: { $implicit: tab }"
           />
           <ion-icon
-            class="d-none d-sm-block external-link-icon ms-auto text-muted"
+            class="d-none d-sm-block external-link-icon ms-auto text-body-secondary"
             name="open-outline"
           />
         </button>
diff --git a/libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html b/libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html
index 5b129a7f61..10a82c2823 100644
--- a/libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html
+++ b/libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html
@@ -24,7 +24,7 @@
             <div class="line-height-1 text-truncate">
               <span>{{ holding.assetProfile.name }}</span>
               <br />
-              <small class="text-muted"
+              <small class="text-body-secondary"
                 >{{ holding.assetProfile.symbol }} ·
                 {{ holding.assetProfile.currency }}</small
               >
diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html
index 635346ffb5..9ae7bded3b 100644
--- a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html
+++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html
@@ -4,5 +4,5 @@
   title="Upgrade to Ghostfolio Premium"
   [routerLink]="routerLinkPricing"
   [style.pointer-events]="enableLink ? 'initial' : 'none'"
-  ><ion-icon class="text-muted" name="diamond-outline"
+  ><ion-icon class="text-body-secondary" name="diamond-outline"
 /></a>
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
index 894e261d54..f6dc16b963 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
@@ -25,7 +25,7 @@
             <gf-premium-indicator class="ms-1" [enableLink]="false" />
           }
         </span>
-        <small class="text-muted"
+        <small class="text-body-secondary"
           >{{ lookupItem.symbol }}
           @if (lookupItem.currency) {
             · {{ lookupItem.currency }}
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.html b/libs/ui/src/lib/top-holdings/top-holdings.component.html
index 6fea0f6b07..bfa8da06c6 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -79,7 +79,7 @@
                 >
                   <div class="text-truncate">{{ parentHolding?.name }}</div>
                   <div>
-                    <small class="text-muted">{{
+                    <small class="text-body-secondary">{{
                       parentHolding?.symbol
                     }}</small>
                   </div>
@@ -177,7 +177,7 @@
 }
 
 @if (dataSource.data.length === 0 && !isLoading) {
-  <div class="p-3 text-center text-muted">
+  <div class="p-3 text-body-secondary text-center">
     <small i18n>No data available</small>
   </div>
 }
diff --git a/libs/ui/src/lib/trend-indicator/trend-indicator.component.html b/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
index 7cf6210f85..ef7e1fc4ea 100644
--- a/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
+++ b/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
@@ -9,9 +9,13 @@
   />
 } @else {
   @if (marketState === 'closed' && dateRange === '1d') {
-    <ion-icon class="text-muted" name="pause-circle-outline" [size]="size" />
+    <ion-icon
+      class="text-body-secondary"
+      name="pause-circle-outline"
+      [size]="size"
+    />
   } @else if (marketState === 'delayed' && dateRange === '1d') {
-    <ion-icon class="text-muted" name="time-outline" [size]="size" />
+    <ion-icon class="text-body-secondary" name="time-outline" [size]="size" />
   } @else if (value <= -0.0005) {
     <ion-icon
       class="text-danger"
@@ -21,7 +25,7 @@
     />
   } @else if (value > -0.0005 && value < 0.0005) {
     <ion-icon
-      class="text-muted"
+      class="text-body-secondary"
       name="arrow-forward-circle-outline"
       [size]="size"
     />
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 217f4df11d..f7de0ef1cd 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -20,7 +20,7 @@
         (mousedown)="$event.preventDefault()"
       >
         <ion-icon
-          class="text-muted"
+          class="text-body-secondary"
           [name]="isCopied ? 'checkmark-outline' : 'copy-outline'"
         />
       </button>
@@ -57,7 +57,7 @@
           [class.h4]="size === 'medium'"
         >
           @if (value === null) {
-            <span class="font-monospace text-muted">*****</span>
+            <span class="font-monospace text-body-secondary">*****</span>
           } @else {
             {{ formattedValue }}
           }
@@ -91,7 +91,7 @@
         <ng-container *ngTemplateOutlet="copyIcon" />
       }
       @if (subLabel) {
-        <span class="text-muted"> {{ subLabel }}</span>
+        <span class="text-body-secondary"> {{ subLabel }}</span>
       }
     </div>
   } @else {