diff --git a/frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte b/frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte
new file mode 100644
index 0000000000..6ff5791245
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { getContext, onDestroy } from 'svelte'
+	import { initConfig, initOutput } from '../../editor/appUtils'
+	import type {
+		AppViewerContext,
+		ComponentCustomCSS,
+		ListContext,
+		ListInputs,
+		RichConfigurations
+	} from '../../types'
+	import { initCss } from '../../utils'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
+	import ResolveStyle from '../helpers/ResolveStyle.svelte'
+	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
+
+	export let id: string
+	export let configuration: RichConfigurations
+	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
+	export let customCss: ComponentCustomCSS<'userresourcecomponent'> | undefined = undefined
+	export let render: boolean
+
+	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
+
+	let resolvedConfig = initConfig(
+		components['userresourcecomponent'].initialData.configuration,
+		configuration
+	)
+
+	const iterContext = getContext<ListContext>('ListWrapperContext')
+	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
+
+	let outputs = initOutput($worldStore, id, {
+		result: undefined as string | undefined
+	})
+
+	let value: string | undefined = outputs.result.peak()?.replace('$res:', '')
+
+	value && assignValue(outputs.result.peak())
+
+	onDestroy(() => {
+		listInputs?.remove(id)
+	})
+
+	$componentControl[id] = {
+		setValue(nvalue: string) {
+			value = nvalue
+		}
+	}
+
+	function assignValue(value: string) {
+		let nval
+		if (!value || value === '') {
+			nval = undefined
+		} else {
+			nval = '$res:' + value
+		}
+		outputs?.result.set(nval)
+		if (iterContext && listInputs) {
+			listInputs.set(id, value)
+		}
+	}
+
+	let css = initCss($app.css?.['userresourcecomponent'], customCss)
+</script>
+
+{#each Object.keys(components['userresourcecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.textinputcomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+{#if render}
+	<AlignWrapper {render} {verticalAlignment}>
+		<div class="relative w-full">
+			<ResourcePicker
+				{value}
+				on:change={(e) => {
+					assignValue(e.detail)
+				}}
+				disabled={resolvedConfig.disabled}
+				resourceType={resolvedConfig.resourceType}
+			/>
+		</div>
+	</AlignWrapper>
+{/if}
diff --git a/frontend/src/lib/navigation.ts b/frontend/src/lib/navigation.ts
index 8a677e5eff..5c140a677e 100644
--- a/frontend/src/lib/navigation.ts
+++ b/frontend/src/lib/navigation.ts
@@ -2,7 +2,7 @@ import { goto as svelteGoto } from '$app/navigation'
 import { base as svelteBase } from '$app/paths'
 
 export function goto(path, options = {}) {
-	if (svelteBase == '') {
+	if (svelteBase == '' || path.startsWith('?')) {
 		return svelteGoto(path, options)
 	} else {
 		const fullPath = path.startsWith(svelteBase) ? path : `${svelteBase}${path}`
@@ -22,9 +22,7 @@ export async function setQuery(
 		url.searchParams.delete(key)
 	}
 
-	await goto(
-		currentHash
-			? `?${url.searchParams.toString()}${currentHash}`
-			: `?${url.searchParams.toString()}`
-	)
+	let searchParams = url.searchParams.toString()
+
+	await goto(currentHash ? `?${searchParams}${currentHash}` : `?${searchParams}`)
 }