diff --git a/src/App.vue b/src/App.vue
index 10d9eec..64e05b4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, provide, ref } from 'vue';
+import { computed, defineComponent, provide, ref, watch } from 'vue';
 
 import Clock from './components/App/Clock.vue';
 
@@ -163,6 +163,31 @@ export default defineComponent({
   async mounted() {
     this.updateStorage();
     this.setReleaseURL();
+
+    function preventScroll(e: Event) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+
+      return false;
+    }
+
+    watch(
+      () => this.store.blockScroll,
+      (value) => {
+        if (value) {
+          document.body.classList.add('no-scroll');
+          // document.querySelector('#app')!.addEventListener('wheel', preventScroll, { passive: false,  });
+          // document.querySelector('#app')!.addEventListener('touchmove', preventScroll, { passive: false });
+          return;
+        }
+
+        document.body.classList.remove('no-scroll');
+
+        // document.querySelector('#app')!.removeEventListener('wheel', preventScroll);
+        // document.querySelector('#app')!.removeEventListener('touchmove', preventScroll);
+      }
+    );
   },
 
   methods: {
diff --git a/src/components/JournalView/JournalDispatchers.vue b/src/components/JournalView/JournalDispatchers.vue
index 0291be1..a332767 100644
--- a/src/components/JournalView/JournalDispatchers.vue
+++ b/src/components/JournalView/JournalDispatchers.vue
@@ -1,425 +1,425 @@
-<template>
-  <section class="journal-timetables">
-    <div class="journal-wrapper">
-      <div class="journal_top-bar">
-        <JournalOptions
-          @on-filter-change="search"
-          @on-input-change="search"
-          @on-sorter-change="search"
-          :sorter-option-ids="['timestampFrom', 'duration']"
-        />
-
-        <!-- <DispatcherStats /> -->
-      </div>
-
-      <div class="journal-list">
-        <div class="list-wrapper" ref="scrollElement">
-          <transition name="warning" mode="out-in">
-            <div :key="historyDataStatus.status">
-              <Loading v-if="isDataLoading || isDataInit" />
-
-              <div v-else-if="isDataError" class="journal_warning error">
-                {{ $t('app.error') }}
-              </div>
-
-              <div class="journal_warning" v-else-if="historyList.length == 0">
-                {{ $t('app.no-result') }}
-              </div>
-
-              <ul v-else>
-                <transition-group name="journal-list-anim">
-                  <li v-for="(doc, i) in computedHistoryList" :key="doc.id">
-                    <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
-                      <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
-                    </div>
-
-                    <div
-                      class="journal_item"
-                      :class="{ online: doc.isOnline }"
-                      @click="navigateToScenery(doc.stationName, doc.isOnline)"
-                      @keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
-                      tabindex="0"
-                    >
-                      <span>
-                        <b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b>
-                        <span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
-                        <span class="region-badge" :class="doc.region">PL1</span>
-                      </span>
-                      <span>
-                        <span :data-status="doc.isOnline">
-                          {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
-                        </span>
-                        <span>
-                          {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-                        </span>
-
-                        <span v-if="doc.currentDuration && doc.isOnline">
-                          ({{ calculateDuration(doc.currentDuration) }})
-                        </span>
-
-                        <span v-if="doc.timestampTo">
-                          &gt;
-                          {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-                          ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
-                        </span>
-                      </span>
-                    </div>
-                  </li>
-                </transition-group>
-              </ul>
-            </div>
-          </transition>
-        </div>
-      </div>
-
-      <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-      <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
-import axios from 'axios';
-
-import ActionButton from '../../components/Global/ActionButton.vue';
-import JournalOptions from '../../components/JournalView/JournalOptions.vue';
-import DispatcherStats from '../../components/JournalView/DispatcherStats.vue';
-import SearchBox from '../Global/SearchBox.vue';
-
-import Loading from '../Global/Loading.vue';
-import { URLs } from '../../scripts/utils/apiURLs';
-import dateMixin from '../../mixins/dateMixin';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { useStore } from '../../store/store';
-
-const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
-
-interface DispatcherHistoryItem {
-  id: string;
-
-  stationName: string;
-  stationHash: string;
-  region: string;
-
-  dispatcherName: string;
-  dispatcherId: number;
-
-  timestampFrom: number;
-  timestampTo?: number;
-  currentDuration?: number;
-
-  lastOnlineTimestamp: number;
-
-  isOnline: boolean;
-}
-
-type JournalDispatcherSearcher = {
-  [key in 'search-dispatcher' | 'search-station']: string;
-};
-
-export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading },
-  mixins: [dateMixin],
-  name: 'JournalDispatchers',
-
-  props: {
-    sceneryName: {
-      type: String,
-      required: false,
-    },
-
-    dispatcherName: {
-      type: String,
-      required: false,
-    },
-  },
-
-  data: () => ({
-    currentQuery: '',
-    scrollDataLoaded: true,
-    scrollNoMoreData: false,
-
-    showReturnButton: false,
-    statsCardOpen: false,
-  }),
-
-  setup() {
-    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
-      status: DataStatus.Loading,
-      error: null,
-    });
-
-    const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
-    const journalFilterActive = ref({});
-    const searchersValues = reactive({
-      'search-dispatcher': '',
-      'search-station': '',
-    } as JournalDispatcherSearcher);
-
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
-    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
-    provide('searchersValues', searchersValues);
-
-    const scrollElement: Ref<HTMLElement | null> = ref(null);
-
-    return {
-      store: useStore(),
-
-      historyList: ref([]) as Ref<DispatcherHistoryItem[]>,
-      historyDataStatus,
-
-      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
-      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
-      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
-
-      sorterActive,
-      searchersValues,
-
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-      maxCount: ref(15),
-    };
-  },
-
-  computed: {
-    computedHistoryList() {
-      return this.historyList.filter(
-        (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
-      );
-    },
-  },
-
-  activated() {
-    if (this.sceneryName || this.dispatcherName) {
-      this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
-      this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
-      this.search();
-    }
-
-    window.addEventListener('scroll', this.handleScroll);
-  },
-
-  mounted() {
-    if (!this.sceneryName && !this.dispatcherName) {
-      this.search();
-    }
-  },
-
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-
-  methods: {
-    closeDispatcherStatsCard() {
-      this.statsCardOpen = false;
-    },
-
-    navigateToScenery(name: string, isOnline: boolean) {
-      if (!isOnline) return;
-
-      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
-    },
-
-    isAnotherDay(prevIndex: number, currIndex: number) {
-      if (currIndex == 0) return true;
-
-      return (
-        new Date(this.computedHistoryList[prevIndex].timestampFrom).getDate() !=
-        new Date(this.computedHistoryList[currIndex].timestampFrom).getDate()
-      );
-    },
-
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight;
-
-      const element = this.$refs.scrollElement as HTMLElement;
-
-      if (
-        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
-        this.scrollDataLoaded &&
-        !this.scrollNoMoreData &&
-        this.historyDataStatus.status == DataStatus.Loaded
-      )
-        this.addHistoryData();
-    },
-
-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    search() {
-      this.fetchHistoryData({
-        searchers: this.searchersValues,
-      });
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
-    },
-
-    async addHistoryData() {
-      this.scrollDataLoaded = false;
-
-      const countFrom = this.historyList.length;
-
-      const responseData: DispatcherHistoryItem[] = await (
-        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
-      ).data;
-
-      if (!responseData) return;
-
-      if (responseData.length == 0) {
-        this.scrollNoMoreData = true;
-        return;
-      }
-
-      this.historyList.push(...responseData);
-      this.scrollDataLoaded = true;
-    },
-
-    async fetchHistoryData(
-      props: {
-        searchers?: JournalDispatcherSearcher;
-        filter?: JournalFilter;
-      } = {}
-    ) {
-      this.historyDataStatus.status = DataStatus.Loading;
-
-      const queries: string[] = [];
-
-      // const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim();
-      // const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim();
-
-      const dispatcher = props.searchers?.['search-dispatcher'].trim();
-      const station = props.searchers?.['search-station'].trim();
-
-      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
-      if (station) queries.push(`stationName=${station}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
-      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
-      else queries.push('sortBy=timestampFrom');
-
-      queries.push('countLimit=15');
-
-      this.currentQuery = queries.join('&');
-
-      try {
-        const responseData: DispatcherHistoryItem[] = await (
-          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
-        ).data;
-
-        if (!responseData) {
-          this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = 'Brak danych!';
-          return;
-        }
-
-        if (!responseData) return;
-
-        // Response data exists
-        this.historyList = responseData;
-
-        // Stats display
-        this.store.dispatcherStatsName =
-          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
-            ? this.historyList[0].dispatcherName
-            : '';
-
-        this.historyDataStatus.status = DataStatus.Loaded;
-      } catch (error) {
-        this.historyDataStatus.status = DataStatus.Error;
-        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
-@import '../../styles/responsive.scss';
-
-.region-badge {
-  padding: 0.1em 0.5em;
-  border-radius: 0.5em;
-  font-weight: bold;
-
-  &.eu {
-    background-color: forestgreen;
-  }
-}
-
-.list-wrapper {
-  margin-top: 1em;
-}
-
-.journal_item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  flex-wrap: wrap;
-
-  &.online {
-    cursor: pointer;
-  }
-
-  span[data-status='true'] {
-    color: springgreen;
-  }
-
-  span[data-status='false'] {
-    color: salmon;
-  }
-}
-.journal_day {
-  position: relative;
-  text-align: center;
-  background-color: #4d4d4d;
-
-  span {
-    position: relative;
-    background-color: #4d4d4d;
-    z-index: 10;
-
-    padding: 0 0.5em;
-  }
-
-  &::after {
-    position: absolute;
-    content: '';
-
-    z-index: 0;
-
-    left: 50%;
-    top: 50%;
-
-    transform: translate(-50%, -50%);
-
-    height: 3px;
-    width: 60%;
-    min-width: 200px;
-
-    background-color: white;
-  }
-}
-
-@include smallScreen() {
-  .journal_item {
-    flex-direction: column;
-
-    span {
-      margin-top: 0.25em;
-      text-align: center;
-    }
-  }
-}
-</style>
-
+<template>
+  <section class="journal-timetables">
+    <div class="journal-wrapper">
+      <div class="journal_top-bar">
+        <JournalOptions
+          @on-filter-change="search"
+          @on-input-change="search"
+          @on-sorter-change="search"
+          :sorter-option-ids="['timestampFrom', 'duration']"
+        />
+
+        <!-- <DispatcherStats /> -->
+      </div>
+
+      <div class="journal-list">
+        <div class="list-wrapper" ref="scrollElement">
+          <transition name="warning" mode="out-in">
+            <div :key="historyDataStatus.status">
+              <Loading v-if="isDataLoading || isDataInit" />
+
+              <div v-else-if="isDataError" class="journal_warning error">
+                {{ $t('app.error') }}
+              </div>
+
+              <div class="journal_warning" v-else-if="historyList.length == 0">
+                {{ $t('app.no-result') }}
+              </div>
+
+              <ul v-else>
+                <transition-group name="journal-list-anim">
+                  <li v-for="(doc, i) in computedHistoryList" :key="doc.id">
+                    <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
+                      <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
+                    </div>
+
+                    <div
+                      class="journal_item"
+                      :class="{ online: doc.isOnline }"
+                      @click="navigateToScenery(doc.stationName, doc.isOnline)"
+                      @keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
+                      tabindex="0"
+                    >
+                      <span>
+                        <b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b>
+                        <span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
+                        <span class="region-badge" :class="doc.region">PL1</span>
+                      </span>
+                      <span>
+                        <span :data-status="doc.isOnline">
+                          {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
+                        </span>
+                        <span>
+                          {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+                        </span>
+
+                        <span v-if="doc.currentDuration && doc.isOnline">
+                          ({{ calculateDuration(doc.currentDuration) }})
+                        </span>
+
+                        <span v-if="doc.timestampTo">
+                          &gt;
+                          {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+                          ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
+                        </span>
+                      </span>
+                    </div>
+                  </li>
+                </transition-group>
+              </ul>
+            </div>
+          </transition>
+        </div>
+      </div>
+
+      <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+      <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
+import axios from 'axios';
+
+import ActionButton from '../../components/Global/ActionButton.vue';
+import JournalOptions from '../../components/JournalView/JournalOptions.vue';
+import DispatcherStats from '../../components/JournalView/DispatcherStats.vue';
+import SearchBox from '../Global/SearchBox.vue';
+
+import Loading from '../Global/Loading.vue';
+import { URLs } from '../../scripts/utils/apiURLs';
+import dateMixin from '../../mixins/dateMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { useStore } from '../../store/store';
+
+const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
+
+interface DispatcherHistoryItem {
+  id: string;
+
+  stationName: string;
+  stationHash: string;
+  region: string;
+
+  dispatcherName: string;
+  dispatcherId: number;
+
+  timestampFrom: number;
+  timestampTo?: number;
+  currentDuration?: number;
+
+  lastOnlineTimestamp: number;
+
+  isOnline: boolean;
+}
+
+type JournalDispatcherSearcher = {
+  [key in 'search-dispatcher' | 'search-station']: string;
+};
+
+export default defineComponent({
+  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading },
+  mixins: [dateMixin],
+  name: 'JournalDispatchers',
+
+  props: {
+    sceneryName: {
+      type: String,
+      required: false,
+    },
+
+    dispatcherName: {
+      type: String,
+      required: false,
+    },
+  },
+
+  data: () => ({
+    currentQuery: '',
+    scrollDataLoaded: true,
+    scrollNoMoreData: false,
+
+    showReturnButton: false,
+    statsCardOpen: false,
+  }),
+
+  setup() {
+    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
+      status: DataStatus.Loading,
+      error: null,
+    });
+
+    const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
+    const journalFilterActive = ref({});
+    const searchersValues = reactive({
+      'search-dispatcher': '',
+      'search-station': '',
+    } as JournalDispatcherSearcher);
+
+    const countFromIndex = ref(0);
+    const countLimit = 15;
+
+    provide('sorterActive', sorterActive);
+    provide('journalFilterActive', journalFilterActive);
+    provide('searchersValues', searchersValues);
+
+    const scrollElement: Ref<HTMLElement | null> = ref(null);
+
+    return {
+      store: useStore(),
+
+      historyList: ref([]) as Ref<DispatcherHistoryItem[]>,
+      historyDataStatus,
+
+      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
+      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
+      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
+
+      sorterActive,
+      searchersValues,
+
+      countFromIndex,
+      countLimit,
+
+      scrollElement,
+      maxCount: ref(15),
+    };
+  },
+
+  computed: {
+    computedHistoryList() {
+      return this.historyList.filter(
+        (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
+      );
+    },
+  },
+
+  activated() {
+    if (this.sceneryName || this.dispatcherName) {
+      this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
+      this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
+      this.search();
+    }
+
+    window.addEventListener('wheel', this.handleScroll);
+  },
+
+  mounted() {
+    if (!this.sceneryName && !this.dispatcherName) {
+      this.search();
+    }
+  },
+
+  deactivated() {
+    window.removeEventListener('wheel', this.handleScroll);
+  },
+
+  methods: {
+    closeDispatcherStatsCard() {
+      this.statsCardOpen = false;
+    },
+
+    navigateToScenery(name: string, isOnline: boolean) {
+      if (!isOnline) return;
+
+      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
+    },
+
+    isAnotherDay(prevIndex: number, currIndex: number) {
+      if (currIndex == 0) return true;
+
+      return (
+        new Date(this.computedHistoryList[prevIndex].timestampFrom).getDate() !=
+        new Date(this.computedHistoryList[currIndex].timestampFrom).getDate()
+      );
+    },
+
+    handleScroll() {
+      this.showReturnButton = window.scrollY > window.innerHeight;
+
+      const element = this.$refs.scrollElement as HTMLElement;
+
+      if (
+        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
+        this.scrollDataLoaded &&
+        !this.scrollNoMoreData &&
+        this.historyDataStatus.status == DataStatus.Loaded
+      )
+        this.addHistoryData();
+    },
+
+    scrollToTop() {
+      window.scrollTo({ top: 0 });
+    },
+
+    search() {
+      this.fetchHistoryData({
+        searchers: this.searchersValues,
+      });
+
+      this.scrollNoMoreData = false;
+      this.scrollDataLoaded = true;
+    },
+
+    async addHistoryData() {
+      this.scrollDataLoaded = false;
+
+      const countFrom = this.historyList.length;
+
+      const responseData: DispatcherHistoryItem[] = await (
+        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
+      ).data;
+
+      if (!responseData) return;
+
+      if (responseData.length == 0) {
+        this.scrollNoMoreData = true;
+        return;
+      }
+
+      this.historyList.push(...responseData);
+      this.scrollDataLoaded = true;
+    },
+
+    async fetchHistoryData(
+      props: {
+        searchers?: JournalDispatcherSearcher;
+        filter?: JournalFilter;
+      } = {}
+    ) {
+      this.historyDataStatus.status = DataStatus.Loading;
+
+      const queries: string[] = [];
+
+      // const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim();
+      // const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim();
+
+      const dispatcher = props.searchers?.['search-dispatcher'].trim();
+      const station = props.searchers?.['search-station'].trim();
+
+      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
+      if (station) queries.push(`stationName=${station}`);
+
+      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
+      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
+      else queries.push('sortBy=timestampFrom');
+
+      queries.push('countLimit=15');
+
+      this.currentQuery = queries.join('&');
+
+      try {
+        const responseData: DispatcherHistoryItem[] = await (
+          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
+        ).data;
+
+        if (!responseData) {
+          this.historyDataStatus.status = DataStatus.Error;
+          this.historyDataStatus.error = 'Brak danych!';
+          return;
+        }
+
+        if (!responseData) return;
+
+        // Response data exists
+        this.historyList = responseData;
+
+        // Stats display
+        this.store.dispatcherStatsName =
+          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
+            ? this.historyList[0].dispatcherName
+            : '';
+
+        this.historyDataStatus.status = DataStatus.Loaded;
+      } catch (error) {
+        this.historyDataStatus.status = DataStatus.Error;
+        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalSection.scss';
+@import '../../styles/responsive.scss';
+
+.region-badge {
+  padding: 0.1em 0.5em;
+  border-radius: 0.5em;
+  font-weight: bold;
+
+  &.eu {
+    background-color: forestgreen;
+  }
+}
+
+.list-wrapper {
+  margin-top: 1em;
+}
+
+.journal_item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-wrap: wrap;
+
+  &.online {
+    cursor: pointer;
+  }
+
+  span[data-status='true'] {
+    color: springgreen;
+  }
+
+  span[data-status='false'] {
+    color: salmon;
+  }
+}
+.journal_day {
+  position: relative;
+  text-align: center;
+  background-color: #4d4d4d;
+
+  span {
+    position: relative;
+    background-color: #4d4d4d;
+    z-index: 10;
+
+    padding: 0 0.5em;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+
+    z-index: 0;
+
+    left: 50%;
+    top: 50%;
+
+    transform: translate(-50%, -50%);
+
+    height: 3px;
+    width: 60%;
+    min-width: 200px;
+
+    background-color: white;
+  }
+}
+
+@include smallScreen() {
+  .journal_item {
+    flex-direction: column;
+
+    span {
+      margin-top: 0.25em;
+      text-align: center;
+    }
+  }
+}
+</style>
+
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index 7db6db8..ec37ebb 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/src/components/JournalView/JournalTimetables.vue
@@ -1,439 +1,439 @@
-<template>
-  <section class="journal-timetables">
-    <keep-alive>
-      <DriverStats v-if="statsCardOpen" @close-card="closeCard" />
-    </keep-alive>
-
-    <div class="journal-wrapper">
-      <div class="journal_top-bar">
-        <JournalOptions
-          @on-input-change="search"
-          @on-filter-change="search"
-          @on-sorter-change="search"
-          :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
-          :filters="journalTimetableFilters"
-        />
-      </div>
-
-      <div class="journal-list">
-        <div class="list-wrapper" ref="scrollElement">
-          <transition name="warning" mode="out-in">
-            <div :key="historyDataStatus.status">
-              <Loading v-if="isDataLoading || isDataInit" />
-
-              <div v-else-if="isDataError" class="journal_warning error">
-                {{ $t('app.error') }}
-              </div>
-
-              <div class="journal_warning" v-else-if="historyList.length == 0">
-                {{ $t('app.no-result') }}
-              </div>
-
-              <ul v-else>
-                <transition-group name="journal-list-anim">
-                  <li v-for="(item, i) in historyList" class="journal_item" :key="item.timetableId">
-                    <div class="journal_item-top">
-                      <span>
-                        <span
-                          tabindex="0"
-                          @click="navigateToTimetable(item)"
-                          @keydown.enter="navigateToTimetable(item)"
-                          style="cursor: pointer"
-                        >
-                          <b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b>
-                          <b>{{ item.trainNo }}</b>
-                          | <span>{{ item.driverName }}</span> |
-                          <span class="text--grayed">#{{ item.timetableId }}</span>
-                        </span>
-
-                        <div>
-                          <b>{{ item.route.replace('|', ' - ') }}</b>
-                        </div>
-
-                        <hr style="margin: 0.25em 0" />
-
-                        <div class="scenery-list">
-                          <span
-                            v-for="(scenery, i) in getSceneryList(item)"
-                            :key="scenery.name"
-                            :class="{ confirmed: scenery.confirmed }"
-                          >
-                            {{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
-                          </span>
-                        </div>
-
-                        <div class="schedule-dates">
-                          <!-- Data odjazdu ze stacji początkowej -->
-                          <b>{{ item.route.split('|')[0] }}:</b>
-                          <s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed">
-                            {{ localeTime(item.beginDate, $i18n.locale) }}
-                          </s>
-                          <span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>&bull;
-
-                          <!-- Data przyjazdu na stację końcową / porzucenia -->
-                          <b v-if="(item.fulfilled && item.terminated) || !item.terminated">
-                            {{ item.route.split('|').slice(-1)[0] }}:
-                          </b>
-                          <i v-else>{{ $t('journal.timetable-abandoned') }} </i>
-
-                          <s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
-                            {{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
-                          </s>
-                          <span
-                            >{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
-                          </span>
-                        </div>
-                      </span>
-
-                      <b
-                        class="journal_item-status"
-                        :class="{
-                          fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
-                          terminated: item.terminated && !item.fulfilled,
-                          active: !item.terminated,
-                        }"
-                      >
-                        {{
-                          !item.terminated
-                            ? $t('journal.timetable-active')
-                            : item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
-                            ? $t('journal.timetable-fulfilled')
-                            : $t('journal.timetable-abandoned')
-                        }}
-                      </b>
-                    </div>
-
-                    <div style="margin-top: 1em">
-                      <div>
-                        {{ $t('journal.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b>
-                      </div>
-
-                      <!-- Nick dyżurnego -->
-                      <div v-if="item.authorName">
-                        <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
-                        <router-link
-                          class="dispatcher-link"
-                          :to="`/journal/dispatchers?dispatcherName=${item.authorName}`"
-                          >{{ item.authorName }}</router-link
-                        >
-                      </div>
-                    </div>
-
-                    <div style="margin-top: 1em">
-                      <div>
-                        <b>{{ $t('journal.route-length') }}</b>
-                        {{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
-                        {{ item.routeDistance }} km
-                      </div>
-
-                      <div>
-                        <b>{{ $t('journal.station-count') }}</b>
-                        {{ item.confirmedStopsCount }} /
-                        {{ item.allStopsCount }}
-                      </div>
-                    </div>
-                  </li>
-                </transition-group>
-              </ul>
-            </div>
-          </transition>
-        </div>
-      </div>
-
-      <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-      <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
-import axios from 'axios';
-
-import DriverStats from './DriverStats.vue';
-import Loading from '../Global/Loading.vue';
-import { journalTimetableFilters } from '../../data/journalFilters';
-import dateMixin from '../../mixins/dateMixin';
-import routerMixin from '../../mixins/routerMixin';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
-import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '../../scripts/utils/apiURLs';
-import { useStore } from '../../store/store';
-import JournalOptions from './JournalOptions.vue';
-
-const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
-
-type JournalTimetableSearcher = {
-  [key in 'search-driver' | 'search-train']: string;
-};
-
-export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions },
-  mixins: [dateMixin, routerMixin],
-
-  name: 'JournalTimetables',
-
-  props: {
-    timetableId: {
-      type: String,
-    },
-  },
-
-  data: () => ({
-    currentQuery: '',
-    scrollDataLoaded: true,
-    scrollNoMoreData: false,
-
-    showReturnButton: false,
-    statsCardOpen: false,
-
-    journalTimetableFilters,
-  }),
-
-  setup() {
-    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
-      status: DataStatus.Loading,
-      error: null,
-    });
-
-    const sorterActive = ref({ id: 'timetableId', dir: -1 });
-    const journalFilterActive = ref(journalTimetableFilters[0]);
-
-    const searchersValues = reactive({
-      'search-train': '',
-      'search-driver': '',
-    } as JournalTimetableSearcher);
-
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
-    provide('searchersValues', searchersValues);
-    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
-
-    const scrollElement: Ref<HTMLElement | null> = ref(null);
-
-    return {
-      historyList: ref([]) as Ref<TimetableHistory[]>,
-      historyDataStatus,
-
-      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
-      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
-      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
-
-      sorterActive,
-      journalFilterActive,
-      searchersValues,
-
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-      maxCount: ref(15),
-      store: useStore(),
-    };
-  },
-
-  activated() {
-    window.addEventListener('scroll', this.handleScroll);
-
-    if (this.timetableId) {
-      this.searchersValues['search-train'] = `#${this.timetableId}`;
-      this.search();
-    }
-  },
-
-  mounted() {
-    if (!this.timetableId) this.search();
-  },
-
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-
-  methods: {
-    navigateToTimetable(historyItem: TimetableHistory) {
-      if (historyItem.terminated) return;
-
-      this.navigateTo('/trains', {
-        trainNo: historyItem.trainNo,
-        driverName: historyItem.driverName,
-      });
-    },
-
-    closeCard() {
-      this.statsCardOpen = false;
-    },
-
-    getSceneryList(historyItem: TimetableHistory) {
-      return historyItem.sceneriesString
-        .split('%')
-        .map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount }));
-    },
-
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight;
-
-      const element = this.$refs.scrollElement as HTMLElement;
-
-      if (
-        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
-        this.scrollDataLoaded &&
-        !this.scrollNoMoreData &&
-        this.historyDataStatus.status == DataStatus.Loaded
-      )
-        this.addHistoryData();
-    },
-
-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    search() {
-      this.fetchHistoryData({
-        searchers: this.searchersValues,
-        filter: this.journalFilterActive,
-      });
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
-    },
-
-    async addHistoryData() {
-      this.scrollDataLoaded = false;
-
-      const countFrom = this.historyList.length;
-
-      const responseData: TimetableHistory[] = await (
-        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
-      ).data;
-
-      if (!responseData) return;
-
-      if (responseData.length == 0) {
-        this.scrollNoMoreData = true;
-        return;
-      }
-
-      this.historyList.push(...responseData);
-      this.scrollDataLoaded = true;
-    },
-
-    async fetchHistoryData(
-      props: {
-        searchers?: JournalTimetableSearcher;
-        filter?: JournalFilter;
-      } = {}
-    ) {
-      this.historyDataStatus.status = DataStatus.Loading;
-
-      const queries: string[] = [];
-
-      const driver = props.searchers?.['search-driver'].trim();
-      const train = props.searchers?.['search-train'].trim();
-
-      if (driver) queries.push(`driverName=${driver}`);
-      if (train) queries.push(train.startsWith('#') ? `timetableId=${train.replace('#', '')}` : `trainNo=${train}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
-      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
-      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
-      else queries.push('sortBy=timetableId');
-
-      queries.push('countLimit=15');
-
-      switch (props.filter?.id) {
-        case JournalFilterType.abandoned:
-          queries.push('fulfilled=0', 'terminated=1');
-          break;
-
-        case JournalFilterType.active:
-          queries.push('terminated=0');
-          break;
-
-        case JournalFilterType.fulfilled:
-          queries.push('fulfilled=1');
-          break;
-
-        default:
-          break;
-      }
-
-      this.currentQuery = queries.join('&');
-
-      try {
-        const responseData: TimetableHistory[] = await (
-          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
-        ).data;
-
-        if (!responseData) {
-          this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = 'Brak danych!';
-          return;
-        }
-
-        if (!responseData) return;
-
-        // Response data exists
-        this.historyList = responseData;
-
-        // Stats display
-        this.store.driverStatsName =
-          this.historyList.length > 0 && this.searchersValues['search-driver'].trim()
-            ? this.historyList[0].driverName
-            : '';
-
-        this.historyDataStatus.status = DataStatus.Loaded;
-      } catch (error) {
-        this.historyDataStatus.status = DataStatus.Error;
-        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
-
-        console.error(error);
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
-
-.journal_item {
-  &-top {
-    display: flex;
-    justify-content: space-between;
-
-    padding: 0.2em 0;
-
-    .scenery-list {
-      span {
-        color: #adadad;
-
-        &.confirmed {
-          color: #a3eba3;
-        }
-      }
-    }
-  }
-
-  &-status {
-    &.terminated {
-      color: salmon;
-    }
-
-    &.fulfilled {
-      color: lightgreen;
-    }
-
-    &.active {
-      color: lightblue;
-    }
-  }
-}
-
-.dispatcher-link {
-  font-weight: bold;
-}
-</style>
+<template>
+  <section class="journal-timetables">
+    <keep-alive>
+      <DriverStats v-if="statsCardOpen" @close-card="closeCard" />
+    </keep-alive>
+
+    <div class="journal-wrapper">
+      <div class="journal_top-bar">
+        <JournalOptions
+          @on-input-change="search"
+          @on-filter-change="search"
+          @on-sorter-change="search"
+          :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
+          :filters="journalTimetableFilters"
+        />
+      </div>
+
+      <div class="journal-list">
+        <div class="list-wrapper" ref="scrollElement">
+          <transition name="warning" mode="out-in">
+            <div :key="historyDataStatus.status">
+              <Loading v-if="isDataLoading || isDataInit" />
+
+              <div v-else-if="isDataError" class="journal_warning error">
+                {{ $t('app.error') }}
+              </div>
+
+              <div class="journal_warning" v-else-if="historyList.length == 0">
+                {{ $t('app.no-result') }}
+              </div>
+
+              <ul v-else>
+                <transition-group name="journal-list-anim">
+                  <li v-for="(item, i) in historyList" class="journal_item" :key="item.timetableId">
+                    <div class="journal_item-top">
+                      <span>
+                        <span
+                          tabindex="0"
+                          @click="navigateToTimetable(item)"
+                          @keydown.enter="navigateToTimetable(item)"
+                          style="cursor: pointer"
+                        >
+                          <b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b>
+                          <b>{{ item.trainNo }}</b>
+                          | <span>{{ item.driverName }}</span> |
+                          <span class="text--grayed">#{{ item.timetableId }}</span>
+                        </span>
+
+                        <div>
+                          <b>{{ item.route.replace('|', ' - ') }}</b>
+                        </div>
+
+                        <hr style="margin: 0.25em 0" />
+
+                        <div class="scenery-list">
+                          <span
+                            v-for="(scenery, i) in getSceneryList(item)"
+                            :key="scenery.name"
+                            :class="{ confirmed: scenery.confirmed }"
+                          >
+                            {{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
+                          </span>
+                        </div>
+
+                        <div class="schedule-dates">
+                          <!-- Data odjazdu ze stacji początkowej -->
+                          <b>{{ item.route.split('|')[0] }}:</b>
+                          <s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed">
+                            {{ localeTime(item.beginDate, $i18n.locale) }}
+                          </s>
+                          <span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>&bull;
+
+                          <!-- Data przyjazdu na stację końcową / porzucenia -->
+                          <b v-if="(item.fulfilled && item.terminated) || !item.terminated">
+                            {{ item.route.split('|').slice(-1)[0] }}:
+                          </b>
+                          <i v-else>{{ $t('journal.timetable-abandoned') }} </i>
+
+                          <s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
+                            {{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
+                          </s>
+                          <span
+                            >{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
+                          </span>
+                        </div>
+                      </span>
+
+                      <b
+                        class="journal_item-status"
+                        :class="{
+                          fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
+                          terminated: item.terminated && !item.fulfilled,
+                          active: !item.terminated,
+                        }"
+                      >
+                        {{
+                          !item.terminated
+                            ? $t('journal.timetable-active')
+                            : item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
+                            ? $t('journal.timetable-fulfilled')
+                            : $t('journal.timetable-abandoned')
+                        }}
+                      </b>
+                    </div>
+
+                    <div style="margin-top: 1em">
+                      <div>
+                        {{ $t('journal.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b>
+                      </div>
+
+                      <!-- Nick dyżurnego -->
+                      <div v-if="item.authorName">
+                        <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
+                        <router-link
+                          class="dispatcher-link"
+                          :to="`/journal/dispatchers?dispatcherName=${item.authorName}`"
+                          >{{ item.authorName }}</router-link
+                        >
+                      </div>
+                    </div>
+
+                    <div style="margin-top: 1em">
+                      <div>
+                        <b>{{ $t('journal.route-length') }}</b>
+                        {{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
+                        {{ item.routeDistance }} km
+                      </div>
+
+                      <div>
+                        <b>{{ $t('journal.station-count') }}</b>
+                        {{ item.confirmedStopsCount }} /
+                        {{ item.allStopsCount }}
+                      </div>
+                    </div>
+                  </li>
+                </transition-group>
+              </ul>
+            </div>
+          </transition>
+        </div>
+      </div>
+
+      <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+      <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
+import axios from 'axios';
+
+import DriverStats from './DriverStats.vue';
+import Loading from '../Global/Loading.vue';
+import { journalTimetableFilters } from '../../data/journalFilters';
+import dateMixin from '../../mixins/dateMixin';
+import routerMixin from '../../mixins/routerMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
+import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import { URLs } from '../../scripts/utils/apiURLs';
+import { useStore } from '../../store/store';
+import JournalOptions from './JournalOptions.vue';
+
+const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
+
+type JournalTimetableSearcher = {
+  [key in 'search-driver' | 'search-train']: string;
+};
+
+export default defineComponent({
+  components: { DriverStats, Loading, JournalOptions },
+  mixins: [dateMixin, routerMixin],
+
+  name: 'JournalTimetables',
+
+  props: {
+    timetableId: {
+      type: String,
+    },
+  },
+
+  data: () => ({
+    currentQuery: '',
+    scrollDataLoaded: true,
+    scrollNoMoreData: false,
+
+    showReturnButton: false,
+    statsCardOpen: false,
+
+    journalTimetableFilters,
+  }),
+
+  setup() {
+    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
+      status: DataStatus.Loading,
+      error: null,
+    });
+
+    const sorterActive = ref({ id: 'timetableId', dir: -1 });
+    const journalFilterActive = ref(journalTimetableFilters[0]);
+
+    const searchersValues = reactive({
+      'search-train': '',
+      'search-driver': '',
+    } as JournalTimetableSearcher);
+
+    const countFromIndex = ref(0);
+    const countLimit = 15;
+
+    provide('searchersValues', searchersValues);
+    provide('sorterActive', sorterActive);
+    provide('journalFilterActive', journalFilterActive);
+
+    const scrollElement: Ref<HTMLElement | null> = ref(null);
+
+    return {
+      historyList: ref([]) as Ref<TimetableHistory[]>,
+      historyDataStatus,
+
+      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
+      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
+      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
+
+      sorterActive,
+      journalFilterActive,
+      searchersValues,
+
+      countFromIndex,
+      countLimit,
+
+      scrollElement,
+      maxCount: ref(15),
+      store: useStore(),
+    };
+  },
+
+  activated() {
+    window.addEventListener('wheel', this.handleScroll);
+
+    if (this.timetableId) {
+      this.searchersValues['search-train'] = `#${this.timetableId}`;
+      this.search();
+    }
+  },
+
+  mounted() {
+    if (!this.timetableId) this.search();
+  },
+
+  deactivated() {
+    window.removeEventListener('wheel', this.handleScroll);
+  },
+
+  methods: {
+    navigateToTimetable(historyItem: TimetableHistory) {
+      if (historyItem.terminated) return;
+
+      this.navigateTo('/trains', {
+        trainNo: historyItem.trainNo,
+        driverName: historyItem.driverName,
+      });
+    },
+
+    closeCard() {
+      this.statsCardOpen = false;
+    },
+
+    getSceneryList(historyItem: TimetableHistory) {
+      return historyItem.sceneriesString
+        .split('%')
+        .map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount }));
+    },
+
+    handleScroll() {
+      this.showReturnButton = window.scrollY > window.innerHeight;
+
+      const element = this.$refs.scrollElement as HTMLElement;
+
+      if (
+        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
+        this.scrollDataLoaded &&
+        !this.scrollNoMoreData &&
+        this.historyDataStatus.status == DataStatus.Loaded
+      )
+        this.addHistoryData();
+    },
+
+    scrollToTop() {
+      window.scrollTo({ top: 0 });
+    },
+
+    search() {
+      this.fetchHistoryData({
+        searchers: this.searchersValues,
+        filter: this.journalFilterActive,
+      });
+
+      this.scrollNoMoreData = false;
+      this.scrollDataLoaded = true;
+    },
+
+    async addHistoryData() {
+      this.scrollDataLoaded = false;
+
+      const countFrom = this.historyList.length;
+
+      const responseData: TimetableHistory[] = await (
+        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
+      ).data;
+
+      if (!responseData) return;
+
+      if (responseData.length == 0) {
+        this.scrollNoMoreData = true;
+        return;
+      }
+
+      this.historyList.push(...responseData);
+      this.scrollDataLoaded = true;
+    },
+
+    async fetchHistoryData(
+      props: {
+        searchers?: JournalTimetableSearcher;
+        filter?: JournalFilter;
+      } = {}
+    ) {
+      this.historyDataStatus.status = DataStatus.Loading;
+
+      const queries: string[] = [];
+
+      const driver = props.searchers?.['search-driver'].trim();
+      const train = props.searchers?.['search-train'].trim();
+
+      if (driver) queries.push(`driverName=${driver}`);
+      if (train) queries.push(train.startsWith('#') ? `timetableId=${train.replace('#', '')}` : `trainNo=${train}`);
+
+      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
+      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
+      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
+      else queries.push('sortBy=timetableId');
+
+      queries.push('countLimit=15');
+
+      switch (props.filter?.id) {
+        case JournalFilterType.abandoned:
+          queries.push('fulfilled=0', 'terminated=1');
+          break;
+
+        case JournalFilterType.active:
+          queries.push('terminated=0');
+          break;
+
+        case JournalFilterType.fulfilled:
+          queries.push('fulfilled=1');
+          break;
+
+        default:
+          break;
+      }
+
+      this.currentQuery = queries.join('&');
+
+      try {
+        const responseData: TimetableHistory[] = await (
+          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
+        ).data;
+
+        if (!responseData) {
+          this.historyDataStatus.status = DataStatus.Error;
+          this.historyDataStatus.error = 'Brak danych!';
+          return;
+        }
+
+        if (!responseData) return;
+
+        // Response data exists
+        this.historyList = responseData;
+
+        // Stats display
+        this.store.driverStatsName =
+          this.historyList.length > 0 && this.searchersValues['search-driver'].trim()
+            ? this.historyList[0].driverName
+            : '';
+
+        this.historyDataStatus.status = DataStatus.Loaded;
+      } catch (error) {
+        this.historyDataStatus.status = DataStatus.Error;
+        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
+
+        console.error(error);
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalSection.scss';
+
+.journal_item {
+  &-top {
+    display: flex;
+    justify-content: space-between;
+
+    padding: 0.2em 0;
+
+    .scenery-list {
+      span {
+        color: #adadad;
+
+        &.confirmed {
+          color: #a3eba3;
+        }
+      }
+    }
+  }
+
+  &-status {
+    &.terminated {
+      color: salmon;
+    }
+
+    &.fulfilled {
+      color: lightgreen;
+    }
+
+    &.active {
+      color: lightblue;
+    }
+  }
+}
+
+.dispatcher-link {
+  font-weight: bold;
+}
+</style>
diff --git a/src/mixins/modalTrainMixin.ts b/src/mixins/modalTrainMixin.ts
index 92505d2..c6a44ed 100644
--- a/src/mixins/modalTrainMixin.ts
+++ b/src/mixins/modalTrainMixin.ts
@@ -17,10 +17,15 @@ export default defineComponent({
   methods: {
     selectModalTrain(trainId: string) {
       this.store.chosenModalTrainId = trainId;
+      document.body.classList.add('no-scroll');
     },
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
+
+      setTimeout(() => {
+        document.body.classList.remove('no-scroll');
+      }, 150);
     },
   },
 });
diff --git a/src/mixins/returnBtnMixin.ts b/src/mixins/returnBtnMixin.ts
index d9bf591..e47f459 100644
--- a/src/mixins/returnBtnMixin.ts
+++ b/src/mixins/returnBtnMixin.ts
@@ -1,34 +1,34 @@
-import { defineComponent, h } from 'vue';
-import imageMixin from './imageMixin';
-
-export default defineComponent({
-  mixins: [imageMixin],
-
-  data() {
-    return {
-      icons: {
-        arrow: this.getIcon('arrow-asc'),
-      },
-
-      showReturnButton: false,
-    };
-  },
-
-  methods: {
-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight * 0.35;
-    },
-  },
-
-  activated() {
-    window.addEventListener('scroll', this.handleScroll);
-  },
-
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-});
+import { defineComponent, h } from 'vue';
+import imageMixin from './imageMixin';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  data() {
+    return {
+      icons: {
+        arrow: this.getIcon('arrow-asc'),
+      },
+
+      showReturnButton: false,
+    };
+  },
+
+  methods: {
+    scrollToTop() {
+      window.scrollTo({ top: 0 });
+    },
+
+    handleScroll() {
+      this.showReturnButton = window.scrollY > window.innerHeight * 0.35;
+    },
+  },
+
+  activated() {
+    window.addEventListener('wheel', this.handleScroll);
+  },
+
+  deactivated() {
+    window.removeEventListener('wheel', this.handleScroll);
+  },
+});
diff --git a/src/store/store.ts b/src/store/store.ts
index 2831dea..65c2c27 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -51,6 +51,7 @@ export const useStore = defineStore('store', {
         trains: DataStatus.Loading,
       },
 
+      blockScroll: false,
       listenerLaunched: false,
     } as StoreState),
 
