diff --git a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
index b7eb05d9a..5a9eca722 100644
--- a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
+++ b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
@@ -39,7 +39,7 @@ Array [
                 className="dr-ui--product-menu"
               >
                 <a
-                  className="txt-fancy txt-l block color-blue-on-hover"
+                  className="txt-fancy txt-l block color-blue-on-hover color-text"
                   href="/dr-ui/"
                 >
                   dr-ui
@@ -685,7 +685,7 @@ Array [
                 className="dr-ui--product-menu"
               >
                 <a
-                  className="txt-fancy txt-l block color-blue-on-hover"
+                  className="txt-fancy txt-l block color-blue-on-hover color-text"
                   href="/dr-ui/"
                 >
                   dr-ui
@@ -1296,7 +1296,7 @@ Array [
                 className="dr-ui--product-menu"
               >
                 <a
-                  className="txt-fancy txt-l block color-blue-on-hover"
+                  className="txt-fancy txt-l block color-blue-on-hover color-text"
                   href="/dr-ui/"
                 >
                   dr-ui
@@ -1913,7 +1913,7 @@ Array [
                   </div>
                 </div>
                 <a
-                  className="txt-fancy txt-l block color-blue-on-hover"
+                  className="txt-fancy txt-l block color-blue-on-hover color-text"
                   href="/dr-ui/"
                 >
                   Mapbox Tiling Service
diff --git a/src/components/product-menu/__tests__/__snapshots__/product-menu.test.js.snap b/src/components/product-menu/__tests__/__snapshots__/product-menu.test.js.snap
index c1370ccd0..718965731 100644
--- a/src/components/product-menu/__tests__/__snapshots__/product-menu.test.js.snap
+++ b/src/components/product-menu/__tests__/__snapshots__/product-menu.test.js.snap
@@ -5,7 +5,7 @@ exports[`product-menu Basic renders as expected 1`] = `
   className="dr-ui--product-menu"
 >
   <a
-    className="txt-fancy txt-l block color-blue-on-hover"
+    className="txt-fancy txt-l block color-blue-on-hover color-text"
     href="/dr-ui/"
   >
     Mapbox product menu
@@ -47,7 +47,7 @@ exports[`product-menu Beta product renders as expected 1`] = `
     </div>
   </div>
   <a
-    className="txt-fancy txt-l block color-blue-on-hover"
+    className="txt-fancy txt-l block color-blue-on-hover color-text"
     href="/vision/"
   >
     Vision SDK for Android
@@ -89,7 +89,7 @@ exports[`product-menu Beta product renders as expected 2`] = `
     </div>
   </div>
   <a
-    className="txt-fancy txt-l block color-blue-on-hover"
+    className="txt-fancy txt-l block color-blue-on-hover color-text"
     href="/vision/"
   >
     Navigation SDK for Android
@@ -119,7 +119,7 @@ exports[`product-menu Fake items, but one matches this test case's location rend
   className="dr-ui--product-menu"
 >
   <a
-    className="txt-fancy txt-l block color-blue-on-hover"
+    className="txt-fancy txt-l block color-blue-on-hover color-text"
     href="/api-documentation/"
   >
     Items in here
@@ -132,7 +132,7 @@ exports[`product-menu Product menu with something arbitrary in it renders as exp
   className="dr-ui--product-menu"
 >
   <a
-    className="txt-fancy txt-l block color-blue-on-hover"
+    className="txt-fancy txt-l block color-blue-on-hover color-text"
     href="/api-documentation/"
   >
     Pizza pie
diff --git a/src/components/product-menu/product-menu.js b/src/components/product-menu/product-menu.js
index 22128a51e..64df71e6d 100644
--- a/src/components/product-menu/product-menu.js
+++ b/src/components/product-menu/product-menu.js
@@ -4,46 +4,24 @@ import Tag from '../tag/tag';
 import classnames from 'classnames';
 
 class ProductMenu extends React.PureComponent {
-  buildTag = (item) => {
-    const tagProps = {
-      theme: item.tag,
-      customLabel: item.customTagProps
-        ? item.customTagProps.customLabel
-        : undefined,
-      customTooltipText: item.customTagProps
-        ? item.customTagProps.customTooltipText
-        : undefined,
-
-      customBackground: item.customTagProps
-        ? item.customTagProps.customBackground
-        : undefined,
-      customColor: item.customTagProps
-        ? item.customTagProps.customColor
-        : undefined,
-      customBorder: item.customTagProps
-        ? item.customTagProps.customBorder
-        : undefined
-    };
-    return (
-      <div className="ml-neg3">
-        <Tag {...tagProps} small={true} />
-      </div>
-    );
-  };
-
   render() {
-    const { props } = this;
+    const { tag, customTagProps, lightText, productName, homePage } =
+      this.props;
     return (
       <div className="dr-ui--product-menu">
-        {props.tag && this.buildTag(props)}
+        {tag && (
+          <div className="ml-neg3">
+            <Tag theme={tag} {...customTagProps} small={true} />
+          </div>
+        )}
         <a
-          href={props.homePage}
+          href={homePage}
           className={classnames('txt-fancy txt-l block', {
-            'color-white color-gray-light-on-hover': props.lightText,
-            'color-blue-on-hover': !props.lightText
+            'color-white color-gray-light-on-hover': lightText,
+            'color-blue-on-hover color-text': !lightText
           })}
         >
-          {props.productName}
+          {productName}
         </a>
       </div>
     );