diff --git a/core/src/main/resources/hudson/model/View/newJob.jelly b/core/src/main/resources/hudson/model/View/newJob.jelly
index 5467f5d9506e..cdb6f9a3ca52 100644
--- a/core/src/main/resources/hudson/model/View/newJob.jelly
+++ b/core/src/main/resources/hudson/model/View/newJob.jelly
@@ -29,40 +29,41 @@ 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-item.css" />
 
     <l:main-panel>
-    <div class="container" id="add-item-panel" style="display: none;">
-      <div class="row">
-        <div class="col-md-offset-2 col-md-20">
+      <h1>${%New item}</h1>
+
+    <div class="jenkins-form" id="add-item-panel">
+      <div >
+        <div>
           <form method="post" action="createItem" name="createItem" id="createItem">
-            <div class="header">
-              <div class="add-item-name">
-                <label for="name" class="h3">${%ItemName.label}</label>
-                <input name="name" id="name" data-valid="false" type="text" tabindex="0" />
-                <div class="input-help">&#187; ${%ItemName.help}</div>
-                <div id="itemname-required" class="input-validation-message input-message-disabled">&#187; ${%ItemName.validation.required}</div>
-                <div id="itemname-invalid" class="input-validation-message input-message-disabled"></div>
-                <div id="itemtype-required" class="input-validation-message input-message-disabled">&#187; ${%ItemType.validation.required}</div>
-              </div>
-            </div>
 
-            <div id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" data-valid="false" />
+            <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>
+              <div id="itemname-required" class="input-validation-message input-message-disabled">&#187; ${%ItemName.validation.required}</div>
+              <div id="itemname-invalid" class="input-validation-message input-message-disabled"></div>
+              <div id="itemtype-required" class="input-validation-message input-message-disabled">&#187; ${%ItemType.validation.required}</div>
+            </div>
 
-            <j:if test="${!empty(app.itemMap)}">
-              <div class="item-copy">
-                <p class="description">${%CopyOption.description}</p>
-                <div class="add-item-copy">
-                  <input type="radio" name="mode" value="copy" />
-                  <div class="icon">
-                    <img src="${resURL}/images/48x48/copy.png" />
+            <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>
-                  <label>${%CopyOption.label}</label>
-                  <j:set var="descriptor" value="${it.descriptor}" />
-                  <s:textbox id="from" data-valid="false" name="from" placeholder="${%CopyOption.placeholder}" field="copyNewItemFrom"/>
                 </div>
-              </div>
-            </j:if>
+              </j:if>
+            </div>
 
             <div class="footer">
               <div class="btn-decorator">
diff --git a/core/src/main/resources/jenkins/model/Jenkins/newView.jelly b/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
index e9ef5debb862..991cae296479 100644
--- a/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
+++ b/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
@@ -31,6 +31,7 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
 
     <l:main-panel>
+      <h1>${%New View}</h1>
       <j:invokeStatic var="views" className="hudson.model.View" method="allInstantiable" />
       <n:form nameTitle="${%View name}" action="createView" copyTitle="${%Copy Existing View}"
               descriptors="${views}" checkUrl="checkViewName" xmlns:n="/lib/hudson/newFromList" />
diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly
index b32d4aadb88c..c89086875bd1 100644
--- a/core/src/main/resources/lib/form/entry.jelly
+++ b/core/src/main/resources/lib/form/entry.jelly
@@ -72,7 +72,7 @@ THE SOFTWARE.
   <div class='tr form-group'>
     <j:choose>
       <j:when test="${possiblyEscapedTitle!=null}">
-        <div class="setting-name help-sibling">
+        <div class="jenkins-form-label help-sibling">
           <j:out value="${possiblyEscapedTitle}" />
           <f:helpLink url="${attrs.help}" featureName="${title}"/>
         </div>
diff --git a/core/src/main/resources/lib/form/form.jelly b/core/src/main/resources/lib/form/form.jelly
index f2c5a61595ce..51ae7db9068d 100644
--- a/core/src/main/resources/lib/form/form.jelly
+++ b/core/src/main/resources/lib/form/form.jelly
@@ -41,6 +41,9 @@ THE SOFTWARE.
     <st:attribute name="enctype">
       @enctype of the &lt;form> HTML element.
     </st:attribute>
