diff --git a/.eslintrc.js b/.eslintrc.js
index a87c751..8131582 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,6 +5,8 @@ module.exports = {
   },
   extends: [
     'plugin:vue/essential',
+    'plugin:vue/strongly-recommended',
+    'plugin:vue/recommended',
     '@vue/standard',
     '@vue/typescript/recommended',
   ],
diff --git a/public/sw.js b/public/sw.js
index c252376..583c670 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -17,10 +17,3 @@ registerRoute(
     cacheName: 'img-mui',
   }),
 )
-
-registerRoute(
-  ({ url }) => url.pathname.startsWith('/schemas/'),
-  new CacheFirst({
-    cacheName: 'schemas',
-  }),
-)
diff --git a/src/App.vue b/src/App.vue
index 237ee24..5019586 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <AppHeader />
-    <AppPageView />
+    <AppView />
   </div>
 </template>
 
@@ -10,35 +9,24 @@ import Vue from 'vue'
 import '@fontsource/inter/latin-500.css'
 import '@fontsource/inter/latin-600.css'
 import '@fontsource/inter/latin-700.css'
-import AppHeader from '@/components/AppHeader.vue'
-import AppPageView from '@/components/AppPageView.vue'
+import AppView from '@/components/AppView.vue'
 import { lastUpdatedAt, synchronize } from './utils/localstore/synchronizer'
 
 export default Vue.extend({
   name: 'App',
   components: {
-    AppHeader,
-    AppPageView,
-  },
-  created () {
-    if (!lastUpdatedAt()) {
-      synchronize().then(() => {
-        window.location.href = '/'
-      })
-    }
-    // Ping server to wake it up
-    fetch(process.env.VUE_APP_API_URL)
+    AppView,
   },
   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,
@@ -61,7 +49,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)
@@ -69,13 +57,20 @@ 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,
       immediate: true,
     },
   },
+  created () {
+    if (!lastUpdatedAt()) {
+      synchronize().then(() => {
+        window.location.href = '/'
+      })
+    }
+  },
 })
 </script>
 
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 86b4e33..01ea059 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,21 +1,32 @@
 <template>
   <header>
     <div>
-      <router-link v-if="$route.params.line"
+      <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" />
+        <LineIcon
+          :line-slug-name="$route.params.line"
+          color="colors"
+          size="md"
+        />
       </router-link>
     </div>
     <div>
-      <router-link class="logo" :to="`/${ $route.params.tab }`">
-        <img alt="Logo Alednavigo" src="@/assets/icon-light.png" />
+      <router-link
+        class="logo"
+        :to="`/timetables/${ $route.params.tab || '' }`"
+      >
+        <img
+          alt="Logo Alednavigo"
+          src="@/assets/icon-light.png"
+        >
       </router-link>
     </div>
     <div class="clock">
       <div>
-        <TimeClock :datetime="datetime" />
+        <UiClock :time="time" />
       </div>
     </div>
   </header>
