diff --git a/core/src/main/resources/hudson/model/View/newJob.jelly b/core/src/main/resources/hudson/model/View/newJob.jelly
index 5d0f5cc77a5f..cdb6f9a3ca52 100644
--- a/core/src/main/resources/hudson/model/View/newJob.jelly
+++ b/core/src/main/resources/hudson/model/View/newJob.jelly
@@ -29,17 +29,16 @@ THE SOFTWARE.
   <l:layout type="one-column" permission="${permission}" title="${%NewJob(it.newPronoun)}">
 
     <l:js src="jsbundles/add-item.js" />
-    <l:css src="jsbundles/add-itaem.css" />
 
     <l:main-panel>
       <h1>${%New item}</h1>
 
-    <div class="" id="add-item-panel" style="display: none;">
+    <div class="jenkins-form" id="add-item-panel">
       <div >
         <div>
           <form method="post" action="createItem" name="createItem" id="createItem">
 
-            <div class="jenkins-form-item add-item-name">
+            <div class="jenkins-form-item">
               <label for="name" class="jenkins-form-label">${%ItemName.label}</label>
               <input name="name" class="jenkins-input" id="name" data-valid="false" type="text" tabindex="0" />
               <div class="input-help">&#187; ${%ItemName.help}</div>
@@ -48,21 +47,23 @@ THE SOFTWARE.
               <div id="itemtype-required" class="input-validation-message input-message-disabled">&#187; ${%ItemType.validation.required}</div>
             </div>
 
-            <div id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" data-valid="false" />
-
-            <j:if test="${!empty(app.itemMap)}">
-              <div class="item-copy">
-                <p class="description"></p>
-                <div class="add-item-copy jenkins-radio">
-                  <input class="jenkins-radio__input" type="radio" name="mode" value="copy" />
-                  <label class="jenkins-radio__label">${%CopyOption.label}</label>
-                  <p class="jenkins-radio__description">${%CopyOption.description}</p>
-                  <div>
-                    <s:textbox id="from" data-valid="false" name="from" placeholder="${%CopyOption.placeholder}" field="copyNewItemFrom"/>
+            <div class="jenkins-form-item">
+              <div id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" data-valid="false" />
+  
+              <j:if test="${!empty(app.itemMap)}">
+                <div class="item-copy">
+                  <p class="description"></p>
+                  <div class="add-item-copy jenkins-radio">
+                    <input class="jenkins-radio__input" id="copy" type="radio" name="mode" value="copy" />
+                    <label class="jenkins-radio__label" for="copy">${%CopyOption.label}</label>
+                    <p class="jenkins-radio__description">${%CopyOption.description}</p>
+                    <div class="jenkins-radio__content">
+                      <s:textbox id="from" data-valid="false" name="from" placeholder="${%CopyOption.placeholder}" field="copyNewItemFrom"/>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </j:if>
+              </j:if>
+            </div>
 
             <div class="footer">
               <div class="btn-decorator">
