diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
index bb075ac5..d3556710 100644
--- a/frontend/src/assets/style.scss
+++ b/frontend/src/assets/style.scss
@@ -520,6 +520,10 @@ body.is-noscroll {
   }
 }
 
+.page-404 h1 {
+  font-size: 100px;
+}
+
 /* Dashboard */
 section.dashboard {
   .title {
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 1896773e..5fa106fb 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -5,6 +5,12 @@ Vue.use(VueRouter);
 
 // The meta.group param is used in App.vue to expand menu group by name.
 const routes = [
+  {
+    path: '/404',
+    name: '404_page',
+    meta: { title: '404' },
+    component: () => import(/* webpackChunkName: "main" */ '../views/404.vue'),
+  },
   {
     path: '/',
     name: 'dashboard',
@@ -116,6 +122,14 @@ const router = new VueRouter({
   },
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.matched.length === 0) {
+    next('/404');
+  } else {
+    next();
+  }
+});
+
 router.afterEach((to) => {
   Vue.nextTick(() => {
     document.title = `${to.meta.title} / listmonk`;
diff --git a/frontend/src/views/404.vue b/frontend/src/views/404.vue
new file mode 100644
index 00000000..f2bf5ae3
--- /dev/null
+++ b/frontend/src/views/404.vue
@@ -0,0 +1,13 @@
+<template>
+  <section class="page-404">
+    <h1 class="title">404</h1>
+  </section>
+</template>
+
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+});
+</script>