diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less
index 1cd8059d7c..964010e7fc 100644
--- a/awx/ui/client/legacy-styles/forms.less
+++ b/awx/ui/client/legacy-styles/forms.less
@@ -7,7 +7,7 @@
  *
  */
 
-@import "src/shared/branding/colors.default.less";
+@import "awx/ui/client/src/shared/branding/colors.default.less";
 
 .Form{
     display:flex;
@@ -50,6 +50,71 @@
     color:@default-icon;
 }
 
+.Form-tabHolder{
+    display: flex;
+    margin-bottom: 20px;
+}
+
+.Form-tab {
+    color: @btn-txt;
+    background-color: @btn-bg;
+    font-size: 12px;
+    border: 1px solid @btn-bord;
+    height: 30px;
+    border-radius: 5px;
+    margin-right: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    transition: background-color 0.2s;
+    text-transform: uppercase;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.Form-tab:hover {
+    color: @btn-txt;
+    background-color: @btn-bg-hov;
+    cursor: pointer;
+}
+
+.Form-tab:active {
+    color: @btn-txt-sel;
+    background-color: @btn-bg-sel;
+    cursor: pointer;
+}
+
+.Form-tab:focus {
+    color: @btn-txt-sel;
+}
+
+.Form-tab.is-selected {
+    color: @btn-txt-sel;
+    background-color: @btn-bg-sel;
+    border-color: @btn-bord-sel;
+}
+
+.Form-tab--disabled {
+    opacity: 0.4;
+    cursor: not-allowed !important;
+}
+
+.Form-tab--disabled:hover {
+    color: @btn-txt;
+    background-color: @btn-bg;
+}
+
+.Form-tabSection{
+    display: none;
+    width: 0%;
+}
+
+.Form-tabSection.is-selected{
+    width: 100%;
+    display: block;
+}
+
 .Form-formGroup {
     flex: 1 0 auto;
     margin-bottom: 25px;
diff --git a/awx/ui/client/src/forms/Credentials.js b/awx/ui/client/src/forms/Credentials.js
index b4a6df3118..f352028e96 100644
--- a/awx/ui/client/src/forms/Credentials.js
+++ b/awx/ui/client/src/forms/Credentials.js
@@ -17,7 +17,6 @@ export default
             addTitle: 'Create Credential', //Legend in add mode
             editTitle: '{{ name }}', //Legend in edit mode
             name: 'credential',
-            well: true,
             forceListeners: true,
 
             actions: {
diff --git a/awx/ui/client/src/forms/Inventories.js b/awx/ui/client/src/forms/Inventories.js
index 9841da4dd2..a76293217f 100644
--- a/awx/ui/client/src/forms/Inventories.js
+++ b/awx/ui/client/src/forms/Inventories.js
@@ -17,10 +17,7 @@ export default
             addTitle: 'New Inventory',
             editTitle: '{{ inventory_name }}',
             name: 'inventory',
-            collapse: true,
-            collapseTitle: "Properties",
-            collapseMode: 'edit',
-            collapseOpen: true,
+            tabs: true,
 
             fields: {
                 inventory_name: {
diff --git a/awx/ui/client/src/forms/JobTemplates.js b/awx/ui/client/src/forms/JobTemplates.js
index 131ea7e9c7..57e6cc53c2 100644
--- a/awx/ui/client/src/forms/JobTemplates.js
+++ b/awx/ui/client/src/forms/JobTemplates.js
@@ -19,10 +19,7 @@ export default
             editTitle: '{{ name }}',
             name: 'job_templates',
             base: 'job_templates',
-            collapse: true,
-            collapseTitle: "Properties",
-            collapseMode: 'edit',
-            collapseOpenFirst: true,   //Always open first panel
+            tabs: true,
 
             fields: {
                 name: {
diff --git a/awx/ui/client/src/forms/Jobs.js b/awx/ui/client/src/forms/Jobs.js
index 0a19dc13de..b5cd2b9bfd 100644
--- a/awx/ui/client/src/forms/Jobs.js
+++ b/awx/ui/client/src/forms/Jobs.js
@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
  /**
  * @ngdoc function
  * @name forms.function:Jobs
@@ -19,10 +19,7 @@ export default
             name: 'jobs',
             well: true,
             base: 'jobs',
-            collapse: true,
-            collapseMode: 'edit',
-            collapseTitle: 'Job Status',
-            collapseOpenFirst: true,   //Always open first panel
+            tabs: true,
 
             navigationLinks: {
                 details: {
diff --git a/awx/ui/client/src/forms/LicenseForm.js b/awx/ui/client/src/forms/LicenseForm.js
index 66010f8854..0b53574caa 100644
--- a/awx/ui/client/src/forms/LicenseForm.js
+++ b/awx/ui/client/src/forms/LicenseForm.js
@@ -18,7 +18,7 @@ export default
             name: 'license',
             well: false,
 
-            tabs: [{
+            licensetabs: [{
                 name: 'license',
                 label: 'License'
             }, {
diff --git a/awx/ui/client/src/forms/Organizations.js b/awx/ui/client/src/forms/Organizations.js
index 941774f45d..23b5916e3b 100644
--- a/awx/ui/client/src/forms/Organizations.js
+++ b/awx/ui/client/src/forms/Organizations.js
@@ -17,10 +17,7 @@ export default
             addTitle: 'New Organization', //Title in add mode
             editTitle: '{{ name }}', //Title in edit mode
             name: 'organization', //entity or model name in singular form
-            collapse: true,
-            collapseTitle: "Properties",
-            collapseMode: 'edit',
-            collapseOpen: true,
+            tabs: true,
 
             fields: {
                 name: {
diff --git a/awx/ui/client/src/forms/Projects.js b/awx/ui/client/src/forms/Projects.js
index 6c4c7d13e3..c4442c59ab 100644
--- a/awx/ui/client/src/forms/Projects.js
+++ b/awx/ui/client/src/forms/Projects.js
@@ -18,10 +18,7 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
         editTitle: '{{ name }}',
         name: 'project',
         forceListeners: true,
-        collapse: true,
-        collapseTitle: "Properties",
-        collapseMode: 'edit',
-        collapseOpen: true,
+        tabs: true,
 
         fields: {
             name: {
diff --git a/awx/ui/client/src/forms/Teams.js b/awx/ui/client/src/forms/Teams.js
index 1aec02fb32..4bc5c940a7 100644
--- a/awx/ui/client/src/forms/Teams.js
+++ b/awx/ui/client/src/forms/Teams.js
@@ -17,10 +17,7 @@ export default
             addTitle: 'New Team', //Legend in add mode
             editTitle: '{{ name }}', //Legend in edit mode
             name: 'team',
-            collapse: true,
-            collapseTitle: "Properties",
-            collapseMode: 'edit',
-            collapseOpen: true,
+            tabs: true,
 
             fields: {
                 name: {
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 03cfa0647b..e531b2c502 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -202,6 +202,25 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     this.scope.mode = options.mode;
                 }
 
+                if(options.mode === 'edit' && this.form.tabs){
+                    var tabs = [this.form.name], that = this;
+                    tabs.push(Object.keys(this.form.related));
+                    tabs = _.flatten(tabs);
+                    _.map(tabs, function(itm){
+                        that.scope.$parent[itm+"Selected"] = false;
+                    });
+                    this.scope.$parent[this.form.name+"Selected"] = true;
+
+
+                    this.scope.$parent.toggleFormTabs = function($event){
+                        _.map(tabs, function(itm){
+                            that.scope.$parent[itm+"Selected"] = false;
+                        });
+                        that.scope.$parent[$event.target.id.split('_tab')[0]+"Selected"] = true;
+                    };
+
+                }
+
                 for (fld in form.fields) {
                     this.scope[fld + '_field'] = form.fields[fld];
                     this.scope[fld + '_field'].name = fld;
@@ -1402,18 +1421,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                 // string to be injected into the current view.
                 //
                 var btn, button, fld, field, html = '', i, section, group,
-                    tab, sectionShow, offset, width,ngDisabled;
-
-                if (this.form.collapse && this.form.collapseMode === options.mode) {
-                    html += "<div id=\"" + this.form.name + "-collapse-0\" ";
-                    html += (this.form.collapseOpen) ? "data-open=\"true\" " : "";
-                    html += (this.form.collapseOpenFirst) ? "data-open-first=\"true\" " : "";
-                    html += "class=\"jqui-accordion\">\n";
-                    html += "<h3>" + this.form.collapseTitle + "</h3>\n";
-                    html += "<div>\n";
-                    options.collapseAlreadyStarted = true;
-                }
-
+                    tab, sectionShow, offset, width,ngDisabled, itm;
 
                 // title and exit button
                 html +=  "<div class=\"Form-header\">";
@@ -1428,13 +1436,52 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                 html += "</div>\n"; //end of Form-header
 
+                if (this.form.tabs) {
+                    var collection;
+                    html += "<div class=\"Form-tabHolder\">";
+
+                    if(this.mode === "edit"){
+                        html += "<div id=\"" + this.form.name + "_tab\""+
+                            "class=\"Form-tab\" "+
+                            "ng-click=\"toggleFormTabs($event)\"" +
+                            "ng-class=\"{'is-selected': " + this.form.name + "Selected }\">Details</div>";
+
+                        for (itm in this.form.related) {
+                            collection = this.form.related[itm];
+                            html += "<div id=\"" + itm + "_tab\" "+
+                                "class=\"Form-tab\" "+
+                                "ng-click=\"toggleFormTabs($event)\"" +
+                                "ng-class=\"{'is-selected': " + itm + "Selected }\">" + (collection.title || collection.editTitle) +
+                                "</div>\n";
+                        }
+                    }
+                    else if(this.mode === "add"){
+                        html += "<div id=\"" + this.form.name + "_tab\""+
+                            "class=\"Form-tab is-selected\">Details</div>";
+
+                        for (itm in this.form.related) {
+                            collection = this.form.related[itm];
+                            html += "<div id=\"" + itm + "_tab\" "+
+                                "class=\"Form-tab Form-tab--disabled\">" + (collection.title || collection.editTitle) +
+                                "</div>\n";
+                        }
+                    }
+
+                    html += "</div>";//tabHolder
+                }
+
+                if(this.form.tabs && this.mode === "edit"){
+                    html += "<div class=\"Form-tabSection\" "+
+                            "ng-class=\"{'is-selected': " + this.form.name + "Selected }\">";
+                }
+
                 html += "<form class=\"Form";
                 html += (this.form.horizontal) ? "form-horizontal" : "";
                 html += (this.form['class']) ? ' ' + this.form['class'] : '';
                 html += "\" name=\"" + this.form.name + "_form\" id=\"" + this.form.name + "_form\" autocomplete=\"off\" novalidate>\n";
                 html += "<div ng-show=\"flashMessage != null && flashMessage != undefined\" class=\"alert alert-info\">{{ flashMessage }}</div>\n";
 
-                if (this.form.tabs) {
+                if (this.form.licenseTabs) {
                     html += "<ul id=\"" + this.form.name + "_tabs\" class=\"nav nav-tabs\">\n";
                     for (i = 0; i < this.form.tabs.length; i++) {
                         tab = this.form.tabs[i];
@@ -1574,17 +1621,28 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                             html += "</div>\n";
                         }
 
+                        if(this.form.tabs && this.mode === "edit"){
+                            var collection1;
+                            html += "</div>\n"; // end of form's Form-tabSection
+
+                            for (itm in this.form.related) {
+                                collection1 = this.form.related[itm];
+
+                                html += "<div class=\"Form-tabSection\" "+
+                                    "ng-class=\"{'is-selected': " + itm + "Selected }\">";
+                                if (collection1.generateList) {
+                                    html += GenerateList.buildHTML(collection1, { mode: 'edit' });
+                                }
+                                else {
+                                    html += this.GenerateColleciton({ form: this.form, related: itm }, options);
+                                }
+                                html += "</div>\n";
+                            }
+                        }
+
                     }
                 }
 
-                if (this.form.collapse && this.form.collapseMode === options.mode) {
-                    html += "</div>\n";
-                }
-
-                if ((!this.modal) && options.related && this.form.related) {
-                    html += this.buildCollections(options);
-                }
-
                 return html;
             },