diff --git a/awx/ui/public/static/media/default.strings.json b/awx/ui/public/static/media/default.strings.json
index 34b5c9ed22..bc66952ff2 100644
--- a/awx/ui/public/static/media/default.strings.json
+++ b/awx/ui/public/static/media/default.strings.json
@@ -1,5 +1,4 @@
 {
     "BRAND_NAME": "Ansible AWX",
-    "COMPONENT_NAME": "",
     "PENDO_API_KEY": ""
 }
diff --git a/awx/ui/src/components/About/About.js b/awx/ui/src/components/About/About.js
index dbea47cc17..5425c3dd9c 100644
--- a/awx/ui/src/components/About/About.js
+++ b/awx/ui/src/components/About/About.js
@@ -5,14 +5,17 @@ import { AboutModal } from '@patternfly/react-core';
 import useBrandName from 'hooks/useBrandName';
 
 function About({ version, isOpen, onClose }) {
-  const {
-    current: { brandName, componentName },
-  } = useBrandName();
+  const brandName = useBrandName();
+
   const createSpeechBubble = () => {
-    let text =
-      componentName !== ''
-        ? `${brandName} ${componentName} ${version}`
-        : `${brandName} ${version}`;
+    let text = '';
+    if (typeof brandName === 'string' && brandName.length > 0) {
+      text =
+        brandName.indexOf('AWX') === -1
+          ? `${brandName} Controller ${version}`
+          : `${brandName} ${version}`;
+    }
+
     let top = '';
     let bottom = '';
 
diff --git a/awx/ui/src/components/About/About.test.js b/awx/ui/src/components/About/About.test.js
index 2b9f5749a1..baf7392948 100644
--- a/awx/ui/src/components/About/About.test.js
+++ b/awx/ui/src/components/About/About.test.js
@@ -5,7 +5,7 @@ import About from './About';
 jest.mock('../../hooks/useBrandName', () => ({
   __esModule: true,
   default: () => ({
-    current: { brandName: 'AWX', componentName: '' },
+    current: 'AWX',
   }),
 }));
 
diff --git a/awx/ui/src/components/AdHocCommands/AdHocDetailsStep.js b/awx/ui/src/components/AdHocCommands/AdHocDetailsStep.js
index 0bb20ce921..6760b58a83 100644
--- a/awx/ui/src/components/AdHocCommands/AdHocDetailsStep.js
+++ b/awx/ui/src/components/AdHocCommands/AdHocDetailsStep.js
@@ -22,9 +22,7 @@ const TooltipWrapper = styled.div`
 `;
 
 function AdHocDetailsStep({ verbosityOptions, moduleOptions }) {
-  const {
-    current: { brandName },
-  } = useBrandName();
+  const brandName = useBrandName();
   const [moduleNameField, moduleNameMeta, moduleNameHelpers] = useField({
     name: 'module_name',
     validate: required(null),
diff --git a/awx/ui/src/components/AppContainer/AppContainer.test.js b/awx/ui/src/components/AppContainer/AppContainer.test.js
index ecba386168..7c5a9ee87b 100644
--- a/awx/ui/src/components/AppContainer/AppContainer.test.js
+++ b/awx/ui/src/components/AppContainer/AppContainer.test.js
@@ -22,7 +22,6 @@ describe('<AppContainer />', () => {
     RootAPI.readAssetVariables.mockResolvedValue({
       data: {
         BRAND_NAME: 'AWX',
-        COMPONENT_NAME: '',
         PENDO_API_KEY: 'some-pendo-key',
       },
     });
@@ -100,7 +99,6 @@ describe('<AppContainer />', () => {
     RootAPI.readAssetVariables.mockResolvedValue({
       data: {
         BRAND_NAME: 'AWX',
-        COMPONENT_NAME: '',
         PENDO_API_KEY: '',
       },
     });
diff --git a/awx/ui/src/hooks/useBrandName.js b/awx/ui/src/hooks/useBrandName.js
index db9f2a4f6f..dd02ee306e 100644
--- a/awx/ui/src/hooks/useBrandName.js
+++ b/awx/ui/src/hooks/useBrandName.js
@@ -1,19 +1,18 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { RootAPI } from 'api';
 
 export default function useBrandName() {
-  const platform = useRef({});
+  const [brandName, setBrandName] = useState('');
 
   useEffect(() => {
     async function fetchBrandName() {
       const {
-        data: { BRAND_NAME, COMPONENT_NAME },
+        data: { BRAND_NAME },
       } = await RootAPI.readAssetVariables();
-      platform.current.brandName = BRAND_NAME;
-      platform.current.componentName = COMPONENT_NAME || '';
+      setBrandName(BRAND_NAME);
     }
     fetchBrandName();
   }, []);
 
-  return platform;
+  return brandName;
 }
diff --git a/awx/ui/src/screens/Project/shared/ProjectSubForms/ManualSubForm.js b/awx/ui/src/screens/Project/shared/ProjectSubForms/ManualSubForm.js
index 306cfb5435..1c472c19d8 100644
--- a/awx/ui/src/screens/Project/shared/ProjectSubForms/ManualSubForm.js
+++ b/awx/ui/src/screens/Project/shared/ProjectSubForms/ManualSubForm.js
@@ -14,9 +14,8 @@ const ManualSubForm = ({
   project_base_dir,
   project_local_paths,
 }) => {
-  const {
-    current: { brandName },
-  } = useBrandName();
+  const brandName = useBrandName();
+
   const localPaths = [...new Set([...project_local_paths, localPath])];
   const options = [
     {
diff --git a/awx/ui/src/screens/Setting/SettingList.js b/awx/ui/src/screens/Setting/SettingList.js
index ed3ffec4ac..626a5c55e3 100644
--- a/awx/ui/src/screens/Setting/SettingList.js
+++ b/awx/ui/src/screens/Setting/SettingList.js
@@ -45,9 +45,8 @@ const CardDescription = styled.div`
 
 function SettingList() {
   const config = useConfig();
-  const {
-    current: { brandName },
-  } = useBrandName();
+  const brandName = useBrandName();
+
   const settingRoutes = [
     {
       header: t`Authentication`,
diff --git a/awx/ui/src/screens/Template/shared/JobTemplateForm.js b/awx/ui/src/screens/Template/shared/JobTemplateForm.js
index 0508e06cc7..debb68e18c 100644
--- a/awx/ui/src/screens/Template/shared/JobTemplateForm.js
+++ b/awx/ui/src/screens/Template/shared/JobTemplateForm.js
@@ -66,9 +66,7 @@ function JobTemplateForm({
     Boolean(template.webhook_service)
   );
   const isMounted = useIsMounted();
-  const {
-    current: { brandName },
-  } = useBrandName();
+  const brandName = useBrandName();
 
   const [askInventoryOnLaunchField] = useField('ask_inventory_on_launch');
   const [jobTypeField, jobTypeMeta, jobTypeHelpers] = useField({