diff --git a/ROADMAP.md b/ROADMAP.md
new file mode 100644
index 0000000..591325a
--- /dev/null
+++ b/ROADMAP.md
@@ -0,0 +1,226 @@
+# RSS Reader — Product Iteration Plan
+
+> **Status**: Draft — v1.0.0 is live. This document defines the roadmap for subsequent releases.  
+> **Tracking**: Each feature below corresponds to a GitHub Issue. Labels follow the pattern `iter/v1.x`.
+
+---
+
+## Current State (v1.0.0)
+
+| Area | Status |
+|------|--------|
+| RSS 2.0 / Atom 1.0 parsing | ✅ |
+| Offline-first (IndexedDB + Service Worker) | ✅ |
+| Auto-refresh & background sync | ✅ |
+| Category management | ✅ |
+| OPML import / export | ✅ |
+| Dark / light / system theme | ✅ |
+| Favorites & reading history | ✅ |
+| Full-text search (feeds + articles) | ✅ |
+| AI translation & summarisation (streaming) | ✅ |
+| PWA install (iOS, Android, Desktop) | ✅ |
+| React Router v6 navigation | ✅ |
+| i18n (Chinese + English) | ✅ |
+
+---
+
+## Iteration v1.1 — Reader Experience (Priority: High)
+
+**Goal**: Make every article faster and more comfortable to read.  
+**Target release**: 2 weeks after kickoff
+
+### Issues
+
+#### #1 · Reading time estimate
+**Label**: `iter/v1.1`, `enhancement`  
+**Description**: Show an estimated reading time (e.g. "5 min read") in the article detail header so users can decide whether to read now or save for later.  
+**Acceptance criteria**:
+- Appears in `ArticleDetailPage` alongside author and date
+- Calculated client-side from word count (≥ 1 min)
+- No impact on article loading performance
+- Unit tested
+
+---
+
+#### #2 · Keyboard shortcuts
+**Label**: `iter/v1.1`, `enhancement`  
+**Description**: Add keyboard shortcuts to speed up navigation for power users.  
+**Shortcuts to implement**:
+
+| Key | Action |
+|-----|--------|
+| `j` / `k` | Next / previous article in list |
+| `o` or `Enter` | Open selected article |
+| `f` | Toggle favourite on open article |
+| `r` | Mark article as read / unread |
+| `Escape` | Go back |
+| `?` | Show shortcuts help overlay |
+
+**Acceptance criteria**:
+- Shortcuts only active when focus is not inside an input
+- Help overlay accessible via `?` key
+- No conflicts with browser shortcuts
+- E2E tested
+
+---
+
+#### #3 · Advanced article search with filters
+**Label**: `iter/v1.1`, `enhancement`  
+**Description**: Extend the current full-text search with filter controls so users can narrow results without manual scrolling.  
+**Filters**:
+- Feed (multi-select)
+- Date range (today / last 7 days / last 30 days / custom)
+- Read status (all / unread / read)
+- Starred only toggle
+
+**Acceptance criteria**:
+- Filter bar visible on `SearchPage`
+- URL query params reflect active filters (shareable / bookmarkable)
+- "Clear filters" button resets to defaults
+- Integration tested
+
+---
+
+## Iteration v1.2 — Content Enrichment (Priority: Medium)
+
+**Goal**: Let users annotate, discover, and share content they find valuable.  
+**Target release**: 4 weeks after v1.1
+
+### Issues
+
+#### #4 · Article annotations & highlights
+**Label**: `iter/v1.2`, `enhancement`  
+**Description**: Allow users to highlight passages in articles and attach personal notes. Annotations are stored locally (IndexedDB) and survive offline sessions.  
+**Acceptance criteria**:
+- Text selection in article body shows "Highlight" action
+- Notes can be typed per highlight
+- Highlights visible with yellow tint on revisit
+- All annotations listed on a dedicated Annotations page
+- Annotated article count shown on feed card
+- Exported in OPML extension or dedicated JSON backup
+
+---
+
+#### #5 · Feed discovery
+**Label**: `iter/v1.2`, `enhancement`  
+**Description**: When a user subscribes to a feed (or visits its detail page), suggest similar feeds from a curated list or by parsing the source site's `<link rel="alternate">` tags.  
+**Acceptance criteria**:
+- "Suggested feeds" section appears on `FeedDetailPage`
+- Suggestions derived from site HTML autodiscovery first, then a static seed list
+- Each suggestion can be subscribed in one tap
+- No telemetry or external tracking
+
+---
+
+#### #6 · Social sharing
+**Label**: `iter/v1.2`, `enhancement`  
+**Description**: Add a share action to articles so users can send links via native OS share sheet or copy to clipboard.  
+**Acceptance criteria**:
+- Share button in `ArticleActionBar`
+- Uses Web Share API when available, falls back to clipboard copy
+- Shared URL points to the original article, not the app
+- Works on iOS Safari, Android Chrome, and desktop
+
+---
+
+## Iteration v1.3 — Platform Expansion (Priority: Medium)
+
+**Goal**: Reach users on more surfaces and make the product stickier across devices.  
+**Target release**: 6 weeks after v1.2
+
+### Issues
+
+#### #7 · Browser extension (Chrome & Firefox)
+**Label**: `iter/v1.3`, `enhancement`  
+**Description**: A lightweight browser extension that detects RSS/Atom feeds on the current page and lets users subscribe in one click, without having to copy-paste the URL.  
+**Acceptance criteria**:
+- Extension icon turns active when a feed is detected on the page
+- One-click subscribe opens the app's `AddFeedDialog` (or posts directly to IndexedDB if app is open)
+- Manifest V3 (Chrome) + WebExtensions API (Firefox)
+- No permissions beyond `activeTab` and `storage`
+
+---
+
+#### #8 · Multi-device sync
+**Label**: `iter/v1.3`, `enhancement`, `backend`  
+**Description**: Sync read status, favourites, categories, and OPML subscriptions across devices using a lightweight backend (self-hostable).  
+**Acceptance criteria**:
+- Optional: users can opt in; all data remains local-only by default
+- Sync via user-provided server URL + API key (no centralised account required)
+- Conflict resolution: last-write-wins with per-field timestamps
+- Full offline capability preserved; sync happens in background
+- OpenAPI spec published for self-hosters
+
+---
+
+## Iteration v2.0 — New Content Formats (Priority: Low)
+
+**Goal**: Expand beyond text articles to audio and email content.  
+**Target release**: After v1.3 stabilisation
+
+### Issues
+
+#### #9 · Podcast support
+**Label**: `iter/v2.0`, `enhancement`  
+**Description**: Parse `<enclosure>` tags in RSS feeds to detect podcast episodes. Provide an in-app audio player with playback speed control and a persistent mini-player.  
+**Acceptance criteria**:
+- Podcast feeds auto-detected when `<enclosure type="audio/*">` is present
+- Audio player: play/pause, seek, 1×/1.5×/2× speed, skip ±30s
+- Mini-player persists while browsing other articles
+- Playback position saved per-episode (resumes on reopen)
+- Background audio playback (Media Session API)
+
+---
+
+#### #10 · Newsletter integration
+**Label**: `iter/v2.0`, `enhancement`  
+**Description**: Generate a unique inbound email address that converts newsletter emails into RSS-style articles inside the app (using a lightweight forwarding service or self-hosted Cloudflare Worker).  
+**Acceptance criteria**:
+- User can generate a `@reader.example.com` address in Settings
+- Incoming emails appear as articles in a special "Newsletters" feed
+- Images and inline HTML preserved
+- Unsubscribe from newsletter removes the forwarding address
+
+---
+
+## Tech Debt & Quality Issues
+
+Track these as separate issues with label `tech-debt`:
+
+| # | Item |
+|---|------|
+| TD-1 | Complete Shadcn UI migration (Phase 3–6 of current plan) |
+| TD-2 | Raise page/layout component test coverage to ≥ 90 % |
+| TD-3 | Add E2E tests for mobile & desktop navigation |
+| TD-4 | Implement error boundaries to prevent full-page crashes |
+| TD-5 | Add skeleton loading states for all data-fetching pages |
+| TD-6 | Lighthouse audit after each iteration (target: all 100) |
+
+---
+
+## Prioritisation Matrix
+
+| Issue | User Value | Dev Effort | Priority Score |
+|-------|-----------|------------|---------------|
+| #1 Reading time | Medium | Low | **High** |
+| #2 Keyboard shortcuts | High | Low | **High** |
+| #3 Advanced search | High | Medium | **High** |
+| #4 Annotations | High | High | Medium |
+| #5 Feed discovery | Medium | Medium | Medium |
+| #6 Social sharing | Medium | Low | **High** |
+| #7 Browser extension | High | High | Medium |
+| #8 Multi-device sync | Very High | Very High | Low (needs backend) |
+| #9 Podcast | High | High | Low |
+| #10 Newsletter | Medium | Very High | Low |
+
+---
+
+## How to Use This Document
+
+1. **Product manager / repo owner**: Convert each issue section above into a GitHub Issue. Use the issue title, labels, and acceptance criteria verbatim.
+2. **Developers**: Reference the acceptance criteria as the definition of done before opening a PR.
+3. **Project board**: Create a GitHub Project with columns `Backlog → In Progress → Review → Done` and assign each issue to the appropriate iteration milestone.
+
+---
+
+*Last updated: 2026-03-02 · Maintainer: @chiga0*
diff --git a/scripts/create-github-issues.sh b/scripts/create-github-issues.sh
new file mode 100755
index 0000000..d2f9e7f
--- /dev/null
+++ b/scripts/create-github-issues.sh
@@ -0,0 +1,379 @@
+#!/usr/bin/env bash
+# =============================================================================
+# create-github-issues.sh
+#
+# One-shot script that creates:
+#   1. Repository labels  (iter/v1.1 … iter/v2.0, tech-debt, enhancement, backend)
+#   2. Milestones         (v1.1, v1.2, v1.3, v2.0)
+#   3. GitHub Issues      (10 features + 6 tech-debt items from ROADMAP.md)
+#   4. GitHub Project     ("RSS Reader Roadmap") with all issues added
+#
+# Prerequisites:
+#   - gh CLI installed and authenticated  (gh auth login)
+#   - jq installed
+#
+# Usage:
+#   chmod +x scripts/create-github-issues.sh
+#   ./scripts/create-github-issues.sh
+# =============================================================================
+
+set -euo pipefail
+
+REPO="chiga0/rss-reader"
+
+echo "▶ Targeting repository: $REPO"
+echo ""
+
+# -----------------------------------------------------------------------------
+# Helper: create a label if it doesn't already exist
+# -----------------------------------------------------------------------------
+create_label() {
+  local name="$1" color="$2" description="$3"
+  if gh label list --repo "$REPO" --json name --jq '.[].name' | grep -qx "$name"; then
+    echo "  label '$name' already exists — skipping"
+  else
+    gh label create "$name" \
+      --repo "$REPO" \
+      --color "$color" \
+      --description "$description"
+    echo "  ✓ label '$name' created"
+  fi
+}
+
+# -----------------------------------------------------------------------------
+# Helper: create a milestone if it doesn't already exist, return its number
+# -----------------------------------------------------------------------------
+create_milestone() {
+  local title="$1" due="$2" desc="$3"
+  local existing
+  existing=$(gh api "repos/$REPO/milestones" --jq ".[] | select(.title==\"$title\") | .number" 2>/dev/null || true)
+  if [[ -n "$existing" ]]; then
+    echo "  milestone '$title' already exists (#$existing) — skipping" >&2
+    echo "$existing"
+  else
+    local number
+    number=$(gh api "repos/$REPO/milestones" \
+      --method POST \
+      -f title="$title" \
+      -f description="$desc" \
+      -f due_on="${due}T00:00:00Z" \
+      --jq '.number')
+    echo "  ✓ milestone '$title' created (#$number)" >&2
+    echo "$number"
+  fi
+}
+
+# -----------------------------------------------------------------------------
+# Helper: create an issue, return its node ID (for Project)
+# -----------------------------------------------------------------------------
+create_issue() {
+  local title="$1" body="$2" labels="$3" milestone="$4"
+  local extra_args=()
+  [[ -n "$milestone" ]] && extra_args+=(--milestone "$milestone")
+
+  local result
+  result=$(gh issue create \
+    --repo "$REPO" \
+    --title "$title" \
+    --body "$body" \
+    --label "$labels" \
+    "${extra_args[@]}" \
+    --json number,id \
+    --jq '[.number, .id] | @tsv')
+
+  local number node_id
+  number=$(echo "$result" | cut -f1)
+  node_id=$(echo "$result" | cut -f2)
+  echo "  ✓ Issue #$number: $title" >&2
+  echo "$node_id"
+}
+
+# =============================================================================
+# 1. LABELS
+# =============================================================================
+echo "── Creating labels ────────────────────────────────────────────────────────"
+create_label "enhancement"  "84b6eb" "New feature or improvement"
+create_label "tech-debt"    "e4e669" "Code quality / refactoring work"
+create_label "backend"      "d93f0b" "Requires server-side component"
+create_label "iter/v1.1"    "0075ca" "Iteration v1.1 — Reader Experience"
+create_label "iter/v1.2"    "0052cc" "Iteration v1.2 — Content Enrichment"
+create_label "iter/v1.3"    "003999" "Iteration v1.3 — Platform Expansion"
+create_label "iter/v2.0"    "001f6a" "Iteration v2.0 — New Content Formats"
+echo ""
+
+# =============================================================================
+# 2. MILESTONES
+# =============================================================================
+echo "── Creating milestones ────────────────────────────────────────────────────"
+MS_V11=$(create_milestone "v1.1" "2026-03-16" "Reader Experience — reading time, keyboard shortcuts, advanced search")
+MS_V12=$(create_milestone "v1.2" "2026-04-13" "Content Enrichment — annotations, feed discovery, social sharing")
+MS_V13=$(create_milestone "v1.3" "2026-05-11" "Platform Expansion — browser extension, multi-device sync")
+MS_V20=$(create_milestone "v2.0" "2026-07-06" "New Content Formats — podcast, newsletter")
+echo ""
+
+# =============================================================================
+# 3. ISSUES
+# =============================================================================
+echo "── Creating feature issues ────────────────────────────────────────────────"
+ISSUE_IDS=()
+
+# ---- v1.1 ------------------------------------------------------------------
+
+BODY=$(cat <<'EOF'
+## Summary
+Show an estimated reading time (e.g. "5 min read") in the article detail header so users can decide whether to read now or save for later.
+
+## Acceptance Criteria
+- [ ] Appears in `ArticleDetailPage` alongside author and date
+- [ ] Calculated client-side from word count (`ceil(words / 200)`, minimum 1 min)
+- [ ] No impact on article loading performance
+- [ ] Unit tested (empty input, boundaries at 200/201 words, HTML stripping, format output)
+
+## Implementation Notes
+- New utility `src/utils/readingTime.ts` → `calculateReadingTime(html: string): number` + `formatReadingTime(minutes: number): string`
+- Memoised in `ArticleDetailPage` via `useMemo`
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Reading time estimate" "$BODY" "iter/v1.1,enhancement" "$MS_V11")" )
+
+BODY=$(cat <<'EOF'
+## Summary
+Add keyboard shortcuts to speed up navigation for power users.
+
+## Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `j` / `k` | Next / previous article in list |
+| `o` or `Enter` | Open selected article |
+| `f` | Toggle favourite on open article |
+| `r` | Mark article as read / unread |
+| `Escape` | Go back |
+| `?` | Show shortcuts help overlay |
+
+## Acceptance Criteria
+- [ ] Shortcuts only active when focus is not inside an `<input>` / `<textarea>`
+- [ ] Help overlay accessible via `?` key
+- [ ] No conflicts with browser shortcuts
+- [ ] E2E tested
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Keyboard shortcuts" "$BODY" "iter/v1.1,enhancement" "$MS_V11")" )
+
+BODY=$(cat <<'EOF'
+## Summary
+Extend the current full-text search with filter controls so users can narrow results without manual scrolling.
+
+## Filters
+- Feed (multi-select)
+- Date range (today / last 7 days / last 30 days / custom)
+- Read status (all / unread / read)
+- Starred only toggle
+
+## Acceptance Criteria
+- [ ] Filter bar visible on `SearchPage`
+- [ ] URL query params reflect active filters (shareable / bookmarkable)
+- [ ] "Clear filters" button resets to defaults
+- [ ] Integration tested
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Advanced article search with filters" "$BODY" "iter/v1.1,enhancement" "$MS_V11")" )
+
+# ---- v1.2 ------------------------------------------------------------------
+
+BODY=$(cat <<'EOF'
+## Summary
+Allow users to highlight passages in articles and attach personal notes. Annotations are stored locally (IndexedDB) and survive offline sessions.
+
+## Acceptance Criteria
+- [ ] Text selection in article body shows "Highlight" action
+- [ ] Notes can be typed per highlight
+- [ ] Highlights visible with yellow tint on revisit
+- [ ] All annotations listed on a dedicated Annotations page
+- [ ] Annotated article count shown on feed card
+- [ ] Annotations exportable as JSON backup
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Article annotations & highlights" "$BODY" "iter/v1.2,enhancement" "$MS_V12")" )
+
+BODY=$(cat <<'EOF'
+## Summary
+When a user subscribes to a feed (or visits its detail page), suggest similar feeds from a curated list or by parsing the source site's `<link rel="alternate">` tags.
+
+## Acceptance Criteria
+- [ ] "Suggested feeds" section appears on `FeedDetailPage`
+- [ ] Suggestions derived from site HTML autodiscovery first, then a static seed list
+- [ ] Each suggestion can be subscribed in one tap
+- [ ] No telemetry or external tracking
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Feed discovery" "$BODY" "iter/v1.2,enhancement" "$MS_V12")" )
+
+BODY=$(cat <<'EOF'
+## Summary
+Add a share action to articles so users can send links via the native OS share sheet or copy to clipboard.
+
+## Acceptance Criteria
+- [ ] Share button in `ArticleActionBar`
+- [ ] Uses Web Share API when available, falls back to clipboard copy
+- [ ] Shared URL points to the original article, not the app
+- [ ] Works on iOS Safari, Android Chrome, and desktop
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Social sharing" "$BODY" "iter/v1.2,enhancement" "$MS_V12")" )
+
+# ---- v1.3 ------------------------------------------------------------------
+
+BODY=$(cat <<'EOF'
+## Summary
+A lightweight browser extension that detects RSS/Atom feeds on the current page and lets users subscribe in one click, without copy-pasting the URL.
+
+## Acceptance Criteria
+- [ ] Extension icon turns active when a feed is detected on the page
+- [ ] One-click subscribe opens the app's `AddFeedDialog` (or posts directly to IndexedDB if app is open)
+- [ ] Manifest V3 (Chrome) + WebExtensions API (Firefox)
+- [ ] No permissions beyond `activeTab` and `storage`
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Browser extension (Chrome & Firefox)" "$BODY" "iter/v1.3,enhancement" "$MS_V13")" )
+
+BODY=$(cat <<'EOF'
+## Summary
+Sync read status, favourites, categories, and OPML subscriptions across devices using a lightweight, self-hostable backend.
+
+## Acceptance Criteria
+- [ ] Optional: users can opt in; all data remains local-only by default
+- [ ] Sync via user-provided server URL + API key (no centralised account required)
+- [ ] Conflict resolution: last-write-wins with per-field timestamps
+- [ ] Full offline capability preserved; sync happens in background
+- [ ] OpenAPI spec published for self-hosters
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Multi-device sync" "$BODY" "iter/v1.3,enhancement,backend" "$MS_V13")" )
+
+# ---- v2.0 ------------------------------------------------------------------
+
+BODY=$(cat <<'EOF'
+## Summary
+Parse `<enclosure>` tags in RSS feeds to detect podcast episodes. Provide an in-app audio player with playback speed control and a persistent mini-player.
+
+## Acceptance Criteria
+- [ ] Podcast feeds auto-detected when `<enclosure type="audio/*">` is present
+- [ ] Audio player: play/pause, seek, 1×/1.5×/2× speed, skip ±30 s
+- [ ] Mini-player persists while browsing other articles
+- [ ] Playback position saved per-episode (resumes on reopen)
+- [ ] Background audio playback (Media Session API)
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Podcast support" "$BODY" "iter/v2.0,enhancement" "$MS_V20")" )
+
+BODY=$(cat <<'EOF'
+## Summary
+Generate a unique inbound email address that converts newsletter emails into RSS-style articles inside the app (using a lightweight forwarding service or self-hosted Cloudflare Worker).
+
+## Acceptance Criteria
+- [ ] User can generate a forwarding address in Settings
+- [ ] Incoming emails appear as articles in a special "Newsletters" feed
+- [ ] Images and inline HTML preserved
+- [ ] Unsubscribing from the newsletter removes the forwarding address
+EOF
+)
+ISSUE_IDS+=( "$(create_issue "Newsletter integration" "$BODY" "iter/v2.0,enhancement,backend" "$MS_V20")" )
+
+# ---- tech-debt -------------------------------------------------------------
+echo ""
+echo "── Creating tech-debt issues ──────────────────────────────────────────────"
+
+TD_IDS=()
+TD_IDS+=( "$(create_issue "TD-1 Complete Shadcn UI migration" \
+  "Complete the remaining Shadcn UI migration phases (Phase 3–6) to fully replace custom component styles." \
+  "tech-debt" "")" )
+
+TD_IDS+=( "$(create_issue "TD-2 Page/layout test coverage ≥ 90%" \
+  "Raise test coverage for page and layout components to ≥ 90%." \
+  "tech-debt" "")" )
+
+TD_IDS+=( "$(create_issue "TD-3 E2E tests for mobile & desktop navigation" \
+  "Add E2E tests covering mobile and desktop navigation flows using Playwright." \
+  "tech-debt" "")" )
+
+TD_IDS+=( "$(create_issue "TD-4 Error boundaries" \
+  "Implement React error boundaries to prevent full-page crashes on unexpected runtime errors." \
+  "tech-debt" "")" )
+
+TD_IDS+=( "$(create_issue "TD-5 Skeleton loading states" \
+  "Add skeleton loading states for all data-fetching pages (feeds list, article list, article detail, favorites)." \
+  "tech-debt" "")" )
+
+TD_IDS+=( "$(create_issue "TD-6 Lighthouse audit baseline" \
+  "Run Lighthouse audit after each iteration. Target: all scores 100 (Performance, Accessibility, Best Practices, SEO)." \
+  "tech-debt" "")" )
+
+echo ""
+
+# =============================================================================
+# 4. GITHUB PROJECT (ProjectV2)
+# =============================================================================
+echo "── Creating GitHub Project ────────────────────────────────────────────────"
+
+# Retrieve the owner's node ID
+OWNER_ID=$(gh api graphql \
+  -f query='query { repositoryOwner(login: "chiga0") { id } }' \
+  --jq '.data.repositoryOwner.id')
+echo "  owner node id: $OWNER_ID"
+
+# Check if project already exists
+EXISTING_PROJECT=$(gh api graphql \
+  -f query='query($login: String!) {
+    user(login: $login) {
+      projectsV2(first: 20) {
+        nodes { id title }
+      }
+    }
+  }' \
+  -f login="chiga0" \
+  --jq '.data.user.projectsV2.nodes[] | select(.title=="RSS Reader Roadmap") | .id' 2>/dev/null || true)
+
+if [[ -n "$EXISTING_PROJECT" ]]; then
+  PROJECT_ID="$EXISTING_PROJECT"
+  echo "  Project 'RSS Reader Roadmap' already exists (id: $PROJECT_ID) — skipping creation"
+else
+  PROJECT_ID=$(gh api graphql \
+    -f query='mutation($ownerId: ID!, $title: String!) {
+      createProjectV2(input: { ownerId: $ownerId, title: $title }) {
+        projectV2 { id }
+      }
+    }' \
+    -f ownerId="$OWNER_ID" \
+    -f title="RSS Reader Roadmap" \
+    --jq '.data.createProjectV2.projectV2.id')
+  echo "  ✓ Project 'RSS Reader Roadmap' created (id: $PROJECT_ID)"
+fi
+
+echo ""
+echo "── Adding issues to project ───────────────────────────────────────────────"
+
+add_to_project() {
+  local content_id="$1"
+  gh api graphql \
+    -f query='mutation($projectId: ID!, $contentId: ID!) {
+      addProjectV2ItemById(input: { projectId: $projectId, contentId: $contentId }) {
+        item { id }
+      }
+    }' \
+    -f projectId="$PROJECT_ID" \
+    -f contentId="$content_id" \
+    --jq '.data.addProjectV2ItemById.item.id' > /dev/null
+  echo "  ✓ added issue to project"
+}
+
+for nid in "${ISSUE_IDS[@]}" "${TD_IDS[@]}"; do
+  [[ -z "$nid" ]] && continue
+  add_to_project "$nid"
+done
+
+echo ""
+echo "✅ Done!"
+echo "   Issues   → https://github.com/$REPO/issues"
+echo "   Milestones → https://github.com/$REPO/milestones"
+echo "   Project  → https://github.com/users/chiga0/projects"
diff --git a/src/components/ArticleView/ArticleActionBar.tsx b/src/components/ArticleView/ArticleActionBar.tsx
index 3bd65cb..90e9548 100644
--- a/src/components/ArticleView/ArticleActionBar.tsx
+++ b/src/components/ArticleView/ArticleActionBar.tsx
@@ -1,28 +1,64 @@
 /**
- * ArticleActionBar - Fixed bottom banner with Favorite, Translate, and AI Summary buttons.
+ * ArticleActionBar - Fixed bottom banner with Favorite, Translate, AI Summary, Annotate, and Share buttons.
  */
 
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Heart, Languages, Sparkles, Loader2 } from 'lucide-react';
+import { Heart, Languages, Sparkles, Loader2, Highlighter, Share2 } from 'lucide-react';
 
 interface ArticleActionBarProps {
   isFavorite: boolean;
   isTranslating: boolean;
   isSummarizing: boolean;
+  isAnnotating: boolean;
+  articleLink?: string;
+  articleTitle?: string;
   onToggleFavorite: () => void;
   onTranslate: () => void;
   onSummarize: () => void;
+  onToggleAnnotate: () => void;
 }
 
 export function ArticleActionBar({
   isFavorite,
   isTranslating,
   isSummarizing,
+  isAnnotating,
+  articleLink,
+  articleTitle,
   onToggleFavorite,
   onTranslate,
   onSummarize,
+  onToggleAnnotate,
 }: ArticleActionBarProps) {
   const { t } = useTranslation('article');
+  const [copied, setCopied] = useState(false);
+  const [shareError, setShareError] = useState(false);
+
+  const handleShare = async () => {
+    const url = articleLink || window.location.href;
+    const title = articleTitle || document.title;
+    if (navigator.share) {
+      try {
+        await navigator.share({ title, url });
+      } catch (err) {
+        // Only show error for non-cancellation failures
+        if ((err as Error)?.name !== 'AbortError') {
+          setShareError(true);
+          setTimeout(() => setShareError(false), 1500);
+        }
+      }
+    } else {
+      try {
+        await navigator.clipboard.writeText(url);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      } catch {
+        setShareError(true);
+        setTimeout(() => setShareError(false), 1500);
+      }
+    }
+  };
 
   return (
     <div
@@ -68,7 +104,31 @@ export function ArticleActionBar({
           )}
           <span>{isSummarizing ? '停止总结' : 'AI 总结'}</span>
         </button>
+
+        {/* Annotate */}
+        <button
+          onClick={onToggleAnnotate}
+          className={`inline-flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 text-xs transition-colors ${
+            isAnnotating
+              ? 'text-amber-600 dark:text-amber-400'
+              : 'text-muted-foreground hover:text-foreground'
+          }`}
+          title="Highlight / Annotate"
+        >
+          <Highlighter className="h-5 w-5" />
+          <span>{isAnnotating ? 'Done' : 'Annotate'}</span>
+        </button>
+
+        {/* Share */}
+        <button
+          onClick={handleShare}
+          className="inline-flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+          title="Share article"
+        >
+          <Share2 className="h-5 w-5" />
+          <span>{copied ? 'Copied!' : shareError ? 'Failed' : 'Share'}</span>
+        </button>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ArticleView/PodcastPlayer.tsx b/src/components/ArticleView/PodcastPlayer.tsx
new file mode 100644
index 0000000..fc67807
--- /dev/null
+++ b/src/components/ArticleView/PodcastPlayer.tsx
@@ -0,0 +1,176 @@
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { usePodcast } from '@/contexts/PodcastContext';
+
+interface PodcastPlayerProps {
+  url: string;
+  title: string;
+  duration?: number;
+}
+
+const SPEEDS = [1, 1.5, 2] as const;
+
+function formatTime(seconds: number): string {
+  if (!isFinite(seconds) || isNaN(seconds)) return '0:00';
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+export function PodcastPlayer({ url, title }: PodcastPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const { playPodcast } = usePodcast();
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [totalDuration, setTotalDuration] = useState(0);
+  const [speed, setSpeed] = useState<1 | 1.5 | 2>(1);
+
+  // Restore saved position on mount
+  useEffect(() => {
+    const saved = localStorage.getItem(`podcast-pos:${url}`);
+    if (saved && audioRef.current) {
+      const t = parseFloat(saved);
+      if (isFinite(t) && t > 0) {
+        audioRef.current.currentTime = t;
+        setCurrentTime(t);
+      }
+    }
+  }, [url]);
+
+  // Save position periodically while playing
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const onTimeUpdate = () => {
+      setCurrentTime(audio.currentTime);
+      localStorage.setItem(`podcast-pos:${url}`, String(audio.currentTime));
+    };
+    const onDurationChange = () => setTotalDuration(audio.duration || 0);
+    const onPlay = () => {
+      setIsPlaying(true);
+      playPodcast(url, title);
+    };
+    const onPause = () => setIsPlaying(false);
+    const onEnded = () => {
+      setIsPlaying(false);
+      localStorage.removeItem(`podcast-pos:${url}`);
+    };
+
+    audio.addEventListener('timeupdate', onTimeUpdate);
+    audio.addEventListener('durationchange', onDurationChange);
+    audio.addEventListener('play', onPlay);
+    audio.addEventListener('pause', onPause);
+    audio.addEventListener('ended', onEnded);
+    return () => {
+      audio.removeEventListener('timeupdate', onTimeUpdate);
+      audio.removeEventListener('durationchange', onDurationChange);
+      audio.removeEventListener('play', onPlay);
+      audio.removeEventListener('pause', onPause);
+      audio.removeEventListener('ended', onEnded);
+    };
+  }, [url, title, playPodcast]);
+
+  const togglePlay = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (audio.paused) {
+      audio.play().catch(() => {});
+    } else {
+      audio.pause();
+    }
+  }, []);
+
+  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const t = parseFloat(e.target.value);
+    audio.currentTime = t;
+    setCurrentTime(t);
+  }, []);
+
+  const skip = useCallback((seconds: number) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.currentTime = Math.max(0, Math.min(audio.currentTime + seconds, audio.duration || 0));
+  }, []);
+
+  const cycleSpeed = useCallback(() => {
+    setSpeed((prev) => {
+      const idx = SPEEDS.indexOf(prev);
+      const next = SPEEDS[(idx + 1) % SPEEDS.length];
+      if (audioRef.current) audioRef.current.playbackRate = next;
+      return next;
+    });
+  }, []);
+
+  return (
+    <div className="mb-6 rounded-lg border border-border bg-card p-4">
+      <audio ref={audioRef} src={url} preload="metadata" />
+      <p className="mb-3 truncate text-sm font-medium text-card-foreground">{title}</p>
+      <div className="flex items-center gap-2">
+        {/* Skip back */}
+        <button
+          onClick={() => skip(-30)}
+          className="rounded-md p-1.5 text-xs text-muted-foreground hover:text-foreground"
+          title="-30s"
+        >
+          -30s
+        </button>
+
+        {/* Play/Pause */}
+        <button
+          onClick={togglePlay}
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
+          aria-label={isPlaying ? 'Pause' : 'Play'}
+        >
+          {isPlaying ? (
+            <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+              <rect x="5" y="4" width="3" height="12" rx="1" />
+              <rect x="12" y="4" width="3" height="12" rx="1" />
+            </svg>
+          ) : (
+            <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M6.3 2.84A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.27l9.34-5.89a1.5 1.5 0 000-2.54L6.3 2.84z" />
+            </svg>
+          )}
+        </button>
+
+        {/* Skip forward */}
+        <button
+          onClick={() => skip(30)}
+          className="rounded-md p-1.5 text-xs text-muted-foreground hover:text-foreground"
+          title="+30s"
+        >
+          +30s
+        </button>
+
+        {/* Seek */}
+        <input
+          type="range"
+          min={0}
+          max={totalDuration || 0}
+          step={1}
+          value={currentTime}
+          onChange={handleSeek}
+          className="h-1.5 flex-1 cursor-pointer accent-primary"
+          aria-label="Seek"
+        />
+
+        {/* Time */}
+        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+          {formatTime(currentTime)} / {formatTime(totalDuration)}
+        </span>
+
+        {/* Speed */}
+        <button
+          onClick={cycleSpeed}
+          className="shrink-0 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
+          title="Playback speed"
+        >
+          {speed}×
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Common/ErrorBoundary.tsx b/src/components/Common/ErrorBoundary.tsx
new file mode 100644
index 0000000..9c52062
--- /dev/null
+++ b/src/components/Common/ErrorBoundary.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { logger } from '@lib/logger';
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends React.Component<React.PropsWithChildren, State> {
+  constructor(props: React.PropsWithChildren) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    logger.error('ErrorBoundary caught error', { error: error.message, componentStack: info.componentStack });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex min-h-[40vh] flex-col items-center justify-center gap-4 p-8 text-center">
+          <p className="text-lg font-semibold text-foreground">Something went wrong</p>
+          <p className="text-sm text-muted-foreground">An unexpected error occurred while rendering this page.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/src/components/Common/KeyboardShortcutsHelp.tsx b/src/components/Common/KeyboardShortcutsHelp.tsx
new file mode 100644
index 0000000..ca0a914
--- /dev/null
+++ b/src/components/Common/KeyboardShortcutsHelp.tsx
@@ -0,0 +1,76 @@
+/**
+ * Keyboard Shortcuts Help Modal
+ * Displays a table of available keyboard shortcuts.
+ */
+
+import { useEffect } from 'react';
+import { X } from 'lucide-react';
+
+interface ShortcutRow {
+  key: string;
+  description: string;
+}
+
+const SHORTCUTS: ShortcutRow[] = [
+  { key: 'j', description: 'Next article' },
+  { key: 'k', description: 'Previous article' },
+  { key: 'o / Enter', description: 'Open selected article' },
+  { key: 'f', description: 'Toggle favorite' },
+  { key: 'r', description: 'Toggle read/unread' },
+  { key: 'Escape', description: 'Go back / Close' },
+  { key: '?', description: 'Show this help' },
+];
+
+interface KeyboardShortcutsHelpProps {
+  onClose: () => void;
+}
+
+export function KeyboardShortcutsHelp({ onClose }: KeyboardShortcutsHelpProps) {
+  // Close on Escape key
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-sm rounded-lg border border-border bg-card shadow-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-border p-4">
+          <h2 className="text-sm font-semibold text-card-foreground">Keyboard Shortcuts</h2>
+          <button
+            onClick={onClose}
+            className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <table className="w-full p-4">
+          <tbody>
+            {SHORTCUTS.map(({ key, description }) => (
+              <tr key={key} className="border-b border-border last:border-0">
+                <td className="px-4 py-2">
+                  <kbd className="rounded border border-border bg-secondary px-1.5 py-0.5 text-xs font-mono text-secondary-foreground">
+                    {key}
+                  </kbd>
+                </td>
+                <td className="px-4 py-2 text-sm text-card-foreground">{description}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Common/Skeleton.tsx b/src/components/Common/Skeleton.tsx
new file mode 100644
index 0000000..88d7f98
--- /dev/null
+++ b/src/components/Common/Skeleton.tsx
@@ -0,0 +1,30 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export { Skeleton };
+
+export function ArticleCardSkeleton() {
+  return (
+    <div className="flex items-start gap-3 p-4">
+      <div className="mt-2 h-2 w-2 shrink-0" />
+      <div className="min-w-0 flex-1 space-y-2">
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-1/3" />
+      </div>
+      <Skeleton className="h-16 w-16 shrink-0 rounded-md" />
+    </div>
+  );
+}
+
+export function FeedCardSkeleton() {
+  return (
+    <div className="flex items-center gap-4 rounded-lg border border-border bg-card p-4">
+      <Skeleton className="h-10 w-10 shrink-0 rounded-lg" />
+      <div className="min-w-0 flex-1 space-y-2">
+        <Skeleton className="h-4 w-1/2" />
+        <Skeleton className="h-3 w-3/4" />
+        <Skeleton className="h-3 w-1/4" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 17474a3..bd29f68 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -2,17 +2,22 @@ import { Outlet } from 'react-router-dom';
 import { Navbar } from './Navbar';
 import { useRouteTitle } from '@/hooks/useRouteTitle';
 import { ToastNotification } from '@components/ui/toast-notification';
+import { PodcastProvider } from '@/contexts/PodcastContext';
+import { PodcastMiniPlayer } from './PodcastMiniPlayer';
 
 export function AppLayout() {
   useRouteTitle();
 
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      <Navbar />
-      <main className="container mx-auto px-4 py-6">
-        <Outlet />
-      </main>
-      <ToastNotification />
-    </div>
+    <PodcastProvider>
+      <div className="min-h-screen bg-background text-foreground">
+        <Navbar />
+        <main className="container mx-auto px-4 py-6">
+          <Outlet />
+        </main>
+        <PodcastMiniPlayer />
+        <ToastNotification />
+      </div>
+    </PodcastProvider>
   );
 }
diff --git a/src/components/layout/PodcastMiniPlayer.tsx b/src/components/layout/PodcastMiniPlayer.tsx
new file mode 100644
index 0000000..fac4206
--- /dev/null
+++ b/src/components/layout/PodcastMiniPlayer.tsx
@@ -0,0 +1,127 @@
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { usePodcast } from '@/contexts/PodcastContext';
+
+function formatTime(seconds: number): string {
+  if (!isFinite(seconds) || isNaN(seconds)) return '0:00';
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+export function PodcastMiniPlayer() {
+  const { currentPodcast, stopPodcast } = usePodcast();
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [totalDuration, setTotalDuration] = useState(0);
+
+  // Sync audio src when currentPodcast changes
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio || !currentPodcast) return;
+    if (audio.src !== currentPodcast.url) {
+      audio.src = currentPodcast.url;
+      const saved = localStorage.getItem(`podcast-pos:${currentPodcast.url}`);
+      if (saved) {
+        const t = parseFloat(saved);
+        if (isFinite(t) && t > 0) audio.currentTime = t;
+      }
+    }
+  }, [currentPodcast]);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const onTimeUpdate = () => {
+      setCurrentTime(audio.currentTime);
+      if (currentPodcast) {
+        localStorage.setItem(`podcast-pos:${currentPodcast.url}`, String(audio.currentTime));
+      }
+    };
+    const onDurationChange = () => setTotalDuration(audio.duration || 0);
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+    audio.addEventListener('timeupdate', onTimeUpdate);
+    audio.addEventListener('durationchange', onDurationChange);
+    audio.addEventListener('play', onPlay);
+    audio.addEventListener('pause', onPause);
+    return () => {
+      audio.removeEventListener('timeupdate', onTimeUpdate);
+      audio.removeEventListener('durationchange', onDurationChange);
+      audio.removeEventListener('play', onPlay);
+      audio.removeEventListener('pause', onPause);
+    };
+  }, [currentPodcast]);
+
+  const togglePlay = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (audio.paused) audio.play().catch(() => {});
+    else audio.pause();
+  }, []);
+
+  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.currentTime = parseFloat(e.target.value);
+  }, []);
+
+  if (!currentPodcast) return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-card/95 px-4 py-2 backdrop-blur-sm">
+      <audio ref={audioRef} />
+      <div className="mx-auto flex max-w-4xl items-center gap-3">
+        {/* Play/Pause */}
+        <button
+          onClick={togglePlay}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
+          aria-label={isPlaying ? 'Pause' : 'Play'}
+        >
+          {isPlaying ? (
+            <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
+              <rect x="5" y="4" width="3" height="12" rx="1" />
+              <rect x="12" y="4" width="3" height="12" rx="1" />
+            </svg>
+          ) : (
+            <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M6.3 2.84A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.27l9.34-5.89a1.5 1.5 0 000-2.54L6.3 2.84z" />
+            </svg>
+          )}
+        </button>
+
+        {/* Title */}
+        <p className="min-w-0 flex-1 truncate text-xs font-medium text-card-foreground">
+          {currentPodcast.title}
+        </p>
+
+        {/* Progress */}
+        <input
+          type="range"
+          min={0}
+          max={totalDuration || 0}
+          step={1}
+          value={currentTime}
+          onChange={handleSeek}
+          className="w-24 cursor-pointer accent-primary sm:w-40"
+          aria-label="Seek"
+        />
+        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+          {formatTime(currentTime)}
+        </span>
+
+        {/* Close */}
+        <button
+          onClick={() => {
+            audioRef.current?.pause();
+            stopPodcast();
+          }}
+          className="shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground"
+          aria-label="Close player"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/contexts/PodcastContext.tsx b/src/contexts/PodcastContext.tsx
new file mode 100644
index 0000000..83279d0
--- /dev/null
+++ b/src/contexts/PodcastContext.tsx
@@ -0,0 +1,41 @@
+import { createContext, useContext, useState, useCallback } from 'react';
+import type { ReactNode } from 'react';
+
+interface PodcastInfo {
+  url: string;
+  title: string;
+}
+
+interface PodcastContextValue {
+  currentPodcast: PodcastInfo | null;
+  playPodcast: (url: string, title: string) => void;
+  stopPodcast: () => void;
+}
+
+const PodcastContext = createContext<PodcastContextValue>({
+  currentPodcast: null,
+  playPodcast: () => {},
+  stopPodcast: () => {},
+});
+
+export function PodcastProvider({ children }: { children: ReactNode }) {
+  const [currentPodcast, setCurrentPodcast] = useState<PodcastInfo | null>(null);
+
+  const playPodcast = useCallback((url: string, title: string) => {
+    setCurrentPodcast({ url, title });
+  }, []);
+
+  const stopPodcast = useCallback(() => {
+    setCurrentPodcast(null);
+  }, []);
+
+  return (
+    <PodcastContext.Provider value={{ currentPodcast, playPodcast, stopPodcast }}>
+      {children}
+    </PodcastContext.Provider>
+  );
+}
+
+export function usePodcast() {
+  return useContext(PodcastContext);
+}
diff --git a/src/hooks/useKeyboardShortcuts.ts b/src/hooks/useKeyboardShortcuts.ts
new file mode 100644
index 0000000..63af11e
--- /dev/null
+++ b/src/hooks/useKeyboardShortcuts.ts
@@ -0,0 +1,42 @@
+/**
+ * Keyboard Shortcuts Hook
+ * Registers global keydown listeners, ignoring events from input elements.
+ */
+
+import { useEffect, useRef } from 'react';
+
+/** Tags where keyboard shortcuts should not fire */
+const IGNORED_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
+
+/**
+ * Register global keyboard shortcuts.
+ * @param shortcuts - Map of key to handler function
+ */
+export function useKeyboardShortcuts(shortcuts: Record<string, () => void>): void {
+  // Store latest shortcuts in a ref to avoid re-registering the listener on every render
+  const shortcutsRef = useRef(shortcuts);
+  shortcutsRef.current = shortcuts;
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      const target = event.target as HTMLElement;
+
+      // Ignore events in form elements or contenteditable
+      if (
+        IGNORED_TAGS.has(target.tagName) ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      const handler = shortcutsRef.current[event.key];
+      if (handler) {
+        event.preventDefault();
+        handler();
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+}
diff --git a/src/lib/router/navigationItems.ts b/src/lib/router/navigationItems.ts
index f77c9f9..e31acc1 100644
--- a/src/lib/router/navigationItems.ts
+++ b/src/lib/router/navigationItems.ts
@@ -4,7 +4,7 @@
  * Created: 2026-02-05
  */
 
-import { Rss, Star, Clock, Settings, ListChecks } from 'lucide-react';
+import { Rss, Star, Clock, Settings, ListChecks, Highlighter } from 'lucide-react';
 import type { NavigationItem } from '@/types/navigation';
 
 /**
@@ -37,6 +37,13 @@ export const navigationItems: NavigationItem[] = [
   },
   
   // User navigation group
+  {
+    id: 'annotations',
+    label: 'Annotations',
+    icon: Highlighter,
+    path: '/annotations',
+    group: 'user',
+  },
   {
     id: 'feed-management',
     label: 'Manage Feeds',
diff --git a/src/lib/router/routeConfig.tsx b/src/lib/router/routeConfig.tsx
index eeb6a02..9f33fcd 100644
--- a/src/lib/router/routeConfig.tsx
+++ b/src/lib/router/routeConfig.tsx
@@ -4,6 +4,7 @@
  * Created: 2026-02-05
  */
 
+import type { ReactElement } from 'react';
 import type { Route } from '@/types/navigation';
 import { FeedsPage } from '@/pages/FeedsPage';
 import { FeedDetailPage } from '@/pages/FeedDetailPage';
@@ -14,7 +15,13 @@ import Settings from '@/pages/Settings';
 import { FeedManagementPage } from '@/pages/FeedManagementPage';
 import { SearchPage } from '@/pages/SearchPage';
 import { NotFoundPage } from '@/pages/NotFoundPage';
+import { AnnotationsPage } from '@/pages/AnnotationsPage';
 import { loadFeedsData, loadFeedDetail, loadArticleDetail } from './loaders';
+import { ErrorBoundary } from '@/components/Common/ErrorBoundary';
+
+function wrap(element: ReactElement): ReactElement {
+  return <ErrorBoundary>{element}</ErrorBoundary>;
+}
 
 /**
  * Route configuration array
@@ -24,7 +31,7 @@ import { loadFeedsData, loadFeedDetail, loadArticleDetail } from './loaders';
 export const routes: Route[] = [
   {
     path: '/feeds',
-    element: <FeedsPage />,
+    element: wrap(<FeedsPage />),
     loader: loadFeedsData,
     handle: {
       title: 'Feeds',
@@ -33,7 +40,7 @@ export const routes: Route[] = [
   },
   {
     path: '/feeds/:feedId',
-    element: <FeedDetailPage />,
+    element: wrap(<FeedDetailPage />),
     loader: loadFeedDetail,
     handle: {
       title: 'Feed Detail',
@@ -42,7 +49,7 @@ export const routes: Route[] = [
   },
   {
     path: '/articles/:articleId',
-    element: <ArticleDetailPage />,
+    element: wrap(<ArticleDetailPage />),
     loader: loadArticleDetail,
     handle: {
       title: 'Article',
@@ -51,7 +58,7 @@ export const routes: Route[] = [
   },
   {
     path: '/favorites',
-    element: <FavoritesPage />,
+    element: wrap(<FavoritesPage />),
     handle: {
       title: 'Favorites',
       icon: 'star',
@@ -59,7 +66,7 @@ export const routes: Route[] = [
   },
   {
     path: '/history',
-    element: <HistoryPage />,
+    element: wrap(<HistoryPage />),
     handle: {
       title: 'History',
       icon: 'clock',
@@ -67,7 +74,7 @@ export const routes: Route[] = [
   },
   {
     path: '/feed-management',
-    element: <FeedManagementPage />,
+    element: wrap(<FeedManagementPage />),
     handle: {
       title: 'Manage Subscriptions',
       icon: 'list',
@@ -75,7 +82,7 @@ export const routes: Route[] = [
   },
   {
     path: '/search',
-    element: <SearchPage />,
+    element: wrap(<SearchPage />),
     handle: {
       title: 'Search',
       icon: 'search',
@@ -83,12 +90,20 @@ export const routes: Route[] = [
   },
   {
     path: '/settings',
-    element: <Settings />,
+    element: wrap(<Settings />),
     handle: {
       title: 'Settings',
       icon: 'settings',
     },
   },
+  {
+    path: '/annotations',
+    element: wrap(<AnnotationsPage />),
+    handle: {
+      title: 'Annotations',
+      icon: 'highlighter',
+    },
+  },
   {
     path: '*',
     element: <NotFoundPage />,
diff --git a/src/lib/rssParser.ts b/src/lib/rssParser.ts
index 110d129..424ded5 100644
--- a/src/lib/rssParser.ts
+++ b/src/lib/rssParser.ts
@@ -105,13 +105,20 @@ function parseRSS2(doc: Document, feedUrl: string): ParsedFeed {
 
     // Extract first image from content or enclosure
     let imageUrl: string | undefined;
-    const enclosure = item.querySelector('enclosure[type^="image"]');
-    if (enclosure) {
-      imageUrl = enclosure.getAttribute('url') || undefined;
+    const imageEnclosure = item.querySelector('enclosure[type^="image"]');
+    if (imageEnclosure) {
+      imageUrl = imageEnclosure.getAttribute('url') || undefined;
     } else {
       imageUrl = extractFirstImage(content);
     }
 
+    // Extract audio/video enclosure for podcasts
+    const audioEnclosure = item.querySelector('enclosure[type^="audio"], enclosure[type^="video"]');
+    const enclosureUrl = audioEnclosure?.getAttribute('url') || undefined;
+    const enclosureType = audioEnclosure?.getAttribute('type') || undefined;
+    const enclosureLengthStr = audioEnclosure?.getAttribute('length');
+    const enclosureLength = enclosureLengthStr ? parseInt(enclosureLengthStr, 10) : undefined;
+
     return {
       title,
       summary: description,
@@ -123,6 +130,9 @@ function parseRSS2(doc: Document, feedUrl: string): ParsedFeed {
       readAt: null,
       isFavorite: false,
       deletedAt: null,
+      enclosureUrl,
+      enclosureType,
+      enclosureLength,
     };
   });
 
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index c0d3809..90ce98c 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -4,10 +4,11 @@
  */
 
 import { logger } from './logger';
-import type { Feed, Article, Category, UserSettings, SyncState } from '@models/Feed';
+import type { Feed, Article, Category, UserSettings, SyncState, Annotation } from '@models/Feed';
 
 const DB_NAME = 'rss-reader';
-const DB_VERSION = 1;
+// v1 → initial schema; v2 → added 'annotations' object store
+const DB_VERSION = 2;
 
 export interface StorageObjects {
   feeds: Feed;
@@ -15,6 +16,7 @@ export interface StorageObjects {
   categories: Category;
   settings: UserSettings;
   syncState: SyncState;
+  annotations: Annotation;
 }
 
 export interface StorageQuota {
@@ -81,6 +83,12 @@ class Storage {
           db.createObjectStore('syncState', { keyPath: 'id' });
         }
 
+        // Create annotations object store
+        if (!db.objectStoreNames.contains('annotations')) {
+          const annotationStore = db.createObjectStore('annotations', { keyPath: 'id' });
+          annotationStore.createIndex('articleId', 'articleId', { unique: false });
+        }
+
         logger.info('Database upgraded to version ' + DB_VERSION);
       };
     });
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
index 4572de5..fb134ce 100644
--- a/src/locales/en/common.json
+++ b/src/locales/en/common.json
@@ -26,6 +26,7 @@
     "feeds": "Feeds",
     "favorites": "Favorites",
     "history": "History",
+    "annotations": "Annotations",
     "feed-management": "Manage Feeds",
     "settings": "Settings"
   }
