diff --git a/client/src/core/pages/Personalization/components/FontFamilySelector/components/FontFamilySelectorModal/index.tsx b/client/src/core/pages/Personalization/components/FontFamilySelector/components/FontFamilySelectorModal/index.tsx
index 7ac660d54..ccdb9c621 100644
--- a/client/src/core/pages/Personalization/components/FontFamilySelector/components/FontFamilySelectorModal/index.tsx
+++ b/client/src/core/pages/Personalization/components/FontFamilySelector/components/FontFamilySelectorModal/index.tsx
@@ -107,7 +107,7 @@ function FontFamilySelectorModal({ onClose }: { onClose: () => void }) {
         </Listbox>
         <SearchInput
           namespace="core.personalization"
-          searchTarget="fontFamily.inputs.fontFamily"
+          searchTarget="fontFamily.items.fontFamily"
           setValue={setSearchQuery}
           value={searchQuery}
         />
diff --git a/client/src/core/routes/components/RootLayout.tsx b/client/src/core/routes/components/RootLayout.tsx
index 645ce554e..f27f46a3c 100644
--- a/client/src/core/routes/components/RootLayout.tsx
+++ b/client/src/core/routes/components/RootLayout.tsx
@@ -1,4 +1,4 @@
-import { ErrorScreen } from 'lifeforge-ui'
+import { ErrorScreen, ModalManager } from 'lifeforge-ui'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Outlet } from 'react-router'
 
@@ -16,6 +16,7 @@ function RootLayout() {
           fallback={<ErrorScreen message="An unexpected error occurred." />}
         >
           <Outlet />
+          <ModalManager />
         </ErrorBoundary>
       </main>
     </>
diff --git a/client/src/core/routes/utils/routeBuilder.tsx b/client/src/core/routes/utils/routeBuilder.tsx
index 4fb46d960..2424bf611 100644
--- a/client/src/core/routes/utils/routeBuilder.tsx
+++ b/client/src/core/routes/utils/routeBuilder.tsx
@@ -1,5 +1,5 @@
 import forgeAPI from '@utils/forgeAPI'
-import { LoadingScreen, ModalManager, WithOTP } from 'lifeforge-ui'
+import { LoadingScreen, WithOTP } from 'lifeforge-ui'
 import _ from 'lodash'
 import { Suspense } from 'react'
 import type { RouteObject } from 'react-router'
@@ -56,7 +56,6 @@ export function buildChildRoutes({
               <Component />
             </WithOTP>
           </Suspense>
-          <ModalManager />
         </APIKeyStatusProvider>
       )
     }
diff --git a/packages/lifeforge-ui/src/components/modals/core/components/ModalWrapper.tsx b/packages/lifeforge-ui/src/components/modals/core/components/ModalWrapper.tsx
index 9e59f2cac..3bb3e98b4 100644
--- a/packages/lifeforge-ui/src/components/modals/core/components/ModalWrapper.tsx
+++ b/packages/lifeforge-ui/src/components/modals/core/components/ModalWrapper.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { createPortal } from 'react-dom'
 
 function ModalWrapper({
   isOpen,
@@ -21,7 +22,7 @@ function ModalWrapper({
   zIndex?: number
   onExited?: () => void
 }) {
-  return (
+  return createPortal(
     <div
       ref={modalRef}
       className={clsx(
@@ -49,7 +50,8 @@ function ModalWrapper({
       >
         <div className="p-6">{children}</div>
       </div>
-    </div>
+    </div>,
+    document.getElementById('app') || document.body
   )
 }
 
diff --git a/shared/src/providers/PersonalizationProvider/index.tsx b/shared/src/providers/PersonalizationProvider/index.tsx
index a70ef22f8..5bd8b12b1 100644
--- a/shared/src/providers/PersonalizationProvider/index.tsx
+++ b/shared/src/providers/PersonalizationProvider/index.tsx
@@ -65,7 +65,7 @@ export default function PersonalizationProvider({
     }
   }, [defaultValueOverride])
 
-  const rootElement = defaultValue.rootElement || document.createElement('body')
+  const rootElement = defaultValue.rootElement || document.body
 
   const [fontFamily, setFontFamily] = useState<string>(defaultValue.fontFamily)