diff --git a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
index 964806f05e..ca1fd60143 100644
--- a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
+++ b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
@@ -57,23 +57,25 @@ function RoutedTabs(props) {
 
   return (
     <Tabs activeKey={getActiveTabId()} onSelect={handleTabSelect}>
-      {tabsArray.map(tab => (
-        <Tab
-          aria-label={`${tab.name}`}
-          eventKey={tab.id}
-          key={tab.id}
-          link={tab.link}
-          title={
-            tab.isNestedTabs ? (
-              <>
-                <CaretLeftIcon /> {tab.name}
-              </>
-            ) : (
-              tab.name
-            )
-          }
-        />
-      ))}
+      {tabsArray
+        .filter(tab => tab.isNestedTab || !tab.name.startsWith('Return'))
+        .map(tab => (
+          <Tab
+            aria-label={`${tab.name}`}
+            eventKey={tab.id}
+            key={tab.id}
+            link={tab.link}
+            title={
+              tab.isNestedTab ? (
+                <>
+                  <CaretLeftIcon /> {tab.name}
+                </>
+              ) : (
+                tab.name
+              )
+            }
+          />
+        ))}
     </Tabs>
   );
 }
diff --git a/awx/ui_next/src/screens/Host/Host.jsx b/awx/ui_next/src/screens/Host/Host.jsx
index 7fc96f9ea5..cbd6ff6659 100644
--- a/awx/ui_next/src/screens/Host/Host.jsx
+++ b/awx/ui_next/src/screens/Host/Host.jsx
@@ -9,6 +9,9 @@ import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import HostFacts from './HostFacts';
 import HostDetail from './HostDetail';
+import AlertModal from '@components/AlertModal';
+import ErrorDetail from '@components/ErrorDetail';
+
 import HostEdit from './HostEdit';
 import HostGroups from './HostGroups';
 import HostCompletedJobs from './HostCompletedJobs';
@@ -23,8 +26,16 @@ class Host extends Component {
       hasContentLoading: true,
       contentError: null,
       isInitialized: false,
+      toggleLoading: false,
+      toggleError: null,
+      deletionError: false,
+      isDeleteModalOpen: false,
     };
     this.loadHost = this.loadHost.bind(this);
+    this.handleHostToggle = this.handleHostToggle.bind(this);
+    this.handleToggleError = this.handleToggleError.bind(this);
+    this.handleHostDelete = this.handleHostDelete.bind(this);
+    this.toggleDeleteModal = this.toggleDeleteModal.bind(this);
   }
 
   async componentDidMount() {
@@ -45,15 +56,54 @@ class Host extends Component {
     }
   }
 
