diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 9e26c79..9003818 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,36 +1,159 @@
+import { useEffect, useState } from "react";
+import Button from "../Button/Button";
 import Matrix from "../Matrix/Matrix";
 import SelectSize from "../SelectSize/SelectSize";
+import Panel from "../Panel/Panel";
+import Result from "../Result/Result";
 
 function App() {
+  const [sizeMatrix, setSizeMatrix] = useState({ x: 2, y: 2 });
+  const [range, setRange] = useState({ from: 0, to: 99 });
+  const [matrixA, setMatrixA] = useState<number[][]>([
+    [0, 0],
+    [0, 0],
+  ]);
+  const [matrixB, setMatrixB] = useState<number[]>([0, 0]);
+
+  useEffect(() => {
+    updateMatrix();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sizeMatrix]);
+
+  const updateMatrix = () => {
+    setMatrixA((current) => {
+      const newMatrix: number[][] = [];
+
+      for (let i = 0; i < sizeMatrix.y; i++) {
+        const newRow: number[] = [];
+        for (let j = 0; j < sizeMatrix.x; j++) {
+          newRow.push(current[i]?.[j] || 0);
+        }
+        newMatrix.push(newRow);
+      }
+
+      return newMatrix;
+    });
+
+    setMatrixB((current) => {
+      const newMatrix: number[] = [];
+
+      for (let i = 0; i < sizeMatrix.y; i++) {
+        newMatrix.push(current[i] || 0);
+      }
+
+      return newMatrix;
+    });
+  };
+
+  const generateMatrix = () => {
+    setMatrixA(() => {
+      const newMatrix: number[][] = [];
+
+      for (let i = 0; i < sizeMatrix.y; i++) {
+        const newRow: number[] = [];
+        for (let j = 0; j < sizeMatrix.x; j++) {
+          newRow.push(
+            Math.round(Math.random() * (range.to - range.from)) + range.from,
+          );
+        }
+        newMatrix.push(newRow);
+      }
+
+      return newMatrix;
+    });
+
+    setMatrixB(() => {
+      const newMatrix: number[] = [];
+
+      for (let i = 0; i < sizeMatrix.y; i++) {
+        newMatrix.push(
+          Math.round(Math.random() * (range.to - range.from)) + range.from,
+        );
+      }
+
+      return newMatrix;
+    });
+  };
+
   return (
     <>
-      <div className="flex min-h-screen bg-slate-100">
-        <div
-          className={
-            "m-auto min-h-48 min-w-96 max-w-screen-xl p-4 " +
-            "rounded-lg bg-slate-50 shadow-lg " +
-            "flex flex-col gap-2"
-          }
-        >
-          <h2 className="mx-auto p-1 text-lg">Input matrix</h2>
-
-          <div className="flex flex-row gap-2">
-            <p>Size: </p>
-            <SelectSize/>
-            <p> x </p>
-            <SelectSize/>
-          </div>
-
-          {/* <div className="mx-auto">
-            <button
-              className={
-                "rounded-lg border bg-purple-500 px-2 py-1 text-white " +
-                "transition-all hover:scale-105 hover:bg-purple-600 active:scale-90"
-              }
-            >
-              dsadas
-            </button>
-          </div> */}
+      <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-slate-100 py-10">
+        <h1 className="p-2 text-center text-3xl">Jordan elimination method</h1>
+        <div className="relative flex  gap-8">
+          <div className="absolute -right-14 z-0 size-36 rounded-full bg-purple-500 blur-3xl" />
+          <div className="blur-1xl absolute -bottom-5 -left-5 z-0 size-48 rounded-[2rem] bg-purple-500/40 blur-3xl" />
+          <Panel className="m-0">
+            <h2 className="p-2 text-center text-xl font-medium">
+              Matrix A & B
+            </h2>
+
+            <div className="flex flex-row flex-wrap justify-between gap-4">
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-row items-center gap-2">
+                  <p>Size: </p>
+                  <SelectSize
+                    selectProps={{
+                      onChange: (e) =>
+                        setSizeMatrix({
+                          x: sizeMatrix.x,
+                          y: Number(e.currentTarget.value),
+                        }),
+                    }}
+                  />
+                  <p> x </p>
+                  <SelectSize
+                    selectProps={{
+                      onChange: (e) =>
+                        setSizeMatrix({
+                          x: Number(e.currentTarget.value),
+                          y: sizeMatrix.y,
+                        }),
+                    }}
+                  />
+                </div>
+                <div className="mb-auto flex flex-row items-center gap-2">
+                  <p>From</p>
+                  <input
+                    type="number"
+                    className="w-12 rounded-lg border pl-1"
+                    defaultValue={0}
+                    onChange={(e) => {
+                      setRange({
+                        from: Number(e.currentTarget.value),
+                        to: range.to,
+                      });
+                    }}
+                  />
+                  <p>to</p>
+                  <input
+                    type="number"
+                    className="w-12 rounded-lg border pl-1"
+                    defaultValue={99}
+                    onChange={(e) => {
+                      setRange({
+                        from: range.from,
+                        to: Number(e.currentTarget.value),
+                      });
+                    }}
+                  />
+                </div>
+                <Button value={"Generate"} onClick={generateMatrix} />
+              </div>
+              <div>
+                {/* <p className="p-2 font-bold">A</p> */}
+                <Matrix value={matrixA} />
+              </div>
+              <div>
+                {/* <p className="p-2 font-bold">B</p> */}
+                <Matrix value={matrixB} />
+              </div>
+            </div>
+          </Panel>
+        </div>
+        <div>
+          <p className="max-w-screen-md text-gray-500">
+            <Result matrixA={matrixA} matrixB={matrixB} />
+          </p>
         </div>
       </div>
     </>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 0000000..edb1196
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,22 @@
+import { FC, ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+
+type buttonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+const Button: FC<buttonProps> = (buttonProps) => {
+  return (
+    <button
+      className={
+        "rounded-lg border bg-purple-500 px-4 py-[0.33rem] text-white " +
+        "font-semibold transition-all hover:scale-105 hover:bg-purple-600 active:scale-90"
+      }
+      {...buttonProps}
+    >
+      {buttonProps.value}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/Matrix/Matrix.tsx b/src/components/Matrix/Matrix.tsx
index 6ab8d53..13018b3 100644
--- a/src/components/Matrix/Matrix.tsx
+++ b/src/components/Matrix/Matrix.tsx
@@ -1,24 +1,21 @@
 import { FC } from "react";
 
-// const styles = stylex.create({
-//   table: {
-//     border: "1px solid",
-//     paddingHorizontal: "0.5rem",
-//   },
-// });
-
-const Matrix: FC<{ value: number[][] }> = ({ value }) => {
+const Matrix: FC<{ value: number[][] | number[] }> = ({ value }) => {
   return (
     <>
       <table>
         <tbody>
-          {value.map((row, rowIndex) => (
-            <tr key={rowIndex} className="">
-              {row.map((value, colIndex) => (
-                <td key={colIndex} className="">
-                  {value}
-                </td>
-              ))}
+          {value.map((rowVal, rowIndex) => (
+            <tr key={rowIndex} className="border">
+              {Array.isArray(rowVal) ? (
+                rowVal.map((colVal, colIndex) => (
+                  <td key={colIndex} className="min-w-8 border p-1 text-center">
+                    {colVal}
+                  </td>
+                ))
+              ) : (
+                <td className="min-w-8 border p-1 text-center">{rowVal}</td>
+              )}
             </tr>
           ))}
         </tbody>
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
new file mode 100644
index 0000000..8ab886b
--- /dev/null
+++ b/src/components/Panel/Panel.tsx
@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+
+interface IPanel {
+  children?: ReactNode;
+  className?: string;
+}
+
+const Panel: FC<IPanel> = ({ children, className }) => {
+  return (
+    <div
+      className={
+        "z-10 m-auto min-h-48 min-w-96 max-w-screen-xl p-4 " +
+        "rounded-2xl bg-slate-50 shadow-lg " +
+        "flex flex-col gap-4 " +
+        className
+      }
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Panel;
diff --git a/src/components/Result/Result.tsx b/src/components/Result/Result.tsx
new file mode 100644
index 0000000..aa00bb2
--- /dev/null
+++ b/src/components/Result/Result.tsx
@@ -0,0 +1,84 @@
+import { FC } from "react";
+import Matrix from "../Matrix/Matrix";
+import inverseMatrix from "../../functions/inverseMatrix";
+import { roundedMatrix, roundedRow } from "../../functions/utils";
+import matrixRank from "../../functions/matrixRank";
+import solveLinearSystem from "../../functions/solveLinearSystem";
+
+interface IResult {
+  matrixA: number[][];
+  matrixB: number[];
+}
+
+const Result: FC<IResult> = ({ matrixA, matrixB }) => {
+  const invertedMatrix = inverseMatrix(matrixA);
+  const rank = matrixRank(matrixA);
+  const solution = solveLinearSystem(matrixA, matrixB);
+
+  return (
+    <div className="inline-flex flex-col">
+      <p className="mt-4 font-bold">Finding the inverse matrix.</p>
+      <span>--------------------------------------------------</span>
+      {invertedMatrix ? (
+        <>
+          <span>Inverse matrix:</span>
+          <Matrix value={roundedMatrix(invertedMatrix)} />
+        </>
+      ) : (
+        <>
+          <span>The inverse matrix was not found.</span>
+        </>
+      )}
+
+      <p className="mt-4 font-bold">Finding the rank of a matrix.</p>
+      <span>--------------------------------------------------</span>
+      <span>Matrix rank: {rank}</span>
+
+      <p className="mt-4 font-bold">
+        Solution of the system of linear equations.
+      </p>
+      <span>--------------------------------------------------</span>
+      {solution ? (
+        <>
+          <span>Solving the system of linear equations:</span>
+          <Matrix value={roundedRow(solution)} />
+        </>
+      ) : (
+        <>
+          <span>A matrix does not have an inverse matrix.</span>
+        </>
+      )}
+    </div>
+    // <>
+    //   {invertedMatrix ? (
+    //     <>
+    //       <p>Inverse matrix:</p>
+    //       <Matrix value={roundedMatrix(invertedMatrix)} />
+    //     </>
+    //   ) : (
+    //     <>
+    //       <p>
+    //         The matrix is not square, the inverse matrix does not exist.
+    //       </p>
+    //     </>
+    //   )}
+
+    //   <p>Matrix rank: {rank}</p>
+
+    //   {solution ? (
+    //     <>
+    //       <p>Solving the system of linear equations:</p>
+    //       <Matrix value={roundedRow(solution)} />
+    //     </>
+    //   ) : (
+    //     <>
+    //       <p>
+    //       A matrix does not have an inverse matrix.
+    //       </p>
+    //     </>
+    //   )}
+    // </>
+  );
+};
+
+export default Result;
diff --git a/src/components/SelectSize/SelectSize.tsx b/src/components/SelectSize/SelectSize.tsx
index 1531e9b..0b6320a 100644
--- a/src/components/SelectSize/SelectSize.tsx
+++ b/src/components/SelectSize/SelectSize.tsx
@@ -3,16 +3,21 @@ import { FC, HTMLProps } from "react";
 interface ISelectSize {
   selectProps?: HTMLProps<HTMLSelectElement>;
   optionProps?: HTMLProps<HTMLOptionElement>;
+  // selectProps?: DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+  // optionProps?: DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
 }
 
-const SelectSize: FC<ISelectSize> = (selectProps, optionProps) => {
+const SelectSize: FC<ISelectSize> = ({ selectProps, optionProps }) => {
   return (
     <>
       <select
-        name="sizeY"
-        id="sizeY"
+        name="size"
+        id="size"
         defaultValue={2}
-        className="rounded-lg border"
+        className="rounded-lg border pl-1"
+        onChange={(e) => {
+          e.target.value;
+        }}
         {...selectProps}
       >
         {Array.from({ length: 9 }, (_, index) => (