@@ -395,4 +396,3 @@ export const useStore = defineStore('store', {
     },
   },
 });
-
diff --git a/src/store/storeTypes.ts b/src/store/storeTypes.ts
index 40007fa..1c9c321 100644
--- a/src/store/storeTypes.ts
+++ b/src/store/storeTypes.ts
@@ -1,71 +1,72 @@
-
-import { Socket } from 'socket.io-client';
-import { DataStatus } from '../scripts/enums/DataStatus';
-import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
-import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
-import StationAPIData from '../scripts/interfaces/api/StationAPIData';
-import TrainAPIData from '../scripts/interfaces/api/TrainAPIData';
-import Station from '../scripts/interfaces/Station';
-import Train from '../scripts/interfaces/Train';
-
-export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
-
-export interface StoreState {
-  stationList: Station[];
-  trainList: Train[];
-  apiData: APIData;
-
-  lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
-
-  sceneryData: any[][];
-
-  region: { id: string; value: string };
-  trainCount: number;
-  stationCount: number;
-
-  webSocket?: Socket;
-
-  dispatcherStatsName: string;
-  dispatcherStatsData?: DispatcherStatsAPIData;
-
-  driverStatsName: string;
-  driverStatsData?: DriverStatsAPIData;
-
-  chosenModalTrainId?: string;
-
-  dataStatuses: {
-    connection: DataStatus;
-    sceneries: DataStatus;
-    timetables: DataStatus;
-    dispatchers: DataStatus;
-    trains: DataStatus;
-  };
-
-  listenerLaunched: boolean;
-}
-
-export interface APIData {
-  stations?: StationAPIData[];
-  dispatchers?: string[][];
-  trains?: TrainAPIData[];
-}
-
-export interface StationJSONData {
-  name: string;
-  url: string;
-  lines: string;
-  project: string;
-
-  reqLevel: number;
-
-  signalType: string;
-  controlType: string;
-
-  SUP: boolean;
-
-  routes: string;
-  checkpoints: string | null;
-  authors?: string;
-
-  availability: Availability;
-}
+
+import { Socket } from 'socket.io-client';
+import { DataStatus } from '../scripts/enums/DataStatus';
+import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
+import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
+import StationAPIData from '../scripts/interfaces/api/StationAPIData';
+import TrainAPIData from '../scripts/interfaces/api/TrainAPIData';
+import Station from '../scripts/interfaces/Station';
+import Train from '../scripts/interfaces/Train';
+
+export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+
+export interface StoreState {
+  stationList: Station[];
+  trainList: Train[];
+  apiData: APIData;
+
+  lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
+
+  sceneryData: any[][];
+
+  region: { id: string; value: string };
+  trainCount: number;
+  stationCount: number;
+
+  webSocket?: Socket;
+
+  dispatcherStatsName: string;
+  dispatcherStatsData?: DispatcherStatsAPIData;
+
+  driverStatsName: string;
+  driverStatsData?: DriverStatsAPIData;
+
+  chosenModalTrainId?: string;
+
+  dataStatuses: {
+    connection: DataStatus;
+    sceneries: DataStatus;
+    timetables: DataStatus;
+    dispatchers: DataStatus;
+    trains: DataStatus;
+  };
+
+  listenerLaunched: boolean;
+  blockScroll: boolean;
+}
+
+export interface APIData {
+  stations?: StationAPIData[];
+  dispatchers?: string[][];
+  trains?: TrainAPIData[];
+}
+
+export interface StationJSONData {
+  name: string;
+  url: string;
+  lines: string;
+  project: string;
+
+  reqLevel: number;
+
+  signalType: string;
+  controlType: string;
+
+  SUP: boolean;
+
+  routes: string;
+  checkpoints: string | null;
+  authors?: string;
+
+  availability: Availability;
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 5186acd..c46e3c9 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -25,6 +25,15 @@ body {
   padding: 0;
   font-family: 'Quicksand', sans-serif;
   overflow-y: scroll;
+
+  &.no-scroll {
+    overflow-y: hidden;
+    padding-right: 17px;
+
+    @include smallScreen() {
+      padding: 0;
+    }
+  }
 }
 
 *:focus-visible {
@@ -37,16 +46,15 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 17px;
+  height: 17px;
 
   &-track {
-    background: #222;
+    background-color: #222;
   }
 
   &-thumb {
-    border-radius: 1rem;
-    background: #777;
+    background-color: #777;
   }
 }