replaced <img> with <Image>

app/ui/PageFooter.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
@@ -6,7 +7,7 @@ export const PageFooter: React.FC = () =>
         <footer className="footer mx-auto max-w-2xl px-4 py-10">
             <div>
                 <div className="flex items-center gap-2">
-                    <img src="/icon4.png"></img>
+                    <Image src="/icon4.png" alt="logo"></Image>
                     <div className="font-title inline-flex text-3xl font-black">Bills Tracker</div>
                 </div>
                 <p className="text-base-content/70 mb-5">Web app for tracking home utility bills</p>

app/ui/PageHeader.tsx

@@ -1,6 +1,7 @@
+import Image from "next/image";
 import Link from "next/link";
 
 export const PageHeader = () =>
 <div className="navbar bg-base-100 mb-6">
-    <Link className="btn btn-ghost text-xl" href="/"><img src="/icon3.png"></img> Utility Bills Tracker</Link>
+    <Link className="btn btn-ghost text-xl" href="/"><Image src="/icon3.png" alt="logo" /> Utility Bills Tracker</Link>
 </div>