diff --git a/packages/ui-vue/components/section/src/components/toolbar.component.tsx b/packages/ui-vue/components/section/src/components/toolbar.component.tsx
index 2f46d964df533b19e91d3a4b664bbd91739c05a5..5e615e648367b039e099be8ddd5737e1b8982413 100644
--- a/packages/ui-vue/components/section/src/components/toolbar.component.tsx
+++ b/packages/ui-vue/components/section/src/components/toolbar.component.tsx
@@ -7,7 +7,7 @@ export default function (props: SectionProps, context: SetupContext) {
     const items = ref(props.buttons);
     const toolbarAlignment = computed(() => { return props.buttonPosition === 'inHead' ? 'right' : 'left'; });
     const toolbarClass = computed(() => {
-        return 'f-section-toolbar  col-6' + (props.buttonPosition === 'inHead' ? ' f-section-header--toolbar' : ' f-section-content--toolbar')+ (props.buttonsClass?' '+props.buttonsClass:'');
+        return 'f-section-toolbar  col-6' + (props.buttonPosition === 'inHead' ? ' f-toolbar f-section-header--toolbar' : ' f-section-content--toolbar')+ (props.buttonsClass?' '+props.buttonsClass:'');
     });
 
     const shouldShowToobar = computed(() => props.buttons && props.buttons.length > 0 && props.buttonPosition === 'inHead');
diff --git a/packages/ui-vue/components/section/src/designer/section-toolbar.design.component.tsx b/packages/ui-vue/components/section/src/designer/section-toolbar.design.component.tsx
index 87597275aea72ebde4b81af2f041d9100f339b3d..0e010f979fde40193296c787d78d361031da4fa8 100644
--- a/packages/ui-vue/components/section/src/designer/section-toolbar.design.component.tsx
+++ b/packages/ui-vue/components/section/src/designer/section-toolbar.design.component.tsx
@@ -10,7 +10,7 @@ export default function (
     designerItemContext: DesignerItemContext
 ) {
     const toolbarClass = computed(() => {
-        return 'f-section-toolbar col-6' + (props.buttonPosition === 'inHead' ? ' f-section-header--toolbar' : ' f-section-content--toolbar')+ (props.buttonsClass?' '+props.buttonsClass:'');
+        return 'f-section-toolbar col-6' + (props.buttonPosition === 'inHead' ? ' f-toolbar f-section-header--toolbar' : ' f-section-content--toolbar')+ (props.buttonsClass?' '+props.buttonsClass:'');
     });
     const items = ref(props.buttons);
     const toolbarSchema = ref(designerItemContext.schema.toolbar);