diff --git a/src/app/components/SearchBar.tsx b/src/app/components/SearchBar.tsx
index 3bec13a..628e7bc 100644
--- a/src/app/components/SearchBar.tsx
+++ b/src/app/components/SearchBar.tsx
@@ -1,12 +1,13 @@
 'use client'
-import { navigate } from '@/app/actions'
+import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 
 export default function SearchBar() {
   const [searchInput, setSearchInput] = useState('')
+  const router = useRouter()
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    navigate(`/search?q=${searchInput.split(' ').join('+')}`)
+    router.push(`/search?q=${encodeURIComponent(searchInput)}`)
   }
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -15,7 +16,7 @@ export default function SearchBar() {
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      navigate(`/search?q=${encodeURIComponent(searchInput)}`)
+      router.push(`/search?q=${encodeURIComponent(searchInput)}`)
     }
   }
 
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index c4d61b6..b33404b 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -5,12 +5,18 @@ import { Topics, Authors } from '@/app/components/DataDisplay'
 import { Status, ItemBadge } from '@/app/components/Badges'
 import { epoch2datestring } from '../utils/epoch2datestring'
 import searchDocs, { CustomSearchResult } from '@/app/utils/searchDocs'
-import { navigate } from '@/app/actions'
 import { useSuspenseQuery } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
 
-const SearchResult = ({ result }: { result: CustomSearchResult }) => {
+const SearchResult = ({
+  result,
+  redirect,
+}: {
+  result: CustomSearchResult
+  redirect: (input: string) => void
+}) => {
   const { manifest, abstract, id } = result
   const { title, authors, topics, dates, status, type } = manifest
 
@@ -22,7 +28,7 @@ const SearchResult = ({ result }: { result: CustomSearchResult }) => {
       }
       target = target.parentNode as HTMLElement
     }
-    navigate(`/document/view/${id}`)
+    redirect(`/document/view/${id}`)
   }
 
   return (
@@ -52,6 +58,7 @@ const SearchResult = ({ result }: { result: CustomSearchResult }) => {
 }
 
 export default function Page() {
+  const router = useRouter()
   const searchParams = useSearchParams()
   const search = decodeURIComponent(searchParams.get('q') as string)
 
@@ -64,6 +71,10 @@ export default function Page() {
   })
   if (error) throw error
 
+  const handleRedirect = (input: string) => {
+    router.push(input)
+  }
+
   return (
     <div className='max-w-4xl mx-auto'>
       <h1 className='text-xl mb-4 p-2'>
@@ -75,7 +86,13 @@ export default function Page() {
       {data.length === 0 ? (
         <p className='text-lg px-2'>No results found.</p>
       ) : (
-        data.map((result) => <SearchResult key={result.id} result={result} />)
+        data.map((result) => (
+          <SearchResult
+            key={result.id}
+            result={result}
+            redirect={handleRedirect}
+          />
+        ))
       )}
     </div>
   )