diff --git a/webpack/components/Table/MainTable.scss b/webpack/components/Table/MainTable.scss
index 975cb580406..0e50665027c 100644
--- a/webpack/components/Table/MainTable.scss
+++ b/webpack/components/Table/MainTable.scss
@@ -1,21 +1,22 @@
-.pf-c-dropdown.pf-m-align-right {
-  width: 100%;
-  justify-content: flex-end;
-  display: flex;
-}
+.katello-pf4-table {
+  .pf-c-dropdown.pf-m-align-right {
+    width: 100%;
+    justify-content: flex-end;
+    display: flex;
+  }
 
-.pf-c-dropdown__menu {
-  min-width: 0;
-}
+  .pf-c-dropdown__menu {
+    min-width: 0;
+  }
+  .pf-c-wizard__footer {
+    z-index: 1;
+  }
 
-.pf-c-wizard__footer {
-  z-index: 1;
-}
-
-.pf-c-table tbody tr td {
-  vertical-align: inherit;
-}
+  .pf-c-table tbody tr td {
+    vertical-align: inherit;
+  }
 
-input[type="checkbox"][disabled] {
-  cursor: initial;
+  input[type='checkbox'][disabled] {
+    cursor: initial;
+  }
 }
diff --git a/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss b/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss
index cfae9d9b296..de74ab1e058 100644
--- a/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss
+++ b/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss
@@ -1,8 +1,10 @@
-.pf-c-empty-state {
-  margin-top: 0;
+#errata-card {
+  .pf-c-empty-state {
+    margin-top: 0;
+  }
+  .piechart-overflow {
+    margin-right: -20px;
+    position: relative;
+    left: -30px;
+  }
 }
-.piechart-overflow {
-  margin-right: -20px;
-  position: relative;
-  left: -30px;
-}
\ No newline at end of file
diff --git a/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.js b/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.js
index 2428033276d..5ebe584220d 100644
--- a/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.js
+++ b/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.js
@@ -51,7 +51,7 @@ const ActivationKeyDetails = ({ match }) => {
   };
 
   return (
-    <div >
+    <div id="ak-details-katello" >
       <Panel className="ak-details-header">
         <div className="breadcrumb-bar-pf4">
           <Breadcrumb ouiaId="ak-breadcrumbs" className="breadcrumb-display">
diff --git a/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.scss b/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.scss
index fb6d280ec49..58d8964c629 100644
--- a/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.scss
+++ b/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.scss
@@ -1,37 +1,39 @@
-.ak-details-header {
-  margin: 0 24px 16px;
-  padding-top: 16px;
-}
+#ak-details-katello {
+  .ak-details-header {
+    margin: 0 24px 16px;
+    padding-top: 16px;
+  }
 
-.ak-details-description {
-  padding-top: 16px;
-}
+  .ak-details-description {
+    padding-top: 16px;
+  }
 
-.breadcrumb-bar-pf4 {
-  margin: 0 0 16px;
-}
+  .breadcrumb-bar-pf4 {
+    margin: 0 0 16px;
+  }
 
-.breadcrumb-display {
-  display: block;
-}
+  .breadcrumb-display {
+    display: block;
+  }
 
-.breadcrumb-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
+  .breadcrumb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
 
-.ak-name-truncate {
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  display: inline-block;
-  margin-right: 16px
-}
+  .ak-name-truncate {
+    text-overflow: ellipsis;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    margin-right: 16px;
+  }
 
-.ak-name-wrapper {
-  display: inline-flex;
-  max-width: 60%;
-  margin-right: 8px;
-}
\ No newline at end of file
+  .ak-name-wrapper {
+    display: inline-flex;
+    max-width: 60%;
+    margin-right: 8px;
+  }
+}
diff --git a/webpack/scenes/ContentViews/Create/CreateContentViewForm.js b/webpack/scenes/ContentViews/Create/CreateContentViewForm.js
index 686e9bd9139..62b594b160c 100644
--- a/webpack/scenes/ContentViews/Create/CreateContentViewForm.js
+++ b/webpack/scenes/ContentViews/Create/CreateContentViewForm.js
@@ -76,10 +76,12 @@ const CreateContentViewForm = ({ setModalOpen }) => {
   const submitDisabled = !name?.length || !label?.length || saving || redirect || labelValidated === 'error';
 
   return (
-    <Form onSubmit={(e) => {
-      e.preventDefault();
-      onSave();
-    }}
+    <Form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSave();
+      }}
+      id="create-content-view-form"
     >
       <FormGroup label={__('Name')} isRequired fieldId="name">
         <TextInput
diff --git a/webpack/scenes/ContentViews/Create/CreateContentViewForm.scss b/webpack/scenes/ContentViews/Create/CreateContentViewForm.scss
index 4ce6441138c..22bbc8366fc 100644
--- a/webpack/scenes/ContentViews/Create/CreateContentViewForm.scss
+++ b/webpack/scenes/ContentViews/Create/CreateContentViewForm.scss
@@ -1,7 +1,9 @@
-.pf-c-tile__title {
-  font-size: 16px;
-}
+#create-content-view-form {
+  .pf-c-tile__title {
+    font-size: 16px;
+  }
 
-.pf-c-tile__icon {
-  min-height: 38px;
-}
\ No newline at end of file
+  .pf-c-tile__icon {
+    min-height: 38px;
+  }
+}
diff --git a/webpack/scenes/ContentViews/Delete/ContentViewDeleteWizard.js b/webpack/scenes/ContentViews/Delete/ContentViewDeleteWizard.js
index d72100caf25..e97998ebe93 100644
--- a/webpack/scenes/ContentViews/Delete/ContentViewDeleteWizard.js
+++ b/webpack/scenes/ContentViews/Delete/ContentViewDeleteWizard.js
@@ -151,6 +151,7 @@ const ContentViewDeleteWizard =
             setIsOpen(false);
           }}
           isOpen={show}
