diff --git a/npm/ng-packs/packages/theme-basic/project.json b/npm/ng-packs/packages/theme-basic/project.json
index ac155e0fe7..620ea3bc51 100644
--- a/npm/ng-packs/packages/theme-basic/project.json
+++ b/npm/ng-packs/packages/theme-basic/project.json
@@ -31,7 +31,7 @@
       "executor": "@nx/vitest:test",
       "outputs": ["{options.reportsDirectory}"],
       "options": {
-        "reportsDirectory": "../../coverage/packages/theme-basic"
+        "reportsDirectory": "{projectRoot}/../../coverage/packages/theme-basic"
       }
     }
   }
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html
index a27790c939..6bbbb52c58 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html
@@ -4,7 +4,7 @@
   style="min-height: 4rem"
 >
   <div class="container">
-    <abp-logo *abpReplaceableTemplate="{ componentKey: service.logoComponentKey }"></abp-logo>
+    <abp-logo *abpReplaceableTemplate="{ componentKey: service.logoComponentKey }" />
     <button
       class="navbar-toggler"
       type="button"
@@ -18,13 +18,14 @@
       [class.overflow-hidden]="service.smallScreen"
       id="main-navbar-collapse"
     >
-      <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null"></ng-container>
+      <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null" />
 
       @if (service.smallScreen) {
         <div
-          [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'"
+          class="abp-collapse-margin"
+          [class.abp-collapse-margin-collapsed]="service.isCollapsed"
         >
-          <ng-container *ngTemplateOutlet="navigations"></ng-container>
+          <ng-container *ngTemplateOutlet="navigations" />
         </div>
       }
 
@@ -33,18 +34,18 @@
           *abpReplaceableTemplate="{
             componentKey: service.routesComponentKey,
             inputs: {
-              smallScreen: { value: service.smallScreen }
-            }
+              smallScreen: { value: service.smallScreen },
+            },
           }"
           class="mx-auto"
           [smallScreen]="service.smallScreen"
-        ></abp-routes>
+        />
 
         <abp-nav-items
           *abpReplaceableTemplate="{
-            componentKey: service.navItemsComponentKey
+            componentKey: service.navItemsComponentKey,
           }"
-        ></abp-nav-items>
+        />
       </ng-template>
     </div>
   </div>
@@ -52,12 +53,12 @@
 
 <!-- [@slideFromBottom]="outlet.isActivated && outlet.activatedRoute?.routeConfig?.path" TODO: throws ExpressionChangedAfterItHasBeenCheck when animation is active. It should be fixed -->
 <div class="container">
-  <abp-page-alert-container></abp-page-alert-container>
+  <abp-page-alert-container />
   <abp-auth-wrapper
     *abpReplaceableTemplate="{
-      componentKey: authWrapperKey
+      componentKey: authWrapperKey,
     }"
   >
-    <router-outlet #outlet="outlet"></router-outlet>
+    <router-outlet #outlet="outlet" />
   </abp-auth-wrapper>
 </div>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts
index 3600c615c9..9e55078c5d 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts
@@ -8,12 +8,9 @@ import { NavItemsComponent } from '../nav-items/nav-items.component';
 import { AuthWrapperComponent } from './auth-wrapper/auth-wrapper.component';
 import { PageAlertContainerComponent } from '../page-alert-container/page-alert-container.component';
 import { RouterOutlet } from '@angular/router';
-import { collapseWithMargin } from '@abp/ng.theme.shared';
-
 @Component({
   selector: 'abp-layout-account',
   templateUrl: './account-layout.component.html',
-  animations: [collapseWithMargin],
   providers: [LayoutService, SubscriptionService],
   imports: [
     NgTemplateOutlet,
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
index d27bc23ceb..ab9766d00b 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
@@ -4,7 +4,7 @@
   style="min-height: 4rem"
 >
   <div class="container">
-    <abp-logo *abpReplaceableTemplate="{ componentKey: service.logoComponentKey }"></abp-logo>
+    <abp-logo *abpReplaceableTemplate="{ componentKey: service.logoComponentKey }" />
     <button
       class="navbar-toggler"
       type="button"
@@ -18,11 +18,14 @@
       [class.overflow-hidden]="service.smallScreen"
       id="main-navbar-collapse"
     >
-      <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null"></ng-container>
+      <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null" />
 
       @if (service.smallScreen) {
-        <div [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'">
-          <ng-container *ngTemplateOutlet="navigations"></ng-container>
+        <div
+          class="abp-collapse-margin"
+          [class.abp-collapse-margin-collapsed]="service.isCollapsed"
+        >
+          <ng-container *ngTemplateOutlet="navigations" />
         </div>
       }
 
@@ -31,18 +34,18 @@
           *abpReplaceableTemplate="{
             componentKey: service.routesComponentKey,
             inputs: {
-              smallScreen: { value: service.smallScreen }
-            }
+              smallScreen: { value: service.smallScreen },
+            },
           }"
           class="mx-auto"
           [smallScreen]="service.smallScreen"
-        ></abp-routes>
+        />
 
         <abp-nav-items
           *abpReplaceableTemplate="{
-            componentKey: service.navItemsComponentKey
+            componentKey: service.navItemsComponentKey,
           }"
-        ></abp-nav-items>
+        />
       </ng-template>
     </div>
   </div>
@@ -50,7 +53,7 @@
 
 <!-- [@slideFromBottom]="outlet.isActivated && outlet.activatedRoute?.routeConfig?.path" TODO: throws ExpressionChangedAfterItHasBeenCheck when animation is active. It should be fixed -->
 <div class="container">
-  <abp-page-alert-container></abp-page-alert-container>
+  <abp-page-alert-container />
 
-  <router-outlet #outlet="outlet"></router-outlet>
+  <router-outlet #outlet="outlet" />
 </div>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts
index 0cebc476a5..b1221468d9 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts
@@ -1,5 +1,4 @@
 import { eLayoutType, ReplaceableTemplateDirective, SubscriptionService } from '@abp/ng.core';
-import { collapseWithMargin, slideFromBottom } from '@abp/ng.theme.shared';
 import { AfterViewInit, Component, inject } from '@angular/core';
 import { LayoutService } from '../../services/layout.service';
 import { NgTemplateOutlet } from '@angular/common';
@@ -12,7 +11,6 @@ import { NavItemsComponent } from '../nav-items/nav-items.component';
 @Component({
   selector: 'abp-layout-application',
   templateUrl: './application-layout.component.html',
-  animations: [slideFromBottom, collapseWithMargin],
   providers: [LayoutService, SubscriptionService],
   imports: [
     NgTemplateOutlet,