diff --git a/src/lib/components/LexiconEntryView.svelte b/src/lib/components/LexiconEntryView.svelte
index 1d84d8822..3e8bb5515 100644
--- a/src/lib/components/LexiconEntryView.svelte
+++ b/src/lib/components/LexiconEntryView.svelte
@@ -1,146 +1,9 @@
 <script>
     import config from '$lib/data/config';
+    import { lexicon } from '$lib/data/lexicon.svelte';
     import { convertStyle } from '$lib/data/stores';
-    import { initializeDatabase } from '$lib/data/stores/lexicon';
-    import {
-        selectedLanguageStore,
-        vernacularLanguageStore,
-        vernacularWordsStore
-    } from '$lib/data/stores/lexicon.ts';
-    import { afterUpdate, onMount } from 'svelte';
-    import { get } from 'svelte/store';
-
-    export let wordIds;
-    export let onSelectWord;
-    export let removeNewLines = false;
-
-    let xmlData = '';
-
-    async function queryXmlByWordId(wordIds) {
-        try {
-            let db = await initializeDatabase({ fetch });
-
-            let results;
-            const dynamicQuery = wordIds.map(() => `id = ?`).join(' OR ');
-            const dynamicParams = wordIds.map((id) => id);
-            results = db.exec(`SELECT xml FROM entries WHERE ${dynamicQuery}`, dynamicParams);
-            console.log('results:', results[0].values);
-
-            return results[0].values;
-        } catch (error) {
-            console.error(`Error querying XML for word IDs ${wordIds}:`, error);
-            return null;
-        }
-    }
-
-    function formatXmlByClass(xmlString) {
-        if (!xmlString) return '';
-
-        const parser = new DOMParser();
-        const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
-
-        const parseError = xmlDoc.querySelector('parsererror');
-        if (parseError) {
-            console.error('XML parsing error:', parseError.textContent);
-            return `<span class="text-error" style="background-color: var(--BackgroundColor);">Error parsing XML: Invalid format</span>`;
-        }
-
-        function processNode(node, parentHasSenseNumber = false) {
-            let output = '';
-
-            if (node.nodeType === Node.TEXT_NODE) {
-                return node.nodeValue.trim() ? node.nodeValue + ' ' : '';
-            }
-
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                let className = node.getAttribute('class') || '';
-                let isSenseNumber = className.includes('sensenumber');
-
-                let parentContainsSenseNumber =
-                    parentHasSenseNumber ||
-                    [...node.parentNode.children].some(
-                        (child) =>
-                            child.getAttribute &&
-                            (child.getAttribute('class') || '').includes('sensenumber')
-                    );
-
-                const addStyle =
-                    node.tagName === 'span' ||
-                    className === 'clickable cursor-pointer' ||
-                    (node.tagName === 'div' && className === 'entry');
-
-                if (node.tagName === 'a' && node.hasAttribute('href')) {
-                    const href = node.getAttribute('href');
-                    const match = href.match(/E-(\d+)/);
-                    if (match) {
-                        const index = parseInt(match[1], 10);
-                        const wordObject = get(vernacularWordsStore).find(
-                            (item) => item.id === index
-                        );
-                        const word = wordObject ? wordObject.name : 'Unknown';
-                        const homonymIndex = wordObject ? wordObject.homonym_index : 1;
-
-                        let linkText = node.textContent.trim();
-
-                        if (linkText === String(homonymIndex)) {
-                            linkText = homonymIndex.toString();
-                        }
-
-                        output += `<span class="clickable cursor-pointer" style="background-color: var(--BackgroundColor);" data-word="${word}" data-index="${index}" data-homonym="${homonymIndex}">${linkText}</span>`;
-                    }
-                } else {
-                    output += `<${node.tagName}`;
-                    for (let attr of node.attributes) {
-                        output += ` ${attr.name}="${attr.value}"`;
-                    }
-
-                    // Add appropriate styling based on class name
-                    if (className.includes('sensenumber')) {
-                        output += ` style="color: var(--TextColor); font-weight: bold;"`;
-                    } else if (className.includes('vernacular')) {
-                        output += ` style="color: var(--TextColor2);"`;
-                    } else if (className.includes('example')) {
-                        output += ` style="color: var(--TextColor3); font-style: italic;"`;
-                    } else if (className.includes('definition')) {
-                        output += ` style="color: var(--TextColor); font-weight: normal;"`;
-                    }
-
-                    if (addStyle) {
-                        output += ` style="background-color: var(--BackgroundColor); color: var(--TextColor);"`;
-                    }
-
-                    output += '>';
-
-                    for (let child of node.childNodes) {
-                        output += processNode(child, parentContainsSenseNumber || isSenseNumber);
-                    }
-
-                    output += `</${node.tagName}>`;
-                }
-            }
-
-            return output;
-        }
 