+          id="content-view-delete-wizard"
         />
       </CVDeleteContext.Provider>
     );
diff --git a/webpack/scenes/ContentViews/Delete/Steps/CVEnvironmentSelectionForm.scss b/webpack/scenes/ContentViews/Delete/Steps/CVEnvironmentSelectionForm.scss
index 101af4d74a8..85f6f119c32 100644
--- a/webpack/scenes/ContentViews/Delete/Steps/CVEnvironmentSelectionForm.scss
+++ b/webpack/scenes/ContentViews/Delete/Steps/CVEnvironmentSelectionForm.scss
@@ -1,4 +1,6 @@
-.pf-c-expandable-section__content {
+#content-view-delete-wizard {
+  .pf-c-expandable-section__content {
     margin-bottom: 1em;
     margin-top: 1em;
-}
\ No newline at end of file
+  }
+}
diff --git a/webpack/scenes/ContentViews/Details/ComponentContentViews/ContentViewComponents.js b/webpack/scenes/ContentViews/Details/ComponentContentViews/ContentViewComponents.js
index a57c9f4127e..45a3c4bb7a5 100644
--- a/webpack/scenes/ContentViews/Details/ComponentContentViews/ContentViewComponents.js
+++ b/webpack/scenes/ContentViews/Details/ComponentContentViews/ContentViewComponents.js
@@ -156,7 +156,7 @@ const ContentViewComponents = ({ cvId, details }) => {
                 <SplitItem>
                   <Button
                     ouiaId={`edit-component-version-${componentCvId}`}
-                    className="foreman-edit-icon"
+                    className="katello-edit-icon foreman-edit-icon"
                     aria-label="edit_version"
                     variant="plain"
                     onClick={() => {
diff --git a/webpack/scenes/ContentViews/Publish/PublishContentViewWizard.js b/webpack/scenes/ContentViews/Publish/PublishContentViewWizard.js
index b2524416b41..cc56b9bd56b 100644
--- a/webpack/scenes/ContentViews/Publish/PublishContentViewWizard.js
+++ b/webpack/scenes/ContentViews/Publish/PublishContentViewWizard.js
@@ -122,6 +122,7 @@ const PublishContentViewWizard = ({
         } else onClose();
       }}
       isOpen={show}
+      id="content-view-publish-wizard"
     />
   );
 };
diff --git a/webpack/scenes/ContentViews/Publish/cvPublishForm.scss b/webpack/scenes/ContentViews/Publish/cvPublishForm.scss
index 768f70c640e..29b15420121 100644
--- a/webpack/scenes/ContentViews/Publish/cvPublishForm.scss
+++ b/webpack/scenes/ContentViews/Publish/cvPublishForm.scss
@@ -1,13 +1,15 @@
-.pf-c-switch {
-  --pf-c-switch__input--focus__toggle--OutlineWidth: 0;
-}
+#content-view-publish-wizard {
+  .pf-c-switch {
+    --pf-c-switch__input--focus__toggle--OutlineWidth: 0;
+  }
 
