diff --git a/docs/src/resources/glossary.js b/docs/src/components/KeyValue.tsx
similarity index 52%
rename from docs/src/resources/glossary.js
rename to docs/src/components/KeyValue.tsx
index 5265f4d32ba..a6fafd0bff7 100644
--- a/docs/src/resources/glossary.js
+++ b/docs/src/components/KeyValue.tsx
@@ -16,7 +16,37 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import styled from '@emotion/styled';
+import { mq } from '../utils';
+interface StyledKeyValueProps {}
 
-export const GlossaryTerms = [
+const StyledKeyValue = styled('div')<StyledKeyValueProps>`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 16px;
+  background-color: ${props => (props ? '#f0f0f0' : '#d9e2e7')};
+  }
+`;
 
-];
+interface KeyValueProps {
+    keyName ?: string;
+    value ?: string;
+    dark ?: boolean;
+}
+
+const KeyValue = ({
+  keyName,
+  value,
+}: KeyValueProps) => {
+    return (
+        <StyledKeyValue dark={false}>
+            <div className="key">{keyName}</div>
+            <div className="value">{value}</div>
+        </StyledKeyValue>
+    );
+};
+
+export default KeyValue;
diff --git a/docs/static/resources/glossary.json b/docs/static/resources/glossary.json
new file mode 100644
index 00000000000..5320a8497d9
--- /dev/null
+++ b/docs/static/resources/glossary.json
@@ -0,0 +1,4 @@
+{
+    "example_key": "This is an example tooltip describing the meaning and usage of 'example_key'.",
+    "example_key2": "This is an example tooltip describing the meaning and usage of 'example_key'."
+}
\ No newline at end of file
diff --git a/docs/versioned_docs/version-6.0.0/glossary.mdx b/docs/versioned_docs/version-6.0.0/glossary.mdx
index 356105ad521..8c8d064b825 100644
--- a/docs/versioned_docs/version-6.0.0/glossary.mdx
+++ b/docs/versioned_docs/version-6.0.0/glossary.mdx
@@ -4,13 +4,17 @@ hide_title: true
 sidebar_position: 10
 ---
 
-import SwaggerUI from 'swagger-ui-react';
-import openapi from '/resources/openapi.json';
-import 'swagger-ui-react/swagger-ui.css';
-import { Alert } from 'antd';
+import glossary from '/resources/glossary.json';
+import KeyValue from '../../src/components/KeyValue.tsx';
 
 ## Glossary
 
 <br />
 <br />
 <hr />
+
+<div>
+    {Object.entries(glossary).map(([key, value]) => (
+    <KeyValue key={key} keyName={key} value={value} />
+    ))}
+</div>
\ No newline at end of file