diff --git a/src/AdvancedCalculator.js b/src/AdvancedCalculator.js
index a13914f..8e8c4ec 100644
--- a/src/AdvancedCalculator.js
+++ b/src/AdvancedCalculator.js
@@ -1,22 +1,37 @@
-import React, { useState, useEffect } from 'react'; 
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ScatterChart, Scatter } from 'recharts'; 
-import * as math from 'mathjs'; 
-import _ from 'lodash'; 
-import './AdvancedCalculatorStyles.css';
+import React, { useState, useEffect } from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  ScatterChart,
+  Scatter,
+} from "recharts";
+import * as math from "mathjs";
+import _ from "lodash";
+import "./AdvancedCalculatorStyles.css";
 
 // Main Calculator Component
 const AdvancedCalculator = () => {
   // State management
-  const [activeTab, setActiveTab] = useState('basic');
+  const [activeTab, setActiveTab] = useState("basic");
   const [darkMode, setDarkMode] = useState(false);
-  const [display, setDisplay] = useState('0');
+  const [display, setDisplay] = useState("0");
   const [memory, setMemory] = useState(0);
   const [history, setHistory] = useState([]);
-  const [graphFunction, setGraphFunction] = useState('x^2');
+  const [graphFunction, setGraphFunction] = useState("x^2");
   const [graphRange, setGraphRange] = useState([-10, 10]);
   const [graphData, setGraphData] = useState([]);
-  const [secondGraph, setSecondGraph] = useState({ enabled: false, function: 'x', color: '#82ca9d' });
-  const [physicsType, setPhysicsType] = useState('projectile');
+  const [secondGraph, setSecondGraph] = useState({
+    enabled: false,
+    function: "x",
+    color: "#82ca9d",
+  });
+  const [physicsType, setPhysicsType] = useState("projectile");
   const [physicsParams, setPhysicsParams] = useState({
     velocity: 20,
     angle: 45,
@@ -30,76 +45,68 @@ const AdvancedCalculator = () => {
     magneticField: 1.0,
     resistance: 10,
     voltage: 12,
-    current: 1.2
+    current: 1.2,
   });
   const [simulationData, setSimulationData] = useState([]);
   const [simulationRunning, setSimulationRunning] = useState(false);
   const [simulationInterval, setSimulationInterval] = useState(null);
   const [unitConversion, setUnitConversion] = useState({
     fromValue: 1,
-    fromUnit: 'm',
-    toUnit: 'ft',
-    category: 'length'
+    fromUnit: "m",
+    toUnit: "ft",
+    category: "length",
   });
   const [matrixA, setMatrixA] = useState([
     [1, 2],
-    [3, 4]
+    [3, 4],
   ]);
   const [matrixB, setMatrixB] = useState([
     [5, 6],
-    [7, 8]
+    [7, 8],
   ]);
   const [matrixResult, setMatrixResult] = useState(null);
-  const [matrixOperation, setMatrixOperation] = useState('add');
-  const [statisticsData, setStatisticsData] = useState('1, 2, 3, 4, 5');
+  const [matrixOperation, setMatrixOperation] = useState("add");
+  const [statisticsData, setStatisticsData] = useState("1, 2, 3, 4, 5");
   const [statisticsResults, setStatisticsResults] = useState({});
-  const [saveName, setSaveName] = useState('');
+  const [saveName, setSaveName] = useState("");
   const [savedStates, setSavedStates] = useState({});
   const [showSettings, setShowSettings] = useState(false);
   const [settings, setSettings] = useState({
     precision: 4,
-    angleUnit: 'deg',
-    notationFormat: 'auto',
-    graphTheme: 'default'
+    angleUnit: "deg",
+    notationFormat: "auto",
+    graphTheme: "default",
   });
- 
-  // Adding state for spreadsheet
-  const [spreadsheetTemplate, setSpreadsheetTemplate] = useState('budget');
-  const [spreadsheetData, setSpreadsheetData] = useState([]);
-  const [spreadsheetHeaders, setSpreadsheetHeaders] = useState([]);
-  const [activeCell, setActiveCell] = useState({ row: 0, col: 0 });
-  const [cellValues, setCellValues] = useState({});
-  const [cellFormulas, setCellFormulas] = useState({});
 
-  // Get graph colors based on theme   
+  // Get graph colors based on theme
   const getGraphColors = () => {
     const themes = {
       default: {
         line1: "#8884d8",
         line2: "#82ca9d",
         grid: "#ccc",
-        background: darkMode ? "#1f2937" : "#fff"
+        background: darkMode ? "#1f2937" : "#fff",
       },
       dark: {
         line1: "#ff7300",
         line2: "#00bcd4",
         grid: "#555",
-        background: "#111"
+        background: "#111",
       },
       pastel: {
         line1: "#ffb6c1",
         line2: "#add8e6",
         grid: "#d3d3d3",
-        background: darkMode ? "#1f2937" : "#f0f8ff"
+        background: darkMode ? "#1f2937" : "#f0f8ff",
       },
       neon: {
         line1: "#39ff14",
         line2: "#ff00ff",
         grid: "#0066ff",
-        background: "#000"
-      }
+        background: "#000",
+      },
     };
-        
+
     return themes[settings.graphTheme];
   };
 
@@ -109,7 +116,7 @@ const AdvancedCalculator = () => {
       const data = [];
       const step = (graphRange[1] - graphRange[0]) / 200;
       const expr = math.compile(graphFunction);
-            
+
       for (let x = graphRange[0]; x <= graphRange[1]; x += step) {
         try {
           const y = expr.evaluate({ x });
@@ -125,12 +132,12 @@ const AdvancedCalculator = () => {
       console.error("Error generating graph data:", error);
     }
   }, [graphFunction, graphRange]);
- 
+
   // Generate second graph data
   useEffect(() => {
     if (secondGraph.enabled) {
       try {
-        const data = graphData.map(point => {
+        const data = graphData.map((point) => {
           try {
             const expr = math.compile(secondGraph.function);
             const y2 = expr.evaluate({ x: point.x });
@@ -145,14 +152,17 @@ const AdvancedCalculator = () => {
       }
     }
   }, [secondGraph.function, secondGraph.enabled, graphRange, graphData]);
- 
+
   // Statistical calculations
   useEffect(() => {
     try {
-      const data = statisticsData.split(',').map(n => parseFloat(n.trim())).filter(n => !isNaN(n));
-            
+      const data = statisticsData
+        .split(",")
+        .map((n) => parseFloat(n.trim()))
+        .filter((n) => !isNaN(n));
+
       if (data.length === 0) return;
-            
+
       const mean = math.mean(data);
       const median = math.median(data);
       const mode = calculateMode(data);
@@ -163,26 +173,34 @@ const AdvancedCalculator = () => {
       const range = max - min;
       const sum = math.sum(data);
       const count = data.length;
-            
+
       setStatisticsResults({
-        mean, median, mode, standardDeviation, variance, 
-        min, max, range, sum, count
+        mean,
+        median,
+        mode,
+        standardDeviation,
+        variance,
+        min,
+        max,
+        range,
+        sum,
+        count,
       });
     } catch (error) {
       console.error("Error calculating statistics:", error);
     }
   }, [statisticsData]);
- 
+
   // Calculate mode
   const calculateMode = (arr) => {
     const frequency = {};
-    arr.forEach(val => {
+    arr.forEach((val) => {
       frequency[val] = (frequency[val] || 0) + 1;
     });
-        
+
     let maxFreq = 0;
     let modes = [];
-        
+
     for (const key in frequency) {
       if (frequency[key] > maxFreq) {
         maxFreq = frequency[key];
@@ -191,103 +209,107 @@ const AdvancedCalculator = () => {
         modes.push(parseFloat(key));
       }
     }
-        
-    return modes.join(', ');
+
+    return modes.join(", ");
   };
- 
+
   // Handle basic calculator button clicks
   const handleButtonClick = (value) => {
-    if (display === '0' || display === 'Error') {
+    if (display === "0" || display === "Error") {
       setDisplay(value);
     } else {
       setDisplay(display + value);
     }
   };
- 
+
   // Handle calculation
   const calculateResult = () => {
     try {
       // Replace π with pi and adjust for angle units
-      let formula = display.replace(/π/g, 'pi');
-            
-      if (settings.angleUnit === 'deg') {
+      let formula = display.replace(/π/g, "pi");
+
+      if (settings.angleUnit === "deg") {
         // Convert degrees to radians for trig functions
-        formula = formula.replace(/sin\(([^)]+)\)/g, 'sin($1 * pi/180)');
-        formula = formula.replace(/cos\(([^)]+)\)/g, 'cos($1 * pi/180)');
-        formula = formula.replace(/tan\(([^)]+)\)/g, 'tan($1 * pi/180)');
+        formula = formula.replace(/sin\(([^)]+)\)/g, "sin($1 * pi/180)");
+        formula = formula.replace(/cos\(([^)]+)\)/g, "cos($1 * pi/180)");
+        formula = formula.replace(/tan\(([^)]+)\)/g, "tan($1 * pi/180)");
       }
-            
+
       const result = math.evaluate(formula);
       let formattedResult;
-            
+
       // Format result according to settings
-      if (settings.notationFormat === 'scientific') {
+      if (settings.notationFormat === "scientific") {
         formattedResult = result.toExponential(settings.precision);
-      } else if (settings.notationFormat === 'fixed') {
+      } else if (settings.notationFormat === "fixed") {
         formattedResult = result.toFixed(settings.precision);
       } else {
-        formattedResult = typeof result === 'number'
-          ? math.format(result, { precision: settings.precision })
-          : result.toString();
+        formattedResult =
+          typeof result === "number"
+            ? math.format(result, { precision: settings.precision })
+            : result.toString();
       }
-            
-      setHistory([...history, { expression: display, result: formattedResult }]);
+
+      setHistory([
+        ...history,
+        { expression: display, result: formattedResult },
+      ]);
       setDisplay(formattedResult.toString());
     } catch (error) {
-      setDisplay('Error');
+      setDisplay("Error");
     }
   };
- 
+
   // Clear display
   const clearDisplay = () => {
-    setDisplay('0');
+    setDisplay("0");
   };
- 
+
   // Memory functions
   const memoryAdd = () => {
     try {
       const value = math.evaluate(display);
       setMemory(memory + value);
     } catch (error) {
-      setDisplay('Error');
+      setDisplay("Error");
     }
   };
- 
+
   const memorySubtract = () => {
     try {
       const value = math.evaluate(display);
       setMemory(memory - value);
     } catch (error) {
-      setDisplay('Error');
+      setDisplay("Error");
     }
   };
- 
+
   const memoryRecall = () => {
     setDisplay(memory.toString());
   };
- 
+
   const memoryClear = () => {
     setMemory(0);
   };
- 
+
   // Handle physics simulations
   const startSimulation = () => {
     if (simulationRunning) return;
-        
+
     setSimulationData([]);
-    setPhysicsParams({...physicsParams, time: 0});
+    setPhysicsParams({ ...physicsParams, time: 0 });
     setSimulationRunning(true);
-        
+
     const interval = setInterval(() => {
-      setPhysicsParams(prevParams => ({
+      setPhysicsParams((prevParams) => ({
         ...prevParams,
-        time: prevParams.time + 0.1
+        time: prevParams.time + 0.1,
       }));
     }, 100);
-        
+
     setSimulationInterval(interval);
   };
- 
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const stopSimulation = () => {
     if (simulationInterval) {
@@ -295,216 +317,253 @@ const AdvancedCalculator = () => {
     }
     setSimulationRunning(false);
   };
- 
+
   // Unit conversion
   const convertUnit = () => {
     try {
-      const result = math.evaluate(`${unitConversion.fromValue} ${unitConversion.fromUnit} to ${unitConversion.toUnit}`);
+      const result = math.evaluate(
+        `${unitConversion.fromValue} ${unitConversion.fromUnit} to ${unitConversion.toUnit}`
+      );
       // Return just the numeric value, without units
-      return result.toString().replace(unitConversion.toUnit, '').trim();
+      return result.toString().replace(unitConversion.toUnit, "").trim();
     } catch (error) {
-      return 'Error: Invalid conversion';
+      return "Error: Invalid conversion";
     }
   };
- 
+
   // Matrix operations
   const performMatrixOperation = () => {
     try {
       const A = math.matrix(matrixA);
       const B = math.matrix(matrixB);
       let result;
-            
+
       switch (matrixOperation) {
-        case 'add':
+        case "add":
           result = math.add(A, B);
           break;
-        case 'subtract':
+        case "subtract":
           result = math.subtract(A, B);
           break;
-        case 'multiply':
+        case "multiply":
           result = math.multiply(A, B);
           break;
-        case 'determinantA':
+        case "determinantA":
           result = math.det(A);
           break;
-        case 'determinantB':
+        case "determinantB":
           result = math.det(B);
           break;
-        case 'inverseA':
+        case "inverseA":
           result = math.inv(A);
           break;
-        case 'inverseB':
+        case "inverseB":
           result = math.inv(B);
           break;
-        case 'transposeA':
+        case "transposeA":
           result = math.transpose(A);
           break;
-        case 'transposeB':
+        case "transposeB":
           result = math.transpose(B);
           break;
         default:
           result = null;
       }
-            
-      if (['determinantA', 'determinantB'].includes(matrixOperation)) {
+
+      if (["determinantA", "determinantB"].includes(matrixOperation)) {
         setMatrixResult(result);
       } else {
         setMatrixResult(result.toArray());
       }
     } catch (error) {
-      setMatrixResult('Error: ' + error.message);
+      setMatrixResult("Error: " + error.message);
     }
   };
- 
+
   // Calculate physics simulation data
   useEffect(() => {
     if (!simulationRunning) return;
-        
+
     let newData = [];
-        
-    if (physicsType === 'projectile') {
+
+    if (physicsType === "projectile") {
       const { velocity, angle, height, gravity, time } = physicsParams;
-      const radians = angle * Math.PI / 180;
+      const radians = (angle * Math.PI) / 180;
       const vx = velocity * Math.cos(radians);
       const vy = velocity * Math.sin(radians);
-      
+
       // Calculate the theoretical range
-      const theoreticalRange = calculatePhysics('range');
-      
+      const theoreticalRange = calculatePhysics("range");
+
       // Calculate current position
       const x = vx * time;
       const y = height + vy * time - 0.5 * gravity * time * time;
-      
+
       // If we've reached or passed the ground, add final points and stop
       if (y < 0) {
         // Calculate the exact time when y=0 (impact time)
         // Using the quadratic formula for: height + vy*t - 0.5*g*t² = 0
         const a = -0.5 * gravity;
-        const b = vy; 
+        const b = vy;
         const c = height;
-        
-        const discriminant = b*b - 4*a*c;
+
+        const discriminant = b * b - 4 * a * c;
         let impactTime;
-        
+
         if (discriminant >= 0) {
           // Get both solutions
-          const t1 = (-b + Math.sqrt(discriminant)) / (2*a);
-          const t2 = (-b - Math.sqrt(discriminant)) / (2*a);
-          
+          const t1 = (-b + Math.sqrt(discriminant)) / (2 * a);
+          const t2 = (-b - Math.sqrt(discriminant)) / (2 * a);
+
           // Choose the positive solution that makes sense in context
           if (t1 > 0 && t2 > 0) {
             impactTime = Math.min(t1, t2);
           } else {
             impactTime = Math.max(t1, t2);
           }
-          
+
           // Make sure we have the right data array to work with
           newData = simulationData.slice(0, -1); // Remove the last point (which is below ground)
-          
+
           // Add a point just before landing for a smooth curve
           if (impactTime > 0.1) {
             const preImpactTime = impactTime - 0.05;
             const preImpactX = vx * preImpactTime;
-            const preImpactY = height + vy * preImpactTime - 0.5 * gravity * preImpactTime * preImpactTime;
-            
+            const preImpactY =
+              height +
+              vy * preImpactTime -
+              0.5 * gravity * preImpactTime * preImpactTime;
+
             if (preImpactY > 0) {
               newData.push({ x: preImpactX, y: preImpactY });
             }
           }
-          
-          // Add the exact landing point (y = 0)
+
+          // Calculate the exact landing point (y = 0)
           const impactX = vx * impactTime;
           newData.push({ x: impactX, y: 0 });
+
+          // Add additional points to show the full theoretical range
+          // Only do this if we haven't reached the theoretical range yet
+          if (impactX < theoreticalRange) {
+            // Add points at regular intervals to extend to the theoretical range
+            const intervalCount = 5; // Number of additional points to add
+            const xInterval = (theoreticalRange - impactX) / intervalCount;
+
+            for (let i = 1; i <= intervalCount; i++) {
+              const extendedX = impactX + xInterval * i;
+              newData.push({ x: extendedX, y: 0 });
+            }
+          }
         } else {
           newData = [...simulationData];
         }
-        
+
+        // Set the final data and stop the simulation
+        setSimulationData(newData);
         stopSimulation();
         return;
       }
-      
+
       newData = [...simulationData, { x, y }];
-    }
-    
-    else if (physicsType === 'pendulum') {
+    } else if (physicsType === "pendulum") {
       const { pendulumLength, gravity, time } = physicsParams;
       const omega = Math.sqrt(gravity / pendulumLength);
-      const angle = 30 * Math.PI / 180; // Starting angle (30 degrees)
-            
+      const angle = (30 * Math.PI) / 180; // Starting angle (30 degrees)
+
       const x = pendulumLength * Math.sin(angle * Math.cos(omega * time));
       const y = -pendulumLength * Math.cos(angle * Math.cos(omega * time));
-            
+
       newData = [...simulationData, { x, y }];
-    }
-    else if (physicsType === 'spring') {
+    } else if (physicsType === "spring") {
       const { mass, springConstant, time } = physicsParams;
       const omega = Math.sqrt(springConstant / mass);
       const amplitude = 5;
-            
+
       const x = amplitude * Math.cos(omega * time);
       const y = 0;
-            
+
       newData = [...simulationData, { x, y }];
-    }
-    else if (physicsType === 'circuit') {
+    } else if (physicsType === "circuit") {
       const { voltage, resistance, time } = physicsParams;
       const current = voltage / resistance;
-            
+
       newData = [...simulationData, { x: time, y: current }];
-    }
-    else if (physicsType === 'wave') {
+    } else if (physicsType === "wave") {
       const { time } = physicsParams;
       const amplitude = 3;
       const wavelength = 2;
       const frequency = 1;
-            
+
       for (let x = 0; x <= 20; x += 0.5) {
-        const y = amplitude * Math.sin(2 * Math.PI * (x / wavelength - frequency * time));
+        const y =
+          amplitude *
+          Math.sin(2 * Math.PI * (x / wavelength - frequency * time));
         newData.push({ x, y, time });
       }
-            
+
       // Filter to keep only the latest time values
-      newData = _.uniqBy(newData, 'x');
-      newData = _.sortBy(newData, 'x');
+      newData = _.uniqBy(newData, "x");
+      newData = _.sortBy(newData, "x");
     }
-        
+
     setSimulationData(newData);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [physicsParams.time, simulationRunning, physicsParams, physicsType, simulationData]);
- 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    physicsParams.time,
+    simulationRunning,
+    physicsParams,
+    physicsType,
+    simulationData,
+  ]);
+
   // Calculate physics values
   const calculatePhysics = (type) => {
-    const { velocity, angle, height, mass, gravity,
-            current, voltage,
-            electricCharge, magneticField } = physicsParams;
-    const radians = angle * Math.PI / 180;
-        
+    const {
+      velocity,
+      angle,
+      height,
+      mass,
+      gravity,
+      current,
+      voltage,
+      electricCharge,
+      magneticField,
+    } = physicsParams;
+    const radians = (angle * Math.PI) / 180;
+
     switch (type) {
-      case 'range':
+      case "range":
         return (velocity * velocity * Math.sin(2 * radians)) / gravity;
-      case 'maxHeight':
+      case "maxHeight":
         return height + (velocity * Math.sin(radians)) ** 2 / (2 * gravity);
-      case 'flightTime':
-        return (velocity * Math.sin(radians) + Math.sqrt((velocity * Math.sin(radians)) ** 2 + 2 * gravity * height)) / gravity;
-      case 'kineticEnergy':
+      case "flightTime":
+        return (
+          (velocity * Math.sin(radians) +
+            Math.sqrt(
+              (velocity * Math.sin(radians)) ** 2 + 2 * gravity * height
+            )) /
+          gravity
+        );
+      case "kineticEnergy":
         return 0.5 * mass * velocity * velocity;
-      case 'potentialEnergy':
+      case "potentialEnergy":
         return mass * gravity * height;
-      case 'power':
+      case "power":
         return voltage * current;
-      case 'resistance':
+      case "resistance":
         return voltage / current;
-      case 'lorentzForce':
+      case "lorentzForce":
         return electricCharge * velocity * magneticField;
       default:
         return 0;
     }
   };
- 
+
   // Save current state
   const saveCurrentState = () => {
     if (!saveName) return;
-        
+
     const currentState = {
       display,
       memory,
@@ -515,22 +574,22 @@ const AdvancedCalculator = () => {
       physicsParams,
       statisticsData,
       matrixA,
-      matrixB
+      matrixB,
     };
-        
+
     setSavedStates({
       ...savedStates,
-      [saveName]: currentState
+      [saveName]: currentState,
     });
-        
-    setSaveName('');
+
+    setSaveName("");
   };
- 
+
   // Load saved state
   const loadState = (stateName) => {
     const state = savedStates[stateName];
     if (!state) return;
-        
+
     setDisplay(state.display);
     setMemory(state.memory);
     setHistory(state.history);
@@ -542,19 +601,33 @@ const AdvancedCalculator = () => {
     setMatrixA(state.matrixA);
     setMatrixB(state.matrixB);
   };
- 
+
   // Render theme-aware button
   const Button = ({ children, onClick, className = "", color = "default" }) => {
     const colorClasses = {
-      default: darkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300",
-      blue: darkMode ? "bg-blue-700 hover:bg-blue-600" : "bg-blue-500 hover:bg-blue-400",
-      green: darkMode ? "bg-green-700 hover:bg-green-600" : "bg-green-500 hover:bg-green-400",
-      red: darkMode ? "bg-red-700 hover:bg-red-600" : "bg-red-500 hover:bg-red-400",
-      yellow: darkMode ? "bg-yellow-700 hover:bg-yellow-600" : "bg-yellow-100 hover:bg-yellow-200",
+      default: darkMode
+        ? "bg-gray-700 hover:bg-gray-600"
+        : "bg-gray-200 hover:bg-gray-300",
+      blue: darkMode
+        ? "bg-blue-700 hover:bg-blue-600"
+        : "bg-blue-500 hover:bg-blue-400",
+      green: darkMode
+        ? "bg-green-700 hover:bg-green-600"
+        : "bg-green-500 hover:bg-green-400",
+      red: darkMode
+        ? "bg-red-700 hover:bg-red-600"
+        : "bg-red-500 hover:bg-red-400",
+      yellow: darkMode
+        ? "bg-yellow-700 hover:bg-yellow-600"
+        : "bg-yellow-100 hover:bg-yellow-200",
     };
-        
-    const textColor = darkMode ? "text-gray-100" : (color === "default" ? "text-gray-800" : "text-white");
-        
+
+    const textColor = darkMode
+      ? "text-gray-100"
+      : color === "default"
+      ? "text-gray-800"
+      : "text-white";
+
     return (
       <button
         className={`p-2 rounded ${colorClasses[color]} ${textColor} ${className}`}
@@ -564,266 +637,118 @@ const AdvancedCalculator = () => {
       </button>
     );
   };
- 
-  // Evaluate cell formula - Helper function
-  const evaluateFormula = (formula, cellValues) => {
-    try {
-      // Replace cell references (e.g., A1, B2) with their values
-      let expression = formula.substring(1); // Remove the '='
-            
-      // Replace SUM function
-      expression = expression.replace(/SUM\(([A-Z][0-9]+):([A-Z][0-9]+)\)/g, (match, start, end) => {
-        const startCol = start.charAt(0).charCodeAt(0) - 65;
-        const startRow = parseInt(start.substring(1)) - 1;
-        const endCol = end.charAt(0).charCodeAt(0) - 65;
-        const endRow = parseInt(end.substring(1)) - 1;
-                
-        let sum = 0;
-        for (let row = startRow; row <= endRow; row++) {
-          for (let col = startCol; col <= endCol; col++) {
-            const cellKey = `${row}-${col}`;
-            const value = parseFloat(cellValues[cellKey] || '0');
-            if (!isNaN(value)) {
-              sum += value;
-            }
-          }
-        }
-        return sum;
-      });
-            
-      // Replace PMT function (simplified)
-      expression = expression.replace(/PMT\(([^,]+),\s*([^,]+),\s*([^)]+)\)/g, (match, rate, nper, pv) => {
-        // Parse values instead of using eval
-        const rateVal = parseFloat(rate);
-        const nperVal = parseFloat(nper);
-        const pvVal = parseFloat(pv);
-        return (pvVal * rateVal) / (1 - Math.pow(1 + rateVal, -nperVal));
-      });
-      
-      // Replace FV function (simplified)
-      expression = expression.replace(/FV\(([^,]+),\s*([^,]+),\s*([^,]+),\s*([^)]+)\)/g, (match, rate, nper, pmt, pv) => {
-        // Parse values instead of using eval
-        const rateVal = parseFloat(rate);
-        const nperVal = parseFloat(nper);
-        const pmtVal = parseFloat(pmt);
-        const pvVal = parseFloat(pv);
-        return -1 * (pvVal * Math.pow(1 + rateVal, nperVal) + pmtVal * (Math.pow(1 + rateVal, nperVal) - 1) / rateVal);
-      });
-            
-      // Replace cell references
-      expression = expression.replace(/([A-Z])([0-9]+)/g, (match, col, row) => {
-        const colIndex = col.charCodeAt(0) - 65;
-        const rowIndex = parseInt(row) - 1;
-        const cellKey = `${rowIndex}-${colIndex}`;
-                
-        // First check if there's a direct value in cellValues
-        if (cellValues[cellKey] !== undefined) {
-          return isNaN(parseFloat(cellValues[cellKey])) ? '0' : cellValues[cellKey];
-        }
-                
-        // Otherwise, check the spreadsheetData
-        if (spreadsheetData[rowIndex] && spreadsheetData[rowIndex][colIndex] !== undefined) {
-          const value = spreadsheetData[rowIndex][colIndex];
-          // If it's a formula, we need to recursively evaluate it
-          if (typeof value === 'string' && value.startsWith('=')) {
-            return evaluateFormula(value, cellValues);
-          }
-          return isNaN(parseFloat(value)) ? '0' : value;
-        }
-                
-        return '0';
-      });
-            
-      // Use math.js to evaluate the expression instead of eval
-      const result = math.evaluate(expression);
-      return isNaN(result) ? 'Error' : parseFloat(result).toFixed(2);
-    } catch (error) {
-      console.error("Formula evaluation error:", error);
-      return 'Error';
-    }
-  };
-    
-  // Initialize spreadsheet data for blank template
-  useEffect(() => {
-    if (spreadsheetTemplate === 'blank' && (!spreadsheetData.length || spreadsheetData.length === 0)) {
-      setSpreadsheetHeaders(['A', 'B', 'C', 'D', 'E']);
-      setSpreadsheetData([
-        ['', '', '', '', ''],
-        ['', '', '', '', ''],
-        ['', '', '', '', ''],
-        ['', '', '', '', ''],
-        ['', '', '', '', '']
-      ]);
-    }
-  }, [spreadsheetTemplate, spreadsheetData]);
-    
-  // Handle cell input change
-  const handleCellChange = (rowIndex, colIndex, value) => {
-    const cellKey = `${rowIndex}-${colIndex}`;
-        
-    // Update the cell value
-    setCellValues(prev => ({
-      ...prev,
-      [cellKey]: value
-    }));
-        
-    // If it's a formula, store it in cellFormulas
-    if (value.startsWith('=')) {
-      setCellFormulas(prev => ({
-        ...prev,
-        [cellKey]: value
-      }));
-    } else if (cellFormulas[cellKey]) {
-      // Remove from formulas if it's no longer a formula
-      const newFormulas = {...cellFormulas};
-      delete newFormulas[cellKey];
-      setCellFormulas(newFormulas);
-    }
-        
-    // Update the spreadsheet data for proper rendering
-    const newData = [...spreadsheetData];
-    if (newData[rowIndex] && colIndex < newData[rowIndex].length) {
-      const newRow = [...newData[rowIndex]];
-      newRow[colIndex] = value;
-      newData[rowIndex] = newRow;
-      setSpreadsheetData(newData);
-    }
-  };
-    
-  // Render spreadsheet
-  const renderSpreadsheet = () => (
-    <div className="calculator-content">
-      <div className="spreadsheet-template-selector">
-        <label className="spreadsheet-template-label">Template:</label>
-        <select
-          value={spreadsheetTemplate}
-          onChange={(e) => setSpreadsheetTemplate(e.target.value)}
-          className="spreadsheet-template-select"
-        >
-          <option value="budget">Monthly Budget</option>
-          <option value="loan">Loan Calculator</option>
-          <option value="rent">Rent Comparison</option>
-          <option value="mortgage">Mortgage Calculator</option>
-          <option value="investment">Investment Growth</option>
-          <option value="retirement">Retirement Planner</option>
-          <option value="expense">Expense Tracker</option>
-          <option value="blank">Blank Spreadsheet</option>
-        </select>
-      </div>
-            
-      <div className="spreadsheet-container">
-        <table className="spreadsheet-table">
-          <thead>
-            <tr>
-              <th className="spreadsheet-header row-header">#</th>
-              {spreadsheetHeaders.map((header, index) => (
-                <th key={index} className="spreadsheet-header">{header}</th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {spreadsheetData.map((row, rowIndex) => (
-              <tr key={rowIndex}>
-                <td className="spreadsheet-cell row-header">{rowIndex + 1}</td>
-                {row.map((cell, colIndex) => (
-                  <td
-                    key={colIndex}
-                    className={`spreadsheet-cell ${activeCell.row === rowIndex && activeCell.col === colIndex ? 'active-cell' : ''}`}
-                    onClick={() => setActiveCell({ row: rowIndex, col: colIndex })}
-                  >
-                    {activeCell.row === rowIndex && activeCell.col === colIndex ? (
-                      <input
-                        type="text"
-                        value={cellValues[`${rowIndex}-${colIndex}`] !== undefined ? cellValues[`${rowIndex}-${colIndex}`] : cell}
-                        onChange={(e) => handleCellChange(rowIndex, colIndex, e.target.value)}
-                        autoFocus
-                        className="cell-input"
-                      />
-                    ) : (
-                      typeof cell === 'string' && cell.startsWith('=')
-                        ? evaluateFormula(cell, cellValues)
-                        : (cellValues[`${rowIndex}-${colIndex}`] !== undefined ? cellValues[`${rowIndex}-${colIndex}`] : cell)
-                    )}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-            
-      <div className="spreadsheet-formula-bar">
-        <label className="formula-label">Formula:</label>
-        <input
-          type="text"
-          value={cellFormulas[`${activeCell.row}-${activeCell.col}`] || ''}
-          onChange={(e) => handleCellChange(activeCell.row, activeCell.col, e.target.value)}
-          placeholder="Enter formula (e.g., =A1+B2)"
-          className="formula-input"
-        />
-      </div>
-            
-      <div className="spreadsheet-help">
-        <h3 className="help-title">Formulas:</h3>
-        <ul className="help-list">
-          <li>Basic math: =A1+B1, =C1-D1, =A2*B2, =C2/D2</li>
-          <li>Sum range: =SUM(A1:A5)</li>
-          <li>Loan payment: =PMT(rate, nper, pv)</li>
-          <li>Future value: =FV(rate, nper, pmt, pv)</li>
-        </ul>
-      </div>
-    </div>
-  );
- 
+
   // Render basic calculator
   const renderBasicCalculator = () => (
     <div className="calculator-content">
-      <div className="display">
-        {display}
-      </div>
-            
+      <div className="display">{display}</div>
+
       <div className="button-grid">
-        <button className="btn" onClick={memoryClear}>MC</button>
-        <button className="btn" onClick={memoryRecall}>MR</button>
-        <button className="btn" onClick={memoryAdd}>M+</button>
-        <button className="btn" onClick={memorySubtract}>M-</button>
-                
-        <button className="btn" onClick={() => handleButtonClick('7')}>7</button>
-        <button className="btn" onClick={() => handleButtonClick('8')}>8</button>
-        <button className="btn" onClick={() => handleButtonClick('9')}>9</button>
-        <button className="btn btn-blue" onClick={() => handleButtonClick('/')}>/</button>
-                
-        <button className="btn" onClick={() => handleButtonClick('4')}>4</button>
-        <button className="btn" onClick={() => handleButtonClick('5')}>5</button>
-        <button className="btn" onClick={() => handleButtonClick('6')}>6</button>
-        <button className="btn btn-blue" onClick={() => handleButtonClick('*')}>×</button>
-                
-        <button className="btn" onClick={() => handleButtonClick('1')}>1</button>
-        <button className="btn" onClick={() => handleButtonClick('2')}>2</button>
-        <button className="btn" onClick={() => handleButtonClick('3')}>3</button>
-        <button className="btn btn-blue" onClick={() => handleButtonClick('-')}>-</button>
-                
-        <button className="btn" onClick={() => handleButtonClick('0')}>0</button>
-        <button className="btn" onClick={() => handleButtonClick('.')}>.</button>
-        <button className="btn btn-green" onClick={calculateResult}>=</button>
-        <button className="btn btn-blue" onClick={() => handleButtonClick('+')}>+</button>
-                
-        <button className="btn btn-red" onClick={clearDisplay}>C</button>
-        <button className="btn" onClick={() => handleButtonClick('(')}>(</button>
-        <button className="btn" onClick={() => handleButtonClick(')')}>)</button>
-        <button className="btn" onClick={() => handleButtonClick('^')}>^</button>
-                
-        <button className="btn" onClick={() => handleButtonClick('sqrt(')}>√</button>
-        <button className="btn" onClick={() => handleButtonClick('sin(')}>sin</button>
-        <button className="btn" onClick={() => handleButtonClick('cos(')}>cos</button>
-        <button className="btn" onClick={() => handleButtonClick('tan(')}>tan</button>
-                
-        <button className="btn" onClick={() => handleButtonClick('log(')}>log</button>
-        <button className="btn" onClick={() => handleButtonClick('ln(')}>ln</button>
-        <button className="btn" onClick={() => handleButtonClick('π')}>π</button>
-        <button className="btn" onClick={() => handleButtonClick('e')}>e</button>
+        <button className="btn" onClick={memoryClear}>
+          MC
+        </button>
+        <button className="btn" onClick={memoryRecall}>
+          MR
+        </button>
+        <button className="btn" onClick={memoryAdd}>
+          M+
+        </button>
+        <button className="btn" onClick={memorySubtract}>
+          M-
+        </button>
+
+        <button className="btn" onClick={() => handleButtonClick("7")}>
+          7
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("8")}>
+          8
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("9")}>
+          9
+        </button>
+        <button className="btn btn-blue" onClick={() => handleButtonClick("/")}>
+          /
+        </button>
+
+        <button className="btn" onClick={() => handleButtonClick("4")}>
+          4
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("5")}>
+          5
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("6")}>
+          6
+        </button>
+        <button className="btn btn-blue" onClick={() => handleButtonClick("*")}>
+          ×
+        </button>
+
+        <button className="btn" onClick={() => handleButtonClick("1")}>
+          1
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("2")}>
+          2
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("3")}>
+          3
+        </button>
+        <button className="btn btn-blue" onClick={() => handleButtonClick("-")}>
+          -
+        </button>
+
+        <button className="btn" onClick={() => handleButtonClick("0")}>
+          0
+        </button>
+        <button className="btn" onClick={() => handleButtonClick(".")}>
+          .
+        </button>
+        <button className="btn btn-green" onClick={calculateResult}>
+          =
+        </button>
+        <button className="btn btn-blue" onClick={() => handleButtonClick("+")}>
+          +
+        </button>
+
+        <button className="btn btn-red" onClick={clearDisplay}>
+          C
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("(")}>
+          (
+        </button>
+        <button className="btn" onClick={() => handleButtonClick(")")}>
+          )
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("^")}>
+          ^
+        </button>
+
+        <button className="btn" onClick={() => handleButtonClick("sqrt(")}>
+          √
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("sin(")}>
+          sin
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("cos(")}>
+          cos
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("tan(")}>
+          tan
+        </button>
+
+        <button className="btn" onClick={() => handleButtonClick("log(")}>
+          log
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("ln(")}>
+          ln
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("π")}>
+          π
+        </button>
+        <button className="btn" onClick={() => handleButtonClick("e")}>
+          e
+        </button>
       </div>
-            
+
       <div className="history-section">
         <div className="history-title">History:</div>
         <div className="history-list">
@@ -832,13 +757,15 @@ const AdvancedCalculator = () => {
           ) : (
             history.map((item, index) => (
               <div key={index} className="history-item">
-                <div>{item.expression} = {item.result}</div>
+                <div>
+                  {item.expression} = {item.result}
+                </div>
               </div>
             ))
           )}
         </div>
       </div>
-            
+
       <div className="save-load-section">
         <div>
           <div className="save-load-title">Save Current State:</div>
@@ -850,10 +777,12 @@ const AdvancedCalculator = () => {
               placeholder="Name this state..."
               className="flex-1"
             />
-            <button className="btn btn-green" onClick={saveCurrentState}>Save</button>
+            <button className="btn btn-green" onClick={saveCurrentState}>
+              Save
+            </button>
           </div>
         </div>
-                
+
         <div>
           <div className="save-load-title">Load Saved State:</div>
           <div className="saved-states">
@@ -863,7 +792,12 @@ const AdvancedCalculator = () => {
               Object.keys(savedStates).map((name) => (
                 <div key={name} className="saved-state-item">
                   <span>{name}</span>
-                  <button className="btn btn-blue" onClick={() => loadState(name)}>Load</button>
+                  <button
+                    className="btn btn-blue"
+                    onClick={() => loadState(name)}
+                  >
+                    Load
+                  </button>
                 </div>
               ))
             )}
@@ -872,11 +806,11 @@ const AdvancedCalculator = () => {
       </div>
     </div>
   );
- 
+
   // Render graphing calculator
   const renderGraphingCalculator = () => {
     const colors = getGraphColors();
-        
+
     return (
       <div className="calculator-content">
         <div className="function-section">
@@ -891,33 +825,42 @@ const AdvancedCalculator = () => {
                 placeholder="e.g., x^2, sin(x), etc."
               />
             </div>
-                        
+
             <div className="function-input">
               <label className="function-label">Function 2 (optional):</label>
               <div className="function-group">
                 <input
                   type="checkbox"
                   checked={secondGraph.enabled}
-                  onChange={(e) => setSecondGraph({...secondGraph, enabled: e.target.checked})}
+                  onChange={(e) =>
+                    setSecondGraph({
+                      ...secondGraph,
+                      enabled: e.target.checked,
+                    })
+                  }
                 />
                 <input
                   type="text"
                   value={secondGraph.function}
-                  onChange={(e) => setSecondGraph({...secondGraph, function: e.target.value})}
+                  onChange={(e) =>
+                    setSecondGraph({ ...secondGraph, function: e.target.value })
+                  }
                   className="flex-1"
                   placeholder="e.g., x^2, sin(x), etc."
                   disabled={!secondGraph.enabled}
                 />
               </div>
             </div>
-                        
+
             <div className="function-group">
               <div>
                 <label className="function-label">Min X:</label>
                 <input
                   type="number"
                   value={graphRange[0]}
-                  onChange={(e) => setGraphRange([parseFloat(e.target.value), graphRange[1]])}
+                  onChange={(e) =>
+                    setGraphRange([parseFloat(e.target.value), graphRange[1]])
+                  }
                   className="w-20"
                 />
               </div>
@@ -926,17 +869,20 @@ const AdvancedCalculator = () => {
                 <input
                   type="number"
                   value={graphRange[1]}
-                  onChange={(e) => setGraphRange([graphRange[0], parseFloat(e.target.value)])}
+                  onChange={(e) =>
+                    setGraphRange([graphRange[0], parseFloat(e.target.value)])
+                  }
                   className="w-20"
                 />
               </div>
             </div>
           </div>
         </div>
-                
+
         <div className="graph-container">
           <ResponsiveContainer width="100%" height="100%">
-            <LineChart data={graphData}
+            <LineChart
+              data={graphData}
               margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
               style={{ backgroundColor: colors.background }}
             >
@@ -945,16 +891,22 @@ const AdvancedCalculator = () => {
                 dataKey="x"
                 domain={[graphRange[0], graphRange[1]]}
                 type="number"
-                label={{ value: 'x', position: 'insideBottomRight', offset: -5 }}
+                label={{
+                  value: "x",
+                  position: "insideBottomRight",
+                  offset: -5,
+                }}
                 stroke={darkMode ? "#fff" : "#333"}
               />
               <YAxis
-                label={{ value: 'y', angle: -90, position: 'insideLeft' }}
+                label={{ value: "y", angle: -90, position: "insideLeft" }}
                 stroke={darkMode ? "#fff" : "#333"}
               />
               <Tooltip
                 formatter={(value) => value.toFixed(settings.precision)}
-                labelFormatter={(value) => `x = ${parseFloat(value).toFixed(settings.precision)}`}
+                labelFormatter={(value) =>
+                  `x = ${parseFloat(value).toFixed(settings.precision)}`
+                }
                 contentStyle={{ backgroundColor: darkMode ? "#333" : "#fff" }}
               />
               <Legend />
@@ -979,41 +931,131 @@ const AdvancedCalculator = () => {
             </LineChart>
           </ResponsiveContainer>
         </div>
-                
+
         <div className="function-presets">
           <div>
             <div className="function-presets-title">Common Functions:</div>
             <div className="function-buttons">
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('x^2')}>x²</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('x^3')}>x³</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('sin(x)')}>sin(x)</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('cos(x)')}>cos(x)</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('tan(x)')}>tan(x)</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('log(x)')}>log(x)</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('sqrt(x)')}>√x</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('1/x')}>1/x</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('exp(x)')}>e^x</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('abs(x)')}>|x|</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('x^2-4')}>x²-4</button>
-              <button className="btn btn-yellow" onClick={() => setGraphFunction('sin(x)*cos(x)')}>sin(x)cos(x)</button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("x^2")}
+              >
+                x²
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("x^3")}
+              >
+                x³
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("sin(x)")}
+              >
+                sin(x)
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("cos(x)")}
+              >
+                cos(x)
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("tan(x)")}
+              >
+                tan(x)
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("log(x)")}
+              >
+                log(x)
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("sqrt(x)")}
+              >
+                √x
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("1/x")}
+              >
+                1/x
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("exp(x)")}
+              >
+                e^x
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("abs(x)")}
+              >
+                |x|
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("x^2-4")}
+              >
+                x²-4
+              </button>
+              <button
+                className="btn btn-yellow"
+                onClick={() => setGraphFunction("sin(x)*cos(x)")}
+              >
+                sin(x)cos(x)
+              </button>
             </div>
           </div>
           <div>
             <div className="function-presets-title">View Presets:</div>
             <div className="function-buttons">
