diff --git a/public/css/hanzi-graph.css b/public/css/hanzi-graph.css
index 7d30cf71..71acbbb9 100644
--- a/public/css/hanzi-graph.css
+++ b/public/css/hanzi-graph.css
@@ -46,7 +46,7 @@
     --legend-height: 30px;
     --graph-height: calc(100% - var(--legend-height) - 4px);
     --section-container-margin: 0 16px;
-    --calendar-day-color: #eee;
+    --calendar-day-color: #3333;
     --bar-chart-separator-color: #121212;
     --bar-chart-height: 400px;
     --bar-chart-width: 600px;
@@ -109,6 +109,8 @@ body {
     /* in general, disallow overscroll gestures from causing refresh */
     /* the idea is to feel more like a native app */
     overscroll-behavior: contain;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
 }
 
 body.allow-overscroll {
@@ -1659,6 +1661,42 @@ using settings names for now
     padding-bottom: 40px;
 }
 
+.settings-nav {
+    display: flex;
+    gap: 0;
+    margin-bottom: 20px;
+    border-bottom: var(--border);
+}
+
+.settings-tab {
+    padding: 12px 24px;
+    background: none;
+    border: none;
+    border-bottom: 3px solid transparent;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--secondary-font-color);
+    cursor: pointer;
+    transition: color 0.2s, border-color 0.2s;
+}
+
+.settings-tab:hover {
+    color: var(--primary-font-color);
+}
+
+.settings-tab.active {
+    color: var(--link-color);
+    border-bottom-color: var(--link-color);
+}
+
+.settings-panel {
+    display: none;
+}
+
+.settings-panel.active {
+    display: block;
+}
+
 .settings-section {
     margin-bottom: 30px;
     padding: 20px;
@@ -1808,6 +1846,32 @@ using settings names for now
     color: #f0a500;
 }
 
