diff --git a/src/resources/views/modules/laravelpwa/meta.blade.php b/src/resources/views/modules/laravelpwa/meta.blade.php
index 6156c161..95922829 100644
--- a/src/resources/views/modules/laravelpwa/meta.blade.php
+++ b/src/resources/views/modules/laravelpwa/meta.blade.php
@@ -1,46 +1,46 @@
 <!-- Web Application Manifest -->
 <link rel="manifest" href="{{ route('laravelpwa.manifest') }}">
 <!-- Chrome for Android theme color -->
 <meta name="theme-color" content="{{ $config['theme_color'] }}">
 
 <!-- Add to homescreen for Chrome on Android -->
 <meta name="mobile-web-app-capable" content="{{ $config['display'] == 'standalone' ? 'yes' : 'no' }}">
 <meta name="application-name" content="{{ $config['short_name'] }}">
 <link rel="icon" sizes="{{ data_get(end($config['icons']), 'sizes') }}" href="{{ data_get(end($config['icons']), 'src') }}">
 
 <!-- Add to homescreen for Safari on iOS -->
 <meta name="apple-mobile-web-app-capable" content="{{ $config['display'] == 'standalone' ? 'yes' : 'no' }}">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta name="apple-mobile-web-app-title" content="{{ $config['short_name'] }}">
 <link rel="apple-touch-icon" href="{{ data_get(end($config['icons']), 'src') }}">
 
 
 <link href="{{ $config['splash']['640x1136'] }}" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
 <link href="{{ $config['splash']['750x1334'] }}" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
 <link href="{{ $config['splash']['1242x2208'] }}" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
 <link href="{{ $config['splash']['1125x2436'] }}" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
 <link href="{{ $config['splash']['828x1792'] }}" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
 <link href="{{ $config['splash']['1242x2688'] }}" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
 <link href="{{ $config['splash']['1536x2048'] }}" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
 <link href="{{ $config['splash']['1668x2224'] }}" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
 <link href="{{ $config['splash']['1668x2388'] }}" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
 <link href="{{ $config['splash']['2048x2732'] }}" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
 
 <!-- Tile for Win8 -->
 <meta name="msapplication-TileColor" content="{{ $config['background_color'] }}">
 <meta name="msapplication-TileImage" content="{{ data_get(end($config['icons']), 'src') }}">
 
 <script type="text/javascript">
     // Initialize the service worker
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register('/serviceworker.js', {
-            scope: '.'
+            scope: '/'
         }).then(function (registration) {
             // Registration was successful
             console.log('Laravel PWA: ServiceWorker registration successful with scope: ', registration.scope);
         }, function (err) {
             // registration failed :(
             console.log('Laravel PWA: ServiceWorker registration failed: ', err);
         });
     }
 </script>
\ No newline at end of file
diff --git a/src/resources/vue/components/404Component.vue b/src/resources/vue/components/404Component.vue
new file mode 100644
index 00000000..a08deb87
--- /dev/null
+++ b/src/resources/vue/components/404Component.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="flex-center position-ref full-height">
+        <div class="code">404</div>
+        <div class="message" style="padding: 10px;">Not Found</div>
+    </div>
+</template>
+
+<style scoped>
+    .full-height {
+        height: 100vh;
+    }
+
+    .flex-center {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    }
+
+    .position-ref {
+        position: relative;
+        color: #636b6f;
+    }
+
+    .code {
+        border-right: 2px solid;
+        font-size: 26px;
+        padding: 0 15px 0 15px;
+        text-align: center;
+    }
+
+    .message {
+        font-size: 18px;
+        text-align: center;
+    }
+</style>
diff --git a/src/resources/vue/components/RegisterComponent.vue b/src/resources/vue/components/RegisterComponent.vue
new file mode 100644
index 00000000..05a2a0c7
--- /dev/null
+++ b/src/resources/vue/components/RegisterComponent.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="container">
+        Register form
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                data: 'nothing'
+            }
+        },
+        mounted() {
+        }
+    }
+</script>
diff --git a/src/resources/vue/js/routes.js b/src/resources/vue/js/routes.js
index 8d5d00dd..b708978e 100644
--- a/src/resources/vue/js/routes.js
+++ b/src/resources/vue/js/routes.js
@@ -1,59 +1,70 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
 import DashboardComponent from '../components/DashboardComponent'
+import Error404Component from '../components/404Component'
 import LoginComponent from '../components/LoginComponent'
 import LogoutComponent from '../components/LogoutComponent'
+import RegisterComponent from '../components/RegisterComponent'
 
 import store from './store'
 
 const routes = [
     {
         path: '/',
         redirect: { name: 'login' }
     },
     {
         path: '/dashboard',
         name: 'dashboard',
         component: DashboardComponent,
         meta: { requiresAuth: true }
     },
     {
         path: '/login',
         name: 'login',
         component: LoginComponent
     },
     {
         path: '/logout',
         name: 'logout',
         component: LogoutComponent
+    },
+    {
+        path: '/register',
+        name: 'register',
+        component: RegisterComponent
+    },
+    {
+        path: '*',
+        component: Error404Component
     }
 ]
 
 const router = new VueRouter({
     history: true,
     mode: 'history',
     routes
 })
 
 router.beforeEach((to, from, next) => {
 
     // check if the route requires authentication and user is not logged in
     if (to.matched.some(route => route.meta.requiresAuth) && !store.state.isLoggedIn) {
         // redirect to login page
         next({ name: 'login' })
         return
     }
 
     // if logged in redirect to dashboard
-    if(to.path === '/login' && store.state.isLoggedIn) {
+    if (to.path === '/login' && store.state.isLoggedIn) {
         next({ name: 'dashboard' })
         return
     }
 
     next()
 })
 
 export default router
diff --git a/src/routes/web.php b/src/routes/web.php
index fd657263..d59d4324 100644
--- a/src/routes/web.php
+++ b/src/routes/web.php
@@ -1,17 +1,23 @@
 <?php
 
 /*
 |--------------------------------------------------------------------------
 | Web Routes
 |--------------------------------------------------------------------------
 |
 | Here is where you can register web routes for your application. These
 | routes are loaded by the RouteServiceProvider within a group which
 | contains the "web" middleware group. Now create something great!
 |
 */
 
-
-Route::get('/{any?}', function () {
+$action = function () {
     return view('root');
-})->where('any', '^(login|register)$');
+};
+
+Route::get('/', $action);
+
+// Deep-links
+Route::get('login', $action);
+Route::get('register', $action);
+//Route::get('invoice/{invoice}', $action);