diff --git a/templates/base/components/panel/layout.html.twig b/templates/base/components/panel/layout.html.twig
index 90a0330de..078f94e44 100644
--- a/templates/base/components/panel/layout.html.twig
+++ b/templates/base/components/panel/layout.html.twig
@@ -3,10 +3,11 @@
 {% apply spaceless %}
     <div id="{{ oUIBlock.GetId() }}"
          class="ibo-panel ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %} {% if oUIBlock.IsIconAsMedallion() %}ibo-has-medallion-icon{% endif %} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} ibo-is-opened"
-            {% block iboPanelMetaData %}{% endblock %}>
-        <div class="ibo-panel--header">
+            {% block iboPanelMetaData %}{% endblock %}
+         data-role="ibo-panel">
+        <div class="ibo-panel--header" data-role="ibo-panel--header">
             {% block iboPanelHeader %}
-                <div class="ibo-panel--header-left">
+                <div class="ibo-panel--header-left" data-role="ibo-panel--header-left">
                     {% if oUIBlock.isCollapsible() %}
                         <div class="ibo-panel--collapsible-toggler" data-role="ibo-panel--collapsible-toggler">
                             <i class="fas fa-caret-right ibo-panel--collapsible-toggler--closed"></i>
@@ -15,27 +16,27 @@
                     {% endif %}
                     {% block iboPanelHeaderLeft %}
                         {% if oUIBlock.HasIcon() %}
-                            <div class="ibo-panel--icon">
+                            <div class="ibo-panel--icon" data-role="ibo-panel--icon">
                                 {% block iboPanelIcon %}
-                                    <div class="ibo-panel--icon-background ibo-panel--icon-background--must-{{ oUIBlock.GetIconCoverMethod() }}" style="background-image: url('{{ oUIBlock.GetIconUrl()|raw }}');"></div>
+                                    <div class="ibo-panel--icon-background ibo-panel--icon-background--must-{{ oUIBlock.GetIconCoverMethod() }}" data-role="ibo-panel--icon-background" style="background-image: url('{{ oUIBlock.GetIconUrl()|raw }}');"></div>
                                 {% endblock %}
                             </div>
                         {% endif %}
                         {% if oUIBlock.HasTitle() or oUIBlock.HasSubTitle() %}
-                            <div class="ibo-panel--titles">
+                            <div class="ibo-panel--titles" data-role="ibo-panel--titles">
                                 {% block iboPanelTitles %}
                                     {% if oUIBlock.HasTitle() %}
-                                        <div class="ibo-panel--title">{% block iboPanelTitle %}{{ render_block(oUIBlock.GetTitleBlock()) }}{% endblock %}</div>
+                                        <div class="ibo-panel--title" data-role="ibo-panel--title">{% block iboPanelTitle %}{{ render_block(oUIBlock.GetTitleBlock()) }}{% endblock %}</div>
                                     {% endif %}
                                     {% if oUIBlock.HasSubTitle() %}
-                                        <div class="ibo-panel--subtitle">{% block iboPanelSubTitle %}{{ render_block(oUIBlock.GetSubTitleBlock()) }}{% endblock %}</div>
+                                        <div class="ibo-panel--subtitle" data-role="ibo-panel--subtitle">{% block iboPanelSubTitle %}{{ render_block(oUIBlock.GetSubTitleBlock()) }}{% endblock %}</div>
                                     {% endif %}
                                 {% endblock %}
                             </div>
                         {% endif %}
                     {% endblock %}
                 </div>
-                <div class="ibo-panel--header-right">
+                <div class="ibo-panel--header-right" data-role="ibo-panel--header-right">
                     {% block iboPanelHeaderRight %}
                         <div class="ibo-panel--toolbar">
                             {% block iboPanelToolbar %}
@@ -48,7 +49,7 @@
                 </div>
             {% endblock %}
         </div>
-        <div class="ibo-panel--body">
+        <div class="ibo-panel--body" data-role="ibo-panel--body">
             {% block iboPanelBody %}
                 {% for oMainBlock in oUIBlock.GetMainBlocks() %}
                     {{ render_block(oMainBlock, {aPage: aPage}) }}
diff --git a/templates/base/layouts/object/object-details/layout.html.twig b/templates/base/layouts/object/object-details/layout.html.twig
index 55ffd9462..fdc677a1b 100644
--- a/templates/base/layouts/object/object-details/layout.html.twig
+++ b/templates/base/layouts/object/object-details/layout.html.twig
@@ -11,11 +11,11 @@
 
 {% block iboPanelSubTitle %}
     {% if oUIBlock.GetStatusLabel() is not empty %}
-        <span class="ibo-object-details--status" data-status-code="{{ oUIBlock.GetStatusCode() }}">
-            <span class="ibo-object-details--status-dot ibo-is-state-{{ oUIBlock.GetStatusColor() }}"></span>
-            <span class="ibo-object-details--status-label">{{ oUIBlock.GetStatusLabel() }}</span>
+        <span class="ibo-object-details--status" data-role="ibo-object-details--status" data-status-code="{{ oUIBlock.GetStatusCode() }}">
+            <span class="ibo-object-details--status-dot ibo-is-state-{{ oUIBlock.GetStatusColor() }}" data-role="ibo-object-details--status-dot"></span>
+            <span class="ibo-object-details--status-label" data-role="ibo-object-details--status-label">{{ oUIBlock.GetStatusLabel() }}</span>
         </span>
     {% endif %}
-    <span class="ibo-object-details--object-class">{{ oUIBlock.GetClassLabel() }}</span>
+    <span class="ibo-object-details--object-class" data-role="ibo-object-details--object-class">{{ oUIBlock.GetClassLabel() }}</span>
     {{ parent() }}
 {% endblock %}
\ No newline at end of file