diff --git a/layouts/game/list.html b/layouts/game/list.html
index 15894cd..10539b5 100644
--- a/layouts/game/list.html
+++ b/layouts/game/list.html
@@ -65,31 +65,93 @@
 
 {{ define "scripts" }}
 <script type="text/javascript">
-    document.addEventListener('DOMContentLoaded', function () {
-        Highcharts.chart('highchart-container', {
-            chart: { type: 'bar', backgroundColor: null },
-            colors: [{{ range .Site.Data.compatibility }}"{{ .color }}", {{- end }}],
-        credits: { enabled: false },
-        exporting: { enabled: false },
-        title: { text: '' },
-        xAxis: { categories: [''] },
-        yAxis: { min: 0, max: {{ len .Data.Pages }}, title: { text: '' } },
-        legend: { enabled: false },
-        plotOptions: {
-            series: {
-                stacking: 'normal',
-                cursor: 'pointer',
-                events: {
-                    click: null
-                }
-            }
-        },
-        series: [
-            {{- $dataPages := .Data.Pages }}
-            {{- range.Site.Data.compatibility }}
-            {{- $dataPagesFiltered := where $dataPages ".Params.compatibility".key }}
-            { "name": "{{ .name }}", "data": [{{ len $dataPagesFiltered }}] },
-        {{- end }}]});
-	}, false);
+	$(function() {
+		function getLastSorted(list){
+			var currentSorted = $(list.listContainer).find(".asc, .desc").attr("data-sort");
+			if ('undefined' !== typeof currentSorted)
+				list.lastSorted = currentSorted;
+			return list.lastSorted;
+		}
+
+		function filterTable(_) {
+			var rating = this.name;
+			var index = this.index;
+
+			$("#search-box").val(rating);
+			list.search(index, ['compatibility']);
+		}
+
+		function clearSearch() {
+			$("#search-box").val("");
+			list.search();
+		}
+
+		var options = {
+			valueNames: [
+				'listing-metadata',
+				{ name: 'title', attr: 'data-title' },
+				{ name: 'type', attr: 'data-type' },
+				{ name: 'compatibility', attr: 'data-compatibility' },
+				{ name: 'date-tested', attr: 'data-timestamp' }
+			],
+			searchColumns: [ 'listing-metadata' ],
+			pagination: [
+				{ paginationClass: "paginationTop" },
+				{ paginationClass: "paginationBottom" }
+			],
+			indexAsync: true,
+			page: 50
+		};
+
+		var list = new List('game-listing', options);
+
+		list.sort("title", {order: "asc"});
+
+		list.on("updated", function(list){
+			var $list = $(list.list);
+			var $items = $list.children();
+			$items.removeClass("key");
+			if ('title' == getLastSorted(list)){
+				$items.each(function(){
+					var key = $(this).attr("data-key")
+					if (
+						$list
+						.children("[data-key='" + key + "']")
+						.first()
+						.is( $(this) )
+					){
+						$(this).addClass("key");
+					}
+				})
+			}
+		});
+
+		$('#game-listing .clear-search').click(clearSearch);
+
+		Highcharts.chart('highchart-container', {
+			chart: { type: 'bar' },
+			colors: [{{ range .Site.Data.compatibility }}"{{ .color }}", {{- end }}],
+			credits: { enabled: false },
+				exporting: { enabled: false },
+			title: { text: '' },
+			xAxis: { categories: [''] },
+			yAxis: { min: 0, max: {{ len .Data.Pages }}, title: { text: '' } },
+			legend: { enabled: false },
+			plotOptions: { series: {
+				stacking: 'normal',
+				cursor: 'pointer',
+				events: {
+					click: filterTable
+				}
+			} },
+			series: [
+					{{- $dataPages := .Data.Pages }}
+					{{- range .Site.Data.compatibility }}
+					{{- $dataPagesFiltered := where $dataPages ".Params.compatibility" .key }}
+					{ "name": "{{ .name }}", "data": [ {{ len $dataPagesFiltered }} ] },
+					{{- end }}
+				]
+		});
+	});
 </script>
 {{ end }}