diff --git a/Web/Controller/Bids.hs b/Web/Controller/Bids.hs
index 4821466..397089f 100644
--- a/Web/Controller/Bids.hs
+++ b/Web/Controller/Bids.hs
@@ -154,8 +154,7 @@ createMailBid bid = do
 
                     createMailBid mailBid
 
-                    Just mailBid
-                        |> pure
+                    Just mailBid |> pure
                 else
                     pure Nothing
 
diff --git a/Web/Controller/Items.hs b/Web/Controller/Items.hs
index ae8cebb..8715cb3 100644
--- a/Web/Controller/Items.hs
+++ b/Web/Controller/Items.hs
@@ -12,6 +12,7 @@ import Config
 instance Controller ItemsController where
     action ItemsAction = do
         items <- query @Item
+                |> orderByDesc #id
                 |> fetch
                 >>= collectionFetchRelated #bids
 
diff --git a/Web/View/Items/New.hs b/Web/View/Items/New.hs
index 36be834..a9e8508 100644
--- a/Web/View/Items/New.hs
+++ b/Web/View/Items/New.hs
@@ -5,6 +5,9 @@ data NewView = NewView { item :: Item, bidSteps :: [BidStep] }
 
 instance View NewView where
     html NewView { .. } = [hsx|
+
+        <script src={assetPath "/multiple-field.js"} />
+
         <nav>
             <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a href={ItemsAction}>Items</a></li>
@@ -19,37 +22,53 @@ renderForm :: Item -> [BidStep] -> Html
 renderForm item bidSteps = formFor item [hsx|
     {(textField #title)}
 
-    {forEachWithIndex bidSteps renderFormBidStep}
+    <div class="multiple-field-wrapper border p-4 my-4">
+
+        <div class="multiple-field-inner">
+            {forEachWithIndex bidSteps renderFormBidStep}
+
+        </div>
+
+
+
+        <div class="multiple-field-add btn btn-secondary mt-4">Add Another Bid Step</div>
+    </div>
 
     {submitButton}
 |]
 
 -- renderFormBidStep :: BidStep -> Html
 renderFormBidStep (index, bidStep) = [hsx|
-    <h3>Bid Step #{index + 1}</h3>
-    <div class="form-group">
-        <label>
-            Min
-        </label>
-        <input type="number" name="min" value="{get #min bidStep}" class={classes ["form-control", ("is-invalid", isInvalidMin)]}/>
-        {minFeedback}
-    </div>
+    <fieldset class="multiple-field border p-4 my-4">
+        <div class="d-flex flex-row justify-content-between">
+            <h3>Bid Step</h3>
+            <a class="multiple-field-remove" href="javascript:void(0)">X</a>
+        </div>
 
-    <div class="form-group">
-        <label>
-            Max
-        </label>
-        <input type="number" name="max" value="{get #max bidStep}" class={classes ["form-control", ("is-invalid", isInvalidMax)]}/>
-        {maxFeedback}
-    </div>
+        <div class="form-group">
+            <label>
+                Min
+            </label>
+            <input type="number" name="min" value="{get #min bidStep}" class={classes ["form-control", ("is-invalid", isInvalidMin)]}/>
+            {minFeedback}
+        </div>
 
-    <div class="form-group">
-        <label>
-            Step
-        </label>
-        <input type="number" name="max" value="{get #step bidStep}" class={classes ["form-control", ("is-invalid", isInvalidStep)]}/>
-        {stepFeedback}
-    </div>
+        <div class="form-group">
+            <label>
+                Max
+            </label>
+            <input type="number" name="max" value="{get #max bidStep}" class={classes ["form-control", ("is-invalid", isInvalidMax)]}/>
+            {maxFeedback}
+        </div>
+
+        <div class="form-group">
+            <label>
+                Step
+            </label>
+            <input type="number" name="max" value="{get #step bidStep}" class={classes ["form-control", ("is-invalid", isInvalidStep)]}/>
+            {stepFeedback}
+        </div>
+    </fieldset>
 |]
     where
         isInvalidMin = isJust (getValidationFailure #min bidStep)
diff --git a/static/multiple-field.js b/static/multiple-field.js
new file mode 100644
index 0000000..ddf2304
--- /dev/null
+++ b/static/multiple-field.js
@@ -0,0 +1,50 @@
+$(document).on('ready turbolinks:load', function () {
+    // This is called on the first page load *and* also when the page is changed by turbolinks.
+
+    $(this).find('form .multiple-field-add')
+    // Main wrapper.
+    .parent('fieldset.multiple-field-wrapper')
+    // Find the first element.
+    .find('fieldset.multiple-field');
+
+    $(this).find('form .multiple-field-add').click(function() {
+        // Copy the first fieldset, without the values.
+        $(this)
+            // Main wrapper.
+            .parents('div.multiple-field-wrapper')
+            // Find the first element.
+            .find('fieldset.multiple-field').first()
+            // Clone (along with handlers) and append.
+            .clone(true).appendTo('div.multiple-field-inner')
+            // Reset values.
+            .find('input').val('');
+
+        // Bind and new Remove
+        attachRemoveMultipleField();
+
+    });
+
+    const attachRemoveMultipleField = function() {
+        $(document).find('form .multiple-field-remove').click(function() {
+            const $parent = $(this).parents('div.multiple-field-wrapper');
+            const numberOfMultipleField =  $parent.find('fieldset.multiple-field').length;
+
+            if (numberOfMultipleField === 1) {
+                // Keep the element, but reset its values.
+                $(this).parents('fieldset.multiple-field').find('input').val('');
+            }
+            else {
+                // Remove element.
+                $(this).parents('fieldset.multiple-field').remove();
+            }
+
+        });
+    }
+
+    attachRemoveMultipleField();
+
+
+
+
+
+});
\ No newline at end of file