diff --git a/index.html b/index.html
index 8c7371e..0e3b770 100644
--- a/index.html
+++ b/index.html
@@ -69,6 +69,14 @@
                     simplified_cities: cities.map(city => simplify(city.name)),
                     city_guess: "",
                     message: "",
+                    achievements: {
+                        "Top Five": cities => cities.slice(0, 5),
+                        "Top Ten": cities => cities.slice(0, 10),
+                        "Top Twenty": cities => cities.slice(0, 20),
+                        "Top Fifty": cities => cities.slice(0, 50),
+                        "Top Hundred": cities => cities.slice(0, 100),
+                        "Every Single One": cities => cities,
+                    },
                     guess() {
                         const rank = this.simplified_cities.indexOf(simplify(this.city_guess))
                         if (rank >= 0) {
@@ -98,7 +106,16 @@
             <div v-if="message != ''" class="alert alert-secondary" role="alert">
                 {{ message }}
             </div>
-            <h3>{{ state }} cities ({{ cities.filter(c => c.guessed).length }}/{{ cities.length }})</h3>
+
+            <h3>{{ state }} cities</h3>
+            <div>
+                <span
+                    v-for="(required_cities, name) in achievements"
+                    :class="{ 'badge': true, 'me-1': true, 'text-bg-secondary': !required_cities(cities).every(c => c.guessed), 'text-bg-warning': required_cities(cities).every(c => c.guessed) }">
+                    {{ name }}
+                    ({{ required_cities(cities).filter(c => c.guessed).length }}/{{ required_cities(cities).length }})
+                </span>
+            </div>
             <table class="table">
                 <thead>
                     <tr>