-              <button className="btn btn-green" onClick={() => setGraphRange([-10, 10])}>Standard</button>
-              <button className="btn btn-green" onClick={() => setGraphRange([-2 * Math.PI, 2 * Math.PI])}>Trig</button>
-              <button className="btn btn-green" onClick={() => setGraphRange([-100, 100])}>Wide</button>
-              <button className="btn btn-green" onClick={() => setGraphRange([-1, 1])}>Zoom In</button>
-              <button className="btn btn-green" onClick={() => setGraphRange([0, 10])}>Positive</button>
-              <button className="btn btn-green" onClick={() => setGraphRange([-10, 0])}>Negative</button>
+              <button
+                className="btn btn-green"
+                onClick={() => setGraphRange([-10, 10])}
+              >
+                Standard
+              </button>
+              <button
+                className="btn btn-green"
+                onClick={() => setGraphRange([-2 * Math.PI, 2 * Math.PI])}
+              >
+                Trig
+              </button>
+              <button
+                className="btn btn-green"
+                onClick={() => setGraphRange([-100, 100])}
+              >
+                Wide
+              </button>
+              <button
+                className="btn btn-green"
+                onClick={() => setGraphRange([-1, 1])}
+              >
+                Zoom In
+              </button>
+              <button
+                className="btn btn-green"
+                onClick={() => setGraphRange([0, 10])}
+              >
+                Positive
+              </button>
+              <button
+                className="btn btn-green"
+                onClick={() => setGraphRange([-10, 0])}
+              >
+                Negative
+              </button>
             </div>
           </div>
         </div>
       </div>
     );
   };
