diff --git a/wagtail/locales/templates/wagtaillocales/_language_title_cell.html b/wagtail/locales/templates/wagtaillocales/_language_title_cell.html
new file mode 100644
index 0000000000..704fffabae
--- /dev/null
+++ b/wagtail/locales/templates/wagtaillocales/_language_title_cell.html
@@ -0,0 +1,11 @@
+{% load i18n wagtailadmin_tags %}
+
+<td class="{% if column.classname %}{{ column.classname }} {% endif %}title">
+    <div class="title-wrapper">
+        <a href="{{ link_url }}">{{ value }}</a>
+        {% if not value.language_code_is_valid %}
+            {% trans "This locale's language code is not supported" as error %}
+            {% icon name="warning" class_name="locale-error" title=error %}
+        {% endif %}
+    </div>
+</td>
diff --git a/wagtail/locales/templates/wagtaillocales/index.html b/wagtail/locales/templates/wagtaillocales/index.html
deleted file mode 100644
index bc63fe533c..0000000000
--- a/wagtail/locales/templates/wagtaillocales/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-{% extends "wagtailadmin/generic/index.html" %}
-{% load wagtailadmin_tags i18n %}
-
-{% block listing %}
-    <div class="nice-padding">
-        <div id="locales-list">
-            <table class="listing">
-                <thead>
-                    <tr>
-                        <th class="hostname">
-                            {% if ordering == "name" %}
-                                <a href="{% url 'wagtaillocales:index' %}" class="icon icon-arrow-down-after teal">
-                                    {% trans "Language" %}
-                                </a>
-                            {% else %}
-                                <a href="{% url 'wagtaillocales:index' %}?ordering=name" class="icon icon-arrow-down-after">
-                                    {% trans "Language" %}
-                                </a>
-                            {% endif %}
-                        </th>
-                        <th>{% trans "Usage" %}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for locale in locales %}
-                        <tr>
-                            <td class="hostname title">
-                                <div class="title-wrapper">
-                                    <a href="{% url 'wagtaillocales:edit' locale.id %}">{{ locale }}</a>
-                                    {% if not locale.language_code_is_valid %}
-                                        {% trans "This locale's language code is not supported" as error %}
-                                        {% icon name="warning" class_name="locale-error" title=error %}
-                                    {% endif %}
-                                </div>
-                            </td>
-                            <td>
-                                {# TODO Make this translatable #}
-                                {{ locale.num_pages }} pages{% if locale.num_others %} + {{ locale.num_others }} others{% endif %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-
-        </div>
-    </div>
-{% endblock %}
diff --git a/wagtail/locales/tests.py b/wagtail/locales/tests.py
index f903ca7272..8fa848752d 100644
--- a/wagtail/locales/tests.py
+++ b/wagtail/locales/tests.py
@@ -17,7 +17,7 @@ class TestLocaleIndexView(TestCase, WagtailTestUtils):
     def test_simple(self):
         response = self.get()
         self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, 'wagtaillocales/index.html')
+        self.assertTemplateUsed(response, 'wagtailadmin/generic/index.html')
 
 
 class TestLocaleCreateView(TestCase, WagtailTestUtils):
diff --git a/wagtail/locales/views.py b/wagtail/locales/views.py
index 11eaa7bdbe..0a95a34410 100644
--- a/wagtail/locales/views.py
+++ b/wagtail/locales/views.py
@@ -1,6 +1,7 @@
 from django.utils.translation import gettext_lazy
 
 from wagtail.admin import messages
+from wagtail.admin.ui.tables import Column, TitleColumn
 from wagtail.admin.views import generic
 from wagtail.admin.viewsets.model import ModelViewSet
 from wagtail.core.models import Locale
@@ -10,20 +11,35 @@ from .forms import LocaleForm
 from .utils import get_locale_usage
 
 
+class LanguageTitleColumn(TitleColumn):
+    cell_template_name = "wagtaillocales/_language_title_cell.html"
+
+    def get_value(self, locale):
+        return locale
+
+
+class UsageColumn(Column):
+    def get_value(self, locale):
+        num_pages, num_others = get_locale_usage(locale)
+        # TODO: make this translatable
+        val = "%d pages" % num_pages
+        if num_others:
+            val += (" + %d others" % num_others)
+        return val
+
+
 class IndexView(generic.IndexView):
-    template_name = 'wagtaillocales/index.html'
     page_title = gettext_lazy("Locales")
     add_item_label = gettext_lazy("Add a locale")
     context_object_name = 'locales'
     queryset = Locale.all_objects.all()
 
-    def get_context_data(self):
-        context = super().get_context_data()
-
-        for locale in context['locales']:
-            locale.num_pages, locale.num_others = get_locale_usage(locale)
-
-        return context
+    columns = [
+        LanguageTitleColumn(
+            'language', label=gettext_lazy("Language"), sort_key='language', url_name='wagtaillocales:edit'
+        ),
+        UsageColumn('usage', label=gettext_lazy("Usage")),
+    ]
 
 
 class CreateView(generic.CreateView):