diff --git a/src/controller/explorer/explorer.tsx b/src/controller/explorer/explorer.tsx
index f849f9f10..bcdb8fa49 100644
--- a/src/controller/explorer/explorer.tsx
+++ b/src/controller/explorer/explorer.tsx
@@ -2,7 +2,8 @@ import 'reflect-metadata';
 import * as React from 'react';
 import { Controller } from 'mo/react/controller';
 import { container, singleton } from 'tsyringe';
-import { ExplorerView, FolderTreeView } from 'mo/workbench/sidebar/explore';
+import { connect } from 'mo';
+import { Explorer, FolderTreeView } from 'mo/workbench/sidebar/explore';
 import { IMenuItem } from 'mo/components/menu';
 import { MENU_VIEW_SIDEBAR } from 'mo/model/workbench/menuBar';
 import { IActivityBarItem } from 'mo/model/workbench/activityBar';
@@ -76,6 +77,8 @@ export class ExplorerController
             onCollapseToolbar: ctx.onCollapseToolbar,
         };
 
+        const ExplorerView = connect(this.explorerService, Explorer);
+
         const explorePane = {
             id: 'explore',
             title: 'EXPLORER',
@@ -153,12 +156,12 @@ export class ExplorerController
         }
     };
 
-    public renderFolderTree() {
+    public renderFolderTree = () => {
         return (
             <FolderTreeView
                 {...this.folderTreeService.getState()?.folderTree}
                 {...this.folderTreeController}
             />
         );
-    }
+    };
 }
diff --git a/src/controller/index.ts b/src/controller/index.ts
index b0bf4ceda..6be4d63a1 100644
--- a/src/controller/index.ts
+++ b/src/controller/index.ts
@@ -1,26 +1,9 @@
 import { container } from 'tsyringe';
-// import { ActivityBarController } from './activityBar';
-// import { EditorController } from './editor';
-// import { ExplorerController } from './explorer/explorer';
-// import { FolderTreeController } from './explorer/folderTree';
-// import { SearchController } from './search/search';
-// import { MenuBarController } from './menuBar';
+import { ExplorerController } from './explorer/explorer';
+import { FolderTreeController } from './explorer/folderTree';
+import { SearchController } from './search/search';
 import { NotificationController } from './notification';
-// import { PanelController } from './panel';
-// import { SettingsController } from './settings';
-// import { SidebarController } from './sidebar';
-// import { StatusBarController } from './statusBar';
-// import { WorkbenchController } from './workbench';
-
-// export const activityBarController = container.resolve(ActivityBarController);
-// export const editorController = container.resolve(EditorController);
-// export const menuBarController = container.resolve(MenuBarController);
-// export const panelController = container.resolve(PanelController);
-// export const sidebarController = container.resolve(SidebarController);
-// export const explorerController = container.resolve(ExplorerController);
-// export const searchController = container.resolve(SearchController);
-// export const statusBarController = container.resolve(StatusBarController);
-// export const settingsController = container.resolve(SettingsController);
-// export const folderTreeController = container.resolve(FolderTreeController);
-// export const workbenchController = container.resolve(WorkbenchController);
+export const explorerController = container.resolve(ExplorerController);
+export const searchController = container.resolve(SearchController);
+export const folderTreeController = container.resolve(FolderTreeController);
 export const notificationController = container.resolve(NotificationController);
diff --git a/src/controller/search/search.tsx b/src/controller/search/search.tsx
index d8e259ccc..83d68db4f 100644
--- a/src/controller/search/search.tsx
+++ b/src/controller/search/search.tsx
@@ -1,9 +1,9 @@
 import 'reflect-metadata';
 import { Controller } from 'mo/react/controller';
 import { container, singleton } from 'tsyringe';
-import { IActivityBarItem } from 'mo';
+import { connect, IActivityBarItem } from 'mo';
 import * as React from 'react';
