diff --git a/src/mixins/view-transition-mixin.ts b/src/mixins/view-transition-mixin.ts
index 08b0ccef35..5ac7a5de55 100644
--- a/src/mixins/view-transition-mixin.ts
+++ b/src/mixins/view-transition-mixin.ts
@@ -12,22 +12,17 @@ export const ViewTransitionMixin = <T extends Constructor<LitElement>>(
      * @returns Promise that resolves when the transition is complete
      */
     protected async startViewTransition(
-      updateCallback: () => void | Promise<void>,
-      transitionName?: string
+      updateCallback: () => void | Promise<void>
     ): Promise<void> {
       if (
         !document.startViewTransition ||
         window.matchMedia("(prefers-reduced-motion: reduce)").matches
       ) {
-        // Fallback: run the update without a transition
+        // Fallback: update without view transition
         await updateCallback();
         return;
       }
 
-      if (transitionName) {
-        this.dataset.viewTransition = transitionName;
-      }
-
       const transition = document.startViewTransition(async () => {
         await updateCallback();
       });
@@ -35,12 +30,7 @@ export const ViewTransitionMixin = <T extends Constructor<LitElement>>(
       try {
         await transition.finished;
       } catch (_error) {
-        // Transitions can be skipped
-      } finally {
-        // Clean up transition name if provided
-        if (transitionName) {
-          delete this.dataset.viewTransition;
-        }
+        // View transition skipped
       }
     }
 
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 93aee20aca..194ce7803a 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -500,7 +500,7 @@ class HUIRoot extends ViewTransitionMixin(LitElement) {
         class=${classMap({
           "edit-mode": this._editMode,
           narrow: this.narrow,
-          loaded: this._loaded,
+          loading: !this._loaded,
         })}
       >
         <div class="header">
@@ -1226,13 +1226,21 @@ class HUIRoot extends ViewTransitionMixin(LitElement) {
           -webkit-user-select: none;
           -moz-user-select: none;
         }
+
         :host > div {
+          view-transition-name: hui-root-container;
+        }
+        :host > div.loading {
           opacity: 0;
-          transition: opacity 0.3s ease-in;
         }
-        :host > div.loaded {
-          opacity: 1;
+
+        @media (prefers-reduced-motion: no-preference) {
+          ::view-transition-new(hui-root-container) {
+            animation: fade-in var(--ha-animation-layout-duration) ease-out;
+            animation-delay: var(--ha-animation-layout-delay-base);
+          }
         }
+
         .header {
           background-color: var(--app-header-background-color);
           color: var(--app-header-text-color, white);
@@ -1281,7 +1289,6 @@ class HUIRoot extends ViewTransitionMixin(LitElement) {
           padding: 0px 12px;
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
-          view-transition-name: layout-fade-in;
         }
         .narrow .toolbar {
           padding: 0 4px;