-.pf-c-wizard__main-body {
-  display: flex;
-  grid-gap: 16px;
-  flex-direction: column;
-}
+  .pf-c-wizard__main-body {
+    display: flex;
+    grid-gap: 16px;
+    flex-direction: column;
+  }
 
-.pf-c-content h4 {
-  margin-top: 0px;
-}
\ No newline at end of file
+  .pf-c-content h4 {
+    margin-top: 0px;
+  }
+}
diff --git a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js
index 09306bcd920..fd9ad41cdf2 100644
--- a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js
+++ b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js
@@ -58,7 +58,7 @@ class SubscriptionDetails extends Component {
     }
 
     return (
-      <div>
+      <div id="subscription-details">
         {!subscriptionDetails.loading &&
           <BreadcrumbsBar
             onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
diff --git a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss
index 9dce282cda4..6462349dc78 100644
--- a/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss
+++ b/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss
@@ -1,9 +1,11 @@
-.scrolld-list {
-  max-height: 400px;
-  overflow-y: auto; 
-}
+#subscription-details {
+  .scrolld-list {
+    max-height: 400px;
+    overflow-y: auto;
+  }
 
-.list-view-pf-expand {
-  max-height: 20px;
-  padding: 0;
+  .list-view-pf-expand {
+    max-height: 20px;
+    padding: 0;
+  }
 }
diff --git a/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap b/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap
index 7894abbd359..99087bf578d 100644
--- a/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap
+++ b/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`subscriptions details page should render and contain appropiate components 1`] = `
-<div>
+<div
+  id="subscription-details"
+>
   <BreadcrumbsBar
     data={
       Object {
diff --git a/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/CdnConfigurationForm.scss b/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/CdnConfigurationForm.scss
index a013eb2dd88..746cad2d286 100644
--- a/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/CdnConfigurationForm.scss
+++ b/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/CdnConfigurationForm.scss
@@ -1,3 +1,5 @@
-.pf-c-form__group.pf-m-action {
-  margin-top: 0px;
+#cdn-configuration {
+  .pf-c-form__group.pf-m-action {
+    margin-top: 0px;
+  }
 }
diff --git a/webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss b/webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss
index f5752d6ff7e..12035fd75ca 100644
--- a/webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss
+++ b/webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss
@@ -1,27 +1,46 @@
-.form-horizontal {
-  padding-left: 40px;
-  padding-right: 20px;
-}
+#manifest-history-tabs {
+  .form-horizontal {
+    padding-left: 40px;
+    padding-right: 20px;
+  }
 
-form .row {
-  margin-left: -15px;
-}
+  form .row {
+    margin-left: -15px;
+  }
 
-span.pficon.pficon-info {
-  margin: 0 5px 0 5px;
-}
+  span.pficon.pficon-info {
+    margin: 0 5px 0 5px;
+  }
 
-#simple-content-access {
-  padding-bottom: 40px;
+  #simple-content-access {
+    padding-bottom: 40px;
 
-  .sca-label {
-    float: left;
-    text-align: left;
+    .sca-label {
+      float: left;
+      text-align: left;
+    }
   }
-}
 
-.manifest-actions {
-  .spinner {
-    margin: 5px 15px 12px 5px;
+  .manifest-actions {
+    .spinner {
+      margin: 5px 15px 12px 5px;
+    }
+  }
+  .manifest-actions > * {
+    margin: 10px 5px 0 0 ;
+  }
+  
+  #manifest-actions-row {
+    display: flex;
+    flex-direction: row;
+    & > * {
+      margin-right: 8px;
+    }
+  }
+  
+  .modal-body {
+    overflow-y: auto;
+    overflow-x: hidden;
   }
+  
 }
diff --git a/webpack/scenes/Subscriptions/Manifest/Manifest.scss b/webpack/scenes/Subscriptions/Manifest/Manifest.scss
deleted file mode 100644
index a782fd583ab..00000000000
--- a/webpack/scenes/Subscriptions/Manifest/Manifest.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.manifest-actions > * {
-  margin: 10px 5px 0 0 ;
-}
-
-#manifest-actions-row {
-  display: flex;
-  flex-direction: row;
-  & > * {
-    margin-right: 8px;
-  }
-}
-
-.modal-body {
-  overflow-y: auto;
-  overflow-x: hidden;
-}
diff --git a/webpack/scenes/Subscriptions/Manifest/index.js b/webpack/scenes/Subscriptions/Manifest/index.js
index 3280610d218..4852c3222e3 100644
--- a/webpack/scenes/Subscriptions/Manifest/index.js
+++ b/webpack/scenes/Subscriptions/Manifest/index.js
@@ -17,8 +17,6 @@ import { selectContentCredentials } from '../../ContentCredentials/ContentCreden
 
 import ManifestModal from './ManageManifestModal';
 
-import './Manifest.scss';
-
 // map state to props
 const mapStateToProps = state => ({
   organization: state.katello.organization,
diff --git a/webpack/scenes/Subscriptions/SubscriptionsPage.js b/webpack/scenes/Subscriptions/SubscriptionsPage.js
index e6b4a0af345..5bc11aab68f 100644
--- a/webpack/scenes/Subscriptions/SubscriptionsPage.js
+++ b/webpack/scenes/Subscriptions/SubscriptionsPage.js
@@ -236,7 +236,7 @@ class SubscriptionsPage extends Component {
       </Alert>
     );
     return (
-      <Grid bsClass="container-fluid">
+      <Grid bsClass="container-fluid" id="subscriptions-page">
         <Row>
           <Col sm={12}>
             <h1>{__('Subscriptions')}</h1>
diff --git a/webpack/scenes/Subscriptions/SubscriptionsPage.scss b/webpack/scenes/Subscriptions/SubscriptionsPage.scss
index cefe189fbcb..78a208a9bc8 100644
--- a/webpack/scenes/Subscriptions/SubscriptionsPage.scss
+++ b/webpack/scenes/Subscriptions/SubscriptionsPage.scss
@@ -1,50 +1,52 @@
-@import "~@theforeman/vendor/scss/variables";
+@import '~@theforeman/vendor/scss/variables';
 
-.editable {
-  &.changed {
-    font-weight: bold;
+#subscriptions-page {
+  .editable {
+    &.changed {
+      font-weight: bold;
+    }
   }
-}
 
-.pf-table-inline-edit {
-  tbody {
-    .form-group {
-      margin-bottom: 0;
-    }
+  .pf-table-inline-edit {
+    tbody {
+      .form-group {
+        margin-bottom: 0;
+      }
 
-    tr.open-grouped-row {
-      background-color: $table-bg-hover;
-      td {
-        border-bottom-color: $table-border-hover;
+      tr.open-grouped-row {
+        background-color: $table-bg-hover;
+        td {
+          border-bottom-color: $table-border-hover;
+        }
       }
     }
-  }
 
-  .table-view-pf-select {
-    width: 50px;
+    .table-view-pf-select {
+      width: 50px;
 
-    .collapse-subscription-group-button {
-      margin-top: 4px;
-      cursor: pointer;
-      float: left;
-      font-weight: bold;
-    }
+      .collapse-subscription-group-button {
+        margin-top: 4px;
+        cursor: pointer;
+        float: left;
+        font-weight: bold;
+      }
 
-    input[type="checkbox"] {
-      float: right;
+      input[type='checkbox'] {
+        float: right;
+      }
     }
   }
-}
 
-.option-tooltip-container {
-  display: inline-block;
-  margin-left: 10px;
-  margin-top: 3px;
-  width: 10px;
-}
+  .option-tooltip-container {
+    display: inline-block;
+    margin-left: 10px;
+    margin-top: 3px;
+    width: 10px;
+  }
 
-span.fa.fa-minus::before {
-  content: "\2014";
-  color: gray;
-  font-size: 1em;
+  span.fa.fa-minus::before {
+    content: '\2014';
+    color: gray;
+    font-size: 1em;
+  }
 }
diff --git a/webpack/scenes/Subscriptions/__tests__/__snapshots__/SubscriptionsPage.test.js.snap b/webpack/scenes/Subscriptions/__tests__/__snapshots__/SubscriptionsPage.test.js.snap
index 0b822f8370c..4881682c79a 100644
--- a/webpack/scenes/Subscriptions/__tests__/__snapshots__/SubscriptionsPage.test.js.snap
+++ b/webpack/scenes/Subscriptions/__tests__/__snapshots__/SubscriptionsPage.test.js.snap
@@ -15,6 +15,7 @@ exports[`subscriptions page should render 1`] = `
   bsClass="container-fluid"
   componentClass="div"
   fluid={false}
+  id="subscriptions-page"
 >
   <Row
     bsClass="row"