diff --git a/maloja/web/jinja/icons/nodata.jinja b/maloja/web/jinja/icons/nodata.jinja
index dde0cbb..8ddb3d1 100644
--- a/maloja/web/jinja/icons/nodata.jinja
+++ b/maloja/web/jinja/icons/nodata.jinja
@@ -1,7 +1,7 @@
-<td style="opacity:0.5;text-align:center;">
+<div class="tile" style="opacity:0.5;text-align:center;">
 <svg height="96px" viewBox="0 0 24 24" width="96px">
 	<path d="M0 0h24v24H0z" fill="none"/>
 	<path d="M4.27 3L3 4.27l9 9v.28c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4v-1.73L19.73 21 21 19.73 4.27 3zM14 7h4V3h-6v5.18l2 2z"/>
 </svg>
 <br/>No scrobbles yet!
-</td>
+</div>
diff --git a/maloja/web/jinja/partials/charts_albums_tiles.jinja b/maloja/web/jinja/partials/charts_albums_tiles.jinja
index 400d68b..86f7ba2 100644
--- a/maloja/web/jinja/partials/charts_albums_tiles.jinja
+++ b/maloja/web/jinja/partials/charts_albums_tiles.jinja
@@ -6,40 +6,26 @@
 {% endif %}
 
 {% set charts_14 = charts | fixlength(14) %}
-{% set charts_cycler = cycler(*charts_14) %}
 
 
-
-<table class="tiles_top"><tr>
-{% for segment in range(3) %}
-	{% if charts_14[0] is none and loop.first %}
-	{% include 'icons/nodata.jinja' %}
-	{% else %}
-	<td>
-	{% set segmentsize = segment+1 %}
-	<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
-		{% for row in range(segmentsize) -%}
-			<tr>
-				{% for col in range(segmentsize) %}
-					{% set entry = charts_cycler.next() %}
-					{% if entry is not none %}
-						{% set album = entry.album %}
-						{% set rank = entry.rank %}
-						<td>
-							<a href="{{ links.url(album) }}">
-							<div class="lazy" data-bg="{{ images.get_album_image(album) }}"'>
-								<span class='stats'>#{{ rank }}</span> <span>{{ album.albumtitle }}</span>
-							</div>
-							</a>
-						</td>
-					{% else -%}
-						<td></td>
-					{%- endif -%}
-				{%- endfor -%}
-			</tr>
-		{%- endfor -%}
-	</table>
-	</td>
+<div class="tiles">
+	{% if charts_14[0] is none %}
+		{% include 'icons/nodata.jinja' %}
 	{% endif %}
-{% endfor %}
-</tr></table>
+	{% for entry in charts_14 %}
+		{% if entry is not none %}
+			{% set album = entry.album %}
+			{% set rank = entry.rank %}
+			<div class="tile">
+			<a href="{{ links.url(album) }}">
+				<div class="lazy" data-bg="{{ images.get_album_image(album) }}"'>
+					<span class='stats'>#{{ rank }}</span> <span>{{ album.albumtitle }}</span>
+				</div>
+			</a>
+			</div>
+		{% else %}
+			<div></div>
+		{% endif %}
+	{% endfor %}
+
+</div>
diff --git a/maloja/web/jinja/partials/charts_artists_tiles.jinja b/maloja/web/jinja/partials/charts_artists_tiles.jinja
index 23ac18e..ef97ede 100644
--- a/maloja/web/jinja/partials/charts_artists_tiles.jinja
+++ b/maloja/web/jinja/partials/charts_artists_tiles.jinja
@@ -6,40 +6,26 @@
 {% endif %}
 
 {% set charts_14 = charts | fixlength(14) %}
