diff --git a/templates/bills.html b/templates/bills.html
index 3e37c0e..1711748 100644
--- a/templates/bills.html
+++ b/templates/bills.html
@@ -38,8 +38,12 @@
 #}
 
     <div class="mt-4 col-7">
-        <div class="row align-items-center">
-            <button id="new-bill-type-button" class="mb-3 px-0 offset-4 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillType()"><span class="bi bi-plus-lg"> New Bill Type</span></button>
+        <div class="row">
+            <div class="col-2 form-control-inline d-none new-bill-type-class">Bill Type</div>
+            <div class="col-2 form-control-inline d-none new-bill-type-class">Frequency</div>
+        </div>
+        <div class="row align-items-center mb-3">
+            <button id="new-bill-type-button" class="mt-4 px-0 offset-4 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillType()"><span class="bi bi-plus-lg"> New Bill Type</span></button>
             <div class="new-bill-type-class px-0 col-2 d-none"> <input type="text" class="form-control text-end float-end border border-primary" id="new-bill-type-name"></div>
             <div class="new-bill-type-class px-0 col-2 d-none"><select id="new-bill-type-freq" class="form-select text-center">
                 {% for bf in bill_freqs %}
@@ -129,19 +133,34 @@
     <!-- right-hand-side, bill types (e.g. gas, phone, etc.) -->
 
     <div class="pt-4 col-5">
-        <div class="row align-items-center">
-            <button id="new-bill-data-button" class="mb-3 px-0 offset-6 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillData()"><span class="bi bi-plus-lg"> New Bill</span></button>
+        <div class="row">
+            <div class="col-2 form-control-inline d-none new-bill-data-class">Bill Type</div>
+            <div id="new-bill-data-date-label" class="col-4 form-control-inline d-none new-bill-data-class">Date</div>
+            <div id="new-bill-data-growth-label" class="col-4 form-control-inline d-none">Est. Annual Growth</div>
+            <div class="col-2 form-control-inline d-none new-bill-data-class">Amount</div>
+        </div>
+        <div class="row align-items-center mb-3">
+            <button id="new-bill-data-button" class="mt-4 px-0 offset-8 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillData()"><span class="bi bi-plus-lg"> New Bill</span></button>
             <div class="new-bill-data-class px-0 col-2 d-none"> <select id="new-bill-data-type" class="form-select text-end float-end border border-primary">
                 {% for bt in bill_types %}
                     <option value={{bt.id}}>{{bt.name}}</option>
                 {% endfor %}
                 </select>
             </div>
-            <div class="new-bill-data-class px-0 col-2 d-none"> <input type="date" class="form-control text-end float-end border border-primary" id="new-bill-data-date"> </div>
-            <div class="new-bill-data-class px-0 col-2 d-none"> <input type="number" class="form-control text-end float-end border border-primary" id="new-bill-data-amount"> </div>
+            <div class="new-bill-data-class px-0 col-4 d-none">
+                <div class="input-group" style="max-width: 300px;">
+                    <input type="date" class="form-control" id="new-bill-data-date">
+                    <input type="text" class="form-control d-none" id="new-bill-data-growth">
+                    <button class="btn btn-outline-danger" type="button" id="toggleDateBtn">When quit</button>
+                </div>
+            </div>
+            <div class="new-bill-data-class px-0 col-2 d-none">
+                <input type="number" class="form-control text-end float-end border border-primary" id="new-bill-data-amount">
+            </div>
             <button id="save-bill" class="new-bill-data-class px-0 col-1 btn btn-success bg-success-subtle text-success d-none" onClick="NewBill()">
                 <span class="bi bi-floppy"></span> Save </button>
-            <button class="new-bill-data-class px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelNewBill()" ><span class="bi bi-x"> Cancel</span> </button>
+            <button class="new-bill-data-class px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelNewBill()" >
+                <span class="bi bi-x"> Cancel</span> </button>
         </div>
 
         <!-- create tabbed view for each bill type  -->
@@ -165,9 +184,9 @@
             {% for bd in bill_data %}
                 {% if loop.first %}
                 <div class="row pt-2">
-                    <div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Name</ > </div>
-                    <div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Date</ > </div>
-                    <div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Amount</ > </div>
+                    <div class="p-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Name</ ></div>
+                    <div class="p-0 col-4"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Date</ ></div>
+                    <div class="p-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Amount</ ></div>
                     <div class="px-0 col-4"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Actions</ ></div>
                 </div>
                 {% endif %}
@@ -222,9 +241,28 @@
 
         function NewBill() 
         {
-            $.ajax( { type: 'POST', url: '/newbill',
-                    contentType: 'application/json', data: JSON.stringify( { 'name': $('#new-bill-data-type').val(), 'amount': $('#new-bill-data-amount').val(), 'bill_date': $('#new-bill-data-date').val() } ),
+            if( $('#new-bill-data-growth').hasClass('d-none') )
+            {
+                // if growth is hidden, then we have normal bill
+                $.ajax( { type: 'POST', url: '/newbill',
+                    contentType: 'application/json', 
+                    data: JSON.stringify( { 
+                        'name': $('#new-bill-data-type').val(), 
+                        'amount': $('#new-bill-data-amount').val(), 
+                        'bill_date': $('#new-bill-data-date').val() } ),
                     success: function() { window.location='bills' } } )
+            }
+            else
+            {
+                // if growth is visible, then we have future bill/growth & no date
+                $.ajax( { type: 'POST', url: '/newbill',
+                    contentType: 'application/json', 
+                    data: JSON.stringify( { 
+                        'name': $('#new-bill-data-type').val(), 
+                        'amount': $('#new-bill-data-amount').val(), 
+                        'growth': $('#new-bill-data-growth').val() } ),
+                    success: function() { window.location='bills' } } )
+            }
         }
 
         function CancelNewBill() 
@@ -396,6 +434,35 @@
             // make the new bill drop-down default to the same as the current tab
             $("#new-bill-data-type").val( {{bill_ui.last_tab}} )
         } )
+
+      $(function () {
+        let disabled = false;
+
+        $('#toggleDateBtn').on('click', function () {
+          disabled = !disabled;
+
+          if (disabled) {
+            $('#new-bill-data-date').addClass('d-none')
+            $('#new-bill-data-growth').removeClass('d-none')
+            $(this)
+              .removeClass('btn-outline-danger')
+              .addClass('btn-outline-success')
+              .html('Normal date');
+            $('#new-bill-data-date-label').addClass('d-none')
+            $('#new-bill-data-growth-label').removeClass('d-none')
+          } else {
+            $('#new-bill-data-date').removeClass('d-none')
+            $('#new-bill-data-growth').addClass('d-none')
+            $(this)
+              .removeClass('btn-outline-success')
+              .addClass('btn-outline-danger')
+              .html('When quit');
+            $('#new-bill-data-date-label').removeClass('d-none')
+            $('#new-bill-data-growth-label').addClass('d-none')
+          }
+        });
+      });
+
     </script>
 </body>
 </html>