Added basic styling to not found page as well as a helpful error message

app/not-found.tsx

@@ -1,18 +1,20 @@
 import Link from 'next/link'
+import Image from 'next/image';
+import defImg from './not-found-pic.jpg';
+import "./notfound.css";
 
 export default function NotFound() {
     return (
-        <div>
-            <h2>TODO:Not_Found</h2>
-            <Link href="/">Return Home</Link>
-            <main className="testing">
-                <div>
-                    <h1>Page not found</h1>
-                    <h2>We aplogize for the inconvenience</h2>
 
+        <main className="testing">
+                <Image src={defImg} width={200} height={200} alt="flower" />
+                <div className="text">
+                    <h1 className="error">404 - Plant Not Found</h1>
+                    <p>This is most likely do to our API not returning any reults. This flower does not exist in our APIs database. Please try another search or another image. We apologies for the inconvenience this may have caused.</p>
+                    <button className="return"><Link className="link" href="/">Return Home</Link></button>
                 </div>
-            </main>
-        </div>
+        </main>
+
 
 
     )

app/notfound.css

@@ -1,3 +1,26 @@
-background{
-    background-color:wheat;
-}
+.testing {
+    height: 95vh;
+    display: flex;
+    justify-content: center;
+    align-items:start;
+    padding-top: 50px;
+    margin-left: 20px;
+}
+
+.return {
+    background-color: rgb(0, 102, 255);
+    border-radius: 20px;
+}
+
+.link {
+    color: white;
+    text-decoration: none;
+}
+
+.link:hover {
+    color: rgb(212, 188, 188);
+}
+
+.text {
+    margin-left: 20px;
+}