diff --git a/awx/ui_next/src/components/Card/CardBody.jsx b/awx/ui_next/src/components/Card/CardBody.jsx
deleted file mode 100644
index 43120cd17d..0000000000
--- a/awx/ui_next/src/components/Card/CardBody.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-import { CardBody as PFCardBody } from '@patternfly/react-core';
-
-const CardBody = styled(PFCardBody)`
-  padding-top: 20px;
-`;
-PFCardBody.displayName = 'PFCardBody';
-
-export default CardBody;
diff --git a/awx/ui_next/src/components/Card/TabbedCardHeader.js b/awx/ui_next/src/components/Card/TabbedCardHeader.js
index 0a86d11a59..3878449307 100644
--- a/awx/ui_next/src/components/Card/TabbedCardHeader.js
+++ b/awx/ui_next/src/components/Card/TabbedCardHeader.js
@@ -5,6 +5,7 @@ const TabbedCardHeader = styled(CardHeader)`
   --pf-c-card--first-child--PaddingTop: 0;
   --pf-c-card--child--PaddingLeft: 0;
   --pf-c-card--child--PaddingRight: 0;
+  --pf-c-card__header--not-last-child--PaddingBottom: 24px;
   position: relative;
 `;
 
diff --git a/awx/ui_next/src/components/Card/index.js b/awx/ui_next/src/components/Card/index.js
index 617e65871f..6d197d5600 100644
--- a/awx/ui_next/src/components/Card/index.js
+++ b/awx/ui_next/src/components/Card/index.js
@@ -1,2 +1 @@
-export { default as CardBody } from './CardBody';
 export { default as TabbedCardHeader } from './TabbedCardHeader';
diff --git a/awx/ui_next/src/screens/Host/Host.jsx b/awx/ui_next/src/screens/Host/Host.jsx
index 20cd4aad0c..0601e661a8 100644
--- a/awx/ui_next/src/screens/Host/Host.jsx
+++ b/awx/ui_next/src/screens/Host/Host.jsx
@@ -2,12 +2,8 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
-import {
-  Card,
-  CardHeader as PFCardHeader,
-  PageSection,
-} from '@patternfly/react-core';
-import styled from 'styled-components';
+import { Card, PageSection } from '@patternfly/react-core';
+import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
@@ -18,13 +14,6 @@ import HostGroups from './HostGroups';
 import HostCompletedJobs from './HostCompletedJobs';
 import { HostsAPI } from '@api';
 
