diff --git a/resources/components/favourites.html b/resources/components/favourites.html
index 1c5c33e..b47e62a 100644
--- a/resources/components/favourites.html
+++ b/resources/components/favourites.html
@@ -2,9 +2,9 @@
     <ul class="list-underlined" v-if="favourites.length > 0">
         <li v-for="favourite in favourites" class="flex">
             <a href="#" @click="choose(favourite)" class="btn btn-action pl-0 flex-grow-1 text-left">
-            <span class="icon">
-                <fa :icon="['fal', 'star']"></fa>
-            </span>
+                <span class="icon">
+                    <fa :icon="['fal', 'star']"></fa>
+                </span>
                 <span class="text">{{ favourite.name }}</span>
             </a>
             <button class="btn btn-action" @click="remove(favourite)">
diff --git a/resources/components/finder.html b/resources/components/finder.html
index eeaaad6..cf7a027 100644
--- a/resources/components/finder.html
+++ b/resources/components/finder.html
@@ -22,10 +22,10 @@
             </div>
             <ul class="stop-group__stops list-underlined">
                 <li v-for="stop in group" :key="stop.id" class="d-flex">
-                    <button @click="select(stop, $event)" class="btn btn-action">
+                    <button @click="select(stop, $event)" class="btn btn-action align-self-start">
                         <fa :icon="['fal', 'check']" />
                     </button>
-                    <stop :stop="stop" class="flex-grow-1"></stop>
+                    <picker-stop :stop="stop" class="flex-grow-1"></picker-stop>
                 </li>
             </ul>
         </div>
@@ -34,4 +34,4 @@
         <fa :icon="['far', 'exclamation-triangle']"></fa>
         Nie znaleziono więcej przystanków, spełniających te kryteria.
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/components/picker/stop.html b/resources/components/picker/stop.html
new file mode 100644
index 0000000..d18b9d1
--- /dev/null
+++ b/resources/components/picker/stop.html
@@ -0,0 +1,27 @@
+<div class="d-flex flex-wrap">
+    <stop :stop="stop" />
+
+    <slot/>
+
+    <div class="stop__actions flex-space-left">
+        <slot name="actions">
+            <button class="btn btn-action" ref="action-info" @click="details = !details">
+                <fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
+            </button>
+
+            <button class="btn btn-action" ref="action-map" v-hover:map>
+                <fa :icon="['fal', 'map-marker-alt']"/>
+            </button>
+        </slot>
+    </div>
+
+    <fold :visible="details" class="stop__details-fold" lazy>
+        <stop-details :stop="stop"/>
+    </fold>
+
+    <popper reference="action-map" :visible="map" arrow class="popper--no-padding" style="width: 500px;" placement="right-start">
+        <div style="height: 300px">
+            <stop-map :stop="stop" />
+        </div>
+    </popper>
+</div>
diff --git a/resources/components/stop.html b/resources/components/stop.html
index 47ea0b0..b7f89f7 100644
--- a/resources/components/stop.html
+++ b/resources/components/stop.html
@@ -1,31 +1,4 @@
 <div class="stop">
     <span class="stop__name">{{ stop.name }}</span>
-    <span class="stop__description badge badge-dark" v-if="stop.variant">{{ stop.variant }}</span>
-
-    <slot/>
-
-    <div class="stop__actions flex-space-left">
-        <slot name="actions">
-            <button class="btn btn-action" ref="action-info" @click="details = !details">
-                <fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
-            </button>
-
-            <button class="btn btn-action" ref="action-map" v-hover:map>
-                <fa :icon="['fal', 'map-marker-alt']"/>
-            </button>
-        </slot>
-    </div>
-
-    <fold :visible="details" class="stop__details-fold" lazy>
-        <stop-details :stop="stop"></stop-details>
-    </fold>
-
-    <popper reference="action-map" :visible="map" arrow class="popper--no-padding" style="width: 500px;" placement="right-start">
-        <div style="height: 300px">
-            <l-map :center="stop.location" :zoom=17 :options="{ zoomControl: false, dragging: false }">
-                <l-tile-layer url="//{s}.tile.osm.org/{z}/{x}/{y}.png" attribution='&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'></l-tile-layer>
-                <l-marker :lat-lng="stop.location"></l-marker>
-            </l-map>
-        </div>
-    </popper>
-</div>
\ No newline at end of file
+    <span class="stop__variant badge badge-dark" v-if="stop.variant">{{ stop.variant }}</span>
+</div>
diff --git a/resources/components/stop-details.html b/resources/components/stop/details.html
similarity index 100%
rename from resources/components/stop-details.html
rename to resources/components/stop/details.html
diff --git a/resources/components/stop/map.html b/resources/components/stop/map.html
new file mode 100644
index 0000000..7c80252
--- /dev/null
+++ b/resources/components/stop/map.html
@@ -0,0 +1,5 @@
+<l-map :center="stop.location" :zoom=17 :options="{ zoomControl: false, dragging: false }">
+    <l-tile-layer url="//{s}.tile.osm.org/{z}/{x}/{y}.png"
+                  attribution='&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'/>
+    <l-marker :lat-lng="stop.location"/>
+</l-map>
diff --git a/resources/styles/_stop.scss b/resources/styles/_stop.scss
index 9cc288b..96fea65 100644
--- a/resources/styles/_stop.scss
+++ b/resources/styles/_stop.scss
@@ -7,7 +7,7 @@
 .stop__name {
 }
 
