diff --git a/awx/ui/client/lib/components/layout/_index.less b/awx/ui/client/lib/components/layout/_index.less
index 8554e01158..7b8e1977ab 100644
--- a/awx/ui/client/lib/components/layout/_index.less
+++ b/awx/ui/client/lib/components/layout/_index.less
@@ -1,5 +1,5 @@
 .at-Layout {
-    height: 100vh;
+    min-height: 100vh;
     width: 100vw;
     display: flex;
 
@@ -82,17 +82,21 @@
         }
     }
 
-    &-side {
+    &-sideContainer {
         background: @at-color-side-nav-background;
-        position: fixed;
-        bottom: 0;
-        top: @at-height-top-side-nav-makeup;
-        overflow-y: auto;
-        max-height: 100vh;
-        min-width: @at-width-collapsed-side-nav;
+    }
+
+    &-side {
+        // background: @at-color-side-nav-background;
+        // position: fixed;
+        // bottom: 0;
+        margin-top: @at-height-top-side-nav-makeup;
+        // overflow-y: auto;
+        // max-height: 100vh;
+        // min-width: @at-width-collapsed-side-nav;
         width: @at-width-collapsed-side-nav;
-        overflow-x: hidden;
-        z-index: @at-z-index-side-nav;
+        // overflow-x: hidden;
+        // z-index: @at-z-index-side-nav;
 
         .at-Popover-container {
             margin-top: 2px;
@@ -201,7 +205,6 @@
         height: 100%;
         width: 100%;
         flex-direction: column;
-        padding-left: @at-width-collapsed-side-nav;
         padding-bottom: @at-space-4x;
         overflow-x: hidden;
     }
@@ -262,7 +265,7 @@
 }
 .twr-nav-dropdown-content {
     display: none;
-    position: fixed;
+    position: absolute;
     background-color: #848992;
     min-width: 140px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
@@ -271,7 +274,7 @@
     z-index: 2000;
 }
 
-.at-Layout-side--expanded {
+.at-Layout-side--expanded + .twr-nav-dropdown {
     .twr-nav-dropdown-content {
         left: @at-width-expanded-side-nav;
     }
@@ -284,12 +287,14 @@
     text-decoration: none;
     display: block;
 }
+
+// hover stuff
 .twr-nav-dropdown-content a:hover {
     background-color: #b7b7b7;
 }
-.twr-nav-dropdown:hover .twr-nav-dropdown-content {
+.twr-nav-dropdown.twr-nav-dropdown--visible .twr-nav-dropdown-content {
     display: block;
 }
-.twr-nav-dropdown:hover .nav-button {
+.twr-nav-dropdown.twr-nav-dropdown--visible .nav-button {
     background-color: #b7b7b7;
 }
\ No newline at end of file
diff --git a/awx/ui/client/lib/components/layout/layout.partial.html b/awx/ui/client/lib/components/layout/layout.partial.html
index b837c4f1e2..f66a24561d 100644
--- a/awx/ui/client/lib/components/layout/layout.partial.html
+++ b/awx/ui/client/lib/components/layout/layout.partial.html
@@ -96,15 +96,7 @@
             ng-show="$parent.layoutVm.isSuperUser || $parent.layoutVm.isOrgAdmin">
         </at-side-nav-item>
         <at-side-nav-item icon-class="fa-cog" route="settings" name="SETTINGS"
-            system-admin-only="true">
-            <!-- sub-nav dropdpown popup -->
-                <div class="twr-nav-dropdown-content">
-                    <a ui-sref="settings.form({form: 'auth'})">Authentication</a>
-                    <a ui-sref="settings.form({form: 'jobs'})">Jobs</a>
-                    <a ui-sref="settings.form({form: 'system'})">System</a>
-                    <a ui-sref="settings.form({form: 'ui'})">User Interface</a>
-                    <a ui-sref="settings.form({form: 'license'})" ng-if="vm.product === 'Tower'">License</a>
-                </div>
+            system-admin-only="true" show-settings-sub-menu="true">
         </at-side-nav-item>
     </at-side-nav>
     <div class="at-Layout-main" ng-class="{'at-Layout-main--noLicense': vm.licenseIsMissing}">
diff --git a/awx/ui/client/lib/components/layout/side-nav-item.directive.js b/awx/ui/client/lib/components/layout/side-nav-item.directive.js
index 37498c3617..95ca0e5f7c 100644
--- a/awx/ui/client/lib/components/layout/side-nav-item.directive.js
+++ b/awx/ui/client/lib/components/layout/side-nav-item.directive.js
@@ -2,6 +2,16 @@ const templateUrl = require('~components/layout/side-nav-item.partial.html');
 
 function atSideNavItemLink (scope, element, attrs, ctrl) {
     [scope.navVm, scope.layoutVm] = ctrl;
+
+    if (attrs.showSettingsSubMenu) {
+        element.hover(() => {
+            scope.navVm.showSettingsSubMenu = true;
+        }, () => {
+            // TODO: don't hide when mouse is hovering over the sub menu itself
+            // currently it closes as soon as you nav off of the settings side nav item
+            scope.navVm.showSettingsSubMenu = false;
+        });
+    }
 }
 
 function AtSideNavItemController ($scope, strings) {
diff --git a/awx/ui/client/lib/components/layout/side-nav-item.partial.html b/awx/ui/client/lib/components/layout/side-nav-item.partial.html
index 70dcc987df..ca8ff13812 100644
--- a/awx/ui/client/lib/components/layout/side-nav-item.partial.html
+++ b/awx/ui/client/lib/components/layout/side-nav-item.partial.html
@@ -1,13 +1,10 @@
-<div class="twr-nav-dropdown">
-    <a class="at-Layout-sideNavItem" ui-sref="{{ route }}" ng-class="{'is-active': vm.isRoute}"
-        ng-show="(!systemAdminOnly || layoutVm.isSuperUser) && layoutVm.isLoggedIn &&
-            !layoutVm.licenseIsMissing">
-            <at-popover state="vm.tooltip" ng-if="!navVm.isExpanded"></at-popover>
+<a class="at-Layout-sideNavItem" ui-sref="{{ route }}" ng-class="{'is-active': vm.isRoute}"
+    ng-show="(!systemAdminOnly || layoutVm.isSuperUser) && layoutVm.isLoggedIn &&
+        !layoutVm.licenseIsMissing">
+        <at-popover state="vm.tooltip" ng-if="!navVm.isExpanded"></at-popover>
 
-            <i class="fa {{ iconClass }}" ng-show="navVm.isExpanded"></i>
-            <span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded">
-                {{ layoutVm.getString(name) }}
-            </span>
-    </a>
-    <div ng-transclude></div>
-</div>
\ No newline at end of file
+        <i class="fa {{ iconClass }}" ng-show="navVm.isExpanded"></i>
+        <span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded">
+            {{ layoutVm.getString(name) }}
+        </span>
+</a>
diff --git a/awx/ui/client/lib/components/layout/side-nav.partial.html b/awx/ui/client/lib/components/layout/side-nav.partial.html
index 8996df899f..dc28846f8d 100644
--- a/awx/ui/client/lib/components/layout/side-nav.partial.html
+++ b/awx/ui/client/lib/components/layout/side-nav.partial.html
@@ -1,8 +1,18 @@
-<div class="at-Layout-side"
-    ng-class="{'at-Layout-side--expanded': vm.isExpanded && layoutVm.isLoggedIn}" ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
-        <div class="at-Layout-sideNavItem at-Layout-sideNavToggle" ng-click="vm.toggleExpansion()"
-            ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
-                <i class="fa fa-bars"></i>
+<div class="at-Layout-sideContainer" ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
+        <div class="at-Layout-side" ng-class="{'at-Layout-side--expanded': vm.isExpanded && layoutVm.isLoggedIn}">
+            <div class="at-Layout-sideNavItem at-Layout-sideNavToggle" ng-click="vm.toggleExpansion()"
+                ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
+                    <i class="fa fa-bars"></i>
+            </div>
+            <ng-transclude></ng-transclude>
+        </div>
+        <div class="twr-nav-dropdown" ng-class="{'twr-nav-dropdown--visible': vm.showSettingsSubMenu}">
+            <div class="twr-nav-dropdown-content">
+                <a ui-sref="settings.form({form: 'auth'})">Authentication</a>
+                <a ui-sref="settings.form({form: 'jobs'})">Jobs</a>
+                <a ui-sref="settings.form({form: 'system'})">System</a>
+                <a ui-sref="settings.form({form: 'ui'})">User Interface</a>
+                <a ui-sref="settings.form({form: 'license'})" ng-if="vm.product === 'Tower'">License</a>
+            </div>
         </div>
-        <ng-transclude></ng-transclude>
 </div>