diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 38f0ded72a..e8ccd65c67 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -72,7 +72,7 @@ import {
 } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
-import { haStyle } from "../../resources/styles";
+import { haStyle, haStyleAnimations } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { showToast } from "../../util/toast";
@@ -1209,6 +1209,7 @@ class HUIRoot extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
+      haStyleAnimations,
       css`
         :host {
           -ms-user-select: none;
@@ -1263,6 +1264,8 @@ class HUIRoot extends LitElement {
           padding: 0px 12px;
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
+          animation: fadeIn var(--ha-animation-duration) ease-out both;
+          animation-delay: var(--ha-animation-delay-base);
         }
         .narrow .toolbar {
           padding: 0 4px;
diff --git a/src/resources/theme/core.globals.ts b/src/resources/theme/core.globals.ts
index c59f155bd6..40e69be55b 100644
--- a/src/resources/theme/core.globals.ts
+++ b/src/resources/theme/core.globals.ts
@@ -44,7 +44,7 @@ export const coreStyles = css`
     --ha-space-20: 80px;
 
     /* Animation timing */
-    --ha-animation-duration: 300ms;
+    --ha-animation-duration: 400ms;
     --ha-animation-delay-base: 50ms;
   }
 `;