diff --git a/packages/new-design/shared/lab/components/header.mjs b/packages/new-design/shared/lab/components/header.mjs
index a6fcfd5d398..ec4ab2de7c3 100644
--- a/packages/new-design/shared/lab/components/header.mjs
+++ b/packages/new-design/shared/lab/components/header.mjs
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
-import { ThemePicker } from 'shared/components/theme-picker.js'
-import { LocalePicker } from 'shared/components/locale-picker.js'
+import { ModalThemePicker } from 'shared/components/modal/theme-picker.mjs'
+import { ModalLocalePicker } from 'shared/components/modal/locale-picker.mjs'
 import { CloseIcon, MenuIcon, HelpIcon, DocsIcon } from 'shared/components/icons/close.js'
 import { Ribbon } from 'shared/components/ribbon.js'
 import { WordMark } from 'shared/components/wordmark.js'
@@ -71,8 +71,8 @@ export const Header = ({ app }) => {
             </div>
           </div>
           <div className="hidden md:flex flex-row items-center gap-2">
-            <ThemePicker app={app} />
-            <LocalePicker app={app} />
+            <ModalThemePicker app={app} />
+            <ModalLocalePicker app={app} />
           </div>
         </div>
       </div>
diff --git a/packages/new-design/shared/lab/components/layouts/lab.mjs b/packages/new-design/shared/lab/components/layouts/lab.mjs
index 5c1a709259d..67c1de7ee7f 100644
--- a/packages/new-design/shared/lab/components/layouts/lab.mjs
+++ b/packages/new-design/shared/lab/components/layouts/lab.mjs
@@ -1,11 +1,11 @@
-import { ThemePicker } from 'shared/components/theme-picker.mjs'
-import { LocalePicker } from 'shared/components/locale-picker.mjs'
+import { ModalThemePicker } from 'shared/components/modal/theme-picker.mjs'
+import { ModalLocalePicker } from 'shared/components/modal/locale-picker.mjs'
 
 export const BeforeNav = ({ app }) => (
   <>
     <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2">
-      <ThemePicker app={app} />
-      <LocalePicker app={app} />
+      <ModalThemePicker app={app} />
+      <ModalLocalePicker app={app} />
     </div>
     <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2"></div>
   </>
diff --git a/sites/lab/components/layouts/lab.mjs b/sites/lab/components/layouts/lab.mjs
index 0acaf114474..f05043fe66f 100644
--- a/sites/lab/components/layouts/lab.mjs
+++ b/sites/lab/components/layouts/lab.mjs
@@ -1,13 +1,13 @@
-import { ThemePicker } from 'shared/components/theme-picker/index.mjs'
-import { LocalePicker } from 'shared/components/locale-picker/index.mjs'
+import { ModalThemePicker } from 'shared/components/modal/theme-picker.mjs'
+import { ModalLocalePicker } from 'shared/components/modal/locale-picker.mjs'
 
 export const ns = ['']
 
 export const BeforeNav = ({ app }) => (
   <>
     <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2">
-      <ThemePicker app={app} />
-      <LocalePicker app={app} />
+      <ModalThemePicker app={app} />
+      <ModalLocalePicker app={app} />
     </div>
     <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2"></div>
   </>