diff --git a/awx/ui/client/lib/credentials.factory.js b/awx/ui/client/lib/credentials.factory.js
new file mode 100644
index 0000000000..4148d6ca1b
--- /dev/null
+++ b/awx/ui/client/lib/credentials.factory.js
@@ -0,0 +1,7 @@
+function credentials($resource) {
+
+}
+
+credentials.$inject = ['$resource'];
+
+angular.module('at.lib');
diff --git a/awx/ui/client/src/credentials/credentials.list.js b/awx/ui/client/src/credentials/credentials.list.js
index 74528404bd..39afc2e519 100644
--- a/awx/ui/client/src/credentials/credentials.list.js
+++ b/awx/ui/client/src/credentials/credentials.list.js
@@ -30,13 +30,6 @@ export default ['i18n', function(i18n) {
                 awToolTip: '{{credential.description}}',
                 dataPlacement: 'top'
             },
-            kind: {
-                label: i18n._('Type'),
-                ngBind: 'credential.kind_label',
-                excludeModal: true,
-                nosort: true,
-                columnClass: 'col-md-2 hidden-sm hidden-xs'
-            },
             owners: {
                 label: i18n._('Owners'),
                 type: 'owners',
diff --git a/awx/ui/client/src/credentials/index.controller.js b/awx/ui/client/src/credentials/index.controller.js
index a244214ed7..8136969a49 100644
--- a/awx/ui/client/src/credentials/index.controller.js
+++ b/awx/ui/client/src/credentials/index.controller.js
@@ -24,6 +24,8 @@ function IndexController () {
     };
 }
 
-// IndexController.$inject = [];
+IndexController.$inject = [
+
+];
 
 export default IndexController;
diff --git a/awx/ui/client/src/credentials/index.js b/awx/ui/client/src/credentials/index.js
index 8d2fac4063..f17464eb86 100644
--- a/awx/ui/client/src/credentials/index.js
+++ b/awx/ui/client/src/credentials/index.js
@@ -1,17 +1,80 @@
-import IndexController from './index.controller';
+import CredentialList from './credentials.list.js';
+import ListController from './list/credentials-list.controller';
+import { N_ } from '../i18n';
 
-function routes ($stateProvider) {
-    $stateProvider.state({
+function routes ($stateExtenderProvider) {
+    let stateExtender = $stateExtenderProvider.$get();
+
+    stateExtender.addState({
         name: 'credentials',
-        url: '/credentials',
-        templateUrl: '/static/views/credentials/index.view.html',
-        controller: IndexController,
-        controllerAs: 'vm'
+        route: '/credentials',
+        ncyBreadcrumb: {
+            label: N_('CREDENTIALS')
+        },
+        views: {
+            '@': {
+                templateUrl: '/static/views/credentials/index.view.html',
+            },
+            'list@credentials': {
+                templateProvider: function(CredentialList, generateList) {
+                    let html = generateList.build({
+                        list: CredentialList,
+                        mode: 'edit'
+                    });
+
+                    return html;
+                },
+                controller: ListController
+            }
+        },
+        searchPrefix: 'credential',
+        resolve: {
+            Dataset: ['CredentialList', 'QuerySet', '$stateParams', 'GetBasePath',
+                function(list, qs, $stateParams, GetBasePath) {
+                    let path = GetBasePath(list.basePath) || GetBasePath(list.name);
+                    return qs.search(path, $stateParams[`${list.iterator}_search`]);
+                }
+            ]
+        }
+    });
+
+    stateExtender.addState({
+        name: 'credentials.add',
+        route: '/add',
+        ncyBreadcrumb: {
+            label: N_('ADD')
+        },
+        views: {
+            'add@credentials': {
+                templateProvider: function() {
+                    return '<span>test-add</span>';
+                }
+            }
+        }
+    });
+
+    stateExtender.addState({
+        name: 'credentials.edit',
+        route: '/edit',
+        ncyBreadcrumb: {
+            label: N_('EDIT')
+        },
+        views: {
+            'edit@credentials': {
+                templateProvider: function() {
+                    return '<span>test-edit</span>';
+                }
+            }
+        }
     });
 }
 
 routes.$inject = [
-  '$stateProvider'
+  '$stateExtenderProvider'
 ];
 
-angular.module('at.feature.credentials', []).config(routes);
+angular
+    .module('at.feature.credentials', [])
+    .config(routes)
+    .factory('CredentialList', CredentialList)
+    .controller('ListController', ListController);
diff --git a/awx/ui/client/src/credentials/index.view.html b/awx/ui/client/src/credentials/index.view.html
index 695ee02df7..c1fce0ad3e 100644
--- a/awx/ui/client/src/credentials/index.view.html
+++ b/awx/ui/client/src/credentials/index.view.html
@@ -1,19 +1,8 @@
+<div ui-view="edit"></div>
+<div ui-view="add"></div>
+
 <at-panel>
-  <at-panel-heading config="vm.panel.heading"></at-panel-heading>
-  <at-panel-body config="vm.panel.body">
-    <div class="row">
-      <div class="col-sm-5">
-        <at-input-search config="vm.panel.search"></at-input-search>
-      </div>
-      <div class="col-sm-1 at-u-noPadding">
-        <at-toggle-button config="vm.key"></at-toggle-button>
-      </div>
-      <div class="col-sm-1 pull-right">
-        <button class="btn at-Button--success pull-right">
-          + ADD
-        </button>
-      </div>
-    </div>
-    <at-toggle-content config="vm.key"></at-toggle-content>
+  <at-panel-body>
+    <div ui-view="list"></div>
   </at-panel-body>
 </at-panel>
diff --git a/awx/ui/package.json b/awx/ui/package.json
index 862a9e7ad7..97785cbc90 100644
--- a/awx/ui/package.json
+++ b/awx/ui/package.json
@@ -25,7 +25,9 @@
     "jshint": "grunt clean:jshint jshint:source --no-color",
     "test:ci": "npm run test -- --single-run --reporter junit,dots --browsers=PhantomJS",
     "lint": "./node_modules/.bin/eslint -c .eslintrc.js .",
-    "component-test": "./node_modules/.bin/karma start client/test/karma.conf.js --silent"
+    "component-test": "./node_modules/.bin/karma start client/test/karma.conf.js",
+    "lint-dev": "./node_modules/.bin/nodemon --exec \"./node_modules/.bin/eslint -c .eslintrc.js .\" --watch \"client/components/**/*.js\"",
+    "component-dev": "./node_modules/.bin/karma start client/test/karma.conf.js --auto-watch --no-single-run"
   },
   "optionalDependencies": {
     "browser-sync": "^2.14.0",