diff --git a/packages/engine-render/src/layer.ts b/packages/engine-render/src/layer.ts
index 5721360618c..185b3aeff46 100644
--- a/packages/engine-render/src/layer.ts
+++ b/packages/engine-render/src/layer.ts
@@ -102,7 +102,7 @@ export class Layer extends Disposable {
      * insert o to _objects[]
      * if o is a group, insert all its children and group itself to _objects[]
      * @param o
-     * @returns
+     * @returns this
      */
     addObject(o: BaseObject) {
         if (o.classType === RENDER_CLASS_TYPE.GROUP) {
diff --git a/packages/engine-render/src/render-manager/render-manager.service.ts b/packages/engine-render/src/render-manager/render-manager.service.ts
index dbd85741d28..2df8b780ba1 100644
--- a/packages/engine-render/src/render-manager/render-manager.service.ts
+++ b/packages/engine-render/src/render-manager/render-manager.service.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import type { Dependency, DependencyIdentifier, IDisposable, Nullable, UnitModel, UnitType, UniverInstanceType } from '@univerjs/core';
-import { createIdentifier, Disposable, Inject, Injector, IUniverInstanceService, remove, toDisposable } from '@univerjs/core';
+import type { Dependency, DependencyIdentifier, IDisposable, Nullable, UnitModel, UnitType } from '@univerjs/core';
+import { createIdentifier, Disposable, Inject, Injector, IUniverInstanceService, remove, toDisposable, UniverInstanceType } from '@univerjs/core';
 import type { Observable } from 'rxjs';
 import { BehaviorSubject, Subject } from 'rxjs';
 
@@ -148,9 +148,17 @@ export class RenderManagerService extends Disposable implements IRenderManagerSe
         dependencies.push(ctor);
 
         for (const [renderUnitId, render] of this._renderMap) {
-            const renderType = this._univerInstanceService.getUnitType(renderUnitId);
-            if (renderType === type) {
-                (render as RenderUnit).addRenderDependencies([ctor]);
+            if (type === UniverInstanceType.UNIVER_SLIDE) {
+                // const renderType = this._univerInstanceService.getUnitType(renderUnitId);
+                // renderUnitId  slide_test  cover_1 rect_1....
+                if (this._univerInstanceService.getUnit(renderUnitId)) {
+                    (render as RenderUnit).addRenderDependencies([ctor]);
+                }
+            } else {
+                const renderType = this._univerInstanceService.getUnitType(renderUnitId);
+                if (renderType === type) {
+                    (render as RenderUnit).addRenderDependencies([ctor]);
+                }
             }
         }
 
@@ -217,7 +225,7 @@ export class RenderManagerService extends Disposable implements IRenderManagerSe
             height,
         });
 
-        const unit = this._univerInstanceService.getUnit(unitId)!;
+        const unit = this._univerInstanceService.getUnit(unitId);
         let renderUnit: IRender;
 
         if (unit) {
diff --git a/packages/engine-render/src/scene.transformer.ts b/packages/engine-render/src/scene.transformer.ts
index d7b0040853e..d14314cfbe0 100644
--- a/packages/engine-render/src/scene.transformer.ts
+++ b/packages/engine-render/src/scene.transformer.ts
@@ -1609,6 +1609,10 @@ export class Transformer extends Disposable implements ITransformerConfig {
         return currentScene.getEngine()?.activeScene as Nullable<Scene>;
     }
 
+    activeAnObject(applyObject: BaseObject) {
+        this._updateActiveObjectList(applyObject, {} as IPointerEvent);
+    }
+
     private _updateActiveObjectList(applyObject: BaseObject, evt: IPointerEvent | IMouseEvent) {
         const { isCropper } = this._getConfig(applyObject);
 
diff --git a/packages/sheets-ui/src/controllers/render-controllers/sheet.render-controller.ts b/packages/sheets-ui/src/controllers/render-controllers/sheet.render-controller.ts
index 662edd52406..ffe54de85fb 100644
--- a/packages/sheets-ui/src/controllers/render-controllers/sheet.render-controller.ts
+++ b/packages/sheets-ui/src/controllers/render-controllers/sheet.render-controller.ts
@@ -59,7 +59,6 @@ export class SheetRenderController extends RxDisposable implements IRenderModule
 
     private _addNewRender() {
         const { scene, engine, unit: workbook } = this._context;
-
         scene.addLayer(new Layer(scene, [], 0), new Layer(scene, [], 2));
 
         this._addComponent(workbook);
diff --git a/packages/slides-ui/package.json b/packages/slides-ui/package.json
index 55aa012ffca..911c4d6bbfb 100644
--- a/packages/slides-ui/package.json
+++ b/packages/slides-ui/package.json
@@ -71,7 +71,8 @@
         "@univerjs/slides": "workspace:*",
         "@univerjs/ui": "workspace:*",
         "clsx": ">=2.0.0",
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "rxjs": ">=7.0.0"
     },
     "dependencies": {
         "@univerjs/icons": "^0.1.65"
diff --git a/packages/slides-ui/src/commands/operations/insert-text.operation.ts b/packages/slides-ui/src/commands/operations/insert-text.operation.ts
new file mode 100644
index 00000000000..abd85aa76b0
--- /dev/null
+++ b/packages/slides-ui/src/commands/operations/insert-text.operation.ts
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ICommand, SlideDataModel } from '@univerjs/core';
+import { CommandType, IUniverInstanceService, PageElementType, Tools, UniverInstanceType } from '@univerjs/core';
+import { CanvasView } from '@univerjs/slides';
+
+export interface ISlideAddTextParam {
+    text: string;
+};
+
+export const SlideAddTextOperation: ICommand<ISlideAddTextParam> = {
+    id: 'slide.operation.add-text',
+    type: CommandType.OPERATION,
+    handler: async (accessor, params) => {
+        const elementId = Tools.generateRandomId(6);
+        const defaultWidth = 220;
+        const defaultheight = 40;
+
+        const textContent = params?.text || 'A New Text';
+        const elmentData = {
+            id: elementId,
+            zIndex: 2,
+            left: 230,
+            top: 142,
+            width: defaultWidth,
+            height: defaultheight,
+            title: 'text',
+            description: '',
+            type: PageElementType.TEXT,
+            richText: {
+                text: textContent,
+                fs: 30,
+                cl: {
+                    rgb: 'rgb(51, 51, 51)',
+                },
+                bl: 1,
+            },
+        };
+
+        const univerInstanceService = accessor.get(IUniverInstanceService);
+        const slideData = univerInstanceService.getCurrentUnitForType<SlideDataModel>(UniverInstanceType.UNIVER_SLIDE);
+        if (!slideData) return false;
+
+        const activePage = slideData.getActivePage()!;
+        activePage.pageElements[elementId] = elmentData;
+        slideData.updatePage(activePage.id, activePage);
+
+        const canvasview = accessor.get(CanvasView);
+        const sceneObject = canvasview.createObjectToPage(elmentData, activePage.id);
+        if (sceneObject) {
+            canvasview.setObjectActiveByPage(sceneObject, activePage.id);
+        }
+
+        return true;
+    },
+};
diff --git a/packages/slides-ui/src/controllers/image.menu.ts b/packages/slides-ui/src/controllers/image.menu.ts
index 67d9d26ea9a..3a667aba6e2 100644
--- a/packages/slides-ui/src/controllers/image.menu.ts
+++ b/packages/slides-ui/src/controllers/image.menu.ts
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { getMenuHiddenObservable, type IMenuItem, MenuGroup, MenuItemType, MenuPosition } from '@univerjs/ui';
+import type { IMenuItem } from '@univerjs/ui';
+import { getMenuHiddenObservable, MenuGroup, MenuItemType, MenuPosition } from '@univerjs/ui';
 import type { IAccessor } from '@univerjs/core';
 import { UniverInstanceType } from '@univerjs/core';
 import { COMPONENT_UPLOAD_FILE_MENU, UploadFileType } from '../components/upload-component/component-name';
diff --git a/packages/slides-ui/src/controllers/slide-ui.controller.ts b/packages/slides-ui/src/controllers/slide-ui.controller.ts
index 3acebe5cecb..b7f9c123e6c 100644
--- a/packages/slides-ui/src/controllers/slide-ui.controller.ts
+++ b/packages/slides-ui/src/controllers/slide-ui.controller.ts
@@ -16,18 +16,20 @@
 
 import type { DependencyOverride } from '@univerjs/core';
 import { connectInjector, Disposable, ICommandService, Inject, Injector, LifecycleStages, OnLifecycle } from '@univerjs/core';
+import { AddImageSingle, GraphSingle, TextSingle } from '@univerjs/icons';
 import type { MenuConfig } from '@univerjs/ui';
 import { BuiltInUIPart, ComponentManager, IMenuService, IUIPartsService } from '@univerjs/ui';
-import { AddImageSingle, GraphSingle } from '@univerjs/icons';
-import { SlideSideBar } from '../views/slide-bar/SlideBar';
 import { ActivateSlidePageOperation } from '../commands/operations/activate.operation';
+import { InsertSlideFloatImageOperation } from '../commands/operations/insert-image.operation';
+import { InsertSlideShapeRectangleOperation } from '../commands/operations/insert-shape.operation';
+import { SlideAddTextOperation } from '../commands/operations/insert-text.operation';
 import { SetSlidePageThumbOperation } from '../commands/operations/set-thumb.operation';
 import { UploadFileMenu } from '../components/upload-component/UploadFile';
 import { COMPONENT_UPLOAD_FILE_MENU } from '../components/upload-component/component-name';
-import { InsertSlideFloatImageOperation } from '../commands/operations/insert-image.operation';
-import { InsertSlideShapeRectangleOperation } from '../commands/operations/insert-shape.operation';
+import { SlideSideBar } from '../views/slide-bar/SlideBar';
 import { IMAGE_UPLOAD_ICON, SlideImageMenuFactory, UploadSlideFloatImageMenuFactory } from './image.menu';
 import { GRAPH_SINGLE_ICON, SlideShapeMenuFactory, UploadSlideFloatShapeMenuFactory } from './shape.menu';
+import { AddTextMenuItemFactory, TEXT_ICON_ID } from './text.menu';
 
 export interface IUniverSlidesDrawingConfig {
     menu?: MenuConfig;
@@ -66,6 +68,7 @@ export class SlideUIController extends Disposable {
             UploadSlideFloatImageMenuFactory,
             SlideShapeMenuFactory,
             UploadSlideFloatShapeMenuFactory,
+            AddTextMenuItemFactory,
         ].forEach((menuFactory) => {
             this._menuService.addMenuItem(menuFactory(this._injector), menu);
         });
@@ -74,6 +77,7 @@ export class SlideUIController extends Disposable {
     private _initCustomComponents(): void {
         const componentManager = this._componentManager;
         this.disposeWithMe(componentManager.register(IMAGE_UPLOAD_ICON, AddImageSingle));
+        this.disposeWithMe(componentManager.register(TEXT_ICON_ID, TextSingle));
         this.disposeWithMe(componentManager.register(GRAPH_SINGLE_ICON, GraphSingle));
         this.disposeWithMe(componentManager.register(COMPONENT_UPLOAD_FILE_MENU, UploadFileMenu));
         // this.disposeWithMe(componentManager.register(COMPONENT_SHEET_DRAWING_PANEL, SheetDrawingPanel));
@@ -84,6 +88,7 @@ export class SlideUIController extends Disposable {
             ActivateSlidePageOperation,
             SetSlidePageThumbOperation,
             InsertSlideFloatImageOperation,
+            SlideAddTextOperation,
             InsertSlideShapeRectangleOperation,
         ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
     }
diff --git a/packages/slides-ui/src/controllers/slide.render-controller.ts b/packages/slides-ui/src/controllers/slide.render-controller.ts
new file mode 100644
index 00000000000..43829d0fba3
--- /dev/null
+++ b/packages/slides-ui/src/controllers/slide.render-controller.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { RxDisposable } from '@univerjs/core';
+import type { IRenderContext, IRenderModule } from '@univerjs/engine-render';
+
+export class SlideRenderController extends RxDisposable implements IRenderModule {
+    constructor(private readonly _context: IRenderContext<any>) {
+        super();
+    }
+
+    override dispose() {
+      //...
+    }
+}
diff --git a/packages/slides-ui/src/controllers/text.menu.ts b/packages/slides-ui/src/controllers/text.menu.ts
new file mode 100644
index 00000000000..7ccfc7f07fd
--- /dev/null
+++ b/packages/slides-ui/src/controllers/text.menu.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IAccessor } from '@univerjs/core';
+import { UniverInstanceType } from '@univerjs/core';
+import type { IMenuButtonItem } from '@univerjs/ui';
+import { getMenuHiddenObservable, MenuGroup, MenuItemType, MenuPosition } from '@univerjs/ui';
+import { SlideAddTextOperation } from '../commands/operations/insert-text.operation';
+
+export const TEXT_ICON_ID = 'text-single';
+
+export function AddTextMenuItemFactory(_accessor: IAccessor): IMenuButtonItem {
+    return {
+        id: SlideAddTextOperation.id,
+        group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
+        type: MenuItemType.BUTTON,
+        icon: TEXT_ICON_ID,
+        title: 'addText',
+        tooltip: 'addText',
+        positions: [MenuPosition.TOOLBAR_START],
+        hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE),
+    };
+}
diff --git a/packages/slides-ui/src/slides-ui-plugin.ts b/packages/slides-ui/src/slides-ui-plugin.ts
index 4bdcc42ded5..f59fb53ec32 100644
--- a/packages/slides-ui/src/slides-ui-plugin.ts
+++ b/packages/slides-ui/src/slides-ui-plugin.ts
@@ -17,23 +17,22 @@
 import type { Dependency, SlideDataModel } from '@univerjs/core';
 import { Inject, Injector, IUniverInstanceService, Plugin, UniverInstanceType } from '@univerjs/core';
 
-import type { MenuConfig } from '@univerjs/ui';
 import { IImageIoService, ImageIoService } from '@univerjs/drawing';
+import { IRenderManagerService } from '@univerjs/engine-render';
 import { SlideUIController } from './controllers/slide-ui.controller';
+import type { IUniverSlidesDrawingConfig } from './controllers/slide-ui.controller';
+import { SlideRenderController } from './controllers/slide.render-controller';
 
 export const SLIDE_UI_PLUGIN_NAME = 'SLIDE_UI';
 
-export interface IUniverSlidesUIConfig {
-    menu: MenuConfig;
-}
-
 export class UniverSlidesUIPlugin extends Plugin {
     static override pluginName = SLIDE_UI_PLUGIN_NAME;
     static override type = UniverInstanceType.UNIVER_SLIDE;
 
     constructor(
-        private readonly _config: Partial<IUniverSlidesUIConfig> = {},
+        private readonly _config: Partial<IUniverSlidesDrawingConfig> = {},
         @Inject(Injector) override readonly _injector: Injector,
+        @IRenderManagerService private readonly _renderManagerService: IRenderManagerService,
         @IUniverInstanceService private readonly _univerInstanceService: IUniverInstanceService
     ) {
         super();
@@ -51,6 +50,14 @@ export class UniverSlidesUIPlugin extends Plugin {
         ] as Dependency[]).forEach((d) => injector.add(d));
     }
 
+    override onReady(): void {
+        ([
+            [SlideRenderController],
+        ] as Dependency[]).forEach((m) => {
+            this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SLIDE, m));
+        });
+    }
+
     override onRendered(): void {
         this._markSlideAsFocused();
     }
diff --git a/packages/slides/src/slides-plugin.ts b/packages/slides/src/slides-plugin.ts
index f05fc605e0d..db60e8c4f38 100644
--- a/packages/slides/src/slides-plugin.ts
+++ b/packages/slides/src/slides-plugin.ts
@@ -16,7 +16,7 @@
 
 import { Inject, Injector, Plugin, UniverInstanceType } from '@univerjs/core';
 import type { Engine } from '@univerjs/engine-render';
-import { IRenderingEngine } from '@univerjs/engine-render';
+import { IRenderingEngine, IRenderManagerService } from '@univerjs/engine-render';
 import type { Dependency } from '@univerjs/core';
 
 import { CanvasView } from './views/render';
@@ -35,11 +35,12 @@ export class UniverSlidesPlugin extends Plugin {
 
     private _canvasEngine: Engine | null = null;
 
-    private _canvasView: CanvasView | null = null;
+    // private _canvasView: CanvasView | null = null;
 
     constructor(
         config: Partial<IUniverSlidesConfig> = {},
-        @Inject(Injector) override readonly _injector: Injector
+        @Inject(Injector) override readonly _injector: Injector,
+        @IRenderManagerService private readonly _renderManagerService: IRenderManagerService
     ) {
         super();
 
@@ -51,6 +52,10 @@ export class UniverSlidesPlugin extends Plugin {
         this.initCanvasEngine();
     }
 
+    override onReady(): void {
+
+    }
+
     getConfig() {
         return this._config;
     }
@@ -67,9 +72,11 @@ export class UniverSlidesPlugin extends Plugin {
         return this._canvasEngine;
     }
 
-    getCanvasView() {
-        return this._canvasView;
-    }
+
+    // no one is using this! 
+    // getCanvasView() {
+    //     return this._canvasView;
+    // }
 
     private _initializeDependencies(slideInjector: Injector) {
         const dependencies: Dependency[] = [[CanvasView]];
diff --git a/packages/slides/src/views/render/adaptor.ts b/packages/slides/src/views/render/adaptor.ts
index 7e04460ca8f..22186e28818 100644
--- a/packages/slides/src/views/render/adaptor.ts
+++ b/packages/slides/src/views/render/adaptor.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import type { Injector, IPageElement, PageElementType } from '@univerjs/core';
+import type { Injector, IPageElement, Nullable, PageElementType } from '@univerjs/core';
 import { Registry } from '@univerjs/core';
-import type { Scene } from '@univerjs/engine-render';
+import type { BaseObject, Scene } from '@univerjs/engine-render';
 
 export abstract class ObjectAdaptor {
     zIndex = 0;
@@ -30,7 +30,7 @@ export abstract class ObjectAdaptor {
         return this;
     }
 
-    abstract convert(pageElement: IPageElement, mainScene: Scene): void;
+    abstract convert(pageElement: IPageElement, mainScene: Scene): Nullable<BaseObject>;
 
     create(injector: Injector): void {
         // FIXME: should not be empty
diff --git a/packages/slides/src/views/render/adaptors/rich-text-adaptor.ts b/packages/slides/src/views/render/adaptors/rich-text-adaptor.ts
index 2eb8d0434b9..7b2ddf09678 100644
--- a/packages/slides/src/views/render/adaptors/rich-text-adaptor.ts
+++ b/packages/slides/src/views/render/adaptors/rich-text-adaptor.ts
@@ -37,7 +37,7 @@ export class RichTextAdaptor extends ObjectAdaptor {
         return this;
     }
 
-    override convert(pageElement: IPageElement, mainScene: Scene) {
+    override convert(pageElement: IPageElement, _mainScene: Scene) {
         const {
             id,
             zIndex,
diff --git a/packages/slides/src/views/render/canvas-view.ts b/packages/slides/src/views/render/canvas-view.ts
index f3f92cfa703..b884c904348 100644
--- a/packages/slides/src/views/render/canvas-view.ts
+++ b/packages/slides/src/views/render/canvas-view.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import type { EventState, IColorStyle, ISlidePage, Nullable, SlideDataModel } from '@univerjs/core';
-import { debounce, getColorStyle, Inject, Injector, IUniverInstanceService, LifecycleStages, OnLifecycle, RxDisposable, UniverInstanceType } from '@univerjs/core';
-import type { IWheelEvent } from '@univerjs/engine-render';
+import type { EventState, IColorStyle, IPageElement, ISlidePage, Nullable, SlideDataModel } from '@univerjs/core';
+import { createIdentifier, debounce, getColorStyle, Inject, Injector, IUniverInstanceService, LifecycleStages, OnLifecycle, RxDisposable, UniverInstanceType } from '@univerjs/core';
+import type { BaseObject, IRenderContext, IRenderModule, IWheelEvent } from '@univerjs/engine-render';
 import {
     IRenderManagerService,
     Rect,
@@ -34,13 +34,17 @@ export enum SLIDE_KEY {
     SCENE = '__mainScene__',
     VIEW = '__mainView__',
 }
+
+export type PageID = string;
+
+// export const ICanvasView = createIdentifier<IUniverInstanceService>('univer.slide.canvas-view');
 @OnLifecycle(LifecycleStages.Ready, CanvasView)
-export class CanvasView extends RxDisposable {
+export class CanvasView extends RxDisposable implements IRenderModule {
     private _objectProvider: ObjectProvider | null = null;
 
     constructor(
-        @IUniverInstanceService private readonly _univerInstanceService: IUniverInstanceService,
         @Inject(Injector) private readonly _injector: Injector,
+        @IUniverInstanceService private readonly _univerInstanceService: IUniverInstanceService,
         @IRenderManagerService private readonly _renderManagerService: IRenderManagerService
     ) {
         super();
@@ -388,25 +392,29 @@ export class CanvasView extends RxDisposable {
         this._renderManagerService.createRender(pageId);
     }
 
+    private _sceneMap = new Map<string, Scene>();
+    /**
+     *
+     * @param pageId
+     * @param page
+     * @returns
+     */
     private _createScene(pageId: string, page: ISlidePage) {
         const render = this._currentRender();
-
         if (!render || !this._objectProvider) {
             return;
         }
 
         const { scene: mainScene, mainComponent } = render;
-
         const slide = mainComponent as Slide;
-
         const { width, height } = slide;
-
-        const scene = new Scene(pageId, slide, {
+        const pageScene = new Scene(pageId, slide, {
             width,
             height,
         });
+        this._sceneMap.set(pageId, pageScene);
 
-        const viewMain = new Viewport(`PageViewer_${pageId}`, scene, {
+        const viewMain = new Viewport(`PageViewer_${pageId}`, pageScene, {
             left: 0,
             top: 0,
             bottom: 0,
@@ -414,7 +422,6 @@ export class CanvasView extends RxDisposable {
             isRelativeX: true,
             isRelativeY: true,
         });
-
         viewMain.closeClip();
 
         const { pageElements, pageBackgroundFill } = page;
@@ -423,15 +430,15 @@ export class CanvasView extends RxDisposable {
         const objects = this._objectProvider.convertToRenderObjects(pageElements, mainScene);
         if (!objects || !slide) return;
 
-        this._addBackgroundRect(scene, pageBackgroundFill);
+        this._addBackgroundRect(pageScene, pageBackgroundFill);
         // So finally SceneViewers are added to the scene as objects. How can we do optimizations on this?
-        scene.addObjects(objects);
+        pageScene.addObjects(objects);
 
         objects.forEach((object) => {
-            scene.attachTransformerTo(object);
+            pageScene.attachTransformerTo(object);
         });
 
-        const transformer = scene.getTransformer();
+        const transformer = pageScene.getTransformer();
 
         transformer?.changeEnd$.subscribe(() => {
             this._thumbSceneRender(pageId, slide);
@@ -441,12 +448,48 @@ export class CanvasView extends RxDisposable {
             this._thumbSceneRender(pageId, slide);
         });
 
-        slide.addPage(scene);
+        slide.addPage(pageScene);
 
-        return scene;
+        return pageScene;
     }
 
     private _initializeDependencies(slideInjector: Injector) {
         this._objectProvider = slideInjector.createInstance(ObjectProvider);
     }
+
+    getRenderUnitByPageId(pageId: PageID) {
+        const scene = this._sceneMap.get(pageId);
+        // no render context
+        // const { engine, unit } = this._renderContext;
+        return {
+            scene,
+            // engine,
+            // unit,
+        };
+    }
+
+    createObjectToPage(element: IPageElement, pageID: PageID): Nullable<BaseObject> {
+        const render = this._currentRender();
+
+        if (!render || !this._objectProvider) {
+            return;
+        }
+        const { scene } = this.getRenderUnitByPageId(pageID);
+        if (!scene) return;
+
+        const object = this._objectProvider.convertToRenderObject(element, scene);
+        if (object) {
+            scene.addObject(object);
+            scene.attachTransformerTo(object);
+            scene.getLayer().makeDirty();
+            return object;
+        }
+    }
+
+    setObjectActiveByPage(obj: BaseObject, pageID: PageID) {
+        const { scene } = this.getRenderUnitByPageId(pageID);
+        if (!scene) return;
+        const transformer = scene.getTransformer();
+        transformer?.activeAnObject(obj);
+    }
 }
diff --git a/packages/slides/src/views/render/object-provider.ts b/packages/slides/src/views/render/object-provider.ts
index 3abb14699eb..c1adafb6d5b 100644
--- a/packages/slides/src/views/render/object-provider.ts
+++ b/packages/slides/src/views/render/object-provider.ts
@@ -43,6 +43,10 @@ export class ObjectProvider {
         return objects;
     }
 
+    convertToRenderObject(pageElement: IPageElement, mainScene: Scene) {
+        return this._executor(pageElement, mainScene);
+    }
+
     private _executor(pageElement: IPageElement, mainScene: Scene) {
         const { id: pageElementId, type } = pageElement;
 
diff --git a/packages/ui/src/views/components/doc-bars/hook.ts b/packages/ui/src/views/components/doc-bars/hook.ts
index 40e0f4f3a78..9b03ddd87b0 100644
--- a/packages/ui/src/views/components/doc-bars/hook.ts
+++ b/packages/ui/src/views/components/doc-bars/hook.ts
@@ -82,6 +82,7 @@ export function useToolbarGroups(categories: MenuPositionWithCustom[]): IToolbar
         return () => s.unsubscribe();
     }, [menuService, category, categories]);
 
+    // groupsByKey  see menu/menu.ts @MenuGroup
     const groupsByKey = useMemo(() => {
         return groups.find((g) => g.name === category)?.menuItems.reduce(
             (acc, item) => {