diff --git a/src/assets/icon-offline.svg b/src/assets/icon-offline.svg
new file mode 100644
index 0000000..12bbee1
--- /dev/null
+++ b/src/assets/icon-offline.svg
@@ -0,0 +1,4 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M114.48 28.8L28.8002 114.48" stroke="white" stroke-width="14.4"/>
+<circle cx="72" cy="72" r="64.8" stroke="white" stroke-width="14.4"/>
+</svg>
diff --git a/src/components/TrainsView/TrainInfoExtended.vue b/src/components/TrainsView/TrainInfoExtended.vue
index 8417c23..e8b2c2a 100644
--- a/src/components/TrainsView/TrainInfoExtended.vue
+++ b/src/components/TrainsView/TrainInfoExtended.vue
@@ -31,6 +31,8 @@
                 <span>{{ train.driverName }}</span>
               </span>
 
+              <img class="image-offline" v-if="!train.currentStationHash" :src="icons.offline" alt="offline" :title="$t('trains.offline')" />
+
               <span class="hide-info" @click="toggleInfo">
                 <img :src="icons.ascArrow" :class="{ hidden: !isInfoShown }" />
                 <span>{{ isInfoShown ? 'Ukryj' : 'Pokaż' }} informacje</span>
@@ -73,10 +75,15 @@
       </div>
 
       <div class="driver_position">
-        <span v-if="train.currentStationName">
+        <span v-if="train.currentStationHash">
           {{ $t('trains.current-scenery') }} <b class="text--primary">{{ train['currentStationName'] }}&nbsp;</b>
         </span>
 
+        <span v-else>
+          {{ $t('trains.current-scenery') }}
+          <span><b class="text--primary">{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }}</b> (offline)&nbsp;</span>
+        </span>
+
         <span v-if="train.signal">
           {{ $t('trains.current-signal') }} <b class="text--primary">{{ train['signal'] }}&nbsp;</b>
         </span>
