diff --git a/lib/katello/plugin.rb b/lib/katello/plugin.rb
index ccaaef69edb..2db0542c93c 100644
--- a/lib/katello/plugin.rb
+++ b/lib/katello/plugin.rb
@@ -230,6 +230,15 @@
        :parent => :lab_features_menu,
        :turbolinks => false
 
+  menu :labs_menu,
+       :host_collections_lab,
+       :url => '/labs/host_collections',
+       :url_hash => {:controller => 'katello/api/v2/host_collections_controller',
+                     :action => 'index'},
+       :caption => N_('Host Collections'),
+       :parent => :lab_features_menu,
+       :turbolinks => false
+
   extend_template_helpers Katello::KatelloUrlsHelper
   extend_template_helpers Katello::Concerns::BaseTemplateScopeExtensions
 
diff --git a/webpack/components/InlineEdit/InlineEdit.scss b/webpack/components/InlineEdit/InlineEdit.scss
new file mode 100644
index 00000000000..b65d9c92e4e
--- /dev/null
+++ b/webpack/components/InlineEdit/InlineEdit.scss
@@ -0,0 +1,24 @@
+.inline-edit-display {
+  align-items: center;
+
+  .inline-edit-value {
+    display: block;
+    min-height: 1.5rem;
+  }
+
+  button {
+    visibility: hidden;
+  }
+
+  &:hover button {
+    visibility: visible;
+  }
+}
+
+.inline-edit-form {
+  margin-bottom: 0;
+
+  .pf-c-form__group-control {
+    width: 100%;
+  }
+}
diff --git a/webpack/components/InlineEdit/index.js b/webpack/components/InlineEdit/index.js
new file mode 100644
index 00000000000..190c0d714d3
--- /dev/null
+++ b/webpack/components/InlineEdit/index.js
@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Button,
+  Flex,
+  FlexItem,
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core';
+import { CheckIcon, TimesIcon, PencilAltIcon } from '@patternfly/react-icons';
+import './InlineEdit.scss';
+
+const InlineEdit = ({
+  value, onSave, isRequired, multiline, type, options,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+
+  const handleSave = () => {
+    if (isRequired && !editValue.trim()) {
+      return;
+    }
+    onSave(editValue);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditValue(value);
+    setIsEditing(false);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !multiline) {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === 'Escape') {
+      handleCancel();
+    }
+  };
+
+  const renderValue = () => {
+    if (type === 'select') {
+      const option = options.find(opt => opt.value === value);
+      return option?.label || value || __('Not set');
+    }
+    return value || __('Not set');
+  };
+
+  const renderEditField = () => {
+    if (type === 'select') {
+      return (
+        <FormSelect
+          value={editValue}
+          onChange={newValue => setEditValue(newValue)}
+          aria-label="inline-edit-select"
+          ouiaId="inline-edit-select"
+        >
+          {options.map(option => (
+            <FormSelectOption
+              key={option.value}
+              value={option.value}
+              label={option.label}
+            />
+          ))}
+        </FormSelect>
+      );
+    }
+
+    if (multiline) {
+      return (
+        <TextArea
+          value={editValue}
+          onChange={(event, newValue) => setEditValue(newValue)}
+          onKeyDown={handleKeyDown}
+          aria-label="inline-edit-textarea"
+          autoFocus
+          rows={3}
+        />
+      );
+    }
+
+    return (
+      <TextInput
+        value={editValue}
+        onChange={(event, newValue) => setEditValue(newValue)}
+        onKeyDown={handleKeyDown}
+        aria-label="inline-edit-input"
+        autoFocus
+        isRequired={isRequired}
+        ouiaId="inline-edit-input"
+      />
+    );
+  };
+
+  if (!isEditing) {
+    return (
+      <Flex className="inline-edit-display">
+        <FlexItem flex={{ default: 'flex_1' }}>
+          <span className="inline-edit-value">{renderValue()}</span>
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="plain"
+            aria-label="Edit"
+            onClick={() => {
+              setEditValue(value);
+              setIsEditing(true);
+            }}
+            icon={<PencilAltIcon />}
+            ouiaId="inline-edit-edit-button"
+          />
+        </FlexItem>
+      </Flex>
+    );
+  }
+
+  return (
+    <FormGroup className="inline-edit-form">
+      <Flex>
+        <FlexItem flex={{ default: 'flex_1' }}>
+          {renderEditField()}
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="plain"
+            aria-label="Save"
+            onClick={handleSave}
+            icon={<CheckIcon />}
+            isDisabled={isRequired && !editValue.trim()}
+            ouiaId="inline-edit-save-button"
+          />
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="plain"
+            aria-label="Cancel"
+            onClick={handleCancel}
+            icon={<TimesIcon />}
+            ouiaId="inline-edit-cancel-button"
+          />
+        </FlexItem>
+      </Flex>
+    </FormGroup>
+  );
+};
+
+InlineEdit.propTypes = {
+  value: PropTypes.string,
+  onSave: PropTypes.func.isRequired,
+  isRequired: PropTypes.bool,
+  multiline: PropTypes.bool,
+  type: PropTypes.oneOf(['text', 'select']),
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  })),
+};
+
+InlineEdit.defaultProps = {
+  value: '',
+  isRequired: false,
+  multiline: false,
+  type: 'text',
+  options: [],
+};
+
+export default InlineEdit;
diff --git a/webpack/containers/Application/config.js b/webpack/containers/Application/config.js
index f43c054f2ef..5d4a87c8014 100644
--- a/webpack/containers/Application/config.js
+++ b/webpack/containers/Application/config.js
@@ -19,6 +19,8 @@ import BootedContainerImages from '../../scenes/BootedContainerImages';
 import ContainerImages from '../../scenes/ContainerImages';
 import FlatpakRemotes from '../../scenes/FlatpakRemotes';
 import FlatpakRemoteDetails from '../../scenes/FlatpakRemotes/Details';
+import HostCollections from '../../scenes/HostCollections/HostCollectionsPage';
+import HostCollectionDetails from '../../scenes/HostCollections/Details';
 
 // eslint-disable-next-line import/prefer-default-export
 export const links = [
@@ -106,4 +108,12 @@ export const links = [
     component: WithOrganization(withHeader(FlatpakRemoteDetails, { title: __('Flatpak Remote Details') })),
     exact: false,
   },
+  {
+    path: 'labs/host_collections/:id([0-9]+)',
+    component: WithOrganization(withHeader(HostCollectionDetails, { title: __('Host Collection Details') })),
+  },
+  {
+    path: 'labs/host_collections',
+    component: WithOrganization(withHeader(HostCollections, { title: __('Host collections') })),
+  },
 ];
diff --git a/webpack/redux/reducers/index.js b/webpack/redux/reducers/index.js
index d6d7d6880d7..be092617736 100644
--- a/webpack/redux/reducers/index.js
+++ b/webpack/redux/reducers/index.js
@@ -12,6 +12,7 @@ import { moduleStreamDetails } from '../../scenes/ModuleStreams/Details';
 import { contentViewDetails } from '../../scenes/ContentViews/Details';
 import hostDetails from '../../components/extensions/HostDetails/HostDetailsReducer';
 import searchBar from '../../components/extensions/SearchBar/SearchBarReducer';
