diff --git a/docs/OPTIMIZATION_AND_RENDERING_ISSUES.md b/docs/OPTIMIZATION_AND_RENDERING_ISSUES.md
new file mode 100644
index 0000000..57ef99f
--- /dev/null
+++ b/docs/OPTIMIZATION_AND_RENDERING_ISSUES.md
@@ -0,0 +1,415 @@
+# MarkLite: Optimization, Rendering & Logical Issues
+
+> Deep analysis of performance bottlenecks, rendering problems, and logical issues found in the MarkLite codebase.
+
+---
+
+## Table of Contents
+
+1. [Critical Performance Issues](#1-critical-performance-issues)
+2. [Rendering Issues](#2-rendering-issues)
+3. [Memory Leaks & Resource Management](#3-memory-leaks--resource-management)
+4. [State Management Anti-Patterns](#4-state-management-anti-patterns)
+5. [Logical Bugs](#5-logical-bugs)
+6. [Code Architecture Issues](#6-code-architecture-issues)
+7. [Export System Issues](#7-export-system-issues)
+
+---
+
+## 1. Critical Performance Issues
+
+### 1.1 CodeEditor Re-renders Entire Syntax Highlight Layer on Every Keystroke
+
+**File:** `src/components/CodeEditor.tsx` (lines 126-306)
+**Severity:** HIGH
+
+The `highlightLine()` function is called for **every single line** on **every keystroke**. For a 1000-line markdown file, this means 1000 function calls creating React nodes on every character typed. The `lines.map()` in the JSX (line 302) rebuilds the entire highlight overlay each render.
+
+**Root Cause:** No memoization of the highlighted lines. The `highlightLine`, `highlightLinks`, `highlightBold`, and `highlightImages` functions are recreated on every render since they're defined inside the component body without `useCallback` or `useMemo`.
+
+**Fix:**
+- Memoize the highlighted output using `useMemo` keyed on `content`
+- Use virtualized rendering for large files (only render visible lines)
+- Debounce the highlight re-computation
+
+### 1.2 Markdown Preview Re-parses on Every Content Change
+
+**File:** `src/App.tsx` (lines 280-292, 306-314)
+**Severity:** HIGH
+
+Two separate `<Markdown>` components render the same content:
+1. The visible preview in `MarkdownPreview.tsx`
+2. A hidden off-screen renderer for export HTML capture (line 311)
+
+Both re-parse markdown on every `content` change. The export renderer uses a 100ms `setTimeout` to capture innerHTML, creating unnecessary re-renders and DOM thrashing.
+
+**Fix:**
+- Remove the hidden export renderer; capture HTML from the visible preview when export is triggered
+- If dual rendering is needed, debounce the export capture significantly (500ms+)
+
+### 1.3 Word Count Recalculated on Every Render
+
+**File:** `src/App.tsx` (line 66)
+**Severity:** MEDIUM
+
+`getWordCount(content)` is called as derived state on every render of `AppContent`, not just when `content` changes. Since `AppContent` re-renders for cursor changes, mode toggles, sidebar toggles, toast visibility, etc., this string splitting runs unnecessarily.
+
+**Fix:** Wrap in `useMemo`:
+```tsx
+const wordCount = useMemo(() => getWordCount(content), [content]);
+```
+
+### 1.4 Line Count Recalculated on Every Render
+
+**File:** `src/App.tsx` (line 64)
+**Severity:** MEDIUM
+
+`content.split("\n").length` runs on every render. Same issue as word count.
+
+**Fix:** Wrap in `useMemo`:
+```tsx
+const lineCount = useMemo(() => content.split("\n").length, [content]);
+```
+
+### 1.5 Image Base64 Conversion on Every Render via `btoa(String.fromCharCode(...))`
+
+**File:** `src/components/MarkdownPreview.tsx` (line 51)
+**Severity:** HIGH
+
+The `LocalImage` component converts binary data to base64 using `btoa(String.fromCharCode(...data))`. For large images, this spread operation (`...data`) creates an argument list from a potentially huge `Uint8Array`, which can hit the JS engine's maximum call stack size and is extremely slow.
+
+**Fix:**
+- Use a chunked base64 encoding approach
+- Cache converted images to avoid re-conversion on re-renders
+- Use `URL.createObjectURL(new Blob([data]))` instead of base64 for better performance
+
+### 1.6 No Debouncing on Content Changes
+
+**File:** `src/App.tsx` (line 223)
+**Severity:** MEDIUM
+
+`handleContentChange` directly calls `setContent(newContent)` on every keystroke. This triggers:
+- `isDirty` recalculation
+- `lineCount` recalculation
+- `wordCount` recalculation
+- Export HTML update (with 100ms timeout)
+- Re-render of entire component tree
+
+**Fix:** Debounce the derived state updates (not the content itself, for responsiveness) or use `useDeferredValue` for non-critical computed values.
+
+---
+
+## 2. Rendering Issues
+
+### 2.1 Conditional Rendering Causes Component Unmount/Remount
+
+**File:** `src/App.tsx` (lines 319-342)
+**Severity:** MEDIUM
+
+The ternary `mode === "preview" ? <MarkdownPreview> : <CodeEditor>` completely unmounts one component and mounts the other when toggling modes. This means:
+- Editor state (scroll position, selection) is lost
+- Preview scroll position is lost
+- All `useEffect` hooks re-run
+
+Despite having `key="preview"` and `key="code"`, these keys actually *enforce* remounting rather than helping.
+
+**Fix:** Render both components and use CSS visibility/display to toggle, preserving state:
+```tsx
+<div style={{ display: mode === "preview" ? "flex" : "none" }}>
+  <MarkdownPreview ... />
+</div>
+<div style={{ display: mode === "code" ? "flex" : "none" }}>
+  <CodeEditor ... />
+</div>
+```
+
+### 2.2 Scroll Sync Between Textarea, Gutter, and Highlight is Janky
+
+**File:** `src/components/CodeEditor.tsx` (lines 110-123)
+**Severity:** MEDIUM
+
+The scroll sync uses imperative DOM manipulation (`gutterRef.current.scrollTop = scrollTop`). This runs on the main thread during the scroll event, causing jank on large files because:
+- Scroll events fire at 60fps
+- Setting `scrollTop` causes layout recalculation (forced reflow)
+
+**Fix:** Use CSS `overflow: hidden` on the gutter and highlight layers, and sync them via a shared scrollable container or CSS `position: sticky` for the gutter.
+
+### 2.3 FileExplorer and TOC Sidebars Always Mounted
+
+**File:** `src/App.tsx` (lines 347-357)
+**Severity:** LOW
+
+Both `FileExplorer` and `TableOfContents` are always rendered in the DOM even when closed (using CSS transform to slide off-screen). This means:
+- `FileExplorer` calls `list_directory_files` IPC on mount even when hidden
+- Event listeners are attached even when panel is invisible
+
+This is actually a minor positive for animation smoothness but wastes IPC calls.
+
+**Fix:** The `useEffect` in `FileExplorer.tsx` (line 34) already checks `isOpen` before fetching, so the IPC call is guarded. But the components could use lazy mounting for initial render.
+
+### 2.4 CSS Transition on Every Theme Color Change
+
+**File:** `src/index.css` (line 271), `src/App.tsx` (line 295)
+**Severity:** LOW
+
+`transition: background-color 0.2s ease, color 0.2s ease` on `body` and `transition-colors` utility class on many components means theme switching triggers hundreds of simultaneous CSS transitions. This can cause dropped frames.
+
+**Fix:** Use a single CSS transition on `html` element and let inheritance handle child elements, or disable transitions during theme switch and re-enable after.
+
+---
+
+## 3. Memory Leaks & Resource Management
+
+### 3.1 Event Listener Cleanup Race Condition
+
+**File:** `src/App.tsx` (lines 84-110, 167-189)
+**Severity:** HIGH
+
+The pattern used for setting up Tauri event listeners has a race condition:
+
+```tsx
+let unlisten: (() => void) | undefined;
+setupDragDrop().then((fn) => { unlisten = fn; });
+return () => { if (unlisten) unlisten(); };
+```
+
+If the component unmounts before the `listen()` promise resolves, `unlisten` is never set, and the listener is never cleaned up. This is a memory leak.
+
+**Fix:** Use an `AbortController` pattern or track a `mounted` flag:
+```tsx
+useEffect(() => {
+  let mounted = true;
+  let unlisten: (() => void) | undefined;
+
+  listen(...).then((fn) => {
+    if (mounted) unlisten = fn;
+    else fn(); // cleanup immediately
+  });
+
+  return () => {
+    mounted = false;
+    unlisten?.();
+  };
+}, []);
+```
+
+### 3.2 LocalImage Never Revokes Object URLs
+
+**File:** `src/components/MarkdownPreview.tsx` (lines 22-66)
+**Severity:** MEDIUM
+
+If switched to `URL.createObjectURL`, the URLs must be revoked. Currently using base64 data URLs which don't need revocation but are memory-heavy. Either way, there's no cleanup when the `imageSrc` state changes or the component unmounts.
+
+### 3.3 Toast Timer Not Properly Cleaned
+
+**File:** `src/components/Toast.tsx` (lines 13-21)
+**Severity:** LOW
+
+The inner `setTimeout(onHide, 200)` at line 18 is not cleaned up if the component unmounts during the fade-out period. The `onHide` could be called on an unmounted component.
+
+**Fix:** Track both timers and clear them in the cleanup:
+```tsx
+useEffect(() => {
+  if (isVisible) {
+    setIsAnimating(true);
+    const fadeTimer = setTimeout(() => {
+      setIsAnimating(false);
+    }, duration);
+    const hideTimer = setTimeout(onHide, duration + 200);
+    return () => { clearTimeout(fadeTimer); clearTimeout(hideTimer); };
+  }
+}, [isVisible, duration, onHide]);
+```
+
+---
+
+## 4. State Management Anti-Patterns
+
+### 4.1 Massive AppContent Component (God Component)
+
+**File:** `src/App.tsx`
+**Severity:** MEDIUM
+
+`AppContent` holds 12+ pieces of state and 10+ callbacks. Any state change re-renders the entire component tree. Derived state (`isDirty`, `lineCount`, `wordCount`, `hasFile`) is recalculated on every render.
+
+**Fix:**
+- Extract file state into a custom hook: `useFileManager()`
+- Extract UI state into a custom hook: `useUIState()`
+- Use `useMemo` for all derived state
+- Consider `useReducer` for related state transitions
+
+### 4.2 ThemeContext Causes Three Separate Effects
+
+**File:** `src/context/ThemeContext.tsx` (lines 54-66)
+**Severity:** LOW
+
+Three separate `useEffect` hooks update `document.documentElement` attributes. These could be a single effect.
+
+**Fix:**
+```tsx
+useEffect(() => {
+  const el = document.documentElement;
+  el.setAttribute('data-theme', theme);
+  el.setAttribute('data-font', font);
+  el.setAttribute('data-font-size', fontSize);
+}, [theme, font, fontSize]);
+```
+
+### 4.3 No Input Validation on localStorage Reads
+
+**File:** `src/context/ThemeContext.tsx` (lines 23-36)
+**Severity:** MEDIUM
+
+The theme context reads from localStorage and blindly casts:
+```tsx
+const stored = localStorage.getItem(THEME_STORAGE_KEY);
+return (stored as Theme) || 'dark';
+```
+
+If localStorage contains an invalid value (corrupted, old version), this could lead to undefined behavior — CSS variables won't match any theme selector.
+
+**Fix:** Validate against known values:
+```tsx
+const validThemes: Theme[] = ['dark', 'light', 'paper', 'github'];
+const stored = localStorage.getItem(THEME_STORAGE_KEY);
+return validThemes.includes(stored as Theme) ? (stored as Theme) : 'dark';
+```
+
+---
+
+## 5. Logical Bugs
+
+### 5.1 Keyboard Shortcut Conflict: Ctrl+Shift+E
+
+**File:** `src/App.tsx` (lines 260-266)
+**Severity:** MEDIUM
+
+The check `e.ctrlKey && e.shiftKey && e.key === "E"` may conflict with the `e.ctrlKey && e.key === "e"` check (line 253). When Shift is held, `e.key` becomes `"E"` (uppercase), so pressing Ctrl+Shift+E would match the uppercase check at line 260. However, the Ctrl+E check at line 253 uses lowercase `"e"`, so when Shift is held it won't match. This works correctly but is fragile — if the order changes, it could break.
+
+**Fix:** Check for Shift explicitly in the Ctrl+E handler:
+```tsx
+if (e.ctrlKey && !e.shiftKey && e.key === "e") { ... }
+```
+
+### 5.2 Save Doesn't Update fileName
+
+**File:** `src/App.tsx` (lines 134-163)
+**Severity:** MEDIUM
+
+When saving a new file (Save As), the code sets `setFilePath(selected)` but never calls `setFileName(...)`. The title bar will show null/undefined after saving a new file until it's reloaded.
+
+**Fix:** Extract filename from the selected path:
+```tsx
+const name = selected.replace(/\\/g, '/').split('/').pop() || 'Untitled';
+setFileName(name);
+```
+
+### 5.3 Export HTML Captures Stale Content
+
+**File:** `src/App.tsx` (lines 280-292)
+**Severity:** MEDIUM
+
+The export HTML is captured with a 100ms delay. If the user triggers export within 100ms of the last content change, the export HTML will be stale. Additionally, the hidden renderer doesn't have the `components` prop (for LocalImage handling), so images won't render in the export.
+
+### 5.4 TableOfContents Heading ID Not Matching Preview DOM
+
+**File:** `src/components/TableOfContents.tsx` (lines 50-86)
+**Severity:** MEDIUM
+
+The TOC generates IDs like `heading-${index}-${slug}` but then searches the DOM by tag name and text content matching rather than by ID. The text matching is fragile — it uses `includes()` which could match partial headings.
+
+**Fix:** Add IDs to heading elements in the MarkdownPreview via react-markdown's `components` prop, and scroll to them by ID.
+
+### 5.5 WelcomeScreen Drag-Drop Uses Deprecated `file.path`
+
+**File:** `src/components/WelcomeScreen.tsx` (line 20)
+**Severity:** LOW
+
+The code uses `// @ts-expect-error - Tauri adds path to File objects` and accesses `file.path`. This Tauri-specific extension may not work reliably across all platforms and Tauri versions.
+
+### 5.6 Preview Line Calculation is Inaccurate
+
+**File:** `src/components/MarkdownPreview.tsx` (lines 117-133)
+**Severity:** LOW
+
+The line calculation uses scroll percentage: `scrollPercentage * lineCount`. This is linear interpolation but markdown rendering is not linear — headings take more space, code blocks vary, images have different heights. The "Ln" display in the status bar will be inaccurate.
+
+---
+
+## 6. Code Architecture Issues
+
+### 6.1 Duplicate Markdown Rendering Configuration
+
+**File:** `src/App.tsx` (line 311), `src/components/MarkdownPreview.tsx` (lines 157-160)
+**Severity:** MEDIUM
+
+The markdown plugin configuration (`remarkGfm`, `rehypeHighlight`) is duplicated in two places. If a plugin is added/changed in one place but not the other, export output won't match preview.
+
+**Fix:** Extract to a shared constant:
+```tsx
+export const markdownPlugins = { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight] };
+```
+
+### 6.2 Hardcoded Windows Path Separator
+
+**File:** `src/components/MarkdownPreview.tsx` (line 32)
+**Severity:** MEDIUM
+
+```tsx
+const fullPath = `${baseDir}\\${cleanPath.replace(/\//g, '\\')}`;
+```
+
+This hardcodes Windows backslashes. On macOS/Linux, this will break image loading.
+
+**Fix:** Use the path separator from the runtime or handle both:
+```tsx
+const sep = filePath.includes('\\') ? '\\' : '/';
+```
+
+### 6.3 Export Utils Duplicates Theme Color Definitions
+
+**File:** `src/utils/exportUtils.ts` (lines 7-72)
+**Severity:** MEDIUM
+
+Theme colors are defined in both `index.css` (CSS variables) and `exportUtils.ts` (JavaScript objects). These must be kept in sync manually. If a theme color is updated in CSS but not in the export utility, exports will look different.
+
+**Fix:** Generate export CSS from the same source of truth, or read computed CSS variable values at export time.
+
+---
+
+## 7. Export System Issues
+
+### 7.1 PDF Export Ignores Theme Colors
+
+**File:** `src/utils/exportUtils.ts` (lines 470-476)
+**Severity:** MEDIUM
+
+The `exportToPDF` function accepts `_theme` and `_font` parameters (prefixed with underscore, meaning unused). The PDF always uses hardcoded colors (black text, light gray backgrounds) regardless of the selected theme.
+
+### 7.2 PDF Export Doesn't Handle Tables
+
+**File:** `src/utils/exportUtils.ts` (line 368)
+**Severity:** MEDIUM
+
+The `PDFElement` type includes common elements but `table` is not listed as a type. The `parseHTMLForPDF` function's `processNode` switch statement has no `case 'table':` handler. Tables in the markdown will either be skipped or rendered as concatenated text.
+
+### 7.3 PDF Export Text Overlap on Long Content
+
+**File:** `src/utils/exportUtils.ts` (lines 501-509)
+**Severity:** MEDIUM
+
+The `checkPageBreak` function only checks if the *start* of an element fits on the page. For long paragraphs or code blocks that span multiple pages, the text will overflow past the page boundary and overlap with the footer.
+
+### 7.4 HTML Export XSS Vector
+
+**File:** `src/utils/exportUtils.ts` (line 325)
+**Severity:** LOW
+
+The `title` variable (derived from filename) is inserted directly into the HTML without escaping:
+```tsx
+<title>${title}</title>
+```
+
+A filename like `"><script>alert('xss')</script>` could inject arbitrary HTML. While unlikely in a desktop app, it's a code quality concern.
+
+**Fix:** Escape HTML entities in the title.
diff --git a/docs/UI_AND_HCI_ANALYSIS.md b/docs/UI_AND_HCI_ANALYSIS.md
new file mode 100644
index 0000000..239c1eb
--- /dev/null
+++ b/docs/UI_AND_HCI_ANALYSIS.md
@@ -0,0 +1,523 @@
+# MarkLite: Frontend UI & HCI (Human-Computer Interaction) Analysis
+
+> Comprehensive analysis of UI design issues, accessibility gaps, interaction design flaws, and HCI improvements.
+
+---
+
+## Table of Contents
+
+1. [Accessibility (A11y) Issues](#1-accessibility-a11y-issues)
+2. [Interaction Design Flaws](#2-interaction-design-flaws)
+3. [Visual Design & UI Consistency](#3-visual-design--ui-consistency)
+4. [Information Architecture](#4-information-architecture)
+5. [Feedback & System Status](#5-feedback--system-status)
+6. [Error Handling & Recovery](#6-error-handling--recovery)
+7. [Responsive Design & Layout](#7-responsive-design--layout)
+8. [Cognitive Load & Usability](#8-cognitive-load--usability)
+9. [Nielsen's Heuristics Evaluation](#9-nielsens-heuristics-evaluation)
+10. [Fitts's Law & Motor Interaction](#10-fittss-law--motor-interaction)
+
+---
+
+## 1. Accessibility (A11y) Issues
+
+### 1.1 No ARIA Labels on Interactive Elements
+
+**Affected Components:** StatusBar, FileExplorer, TableOfContents, ModeToggle, CodeEditor
+**Severity:** HIGH
+
+Most interactive buttons lack `aria-label` attributes. The StatusBar toggle buttons (lines 28-53) only have `title` attributes. Screen readers cannot properly announce these controls.
+
+**Specific Issues:**
+- StatusBar file explorer button: No `aria-label`, icon-only button
+- StatusBar TOC button: No `aria-label`, icon-only button
+- ModeToggle buttons: No `aria-label` distinguishing Reader vs Code
+- SettingsMenu button: No `aria-label`
+- Export dropdown items: No `aria-label`
+
+**Fix:** Add descriptive `aria-label` to every icon-only button:
+```tsx
+<button aria-label="Toggle file explorer" ...>
+```
+
+### 1.2 No Keyboard Navigation for Sidebars
+
+**Affected Components:** FileExplorer, TableOfContents
+**Severity:** HIGH
+
+The sidebar panels have no keyboard trap management. When opened:
+- Focus doesn't move to the panel
+- Tab key can navigate behind the panel to obscured content
+- No Escape key to close (only mouse click on close button)
+- No focus restoration when panel closes
+
+**Fix:** Implement focus trap, auto-focus on open, Escape to close, and restore focus on close.
+
+### 1.3 No Skip Navigation Link
+
+**Severity:** MEDIUM
+
+There's no "skip to content" link for keyboard users to bypass the title bar and jump to the main content area.
+
+### 1.4 Color Contrast Issues in Paper Theme
+
+**Severity:** MEDIUM
+
+Paper theme uses `--text-muted: #9a8f7a` on `--bg-primary: #f5f0e6`. The contrast ratio is approximately 2.7:1, which fails WCAG AA minimum of 4.5:1 for normal text. Status bar text and hints will be unreadable for low-vision users.
+
+### 1.5 No `role` Attributes on Custom Components
+
+**Severity:** MEDIUM
+
+- The sidebar panels (`<aside>`) should have `role="complementary"` or `role="navigation"`
+- The settings dropdown should have `role="menu"` and items should have `role="menuitem"`
+- The export dropdown should follow the same ARIA menu pattern
+- The UnsavedChangesDialog should have `role="alertdialog"`
+
+### 1.6 Dialog Doesn't Trap Focus
+
+**File:** `src/components/UnsavedChangesDialog.tsx`
+**Severity:** HIGH
+
+The unsaved changes dialog renders as a custom div overlay. It has no:
+- `role="dialog"` or `role="alertdialog"`
+- `aria-modal="true"`
+- Focus trap (tab can still navigate behind the dialog)
+- Auto-focus on the primary action button
+- `aria-labelledby` / `aria-describedby`
+
+### 1.7 Toast Notification Not Announced to Screen Readers
+
+**File:** `src/components/Toast.tsx`
+**Severity:** MEDIUM
+
+The toast notification lacks `role="status"` or `aria-live="polite"`. Screen readers won't announce the message.
+
+**Fix:** Add `role="status"` and `aria-live="polite"` to the toast container.
+
+---
+
+## 2. Interaction Design Flaws
+
+### 2.1 No Undo/Redo Support
+
+**Severity:** HIGH
+
+The CodeEditor uses a plain `<textarea>` with controlled React state. The native browser undo/redo (Ctrl+Z / Ctrl+Y) works partially but can behave erratically because React's controlled component model replaces the textarea value on every keystroke, breaking the browser's undo stack.
+
+**Fix:** Implement a proper undo/redo history stack or use `useRef` for an uncontrolled textarea and sync to state on blur/save.
+
+### 2.2 No Confirmation Before Opening New File with Unsaved Changes
+
+**Severity:** HIGH
+
+The `handleOpenFile` function (App.tsx line 113) and file drop handler open files without checking `isDirty`. Unsaved changes are silently discarded. The unsaved changes dialog only appears on window close.
+
+**Fix:** Check `isDirty` before `loadFile()` and show the UnsavedChangesDialog.
+
+### 2.3 Mode Toggle Only Works on Active Mode Button
+
+**File:** `src/components/ModeToggle.tsx` (lines 12, 24)
+**Severity:** MEDIUM
+
+The inactive mode button triggers `onToggle`, but the active mode button has `onClick` set to `undefined`. Users clicking the active button (expecting feedback or re-confirmation) get no response. This violates the principle of least surprise.
+
+**Fix:** Either make both buttons always clickable (with the active one being a no-op with visual feedback) or communicate clearly that it's already selected.
+
+### 2.4 No Drag Handle Feedback
+
+**Severity:** MEDIUM
+
+The title bar serves as a drag region for moving the window, but there's no visual indicator that dragging is possible. Users unfamiliar with custom title bars may not know they can drag to move the window.
+
+### 2.5 Settings Menu Has No Close Indicator
+
+**File:** `src/components/SettingsMenu.tsx`
+**Severity:** LOW
+
+The settings dropdown has no explicit close button — it closes on click outside. Users may not discover this pattern, especially on touch devices (if ever ported to mobile/tablet).
+
+### 2.6 File Explorer Closes on File Selection
+
+**File:** `src/components/FileExplorer.tsx` (line 60)
+**Severity:** LOW
+
+Selecting a file immediately closes the explorer. Users browsing multiple files have to re-open the panel each time. This adds friction for comparison workflows.
+
+---
+
+## 3. Visual Design & UI Consistency
+
+### 3.1 Inconsistent Border Radius
+
+**Severity:** LOW
+
+Components use different border radius values:
+- Settings dropdown: `rounded-xl` (12px)
+- Export dropdown: `rounded-lg` (8px)
+- Status bar buttons: `rounded` (4px)
+- ModeToggle: `rounded-full` (9999px)
+- Unsaved dialog: `rounded-xl` (12px)
+- Toast: `rounded-lg` (8px)
+
+**Fix:** Establish a design system with 2-3 standard radius values and apply consistently.
+
+### 3.2 GitHub Theme Preview Colors Don't Match Actual Theme
+
+**File:** `src/components/SettingsMenu.tsx` (line 8)
+**Severity:** LOW
+
+The GitHub theme preview shows `colors: ['#0d1117', '#161b22']` (dark colors), but the actual GitHub theme in CSS uses `--bg-primary: #ffffff` (white background). The theme preview is misleading.
+
+**Fix:** Update the preview colors to `['#ffffff', '#f6f8fa']` to match the actual GitHub light theme.
+
+### 3.3 ModeToggle Overlaps Content in Small Viewports
+
+**File:** `src/components/ModeToggle.tsx` (line 8)
+**Severity:** MEDIUM
+
+The mode toggle is `fixed bottom-8 right-8`, which can overlap with content on narrow viewports, especially when the status bar text extends to the right. There's no responsive adjustment.
+
+### 3.4 No Visual Distinction Between Saved and New File States
+
+**Severity:** LOW
+
+After creating new content (without a file path), there's no clear visual indicator that the content hasn't been saved to disk yet. The "Unsaved" status bar indicator only shows the dirty state relative to the last save, not whether the file exists on disk.
+
+### 3.5 Theme Switcher Color Preview Is Too Small
+
+**File:** `src/components/SettingsMenu.tsx` (lines 76-90)
+**Severity:** LOW
+
+The 10x10px theme preview squares are too small to meaningfully convey the theme's appearance. The split-color design for non-GitHub themes isn't immediately intuitive.
+
+---
+
+## 4. Information Architecture
+
+### 4.1 WelcomeScreen Provides Minimal Guidance
+
+**File:** `src/components/WelcomeScreen.tsx`
+**Severity:** MEDIUM
+
+The welcome screen only shows "A minimal markdown editor" and an Open File button. New users get no information about:
+- Supported features (preview, export, themes)
+- Keyboard shortcuts
+- Recent files
+- File drag-drop capability (only mentioned in tiny hint text)
+
+**Fix:** Add a subtle feature overview or keyboard shortcut hints.
+
+### 4.2 No Recent Files List
+
+**Severity:** MEDIUM
+
+There's no history of recently opened files. Users must navigate to the file each time. For a desktop editor, this is a significant usability gap.
+
+### 4.3 Keyboard Shortcuts Are Undiscoverable
+
+**Severity:** MEDIUM
+
+Shortcuts are only listed in:
+- Title attribute on buttons (hover tooltip)
+- A tiny floating hint on the ModeToggle (opacity 0 by default)
+
+There's no shortcuts panel, help dialog, or settings page listing all shortcuts.
+
+**Fix:** Add a Help/Shortcuts dialog accessible via `Ctrl+?` or from the settings menu.
+
+### 4.4 No Breadcrumb Navigation
+
+**Severity:** LOW
+
+The title bar shows only the immediate parent folder and filename. For deeply nested files, users lose context about where the file is located.
+
+---
+
+## 5. Feedback & System Status
+
+### 5.1 No Loading State When Opening Large Files
+
+**Severity:** MEDIUM
+
+The `loadFile` function (App.tsx line 69) has no loading indicator. Opening a large markdown file will appear to freeze the UI until the IPC call completes.
+
+**Fix:** Add a loading spinner or skeleton state during file load.
+
+### 5.2 Silent Failure on File Operations
+
+**File:** `src/App.tsx` (lines 78-80, 129, 153, 161)
+**Severity:** HIGH
+
+All file operations (`loadFile`, `handleOpenFile`, `handleSaveFile`) catch errors and only `console.error` them. Users get no feedback when:
+- A file fails to open (permissions, corrupted file)
+- A file fails to save (disk full, permissions)
+- A drag-dropped file can't be read
+
+**Fix:** Show toast notifications for all file operation failures with descriptive messages.
+
+### 5.3 No Save Confirmation Feedback
+
+**Severity:** MEDIUM
+
+After pressing Ctrl+S, the only feedback is the status dot changing from orange to green and "Unsaved" to "Saved". This is subtle and easy to miss. There's no toast or brief flash confirmation.
+
+**Fix:** Show a brief "File saved" toast notification on successful save.
+
+### 5.4 Export Success/Failure Not Communicated
+
+**File:** `src/components/ExportMenu.tsx` (lines 34-50)
+**Severity:** MEDIUM
+
+The export button shows a spinner during export, but after completion:
+- Success: No confirmation message
+- Failure: Only `console.error`
+
+The user has to check their file system to verify the export worked.
+
+### 5.5 Status Bar Word Count Not Labeled
+
+**File:** `src/components/StatusBar.tsx` (line 72)
+**Severity:** LOW
+
+The word count shows just a number and "words" with no icon, making it blend with other status info. In a quick glance, it's hard to distinguish from the line/column display.
+
+---
+
+## 6. Error Handling & Recovery
+
+### 6.1 `alert()` Used for Error Messages
+
+**File:** `src/components/CodeEditor.tsx` (lines 36, 69)
+**Severity:** MEDIUM
+
+Native `alert()` dialogs are used for image paste errors. These:
+- Block the UI thread
+- Look out of place in a themed app
+- Cannot be styled or dismissed by keyboard (on some platforms)
+- Don't match the design language
+
+**Fix:** Replace with the existing Toast component or a themed error dialog.
+
+### 6.2 No Auto-Save or Recovery
+
+**Severity:** MEDIUM
+
+If the app crashes or the user accidentally closes (bypassing the dialog), all unsaved changes are lost. There's no:
+- Auto-save to a temporary location
+- Recovery mechanism on next launch
+- Periodic backup
+
+### 6.3 No Error Boundary
+
+**Severity:** MEDIUM
+
+There's no React error boundary wrapping the application. If a component crashes (e.g., markdown parsing error), the entire app goes blank with no recovery option.
+
+**Fix:** Add an error boundary component that shows a friendly error message and allows the user to recover.
+
+---
+
+## 7. Responsive Design & Layout
+
+### 7.1 Fixed Sidebar Width
+
+**File:** `src/components/FileExplorer.tsx` (line 73), `src/components/TableOfContents.tsx` (line 105)
+**Severity:** LOW
+
+Both sidebars are fixed at `w-72` (288px). On minimum window size (600px), this takes 48% of the viewport width, leaving very little room for content.
+
+**Fix:** Use responsive width or make the sidebar resizable.
+
+### 7.2 No Responsive Font Size Adjustments
+
+**Severity:** LOW
+
+Font sizes are fixed based on the user's setting (S/M/L). There's no viewport-relative sizing for very large or very small window sizes.
+
+### 7.3 Status Bar Truncation
+
+**File:** `src/components/StatusBar.tsx`
+**Severity:** LOW
+
+The status bar doesn't handle overflow. With the file explorer button, TOC button, save status, line/col, word count, and UTF-8 indicator, the bar could overflow on narrow windows.
+
+---
+
+## 8. Cognitive Load & Usability
+
+### 8.1 Two Different Drag-Drop Implementations
+
+**Severity:** LOW
+
+Drag-drop is handled by:
+1. Tauri's native `DRAG_DROP` event (App.tsx line 86) — for when a file is loaded
+2. React's `onDragOver`/`onDrop` (WelcomeScreen.tsx lines 7-25) — for the welcome screen
+
+The WelcomeScreen handler uses `file.path` which is a Tauri-specific extension, while the Tauri event listener is more reliable. This duplication can cause confusion and inconsistent behavior.
+
+### 8.2 Settings Changes Apply Immediately with No Preview
+
+**Severity:** LOW
+
+Changing theme, font, or font size in the settings menu applies instantly. Users can't preview a setting before committing. While the changes are easily reversible, rapid switching can be disorienting.
+
+### 8.3 Export Menu Doesn't Explain Differences
+
+**File:** `src/components/ExportMenu.tsx`
+**Severity:** LOW
+
+The export dropdown shows "HTML" and "PDF" with icons but no description of what each format offers (e.g., "Styled standalone webpage" vs "Print-ready document"). Users must guess which format suits their needs.
+
+### 8.4 No Markdown Cheatsheet/Help
+
+**Severity:** MEDIUM
+
+For users less familiar with markdown syntax, there's no built-in reference or cheatsheet. Adding a small help panel or tooltip system would reduce cognitive load.
+
+---
+
+## 9. Nielsen's Heuristics Evaluation
+
+### H1: Visibility of System Status
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| Save status | Good | Green/orange dot with text |
+| File loading | Poor | No loading indicator |
+| Export progress | OK | Spinner shown, no completion feedback |
+| Error states | Poor | Errors logged to console only |
+
+### H2: Match Between System and Real World
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| Terminology | Good | "Reader" / "Code" are clear |
+| Icons | Good | Material Symbols are recognizable |
+| File metaphors | OK | Folder icon for explorer is standard |
+
+### H3: User Control and Freedom
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| Undo/Redo | Poor | Unreliable due to controlled textarea |
+| Close without saving | Good | UnsavedChangesDialog with 3 options |
+| Open new file | Poor | No unsaved check before loading |
+| Cancel export | Poor | No way to cancel once started |
+
+### H4: Consistency and Standards
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| Button styles | OK | Mostly consistent, some radius variation |
+| Keyboard shortcuts | Good | Standard Ctrl+O/S/E patterns |
+| Color usage | Good | Consistent theme variables |
+
+### H5: Error Prevention
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| Unsaved changes on close | Good | Dialog shown |
+| Unsaved changes on open | Poor | No check |
+| Image paste without file | OK | Alert shown but uses native dialog |
+
+### H6: Recognition Rather Than Recall
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| Shortcuts visibility | Poor | Hidden in tooltips |
+| Feature discoverability | Poor | No onboarding or help |
+| Current state indication | OK | Mode toggle shows active state |
+
+### H7: Flexibility and Efficiency of Use
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| Keyboard shortcuts | Good | All major actions covered |
+| Theme customization | Good | 4 themes, 5 fonts, 3 sizes |
+| No custom shortcuts | Poor | Cannot rebind keys |
+
+### H8: Aesthetic and Minimalist Design
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| Overall design | Excellent | Clean, focused interface |
+| Information density | Good | Minimal but sufficient |
+| Visual noise | Good | Well-controlled |
+
+### H9: Help Users Recognize, Diagnose, and Recover from Errors
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| File errors | Poor | No user-facing messages |
+| Export errors | Poor | Console-only logging |
+| Paste errors | OK | Alert shown |
+
+### H10: Help and Documentation
+
+| Item | Rating | Issue |
+|------|--------|-------|
+| Built-in help | Poor | None |
+| Tooltips | OK | Present on some buttons |
+| Onboarding | Poor | Welcome screen is minimal |
+
+---
+
+## 10. Fitts's Law & Motor Interaction
+
+### 10.1 Window Control Buttons Are Small
+
+**File:** `src/components/TitleBar.tsx` (lines 132-152)
+**Severity:** LOW
+
+The minimize/maximize/close buttons are `w-8 h-8` (32x32px). On high-DPI displays or for users with motor impairments, these are at the minimum comfortable target size. The close button especially should be larger due to its destructive nature (WCAG recommends 44x44px minimum for touch targets).
+
+### 10.2 Status Bar Toggle Buttons Are Tiny
+
+**File:** `src/components/StatusBar.tsx` (lines 28-53)
+**Severity:** MEDIUM
+
+The file explorer and TOC toggles are `w-6 h-5` (24x20px). This is well below the recommended 44x44px touch target and even below comfortable mouse target size. Users must be very precise to click these.
+
+**Fix:** Increase to at least `w-8 h-7` with appropriate padding.
+
+### 10.3 ModeToggle Position Hides Behind Scrollbar
+
+**Severity:** LOW
+
+The mode toggle is `fixed bottom-8 right-8`. On Windows, the scrollbar takes ~10-17px. The toggle's right edge is 32px from the viewport edge, and with the scrollbar, the gap shrinks to 15-22px. The click target could overlap or be uncomfortably close to the scrollbar.
+
+### 10.4 Export Menu Dropdown Misaligned
+
+**File:** `src/components/ExportMenu.tsx` (line 81)
+**Severity:** LOW
+
+The dropdown appears `left-0 top-full`, anchored to the export button. But the export button is in the title bar near the left, meaning the dropdown appears in a good position. However, the dropdown has no pointer/caret indicating its relationship to the trigger button.
+
+---
+
+## Summary of Priority Fixes
+
+### P0 (Must Fix)
+1. Add ARIA labels to all interactive elements
+2. Implement focus trap in dialogs and sidebars
+3. Add error feedback for file operations (replace console.error with toasts)
+4. Check unsaved changes before opening new file
+5. Fix dialog accessibility (role, aria-modal, focus management)
+
+### P1 (Should Fix)
+6. Add toast for save confirmation and export completion
+7. Add keyboard shortcut help dialog
+8. Replace `alert()` with themed dialog/toast
+9. Add loading indicator for file operations
+10. Fix color contrast in Paper theme
+11. Improve WelcomeScreen with feature hints
+
+### P2 (Nice to Have)
+12. Add recent files list
+13. Add markdown cheatsheet
+14. Increase status bar button hit targets
+15. Add error boundary
+16. Fix GitHub theme preview colors
+17. Standardize border radius across components
+18. Add auto-save/recovery mechanism
diff --git a/src/App.tsx b/src/App.tsx
index 6a7b7d3..877b122 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,7 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { open, save } from "@tauri-apps/plugin-dialog";
 import { listen, TauriEvent } from "@tauri-apps/api/event";
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypeHighlight from "rehype-highlight";
 
 import { ThemeProvider } from "./context/ThemeContext";
 import { TitleBar } from "./components/TitleBar";
@@ -15,7 +12,8 @@ import { StatusBar } from "./components/StatusBar";
 import { ModeToggle } from "./components/ModeToggle";
 import { FileExplorer } from "./components/FileExplorer";
 import { TableOfContents } from "./components/TableOfContents";
-import { Toast } from "./components/Toast";
+import { Toast, ToastType } from "./components/Toast";
+import { UnsavedChangesDialog } from "./components/UnsavedChangesDialog";
 
 interface FileData {
   path: string;
@@ -44,6 +42,11 @@ function AppContent() {
   // UI state
   const [mode, setMode] = useState<ViewMode>("preview");
   const [cursorPosition, setCursorPosition] = useState({ line: 1, col: 1 });
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Pending file to open after unsaved changes dialog
+  const [pendingFilePath, setPendingFilePath] = useState<string | null>(null);
+  const [showUnsavedBeforeOpen, setShowUnsavedBeforeOpen] = useState(false);
 
   // Sidebar panel state
   const [showFileExplorer, setShowFileExplorer] = useState(false);
@@ -53,20 +56,25 @@ function AppContent() {
   const [previewLine, setPreviewLine] = useState(1);
 
   // Toast notification state
-  const [toast, setToast] = useState({ message: '', isVisible: false });
+  const [toast, setToast] = useState<{ message: string; isVisible: boolean; type: ToastType }>({ message: '', isVisible: false, type: 'success' });
 
-  // Export HTML content ref
-  const exportRef = useRef<HTMLDivElement>(null);
-  const [exportHtml, setExportHtml] = useState<string>("");
+  // Export HTML content ref - captures from visible preview
+  const previewRef = useRef<HTMLDivElement>(null);
 
   // Derived state
   const isDirty = content !== originalContent;
-  const lineCount = content.split("\n").length;
+  const lineCount = useMemo(() => content.split("\n").length, [content]);
   const hasFile = filePath !== null;
-  const wordCount = getWordCount(content);
+  const wordCount = useMemo(() => getWordCount(content), [content]);
 
-  // Load file from path
-  const loadFile = useCallback(async (path: string) => {
+  // Show toast helper
+  const showToast = useCallback((message: string, type: ToastType = 'success') => {
+    setToast({ message, isVisible: true, type });
+  }, []);
+
+  // Load file from path (with unsaved changes check)
+  const loadFileDirect = useCallback(async (path: string) => {
+    setIsLoading(true);
     try {
       const fileData = await invoke<FileData>("read_file", { path });
       setFilePath(fileData.path);
@@ -77,35 +85,80 @@ function AppContent() {
       setMode("preview");
     } catch (err) {
       console.error("Failed to load file:", err);
+      showToast("Failed to open file", "error");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [showToast]);
+
+  // Load file with unsaved changes protection
+  const loadFile = useCallback(async (path: string) => {
+    if (content !== originalContent) {
+      // Has unsaved changes — ask user first
+      setPendingFilePath(path);
+      setShowUnsavedBeforeOpen(true);
+    } else {
+      await loadFileDirect(path);
+    }
+  }, [content, originalContent, loadFileDirect]);
+
+  // Handlers for unsaved-before-open dialog
+  const handleSaveAndOpen = useCallback(async () => {
+    setShowUnsavedBeforeOpen(false);
+    if (filePath) {
+      try {
+        await invoke("save_file", { path: filePath, content });
+        setOriginalContent(content);
+      } catch (err) {
+        console.error("Failed to save file:", err);
+        showToast("Failed to save file", "error");
+        return;
+      }
+    }
+    if (pendingFilePath) {
+      await loadFileDirect(pendingFilePath);
+      setPendingFilePath(null);
+    }
+  }, [filePath, content, pendingFilePath, loadFileDirect, showToast]);
+
+  const handleDiscardAndOpen = useCallback(async () => {
+    setShowUnsavedBeforeOpen(false);
+    if (pendingFilePath) {
+      await loadFileDirect(pendingFilePath);
+      setPendingFilePath(null);
     }
+  }, [pendingFilePath, loadFileDirect]);
+
+  const handleCancelOpen = useCallback(() => {
+    setShowUnsavedBeforeOpen(false);
+    setPendingFilePath(null);
   }, []);
 
   // Listen for Tauri drag-drop events
   useEffect(() => {
-    const setupDragDrop = async () => {
-      const unlisten = await listen<{ paths: string[] }>(TauriEvent.DRAG_DROP, async (event) => {
-        const paths = event.payload.paths;
-        if (paths && paths.length > 0) {
-          const firstPath = paths[0];
-          // Only load markdown files
-          if (firstPath.endsWith('.md') || firstPath.endsWith('.markdown')) {
-            await loadFile(firstPath);
-          }
-        }
-      });
-
-      return unlisten;
-    };
-
+    let mounted = true;
     let unlisten: (() => void) | undefined;
-    setupDragDrop().then((fn) => {
-      unlisten = fn;
+
+    listen<{ paths: string[] }>(TauriEvent.DRAG_DROP, async (event) => {
+      const paths = event.payload.paths;
+      if (paths && paths.length > 0) {
+        const firstPath = paths[0];
+        // Only load markdown files
+        if (firstPath.endsWith('.md') || firstPath.endsWith('.markdown')) {
+          await loadFile(firstPath);
+        }
+      }
+    }).then((fn) => {
+      if (mounted) {
+        unlisten = fn;
+      } else {
+        fn(); // Component already unmounted, clean up immediately
+      }
     });
 
     return () => {
-      if (unlisten) {
-        unlisten();
-      }
+      mounted = false;
+      unlisten?.();
     };
   }, [loadFile]);
 
@@ -147,44 +200,48 @@ function AppContent() {
         try {
           await invoke("save_file", { path: selected, content });
           setFilePath(selected);
+          const name = selected.replace(/\\/g, '/').split('/').pop() || 'Untitled';
+          setFileName(name);
           setOriginalContent(content);
+          showToast("File saved", "success");
         } catch (err) {
           console.error("Failed to save file:", err);
+          showToast("Failed to save file", "error");
         }
       }
     } else {
-      // Save to existing path
       try {
         await invoke("save_file", { path: filePath, content });
         setOriginalContent(content);
+        showToast("File saved", "success");
       } catch (err) {
         console.error("Failed to save file:", err);
+        showToast("Failed to save file", "error");
       }
     }
-  }, [filePath, content]);
+  }, [filePath, content, showToast]);
 
   // Listen for file open from CLI (when app is opened with a file by double-click)
   useEffect(() => {
-    const setupCliFileOpen = async () => {
-      const unlisten = await listen<string>("file-open-from-cli", async (event) => {
-        const filePath = event.payload;
-        if (filePath) {
-          await loadFile(filePath);
-        }
-      });
-
-      return unlisten;
-    };
-
+    let mounted = true;
     let unlisten: (() => void) | undefined;
-    setupCliFileOpen().then((fn) => {
-      unlisten = fn;
+
+    listen<string>("file-open-from-cli", async (event) => {
+      const filePath = event.payload;
+      if (filePath) {
+        await loadFile(filePath);
+      }
+    }).then((fn) => {
+      if (mounted) {
+        unlisten = fn;
+      } else {
+        fn();
+      }
     });
 
     return () => {
-      if (unlisten) {
-        unlisten();
-      }
+      mounted = false;
+      unlisten?.();
     };
   }, [loadFile]);
 
@@ -226,8 +283,13 @@ function AppContent() {
 
   // Handle image paste success
   const handleImagePaste = useCallback(() => {
-    setToast({ message: 'Image pasted successfully!', isVisible: true });
-  }, []);
+    showToast('Image pasted successfully!', 'success');
+  }, [showToast]);
+
+  // Handle error messages from child components
+  const handleError = useCallback((message: string) => {
+    showToast(message, 'error');
+  }, [showToast]);
 
   // Hide toast
   const hideToast = useCallback(() => {
@@ -237,37 +299,39 @@ function AppContent() {
   // Keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      // Ctrl+O - Open file
-      if (e.ctrlKey && e.key === "o") {
-        e.preventDefault();
-        handleOpenFile();
-      }
-      // Ctrl+S - Save file
-      if (e.ctrlKey && e.key === "s") {
+      // Ctrl+Shift+E - Toggle file explorer (check before Ctrl+E)
+      if (e.ctrlKey && e.shiftKey && e.key === "E") {
         e.preventDefault();
-        if (hasFile || content) {
-          handleSaveFile();
+        if (hasFile) {
+          handleToggleFileExplorer();
         }
+        return;
       }
-      // Ctrl+E - Toggle mode
-      if (e.ctrlKey && e.key === "e") {
+      // Ctrl+Shift+O - Toggle TOC (check before Ctrl+O)
+      if (e.ctrlKey && e.shiftKey && e.key === "O") {
         e.preventDefault();
         if (hasFile) {
-          handleToggleMode();
+          handleToggleTOC();
         }
+        return;
       }
-      // Ctrl+Shift+E - Toggle file explorer
-      if (e.ctrlKey && e.shiftKey && e.key === "E") {
+      // Ctrl+O - Open file (without Shift)
+      if (e.ctrlKey && !e.shiftKey && e.key === "o") {
         e.preventDefault();
-        if (hasFile) {
-          handleToggleFileExplorer();
+        handleOpenFile();
+      }
+      // Ctrl+S - Save file
+      if (e.ctrlKey && !e.shiftKey && e.key === "s") {
+        e.preventDefault();
+        if (hasFile || content) {
+          handleSaveFile();
         }
       }
-      // Ctrl+Shift+O - Toggle TOC
-      if (e.ctrlKey && e.shiftKey && e.key === "O") {
+      // Ctrl+E - Toggle mode (without Shift)
+      if (e.ctrlKey && !e.shiftKey && e.key === "e") {
         e.preventDefault();
         if (hasFile) {
-          handleToggleTOC();
+          handleToggleMode();
         }
       }
     };
@@ -276,70 +340,52 @@ function AppContent() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [handleOpenFile, handleSaveFile, handleToggleMode, handleToggleFileExplorer, handleToggleTOC, hasFile, content]);
 
-  // Update export HTML when content changes
-  useEffect(() => {
-    if (exportRef.current && content) {
-      // Small delay to ensure Markdown has rendered
-      const timer = setTimeout(() => {
-        if (exportRef.current) {
-          setExportHtml(exportRef.current.innerHTML);
-        }
-      }, 100);
-      return () => clearTimeout(timer);
-    } else {
-      setExportHtml("");
+  // Get export HTML from the visible preview on demand (avoids duplicate rendering)
+  const getExportHtml = useCallback((): string => {
+    if (previewRef.current) {
+      return previewRef.current.innerHTML;
     }
-  }, [content]);
+    return "";
+  }, []);
 
   return (
     <div className="h-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden transition-colors">
-      <TitleBar 
-        fileName={fileName ?? undefined} 
-        isDirty={isDirty} 
-        filePath={filePath ?? undefined} 
-        onOpenFile={handleOpenFile} 
+      <TitleBar
+        fileName={fileName ?? undefined}
+        isDirty={isDirty}
+        filePath={filePath ?? undefined}
+        onOpenFile={handleOpenFile}
         onSaveFile={handleSaveFile}
-        htmlContent={exportHtml}
+        getExportHtml={getExportHtml}
       />
 
-      {/* Hidden export renderer - positioned off-screen to allow rendering */}
-      <div 
-        ref={exportRef} 
-        className="absolute -left-[9999px] -top-[9999px] w-[800px]"
-        aria-hidden="true"
-      >
-        <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
-          {content}
-        </Markdown>
-      </div>
-
       {!hasFile ? (
         <WelcomeScreen onOpenFile={handleOpenFile} onFileDrop={handleFileDrop} />
       ) : (
         <>
-          {mode === "preview" ? (
-<div key="preview" className="flex-1 animate-fade-in overflow-hidden flex flex-col">
-              <MarkdownPreview
-                content={content}
-                fileName={fileName || ""}
-                lineCount={lineCount}
-                fileSize={fileSize}
-                onEditClick={handleToggleMode}
-                onLineChange={(line) => setPreviewLine(line)}
-                filePath={filePath}
-              />
-            </div>
-          ) : (
-<div key="code" className="flex-1 animate-fade-in overflow-hidden flex flex-col">
-              <CodeEditor
-                content={content}
-                onChange={handleContentChange}
-                onCursorChange={(line, col) => setCursorPosition({ line, col })}
-                onImagePaste={handleImagePaste}
-                filePath={filePath}
-              />
-            </div>
-          )}
+          {/* Both views rendered; toggle via display to preserve scroll/state */}
+          <div className="flex-1 overflow-hidden flex flex-col" style={{ display: mode === "preview" ? "flex" : "none" }}>
+            <MarkdownPreview
+              content={content}
+              fileName={fileName || ""}
+              lineCount={lineCount}
+              fileSize={fileSize}
+              onEditClick={handleToggleMode}
+              onLineChange={(line) => setPreviewLine(line)}
+              filePath={filePath}
+              markdownBodyRef={previewRef}
+            />
+          </div>
+          <div className="flex-1 overflow-hidden flex flex-col" style={{ display: mode === "code" ? "flex" : "none" }}>
+            <CodeEditor
+              content={content}
+              onChange={handleContentChange}
+              onCursorChange={(line, col) => setCursorPosition({ line, col })}
+              onImagePaste={handleImagePaste}
+              onError={handleError}
+              filePath={filePath}
+            />
+          </div>
 
           <ModeToggle mode={mode} onToggle={handleToggleMode} />
 
@@ -370,11 +416,30 @@ function AppContent() {
         </>
       )}
 
+      {/* Unsaved changes dialog before opening new file */}
+      <UnsavedChangesDialog
+        isOpen={showUnsavedBeforeOpen}
+        onClose={handleCancelOpen}
+        onDiscard={handleDiscardAndOpen}
+        onSave={handleSaveAndOpen}
+      />
+
+      {/* Loading overlay */}
+      {isLoading && (
+        <div className="fixed inset-0 z-[90] flex items-center justify-center bg-[var(--bg-primary)]/80 backdrop-blur-sm">
+          <div className="flex flex-col items-center gap-3">
+            <span className="material-symbols-outlined text-[32px] text-[var(--accent)] animate-spin">progress_activity</span>
+            <span className="text-sm text-[var(--text-secondary)]">Loading...</span>
+          </div>
+        </div>
+      )}
+
       {/* Toast notifications */}
-      <Toast 
-        message={toast.message} 
-        isVisible={toast.isVisible} 
-        onHide={hideToast} 
+      <Toast
+        message={toast.message}
+        isVisible={toast.isVisible}
+        onHide={hideToast}
+        type={toast.type}
       />
     </div>
   );
diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx
index 2e1a54f..055458a 100644
--- a/src/components/CodeEditor.tsx
+++ b/src/components/CodeEditor.tsx
@@ -1,4 +1,4 @@
-import { useRef, useCallback, useEffect } from "react";
+import { useRef, useCallback, useEffect, useMemo } from "react";
 import { getImageFromClipboard, saveImageToFile, createMarkdownImage, insertAtCursor } from "../utils/imageUtils";
 
 interface CodeEditorProps {
@@ -6,10 +6,11 @@ interface CodeEditorProps {
     onChange: (content: string) => void;
     onCursorChange?: (line: number, column: number) => void;
     onImagePaste?: () => void; // Callback when image is successfully pasted
+    onError?: (message: string) => void; // Callback for error messages
     filePath?: string | null; // Current file path for saving images
 }
 
-export function CodeEditor({ content, onChange, onCursorChange, onImagePaste, filePath }: CodeEditorProps) {
+export function CodeEditor({ content, onChange, onCursorChange, onImagePaste, onError, filePath }: CodeEditorProps) {
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const gutterRef = useRef<HTMLDivElement>(null);
     const highlightRef = useRef<HTMLDivElement>(null);
@@ -32,7 +33,7 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
             
             // Check if file is saved (required for image storage)
             if (!filePath) {
-                alert('Please save your file first before pasting images.');
+                onError?.('Please save your file first before pasting images.');
                 return;
             }
             
@@ -66,7 +67,7 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
                 onImagePaste?.();
             } catch (error) {
                 console.error('Failed to paste image:', error);
-                alert('Failed to save image. Please try again.');
+                onError?.('Failed to save image. Please try again.');
             }
         }
         // If no image, let default paste behavior handle text
@@ -122,8 +123,11 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         }
     }, []);
 
+    // Memoize highlighted lines to avoid recalculating on non-content re-renders
+    const highlightedLines = useMemo(() => lines.map((line) => highlightLine(line)), [content]);
+
     // Syntax highlighting for markdown
-    const highlightLine = (line: string): React.ReactNode => {
+    function highlightLine(line: string): React.ReactNode {
         // H1 headers
         if (line.startsWith("# ")) {
             return <span className="text-[var(--syntax-h1)] font-bold">{line}</span>;
@@ -179,12 +183,12 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         if (line.includes("**")) {
             return highlightBold(line);
         }
-// Regular text
+        // Regular text
         return <span>{line || "\u00A0"}</span>;
-    };
+    }
 
     // Highlight images ![alt](url) - shows truncated for data URLs
-    const highlightImages = (text: string): React.ReactNode => {
+    function highlightImages(text: string): React.ReactNode {
         const parts: React.ReactNode[] = [];
         const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
         let lastIndex = 0;
@@ -220,9 +224,9 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         }
 
         return parts.length > 0 ? <>{parts}</> : <span>{text}</span>;
-    };
+    }
 
-    const highlightLinks = (text: string): React.ReactNode => {
+    function highlightLinks(text: string): React.ReactNode {
         const parts: React.ReactNode[] = [];
         const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
         let lastIndex = 0;
@@ -247,9 +251,9 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         }
 
         return parts.length > 0 ? <>{parts}</> : <span>{text}</span>;
-    };
+    }
 
-    const highlightBold = (text: string): React.ReactNode => {
+    function highlightBold(text: string): React.ReactNode {
         const parts: React.ReactNode[] = [];
         const boldRegex = /\*\*([^*]+)\*\*/g;
         let lastIndex = 0;
@@ -273,7 +277,7 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         }
 
         return parts.length > 0 ? <>{parts}</> : <span>{text}</span>;
-    };
+    }
 
     return (
         <main className="flex-1 flex overflow-hidden relative">
@@ -299,9 +303,9 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
                     className="absolute inset-0 p-4 font-mono text-sm leading-6 text-[var(--text-primary)] pointer-events-none overflow-hidden whitespace-pre"
                     aria-hidden="true"
                 >
-                    {lines.map((line, i) => (
+                    {highlightedLines.map((highlighted, i) => (
                         <div key={i} className="h-6">
-                            {highlightLine(line)}
+                            {highlighted}
                         </div>
                     ))}
                 </div>
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..8dafc5a
--- /dev/null
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,61 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+    children: ReactNode;
+}
+
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error: Error): State {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error("MarkLite crashed:", error, errorInfo);
+    }
+
+    handleReload = () => {
+        this.setState({ hasError: false, error: null });
+    };
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div className="h-screen flex flex-col items-center justify-center bg-[var(--bg-primary)] text-[var(--text-primary)] p-8">
+                    <div className="flex flex-col items-center gap-6 max-w-md text-center">
+                        <span className="material-symbols-outlined text-[48px] text-[var(--danger)]">
+                            error
+                        </span>
+                        <h1 className="text-xl font-bold">Something went wrong</h1>
+                        <p className="text-sm text-[var(--text-secondary)] leading-relaxed">
+                            MarkLite encountered an unexpected error. Your file data should be safe.
+                        </p>
+                        {this.state.error && (
+                            <pre className="w-full text-left text-xs bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-4 overflow-auto max-h-32 text-[var(--text-secondary)]">
+                                {this.state.error.message}
+                            </pre>
+                        )}
+                        <button
+                            onClick={this.handleReload}
+                            className="flex items-center gap-2 bg-[var(--accent)] text-[var(--accent-text)] font-medium text-sm px-6 py-2.5 rounded-lg hover:opacity-90 transition-opacity"
+                        >
+                            <span className="material-symbols-outlined text-[20px]">refresh</span>
+                            Try Again
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
diff --git a/src/components/ExportMenu.tsx b/src/components/ExportMenu.tsx
index 2e2414c..c332a1d 100644
--- a/src/components/ExportMenu.tsx
+++ b/src/components/ExportMenu.tsx
@@ -4,13 +4,12 @@ import { exportToHTML, exportToPDF } from '../utils/exportUtils';
 
 interface ExportMenuProps {
     fileName: string;
-    htmlContent: string;
-    disabled?: boolean;
+    getExportHtml?: () => string;
 }
 
 type ExportFormat = 'html' | 'pdf';
 
-export function ExportMenu({ fileName, htmlContent, disabled = false }: ExportMenuProps) {
+export function ExportMenu({ fileName, getExportHtml }: ExportMenuProps) {
     const [isOpen, setIsOpen] = useState(false);
     const [isExporting, setIsExporting] = useState(false);
     const { theme, font, fontSize } = useTheme();
@@ -31,8 +30,14 @@ export function ExportMenu({ fileName, htmlContent, disabled = false }: ExportMe
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, [isOpen]);
 
+    const disabled = !getExportHtml;
+
     const handleExport = async (format: ExportFormat) => {
-        if (isExporting || !htmlContent) return;
+        if (isExporting || !getExportHtml) return;
+
+        // Capture HTML on demand from the visible preview
+        const htmlContent = getExportHtml();
+        if (!htmlContent) return;
 
         setIsExporting(true);
         setIsOpen(false);
@@ -56,7 +61,10 @@ export function ExportMenu({ fileName, htmlContent, disabled = false }: ExportMe
             <button
                 onClick={() => !disabled && setIsOpen(!isOpen)}
                 disabled={disabled || isExporting}
-                className={`btn-press flex items-center gap-1 px-2 py-1 rounded hover:bg-[var(--bg-hover)] transition-colors text-xs ${
+                aria-label="Export document"
+                aria-expanded={isOpen}
+                aria-haspopup="true"
+                className={`btn-press flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-[var(--bg-hover)] transition-colors text-xs ${
                     disabled
                         ? 'opacity-40 cursor-not-allowed text-[var(--text-muted)]'
                         : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
@@ -78,8 +86,9 @@ export function ExportMenu({ fileName, htmlContent, disabled = false }: ExportMe
 
             {/* Simple Dropdown Menu */}
             {isOpen && !disabled && (
-                <div className="absolute left-0 top-full mt-1 w-40 bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl overflow-hidden z-50 animate-fade-in-down">
+                <div role="menu" aria-label="Export formats" className="absolute left-0 top-full mt-1 w-40 bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl overflow-hidden z-50 animate-fade-in-down">
                     <button
+                        role="menuitem"
                         onClick={() => handleExport('html')}
                         className="w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-[var(--bg-hover)] transition-colors"
                     >
@@ -87,6 +96,7 @@ export function ExportMenu({ fileName, htmlContent, disabled = false }: ExportMe
                         <span>HTML</span>
                     </button>
                     <button
+                        role="menuitem"
                         onClick={() => handleExport('pdf')}
                         className="w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-[var(--bg-hover)] transition-colors"
                     >
diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index ca1d4bd..c13b2e8 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { invoke } from "@tauri-apps/api/core";
 
 interface FileEntry {
@@ -22,6 +22,7 @@ export function FileExplorer({
     const [files, setFiles] = useState<FileEntry[]>([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const panelRef = useRef<HTMLElement>(null);
 
     // Get directory from current file path
     const getDirectory = (filePath: string | null): string | null => {
@@ -40,6 +41,25 @@ export function FileExplorer({
         }
     }, [isOpen, currentFilePath]);
 
+    // Escape key to close and focus management
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onClose();
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+
+        // Focus the panel when opened
+        panelRef.current?.focus();
+
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, onClose]);
+
     const loadFiles = async (directory: string) => {
         setIsLoading(true);
         setError(null);
@@ -67,69 +87,73 @@ export function FileExplorer({
         : "Files";
 
     return (
-        <>
-
-            <aside
-                className={`fixed left-0 top-12 bottom-7 w-72 bg-[var(--bg-secondary)] border-r border-[var(--border)] z-50 shadow-2xl transition-transform duration-200 ease-out ${isOpen ? "translate-x-0" : "-translate-x-full"
-                    }`}
-            >
-                {/* Header */}
-                <div className="h-10 px-4 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg-titlebar)]">
-                    <div className="flex items-center gap-2 text-sm font-semibold text-[var(--text-primary)] no-select">
-                        <span className="material-symbols-outlined text-[18px]">
-                            folder_open
-                        </span>
-                        <span className="truncate max-w-[180px]">{directoryName}</span>
-                    </div>
-                    <button
-                        onClick={onClose}
-                        className="btn-press flex items-center justify-center w-6 h-6 rounded hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
-                    >
-                        <span className="material-symbols-outlined text-[18px]">
-                            close
-                        </span>
-                    </button>
+        <aside
+            ref={panelRef}
+            role="navigation"
+            aria-label="File explorer"
+            tabIndex={-1}
+            className={`fixed left-0 top-12 bottom-7 w-72 bg-[var(--bg-secondary)] border-r border-[var(--border)] z-50 shadow-2xl transition-transform duration-200 ease-out ${isOpen ? "translate-x-0" : "-translate-x-full"
+                }`}
+        >
+            {/* Header */}
+            <div className="h-10 px-4 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg-titlebar)]">
+                <div className="flex items-center gap-2 text-sm font-semibold text-[var(--text-primary)] no-select">
+                    <span className="material-symbols-outlined text-[18px]">
+                        folder_open
+                    </span>
+                    <span className="truncate max-w-[180px]">{directoryName}</span>
                 </div>
+                <button
+                    onClick={onClose}
+                    aria-label="Close file explorer"
+                    className="btn-press flex items-center justify-center w-7 h-7 rounded-lg hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+                >
+                    <span className="material-symbols-outlined text-[18px]">
+                        close
+                    </span>
+                </button>
+            </div>
 
-                {/* Content */}
-                <div className="flex-1 overflow-y-auto h-[calc(100%-2.5rem)]">
-                    {isLoading ? (
-                        <div className="flex items-center justify-center h-32 text-[var(--text-secondary)] text-sm">
-                            Loading...
-                        </div>
-                    ) : error ? (
-                        <div className="flex items-center justify-center h-32 text-[var(--danger)] text-sm">
-                            {error}
-                        </div>
-                    ) : files.length === 0 ? (
-                        <div className="flex items-center justify-center h-32 text-[var(--text-secondary)] text-sm">
-                            No markdown files
-                        </div>
-                    ) : (
-                        <ul className="py-2">
-                            {files.map((file, index) => {
-                                const isActive = file.path === currentFilePath;
-                                return (
-                                    <li key={file.path} className="stagger-item" style={{ animationDelay: `${index * 0.03}s` }}>
-                                        <button
-                                            onClick={() => handleFileClick(file.path)}
-                                            className={`btn-press w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition-colors ${isActive
-                                                ? "bg-[var(--accent)] text-[var(--accent-text)]"
-                                                : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
-                                                }`}
-                                        >
-                                            <span className="material-symbols-outlined text-[16px]">
-                                                description
-                                            </span>
-                                            <span className="truncate">{file.name}</span>
-                                        </button>
-                                    </li>
-                                );
-                            })}
-                        </ul>
-                    )}
-                </div>
-            </aside>
-        </>
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto h-[calc(100%-2.5rem)]">
+                {isLoading ? (
+                    <div className="flex items-center justify-center h-32 text-[var(--text-secondary)] text-sm">
+                        Loading...
+                    </div>
+                ) : error ? (
+                    <div className="flex items-center justify-center h-32 text-[var(--danger)] text-sm" role="alert">
+                        {error}
+                    </div>
+                ) : files.length === 0 ? (
+                    <div className="flex items-center justify-center h-32 text-[var(--text-secondary)] text-sm">
+                        No markdown files
+                    </div>
+                ) : (
+                    <ul className="py-2" role="listbox" aria-label="Markdown files">
+                        {files.map((file, index) => {
+                            const isActive = file.path === currentFilePath;
+                            return (
+                                <li key={file.path} className="stagger-item" style={{ animationDelay: `${index * 0.03}s` }}>
+                                    <button
+                                        onClick={() => handleFileClick(file.path)}
+                                        role="option"
+                                        aria-selected={isActive}
+                                        className={`btn-press w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition-colors ${isActive
+                                            ? "bg-[var(--accent)] text-[var(--accent-text)]"
+                                            : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
+                                            }`}
+                                    >
+                                        <span className="material-symbols-outlined text-[16px]">
+                                            description
+                                        </span>
+                                        <span className="truncate">{file.name}</span>
+                                    </button>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                )}
+            </div>
+        </aside>
     );
 }
diff --git a/src/components/MarkdownPreview.tsx b/src/components/MarkdownPreview.tsx
index 01086df..fdd45c2 100644
--- a/src/components/MarkdownPreview.tsx
+++ b/src/components/MarkdownPreview.tsx
@@ -12,44 +12,51 @@ interface MarkdownPreviewProps {
     onEditClick: () => void;
     onLineChange?: (line: number) => void;
     filePath?: string | null;
+    markdownBodyRef?: React.RefObject<HTMLDivElement | null>;
 }
 
+// MIME type lookup for image extensions
+const IMAGE_MIME_TYPES: Record<string, string> = {
+    'png': 'image/png',
+    'jpg': 'image/jpeg',
+    'jpeg': 'image/jpeg',
+    'gif': 'image/gif',
+    'webp': 'image/webp',
+    'svg': 'image/svg+xml',
+    'bmp': 'image/bmp'
+};
+
 // Component to handle local image loading
 function LocalImage({ src, alt, baseDir, ...props }: { src: string; alt: string; baseDir: string | null } & React.ImgHTMLAttributes<HTMLImageElement>) {
     const [imageSrc, setImageSrc] = useState<string>('');
     const [error, setError] = useState(false);
 
     useEffect(() => {
+        let objectUrl: string | null = null;
+
         const loadImage = async () => {
             if (!baseDir || !src) return;
-            
+
             // Check if it's a relative path
             if (src.startsWith('./') || src.startsWith('../') || (!src.includes('://') && !src.startsWith('data:'))) {
                 try {
                     // Remove leading ./ if present
                     const cleanPath = src.startsWith('./') ? src.slice(2) : src;
-                    // Construct full path with proper Windows separators
-                    const fullPath = `${baseDir}\\${cleanPath.replace(/\//g, '\\')}`;
-                    
+                    // Construct full path - handle both Windows and Unix separators
+                    const sep = baseDir.includes('\\') ? '\\' : '/';
+                    const fullPath = `${baseDir}${sep}${cleanPath.replace(/[/\\]/g, sep)}`;
+
                     // Read the file as binary
                     const data = await readFile(fullPath);
-                    
+
                     // Detect image type from extension
                     const ext = cleanPath.split('.').pop()?.toLowerCase() || 'png';
-                    const mimeTypes: Record<string, string> = {
-                        'png': 'image/png',
-                        'jpg': 'image/jpeg',
-                        'jpeg': 'image/jpeg',
-                        'gif': 'image/gif',
-                        'webp': 'image/webp',
-                        'svg': 'image/svg+xml',
-                        'bmp': 'image/bmp'
-                    };
-                    const mimeType = mimeTypes[ext] || 'image/png';
-                    
-                    // Convert to base64 data URL
-                    const base64 = btoa(String.fromCharCode(...data));
-                    setImageSrc(`data:${mimeType};base64,${base64}`);
+                    const mimeType = IMAGE_MIME_TYPES[ext] || 'image/png';
+
+                    // Use Blob + ObjectURL instead of base64 for better performance
+                    const blob = new Blob([data], { type: mimeType });
+                    objectUrl = URL.createObjectURL(blob);
+                    setImageSrc(objectUrl);
                     setError(false);
                 } catch (err) {
                     console.error('Failed to load image:', err);
@@ -62,6 +69,13 @@ function LocalImage({ src, alt, baseDir, ...props }: { src: string; alt: string;
         };
 
         loadImage();
+
+        // Revoke object URL on cleanup to prevent memory leaks
+        return () => {
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
+        };
     }, [src, baseDir]);
 
     if (error) {
@@ -95,6 +109,7 @@ export function MarkdownPreview({
     lineCount,
     onLineChange,
     filePath,
+    markdownBodyRef,
 }: MarkdownPreviewProps) {
     const mainRef = useRef<HTMLElement>(null);
 
@@ -153,9 +168,9 @@ export function MarkdownPreview({
             className="flex-1 overflow-y-auto bg-[var(--bg-primary)] transition-colors"
         >
             <div className="max-w-[800px] mx-auto px-8 py-12">
-<div className="markdown-body">
-                    <Markdown 
-                        remarkPlugins={[remarkGfm]} 
+<div className="markdown-body" ref={markdownBodyRef}>
+                    <Markdown
+                        remarkPlugins={[remarkGfm]}
                         rehypePlugins={[rehypeHighlight]}
                         components={components}
                     >
diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
index ebfa1fa..f08de75 100644
--- a/src/components/ModeToggle.tsx
+++ b/src/components/ModeToggle.tsx
@@ -5,11 +5,13 @@ interface ModeToggleProps {
 
 export function ModeToggle({ mode, onToggle }: ModeToggleProps) {
     return (
-        <div className="fixed bottom-8 right-8 z-50">
+        <div className="fixed bottom-8 right-8 z-50" role="group" aria-label="View mode toggle">
             <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-full p-1.5 flex items-center shadow-2xl backdrop-blur-sm transition-colors animate-fade-in">
                 {/* Preview/Reader Button */}
                 <button
                     onClick={mode === "code" ? onToggle : undefined}
+                    aria-label="Switch to reader mode"
+                    aria-pressed={mode === "preview"}
                     className={`btn-press flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-200 ${mode === "preview"
                         ? "bg-[var(--accent)] text-[var(--accent-text)] shadow-md"
                         : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
@@ -22,6 +24,8 @@ export function ModeToggle({ mode, onToggle }: ModeToggleProps) {
                 {/* Code/Edit Button */}
                 <button
                     onClick={mode === "preview" ? onToggle : undefined}
+                    aria-label="Switch to code editor"
+                    aria-pressed={mode === "code"}
                     className={`btn-press flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-200 group ${mode === "code"
                         ? "bg-[var(--accent)] text-[var(--accent-text)] shadow-md"
                         : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
diff --git a/src/components/SettingsMenu.tsx b/src/components/SettingsMenu.tsx
index 112b369..8f3a9b8 100644
--- a/src/components/SettingsMenu.tsx
+++ b/src/components/SettingsMenu.tsx
@@ -5,7 +5,7 @@ const themes: { id: Theme; name: string; colors: [string, string]; textColor: st
     { id: 'dark', name: 'Dark', colors: ['#0a0a0a', '#141414'], textColor: '#ffffff' },
     { id: 'light', name: 'Light', colors: ['#ffffff', '#f5f5f5'], textColor: '#171717' },
     { id: 'paper', name: 'Paper', colors: ['#f5f0e6', '#ebe5d8'], textColor: '#3d3d3d' },
-    { id: 'github', name: 'GitHub', colors: ['#0d1117', '#161b22'], textColor: '#ffffff', icon: 'github' },
+    { id: 'github', name: 'GitHub', colors: ['#ffffff', '#f6f8fa'], textColor: '#1f2328', icon: 'github' },
 ];
 
 const fonts: { id: FontFamily; name: string; family: string }[] = [
@@ -47,6 +47,9 @@ export function SettingsMenu() {
             {/* Settings Button */}
             <button
                 onClick={() => setIsOpen(!isOpen)}
+                aria-label="Settings"
+                aria-expanded={isOpen}
+                aria-haspopup="true"
                 className="btn-press flex items-center justify-center w-8 h-8 rounded-lg hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
                 title="Settings"
             >
@@ -55,7 +58,7 @@ export function SettingsMenu() {
 
             {/* Dropdown Menu */}
             {isOpen && (
-                <div className="absolute right-0 top-full mt-2 w-80 bg-[var(--bg-secondary)] border border-[var(--border)] rounded-xl shadow-2xl overflow-hidden z-50 animate-fade-in-down">
+                <div role="menu" aria-label="Settings" className="absolute right-0 top-full mt-2 w-80 bg-[var(--bg-secondary)] border border-[var(--border)] rounded-xl shadow-2xl overflow-hidden z-50 animate-fade-in-down">
                     {/* Theme Section */}
                     <div className="p-4 border-b border-[var(--border)]">
                         <div className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider mb-3">
diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
index c5283d2..c61d8e9 100644
--- a/src/components/StatusBar.tsx
+++ b/src/components/StatusBar.tsx
@@ -22,13 +22,18 @@ export function StatusBar({
     wordCount,
 }: StatusBarProps) {
     return (
-        <footer className="h-7 shrink-0 bg-[var(--bg-titlebar)] border-t border-[var(--border)] px-4 flex items-center justify-between text-[11px] font-medium tracking-wide text-[var(--text-secondary)] no-select transition-colors">
+        <footer
+            role="status"
+            className="h-7 shrink-0 bg-[var(--bg-titlebar)] border-t border-[var(--border)] px-4 flex items-center justify-between text-[11px] font-medium tracking-wide text-[var(--text-secondary)] no-select transition-colors"
+        >
             <div className="flex items-center gap-1">
                 {/* File Explorer Toggle */}
                 <button
                     onClick={onToggleFileExplorer}
                     title="Files (Ctrl+Shift+E)"
-                    className={`btn-press flex items-center justify-center w-6 h-5 rounded transition-colors ${showFileExplorer
+                    aria-label={showFileExplorer ? "Close file explorer" : "Open file explorer"}
+                    aria-pressed={showFileExplorer}
+                    className={`btn-press flex items-center justify-center w-8 h-6 rounded transition-colors ${showFileExplorer
                         ? "bg-[var(--accent)] text-[var(--accent-text)]"
                         : "hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
                         }`}
@@ -42,7 +47,9 @@ export function StatusBar({
                 <button
                     onClick={onToggleTOC}
                     title="Table of Contents (Ctrl+Shift+O)"
-                    className={`btn-press flex items-center justify-center w-6 h-5 rounded transition-colors ${showTOC
+                    aria-label={showTOC ? "Close table of contents" : "Open table of contents"}
+                    aria-pressed={showTOC}
+                    className={`btn-press flex items-center justify-center w-8 h-6 rounded transition-colors ${showTOC
                         ? "bg-[var(--accent)] text-[var(--accent-text)]"
                         : "hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
                         }`}
@@ -53,7 +60,7 @@ export function StatusBar({
                 </button>
             </div>
             <div className="flex items-center gap-4">
-                <div className="flex items-center gap-1.5">
+                <div className="flex items-center gap-1.5" aria-label={isSaved ? "File saved" : "File has unsaved changes"}>
                     <span
                         className={`w-2 h-2 rounded-full transition-all ${isSaved
                             ? "bg-[var(--status-saved)] shadow-[0_0_4px_rgba(80,250,123,0.4)]"
diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
index f7944b8..e3fc858 100644
--- a/src/components/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useEffect, useRef } from "react";
 
 interface TocItem {
     id: string;
@@ -17,6 +17,8 @@ export function TableOfContents({
     content,
     onClose,
 }: TableOfContentsProps) {
+    const panelRef = useRef<HTMLElement>(null);
+
     // Parse headings from markdown content
     const headings = useMemo((): TocItem[] => {
         if (!content) return [];
@@ -27,14 +29,11 @@ export function TableOfContents({
         const items: TocItem[] = [];
 
         lines.forEach((line, index) => {
-            // Match markdown headings (# to ######)
-            // Use [\s\S]* to match any character including Unicode
             const trimmedLine = line.trim();
             const match = trimmedLine.match(/^(#{1,6})\s+(.+)$/);
             if (match) {
                 const level = match[1].length;
                 const text = match[2].trim();
-                // Create a slug-like id
                 const id = `heading-${index}-${text
                     .toLowerCase()
                     .replace(/[^a-z0-9]+/g, "-")
@@ -47,30 +46,43 @@ export function TableOfContents({
         return items;
     }, [content]);
 
+    // Escape key to close and focus management
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onClose();
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+        panelRef.current?.focus();
+
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, onClose]);
+
     const handleHeadingClick = (text: string, level: number) => {
-        // Find the scrollable container
         const scrollContainer = document.querySelector("main.overflow-y-auto");
         const previewContainer = document.querySelector(".markdown-body");
 
         if (previewContainer && scrollContainer) {
-            // Get the appropriate heading tag
             const headingTag = `h${level}`;
             const headingElements = previewContainer.querySelectorAll(headingTag);
 
             // Clean text for comparison (remove markdown formatting)
             const cleanText = text
-                .replace(/\*\*(.+?)\*\*/g, "$1")  // Remove **bold**
-                .replace(/\*(.+?)\*/g, "$1")       // Remove *italic*
-                .replace(/_(.+?)_/g, "$1")         // Remove _italic_
-                .replace(/`(.+?)`/g, "$1")         // Remove `code`
-                .replace(/\[(.+?)\]\(.+?\)/g, "$1") // Remove [link](url)
+                .replace(/\*\*(.+?)\*\*/g, "$1")
+                .replace(/\*(.+?)\*/g, "$1")
+                .replace(/_(.+?)_/g, "$1")
+                .replace(/`(.+?)`/g, "$1")
+                .replace(/\[(.+?)\]\(.+?\)/g, "$1")
                 .trim();
 
             for (const el of headingElements) {
                 const elText = el.textContent?.trim() || "";
-                // Match if text is equal or if cleaned text matches
                 if (elText === text || elText === cleanText || elText.includes(cleanText)) {
-                    // Scroll with offset for better visibility
                     const elementTop = el.getBoundingClientRect().top;
                     const containerTop = scrollContainer.getBoundingClientRect().top;
                     const offset = elementTop - containerTop + scrollContainer.scrollTop - 20;
@@ -85,13 +97,11 @@ export function TableOfContents({
         }
     };
 
-    // Get indentation based on heading level
     const getIndent = (level: number): string => {
         const indents = ["", "pl-4", "pl-8", "pl-12", "pl-16", "pl-20"];
         return indents[level - 1] || "";
     };
 
-    // Get icon based on heading level
     const getIcon = (level: number): string => {
         if (level === 1) return "title";
         if (level === 2) return "format_h2";
@@ -99,76 +109,79 @@ export function TableOfContents({
     };
 
     return (
-        <>
-
-            <aside
-                className={`fixed left-0 top-12 bottom-7 w-72 bg-[var(--bg-secondary)] border-r border-[var(--border)] z-50 shadow-2xl transition-transform duration-200 ease-out ${isOpen ? "translate-x-0" : "-translate-x-full"
-                    }`}
-            >
-                {/* Header */}
-                <div className="h-10 px-4 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg-titlebar)]">
-                    <div className="flex items-center gap-2 text-sm font-semibold text-[var(--text-primary)] no-select">
-                        <span className="material-symbols-outlined text-[18px]">
+        <aside
+            ref={panelRef}
+            role="navigation"
+            aria-label="Table of contents"
+            tabIndex={-1}
+            className={`fixed left-0 top-12 bottom-7 w-72 bg-[var(--bg-secondary)] border-r border-[var(--border)] z-50 shadow-2xl transition-transform duration-200 ease-out ${isOpen ? "translate-x-0" : "-translate-x-full"
+                }`}
+        >
+            {/* Header */}
+            <div className="h-10 px-4 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg-titlebar)]">
+                <div className="flex items-center gap-2 text-sm font-semibold text-[var(--text-primary)] no-select">
+                    <span className="material-symbols-outlined text-[18px]">
+                        format_list_bulleted
+                    </span>
+                    <span>Table of Contents</span>
+                </div>
+                <button
+                    onClick={onClose}
+                    aria-label="Close table of contents"
+                    className="btn-press flex items-center justify-center w-7 h-7 rounded-lg hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+                >
+                    <span className="material-symbols-outlined text-[18px]">
+                        close
+                    </span>
+                </button>
+            </div>
+
+            {/* Content */}
+            <nav className="flex-1 overflow-y-auto h-[calc(100%-2.5rem)]" aria-label="Document headings">
+                {headings.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center h-32 text-[var(--text-secondary)] text-sm gap-2">
+                        <span className="material-symbols-outlined text-[32px] opacity-40">
                             format_list_bulleted
                         </span>
-                        <span>Table of Contents</span>
+                        <span>No headings found</span>
                     </div>
-                    <button
-                        onClick={onClose}
-                        className="flex items-center justify-center w-6 h-6 rounded hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
-                    >
-                        <span className="material-symbols-outlined text-[18px]">
-                            close
-                        </span>
-                    </button>
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 overflow-y-auto h-[calc(100%-2.5rem)]">
-                    {headings.length === 0 ? (
-                        <div className="flex flex-col items-center justify-center h-32 text-[var(--text-secondary)] text-sm gap-2">
-                            <span className="material-symbols-outlined text-[32px] opacity-40">
-                                format_list_bulleted
-                            </span>
-                            <span>No headings found</span>
-                        </div>
-                    ) : (
-                        <ul className="py-2">
-                            {headings.map((heading, index) => (
-                                <li key={`${heading.id}-${index}`} className="stagger-item" style={{ animationDelay: `${index * 0.03}s` }}>
-                                    <button
-                                        onClick={() =>
-                                            handleHeadingClick(heading.text, heading.level)
-                                        }
-                                        className={`btn-press w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition-colors text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] ${getIndent(
-                                            heading.level
-                                        )}`}
+                ) : (
+                    <ul className="py-2">
+                        {headings.map((heading, index) => (
+                            <li key={`${heading.id}-${index}`} className="stagger-item" style={{ animationDelay: `${index * 0.03}s` }}>
+                                <button
+                                    onClick={() =>
+                                        handleHeadingClick(heading.text, heading.level)
+                                    }
+                                    aria-label={`Go to heading: ${heading.text}`}
+                                    className={`btn-press w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition-colors text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] ${getIndent(
+                                        heading.level
+                                    )}`}
+                                >
+                                    <span
+                                        className={`material-symbols-outlined text-[14px] ${heading.level === 1
+                                            ? "text-[var(--text-primary)]"
+                                            : "opacity-60"
+                                            }`}
                                     >
-                                        <span
-                                            className={`material-symbols-outlined text-[14px] ${heading.level === 1
-                                                ? "text-[var(--text-primary)]"
-                                                : "opacity-60"
-                                                }`}
-                                        >
-                                            {getIcon(heading.level)}
-                                        </span>
-                                        <span
-                                            className={`truncate ${heading.level === 1
-                                                ? "font-semibold text-[var(--text-primary)]"
-                                                : heading.level === 2
-                                                    ? "font-medium"
-                                                    : ""
-                                                }`}
-                                        >
-                                            {heading.text}
-                                        </span>
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                    )}
-                </div>
-            </aside>
-        </>
+                                        {getIcon(heading.level)}
+                                    </span>
+                                    <span
+                                        className={`truncate ${heading.level === 1
+                                            ? "font-semibold text-[var(--text-primary)]"
+                                            : heading.level === 2
+                                                ? "font-medium"
+                                                : ""
+                                            }`}
+                                    >
+                                        {heading.text}
+                                    </span>
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </nav>
+        </aside>
     );
 }
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 57405c5..6feaf6b 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -10,10 +10,10 @@ interface TitleBarProps {
     filePath?: string;
     onOpenFile?: () => void;
     onSaveFile?: () => Promise<void>;
-    htmlContent?: string;
+    getExportHtml?: () => string;
 }
 
-export function TitleBar({ fileName, isDirty, filePath, onOpenFile, onSaveFile, htmlContent }: TitleBarProps) {
+export function TitleBar({ fileName, isDirty, filePath, onOpenFile, onSaveFile, getExportHtml }: TitleBarProps) {
     const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
 
     const handleMinimize = async () => {
@@ -110,7 +110,8 @@ export function TitleBar({ fileName, isDirty, filePath, onOpenFile, onSaveFile,
                             <div className="w-[1px] h-4 bg-[var(--border)] ml-2"></div>
                             <button
                                 onClick={onOpenFile}
-                                className="flex items-center gap-1 px-2 py-1 rounded hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors text-xs"
+                                aria-label="Open file"
+                                className="flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors text-xs"
                                 title="Open File (Ctrl+O)"
                             >
                                 <span className="material-symbols-outlined text-[16px]">folder_open</span>
@@ -118,8 +119,7 @@ export function TitleBar({ fileName, isDirty, filePath, onOpenFile, onSaveFile,
                             </button>
                             <ExportMenu
                                 fileName={fileName || 'document.md'}
-                                htmlContent={htmlContent || ''}
-                                disabled={!htmlContent}
+                                getExportHtml={getExportHtml}
                             />
                         </>
                     )}
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index bb3a749..817e57c 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -1,50 +1,65 @@
 import { useEffect, useState } from 'react';
 
+export type ToastType = 'success' | 'error' | 'info';
+
 interface ToastProps {
     message: string;
     isVisible: boolean;
     onHide: () => void;
     duration?: number;
+    type?: ToastType;
 }
 
-export function Toast({ message, isVisible, onHide, duration = 2000 }: ToastProps) {
+export function Toast({ message, isVisible, onHide, duration = 2000, type = 'success' }: ToastProps) {
     const [isAnimating, setIsAnimating] = useState(false);
 
     useEffect(() => {
         if (isVisible) {
             setIsAnimating(true);
-            const timer = setTimeout(() => {
+            const fadeTimer = setTimeout(() => {
                 setIsAnimating(false);
-                setTimeout(onHide, 200); // Wait for fade out animation
             }, duration);
-            return () => clearTimeout(timer);
+            const hideTimer = setTimeout(onHide, duration + 200);
+            return () => {
+                clearTimeout(fadeTimer);
+                clearTimeout(hideTimer);
+            };
         }
     }, [isVisible, duration, onHide]);
 
     if (!isVisible && !isAnimating) return null;
 
+    const iconMap = {
+        success: (
+            <svg className="w-4 h-4 text-[var(--status-saved)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+        ),
+        error: (
+            <svg className="w-4 h-4 text-[var(--danger)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+        ),
+        info: (
+            <svg className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        ),
+    };
+
     return (
         <div
-            className={`fixed bottom-20 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-lg 
-                bg-[var(--bg-secondary)] border border-[var(--border-subtle)] 
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+            className={`fixed bottom-20 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-lg
+                bg-[var(--bg-secondary)] border border-[var(--border-subtle)]
                 shadow-lg text-[var(--text-primary)] text-sm font-medium
                 transition-all duration-200 ease-out
                 ${isAnimating ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`}
         >
             <div className="flex items-center gap-2">
-                <svg 
-                    className="w-4 h-4 text-green-500" 
-                    fill="none" 
-                    viewBox="0 0 24 24" 
-                    stroke="currentColor"
-                >
-                    <path 
-                        strokeLinecap="round" 
-                        strokeLinejoin="round" 
-                        strokeWidth={2} 
-                        d="M5 13l4 4L19 7" 
-                    />
-                </svg>
+                {iconMap[type]}
                 {message}
             </div>
         </div>
diff --git a/src/components/UnsavedChangesDialog.tsx b/src/components/UnsavedChangesDialog.tsx
index f333dc1..39af87a 100644
--- a/src/components/UnsavedChangesDialog.tsx
+++ b/src/components/UnsavedChangesDialog.tsx
@@ -1,3 +1,5 @@
+import { useEffect, useRef } from "react";
+
 interface UnsavedChangesDialogProps {
     isOpen: boolean;
     onClose: () => void;
@@ -11,6 +13,45 @@ export function UnsavedChangesDialog({
     onDiscard,
     onSave,
 }: UnsavedChangesDialogProps) {
+    const dialogRef = useRef<HTMLDivElement>(null);
+    const saveButtonRef = useRef<HTMLButtonElement>(null);
+
+    // Focus trap and keyboard handling
+    useEffect(() => {
+        if (!isOpen) return;
+
+        // Auto-focus the save button when dialog opens
+        saveButtonRef.current?.focus();
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onClose();
+                return;
+            }
+
+            // Focus trap: keep Tab within dialog
+            if (e.key === "Tab" && dialogRef.current) {
+                const focusable = dialogRef.current.querySelectorAll<HTMLElement>(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                );
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+
+                if (e.shiftKey && document.activeElement === first) {
+                    e.preventDefault();
+                    last?.focus();
+                } else if (!e.shiftKey && document.activeElement === last) {
+                    e.preventDefault();
+                    first?.focus();
+                }
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, onClose]);
+
     if (!isOpen) return null;
 
     return (
@@ -19,10 +60,18 @@ export function UnsavedChangesDialog({
             <div
                 className="absolute inset-0 bg-black/50 backdrop-blur-sm"
                 onClick={onClose}
+                aria-hidden="true"
             />
 
             {/* Dialog */}
-            <div className="relative z-10 w-[380px] bg-[var(--bg-primary)] border border-[var(--border)] rounded-xl shadow-2xl overflow-hidden animate-fade-in">
+            <div
+                ref={dialogRef}
+                role="alertdialog"
+                aria-modal="true"
+                aria-labelledby="unsaved-dialog-title"
+                aria-describedby="unsaved-dialog-desc"
+                className="relative z-10 w-[380px] bg-[var(--bg-primary)] border border-[var(--border)] rounded-xl shadow-2xl overflow-hidden animate-fade-in"
+            >
                 {/* Header */}
                 <div className="px-5 pt-5 pb-3">
                     <div className="flex items-center gap-3">
@@ -32,7 +81,7 @@ export function UnsavedChangesDialog({
                             </span>
                         </div>
                         <div>
-                            <h2 className="text-base font-semibold text-[var(--text-primary)]">
+                            <h2 id="unsaved-dialog-title" className="text-base font-semibold text-[var(--text-primary)]">
                                 Unsaved Changes
                             </h2>
                             <p className="text-sm text-[var(--text-secondary)]">
@@ -44,7 +93,7 @@ export function UnsavedChangesDialog({
 
                 {/* Body */}
                 <div className="px-5 pb-4">
-                    <p className="text-sm text-[var(--text-secondary)] leading-relaxed">
+                    <p id="unsaved-dialog-desc" className="text-sm text-[var(--text-secondary)] leading-relaxed">
                         You have unsaved changes. Do you want to save them before closing?
                     </p>
                 </div>
@@ -64,6 +113,7 @@ export function UnsavedChangesDialog({
                         Don't Save
                     </button>
                     <button
+                        ref={saveButtonRef}
                         onClick={onSave}
                         className="px-4 py-2 text-sm font-medium text-[var(--accent-text)] bg-[var(--accent)] hover:bg-[var(--accent-hover)] rounded-lg transition-colors"
                     >
diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
index a5a9ca1..4aca69c 100644
--- a/src/context/ThemeContext.tsx
+++ b/src/context/ThemeContext.tsx
@@ -19,21 +19,31 @@ const THEME_STORAGE_KEY = 'marklite-theme';
 const FONT_STORAGE_KEY = 'marklite-font';
 const FONT_SIZE_STORAGE_KEY = 'marklite-font-size';
 
+// Valid values for validation against corrupted localStorage
+const VALID_THEMES: Theme[] = ['dark', 'light', 'paper', 'github'];
+const VALID_FONTS: FontFamily[] = ['inter', 'merriweather', 'lora', 'source-serif', 'fira-sans'];
+const VALID_FONT_SIZES: FontSize[] = ['small', 'medium', 'large'];
+
+function getValidated<T extends string>(key: string, validValues: T[], fallback: T): T {
+    const stored = localStorage.getItem(key);
+    if (stored && validValues.includes(stored as T)) {
+        return stored as T;
+    }
+    return fallback;
+}
+
 export function ThemeProvider({ children }: { children: ReactNode }) {
-    const [theme, setThemeState] = useState<Theme>(() => {
-        const stored = localStorage.getItem(THEME_STORAGE_KEY);
-        return (stored as Theme) || 'dark';
-    });
+    const [theme, setThemeState] = useState<Theme>(() =>
+        getValidated(THEME_STORAGE_KEY, VALID_THEMES, 'dark')
+    );
 
-    const [font, setFontState] = useState<FontFamily>(() => {
-        const stored = localStorage.getItem(FONT_STORAGE_KEY);
-        return (stored as FontFamily) || 'inter';
-    });
+    const [font, setFontState] = useState<FontFamily>(() =>
+        getValidated(FONT_STORAGE_KEY, VALID_FONTS, 'inter')
+    );
 
-    const [fontSize, setFontSizeState] = useState<FontSize>(() => {
-        const stored = localStorage.getItem(FONT_SIZE_STORAGE_KEY);
-        return (stored as FontSize) || 'medium';
-    });
+    const [fontSize, setFontSizeState] = useState<FontSize>(() =>
+        getValidated(FONT_SIZE_STORAGE_KEY, VALID_FONT_SIZES, 'medium')
+    );
 
     const setTheme = (newTheme: Theme) => {
         setThemeState(newTheme);
@@ -50,20 +60,13 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
         localStorage.setItem(FONT_SIZE_STORAGE_KEY, newSize);
     };
 
-    // Apply theme to document
-    useEffect(() => {
-        document.documentElement.setAttribute('data-theme', theme);
-    }, [theme]);
-
-    // Apply font to document
-    useEffect(() => {
-        document.documentElement.setAttribute('data-font', font);
-    }, [font]);
-
-    // Apply font size to document
+    // Apply theme, font, and font size to document in a single effect
     useEffect(() => {
-        document.documentElement.setAttribute('data-font-size', fontSize);
-    }, [fontSize]);
+        const el = document.documentElement;
+        el.setAttribute('data-theme', theme);
+        el.setAttribute('data-font', font);
+        el.setAttribute('data-font-size', fontSize);
+    }, [theme, font, fontSize]);
 
     return (
         <ThemeContext.Provider value={{ theme, setTheme, font, setFont, fontSize, setFontSize }}>
diff --git a/src/main.tsx b/src/main.tsx
index 8b1ddb9..73c70c6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import { ErrorBoundary } from "./components/ErrorBoundary";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </React.StrictMode>,
 );
diff --git a/src/utils/exportUtils.ts b/src/utils/exportUtils.ts
index 0ad5ddc..1720af8 100644
--- a/src/utils/exportUtils.ts
+++ b/src/utils/exportUtils.ts
@@ -295,6 +295,15 @@ function generateExportCSS(theme: Theme, font: FontFamily, fontSize: FontSize):
     `;
 }
 
+// Escape HTML entities to prevent XSS in generated HTML
+function escapeHtml(text: string): string {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
 // Generate standalone HTML document
 export function generateHTML(
     htmlContent: string,
@@ -305,6 +314,7 @@ export function generateHTML(
     includeFooter: boolean = true
 ): string {
     const css = generateExportCSS(theme, font, fontSize);
+    const safeTitle = escapeHtml(title);
     const date = new Date().toLocaleDateString('en-US', {
         year: 'numeric',
         month: 'long',
@@ -322,7 +332,7 @@ export function generateHTML(
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="generator" content="MarkLite">
     <meta name="date" content="${new Date().toISOString()}">
-    <title>${title}</title>
+    <title>${safeTitle}</title>
     <style>${css}</style>
 </head>
 <body>
@@ -365,11 +375,13 @@ const pdfFontSizes: Record<FontSize, { base: number; h1: number; h2: number; h3:
 
 // Parse HTML and extract structured content for PDF
 interface PDFElement {
-    type: 'h1' | 'h2' | 'h3' | 'p' | 'li' | 'code' | 'blockquote' | 'hr' | 'pre';
+    type: 'h1' | 'h2' | 'h3' | 'p' | 'li' | 'code' | 'blockquote' | 'hr' | 'pre' | 'table';
     text: string;
     indent?: number;
     ordered?: boolean;
     index?: number;
+    rows?: string[][];  // For table elements: array of rows, each row is array of cells
+    hasHeader?: boolean;
 }
 
 function parseHTMLForPDF(htmlContent: string): PDFElement[] {
@@ -419,6 +431,37 @@ function parseHTMLForPDF(htmlContent: string): PDFElement[] {
             case 'hr':
                 elements.push({ type: 'hr', text: '' });
                 break;
+            case 'table': {
+                const rows: string[][] = [];
+                let hasHeader = false;
+                // Process thead
+                const thead = el.querySelector('thead');
+                if (thead) {
+                    hasHeader = true;
+                    thead.querySelectorAll('tr').forEach(tr => {
+                        const cells: string[] = [];
+                        tr.querySelectorAll('th, td').forEach(cell => {
+                            cells.push(cell.textContent?.trim() || '');
+                        });
+                        rows.push(cells);
+                    });
+                }
+                // Process tbody
+                const tbody = el.querySelector('tbody') || el;
+                tbody.querySelectorAll('tr').forEach(tr => {
+                    // Skip rows already added from thead
+                    if (thead && tr.closest('thead')) return;
+                    const cells: string[] = [];
+                    tr.querySelectorAll('th, td').forEach(cell => {
+                        cells.push(cell.textContent?.trim() || '');
+                    });
+                    if (cells.length > 0) rows.push(cells);
+                });
+                if (rows.length > 0) {
+                    elements.push({ type: 'table', text: '', rows, hasHeader });
+                }
+                break;
+            }
             case 'ul':
                 let ulIndex = 0;
                 el.childNodes.forEach(child => {
@@ -466,11 +509,21 @@ function parseHTMLForPDF(htmlContent: string): PDFElement[] {
     return elements;
 }
 
+// Helper to parse hex color to RGB tuple
+function hexToRgb(hex: string): [number, number, number] {
+    const clean = hex.replace('#', '');
+    return [
+        parseInt(clean.substring(0, 2), 16),
+        parseInt(clean.substring(2, 4), 16),
+        parseInt(clean.substring(4, 6), 16),
+    ];
+}
+
 // Export to PDF with real selectable text using jsPDF
 export async function exportToPDF(
     htmlContent: string,
     fileName: string,
-    _theme: Theme,
+    theme: Theme,
     _font: FontFamily,
     fontSize: FontSize
 ): Promise<void> {
@@ -484,6 +537,15 @@ export async function exportToPDF(
     // Parse HTML into structured elements
     const elements = parseHTMLForPDF(htmlContent);
     const sizes = pdfFontSizes[fontSize];
+    const colors = themeColors[theme];
+
+    // Derive RGB values from theme
+    const textRgb = hexToRgb(colors.textPrimary);
+    const textSecondaryRgb = hexToRgb(colors.textSecondary);
+    const borderRgb = hexToRgb(colors.border);
+    const h1Rgb = hexToRgb(colors.syntaxH1);
+    const h2Rgb = hexToRgb(colors.syntaxH2);
+    const h3Rgb = hexToRgb(colors.syntaxH3);
 
     // Create PDF document (A4 size)
     const pdf = new jsPDF({
@@ -495,12 +557,13 @@ export async function exportToPDF(
     const pageWidth = pdf.internal.pageSize.getWidth();
     const pageHeight = pdf.internal.pageSize.getHeight();
     const margin = 20;
+    const footerHeight = 15;
     const maxWidth = pageWidth - margin * 2;
     let y = margin;
 
-    // Helper to add new page if needed
+    // Helper to add new page if needed (reserves space for footer)
     const checkPageBreak = (height: number) => {
-        if (y + height > pageHeight - margin) {
+        if (y + height > pageHeight - margin - footerHeight) {
             pdf.addPage();
             y = margin;
             return true;
@@ -514,22 +577,26 @@ export async function exportToPDF(
         return pdf.splitTextToSize(text, maxW);
     };
 
+    // Set default text color
+    pdf.setTextColor(...textRgb);
+
     // Render each element
     for (const element of elements) {
         switch (element.type) {
             case 'h1': {
                 checkPageBreak(15);
-                y += 8; // Space before heading
+                y += 8;
                 pdf.setFontSize(sizes.h1);
                 pdf.setFont('helvetica', 'bold');
+                pdf.setTextColor(...h1Rgb);
                 const lines = wrapText(element.text, maxWidth, sizes.h1);
                 pdf.text(lines, margin, y);
                 y += lines.length * (sizes.h1 * 0.4) + 3;
-                // Draw underline
-                pdf.setDrawColor(200, 200, 200);
+                pdf.setDrawColor(...borderRgb);
                 pdf.setLineWidth(0.5);
                 pdf.line(margin, y, pageWidth - margin, y);
                 y += 5;
+                pdf.setTextColor(...textRgb);
                 break;
             }
 
@@ -538,13 +605,15 @@ export async function exportToPDF(
                 y += 6;
                 pdf.setFontSize(sizes.h2);
                 pdf.setFont('helvetica', 'bold');
+                pdf.setTextColor(...h2Rgb);
                 const lines = wrapText(element.text, maxWidth, sizes.h2);
                 pdf.text(lines, margin, y);
                 y += lines.length * (sizes.h2 * 0.4) + 2;
-                pdf.setDrawColor(220, 220, 220);
+                pdf.setDrawColor(...borderRgb);
                 pdf.setLineWidth(0.3);
                 pdf.line(margin, y, pageWidth - margin, y);
                 y += 4;
+                pdf.setTextColor(...textRgb);
                 break;
             }
 
@@ -553,9 +622,11 @@ export async function exportToPDF(
                 y += 4;
                 pdf.setFontSize(sizes.h3);
                 pdf.setFont('helvetica', 'bold');
+                pdf.setTextColor(...h3Rgb);
                 const lines = wrapText(element.text, maxWidth, sizes.h3);
                 pdf.text(lines, margin, y);
                 y += lines.length * (sizes.h3 * 0.4) + 3;
+                pdf.setTextColor(...textRgb);
                 break;
             }
 
@@ -563,29 +634,31 @@ export async function exportToPDF(
                 const lineH = sizes.base * 0.4 * sizes.lineHeight;
                 pdf.setFontSize(sizes.base);
                 pdf.setFont('helvetica', 'normal');
+                pdf.setTextColor(...textRgb);
                 const lines = wrapText(element.text, maxWidth, sizes.base);
-                checkPageBreak(lines.length * lineH);
-                pdf.text(lines, margin, y);
-                y += lines.length * lineH + 3;
+                // Check page break for each chunk of lines to prevent overflow
+                for (const line of lines) {
+                    checkPageBreak(lineH);
+                    pdf.text(line, margin, y);
+                    y += lineH;
+                }
+                y += 3;
                 break;
             }
 
             case 'li': {
                 const indent = (element.indent || 1) * 5;
-                const bullet = element.ordered ? `${element.index}.` : '•';
+                const bullet = element.ordered ? `${element.index}.` : '\u2022';
                 const lineH = sizes.base * 0.4 * sizes.lineHeight;
                 pdf.setFontSize(sizes.base);
                 pdf.setFont('helvetica', 'normal');
+                pdf.setTextColor(...textRgb);
 
-                // Clean text - remove bullet/number if already present
-                let cleanText = element.text.trim();
-
+                const cleanText = element.text.trim();
                 const lines = wrapText(cleanText, maxWidth - indent - 5, sizes.base);
                 checkPageBreak(lines.length * lineH);
 
-                // Draw bullet/number
                 pdf.text(bullet, margin + indent - 4, y);
-                // Draw text
                 pdf.text(lines, margin + indent + 2, y);
                 y += lines.length * lineH + 1;
                 break;
@@ -595,25 +668,39 @@ export async function exportToPDF(
                 const codeLines = element.text.split('\n');
                 const lineH = sizes.code * 0.4;
                 const blockHeight = codeLines.length * lineH + 6;
-                checkPageBreak(blockHeight);
-
-                // Draw background
-                pdf.setFillColor(245, 245, 245);
-                pdf.roundedRect(margin, y - 2, maxWidth, blockHeight, 2, 2, 'F');
 
-                pdf.setFontSize(sizes.code);
-                pdf.setFont('courier', 'normal');
-                pdf.setTextColor(60, 60, 60);
-
-                let codeY = y + 2;
-                for (const line of codeLines) {
-                    const wrapped = wrapText(line || ' ', maxWidth - 6, sizes.code);
-                    pdf.text(wrapped, margin + 3, codeY);
-                    codeY += wrapped.length * lineH;
+                // Split code blocks across pages if they're too tall
+                if (blockHeight > pageHeight - margin * 2 - footerHeight) {
+                    // Render line by line with page breaks
+                    pdf.setFontSize(sizes.code);
+                    pdf.setFont('courier', 'normal');
+                    pdf.setTextColor(60, 60, 60);
+                    for (const line of codeLines) {
+                        checkPageBreak(lineH + 4);
+                        pdf.setFillColor(245, 245, 245);
+                        pdf.rect(margin, y - 2, maxWidth, lineH + 2, 'F');
+                        const wrapped = wrapText(line || ' ', maxWidth - 6, sizes.code);
+                        pdf.text(wrapped, margin + 3, y);
+                        y += wrapped.length * lineH;
+                    }
+                    pdf.setTextColor(...textRgb);
+                    y += 3;
+                } else {
+                    checkPageBreak(blockHeight);
+                    pdf.setFillColor(245, 245, 245);
+                    pdf.roundedRect(margin, y - 2, maxWidth, blockHeight, 2, 2, 'F');
+                    pdf.setFontSize(sizes.code);
+                    pdf.setFont('courier', 'normal');
+                    pdf.setTextColor(60, 60, 60);
+                    let codeY = y + 2;
+                    for (const line of codeLines) {
+                        const wrapped = wrapText(line || ' ', maxWidth - 6, sizes.code);
+                        pdf.text(wrapped, margin + 3, codeY);
+                        codeY += wrapped.length * lineH;
+                    }
+                    pdf.setTextColor(...textRgb);
+                    y += blockHeight + 3;
                 }
-
-                pdf.setTextColor(0, 0, 0);
-                y += blockHeight + 3;
                 break;
             }
 
@@ -625,26 +712,69 @@ export async function exportToPDF(
                 const blockHeight = lines.length * lineH + 4;
                 checkPageBreak(blockHeight);
 
-                // Draw left border
                 pdf.setFillColor(100, 100, 100);
                 pdf.rect(margin, y - 2, 2, blockHeight, 'F');
-
-                // Draw background
                 pdf.setFillColor(250, 250, 250);
                 pdf.rect(margin + 3, y - 2, maxWidth - 3, blockHeight, 'F');
 
-                pdf.setTextColor(80, 80, 80);
+                pdf.setTextColor(...textSecondaryRgb);
                 pdf.text(lines, margin + 6, y + 2);
-                pdf.setTextColor(0, 0, 0);
+                pdf.setTextColor(...textRgb);
                 pdf.setFont('helvetica', 'normal');
                 y += blockHeight + 3;
                 break;
             }
 
+            case 'table': {
+                if (!element.rows || element.rows.length === 0) break;
+
+                const rows = element.rows;
+                const colCount = Math.max(...rows.map(r => r.length));
+                const cellPadding = 2;
+                const colWidth = (maxWidth - cellPadding * 2) / colCount;
+                const rowHeight = sizes.base * 0.4 * sizes.lineHeight + cellPadding * 2;
+
+                pdf.setFontSize(sizes.base);
+                pdf.setDrawColor(...borderRgb);
+                pdf.setLineWidth(0.3);
+
+                for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) {
+                    const row = rows[rowIdx];
+                    const isHeader = element.hasHeader && rowIdx === 0;
+
+                    checkPageBreak(rowHeight);
+
+                    // Draw header background
+                    if (isHeader) {
+                        pdf.setFillColor(245, 245, 245);
+                        pdf.rect(margin, y - cellPadding, maxWidth, rowHeight, 'F');
+                    }
+
+                    // Draw cells
+                    for (let colIdx = 0; colIdx < colCount; colIdx++) {
+                        const cellX = margin + colIdx * colWidth;
+                        const cellText = row[colIdx] || '';
+
+                        // Cell border
+                        pdf.rect(cellX, y - cellPadding, colWidth, rowHeight, 'S');
+
+                        // Cell text
+                        pdf.setFont('helvetica', isHeader ? 'bold' : 'normal');
+                        pdf.setTextColor(...textRgb);
+                        const wrapped = wrapText(cellText, colWidth - cellPadding * 2, sizes.base);
+                        pdf.text(wrapped[0] || '', cellX + cellPadding, y + cellPadding);
+                    }
+
+                    y += rowHeight;
+                }
+                y += 3;
+                break;
+            }
+
             case 'hr': {
                 checkPageBreak(10);
                 y += 5;
-                pdf.setDrawColor(200, 200, 200);
+                pdf.setDrawColor(...borderRgb);
                 pdf.setLineWidth(0.5);
                 pdf.line(margin, y, pageWidth - margin, y);
                 y += 5;
@@ -680,7 +810,6 @@ export async function exportToPDF(
     });
 
     if (filePath) {
-        // Write binary file
         await writeFile(filePath, new Uint8Array(pdfBuffer));
     }
 }