diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4122d17fb..f936dd472 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Refactored the deprecated animation providers (`provideAnimations()` and `provideNoopAnimations()`)
 - Improved the language localization for Polish (`pl`)
 
 ### Fixed
diff --git a/apps/client/src/main.ts b/apps/client/src/main.ts
index 45901baec..3e80df9c7 100644
--- a/apps/client/src/main.ts
+++ b/apps/client/src/main.ts
@@ -23,7 +23,6 @@ import {
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { provideAnimations } from '@angular/platform-browser/animations';
 import { RouterModule, TitleStrategy } from '@angular/router';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { provideIonicAngular } from '@ionic/angular/standalone';
@@ -82,7 +81,6 @@ import { environment } from './environments/environment';
       ),
       LanguageService,
       ModulePreloadService,
-      provideAnimations(),
       provideHttpClient(withInterceptorsFromDi()),
       provideIonicAngular(),
       provideMarkdown(),
diff --git a/libs/ui/src/lib/carousel/carousel.component.ts b/libs/ui/src/lib/carousel/carousel.component.ts
index 4ecd12c79..f47d41ae5 100644
--- a/libs/ui/src/lib/carousel/carousel.component.ts
+++ b/libs/ui/src/lib/carousel/carousel.component.ts
@@ -1,4 +1,5 @@
 import {
+  ANIMATION_MODULE_TYPE,
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
@@ -11,7 +12,6 @@ import {
   ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { chevronBackOutline, chevronForwardOutline } from 'ionicons/icons';
diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts b/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts
index 6c89718bd..45a996294 100644
--- a/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts
+++ b/libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts
@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { ANIMATION_MODULE_TYPE, importProvidersFrom } from '@angular/core';
 import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
 
 import { EntityLogoImageSourceServiceMock } from '../mocks/entity-logo-image-source.service.mock';
@@ -13,8 +12,11 @@ export default {
   decorators: [
     applicationConfig({
       providers: [
-        provideNoopAnimations(),
         importProvidersFrom(CommonModule),
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        },
         {
           provide: EntityLogoImageSourceService,
           useValue: new EntityLogoImageSourceServiceMock()
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts
index ad80499d7..f4528aac6 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_LOCALE } from '@ghostfolio/common/config';
 
 import { CommonModule } from '@angular/common';
+import { ANIMATION_MODULE_TYPE } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import '@angular/localize/init';
 import { MatButtonModule } from '@angular/material/button';
@@ -8,7 +9,6 @@ import { provideNativeDateAdapter } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -32,10 +32,16 @@ export default {
         MatFormFieldModule,
         MatInputModule,
         NgxSkeletonLoaderModule,
-        NoopAnimationsModule,
         ReactiveFormsModule
       ],
-      providers: [FireCalculatorService, provideNativeDateAdapter()]
+      providers: [
+        FireCalculatorService,
+        provideNativeDateAdapter(),
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        }
+      ]
     })
   ]
 } as Meta<GfFireCalculatorComponent>;
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts
index de7a09a04..5bae01c70 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.stories.ts
@@ -2,14 +2,13 @@ import { LookupItem } from '@ghostfolio/common/interfaces';
 
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { importProvidersFrom } from '@angular/core';
+import { ANIMATION_MODULE_TYPE, importProvidersFrom } from '@angular/core';
 import {
   FormControl,
   FormsModule,
   NgControl,
   ReactiveFormsModule
 } from '@angular/forms';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
 
 import { HttpClientMock } from '../mocks/httpClient.mock';
@@ -75,8 +74,11 @@ export default {
   decorators: [
     applicationConfig({
       providers: [
-        provideNoopAnimations(),
         importProvidersFrom(CommonModule, FormsModule, ReactiveFormsModule),
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        },
         {
           provide: NgControl,
           useValue: {
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
index d11175fd1..48aeaffe3 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
+import { ANIMATION_MODULE_TYPE } from '@angular/core';
 import '@angular/localize/init';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 import { GfTagsSelectorComponent } from './tags-selector.component';
@@ -10,7 +10,13 @@ export default {
   component: GfTagsSelectorComponent,
   decorators: [
     moduleMetadata({
-      imports: [CommonModule, NoopAnimationsModule]
+      imports: [CommonModule],
+      providers: [
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        }
+      ]
     })
   ]
 } as Meta<GfTagsSelectorComponent>;
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 11900106a..60f803289 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -58,7 +58,7 @@
         mat-cell
         [attr.colspan]="displayedColumns.length"
       >
-        <div [@detailExpand]="element.expand ? 'expanded' : 'collapsed'">
+        <div class="detail-expand" [class.expanded]="element.expand">
           <div class="holding-parents-table">
             <table
               class="gf-table w-100"
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.scss b/libs/ui/src/lib/top-holdings/top-holdings.component.scss
index b3e811a2c..4ccac5d59 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.scss
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.scss
@@ -19,6 +19,21 @@
         height: 0;
       }
 
+      .detail-expand {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1);
+
+        &.expanded {
+          grid-template-rows: 1fr;
+        }
+
+        .holding-parents-table {
+          min-height: 0;
+          overflow: hidden;
+        }
+      }
+
       .holding-parents-table {
         --table-padding: 0.5em;
 
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.ts b/libs/ui/src/lib/top-holdings/top-holdings.component.ts
index 83bcda3cd..5ee8813a1 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.ts
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.ts
@@ -5,13 +5,6 @@ import {
   PortfolioPosition
 } from '@ghostfolio/common/interfaces';
 
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger
-} from '@angular/animations';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -31,16 +24,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { GfValueComponent } from '../value/value.component';
 
 @Component({
-  animations: [
-    trigger('detailExpand', [
-      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
-      state('expanded', style({ height: '*' })),
-      transition(
-        'expanded <=> collapsed',
-        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
-      )
-    ])
-  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     GfValueComponent,
diff --git a/libs/ui/src/lib/value/value.component.stories.ts b/libs/ui/src/lib/value/value.component.stories.ts
index 5a285e89b..a5971b252 100644
--- a/libs/ui/src/lib/value/value.component.stories.ts
+++ b/libs/ui/src/lib/value/value.component.stories.ts
@@ -1,5 +1,5 @@
+import { ANIMATION_MODULE_TYPE } from '@angular/core';
 import '@angular/localize/init';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { applicationConfig, moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -11,7 +11,12 @@ export default {
   component: GfValueComponent,
   decorators: [
     applicationConfig({
-      providers: [provideNoopAnimations()]
+      providers: [
+        {
+          provide: ANIMATION_MODULE_TYPE,
+          useValue: 'NoopAnimations'
+        }
+      ]
     }),
     moduleMetadata({
       imports: [NgxSkeletonLoaderModule]