diff --git a/web/package-lock.json b/web/package-lock.json
index 390c429..5f67d05 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,7 +8,7 @@
       "name": "search",
       "version": "0.1.0",
       "dependencies": {
-        "@next/third-parties": "^14.1.4",
+        "@next/third-parties": "^14.0.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@tailwindcss/forms": "^0.5.7",
         "@upstash/ratelimit": "^1.0.0",
@@ -18,7 +18,7 @@
         "lucide-react": "^0.309.0",
         "mdast-util-from-markdown": "^2.0.0",
         "nanoid": "^5.0.4",
-        "next": "^14.1.4",
+        "next": "^14.0.4",
         "react": "^18",
         "react-dom": "^18",
         "react-markdown": "^9.0.1",
diff --git a/web/package.json b/web/package.json
index 57ddfd4..8e60d35 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,7 +11,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@next/third-parties": "^14.1.4",
+    "@next/third-parties": "^14.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@tailwindcss/forms": "^0.5.7",
     "@upstash/ratelimit": "^1.0.0",
@@ -21,7 +21,7 @@
     "lucide-react": "^0.309.0",
     "mdast-util-from-markdown": "^2.0.0",
     "nanoid": "^5.0.4",
-    "next": "^14.1.4",
+    "next": "^14.0.4",
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",
diff --git a/web/src/app/components/answer.tsx b/web/src/app/components/answer.tsx
index eb5244f..65015d1 100644
--- a/web/src/app/components/answer.tsx
+++ b/web/src/app/components/answer.tsx
@@ -9,6 +9,7 @@ import { Source } from "@/app/interfaces/source";
 import { BookOpenText } from "lucide-react";
 import { FC } from "react";
 import Markdown from "react-markdown";
+import Image from "next/image";
 
 export const Answer: FC<{ markdown: string; sources: Source[] }> = ({
   markdown,
@@ -51,11 +52,12 @@ export const Answer: FC<{ markdown: string; sources: Source[] }> = ({
                           <div className="flex gap-4">
                             {source.primaryImageOfPage?.thumbnailUrl && (
                               <div className="flex-none">
-                                <img
+                                <Image
                                   className="rounded h-16 w-16"
                                   width={source.primaryImageOfPage?.width}
                                   height={source.primaryImageOfPage?.height}
                                   src={source.primaryImageOfPage?.thumbnailUrl}
+                                  alt={source.url}
                                 />
                               </div>
                             )}
@@ -79,7 +81,7 @@ export const Answer: FC<{ markdown: string; sources: Source[] }> = ({
                               </div>
                             </div>
                             <div className="flex-none flex items-center relative">
-                              <img
+                              <Image
                                 className="h-3 w-3"
                                 alt={source.url}
                                 src={`https://www.google.com/s2/favicons?domain=${source.url}&sz=${16}`}
diff --git a/web/src/app/components/preset-query.tsx b/web/src/app/components/preset-query.tsx
index dbe188c..b686ba2 100644
--- a/web/src/app/components/preset-query.tsx
+++ b/web/src/app/components/preset-query.tsx
@@ -4,8 +4,7 @@ import Link from "next/link";
 import React, { FC, useMemo } from "react";
 
 export const PresetQuery: FC<{ query: string }> = ({ query }) => {
-  const rid = useMemo(() => nanoid(), [query]);
-
+  const rid = useMemo(() => nanoid(), []);
   return (
     <Link
       prefetch={false}
diff --git a/web/src/app/components/result.tsx b/web/src/app/components/result.tsx
index b6d86fb..f146f95 100644
--- a/web/src/app/components/result.tsx
+++ b/web/src/app/components/result.tsx
@@ -27,7 +27,7 @@ export const Result: FC<{ query: string; rid: string }> = ({ query, rid }) => {
     return () => {
       controller.abort();
     };
-  }, [query]);
+  }, [query, rid]);
   return (
     <div className="flex flex-col gap-8">
       <Answer markdown={markdown} sources={sources}></Answer>
diff --git a/web/src/app/components/sources.tsx b/web/src/app/components/sources.tsx
index 6e966d6..3ef7f6e 100644
--- a/web/src/app/components/sources.tsx
+++ b/web/src/app/components/sources.tsx
@@ -3,6 +3,7 @@ import { Wrapper } from "@/app/components/wrapper";
 import { Source } from "@/app/interfaces/source";
 import { BookText } from "lucide-react";
 import { FC } from "react";
+import Image from "next/image";
 
 const SourceItem: FC<{ source: Source; index: number }> = ({
   source,
@@ -26,7 +27,7 @@ const SourceItem: FC<{ source: Source; index: number }> = ({
           </div>
         </div>
         <div className="flex-none flex items-center">
-          <img
+          <Image
             className="h-3 w-3"
             alt={domain}
             src={`https://www.google.com/s2/favicons?domain=${domain}&sz=${16}`}
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 00a442c..f5d23db 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ReactNode } from "react";
-import { GoogleAnalytics } from '@next/third-parties/google';
+import { GoogleAnalytics } from "@next/third-parties/google";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +16,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
-      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS || ''} />
+      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS || ""} />
     </html>
   );
 }