From 20b7e4486387e9ff516bcea749cd90193798fc74 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 14 Oct 2026 08:01:23 +0200
Subject: [PATCH 1/4] Task/remove duplicate utility classes (#8162)

Remove duplicate utility classes
---
 apps/client/src/styles.scss | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 739af30ae0..f75a01a028 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -401,12 +401,6 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-mdc-checkbox {
-  label {
-    margin-bottom: 0;
-  }
-}
-
 .mat-mdc-dialog-container {
   .mdc-dialog__content {
     --mat-dialog-supporting-text-color: rgba(var(--dark-primary-text));
@@ -490,10 +484,6 @@ ngx-skeleton-loader {
   min-width: unset !important;
 }
 
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
 .page {
   display: flex;
   overflow-y: auto;
@@ -521,10 +511,6 @@ ngx-skeleton-loader {
   }
 }
 
-.text-decoration-underline {
-  text-decoration: underline !important;
-}
-
 .text-line-through {
   text-decoration: line-through;
 }

From 6ab6151078ce418b8a5af6d9154e1ff51c29178a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 14 Oct 2026 08:02:21 +0200
Subject: [PATCH 2/4] Task/migrate spacing utility classes to Bootstrap 5
 (#8163)

Migrate spacing utility classes
---
 apps/client/src/app/app.component.html        |  2 +-
 .../access-table/access-table.component.html  |  8 +--
 .../account-detail-dialog.html                |  8 +--
 .../admin-market-data/admin-market-data.html  |  4 +-
 .../asset-profile-dialog.html                 | 16 ++---
 .../create-asset-profile-dialog.html          |  4 +-
 .../admin-overview/admin-overview.html        | 10 +--
 .../admin-platform.component.html             |  4 +-
 .../admin-settings.component.html             |  6 +-
 .../admin-tag/admin-tag.component.html        |  4 +-
 .../components/admin-users/admin-users.html   | 14 ++---
 .../benchmark-comparator.component.html       |  4 +-
 .../components/footer/footer.component.html   | 10 +--
 .../components/header/header.component.html   | 14 ++---
 .../holding-detail-dialog.html                | 16 ++---
 .../home-overview/home-overview.html          |  4 +-
 .../home-watchlist/home-watchlist.html        |  2 +-
 .../login-with-access-token-dialog.html       |  2 +-
 .../portfolio-summary.component.html          | 22 +++----
 .../portfolio-summary.component.scss          |  1 +
 .../rule-settings-dialog.html                 |  6 +-
 .../app/components/rule/rule.component.html   | 10 +--
 .../subscription-interstitial-dialog.html     | 30 ++++-----
 .../create-or-update-access-dialog.html       |  2 +-
 .../user-account-access.html                  |  4 +-
 .../user-account-membership.html              |  2 +-
 .../user-account-settings.html                | 48 +++++++-------
 .../user-detail-dialog.html                   |  4 +-
 .../about/oss-friends/oss-friends-page.html   |  2 +-
 .../create-or-update-account-dialog.html      |  6 +-
 .../transfer-balance-dialog.html              |  2 +-
 .../black-friday-2022-page.html               |  2 +-
 .../black-week-2023/black-week-2023-page.html |  2 +-
 .../black-weeks-2024-page.html                |  2 +-
 .../black-weeks-2025-page.html                |  2 +-
 .../pages/faq/overview/faq-overview-page.html |  6 +-
 .../src/app/pages/faq/saas/saas-page.html     |  6 +-
 .../faq/self-hosting/self-hosting-page.html   |  4 +-
 .../src/app/pages/features/features-page.html | 14 ++---
 .../src/app/pages/landing/landing-page.html   | 26 ++++----
 .../create-or-update-activity-dialog.html     |  8 +--
 .../import-activities-dialog.html             | 20 +++---
 .../allocations/allocations-page.html         | 18 +++---
 .../portfolio/analysis/analysis-page.html     | 62 +++++++++----------
 .../app/pages/portfolio/fire/fire-page.html   |  4 +-
 .../portfolio/x-ray/x-ray-page.component.html |  6 +-
 .../src/app/pages/pricing/pricing-page.html   | 60 +++++++++---------
 .../src/app/pages/register/register-page.html |  2 +-
 .../user-account-registration-dialog.html     |  6 +-
 apps/client/src/styles/bootstrap.scss         | 40 ------------
 .../access-level-icon.component.html          |  8 +--
 .../account-balances.component.html           |  6 +-
 .../account-selector.component.html           |  4 +-
 .../accounts-table.component.html             | 12 ++--
 .../activities-table.component.html           | 32 +++++-----
 libs/ui/src/lib/assistant/assistant.html      |  2 +-
 .../lib/benchmark/benchmark.component.html    |  2 +-
 .../currency-selector.component.html          |  4 +-
 .../fear-and-greed-index.component.html       |  4 +-
 .../fire-calculator.component.html            |  8 +--
 .../historical-market-data-editor-dialog.html |  6 +-
 ...storical-market-data-editor.component.html |  2 +-
 libs/ui/src/lib/logo/logo.component.html      |  2 +-
 .../membership-card.component.html            |  2 +-
 .../prompt-dialog/prompt-dialog.html          |  2 +-
 .../lib/page-tabs/page-tabs.component.html    |  4 +-
 .../symbol-autocomplete.component.html        |  2 +-
 .../tags-selector.component.html              |  2 +-
 libs/ui/src/lib/value/value.component.html    | 10 +--
 69 files changed, 318 insertions(+), 357 deletions(-)

diff --git a/apps/client/src/app/app.component.html b/apps/client/src/app/app.component.html
index 5e2b658a28..ba8bcc8c20 100644
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@@ -10,7 +10,7 @@
                 (click)="onCreateAccount()"
               >
                 <span i18n>You are using the Live Demo.</span>
-                <span class="a ml-2 p-1" i18n>Create Account</span>
+                <span class="a ms-2 p-1" i18n>Create Account</span>
               </div>
             </a>
           }
diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index b8c2f8422d..dad200f240 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/apps/client/src/app/components/access-table/access-table.component.html
@@ -70,7 +70,7 @@
               [routerLink]="accessDialogRouterLinks().get(element.id)"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="create-outline" />
+                <ion-icon class="me-2" name="create-outline" />
                 <span><ng-container i18n>Edit</ng-container>...</span>
               </span>
             </a>
@@ -78,7 +78,7 @@
           @if (element.type === 'PUBLIC') {
             <button mat-menu-item (click)="onCopyUrlToClipboard(element.id)">
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="copy-outline" />
+                <ion-icon class="me-2" name="copy-outline" />
                 <span i18n>Copy link to clipboard</span>
               </span>
             </button>
@@ -93,10 +93,10 @@
           <button mat-menu-item (click)="onDeleteAccess(element.id)">
             <span class="align-items-center d-flex">
               @if (isReceivedAccess()) {
-                <ion-icon class="mr-2" name="trash-outline" />
+                <ion-icon class="me-2" name="trash-outline" />
                 <span i18n>Delete</span>
               } @else {
-                <ion-icon class="mr-2" name="remove-circle-outline" />
+                <ion-icon class="me-2" name="remove-circle-outline" />
                 <span i18n>Revoke</span>
               }
             </span>
diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
index 7f50255012..e4ef8fe55f 100644
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
+++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
@@ -41,7 +41,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="reader-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+          <div class="d-none d-sm-block ms-2" i18n>Overview</div>
         </ng-template>
         <div class="container mt-3 p-0">
           <div class="row w-100">
@@ -132,7 +132,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="albums-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Holdings</div>
+          <div class="d-none d-sm-block ms-2" i18n>Holdings</div>
         </ng-template>
         <gf-holdings-table
           [hasPermissionToOpenDetails]="false"
@@ -143,7 +143,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="swap-vertical-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Activities</div>
+          <div class="d-none d-sm-block ms-2" i18n>Activities</div>
         </ng-template>
         <gf-activities-table
           [baseCurrency]="user?.settings?.baseCurrency"
@@ -175,7 +175,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="cash-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Cash Balances</div>
+          <div class="d-none d-sm-block ms-2" i18n>Cash Balances</div>
         </ng-template>
         <gf-account-balances
           [accountBalances]="accountBalances"
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 9a0cacb5e9..e00ee45742 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
@@ -311,7 +311,7 @@
                   "
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="create-outline" />
+                    <ion-icon class="me-2" name="create-outline" />
                     <span><ng-container i18n>Edit</ng-container>...</span>
                   </span>
                 </a>
@@ -334,7 +334,7 @@
                   "
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="trash-outline" />
+                    <ion-icon class="me-2" name="trash-outline" />
                     <span i18n>Delete</span>
                   </span>
                 </button>
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 de3f04235e..1d4cdd8c24 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
@@ -4,7 +4,7 @@
       assetProfile?.name ?? data.symbol
     }}</span>
     <button
-      class="ml-1 no-min-width px-2"
+      class="ms-1 no-min-width px-2"
       mat-button
       type="button"
       [matMenuTriggerFor]="assetProfileActionsMenu"
@@ -112,7 +112,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="reader-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+          <div class="d-none d-sm-block ms-2" i18n>Overview</div>
         </ng-template>
         <div class="container px-0 py-3">
           <div class="row w-100">
@@ -138,7 +138,7 @@
                     />
                   </mat-form-field>
                   <button
-                    class="ml-2 no-min-width px-2"
+                    class="ms-2 no-min-width px-2"
                     color="primary"
                     mat-flat-button
                     type="submit"
@@ -155,7 +155,7 @@
                     <ng-container i18n>Apply</ng-container>
                   </button>
                   <button
-                    class="ml-2 no-min-width px-2"
+                    class="ms-2 no-min-width px-2"
                     mat-button
                     type="button"
                     (click)="onCancelEditAssetProfileIdentifierMode()"
@@ -493,7 +493,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="server-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Historical Market Data</div>
+          <div class="d-none d-sm-block ms-2" i18n>Historical Market Data</div>
         </ng-template>
         <div class="container mt-3 p-0">
           <div class="no-gutters row w-100">
@@ -516,7 +516,7 @@
         <mat-tab>
           <ng-template mat-tab-label>
             <ion-icon name="git-compare-outline" />
-            <div class="d-none d-sm-block ml-2" i18n>Splits</div>
+            <div class="d-none d-sm-block ms-2" i18n>Splits</div>
           </ng-template>
           <div class="container mt-3 p-0">
             <div class="no-gutters row w-100">
@@ -571,7 +571,7 @@
                       [matDatepicker]="dateOfSplit"
                     />
                     <mat-datepicker-toggle
-                      class="mr-2"
+                      class="me-2"
                       matSuffix
                       [for]="dateOfSplit"
                     >
@@ -632,7 +632,7 @@
         <mat-tab>
           <ng-template mat-tab-label>
             <ion-icon name="code-slash-outline" />
-            <div class="d-none d-sm-block ml-2" i18n>Scraper Configuration</div>
+            <div class="d-none d-sm-block ms-2" i18n>Scraper Configuration</div>
           </ng-template>
           <div class="container mt-3 p-0">
             <div [formGroup]="assetProfileForm">
diff --git a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html
index aec21f2b1f..06fa59df07 100644
--- a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html
+++ b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html
@@ -14,9 +14,9 @@
       >
         <mat-radio-button name="auto" value="auto" />
         <label class="m-0" for="auto" i18n>Search</label>
-        <mat-radio-button class="ml-3" name="manual" value="manual" />
+        <mat-radio-button class="ms-3" name="manual" value="manual" />
         <label class="m-0" for="manual" i18n>Add Manually</label>
-        <mat-radio-button class="ml-3" name="currency" value="currency" />
+        <mat-radio-button class="ms-3" name="currency" value="currency" />
         <label class="m-0" for="currency" i18n>Add Currency</label>
       </mat-radio-group>
     </div>
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index aa44b03666..c7300c5ede 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -112,7 +112,7 @@
                     mat-flat-button
                     (click)="onSetSystemMessage()"
                   >
-                    <ion-icon class="mr-1" name="information-circle-outline" />
+                    <ion-icon class="me-1" name="information-circle-outline" />
                     <span i18n>Set Message</span>
                   </button>
                 }
@@ -130,12 +130,12 @@
                     mat-flat-button
                     (click)="onSyncDemoUserAccount()"
                   >
-                    <ion-icon class="mr-1" name="sync-outline" />
+                    <ion-icon class="me-1" name="sync-outline" />
                     <span i18n>Sync Demo User Account</span>
                   </button>
                 }
                 <button color="warn" mat-flat-button (click)="onFlushCache()">
-                  <ion-icon class="mr-1" name="close-circle-outline" />
+                  <ion-icon class="me-1" name="close-circle-outline" />
                   <span i18n>Flush Cache</span>
                 </button>
               </div>
@@ -232,7 +232,7 @@
                         (click)="onDeleteCoupon(element.code)"
                       >
                         <span class="align-items-center d-flex">
-                          <ion-icon class="mr-2" name="trash-outline" />
+                          <ion-icon class="me-2" name="trash-outline" />
                           <span i18n>Delete</span>
                         </span>
                       </button>
@@ -264,7 +264,7 @@
           </mat-card-content>
           <mat-card-actions align="end">
             <form #couponForm="ngForm" class="align-items-stretch d-flex">
-              <mat-form-field appearance="outline" class="mr-1 without-hint">
+              <mat-form-field appearance="outline" class="me-1 without-hint">
                 <mat-select
                   name="duration"
                   [value]="couponDuration"
diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.html b/apps/client/src/app/components/admin-platform/admin-platform.component.html
index b281011abb..0a7daf6840 100644
--- a/apps/client/src/app/components/admin-platform/admin-platform.component.html
+++ b/apps/client/src/app/components/admin-platform/admin-platform.component.html
@@ -79,7 +79,7 @@
         <mat-menu #platformMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="onUpdatePlatform(element)">
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="create-outline" />
+              <ion-icon class="me-2" name="create-outline" />
               <span><ng-container i18n>Edit</ng-container>...</span>
             </span>
           </button>
@@ -90,7 +90,7 @@
             (click)="onDeletePlatform(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>
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 9d15a6a768..eca0f385f5 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
@@ -74,12 +74,12 @@
                 >
                   Ghostfolio Premium
                   <gf-premium-indicator