@@ -133,6 +140,7 @@ export default defineComponent({
     icons: {
       warning: require('@/assets/icon-warning.svg'),
       ascArrow: require('@/assets/icon-arrow-asc.svg'),
+      offline: require('@/assets/icon-offline.svg'),
     },
 
     isInfoShown: true,
@@ -147,11 +155,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.image-warning {
-  width: 1.2em;
-  vertical-align: text-bottom;
+.image-warning,
+.image-offline {
+  width: 1em;
+  height: 1em;
 
-  margin-left: 0.2em;
+  margin-left: 0.5em;
 }
 
 .extended {
diff --git a/src/components/TrainsView/TrainInfoSimple.vue b/src/components/TrainsView/TrainInfoSimple.vue
index 267e6f0..068f849 100644
--- a/src/components/TrainsView/TrainInfoSimple.vue
+++ b/src/components/TrainsView/TrainInfoSimple.vue
@@ -12,6 +12,10 @@
           <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
           <strong>{{ train.trainNo }}</strong>
           <span>&nbsp;| {{ train.driverName }}</span>
+
+          <img class="image-offline" v-if="!train.currentStationHash" :src="icons.offline" alt="offline" 
+            :title="$t('trains.offline')"
+          >
         </div>
 
         <div class="timetable_route">
@@ -43,10 +47,14 @@
         </div>
 
         <div class="driver_position text--grayed">
-          <span v-if="train.currentStationName">
+          <span v-if="train.currentStationHash">
             {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
           </span>
 
+          <span v-else>
+            {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, "") }} (offline)&nbsp;</span>
+          </span>
+
           <span v-if="train.signal">
             {{ $t('trains.current-signal') }} <span>{{ train['signal'] }}&nbsp;</span>
           </span>
@@ -99,6 +107,7 @@ export default defineComponent({
   data: () => ({
     icons: {
       warning: require('@/assets/icon-warning.svg'),
+      offline: require("@/assets/icon-offline.svg")
     },
   }),
 });
@@ -107,7 +116,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.image-warning {
+.image-warning, .image-offline {
   width: 1em;
   height: 1em;
 
@@ -124,6 +133,8 @@ export default defineComponent({
   }
 }
 
+
+
 .simple {
   display: grid;
   grid-template-columns: 2fr 1fr;
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index db4b2f6..890ad04 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -2,27 +2,23 @@
   <div class="train-options">
     <div class="options_wrapper">
       <div class="options_content">
-        <div class="content_select">
-          <select-box
-            :itemList="translatedSorterOptions"
-            :defaultItemIndex="0"
-            @selected="changeSorter"
-            :prefix="$t('trains.sorter-prefix')"
-          />
+        <select-box
+          :itemList="translatedSorterOptions"
+          :defaultItemIndex="0"
+          @selected="changeSorter"
+          :prefix="$t('trains.sorter-prefix')"
+        />
+
+        <div class="search-box">
+          <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+
+          <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
         </div>
 
-        <div class="content_search">
-          <div class="search-box">
-            <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+        <div class="search-box">
+          <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
 
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
-          </div>
-
-          <div class="search-box">
-            <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
-          </div>
+          <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
         </div>
       </div>
     </div>
@@ -152,37 +148,30 @@ export default defineComponent({
     flex-wrap: wrap;
 
     @include smallScreen() {
+      padding: 0 1em;
+
       justify-content: center;
     }
   }
 
   &_content {
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
 
-    .content_search,
-    .content_select {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
+    & > * {
+        margin-right: 0.25em;
+        margin-top: 0.25em;
     }
 
     @include smallScreen() {
-      padding: 0 1em;
-
-      .content_select {
-        margin: 0 auto;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
+      margin: 0 auto;
+      justify-content: center;
     }
   }
 }
 
-.content_search .search {
+.search {
   &-box {
     position: relative;
 
@@ -190,11 +179,9 @@ export default defineComponent({
     border-radius: 0.5em;
     min-width: 200px;
 
-    margin: 0.5em 0.5em 0.5em 0;
 
     @include smallScreen() {
-      width: 100%;
-      margin: 0.5em auto;
+      flex-grow: 2;
     }
   }
 
@@ -221,6 +208,8 @@ export default defineComponent({
   display: flex;
   flex-wrap: wrap;
 
+  margin-top: 0.5em;
+
   @include smallScreen() {
     justify-content: center;
   }
@@ -236,7 +225,7 @@ export default defineComponent({
   color: gray;
 
   &.active {
-    color: gold;
+    color: var(--clr-primary);
   }
 
   &.reset-btn {
diff --git a/src/components/TrainsView/TrainOptionsCard.vue b/src/components/TrainsView/TrainOptionsCard.vue
new file mode 100644
index 0000000..9ab46d2
--- /dev/null
+++ b/src/components/TrainsView/TrainOptionsCard.vue
@@ -0,0 +1,159 @@
+<template>
+  <section class="filter-card" v-click-outside="closeCard">
+    <div class="card_btn">
+      <action-button @click="toggleCard">
+        <img class="button_icon" :src="filterIcon" alt="icon-filter" />
+        <p>{{ $t('options.filters') }}</p>
+      </action-button>
+    </div>
+
+    <transition name="card-anim">
+      <div class="card_content card" v-if="isVisible">
+        <div class="card_exit" @click="closeCard"></div>
+
+        <div class="options_wrapper">
+          <div class="options_content">
+            <div class="content_select">
+              <select-box
+                :itemList="translatedSorterOptions"
+                :defaultItemIndex="0"
+                @selected="changeSorter"
+                :prefix="$t('trains.sorter-prefix')"
+              />
+            </div>
+
+            <div class="content_search">
+              <div class="search-box">
+                <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+
+                <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
+              </div>
+
+              <div class="search-box">
+                <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
+
+                <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <section class="card_actions flex">
+          <action-button class="outlined">
+            {{ $t('filters.reset') }}
+          </action-button>
+          <action-button class="outlined" @click="closeCard">{{ $t('filters.close') }}</action-button>
+        </section>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from '@vue/runtime-core';
+
+import inputData from '@/data/options.json';
+
+import ActionButton from '@/components/Global/ActionButton.vue';
+import { sorterOptions } from '@/data/trainOptions';
+import { TrainFilter, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SelectBox from '../Global/SelectBox.vue';
+
+export default defineComponent({
+  components: { ActionButton, SelectBox },
+  emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
+
+  data: () => ({
+    filterIcon: require('@/assets/icon-filter2.svg'),
+    exitIcon: require('@/assets/icon-exit.svg'),
+
+    inputs: { ...inputData },
+  }),
+
+  setup() {
+    const isVisible = inject('isTrainOptionsCardVisible');
+
+    const { t } = useI18n();
+
+    let filterList = inject('filterList') as TrainFilter[];
+
+    const translatedSorterOptions = computed(() =>
+      sorterOptions.map(({ id }) => ({
+        id,
+        value: t(`trains.option-${id}`),
+      }))
+    );
+
+    return {
+      translatedSorterOptions,
+      searchedTrain: inject('searchedTrain') as string,
+      searchedDriver: inject('searchedDriver') as string,
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      filterList,
+      isVisible,
+    };
+  },
+
+  methods: {
+    closeCard() {
+      this.isVisible = false;
+    },
+
+    toggleCard() {
+      this.isVisible = !this.isVisible;
+    },
+
+    changeSorter(item: { id: string | number; value: string }) {
+      this.sorterActive.id = item.id;
+      this.sorterActive.dir = -1;
+    },
+
+    toggleFilter(filter: TrainFilter) {
+      filter.isActive = !filter.isActive;
+    },
+
+    setFilterOnly(filter: TrainFilter) {
+      this.filterList.forEach((f) => (f.isActive = f.id == filter.id));
+    },
+
+    resetFilters() {
+      this.filterList.forEach((f) => (f.isActive = true));
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive';
+@import '../../styles/card';
+
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -50%) scale(0.85);
+    opacity: 0;
+  }
+}
+
+.card {
+  section {
+    margin: 0.5em 0;
+  }
+
+  &_title {
+    font-size: 2em;
+    font-weight: 700;
+    color: $accentCol;
+
+    margin: 0.5em 0;
+
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 154815a..32dc7a6 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -196,8 +196,6 @@ img.train-image {
 
 .train {
   &-list {
-    max-height: 100vh;
-    min-height: 550px;
     overflow: auto;
 
     padding-right: 0.5em;
diff --git a/src/data/trainOptions.ts b/src/data/trainOptions.ts
new file mode 100644
index 0000000..bd9ec72
--- /dev/null
+++ b/src/data/trainOptions.ts
@@ -0,0 +1,60 @@
+import { TrainFilterType } from "@/scripts/enums/TrainFilterType";
+import { TrainFilter } from "vue";
+
+export const trainFilters: TrainFilter[] = [
+  {
+    id: TrainFilterType.twr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.skr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.passenger,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.freight,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.other,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.comments,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.noTimetable,
+    isActive: true,
+  },
+];
+
+export const sorterOptions = [
+  {
+    id: 'distance',
+    value: 'kilometraż',
+  },
+  {
+    id: 'progress',
+    value: 'przebyta trasa',
+  },
+  {
+    id: 'delay',
+    value: 'opóźnienie',
+  },
+  {
+    id: 'mass',
+    value: 'masa',
+  },
+  {
+    id: 'speed',
+    value: 'prędkość',
+  },
+  {
+    id: 'length',
+    value: 'długość',
+  }
+];
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 2bf4c0e..9498162 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -123,6 +123,7 @@
   "trains": {
     "no-trains": "No trains to show here!",
     "loading": "Loading train data...",
+    "offline": "Offline ride",
 
     "stats": "TRAFFIC STATISTICS",
     "stats-speed": "TRAINS SPEED (MIN, AVG, MAX) [km/h]",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index e604d1a..0b9e4b3 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -124,6 +124,7 @@
   "trains": {
     "no-trains": "Brak pociągów do wyświetlenia!",
     "loading": "Pobieranie danych o pociągach...",
+    "offline": "Przejazd offline",
 
     "stats": "STATYSTYKI RUCHU",
     "stats-speed": "PRĘDKOŚCI POCIĄGÓW (MIN, ŚR, MAX) [km/h]",
diff --git a/src/styles/card.scss b/src/styles/card.scss
index aa8cbdc..aafa33e 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -14,6 +14,8 @@
   overflow: auto;
   background: $primaryCol;
 
+  outline: 2px solid white;
+
   box-shadow: 0 0 15px 5px #292929;
 
   width: 650px;
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 4b9b78e..8cbbc09 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -4,7 +4,7 @@
       <div class="options-bar">
         <!-- <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" /> -->
 
-        <TrainOptions />
+        <train-options />
       </div>
 
       <TrainTable :trains="computedTrains" />
@@ -15,16 +15,15 @@
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, provide, reactive, ref, TrainFilter } from 'vue';
 import { filteredTrainList } from '@/scripts/managers/trainFilterManager';
+import  { trainFilters } from "@/data/trainOptions";
 
 import Train from '@/scripts/interfaces/Train';
-
 import TrainTable from '@/components/TrainsView/TrainTable.vue';
 import TrainStats from '@/components/TrainsView/TrainStats.vue';
 import TrainOptions from '@/components/TrainsView/TrainOptions.vue';
 
 import { useStore } from '@/store';
 import { GETTERS } from '@/constants/storeConstants';
-import { TrainFilterType } from '@/scripts/enums/TrainFilterType';
 
 export default defineComponent({
   components: {
@@ -45,39 +44,9 @@ export default defineComponent({
 
     const trainList: ComputedRef<Train[]> = computed(() => store.getters[GETTERS.trainList]);
 
-    const initFilters: TrainFilter[] = [
-      {
-        id: TrainFilterType.twr,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.skr,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.passenger,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.freight,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.other,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.comments,
-        isActive: true,
-      },
-       {
-        id: TrainFilterType.noTimetable,
-        isActive: true,
-      },
-    ];
-
     const sorterActive = ref({ id: 'distance', dir: -1 });
-    const filterList = reactive([...initFilters]) as TrainFilter[];
+    const filterList = reactive([...trainFilters]) as TrainFilter[];
+    const isTrainOptionsCardVisible = ref(false);
 
     const searchedDriver = ref('');
     const searchedTrain = ref('');
@@ -86,6 +55,7 @@ export default defineComponent({
     provide('searchedDriver', searchedDriver);
     provide('sorterActive', sorterActive);
     provide('filterList', filterList);
+    provide('isTrainOptionsCardVisible', isTrainOptionsCardVisible);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
       return filteredTrainList(
@@ -97,9 +67,6 @@ export default defineComponent({
       );
     });
 
-    /* Provide list for TrainStats category filter */
-    const chosenTrainCategories = reactive([] as string[]);
-    provide('chosenTrainCategories', chosenTrainCategories);
 
     return {
       trainList,
@@ -107,7 +74,6 @@ export default defineComponent({
       searchedTrain,
       searchedDriver,
       sorterActive,
-      chosenTrainCategories,
     };
   },