diff --git a/src/components/Alert.vue b/src/components/Alert.vue
index bb6b586..db277ba 100644
--- a/src/components/Alert.vue
+++ b/src/components/Alert.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 mb-4 text-sm" v-bind:class="typeClasses[type]">
+  <div class="p-4 text-sm" v-bind:class="typeClasses[type]">
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/DetailedInformationRail.vue b/src/components/DetailedInformationRail.vue
index 1d43531..ff03349 100644
--- a/src/components/DetailedInformationRail.vue
+++ b/src/components/DetailedInformationRail.vue
@@ -7,15 +7,6 @@
     </div>
 
     <div class="text-gray-900 dark:text-gray-200 text-base">
-      <div class="inline-block mr-4 text-sm font-medium text-gray-500">
-        <span v-if="journey.DetailedRailInformation.VehicleTypeName !== ''">
-          {{ journey.DetailedRailInformation.VehicleTypeName }}
-        </span>
-        <span v-else>
-          {{ journey.DetailedRailInformation.VehicleType }}
-        </span>
-      </div>
-
       <span 
         class="material-symbols-outlined text-base" 
         v-if="journey.DetailedRailInformation?.AirConditioning"
diff --git a/src/views/Journeys/View.vue b/src/views/Journeys/View.vue
index 0416b76..61c1662 100644
--- a/src/views/Journeys/View.vue
+++ b/src/views/Journeys/View.vue
@@ -33,9 +33,9 @@
     <div class="md:hidden">
       <NavTabBar :tabs="tabs" :currentTab="currentTab" :changeTab="changeTab" />
     </div>
-    <div class="flex flex-col-reverse md:flex-row h-full">
+    <div class="flex flex-col-reverse mt-2 md:flex-row h-full">
       <div
-        class="basis-full md:basis-1/2 md:mr-2 mt-4 md:mt-0 md:block"
+        class="basis-full md:basis-1/2 md:mr-2 md:mt-0 md:block"
         v-bind:class="{ hidden: this.currentTab !== 'timeline' }"
       >
         <Card>
@@ -201,94 +201,106 @@
       </div>
       <div
         class="basis-full md:basis-1/2 md:ml-2 h-[450px] md:h-[400px] md:block"
-        v-bind:class="{ hidden: this.currentTab !== 'map' }"
       >
-        <div v-if="journey?.RealtimeJourney?.Occupancy.OccupancyAvailable">
-          <Card class="mb-4">
-            <div><strong>Occupancy: </strong> {{ pretty.occupancyDescription(journey?.RealtimeJourney?.Occupancy.TotalPercentageOccupancy) }}</div>
-            <div v-if="journey?.RealtimeJourney?.Occupancy.ActualValues">
-              <div v-if="journey?.RealtimeJourney?.Occupancy.SeatedInformation">
-                <strong>Seats: </strong>
-                {{ journey?.RealtimeJourney?.Occupancy.SeatedOccupancy }} / {{ journey?.RealtimeJourney?.Occupancy.SeatedCapacity }}
+        <div class="md:block" v-bind:class="{ hidden: this.currentTab !== 'details' }">
+          <div v-if="journey?.RealtimeJourney?.Occupancy.OccupancyAvailable">
+            <Card class="mb-4">
+              <div><strong>Occupancy: </strong> {{ pretty.occupancyDescription(journey?.RealtimeJourney?.Occupancy.TotalPercentageOccupancy) }}</div>
+              <div v-if="journey?.RealtimeJourney?.Occupancy.ActualValues">
+                <div v-if="journey?.RealtimeJourney?.Occupancy.SeatedInformation">
+                  <strong>Seats: </strong>
+                  {{ journey?.RealtimeJourney?.Occupancy.SeatedOccupancy }} / {{ journey?.RealtimeJourney?.Occupancy.SeatedCapacity }}
+                </div>
+                <div v-if="journey?.RealtimeJourney?.Occupancy.WheelchairInformation">
+                  <strong>Wheelchair Spaces: </strong>
+                  {{ journey?.RealtimeJourney?.Occupancy.WheelchairOccupancy }} / {{ journey?.RealtimeJourney?.Occupancy.WheelchairCapacity }}
+                </div>
               </div>
-              <div v-if="journey?.RealtimeJourney?.Occupancy.WheelchairInformation">
-                <strong>Wheelchair Spaces: </strong>
-                {{ journey?.RealtimeJourney?.Occupancy.WheelchairOccupancy }} / {{ journey?.RealtimeJourney?.Occupancy.WheelchairCapacity }}
+            </Card>
+          </div>
+
+          <div v-if="journey?.DetailedRailInformation">
+            <Card class="mb-4">
+              <div v-if="journey.DetailedRailInformation.VehicleTypeName !== ''">
+                <strong>Vehicle: </strong> {{ journey.DetailedRailInformation.VehicleTypeName }}
+              </div>
+              <div v-else>
+                <strong>Vehicle ID: </strong> {{ journey.DetailedRailInformation.VehicleType }}
+              </div>
+              <div>
+                <strong>Speed: </strong> {{ journey.DetailedRailInformation.SpeedKMH }} km/h
+              </div>
+              <div>
+                <strong>Fuel: </strong> {{ journey.DetailedRailInformation.PowerType }}
               </div>
