diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/Group.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/Group.js
new file mode 100644
index 000000000..e087b2e93
--- /dev/null
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/Group.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { DropTarget } from 'react-dnd'
+
+import classnames from 'classnames'
+
+import Item from './Item'
+
+const groupTarget = {
+ drop: (targetProps, monitor) => {
+ const { column } = monitor.getItem()
+ targetProps.move(
+ column, // id
+ targetProps.groupId // target
+ )
+ },
+}
+
+function collect(connect, monitor) {
+ return {
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver()
+ }
+}
+
+const Group = ({ columns=[], title, connectDropTarget, isOver, children }) =>
+ connectDropTarget(
+
+
+ { title }
+ |
+
+ {
+ children || columns.map((c, i) =>
+
+ )
+ }
+ |
+
+ |
+
+ )
+
+export default DropTarget('item', groupTarget, collect)(Group)
diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/Item.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/Item.js
new file mode 100644
index 000000000..b01b2bd47
--- /dev/null
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/Item.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { DragSource } from 'react-dnd'
+
+const itemSource = {
+ beginDrag: ({ column }) => {
+ return { column }
+ },
+}
+
+function collect(connect, monitor) {
+ return {
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging(),
+ }
+}
+
+const Item = ({ name, connectDragSource, isDragging }) =>
+ connectDragSource(
+
+
+ { name }
+
+
+ )
+
+export default DragSource('item', itemSource, collect)(Item)
diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/index.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/index.js
new file mode 100644
index 000000000..e2fb86c7b
--- /dev/null
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/ShuffleGroups/index.js
@@ -0,0 +1,91 @@
+import React from 'react'
+
+import { useFormikContext } from 'formik'
+import { groupBy } from 'lodash'
+import { Table } from 'reactstrap'
+
+import Group from './Group'
+import Icon from '../../../../../Icon'
+
+export default () => {
+ const { values, setFieldValue } = useFormikContext()
+ const globalShuffle = values.shuffle
+
+ const groups = groupBy(
+ values.templateParameters.columns
+ .filter(c => c.name !== '')
+ .map((c, i) => ({ ...c, id: i })),
+ 'shuffleGroup'
+ )
+ const entries = Object.entries(groups)
+
+ const moveHandler = (key, target) =>
+ setFieldValue(
+ `templateParameters.columns[${ key }]['shuffleGroup']`,
+ target
+ )
+
+ const nextGroup = Math.max(
+ ...Object.keys(groups)
+ .map(Number)
+ .filter(x => !isNaN(x)),
+ 0
+ ) + 1
+
+ return (
+
+
+ {/* Default group */}
+ 0
+ ? undefined
+ :
+ (no columns yet)
+
+ }
+ />
+ {/* Actual shuffled groups */}
+ {
+ entries
+ .filter(([group]) => group !== 'undefined')
+ .map(([group, columns]) =>
+
+ )
+ }
+ {/* Empty group */}
+
+
+
+ Drag columns into rows
+
+
+
+ to create independently shuffled groups
+
+
+
+
+
+ )
+}
diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/index.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/index.js
index 04f7c0e53..68bd8e787 100644
--- a/packages/builder/src/components/ComponentOptions/components/Content/Loop/index.js
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/index.js
@@ -1,16 +1,18 @@
import React from 'react'
import { CardBody } from 'reactstrap'
+import { uniqBy } from 'lodash'
import Card from '../../../../Card'
import Form from '../../Form'
import SampleWidget from './SampleWidget'
+import ShuffleGroups from './ShuffleGroups'
export default ({ id, data }) =>