diff --git a/src/components/Keycodes.vue b/src/components/Keycodes.vue
index 17332b79d6..a13d469323 100644
--- a/src/components/Keycodes.vue
+++ b/src/components/Keycodes.vue
@@ -58,13 +58,16 @@
   </div>
 </template>
 <script>
-import { mapState, mapGetters, mapMutations } from 'vuex';
+import { mapState, mapMutations } from 'vuex';
+import * as pinia from 'pinia';
 import isUndefined from 'lodash/isUndefined';
 import debounce from 'lodash/debounce';
 import Keycode from '@/components/Keycode.vue';
 import Space from '@/components/Space.vue';
 import store from '@/store';
 
+import { useKeycodesStore } from '../store/keycodes.js';
+
 export default {
   name: 'keycodes-component',
   components: { Keycode, Space },
@@ -78,9 +81,13 @@ export default {
     this.debouncedSetSearchFilter = debounce(this.setSearchFilter, 500);
   },
   computed: {
-    ...mapGetters('keycodes', ['keycodes']),
+    ...pinia.mapState(useKeycodesStore, [
+      'keycodes',
+      'searchFilter',
+      'searchCounters',
+      'active'
+    ]),
     ...mapState('app', ['configuratorSettings']),
-    ...mapState('keycodes', ['searchFilter', 'searchCounters', 'active']),
     activeTab() {
       return this.keycodesByGroup[this.active];
     },
@@ -108,7 +115,7 @@ export default {
   },
   methods: {
     ...mapMutations('app', ['setMessage', 'stopListening', 'startListening']),
-    ...mapMutations('keycodes', ['setSearchFilter', 'changeActive']),
+    ...pinia.mapActions(useKeycodesStore, ['setSearchFilter', 'changeActive']),
     getComponent(code) {
       return isUndefined(code) ? Space : Keycode;
     },
diff --git a/src/components/VisualTesterKeymap.vue b/src/components/VisualTesterKeymap.vue
index 9c84759df3..c370b3d1f5 100644
--- a/src/components/VisualTesterKeymap.vue
+++ b/src/components/VisualTesterKeymap.vue
@@ -93,6 +93,7 @@ import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
 import BaseKeymap from '@/components/BaseKeymap.vue';
 import TesterKey from '@/components/TesterKey.vue';
 import { Howl } from 'howler';
+import { useKeycodesStore } from '../store/keycodes';
 
 export default {
   name: 'VisualTesterKeymap',
@@ -185,7 +186,8 @@ export default {
   },
   async mounted() {
     this.createKeyListeners();
-    this.$store.commit('keycodes/updateKeycodeNames');
+    const keycodesStore = useKeycodesStore();
+    keycodesStore.updateKeycodeNames();
     await this.init();
     this.setSize(this.calculateMax(this.layout));
   },
diff --git a/src/store/index.js b/src/store/index.js
index c443debf29..598880a22e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,7 +3,6 @@ import Vuex from 'vuex';
 import { createPinia, PiniaVuePlugin } from 'pinia';
 import app from './modules/app';
 import keymap from './modules/keymap';
-import keycodes from './modules/keycodes';
 import tester from './modules/tester';
 
 Vue.use(Vuex);
@@ -15,7 +14,6 @@ export default new Vuex.Store({
   modules: {
     app,
     keymap,
-    keycodes,
     tester
   },
   state: {},
diff --git a/src/store/keycodes.js b/src/store/keycodes.js
new file mode 100644
index 0000000000..bde6fe1c19
--- /dev/null
+++ b/src/store/keycodes.js
@@ -0,0 +1,218 @@
+import { defineStore } from 'pinia';
+import isUndefined from 'lodash/isUndefined';
+import store from '@/store';
+import keymapExtras from '@/i18n/keymap_extras';
+
+import ansi from './modules/keycodes/ansi';
+import iso_jis from './modules/keycodes/iso-jis';
+import quantum from './modules/keycodes/quantum';
+import settings from './modules/keycodes/kb-settings';
+import media from './modules/keycodes/app-media-mouse';
+import steno from './modules/keycodes/steno';
+
+const keycodePickerTabLayout = {
+  ANSI_ISO: [...ansi, ...iso_jis],
+  ISO_ANSI: [...iso_jis, ...ansi],
+  special: [...quantum, ...settings, ...media]
+};
+
+/**
+ * Validates the os keyboard layout and if not valid returns a default of 'keymap_us'.
+ * @returns {string}
+ */
+function getOSKeyboardLayout() {
+  let osKeyboardLayout = store.getters['app/osKeyboardLayout'];
+  if (isUndefined(osKeyboardLayout) || !keymapExtras[osKeyboardLayout]) {
+    const fallbackOSKeyboardLayout = 'keymap_us';
+    console.log(
+      `The stored OS keyboard layout value (${osKeyboardLayout}) is not a valid value! Falling back to '${fallbackOSKeyboardLayout}'.`
+    );
+    store.commit('app/setOSKeyboardLayout', fallbackOSKeyboardLayout);
+    osKeyboardLayout = fallbackOSKeyboardLayout;
+  }
+  return osKeyboardLayout;
+}
+
+function isANSI() {
+  return keymapExtras[getOSKeyboardLayout()].isANSI;
+}
+
+/**
+ * Remap keycodes to their Locale equivalent for the OS layout.
+ * @param {Object} keycodeLUT
+ * @param {KeycodeDefinition|KeycodeLabel|WidthPlaceholder} keycodeObject
+ * @returns {KeycodeDefinition|WidthPlaceholder|KeycodeLabel}
+ */
+function toLocaleKeycode(keycodeLUT, keycodeObject) {
+  console.assert(!isUndefined(keycodeLUT));
+  if (!keycodeObject.name || !keycodeObject.code) {
+    // Not a KeycodeDefinition; return as is
+    return keycodeObject;
+  }
+  if (keycodeLUT[keycodeObject.code]) {
+    // Clone in a shallow manner the original keycodeObject object and
+    // override the name, title, and possibly other fields
+    return { ...keycodeObject, ...keycodeLUT[keycodeObject.code] };
+  } else {
+    return keycodeObject;
+  }
+}
+
+/**
+ * Used to dynamically generate the tab data for they keycode
+ * display. This UI is customized based on the OS keyboard layout
+ * selected.
+ *
+ * @param {string} osKeyboardLayout
+ * @param {boolean} isSteno
+ * @returns {Array.<KeycodeDefinition|KeycodeLabel|WidthPlaceholder}
+ */
+function generateKeycodes(osKeyboardLayout, isSteno = false) {
+  store.commit('app/setIso', !isANSI());
+  const keycodes = [
+    ...(isANSI()
+      ? keycodePickerTabLayout.ANSI_ISO
+      : keycodePickerTabLayout.ISO_ANSI),
+    ...keycodePickerTabLayout.special,
+    ...(isSteno ? steno : [])
+  ];
+  const { keycodeLUT } = keymapExtras[getOSKeyboardLayout()];
+  return keycodes.map((keycodeObject) =>
+    toLocaleKeycode(keycodeLUT, keycodeObject)
+  );
+}
+
+/**
+ * Counts the number of potential matches in each keycode array.
+ * The keycode arrays represent the source data used to render the keycodes
+ * display. This count is used to give hints of matches per tab in the UI.
+ *
+ * @param {string} filter
+ * @param {Array.<KeycodeDefinition|KeycodeLabel|WidthPlaceholder>} collection of keycode objects
+ * @returns
+ */
+function countMatches(filter, collection) {
+  filter = filter.toUpperCase();
+  return collection.reduce((matchCount, { code, name, title }) => {
+    if (!isUndefined(code)) {
+      if (
+        code.includes(filter) ||
+        name?.toUpperCase().includes(filter) ||
+        title?.toUpperCase().includes(filter)
+      ) {
+        matchCount += 1;
+      }
+    }
+    return matchCount;
+  }, 0);
+}
+
+/**
+ * Use Options style for now.
+ */
+export const useKeycodesStore = defineStore('keycodes', {
+  /**
+   *
+   * @returns {KeycodeStoreState}
+   */
+  state: () => ({
+    keycodes: [
+      ...keycodePickerTabLayout.ANSI_ISO,
+      ...keycodePickerTabLayout.special
+    ],
+    searchFilter: '',
+    searchCounters: {
+      ANSI: 0,
+      'ISO/JIS': 0,
+      Quantum: 0,
+      KeyboardSettings: 0,
+      AppMediaMouse: 0
+    },
+    steno: false,
+    active: 'ANSI'
+  }),
+  getters: {
+    lookupKeyPressCode: () => (searchTerm) =>
+      this.lookupKeycode(searchTerm, true),
+    lookupKeycode:
+      (state) =>
+      (searchTerm, isKeys = false) =>
+        state.keycodes.find(
+          ({ code, keys }) =>
+            code === searchTerm || (isKeys && keys && keys === searchTerm)
+        )
+  },
+  actions: {
+    changeActive(newActive) {
+      this.active = newActive;
+    },
+    enableSteno() {
+      this.steno = true;
+      this.keycodes = generateKeycodes(getOSKeyboardLayout(), this.steno);
+    },
+    disableSteno() {
+      this.steno = false;
+      this.keycodes = generateKeycodes(getOSKeyboardLayout(), this.steno);
+    },
+    updateKeycodeNames() {
+      this.keycodes = generateKeycodes(getOSKeyboardLayout(), this.steno);
+    },
+    setSearchFilter(newVal) {
+      this.searchFilter = newVal;
+      if (this.searchFilter !== '') {
+        this.searchCounters = {
+          ANSI: countMatches(this.searchFilter, ansi),
+          'ISO/JIS': countMatches(this.searchFilter, iso_jis),
+          Quantum: countMatches(this.searchFilter, quantum),
+          KeyboardSettings: countMatches(this.searchFilter, settings),
+          AppMediaMouse: countMatches(this.searchFilter, media)
+        };
+      }
+    }
+  }
+});
+
+/**
+ * @typedef {Object} KeycodeLabel - used to label groups of keycodes
+ * @property {string} label - Label name
+ * @property {'label'} width - always the special indicator 'label'
+ * @property {boolean} [group] - group following keycodes under this
+ * @property {string} [icon] - font-awesome icon to display
+ * @property {string} [iconClass] - css class to apply
+ */
+
+/**
+ * @typedef {Object} WidthPlaceholder - used for spacing
+ * @property {number} width - width in Key Units * 1000. e.g. 1U = 1000, 2U = 2000.
+ */
+
+/**
+ * @typedef {Object} KeycodeDefinition - metadata about a keycode
+ * @property {string} name - UI display label for the keycode
+ * @property {string} code - QMK keycode defintion
+ * @property {string} [keys] - javascript keypress id. Used by keyboard handler
+ * @property {number} [width] - width in Key Units * 1000. e.g. 1U = 1000, 2U = 2000.
+ * @property {'text'|'layer'|'container'|'layer-container'} [type]
+ * @property {number} [layer]
+ * @property {string} [title] - help text for hover
+ */
+
+/**
+ * @typedef {{}
+ *  & Record<'ISO/JIS', number>
+ *  & Record<'ANSI', number>
+ *  & Record<'Quantum', number>
+ *  & Record<'KeyboardSettings', number>
+ *  & Record<'AppMediaMouse', number>
+ * } SearchCounters
+ *
+ */
+
+/**
+ * @typedef {Object} KeycodeStoreState
+ * @property {Array.<KeycodeDefinition|KeycodeLabel|WidthPlaceholder>} keycodes - active keycodes
+ * @property {string} searchFilter - currently search filter
+ * @property {SearchCounters} searchCounters - count of matching keycodes per tab
+ * @property {boolean} steno - is steno tab active
+ * @property {'ANSI'|'ISO/JIS'|'AppMediaMouse'|'Quantum'|'Steno'|'KeyboardSettings'} active - active tab
+ */
diff --git a/src/store/modules/app/actions.js b/src/store/modules/app/actions.js
index 6383affd86..52a6282780 100644
--- a/src/store/modules/app/actions.js
+++ b/src/store/modules/app/actions.js
@@ -7,8 +7,15 @@ import {
 } from '@/store/modules/constants';
 import { getPreferredLayout, getExclusionList } from '@/util';
 import { localStorageSet, CONSTS } from '@/store/localStorage';
+import { useKeycodesStore } from '../../keycodes.js';
 
-const steno_keyboards = ['gergo', 'georgi'];
+const steno_keyboards = new Set([
+  'gboards/gergo',
+  'gboards/georgi',
+  'stenokeyboards/the_uni/pro_micro',
+  'stenokeyboards/the_uni/rp_2040',
+  'stenokeyboards/the_uni/usb_c'
+]);
 
 const actions = {
   /**
@@ -55,7 +62,10 @@ const actions = {
    */
   async loadKeymapFromUrl(_, url) {
     return fetch(url).then(async (r) => {
-      return await r.json();
+      if (r.ok) {
+        return await r.json();
+      }
+      console.error('Error fetching keymap from URL', r.statusText);
     });
   },
   /**
@@ -86,13 +96,11 @@ const actions = {
     commit('setLayout', nextLayout);
 
     // enable and disable steno in keycode UI
-    const stenoCheck = steno_keyboards.reduce((_, keeb) => {
-      return { [keeb]: true };
-    }, {});
-    if (stenoCheck[keyboard]) {
-      this.commit('keycodes/enableSteno');
+    const keycodesStore = useKeycodesStore();
+    if (steno_keyboards.has(keyboard)) {
+      keycodesStore.enableSteno();
     } else {
-      this.commit('keycodes/disableSteno');
+      keycodesStore.disableSteno();
     }
 
     if (clearKeymap) {
@@ -147,11 +155,12 @@ const actions = {
   },
   async changeOSKeyboardLayout({ dispatch, state, commit }, osLayout) {
     commit('setOSKeyboardLayout', osLayout);
-    // Important to call keycodes/updateKeycodeNames *before* keymap/updateKeycodeNames.
-    this.commit('keycodes/updateKeycodeNames');
+    const keycodesStore = useKeycodesStore();
+
+    // Important to call keycodes/updatekeycodeNames *before* keymap/updateKeycodeNames.
+    keycodesStore.updateKeycodeNames();
     this.commit('keymap/updateKeycodeNames');
-    this.commit(
-      'keycodes/changeActive',
+    keycodesStore.changeActive(
       state.configuratorSettings.iso ? 'ISO/JIS' : 'ANSI'
     );
     this.commit(
@@ -230,10 +239,8 @@ const actions = {
   async initKeypressListener({ commit }) {
     const store = this;
     const keypressListener = new keypress.Listener();
-    const conf = generateKeypressCombos(
-      store,
-      store.getters['keycodes/keycodes']
-    );
+    const keycodesStore = useKeycodesStore();
+    const conf = generateKeypressCombos(store, keycodesStore.keycodes);
     keypressListener.register_many(conf);
     keypressListener.simple_combo('ctrl shift i', () => {
       if (!store.state.app.isPreview) {
@@ -269,6 +276,4 @@ const actions = {
   }
 };
 
-export default {
-  ...actions
-};
+export default actions;
diff --git a/src/store/modules/app/getters.js b/src/store/modules/app/getters.js
index fd0371663c..3733f0d59e 100644
--- a/src/store/modules/app/getters.js
+++ b/src/store/modules/app/getters.js
@@ -35,6 +35,4 @@ const getters = {
   }
 };
 
-export default {
-  ...getters
-};
+export default getters;
diff --git a/src/store/modules/app/keypress-utils.js b/src/store/modules/app/keypress-utils.js
index 83ceb00ad2..2d8910b62e 100644
--- a/src/store/modules/app/keypress-utils.js
+++ b/src/store/modules/app/keypress-utils.js
@@ -1,6 +1,5 @@
-import values from 'lodash/values';
-import partial from 'lodash/partial';
 import isUndefined from 'lodash/isUndefined';
+import { useKeycodesStore } from '../../keycodes';
 
 const keyLUT = {
   ContextMenu: 'KC_APP'
@@ -47,13 +46,14 @@ export function generateKeypressCombos(store, _keycodes) {
       return acc;
     }, {});
 
-  return values(combos).map(generateKeypressHandler.bind(null, store));
+  return Object.values(combos).map(generateKeypressHandler.bind(null, store));
 }
 
 // Share the code between keydown handlers
 // Use currying to bind the meta parameter at runtime.
 export function keydownHandler(store, meta, ev) {
   let _meta = meta;
+  const keycodesStore = useKeycodesStore();
 
   // detect numpad
   switch (meta.code) {
@@ -74,7 +74,7 @@ export function keydownHandler(store, meta, ev) {
     case 'KC_DOT':
     case 'KC_EQL':
       if (ev.location === ev.DOM_KEY_LOCATION_NUMPAD) {
-        _meta = store.getters['keycodes/lookupKeycode'](numPadLUT[meta.code]);
+        _meta = keycodesStore.lookupKeycode(numPadLUT[meta.code]);
       }
       break;
   }
@@ -95,13 +95,14 @@ export function modHandler(store, meta, ev) {
   }
 
   // handle special cases eg. ContextMenu
+  const keycodesStore = useKeycodesStore();
   const special = keyLUT[ev.key];
   if (!isUndefined(special)) {
-    _meta = store.getters['keycodes/lookupKeycode'](special);
+    _meta = keycodesStore.lookupKeycode(special);
   } else {
     // detect left and right mods
     if (ev.location === ev.DOM_KEY_LOCATION_RIGHT) {
-      _meta = store.getters['keycodes/lookupKeycode'](modsLUT[meta.code]);
+      _meta = keycodesStore.lookupKeycode(modsLUT[meta.code]);
     }
   }
   store.commit('keymap/setKeycode', { _code: _meta.code });
@@ -109,26 +110,27 @@ export function modHandler(store, meta, ev) {
 
 // generate a keypress combo handler per keycode
 export function generateKeypressHandler(store, keycode) {
-  const meta = store.getters['keycodes/lookupKeycode'](keycode.code);
+  const keycodesStore = useKeycodesStore();
+  const meta = keycodesStore.lookupKeycode(keycode.code);
   switch (meta.code) {
     case 'KC_LGUI':
     case 'KC_LALT':
     case 'KC_LCTL':
       return {
         keys: keycode.keys,
-        on_keydown: partial(modHandler, store, meta),
+        on_keydown: modHandler.bind(null, store, meta),
         prevent_default: true
       };
     case 'KC_LSFT':
       return {
         keys: keycode.keys,
-        on_keyup: partial(modHandler, store, meta),
+        on_keyup: modHandler.bind(null, store, meta),
         prevent_default: true
       };
     default:
       return {
         keys: keycode.keys,
-        on_keydown: partial(keydownHandler, store, meta),
+        on_keydown: keydownHandler.bind(null, store, meta),
         prevent_default: true
       };
   }
diff --git a/src/store/modules/app/mutations.js b/src/store/modules/app/mutations.js
index bd8dead14d..d670d6abd2 100644
--- a/src/store/modules/app/mutations.js
+++ b/src/store/modules/app/mutations.js
@@ -200,6 +200,4 @@ const mutations = {
   }
 };
 
-export default {
-  ...mutations
-};
+export default mutations;
diff --git a/src/store/modules/app/state.js b/src/store/modules/app/state.js
index 2c71e51312..f0b8db1311 100644
--- a/src/store/modules/app/state.js
+++ b/src/store/modules/app/state.js
@@ -37,9 +37,9 @@ const state = {
   keyboard: '',
   keyboardMeta: {},
   configuratorSettings: loadSettings(),
-  keyboards: [],
+  keyboards: [], // current filtered view keyboards
   appInitialized: false,
-  _keyboards: [],
+  _keyboards: [], // upstream source list of keyboards
   layout: '',
   layouts: {},
   keymapName: '',
@@ -83,6 +83,4 @@ const state = {
   snowflakes: false
 };
 
-export default {
-  ...state
-};
+export default state;
diff --git a/src/store/modules/keycodes/index.js b/src/store/modules/keycodes/index.js
deleted file mode 100644
index 3b96569ef8..0000000000
--- a/src/store/modules/keycodes/index.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import isUndefined from 'lodash/isUndefined';
-import ansi from './ansi';
-import iso_jis from './iso-jis';
-import quantum from './quantum';
-import settings from './kb-settings';
-import media from './app-media-mouse';
-import steno from './steno';
-import store from '@/store';
-import keymapExtras from '@/i18n/keymap_extras';
-
-const keycodePickerTabLayout = {
-  ANSI_ISO: [...ansi, ...iso_jis],
-  ISO_ANSI: [...iso_jis, ...ansi],
-  special: [...quantum, ...settings, ...media]
-};
-
-const state = {
-  keycodes: [
-    ...keycodePickerTabLayout.ANSI_ISO,
-    ...keycodePickerTabLayout.special
-  ],
-  searchFilter: '',
-  searchCounters: {
-    ANSI: 0,
-    'ISO/JIS': 0,
-    Quantum: 0,
-    KeyboardSettings: 0,
-    AppMediaMouse: 0
-  },
-  steno: false,
-  active: 'ANSI'
-};
-
-function getOSKeyboardLayout() {
-  let osKeyboardLayout = store.getters['app/osKeyboardLayout'];
-  if (
-    isUndefined(osKeyboardLayout) ||
-    !Object.keys(keymapExtras).includes(osKeyboardLayout)
-  ) {
-    const fallbackOSKeyboardLayout = 'keymap_us';
-    console.log(
-      `The stored OS keyboard layout value (${osKeyboardLayout}) is not a valid value! Falling back to '${fallbackOSKeyboardLayout}'.`
-    );
-    store.commit('app/setOSKeyboardLayout', fallbackOSKeyboardLayout);
-    osKeyboardLayout = fallbackOSKeyboardLayout;
-  }
-  return osKeyboardLayout;
-}
-
-function isANSI() {
-  return keymapExtras[getOSKeyboardLayout()].isANSI;
-}
-
-function toLocaleKeycode(keycodeLUT, keycodeObject) {
-  console.assert(!isUndefined(keycodeLUT));
-  if (
-    !Object.keys(keycodeObject).includes('name') ||
-    !Object.keys(keycodeObject).includes('code')
-  ) {
-    // Not an object describing a keyboard key; return as is
-    return keycodeObject;
-  }
-  if (keycodeLUT[keycodeObject.code]) {
-    // Clone in a shallow manner the original keycodeObject object and
-    // override the name, title, and possibly other fields
-    return { ...keycodeObject, ...keycodeLUT[keycodeObject.code] };
-  } else {
-    return keycodeObject;
-  }
-}
-
-function generateKeycodes(osKeyboardLayout, isSteno) {
-  store.commit('app/setIso', !isANSI());
-  const keycodes = [
-    ...(isANSI()
-      ? keycodePickerTabLayout.ANSI_ISO
-      : keycodePickerTabLayout.ISO_ANSI),
-    ...keycodePickerTabLayout.special,
-    ...(isSteno ? steno : [])
-  ];
-  const { keycodeLUT } = keymapExtras[getOSKeyboardLayout()];
-  return keycodes.map((keycodeObject) =>
-    toLocaleKeycode(keycodeLUT, keycodeObject)
-  );
-}
-
-const getters = {
-  keycodes: (state) => state.keycodes,
-  lookupKeyPressCode: (state, getters) => (searchTerm) =>
-    getters.lookupKeycode(searchTerm, true),
-  lookupKeycode:
-    (state) =>
-    (searchTerm, isKeys = false) =>
-      state.keycodes.find(
-        ({ code, keys }) =>
-          code === searchTerm || (isKeys && keys && keys === searchTerm)
-      )
-};
-
-function countMatches(filter, collection) {
-  filter = filter.toUpperCase();
-  return collection.reduce((acc, { code, name, title }) => {
-    if (!isUndefined(code)) {
-      if (
-        code.includes(filter) ||
-        (name && name.toUpperCase().includes(filter)) ||
-        (title && title.toUpperCase().includes(filter))
-      ) {
-        acc += 1;
-      }
-    }
-    return acc;
-  }, 0);
-}
-
-const actions = {};
-const mutations = {
-  changeActive(state, newActive) {
-    state.active = newActive;
-  },
-  enableSteno(state) {
-    state.steno = true;
-    state.keycodes = generateKeycodes(getOSKeyboardLayout(), state.steno);
-  },
-  disableSteno(state) {
-    state.steno = false;
-    state.keycodes = generateKeycodes(getOSKeyboardLayout(), state.steno);
-  },
-  updateKeycodeNames(state) {
-    state.keycodes = generateKeycodes(getOSKeyboardLayout(), state.steno);
-  },
-  setSearchFilter(state, newVal) {
-    state.searchFilter = newVal;
-    if (this.searchFilter !== '') {
-      state.searchCounters = {
-        ANSI: countMatches(state.searchFilter, ansi),
-        'ISO/JIS': countMatches(state.searchFilter, iso_jis),
-        Quantum: countMatches(state.searchFilter, quantum),
-        KeyboardSettings: countMatches(state.searchFilter, settings),
-        AppMediaMouse: countMatches(state.searchFilter, media)
-      };
-    }
-  }
-};
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-};
diff --git a/src/store/modules/keymap.js b/src/store/modules/keymap.js
index 98d3ffab46..30494eca74 100644
--- a/src/store/modules/keymap.js
+++ b/src/store/modules/keymap.js
@@ -1,12 +1,14 @@
 import Vue from 'vue';
-import random from 'lodash/random';
-import size from 'lodash/size';
-import reduce from 'lodash/reduce';
 import isUndefined from 'lodash/isUndefined';
 import colorways from '@/components/colorways';
 import defaults from './config';
 import { backend_skeletons_url } from './constants';
 import { parseKeycode } from './parse.js';
+import { useKeycodesStore } from '../keycodes';
+
+function random(max) {
+  return Math.floor(Math.random() * max);
+}
 
 const state = {
   keymap: [[]], // array of arrays
@@ -22,7 +24,7 @@ const state = {
   // otherwise they race against each other and the visual keymap erases the keymap data
   loadingKeymapPromise: undefined,
   colorways: colorways.list,
-  colorwayIndex: random(0, colorways.list.length - 1),
+  colorwayIndex: random(colorways.list.length - 1),
   continuousInput: false,
   ignoreMod: false,
   templates: {
@@ -52,7 +54,7 @@ const getters = {
   size:
     (state) =>
     (_layer = 0) => {
-      return size(state.keymap[_layer]);
+      return state.keymap[_layer].length;
     },
   isDirty: (state) => state.dirty,
   /**
@@ -69,71 +71,63 @@ const getters = {
         return acc;
       }, 0);
 
-      return reduce(
-        state.keymap,
-        function convertALayer(exportedLayers, _layer, currentLayerIdx) {
-          // Ignore Empty layers if there are no layers above this layer
-          if (currentLayerIdx > highestActiveLayer) {
-            return exportedLayers;
-          }
+      return state.keymap.reduce(function convertALayer(
+        exportedLayers,
+        _layer,
+        currentLayerIdx
+      ) {
+        // Ignore Empty layers if there are no layers above this layer
+        if (currentLayerIdx > highestActiveLayer) {
+          return exportedLayers;
+        }
 
-          exportedLayers[currentLayerIdx] = [];
-          // Work around backend not handling sparse keymaps
-          // insert an dummy layer filled with KC_TRNS
-          if (
-            compiler &&
-            currentLayerIdx < highestActiveLayer &&
-            (isUndefined(_layer) || _layer.length === 0)
-          ) {
-            _layer = state.keymap[0].map(() => {
-              return {
-                name: '',
-                code: 'KC_TRNS',
-                type: undefined
-              };
-            });
-          }
+        exportedLayers[currentLayerIdx] = [];
+        // Work around backend not handling sparse keymaps
+        // insert an dummy layer filled with KC_TRNS
+        if (
+          compiler &&
+          currentLayerIdx < highestActiveLayer &&
+          (isUndefined(_layer) || _layer.length === 0)
+        ) {
+          _layer = state.keymap[0].map(() => {
+            return {
+              name: '',
+              code: 'KC_TRNS',
+              type: undefined
+            };
+          });
+        }
 
-          // Convert internal representation to QMK keycodes
-          // lodash/reduce handles null/undefined safely and returns empty array
-          var aLayer = reduce(
-            _layer,
-            function exportQMKKeycode(newLayer, key, i) {
-              var keycode = key.code;
-              if (keycode) {
-                if (keycode.endsWith('(kc)') || keycode.endsWith(',kc)')) {
-                  if (key.contents) {
-                    keycode = keycode.replace('kc', key.contents.code);
-                  } else {
-                    keycode = keycode.replace('kc', 'KC_NO');
-                  }
-                }
-                if (keycode.endsWith('(layer)')) {
-                  keycode = keycode.replace('layer', key.layer);
-                }
-                if (keycode === 'text') {
-                  // add a special ANY marker to keycodes that were defined using ANY
-                  // This will be stripped back off on import.
-                  keycode = compiler ? key.text : `ANY(${key.text})`;
-                }
+        // Convert internal representation to QMK keycodes
+        // lodash/reduce handles null/undefined safely and returns empty array
+        var aLayer = _layer.reduce(function exportQMKKeycode(newLayer, key, i) {
+          var keycode = key.code;
+          if (keycode) {
+            if (keycode.endsWith('(kc)') || keycode.endsWith(',kc)')) {
+              if (key.contents) {
+                keycode = keycode.replace('kc', key.contents.code);
               } else {
-                console.error(
-                  `ERROR: unexpected keycode ${key}`,
-                  key,
-                  i,
-                  _layer
-                );
+                keycode = keycode.replace('kc', 'KC_NO');
               }
-              newLayer.push(keycode);
-              return newLayer;
-            },
-            []
-          );
-          exportedLayers[currentLayerIdx] = aLayer;
-          return exportedLayers;
-        },
-        []
-      );
+            }
+            if (keycode.endsWith('(layer)')) {
+              keycode = keycode.replace('layer', key.layer);
+            }
+            if (keycode === 'text') {
+              // add a special ANY marker to keycodes that were defined using ANY
+              // This will be stripped back off on import.
+              keycode = compiler ? key.text : `ANY(${key.text})`;
+            }
+          } else {
+            console.error(`ERROR: unexpected keycode ${key}`, key, i, _layer);
+          }
+          newLayer.push(keycode);
+          return newLayer;
+        }, []);
+        exportedLayers[currentLayerIdx] = aLayer;
+        return exportedLayers;
+      },
+      []);
     },
   activeLayers(state) {
     const active = state.keymap.reduce(
@@ -166,8 +160,8 @@ const actions = {
       if (state.keymap[toLayer] === undefined) {
         commit('initLayer', { layer: toLayer });
       }
-      let store = this;
-      let { name, code } = store.getters['keycodes/lookupKeycode']('KC_TRNS');
+      let keycodesStore = useKeycodesStore();
+      let { name, code } = keycodesStore.lookupKeycode('KC_TRNS');
       commit('assignKey', {
         _layer: toLayer,
         index,
@@ -196,7 +190,7 @@ const actions = {
   },
   //Function that takes in a keymap loops over it and fills populates the keymap variable
   load_converted_keymap({ commit }, converted_keymap) {
-    const store = this;
+    const keycodesStore = useKeycodesStore();
     //Loop over each layer from the keymap
     console.log('converted_keymap', converted_keymap);
     const acc = converted_keymap.reduce(
@@ -206,7 +200,7 @@ const actions = {
         //Loop over each keycode in the layer
         acc.layers.push(
           layerData.map((keycode) => {
-            return parseKeycode(store, keycode, acc.stats);
+            return parseKeycode(keycodesStore, keycode, acc.stats);
           })
         );
         acc.stats.layers += 1;
@@ -247,18 +241,18 @@ const mutations = {
    * @param {} state
    */
   updateKeycodeNames(state) {
-    let store = this;
+    let keycodesStore = useKeycodesStore();
     // assumes the keycode store has changed due to layout update
     state.keymap = state.keymap.reduce((layers, layer) => {
       const transformedLayer = layer.map((meta) => {
         if (meta.contents) {
-          meta.contents.name = store.getters['keycodes/lookupKeycode'](
+          meta.contents.name = keycodesStore.lookupKeycode(
             meta.contents.code
           ).name;
         }
         return {
           ...meta,
-          name: store.getters['keycodes/lookupKeycode'](meta.code).name
+          name: keycodesStore.lookupKeycode(meta.code).name
         };
       });
       layers.push(transformedLayer);
@@ -269,8 +263,8 @@ const mutations = {
     if (isUndefined(state.selectedIndex)) {
       return;
     }
-    let store = this;
-    let { name, code, type } = store.getters['keycodes/lookupKeycode'](_code);
+    const keycodesStore = useKeycodesStore();
+    let { name, code, type } = keycodesStore.lookupKeycode(_code);
 
     if (state.selectedContent) {
       // only set values on contents not container, does not support continuous input
@@ -401,7 +395,8 @@ const mutations = {
     );
   },
   initKeymap(state, { layout, layer, code = 'KC_NO' }) {
-    const { name } = this.getters['keycodes/lookupKeycode'](code);
+    const keycodesStore = useKeycodesStore();
+    const { name } = keycodesStore.lookupKeycode(code);
     if (!layout) {
       return;
     }
diff --git a/src/store/modules/parse.js b/src/store/modules/parse.js
index 775cea411e..8386412cb5 100644
--- a/src/store/modules/parse.js
+++ b/src/store/modules/parse.js
@@ -1,6 +1,5 @@
 import escape from 'lodash/escape';
 import isUndefined from 'lodash/isUndefined';
-
 import { longFormKeycodes } from '@/longFormKeycodes';
 
 /* hasBitsSet
@@ -22,7 +21,7 @@ function hasBitsSet(test, value) {
  * the user interface, such that e.g. OSM(MOD_LCTL|MOD_LALT) and
  * OSM(MOD_LALT|MOD_LCTL) don't need separate keys.
  */
-function processOneShotMods(store, keycode) {
+function processOneShotMods(keycodesStore, keycode) {
   let internal = keycode.split('(')[1];
   internal = internal.split(')')[0];
 
@@ -100,7 +99,7 @@ function processOneShotMods(store, keycode) {
   mods = cmods.join('|');
   keycode = `OSM(${mods})`;
 
-  const metadata = store.getters['keycodes/lookupKeycode'](keycode);
+  const metadata = keycodesStore.lookupKeycode(keycode);
   return newKey(metadata, keycode);
 }
 
@@ -118,8 +117,14 @@ function setLayerToNonEmpty(_layer) {
 }
 */
 
-function newAnyKey(store, keycode) {
-  const anyKey = store.getters['keycodes/lookupKeycode']('text');
+/**
+ * newAnyKey.
+ * @param {} keycodesStore - pinia keycodesStore
+ * @param {*} keycode
+ * @returns
+ */
+function newAnyKey(keycodesStore, keycode) {
+  const anyKey = keycodesStore.lookupKeycode('text');
   // make a copy otherwise it uses a reference
   return Object.assign({}, anyKey, { text: keycode });
 }
@@ -140,23 +145,21 @@ function newKey(metadata, keycode, obj) {
 
 // newLayerContainerKey combines aspects of a layer and a container key
 // We pre-assign the layers to make the UI easier to implement.
-function newLayerContainerKey(store, keycode, internal) {
+function newLayerContainerKey(keycodesStore, keycode, internal) {
   const internals = internal.split(',');
-  const LCKey = store.getters['keycodes/lookupKeycode'](
-    `${keycode}(${internals[0]},kc)`
-  );
+  const LCKey = keycodesStore.lookupKeycode(`${keycode}(${internals[0]},kc)`);
 
-  let contents = store.getters['keycodes/lookupKeycode'](
+  let contents = keycodesStore.lookupKeycode(
     longFormKeycodes[internals[1]] || internals[1]
   );
   if (isUndefined(contents)) {
-    contents = store.getters['keycodes/lookupKeycode']('KC_NO');
+    contents = keycodesStore.lookupKeycode('KC_NO');
   }
   let { code, layer, name, type } = LCKey;
   return Object.assign({ code, layer, name, type, contents: contents });
 }
 
-function parseKeycode(store, keycode, stats) {
+function parseKeycode(keycodesStore, keycode, stats) {
   let metadata;
 
   keycode = stripANY(keycode);
@@ -182,28 +185,28 @@ function parseKeycode(store, keycode, stats) {
     // check for an OSM keycode
     if (maincode === 'OSM') {
       // ok we know it's OSM
-      return processOneShotMods(store, keycode);
+      return processOneShotMods(keycodesStore, keycode);
     }
 
     //Check whether it is a layer switching code, mod-tap, or combo keycode
     if (internal.includes('KC')) {
       // Layer Tap keycode
       if (maincode === 'LT') {
-        return newLayerContainerKey(store, maincode, internal);
+        return newLayerContainerKey(keycodesStore, maincode, internal);
       }
       internal = longFormKeycodes[internal] || internal;
-      metadata = store.getters['keycodes/lookupKeycode'](internal);
+      metadata = keycodesStore.lookupKeycode(internal);
       if (metadata === undefined) {
         stats.any += 1;
-        return newAnyKey(store, keycode);
+        return newAnyKey(keycodesStore, keycode);
       }
       let internalkeycode = newKey(metadata, internal);
 
       outerKeycode = maincode + '(kc)';
-      metadata = store.getters['keycodes/lookupKeycode'](outerKeycode);
+      metadata = keycodesStore.lookupKeycode(outerKeycode);
       if (metadata === undefined) {
         stats.any += 1;
-        return newAnyKey(store, keycode);
+        return newAnyKey(keycodesStore, keycode);
       }
 
       key = newKey(metadata, outerKeycode, { contents: internalkeycode });
@@ -212,10 +215,10 @@ function parseKeycode(store, keycode, stats) {
 
     // layer switching
     outerKeycode = maincode + '(layer)';
-    metadata = store.getters['keycodes/lookupKeycode'](outerKeycode);
+    metadata = keycodesStore.lookupKeycode(outerKeycode);
     if (metadata === undefined) {
       stats.any += 1;
-      return newAnyKey(store, keycode);
+      return newAnyKey(keycodesStore, keycode);
     }
     key = newKey(metadata, outerKeycode, { layer: internal });
     return key;
@@ -228,14 +231,14 @@ function parseKeycode(store, keycode, stats) {
         stats.layers
       } in keymap. Setting to KC_TRNS\n`
     );
-    return store.getters['keycodes/lookupKeycode']('KC_TRNS');
+    return keycodesStore.lookupKeycode('KC_TRNS');
   }
 
   // regular keycode
-  metadata = store.getters['keycodes/lookupKeycode'](keycode);
+  metadata = keycodesStore.lookupKeycode(keycode);
   if (metadata === undefined) {
     stats.any += 1;
-    return newAnyKey(store, keycode);
+    return newAnyKey(keycodesStore, keycode);
   }
   return newKey(metadata, keycode);
 }
diff --git a/src/store/modules/tester/index.js b/src/store/modules/tester/index.js
index 9fbe09017f..4b8c5493a6 100644
--- a/src/store/modules/tester/index.js
+++ b/src/store/modules/tester/index.js
@@ -5,6 +5,7 @@ import qmkToPos from './qmk';
 import codeToPos from './codeToPos';
 import layouts from './layouts';
 import isUndefined from 'lodash/isUndefined';
+import { useKeycodesStore } from '../../keycodes';
 
 function reduceCodeToPos(arr) {
   // Create look up table for Browser Code to Layout position
@@ -66,8 +67,9 @@ const getters = {
 
 function mapKeymap(store, arr) {
   // Create look up table for QMK Code to Layout position
+  const keycodesStore = useKeycodesStore();
   return arr.map((code) => {
-    const meta = store.getters['keycodes/lookupKeycode'](code);
+    const meta = keycodesStore.lookupKeycode(code);
     return {
       ...meta
     };