diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 97d4585..16f6123 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -2,26 +2,24 @@
   <div class="train-info" tabindex="0">
     <section class="train-route">
       <div class="train_general">
-        <span>
-          <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
+        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
 
-          <span class="timetable_warnings">
-            <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
-            <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
-          </span>
-          <strong class="timetable-category" v-if="train.timetableData">
-            {{ train.timetableData.category }}
-          </strong>
-          <strong class="train-number">&nbsp;{{ train.trainNo }}</strong>
-          |
-          <!-- <span class="train-driver" :class="{ supporter: train.isSupporter }">{{ train.driverName }}</span> -->
-          {{ train.driverName }} |
-          <b :style="calculateTextExpStyle(train.driverLevel)">
-            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel} lvl` }}
-          </b>
-
-          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <span class="timetable_warnings" v-if="train.timetableData?.TWR || train.timetableData?.SKR">
+          <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
+          <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
         </span>
+
+        <strong>
+          <span v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</span>
+          <span class="train-number">{{ train.trainNo }}</span>
+        </strong>
+        <span>|</span>
+        <span>{{ train.driverName }}</span>
+        <span>|</span>
+        <b :style="calculateTextExpStyle(train.driverLevel, train.isSupporter)">
+          {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel} lvl` }}
+        </b>
       </div>
 
       <div class="timetable_route" v-if="train.timetableData">
@@ -44,9 +42,7 @@
       </div>
 
       <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
-        <!-- <span> </span> -->
         <span class="timetable_progress-bar">
-          <!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
           <span class="bar-bg"></span>
           <span
             class="bar-fg"
