diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html
index 969f41fa1c..0aebd0927b 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html
@@ -8,8 +8,12 @@
   </div>
 </nav>
 
-<div style="padding-top: 5rem;" class="container">
-  <router-outlet></router-outlet>
+<div
+  [@routeAnimations]="outlet && outlet.activatedRoute && outlet.activatedRoute.routeConfig.path"
+  style="padding-top: 5rem;"
+  class="container"
+>
+  <router-outlet #outlet="outlet"></router-outlet>
 </div>
 
 <abp-confirmation></abp-confirmation>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts
index cc2113d31a..8e5fddcc46 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts
@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
+import { slideFromBottom } from '@abp/ng.theme.shared';
 
 @Component({
   selector: ' abp-layout',
   templateUrl: './layout.component.html',
+  animations: [slideFromBottom],
 })
 export class LayoutComponent {
   isCollapsed: boolean = false;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
new file mode 100644
index 0000000000..6fd1d939c4
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
@@ -0,0 +1 @@
+export * from './slide.animation';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts
new file mode 100644
index 0000000000..90f46662be
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts
@@ -0,0 +1,6 @@
+import { animate, state, style, transition, trigger, query } from '@angular/animations';
+export const slideFromBottom = trigger('routeAnimations', [
+  state('void', style({ 'margin-top': '20px', opacity: '0' })),
+  state('*', style({ 'margin-top': '0px', opacity: '1' })),
+  transition(':enter', [animate('0.2s ease-out', style({ opacity: '1', 'margin-top': '0px' }))]),
+]);
diff --git a/npm/ng-packs/packages/theme-shared/src/public-api.ts b/npm/ng-packs/packages/theme-shared/src/public-api.ts
index b7f52bc3f0..6a9eae0f64 100644
--- a/npm/ng-packs/packages/theme-shared/src/public-api.ts
+++ b/npm/ng-packs/packages/theme-shared/src/public-api.ts
@@ -3,6 +3,7 @@
  */
 
 export * from './lib/theme-shared.module';
+export * from './lib/animations';
 export * from './lib/components';
 export * from './lib/models';
 export * from './lib/services';