src/pages/404.tsx

@@ -1,17 +1,27 @@
-import { Link } from 'react-router-dom'
+import { Link, useRouteError } from 'react-router-dom'
 import { appRoutes } from 'routes'
 
-export const NotFoundPage = () => {
+interface NotFoundPageProps {
+  title: string
+  message: string
+}
+
+export const NotFoundPage = ({
+  title = 'Page not found',
+  message = "The page you're attempting to visit doesn't exist"
+}: Partial<NotFoundPageProps>) => {
+  const error = useRouteError() as Partial<NotFoundPageProps>
+
   return (
     <div className='InnerBodyMain'>
       <div className='ContainerMain'>
         <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
           <div className='IBMSecMain IBMSMListWrapper'>
             <div className='IBMSMTitleMain'>
-              <h2 className='IBMSMTitleMainHeading'>Page not found</h2>
+              <h2 className='IBMSMTitleMainHeading'>{error?.title || title}</h2>
             </div>
             <div>
-              <p>The page you're attempting to visit doesn't exist</p>
+              <p>{error?.message || message}</p>
             </div>
             <div className='IBMSMAction'>
               <Link