diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index d971496d990..1aaf765b00d 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -18,6 +18,7 @@ module.exports = {
   ignorePatterns: [
     '.eslintrc.js',
     '*.config.js',
+    'spatialNavigation.js',
     'types/global/routes.d.ts',
     'types/global/components.d.ts'
   ],
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 33619239ef3..7a58928aead 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <backdrop />
-  <v-app>
+  <v-app v-focus-section:app>
     <router-view-transition is-root />
     <snackbar />
   </v-app>
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
index 45149ffbd0b..616c18a7789 100644
--- a/frontend/src/assets/styles/global.scss
+++ b/frontend/src/assets/styles/global.scss
@@ -99,3 +99,9 @@ html.no-forced-scrollbar {
   top: 1em;
   right: 1em;
 }
+
+button.bg-primary:focus,
+button.bg-primary:focus-visible {
+  box-shadow: 0 0 0 5px white !important;
+  outline: none !important;
+}
diff --git a/frontend/src/components/Buttons/Playback/PlayButton.vue b/frontend/src/components/Buttons/Playback/PlayButton.vue
index 98ebb8c3c47..dda4d288011 100644
--- a/frontend/src/components/Buttons/Playback/PlayButton.vue
+++ b/frontend/src/components/Buttons/Playback/PlayButton.vue
@@ -2,6 +2,7 @@
   <div class="d-inline-flex">
     <v-btn
       v-if="canPlay(item) && (fab || iconOnly)"
+      v-focus
       :variant="iconOnly ? undefined : 'elevated'"
       :color="iconOnly ? undefined : 'primary'"
       icon
@@ -17,6 +18,7 @@
     </v-btn>
     <v-btn
       v-else-if="!fab"
+      v-focus
       :disabled="disabled || !canPlay(item)"
       :loading="loading"
       class="mr-2"
diff --git a/frontend/src/components/Item/Card/Card.vue b/frontend/src/components/Item/Card/Card.vue
index b52ead36a7a..313860f7007 100644
--- a/frontend/src/components/Item/Card/Card.vue
+++ b/frontend/src/components/Item/Card/Card.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="{ 'card-margin': margin }">
+  <div
+    v-focus="!!link"
+    :class="{ 'card-margin': margin }"
+    @keyup.enter="cardClicked($router)">
     <component
       :is="link ? 'router-link' : 'div'"
       :to="link ? getItemDetailsLink(item) : null"
@@ -97,6 +100,8 @@ const isFinePointer = useMediaQuery('(pointer:fine)');
 </script>
 
 <script lang="ts" setup>
+import { Router } from 'vue-router';
+
 const props = withDefaults(
   defineProps<{
     item: BaseItemDto;
@@ -128,6 +133,15 @@ const cardTitle = computed(() =>
     : props.item.Name || ''
 );
 
+/**
+ * Takes you to subtitle link or cardlink if no subtitle link
+ */
+function cardClicked(router: Router): void {
+  if (props.link && (cardTitleLink.value || cardSubtitleLink.value)) {
+    router.push(cardSubtitleLink.value || cardTitleLink.value);
+  }
+}
+
 /**
  * Returns either a string representing the production year(s) for the current item
  * or the episode name of an item (SX EY - Episode Name)
@@ -308,4 +322,12 @@ const refreshProgress = computed(
 .absolute {
   position: absolute;
 }
+
+.card-margin:focus-within,
+.card-margin:focus {
+  box-shadow: 0 0 0 5px rgb(var(--v-theme-primary));
+  border-radius: 5px;
+  outline: none;
+  background-color: rgb(var(--v-theme-primary));
+}
 </style>
diff --git a/frontend/src/components/Item/SeasonTabs.vue b/frontend/src/components/Item/SeasonTabs.vue
index e00f40a3e8a..77386dd6c5a 100644
--- a/frontend/src/components/Item/SeasonTabs.vue
+++ b/frontend/src/components/Item/SeasonTabs.vue
@@ -1,7 +1,13 @@
 <template>
   <div>
-    <v-tabs v-model="currentTab" class="mb-3" bg-color="transparent">
-      <v-tab v-for="season in seasons" :key="season.Id">
+    <v-tabs
+      v-model="currentTab"
+      v-focus-section:season-tab="{
+        leaveFor: { down: '@season-episodes', left: '@nav' }
+      }"
+      class="mb-3"
+      bg-color="transparent">
+      <v-tab v-for="season in seasons" :key="season.Id" v-focus>
         {{ season.Name }}
       </v-tab>
     </v-tabs>
@@ -9,12 +15,16 @@
       <v-window-item v-for="season in seasons" :key="season.Id">
         <v-list
           v-if="seasonEpisodes && season.Id"
+          v-focus-section:season-episodes="{
+            leaveFor: { up: '@season-tab', down: '@season-tab', left: '@nav' }
+          }"
           :lines="false"
           bg-color="transparent">
           <v-list-item
             v-for="episode in seasonEpisodes[season.Id]"
             :key="episode.Id"
-            :to="getItemDetailsLink(episode)">
+            v-focus
+            @click="viewDetails($router, episode)">
             <v-row align="center" class="my-4">
               <v-col
                 :class="{ 'py-1': $vuetify.display.smAndDown }"
@@ -44,10 +54,15 @@
 </template>
 
 <script setup lang="ts">
-import { BaseItemDto, ItemFields } from '@jellyfin/sdk/lib/generated-client';
+import {
+  BaseItemDto,
+  BaseItemPerson,
+  ItemFields
+} from '@jellyfin/sdk/lib/generated-client';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
 import { ref, watch } from 'vue';
+import { Router } from 'vue-router';
 import { getItemDetailsLink } from '@/utils/items';
 import { useRemote } from '@/composables';
 
@@ -102,8 +117,23 @@ async function fetch(): Promise<void> {
   }
 }
 
+/**
+ * Navigates to the episode details.
+ */
+function viewDetails(router: Router, item: BaseItemDto | BaseItemPerson): void {
+  router.push(getItemDetailsLink(item));
+}
+
 await fetch();
 watch(props, async () => {
   await fetch();
 });
 </script>
+<style lang="scss" scoped>
+button.v-tab:focus,
+button.v-tab:focus-visible {
+  outline: none !important;
+  color: white !important;
+  background-color: rgb(var(--v-theme-primary)) !important;
+}
+</style>
diff --git a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
index d4056f8cf4d..23baa4826a7 100644
--- a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
+++ b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
@@ -1,5 +1,6 @@
 <template>
   <v-navigation-drawer
+    ref="navDrawer"
     v-model="drawer"
     :temporary="$vuetify.display.mobile"
     :permanent="!$vuetify.display.mobile"
@@ -9,22 +10,32 @@
     :color="
       transparentLayout && !$vuetify.display.mobile ? 'transparent' : undefined
     ">
-    <v-list nav>
+    <v-list
+      v-focus-section:nav="{
+        leaveFor: { right: '@app, @lib-grid, @series, @main', left: '@app' }
+      }"
+      nav>
       <v-list-item
         v-for="item in items"
         :key="item.to"
+        v-focus-events="{ unfocused: handleUnfocus }"
+        v-focus
         :to="item.to"
         exact
         :prepend-icon="item.icon"
-        :title="item.title" />
+        :title="item.title"
+        @focus="handleFocus" />
       <v-list-subheader>{{ $t('libraries') }}</v-list-subheader>
       <v-list-item
         v-for="library in drawerItems"
         :key="library.to"
+        v-focus-events="{ unfocused: handleUnfocus }"
+        v-focus
         :to="library.to"
         exact
         :prepend-icon="library.icon"
-        :title="library.title" />
+        :title="library.title"
+        @focus="handleFocus" />
     </v-list>
     <template #append>
       <v-list nav>
@@ -38,8 +49,9 @@
 import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { computed, inject, Ref } from 'vue';
+import { computed, inject, ref, Ref } from 'vue';
 import IMdiHome from 'virtual:icons/mdi/home';
+import { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer';
 import { userLibrariesStore } from '@/store';
 import { getLibraryIcon } from '@/utils/items';
 
@@ -52,6 +64,7 @@ const props = defineProps<{
 }>();
 
 const drawer = inject<Ref<boolean>>('NavigationDrawer');
+const navDrawer = ref<VNavigationDrawer>(null);
 
 const transparentLayout = computed(() => {
   return route.meta.transparentLayout || false;
@@ -67,6 +80,28 @@ const drawerItems = computed(() => {
   });
 });
 
+/**
+ * Opens the drawer when any item in it gains focus
+ */
+function handleFocus(): void {
+  if (navDrawer.value.temporary && !drawer.value) {
+    drawer.value = true;
+  }
+}
+/**
+ * Closes the drawer when focus is law
+ */
+function handleUnfocus(
+  nextElement: HTMLElement,
+  nextSectionId: string,
+  direction: 'left' | 'right' | 'up' | 'down',
+  native: boolean
+): void {
+  if (navDrawer.value.temporary && nextSectionId != 'nav') {
+    drawer.value = false;
+  }
+}
+
 const items = [
   {
     icon: IMdiHome,
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 12649bae8d5..e856225ae54 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,17 +5,18 @@
  */
 
 import { createApp } from 'vue';
+
 import Root from '@/App.vue';
 /* eslint-disable no-restricted-imports */
 import { createRemote, i18n, router, vuetify } from '@/plugins';
 import { hideDirective } from '@/plugins/directives';
 /* eslint-enable no-restricted-imports */
-
 /**
  * - GLOBAL STYLES -
  */
 import '@/assets/styles/global.scss';
 import '@fontsource/roboto';
+import vueSpatialNavigation, { vjsnOptions } from '@/plugins/spatialNav';
 
 /**
  * - VUE PLUGINS, STORE AND DIRECTIVE -
@@ -29,7 +30,43 @@ app.use(i18n);
 app.use(router);
 app.use(remote);
 app.use(vuetify);
+
 app.directive('hide', hideDirective);
+app.use(vueSpatialNavigation, {
+  straightOnly: false,
+  straightOverlapThreshold: 0.5,
+  rememberSource: false,
+  disabled: false,
+  defaultElement: '',
+  enterTo: '',
+  leaveFor: undefined,
+  restrict: 'self-first',
+  tabIndexIgnoreList:
+    'a, input, select, textarea, button, iframe, [contentEditable=true], body',
+  navigableFilter: (e: HTMLElement): boolean => {
+    if (e.tagName.toLowerCase() == 'body') {
+      return false;
+    }
+
+    if (e?.parentElement?.parentElement?.classList?.contains('card-overlay')) {
+      return false;
+    }
+
+    // virtual grid used in library duplicates the first item on the grid. This causes a bug that prevents the first
+    // item on the grid from being focusable using spatial navigation. This condition tells the plugin to ignore that element.
+    if (
+      e?.parentElement?.style?.opacity == '0' &&
+      e?.parentElement?.style?.visibility == 'hidden'
+    ) {
+      console.log('ignoringh v item');
+
+      return false;
+    }
+
+    return true;
+  },
+  scrollOptions: { behavior: 'smooth', block: 'nearest' }
+} as vjsnOptions);
 
 /**
  * This ensures the transition plays: https://router.vuejs.org/guide/migration/#all-navigations-are-now-always-asynchronous
diff --git a/frontend/src/pages/library/_itemId/index.vue b/frontend/src/pages/library/_itemId/index.vue
index d3ef3d74e25..1981df1c4c4 100644
--- a/frontend/src/pages/library/_itemId/index.vue
+++ b/frontend/src/pages/library/_itemId/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-app-bar density="compact" flat>
+    <v-app-bar v-if="!loading" density="compact" flat>
       <span class="text-h6 hidden-sm-and-down">
         {{ library?.Name }}
       </span>
diff --git a/frontend/src/pages/playback/video/index.vue b/frontend/src/pages/playback/video/index.vue
index 53672222b9c..a089a0a135a 100644
--- a/frontend/src/pages/playback/video/index.vue
+++ b/frontend/src/pages/playback/video/index.vue
@@ -127,7 +127,8 @@ import {
   useFullscreen,
   useTimeoutFn,
   useMagicKeys,
-  whenever
+  whenever,
+  useEventListener
 } from '@vueuse/core';
 import {
   playbackManagerStore,
@@ -186,6 +187,7 @@ onBeforeUnmount(() => {
 });
 
 onMounted(() => {
+  useEventListener(document, 'keyup', handleKeyUp);
   playerElement.isFullscreenMounted = true;
 });
 
@@ -198,6 +200,35 @@ whenever(keys.j, playbackManager.skipBackward);
 whenever(keys.f, fullscreen.toggle);
 whenever(keys.m, playbackManager.toggleMute);
 
+/**
+ * Used to detect media keys (play, pause, ff,rw). these media keys either show up as 'unidentifed' or '' when using useMagicKeys
+ */
+function handleKeyUp(event: KeyboardEvent): void {
+  const keyCode = event.keyCode;
+
+  // LGTV media key codes. May not be same on other platforms
+  const pauseKey = 19;
+  const playKey = 415;
+  const fastForwardKey = 417;
+  const rewindKey = 412;
+
+  switch (keyCode) {
+    case playKey:
+    case pauseKey: {
+      playbackManager.playPause();
+      break;
+    }
+    case fastForwardKey: {
+      playbackManager.skipForward();
+      break;
+    }
+    case rewindKey: {
+      playbackManager.skipBackward();
+      break;
+    }
+  }
+}
+
 watch(staticOverlay, (val) => {
   if (val) {
     timeout.stop();
diff --git a/frontend/src/plugins/spatialNav/extension.ts b/frontend/src/plugins/spatialNav/extension.ts
new file mode 100644
index 00000000000..82c341de4ae
--- /dev/null
+++ b/frontend/src/plugins/spatialNav/extension.ts
@@ -0,0 +1,7 @@
+import SpatialNavigation from './spatialNavigation';
+
+declare module '@vue/runtime-core' {
+  export interface ComponentCustomProperties {
+    $SpatialNavigation: typeof SpatialNavigation;
+  }
+}
diff --git a/frontend/src/plugins/spatialNav/index.ts b/frontend/src/plugins/spatialNav/index.ts
new file mode 100644
index 00000000000..a1a3169b163
--- /dev/null
+++ b/frontend/src/plugins/spatialNav/index.ts
@@ -0,0 +1,166 @@
+import { Directive, DirectiveBinding } from 'vue';
+import SpatialNavigation, { EVENT_PREFIX } from './spatialNavigation';
+import './extension';
+import { vjsnOptions } from '@/plugins/spatialNav/options';
+import App from '@/App.vue';
+
+const vueSpatialNavigation = {
+  install(Vue: App, config: vjsnOptions): void {
+    const globalConfig = {
+      selector: `[data-focusable=true]`
+    } as vjsnOptions;
+
+    Object.assign(globalConfig, config);
+    SpatialNavigation.init();
+    SpatialNavigation.set(globalConfig);
+    Vue.config.globalProperties.$SpatialNavigation = SpatialNavigation;
+
+    const assignConfig = (
+      sectionId: string,
+      config: vjsnOptions
+    ): vjsnOptions => {
+      const sectionConfig = Object.assign({}, globalConfig);
+
+      if (config) {
+        Object.assign(sectionConfig, config);
+      }
+
+      sectionConfig.selector = `[data-section-id="${sectionId}"] [data-focusable=true]`;
+
+      return sectionConfig;
+    };
+
+    const focusSectionDirective: Directive<HTMLElement, vjsnOptions> = {
+      beforeMount(el: HTMLElement, binding: DirectiveBinding<vjsnOptions>) {
+        let sectionId;
+
+        if (binding.arg) {
+          sectionId = binding.arg;
+
+          try {
+            SpatialNavigation.add(sectionId, {});
+          } catch (error) {
+            console.error(error);
+          }
+        } else {
+          sectionId = SpatialNavigation.add({});
+        }
+
+        // set sectionid to data set for removing when unbinding
+        el.dataset.sectionId = sectionId;
+        SpatialNavigation.set(
+          sectionId,
+          assignConfig(sectionId, binding.value)
+        );
+
+        // set default section
+        if (binding.modifiers.default) {
+          SpatialNavigation.setDefaultSection(sectionId);
+        }
+      },
+      updated(el, binding) {
+        let sectionId = el.dataset.sectionId;
+
+        if (binding.arg && sectionId != binding.arg) {
+          sectionId = binding.arg;
+          el.dataset.sectionId = sectionId;
+        }
+
+        if (binding.value) {
+          try {
+            SpatialNavigation.set(sectionId, binding.value);
+          } catch {
+            SpatialNavigation.add(
+              sectionId,
+              assignConfig(sectionId!, binding.value)
+            );
+          }
+        }
+      },
+      unmounted(el) {
+        SpatialNavigation.remove(el.dataset.sectionId);
+      }
+    };
+
+    // focus section directive
+    Vue.directive('focus-section', focusSectionDirective);
+
+    const disableSection = (sectionId: string, disable = true): void => {
+      if (disable) {
+        SpatialNavigation.disable(sectionId);
+      } else {
+        SpatialNavigation.enable(sectionId);
+      }
+    };
+
+    // diasble focus section directive
+    Vue.directive('disable-focus-section', {
+      beforeMount(el, binding) {
+        disableSection(el.dataset.sectionId, binding.value);
+      },
+      updated(el, binding) {
+        disableSection(el.dataset.sectionId, binding.value);
+      }
+    } as Directive);
+
+    const disableElement = (el: HTMLElement, focusable = true): void => {
+      if (!el.dataset.focusable || el.dataset.focusable != `${focusable}`) {
+        el.dataset.focusable = `${focusable}`;
+
+        if (focusable) {
+          el.tabIndex = -1;
+        }
+      }
+    };
+
+    // focusable directive
+    Vue.directive('focus', {
+      beforeMount(el, binding) {
+        disableElement(el, binding.value);
+      },
+      mounted(el, binding) {
+        el.addEventListener('mouseenter', () => {
+          SpatialNavigation.focus(el);
+        });
+        el.addEventListener('click', () => {
+          el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 13 }));
+        });
+      },
+      updated(el, binding) {
+        disableElement(el, binding.value);
+      },
+      unmounted(el) {
+        delete el.dataset.focusable;
+      }
+    } as Directive);
+
+    // It can be expensive to check through this list for every events registered for every button.
+    // With typescript this could be done with typedefinition
+    const EVENTS = new Set([
+      'willmove',
+      'willunfocus',
+      'unfocused',
+      'willfocus',
+      'focused',
+      'navigatefailed',
+      'enter-down',
+      'enter-up'
+    ]);
+
+    // At some point we might need the handling of what happens with eventlistener when the binding is updated.
+    // This might also be split into different directives to handle remove eventlisteners
+    Vue.directive('focus-events', {
+      mounted(el, binding) {
+        for (const [i, key] of Object.keys(binding.value).entries()) {
+          if (EVENTS.has(key)) {
+            el.addEventListener(EVENT_PREFIX + key, binding.value[key]);
+          }
+        }
+      }
+    } as Directive<HTMLElement, { [key: string]: EventListenerOrEventListenerObject }>);
+  }
+};
+
+export * from './options';
+
+export default vueSpatialNavigation;
diff --git a/frontend/src/plugins/spatialNav/options.ts b/frontend/src/plugins/spatialNav/options.ts
new file mode 100644
index 00000000000..13aa1ceba50
--- /dev/null
+++ b/frontend/src/plugins/spatialNav/options.ts
@@ -0,0 +1,103 @@
+export interface vjsnOptions {
+  /**
+   * #### `selector`
+   + Type: [Selector](#selector-1)
+   + Default: `''`
+   Elements matching `selector` are regarded as navigable elements in SpatialNavigation. However, hidden or disabled elements are ignored as they can not be focused in any way.
+   */
+  selector?: string;
+
+  /**
+   * #### `straightOnly`
+   + Type: Boolean
+   + Default: `false`
+   When it is `true`, only elements in the straight (vertical or horizontal) direction will be navigated. i.e. SpatialNavigation ignores elements in the oblique directions.
+   */
+  straightOnly?: boolean;
+
+  /**
+   * #### `straightOverlapThreshold`
+   + Type: Number in the range [0, 1]
+   + Default: `0.5`
+   This threshold is used to determine whether an element is considered in the straight (vertical or horizontal) directions. Valid number is between 0 to 1.0.
+   Setting it to 0.3 means that an element is counted in the straight directions only if it overlaps the straight area at least 0.3x of its total area.
+   */
+  straightOverlapThreshold?: number;
+
+  /**
+   * #### `rememberSource`
+   + Type: Boolean
+   + Default: `false`
+   When it is `true`, the previously focused element will have higher priority to be chosen as the next candidate.
+   */
+  rememberSource?: boolean;
+
+  /**
+   * #### `disabled`
+   + Type: Boolean
+   + Default: `false`
+   When it is `true`, elements defined in this section are unnavigable. This property is modified by [`disable()`](#spatialnavigationdisablesectionid) and [`enable()`](#spatialnavigationenablesectionid) as well.
+   */
+  disabled?: boolean;
+
+  /**
+   * #### `defaultElement`
+   + Type: [Selector](#selector-1) (without @ syntax)
+   + Default: `''`
+   When a section is specified to be the next focused target, e.g. [`focus('some-section-id')`](#spatialnavigationfocussectionidselector-silent) is called, the first navigable element matching `defaultElement` within this section will be chosen first.
+   */
+  defaultElement?: string;
+
+  /**
+   * #### `enterTo`
+   + Type: `''`, `'last-focused'` or `'default-element'`
+   + Default: `''`
+   If the focus comes from another section, you can define which element in this section should be focused first.
+   `'last-focused'` indicates the last focused element before we left this section last time. If this section has never been focused yet, the default element (if any) will be chosen next.
+   `'default-element'` indicates the element defined in [`defaultElement`](#defaultelement).
+   `''` (empty string) implies following the original rule without any change.
+   */
+  enterTo?: 'last-focused' | 'default-element' | '';
+
+  /**
+   * #### `leaveFor`
+   + Type: `null` or PlainObject
+   + Default: `null`
+   This property specifies which element should be focused next when a user presses the corresponding arrow key and intends to leave the current section.
+   It should be a PlainObject consists of four properties: `'left'`, `'right'`, `'up'` and `'down'`. Each property should be a [Selector](#selector-1). Any of these properties can be omitted, and SpatialNavigation will follow the original rule to navigate.
+   **Note:** Assigning an empty string to any of these properties makes SpatialNavigation go nowhere at that direction.
+   */
+  leaveFor?: { left: string; right: string; up: string; down: string } | null;
+
+  /**
+   * #### `restrict`
+   + Type: `'self-first'`, `'self-only'` or `'none'`
+   + Default: `'self-first'`
+   `'self-first'` implies that elements within the same section will have higher priority to be chosen as the next candidate.
+   `'self-only'` implies that elements in the other sections will never be navigated by arrow keys. (However, you can always focus them by calling [`focus()`](#spatialnavigationfocussectionidselector-silent) manually.)
+   `'none'` implies no restriction.
+   */
+  restrict?: 'self-first' | 'self-only' | 'none';
+
+  /**
+   * #### `tabIndexIgnoreList`
+   + Type: String
+   + Default: `'a, input, select, textarea, button, iframe, [contentEditable=true]'`
+   Elements matching `tabIndexIgnoreList` will never be affected by [`makeFocusable()`](#spatialnavigationmakefocusablesectionid). It is usually used to ignore elements that are already focusable.
+   */
+  tabIndexIgnoreList?: string;
+
+  /**
+   * #### `navigableFilter`
+   + Type: `'null'` or `function(HTMLElement)`
+   + Default: `null`
+   A callback function that accepts a DOM element as the first argument.
+   SpatialNavigation calls this function every time when it tries to traverse every single candidate. You can ignore arbitrary elements by returning `false`.
+   */
+  navigableFilter?: (element: HTMLElement) => boolean | null;
+
+  /**
+   * scrollIntoViewOptions https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+   */
+  scrollOptions?: ScrollIntoViewOptions; // scrollIntoViewOptions https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+}
diff --git a/frontend/src/plugins/spatialNav/spatialNavigation.js b/frontend/src/plugins/spatialNav/spatialNavigation.js
new file mode 100644
index 00000000000..7f48b9bffb5
--- /dev/null
+++ b/frontend/src/plugins/spatialNav/spatialNavigation.js
@@ -0,0 +1,1535 @@
+/*
+ * A javascript-based implementation of Spatial Navigation.
+ *
+ * Copyright (c) 2022 Luke Chang.
+ * https://github.com/luke-chang/js-spatial-navigation
+ *
+ * Lic
+"use strict";
+
+/************************/
+/* Global Configuration */
+/************************/
+// Note: an <extSelector> can be one of following types:
+// - a valid selector string for "querySelectorAll" or jQuery (if it exists)
+// - a NodeList or an array containing DOM elements
+// - a single DOM element
+// - a jQuery object
+// - a string "@<sectionId>" to indicate the specified section
+// - a string "@" to indicate the default section
+var GlobalConfig = {
+  selector: '', // can be a valid <extSelector> except "@" syntax.
+  straightOnly: false,
+  straightOverlapThreshold: 0.5,
+  rememberSource: false,
+  disabled: false,
+  defaultElement: '', // <extSelector> except "@" syntax.
+  enterTo: '', // '', 'last-focused', 'default-element'
+  leaveFor: null, // {left: <extSelector>, right: <extSelector>,
+  //  up: <extSelector>, down: <extSelector>}
+  restrict: 'self-first', // 'self-first', 'self-only', 'none'
+  tabIndexIgnoreList:
+    'a, input, select, textarea, button, iframe, [contentEditable=true]',
+  navigableFilter: null,
+  scrollOptions: null // scrollIntoViewOptions https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+};
+
+/*********************/
+/* Constant Variable */
+/*********************/
+var KEYMAPPING = {
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down'
+};
+
+var REVERSE = {
+  left: 'right',
+  up: 'down',
+  right: 'left',
+  down: 'up'
+};
+
+export var EVENT_PREFIX = 'sn:';
+var ID_POOL_PREFIX = 'section-';
+
+/********************/
+/* Private Variable */
+/********************/
+var _idPool = 0;
+var _ready = false;
+var _pause = false;
+var _sections = {};
+var _sectionCount = 0;
+var _defaultSectionId = '';
+var _lastSectionId = '';
+var _duringFocusChange = false;
+
+/************/
+/* Polyfill */
+/************/
+var elementMatchesSelector =
+  Element.prototype.matches ||
+  Element.prototype.matchesSelector ||
+  Element.prototype.mozMatchesSelector ||
+  Element.prototype.webkitMatchesSelector ||
+  Element.prototype.msMatchesSelector ||
+  Element.prototype.oMatchesSelector ||
+  function (selector) {
+    var matchedNodes = (this.parentNode || this.document).querySelectorAll(
+      selector
+    );
+
+    return Array.prototype.slice.call(matchedNodes).includes(this);
+  };
+
+/*****************/
+/* Core Function */
+
+/*****************/
+/**
+ *
+ */
+function getRect(elem) {
+  var cr = elem.getBoundingClientRect();
+  var rect = {
+    left: cr.left,
+    top: cr.top,
+    right: cr.right,
+    bottom: cr.bottom,
+    width: cr.width,
+    height: cr.height
+  };
+
+  rect.element = elem;
+  rect.center = {
+    x: rect.left + Math.floor(rect.width / 2),
+    y: rect.top + Math.floor(rect.height / 2)
+  };
+  rect.center.left = rect.center.right = rect.center.x;
+  rect.center.top = rect.center.bottom = rect.center.y;
+
+  return rect;
+}
+
+function partition(rects, targetRect, straightOverlapThreshold) {
+  var groups = [[], [], [], [], [], [], [], [], []];
+
+  for (var rect of rects) {
+    var center = rect.center;
+    var x, y, groupId;
+
+    if (center.x < targetRect.left) {
+      x = 0;
+    } else if (center.x <= targetRect.right) {
+      x = 1;
+    } else {
+      x = 2;
+    }
+
+    if (center.y < targetRect.top) {
+      y = 0;
+    } else if (center.y <= targetRect.bottom) {
+      y = 1;
+    } else {
+      y = 2;
+    }
+
+    groupId = y * 3 + x;
+    groups[groupId].push(rect);
+
+    if ([0, 2, 6, 8].includes(groupId)) {
+      var threshold = straightOverlapThreshold;
+
+      if (rect.left <= targetRect.right - targetRect.width * threshold) {
+        if (groupId === 2) {
+          groups[1].push(rect);
+        } else if (groupId === 8) {
+          groups[7].push(rect);
+        }
+      }
+
+      if (rect.right >= targetRect.left + targetRect.width * threshold) {
+        if (groupId === 0) {
+          groups[1].push(rect);
+        } else if (groupId === 6) {
+          groups[7].push(rect);
+        }
+      }
+
+      if (rect.top <= targetRect.bottom - targetRect.height * threshold) {
+        if (groupId === 6) {
+          groups[3].push(rect);
+        } else if (groupId === 8) {
+          groups[5].push(rect);
+        }
+      }
+
+      if (rect.bottom >= targetRect.top + targetRect.height * threshold) {
+        if (groupId === 0) {
+          groups[3].push(rect);
+        } else if (groupId === 2) {
+          groups[5].push(rect);
+        }
+      }
+    }
+  }
+
+  return groups;
+}
+
+/**
+ *
+ */
+function generateDistanceFunction(targetRect) {
+  return {
+    nearPlumbLineIsBetter: function (rect) {
+      var d;
+
+      d =
+        rect.center.x < targetRect.center.x
+          ? targetRect.center.x - rect.right
+          : rect.left - targetRect.center.x;
+
+      return d < 0 ? 0 : d;
+    },
+    nearHorizonIsBetter: function (rect) {
+      var d;
+
+      d =
+        rect.center.y < targetRect.center.y
+          ? targetRect.center.y - rect.bottom
+          : rect.top - targetRect.center.y;
+
+      return d < 0 ? 0 : d;
+    },
+    nearTargetLeftIsBetter: function (rect) {
+      var d;
+
+      d =
+        rect.center.x < targetRect.center.x
+          ? targetRect.left - rect.right
+          : rect.left - targetRect.left;
+
+      return d < 0 ? 0 : d;
+    },
+    nearTargetTopIsBetter: function (rect) {
+      var d;
+
+      d =
+        rect.center.y < targetRect.center.y
+          ? targetRect.top - rect.bottom
+          : rect.top - targetRect.top;
+
+      return d < 0 ? 0 : d;
+    },
+    topIsBetter: function (rect) {
+      return rect.top;
+    },
+    bottomIsBetter: function (rect) {
+      return -1 * rect.bottom;
+    },
+    leftIsBetter: function (rect) {
+      return rect.left;
+    },
+    rightIsBetter: function (rect) {
+      return -1 * rect.right;
+    }
+  };
+}
+
+/**
+ *
+ */
+function prioritize(priorities) {
+  var destPriority = null;
+
+  for (const priority of priorities) {
+    if (priority.group.length > 0) {
+      destPriority = priority;
+      break;
+    }
+  }
+
+  if (!destPriority) {
+    return null;
+  }
+
+  var destDistance = destPriority.distance;
+
+  destPriority.group.sort((a, b) => {
+    for (var distance of destDistance) {
+      var delta = distance(a) - distance(b);
+
+      if (delta) {
+        return delta;
+      }
+    }
+
+    return 0;
+  });
+
+  return destPriority.group;
+}
+
+/**
+ *
+ */
+function navigate(target, direction, candidates, config) {
+  if (!target || !direction || !candidates || candidates.length === 0) {
+    return null;
+  }
+
+  var rects = [];
+
+  for (const candidate of candidates) {
+    var rect = getRect(candidate);
+
+    if (rect) {
+      rects.push(rect);
+    }
+  }
+
+  if (rects.length === 0) {
+    return null;
+  }
+
+  var targetRect = getRect(target);
+
+  if (!targetRect) {
+    return null;
+  }
+
+  var distanceFunction = generateDistanceFunction(targetRect);
+
+  var groups = partition(rects, targetRect, config.straightOverlapThreshold);
+
+  var internalGroups = partition(
+    groups[4],
+    targetRect.center,
+    config.straightOverlapThreshold
+  );
+
+  var priorities;
+
+  switch (direction) {
+    case 'left': {
+      priorities = [
+        {
+          group: internalGroups[0]
+            .concat(internalGroups[3])
+            .concat(internalGroups[6]),
+          distance: [
+            distanceFunction.nearPlumbLineIsBetter,
+            distanceFunction.topIsBetter
+          ]
+        },
+        {
+          group: groups[3],
+          distance: [
+            distanceFunction.nearPlumbLineIsBetter,
+            distanceFunction.topIsBetter
+          ]
+        },
+        {
+          group: groups[0].concat(groups[6]),
+          distance: [
+            distanceFunction.nearHorizonIsBetter,
+            distanceFunction.rightIsBetter,
+            distanceFunction.nearTargetTopIsBetter
+          ]
+        }
+      ];
+      break;
+    }
+    case 'right': {
+      priorities = [
+        {
+          group: internalGroups[2]
+            .concat(internalGroups[5])
+            .concat(internalGroups[8]),
+          distance: [
+            distanceFunction.nearPlumbLineIsBetter,
+            distanceFunction.topIsBetter
+          ]
+        },
+        {
+          group: groups[5],
+          distance: [
+            distanceFunction.nearPlumbLineIsBetter,
+            distanceFunction.topIsBetter
+          ]
+        },
+        {
+          group: groups[2].concat(groups[8]),
+          distance: [
+            distanceFunction.nearHorizonIsBetter,
+            distanceFunction.leftIsBetter,
+            distanceFunction.nearTargetTopIsBetter
+          ]
+        }
+      ];
+      break;
+    }
+    case 'up': {
+      priorities = [
+        {
+          group: internalGroups[0]
+            .concat(internalGroups[1])
+            .concat(internalGroups[2]),
+          distance: [
+            distanceFunction.nearHorizonIsBetter,
+            distanceFunction.leftIsBetter
+          ]
+        },
+        {
+          group: groups[1],
+          distance: [
+            distanceFunction.nearHorizonIsBetter,
+            distanceFunction.leftIsBetter
+          ]
+        },
+        {
+          group: groups[0].concat(groups[2]),
+          distance: [
+            distanceFunction.nearPlumbLineIsBetter,
+            distanceFunction.bottomIsBetter,
+            distanceFunction.nearTargetLeftIsBetter
+          ]
+        }
+      ];
+      break;
+    }
+    case 'down': {
+      priorities = [
+        {
+          group: internalGroups[6]
+            .concat(internalGroups[7])
+            .concat(internalGroups[8]),
+          distance: [
+            distanceFunction.nearHorizonIsBetter,
+            distanceFunction.leftIsBetter
+          ]
+        },
+        {
+          group: groups[7],
+          distance: [
+            distanceFunction.nearHorizonIsBetter,
+            distanceFunction.leftIsBetter
+          ]
+        },
+        {
+          group: groups[6].concat(groups[8]),
+          distance: [
+            distanceFunction.nearPlumbLineIsBetter,
+            distanceFunction.topIsBetter,
+            distanceFunction.nearTargetLeftIsBetter
+          ]
+        }
+      ];
+      break;
+    }
+    default: {
+      return null;
+    }
+  }
+
+  if (config.straightOnly) {
+    priorities.pop();
+  }
+
+  var destGroup = prioritize(priorities);
+
+  if (!destGroup) {
+    return null;
+  }
+
+  var dest = null;
+
+  if (
+    config.rememberSource &&
+    config.previous &&
+    config.previous.destination === target &&
+    config.previous.reverse === direction
+  ) {
+    for (const element of destGroup) {
+      if (element.element === config.previous.target) {
+        dest = element.element;
+        break;
+      }
+    }
+  }
+
+  if (!dest) {
+    dest = destGroup[0].element;
+  }
+
+  return dest;
+}
+
+/********************/
+/* Private Function */
+
+/********************/
+/**
+ *
+ */
+function generateId() {
+  var id;
+
+  /*eslint no-constant-condition: ["error", { "checkLoops": false }]*/
+  while (true) {
+    id = ID_POOL_PREFIX + String(++_idPool);
+
+    if (!_sections[id]) {
+      break;
+    }
+  }
+
+  return id;
+}
+
+/**
+ *
+ */
+function parseSelector(selector) {
+  var result;
+
+  if (window.jQuery) {
+    result = window.jQuery(selector).get();
+  } else if (typeof selector === 'string') {
+    result = Array.prototype.slice.call(document.querySelectorAll(selector));
+  } else if (typeof selector === 'object' && selector.length > 0) {
+    result = Array.prototype.slice.call(selector);
+  } else if (typeof selector === 'object' && selector.nodeType === 1) {
+    result = [selector];
+  } else {
+    result = [];
+  }
+
+  return result;
+}
+
+/**
+ *
+ */
+function matchSelector(elem, selector) {
+  if (window.jQuery) {
+    return window.jQuery(elem).is(selector);
+  } else if (typeof selector === 'string') {
+    return elementMatchesSelector.call(elem, selector);
+  } else if (typeof selector === 'object' && selector.length > 0) {
+    return selector.includes(elem);
+  } else if (typeof selector === 'object' && selector.nodeType === 1) {
+    return elem === selector;
+  }
+
+  return false;
+}
+
+/**
+ * Takes the suggested current foccused element. This is useful if the current focused element is known. (see usage for explanation)
+ */
+function getCurrentFocusedElement(eventElement) {
+  var activeElement = eventElement || document.activeElement;
+
+  if (activeElement && activeElement !== document.body) {
+    return activeElement;
+  }
+}
+
+/**
+ *
+ */
+function extend(out) {
+  out = out || {};
+
+  for (var i = 1; i < arguments.length; i++) {
+    if (!arguments[i]) {
+      continue;
+    }
+
+    for (var key in arguments[i]) {
+      if (
+        /*eslint no-prototype-builtins: "off"*/
+        arguments[i].hasOwnProperty(key) &&
+        arguments[i][key] !== undefined
+      ) {
+        out[key] = arguments[i][key];
+      }
+    }
+  }
+
+  return out;
+}
+
+/**
+ *
+ */
+function exclude(elemList, excludedElem) {
+  if (!Array.isArray(excludedElem)) {
+    excludedElem = [excludedElem];
+  }
+
+  for (var i = 0, index; i < excludedElem.length; i++) {
+    index = elemList.indexOf(excludedElem[i]);
+
+    if (index >= 0) {
+      elemList.splice(index, 1);
+    }
+  }
+
+  return elemList;
+}
+
+/**
+ *
+ */
+function isNavigable(elem, sectionId, verifySectionSelector) {
+  if (
+    !elem ||
+    !sectionId ||
+    !_sections[sectionId] ||
+    _sections[sectionId].disabled
+  ) {
+    return false;
+  }
+
+  if (
+    (elem.offsetWidth <= 0 && elem.offsetHeight <= 0) ||
+    elem.hasAttribute('disabled')
+  ) {
+    return false;
+  }
+
+  if (
+    verifySectionSelector &&
+    !matchSelector(elem, _sections[sectionId].selector)
+  ) {
+    return false;
+  }
+
+  if (typeof _sections[sectionId].navigableFilter === 'function') {
+    if (_sections[sectionId].navigableFilter(elem, sectionId) === false) {
+      return false;
+    }
+  } else if (
+    typeof GlobalConfig.navigableFilter === 'function' &&
+    GlobalConfig.navigableFilter(elem, sectionId) === false
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ *
+ */
+function getSectionId(elem) {
+  for (var id in _sections) {
+    if (
+      !_sections[id].disabled &&
+      matchSelector(elem, _sections[id].selector)
+    ) {
+      return id;
+    }
+  }
+}
+
+/**
+ *
+ */
+function getSectionNavigableElements(sectionId) {
+  return parseSelector(_sections[sectionId].selector).filter((elem) => {
+    return isNavigable(elem, sectionId);
+  });
+}
+
+/**
+ *
+ */
+function getSectionDefaultElement(sectionId) {
+  var defaultElement = _sections[sectionId].defaultElement;
+
+  if (!defaultElement) {
+    return null;
+  }
+
+  if (typeof defaultElement === 'string') {
+    // defaultElement = parseSelector(defaultElement)[0]; // bug !
+    var elements = parseSelector(defaultElement);
+
+    // check each element to see if it's navigable and stop when one has been found
+    for (var element of elements) {
+      if (isNavigable(element, sectionId, true)) {
+        return element;
+      }
+    }
+
+    return null;
+  } else if ($ && defaultElement instanceof $) {
+    defaultElement = defaultElement.get(0);
+
+    if (isNavigable(defaultElement, sectionId, true)) {
+      return defaultElement;
+    }
+  }
+
+  return null;
+}
+
+/**
+ *
+ */
+function getSectionLastFocusedElement(sectionId) {
+  var lastFocusedElement = _sections[sectionId].lastFocusedElement;
+
+  if (!isNavigable(lastFocusedElement, sectionId, true)) {
+    return null;
+  }
+
+  return lastFocusedElement;
+}
+
+/**
+ *
+ */
+function fireEvent(elem, type, details, cancelable) {
+  if (arguments.length < 4) {
+    cancelable = true;
+  }
+
+  var evt = document.createEvent('CustomEvent');
+
+  evt.initCustomEvent(EVENT_PREFIX + type, true, cancelable, details);
+
+  return elem.dispatchEvent(evt);
+}
+
+/**
+ *
+ */
+function focusElement(elem, sectionId, direction) {
+  if (!elem) {
+    return false;
+  }
+
+  var currentFocusedElement = getCurrentFocusedElement();
+
+  var focusNscroll = function () {
+    if (
+      _sections[sectionId].scrollOptions !== undefined &&
+      _sections[sectionId].scrollOptions !== '' &&
+      _sections[sectionId].scrollOptions !== null
+    ) {
+      elem.focus({ preventScroll: true });
+      elem.scrollIntoView(_sections[sectionId].scrollOptions);
+    } else if (
+      GlobalConfig.scrollOptions !== undefined &&
+      GlobalConfig.scrollOptions !== '' &&
+      GlobalConfig.scrollOptions !== null
+    ) {
+      elem.focus({ preventScroll: true });
+      elem.scrollIntoView(GlobalConfig.scrollOptions);
+    } else {
+      // Erwanlfrt: I'm afraid that the preventScroll into the "else" may change the behavior of existing app.
+      // https://github.com/spacerefugee/vue-js-spatial-navigation/issues/5
+      elem.focus({ preventScroll: true });
+    }
+  };
+
+  var silentFocus = function () {
+    if (currentFocusedElement) {
+      currentFocusedElement.blur();
+    }
+
+    focusNscroll(elem);
+    focusChanged(elem, sectionId);
+  };
+
+  if (_duringFocusChange) {
+    silentFocus();
+
+    return true;
+  }
+
+  _duringFocusChange = true;
+
+  if (_pause) {
+    silentFocus();
+    _duringFocusChange = false;
+
+    return true;
+  }
+
+  if (currentFocusedElement) {
+    var unfocusProperties = {
+      nextElement: elem,
+      nextSectionId: sectionId,
+      direction: direction,
+      native: false
+    };
+
+    if (!fireEvent(currentFocusedElement, 'willunfocus', unfocusProperties)) {
+      _duringFocusChange = false;
+
+      return false;
+    }
+
+    currentFocusedElement.blur();
+    fireEvent(currentFocusedElement, 'unfocused', unfocusProperties, false);
+  }
+
+  var focusProperties = {
+    previousElement: currentFocusedElement,
+    sectionId: sectionId,
+    direction: direction,
+    native: false
+  };
+
+  if (!fireEvent(elem, 'willfocus', focusProperties)) {
+    _duringFocusChange = false;
+
+    return false;
+  }
+
+  focusNscroll(elem);
+  fireEvent(elem, 'focused', focusProperties, false);
+
+  _duringFocusChange = false;
+
+  focusChanged(elem, sectionId);
+
+  return true;
+}
+
+/**
+ *
+ */
+function focusChanged(elem, sectionId) {
+  if (!sectionId) {
+    sectionId = getSectionId(elem);
+  }
+
+  if (sectionId) {
+    _sections[sectionId].lastFocusedElement = elem;
+    _lastSectionId = sectionId;
+  }
+}
+
+/**
+ *
+ */
+function focusExtendedSelector(selector, direction) {
+  if (selector.charAt(0) === '@') {
+    if (selector.length === 1) {
+      return focusSection();
+    } else {
+      var selectors = selector.split(',');
+
+      for (const selector_ of selectors) {
+        if (selector_) {
+          var sectionId = selector_.trim().slice(1);
+
+          return focusSection(sectionId);
+        }
+      }
+    }
+  } else {
+    var next = parseSelector(selector)[0];
+
+    if (next) {
+      var nextSectionId = getSectionId(next);
+
+      if (isNavigable(next, nextSectionId)) {
+        return focusElement(next, nextSectionId, direction);
+      }
+    }
+  }
+
+  return false;
+}
+
+/**
+ *
+ */
+function focusSection(sectionId) {
+  var range = [];
+  var addRange = function (id) {
+    if (id && !range.includes(id) && _sections[id] && !_sections[id].disabled) {
+      range.push(id);
+    }
+  };
+  if (sectionId) {
+    addRange(sectionId);
+  } else {
+    addRange(_defaultSectionId);
+    addRange(_lastSectionId);
+    Object.keys(_sections).map(addRange);
+  }
+
+  for (var id of range) {
+    var next;
+
+    next =
+      _sections[id].enterTo === 'last-focused'
+        ? getSectionLastFocusedElement(id) ||
+          getSectionDefaultElement(id) ||
+          getSectionNavigableElements(id)[0]
+        : getSectionDefaultElement(id) ||
+          getSectionLastFocusedElement(id) ||
+          getSectionNavigableElements(id)[0];
+
+    if (next) {
+      return focusElement(next, id);
+    }
+  }
+
+  return false;
+}
+
+/**
+ *
+ */
+function fireNavigatefailed(elem, direction) {
+  fireEvent(
+    elem,
+    'navigatefailed',
+    {
+      direction: direction
+    },
+    false
+  );
+}
+
+/**
+ *
+ */
+function gotoLeaveFor(sectionId, direction) {
+  if (
+    _sections[sectionId].leaveFor &&
+    _sections[sectionId].leaveFor[direction] !== undefined
+  ) {
+    var next = _sections[sectionId].leaveFor[direction];
+
+    if (typeof next === 'string') {
+      if (next === '') {
+        return null;
+      }
+      return focusExtendedSelector(next, direction);
+    }
+
+    if (window.jQuery && next instanceof window.jQuery) {
+      next = next.get(0);
+    }
+
+    var nextSectionId = getSectionId(next);
+
+    if (isNavigable(next, nextSectionId)) {
+      return focusElement(next, nextSectionId, direction);
+    }
+  }
+
+  return false;
+}
+
+/**
+ *
+ */
+function focusNext(direction, currentFocusedElement, currentSectionId) {
+  var extSelector = currentFocusedElement.getAttribute('data-sn-' + direction);
+
+  if (typeof extSelector === 'string') {
+    if (extSelector === '' || !focusExtendedSelector(extSelector, direction)) {
+      fireNavigatefailed(currentFocusedElement, direction);
+
+      return false;
+    }
+
+    return true;
+  }
+
+  const sectionNavigableElements = {};
+  let allNavigableElements = [];
+
+  for (const id in _sections) {
+    sectionNavigableElements[id] = getSectionNavigableElements(id);
+    allNavigableElements = allNavigableElements.concat(
+      sectionNavigableElements[id]
+    );
+  }
+
+  const config = extend({}, GlobalConfig, _sections[currentSectionId]);
+  let next;
+
+  if (config.restrict === 'self-only' || config.restrict === 'self-first') {
+    var currentSectionNavigableElements =
+      sectionNavigableElements[currentSectionId];
+
+    next = navigate(
+      currentFocusedElement,
+      direction,
+      exclude(currentSectionNavigableElements, currentFocusedElement),
+      config
+    );
+
+    if (!next && config.restrict === 'self-first') {
+      next = navigate(
+        currentFocusedElement,
+        direction,
+        exclude(allNavigableElements, currentSectionNavigableElements),
+        config
+      );
+    }
+  } else {
+    next = navigate(
+      currentFocusedElement,
+      direction,
+      exclude(allNavigableElements, currentFocusedElement),
+      config
+    );
+  }
+
+  if (next) {
+    _sections[currentSectionId].previous = {
+      target: currentFocusedElement,
+      destination: next,
+      reverse: REVERSE[direction]
+    };
+
+    var nextSectionId = getSectionId(next);
+
+    if (currentSectionId !== nextSectionId) {
+      var result = gotoLeaveFor(currentSectionId, direction);
+
+      if (result) {
+        return true;
+      } else if (result === null) {
+        fireNavigatefailed(currentFocusedElement, direction);
+
+        return false;
+      }
+
+      var enterToElement;
+
+      switch (_sections[nextSectionId].enterTo) {
+        case 'last-focused': {
+          enterToElement =
+            getSectionLastFocusedElement(nextSectionId) ||
+            getSectionDefaultElement(nextSectionId);
+          break;
+        }
+        case 'default-element': {
+          enterToElement = getSectionDefaultElement(nextSectionId);
+          break;
+        }
+      }
+
+      if (enterToElement) {
+        next = enterToElement;
+      }
+    }
+
+    return focusElement(next, nextSectionId, direction);
+  } else if (gotoLeaveFor(currentSectionId, direction)) {
+    return true;
+  }
+
+  fireNavigatefailed(currentFocusedElement, direction);
+
+  return false;
+}
+
+/**
+ *
+ */
+function onKeyDown(evt) {
+  if (
+    !_sectionCount ||
+    _pause ||
+    evt.altKey ||
+    evt.ctrlKey ||
+    evt.metaKey ||
+    evt.shiftKey
+  ) {
+    return;
+  }
+
+  var currentFocusedElement;
+  var preventDefault = function () {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    return false;
+  };
+
+  var direction = KEYMAPPING[evt.keyCode];
+
+  if (!direction) {
+    if (evt.keyCode == 13) {
+      currentFocusedElement = getCurrentFocusedElement(evt.target);
+
+      if (
+        currentFocusedElement &&
+        getSectionId(currentFocusedElement) &&
+        !fireEvent(currentFocusedElement, 'enter-down')
+      ) {
+        return preventDefault();
+      }
+    }
+
+    return;
+  }
+
+  // There is currently some accessibility support for keyboard navigation however its very basic (supports lists mostly).
+  // This  interferes with this plugin in the sense that when you are trying to navigate a list (e.g navigation drawer),
+  // any direction key skips 1 item. For instance if the navigation drawer has home-movies-series and you want to navigate from home to movies, when you press the down key, it skips movies and goes to series.
+  // This is because the framework navigates to movies then this plugin navigates to series. So what you will see is that movies is skipped.
+  // passing the keydown target resolves this issue. This should me monitored in case it regresses
+  currentFocusedElement = getCurrentFocusedElement(evt.target);
+
+  if (!currentFocusedElement) {
+    if (_lastSectionId) {
+      currentFocusedElement = getSectionLastFocusedElement(_lastSectionId);
+    }
+
+    if (!currentFocusedElement) {
+      focusSection();
+
+      return preventDefault();
+    }
+  }
+
+  var currentSectionId = getSectionId(currentFocusedElement);
+
+  if (!currentSectionId) {
+    return;
+  }
+
+  var willmoveProperties = {
+    direction: direction,
+    sectionId: currentSectionId,
+    cause: 'keydown'
+  };
+
+  if (fireEvent(currentFocusedElement, 'willmove', willmoveProperties)) {
+    focusNext(direction, currentFocusedElement, currentSectionId);
+  }
+
+  return preventDefault();
+}
+
+/**
+ * Keyup event listener to grab
+ */
+function onKeyUp(evt) {
+  if (evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) {
+    return;
+  }
+
+  if (!_pause && _sectionCount && evt.keyCode == 13) {
+    var currentFocusedElement = getCurrentFocusedElement();
+
+    if (currentFocusedElement && getSectionId(currentFocusedElement)) {
+      if (currentFocusedElement.click()) {
+        evt.preventDefault();
+        evt.stopPropagation();
+      } else if (!fireEvent(currentFocusedElement, 'enter-up')) {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }
+    }
+  }
+}
+
+/**
+ * Fire spatial navigation event when an element is focussed
+ */
+function onFocus(evt) {
+  var target = evt.target;
+
+  if (
+    target !== window &&
+    target !== document &&
+    _sectionCount &&
+    !_duringFocusChange
+  ) {
+    var sectionId = getSectionId(target);
+
+    if (sectionId) {
+      if (_pause) {
+        focusChanged(target, sectionId);
+
+        return;
+      }
+
+      var focusProperties = {
+        sectionId: sectionId,
+        native: true
+      };
+
+      if (fireEvent(target, 'willfocus', focusProperties)) {
+        fireEvent(target, 'focused', focusProperties, false);
+        focusChanged(target, sectionId);
+      } else {
+        _duringFocusChange = true;
+        target.blur();
+        _duringFocusChange = false;
+      }
+    }
+  }
+}
+
+/**
+ *
+ */
+function onBlur(evt) {
+  var target = evt.target;
+
+  if (
+    target !== window &&
+    target !== document &&
+    !_pause &&
+    _sectionCount &&
+    !_duringFocusChange &&
+    getSectionId(target)
+  ) {
+    var unfocusProperties = {
+      native: true
+    };
+
+    if (fireEvent(target, 'willunfocus', unfocusProperties)) {
+      fireEvent(target, 'unfocused', unfocusProperties, false);
+    } else {
+      _duringFocusChange = true;
+      setTimeout(() => {
+        target.focus();
+        _duringFocusChange = false;
+      });
+    }
+  }
+}
+
+/**
+ * Focus when body is clicked
+ */
+function onBodyClick() {
+  if (
+    document.activeElement === document.body &&
+    _lastSectionId &&
+    _sections[_lastSectionId].lastFocusedElement
+  ) {
+    focusElement(_sections[_lastSectionId].lastFocusedElement, _lastSectionId);
+  }
+}
+
+// function onClick(event) {
+//   var currentFocusedElement = getCurrentFocusedElement();
+//   if (
+//     event.target == currentFocusedElement &&
+//     getSectionId(currentFocusedElement)
+//   ) {
+//     if (!fireEvent(currentFocusedElement, "enter-up")) {
+//       evt.preventDefault();
+//       evt.stopPropagation();
+//     }
+//   }
+// }
+
+/*******************/
+/* Public Function */
+/*******************/
+var SpatialNavigation = {
+  init: function () {
+    if (!_ready) {
+      window.addEventListener('keydown', onKeyDown);
+      window.addEventListener('keyup', onKeyUp);
+      window.addEventListener('focusin', onFocus, true);
+      window.addEventListener('blur', onBlur, true);
+      // window.addEventListener("click", onClick);
+      document.body.addEventListener('click', onBodyClick);
+      _ready = true;
+    }
+  },
+
+  uninit: function () {
+    window.removeEventListener('blur', onBlur, true);
+    window.removeEventListener('focus', onFocus, true);
+    window.removeEventListener('keyup', onKeyUp);
+    window.removeEventListener('keydown', onKeyDown);
+    // window.removeEventListener("click", onClick);
+    document.body.removeEventListener('click', onBodyClick);
+    SpatialNavigation.clear();
+    _idPool = 0;
+    _ready = false;
+  },
+
+  clear: function () {
+    _sections = {};
+    _sectionCount = 0;
+    _defaultSectionId = '';
+    _lastSectionId = '';
+    _duringFocusChange = false;
+  },
+
+  reset: function (sectionId) {
+    if (sectionId) {
+      _sections[sectionId].lastFocusedElement = undefined;
+      _sections[sectionId].previous = undefined;
+    } else {
+      for (const id in _sections) {
+        const section = _sections[id];
+
+        section.lastFocusedElement = undefined;
+        section.previous = undefined;
+      }
+    }
+  },
+
+  // set(<config>);
+  // set(<sectionId>, <config>);
+  set: function () {
+    var sectionId, config;
+    if (typeof arguments[0] === 'object') {
+      config = arguments[0];
+    } else if (
+      typeof arguments[0] === 'string' &&
+      typeof arguments[1] === 'object'
+    ) {
+      sectionId = arguments[0];
+      config = arguments[1];
+
+      if (!_sections[sectionId]) {
+        throw new Error('Section "' + sectionId + '" doesn\'t exist!');
+      }
+    } else {
+      return;
+    }
+
+    for (var key in config) {
+      if (typeof GlobalConfig[key] !== 'undefined') {
+        if (sectionId) {
+          _sections[sectionId][key] = config[key];
+        } else if (typeof config[key] !== 'undefined') {
+          GlobalConfig[key] = config[key];
+        }
+      }
+    }
+
+    if (sectionId) {
+      // remove "undefined" items
+      _sections[sectionId] = extend({}, _sections[sectionId]);
+    }
+  },
+
+  // add(<config>);
+  // add(<sectionId>, <config>);
+  add: function () {
+    var sectionId;
+    var config = {};
+
+    if (typeof arguments[0] === 'object') {
+      config = arguments[0];
+    } else if (
+      typeof arguments[0] === 'string' &&
+      typeof arguments[1] === 'object'
+    ) {
+      sectionId = arguments[0];
+      config = arguments[1];
+    }
+
+    if (!sectionId) {
+      sectionId = typeof config.id === 'string' ? config.id : generateId();
+    }
+
+    if (_sections[sectionId]) {
+      throw new Error('Section "' + sectionId + '" has already existed!');
+    }
+
+    _sections[sectionId] = {};
+    _sectionCount++;
+
+    SpatialNavigation.set(sectionId, config);
+
+    return sectionId;
+  },
+
+  remove: function (sectionId) {
+    if (!sectionId || typeof sectionId !== 'string') {
+      throw new Error('Please assign the "sectionId"!');
+    }
+
+    if (_sections[sectionId]) {
+      _sections[sectionId] = undefined;
+      _sections = extend({}, _sections);
+      _sectionCount--;
+
+      if (_lastSectionId === sectionId) {
+        _lastSectionId = '';
+      }
+
+      return true;
+    }
+
+    return false;
+  },
+
+  disable: function (sectionId) {
+    if (_sections[sectionId]) {
+      _sections[sectionId].disabled = true;
+
+      return true;
+    }
+
+    return false;
+  },
+
+  enable: function (sectionId) {
+    if (_sections[sectionId]) {
+      _sections[sectionId].disabled = false;
+
+      return true;
+    }
+
+    return false;
+  },
+
+  pause: function () {
+    _pause = true;
+  },
+
+  resume: function () {
+    _pause = false;
+  },
+
+  // focus([silent])
+  // focus(<sectionId>, [silent])
+  // focus(<extSelector>, [silent])
+  // Note: "silent" is optional and default to false
+  focus: function (elem, silent) {
+    var result = false;
+
+    if (silent === undefined && typeof elem === 'boolean') {
+      silent = elem;
+      elem = undefined;
+    }
+
+    var autoPause = !_pause && silent;
+
+    if (autoPause) {
+      SpatialNavigation.pause();
+    }
+
+    if (elem) {
+      if (typeof elem === 'string') {
+        result = _sections[elem]
+          ? focusSection(elem)
+          : focusExtendedSelector(elem);
+      } else {
+        if (window.jQuery && elem instanceof window.jQuery) {
+          elem = elem.get(0);
+        }
+
+        var nextSectionId = getSectionId(elem);
+
+        if (isNavigable(elem, nextSectionId)) {
+          result = focusElement(elem, nextSectionId);
+        }
+      }
+    } else {
+      result = focusSection();
+    }
+
+    if (autoPause) {
+      SpatialNavigation.resume();
+    }
+
+    return result;
+  },
+
+  // move(<direction>)
+  // move(<direction>, <selector>)
+  move: function (direction, selector) {
+    direction = direction.toLowerCase();
+
+    if (!REVERSE[direction]) {
+      return false;
+    }
+
+    var elem = selector
+      ? parseSelector(selector)[0]
+      : getCurrentFocusedElement();
+
+    if (!elem) {
+      return false;
+    }
+
+    var sectionId = getSectionId(elem);
+
+    if (!sectionId) {
+      return false;
+    }
+
+    var willmoveProperties = {
+      direction: direction,
+      sectionId: sectionId,
+      cause: 'api'
+    };
+
+    if (!fireEvent(elem, 'willmove', willmoveProperties)) {
+      return false;
+    }
+
+    return focusNext(direction, elem, sectionId);
+  },
+
+  // makeFocusable()
+  // makeFocusable(<sectionId>)
+  makeFocusable: function (sectionId) {
+    var doMakeFocusable = function (section) {
+      var tabIndexIgnoreList =
+        section.tabIndexIgnoreList === undefined
+          ? GlobalConfig.tabIndexIgnoreList
+          : section.tabIndexIgnoreList;
+
+      for (const elem of parseSelector(section.selector)) {
+        if (
+          !matchSelector(elem, tabIndexIgnoreList) &&
+          !elem.getAttribute('tabindex')
+        ) {
+          elem.setAttribute('tabindex', '-1');
+        }
+      }
+    };
+
+    if (sectionId) {
+      if (_sections[sectionId]) {
+        doMakeFocusable(_sections[sectionId]);
+      } else {
+        throw new Error('Section "' + sectionId + '" doesn\'t exist!');
+      }
+    } else {
+      for (var id in _sections) {
+        doMakeFocusable(_sections[id]);
+      }
+    }
+  },
+
+  setDefaultSection: function (sectionId) {
+    if (!sectionId) {
+      _defaultSectionId = '';
+    } else if (_sections[sectionId]) {
+      _defaultSectionId = sectionId;
+    } else {
+      throw new Error('Section "' + sectionId + '" doesn\'t exist!');
+    }
+  }
+};
+
+window.SpatialNavigation = SpatialNavigation;
+
+window.SpatialNavigation.init();
+
+export default SpatialNavigation;
diff --git a/frontend/types/global/components.d.ts b/frontend/types/global/components.d.ts
index 87a93e5c61d..bccc7a53c61 100644
--- a/frontend/types/global/components.d.ts
+++ b/frontend/types/global/components.d.ts
@@ -173,7 +173,6 @@ declare module '@vue/runtime-core' {
     VListSubheader: typeof import('vuetify/components')['VListSubheader']
     VMain: typeof import('vuetify/components')['VMain']
     VMenu: typeof import('vuetify/components')['VMenu']
-    VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
     VolumeSlider: typeof import('./../../src/components/Layout/VolumeSlider.vue')['default']
     VOverlay: typeof import('vuetify/components')['VOverlay']
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']