-const CardHeader = styled(PFCardHeader)`
-  --pf-c-card--first-child--PaddingTop: 0;
-  --pf-c-card--child--PaddingLeft: 0;
-  --pf-c-card--child--PaddingRight: 0;
-  position: relative;
-`;
-
 class Host extends Component {
   constructor(props) {
     super(props);
@@ -89,7 +78,7 @@ class Host extends Component {
     ];
 
     let cardHeader = (
-      <CardHeader style={{ padding: 0 }}>
+      <TabbedCardHeader>
         <RoutedTabs
           match={match}
           history={history}
@@ -97,7 +86,7 @@ class Host extends Component {
           tabsArray={tabsArray}
         />
         <CardCloseButton linkTo="/hosts" />
-      </CardHeader>
+      </TabbedCardHeader>
     );
 
     if (!isInitialized) {
diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
index 479d28211f..e9e18c3c4f 100644
--- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
+++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
@@ -46,7 +46,7 @@ function HostDetail({ host, i18n }) {
   }
 
   return (
-    <CardBody css="padding-top: 20px">
+    <CardBody>
       <DetailList gutter="sm">
         <Detail label={i18n._(t`Name`)} value={name} />
         <Detail label={i18n._(t`Description`)} value={description} />
diff --git a/awx/ui_next/src/screens/Inventory/Inventory.jsx b/awx/ui_next/src/screens/Inventory/Inventory.jsx
index 03fd08d3fe..e632610660 100644
--- a/awx/ui_next/src/screens/Inventory/Inventory.jsx
+++ b/awx/ui_next/src/screens/Inventory/Inventory.jsx
@@ -52,7 +52,7 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
   ];
 
   let cardHeader = hasContentLoading ? null : (
-    <TabbedCardHeader style={{ padding: 0 }}>
+    <TabbedCardHeader>
       <RoutedTabs history={history} tabsArray={tabsArray} />
       <CardCloseButton linkTo="/inventories" />
     </TabbedCardHeader>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
index 60ccec382f..dffff1881c 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { CardBody } from '@components/Card';
+import { CardBody } from '@patternfly/react-core';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
 import { ChipGroup, Chip } from '@components/Chip';
 import { VariablesDetail } from '@components/CodeMirrorInput';
diff --git a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
index 2acd518b2c..7328f79361 100644
--- a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
+++ b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, CardHeader, PageSection } from '@patternfly/react-core';
+import { Card, PageSection } from '@patternfly/react-core';
 import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
+import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
 import RoutedTabs from '@components/RoutedTabs';
@@ -74,10 +75,10 @@ class SmartInventory extends Component {
     ];
 
     let cardHeader = hasContentLoading ? null : (
-      <CardHeader style={{ padding: 0 }}>
+      <TabbedCardHeader>
         <RoutedTabs history={history} tabsArray={tabsArray} />
         <CardCloseButton linkTo="/inventories" />
-      </CardHeader>
+      </TabbedCardHeader>
     );
 
     if (location.pathname.endsWith('edit')) {
diff --git a/awx/ui_next/src/screens/Job/Job.jsx b/awx/ui_next/src/screens/Job/Job.jsx
index 2178bfc2cf..51032d7553 100644
--- a/awx/ui_next/src/screens/Job/Job.jsx
+++ b/awx/ui_next/src/screens/Job/Job.jsx
@@ -2,13 +2,9 @@ import React, { Component } from 'react';
 import { Route, withRouter, Switch, Redirect, Link } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import styled from 'styled-components';
-import {
-  Card,
-  CardHeader as PFCardHeader,
-  PageSection,
-} from '@patternfly/react-core';
+import { Card, PageSection } from '@patternfly/react-core';
 import { JobsAPI } from '@api';
+import { TabbedCardHeader } from '@components/Card';
 import ContentError from '@components/ContentError';
 import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
@@ -17,13 +13,6 @@ import JobDetail from './JobDetail';
 import JobOutput from './JobOutput';
 import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
 
-const CardHeader = styled(PFCardHeader)`
-  --pf-c-card--first-child--PaddingTop: 0;
-  --pf-c-card--child--PaddingLeft: 0;
-  --pf-c-card--child--PaddingRight: 0;
-  position: relative;
-`;
-
 class Job extends Component {
   constructor(props) {
     super(props);
@@ -81,10 +70,10 @@ class Job extends Component {
     ];
 
     let cardHeader = (
-      <CardHeader>
+      <TabbedCardHeader>
         <RoutedTabs match={match} history={history} tabsArray={tabsArray} />
         <CardCloseButton linkTo="/jobs" />
-      </CardHeader>
+      </TabbedCardHeader>
     );
 
     if (!isInitialized) {
diff --git a/awx/ui_next/src/screens/Organization/Organization.jsx b/awx/ui_next/src/screens/Organization/Organization.jsx
index 3e7dfaa0af..66679cced5 100644
--- a/awx/ui_next/src/screens/Organization/Organization.jsx
+++ b/awx/ui_next/src/screens/Organization/Organization.jsx
@@ -2,13 +2,9 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
-import {
-  Card,
-  CardHeader as PFCardHeader,
-  PageSection,
-} from '@patternfly/react-core';
-import styled from 'styled-components';
+import { Card, PageSection } from '@patternfly/react-core';
 import CardCloseButton from '@components/CardCloseButton';
+import { TabbedCardHeader } from '@components/Card';
 import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import NotificationList from '@components/NotificationList/NotificationList';
@@ -18,13 +14,6 @@ import OrganizationEdit from './OrganizationEdit';
 import OrganizationTeams from './OrganizationTeams';
 import { OrganizationsAPI } from '@api';
 
-const CardHeader = styled(PFCardHeader)`
-  --pf-c-card--first-child--PaddingTop: 0;
-  --pf-c-card--child--PaddingLeft: 0;
-  --pf-c-card--child--PaddingRight: 0;
-  position: relative;
-`;
-
 class Organization extends Component {
   constructor(props) {
     super(props);
@@ -141,7 +130,7 @@ class Organization extends Component {
     }
 
     let cardHeader = (
-      <CardHeader style={{ padding: 0 }}>
+      <TabbedCardHeader>
         <RoutedTabs
           match={match}
           history={history}
@@ -149,7 +138,7 @@ class Organization extends Component {
           tabsArray={tabsArray}
         />
         <CardCloseButton linkTo="/organizations" />
-      </CardHeader>
+      </TabbedCardHeader>
     );
 
     if (!isInitialized) {
diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx
index a410edd562..1215586ea2 100644
--- a/awx/ui_next/src/screens/Project/Project.jsx
+++ b/awx/ui_next/src/screens/Project/Project.jsx
@@ -2,12 +2,8 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
-import {
-  Card,
-  CardHeader as PFCardHeader,
-  PageSection,
-} from '@patternfly/react-core';
-import styled from 'styled-components';
+import { Card, PageSection } from '@patternfly/react-core';
+import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
@@ -19,13 +15,6 @@ import ProjectJobTemplates from './ProjectJobTemplates';
 import ProjectSchedules from './ProjectSchedules';
 import { OrganizationsAPI, ProjectsAPI } from '@api';
 
-const CardHeader = styled(PFCardHeader)`
-  --pf-c-card--first-child--PaddingTop: 0;
-  --pf-c-card--child--PaddingLeft: 0;
-  --pf-c-card--child--PaddingRight: 0;
-  position: relative;
-`;
-
 class Project extends Component {
   constructor(props) {
     super(props);
@@ -161,7 +150,7 @@ class Project extends Component {
     });
 
     let cardHeader = (
-      <CardHeader style={{ padding: 0 }}>
+      <TabbedCardHeader>
         <RoutedTabs
           match={match}
           history={history}
@@ -169,7 +158,7 @@ class Project extends Component {
           tabsArray={tabsArray}
         />
         <CardCloseButton linkTo="/projects" />
-      </CardHeader>
+      </TabbedCardHeader>
     );
 
     if (!isInitialized) {
diff --git a/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx b/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx
index 5eeb4eeb45..7048170166 100644
--- a/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx
@@ -44,7 +44,7 @@ function ProjectAdd({ history, i18n }) {
   return (
     <PageSection>
       <Card>
-        <CardHeader css="text-align: right">
+        <CardHeader className="at-u-textRight">
           <Tooltip content={i18n._(t`Close`)} position="top">
             <CardCloseButton onClick={handleCancel} />
           </Tooltip>
diff --git a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
index 25548e0a2e..855c7097ab 100644
--- a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
@@ -89,7 +89,7 @@ function ProjectDetail({ project, i18n }) {
   }
 
   return (
-    <CardBody css="padding-top: 20px">
+    <CardBody>
       <DetailList gutter="sm">
         <Detail
           label={i18n._(t`Name`)}
diff --git a/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx b/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx
index f5d21d8fc2..34c061f96f 100644
--- a/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx
@@ -41,7 +41,7 @@ function ProjectEdit({ project, history, i18n }) {
 
   return (
     <Card>
-      <CardHeader css="text-align: right">
+      <CardHeader className="at-u-textRight">
         <Tooltip content={i18n._(t`Close`)} position="top">
           <CardCloseButton onClick={handleCancel} />
         </Tooltip>
diff --git a/awx/ui_next/src/screens/Team/Team.jsx b/awx/ui_next/src/screens/Team/Team.jsx
index 9aabb7b1dd..f44d71c366 100644
--- a/awx/ui_next/src/screens/Team/Team.jsx
+++ b/awx/ui_next/src/screens/Team/Team.jsx
@@ -2,26 +2,15 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
-import {
-  Card,
-  CardHeader as PFCardHeader,
-  PageSection,
-} from '@patternfly/react-core';
-import styled from 'styled-components';
+import { Card, PageSection } from '@patternfly/react-core';
 import CardCloseButton from '@components/CardCloseButton';
+import { TabbedCardHeader } from '@components/Card';
 import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
 import TeamDetail from './TeamDetail';
 import TeamEdit from './TeamEdit';
 import { TeamsAPI } from '@api';
 
-const CardHeader = styled(PFCardHeader)`
-  --pf-c-card--first-child--PaddingTop: 0;
-  --pf-c-card--child--PaddingLeft: 0;
-  --pf-c-card--child--PaddingRight: 0;
-  position: relative;
-`;
-
 class Team extends Component {
   constructor(props) {
     super(props);
@@ -81,7 +70,7 @@ class Team extends Component {
     ];
 
     let cardHeader = (
-      <CardHeader style={{ padding: 0 }}>
+      <TabbedCardHeader>
         <RoutedTabs
           match={match}
           history={history}
@@ -89,7 +78,7 @@ class Team extends Component {
           tabsArray={tabsArray}
         />
         <CardCloseButton linkTo="/teams" />
-      </CardHeader>
+      </TabbedCardHeader>
     );
 
     if (!isInitialized) {
diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
index fbd5d9e1bf..6d9b9d09dc 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
@@ -195,7 +195,7 @@ class JobTemplateDetail extends Component {
 
     return (
       isInitialized && (
-        <CardBody css="padding-top: 20px;">
+        <CardBody>
           <DetailList gutter="sm">
             <Detail
               label={i18n._(t`Name`)}
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index 8f65007f16..7c9c829480 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, CardHeader, PageSection } from '@patternfly/react-core';
+import { Card, PageSection } from '@patternfly/react-core';
 import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
+import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
 import NotificationList from '@components/NotificationList';
@@ -121,10 +122,10 @@ class Template extends Component {
     });
 
     let cardHeader = (
-      <CardHeader style={{ padding: 0 }}>
+      <TabbedCardHeader>
         <RoutedTabs history={history} tabsArray={tabsArray} />
         <CardCloseButton linkTo="/templates" />
-      </CardHeader>
+      </TabbedCardHeader>
     );
 
     if (location.pathname.endsWith('edit')) {
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 30371f1dd1..fadeb5878c 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, CardHeader, PageSection } from '@patternfly/react-core';
+import { Card, PageSection } from '@patternfly/react-core';
 import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
+import { TabbedCardHeader } from '@components/Card';
 import AppendBody from '@components/AppendBody';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
@@ -65,10 +66,10 @@ class WorkflowJobTemplate extends Component {
     });
 
     let cardHeader = hasContentLoading ? null : (
-      <CardHeader style={{ padding: 0 }}>
+      <TabbedCardHeader>
         <RoutedTabs history={history} tabsArray={tabsArray} />
         <CardCloseButton linkTo="/templates" />
-      </CardHeader>
+      </TabbedCardHeader>
     );
 
     if (location.pathname.endsWith('edit')) {
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
index a1a6c7cd58..3cd04bf305 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
@@ -8,7 +8,7 @@ import { DetailList } from '@components/DetailList';
 class WorkflowJobTemplateDetail extends Component {
   render() {
     return (
-      <CardBody css="padding-top: 20px;">
+      <CardBody>
         <DetailList gutter="sm" />
       </CardBody>
     );
diff --git a/awx/ui_next/src/screens/User/User.jsx b/awx/ui_next/src/screens/User/User.jsx
index c4ee4c5fb8..697976cd55 100644
--- a/awx/ui_next/src/screens/User/User.jsx
+++ b/awx/ui_next/src/screens/User/User.jsx
@@ -2,12 +2,8 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
-import {
-  Card,
-  CardHeader as PFCardHeader,
-  PageSection,
-} from '@patternfly/react-core';
-import styled from 'styled-components';
+import { Card, PageSection } from '@patternfly/react-core';
+import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
@@ -18,13 +14,6 @@ import UserTeams from './UserTeams';
 import UserTokens from './UserTokens';
 import { UsersAPI } from '@api';
 
-const CardHeader = styled(PFCardHeader)`
-  --pf-c-card--first-child--PaddingTop: 0;
-  --pf-c-card--child--PaddingLeft: 0;
-  --pf-c-card--child--PaddingRight: 0;
-  position: relative;
-`;
-
 class User extends Component {
   constructor(props) {
     super(props);
@@ -90,7 +79,7 @@ class User extends Component {
     ];
 
     let cardHeader = (
-      <CardHeader style={{ padding: 0 }}>
+      <TabbedCardHeader>
         <RoutedTabs
           match={match}
           history={history}
@@ -98,7 +87,7 @@ class User extends Component {
           tabsArray={tabsArray}
         />
         <CardCloseButton linkTo="/users" />
-      </CardHeader>
+      </TabbedCardHeader>
     );
 
     if (!isInitialized) {
diff --git a/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx b/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx
index 4b9587086e..3112db6c8b 100644
--- a/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx
+++ b/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx
@@ -41,7 +41,7 @@ function UserAdd({ history, i18n }) {
   return (
     <PageSection>
       <Card>
-        <CardHeader css="text-align: right">
+        <CardHeader className="at-u-textRight">
           <Tooltip content={i18n._(t`Close`)} position="top">
             <CardCloseButton onClick={handleCancel} />
           </Tooltip>