-            </div>
-          </Card>
-        </div>
 
-        <div v-if="journey?.DetailedRailInformation">
-          <Card class="mb-4">
-            <div>
-              <strong>Speed: </strong> {{ journey.DetailedRailInformation.SpeedKMH }} km/h
-            </div>
+              <div>
+                <strong>Seating: </strong> {{ journey.DetailedRailInformation.Seating }}
+              </div>
 
-            <div>
-              <strong>Seating: </strong> {{ journey.DetailedRailInformation.Seating }}
-            </div>
+              <div>
+                <strong>Sleepers: </strong> {{ journey.DetailedRailInformation.SleeperAvailable }}
+              </div>
+              <div v-if="journey.DetailedRailInformation.SleeperAvailable">
+                <strong>Sleeper for: </strong> {{ journey.DetailedRailInformation.Sleepers }}
+              </div>
 
-            <div>
-              <strong>Sleepers: </strong> {{ journey.DetailedRailInformation.SleeperAvailable }}
-            </div>
-            <div v-if="journey.DetailedRailInformation.SleeperAvailable">
-              <strong>Sleeper for: </strong> {{ journey.DetailedRailInformation.Sleepers }}
-            </div>
+              <div v-if="journey.DetailedRailInformation.CateringAvailable">
+                <strong>Catering Description: </strong> {{ journey.DetailedRailInformation.CateringDescription }}
+              </div>
 
-            <div v-if="journey.DetailedRailInformation.CateringAvailable">
-              <strong>Catering Description: </strong> {{ journey.DetailedRailInformation.CateringDescription }}
-            </div>
+              <div>
+                <strong>Driver only: </strong> {{ journey.DetailedRailInformation.DriverOnly }}
+              </div>
+              <div>
+                <strong>Guard required: </strong> {{ journey.DetailedRailInformation.GuardRequired }}
+              </div>
 
-            <div>
-              <strong>Driver only: </strong> {{ journey.DetailedRailInformation.DriverOnly }}
-            </div>
-            <div>
-              <strong>Guard required: </strong> {{ journey.DetailedRailInformation.GuardRequired }}
-            </div>
+              <div>
+                <strong>Reservation Required: </strong> {{ journey.DetailedRailInformation.ReservationRequired }}
+              </div>
+              <div>
+                <strong>Reservation Required for bike: </strong> {{ journey.DetailedRailInformation.ReservationBikeRequired }}
+              </div>
+              <div>
+                <strong>Reservation Recommended: </strong> {{ journey.DetailedRailInformation.ReservationRecommended }}
+              </div>
+            </Card>
+          </div>
+        </div>
 
-            <div>
-              <strong>Reservation Required: </strong> {{ journey.DetailedRailInformation.ReservationRequired }}
-            </div>
-            <div>
-              <strong>Reservation Required for bike: </strong> {{ journey.DetailedRailInformation.ReservationBikeRequired }}
-            </div>
-            <div>
-              <strong>Reservation Recommended: </strong> {{ journey.DetailedRailInformation.ReservationRecommended }}
+        <div class="md:block h-[400px]" v-bind:class="{ hidden: this.currentTab !== 'map' }">
+          <mapbox-map
+            accessToken="pk.eyJ1IjoiYnJpdGJ1cyIsImEiOiJjbDExNzVsOHIwajAxM2Rtc3A4ZmEzNjU2In0.B-307FL4WGtmuwEfQjabOg"
+            mapStyle="mapbox://styles/britbus/cl1177uct008715o8qnee8str"
+            style="height: 100%"
+            :zoom="zoom"
+            :center="center"
+            @loaded="mapLoaded"
+          >
+            <div v-for="(point, index) in this.journeyPoints" v-bind:key="index">
+              <mapbox-marker :lngLat="point.location">
+                <template v-slot:icon>
+                  <img src="/icons/bus-stop-station-svgrepo-com-16x16.png">
+                </template>
+              </mapbox-marker>
+
+              <mapbox-geogeometry-raw :source="point.track" v-if="point.track">
+                <mapbox-geogeometry-line :width="5" :color="point.active ? 'green' : 'gray'" />
+              </mapbox-geogeometry-raw>
             </div>
-          </Card>
-        </div>
 
-        <mapbox-map
-          accessToken="pk.eyJ1IjoiYnJpdGJ1cyIsImEiOiJjbDExNzVsOHIwajAxM2Rtc3A4ZmEzNjU2In0.B-307FL4WGtmuwEfQjabOg"
-          mapStyle="mapbox://styles/britbus/cl1177uct008715o8qnee8str"
-          style="height: 100%"
-          :zoom="zoom"
-          :center="center"
-          @loaded="mapLoaded"
-        >
-          <div v-for="(point, index) in this.journeyPoints" v-bind:key="index">
-            <mapbox-marker :lngLat="point.location">
+            <mapbox-marker 
+              :lngLat="this.journey.RealtimeJourney.VehicleLocation.coordinates"
+              :rotation="this.journey.RealtimeJourney.VehicleBearing-90" 
+              v-if="this.journey.RealtimeJourney && this.journey.RealtimeJourney.VehicleLocation.coordinates.length === 2"
+            >
               <template v-slot:icon>
