diff --git a/src/App.jsx b/src/App.jsx
index 4ebc21c..dfa64fc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import LoanForm from "./LoanForm.jsx";
 import { loanMaths, isNumber } from "./loanMaths.js";
+import ModeToggle from "./ModeToggle.jsx";
 import LoanPlot from "./LoanPlot.jsx";
 import LoanStats from "./LoanStats.jsx";
 import EventsForm from "./EventsForm.jsx";
@@ -203,7 +204,7 @@ if (searchParams.has("downPayCash")) initialUserSetDownPercent = false;
 
 function App() {
   const [loanEvent, setLoanEvent] = useState(initialEvents);
-  const [chosenInput, setChosenInput] = useState("homeVal");
+  const [chosenInput, setChosenInput] = useState("monthlyPayment" in initialOverride ? "monthlyPayment" : "homeVal");
   const [userSetDownPercent, setUserSetDownPercent] = useState(initialUserSetDownPercent);
   const [showURLToast, setShowURLToast] = useState(gotStuffFromURL);
   const [rentSim, setRentSim] = useState({ ...initialRentSimulation, ...overrideRentSimulation });
@@ -568,28 +569,18 @@ function App() {
         </Modal>
       </nav>
       <div className="container-xxl py-3 rounded">
-        <div className="row">
-          <div className="col-12">
-            <div className="row shadow-sm border rounded mx-0 mb-3" style={{ backgroundColor: "white" }}>
-              <div className="col">
-                <p className="my-2">
-                  An easy to use mortgage calculator to find out exactly how much it will cost to buy a house. Or, enter a monthly budget. How much can you
-                  afford? This tool supports unlimited overpayment, re-finance and recast events. Also, try adding inflation.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="row">
-          <div className="col-lg-7 col-12 mb-3">
-            <LoanForm displayState={displayState} valid={valid} flash={flash} updateUserInput={(f, v) => updateUserInput(f, v)} />
+        <ModeToggle chosenInput={chosenInput} displayState={displayState} valid={valid} flash={flash} userInput={userInput} updateUserInput={updateUserInput} />
+
+        <div className="row mx-0">
+          <div className="col-lg-7 col-12 mb-3 px-2 mx-0">
+            <LoanForm displayState={displayState} valid={valid} flash={flash} updateUserInput={(f, v) => updateUserInput(f, v)} chosenInput={chosenInput} />
           </div>
-          <div className="col-lg-5 col-12">
-            <div className="row">
-              <div className="col-12 mb-3">
+          <div className="col-lg-5 col-12 px-0 mx-0">
+            <div className="row mx-0 px-0">
+              <div className="col-12 mb-3 px-2 mx-0">
                 <LoanStats loanRes={loanRes} userInput={userInput} />
               </div>
-              <div className="col-12 mb-3">
+              <div className="col-12 mb-3 px-2 mx-0">
                 <EventsForm
                   loanMonths={loanRes["loanMonths"]}
                   loanEvent={loanEvent}
@@ -607,38 +598,32 @@ function App() {
             </div>
           </div>
         </div>
-        <div className="row">
-          <div className="col-12">
-            <LoanPlot
-              maxMonthly={Math.max(loanRes["monthlyPayment"])}
-              loanRes={loanRes}
-              loanMonths={loanRes["loanMonths"]}
-              propertyTax={userInput["propertyTax"] * unitScaler(userInput["propertyTaxUnit"])}
-              hoa={userInput["hoa"] * unitScaler(userInput["hoaUnit"])}
-              pmi={userInput["pmi"] * unitScaler(userInput["pmiUnit"])}
-              utilities={userInput["utilities"] * unitScaler(userInput["utilitiesUnit"])}
-              maintenance={userInput["maintenance"] * unitScaler(userInput["maintenanceUnit"])}
-              insurance={userInput["insurance"] * unitScaler(userInput["insuranceUnit"])}
-              startDate={new Date(Number(userInput["startDate"]))}
-              inflation={loanRes["inflation"]}
-            />
-          </div>
-        </div>
-        <div className="row shadow-sm border rounded mx-0 mt-5 mb-3" style={{ backgroundColor: "white" }}>
-          <div className="col-12 py-2">
-            <Rent
-              downPayment={displayState["downPayCash"]}
-              loanMonths={loanRes["loanMonths"]}
-              inflation={loanRes["inflation"]}
-              equity={loanRes["equity"]}
-              homeVal={loanRes["homeVal"]}
-              monthlyPayment={loanRes["monthlyPayment"]}
-              overPayments={loanRes["overPayments"]}
-              totalFees={loanRes["totalFees"]}
-              rentSim={rentSim}
-              setRentSim={(r) => setRentSim(r)}
-            />
-          </div>
+        <LoanPlot
+          maxMonthly={Math.max(loanRes["monthlyPayment"])}
+          loanRes={loanRes}
+          loanMonths={loanRes["loanMonths"]}
+          propertyTax={userInput["propertyTax"] * unitScaler(userInput["propertyTaxUnit"])}
+          hoa={userInput["hoa"] * unitScaler(userInput["hoaUnit"])}
+          pmi={userInput["pmi"] * unitScaler(userInput["pmiUnit"])}
+          utilities={userInput["utilities"] * unitScaler(userInput["utilitiesUnit"])}
+          maintenance={userInput["maintenance"] * unitScaler(userInput["maintenanceUnit"])}
+          insurance={userInput["insurance"] * unitScaler(userInput["insuranceUnit"])}
+          startDate={new Date(Number(userInput["startDate"]))}
+          inflation={loanRes["inflation"]}
+        />
+        <div className="row shadow-sm border rounded mx-2 mt-5 mb-3" style={{ backgroundColor: "white" }}>
+          <Rent
+            downPayment={displayState["downPayCash"]}
+            loanMonths={loanRes["loanMonths"]}
+            inflation={loanRes["inflation"]}
+            equity={loanRes["equity"]}
+            homeVal={loanRes["homeVal"]}
+            monthlyPayment={loanRes["monthlyPayment"]}
+            overPayments={loanRes["overPayments"]}
+            totalFees={loanRes["totalFees"]}
+            rentSim={rentSim}
+            setRentSim={(r) => setRentSim(r)}
+          />
         </div>
         <div className="row shadow-sm border rounded mx-0" style={{ backgroundColor: "white" }}>
           <div className="col-12">
diff --git a/src/LoanForm.jsx b/src/LoanForm.jsx
index d59e718..194f6b6 100644
--- a/src/LoanForm.jsx
+++ b/src/LoanForm.jsx
@@ -29,13 +29,6 @@ function FbComp({ x }) {
 function LoanForm({ displayState, flash, updateUserInput, valid }) {
   const [show, setShow] = useState(false);
   const feeOptions = ["$ / year", "$ / month", "% / year", "% / month"];
-  const additionalPayments =
-    Number(displayState["propertyTax"]) > 0 ||
-    Number(displayState["hoa"]) > 0 ||
-    Number(displayState["insurance"]) > 0 ||
-    Number(displayState["pmi"]) ||
-    Number(displayState["maintenance"]) > 0 ||
-    Number(displayState["utilities"]) > 0;
 
   //builds class for each input based on flash (whether it changed and should flash) and valid (if user input is valid)
   const startDateOptions = { month: "short", year: "numeric" };
@@ -97,43 +90,6 @@ 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="col-5 pe-0">
-          <label>Home Value</label>
-          <input
-            // key={homeVal}
-            type="text"
-            inputMode="numeric"
-            className={inputClass["homeVal"]}
-            value={cashFormat(displayState["homeVal"])}
-            onChange={(e) => updateIfChanged(displayState["homeVal"], e.target.value, "homeVal")}
-          />
-          <ValidFbComp x={valid["homeVal"]} />
-          {additionalPayments ? (
-            <label>
-              <small></small>
-            </label>
-          ) : null}
-        </div>
-        <div className="col-2 text-center align-self-center">or</div>
-        <div className="col-5 ps-0">
-          <label>Monthly Payment</label>
-          <input
-            type="text"
-            inputMode="numeric"
-            className={inputClass["monthlyPayment"]}
-            onChange={(e) => updateIfChanged(displayState["monthlyPayment"], e.target.value, "monthlyPayment")}
-            value={cashFormat(displayState["monthlyPayment"])}
-          />
-
-          <ValidFbComp x={valid["monthlyPayment"]} />
-          {additionalPayments ? (
-            <label>
-              <small>{cashFormat(displayState["monthlyPaymentToLoan"])} towards loan</small>
-            </label>
-          ) : null}
-        </div>
-      </div>
       <div className="row shadow-sm border rounded mb-3 py-2 mx-0" style={{ backgroundColor: "white" }}>
         <div className="col-12">
           <label>Down Payment</label>
diff --git a/src/LoanPlot.jsx b/src/LoanPlot.jsx
index 282b03d..f27faa3 100644
--- a/src/LoanPlot.jsx
+++ b/src/LoanPlot.jsx
@@ -249,23 +249,16 @@ function LoanPlot({ maxMonthly, loanRes, loanMonths, propertyTax, hoa, pmi, util
   };
 
   return (
-    <div className="row shadow-sm border rounded mb-3 py-1 mx-0 px-1" style={{ backgroundColor: "white" }}>
+    <div className="row shadow-sm border rounded mb-3 py-1 mx-2 px-1" style={{ backgroundColor: "white" }}>
       <div className="col-12 px-0">
-        <div className="row mx-0">
-          <div className="col-12 px-0">
-            <div className="plotHeight">
-              <Chart type="bar" data={data} options={options} />
-            </div>
-          </div>
+        <div className="plotHeight">
+          <Chart type="bar" data={data} options={options} />
         </div>
 
         <div className="row mx-0">
-          <div className="col-1">
-            <span>Show: </span>
-          </div>
-          {["Monthly Breakdown", "Yearly Breakdown"].map((x) => (
-            <div className="col-xxl-2 col-md-4 col-sm-5 col-12" key={x}>
-              <div className="form-check form-check-inline">
+          <div className="col-12 ps-4">
+            {["Monthly Breakdown", "Yearly Breakdown"].map((x) => (
+              <div className="form-check form-check-inline" key={x}>
                 <input
                   className="form-check-input"
                   type="radio"
@@ -276,8 +269,8 @@ function LoanPlot({ maxMonthly, loanRes, loanMonths, propertyTax, hoa, pmi, util
                 />
                 <label className="form-check-label">{x}</label>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/ModeToggle.jsx b/src/ModeToggle.jsx
new file mode 100644
index 0000000..5cd2aa2
--- /dev/null
+++ b/src/ModeToggle.jsx
@@ -0,0 +1,209 @@
+import { cashFormat, isNumber } from "./loanMaths.js";
+
+function ModeToggle({ chosenInput, displayState, valid, flash, userInput, updateUserInput }) {
+  const handleHomeValClick = () => {
+    if (chosenInput !== "homeVal") {
+      updateUserInput("homeVal", userInput.homeVal);
+    }
+  };
+
+  const handleMonthlyPaymentClick = () => {
+    if (chosenInput !== "monthlyPayment") {
+      const monthlyPaymentValue = userInput.monthlyPayment !== "0" ? userInput.monthlyPayment : displayState.monthlyPayment;
+      updateUserInput("monthlyPayment", monthlyPaymentValue);
+    }
+  };
+
+  const updateIfChanged = (oldVal, newVal, name) => {
+    var parsedNewVal = newVal.replace(/[^0-9.]+/g, "");
+    if (oldVal !== parsedNewVal) {
+      var noLeading0 = oldVal === "0" && isNumber(parsedNewVal) ? parseFloat(parsedNewVal).toString() : parsedNewVal;
+      if (newVal.slice(-1) === "." && noLeading0.slice(-1) !== ".") {
+        noLeading0 = `${noLeading0}.`;
+      }
+      updateUserInput(name, noLeading0);
+    }
+  };
+
+  const additionalPayments =
+    Number(displayState["propertyTax"]) > 0 ||
+    Number(displayState["hoa"]) > 0 ||
+    Number(displayState["insurance"]) > 0 ||
+    Number(displayState["pmi"]) ||
+    Number(displayState["maintenance"]) > 0 ||
+    Number(displayState["utilities"]) > 0;
+
+  return (
+    <>
+      <div className="row mx-0">
+        <div className="col-12">
+          <div className="d-flex flex-column align-items-center mb-4">
+            <h6 className="mb-3 text-center fw-normal text-muted">I want to start with:</h6>
+
+            <div
+              className="d-flex gap-0 shadow-sm w-100"
+              role="group"
+              aria-label="Mortgage calculator mode"
+              style={{ borderRadius: "12px", maxWidth: "510px" }}
+            >
+              <button
+                type="button"
+                className={`btn px-2 px-md-4 py-3 mode-toggle-btn ${chosenInput === "homeVal" ? "mode-toggle-active" : "mode-toggle-inactive"}`}
+                onClick={handleHomeValClick}
+                style={{
+                  borderRadius: "12px 0 0 12px",
+                  borderRight: chosenInput === "homeVal" ? "none" : "1px solid #0dcaf0",
+                  transition: "all 0.2s ease",
+                  flex: "1 1 0",
+                  minWidth: 0,
+                }}
+              >
+                <div className="d-flex flex-column align-items-center">
+                  <div className="mb-1">
+                    <span className="me-2" style={{ fontSize: "1.2em" }}>
+                      🏠
+                    </span>
+                    <span className="fw-semibold">Home Price</span>
+                  </div>
+                  <small className={chosenInput === "homeVal" ? "text-white" : "text-body"} style={{ fontSize: "0.75rem" }}>
+                    The price of the home
+                  </small>
+                </div>
+              </button>
+
+              <button
+                type="button"
+                className={`btn px-2 px-md-4 py-3 mode-toggle-btn ${chosenInput === "monthlyPayment" ? "mode-toggle-active" : "mode-toggle-inactive"}`}
+                onClick={handleMonthlyPaymentClick}
+                style={{
+                  borderRadius: "0 12px 12px 0",
+                  borderLeft: chosenInput === "monthlyPayment" ? "none" : "1px solid #0dcaf0",
+                  transition: "all 0.2s ease",
+                  flex: "1 1 0",
+                  minWidth: 0,
+                }}
+              >
+                <div className="d-flex flex-column align-items-center">
+                  <div className="mb-1">
+                    <span className="me-2" style={{ fontSize: "1.2em" }}>
+                      💵
+                    </span>
+                    <span className="fw-semibold">Monthly Budget</span>
+                  </div>
+                  <small className={chosenInput === "monthlyPayment" ? "text-white" : "text-body"} style={{ fontSize: "0.75rem" }}>
+                    How much you can pay each month
+                  </small>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="row mb-4 mx-0">
+        <div className="col-12">
+          <div className="d-flex justify-content-center">
+            <div className="row shadow-sm border rounded py-3 px-2 px-md-4 w-100" style={{ backgroundColor: "white", maxWidth: "800px" }}>
+              {chosenInput === "homeVal" ? (
+                <>
+                  <div className="col-5 px-0">
+                    <label className="form-label mb-1">Home Value</label>
+                    <input
+                      key="homeVal-input"
+                      type="text"
+                      inputMode="numeric"
+                      className={`form-control ${valid["homeVal"] !== null ? "is-invalid" : ""}`}
+                      value={cashFormat(userInput["homeVal"])}
+                      onChange={(e) => updateIfChanged(userInput["homeVal"], e.target.value, "homeVal")}
+                    />
+                    {valid["homeVal"] !== null && (
+                      <div className="invalid-feedback" style={{ display: "initial" }}>
+                        {valid["homeVal"]}
+                      </div>
+                    )}
+                  </div>
+                  <div className="col-2 text-center align-self-center px-0">
+                    <span style={{ fontSize: "1.2em" }} className="d-md-none">
+                      →
+                    </span>
+                    <span style={{ fontSize: "1.5em" }} className="d-none d-md-inline">
+                      →
+                    </span>
+                  </div>
+                  <div className="col-5 px-0">
+                    <label className="form-label mb-1">Monthly Payment</label>
+                    <input
+                      key="monthlyPayment-input"
+                      type="text"
+                      inputMode="numeric"
+                      className={`form-control ${flash["monthlyPayment"] ? "anim1" : "anim2"}`}
+                      value={cashFormat(displayState["monthlyPayment"])}
+                      readOnly
+                      style={{ color: "rgb(222, 64, 40)", cursor: "not-allowed" }}
+                    />
+                    {additionalPayments && (
+                      <label>
+                        <small className="text-muted d-none d-md-inline">{cashFormat(displayState["monthlyPaymentToLoan"])} towards loan</small>
+                      </label>
+                    )}
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="col-5 px-0">
+                    <label className="form-label mb-1">Monthly Payment</label>
+                    <input
+                      key="monthlyPayment-input"
+                      type="text"
+                      inputMode="numeric"
+                      className={`form-control ${valid["monthlyPayment"] !== null ? "is-invalid" : ""}`}
+                      value={cashFormat(userInput["monthlyPayment"] !== "0" ? userInput["monthlyPayment"] : displayState["monthlyPayment"])}
+                      onChange={(e) =>
+                        updateIfChanged(
+                          userInput["monthlyPayment"] !== "0" ? userInput["monthlyPayment"] : displayState["monthlyPayment"],
+                          e.target.value,
+                          "monthlyPayment"
+                        )
+                      }
+                    />
+                    {valid["monthlyPayment"] !== null && (
+                      <div className="invalid-feedback" style={{ display: "initial" }}>
+                        {valid["monthlyPayment"]}
+                      </div>
+                    )}
+                    {additionalPayments && (
+                      <label>
+                        <small className="text-muted d-none d-md-inline">{cashFormat(displayState["monthlyPaymentToLoan"])} towards loan</small>
+                      </label>
+                    )}
+                  </div>
+                  <div className="col-2 text-center align-self-center px-0">
+                    <span style={{ fontSize: "1.2em" }} className="d-md-none">
+                      →
+                    </span>
+                    <span style={{ fontSize: "1.5em" }} className="d-none d-md-inline">
+                      →
+                    </span>
+                  </div>
+                  <div className="col-5 px-0">
+                    <label className="form-label mb-1">Home Value</label>
+                    <input
+                      key="homeVal-input"
+                      type="text"
+                      inputMode="numeric"
+                      className={`form-control ${flash["homeVal"] ? "anim1" : "anim2"}`}
+                      value={cashFormat(displayState["homeVal"])}
+                      readOnly
+                      style={{ color: "rgb(222, 64, 40)", cursor: "not-allowed" }}
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ModeToggle;
diff --git a/src/Rent.jsx b/src/Rent.jsx
index 3351a49..8db46ce 100644
--- a/src/Rent.jsx
+++ b/src/Rent.jsx
@@ -89,7 +89,7 @@ function Rent({ loanMonths, inflation, downPayment, equity, homeVal, monthlyPaym
 
   // Render chart with explanatory paragraph
   return (
-    <div className="row px-2">
+    <>
       <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>
@@ -173,7 +173,7 @@ function Rent({ loanMonths, inflation, downPayment, equity, homeVal, monthlyPaym
           <Chart type="line" data={data} options={options} />
         </div>
       </div>
-    </div>
+    </>
   );
 }
 
diff --git a/src/index.css b/src/index.css
index 66b4b10..0bbb742 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,11 +22,11 @@
 }
 
 .anim1 {
-  animation-name: "example2";
+  animation-name: example2;
   animation-duration: 1.5s;
 }
 .anim2 {
-  animation-name: "example3";
+  animation-name: example3;
   animation-duration: 1.5s;
 }
 
@@ -108,6 +108,12 @@
   .outputLabelWidth {
     width: auto;
   }
+  /* Prevent horizontal overflow */
+  .container-xxl,
+  .row {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
   /* … */
 }
 
@@ -122,3 +128,78 @@ body {
   --bs-tooltip-bg: var(--bd-violet-bg);
   --bs-tooltip-color: var(--bs-white);
 }
+
+.mode-toggle-btn {
+  position: relative;
+  border: 1px solid #0dcaf0 !important;
+}
+
+.mode-toggle-btn:first-child {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.mode-toggle-btn:last-child {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.mode-toggle-active {
+  background-color: #0cbbde !important;
+  border-color: #0cbbde !important;
+  color: #fff !important;
+  z-index: 1;
+  box-shadow: 0 2px 4px rgba(13, 202, 240, 0.3);
+}
+
+.mode-toggle-active:hover {
+  background-color: #0aa2c0 !important;
+  border-color: #0aa2c0 !important;
+  color: #fff !important;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(13, 202, 240, 0.4);
+}
+
+.mode-toggle-inactive {
+  background-color: #fff !important;
+  border-color: #0dcaf0 !important;
+  color: #000 !important;
+}
+
+.mode-toggle-inactive:hover {
+  background-color: #cff4fc !important;
+  border-color: #0dcaf0 !important;
+  color: #000 !important;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(13, 202, 240, 0.2);
+}
+
+.mode-toggle-btn:active {
+  transform: translateY(0);
+}
+
+@media (width <= 768px) {
+  .mode-toggle-btn {
+    padding: 0.75rem 0.5rem !important;
+    font-size: 0.875rem !important;
+  }
+
+  .mode-toggle-btn small {
+    font-size: 0.65rem !important;
+  }
+
+  .mode-toggle-btn .fw-semibold {
+    font-size: 0.875rem !important;
+  }
+}
+
+@media (width <= 500px) {
+  .mode-toggle-btn {
+    padding: 0.5rem 0.25rem !important;
+  }
+
+  .mode-toggle-btn small {
+    font-size: 0.6rem !important;
+    line-height: 1.2 !important;
+  }
+}