diff --git a/packages/renderer/src/PreferencesNavigation.svelte b/packages/renderer/src/PreferencesNavigation.svelte
index 48369392296..4142ef524ac 100644
--- a/packages/renderer/src/PreferencesNavigation.svelte
+++ b/packages/renderer/src/PreferencesNavigation.svelte
@@ -49,17 +49,9 @@ onMount(async () => {
     </div>
   </div>
   <div class="h-full overflow-hidden hover:overflow-y-auto" style="margin-bottom:auto">
-    <SettingsNavItem title="Resources" href="/preferences/resources" bind:meta="{meta}" />
-
-    <SettingsNavItem title="Proxy" href="/preferences/proxies" bind:meta="{meta}" />
-
-    <SettingsNavItem title="Registries" href="/preferences/registries" bind:meta="{meta}" />
-
-    <SettingsNavItem title="Authentication" href="/preferences/authentication-providers" bind:meta="{meta}" />
-
-    <SettingsNavItem title="CLI Tools" href="/preferences/cli-tools" bind:meta="{meta}" />
-
-    <SettingsNavItem title="Kubernetes" href="/preferences/kubernetes-contexts" bind:meta="{meta}" />
+    {#each [{ title: 'Resources', href: '/preferences/resources' }, { title: 'Proxy', href: '/preferences/proxies' }, { title: 'Registries', href: '/preferences/registries' }, { title: 'Authentication', href: '/preferences/authentication-providers' }, { title: 'CLI Tools', href: '/preferences/cli-tools' }, { title: 'Kubernetes', href: '/preferences/kubernetes-contexts' }] as navItem}
+      <SettingsNavItem title="{navItem.title}" href="{navItem.href}" selected="{meta.url === navItem.href}" />
+    {/each}
 
     <!-- Default configuration properties start -->
     {#each Object.entries(configProperties) as [configSection, configItems]}
@@ -67,7 +59,7 @@ onMount(async () => {
         title="{configSection}"
         href="/preferences/default/{configSection}"
         section="{configItems.length > 0}"
-        bind:meta="{meta}"
+        selected="{meta.url === `/preferences/default/${configSection}`}"
         bind:expanded="{sectionExpanded[configSection]}" />
       {#if sectionExpanded[configSection]}
         {#each sortItems(configItems) as configItem}
@@ -75,7 +67,7 @@ onMount(async () => {
             title="{configItem.title}"
             href="/preferences/default/{configItem.id}"
             child="{true}"
-            bind:meta="{meta}" />
+            selected="{meta.url === `/preferences/default/${configItem.id}`}" />
         {/each}
       {/if}
     {/each}
diff --git a/packages/renderer/src/lib/preferences/SettingsNavItem.spec.ts b/packages/renderer/src/lib/preferences/SettingsNavItem.spec.ts
index 5dc11d386ca..43cec39bede 100644
--- a/packages/renderer/src/lib/preferences/SettingsNavItem.spec.ts
+++ b/packages/renderer/src/lib/preferences/SettingsNavItem.spec.ts
@@ -25,14 +25,14 @@ import { expect, test } from 'vitest';
 
 import SettingsNavItem from './SettingsNavItem.svelte';
 
-function renderIt(title: string, href: string, meta: any, section?: boolean, child?: boolean): void {
-  render(SettingsNavItem, { title: title, href: href, meta: meta, section: section, child: child });
+function renderIt(title: string, href: string, selected?: boolean, section?: boolean, child?: boolean): void {
+  render(SettingsNavItem, { title: title, href: href, selected: selected, section: section, child: child });
 }
 
 test('Expect correct role and href', async () => {
   const title = 'Resources';
   const href = '/test';
-  renderIt(title, href, { url: href });
+  renderIt(title, href, true);
 
   const element = screen.getByLabelText(title);
   expect(element).toBeInTheDocument();
@@ -42,7 +42,7 @@ test('Expect correct role and href', async () => {
 test('Expect selection styling', async () => {
   const title = 'Resources';
   const href = '/test';
-  renderIt(title, href, { url: href });
+  renderIt(title, href, true);
 
   const element = screen.getByLabelText(title);
   expect(element).toBeInTheDocument();
@@ -52,7 +52,7 @@ test('Expect selection styling', async () => {
 
 test('Expect not to have selection styling', async () => {
   const title = 'Resources';
-  renderIt(title, '/test', { url: '/elsewhere' });
+  renderIt(title, '/test', false);
 
   const element = screen.getByLabelText(title);
   expect(element).toBeInTheDocument();
@@ -64,7 +64,7 @@ test('Expect not to have selection styling', async () => {
 test('Expect child styling', async () => {
   const title = 'Resources';
   const href = '/test';
-  renderIt(title, href, { url: href }, false, true);
+  renderIt(title, href, true, false, true);
 
   const element = screen.getByLabelText(title);
   expect(element).toBeInTheDocument();
@@ -75,7 +75,7 @@ test('Expect child styling', async () => {
 test('Expect section styling', async () => {
   const title = 'Extensions';
   const href = '/test';
-  renderIt(title, href, { url: href }, true, false);
+  renderIt(title, href, true, true, false);
 
   const element = screen.getByLabelText(title);
   expect(element).toBeInTheDocument();
@@ -88,7 +88,7 @@ test('Expect section styling', async () => {
 test('Expect sections expand', async () => {
   const title = 'Extensions';
   const href = '/test';
-  renderIt(title, href, { url: href }, true, false);
+  renderIt(title, href, true, true, false);
 
   const element = screen.getByLabelText(title);
   expect(element).toBeInTheDocument();
diff --git a/packages/renderer/src/lib/preferences/SettingsNavItem.svelte b/packages/renderer/src/lib/preferences/SettingsNavItem.svelte
index 33b456b7f62..5cef34432dc 100644
--- a/packages/renderer/src/lib/preferences/SettingsNavItem.svelte
+++ b/packages/renderer/src/lib/preferences/SettingsNavItem.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
-import type { TinroRouteMeta } from 'tinro';
-
 export let title: string;
 export let href: string;
-export let meta: TinroRouteMeta;
 export let section = false;
 export let expanded = false;
 export let child = false;
-
-let selected: boolean;
-$: selected = meta.url === href;
+export let selected: boolean = false;
 
 function rotate(node: unknown, { clockwise = true }) {
   return {