diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/index.js b/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/index.js
index 1212726115d..cac57f4fe38 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/index.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/index.js
@@ -38,6 +38,7 @@ const DetailsCard = ({
     comment,
     owner_id: ownerID,
     owner_name: ownerName,
+    hostgroup_title: hostgroupTitle,
     hostgroup_name: hostgroupName,
     hostgroup_id: hostgroupId,
     permissions: {
@@ -130,7 +131,7 @@ const DetailsCard = ({
                         target="_blank"
                         isInline
                       >
-                        {hostgroupName}
+                        {hostgroupTitle}
                       </Button>
                     </FlexItem>
                     <FlexItem>
@@ -196,6 +197,7 @@ DetailsCard.propTypes = {
   status: PropTypes.string,
   hostDetails: PropTypes.shape({
     comment: PropTypes.string,
+    hostgroup_title: PropTypes.string,
     hostgroup_name: PropTypes.string,
     hostgroup_id: PropTypes.number,
     ip: PropTypes.string,
@@ -212,6 +214,7 @@ DetailsCard.defaultProps = {
   status: STATUS.PENDING,
   hostDetails: {
     comment: undefined,
+    hostgroup_title: undefined,
     hostgroup_name: undefined,
     hostgroup_id: undefined,
     ip: undefined,
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/SystemProperties/index.js b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/SystemProperties/index.js
index 713caf973e1..bef7d4b852e 100644
--- a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/SystemProperties/index.js
+++ b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/SystemProperties/index.js
@@ -25,7 +25,7 @@ const SystemPropertiesCard = ({ status, hostDetails }) => {
     organization_name: organization,
     owner_name: ownerName,
     domain_name: domain,
-    hostgroup_name: hostgroupName,
+    hostgroup_title: hostgroupTitle,
     owner_type: ownerType,
   } = hostDetails;
   return (
@@ -103,7 +103,7 @@ const SystemPropertiesCard = ({ status, hostDetails }) => {
               status={status}
               emptyState={<DefaultLoaderEmptyState />}
             >
-              {hostgroupName}
+              {hostgroupTitle}
             </SkeletonLoader>
           </DescriptionListDescription>
         </DescriptionListGroup>
@@ -164,7 +164,7 @@ const SystemPropertiesCard = ({ status, hostDetails }) => {
 SystemPropertiesCard.propTypes = {
   status: PropTypes.string,
   hostDetails: PropTypes.shape({
-    hostgroup_name: PropTypes.string,
+    hostgroup_title: PropTypes.string,
     model_name: PropTypes.string,
     organization_name: PropTypes.string,
     location_name: PropTypes.string,
@@ -184,7 +184,7 @@ SystemPropertiesCard.defaultProps = {
     model_name: undefined,
     organization_name: undefined,
     location_name: undefined,
-    hostgroup_name: undefined,
+    hostgroup_title: undefined,
     owner_type: undefined,
     owner_name: undefined,
     domain_name: undefined,
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/core.js b/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/core.js
index 0c60415a235..8489475f7f5 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/core.js
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/core.js
@@ -31,7 +31,7 @@ const coreHostsIndexColumns = [
     title: __('Host group'),
     wrapper: hostDetails => (
       <a href={`/hostgroups/${hostDetails?.hostgroup_id}/edit`}>
-        {hostDetails?.hostgroup_name}
+        {hostDetails?.hostgroup_title}
       </a>
     ),
     isSorted: true,