diff --git a/src/components/SceneryView/SceneryHistory.vue b/src/components/SceneryView/SceneryHistory.vue
index ad397dd..dbc8909 100644
--- a/src/components/SceneryView/SceneryHistory.vue
+++ b/src/components/SceneryView/SceneryHistory.vue
@@ -194,6 +194,7 @@ export default defineComponent({
     transition: all 100ms ease-out 100ms;
   }
 }
+
 .scenery-history {
   height: 600px;
   overflow-y: hidden;
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index 68573ca..0703658 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -29,14 +29,18 @@
 
       <SceneryHeader :station="stationInfo" />
 
-      <div v-if="viewMode == 'info'">
-        <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
-        <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
-      </div>
+      <transition name="scenery-view-anim" mode="out-in">
+        <div :key="viewMode">
+          <div v-if="viewMode == 'info'">
+            <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
+            <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
+          </div>
 
-      <div v-else-if="viewMode == 'history'">
-        <SceneryHistory :name="stationInfo.name" />
-      </div>
+          <div v-else-if="viewMode == 'history'">
+            <SceneryHistory :name="stationInfo.name" />
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -118,6 +122,21 @@ export default defineComponent({
 
 $sceneryBgCol: #333;
 
+.scenery-view-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 100ms ease-out 100ms;
+  }
+}
+
 .scenery {
   &-view {
     min-height: 100%;