diff --git a/assets/listings.js b/assets/listings.js
index d2fdd4a..6be02c5 100644
--- a/assets/listings.js
+++ b/assets/listings.js
@@ -120,19 +120,30 @@
     function setUpDataCentreFilter() {
         let select = document.getElementById('data-centre-filter');
 
-        let data_centres = [];
+        let dataCentres = {};
         for (let elem of document.querySelectorAll('#listings > .listing')) {
             let centre = elem.dataset['centre'];
-            if (!data_centres.includes(centre)) {
-                data_centres.push(centre);
+            if (!dataCentres.hasOwnProperty(centre)) {
+                dataCentres[centre] = 0;
             }
+
+            dataCentres[centre] += 1;
         }
 
-        data_centres.sort();
-        for (let centre of data_centres) {
-            let opt = document.createElement('option');
-            opt.innerText = centre;
-            select.appendChild(opt);
+        for (let opt of select.options) {
+            let centre = opt.value;
+
+            let count = 0;
+
+            if (dataCentres.hasOwnProperty(centre)) {
+                count = dataCentres[centre];
+            }
+
+            if (centre === 'All') {
+                count = Object.values(dataCentres).reduce((a, b) => a + b);
+            }
+
+            opt.innerText += ` (${count})`;
         }
 
         select.addEventListener('change', () => {
diff --git a/templates/listings.html b/templates/listings.html
index 87856e3..dd9891a 100644
--- a/templates/listings.html
+++ b/templates/listings.html
@@ -5,9 +5,9 @@ Remote Party Finder
 {%- endblock %}
 
 {% block head %}
-    <link rel="stylesheet" href="/assets/listings.css"/>
-    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
-    <script defer src="/assets/listings.js"></script>
+<link rel="stylesheet" href="/assets/listings.css"/>
+<script defer src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
+<script defer src="/assets/listings.js"></script>
 {% endblock %}
 
 {% block body %}
@@ -15,7 +15,24 @@ Remote Party Finder
     <div class="requires-js">
         <input type="search" class="search" placeholder="Search"/>
         <select id="data-centre-filter">
-            <option>All</option>
+            <option value="All">All</option>
+            <optgroup label="North America">
+                <option value="Aether">Aether</option>
+                <option value="Crystal">Crystal</option>
+                <option value="Primal">Primal</option>
+            </optgroup>
+            <optgroup label="Europe">
+                <option value="Chaos">Chaos</option>
+                <option value="Light">Light</option>
+            </optgroup>
+            <optgroup label="Japan">
+                <option value="Elemental">Elemental</option>
+                <option value="Gaia">Gaia</option>
+                <option value="Mana">Mana</option>
+            </optgroup>
+            <optgroup label="Oceania">
+                <option disabled value="">Not yet lmao</option>
+            </optgroup>
         </select>
         <details class="filter-controls">
             <summary>Advanced</summary>
@@ -52,60 +69,60 @@ Remote Party Finder
         {%- for container in containers %}
         {%- let listing = container.listing.borrow() %}
         <div
-            class="listing"
-            data-id="{{ listing.id }}"
-            data-centre="{{ listing.data_centre_name().unwrap_or_default() }}"
-            data-type="{{ listing.duty_type.as_u8() }}"
-            data-category="{{ listing.category.as_u32() }}"
-            data-high-end="{{ listing.high_end() }}"
-            data-content-kind={{ listing.content_kind() }}>
+                class="listing"
+                data-id="{{ listing.id }}"
+                data-centre="{{ listing.data_centre_name().unwrap_or_default() }}"
+                data-type="{{ listing.duty_type.as_u8() }}"
+                data-category="{{ listing.category.as_u32() }}"
+                data-high-end="{{ listing.high_end() }}"
+                data-content-kind={{ listing.content_kind() }}>
             <div class="left">
                 {%- let duty_class %}
                 {%- if listing.is_cross_world() %}
-                    {%- let duty_class = " cross" %}
+                {%- let duty_class = " cross" %}
                 {%- else %}
-                    {%- let duty_class = " local" %}
+                {%- let duty_class = " local" %}
                 {%- endif %}
                 <div class="duty{{ duty_class }}">{{ listing.duty_name() }}</div>
                 <div class="description">
                     {%- let desc = listing.description.full_text() %}
                     {%- if desc.trim().is_empty() -%}
-                        <em>None</em>
+                    <em>None</em>
                     {%- else -%}
-                        {%- let (colour_class, prepend_flags) = listing.prepend_flags() -%}
-                        {%- if !prepend_flags.is_empty() -%}
-                        <span class="{{ colour_class }}">{{ prepend_flags }} </span>
-                        {%- endif -%}
-                        {{- desc.trim() }}
+                    {%- let (colour_class, prepend_flags) = listing.prepend_flags() -%}
+                    {%- if !prepend_flags.is_empty() -%}
+                    <span class="{{ colour_class }}">{{ prepend_flags }} </span>
+                    {%- endif -%}
+                    {{- desc.trim() }}
                     {%- endif -%}
                 </div>
                 <div class="party">
                     {%- for slot in listing.slots() %}
-                        {%- let filled %}
-                        {%- let title %}
-                        {%- let role_class %}
-                        {%- match slot %}
-                            {%- when Ok with (slot) %}
-                                {%- let filled = " filled" %}
-                                {%- match slot.role() %}
-                                    {%- when Some with (role) %}
-                                        {%- let role_class = " {}"|format(role.as_str().to_lowercase()) %}
-                                    {%- when None %}
-                                        {%- let role_class = "".to_string() %}
-                                {%- endmatch %}
-                                {%- let title = slot.code().to_string() %}
-                            {%- when Err with (tuple) %}
-                                {%- let filled = "" %}
-                                {%- let title = tuple.1.clone() %}
-                                {%- let role_class = " {}"|format(tuple.0) %}
-                        {%- endmatch %}
-                        <div class="slot{{ filled }}{{ role_class }}" title="{{ title }}">
-                            {%- if !filled.is_empty() %}
-                            <svg viewBox="0 0 32 32">
-                                <use href="/assets/icons.svg#{{ title }}"></use>
-                            </svg>
-                            {%- endif %}
-                        </div>
+                    {%- let filled %}
+                    {%- let title %}
+                    {%- let role_class %}
+                    {%- match slot %}
+                    {%- when Ok with (slot) %}
+                    {%- let filled = " filled" %}
+                    {%- match slot.role() %}
+                    {%- when Some with (role) %}
+                    {%- let role_class = " {}"|format(role.as_str().to_lowercase()) %}
+                    {%- when None %}
+                    {%- let role_class = "".to_string() %}
+                    {%- endmatch %}
+                    {%- let title = slot.code().to_string() %}
+                    {%- when Err with (tuple) %}
+                    {%- let filled = "" %}
+                    {%- let title = tuple.1.clone() %}
+                    {%- let role_class = " {}"|format(tuple.0) %}
+                    {%- endmatch %}
+                    <div class="slot{{ filled }}{{ role_class }}" title="{{ title }}">
+                        {%- if !filled.is_empty() %}
+                        <svg viewBox="0 0 32 32">
+                            <use href="/assets/icons.svg#{{ title }}"></use>
+                        </svg>
+                        {%- endif %}
+                    </div>
                     {%- endfor %}
                     <div class="total">{{ listing.slots_filled() }}/{{ listing.slots_available }}</div>
                 </div>
@@ -151,7 +168,7 @@ Remote Party Finder
                 </div>
             </div>
         </div>
-    {%- endfor %}
+        {%- endfor %}
     </div>
 </div>
 {% endblock %}