diff --git a/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.scss b/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.scss
index bccfe1c7e..98e3c557e 100644
--- a/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.scss
+++ b/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.scss
@@ -3,12 +3,6 @@
 @use '@siemens/element-theme/src/styles/all-variables';
 
 .app-switcher {
-  position: fixed;
-  inset-block-start: calc(
-    variables.$si-application-header-height + 1px /* header border compensation */ +
-      variables.$si-titlebar-spacing + variables.$si-system-banner-spacing
-  );
-  inset-inline: 0;
   min-block-size: 200px;
   max-block-size: calc(
     100vh - variables.$si-application-header-height - variables.$si-titlebar-spacing -
@@ -17,7 +11,6 @@
   padding: map.get(variables.$spacers, 6);
   display: flex;
   flex-direction: column;
-  z-index: variables.$zindex-launchpad;
   background-color: variables.$element-base-1;
 
   @include all-variables.media-breakpoint-up(lg) {
diff --git a/projects/element-ng/application-header/si-application-header.component.html b/projects/element-ng/application-header/si-application-header.component.html
index 70773c72c..82450e192 100644
--- a/projects/element-ng/application-header/si-application-header.component.html
+++ b/projects/element-ng/application-header/si-application-header.component.html
@@ -51,13 +51,14 @@
 </header>
 
 @if (launchpadOpen() && launchpad()) {
-  <div [id]="id + '-launchpad'">
+  <div class="launchpad-container" animate.leave="launchpad-leave" [id]="id + '-launchpad'">
     <ng-template [ngTemplateOutlet]="launchpad()!" [ngTemplateOutletInjector]="injector" />
   </div>
 }
 
 @if (openDropdownCount() || launchpadOpen()) {
   <div
+    animate.leave="backdrop-leave"
     [class]="`modal-backdrop ${launchpadOpen() ? 'd-block' : `d-${expandBreakpoint()}-none`}`"
     (click)="backdropClicked()"
   ></div>
diff --git a/projects/element-ng/application-header/si-application-header.component.scss b/projects/element-ng/application-header/si-application-header.component.scss
index fbc12f68e..c354be86b 100644
--- a/projects/element-ng/application-header/si-application-header.component.scss
+++ b/projects/element-ng/application-header/si-application-header.component.scss
@@ -2,4 +2,40 @@
 
 .modal-backdrop {
   z-index: variables.$zindex-application-header-backdrop;
+  opacity: 1;
+  transition: opacity variables.element-transition-duration(0.15s) linear;
+
+  @starting-style {
+    opacity: 0;
+  }
+
+  &.backdrop-leave {
+    opacity: 0;
+  }
+}
+
+.launchpad-container {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-start: calc(
+    variables.$si-application-header-height + 1px /* header border compensation */ +
+      variables.$si-titlebar-spacing + variables.$si-system-banner-spacing
+  );
+  z-index: variables.$zindex-launchpad;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity variables.element-transition-duration(0.5s) ease,
+    transform variables.element-transition-duration(0.5s) ease;
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(-120px);
+  }
+
+  &.launchpad-leave {
+    opacity: 0;
+    transform: translateY(-120px);
+    transition-duration: variables.element-transition-duration(0.25s);
+  }
 }
diff --git a/projects/element-theme/src/styles/variables/_zindex.scss b/projects/element-theme/src/styles/variables/_zindex.scss
index 6054721c5..451c36e20 100644
--- a/projects/element-theme/src/styles/variables/_zindex.scss
+++ b/projects/element-theme/src/styles/variables/_zindex.scss
@@ -16,5 +16,5 @@ $zindex-sidepanel-responsive: $zindex-fixed + 1; // above vertical-nav
 $zindex-vertical-nav: $zindex-fixed + 1;
 $zindex-vertical-nav-collapsed: $zindex-fixed;
 $zindex-application-header: $zindex-fixed + 3;
-$zindex-launchpad: $zindex-application-header;
+$zindex-launchpad: $zindex-application-header - 1;
 $zindex-application-header-backdrop: $zindex-launchpad - 1;