error page

client/src/app/error.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Error({ error }: { error: Error }) {
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <pre>{error.message}</pre>
+    </div>
+  );
+}

client/src/app/not-found.tsx

@@ -1,11 +1,20 @@
 import Link from 'next/link';
 
+import { Button } from '@/components/ui/button';
+
 export default function NotFound() {
   return (
     <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <h2>Not Found</h2>
-      <p>Could not find requested resource</p>
-      <Link href="/projects">Return Home</Link>
+      <h2 className="mb-24 text-[200px] font-extrabold leading-10 text-green-400">404</h2>
+      <h3 className="mb-4 text-[52px]">Page not found</h3>
+      <p className="mb-6 text-base font-light">
+        It looks like the links is broken or the page has been removed.
+      </p>
+      <Link href="/projects">
+        <Button variant="primary" size="base">
+          Go to home page
+        </Button>
+      </Link>
     </div>
   );
 }

client/src/containers/datasets/layers/projects/layer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Layer, Source } from 'react-map-gl';
 
 import { GeoJSONSourceRaw, GeoJSONSourceOptions, CircleLayer } from 'mapbox-gl';