diff --git a/shesha-reactjs/src/designer-components/_settings/settingsCollapsiblePanel.tsx b/shesha-reactjs/src/designer-components/_settings/settingsCollapsiblePanel.tsx
index 79638c4e6..2226aadf1 100644
--- a/shesha-reactjs/src/designer-components/_settings/settingsCollapsiblePanel.tsx
+++ b/shesha-reactjs/src/designer-components/_settings/settingsCollapsiblePanel.tsx
@@ -28,7 +28,7 @@ const SettingsCollapsiblePanel: FC<ISettingsCollapsiblePanelProps> = (props) =>
     return (
         <SettingsCollapsiblePanelActionsContext.Provider value={settingsCollapsiblePanelActions}>
             {show
-                ? <CollapsiblePanel ghost={true} expandIconPosition='start' {...props} />
+                ? <CollapsiblePanel ghost={true} expandIconPosition='start' {...props} hasHeaderBorder={false} />
                 : null}
         </SettingsCollapsiblePanelActionsContext.Provider>
     );
diff --git a/shesha-reactjs/src/designer-components/address/settings.tsx b/shesha-reactjs/src/designer-components/address/settings.tsx
index 94ee3295c..aceb1b6aa 100644
--- a/shesha-reactjs/src/designer-components/address/settings.tsx
+++ b/shesha-reactjs/src/designer-components/address/settings.tsx
@@ -36,7 +36,7 @@ const AddressSettings: FC<ISettingsFormFactoryArgs<IAddressCompomentProps>> = ({
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Display">
+      <SettingsCollapsiblePanel header="Display">
         <ContextPropertyAutocomplete
           id="415cc8ec-2fd1-4c5a-88e2-965153e16069"
           readOnly={readOnly}
@@ -77,7 +77,7 @@ const AddressSettings: FC<ISettingsFormFactoryArgs<IAddressCompomentProps>> = ({
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Configuration">
+      <SettingsCollapsiblePanel header="Configuration">
         <SettingsFormItem
           name="minCharactersSearch"
           label="Min Characters Before Search"
@@ -180,7 +180,7 @@ const AddressSettings: FC<ISettingsFormFactoryArgs<IAddressCompomentProps>> = ({
         </Show>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Events">
+      <SettingsCollapsiblePanel header="Events">
         <SettingsFormItem
           label="On Change"
           name="onChangeCustom"
@@ -221,13 +221,13 @@ const AddressSettings: FC<ISettingsFormFactoryArgs<IAddressCompomentProps>> = ({
           />
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Validation">
+      <SettingsCollapsiblePanel header="Validation">
         <SettingsFormItem name="validate.required" label="Required" valuePropName="checked" jsSetting>
           <Checkbox disabled={readOnly} />
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/button/buttonGroup/settings.tsx b/shesha-reactjs/src/designer-components/button/buttonGroup/settings.tsx
index 76dd8e3b2..6082d116b 100644
--- a/shesha-reactjs/src/designer-components/button/buttonGroup/settings.tsx
+++ b/shesha-reactjs/src/designer-components/button/buttonGroup/settings.tsx
@@ -16,7 +16,7 @@ const ButtonGroupSettings: FC<ISettingsFormFactoryArgs<IButtonGroupComponentProp
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='UX'>
+      <SettingsCollapsiblePanel header='UX'>
         <SettingsFormItem name="componentName" label="Component name" required={true}>
           <Input readOnly={readOnly} />
         </SettingsFormItem>
@@ -50,13 +50,13 @@ const ButtonGroupSettings: FC<ISettingsFormFactoryArgs<IButtonGroupComponentProp
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Customization'>
+      <SettingsCollapsiblePanel header='Customization'>
         <SettingsFormItem name="items">
           <ButtonGroupConfigurator readOnly={readOnly} />
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/charts/settings.ts b/shesha-reactjs/src/designer-components/charts/settings.ts
index faf6b0ec1..6d52d89ec 100644
--- a/shesha-reactjs/src/designer-components/charts/settings.ts
+++ b/shesha-reactjs/src/designer-components/charts/settings.ts
@@ -16,7 +16,6 @@ export const settingsForm = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: nanoid(),
       components:
@@ -115,7 +114,6 @@ export const settingsForm = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: nanoid(),
       components:
@@ -305,7 +303,6 @@ export const settingsForm = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     hidden: {
       _code: "return getSettingValue(data?.dataMode) !== `url`",
       _mode: "code",
@@ -368,7 +365,6 @@ export const settingsForm = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     hidden: {
       _code: "return getSettingValue(data?.dataMode) === `url`",
       _mode: "code",
@@ -419,7 +415,7 @@ export const settingsForm = new DesignerToolbarSettings()
             parentId: 'root',
             defaultValue: false,
             validate: { required: true },
-            
+
           })
           .addDropdown({
             id: nanoid(),
diff --git a/shesha-reactjs/src/designer-components/chevron/settings.tsx b/shesha-reactjs/src/designer-components/chevron/settings.tsx
index c9c32bbcb..af38af71f 100644
--- a/shesha-reactjs/src/designer-components/chevron/settings.tsx
+++ b/shesha-reactjs/src/designer-components/chevron/settings.tsx
@@ -21,7 +21,7 @@ const ChevronSettings: FC<ISettingsFormFactoryArgs<IChevronProps>> = () => {
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Display'>
+      <SettingsCollapsiblePanel header='Display'>
         <ContextPropertyAutocomplete id="fb71cb51-884f-4f34-aa77-820c12276c95"
           readOnly={values.readOnly}
           defaultModelType={designerModelType ?? formSettings.modelType}
@@ -54,7 +54,7 @@ const ChevronSettings: FC<ISettingsFormFactoryArgs<IChevronProps>> = () => {
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Items'>
+      <SettingsCollapsiblePanel header='Items'>
         <SettingsFormItem name="referenceList" label="Reference List" style={{ width: '100%' }} tooltip='Make sure to reselect the reference list if any changes are made to its items'>
           <Autocomplete
             dataSourceType="entitiesList"
@@ -68,7 +68,7 @@ const ChevronSettings: FC<ISettingsFormFactoryArgs<IChevronProps>> = () => {
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Styles'>
+      <SettingsCollapsiblePanel header='Styles'>
         <SettingsFormItem name="colorSource" label="Color Source" jsSetting tooltip='Hex and RGB colors are supported'>
           <Select disabled={values.readOnly}>
             <Option value="primary">Primary Color</Option>
diff --git a/shesha-reactjs/src/designer-components/childEntitiesTagGroup/settings.tsx b/shesha-reactjs/src/designer-components/childEntitiesTagGroup/settings.tsx
index 9ec1c9612..81206a093 100644
--- a/shesha-reactjs/src/designer-components/childEntitiesTagGroup/settings.tsx
+++ b/shesha-reactjs/src/designer-components/childEntitiesTagGroup/settings.tsx
@@ -30,7 +30,7 @@ const ChildEntitiesTagGroupSettings: FC<ISettingsFormFactoryArgs<IChildEntitiesT
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Display'  >
+      <SettingsCollapsiblePanel header='Display'  >
         <ContextPropertyAutocomplete id="415cc8ec-2fd1-4c5a-88e2-965153e16069"
           readOnly={readOnly}
           defaultModelType={designerModelType ?? formSettings.modelType}
@@ -58,7 +58,7 @@ const ChildEntitiesTagGroupSettings: FC<ISettingsFormFactoryArgs<IChildEntitiesT
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Modal Display'>
+      <SettingsCollapsiblePanel header='Modal Display'>
         <SettingsFormItem name="deleteConfirmationTitle" label="Delete Confirmation Title" jsSetting>
           <Input readOnly={readOnly} />
         </SettingsFormItem>
@@ -81,7 +81,7 @@ const ChildEntitiesTagGroupSettings: FC<ISettingsFormFactoryArgs<IChildEntitiesT
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Render'>
+      <SettingsCollapsiblePanel header='Render'>
         {/*<SettingsFormItem name="capturedProperties" label="Captured Properties" jsSetting>
           <Select mode="tags" />
   </SettingsFormItem>*/}
@@ -119,7 +119,7 @@ const ChildEntitiesTagGroupSettings: FC<ISettingsFormFactoryArgs<IChildEntitiesT
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx b/shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx
index 16c90a8f1..576904a9e 100644
--- a/shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx
+++ b/shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx
@@ -44,6 +44,7 @@ const CollapsiblePanelComponent: IToolboxComponent<ICollapsiblePanelComponentPro
       isSimpleDesign,
       hideCollapseContent,
       hideWhenEmpty,
+      hasHeaderBorder = true
     } = model;
 
     const panelContextState = useContext(PanelContext);
@@ -97,6 +98,7 @@ const CollapsiblePanelComponent: IToolboxComponent<ICollapsiblePanelComponentPro
             headerColor={headerColor}
             isSimpleDesign={isSimpleDesign}
             parentPanel={panelPosition === 'parent'}
+            hasHeaderBorder={hasHeaderBorder}
             hideCollapseContent={hideCollapseContent}
             hideWhenEmpty={hideWhenEmpty}
           >
diff --git a/shesha-reactjs/src/designer-components/colorPicker/settings.ts b/shesha-reactjs/src/designer-components/colorPicker/settings.ts
index 384e0d7e3..4639871f4 100644
--- a/shesha-reactjs/src/designer-components/colorPicker/settings.ts
+++ b/shesha-reactjs/src/designer-components/colorPicker/settings.ts
@@ -10,7 +10,6 @@ export const iconPickerFormSettings = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl54bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -103,7 +102,6 @@ export const iconPickerFormSettings = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl24bf6-f76d-4139-a850-c99bf06c8b71',
       components: [...new DesignerToolbarSettings()
diff --git a/shesha-reactjs/src/designer-components/columns/columnsSettings.tsx b/shesha-reactjs/src/designer-components/columns/columnsSettings.tsx
index 206f5291d..25ea98c16 100644
--- a/shesha-reactjs/src/designer-components/columns/columnsSettings.tsx
+++ b/shesha-reactjs/src/designer-components/columns/columnsSettings.tsx
@@ -54,7 +54,7 @@ const ColumnsSettings: FC<ISettingsFormFactoryArgs<IColumnsComponentProps>> = (p
         <StyleBox />
       </SettingsFormItem>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/dataContextComponent/settings.tsx b/shesha-reactjs/src/designer-components/dataContextComponent/settings.tsx
index 588f8dbd5..f80785b1e 100644
--- a/shesha-reactjs/src/designer-components/dataContextComponent/settings.tsx
+++ b/shesha-reactjs/src/designer-components/dataContextComponent/settings.tsx
@@ -52,7 +52,7 @@ const DataContextSettings: FC<ISettingsFormFactoryArgs<IDataContextComponentProp
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Data context">
+      <SettingsCollapsiblePanel header="Data context">
         <SettingsFormItem
           name='componentName'
           label="Component name"
@@ -150,7 +150,7 @@ const DataContextSettings: FC<ISettingsFormFactoryArgs<IDataContextComponentProp
 
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/dataList/dataListSettings.tsx b/shesha-reactjs/src/designer-components/dataList/dataListSettings.tsx
index 9bd33e588..aca71767a 100644
--- a/shesha-reactjs/src/designer-components/dataList/dataListSettings.tsx
+++ b/shesha-reactjs/src/designer-components/dataList/dataListSettings.tsx
@@ -234,7 +234,7 @@ const DataListSettings: FC<ISettingsFormFactoryArgs<IDataListComponentProps>> =
         </Select>
       </SettingsFormItem>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Render">
+      <SettingsCollapsiblePanel header="Render">
         <SettingsFormItem name="formSelectionMode" label="Form selection mode">
           <Select disabled={readOnly} defaultValue={'none'}>
             <Select.Option key='name' value='name'>Named form</Select.Option>
@@ -355,7 +355,7 @@ const DataListSettings: FC<ISettingsFormFactoryArgs<IDataListComponentProps>> =
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="CRUD">
+      <SettingsCollapsiblePanel header="CRUD">
         <SettingsFormItem name="canEditInline" label="Can edit inline" jsSetting>
           <Select disabled={readOnly} options={yesNoInheritOptions} />
         </SettingsFormItem>
@@ -487,7 +487,7 @@ const DataListSettings: FC<ISettingsFormFactoryArgs<IDataListComponentProps>> =
       </SettingsCollapsiblePanel>
 
       <Show when={model.orientation === "vertical" || model.orientation === "horizontal"}>
-        <SettingsCollapsiblePanel hasHeaderBorder={false} header="Grouping">
+        <SettingsCollapsiblePanel header="Grouping">
           <SettingsFormItem name="collapsible" label="Collapsible" valuePropName='checked' jsSetting>
             <Checkbox disabled={readOnly} />
           </SettingsFormItem>
@@ -515,7 +515,7 @@ const DataListSettings: FC<ISettingsFormFactoryArgs<IDataListComponentProps>> =
         </SettingsCollapsiblePanel>
       </Show>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Empty List'>
+      <SettingsCollapsiblePanel header='Empty List'>
         <SettingsFormItem name="noDataText" label="Primary Text" jsSetting>
           <Input defaultValue={"No Data"} readOnly={readOnly} />
         </SettingsFormItem>
@@ -531,7 +531,7 @@ const DataListSettings: FC<ISettingsFormFactoryArgs<IDataListComponentProps>> =
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/dataSource/dataSourceSettings.tsx b/shesha-reactjs/src/designer-components/dataSource/dataSourceSettings.tsx
index e38b1ebd4..0602dac6d 100644
--- a/shesha-reactjs/src/designer-components/dataSource/dataSourceSettings.tsx
+++ b/shesha-reactjs/src/designer-components/dataSource/dataSourceSettings.tsx
@@ -43,7 +43,7 @@ const DataSourceSettings: FC<ISettingsFormFactoryArgs<IDataSourceComponentProps>
           <EndpointsAutocomplete />
         </SettingsFormItem>
       }
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Filters'>
+      <SettingsCollapsiblePanel header='Filters'>
         <SettingsFormItem name="maxResultCount" label='Max result count' tooltip='Leave empty to get all records' jsSetting>
           <InputNumber min={0} />
         </SettingsFormItem>
@@ -53,7 +53,7 @@ const DataSourceSettings: FC<ISettingsFormFactoryArgs<IDataSourceComponentProps>
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/tableComponent-settings.tsx b/shesha-reactjs/src/designer-components/dataTable/table/tableComponent-settings.tsx
index c4372c983..a6a77c34c 100644
--- a/shesha-reactjs/src/designer-components/dataTable/table/tableComponent-settings.tsx
+++ b/shesha-reactjs/src/designer-components/dataTable/table/tableComponent-settings.tsx
@@ -216,7 +216,7 @@ const TableSettings: FC<ISettingsFormFactoryArgs<ITableComponentProps>> = (props
       </SettingsFormItem>
 
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='CRUD'>
+      <SettingsCollapsiblePanel header='CRUD'>
         <SettingsFormItem
           name="canEditInline"
           label="Can edit inline"
@@ -349,7 +349,7 @@ const TableSettings: FC<ISettingsFormFactoryArgs<ITableComponentProps>> = (props
         </SettingsFormItem>
 
       </SettingsCollapsiblePanel>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Layout">
+      <SettingsCollapsiblePanel header="Layout">
         <SettingsFormItem jsSetting
           name="minHeight" label="Min Height" tooltip="The minimum height of the table (e.g. even when 0 rows). If blank then minimum height is 0.">
           <InputNumber />
@@ -393,7 +393,7 @@ const TableSettings: FC<ISettingsFormFactoryArgs<ITableComponentProps>> = (props
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Empty Table'>
+      <SettingsCollapsiblePanel header='Empty Table'>
         <SettingsFormItem name="noDataText" label="Primary Text" jsSetting>
           <Input defaultValue={"No Data"} readOnly={readOnly} />
         </SettingsFormItem>
@@ -409,7 +409,7 @@ const TableSettings: FC<ISettingsFormFactoryArgs<ITableComponentProps>> = (props
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
index a9340fba6..447fcddf1 100644
--- a/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
+++ b/shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts
@@ -12,7 +12,6 @@ export const entityPickerSettings = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl54bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -234,7 +233,6 @@ export const entityPickerSettings = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl24bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -402,7 +400,6 @@ export const entityPickerSettings = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl34bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -424,7 +421,6 @@ export const entityPickerSettings = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl44bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -483,7 +479,6 @@ export const entityPickerSettings = new DesignerToolbarSettings()
     ghost: true,
     version: 4,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: '44bf6-f76d-4139-a853-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -527,7 +522,6 @@ export const entityPickerSettings = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl24bf6-f76d-4139-a850-c99bf06c8b71',
       components: [...new DesignerToolbarSettings()
diff --git a/shesha-reactjs/src/designer-components/entityReference/settings.tsx b/shesha-reactjs/src/designer-components/entityReference/settings.tsx
index 09402c0c9..87d47b4a4 100644
--- a/shesha-reactjs/src/designer-components/entityReference/settings.tsx
+++ b/shesha-reactjs/src/designer-components/entityReference/settings.tsx
@@ -38,7 +38,7 @@ const EntityReferenceSettings: FC<ISettingsFormFactoryArgs<IEntityReferenceContr
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Display'>
+      <SettingsCollapsiblePanel header='Display'>
         <ContextPropertyAutocomplete id="fb71cb51-884f-4f34-aa77-820c12276c95"
           readOnly={readOnly}
           defaultModelType={designerModelType ?? formSettings.modelType}
@@ -62,7 +62,7 @@ const EntityReferenceSettings: FC<ISettingsFormFactoryArgs<IEntityReferenceContr
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Entity reference configuration'>
+      <SettingsCollapsiblePanel header='Entity reference configuration'>
         <SettingsFormItem name="placeholder" label="Placeholder" jsSetting>
           <Input readOnly={readOnly} />
         </SettingsFormItem>
@@ -128,7 +128,7 @@ const EntityReferenceSettings: FC<ISettingsFormFactoryArgs<IEntityReferenceContr
       </SettingsCollapsiblePanel>
 
       <Show when={values?.entityReferenceType === 'Quickview'}>
-        <SettingsCollapsiblePanel hasHeaderBorder={false} header='Quickview settings'>
+        <SettingsCollapsiblePanel header='Quickview settings'>
           <SettingsFormItem name="quickviewWidth" label="Quickview width" jsSetting>
             <InputNumber min={0} defaultValue={600} step={1} readOnly={readOnly} />
           </SettingsFormItem>
@@ -136,7 +136,7 @@ const EntityReferenceSettings: FC<ISettingsFormFactoryArgs<IEntityReferenceContr
       </Show>
 
       <Show when={values?.entityReferenceType === 'Dialog'}>
-        <SettingsCollapsiblePanel hasHeaderBorder={false} header='Dialog settings'>
+        <SettingsCollapsiblePanel header='Dialog settings'>
           <SettingsFormItem name="modalTitle" label="Title" jsSetting>
             <Input readOnly={readOnly} />
           </SettingsFormItem>
@@ -232,7 +232,7 @@ const EntityReferenceSettings: FC<ISettingsFormFactoryArgs<IEntityReferenceContr
         </SettingsCollapsiblePanel>
       </Show>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Layout'>
+      <SettingsCollapsiblePanel header='Layout'>
         <SettingsFormItem name="labelCol" label="Label Col" jsSetting>
           <InputNumber min={0} max={24} defaultValue={8} step={1} readOnly={readOnly} />
         </SettingsFormItem>
@@ -260,7 +260,7 @@ const EntityReferenceSettings: FC<ISettingsFormFactoryArgs<IEntityReferenceContr
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Visibility'>
+      <SettingsCollapsiblePanel header='Visibility'>
         <SettingsFormItem name="hidden" label="Hidden" valuePropName="checked" jsSetting>
           <Checkbox disabled={readOnly} />
         </SettingsFormItem>
@@ -270,7 +270,7 @@ const EntityReferenceSettings: FC<ISettingsFormFactoryArgs<IEntityReferenceContr
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/iconPicker/settings.ts b/shesha-reactjs/src/designer-components/iconPicker/settings.ts
index d80ab54a7..3f197d7fb 100644
--- a/shesha-reactjs/src/designer-components/iconPicker/settings.ts
+++ b/shesha-reactjs/src/designer-components/iconPicker/settings.ts
@@ -11,7 +11,6 @@ export const iconPickerFormSettings = new DesignerToolbarSettings()
     expandIconPosition: 'start',
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl64664-cbc9-4cef-babc-6fbea44cd0ca',
       components: [
@@ -94,7 +93,6 @@ export const iconPickerFormSettings = new DesignerToolbarSettings()
     expandIconPosition: 'start',
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl64664-cbc9-4cdf-babc-6fbea44cd0ca',
       components: [
@@ -130,7 +128,6 @@ export const iconPickerFormSettings = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl24bf6-f76d-4139-a850-cbf06c8b71',
       components: [...new DesignerToolbarSettings()
@@ -201,7 +198,6 @@ export const iconPickerFormSettings = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl24bf6-f76d-4139-a850-c99bf06c8b71',
       components: [...new DesignerToolbarSettings()
diff --git a/shesha-reactjs/src/designer-components/kanban/settings.tsx b/shesha-reactjs/src/designer-components/kanban/settings.tsx
index c34ded34c..5a4699ee4 100644
--- a/shesha-reactjs/src/designer-components/kanban/settings.tsx
+++ b/shesha-reactjs/src/designer-components/kanban/settings.tsx
@@ -25,7 +25,7 @@ const KanbanSettings: FC<ISettingsFormFactoryArgs<IKanbanProps>> = (props) => {
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Display">
+      <SettingsCollapsiblePanel header="Display">
         <SettingsFormItem key="entityType" name="entityType" label="Entity Type" jsSetting>
           <Autocomplete dataSourceType="url" dataSourceUrl="/api/services/app/Metadata/EntityTypeAutocomplete" />
         </SettingsFormItem>
@@ -44,7 +44,7 @@ const KanbanSettings: FC<ISettingsFormFactoryArgs<IKanbanProps>> = (props) => {
       <SettingsFormItem name="maxResultCount" label="Max Result Count" jsSetting>
         <Input type="number" disabled={readOnly} />
       </SettingsFormItem>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Columns">
+      <SettingsCollapsiblePanel header="Columns">
         <SettingsFormItem name="referenceList" label="Reference List" style={{ width: '100%' }} tooltip='Make sure to reselect the reference list if any changes are made to its items'>
           <Autocomplete
             dataSourceType="entitiesList"
@@ -96,7 +96,7 @@ const KanbanSettings: FC<ISettingsFormFactoryArgs<IKanbanProps>> = (props) => {
         <Checkbox disabled={values.readOnly} />
       </SettingsFormItem>
       {/* Column Styles */}
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Column Styles">
+      <SettingsCollapsiblePanel header="Column Styles">
         <SettingsFormItem name="columnStyle" label="Style">
           <CodeEditor
             readOnly={readOnly}
@@ -143,7 +143,7 @@ const KanbanSettings: FC<ISettingsFormFactoryArgs<IKanbanProps>> = (props) => {
       </SettingsCollapsiblePanel>
 
       {/* Header Styles */}
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Header Styles">
+      <SettingsCollapsiblePanel header="Header Styles">
         <SettingsFormItem name="headerStyles" label="Style">
           <CodeEditor
             readOnly={readOnly}
diff --git a/shesha-reactjs/src/designer-components/keyInformationBar/settings.tsx b/shesha-reactjs/src/designer-components/keyInformationBar/settings.tsx
index 9a33c1bad..50e8fb583 100644
--- a/shesha-reactjs/src/designer-components/keyInformationBar/settings.tsx
+++ b/shesha-reactjs/src/designer-components/keyInformationBar/settings.tsx
@@ -101,7 +101,7 @@ const KeyInformationBarSettings: FC<ISettingsFormFactoryArgs<IKeyInformationBarP
                 <StyleBox />
             </SettingsFormItem>
 
-            <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+            <SettingsCollapsiblePanel header="Security">
                 <SettingsFormItem
                     jsSetting
                     label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/progress/settings.ts b/shesha-reactjs/src/designer-components/progress/settings.ts
index 9b01b4b27..babdb8e49 100644
--- a/shesha-reactjs/src/designer-components/progress/settings.ts
+++ b/shesha-reactjs/src/designer-components/progress/settings.ts
@@ -252,7 +252,6 @@ export const progressSettingsForm = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl24bf6-f76d-4139-a850-c99bf06c8b71',
       components: [...new DesignerToolbarSettings()
diff --git a/shesha-reactjs/src/designer-components/sizableColumns/sizableColumnsSettings.tsx b/shesha-reactjs/src/designer-components/sizableColumns/sizableColumnsSettings.tsx
index 2918462d3..e76ce7cbe 100644
--- a/shesha-reactjs/src/designer-components/sizableColumns/sizableColumnsSettings.tsx
+++ b/shesha-reactjs/src/designer-components/sizableColumns/sizableColumnsSettings.tsx
@@ -27,7 +27,7 @@ const SizableColumnsSettings = (props: ISettingsFormFactoryArgs<ISizableColumnCo
       <SettingsFormItem label="Columns" name="columns">
         <SizableColumnsList readOnly={readOnly} />
       </SettingsFormItem>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Style">
+      <SettingsCollapsiblePanel header="Style">
         <SettingsFormItem name="style" label="Style">
           <CodeEditor
             propertyName="style"
@@ -44,7 +44,7 @@ const SizableColumnsSettings = (props: ISettingsFormFactoryArgs<ISizableColumnCo
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/slider/settings.ts b/shesha-reactjs/src/designer-components/slider/settings.ts
index f9343cf4a..fe919ff22 100644
--- a/shesha-reactjs/src/designer-components/slider/settings.ts
+++ b/shesha-reactjs/src/designer-components/slider/settings.ts
@@ -11,7 +11,6 @@ export const settingsFormMarkup = new DesignerToolbarSettings()
     expandIconPosition: 'start',
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: nanoid(),
       components: [
@@ -55,7 +54,6 @@ export const settingsFormMarkup = new DesignerToolbarSettings()
     expandIconPosition: 'start',
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: nanoid(),
       components: [
@@ -88,7 +86,6 @@ export const settingsFormMarkup = new DesignerToolbarSettings()
     expandIconPosition: 'start',
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: nanoid(),
       components: [
diff --git a/shesha-reactjs/src/designer-components/subForm/settings.tsx b/shesha-reactjs/src/designer-components/subForm/settings.tsx
index 79df4f1fb..a68117261 100644
--- a/shesha-reactjs/src/designer-components/subForm/settings.tsx
+++ b/shesha-reactjs/src/designer-components/subForm/settings.tsx
@@ -78,7 +78,7 @@ const SubFormSettings: FC<ISettingsFormFactoryArgs<ISubFormComponentProps>> = (p
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Display'>
+      <SettingsCollapsiblePanel header='Display'>
         <ContextPropertyAutocomplete id="fb71cb51-884f-4f34-aa77-820c12276c95"
           readOnly={readOnly}
           defaultModelType={designerModelType ?? formSettings.modelType}
@@ -142,7 +142,7 @@ const SubFormSettings: FC<ISettingsFormFactoryArgs<ISubFormComponentProps>> = (p
           </SettingsFormItem>
         )}
       </SettingsCollapsiblePanel>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Data source'>
+      <SettingsCollapsiblePanel header='Data source'>
         <SettingsFormItem
           name="dataSource"
           initialValue={'form'}
@@ -383,7 +383,7 @@ const SubFormSettings: FC<ISettingsFormFactoryArgs<ISubFormComponentProps>> = (p
           </SettingsFormItem>
         </Show>
       </SettingsCollapsiblePanel>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Actions">
+      <SettingsCollapsiblePanel header="Actions">
         <SettingsFormItem
           label="On Created"
           name="onCreated"
@@ -486,7 +486,7 @@ const SubFormSettings: FC<ISettingsFormFactoryArgs<ISubFormComponentProps>> = (p
           />
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Layout">
+      <SettingsCollapsiblePanel header="Layout">
 
         <SettingsFormItem name="labelCol" label="Label Col" jsSetting>
           <InputNumber min={0} max={24} defaultValue={8} step={1} readOnly={readOnly} />
@@ -520,7 +520,7 @@ const SubFormSettings: FC<ISettingsFormFactoryArgs<ISubFormComponentProps>> = (p
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/tabs/settings.tsx b/shesha-reactjs/src/designer-components/tabs/settings.tsx
index d7ea2a17c..ac14fe3f5 100644
--- a/shesha-reactjs/src/designer-components/tabs/settings.tsx
+++ b/shesha-reactjs/src/designer-components/tabs/settings.tsx
@@ -40,7 +40,7 @@ const TabSettings: FC<ISettingsFormFactoryArgs<ITabsComponentProps>> = (props) =
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header='Display'>
+      <SettingsCollapsiblePanel header='Display'>
         <SettingsFormItem name="componentName" label="Component name" required={true}>
           <Input />
         </SettingsFormItem>
@@ -77,7 +77,7 @@ const TabSettings: FC<ISettingsFormFactoryArgs<ITabsComponentProps>> = (props) =
           <Checkbox disabled={readOnly} />
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Configure Tab Panes">
+      <SettingsCollapsiblePanel header="Configure Tab Panes">
         <SettingsFormItem name="tabs">
           <ItemListConfiguratorModal<ITabPaneProps>
             readOnly={readOnly}
@@ -99,7 +99,7 @@ const TabSettings: FC<ISettingsFormFactoryArgs<ITabsComponentProps>> = (props) =
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Style" >
+      <SettingsCollapsiblePanel header="Style" >
         <SettingsFormItem
           label="Style"
           name="style"
@@ -133,7 +133,7 @@ const TabSettings: FC<ISettingsFormFactoryArgs<ITabsComponentProps>> = (props) =
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/designer-components/text/settings.ts b/shesha-reactjs/src/designer-components/text/settings.ts
index dd810b3d2..2759ab1f3 100644
--- a/shesha-reactjs/src/designer-components/text/settings.ts
+++ b/shesha-reactjs/src/designer-components/text/settings.ts
@@ -20,7 +20,6 @@ export const settingsFormMarkup = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl54bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -132,7 +131,6 @@ export const settingsFormMarkup = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: '2pnl54bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -218,7 +216,6 @@ export const settingsFormMarkup = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: '3pnl54bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -303,7 +300,6 @@ export const settingsFormMarkup = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: '4pnl54bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -428,7 +424,6 @@ export const settingsFormMarkup = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: '5pnl54bf6-f76d-4139-a850-c99bf06c8b69',
       components: [...new DesignerToolbarSettings()
@@ -458,7 +453,6 @@ export const settingsFormMarkup = new DesignerToolbarSettings()
     expandIconPosition: "start",
     ghost: true,
     collapsible: 'header',
-    hasHeaderBorder: false,
     content: {
       id: 'pnl24bf6-f76d-4139-a850-c99bf06c8b71',
       components: [...new DesignerToolbarSettings()
diff --git a/shesha-reactjs/src/designer-components/wizard/settings.tsx b/shesha-reactjs/src/designer-components/wizard/settings.tsx
index f3e59a310..4ad079959 100644
--- a/shesha-reactjs/src/designer-components/wizard/settings.tsx
+++ b/shesha-reactjs/src/designer-components/wizard/settings.tsx
@@ -81,7 +81,7 @@ const WizardSettings: FC<ISettingsFormFactoryArgs<IWizardComponentProps>> = (pro
 
   return (
     <>
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Display">
+      <SettingsCollapsiblePanel header="Display">
         <SettingsFormItem name="componentName" label="Component name" required={true}>
           <Input disabled={readOnly} />
         </SettingsFormItem>
@@ -157,7 +157,7 @@ const WizardSettings: FC<ISettingsFormFactoryArgs<IWizardComponentProps>> = (pro
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Configure Wizard Steps">
+      <SettingsCollapsiblePanel header="Configure Wizard Steps">
         <SettingsFormItem name="steps" initialValue={steps}>
           <ItemListConfiguratorModal<IWizardStepProps>
             readOnly={readOnly}
@@ -190,7 +190,7 @@ const WizardSettings: FC<ISettingsFormFactoryArgs<IWizardComponentProps>> = (pro
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Style">
+      <SettingsCollapsiblePanel header="Style">
         <SettingsFormItem
           label="Style"
           name="style"
@@ -229,7 +229,7 @@ const WizardSettings: FC<ISettingsFormFactoryArgs<IWizardComponentProps>> = (pro
         </SettingsFormItem>
       </SettingsCollapsiblePanel>
 
-      <SettingsCollapsiblePanel hasHeaderBorder={false} header="Security">
+      <SettingsCollapsiblePanel header="Security">
         <SettingsFormItem
           jsSetting
           label="Permissions"
diff --git a/shesha-reactjs/src/interfaces/toolbarSettings.ts b/shesha-reactjs/src/interfaces/toolbarSettings.ts
index b118f6da4..7b06f6be3 100644
--- a/shesha-reactjs/src/interfaces/toolbarSettings.ts
+++ b/shesha-reactjs/src/interfaces/toolbarSettings.ts
@@ -31,6 +31,7 @@ import { IPermissionAutocompleteComponentProps } from '@/designer-components/per
 import { ISliderComponentProps } from '@/designer-components/slider/interfaces';
 import { IDividerProps } from '@/designer-components/_legacyComponents/divider';
 import { IPropertyRouterProps } from '@/designer-components/propertyRouter/interfaces';
+import { nanoid } from 'nanoid';
 
 interface ToolbarSettingsProp extends Omit<IConfigurableFormComponent, 'hidden' | 'type'> {
   hidden?: boolean | IPropertySetting;
@@ -123,7 +124,12 @@ export class DesignerToolbarSettings<T> {
   public addCollapsiblePanel(
     props: ICollapsiblePanelPropsEditorType | ((data: T) => ICollapsiblePanelPropsEditorType)
   ) {
-    return this.addProperty(props, 'collapsiblePanel');
+    const collapsibleProps: typeof props = {
+      ...props,
+      id: nanoid(),
+      hasHeaderBorder: false,
+    };
+    return this.addProperty(collapsibleProps, 'collapsiblePanel');
   }
 
   public addDropdown(props: DropdownType | ((data: T) => DropdownType)) {