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..e525702a1ca 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: {
@@ -120,18 +121,24 @@ const DetailsCard = ({
                     justifyContent={{ default: 'justifyContentSpaceBetween' }}
                   >
                     <FlexItem>
-                      <Button
-                        ouiaId="host-group-link"
-                        component="a"
-                        href={foremanUrl(
-                          `/hosts?search=hostgroup="${hostgroupName}"`
+                      <span>
+                        {hostgroupTitle?.substring(
+                          0,
+                          hostgroupTitle?.lastIndexOf(hostgroupName)
                         )}
-                        variant="link"
-                        target="_blank"
-                        isInline
-                      >
-                        {hostgroupName}
-                      </Button>
+                        <Button
+                          ouiaId="host-group-link"
+                          component="a"
+                          href={foremanUrl(
+                            `/hosts?search=hostgroup="${hostgroupName}"`
+                          )}
+                          variant="link"
+                          target="_blank"
+                          isInline
+                        >
+                          {hostgroupName}
+                        </Button>
+                      </span>
                     </FlexItem>
                     <FlexItem>
                       <Button
@@ -196,6 +203,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 +220,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..254c0eef15e 100644
--- a/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/core.js
+++ b/webpack/assets/javascripts/react_app/components/HostsIndex/Columns/core.js
@@ -29,11 +29,16 @@ const coreHostsIndexColumns = [
   {
     columnName: 'hostgroup',
     title: __('Host group'),
-    wrapper: hostDetails => (
-      <a href={`/hostgroups/${hostDetails?.hostgroup_id}/edit`}>
-        {hostDetails?.hostgroup_name}
-      </a>
-    ),
+    wrapper: hostDetails => {
+      const fullTitle = hostDetails?.hostgroup_title;
+      const name = hostDetails?.hostgroup_name;
+      return (
+        <span>
+          {fullTitle?.substring(0, fullTitle?.lastIndexOf(name))}
+          <a href={`/hostgroups/${hostDetails?.hostgroup_id}/edit`}>{name}</a>
+        </span>
+      );
+    },
     isSorted: true,
     weight: 100,
   },