diff --git a/public/static/js/travelynx-actions.js b/public/static/js/travelynx-actions.js
index e4d69dc924b511c6458009401fa37553d9934195..1b6dd8aede4ed8c1015cc7b8e97b23acde9ca32b 100644
--- a/public/static/js/travelynx-actions.js
+++ b/public/static/js/travelynx-actions.js
@@ -298,6 +298,10 @@ $(document).ready(function() {
 	$('a[href]').click(function() {
 		$('nav .preloader-wrapper').addClass('active');
 	});
+	$('a[href="#now"]').click(function(event) {
+	    event.preventDefault();
+	    $('#now')[0].scrollIntoView({behavior: "smooth", block: "center"});
+	});
 	const elems = document.querySelectorAll('.carousel');
 	const instances = M.Carousel.init(elems, {
 		fullWidth: true,
diff --git a/templates/departures.html.ep b/templates/departures.html.ep
index c08e986b3e953054622f6b5b58e2f4088a4d79a0..9235600cd20966a1f39aeef83d587b98ed0c4482 100644
--- a/templates/departures.html.ep
+++ b/templates/departures.html.ep
@@ -7,18 +7,20 @@
 		% }
 	</div>
 </div>
-% if ($api_link) {
-	<div class="row">
-		<div class="col s12 center-align">
-			% if (param('hafas')) {
-				<a href="<%= $api_link %>">zum Schienenverkehr</a>
-			% }
-			% else {
-				<a href="<%= $api_link %>">zum Nahverkehr</a>
-			% }
-		</div>
+<div class="row">
+	<div class="col s12">
+	% if ($api_link) {
+	% if (param('hafas')) {
+		<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left">train</i>zum Schienenverkehr</a>
+	% }
+	% else {
+		<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left">directions</i>zum Nahverkehr</a>
+	% }
+	% }
+	<a class="btn-small" href="#now"><i class="material-icons left">vertical_align_center</i>Jetzt</a>
 	</div>
-% }
+</div>
+
 % my $have_connections = 0;
 % if ($user_status->{checked_in}) {
 	<div class="row">