-        return processNode(xmlDoc.documentElement);
-    }
-
-    async function updateXmlData() {
-        if (!wordIds) {
-            xmlData = '';
-            return;
-        }
-
-        let xmlResults = await queryXmlByWordId(wordIds);
-
-        // Insert an `<hr>` tag or a visible separator between entries
-        xmlData =
-            xmlResults
-                .filter((xml) => xml) // Ensure no null values are included
-                .map(formatXmlByClass)
-                .join('\n<hr style="border-color: var(--SettingsSeparatorColor);">\n') +
-            '\n<hr style="border-color: var(--SettingsSeparatorColor);">\n';
-    }
+    let { wordIds, onSelectWord, removeNewLines = false } = $props();
 
     function attachEventListeners() {
         const spans = document.querySelectorAll('.clickable');
@@ -153,7 +16,7 @@
         const freshSpans = document.querySelectorAll('.clickable');
         freshSpans.forEach((span) => {
             span.addEventListener('click', () => {
-                selectedLanguageStore.set(get(vernacularLanguageStore));
+                lexicon.setLanguage();
                 const word = span.getAttribute('data-word');
                 const index = parseInt(span.getAttribute('data-index'), 10);
                 const homonym_index = parseInt(span.getAttribute('data-homonym'), 10);
@@ -195,7 +58,9 @@
                     .replace(/margin-left:\s*4em;?/g, '')
                     .trim();
 
-                if (cleaned && !cleaned.endsWith(';')) cleaned += ';';
+                if (cleaned && !cleaned.endsWith(';')) {
+                    cleaned += ';';
+                }
                 cleaned += ' margin-left: -1.1em;';
 
                 style = cleaned;
@@ -209,17 +74,22 @@
         });
     }
 
-    onMount(updateXmlData);
+    let xmlData = $derived(lexicon.data());
 
-    $: if (wordIds) {
-        (async () => {
-            await updateXmlData();
-            applyStyles();
-            attachEventListeners();
-        })();
-    }
+    const updateDOM = (_element) => {
+        applyStyles();
+        attachEventListeners();
+    };
 </script>
 
-<pre
-    class="p-4 whitespace-pre-wrap break-words"
-    style="background-color: var(--BackgroundColor); color: var(--TextColor);">{@html xmlData}</pre>
+{#await lexicon.search(wordIds) then}
+    <!-- prettier-ignore-attribute -->
+    <pre
+        class="p-4 whitespace-pre-wrap break-words"
+        style="background-color: var(--BackgroundColor); color: var(--TextColor);">
+
+        <div {@attach updateDOM}>
+            {@html xmlData}
+        </div>
+    </pre>
+{/await}
diff --git a/src/lib/components/LexiconLanguageTabs.svelte b/src/lib/components/LexiconLanguageTabs.svelte
index 0d2de41eb..5d679f8f0 100644
--- a/src/lib/components/LexiconLanguageTabs.svelte
+++ b/src/lib/components/LexiconLanguageTabs.svelte
@@ -2,10 +2,7 @@
     import { expoInOut } from 'svelte/easing';
     import { fly } from 'svelte/transition';
 
-    export let reversalLanguage;
-    export let selectedLanguage;
-    export let onSwitchLanguage;
-    export let vernacularLanguage;
+    let { reversalLanguage, selectedLanguage, onSwitchLanguage, vernacularLanguage } = $props();
 </script>
 
 <div class="flex w-full" style="background-color: var(--TabBackgroundColor);">
@@ -13,8 +10,8 @@
         role="button"
         tabindex="0"
         aria-pressed={selectedLanguage === vernacularLanguage}
-        on:click={() => onSwitchLanguage(vernacularLanguage)}
-        on:keydown={(e) => e.key === 'Enter' && onSwitchLanguage(vernacularLanguage)}
+        onclick={() => onSwitchLanguage(vernacularLanguage)}
+        onkeydown={(e) => e.key === 'Enter' && onSwitchLanguage(vernacularLanguage)}
         class="py-2.5 px-3.5 text-sm uppercase text-center relative dy-tabs dy-tabs-bordered mb-1"
     >
         {vernacularLanguage}
@@ -29,8 +26,8 @@
         role="button"
         tabindex="0"
         aria-pressed={selectedLanguage === reversalLanguage}
-        on:click={() => onSwitchLanguage(reversalLanguage)}
-        on:keydown={(e) => e.key === 'Enter' && onSwitchLanguage(reversalLanguage)}
+        onclick={() => onSwitchLanguage(reversalLanguage)}
+        onkeydown={(e) => e.key === 'Enter' && onSwitchLanguage(reversalLanguage)}
         class="py-2.5 px-3.5 text-sm uppercase text-center relative dy-tabs dy-tabs-bordered mb-1"
     >
         {reversalLanguage}
diff --git a/src/lib/components/LexiconListViewHeader.svelte b/src/lib/components/LexiconListViewHeader.svelte
index 1bcb4d382..b7e451983 100644
--- a/src/lib/components/LexiconListViewHeader.svelte
+++ b/src/lib/components/LexiconListViewHeader.svelte
@@ -2,12 +2,14 @@
     import LexiconAlphabetStrip from './LexiconAlphabetStrip.svelte';
     import LexiconLanguageTabs from './LexiconLanguageTabs.svelte';
 
-    export let alphabet = [];
-    export let selectedLanguage;
-    export let vernacularLanguage;
-    export let reversalLanguage;
-    export let onSwitchLanguage;
-    export let onLetterChange;
+    let {
+        alphabet,
+        selectedLanguage,
+        vernacularLanguage,
+        reversalLanguage,
+        onSwitchLanguage,
+        onLetterChange
+    } = $props();
 
     async function handleLetterSelect(letter) {
         onLetterChange(letter);
diff --git a/src/lib/components/LexiconReversalListView.svelte b/src/lib/components/LexiconReversalListView.svelte
deleted file mode 100644
index d1f756988..000000000
--- a/src/lib/components/LexiconReversalListView.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-    export let reversalWordsList;
-    export let onSelectWord;
-</script>
-
-<ul class="space-y-3 px-4 pb-4" style="background-color: var(--BackgroundColor);">
-    {#each reversalWordsList as { word, indexes, vernacularWords, letter }}
-        <li class="cursor-pointer text-lg mb-3" id="letter-{letter}">
-            <button
-                type="button"
-                class="w-full text-left py-1"
-                aria-label={`Select word ${word}`}
-                style="color: var(--TextColor); border-bottom: 1px solid var(--SettingsSeparatorColor);"
-                on:click={() => onSelectWord({ word, indexes })}
-                on:keydown={(event) => {
-                    if (event.key === 'Enter' || event.key === ' ') {
-                        onSelectWord({ word, indexes });
-                        event.preventDefault();
-                    }
-                }}
-            >
-                <p class="font-bold break-words" style="color: var(--TextColor);">{word}</p>
-                <p class="text-md ml-4" style="color: var(--TextColor);">
-                    {#each vernacularWords as { name, homonymIndex }, i}
-                        {#if i > 0},
-                        {/if}
-                        <span style="color: var(--TextColor);"
-                            >{name}{#if homonymIndex > 0}<sub>{homonymIndex}</sub>{/if}</span
-                        >
-                    {/each}
-                </p>
-            </button>
-        </li>
-    {/each}
-</ul>
diff --git a/src/lib/components/LexiconVernacularListView.svelte b/src/lib/components/LexiconVernacularListView.svelte
deleted file mode 100644
index 6f9c54009..000000000
--- a/src/lib/components/LexiconVernacularListView.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-    export let vernacularWordsList;
-    export let onSelectWord;
-</script>
-
-<ul class="space-y-3 px-4 pb-4" style="background-color: var(--BackgroundColor);">
-    {#each vernacularWordsList as { id, name, homonym_index, type, num_senses, summary, letter }}
-        <li class="cursor-pointer text-lg mb-3 scroll-mt-16" id="letter-{letter}">
-            <button
-                type="button"
-                class="w-full text-left py-1"
-                aria-label={`Select word ${name}`}
-                style="color: var(--TextColor); border-bottom: 1px solid var(--SettingsSeparatorColor);"
-                on:click={() => onSelectWord({ word: name, index: id })}
-                on:keydown={(event) => {
-                    if (event.key === 'Enter' || event.key === ' ') {
-                        onSelectWord({ word: name, index: id });
-                        event.preventDefault();
-                    }
-                }}
-            >
-                <p class="font-bold break-words" style="color: var(--TextColor);">
-                    {name}{#if homonym_index > 0}<sub>{homonym_index}</sub>{/if}
-                </p>
-                {#if summary}
-                    <p class="ml-4 italic" style="color: var(--TextColor2);">
-                        {#each summary.match(/{(.*?)}/g) || [] as match}
-                            {match.replace(/[{}]/g, '')}
-                        {/each}
-                    </p>
-                {/if}
-            </button>
-        </li>
-    {/each}
-</ul>
diff --git a/src/lib/components/TextSelectionToolbar.svelte b/src/lib/components/TextSelectionToolbar.svelte
index 97fa2f794..0decc5ca6 100644
--- a/src/lib/components/TextSelectionToolbar.svelte
+++ b/src/lib/components/TextSelectionToolbar.svelte
@@ -34,7 +34,6 @@ TODO:
     let showHighlightPens = $state(false);
 
     let { oncopy } = $props();
-
     const isCopyEnabled = $derived(
         config.bookCollections.find((x) => x.id === $refs.collection).features['bc-allow-copy-text']
     );
diff --git a/src/lib/components/WordNavigationStrip.svelte b/src/lib/components/WordNavigationStrip.svelte
index c7eede9ad..db293ebe9 100644
--- a/src/lib/components/WordNavigationStrip.svelte
+++ b/src/lib/components/WordNavigationStrip.svelte
@@ -1,77 +1,52 @@
 <script>
-    import {
-        currentReversalWordsStore,
-        selectedLanguageStore,
-        vernacularLanguageStore,
-        vernacularWordsStore
-    } from '$lib/data/stores/lexicon.ts';
-    import { get } from 'svelte/store';
-
-    // Current word being displayed
-    export let currentWord;
-
-    // Function to handle word selection from parent component
-    export let onSelectWord;
-
+    let { wordsList, currentWord, onSelectWord } = $props();
     // List of all words (should come from either vernacularWordsList or reversalWordsList)
-    let wordsList;
-    if (get(selectedLanguageStore) === get(vernacularLanguageStore)) {
-        wordsList = get(vernacularWordsStore);
-    } else {
-        wordsList = get(currentReversalWordsStore);
-    }
 
     // Compute the index of the current word in the list
-    $: currentIndex = wordsList.findIndex((word) => {
-        // Handle both vernacular and reversal word structures
-        if (typeof word === 'object') {
-            if (word.id && currentWord.index) {
-                // For vernacular words, match by ID which is unique
-                return word.id === currentWord.index;
-            } else if (
-                word.name &&
-                currentWord.word &&
-                word.homonym_index !== undefined &&
-                currentWord.homonym_index !== undefined
-            ) {
-                // For vernacular words with homonyms, match both word and homonym index
-                return (
-                    word.name === currentWord.word &&
-                    word.homonym_index === currentWord.homonym_index
-                );
-            } else if (word.name && currentWord.word) {
-                // For regular vernacular words
-                return word.name === currentWord.word;
-            } else if (word.word && currentWord.word) {
-                // For reversal words
-                return word.word === currentWord.word;
+    let currentIndex = $derived(
+        wordsList.findIndex((word) => {
+            // Handle both vernacular and reversal word structures
+            if (typeof word === 'object') {
+                if (word.id && currentWord.index) {
+                    // For vernacular words, match by ID which is unique
+                    return word.id === currentWord.index;
+                } else if (
+                    word.word &&
+                    currentWord.word &&
+                    word.homonym_index !== undefined &&
+                    currentWord.homonym_index !== undefined
+                ) {
+                    // For vernacular words with homonyms, match both word and homonym index
+                    return (
+                        word.word === currentWord.word &&
+                        word.homonym_index === currentWord.homonym_index
+                    );
+                } else {
+                    // For regular vernacular words
+                    return word.word === currentWord.word;
+                }
             }
-        }
-        return false;
-    });
+            return false;
+        })
+    );
 
     // Compute previous and next words
-    $: previousWord = currentIndex > 0 ? wordsList[currentIndex - 1] : null;
-    $: nextWord = currentIndex < wordsList.length - 1 ? wordsList[currentIndex + 1] : null;
+    let previousWord = $derived(currentIndex > 0 ? wordsList[currentIndex - 1] : null);
+    let nextWord = $derived(
+        currentIndex < wordsList.length - 1 ? wordsList[currentIndex + 1] : null
+    );
 
     // Navigate to previous word
     function goToPrevious() {
         if (previousWord) {
             // Format the word object to match the expected structure
-            let wordObject;
-            if (previousWord.name !== undefined) {
-                wordObject = {
-                    word: previousWord.name,
-                    index: previousWord.id,
+            onSelectWord({
+                word: previousWord.word,
+                indexes: previousWord.id !== undefined ? [previousWord.id] : previousWord.indexes,
+                ...(previousWord.homonym_index !== undefined && {
                     homonym_index: previousWord.homonym_index
-                };
-            } else {
-                wordObject = {
-                    word: previousWord.word,
-                    indexes: previousWord.indexes
-                };
-            }
-            onSelectWord(wordObject);
+                })
+            });
         }
     }
 
@@ -79,20 +54,13 @@
     function goToNext() {
         if (nextWord) {
             // Format the word object to match the expected structure
-            let wordObject;
-            if (nextWord.name !== undefined) {
-                wordObject = {
-                    word: nextWord.name,
-                    index: nextWord.id,
+            onSelectWord({
+                word: nextWord.word,
+                indexes: nextWord.id !== undefined ? [nextWord.id] : nextWord.indexes,
+                ...(nextWord.homonym_index !== undefined && {
                     homonym_index: nextWord.homonym_index
-                };
-            } else {
-                wordObject = {
-                    word: nextWord.word,
-                    indexes: nextWord.indexes
-                };
-            }
-            onSelectWord(wordObject);
+                })
+            });
         }
     }
 </script>
@@ -104,7 +72,7 @@
     <button
         class="flex items-center justify-center w-10 h-10 hover:opacity-75 disabled:opacity-50 disabled:cursor-not-allowed"
         style="color: var(--TabTextColor);"
-        on:click={goToPrevious}
+        onclick={goToPrevious}
         disabled={!previousWord}
         aria-label="Previous word"
     >
@@ -127,7 +95,7 @@
     <button
         class="flex items-center justify-center w-10 h-10 hover:opacity-75 disabled:opacity-50 disabled:cursor-not-allowed"
         style="color: var(--TabTextColor);"
-        on:click={goToNext}
+        onclick={goToNext}
         disabled={!nextWord}
         aria-label="Next word"
     >
diff --git a/src/lib/data/lexicon.svelte.ts b/src/lib/data/lexicon.svelte.ts
new file mode 100644
index 000000000..26f85aa7e
--- /dev/null
+++ b/src/lib/data/lexicon.svelte.ts
@@ -0,0 +1,513 @@
+// Runes-based db access for lexicon, let's give it a go.
+import { base } from '$app/paths';
+import initSqlJs, { Database } from 'sql.js';
+import type { DictionaryConfig, DictionaryWritingSystemConfig } from '$config';
+
+function createLexicon() {
+    let sqlJs: typeof initSqlJs = null;
+    let sqlDb: Database = null;
+    let xmlData = $state('');
+    let vernacularWords: Array<VernacularWord> = $state();
+    let vernacularWritingSystem: DictionaryWritingSystemConfig;
+    let vernacularAlphabet: string | any[];
+    let vernacularLanguage: string = $state();
+
+
+
+
+    interface Vernacular {
+        words: Array<VernacularWord>;
+    }
+
+    let vernacular: Vernacular = {
+        words: []
+    };
+
+    interface Reversal {
+        words: Record<string, ReversalWord[]>;
+        letters: Record<string, string[]>;
+        indexes: { [language: string]: ReversalIndex };
+        writingSystems: DictionaryWritingSystemConfig[];
+        alphabets: Record<string, string[]>;
+    }
+
+    let reversals: Reversal = $state({
+        words: {},
+        letters: {},
+        indexes: {},
+        writingSystems: [],
+        alphabets: {}
+    });
+
+    let reversalWritingSystems: any = $state();
+    const reversalAlphabets = $derived.by(() => {
+        if (reversalWritingSystems) {
+            return reversalWritingSystems.reduce((obj: { [x: string]: any; }, [key, ws]: any) => {
+                obj[key] = ws.alphabet;
+                return obj;
+            }, {});
+        } else {
+            return undefined;
+        }
+    });
+
+    const reversalLanguages = {};
+    const reversalKeys = {};
+
+    function currentReversalWords(language): ReversalWord[] {
+        if (reversals.words[language]) {
+            return reversals.words[language];
+        }
+        return [];
+    }
+
+    function currentReversalLetters(language): string[] {
+        if (reversals.letters[language]) {
+            return reversals.letters[language];
+        }
+        return [];
+    }
+
+    function alphabets() {
+        return {
+            vernacular: vernacularAlphabet,
+            reversal: reversalAlphabets,
+            keys: reversalKeys
+        };
+    }
+
+    function formatXmlByClass(xmlString: string): string {
+        if (!xmlString) {
+            return '';
+        }
+
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
+
+        const parseError = xmlDoc.querySelector('parsererror');
+        if (parseError) {
+            console.error('XML parsing error:', parseError.textContent);
+            return `<span class="text-error" style="background-color: var(--BackgroundColor);">Error parsing XML: Invalid format</span>`;
+        }
+
+        function processNode(node: HTMLElement, parentHasSenseNumber = false) {
+            let output = '';
+
+            if (node.nodeType === Node.TEXT_NODE) {
+                return node.nodeValue.trim() ? node.nodeValue + ' ' : '';
+            }
+
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                let className = node.getAttribute('class') || '';
+                let isSenseNumber = className.includes('sensenumber');
+
+                let parentContainsSenseNumber =
+                    parentHasSenseNumber ||
+                    [...node.parentNode.children].some(
+                        (child) =>
+                            child.getAttribute &&
+                            (child.getAttribute('class') || '').includes('sensenumber')
+                    );
+
+                const addStyle =
+                    node.tagName === 'span' ||
+                    className === 'clickable cursor-pointer' ||
+                    (node.tagName === 'div' && className === 'entry');
+
+                if (node.tagName === 'a' && node.hasAttribute('href')) {
+                    const href = node.getAttribute('href');
+                    const match = href.match(/E-(\d+)/);
+                    if (match) {
+                        const index = parseInt(match[1], 10);
+                        const wordObject = vernacularWords.find(
+                            (item: { id: number }) => item.id === index
+                        );
+                        const word = wordObject ? wordObject.word : 'Unknown';
+                        const homonymIndex = wordObject ? wordObject.homonym_index : 1;
+
+                        let linkText = node.textContent.trim();
+
+                        if (linkText === String(homonymIndex)) {
+                            linkText = homonymIndex.toString();
+                        }
+
+                        output += `<span class="clickable cursor-pointer" style="background-color: var(--BackgroundColor);" data-word="${word}" data-index="${index}" data-homonym="${homonymIndex}">${linkText}</span>`;
+                    }
+                } else {
+                    output += `<${node.tagName}`;
+                    for (let attr of node.attributes) {
+                        output += ` ${attr.name}="${attr.value}"`;
+                    }
+
+                    // Add appropriate styling based on class name
+
+                    const classNameStyle = {
+                        sensenumber: ` style="color: var(--TextColor); font-weight: bold;"`,
+                        vernacular: ` style="color: var(--TextColor2);"`,
+                        example: ` style="color: var(--TextColor3); font-style: italic;"`,
+                        definition: ` style="color: var(--TextColor); font-weight: normal;"`
+                    };
+
+                    for (let m in classNameStyle) {
+                        if (className.includes(m)) {
+                            output += classNameStyle[m];
+                            break;
+                        }
+                    }
+
+                    if (addStyle) {
+                        output += ` style="background-color: var(--BackgroundColor); color: var(--TextColor);"`;
+                    }
+
+                    output += '>';
+
+                    for (let child of node.childNodes) {
+                        output += processNode(child, parentContainsSenseNumber || isSenseNumber);
+                    }
+
+                    output += `</${node.tagName}>`;
+                }
+            }
+
+            return output;
+        }
+
+        return processNode(xmlDoc.documentElement);
+    }
+
+    /* Fetching functions */
+    /* Frequently it is desirable to use a custom fetch function while fetching lexicon sources.
+     * A good example of this is in +page.ts, where a special fetch function is given to us.
+     * In these cases, use `withFetch()` to specify the fetch function.
+     * All functions that rely on fetch ought to be defined inside withFetch(). */
+
+    function withFetch({ fetch }) {
+        async function fetchReversalIndexes(writingSystems: any): Promise<void> {
+            for (const [key, ws] of writingSystems) {
+                if (!ws.type.includes('main')) {
+                    const response = await fetch(`${base}/reversal/${key}/index.json`);
+                    if (response.ok) {
+                        reversals.indexes[key] = (await response.json()) as ReversalIndex; // Explicitly cast the JSON response
+                    } else {
+                        console.warn(`Failed to load reversal index for language: ${key}`);
+                    }
+                }
+            }
+        }
+
+        async function fetchReversalLetterData({ letter, language }) {
+            if (language === vernacularLanguage) {
+                return; // The vernacularLanguage is already loaded by setup!
+            }
+
+            if (reversals.letters[language].includes(letter)) {
+                return; // The letter is already loaded!
+            }
+
+            reversals.letters[language].push(letter);
+            const newWords = [];
+            const defaultReversalKey = reversalKeys[language];
+            const index = reversals.indexes[defaultReversalKey];
+            const files = index[letter] || [];
+            try {
+                for (const file of files) {
+                    const reversalFile = `${base}/reversal/${defaultReversalKey}/${file}`;
+                    const response = await fetch(reversalFile);
+                    if (response.ok) {
+                        const data = await response.json();
+                        const currentFileWords = Object.entries(data).map(([word, entries]) => {
+                            return {
+                                word,
+                                indexes: entries.map((entry: { index: any }) => entry.index),
+                                vernacularWords: entries
+                                    .map((entry: { index: number }) => {
+                                        const foundWord = vernacularWords.find(
+                                            (vw) => vw.id === entry.index
+                                        );
+                                        if (foundWord) {
+                                            return {
+                                                word: foundWord.word,
+                                                homonymIndex: foundWord.homonym_index || 0
+                                            };
+                                        } else {
+                                            console.log(
+                                                `Index ${entry.index} not found in vernacularWordsList`
+                                            );
+                                            return null; // Return null for missing indexes
+                                        }
+                                    })
+                                    .filter((index: null) => index !== null), // Filter out null values
+                                letter: letter
+                            };
+                        });
+
+                        currentFileWords.forEach((newWord) => {
+                            const existingWord = reversals.words[language].find(
+                                (w) => w.word === newWord.word
+                            );
+                            if (existingWord) {
+                                existingWord.indexes = [
+                                    ...new Set([...existingWord.indexes, ...newWord.indexes])
+                                ];
+                            } else {
+                                newWords.push(newWord);
+                            }
+                        });
+                    }
+                }
+            } catch (error) {
+                reversals.letters[language] = reversals.letters[language].filter(l => l !== letter);
+                console.error(`Error fetching data for letter ${letter}:`, error);
+                return;
+            }
+            reversals.words[language] = [...reversals.words[language], ...newWords];
+        }
+
+        async function fetchReversalWords({ letter, language }) {
+
+            const reversalAlphabet: string[] = $state.snapshot(reversalAlphabets[reversalKeys[language]]);
+
+            if (!reversals.letters[language]) {
+                reversals.letters[language] = [];
+            }
+            if (!reversals.words[language]) {
+                reversals.words[language] = [];
+            }
+
+
+            console.log(letter);
+            console.log($state.snapshot(reversals.letters[language]));
+            if (reversals.letters[language].includes(letter)) {
+                // Reversal already contains the letter we want.
+                console.log("skip");
+                return;
+            }
+
+
+            const letterIndex = reversalAlphabet.indexOf(letter);
+            const lettersToLoad = reversalAlphabet
+                .slice(0, letterIndex + 1)
+                .filter((l: string) => !reversals.letters || !(reversals.letters[language].includes(l)));
+
+            await Promise.all(
+                lettersToLoad.map(letter => fetchReversalLetterData({ letter, language })),
+            );
+
+            reversals.words[language].sort((a, b) => {
+                return (
+                    reversalAlphabet.indexOf(a.word[0].toLowerCase()) -
+                    reversalAlphabet.indexOf(b.word[0].toLowerCase())
+                );
+            });
+        }
+
+        async function setup(config: DictionaryConfig) {
+            vernacularWritingSystem = Object.values(config.writingSystems).find((ws) =>
+                ws.type.includes('main')
+            );
+
+            vernacularAlphabet = vernacularWritingSystem.alphabet;
+            vernacularLanguage = vernacularWritingSystem.displayNames.default;
+
+            selected.language = vernacularLanguage;
+            const wsConfig = Object.entries(config.writingSystems);
+            reversalWritingSystems = wsConfig;
+
+            wsConfig.reduce((obj: { [x: string]: any; }, [key, ws]: any) => {
+                obj[key] = ws.displayNames.default;
+                return obj;
+            }, reversalLanguages);
+            Object.entries(reversalLanguages).map(([k, v]: [string, string]) => reversalKeys[v] = k);
+
+            Promise.all([
+                fetchAllWords(vernacularAlphabet),
+                fetchReversalIndexes(reversalWritingSystems)
+            ]);
+        }
+
+        async function fetchAllWords(alphabet: string | any[]) {
+            let results = await queryXML(
+                `SELECT id, name, homonym_index, type, num_senses, summary FROM entries`
+            );
+
+            if (!results || results.length === 0) {
+                throw new Error('Vernacular query error');
+            }
+
+            let wordlist = results[0].values.map((value: { [x: string]: any }) => {
+                const entry = results[0].columns.reduce(
+                    (
+                        acc: { [x: string]: any },
+                        column: string | number,
+                        index: string | number
+                    ) => {
+                        acc[column] = value[index];
+                        return acc;
+                    },
+                    {}
+                );
+
+                let firstLetter = entry.name.charAt(0).toLowerCase();
+
+                let firstTwoChars: any;
+                let startingPosition = 0;
+
+                if (firstLetter === '*' || firstLetter === '-') {
+                    startingPosition = 1;
+                }
+                firstTwoChars = entry.name
+                    .substring(startingPosition, 2 + startingPosition)
+                    .toLowerCase();
+
+                if (alphabet.includes(firstTwoChars)) {
+                    firstLetter = firstTwoChars;
+                } else {
+                    firstLetter = entry.name.charAt(startingPosition).toLowerCase();
+                }
+
+                if (!alphabet.includes(firstLetter)) {
+                    firstLetter = '*';
+                }
+
+                // Remap 'name' to 'word' for consistency with reversalWord.
+                Object.defineProperty(entry, 'word',
+                    Object.getOwnPropertyDescriptor(entry, 'name'));
+                delete entry['name'];
+                entry.letter = firstLetter;
+                return entry;
+            });
+
+            vernacularWords = wordlist;
+        }
+
+        async function initializeDatabase() {
+            // TODO fix caching error: database fails if cache is cleared and page refreshed.
+            // How can I tell if the cache is emptied? How can I remove the DB?
+            let db = sqlDb;
+            if (!sqlJs && !sqlDb) {
+                // Fetch the WebAssembly binary manually using SvelteKit's fetch
+                const wasmResponse = await fetch(`${base}/wasm/sql-wasm.wasm`);
+                const wasmBinary = await wasmResponse.arrayBuffer();
+
+                // Initialize sql.js with the manually loaded wasm binary
+                let sql = await initSqlJs({ wasmBinary });
+                sqlJs = sql;
+
+                // Fetch the database file
+                const response = await fetch(`${base}/data.sqlite`);
+                const buffer = await response.arrayBuffer();
+
+                // Load the database into sql.js
+                db = new sql.Database(new Uint8Array(buffer));
+                sqlDb = db;
+            }
+            //return db;
+        }
+
+        async function queryXmlByWordId(wordIds: any[]): Promise<ArrayIterator<string>> {
+            try {
+                await initializeDatabase();
+
+                let results: string[][];
+                const dynamicQuery = wordIds.map(() => `id = ?`).join(' OR ');
+                const dynamicParams = wordIds.map((id: any) => id);
+                results = sqlDb.exec(
+                    `SELECT xml FROM entries WHERE ${dynamicQuery}`,
+                    dynamicParams
+                );
+
+                return results[0].values;
+            } catch (error) {
+                console.error(`Error querying XML for word IDs ${wordIds}:`, error);
+                return null;
+            }
+        }
+
+        async function search(wordIds: any[]) {
+            let xmlResults: ArrayIterator<string> = await queryXmlByWordId(wordIds);
+            if (!wordIds) {
+                xmlData = '';
+                return;
+            }
+
+            // Insert an `<hr>` tag or a visible separator between entries
+            xmlData =
+                xmlResults
+                    .filter((xml) => xml) // Ensure no null values are included
+                    .map(formatXmlByClass)
+                    .join('\n<hr style="border-color: var(--SettingsSeparatorColor);">\n') +
+                '\n<hr style="border-color: var(--SettingsSeparatorColor);">\n';
+
+            return;
+        }
+
+        async function queryXML(q: any): Promise<any> {
+            try {
+                await initializeDatabase();
+                return sqlDb.exec(q);
+            } catch (error) {
+                console.error(`Error querying XML with query ${q}.\nerror:`, error);
+                return null;
+            }
+        }
+
+        return {
+            setup,
+            search,
+            fetchReversalWords,
+            fetchAllWords,
+            queryXML,
+            fetchReversalIndexes,
+            fetchReversalLetterData
+        };
+    }
+
+    /* Getters and Setters */
+    function data() {
+        return xmlData;
+    }
+
+    function currentVernacularWords() {
+        return vernacularWords;
+    }
+    function languages() {
+        return { vernacularLanguage, reversalLanguages };
+    }
+
+    return {
+        alphabets,
+        languages,
+        data,
+        currentVernacularWords,
+        currentReversalWords,
+        currentReversalLetters,
+        withFetch,
+        ...withFetch({ fetch })
+    };
+}
+
+export interface ReversalIndex {
+    // Maps a letter to an array of file names
+    [letter: string]: string[];
+}
+
+export interface VernacularWordReference {
+    word: string;
+    homonym_index: number;
+}
+
+export interface VernacularWord {
+    id: number;
+    word: string;
+    homonym_index: number;
+}
+
+export interface ReversalWord {
+    word: string;
+    indexes: string[];
+    vernacularWords: VernacularWordReference[];
+    letter: string;
+}
+
+export const lexicon = createLexicon();
+export let selected = $state({ language: "" });
diff --git a/src/routes/lexicon/+page.svelte b/src/routes/lexicon/+page.svelte
index 5e854eb1e..adf9a1be7 100644
--- a/src/routes/lexicon/+page.svelte
+++ b/src/routes/lexicon/+page.svelte
@@ -1,154 +1,37 @@
 <script>
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import LexiconEntryView from '$lib/components/LexiconEntryView.svelte';
+    import LexiconListView from '$lib/components/LexiconListView.svelte';
     import LexiconListViewHeader from '$lib/components/LexiconListViewHeader.svelte';
-    import LexiconReversalListView from '$lib/components/LexiconReversalListView.svelte';
-    import LexiconVernacularListView from '$lib/components/LexiconVernacularListView.svelte';
     import Navbar from '$lib/components/Navbar.svelte';
     import WordNavigationStrip from '$lib/components/WordNavigationStrip.svelte';
     import config from '$lib/data/config';
-    import {
-        currentReversalLettersStore,
-        currentReversalWordsStore,
-        reversalLettersStore,
-        reversalWordsStore,
-        selectedLanguageStore,
-        vernacularLanguageStore,
-        vernacularWordsStore
-    } from '$lib/data/stores/lexicon.ts';
+    import { lexicon, selected } from '$lib/data/lexicon.svelte';
     import { SearchIcon } from '$lib/icons';
     import { gotoRoute } from '$lib/navigate';
     import { onMount, tick } from 'svelte';
 
-    const { vernacularAlphabet, reversalAlphabets, reversalLanguages, reversalIndexes } = page.data;
-
-    const alphabets = {
-        reversal: Object.values(reversalAlphabets[0])[0],
-        vernacular: vernacularAlphabet
-    };
-
+    const alphabets = lexicon.alphabets();
     let selectedLetter = alphabets.vernacular[0];
-    let selectedWord = null;
-    $: showBackButton = selectedWord ? true : false;
-    let defaultReversalKey = Object.keys(reversalAlphabets[0])[0];
-    let loadedReversalLetters = new Set();
-    let reversalWordsList;
-    let vernacularWordsList;
-    let vernacularLanguage;
-    let scrollContainer;
-    let wordIds;
-
-    $: loadedReversalLetters = new Set($currentReversalLettersStore);
-    $: reversalWordsList = $currentReversalWordsStore;
-    $: vernacularLanguage = $vernacularLanguageStore;
-    $: vernacularWordsList = $vernacularWordsStore;
-    //$: selectedLanguage = $selectedLanguageStore;
-    $: selectedLanguageStore.set(vernacularLanguage);
-
-    const reversalLanguage = Object.values(reversalLanguages[0])[0];
-
-    async function fetchWords(letter = selectedLetter) {
-        if ($selectedLanguageStore === reversalLanguage && !loadedReversalLetters.has(letter)) {
-            const letterIndex = alphabets.reversal.indexOf(letter);
-            const lettersToLoad = alphabets.reversal
-                .slice(0, letterIndex)
-                .filter((l) => !loadedReversalLetters.has(l));
-
-            // Load all required letters in parallel
-            await Promise.all(lettersToLoad.map(loadLetterData));
-
-            // Load the current letter
-            await loadLetterData(letter);
-
-            // Sort the results based on the selectedLanguage's alphabet
-            reversalWordsStore.update((words) => {
-                const updatedWords = { ...words };
-                updatedWords[$selectedLanguageStore] = (
-                    updatedWords[$selectedLanguageStore] || []
-                ).sort((a, b) => {
-                    const alphabet = currentAlphabet;
-                    return (
-                        alphabet.indexOf(a.word[0].toLowerCase()) -
-                        alphabet.indexOf(b.word[0].toLowerCase())
-                    );
-                });
-                return updatedWords;
-            });
-        }
-    }
-
-    async function loadLetterData(letter) {
-        let newWords = [];
-
-        const index = reversalIndexes[defaultReversalKey];
-        const files = index[letter] || [];
-        for (const file of files) {
-            const reversalFile = `${base}/reversal/${defaultReversalKey}/${file}`;
-            const response = await fetch(reversalFile);
-            if (response.ok) {
-                const data = await response.json();
-                const currentFileWords = Object.entries(data).map(([word, entries]) => {
-                    return {
-                        word: word,
-                        indexes: entries.map((entry) => entry.index),
-                        vernacularWords: entries
-                            .map((entry) => {
-                                const foundWord = vernacularWordsList.find(
-                                    (vw) => vw.id === entry.index
-                                );
-                                if (foundWord) {
-                                    return {
-                                        name: foundWord.name,
-                                        homonymIndex: foundWord.homonym_index || 0
-                                    };
-                                } else {
-                                    console.log(
-                                        `Index ${entry.index} not found in vernacularWordsList`
-                                    );
-                                    return null; // Return null for missing indexes
-                                }
-                            })
-                            .filter((index) => index !== null), // Filter out null values
-                        letter: letter
-                    };
-                });
-
-                currentFileWords.forEach((newWord) => {
-                    const existingWord = newWords.find((w) => w.word === newWord.word);
-                    if (existingWord) {
-                        existingWord.indexes = [
-                            ...new Set([...existingWord.indexes, ...newWord.indexes])
-                        ];
-                    } else {
-                        newWords.push(newWord);
-                    }
-                });
-            }
-        }
+    let selectedWord = $state(null);
+    const showBackButton = $derived(selectedWord ? true : false);
+    //let defaultReversalKey = Object.keys(reversalAlphabets[0])[0];
 
-        reversalWordsStore.update((words) => {
-            const updatedWords = { ...words };
-            updatedWords[$selectedLanguageStore] = [
-                ...(updatedWords[$selectedLanguageStore] || []),
-                ...newWords
-            ];
-            return updatedWords;
-        });
-
-        reversalLettersStore.update((letters) => {
-            const updatedLetters = { ...letters };
-            updatedLetters[$selectedLanguageStore] = [
-                ...(updatedLetters[$selectedLanguageStore] || []),
-                letter
-            ];
-            return updatedLetters;
-        });
-    }
-
-    function selectWord(word) {
+    let reversalLetters = $derived(lexicon.currentReversalLetters());
+    let vernacularWords = $derived(lexicon.currentVernacularWords());
+    let scrollContainer;
+    let wordIds = $derived(selectedWord.indexes || null);
+    const { vernacularLanguage, reversalLanguages } = lexicon.languages();
+    const reversalLanguage = Object.values(reversalLanguages)[1];
+    let reversalWords = $derived(lexicon.currentReversalWords(reversalLanguage));
+
+    let currentAlphabet = $derived(
+        selected.language === reversalLanguage
+            ? alphabets.reversal[alphabets.keys[reversalLanguage]] // TODO Re-key this baby to work with the proper name of a language
+            : alphabets.vernacular
+    );
+
+    function onSelectWord(word) {
         selectedWord = selectedWord && selectedWord.word === word ? null : word;
-        wordIds = selectedWord.indexes ? selectedWord.indexes : [selectedWord.index];
     }
 
     async function scrollToLetter(letter) {
@@ -165,19 +48,23 @@
         }
     }
 
-    async function handleLetterChange(letter) {
+    async function onLetterChange(letter) {
         selectedLetter = letter;
-        if ($selectedLanguageStore === reversalLanguage) {
-            await fetchWords();
-        }
+        await lexicon.fetchReversalWords({
+            letter,
+            language: selected.language
+        });
         scrollToLetter(letter);
     }
 
-    function switchLanguage(language) {
-        selectedLanguageStore.set(language);
+    function onSwitchLanguage(language) {
+        selected.language = language;
         selectedLetter = currentAlphabet[0];
-        if ($selectedLanguageStore != vernacularLanguage) {
-            fetchWords();
+        if (selected.language !== vernacularLanguage) {
+            lexicon.fetchReversalWords({
+                letter: selectedLetter,
+                language: language
+            });
         }
         const scrollableDiv = document.querySelector('.flex-1.overflow-y-auto.bg-base-100');
         if (scrollableDiv) {
@@ -191,25 +78,27 @@
         if (isFetching) return;
 
         if (
-            ($selectedLanguageStore === reversalLanguage && reversalWordsList.length > 0) ||
-            ($selectedLanguageStore === vernacularLanguage && vernacularWordsList.length > 0)
+            (selected.language === reversalLanguage && reversalWords.length > 0) ||
+            (selected.language === vernacularLanguage && vernacularWords.length > 0)
         ) {
             let div = event.target;
             const threshold = 100;
 
             if (div.scrollHeight - div.scrollTop - div.clientHeight < threshold) {
                 const currentIndex = currentAlphabet.indexOf(selectedLetter);
-                if (!loadedReversalLetters.has(currentAlphabet[currentIndex + 1])) {
+                if (!reversalLetters.has(currentAlphabet[currentIndex + 1])) {
                     if (currentIndex < currentAlphabet.length - 1) {
                         isFetching = true;
-                        await fetchWords(currentAlphabet[currentIndex + 1]);
+                        await lexicon.fetchReversalWords({
+                            letter: currentAlphabet[currentIndex + 1],
+                            language: reversalLanguage
+                        });
                         isFetching = false;
                     }
                 }
             } else if (
-                ($selectedLanguageStore === reversalLanguage &&
-                    loadedReversalLetters.has(selectedLetter)) ||
-                $selectedLanguageStore === vernacularLanguage
+                (selected.language === reversalLanguage && reversalLetters.has(selectedLetter)) ||
+                selected.language === vernacularLanguage
             ) {
                 const allLetters = div.querySelectorAll('[id^="letter-"]');
                 let visibleLetter = null;
@@ -228,15 +117,14 @@
         }
     }
 
-    $: currentAlphabet =
-        $selectedLanguageStore === reversalLanguage ? alphabets.reversal : alphabets.vernacular;
-
     onMount(() => {
-        if (selectedLetter && $selectedLanguageStore != vernacularLanguage) {
-            fetchWords();
-        }
         if (config.programType !== 'DAB') {
             gotoRoute(`/text`);
+        } else if (selectedLetter && selected.language != vernacularLanguage) {
+            lexicon.fetchReversalWords({
+                letter: selectedLetter,
+                language: reversalLanguage
+            });
         }
     });
 </script>
@@ -260,7 +148,7 @@
                 <div id="extraButtons" class:pr-4={!selectedWord}>
                     <button
                         class="dy-btn dy-btn-ghost dy-btn-circle"
-                        on:click={() => {
+                        onclick={() => {
                             wordIds = null;
                             gotoRoute(`/lexicon/search`);
                         }}
@@ -275,48 +163,36 @@
     {#if !selectedWord}
         <LexiconListViewHeader
             alphabet={currentAlphabet}
-            selectedLanguage={$selectedLanguageStore}
+            selectedLanguage={selected.language}
             {vernacularLanguage}
             {reversalLanguage}
-            onSwitchLanguage={switchLanguage}
-            onLetterChange={handleLetterChange}
+            {onSwitchLanguage}
+            {onLetterChange}
         />
-    {/if}
 
-    {#if selectedWord}
-        <WordNavigationStrip
-            currentWord={selectedWord}
-            wordsList={$selectedLanguageStore === vernacularLanguage
-                ? vernacularWordsList
-                : reversalWordsList}
-            onSelectWord={selectWord}
-        />
         <div
             class="flex-1 overflow-y-auto bg-base-100"
             style="background-color: var(--BackgroundColor);"
             bind:this={scrollContainer}
-            on:scroll={checkIfScrolledToBottom}
         >
-            <LexiconEntryView {wordIds} onSelectWord={selectWord} />
-        </div>
-    {:else if $selectedLanguageStore === vernacularLanguage}
-        <div
-            class="flex-1 overflow-y-auto bg-base-100"
-            style="background-color: var(--BackgroundColor);"
-            bind:this={scrollContainer}
-            on:scroll={checkIfScrolledToBottom}
-        >
-            <LexiconVernacularListView {vernacularWordsList} onSelectWord={selectWord} />
+            <LexiconListView
+                words={selected.language === vernacularLanguage ? vernacularWords : reversalWords}
+                {onSelectWord}
+            />
         </div>
     {:else}
+        <WordNavigationStrip
+            currentWord={selectedWord}
+            selectedLanguage={selected.language}
+            wordsList={selected.language === vernacularLanguage ? vernacularWords : reversalWords}
+            {onSelectWord}
+        />
         <div
-            id="container"
-            class="flex-1 overflow-y-auto bg-base-100 width-full"
+            class="flex-1 overflow-y-auto bg-base-100"
             style="background-color: var(--BackgroundColor);"
             bind:this={scrollContainer}
-            on:scroll={checkIfScrolledToBottom}
         >
-            <LexiconReversalListView {reversalWordsList} onSelectWord={selectWord} />
+            <LexiconEntryView {wordIds} {onSelectWord} />
         </div>
     {/if}
 </div>
diff --git a/src/routes/lexicon/+page.ts b/src/routes/lexicon/+page.ts
index ecc31378e..8188fee5e 100644
--- a/src/routes/lexicon/+page.ts
+++ b/src/routes/lexicon/+page.ts
@@ -1,12 +1,6 @@
-import { base } from '$app/paths';
 import type { DictionaryConfig } from '$config';
 import config from '$lib/data/config';
-import {
-    initializeDatabase,
-    vernacularLanguageStore,
-    vernacularWordsStore
-} from '$lib/data/stores/lexicon';
-import type { ReversalIndex } from '$lib/lexicon';
+import { lexicon } from '$lib/data/lexicon.svelte';
 
 export async function load({ fetch }) {
     if (!(config as DictionaryConfig).writingSystems) {
@@ -14,91 +8,36 @@ export async function load({ fetch }) {
     }
     const dictionaryConfig = config as DictionaryConfig;
 
-    const vernacularWritingSystem = Object.values(dictionaryConfig.writingSystems).find((ws) =>
-        ws.type.includes('main')
-    );
+    const vernacularWritingSystem = Object.values(dictionaryConfig.writingSystems)
+        .find((ws) =>
+            ws.type.includes('main')
+        );
 
     if (!vernacularWritingSystem) {
         throw new Error('Vernacular language not found');
     }
 
     const vernacularAlphabet = vernacularWritingSystem.alphabet;
-    const vernacularLanguage = vernacularWritingSystem.displayNames.default;
 
     const reversalWritingSystems = Object.entries(dictionaryConfig.writingSystems).filter(
-        ([key, ws]) => !ws.type.includes('main')
+        ([_key, ws]) => !ws.type.includes('main')
     );
 
     if (!reversalWritingSystems) {
         throw new Error('Reversal language not found');
     }
 
-    const reversalAlphabets = reversalWritingSystems.map(([key, ws]) => ({ [key]: ws.alphabet }));
     const reversalLanguages = reversalWritingSystems.map(([key, ws]) => ({
         [key]: ws.displayNames.default
     }));
 
-    const reversalIndexes: { [language: string]: ReversalIndex } = {}; // Updated type for reversalIndexes
-
-    for (const [key, ws] of Object.entries(dictionaryConfig.writingSystems)) {
-        if (!ws.type.includes('main')) {
-            const response = await fetch(`${base}/reversal/${key}/index.json`);
-            if (response.ok) {
-                reversalIndexes[key] = (await response.json()) as ReversalIndex; // Explicitly cast the JSON response
-            } else {
-                console.warn(`Failed to load reversal index for language: ${key}`);
-            }
-        }
-    }
-
-    let db = await initializeDatabase({ fetch });
-    let results = db.exec(`SELECT id, name, homonym_index, type, num_senses, summary FROM entries`);
-
-    if (!results || results.length === 0) {
-        throw new Error('Vernacular query error');
-    }
-
-    let vernacularWordsList = [];
-    if (results[0]) {
-        vernacularWordsList = results[0].values.map((value) => {
-            const entry = results[0].columns.reduce((acc, column, index) => {
-                acc[column] = value[index];
-                return acc;
-            }, {});
 
-            let firstLetter = entry.name.charAt(0).toLowerCase();
-
-            let firstTwoChars;
-            let startingPosition = 0;
-
-            if (firstLetter === '*' || firstLetter === '-') {
-                startingPosition = 1;
-            }
-            firstTwoChars = entry.name
-                .substring(startingPosition, 2 + startingPosition)
-                .toLowerCase();
-
-            if (vernacularAlphabet.includes(firstTwoChars)) {
-                firstLetter = firstTwoChars;
-            } else {
-                firstLetter = entry.name.charAt(startingPosition).toLowerCase();
-            }
-
-            if (!vernacularAlphabet.includes(firstLetter)) {
-                firstLetter = '*';
-            }
-
-            entry.letter = firstLetter;
-            return entry;
-        });
-        vernacularLanguageStore.set(vernacularLanguage);
-        vernacularWordsStore.set(vernacularWordsList);
-    }
+    await lexicon.withFetch({ fetch }).setup(
+        dictionaryConfig
+    );
 
     return {
         vernacularAlphabet,
-        reversalAlphabets,
         reversalLanguages,
-        reversalIndexes
     };
 }
diff --git a/src/routes/lexicon/search/+page.svelte b/src/routes/lexicon/search/+page.svelte
index 67bd43918..75c6efd50 100644
--- a/src/routes/lexicon/search/+page.svelte
+++ b/src/routes/lexicon/search/+page.svelte
@@ -52,7 +52,7 @@
         console.log(wordIds);
     }
 
-    function selectWord(word) {
+    function onSelectWord(word) {
         selectedWord = selectedWord && selectedWord.word === word ? null : word;
         wordIds = selectedWord.indexes ? selectedWord.indexes : [selectedWord.index];
     }
@@ -123,13 +123,13 @@
             </div>
 
             {#if selectedWord}
-                <WordNavigationStrip currentWord={selectedWord} onSelectWord={selectWord} />
+                <WordNavigationStrip currentWord={selectedWord} {onSelectWord} />
             {/if}
 
             <div class="flex justify-center">
                 <div class="flex-1 overflow-auto justify-center px-4 w-full max-w-screen-md p-4">
                     {#if wordIds && wordIds.length > 0}
-                        <LexiconEntryView {wordIds} onSelectWord={selectWord} removeNewLines />
+                        <LexiconEntryView {wordIds} {onSelectWord} removeNewLines />
                     {:else if wordIds && wordIds.length == 0}
                         <div class="text-center" style="color: var(--SettingsSummaryColor);">
                             No results found.