@@ -154,7 +150,6 @@ export default defineComponent({
 }
 
 .timetable-id {
-  margin-right: 0.3em;
   color: #d2d2d2;
 }
 
@@ -164,11 +159,7 @@ export default defineComponent({
   display: inline-block;
   text-align: center;
 
-  width: 1.25em;
-  height: 1.25em;
-  border-radius: 50%;
-
-  margin-left: 0.25em;
+  padding: 0 0.25em;
 }
 
 .timetable_stops {
@@ -179,16 +170,19 @@ export default defineComponent({
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+
+  gap: 0.25em;
 }
 .train-status-badges {
   display: flex;
   flex-wrap: wrap;
+
+  gap: 0.25em;
 }
 
 .train-badge {
-  padding: 0.15em 0.35em;
-  margin-right: 0.3em;
-
+  padding: 0.1em 0.2em;
+  border-radius: 0.2em;
   font-weight: bold;
 
   font-size: 0.9em;
@@ -202,7 +196,7 @@ export default defineComponent({
   }
 
   &.offline {
-    background-color: #b83b2d;
+    background-color: #9c362b;
   }
 }
 
@@ -221,6 +215,9 @@ export default defineComponent({
 }
 
 .timetable_warnings {
+  display: flex;
+  gap: 0.2em;
+
   color: black;
 }
 
diff --git a/src/constants/Trains/TrainOptionsConsts.ts b/src/constants/Trains/TrainOptionsConsts.ts
index 641f472..fff4f34 100644
--- a/src/constants/Trains/TrainOptionsConsts.ts
+++ b/src/constants/Trains/TrainOptionsConsts.ts
@@ -37,6 +37,10 @@ export const sorterOptions = [
     id: 'distance',
     value: 'kilometraż',
   },
+  {
+    id: 'id',
+    value: 'id rozkładu',
+  },
   {
     id: 'progress',
     value: 'przebyta trasa',
diff --git a/src/locales/en.json b/src/locales/en.json
index 88d38a5..130ff8c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -103,6 +103,7 @@
     "sort-timetable": "train no.",
     "sort-progress": "route progress",
     "sort-delay": "current delay",
+    "sort-id": "timetable id",
 
     "sort-total-stops": "total stops",
     "sort-beginDate": "date",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index f0cf76f..4fbbd4c 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -104,7 +104,8 @@
     "sort-timetableId": "ID rozkładu",
     "sort-timestampFrom": "data",
     "sort-duration": "czas dyżuru",
-
+    "sort-id": "id rozkładu",
+    
     "sort-mass": "masa",
     "sort-speed": "prędkość",
     "sort-length": "długość",
diff --git a/src/mixins/styleMixin.ts b/src/mixins/styleMixin.ts
index beb2090..cc4747b 100644
--- a/src/mixins/styleMixin.ts
+++ b/src/mixins/styleMixin.ts
@@ -11,10 +11,10 @@ export default defineComponent({
       return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow};`;
     },
 
-    calculateTextExpStyle(exp: number): string {
+    calculateTextExpStyle(exp: number, isSupporter = false): string {
       const textColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  75%, 50%)`) : '#666';
 
-      return `color: ${textColor};`;
+      return `color: ${textColor}; ${isSupporter ? 'text-shadow: 0 0 10px ' + textColor : ''};`;
     },
 
     statusClasses(occupiedTo: string) {
diff --git a/src/scripts/managers/trainFilterManager.ts b/src/scripts/managers/trainFilterManager.ts
index df7e6ed..674ab58 100644
--- a/src/scripts/managers/trainFilterManager.ts
+++ b/src/scripts/managers/trainFilterManager.ts
@@ -1,115 +1,120 @@
-import { TrainFilter } from "../../types/Trains/TrainOptionsTypes";
-import { TrainFilterType } from "../enums/TrainFilterType";
-import Train from "../interfaces/Train";
-import TrainStop from "../interfaces/TrainStop";
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
+import { TrainFilterType } from '../enums/TrainFilterType';
+import Train from '../interfaces/Train';
+import TrainStop from '../interfaces/TrainStop';
 
 function confirmedPercentage(stops: TrainStop[] | undefined) {
-    if (!stops) return -1;
+  if (!stops) return -1;
 
-    return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
-};
+  return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
+}
 
 function currentDelay(stops: TrainStop[] | undefined) {
-    if (!stops) return -Infinity;
+  if (!stops) return -Infinity;
 
-    const delay =
-        stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
-            ?.departureDelay || 0;
+  const delay =
+    stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
+      ?.departureDelay || 0;
 
-    return delay;
-};
+  return delay;
+}
 
 function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
-    return trainList.filter(
-        (train) => {
-            const isFiltered = filters.every(f => {
-                if (f.isActive) return true;
+  return trainList.filter((train) => {
+    const isFiltered = filters.every((f) => {
+      if (f.isActive) return true;
 
-                if (!train.timetableData) return filters.find(filter => filter.id == TrainFilterType.noTimetable)!.isActive;
+      if (!train.timetableData) return filters.find((filter) => filter.id == TrainFilterType.noTimetable)!.isActive;
 
-                switch (f.id) {
-                    case TrainFilterType.comments:
-                        return !train.timetableData.followingStops.some(stop => stop.comments);
-                    
-                    case TrainFilterType.twr:
-                        return !train.timetableData.TWR;
-                    
-                    case TrainFilterType.skr:
-                        return !train.timetableData.SKR;
-                    
-                    case TrainFilterType.passenger:
-                        return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
-                    
-                    case TrainFilterType.freight:
-                        return !train.timetableData.category.startsWith('T');
-                    
-                    case TrainFilterType.other:
-                        return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
-                    
-                    default:
-                        return true;
-                }
-            })
+      switch (f.id) {
+        case TrainFilterType.comments:
+          return !train.timetableData.followingStops.some((stop) => stop.comments);
 
-            return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
-                (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
-        }
+        case TrainFilterType.twr:
+          return !train.timetableData.TWR;
 
+        case TrainFilterType.skr:
+          return !train.timetableData.SKR;
+
+        case TrainFilterType.passenger:
+          return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
+
+        case TrainFilterType.freight:
+          return !train.timetableData.category.startsWith('T');
+
+        case TrainFilterType.other:
+          return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
+
+        default:
+          return true;
+      }
+    });
+
+    return (
+      (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
+      (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) &&
+      (!train.timetableData ? !train.online : true) &&
+      isFiltered
     );
+  });
 }
 
 function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
-    return trainList.sort((a: Train, b: Train) => {
-        switch (sorterActive.id) {
-            case 'mass':
-                if (a.mass > b.mass) return sorterActive.dir;
-                return -sorterActive.dir;
+  return trainList.sort((a: Train, b: Train) => {
+    switch (sorterActive.id) {
+      case 'id':
+        if ((a.timetableData?.timetableId || -1) > (b.timetableData?.timetableId || -1)) return sorterActive.dir;
 
-            case 'distance':
-                if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
+        return -sorterActive.dir;
 
-                return -sorterActive.dir;
+      case 'mass':
+        if (a.mass > b.mass) return sorterActive.dir;
+        return -sorterActive.dir;
 
-            case 'progress':
-                if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
-                    return sorterActive.dir;
+      case 'distance':
+        if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
 
-                return -sorterActive.dir;
+        return -sorterActive.dir;
 
-            case 'delay':
-                if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
-                    return sorterActive.dir;
+      case 'progress':
+        if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
+          return sorterActive.dir;
 
-                return -sorterActive.dir;
+        return -sorterActive.dir;
 
-            case 'speed':
-                if (a.speed > b.speed) return sorterActive.dir;
-                return -sorterActive.dir;
+      case 'delay':
+        if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
+          return sorterActive.dir;
 
-            case 'timetable':
-                if (a.trainNo > b.trainNo) return sorterActive.dir;
-                return -sorterActive.dir;
+        return -sorterActive.dir;
 
-            case 'length':
-                if (a.length > b.length) return sorterActive.dir;
-                return -sorterActive.dir;
+      case 'speed':
+        if (a.speed > b.speed) return sorterActive.dir;
+        return -sorterActive.dir;
 
-            default:
-                break;
-        }
+      case 'timetable':
+        if (a.trainNo > b.trainNo) return sorterActive.dir;
+        return -sorterActive.dir;
 
-        return 0;
-    });
+      case 'length':
+        if (a.length > b.length) return sorterActive.dir;
+        return -sorterActive.dir;
+
+      default:
+        break;
+    }
+
+    return 0;
+  });
 }
 
 export function filteredTrainList(
-    trainList: Train[],
-    searchedTrain: string,
-    searchedDriver: string,
-    sorterActive: { id: string; dir: number },
-    filters: TrainFilter[]
+  trainList: Train[],
+  searchedTrain: string,
+  searchedDriver: string,
+  sorterActive: { id: string; dir: number },
+  filters: TrainFilter[]
 ) {
-
-    const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);        
-    return [...sortTrainList(filtered, sorterActive)];
-};
\ No newline at end of file
+  const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);
+  return [...sortTrainList(filtered, sorterActive)];
+}
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 92b74e3..dfac6ba 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -2,7 +2,7 @@
   <section class="trains-view">
     <div class="trains_wrapper">
       <TrainOptions
-        :sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']"
+        :sorter-option-ids="['distance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
         :current-options-active="currentOptionsActive"
       />