Create 404 page

frontend/src/components/buttons/ReturnHomeButton.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function ReturnHomeButton({ onClick }) {
+	return (
+		<button
+			type="button"
+			className="bg-mv-green rounded-[5px] shadow-searchBarShadow w-full flex items-center justify-center px-[59px] py-[10px]"
+			onClick={onClick}
+		>
+			<div className="flex items-center justify-center">
+				<p className="text-mv-white text-sm font-medium">Return home</p>
+			</div>
+		</button>
+	);
+}

frontend/src/pages/NotFoundPage.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import logo from '../assets/microvan_logo.svg';
+import NavBar from '../components/navBars/NavBar';
+import ReturnHomeButton from '../components/buttons/ReturnHomeButton';
+
+export default function NotFoundPage() {
+	const navigate = useNavigate();
+
+	const handleContactUs = (e) => {
+		e.preventDefault();
+		navigate('/contact');
+	};
+
+	const handleGoHome = (e) => {
+		e.preventDefault();
+		navigate('/');
+	};
+
+	return (
+		<div className="flex flex-col items-center min-h-screen bg-mv-white">
+			<NavBar />
+			<div className="flex flex-col items-center mt-[138px]">
+				<img src={logo} alt="Microvan logo" className="w-[168px] h-[168px]" />
+				<h1 className="mt-[20px] text-not-found-header text-[64px] font-medium">
+					404
+				</h1>
+				<p className="text-center mt-4">
+					Sorry, the page you&apos;re looking for doesn&apos;t
+					<br />
+					exist. Try{' '}
+					<a
+						href="/contact"
+						onClick={handleContactUs}
+						className="underline text-mv-green hover:cursor-pointer"
+					>
+						contacting us
+					</a>{' '}
+					for help and assistance.
+				</p>
+				<div className="mt-[20px]">
+					<ReturnHomeButton onClick={handleGoHome} />
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/routers/Routers.jsx

@@ -11,6 +11,7 @@ import BidderEmailVerificationPage from '../pages/auth/bidders/BidderEmailVerifi
 import BidderEmailVerifiedPage from '../pages/auth/bidders/BidderEmailVerifiedPage';
 import VehicleDetailsPage from '../pages/VehicleDetailsPage';
 import ProfilePage from '../pages/ProfilePage';
+import NotFoundPage from '../pages/NotFoundPage';
 
 const router = createBrowserRouter([
 	{ path: '/', element: <HomePage /> },
@@ -25,6 +26,7 @@ const router = createBrowserRouter([
 	{ path: '/register/verified', element: <BidderEmailVerifiedPage /> },
 	{ path: '/profile', element: <ProfilePage /> },
 	{ path: '/history', element: <div>History!!!!!</div> },
+	{ path: '*', element: <NotFoundPage /> },
 ]);
 
 export default router;

frontend/tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
 			'border-dark-grey': '#B7B7B7',
 			'onboarding-placeholder': '#D2D2D2',
 			'icon-grey': '#7B7B7B',
+			'not-found-header': '#1E1E1E',
 		},
 		extend: {
 			fontFamily: {