-{% set charts_cycler = cycler(*charts_14) %}
 
 
-
-<table class="tiles_top"><tr>
-{% for segment in range(3) %}
-	{% if charts_14[0] is none and loop.first %}
-	{% include 'icons/nodata.jinja' %}
-	{% else %}
-	<td>
-	{% set segmentsize = segment+1 %}
-	<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
-		{% for row in range(segmentsize) -%}
-			<tr>
-				{% for col in range(segmentsize) %}
-					{% set entry = charts_cycler.next() %}
-					{% if entry is not none %}
-						{% set artist = entry.artist %}
-						{% set rank = entry.rank %}
-						<td>
-							<a href="{{ links.url(artist) }}">
-							<div class="lazy" data-bg="{{ images.get_artist_image(artist) }}"'>
-								<span class='stats'>#{{ rank }}</span> <span>{{ artist }}</span>
-							</div>
-							</a>
-						</td>
-					{% else -%}
-						<td></td>
-					{%- endif -%}
-				{%- endfor -%}
-			</tr>
-		{%- endfor -%}
-	</table>
-	</td>
+<div class="tiles">
+	{% if charts_14[0] is none %}
+		{% include 'icons/nodata.jinja' %}
 	{% endif %}
-{% endfor %}
-</tr></table>
+	{% for entry in charts_14 %}
+		{% if entry is not none %}
+			{% set artist = entry.artist %}
+			{% set rank = entry.rank %}
+			<div class="tile">
+			<a href="{{ links.url(artist) }}">
+				<div class="lazy" data-bg="{{ images.get_artist_image(artist) }}"'>
+					<span class='stats'>#{{ rank }}</span> <span>{{ artist }}</span>
+				</div>
+			</a>
+			</div>
+		{% else %}
+			<div></div>
+		{% endif %}
+	{% endfor %}
+
+</div>
diff --git a/maloja/web/jinja/partials/charts_tracks_tiles.jinja b/maloja/web/jinja/partials/charts_tracks_tiles.jinja
index ba66a10..6b238a6 100644
--- a/maloja/web/jinja/partials/charts_tracks_tiles.jinja
+++ b/maloja/web/jinja/partials/charts_tracks_tiles.jinja
@@ -6,39 +6,26 @@
 {% endif %}
 
 {% set charts_14 = charts | fixlength(14) %}
-{% set charts_cycler = cycler(*charts_14) %}
 
 
-<table class="tiles_top"><tr>
-{% for segment in range(3) %}
-	{% if charts_14[0] is none and loop.first %}
-	{% include 'icons/nodata.jinja' %}
-	{% else %}
-	<td>
-	{% set segmentsize = segment+1 %}
-	<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
-		{% for row in range(segmentsize) -%}
-			<tr>
-				{% for col in range(segmentsize) %}
-					{% set entry = charts_cycler.next() %}
-					{% if entry is not none %}
-						{% set track = entry.track %}
-						{% set rank = entry.rank %}
-						<td>
-							<a href="{{ links.url(track) }}">
-							<div class="lazy" data-bg="{{ images.get_track_image(track) }}")'>
-								<span class='stats'>#{{ rank }}</span> <span>{{ track.title }}</span>
-							</div>
-							</a>
-						</td>
-					{% else -%}
-						<td></td>
-					{%- endif %}
-				{%- endfor -%}
-			</tr>
-		{%- endfor %}
-	</table>
-	</td>
+<div class="tiles">
+	{% if charts_14[0] is none %}
+		{% include 'icons/nodata.jinja' %}
 	{% endif %}
