From fde58d8d76f3053f78672139db23b03006e5cc21 Mon Sep 17 00:00:00 2001
From: 28raining <william.kelsey@gmail.com>
Date: Mon, 19 Jan 2026 13:31:39 -0800
Subject: [PATCH 1/2] add box descriptions to make the site a bit less
 intimidating

---
 src/EventsForm.jsx |  8 +++++-
 src/LoanForm.jsx   | 63 ++++++++++++++++++++++++++++------------------
 src/LoanPlot.jsx   |  7 +++++-
 src/Rent.jsx       |  6 ++++-
 4 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/src/EventsForm.jsx b/src/EventsForm.jsx
index 31b5b05..0ba8937 100644
--- a/src/EventsForm.jsx
+++ b/src/EventsForm.jsx
@@ -110,7 +110,7 @@ function EventsForm({ loanMonths, loanRes, loanEvent, setLoanEvent, monthlyPayme
   }
 
   return (
-    <div className="row shadow-sm border rounded py-2 mx-0" key="row0" style={{ backgroundColor: "white" }}>
+    <div className="row shadow-sm border rounded pb-2 mx-0" key="row0" style={{ backgroundColor: "white" }}>
       <ToastContainer position="top-end" className="pt-4">
         <Toast show={showEventToast} onClose={() => setShowEventToast(false)} delay={3000} autohide bg="info">
           <Toast.Header>
@@ -120,6 +120,12 @@ function EventsForm({ loanMonths, loanRes, loanEvent, setLoanEvent, monthlyPayme
         </Toast>
       </ToastContainer>
 
+      <div className="col-12 text-center py-1">
+        <small>
+          <i>Mortgage events</i>
+        </small>
+      </div>
+
       <div className="col-12" key="col0">
         <div className="row">
           <div className="col-12" key="col1">
diff --git a/src/LoanForm.jsx b/src/LoanForm.jsx
index 194f6b6..6b75b74 100644
--- a/src/LoanForm.jsx
+++ b/src/LoanForm.jsx
@@ -90,7 +90,12 @@ function LoanForm({ displayState, flash, updateUserInput, valid }) {
 
   return (
     <div>
-      <div className="row shadow-sm border rounded mb-3 py-2 mx-0" style={{ backgroundColor: "white" }}>
+      <div className="row shadow-sm border rounded pb-2 mb-3 mx-0" style={{ backgroundColor: "white" }}>
+        <div className="col-12 text-center py-1">
+          <small>
+            <i>Mortgage Details</i>
+          </small>
+        </div>
         <div className="col-12">
           <label>Down Payment</label>
           <div className="input-group mb-1">
@@ -186,30 +191,40 @@ function LoanForm({ displayState, flash, updateUserInput, valid }) {
         </div>
       </div>
 
-      <div className="row shadow-sm border rounded py-2 mx-0" style={{ backgroundColor: "white" }}>
-        <div className="col-12 d-flex align-items-end justify-content-end">
-          <button
-            type="button"
-            className="btn btn-link py-0"
-            onClick={() => {
-              updateUserInput("propertyTaxUnit", 2);
-              updateUserInput("hoaUnit", 1);
-              updateUserInput("pmiUnit", 4);
-              updateUserInput("utilitiesUnit", 1);
-              updateUserInput("maintenanceUnit", 1);
-              updateUserInput("insuranceUnit", 0);
+      <div className="row shadow-sm border rounded pb-2 mx-0" style={{ backgroundColor: "white" }}>
+        <div className="col-12 py-1">
+          <div className="d-flex align-items-center justify-content-between flex-wrap">
+            <div className="order-2 order-md-1 flex-grow-1 d-md-block d-none"></div>
+            <div className="order-1 order-md-2 text-center flex-grow-1">
+              <small>
+                <i>Household expenses</i>
+              </small>
+            </div>
+            <div className="order-3 order-md-3 text-end">
+              <button
+                type="button"
+                className="btn btn-link py-0"
+                onClick={() => {
+                  updateUserInput("propertyTaxUnit", 2);
+                  updateUserInput("hoaUnit", 1);
+                  updateUserInput("pmiUnit", 4);
+                  updateUserInput("utilitiesUnit", 1);
+                  updateUserInput("maintenanceUnit", 1);
+                  updateUserInput("insuranceUnit", 0);
 
-              updateUserInput("propertyTax", "1.00");
-              updateUserInput("hoa", "300");
-              if (displayState["downPayPercent"] < 20) updateUserInput("pmi", "1.5");
-              else updateUserInput("pmi", "0");
-              updateUserInput("utilities", "120");
-              updateUserInput("maintenance", "300");
-              updateUserInput("insurance", "1000");
-            }}
-          >
-            Populate with estimates
-          </button>
+                  updateUserInput("propertyTax", "1.00");
+                  updateUserInput("hoa", "300");
+                  if (displayState["downPayPercent"] < 20) updateUserInput("pmi", "1.5");
+                  else updateUserInput("pmi", "0");
+                  updateUserInput("utilities", "120");
+                  updateUserInput("maintenance", "300");
+                  updateUserInput("insurance", "1000");
+                }}
+              >
+                Populate with estimates
+              </button>
+            </div>
+          </div>
         </div>
         <div className="col-xxl-4 col-sm-6 col-12">
           <label>Property Tax</label>
diff --git a/src/LoanPlot.jsx b/src/LoanPlot.jsx
index f27faa3..ccf6ec6 100644
--- a/src/LoanPlot.jsx
+++ b/src/LoanPlot.jsx
@@ -249,7 +249,12 @@ function LoanPlot({ maxMonthly, loanRes, loanMonths, propertyTax, hoa, pmi, util
   };
 
   return (
-    <div className="row shadow-sm border rounded mb-3 py-1 mx-2 px-1" style={{ backgroundColor: "white" }}>
+    <div className="row shadow-sm border rounded pb-1 mb-3 mx-2 px-1" style={{ backgroundColor: "white" }}>
+      <div className="col-12 text-center py-1">
+        <small>
+          <i>Graph showing payment breakdown over time</i>
+        </small>
+      </div>
       <div className="col-12 px-0">
         <div className="plotHeight">
           <Chart type="bar" data={data} options={options} />
diff --git a/src/Rent.jsx b/src/Rent.jsx
index 8db46ce..a87a4d3 100644
--- a/src/Rent.jsx
+++ b/src/Rent.jsx
@@ -90,8 +90,12 @@ function Rent({ loanMonths, inflation, downPayment, equity, homeVal, monthlyPaym
   // Render chart with explanatory paragraph
   return (
     <>
+      <div className="col-12 text-center py-1">
+        <small>
+          <i>Instead of buying a home, what if that money was invested in the stock market?</i>
+        </small>
+      </div>
       <div className="col-12">
-        <h5 className="my-2"> Instead of buying a home, what if that money was invested in the stock market?</h5>
         <ul>
           <li>Invested the down payment of {cashFormat(downPayment)}</li>
           <li>

From aedcb8c308898b3e608eb7337b4c0bc1733ad57c Mon Sep 17 00:00:00 2001
From: 28raining <william.kelsey@gmail.com>
Date: Mon, 19 Jan 2026 13:37:20 -0800
Subject: [PATCH 2/2] add an intro

---
 src/App.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/App.jsx b/src/App.jsx
index dfa64fc..e481ba3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -569,6 +569,10 @@ function App() {
         </Modal>
       </nav>
       <div className="container-xxl py-3 rounded">
+        <p className="mb-3 text-muted" style={{ fontSize: "0.95rem", lineHeight: "1.5" }}>
+          <strong>This really is the best mortgage calculator!</strong> Choose a fixed monthly payment or choose a house price. Add household expenses,
+          repeating overpayments, recast mortgages, even account for inflation. Then download it to a spreadsheet or share the URL.
+        </p>
         <ModeToggle chosenInput={chosenInput} displayState={displayState} valid={valid} flash={flash} userInput={userInput} updateUserInput={updateUserInput} />
 
         <div className="row mx-0">