-                    class="d-inline-block ml-1"
+                    class="d-inline-block ms-1"
                     [enableLink]="false"
                   />
                   @if (isGhostfolioApiKeyValid === false) {
                     <span
-                      class="badge badge-pill badge-secondary ml-2 text-uppercase"
+                      class="badge badge-pill badge-secondary ms-2 text-uppercase"
                       i18n
                       >popular</span
                     >
@@ -193,7 +193,7 @@
                   >
                     <button mat-menu-item (click)="onRemoveGhostfolioApiKey()">
                       <span class="align-items-center d-flex">
-                        <ion-icon class="mr-2" name="trash-outline" />
+                        <ion-icon class="me-2" name="trash-outline" />
                         <span i18n>Remove API key</span>
                       </span>
                     </button>
diff --git a/apps/client/src/app/components/admin-tag/admin-tag.component.html b/apps/client/src/app/components/admin-tag/admin-tag.component.html
index 2e8750093a..fe87d06334 100644
--- a/apps/client/src/app/components/admin-tag/admin-tag.component.html
+++ b/apps/client/src/app/components/admin-tag/admin-tag.component.html
@@ -113,7 +113,7 @@
             (click)="onUpdateTag(element)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="create-outline" />
+              <ion-icon class="me-2" name="create-outline" />
               <span><ng-container i18n>Edit</ng-container>...</span>
             </span>
           </button>
@@ -128,7 +128,7 @@
             (click)="onDeleteTag(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>
diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index f61006e0cc..038d4f4351 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -29,7 +29,7 @@
                 >
                 @if (element.subscription?.expiresAt) {
                   <gf-premium-indicator
-                    class="ml-1"
+                    class="ms-1"
                     i18n-title
                     title="Expires {{
                       formatRelativeTime({
@@ -195,12 +195,12 @@
                 <div class="align-items-center d-flex">
                   @if (element.lastRequestClient) {
                     <ion-icon
-                      class="mr-1"
+                      class="me-1"
                       [name]="requestClientIcons[element.lastRequestClient]"
                       [title]="translate(element.lastRequestClient)"
                     />
                   } @else {
-                    <ion-icon class="hidden mr-1" />
+                    <ion-icon class="hidden me-1" />
                   }
                   {{
                     formatRelativeTime({
@@ -238,7 +238,7 @@
                   [routerLink]="routerLinkAdminControlUsers.concat(element.id)"
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="person-outline" />
+                    <ion-icon class="me-2" name="person-outline" />
                     <span
                       ><ng-container i18n>View Details</ng-container>...</span
                     >
@@ -247,7 +247,7 @@
                 @if (hasPermissionToImpersonateAllUsers) {
                   <button mat-menu-item (click)="onImpersonateUser(element.id)">
                     <span class="align-items-center d-flex">
-                      <ion-icon class="mr-2" name="contract-outline" />
+                      <ion-icon class="me-2" name="contract-outline" />
                       <span i18n>Impersonate User</span>
                     </span>
                   </button>
@@ -257,7 +257,7 @@
                   (click)="onGenerateAccessToken(element.id)"
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="key-outline" />
+                    <ion-icon class="me-2" name="key-outline" />
                     <span i18n>Generate Security Token</span>
                   </span>
                 </button>
@@ -273,7 +273,7 @@
                   (click)="onDeleteUser(element.id)"
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="trash-outline" />
+                    <ion-icon class="me-2" name="trash-outline" />
                     <span i18n>Delete</span>
                   </span>
                 </button>
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 9ce99987a4..884f6b0793 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
@@ -5,7 +5,7 @@
     >
       <span i18n>Performance</span>
       @if (user()?.subscription?.type === 'Basic') {
-        <gf-premium-indicator class="ml-1" />
+        <gf-premium-indicator class="ms-1" />
       }
     </div>
   </div>
@@ -31,7 +31,7 @@
         @if (hasPermissionToAccessAdminControl) {
           <mat-option [routerLink]="routerLinkAdminControlMarketData">
             <div class="align-items-center d-flex">
-              <ion-icon class="mr-2 text-muted" name="arrow-forward-outline" />
+              <ion-icon class="me-2 text-muted" 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 6028b5ea16..8dc1b0b47e 100644
--- a/apps/client/src/app/components/footer/footer.component.html
+++ b/apps/client/src/app/components/footer/footer.component.html
@@ -70,7 +70,7 @@
               href="https://status.ghostfol.io"
               target="_blank"
               title="Ghostfolio Status"
-              >Status<ion-icon class="ml-1" name="open-outline"
+              >Status<ion-icon class="ms-1" name="open-outline"
             /></a>
           </li>
         }
@@ -85,7 +85,7 @@
             href="https://github.com/ghostfolio/ghostfolio"
             target="_blank"
             title="Find Ghostfolio on GitHub"
-            >GitHub<ion-icon class="ml-1" name="open-outline"
+            >GitHub<ion-icon class="ms-1" name="open-outline"
           /></a>
         </li>
         <li>
@@ -94,7 +94,7 @@
             href="https://linkedin.com/company/ghostfolio"
             target="_blank"
             title="Follow Ghostfolio on LinkedIn"
-            >LinkedIn<ion-icon class="ml-1" name="open-outline"
+            >LinkedIn<ion-icon class="ms-1" name="open-outline"
           /></a>
         </li>
         <li>
@@ -103,7 +103,7 @@
             href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
             target="_blank"
             title="Join the Ghostfolio Slack community"
-            >Slack<ion-icon class="ml-1" name="open-outline"
+            >Slack<ion-icon class="ms-1" name="open-outline"
           /></a>
         </li>
         <li>
@@ -112,7 +112,7 @@
             href="https://x.com/ghostfolio_"
             target="_blank"
             title="Follow Ghostfolio on X (formerly Twitter)"
-            >X (formerly Twitter)<ion-icon class="ml-1" name="open-outline"
+            >X (formerly Twitter)<ion-icon class="ms-1" name="open-outline"
           /></a>
         </li>
         <li>&nbsp;</li>
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 48ed63ab34..7c38c51671 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -105,7 +105,7 @@
             <span class="align-items-center d-flex">
               <span i18n>Pricing</span>
               @if (currentRoute() !== routePricing && hasPromotion()) {
-                <span class="badge badge-warning ml-1">%</span>
+                <span class="badge badge-warning ms-1">%</span>
               }
             </span>
           </a>
@@ -198,7 +198,7 @@
                   }
                 </span>
                 <gf-premium-indicator
-                  class="d-inline-block ml-1"
+                  class="d-inline-block ms-1"
                   [enableLink]="false" /></span
             ></a>
             <hr class="m-0" />
@@ -207,7 +207,7 @@
             <button mat-menu-item (click)="impersonateAccount(null)">
               <span class="align-items-center d-flex">
                 <ion-icon
-                  class="mr-2"
+                  class="me-2"
                   [name]="
                     hasImpersonationId
                       ? 'radio-button-off-outline'
@@ -221,7 +221,7 @@
               <button mat-menu-item (click)="impersonateAccount(accessItem.id)">
                 <span class="align-items-center d-flex">
                   <ion-icon
-                    class="mr-2"
+                    class="me-2"
                     name="square-outline"
                     [name]="
                       accessItem.id === impersonationId
@@ -313,7 +313,7 @@
               <span class="align-items-center d-flex">
                 <span i18n>Pricing</span>
                 @if (currentRoute() !== routePricing && hasPromotion()) {
-                  <span class="badge badge-warning ml-1">%</span>
+                  <span class="badge badge-warning ms-1">%</span>
                 }
               </span>
             </a>
@@ -388,7 +388,7 @@
             <span class="align-items-center d-flex">
               <span i18n>Pricing</span>
               @if (currentRoute() !== routePricing && hasPromotion()) {
-                <span class="badge badge-warning ml-1">%</span>
+                <span class="badge badge-warning ms-1">%</span>
               }
             </span>
           </a>
@@ -427,7 +427,7 @@
         </button>
       </li>
       @if (currentRoute() !== 'register' && hasPermissionToCreateUser) {
-        <li class="list-inline-item ml-1">
+        <li class="list-inline-item ms-1">
           <a
             class="d-none d-sm-block px-3 rounded"
             color="primary"
diff --git a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
index 618209a9f6..efb693e59a 100644
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
@@ -46,7 +46,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="reader-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+          <div class="d-none d-sm-block ms-2" i18n>Overview</div>
         </ng-template>
         <div class="container mt-3 p-0">
           <div class="row w-100">
@@ -371,7 +371,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="swap-vertical-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Activities</div>
+          <div class="d-none d-sm-block ms-2" i18n>Activities</div>
         </ng-template>
         <gf-activities-table
           [baseCurrency]="data.baseCurrency"
@@ -405,7 +405,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="wallet-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Accounts</div>
+          <div class="d-none d-sm-block ms-2" i18n>Accounts</div>
         </ng-template>
         <gf-accounts-table
           [accounts]="accounts"
@@ -425,9 +425,9 @@
         <mat-tab [disabled]="!hasPermissionToReadMarketDataOfOwnAssetProfile">
           <ng-template mat-tab-label>
             <ion-icon name="server-outline" />
-            <div class="d-none d-sm-block ml-2" i18n>Market Data</div>
+            <div class="d-none d-sm-block ms-2" i18n>Market Data</div>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" [enableLink]="false" />
+              <gf-premium-indicator class="ms-1" [enableLink]="false" />
             }
           </ng-template>
           <gf-historical-market-data-editor
@@ -459,7 +459,7 @@
                 mat-stroked-button
                 (click)="onCloseHolding()"
               >
-                <ion-icon class="mr-1" name="arrow-down-circle-outline" /><span
+                <ion-icon class="me-1" name="arrow-down-circle-outline" /><span
                   i18n
                   >Close Holding</span
                 >
@@ -473,7 +473,7 @@
                 color="warn"
                 mat-stroked-button
                 [href]="reportDataGlitchMailHref"
-                ><ion-icon class="mr-1" name="flag-outline" /><span i18n
+                ><ion-icon class="me-1" name="flag-outline" /><span i18n
                   >Report Data Glitch</span
                 >...</a
               >
@@ -488,7 +488,7 @@
                   )
                 "
                 (click)="onClose()"
-                ><ion-icon class="mr-1" name="create-outline" /><span i18n
+                ><ion-icon class="me-1" name="create-outline" /><span i18n
                   >Manage Asset Profile</span
                 >...</a
               >
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 f8e696595c..fd3d29ed70 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@@ -70,7 +70,7 @@
           <gf-line-chart
             class="position-absolute"
             unit="%"
-            [class.pr-3]="deviceType() === 'mobile'"
+            [class.pe-3]="deviceType() === 'mobile'"
             [colorScheme]="user()?.settings?.colorScheme"
             [hidden]="historicalDataItems()?.length === 0"
             [historicalDataItems]="historicalDataItems()"
@@ -96,7 +96,7 @@
         </div>
       </div>
       @if (showExperimentalHoldings()) {
-        <div class="col-xl-4 d-none d-xl-block ml-5 p-0 position-relative">
+        <div class="col-xl-4 d-none d-xl-block ms-5 p-0 position-relative">
           <mat-card
             appearance="outlined"
             class="h-100 holdings position-absolute w-100"
diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.html b/apps/client/src/app/components/home-watchlist/home-watchlist.html
index 11b2d9c2fe..adf262cfd8 100644
--- a/apps/client/src/app/components/home-watchlist/home-watchlist.html
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.html
@@ -3,7 +3,7 @@
     <span class="align-items-center d-flex justify-content-center">
       <span i18n>Watchlist</span>
       @if (user?.subscription?.type === 'Basic') {
-        <gf-premium-indicator class="ml-1" />
+        <gf-premium-indicator class="ms-1" />
       }
     </span>
   </h1>
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 4f4bb18678..0cd23210b6 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
@@ -40,7 +40,7 @@
             href="../api/v1/auth/google"
             mat-stroked-button
             ><img
-              class="mr-2"
+              class="me-2"
               src="../assets/icons/google.svg"
               style="height: 1rem"
             /><span i18n>Sign in with Google</span></a
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 9cbf04575a..41faf4f3ff 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
@@ -27,7 +27,7 @@
           other {activities}
         }</ng-container>
         <span
-          class="align-items-center d-none d-sm-flex ml-1"
+          class="align-items-center d-none d-sm-flex ms-1"
           matTooltipPosition="above"
           [matTooltip]="buyAndSellActivitiesTooltip"
         >
@@ -116,7 +116,7 @@
     <div class="flex-grow-1 text-truncate" i18n>Fees</div>
     <div class="d-flex justify-content-end">
       @if (isNumber(summary?.fees)) {
-        <span class="mr-1">-</span>
+        <span class="me-1">-</span>
       }
       <gf-value
         class="justify-content-end"
@@ -154,7 +154,7 @@
         PerformanceCalculationType.ROAI
       ) {
         <abbr
-          class="d-none d-sm-inline-block initialism ml-2 text-muted"
+          class="d-none d-sm-inline-block initialism ms-2 text-muted"
           i18n-title
           title="Return on Average Investment (total return with dividends)"
           >(ROAI)</abbr
@@ -214,7 +214,7 @@
     >
       @if (hasHoldingsBreakdown) {
         <span
-          class="align-items-center caret-container d-inline-flex justify-content-center ml-n3"
+          class="align-items-center caret-container d-inline-flex justify-content-center"
         >
           <ion-icon
             class="caret text-muted"
@@ -230,7 +230,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ml-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-muted"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -292,7 +292,7 @@
     >
       @if (hasCashBreakdown) {
         <span
-          class="align-items-center caret-container d-inline-flex justify-content-center ml-n3"
+          class="align-items-center caret-container d-inline-flex justify-content-center"
         >
           <ion-icon
             class="caret text-muted"
@@ -308,7 +308,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ml-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-muted"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -371,7 +371,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ml-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-muted"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -398,7 +398,7 @@
     <div class="flex-grow-1 text-truncate" i18n>Liabilities</div>
     <div class="d-flex justify-content-end">
       @if (isNumber(summary?.liabilitiesInBaseCurrency)) {
-        <span class="mr-1">-</span>
+        <span class="me-1">-</span>
       }
       <gf-value
         class="justify-content-end"
@@ -456,7 +456,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ml-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-muted"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -486,7 +486,7 @@
         user?.subscription?.type !== 'Basic'
       ) {
         <ion-icon
-          class="mr-1 text-muted"
+          class="me-1 text-muted"
           name="ellipsis-horizontal-circle-outline"
         />
       }
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
index 534976f11d..498a07e63e 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
@@ -2,6 +2,7 @@
   display: block;
 
   .caret-container {
+    margin-left: -1rem;
     width: 1rem;
 
     .caret {
diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
index 14fe4d228f..978fc9f03f 100644
--- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
+++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
@@ -15,7 +15,7 @@
           <h6 class="d-flex mb-0">
             <ng-container i18n>Threshold range</ng-container>:
             <gf-value
-              class="ml-1"
+              class="ms-1"
               [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
@@ -61,7 +61,7 @@
           <h6 class="d-flex mb-0">
             <ng-container i18n>Threshold Min</ng-container>:
             <gf-value
-              class="ml-1"
+              class="ms-1"
               [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
@@ -99,7 +99,7 @@
           <h6 class="d-flex mb-0">
             <ng-container i18n>Threshold Max</ng-container>:
             <gf-value
-              class="ml-1"
+              class="ms-1"
               [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
diff --git a/apps/client/src/app/components/rule/rule.component.html b/apps/client/src/app/components/rule/rule.component.html
index 324bf03cff..2322bed990 100644
--- a/apps/client/src/app/components/rule/rule.component.html
+++ b/apps/client/src/app/components/rule/rule.component.html
@@ -4,7 +4,7 @@
       <div>
         <ngx-skeleton-loader
           animation="pulse"
-          class="mr-2"
+          class="me-2"
           [theme]="{
             height: '2rem',
             width: '2rem'
@@ -13,7 +13,7 @@
       </div>
     } @else {
       <div
-        class="align-items-center d-flex icon-container mr-2 px-2"
+        class="align-items-center d-flex icon-container me-2 px-2"
         [class]="{
           okay: rule?.value === true,
           warn: rule?.value === false
@@ -65,7 +65,7 @@
             @if (rule?.isActive && rule?.configuration) {
               <button mat-menu-item (click)="onCustomizeRule(rule)">
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="options-outline" />
+                  <ion-icon class="me-2" name="options-outline" />
                   <span><ng-container i18n>Customize</ng-container>...</span>
                 </span>
               </button>
@@ -74,12 +74,12 @@
             <button mat-menu-item (click)="onUpdateRule(rule)">
               @if (rule?.isActive) {
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="remove-circle-outline" />
+                  <ion-icon class="me-2" name="remove-circle-outline" />
                   <span i18n>Deactivate</span>
                 </span>
               } @else {
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="add-circle-outline" />
+                  <ion-icon class="me-2" name="add-circle-outline" />
                   <span i18n>Activate</span>
                 </span>
               }
diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
index d86ea28160..fa73e585a9 100644
--- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
+++ b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
@@ -9,7 +9,7 @@
       <div>
         <h5 class="align-items-center d-flex justify-content-center mb-3">
           <span>Ghostfolio Premium</span>
-          <gf-premium-indicator class="ml-1" [enableLink]="false" />
+          <gf-premium-indicator class="ms-1" [enableLink]="false" />
         </h5>
         <div class="font-weight-normal h5 mb-3 text-center" i18n>
           Are you an ambitious investor who needs the full picture?
@@ -18,29 +18,29 @@
           Upgrade to Ghostfolio Premium today and gain access to exclusive
           features to enhance your investment experience:
         </p>
-        <ul class="list-unstyled mb-3 pl-3">
+        <ul class="list-unstyled mb-3 ps-3">
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>Portfolio Summary</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>Portfolio Allocations</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>Performance Benchmarks</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>FIRE Calculator</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>Professional Data Provider</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>and more Features...</span>
           </li>
         </ul>
@@ -68,7 +68,7 @@
         (click)="closeDialog()"
       >
         <span i18n>Upgrade Plan</span>
-        <ion-icon class="ml-1" name="arrow-forward-outline" />
+        <ion-icon class="ms-1" name="arrow-forward-outline" />
       </a>
     </div>
   }
@@ -86,7 +86,7 @@
         <p class="my-2 text-center" i18n>with</p>
         <h5 class="align-items-center d-flex justify-content-center">
           <span>Ghostfolio Premium</span>
-          <gf-premium-indicator class="ml-1" [enableLink]="false" />
+          <gf-premium-indicator class="ms-1" [enableLink]="false" />
         </h5>
       </div>
     </div>
@@ -108,7 +108,7 @@
         (click)="closeDialog()"
       >
         <span i18n>Upgrade Plan</span>
-        <ion-icon class="ml-1" name="arrow-forward-outline" />
+        <ion-icon class="ms-1" name="arrow-forward-outline" />
       </a>
     </div>
   }
@@ -122,7 +122,7 @@
       <div>
         <h5 class="align-items-center d-flex justify-content-center">
           <span>Ghostfolio Premium</span>
-          <gf-premium-indicator class="ml-1" [enableLink]="false" />
+          <gf-premium-indicator class="ms-1" [enableLink]="false" />
         </h5>
         <p class="my-2 text-center" i18n>for</p>
         <div class="font-weight-normal h5 text-center">
@@ -151,7 +151,7 @@
         (click)="closeDialog()"
       >
         <span i18n>Upgrade Plan</span>
-        <ion-icon class="ml-1" name="arrow-forward-outline" />
+        <ion-icon class="ms-1" name="arrow-forward-outline" />
       </a>
     </div>
   }
@@ -161,7 +161,7 @@
       mat-dialog-title
     >
       <span>Ghostfolio Premium</span>
-      <gf-premium-indicator class="ml-1" [enableLink]="false" />
+      <gf-premium-indicator class="ms-1" [enableLink]="false" />
     </h1>
     <div class="flex-grow-1 pt-0" mat-dialog-content>
       <div class="align-items-center d-flex h-100 justify-content-center">
@@ -191,7 +191,7 @@
         (click)="closeDialog()"
       >
         <span i18n>Join now</span>
-        <ion-icon class="ml-1" name="arrow-forward-outline" />
+        <ion-icon class="ms-1" name="arrow-forward-outline" />
       </a>
     </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 82d67bfba3..04a59596e5 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
@@ -58,7 +58,7 @@
           [matDatepicker]="expiresAt"
           [min]="minExpiresAt"
         />
-        <mat-datepicker-toggle class="mr-2" matSuffix [for]="expiresAt">
+        <mat-datepicker-toggle class="me-2" matSuffix [for]="expiresAt">
           <ion-icon
             class="text-muted"
             matDatepickerToggleIcon
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.html b/apps/client/src/app/components/user-account-access/user-account-access.html
index 9694c94569..b63858f6de 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.html
+++ b/apps/client/src/app/components/user-account-access/user-account-access.html
@@ -31,7 +31,7 @@
             />
           </button>
         </mat-form-field>
-        <div class="pl-2">
+        <div class="ps-2">
           <button
             color="warn"
             mat-flat-button
@@ -65,7 +65,7 @@
   <h1 class="align-items-center d-flex h3 justify-content-center mb-3">
     <span i18n>Granted Access</span>
     @if (user?.subscription?.type === 'Basic') {
-      <gf-premium-indicator class="ml-1" />
+      <gf-premium-indicator class="ms-1" />
     }
   </h1>
   <gf-access-table
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 2287c0643a..fac99012f6 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
@@ -57,7 +57,7 @@
                   [href]="trySubscriptionMailHref"
                   ><span i18n>Try Premium</span>
                   <gf-premium-indicator
-                    class="d-inline-block ml-1"
+                    class="d-inline-block ms-1"
                     [enableLink]="false"
                   />
                 </a>
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 4fbe519a84..f392576bb5 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
@@ -12,7 +12,7 @@
             <div class="align-items-center d-flex pt-1 pt-1 w-50">
               <ng-container i18n>Base Currency</ng-container>
             </div>
-            <div class="pl-1 w-50" [formGroup]="baseCurrencyForm">
+            <div class="ps-1 w-50" [formGroup]="baseCurrencyForm">
               <mat-form-field
                 appearance="outline"
                 class="w-100"
@@ -35,7 +35,7 @@
               <div class="align-items-center d-flex pt-1 pt-1 w-50">
                 <ng-container i18n>Performance Calculation</ng-container>
               </div>
-              <div class="pl-1 w-50">
+              <div class="ps-1 w-50">
                 <mat-form-field appearance="outline" class="w-100 without-hint">
                   <mat-select
                     name="performanceCalculationType"
@@ -57,7 +57,7 @@
             </div>
           }
           <div class="align-items-center d-flex mb-2">
-            <div class="pr-1 w-50">
+            <div class="pe-1 w-50">
               <div i18n>Language</div>
               @if (isCommunityLanguage()) {
                 <div class="hint-text text-muted" i18n>
@@ -72,7 +72,7 @@
                 </div>
               }
             </div>
-            <div class="pl-1 w-50">
+            <div class="ps-1 w-50">
               <mat-form-field appearance="outline" class="w-100 without-hint">
                 <mat-select
                   name="language"
@@ -152,13 +152,13 @@
             </div>
           </div>
           <div class="align-items-center d-flex mb-4">
-            <div class="pr-1 w-50">
+            <div class="pe-1 w-50">
               <div i18n>Locale</div>
               <div class="hint-text text-muted">
                 <ng-container i18n>Date and number format</ng-container>
               </div>
             </div>
-            <div class="pl-1 w-50">
+            <div class="ps-1 w-50">
               <mat-form-field
                 appearance="outline"
                 class="w-100 with-value-hint"
@@ -197,10 +197,10 @@
             </div>
           </div>
           <div class="d-flex">
-            <div class="align-items-center d-flex pr-1 pt-1 w-50">
+            <div class="align-items-center d-flex pe-1 pt-1 w-50">
               <ng-container i18n>Appearance</ng-container>
             </div>
-            <div class="pl-1 w-50">
+            <div class="ps-1 w-50">
               <mat-form-field appearance="outline" class="w-100 without-hint">
                 <mat-select
                   class="with-placeholder-as-option"
@@ -222,14 +222,14 @@
         </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           <div i18n>Presenter View</div>
           <div class="hint-text text-muted" i18n>
             Protection for sensitive information like absolute performances and
             quantity values
           </div>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -240,13 +240,13 @@
         </div>
       </div>
       <div class="d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           <div i18n>Zen Mode</div>
           <div class="hint-text text-muted" i18n>
             Distraction-free experience for turbulent times
           </div>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -257,11 +257,11 @@
         </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           <div i18n>Biometric Authentication</div>
           <div class="hint-text text-muted" i18n>Sign in with fingerprint</div>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -274,13 +274,13 @@
         </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           <div i18n>Experimental Features</div>
           <div class="hint-text text-muted" i18n>
             Sneak peek at upcoming functionality
           </div>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -292,13 +292,13 @@
       </div>
       @if (deviceType() !== 'mobile' && hasPermissionToEnableGhostfolioAi) {
         <div class="align-items-center d-flex mt-4 py-1">
-          <div class="pr-1 w-50">
+          <div class="pe-1 w-50">
             <div>Ghostfolio AI</div>
             <div class="hint-text text-muted" i18n>
               Powered by third-party AI providers
             </div>
           </div>
-          <div class="pl-1 w-50">
+          <div class="ps-1 w-50">
             <mat-slide-toggle
               color="primary"
               hideIcon="true"
@@ -310,10 +310,10 @@
         </div>
       }
       <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           Ghostfolio <ng-container i18n>User ID</ng-container>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <gf-value
             class="text-monospace"
             [enableCopyToClipboardButton]="true"
@@ -323,8 +323,8 @@
         </div>
       </div>
       <div class="align-items-center d-flex py-1">
-        <div class="pr-1 w-50"></div>
-        <div class="pl-1 text-monospace w-50">
+        <div class="pe-1 w-50"></div>
+        <div class="ps-1 text-monospace w-50">
           <button color="primary" i18n mat-flat-button (click)="onExport()">
             Export Data
           </button>
@@ -335,8 +335,8 @@
       ) {
         <hr class="mt-5" />
         <div class="d-flex py-1">
-          <div class="pr-1 text-danger w-50" i18n>Danger Zone</div>
-          <div class="pl-1 w-50">
+          <div class="pe-1 text-danger w-50" i18n>Danger Zone</div>
+          <div class="ps-1 w-50">
             @if (
               hasPermissionToDeleteOwnUser &&
               hasPermissionToUpdateOwnAccessToken
diff --git a/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html b/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html
index d52a7d5b51..c11328225d 100644
--- a/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html
+++ b/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html
@@ -1,6 +1,6 @@
 <div class="align-items-center d-flex justify-content-end" mat-dialog-title>
   <button
-    class="ml-1 no-min-width px-2"
+    class="ms-1 no-min-width px-2"
     mat-button
     type="button"
     [matMenuTriggerFor]="userDetailActionsMenu"
@@ -229,7 +229,7 @@
                   >
                     @if (element.price === null) {
                       <span>–</span>
-                      <span class="ml-1">{{ baseCurrency }}</span>
+                      <span class="ms-1">{{ baseCurrency }}</span>
                     } @else {
                       <gf-value
                         class="d-inline-block justify-content-end"
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 48985eaa3f..dbe79fb476 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
@@ -27,7 +27,7 @@
                     <span
                       ><ng-container i18n>Visit</ng-container>
                       {{ ossFriend.name }}</span
-                    ><ion-icon class="ml-1" name="arrow-forward-outline" />
+                    ><ion-icon class="ms-1" name="arrow-forward-outline" />
                   </a>
                 </mat-card-actions>
               </mat-card>
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
index 44c16d34de..46b8fcc8f2 100644
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
+++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
@@ -38,7 +38,7 @@
           type="number"
           (keydown.enter)="$event.stopPropagation()"
         />
-        <span class="ml-2" matTextSuffix>{{
+        <span class="ms-2" matTextSuffix>{{
           accountForm.get('currency')?.value
         }}</span>
       </mat-form-field>
@@ -48,7 +48,7 @@
         <mat-label i18n>Platform</mat-label>
         @if (selectedPlatform) {
           <gf-entity-logo
-            class="ml-3"
+            class="ms-3"
             matPrefix
             [hasPlaceholder]="true"
             [tooltip]="selectedPlatform.name ?? ''"
@@ -71,7 +71,7 @@
             <mat-option [value]="platformEntry">
               <span class="d-flex">
                 <gf-entity-logo
-                  class="mr-1"
+                  class="me-1"
                   [hasPlaceholder]="true"
                   [tooltip]="platformEntry.name ?? ''"
                   [url]="platformEntry.url"
diff --git a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html
index 2e9f605231..11d7eaedcc 100644
--- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html
+++ b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html
@@ -29,7 +29,7 @@
           type="number"
           (keydown.enter)="$event.stopPropagation()"
         />
-        <span class="ml-2" matTextSuffix>{{ currency }}</span>
+        <span class="ms-2" matTextSuffix>{{ currency }}</span>
       </mat-form-field>
     </div>
   </div>
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 4366da93eb..c73808f570 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
@@ -18,7 +18,7 @@
             <span class="align-items-center d-inline-flex"
               ><strong>Ghostfolio Premium</strong>
               <gf-premium-indicator
-                class="d-inline-block ml-1"
+                class="d-inline-block ms-1"
                 [enableLink]="false"
               />
             </span>
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 5ad9193b4a..93aaab7df8 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
@@ -19,7 +19,7 @@
             <span class="align-items-center d-inline-flex"
               ><strong>Ghostfolio Premium</strong>
               <gf-premium-indicator
-                class="d-inline-block ml-1"
+                class="d-inline-block ms-1"
                 [enableLink]="false"
               />
             </span>
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 f975737226..6f38066aa1 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
@@ -19,7 +19,7 @@
             <span class="align-items-center d-inline-flex"
               >Ghostfolio Premium
               <gf-premium-indicator
-                class="d-inline-block ml-1"
+                class="d-inline-block ms-1"
                 [enableLink]="false"
               />
             </span>
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 c92616d668..54c982893a 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
@@ -18,7 +18,7 @@
             <span class="align-items-center d-inline-flex"
               >Ghostfolio Premium
               <gf-premium-indicator
-                class="d-inline-block ml-1"
+                class="d-inline-block ms-1"
                 [enableLink]="false"
               />
             </span>
diff --git a/apps/client/src/app/pages/faq/overview/faq-overview-page.html b/apps/client/src/app/pages/faq/overview/faq-overview-page.html
index cca488898e..fd94810a30 100644
--- a/apps/client/src/app/pages/faq/overview/faq-overview-page.html
+++ b/apps/client/src/app/pages/faq/overview/faq-overview-page.html
@@ -136,7 +136,7 @@
           fully available as open source software (OSS). Thanks to our generous
           <a class="align-items-center d-inline-flex" [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           users and
@@ -164,7 +164,7 @@
           >By offering
           <a class="align-items-center d-inline-flex" [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false" /></a
           >, a subscription plan with a managed hosting service and enhanced
           features, we fund our business while providing added value to our
@@ -190,7 +190,7 @@
           >Any support for Ghostfolio is welcome. Be it with a
           <a class="align-items-center d-inline-flex" [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           subscription to finance the operational costs for the hosting
diff --git a/apps/client/src/app/pages/faq/saas/saas-page.html b/apps/client/src/app/pages/faq/saas/saas-page.html
index dbb50e5c0c..7ad514e146 100644
--- a/apps/client/src/app/pages/faq/saas/saas-page.html
+++ b/apps/client/src/app/pages/faq/saas/saas-page.html
@@ -54,7 +54,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           is a fully managed Ghostfolio cloud offering for ambitious investors.
@@ -78,7 +78,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           by signing up for Ghostfolio and applying for a trial (see
@@ -114,7 +114,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           does not include auto-renewal. Upon expiration, you can choose whether
diff --git a/apps/client/src/app/pages/faq/self-hosting/self-hosting-page.html b/apps/client/src/app/pages/faq/self-hosting/self-hosting-page.html
index 7d5776d0ca..85461f8af7 100644
--- a/apps/client/src/app/pages/faq/self-hosting/self-hosting-page.html
+++ b/apps/client/src/app/pages/faq/self-hosting/self-hosting-page.html
@@ -145,7 +145,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false" /></a
           >), <code>MANUAL</code>, and <code>YAHOO</code> are officially
           supported while all other data providers are considered
@@ -166,7 +166,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           subscription via an API key.</mat-card-content
diff --git a/apps/client/src/app/pages/features/features-page.html b/apps/client/src/app/pages/features/features-page.html
index 9bec1073a5..1930edb331 100644
--- a/apps/client/src/app/pages/features/features-page.html
+++ b/apps/client/src/app/pages/features/features-page.html
@@ -140,7 +140,7 @@
                 <h4 class="gf-text-wrap-balance">
                   <span i18n>Portfolio Calculations</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -160,7 +160,7 @@
                 <h4 class="gf-text-wrap-balance">
                   <span i18n>Portfolio Allocations</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -178,7 +178,7 @@
                 <h4 class="gf-text-wrap-balance">
                   <span i18n>Static Analysis</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -196,7 +196,7 @@
                 <h4 class="gf-text-wrap-balance">
                   <span i18n>Watchlist</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -214,11 +214,11 @@
                   <span class="gf-text-wrap-balance">
                     <span>Ghostfolio MCP</span>
                     @if (hasPermissionForSubscription) {
-                      <gf-premium-indicator class="d-inline-block ml-1" />
+                      <gf-premium-indicator class="d-inline-block ms-1" />
                     }
                   </span>
                   <span
-                    class="badge badge-pill badge-secondary ml-auto text-uppercase"
+                    class="badge badge-pill badge-secondary ms-auto text-uppercase"
                     i18n
                     >new</span
                   >
@@ -238,7 +238,7 @@
                 <div class="flex-grow-1">
                   <h4 class="gf-text-wrap-balance">
                     <span i18n>Market Mood</span>
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   </h4>
                   <p class="m-0">
                     Check the current market mood (<a
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index 1e15a2314a..afff5b7b7c 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@@ -177,43 +177,43 @@
       </p>
       <ul class="list-unstyled">
         <li class="d-flex mb-3">
-          <span class="mr-3">💼 </span
+          <span class="me-3">💼 </span
           ><span i18n
             >trading stocks, ETFs or cryptocurrencies on multiple
             platforms</span
           >
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🏦</span
+          <span class="me-3">🏦</span
           ><span i18n>pursuing a buy & hold strategy</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🎯</span
+          <span class="me-3">🎯</span
           ><span i18n
             >interested in getting insights of your portfolio composition</span
           >
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">👻</span
+          <span class="me-3">👻</span
           ><span i18n>valuing privacy and data ownership</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🧘</span><span i18n>into minimalism</span>
+          <span class="me-3">🧘</span><span i18n>into minimalism</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🧺</span
+          <span class="me-3">🧺</span
           ><span i18n>caring about diversifying your financial resources</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🆓</span
+          <span class="me-3">🆓</span
           ><span i18n>interested in financial independence</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🙅</span
+          <span class="me-3">🙅</span
           ><span i18n>saying no to spreadsheets in {{ currentYear }}</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">😎</span><span i18n>still reading this list</span>
+          <span class="me-3">😎</span><span i18n>still reading this list</span>
         </li>
       </ul>
       <div class="mt-4 text-center">
@@ -236,7 +236,7 @@
           <div #carouselItem gfCarouselItem>
             <div class="d-flex px-4">
               <gf-logo
-                class="mr-3 mt-2 pt-1"
+                class="me-3 mt-2 pt-1"
                 size="medium"
                 [showLabel]="false"
               />
@@ -296,7 +296,7 @@
                 <small>* no e-mail address nor credit card required</small>
               </div>
             </div>
-            <div class="pl-2 text-muted text-right">1</div>
+            <div class="ps-2 text-muted text-right">1</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -308,7 +308,7 @@
                 Add any of your historical transactions
               </div>
             </div>
-            <div class="pl-2 text-muted text-right">2</div>
+            <div class="ps-2 text-muted text-right">2</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -320,7 +320,7 @@
                 Get valuable insights of your portfolio composition
               </div>
             </div>
-            <div class="pl-2 text-muted text-right">3</div>
+            <div class="ps-2 text-muted text-right">3</div>
           </mat-card-content>
         </mat-card>
       </div>
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 104d937b35..11e707f89d 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
@@ -142,7 +142,7 @@
           [matDatepicker]="date"
           [matDatepickerFilter]="dateFilter"
         />
-        <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
+        <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
           <ion-icon
             class="text-muted"
             matDatepickerToggleIcon
@@ -193,7 +193,7 @@
           </mat-label>
           <input formControlName="unitPrice" matInput type="number" />
           <div
-            class="ml-2"
+            class="ms-2"
             matTextSuffix
             [class.d-none]="!activityForm.get('currency')?.value"
           >
@@ -215,7 +215,7 @@
           isToday(activityForm.get('date')?.value)
         ) {
           <button
-            class="ml-2 mt-1 no-min-width"
+            class="ms-2 mt-1 no-min-width"
             i18n-title
             mat-button
             title="Apply current market price"
@@ -239,7 +239,7 @@
         <mat-label i18n>Fee</mat-label>
         <input formControlName="fee" matInput type="number" />
         <div
-          class="ml-2"
+          class="ms-2"
           matTextSuffix
           [class.d-none]="!activityForm.get('currency')?.value"
         >
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 dea1acf5c6..f05a5b83ea 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
@@ -99,7 +99,7 @@
             }
             <p class="mb-0 mt-3 text-center">
               <small>
-                <span class="mr-1" i18n
+                <span class="me-1" i18n
                   >The following file formats are supported:</span
                 >
                 <a
@@ -108,7 +108,7 @@
                   >CSV</a
                 >
                 @if (isGhostfolioAiEnabled) {
-                  <span class="mr-1">, JPG,</span>
+                  <span class="me-1">, JPG,</span>
                 } @else {
                   <span class="mx-1" i18n>or</span>
                 }
@@ -165,9 +165,9 @@
             @if (rowsWithoutMatch.length > 0) {
               <mat-accordion class="d-block mb-3" displayMode="flat">
                 <mat-expansion-panel>
-                  <mat-expansion-panel-header class="pl-1">
+                  <mat-expansion-panel-header class="ps-1">
                     <mat-panel-title>
-                      <div class="align-items-center d-flex mr-2">
+                      <div class="align-items-center d-flex me-2">
                         <ion-icon name="warning-outline" />
                       </div>
                       <ng-container i18n>{rowsWithoutMatch.length, plural,
@@ -188,8 +188,8 @@
               </mat-accordion>
             }
             @if (isMaxActivitiesOfGhostfolioAiReached) {
-              <div class="align-items-center d-flex mb-3 pl-1">
-                <ion-icon class="mr-2" name="warning-outline" />
+              <div class="align-items-center d-flex mb-3 ps-1">
+                <ion-icon class="me-2" name="warning-outline" />
                 <span i18n
                   >Ghostfolio AI has processed the maximum of
                   {{ maxActivitiesOfGhostfolioAi }} activities. The file can
@@ -223,7 +223,7 @@
               <ng-container i18n>Back</ng-container>
             </button>
             <button
-              class="ml-1"
+              class="ms-1"
               color="primary"
               mat-flat-button
               [disabled]="!selectedActivities?.length"
@@ -237,10 +237,10 @@
             <mat-accordion displayMode="flat">
               @for (message of errorMessages; track message; let i = $index) {
                 <mat-expansion-panel [disabled]="!details[i]">
-                  <mat-expansion-panel-header class="pl-1">
+                  <mat-expansion-panel-header class="ps-1">
                     <mat-panel-title class="w-100">
                       <div class="d-flex w-100">
-                        <div class="align-items-center d-flex mr-2">
+                        <div class="align-items-center d-flex me-2">
                           <ion-icon name="warning-outline" />
                         </div>
                         <div class="text-truncate" title="{{ message }}">
@@ -261,7 +261,7 @@
               <ng-container i18n>Back</ng-container>
             </button>
             <button
-              class="ml-1"
+              class="ms-1"
               color="primary"
               mat-flat-button
               [disabled]="true"
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
index 79f5e4ecbf..01aee0b447 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
@@ -59,7 +59,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Currency</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -81,7 +81,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Asset Class</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -126,7 +126,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Sector</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -149,7 +149,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Continent</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -171,7 +171,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Market</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -194,7 +194,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>Regions</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -262,7 +262,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Country</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -304,7 +304,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By ETF Provider</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -329,7 +329,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By ETF Holding</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
           <mat-card-subtitle>
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 6f05dae069..0fb6139fa9 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@@ -26,16 +26,16 @@
               >
                 <span class="align-items-center d-flex">
                   @if (user?.subscription?.type === 'Basic') {
-                    <gf-premium-indicator class="mr-2" />
+                    <gf-premium-indicator class="me-2" />
                   } @else {
                     @if (isLoadingPortfolioPrompt) {
                       <mat-spinner
-                        class="mr-2"
+                        class="me-2"
                         color="accent"
                         [diameter]="16"
                       />
                     } @else {
-                      <ion-icon class="mr-2" name="copy-outline" />
+                      <ion-icon class="me-2" name="copy-outline" />
                     }
                   }
                   <ng-container i18n
@@ -51,16 +51,16 @@
               >
                 <span class="align-items-center d-flex">
                   @if (user?.subscription?.type === 'Basic') {
-                    <gf-premium-indicator class="mr-2" />
+                    <gf-premium-indicator class="me-2" />
                   } @else {
                     @if (isLoadingAnalysisPrompt) {
                       <mat-spinner
-                        class="mr-2"
+                        class="me-2"
                         color="accent"
                         [diameter]="16"
                       />
                     } @else {
-                      <ion-icon class="mr-2" name="copy-outline" />
+                      <ion-icon class="me-2" name="copy-outline" />
                     }
                   }
                   <ng-container i18n
@@ -152,11 +152,11 @@
         <mat-card-content>
           <div class="d-flex py-1">
             <div
-              class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
+              class="align-items-center d-flex flex-grow-1 me-2 text-truncate"
             >
               <span i18n>Absolute Asset Performance</span>
               @if (user?.subscription?.type === 'Basic') {
-                <gf-premium-indicator class="ml-1" />
+                <gf-premium-indicator class="ms-1" />
               }
             </div>
             <div class="d-flex justify-content-end">
@@ -171,8 +171,8 @@
               />
             </div>
           </div>
-          <div class="d-flex mb-3 ml-3 py-1">
-            <div class="flex-grow-1 mr-2 text-truncate">
+          <div class="d-flex mb-3 ms-3 py-1">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>Asset Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
@@ -189,11 +189,11 @@
           </div>
           <div class="d-flex py-1">
             <div
-              class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
+              class="align-items-center d-flex flex-grow-1 me-2 text-truncate"
             >
               <span i18n>Absolute Currency Performance</span>
               @if (user?.subscription?.type === 'Basic') {
-                <gf-premium-indicator class="ml-1" />
+                <gf-premium-indicator class="ms-1" />
               }
             </div>
             <div class="d-flex justify-content-end">
@@ -213,8 +213,8 @@
               />
             </div>
           </div>
-          <div class="d-flex ml-3 py-1">
-            <div class="flex-grow-1 mr-2 text-truncate">
+          <div class="d-flex ms-3 py-1">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>Currency Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
@@ -236,7 +236,7 @@
           </div>
           <div><hr /></div>
           <div class="d-flex py-1">
-            <div class="flex-grow-1 mr-2 text-truncate">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>Absolute Net Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
@@ -251,15 +251,15 @@
               />
             </div>
           </div>
-          <div class="d-flex ml-3 py-1">
-            <div class="flex-grow-1 mr-2 text-truncate">
+          <div class="d-flex ms-3 py-1">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>Net Performance</ng-container>
               @if (
                 user?.settings?.performanceCalculationType ===
                 PerformanceCalculationType.ROAI
               ) {
                 <abbr
-                  class="d-none d-sm-inline-block initialism ml-2 text-muted"
+                  class="d-none d-sm-inline-block initialism ms-2 text-muted"
                   i18n-title
                   title="Return on Average Investment (total return with dividends)"
                   >(ROAI)</abbr
@@ -280,13 +280,13 @@
               />
             </div>
           </div>
-          <div class="d-flex ml-3 py-1 text-muted">
+          <div class="d-flex ms-3 py-1 text-muted">
             <div
-              class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
+              class="align-items-center d-flex flex-grow-1 me-2 text-truncate"
             >
               <span i18n>thereof Dividend</span>
               @if (user?.subscription?.type === 'Basic') {
-                <gf-premium-indicator class="ml-1" />
+                <gf-premium-indicator class="ms-1" />
               }
             </div>
             <div class="d-flex justify-content-end">
@@ -301,8 +301,8 @@
               />
             </div>
           </div>
-          <div class="d-flex ml-3 py-1 text-muted">
-            <div class="flex-grow-1 mr-2 text-truncate">
+          <div class="d-flex ms-3 py-1 text-muted">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>thereof Dividend Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
@@ -330,7 +330,7 @@
           >
         </mat-card-header>
         <mat-card-content>
-          <ol class="holdings mb-0 ml-1 pl-3">
+          <ol class="holdings mb-0 ms-1 ps-3">
             @for (holding of top3; track holding) {
               <li class="py-1">
                 <a
@@ -342,7 +342,7 @@
                   }"
                   [routerLink]="[]"
                 >
-                  <div class="flex-grow-1 mr-2 name">
+                  <div class="flex-grow-1 me-2 name">
                     <span class="align-top d-inline-block mw-100 text-truncate">
                       {{ holding.assetProfile.name }}
                     </span>
@@ -383,7 +383,7 @@
           >
         </mat-card-header>
         <mat-card-content>
-          <ol class="holdings mb-0 ml-1 pl-3">
+          <ol class="holdings mb-0 ms-1 ps-3">
             @for (holding of bottom3; track holding) {
               <li class="py-1">
                 <a
@@ -395,7 +395,7 @@
                   }"
                   [routerLink]="[]"
                 >
-                  <div class="flex-grow-1 mr-2 name">
+                  <div class="flex-grow-1 me-2 name">
                     <span class="align-top d-inline-block mw-100 text-truncate">
                       {{ holding.assetProfile.name }}
                     </span>
@@ -439,7 +439,7 @@
           >
             <span i18n>Performance Timeline</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </div>
         </div>
@@ -467,7 +467,7 @@
         >
           <span i18n>Portfolio Evolution</span>
           @if (user?.subscription?.type === 'Basic') {
-            <gf-premium-indicator class="ml-1" />
+            <gf-premium-indicator class="ms-1" />
           }
         </div>
       </div>
@@ -495,7 +495,7 @@
         >
           <span i18n>Investment Timeline</span>
           @if (user?.subscription?.type === 'Basic') {
-            <gf-premium-indicator class="ml-1" />
+            <gf-premium-indicator class="ms-1" />
           }
         </div>
         <gf-toggle
@@ -553,7 +553,7 @@
         >
           <span i18n>Dividend Timeline</span>
           @if (user?.subscription?.type === 'Basic') {
-            <gf-premium-indicator class="ml-1" />
+            <gf-premium-indicator class="ms-1" />
           }
         </div>
         <gf-toggle
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 004bc1ed25..bf620622ba 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.html
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html
@@ -6,7 +6,7 @@
         <h4 class="align-items-center d-flex mb-3">
           <span i18n>Calculator</span>
           @if (user?.subscription?.type === 'Basic') {
-            <gf-premium-indicator class="ml-1" />
+            <gf-premium-indicator class="ms-1" />
           }
         </h4>
         <gf-fire-calculator
@@ -41,7 +41,7 @@
     <h4 class="align-items-center d-flex">
       <span i18n>Sustainable retirement income</span>
       @if (user?.subscription?.type === 'Basic') {
-        <gf-premium-indicator class="ml-1" />
+        <gf-premium-indicator class="ms-1" />
       }
     </h4>
     @if (isLoading) {
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 52bfa75912..25077329e2 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
@@ -19,7 +19,7 @@
           <div class="d-flex">
             <ngx-skeleton-loader
               animation="pulse"
-              class="mr-2"
+              class="me-2"
               [theme]="{
                 height: '2rem',
                 width: '2rem'
@@ -36,7 +36,7 @@
           </div>
         } @else {
           <div
-            class="align-items-center d-flex icon-container mr-2 px-2"
+            class="align-items-center d-flex icon-container me-2 px-2"
             [class]="{
               okay:
                 statistics?.rulesFulfilledCount ===
@@ -71,7 +71,7 @@
           <h4 class="align-items-center d-flex m-0">
             <span>{{ category.name }}</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </h4>
           <gf-rules
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index 8ab170b4b5..99311ea8ce 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -31,42 +31,42 @@
                     <ng-container>&nbsp;</ng-container>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Transactions</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Accounts</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Performance</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Summary</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Allocations</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Performance Benchmarks</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>FIRE Calculator</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span>Ghostfolio MCP</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Data Import and Export</span>
                     <span
-                      class="align-items-center d-flex ml-1"
+                      class="align-items-center d-flex ms-1"
                       matTooltipPosition="above"
                       [matTooltip]="importAndExportTooltipOSS"
                     >
@@ -74,13 +74,13 @@
                     </span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <a i18n [routerLink]="routerLinkFeatures"
                       >and more Features...</a
                     >
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Community Support</span>
                   </li>
                 </ul>
@@ -115,7 +115,7 @@
                   <h4 class="flex-grow-1 m-0">Basic</h4>
                   @if (user?.subscription?.type === 'Basic') {
                     <div>
-                      <ion-icon class="mr-1" name="checkmark-outline" />
+                      <ion-icon class="me-1" name="checkmark-outline" />
                     </div>
                   }
                 </div>
@@ -127,22 +127,22 @@
                     <ng-container>&nbsp;</ng-container>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Transactions</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Accounts</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Performance</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Data Import and Export</span>
                     <span
-                      class="align-items-center d-flex ml-1"
+                      class="align-items-center d-flex ms-1"
                       matTooltipPosition="above"
                       [matTooltip]="importAndExportTooltipBasic"
                     >
@@ -185,11 +185,11 @@
                 <div class="align-items-center d-flex mb-2">
                   <h4 class="align-items-center d-flex flex-grow-1 m-0">
                     <span>Premium</span>
-                    <gf-premium-indicator class="ml-1" [enableLink]="false" />
+                    <gf-premium-indicator class="ms-1" [enableLink]="false" />
                   </h4>
                   @if (user?.subscription?.type === 'Premium') {
                     <div>
-                      <ion-icon class="mr-1" name="checkmark-outline" />
+                      <ion-icon class="me-1" name="checkmark-outline" />
                     </div>
                   }
                 </div>
@@ -204,30 +204,30 @@
                     >:
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Summary</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Allocations</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Performance Benchmarks</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>FIRE Calculator</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span>Ghostfolio MCP</span>
                   </li>
                   <li class="align-items-center d-flex">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Professional Data Provider</span>
                     <span
-                      class="align-items-center d-flex ml-1"
+                      class="align-items-center d-flex ms-1"
                       matTooltipPosition="above"
                       [matTooltip]="professionalDataProviderTooltipPremium"
                     >
@@ -236,7 +236,7 @@
                   </li>
                   <li class="align-items-center d-flex line-height-1 mb-1">
                     <ion-icon
-                      class="hidden mr-1"
+                      class="hidden me-1"
                       name="checkmark-circle-outline"
                     />
                     <small
@@ -246,13 +246,13 @@
                     >
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <a i18n [routerLink]="routerLinkFeatures"
                       >and more Features...</a
                     >
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Email and Chat Support</span>
                   </li>
                 </ul>
diff --git a/apps/client/src/app/pages/register/register-page.html b/apps/client/src/app/pages/register/register-page.html
index bca154c1a8..be94c35c8d 100644
--- a/apps/client/src/app/pages/register/register-page.html
+++ b/apps/client/src/app/pages/register/register-page.html
@@ -35,7 +35,7 @@
               href="../api/v1/auth/google"
               mat-stroked-button
               ><img
-                class="mr-2"
+                class="me-2"
                 src="../assets/icons/google.svg"
                 style="height: 1rem"
               /><span i18n>Continue with Google</span></a
diff --git a/apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.html b/apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.html
index 6e796e9496..d3334c7e60 100644
--- a/apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.html
+++ b/apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.html
@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>
   <span i18n>Create Account</span>
   @if (role === 'ADMIN') {
-    <span class="badge badge-light ml-2">{{ role }}</span>
+    <span class="badge badge-light ms-2">{{ role }}</span>
   }
 </h1>
 <div class="px-0" mat-dialog-content>
@@ -56,7 +56,7 @@
             (click)="createAccount()"
           >
             <span i18n>Continue</span>
-            <ion-icon class="ml-1" name="arrow-forward-outline" />
+            <ion-icon class="ms-1" name="arrow-forward-outline" />
           </button>
         </div>
       </div>
@@ -85,7 +85,7 @@
             [cdkCopyToClipboard]="accessToken ?? ''"
             (click)="enableCreateAccountButton()"
           >
-            <ion-icon class="mr-1" name="copy-outline" />
+            <ion-icon class="me-1" name="copy-outline" />
             <span i18n>Copy to clipboard</span>
           </button>
         </div>
diff --git a/apps/client/src/styles/bootstrap.scss b/apps/client/src/styles/bootstrap.scss
index 23086c46b6..33121fc332 100644
--- a/apps/client/src/styles/bootstrap.scss
+++ b/apps/client/src/styles/bootstrap.scss
@@ -47,46 +47,6 @@ $table-cell-padding-y: 0.75rem;
 $utilities: map.merge(
   $utilities,
   (
-    'margin-right-compat': (
-      responsive: true,
-      property: margin-right,
-      class: mr,
-      values: map.merge(
-          map.merge(
-            $spacers,
-            (
-              auto: auto
-            )
-          ),
-          negativify-map($spacers)
-        )
-    ),
-    'margin-left-compat': (
-      responsive: true,
-      property: margin-left,
-      class: ml,
-      values: map.merge(
-          map.merge(
-            $spacers,
-            (
-              auto: auto
-            )
-          ),
-          negativify-map($spacers)
-        )
-    ),
-    'padding-right-compat': (
-      responsive: true,
-      property: padding-right,
-      class: pr,
-      values: $spacers
-    ),
-    'padding-left-compat': (
-      responsive: true,
-      property: padding-left,
-      class: pl,
-      values: $spacers
-    ),
     'text-align-compat': (
       responsive: true,
       property: text-align,
diff --git a/libs/ui/src/lib/access-level-icon/access-level-icon.component.html b/libs/ui/src/lib/access-level-icon/access-level-icon.component.html
index 054044ca2b..7198576838 100644
--- a/libs/ui/src/lib/access-level-icon/access-level-icon.component.html
+++ b/libs/ui/src/lib/access-level-icon/access-level-icon.component.html
@@ -1,19 +1,19 @@
 <span class="align-items-center d-flex">
   @switch (accessLevel()) {
     @case ('CREATE_READ_RESTRICTED_UPDATE_DELETE') {
-      <span aria-hidden="true" class="mr-1">🔏</span>
+      <span aria-hidden="true" class="me-1">🔏</span>
       <ng-container i18n>Restricted view and manage</ng-container>
     }
     @case ('CREATE_READ_UPDATE_DELETE') {
-      <span aria-hidden="true" class="mr-1">🖋️</span>
+      <span aria-hidden="true" class="me-1">🖋️</span>
       <ng-container i18n>View and manage</ng-container>
     }
     @case ('READ') {
-      <span aria-hidden="true" class="mr-1">🔓</span>
+      <span aria-hidden="true" class="me-1">🔓</span>
       <ng-container i18n>View</ng-container>
     }
     @case ('READ_RESTRICTED') {
-      <span aria-hidden="true" class="mr-1">🔒</span>
+      <span aria-hidden="true" class="me-1">🔒</span>
       <ng-container i18n>Restricted view</ng-container>
     }
   }
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 780653c677..601a88591e 100644
--- a/libs/ui/src/lib/account-balances/account-balances.component.html
+++ b/libs/ui/src/lib/account-balances/account-balances.component.html
@@ -22,7 +22,7 @@
             [matDatepicker]="date"
             [max]="maxDate"
           />
-          <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
+          <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
             <ion-icon
               class="text-muted"
               matDatepickerToggleIcon
@@ -52,7 +52,7 @@
         <div class="d-flex justify-content-end">
           <mat-form-field appearance="outline" class="without-hint">
             <input formControlName="balance" matInput type="number" />
-            <div class="ml-2" matTextSuffix>
+            <div class="ms-2" matTextSuffix>
               {{ accountCurrency() }}
             </div>
           </mat-form-field>
@@ -81,7 +81,7 @@
             (click)="onDeleteAccountBalance(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>
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 cfa2616048..223765b3f2 100644
--- a/libs/ui/src/lib/account-selector/account-selector.component.html
+++ b/libs/ui/src/lib/account-selector/account-selector.component.html
@@ -14,7 +14,7 @@
       <div class="align-items-center align-middle d-inline-flex line-height-1">
         @if (selectedAccount()?.platform?.url) {
           <gf-entity-logo
-            class="mr-1"
+            class="me-1"
             [tooltip]="selectedAccount()?.platform?.name ?? ''"
             [url]="selectedAccount()?.platform?.url ?? ''"
           />
@@ -31,7 +31,7 @@
       <mat-option [value]="account.id">
         <div class="align-items-center d-flex">
           <gf-entity-logo
-            class="mr-1"
+            class="me-1"
             [hasPlaceholder]="true"
             [tooltip]="account.platform?.name ?? ''"
             [url]="account.platform?.url ?? ''"
diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.html b/libs/ui/src/lib/accounts-table/accounts-table.component.html
index 60be93ad8a..f0f43b002a 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.html
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.html
@@ -6,7 +6,7 @@
       [disabled]="dataSource?.data.length < 2"
       [routerLink]="transferCashBalanceRouterLink"
     >
-      <ion-icon class="mr-2" name="arrow-redo-outline" />
+      <ion-icon class="me-2" name="arrow-redo-outline" />
       <span><ng-container i18n>Transfer Cash Balance</ng-container>...</span>
     </button>
   </div>
@@ -52,7 +52,7 @@
       <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
         <div class="align-items-center d-flex">
           <gf-entity-logo
-            class="d-sm-none mr-1"
+            class="d-sm-none me-1"
             [hasPlaceholder]="true"
             [tooltip]="element.platform?.name"
             [url]="element.platform?.url"
@@ -100,7 +100,7 @@
       >
         <div class="d-flex">
           <gf-entity-logo
-            class="mr-1"
+            class="me-1"
             [hasPlaceholder]="true"
             [tooltip]="element.platform?.name"
             [url]="element.platform?.url"
@@ -335,7 +335,7 @@
               [routerLink]="accountDialogRouterLinks().get(element.id)?.detail"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="wallet-outline" />
+                <ion-icon class="me-2" name="wallet-outline" />
                 <span><ng-container i18n>View Details</ng-container>...</span>
               </span>
             </a>
@@ -346,7 +346,7 @@
               [routerLink]="accountDialogRouterLinks().get(element.id)?.update"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="create-outline" />
+                <ion-icon class="me-2" name="create-outline" />
                 <span><ng-container i18n>Edit</ng-container>...</span>
               </span>
             </a>
@@ -359,7 +359,7 @@
               (click)="onDeleteAccount(element.id)"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="trash-outline" />
+                <ion-icon class="me-2" name="trash-outline" />
                 <span i18n>Delete</span>
               </span>
             </button>
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 a093eef399..b88c3219c9 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@@ -27,7 +27,7 @@
           mat-stroked-button
           (click)="onImport()"
         >
-          <ion-icon class="mr-2" name="cloud-upload-outline" />
+          <ion-icon class="me-2" name="cloud-upload-outline" />
           <span><ng-container i18n>Import Activities</ng-container>...</span>
         </button>
       }
@@ -53,7 +53,7 @@
             (click)="onImportDividends()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="color-wand-outline" />
+              <ion-icon class="me-2" name="color-wand-outline" />
               <span><ng-container i18n>Import Dividends</ng-container>...</span>
             </span>
           </button>
@@ -66,7 +66,7 @@
             (click)="onExport()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="cloud-download-outline" />
+              <ion-icon class="me-2" name="cloud-download-outline" />
               @if (canExportActivities()) {
                 <span i18n
                   >Export {{ (totalItems ?? 0) > 1 ? totalItems : '' }}
@@ -86,7 +86,7 @@
             (click)="onExportDrafts()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="calendar-clear-outline" />
+              <ion-icon class="me-2" name="calendar-clear-outline" />
               <span i18n>Export Drafts as ICS</span>
             </span>
           </button>
@@ -104,7 +104,7 @@
             (click)="onDeleteActivities()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               @if (canDeleteActivities()) {
                 <span i18n
                   >Delete {{ (totalItems ?? 0) > 1 ? totalItems : '' }}
@@ -188,7 +188,7 @@
         <div class="align-items-center d-flex text-nowrap">
           <span class="text-truncate">{{ element.assetProfile?.name }}</span>
           @if (isDraftActivity(element)) {
-            <span class="badge badge-secondary ml-1" i18n>Draft</span>
+            <span class="badge badge-secondary ms-1" i18n>Draft</span>
           }
         </div>
         @if (
@@ -367,7 +367,7 @@
       <td *matCellDef="let element" class="px-1" mat-cell>
         <div class="d-flex">
           <gf-entity-logo
-            class="mr-1"
+            class="me-1"
             [hasPlaceholder]="true"
             [tooltip]="element.account?.platform?.name"
             [url]="element.account?.platform?.url"
@@ -430,7 +430,7 @@
               (click)="onImport()"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="cloud-upload-outline" />
+                <ion-icon class="me-2" name="cloud-upload-outline" />
                 <span
                   ><ng-container i18n>Import Activities</ng-container>...</span
                 >
@@ -444,7 +444,7 @@
               (click)="onImportDividends()"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="color-wand-outline" />
+                <ion-icon class="me-2" name="color-wand-outline" />
                 <span
                   ><ng-container i18n>Import Dividends</ng-container>...</span
                 >
@@ -459,7 +459,7 @@
               (click)="onExport()"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="cloud-download-outline" />
+                <ion-icon class="me-2" name="cloud-download-outline" />
                 <span i18n>Export Activities</span>
               </span>
             </button>
@@ -472,7 +472,7 @@
               (click)="onExportDrafts()"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="calendar-clear-outline" />
+                <ion-icon class="me-2" name="calendar-clear-outline" />
                 <span i18n>Export Drafts as ICS</span>
               </span>
             </button>
@@ -498,7 +498,7 @@
           @if (canClickActivity(element)) {
             <button mat-menu-item (click)="onClickActivity(element)">
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="tablet-landscape-outline" />
+                <ion-icon class="me-2" name="tablet-landscape-outline" />
                 <span><ng-container i18n>View Holding</ng-container>...</span>
               </span>
             </button>
@@ -509,7 +509,7 @@
               [routerLink]="activityDialogRouterLinks().get(element.id)?.update"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="create-outline" />
+                <ion-icon class="me-2" name="create-outline" />
                 <span><ng-container i18n>Edit</ng-container>...</span>
               </span>
             </a>
@@ -520,7 +520,7 @@
               [routerLink]="activityDialogRouterLinks().get(element.id)?.clone"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="copy-outline" />
+                <ion-icon class="me-2" name="copy-outline" />
                 <span><ng-container i18n>Clone</ng-container>...</span>
               </span>
             </a>
@@ -532,7 +532,7 @@
               (click)="onExportDraft(element.id)"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="calendar-clear-outline" />
+                <ion-icon class="me-2" name="calendar-clear-outline" />
                 <span i18n>Export Draft as ICS</span>
               </span>
             </button>
@@ -544,7 +544,7 @@
             (click)="onDeleteActivity(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index 9c5fd5601c..72b3b51c96 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -4,7 +4,7 @@
     (keydown.tab)="$event.stopPropagation()"
   >
     <div class="align-items-center d-flex search-container">
-      <ion-icon class="ml-2 mr-0" name="search-outline" />
+      <ion-icon class="me-0 ms-2" name="search-outline" />
       <input
         #search
         autocomplete="off"
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index 556b9875f5..0005d06a4d 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/libs/ui/src/lib/benchmark/benchmark.component.html
@@ -193,7 +193,7 @@
             "
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>
diff --git a/libs/ui/src/lib/currency-selector/currency-selector.component.html b/libs/ui/src/lib/currency-selector/currency-selector.component.html
index c3e622dadb..6bf5e6f972 100644
--- a/libs/ui/src/lib/currency-selector/currency-selector.component.html
+++ b/libs/ui/src/lib/currency-selector/currency-selector.component.html
@@ -1,6 +1,6 @@
 @if (countryCodeOfSelectedCurrency) {
   <gf-entity-logo
-    class="flex-shrink-0 mr-1"
+    class="flex-shrink-0 me-1"
     [countryCode]="countryCodeOfSelectedCurrency"
   />
 }
@@ -23,7 +23,7 @@
     <mat-option class="line-height-1" [value]="currency">
       <span class="align-items-center d-flex">
         <gf-entity-logo
-          class="mr-1"
+          class="me-1"
           [countryCode]="getCountryCodeFromCurrency(currency)"
           [hasPlaceholder]="true"
         />
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 02eed4442a..50f083b793 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
@@ -8,10 +8,10 @@
   />
 } @else {
   <div class="align-items-center d-flex flex-row">
-    <div class="h2 mb-0 mr-2">{{ fearAndGreedIndexEmoji() }}</div>
+    <div class="h2 mb-0 me-2">{{ fearAndGreedIndexEmoji() }}</div>
     <div>
       <div class="h4 mb-0">
-        <span class="mr-2">{{ fearAndGreedIndexText() }}</span>
+        <span class="me-2">{{ fearAndGreedIndexText() }}</span>
         @let value = fearAndGreedIndex() | number: '1.0-0';
         <small class="text-muted"
           ><span [class.font-weight-bold]="value">{{
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 b2162a764a..5aad763836 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
@@ -14,7 +14,7 @@
             step="100"
             type="number"
           />
-          <span class="ml-2" matTextSuffix>{{ currency }}</span>
+          <span class="ms-2" matTextSuffix>{{ currency }}</span>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="w-100">
@@ -25,7 +25,7 @@
             step="0.25"
             type="number"
           />
-          <div class="ml-2" matTextSuffix>%</div>
+          <div class="ms-2" matTextSuffix>%</div>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="w-100">
@@ -39,7 +39,7 @@
             [min]="minDate"
           />
           <mat-datepicker-toggle
-            class="mr-2"
+            class="me-2"
             matSuffix
             [disabled]="hasPermissionToUpdateUserSettings !== true"
             [for]="date"
@@ -66,7 +66,7 @@
             step="100"
             type="number"
           />
-          <span class="ml-2" matTextSuffix>{{ currency }}</span>
+          <span class="ms-2" matTextSuffix>{{ currency }}</span>
         </mat-form-field>
       </form>
     </div>
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 6e52114058..1c74f7688f 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
@@ -9,7 +9,7 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Date</mat-label>
         <input formControlName="date" matInput [matDatepicker]="date" />
-        <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
+        <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
           <ion-icon
             class="text-muted"
             matDatepickerToggleIcon
@@ -23,10 +23,10 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Market Price</mat-label>
         <input formControlName="marketPrice" matInput type="number" />
-        <span class="ml-2" matTextSuffix>{{ data.currency }}</span>
+        <span class="ms-2" matTextSuffix>{{ data.currency }}</span>
       </mat-form-field>
       <button
-        class="ml-2 mt-1 no-min-width"
+        class="ms-2 mt-1 no-min-width"
         i18n-title
         mat-button
         title="Fetch market price"
diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
index 065e62de1e..8cffb62a9a 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
+++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
@@ -1,7 +1,7 @@
 <div>
   @for (itemByMonth of marketDataByMonth | keyvalue; track itemByMonth) {
     <div class="d-flex">
-      <div class="date mr-1 text-nowrap">{{ itemByMonth.key }}</div>
+      <div class="date me-1 text-nowrap">{{ itemByMonth.key }}</div>
       <div class="align-items-center d-flex flex-grow-1 px-1">
         @for (day of days; track day) {
           <div
diff --git a/libs/ui/src/lib/logo/logo.component.html b/libs/ui/src/lib/logo/logo.component.html
index a67da73bc0..1e1c2cb600 100644
--- a/libs/ui/src/lib/logo/logo.component.html
+++ b/libs/ui/src/lib/logo/logo.component.html
@@ -1,5 +1,5 @@
 <span class="align-items-center d-flex"
-  ><span class="d-inline-block logo" [class.mr-1]="showLabel"></span>
+  ><span class="d-inline-block logo" [class.me-1]="showLabel"></span>
   @if (showLabel) {
     <span class="label">{{ label ?? 'Ghostfolio' }}</span>
   }
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 ab014901b1..55239d1135 100644
--- a/libs/ui/src/lib/membership-card/membership-card.component.html
+++ b/libs/ui/src/lib/membership-card/membership-card.component.html
@@ -21,7 +21,7 @@
           <div class="heading text-muted" i18n>API Key</div>
           <div class="align-items-center d-flex">
             <div class="text-monospace value">* * * * * * * * *</div>
-            <div class="ml-1">
+            <div class="ms-1">
               <button
                 class="bg-transparent no-min-width"
                 i18n-title
diff --git a/libs/ui/src/lib/notifications/prompt-dialog/prompt-dialog.html b/libs/ui/src/lib/notifications/prompt-dialog/prompt-dialog.html
index 0b39f22e17..9245ade170 100644
--- a/libs/ui/src/lib/notifications/prompt-dialog/prompt-dialog.html
+++ b/libs/ui/src/lib/notifications/prompt-dialog/prompt-dialog.html
@@ -9,7 +9,7 @@
     }
     <input matInput [formControl]="formControl" />
     @if (valueSuffix) {
-      <span class="ml-2" matTextSuffix>{{ valueSuffix }}</span>
+      <span class="ms-2" matTextSuffix>{{ valueSuffix }}</span>
     }
   </mat-form-field>
 </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 34a5a3e26f..28b9dcc940 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 ml-auto text-muted"
+            class="d-none d-sm-block external-link-icon ms-auto text-muted"
             name="open-outline"
           />
         </button>
@@ -52,7 +52,7 @@
       [size]="deviceType === 'mobile' ? 'large' : 'small'"
     />
     <span
-      class="d-none d-sm-block line-height-normal ml-1 overflow-hidden p-0 text-truncate"
+      class="d-none d-sm-block line-height-normal ms-1 overflow-hidden p-0 text-truncate"
       [innerHTML]="tab.label"
     ></span>
   </span>
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 5e23c558a7..894e261d54 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
@@ -22,7 +22,7 @@
         <span class="align-items-center d-flex line-height-1"
           ><span>{{ lookupItem.name }}</span>
           @if (lookupItem.dataProviderInfo.isPremium) {
-            <gf-premium-indicator class="ml-1" [enableLink]="false" />
+            <gf-premium-indicator class="ms-1" [enableLink]="false" />
           }
         </span>
         <small class="text-muted"
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.html b/libs/ui/src/lib/tags-selector/tags-selector.component.html
index b8a2c372df..6e60ecfb83 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.html
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.html
@@ -58,7 +58,7 @@
           @if (hasPermissionToCreateTag && tagNameToCreate()) {
             <mat-option [value]="tagNameToCreate()">
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="add-circle-outline" />
+                <ion-icon class="me-2" name="add-circle-outline" />
                 <ng-container i18n>Create</ng-container> "{{
                   tagNameToCreate()
                 }}"
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 385a49ac10..f1e138b1f0 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -1,5 +1,5 @@
 @if (icon) {
-  <div class="align-self-center mr-3">
+  <div class="align-self-center me-3">
     <ion-icon class="h3 m-0" [name]="icon" />
   </div>
 }
@@ -12,7 +12,7 @@
   <ng-template #copyIcon>
     @if (enableCopyToClipboardButton) {
       <button
-        class="ml-1 no-height no-min-width p-1"
+        class="ms-1 no-height no-min-width p-1"
         mat-button
         type="button"
         [title]="isCopied ? copiedTitle : copyToClipboardTitle"
@@ -44,10 +44,10 @@
       @if (isNumber || value === null) {
         @if (colorizeSign && !useAbsoluteValue && value !== null) {
           @if (+value > 0) {
-            <div class="mr-1 text-success">+</div>
+            <div class="me-1 text-success">+</div>
           }
           @if (+value < 0) {
-            <div class="mr-1 text-danger">-</div>
+            <div class="me-1 text-danger">-</div>
           }
         }
         <div
@@ -63,7 +63,7 @@
           }
         </div>
         @if (isPercent || unit) {
-          <div class="ml-1">
+          <div class="ms-1">
             {{ isPercent ? '%' : unit }}
           </div>
         }

From e88a2cb141f02eb6cbac3b468758fd38e2e9dd7b Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 14 Oct 2026 08:38:50 +0200
Subject: [PATCH 3/4] Task/migrate text utility classes to Bootstrap 5 (#8164)

Migrate text utility classes to Bootstrap 5
---
 .../access-table/access-table.component.html  |  4 +-
 .../app/components/admin-jobs/admin-jobs.html | 10 ++--
 .../admin-market-data/admin-market-data.html  | 12 ++---
 .../asset-profile-dialog.html                 | 13 ++---
 .../admin-overview/admin-overview.html        | 18 ++-----
 .../admin-platform.component.html             |  2 +-
 .../admin-settings.component.html             |  4 +-
 .../admin-tag/admin-tag.component.html        |  8 +--
 .../components/admin-users/admin-users.html   | 24 ++++-----
 .../components/footer/footer.component.html   |  2 +-
 .../components/header/header.component.html   | 46 +++++++----------
 .../home-overview/home-overview.html          |  8 +--
 .../portfolio-performance.component.html      |  4 +-
 .../portfolio-summary.component.html          |  2 +-
 .../subscription-interstitial-dialog.html     |  6 +--
 .../user-account-membership.html              |  2 +-
 .../user-account-settings.html                |  4 +-
 .../user-detail-dialog.html                   | 10 ++--
 .../src/app/pages/landing/landing-page.html   | 14 ++---
 .../app/pages/portfolio/fire/fire-page.html   | 18 +++----
 .../src/app/pages/pricing/pricing-page.html   | 12 ++---
 .../user-account-registration-dialog.html     |  4 +-
 .../personal-finance-tools/product-page.html  | 32 ++++++------
 apps/client/src/styles.scss                   |  2 +-
 apps/client/src/styles/bootstrap.scss         | 51 -------------------
 .../account-balances.component.html           |  2 +-
 .../accounts-table.component.html             | 20 ++++----
 .../activities-table.component.html           |  4 +-
 libs/ui/src/lib/assistant/assistant.html      |  8 +--
 .../lib/benchmark/benchmark.component.html    |  8 +--
 .../fear-and-greed-index.component.html       |  4 +-
 .../membership-card.component.html            |  2 +-
 .../lib/page-tabs/page-tabs.component.html    |  4 +-
 .../top-holdings/top-holdings.component.html  |  4 +-
 libs/ui/src/lib/value/value.component.html    |  6 +--
 35 files changed, 149 insertions(+), 225 deletions(-)

diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index dad200f240..96196f9b0b 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/apps/client/src/app/components/access-table/access-table.component.html
@@ -46,9 +46,9 @@
     </ng-container>
 
     <ng-container matColumnDef="actions" stickyEnd>
-      <th *matHeaderCellDef class="px-1 text-right" mat-header-cell></th>
+      <th *matHeaderCellDef class="px-1 text-end" mat-header-cell></th>
 
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <button
           class="mx-1 no-min-width px-2"
           mat-button
diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.html b/apps/client/src/app/components/admin-jobs/admin-jobs.html
index fe893690b7..c453f77e2b 100644
--- a/apps/client/src/app/components/admin-jobs/admin-jobs.html
+++ b/apps/client/src/app/components/admin-jobs/admin-jobs.html
@@ -33,7 +33,7 @@
           >
             <ng-container i18n>Job ID</ng-container>
           </th>
-          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
+          <td *matCellDef="let element" class="px-1 py-2 text-end" mat-cell>
             {{ element.id }}
           </td>
         </ng-container>
@@ -113,13 +113,13 @@
         <ng-container matColumnDef="attempts">
           <th
             *matHeaderCellDef
-            class="px-1 py-2 text-right"
+            class="px-1 py-2 text-end"
             mat-header-cell
             mat-sort-header="attemptsMade"
           >
             <ng-container i18n>Attempts</ng-container>
           </th>
-          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
+          <td *matCellDef="let element" class="px-1 py-2 text-end" mat-cell>
             {{ element.attemptsMade }}
           </td>
         </ng-container>
@@ -179,7 +179,7 @@
         </ng-container>
 
         <ng-container matColumnDef="actions" stickyEnd>
-          <th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
+          <th *matHeaderCellDef class="px-1 py-2 text-end" mat-header-cell>
             <button
               class="mx-1 no-min-width px-2"
               mat-button
@@ -194,7 +194,7 @@
               </button>
             </mat-menu>
           </th>
-          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
+          <td *matCellDef="let element" class="px-1 py-2 text-end" mat-cell>
             <button
               class="mx-1 no-min-width px-2"
               mat-button
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 e00ee45742..f9ce16676f 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
@@ -192,7 +192,7 @@
             <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
               <ng-container i18n>Activities Count</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               {{ element.activitiesCount }}
             </td>
           </ng-container>
@@ -201,7 +201,7 @@
             <th *matHeaderCellDef class="px-1" mat-header-cell>
               <ng-container i18n>Historical Data</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               {{ element.marketDataItemCount }}
             </td>
           </ng-container>
@@ -210,7 +210,7 @@
             <th *matHeaderCellDef class="px-1" mat-header-cell>
               <ng-container i18n>Sectors Count</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               {{ element.sectorsCount }}
             </td>
           </ng-container>
@@ -219,7 +219,7 @@
             <th *matHeaderCellDef class="px-1" mat-header-cell>
               <ng-container i18n>Countries Count</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               {{ element.countriesCount }}
             </td>
           </ng-container>
@@ -243,7 +243,7 @@
           </ng-container>
 
           <ng-container matColumnDef="actions" stickyEnd>
-            <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+            <th *matHeaderCellDef class="px-1 text-end" mat-header-cell>
               <button
                 class="mx-1 no-min-width px-2"
                 mat-button
@@ -291,7 +291,7 @@
                 </button>
               </mat-menu>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               <button
                 class="mx-1 no-min-width px-2"
                 mat-button
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 1d4cdd8c24..048fa87289 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
@@ -526,10 +526,7 @@
                     <thead>
                       <tr class="mat-mdc-header-row">
                         <th class="mat-mdc-header-cell px-1 py-2" i18n>Date</th>
-                        <th
-                          class="mat-mdc-header-cell px-1 py-2 text-right"
-                          i18n
-                        >
+                        <th class="mat-mdc-header-cell px-1 py-2 text-end" i18n>
                           Split Ratio
                         </th>
                         <th class="mat-mdc-header-cell px-1 py-2"></th>
@@ -541,10 +538,10 @@
                           <td class="mat-mdc-cell px-1 py-2">
                             {{ split.date | date: defaultDateFormat }}
                           </td>
-                          <td class="mat-mdc-cell px-1 py-2 text-right">
+                          <td class="mat-mdc-cell px-1 py-2 text-end">
                             {{ split.numerator }}:{{ split.denominator }}
                           </td>
-                          <td class="mat-mdc-cell px-1 py-2 text-right">
+                          <td class="mat-mdc-cell px-1 py-2 text-end">
                             <button
                               mat-icon-button
                               type="button"
@@ -610,7 +607,7 @@
                       />
                     </mat-form-field>
                   </div>
-                  <div class="text-right">
+                  <div class="text-end">
                     <button
                       color="primary"
                       mat-flat-button
@@ -715,7 +712,7 @@
                     <input formControlName="url" matInput type="text" />
                   </mat-form-field>
                 </div>
-                <div class="my-3 text-right">
+                <div class="my-3 text-end">
                   <button
                     color="accent"
                     mat-flat-button
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index c7300c5ede..dc81c6309f 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -166,7 +166,7 @@
                   </th>
                   <td *matCellDef="let element" class="px-1" mat-cell>
                     <gf-value
-                      class="text-monospace"
+                      class="font-monospace"
                       [enableCopyToClipboardButton]="true"
                       [value]="element.code"
                     />
@@ -174,14 +174,10 @@
                 </ng-container>
 
                 <ng-container matColumnDef="duration">
-                  <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+                  <th *matHeaderCellDef class="px-1 text-end" mat-header-cell>
                     <ng-container i18n>Duration</ng-container>
                   </th>
-                  <td
-                    *matCellDef="let element"
-                    class="px-1 text-right"
-                    mat-cell
-                  >
+                  <td *matCellDef="let element" class="px-1 text-end" mat-cell>
                     {{ formatStringValue(element.duration) }}
                   </td>
                 </ng-container>
@@ -206,14 +202,10 @@
                 <ng-container matColumnDef="actions" stickyEnd>
                   <th
                     *matHeaderCellDef
-                    class="px-1 text-right"
+                    class="px-1 text-end"
                     mat-header-cell
                   ></th>
-                  <td
-                    *matCellDef="let element"
-                    class="px-1 text-right"
-                    mat-cell
-                  >
+                  <td *matCellDef="let element" class="px-1 text-end" mat-cell>
                     <button
                       class="mx-1 no-min-width px-2"
                       mat-button
diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.html b/apps/client/src/app/components/admin-platform/admin-platform.component.html
index 0a7daf6840..6ce9656f52 100644
--- a/apps/client/src/app/components/admin-platform/admin-platform.component.html
+++ b/apps/client/src/app/components/admin-platform/admin-platform.component.html
@@ -56,7 +56,7 @@
       >
         <ng-container i18n>Accounts</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [locale]="locale()"
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 eca0f385f5..8bdbec347b 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
@@ -130,7 +130,7 @@
             >
               <ng-container i18n>Asset Profiles</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               <gf-value
                 class="d-inline-block justify-content-end"
                 [locale]="user?.settings?.locale"
@@ -175,7 +175,7 @@
           <ng-container matColumnDef="actions">
             <th *matHeaderCellDef class="px-1" mat-header-cell></th>
 
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               @if (isGhostfolioDataProvider(element)) {
                 @if (hasGhostfolioApiKey) {
                   <button
diff --git a/apps/client/src/app/components/admin-tag/admin-tag.component.html b/apps/client/src/app/components/admin-tag/admin-tag.component.html
index fe87d06334..908a140c1b 100644
--- a/apps/client/src/app/components/admin-tag/admin-tag.component.html
+++ b/apps/client/src/app/components/admin-tag/admin-tag.component.html
@@ -37,7 +37,7 @@
         <ng-container i18n>User</ng-container>
       </th>
       <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
-        <span class="text-monospace">{{ element.userId }}</span>
+        <span class="font-monospace">{{ element.userId }}</span>
       </td>
     </ng-container>
 
@@ -50,7 +50,7 @@
       >
         <ng-container i18n>Accounts</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [locale]="locale()"
@@ -68,7 +68,7 @@
       >
         <ng-container i18n>Activities</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [locale]="locale()"
@@ -86,7 +86,7 @@
       >
         <ng-container i18n>Total</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [locale]="locale()"
diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index 038d4f4351..dbc78c74ae 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -18,12 +18,12 @@
             >
               <div class="align-items-center d-flex text-nowrap">
                 <span
-                  class="d-none d-sm-inline-block text-monospace"
+                  class="d-none d-sm-inline-block font-monospace"
                   [class.text-line-through]="element.role === 'INACTIVE'"
                   >{{ element.id }}</span
                 >
                 <span
-                  class="d-inline-block d-sm-none text-monospace"
+                  class="d-inline-block d-sm-none font-monospace"
                   [class.text-line-through]="element.role === 'INACTIVE'"
                   >{{ `${(element.id | slice: 0 : 5)}...` }}</span
                 >
@@ -94,14 +94,14 @@
           <ng-container matColumnDef="accounts">
             <th
               *matHeaderCellDef
-              class="mat-mdc-header-cell px-1 py-2 text-right"
+              class="mat-mdc-header-cell px-1 py-2 text-end"
               mat-header-cell
             >
               <ng-container i18n>Accounts</ng-container>
             </th>
             <td
               *matCellDef="let element"
-              class="mat-mdc-cell px-1 py-2 text-right"
+              class="mat-mdc-cell px-1 py-2 text-end"
               mat-cell
             >
               <gf-value
@@ -115,14 +115,14 @@
           <ng-container matColumnDef="activities">
             <th
               *matHeaderCellDef
-              class="mat-mdc-header-cell px-1 py-2 text-right"
+              class="mat-mdc-header-cell px-1 py-2 text-end"
               mat-header-cell
             >
               <ng-container i18n>Activities</ng-container>
             </th>
             <td
               *matCellDef="let element"
-              class="mat-mdc-cell px-1 py-2 text-right"
+              class="mat-mdc-cell px-1 py-2 text-end"
               mat-cell
             >
               <gf-value
@@ -137,14 +137,14 @@
             <ng-container matColumnDef="engagementPerDay">
               <th
                 *matHeaderCellDef
-                class="mat-mdc-header-cell px-1 py-2 text-right"
+                class="mat-mdc-header-cell px-1 py-2 text-end"
                 mat-header-cell
               >
                 <ng-container i18n>Engagement per Day</ng-container>
               </th>
               <td
                 *matCellDef="let element"
-                class="mat-mdc-cell px-1 py-2 text-right"
+                class="mat-mdc-cell px-1 py-2 text-end"
                 mat-cell
               >
                 <gf-value
@@ -158,14 +158,14 @@
             <ng-container matColumnDef="dailyApiRequests">
               <th
                 *matHeaderCellDef
-                class="mat-mdc-header-cell px-1 py-2 text-right"
+                class="mat-mdc-header-cell px-1 py-2 text-end"
                 mat-header-cell
               >
                 <ng-container i18n>API Requests Today</ng-container>
               </th>
               <td
                 *matCellDef="let element"
-                class="mat-mdc-cell px-1 py-2 text-right"
+                class="mat-mdc-cell px-1 py-2 text-end"
                 mat-cell
               >
                 <gf-value
@@ -216,12 +216,12 @@
           <ng-container matColumnDef="actions" stickyEnd>
             <th
               *matHeaderCellDef
-              class="mat-mdc-header-cell px-1 py-2 text-right"
+              class="mat-mdc-header-cell px-1 py-2 text-end"
               mat-header-cell
             ></th>
             <td
               *matCellDef="let element"
-              class="mat-mdc-cell px-1 py-2 text-right"
+              class="mat-mdc-cell px-1 py-2 text-end"
               mat-cell
             >
               <button
diff --git a/apps/client/src/app/components/footer/footer.component.html b/apps/client/src/app/components/footer/footer.component.html
index 8dc1b0b47e..1c31013a29 100644
--- a/apps/client/src/app/components/footer/footer.component.html
+++ b/apps/client/src/app/components/footer/footer.component.html
@@ -192,6 +192,6 @@
 </div>
 <div class="container d-none d-md-block mt-5">
   <div class="d-flex justify-content-center">
-    <div class="font-weight-bold line-height-1 logotype">Ghostfolio</div>
+    <div class="fw-bold line-height-1 logotype">Ghostfolio</div>
   </div>
 </div>
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 7c38c51671..e951d2eac7 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -19,7 +19,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold':
+            'fw-bold':
               currentRoute() === internalRoutes.home.path ||
               currentRoute() === internalRoutes.zen.path,
             'text-decoration-underline':
@@ -36,8 +36,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold':
-              currentRoute() === internalRoutes.portfolio.path,
+            'fw-bold': currentRoute() === internalRoutes.portfolio.path,
             'text-decoration-underline':
               currentRoute() === internalRoutes.portfolio.path
           }"
@@ -51,7 +50,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === internalRoutes.accounts.path,
+            'fw-bold': currentRoute() === internalRoutes.accounts.path,
             'text-decoration-underline':
               currentRoute() === internalRoutes.accounts.path
           }"
@@ -66,8 +65,7 @@
             i18n
             mat-button
             [class]="{
-              'font-weight-bold':
-                currentRoute() === internalRoutes.adminControl.path,
+              'fw-bold': currentRoute() === internalRoutes.adminControl.path,
               'text-decoration-underline':
                 currentRoute() === internalRoutes.adminControl.path
             }"
@@ -82,7 +80,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === routeResources,
+            'fw-bold': currentRoute() === routeResources,
             'text-decoration-underline': currentRoute() === routeResources
           }"
           [routerLink]="routerLinkResources"
@@ -97,7 +95,7 @@
             class="d-none d-sm-block rounded"
             mat-button
             [class]="{
-              'font-weight-bold': currentRoute() === routePricing,
+              'fw-bold': currentRoute() === routePricing,
               'text-decoration-underline': currentRoute() === routePricing
             }"
             [routerLink]="routerLinkPricing"
@@ -117,7 +115,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === routeAbout,
+            'fw-bold': currentRoute() === routeAbout,
             'text-decoration-underline': currentRoute() === routeAbout
           }"
           [routerLink]="routerLinkAbout"
@@ -243,7 +241,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="
+            [class.fw-bold]="
               currentRoute() === internalRoutes.home.path ||
               currentRoute() === internalRoutes.zen.path
             "
@@ -254,9 +252,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="
-              currentRoute() === internalRoutes.portfolio.path
-            "
+            [class.fw-bold]="currentRoute() === internalRoutes.portfolio.path"
             [routerLink]="routerLinkPortfolio"
             >Portfolio</a
           >
@@ -264,18 +260,14 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="
-              currentRoute() === internalRoutes.accounts.path
-            "
+            [class.fw-bold]="currentRoute() === internalRoutes.accounts.path"
             [routerLink]="routerLinkAccounts"
             >Accounts</a
           >
           <a
             i18n
             mat-menu-item
-            [class.font-weight-bold]="
-              currentRoute() === internalRoutes.account.path
-            "
+            [class.fw-bold]="currentRoute() === internalRoutes.account.path"
             [routerLink]="routerLinkAccount"
             >My Ghostfolio</a
           >
@@ -284,7 +276,7 @@
               class="d-flex d-sm-none"
               i18n
               mat-menu-item
-              [class.font-weight-bold]="
+              [class.fw-bold]="
                 currentRoute() === internalRoutes.adminControl.path
               "
               [routerLink]="routerLinkAdminControl"
@@ -296,7 +288,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="currentRoute() === routeResources"
+            [class.fw-bold]="currentRoute() === routeResources"
             [routerLink]="routerLinkResources"
             >Resources</a
           >
@@ -307,7 +299,7 @@
             <a
               class="d-flex d-sm-none"
               mat-menu-item
-              [class.font-weight-bold]="currentRoute() === routePricing"
+              [class.fw-bold]="currentRoute() === routePricing"
               [routerLink]="routerLinkPricing"
             >
               <span class="align-items-center d-flex">
@@ -322,7 +314,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="currentRoute() === routeAbout"
+            [class.fw-bold]="currentRoute() === routeAbout"
             [routerLink]="routerLinkAbout"
             >About Ghostfolio</a
           >
@@ -354,7 +346,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === routeFeatures,
+            'fw-bold': currentRoute() === routeFeatures,
             'text-decoration-underline': currentRoute() === routeFeatures
           }"
           [routerLink]="routerLinkFeatures"
@@ -367,7 +359,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === routeAbout,
+            'fw-bold': currentRoute() === routeAbout,
             'text-decoration-underline': currentRoute() === routeAbout
           }"
           [routerLink]="routerLinkAbout"
@@ -380,7 +372,7 @@
             class="d-sm-block rounded"
             mat-button
             [class]="{
-              'font-weight-bold': currentRoute() === routePricing,
+              'fw-bold': currentRoute() === routePricing,
               'text-decoration-underline': currentRoute() === routePricing
             }"
             [routerLink]="routerLinkPricing"
@@ -401,7 +393,7 @@
             i18n
             mat-button
             [class]="{
-              'font-weight-bold': currentRoute() === routeMarkets,
+              'fw-bold': currentRoute() === routeMarkets,
               'text-decoration-underline': currentRoute() === routeMarkets
             }"
             [routerLink]="routerLinkMarkets"
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 fd3d29ed70..944bb7382f 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@@ -10,14 +10,14 @@
       <div class="col introduction">
         <h4 i18n>Welcome to Ghostfolio</h4>
         <p i18n>Ready to take control of your personal finances?</p>
-        <ol class="font-weight-bold">
+        <ol class="fw-bold">
           <li
             class="mb-2"
             [class.text-muted]="(user()?.accounts?.length ?? 0) > 1"
           >
             <a class="d-block" [routerLink]="routerLinkAccounts"
               ><span i18n>Setup your accounts</span><br />
-              <span class="font-weight-normal" i18n
+              <span class="fw-normal" i18n
                 >Get a comprehensive financial overview by adding your bank and
                 brokerage accounts.</span
               ></a
@@ -26,7 +26,7 @@
           <li class="mb-2">
             <a class="d-block" [routerLink]="routerLinkPortfolioActivities">
               <span i18n>Capture your activities</span><br />
-              <span class="font-weight-normal" i18n
+              <span class="fw-normal" i18n
                 >Record your investment activities to keep your portfolio up to
                 date.</span
               ></a
@@ -35,7 +35,7 @@
           <li class="mb-2">
             <a class="d-block" [routerLink]="routerLinkPortfolio">
               <span i18n>Monitor and analyze your portfolio</span><br />
-              <span class="font-weight-normal" i18n
+              <span class="fw-normal" i18n
                 >Track your progress in real-time with comprehensive analysis
                 and insights.</span
               >
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 b6fbedb215..5b69251c38 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-muted text-right">
+    <div class="px-1 status-container text-end text-muted">
       @if ((errors()?.length ?? 0) > 0 && !isLoading()) {
         <ion-icon
           i18n-title
@@ -23,7 +23,7 @@
       </div>
     }
     <div
-      class="display-4 font-weight-bold m-0 text-center value-container"
+      class="display-4 fw-bold m-0 text-center value-container"
       [hidden]="isLoading()"
     >
       <span #value id="value"></span>
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 41faf4f3ff..fb1300e918 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
@@ -415,7 +415,7 @@
     <div class="col"><hr /></div>
   </div>
   <div class="d-flex py-1">
-    <div class="flex-grow-1 font-weight-bold text-truncate" i18n>Net Worth</div>
+    <div class="flex-grow-1 fw-bold text-truncate" i18n>Net Worth</div>
     <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
index fa73e585a9..6ab23f6b06 100644
--- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
+++ b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
@@ -11,7 +11,7 @@
           <span>Ghostfolio Premium</span>
           <gf-premium-indicator class="ms-1" [enableLink]="false" />
         </h5>
-        <div class="font-weight-normal h5 mb-3 text-center" i18n>
+        <div class="fw-normal h5 mb-3 text-center" i18n>
           Are you an ambitious investor who needs the full picture?
         </div>
         <p i18n>
@@ -80,7 +80,7 @@
         </div>
       </div>
       <div>
-        <div class="font-weight-normal h5 text-center" i18n>
+        <div class="fw-normal h5 text-center" i18n>
           Get access to 80’000+ tickers from over 50 exchanges
         </div>
         <p class="my-2 text-center" i18n>with</p>
@@ -125,7 +125,7 @@
           <gf-premium-indicator class="ms-1" [enableLink]="false" />
         </h5>
         <p class="my-2 text-center" i18n>for</p>
-        <div class="font-weight-normal h5 text-center">
+        <div class="fw-normal h5 text-center">
           <ng-container i18n>less than</ng-container> $1
           <ng-container i18n>per week</ng-container>
         </div>
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 fac99012f6..fb2577ea4b 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
@@ -38,7 +38,7 @@
               @if (durationExtension) {
                 <div class="mt-1 text-center">
                   <div
-                    class="badge badge-pill badge-warning font-weight-normal px-2 py-1"
+                    class="badge badge-pill badge-warning fw-normal px-2 py-1"
                   >
                     <strong i18n>Limited Offer!</strong>
                     <ng-container>&nbsp;</ng-container>
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 f392576bb5..121f1403cd 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
@@ -315,7 +315,7 @@
         </div>
         <div class="ps-1 w-50">
           <gf-value
-            class="text-monospace"
+            class="font-monospace"
             [enableCopyToClipboardButton]="true"
             [isLoading]="isLoading"
             [value]="user?.id"
@@ -324,7 +324,7 @@
       </div>
       <div class="align-items-center d-flex py-1">
         <div class="pe-1 w-50"></div>
-        <div class="ps-1 text-monospace w-50">
+        <div class="font-monospace ps-1 w-50">
           <button color="primary" i18n mat-flat-button (click)="onExport()">
             Export Data
           </button>
diff --git a/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html b/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html
index c11328225d..aae5c86965 100644
--- a/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html
+++ b/apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html
@@ -219,14 +219,10 @@
                 </ng-container>
 
                 <ng-container matColumnDef="price">
-                  <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+                  <th *matHeaderCellDef class="px-1 text-end" mat-header-cell>
                     <ng-container i18n>Price</ng-container>
                   </th>
-                  <td
-                    *matCellDef="let element"
-                    class="px-1 text-right"
-                    mat-cell
-                  >
+                  <td *matCellDef="let element" class="px-1 text-end" mat-cell>
                     @if (element.price === null) {
                       <span>–</span>
                       <span class="ms-1">{{ baseCurrency }}</span>
@@ -240,7 +236,7 @@
                       />
                     }
                   </td>
-                  <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+                  <td *matFooterCellDef class="px-1 text-end" mat-footer-cell>
                     <gf-value
                       class="d-inline-block justify-content-end"
                       [isCurrency]="true"
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index afff5b7b7c..a11058eeec 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col text-center">
       <div>
-        <h1 class="font-weight-bold gf-text-wrap-balance intro" i18n>
+        <h1 class="fw-bold gf-text-wrap-balance intro" i18n>
           Manage your wealth like a boss
         </h1>
       </div>
@@ -291,12 +291,12 @@
         <mat-card appearance="outlined" class="h-100">
           <mat-card-content class="d-flex flex-row">
             <div class="flex-grow-1">
-              <div class="font-weight-bold" i18n>Sign up anonymously*</div>
+              <div class="fw-bold" i18n>Sign up anonymously*</div>
               <div class="text-muted" i18n>
                 <small>* no e-mail address nor credit card required</small>
               </div>
             </div>
-            <div class="ps-2 text-muted text-right">1</div>
+            <div class="ps-2 text-end text-muted">1</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -304,11 +304,11 @@
         <mat-card appearance="outlined" class="h-100">
           <mat-card-content class="d-flex flex-row">
             <div class="flex-grow-1">
-              <div class="font-weight-bold" i18n>
+              <div class="fw-bold" i18n>
                 Add any of your historical transactions
               </div>
             </div>
-            <div class="ps-2 text-muted text-right">2</div>
+            <div class="ps-2 text-end text-muted">2</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -316,11 +316,11 @@
         <mat-card appearance="outlined" class="h-100">
           <mat-card-content class="d-flex flex-row">
             <div class="flex-grow-1">
-              <div class="font-weight-bold" i18n>
+              <div class="fw-bold" i18n>
                 Get valuable insights of your portfolio composition
               </div>
             </div>
-            <div class="ps-2 text-muted text-right">3</div>
+            <div class="ps-2 text-end text-muted">3</div>
           </mat-card-content>
         </mat-card>
       </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 bf620622ba..28a435109e 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.html
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html
@@ -67,7 +67,7 @@
         <div class="mb-2">
           <ng-container i18n
             >If you retire today, you would be able to withdraw
-            <span class="font-weight-bold"
+            <span class="fw-bold"
               ><gf-value
                 class="d-inline-block"
                 [isCurrency]="true"
@@ -82,7 +82,7 @@
               per year</span
             >
             or
-            <span class="font-weight-bold"
+            <span class="fw-bold"
               ><gf-value
                 class="d-inline-block"
                 [isCurrency]="true"
@@ -96,7 +96,7 @@
               />
               per month</span
             >, based on your total assets of
-            <span class="font-weight-bold"
+            <span class="fw-bold"
               ><gf-value
                 class="d-inline-block"
                 [isCurrency]="true"
@@ -116,7 +116,7 @@
             user?.settings?.isExperimentalFeatures
           ) {
             <select
-              class="border-0 cursor-pointer d-inline-block font-weight-bold safe-withdrawal-rate-select"
+              class="border-0 cursor-pointer d-inline-block fw-bold safe-withdrawal-rate-select"
               [formControl]="safeWithdrawalRateControl"
             >
               @for (rate of safeWithdrawalRateOptions; track rate) {
@@ -127,7 +127,7 @@
             >.
           } @else {
             <ng-container>&nbsp;</ng-container>
-            <span class="font-weight-bold"
+            <span class="fw-bold"
               ><gf-value
                 class="d-inline-block"
                 [isPercent]="true"
@@ -141,9 +141,9 @@
         @if (user?.settings?.isExperimentalFeatures) {
           <div>
             <ng-container i18n
-              >By <span class="font-weight-bold">{{ retirementDateLabel }}</span
+              >By <span class="fw-bold">{{ retirementDateLabel }}</span
               >, this is projected to increase to
-              <span class="font-weight-bold"
+              <span class="fw-bold"
                 ><gf-value
                   class="d-inline-block"
                   [isCurrency]="true"
@@ -158,7 +158,7 @@
                 per year</span
               >
               or
-              <span class="font-weight-bold"
+              <span class="fw-bold"
                 ><gf-value
                   class="d-inline-block"
                   [isCurrency]="true"
@@ -172,7 +172,7 @@
                 />
                 per month</span
               >, assuming a
-              <span class="font-weight-bold"
+              <span class="fw-bold"
                 ><gf-value
                   class="d-inline-block"
                   [isPercent]="true"
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index 99311ea8ce..41f4fccba7 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -86,7 +86,7 @@
                 </ul>
               </div>
               <p i18n>Self-hosted, update manually.</p>
-              <p class="h5 text-right" i18n>Free</p>
+              <p class="h5 text-end" i18n>Free</p>
               @if (user?.subscription?.type === 'Basic') {
                 <div class="d-none d-lg-block hidden mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
@@ -152,7 +152,7 @@
                 </ul>
               </div>
               <p i18n>Fully managed Ghostfolio cloud offering.</p>
-              <p class="h5 text-right" i18n>Free</p>
+              <p class="h5 text-end" i18n>Free</p>
               @if (user?.subscription?.type === 'Basic') {
                 <div class="d-none d-lg-block hidden mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
@@ -177,7 +177,7 @@
           >
             <mat-card-content class="d-flex flex-column h-100">
               @if (label) {
-                <div class="badge-container position-absolute text-right">
+                <div class="badge-container position-absolute text-end">
                   <span class="badge badge-warning m-1">{{ label }}</span>
                 </div>
               }
@@ -259,8 +259,8 @@
               </div>
               <p i18n>Fully managed Ghostfolio cloud offering.</p>
               @if (price) {
-                <p class="h5 text-right">
-                  <span class="font-weight-normal">
+                <p class="h5 text-end">
+                  <span class="fw-normal">
                     @if (coupon) {
                       <del class="text-muted"
                         >{{ baseCurrency }}&nbsp;{{ price }}</del
@@ -299,7 +299,7 @@
               @if (durationExtension) {
                 <div class="mt-3">
                   <div
-                    class="badge badge-warning font-weight-normal line-height-1 p-3 w-100"
+                    class="badge badge-warning fw-normal line-height-1 p-3 w-100"
                   >
                     <strong i18n>Limited Offer!</strong>
                     <ng-container>&nbsp;</ng-container>
diff --git a/apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.html b/apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.html
index d3334c7e60..1d1aa17780 100644
--- a/apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.html
+++ b/apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.html
@@ -34,7 +34,7 @@
           <ng-container i18n
             >and I agree to the
             <a
-              class="font-weight-bold"
+              class="fw-bold"
               target="_blank"
               [routerLink]="routerLinkAboutTermsOfService"
               >Terms of Service</a
@@ -78,7 +78,7 @@
           type="text"
           [value]="accessToken"
         ></textarea>
-        <div class="float-right mt-1">
+        <div class="float-end mt-1">
           <button
             color="secondary"
             mat-flat-button
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 9c45e960db..269cdf5466 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
@@ -68,12 +68,12 @@
             </thead>
             <tbody>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right"></td>
+                <td class="mat-mdc-cell px-3 py-2 text-end"></td>
                 <td class="mat-mdc-cell px-1 py-2">{{ product1().slogan }}</td>
                 <td class="mat-mdc-cell px-1 py-2">{{ product2().slogan }}</td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Category</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Category</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @for (
                     category of product1().categories;
@@ -94,12 +94,12 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Founded</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Founded</td>
                 <td class="mat-mdc-cell px-1 py-2">{{ product1().founded }}</td>
                 <td class="mat-mdc-cell px-1 py-2">{{ product2().founded }}</td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Origin</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Origin</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @if (product1().origin; as origin) {
                     <span aria-hidden="true">{{ origin.emojiFlag }}</span
@@ -114,7 +114,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Region</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Region</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @for (
                     region of product1().regions;
@@ -145,7 +145,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>
                   Available on
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -168,7 +168,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>
                   Available in
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -191,7 +191,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right">
+                <td class="mat-mdc-cell px-3 py-2 text-end">
                   Open Source Software
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -230,7 +230,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>
                   Self-Hosting
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -269,7 +269,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>
                   Use anonymously
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -308,9 +308,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
-                  Free Plan
-                </td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Free Plan</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @if (product1().hasFreePlan === true) {
                     <span
@@ -347,7 +345,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Pricing</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Pricing</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   <span i18n>Starting from</span> ${{ price() }} /
                   <span i18n>year</span>
@@ -362,7 +360,7 @@
               </tr>
               @if (product1().note || product2().note) {
                 <tr class="mat-mdc-row">
-                  <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Notes</td>
+                  <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Notes</td>
                   <td class="mat-mdc-cell px-1 py-2">{{ product1().note }}</td>
                   <td class="mat-mdc-cell px-1 py-2">{{ product2().note }}</td>
                 </tr>
@@ -410,7 +408,7 @@
         <nav class="d-flex justify-content-between my-5">
           @if (previousProduct()) {
             <a
-              class="font-weight-light link-primary text-decoration-none small"
+              class="fw-light link-primary text-decoration-none small"
               [routerLink]="getProductRouterLink(previousProduct())"
               [title]="getProductTitle(previousProduct())"
               >← <span i18n>Previous</span></a
@@ -420,7 +418,7 @@
           }
           @if (nextProduct()) {
             <a
-              class="font-weight-light link-primary text-decoration-none small"
+              class="fw-light link-primary text-decoration-none small"
               [routerLink]="getProductRouterLink(nextProduct())"
               [title]="getProductTitle(nextProduct())"
               ><span i18n>Next</span> →</a
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index f75a01a028..a2bae4d683 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -443,7 +443,7 @@ ngx-skeleton-loader {
   }
 
   .mat-mdc-menu-item {
-    &.font-weight-bold {
+    &.fw-bold {
       .mat-mdc-menu-item-text {
         --mat-menu-item-label-text-weight: 700;
       }
diff --git a/apps/client/src/styles/bootstrap.scss b/apps/client/src/styles/bootstrap.scss
index 33121fc332..bf5b338478 100644
--- a/apps/client/src/styles/bootstrap.scss
+++ b/apps/client/src/styles/bootstrap.scss
@@ -4,8 +4,6 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-@use 'sass:map';
-
 // Configuration
 @import 'bootstrap/scss/functions';
 
@@ -43,55 +41,6 @@ $table-cell-padding-y: 0.75rem;
 @import 'bootstrap/scss/mixins';
 @import 'bootstrap/scss/utilities';
 
-// Compatibility mappings for legacy Bootstrap 4 utility classes
-$utilities: map.merge(
-  $utilities,
-  (
-    'text-align-compat': (
-      responsive: true,
-      property: text-align,
-      class: text,
-      values: (
-        left: left,
-        right: right
-      )
-    ),
-    'font-weight-compat': (
-      property: font-weight,
-      class: font-weight,
-      values: (
-        bold: $font-weight-bold,
-        normal: $font-weight-normal,
-        light: $font-weight-light,
-        bolder: $font-weight-bolder,
-        lighter: $font-weight-lighter
-      )
-    ),
-    'font-style-compat': (
-      property: font-style,
-      class: font,
-      values: (
-        italic: italic
-      )
-    ),
-    'float-compat': (
-      responsive: true,
-      property: float,
-      values: (
-        left: left,
-        right: right
-      )
-    ),
-    'font-family-compat': (
-      property: font-family,
-      class: text,
-      values: (
-        monospace: var(--bs-font-monospace)
-      )
-    )
-  )
-);
-
 // Layout & components
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';
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 601a88591e..ba71167270 100644
--- a/libs/ui/src/lib/account-balances/account-balances.component.html
+++ b/libs/ui/src/lib/account-balances/account-balances.component.html
@@ -35,7 +35,7 @@
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <th *matHeaderCellDef class="px-2 text-end" mat-header-cell>
         <ng-container i18n>Value</ng-container>
       </th>
       <td *matCellDef="let element" class="px-2" mat-cell>
diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.html b/libs/ui/src/lib/accounts-table/accounts-table.component.html
index f0f43b002a..43a6a429b4 100644
--- a/libs/ui/src/lib/accounts-table/accounts-table.component.html
+++ b/libs/ui/src/lib/accounts-table/accounts-table.component.html
@@ -125,10 +125,10 @@
         <span class="d-block d-sm-none">#</span>
         <span class="d-none d-sm-block" i18n>Activities</span>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         {{ element.activitiesCount }}
       </td>
-      <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+      <td *matFooterCellDef class="px-1 text-end" mat-footer-cell>
         {{ activitiesCount() }}
       </td>
     </ng-container>
@@ -142,7 +142,7 @@
       >
         <ng-container i18n>Quantity</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [isCurrency]="true"
@@ -164,7 +164,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-cell
       >
         <gf-value
@@ -176,7 +176,7 @@
       </td>
       <td
         *matFooterCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-footer-cell
       >
         <gf-value
@@ -199,7 +199,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-cell
       >
         <gf-value
@@ -211,7 +211,7 @@
       </td>
       <td
         *matFooterCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-footer-cell
       >
         <gf-value
@@ -234,7 +234,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="d-lg-none d-xl-none px-1 text-right"
+        class="d-lg-none d-xl-none px-1 text-end"
         mat-cell
       >
         <gf-value
@@ -246,7 +246,7 @@
       </td>
       <td
         *matFooterCellDef
-        class="d-lg-none d-xl-none px-1 text-right"
+        class="d-lg-none d-xl-none px-1 text-end"
         mat-footer-cell
       >
         <gf-value
@@ -269,7 +269,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-cell
       >
         <gf-value
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 b88c3219c9..0abf8476d7 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@@ -306,7 +306,7 @@
     <ng-container matColumnDef="value">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>Value</ng-container>
@@ -343,7 +343,7 @@
     <ng-container matColumnDef="valueInBaseCurrency">
       <th
         *matHeaderCellDef
-        class="d-lg-none d-xl-none px-1 text-right"
+        class="d-lg-none d-xl-none px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>Value</ng-container>
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index 72b3b51c96..16503dffb5 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -55,7 +55,7 @@
             isLoading.quickLinks || searchResults?.quickLinks?.length !== 0
           ) {
             <div class="mb-2">
-              <div class="font-weight-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-muted title">
                 <ng-container i18n>Quick Links</ng-container>
               </div>
               @for (
@@ -81,7 +81,7 @@
           }
           @if (isLoading.accounts || searchResults?.accounts?.length !== 0) {
             <div>
-              <div class="font-weight-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-muted title">
                 <ng-container i18n>Accounts</ng-container>
               </div>
               @for (
@@ -107,7 +107,7 @@
           }
           @if (isLoading.holdings || searchResults?.holdings?.length !== 0) {
             <div>
-              <div class="font-weight-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-muted title">
                 <ng-container i18n>Holdings</ng-container>
               </div>
               @for (
@@ -137,7 +137,7 @@
               searchResults?.assetProfiles?.length !== 0)
           ) {
             <div class="mt-2">
-              <div class="font-weight-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-muted 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 0005d06a4d..8263ebb7ed 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/libs/ui/src/lib/benchmark/benchmark.component.html
@@ -41,7 +41,7 @@
     <ng-container matColumnDef="trend50d">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>50-Day Trend</ng-container>
@@ -70,7 +70,7 @@
     <ng-container matColumnDef="trend200d">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>200-Day Trend</ng-container>
@@ -99,7 +99,7 @@
     <ng-container matColumnDef="date">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>Last All Time High</ng-container>
@@ -133,7 +133,7 @@
         >
         <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
           <gf-value
             class="d-inline-block justify-content-end"
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 50f083b793..9ffef3224e 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
@@ -14,9 +14,7 @@
         <span class="me-2">{{ fearAndGreedIndexText() }}</span>
         @let value = fearAndGreedIndex() | number: '1.0-0';
         <small class="text-muted"
-          ><span [class.font-weight-bold]="value">{{
-            value ?? placeholder
-          }}</span
+          ><span [class.fw-bold]="value">{{ value ?? placeholder }}</span
           >/100</small
         >
       </div>
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 55239d1135..70f6e372e3 100644
--- a/libs/ui/src/lib/membership-card/membership-card.component.html
+++ b/libs/ui/src/lib/membership-card/membership-card.component.html
@@ -20,7 +20,7 @@
         <div class="mt-5">
           <div class="heading text-muted" i18n>API Key</div>
           <div class="align-items-center d-flex">
-            <div class="text-monospace value">* * * * * * * * *</div>
+            <div class="font-monospace value">* * * * * * * * *</div>
             <div class="ms-1">
               <button
                 class="bg-transparent no-min-width"
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 28b9dcc940..3190101f44 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.html
+++ b/libs/ui/src/lib/page-tabs/page-tabs.component.html
@@ -45,7 +45,9 @@
 </nav>
 
 <ng-template #tabContent let-tab>
-  <span class="align-items-center d-flex justify-content-start text-left w-100">
+  <span
+    class="align-items-center d-flex justify-content-start text-start w-100"
+  >
     <ion-icon
       class="flex-shrink-0"
       [name]="tab.iconName"
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 60f8032891..d1b52f4d38 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -21,7 +21,7 @@
     </ng-container>
 
     <ng-container matColumnDef="valueInBaseCurrency">
-      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <th *matHeaderCellDef class="px-2 text-end" mat-header-cell>
         <ng-container i18n>Value</ng-container>
       </th>
       <td *matCellDef="let element" class="px-2" mat-cell>
@@ -36,7 +36,7 @@
     </ng-container>
 
     <ng-container matColumnDef="allocationInPercentage" stickyEnd>
-      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <th *matHeaderCellDef class="px-2 text-end" mat-header-cell>
         <span class="d-none d-sm-block" i18n>Allocation</span>
         <span class="d-block d-sm-none" i18n-title title="Allocation">%</span>
       </th>
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index f1e138b1f0..217f4df11d 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -52,12 +52,12 @@
         }
         <div
           class="mb-0 value"
-          [class.font-weight-bold]="size === 'large'"
+          [class.fw-bold]="size === 'large'"
           [class.h2]="size === 'large'"
           [class.h4]="size === 'medium'"
         >
           @if (value === null) {
-            <span class="text-monospace text-muted">*****</span>
+            <span class="font-monospace text-muted">*****</span>
           } @else {
             {{ formattedValue }}
           }
@@ -71,7 +71,7 @@
       @if (isString) {
         <div
           class="mb-0 text-truncate value"
-          [class.font-weight-bold]="size === 'large'"
+          [class.fw-bold]="size === 'large'"
           [class.h2]="size === 'large'"
           [class.h4]="size === 'medium'"
         >

From 7123e5ffb2b24e8d791ba75923261f5da0382a65 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 14 Oct 2026 08:39:51 +0200
Subject: [PATCH 4/4] Bugfix/padding of labels in user account settings (#8170)

Fix padding of labels in user account settings
---
 CHANGELOG.md                                                  | 4 ++++
 .../user-account-settings/user-account-settings.html          | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d05f916dfd..f1a919f7f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Upgraded `bootstrap` from version `4.6.2` to `5.3.8`
 
+### Fixed
+
+- Fixed the missing padding of the base currency and performance calculation labels in the user account settings
+
 ## 3.86.0 - 2026-10-13
 
 ### Added
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 121f1403cd..3888bd5f25 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
@@ -9,7 +9,7 @@
             [class.mb-2]="!hasImpersonationId"
             [class.mb-4]="hasImpersonationId"
           >
-            <div class="align-items-center d-flex pt-1 pt-1 w-50">
+            <div class="align-items-center d-flex pe-1 pt-1 w-50">
               <ng-container i18n>Base Currency</ng-container>
             </div>
             <div class="ps-1 w-50" [formGroup]="baseCurrencyForm">
@@ -32,7 +32,7 @@
           </div>
           @if (user?.settings?.isExperimentalFeatures && !user?.subscription) {
             <div class="d-flex mb-2">
-              <div class="align-items-center d-flex pt-1 pt-1 w-50">
+              <div class="align-items-center d-flex pe-1 pt-1 w-50">
                 <ng-container i18n>Performance Calculation</ng-container>
               </div>
               <div class="ps-1 w-50">