diff --git a/src/404Page.jsx b/src/404Page.jsx
new file mode 100644
index 0000000..35dd128
--- /dev/null
+++ b/src/404Page.jsx
@@ -0,0 +1,28 @@
+import { h, render, Component } from "preact";
+import {
+  Container,
+  Card,
+  CardContent,
+  Typography,
+} from "@material-ui/core";
+
+class LostPage extends Component {
+  render() {
+    return (
+      <span>
+        <Container maxWidth="sm" >
+          <Card>
+            <CardContent>
+              <Typography variant="h1"> Error 404</Typography>
+              <Typography variant="body1">
+                There is no content here...
+              </Typography>
+            </CardContent>
+          </Card>
+        </Container>
+      </span>
+    );
+  }
+}
+
+export default LostPage;
diff --git a/src/index.jsx b/src/index.jsx
index 5bc56c0..d0f8f39 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -13,12 +13,17 @@ class App extends Component {
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <Router>
-          <Home path="/" />
-          <AsyncRoute
-            path="/contact"
-            getComponent={() =>
-              import("./Contact.jsx").then((module) => module.default)
-            }
+          <AsyncRoute path="/" getComponent={() =>
+            import("./Home").then((module) => module.default)
+          }
+          />
+          <AsyncRoute path="/contact" getComponent={() =>
+            import("./Contact").then((module) => module.default)
+          }
+          />
+          <AsyncRoute default getComponent={() =>
+            import("./404Page").then((module) => module.default)
+          }
           />
         </Router>
       </ThemeProvider>