diff --git a/packages/ui/src/services/zen-zone/desktop-zen-zone.service.ts b/packages/ui/src/services/zen-zone/desktop-zen-zone.service.ts
index 2bda38c29d2..1c11d623c19 100644
--- a/packages/ui/src/services/zen-zone/desktop-zen-zone.service.ts
+++ b/packages/ui/src/services/zen-zone/desktop-zen-zone.service.ts
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
+import type { ComponentType } from '../../common/component-manager';
+import type { IZenZoneService } from './zen-zone.service';
 import { toDisposable } from '@univerjs/core';
-import { type IDisposable, Inject } from '@univerjs/core';
-import { BehaviorSubject, Subject } from 'rxjs';
-import type { ForwardRefExoticComponent } from 'react';
 
+import { type IDisposable, Inject } from '@univerjs/core';
+import { BehaviorSubject, ReplaySubject } from 'rxjs';
 import { ComponentManager } from '../../common/component-manager';
-import type { IZenZoneService } from './zen-zone.service';
 
-export class DesktopZenZoneService implements IZenZoneService {
-    readonly visible$ = new Subject<boolean>();
-    readonly componentKey$ = new Subject<string>();
+export class DesktopZenZoneService implements IZenZoneService, IDisposable {
+    readonly visible$ = new BehaviorSubject<boolean>(false);
+    readonly componentKey$ = new ReplaySubject<string>();
 
     private readonly _temporaryHidden$ = new BehaviorSubject<boolean>(false);
     readonly temporaryHidden$ = this._temporaryHidden$.asObservable();
@@ -42,6 +42,13 @@ export class DesktopZenZoneService implements IZenZoneService {
         // super
     }
 
+    dispose(): void {
+        this.visible$.next(false);
+        this.visible$.complete();
+
+        this.componentKey$.complete();
+    }
+
     hide(): void {
         this._temporaryHidden$.next(true);
     }
@@ -50,7 +57,7 @@ export class DesktopZenZoneService implements IZenZoneService {
         this._temporaryHidden$.next(false);
     }
 
-    set(key: string, component: ForwardRefExoticComponent<any>): IDisposable {
+    set(key: string, component: ComponentType): IDisposable {
         this._componentManager.register(key, component);
         this.componentKey$.next(key);
 
diff --git a/packages/ui/src/services/zen-zone/zen-zone.service.ts b/packages/ui/src/services/zen-zone/zen-zone.service.ts
index 14790be3b7f..0da6e17c015 100644
--- a/packages/ui/src/services/zen-zone/zen-zone.service.ts
+++ b/packages/ui/src/services/zen-zone/zen-zone.service.ts
@@ -14,21 +14,22 @@
  * limitations under the License.
  */
 
-import { createIdentifier } from '@univerjs/core';
 import type { IDisposable } from '@univerjs/core';
-import type { Observable, Subject } from 'rxjs';
+import type { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
+import type { ComponentType } from '../../common/component-manager';
+import { createIdentifier } from '@univerjs/core';
 
 export const IZenZoneService = createIdentifier<IZenZoneService>('univer.zen-zone-service');
 
 export interface IZenZoneService {
-    readonly visible$: Subject<boolean>;
-    readonly componentKey$: Subject<string>;
+    readonly visible$: BehaviorSubject<boolean>;
+    readonly componentKey$: ReplaySubject<string>;
     readonly temporaryHidden$: Observable<boolean>;
 
     readonly visible: boolean;
     readonly temporaryHidden: boolean;
 
-    set(key: string, component: any): IDisposable;
+    set(key: string, component: ComponentType): IDisposable;
 
     open(): void;