diff --git a/app/Http/Controllers/SpotifyController.php b/app/Http/Controllers/SpotifyController.php
index e9bb950..a2ea6eb 100644
--- a/app/Http/Controllers/SpotifyController.php
+++ b/app/Http/Controllers/SpotifyController.php
@@ -89,35 +89,33 @@ public function index(): Renderable
     /**
      * Show the users top tracks
      *
-     * @param String $term expect 'long_term', 'medium_term' or 'short_term'
+     * @param Request $request
      * @return Renderable
      */
-    public function topTracks(string $term = 'long_term'): Renderable
+    public function topTracks(Request $request): Renderable
     {
         $socialProfile = auth()->user()->socialProfile()->first() ?: new SocialLoginProfile;
         if ($socialProfile->spotify_accessToken == null)
             return view('spotify.notconnected');
 
-        $dataCount = User::find(auth()->user()->id)->spotifyActivity->count();
-        if ($dataCount == 0)
-            return view('spotify.nodata');
-
-        if (!in_array($term, ['long_term', 'short_term', 'medium_term']))
-            $term = 'short_term';
-
-        $access_token = auth()->user()->socialProfile->spotify_accessToken;
+        $validated = $request->validate([
+                                            'from' => ['nullable', 'date'],
+                                            'to'   => ['nullable', 'date'],
+                                        ]);
 
-        try {
-            $top_tracks = SpotifyAPIController::getTopTracks($access_token, $term);
-        } catch (SpotifyTokenExpiredException $e) {
-            return view('spotify.notconnected');
-        } catch (SpotifyAPIException $e) {
-            report($e);
-            return view('spotify.nodata');
+        $topTracks = auth()->user()->spotifyActivity();
+        if (isset($validated['from'])) {
+            $topTracks->where('timestamp_start', '>=', $validated['from']);
+        }
+        if (isset($validated['to'])) {
+            $topTracks->where('timestamp_start', '<=', $validated['to']);
         }
+        $topTracks->groupBy('track_id')
+                  ->select(['track_id', DB::raw('COUNT(track_id) as minutes')])
+                  ->orderByDesc('minutes');
 
         return view('spotify.top_tracks', [
-            'top_tracks' => $top_tracks
+            'top_tracks' => $topTracks->paginate(16)
         ]);
     }
 
diff --git a/resources/views/spotify/card_topTracks.blade.php b/resources/views/spotify/card_topTracks.blade.php
index 4bd695f..6e4f34c 100644
--- a/resources/views/spotify/card_topTracks.blade.php
+++ b/resources/views/spotify/card_topTracks.blade.php
@@ -1,38 +1,5 @@
 @foreach($topTracks as $playActivity)
-    <div class="row">
-        <div class="col-md-4">
-            @isset($playActivity->track->album->imageUrl)
-                <a href="/spotify/track/{{$playActivity->track->id}}">
-                    <img src="{{$playActivity->track->album->imageUrl}}" class="spotify-cover"/>
-                </a>
-            @endisset
-        </div>
-        <div class="col">
-            <a href="/spotify/track/{{$playActivity->track->id}}">
-                <b>{{$playActivity->track->name}}</b>
-            </a>
-            <br>
-            @isset($playActivity->track->artists)
-                <small>von
-                    @foreach($playActivity->track->artists as $artist)
-                        <a href="{{route('spotify.artist', ['id' => $artist->id])}}">{{$artist->name}}</a>
-                        @if(!$loop->last) und @endif
-                    @endforeach
-                </small>
-                <br/>
-            @endisset
-            <small>{{$playActivity->minutes}} Minuten gehört</small>
-
-            @isset($playActivity->track->preview_url)
-                <audio controls="">
-                    <source src="{{$playActivity->track->preview_url}}" type="audio/mpeg">
-                    Your browser does not support the audio element.';
-                </audio>
-            @endif
-        </div>
-    </div>
-    @include('spotify.track-attributes', ['track' => $playActivity->track])
-    <hr/>
+    @include('spotify.components.track', ['track' => $playActivity->track, 'minutes' => $playActivity->minutes])
 @endforeach
 
 {{$topTracksTotal->fragment($fragment)->onEachSide(1)->links()}}
\ No newline at end of file
diff --git a/resources/views/spotify/components/track.blade.php b/resources/views/spotify/components/track.blade.php
new file mode 100644
index 0000000..a7f1a63
--- /dev/null
+++ b/resources/views/spotify/components/track.blade.php
@@ -0,0 +1,36 @@
+<div class="row">
+    <div class="col-md-4">
+        @isset($track->album->imageUrl)
+            <a href="/spotify/track/{{$track->id}}">
+                <img src="{{$track->album->imageUrl}}" class="spotify-cover"/>
+            </a>
+        @endisset
+    </div>
+    <div class="col">
+        <a href="/spotify/track/{{$track->id}}">
+            <b>{{$track->name}}</b>
+        </a>
+        <br>
+        @isset($track->artists)
+            <small>von
+                @foreach($track->artists as $artist)
+                    <a href="{{route('spotify.artist', ['id' => $artist->id])}}">{{$artist->name}}</a>
+                    @if(!$loop->last) und @endif
+                @endforeach
+            </small>
+            <br/>
+        @endisset
+        @isset($minutes)
+            <small>{{$minutes}} Minuten gehört</small>
+        @endisset
+
+        @isset($track->preview_url)
+            <audio controls="">
+                <source src="{{$track->preview_url}}" type="audio/mpeg">
+                Your browser does not support the audio element.';
+            </audio>
+        @endif
+    </div>
+</div>
+@include('spotify.track-attributes', ['track' => $track])
+<hr/>
\ No newline at end of file
diff --git a/resources/views/spotify/top_tracks.blade.php b/resources/views/spotify/top_tracks.blade.php
index 3af0432..31373a1 100644
--- a/resources/views/spotify/top_tracks.blade.php
+++ b/resources/views/spotify/top_tracks.blade.php
@@ -4,75 +4,19 @@
 
 @section('content')
     <div class="row">
-        <div class="col-md-12">
-            <div class="card">
-                <div class="card-body">
-                    <h5 class="card-title">Zeitraum wählen</h5>
-                    <div class="btn-group" role="group" aria-label="Basic example">
-                        <a class="btn btn-danger" href="{{route('spotify.topTracks', ['term' => 'long_term'])}}">
-                            {{__('spotify.last_years')}}
-                        </a>
-                        <a class="btn btn-warning" href="{{route('spotify.topTracks', ['term' => 'medium_term'])}}">
-                            {{__('spotify.last_months')}}
-                        </a>
-                        <a class="btn btn-success" href="{{route('spotify.topTracks', ['term' => 'short_term'])}}">
-                            {{__('spotify.last_weeks')}}
-                        </a>
+        @foreach($top_tracks as $activity)
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-body">
+                        <h2>
+                            Platz {{$loop->index + 1 + ($top_tracks->perPage() * ($top_tracks->currentPage() - 1))}}</h2>
+                        @include('spotify.components.track', ['track' => $activity->track, 'minutes' => $activity->minutes])
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
-
-    <div class="row">
+        @endforeach
         <div class="col-md-12">
-            <div class="card">
-                <div class="card-body">
-                    <table class="ui table unstackable">
-                        <thead>
-                        <tr>
-                            <th>{{__('spotify.place')}}</th>
-                            <th></th>
-                            <th>{{__('spotify.track')}}</th>
-                            <th>{{__('spotify.preview')}}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        @foreach($top_tracks->items as $track)
-                            <tr>
-                                <td>#{{$loop->index + 1}}</td>
-                                <td>
-                                    @isset($track->album->images[0]->url)
-                                        <img src="{{$track->album->images[0]->url}}" class="spotify-cover"
-                                             style="max-width: 100px;"/>
-                                    @endisset
-                                </td>
-                                <td>
-                                    <b>{{$track->name}}</b><br/>
-                                    <small>
-                                        @foreach($track->artists as $artist)
-                                            @if($loop->first)von @endif
-                                            {{$artist->name}}
-                                            @if(!$loop->last) und @endif
-                                        @endforeach
-                                    </small>
-
-                                    @if($track->popularity > 80)
-                                        <span class="badge badge-primary">{{__('spotify.popular_track')}}</span>
-                                    @endif
-                                </td>
-                                <td>
-                                    <audio controls>
-                                        <source src="{{$track->preview_url}}" type="audio/mpeg">
-                                        Your browser does not support the audio element.
-                                    </audio>
-                                </td>
-                            </tr>
-                        @endforeach
-                        </tbody>
-                    </table>
-                </div>
-            </div>
+            {{$top_tracks->withQueryString()->links()}}
         </div>
     </div>
 @endsection
\ No newline at end of file