-                <img src="/icons/bus-stop-station-svgrepo-com-16x16.png">
+                <img src="/icons/bus-svgrepo-com-32x32.png">
               </template>
             </mapbox-marker>
-
-            <mapbox-geogeometry-raw :source="point.track" v-if="point.track">
-              <mapbox-geogeometry-line :width="5" :color="point.active ? 'green' : 'gray'" />
-            </mapbox-geogeometry-raw>
-          </div>
-
-          <mapbox-marker 
-            :lngLat="this.journey.RealtimeJourney.VehicleLocation.coordinates"
-            :rotation="this.journey.RealtimeJourney.VehicleBearing-90" 
-            v-if="this.journey.RealtimeJourney && this.journey.RealtimeJourney.VehicleLocation.coordinates.length === 2"
-          >
-            <template v-slot:icon>
-              <img src="/icons/bus-svgrepo-com-32x32.png">
-            </template>
-          </mapbox-marker>
-        </mapbox-map>
+          </mapbox-map>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/views/Stops/View.vue b/src/views/Stops/View.vue
index 82298d0..8bd8b47 100644
--- a/src/views/Stops/View.vue
+++ b/src/views/Stops/View.vue
@@ -8,14 +8,14 @@
         {{ this.stop.OtherNames.Indicator }} {{ this.stop.OtherNames.Landmark }}
       </span>
 
-      <div class="md:float-right inline overflow-x-scroll w-full">
-        <div class="dx overflow-y-hidden w-full whitespace-nowrap text-right">
+      <div class="inline overflow-x-scroll w-full">
+        <div class="dx overflow-y-hidden w-full whitespace-nowrap">
           <router-link
               :to="{'name': 'services/view', params: {'id': service.PrimaryIdentifier}}"
               v-for="service in this.stop.Services" v-bind:key="service.PrimaryIdentifier"
           >
             <ServiceIcon
-              class="ml-2"
+              class="mr-2"
               :service="service"
             />
           </router-link>
@@ -43,18 +43,22 @@
           <ServiceAlert :alert="serviceAlert" v-for="(serviceAlert, id) in this.serviceAlerts" v-bind:key="id" />
         </div>
 
+        <NavTabBar :tabs="tabs" :currentTab="currentTab" :changeTab="changeTab" />
+
         <div class="flex flex-col-reverse md:flex-row h-full">
-          <div class="basis-full md:basis-1/2 md:mr-2 mt-4 md:mt-0">  
+          <div class="basis-full md:basis-1/2 md:mr-2 mt-2" v-bind:class="{ hidden: this.currentTab !== 'departures' }">  
             <Card>
-              <template #title>
-                Departures
-              </template>
               <span v-if="this.loadingDepartures" class="text-xs font-semibold inline-block py-1 px-2 rounded text-amber-600 bg-amber-200 mr-1">
                 Loading...
               </span>
               <DeparturesList v-else :stop="this.stop" :departures="this.departures"/>
             </Card>
           </div>
+          <div class="basis-full md:basis-1/2 md:mr-2 mt-2" v-bind:class="{ hidden: this.currentTab !== 'arrivals' }">  
+            <Card>
+              Not implemented yet
+            </Card>
+          </div>
           <div class="hidden md:block basis-full md:basis-1/2 md:ml-2 h-[150px] md:h-[400px]">
             <mapbox-map 
               accessToken="pk.eyJ1IjoiYnJpdGJ1cyIsImEiOiJjbDExNzVsOHIwajAxM2Rtc3A4ZmEzNjU2In0.B-307FL4WGtmuwEfQjabOg"
@@ -100,6 +104,7 @@ import ServiceIcon from '@/components/ServiceIcon.vue'
 import DeparturesList from '@/components/DeparturesList.vue'
 import ServiceAlert from '@/components/ServiceAlert.vue'
 import Alert from '@/components/Alert.vue'
+import NavTabBar from "@/components/NavTabBar.vue"
 import axios from 'axios'
 import API from '@/API'
 import Pretty from '@/pretty'
@@ -126,7 +131,19 @@ export default {
       currentZoom: 11.5,
 
       refreshTimer: null,
-      serviceAlertsRefreshTimer: null
+      serviceAlertsRefreshTimer: null,
+
+      currentTab: "departures",
+      tabs: [
+        {
+          id: "departures",
+          name: "Departures",
+        },
+        {
+          id: "arrivals",
+          name: "Arrivals",
+        }
+      ]
     }
   },
   components: {
@@ -136,8 +153,12 @@ export default {
     ServiceAlert,
     Alert,
     DeparturesList,
+    NavTabBar
   },
   methods: {
+    changeTab(newTab) {
+      this.currentTab = newTab
+    },
     getStop() {
       axios
         .get(`${API.URL}/core/stops/${this.$route.params.id}`)