diff --git a/Resources/Private/Fusion/Prototypes/DummyImageSource.fusion b/Resources/Private/Fusion/Prototypes/DummyImageSource.fusion
index d8d8d4a..55dd34f 100644
--- a/Resources/Private/Fusion/Prototypes/DummyImageSource.fusion
+++ b/Resources/Private/Fusion/Prototypes/DummyImageSource.fusion
@@ -29,21 +29,21 @@ prototype(Sitegeist.Kaleidoscope:DummyImageSource) {
 //        <table>
 //            <thead>
 //                <th></th>
-//                <Neos.Fusion:Collection collection={props.dimensions} itemName="width" @children="itemRenderer">
+//                <Neos.Fusion:Loop items={props.dimensions} itemName="width" @children="itemRenderer">
 //                    <th>W {width}</th>
-//                </Neos.Fusion:Collection>
+//                </Neos.Fusion:Loop>
 //            </thead>
 //            <tbody>
-//                <Neos.Fusion:Collection collection={props.dimensions} itemName="height" @children="itemRenderer">
+//                <Neos.Fusion:Loop items={props.dimensions} itemName="height" @children="itemRenderer">
 //                    <tr>
 //                        <th>H {height}</th>
-//                        <Neos.Fusion:Collection collection={props.dimensions} itemName="width" @children="itemRenderer">
+//                        <Neos.Fusion:Loop items={props.dimensions} itemName="width" @children="itemRenderer">
 //                            <td>
 //                                <img src={props.imageSource.setWidth(width).setHeight(height)} width={width} height={height} />
 //                            </td>
-//                        </Neos.Fusion:Collection>
+//                        </Neos.Fusion:Loop>
 //                    </tr>
-//                </Neos.Fusion:Collection>
+//                </Neos.Fusion:Loop>
 //            </tbody>
 //        </table>
 //    `
diff --git a/Resources/Private/Fusion/Prototypes/Picture.fusion b/Resources/Private/Fusion/Prototypes/Picture.fusion
index 7bd6b04..e62892e 100644
--- a/Resources/Private/Fusion/Prototypes/Picture.fusion
+++ b/Resources/Private/Fusion/Prototypes/Picture.fusion
@@ -3,12 +3,12 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
     @styleguide {
         props {
             imageSource = Sitegeist.Kaleidoscope:DummyImageSource
-            sources = Neos.Fusion:RawArray {
-                1 = Neos.Fusion:RawArray {
+            sources = Neos.Fusion:DataStructure {
+                1 = Neos.Fusion:DataStructure {
                     srcset = '1x, 1.5x, 2x'
                     media = 'screen and (min-width: 1600px)'
                 }
-                2 = Neos.Fusion:RawArray {
+                2 = Neos.Fusion:DataStructure {
                     imageSource = Sitegeist.Kaleidoscope:DummyImageSource {
                         text = "im am in webp format"
                         format = 'webp'
@@ -18,13 +18,13 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
                     type = 'image/webp'
                     media = 'screen and (max-width: 1599px)'
                 }
-                3 = Neos.Fusion:RawArray {
+                3 = Neos.Fusion:DataStructure {
                     imageSource = Sitegeist.Kaleidoscope:DummyImageSource {
                         text = "im am here for printing"
                     }
                     media = 'print'
                 }
-                4 = Neos.Fusion:RawArray {
+                4 = Neos.Fusion:DataStructure {
                     srcset = '400w, 800w, 1600w'
                     media = 'screen and (min-width: 2600px)'
                     width = 800
@@ -103,7 +103,7 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
         renderer = afx`
             <picture class={props.class} {...props.attributes}>
                 {props.content}
-                <Neos.Fusion:Collection collection={props.sources} itemName="source" @if.has={props.sources}>
+                <Neos.Fusion:Loop items={props.sources} itemName="source" @if.has={props.sources}>
                     <Sitegeist.Kaleidoscope:Source
                         imageSource={source.imageSource ? source.imageSource : props.imageSource}
                         type={source.type}
@@ -115,17 +115,17 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
                         sizes={source.sizes ? source.sizes : props.sizes}
                         renderDimensionAttributes={props.renderDimensionAttributes}
                     />
-                </Neos.Fusion:Collection>
-                <Neos.Fusion:Collection
+                </Neos.Fusion:Loop>
+                <Neos.Fusion:Loop
                     @if.has={props.imageSource && props.formats}
-                    collection={Type.isArray(props.formats) ? props.formats : String.split(props.formats, ',')}
+                    items={Type.isArray(props.formats) ? props.formats : String.split(props.formats, ',')}
                     itemName="format"
                 >
                     <Sitegeist.Kaleidoscope:Source
                         imageSource={props.imageSource}
                         format={String.trim(format)}
                     />
-                </Neos.Fusion:Collection>
+                </Neos.Fusion:Loop>
                 <Sitegeist.Kaleidoscope:Image
                     imageSource={props.imageSource}
                     sizes={props.sizes}