[Add] Not found page

frontend/src/component/Main.js

@@ -10,7 +10,7 @@ import Home from './Home';
 import Add from './link/Add';
 import MainLink from './link/Main';
 import Navbar from './utils/Navbar';
-
+import NotFound from './utils/NotFound';
 
 export default function Main() {
     const isAuthenticated = useSelector(state => state.userState.isAuthenticated)
@@ -33,6 +33,8 @@ export default function Main() {
                     <Route exact path="/add" component={Add} />
 
                     <Route exact path="/link/:email" component={MainLink} />
+
+                    <Route component={NotFound}/>
                 </Switch>
             </div>
         </Router>

frontend/src/component/utils/NotFound.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@material-ui/core";
+
+const NotFound = () => {
+    return (
+        <div className='background-grad w-100 overflow-hidden' style={{ height: 'calc(100vh - 64px)' }}>
+            <div className="container mt-3">
+                <div className="row">
+                    <di className='col-md-6'>
+                        <h1>404.</h1>
+                        <h3>This page does not exists</h3>
+                        <p>Looks like you're lost! please go to the homepage.</p>
+                        <Link to='/'><Button>Home</Button></Link>
+                    </di>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default NotFound