- 
+
   // Render unit conversion
   const renderUnitConversion = () => (
     <div className="calculator-content">
@@ -1022,7 +1064,9 @@ const AdvancedCalculator = () => {
           <label className="unit-label">Category:</label>
           <select
             value={unitConversion.category}
-            onChange={(e) => setUnitConversion({...unitConversion, category: e.target.value})}
+            onChange={(e) =>
+              setUnitConversion({ ...unitConversion, category: e.target.value })
+            }
           >
             <option value="length">Length</option>
             <option value="mass">Mass</option>
@@ -1038,25 +1082,32 @@ const AdvancedCalculator = () => {
             <option value="digital">Digital Storage</option>
           </select>
         </div>
-                
+
         <div className="unit-row">
           <label className="unit-label">Value:</label>
           <input
             type="number"
             value={unitConversion.fromValue}
-            onChange={(e) => setUnitConversion({...unitConversion, fromValue: parseFloat(e.target.value)})}
+            onChange={(e) =>
+              setUnitConversion({
+                ...unitConversion,
+                fromValue: parseFloat(e.target.value),
+              })
+            }
           />
         </div>
       </div>
-            
+
       <div className="unit-conversion">
         <div className="unit-row">
           <label className="unit-label">From Unit:</label>
           <select
             value={unitConversion.fromUnit}
-            onChange={(e) => setUnitConversion({...unitConversion, fromUnit: e.target.value})}
+            onChange={(e) =>
+              setUnitConversion({ ...unitConversion, fromUnit: e.target.value })
+            }
           >
-            {unitConversion.category === 'length' && (
+            {unitConversion.category === "length" && (
               <>
                 <option value="m">Meters (m)</option>
                 <option value="cm">Centimeters (cm)</option>
@@ -1069,7 +1120,7 @@ const AdvancedCalculator = () => {
                 <option value="nmi">Nautical Miles (nmi)</option>
               </>
             )}
-            {unitConversion.category === 'volume' && (
+            {unitConversion.category === "volume" && (
               <>
                 <option value="m3">Cubic Meters (m³)</option>
                 <option value="L">Liters (L)</option>
@@ -1088,7 +1139,7 @@ const AdvancedCalculator = () => {
                 <option value="impgal">Imperial Gallons (imp gal)</option>
               </>
             )}
-            {unitConversion.category === 'temperature' && (
+            {unitConversion.category === "temperature" && (
               <>
                 <option value="degC">Celsius (°C)</option>
                 <option value="degF">Fahrenheit (°F)</option>
@@ -1096,7 +1147,7 @@ const AdvancedCalculator = () => {
                 <option value="degR">Rankine (°R)</option>
               </>
             )}
-            {unitConversion.category === 'area' && (
+            {unitConversion.category === "area" && (
               <>
                 <option value="m2">Square Meters (m²)</option>
                 <option value="km2">Square Kilometers (km²)</option>
@@ -1110,7 +1161,7 @@ const AdvancedCalculator = () => {
                 <option value="mi2">Square Miles (mi²)</option>
               </>
             )}
-            {unitConversion.category === 'time' && (
+            {unitConversion.category === "time" && (
               <>
                 <option value="s">Seconds (s)</option>
                 <option value="ms">Milliseconds (ms)</option>
@@ -1126,7 +1177,7 @@ const AdvancedCalculator = () => {
                 <option value="century">Centuries</option>
               </>
             )}
-            {unitConversion.category === 'speed' && (
+            {unitConversion.category === "speed" && (
               <>
                 <option value="m/s">Meters per Second (m/s)</option>
                 <option value="km/h">Kilometers per Hour (km/h)</option>
@@ -1138,7 +1189,7 @@ const AdvancedCalculator = () => {
                 <option value="c">Speed of Light (c)</option>
               </>
             )}
-            {unitConversion.category === 'pressure' && (
+            {unitConversion.category === "pressure" && (
               <>
                 <option value="Pa">Pascal (Pa)</option>
                 <option value="hPa">Hectopascal (hPa)</option>
@@ -1154,7 +1205,7 @@ const AdvancedCalculator = () => {
                 <option value="torr">Torr</option>
               </>
             )}
-            {unitConversion.category === 'energy' && (
+            {unitConversion.category === "energy" && (
               <>
                 <option value="J">Joules (J)</option>
                 <option value="kJ">Kilojoules (kJ)</option>
@@ -1170,7 +1221,7 @@ const AdvancedCalculator = () => {
                 <option value="ft-lb">Foot-pounds (ft-lb)</option>
               </>
             )}
-            {unitConversion.category === 'power' && (
+            {unitConversion.category === "power" && (
               <>
                 <option value="W">Watts (W)</option>
                 <option value="mW">Milliwatts (mW)</option>
@@ -1179,10 +1230,12 @@ const AdvancedCalculator = () => {
                 <option value="GW">Gigawatts (GW)</option>
                 <option value="hp">Horsepower (hp)</option>
                 <option value="BTU/h">BTU per Hour (BTU/h)</option>
-                <option value="ft-lb/s">Foot-pounds per second (ft-lb/s)</option>
+                <option value="ft-lb/s">
+                  Foot-pounds per second (ft-lb/s)
+                </option>
               </>
             )}
-            {unitConversion.category === 'angle' && (
+            {unitConversion.category === "angle" && (
               <>
                 <option value="rad">Radians (rad)</option>
                 <option value="deg">Degrees (°)</option>
@@ -1195,7 +1248,7 @@ const AdvancedCalculator = () => {
                 <option value="sr">Steradians (sr)</option>
               </>
             )}
-            {unitConversion.category === 'digital' && (
+            {unitConversion.category === "digital" && (
               <>
                 <option value="b">Bits (b)</option>
                 <option value="B">Bytes (B)</option>
@@ -1215,14 +1268,16 @@ const AdvancedCalculator = () => {
             )}
           </select>
         </div>
-                
+
         <div className="unit-row">
           <label className="unit-label">To Unit:</label>
           <select
             value={unitConversion.toUnit}
-            onChange={(e) => setUnitConversion({...unitConversion, toUnit: e.target.value})}
+            onChange={(e) =>
+              setUnitConversion({ ...unitConversion, toUnit: e.target.value })
+            }
           >
-            {unitConversion.category === 'length' && (
+            {unitConversion.category === "length" && (
               <>
                 <option value="m">Meters (m)</option>
                 <option value="cm">Centimeters (cm)</option>
@@ -1237,7 +1292,7 @@ const AdvancedCalculator = () => {
             )}
             {/* Other categories as in your original code */}
             {/* I've truncated these for brevity but you should include all original options */}
-            {unitConversion.category === 'volume' && (
+            {unitConversion.category === "volume" && (
               <>
                 <option value="m3">Cubic Meters (m³)</option>
                 <option value="L">Liters (L)</option>
@@ -1256,7 +1311,7 @@ const AdvancedCalculator = () => {
                 <option value="impgal">Imperial Gallons (imp gal)</option>
               </>
             )}
-            {unitConversion.category === 'temperature' && (
+            {unitConversion.category === "temperature" && (
               <>
                 <option value="degC">Celsius (°C)</option>
                 <option value="degF">Fahrenheit (°F)</option>
@@ -1264,7 +1319,7 @@ const AdvancedCalculator = () => {
                 <option value="degR">Rankine (°R)</option>
               </>
             )}
-            {unitConversion.category === 'area' && (
+            {unitConversion.category === "area" && (
               <>
                 <option value="m2">Square Meters (m²)</option>
                 <option value="km2">Square Kilometers (km²)</option>
@@ -1278,7 +1333,7 @@ const AdvancedCalculator = () => {
                 <option value="mi2">Square Miles (mi²)</option>
               </>
             )}
-            {unitConversion.category === 'time' && (
+            {unitConversion.category === "time" && (
               <>
                 <option value="s">Seconds (s)</option>
                 <option value="ms">Milliseconds (ms)</option>
@@ -1294,7 +1349,7 @@ const AdvancedCalculator = () => {
                 <option value="century">Centuries</option>
               </>
             )}
-            {unitConversion.category === 'speed' && (
+            {unitConversion.category === "speed" && (
               <>
                 <option value="m/s">Meters per Second (m/s)</option>
                 <option value="km/h">Kilometers per Hour (km/h)</option>
@@ -1306,7 +1361,7 @@ const AdvancedCalculator = () => {
                 <option value="c">Speed of Light (c)</option>
               </>
             )}
-            {unitConversion.category === 'pressure' && (
+            {unitConversion.category === "pressure" && (
               <>
                 <option value="Pa">Pascal (Pa)</option>
                 <option value="hPa">Hectopascal (hPa)</option>
@@ -1322,7 +1377,7 @@ const AdvancedCalculator = () => {
                 <option value="torr">Torr</option>
               </>
             )}
-            {unitConversion.category === 'energy' && (
+            {unitConversion.category === "energy" && (
               <>
                 <option value="J">Joules (J)</option>
                 <option value="kJ">Kilojoules (kJ)</option>
@@ -1338,7 +1393,7 @@ const AdvancedCalculator = () => {
                 <option value="ft-lb">Foot-pounds (ft-lb)</option>
               </>
             )}
-            {unitConversion.category === 'power' && (
+            {unitConversion.category === "power" && (
               <>
                 <option value="W">Watts (W)</option>
                 <option value="mW">Milliwatts (mW)</option>
@@ -1347,10 +1402,12 @@ const AdvancedCalculator = () => {
                 <option value="GW">Gigawatts (GW)</option>
                 <option value="hp">Horsepower (hp)</option>
                 <option value="BTU/h">BTU per Hour (BTU/h)</option>
-                <option value="ft-lb/s">Foot-pounds per second (ft-lb/s)</option>
+                <option value="ft-lb/s">
+                  Foot-pounds per second (ft-lb/s)
+                </option>
               </>
             )}
-            {unitConversion.category === 'angle' && (
+            {unitConversion.category === "angle" && (
               <>
                 <option value="rad">Radians (rad)</option>
                 <option value="deg">Degrees (°)</option>
@@ -1363,7 +1420,7 @@ const AdvancedCalculator = () => {
                 <option value="sr">Steradians (sr)</option>
               </>
             )}
-            {unitConversion.category === 'digital' && (
+            {unitConversion.category === "digital" && (
               <>
                 <option value="b">Bits (b)</option>
                 <option value="B">Bytes (B)</option>
@@ -1384,15 +1441,16 @@ const AdvancedCalculator = () => {
           </select>
         </div>
       </div>
-            
+
       <button className="btn btn-green mt-4" onClick={convertUnit}>
         Convert
       </button>
-            
+
       <div className="unit-result">
-        {unitConversion.fromValue} {unitConversion.fromUnit} = {convertUnit()} {unitConversion.toUnit}
+        {unitConversion.fromValue} {unitConversion.fromUnit} = {convertUnit()}{" "}
+        {unitConversion.toUnit}
       </div>
-            
+
       <div className="common-conversions">
         <div className="common-conversions-title">Common Conversions:</div>
         <div className="common-conversions-grid">
@@ -1420,14 +1478,22 @@ const AdvancedCalculator = () => {
       </div>
     </div>
   );
- 
+
   // Render matrix calculator
   const renderMatrixCalculator = () => (
-    <div className={`flex flex-col p-4 gap-4 ${darkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"}`}>
+    <div
+      className={`flex flex-col p-4 gap-4 ${
+        darkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"
+      }`}
+    >
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div>
           <h3 className="font-bold mb-2">Matrix A:</h3>
-          <div className={`p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}>
+          <div
+            className={`p-4 ${
+              darkMode ? "bg-gray-700" : "bg-gray-100"
+            } rounded`}
+          >
             {matrixA.map((row, rowIndex) => (
               <div key={rowIndex} className="flex mb-2">
                 {row.map((cell, cellIndex) => (
@@ -1437,40 +1503,68 @@ const AdvancedCalculator = () => {
                     value={cell}
                     onChange={(e) => {
                       const newMatrix = [...matrixA];
-                      newMatrix[rowIndex][cellIndex] = parseFloat(e.target.value);
+                      newMatrix[rowIndex][cellIndex] = parseFloat(
+                        e.target.value
+                      );
                       setMatrixA(newMatrix);
                     }}
-                    className={`w-16 p-2 mr-2 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
+                    className={`w-16 p-2 mr-2 border rounded ${
+                      darkMode
+                        ? "bg-gray-800 border-gray-600 text-white"
+                        : "bg-white border-gray-300"
+                    }`}
                   />
                 ))}
-                <Button onClick={() => {
-                  const newMatrix = [...matrixA];
-                  newMatrix[rowIndex].push(0);
-                  setMatrixA(newMatrix);
-                }}>+</Button>
+                <Button
+                  onClick={() => {
+                    const newMatrix = [...matrixA];
+                    newMatrix[rowIndex].push(0);
+                    setMatrixA(newMatrix);
+                  }}
+                >
+                  +
+                </Button>
               </div>
             ))}
             <div className="flex mt-2">
-              <Button onClick={() => {
-                setMatrixA([...matrixA, Array(matrixA[0].length).fill(0)]);
-              }}>Add Row</Button>
-              <Button className="ml-2" onClick={() => {
-                if (matrixA[0].length > 1) {
-                  setMatrixA(matrixA.map(row => row.slice(0, -1)));
-                }
-              }}>Remove Column</Button>
-              <Button className="ml-2" onClick={() => {
-                if (matrixA.length > 1) {
-                  setMatrixA(matrixA.slice(0, -1));
-                }
-              }}>Remove Row</Button>
+              <Button
+                onClick={() => {
+                  setMatrixA([...matrixA, Array(matrixA[0].length).fill(0)]);
+                }}
+              >
+                Add Row
+              </Button>
+              <Button
+                className="ml-2"
+                onClick={() => {
+                  if (matrixA[0].length > 1) {
+                    setMatrixA(matrixA.map((row) => row.slice(0, -1)));
+                  }
+                }}
+              >
+                Remove Column
+              </Button>
+              <Button
+                className="ml-2"
+                onClick={() => {
+                  if (matrixA.length > 1) {
+                    setMatrixA(matrixA.slice(0, -1));
+                  }
+                }}
+              >
+                Remove Row
+              </Button>
             </div>
           </div>
         </div>
-                
+
         <div>
           <h3 className="font-bold mb-2">Matrix B:</h3>
-          <div className={`p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}>
+          <div
+            className={`p-4 ${
+              darkMode ? "bg-gray-700" : "bg-gray-100"
+            } rounded`}
+          >
             {matrixB.map((row, rowIndex) => (
               <div key={rowIndex} className="flex mb-2">
                 {row.map((cell, cellIndex) => (
@@ -1480,85 +1574,158 @@ const AdvancedCalculator = () => {
                     value={cell}
                     onChange={(e) => {
                       const newMatrix = [...matrixB];
-                      newMatrix[rowIndex][cellIndex] = parseFloat(e.target.value);
+                      newMatrix[rowIndex][cellIndex] = parseFloat(
+                        e.target.value
+                      );
                       setMatrixB(newMatrix);
                     }}
-                    className={`w-16 p-2 mr-2 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
+                    className={`w-16 p-2 mr-2 border rounded ${
+                      darkMode
+                        ? "bg-gray-800 border-gray-600 text-white"
+                        : "bg-white border-gray-300"
+                    }`}
                   />
                 ))}
-                <Button onClick={() => {
-                  const newMatrix = [...matrixB];
-                  newMatrix[rowIndex].push(0);
-                  setMatrixB(newMatrix);
-                }}>+</Button>
+                <Button
+                  onClick={() => {
+                    const newMatrix = [...matrixB];
+                    newMatrix[rowIndex].push(0);
+                    setMatrixB(newMatrix);
+                  }}
+                >
+                  +
+                </Button>
               </div>
             ))}
             <div className="flex mt-2">
-              <Button onClick={() => {
-                setMatrixB([...matrixB, Array(matrixB[0].length).fill(0)]);
-              }}>Add Row</Button>
-              <Button className="ml-2" onClick={() => {
-                if (matrixB[0].length > 1) {
-                  setMatrixB(matrixB.map(row => row.slice(0, -1)));
-                }
-              }}>Remove Column</Button>
-              <Button className="ml-2" onClick={() => {
-                if (matrixB.length > 1) {
-                  setMatrixB(matrixB.slice(0, -1));
-                }
-              }}>Remove Row</Button>
+              <Button
+                onClick={() => {
+                  setMatrixB([...matrixB, Array(matrixB[0].length).fill(0)]);
+                }}
+              >
+                Add Row
+              </Button>
+              <Button
+                className="ml-2"
+                onClick={() => {
+                  if (matrixB[0].length > 1) {
+                    setMatrixB(matrixB.map((row) => row.slice(0, -1)));
+                  }
+                }}
+              >
+                Remove Column
+              </Button>
+              <Button
+                className="ml-2"
+                onClick={() => {
+                  if (matrixB.length > 1) {
+                    setMatrixB(matrixB.slice(0, -1));
+                  }
+                }}
+              >
+                Remove Row
+              </Button>
             </div>
           </div>
         </div>
       </div>
-            
+
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 mt-4">
-        <Button color="blue" onClick={() => {
-          setMatrixOperation('add');
-          performMatrixOperation();
-        }}>A + B</Button>
-        <Button color="blue" onClick={() => {
-          setMatrixOperation('subtract');
-          performMatrixOperation();
-        }}>A - B</Button>
-        <Button color="blue" onClick={() => {
-          setMatrixOperation('multiply');
-          performMatrixOperation();
-        }}>A × B</Button>
-        <Button color="blue" onClick={() => {
-          setMatrixOperation('determinantA');
-          performMatrixOperation();
-        }}>det(A)</Button>
-        <Button color="blue" onClick={() => {
-          setMatrixOperation('determinantB');
-          performMatrixOperation();
-        }}>det(B)</Button>
-        <Button color="blue" onClick={() => {
-          setMatrixOperation('transposeA');
-          performMatrixOperation();
-        }}>Transpose A</Button>
-        <Button color="blue" onClick={() => {
-          setMatrixOperation('transposeB');
-          performMatrixOperation();
-        }}>Transpose B</Button>
-        <Button color="blue" onClick={() => {
-          setMatrixOperation('inverseA');
-          performMatrixOperation();
-        }}>Inverse A</Button>
-        <Button color="blue" onClick={() => {
-          setMatrixOperation('inverseB');
-          performMatrixOperation();
-        }}>Inverse B</Button>
+        <Button
+          color="blue"
+          onClick={() => {
+            setMatrixOperation("add");
+            performMatrixOperation();
+          }}
+        >
+          A + B
+        </Button>
+        <Button
+          color="blue"
+          onClick={() => {
+            setMatrixOperation("subtract");
+            performMatrixOperation();
+          }}
+        >
+          A - B
+        </Button>
+        <Button
+          color="blue"
+          onClick={() => {
+            setMatrixOperation("multiply");
+            performMatrixOperation();
+          }}
+        >
+          A × B
+        </Button>
+        <Button
+          color="blue"
+          onClick={() => {
+            setMatrixOperation("determinantA");
+            performMatrixOperation();
+          }}
+        >
+          det(A)
+        </Button>
+        <Button
+          color="blue"
+          onClick={() => {
+            setMatrixOperation("determinantB");
+            performMatrixOperation();
+          }}
+        >
+          det(B)
+        </Button>
+        <Button
+          color="blue"
+          onClick={() => {
+            setMatrixOperation("transposeA");
+            performMatrixOperation();
+          }}
+        >
+          Transpose A
+        </Button>
+        <Button
+          color="blue"
+          onClick={() => {
+            setMatrixOperation("transposeB");
+            performMatrixOperation();
+          }}
+        >
+          Transpose B
+        </Button>
+        <Button
+          color="blue"
+          onClick={() => {
+            setMatrixOperation("inverseA");
+            performMatrixOperation();
+          }}
+        >
+          Inverse A
+        </Button>
+        <Button
+          color="blue"
+          onClick={() => {
+            setMatrixOperation("inverseB");
+            performMatrixOperation();
+          }}
+        >
+          Inverse B
+        </Button>
       </div>
-            
+
       <div className="mt-4">
         <h3 className="font-bold mb-2">Result:</h3>
-        <div className={`p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}>
+        <div
+          className={`p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}
+        >
           {matrixResult === null ? (
-            <div className="text-center">Perform an operation to see results</div>
-          ) : typeof matrixResult === 'string' ? (
+            <div className="text-center">
+              Perform an operation to see results
+            </div>
+          ) : typeof matrixResult === "string" ? (
             <div className="text-center">{matrixResult}</div>
-          ) : typeof matrixResult === 'number' ? (
+          ) : typeof matrixResult === "number" ? (
             <div className="text-center text-xl">{matrixResult}</div>
           ) : (
             <div>
@@ -1567,9 +1734,13 @@ const AdvancedCalculator = () => {
                   {row.map((cell, cellIndex) => (
                     <div
                       key={cellIndex}
-                      className={`w-16 p-2 mr-2 text-center ${darkMode ? "bg-gray-800 text-white" : "bg-white"} border rounded`}
+                      className={`w-16 p-2 mr-2 text-center ${
+                        darkMode ? "bg-gray-800 text-white" : "bg-white"
+                      } border rounded`}
                     >
-                      {typeof cell === 'number' ? cell.toFixed(settings.precision) : cell}
+                      {typeof cell === "number"
+                        ? cell.toFixed(settings.precision)
+                        : cell}
                     </div>
                   ))}
                 </div>
@@ -1580,71 +1751,113 @@ const AdvancedCalculator = () => {
       </div>
     </div>
   );
- 
+
   // Render statistics calculator
   const renderStatisticsCalculator = () => (
-    <div className={`flex flex-col p-4 gap-4 ${darkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"}`}>
+    <div
+      className={`flex flex-col p-4 gap-4 ${
+        darkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"
+      }`}
+    >
       <div>
         <label className="block mb-2">Enter data (comma separated):</label>
         <textarea
           value={statisticsData}
           onChange={(e) => setStatisticsData(e.target.value)}
           rows={4}
-          className={`w-full p-2 rounded border ${darkMode ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300"}`}
+          className={`w-full p-2 rounded border ${
+            darkMode
+              ? "bg-gray-700 border-gray-600 text-white"
+              : "bg-white border-gray-300"
+          }`}
           placeholder="e.g., 1, 2, 3, 4, 5"
         />
       </div>
-            
+
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
         <div>
           <h3 className="font-bold mb-2">Basic Statistics:</h3>
-          <div className={`p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}>
+          <div
+            className={`p-4 ${
+              darkMode ? "bg-gray-700" : "bg-gray-100"
+            } rounded`}
+          >
             <div className="grid grid-cols-2 gap-2">
               <div className="font-semibold">Mean:</div>
-              <div>{statisticsResults.mean?.toFixed(settings.precision) || 'N/A'}</div>
-                            
+              <div>
+                {statisticsResults.mean?.toFixed(settings.precision) || "N/A"}
+              </div>
+
               <div className="font-semibold">Median:</div>
-              <div>{statisticsResults.median?.toFixed(settings.precision) || 'N/A'}</div>
-                            
+              <div>
+                {statisticsResults.median?.toFixed(settings.precision) || "N/A"}
+              </div>
+
               <div className="font-semibold">Mode:</div>
-              <div>{statisticsResults.mode || 'N/A'}</div>
-                            
+              <div>{statisticsResults.mode || "N/A"}</div>
+
               <div className="font-semibold">Range:</div>
-              <div>{statisticsResults.range?.toFixed(settings.precision) || 'N/A'}</div>
-                            
+              <div>
+                {statisticsResults.range?.toFixed(settings.precision) || "N/A"}
+              </div>
+
               <div className="font-semibold">Min:</div>
-              <div>{statisticsResults.min?.toFixed(settings.precision) || 'N/A'}</div>
-                            
+              <div>
+                {statisticsResults.min?.toFixed(settings.precision) || "N/A"}
+              </div>
+
               <div className="font-semibold">Max:</div>
-              <div>{statisticsResults.max?.toFixed(settings.precision) || 'N/A'}</div>
+              <div>
+                {statisticsResults.max?.toFixed(settings.precision) || "N/A"}
+              </div>
             </div>
           </div>
         </div>
-                
+
         <div>
           <h3 className="font-bold mb-2">Advanced Statistics:</h3>
-          <div className={`p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}>
+          <div
+            className={`p-4 ${
+              darkMode ? "bg-gray-700" : "bg-gray-100"
+            } rounded`}
+          >
             <div className="grid grid-cols-2 gap-2">
               <div className="font-semibold">Count:</div>
-              <div>{statisticsResults.count || 'N/A'}</div>
-                            
+              <div>{statisticsResults.count || "N/A"}</div>
+
               <div className="font-semibold">Sum:</div>
-              <div>{statisticsResults.sum?.toFixed(settings.precision) || 'N/A'}</div>
-                            
+              <div>
+                {statisticsResults.sum?.toFixed(settings.precision) || "N/A"}
+              </div>
+
               <div className="font-semibold">Variance:</div>
-              <div>{statisticsResults.variance?.toFixed(settings.precision) || 'N/A'}</div>
-                            
+              <div>
+                {statisticsResults.variance?.toFixed(settings.precision) ||
+                  "N/A"}
+              </div>
+
               <div className="font-semibold">Std Deviation:</div>
-              <div>{statisticsResults.standardDeviation?.toFixed(settings.precision) || 'N/A'}</div>
+              <div>
+                {statisticsResults.standardDeviation?.toFixed(
+                  settings.precision
+                ) || "N/A"}
+              </div>
             </div>
           </div>
         </div>
       </div>
-            
+
       <div className="mt-4">
         <h3 className="font-bold mb-2">Data Visualization:</h3>
-        <div className={`h-64 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded p-2`}>
-          {statisticsData.split(',').map(n => parseFloat(n.trim())).filter(n => !isNaN(n)).length > 0 ? (
+        <div
+          className={`h-64 ${
+            darkMode ? "bg-gray-700" : "bg-gray-100"
+          } rounded p-2`}
+        >
+          {statisticsData
+            .split(",")
+            .map((n) => parseFloat(n.trim()))
+            .filter((n) => !isNaN(n)).length > 0 ? (
             <ResponsiveContainer width="100%" height="100%">
               <ScatterChart
                 margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
@@ -1663,10 +1876,14 @@ const AdvancedCalculator = () => {
                   name="value"
                   stroke={darkMode ? "#fff" : "#333"}
                 />
-                <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+                <Tooltip cursor={{ strokeDasharray: "3 3" }} />
                 <Scatter
                   name="Values"
-                  data={statisticsData.split(',').map(n => parseFloat(n.trim())).filter(n => !isNaN(n)).map((value, index) => ({ x: index + 1, y: value }))}
+                  data={statisticsData
+                    .split(",")
+                    .map((n) => parseFloat(n.trim()))
+                    .filter((n) => !isNaN(n))
+                    .map((value, index) => ({ x: index + 1, y: value }))}
                   fill={getGraphColors().line1}
                 />
               </ScatterChart>
@@ -1680,159 +1897,313 @@ const AdvancedCalculator = () => {
       </div>
     </div>
   );
- 
+
   // Render physics calculator
   const renderPhysicsCalculator = () => (
-    <div className={`flex flex-col p-4 gap-4 ${darkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"}`}>
+    <div
+      className={`flex flex-col p-4 gap-4 ${
+        darkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"
+      }`}
+    >
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
         <div>
           <h3 className="font-bold mb-2">Kinematics & Dynamics</h3>
-          <div className={`space-y-2 p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}>
+          <div
+            className={`space-y-2 p-4 ${
+              darkMode ? "bg-gray-700" : "bg-gray-100"
+            } rounded`}
+          >
             <div className="flex justify-between items-center">
               <span>Velocity:</span>
               <input
                 type="number"
                 value={physicsParams.velocity}
-                onChange={(e) => setPhysicsParams({...physicsParams, velocity: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> m/s
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    velocity: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              m/s
             </div>
             <div className="flex justify-between items-center">
               <span>Angle:</span>
               <input
                 type="number"
                 value={physicsParams.angle}
-                onChange={(e) => setPhysicsParams({...physicsParams, angle: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> °
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    angle: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              °
             </div>
             <div className="flex justify-between items-center">
               <span>Height:</span>
               <input
                 type="number"
                 value={physicsParams.height}
-                onChange={(e) => setPhysicsParams({...physicsParams, height: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> m
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    height: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              m
             </div>
             <div className="flex justify-between items-center">
               <span>Mass:</span>
               <input
                 type="number"
                 value={physicsParams.mass}
-                onChange={(e) => setPhysicsParams({...physicsParams, mass: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> kg
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    mass: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              kg
             </div>
             <div className="flex justify-between items-center">
               <span>Gravity:</span>
               <input
                 type="number"
                 value={physicsParams.gravity}
-                onChange={(e) => setPhysicsParams({...physicsParams, gravity: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> m/s²
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    gravity: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              m/s²
             </div>
           </div>
-                    
+
           <h3 className="font-bold mb-2 mt-4">Electromagnetism</h3>
-          <div className={`space-y-2 p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}>
+          <div
+            className={`space-y-2 p-4 ${
+              darkMode ? "bg-gray-700" : "bg-gray-100"
+            } rounded`}
+          >
             <div className="flex justify-between items-center">
               <span>Voltage:</span>
               <input
                 type="number"
                 value={physicsParams.voltage}
-                onChange={(e) => setPhysicsParams({...physicsParams, voltage: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> V
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    voltage: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              V
             </div>
             <div className="flex justify-between items-center">
               <span>Current:</span>
               <input
                 type="number"
                 value={physicsParams.current}
-                onChange={(e) => setPhysicsParams({...physicsParams, current: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> A
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    current: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              A
             </div>
             <div className="flex justify-between items-center">
               <span>Resistance:</span>
               <input
                 type="number"
                 value={physicsParams.resistance}
-                onChange={(e) => setPhysicsParams({...physicsParams, resistance: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> Ω
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    resistance: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              Ω
             </div>
             <div className="flex justify-between items-center">
               <span>Magnetic Field:</span>
               <input
                 type="number"
                 value={physicsParams.magneticField}
-                onChange={(e) => setPhysicsParams({...physicsParams, magneticField: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> T
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    magneticField: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              T
             </div>
             <div className="flex justify-between items-center">
               <span>Electric Charge:</span>
               <input
                 type="number"
                 value={physicsParams.electricCharge}
-                onChange={(e) => setPhysicsParams({...physicsParams, electricCharge: parseFloat(e.target.value)})}
-                className={`w-24 p-1 border rounded ${darkMode ? "bg-gray-800 border-gray-600 text-white" : "bg-white border-gray-300"}`}
-              /> C
+                onChange={(e) =>
+                  setPhysicsParams({
+                    ...physicsParams,
+                    electricCharge: parseFloat(e.target.value),
+                  })
+                }
+                className={`w-24 p-1 border rounded ${
+                  darkMode
+                    ? "bg-gray-800 border-gray-600 text-white"
+                    : "bg-white border-gray-300"
+                }`}
+              />{" "}
+              C
             </div>
           </div>
         </div>
-                
+
         <div>
           <h3 className="font-bold mb-2">Calculated Values</h3>
-          <div className={`space-y-2 p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}>
+          <div
+            className={`space-y-2 p-4 ${
+              darkMode ? "bg-gray-700" : "bg-gray-100"
+            } rounded`}
+          >
             <div className="flex justify-between">
               <span>Projectile Range:</span>
-              <span>{calculatePhysics('range').toFixed(settings.precision)} m</span>
+              <span>
+                {calculatePhysics("range").toFixed(settings.precision)} m
+              </span>
             </div>
             <div className="flex justify-between">
               <span>Maximum Height:</span>
-              <span>{calculatePhysics('maxHeight').toFixed(settings.precision)} m</span>
+              <span>
+                {calculatePhysics("maxHeight").toFixed(settings.precision)} m
+              </span>
             </div>
             <div className="flex justify-between">
               <span>Flight Time:</span>
-              <span>{calculatePhysics('flightTime').toFixed(settings.precision)} s</span>
+              <span>
+                {calculatePhysics("flightTime").toFixed(settings.precision)} s
+              </span>
             </div>
             <div className="flex justify-between">
               <span>Kinetic Energy:</span>
-              <span>{calculatePhysics('kineticEnergy').toFixed(settings.precision)} J</span>
+              <span>
+                {calculatePhysics("kineticEnergy").toFixed(settings.precision)}{" "}
+                J
+              </span>
             </div>
             <div className="flex justify-between">
               <span>Potential Energy:</span>
-              <span>{calculatePhysics('potentialEnergy').toFixed(settings.precision)} J</span>
+              <span>
+                {calculatePhysics("potentialEnergy").toFixed(
+                  settings.precision
+                )}{" "}
+                J
+              </span>
             </div>
             <div className="flex justify-between">
               <span>Total Energy:</span>
-              <span>{(calculatePhysics('kineticEnergy') + calculatePhysics('potentialEnergy')).toFixed(settings.precision)} J</span>
+              <span>
+                {(
+                  calculatePhysics("kineticEnergy") +
+                  calculatePhysics("potentialEnergy")
+                ).toFixed(settings.precision)}{" "}
+                J
+              </span>
             </div>
             <div className="flex justify-between">
               <span>Momentum:</span>
-              <span>{(physicsParams.mass * physicsParams.velocity).toFixed(settings.precision)} kg·m/s</span>
+              <span>
+                {(physicsParams.mass * physicsParams.velocity).toFixed(
+                  settings.precision
+                )}{" "}
+                kg·m/s
+              </span>
             </div>
             <hr className={darkMode ? "border-gray-600" : "border-gray-300"} />
             <div className="flex justify-between">
               <span>Electric Power:</span>
-              <span>{calculatePhysics('power').toFixed(settings.precision)} W</span>
+              <span>
+                {calculatePhysics("power").toFixed(settings.precision)} W
+              </span>
             </div>
             <div className="flex justify-between">
               <span>Calculated Resistance:</span>
-              <span>{calculatePhysics('resistance').toFixed(settings.precision)} Ω</span>
+              <span>
+                {calculatePhysics("resistance").toFixed(settings.precision)} Ω
+              </span>
             </div>
             <div className="flex justify-between">
               <span>Lorentz Force:</span>
-              <span>{calculatePhysics('lorentzForce').toExponential(settings.precision)} N</span>
+              <span>
+                {calculatePhysics("lorentzForce").toExponential(
+                  settings.precision
+                )}{" "}
+                N
+              </span>
             </div>
           </div>
-                    
+
           <h3 className="font-bold mb-2 mt-4">Physics Constants</h3>
-          <div className={`space-y-2 p-4 ${darkMode ? "bg-gray-700" : "bg-gray-100"} rounded`}>
+          <div
+            className={`space-y-2 p-4 ${
+              darkMode ? "bg-gray-700" : "bg-gray-100"
+            } rounded`}
+          >
             <div className="grid grid-cols-2 gap-2">
               <div>
                 <div className="font-semibold">Gravitational Constant (G):</div>
@@ -1854,31 +2225,103 @@ const AdvancedCalculator = () => {
           </div>
         </div>
       </div>
-            
+
       <div>
         <h3 className="font-bold mb-2">Physics Formulas</h3>
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>v = v₀ + at</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>s = s₀ + v₀t + ½at²</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>v² = v₀² + 2a(s-s₀)</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>F = ma</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>Ek = ½mv²</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>Ep = mgh</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>p = mv</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>W = F·d</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>P = VI</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>V = IR</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>F = qvB sin θ</div>
-          <div className={`p-2 ${darkMode ? "bg-gray-700" : "bg-yellow-50"} rounded text-sm`}>E = mc²</div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            v = v₀ + at
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            s = s₀ + v₀t + ½at²
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            v² = v₀² + 2a(s-s₀)
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            F = ma
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            Ek = ½mv²
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            Ep = mgh
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            p = mv
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            W = F·d
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            P = VI
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            V = IR
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            F = qvB sin θ
+          </div>
+          <div
+            className={`p-2 ${
+              darkMode ? "bg-gray-700" : "bg-yellow-50"
+            } rounded text-sm`}
+          >
+            E = mc²
+          </div>
         </div>
       </div>
     </div>
   );
- 
+
   // Render physics simulation
   const renderPhysicsSimulation = () => {
     const colors = getGraphColors();
-        
+
     return (
       <div className="calculator-content">
         <div className="flex-wrap gap-4 mb-4">
@@ -1896,15 +2339,20 @@ const AdvancedCalculator = () => {
               <option value="wave">Wave Propagation</option>
             </select>
           </div>
-                    
-          {physicsType === 'projectile' && (
+
+          {physicsType === "projectile" && (
             <div className="flex-wrap mt-2">
               <div>
                 <label className="block mb-1">Velocity (m/s):</label>
                 <input
                   type="number"
                   value={physicsParams.velocity}
-                  onChange={(e) => setPhysicsParams({...physicsParams, velocity: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      velocity: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
@@ -1913,7 +2361,12 @@ const AdvancedCalculator = () => {
                 <input
                   type="number"
                   value={physicsParams.angle}
-                  onChange={(e) => setPhysicsParams({...physicsParams, angle: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      angle: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
@@ -1922,7 +2375,12 @@ const AdvancedCalculator = () => {
                 <input
                   type="number"
                   value={physicsParams.height}
-                  onChange={(e) => setPhysicsParams({...physicsParams, height: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      height: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
@@ -1931,21 +2389,31 @@ const AdvancedCalculator = () => {
                 <input
                   type="number"
                   value={physicsParams.gravity}
-                  onChange={(e) => setPhysicsParams({...physicsParams, gravity: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      gravity: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
             </div>
           )}
-                    
-          {physicsType === 'pendulum' && (
+
+          {physicsType === "pendulum" && (
             <div className="flex-wrap mt-2">
               <div>
                 <label className="block mb-1">Length (m):</label>
                 <input
                   type="number"
                   value={physicsParams.pendulumLength}
-                  onChange={(e) => setPhysicsParams({...physicsParams, pendulumLength: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      pendulumLength: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
@@ -1954,21 +2422,31 @@ const AdvancedCalculator = () => {
                 <input
                   type="number"
                   value={physicsParams.gravity}
-                  onChange={(e) => setPhysicsParams({...physicsParams, gravity: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      gravity: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
             </div>
           )}
-                    
-          {physicsType === 'spring' && (
+
+          {physicsType === "spring" && (
             <div className="flex-wrap mt-2">
               <div>
                 <label className="block mb-1">Mass (kg):</label>
                 <input
                   type="number"
                   value={physicsParams.mass}
-                  onChange={(e) => setPhysicsParams({...physicsParams, mass: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      mass: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
@@ -1977,21 +2455,31 @@ const AdvancedCalculator = () => {
                 <input
                   type="number"
                   value={physicsParams.springConstant}
-                  onChange={(e) => setPhysicsParams({...physicsParams, springConstant: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      springConstant: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
             </div>
           )}
-                    
-          {physicsType === 'circuit' && (
+
+          {physicsType === "circuit" && (
             <div className="flex-wrap mt-2">
               <div>
                 <label className="block mb-1">Voltage (V):</label>
                 <input
                   type="number"
                   value={physicsParams.voltage}
-                  onChange={(e) => setPhysicsParams({...physicsParams, voltage: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      voltage: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
@@ -2000,14 +2488,19 @@ const AdvancedCalculator = () => {
                 <input
                   type="number"
                   value={physicsParams.resistance}
-                  onChange={(e) => setPhysicsParams({...physicsParams, resistance: parseFloat(e.target.value)})}
+                  onChange={(e) =>
+                    setPhysicsParams({
+                      ...physicsParams,
+                      resistance: parseFloat(e.target.value),
+                    })
+                  }
                   className="w-20"
                 />
               </div>
             </div>
           )}
         </div>
-                
+
         <div className="simulation-controls mt-4">
           <button
             className="btn btn-green"
@@ -2024,7 +2517,7 @@ const AdvancedCalculator = () => {
             Stop Simulation
           </button>
         </div>
-                
+
         <div className="simulation-container">
           <ResponsiveContainer width="100%" height="100%">
             <LineChart
@@ -2035,13 +2528,31 @@ const AdvancedCalculator = () => {
               <XAxis
                 dataKey="x"
                 type="number"
-                domain={physicsType === 'projectile' ? ['dataMin', 'dataMax'] : [-10, 10]}
-                label={{ value: physicsType === 'circuit' ? 'Time (s)' : 'x position (m)', position: 'insideBottomRight', offset: -5 }}
+                domain={
+                  physicsType === "projectile"
+                    ? ["dataMin", "dataMax"]
+                    : [-10, 10]
+                }
+                label={{
+                  value:
+                    physicsType === "circuit" ? "Time (s)" : "x position (m)",
+                  position: "insideBottomRight",
+                  offset: -5,
+                }}
                 stroke={darkMode ? "#fff" : "#333"}
               />
               <YAxis
-                domain={physicsType === 'projectile' ? [0, 'dataMax'] : [-10, 10]}
-                label={{ value: physicsType === 'circuit' ? 'Current (A)' : 'y position (m)', angle: -90, position: 'insideLeft' }}
+                domain={
+                  physicsType === "projectile" ? [0, "dataMax"] : [-10, 10]
+                }
+                label={{
+                  value:
+                    physicsType === "circuit"
+                      ? "Current (A)"
+                      : "y position (m)",
+                  angle: -90,
+                  position: "insideLeft",
+                }}
                 stroke={darkMode ? "#fff" : "#333"}
               />
               <Tooltip
@@ -2049,7 +2560,7 @@ const AdvancedCalculator = () => {
                 contentStyle={{ backgroundColor: darkMode ? "#333" : "#fff" }}
               />
               <Line
-                type={physicsType === 'projectile' ? 'monotone' : 'linear'}
+                type={physicsType === "projectile" ? "monotone" : "linear"}
                 dataKey="y"
                 stroke={colors.line1}
                 dot={false}
@@ -2057,42 +2568,96 @@ const AdvancedCalculator = () => {
               />
             </LineChart>
           </ResponsiveContainer>
-                    
-          {simulationData.length > 0 && physicsType === 'projectile' && (
+
+          {simulationData.length > 0 && physicsType === "projectile" && (
             <div className="simulation-ground"></div>
           )}
         </div>
-                
+
         <div className="simulation-info mt-4">
           <div className="simulation-info-title">Simulation Info:</div>
           <div className="simulation-info-content">
-            {physicsType === 'projectile' && (
+            {physicsType === "projectile" && (
               <>
-                <p>A projectile is launched at {physicsParams.velocity} m/s at an angle of {physicsParams.angle}°.</p>
-                <p>It will travel {calculatePhysics('range').toFixed(settings.precision)} meters horizontally and reach a maximum height of {calculatePhysics('maxHeight').toFixed(settings.precision)} meters.</p>
-                <p>Time of flight: {calculatePhysics('flightTime').toFixed(settings.precision)} seconds.</p>
+                <p>
+                  A projectile is launched at {physicsParams.velocity} m/s at an
+                  angle of {physicsParams.angle}°.
+                </p>
+                <p>
+                  It will travel{" "}
+                  {calculatePhysics("range").toFixed(settings.precision)} meters
+                  horizontally and reach a maximum height of{" "}
+                  {calculatePhysics("maxHeight").toFixed(settings.precision)}{" "}
+                  meters.
+                </p>
+                <p>
+                  Time of flight:{" "}
+                  {calculatePhysics("flightTime").toFixed(settings.precision)}{" "}
+                  seconds.
+                </p>
               </>
             )}
-            {physicsType === 'pendulum' && (
+            {physicsType === "pendulum" && (
               <>
-                <p>A pendulum of length {physicsParams.pendulumLength} m oscillates under the influence of gravity ({physicsParams.gravity} m/s²).</p>
-                <p>Period of oscillation: {(2 * Math.PI * Math.sqrt(physicsParams.pendulumLength / physicsParams.gravity)).toFixed(settings.precision)} seconds.</p>
+                <p>
+                  A pendulum of length {physicsParams.pendulumLength} m
+                  oscillates under the influence of gravity (
+                  {physicsParams.gravity} m/s²).
+                </p>
+                <p>
+                  Period of oscillation:{" "}
+                  {(
+                    2 *
+                    Math.PI *
+                    Math.sqrt(
+                      physicsParams.pendulumLength / physicsParams.gravity
+                    )
+                  ).toFixed(settings.precision)}{" "}
+                  seconds.
+                </p>
               </>
             )}
-            {physicsType === 'spring' && (
+            {physicsType === "spring" && (
               <>
-                <p>A mass of {physicsParams.mass} kg oscillates on a spring with spring constant k = {physicsParams.springConstant} N/m.</p>
-                <p>Period of oscillation: {(2 * Math.PI * Math.sqrt(physicsParams.mass / physicsParams.springConstant)).toFixed(settings.precision)} seconds.</p>
+                <p>
+                  A mass of {physicsParams.mass} kg oscillates on a spring with
+                  spring constant k = {physicsParams.springConstant} N/m.
+                </p>
+                <p>
+                  Period of oscillation:{" "}
+                  {(
+                    2 *
+                    Math.PI *
+                    Math.sqrt(physicsParams.mass / physicsParams.springConstant)
+                  ).toFixed(settings.precision)}{" "}
+                  seconds.
+                </p>
               </>
             )}
-            {physicsType === 'circuit' && (
+            {physicsType === "circuit" && (
               <>
-                <p>A simple DC circuit with voltage {physicsParams.voltage} V and resistance {physicsParams.resistance} Ω.</p>
-                <p>Current: {(physicsParams.voltage / physicsParams.resistance).toFixed(settings.precision)} A</p>
-                <p>Power dissipated: {(physicsParams.voltage * physicsParams.voltage / physicsParams.resistance).toFixed(settings.precision)} W</p>
+                <p>
+                  A simple DC circuit with voltage {physicsParams.voltage} V and
+                  resistance {physicsParams.resistance} Ω.
+                </p>
+                <p>
+                  Current:{" "}
+                  {(physicsParams.voltage / physicsParams.resistance).toFixed(
+                    settings.precision
+                  )}{" "}
+                  A
+                </p>
+                <p>
+                  Power dissipated:{" "}
+                  {(
+                    (physicsParams.voltage * physicsParams.voltage) /
+                    physicsParams.resistance
+                  ).toFixed(settings.precision)}{" "}
+                  W
+                </p>
               </>
             )}
-            {physicsType === 'wave' && (
+            {physicsType === "wave" && (
               <p>Wave propagation with amplitude modulation over time.</p>
             )}
           </div>
@@ -2100,16 +2665,19 @@ const AdvancedCalculator = () => {
       </div>
     );
   };
- 
+
   // Add CSS variables for dark mode
   useEffect(() => {
     // Apply dark mode to document body or root element
-    document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light');
+    document.documentElement.setAttribute(
+      "data-theme",
+      darkMode ? "dark" : "light"
+    );
   }, [darkMode]);
 
   // Return the calculator UI
   return (
-    <div className={`calculator-container ${darkMode ? 'dark-mode' : ''}`}>
+    <div className={`calculator-container ${darkMode ? "dark-mode" : ""}`}>
       <div className="calculator-header">
         <h1 className="calculator-title">Advanced Calculator</h1>
         <div className="header-buttons">
@@ -2127,11 +2695,11 @@ const AdvancedCalculator = () => {
           </button>
         </div>
       </div>
-            
+
       {showSettings ? (
         <div className="settings-panel">
           <h2 className="settings-title">Settings</h2>
-                    
+
           <div className="settings-grid">
             <div className="settings-group">
               <label className="settings-label">Dark Mode</label>
@@ -2145,7 +2713,7 @@ const AdvancedCalculator = () => {
                 <span>{darkMode ? "On" : "Off"}</span>
               </div>
             </div>
-                        
+
             <div className="settings-group">
               <label className="settings-label">Decimal Precision</label>
               <input
@@ -2153,38 +2721,49 @@ const AdvancedCalculator = () => {
                 min="0"
                 max="10"
                 value={settings.precision}
-                onChange={(e) => setSettings({...settings, precision: parseInt(e.target.value)})}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    precision: parseInt(e.target.value),
+                  })
+                }
               />
             </div>
-                        
+
             <div className="settings-group">
               <label className="settings-label">Angle Unit</label>
               <select
                 value={settings.angleUnit}
-                onChange={(e) => setSettings({...settings, angleUnit: e.target.value})}
+                onChange={(e) =>
+                  setSettings({ ...settings, angleUnit: e.target.value })
+                }
               >
                 <option value="deg">Degrees</option>
                 <option value="rad">Radians</option>
               </select>
             </div>
-                        
+
             <div className="settings-group">
               <label className="settings-label">Number Format</label>
               <select
                 value={settings.notationFormat}
-                onChange={(e) => setSettings({...settings, notationFormat: e.target.value})}
+                onChange={(e) =>
+                  setSettings({ ...settings, notationFormat: e.target.value })
+                }
               >
                 <option value="auto">Auto</option>
                 <option value="scientific">Scientific</option>
                 <option value="fixed">Fixed Decimal</option>
               </select>
             </div>
-                        
+
             <div className="settings-group">
               <label className="settings-label">Graph Theme</label>
               <select
                 value={settings.graphTheme}
-                onChange={(e) => setSettings({...settings, graphTheme: e.target.value})}
+                onChange={(e) =>
+                  setSettings({ ...settings, graphTheme: e.target.value })
+                }
               >
                 <option value="default">Default</option>
                 <option value="dark">Dark</option>
@@ -2193,7 +2772,7 @@ const AdvancedCalculator = () => {
               </select>
             </div>
           </div>
-                    
+
           <button
             className="btn btn-blue settings-close"
             onClick={() => setShowSettings(false)}
@@ -2205,63 +2784,56 @@ const AdvancedCalculator = () => {
         <>
           <div className="tab-container">
             <button
-              className={`tab ${activeTab === 'basic' ? 'active' : ''}`}
-              onClick={() => setActiveTab('basic')}
+              className={`tab ${activeTab === "basic" ? "active" : ""}`}
+              onClick={() => setActiveTab("basic")}
             >
               Basic
             </button>
             <button
-              className={`tab ${activeTab === 'graphing' ? 'active' : ''}`}
-              onClick={() => setActiveTab('graphing')}
+              className={`tab ${activeTab === "graphing" ? "active" : ""}`}
+              onClick={() => setActiveTab("graphing")}
             >
               Graphing
             </button>
             <button
-              className={`tab ${activeTab === 'units' ? 'active' : ''}`}
-              onClick={() => setActiveTab('units')}
+              className={`tab ${activeTab === "units" ? "active" : ""}`}
+              onClick={() => setActiveTab("units")}
             >
               Unit Converter
             </button>
             <button
-              className={`tab ${activeTab === 'matrix' ? 'active' : ''}`}
-              onClick={() => setActiveTab('matrix')}
+              className={`tab ${activeTab === "matrix" ? "active" : ""}`}
+              onClick={() => setActiveTab("matrix")}
             >
               Matrix
             </button>
             <button
-              className={`tab ${activeTab === 'statistics' ? 'active' : ''}`}
-              onClick={() => setActiveTab('statistics')}
+              className={`tab ${activeTab === "statistics" ? "active" : ""}`}
+              onClick={() => setActiveTab("statistics")}
             >
               Statistics
             </button>
             <button
-              className={`tab ${activeTab === 'physics' ? 'active' : ''}`}
-              onClick={() => setActiveTab('physics')}
+              className={`tab ${activeTab === "physics" ? "active" : ""}`}
+              onClick={() => setActiveTab("physics")}
             >
               Physics
             </button>
             <button
-              className={`tab ${activeTab === 'simulation' ? 'active' : ''}`}
-              onClick={() => setActiveTab('simulation')}
+              className={`tab ${activeTab === "simulation" ? "active" : ""}`}
+              onClick={() => setActiveTab("simulation")}
             >
               Simulations
             </button>
-            <button
-              className={`tab ${activeTab === 'spreadsheet' ? 'active' : ''}`}
-              onClick={() => setActiveTab('spreadsheet')}
-            >
-              Spreadsheet
-            </button>
           </div>
-                    
-          {activeTab === 'basic' && renderBasicCalculator()}
-          {activeTab === 'graphing' && renderGraphingCalculator()}
-          {activeTab === 'units' && renderUnitConversion()}
-          {activeTab === 'matrix' && renderMatrixCalculator()}
-          {activeTab === 'statistics' && renderStatisticsCalculator()}
-          {activeTab === 'physics' && renderPhysicsCalculator()}
-          {activeTab === 'simulation' && renderPhysicsSimulation()}
-          {activeTab === 'spreadsheet' && renderSpreadsheet()}
+
+          {activeTab === "basic" && renderBasicCalculator()}
+          {activeTab === "graphing" && renderGraphingCalculator()}
+          {activeTab === "units" && renderUnitConversion()}
+          {activeTab === "matrix" && renderMatrixCalculator()}
+          {activeTab === "statistics" && renderStatisticsCalculator()}
+          {activeTab === "physics" && renderPhysicsCalculator()}
+          {activeTab === "simulation" && renderPhysicsSimulation()}
         </>
       )}
     </div>