diff --git a/templates/bills.html b/templates/bills.html
index f3e5c29..bfda1d9 100644
--- a/templates/bills.html
+++ b/templates/bills.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -23,7 +23,7 @@
 
     <div class="mt-4 col-6">
         <div class="row align-items-center">
-            <button id="new-bill-type-button" class="mb-3 px-0 offset-4 col-2 btn btn-success" onCLick="StartNewBillType()"><span class="bi bi-plus-lg"> New Bill Type</span></button>
+            <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="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 %}
@@ -31,21 +31,21 @@
                 {% endfor %}
                 </select>
             </div>
-            <button id="save-bill-type" class="new-bill-type-class px-0 col-1 btn btn-success d-none" onClick="NewBillType()"><span class="bi bi-floppy"></span> Save</button>
-            <button id="canc-bill-type" class="new-bill-type-class px-0 col-1 btn btn-danger d-none" onClick="CancelNewBillType()"><span class="bi bi-trash3"> Cancel</span></button>
+            <button id="save-bill-type" class="new-bill-type-class px-0 col-1 btn btn-success bg-success-subtle text-success d-none" onClick="NewBillType()"><span class="bi bi-floppy"></span> Save</button>
+            <button id="canc-bill-type" class="new-bill-type-class px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelNewBillType()"><span class="bi bi-x"> Cancel</span></button>
         </div>
         <div class="row">
-            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0 h-100"><br>Name</ ></div>
-            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0 h-100"><br>Frequency</ ></div>
-            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0">Annual Growth Est (min/avg/max)</ ></div>
-            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0 h-100"><br>Actions</ ></div>
+            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0 h-100"><br>Name</ ></div>
+            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0 h-100"><br>Frequency</ ></div>
+            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Annual Growth Est (min/avg/max)</ ></div>
+            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0 h-100"><br>Actions</ ></div>
         </div>
         {% for bt in bill_types %}
             <div class="row">
-                <div class="px-0 col-2"><input type="text" class="bill-type-{{bt.id}} form-control text-center bg-white" id="bill-type-name-{{bt.id}}" value="{{ bt.name }}" disabled> </div>
+                <div class="px-0 col-2"><input type="text" class="bill-type-{{bt.id}} form-control text-center" id="bill-type-name-{{bt.id}}" value="{{ bt.name }}" disabled> </div>
                 <!--  bind Enter to save this bill-type -->
                 <script>$("#bill-type-name-{{bt.id}}").keyup(function(event){ if(event.which == 13){ $('#bill-type-save-{{bt.id}}').click(); } event.preventDefault(); });</script>
-                <div class="px-0 col-2"><select id="bill-type-freq-{{bt.id}}" class="bill-type-{{bt.id}} form-select text-center bg-white" disabled>
+                <div class="px-0 col-2"><select id="bill-type-freq-{{bt.id}}" class="bill-type-{{bt.id}} form-select text-center" disabled>
                     {% for bf in bill_freqs %}
                         <option value={{bf.id}}>{{bf.name}}</option>
                     {% endfor %}
@@ -74,10 +74,10 @@
                         </label>
                     </div>
                 </div>
-                <button id="bill-type-chg-{{bt.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBillType( {{bt.id}} )">Change</button>
-                <button id="bill-type-del-{{bt.id}}" class="px-0 col-1 btn btn-danger" onClick="DelBillType({{bt.id}})"><span class="bi bi-trash3"> Delete</button>
-                <button id="bill-type-save-{{bt.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBillType( {{bt.id}} )">Save</button>
-                <button id="bill-type-canc-{{bt.id}}" class="px-0 col-1 btn btn-danger d-none" onClick="CancelUpdateBillType({{bt.id}}, '{{bt.name}}')"><span class="bi bi-trash3"> Cancel</button>
+                <button id="bill-type-chg-{{bt.id}}" class="px-0 col-1 btn btn-success bg-success-subtle text-success" onClick="StartUpdateBillType( {{bt.id}} )"><span class="bi bi-pencil-square"> Change</button>
+                <button id="bill-type-del-{{bt.id}}" class="px-0 col-1 btn btn-danger bg-danger-subtle text-danger" onClick="DelBillType({{bt.id}})"><span class="bi bi-trash3"> Delete</button>
+                <button id="bill-type-save-{{bt.id}}" class="px-0 col-1 btn btn-success bg-success-subtle text-success d-none" onClick="UpdateBillType( {{bt.id}} )"><spam class="bi bi-floppy"> Save</button>
+                <button id="bill-type-canc-{{bt.id}}" class="px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelUpdateBillType({{bt.id}}, '{{bt.name}}')"><span class="bi bi-x"> Cancel</button>
             </div>
         {% endfor %}
     </div>