+    <st:attribute name="id">
+      ID of the HTML element.
+    </st:attribute>
     <st:attribute name="target">
       @target of the &lt;form> HTML element. Works like &lt;a target="...">
       and controls which window the result of the submission goes to.
@@ -53,7 +56,7 @@ THE SOFTWARE.
       Default: false
     </st:attribute>
   </st:documentation>
-  <form action="${action}" method="${method}" enctype="${attrs.enctype}" name="${name}" target="${attrs.target}" autocomplete="${attrs.autocomplete==true?'on':'off'}">
+  <form id="${id}" action="${action}" method="${method}" enctype="${attrs.enctype}" name="${name}" target="${attrs.target}" autocomplete="${attrs.autocomplete==true?'on':'off'}">
     <div width="100%" class="${attrs.tableClass}">
       <d:invokeBody/>
     </div>
diff --git a/core/src/main/resources/lib/form/textbox.jelly b/core/src/main/resources/lib/form/textbox.jelly
index 1789a403f064..39d866672ea2 100644
--- a/core/src/main/resources/lib/form/textbox.jelly
+++ b/core/src/main/resources/lib/form/textbox.jelly
@@ -88,7 +88,7 @@ THE SOFTWARE.
 
   <f:possibleReadOnlyField>
       <m:input xmlns:m="jelly:hudson.util.jelly.MorphTagLibrary"
-               class="setting-input ${attrs.checkUrl!=null?'validated':''} ${attrs.autoCompleteUrl!=null?'auto-complete':null} ${attrs.clazz}"
+               class="jenkins-input ${attrs.checkUrl!=null?'validated':''} ${attrs.autoCompleteUrl!=null?'auto-complete':null} ${attrs.clazz}"
                name="${name}"
                value="${value}"
                type="text"
diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
index 446fb6114db5..196e334b2370 100644
--- a/core/src/main/resources/lib/hudson/newFromList/form.jelly
+++ b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -49,29 +49,40 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-
   <j:set var="descriptors" value="${h.filterDescriptors(it,attrs.descriptors)}" />
 
-  <s:form method="post" action="${attrs.action?:'createItem'}" name="createItem">
-    <s:entry title="${attrs.nameTitle}">
+  <s:form class="jenkins-form" method="post" id="createItemForm" action="${attrs.action?:'createItem'}" name="createItem">
+    <!-- View name field -->
+    <div class="jenkins-form-item">
+      <label for="name" class="jenkins-form-label">${attrs.nameTitle}</label>
       <s:textbox id="name" name="name" checkUrl="'${h.jsStringEscape(attrs.checkUrl)}?value='+encodeURIComponent(this.value)"
-                 onchange="updateOk(this.form)" onkeyup="updateOk(this.form)" />
+                 onchange="updateOk()" onkeyup="updateOk()" />
       <script>$('name').focus();</script>
-    </s:entry>
+    </div>
+
+    <!-- View name field -->
+    <div class="jenkins-form-item">
+      <fieldset class="jenkins-fieldset">
+        <legend class="jenkins-form-label">
+          View type
+        </legend>
+        <j:forEach var="descriptor" items="${descriptors}">
+          <div class="jenkins-radio">
+            <input class="jenkins-radio__input" type="radio" name="mode" id="${descriptor.id}" value="${descriptor.id}" onchange="updateOk()" onclick="updateOk()" />
+            <label for="${descriptor.id}" class="jenkins-radio__label">
+              ${descriptor.displayName}
+            </label>
+            <p class="jenkins-radio__description">
+              ${descriptor}
+            </p>
+          </div>
+        </j:forEach>
+      </fieldset>
+    </div>
 
-    <j:forEach var="descriptor" items="${descriptors}">
-      <s:block>
-        <input type="radio" name="mode" value="${descriptor.id}" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />
-        <label class="attach-previous"><b>${descriptor.displayName}</b></label>
-      </s:block>
-      <s:entry>
-        <st:set var="instance" value="${descriptor}" />
-        <st:include page="newInstanceDetail.jelly" it="${descriptor}" />
-      </s:entry>
-    </j:forEach>
     <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
       <s:block>