diff --git a/src/locales/zh/common.json b/src/locales/zh/common.json
index caec80c..09a3811 100644
--- a/src/locales/zh/common.json
+++ b/src/locales/zh/common.json
@@ -26,6 +26,7 @@
     "feeds": "订阅源",
     "favorites": "收藏",
     "history": "历史",
+    "annotations": "批注",
     "feed-management": "管理订阅",
     "settings": "设置"
   }
diff --git a/src/models/Feed.ts b/src/models/Feed.ts
index fbbdddf..32d0e5a 100644
--- a/src/models/Feed.ts
+++ b/src/models/Feed.ts
@@ -34,6 +34,9 @@ export interface Article {
   isFavorite: boolean;
   createdAt: Date;
   deletedAt: Date | null;
+  enclosureUrl?: string;
+  enclosureType?: string;
+  enclosureLength?: number;
 }
 
 export interface Category {
@@ -77,6 +80,18 @@ export interface FeedState {
 
 export type FeedStatus = 'idle' | 'loading' | 'success' | 'error';
 
+export interface Annotation {
+  id: string;
+  articleId: string;
+  feedId: string;
+  selectedText: string;
+  note?: string;
+  color: 'yellow' | 'green' | 'blue' | 'pink';
+  startOffset: number;
+  endOffset: number;
+  createdAt: Date;
+}
+
 export interface ValidationError {
   field: string;
   message: string;
diff --git a/src/pages/AnnotationsPage.tsx b/src/pages/AnnotationsPage.tsx
new file mode 100644
index 0000000..95cbf02
--- /dev/null
+++ b/src/pages/AnnotationsPage.tsx
@@ -0,0 +1,110 @@
+/**
+ * Annotations Page - Lists all saved highlights and annotations grouped by article
+ */
+
+import { useEffect, useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Highlighter, Trash2 } from 'lucide-react';
+import { storage } from '@lib/storage';
+import type { Annotation } from '@/models';
+
+const COLOR_CLASS: Record<Annotation['color'], string> = {
+  yellow: 'bg-yellow-100 border-yellow-300 dark:bg-yellow-900/30 dark:border-yellow-700',
+  green: 'bg-green-100 border-green-300 dark:bg-green-900/30 dark:border-green-700',
+  blue: 'bg-blue-100 border-blue-300 dark:bg-blue-900/30 dark:border-blue-700',
+  pink: 'bg-pink-100 border-pink-300 dark:bg-pink-900/30 dark:border-pink-700',
+};
+
+export function AnnotationsPage() {
+  const navigate = useNavigate();
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [articleTitles, setArticleTitles] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      const all = await storage.getAll('annotations');
+      // Sort newest first
+      all.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+      setAnnotations(all);
+
+      // Load article titles for grouping display
+      const uniqueArticleIds = [...new Set(all.map((a) => a.articleId))];
+      const titles: Record<string, string> = {};
+      await Promise.all(
+        uniqueArticleIds.map(async (id) => {
+          const article = await storage.get('articles', id);
+          titles[id] = article?.title ?? id;
+        }),
+      );
+      setArticleTitles(titles);
+      setIsLoading(false);
+    }
+    load().catch(() => setIsLoading(false));
+  }, []);
+
+  const handleDelete = useCallback(async (id: string) => {
+    await storage.delete('annotations', id);
+    setAnnotations((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  // Group by articleId
+  const grouped = annotations.reduce<Record<string, Annotation[]>>((acc, ann) => {
+    (acc[ann.articleId] ??= []).push(ann);
+    return acc;
+  }, {});
+
+  return (
+    <div className="mx-auto max-w-3xl">
+      <div className="mb-6 flex items-center gap-3">
+        <Highlighter className="h-6 w-6 text-amber-500" />
+        <h1 className="text-2xl font-bold text-foreground">Annotations</h1>
+      </div>
+
+      {isLoading ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : Object.keys(grouped).length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-16 text-center">
+          <Highlighter className="mb-4 h-12 w-12 text-muted-foreground" />
+          <h2 className="mb-2 text-lg font-semibold text-foreground">No annotations yet</h2>
+          <p className="text-sm text-muted-foreground">
+            Open an article and use the Annotate button to highlight text.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {Object.entries(grouped).map(([articleId, anns]) => (
+            <div key={articleId} className="rounded-lg border border-border bg-card">
+              <button
+                className="w-full px-4 py-3 text-left text-sm font-semibold text-foreground hover:bg-accent transition-colors rounded-t-lg"
+                onClick={() => navigate(`/articles/${articleId}`)}
+              >
+                {articleTitles[articleId] ?? articleId}
+              </button>
+              <ul className="divide-y divide-border">
+                {anns.map((ann) => (
+                  <li key={ann.id} className="flex items-start gap-3 px-4 py-3">
+                    <div className={`mt-1 h-3 w-3 shrink-0 rounded-full border ${COLOR_CLASS[ann.color]}`} />
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm text-foreground">&ldquo;{ann.selectedText}&rdquo;</p>
+                      {ann.note && (
+                        <p className="mt-0.5 text-xs text-muted-foreground">{ann.note}</p>
+                      )}
+                    </div>
+                    <button
+                      onClick={() => handleDelete(ann.id)}
+                      className="shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:text-destructive"
+                      title="Delete annotation"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/ArticleDetailPage.tsx b/src/pages/ArticleDetailPage.tsx
index 81aa08f..1273e48 100644
--- a/src/pages/ArticleDetailPage.tsx
+++ b/src/pages/ArticleDetailPage.tsx
@@ -7,12 +7,16 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLoaderData, useNavigate } from 'react-router-dom';
 import { ArrowLeft, ExternalLink, RefreshCw } from 'lucide-react';
+import { storage } from '@lib/storage';
+import type { Annotation } from '@/models';
 import { useStore } from '@hooks/useStore';
 import { sanitizeHTML } from '@utils/sanitize';
 import { formatRelativeTime } from '@utils/dateFormat';
+import { calculateReadingTime, formatReadingTime } from '@utils/readingTime';
 import { fetchAndCacheFullContent } from '@services/articleContentService';
 import { translateText, summarizeText } from '@services/aiService';
 import { ArticleActionBar } from '@components/ArticleView/ArticleActionBar';
+import { PodcastPlayer } from '@components/ArticleView/PodcastPlayer';
 import type { Feed, Article } from '@/models';
 
 interface ArticleDetailLoaderData {
@@ -54,6 +58,14 @@ export function ArticleDetailPage() {
   const [fullContentError, setFullContentError] = useState<string | null>(null);
 
   const [isFavorite, setIsFavorite] = useState(article.isFavorite);
+  const [isAnnotating, setIsAnnotating] = useState(false);
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [pendingSelection, setPendingSelection] = useState<{
+    text: string; start: number; end: number;
+  } | null>(null);
+  const [annotationNote, setAnnotationNote] = useState('');
+  const [annotationColor, setAnnotationColor] = useState<Annotation['color']>('yellow');
+  const contentRef = useRef<HTMLDivElement>(null);
   const [translations, setTranslations] = useState<Record<number, string>>({});
   const [translatingIndex, setTranslatingIndex] = useState<number>(-1);
   const [isTranslating, setIsTranslating] = useState(false);
@@ -72,6 +84,13 @@ export function ArticleDetailPage() {
     };
   }, [loaderArticle.id]);
 
+  // Load existing annotations for this article
+  useEffect(() => {
+    storage.getAllByIndex('annotations', 'articleId', loaderArticle.id)
+      .then(setAnnotations)
+      .catch(() => {});
+  }, [loaderArticle.id]);
+
   // Auto-fetch full content from original URL if RSS content appears incomplete
   useEffect(() => {
     let cancelled = false;
@@ -132,6 +151,11 @@ export function ArticleDetailPage() {
 
   const segments = useMemo(() => parseContentSegments(sanitizedContent), [sanitizedContent]);
 
+  const readingTime = useMemo(
+    () => formatReadingTime(calculateReadingTime(sanitizedContent)),
+    [sanitizedContent],
+  );
+
   const plainText = useMemo(
     () => segments.map((s) => s.text).filter(Boolean).join('\n\n'),
     [segments],
@@ -221,6 +245,62 @@ export function ArticleDetailPage() {
 
 
 
+  const handleToggleAnnotate = useCallback(() => {
+    setIsAnnotating((v) => !v);
+    setPendingSelection(null);
+  }, []);
+
+  const handleContentMouseUp = useCallback(() => {
+    if (!isAnnotating) return;
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed) return;
+    const text = selection.toString().trim();
+    if (!text) return;
+    const range = selection.getRangeAt(0);
+    // Compute character offsets relative to content container plain text
+    const container = contentRef.current;
+    if (!container) return;
+    const preRange = document.createRange();
+    preRange.setStart(container, 0);
+    preRange.setEnd(range.startContainer, range.startOffset);
+    const start = preRange.toString().length;
+    const end = start + text.length;
+    setPendingSelection({ text, start, end });
+    setAnnotationNote('');
+    setAnnotationColor('yellow');
+  }, [isAnnotating]);
+
+  const handleSaveAnnotation = useCallback(async () => {
+    if (!pendingSelection) return;
+    const annotation: Annotation = {
+      id: crypto.randomUUID(),
+      articleId: article.id,
+      feedId: feed.id,
+      selectedText: pendingSelection.text,
+      note: annotationNote.trim() || undefined,
+      color: annotationColor,
+      startOffset: pendingSelection.start,
+      endOffset: pendingSelection.end,
+      createdAt: new Date(),
+    };
+    await storage.put('annotations', annotation);
+    setAnnotations((prev) => [...prev, annotation]);
+    setPendingSelection(null);
+    window.getSelection()?.removeAllRanges();
+  }, [pendingSelection, annotationNote, annotationColor, article.id, feed.id]);
+
+  const handleDeleteAnnotation = useCallback(async (id: string) => {
+    await storage.delete('annotations', id);
+    setAnnotations((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  const annotationColorClass: Record<Annotation['color'], string> = {
+    yellow: 'bg-yellow-100 border-yellow-300 dark:bg-yellow-900/30 dark:border-yellow-700',
+    green: 'bg-green-100 border-green-300 dark:bg-green-900/30 dark:border-green-700',
+    blue: 'bg-blue-100 border-blue-300 dark:bg-blue-900/30 dark:border-blue-700',
+    pink: 'bg-pink-100 border-pink-300 dark:bg-pink-900/30 dark:border-pink-700',
+  };
+
   return (
     <div className="mx-auto max-w-3xl overflow-x-hidden pb-20">
       {/* Navigation */}
@@ -245,6 +325,7 @@ export function ArticleDetailPage() {
         <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
           {article.author && <span>By {article.author}</span>}
           <span>{formatRelativeTime(new Date(article.publishedAt))}</span>
+          <span>{readingTime}</span>
           {article.readAt && (
             <span className="inline-flex items-center gap-1 text-xs">✓ Read</span>
           )}
@@ -266,6 +347,11 @@ export function ArticleDetailPage() {
         </div>
       )}
 
+      {/* Podcast Player */}
+      {article.enclosureUrl && article.enclosureType?.startsWith('audio/') && (
+        <PodcastPlayer url={article.enclosureUrl} title={article.title} />
+      )}
+
       {/* Featured Image */}
       {article.imageUrl && (
         <figure className="mb-8 overflow-hidden rounded-lg">
@@ -293,8 +379,61 @@ export function ArticleDetailPage() {
         </div>
       )}
 
+      {/* Annotation mode banner */}
+      {isAnnotating && (
+        <div className="mb-4 rounded-md border border-amber-400 bg-amber-50 p-3 text-sm text-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
+          Annotation mode: select text in the article to highlight it.
+        </div>
+      )}
+
+      {/* Annotation creation popover */}
+      {pendingSelection && (
+        <div className="mb-4 rounded-lg border border-border bg-card p-4 shadow-md">
+          <p className="mb-2 text-sm font-medium text-foreground">
+            Selected: <span className="italic text-muted-foreground">&ldquo;{pendingSelection.text.slice(0, 80)}{pendingSelection.text.length > 80 ? '…' : ''}&rdquo;</span>
+          </p>
+          <div className="mb-3 flex gap-2">
+            {(['yellow', 'green', 'blue', 'pink'] as const).map((c) => (
+              <button
+                key={c}
+                onClick={() => setAnnotationColor(c)}
+                className={`h-6 w-6 rounded-full border-2 transition-transform ${
+                  annotationColor === c ? 'scale-125 border-foreground' : 'border-transparent'
+                } ${
+                  c === 'yellow' ? 'bg-yellow-400' :
+                  c === 'green' ? 'bg-green-400' :
+                  c === 'blue' ? 'bg-blue-400' : 'bg-pink-400'
+                }`}
+                aria-label={c}
+              />
+            ))}
+          </div>
+          <textarea
+            value={annotationNote}
+            onChange={(e) => setAnnotationNote(e.target.value)}
+            placeholder="Add a note (optional)"
+            rows={2}
+            className="mb-3 w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          />
+          <div className="flex gap-2">
+            <button
+              onClick={handleSaveAnnotation}
+              className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
+            >
+              Save
+            </button>
+            <button
+              onClick={() => { setPendingSelection(null); window.getSelection()?.removeAllRanges(); }}
+              className="rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Article Content (rendered as segments to support inline translations) */}
-      <div className="article-content">
+      <div ref={contentRef} className="article-content" onMouseUp={handleContentMouseUp}>
         {segments.map((segment, index) => (
           <div key={index}>
             <div dangerouslySetInnerHTML={{ __html: segment.html }} />
@@ -308,6 +447,27 @@ export function ArticleDetailPage() {
         ))}
       </div>
 
+      {/* Saved Annotations */}
+      {annotations.length > 0 && (
+        <div className="mt-8 rounded-lg border border-border bg-card p-4">
+          <h3 className="mb-3 text-sm font-semibold text-foreground">Highlights &amp; Annotations</h3>
+          <ul className="space-y-2">
+            {annotations.map((ann) => (
+              <li key={ann.id} className={`rounded-md border px-3 py-2 text-sm ${annotationColorClass[ann.color]}`}>
+                <p className="font-medium">&ldquo;{ann.selectedText}&rdquo;</p>
+                {ann.note && <p className="mt-0.5 text-xs text-muted-foreground">{ann.note}</p>}
+                <button
+                  onClick={() => handleDeleteAnnotation(ann.id)}
+                  className="mt-1 text-xs text-destructive hover:underline"
+                >
+                  Delete
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
       {/* Original Article Link + Load Full Content */}
       {article.link && (
         <footer className="mt-10 border-t border-border pt-6">
@@ -338,9 +498,13 @@ export function ArticleDetailPage() {
         isFavorite={isFavorite}
         isTranslating={isTranslating}
         isSummarizing={isSummarizing}
+        isAnnotating={isAnnotating}
+        articleLink={article.link}
+        articleTitle={article.title}
         onToggleFavorite={handleFavoriteToggle}
         onTranslate={handleTranslate}
         onSummarize={handleSummarize}
+        onToggleAnnotate={handleToggleAnnotate}
       />
     </div>
   );
diff --git a/src/pages/FeedDetailPage.tsx b/src/pages/FeedDetailPage.tsx
index 3f6e50d..750d2f9 100644
--- a/src/pages/FeedDetailPage.tsx
+++ b/src/pages/FeedDetailPage.tsx
@@ -3,13 +3,17 @@
  * Shows article list with read/unread status, mark-as-read, and favorites
  */
 
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useRef } from 'react';
 import { useLoaderData, useNavigate, Link } from 'react-router-dom';
 import { ArrowLeft, Heart, RefreshCw } from 'lucide-react';
 import { useStore } from '@hooks/useStore';
+import { useKeyboardShortcuts } from '@hooks/useKeyboardShortcuts';
 import { formatRelativeTime } from '@utils/dateFormat';
 import { fetchAndStoreArticles, getArticlesForFeed } from '@services/feedService';
 import { storage } from '@lib/storage';
+import { KeyboardShortcutsHelp } from '@components/Common/KeyboardShortcutsHelp';
+import { ArticleCardSkeleton } from '@components/Common/Skeleton';
+import { discoverFeeds } from '@utils/feedDiscovery';
 import type { Feed, Article } from '@/models';
 
 interface FeedDetailLoaderData {
@@ -18,20 +22,50 @@ interface FeedDetailLoaderData {
   isOffline: boolean;
 }
 
+const FALLBACK_FEEDS = [
+  { url: 'https://feeds.feedburner.com/TechCrunch', title: 'TechCrunch' },
+  { url: 'https://www.theverge.com/rss/index.xml', title: 'The Verge' },
+  { url: 'https://hnrss.org/frontpage', title: 'Hacker News' },
+  { url: 'https://feeds.arstechnica.com/arstechnica/index', title: 'Ars Technica' },
+  { url: 'https://www.wired.com/feed/rss', title: 'Wired' },
+];
+
 export function FeedDetailPage() {
   const loaderData = useLoaderData() as FeedDetailLoaderData;
   const navigate = useNavigate();
-  const { toggleArticleFavorite } = useStore();
+  const { toggleArticleFavorite, subscribeFeed } = useStore();
   const [articles, setArticles] = useState<Article[]>(loaderData.articles);
   const [feed, setFeed] = useState<Feed>(loaderData.feed);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isLoadingArticles, setIsLoadingArticles] = useState(loaderData.articles.length === 0);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [showHelp, setShowHelp] = useState(false);
+  const [suggestedFeeds, setSuggestedFeeds] = useState<{ url: string; title: string }[]>([]);
+  const [subscribingUrl, setSubscribingUrl] = useState<string | null>(null);
 
   // Sync with loader data when navigating to a different feed
   useEffect(() => {
     setArticles(loaderData.articles);
     setFeed(loaderData.feed);
+    setIsLoadingArticles(loaderData.articles.length === 0);
   }, [loaderData]);
 
+  useEffect(() => {
+    if (!feed.link) {
+      setSuggestedFeeds(FALLBACK_FEEDS.slice(0, 5));
+      return;
+    }
+    discoverFeeds(feed.link).then((discovered) => {
+      setSuggestedFeeds(discovered.length > 0 ? discovered.slice(0, 5) : FALLBACK_FEEDS.slice(0, 5));
+    });
+  }, [feed.id, feed.link]);
+
+  const handleSubscribeSuggested = useCallback(async (url: string) => {
+    setSubscribingUrl(url);
+    await subscribeFeed(url);
+    setSubscribingUrl(null);
+  }, [subscribeFeed]);
+
   const [refreshError, setRefreshError] = useState<string | null>(null);
 
   const handleRefresh = useCallback(async () => {
@@ -68,8 +102,27 @@ export function FeedDetailPage() {
 
   const unreadCount = sortedArticles.filter(a => !a.readAt).length;
 
+  const selectedIndexRef = useRef(selectedIndex);
+  selectedIndexRef.current = selectedIndex;
+
+  useKeyboardShortcuts({
+    j: () => setSelectedIndex((i) => Math.min(i + 1, sortedArticles.length - 1)),
+    k: () => setSelectedIndex((i) => Math.max(i - 1, 0)),
+    o: () => {
+      const article = sortedArticles[selectedIndexRef.current];
+      if (article) navigate(`/articles/${article.id}`);
+    },
+    Enter: () => {
+      const article = sortedArticles[selectedIndexRef.current];
+      if (article) navigate(`/articles/${article.id}`);
+    },
+    '?': () => setShowHelp((v) => !v),
+    Escape: () => navigate('/feeds'),
+  });
+
   return (
     <div className="mx-auto max-w-4xl">
+      {showHelp && <KeyboardShortcutsHelp onClose={() => setShowHelp(false)} />}
       {/* Header */}
       <div className="mb-6">
         <button
@@ -124,7 +177,13 @@ export function FeedDetailPage() {
       )}
 
       {/* Article List */}
-      {sortedArticles.length === 0 ? (
+      {isLoadingArticles ? (
+        <div className="divide-y divide-border rounded-lg border border-border bg-card">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <ArticleCardSkeleton key={i} />
+          ))}
+        </div>
+      ) : sortedArticles.length === 0 ? (
         <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-16 text-center">
           <RefreshCw className="mb-4 h-12 w-12 text-muted-foreground" />
           <h2 className="mb-2 text-lg font-semibold text-foreground">No articles yet</h2>
@@ -134,12 +193,13 @@ export function FeedDetailPage() {
         </div>
       ) : (
         <div className="divide-y divide-border rounded-lg border border-border bg-card">
-          {sortedArticles.map((article) => {
+          {sortedArticles.map((article, index) => {
             const isUnread = !article.readAt;
+            const isSelected = index === selectedIndex;
             return (
               <div
                 key={article.id}
-                className="flex items-start gap-3 p-4 transition-colors hover:bg-accent"
+                className={`flex items-start gap-3 p-4 transition-colors hover:bg-accent ${isSelected ? 'ring-2 ring-inset ring-primary' : ''}`}
               >
                 {/* Unread Indicator */}
                 <div className="mt-2 flex h-2 w-2 shrink-0 items-center justify-center">
@@ -198,6 +258,29 @@ export function FeedDetailPage() {
           })}
         </div>
       )}
+      {/* Suggested Feeds */}
+      {suggestedFeeds.length > 0 && (
+        <div className="mt-10">
+          <h2 className="mb-3 text-base font-semibold text-foreground">Suggested Feeds</h2>
+          <div className="divide-y divide-border rounded-lg border border-border bg-card">
+            {suggestedFeeds.map((sf) => (
+              <div key={sf.url} className="flex items-center justify-between gap-3 px-4 py-3">
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium text-card-foreground">{sf.title}</p>
+                  <p className="truncate text-xs text-muted-foreground">{sf.url}</p>
+                </div>
+                <button
+                  onClick={() => handleSubscribeSuggested(sf.url)}
+                  disabled={subscribingUrl === sf.url}
+                  className="shrink-0 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+                >
+                  {subscribingUrl === sf.url ? 'Subscribing…' : 'Subscribe'}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/pages/FeedsPage.tsx b/src/pages/FeedsPage.tsx
index fce9686..4a06c91 100644
--- a/src/pages/FeedsPage.tsx
+++ b/src/pages/FeedsPage.tsx
@@ -13,6 +13,7 @@ import { useStore } from '@hooks/useStore';
 import { storage } from '@lib/storage';
 import { syncService } from '@services/syncService';
 import { AddFeedDialog } from '@components/AddFeedDialog/AddFeedDialog';
+import { FeedCardSkeleton } from '@components/Common/Skeleton';
 import type { Article } from '@models/Feed';
 
 export function FeedsPage() {
@@ -186,8 +187,10 @@ export function FeedsPage() {
 
       {/* Loading */}
       {isLoading && !feeds.length && (
-        <div className="flex items-center justify-center py-16">
-          <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
+        <div className="space-y-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <FeedCardSkeleton key={i} />
+          ))}
         </div>
       )}
 
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index 49a2efc..99dba50 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -1,15 +1,20 @@
 /**
  * Search Page
  * Secondary page with back button, search input, and results
- * Searches across feed titles and article titles/summaries
+ * Searches across feed titles and article titles/summaries with advanced filters
  */
 
-import { useState, useCallback, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Search as SearchIcon, Rss, FileText } from 'lucide-react';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { ArrowLeft, Search as SearchIcon, Rss, FileText, SlidersHorizontal, X } from 'lucide-react';
 import { storage } from '@lib/storage';
 import type { Feed, Article } from '@models/Feed';
 
+const MS_PER_DAY = 86_400_000;
+
+type DateFilter = 'all' | 'today' | '7days' | '30days';
+type ReadStatus = 'all' | 'unread' | 'read';
+
 interface SearchResults {
   feeds: Feed[];
   articles: (Article & { feedTitle?: string })[];
@@ -17,11 +22,59 @@ interface SearchResults {
 
 export function SearchPage() {
   const navigate = useNavigate();
-  const [query, setQuery] = useState('');
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [query, setQuery] = useState(() => searchParams.get('q') ?? '');
+  const [showFilters, setShowFilters] = useState(false);
+  const [feedFilter, setFeedFilter] = useState<string[]>(() =>
+    searchParams.getAll('feed')
+  );
+  const [dateFilter, setDateFilter] = useState<DateFilter>(
+    () => (searchParams.get('date') as DateFilter) ?? 'all'
+  );
+  const [readStatus, setReadStatus] = useState<ReadStatus>(
+    () => (searchParams.get('read') as ReadStatus) ?? 'all'
+  );
+  const [starredOnly, setStarredOnly] = useState(() => searchParams.get('starred') === '1');
+
+  const [allFeeds, setAllFeeds] = useState<Feed[]>([]);
   const [results, setResults] = useState<SearchResults>({ feeds: [], articles: [] });
   const [hasSearched, setHasSearched] = useState(false);
 
-  const performSearch = useCallback(async (searchQuery: string) => {
+  // Load all feeds once for the filter list
+  useEffect(() => {
+    storage.init().catch(() => {}).then(() =>
+      storage.getAll('feeds').then((feeds) => setAllFeeds(feeds.filter((f) => !f.deletedAt)))
+    );
+  }, []);
+
+  // Sync state → URL params
+  useEffect(() => {
+    const params = new URLSearchParams();
+    if (query) params.set('q', query);
+    feedFilter.forEach((id) => params.append('feed', id));
+    if (dateFilter !== 'all') params.set('date', dateFilter);
+    if (readStatus !== 'all') params.set('read', readStatus);
+    if (starredOnly) params.set('starred', '1');
+    setSearchParams(params, { replace: true });
+  }, [query, feedFilter, dateFilter, readStatus, starredOnly, setSearchParams]);
+
+  const hasActiveFilters = feedFilter.length > 0 || dateFilter !== 'all' || readStatus !== 'all' || starredOnly;
+
+  const clearFilters = useCallback(() => {
+    setFeedFilter([]);
+    setDateFilter('all');
+    setReadStatus('all');
+    setStarredOnly(false);
+  }, []);
+
+  const performSearch = useCallback(async (
+    searchQuery: string,
+    feeds: string[],
+    date: DateFilter,
+    read: ReadStatus,
+    starred: boolean,
+  ) => {
     if (!searchQuery.trim()) {
       setResults({ feeds: [], articles: [] });
       setHasSearched(false);
@@ -34,28 +87,39 @@ export function SearchPage() {
     try {
       await storage.init().catch(() => {});
 
-      // Search feeds
-      const allFeeds = (await storage.getAll('feeds')).filter(f => !f.deletedAt);
-      const matchedFeeds = allFeeds.filter(
+      const allFeedsData = (await storage.getAll('feeds')).filter((f) => !f.deletedAt);
+      const matchedFeeds = allFeedsData.filter(
         (f) =>
           f.title.toLowerCase().includes(q) ||
           f.description?.toLowerCase().includes(q) ||
           f.url.toLowerCase().includes(q)
       );
 
-      // Search articles
-      const allArticles = (await storage.getAll('articles')).filter(a => !a.deletedAt);
+      const allArticles = (await storage.getAll('articles')).filter((a) => !a.deletedAt);
+      const now = Date.now();
+      const feedMap = new Map(allFeedsData.map((f) => [f.id, f.title]));
+
       const matchedArticles = allArticles
-        .filter(
-          (a) =>
-            a.title.toLowerCase().includes(q) ||
-            a.summary?.toLowerCase().includes(q)
-        )
-        .slice(0, 50); // Limit results
-
-      // Attach feed titles to articles
-      const feedMap = new Map(allFeeds.map(f => [f.id, f.title]));
-      const articlesWithFeedTitle = matchedArticles.map(a => ({
+        .filter((a) => a.title.toLowerCase().includes(q) || a.summary?.toLowerCase().includes(q))
+        .filter((a) => (feeds.length === 0 ? true : feeds.includes(a.feedId)))
+        .filter((a) => {
+          if (date === 'all') return true;
+          const ms = now - new Date(a.publishedAt).getTime();
+          if (date === 'today') return ms < MS_PER_DAY;
+          if (date === '7days') return ms < 7 * MS_PER_DAY;
+          if (date === '30days') return ms < 30 * MS_PER_DAY;
+          return true;
+        })
+        .filter((a) => {
+          if (read === 'all') return true;
+          if (read === 'unread') return !a.readAt;
+          if (read === 'read') return !!a.readAt;
+          return true;
+        })
+        .filter((a) => (starred ? a.isFavorite : true))
+        .slice(0, 50);
+
+      const articlesWithFeedTitle = matchedArticles.map((a) => ({
         ...a,
         feedTitle: feedMap.get(a.feedId),
       }));
@@ -66,18 +130,31 @@ export function SearchPage() {
     }
   }, []);
 
-  // Debounced search
+  // Debounced search with filters
   useEffect(() => {
     const timer = setTimeout(() => {
-      performSearch(query);
+      performSearch(query, feedFilter, dateFilter, readStatus, starredOnly);
     }, 300);
     return () => clearTimeout(timer);
-  }, [query, performSearch]);
+  }, [query, feedFilter, dateFilter, readStatus, starredOnly, performSearch]);
+
+  const DATE_OPTIONS: { label: string; value: DateFilter }[] = useMemo(() => [
+    { label: 'All', value: 'all' },
+    { label: 'Today', value: 'today' },
+    { label: '7 days', value: '7days' },
+    { label: '30 days', value: '30days' },
+  ], []);
+
+  const READ_OPTIONS: { label: string; value: ReadStatus }[] = useMemo(() => [
+    { label: 'All', value: 'all' },
+    { label: 'Unread', value: 'unread' },
+    { label: 'Read', value: 'read' },
+  ], []);
 
   return (
     <div className="mx-auto max-w-3xl">
       {/* Search Header */}
-      <div className="mb-6 flex items-center gap-3">
+      <div className="mb-4 flex items-center gap-3">
         <button
           onClick={() => navigate(-1)}
           className="shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
@@ -96,8 +173,107 @@ export function SearchPage() {
             autoFocus
           />
         </div>
+        <button
+          onClick={() => setShowFilters((v) => !v)}
+          className={`shrink-0 rounded-md p-2 transition-colors hover:bg-accent ${hasActiveFilters ? 'text-primary' : 'text-muted-foreground hover:text-accent-foreground'}`}
+          aria-label="Toggle filters"
+          title="Filters"
+        >
+          <SlidersHorizontal className="h-5 w-5" />
+        </button>
       </div>
 
+      {/* Filter Bar */}
+      {showFilters && (
+        <div className="mb-4 rounded-lg border border-border bg-card p-4 space-y-4">
+          {/* Feed filter */}
+          {allFeeds.length > 0 && (
+            <div>
+              <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Feeds</p>
+              <div className="flex flex-wrap gap-2">
+                {allFeeds.map((feed) => (
+                  <label key={feed.id} className="flex items-center gap-1.5 text-sm cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={feedFilter.includes(feed.id)}
+                      onChange={(e) =>
+                        setFeedFilter((prev) =>
+                          e.target.checked ? [...prev, feed.id] : prev.filter((id) => id !== feed.id)
+                        )
+                      }
+                      className="h-3.5 w-3.5 rounded border-border accent-primary"
+                    />
+                    <span className="text-card-foreground">{feed.title}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Date filter */}
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Date</p>
+            <div className="flex gap-2 flex-wrap">
+              {DATE_OPTIONS.map(({ label, value }) => (
+                <button
+                  key={value}
+                  onClick={() => setDateFilter(value)}
+                  className={`rounded-md px-3 py-1 text-sm transition-colors ${
+                    dateFilter === value
+                      ? 'bg-primary text-primary-foreground'
+                      : 'border border-border bg-secondary text-secondary-foreground hover:bg-accent'
+                  }`}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Read status filter */}
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Status</p>
+            <div className="flex gap-2 flex-wrap">
+              {READ_OPTIONS.map(({ label, value }) => (
+                <button
+                  key={value}
+                  onClick={() => setReadStatus(value)}
+                  className={`rounded-md px-3 py-1 text-sm transition-colors ${
+                    readStatus === value
+                      ? 'bg-primary text-primary-foreground'
+                      : 'border border-border bg-secondary text-secondary-foreground hover:bg-accent'
+                  }`}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Starred toggle + clear */}
+          <div className="flex items-center justify-between">
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <input
+                type="checkbox"
+                checked={starredOnly}
+                onChange={(e) => setStarredOnly(e.target.checked)}
+                className="h-3.5 w-3.5 rounded border-border accent-primary"
+              />
+              <span className="text-card-foreground">Starred only</span>
+            </label>
+            {hasActiveFilters && (
+              <button
+                onClick={clearFilters}
+                className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+              >
+                <X className="h-3 w-3" />
+                Clear filters
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Results */}
       {hasSearched && results.feeds.length === 0 && results.articles.length === 0 && (
         <div className="flex flex-col items-center justify-center py-16 text-center">
@@ -171,3 +347,4 @@ export function SearchPage() {
     </div>
   );
 }
+
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 34bd1a1..366902b 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -18,12 +18,39 @@ const DEFAULT_SETTINGS: UserSettings = {
   enableBackgroundSync: true,
 };
 
+const SYNC_CONFIG_KEY = 'rss-reader-sync-config';
+const NEWSLETTER_ID_KEY = 'rss-reader-newsletter-id';
+
+function getOrCreateNewsletterId(): string {
+  let id = localStorage.getItem(NEWSLETTER_ID_KEY);
+  if (!id) {
+    id = crypto.randomUUID();
+    localStorage.setItem(NEWSLETTER_ID_KEY, id);
+  }
+  return id;
+}
+
+interface SyncConfig {
+  enabled: boolean;
+  serverUrl: string;
+  apiKey: string;
+}
+
 export default function Settings() {
   const { t } = useTranslation('settings');
   const [settings, setSettings] = useState<UserSettings>(DEFAULT_SETTINGS);
   const [isSaving, setIsSaving] = useState(false);
   const [saved, setSaved] = useState(false);
 
+  // Sync section state
+  const [syncConfig, setSyncConfig] = useState<SyncConfig>({ enabled: false, serverUrl: '', apiKey: '' });
+  const [syncToast, setSyncToast] = useState('');
+
+  // Newsletter section state
+  const [newsletterId] = useState(() => getOrCreateNewsletterId());
+  const [copied, setCopied] = useState(false);
+  const newsletterEmail = `${newsletterId}@newsletters.rss-reader.app`;
+
   // Load settings on mount
   useEffect(() => {
     const loadSettings = async () => {
@@ -33,6 +60,12 @@ export default function Settings() {
       }
     };
     loadSettings();
+
+    // Load sync config
+    const raw = localStorage.getItem(SYNC_CONFIG_KEY);
+    if (raw) {
+      try { setSyncConfig(JSON.parse(raw)); } catch { /* ignore */ }
+    }
   }, []);
 
   const handleRefreshIntervalChange = async (minutes: number) => {
@@ -178,6 +211,101 @@ export default function Settings() {
             </div>
           </div>
         </div>
+
+        {/* Sync Section */}
+        <div className="rounded-lg border border-border bg-card p-6">
+          <h2 className="mb-4 text-lg font-semibold text-card-foreground">Sync</h2>
+          <label className="flex items-center gap-2" htmlFor="enable-sync">
+            <input
+              id="enable-sync"
+              type="checkbox"
+              checked={syncConfig.enabled}
+              onChange={(e) => setSyncConfig((prev) => ({ ...prev, enabled: e.target.checked }))}
+              className="rounded border-border text-primary focus:ring-primary"
+            />
+            <span className="text-sm text-card-foreground">Enable sync</span>
+          </label>
+          {syncConfig.enabled && (
+            <div className="mt-4 space-y-3">
+              <div>
+                <label className="mb-1 block text-xs font-medium text-card-foreground" htmlFor="sync-server-url">
+                  Server URL
+                </label>
+                <input
+                  id="sync-server-url"
+                  type="url"
+                  value={syncConfig.serverUrl}
+                  onChange={(e) => setSyncConfig((prev) => ({ ...prev, serverUrl: e.target.value }))}
+                  placeholder="https://sync.example.com"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                />
+              </div>
+              <div>
+                <label className="mb-1 block text-xs font-medium text-card-foreground" htmlFor="sync-api-key">
+                  API Key
+                </label>
+                <input
+                  id="sync-api-key"
+                  type="password"
+                  value={syncConfig.apiKey}
+                  onChange={(e) => setSyncConfig((prev) => ({ ...prev, apiKey: e.target.value }))}
+                  placeholder="Your API key"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+                />
+              </div>
+            </div>
+          )}
+          <div className="mt-4 flex flex-wrap gap-2">
+            <button
+              onClick={() => {
+                localStorage.setItem(SYNC_CONFIG_KEY, JSON.stringify(syncConfig));
+                setSyncToast('Sync settings saved.');
+                setTimeout(() => setSyncToast(''), 2000);
+              }}
+              className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+            >
+              Save
+            </button>
+            <button
+              onClick={() => {
+                setSyncToast('Sync feature coming soon');
+                setTimeout(() => setSyncToast(''), 2000);
+              }}
+              className="rounded-md border border-border px-3 py-1.5 text-sm font-medium text-card-foreground hover:bg-accent"
+            >
+              Sync Now
+            </button>
+          </div>
+          {syncToast && (
+            <p className="mt-2 text-xs text-muted-foreground">{syncToast}</p>
+          )}
+        </div>
+
+        {/* Newsletter Section */}
+        <div className="rounded-lg border border-border bg-card p-6">
+          <h2 className="mb-4 text-lg font-semibold text-card-foreground">Newsletter</h2>
+          <p className="mb-3 text-sm text-muted-foreground">
+            Your unique forwarding address:
+          </p>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 truncate rounded-md border border-border bg-secondary px-3 py-2 text-sm text-secondary-foreground">
+              {newsletterEmail}
+            </code>
+            <button
+              onClick={() => {
+                navigator.clipboard.writeText(newsletterEmail).catch(() => {});
+                setCopied(true);
+                setTimeout(() => setCopied(false), 2000);
+              }}
+              className="shrink-0 rounded-md border border-border px-3 py-2 text-sm font-medium text-card-foreground hover:bg-accent"
+            >
+              {copied ? 'Copied!' : 'Copy address'}
+            </button>
+          </div>
+          <p className="mt-3 text-xs text-muted-foreground">
+            Forward newsletters to this address to read them here. Backend sync required.
+          </p>
+        </div>
       </div>
 
       {/* Save Indicator */}
diff --git a/src/utils/feedDiscovery.ts b/src/utils/feedDiscovery.ts
new file mode 100644
index 0000000..63ee4c8
--- /dev/null
+++ b/src/utils/feedDiscovery.ts
@@ -0,0 +1,32 @@
+/**
+ * Feed discovery utility
+ * Autodiscovers RSS/Atom feeds from a website URL by parsing <link rel="alternate"> tags.
+ */
+
+export async function discoverFeeds(websiteUrl: string): Promise<{ url: string; title: string }[]> {
+  try {
+    const response = await fetch(websiteUrl, { signal: AbortSignal.timeout(8000) });
+    if (!response.ok) return [];
+    const html = await response.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    const linkEls = doc.querySelectorAll(
+      'link[rel="alternate"][type="application/rss+xml"], link[rel="alternate"][type="application/atom+xml"]',
+    );
+    const results: { url: string; title: string }[] = [];
+    linkEls.forEach((el) => {
+      const href = el.getAttribute('href');
+      if (!href) return;
+      const title = el.getAttribute('title') || href;
+      try {
+        const url = new URL(href, websiteUrl).href;
+        results.push({ url, title });
+      } catch {
+        // skip invalid URLs
+      }
+    });
+    return results;
+  } catch {
+    return [];
+  }
+}
diff --git a/src/utils/readingTime.ts b/src/utils/readingTime.ts
new file mode 100644
index 0000000..e39888a
--- /dev/null
+++ b/src/utils/readingTime.ts
@@ -0,0 +1,27 @@
+/**
+ * Reading Time Estimation Utilities
+ */
+
+/**
+ * Calculate estimated reading time in minutes.
+ * Strips HTML tags, counts words at 200 wpm, minimum 1 minute.
+ */
+export function calculateReadingTime(html: string): number {
+  const text = html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
+  if (!text) return 1;
+  const words = text.split(' ').filter(Boolean).length;
+  return Math.max(1, Math.ceil(words / 200));
+}
+
+/**
+ * Format reading time as a human-readable string.
+ * @param minutes - estimated reading time in minutes
+ * @param lang - language code (e.g. 'zh', 'zh-CN'); defaults to English
+ */
+export function formatReadingTime(minutes: number, lang?: string): string {
+  const isChinese = lang && lang.startsWith('zh');
+  if (isChinese) {
+    return `${minutes} 分钟阅读`;
+  }
+  return `${minutes} min read`;
+}
diff --git a/tests/unit/readingTime.test.ts b/tests/unit/readingTime.test.ts
new file mode 100644
index 0000000..4927bf3
--- /dev/null
+++ b/tests/unit/readingTime.test.ts
@@ -0,0 +1,58 @@
+/**
+ * Unit tests for readingTime utilities
+ */
+
+import { describe, it, expect } from 'vitest';
+import { calculateReadingTime, formatReadingTime } from '@utils/readingTime';
+
+describe('calculateReadingTime', () => {
+  it('returns 1 for empty input', () => {
+    expect(calculateReadingTime('')).toBe(1);
+  });
+
+  it('returns 1 for whitespace-only input', () => {
+    expect(calculateReadingTime('   ')).toBe(1);
+  });
+
+  it('strips HTML tags before counting words', () => {
+    const html = '<p>Hello <strong>world</strong></p>';
+    expect(calculateReadingTime(html)).toBe(1);
+  });
+
+  it('returns 1 for exactly 200 words', () => {
+    const words = Array(200).fill('word').join(' ');
+    expect(calculateReadingTime(words)).toBe(1);
+  });
+
+  it('returns 2 for 201 words', () => {
+    const words = Array(201).fill('word').join(' ');
+    expect(calculateReadingTime(words)).toBe(2);
+  });
+
+  it('handles complex HTML with nested tags', () => {
+    const html = '<div><ul>' + Array(400).fill('<li>word</li>').join('') + '</ul></div>';
+    expect(calculateReadingTime(html)).toBe(2);
+  });
+});
+
+describe('formatReadingTime', () => {
+  it('returns English format by default', () => {
+    expect(formatReadingTime(5)).toBe('5 min read');
+  });
+
+  it('returns English format when lang is undefined', () => {
+    expect(formatReadingTime(3, undefined)).toBe('3 min read');
+  });
+
+  it('returns Chinese format for zh lang', () => {
+    expect(formatReadingTime(5, 'zh')).toBe('5 分钟阅读');
+  });
+
+  it('returns Chinese format for zh-CN lang', () => {
+    expect(formatReadingTime(5, 'zh-CN')).toBe('5 分钟阅读');
+  });
+
+  it('returns English format for en lang', () => {
+    expect(formatReadingTime(10, 'en')).toBe('10 min read');
+  });
+});