diff --git a/.changeset/six-ravens-live.md b/.changeset/six-ravens-live.md
new file mode 100644
index 00000000..1d61487e
--- /dev/null
+++ b/.changeset/six-ravens-live.md
@@ -0,0 +1,5 @@
+---
+'@eventstore-ui/layout': patch
+---
+
+Bug fix: Prevent layout items from losing their connection to asigned panel on DOM move.
diff --git a/packages/layout/src/components/buttons/es-layout-button/es-layout-button.tsx b/packages/layout/src/components/buttons/es-layout-button/es-layout-button.tsx
index aa0fafff..6fa57529 100644
--- a/packages/layout/src/components/buttons/es-layout-button/es-layout-button.tsx
+++ b/packages/layout/src/components/buttons/es-layout-button/es-layout-button.tsx
@@ -61,7 +61,8 @@ export class LayoutButton {
 
     private unbindPanelMode?: () => void;
 
-    componentWillLoad() {
+    connectedCallback() {
+        this.unbindPanelMode?.();
         this.unbindPanelMode = bindPanelDetails(this.host, ({ mode }) => {
             this.panelMode = mode;
         });
diff --git a/packages/layout/src/components/buttons/es-layout-link/es-layout-link.tsx b/packages/layout/src/components/buttons/es-layout-link/es-layout-link.tsx
index 8e88496a..ec41a1b5 100644
--- a/packages/layout/src/components/buttons/es-layout-link/es-layout-link.tsx
+++ b/packages/layout/src/components/buttons/es-layout-link/es-layout-link.tsx
@@ -74,7 +74,8 @@ export class LayoutLink {
 
     private unbindPanelMode?: () => void;
 
-    componentWillLoad() {
+    connectedCallback() {
+        this.unbindPanelMode?.();
         this.unbindPanelMode = bindPanelDetails(this.host, ({ mode }) => {
             this.panelMode = mode;
         });
diff --git a/packages/layout/src/components/es-layout-hr/es-layout-hr.tsx b/packages/layout/src/components/es-layout-hr/es-layout-hr.tsx
index 9eef51d3..4f35af3a 100644
--- a/packages/layout/src/components/es-layout-hr/es-layout-hr.tsx
+++ b/packages/layout/src/components/es-layout-hr/es-layout-hr.tsx
@@ -9,14 +9,15 @@ import { bindPanelDetails, type PanelMode } from '../panel';
     styleUrl: 'es-layout-hr.css',
     shadow: true,
 })
-export class PageTitle {
+export class LayoutHR {
     @Element() host!: HTMLEsLayoutSectionElement;
 
     @State() panelMode: PanelMode = 'inline';
 
     private unbindMode?: () => void;
 
-    componentWillLoad() {
+    connectedCallback() {
+        this.unbindMode?.();
         this.unbindMode = bindPanelDetails(this.host, ({ mode }) => {
             this.panelMode = mode;
         });
diff --git a/packages/layout/src/components/es-layout-section/es-layout-section.tsx b/packages/layout/src/components/es-layout-section/es-layout-section.tsx
index 9677e3a2..f101bb08 100644
--- a/packages/layout/src/components/es-layout-section/es-layout-section.tsx
+++ b/packages/layout/src/components/es-layout-section/es-layout-section.tsx
@@ -46,7 +46,8 @@ export class LayoutSection {
 
     private unbindPanelDetails?: () => void;
 
-    componentWillLoad() {
+    connectedCallback() {
+        this.unbindPanelDetails?.();
         this.unbindPanelDetails = bindPanelDetails(
             this.host,
             (PanelDetails) => {