diff --git a/examples/mysite/title_page/subpage/water/science/generate_science_page.py b/examples/mysite/title_page/subpage/water/science/generate_science_page.py
index bf41cdc5..f3f91992 100644
--- a/examples/mysite/title_page/subpage/water/science/generate_science_page.py
+++ b/examples/mysite/title_page/subpage/water/science/generate_science_page.py
@@ -125,7 +125,8 @@
     grid_area="markdown",
     background_color="rgba(240, 240, 240, 0.7)",
     border_radius="10px",
-    padding="10px"
+    padding="10px",
+    show_element_name=False
 )
 
 dashboard.add_geocoder_block(
diff --git a/examples/mysite/title_page/subpage/water/science/index.html b/examples/mysite/title_page/subpage/water/science/index.html
index 8c7f3999..083df093 100644
--- a/examples/mysite/title_page/subpage/water/science/index.html
+++ b/examples/mysite/title_page/subpage/water/science/index.html
@@ -604,7 +604,7 @@
 
         /* Navigation Menu Styles */
         .sivo-nav-btn {
-            position: absolute;
+            position: fixed;
             background: #ffffff;
             border: 1px solid #e2e8f0;
             border-radius: 8px;
@@ -624,7 +624,7 @@
             transform: translateY(-1px);
         }
         .sivo-nav-menu {
-            position: absolute;
+            position: fixed;
             background: #ffffff;
             border: 1px solid #e2e8f0;
             border-radius: 8px;
@@ -818,7 +818,7 @@
 
 
         .sivo-nav-btn {
-            position: absolute;
+            position: fixed;
             background: #ffffff;
             border: 1px solid #e2e8f0;
             border-radius: 8px;
@@ -841,7 +841,7 @@
             transform: translateY(-1px);
         }
         .sivo-nav-menu {
-            position: absolute;
+            position: fixed;
             background: #ffffff;
             border: 1px solid #e2e8f0;
             border-radius: 8px;
@@ -1052,7 +1052,7 @@
 
 
 
-            <div class="html-card sivo-details-panel" id="card-markdown" data-block-id="markdown" style="grid-area: markdown;  background-color: rgba(240, 240, 240, 0.7) !important; border-radius: 10px; padding: 10px;">
+            <div class="html-card sivo-details-panel" id="card-markdown" data-block-id="markdown" data-show-name="false" style="grid-area: markdown;  background-color: rgba(240, 240, 240, 0.7) !important; border-radius: 10px; padding: 10px;">
                 <div class="card-header"></div>
                 <div class="card-content sivo-details-content" id="container-markdown">
                     <p class="placeholder-text" style="color: #64748b;" id="placeholder-markdown"># Water Science
@@ -1674,20 +1674,24 @@ <h2 id="sidebar-title">Details</h2>
 
                     // Do NOT update in-grid Details panels if we opened a sidebar (OR behavior)
                     detailsPanels.forEach(panel => {
+                        const showName = panel.getAttribute('data-show-name') !== 'false';
                         const container = panel.querySelector('.sivo-details-content');
                         var safeName = window.DOMPurify ? window.DOMPurify.sanitize(params.name) : String(params.name || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-                        container.innerHTML = `<h3>${safeName}</h3><p style="color: #64748b; font-style: italic;">Details opened in sidebar overlay.</p>`;
+                        var headerHtml = showName ? `<h3>${safeName}</h3>` : '';
+                        container.innerHTML = `${headerHtml}<p style="color: #64748b; font-style: italic;">Details opened in sidebar overlay.</p>`;
                     });
                 } else {
                     // Update in-grid Details Panels
                     detailsPanels.forEach(panel => {
+                        const showName = panel.getAttribute('data-show-name') !== 'false';
                         const container = panel.querySelector('.sivo-details-content');
                         var safeName = window.DOMPurify ? window.DOMPurify.sanitize(params.name) : String(params.name || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+                        var headerHtml = showName ? `<h3>${safeName}</h3>` : '';
                         if (tooltipContent) {
                             var safeTooltip = window.DOMPurify ? window.DOMPurify.sanitize(tooltipContent) : tooltipContent;
-                            container.innerHTML = `<h3>${safeName}</h3>${safeTooltip}`;
+                            container.innerHTML = `${headerHtml}${safeTooltip}`;
                         } else {
-                            container.innerHTML = `<h3>${safeName}</h3><p>No additional details mapped.</p>`;
+                            container.innerHTML = `${headerHtml}<p>No additional details mapped.</p>`;
                         }
                     });
                 }
diff --git a/src/sivo/core/dashboard.py b/src/sivo/core/dashboard.py
index e849ce93..730b82c2 100644
--- a/src/sivo/core/dashboard.py
+++ b/src/sivo/core/dashboard.py
@@ -142,7 +142,7 @@ def add_text_block(self, block_id: str, text: str, font_family: str = "Arial, sa
 
         self.add_html_block(block_id, html_content, col_span=col_span, slot=slot, grid_area=grid_area, overflow_visible=overflow_visible, min_height=min_height)
 
-    def add_details_panel(self, block_id: str, title: str = "Details", placeholder: str = "Select an item to view details.", col_span: int = 1, slot: str = "main", grid_area: Optional[str] = None, overflow_visible: bool = False, min_height: Optional[str] = None, background_color: Optional[str] = None, border_radius: Optional[str] = None, padding: Optional[str] = None):
+    def add_details_panel(self, block_id: str, title: str = "Details", placeholder: str = "Select an item to view details.", col_span: int = 1, slot: str = "main", grid_area: Optional[str] = None, overflow_visible: bool = False, min_height: Optional[str] = None, background_color: Optional[str] = None, border_radius: Optional[str] = None, padding: Optional[str] = None, show_element_name: bool = True):
         """
         Adds a pre-built panel that automatically listens to SIVO canvas clicks and renders
         the clicked element's `html` (tooltip content) mapping.
@@ -152,7 +152,8 @@ def add_details_panel(self, block_id: str, title: str = "Details", placeholder:
             "placeholder": placeholder,
             "background_color": background_color,
             "border_radius": border_radius,
-            "padding": padding
+            "padding": padding,
+            "show_element_name": show_element_name
         }
         self.layout_order.append({"type": "details", "id": block_id, "col_span": col_span, "slot": slot, "grid_area": grid_area, "overflow_visible": overflow_visible, "min_height": min_height})
 
diff --git a/src/sivo/runtime/templates/dashboard_blocks.html b/src/sivo/runtime/templates/dashboard_blocks.html
index 009fa945..2554faa7 100644
--- a/src/sivo/runtime/templates/dashboard_blocks.html
+++ b/src/sivo/runtime/templates/dashboard_blocks.html
@@ -1043,7 +1043,7 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "details" %}
-            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="{{ grid_style }} {{ inline_min_height }} {% if details_panels[block.id].background_color %}background-color: {{ details_panels[block.id].background_color }} !important;{% endif %} {% if details_panels[block.id].border_radius %}border-radius: {{ details_panels[block.id].border_radius }};{% endif %} {% if details_panels[block.id].padding %}padding: {{ details_panels[block.id].padding }};{% endif %}">
+            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="{{ grid_style }} {{ inline_min_height }} {% if details_panels[block.id].background_color %}background-color: {{ details_panels[block.id].background_color }} !important;{% endif %} {% if details_panels[block.id].border_radius %}border-radius: {{ details_panels[block.id].border_radius }};{% endif %} {% if details_panels[block.id].padding %}padding: {{ details_panels[block.id].padding }};{% endif %}">
                 <div class="card-header">{{ details_panels[block.id].title }}</div>
                 <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                     <p class="placeholder-text" style="color: #64748b;" id="placeholder-{{ block.id }}">{{ details_panels[block.id].placeholder }}</p>
@@ -1634,20 +1634,24 @@ <h2 id="sidebar-title">Details</h2>
 
                     // Do NOT update in-grid Details panels if we opened a sidebar (OR behavior)
                     detailsPanels.forEach(panel => {
+                        const showName = panel.getAttribute('data-show-name') !== 'false';
                         const container = panel.querySelector('.sivo-details-content');
                         var safeName = window.DOMPurify ? window.DOMPurify.sanitize(params.name) : String(params.name || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-                        container.innerHTML = `<h3>${safeName}</h3><p style="color: #64748b; font-style: italic;">Details opened in sidebar overlay.</p>`;
+                        var headerHtml = showName ? `<h3>${safeName}</h3>` : '';
+                        container.innerHTML = `${headerHtml}<p style="color: #64748b; font-style: italic;">Details opened in sidebar overlay.</p>`;
                     });
                 } else {
                     // Update in-grid Details Panels
                     detailsPanels.forEach(panel => {
+                        const showName = panel.getAttribute('data-show-name') !== 'false';
                         const container = panel.querySelector('.sivo-details-content');
                         var safeName = window.DOMPurify ? window.DOMPurify.sanitize(params.name) : String(params.name || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+                        var headerHtml = showName ? `<h3>${safeName}</h3>` : '';
                         if (tooltipContent) {
                             var safeTooltip = window.DOMPurify ? window.DOMPurify.sanitize(tooltipContent) : tooltipContent;
-                            container.innerHTML = `<h3>${safeName}</h3>${safeTooltip}`;
+                            container.innerHTML = `${headerHtml}${safeTooltip}`;
                         } else {
-                            container.innerHTML = `<h3>${safeName}</h3><p>No additional details mapped.</p>`;
+                            container.innerHTML = `${headerHtml}<p>No additional details mapped.</p>`;
                         }
                     });
                 }
diff --git a/src/sivo/templates/dashboards/analytics_dashboard.html b/src/sivo/templates/dashboards/analytics_dashboard.html
index 74406e1b..affdb35a 100644
--- a/src/sivo/templates/dashboards/analytics_dashboard.html
+++ b/src/sivo/templates/dashboards/analytics_dashboard.html
@@ -301,7 +301,7 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}" style="padding: 1.25rem;">
                         <div style="font-size: 0.875rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; margin-bottom: 0.5rem;">{{ metrics_panels[block.id].title }}</div>
                         {% for metric in metrics_panels[block.id].metrics %}
@@ -340,7 +340,7 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "details" %}
-                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                     <div class="card-header">{{ details_panels[block.id].title }}</div>
                     <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                         <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); font-style: italic; text-align: center;">
@@ -349,7 +349,7 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                     <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                         {% for metric in metrics_panels[block.id].metrics %}
diff --git a/src/sivo/templates/dashboards/bento_box.html b/src/sivo/templates/dashboards/bento_box.html
index 277cb6b7..b9c5dfb4 100644
--- a/src/sivo/templates/dashboards/bento_box.html
+++ b/src/sivo/templates/dashboards/bento_box.html
@@ -275,7 +275,7 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "details" %}
-            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ details_panels[block.id].title }}</div>
                 <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                     <div class="placeholder-content" style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-style: italic; text-align: center;">
@@ -284,7 +284,7 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "metrics" %}
-            <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                 <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                     {% for metric in metrics_panels[block.id].metrics %}
diff --git a/src/sivo/templates/dashboards/cards_layout.html b/src/sivo/templates/dashboards/cards_layout.html
index bfd2995b..156b2fad 100644
--- a/src/sivo/templates/dashboards/cards_layout.html
+++ b/src/sivo/templates/dashboards/cards_layout.html
@@ -205,7 +205,7 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "details" %}
-            <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span | default(1) }};">
+            <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span | default(1) }};">
                 <div class="card-header">{{ details_panels[block.id].title }}</div>
                 <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                     <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-style: italic; text-align: center;">
@@ -214,7 +214,7 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "metrics" %}
-            <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span | default(1) }};">
+            <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span | default(1) }};">
                 <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                 <div class="card-content sivo-metrics-content" id="container-{{ block.id }}" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem;">
                     {% for metric in metrics_panels[block.id].metrics %}
diff --git a/src/sivo/templates/dashboards/dark_grid.html b/src/sivo/templates/dashboards/dark_grid.html
index 009704d9..4a68f9dc 100644
--- a/src/sivo/templates/dashboards/dark_grid.html
+++ b/src/sivo/templates/dashboards/dark_grid.html
@@ -266,14 +266,14 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "details" %}
-            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ details_panels[block.id].title }}</div>
                 <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                     <p class="placeholder-text" style="text-align: center; margin-top: 2rem;">{{ details_panels[block.id].placeholder }}</p>
                 </div>
             </div>
             {% elif block.type == "metrics" %}
-            <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                 <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                     {% for metric in metrics_panels[block.id].metrics %}
diff --git a/src/sivo/templates/dashboards/hero_and_four.html b/src/sivo/templates/dashboards/hero_and_four.html
index d3f618bf..cc514be0 100644
--- a/src/sivo/templates/dashboards/hero_and_four.html
+++ b/src/sivo/templates/dashboards/hero_and_four.html
@@ -255,7 +255,7 @@ <h1>{{ title }}</h1>
                         </div>
                     </div>
                     {% elif block.type == "details" %}
-                    <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                    <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                         <div class="card-header">{{ details_panels[block.id].title }}</div>
                         <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                             <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-style: italic; text-align: center;">
@@ -264,7 +264,7 @@ <h1>{{ title }}</h1>
                         </div>
                     </div>
                     {% elif block.type == "metrics" %}
-                    <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                    <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                         <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                         <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                             {% for metric in metrics_panels[block.id].metrics %}
@@ -297,7 +297,7 @@ <h1>{{ title }}</h1>
                         </div>
                     </div>
                     {% elif block.type == "details" %}
-                    <div class="card sivo-details-panel quad-card" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span | default(1) }};">
+                    <div class="card sivo-details-panel quad-card" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span | default(1) }};">
                         <div class="card-header">{{ details_panels[block.id].title }}</div>
                         <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                             <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-style: italic; text-align: center;">
@@ -306,7 +306,7 @@ <h1>{{ title }}</h1>
                         </div>
                     </div>
                     {% elif block.type == "metrics" %}
-                    <div class="card sivo-metrics-panel quad-card" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span | default(1) }};">
+                    <div class="card sivo-metrics-panel quad-card" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span | default(1) }};">
                         <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                         <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                             {% for metric in metrics_panels[block.id].metrics %}
diff --git a/src/sivo/templates/dashboards/hero_top.html b/src/sivo/templates/dashboards/hero_top.html
index 08baf6d1..f3f25b00 100644
--- a/src/sivo/templates/dashboards/hero_top.html
+++ b/src/sivo/templates/dashboards/hero_top.html
@@ -193,14 +193,14 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "details" %}
-            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ details_panels[block.id].title }}</div>
                 <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                     <p class="placeholder-text" style="color: #64748b;">{{ details_panels[block.id].placeholder }}</p>
                 </div>
             </div>
             {% elif block.type == "metrics" %}
-            <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                 <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                     <div style="display: flex; flex-direction: column; gap: 0.75rem;">
@@ -234,14 +234,14 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "details" %}
-            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ details_panels[block.id].title }}</div>
                 <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                     <p class="placeholder-text" style="color: #64748b;">{{ details_panels[block.id].placeholder }}</p>
                 </div>
             </div>
             {% elif block.type == "metrics" %}
-            <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                 <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                     <div style="display: flex; flex-direction: column; gap: 0.75rem;">
diff --git a/src/sivo/templates/dashboards/kanban_board.html b/src/sivo/templates/dashboards/kanban_board.html
index 67af0963..64eb2335 100644
--- a/src/sivo/templates/dashboards/kanban_board.html
+++ b/src/sivo/templates/dashboards/kanban_board.html
@@ -236,14 +236,14 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "details" %}
-                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ details_panels[block.id].title }}</div>
                     <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                         <p style="color: var(--text-muted); font-style: italic;">{{ details_panels[block.id].placeholder }}</p>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                         {% for metric in metrics_panels[block.id].metrics %}
diff --git a/src/sivo/templates/dashboards/minimal_grid.html b/src/sivo/templates/dashboards/minimal_grid.html
index 079f9881..7c45b8ad 100644
--- a/src/sivo/templates/dashboards/minimal_grid.html
+++ b/src/sivo/templates/dashboards/minimal_grid.html
@@ -280,7 +280,7 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "details" %}
-            <div class="minimal-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="minimal-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ details_panels[block.id].title }}</div>
                 <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                     <div class="placeholder-content" style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-style: italic; text-align: center;">
@@ -289,7 +289,7 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "metrics" %}
-            <div class="minimal-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="minimal-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                 <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                     {% for metric in metrics_panels[block.id].metrics %}
diff --git a/src/sivo/templates/dashboards/modern_glass.html b/src/sivo/templates/dashboards/modern_glass.html
index d6660d74..615cb57a 100644
--- a/src/sivo/templates/dashboards/modern_glass.html
+++ b/src/sivo/templates/dashboards/modern_glass.html
@@ -274,7 +274,7 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "details" %}
-            <div class="glass-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="glass-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ details_panels[block.id].title }}</div>
                 <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                     <div class="placeholder-content" style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-style: italic; text-align: center;">
@@ -283,7 +283,7 @@ <h1>{{ title }}</h1>
                 </div>
             </div>
             {% elif block.type == "metrics" %}
-            <div class="glass-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+            <div class="glass-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                 <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                 <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                     {% for metric in metrics_panels[block.id].metrics %}
diff --git a/src/sivo/templates/dashboards/quad_grid.html b/src/sivo/templates/dashboards/quad_grid.html
index 58f3ac8e..3684f7fe 100644
--- a/src/sivo/templates/dashboards/quad_grid.html
+++ b/src/sivo/templates/dashboards/quad_grid.html
@@ -225,7 +225,7 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "details" %}
-                <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ details_panels[block.id].title }}</div>
                     <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                         <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-style: italic; text-align: center;">
@@ -234,7 +234,7 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}" style="display: flex; flex-direction: column; justify-content: center;">
                         {% for metric in metrics_panels[block.id].metrics %}
@@ -545,16 +545,20 @@ <h2 id="sidebar-title">Details</h2>
                     document.getElementById('sivo-sliding-sidebar').classList.add('active');
 
                     detailsPanels.forEach(panel => {
+                        const showName = panel.getAttribute('data-show-name') !== 'false';
+                        const headerHtml = showName ? `<h3 style="margin-top:0; color:var(--text-color); font-size:1.25rem;">${params.name}</h3>` : '';
                         const container = panel.querySelector('.sivo-details-content');
-                        container.innerHTML = `<h3 style="margin-top:0; color:var(--text-color); font-size:1.25rem;">${params.name}</h3><p style="color: #94a3b8; font-style: italic;">Details opened in sidebar overlay.</p>`;
+                        container.innerHTML = `${headerHtml}<p style="color: #94a3b8; font-style: italic;">Details opened in sidebar overlay.</p>`;
                     });
                 } else {
                     detailsPanels.forEach(panel => {
+                        const showName = panel.getAttribute('data-show-name') !== 'false';
+                        const headerHtml = showName ? `<h3 style="margin-top:0; color:var(--text-color); font-size:1.25rem;">${params.name}</h3>` : '';
                         const container = panel.querySelector('.sivo-details-content');
                         if (tooltipContent) {
-                            container.innerHTML = `<h3 style="margin-top:0; color:var(--text-color); font-size:1.25rem;">${params.name}</h3>${tooltipContent}`;
+                            container.innerHTML = `${headerHtml}${tooltipContent}`;
                         } else {
-                            container.innerHTML = `<h3 style="margin-top:0; color:var(--text-color); font-size:1.25rem;">${params.name}</h3><p style="color: var(--text-muted);">No additional details mapped.</p>`;
+                            container.innerHTML = `${headerHtml}<p style="color: var(--text-muted);">No additional details mapped.</p>`;
                         }
                     });
                 }
diff --git a/src/sivo/templates/dashboards/sidebar_left.html b/src/sivo/templates/dashboards/sidebar_left.html
index f72fbc28..44c3faad 100644
--- a/src/sivo/templates/dashboards/sidebar_left.html
+++ b/src/sivo/templates/dashboards/sidebar_left.html
@@ -226,14 +226,14 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "details" %}
-                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ details_panels[block.id].title }}</div>
                     <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                         <p class="placeholder-text" style="color: #64748b;">{{ details_panels[block.id].placeholder }}</p>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                         <div style="display: flex; flex-direction: column; gap: 0.75rem;">
@@ -268,14 +268,14 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "details" %}
-                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                     <div class="card-header">{{ details_panels[block.id].title }}</div>
                     <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                         <p class="placeholder-text" style="color: #64748b;">{{ details_panels[block.id].placeholder }}</p>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                     <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                         <div style="display: flex; flex-direction: column; gap: 0.75rem;">
diff --git a/src/sivo/templates/dashboards/sidebar_right.html b/src/sivo/templates/dashboards/sidebar_right.html
index 4197bfc3..82081458 100644
--- a/src/sivo/templates/dashboards/sidebar_right.html
+++ b/src/sivo/templates/dashboards/sidebar_right.html
@@ -226,14 +226,14 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "details" %}
-                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                     <div class="card-header">{{ details_panels[block.id].title }}</div>
                     <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                         <p class="placeholder-text" style="color: #64748b;">{{ details_panels[block.id].placeholder }}</p>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" style="grid-column: span {{ block.col_span }};">
+                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" style="grid-column: span {{ block.col_span }};">
                     <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                         <div style="display: flex; flex-direction: column; gap: 0.75rem;">
@@ -268,14 +268,14 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "details" %}
-                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="html-card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ details_panels[block.id].title }}</div>
                     <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                         <p class="placeholder-text" style="color: #64748b;">{{ details_panels[block.id].placeholder }}</p>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="html-card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                         <div style="display: flex; flex-direction: column; gap: 0.75rem;">
diff --git a/src/sivo/templates/dashboards/split_screen.html b/src/sivo/templates/dashboards/split_screen.html
index 79f5869f..dde2196c 100644
--- a/src/sivo/templates/dashboards/split_screen.html
+++ b/src/sivo/templates/dashboards/split_screen.html
@@ -232,14 +232,14 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "details" %}
-                <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ details_panels[block.id].title }}</div>
                     <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                         <p style="color: #6b7280; font-style: italic; text-align: center;">{{ details_panels[block.id].placeholder }}</p>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                         {% for metric in metrics_panels[block.id].metrics %}
@@ -271,14 +271,14 @@ <h1>{{ title }}</h1>
                     </div>
                 </div>
                 {% elif block.type == "details" %}
-                <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="card sivo-details-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ details_panels[block.id].title }}</div>
                     <div class="card-content sivo-details-content" id="container-{{ block.id }}">
                         <p style="color: #6b7280; font-style: italic; text-align: center;">{{ details_panels[block.id].placeholder }}</p>
                     </div>
                 </div>
                 {% elif block.type == "metrics" %}
-                <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}">
+                <div class="card sivo-metrics-panel" id="card-{{ block.id }}" data-block-id="{{ block.id }}" data-show-name="{{ 'true' if details_panels[block.id].show_element_name else 'false' }}">
                     <div class="card-header">{{ metrics_panels[block.id].title }}</div>
                     <div class="card-content sivo-metrics-content" id="container-{{ block.id }}">
                         {% for metric in metrics_panels[block.id].metrics %}