diff --git a/frontend/package.json b/frontend/package.json
index 27946eb95c6..d8d2ddc82d7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -70,7 +70,7 @@
     "@pinia/nuxt": "0.2.1",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/core": "^9.3.0",
+    "@vueuse/core": "^10.2.1",
     "@wordpress/is-shallow-equal": "^4.6.0",
     "async-mutex": "^0.3.2",
     "axios": "^0.27.0",
diff --git a/frontend/src/components/VHomeGallery/VHomeGallery.vue b/frontend/src/components/VHomeGallery/VHomeGallery.vue
index dfea4112abb..fbb5d89ebeb 100644
--- a/frontend/src/components/VHomeGallery/VHomeGallery.vue
+++ b/frontend/src/components/VHomeGallery/VHomeGallery.vue
@@ -49,7 +49,7 @@
 import { computed, defineComponent, PropType, ref } from "vue"
 import { useContext, useRouter } from "@nuxtjs/composition-api"
 
-import { useReducedMotion } from "~/composables/use-media-query"
+import { useReducedMotion } from "~/composables/use-reduced-motion"
 import { useAnalytics } from "~/composables/use-analytics"
 import useResizeObserver from "~/composables/use-resize-observer"
 
diff --git a/frontend/src/components/VLogoLoader/VLogoLoader.vue b/frontend/src/components/VLogoLoader/VLogoLoader.vue
index 0f9e9ff502c..83de5ffcac1 100644
--- a/frontend/src/components/VLogoLoader/VLogoLoader.vue
+++ b/frontend/src/components/VLogoLoader/VLogoLoader.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
-import { useReducedMotion } from "~/composables/use-media-query"
+import { useReducedMotion } from "~/composables/use-reduced-motion"
 
 export default defineComponent({
   name: "VLogoLoader",
diff --git a/frontend/src/composables/use-dialog-control.ts b/frontend/src/composables/use-dialog-control.ts
index 2aaf95c6d8c..08371c820cc 100644
--- a/frontend/src/composables/use-dialog-control.ts
+++ b/frontend/src/composables/use-dialog-control.ts
@@ -9,7 +9,7 @@ import {
   watch,
 } from "vue"
 
-import { MaybeComputedRef, resolveUnref } from "@vueuse/core"
+import { MaybeRefOrGetter, toValue } from "@vueuse/core"
 
 import { useBodyScrollLock } from "~/composables/use-body-scroll-lock"
 
@@ -25,7 +25,7 @@ export function useDialogControl({
   nodeRef?: Ref<HTMLElement | null>
   lockBodyScroll?: ComputedRef<boolean> | boolean
   emit: SetupContext["emit"]
-  deactivateFocusTrap?: MaybeComputedRef<Fn | undefined>
+  deactivateFocusTrap?: MaybeRefOrGetter<Fn | undefined>
 }) {
   const internallyControlled = typeof visibleRef === "undefined"
   const internalVisibleRef = internallyControlled ? ref(false) : visibleRef
@@ -71,7 +71,7 @@ export function useDialogControl({
   const open = () => (internalVisibleRef.value = true)
 
   const close = () => {
-    const fn = resolveUnref(deactivateFocusTrap)
+    const fn = toValue(deactivateFocusTrap)
     if (fn) fn()
     internalVisibleRef.value = false
   }
diff --git a/frontend/src/composables/use-event-listener.ts b/frontend/src/composables/use-event-listener.ts
deleted file mode 100644
index bf3485f6ae0..00000000000
--- a/frontend/src/composables/use-event-listener.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { isRef, watch, onMounted, onBeforeUnmount, unref, Ref } from "vue"
-
-const isComponentInstance = (o: unknown): o is { $el: unknown } =>
-  !!o && typeof (o as { $el: unknown }).$el !== "undefined"
-
-export type MaybeRef<T> = Ref<T> | T
-
-/**
- * Use an event listener.
- *
- * @see https://logaretm.com/blog/my-favorite-5-vuejs-composables/#useeventlistener
- */
-export function useEventListener<T extends EventTarget>(
-  target: MaybeRef<T | { $el: T }>,
-  event: Parameters<T["addEventListener"]>[0],
-  handler: Parameters<T["addEventListener"]>[1],
-  options = {}
-) {
-  // if it's a reactive ref, use a watcher
-  if (isRef(target)) {
-    watch(target, (value, oldValue) => {
-      const previous = isComponentInstance(oldValue) ? oldValue.$el : oldValue
-      const current = isComponentInstance(value) ? value.$el : value
-      previous?.removeEventListener(event, handler)
-      current?.addEventListener(event, handler, options)
-    })
-  } else {
-    // otherwise, use the mounted hook
-    onMounted(() => {
-      ;(isComponentInstance(target) ? target.$el : target).addEventListener(
-        event,
-        handler,
-        options
-      )
-    })
-  }
-  // clean it up
-  onBeforeUnmount(() => {
-    const unreffed = unref(target)
-    ;(isComponentInstance(unreffed)
-      ? unreffed.$el
-      : unreffed
-    ).removeEventListener(event, handler)
-  })
-}
diff --git a/frontend/src/composables/use-media-query.ts b/frontend/src/composables/use-media-query.ts
deleted file mode 100644
index 671f2922481..00000000000
--- a/frontend/src/composables/use-media-query.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/* this implementation is from https://github.com/vueuse/vueuse/packages/core/useMediaQuery/
- which, in turn, is ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */
-import { computed, ref, watchEffect } from "vue"
-
-import { resolveUnref, tryOnScopeDispose, useSupported } from "@vueuse/core"
-
-import { SCREEN_SIZES, Breakpoint } from "~/constants/screens"
-import { defaultWindow } from "~/constants/window"
-
-import type { MaybeComputedRef } from "@vueuse/core"
-
-interface Options {
-  shouldPassInSSR?: boolean
-  window?: Window
-}
-
-/**
- * Reactive Media Query.
- */
-export function useMediaQuery(
-  query: MaybeComputedRef<string>,
-  options: Options = { shouldPassInSSR: false }
-) {
-  const { window = defaultWindow } = options
-  const isSupported = useSupported(
-    () =>
-      window &&
-      "matchMedia" in window &&
-      typeof window.matchMedia === "function"
-  )
-
-  let mediaQuery: MediaQueryList | undefined
-  const matches = ref(Boolean(options.shouldPassInSSR))
-
-  const cleanup = () => {
-    if (!mediaQuery) return
-    if ("removeEventListener" in mediaQuery) {
-      mediaQuery.removeEventListener("change", update)
-    } else {
-      // @ts-expect-error deprecated API
-      mediaQuery.removeListener(update)
-    }
-  }
-
-  const update = () => {
-    if (!isSupported.value) {
-      return
-    }
-    // This is already checked in `isSupported`, but TS doesn't know that
-    if (!window) return
-
-    cleanup()
-
-    mediaQuery = window.matchMedia(resolveUnref(query))
-    matches.value = mediaQuery.matches
-
-    if ("addEventListener" in mediaQuery) {
-      mediaQuery.addEventListener("change", update)
-    } else {
-      // @ts-expect-error deprecated API
-      mediaQuery.addListener(update)
-    }
-  }
-
-  watchEffect(update)
-
-  tryOnScopeDispose(() => cleanup())
-
-  return matches
-}
-
-const isBpXs = (bp: Breakpoint): bp is "xs" => bp === "xs"
-
-/**
- * Check whether the current screen meets
- * or exceeds the provided breakpoint size.
- */
-export const isMinScreen = (
-  breakpointName: MaybeComputedRef<Breakpoint>,
-  options?: Options
-) => {
-  const resolvedBp = resolveUnref(breakpointName)
-
-  if (isBpXs(resolvedBp)) {
-    // `xs` is the "minimum" so it is always true
-    return ref(true)
-  }
-
-  const query = computed(() => {
-    const sizeInPx = SCREEN_SIZES[resolvedBp]
-    return `(min-width: ${sizeInPx}px)`
-  })
-
-  return useMediaQuery(query, options)
-}
-
-/**
- * Check if the user prefers reduced motion or not.
- */
-export function useReducedMotion(options?: Options) {
-  return useMediaQuery("(prefers-reduced-motion: reduce)", options)
-}
diff --git a/frontend/src/composables/use-reduced-motion.ts b/frontend/src/composables/use-reduced-motion.ts
new file mode 100644
index 00000000000..e2206290153
--- /dev/null
+++ b/frontend/src/composables/use-reduced-motion.ts
@@ -0,0 +1,7 @@
+import { useMediaQuery } from "@vueuse/core"
+/**
+ * Check if the user prefers reduced motion or not.
+ */
+export function useReducedMotion() {
+  return useMediaQuery("(prefers-reduced-motion: reduce)")
+}
diff --git a/frontend/src/composables/use-window-scroll.ts b/frontend/src/composables/use-window-scroll.ts
index 46ca93ef274..32aea823cc8 100644
--- a/frontend/src/composables/use-window-scroll.ts
+++ b/frontend/src/composables/use-window-scroll.ts
@@ -1,9 +1,9 @@
 // code taken from Vueuse
 import { throttle } from "throttle-debounce"
 import { ref } from "vue"
+import { useEventListener } from "@vueuse/core"
 
 import { defaultWindow } from "~/constants/window"
-import { useEventListener } from "~/composables/use-event-listener"
 
 /**
  * Whether the page has been scrolled down at all.
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 39c5a01b375..5ac8e9a8d0a 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -7,11 +7,10 @@
       :handle-search="handleSearch"
       :search-type="searchType"
       :set-search-type="setSearchType"
-      :is-sm="isSm"
     />
 
     <!-- Image carousel -->
-    <VHomeGallery class="hidden h-full flex-grow xl:flex" />
+    <VHomeGallery v-if="isXl" class="flex h-full flex-grow" />
   </main>
 </template>
 
@@ -69,8 +68,7 @@ export default defineComponent({
       updateBreakpoint()
     })
 
-    const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
-    const isSm = computed(() => uiStore.isBreakpoint("sm"))
+    const isXl = computed(() => uiStore.isBreakpoint("xl"))
 
     const searchType = ref<SupportedSearchType>(ALL_MEDIA)
 
@@ -93,8 +91,7 @@ export default defineComponent({
     }
 
     return {
-      isDesktopLayout,
-      isSm,
+      isXl,
 
       searchType,
       setSearchType,
diff --git a/frontend/test/unit/specs/components/v-logo-loader.spec.js b/frontend/test/unit/specs/components/v-logo-loader.spec.js
index fbecba98bca..971188193ba 100644
--- a/frontend/test/unit/specs/components/v-logo-loader.spec.js
+++ b/frontend/test/unit/specs/components/v-logo-loader.spec.js
@@ -2,7 +2,7 @@ import { screen } from "@testing-library/vue"
 
 import { render } from "~~/test/unit/test-utils/render"
 
-import { useReducedMotion } from "~/composables/use-media-query"
+import { useReducedMotion } from "~/composables/use-reduced-motion"
 
 import VLogoLoader from "~/components/VLogoLoader/VLogoLoader.vue"
 
@@ -11,7 +11,7 @@ jest.mock("~/utils/console", () => ({
   log: jest.fn(),
 }))
 
-jest.mock("~/composables/use-media-query", () => ({
+jest.mock("~/composables/use-reduced-motion", () => ({
   useReducedMotion: jest.fn(),
 }))
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 886aaef6920..82eafc5f86e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -101,7 +101,7 @@ importers:
       '@types/throttle-debounce': ^5.0.0
       '@types/uuid': ^8.3.4
       '@vue/test-utils': ^1.1.3
-      '@vueuse/core': ^9.3.0
+      '@vueuse/core': ^10.2.1
       '@wordpress/is-shallow-equal': ^4.6.0
       adm-zip: ^0.5.10
       async-mutex: ^0.3.2
@@ -171,7 +171,7 @@ importers:
       '@pinia/nuxt': 0.2.1_pinia@2.0.33+vue@2.7.14
       '@popperjs/core': 2.11.2
       '@tailwindcss/typography': 0.5.9_tailwindcss@3.3.1
-      '@vueuse/core': 9.3.0_vue@2.7.14
+      '@vueuse/core': 10.2.1_vue@2.7.14
       '@wordpress/is-shallow-equal': 4.8.0
       async-mutex: 0.3.2
       axios: 0.27.2
@@ -6009,8 +6009,8 @@ packages:
     resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
     dev: true
 
-  /@types/web-bluetooth/0.0.15:
-    resolution: {integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==}
+  /@types/web-bluetooth/0.0.17:
+    resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
     dev: false
 
   /@types/webpack-bundle-analyzer/3.9.5:
@@ -6690,26 +6690,26 @@ packages:
       vue-template-compiler: 2.7.14
     dev: true
 
-  /@vueuse/core/9.3.0_vue@2.7.14:
-    resolution: {integrity: sha512-64Rna8IQDWpdrJxgitDg7yv1yTp41ZmvV8zlLEylK4QQLWAhz1OFGZDPZ8bU4lwcGgbEJ2sGi2jrdNh4LttUSQ==}
+  /@vueuse/core/10.2.1_vue@2.7.14:
+    resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==}
     dependencies:
-      '@types/web-bluetooth': 0.0.15
-      '@vueuse/metadata': 9.3.0
-      '@vueuse/shared': 9.3.0_vue@2.7.14
-      vue-demi: 0.13.11_vue@2.7.14
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.2.1
+      '@vueuse/shared': 10.2.1_vue@2.7.14
+      vue-demi: 0.14.5_vue@2.7.14
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/metadata/9.3.0:
-    resolution: {integrity: sha512-GnnfjbzIPJIh9ngL9s9oGU1+Hx/h5/KFqTfJykzh/1xjaHkedV9g0MASpdmPZIP+ynNhKAcEfA6g5i8KXwtoMA==}
+  /@vueuse/metadata/10.2.1:
+    resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==}
     dev: false
 
-  /@vueuse/shared/9.3.0_vue@2.7.14:
-    resolution: {integrity: sha512-caGUWLY0DpPC6l31KxeUy6vPVNA0yKxx81jFYLoMpyP6cF84FG5Dkf69DfSUqL57wX8JcUkJDMnQaQIZPWFEQQ==}
+  /@vueuse/shared/10.2.1_vue@2.7.14:
+    resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==}
     dependencies:
-      vue-demi: 0.13.11_vue@2.7.14
+      vue-demi: 0.14.5_vue@2.7.14
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -19440,6 +19440,21 @@ packages:
     dependencies:
       vue: 2.7.14
 
+  /vue-demi/0.14.5_vue@2.7.14:
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 2.7.14
+    dev: false
+
   /vue-docgen-api/4.44.18_vue@2.7.14:
     resolution: {integrity: sha512-zZLa2TqCid97tIk98A30GnP5N46SfAsJW5p3z1PDYME0UTZWl6nKLcgQLtGfzXYT4bz+dV11cc6FumdGW0QTlA==}
     dependencies: