diff --git a/guidemaker-ember-template/src/components/search-result.hbs b/guidemaker-ember-template/src/components/search-result.hbs
index 7363c71..f65184b 100644
--- a/guidemaker-ember-template/src/components/search-result.hbs
+++ b/guidemaker-ember-template/src/components/search-result.hbs
@@ -1,31 +1,29 @@
-<div
-  class="algolia-docsearch-suggestion algolia-docsearch-suggestion__secondary"
-  data-test-search-result-item
->
-  <div class="algolia-docsearch-suggestion--wrapper">
-    <div class="algolia-docsearch-suggestion--subcategory-column">
-      <span class="algolia-docsearch-suggestion--subcategory-column-text">
-        {{this.sectionTitle}}
-      </span>
-    </div>
-    <div class="algolia-docsearch-suggestion--content">
-
-      <a
-        href="{{href-to
-          'version.show'
-          this.result.path
-        }}#{{this.result.anchor}}"
-        data-href-to-ignore
-      >
-        <div class="algolia-docsearch-suggestion--title">
-          {{#each this.remainingHeadings as |heading index|}}
-            {{#if index}}
-              >
-            {{/if}}
-            {{html-safe heading.value}}
-          {{/each}}
-        </div>
-      </a>
+<div class="ds-suggestion" ...attributes>
+  <div
+    class="algolia-docsearch-suggestion algolia-docsearch-suggestion__secondary"
+    data-test-search-result-item
+  >
+    <div class="algolia-docsearch-suggestion--wrapper">
+      <div class="algolia-docsearch-suggestion--subcategory-column">
+        <span class="algolia-docsearch-suggestion--subcategory-column-text">
+          {{this.sectionTitle}}
+        </span>
+      </div>
+      <div class="algolia-docsearch-suggestion--content">
+        <a
+          href="{{href-to 'version.show' @result.path}}#{{@result.anchor}}"
+          data-href-to-ignore
+        >
+          <div class="algolia-docsearch-suggestion--title">
+            {{#each this.remainingHeadings as |heading index|}}
+              {{#if index}}
+                >
+              {{/if}}
+              {{html-safe heading.value}}
+            {{/each}}
+          </div>
+        </a>
+      </div>
     </div>
   </div>
 </div>
diff --git a/guidemaker-ember-template/src/components/search-result.js b/guidemaker-ember-template/src/components/search-result.js
index d7dd81b..75348fa 100644
--- a/guidemaker-ember-template/src/components/search-result.js
+++ b/guidemaker-ember-template/src/components/search-result.js
@@ -1,24 +1,17 @@
-/* eslint-disable ember/no-classic-components, ember/no-classic-classes, ember/require-tagless-components, ember/require-computed-property-dependencies, prettier/prettier, ember/require-computed-macros */
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 
-export default Component.extend({
-  classNames: ['ds-suggestion'],
+export default class SearchResultComponent extends Component {
+  @service page;
 
-  page: service(),
-  sectionTitle: computed('result.path', function() {
-    let sectionId = this.result.path.split('/')[0];
+  get sectionTitle() {
+    let sectionId = this.args.result.path.split('/')[0];
 
     let section = this.page.pages.find((page) => page.id === sectionId);
     return section.title;
-  }),
+  }
 
-  pageHeading: computed('result._highlightResult.headings.[]', function() {
-    return this.result._highlightResult.headings[0];
-  }),
-
-  remainingHeadings: computed('result._highlightResult.headings.[]', function() {
-    return this.result._highlightResult.headings;
-  })
-});
+  get remainingHeadings() {
+    return this.args.result._highlightResult.headings;
+  }
+}
diff --git a/test-app/tests/integration/components/search-result-test.js b/test-app/tests/integration/components/search-result-test.js
new file mode 100644
index 0000000..b396341
--- /dev/null
+++ b/test-app/tests/integration/components/search-result-test.js
@@ -0,0 +1,47 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import Service from '@ember/service';
+
+class PageStub extends Service {
+  pages = [
+    {
+      id: 'examples',
+      title: 'Examples',
+    },
+  ];
+}
+
+module('Integration | Component | search-result', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the search result', async function (assert) {
+    this.owner.register('service:page', PageStub);
+
+    this.result = {
+      path: 'examples/index',
+      anchor: 'toc_images',
+      _highlightResult: {
+        headings: [
+          {
+            value: 'Basic Markdown',
+          },
+          {
+            value: 'Images',
+          },
+        ],
+      },
+    };
+
+    await render(hbs`<SearchResult @result={{this.result}} />`);
+
+    assert
+      .dom('.algolia-docsearch-suggestion--subcategory-column-text')
+      .hasText('Examples');
+
+    assert
+      .dom('.algolia-docsearch-suggestion--title')
+      .hasText('Basic Markdown > Images');
+  });
+});