diff --git a/awx/ui/client/components/_button.less b/awx/ui/client/components/_button.less
deleted file mode 100644
index 340ae0e8b7..0000000000
--- a/awx/ui/client/components/_button.less
+++ /dev/null
@@ -1,4 +0,0 @@
-.at-Button {
-    padding: @at-padding-xs @at-padding-md;
-    padding-bottom: @at-padding-xs + 1;
-}
diff --git a/awx/ui/client/components/_common.less b/awx/ui/client/components/_common.less
new file mode 100644
index 0000000000..160fcac71c
--- /dev/null
+++ b/awx/ui/client/components/_common.less
@@ -0,0 +1,17 @@
+.at-Button(@bg, @bg-hover: @bg, @color, @color-hover: @color) {
+    color: @color;
+    background-color: @bg;
+    padding: @at-padding-xs @at-padding-md;
+    padding-bottom: @at-padding-xs + 1;
+
+    &:hover {
+        color: @color-hover;
+        background-color: @bg-hover;
+    }
+}
+
+.at-Button--success { .at-Button(@at-success, @at-success-dark, @at-white) }
+.at-Button--link { .at-Button(@at-link, @at-link-dark, @at-white) }
+.at-Button--danger { .at-Button(@at-danger, @at-danger, @at-white) }
+.at-Button--light { .at-Button(@at-white, @at-gray-light, @at-gray-dark) }
+
diff --git a/awx/ui/client/components/_index.less b/awx/ui/client/components/_index.less
index d5caa0db0a..e90b33419f 100644
--- a/awx/ui/client/components/_index.less
+++ b/awx/ui/client/components/_index.less
@@ -1,4 +1,6 @@
-@import '_badge';
-@import '_button';
-@import '_input';
-@import '_panel';
+@import '_common';
+@import 'badge/_index';
+@import 'input/_index';
+@import 'panel/_index';
+@import 'toggle/_index';
+
diff --git a/awx/ui/client/components/action-add.directive.js b/awx/ui/client/components/action/_index.less
similarity index 100%
rename from awx/ui/client/components/action-add.directive.js
rename to awx/ui/client/components/action/_index.less
diff --git a/awx/ui/client/components/action-cancel.directive.js b/awx/ui/client/components/action/add.directive.js
similarity index 100%
rename from awx/ui/client/components/action-cancel.directive.js
rename to awx/ui/client/components/action/add.directive.js
diff --git a/awx/ui/client/components/action-delete.directive.js b/awx/ui/client/components/action/cancel.directive.js
similarity index 100%
rename from awx/ui/client/components/action-delete.directive.js
rename to awx/ui/client/components/action/cancel.directive.js
diff --git a/awx/ui/client/components/action-save.directive.js b/awx/ui/client/components/action/delete.directive.js
similarity index 100%
rename from awx/ui/client/components/action-save.directive.js
rename to awx/ui/client/components/action/delete.directive.js
diff --git a/awx/ui/client/components/form.directive.js b/awx/ui/client/components/action/save.directive.js
similarity index 100%
rename from awx/ui/client/components/form.directive.js
rename to awx/ui/client/components/action/save.directive.js
diff --git a/awx/ui/client/components/_badge.less b/awx/ui/client/components/badge/_index.less
similarity index 100%
rename from awx/ui/client/components/_badge.less
rename to awx/ui/client/components/badge/_index.less
diff --git a/awx/ui/client/components/badge.directive.js b/awx/ui/client/components/badge/badge.directive.js
similarity index 68%
rename from awx/ui/client/components/badge.directive.js
rename to awx/ui/client/components/badge/badge.directive.js
index 991ee5584b..e040dbbdb9 100644
--- a/awx/ui/client/components/badge.directive.js
+++ b/awx/ui/client/components/badge/badge.directive.js
@@ -2,7 +2,7 @@ function atBadge () {
     return {
         restrict: 'E',
         transclude: true,
-        templateUrl: 'static/partials/components/badge.partial.html',
+        templateUrl: 'static/partials/components/badge/badge.partial.html',
         scope: {
             config: '='
         }
diff --git a/awx/ui/client/components/badge.partial.html b/awx/ui/client/components/badge/badge.partial.html
similarity index 100%
rename from awx/ui/client/components/badge.partial.html
rename to awx/ui/client/components/badge/badge.partial.html
diff --git a/awx/ui/client/components/index.js b/awx/ui/client/components/index.js
index 033bab7f76..47b7fd8141 100644
--- a/awx/ui/client/components/index.js
+++ b/awx/ui/client/components/index.js
@@ -1,8 +1,10 @@
-import badge from './badge.directive';
-import inputSearch from './input-search.directive';
-import panel from './panel.directive';
-import panelHeading from './panel-heading.directive';
-import panelBody from './panel-body.directive';
+import badge from './badge/badge.directive';
+import inputSearch from './input/search.directive';
+import panel from './panel/panel.directive';
+import panelHeading from './panel/heading.directive';
+import panelBody from './panel/body.directive';
+import toggleButton from './toggle/button.directive';
+import toggleContent from './toggle/content.directive';
 
 angular
     .module('at.components', [])
@@ -10,5 +12,8 @@ angular
     .directive('atInputSearch', inputSearch)
     .directive('atPanel', panel)
     .directive('atPanelHeading', panelHeading)
-    .directive('atPanelBody', panelBody);
+    .directive('atPanelBody', panelBody)
+    .directive('atToggleButton', toggleButton)
+    .directive('atToggleContent', toggleContent);
+
 
diff --git a/awx/ui/client/components/input-secret.directive.js b/awx/ui/client/components/input-secret.directive.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/awx/ui/client/components/input-textarea.directive.js b/awx/ui/client/components/input-textarea.directive.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/awx/ui/client/components/input.directive.js b/awx/ui/client/components/input.directive.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/awx/ui/client/components/_input.less b/awx/ui/client/components/input/_index.less
similarity index 84%
rename from awx/ui/client/components/_input.less
rename to awx/ui/client/components/input/_index.less
index fb2dfb9b07..6d880adce0 100644
--- a/awx/ui/client/components/_input.less
+++ b/awx/ui/client/components/input/_index.less
@@ -4,7 +4,7 @@
 .at-InputSearch-field {
     .at-placeholder;  
 
-    border-color: @at-gray-lighter;
+    border-color: @at-gray-light;
     background-color: @at-white; 
     font-size: @at-font-md;
 
@@ -12,7 +12,7 @@
 }
 
 .at-InputSearch-field:focus {
-    border-color: @at-gray-lighter;
+    border-color: @at-gray-light;
 }
 
 .at-Input-searchButton {
diff --git a/awx/ui/client/components/input-search.directive.js b/awx/ui/client/components/input/search.directive.js
similarity index 85%
rename from awx/ui/client/components/input-search.directive.js
rename to awx/ui/client/components/input/search.directive.js
index 7c3b315ed1..e64f58ac57 100644
--- a/awx/ui/client/components/input-search.directive.js
+++ b/awx/ui/client/components/input/search.directive.js
@@ -9,7 +9,7 @@ function atInputSearch () {
     return {
         restrict: 'E',
         transclude: true,
-        templateUrl: 'static/partials/components/input-search.partial.html',
+        templateUrl: 'static/partials/components/input/search.partial.html',
         link,
         scope: {
             config: '='
diff --git a/awx/ui/client/components/input-search.partial.html b/awx/ui/client/components/input/search.partial.html
similarity index 100%
rename from awx/ui/client/components/input-search.partial.html
rename to awx/ui/client/components/input/search.partial.html
diff --git a/awx/ui/client/components/input-checkbox.directive.js b/awx/ui/client/components/input/secret.directive.js
similarity index 100%
rename from awx/ui/client/components/input-checkbox.directive.js
rename to awx/ui/client/components/input/secret.directive.js
diff --git a/awx/ui/client/components/input-dropdown.directive.js b/awx/ui/client/components/input/textarea.directive.js
similarity index 100%
rename from awx/ui/client/components/input-dropdown.directive.js
rename to awx/ui/client/components/input/textarea.directive.js
diff --git a/awx/ui/client/components/list-item.directive.js b/awx/ui/client/components/list/list-item.directive.js
similarity index 100%
rename from awx/ui/client/components/list-item.directive.js
rename to awx/ui/client/components/list/list-item.directive.js
diff --git a/awx/ui/client/components/list.directive.js b/awx/ui/client/components/list/list.directive.js
similarity index 100%
rename from awx/ui/client/components/list.directive.js
rename to awx/ui/client/components/list/list.directive.js
diff --git a/awx/ui/client/components/pagination.directive.js b/awx/ui/client/components/pagination/pagination.directive.js
similarity index 100%
rename from awx/ui/client/components/pagination.directive.js
rename to awx/ui/client/components/pagination/pagination.directive.js
diff --git a/awx/ui/client/components/_panel.less b/awx/ui/client/components/panel/_index.less
similarity index 100%
rename from awx/ui/client/components/_panel.less
rename to awx/ui/client/components/panel/_index.less
diff --git a/awx/ui/client/components/panel-body.directive.js b/awx/ui/client/components/panel/body.directive.js
similarity index 68%
rename from awx/ui/client/components/panel-body.directive.js
rename to awx/ui/client/components/panel/body.directive.js
index 02170edcfe..2f8f5b0102 100644
--- a/awx/ui/client/components/panel-body.directive.js
+++ b/awx/ui/client/components/panel/body.directive.js
@@ -2,7 +2,7 @@ function atPanelBody () {
     return {
         restrict: 'E',
         transclude: true,
-        templateUrl: 'static/partials/components/panel-body.partial.html'
+        templateUrl: 'static/partials/components/panel/body.partial.html'
     };
 }
 
diff --git a/awx/ui/client/components/panel-body.partial.html b/awx/ui/client/components/panel/body.partial.html
similarity index 100%
rename from awx/ui/client/components/panel-body.partial.html
rename to awx/ui/client/components/panel/body.partial.html
diff --git a/awx/ui/client/components/panel-heading.directive.js b/awx/ui/client/components/panel/heading.directive.js
similarity index 75%
rename from awx/ui/client/components/panel-heading.directive.js
rename to awx/ui/client/components/panel/heading.directive.js
index 238a494c85..51f29e8a1f 100644
--- a/awx/ui/client/components/panel-heading.directive.js
+++ b/awx/ui/client/components/panel/heading.directive.js
@@ -2,7 +2,7 @@ function atPanelHeading () {
     return {
         restrict: 'E',
         transclude: true,
-        templateUrl: 'static/partials/components/panel-heading.partial.html',
+        templateUrl: 'static/partials/components/panel/heading.partial.html',
         scope: {
             config: '='
         }
diff --git a/awx/ui/client/components/panel-heading.partial.html b/awx/ui/client/components/panel/heading.partial.html
similarity index 100%
rename from awx/ui/client/components/panel-heading.partial.html
rename to awx/ui/client/components/panel/heading.partial.html
diff --git a/awx/ui/client/components/panel.directive.js b/awx/ui/client/components/panel/panel.directive.js
similarity index 61%
rename from awx/ui/client/components/panel.directive.js
rename to awx/ui/client/components/panel/panel.directive.js
index 3ea08ba67f..70ae28d30a 100644
--- a/awx/ui/client/components/panel.directive.js
+++ b/awx/ui/client/components/panel/panel.directive.js
@@ -2,7 +2,7 @@ function atPanel () {
     return {
         restrict: 'E',
         transclude: true,
-        templateUrl: 'static/partials/components/panel.partial.html'
+        templateUrl: 'static/partials/components/panel/panel.partial.html'
     };
 }
 
diff --git a/awx/ui/client/components/panel.partial.html b/awx/ui/client/components/panel/panel.partial.html
similarity index 100%
rename from awx/ui/client/components/panel.partial.html
rename to awx/ui/client/components/panel/panel.partial.html
diff --git a/awx/ui/client/components/popover.directive.js b/awx/ui/client/components/popover/popover.directive.js
similarity index 100%
rename from awx/ui/client/components/popover.directive.js
rename to awx/ui/client/components/popover/popover.directive.js
diff --git a/awx/ui/client/components/prompt.directive.js b/awx/ui/client/components/prompt/prompt.directive.js
similarity index 100%
rename from awx/ui/client/components/prompt.directive.js
rename to awx/ui/client/components/prompt/prompt.directive.js
diff --git a/awx/ui/client/components/table.directive.js b/awx/ui/client/components/table/table.directive.js
similarity index 100%
rename from awx/ui/client/components/table.directive.js
rename to awx/ui/client/components/table/table.directive.js
diff --git a/awx/ui/client/components/tab-navigation.directive.js b/awx/ui/client/components/tabs/tab-navigation.directive.js
similarity index 100%
rename from awx/ui/client/components/tab-navigation.directive.js
rename to awx/ui/client/components/tabs/tab-navigation.directive.js
diff --git a/awx/ui/client/components/tab.directive.js b/awx/ui/client/components/tabs/tab.directive.js
similarity index 100%
rename from awx/ui/client/components/tab.directive.js
rename to awx/ui/client/components/tabs/tab.directive.js
diff --git a/awx/ui/client/components/toggle-button.directive.js b/awx/ui/client/components/toggle-button.directive.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/awx/ui/client/components/toggle-content.directive.js b/awx/ui/client/components/toggle-content.directive.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/awx/ui/client/components/toggle/_index.less b/awx/ui/client/components/toggle/_index.less
new file mode 100644
index 0000000000..4e5a52f4bf
--- /dev/null
+++ b/awx/ui/client/components/toggle/_index.less
@@ -0,0 +1,32 @@
+.at-ToggleButton {
+    &, &:focus {
+        border-color: @at-gray-light;
+        background-color: @at-white;
+    }
+
+    &:hover {
+        background-color: @at-gray-lighter;
+    }
+
+    & > span:hover {
+        border-color: @at-gray-light;
+        background-color: inherit;
+    }
+}
+
+.at-ToggleButton--show {
+    &, &:hover, &:focus {
+        background-color: @at-link;
+        border-color: @at-link;
+        color: @at-white;
+    }
+}
+
+.at-ToggleContent-well {
+    margin: @at-margin-sm 0 0 0;
+    padding: @at-padding-md;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    background-color: @at-gray-lightest;
+    color: @at-gray-dark;
+}
diff --git a/awx/ui/client/components/toggle/button.directive.js b/awx/ui/client/components/toggle/button.directive.js
new file mode 100644
index 0000000000..b20ca29eee
--- /dev/null
+++ b/awx/ui/client/components/toggle/button.directive.js
@@ -0,0 +1,12 @@
+function atToggleButton () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        templateUrl: 'static/partials/components/toggle/button.partial.html',
+        scope: {
+          config: '='
+        }
+    };
+}
+
+export default atToggleButton;
diff --git a/awx/ui/client/components/toggle/button.partial.html b/awx/ui/client/components/toggle/button.partial.html
new file mode 100644
index 0000000000..e3f87eeb14
--- /dev/null
+++ b/awx/ui/client/components/toggle/button.partial.html
@@ -0,0 +1,9 @@
+<button class="btn btn-default at-Button at-ToggleButton"
+        ng-class="{ 'at-ToggleButton--show': config.show }"
+        ng-click="config.show = !config.show">
+  <span ng-if="config.button">
+    {{ config.button.text }}
+  </span>
+
+  <ng-transclude ng-if="!config.button"></ng-transclude>
+</button>
diff --git a/awx/ui/client/components/toggle/content.directive.js b/awx/ui/client/components/toggle/content.directive.js
new file mode 100644
index 0000000000..f8b3358201
--- /dev/null
+++ b/awx/ui/client/components/toggle/content.directive.js
@@ -0,0 +1,12 @@
+function atToggleContent () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        templateUrl: 'static/partials/components/toggle/content.partial.html',
+        scope: {
+          config: '='
+        }
+    };
+}
+
+export default atToggleContent;
diff --git a/awx/ui/client/components/toggle/content.partial.html b/awx/ui/client/components/toggle/content.partial.html
new file mode 100644
index 0000000000..941328a5a2
--- /dev/null
+++ b/awx/ui/client/components/toggle/content.partial.html
@@ -0,0 +1,10 @@
+<div ng-show="config.show" class="row">
+  <div ng-if="config.content" class="col-sm-12">
+    <div class="well at-ToggleContent-well">
+      {{ config.content.text }}  
+    </div>
+  </div>
+
+  <ng-transclude ng-if="!config.content"></ng-transclude>
+</div>
+
diff --git a/awx/ui/client/src/credentials/index.controller.js b/awx/ui/client/src/credentials/index.controller.js
index 0efbb3b229..a244214ed7 100644
--- a/awx/ui/client/src/credentials/index.controller.js
+++ b/awx/ui/client/src/credentials/index.controller.js
@@ -13,11 +13,12 @@ function IndexController () {
     };
 
     vm.key = {
-        on: false,
+        id: 'key-group',
+        show: false,
         button: {
             text: 'Key'
         },
-        body: {
+        content: {
             text: 'Yadda yadda yadda'
         }
     };
diff --git a/awx/ui/client/src/credentials/index.view.html b/awx/ui/client/src/credentials/index.view.html
index 8af0a27dce..695ee02df7 100644
--- a/awx/ui/client/src/credentials/index.view.html
+++ b/awx/ui/client/src/credentials/index.view.html
@@ -2,21 +2,18 @@
   <at-panel-heading config="vm.panel.heading"></at-panel-heading>
   <at-panel-body config="vm.panel.body">
     <div class="row">
-      <div class="col-md-5">
+      <div class="col-sm-5">
         <at-input-search config="vm.panel.search"></at-input-search>
       </div>
-      <div class="col-md-1 at-u-noPadding">
-        <button class="btn btn-default at-Button" ng-click="vm.key.on = !vm.key.on">
-          {{ vm.key.button.text }}
+      <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>
-    <div ng-show="vm.key.on" class="row">
-      <div class="col-md-12">
-        <div class="well">
-          {{ vm.key.body.text }}  
-        </div>
-      </div>
-    </div>
+    <at-toggle-content config="vm.key"></at-toggle-content>
   </at-panel-body>
 </at-panel>
diff --git a/awx/ui/client/theme/_mixins.less b/awx/ui/client/theme/_mixins.less
index 486093b827..3748df965d 100644
--- a/awx/ui/client/theme/_mixins.less
+++ b/awx/ui/client/theme/_mixins.less
@@ -12,12 +12,12 @@
 
 .at-buttonColor () {
     background-color: @at-white;
-    border-color: @at-gray-lighter;
+    border-color: @at-gray-light;
     color: @at-gray;
 }
 
 .at-buttonColorHover () {
-    background-color: @at-gray-lightest;  
-    border-color: @at-gray-lighter;
+    background-color: @at-gray-lighter;  
+    border-color: @at-gray-light;
     color: @at-gray;
 }
diff --git a/awx/ui/client/theme/_variables.less b/awx/ui/client/theme/_variables.less
index 3708a28c03..4de6f6b422 100644
--- a/awx/ui/client/theme/_variables.less
+++ b/awx/ui/client/theme/_variables.less
@@ -1,9 +1,19 @@
 @at-white: #ffffff;
-@at-gray-lightest: #fafafa;
-@at-gray-lighter: #b7b7b7;
+
+@at-gray-lightest: #f6f6f6;
+@at-gray-lighter: #fafafa;
+@at-gray-light: #b7b7b7;
 @at-gray: #848992;
 @at-gray-dark: #707070;
 
+@at-link: #337AB7;
+@at-link-dark: #286090;
+
+@at-success: #5CB85C;
+@at-success-dark: #449D44;
+
+@at-danger: #449D44;
+
 @at-font-sm: 12px;
 @at-font-md: 14px;
 @at-font-lg: 16px;
diff --git a/awx/ui/grunt-tasks/copy.js b/awx/ui/grunt-tasks/copy.js
index fc66d09ea6..9c179945a6 100644
--- a/awx/ui/grunt-tasks/copy.js
+++ b/awx/ui/grunt-tasks/copy.js
@@ -52,7 +52,7 @@ module.exports = {
         }, {
             cwd: 'client/components',
             expand: true,
-            src: ['*.partial.html'],
+            src: ['**/*.partial.html'],
             dest: 'static/partials/components/'
         }]
     },
diff --git a/awx/ui/grunt-tasks/watch.js b/awx/ui/grunt-tasks/watch.js
index 91f1b1b72e..a0149ab6e0 100644
--- a/awx/ui/grunt-tasks/watch.js
+++ b/awx/ui/grunt-tasks/watch.js
@@ -5,7 +5,7 @@ module.exports = {
     },
     partials: {
         files: [
-            'client/components/*.partial.html',
+            'client/components/**/*.partial.html',
             'client/src/**/*.partial.html'
         ],
         tasks: ['newer:copy:partials']