diff --git a/src/lib/components/namespace-picker.svelte b/src/lib/components/namespace-picker.svelte
index 44136b7329..552af227dc 100644
--- a/src/lib/components/namespace-picker.svelte
+++ b/src/lib/components/namespace-picker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Combobox from '$lib/holocene/combobox/combobox.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -7,14 +7,29 @@
   import type { NamespaceListItem } from '$lib/types/global';
   import { routeForNamespace } from '$lib/utilities/route-for';
 
-  export let namespaceList: NamespaceListItem[] = [];
-  export let namespace: string = $page.params.namespace || $lastUsedNamespace;
-  export let noResultsText = translate('common.no-results');
+  interface Props {
+    namespaceList?: NamespaceListItem[];
+    namespace?: string;
+    noResultsText?: string;
+  }
 
-  $: namespaceExists = namespaceList.some(
-    (namespaceListItem) => namespaceListItem.namespace === namespace,
+  let {
+    namespaceList = [],
+    namespace,
+    noResultsText = translate('common.no-results'),
+  }: Props = $props();
+
+  let value = $derived(
+    namespace ?? (page.params.namespace || $lastUsedNamespace),
+  );
+  let namespaceExists = $derived(
+    namespaceList.some(
+      (namespaceListItem) => namespaceListItem.namespace === value,
+    ),
+  );
+  let href = $derived(
+    value ? routeForNamespace({ namespace: value }) : undefined,
   );
-  $: href = routeForNamespace({ namespace });
 
   const handleNamespaceSelect = (namespaceListItem: NamespaceListItem) => {
     $lastUsedNamespace = namespaceListItem.namespace;
@@ -23,10 +38,10 @@
 </script>
 
 <Combobox
-  label={translate('namespaces.namespace-label', { namespace })}
+  label={translate('namespaces.namespace-label', { namespace: value })}
   {noResultsText}
   labelHidden
-  value={namespace}
+  {value}
   id="namespace-switcher"
   leadingIcon="namespace-switcher"
   options={namespaceList}