diff --git a/scripts/games/app.js b/scripts/games/app.js
index 8196e59..e19d6fe 100644
--- a/scripts/games/app.js
+++ b/scripts/games/app.js
@@ -123,6 +123,13 @@ function processGame(game) {
       model.compatibility = recent.compatibility;
       model.testcase_date = recent.date;
     }
+
+    let section_id = `${model.title[0]}`.toLowerCase();
+    if (!section_id.match(/[a-z]+/)) {
+        section_id = "#";
+    }
+
+    model.section_id = section_id;
     // END SHORTCUTS BLOCK
 
     // SAVEFILE BLOCK
diff --git a/site/themes/citra-bs-theme/layouts/game/list.html b/site/themes/citra-bs-theme/layouts/game/list.html
index febb8ab..3252e1f 100644
--- a/site/themes/citra-bs-theme/layouts/game/list.html
+++ b/site/themes/citra-bs-theme/layouts/game/list.html
@@ -3,38 +3,57 @@
 	<p>The Citra Emulator compatibility list contains all the games we tested, sorted by how well they work on the emulator.</p>
 	<table class="table table-striped table-bordered">
 		<tbody>
-      {{ range .Site.Data.compatibility }}
+		{{ range .Site.Data.compatibility }}
         <tr>
-  				<td style="width: 120px;"><div class="square-icon" style="background-color: {{ .color }}"></div> {{ .name }}</td>
-  				<td class="row-compat-desc">{{ .description }}</td>
-  			</tr>
-      {{ end }}
+			<td style="width: 120px;"><div class="square-icon" style="background-color: {{ .color }}"></div> {{ .name }}</td>
+			<td class="row-compat-desc">{{ .description }}</td>
+		</tr>
+		{{ end }}
 		</tbody>
 	</table>
 
 	<div id="highchart-container" style="height: 100px; margin: 0 auto"></div>
 
-  <table class="table table-responsive">
-    <thead>
-      <tr>
-        <th></th>
-        <th>Title</th>
-        <th>Compatibility</th>
-        <th>Date Tested</th>
-      </tr>
-    </thead>
-    <tbody>
-			{{ range .Data.Pages }}
-				{{- $rating := index .Site.Data.compatibility .Params.compatibility }}
-	      <tr>
-	        <td style="width: 55px;"><img class="img-responsive game-icon-list" src="{{ .Site.BaseURL }}images/game/icons/{{ default (print .File.BaseFileName ".png") }}" /></td>
-	        <td><a href="{{ .Permalink }}">{{ .Params.title }}</a></td>
-					<td class="compatibility-row"><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</td>
-	        <td>{{ dateFormat "January 2, 2006" .Params.testcase_date }}</td>
-	      </tr>
+	<hr />
+
+	<div id="game-sections">
+		<div class="btn-group" role="group">
+			<a class="btn btn-secondary" href="##">#</a>
+			{{ range (seq 'a' 'z') }}
+			<a class="btn btn-secondary" href="#{{ printf "%c" . }}">{{ printf "%c" . }}</a>
 			{{ end }}
-    </tbody>
-  </table>
+		</div>
+	</div>
+
+	<table class="table table-responsive">
+		<thead>
+			<tr>
+				<th></th>
+				<th>Title</th>
+				<th>Compatibility</th>
+				<th>Date Tested</th>
+			</tr>
+		</thead>
+		<tbody>
+		{{ range .Data.Pages.GroupByParam "section_id" }}
+			<tr>
+				<td id="game-section-header">
+					<h3 id="{{ .Key }}">{{ .Key }}</h3>
+				</td>
+			</tr>
+
+			{{ range .Pages }}
+			  {{- $rating := index .Site.Data.compatibility .Params.compatibility }}
+			  <tr>
+				<td style="width: 55px;"><img class="img-responsive game-icon-list" src="{{ .Site.BaseURL }}images/game/icons/{{ default (print .File.BaseFileName ".png") }}" /></td>
+				<td><a href="{{ .Permalink }}">{{ .Params.title }}</a></td>
+						<td class="compatibility-row"><div class="square-icon" style="background-color: {{ $rating.color }}"></div> {{ $rating.name }}</td>
+				<td>{{ dateFormat "January 2, 2006" .Params.testcase_date }}</td>
+			  </tr>
+			{{ end }}
+		{{ end }}
+		</tbody>
+	</table>
 {{ end }}
 
 {{ define "scripts" }}
diff --git a/site/themes/citra-bs-theme/layouts/game/list.json b/site/themes/citra-bs-theme/layouts/game/list.json
index fc95370..e73dbc1 100644
--- a/site/themes/citra-bs-theme/layouts/game/list.json
+++ b/site/themes/citra-bs-theme/layouts/game/list.json
@@ -5,7 +5,8 @@
     {{- $gameIndex := $index }}
     {{- $lenRegions := sub (len .Params.releases) 1 }}
     {{- range $regionIndex, $element := .Params.releases }}
-        "{{ $element.title }}": { "region": "{{ .region }}", "gameID": "{{ $game.File.BaseFileName }}", "gameName": "{{ $game.Title | plainify }}" }{{- if and (eq $gameIndex $lenGames) (eq $regionIndex $lenRegions) }}{{ else }},{{ end }}
+        "{{ $element.title }}": { "region": "{{ .region }}", "gameID": "{{ $game.File.BaseFileName }}",
+          "gameName": "{{ $game.Title | plainify }}" }{{- if and (eq $gameIndex $lenGames) (eq $regionIndex $lenRegions) }}{{ else }},{{ end }}
     {{- end }}
   {{- end }}
 }
diff --git a/site/themes/citra-bs-theme/static/css/style.css b/site/themes/citra-bs-theme/static/css/style.css
index 8a151d0..2e25d3b 100644
--- a/site/themes/citra-bs-theme/static/css/style.css
+++ b/site/themes/citra-bs-theme/static/css/style.css
@@ -323,3 +323,16 @@ a:hover, a:focus {
 
 /* Games Module */
 .game-icon-list { }
+
+#game-sections {
+  display: table;
+  margin: 0 auto;
+}
+
+#game-sections .btn {
+  padding: 6px 10px;
+}
+
+#game-section-header {
+  border: 0;
+}