diff --git a/src/Resources/config/richeditor.yaml b/src/Resources/config/richeditor.yaml
index f18bb437..a068642f 100644
--- a/src/Resources/config/richeditor.yaml
+++ b/src/Resources/config/richeditor.yaml
@@ -160,6 +160,7 @@ monsieurbiz_sylius_richeditor:
             title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.title'
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.description'
             icon: columns
+            wireframe: column
             tags: [ default, layout ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ColumnType
@@ -170,7 +171,8 @@ monsieurbiz_sylius_richeditor:
             alias: row
             title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.title'
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.description'
-            icon: columns
+            icon: bars
+            wireframe: row
             tags: [ default, layout ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\RowType
diff --git a/src/Resources/translations/messages.en.yml b/src/Resources/translations/messages.en.yml
index 4c90c0e3..d4127573 100644
--- a/src/Resources/translations/messages.en.yml
+++ b/src/Resources/translations/messages.en.yml
@@ -2,12 +2,12 @@ monsieurbiz_richeditor_plugin:
   ui_element:
     monsieurbiz.column:
       title: 'Column Layout Element'
-      description: 'A layout to display elements as a column'
+      description: 'A layout to display elements column by column'
       field:
         content: 'Content'
     monsieurbiz.row:
       title: 'Row Layout Element'
-      description: 'A layout to display elements as a row'
+      description: 'A layout to display elements row by row'
       field:
         content: 'Content'
     monsieurbiz.html:
diff --git a/src/Resources/translations/messages.fr.yml b/src/Resources/translations/messages.fr.yml
index 6bcdd831..1984d06d 100644
--- a/src/Resources/translations/messages.fr.yml
+++ b/src/Resources/translations/messages.fr.yml
@@ -2,12 +2,12 @@ monsieurbiz_richeditor_plugin:
   ui_element:
     monsieurbiz.column:
       title: 'Lame Colonne'
-      description: 'Une lame contenant d''autres lames affichées en colonne'
+      description: 'Une mise en page pour afficher les éléments colonne par colonne'
       field:
         content: 'Contenu'
     monsieurbiz.row:
       title: 'Lame Ligne'
-      description: 'Une lame contenant d''autres lames affichées côte à côte'
+      description: 'Une mise en page pour afficher les éléments ligne par ligne'
       field:
         content: 'Contenu'
     monsieurbiz.html:
diff --git a/src/Resources/translations/messages.hr.yml b/src/Resources/translations/messages.hr.yml
index 654b1b43..86f01ca5 100644
--- a/src/Resources/translations/messages.hr.yml
+++ b/src/Resources/translations/messages.hr.yml
@@ -1,13 +1,13 @@
 monsieurbiz_richeditor_plugin:
   ui_element:
     monsieurbiz.column:
-      title: 'Kolona'
-      description: 'Element koji sadrži druge elemente unutra'
+      title: 'Stupac'
+      description: 'Raspored za prikaz elemenata stupac po stupac'
       field:
         content: 'Sadržaj'
     monsieurbiz.row:
       title: 'Red'
-      description: 'Element koji sadrži druge elemente unutra'
+      description: 'Raspored za prikaz elemenata red po red'
       field:
         content: 'Sadržaj'
     monsieurbiz.html:
diff --git a/src/Resources/translations/messages.nl.yml b/src/Resources/translations/messages.nl.yml
index 5279b383..339f8d1e 100644
--- a/src/Resources/translations/messages.nl.yml
+++ b/src/Resources/translations/messages.nl.yml
@@ -2,12 +2,12 @@ monsieurbiz_richeditor_plugin:
   ui_element:
     monsieurbiz.column:
       title: 'Kolom'
-      description: 'Een element met een lijst met elementen erin'
+      description: 'Een lay-out om elementen kolom per kolom weer te geven'
       field:
         content: 'Inhoud'
     monsieurbiz.row:
       title: 'Rij'
-      description: 'Een element met een lijst met elementen erin'
+      description: 'Een lay-out om elementen rij per rij weer te geven'
       field:
         content: 'Inhoud'
     monsieurbiz.html:
diff --git a/src/Resources/views/Wireframe/column.svg.twig b/src/Resources/views/Wireframe/column.svg.twig
new file mode 100644
index 00000000..cc49a508
--- /dev/null
+++ b/src/Resources/views/Wireframe/column.svg.twig
@@ -0,0 +1,20 @@
+<svg width="230" height="100" viewBox="0 0 230 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="230" height="100" rx="5" fill="#7A8CCE" fill-opacity="0.1"/>
+<mask id="mask0_13_490" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="3" width="209" height="97">
+<rect x="10" y="3" width="209" height="97" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_13_490)">
+<rect x="19.5" y="16.5" width="56.3443" height="93" fill="white"/>
+<rect x="19.5" y="16.5" width="56.3443" height="93" stroke="#7A8CCE" stroke-dasharray="2 2"/>
+<rect x="19.5" y="16.5" width="56.3443" height="93" stroke="#7A8CCE" stroke-opacity="0.2" stroke-dasharray="2 2"/>
+<rect x="19.5" y="16.5" width="56.3443" height="93" stroke="#7A8CCE" stroke-opacity="0.5" stroke-dasharray="2 2"/>
+<rect x="89.5" y="16.5" width="56.3443" height="93" fill="white"/>
+<rect x="89.5" y="16.5" width="56.3443" height="93" stroke="#7A8CCE" stroke-dasharray="2 2"/>
+<rect x="89.5" y="16.5" width="56.3443" height="93" stroke="#7A8CCE" stroke-opacity="0.2" stroke-dasharray="2 2"/>
+<rect x="89.5" y="16.5" width="56.3443" height="93" stroke="#7A8CCE" stroke-opacity="0.5" stroke-dasharray="2 2"/>
+<rect x="159.5" y="17.5" width="56.3443" height="93" fill="white"/>
+<rect x="159.5" y="17.5" width="56.3443" height="93" stroke="#7A8CCE" stroke-dasharray="2 2"/>
+<rect x="159.5" y="17.5" width="56.3443" height="93" stroke="#7A8CCE" stroke-opacity="0.2" stroke-dasharray="2 2"/>
+<rect x="159.5" y="17.5" width="56.3443" height="93" stroke="#7A8CCE" stroke-opacity="0.5" stroke-dasharray="2 2"/>
+</g>
+</svg>
diff --git a/src/Resources/views/Wireframe/row.svg.twig b/src/Resources/views/Wireframe/row.svg.twig
new file mode 100644
index 00000000..64db725e
--- /dev/null
+++ b/src/Resources/views/Wireframe/row.svg.twig
@@ -0,0 +1,20 @@
+<svg width="230" height="100" viewBox="0 0 230 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="230" height="100" rx="5" fill="#7A8CCE" fill-opacity="0.1"/>
+<mask id="mask0_13_489" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="10" width="217" height="90">
+<rect x="6" y="10" width="217" height="90" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_13_489)">
+<rect x="13.5" y="49.0714" width="200" height="22.7363" fill="white"/>
+<rect x="13.5" y="49.0714" width="200" height="22.7363" stroke="#7A8CCE" stroke-dasharray="2 2"/>
+<rect x="13.5" y="49.0714" width="200" height="22.7363" stroke="#7A8CCE" stroke-opacity="0.2" stroke-dasharray="2 2"/>
+<rect x="13.5" y="49.0714" width="200" height="22.7363" stroke="#7A8CCE" stroke-opacity="0.5" stroke-dasharray="2 2"/>
+<rect x="13.5" y="17.5" width="200" height="22.7363" fill="white"/>
+<rect x="13.5" y="17.5" width="200" height="22.7363" stroke="#7A8CCE" stroke-dasharray="2 2"/>
+<rect x="13.5" y="17.5" width="200" height="22.7363" stroke="#7A8CCE" stroke-opacity="0.2" stroke-dasharray="2 2"/>
+<rect x="13.5" y="17.5" width="200" height="22.7363" stroke="#7A8CCE" stroke-opacity="0.5" stroke-dasharray="2 2"/>
+<rect x="13.5" y="80.7198" width="200" height="22.7363" fill="white"/>
+<rect x="13.5" y="80.7198" width="200" height="22.7363" stroke="#7A8CCE" stroke-dasharray="2 2"/>
+<rect x="13.5" y="80.7198" width="200" height="22.7363" stroke="#7A8CCE" stroke-opacity="0.2" stroke-dasharray="2 2"/>
+<rect x="13.5" y="80.7198" width="200" height="22.7363" stroke="#7A8CCE" stroke-opacity="0.5" stroke-dasharray="2 2"/>
+</g>
+</svg>