diff --git a/.styleguide b/.styleguide
index cf50b8839..5b6275ca1 100644
--- a/.styleguide
+++ b/.styleguide
@@ -16,6 +16,7 @@ modifiableFileExclude {
   \.gif$
   \.so$
   \.dll$
+  \.webp$
 }
 
 includeProject {
diff --git a/photon-client/src/assets/NotFound.webp b/photon-client/src/assets/NotFound.webp
new file mode 100644
index 000000000..6de46904d
Binary files /dev/null and b/photon-client/src/assets/NotFound.webp differ
diff --git a/photon-client/src/router.js b/photon-client/src/router.js
index 0994cc0a7..70795dc74 100644
--- a/photon-client/src/router.js
+++ b/photon-client/src/router.js
@@ -1,33 +1,47 @@
 import Vue from 'vue'
-import Router from 'vue-router'
+import VueRouter from "vue-router";
+
 import Dashboard from "./views/PipelineView";
 import Cameras from "./views/CamerasView";
 import Settings from "./views/SettingsView";
 import Docs from "./views/DocsView";
+import NotFoundView from "./views/NotFoundView";
 
-Vue.use(Router);
 
-export default new Router({
-    // mode: 'history',
+Vue.use(VueRouter);
+
+export default new VueRouter({
+    mode: 'history',
     base: process.env.BASE_URL,
-    routes: [{
-        path: '/',
-        redirect: '/dashboard'
-    }, {
-        path: '/dashboard',
-        name: 'Dashboard',
-        component: Dashboard
-    }, {
-        path: '/cameras',
-        name: 'Cameras',
-        component: Cameras
-    }, {
-        path: '/settings',
-        name: 'Settings',
-        component: Settings
-    }, {
-        path: '/docs',
-        name: 'Docs',
-        component: Docs
-    }]
+    routes: [
+        {
+            path: '/',
+            redirect: '/dashboard'
+        },
+        {
+            path: '/dashboard',
+            name: 'Dashboard',
+            component: Dashboard
+        },
+        {
+            path: '/cameras',
+            name: 'Cameras',
+            component: Cameras
+        },
+        {
+            path: '/settings',
+            name: 'Settings',
+            component: Settings
+        },
+        {
+            path: '/docs',
+            name: 'Docs',
+            component: Docs
+        },
+        {
+            path: "*",
+            name: "NotFound",
+            component: NotFoundView
+        }
+    ]
 })
diff --git a/photon-client/src/views/NotFoundView.vue b/photon-client/src/views/NotFoundView.vue
new file mode 100644
index 000000000..0cc5be4e2
--- /dev/null
+++ b/photon-client/src/views/NotFoundView.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="not-found-container">
+    <div>
+      <v-card-title style="color: white; padding-bottom: 36px; font-size: 42px;">
+        The page you are looking for isn't here
+      </v-card-title>
+      <v-card-subtitle style="color: white; font-size: 18px;">
+        Please use the sidebar to find what you are looking for
+      </v-card-subtitle>
+    </div>
+    <img
+      src="../assets/NotFound.webp"
+      alt="missing-page"
+      style="margin-top: 64px"
+    >
+  </div>
+</template>
+
+
+<script>
+export default {
+    name: 'NotFound'
+}
+</script>
+
+<style>
+.not-found-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>