diff --git a/playwright/e2e/element-examples/si-main-detail-container.spec.ts b/playwright/e2e/element-examples/si-main-detail-container.spec.ts
index 628b3e5e87..c37a77e424 100644
--- a/playwright/e2e/element-examples/si-main-detail-container.spec.ts
+++ b/playwright/e2e/element-examples/si-main-detail-container.spec.ts
@@ -9,7 +9,7 @@ test.describe('si-main-detail-container', () => {
 
   test(example, async ({ page, si }) => {
     await si.visitExample(example);
-    await expect(page.getByText('Max Meier 8')).toHaveCount(1);
+    await expect(page.getByText('Max Meier 5')).toHaveCount(1);
     await si.runVisualAndA11yTests(undefined, {
       axeRulesSet: [{ id: 'scrollable-region-focusable', enabled: false }]
     });
diff --git a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-dark-linux.png
index cd3bd53f99..5147f2d298 100644
--- a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6075ef61268812087adefe2ba519087913ca7f242c9ed83a95bac38f5b74f92c
-size 40318
+oid sha256:446e9892ddc0bf76a51a77f41b1af41439037834b7dc3d34bf32f3e2e7e02b7e
+size 31781
diff --git a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-light-linux.png b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-light-linux.png
index 67a0e055fb..8d085b47bf 100644
--- a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:75c0b03d9d5e35ecdf77f151611091bb9ef8e191018a3d26a0d9c00a6cbeccc9
-size 37212
+oid sha256:473c3c228eba6e46791f3a3eb94339ac19a1d9bc1a564bf2db4fb8cee0e5d9f3
+size 29659
diff --git a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container.yaml b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container.yaml
index a7b2b64835..6951b2f96b 100644
--- a/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container.yaml
+++ b/playwright/snapshots/si-main-detail-container.spec.ts-snapshots/si-main-detail-container--si-main-detail-container.yaml
@@ -36,18 +36,12 @@
       - cell "Max Meier 6"
       - cell "Engineer"
       - cell "Great Company 1"
-    - row "Max Meier 7 Installer Great Company 2":
-      - cell "Max Meier 7"
-      - cell "Installer"
-      - cell "Great Company 2"
-    - row "Max Meier 8 Engineer Great Company 3":
-      - cell "Max Meier 8"
-      - cell "Engineer"
-      - cell "Great Company 3"
 - text: Details
 - button "Toggle"
 - text: No entity selected.
-- checkbox "Resizable Parts" [checked]
-- text: Resizable Parts
+- separator
+- text: Settings
+- checkbox "Resizable parts" [checked]
+- text: Resizable parts
 - checkbox "Simulate mobile layout"
 - text: Simulate mobile layout
\ No newline at end of file
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container-block.html b/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
index dd6aabc4df..2489d3fe23 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container-block.html
@@ -12,7 +12,6 @@
   (hasLargeSizeChange)="isLarge = $event"
   (mainContainerWidthChange)="table.recalculate()"
 >
-  >
   <si-search-bar
     slot="mainSearch"
     placeholder="Search"
@@ -67,25 +66,32 @@
   </div>
 </si-main-detail-container>
 
-<form class="p-5 e2e-ignore">
-  <div class="form-check">
-    <input
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckResizableParts"
-      [checked]="resizableParts"
-      (change)="resizableParts = !resizableParts"
-    />
-    <label class="form-check-label" for="customCheckResizableParts">Resizable Parts</label>
-  </div>
-  <div class="form-check">
-    <input
-      #checkbox
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckMobileLayout"
-      (change)="toggleMobileLayout(checkbox.checked)"
-    />
-    <label class="form-check-label" for="customCheckMobileLayout">Simulate mobile layout</label>
-  </div>
-</form>
+<div class="e2e-ignore">
+  <hr />
+  <form class="px-6 px-md-9 pb-6 pt-5">
+    <div class="card">
+      <div class="card-header">Settings</div>
+      <div class="card-body">
+        <si-form-item label="Resizable parts">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckResizableParts"
+            name="resizableParts"
+            [(ngModel)]="resizableParts"
+          />
+        </si-form-item>
+        <si-form-item label="Simulate mobile layout">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckMobileLayout"
+            name="simulateMobileLayout"
+            ngModel
+            (ngModelChange)="toggleMobileLayout($event)"
+          />
+        </si-form-item>
+      </div>
+    </div>
+  </form>
+</div>
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts b/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts
index 5c069b7780..221642f809 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container-block.ts
@@ -4,12 +4,14 @@
  */
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   ContentActionBarMainItem,
   SiContentActionBarComponent
 } from '@siemens/element-ng/content-action-bar';
 import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable';
 import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state';
+import { SiFormItemComponent } from '@siemens/element-ng/form';
 import { SiMainDetailContainerComponent } from '@siemens/element-ng/main-detail-container';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSearchBarModule } from '@siemens/element-ng/search-bar';
@@ -22,12 +24,14 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s
   selector: 'app-sample',
   imports: [
     CommonModule,
+    FormsModule,
     SiMainDetailContainerComponent,
     SiSearchBarModule,
     SiContentActionBarComponent,
     NgxDatatableModule,
     SiDatatableModule,
-    SiEmptyStateComponent
+    SiEmptyStateComponent,
+    SiFormItemComponent
   ],
   templateUrl: './si-main-detail-container-block.html',
   styleUrl: './si-main-detail-container-block.scss',
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container.html b/src/app/examples/si-main-detail-container/si-main-detail-container.html
index 03125733cf..118f5e7b23 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container.html
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container.html
@@ -72,25 +72,32 @@
   </div>
 </si-main-detail-container>
 
-<form class="p-5 e2e-ignore">
-  <div class="form-check">
-    <input
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckResizableParts"
-      [checked]="resizableParts"
-      (change)="resizableParts = !resizableParts"
-    />
-    <label class="form-check-label" for="customCheckResizableParts">Resizable Parts</label>
-  </div>
-  <div class="form-check">
-    <input
-      #checkbox
-      type="checkbox"
-      class="form-check-input"
-      id="customCheckMobileLayout"
-      (change)="toggleMobileLayout(checkbox.checked)"
-    />
-    <label class="form-check-label" for="customCheckMobileLayout">Simulate mobile layout</label>
-  </div>
-</form>
+<div class="e2e-ignore">
+  <hr />
+  <form class="px-6 px-md-9 pb-6 pt-5">
+    <div class="card">
+      <div class="card-header">Settings</div>
+      <div class="card-body">
+        <si-form-item label="Resizable parts">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckResizableParts"
+            name="resizableParts"
+            [(ngModel)]="resizableParts"
+          />
+        </si-form-item>
+        <si-form-item label="Simulate mobile layout">
+          <input
+            type="checkbox"
+            class="form-check-input"
+            id="customCheckMobileLayout"
+            name="simulateMobileLayout"
+            ngModel
+            (ngModelChange)="toggleMobileLayout($event)"
+          />
+        </si-form-item>
+      </div>
+    </div>
+  </form>
+</div>
diff --git a/src/app/examples/si-main-detail-container/si-main-detail-container.ts b/src/app/examples/si-main-detail-container/si-main-detail-container.ts
index 1ba6e0a14d..16dcac4434 100644
--- a/src/app/examples/si-main-detail-container/si-main-detail-container.ts
+++ b/src/app/examples/si-main-detail-container/si-main-detail-container.ts
@@ -10,12 +10,14 @@ import {
   inject,
   viewChild
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   ContentActionBarMainItem,
   SiContentActionBarComponent
 } from '@siemens/element-ng/content-action-bar';
 import { SI_DATATABLE_CONFIG, SiDatatableModule } from '@siemens/element-ng/datatable';
 import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state';
+import { SiFormItemComponent } from '@siemens/element-ng/form';
 import { SiMainDetailContainerComponent } from '@siemens/element-ng/main-detail-container';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSearchBarModule } from '@siemens/element-ng/search-bar';
@@ -28,12 +30,14 @@ import { CorporateEmployee, DataService, PageRequest } from '../datatable/data.s
   selector: 'app-sample',
   imports: [
     CommonModule,
+    FormsModule,
     SiMainDetailContainerComponent,
     SiSearchBarModule,
     SiContentActionBarComponent,
     NgxDatatableModule,
     SiDatatableModule,
-    SiEmptyStateComponent
+    SiEmptyStateComponent,
+    SiFormItemComponent
   ],
   templateUrl: './si-main-detail-container.html',
   styleUrl: './si-main-detail-container.scss',