@@ -23,20 +34,23 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import LineIcon from '@/components/Line/Icon.vue'
-import TimeClock from '@/components/TimeClock.vue'
-import { DateTime } from '@/utils/datetime'
+import LineIcon from '@/components/LineIcon.vue'
+import UiClock from '@/components/ui/UiClock.vue'
+import { Time } from '@/utils/time'
 export default Vue.extend({
   name: 'AppHeader',
-  components: { LineIcon, TimeClock },
+  components: {
+    LineIcon,
+    UiClock,
+  },
   data: () => ({
     clockInterval: 0,
-    datetime: {} as DateTime,
+    time: {} as Time,
   }),
   created () {
     this.clockInterval = setInterval(() => {
       const t = new Date()
-      this.datetime = {
+      this.time = {
         hh: t.getHours().toString(),
         mm: t.getMinutes().toString().padStart(2, '0'),
         ss: t.getSeconds().toString().padStart(2, '0'),
@@ -76,11 +90,6 @@ header {
   margin-left: 0.5rem;
 }
 
-.icon-line img {
-  width: 2rem;
-  height: 2rem;
-}
-
 .clock {
   display: flex;
   justify-content: end;
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 572732b..931c4f7 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -2,21 +2,37 @@
   <nav>
     <hr>
     <div class="nav-content">
-      <div v-if="showTabsList" class="nav-tabs-list">
+      <div
+        v-if="showTabsList"
+        class="nav-tabs-list"
+      >
         <ul>
-          <li v-for="({ line, stop, path }, i) in $store.state.tabs" :key="`/${i + 1}/${path}`"
+          <li
+            v-for="({ line, stop, path }, i) in $store.state.tabs"
+            :key="`/${i + 1}/${path}`"
             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">
+                <LineIcon
+                  :line-slug-name="line"
+                  :color="tabIndex() === i ? 'dark' : 'light'"
+                  size="sm"
+                />
+                <span
+                  v-if="stop"
+                  class="tab-label-text"
+                >
                   {{ getStop(line, stop).displayName }}
                 </span>
               </span>
             </router-link>
-            <button v-if="$store.state.tabs.length > 1"
+            <button
+              v-if="$store.state.tabs.length > 1"
               class="close-tab"
               @click="closeTab(i)"
             >
@@ -27,19 +43,40 @@
       </div>
 
       <div class="nav-controls">
-        <router-link class="to-settings" to="/settings">
-          <img class="icon-settings" src="/img/mui/more-vert.svg" />
+        <router-link
+          class="to-settings"
+          to="/settings"
+        >
+          <img
+            class="icon-settings"
+            src="/img/mui/more-vert.svg"
+          >
         </router-link>
         <div class="tabs-manager">
-          <ul v-if="!showTabsList" class="tabs">
-            <li v-for="({ line, stop, path }, i) in $store.state.tabs" :key="`/${i + 1}/${path}`"
+          <ul
+            v-if="!showTabsList"
+            class="tabs"
+          >
+            <li
+              v-for="({ line, stop, path }, i) in $store.state.tabs"
+              :key="`/${i + 1}/${path}`"
               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">
+                  <LineIcon
+                    :line-slug-name="line"
+                    :color="tabIndex() === i ? 'dark' : 'light'"
+                    size="sm"
+                  />
+                  <span
+                    v-if="stop"
+                    class="tab-label-text"
+                  >
                     {{ getStop(line, stop).displayName }}
                   </span>
                 </span>
@@ -47,11 +84,20 @@
             </li>
           </ul>
         </div>
-        <button class="add-tab" @click="addTab()">
+        <button
+          class="add-tab"
+          @click="addTab()"
+        >
           +
         </button>
-        <button class="btn-toggle-tabs-list" @click="showTabsList = !showTabsList">
-          <img class="icon-tabs-list" src="/img/mui/reorder.svg" />
+        <button
+          class="btn-toggle-tabs-list"
+          @click="showTabsList = !showTabsList"
+        >
+          <img
+            class="icon-tabs-list"
+            src="/img/mui/reorder.svg"
+          >
         </button>
       </div>
     </div>
@@ -61,7 +107,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { getStop } from '@/utils/localstore/stops'
-import LineIcon from '@/components/Line/Icon.vue'
+import LineIcon from '@/components/LineIcon.vue'
 
 export default Vue.extend({
   name: 'AppNav',
@@ -76,18 +122,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/AppView.vue
similarity index 56%
rename from src/components/AppPageView.vue
rename to src/components/AppView.vue
index 3712c1a..64e9324 100644
--- a/src/components/AppPageView.vue
+++ b/src/components/AppView.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
+    <AppHeader />
     <div class="tab">
-      <SettingsPage v-if="$route.params.tab === 'settings'" />
-      <TabPage v-else />
+      <router-view />
     </div>
     <AppNav />
   </div>
@@ -10,16 +10,14 @@
 
 <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'
+import AppHeader from '@/components/AppHeader.vue'
 
 export default Vue.extend({
-  name: 'AppPageView',
+  name: 'AppView',
   components: {
+    AppHeader,
     AppNav,
-    SettingsPage,
-    TabPage,
   },
 })
 </script>
diff --git a/src/components/Line/Icon.vue b/src/components/Line/Icon.vue
deleted file mode 100644
index f6936ef..0000000
--- a/src/components/Line/Icon.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <img
-    v-if="lineSlugName"
-    :src="`/img/lines-icons/${theme}/${lineSlugName}.svg`"
-    :class="{ 'fade-in': fadeIn, 'hide': fadeIn }"
-    @load="onLoad"
-  />
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  name: 'LineIcon',
-  props: {
-    lineSlugName: String,
-    fadeIn: {
-      type: Boolean,
-      default: false,
-    },
-    theme: String,
-  },
-  methods: {
-    onLoad (e: any) {
-      if (this.fadeIn) e.target.className = e.target.className.replace('hide', '')
-    },
-  },
-})
-</script>
-
-<style scoped>
-.hide-fade {
-  opacity: 0;
-}
-
-.fade-in {
-  opacity: 1;
-  animation: fadeIn 600ms ease;
-}
-
-@keyframes fadeIn {
-  0%{
-    opacity: 0;
-  }
-  100%{
-    opacity: 1;
-  }
-}
-</style>
diff --git a/src/components/Line/RouteMap/DrawingCell.vue b/src/components/Line/RouteMap/DrawingCell.vue
deleted file mode 100644
index 164ccde..0000000
--- a/src/components/Line/RouteMap/DrawingCell.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <svg v-if="content === '*'" class="drawing-stop" viewBox="0 0 16 16">
-    <circle v-if="isLargeCircle" cx="8" cy="8" r="6"/>
-    <circle v-else cx="8" cy="8" r="4"/>
-  </svg>
-
-  <svg v-else-if="content === '^'" class="drawing-path" viewBox="0 0 16 16">
-    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
-    <path d="M0,8 a8,-8 0 0,1 8,-8 L0,0 Z" />
-  </svg>
-
-  <svg v-else-if="content === 'v'" class="drawing-path" viewBox="0 0 16 16">
-    <path d="M0,8 a8,8 0 0,0 8,8 L0,16 Z" />
-    <path d="M8,16 a8,-8 0 0,0 8,-8 L16,16 Z" />
-  </svg>
-
-  <svg v-else-if="content === 'o\\'" class="drawing-path" viewBox="0 0 16 16">
-    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
-  </svg>
-
-  <svg v-else-if="content === 'o/'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
-    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
-  </svg>
-
-  <svg v-else-if="content === '\\o'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
-    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
-  </svg>
-
-  <svg v-else-if="content === '/o'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
-    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
-  </svg>
-
-  <svg v-else-if="content === '\\.'" class="drawing-path" viewBox="0 0 16 16">
-    <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
-  </svg>
-
-  <svg v-else-if="content === '/.'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
-    <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
-  </svg>
-
-  <svg v-else-if="content === '.\\'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
-    <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
-  </svg>
-
-  <svg v-else-if="content === './'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
-    <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
-  </svg>
-
-  <span v-else-if="['↑', '↓'].includes(content)">{{ content }}</span>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  name: 'LineRouteMapDrawingCell',
-  props: {
-    content: String,
-    isLargeCircle: {
-      default: false,
-      type: Boolean,
-    },
-  },
-})
-</script>
-
-<style scoped>
-.drawing-stop {
-  display: block;
-  z-index: 0;
-  position: absolute;
-  transform: translate(-0.25rem, 0.5rem);
-  width: 1.5rem;
-  fill: #fff;
-  stroke: #2F2F2F;
-  stroke-width: 2.5px;
-}
-
-.drawing-path {
-  display: block;
-  fill: #fff;
-}
-</style>
diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
new file mode 100644
index 0000000..384a467
--- /dev/null
+++ b/src/components/LineIcon.vue
@@ -0,0 +1,35 @@
+<template>
+  <DesignIcon
+    v-if="lineSlugName"
+    :src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
+    :alt="`${lineSlugName}`"
+    :size="size"
+    :fade-in="fadeIn"
+  />
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import DesignIcon, { UiIconSize } from '@/components/ui/UiIcon.vue'
+
+export type LineIconColor = 'colors' | 'light' | 'dark'
+
+export default Vue.extend({
+  name: 'LineIcon',
+  components: {
+    DesignIcon,
+  },
+  props: {
+    lineSlugName: String,
+    fadeIn: {
+      type: Boolean,
+      default: false,
+    },
+    color: String as PropType<LineIconColor>,
+    size: String as PropType<UiIconSize>,
+  },
+})
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/Line/RouteMap/index.vue b/src/components/LineMap/LineMap.vue
similarity index 77%
rename from src/components/Line/RouteMap/index.vue
rename to src/components/LineMap/LineMap.vue
index 9437aac..567737a 100644
--- a/src/components/Line/RouteMap/index.vue
+++ b/src/components/LineMap/LineMap.vue
@@ -1,25 +1,30 @@
 <template>
-  <LineRouteMapTable
+  <LineMapTable
     :line="line"
-    :routeMap="routeMap"
+    :route-map="routeMap"
   />
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import LineRouteMapTable from './Table.vue'
+import LineMapTable from './LineMapTable.vue'
 import { RouteMapType } from '@/utils/parser'
 import { getLineRouteMap } from '@/utils/localstore/lines'
 
 export default Vue.extend({
-  name: 'LineRouteMap',
-  components: { LineRouteMapTable },
+  name: 'LineMap',
+  components: { LineMapTable },
   props: {
     line: String,
   },
   data: () => ({
     routeMap: [] as RouteMapType,
   }),
+  watch: {
+    line () {
+      this.update()
+    },
+  },
   created () {
     this.update()
   },
@@ -28,11 +33,6 @@ export default Vue.extend({
       this.routeMap = getLineRouteMap(this.line)
     },
   },
-  watch: {
-    line () {
-      this.update()
-    },
-  },
 })
 </script>
 
diff --git a/src/components/LineMap/LineMapDrawingCell.vue b/src/components/LineMap/LineMapDrawingCell.vue
new file mode 100644
index 0000000..8b59a04
--- /dev/null
+++ b/src/components/LineMap/LineMapDrawingCell.vue
@@ -0,0 +1,143 @@
+<template>
+  <svg
+    v-if="content === '*'"
+    class="drawing-stop"
+    viewBox="0 0 16 16"
+  >
+    <circle
+      v-if="isLargeCircle"
+      cx="8"
+      cy="8"
+      r="6"
+    />
+    <circle
+      v-else
+      cx="8"
+      cy="8"
+      r="4"
+    />
+  </svg>
+
+  <svg
+    v-else-if="content === '^'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
+    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
+    <path d="M0,8 a8,-8 0 0,1 8,-8 L0,0 Z" />
+  </svg>
+
+  <svg
+    v-else-if="content === 'v'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
+    <path d="M0,8 a8,8 0 0,0 8,8 L0,16 Z" />
+    <path d="M8,16 a8,-8 0 0,0 8,-8 L16,16 Z" />
+  </svg>
+
+  <svg
+    v-else-if="content === 'o\\'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
+    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
+  </svg>
+
+  <svg
+    v-else-if="content === 'o/'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(90)"
+  >
+    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
+  </svg>
+
+  <svg
+    v-else-if="content === '\\o'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(180)"
+  >
+    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
+  </svg>
+
+  <svg
+    v-else-if="content === '/o'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(270)"
+  >
+    <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
+  </svg>
+
+  <svg
+    v-else-if="content === '\\.'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
+    <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
+  </svg>
+
+  <svg
+    v-else-if="content === '/.'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(90)"
+  >
+    <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
+  </svg>
+
+  <svg
+    v-else-if="content === '.\\'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(180)"
+  >
+    <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
+  </svg>
+
+  <svg
+    v-else-if="content === './'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(270)"
+  >
+    <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
+  </svg>
+
+  <span v-else-if="['↑', '↓'].includes(content)">{{ content }}</span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'LineMapDrawingCell',
+  props: {
+    content: String,
+    isLargeCircle: {
+      default: false,
+      type: Boolean,
+    },
+  },
+})
+</script>
+
+<style scoped>
+.drawing-stop {
+  display: block;
+  z-index: 0;
+  position: absolute;
+  transform: translate(-0.25rem, 0.5rem);
+  width: 1.5rem;
+  fill: #fff;
+  stroke: #2F2F2F;
+  stroke-width: 2.5px;
+}
+
+.drawing-path {
+  display: block;
+  fill: #fff;
+}
+</style>
diff --git a/src/components/Line/RouteMap/LabelCell.vue b/src/components/LineMap/LineMapLabelCell.vue
similarity index 62%
rename from src/components/Line/RouteMap/LabelCell.vue
rename to src/components/LineMap/LineMapLabelCell.vue
index ba41652..8b5b167 100644
--- a/src/components/Line/RouteMap/LabelCell.vue
+++ b/src/components/LineMap/LineMapLabelCell.vue
@@ -1,34 +1,45 @@
 <template>
-  <router-link v-if="href"
+  <router-link
+    v-if="href"
     class="label-text"
     :to="href"
   >
     {{ stopName }}
     <div class="line-connections">
-      <LineIcon v-for="conn in lineConnections" :key="`${conn.line}/${conn.slugName}`"
-        :lineSlugName="conn.line" theme="colors" fadeIn
+      <LineIcon
+        v-for="conn in lineConnections"
+        :key="`${conn.line}/${conn.slugName}`"
+        :line-slug-name="conn.line"
+        color="colors"
+        size="sm"
+        fade-in
       />
     </div>
   </router-link>
 
-  <span v-else class="label-text">
+  <div
+    v-else
+    class="label-text"
+  >
     {{ stopName }}
     <div class="line-connections">
       <img
-        v-for="conn in lineConnections" :key="`${conn.line}/${conn.slugName}`"
+        v-for="conn in lineConnections"
+        :key="`${conn.line}/${conn.slugName}`"
         :src="`/img/lines-icons/colors/${conn.line}.svg`"
+        :alt="`${conn.slugName} ${conn.line}`"
       >
     </div>
-  </span>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { LineConnectionType } from '@/utils/parser'
-import LineIcon from '@/components/Line/Icon.vue'
+import LineIcon from '@/components/LineIcon.vue'
 
 export default Vue.extend({
-  name: 'LineRouteMapLabelCell',
+  name: 'LineMapLabelCell',
   components: { LineIcon },
   props: {
     stopName: String,
@@ -49,6 +60,5 @@ export default Vue.extend({
 .line-connections > img {
   margin-top: 0.2rem;
   margin-right: 0.2rem;
-  width: 1.35rem;
 }
 </style>
diff --git a/src/components/Line/RouteMap/Table.vue b/src/components/LineMap/LineMapTable.vue
similarity index 64%
rename from src/components/Line/RouteMap/Table.vue
rename to src/components/LineMap/LineMapTable.vue
index 79db893..c25df89 100644
--- a/src/components/Line/RouteMap/Table.vue
+++ b/src/components/LineMap/LineMapTable.vue
@@ -1,19 +1,29 @@
 <template>
   <table>
-    <tr v-for="(row, i) in routeMap" :key="i">
-      <td v-for="(cell, j) in row.drawing" :key="j"
+    <tr
+      v-for="(row, i) in routeMap"
+      :key="i"
+    >
+      <td
+        v-for="(cell, j) in row.drawing"
+        :key="j"
         :class="{ filled: shouldBeFilledCell(cell) }"
       >
-        <DrawingCell :content="cell" :isLargeCircle="row.isTerminus || false" />
+        <DrawingCell
+          :content="cell"
+          :is-large-circle="row.isTerminus || false"
+        />
       </td>
 
-      <td v-if="row.slugName"
-        class="label" :class="{ 'label-terminus': row.isTerminus }"
+      <td
+        v-if="row.slugName"
+        class="label"
+        :class="{ 'label-terminus': row.isTerminus }"
       >
         <LabelCell
-          :stopName="row.displayName"
-          :href="`/${$route.params.tab}/${line}/${row.slugName}`"
-          :lineConnections="row.lineConnections"
+          :stop-name="row.displayName"
+          :href="`/timetables/${$route.params.tab}/${line}/${row.slugName}`"
+          :line-connections="row.lineConnections"
         />
       </td>
     </tr>
@@ -23,11 +33,11 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { RouteMapType } from '@/utils/parser'
-import DrawingCell from './DrawingCell.vue'
-import LabelCell from './LabelCell.vue'
+import DrawingCell from './LineMapDrawingCell.vue'
+import LabelCell from './LineMapLabelCell.vue'
 
 export default Vue.extend({
-  name: 'LineRouteMapTable',
+  name: 'LineMapTable',
   components: { DrawingCell, LabelCell },
   props: {
     line: String,
diff --git a/src/components/Stop/Header.vue b/src/components/Stop/Header.vue
deleted file mode 100644
index 657ea78..0000000
--- a/src/components/Stop/Header.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div class="title">
-    <h1>
-      {{ stop.displayName }}
-    </h1>
-    <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}`"
-      >
-        <LineIcon :lineSlugName="conn.line" theme="dark" />
-      </router-link>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue'
-import { StopType } from '@/utils/parser'
-import LineIcon from '@/components/Line/Icon.vue'
-
-export default Vue.extend({
-  name: 'StopHeader',
-  components: { LineIcon },
-  props: {
-    stop: {} as PropType<StopType>,
-  },
-})
-</script>
-
-<style scoped>
-.title {
-  min-height: 2.8rem;
-}
-
-h1 {
-  font-size: 1.5rem;
-  display: inline-block;
-  margin: 0.5rem 1rem 0rem 0;
-}
-
-.line-connections {
-  display: inline-block;
-}
-
-.line-connections img {
-  width: 2rem;
-  margin: 0.4rem 0.4rem 0.4rem 0;
-  vertical-align: -0.8rem;
-}
-</style>
diff --git a/src/components/Stop/PrevNextStops.vue b/src/components/Stop/PrevNextStops.vue
deleted file mode 100644
index 0eaf69c..0000000
--- a/src/components/Stop/PrevNextStops.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <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}`">
-          <span>
-            {{ getStop($route.params.line, prevStop).displayName }}
-          </span>
-        </router-link>
-      </li>
-    </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}`">
-          <span>
-            {{ getStop($route.params.line, nextStop).displayName }}
-          </span>
-        </router-link>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue'
-import { StopType } from '@/utils/parser'
-import { getStop } from '@/utils/localstore/stops'
-
-export default Vue.extend({
-  name: 'StopPrevNextStops',
-  props: {
-    stop: {} as PropType<StopType>,
-  },
-  methods: {
-    getStop,
-  },
-})
-</script>
-
-<style scoped>
-.prev-next-stops {
-  display: flex;
-  margin-top: 1rem;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.prev-next-stops ul {
-  width: 49%;
-}
-
-.prev-next-stops li a {
-  display: flex;
-  padding: 0.8rem 0;
-  margin-bottom: 0.5rem;
-  font-size: 0.95rem;
-  background-color: #dfdfdf;
-  border-radius: 0.4rem;
-  text-align: center;
-}
-.prev-next-stops a span {
-  display: inline-block;
-  width: 100%;
-  padding: 0.1rem 0.3rem 0 0.3rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.prev-stops a::before {
-  content: '〈';
-}
-.next-stops a::after {
-  content: '〉';
-}
-</style>
diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
new file mode 100644
index 0000000..a76d216
--- /dev/null
+++ b/src/components/Stop/StopHeader.vue
@@ -0,0 +1,47 @@
+<template>
+  <DesignPageTitle :text="stop.displayName">
+    <div class="line-connections">
+      <router-link
+        v-for="conn in stop.lineConnections"
+        :key="`${conn.line}/${conn.slugName}`"
+        :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
+      >
+        <LineIcon
+          :line-slug-name="conn.line"
+          color="dark"
+          size="md"
+        />
+      </router-link>
+    </div>
+  </DesignPageTitle>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { StopType } from '@/utils/parser'
+import LineIcon from '@/components/LineIcon.vue'
+import DesignPageTitle from '@/components/ui/UiPageTitle.vue'
+
+export default Vue.extend({
+  name: 'StopHeader',
+  components: {
+    LineIcon,
+    DesignPageTitle,
+  },
+  props: {
+    stop: {} as PropType<StopType>,
+  },
+})
+</script>
+
+<style scoped>
+.line-connections {
+  display: inline-block;
+}
+
+.line-connections img {
+  width: 2rem;
+  margin: 0.4rem 0.4rem 0.4rem 0;
+  vertical-align: -0.8rem;
+}
+</style>
diff --git a/src/components/Stop/StopPrevNextStops.vue b/src/components/Stop/StopPrevNextStops.vue
new file mode 100644
index 0000000..aaf5279
--- /dev/null
+++ b/src/components/Stop/StopPrevNextStops.vue
@@ -0,0 +1,35 @@
+<template>
+  <DesignPrevNext
+    :prev-items="stop.prevStops.slice().reverse().map(prevStop => ({
+      label: getStop($route.params.line, prevStop).displayName,
+      link: `/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`,
+    }))"
+    :next-items="stop.nextStops.slice().reverse().map(nextStop => ({
+      label: getStop($route.params.line, nextStop).displayName,
+      link: `/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`,
+    }))"
+  />
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { StopType } from '@/utils/parser'
+import { getStop } from '@/utils/localstore/stops'
+import DesignPrevNext from '@/components/ui/UiPrevNext.vue'
+
+export default Vue.extend({
+  name: 'StopPrevNextStops',
+  components: {
+    DesignPrevNext,
+  },
+  props: {
+    stop: {} as PropType<StopType>,
+  },
+  methods: {
+    getStop,
+  },
+})
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/Stop/Timetable/index.vue b/src/components/Stop/StopSchedules.vue
similarity index 82%
rename from src/components/Stop/Timetable/index.vue
rename to src/components/Stop/StopSchedules.vue
index 423844a..25736af 100644
--- a/src/components/Stop/Timetable/index.vue
+++ b/src/components/Stop/StopSchedules.vue
@@ -3,20 +3,30 @@
     <pre v-if="debugData.size > 0">{{ Array.from(debugData).reduce((acc, line) => acc + `\n${line}`, '') }}</pre>
     <div :class="Object.entries(visitsByDirections).length ? 'fade-show' : 'hide'">
       <div
-        v-for="[direction, visits] in visitsByDirections" :key="direction"
+        v-for="[direction, visits] in visitsByDirections"
+        :key="direction"
         class="timetables"
       >
         <h2>{{ direction }}</h2>
         <div class="sync">
-          <span class="sync-time" :key="updateCounter">
+          <span
+            :key="updateCounter"
+            class="sync-time"
+          >
             {{ ((new Date().getTime() - updatedAt.getTime()) / 1000).toFixed(0) }}s
           </span>
-          <button class="sync-btn" @click="update">
-            <img class="icon-settings" src="/img/mui/update.svg" />
+          <button
+            class="sync-btn"
+            @click="update"
+          >
+            <img
+              class="icon-settings"
+              src="/img/mui/update.svg"
+            >
             Synchroniser
           </button>
         </div>
-        <TrainVisits :visits="visits" />
+        <StopSchedulesVisits :visits="visits" />
       </div>
     </div>
   </div>
@@ -24,15 +34,15 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import TrainVisits from '@/components/Stop/Timetable/Visits.vue'
+import StopSchedulesVisits from '@/components/Stop/StopSchedulesVisits.vue'
 import { StopType } from '@/utils/parser'
 import { fetchTimetables, VisitType } from '@/utils/fetcher'
 import { getLinesByRef } from '@/utils/localstore/lines'
 
 export default Vue.extend({
-  name: 'StopTimetable',
+  name: 'StopSchedules',
   components: {
-    TrainVisits,
+    StopSchedulesVisits,
   },
   props: {
     stop: {} as PropType<StopType>,
@@ -45,6 +55,19 @@ export default Vue.extend({
     updateCounter: 0,
     updateInterval: 0,
   }),
+  computed: {
+    linesByRef () {
+      return getLinesByRef()
+    },
+  },
+  watch: {
+    stop () {
+      this.visitsByDirections = []
+      this.fetchAbortController.abort()
+      this.fetchAbortController = new AbortController()
+      this.update()
+    },
+  },
   created () {
     this.update()
     this.updateInterval = setInterval(() => {
@@ -68,19 +91,6 @@ export default Vue.extend({
         })
     },
   },
-  computed: {
-    linesByRef () {
-      return getLinesByRef()
-    },
-  },
-  watch: {
-    stop () {
-      this.visitsByDirections = []
-      this.fetchAbortController.abort()
-      this.fetchAbortController = new AbortController()
-      this.update()
-    },
-  },
 })
 </script>
 
diff --git a/src/components/Stop/StopSchedulesDetailsTimes.vue b/src/components/Stop/StopSchedulesDetailsTimes.vue
new file mode 100644
index 0000000..36015a7
--- /dev/null
+++ b/src/components/Stop/StopSchedulesDetailsTimes.vue
@@ -0,0 +1,75 @@
+<template>
+  <div
+    v-if="!isInline"
+    class="schedules-details-time"
+  >
+    <UiSchedulesDetailsTimeWrapped
+      v-if="visit.arrivalTime"
+      label="Arrivée"
+      :time="toTime(visit.arrivalTime)"
+      :sublabel="visit.arrivalStatus !== 'onTime' ? visit.arrivalStatus : null"
+    />
+    <div>
+      <div v-if="visit.platform">
+        Voie
+      </div>
+      <div>{{ visit.platform }}</div>
+    </div>
+    <UiSchedulesDetailsTimeWrapped
+      v-if="visit.departureTime"
+      label="Départ"
+      :time="toTime(visit.departureTime)"
+      :sublabel="visit.departureStatus !== 'onTime' ? visit.departureStatus : null"
+    />
+  </div>
+  <div
+    v-else
+    class="schedules-details-time"
+  >
+    <UiSchedulesDetailsTimeInline
+      v-if="visit.departureTime"
+      label="Départ"
+      :time="toTime(visit.departureTime)"
+    />
+    <UiSchedulesDetailsTimeInline
+      v-else
+      label="Arrivée"
+      :time="toTime(visit.arrivalTime)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import UiSchedulesDetailsTimeWrapped from '@/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue'
+import UiSchedulesDetailsTimeInline from '@/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue'
+import { VisitType } from '@/utils/fetcher'
+import { toTime } from '@/utils/time'
+
+export default Vue.extend({
+  name: 'StopSchedulesDetailsTimes',
+  components: {
+    UiSchedulesDetailsTimeWrapped,
+    UiSchedulesDetailsTimeInline,
+  },
+  props: {
+    visit: {} as PropType<VisitType>,
+    isInline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    toTime,
+  },
+})
+</script>
+
+<style scoped>
+.schedules-details-time {
+  display: flex;
+  max-width: 20rem;
+  margin-right: 1rem;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
new file mode 100644
index 0000000..c58d37f
--- /dev/null
+++ b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="schedules-details-time">
+    <div class="text-gray">
+      <UiSchedulesDetailsTimeWrapped
+        v-if="visit.departureTime"
+        label="Passage sans arrêt"
+        :time="toTime(visit.departureTime)"
+        :sublabel="visit.departureStatus !== 'onTime' ? visit.departureStatus : null"
+        is-time-text-gray
+      />
+    </div>
+    <div>
+      <div v-if="visit.platform">
+        Voie
+      </div>
+      <div>{{ visit.platform }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import UiSchedulesDetailsTimeWrapped from '@/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue'
+import { VisitType } from '@/utils/fetcher'
+import { toTime } from '@/utils/time'
+
+export default Vue.extend({
+  name: 'StopSchedulesDetailsTimesNonStopPassage',
+  components: {
+    UiSchedulesDetailsTimeWrapped,
+  },
+  props: {
+    visit: {} as PropType<VisitType>,
+  },
+  methods: {
+    toTime,
+  },
+})
+</script>
+
+<style scoped>
+.schedules-details-time {
+  display: flex;
+  max-width: 20rem;
+  margin: 0 1rem 0.5rem 0;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/Stop/StopSchedulesVisitTime.vue b/src/components/Stop/StopSchedulesVisitTime.vue
new file mode 100644
index 0000000..62cb3f7
--- /dev/null
+++ b/src/components/Stop/StopSchedulesVisitTime.vue
@@ -0,0 +1,43 @@
+<template>
+  <UiSchedulesTime
+    :time="time"
+    :variant="variant"
+  />
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { VisitType } from '@/utils/fetcher'
+import UiSchedulesTime from '@/components/ui/Schedules/UiSchedulesTime.vue'
+
+export default Vue.extend({
+  name: 'StopSchedulesVisitTime',
+  components: { UiSchedulesTime },
+  props: {
+    visit: {
+      type: {} as PropType<VisitType>,
+      required: true,
+    },
+  },
+  computed: {
+    time () {
+      const visitTime: any = (this.visit.nonStopPassage || !this.visit.departureTime)
+        ? this.visit?.arrivalTime
+        : this.visit?.time
+      return ((visitTime - Date.now()) / 1000 / 60).toFixed(0)
+    },
+    variant () {
+      if (!this.visit) {
+        return 'normal'
+      }
+      if (this.visit.departureStatus === 'cancelled' || this.visit.arrivalStatus === 'cancelled') {
+        return 'alert'
+      }
+      if (this.visit.nonStopPassage || !this.visit.departureTime) {
+        return 'shaded'
+      } else {
+        return 'normal'
+      }
+    },
+  },
+})
+</script>
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
new file mode 100644
index 0000000..84d1ae7
--- /dev/null
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <details
+      v-for="visit in visits"
+      :key="visit.id"
+      class="row"
+    >
+      <summary class="visit">
+        <div class="visit-code">
+          {{ visit.journeyCode }}
+        </div>
+        <StopSchedulesVisitTime
+          :key="updateCounter"
+          :visit="visit"
+        />
+        <div class="visit-destination">
+          {{ visit.destination }}
+        </div>
+      </summary>
+
+      <div
+        v-if="visit.operator === 'SNCF' && !visit.nonStopPassage"
+        class="visit-details"
+      >
+        <StopSchedulesDetailsTimes :visit="visit" />
+        <UiSchedulesDetailsRow
+          v-if="visit.journeyCode"
+          label="Mission"
+          :value="visit.journeyCode"
+        />
+        <UiSchedulesDetailsRow
+          v-if="visit.trainNumber"
+          label="Train no."
+          :value="visit.trainNumber"
+        />
+      </div>
+
+      <div
+        v-else-if="visit.operator === 'SNCF' && visit.nonStopPassage"
+        class="visit-details"
+      >
+        <StopSchedulesDetailsTimesNonStopPassage :visit="visit" />
+        <UiSchedulesDetailsRow
+          v-if="visit.journeyCode"
+          label="Mission"
+          :value="visit.journeyCode"
+        />
+        <UiSchedulesDetailsRow
+          v-if="visit.trainNumber"
+          label="Train no."
+          :value="visit.trainNumber"
+        />
+      </div>
+
+      <div
+        v-else
+        class="visit-details"
+      >
+        <StopSchedulesDetailsTimes
+          :visit="visit"
+          is-inline
+        />
+        <UiSchedulesDetailsRow
+          v-if="visit.journeyCode"
+          label="Mission"
+          :value="visit.journeyCode"
+        />
+        <UiSchedulesDetailsRow
+          v-if="visit.trainNumber"
+          label="Train no."
+          :value="visit.trainNumber"
+        />
+      </div>
+    </details>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import UiSchedulesDetailsRow from '@/components/ui/Schedules/UiSchedulesDetailsRow.vue'
+import StopSchedulesDetailsTimes from '@/components/Stop/StopSchedulesDetailsTimes.vue'
+import StopSchedulesDetailsTimesNonStopPassage from '@/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue'
+import { VisitType } from '@/utils/fetcher'
+import StopSchedulesVisitTime from '@/components/Stop/StopSchedulesVisitTime.vue'
+
+export default Vue.extend({
+  name: 'StopSchedulesVisits',
+  components: {
+    StopSchedulesVisitTime,
+    UiSchedulesDetailsRow,
+    StopSchedulesDetailsTimes,
+    StopSchedulesDetailsTimesNonStopPassage,
+  },
+  props: {
+    visits: {} as PropType<VisitType[]>,
+  },
+  data: () => ({
+    updateCounter: 0,
+    updateInterval: 0,
+  }),
+  created () {
+    this.updateInterval = setInterval(() => {
+      ++this.updateCounter
+    }, 5000)
+  },
+  destroyed () {
+    clearInterval(this.updateInterval)
+  },
+})
+</script>
+
+<style scoped>
+
+.row {
+  margin: 0 -1rem;
+}
+
+.visit {
+  display: flex;
+  min-height: 2.8rem;
+  align-items: center;
+}
+
+.row:nth-child(even) {
+  background-color: #ededed;
+}
+
+.visit-code {
+  padding: 0.3rem 0.5rem 0.3rem 1rem;
+  margin-right: 0.5rem;
+  max-width: 2.4rem;
+  min-width: 2.4rem; /* Prevents weird shrink */
+  background: #fff;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #555;
+  border-radius: 0 0.2rem 0.2rem 0;
+  overflow-x: hidden;
+}
+
+.visit-destination {
+  padding: 0.4rem 0.4rem 0.4rem 0.5rem;
+}
+
+.visit-details {
+  padding: 0.2rem 0 1rem 1rem;
+  overflow-x: auto;
+  color: #3f3f3f;
+}
+
+</style>
diff --git a/src/components/Stop/Timetable/Visits.vue b/src/components/Stop/Timetable/Visits.vue
deleted file mode 100644
index 1fc7493..0000000
--- a/src/components/Stop/Timetable/Visits.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<!-- eslint-disable no-irregular-whitespace -->
-<template>
-  <div>
-    <details v-for="visit in visits" :key="visit.id" class="row">
-      <summary class="visit">
-        <div class="visit-code">
-          {{ visit.journeyCode }}
-        </div>
-        <div v-if="visit.departureStatus === 'cancelled' || visit.arrivalStatus === 'cancelled'"
-          class="visit-time visit-time-cancelled"
-        >
-          &times;
-        </div>
-        <div v-else-if="visit.nonStopPassage || !visit.departureTime"
-          class="visit-time visit-time-shrouded"
-          :key="`0-${updateCounter}`"
-        >
-          {{ ((visit.arrivalTime.valueOf() - Date.now()) / 1000 / 60).toFixed(0) }}
-        </div>
-        <div v-else class="visit-time" :key="`1-${updateCounter}`">
-          {{ ((visit.time.valueOf() - Date.now()) / 1000 / 60).toFixed(0) }}
-        </div>
-        <div class="visit-destination">
-          {{ visit.destination }}
-        </div>
-      </summary>
-
-      <div v-if="visit.operator === 'SNCF' && !visit.nonStopPassage" class="visit-details">
-        <div class="visit-details-times">
-          <div v-if="visit.arrivalTime">
-            <div class="visit-details-label">Arrivée</div>
-            <TimeClock :datetime="toDateTime(visit.arrivalTime)" />
-            <div v-if="visit.arrivalStatus !== 'onTime'" class="visit-details-status">{{ visit.arrivalStatus }}</div>
-          </div>
-          <div>
-            <div v-if="visit.plateform" class="visit-details-label">Voie</div>
-            <div>{{ visit.plateform }}</div>
-          </div>
-          <div v-if="visit.departureTime">
-            <div class="visit-details-label">Départ</div>
-            <TimeClock :datetime="toDateTime(visit.departureTime)" />
-            <div v-if="visit.departureStatus !== 'onTime'" class="visit-details-status">{{ visit.departureStatus }}</div>
-          </div>
-        </div>
-        <div class="visit-details-train">
-          <div v-if="visit.journeyCode" class="visit-details-label">
-            Mission
-            <span class="visit-details-train-value">
-              {{ visit.journeyCode }}
-            </span>
-          </div>
-          <div v-if="visit.trainNumber" class="visit-details-label">
-            Train no.
-            <span class="visit-details-train-value">
-              {{ visit.trainNumber }}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <div v-else-if="visit.operator === 'SNCF' && visit.nonStopPassage" class="visit-details">
-        <div class="visit-details-times">
-          <div>
-            <div class="visit-details-label">Passage sans arrêt</div>
-            <TimeClock v-if="visit?.passageTime" :datetime="toDateTime(visit.passageTime)" textGray />
-            <div v-if="visit.departureStatus !== 'onTime'" class="visit-details-status">{{ visit.departureStatus }}</div>
-          </div>
-          <div>
-            <div v-if="visit.plateform" class="visit-details-label">Voie</div>
-            <div>{{ visit.plateform }}</div>
-          </div>
-        </div>
-        <div class="visit-details-train">
-          <div v-if="visit.journeyCode" class="visit-details-label">
-            Mission
-            <span class="visit-details-train-value">
-              {{ visit.journeyCode }}
-            </span>
-          </div>
-          <div v-if="visit.trainNumber" class="visit-details-label">
-            Train no.
-            <span class="visit-details-train-value">
-              {{ visit.trainNumber }}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <div v-else class="visit-details">
-        <div class="visit-details-train">
-          <div v-if="visit.departureTime" class="visit-details-label">
-            Départ
-            <span class="visit-details-train-value">
-              <TimeClock :datetime="toDateTime(visit.departureTime)" />
-            </span>
-          </div>
-          <div v-else class="visit-details-label">
-            Arrivée
-            <span class="visit-details-train-value">
-              <TimeClock :datetime="toDateTime(visit.arrivalTime)" />
-            </span>
-          </div>
-          <div v-if="visit.trainNumber" class="visit-details-label">
-            Mission
-            <span class="visit-details-train-value">
-              {{ visit.trainNumber }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </details>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue'
-import { VisitType } from '@/utils/fetcher'
-import { toDateTime } from '@/utils/datetime'
-import TimeClock from '@/components/TimeClock.vue'
-
-export default Vue.extend({
-  name: 'StopTimetableVisits',
-  components: {
-    TimeClock,
-  },
-  props: {
-    visits: {} as PropType<VisitType[]>,
-  },
-  data: () => ({
-    updateCounter: 0,
-    updateInterval: 0,
-  }),
-  created () {
-    this.updateInterval = setInterval(() => {
-      ++this.updateCounter
-    }, 5000)
-  },
-  destroyed () {
-    clearInterval(this.updateInterval)
-  },
-  methods: {
-    toDateTime (date: Date) {
-      return toDateTime(date)
-    },
-  },
-})
-</script>
-
-<style scoped>
-
-.row {
-  margin: 0 -1rem;
-}
-
-.visit {
-  display: flex;
-  min-height: 2.8rem;
-  align-items: center;
-}
-
-.row:nth-child(even) {
-  background-color: #ededed;
-}
-
-.visit-code {
-  padding: 0.3rem 0.5rem 0.3rem 1rem;
-  margin-right: 0.5rem;
-  max-width: 2.4rem;
-  min-width: 2.4rem; /* Prevents weird shrink */
-  background: #fff;
-  font-size: 0.8rem;
-  font-weight: 700;
-  color: #555;
-  border-radius: 0 0.2rem 0.2rem 0;
-  overflow-x: hidden;
-}
-
-.visit-time {
-  background-color: #202b3b;
-  color: #ffc700;
-  font-size: 1.2rem;
-  font-weight: 600;
-  min-width: 2.2rem;
-  height: 2.2rem;
-  border-radius: 0.3rem;
-  line-height: 2.2rem;
-  text-align: center;
-}
-
-.visit-time-shrouded {
-  background-color: #C2C2C2;
-  color: #444;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.visit-time-cancelled {
-  background-color: #E59999;
-  color: #a03434;
-  font-size: 1.5rem;
-  font-weight: 500;
-}
-
-.visit-destination {
-  padding: 0.4rem 0.4rem 0.4rem 0.5rem;
-}
-
-.visit-details {
-  padding: 0.2rem 0 1rem 1rem;
-  overflow-x: auto;
-  color: #3f3f3f;
-}
-
-.visit-details-label {
-  color: #777;
-  font-size: 0.9rem;
-}
-
-.visit-details-times {
-  display: flex;
-  max-width: 20rem;
-  margin: 0 1rem 0.5rem 0;
-  justify-content: space-between;
-}
-
-.visit-details-status {
-  font-style: italic;
-  color: #515151;
-  font-size: 0.9rem;
-}
-
-.visit-details-train {
-  line-height: 1.5;
-}
-
-.visit-details-train-value {
-  margin-left: 0.25rem;
-  font-weight: 600;
-  color: #3f3f3f;
-}
-
-.datetime {
-  font-size: 1.1rem;
-}
-
-</style>
diff --git a/src/components/TimeClock.vue b/src/components/TimeClock.vue
deleted file mode 100644
index c3c239f..0000000
--- a/src/components/TimeClock.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <span
-      v-if="datetime.hh && datetime.mm && datetime.ss"
-      class="datetime"
-    >
-      <span :class="{ 'text-gray': textGray }">{{ datetime.hh }}</span>
-      <span class="separator">:</span>
-      <span :class="{ 'text-gray': textGray }">{{ datetime.mm }}</span>
-      <span class="seconds">{{ datetime.ss }}</span>
-    </span>
-</template>
-
-<script lang="ts">
-import { DateTime } from '@/utils/datetime'
-import Vue, { PropType } from 'vue'
-export default Vue.extend({
-  name: 'TimeClock',
-  props: {
-    datetime: {} as PropType<DateTime>,
-    textGray: Boolean,
-  },
-})
-</script>
-
-<style scoped>
-.datetime {
-  color: #444;
-  font-weight: 600;
-}
-
-.separator {
-  color: #999;
-  font-size: 0.9em;
-}
-
-.seconds {
-  padding-left: 0.1rem;
-  font-size: 0.75em;
-  color: #777;
-}
-
-.text-gray {
-  color: #777;
-}
-</style>
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsRow.vue b/src/components/ui/Schedules/UiSchedulesDetailsRow.vue
new file mode 100644
index 0000000..f98bc61
--- /dev/null
+++ b/src/components/ui/Schedules/UiSchedulesDetailsRow.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="schedules-details-row">
+    <span class="label">
+      {{ label }}
+    </span>
+    <span class="value">
+      {{ value }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'UiSchedulesDetailsRow',
+  props: {
+    label: String,
+    value: String,
+  },
+})
+</script>
+
+<style scoped>
+.schedules-details-row {
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.label {
+  color: #777;
+}
+
+.value {
+  margin-left: 0.25rem;
+  font-weight: 600;
+  color: #3f3f3f;
+}
+</style>
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
new file mode 100644
index 0000000..f5a990a
--- /dev/null
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <div class="label">
+      {{ label }}
+    </div>
+    <div class="value">
+      <UiClock :time="time" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import UiClock from '@/components/ui/UiClock.vue'
+import { Time, toTime } from '@/utils/time'
+
+export default Vue.extend({
+  name: 'UiSchedulesDetailsTimeInline',
+  components: {
+    UiClock,
+  },
+  props: {
+    label: String,
+    time: {} as PropType<Time>,
+  },
+  methods: {
+    toTime,
+  },
+})
+</script>
+
+<style scoped>
+.label,
+.value {
+  display: inline-block;
+  line-height: 1.5;
+}
+
+.label {
+  margin-right: 0.5rem;
+  color: #777;
+  font-size: 0.9rem;
+}
+
+.value {
+  font-size: 1.1rem;
+}
+</style>
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
new file mode 100644
index 0000000..b49c1e9
--- /dev/null
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="schedules-details-time-wrapped">
+    <div class="label">
+      {{ label }}
+    </div>
+    <UiClock
+      :time="time"
+      :text-gray="isTimeTextGray"
+    />
+    <div
+      v-if="sublabel"
+      class="sublabel"
+    >
+      {{ sublabel }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import UiClock from '@/components/ui/UiClock.vue'
+import { Time, toTime } from '@/utils/time'
+
+export default Vue.extend({
+  name: 'UiSchedulesDetailsTimeWrapped',
+  components: {
+    UiClock,
+  },
+  props: {
+    label: String,
+    time: {} as PropType<Time>,
+    isTimeTextGray: {
+      type: Boolean,
+      default: false,
+    },
+    sublabel: String,
+  },
+  methods: {
+    toTime,
+  },
+})
+</script>
+
+<style scoped>
+.schedules-details-time-wrapped {
+  margin-bottom: 0.5rem;
+}
+
+.sublabel {
+  font-style: italic;
+  color: #515151;
+  font-size: 0.9rem;
+}
+</style>
diff --git a/src/components/ui/Schedules/UiSchedulesTime.vue b/src/components/ui/Schedules/UiSchedulesTime.vue
new file mode 100644
index 0000000..f16200a
--- /dev/null
+++ b/src/components/ui/Schedules/UiSchedulesTime.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    v-if="variant === 'alert'"
+    class="visit-time visit-time-alert"
+  >
+    &times;
+  </div>
+  <div
+    v-else-if="variant === 'shaded'"
+    class="visit-time visit-time-shaded"
+  >
+    {{ time }}
+  </div>
+  <div
+    v-else
+    class="visit-time"
+  >
+    {{ time }}
+  </div>
+</template>
+<script lang="ts">
+
+import { PropType } from 'vue'
+
+export type UiSchedulesTimeVariant = 'normal' | 'alert' | 'shaded'
+
+export default {
+  name: 'UiSchedulesTime',
+  props: {
+    variant: String as PropType<UiSchedulesTimeVariant>,
+    time: String,
+  },
+}
+</script>
+<style scoped>
+
+.visit-time {
+  background-color: #202b3b;
+  color: #ffc700;
+  font-size: 1.2rem;
+  font-weight: 600;
+  min-width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 0.3rem;
+  line-height: 2.2rem;
+  text-align: center;
+}
+
+.visit-time-shaded {
+  background-color: #C2C2C2;
+  color: #444;
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.visit-time-alert {
+  background-color: #E59999;
+  color: #a03434;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+</style>
diff --git a/src/components/ui/UiClock.vue b/src/components/ui/UiClock.vue
new file mode 100644
index 0000000..d5cf84d
--- /dev/null
+++ b/src/components/ui/UiClock.vue
@@ -0,0 +1,45 @@
+<template>
+  <span
+    v-if="time.hh && time.mm && time.ss"
+    class="datetime"
+  >
+    <span :class="{ 'text-gray': textGray }">{{ time.hh }}</span>
+    <span class="separator">:</span>
+    <span :class="{ 'text-gray': textGray }">{{ time.mm }}</span>
+    <span class="seconds">{{ time.ss }}</span>
+  </span>
+</template>
+
+<script lang="ts">
+import { Time } from '@/utils/time'
+import Vue, { PropType } from 'vue'
+export default Vue.extend({
+  name: 'UiClock',
+  props: {
+    time: {} as PropType<Time>,
+    textGray: Boolean,
+  },
+})
+</script>
+
+<style scoped>
+.datetime {
+  color: #444;
+  font-weight: 600;
+}
+
+.separator {
+  color: #999;
+  font-size: 0.9em;
+}
+
+.seconds {
+  padding-left: 0.1rem;
+  font-size: 0.75em;
+  color: #777;
+}
+
+.text-gray {
+  color: #777;
+}
+</style>
diff --git a/src/components/ui/UiContentTitle.vue b/src/components/ui/UiContentTitle.vue
new file mode 100644
index 0000000..43d9aca
--- /dev/null
+++ b/src/components/ui/UiContentTitle.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h2>
+      <slot />
+    </h2>
+    <hr>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'UiContentTitle',
+})
+</script>
+
+<style scoped>
+h2 {
+  font-size: 1.1rem;
+  margin: 2rem 0 0.1rem 0;
+}
+
+hr {
+  margin: 0;
+  height: 2px;
+  max-width: 15rem;
+  background-color: #2f2f2f;
+  border: 0;
+}
+</style>
diff --git a/src/components/ui/UiIcon.vue b/src/components/ui/UiIcon.vue
new file mode 100644
index 0000000..128db23
--- /dev/null
+++ b/src/components/ui/UiIcon.vue
@@ -0,0 +1,67 @@
+<template>
+  <img
+    :class="{
+      'size-sm': size === 'sm',
+      'size-md': size === 'md',
+      'size-lg': size === 'lg',
+      'fade-in': fadeIn,
+    }"
+    :src="src"
+    :alt="alt"
+  >
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+export type UiIconSize = 'sm' | 'md' | 'lg'
+
+export default Vue.extend({
+  name: 'UiIcon',
+  props: {
+    src: String,
+    alt: String,
+    size: String as PropType<UiIconSize>,
+    fadeIn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>
+
+<style scoped>
+img {
+  /* Prevents alt text to display on image load */
+  color: transparent;
+}
+
+.size-sm {
+  width: 1.35rem;
+  height: 1.35rem;
+}
+
+.size-md {
+  width: 2rem;
+  height: 2rem;
+}
+
+.size-lg {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+
+.fade-in {
+  opacity: 1;
+  animation: fadeIn 600ms ease;
+}
+
+@keyframes fadeIn {
+  0%{
+    opacity: 0;
+  }
+  100%{
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/ui/UiPageTitle.vue b/src/components/ui/UiPageTitle.vue
new file mode 100644
index 0000000..f48466e
--- /dev/null
+++ b/src/components/ui/UiPageTitle.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>
+      {{ text }}
+    </h1>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'UiContentTitle',
+  props: {
+    text: String,
+  },
+})
+</script>
+
+<style scoped>
+h1 {
+  font-size: 1.5rem;
+  display: inline-block;
+  margin: 0.5rem 1rem 0 0;
+}
+</style>
diff --git a/src/components/ui/UiPrevNext.vue b/src/components/ui/UiPrevNext.vue
new file mode 100644
index 0000000..c183581
--- /dev/null
+++ b/src/components/ui/UiPrevNext.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="prev-next">
+    <ul class="prev-list-items">
+      <li
+        v-for="({ label, link }, i) in prevItems"
+        :key="i"
+        class="prev"
+      >
+        <router-link :to="link">
+          <span class="label">
+            {{ label }}
+          </span>
+        </router-link>
+      </li>
+    </ul>
+    <ul class="next-list-items">
+      <li
+        v-for="({ label, link }, i) in nextItems"
+        :key="i"
+        class="next"
+      >
+        <router-link :to="link">
+          <span class="label">
+            {{ label }}
+          </span>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+export type PrevNextItem = {
+  label: string,
+  link: string,
+}
+
+export default Vue.extend({
+  name: 'UiPrevNext',
+  props: {
+    prevItems: [] as PropType<PrevNextItem[]>,
+    nextItems: [] as PropType<PrevNextItem[]>,
+  },
+})
+</script>
+
+<style scoped>
+.prev-next {
+  display: flex;
+  margin-top: 1rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.prev-list-items,
+.next-list-items {
+  width: calc(50% - 0.25rem);
+}
+
+.prev a,
+.next a {
+  display: flex;
+  padding: 0.8rem 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.95rem;
+  background-color: #dfdfdf;
+  border-radius: 0.4rem;
+  text-align: center;
+}
+
+.prev a::before {
+  content: '〈';
+}
+.next a::after {
+  content: '〉';
+}
+
+.label {
+  display: inline-block;
+  width: 100%;
+  padding: 0.1rem 0.3rem 0 0.3rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 3499c11..b04af5a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,10 @@ import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 import './registerServiceWorker'
 import App from './App.vue'
+import SettingsPage from '@/pages/SettingsPage.vue'
+import TimetablesHubPage from '@/pages/TimetablesHubPage.vue'
+import TimetablesLinePage from '@/pages/TimetablesLinePage.vue'
+import TimetablesStopPage from '@/pages/TimetablesStopPage.vue'
 
 Vue.config.productionTip = false
 Vue.use(VueRouter)
@@ -11,13 +15,15 @@ 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/:tab', component: TimetablesHubPage },
+  { path: '/timetables/:tab/:line', component: TimetablesLinePage },
+  { path: '/timetables/:tab/:line/:stop', component: TimetablesStopPage },
 ]
 
 const router = new VueRouter({
+  mode: 'history',
+  base: '/app',
   routes,
 })
 
@@ -56,5 +62,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/SettingsPage.vue b/src/pages/SettingsPage.vue
index 50ffeec..0b60227 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -3,7 +3,12 @@
     <h1>Paramètres</h1>
     <fieldset>
       <legend>Schéma de lignes</legend>
-      <button class="btn-synchronize" @click="synchronize">Mettre à jour</button>
+      <button
+        class="btn-synchronize"
+        @click="synchronize"
+      >
+        Mettre à jour
+      </button>
       <p>Dernière mise à jour : {{ updatedAt.toLocaleString() }}</p>
     </fieldset>
   </div>
diff --git a/src/pages/TabPage/New.vue b/src/pages/TabPage/New.vue
deleted file mode 100644
index 0e36cb4..0000000
--- a/src/pages/TabPage/New.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="tab-page-new">
-    <div v-for="category in linesByCategory" :key="category.name">
-      <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}`"
-      >
-        <LineIcon :lineSlugName="line.slugName" theme="dark" fadeIn />
-      </router-link>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import LineIcon from '@/components/Line/Icon.vue'
-import { getLinesByCategory } from '@/utils/localstore/lines'
-
-export default Vue.extend({
-  name: 'TabPageNew',
-  components: { LineIcon },
-  computed: {
-    linesByCategory () {
-      return getLinesByCategory()
-    },
-  },
-})
-</script>
-
-<style scoped>
-.tab-page-new {
-  padding: 1rem;
-}
-
-h2 {
-  font-size: 1.1rem;
-  margin: 2rem 0 0.1rem 0;
-}
-
-hr {
-  margin: 0;
-  height: 2px;
-  max-width: 15rem;
-  background-color: #2f2f2f;
-  border: 0;
-}
-
-.icon-line {
-  display: inline-block;
-  margin: 1rem 1rem 0 0;
-}
-
-.icon-line img {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-</style>
diff --git a/src/pages/TabPage/index.vue b/src/pages/TabPage/index.vue
deleted file mode 100644
index 56136a1..0000000
--- a/src/pages/TabPage/index.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <TabPageStop v-if="$route.params.line && $route.params.stop" />
-    <TabPageLine v-else-if="$route.params.line" />
-    <TabPageNew v-else />
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import TabPageNew from '@/pages/TabPage/New.vue'
-import TabPageLine from '@/pages/TabPage/Line.vue'
-import TabPageStop from '@/pages/TabPage/Stop.vue'
-
-export default Vue.extend({
-  name: 'TabPage',
-  components: {
-    TabPageNew,
-    TabPageLine,
-    TabPageStop,
-  },
-})
-</script>
-
-<style scoped>
-</style>
diff --git a/src/pages/TimetablesHubPage.vue b/src/pages/TimetablesHubPage.vue
new file mode 100644
index 0000000..fbfb96a
--- /dev/null
+++ b/src/pages/TimetablesHubPage.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="page">
+    <div
+      v-for="category in linesByCategory"
+      :key="category.name"
+    >
+      <DesignContentTitle>{{ category.name }}</DesignContentTitle>
+      <router-link
+        v-for="line in category.lines"
+        :key="line.slugName"
+        class="icon-line"
+        :to="`/timetables/${$route.params.tab}/${line.slugName}`"
+      >
+        <LineIcon
+          :line-slug-name="line.slugName"
+          color="dark"
+          size="lg"
+          fade-in
+        />
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import LineIcon from '@/components/LineIcon.vue'
+import { getLinesByCategory } from '@/utils/localstore/lines'
+import DesignContentTitle from '@/components/ui/UiContentTitle.vue'
+
+export default Vue.extend({
+  name: 'TimetablesHubPage',
+  components: {
+    LineIcon,
+    DesignContentTitle,
+  },
+  computed: {
+    linesByCategory () {
+      return getLinesByCategory()
+    },
+  },
+})
+</script>
+
+<style scoped>
+.page {
+  padding: 1rem;
+}
+
+.icon-line {
+  display: inline-block;
+  margin: 1rem 1rem 0 0;
+}
+</style>
diff --git a/src/pages/TabPage/Line.vue b/src/pages/TimetablesLinePage.vue
similarity index 53%
rename from src/pages/TabPage/Line.vue
rename to src/pages/TimetablesLinePage.vue
index d549269..95b9ae5 100644
--- a/src/pages/TabPage/Line.vue
+++ b/src/pages/TimetablesLinePage.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="tab-page-line">
-    <LineRouteMap :line="$route.params.line"/>
+  <div class="page">
+    <LineRouteMap :line="$route.params.line" />
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import LineRouteMap from '@/components/Line/RouteMap/index.vue'
+import LineRouteMap from '@/components/LineMap/LineMap.vue'
 
 export default Vue.extend({
-  name: 'TabPageLine',
+  name: 'TimetablesLinePage',
   components: { LineRouteMap },
 })
 </script>
 
 <style scoped>
-.tab-page-line {
+.page {
   padding: 10rem 1rem 4rem 1rem;
 }
 </style>
diff --git a/src/pages/TabPage/Stop.vue b/src/pages/TimetablesStopPage.vue
similarity index 75%
rename from src/pages/TabPage/Stop.vue
rename to src/pages/TimetablesStopPage.vue
index ddc1bc8..e1cb0a1 100644
--- a/src/pages/TabPage/Stop.vue
+++ b/src/pages/TimetablesStopPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tab-page-stop">
+  <div class="page">
     <StopHeader :stop="stop" />
     <StopPrevNextStops :stop="stop" />
     <StopTimetable :stop="stop" />
@@ -9,13 +9,13 @@
 <script lang="ts">
 import Vue from 'vue'
 import { StopType } from '@/utils/parser'
-import StopTimetable from '@/components/Stop/Timetable/index.vue'
-import StopHeader from '@/components/Stop/Header.vue'
-import StopPrevNextStops from '@/components/Stop/PrevNextStops.vue'
+import StopTimetable from '@/components/Stop/StopSchedules.vue'
+import StopHeader from '@/components/Stop/StopHeader.vue'
+import StopPrevNextStops from '@/components/Stop/StopPrevNextStops.vue'
 import { getStop } from '@/utils/localstore/stops'
 
 export default Vue.extend({
-  name: 'TabPageStop',
+  name: 'TimetablesStopPage',
   components: {
     StopTimetable,
     StopHeader,
@@ -24,6 +24,14 @@ export default Vue.extend({
   data: () => ({
     stop: {} as StopType,
   }),
+  watch: {
+    '$route.path': {
+      handler () {
+        this.update()
+      },
+      deep: true,
+    },
+  },
   created () {
     this.update()
   },
@@ -33,19 +41,11 @@ export default Vue.extend({
       this.stop = getStop(this.$route.params.line, this.$route.params.stop)
     },
   },
-  watch: {
-    '$route.path': {
-      handler () {
-        this.update()
-      },
-      deep: true,
-    },
-  },
 })
 </script>
 
 <style scoped>
-.tab-page-stop {
+.page {
   padding: 0 1rem 8rem 1rem;
 }
 </style>
diff --git a/src/utils/fetcher.ts b/src/utils/fetcher.ts
index 0e727e0..6d3d457 100644
--- a/src/utils/fetcher.ts
+++ b/src/utils/fetcher.ts
@@ -13,7 +13,7 @@ export type VisitType = {
 
   time: Date,
 
-  plateform: string,
+  platform: string,
   arrivalTime: Date,
   arrivalStatus: string,
   departureTime: Date,
@@ -104,7 +104,7 @@ const formatData = (visit: any) => {
 
     time: new Date(mvjmc?.ExpectedDepartureTime),
 
-    plateform: mvjmc?.ArrivalPlatformName?.value,
+    platform: mvjmc?.ArrivalPlatformName?.value,
     arrivalTime: mvjmc?.ExpectedArrivalTime && new Date(mvjmc.ExpectedArrivalTime),
     arrivalStatus: mvjmc?.ArrivalStatus,
     departureTime: mvjmc?.ExpectedDepartureTime && new Date(mvjmc.ExpectedDepartureTime),
diff --git a/src/utils/localstore/synchronizer.ts b/src/utils/localstore/synchronizer.ts
index 6128bc9..4746d80 100644
--- a/src/utils/localstore/synchronizer.ts
+++ b/src/utils/localstore/synchronizer.ts
@@ -8,11 +8,11 @@ export const lastUpdatedAt = () => {
 
 export const synchronize = async () => {
   const lines = await synchronizeFile('/schemas/lines.json', 'lines')
-
-  for (const line of Object.values(lines) as any[]) {
-    synchronizeLine(line.slugName)
-  }
-  localStorage.setItem('lines.updatedAt', new Date().toISOString())
+  return Promise.all(
+    Object.values(lines).map((line: any) => synchronizeLine(line.slugName)),
+  ).then(() => {
+    localStorage.setItem('lines.updatedAt', new Date().toISOString())
+  })
 }
 
 export const synchronizeLine = async (line: string) => {
diff --git a/src/utils/datetime.ts b/src/utils/time.ts
similarity index 75%
rename from src/utils/datetime.ts
rename to src/utils/time.ts
index 80c2e9e..d7d3717 100644
--- a/src/utils/datetime.ts
+++ b/src/utils/time.ts
@@ -1,10 +1,10 @@
-export type DateTime = {
+export type Time = {
   hh: string,
   mm: string,
   ss: string
 }
 
-export const toDateTime = (date: Date) => {
+export const toTime = (date: Date) => {
   return {
     hh: date.getHours().toString(),
     mm: date.getMinutes().toString().padStart(2, '0'),