diff --git a/packages/react/components/Collection/index.mjs b/packages/react/components/Collection/index.mjs
index 3a8ebd7c681..00a87c3ca3f 100644
--- a/packages/react/components/Collection/index.mjs
+++ b/packages/react/components/Collection/index.mjs
@@ -505,7 +505,7 @@ export const DesignInfo = ({ Link = false, design = false, noDocsLink = false })
                 className="tw:daisy-badge tw:daisy-badge-primary tw:font-medium tw:hover:shadow tw:hover:cursor-pointer"
                 href={`/designs/#filter={"example"%3Atrue%2C"tag"%3A["${tag}"]}`}
               >
-                {tag}
+                <span className="tw:text-primary-content">{tag}</span>
               </Link>
             ))}
           </div>
@@ -517,7 +517,7 @@ export const DesignInfo = ({ Link = false, design = false, noDocsLink = false })
                 className="tw:daisy-badge tw:daisy-badge-accent tw:font-medium tw:hover:shadow tw:hover:cursor-pointer"
                 href={`/designs/#filter={"example"%3Atrue%2C"tag"%3A["${tech}"]}`}
               >
-                {tech}
+                <span className="tw:text-accent-content">{tech}</span>
               </Link>
             ))}
           </div>
diff --git a/packages/react/components/Control/index.mjs b/packages/react/components/Control/index.mjs
index 249e959e616..6f70a2e135b 100644
--- a/packages/react/components/Control/index.mjs
+++ b/packages/react/components/Control/index.mjs
@@ -2,9 +2,17 @@ import React from 'react'
 import { controlDesc } from '@freesewing/config'
 import { BulletIcon } from '@freesewing/react/components/Icon'
 
-export const ControlScore = ({ control, color = 'base-content' }) =>
+/**
+ * A component to render a visualisation of the user's control/UX setting
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {number} props.control - The user's control setting (a number)
+ * @returns {JSX.Element}
+ */
+export const ControlScore = ({ control }) =>
   control ? (
-    <div className={`tw:flex tw:flex-row tw:items-center tw:text-${color}`}>
+    <div className={`tw:flex tw:flex-row tw:items-center tw:text-base-content`}>
       {Object.keys(controlDesc).map((score) => (
         <BulletIcon
           fill={control >= score ? true : false}
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index 5db697bc908..bbaf258a8ba 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -6,3 +6,4 @@ jsdoc -c jsdoc.json components/Admin/* > ../../sites/dev/prebuild/jsdoc/react/co
 jsdoc -c jsdoc.json components/Breadcrumbs/* > ../../sites/dev/prebuild/jsdoc/react/components/breadcrumbs.json
 jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/components/button.json
 jsdoc -c jsdoc.json components/Collection/* > ../../sites/dev/prebuild/jsdoc/react/components/collection.json
+jsdoc -c jsdoc.json components/Control/* > ../../sites/dev/prebuild/jsdoc/react/components/control.json
diff --git a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx
index 7c7050adf7d..1946dd1b470 100644
--- a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx
@@ -15,10 +15,10 @@ The **Collection** component family provides the following components:
 - [DesignInfo](#designinfo)
 
 ## Collection
-
 <ComponentDocs docs={jsdocCollection} example={CollectionExample} />
 
 ## DesignInfo
+<ComponentDocs docs={jsdocDesignInfo} example={DesignInfoExample} />
 
 </DocusaurusDoc>
 
diff --git a/sites/dev/docs/reference/packages/react/components/control/_examples.js b/sites/dev/docs/reference/packages/react/components/control/_examples.js
new file mode 100644
index 00000000000..9caabe6ff17
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/control/_examples.js
@@ -0,0 +1,4 @@
+import React from 'react'
+import { ControlScore } from '@freesewing/react/components/Control'
+
+export const ControlScoreExample = () => <ControlScore control={3} />
diff --git a/sites/dev/docs/reference/packages/react/components/control/readme.mdx b/sites/dev/docs/reference/packages/react/components/control/readme.mdx
index 204a8b554d0..e33250a537b 100644
--- a/sites/dev/docs/reference/packages/react/components/control/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/control/readme.mdx
@@ -2,6 +2,20 @@
 title: Control
 ---
 
-:::note
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import { jsdocControlScore } from '@site/prebuild/jsdoc/components.control.mjs'
+import { ControlScoreExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Control** component family provides the following components:
+
+- [ControlScore](#controlscore)
+
+## ControlScore
+
+<ComponentDocs docs={jsdocControlScore} example={ControlScoreExample} />
+
+</DocusaurusDoc>
+