diff --git a/package.json b/package.json
index 6820bb2..5c9a82f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cameleer/design-system",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
diff --git a/src/design-system/composites/DetailPanel/DetailPanel.tsx b/src/design-system/composites/DetailPanel/DetailPanel.tsx
index 0b0ecef..e5dfe04 100644
--- a/src/design-system/composites/DetailPanel/DetailPanel.tsx
+++ b/src/design-system/composites/DetailPanel/DetailPanel.tsx
@@ -1,4 +1,5 @@
 import { useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
 import styles from './DetailPanel.module.css'
 
 interface Tab {
@@ -22,7 +23,7 @@ export function DetailPanel({ open, onClose, title, tabs, children, actions, cla
 
   const activeContent = tabs?.find((t) => t.value === activeTab)?.content
 
-  return (
+  const panel = (
     <aside
       className={`${styles.panel} ${open ? styles.open : ''} ${className ?? ''}`}
       aria-hidden={!open}
@@ -65,4 +66,8 @@ export function DetailPanel({ open, onClose, title, tabs, children, actions, cla
       )}
     </aside>
   )
+
+  // Portal to AppShell level if target exists, otherwise render in place
+  const portalTarget = document.getElementById('cameleer-detail-panel-root')
+  return portalTarget ? createPortal(panel, portalTarget) : panel
 }
diff --git a/src/design-system/layout/AppShell/AppShell.tsx b/src/design-system/layout/AppShell/AppShell.tsx
index 8083e52..9bee229 100644
--- a/src/design-system/layout/AppShell/AppShell.tsx
+++ b/src/design-system/layout/AppShell/AppShell.tsx
@@ -4,17 +4,18 @@ import type { ReactNode } from 'react'
 interface AppShellProps {
   sidebar: ReactNode
   children: ReactNode
+  /** @deprecated DetailPanel now portals itself automatically. This prop is ignored. */
   detail?: ReactNode
 }
 
-export function AppShell({ sidebar, children, detail }: AppShellProps) {
+export function AppShell({ sidebar, children }: AppShellProps) {
   return (
     <div className={styles.app}>
       {sidebar}
       <div className={styles.main}>
         {children}
       </div>
-      {detail}
+      <div id="cameleer-detail-panel-root" />
     </div>
   )
 }