diff --git a/composer.json b/composer.json
index adb176f..c744d6c 100644
--- a/composer.json
+++ b/composer.json
@@ -19,7 +19,8 @@
     "symfony/dependency-injection": "^5.3",
     "symfony/event-dispatcher": "^5.2",
     "symfony/finder": "^5.2",
-    "symfony/http-kernel": "^5.3"
+    "symfony/http-kernel": "^5.3",
+    "teamneusta/pimcore-areabrick-config-bundle": "dev-main"
   },
   "require-dev": {
     "friendsofphp/php-cs-fixer": "^3.11",
diff --git a/src/DocumentAreabrick/Base/AbstractConfigurableAreabrick.php b/src/DocumentAreabrick/Base/AbstractConfigurableAreabrick.php
new file mode 100644
index 0000000..2b08abb
--- /dev/null
+++ b/src/DocumentAreabrick/Base/AbstractConfigurableAreabrick.php
@@ -0,0 +1,49 @@
+<?php declare(strict_types=1);
+
+namespace Neusta\Pimcore\PresentationBundle\DocumentAreabrick\Base;
+
+use Neusta\Pimcore\AreabrickConfigBundle\HasDialogBox;
+use Neusta\Pimcore\AreabrickConfigBundle\DialogBoxBuilder;
+use Pimcore\Extension\Document\Areabrick\AbstractTemplateAreabrick;
+use Pimcore\Extension\Document\Areabrick\EditableDialogBoxInterface;
+use Pimcore\Model\Document\Editable;
+use Pimcore\Model\Document\Editable\Area\Info;
+
+class AbstractConfigurableAreabrick extends AbstractTemplateAreabrick implements EditableDialogBoxInterface
+{
+    /** @template-use HasDialogBox<DialogBoxBuilder> */
+    use HasDialogBox;
+
+    protected function createDialogBoxBuilder(Editable $area, ?Info $info): DialogBoxBuilder
+    {
+        return new DialogBoxBuilder();
+    }
+
+    protected function buildDialogBox(DialogBoxBuilder $dialogBox, Editable $area, ?Info $info): void
+    {
+        $dialogBox
+            ->addTab('Fragment Settings',
+                $dialogBox->createSelect(
+                    'fragment-style',
+                    [
+                        'none' => 'none',
+                        'fade-in' => 'fade in',
+                        'fade-out' => 'fade out',
+                        'fade-up' => 'fade up',
+                        'fade-in-then-out' => 'fade in then out',
+                        'fade-in-then-semi-out' => 'fade in then semi out',
+                        'grow' => 'grow',
+                        'shrink' => 'shrink',
+                        'strike' => 'strike',
+                        'highlight-current-blue' => 'highlight current blue',
+                        'highlight-red' => 'highlight red',
+                        'highlight-blue' => 'highlight blue',
+                        'highlight-green' => 'highlight green',
+                    ]
+                )
+                    ->setLabel('Fragments Style')
+                    ->setDefaultValue('none'),
+                $dialogBox->createNumeric('fragments-order', 0, 20),
+            );
+    }
+}
diff --git a/src/DocumentAreabrick/Code.php b/src/DocumentAreabrick/Code.php
index a054c3d..8a11d50 100644
--- a/src/DocumentAreabrick/Code.php
+++ b/src/DocumentAreabrick/Code.php
@@ -2,9 +2,9 @@
 
 namespace Neusta\Pimcore\PresentationBundle\DocumentAreabrick;
 
-use Pimcore\Extension\Document\Areabrick\AbstractTemplateAreabrick;
+use Neusta\Pimcore\PresentationBundle\DocumentAreabrick\Base\AbstractConfigurableAreabrick;
 
-class Code extends AbstractTemplateAreabrick
+class Code extends AbstractConfigurableAreabrick
 {
     public function getName(): string
     {
diff --git a/src/DocumentAreabrick/Header.php b/src/DocumentAreabrick/Header.php
index a002006..73e5204 100644
--- a/src/DocumentAreabrick/Header.php
+++ b/src/DocumentAreabrick/Header.php
@@ -2,9 +2,9 @@
 
 namespace Neusta\Pimcore\PresentationBundle\DocumentAreabrick;
 
-use Pimcore\Extension\Document\Areabrick\AbstractTemplateAreabrick;
+use Neusta\Pimcore\PresentationBundle\DocumentAreabrick\Base\AbstractConfigurableAreabrick;
 
-class Header extends AbstractTemplateAreabrick
+class Header extends AbstractConfigurableAreabrick
 {
     public function getName(): string
     {
diff --git a/src/DocumentAreabrick/Image.php b/src/DocumentAreabrick/Image.php
index f7d97fa..94c87e0 100644
--- a/src/DocumentAreabrick/Image.php
+++ b/src/DocumentAreabrick/Image.php
@@ -2,9 +2,9 @@
 
 namespace Neusta\Pimcore\PresentationBundle\DocumentAreabrick;
 
-use Pimcore\Extension\Document\Areabrick\AbstractTemplateAreabrick;
+use Neusta\Pimcore\PresentationBundle\DocumentAreabrick\Base\AbstractConfigurableAreabrick;
 
-class Image extends AbstractTemplateAreabrick
+class Image extends AbstractConfigurableAreabrick
 {
     public function getName(): string
     {
diff --git a/src/DocumentAreabrick/Textarea.php b/src/DocumentAreabrick/Textarea.php
index 7d7c22b..49a3d48 100644
--- a/src/DocumentAreabrick/Textarea.php
+++ b/src/DocumentAreabrick/Textarea.php
@@ -2,9 +2,9 @@
 
 namespace Neusta\Pimcore\PresentationBundle\DocumentAreabrick;
 
-use Pimcore\Extension\Document\Areabrick\AbstractTemplateAreabrick;
+use Neusta\Pimcore\PresentationBundle\DocumentAreabrick\Base\AbstractConfigurableAreabrick;
 
-class Textarea extends AbstractTemplateAreabrick
+class Textarea extends AbstractConfigurableAreabrick
 {
     public function getName(): string
     {
diff --git a/src/DocumentAreabrick/Wysiwyg.php b/src/DocumentAreabrick/Wysiwyg.php
index f2acd73..a65cb1a 100644
--- a/src/DocumentAreabrick/Wysiwyg.php
+++ b/src/DocumentAreabrick/Wysiwyg.php
@@ -2,9 +2,9 @@
 
 namespace Neusta\Pimcore\PresentationBundle\DocumentAreabrick;
 
-use Pimcore\Extension\Document\Areabrick\AbstractTemplateAreabrick;
+use Neusta\Pimcore\PresentationBundle\DocumentAreabrick\Base\AbstractConfigurableAreabrick;
 
-class Wysiwyg extends AbstractTemplateAreabrick
+class Wysiwyg extends AbstractConfigurableAreabrick
 {
     public function getName(): string
     {
diff --git a/templates/Areas/fragmentWrap.html.twig b/templates/Areas/fragmentWrap.html.twig
index b69c100..f31eb3f 100644
--- a/templates/Areas/fragmentWrap.html.twig
+++ b/templates/Areas/fragmentWrap.html.twig
@@ -7,45 +7,3 @@
 {% set isFragment = fragmentStyle
     ? 'fragment'
     : '' %}
-
-<div class="brick-{{ brickName }} {{ isFragment }} {{ fragmentStyle }}" {{ fragmentOrder }}>
-    {% block brick %}{% endblock %}
-</div>
-
-{% if editmode %}
-    <div class="brick-settings">
-        <h1>Brick settings</h1>
-
-        <div class="flex-container">
-            <div class="flex-child">
-                <h2>Fragments style</h2>
-                {{ pimcore_select('fragment-style',{
-                    'store': [
-                        ['none', 'none'],
-                        ['fade-in', 'fade in'],
-                        ['fade-out', 'fade out'],
-                        ['fade-up', 'fade up'],
-                        ['fade-in-then-out', 'fade in then out'],
-                        ['fade-in-then-semi-out', 'fade in then semi out'],
-                        ['grow', 'grow'],
-                        ['shrink', 'shrink'],
-                        ['strike', 'strike'],
-                        ['highlight-current-blue', 'highlight current blue'],
-                        ['highlight-red', 'highlight red'],
-                        ['highlight-blue', 'highlight blue'],
-                        ['highlight-green', 'highlight green'],
-                    ],
-                    'defaultValue': 'none'
-                }) }}
-            </div>
-
-            <div class="flex-child">
-                <h2>Fragments order</h2>
-                {{ pimcore_numeric('fragment-order', {
-                    'minValue': 0,
-                    'maxValue': 20
-                }) }}
-            </div>
-        </div>
-    </div>
-{% endif %}