diff --git a/app/components/table-of-contents.hbs b/app/components/table-of-contents.hbs
index 5785aa49..b013ac04 100644
--- a/app/components/table-of-contents.hbs
+++ b/app/components/table-of-contents.hbs
@@ -1,7 +1,7 @@
 <ul class='table-of-contents '>
-  <li class='toc-item toc-group'>
-    <a {{on 'click' (fn this.toggle 'modules')}} href='#' data-test-toc-title='packages'>Packages</a>
-    <ul class='sub-table-of-contents modules selected'>
+  <li class='toc-item toc-group' data-test-toc-title="packages">
+    Packages
+    <ul class='sub-table-of-contents modules'>
       {{#each @moduleIDs as |moduleID|}}
 
         {{#if (not-eq moduleID '@ember/object/computed')}}
@@ -15,9 +15,9 @@
   </li>
 
   {{#if @isShowingNamespaces}}
-    <li class='table-of-contents'>
-      <a {{on 'click' (fn this.toggle 'namespaces')}} href='#' data-test-toc-title='namespaces'>Namespaces</a>
-      <ul class='sub-table-of-contents namespaces selected'>
+    <li class='table-of-contents' data-test-toc-title="namespaces">
+      Namespaces
+      <ul class='sub-table-of-contents namespaces'>
         {{#each @namespaceIDs as |namespaceID|}}
           <li class='toc-item toc-link' data-test-namespace={{namespaceID}}>
             <LinkTo @route='project-version.namespaces.namespace' @models={{array @version namespaceID}}>{{namespaceID}}</LinkTo>
@@ -27,9 +27,9 @@
     </li>
   {{/if}}
 
-  <li class='table-of-contents '>
-    <a {{on 'click' (fn this.toggle 'classes')}} href='#' data-test-toc-title='classes'>Classes</a>
-    <ul class='sub-table-of-contents classes selected'>
+  <li class='table-of-contents' data-test-toc-title="classes">
+    Classes
+    <ul class='sub-table-of-contents classes'>
       {{#each @classesIDs as |classID|}}
         <li class='toc-item toc-link' data-test-class={{classID}}>
           <LinkTo @route='project-version.classes.class' @models={{array @version classID}}>{{classID}}</LinkTo>
diff --git a/app/components/table-of-contents.js b/app/components/table-of-contents.js
deleted file mode 100644
index fbbf7ab7..00000000
--- a/app/components/table-of-contents.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-
-export default class TableOfContents extends Component {
-  @action
-  toggle(type) {
-    const tableElement = document.querySelector(
-      `ul.sub-table-of-contents.${type}`
-    );
-    tableElement.classList.toggle('selected');
-  }
-}
diff --git a/app/components/table-of-projects.hbs b/app/components/table-of-projects.hbs
index 5eaa5dc7..7a8139e1 100644
--- a/app/components/table-of-projects.hbs
+++ b/app/components/table-of-projects.hbs
@@ -1,8 +1,8 @@
-<ul class="table-of-contents ">
+<ul class="table-of-contents">
   <li class="toc-item" data-test-home>
     <LinkTo @route="project" @model="ember">Home</LinkTo>
   </li>
-  <li class="toc-heading">Projects</li>
+  <li>Projects</li>
   <ul class="sub-table-of-contents">
     <li class="toc-item"><LinkTo @route="project" @model="ember" @current-when={{eq @activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
     <li class="toc-item"><LinkTo @route="project" @model="ember-data" @current-when={{eq @activeProject "ember-data"}} class="spec-ember-data">EmberData</LinkTo></li>
diff --git a/app/styles/app.css b/app/styles/app.css
index 3c700eb2..2214580b 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -79,6 +79,7 @@ main a.edit-icon {
 .table-of-contents li {
   margin: 3px 0;
   list-style-type: none;
+  color: var(--color-gray-600);
 }
 
 li.toc-heading {
diff --git a/tests/integration/components/table-of-contents-test.js b/tests/integration/components/table-of-contents-test.js
index 7217b981..59089fed 100644
--- a/tests/integration/components/table-of-contents-test.js
+++ b/tests/integration/components/table-of-contents-test.js
@@ -1,16 +1,15 @@
-import { module, test, skip } from 'qunit';
+import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, findAll, click } from '@ember/test-helpers';
+import { render, findAll } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-const TIMEOUT_FOR_ANIMATION = 600;
 const CLASSES = ['Descriptor', 'Ember'];
 const MODULES = ['@ember/application', '@ember/array'];
 
 module('Integration | Component | table of contents', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function (assert) {
+  test('it renders classes', async function (assert) {
     // Set any properties with this.set('myProperty', 'value');
     this.set('emberVersion', '2.4.3');
     this.set('classesIDs', CLASSES);
@@ -29,7 +28,7 @@ module('Integration | Component | table of contents', function (hooks) {
     );
     const contentReference = '.sub-table-of-contents';
 
-    assert.dom(contentTitle).hasText('Classes');
+    assert.dom(contentTitle).includesText('Classes');
     assert
       .dom(`${contentReference} li`)
       .exists({ count: 2 }, 'We have two items to display');
@@ -37,7 +36,7 @@ module('Integration | Component | table of contents', function (hooks) {
     assert.dom(findAll(`${contentReference} li`)[1]).hasText(CLASSES[1]);
   });
 
-  test('Starts with underlying content visible', async function (assert) {
+  test('it renders packages', async function (assert) {
     // Set any properties with this.set('myProperty', 'value');
     this.set('emberVersion', '2.4.3');
     this.set('moduleIDs', MODULES);
@@ -54,11 +53,10 @@ module('Integration | Component | table of contents', function (hooks) {
     const contentReference = '.sub-table-of-contents';
     const content = document.querySelector(contentReference);
     const contentTitle = document.querySelector(
-      '[data-test-toc-title="classes"]'
+      '[data-test-toc-title="packages"]'
     );
 
-    assert.dom(contentTitle).hasText('Classes');
-    assert.dom(content).hasClass('selected');
+    assert.dom(contentTitle).includesText('Packages');
     assert
       .dom(`${contentReference} li`)
       .exists({ count: 2 }, 'We have two items to display');
@@ -66,84 +64,4 @@ module('Integration | Component | table of contents', function (hooks) {
     assert.dom(findAll(`${contentReference} li`)[0]).hasText(MODULES[0]);
     assert.dom(findAll(`${contentReference} li`)[1]).hasText(MODULES[1]);
   });
-
-  skip('Underlying content hides once clicked', async function (assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    this.set('emberVersion', '2.4.3');
-    this.set('moduleIDs', MODULES);
-
-    await render(hbs`
-      <TableOfContents
-        @showPrivateClasses={{true}}
-        @version={{this.emberVersion}}
-        @moduleIDs={{this.moduleIDs}}
-        @isShowingNamespaces={{true}}
-      />
-    `);
-
-    const contentTitle = document.querySelector(
-      '[data-test-toc-title="packages"]'
-    );
-    const contentReference = '.sub-table-of-content';
-    const content = document.querySelector(contentReference);
-
-    assert.dom(contentTitle).hasText('Packages');
-    assert.dom(content).hasClass('selected');
-    assert.dom(content).isVisible();
-
-    await click(contentTitle);
-
-    const done = assert.async();
-    setTimeout(() => {
-      assert.dom(content).isNotVisible();
-      assert.dom(content).doesNotHaveClass('selected');
-      done();
-    }, TIMEOUT_FOR_ANIMATION);
-  });
-
-  skip('Underlying content should be visible after 2 clicks', async function (assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    this.set('emberVersion', '2.4.3');
-    this.set('moduleIDs', MODULES);
-
-    await render(hbs`
-      <TableOfContents
-        @showPrivateClasses={{true}}
-        @version={{this.emberVersion}}
-        @moduleIDs={{this.moduleIDs}}
-        @isShowingNamespaces={{true}}
-      />
-    `);
-
-    const titleButton = document.querySelector(
-      '[data-test-toc-title="packages"]'
-    );
-    const contentReference = '.sub-table-of-contents';
-    const content = document.querySelector(contentReference);
-
-    assert.dom(titleButton).hasText('Packages');
-    assert.dom(content).hasClass('selected');
-    assert.dom(content).isVisible();
-
-    await click(titleButton);
-
-    const done1 = assert.async();
-
-    setTimeout(async () => {
-      assert.dom(content).isNotVisible();
-      assert.dom(content).doesNotHaveClass('selected');
-
-      await click(titleButton);
-
-      const done2 = assert.async();
-
-      setTimeout(() => {
-        assert.dom(content).isVisible();
-        assert.dom(content).hasClass('selected');
-        done2();
-      }, TIMEOUT_FOR_ANIMATION);
-
-      done1();
-    }, TIMEOUT_FOR_ANIMATION);
-  });
 });