diff --git a/awx/ui/client/src/instance-groups/instance-group.block.less b/awx/ui/client/src/instance-groups/instance-group.block.less
index b6ba5c6c38..e7876d1166 100644
--- a/awx/ui/client/src/instance-groups/instance-group.block.less
+++ b/awx/ui/client/src/instance-groups/instance-group.block.less
@@ -1,7 +1,17 @@
 .InstanceGroups {
     .at-Row-actions{
-        width: 700px;
-        justify-content: flex-end;
+        justify-content: flex-start;
+        width: 300px;
+       & > capacity-bar:only-child{
+            margin-left: 0px;
+            margin-top: 5px
+        }
+    }
+    .at-RowAction{
+        margin: 0;
+    }
+    .at-Row-links{
+        justify-content: flex-start;
     }
 
     .BreadCrumb-menuLinkImage:hover {
@@ -86,9 +96,36 @@
     .ContainerGroups-codeMirror{
         margin-bottom: 10px;
     }
+
+    .at-Row-container{
+    flex-wrap: wrap;
+    }
+
+    @media screen and (max-width: 1060px) and (min-width: 769px){
+        .at-Row-links {
+            justify-content: flex-start;
+            flex-wrap: wrap;
+        }
+    }
+
+    @media screen and (min-width: 1061px){
+        .at-Row-actions{
+            justify-content: flex-end;
+            & > capacity-bar:only-child {
+                margin-right: 30px;
+            }
+        }
+        .instanceGroupsList-details{
+            display: flex;
+        }
+        .at-Row-links {
+            justify-content: flex-end;
+            display: flex;
+            width: 445px;
+        }
+    }
 }
-.at-Row-links {
-justify-content: flex-end;
-display: flex;
-flex-grow: 1;
-}
+
+
+
+
diff --git a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
index cac555dbb0..f1e2badcbd 100644
--- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
+++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
@@ -74,6 +74,7 @@
                                     </div>
                                 </div>
                         </div>
+                        <div class="instanceGroupsList-details">
                         <div class="at-Row-links">
                             <at-row-item
                                 ng-if="!instance_group.credential"
@@ -84,6 +85,7 @@
                                 badge="true">
                             </at-row-item>
                             <at-row-item
+                                ng-class="{'at-Row-links-noCredential': !instance_group.credential}"
                                 label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RUNNING_JOBS') }}"
                                 label-state="instanceGroups.jobs({instance_group_id: {{ instance_group.id }}, job_search: {status__in: ['running,waiting']}})"
                                 value="{{ instance_group.jobs_running }}"
@@ -100,9 +102,10 @@
                         </div>
                         <div class="at-Row-actions" >
                             <capacity-bar ng-show="!instance_group.credential" label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED_CAPACITY') }}" capacity="instance_group.consumed_capacity" total-capacity="instance_group.capacity"></capacity-bar>
-                            <at-row-action icon="fa-trash" ng-click="vm.deleteInstanceGroup(instance_group)" ng-if="vm.rowAction.trash(instance_group)">
+                            <at-row-action ng-class="{'at-Row-actions-noCredential': !instance_group.credential}" icon="fa-trash" ng-click="vm.deleteInstanceGroup(instance_group)" ng-if="vm.rowAction.trash(instance_group)">
                             </at-row-action>
                         </div>
+                        </div>
                     </div>
                 </div>
             </at-row>