diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less
index 321631559a..06e7d34685 100644
--- a/awx/ui/client/lib/components/list/_index.less
+++ b/awx/ui/client/lib/components/list/_index.less
@@ -262,6 +262,12 @@
     }
 }
 
+@media screen and (max-width: @at-breakpoint-instances-wrap) {
+    .at-Row-items--instances {
+        margin-bottom: @at-padding-bottom-instances-wrap;
+    }
+}
+
 @media screen and (max-width: @at-breakpoint-compact-list) {
     .at-Row-actions {
         flex-direction: column;
diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less
index 89261e5dc9..3317148e4f 100644
--- a/awx/ui/client/lib/theme/_variables.less
+++ b/awx/ui/client/lib/theme/_variables.less
@@ -247,6 +247,7 @@
 @at-padding-list-row-item-tag: 0 @at-space-2x;
 @at-padding-list-row-action: 7px;
 @at-padding-list-row: 10px 20px 10px 10px;
+@at-padding-bottom-instances-wrap: 30px;
 
 @at-margin-input-message: @at-space;
 @at-margin-item-column: @at-space-3x;
@@ -332,3 +333,4 @@
 
 @at-breakpoint-mobile-layout: @at-breakpoint-sm;
 @at-breakpoint-compact-list: @at-breakpoint-sm;
+@at-breakpoint-instances-wrap: 1036px;
diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
index 01868ef35d..9d5f9a8069 100644
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
@@ -58,7 +58,7 @@
                     </div>
                 </div>
 
-                <div class="at-Row-items">
+                <div class="at-Row-items at-Row-items--instances">
                     <at-row-item header-value="{{ instance.hostname }}"></at-row-item>
                     <at-row-item
                         label-value="Running Jobs"