diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index ceb19705a6..58fa2c4a9e 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -68,6 +68,9 @@ function closeDistributionModal() {
     query: {
       ...route.query,
       modal: undefined,
+      grouping: undefined,
+      recent: undefined,
+      lowUsage: undefined,
     },
   })
 
diff --git a/app/composables/useVersionDistribution.ts b/app/composables/useVersionDistribution.ts
index cd4b1b5fcc..bcbc7c0ec9 100644
--- a/app/composables/useVersionDistribution.ts
+++ b/app/composables/useVersionDistribution.ts
@@ -21,9 +21,12 @@ interface ChartDataItem {
  * @returns Reactive state and computed chart data
  */
 export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
-  const groupingMode = ref<VersionGroupingMode>('major')
-  const showRecentOnly = ref(false)
-  const showLowUsageVersions = ref(false)
+  const groupingMode = useRouteQuery<VersionGroupingMode>('grouping', 'major', {
+    transform: (v: string) => (v === 'minor' ? 'minor' : 'major'),
+    mode: 'replace',
+  })
+  const showRecentOnly = useBooleanRouteQuery('recent', false)
+  const showLowUsageVersions = useBooleanRouteQuery('lowUsage', false)
   const pending = ref(false)
   const error = ref<Error | null>(null)
   const data = ref<VersionDistributionResponse | null>(null)
@@ -173,3 +176,13 @@ export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
     fetchDistribution,
   }
 }
+
+function useBooleanRouteQuery(key: string, defaultValue = false) {
+  return useRouteQuery(key, defaultValue ? 'true' : 'false', {
+    transform: {
+      get: (v: string) => v === 'true',
+      set: (v: boolean) => (v ? 'true' : 'false'),
+    },
+    mode: 'replace',
+  })
+}