diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte
index 29649f93..981e5e19 100644
--- a/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/certificates/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import { goto } from '$app/navigation';
+  import { replaceState } from '$app/navigation';
   import { resolve } from '$app/paths';
   import { CertificatesPage } from '$features/course/pages';
   import * as Page from '@cio/ui/base/page';
@@ -18,9 +18,15 @@
 
   let errors = $state<Record<string, string>>({});
 
-  const certificateActiveTab = $derived.by(() => {
-    const tabInParam = page.url.searchParams.get('tab');
-    return tabInParam === 'settings' ? 'settings' : 'design';
+  function normalizeCertificateTab(tab: string | null) {
+    return tab === 'settings' ? 'settings' : 'design';
+  }
+
+  // replaceState does not update page.url; local state handles tab clicks, this resyncs on navigation.
+  let certificateActiveTab = $state(normalizeCertificateTab(page.url.searchParams.get('tab')));
+
+  $effect.pre(() => {
+    certificateActiveTab = normalizeCertificateTab(page.url.searchParams.get('tab'));
   });
 
   let hasUnsavedChanges = $state(false);
@@ -144,12 +150,17 @@
   }
 
   function handleActiveTabChange(tab: string) {
+    const nextTab = normalizeCertificateTab(tab);
+
+    if (nextTab === certificateActiveTab) {
+      return;
+    }
+
+    certificateActiveTab = nextTab;
+
     const url = new URL(page.url);
-    url.searchParams.set('tab', tab);
-  function handleActiveTabChange(tab: string) {
-    const url = new URL(page.url);
-    url.searchParams.set('tab', tab);
-    replaceState(url, {});
+    url.searchParams.set('tab', nextTab);
+    replaceState(resolve(`${url.pathname}${url.search}`, {}), page.state);
   }
 </script>