diff --git a/src/App.tsx b/src/App.tsx
index 48a93ff..5e689ec 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,7 +6,7 @@ import Home from "./Home";
 import Calculator from "./Calculator";
 
 const App: React.FC = () => {
-  const [calcMode, setCalcMode] = useState<"sum" | "product">("sum");
+  const [calcMode, setCalcMode] = useState<"buildBox" | "flatBar">("flatBar");
 
   return (
     <Router basename="/st-func-web">
diff --git a/src/Calculator.tsx b/src/Calculator.tsx
index d142702..be1c613 100644
--- a/src/Calculator.tsx
+++ b/src/Calculator.tsx
@@ -1,24 +1,42 @@
 import React, { useState } from "react";
+import { SecBuildBox, SecFlatBar, SecSteel } from "@st-func/st-func-ts";
+import { Unit } from "@st-func/st-func-ts";
 
 interface CalculatorProps {
-  calcMode: "sum" | "product";
-  setCalcMode: React.Dispatch<React.SetStateAction<"sum" | "product">>;
+  calcMode: "buildBox" | "flatBar";
+  setCalcMode: React.Dispatch<React.SetStateAction<"buildBox" | "flatBar">>;
 }
 
 const Calculator: React.FC<CalculatorProps> = ({ calcMode, setCalcMode }) => {
   const [num1, setNum1] = useState("");
   const [num2, setNum2] = useState("");
   const [num3, setNum3] = useState("");
+  const [num4, setNum4] = useState("");
   const [result, setResult] = useState<number | undefined>(undefined);
 
   const handleCalculation = () => {
-    if (calcMode === "sum") {
-      const sum = parseFloat(num1) + parseFloat(num2) + parseFloat(num3);
-      setResult(sum);
-    } else if (calcMode === "product") {
-      const product = parseFloat(num1) * parseFloat(num2);
-      setResult(product);
+    let secSteel: SecSteel;
+    if (calcMode === "buildBox") {
+      const secBuildBox: SecBuildBox = new SecBuildBox();
+      secBuildBox.setDimensions(
+        Unit.input(parseFloat(num1), "mm"),
+        Unit.input(parseFloat(num2), "mm"),
+        Unit.input(parseFloat(num3), "mm"),
+        Unit.input(parseFloat(num4), "mm")
+      );
+      secSteel = secBuildBox;
+    } else if (calcMode === "flatBar") {
+      const secFlatBar: SecFlatBar = new SecFlatBar();
+      secFlatBar.setDimensions(
+        Unit.input(parseFloat(num1), "mm"),
+        Unit.input(parseFloat(num2), "mm")
+      );
+      secSteel = secFlatBar;
+    } else {
+      secSteel = new SecSteel();
     }
+    let result: number = Unit.output(secSteel.area(), "mm^2");
+    setResult(result);
   };
 
   return (
@@ -28,10 +46,12 @@ const Calculator: React.FC<CalculatorProps> = ({ calcMode, setCalcMode }) => {
         <label>Calculation Mode:</label>
         <select
           value={calcMode}
-          onChange={(e) => setCalcMode(e.target.value as "sum" | "product")}
+          onChange={(e) =>
+            setCalcMode(e.target.value as "buildBox" | "flatBar")
+          }
         >
-          <option value="sum">Addition</option>
-          <option value="product">Multiplication</option>
+          <option value="buildBox">BuildBox</option>
+          <option value="flatBar">FlatBar</option>
         </select>
       </div>
       <div>
@@ -50,14 +70,24 @@ const Calculator: React.FC<CalculatorProps> = ({ calcMode, setCalcMode }) => {
           onChange={(e) => setNum2(e.target.value)}
         />
       </div>
-      {calcMode === "sum" && (
+      {calcMode === "buildBox" && (
         <div>
-          <label>Number 3:</label>
-          <input
-            type="number"
-            value={num3}
-            onChange={(e) => setNum3(e.target.value)}
-          />
+          <div>
+            <label>Number 3:</label>
+            <input
+              type="number"
+              value={num3}
+              onChange={(e) => setNum3(e.target.value)}
+            />
+          </div>
+          <div>
+            <label>Number 4:</label>
+            <input
+              type="number"
+              value={num4}
+              onChange={(e) => setNum4(e.target.value)}
+            />
+          </div>
         </div>
       )}
       <button onClick={handleCalculation}>Calculate</button>