diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less
index a9854adb97..5b017169fd 100644
--- a/awx/ui/client/legacy-styles/forms.less
+++ b/awx/ui/client/legacy-styles/forms.less
@@ -157,6 +157,39 @@
     border:1px solid @field-border-sel;
 }
 
+.ui-spinner{
+    height: 30px;
+    background-color: @field-secondary-bg;
+    border-radius: 5px;
+    border:1px solid @field-border;
+    color: @field-input-text;
+}
+
+.ui-spinner-input{
+    color: @field-input-text;
+    background-color: @field-secondary-bg;
+}
+
+.ui-spinner-input:focus{
+    outline: none;
+}
+
+.ui-spinner-button{
+    border-left:1px solid @field-border!important;
+    background-color: @field-button-bg !important;
+}
+
+.ui-spinner-button:hover{
+    background-color:@field-button-hov !important;
+    cursor: pointer!important;
+}
+
+.Form-numberInputButton{
+    color: @field-label!important;
+    font-size: 14px;
+
+}
+
 .Form-dropDown {
     height: 30px !important;
     background-color: @field-secondary-bg!important;
diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index 357988c986..54e955605a 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -733,6 +733,10 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
                     max: elm.attr('max'),
                     numberFormat: "d",
                     disabled: (elm.attr('readonly')) ? true : false,
+                    icons: {
+                        down: "Form-numberInputButton fa fa-angle-down",
+                        up: "Form-numberInputButton fa fa-angle-up"
+                    },
                     spin: function(e, u) {
                         ctrl.$setViewValue(u.value);
                         ctrl.$setValidity('required',true);
@@ -753,6 +757,8 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
                     opts.disabled = true;
                 }
                 $(elm).spinner(opts);
+                $('.ui-icon').text('');
+                $(".ui-icon").removeClass('ui-icon ui-icon-triangle-1-n ui-icon-triangle-1-s');
                 $(elm).on("click", function () {
                     $(elm).select();
                 });