+import hostCollections from '../../scenes/HostCollections/HostCollectionsReducer';
 
 export default combineReducers({
   organization,
@@ -26,5 +27,6 @@ export default combineReducers({
   contentViewDetails,
   hostDetails,
   searchBar,
+  hostCollections,
   ...organizationProductsReducers,
 });
diff --git a/webpack/scenes/HostCollections/Copy/CopyHostCollectionModal.js b/webpack/scenes/HostCollections/Copy/CopyHostCollectionModal.js
new file mode 100644
index 00000000000..7d233999d99
--- /dev/null
+++ b/webpack/scenes/HostCollections/Copy/CopyHostCollectionModal.js
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Modal,
+  ModalVariant,
+  Form,
+  FormGroup,
+  TextInput,
+  ActionGroup,
+  Button,
+} from '@patternfly/react-core';
+import { addToast } from 'foremanReact/components/ToastsList/slice';
+import { copyHostCollection } from '../HostCollectionsActions';
+
+const CopyHostCollectionModal = ({ isOpen, onClose, hostCollection }) => {
+  const dispatch = useDispatch();
+  const [newName, setNewName] = useState(`Copy of ${hostCollection?.name || ''}`);
+  const [copying, setCopying] = useState(false);
+
+  const handleSuccess = (data) => {
+    setCopying(false);
+    dispatch(addToast({
+      type: 'success',
+      message: __('Host collection copied successfully'),
+    }));
+    onClose();
+    window.location.href = `/labs/host_collections/${data.id}`;
+  };
+
+  const handleError = (error) => {
+    setCopying(false);
+    const errorMsg =
+      error?.response?.data?.error?.full_messages?.[0] ||
+      error?.response?.data?.displayMessage ||
+      __('Failed to copy host collection');
+    dispatch(addToast({
+      type: 'error',
+      message: errorMsg,
+    }));
+  };
+
+  const onCopy = () => {
+    setCopying(true);
+    dispatch(copyHostCollection(hostCollection.id, newName, handleSuccess, handleError));
+  };
+
+  const submitDisabled = !newName?.trim().length || copying;
+
+  return (
+    <Modal
+      ouiaId="copy-host-collection-modal"
+      title={__('Copy host collection')}
+      variant={ModalVariant.small}
+      isOpen={isOpen}
+      onClose={onClose}
+      appendTo={document.body}
+    >
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+          onCopy();
+        }}
+      >
+        <FormGroup label={__('Name')} isRequired fieldId="new-name">
+          <TextInput
+            isRequired
+            type="text"
+            id="new-name"
+            aria-label="new-name"
+            ouiaId="new-name-input"
+            name="new-name"
+            value={newName}
+            onChange={(_event, value) => setNewName(value)}
+            isDisabled={copying}
+          />
+        </FormGroup>
+        <ActionGroup>
+          <Button
+            ouiaId="copy-button"
+            aria-label="copy"
+            variant="primary"
+            isDisabled={submitDisabled}
+            isLoading={copying}
+            type="submit"
+          >
+            {__('Copy')}
+          </Button>
+          <Button
+            ouiaId="cancel-button"
+            variant="link"
+            onClick={onClose}
+            isDisabled={copying}
+          >
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+CopyHostCollectionModal.propTypes = {
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  hostCollection: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+CopyHostCollectionModal.defaultProps = {
+  isOpen: false,
+};
+
+export default CopyHostCollectionModal;
diff --git a/webpack/scenes/HostCollections/Create/CreateHostCollectionForm.js b/webpack/scenes/HostCollections/Create/CreateHostCollectionForm.js
new file mode 100644
index 00000000000..3a3d949cb7b
--- /dev/null
+++ b/webpack/scenes/HostCollections/Create/CreateHostCollectionForm.js
@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  TextArea,
+  Checkbox,
+  ActionGroup,
+  Button,
+  NumberInput,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import { addToast } from 'foremanReact/components/ToastsList/slice';
+import { createHostCollection } from '../HostCollectionsActions';
+
+const CreateHostCollectionForm = ({ onClose }) => {
+  const dispatch = useDispatch();
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [unlimitedHosts, setUnlimitedHosts] = useState(true);
+  const [maxHosts, setMaxHosts] = useState(1);
+  const [saving, setSaving] = useState(false);
+
+  const onMinus = () => {
+    const newValue = (maxHosts || 1) - 1;
+    setMaxHosts(newValue < 1 ? 1 : newValue);
+  };
+
+  const onPlus = () => {
+    setMaxHosts((maxHosts || 1) + 1);
+  };
+
+  const onChange = (event) => {
+    const value = Number(event.target.value);
+    setMaxHosts(value < 1 ? 1 : value);
+  };
+
+  const handleSuccess = () => {
+    setSaving(false);
+    dispatch(addToast({
+      type: 'success',
+      message: __('Host collection created successfully'),
+    }));
+    onClose();
+    window.location.reload();
+  };
+
+  const handleError = (error) => {
+    setSaving(false);
+    const errorMsg =
+      error?.response?.data?.error?.full_messages?.[0] ||
+      error?.response?.data?.displayMessage ||
+      __('Failed to create host collection');
+    dispatch(addToast({
+      type: 'error',
+      message: errorMsg,
+    }));
+  };
+
+  const onSave = () => {
+    setSaving(true);
+    const params = {
+      name,
+      description,
+      unlimited_hosts: unlimitedHosts,
+    };
+    if (!unlimitedHosts) {
+      params.max_hosts = maxHosts;
+    }
+    dispatch(createHostCollection(params, handleSuccess, handleError));
+  };
+
+  const submitDisabled = !name?.trim().length || saving;
+
+  return (
+    <Form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSave();
+      }}
+      id="create-host-collection-form"
+    >
+      <FormGroup label={__('Name')} isRequired fieldId="name">
+        <TextInput
+          isRequired
+          type="text"
+          id="name"
+          aria-label="name"
+          ouiaId="name-input"
+          name="name"
+          value={name}
+          onChange={(_event, value) => setName(value)}
+          isDisabled={saving}
+        />
+      </FormGroup>
+      <FormGroup label={__('Description')} fieldId="description">
+        <TextArea
+          type="text"
+          id="description"
+          name="description"
+          aria-label="description"
+          ouiaId="description-input"
+          value={description}
+          onChange={(_event, value) => setDescription(value)}
+          isDisabled={saving}
+        />
+      </FormGroup>
+      <FormGroup fieldId="unlimited-hosts">
+        <Checkbox
+          id="unlimited-hosts"
+          ouiaId="unlimited-hosts-checkbox"
+          name="unlimited-hosts"
+          label={__('Unlimited hosts')}
+          isChecked={unlimitedHosts}
+          onChange={(_event, checked) => setUnlimitedHosts(checked)}
+          isDisabled={saving}
+        />
+      </FormGroup>
+      {!unlimitedHosts && (
+        <FormGroup label={__('Limit')} isRequired fieldId="max-hosts">
+          <NumberInput
+            id="max-hosts"
+            aria-label="max-hosts"
+            ouiaId="max-hosts-input"
+            value={maxHosts}
+            onMinus={onMinus}
+            onChange={onChange}
+            onPlus={onPlus}
+            min={1}
+            isDisabled={saving}
+          />
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem>
+                {__('Maximum number of content hosts in this collection')}
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        </FormGroup>
+      )}
+      <ActionGroup>
+        <Button
+          ouiaId="create-button"
+          aria-label="create"
+          variant="primary"
+          isDisabled={submitDisabled}
+          isLoading={saving}
+          type="submit"
+        >
+          {__('Create')}
+        </Button>
+        <Button
+          ouiaId="cancel-button"
+          variant="link"
+          onClick={onClose}
+          isDisabled={saving}
+        >
+          {__('Cancel')}
+        </Button>
+      </ActionGroup>
+    </Form>
+  );
+};
+
+CreateHostCollectionForm.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default CreateHostCollectionForm;
diff --git a/webpack/scenes/HostCollections/Create/CreateHostCollectionModal.js b/webpack/scenes/HostCollections/Create/CreateHostCollectionModal.js
new file mode 100644
index 00000000000..8d946bf23dd
--- /dev/null
+++ b/webpack/scenes/HostCollections/Create/CreateHostCollectionModal.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Modal, ModalVariant } from '@patternfly/react-core';
+import CreateHostCollectionForm from './CreateHostCollectionForm';
+
+const CreateHostCollectionModal = ({ isOpen, onClose }) => (
+  <Modal
+    ouiaId="create-host-collection-modal"
+    title={__('Create host collection')}
+    variant={ModalVariant.small}
+    isOpen={isOpen}
+    onClose={onClose}
+    appendTo={document.body}
+  >
+    <CreateHostCollectionForm onClose={onClose} />
+  </Modal>
+);
+
+CreateHostCollectionModal.propTypes = {
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+};
+
+CreateHostCollectionModal.defaultProps = {
+  isOpen: false,
+};
+
+export default CreateHostCollectionModal;
diff --git a/webpack/scenes/HostCollections/Delete/DeleteHostCollectionModal.js b/webpack/scenes/HostCollections/Delete/DeleteHostCollectionModal.js
new file mode 100644
index 00000000000..7989becbb37
--- /dev/null
+++ b/webpack/scenes/HostCollections/Delete/DeleteHostCollectionModal.js
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Modal,
+  ModalVariant,
+  Button,
+  Icon,
+  Title,
+  Flex,
+} from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { addToast } from 'foremanReact/components/ToastsList/slice';
+import { deleteHostCollection } from '../HostCollectionsActions';
+
+const DeleteHostCollectionModal = ({ isOpen, onClose, hostCollection }) => {
+  const dispatch = useDispatch();
+  const [deleting, setDeleting] = useState(false);
+
+  const handleSuccess = () => {
+    setDeleting(false);
+    dispatch(addToast({
+      type: 'success',
+      message: __('Host collection deleted successfully'),
+    }));
+    onClose();
+    window.location.href = '/labs/host_collections';
+  };
+
+  const handleError = (error) => {
+    setDeleting(false);
+    const errorMsg =
+      error?.response?.data?.error?.full_messages?.[0] ||
+      error?.response?.data?.displayMessage ||
+      __('Failed to delete host collection');
+    dispatch(addToast({
+      type: 'error',
+      message: errorMsg,
+    }));
+  };
+
+  const handleDelete = () => {
+    setDeleting(true);
+    dispatch(deleteHostCollection(hostCollection.id, handleSuccess, handleError));
+  };
+
+  return (
+    <Modal
+      ouiaId="delete-host-collection-modal"
+      variant={ModalVariant.small}
+      title={[
+        <Flex
+          key="delete-modal-header"
+          spaceItems={{ default: 'spaceItemsSm' }}
+        >
+          <Icon status="warning" key="exclamation-triangle">
+            <ExclamationTriangleIcon />
+          </Icon>
+          <Title
+            ouiaId="delete-host-collection-header"
+            key="delete-title"
+            headingLevel="h5"
+            size="2xl"
+          >
+            {__('Delete host collection?')}
+          </Title>
+        </Flex>,
+      ]}
+      isOpen={isOpen}
+      onClose={onClose}
+      actions={[
+        <Button
+          ouiaId="delete-button"
+          key="delete"
+          variant="danger"
+          onClick={handleDelete}
+          isDisabled={deleting}
+          isLoading={deleting}
+        >
+          {__('Delete')}
+        </Button>,
+        <Button
+          ouiaId="cancel-button"
+          key="cancel"
+          variant="link"
+          onClick={onClose}
+          isDisabled={deleting}
+        >
+          {__('Cancel')}
+        </Button>,
+      ]}
+    >
+      {__('This host collection will be deleted and will no longer be available. This operation cannot be undone.')}
+    </Modal>
+  );
+};
+
+DeleteHostCollectionModal.propTypes = {
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  hostCollection: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+DeleteHostCollectionModal.defaultProps = {
+  isOpen: false,
+};
+
+export default DeleteHostCollectionModal;
diff --git a/webpack/scenes/HostCollections/Details/DetailsTab/DetailsTab.js b/webpack/scenes/HostCollections/Details/DetailsTab/DetailsTab.js
new file mode 100644
index 00000000000..c58e9a160a6
--- /dev/null
+++ b/webpack/scenes/HostCollections/Details/DetailsTab/DetailsTab.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
+import InlineEdit from '../../../../components/InlineEdit';
+import HostLimitEdit from './HostLimitEdit';
+import { updateHostCollection, getHostCollection } from '../HostCollectionDetailsActions';
+
+const DetailsTab = ({ hostCollection, hostCollectionId }) => {
+  const dispatch = useDispatch();
+
+  const handleSave = (field, value) => {
+    const params = { [field]: value };
+    dispatch(updateHostCollection(hostCollectionId, params, () => {
+      dispatch(getHostCollection(hostCollectionId));
+    }));
+  };
+
+  return (
+    <Grid hasGutter>
+      <GridItem span={12}>
+        <Card isFullHeight ouiaId="host-collection-details-card">
+          <CardTitle>{__('Basic Information')}</CardTitle>
+          <CardBody>
+            <DescriptionList isHorizontal>
+              <DescriptionListGroup>
+                <DescriptionListTerm>{__('Name')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <InlineEdit
+                    value={hostCollection?.name || ''}
+                    onSave={value => handleSave('name', value)}
+                    isRequired
+                  />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+
+              <DescriptionListGroup>
+                <DescriptionListTerm>{__('Description')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <InlineEdit
+                    value={hostCollection?.description || ''}
+                    onSave={value => handleSave('description', value)}
+                    multiline
+                  />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+
+              <DescriptionListGroup>
+                <DescriptionListTerm>{__('Total Hosts')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <a href="#hosts">{hostCollection?.totalHosts || 0}</a>
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+
+              <DescriptionListGroup>
+                <DescriptionListTerm>{__('Host Limit')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <HostLimitEdit
+                    hostCollection={hostCollection}
+                    hostCollectionId={hostCollectionId}
+                  />
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </DescriptionList>
+          </CardBody>
+        </Card>
+      </GridItem>
+    </Grid>
+  );
+};
+
+DetailsTab.propTypes = {
+  hostCollection: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    totalHosts: PropTypes.number,
+    maxHosts: PropTypes.number,
+    unlimitedHosts: PropTypes.bool,
+  }),
+  hostCollectionId: PropTypes.string.isRequired,
+};
+
+DetailsTab.defaultProps = {
+  hostCollection: {},
+};
+
+export default DetailsTab;
diff --git a/webpack/scenes/HostCollections/Details/DetailsTab/HostLimitEdit.js b/webpack/scenes/HostCollections/Details/DetailsTab/HostLimitEdit.js
new file mode 100644
index 00000000000..5435d6648aa
--- /dev/null
+++ b/webpack/scenes/HostCollections/Details/DetailsTab/HostLimitEdit.js
@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Button,
+  Checkbox,
+  Flex,
+  FlexItem,
+  FormGroup,
+  NumberInput,
+} from '@patternfly/react-core';
+import { CheckIcon, TimesIcon, PencilAltIcon } from '@patternfly/react-icons';
+import { updateHostCollection, getHostCollection } from '../HostCollectionDetailsActions';
+
+const HostLimitEdit = ({ hostCollection, hostCollectionId }) => {
+  const dispatch = useDispatch();
+  const [isEditing, setIsEditing] = useState(false);
+  const [isUnlimited, setIsUnlimited] = useState(hostCollection?.unlimitedHosts || false);
+  const [maxHosts, setMaxHosts] = useState(hostCollection?.maxHosts || 1);
+
+  // Update local state when hostCollection data changes
+  useEffect(() => {
+    setIsUnlimited(hostCollection?.unlimitedHosts || false);
+    setMaxHosts(hostCollection?.maxHosts || 1);
+  }, [hostCollection?.unlimitedHosts, hostCollection?.maxHosts]);
+
+  const handleSave = () => {
+    const params = {
+      unlimited_hosts: isUnlimited,
+      max_hosts: isUnlimited ? null : maxHosts,
+    };
+
+    dispatch(updateHostCollection(hostCollectionId, params, () => {
+      dispatch(getHostCollection(hostCollectionId));
+      setIsEditing(false);
+    }));
+  };
+
+  const handleCancel = () => {
+    setIsUnlimited(hostCollection?.unlimitedHosts || false);
+    setMaxHosts(hostCollection?.maxHosts || 1);
+    setIsEditing(false);
+  };
+
+  const displayValue = () => {
+    if (hostCollection?.unlimitedHosts) {
+      return __('Unlimited');
+    }
+    return String(hostCollection?.maxHosts || 0);
+  };
+
+  const onMinus = () => {
+    const newValue = maxHosts - 1;
+    if (newValue >= 1) {
+      setMaxHosts(newValue);
+    }
+  };
+
+  const onPlus = () => {
+    setMaxHosts(maxHosts + 1);
+  };
+
+  const onChange = (event) => {
+    const value = Number(event.target.value);
+    if (!Number.isNaN(value) && value >= 1) {
+      setMaxHosts(value);
+    }
+  };
+
+  if (!isEditing) {
+    return (
+      <Flex className="inline-edit-display">
+        <FlexItem flex={{ default: 'flex_1' }}>
+          <span className="inline-edit-value">{displayValue()}</span>
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="plain"
+            aria-label="Edit"
+            onClick={() => setIsEditing(true)}
+            icon={<PencilAltIcon />}
+            ouiaId="host-limit-edit-button"
+          />
+        </FlexItem>
+      </Flex>
+    );
+  }
+
+  return (
+    <FormGroup className="inline-edit-form">
+      <Flex direction={{ default: 'column' }}>
+        <FlexItem>
+          <Checkbox
+            id="unlimited-checkbox"
+            label={__('Unlimited')}
+            isChecked={isUnlimited}
+            onChange={(_event, checked) => setIsUnlimited(checked)}
+            ouiaId="unlimited-checkbox"
+          />
+        </FlexItem>
+        {!isUnlimited && (
+          <FlexItem>
+            <Flex alignItems={{ default: 'alignItemsCenter' }}>
+              <FlexItem>
+                <NumberInput
+                  value={maxHosts}
+                  onMinus={onMinus}
+                  onChange={onChange}
+                  onPlus={onPlus}
+                  inputName="max-hosts"
+                  inputAriaLabel="max hosts"
+                  minusBtnAriaLabel="minus"
+                  plusBtnAriaLabel="plus"
+                  min={1}
+                  ouiaId="max-hosts-input"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Button
+                  variant="plain"
+                  aria-label="Save"
+                  onClick={handleSave}
+                  icon={<CheckIcon />}
+                  ouiaId="host-limit-save-button"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Button
+                  variant="plain"
+                  aria-label="Cancel"
+                  onClick={handleCancel}
+                  icon={<TimesIcon />}
+                  ouiaId="host-limit-cancel-button"
+                />
+              </FlexItem>
+            </Flex>
+          </FlexItem>
+        )}
+        {isUnlimited && (
+          <FlexItem>
+            <Flex>
+              <FlexItem>
+                <Button
+                  variant="plain"
+                  aria-label="Save"
+                  onClick={handleSave}
+                  icon={<CheckIcon />}
+                  ouiaId="host-limit-save-button-unlimited"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Button
+                  variant="plain"
+                  aria-label="Cancel"
+                  onClick={handleCancel}
+                  icon={<TimesIcon />}
+                  ouiaId="host-limit-cancel-button-unlimited"
+                />
+              </FlexItem>
+            </Flex>
+          </FlexItem>
+        )}
+      </Flex>
+    </FormGroup>
+  );
+};
+
+HostLimitEdit.propTypes = {
+  hostCollection: PropTypes.shape({
+    maxHosts: PropTypes.number,
+    unlimitedHosts: PropTypes.bool,
+  }),
+  hostCollectionId: PropTypes.string.isRequired,
+};
+
+HostLimitEdit.defaultProps = {
+  hostCollection: {},
+};
+
+export default HostLimitEdit;
diff --git a/webpack/scenes/HostCollections/Details/HostCollectionDetails.js b/webpack/scenes/HostCollections/Details/HostCollectionDetails.js
new file mode 100644
index 00000000000..5b8c69b9864
--- /dev/null
+++ b/webpack/scenes/HostCollections/Details/HostCollectionDetails.js
@@ -0,0 +1,212 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Grid,
+  GridItem,
+  Label,
+  Panel,
+  PageSection,
+  Flex,
+  FlexItem,
+  Split,
+  SplitItem,
+  Tabs,
+  Tab,
+  TabTitleText,
+  TextContent,
+  Text,
+  TextVariants,
+} from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownSeparator,
+} from '@patternfly/react-core/deprecated';
+import { CaretDownIcon } from '@patternfly/react-icons';
+import { getHostCollection } from './HostCollectionDetailsActions';
+import DetailsTab from './DetailsTab/DetailsTab';
+import HostsTab from './HostsTab/HostsTab';
+import InactiveText from '../../ContentViews/components/InactiveText';
+import CopyHostCollectionModal from '../Copy/CopyHostCollectionModal';
+import DeleteHostCollectionModal from '../Delete/DeleteHostCollectionModal';
+import './HostCollectionDetails.scss';
+
+const HostCollectionDetails = () => {
+  const dispatch = useDispatch();
+  const { id } = useParams();
+  const [activeTabKey, setActiveTabKey] = useState(() => {
+    const hash = window.location.hash.replace('#', '');
+    return hash || 'details';
+  });
+  const [isActionsOpen, setIsActionsOpen] = useState(false);
+  const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+  const hostCollectionResponse = useSelector(state =>
+    selectAPIResponse(state, `HOST_COLLECTION_DETAILS_${id}`));
+  const hostCollection = propsToCamelCase(hostCollectionResponse);
+
+  useEffect(() => {
+    if (id) {
+      dispatch(getHostCollection(id));
+    }
+  }, [id, dispatch]);
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.replace('#', '');
+      if (hash) {
+        setActiveTabKey(hash);
+      }
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
+  const handleTabSelect = (_event, tabKey) => {
+    setActiveTabKey(tabKey);
+    window.location.hash = tabKey;
+  };
+
+  const hostCountLabel = () => {
+    const total = hostCollection?.totalHosts || 0;
+    const max = hostCollection?.unlimitedHosts ? __('Unlimited') : hostCollection?.maxHosts;
+    return `${total}/${max}`;
+  };
+
+  return (
+    <div id="host-collection-details">
+      <Panel className="host-collection-details-header">
+        <div className="breadcrumb-bar-pf4">
+          <Breadcrumb ouiaId="host-collection-breadcrumbs">
+            <BreadcrumbItem to="/labs/host_collections">
+              {__('Host Collections')}
+            </BreadcrumbItem>
+            <BreadcrumbItem isActive>
+              {hostCollection?.name || '...'}
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </div>
+        <Grid hasGutter>
+          <GridItem span={8}>
+            <Flex
+              alignItems={{ default: 'alignItemsCenter' }}
+              spaceItems={{ default: 'spaceItemsSm' }}
+            >
+              <FlexItem>
+                <h2>{hostCollection?.name}</h2>
+              </FlexItem>
+              <FlexItem>
+                <Label color="blue">
+                  {hostCountLabel()}
+                </Label>
+              </FlexItem>
+            </Flex>
+          </GridItem>
+          <GridItem span={4}>
+            <Flex justifyContent={{ default: 'justifyContentFlexEnd' }}>
+              <FlexItem>
+                <Dropdown
+                  onSelect={() => setIsActionsOpen(false)}
+                  isOpen={isActionsOpen}
+                  toggle={
+                    <DropdownToggle
+                      onToggle={(_event, isOpen) => setIsActionsOpen(isOpen)}
+                      toggleIndicator={CaretDownIcon}
+                      ouiaId="host-collection-actions-dropdown"
+                    >
+                      {__('Actions')}
+                    </DropdownToggle>
+                  }
+                  dropdownItems={[
+                    <DropdownItem
+                      key="copy"
+                      onClick={() => {
+                        setIsCopyModalOpen(true);
+                        setIsActionsOpen(false);
+                      }}
+                      ouiaId="copy-action"
+                    >
+                      {__('Copy')}
+                    </DropdownItem>,
+                    <DropdownSeparator key="separator" ouiaId="actions-separator" />,
+                    <DropdownItem
+                      key="delete"
+                      onClick={() => {
+                        setIsDeleteModalOpen(true);
+                        setIsActionsOpen(false);
+                      }}
+                      ouiaId="delete-action"
+                    >
+                      {__('Delete')}
+                    </DropdownItem>,
+                  ]}
+                  ouiaId="host-collection-actions"
+                />
+              </FlexItem>
+            </Flex>
+          </GridItem>
+        </Grid>
+        <div className="host-collection-description">
+          {hostCollection?.description ?
+            <TextContent>
+              <Text component={TextVariants.p} ouiaId="host-collection-description">
+                {hostCollection.description}
+              </Text>
+            </TextContent> :
+            <InactiveText text={__('No description')} />
+          }
+        </div>
+      </Panel>
+
+      <PageSection className="host-collection-tabs-section">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={handleTabSelect}
+          ouiaId="host-collection-tabs"
+        >
+          <Tab
+            eventKey="details"
+            title={<TabTitleText>{__('Details')}</TabTitleText>}
+            ouiaId="details-tab"
+          >
+            <DetailsTab hostCollection={hostCollection} hostCollectionId={id} />
+          </Tab>
+          <Tab
+            eventKey="hosts"
+            title={<TabTitleText>{__('Hosts')}</TabTitleText>}
+            ouiaId="hosts-tab"
+          >
+            <HostsTab hostCollectionId={id} />
+          </Tab>
+        </Tabs>
+      </PageSection>
+
+      {/* Modals */}
+      {hostCollection?.name && (
+        <>
+          <CopyHostCollectionModal
+            isOpen={isCopyModalOpen}
+            onClose={() => setIsCopyModalOpen(false)}
+            hostCollection={{ id: parseInt(id, 10), name: hostCollection.name }}
+          />
+          <DeleteHostCollectionModal
+            isOpen={isDeleteModalOpen}
+            onClose={() => setIsDeleteModalOpen(false)}
+            hostCollection={{ id: parseInt(id, 10), name: hostCollection.name }}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default HostCollectionDetails;
diff --git a/webpack/scenes/HostCollections/Details/HostCollectionDetails.scss b/webpack/scenes/HostCollections/Details/HostCollectionDetails.scss
new file mode 100644
index 00000000000..4ee72f4b33b
--- /dev/null
+++ b/webpack/scenes/HostCollections/Details/HostCollectionDetails.scss
@@ -0,0 +1,24 @@
+#host-collection-details {
+  .host-collection-details-header {
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+
+    .breadcrumb-bar-pf4 {
+      margin-bottom: 1rem;
+    }
+
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin: 0;
+    }
+
+    .host-collection-description {
+      margin-top: 1rem;
+    }
+  }
+
+  .host-collection-tabs-section {
+    padding-top: 0;
+  }
+}
diff --git a/webpack/scenes/HostCollections/Details/HostCollectionDetailsActions.js b/webpack/scenes/HostCollections/Details/HostCollectionDetailsActions.js
new file mode 100644
index 00000000000..ec1e8b79311
--- /dev/null
+++ b/webpack/scenes/HostCollections/Details/HostCollectionDetailsActions.js
@@ -0,0 +1,40 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+import { get, put, API_OPERATIONS } from 'foremanReact/redux/API';
+import katelloApi from '../../../services/api/index';
+
+export const getHostCollection = id => get({
+  type: API_OPERATIONS.GET,
+  key: `HOST_COLLECTION_DETAILS_${id}`,
+  url: katelloApi.getApiUrl(`/host_collections/${id}`),
+});
+
+export const updateHostCollection = (id, params, handleSuccess) => put({
+  type: API_OPERATIONS.PUT,
+  key: `UPDATE_HOST_COLLECTION_${id}`,
+  url: katelloApi.getApiUrl(`/host_collections/${id}`),
+  params,
+  successToast: () => __('Host collection updated successfully'),
+  errorToast: error => error.response?.data?.error?.message || __('Failed to update host collection'),
+  handleSuccess,
+});
+
+export const addHostsToCollection = (id, hostIds, handleSuccess, handleError) => put({
+  type: API_OPERATIONS.PUT,
+  key: `ADD_HOSTS_TO_COLLECTION_${id}`,
+  url: katelloApi.getApiUrl(`/host_collections/${id}/add_hosts`),
+  params: { host_ids: hostIds },
+  successToast: () => __('Hosts added successfully'),
+  errorToast: error => error.response?.data?.error?.message || __('Failed to add hosts'),
+  handleSuccess,
+  handleError,
+});
+
+export const removeHostsFromCollection = (id, hostIds, handleSuccess) => put({
+  type: API_OPERATIONS.PUT,
+  key: `REMOVE_HOSTS_FROM_COLLECTION_${id}`,
+  url: katelloApi.getApiUrl(`/host_collections/${id}/remove_hosts`),
+  params: { host_ids: hostIds },
+  successToast: () => __('Hosts removed successfully'),
+  errorToast: error => error.response?.data?.error?.message || __('Failed to remove hosts'),
+  handleSuccess,
+});
diff --git a/webpack/scenes/HostCollections/Details/HostsTab/AddHostsModal.js b/webpack/scenes/HostCollections/Details/HostsTab/AddHostsModal.js
new file mode 100644
index 00000000000..b007e808a47
--- /dev/null
+++ b/webpack/scenes/HostCollections/Details/HostsTab/AddHostsModal.js
@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+import { useBulkSelect } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import {
+  Modal,
+  ModalVariant,
+  Button,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
+import SelectAllCheckbox from 'foremanReact/components/PF4/TableIndexPage/Table/SelectAllCheckbox';
+import { addHostsToCollection } from '../HostCollectionDetailsActions';
+
+const AddHostsModal = ({
+  isOpen, onClose, hostCollectionId, onHostsAdded,
+}) => {
+  const dispatch = useDispatch();
+  const [isAdding, setIsAdding] = useState(false);
+
+  const response = useSelector(state =>
+    selectAPIResponse(state, `HOST_COLLECTION_${hostCollectionId}_AVAILABLE_HOSTS`));
+  const { results = [], total = 0, per_page: perPage = 20, ...metadata } = response;
+
+  const {
+    selectOne,
+    isSelected,
+    selectedResults,
+    selectNone,
+    selectAll,
+    selectPage,
+    selectedCount,
+    areAllRowsOnPageSelected,
+    areAllRowsSelected,
+  } = useBulkSelect({
+    results,
+    metadata: { ...metadata, total, page: perPage },
+  });
+
+  const handleAddHosts = () => {
+    if (selectedCount === 0) return;
+
+    setIsAdding(true);
+    // Get selected host IDs - works for both individual selections and select-all mode
+    const hostIds = selectedResults.length > 0
+      ? selectedResults.map(host => host.id)
+      : results.filter(host => isSelected(host.id)).map(host => host.id);
+
+    dispatch(addHostsToCollection(
+      hostCollectionId,
+      hostIds,
+      () => {
+        setIsAdding(false);
+        selectNone();
+        if (onHostsAdded) onHostsAdded();
+      },
+      () => {
+        setIsAdding(false);
+      },
+    ));
+  };
+
+  const columns = {
+    name: {
+      title: __('Name'),
+      wrapper: ({ id, name }) => (
+        <a href={urlBuilder('hosts', '', id)}>{name}</a>
+      ),
+      isSorted: true,
+    },
+    lifecycle_environment: {
+      title: __('Lifecycle Environment'),
+      wrapper: ({ content_facet_attributes }) => (
+        content_facet_attributes?.lifecycle_environment?.name || ''
+      ),
+    },
+    content_view: {
+      title: __('Content View'),
+      wrapper: ({ content_facet_attributes }) => (
+        content_facet_attributes?.content_view?.name || ''
+      ),
+    },
+  };
+
+  const selectionToolbar = (
+    <ToolbarItem key="selectAll">
+      <SelectAllCheckbox
+        selectAll={selectAll}
+        selectPage={selectPage}
+        selectNone={selectNone}
+        selectedCount={selectedCount}
+        pageRowCount={results.length}
+        totalCount={total}
+        areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
+        areAllRowsSelected={areAllRowsSelected()}
+      />
+    </ToolbarItem>
+  );
+
+  const emptyContentTitle = __('No available hosts');
+  const emptyContentBody = __('All hosts are already in this collection, or there are no hosts in the organization.');
+  const emptySearchTitle = __('No matching hosts found');
+  const emptySearchBody = __('Try changing your search criteria.');
+
+  return (
+    <Modal
+      variant={ModalVariant.large}
+      title={__('Add Hosts to Host Collection')}
+      isOpen={isOpen}
+      onClose={onClose}
+      ouiaId="add-hosts-modal"
+      actions={[
+        <Button
+          key="add"
+          variant="primary"
+          onClick={handleAddHosts}
+          isDisabled={selectedCount === 0 || isAdding}
+          isLoading={isAdding}
+          ouiaId="add-hosts-submit-button"
+        >
+          {__('Add Selected')}
+        </Button>,
+        <Button
+          key="cancel"
+          variant="link"
+          onClick={onClose}
+          isDisabled={isAdding}
+          ouiaId="add-hosts-cancel-button"
+        >
+          {__('Cancel')}
+        </Button>,
+      ]}
+    >
+      <TableIndexPage
+        apiUrl="/api/hosts"
+        apiOptions={{
+          key: `HOST_COLLECTION_${hostCollectionId}_AVAILABLE_HOSTS`,
+          params: {
+            search: `NOT host_collection_id = ${hostCollectionId}`,
+          },
+        }}
+        header={__('Available Hosts')}
+        controller="hosts"
+        columns={columns}
+        selectionToolbar={selectionToolbar}
+        creatable={false}
+        showCheckboxes
+        selectOne={selectOne}
+        isSelected={isSelected}
+        emptyContentTitle={emptyContentTitle}
+        emptyContentBody={emptyContentBody}
+        emptySearchTitle={emptySearchTitle}
+        emptySearchBody={emptySearchBody}
+      />
+    </Modal>
+  );
+};
+
+AddHostsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  hostCollectionId: PropTypes.string.isRequired,
+  onHostsAdded: PropTypes.func,
+};
+
+AddHostsModal.defaultProps = {
+  onHostsAdded: null,
+};
+
+export default AddHostsModal;
diff --git a/webpack/scenes/HostCollections/Details/HostsTab/HostsTab.js b/webpack/scenes/HostCollections/Details/HostsTab/HostsTab.js
new file mode 100644
index 00000000000..fbdacceda5d
--- /dev/null
+++ b/webpack/scenes/HostCollections/Details/HostsTab/HostsTab.js
@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+import { useBulkSelect } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import { get } from 'foremanReact/redux/API';
+import {
+  Button,
+  Card,
+  CardBody,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
+import SelectAllCheckbox from 'foremanReact/components/PF4/TableIndexPage/Table/SelectAllCheckbox';
+import { removeHostsFromCollection, getHostCollection } from '../HostCollectionDetailsActions';
+import AddHostsModal from './AddHostsModal';
+
+const HostsTab = ({ hostCollectionId }) => {
+  const dispatch = useDispatch();
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+
+  const response = useSelector(state =>
+    selectAPIResponse(state, `HOST_COLLECTION_${hostCollectionId}_HOSTS`));
+  const { results = [], total = 0, per_page: perPage = 20, ...metadata } = response;
+
+  const {
+    selectOne,
+    isSelected,
+    selectedResults,
+    selectNone,
+    selectAll,
+    selectPage,
+    selectedCount,
+    areAllRowsOnPageSelected,
+    areAllRowsSelected,
+  } = useBulkSelect({
+    results,
+    metadata: { ...metadata, total, page: perPage },
+  });
+
+  const columns = {
+    name: {
+      title: __('Name'),
+      wrapper: ({ name }) => (
+        <a href={`/new/hosts/${name}#/Overview`}>{name}</a>
+      ),
+      isSorted: true,
+    },
+    lifecycle_environment: {
+      title: __('Lifecycle Environment'),
+      wrapper: ({ content_facet_attributes }) => (
+        content_facet_attributes?.lifecycle_environment?.name || ''
+      ),
+    },
+    content_view: {
+      title: __('Content View'),
+      wrapper: ({ content_facet_attributes }) => (
+        content_facet_attributes?.content_view?.name || ''
+      ),
+    },
+  };
+
+  // Restrict search to only hosts in this collection
+  const restrictedSearchQuery = (userSearch) => {
+    const filter = `host_collection_id=${hostCollectionId}`;
+    const trimmedSearch = userSearch?.trim() ?? '';
+    if (!!trimmedSearch && !trimmedSearch.includes(filter)) {
+      return `${filter} and ${trimmedSearch}`;
+    }
+    return filter;
+  };
+
+  const refreshHostsTable = () => {
+    dispatch(get({
+      key: `HOST_COLLECTION_${hostCollectionId}_HOSTS`,
+      url: '/api/hosts?include_permissions=true',
+      params: {
+        search: restrictedSearchQuery(''),
+      },
+    }));
+  };
+
+  const handleRemoveSelected = () => {
+    if (selectedCount === 0) return;
+
+    // Get selected host IDs - works for both individual selections and select-all mode
+    const hostIds = selectedResults.length > 0
+      ? selectedResults.map(host => host.id)
+      : results.filter(host => isSelected(host.id)).map(host => host.id);
+
+    dispatch(removeHostsFromCollection(hostCollectionId, hostIds, () => {
+      selectNone();
+      dispatch(getHostCollection(hostCollectionId));
+      refreshHostsTable();
+    }));
+  };
+
+  const selectionToolbar = (
+    <ToolbarItem key="selectAll">
+      <SelectAllCheckbox
+        selectAll={selectAll}
+        selectPage={selectPage}
+        selectNone={selectNone}
+        selectedCount={selectedCount}
+        pageRowCount={results.length}
+        totalCount={total}
+        areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
+        areAllRowsSelected={areAllRowsSelected()}
+      />
+    </ToolbarItem>
+  );
+
+  const customToolbarItems = (
+    <>
+      <Button
+        key="add-hosts"
+        variant="primary"
+        onClick={() => setIsAddModalOpen(true)}
+        ouiaId="add-hosts-button"
+        style={{ marginRight: '8px' }}
+      >
+        {__('Add Hosts')}
+      </Button>
+      <Button
+        key="remove-selected"
+        variant="secondary"
+        onClick={handleRemoveSelected}
+        isDisabled={selectedCount === 0}
+        ouiaId="remove-hosts-button"
+      >
+        {__('Remove Selected')}
+      </Button>
+    </>
+  );
+
+  const emptyContentTitle = __('No hosts yet');
+  const emptyContentBody = __('Add hosts to this host collection using the Add Hosts button.');
+  const emptySearchTitle = __('No matching hosts found');
+  const emptySearchBody = __('Try changing your search criteria.');
+
+  return (
+    <>
+      <Card ouiaId="host-collection-hosts-card">
+        <CardBody>
+          <TableIndexPage
+            apiUrl="/api/hosts"
+            apiOptions={{
+              key: `HOST_COLLECTION_${hostCollectionId}_HOSTS`,
+            }}
+            header={__('Hosts')}
+            controller="hosts"
+            columns={columns}
+            customToolbarItems={customToolbarItems}
+            selectionToolbar={selectionToolbar}
+            restrictedSearchQuery={restrictedSearchQuery}
+            creatable={false}
+            showCheckboxes
+            selectOne={selectOne}
+            isSelected={isSelected}
+            emptyContentTitle={emptyContentTitle}
+            emptyContentBody={emptyContentBody}
+            emptySearchTitle={emptySearchTitle}
+            emptySearchBody={emptySearchBody}
+          />
+        </CardBody>
+      </Card>
+      <AddHostsModal
+        isOpen={isAddModalOpen}
+        onClose={() => setIsAddModalOpen(false)}
+        hostCollectionId={hostCollectionId}
+        onHostsAdded={() => {
+          setIsAddModalOpen(false);
+          dispatch(getHostCollection(hostCollectionId));
+          refreshHostsTable();
+        }}
+      />
+    </>
+  );
+};
+
+HostsTab.propTypes = {
+  hostCollectionId: PropTypes.string.isRequired,
+};
+
+export default HostsTab;
diff --git a/webpack/scenes/HostCollections/Details/index.js b/webpack/scenes/HostCollections/Details/index.js
new file mode 100644
index 00000000000..c0d189e9566
--- /dev/null
+++ b/webpack/scenes/HostCollections/Details/index.js
@@ -0,0 +1 @@
+export { default } from './HostCollectionDetails';
diff --git a/webpack/scenes/HostCollections/HostCollectionsActions.js b/webpack/scenes/HostCollections/HostCollectionsActions.js
new file mode 100644
index 00000000000..7e90ea466ed
--- /dev/null
+++ b/webpack/scenes/HostCollections/HostCollectionsActions.js
@@ -0,0 +1,55 @@
+import { API_OPERATIONS } from './HostCollectionsConstants';
+import api from '../../services/api';
+import { apiError, apiSuccess } from '../../utils/helpers';
+
+const baseApiUrl = '/host_collections';
+
+export const createHostCollection =
+  (params, handleSuccess, handleError) => async (dispatch) => {
+    try {
+      const { data } = await api.post(baseApiUrl, params);
+      dispatch(apiSuccess(API_OPERATIONS.CREATE, data));
+      if (handleSuccess) handleSuccess(data);
+      return data;
+    } catch (error) {
+      dispatch(apiError(API_OPERATIONS.CREATE, error));
+      if (handleError) handleError(error);
+      throw error;
+    }
+  };
+
+export const copyHostCollection =
+  (id, newName, handleSuccess, handleError) => async (dispatch) => {
+    try {
+      const { data } = await api.post(`${baseApiUrl}/${id}/copy`, {
+        host_collection: { name: newName },
+      });
+      dispatch(apiSuccess(API_OPERATIONS.COPY, data));
+      if (handleSuccess) handleSuccess(data);
+      return data;
+    } catch (error) {
+      dispatch(apiError(API_OPERATIONS.COPY, error));
+      if (handleError) handleError(error);
+      throw error;
+    }
+  };
+
+export const deleteHostCollection =
+  (id, handleSuccess, handleError) => async (dispatch) => {
+    try {
+      const { data } = await api.delete(`${baseApiUrl}/${id}`);
+      dispatch(apiSuccess(API_OPERATIONS.DELETE, data));
+      if (handleSuccess) handleSuccess(data);
+      return data;
+    } catch (error) {
+      dispatch(apiError(API_OPERATIONS.DELETE, error));
+      if (handleError) handleError(error);
+      throw error;
+    }
+  };
+
+export default {
+  createHostCollection,
+  copyHostCollection,
+  deleteHostCollection,
+};
diff --git a/webpack/scenes/HostCollections/HostCollectionsConstants.js b/webpack/scenes/HostCollections/HostCollectionsConstants.js
new file mode 100644
index 00000000000..cfeab272a78
--- /dev/null
+++ b/webpack/scenes/HostCollections/HostCollectionsConstants.js
@@ -0,0 +1,11 @@
+export const HOST_COLLECTIONS_KEY = 'HOST_COLLECTIONS';
+
+export const HOST_COLLECTIONS_CREATE = 'HOST_COLLECTIONS_CREATE';
+export const HOST_COLLECTIONS_COPY = 'HOST_COLLECTIONS_COPY';
+export const HOST_COLLECTIONS_DELETE = 'HOST_COLLECTIONS_DELETE';
+
+export const API_OPERATIONS = {
+  CREATE: 'create',
+  COPY: 'copy',
+  DELETE: 'delete',
+};
diff --git a/webpack/scenes/HostCollections/HostCollectionsPage.js b/webpack/scenes/HostCollections/HostCollectionsPage.js
new file mode 100644
index 00000000000..2f02efa2dbb
--- /dev/null
+++ b/webpack/scenes/HostCollections/HostCollectionsPage.js
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
+import { HOST_COLLECTIONS_KEY } from './HostCollectionsConstants';
+import CreateHostCollectionModal from './Create/CreateHostCollectionModal';
+import CopyHostCollectionModal from './Copy/CopyHostCollectionModal';
+import DeleteHostCollectionModal from './Delete/DeleteHostCollectionModal';
+
+const HostCollectionsPage = () => {
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [copyModalOpen, setCopyModalOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [selectedHostCollection, setSelectedHostCollection] = useState(null);
+
+  const handleCopy = (hostCollection) => {
+    setSelectedHostCollection(hostCollection);
+    setCopyModalOpen(true);
+  };
+
+  const handleDelete = (hostCollection) => {
+    setSelectedHostCollection(hostCollection);
+    setDeleteModalOpen(true);
+  };
+
+  const columns = {
+    name: {
+      title: __('Name'),
+      wrapper: ({ id, name }) => (
+        <a href={`/labs/host_collections/${id}`}>{name}</a>
+      ),
+      isSorted: true,
+    },
+    total_hosts: {
+      title: __('Content Hosts'),
+      wrapper: ({ id, total_hosts: totalHosts }) => (
+        <a href={`/labs/host_collections/${id}#hosts`}>{totalHosts || 0}</a>
+      ),
+    },
+    max_hosts: {
+      title: __('Limit'),
+      wrapper: ({ max_hosts: maxHosts, unlimited_hosts: unlimitedHosts }) =>
+        (unlimitedHosts ? __('Unlimited') : maxHosts || 0),
+    },
+  };
+
+  const customActionButtons = [
+    {
+      title: __('Create host collection'),
+      action: { onClick: () => setCreateModalOpen(true) },
+    },
+  ];
+
+  const rowKebabItems = (hostCollection) => {
+    const { id, name, permissions = {} } = hostCollection;
+    const actions = [];
+
+    if (permissions.edit_host_collections) {
+      actions.push({
+        title: __('Copy'),
+        onClick: () => handleCopy({ id, name }),
+      });
+    }
+
+    if (permissions.destroy_host_collections) {
+      actions.push({
+        title: __('Delete'),
+        onClick: () => handleDelete({ id, name }),
+      });
+    }
+
+    return actions;
+  };
+
+  return (
+    <>
+      <TableIndexPage
+        apiUrl="/katello/api/host_collections"
+        apiOptions={{ key: HOST_COLLECTIONS_KEY }}
+        header={__('Host collections')}
+        controller="host_collections"
+        columns={columns}
+        customActionButtons={customActionButtons}
+        rowKebabItems={rowKebabItems}
+      />
+      <CreateHostCollectionModal
+        isOpen={createModalOpen}
+        onClose={() => setCreateModalOpen(false)}
+      />
+      {selectedHostCollection && (
+        <>
+          <CopyHostCollectionModal
+            isOpen={copyModalOpen}
+            onClose={() => {
+              setCopyModalOpen(false);
+              setSelectedHostCollection(null);
+            }}
+            hostCollection={selectedHostCollection}
+          />
+          <DeleteHostCollectionModal
+            isOpen={deleteModalOpen}
+            onClose={() => {
+              setDeleteModalOpen(false);
+              setSelectedHostCollection(null);
+            }}
+            hostCollection={selectedHostCollection}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default HostCollectionsPage;
diff --git a/webpack/scenes/HostCollections/HostCollectionsReducer.js b/webpack/scenes/HostCollections/HostCollectionsReducer.js
new file mode 100644
index 00000000000..36583591484
--- /dev/null
+++ b/webpack/scenes/HostCollections/HostCollectionsReducer.js
@@ -0,0 +1,10 @@
+import Immutable from 'seamless-immutable';
+
+const initialState = Immutable({});
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+  default:
+    return state;
+  }
+};
diff --git a/webpack/scenes/HostCollections/HostCollectionsSelectors.js b/webpack/scenes/HostCollections/HostCollectionsSelectors.js
new file mode 100644
index 00000000000..848d65822c6
--- /dev/null
+++ b/webpack/scenes/HostCollections/HostCollectionsSelectors.js
@@ -0,0 +1,6 @@
+import { HOST_COLLECTIONS_KEY } from './HostCollectionsConstants';
+
+export const selectHostCollections = state =>
+  state[HOST_COLLECTIONS_KEY] || {};
+
+export default selectHostCollections;
diff --git a/webpack/scenes/HostCollections/__tests__/HostCollectionsPage.test.js b/webpack/scenes/HostCollections/__tests__/HostCollectionsPage.test.js
new file mode 100644
index 00000000000..1cfea9a5d57
--- /dev/null
+++ b/webpack/scenes/HostCollections/__tests__/HostCollectionsPage.test.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import { HOST_COLLECTIONS_KEY } from '../HostCollectionsConstants';
+import HostCollectionsPage from '../HostCollectionsPage';
+import api from '../../../services/api';
+import {
+  nockInstance,
+  assertNockRequest,
+} from '../../../test-utils/nockWrapper';
+import hostCollectionsData from './hostCollectionsList.fixtures.json';
+
+const hostCollectionsPath = api.getApiUrl('/host_collections');
+const autocompleteUrl = '/host_collections/auto_complete_search';
+const renderOptions = { apiNamespace: HOST_COLLECTIONS_KEY };
+
+let firstCollection;
+beforeEach(() => {
+  const { results } = hostCollectionsData;
+  [firstCollection] = results;
+});
+
+test('Can call API for Host Collections and show on screen on page load', async () => {
+  const autocompleteScope = nockInstance
+    .get(autocompleteUrl)
+    .query(true)
+    .reply(200, []);
+
+  const scope = nockInstance
+    .get(hostCollectionsPath)
+    .query(true)
+    .reply(200, hostCollectionsData);
+
+  const { queryByText } = renderWithRedux(
+    <HostCollectionsPage />,
+    renderOptions,
+  );
+
+  expect(queryByText(firstCollection.name)).toBeNull();
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(firstCollection.name)).toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+});
+
+test('Displays empty state when no host collections exist', async () => {
+  const autocompleteScope = nockInstance
+    .get(autocompleteUrl)
+    .query(true)
+    .reply(200, []);
+
+  const emptyCollectionsScope = nockInstance
+    .get(hostCollectionsPath)
+    .query(true)
+    .reply(200, {
+      total: 0,
+      subtotal: 0,
+      page: 1,
+      per_page: 20,
+      results: [],
+    });
+
+  const { queryByText } = renderWithRedux(
+    <HostCollectionsPage />,
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(/no results/i)).toBeInTheDocument();
+  });
+
+  assertNockRequest(emptyCollectionsScope);
+  assertNockRequest(autocompleteScope);
+});
+
+test('Displays content host count and limit correctly', async () => {
+  const autocompleteScope = nockInstance
+    .get(autocompleteUrl)
+    .query(true)
+    .reply(200, []);
+
+  const scope = nockInstance
+    .get(hostCollectionsPath)
+    .query(true)
+    .reply(200, hostCollectionsData);
+
+  const { queryByText } = renderWithRedux(
+    <HostCollectionsPage />,
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    expect(queryByText('15')).toBeInTheDocument();
+    expect(queryByText('Unlimited')).toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+});
diff --git a/webpack/scenes/HostCollections/__tests__/hostCollectionsList.fixtures.json b/webpack/scenes/HostCollections/__tests__/hostCollectionsList.fixtures.json
new file mode 100644
index 00000000000..1b852e195e8
--- /dev/null
+++ b/webpack/scenes/HostCollections/__tests__/hostCollectionsList.fixtures.json
@@ -0,0 +1,47 @@
+{
+  "total": 3,
+  "subtotal": 3,
+  "page": 1,
+  "per_page": 20,
+  "results": [
+    {
+      "id": 1,
+      "name": "Production Servers",
+      "description": "All production servers",
+      "max_hosts": null,
+      "unlimited_hosts": true,
+      "total_hosts": 15,
+      "permissions": {
+        "view_host_collections": true,
+        "edit_host_collections": true,
+        "destroy_host_collections": true
+      }
+    },
+    {
+      "id": 2,
+      "name": "Development Servers",
+      "description": "Development environment servers",
+      "max_hosts": 10,
+      "unlimited_hosts": false,
+      "total_hosts": 7,
+      "permissions": {
+        "view_host_collections": true,
+        "edit_host_collections": true,
+        "destroy_host_collections": true
+      }
+    },
+    {
+      "id": 3,
+      "name": "Test Servers",
+      "description": "",
+      "max_hosts": 5,
+      "unlimited_hosts": false,
+      "total_hosts": 3,
+      "permissions": {
+        "view_host_collections": true,
+        "edit_host_collections": false,
+        "destroy_host_collections": false
+      }
+    }
+  ]
+}
diff --git a/webpack/scenes/HostCollections/index.js b/webpack/scenes/HostCollections/index.js
new file mode 100644
index 00000000000..b2c2c66203e
--- /dev/null
+++ b/webpack/scenes/HostCollections/index.js
@@ -0,0 +1 @@
+export { default } from './HostCollectionsPage';