diff --git a/frontend/src/ui/components/Dialog.tsx b/frontend/src/ui/components/Dialog.tsx
index ae54ecb..7b0d758 100644
--- a/frontend/src/ui/components/Dialog.tsx
+++ b/frontend/src/ui/components/Dialog.tsx
@@ -1,5 +1,7 @@
 import type { Dialog as MduiDialog } from "mdui/components/dialog";
 import React, { useEffect, useRef } from "react"
+import { createPortal } from "react-dom";
+import { id } from "../../utils/utils";
 
 export interface BaseDialogProps {
     onOpenChange: (value: boolean) => void;
@@ -38,5 +40,5 @@ export function MaterialDialog(props: FullDialogProps) {
         };
     }, [dialogRef.current, props.open, props.onOpenChange]);
 
-    return <mdui-dialog {...props} ref={dialogRef} style={{ all: "revert" }} />;
+    return createPortal(<mdui-dialog {...props} ref={dialogRef} />, id("root"));
 }
\ No newline at end of file
diff --git a/frontend/src/ui/components/settings/SettingsDialog.tsx b/frontend/src/ui/components/settings/SettingsDialog.tsx
index d730950..87de20f 100644
--- a/frontend/src/ui/components/settings/SettingsDialog.tsx
+++ b/frontend/src/ui/components/settings/SettingsDialog.tsx
@@ -11,7 +11,7 @@ export function SettingsDialog({ isOpen, onOpenChange }: DialogProps) {
     };
 
     return (
-        <MaterialDialog close-on-overlay-click close-on-esc fullscreen open={isOpen} onOpenChange={onOpenChange}>
+        <MaterialDialog close-on-overlay-click close-on-esc fullscreen open={isOpen} onOpenChange={onOpenChange} id="settings-dialog">
             <div className="fullscreen-wrapper">
                 <div id="settings-dialog-inner">
                     <div className="header">