diff --git a/war/src/main/js/add-item.js b/war/src/main/js/add-item.js
index d53c61c73ce0..b7222cc92d4e 100644
--- a/war/src/main/js/add-item.js
+++ b/war/src/main/js/add-item.js
@@ -45,7 +45,7 @@ $.when(getItems()).done(function(data) {
     }
 
     function isItemNameEmpty() {
-      var itemName = $('input[name="name"]', '#createItem').val();
+      var itemName = $('#name', '#createItem').val();
       return (itemName === '') ? true : false;
     }
 
@@ -135,7 +135,6 @@ $.when(getItems()).done(function(data) {
       setFieldValidationStatus('from', false);
     }
 
-
     //////////////////////////////////
     // Draw functions
 
@@ -144,7 +143,7 @@ $.when(getItems()).done(function(data) {
       var $items = $('<div/>');
       var $catHeader = $('<div />');
       var title = '<label class="jenkins-form-label">' + category.name + '</label>';
-      var description = '<p>' + category.description + '</p>';
+      var description = '<p class="jenkins-form-description">' + category.description + '</p>';
 
       // Add items
       $.each(category.items, function(i, elem) {
@@ -272,22 +271,21 @@ $.when(getItems()).done(function(data) {
     $("#add-item-panel").find("#name").focus();
 
     // Init NameField
-    $('input[name="name"]', '#createItem').on("blur input", function() {
+    $('#name', '#createItem').on("blur input", function() {
+      
       if (!isItemNameEmpty()) {
-        var itemName = $('input[name="name"]', '#createItem').val();
+        var itemName = $('#name', '#createItem').val();
 
         console.log(itemName)
 
         $.get("checkJobName", { value: itemName }).done(function(data) {
           var message = parseResponseFromCheckJobName(data);
 
-          console.log(message)
-
           if (message !== '') {
-            activateValidationMessage('#itemname-invalid', '.add-item-name', message);
+            activateValidationMessage('#itemname-invalid', '#name', message);
           } else {
-            cleanValidationMessages('.add-item-name');
-            showInputHelp('.add-item-name');
+            cleanValidationMessages('#name');
+            showInputHelp('#name');
             setFieldValidationStatus('name', true);
             if (getFormValidationStatus()) {
               enableSubmit(true);
@@ -297,8 +295,8 @@ $.when(getItems()).done(function(data) {
       } else {
         enableSubmit(false);
         setFieldValidationStatus('name', false);
-        cleanValidationMessages('.add-item-name');
-        activateValidationMessage('#itemname-required', '.add-item-name');
+        cleanValidationMessages('#name');
+        activateValidationMessage('#itemname-required', '#name');
       }
     });
 
@@ -311,7 +309,7 @@ $.when(getItems()).done(function(data) {
         $('#createItem').find('input[type="radio"][value="copy"]').prop('checked', true);
         setFieldValidationStatus('from', true);
         if (!getFieldValidationStatus('name')) {
-          activateValidationMessage('#itemname-required', '.add-item-name');
+          activateValidationMessage('#itemname-required', '#name');
           setTimeout(function() {
             $('input[name="name"][type="text"]', '#createItem').focus();
           }, 400);
@@ -328,11 +326,11 @@ $.when(getItems()).done(function(data) {
       if (!getFormValidationStatus()) {
         event.preventDefault();
         if (!getFieldValidationStatus('name')) {
-          activateValidationMessage('#itemname-required', '.add-item-name');
+          activateValidationMessage('#itemname-required', '#name');
           $('input[name="name"][type="text"]', '#createItem').focus();
         } else {
           if (!getFieldValidationStatus('items') && !getFieldValidationStatus('from'))  {
-            activateValidationMessage('#itemtype-required', '.add-item-name');
+            activateValidationMessage('#itemtype-required', '#name');
             $('input[name="name"][type="text"]', '#createItem').focus();
           }
         }
diff --git a/war/src/main/js/widgets/add/addform.less b/war/src/main/js/widgets/add/addform.less
deleted file mode 100644
index 89be40f4d7d7..000000000000
--- a/war/src/main/js/widgets/add/addform.less
+++ /dev/null
@@ -1,333 +0,0 @@
-@import '../../../less/abstracts/theme.less';
-
-#add-item-panel {
-
-  form > .header {
-    position: relative;
-    border: 1px solid var(--input-border);
-    border-bottom: none;
-    background: var(--light-grey);
-    -webkit-border-top-left-radius: 3px;
-    -moz-border-top-left-radius: 3px;
-    border-top-left-radius: 3px;
-    -webkit-border-top-right-radius: 3px;
-    -moz-border-top-right-radius: 3px;
-    border-top-right-radius: 3px;
-    z-index: 5;
-  }
-
-  form > .footer {
-    position: relative;
-    border: 1px solid var(--input-border);
-    border-top: none;
-    background: var(--light-grey);
-    height: 110px;
-
-    .btn-decorator {
-      position: absolute;
-      bottom: 0px;
-      padding: 20px 30px;
-      width: auto;
-      border-top-right-radius: 10px;
-      border: 1px solid var(--add-item-btn-decorator-border-color);
-      background: var(--add-item-btn-decorator-bg-color);
-      text-align: center;
-      z-index: 10;
-
-      input[type=checkbox] {
-        width: auto;
-        min-width: auto;
-        margin-right: 0px;
-      }
-    }
-  }
-
-  .add-item-name {
-    padding: 20px;
-
-    label {
-      position: relative;
-      padding-bottom: 10px;
-    }
-  }
-
-  .item-copy {
-    position: relative;
-    border: 1px solid var(--input-border);
-    border-top: none;
-    padding: 20px;
-    background-color: var(--light-grey);
-
-    p.description {
-      font-size: var(--font-size-base);
-      margin-top: 0;
-    }
-
-    .add-item-copy {
-      position: relative;
-      padding-left: 58px;
-
-      /* This is needed because <s:textbox /> included YUI styles and we need to override this one */
-      font-family: var(--font-family-sans) !important;
-
-      input[type=radio] {
-        display: none;
-      }
-
-      label {
-        line-height: 48px;
-        padding: 0 10px 0 0;
-      }
-
-      input {
-        font-size: inherit;
-      }
-
-      .icon {
-        left: 0;
-        top: 0;
-      }
-    }
-  }
-
-  .add-item-name, .add-item-copy {
-    .input-help {
-      color: #666;
-      font-style: italic;
-      font-size: var(--font-size-sm);
-      padding-top: 2px;
-    }
-
-    .input-validation-message {
-      color: red;
-      padding-top: 2px;
-      font-weight: bold;
-    }
-
-    .input-message-disabled {
-      display: none;
-    }
-  }
-
-
-  .icon {
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    height: 48px;
-    width: 48px;
-    background: var(--input-color);
-    border: 1px solid #6699cc;
-    border-radius: 50%;
-    opacity: .9;
-
-    img {
-      position: relative;
-    }
-  }
-
-  .icon:before {
-    content: ' ';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 24px;
-    border-top-left-radius: 24px;
-    border-top-right-radius: 24px;
-    background: #C0D8E2;
-  }
-
-  .default-icon {
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    height: 48px;
-    width: 48px;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 48px;
-    font-weight: bold;
-    font-size: 175%;
-    color: #ffffff;
-    text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 1px;
-    opacity: .75;
-
-    .b {
-      text-transform: lowercase;
-    }
-  }
-
-  .c-D33833 {
-    border: 1px solid #900;
-    box-shadow:
-      inset #900 0 0 1px,
-      inset #fff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #903,
-      inset -5px -10px 15px 14px #D33833
-  }
-
-  .c-6D6B6D {
-    border: 1px solid #000;
-    box-shadow:
-      inset #333 0 0 1px,
-      inset #fff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #222,
-      inset -5px -10px 15px 14px #555
-  }
-
-  .c-335061 {
-    border: 1px solid #356;
-    box-shadow:
-      inset #024 0 0 1px,
-      inset #fff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #012,
-      inset -5px -10px 15px 14px #335061
-  }
-
-  .c-49728B {
-    border: 1px solid #036;
-    box-shadow:
-      inset #036 0 0 1px,
-      inset #fff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #036,
-      inset -5px -10px 15px 14px #49728B
-  }
-
-  .c-6699CC {
-    border: 1px solid #6699cc;
-    box-shadow:
-      inset #003399 0 0 1px,
-      inset #ffffff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #336699,
-      inset -5px -10px 15px 14px #6699cc;
-  }
-
-  input {
-    padding: 5px 10px;
-    width: 50%;
-    min-width: 300px;
-  }
-
-  .categories {
-    border: 1px solid var(--input-border);
-    background-color: var(--very-light-grey);
-
-    .category {
-      border-bottom: 1px solid var(--input-border);
-      padding: 10px;
-
-      .header {
-        padding: 0 20px;
-
-        h2 {
-          margin: 0;
-          padding: 15px 0 0;
-        }
-
-        p {
-          margin-top: 5px;
-        }
-      }
-    }
-
-    .category:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .categories.flat {
-    .category {
-      padding: 0 10px;
-      border-bottom: none;
-
-      .header {
-        display: none;
-      }
-    }
-
-    .category:first-child {
-      padding: 10px 10px 0 10px;
-    }
-
-    .category:last-child {
-      padding: 0 10px 10px 10px;
-    }
-  }
-
-}
-
-.j-item-options li, .j-item-options {
-  display: block;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: relative;
-}
-
-.j-item-options {
-
-  li:hover, li:focus {
-    border-color: var(--input-border);
-    background: var(--light-bg-color--hover);
-    outline: 0;
-  }
-
-  li.active {
-    cursor: text;
-    background-color: var(--background);
-    border-color: var(--input-border);
-    box-shadow: inset 999rem 0 var(--background);
-    -webkit-touch-callout: text;
-    -webkit-user-select: text;
-    -khtml-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
-    user-select: text;
-    -moz-transition: .5s;
-    -webkit-transition: .5s;
-    -o-transition: .5s;
-    transition: .5s;
-
-    .icon {
-      opacity: 1
-    }
-  }
-
-  li {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    border: 1px solid transparent;
-    border-radius: 3px;
-    padding: 10px 10px 10px 68px;
-    min-height: 68px;
-    margin: 2px 0;
-
-    label {
-      display: block;
-      font-size: var(--font-size-base);
-      font-weight: bold;
-      color: var(--text-color);
-      padding-bottom: 5px;
-      cursor: pointer;
-
-      input {
-        position: absolute;
-        top: 24px;
-        left: 25px;
-        display: none;
-      }
-    }
-  }
-}
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index c81f0f89149e..289364284169 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -6,6 +6,10 @@ h1 {
   padding: 30px;
 }
 
+.jenkins-form {
+  max-width: 80ch;
+}
+
 .jenkins-form-item {
   margin-bottom: 30px;
 }
@@ -19,9 +23,17 @@ h1 {
 .jenkins-form-label {
   display: block;
   font-weight: bold;
+  margin-top: 0;
   margin-bottom: 10px;
 }
 
+.jenkins-form-description {
+  display: block;
+  opacity: 0.5;
+  margin-top: 0;
+  margin-bottom: 12px;
+}
+
 .jenkins-input {
   display: block;
   border: 3px solid rgba(0,0,0,0.2);
@@ -109,6 +121,11 @@ h1 {
     margin: 0 0 0 34px;
     opacity: 0.5;
   }
+
+  &__content {
+    margin: 0 0 0 34px;
+    margin-top: 8px;
+  }
 }
 
 .jenkins-button {
@@ -141,3 +158,23 @@ h1 {
     pointer-events: none;
   }
 }
+
+#add-item-panel {
+
+  .input-help {
+    color: #666;
+    font-style: italic;
+    font-size: var(--font-size-sm);
+    padding-top: 2px;
+  }
+
+  .input-validation-message {
+    color: red;
+    padding-top: 2px;
+    font-weight: bold;
+  }
+
+  .input-message-disabled {
+    display: none;
+  }
+}
diff --git a/war/webpack.config.js b/war/webpack.config.js
index 37a5b08ec07d..2a56d4513261 100644
--- a/war/webpack.config.js
+++ b/war/webpack.config.js
@@ -20,7 +20,6 @@ module.exports = (env, argv) => ({
     ],
     "add-item": [
       path.join(__dirname, "src/main/js/add-item.js"),
-      path.join(__dirname, "src/main/js/add-item.less"),
     ],
     "config-scrollspy": [
       path.join(__dirname, "src/main/js/config-scrollspy.js"),