diff --git a/packages/editor-skeleton/src/layouts/top-area.tsx b/packages/editor-skeleton/src/layouts/top-area.tsx
index 2b8535117..94b78654f 100644
--- a/packages/editor-skeleton/src/layouts/top-area.tsx
+++ b/packages/editor-skeleton/src/layouts/top-area.tsx
@@ -4,23 +4,23 @@ import { observer } from '@ali/lowcode-editor-core';
 import Area from '../area';
 
 @observer
-export default class TopArea extends Component<{ area: Area }> {
+export default class TopArea extends Component<{ area: Area, itemClassName?: string }> {
   render() {
-    const { area } = this.props;
+    const { area, itemClassName } = this.props;
     return (
       <div className={classNames("lc-top-area", {
         'lc-area-visible': area.visible
       })}>
-        <Contents area={area} />
+        <Contents area={area} itemClassName={itemClassName} />
       </div>
     );
   }
 }
 
 @observer
-class Contents extends Component<{ area: Area }> {
+class Contents extends Component<{ area: Area, itemClassName?: string }> {
   render() {
-    const { area } = this.props;
+    const { area, itemClassName } = this.props;
     const left: any[] = [];
     const center: any[] = [];
     const right: any[] = [];
@@ -29,12 +29,17 @@ class Contents extends Component<{ area: Area }> {
       const index2 = b.config?.index || 0;
       return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
     }).forEach(item => {
+      const content = (
+        <div className={itemClassName || ''}>
+          {item.content}
+        </div>
+      );
       if (item.align === 'center') {
-        center.push(item.content);
+        center.push(content);
       } else if (item.align === 'left') {
-        left.push(item.content);
+        left.push(content);
       } else {
-        right.push(item.content);
+        right.push(content);
       }
     });
     return (
diff --git a/packages/editor-skeleton/src/layouts/workbench.tsx b/packages/editor-skeleton/src/layouts/workbench.tsx
index af50045c4..06f0b5055 100644
--- a/packages/editor-skeleton/src/layouts/workbench.tsx
+++ b/packages/editor-skeleton/src/layouts/workbench.tsx
@@ -13,16 +13,16 @@ import RightArea from './right-area';
 import './workbench.less';
 
 @observer
-export class Workbench extends Component<{ skeleton: Skeleton, className?: string }> {
+export class Workbench extends Component<{ skeleton: Skeleton, className?: string, topAreaItemClassName?: string }> {
   shouldComponentUpdate() {
     return false;
   }
 
   render() {
-    const { skeleton, className } = this.props;
+    const { skeleton, className, topAreaItemClassName } = this.props;
     return (
       <div className={classNames('lc-workbench', className)}>
-        <TopArea area={skeleton.topArea} />
+        <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
         <div className="lc-workbench-body">
           <LeftArea area={skeleton.leftArea} />
           <LeftFloatPane area={skeleton.leftFloatArea} />
diff --git a/packages/vision-preset/src/index.ts b/packages/vision-preset/src/index.ts
index b3eaa9b01..23dbe607a 100644
--- a/packages/vision-preset/src/index.ts
+++ b/packages/vision-preset/src/index.ts
@@ -44,6 +44,7 @@ function init(container?: Element) {
     createElement(Workbench, {
       skeleton,
       className: 'engine-main',
+      topAreaItemClassName: 'engine-actionitem',
     }),
     container,
   );