+.settings-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+
+.settings-actions button {
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 500;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: opacity 0.2s;
+}
+
+.settings-actions button:hover {
+    opacity: 0.9;
+}
+
+.settings-actions button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
 /* TODO(refactor): signin form stuff should be cleaned */
 main.auth-form {
     width: 275px;
diff --git a/public/index.html b/public/index.html
index 358084b2..0881cdfd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -107,6 +107,10 @@ <h3>Study Mode</h3>
                             more.</a></p>
                     <p id="hide-study-explanation"><a class="active-link">Hide this message</a></p>
                 </div>
+                <div id="anki-nudge-container" class="explanation" style="display:none">
+                    <p><span class="emphasized">Anki sync enabled</span>.</p>
+                    <p>Your flash cards are synced to Anki, so you may intend to study there.</p>
+                </div>
                 <p id="cards-due" class="explanation">
                     Cards due: <span id="card-due-count" class="emphasized"></span>
                 </p>
@@ -368,63 +372,147 @@ <h3>What is the flow diagram?</h3>
     </div>
     <div id="settings-container" style="display:none">
         <main class="settings">
-            <section class="settings-section">
-                <h2>Local AI Settings</h2>
-                <p class="explanation">
-                    Connect to a local AI server (like <a href="https://lmstudio.ai/" target="_blank">LMStudio</a>)
-                    to use AI features without signing in. The server must be OpenAI API compatible.
-                </p>
+            <nav class="settings-nav">
+                <button class="settings-tab active" data-tab="local-ai">Local AI</button>
+                <button class="settings-tab" data-tab="anki">Anki</button>
+            </nav>
 
-                <div class="settings-item">
-                    <label class="settings-toggle">
-                        <input type="checkbox" id="local-ai-enabled" />
-                        <span>Enable Local AI</span>
-                    </label>
-                </div>
+            <div id="local-ai-settings" class="settings-panel active">
+                <section class="settings-section">
+                    <h2>Local AI Settings</h2>
+                    <p class="explanation">
+                        Connect to a local AI server (like <a href="https://lmstudio.ai/" target="_blank">LMStudio</a>)
+                        to use AI features without signing in. The server must be OpenAI API compatible.
+                    </p>
 
-                <div class="settings-item">
-                    <label for="local-ai-endpoint">Server Endpoint:</label>
-                    <input type="text" id="local-ai-endpoint" placeholder="http://localhost:1234/v1"
-                        value="http://localhost:1234/v1" class="settings-input" />
-                    <p class="settings-hint">The base URL of your local AI server's OpenAI-compatible API.</p>
-                </div>
+                    <div class="settings-item">
+                        <label class="settings-toggle">
+                            <input type="checkbox" id="local-ai-enabled" />
+                            <span>Enable Local AI</span>
+                        </label>
+                    </div>
 
-                <div class="settings-item">
-                    <button id="test-connection-button" class="secondary-button">Test Connection</button>
-                    <span id="connection-status" class="connection-status"></span>
-                </div>
+                    <div class="settings-item">
+                        <label for="local-ai-endpoint">Server Endpoint:</label>
+                        <input type="text" id="local-ai-endpoint" placeholder="http://localhost:1234/v1"
+                            value="http://localhost:1234/v1" class="settings-input" />
+                        <p class="settings-hint">The base URL of your local AI server's OpenAI-compatible API.</p>
+                    </div>
 
-                <div class="settings-item">
-                    <label for="local-ai-model">Model:</label>
-                    <select id="local-ai-model" class="settings-select">
-                        <option value="">-- Test connection first --</option>
-                    </select>
-                    <button id="refresh-models-button" class="icon-button" title="Refresh models">↻</button>
-                    <p class="settings-hint">Select the model to use for AI features. Some features (like image
-                        analysis) require vision-capable models.</p>
-                </div>
+                    <div class="settings-item">
+                        <button id="test-connection-button" class="secondary-button">Test Connection</button>
+                        <span id="connection-status" class="connection-status"></span>
+                    </div>
 
-                <div class="settings-item" id="local-ai-status-container" style="display:none">
-                    <p class="settings-status" id="local-ai-status"></p>
-                </div>
-            </section>
+                    <div class="settings-item">
+                        <label for="local-ai-model">Model:</label>
+                        <select id="local-ai-model" class="settings-select">
+                            <option value="">-- Test connection first --</option>
+                        </select>
+                        <button id="refresh-models-button" class="icon-button" title="Refresh models">↻</button>
+                        <p class="settings-hint">Select the model to use for AI features. Some features (like image
+                            analysis) require vision-capable models.</p>
+                    </div>
 
-            <section class="settings-section">
-                <h3>Instructions</h3>
-                <ol class="settings-instructions">
-                    <li>Download and install <a href="https://lmstudio.ai/" target="_blank">LMStudio</a> (or another
-                        OpenAI-compatible server).</li>
-                    <li>Download a model in LMStudio (e.g., Llama, Qwen, or a vision model for image analysis).</li>
-                    <li>Start the local server in LMStudio (Developer tab → Start Server).</li>
-                    <li>Enter the server endpoint above (default: <code>http://localhost:1234/v1</code>).</li>
-                    <li>Click "Test Connection" to verify and load available models.</li>
-                    <li>Select a model and enable Local AI.</li>
-                </ol>
-                <p class="settings-hint">
-                    <strong>Note:</strong> For best results with Chinese, use a model with good multilingual support.
-                    For image analysis, you'll need a vision-capable model.
-                </p>
-            </section>
+                    <div class="settings-item" id="local-ai-status-container" style="display:none">
+                        <p class="settings-status" id="local-ai-status"></p>
+                    </div>
+                </section>
+
+                <section class="settings-section">
+                    <h3>Instructions</h3>
+                    <ol class="settings-instructions">
+                        <li>Download and install <a href="https://lmstudio.ai/" target="_blank">LMStudio</a> (or another
+                            OpenAI-compatible server).</li>
+                        <li>Download a model in LMStudio (e.g., Llama, Qwen, or a vision model for image analysis).</li>
+                        <li>Start the local server in LMStudio (Developer tab → Start Server).</li>
+                        <li>Enter the server endpoint above (default: <code>http://localhost:1234/v1</code>).</li>
+                        <li>Click "Test Connection" to verify and load available models.</li>
+                        <li>Select a model and enable Local AI.</li>
+                    </ol>
+                    <p class="settings-hint">
+                        <strong>Note:</strong> For best results with Chinese, use a model with good multilingual
+                        support.
+                        For image analysis, you'll need a vision-capable model.
+                    </p>
+                </section>
+            </div>
+
+            <div id="anki-settings" class="settings-panel">
+                <section class="settings-section">
+                    <h2>Anki Connect Settings</h2>
+                    <p class="explanation">
+                        Sync your flashcards with <a href="https://apps.ankiweb.net/" target="_blank">Anki</a> using the
+                        <a href="https://ankiweb.net/shared/info/2055492159" target="_blank">Anki-Connect</a> plugin.
+                    </p>
+
+                    <div class="settings-item">
+                        <label class="settings-toggle">
+                            <input type="checkbox" id="anki-enabled" />
+                            <span>Enable Anki Sync</span>
+                        </label>
+                    </div>
+
+                    <div class="settings-item">
+                        <label for="anki-endpoint">Anki-Connect URL:</label>
+                        <input type="text" id="anki-endpoint" placeholder="http://127.0.0.1:8765"
+                            value="http://127.0.0.1:8765" class="settings-input" />
+                        <p class="settings-hint">The URL where Anki-Connect is running (default port is 8765).</p>
+                    </div>
+
+                    <div class="settings-item">
+                        <button id="test-anki-connection" class="secondary-button">Test Connection</button>
+                        <span id="anki-connection-status" class="connection-status"></span>
+                    </div>
+
+                    <div class="settings-item">
+                        <label for="anki-deck">Deck Name:</label>
+                        <select id="anki-deck" class="settings-select">
+                            <option value="HanziGraph">HanziGraph</option>
+                        </select>
+                        <button id="refresh-decks-button" class="icon-button" title="Refresh decks">↻</button>
+                        <p class="settings-hint">The Anki deck where cards will be synced. Will be created if it doesn't
+                            exist.</p>
+                    </div>
+
+                    <div class="settings-item">
+                        <label for="anki-api-key">API Key (optional):</label>
+                        <input type="password" id="anki-api-key" placeholder="Leave empty if not configured"
+                            class="settings-input" />
+                        <p class="settings-hint">Only required if you've configured authentication in Anki-Connect.</p>
+                    </div>
+
+                    <div class="settings-item" id="anki-status-container" style="display:none">
+                        <p class="settings-status" id="anki-status"></p>
+                    </div>
+
+                    <div class="settings-actions">
+                        <button id="sync-to-anki-button" class="primary-button">Export to Anki</button>
+                        <button id="import-from-anki-button" class="primary-button">Import from Anki</button>
+                    </div>
+                    <p id="anki-sync-status" class="connection-status"></p>
+                </section>
+
+                <section class="settings-section">
+                    <h3>Instructions</h3>
+                    <ol class="settings-instructions">
+                        <li>Install <a href="https://apps.ankiweb.net/" target="_blank">Anki</a> if you haven't already.
+                        </li>
+                        <li>Install the <a href="https://ankiweb.net/shared/info/2055492159"
+                                target="_blank">Anki-Connect</a>
+                            plugin (Tools → Add-ons → Get Add-ons → Enter code: 2055492159).</li>
+                        <li>Restart Anki after installing the plugin.</li>
+                        <li>Keep Anki running in the background.</li>
+                        <li>Click "Test Connection" to verify connectivity.</li>
+                        <li>Enable Anki Sync to automatically sync new cards.</li>
+                    </ol>
+                    <p class="settings-hint">
+                        <strong>Note:</strong> Anki must be running for sync to work. On macOS, you may need to
+                        <a href="https://git.sr.ht/~foosoft/anki-connect#notes-for-macos-users" target="_blank">disable
+                            App Nap</a>.
+                    </p>
+                </section>
+            </div>
         </main>
     </div>
     <div id="menu-container" style="display:none">
diff --git a/public/js/modules/anki.js b/public/js/modules/anki.js
new file mode 100644
index 00000000..8055cc61
--- /dev/null
+++ b/public/js/modules/anki.js
@@ -0,0 +1,375 @@
+// A module for integrating with local Anki via Anki-Connect plugin
+// See: https://git.sr.ht/~foosoft/anki-connect
+
+const SETTINGS_KEY = 'ankiConnectSettings';
+const ANKI_CONNECT_VERSION = 6;
+
+// Default settings
+const defaultSettings = {
+    enabled: false,
+    endpoint: 'http://127.0.0.1:8765',
+    deckName: 'HanziGraph',
+    modelName: 'HanziGraph Basic',
+    apiKey: '' // Optional, only if user has configured authentication
+};
+
+let settings = loadSettings();
+
+function loadSettings() {
+    const stored = localStorage.getItem(SETTINGS_KEY);
+    if (stored) {
+        try {
+            return { ...defaultSettings, ...JSON.parse(stored) };
+        } catch (e) {
+            console.error('Failed to parse Anki Connect settings:', e);
+        }
+    }
+    return { ...defaultSettings };
+}
+
+function saveSettings(newSettings) {
+    settings = { ...settings, ...newSettings };
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+    document.dispatchEvent(new CustomEvent('anki-settings-changed', { detail: settings }));
+}
+
+function getSettings() {
+    return { ...settings };
+}
+
+function isAnkiEnabled() {
+    return settings.enabled && settings.endpoint && settings.deckName && settings.modelName;
+}
+
+async function invoke(action, params = {}) {
+    const request = {
+        action,
+        version: ANKI_CONNECT_VERSION,
+        params
+    };
+
+    if (settings.apiKey) {
+        request.key = settings.apiKey;
+    }
+
+    const response = await fetch(settings.endpoint, {
+        method: 'POST',
+        body: JSON.stringify(request)
+    });
+
+    const data = await response.json();
+
+    if (Object.keys(data).length !== 2) {
+        throw new Error('Response has an unexpected number of fields');
+    }
+    if (!('error' in data)) {
+        throw new Error('Response is missing required error field');
+    }
+    if (!('result' in data)) {
+        throw new Error('Response is missing required result field');
+    }
+    if (data.error) {
+        throw new Error(data.error);
+    }
+
+    return data.result;
+}
+
+async function testConnection() {
+    try {
+        const result = await invoke('requestPermission');
+        if (result.permission === 'granted') {
+            return {
+                success: true,
+                version: result.version,
+                requireApiKey: result.requireApiKey
+            };
+        } else {
+            return { success: false, error: 'Permission denied by Anki' };
+        }
+    } catch (error) {
+        return { success: false, error: error.message };
+    }
+}
+
+async function getDecks() {
+    return await invoke('deckNames');
+}
+
+async function createDeck(deckName) {
+    return await invoke('createDeck', { deck: deckName });
+}
+
+async function ensureDeckExists() {
+    const decks = await getDecks();
+    if (!decks.includes(settings.deckName)) {
+        await createDeck(settings.deckName);
+    }
+}
+
+// Model (note type...not to be confused with AI models or something) operations
+async function getModels() {
+    return await invoke('modelNames');
+}
+
+// Create the custom HanziGraph note model if it doesn't exist
+async function ensureModelExists() {
+    const models = await getModels();
+    if (!models.includes(settings.modelName)) {
+        await invoke('createModel', {
+            modelName: settings.modelName,
+            inOrderFields: ['Chinese', 'Pinyin', 'English', 'VocabOrigin', 'Language', 'Added'],
+            css: `.card {
+  font-family: arial;
+  font-size: 20px;
+  text-align: center;
+  color: black;
+  background-color: white;
+}
+.chinese {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+.pinyin {
+  font-size: 16px;
+  color: #666;
+  margin-bottom: 10px;
+}
+.english {
+  font-size: 18px;
+}`,
+            cardTemplates: [
+                {
+                    Name: 'Recognition',
+                    Front: '<div class="chinese">{{Chinese}}</div>',
+                    Back: `{{FrontSide}}
+<hr id="answer">
+<div class="pinyin">{{Pinyin}}</div>
+<div class="english">{{English}}</div>`
+                }
+            ]
+        });
+    }
+}
+
+// Convert HanziGraph card format to Anki note format
+function cardToAnkiNote(card, key) {
+    const chineseText = Array.isArray(card.zh) ? card.zh.join('') : card.zh;
+    const pinyin = card.pinyin || '';
+
+    return {
+        deckName: settings.deckName,
+        modelName: settings.modelName,
+        fields: {
+            Chinese: chineseText,
+            Pinyin: pinyin,
+            English: card.en || '',
+            VocabOrigin: card.vocabOrigin || '',
+            Language: card.language || 'zh-CN',
+            Added: card.added ? new Date(card.added).toISOString() : new Date().toISOString()
+        },
+        tags: ['hanzigraph', card.vocabOrigin || ''].filter(Boolean),
+        options: {
+            allowDuplicate: false,
+            duplicateScope: 'deck'
+        }
+    };
+}
+
+// Convert Anki note to HanziGraph card format
+function ankiNoteToCard(noteInfo) {
+    const fields = noteInfo.fields;
+    const chineseText = fields.Chinese?.value || '';
+
+    // Tokenize Chinese text into array (simple character split for now)
+    // In practice, the actual tokenization happens elsewhere in HanziGraph
+    const zh = chineseText.split('');
+
+    return {
+        zh: zh,
+        en: fields.English?.value || '',
+        pinyin: fields.Pinyin?.value || '',
+        vocabOrigin: fields.VocabOrigin?.value || '',
+        language: fields.Language?.value || 'zh-CN',
+        added: fields.Added?.value ? new Date(fields.Added.value).getTime() : Date.now(),
+        // Anki-specific fields for sync
+        ankiNoteId: noteInfo.noteId,
+        // We don't have exact SM2 data from Anki, but we can estimate
+        // These will be updated from Anki's card info if available
+        streak: 0,
+        ease: 2.5,
+        interval: 0,
+        lastReviewTimestamp: Date.now(),
+        wrongCount: 0,
+        rightCount: 0,
+        type: 'recognition'
+    };
+}
+
+async function addNote(card, key) {
+    await ensureDeckExists();
+    await ensureModelExists();
+
+    const note = cardToAnkiNote(card, key);
+    try {
+        const noteId = await invoke('addNote', { note });
+        return noteId;
+    } catch (error) {
+        // If it's a duplicate error, try to find the existing note
+        if (error.message.includes('duplicate')) {
+            const existingNotes = await findNotes(card);
+            if (existingNotes.length > 0) {
+                return existingNotes[0];
+            }
+        }
+        throw error;
+    }
+}
+
+async function updateNote(noteId, card) {
+    const chineseText = Array.isArray(card.zh) ? card.zh.join('') : card.zh;
+
+    await invoke('updateNoteFields', {
+        note: {
+            id: noteId,
+            fields: {
+                Chinese: chineseText,
+                Pinyin: card.pinyin || '',
+                English: card.en || '',
+                VocabOrigin: card.vocabOrigin || '',
+                Language: card.language || 'zh-CN'
+            }
+        }
+    });
+}
+
+async function deleteNote(noteId) {
+    await invoke('deleteNotes', { notes: [noteId] });
+}
+
+async function findNotes(card) {
+    const chineseText = Array.isArray(card.zh) ? card.zh.join('') : card.zh;
+    const query = `deck:"${settings.deckName}" Chinese:"${chineseText}"`;
+    return await invoke('findNotes', { query });
+}
+
+async function findAllHanziGraphNotes() {
+    const query = `deck:"${settings.deckName}"`;
+    return await invoke('findNotes', { query });
+}
+
+async function getNotesInfo(noteIds) {
+    return await invoke('notesInfo', { notes: noteIds });
+}
+
+// Get all cards from Anki and convert to HanziGraph format
+async function getAllCards() {
+    try {
+        const noteIds = await findAllHanziGraphNotes();
+        if (noteIds.length === 0) {
+            return {};
+        }
+
+        const notesInfo = await getNotesInfo(noteIds);
+        const studyList = {};
+
+        for (const noteInfo of notesInfo) {
+            const card = ankiNoteToCard(noteInfo);
+            const key = Array.isArray(card.zh) ? card.zh.join('') : card.zh;
+            studyList[key] = card;
+        }
+
+        return studyList;
+    } catch (error) {
+        console.error('Failed to fetch cards from Anki:', error);
+        return {};
+    }
+}
+
+// Sync a single card to Anki (add or update)
+async function syncCard(key, card) {
+    if (!isAnkiEnabled()) {
+        return { noteId: null, added: false, updated: false };
+    }
+
+    try {
+        const existingNotes = await findNotes(card);
+        if (existingNotes.length > 0) {
+            // Update existing note
+            await updateNote(existingNotes[0], card);
+            return { noteId: existingNotes[0], added: false, updated: true };
+        } else {
+            // Add new note
+            const noteId = await addNote(card, key);
+            return { noteId, added: true, updated: false };
+        }
+    } catch (error) {
+        console.error('Failed to sync card to Anki:', error);
+        throw error;
+    }
+}
+
+async function removeCard(card) {
+    if (!isAnkiEnabled()) {
+        return;
+    }
+
+    try {
+        const existingNotes = await findNotes(card);
+        if (existingNotes.length > 0) {
+            await deleteNote(existingNotes[0]);
+        }
+    } catch (error) {
+        console.error('Failed to remove card from Anki:', error);
+        throw error;
+    }
+}
+
+// Full sync: push all local cards to Anki
+async function syncAllToAnki(studyList) {
+    if (!isAnkiEnabled()) {
+        return { success: false, error: 'Anki integration not enabled' };
+    }
+
+    await ensureDeckExists();
+    await ensureModelExists();
+
+    const results = { added: 0, updated: 0, errors: [] };
+
+    for (const [key, card] of Object.entries(studyList)) {
+        try {
+            const existingNotes = await findNotes(card);
+            if (existingNotes.length > 0) {
+                await updateNote(existingNotes[0], card);
+                results.updated++;
+            } else {
+                await addNote(card, key);
+                results.added++;
+            }
+        } catch (error) {
+            results.errors.push({ key, error: error.message });
+        }
+    }
+
+    return { success: true, ...results };
+}
+
+export {
+    loadSettings,
+    saveSettings,
+    getSettings,
+    isAnkiEnabled,
+    testConnection,
+    getDecks,
+    getModels,
+    ensureDeckExists,
+    ensureModelExists,
+    getAllCards,
+    syncCard,
+    removeCard,
+    syncAllToAnki,
+    addNote,
+    updateNote,
+    deleteNote,
+    findNotes
+};
diff --git a/public/js/modules/data-layer.js b/public/js/modules/data-layer.js
index 74e191ef..30c8d7b4 100644
--- a/public/js/modules/data-layer.js
+++ b/public/js/modules/data-layer.js
@@ -5,6 +5,7 @@ import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/
 // normally we avoid * imports, but the local AI functions use the same names
 // as some in this file for convenience, so we avoid collisions this way.
 import * as localAi from './local-ai.js';
+import * as anki from './anki.js';
 
 const dataTypes = {
     studyList: 'studyList',
@@ -84,6 +85,100 @@ let saveStudyList = function (keys, localStudyList) {
         localStorage.setItem('studyList', JSON.stringify(studyList));
     }
 };
+
+// Sync all cards to Anki
+async function syncToAnki() {
+    if (!anki.isAnkiEnabled()) {
+        return { success: false, error: 'Anki is not enabled' };
+    }
+
+    const results = {
+        added: 0,
+        updated: 0,
+        failed: 0,
+        errors: []
+    };
+
+    for (const [key, card] of Object.entries(studyList)) {
+        try {
+            const result = await anki.syncCard(key, card);
+            if (result.added) {
+                results.added++;
+            } else if (result.updated) {
+                results.updated++;
+            }
+        } catch (error) {
+            results.failed++;
+            results.errors.push({ key, error: error.message });
+        }
+    }
+
+    return { success: true, results };
+}
+
+// Load study list from Anki (import from Anki)
+async function loadFromAnki() {
+    if (!anki.isAnkiEnabled()) {
+        return { success: false, error: 'Anki is not enabled' };
+    }
+
+    try {
+        const ankiCards = await anki.getAllCards();
+        const cardsToImport = {};
+        const cardsToTokenize = {};
+
+        // First pass: identify cards to import and collect their Chinese text
+        for (const [key, ankiCard] of Object.entries(ankiCards)) {
+            if (!studyList[key]) {
+                cardsToImport[key] = ankiCard;
+                cardsToTokenize[key] = key; // key is the Chinese text
+            }
+        }
+
+        if (Object.keys(cardsToImport).length === 0) {
+            return { success: true, imported: 0 };
+        }
+
+        // Request re-tokenization from the search worker
+        const tokenizedResults = await new Promise((resolve) => {
+            document.dispatchEvent(new CustomEvent('request-retokenize-cards', {
+                detail: { cards: cardsToTokenize, resolve }
+            }));
+        });
+
+        // Second pass: create cards with proper tokenization
+        let imported = 0;
+        for (const [key, ankiCard] of Object.entries(cardsToImport)) {
+            const tokenizedZh = tokenizedResults[key] || ankiCard.zh || [];
+            studyList[key] = {
+                en: ankiCard.en || '',
+                zh: tokenizedZh.map(x => x.ignore ? x.word : x),
+                pinyin: ankiCard.pinyin || '',
+                due: Date.now(),
+                streak: ankiCard.streak || 0,
+                ease: ankiCard.ease || 2.5,
+                interval: ankiCard.interval || 0,
+                lastReviewTimestamp: ankiCard.lastReviewTimestamp || Date.now(),
+                wrongCount: ankiCard.wrongCount || 0,
+                rightCount: ankiCard.rightCount || 0,
+                type: ankiCard.type || cardTypes.RECOGNITION,
+                vocabOrigin: ankiCard.vocabOrigin || '',
+                language: ankiCard.language || 'zh-CN',
+                added: ankiCard.added || Date.now()
+            };
+            imported++;
+        }
+
+        initVocabSets();
+        callbacks[dataTypes.studyList].forEach(x => x(studyList));
+        saveStudyList(Object.keys(cardsToImport));
+
+        return { success: true, imported };
+    } catch (error) {
+        return { success: false, error: error.message };
+    }
+}
+
 let updateCard = function (result, key) {
     let card = studyList[key];
     // fix up any old data from before adopting SM2
@@ -119,6 +214,13 @@ let updateCard = function (result, key) {
     // keep setting due for compatibility with old clients and data
     card.due = card.lastReviewTimestamp + (card.interval * 24 * 60 * 60 * 1000);
     saveStudyList([key]);
+
+    // Sync updated card to Anki if enabled
+    if (anki.isAnkiEnabled()) {
+        anki.syncCard(key, card).catch(err => {
+            console.error('Failed to sync updated card to Anki:', err);
+        });
+    }
 };
 let addRecallCards = function (newCards, text, newKeys, languageKey) {
     let total = Math.min(MAX_RECALL, newCards.length);
@@ -181,7 +283,13 @@ let addClozeCards = function (newCards, text, newKeys, languageKey) {
 };
 
 function updateVocabWithSentence(tokenizedSentence) {
+    if (!Array.isArray(tokenizedSentence)) {
+        return;
+    }
     for (const word of tokenizedSentence) {
+        if (typeof word !== 'string' || !word) {
+            continue;
+        }
         studyListWords.add(word);
         for (const character of word) {
             studyListCharacters.add(character);
@@ -197,7 +305,7 @@ function addCard(example, text, languageKey) {
         return;
     }
     const newKeys = [zhJoined];
-    studyList[zhJoined] = {
+    const newCard = {
         en: example.en,
         zh: example.zh,
         due: Date.now(),
@@ -213,9 +321,17 @@ function addCard(example, text, languageKey) {
         language: languageKey || 'zh-CN',
         added: Date.now()
     };
+    studyList[zhJoined] = newCard;
     saveStudyList(newKeys, null, true);
     updateVocabWithSentence(example.zh);
 
+    // Sync to Anki if enabled
+    if (anki.isAnkiEnabled()) {
+        anki.syncCard(zhJoined, newCard).catch(err => {
+            console.error('Failed to sync new card to Anki:', err);
+        });
+    }
+
     callbacks[dataTypes.studyList].forEach(x => x(studyList));
 }
 
@@ -261,11 +377,19 @@ function hasCardWithWord(word) {
 }
 
 let removeFromStudyList = function (key) {
+    const cardToRemove = studyList[key];
     delete studyList[key];
     // could keep some mapping of cards to vocab they provide, but deletions are rare enough I'd rather not deal with it
     initVocabSets();
     callbacks[dataTypes.studyList].forEach(x => x(studyList));
     saveStudyList([key]);
+
+    // Remove from Anki if enabled
+    if (anki.isAnkiEnabled() && cardToRemove) {
+        anki.removeCard(cardToRemove).catch(err => {
+            console.error('Failed to remove card from Anki:', err);
+        });
+    }
 };
 
 let getISODate = function (date) {
@@ -565,6 +689,17 @@ let initialize = function () {
             document.dispatchEvent(new CustomEvent('ai-eligibility-changed', { detail: aiEligible }));
         }
     });
+
+    // Anki sync event listeners
+    document.addEventListener('request-anki-sync', async () => {
+        const result = await syncToAnki();
+        document.dispatchEvent(new CustomEvent('anki-sync-complete', { detail: result }));
+    });
+
+    document.addEventListener('request-anki-import', async () => {
+        const result = await loadFromAnki();
+        document.dispatchEvent(new CustomEvent('anki-import-complete', { detail: result }));
+    });
 };
 
 let readOptionState = function () {
@@ -669,4 +804,4 @@ async function analyzeImage(base64ImageContents) {
     return result;
 }
 
-export { writeExploreState, readExploreState, writeOptionState, readOptionState, registerCallback, saveStudyList, addCard, inStudyList, getWordsWithoutCards, getStudyList, isFlashCardUser, removeFromStudyList, findOtherCards, updateCard, recordEvent, getStudyResults, explainChineseSentence, translateEnglish, analyzeImage, generateChineseSentences, analyzeCollocation, isAiEligible, hasCardWithWord, initialize, studyResult, dataTypes, cardTypes }
+export { writeExploreState, readExploreState, writeOptionState, readOptionState, registerCallback, saveStudyList, addCard, inStudyList, getWordsWithoutCards, getStudyList, isFlashCardUser, removeFromStudyList, findOtherCards, updateCard, recordEvent, getStudyResults, explainChineseSentence, translateEnglish, analyzeImage, generateChineseSentences, analyzeCollocation, isAiEligible, hasCardWithWord, initialize, studyResult, dataTypes, cardTypes, syncToAnki, loadFromAnki }
diff --git a/public/js/modules/search-suggestions-worker.js b/public/js/modules/search-suggestions-worker.js
index e2ea6504..153dd9cd 100644
--- a/public/js/modules/search-suggestions-worker.js
+++ b/public/js/modules/search-suggestions-worker.js
@@ -273,5 +273,17 @@ onmessage = async function (e) {
             word: e.data.payload.word,
             aiData: e.data.payload.aiData
         });
+    } else if (e.data.type === 'retokenize-cards') {
+        // Re-tokenize card Chinese text (e.g., when importing from Anki)
+        // Input: { cards: { key: chineseText, ... }, locale }
+        // Output: { key: tokenizedArray, ... }
+        const result = {};
+        for (const [key, chineseText] of Object.entries(e.data.payload.cards)) {
+            result[key] = segment(chineseText, e.data.payload.locale);
+        }
+        postMessage({
+            result,
+            type: e.data.type
+        });
     }
 }
\ No newline at end of file
diff --git a/public/js/modules/search.js b/public/js/modules/search.js
index 918d2ffc..30c2ef6a 100644
--- a/public/js/modules/search.js
+++ b/public/js/modules/search.js
@@ -7,6 +7,7 @@ import { translateEnglish, isAiEligible } from "./data-layer.js";
 let searchSuggestionsWorker = null;
 let pinyinMap = {};
 let pendingSentenceGenCallbacks = {};
+let pendingRetokenizeCallback = null;
 const mainHeader = document.getElementById('main-header');
 const searchSuggestionsContainer = document.getElementById('search-suggestions-container');
 
@@ -43,6 +44,13 @@ function handleWorkerMessage(message) {
         delete pendingSentenceGenCallbacks[message.data.word];
         return;
     }
+    if (message.data.type === 'retokenize-cards') {
+        if (pendingRetokenizeCallback) {
+            pendingRetokenizeCallback(message.data.result);
+            pendingRetokenizeCallback = null;
+        }
+        return;
+    }
     // AI searches based on unknown English text will have an `originalQuery`, since the
     // query sent over to the search suggestions worker is for the AI's translation.
     // in either case, we ensure the user isn't off doing other things before we render anything.
@@ -187,6 +195,18 @@ async function initialize(term, mode) {
             }
         });
     });
+
+    // Handle re-tokenization requests (e.g., when importing from Anki)
+    document.addEventListener('request-retokenize-cards', function (event) {
+        pendingRetokenizeCallback = event.detail.resolve;
+        searchSuggestionsWorker.postMessage({
+            type: 'retokenize-cards',
+            payload: {
+                cards: event.detail.cards,
+                locale: getActiveGraph().locale
+            }
+        });
+    });
 }
 
 function multiWordSearch(query, segments, mode, skipState, aiData) {
diff --git a/public/js/modules/settings.js b/public/js/modules/settings.js
index 9c197b28..8193480c 100644
--- a/public/js/modules/settings.js
+++ b/public/js/modules/settings.js
@@ -1,8 +1,13 @@
-// Settings module - handles the settings UI and local AI configuration
+// Settings module - handles the settings UI for Local AI and Anki integration
 import * as localAi from './local-ai.js';
+import * as anki from './anki.js';
 import { switchToState, stateKeys } from './ui-orchestrator.js';
 
-// DOM elements
+// Tab navigation
+const settingsTabs = document.querySelectorAll('.settings-tab');
+const settingsPanels = document.querySelectorAll('.settings-panel');
+
+// Local AI DOM elements
 const settingsLink = document.getElementById('settings-link');
 const localAiEnabledCheckbox = document.getElementById('local-ai-enabled');
 const localAiEndpointInput = document.getElementById('local-ai-endpoint');
@@ -13,7 +18,30 @@ const connectionStatus = document.getElementById('connection-status');
 const localAiStatusContainer = document.getElementById('local-ai-status-container');
 const localAiStatus = document.getElementById('local-ai-status');
 
-function updateStatus() {
+// Anki DOM elements
+const ankiEnabledCheckbox = document.getElementById('anki-enabled');
+const ankiEndpointInput = document.getElementById('anki-endpoint');
+const ankiDeckSelect = document.getElementById('anki-deck');
+const ankiApiKeyInput = document.getElementById('anki-api-key');
+const testAnkiConnectionButton = document.getElementById('test-anki-connection');
+const refreshDecksButton = document.getElementById('refresh-decks-button');
+const ankiConnectionStatus = document.getElementById('anki-connection-status');
+const ankiStatusContainer = document.getElementById('anki-status-container');
+const ankiStatus = document.getElementById('anki-status');
+const syncToAnkiButton = document.getElementById('sync-to-anki-button');
+const importFromAnkiButton = document.getElementById('import-from-anki-button');
+const ankiSyncStatus = document.getElementById('anki-sync-status');
+
+function switchTab(tabName) {
+    settingsTabs.forEach(tab => {
+        tab.classList.toggle('active', tab.dataset.tab === tabName);
+    });
+    settingsPanels.forEach(panel => {
+        panel.classList.toggle('active', panel.id === `${tabName}-settings`);
+    });
+}
+
+function updateLocalAiStatus() {
     const settings = localAi.getSettings();
 
     if (settings.enabled && settings.model) {
@@ -101,23 +129,23 @@ async function handleRefreshModels() {
 function handleModelChange() {
     const selectedModel = localAiModelSelect.value;
     localAi.saveSettings({ model: selectedModel });
-    updateStatus();
+    updateLocalAiStatus();
 }
 
-function handleEnabledChange() {
+function handleLocalAiEnabledChange() {
     const enabled = localAiEnabledCheckbox.checked;
     localAi.saveSettings({ enabled });
-    updateStatus();
+    updateLocalAiStatus();
 }
 
-function handleEndpointChange() {
+function handleLocalAiEndpointChange() {
     localAi.saveSettings({ endpoint: localAiEndpointInput.value });
     // Clear connection status when endpoint changes
     connectionStatus.textContent = '';
     connectionStatus.className = 'connection-status';
 }
 
-function loadSettings() {
+function loadLocalAiSettings() {
     const settings = localAi.getSettings();
 
     localAiEnabledCheckbox.checked = settings.enabled;
@@ -127,27 +155,239 @@ function loadSettings() {
         populateModelSelect(settings.availableModels, settings.model);
     }
 
-    updateStatus();
+    updateLocalAiStatus();
+}
+
+function updateAnkiStatus() {
+    const settings = anki.getSettings();
+
+    if (settings.enabled && settings.deckName) {
+        ankiStatusContainer.style.display = 'block';
+        ankiStatus.textContent = `✓ Anki sync enabled for deck: ${settings.deckName}`;
+        ankiStatus.className = 'settings-status status-success';
+        document.dispatchEvent(new CustomEvent('anki-enabled-changed', { detail: true }));
+    } else if (settings.enabled && !settings.deckName) {
+        ankiStatusContainer.style.display = 'block';
+        ankiStatus.textContent = '⚠ Please select a deck to enable Anki sync';
+        ankiStatus.className = 'settings-status status-warning';
+    } else {
+        ankiStatusContainer.style.display = 'none';
+        document.dispatchEvent(new CustomEvent('anki-enabled-changed', { detail: false }));
+    }
+}
+
+function populateDeckSelect(decks, selectedDeck) {
+    ankiDeckSelect.innerHTML = '';
+
+    // Always include the default HanziGraph option
+    const defaultOption = document.createElement('option');
+    defaultOption.value = 'HanziGraph';
+    defaultOption.textContent = 'HanziGraph';
+    if (selectedDeck === 'HanziGraph' || !selectedDeck) {
+        defaultOption.selected = true;
+    }
+    ankiDeckSelect.appendChild(defaultOption);
+
+    decks.forEach(deck => {
+        if (deck !== 'HanziGraph') {
+            const option = document.createElement('option');
+            option.value = deck;
+            option.textContent = deck;
+            if (deck === selectedDeck) {
+                option.selected = true;
+            }
+            ankiDeckSelect.appendChild(option);
+        }
+    });
+}
+
+async function handleTestAnkiConnection() {
+    ankiConnectionStatus.textContent = 'Testing...';
+    ankiConnectionStatus.className = 'connection-status status-testing';
+
+    // Save the current endpoint first
+    anki.saveSettings({ endpoint: ankiEndpointInput.value });
+
+    const result = await anki.testConnection();
+
+    if (result.success) {
+        ankiConnectionStatus.textContent = `✓ Connected (v${result.version})`;
+        ankiConnectionStatus.className = 'connection-status status-success';
+
+        // Fetch and populate decks
+        try {
+            const decks = await anki.getDecks();
+            populateDeckSelect(decks, anki.getSettings().deckName);
+        } catch (error) {
+            console.error('Failed to fetch decks:', error);
+        }
+    } else {
+        ankiConnectionStatus.textContent = `✗ ${result.error}`;
+        ankiConnectionStatus.className = 'connection-status status-error';
+    }
+}
+
+async function handleRefreshDecks() {
+    ankiConnectionStatus.textContent = 'Refreshing...';
+    ankiConnectionStatus.className = 'connection-status status-testing';
+
+    try {
+        const decks = await anki.getDecks();
+        populateDeckSelect(decks, anki.getSettings().deckName);
+
+        ankiConnectionStatus.textContent = '✓ Refreshed';
+        ankiConnectionStatus.className = 'connection-status status-success';
+    } catch (error) {
+        ankiConnectionStatus.textContent = `✗ ${error.message}`;
+        ankiConnectionStatus.className = 'connection-status status-error';
+    }
+}
+
+function handleAnkiDeckChange() {
+    anki.saveSettings({ deckName: ankiDeckSelect.value });
+    updateAnkiStatus();
+}
+
+function handleAnkiEnabledChange() {
+    const enabled = ankiEnabledCheckbox.checked;
+    anki.saveSettings({ enabled });
+    updateAnkiStatus();
+}
+
+function handleAnkiEndpointChange() {
+    anki.saveSettings({ endpoint: ankiEndpointInput.value });
+    ankiConnectionStatus.textContent = '';
+    ankiConnectionStatus.className = 'connection-status';
+}
+
+function handleAnkiApiKeyChange() {
+    anki.saveSettings({ apiKey: ankiApiKeyInput.value });
+}
+
+async function handleSyncToAnki() {
+    if (!anki.isAnkiEnabled()) {
+        ankiSyncStatus.textContent = '✗ Enable Anki first';
+        ankiSyncStatus.className = 'connection-status status-error';
+        return;
+    }
+
+    ankiSyncStatus.textContent = 'Exporting...';
+    ankiSyncStatus.className = 'connection-status status-testing';
+    syncToAnkiButton.disabled = true;
+
+    try {
+        // Get the current study list from data-layer
+        // We dispatch an event to request sync, which data-layer will handle
+        document.dispatchEvent(new CustomEvent('request-anki-sync'));
+    } catch (error) {
+        ankiSyncStatus.textContent = `✗ ${error.message}`;
+        ankiSyncStatus.className = 'connection-status status-error';
+        syncToAnkiButton.disabled = false;
+    }
+}
+
+async function handleImportFromAnki() {
+    if (!anki.isAnkiEnabled()) {
+        ankiSyncStatus.textContent = '✗ Enable Anki first';
+        ankiSyncStatus.className = 'connection-status status-error';
+        return;
+    }
+
+    ankiSyncStatus.textContent = 'Importing...';
+    ankiSyncStatus.className = 'connection-status status-testing';
+    importFromAnkiButton.disabled = true;
+
+    try {
+        // Dispatch event to request import, which data-layer will handle
+        document.dispatchEvent(new CustomEvent('request-anki-import'));
+    } catch (error) {
+        ankiSyncStatus.textContent = `✗ ${error.message}`;
+        ankiSyncStatus.className = 'connection-status status-error';
+        importFromAnkiButton.disabled = false;
+    }
+}
+
+function loadAnkiSettings() {
+    const settings = anki.getSettings();
+
+    ankiEnabledCheckbox.checked = settings.enabled;
+    ankiEndpointInput.value = settings.endpoint;
+    ankiApiKeyInput.value = settings.apiKey || '';
+    ankiDeckSelect.value = settings.deckName || 'HanziGraph';
+
+    updateAnkiStatus();
 }
 
 function initialize() {
     // Load initial settings
-    loadSettings();
+    loadLocalAiSettings();
+    loadAnkiSettings();
+
+    // Tab navigation
+    settingsTabs.forEach(tab => {
+        tab.addEventListener('click', () => switchTab(tab.dataset.tab));
+    });
 
-    // Set up event listeners
+    // Settings link in menu
     settingsLink.addEventListener('click', () => {
         switchToState(stateKeys.settings);
     });
 
-    localAiEnabledCheckbox.addEventListener('change', handleEnabledChange);
-    localAiEndpointInput.addEventListener('change', handleEndpointChange);
+    // Local AI event listeners
+    localAiEnabledCheckbox.addEventListener('change', handleLocalAiEnabledChange);
+    localAiEndpointInput.addEventListener('change', handleLocalAiEndpointChange);
     localAiModelSelect.addEventListener('change', handleModelChange);
     testConnectionButton.addEventListener('click', handleTestConnection);
     refreshModelsButton.addEventListener('click', handleRefreshModels);
 
+    // Anki event listeners
+    ankiEnabledCheckbox.addEventListener('change', handleAnkiEnabledChange);
+    ankiEndpointInput.addEventListener('change', handleAnkiEndpointChange);
+    ankiDeckSelect.addEventListener('change', handleAnkiDeckChange);
+    ankiApiKeyInput.addEventListener('change', handleAnkiApiKeyChange);
+    testAnkiConnectionButton.addEventListener('click', handleTestAnkiConnection);
+    refreshDecksButton.addEventListener('click', handleRefreshDecks);
+    syncToAnkiButton.addEventListener('click', handleSyncToAnki);
+    importFromAnkiButton.addEventListener('click', handleImportFromAnki);
+
     // Listen for settings changes from other sources
     document.addEventListener('local-ai-settings-changed', () => {
-        loadSettings();
+        loadLocalAiSettings();
+    });
+
+    document.addEventListener('anki-settings-changed', () => {
+        loadAnkiSettings();
+    });
+
+    // Listen for sync completion and notify user of status
+    document.addEventListener('anki-sync-complete', (event) => {
+        const result = event.detail;
+        if (result.success) {
+            const r = result.results;
+            ankiSyncStatus.textContent = `✓ Added: ${r.added}, Updated: ${r.updated}${r.failed > 0 ? `, Failed: ${r.failed}` : ''}`;
+            ankiSyncStatus.className = 'connection-status status-success';
+        } else {
+            ankiSyncStatus.textContent = `✗ ${result.error}`;
+            ankiSyncStatus.className = 'connection-status status-error';
+        }
+        syncToAnkiButton.disabled = false;
+        ankiSyncStatus.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    });
+
+    // Listen for import completion and notify user of status
+    document.addEventListener('anki-import-complete', (event) => {
+        const result = event.detail;
+        if (result.success) {
+            ankiSyncStatus.textContent = `✓ Imported ${result.imported} cards from Anki`;
+            ankiSyncStatus.className = 'connection-status status-success';
+        } else {
+            ankiSyncStatus.textContent = `✗ ${result.error}`;
+            ankiSyncStatus.className = 'connection-status status-error';
+        }
+        if (importFromAnkiButton) {
+            importFromAnkiButton.disabled = false;
+        }
+        ankiSyncStatus.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     });
 }
 
diff --git a/public/js/modules/study-mode.js b/public/js/modules/study-mode.js
index 0d59ed38..7a030e32 100644
--- a/public/js/modules/study-mode.js
+++ b/public/js/modules/study-mode.js
@@ -1,6 +1,7 @@
 import { makeSentenceNavigable, addTextToSpeech } from "./explore.js";
 import { dataTypes, registerCallback, saveStudyList, getStudyList, findOtherCards, removeFromStudyList, recordEvent, studyResult, updateCard, cardTypes } from "./data-layer.js";
 import { registerStateChangeCallback, stateKeys } from "./ui-orchestrator.js";
+import * as anki from "./anki.js";
 
 const studyContainer = document.getElementById('study-container');
 
@@ -34,6 +35,7 @@ const clozePlaceholder = clozePlaceholderCharacter + clozePlaceholderCharacter +
 
 const explanationContainer = document.getElementById('study-explain-container');
 const explanationHideButton = document.getElementById('hide-study-explanation');
+const ankiNudgeContainer = document.getElementById('anki-nudge-container');
 
 let currentKey = null;
 let studyModeActive = false;
@@ -159,6 +161,14 @@ let setupStudyMode = function () {
     let currentCard = null;
     cardAnswerContainer.style.display = 'none';
     showAnswerButton.innerText = "Show Answer";
+
+    // Show Anki nudge if enabled and not dismissed
+    if (anki.isAnkiEnabled()) {
+        ankiNudgeContainer.removeAttribute('style');
+    } else {
+        ankiNudgeContainer.style.display = 'none';
+    }
+
     let counter = 0;
     for (const [key, value] of Object.entries(studyList)) {
         if (value.due <= Date.now()) {