diff --git a/__tests__/Glossary.test.tsx b/__tests__/Glossary.test.tsx
index a2cb249de..691f2a73e 100644
--- a/__tests__/Glossary.test.tsx
+++ b/__tests__/Glossary.test.tsx
@@ -8,7 +8,7 @@ test('should output a glossary item if the term exists', () => {
   const definition = 'This is a definition';
   const { container } = render(<Glossary terms={[{ term, definition }]}>acme</Glossary>);
 
-  const trigger = container.querySelector('.Glossary-trigger');
+  const trigger = container.querySelector('.GlossaryItem-trigger');
   expect(trigger).toHaveTextContent(term);
   if (trigger) {
     fireEvent.mouseEnter(trigger);
@@ -22,7 +22,7 @@ test('should be case insensitive', () => {
   const definition = 'This is a definition';
   const { container } = render(<Glossary terms={[{ term, definition }]}>acme</Glossary>);
 
-  const trigger = container.querySelector('.Glossary-trigger');
+  const trigger = container.querySelector('.GlossaryItem-trigger');
   expect(trigger).toHaveTextContent('acme');
   if (trigger) {
     fireEvent.mouseEnter(trigger);
@@ -35,6 +35,6 @@ test('should output the term if the definition does not exist', () => {
   const term = 'something';
   const { container } = render(<Glossary terms={[]}>{term}</Glossary>);
 
-  expect(container.querySelector('.Glossary-trigger')).not.toBeInTheDocument();
+  expect(container.querySelector('.GlossaryItem-trigger')).not.toBeInTheDocument();
   expect(container.querySelector('span')).toHaveTextContent(term);
 });
diff --git a/components/Glossary/index.tsx b/components/Glossary/index.tsx
index 1f6adda89..8c4c97e53 100644
--- a/components/Glossary/index.tsx
+++ b/components/Glossary/index.tsx
@@ -17,14 +17,14 @@ const Glossary = ({ children, term: termProp, terms }: Props) => {
   return (
     <Tooltip
       content={
-        <div className="Glossary-tooltip-content">
-          <strong className="Glossary-term">{foundTerm.term}</strong> - {foundTerm.definition}
+        <div className="GlossaryItem-tooltip-content">
+          <strong className="GlossaryItem-term">{foundTerm.term}</strong> - {foundTerm.definition}
         </div>
       }
       offset={[-5, 5]}
       placement="bottom-start"
     >
-      <span className="Glossary-trigger">{term}</span>
+      <span className="GlossaryItem-trigger">{term}</span>
     </Tooltip>
   );
 };
diff --git a/components/Glossary/style.scss b/components/Glossary/style.scss
index f6d7a8762..da048d1e5 100644
--- a/components/Glossary/style.scss
+++ b/components/Glossary/style.scss
@@ -1,4 +1,4 @@
-.Glossary {
+.GlossaryItem {
   &-trigger {
     border-bottom: 1px solid #737c83;
     border-style: dotted;
diff --git a/package-lock.json b/package-lock.json
index a39c28499..80a3f00c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,6 +83,7 @@
         "prettier": "^3.2.5",
         "puppeteer": "^19.8.3",
         "react-router-dom": "^6.22.3",
+        "sass": "^1.77.2",
         "sass-loader": "^13.2.2",
         "semantic-release": "^22.0.12",
         "stream-browserify": "^3.0.0",
@@ -14691,6 +14692,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -26285,6 +26292,23 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "devOptional": true
     },
+    "node_modules/sass": {
+      "version": "1.77.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
+      "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-graph": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.1.tgz",
diff --git a/package.json b/package.json
index 46a73a341..079ad512f 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
     "prettier": "^3.2.5",
     "puppeteer": "^19.8.3",
     "react-router-dom": "^6.22.3",
+    "sass": "^1.77.2",
     "sass-loader": "^13.2.2",
     "semantic-release": "^22.0.12",
     "stream-browserify": "^3.0.0",