diff --git a/packages/form-js-editor/src/features/properties-panel/entries/ReadonlyEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/ReadonlyEntry.js
index 65f5bc1f9..d0db73d9a 100644
--- a/packages/form-js-editor/src/features/properties-panel/entries/ReadonlyEntry.js
+++ b/packages/form-js-editor/src/features/properties-panel/entries/ReadonlyEntry.js
@@ -19,7 +19,7 @@ export default function ReadonlyEntry(props) {
 
   const entries = [];
 
-  if (INPUTS.includes(type)) {
+  if (INPUTS.includes(type) || type === 'dynamiclist') {
     entries.push({
       id: 'readonly',
       component: Readonly,
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/RepeatableAppearanceEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/RepeatableAppearanceEntry.js
index a220569f7..8b4ed3c28 100644
--- a/packages/form-js-editor/src/features/properties-panel/entries/RepeatableAppearanceEntry.js
+++ b/packages/form-js-editor/src/features/properties-panel/entries/RepeatableAppearanceEntry.js
@@ -1,4 +1,4 @@
-import { zeroPositiveIntegerEntryFactory } from './factories';
+import { simpleBoolEntryFactory, zeroPositiveIntegerEntryFactory } from './factories';
 
 export default function RepeatableDefaultEntry(props) {
   const {
@@ -14,13 +14,25 @@ export default function RepeatableDefaultEntry(props) {
   }
 
   const entries = [
-    zeroPositiveIntegerEntryFactory({
+    simpleBoolEntryFactory({
+      id: 'disableCollapse',
+      path: [ 'disableCollapse' ],
+      label: 'Disable collapse',
+      props
+    })
+  ];
+
+  if (!field.disableCollapse) {
+    const nonCollapseItemsEntry = zeroPositiveIntegerEntryFactory({
       id: 'nonCollapsedItems',
       path: [ 'nonCollapsedItems' ],
       label: 'Number of non-collapsing items',
       props
-    })
-  ];
+    });
+
+    // @ts-ignore
+    entries.push(nonCollapseItemsEntry);
+  }
 
   return entries;
 }
\ No newline at end of file
diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css
index 237795298..c4e4d2df7 100644
--- a/packages/form-js-viewer/assets/form-js-base.css
+++ b/packages/form-js-viewer/assets/form-js-base.css
@@ -935,45 +935,38 @@
 }
 
 .fjs-container .fjs-repeat-row-container {
-  position: relative;
-}
-
-.fjs-container .fjs-repeat-row-container:focus-within .fjs-repeat-row-delete,
-.fjs-container .fjs-repeat-row-container:hover .fjs-repeat-row-delete-container .fjs-repeat-row-delete,
-.fjs-container .fjs-repeat-row-container .fjs-repeat-row-delete-container:hover .fjs-repeat-row-delete {
-	display: flex;
-}
-
-.fjs-container .fjs-repeat-row-container .fjs-repeat-row-delete-container {
   display: flex;
-	position: absolute;
-  height: 100px;
-  width: 30px;
-  top: calc(50% - 45px);
-	right: -35px;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
 }
 
 .fjs-container .fjs-repeat-row-container .fjs-repeat-row-delete {
-  display: none;
-	font-family: inherit;
-	font-size: inherit;
+	display: flex;
 	cursor: pointer;
-	color: var(--color-accent);
-	background: white;
-	border: 2px solid var(--color-accent);
-  height: 24px;
+	background: transparent;
+	border: none;
+	width: 32px;
+	color: var(--color-black);
+	align-items: center;
+	justify-content: center;
+  margin-left: 1rem;
+  margin-right: -1rem;
+}
+
+.fjs-container .fjs-repeat-row-container:hover .fjs-repeat-render-footer-spacer {
   width: 24px;
-  align-items: center;
-  justify-content: center;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-delete:hover {
+  color: var(--color-warning);
 }
 
 .fjs-container .fjs-repeat-render-footer {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  margin-bottom: 5px;
+  justify-content: space-between;
+  padding: 16px;
 }
 
 .fjs-container .fjs-repeat-render-footer button {
diff --git a/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js b/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
index 8c77931c7..de5535e89 100644
--- a/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
+++ b/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
@@ -4,7 +4,9 @@ import LocalExpressionContext from '../../render/context/LocalExpressionContext'
 
 import ExpandSvg from '../../render/components/form-fields/icons/Expand.svg';
 import CollapseSvg from '../../render/components/form-fields/icons/Collapse.svg';
-import XMarkSvg from '../../render/components/form-fields/icons/XMark.svg';
+import AddSvg from '../../render/components/form-fields/icons/Add.svg';
+import DeleteSvg from '../../render/components/form-fields/icons/Delete.svg';
+
 import { wrapExpressionContext } from '../../util';
 
 export default class RepeatRenderManager {
@@ -85,11 +87,9 @@ export default class RepeatRenderManager {
             <LocalExpressionContext.Provider value={ localExpressionContext }>
               <RowsRenderer { ...elementProps } />
             </LocalExpressionContext.Provider>
-            <div class="fjs-repeat-row-delete-container">
-              <button class="fjs-repeat-row-delete" onClick={ () => onDeleteItem(index) }>
-                <XMarkSvg />
-              </button>
-            </div>
+            <button class="fjs-repeat-row-delete" onClick={ () => onDeleteItem(index) }>
+              <DeleteSvg />
+            </button>
           </div>;
         })}
       </>
@@ -98,17 +98,16 @@ export default class RepeatRenderManager {
 
   RepeatFooter(props) {
 
-    const { useSharedState, indexes } = props;
+    const { useSharedState, indexes, field: repeaterField } = props;
     const [ sharedRepeatState, setSharedRepeatState ] = useSharedState;
 
     const { data } = this._form._state;
 
-    const repeaterField = props.field;
     const dataPath = this._pathRegistry.getValuePath(repeaterField, { indexes });
     const values = get(data, dataPath) || [];
 
     const nonCollapsedItems = this._getNonCollapsedItems(repeaterField);
-    const togglingEnabled = values.length > nonCollapsedItems;
+    const collapseEnabled = !repeaterField.disableCollapse && (values.length > nonCollapsedItems);
     const isCollapsed = sharedRepeatState.isCollapsed;
 
     const toggle = () => {
@@ -129,17 +128,25 @@ export default class RepeatRenderManager {
         value: updatedValues,
         indexes
       });
+
+      setSharedRepeatState(state => ({ ...state, isCollapsed: false }))
     };
 
-    return <div className="fjs-repeat-render-footer">
-      <button onClick={ onAddItem }>add</button>
-      { togglingEnabled ? <button onClick={ toggle }>
-        {
-          isCollapsed
-            ? <><ExpandSvg /> { `Expand all (${values.length})` }</>
-            : <><CollapseSvg /> { 'Collapse' }</>
-        }
-      </button> : null }
+    return <div className="fjs-repeat-render-footer" style={ !repeaterField.readonly ? { marginRight: 32 } : {} }>
+      {
+        !repeaterField.readonly ? <button onClick={ onAddItem }>
+          <><AddSvg /> { 'Add new' }</>
+        </button> : null
+      }
+      {
+        collapseEnabled ? <button onClick={ toggle }>
+          {
+            isCollapsed
+              ? <><ExpandSvg /> { `Expand all (${values.length})` }</>
+              : <><CollapseSvg /> { 'Collapse' }</>
+          }
+        </button> : null
+      }
     </div>;
   }
 
diff --git a/packages/form-js-viewer/src/render/components/form-fields/icons/Add.svg b/packages/form-js-viewer/src/render/components/form-fields/icons/Add.svg
new file mode 100644
index 000000000..e90f87aee
--- /dev/null
+++ b/packages/form-js-viewer/src/render/components/form-fields/icons/Add.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2ZM8 1C4.15 1 1 4.15 1 8C1 11.85 4.15 15 8 15C11.85 15 15 11.85 15 8C15 4.15 11.85 1 8 1Z" fill="currentColor"/>
+  <path d="M12 7.5H8.5V4H7.5V7.5H4V8.5H7.5V12H8.5V8.5H12V7.5Z" fill="currentColor"/>
+</svg>
diff --git a/packages/form-js-viewer/src/render/components/form-fields/icons/Delete.svg b/packages/form-js-viewer/src/render/components/form-fields/icons/Delete.svg
new file mode 100644
index 000000000..b0588cf5f
--- /dev/null
+++ b/packages/form-js-viewer/src/render/components/form-fields/icons/Delete.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 4.7L11.3 4L8 7.3L4.7 4L4 4.7L7.3 8L4 11.3L4.7 12L8 8.7L11.3 12L12 11.3L8.7 8L12 4.7Z" fill="currentColor"/>
+</svg>