diff --git a/app/serializers/data_explorer/small_badge_serializer.rb b/app/serializers/data_explorer/small_badge_serializer.rb
index 416e1b3..aafabfc 100644
--- a/app/serializers/data_explorer/small_badge_serializer.rb
+++ b/app/serializers/data_explorer/small_badge_serializer.rb
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 class DataExplorer::SmallBadgeSerializer < ApplicationSerializer
-  attributes :id, :name, :badge_type, :description, :icon
+  attributes :id, :name, :display_name, :badge_type, :description, :icon
 end
diff --git a/assets/javascripts/discourse/templates/explorer/badge.raw.hbs b/assets/javascripts/discourse/templates/explorer/badge.raw.hbs
index 63cc9d7..cc2da35 100644
--- a/assets/javascripts/discourse/templates/explorer/badge.raw.hbs
+++ b/assets/javascripts/discourse/templates/explorer/badge.raw.hbs
@@ -1,6 +1,6 @@
 {{! source: badge-button component }}
 <a href="{{baseuri}}/badges/{{badge.id}}/{{badge.name}}"
    class="user-badge {{badge.badgeTypeClassName}}"
-   title="{{badge.displayDescription}}"
+   title="{{badge.display_name}}"
    data-badge-name="{{badge.name}}">{{icon-or-image badge.icon}}
-<span class="badge-display-name">{{badge.displayName}}</span></a>
+<span class="badge-display-name">{{badge.display_name}}</span></a>
diff --git a/test/javascripts/integration/components/query-result-test.js.es6 b/test/javascripts/integration/components/query-result-test.js.es6
new file mode 100644
index 0000000..3a1db7f
--- /dev/null
+++ b/test/javascripts/integration/components/query-result-test.js.es6
@@ -0,0 +1,48 @@
+import componentTest, {
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+import {
+  discourseModule,
+  queryAll,
+} from "discourse/tests/helpers/qunit-helpers";
+import hbs from "htmlbars-inline-precompile";
+
+discourseModule(
+  "Data Explorer Plugin | Integration | Component | query-result",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    componentTest("it renders badge names in query results", {
+      template: hbs`{{query-result content=content}}`,
+
+      beforeEach() {
+        const results = {
+          colrender: { 0: "badge" },
+          relations: {
+            badge: [
+              {
+                description: "description",
+                icon: "fa-user",
+                id: 1,
+                name: "badge name",
+                display_name: "badge display name",
+              },
+            ],
+          },
+          result_count: 1,
+          columns: ["badge_id"],
+          rows: [[1]],
+        };
+        this.set("content", results);
+      },
+
+      test(assert) {
+        assert.ok(
+          queryAll(
+            "table tbody tr:nth-child(1) td:nth-child(1) span"
+          ).text() === "badge display name"
+        );
+      },
+    });
+  }
+);