@@ -86,7 +86,7 @@
 
     <div class="pt-4 col-6">
         <div class="row align-items-center">
-            <button id="new-bill-data-button" class="mb-3 px-0 offset-6 col-2 btn btn-success" onCLick="StartNewBillData()"><span class="bi bi-plus-lg"> New Bill</span></button>
+            <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="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>
@@ -95,9 +95,9 @@
             </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>
-            <button id="save-bill" class="new-bill-data-class px-0 col-1 btn btn-success d-none" onClick="NewBill()">
+            <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 d-none" onClick="CancelNewBill()" ><span class="bi bi-trash3"> 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  -->
@@ -121,29 +121,29 @@
             {% 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-light rounded-0">Name</ > </div>
-                    <div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-light rounded-0">Date</ > </div>
-                    <div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-light rounded-0">Amount</ > </div>
-                    <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0">Actions</ ></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-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="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Actions</ ></div>
                 </div>
                 {% endif %}
                 {% if bd.bill_type_id == bt.id %}
                     {% if bd.estimated == 1 %}
                         <div class="row est d-none fst-italic">
-                        {% set classes="fst-italic form-control text-center bg-white" %}
+                        {% set classes="fst-italic form-control text-center" %}
                     {% else %}
                         <div class="row">
-                        {% set classes="form-control text-center bg-white" %}
+                        {% set classes="form-control text-center" %}
                     {% endif %}
                     <div class="px-0 col-2"> <input   type="text" class="{{classes}}" id="bill-data-type-{{bd.id}}" value="{{ bd.name }}" disabled> </div>
                     <div class="px-0 col-2"> <input   type="date" class="{{classes}}" id="bill-data-date-{{bd.id}}" value="{{ bd.bill_date }}" disabled> </div>
                     <div class="px-0 col-2"> <input type="number" class="{{classes}}" id="bill-data-amount-{{bd.id}}" value="{{ bd.amount }}" disabled> </div>
                     {% if bd.estimated == 0 %}
-                    <button id="bill-data-chg-{{bd.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBill( {{bd.id}} )">Change</button>
-                    <button id="bill-data-del-{{bd.id}}" class="px-0 col-1 btn btn-danger" onClick="DeleteBill( {{bd.id }} )"><span class="bi bi-trash3"> Delete
-                    <button id="bill-data-save-{{bd.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBill( {{bd.id}} )">Save</button>
-                    <button id="bill-data-canc-{{bd.id}}" class="px-0 col-1 btn btn-danger d-none" 
-                        onClick="CancelUpdateBill({{bd.id}}, '{{bd.name}}', '{{bd.bill_date}}', '{{bd.amount}}')"> <span class="bi bi-trash3"> Cancel</button>
+                    <button id="bill-data-chg-{{bd.id}}" class="px-0 col-1 btn btn-success bg-success-subtle text-success" onClick="StartUpdateBill( {{bd.id}} )"><span class="bi bi-pencil-square"> Change</button>
+                    <button id="bill-data-del-{{bd.id}}" class="px-0 col-1 btn btn-danger bg-danger-subtle text-danger" onClick="DeleteBill( {{bd.id }} )"><span class="bi bi-trash3"> Delete
+                    <button id="bill-data-save-{{bd.id}}" class="px-0 col-1 btn btn-success bg-success-subtle text-success d-none" onClick="UpdateBill( {{bd.id}} )"><span class="bi bi-floppy"> Save</button>
+                    <button id="bill-data-canc-{{bd.id}}" class="px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" 
+                        onClick="CancelUpdateBill({{bd.id}}, '{{bd.name}}', '{{bd.bill_date}}', '{{bd.amount}}')"> <span class="bi bi-x"> Cancel</button>
                     </button>
                     {% endif %}
                 </div>
@@ -229,7 +229,6 @@
         function CancelUpdateBill( id, bill_type, bill_date, amount ) 
         {
             // fix-up type, date and amount fields
-            $('#bill-data-type-'+id).addClass('bg-white')
             $('#bill-data-date-'+id).prop('disabled', true )
             $('#bill-data-amount-'+id).prop('disabled', true )
             // alter change/delete buttons to be save/cancel
@@ -301,10 +300,8 @@
 
         function CancelUpdateBillType(id,orig_name) 
         {
-            // "re-enable" the freq & growth
-            $('.bill-type-'+id).removeClass('bg-light text-secondary').addClass('bg-white')
             // "disable" name for edits
-            $('#bill-type-name-'+id).prop('disabled', true) 
+            $('.bill-type-'+id).prop('disabled', true) 
             // alter change/delete buttons to be save/cancel
             $('#bill-type-chg-'+id).removeClass('d-none')
             $('#bill-type-del-'+id).removeClass('d-none')
diff --git a/templates/index.html b/templates/index.html
index 33b1dd6..9f2e494 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,6 +11,7 @@
     <script src="https://code.highcharts.com/highcharts.js"></script>
     <script src="https://code.highcharts.com/modules/annotations.js"></script>
     <script src="https://code.highcharts.com/modules/accessibility.js"></script>
+    <script src="https://code.highcharts.com/themes/adaptive.js"></script>
     <style>
         .col-form-label { width:140px; }
         html { font-size: 80%; }
@@ -62,7 +63,7 @@
                             class="col-form-label me-2 text-end float-end {{extra}}">{{el.label}}
                         </label>
                         {% if el.display== "readonly" %}
-                            {% set bg="bg-light" %}
+                            {% set bg="bg-body-tertiary" %}
                             {% set bd="" %}
                         {% else %}
                             {% set bg="" %}
@@ -91,7 +92,7 @@
     </h5>
     
     <div class="row">
-      <div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">2025</div>
+      <div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center bg-secondary text-light">2025</div>
 
       {# inside started if below, we add blank lines to the start of the year so the dates line up #}
       {% for _ in range( 0, padding ) %}
@@ -105,14 +106,14 @@
 
           {% if yr|int > first_yr|int and mon == '01' and day|int <= 14 %}
             </div><div class="col-auto">
-            <div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">{{yr}}</div>
+            <div class="pt-1 pb-1 mb-0 alert text-center bg-secondary text-light">{{yr}}</div>
           {% endif %}
-          <font color="black">
+          <font class="text-secondary">
           {{ date }}:&nbsp;
           {{ '$%0.2f' % dollars|float }}<br>
           </font>
           {% if comp_done.val == 0 and yr == comp_yr and mon == comp_mon and day|int >= comp_day|int %}
-            <font color="blue">
+            <font class="text-info">
             {{ COMP['date'] }}:&nbsp;
             {{ '$%0.2f' % COMP['amount']|float }}<br>
             </font>
@@ -151,7 +152,7 @@
       </div>
     </div>
     </form>
-    <div class="row mt-4" id="container" style="width:100%; height:400px;"></div>   
+    <div class="row mt-4 highcharts-dark" id="container" style="width:100%; height:400px;"></div>   
     <script type="text/javascript">
         // make these global so we can also use them in the /save route (via modal)
         const savingsData = JSON.parse('{{ savings | tojson }}');
@@ -165,17 +166,17 @@
             if( $("#Ioniq6_future option:selected"). text() == 'lease' )
             {
                 // disable buyout
-                $('#lbl-Car_buyout').addClass('bg-light text-secondary border-secondary')
-                $('#Car_buyout').addClass('bg-light text-secondary border-secondary').attr('readonly', 'readonly' )
-                $('#Car_buyout_date').addClass('bg-light text-secondary border-secondary').attr('readonly', 'readonly' )
+                $('#lbl-Car_buyout').addClass('bg-body-tertiary border-secondary')
+                $('#Car_buyout').addClass('bg-body-tertiary border-secondary').attr('readonly', 'readonly' )
+                $('#Car_buyout_date').addClass('bg-body-tertiary border-secondary').attr('readonly', 'readonly' )
             }
             else
             {
                 // disable lease
-                $('#lbl-Car_loan').addClass('bg-light text-secondary')
-                $('#Car_loan').addClass('bg-light text-secondary')
-                $('#lbl-Car_balloon').addClass('bg-light text-secondary')
-                $('#Car_balloon').addClass('bg-light text-secondary')
+                $('#lbl-Car_loan').addClass('bg-body-tertiary')
+                $('#Car_loan').addClass('bg-body-tertiary')
+                $('#lbl-Car_balloon').addClass('bg-body-tertiary')
+                $('#Car_balloon').addClass('bg-body-tertiary')
             }
 
             var tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle='tooltip']"))
@@ -215,7 +216,7 @@
                     plotBands.push({
                         from: start,
                         to: end,
-                        color: year % 2 === 0 ? 'white' : 'lemonchiffon' // Alternate colors
+                        color: year % 2 === 0 ? '#101010' : 'black' // Alternate colors
                     });
                     year = currentYear;
                     start = new Date(`${year}-01-01`).getTime();
@@ -226,7 +227,7 @@
             plotBands.push({
                 from: start,
                 to: end,
-                color: year % 2 === 0 ? 'white' : 'lemonchiffon'
+                color: year % 2 === 0 ? 'charcoal' : 'black'
             });
 
             const annotations = [];
