diff --git a/src/components/DrumPadWidget.jsx b/src/components/DrumPadWidget.jsx
index ed54575..70be250 100644
--- a/src/components/DrumPadWidget.jsx
+++ b/src/components/DrumPadWidget.jsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { triggerKeyboard } from '../engine/audioEngine.js';
 
 // 4x4 pad layout — each pad maps to a MIDI note
@@ -99,8 +100,9 @@ export default function DrumPadWidget({ moduleId, fullscreen, onCloseFullscreen
         </div>
       </div>
 
-      {fullscreen && (
-        <FullscreenDrumPad moduleId={moduleId} onClose={onCloseFullscreen} />
+      {fullscreen && createPortal(
+        <FullscreenDrumPad moduleId={moduleId} onClose={onCloseFullscreen} />,
+        document.body
       )}
     </>
   );
diff --git a/src/components/KeyboardWidget.jsx b/src/components/KeyboardWidget.jsx
index 8329fd4..63cc5f2 100644
--- a/src/components/KeyboardWidget.jsx
+++ b/src/components/KeyboardWidget.jsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { triggerKeyboard } from '../engine/audioEngine.js';
 import { state } from '../engine/state.js';
 
@@ -167,12 +168,13 @@ export default function KeyboardWidget({ moduleId, fullscreen, onCloseFullscreen
         </div>
       </div>
 
-      {fullscreen && (
+      {fullscreen && createPortal(
         <FullscreenPiano
           moduleId={moduleId}
           initialOctave={octave}
           onClose={onCloseFullscreen}
-        />
+        />,
+        document.body
       )}
     </>
   );