diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx
new file mode 100644
index 0000000..bb5e975
--- /dev/null
+++ b/frontend/src/pages/Search.jsx
@@ -0,0 +1,257 @@
+import { useState, useEffect } from 'react'
+import { Search as SearchIcon, Sparkles, Clock, ExternalLink } from 'lucide-react'
+import { api } from '../api'
+
+export default function Search({ user, initialQuery = '' }) {
+ const [query, setQuery] = useState(initialQuery)
+ const [results, setResults] = useState([])
+ const [loading, setLoading] = useState(false)
+ const [searched, setSearched] = useState(false)
+ const [error, setError] = useState(null)
+
+ // Auto-search if initialQuery is provided
+ useEffect(() => {
+ if (initialQuery && initialQuery.trim()) {
+ setQuery(initialQuery)
+ performSearch(initialQuery)
+ }
+ }, [initialQuery])
+
+ const performSearch = async (searchQuery) => {
+ if (!searchQuery.trim()) {
+ setError('Please enter a search query')
+ return
+ }
+
+ if (!user?.user_id) {
+ setError('You must be logged in to search')
+ return
+ }
+
+ setLoading(true)
+ setError(null)
+ setSearched(true)
+
+ try {
+ const response = await api.searchRAG(searchQuery.trim(), user.user_id, 1, 50)
+ setResults(response.results || [])
+ } catch (err) {
+ setError(err.message || 'Search failed')
+ setResults([])
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleSearch = async (e) => {
+ e.preventDefault()
+ performSearch(query)
+ }
+
+ const formatTime = (seconds) => {
+ const mins = Math.floor(seconds / 60)
+ const secs = Math.floor(seconds % 60)
+ return `${mins}:${secs.toString().padStart(2, '0')}`
+ }
+
+ const highlightMatch = (text, searchQuery) => {
+ if (!searchQuery) return text
+
+ const regex = new RegExp(`(${searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
+ const parts = text.split(regex)
+
+ return parts.map((part, i) =>
+ regex.test(part) ? (
+
+ {part}
+
+ ) : part
+ )
+ }
+
+ return (
+
+ {/* Search Header */}
+
+
+
+
AI Search
+
+
+ Search through all your archived transcripts using natural language
+
+
+
+ {/* Search Bar */}
+
+
+ {/* Error Message */}
+ {error && (
+
+ )}
+
+ {/* Loading State */}
+ {loading && (
+
+
+
Searching through your archives...
+
+ )}
+
+ {/* Results */}
+ {!loading && searched && (
+ <>
+ {/* Results Header */}
+
+
+ {results.length > 0 ? (
+ <>
+ Found {results.length} result
+ {results.length !== 1 ? 's' : ''} for "{query}"
+
+ ) : (
+ <>No results found for "{query}"
+ )}
+
+
+
+ {/* Results List */}
+ {results.length > 0 ? (
+
+ {results.map((result, index) => (
+
+ {/* Post Title */}
+
+
+
+ {result.audio_posts?.title || 'Untitled Post'}
+
+
+
+
+ {formatTime(result.start_sec)} - {formatTime(result.end_sec)}
+
+ {result.audio_posts?.created_at && (
+ <>
+ •
+
+ {new Date(result.audio_posts.created_at).toLocaleDateString()}
+
+
+ )}
+ {result.confidence && (
+ <>
+ •
+
+ {Math.round(result.confidence * 100)}% confidence
+
+
+ )}
+
+
+
+ View Post
+
+
+
+
+ {/* Transcript Text with Highlighting */}
+
+
+ {highlightMatch(result.text, query)}
+
+
+
+ {/* Timestamp Badge */}
+
+
+ Segment {index + 1}
+
+
+ Duration: {Math.round(result.end_sec - result.start_sec)}s
+
+
+
+ ))}
+
+ ) : (
+ searched && !loading && (
+
+
+
+ No Results Found
+
+
+ Try different keywords or check your spelling
+
+
+
Search Tips:
+
+ - • Use specific keywords from your archives
+ - • Try shorter search phrases
+ - • Search for topics, names, or places
+
+
+
+ )
+ )}
+
+ )}
+
+ {/* Empty State */}
+ {!searched && !loading && (
+
+
+
+ Start Searching Your Archives
+
+
+ Enter a query above to search through all your transcribed audio
+
+
+
Example searches:
+
+ {['WWII', 'family history', 'grandmother', 'traditions', 'childhood'].map((example) => (
+
+ ))}
+
+
+
+ )}
+
+ )}