diff --git a/app/interactives/inflation-impact-calculator/page.tsx b/app/interactives/inflation-impact-calculator/page.tsx
index 37fbb8e..d8aa7e7 100644
--- a/app/interactives/inflation-impact-calculator/page.tsx
+++ b/app/interactives/inflation-impact-calculator/page.tsx
@@ -151,7 +151,7 @@ export default function InflationCalculator() {
                           Future price:
                         </div>
                         <div className="w-[50%] bg-[var(--secondary-background)] text-lg-title p-4 rounded-r-lg font-bold overflow-hidden text-ellipsis flex items-center">
-                          ${futureValue.toFixed(2)}
+                          {`$${futureValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                         </div>
                       </div>
                     </div>
diff --git a/app/interactives/interest-calculator/page.tsx b/app/interactives/interest-calculator/page.tsx
index 066728d..46fb9a7 100644
--- a/app/interactives/interest-calculator/page.tsx
+++ b/app/interactives/interest-calculator/page.tsx
@@ -63,24 +63,26 @@ const InterestRateVisual = () => {
 
           <div className="flex-1 flex gap-4">
             <button
-              className={`min-w-[150px] flex-1 py-2 px-3 text-md font-bold ${
-                mode === "saving"
-                  ? "bg-palo-verde rounded-lg border-1 border-palo-verde"
-                  : "rounded-lg border-1 border-palo-verde"
-              }`}
+              className={`
+                group
+                min-w-[150px] flex-1 py-2 px-3 text-md font-bold 
+                rounded-lg border-1 border-palo-verde 
+                hover:bg-[var(--button-green)]
+                ${mode === "saving" ? "bg-palo-verde" : ""}
+              `}
               onClick={() => setMode("saving")}
             >
               <div className="flex-1 flex gap-3 align-center justify-center">
                 <div
                   className={`text-3xl self-center ${
-                    mode === "saving" ? "text-white" : "text-palo-verde"
+                    mode === "saving" ? "text-white" : "text-palo-verde group-hover:text-white"
                   }`}
                 >
                   <FaPiggyBank />
                 </div>
                 <div
                   className={`self-center ${
-                    mode === "saving" ? "text-white" : "text-[var(--foreground)]"
+                    mode === "saving" ? "text-white" : "text-[var(--foreground)] group-hover:text-white"
                   }`}
                 >
                   Saving
@@ -88,24 +90,26 @@ const InterestRateVisual = () => {
               </div>
             </button>
             <button
-              className={` min-w-[150px] flex-1 py-2 px-3 text-md font-bold ${
-                mode === "borrowing"
-                  ? "bg-berry rounded-lg border-1 border-berry"
-                  : "rounded-lg border-1 border-berry"
-              }`}
+              className={`
+                group
+                min-w-[150px] flex-1 py-2 px-3 text-md font-bold 
+                rounded-lg border-1 border-berry 
+                hover:bg-[var(--button-berry)]
+                ${mode === "borrowing" ? "bg-berry" : ""}
+              `}
               onClick={() => setMode("borrowing")}
             >
               <div className="flex-1 flex gap-3 align-center justify-center">
                 <div
                   className={`text-3xl self-center ${
-                    mode === "borrowing" ? "text-white" : "text-berry"
+                    mode === "borrowing" ? "text-white" : "text-berry group-hover:text-white"
                   }`}
                 >
                   <FaArrowTrendDown />
                 </div>
                 <div
-                  className={` self-center ${
-                    mode === "borrowing" ? "text-white" : "text-[var(--foreground)]"
+                  className={`self-center ${
+                    mode === "borrowing" ? "text-white" : "text-[var(--foreground)] group-hover:text-white"
                   }`}
                 >
                   Borrowing
diff --git a/app/interactives/mortgate-calculator-suite/page.tsx b/app/interactives/mortgate-calculator-suite/page.tsx
new file mode 100644
index 0000000..1aa3856
--- /dev/null
+++ b/app/interactives/mortgate-calculator-suite/page.tsx
@@ -0,0 +1,790 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/app/ui/components/card"
+import { Label } from "@/app/ui/components/label"
+import { Input } from "@/app/ui/components/input"
+import { Button } from "@/app/ui/components/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/app/ui/components/tabs"
+import ThemeToggle from "@/app/lib/theme-toggle";
+import { BiSolidUpArrow, BiSolidDownArrow } from "react-icons/bi";
+
+const formatCurrency = (amount: number) => 
+  amount.toLocaleString("en-US", { 
+    minimumFractionDigits: 2, 
+    maximumFractionDigits: 2 
+  })
+
+export default function MortgageCalculator() {
+  const [monthsRemaining, setMonthsRemaining] = useState("")
+  const [annualRate, setAnnualRate] = useState("")
+  const [monthlyPayment, setMonthlyPayment] = useState("")
+  const [currentBalance, setCurrentBalance] = useState<number | null>(null)
+
+  const [refCurrentBalance, setRefCurrentBalance] = useState("")
+  const [refCurrentMonthlyPayment, setRefCurrentMonthlyPayment] = useState("")
+  const [refCurrentMonths, setRefCurrentMonths] = useState("")
+  const [refCurrentRate, setRefCurrentRate] = useState("")  // Added missing state for refinance current rate
+  const [refNewLoanAmount, setRefNewLoanAmount] = useState("")
+  const [refNewRate, setRefNewRate] = useState("")
+  const [refNewMonths, setRefNewMonths] = useState("")
+  const [refClosingCosts, setRefClosingCosts] = useState("")
+  const [refYearsIn, setRefYearsIn] = useState("")
+  const [refinanceResults, setRefinanceResults] = useState<{
+    currentMonthlyPayment: number
+    newMonthlyPayment: number
+    monthlySavings: number
+    totalCurrentCost: number
+    totalNewCost: number
+    totalSavings: number
+    breakEvenMonths: number
+    breakEvenMessage: string 
+  } | null>(null)
+
+  const calculateBalance = () => {
+    const months = Number.parseFloat(monthsRemaining)
+    const rate = Number.parseFloat(annualRate) / 100 / 12
+    const payment = Number.parseFloat(monthlyPayment)
+
+    if (isNaN(months) || isNaN(rate) || isNaN(payment) || months <= 0 || rate < 0 || payment <= 0) {
+      alert("Please enter valid positive numbers")
+      return
+    }
+
+    let balance: number
+
+    if (rate === 0) {
+      balance = payment * months
+    } else {
+      balance = payment * ((1 - Math.pow(1 + rate, -months)) / rate)
+    }
+
+    setCurrentBalance(balance)
+  }
+
+  const calculateRefinance = () => {
+    const currentBal = Number.parseFloat(refCurrentBalance)
+    const currentR = Number.parseFloat(refCurrentRate) / 100 / 12  // Fixed: Use refCurrentRate instead of refCurrentMonthlyPayment
+    const currentM = Number.parseFloat(refCurrentMonths)
+    const newR = Number.parseFloat(refNewRate) / 100 / 12
+    const newM = Number.parseFloat(refNewMonths)
+    const closingCosts = Number.parseFloat(refClosingCosts)
+
+    if (
+      isNaN(currentBal) ||
+      isNaN(currentR) ||
+      isNaN(currentM) ||
+      isNaN(newR) ||
+      isNaN(newM) ||
+      isNaN(closingCosts) ||
+      currentBal <= 0 ||
+      currentR < 0 ||
+      currentM <= 0 ||
+      newR < 0 ||
+      newM <= 0 ||
+      closingCosts < 0
+    ) {
+      alert("Please enter valid numbers")
+      return
+    }
+
+    // Calculate current monthly payment: PMT = P × [r(1 + r)^n] / [(1 + r)^n - 1]
+    let currentMonthlyPayment: number
+    if (currentR === 0) {
+      currentMonthlyPayment = currentBal / currentM
+    } else {
+      currentMonthlyPayment =
+        (currentBal * (currentR * Math.pow(1 + currentR, currentM))) / (Math.pow(1 + currentR, currentM) - 1)
+    }
+
+    // Calculate new monthly payment
+    const newLoanAmount = Number.parseFloat(refNewLoanAmount)
+
+    // Validate newLoanAmount in your validation section
+    if (
+      isNaN(currentBal) ||
+      isNaN(currentR) ||
+      isNaN(currentM) ||
+      isNaN(newLoanAmount) ||  // ✅ Add this
+      isNaN(newR) ||
+      isNaN(newM) ||
+      isNaN(closingCosts) ||
+      currentBal <= 0 ||
+      currentR < 0 ||
+      currentM <= 0 ||
+      newLoanAmount <= 0 ||  // ✅ Add this
+      newR < 0 ||
+      newM <= 0 ||
+      closingCosts < 0
+    ) {
+      alert("Please enter valid numbers")
+      return
+    }
+
+    // Calculate new monthly payment
+    let newMonthlyPayment: number
+    if (newR === 0) {
+      newMonthlyPayment = newLoanAmount / newM  // ✅ Use newLoanAmount
+    } else {
+      newMonthlyPayment = (newLoanAmount * (newR * Math.pow(1 + newR, newM))) / (Math.pow(1 + newR, newM) - 1)  // ✅ Use newLoanAmount
+    }
+
+    const monthlySavings = currentMonthlyPayment - newMonthlyPayment
+    const totalCurrentCost = currentMonthlyPayment * currentM
+    const totalNewCost = newMonthlyPayment * newM + closingCosts
+    const totalSavings = totalCurrentCost - totalNewCost
+
+    let breakEvenMonths: number
+    let breakEvenMessage: string
+
+    if (monthlySavings > 0) {
+      // Case 1: Lower monthly payment
+      breakEvenMonths = closingCosts / monthlySavings
+      breakEvenMessage = `You'll recover closing costs in ${breakEvenMonths.toFixed(1)} months`
+    } else if (monthlySavings < 0) {
+      // Case 2: Higher monthly payment
+      // Only makes sense if total savings over loan term is positive
+      if (totalSavings > 0) {
+        breakEvenMonths = closingCosts / (-monthlySavings)
+        breakEvenMessage = `Despite higher monthly payments, you'll save overall if you stay ${breakEvenMonths.toFixed(1)}+ months`
+      } else {
+        breakEvenMonths = Infinity
+        breakEvenMessage = "This refinance costs more overall - not recommended"
+      }
+    } else {
+      // Case 3: Same monthly payment
+      breakEvenMonths = totalSavings > 0 ? 0 : Infinity
+      breakEvenMessage = totalSavings > 0 
+        ? "Same monthly payment, but you save on total interest" 
+        : "No financial benefit"
+    }
+
+    setRefinanceResults({
+      currentMonthlyPayment,
+      newMonthlyPayment,
+      monthlySavings,
+      totalCurrentCost,
+      totalNewCost,
+      totalSavings,
+      breakEvenMonths,
+      breakEvenMessage, // Add this to state type
+    })
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto">
+      <div>
+        <ThemeToggle />
+        {/* Header */}
+        <h1 className="sr-only">Mortgage Calculator Suite</h1>
+        {/* Mode Selection */}
+        <div className="mb-8">
+
+          <Tabs defaultValue="current-balance" className="w-full">
+            <TabsList className="grid w-full grid-rows-1 sm:grid-cols-2 p-0 gap-4">
+              <TabsTrigger value="current-balance" className="cursor-pointer">Current Balance</TabsTrigger>
+              <TabsTrigger value="refinance" className="cursor-pointer">Refinance Analysis</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="current-balance">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Current Mortgage Balance Calculator</CardTitle>
+                  <CardDescription>
+                    Calculate the present value of your remaining monthly mortgage payments (your mortgage balance).
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <div className="relative">
+                    <Label className="font-semibold" htmlFor="months">Months remaining on loan</Label>
+                    <Input
+                      id="months"
+                      type="number"
+                      placeholder="-"
+                      value={monthsRemaining}
+                      onChange={(e) => setMonthsRemaining(e.target.value)}
+                      min="0"
+                      step="1"
+                      className="text-black font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                      <button
+                        type="button"
+                        tabIndex={-1}
+                        aria-label="Increase amount"
+                        onClick={() => {
+                          const current = Number.parseFloat(monthsRemaining || "0");
+                          setMonthsRemaining((current + 1).toString());
+                        }}
+                        className="mb-[-5px] mt-[-5px] hover:text-grey-med-dark focus:outline-none"
+                      >
+                        <BiSolidUpArrow size={24} />
+                      </button>
+                      <button
+                        type="button"
+                        tabIndex={-1}
+                        aria-label="Decrease amount"
+                        onClick={() => {
+                          const current = Number.parseFloat(monthsRemaining || "0");
+                          if (current > 0) {
+                            setMonthsRemaining((current - 1).toString());
+                          }
+                        }}
+                        className="hover:text-grey-med-dark focus:outline-none"
+                      >
+                        <BiSolidDownArrow size={24} />
+                      </button>
+                    </div>
+                    <p className="mt-3 text-[14px]">{monthsRemaining || "0"} months = {(Number.parseFloat(monthsRemaining || "0") / 12).toFixed(1)} years</p>
+                  </div>
+
+                  <div className="relative">
+                    <Label className="font-semibold" htmlFor="rate">Annual interest rate (%)</Label>
+                    <Input
+                      id="rate"
+                      type="number"
+                      placeholder="-"
+                      value={annualRate}
+                      onChange={(e) => setAnnualRate(e.target.value)}
+                      min="0"
+                      step="0.1"
+                      className="text-lagunita font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                      <button
+                        type="button"
+                        tabIndex={-1}
+                        aria-label="Increase amount"
+                        onClick={() => {
+                          const current = Number.parseFloat(annualRate || "0");
+                          setAnnualRate((current + 0.1).toFixed(1));
+                        }}
+                        className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                      >
+                        <BiSolidUpArrow size={24} />
+                      </button>
+                      <button
+                        type="button"
+                        tabIndex={-1}
+                        aria-label="Decrease amount"
+                        onClick={() => {
+                          const current = Number.parseFloat(annualRate || "0");
+                          setAnnualRate(Math.max(0, current - 0.1).toFixed(1));
+                        }}
+                        className="hover:text-grey-med-dark focus:outline-none"
+                      >
+                        <BiSolidDownArrow size={24} />
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="relative">
+                    <Label className="font-semibold" htmlFor="payment">Monthly payment amount ($)</Label>
+                    <Input
+                      id="payment"
+                      type="number"
+                      placeholder="-"
+                      value={monthlyPayment}
+                      onChange={(e) => setMonthlyPayment(e.target.value)}
+                      min="0"
+                      step="0.01"
+                      className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                    <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                      <button
+                        type="button"
+                        tabIndex={-1}
+                        aria-label="Increase amount"
+                        onClick={() => {
+                          const current = Number.parseFloat(monthlyPayment || "0");
+                          setMonthlyPayment((current + 1).toFixed(2));
+                        }}
+                        className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                      >
+                        <BiSolidUpArrow size={24} />
+                      </button>
+                      <button
+                        type="button"
+                        tabIndex={-1}
+                        aria-label="Decrease amount"
+                        onClick={() => {
+                          const current = Number.parseFloat(monthlyPayment || "0");
+                          if (current > 0) {
+                            setMonthlyPayment((current - 1).toFixed(2));
+                          }
+                        }}
+                        className="hover:text-grey-med-dark focus:outline-none"
+                      >
+                        <BiSolidDownArrow size={24} />
+                      </button>
+                    </div>
+                  </div>
+                  {currentBalance !== null && (
+                    <div className="bg-[var(--card-background)] rounded-md p-[32px] text-center md:text-left"> 
+                      <p className="text-md font-bold mb-1">Current Mortgage Balance</p>
+                      <p className="text-4xl font-bold text-lagunita">
+                        ${currentBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                      </p>
+                    </div>
+                  )}
+                  <Button
+                    className={`h-18 whitespace-normal bg-navy border-2 border-navy cursor-pointer hover:bg-white hover:border-2 hover:border-lagunita hover:text-lagunita text-white w-full md:w-auto`}
+                    onClick={currentBalance !== null ? () => { setCurrentBalance(null); setMonthsRemaining(""); setAnnualRate(""); setMonthlyPayment(""); } : calculateBalance}
+                  >
+                    {currentBalance !== null ? "Reset" : "Calculate Current Balance"}
+                  </Button>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="refinance">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Refinance Analysis</CardTitle>
+                  <CardDescription>Analyze if refinancing makes financial sense for your situation.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <div className="md:grid md:grid-cols-2 gap-4">
+                    <div className="pr-4">
+                      <h2 className="mb-4 text-lg text-lagunita font-semibold border-b-1 border-lagunita">Current Loan Term</h2>
+                  
+                      <div className="mb-5 relative">
+                        <Label className="font-semibold" htmlFor="ref-balance">Remaining balance ($)</Label>
+                        <Input
+                          id="ref-balance"
+                          type="number"
+                          placeholder="-"
+                          value={refCurrentBalance}
+                          onChange={(e) => setRefCurrentBalance(e.target.value)}
+                          min="0"
+                          step="0.01"
+                          className="text-black font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Increase amount"
+                            onClick={() => {
+                              const current = Number.parseFloat(refCurrentBalance || "0");
+                              setRefCurrentBalance((current + 1).toFixed(2));
+                            }}
+                            className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidUpArrow size={24} />
+                          </button>
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Decrease amount"
+                            onClick={() => {
+                              const current = Number.parseFloat(refCurrentBalance || "0");
+                              setRefCurrentBalance(Math.max(0,current - 1).toFixed(2));
+                            }}
+                            className="hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidDownArrow size={24} />
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="mb-5 relative">
+                        <Label className="font-semibold" htmlFor="ref-current-months">Months remaining on loan</Label>
+                        <Input
+                          id="ref-current-months"
+                          type="number"
+                          placeholder="-"
+                          value={refCurrentMonths}
+                          onChange={(e) => setRefCurrentMonths(e.target.value)}
+                          min="0"
+                          step="1"
+                          className="text-black font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Increase amount"
+                            onClick={() => {
+                              const current = Number.parseInt(refCurrentMonths || "0");
+                              setRefCurrentMonths((current + 1).toString());
+                            }}
+                            className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidUpArrow size={24} />
+                          </button>
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Decrease amount"
+                            onClick={() => {
+                              const current = Number.parseInt(refCurrentMonths || "0");
+                              setRefCurrentMonths(Math.max(0, current - 1).toString());
+                            }}
+                            className="hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidDownArrow size={24} />
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="mb-5 relative">
+                        <Label className="font-semibold" htmlFor="ref-current-rate">Current interest rate (%)</Label>
+                        <Input
+                          id="ref-current-rate"
+                          type="number"
+                          placeholder="-"
+                          value={refCurrentRate}
+                          onChange={(e) => setRefCurrentRate(e.target.value)}
+                          min="0"
+                          step="0.01"
+                          className="text-lagunita font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Increase amount"
+                            onClick={(() => setRefCurrentRate((prev) => {
+                              const current = Number.parseFloat(prev || "0");
+                              return (current + 0.1).toFixed(1);
+                            }))}
+                            className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidUpArrow size={24} />
+                          </button>
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Decrease amount"
+                            onClick={(() => setRefCurrentRate((prev) => {
+                              const current = Number.parseFloat(prev || "0");
+                              return Math.max(0, current - 0.1).toFixed(1);
+                            }))}
+                            className="hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidDownArrow size={24} />
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="mb-5 relative">
+                        <Label className="font-semibold" htmlFor="ref-current-monthly-payment">Current monthly payment amount</Label>
+                        <Input
+                          id="ref-current-monthly-payment"
+                          type="number"
+                          placeholder="-"
+                          value={refCurrentMonthlyPayment}
+                          onChange={(e) => setRefCurrentMonthlyPayment(e.target.value)}
+                          min="0"
+                          step="0.01"
+                          className="text-black font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Increase amount"
+                            onClick={(() => setRefCurrentMonthlyPayment((prev) => {
+                              const current = Number.parseFloat(prev || "0");
+                              return (current + 1).toFixed(2);
+                            }))}
+                            className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidUpArrow size={24} />
+                          </button>
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Decrease amount"
+                            onClick={(() => setRefCurrentMonthlyPayment((prev) => {
+                              const current = Number.parseFloat(prev || "0");
+                              return Math.max(0, current - 0.1).toFixed(1);
+                            }))}
+                            className="hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidDownArrow size={24} />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="pl-0">
+                      <h2 className="mb-4 text-lg text-lagunita font-semibold border-b-1 border-lagunita">New Loan Terms</h2>
+
+                      <div className="mb-5 relative">
+                        <Label className="font-semibold" htmlFor="ref-new-loan-amount">New loan amount</Label>
+                        <Input
+                          id="ref-new-loan-amount"
+                          type="number"
+                          placeholder="-"
+                          value={refNewLoanAmount}
+                          onChange={(e) => setRefNewLoanAmount(e.target.value)}
+                          min="0"
+                          step="0.01"
+                          className="text-black font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Increase amount"
+                            onClick={() => setRefNewLoanAmount((prev) => {
+                              const current = Number.parseFloat(prev || "0");
+                              return (current + 1).toFixed(2);
+                            })}
+                            className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidUpArrow size={24} />
+                          </button>
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Decrease amount"
+                            onClick={() => setRefNewLoanAmount((prev) => {
+                              const current = Number.parseFloat(prev || "0");
+                              return Math.max(0, current - 1).toFixed(2);
+                            })}
+                            className="hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidDownArrow size={24} />
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="mb-5 relative">
+                        <Label className="font-semibold" htmlFor="ref-new-months">New loan term (months)</Label>
+                        <Input
+                          id="ref-new-months"
+                          type="number"
+                          placeholder="-"
+                          value={refNewMonths}
+                          onChange={(e) => setRefNewMonths(e.target.value)}
+                          min="0"
+                          step="1"
+                          className="text-black font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Increase amount"
+                            onClick={() => {
+                              const current = Number.parseInt(refNewMonths || "0");
+                              setRefNewMonths((current + 1).toString());
+                            }}
+                            className="mt-[-6px] mb-[-5px] hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidUpArrow size={24} />
+                          </button>
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Decrease amount"
+                            onClick={() => {
+                              const current = Number.parseInt(refNewMonths || "0");
+                              setRefNewMonths(Math.max(0, current - 1).toString());
+                            }}
+                            className="hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidDownArrow size={24} />
+                          </button>
+                        </div>
+                        <p className="mt-3 text-[14px]">{refNewMonths || "0"} months = {(Number.parseFloat(refNewMonths || "0") / 12).toFixed(1)} years</p>
+                      </div>
+
+                      <div className="mb-5 relative">
+                        <Label className="font-semibold" htmlFor="ref-new-rate">New annual interest rate (%)</Label>
+                        <Input
+                          id="ref-new-rate"
+                          type="number"
+                          placeholder="-"
+                          value={refNewRate}
+                          onChange={(e) => setRefNewRate(e.target.value)}
+                          min="0"
+                          step="0.1"
+                          className="text-lagunita font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Increase amount"
+                            onClick={() => setRefNewRate((prev) => {
+                              const current = Number.parseFloat(prev || "0");
+                              return (current + 0.1).toFixed(1);
+                            })} 
+                            className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidUpArrow size={24} />
+                          </button>
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Decrease amount"
+                            onClick={() => setRefNewRate((prev) => {
+                              const current = Number.parseFloat(prev || "0");
+                              return Math.max(0, current - 0.1).toFixed(1);
+                            })}
+                            className="hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidDownArrow size={24} />
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="my-6 border-b-1 border-lagunita"/>
+
+                      <div className="mb-5 relative">
+                        <Label className="font-semibold" htmlFor="ref-closing">Closing cost & fees</Label>
+                        <Input
+                          id="ref-closing"
+                          type="number"
+                          placeholder="-"
+                          value={refClosingCosts}
+                          onChange={(e) => setRefClosingCosts(e.target.value)}
+                          min="0"
+                          step="0.01"
+                          className="text-black font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Increase amount"
+                            onClick={() => {
+                              const current = Number.parseInt(refClosingCosts || "0");
+                              setRefClosingCosts((current + 1).toString());
+                            }} 
+                            className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidUpArrow size={24} />
+                          </button>
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Decrease amount"
+                            onClick={() => {
+                              const current = Number.parseInt(refClosingCosts || "0");
+                              setRefClosingCosts(Math.max(0, current - 1).toString());
+                            }}
+                            className="hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidDownArrow size={24} />
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="mb-5 relative">
+                        <Label className="font-semibold" htmlFor="ref-years-in-house">Expected years living in house</Label>
+                        <Input
+                          id="ref-years-in-house"
+                          type="number"
+                          placeholder="-"
+                          value={refYearsIn}
+                          onChange={(e) => setRefYearsIn(e.target.value)}
+                          min="0"
+                          step="1"
+                          className="text-black font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                        />
+                        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col">
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Increase amount"
+                            onClick={() => {
+                              const current = Number.parseInt(refYearsIn || "0");
+                              setRefYearsIn((current + 1).toString());
+                            }} 
+                            className="mb-[-5px] mt-6 hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidUpArrow size={24} />
+                          </button>
+                          <button
+                            type="button"
+                            tabIndex={-1}
+                            aria-label="Decrease amount"
+                            onClick={() => {
+                              const current = Number.parseInt(refYearsIn || "0");
+                              setRefYearsIn(Math.max(0, current - 1).toString());
+                            }}
+                            className="hover:text-grey-med-dark focus:outline-none"
+                          >
+                            <BiSolidDownArrow size={24} />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {refinanceResults && (
+                    <div className="bg-[var(--card-background)] rounded-md p-[32px] text-center md:text-left">
+                      
+                      <div className="text-left">
+                        <p className="font-semibold text-lagunita mt-4 mb-2">New monthly payment</p>
+                        <p className="text-2xl p-4 bg-lagunita-lighter text-black border-1 border-lagunita rounded-lg font-bold">
+                          ${formatCurrency(refinanceResults.newMonthlyPayment)}
+                        </p>
+                      </div>
+
+                      <div className="text-left">
+                        <p className="font-semibold text-lagunita mt-4 mb-2">
+                          {refinanceResults.monthlySavings >= 0 ? "Monthly savings" : "Monthly increase"}
+                        </p>
+                        <p className={`text-2xl p-4 border-1 rounded-lg font-bold ${
+                          refinanceResults.monthlySavings >= 0 
+                            ? "bg-lagunita-lighter text-black border-1 border-lagunita" 
+                            : "bg-berry-light border-berry text-black"
+                        }`}>
+                          {refinanceResults.monthlySavings >= 0 ? "+" : "-"}$
+                          {formatCurrency(Math.abs(refinanceResults.monthlySavings))}
+                        </p>
+                      </div>
+
+                      <div className="">
+                        <p className="text-md font-bold mt-4 mb-2">
+                          {refinanceResults.totalSavings >= 0 ? "Refinancing saves you" : "Refinancing costs you"}
+                        </p>
+                        <p className={`text-4xl font-bold ${
+                          refinanceResults.totalSavings >= 0 ? "text-lagunita" : "text-berry"
+                        }`}>
+                          {refinanceResults.totalSavings >= 0 ? "" : "-"}$
+                          {formatCurrency(Math.abs(refinanceResults.totalSavings))}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+
+                  {refinanceResults ? (
+                    <div className="flex gap-4 w-full md:w-auto">
+                      <Button
+                        className={`h-18 whitespace-normal cursor-pointer bg-lagunita border-2-lagunita hover:bg-white hover:border-2 hover:border-lagunita hover:text-lagunita text-white flex-1 md:flex-none`}
+                        onClick={calculateRefinance}
+                      >
+                        Recalculate
+                      </Button>
+                      <Button
+                        className={`h-18 whitespace-normal bg-navy cursor-pointer border-2-navy hover:bg-white hover:border-2 hover:border-lagunita hover:text-lagunita text-white flex-1 md:flex-none`}
+                        onClick={() => { setRefinanceResults(null); setRefCurrentBalance(""); setRefCurrentMonthlyPayment(""); setRefCurrentMonths(""); setRefCurrentRate(""); setRefNewLoanAmount(""); setRefNewRate(""); setRefNewMonths(""); setRefClosingCosts(""); setRefYearsIn(""); }}
+                      >
+                        Reset
+                      </Button>
+                    </div>
+                  ) : (
+                    <Button
+                      className={`h-18 whitespace-normal bg-navy cursor-pointer hover:bg-white hover:border-2 hover:border-lagunita hover:text-lagunita text-white w-full md:w-auto`}
+                      onClick={calculateRefinance}
+                    >
+                      Compare Refinance Options
+                    </Button>
+                  )}
+
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+      </div>
+    </div>
+  </div>
+  )
+}
\ No newline at end of file
diff --git a/app/interactives/present-value-calculator/page.tsx b/app/interactives/present-value-calculator/page.tsx
index 5f77bb3..09f74de 100644
--- a/app/interactives/present-value-calculator/page.tsx
+++ b/app/interactives/present-value-calculator/page.tsx
@@ -128,7 +128,7 @@ export default function PresentValueCalculator() {
 
               {/* Watch Time Impact Button */}
               <Button
-                className="w-full py-[35px] px-[30px] font-bold bg-berry hover:bg-gray-800 text-white"
+                className="w-full py-[35px] px-[30px] font-bold bg-berry hover:bg-[var(--button-berry)] text-white"
                 onClick={handleWatchClick}
                 disabled={isAnimating}
                 size="watch"
diff --git a/app/interactives/savings-calculator/page.tsx b/app/interactives/savings-calculator/page.tsx
index 80394f8..c7ff2d3 100644
--- a/app/interactives/savings-calculator/page.tsx
+++ b/app/interactives/savings-calculator/page.tsx
@@ -225,7 +225,7 @@ export default function SavingsCalculator() {
           <div className="grid grid-cols-3 gap-2">
             <Button
               variant={mode === "monthly-savings" ? "default" : "outline"}
-              className={`h-18 whitespace-normal ${mode === "monthly-savings" ? "bg-lagunita hover:bg-grey-700" : "bg-[var(--results-white-background)]"}`}
+              className={`h-18 whitespace-normal cursor-pointer ${mode === "monthly-savings" ? "bg-lagunita text-white hover:bg-navy" : "bg-[var(--results-white-background)] hover:bg-lagunita hover:text-white"}`}
               onClick={() => setMode("monthly-savings")}
             >
               <FaDollarSign className="hidden sm:block h-5 w-5 mr-2" />
@@ -233,7 +233,7 @@ export default function SavingsCalculator() {
             </Button>
             <Button
               variant={mode === "time-to-goal" ? "default" : "outline"}
-              className={`h-18 whitespace-normal ${mode === "time-to-goal" ? "bg-navy hover:bg-grey-700 text-white" : "bg-[var(--results-white-background)]"}`}
+              className={`h-18 whitespace-normal cursor-pointer ${mode === "time-to-goal" ? "bg-navy text-white hover:bg-lagunita" : "bg-[var(--results-white-background)] hover:bg-lagunita hover:text-white"}`}
               onClick={() => setMode("time-to-goal")}
             >
               <FaRegCalendar className="hidden sm:block h-5 w-5 mr-2" />
@@ -241,7 +241,7 @@ export default function SavingsCalculator() {
             </Button>
             <Button
               variant={mode === "future-balance" ? "default" : "outline"}
-              className={`h-18 whitespace-normal ${mode === "future-balance" ? "bg-palo-verde hover:bg-grey-700" : "bg-[var(--results-white-background)]"}`}
+              className={`h-18 whitespace-normal cursor-pointer ${mode === "future-balance" ? "bg-palo-verde text-white hover:bg-[var(--button-green)]" : "bg-[var(--results-white-background)] hover:bg-[var(--button-green)] hover:text-white"}`}
               onClick={() => setMode("future-balance")}
             >
               <FaArrowTrendUp className="hidden sm:block h-5 w-5 mr-2" />
@@ -351,7 +351,7 @@ export default function SavingsCalculator() {
                     <Input
                       type="number"
                       value={contributionPerPeriod === 0 ? "" : contributionPerPeriod}
-                      placeholder="Monthly contribution"
+                      placeholder="0"
                       onChange={(e) => setcontributionPerPeriod(Number(e.target.value))}
                       className="font-bold block w-full rounded-md shadow-sm py-2 px-3 border pr-10 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                     />
@@ -539,7 +539,7 @@ export default function SavingsCalculator() {
                     }`}>
                       {isInvalid(results.totalDeposited)
                       ? "$0"
-                      : `$${results.contributionPerPeriod.toFixed(2).toLocaleString()}`}
+                      : `$${results.contributionPerPeriod.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                   </div>
                 </>
               )}
@@ -563,7 +563,7 @@ export default function SavingsCalculator() {
                     }`}>
                       {isInvalid(results.finalBalance)
                       ? "$0"
-                      : `$${results.finalBalance.toFixed(2).toLocaleString()}`}
+                      : `$${results.finalBalance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                   </div>
                 </>
               )}
@@ -580,7 +580,7 @@ export default function SavingsCalculator() {
                       <div className="w-full sm:w-[50%] text-lg-title p-4 self-center rounded-lg sm:rounded-r-lg font-bold text-[var(--foreground)] overflow-hidden text-ellipsis bg-[var(--secondary-background)]">
                         {isInvalid(results.totalDeposited)
                         ? "$0"
-                        : `$${results.totalDeposited.toFixed(2).toLocaleString()}`}
+                        : `$${results.totalDeposited.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                       </div>
                     </div>
                     <div className="flex flex-col sm:flex-row mb-1 bg-lagunita-lighter rounded-lg">
@@ -591,7 +591,7 @@ export default function SavingsCalculator() {
                       >
                         {(isInvalid(results.interestEarned) || results.interestEarned < 0)
                         ? "$0"
-                        : `$${results.interestEarned.toFixed(2).toLocaleString()}`}
+                        : `$${results.interestEarned.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                       </div>
                     </div>
                     {mode !== "future-balance" && (
@@ -600,7 +600,7 @@ export default function SavingsCalculator() {
                         Final balance:
                       </div>
                       <div className="w-full sm:w-[50%] text-lg-title p-4 rounded-lg sm:rounded-r-lg font-bold overflow-hidden text-ellipsis flex items-center text-[var(--foreground)] bg-[var(--results-blue-background)]">
-                        ${results.finalBalance.toFixed(2).toLocaleString()}
+                        ${results.finalBalance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                       </div>
                     </div>
                     )}
@@ -649,22 +649,22 @@ export default function SavingsCalculator() {
                               <td className="py-2 px-3 text-right">
                                 {(isInvalid(year.startingBalance) || year.startingBalance < 0)
                                 ? "$0"
-                                : `$${year.startingBalance.toFixed(2).toLocaleString()}`}
+                                : `$${year.startingBalance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                               </td>
                               <td className="py-2 px-3 text-right">
                                 {(isInvalid(year.contributions) || year.contributions < 0)
                                 ? "$0"
-                                : `$${year.contributions.toFixed(2).toLocaleString()}`}
+                                : `$${year.contributions.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                               </td>
                               <td className="py-2 px-3 text-right font-bold text-lagunita">
                                 {(isInvalid(year.interestEarned) || year.interestEarned < 0)
                                 ? "$0"
-                                : `$${year.interestEarned.toFixed(2).toLocaleString()}`}
+                                : `$${year.interestEarned.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                               </td>
                               <td className="py-2 px-1 text-right font-bold">
                                 {(isInvalid(year.endingBalance) || year.endingBalance < 0)
                                 ? "$0"
-                                : `$${year.endingBalance.toFixed(2).toLocaleString()}`}
+                                : `$${year.endingBalance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                               </td>
                             </tr>
                           ))}
diff --git a/app/ui/components/slider.tsx b/app/ui/components/slider.tsx
index 764bf2d..79924ea 100644
--- a/app/ui/components/slider.tsx
+++ b/app/ui/components/slider.tsx
@@ -16,7 +16,7 @@ const CustomSlider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-4 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderPrimitive.Range className={cn("absolute h-full bg-[#007C92]", rangeClassName)} />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-8 w-8 border drop-shadow-xl rounded-full bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible-ring-color-grey-med-dark disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-8 w-8 border drop-shadow-xl cursor-pointer rounded-full bg-white hover:border-lagunita hover:border-3 focus:border-lagunita focus:border-3 border-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible-ring-color-grey-med-dark disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ))
 CustomSlider.displayName = "CustomSlider"
diff --git a/app/ui/components/tabs.tsx b/app/ui/components/tabs.tsx
index 685b6c9..7b1fbfb 100644
--- a/app/ui/components/tabs.tsx
+++ b/app/ui/components/tabs.tsx
@@ -28,12 +28,13 @@ export const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(({ class
 TabsList.displayName = "TabsList";
 
 export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(({ className, children, ...props }, ref) => (
-  <RadixTabs.Trigger
+   <RadixTabs.Trigger
     ref={ref}
     className={cn(
       "border-2 border-lagunita px-4 py-2 h-18 whitespace-normal items-center justify-center rounded-md font-bold ring-offset-background transition-colors", 
       "flex-none w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       "data-[state=active]:bg-lagunita data-[state=active]:text-white",
+      "hover:bg-navy hover:text-white", 
       className
     )}
     {...props}
diff --git a/app/ui/globals.css b/app/ui/globals.css
index 1961dc4..b6542b0 100644
--- a/app/ui/globals.css
+++ b/app/ui/globals.css
@@ -62,6 +62,7 @@
   --color-badge-orange: rgba(253, 141, 67, 1);
   --text-lg-title: 20px;
   --color-border-dark: rgba(80, 80, 80, 1);
+  --button-green: rgba(30, 113, 102, 1);
 }
 
 :root {
@@ -112,6 +113,8 @@
   --text-navy:  rgba(14, 59, 79, 1);
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
+  --button-green:  rgba(30, 113, 102, 1);
+  --button-berry: rgba(151, 24, 87, 1);
 }
 
 .dark {
@@ -160,6 +163,8 @@
   --sidebar-ring: oklch(0.556 0 0);
   --text-navy: oklch(0.985 0 0);
   --additional-background: rgb(52, 51, 51);
+  --button-green:  rgba(30, 113, 102, 1);
+  --button-berry: rgba(151, 24, 87, 1);
 }
 
 @layer base {