diff --git a/projects/layout/components/app-bar/app-bar-back.component.ts b/projects/layout/components/app-bar/app-bar-back.component.ts
index e16a51ebbaf6..3d4df7f36e4d 100644
--- a/projects/layout/components/app-bar/app-bar-back.component.ts
+++ b/projects/layout/components/app-bar/app-bar-back.component.ts
@@ -2,8 +2,8 @@ import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {TuiIcon} from '@taiga-ui/core/components/icon';
 import type {TuiAppearanceOptions} from '@taiga-ui/core/directives/appearance';
 import {
-    TuiAppearance,
     tuiAppearanceOptionsProvider,
+    TuiWithAppearance,
 } from '@taiga-ui/core/directives/appearance';
 import {TUI_SPIN_ICONS} from '@taiga-ui/core/tokens';
 
@@ -15,7 +15,7 @@ import {TUI_SPIN_ICONS} from '@taiga-ui/core/tokens';
     styleUrls: ['./app-bar-back.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [tuiAppearanceOptionsProvider(TuiAppBarBack)],
-    hostDirectives: [TuiAppearance],
+    hostDirectives: [TuiWithAppearance],
 })
 export class TuiAppBarBack implements TuiAppearanceOptions {
     protected readonly icons = inject(TUI_SPIN_ICONS);