diff --git a/packages/app/src/app/main.tsx b/packages/app/src/app/main.tsx
index 33c1e0f5..46a4340f 100644
--- a/packages/app/src/app/main.tsx
+++ b/packages/app/src/app/main.tsx
@@ -31,6 +31,8 @@ import { FilterEditor } from '@/components/editors/FilterEditor'
 import { useUI, useIO, useTheme, useMonitor } from '@/services'
 import { useRenderLoop } from '@/services/renderer'
 import { useDynamicWorkflows } from '@/services/editors/workflow-editor/useDynamicWorkflows'
+
+import { useQueryStringLoader } from '@/components/toolbars/top-menu/file/useQueryStringLoader'
 import { useSetupIframeOnce } from './embed/useSetupIframeOnce'
 
 export enum ClapperIntegrationMode {
@@ -54,6 +56,8 @@ function MainContent({ mode }: { mode: ClapperIntegrationMode }) {
 
   const isIframe = mode === ClapperIntegrationMode.IFRAME
 
+  useQueryStringLoader()
+
   // this has to be done at the root of the app, that way it can
   // perform its routine even when the monitor component is hidden
   useRenderLoop()
diff --git a/packages/app/src/components/toolbars/top-menu/file/index.tsx b/packages/app/src/components/toolbars/top-menu/file/index.tsx
index 91a7303b..d355a4fe 100644
--- a/packages/app/src/components/toolbars/top-menu/file/index.tsx
+++ b/packages/app/src/components/toolbars/top-menu/file/index.tsx
@@ -21,12 +21,6 @@ import { newClap } from '@aitube/clap'
 import { getDemoGame } from '@/experiments/samples/demo'
 
 export function TopMenuFile() {
-  const { clapUrl } = useQueryStringParams({
-    // clapUrl: `/samples/test.clap`,
-    // clapUrl: `/samples/Afterglow%20v10%20X%20Rewrite%20Bryan%20E.%20Harris%202023.clap`,
-    clapUrl: '',
-  })
-
   const isTimelineLoading: boolean = useTimeline((s) => s.isLoading)
   const clap = useTimeline((s) => s.clap)
   const setClap = useTimeline((s) => s.setClap)
@@ -49,16 +43,6 @@ export function TopMenuFile() {
   const showWelcomeScreen = useUI((s) => s.showWelcomeScreen)
   const setShowWelcomeScreen = useUI((s) => s.setShowWelcomeScreen)
 
-  useEffect(() => {
-    ;(async () => {
-      if (!clapUrl) {
-        console.log('No clap URL provided')
-        return
-      }
-      await openClapUrl(clapUrl)
-    })()
-  }, [openClapUrl, clapUrl])
-
   // const setShowSettings = useUISettings(s => s.setShowSettings)
   useHotkeys('ctrl+o', () => openFilePicker(), { preventDefault: true }, [])
   useHotkeys('meta+o', () => openFilePicker(), { preventDefault: true }, [])
diff --git a/packages/app/src/components/toolbars/top-menu/file/useQueryStringLoader.ts b/packages/app/src/components/toolbars/top-menu/file/useQueryStringLoader.ts
new file mode 100644
index 00000000..70819058
--- /dev/null
+++ b/packages/app/src/components/toolbars/top-menu/file/useQueryStringLoader.ts
@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { useQueryStringParams } from '@/lib/hooks'
+import { useIO } from '@/services'
+
+export function useQueryStringLoader() {
+  const { clapUrl } = useQueryStringParams({
+    // clapUrl: `/samples/test.clap`,
+    // clapUrl: `/samples/Afterglow%20v10%20X%20Rewrite%20Bryan%20E.%20Harris%202023.clap`,
+    clapUrl: '',
+  })
+  const openClapUrl = useIO((s) => s.openClapUrl)
+
+  useEffect(() => {
+    ;(async () => {
+      if (!clapUrl) {
+        console.log('No clap URL provided')
+        return
+      }
+      await openClapUrl(clapUrl)
+    })()
+  }, [openClapUrl, clapUrl])
+
+}
\ No newline at end of file