diff --git a/images/empty.png b/images/empty.png
new file mode 100644
index 000000000..f16d1a43b
Binary files /dev/null and b/images/empty.png differ
diff --git a/src/App/App.js b/src/App/App.js
index 6c05459d2..a07bab59e 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -2,6 +2,7 @@ require('spatial-navigation-polyfill');
const React = require('react');
const { Router } = require('stremio-router');
const { Core, KeyboardNavigation, ServicesProvider, Shell } = require('stremio/services');
+const { NotFound } = require('stremio/routes');
const { ToastProvider } = require('stremio/common');
const CoreEventsToaster = require('./CoreEventsToaster');
const routerViewsConfig = require('./routerViewsConfig');
@@ -9,7 +10,7 @@ const styles = require('./styles');
const App = () => {
const onPathNotMatch = React.useCallback(() => {
- window.history.back();
+ return NotFound;
}, []);
const services = React.useMemo(() => ({
keyboardNavigation: new KeyboardNavigation(),
diff --git a/src/routes/NotFound/NotFound.js b/src/routes/NotFound/NotFound.js
new file mode 100644
index 000000000..0c0f93db6
--- /dev/null
+++ b/src/routes/NotFound/NotFound.js
@@ -0,0 +1,26 @@
+const React = require('react');
+const { Image, HorizontalNavBar } = require('stremio/common');
+const styles = require('./styles');
+
+const NotFound = () => {
+ return (
+
+ );
+};
+
+module.exports = NotFound;
diff --git a/src/routes/NotFound/index.js b/src/routes/NotFound/index.js
new file mode 100644
index 000000000..8876c097b
--- /dev/null
+++ b/src/routes/NotFound/index.js
@@ -0,0 +1,3 @@
+const NotFound = require('./NotFound');
+
+module.exports = NotFound;
diff --git a/src/routes/NotFound/styles.less b/src/routes/NotFound/styles.less
new file mode 100644
index 000000000..b60065a51
--- /dev/null
+++ b/src/routes/NotFound/styles.less
@@ -0,0 +1,39 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
+.not-found-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ background-color: @color-background-dark2;
+
+ .nav-bar {
+ flex: none;
+ }
+
+ .not-found-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .not-found-image {
+ flex: none;
+ width: 12rem;
+ height: 12rem;
+ margin-bottom: 1rem;
+ object-fit: contain;
+ object-position: center;
+ }
+
+ .not-found-label {
+ flex: none;
+ font-size: 2.5rem;
+ max-height: 3.6em;
+ max-width: 60%;
+ text-align: center;
+ color: @color-secondaryvariant2-light1-90;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/routes/index.js b/src/routes/index.js
index e819535bb..6872e6a4c 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -3,6 +3,7 @@ const Board = require('./Board');
const Discover = require('./Discover');
const Library = require('./Library');
const MetaDetails = require('./MetaDetails');
+const NotFound = require('./NotFound');
const Search = require('./Search');
const Settings = require('./Settings');
const Player = require('./Player');
@@ -14,6 +15,7 @@ module.exports = {
Discover,
Library,
MetaDetails,
+ NotFound,
Search,
Settings,
Player,