diff --git a/src/App.vue b/src/App.vue
index a2cee06..3fea1da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,13 +30,13 @@ export default Vue.extend({
   watch: {
     '$route.params.tab': {
       handler () {
-        if (this.$route.params.tab === 'settings') {
+        if (this.$route.path === '/settings') {
           return
         }
         const tabNumber = Number(this.$route.params.tab)
         const isValidTabNumber = tabNumber >= 1 && tabNumber <= this.$store.state.tabs.length
         if (!isValidTabNumber) {
-          this.$router.push(`/1/${this.$store.state.tabs[0].path}`)
+          this.$router.push(`/timetables/1/${this.$store.state.tabs[0].path}`)
         }
       },
       deep: true,
@@ -59,7 +59,7 @@ export default Vue.extend({
     },
     '$store.state.tabs': {
       handler () {
-        if (this.$route.params.tab === 'settings') {
+        if (this.$route.path === '/settings') {
           return
         }
         const tabNumber = Number(this.$route.params.tab)
@@ -67,7 +67,7 @@ export default Vue.extend({
         if (!isValidTabNumber) {
           const newTabNumber = Math.min(this.$store.state.tabs.length, Math.max(1, Number(this.$route.params.tab)))
           const { line, stop } = this.$store.state.tabs[newTabNumber - 1]
-          this.$router.push(`/${newTabNumber}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+          this.$router.push(`/timetables/${newTabNumber}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
         }
       },
       deep: true,
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 86b4e33..30ea657 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -3,13 +3,13 @@
     <div>
       <router-link v-if="$route.params.line"
         class="icon-line"
-        :to="`/${ $route.params.tab }/${ $route.params.line }`"
+        :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
       <LineIcon :lineSlugName="$route.params.line" theme="colors" />
       </router-link>
     </div>
     <div>
-      <router-link class="logo" :to="`/${ $route.params.tab }`">
+      <router-link class="logo" :to="`/timetables/${ $route.params.tab }`">
         <img alt="Logo Alednavigo" src="@/assets/icon-light.png" />
       </router-link>
     </div>
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 572732b..326d99c 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -8,7 +8,7 @@
             class="tab"
             :class="{ 'tab-active': tabIndex() === i }"
           >
-            <router-link class="tab-link" :to="`/${i + 1}/${path}`">
+            <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
               <span class="tab-label">
                 <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
                 <span v-if="stop" class="tab-label-text">
@@ -36,7 +36,7 @@
               class="tab"
               :class="{ 'tab-active': tabIndex() === i }"
             >
-              <router-link class="tab-link" :to="`/${i + 1}/${path}`">
+              <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
                 <span class="tab-label">
                   <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
                   <span v-if="stop" class="tab-label-text">
@@ -76,18 +76,18 @@ export default Vue.extend({
     },
     addTab () {
       this.$store.commit('addTab')
-      this.$router.push(`/${this.$store.state.tabs.length}`)
+      this.$router.push(`/timetables/${this.$store.state.tabs.length}`)
     },
     closeTab (tabIndex: number) {
       const currentTabIndex = Number(this.$route.params.tab) - 1
       if (currentTabIndex > tabIndex) {
         const { line, stop } = this.$store.state.tabs[currentTabIndex]
         this.$store.commit('closeTab', { tabIndex })
-        this.$router.push(`/${currentTabIndex}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+        this.$router.push(`/timetables/${currentTabIndex}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
       } else {
         this.$store.commit('closeTab', { tabIndex })
         const { line, stop } = this.$store.state.tabs[currentTabIndex]
-        this.$router.push(`/${currentTabIndex + 1}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+        this.$router.push(`/timetables/${currentTabIndex + 1}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
       }
     },
   },
diff --git a/src/components/AppPageView.vue b/src/components/AppPageView.vue
index 3712c1a..a7a596f 100644
--- a/src/components/AppPageView.vue
+++ b/src/components/AppPageView.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="tab">
-      <SettingsPage v-if="$route.params.tab === 'settings'" />
-      <TabPage v-else />
+      <router-view>
+      </router-view>
     </div>
     <AppNav />
   </div>
@@ -10,16 +10,12 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import SettingsPage from '@/pages/SettingsPage.vue'
-import TabPage from '@/pages/TabPage/index.vue'
 import AppNav from '@/components/AppNav.vue'
 
 export default Vue.extend({
   name: 'AppPageView',
   components: {
     AppNav,
-    SettingsPage,
-    TabPage,
   },
 })
 </script>
diff --git a/src/components/Line/RouteMap/Table.vue b/src/components/Line/RouteMap/Table.vue
index 79db893..b8ce1c6 100644
--- a/src/components/Line/RouteMap/Table.vue
+++ b/src/components/Line/RouteMap/Table.vue
@@ -12,7 +12,7 @@
       >
         <LabelCell
           :stopName="row.displayName"
-          :href="`/${$route.params.tab}/${line}/${row.slugName}`"
+          :href="`/timetables/${$route.params.tab}/${line}/${row.slugName}`"
           :lineConnections="row.lineConnections"
         />
       </td>
diff --git a/src/components/Stop/Header.vue b/src/components/Stop/Header.vue
index 657ea78..33138bd 100644
--- a/src/components/Stop/Header.vue
+++ b/src/components/Stop/Header.vue
@@ -6,7 +6,7 @@
     <span class="line-connections">
       <router-link v-for="conn in stop.lineConnections"
         :key="`${conn.line}/${conn.slugName}`"
-        :to="`/${$route.params.tab}/${conn.line}/${conn.slugName}`"
+        :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
         <LineIcon :lineSlugName="conn.line" theme="dark" />
       </router-link>
diff --git a/src/components/Stop/PrevNextStops.vue b/src/components/Stop/PrevNextStops.vue
index 0eaf69c..06a0d69 100644
--- a/src/components/Stop/PrevNextStops.vue
+++ b/src/components/Stop/PrevNextStops.vue
@@ -2,7 +2,7 @@
   <div class="prev-next-stops">
     <ul>
       <li v-for="(prevStop, i) in stop.prevStops.slice().reverse()" :key="i" class="prev-stops">
-        <router-link :to="`/${$route.params.tab}/${$route.params.line}/${prevStop}`">
+        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`">
           <span>
             {{ getStop($route.params.line, prevStop).displayName }}
           </span>
@@ -11,7 +11,7 @@
     </ul>
     <ul>
       <li v-for="(nextStop, i) in stop.nextStops.slice().reverse()" :key="i" class="next-stops">
-        <router-link :to="`/${$route.params.tab}/${$route.params.line}/${nextStop}`">
+        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`">
           <span>
             {{ getStop($route.params.line, nextStop).displayName }}
           </span>
diff --git a/src/main.ts b/src/main.ts
index 3499c11..0ac3224 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,8 @@ import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 import './registerServiceWorker'
 import App from './App.vue'
+import TabPage from '@/pages/TabPage/index.vue'
+import SettingsPage from '@/pages/SettingsPage.vue'
 
 Vue.config.productionTip = false
 Vue.use(VueRouter)
@@ -11,10 +13,11 @@ Vue.use(Vuex)
 
 const routes = [
   { path: '/', component: App },
-  { path: '/:tab', component: App },
-  { path: '/:tab/:line', component: App },
-  { path: '/:tab/:line/:stop', component: App },
-  { path: '/about', component: App },
+  { path: '/settings', component: SettingsPage },
+  { path: '/timetables/', component: TabPage },
+  { path: '/timetables/:tab', component: TabPage },
+  { path: '/timetables/:tab/:line', component: TabPage },
+  { path: '/timetables/:tab/:line/:stop', component: TabPage },
 ]
 
 const router = new VueRouter({
@@ -56,5 +59,5 @@ const store = new Vuex.Store({
 new Vue({
   router,
   store,
-  template: '<router-view class="view"></router-view>',
+  render: h => h(App),
 }).$mount('#app')
diff --git a/src/pages/TabPage/New.vue b/src/pages/TabPage/New.vue
index 0e36cb4..5f06fbe 100644
--- a/src/pages/TabPage/New.vue
+++ b/src/pages/TabPage/New.vue
@@ -4,7 +4,7 @@
       <h2>{{ category.name }}</h2>
       <hr />
       <router-link v-for="line in category.lines" :key="line.slugName"
-        class="icon-line" :to="`/${$route.params.tab}/${line.slugName}`"
+        class="icon-line" :to="`/timetables/${$route.params.tab}/${line.slugName}`"
       >
         <LineIcon :lineSlugName="line.slugName" theme="dark" fadeIn />
       </router-link>