+  toggleDeleteModal() {
+    const { isDeleteModalOpen } = this.state;
+    this.setState({ isDeleteModalOpen: !isDeleteModalOpen });
+  }
+
+  async handleHostToggle() {
+    const { host } = this.state;
+    this.setState({ toggleLoading: true });
+    try {
+      const { data } = await HostsAPI.update(host.id, {
+        enabled: !host.enabled,
+      });
+      this.setState({ host: data });
+    } catch (err) {
+      this.setState({ toggleError: err });
+    } finally {
+      this.setState({ toggleLoading: null });
+    }
+  }
+
+  async handleHostDelete() {
+    const { host } = this.state;
+    const { match, history } = this.props;
+
+    this.setState({ hasContentLoading: true });
+    try {
+      await HostsAPI.destroy(host.id);
+      this.setState({ hasContentLoading: false });
+      history.push(`/inventories/inventory/${match.params.id}/hosts`);
+    } catch (err) {
+      this.setState({ deletionError: err });
+    }
+  }
+
   async loadHost() {
-    const { match, setBreadcrumb } = this.props;
-    const id = parseInt(match.params.id, 10);
+    const { match, setBreadcrumb, history, inventory } = this.props;
 
     this.setState({ contentError: null, hasContentLoading: true });
     try {
-      const { data } = await HostsAPI.readDetail(id);
-      setBreadcrumb(data);
+      const { data } = await HostsAPI.readDetail(
+        match.params.hostId || match.params.id
+      );
       this.setState({ host: data });
+
+      if (history.location.pathname.startsWith('/hosts')) {
+        setBreadcrumb(data);
+      }
+      setBreadcrumb(inventory, data);
     } catch (err) {
       this.setState({ contentError: err });
     } finally {
@@ -61,15 +111,44 @@ class Host extends Component {
     }
   }
 
+  handleToggleError() {
+    this.setState({ toggleError: false });
+  }
+
   render() {
     const { location, match, history, i18n } = this.props;
-
-    const { host, contentError, hasContentLoading, isInitialized } = this.state;
-
+    const {
+      deletionError,
+      host,
+      isDeleteModalOpen,
+      toggleError,
+      hasContentLoading,
+      toggleLoading,
+      isInitialized,
+      contentError,
+    } = this.state;
     const tabsArray = [
-      { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
-      { name: i18n._(t`Facts`), link: `${match.url}/facts`, id: 1 },
-      { name: i18n._(t`Groups`), link: `${match.url}/groups`, id: 2 },
+      {
+        name: i18n._(t`Return to Hosts`),
+        link: `/inventories/inventory/${match.params.id}/hosts`,
+        id: 99,
+        isNestedTab: !history.location.pathname.startsWith('/hosts'),
+      },
+      {
+        name: i18n._(t`Details`),
+        link: `${match.url}/details`,
+        id: 0,
+      },
+      {
+        name: i18n._(t`Facts`),
+        link: `${match.url}/facts`,
+        id: 1,
+      },
+      {
+        name: i18n._(t`Groups`),
+        link: `${match.url}/groups`,
+        id: 2,
+      },
       {
         name: i18n._(t`Completed Jobs`),
         link: `${match.url}/completed_jobs`,
@@ -117,62 +196,99 @@ class Host extends Component {
         </PageSection>
       );
     }
-
     return (
-      <PageSection>
-        <Card className="awx-c-card">
-          {cardHeader}
-          <Switch>
-            <Redirect from="/hosts/:id" to="/hosts/:id/details" exact />
-            {host && (
+      <>
+        <PageSection
+          css={`
+            ${location.pathname.startsWith('/inventories')
+              ? 'padding: 0'
+              : 'null'}
+          `}
+        >
+          <Card className="awx-c-card">
+            {cardHeader}
+            <Switch>
+              <Redirect from="/hosts/:id" to="/hosts/:id/details" exact />
+              {host && (
+                <Route
+                  path={[
+                    '/hosts/:id/edit',
+                    '/inventories/inventory/:id/hosts/:hostId/edit',
+                  ]}
+                  render={() => <HostEdit match={match} host={host} />}
+                />
+              )}
+              {host && (
+                <Route
+                  path={[
+                    '/hosts/:id/details',
+                    '/inventories/inventory/:id/hosts/:hostId/details',
+                  ]}
+                  render={() => (
+                    <HostDetail
+                      match={match}
+                      host={host}
+                      history={history}
+                      onToggleDeleteModal={this.toggleDeleteModal}
+                      isDeleteModalOpen={isDeleteModalOpen}
+                      onHandleHostToggle={this.handleHostToggle}
+                      toggleError={toggleError}
+                      toggleLoading={toggleLoading}
+                      onToggleError={this.handleToggleError}
+                      onHostDelete={this.handleHostDelete}
+                    />
+                  )}
+                />
+              )}
+              {host && (
+                <Route
+                  path="/hosts/:id/facts"
+                  render={() => <HostFacts host={host} />}
+                />
+              )}
+              {host && (
+                <Route
+                  path="/hosts/:id/groups"
+                  render={() => <HostGroups host={host} />}
+                />
+              )}
+              {host && (
+                <Route
+                  path="/hosts/:id/completed_jobs"
+                  render={() => <HostCompletedJobs host={host} />}
+                />
+              )}
               <Route
-                path="/hosts/:id/edit"
-                render={() => <HostEdit match={match} host={host} />}
+                key="not-found"
+                path="*"
+                render={() =>
+                  !hasContentLoading && (
+                    <ContentError isNotFound>
+                      {match.params.id && (
+                        <Link to={`/hosts/${match.params.id}/details`}>
+                          {i18n._(`View Host Details`)}
+                        </Link>
+                      )}
+                    </ContentError>
+                  )
+                }
               />
-            )}
-            {host && (
-              <Route
-                path="/hosts/:id/details"
-                render={() => <HostDetail host={host} />}
-              />
-            )}
-            {host && (
-              <Route
-                path="/hosts/:id/facts"
-                render={() => <HostFacts host={host} />}
-              />
-            )}
-            {host && (
-              <Route
-                path="/hosts/:id/groups"
-                render={() => <HostGroups host={host} />}
-              />
-            )}
-            {host && (
-              <Route
-                path="/hosts/:id/completed_jobs"
-                render={() => <HostCompletedJobs host={host} />}
-              />
-            )}
-            <Route
-              key="not-found"
-              path="*"
-              render={() =>
-                !hasContentLoading && (
-                  <ContentError isNotFound>
-                    {match.params.id && (
-                      <Link to={`/hosts/${match.params.id}/details`}>
-                        {i18n._(`View Host Details`)}
-                      </Link>
-                    )}
-                  </ContentError>
-                )
-              }
-            />
-            ,
-          </Switch>
-        </Card>
-      </PageSection>
+              ,
+            </Switch>
+          </Card>
+        </PageSection>
+        {deletionError && (
+          <AlertModal
+            isOpen={deletionError}
+            variant="danger"
+            title={i18n._(t`Error!`)}
+            onClose={() => this.setState({ deletionError: false })}
+          >
+            {i18n._(t`Failed to delete ${host.name}.`)}
+            <ErrorDetail error={deletionError} />
+          </AlertModal>
+        )}
+      </>
     );
   }
 }
diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
index db62e11f60..91f8416176 100644
--- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
+++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
@@ -7,14 +7,127 @@ import { Button } from '@patternfly/react-core';
 import { CardBody, CardActionsRow } from '@components/Card';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
 import { VariablesDetail } from '@components/CodeMirrorInput';
+import { Sparkline } from '@components/Sparkline';
+import Switch from '@components/Switch';
 
 function HostDetail({ host, i18n }) {
-  const { created, description, id, modified, name, summary_fields } = host;
+const ActionButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  & > :not(:first-child) {
+    margin-left: 20px;
+  }
+`;
 
+function HostDetail({
+  host,
+  history,
+  isDeleteModalOpen,
+  match,
+  i18n,
+  toggleError,
+  toggleLoading,
+  onHostDelete,
+  onToggleDeleteModal,
+  onToggleError,
+  onHandleHostToggle,
+}) {
+  const { created, description, id, modified, name, summary_fields } = host;
+  let createdBy = '';
+  if (created) {
+    if (summary_fields.created_by && summary_fields.created_by.username) {
+      createdBy = (
+        <span>
+          {i18n._(t`${formatDateString(created)} by `)}{' '}
+          <Link to={`/users/${summary_fields.created_by.id}`}>
+            {summary_fields.created_by.username}
+          </Link>
+        </span>
+      );
+    } else {
+      createdBy = formatDateString(created);
+    }
+  }
+
+  let modifiedBy = '';
+  if (modified) {
+    if (summary_fields.modified_by && summary_fields.modified_by.username) {
+      modifiedBy = (
+        <span>
+          {i18n._(t`${formatDateString(modified)} by`)}{' '}
+          <Link to={`/users/${summary_fields.modified_by.id}`}>
+            {summary_fields.modified_by.username}
+          </Link>
+        </span>
+      );
+    } else {
+      modifiedBy = formatDateString(modified);
+    }
+  }
+  if (toggleError && !toggleLoading) {
+    return (
+      <AlertModal
+        variant="danger"
+        title={i18n._(t`Error!`)}
+        isOpen={toggleError && !toggleLoading}
+        onClose={onToggleError}
+      >
+        {i18n._(t`Failed to toggle host.`)}
+        <ErrorDetail error={toggleError} />
+      </AlertModal>
+    );
+  }
+  if (isDeleteModalOpen) {
+    return (
+      <AlertModal
+        isOpen={isDeleteModalOpen}
+        title={i18n._(t`Delete Host`)}
+        variant="danger"
+        onClose={() => onToggleDeleteModal()}
+      >
+        {i18n._(t`Are you sure you want to delete:`)}
+        <br />
+        <strong>{host.name}</strong>
+        <ActionButtonWrapper>
+          <Button
+            variant="secondary"
+            aria-label={i18n._(t`Close`)}
+            onClick={() => onToggleDeleteModal()}
+          >
+            {i18n._(t`Cancel`)}
+          </Button>
+
+          <Button
+            variant="danger"
+            aria-label={i18n._(t`Delete`)}
+            onClick={() => onHostDelete()}
+          >
+            {i18n._(t`Delete`)}
+          </Button>
+        </ActionButtonWrapper>
+      </AlertModal>
+    );
+  }
   return (
     <CardBody>
+      <Switch
+        css="padding-bottom: 40px; padding-top: 20px"
+        id={`host-${host.id}-toggle`}
+        label={i18n._(t`On`)}
+        labelOff={i18n._(t`Off`)}
+        isChecked={host.enabled}
+        isDisabled={!host.summary_fields.user_capabilities.edit}
+        onChange={onHandleHostToggle}
+        aria-label={i18n._(t`Toggle Host`)}
+      />
       <DetailList gutter="sm">
         <Detail label={i18n._(t`Name`)} value={name} />
+        <Detail
+          css="display: flex; flex: 1;"
+          value={<Sparkline jobs={host.summary_fields.recent_jobs} />}
+          label={i18n._(t`Activity`)}
+        />
         <Detail label={i18n._(t`Description`)} value={description} />
         {summary_fields.inventory && (
           <Detail
@@ -32,20 +145,12 @@ function HostDetail({ host, i18n }) {
             }
           />
         )}
-        <UserDateDetail
-          label={i18n._(t`Created`)}
-          date={created}
-          user={summary_fields.created_by}
-        />
-        <UserDateDetail
-          label={i18n._(t`Last Modified`)}
-          date={modified}
-          user={summary_fields.modified_by}
-        />
+        <Detail label={i18n._(t`Created`)} value={createdBy} />
+        <Detail label={i18n._(t`Last Modified`)} value={modifiedBy} />
         <VariablesDetail
-          label={i18n._(t`Variables`)}
           value={host.variables}
-          rows={6}
+          rows={4}
+          label={i18n._(t`Variables`)}
         />
       </DetailList>
       <CardActionsRow>
@@ -54,7 +159,11 @@ function HostDetail({ host, i18n }) {
             <Button
               aria-label={i18n._(t`edit`)}
               component={Link}
-              to={`/hosts/${id}/edit`}
+              to={
+                history.location.pathname.startsWith('/inventories')
+                  ? `/inventories/inventory/${match.params.id}/hosts/${match.params.hostId}/edit`
+                  : `/hosts/${id}/edit`
+              }
             >
               {i18n._(t`Edit`)}
             </Button>
diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.test.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.test.jsx
index 749c512171..5562a5cc05 100644
--- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.test.jsx
+++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.test.jsx
@@ -50,8 +50,7 @@ describe('<HostDetail />', () => {
 
   test('should show edit button for users with edit permission', async () => {
     const wrapper = mountWithContexts(<HostDetail host={mockHost} />);
-    // VariablesDetail has two buttons
-    const editButton = wrapper.find('Button').at(2);
+    const editButton = wrapper.find('Button[aria-label="edit"]');
     expect(editButton.text()).toEqual('Edit');
     expect(editButton.prop('to')).toBe('/hosts/1/edit');
   });
@@ -61,7 +60,6 @@ describe('<HostDetail />', () => {
     readOnlyHost.summary_fields.user_capabilities.edit = false;
     const wrapper = mountWithContexts(<HostDetail host={readOnlyHost} />);
     await waitForElement(wrapper, 'HostDetail');
-    // VariablesDetail has two buttons
-    expect(wrapper.find('Button').length).toBe(2);
+    expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
   });
 });
diff --git a/awx/ui_next/src/screens/Host/HostList/HostList.jsx b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
index 4231ef2cc0..978ff2ba59 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostList.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
@@ -238,7 +238,7 @@ class HostsList extends Component {
                   detailUrl={`${match.url}/${o.id}`}
                   isSelected={selected.some(row => row.id === o.id)}
                   onSelect={() => this.handleSelect(o)}
-                  toggleHost={this.handleHostToggle}
+                  onToggleHost={this.handleHostToggle}
                   toggleLoading={toggleLoading === o.id}
                 />
               )}
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
index 9123136749..6e74f9da3b 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -34,7 +34,7 @@ class HostListItem extends React.Component {
       isSelected,
       onSelect,
       detailUrl,
-      toggleHost,
+      onToggleHost,
       toggleLoading,
       i18n,
     } = this.props;
@@ -93,7 +93,7 @@ class HostListItem extends React.Component {
                       toggleLoading ||
                       !host.summary_fields.user_capabilities.edit
                     }
-                    onChange={() => toggleHost(host)}
+                    onChange={() => onToggleHost(host)}
                     aria-label={i18n._(t`Toggle host`)}
                   />
                 </Tooltip>
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx
index d9e5987661..285f71fba4 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx
@@ -4,7 +4,7 @@ import { mountWithContexts } from '@testUtils/enzymeHelpers';
 
 import HostsListItem from './HostListItem';
 
-let toggleHost;
+let onToggleHost;
 
 const mockHost = {
   id: 1,
@@ -24,7 +24,7 @@ const mockHost = {
 
 describe('<HostsListItem />', () => {
   beforeEach(() => {
-    toggleHost = jest.fn();
+    onToggleHost = jest.fn();
   });
 
   afterEach(() => {
@@ -38,7 +38,7 @@ describe('<HostsListItem />', () => {
         detailUrl="/host/1"
         onSelect={() => {}}
         host={mockHost}
-        toggleHost={toggleHost}
+        onToggleHost={onToggleHost}
       />
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
@@ -52,7 +52,7 @@ describe('<HostsListItem />', () => {
         detailUrl="/host/1"
         onSelect={() => {}}
         host={copyMockHost}
-        toggleHost={toggleHost}
+        onToggleHost={onToggleHost}
       />
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
@@ -64,7 +64,7 @@ describe('<HostsListItem />', () => {
         detailUrl="/host/1"
         onSelect={() => {}}
         host={mockHost}
-        toggleHost={toggleHost}
+        onToggleHost={onToggleHost}
       />
     );
     wrapper
@@ -72,7 +72,7 @@ describe('<HostsListItem />', () => {
       .first()
       .find('input')
       .simulate('change');
-    expect(toggleHost).toHaveBeenCalledWith(mockHost);
+    expect(onToggleHost).toHaveBeenCalledWith(mockHost);
   });
 
   test('handles toggle click when host is disabled', () => {
@@ -82,7 +82,7 @@ describe('<HostsListItem />', () => {
         detailUrl="/host/1"
         onSelect={() => {}}
         host={mockHost}
-        toggleHost={toggleHost}
+        onToggleHost={onToggleHost}
       />
     );
     wrapper
@@ -90,6 +90,6 @@ describe('<HostsListItem />', () => {
       .first()
       .find('input')
       .simulate('change');
-    expect(toggleHost).toHaveBeenCalledWith(mockHost);
+    expect(onToggleHost).toHaveBeenCalledWith(mockHost);
   });
 });
diff --git a/awx/ui_next/src/screens/Host/Hosts.jsx b/awx/ui_next/src/screens/Host/Hosts.jsx
index 0a17916223..59bb53bd06 100644
--- a/awx/ui_next/src/screens/Host/Hosts.jsx
+++ b/awx/ui_next/src/screens/Host/Hosts.jsx
@@ -46,14 +46,17 @@ class Hosts extends Component {
   };
 
   render() {
-    const { match, history, location } = this.props;
+    const { match, history, location, inventory } = this.props;
     const { breadcrumbConfig } = this.state;
 
     return (
       <Fragment>
         <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
         <Switch>
-          <Route path={`${match.path}/add`} render={() => <HostAdd />} />
+          <Route
+            path={`${match.path}/add`}
+            render={() => <HostAdd history={history} />}
+          />
           <Route
             path={`${match.path}/:id`}
             render={() => (
@@ -64,6 +67,7 @@ class Hosts extends Component {
                     location={location}
                     setBreadcrumb={this.setBreadcrumbConfig}
                     me={me || {}}
+                    inventory={inventory}
                   />
                 )}
               </Config>
diff --git a/awx/ui_next/src/screens/Inventory/Inventories.jsx b/awx/ui_next/src/screens/Inventory/Inventories.jsx
index 4253078486..49264336b5 100644
--- a/awx/ui_next/src/screens/Inventory/Inventories.jsx
+++ b/awx/ui_next/src/screens/Inventory/Inventories.jsx
@@ -27,7 +27,7 @@ class Inventories extends Component {
     };
   }
 
-  setBreadCrumbConfig = (inventory, group) => {
+  setBreadCrumbConfig = (inventory, nestedResource) => {
     const { i18n } = this.props;
     if (!inventory) {
       return;
@@ -51,21 +51,39 @@ class Inventories extends Component {
       [`/inventories/${inventoryKind}/${inventory.id}/completed_jobs`]: i18n._(
         t`Completed Jobs`
       ),
-      [`/inventories/${inventoryKind}/${inventory.id}/hosts`]: i18n._(t`Hosts`),
+      [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
+        nestedResource.id}`]: i18n._(
+        t`${nestedResource && nestedResource.name}`
+      ),
+      [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
+        nestedResource.id}/details`]: i18n._(t`Details`),
+      [`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
+        nestedResource.id}/edit`]: i18n._(t`Edit Details`),
       [`/inventories/${inventoryKind}/${inventory.id}/hosts/add`]: i18n._(
         t`Create New Host`
       ),
-      [`/inventories/inventory/${inventory.id}/sources`]: i18n._(t`Sources`),
-      [`/inventories/inventory/${inventory.id}/groups`]: i18n._(t`Groups`),
-      [`/inventories/inventory/${inventory.id}/groups/add`]: i18n._(
+      [`/inventories/${inventoryKind}/${inventory.id}/sources`]: i18n._(
+        t`Sources`
+      ),
+      [`/inventories/${inventoryKind}/${inventory.id}/groups`]: i18n._(
+        t`Groups`
+      ),
+      [`/inventories/${inventoryKind}/${inventory.id}/groups/add`]: i18n._(
         t`Create New Group`
       ),
-      [`/inventories/inventory/${inventory.id}/groups/${group &&
-        group.id}`]: `${group && group.name}`,
-      [`/inventories/inventory/${inventory.id}/groups/${group &&
-        group.id}/details`]: i18n._(t`Group Details`),
-      [`/inventories/inventory/${inventory.id}/groups/${group &&
-        group.id}/edit`]: i18n._(t`Edit Details`),
+      [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
+        nestedResource.id}`]: `${nestedResource && nestedResource.name}`,
+      [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
+        nestedResource.id}/details`]: i18n._(t`Group Details`),
+      [`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
+        nestedResource.id}/edit`]: i18n._(t`Edit Details`),
+      [`/inventories/${inventoryKind}/${inventory.id}/hosts`]: i18n._(t`Hosts`),
+      [`/inventories/${inventoryKind}/${inventory.id}/sources`]: i18n._(
+        t`Sources`
+      ),
+      [`/inventories/${inventoryKind}/${inventory.id}/groups`]: i18n._(
+        t`Groups`
+      ),
     };
     this.setState({ breadcrumbConfig });
   };
diff --git a/awx/ui_next/src/screens/Inventory/Inventory.jsx b/awx/ui_next/src/screens/Inventory/Inventory.jsx
index e632610660..c2cb831331 100644
--- a/awx/ui_next/src/screens/Inventory/Inventory.jsx
+++ b/awx/ui_next/src/screens/Inventory/Inventory.jsx
@@ -8,14 +8,15 @@ import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
 import RoutedTabs from '@components/RoutedTabs';
 import { ResourceAccessList } from '@components/ResourceAccessList';
+import ContentLoading from '@components/ContentLoading';
 import InventoryDetail from './InventoryDetail';
-import InventoryHosts from './InventoryHosts';
-import InventoryHostAdd from './InventoryHostAdd';
+
 import InventoryGroups from './InventoryGroups';
 import InventoryCompletedJobs from './InventoryCompletedJobs';
 import InventorySources from './InventorySources';
 import { InventoriesAPI } from '@api';
 import InventoryEdit from './InventoryEdit';
+import InventoryHosts from './InventoryHosts/InventoryHosts';
 
 function Inventory({ history, i18n, location, match, setBreadcrumb }) {
   const [contentError, setContentError] = useState(null);
@@ -61,10 +62,14 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
   if (
     location.pathname.endsWith('edit') ||
     location.pathname.endsWith('add') ||
-    location.pathname.includes('groups/')
+    location.pathname.includes('groups/') ||
+    history.location.pathname.includes(`/hosts/`)
   ) {
     cardHeader = null;
   }
+  if (hasContentLoading) {
+    return <ContentLoading />;
+  }
 
   if (!hasContentLoading && contentError) {
     return (
@@ -111,9 +116,16 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
               render={() => <InventoryEdit inventory={inventory} />}
             />,
             <Route
-              key="host-add"
-              path="/inventories/inventory/:id/hosts/add"
-              render={() => <InventoryHostAdd />}
+              key="hosts"
+              path="/inventories/inventory/:id/hosts"
+              render={() => (
+                <InventoryHosts
+                  match={match}
+                  setBreadcrumb={setBreadcrumb}
+                  i18n={i18n}
+                  inventory={inventory}
+                />
+              )}
             />,
             <Route
               key="access"
@@ -138,11 +150,6 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
                 />
               )}
             />,
-            <Route
-              key="hosts"
-              path="/inventories/inventory/:id/hosts"
-              render={() => <InventoryHosts />}
-            />,
             <Route
               key="sources"
               path="/inventories/inventory/:id/sources"
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
index 40d6ac6de8..ab8ccace46 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
@@ -43,7 +43,7 @@ function InventoryGroups({ i18n, match, setBreadcrumb, inventory, history }) {
       name: i18n._(t`Return to Groups`),
       link: `/inventories/inventory/${inventory.id}/groups`,
       id: 99,
-      isNestedTabs: true,
+      isNestedTab: true,
     },
     {
       name: i18n._(t`Details`),
@@ -65,9 +65,10 @@ function InventoryGroups({ i18n, match, setBreadcrumb, inventory, history }) {
     },
   ];
 
-  // In cases where a user manipulates the url such that they try to navigate to a Inventory Group
-  // that is not associated with the Inventory Id in the Url this Content Error is thrown.
-  // Inventory Groups have a 1: 1 relationship to Inventories thus their Ids must corrolate.
+  // In cases where a user manipulates the url such that they try to navigate to a
+  // Inventory Group that is not associated with the Inventory Id in the Url this
+  // Content Error is thrown. Inventory Groups have a 1:1 relationship to Inventories
+  // thus their Ids must corrolate.
 
   if (contentLoading) {
     return <ContentLoading />;
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
new file mode 100644
index 0000000000..df4d7783fd
--- /dev/null
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
@@ -0,0 +1,226 @@
+import React, { useEffect, useState } from 'react';
+import { withRouter } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { getQSConfig, parseQueryString } from '@util/qs';
+import { InventoriesAPI, HostsAPI } from '@api';
+
+import AlertModal from '@components/AlertModal';
+import DataListToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
+import PaginatedDataList, {
+  ToolbarAddButton,
+  ToolbarDeleteButton,
+} from '@components/PaginatedDataList';
+import InventoryHostItem from './InventoryHostItem';
+
+const QS_CONFIG = getQSConfig('host', {
+  page: 1,
+  page_size: 20,
+  order_by: 'name',
+});
+
+function InventoryHostList({ i18n, location, match }) {
+  const [actions, setActions] = useState(null);
+  const [contentError, setContentError] = useState(null);
+  const [deletionError, setDeletionError] = useState(null);
+  const [hostCount, setHostCount] = useState(0);
+  const [hosts, setHosts] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selected, setSelected] = useState([]);
+  const [toggleError, setToggleError] = useState(null);
+  const [toggleLoading, setToggleLoading] = useState(null);
+
+  const fetchHosts = (id, queryString) => {
+    const params = parseQueryString(QS_CONFIG, queryString);
+    return InventoriesAPI.readHosts(id, params);
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const [
+          {
+            data: { count, results },
+          },
+          {
+            data: { actions: optionActions },
+          },
+        ] = await Promise.all([
+          fetchHosts(match.params.id, location.search),
+          InventoriesAPI.readOptions(),
+        ]);
+
+        setHosts(results);
+        setHostCount(count);
+        setActions(optionActions);
+      } catch (error) {
+        setContentError(error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [match.params.id, location]);
+
+  const handleSelectAll = isSelected => {
+    setSelected(isSelected ? [...hosts] : []);
+  };
+
+  const handleSelect = row => {
+    if (selected.some(s => s.id === row.id)) {
+      setSelected(selected.filter(s => s.id !== row.id));
+    } else {
+      setSelected(selected.concat(row));
+    }
+  };
+
+  const handleDelete = async () => {
+    setIsLoading(true);
+
+    try {
+      await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
+    } catch (error) {
+      setDeletionError(error);
+    } finally {
+      setSelected([]);
+      try {
+        const {
+          data: { count, results },
+        } = await fetchHosts(match.params.id, location.search);
+
+        setHosts(results);
+        setHostCount(count);
+      } catch (error) {
+        setContentError(error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const handleToggle = async hostToToggle => {
+    setToggleLoading(hostToToggle.id);
+
+    try {
+      const { data: updatedHost } = await HostsAPI.update(hostToToggle.id, {
+        enabled: !hostToToggle.enabled,
+      });
+
+      setHosts(
+        hosts.map(host => (host.id === updatedHost.id ? updatedHost : host))
+      );
+    } catch (error) {
+      setToggleError(error);
+    } finally {
+      setToggleLoading(null);
+    }
+  };
+
+  const canAdd =
+    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+  const isAllSelected = selected.length > 0 && selected.length === hosts.length;
+
+  return (
+    <>
+      <PaginatedDataList
+        contentError={contentError}
+        hasContentLoading={isLoading}
+        items={hosts}
+        itemCount={hostCount}
+        pluralizedItemName={i18n._(t`Hosts`)}
+        qsConfig={QS_CONFIG}
+        toolbarColumns={[
+          {
+            name: i18n._(t`Name`),
+            key: 'name',
+            isSortable: true,
+            isSearchable: true,
+          },
+          {
+            name: i18n._(t`Modified`),
+            key: 'modified',
+            isSortable: true,
+            isNumeric: true,
+          },
+          {
+            name: i18n._(t`Created`),
+            key: 'created',
+            isSortable: true,
+            isNumeric: true,
+          },
+        ]}
+        renderToolbar={props => (
+          <DataListToolbar
+            {...props}
+            showSelectAll
+            isAllSelected={isAllSelected}
+            onSelectAll={handleSelectAll}
+            qsConfig={QS_CONFIG}
+            additionalControls={[
+              <ToolbarDeleteButton
+                key="delete"
+                onDelete={handleDelete}
+                itemsToDelete={selected}
+                pluralizedItemName={i18n._(t`Hosts`)}
+              />,
+              canAdd && (
+                <ToolbarAddButton
+                  key="add"
+                  linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
+                />
+              ),
+            ]}
+          />
+        )}
+        renderItem={o => (
+          <InventoryHostItem
+            key={o.id}
+            host={o}
+            detailUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/details`}
+            editUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/edit`}
+            isSelected={selected.some(row => row.id === o.id)}
+            onSelect={() => handleSelect(o)}
+            toggleHost={handleToggle}
+            toggleLoading={toggleLoading === o.id}
+          />
+        )}
+        emptyStateControls={
+          canAdd && (
+            <ToolbarAddButton
+              key="add"
+              linkTo={`/inventories/inventory/${match.params.id}/add`}
+            />
+          )
+        }
+      />
+
+      {toggleError && !toggleLoading && (
+        <AlertModal
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          isOpen={toggleError && !toggleLoading}
+          onClose={() => setToggleError(false)}
+        >
+          {i18n._(t`Failed to toggle host.`)}
+          <ErrorDetail error={toggleError} />
+        </AlertModal>
+      )}
+
+      {deletionError && (
+        <AlertModal
+          isOpen={deletionError}
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          onClose={() => setDeletionError(null)}
+        >
+          {i18n._(t`Failed to delete one or more hosts.`)}
+          <ErrorDetail error={deletionError} />
+        </AlertModal>
+      )}
+    </>
+  );
+}
+
+export default withI18n()(withRouter(InventoryHostList));
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
similarity index 94%
rename from awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.test.jsx
rename to awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
index 715413c81b..d35d4da489 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { InventoriesAPI, HostsAPI } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
-import InventoryHosts from './InventoryHosts';
+import InventoryHostList from './InventoryHostList';
 import mockInventory from '../shared/data.inventory.json';
 
 jest.mock('@api');
@@ -62,7 +62,7 @@ const mockHosts = [
   },
 ];
 
-describe('<InventoryHosts />', () => {
+describe('<InventoryHostList />', () => {
   let wrapper;
 
   beforeEach(async () => {
@@ -81,7 +81,7 @@ describe('<InventoryHosts />', () => {
       },
     });
     await act(async () => {
-      wrapper = mountWithContexts(<InventoryHosts />);
+      wrapper = mountWithContexts(<InventoryHostList />);
     });
     await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
   });
@@ -91,7 +91,7 @@ describe('<InventoryHosts />', () => {
   });
 
   test('initially renders successfully', () => {
-    expect(wrapper.find('InventoryHosts').length).toBe(1);
+    expect(wrapper.find('InventoryHostList').length).toBe(1);
   });
 
   test('should fetch hosts from api and render them in the list', async () => {
@@ -261,7 +261,9 @@ describe('<InventoryHosts />', () => {
       },
     });
     await act(async () => {
-      wrapper = mountWithContexts(<InventoryHosts inventory={mockInventory} />);
+      wrapper = mountWithContexts(
+        <InventoryHostList inventory={mockInventory} />
+      );
     });
     await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
@@ -272,7 +274,9 @@ describe('<InventoryHosts />', () => {
       Promise.reject(new Error())
     );
     await act(async () => {
-      wrapper = mountWithContexts(<InventoryHosts inventory={mockInventory} />);
+      wrapper = mountWithContexts(
+        <InventoryHostList inventory={mockInventory} />
+      );
     });
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
   });
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
index 9e96793e3f..c88362686a 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
@@ -1,228 +1,46 @@
-import React, { useEffect, useState } from 'react';
-import { withRouter } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import { getQSConfig, parseQueryString } from '@util/qs';
-import { InventoriesAPI, HostsAPI } from '@api';
+import React from 'react';
+import { Switch, Route, withRouter } from 'react-router-dom';
 
-import AlertModal from '@components/AlertModal';
-import DataListToolbar from '@components/DataListToolbar';
-import ErrorDetail from '@components/ErrorDetail';
-import PaginatedDataList, {
-  ToolbarAddButton,
-  ToolbarDeleteButton,
-} from '@components/PaginatedDataList';
-import InventoryHostItem from './InventoryHostItem';
-
-const QS_CONFIG = getQSConfig('host', {
-  page: 1,
-  page_size: 20,
-  order_by: 'name',
-});
-
-function InventoryHosts({ i18n, location, match }) {
-  const [actions, setActions] = useState(null);
-  const [contentError, setContentError] = useState(null);
-  const [deletionError, setDeletionError] = useState(null);
-  const [hostCount, setHostCount] = useState(0);
-  const [hosts, setHosts] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [selected, setSelected] = useState([]);
-  const [toggleError, setToggleError] = useState(null);
-  const [toggleLoading, setToggleLoading] = useState(null);
-
-  const fetchHosts = (id, queryString) => {
-    const params = parseQueryString(QS_CONFIG, queryString);
-    return InventoriesAPI.readHosts(id, params);
-  };
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const [
-          {
-            data: { count, results },
-          },
-          {
-            data: { actions: optionActions },
-          },
-        ] = await Promise.all([
-          fetchHosts(match.params.id, location.search),
-          InventoriesAPI.readOptions(),
-        ]);
-
-        setHosts(results);
-        setHostCount(count);
-        setActions(optionActions);
-      } catch (error) {
-        setContentError(error);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-
-    fetchData();
-  }, [match.params.id, location]);
-
-  const handleSelectAll = isSelected => {
-    setSelected(isSelected ? [...hosts] : []);
-  };
-
-  const handleSelect = row => {
-    if (selected.some(s => s.id === row.id)) {
-      setSelected(selected.filter(s => s.id !== row.id));
-    } else {
-      setSelected(selected.concat(row));
-    }
-  };
-
-  const handleDelete = async () => {
-    setIsLoading(true);
-
-    try {
-      await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
-    } catch (error) {
-      setDeletionError(error);
-    } finally {
-      setSelected([]);
-      try {
-        const {
-          data: { count, results },
-        } = await fetchHosts(match.params.id, location.search);
-
-        setHosts(results);
-        setHostCount(count);
-      } catch (error) {
-        setContentError(error);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-  };
-
-  const handleToggle = async hostToToggle => {
-    setToggleLoading(hostToToggle.id);
-
-    try {
-      const { data: updatedHost } = await HostsAPI.update(hostToToggle.id, {
-        enabled: !hostToToggle.enabled,
-      });
-
-      setHosts(
-        hosts.map(host => (host.id === updatedHost.id ? updatedHost : host))
-      );
-    } catch (error) {
-      setToggleError(error);
-    } finally {
-      setToggleLoading(null);
-    }
-  };
-
-  const canAdd =
-    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-  const isAllSelected = selected.length > 0 && selected.length === hosts.length;
+import Host from '../../Host/Host';
+import InventoryHostList from './InventoryHostList';
+import HostAdd from '../InventoryHostAdd';
 
+function InventoryHosts({ match, setBreadcrumb, i18n, inventory }) {
   return (
-    <>
-      <PaginatedDataList
-        contentError={contentError}
-        hasContentLoading={isLoading}
-        items={hosts}
-        itemCount={hostCount}
-        pluralizedItemName={i18n._(t`Hosts`)}
-        qsConfig={QS_CONFIG}
-        onRowClick={handleSelect}
-        toolbarSearchColumns={[
-          {
-            name: i18n._(t`Name`),
-            key: 'name',
-            isDefault: true,
-          },
-          {
-            name: i18n._(t`Created By (Username)`),
-            key: 'created_by__username',
-          },
-          {
-            name: i18n._(t`Modified By (Username)`),
-            key: 'modified_by__username',
-          },
-        ]}
-        toolbarSortColumns={[
-          {
-            name: i18n._(t`Name`),
-            key: 'name',
-          },
-        ]}
-        renderToolbar={props => (
-          <DataListToolbar
-            {...props}
-            showSelectAll
-            isAllSelected={isAllSelected}
-            onSelectAll={handleSelectAll}
-            qsConfig={QS_CONFIG}
-            additionalControls={[
-              <ToolbarDeleteButton
-                key="delete"
-                onDelete={handleDelete}
-                itemsToDelete={selected}
-                pluralizedItemName={i18n._(t`Hosts`)}
-              />,
-              canAdd && (
-                <ToolbarAddButton
-                  key="add"
-                  linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
-                />
-              ),
-            ]}
-          />
-        )}
-        renderItem={o => (
-          <InventoryHostItem
-            key={o.id}
-            host={o}
-            detailUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/details`}
-            editUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/edit`}
-            isSelected={selected.some(row => row.id === o.id)}
-            onSelect={() => handleSelect(o)}
-            toggleHost={handleToggle}
-            toggleLoading={toggleLoading === o.id}
-          />
-        )}
-        emptyStateControls={
-          canAdd && (
-            <ToolbarAddButton
-              key="add"
-              linkTo={`/inventories/inventory/${match.params.id}/add`}
-            />
-          )
-        }
+    <Switch>
+      <Route
+        key="host-add"
+        path="/inventories/inventory/:id/hosts/add"
+        render={() => <HostAdd match={match} />}
       />
-
-      {toggleError && !toggleLoading && (
-        <AlertModal
-          variant="danger"
-          title={i18n._(t`Error!`)}
-          isOpen={toggleError && !toggleLoading}
-          onClose={() => setToggleError(false)}
-        >
-          {i18n._(t`Failed to toggle host.`)}
-          <ErrorDetail error={toggleError} />
-        </AlertModal>
-      )}
-
-      {deletionError && (
-        <AlertModal
-          isOpen={deletionError}
-          variant="danger"
-          title={i18n._(t`Error!`)}
-          onClose={() => setDeletionError(null)}
-        >
-          {i18n._(t`Failed to delete one or more hosts.`)}
-          <ErrorDetail error={deletionError} />
-        </AlertModal>
-      )}
-    </>
+      ,
+      <Route
+        key="details and edit"
+        path="/inventories/inventory/:id/hosts/:hostId"
+        render={() => (
+          <Host
+            setBreadcrumb={setBreadcrumb}
+            match={match}
+            i18n={i18n}
+            inventory={inventory}
+          />
+        )}
+      />
+      ,
+      <Route
+        key="host-list"
+        path="/inventories/inventory/:id/hosts/"
+        render={() => (
+          <InventoryHostList
+            match={match}
+            setBreadcrumb={setBreadcrumb}
+            i18n={i18n}
+          />
+        )}
+      />
+      ,
+    </Switch>
   );
 }
 
-export default withI18n()(withRouter(InventoryHosts));
+export default withRouter(InventoryHosts);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/index.js b/awx/ui_next/src/screens/Inventory/InventoryHosts/index.js
index 6d33814f29..0cb4fe95bc 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/index.js
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/index.js
@@ -1 +1 @@
-export { default } from './InventoryHosts';
+export { default } from './InventoryHostList';