diff --git a/kdots/js/EgwFrameworkApp.styles.ts b/kdots/js/EgwFrameworkApp.styles.ts
index 586e9ebf8f..8d04e9878f 100644
--- a/kdots/js/EgwFrameworkApp.styles.ts
+++ b/kdots/js/EgwFrameworkApp.styles.ts
@@ -31,6 +31,22 @@ export default css`
 		max-height: 3em;
 	}
 
+	.egw_fw_app__outerSplit {
+		grid-column: start / end;
+		grid-row: start / end;
+		grid-template-rows: subgrid;
+	}
+
+	.egw_fw_app__innerSplit {
+		grid-template-rows: subgrid;
+		grid-column-end: -1;
+		grid-row: start / end;
+	}
+
+	sl-split-panel::part(divider) {
+		grid-row: start / end;
+	}
+
 	.egw_fw_app__aside {
 		overflow-x: hidden;
 		overflow-y: auto;
@@ -53,40 +69,32 @@ export default css`
 		grid-row: footer / end;
 	}
 
-	.egw_fw_app__left {
-		grid-column: left / left;
-	}
-
-	.egw_fw_app__right {
-		grid-column: right / right;
-	}
-
 	.egw_fw_app__main {
 		flex: 1 1 100%;
 		display: grid;
 		align-items: stretch;
 		justify-content: stretch;
 		overflow: hidden;
-		overflow-x: auto;
 	}
 	.egw_fw_app__header {
 		grid-row: sub-header / main;
-		grid-column: main / main;
 	}
 
 	.egw_fw_app__main_content {
 		grid-row: main / footer;
-		grid-column: main / main;
 	}
 
 	.egw_fw_app__footer {
-		grid-column: main / right;
 		grid-row: footer / end;
 	}
 
+	.header, .footer {
+		overflow: hidden;
+	}
+
 	@media (min-width: 600px) {
 		.egw_fw_app__main {
-			grid-template-columns: [start left] fit-content(20%)  [main] 1fr [right] fit-content(50%) [end];
+			grid-template-columns: [start left] min-content [ main] 1fr [right] min-content [end];
 			grid-template-rows: [start sub-header] fit-content(2em) [main] auto [footer] fit-content(2em) [end];
 		}
 
diff --git a/kdots/js/EgwFrameworkApp.ts b/kdots/js/EgwFrameworkApp.ts
index 339a33df41..d7be3e1cdc 100644
--- a/kdots/js/EgwFrameworkApp.ts
+++ b/kdots/js/EgwFrameworkApp.ts
@@ -1,4 +1,4 @@
-import {css, html, LitElement} from "lit";
+import {css, html, LitElement, nothing} from "lit";
 import {customElement} from "lit/decorators/custom-element.js";
 import {property} from "lit/decorators/property.js";
 import {state} from "lit/decorators/state.js";
@@ -94,6 +94,8 @@ export class EgwFrameworkApp extends LitElement
 			"egw_fw_app__left": true,
 			"egw_fw_app__aside-collapsed": this.leftCollapsed
 		});
+		const leftWidth = this.leftCollapsed ? 0 : parseInt(this.egw.preference("jdotssideboxwidth", this.name) || 0) || 250;
+		const rightWidth = (parseInt(this.egw.preference("app_right_width", this.name) || 0) || 0);
 		return html`
             <div class="egw_fw_app__header">
                 <div class="egw_fw_app__name" part="name">
@@ -107,40 +109,46 @@ export class EgwFrameworkApp extends LitElement
                     <slot name="main-header"><span class="placeholder"> ${this.name} main-header</span></slot>
                 </header>
             </div>
-            <main class="egw_fw_app__main" part="main"
-                  aria-label="${this.name}" tabindex="0">
-                <aside class=${leftClassMap} part="left">
-                    <div class="egw_fw_app__aside_header">
-                        <slot name="left-header"><span class="placeholder">left-header</span></slot>
-                    </div>
-                    <div class="egw_fw_app__aside_content">
-                        <slot name="left"><span class="placeholder">left</span></slot>
-                    </div>
+            <main class="egw_fw_app__main" part="main" aria-label="${this.name}" tabindex="0">
+                <sl-split-panel class="egw_fw_app__outerSplit" primary="start" position-in-pixels="${leftWidth}">
+                    <aside slot="start" part="left" class=${leftClassMap}>
+                        <div class="egw_fw_app__aside_header header">
+                            <slot name="left-header"><span class="placeholder">left-header</span></slot>
+                        </div>
+                        <div class="egw_fw_app__aside_content content">
+                            <slot name="left"><span class="placeholder">left</span></slot>
+                        </div>
 
-                    <div class="egw_fw_app__aside_footer">
-                        <slot name="left-footer"><span class="placeholder">left-footer</span></slot>
-                    </div>
-                </aside>
-                <aside class="egw_fw_app__aside egw_fw_app__right" part="right">
-                    <div class="egw_fw_app__aside_header">
-                        <slot name="right-header"><span class="placeholder">right-header</span></slot>
-                    </div>
-                    <div class="egw_fw_app__aside_content">
-                        <slot name="right"><span class="placeholder">right</span></slot>
-                    </div>
-                    <div class="egw_fw_app__aside_footer">
-                        <slot name="right-footer"><span class="placeholder">right-footer</span></slot>
-                    </div>
-                </aside>
-                <header class="egw_fw_app__header" part="content-header">
-                    <slot name="header"><span class="placeholder">header</span></slot>
-                </header>
-                <main class="egw_fw_app__main_content" part="content">
-                <slot><span class="placeholder">main</span></slot>
-                </main>
-                <footer class="egw_fw_app__footer" part="footer">
-                    <slot name="footer"><span class="placeholder">main-footer</span></slot>
-                </footer>
+                        <div class="egw_fw_app__aside_footer footer">
+                            <slot name="left-footer"><span class="placeholder">left-footer</span></slot>
+                        </div>
+                    </aside>
+                    <sl-split-panel slot="end" class="egw_fw_app__innerSplit" primary="start"
+                                    position-in-pixels=${rightWidth || nothing}
+                                    position=${rightWidth == 0 ? "100" : nothing}
+                    >
+                        <header slot="start" class="egw_fw_app__header header" part="content-header">
+                            <slot name="header"><span class="placeholder">header</span></slot>
+                        </header>
+                        <main slot=start" class="egw_fw_app__main_content content" part="content">
+                            <slot><span class="placeholder">main</span></slot>
+                        </main>
+                        <footer slot="start" class="egw_fw_app__footer footer" part="footer">
+                            <slot name="footer"><span class="placeholder">main-footer</span></slot>
+                        </footer>
+                        <aside slot="end" class="egw_fw_app__aside egw_fw_app__right" part="right">
+                            <div class="egw_fw_app__aside_header header">
+                                <slot name="right-header"><span class="placeholder">right-header</span></slot>
+                            </div>
+                            <div class="egw_fw_app__aside_content content">
+                                <slot name="right"><span class="placeholder">right</span></slot>
+                            </div>
+                            <div class="egw_fw_app__aside_footer footer">
+                                <slot name="right-footer"><span class="placeholder">right-footer</span></slot>
+                            </div>
+                        </aside>
+                    </sl-split-panel>
+                </sl-split-panel>
             </main>
 		`;
 	}