diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e53d4dbb..db13d3904 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Harmonized the unit styling in the value component
+- Migrated the components from `NgStyle` to style bindings
 - Upgraded `stripe` from version `20.4.1` to `21.0.1`
 
 ### Fixed
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 21d68984a..10c2ad741 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
@@ -53,6 +53,6 @@
   <canvas
     #chartCanvas
     class="h-100"
-    [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+    [style.display]="isLoading ? 'none' : 'block'"
   ></canvas>
 </div>
diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.html b/apps/client/src/app/components/investment-chart/investment-chart.component.html
index 6f7b083e5..864050ea8 100644
--- a/apps/client/src/app/components/investment-chart/investment-chart.component.html
+++ b/apps/client/src/app/components/investment-chart/investment-chart.component.html
@@ -10,5 +10,5 @@
 <canvas
   #chartCanvas
   class="h-100"
-  [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+  [style.display]="isLoading ? 'none' : 'block'"
 ></canvas>
diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
index dc0a1d776..04165ab11 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
@@ -12,7 +12,7 @@ import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule, NgStyle } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -35,7 +35,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
     GfFireCalculatorComponent,
     GfPremiumIndicatorComponent,
     GfValueComponent,
-    NgStyle,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule
   ],
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 76ad6cbf6..b8815219c 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.html
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html
@@ -19,11 +19,10 @@
             !hasImpersonationId && hasPermissionToUpdateUserSettings
           "
           [locale]="user?.settings?.locale"
-          [ngStyle]="{
-            opacity: user?.subscription?.type === 'Basic' ? '0.67' : 'initial',
-            'pointer-events':
-              user?.subscription?.type === 'Basic' ? 'none' : 'initial'
-          }"
+          [style.opacity]="user?.subscription?.type === 'Basic' ? '0.67' : 'initial'"
+          [style.pointer-events]="
+            user?.subscription?.type === 'Basic' ? 'none' : 'initial'
+          "
           [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
           [retirementDate]="user?.settings?.retirementDate"
           [savingsRate]="user?.settings?.savingsRate"
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 4f9ac456c..125c69a12 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
@@ -81,7 +81,7 @@
         <canvas
           #chartCanvas
           class="h-100"
-          [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+          [style.display]="isLoading ? 'none' : 'block'"
         ></canvas>
       </div>
     </div>
diff --git a/libs/ui/src/lib/line-chart/line-chart.component.html b/libs/ui/src/lib/line-chart/line-chart.component.html
index e9a5bbbe0..541672030 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.html
+++ b/libs/ui/src/lib/line-chart/line-chart.component.html
@@ -9,5 +9,5 @@
 }
 <canvas
   #chartCanvas
-  [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+  [style.display]="isLoading ? 'none' : 'block'"
 ></canvas>
diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html
index c7de5ef4d..9b5fff973 100644
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html
+++ b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html
@@ -9,5 +9,5 @@
 }
 <canvas
   #chartCanvas
-  [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+  [style.display]="isLoading ? 'none' : 'block'"
 ></canvas>
diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html
index 3141414e7..fcc1edafd 100644
--- a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html
+++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html
@@ -1,7 +1,7 @@
 <a
   class="align-items-center d-flex"
   title="Upgrade to Ghostfolio Premium"
-  [ngStyle]="{ 'pointer-events': enableLink ? 'initial' : 'none' }"
+  [style.pointer-events]="enableLink ? 'initial' : 'none'"
   [routerLink]="routerLinkPricing"
   ><ion-icon class="text-muted" name="diamond-outline"
 /></a>
diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.html b/libs/ui/src/lib/treemap-chart/treemap-chart.component.html
index c7de5ef4d..9b5fff973 100644
--- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.html
+++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.html
@@ -9,5 +9,5 @@
 }
 <canvas
   #chartCanvas
-  [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+  [style.display]="isLoading ? 'none' : 'block'"
 ></canvas>