diff --git a/apps/client/src/app/app.module.ts b/apps/client/src/app/app.module.ts
index 3bf551aa4..3534e5381 100644
--- a/apps/client/src/app/app.module.ts
+++ b/apps/client/src/app/app.module.ts
@@ -9,7 +9,7 @@ import {
 } from '@angular/material/core';
 import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts
index e0bd426bc..c0db8fb2f 100644
--- a/apps/client/src/app/components/access-table/access-table.component.ts
+++ b/apps/client/src/app/components/access-table/access-table.component.ts
@@ -7,7 +7,7 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatTableDataSource } from '@angular/material/table';
 import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { Access } from '@ghostfolio/common/interfaces';
 
diff --git a/apps/client/src/app/components/access-table/access-table.module.ts b/apps/client/src/app/components/access-table/access-table.module.ts
index 7f8091c2e..111f0e2f4 100644
--- a/apps/client/src/app/components/access-table/access-table.module.ts
+++ b/apps/client/src/app/components/access-table/access-table.module.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
 
 import { AccessTableComponent } from './access-table.component';
 
diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
index d12891dcc..20426fd3c 100644
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
+++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.scss b/apps/client/src/app/components/accounts-table/accounts-table.component.scss
index ccb23a20e..39e455dca 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.scss
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.scss
@@ -3,17 +3,7 @@
 :host {
   display: block;
 
-  .mat-table {
-    td {
-      &.mat-footer-cell {
-        border-top: 1px solid
-          rgba(
-            var(--palette-foreground-divider),
-            var(--palette-foreground-divider-alpha)
-          );
-      }
-    }
-
+  .mat-mdc-table {
     th {
       ::ng-deep {
         .mat-sort-header-container {
@@ -23,16 +13,3 @@
     }
   }
 }
-
-:host-context(.is-dark-theme) {
-  .mat-table {
-    td {
-      &.mat-footer-cell {
-        border-top-color: rgba(
-          var(--palette-foreground-divider-dark),
-          var(--palette-foreground-divider-dark-alpha)
-        );
-      }
-    }
-  }
-}
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.ts b/apps/client/src/app/components/accounts-table/accounts-table.component.ts
index a2dbd6c74..03b52a6d0 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.ts
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.ts
@@ -9,7 +9,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
 import { Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.module.ts b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
index cf66c6205..b8e38b30e 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.module.ts
+++ b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
 import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts b/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts
index ad313544f..5dd8d16d0 100644
--- a/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts
+++ b/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 
 import { AdminJobsComponent } from './admin-jobs.component';
diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
index 6869bc39a..d01e3a4db 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
@@ -7,7 +7,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.module.ts b/apps/client/src/app/components/admin-market-data/admin-market-data.module.ts
index eb1a99830..6db2de910 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.module.ts
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.module.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
 import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 
diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts
index 5bc3c7234..6a4d87e72 100644
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts
@@ -2,10 +2,10 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatMenuModule } from '@angular/material/menu';
 import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
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 5ca7a5c2f..d2798d0f8 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -51,7 +51,7 @@
                   <td>
                     <button
                       *ngIf="customCurrencies.includes(exchangeRate.label2)"
-                      class="mini-icon mx-1 no-min-width px-2"
+                      class="h-100 mx-1 no-min-width px-2"
                       mat-button
                       (click)="onDeleteCurrency(exchangeRate.label2)"
                     >
@@ -124,7 +124,7 @@
               <div *ngIf="info?.systemMessage">
                 <span>{{ info.systemMessage }}</span>
                 <button
-                  class="mini-icon mx-1 no-min-width px-2"
+                  class="h-100 mx-1 no-min-width px-2"
                   mat-button
                   (click)="onDeleteSystemMessage()"
                 >
@@ -159,7 +159,7 @@
                   </td>
                   <td>
                     <button
-                      class="mini-icon mx-1 no-min-width px-2"
+                      class="h-100 mx-1 no-min-width px-2"
                       mat-button
                       (click)="onDeleteCoupon(coupon.code)"
                     >
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.module.ts b/apps/client/src/app/components/admin-overview/admin-overview.module.ts
index 6acd84235..a97d4b05b 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.module.ts
+++ b/apps/client/src/app/components/admin-overview/admin-overview.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.scss b/apps/client/src/app/components/admin-overview/admin-overview.scss
index 0481f246f..9b114ef1a 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.scss
+++ b/apps/client/src/app/components/admin-overview/admin-overview.scss
@@ -3,24 +3,6 @@
 :host {
   display: block;
 
-  .mat-button {
-    &.mini-icon {
-      line-height: 1.5;
-    }
-  }
-
-  .mat-flat-button {
-    ::ng-deep {
-      .mat-button-wrapper {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-      }
-    }
-  }
-
   .subscription {
     .mat-form-field {
       max-width: 100%;
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 ad1fe26f5..e3cb40eac 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -4,44 +4,47 @@
       <div class="users">
         <table class="gf-table">
           <thead>
-            <tr class="mat-header-row">
-              <th class="mat-header-cell px-1 py-2 text-right">#</th>
-              <th class="mat-header-cell px-1 py-2" i18n>User</th>
+            <tr class="mat-mdc-header-row">
+              <th class="mat-mdc-header-cell px-1 py-2 text-right">#</th>
+              <th class="mat-mdc-header-cell px-1 py-2" i18n>User</th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2"
+                class="mat-mdc-header-cell px-1 py-2"
               >
                 <ng-container i18n>Country</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2">
+              <th class="mat-mdc-header-cell px-1 py-2">
                 <ng-container i18n>Registration</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right">
+              <th class="mat-mdc-header-cell px-1 py-2 text-right">
                 <ng-container i18n>Accounts</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right">
+              <th class="mat-mdc-header-cell px-1 py-2 text-right">
                 <ng-container i18n>Activities</ng-container>
               </th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2 text-right"
+                class="mat-mdc-header-cell px-1 py-2 text-right"
               >
                 <ng-container i18n>Engagement per Day</ng-container>
               </th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2"
+                class="mat-mdc-header-cell px-1 py-2"
                 i18n
               >
                 Last Request
               </th>
-              <th class="mat-header-cell px-1 py-2"></th>
+              <th class="mat-mdc-header-cell px-1 py-2"></th>
             </tr>
           </thead>
           <tbody>
-            <tr *ngFor="let userItem of users; let i = index" class="mat-row">
-              <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
-              <td class="mat-cell px-1 py-2">
+            <tr
+              *ngFor="let userItem of users; let i = index"
+              class="mat-mdc-row"
+            >
+              <td class="mat-mdc-cell px-1 py-2 text-right">{{ i + 1 }}</td>
+              <td class="mat-mdc-cell px-1 py-2">
                 <div class="d-flex align-items-center">
                   <span class="d-none d-sm-inline-block text-monospace"
                     >{{ userItem.id }}</span
@@ -59,23 +62,23 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2"
+                class="mat-mdc-cell px-1 py-2"
               >
                 <span class="h5" [title]="userItem.country"
                   >{{ getEmojiFlag(userItem.country) }}</span
                 >
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-mdc-cell px-1 py-2">
                 {{ formatDistanceToNow(userItem.createdAt) }}
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
+              <td class="mat-mdc-cell px-1 py-2 text-right">
                 <gf-value
                   class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"
                   [value]="userItem.accountCount"
                 ></gf-value>
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
+              <td class="mat-mdc-cell px-1 py-2 text-right">
                 <gf-value
                   class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"
@@ -84,7 +87,7 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2 text-right"
+                class="mat-mdc-cell px-1 py-2 text-right"
               >
                 <gf-value
                   class="d-inline-block justify-content-end"
@@ -95,11 +98,11 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2"
+                class="mat-mdc-cell px-1 py-2"
               >
                 {{ formatDistanceToNow(userItem.lastActivity) }}
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-mdc-cell px-1 py-2">
                 <button
                   class="mx-1 no-min-width px-2"
                   mat-button
diff --git a/apps/client/src/app/components/admin-users/admin-users.module.ts b/apps/client/src/app/components/admin-users/admin-users.module.ts
index 13948365a..8c381b205 100644
--- a/apps/client/src/app/components/admin-users/admin-users.module.ts
+++ b/apps/client/src/app/components/admin-users/admin-users.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
diff --git a/apps/client/src/app/components/admin-users/admin-users.scss b/apps/client/src/app/components/admin-users/admin-users.scss
index 8dce735ff..f06a9d825 100644
--- a/apps/client/src/app/components/admin-users/admin-users.scss
+++ b/apps/client/src/app/components/admin-users/admin-users.scss
@@ -9,8 +9,8 @@
     table {
       min-width: 100%;
 
-      .mat-row,
-      .mat-header-row {
+      .mat-mdc-row,
+      .mat-mdc-header-row {
         width: 100%;
       }
     }
diff --git a/apps/client/src/app/components/dialog-footer/dialog-footer.module.ts b/apps/client/src/app/components/dialog-footer/dialog-footer.module.ts
index bf551de47..b9965d47d 100644
--- a/apps/client/src/app/components/dialog-footer/dialog-footer.module.ts
+++ b/apps/client/src/app/components/dialog-footer/dialog-footer.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 
 import { DialogFooterComponent } from './dialog-footer.component';
 
diff --git a/apps/client/src/app/components/dialog-header/dialog-header.module.ts b/apps/client/src/app/components/dialog-header/dialog-header.module.ts
index c1729ce72..554e3f5e5 100644
--- a/apps/client/src/app/components/dialog-header/dialog-header.module.ts
+++ b/apps/client/src/app/components/dialog-header/dialog-header.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 
 import { DialogHeaderComponent } from './dialog-header.component';
 
diff --git a/apps/client/src/app/components/home-holdings/home-holdings.module.ts b/apps/client/src/app/components/home-holdings/home-holdings.module.ts
index ef0d6300a..ec38c588a 100644
--- a/apps/client/src/app/components/home-holdings/home-holdings.module.ts
+++ b/apps/client/src/app/components/home-holdings/home-holdings.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { RouterModule } from '@angular/router';
 import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';
diff --git a/apps/client/src/app/components/home-summary/home-summary.component.ts b/apps/client/src/app/components/home-summary/home-summary.component.ts
index c4d8a8d77..6ea7b8847 100644
--- a/apps/client/src/app/components/home-summary/home-summary.component.ts
+++ b/apps/client/src/app/components/home-summary/home-summary.component.ts
@@ -1,9 +1,9 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarRef as MatSnackBarRef,
-  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
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 982adf896..01dc2de95 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
@@ -45,7 +45,7 @@
 </div>
 <div mat-dialog-actions>
   <div class="flex-grow-1">
-    <mat-checkbox i18n (change)="onChangeStaySignedIn($event)"
+    <mat-checkbox color="primary" i18n (change)="onChangeStaySignedIn($event)"
       >Stay signed in</mat-checkbox
     >
   </div>
diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts
index b740c7593..7c8540ea1 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts
+++ b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts
@@ -2,7 +2,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts
index ef4f342e4..e4ebd7dd0 100644
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts
+++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
diff --git a/apps/client/src/app/components/positions/positions.module.ts b/apps/client/src/app/components/positions/positions.module.ts
index 6828a9e2c..400b2ea6c 100644
--- a/apps/client/src/app/components/positions/positions.module.ts
+++ b/apps/client/src/app/components/positions/positions.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { GfPositionModule } from '../position/position.module';
diff --git a/apps/client/src/app/components/rules/rules.module.ts b/apps/client/src/app/components/rules/rules.module.ts
index 204b32a9b..e1bb645f2 100644
--- a/apps/client/src/app/components/rules/rules.module.ts
+++ b/apps/client/src/app/components/rules/rules.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts
index d017c6c0d..b05b4cdc0 100644
--- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts
+++ b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { RouterModule } from '@angular/router';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
diff --git a/apps/client/src/app/core/http-response.interceptor.ts b/apps/client/src/app/core/http-response.interceptor.ts
index 4a4d36ceb..84390b44c 100644
--- a/apps/client/src/app/core/http-response.interceptor.ts
+++ b/apps/client/src/app/core/http-response.interceptor.ts
@@ -8,10 +8,10 @@ import {
 } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarRef as MatSnackBarRef,
-  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
diff --git a/apps/client/src/app/pages/account/account-page.component.ts b/apps/client/src/app/pages/account/account-page.component.ts
index eacbe4c36..7c2beb8ed 100644
--- a/apps/client/src/app/pages/account/account-page.component.ts
+++ b/apps/client/src/app/pages/account/account-page.component.ts
@@ -11,10 +11,10 @@ import {
   MatLegacySlideToggleChange as MatSlideToggleChange
 } from '@angular/material/legacy-slide-toggle';
 import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarRef as MatSnackBarRef,
-  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
diff --git a/apps/client/src/app/pages/account/account-page.module.ts b/apps/client/src/app/pages/account/account-page.module.ts
index 1cf362c1d..5476b1536 100644
--- a/apps/client/src/app/pages/account/account-page.module.ts
+++ b/apps/client/src/app/pages/account/account-page.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
diff --git a/apps/client/src/app/pages/account/account-page.scss b/apps/client/src/app/pages/account/account-page.scss
index 4a798522a..ef3fd6b8f 100644
--- a/apps/client/src/app/pages/account/account-page.scss
+++ b/apps/client/src/app/pages/account/account-page.scss
@@ -4,15 +4,6 @@
 
   gf-access-table {
     overflow-x: auto;
-
-    table {
-      min-width: 100%;
-
-      .mat-row,
-      .mat-header-row {
-        width: 100%;
-      }
-    }
   }
 
   .fab-container {
diff --git a/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts b/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts
index 400b195de..3d7cfcfee 100644
--- a/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts
+++ b/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
index 3df9bed13..902309f4f 100644
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
+++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
diff --git a/apps/client/src/app/pages/features/features-page.module.ts b/apps/client/src/app/pages/features/features-page.module.ts
index 1c3830a42..f6c55ca8d 100644
--- a/apps/client/src/app/pages/features/features-page.module.ts
+++ b/apps/client/src/app/pages/features/features-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index a609431ba..e7c942f7b 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@@ -30,29 +30,15 @@
 <div class="container">
   <div class="button-container mb-5 row">
     <div class="align-items-center col d-flex justify-content-center">
-      <div class="text-center">
-        <ng-container *ngIf="hasPermissionToCreateUser">
-          <a
-            class="d-inline-block"
-            color="primary"
-            mat-flat-button
-            [routerLink]="['/register']"
-          >
-            Get Started
-          </a>
-        </ng-container>
-        <ng-container *ngIf="hasPermissionForDemo">
-          <div
-            *ngIf="hasPermissionToCreateUser"
-            class="d-inline-block mx-3 text-muted"
-          >
-            or
-          </div>
-          <a class="d-inline-block" mat-stroked-button [routerLink]="['/demo']">
-            Live Demo
-          </a>
-        </ng-container>
-      </div>
+      <ng-container *ngIf="hasPermissionToCreateUser">
+        <a color="primary" mat-flat-button [routerLink]="['/register']">
+          Get Started
+        </a>
+      </ng-container>
+      <ng-container *ngIf="hasPermissionForDemo">
+        <div *ngIf="hasPermissionToCreateUser" class="mx-3 text-muted">or</div>
+        <a mat-stroked-button [routerLink]="['/demo']"> Live Demo </a>
+      </ng-container>
     </div>
   </div>
 
@@ -394,15 +380,13 @@
           or check out the example account</ng-container
         >
       </p>
-      <div class="py-2 text-center">
+      <div class="align-items-center d-flex justify-content-center py-2">
         <a color="primary" mat-flat-button [routerLink]="['/register']">
           Get Started
         </a>
         <ng-container *ngIf="hasPermissionForDemo">
-          <div class="d-inline-block mx-3 text-muted">or</div>
-          <a class="d-inline-block" mat-stroked-button [routerLink]="['/demo']">
-            Live Demo
-          </a>
+          <div class="mx-3 text-muted">or</div>
+          <a mat-stroked-button [routerLink]="['/demo']"> Live Demo </a>
         </ng-container>
       </div>
     </div>
diff --git a/apps/client/src/app/pages/landing/landing-page.module.ts b/apps/client/src/app/pages/landing/landing-page.module.ts
index eaf4887cf..e495a4d6b 100644
--- a/apps/client/src/app/pages/landing/landing-page.module.ts
+++ b/apps/client/src/app/pages/landing/landing-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { RouterModule } from '@angular/router';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
diff --git a/apps/client/src/app/pages/landing/landing-page.scss b/apps/client/src/app/pages/landing/landing-page.scss
index 5b420583a..02dd64730 100644
--- a/apps/client/src/app/pages/landing/landing-page.scss
+++ b/apps/client/src/app/pages/landing/landing-page.scss
@@ -4,7 +4,7 @@
   display: block;
 
   .button-container {
-    .mat-stroked-button {
+    .mat-mdc-outlined-button {
       background-color: var(--light-background);
     }
   }
@@ -115,7 +115,7 @@
 
 :host-context(.is-dark-theme) {
   .button-container {
-    .mat-stroked-button {
+    .mat-mdc-outlined-button {
       background-color: var(--dark-background);
     }
   }
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts
index d89c3a3d6..6c4ede547 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts
@@ -10,7 +10,7 @@ import {
   MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
   MatLegacyDialogRef as MatDialogRef
 } from '@angular/material/legacy-dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
index f3c547fed..91942b16f 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
diff --git a/apps/client/src/app/pages/portfolio/holdings/holdings-page.module.ts b/apps/client/src/app/pages/portfolio/holdings/holdings-page.module.ts
index c6a5417e1..e2a3265d5 100644
--- a/apps/client/src/app/pages/portfolio/holdings/holdings-page.module.ts
+++ b/apps/client/src/app/pages/portfolio/holdings/holdings-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
 
diff --git a/apps/client/src/app/pages/pricing/pricing-page.module.ts b/apps/client/src/app/pages/pricing/pricing-page.module.ts
index 95144ce04..1cc4c7e56 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.module.ts
+++ b/apps/client/src/app/pages/pricing/pricing-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
diff --git a/apps/client/src/app/pages/public/public-page.module.ts b/apps/client/src/app/pages/public/public-page.module.ts
index edc625b97..0ca660e47 100644
--- a/apps/client/src/app/pages/public/public-page.module.ts
+++ b/apps/client/src/app/pages/public/public-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
diff --git a/apps/client/src/app/pages/register/register-page.html b/apps/client/src/app/pages/register/register-page.html
index 5147f5bac..47e761235 100644
--- a/apps/client/src/app/pages/register/register-page.html
+++ b/apps/client/src/app/pages/register/register-page.html
@@ -40,7 +40,7 @@
             <span i18n>Continue with Internet Identity</span>
           </button>
           <a
-            class="d-block px-4 rounded-pill"
+            class="px-4 rounded-pill w-100"
             href="../api/v1/auth/google"
             mat-stroked-button
             ><img
diff --git a/apps/client/src/app/pages/register/register-page.module.ts b/apps/client/src/app/pages/register/register-page.module.ts
index ed99387f0..09f680140 100644
--- a/apps/client/src/app/pages/register/register-page.module.ts
+++ b/apps/client/src/app/pages/register/register-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { RouterModule } from '@angular/router';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
diff --git a/apps/client/src/app/pages/register/register-page.scss b/apps/client/src/app/pages/register/register-page.scss
index 49063b48c..2334b58d4 100644
--- a/apps/client/src/app/pages/register/register-page.scss
+++ b/apps/client/src/app/pages/register/register-page.scss
@@ -2,7 +2,7 @@
   display: block;
 
   .button-container {
-    .mat-stroked-button {
+    .mat-mdc-outlined-button {
       background-color: var(--light-background);
     }
   }
@@ -26,7 +26,7 @@
 
 :host-context(.is-dark-theme) {
   .button-container {
-    .mat-stroked-button {
+    .mat-mdc-outlined-button {
       background-color: var(--dark-background);
     }
   }
diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts
index 72c4116f3..1622e0551 100644
--- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts
+++ b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts
@@ -3,7 +3,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.module.ts b/apps/client/src/app/pages/webauthn/webauthn-page.module.ts
index b95b1edc5..7cd0ed7f8 100644
--- a/apps/client/src/app/pages/webauthn/webauthn-page.module.ts
+++ b/apps/client/src/app/pages/webauthn/webauthn-page.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
 
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index a0ba70d05..37f847877 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -249,8 +249,8 @@ body {
       background: var(--dark-background);
     }
 
-    .mat-fab,
-    .mat-flat-button {
+    .mat-mdc-fab,
+    .mat-mdc-unelevated-button {
       &.mat-primary {
         color: rgba(var(--dark-primary-text)) !important;
       }
@@ -268,7 +268,7 @@ body {
     }
 
     .mat-mdc-paginator,
-    .mat-paginator {
+    .mat-mdc-paginator {
       background-color: rgba(var(--palette-foreground-base-dark), 0.02);
     }
 
@@ -384,8 +384,15 @@ ngx-skeleton-loader {
   margin: 0 !important;
 }
 
-.mat-fab,
-.mat-flat-button {
+.mat-mdc-button-base {
+  .mdc-button__label {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.mat-mdc-fab,
+.mat-mdc-unelevated-button {
   &.mat-primary {
     color: rgba(var(--light-primary-text)) !important;
   }
@@ -446,11 +453,11 @@ ngx-skeleton-loader {
 }
 
 .mat-mdc-paginator,
-.mat-paginator {
+.mat-mdc-paginator {
   background-color: rgba(var(--palette-foreground-base-light), 0.02);
 
   .mat-mdc-paginator-page-size,
-  .mat-paginator-page-size {
+  .mat-mdc-paginator-page-size {
     display: none;
   }
 }
diff --git a/apps/client/src/styles/table.scss b/apps/client/src/styles/table.scss
index f3e60fe1b..057253095 100644
--- a/apps/client/src/styles/table.scss
+++ b/apps/client/src/styles/table.scss
@@ -9,6 +9,16 @@
     }
   }
 
+  .mat-mdc-footer-row {
+    .mat-mdc-footer-cell {
+      border-top: 1px solid
+        rgba(
+          var(--palette-foreground-divider),
+          var(--palette-foreground-divider-alpha)
+        );
+    }
+  }
+
   .mat-mdc-row {
     &:nth-child(even) {
       background-color: rgba(var(--palette-foreground-base), 0.02);
@@ -34,6 +44,15 @@
   }
 
   @if $darkTheme {
+    .mat-mdc-footer-row {
+      .mat-mdc-footer-cell {
+        border-top-color: rgba(
+          var(--palette-foreground-divider-dark),
+          var(--palette-foreground-divider-dark-alpha)
+        );
+      }
+    }
+
     .mat-mdc-row {
       &:nth-child(even) {
         background-color: rgba(var(--palette-foreground-base-dark), 0.02);
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.scss b/libs/ui/src/lib/activities-table/activities-table.component.scss
index c88f45d91..270dfaf66 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.scss
+++ b/libs/ui/src/lib/activities-table/activities-table.component.scss
@@ -7,16 +7,6 @@
     overflow-x: auto;
 
     .mat-mdc-table {
-      td {
-        &.mat-mdc-footer-cell {
-          border-top: 1px solid
-            rgba(
-              var(--palette-foreground-divider),
-              var(--palette-foreground-divider-alpha)
-            );
-        }
-      }
-
       th {
         ::ng-deep {
           .mat-sort-header-container {
@@ -58,15 +48,6 @@
 
 :host-context(.is-dark-theme) {
   .mat-mdc-table {
-    td {
-      &.mat-mdc-footer-cell {
-        border-top-color: rgba(
-          var(--palette-foreground-divider-dark),
-          var(--palette-foreground-divider-dark-alpha)
-        );
-      }
-    }
-
     .type-badge {
       background-color: rgba(
         var(--palette-foreground-text-dark),