-.stop__description {
+.stop__variant {
   margin: 0 .5rem;
 }
 
@@ -46,4 +46,4 @@
       flex: 0 0 50%;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/resources/ts/components/picker.ts b/resources/ts/components/picker.ts
index 2940092..394541d 100644
--- a/resources/ts/components/picker.ts
+++ b/resources/ts/components/picker.ts
@@ -6,7 +6,21 @@ import { ensureArray, FetchingState, filter, map } from "../utils";
 import { debounce } from "../decorators";
 import urls from '../urls';
 
-@Component({ template: require('../../components/finder.html') })
+@Component({ template: require('../../components/picker/stop.html') })
+export class PickerStopComponent extends Vue {
+    @Prop(Object)
+    public stop: Stop;
+
+    details: boolean = false;
+    map: boolean = false;
+}
+
+@Component({
+    template: require('../../components/finder.html'),
+    components: {
+        "PickerStop": PickerStopComponent
+    }
+})
 export class FinderComponent extends Vue {
     protected found?: StopGroups = {};
 
@@ -51,3 +65,4 @@ export class FinderComponent extends Vue {
 }
 
 Vue.component('StopFinder', FinderComponent);
+Vue.component('PickerStop', PickerStopComponent);
diff --git a/resources/ts/components/stop.ts b/resources/ts/components/stop.ts
index 93b74a7..1439564 100644
--- a/resources/ts/components/stop.ts
+++ b/resources/ts/components/stop.ts
@@ -3,7 +3,7 @@ import { Line, Stop, Track } from "../model";
 import Vue from 'vue';
 import urls from "../urls";
 
-@Component({ template: require('../../components/stop-details.html') })
+@Component({ template: require('../../components/stop/details.html') })
 class StopDetailsComponent extends Vue {
     @Prop(Object)
     public stop: Stop;
@@ -39,10 +39,14 @@ class StopDetailsComponent extends Vue {
 export class StopComponent extends Vue {
     @Prop(Object)
     public stop: Stop;
+}
 
-    details: boolean = false;
-    map: boolean = false;
+@Component({ template: require('../../components/stop/map.html') })
+export class StopMapComponent extends Vue {
+    @Prop(Object)
+    public stop: Stop;
 }
 
 Vue.component('Stop', StopComponent);
 Vue.component('StopDetails', StopDetailsComponent);
+Vue.component('StopMap', StopMapComponent);
diff --git a/resources/ts/types/webpack.d.ts b/resources/ts/types/webpack.d.ts
index cf9f28b..a700733 100644
--- a/resources/ts/types/webpack.d.ts
+++ b/resources/ts/types/webpack.d.ts
@@ -10,4 +10,5 @@ declare module "*.svg" {
 
 declare module "*.png" {}
 
-declare function require(path: string): any;
\ No newline at end of file
+// @ts-ignore
+declare function require(path: string): any;
diff --git a/templates/app.html.twig b/templates/app.html.twig
index 497f9cf..6d6061c 100644
--- a/templates/app.html.twig
+++ b/templates/app.html.twig
@@ -102,10 +102,10 @@
 
                 <ul class="picker__stops list-underlined">
                     <li v-for="stop in stops" :key="stop.id" class="d-flex align-items-center">
-                        <button @click="remove(stop)" class="btn btn-action">
+                        <button @click="remove(stop)" class="btn btn-action align-self-start">
                             <fa :icon="['fal', 'times']"></fa>
                         </button>
-                        <stop :stop="stop" class="flex-grow-1"></stop>
+                        <picker-stop :stop="stop" class="flex-grow-1"></picker-stop>
                     </li>
                 </ul>
             </section>