-        <input type="radio" id="copy" name="mode" value="copy" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />
+        <input type="radio" id="copy" name="mode" value="copy" onchange="updateOk()" onclick="updateOk()" />
         <label class="attach-previous"><b>${attrs.copyTitle}</b></label>
       </s:block>
       <s:entry>
@@ -89,32 +100,47 @@ THE SOFTWARE.
       </s:entry>
     </j:if>
 
-    <s:bottomButtonBar>
+    <div class="jenkins-form-item">
       <!--
         when there's only one radio above, form.elements['mode]' won't return an array, which makes the script complex.
         So always force non-empty array
        -->
       <input type="radio" name="mode" value="dummy1" style="display:none" />
       <input type="radio" name="mode" value="dummy2" style="display:none" />
-      <input type="submit" name="Submit" value="${%OK}" id="ok" style="margin-left:5em" />
-    </s:bottomButtonBar>
+      <button type="submit" id="ok" class="jenkins-button">
+        ${%OK}
+      </button>
+    </div>
   </s:form>
+  
   <script><![CDATA[
-    var okButton = makeButton($('ok'),null);
-
-    function updateOk(form) {
+    function updateOk() {
       function state() {
-        if($('name').value.length==0)   return true;
-        var radio = form.elements['mode'];
-        if (radio.length==2)  return false; // this means we only have dummy checkboxes
-        for(i=0;i<radio.length;i++)
-          if(radio[i].checked)
+        let form = document.getElementById("createItemForm");
+        let nameInput = document.getElementById("name");
+        let radios = form.querySelectorAll('input[type="radio"]');
+
+        if (nameInput.value.length == 0) {
+          return true;
+        }
+
+        // this means we only have dummy checkboxes
+        if (radios.length == 2) {
+          return true;
+        }
+
+        for (i = 0; i < radios.length; i++) {
+          if (radios[i].checked) {
             return false;
+          }
+        }
+
         return true;
       }
-
-      okButton.set('disabled',state(),false);
+      
+      document.getElementById("ok").disabled = state();
     }
-    updateOk(okButton.getForm());
+    
+    updateOk();
   ]]></script>
 </j:jelly>
diff --git a/war/src/main/js/add-item.js b/war/src/main/js/add-item.js
index 1034feae8ebf..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,16 +135,15 @@ $.when(getItems()).done(function(data) {
       setFieldValidationStatus('from', false);
     }
 
-
     //////////////////////////////////
     // Draw functions
 
     function drawCategory(category) {
       var $category = $('<div/>').addClass('category').attr('id', 'j-add-item-type-' + cleanClassName(category.id));
-      var $items = $('<ul/>').addClass('j-item-options');
-      var $catHeader = $('<div class="header" />');
-      var title = '<h2>' + category.name + '</h2>';
-      var description = '<p>' + category.description + '</p>';
+      var $items = $('<div/>');
+      var $catHeader = $('<div />');
+      var title = '<label class="jenkins-form-label">' + category.name + '</label>';
+      var description = '<p class="jenkins-form-description">' + category.description + '</p>';
 
       // Add items
       $.each(category.items, function(i, elem) {
@@ -160,30 +159,26 @@ $.when(getItems()).done(function(data) {
     }
 
     function drawItem(elem) {
-      var item = document.createElement('li');
-      item.tabIndex = 0;
-      item.className = cleanClassName(elem.class);
-      item.setAttribute('role', 'radio');
-      item.setAttribute('aria-checked', 'false');
-
-      var label = item.appendChild(document.createElement('label'));
+      var item = document.createElement('div');
+      item.className = 'jenkins-radio';
 
-      var radio = label.appendChild(document.createElement('input'));
+      var radio = item.appendChild(document.createElement('input'));
       radio.type = 'radio';
       radio.name = 'mode';
+      radio.className= 'jenkins-radio__input';
       radio.value = elem.class;
 
-      var displayName = label.appendChild(document.createElement('span'));
-      displayName.className = 'label';
+      var displayName = item.appendChild(document.createElement('span'));
+      displayName.className = 'jenkins-radio__label';
 
       displayName.appendChild(document.createTextNode(elem.displayName));
 
       var desc = item.appendChild(document.createElement('div'));
-      desc.className = 'desc';
+      desc.className = 'jenkins-radio__description';
       desc.innerHTML = checkForLink(elem.description);
 
-      var iconDiv = drawIcon(elem);
-      item.appendChild(iconDiv);
+      // var iconDiv = drawIcon(elem);
+      // item.appendChild(iconDiv);
 
       function select(e) {
         e.preventDefault();
@@ -267,7 +262,7 @@ $.when(getItems()).done(function(data) {
     $('#add-item-panel').removeAttr('style');
 
     // Render all categories
-    var $categories = $('div.categories');
+    var $categories = $('#items');
     $.each(data.categories, function(i, elem) {
       drawCategory(elem).appendTo($categories);
     });
@@ -276,16 +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);
+
           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);
@@ -295,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');
       }
     });
 
@@ -309,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);
@@ -326,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/base-styles-v2.less b/war/src/main/less/base-styles-v2.less
index f4e1075a409e..5b74cbc6392e 100644
--- a/war/src/main/less/base-styles-v2.less
+++ b/war/src/main/less/base-styles-v2.less
@@ -21,6 +21,7 @@ html {
 @import './base/typography.less';
 @import './base/layout-commons.less';
 @import './base/style.less';
+@import './modules/form.less';
 @import './base/visibility-utils.less';
 @import './base/yui-compatibility.less';
 @import './modules/icon-size.less';
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index e45fa5524358..001e5d69c889 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -111,3 +111,184 @@
     transform: rotate(360deg);
   }
 }
+
+h1 {
+  margin-bottom: 30px;
+}
+
+#main-panel {
+  padding: 30px;
+}
+
+.jenkins-form {
+  max-width: 80ch;
+}
+
+.jenkins-form-item {
+  margin-bottom: 30px;
+}
+
+.jenkins-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.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);
+  padding: 8px;
+  border-radius: 6px;
+  width: 300px;
+  box-shadow: 0 0 0 10px transparent;
+  transition: 0.2s ease;
+
+  &:hover {
+    border-color: rgba(0,0,0,0.5);
+    box-shadow: 0 0 0 5px var(--focus-color);
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+    border-color: rgba(0,0,0,1);
+    box-shadow: 0 0 0 5px var(--focus-color);
+  }
+}
+
+:root {
+  --focus-color: rgba(0, 0, 0, 0.1);
+  --focus-hover-color: rgba(0, 0, 0, 0.05);
+}
+
+.jenkins-radio {
+  &:not(:last-of-type) {
+    margin-bottom: 20px;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+  }
+
+  &__label {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 1px 34px 5px;
+    cursor: pointer;
+    font-weight: bold;
+    // remove 300ms pause on mobile
+    touch-action: manipulation;
+
+    &::before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      width: 24px;
+      height: 24px;
+
+      border: 3px solid currentColor;
+      border-radius: 50%;
+      background: transparent;
+      opacity: 0.2;
+      box-shadow: 0 0 0 15px transparent;
+
+      transition: 0.2s ease;
+    }
+
+    &:hover::before {
+      border-width: 5px;
+      opacity: .5;
+      box-shadow: 0 0 0 5px var(--focus-color);
+    }
+  }
+
+  &__input:focus + &__label:before, &__input:active + &__label:before {
+    box-shadow: 0 0 0 5px var(--focus-color)!important;
+    opacity: 1;
+  }
+
+  &__input:checked + &__label:before {
+    border-width: 8px;
+    opacity: 1;
+  }
+
+  &__description {
+    margin: 0 0 0 34px;
+    opacity: 0.5;
+  }
+
+  &__content {
+    margin: 0 0 0 34px;
+    margin-top: 8px;
+  }
+}
+
+.jenkins-button {
+  position: relative;
+  border: none!important;
+  padding: 10px 8px!important;
+  border-radius: 6px!important;
+  box-shadow: 0 0 0 10px transparent;
+  transition: 0.2s ease!important;
+  background: black!important;
+  color: white!important;
+  margin: 0!important;
+  min-width: 90px!important;
+  min-height: 0!important;
+  font-weight: 600;
+  cursor: pointer;
+  
+  &:hover {
+    box-shadow: 0 0 0 5px var(--focus-hover-color)!important;
+    opacity: 0.85;
+  }
+  
+  &:active, &:focus {
+    box-shadow: 0 0 0 5px var(--focus-color)!important;
+    opacity: 0.7;
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    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 9e90eaf11444..93c1ce70c1d0 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"),