diff --git a/awx/ui_next/src/api/models/Inventories.js b/awx/ui_next/src/api/models/Inventories.js
index 858e7a390a..becba96649 100644
--- a/awx/ui_next/src/api/models/Inventories.js
+++ b/awx/ui_next/src/api/models/Inventories.js
@@ -8,6 +8,7 @@ class Inventories extends InstanceGroupsMixin(Base) {
 
     this.readAccessList = this.readAccessList.bind(this);
     this.readHosts = this.readHosts.bind(this);
+    this.readHostDetail = this.readHostDetail.bind(this);
     this.readGroups = this.readGroups.bind(this);
     this.readGroupsOptions = this.readGroupsOptions.bind(this);
     this.promoteGroup = this.promoteGroup.bind(this);
@@ -27,6 +28,22 @@ class Inventories extends InstanceGroupsMixin(Base) {
     return this.http.get(`${this.baseUrl}${id}/hosts/`, { params });
   }
 
+  async readHostDetail(inventoryId, hostId) {
+    const {
+      data: { results },
+    } = await this.http.get(
+      `${this.baseUrl}${inventoryId}/hosts/?id=${hostId}`
+    );
+
+    if (Array.isArray(results) && results.length) {
+      return results[0];
+    }
+
+    throw new Error(
+      `How did you get here? Host not found for Inventory ID: ${inventoryId}`
+    );
+  }
+
   readGroups(id, params) {
     return this.http.get(`${this.baseUrl}${id}/groups/`, { params });
   }
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.jsx b/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.jsx
index 89121e8cd5..3c07032096 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.jsx
@@ -11,7 +11,7 @@ import {
 } from 'react-router-dom';
 import useRequest from '@util/useRequest';
 
-import { HostsAPI } from '@api';
+import { InventoriesAPI } from '@api';
 import { Card, CardActions } from '@patternfly/react-core';
 import { CaretLeftIcon } from '@patternfly/react-icons';
 import { TabbedCardHeader } from '@components/Card';
@@ -35,12 +35,14 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
     request: fetchHost,
   } = useRequest(
     useCallback(async () => {
-      const { data } = await HostsAPI.readDetail(match.params.hostId);
-
+      const response = await InventoriesAPI.readHostDetail(
+        inventory.id,
+        match.params.hostId
+      );
       return {
-        host: data,
+        host: response,
       };
-    }, [match.params.hostId]), // eslint-disable-line react-hooks/exhaustive-deps
+    }, [inventory.id, match.params.hostId]),
     {
       host: null,
     }
@@ -48,7 +50,7 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
 
   useEffect(() => {
     fetchHost();
-  }, [fetchHost]);
+  }, [fetchHost, location.pathname]);
 
   useEffect(() => {
     if (inventory && host) {
@@ -89,24 +91,7 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
     },
   ];
 
-  let cardHeader = (
-    <TabbedCardHeader>
-      <RoutedTabs tabsArray={tabsArray} />
-      <CardActions>
-        <CardCloseButton linkTo={hostListUrl} />
-      </CardActions>
-    </TabbedCardHeader>
-  );
-
-  if (location.pathname.endsWith('edit')) {
-    cardHeader = null;
-  }
-
-  if (isLoading) {
-    return <ContentLoading />;
-  }
-
-  if (!isLoading && contentError) {
+  if (contentError) {
     return (
       <Card>
         <ContentError error={contentError}>
@@ -125,48 +110,51 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
 
   return (
     <>
-      {cardHeader}
-      <Switch>
-        <Redirect
-          from="/inventories/inventory/:id/hosts/:hostId"
-          to="/inventories/inventory/:id/hosts/:hostId/details"
-          exact
-        />
-        {host &&
-          inventory && [
-            <Route
-              key="details"
-              path="/inventories/inventory/:id/hosts/:hostId/details"
-            >
-              <InventoryHostDetail host={host} />
-            </Route>,
-            <Route
-              key="edit"
-              path="/inventories/inventory/:id/hosts/:hostId/edit"
-            >
-              <InventoryHostEdit host={host} inventory={inventory} />
-            </Route>,
-            <Route
-              key="completed-jobs"
-              path="/inventories/inventory/:id/hosts/:hostId/completed_jobs"
-            >
-              <JobList defaultParams={{ job__hosts: host.id }} />
-            </Route>,
-          ]}
-        <Route
-          key="not-found"
-          path="*"
-          render={() =>
-            !isLoading && (
-              <ContentError isNotFound>
-                <Link to={`${match.url}/details`}>
-                  {i18n._(`View Inventory Host Details`)}
-                </Link>
-              </ContentError>
-            )
-          }
-        />
-      </Switch>
+      {['edit'].some(name => location.pathname.includes(name)) ? null : (
+        <TabbedCardHeader>
+          <RoutedTabs tabsArray={tabsArray} />
+          <CardActions>
+            <CardCloseButton linkTo={hostListUrl} />
+          </CardActions>
+        </TabbedCardHeader>
+      )}
+
+      {isLoading && <ContentLoading />}
+
+      {!isLoading && host && (
+        <Switch>
+          <Redirect
+            from="/inventories/inventory/:id/hosts/:hostId"
+            to="/inventories/inventory/:id/hosts/:hostId/details"
+            exact
+          />
+          <Route
+            key="details"
+            path="/inventories/inventory/:id/hosts/:hostId/details"
+          >
+            <InventoryHostDetail host={host} />
+          </Route>
+          <Route
+            key="edit"
+            path="/inventories/inventory/:id/hosts/:hostId/edit"
+          >
+            <InventoryHostEdit host={host} inventory={inventory} />
+          </Route>
+          <Route
+            key="completed-jobs"
+            path="/inventories/inventory/:id/hosts/:hostId/completed_jobs"
+          >
+            <JobList defaultParams={{ job__hosts: host.id }} />
+          </Route>
+          <Route key="not-found" path="*">
+            <ContentError isNotFound>
+              <Link to={`${match.url}/details`}>
+                {i18n._(`View Inventory Host Details`)}
+              </Link>
+            </ContentError>
+          </Route>
+        </Switch>
+      )}
     </>
   );
 }
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.test.jsx
index bea26df827..0d73f4d04a 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHost/InventoryHost.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
-import { HostsAPI } from '@api';
+import { InventoriesAPI } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 import mockHost from '../shared/data.host.json';
 import InventoryHost from './InventoryHost';
@@ -15,7 +15,7 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-HostsAPI.readDetail.mockResolvedValue({
+InventoriesAPI.readHostDetail.mockResolvedValue({
   data: { ...mockHost },
 });
 
@@ -54,7 +54,7 @@ describe('<InventoryHost />', () => {
   });
 
   test('should show content error when api throws error on initial render', async () => {
-    HostsAPI.readDetail.mockRejectedValueOnce(new Error());
+    InventoriesAPI.readHostDetail.mockRejectedValueOnce(new Error());
     await act(async () => {
       wrapper = mountWithContexts(
         <InventoryHost inventory={mockInventory} setBreadcrumb={() => {}} />
@@ -76,4 +76,13 @@ describe('<InventoryHost />', () => {
     });
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
   });
+
+  test('should show content error when inventory id does not match host inventory', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InventoryHost inventory={{ id: 99 }} setBreadcrumb={() => {}} />
+      );
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
 });