diff --git a/packages/core-browser/src/layout/layout.interface.ts b/packages/core-browser/src/layout/layout.interface.ts
index 1f759b4ac1..786e0527f3 100644
--- a/packages/core-browser/src/layout/layout.interface.ts
+++ b/packages/core-browser/src/layout/layout.interface.ts
@@ -32,7 +32,7 @@ export interface SideStateManager {
 export interface View {
   id: string;
   name?: string;
-  description?: string;
+  description?: string | React.ComponentType<any>;
   message?: string;
   weight?: number;
   priority?: number;
diff --git a/packages/main-layout/src/browser/accordion/accordion.service.ts b/packages/main-layout/src/browser/accordion/accordion.service.ts
index 0396fa4c2f..18e834dc1e 100644
--- a/packages/main-layout/src/browser/accordion/accordion.service.ts
+++ b/packages/main-layout/src/browser/accordion/accordion.service.ts
@@ -57,7 +57,7 @@ export interface SectionState {
 interface AccordionViewChangeEvent {
   id: string;
   title?: string;
-  description?: string;
+  description?: string | React.ComponentType<any>;
   message?: string;
   badge?: string | ViewBadge | undefined;
 }
@@ -198,7 +198,7 @@ export class AccordionService extends WithEventBus {
     }
   }
 
-  updateViewDesciption(viewId: string, desc: string) {
+  updateViewDesciption(viewId: string, desc: string | React.ComponentType<any>) {
     const view = this.views.find((view) => view.id === viewId);
     if (view) {
       view.description = desc;
diff --git a/packages/main-layout/src/browser/accordion/section.view.tsx b/packages/main-layout/src/browser/accordion/section.view.tsx
index c50b107d59..77c5719726 100644
--- a/packages/main-layout/src/browser/accordion/section.view.tsx
+++ b/packages/main-layout/src/browser/accordion/section.view.tsx
@@ -26,7 +26,7 @@ export interface CollapsePanelProps extends React.PropsWithChildren<any> {
   // Header Title
   header: string;
   // Header Description
-  description?: string;
+  description?: string | React.ComponentType<any>;
   // Panel Message
   message?: string;
   // Header Size
@@ -185,7 +185,11 @@ export const AccordionSection = ({
             </div>
             {metadata.description && (
               <div className={styles.section_description} style={{ lineHeight: headerSize + 'px' }}>
-                {transformLabelWithCodicon(metadata.description, {}, iconService.fromString.bind(iconService))}
+                {typeof metadata.description === 'string' ? (
+                  transformLabelWithCodicon(metadata.description, {}, iconService.fromString.bind(iconService))
+                ) : (
+                  <metadata.description />
+                )}
               </div>
             )}
             {metadata.badge && (
diff --git a/packages/main-layout/src/browser/tabbar-handler.ts b/packages/main-layout/src/browser/tabbar-handler.ts
index b399f85778..3d55eaac6a 100644
--- a/packages/main-layout/src/browser/tabbar-handler.ts
+++ b/packages/main-layout/src/browser/tabbar-handler.ts
@@ -156,7 +156,7 @@ export class TabBarHandler {
   /**
    * 更新子视图的描述
    */
-  updateViewDescription(viewId: string, desciption: string) {
+  updateViewDescription(viewId: string, desciption: string | React.ComponentType<any>) {
     this.accordionService.updateViewDesciption(viewId, desciption);
   }