diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index adfd2e433b6..9c7eb70a415 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -544,17 +544,6 @@ pre {
   border-radius: 0;
 }
 
-.list-group-item {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-}
-
-.intro-toc .list-group-item:hover {
-  background-color: var(--tertiary-background) !important;
-  border-radius: 0;
-}
-
 .panel-primary > .panel-heading {
   background-color: transparent;
   border-color: var(--primary-color);
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index 8f053c1c3b8..d62adedfee4 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -341,12 +341,19 @@ a.map-grid-item.challenge-completed {
   margin-top: 1.45rem;
 }
 
-.intro-toc .list-group-item {
-  margin: 5px auto;
+.intro-toc {
+  margin-bottom: 20px;
+  padding-left: 0;
+  list-style-type: none;
 }
 
-.intro-toc .list-group-item:hover {
-  background-color: var(--secondary-background);
+.intro-toc li {
+  margin: 5px auto;
+  padding: 10px 15px;
+}
+
+.intro-toc li:hover {
+  background-color: var(--tertiary-background);
 }
 
 .intro-toc a:hover {
diff --git a/client/src/templates/Introduction/intro.tsx b/client/src/templates/Introduction/intro.tsx
index 20dfa052fed..6beabe58d74 100644
--- a/client/src/templates/Introduction/intro.tsx
+++ b/client/src/templates/Introduction/intro.tsx
@@ -1,4 +1,3 @@
-import { ListGroup, ListGroupItem } from '@freecodecamp/react-bootstrap';
 import { Link, graphql } from 'gatsby';
 import React from 'react';
 import Helmet from 'react-helmet';
@@ -14,15 +13,15 @@ import './intro.css';
 
 function Challenges({ challengeNodes }: { challengeNodes: AllChallengeNode }) {
   return (
-    <ListGroup className='intro-toc'>
+    <ul className='intro-toc'>
       {challengeNodes.edges
         .map(({ node: { challenge } }) => challenge)
         .map(({ title, fields: { slug } }) => (
-          <ListGroupItem key={'intro-' + slug}>
+          <li key={'intro-' + slug}>
             <Link to={slug}>{title}</Link>
-          </ListGroupItem>
+          </li>
         ))}
-    </ListGroup>
+    </ul>
   );
 }