-{% endfor %}
-</tr></table>
+	{% for entry in charts_14 %}
+		{% if entry is not none %}
+			{% set track = entry.track %}
+			{% set rank = entry.rank %}
+			<div class="tile">
+			<a href="{{ links.url(track) }}">
+				<div class="lazy" data-bg="{{ images.get_track_image(track) }}"'>
+					<span class='stats'>#{{ rank }}</span> <span>{{ track.title }}</span>
+				</div>
+			</a>
+			</div>
+		{% else %}
+			<div></div>
+		{% endif %}
+	{% endfor %}
+
+</div>
diff --git a/maloja/web/static/css/maloja.css b/maloja/web/static/css/maloja.css
index 239b44a..3c838db 100644
--- a/maloja/web/static/css/maloja.css
+++ b/maloja/web/static/css/maloja.css
@@ -800,53 +800,76 @@ table.misc td {
 
 
 
+div.tiles {
+	display: grid;
+	grid-template-columns: repeat(18, 50px);
+	grid-template-rows: repeat(6, 50px);
+	grid-auto-flow: row dense;
 
-
-
-
-table.tiles_top td {
-	padding:0px;
-	border:0px;
 }
 
-table.tiles_top:hover td td {
+div.tiles div {
+	height: 100%;
+	width: 100%;
+	background-size: cover;
+	background-position:top center;
+	overflow: hidden;
+}
+
+div.tiles:hover div {
 	opacity:0.5;
 	filter: grayscale(80%);
 }
-table.tiles_top:hover td td:hover {
+div.tiles:hover div:hover {
 	opacity:1;
 	filter: grayscale(0%);
 }
 
-table.tiles_top, table.tiles_sub {
-	border-collapse: collapse;
+div.tiles div.tile:nth-child(1) {
+	grid-column: span 6;
+	grid-row: span 6;
+
+	font-size:100%
+}
+
+div.tiles div.tile:nth-child(2),
+div.tiles div.tile:nth-child(3),
+div.tiles div.tile:nth-child(4),
+div.tiles div.tile:nth-child(5) {
+	grid-column: span 3;
+	grid-row: span 3;
+
+	font-size:80%
+}
+
+div.tiles div.tile:nth-child(2),
+div.tiles div.tile:nth-child(4) {
+	grid-column-start: 7;
+	grid-column-end: span 3;
+}
+div.tiles div.tile:nth-child(3),
+div.tiles div.tile:nth-child(5) {
+	grid-column-start: 10;
+	grid-column-end: span 3;
+}
+
+div.tiles div.tile:nth-child(6),
+div.tiles div.tile:nth-child(7),
+div.tiles div.tile:nth-child(8),
+div.tiles div.tile:nth-child(9),
+div.tiles div.tile:nth-child(10),
+div.tiles div.tile:nth-child(11),
+div.tiles div.tile:nth-child(12),
+div.tiles div.tile:nth-child(13),
+div.tiles div.tile:nth-child(14) {
+	grid-column: span 2;
+	grid-row: span 2;
+
+	font-size:60%
 }
 
 
-
-table.tiles_top>tbody>tr>td {
-	height:300px;
-	width:300px;
-}
-
-
-table.tiles_sub {
-	height:100%;
-	width:100%;
-}
-
-table.tiles_sub div {
-	height:100%;
-	width:100%;
-}
-
-table.tiles_top td div {
-	background-size:cover;
-	background-position:top center;
-	vertical-align:bottom;
-}
-
-table.tiles_top td span {
+div.tiles span {
 	background-color:rgba(0,0,0,0.7);
 	display: inline-block;
 	margin-top:2%;
@@ -854,48 +877,21 @@ table.tiles_top td span {
 	max-width: 67%;
 	vertical-align: text-top;
 }
-table.tiles_top td a:hover {
+div.tiles span {
+        overflow-wrap: anywhere;
+}
+
+div.tiles a:hover {
 	text-decoration: none;
 }
 
-table.tiles_1x1 td {
-	height:100%;
-	width:100%;
-	font-size:100%
-}
-table.tiles_2x2 td {
-	height:50%;
-	width:50%;
-	font-size:80%
-}
-table.tiles_3x3 td {
-	height:33.333%;
-	width:33.333%;
-	font-size:60%
-}
-table.tiles_4x4 td {
-	font-size:50%
-}
-table.tiles_5x5 td {
-	font-size:40%
-}
 
-/* Safari fix */
-table.tiles_sub.tiles_3x3 td div {
-        min-height: 100px;
-        min-width: 100px;
-}
-table.tiles_sub.tiles_2x2 td div {
-        min-height: 150px;
-        min-width: 150px;
-}
-table.tiles_sub.tiles_1x1 td div {
-        min-height: 300px;
-        min-width: 300px;
-}
-table.tiles_sub a span {
-        overflow-wrap: anywhere;
-}
+
+
+
+
+
+
 
 
 div#showcase_container {