-import { SearchPanelView } from 'mo/workbench/sidebar/search';
+import { SearchPanel } from 'mo/workbench/sidebar/search';
 import { IActionBarItem } from 'mo/components/actionBar';
 import {
     SEARCH_CASE_SENSITIVE_COMMAND_ID,
@@ -17,6 +17,8 @@ import {
     ActivityBarService,
     IActivityBarService,
     ISearchService,
+    FolderTreeService,
+    IFolderTreeService,
     ISidebarService,
     SearchService,
     SidebarService,
@@ -38,24 +40,43 @@ export class SearchController extends Controller implements ISearchController {
     private readonly activityBarService: IActivityBarService;
     private readonly sidebarService: ISidebarService;
     private readonly searchService: ISearchService;
-    private readonly searchController: ISearchController;
+    private readonly folderTreeService: IFolderTreeService;
 
     constructor() {
         super();
         this.activityBarService = container.resolve(ActivityBarService);
         this.sidebarService = container.resolve(SidebarService);
         this.searchService = container.resolve(SearchService);
-        this.searchController = container.resolve(SearchController);
+        this.folderTreeService = container.resolve(FolderTreeService);
         this.initView();
     }
 
-    private initView = () => {
-        const ctx = this;
+    private initView() {
+        const SearchPanelView = connect(
+            {
+                search: this.searchService,
+                folderTree: this.folderTreeService,
+            },
+            SearchPanel
+        );
+
+        const searchEvent = {
+            setSearchValue: this.setSearchValue,
+            setReplaceValue: this.setReplaceValue,
+            onToggleAddon: this.onToggleAddon,
+            onToggleCaseSensitive: this.onToggleCaseSensitive,
+            onToggleWholeWord: this.onToggleWholeWord,
+            onToggleRegex: this.onToggleRegex,
+            onTogglePreserveCase: this.onTogglePreserveCase,
+            onToggleRepalceAll: this.onToggleRepalceAll,
+            convertFoldToSearchTree: this.convertFoldToSearchTree,
+        };
+
         const searchSidePane = {
             id: 'searchPane',
             title: 'SEARCH',
             render() {
-                return <SearchPanelView {...ctx.searchController} />;
+                return <SearchPanelView {...searchEvent} />;
             },
         };
 
@@ -70,7 +91,7 @@ export class SearchController extends Controller implements ISearchController {
                 });
             }
         });
-    };
+    }
 
     public readonly setSearchValue = (value?: string) => {
         this.searchService.setSearchValue?.(value);
diff --git a/src/workbench/sidebar/explore/index.tsx b/src/workbench/sidebar/explore/index.tsx
index 70029ac60..3c94ffebe 100644
--- a/src/workbench/sidebar/explore/index.tsx
+++ b/src/workbench/sidebar/explore/index.tsx
@@ -1,21 +1,17 @@
 import 'reflect-metadata';
 import { connect } from 'mo/react';
 import { container } from 'tsyringe';
-import { ExplorerService, FolderTreeService } from 'mo/services';
+import { FolderTreeService } from 'mo/services';
 import { Explorer } from './explore';
 import FolderTree from './folderTree';
-import { ExplorerController } from 'mo/controller/explorer/explorer';
 import { FolderTreeController } from 'mo/controller/explorer/folderTree';
 
-const explorerService = container.resolve(ExplorerService);
-const explorerController = container.resolve(ExplorerController);
 const folderTreeService = container.resolve(FolderTreeService);
 const folderTreeController = container.resolve(FolderTreeController);
 
-const ExplorerView = connect(explorerService, Explorer, explorerController);
 const FolderTreeView = connect(
     folderTreeService,
     FolderTree,
     folderTreeController
 );
-export { ExplorerView, Explorer, FolderTreeView, FolderTree };
+export { Explorer, FolderTreeView, FolderTree };
diff --git a/src/workbench/sidebar/search/index.tsx b/src/workbench/sidebar/search/index.tsx
index 65150c8db..32d29ca5c 100644
--- a/src/workbench/sidebar/search/index.tsx
+++ b/src/workbench/sidebar/search/index.tsx
@@ -1,20 +1,2 @@
-import 'reflect-metadata';
-import { connect } from 'mo/react';
 import SearchPanel from './searchPanel';
-import { FolderTreeService, SearchService } from 'mo/services';
-import { container } from 'tsyringe';
-import { SearchController } from 'mo/controller/search/search';
-
-const searchService = container.resolve(SearchService);
-const folderTreeService = container.resolve(FolderTreeService);
-const searchController = container.resolve(SearchController);
-
-const SearchPanelView = connect(
-    {
-        search: searchService,
-        folderTree: folderTreeService,
-    },
-    SearchPanel,
-    searchController
-);
-export { SearchPanelView, SearchPanel };
+export { SearchPanel };