diff --git a/awx/ui_next/src/screens/CredentialType/CredentialType.jsx b/awx/ui_next/src/screens/CredentialType/CredentialType.jsx
new file mode 100644
index 0000000000..1d5b2ecca3
--- /dev/null
+++ b/awx/ui_next/src/screens/CredentialType/CredentialType.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Route, Switch, Redirect } from 'react-router-dom';
+
+import CredentialTypeDetails from './CredentialTypeDetails';
+import CredentialTypeEdit from './CredentialTypeEdit';
+
+function CredentialType() {
+  return (
+    <Switch>
+      <Redirect
+        from="/credential_types/:id"
+        to="/credential_types/:id/details"
+        exact
+      />
+      <Route path="/credential_types/:id/edit">
+        <CredentialTypeEdit />
+      </Route>
+      <Route path="/credential_types/:id/details">
+        <CredentialTypeDetails />
+      </Route>
+    </Switch>
+  );
+}
+
+export default CredentialType;
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeAdd/CredentialTypeAdd.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeAdd/CredentialTypeAdd.jsx
new file mode 100644
index 0000000000..4f3907e7bd
--- /dev/null
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeAdd/CredentialTypeAdd.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, PageSection } from '@patternfly/react-core';
+
+function CredentialTypeAdd() {
+  return (
+    <PageSection>
+      <Card>
+        <div>Credentials Type Add</div>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default CredentialTypeAdd;
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeAdd/index.js b/awx/ui_next/src/screens/CredentialType/CredentialTypeAdd/index.js
new file mode 100644
index 0000000000..47ad6341d0
--- /dev/null
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeAdd/index.js
@@ -0,0 +1 @@
+export { default } from './CredentialTypeAdd';
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx
new file mode 100644
index 0000000000..58543324b7
--- /dev/null
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Card, PageSection } from '@patternfly/react-core';
+
+function CredentialTypeDetails() {
+  return (
+    <PageSection>
+      <Card>Credential Type Details</Card>
+    </PageSection>
+  );
+}
+
+export default CredentialTypeDetails;
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/index.js b/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/index.js
new file mode 100644
index 0000000000..d2f8e7c13d
--- /dev/null
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/index.js
@@ -0,0 +1 @@
+export { default } from './CredentialTypeDetails';
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeEdit/CredentialTypeEdit.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeEdit/CredentialTypeEdit.jsx
new file mode 100644
index 0000000000..9ccbf329d0
--- /dev/null
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeEdit/CredentialTypeEdit.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Card, PageSection } from '@patternfly/react-core';
+
+function CredentialTypeEdit() {
+  return (
+    <PageSection>
+      <Card>Credential Type Edit</Card>
+    </PageSection>
+  );
+}
+
+export default CredentialTypeEdit;
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeEdit/index.js b/awx/ui_next/src/screens/CredentialType/CredentialTypeEdit/index.js
new file mode 100644
index 0000000000..8a35d6b6fd
--- /dev/null
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeEdit/index.js
@@ -0,0 +1 @@
+export { default } from './CredentialTypeEdit';
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx
new file mode 100644
index 0000000000..af9c5c0f11
--- /dev/null
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, PageSection } from '@patternfly/react-core';
+
+function CredentialTypeList() {
+  return (
+    <PageSection>
+      <Card>
+        <div>Credential Type List</div>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default CredentialTypeList;
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/index.js b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/index.js
new file mode 100644
index 0000000000..ed47b3615c
--- /dev/null
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/index.js
@@ -0,0 +1 @@
+export { default } from './CredentialTypeList';
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypes.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypes.jsx
index c9bed43ad4..0f2c2efb0c 100644
--- a/awx/ui_next/src/screens/CredentialType/CredentialTypes.jsx
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypes.jsx
@@ -1,26 +1,48 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, useCallback } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
-  PageSection,
-  PageSectionVariants,
-  Title,
-} from '@patternfly/react-core';
+import { Route, Switch } from 'react-router-dom';
 
-class CredentialTypes extends Component {
-  render() {
-    const { i18n } = this.props;
-    const { light } = PageSectionVariants;
+import CredentialTypeAdd from './CredentialTypeAdd';
+import CredentialTypeList from './CredentialTypeList';
+import CredentialType from './CredentialType';
+import Breadcrumbs from '../../components/Breadcrumbs';
 
-    return (
-      <Fragment>
-        <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`Credential Types`)}</Title>
-        </PageSection>
-        <PageSection />
-      </Fragment>
-    );
-  }
+function CredentialTypes({ i18n }) {
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
+    '/credential_types': i18n._(t`Credential Types`),
+    '/credential_types/add': i18n._(t`Create Credential Types`),
+  });
+
+  const buildBreadcrumbConfig = useCallback(
+    credentialTypes => {
+      if (!credentialTypes) {
+        return;
+      }
+      setBreadcrumbConfig({
+        '/credential_types': i18n._(t`Credential Types`),
+        '/credential_types/add': i18n._(t`Create Credential Types`),
+        [`/credential_types/${credentialTypes.id}`]: `${credentialTypes.name}`,
+      });
+    },
+    [i18n]
+  );
+  return (
+    <>
+      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <Switch>
+        <Route path="/credential_types/add">
+          <CredentialTypeAdd />
+        </Route>
+        <Route path="/credential_types/:id">
+          <CredentialType setBreadcrumb={buildBreadcrumbConfig} />
+        </Route>
+        <Route path="/credential_types">
+          <CredentialTypeList />
+        </Route>
+      </Switch>
+    </>
+  );
 }
 
 export default withI18n()(CredentialTypes);
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypes.test.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypes.test.jsx
index 24373b0a50..468a55ac7a 100644
--- a/awx/ui_next/src/screens/CredentialType/CredentialTypes.test.jsx
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypes.test.jsx
@@ -4,15 +4,13 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import CredentialTypes from './CredentialTypes';
 
-describe('<CredentialTypes />', () => {
+describe('<CredentialTypes/>', () => {
   let pageWrapper;
   let pageSections;
-  let title;
 
   beforeEach(() => {
     pageWrapper = mountWithContexts(<CredentialTypes />);
     pageSections = pageWrapper.find('PageSection');
-    title = pageWrapper.find('Title');
   });
 
   afterEach(() => {
@@ -21,9 +19,7 @@ describe('<CredentialTypes />', () => {
 
   test('initially renders without crashing', () => {
     expect(pageWrapper.length).toBe(1);
-    expect(pageSections.length).toBe(2);
-    expect(title.length).toBe(1);
-    expect(title.props().size).toBe('2xl');
+    expect(pageSections.length).toBe(1);
     expect(pageSections.first().props().variant).toBe('light');
   });
 });