UI: Design a 404 page for default redirects

src/Routes.js

@@ -4,6 +4,7 @@ import Login from './components/Login'
 import Register from './components/Register'
 import Dashboard from './components/Dashboard'
 import Forms from './components/Forms'
+import ErrorPage from './components/ErrorPage'
 import Submission from './components/Submission'
 import Questions from './components/Questions'
 import { login, register, dashboard, forms, upload, submission, urlBaseFrontend } from './urls'
@@ -23,7 +24,7 @@ export default class Routes extends Component {
                 <AuthRoute path={login()} component={Login} />
                 <AuthRoute path={register()} component={Register} />
                 <Route path={upload()} component={Upload} />
-                <Route render={() => <Redirect to='/' />} />    
+                <AuthRoute component={ErrorPage} />  
             </Switch>
             </>
         )

src/components/ErrorPage.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import './../styles/ErrorPage.css'
+import './../styles/App.css'
+import { Header } from 'semantic-ui-react';
+
+class ErrorPage extends Component {
+  render() {
+    return (
+      <div className="errorPage">
+        <div className="errorPage_content">
+          <Header
+            as='h1'
+            content='404'
+            style={{
+              color: '#2185D0',
+              fontSize: '10vw',
+              fontWeight: 'bolder',
+              lineHeight: '1em',
+              textTransform: 'uppercase',
+            }}
+          />
+          <Header
+            as='h4'
+            content='Oops! Page Not Found'
+            style={{
+              fontSize: '2em',
+              marginBottom: '20px',
+              textTransform: 'uppercase',
+              maxWidth: '600px',
+              color: '#0d0d0d',
+            }}
+          />
+          <p>Sorry, the page you were looking for doesn't exist. If you think something is wrong, try again.</p>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ErrorPage

src/styles/ErrorPage.css

@@ -0,0 +1,26 @@
+* {
+   margin: 0;
+   padding: 0;
+}
+
+.errorPage {
+    position: absolute;
+    top: 15%;
+    left: 17%;
+    right: 17%;
+    color: whitesmoke;
+    bottom: 20%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.errorPage_content {
+    max-width: 600px;
+    text-align: center;
+}
+
+.errorPage_content p {
+    font-size: 1.4em;
+    color: gray;
+}