diff --git a/frontend/src/components/AppHeading.vue b/frontend/src/components/AppHeading.vue
index 25628b766..b140d5828 100644
--- a/frontend/src/components/AppHeading.vue
+++ b/frontend/src/components/AppHeading.vue
@@ -14,6 +14,7 @@
     <AppLink
       v-if="link"
       :to="'#' + link"
+      :replace="true"
       class="anchor"
       :aria-label="'Link to this section'"
     >
diff --git a/frontend/src/components/AppLink.vue b/frontend/src/components/AppLink.vue
index 016de3cb9..755c0e36f 100644
--- a/frontend/src/components/AppLink.vue
+++ b/frontend/src/components/AppLink.vue
@@ -26,7 +26,7 @@
       ...routeTo,
       state: mapValues(state, (value) => stringify(value)),
     }"
-    :replace="!!routeTo.hash && !routeTo.path"
+    :replace="replace"
   >
     <!-- use vue router component for relative urls -->
     <slot />
@@ -46,6 +46,8 @@ const router = useRouter();
 type Props = {
   /** location to link to */
   to: string | RouteLocationRaw;
+  /** whether to replace url instead of push */
+  replace?: boolean;
   /**
    * state data to attach on navigation. object/array values get stringified.
    * https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
@@ -56,8 +58,9 @@ type Props = {
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  noIcon: false,
+  replace: false,
   state: undefined,
+  noIcon: false,
 });
 
 const slots = useSlots();
diff --git a/frontend/src/components/AppSelectAutocomplete.vue b/frontend/src/components/AppSelectAutocomplete.vue
index ee6588536..31c56d9ba 100644
--- a/frontend/src/components/AppSelectAutocomplete.vue
+++ b/frontend/src/components/AppSelectAutocomplete.vue
@@ -115,7 +115,8 @@ export type Option = {
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
 import { uniqueId } from "lodash";
-import { useFloating, useQuery } from "@/util/composables";
+import { useFloating } from "@/composables/use-floating";
+import { useQuery } from "@/composables/use-query";
 import { wrap } from "@/util/math";
 import AppTextbox from "./AppTextbox.vue";
 
diff --git a/frontend/src/components/AppSelectMulti.vue b/frontend/src/components/AppSelectMulti.vue
index aa96ee828..0c6114b9d 100644
--- a/frontend/src/components/AppSelectMulti.vue
+++ b/frontend/src/components/AppSelectMulti.vue
@@ -146,7 +146,7 @@ export type Options = Option[];
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
 import { isEqual, uniqueId } from "lodash";
-import { useFloating } from "@/util/composables";
+import { useFloating } from "@/composables/use-floating";
 import { wrap } from "@/util/math";
 import type AppButton from "./AppButton.vue";
 
diff --git a/frontend/src/components/AppSelectSingle.vue b/frontend/src/components/AppSelectSingle.vue
index f32f48921..de2988405 100644
--- a/frontend/src/components/AppSelectSingle.vue
+++ b/frontend/src/components/AppSelectSingle.vue
@@ -97,7 +97,7 @@ export type Options = Option[];
 <script setup lang="ts">
 import { nextTick, ref, watch } from "vue";
 import { uniqueId } from "lodash";
-import { useFloating } from "@/util/composables";
+import { useFloating } from "@/composables/use-floating";
 import { wrap } from "@/util/math";
 
 type Props = {
diff --git a/frontend/src/components/AppSelectTags.vue b/frontend/src/components/AppSelectTags.vue
index 5879703fc..464bbbb54 100644
--- a/frontend/src/components/AppSelectTags.vue
+++ b/frontend/src/components/AppSelectTags.vue
@@ -170,7 +170,8 @@ export type Option = {
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
 import { isEqual, uniqBy, uniqueId } from "lodash";
-import { useFloating, useQuery } from "@/util/composables";
+import { useFloating } from "@/composables/use-floating";
+import { useQuery } from "@/composables/use-query";
 import { wrap } from "@/util/math";
 import { copyToClipboard } from "@/util/string";
 import AppInput from "./AppInput.vue";
diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index adfcb0e2e..1bfa96929 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -221,7 +221,7 @@ export type Sort<Key extends string = string> = {
 <script setup lang="ts" generic="Datum extends object">
 import { computed, watch, type VNode } from "vue";
 import { useLocalStorage } from "@vueuse/core";
-import { useScrollable } from "@/util/composables";
+import { useScrollable } from "@/composables/use-scrollable";
 import type { Options } from "./AppSelectMulti.vue";
 import AppSelectMulti from "./AppSelectMulti.vue";
 import AppSelectSingle from "./AppSelectSingle.vue";
diff --git a/frontend/src/components/TheFeedbackForm.vue b/frontend/src/components/TheFeedbackForm.vue
index c7db95efc..3f8726baa 100644
--- a/frontend/src/components/TheFeedbackForm.vue
+++ b/frontend/src/components/TheFeedbackForm.vue
@@ -90,7 +90,7 @@ import parser from "ua-parser-js";
 import { useLocalStorage } from "@vueuse/core";
 import { postFeedback } from "@/api/feedback";
 import AppTextbox from "@/components/AppTextbox.vue";
-import { useQuery } from "@/util/composables";
+import { useQuery } from "@/composables/use-query";
 import { collapse } from "@/util/string";
 
 /** route info */
diff --git a/frontend/src/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index e61355c27..4e835c9e7 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -37,6 +37,7 @@
           v-for="(entry, index) in entries"
           :key="index"
           :to="'#' + entry.id"
+          :replace="true"
           :class="['entry', { active: active === index }]"
           :aria-current="active === index"
           @click="active = index"
diff --git a/frontend/src/composables/use-floating.ts b/frontend/src/composables/use-floating.ts
new file mode 100644
index 000000000..f99ac0c5d
--- /dev/null
+++ b/frontend/src/composables/use-floating.ts
@@ -0,0 +1,60 @@
+import type { CSSProperties, Ref } from "vue";
+import { ref } from "vue";
+import { debounce } from "lodash";
+import { computePosition, flip, shift, size } from "@floating-ui/dom";
+import { useEventListener } from "@vueuse/core";
+
+/** use floating-ui to position dropdown */
+
+export const useFloating = (
+  anchor: Ref<HTMLElement | undefined>,
+  dropdown: Ref<HTMLElement | undefined>,
+  fit = false,
+): { calculate: () => Promise<void>; style: Ref<CSSProperties> } => {
+  /** style of dropdown */
+  const style = ref<CSSProperties>({
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    minWidth: "0px",
+  });
+
+  /** floating-ui options */
+  const options = {
+    middleware: [
+      flip(),
+      shift({ padding: 5 }),
+      size({
+        /** update min width based on target width */
+        apply: ({ rects }) => {
+          if (fit) style.value.width = rects.reference.width + "px";
+          else style.value.minWidth = rects.reference.width + "px";
+        },
+      }),
+    ],
+  };
+
+  /** func to recompute position on command */
+  async function calculate() {
+    /** make sure we have needed element references */
+    if (!anchor.value || !dropdown.value) return;
+
+    /** use floating-ui to compute position of dropdown */
+    const { x, y } = await computePosition(
+      anchor.value,
+      dropdown.value,
+      options,
+    );
+
+    /** set style from position */
+    style.value.left = x + "px";
+    style.value.top = y + "px";
+  }
+
+  /** automatically run calculate on reflow events */
+  const debounced = debounce(calculate, 100);
+  useEventListener(window, "scroll", debounced);
+  useEventListener(window, "resize", debounced);
+
+  return { calculate, style };
+};
diff --git a/frontend/src/composables/use-param.ts b/frontend/src/composables/use-param.ts
new file mode 100644
index 000000000..0d78142a6
--- /dev/null
+++ b/frontend/src/composables/use-param.ts
@@ -0,0 +1,141 @@
+import { ref, shallowRef, watch } from "vue";
+import { type Router } from "vue-router";
+import { isEqual, round } from "lodash";
+
+/**
+ * single "reactive" object url to sync with "raw" url. needed so we can batch
+ * together multiple synchronous param/hash sets into a single push/replace
+ * history entry. vue-router does batch together multiple synchronous
+ * pushes/replaces, but does not accommodate keeping/merging params, because
+ * currentRoute object only updates at end of batch.
+ */
+export const url = ref<{ [key: string]: string }>({});
+
+/** connect to router */
+export function initRouter(router: Router) {
+  /** flag to check if router.push/replace just occurred */
+  let justPushed = false;
+
+  /** when reactive url changes */
+  watch(
+    url,
+    () => {
+      const from = router.currentRoute.value;
+      /** update url to include params. preserve hash. */
+      const to = { query: url.value, hash: from.hash };
+
+      if (!isEqual(url.value, router.currentRoute.value.query)) {
+        /** push/replace based on mode */
+        router[mode === "replace" ? "replace" : "push"](to);
+        justPushed = true;
+      }
+    },
+    { deep: true, immediate: true },
+  );
+
+  /** after raw url changes */
+  router.afterEach((to) => {
+    /**
+     * if raw url just changed due to url object change, don't change url object
+     * again
+     */
+    if (justPushed) {
+      justPushed = false;
+      return;
+    }
+
+    /** delete params in url object */
+    for (const key of Object.keys(url.value))
+      if (!to.query[key]) delete url.value[key];
+
+    /** add/change params in url object */
+    for (const [key, value] of Object.entries(to.query))
+      if (typeof value === "string") url.value[key] = value;
+  });
+}
+
+/** how to update tab history */
+const mode: "push" | "replace" = "push";
+
+/** reactive variable 2-way-synced with param in url */
+export function useParam<T>(
+  key: string,
+  { parse, stringify }: Param<T>,
+  initialValue: T,
+) {
+  /** https://github.com/vuejs/composition-api/issues/483 */
+  /** reactive "local" var that should act like slice of reactive "full" url */
+  const variable = shallowRef(initialValue);
+
+  watch(
+    /** when param in full url object changes */
+    () => url.value[key],
+    () => {
+      /**
+       * get updated value from url object. if key no longer there (e.g. user
+       * went back to url without it), reset to initial value.
+       */
+      const value = url.value[key] || stringify(initialValue);
+      /**
+       * stringify process is sometimes "lossy" (e.g. rounding decimal places),
+       * so compare values after that process
+       */
+      if (value === stringify(variable.value)) return;
+      /** convert raw url string value to actual var value */
+      variable.value = parse(value);
+    },
+    { immediate: true },
+  );
+
+  watch(
+    /** when local var changes */
+    variable,
+    () => {
+      /** convert actual var value to string for url */
+      const value = stringify(variable.value);
+      /** set var value */
+      if (value) url.value[key] = value;
+      /** if "empty", such as empty string or array, delete param from url */ else
+        delete url.value[key];
+    },
+    /**
+     * no "immediate", so url doesn't update until var changes from initial
+     * value (presumably from user interaction)
+     */
+  );
+
+  return variable;
+}
+
+/** generic parameter type, with methods to encode/decode to/from string (url) */
+export type Param<T> = {
+  parse: (value: string) => T;
+  stringify: (value: T) => string;
+};
+
+/** treat param as string */
+export const stringParam = (): Param<string> => ({
+  parse: (value) => value,
+  stringify: (value) => value,
+});
+
+/** treat param as number */
+export const numberParam = (precision?: number): Param<number> => ({
+  parse: (value) => Number(value) || 0,
+  stringify: (value) => String(round(value || 0, precision)),
+});
+
+/** treat param as boolean */
+export const booleanParam = (
+  type: "number" | "string" = "number",
+): Param<boolean> => ({
+  parse: (value) =>
+    value.toLowerCase() === (type === "string" ? "true" : "1") ? true : false,
+  stringify: (value) => (type === "string" ? String(value) : value ? "1" : "0"),
+});
+
+/** higher-order array param of other params */
+export const arrayParam = <T>(param: Param<T>): Param<T[]> => ({
+  parse: (value) => value.split(",").map(param.parse),
+  stringify: (value) => value.map(param.stringify).join(","),
+});
diff --git a/frontend/src/composables/use-query.ts b/frontend/src/composables/use-query.ts
new file mode 100644
index 000000000..74613ee13
--- /dev/null
+++ b/frontend/src/composables/use-query.ts
@@ -0,0 +1,82 @@
+import type { Ref } from "vue";
+import { ref } from "vue";
+
+/**
+ * inspired by tanstack-query. simple query manager/wrapper for making queries
+ * in components. reduces repetitive boilerplate code for loading/error states,
+ * try/catch blocks, de-duplicating requests, etc.
+ */
+export const useQuery = <Data, Args extends unknown[]>(
+  /**
+   * main async func that returns data. should be side-effect free to avoid race
+   * conditions, because multiple can be running at same time.
+   */
+  func: (...args: Args) => Promise<Data>,
+  /** default value used for data before done loading and on error. */
+  defaultValue: Data,
+  /**
+   * func to run on success. use for side effects. only gets called on latest of
+   * concurrent runs.
+   */
+  onSuccess?: (
+    /** response data */
+    response: Data,
+    /** props passed to main func */
+    props: Args,
+  ) => void,
+) => {
+  /** query state/status */
+  const isLoading = ref(false);
+  const isError = ref(false);
+  const isSuccess = ref(false);
+
+  /** query results */
+  const data = ref<Data>(defaultValue) as Ref<Data>;
+  /** https://github.com/vuejs/composition-api/issues/483 */
+
+  /** latest query id, unique to this useQuery instance */
+  let latest;
+
+  /** wrapped query function */
+  async function query(...args: Args): Promise<void> {
+    try {
+      /** unique id for current run */
+      const current = Symbol();
+      latest = current;
+
+      /** reset state */
+      isLoading.value = true;
+      isError.value = false;
+      isSuccess.value = false;
+      data.value = defaultValue;
+
+      /** run provided function */
+      const result = await func(...args);
+
+      /** if this run still the latest */
+      if (current === latest) {
+        /** assign results to data */
+        data.value = result;
+
+        /** update state */
+        isLoading.value = false;
+        isSuccess.value = true;
+
+        /** on success callback */
+        if (onSuccess) onSuccess(result, args);
+      } else {
+        /** otherwise, log special "stale" error */
+        console.error("Stale query");
+      }
+    } catch (error) {
+      /** log error */
+      console.error(error);
+
+      /** update state */
+      isError.value = true;
+      isLoading.value = false;
+    }
+  }
+
+  return { query, data, isLoading, isError, isSuccess };
+};
diff --git a/frontend/src/composables/use-scrollable.ts b/frontend/src/composables/use-scrollable.ts
new file mode 100644
index 000000000..d9170baa2
--- /dev/null
+++ b/frontend/src/composables/use-scrollable.ts
@@ -0,0 +1,41 @@
+import { nextTick, onMounted, ref, watchEffect } from "vue";
+import {
+  useMutationObserver,
+  useResizeObserver,
+  useScroll,
+} from "@vueuse/core";
+
+/** add classes to element when scrollable for styling */
+export const useScrollable = () => {
+  const element = ref<HTMLElement>();
+  const { arrivedState } = useScroll(element);
+
+  /** set css class on/off */
+  function setClass(_class: string, on: boolean) {
+    element.value?.classList?.[on ? "remove" : "add"](_class);
+  }
+
+  /** set classes */
+  watchEffect(() => {
+    if (!element.value) return;
+    const { left, right } = arrivedState;
+    setClass("scrollable-left", left);
+    setClass("scrollable-right", right);
+  });
+
+  /** force table scroll to update */
+  async function updateScroll() {
+    await nextTick();
+    element.value?.dispatchEvent(new Event("scroll"));
+  }
+
+  /** update scroll on some events that might affect element's scrollWidth/Height */
+  onMounted(updateScroll);
+  useResizeObserver(element, updateScroll);
+  useMutationObserver(element, updateScroll, {
+    childList: true,
+    subtree: true,
+  });
+
+  return { ref: element, arrivedState, updateScroll };
+};
diff --git a/frontend/src/pages/PageHome.vue b/frontend/src/pages/PageHome.vue
index 453c8407e..d32802606 100644
--- a/frontend/src/pages/PageHome.vue
+++ b/frontend/src/pages/PageHome.vue
@@ -192,7 +192,7 @@ import AppHighlight from "@/components/AppHighlight.vue";
 import AppPost from "@/components/AppPost.vue";
 import AppTabs from "@/components/AppTabs.vue";
 import AppTile from "@/components/AppTile.vue";
-import { useQuery } from "@/util/composables";
+import { useQuery } from "@/composables/use-query";
 import { formatNumber } from "@/util/string";
 import tabs from "./explore/tabs.json";
 import TabSearch from "./explore/TabSearch.vue";
diff --git a/frontend/src/pages/about/PagePublications.vue b/frontend/src/pages/about/PagePublications.vue
index 3785537da..26c75d805 100644
--- a/frontend/src/pages/about/PagePublications.vue
+++ b/frontend/src/pages/about/PagePublications.vue
@@ -39,7 +39,9 @@
         v-for="(group, index) in publications.publications"
         :key="index"
       >
-        <AppLink :to="'#' + group.year">{{ group.year }}</AppLink>
+        <AppLink :to="'#' + group.year" :replace="true">{{
+          group.year
+        }}</AppLink>
         <span v-if="index !== publications.publications.length - 1"> · </span>
       </template>
     </p>
diff --git a/frontend/src/pages/about/PageTeam.vue b/frontend/src/pages/about/PageTeam.vue
index 270371cd3..2efc79e8b 100644
--- a/frontend/src/pages/about/PageTeam.vue
+++ b/frontend/src/pages/about/PageTeam.vue
@@ -18,6 +18,7 @@
         v-for="(group, index) in team"
         :key="index"
         :to="'#' + kebabCase(group.name)"
+        :replace="true"
         >{{ group.name }}</AppLink
       >
     </div>
diff --git a/frontend/src/pages/explore/PagePhenogrid.vue b/frontend/src/pages/explore/PagePhenogrid.vue
index 5def598e8..ff7d1b227 100644
--- a/frontend/src/pages/explore/PagePhenogrid.vue
+++ b/frontend/src/pages/explore/PagePhenogrid.vue
@@ -27,7 +27,7 @@ import { useEventListener } from "@vueuse/core";
 import { compareSetToGroup, type Group } from "@/api/phenotype-explorer";
 import ThePhenogrid from "@/components/ThePhenogrid.vue";
 import TheSnackbar from "@/components/TheSnackbar.vue";
-import { useQuery } from "@/util/composables";
+import { useQuery } from "@/composables/use-query";
 
 /** route info */
 const route = useRoute();
diff --git a/frontend/src/pages/explore/TabPhenotypeExplorer.vue b/frontend/src/pages/explore/TabPhenotypeExplorer.vue
index 23e8984ba..496343c21 100644
--- a/frontend/src/pages/explore/TabPhenotypeExplorer.vue
+++ b/frontend/src/pages/explore/TabPhenotypeExplorer.vue
@@ -246,6 +246,7 @@ import {
   compareSetToSet,
   getPhenotypes,
   groups,
+  type Group,
 } from "@/api/phenotype-explorer";
 import AppAlert from "@/components/AppAlert.vue";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
@@ -256,9 +257,10 @@ import AppSelectTags from "@/components/AppSelectTags.vue";
 import AppTabs from "@/components/AppTabs.vue";
 import ThePhenogrid from "@/components/ThePhenogrid.vue";
 import { snackbar } from "@/components/TheSnackbar.vue";
+import { arrayParam, useParam, type Param } from "@/composables/use-param";
+import { useQuery } from "@/composables/use-query";
 import { appendToBody } from "@/global/tooltip";
 import { scrollTo } from "@/router";
-import { useQuery } from "@/util/composables";
 import { parse } from "@/util/object";
 import examples from "./phenotype-explorer.json";
 
@@ -287,16 +289,22 @@ type GeneratedFrom = {
   options?: Options;
 };
 
+/** treat param as select option */
+const optionParam = (): Param<Option> => ({
+  parse: (value) => ({ id: value }),
+  stringify: (value) => String(value.id),
+});
+
 /** first set of phenotypes */
-const aPhenotypes = ref<Options>([]);
+const aPhenotypes = useParam<Options>("a-set", arrayParam(optionParam()), []);
 /** "generated from" helpers after selecting gene or disease */
 const aGeneratedFrom = ref<GeneratedFrom>({});
 /** selected mode of second set */
-const bMode = ref(bModeOptions[0]);
+const bMode = useParam("b-mode", optionParam(), bModeOptions[0]);
 /** selected group for second set */
-const bGroup = ref(bGroupOptions[0]);
+const bGroup = useParam("b-group", optionParam(), bGroupOptions[0]);
 /** second set of phenotypes */
-const bPhenotypes = ref<Options>([]);
+const bPhenotypes = useParam<Options>("b-set", arrayParam(optionParam()), []);
 /** "generated from" helpers after selecting gene or disease */
 const bGeneratedFrom = ref<GeneratedFrom>({});
 
@@ -398,7 +406,7 @@ const {
 
     return await compareSetToGroup(
       aPhenotypes.value.map(({ id }) => id),
-      bGroup.value.id,
+      bGroup.value.id as Group,
     );
   },
 
diff --git a/frontend/src/pages/explore/TabSearch.vue b/frontend/src/pages/explore/TabSearch.vue
index 8a6f16555..c6e3b9300 100644
--- a/frontend/src/pages/explore/TabSearch.vue
+++ b/frontend/src/pages/explore/TabSearch.vue
@@ -121,9 +121,9 @@ import AppSelectAutocomplete from "@/components/AppSelectAutocomplete.vue";
 import type { Options as MultiOptions } from "@/components/AppSelectMulti.vue";
 import AppSelectMulti from "@/components/AppSelectMulti.vue";
 import AppWrapper from "@/components/AppWrapper.vue";
+import { useQuery } from "@/composables/use-query";
 import { deleteEntry, history } from "@/global/history";
 import { appTitle } from "@/global/meta";
-import { useQuery } from "@/util/composables";
 import { waitFor } from "@/util/dom";
 
 type Props = {
@@ -191,7 +191,7 @@ function onDelete(value: Option) {
   deleteEntry(value);
 }
 
-/** when user changes selected ƒacet options */
+/** when user changes selected facet options */
 function onSelectedChange() {
   page.value = 0;
   runGetSearch(false);
diff --git a/frontend/src/pages/explore/TabTextAnnotator.vue b/frontend/src/pages/explore/TabTextAnnotator.vue
index 5a1da0ffc..24289feac 100644
--- a/frontend/src/pages/explore/TabTextAnnotator.vue
+++ b/frontend/src/pages/explore/TabTextAnnotator.vue
@@ -85,8 +85,8 @@ import { annotateText } from "@/api/text-annotator";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import AppTextbox from "@/components/AppTextbox.vue";
 import AppUpload from "@/components/AppUpload.vue";
+import { useQuery } from "@/composables/use-query";
 import { appendToBody } from "@/global/tooltip";
-import { useQuery } from "@/util/composables";
 import { downloadJson } from "@/util/download";
 import example from "./text-annotator.json";
 
diff --git a/frontend/src/pages/help/PageHelp.vue b/frontend/src/pages/help/PageHelp.vue
index b110e6259..e9f996862 100644
--- a/frontend/src/pages/help/PageHelp.vue
+++ b/frontend/src/pages/help/PageHelp.vue
@@ -76,7 +76,7 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { getUptimes } from "@/api/uptime";
-import { useQuery } from "@/util/composables";
+import { useQuery } from "@/composables/use-query";
 
 /** list of status checks to display */
 const {
diff --git a/frontend/src/pages/node/AssociationsSummary.vue b/frontend/src/pages/node/AssociationsSummary.vue
index 9de8b4138..739a6e8aa 100644
--- a/frontend/src/pages/node/AssociationsSummary.vue
+++ b/frontend/src/pages/node/AssociationsSummary.vue
@@ -138,8 +138,8 @@ import {
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import AppPredicateBadge from "@/components/AppPredicateBadge.vue";
 import type { Option } from "@/components/AppSelectSingle.vue";
+import { useQuery } from "@/composables/use-query";
 import type { Breadcrumb } from "@/global/breadcrumbs";
-import { useQuery } from "@/util/composables";
 
 type Props = {
   /** current node */
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index 9da7d2b05..2ca77adb6 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -126,8 +126,8 @@ import type { Option } from "@/components/AppSelectSingle.vue";
 import AppTable from "@/components/AppTable.vue";
 import type { Cols, Sort } from "@/components/AppTable.vue";
 import { snackbar } from "@/components/TheSnackbar.vue";
+import { useQuery } from "@/composables/use-query";
 import { getBreadcrumbs } from "@/pages/node/AssociationsSummary.vue";
-import { useQuery } from "@/util/composables";
 
 type Props = {
   /** current node */
diff --git a/frontend/src/pages/node/HistoPheno.vue b/frontend/src/pages/node/HistoPheno.vue
index 506ad3dda..0c22d0012 100644
--- a/frontend/src/pages/node/HistoPheno.vue
+++ b/frontend/src/pages/node/HistoPheno.vue
@@ -24,7 +24,7 @@ import Apex from "vue3-apexcharts";
 import type { ApexOptions } from "apexcharts";
 import { getHistoPheno } from "@/api/histopheno";
 import type { Node } from "@/api/model";
-import { useQuery } from "@/util/composables";
+import { useQuery } from "@/composables/use-query";
 
 /** route info */
 const route = useRoute();
diff --git a/frontend/src/pages/node/PageNode.vue b/frontend/src/pages/node/PageNode.vue
index e7740b430..29f072e08 100644
--- a/frontend/src/pages/node/PageNode.vue
+++ b/frontend/src/pages/node/PageNode.vue
@@ -40,10 +40,10 @@ import { onMounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import { getNode } from "@/api/node";
 import TheTableOfContents from "@/components/TheTableOfContents.vue";
+import { useQuery } from "@/composables/use-query";
 import { addEntry } from "@/global/history";
 import { appDescription, appTitle } from "@/global/meta";
 import SectionBreadcrumbs from "@/pages/node/SectionBreadcrumbs.vue";
-import { useQuery } from "@/util/composables";
 import SectionAssociations from "./SectionAssociations.vue";
 import SectionExtra from "./SectionExtra.vue";
 import SectionHierarchy from "./SectionHierarchy.vue";
diff --git a/frontend/src/pages/node/SectionAssociationDetails.vue b/frontend/src/pages/node/SectionAssociationDetails.vue
index 3c8ec6da1..bf24286b7 100644
--- a/frontend/src/pages/node/SectionAssociationDetails.vue
+++ b/frontend/src/pages/node/SectionAssociationDetails.vue
@@ -53,7 +53,7 @@
       </AppDetail>
 
       <AppDetail title="Provided By" icon="notes-medical">
-        <AppLink :to="association.provided_by_link?.url || ''">
+        <AppLink :to="association.provided_by_link?.url || ''" :replace="true">
           {{ association.provided_by_link?.id || association.provided_by }}
         </AppLink>
       </AppDetail>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 9fe759e93..b4dfabad7 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -4,6 +4,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import { isEmpty, pick } from "lodash";
 import { hideAll } from "tippy.js";
 import AppPlaceholder from "@/components/AppPlaceholder.vue";
+import { initRouter } from "@/composables/use-param";
 import descriptions from "@/router/descriptions.json";
 import { sleep } from "@/util/debug";
 import { waitFor } from "@/util/dom";
@@ -231,6 +232,9 @@ const router = createRouter({
   scrollBehavior,
 });
 
+/** hook up use-param composable to router */
+initRouter(router);
+
 /** close any open tooltips on route change */
 router.beforeEach(() => {
   hideAll();
diff --git a/frontend/src/util/composables.ts b/frontend/src/util/composables.ts
deleted file mode 100644
index 76f195589..000000000
--- a/frontend/src/util/composables.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import type { CSSProperties, Ref } from "vue";
-import { nextTick, onMounted, ref, watchEffect } from "vue";
-import { debounce } from "lodash";
-import { computePosition, flip, shift, size } from "@floating-ui/dom";
-import {
-  useEventListener,
-  useMutationObserver,
-  useResizeObserver,
-  useScroll,
-} from "@vueuse/core";
-
-/**
- * inspired by react-query. simple query manager/wrapper for making queries in
- * components. reduces repetitive boilerplate code for loading/error states,
- * try/catch blocks, de-duplicating requests, etc.
- */
-export const useQuery = <Data, Args extends unknown[]>(
-  /**
-   * main async func that returns data. should be side-effect free to avoid race
-   * conditions, because multiple can be running at same time.
-   */
-  func: (...args: Args) => Promise<Data>,
-  /** default value used for data before done loading and on error. */
-  defaultValue: Data,
-  /**
-   * func to run on success. use for side effects. only gets called on latest of
-   * concurrent runs.
-   */
-  onSuccess?: (
-    /** response data */
-    response: Data,
-    /** props passed to main func */
-    props: Args,
-  ) => void,
-) => {
-  /** query state/status */
-  const isLoading = ref(false);
-  const isError = ref(false);
-  const isSuccess = ref(false);
-
-  /** query results */
-  const data = ref<Data>(defaultValue) as Ref<Data>;
-  /** https://github.com/vuejs/composition-api/issues/483 */
-
-  /** latest query id, unique to this useQuery instance */
-  let latest;
-
-  /** wrapped query function */
-  async function query(...args: Args): Promise<void> {
-    try {
-      /** unique id for current run */
-      const current = Symbol();
-      latest = current;
-
-      /** reset state */
-      isLoading.value = true;
-      isError.value = false;
-      isSuccess.value = false;
-      data.value = defaultValue;
-
-      /** run provided function */
-      const result = await func(...args);
-
-      /** if this run still the latest */
-      if (current === latest) {
-        /** assign results to data */
-        data.value = result;
-
-        /** update state */
-        isLoading.value = false;
-        isSuccess.value = true;
-
-        /** on success callback */
-        if (onSuccess) onSuccess(result, args);
-      } else {
-        /** otherwise, log special "stale" error */
-        console.error("Stale query");
-      }
-    } catch (error) {
-      /** log error */
-      console.error(error);
-
-      /** update state */
-      isError.value = true;
-      isLoading.value = false;
-    }
-  }
-
-  return { query, data, isLoading, isError, isSuccess };
-};
-
-/** use floating-ui to position dropdown */
-export const useFloating = (
-  anchor: Ref<HTMLElement | undefined>,
-  dropdown: Ref<HTMLElement | undefined>,
-  fit = false,
-) => {
-  /** style of dropdown */
-  const style = ref<CSSProperties>({
-    position: "absolute",
-    left: "0px",
-    top: "0px",
-    minWidth: "0px",
-  });
-
-  /** floating-ui options */
-  const options = {
-    middleware: [
-      flip(),
-      shift({ padding: 5 }),
-      size({
-        /** update min width based on target width */
-        apply: ({ rects }) => {
-          if (fit) style.value.width = rects.reference.width + "px";
-          else style.value.minWidth = rects.reference.width + "px";
-        },
-      }),
-    ],
-  };
-
-  /** func to recompute position on command */
-  async function calculate() {
-    /** make sure we have needed element references */
-    if (!anchor.value || !dropdown.value) return;
-
-    /** use floating-ui to compute position of dropdown */
-    const { x, y } = await computePosition(
-      anchor.value,
-      dropdown.value,
-      options,
-    );
-
-    /** set style from position */
-    style.value.left = x + "px";
-    style.value.top = y + "px";
-  }
-
-  /** automatically run calculate on reflow events */
-  const debounced = debounce(calculate, 100);
-  useEventListener(window, "scroll", debounced);
-  useEventListener(window, "resize", debounced);
-
-  return { calculate, style };
-};
-
-/** add classes to element when scrollable for styling */
-export const useScrollable = () => {
-  const element = ref<HTMLElement>();
-  const { arrivedState } = useScroll(element);
-
-  /** set css class on/off */
-  function setClass(_class: string, on: boolean) {
-    element.value?.classList?.[on ? "remove" : "add"](_class);
-  }
-
-  /** set classes */
-  watchEffect(() => {
-    if (!element.value) return;
-    const { left, right } = arrivedState;
-    setClass("scrollable-left", left);
-    setClass("scrollable-right", right);
-  });
-
-  /** force table scroll to update */
-  async function updateScroll() {
-    await nextTick();
-    element.value?.dispatchEvent(new Event("scroll"));
-  }
-
-  /** update scroll on some events that might affect element's scrollWidth/Height */
-  onMounted(updateScroll);
-  useResizeObserver(element, updateScroll);
-  useMutationObserver(element, updateScroll, {
-    childList: true,
-    subtree: true,
-  });
-
-  return { ref: element, arrivedState, updateScroll };
-};
diff --git a/frontend/unit/composables.test.ts b/frontend/unit/composables.test.ts
index f30a0f8c8..5ddea0131 100644
--- a/frontend/unit/composables.test.ts
+++ b/frontend/unit/composables.test.ts
@@ -1,5 +1,5 @@
 import { expect, test, vi } from "vitest";
-import { useQuery } from "@/util/composables";
+import { useQuery } from "@/composables/use-query";
 import { sleep } from "@/util/debug";
 
 /** useQuery tests */