3# Добавил 2 кнопки с Material Design с готовой стилизацией и компоненты полей

frontend/src/app/page.tsx

+"use client";
+import { Box, Button, Container, Grid2, Typography } from "@mui/material";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import { ChangeEvent, FormEvent, useState } from "react";
+import InputField from "./components/InputField";
+
+interface IFormData {
+  decoded: string;
+  encoded: string;
+  password: string;
+}
+
 export default function Home() {
-  return <div className="App"></div>;
+  const [formData, setFormData] = useState<IFormData>({
+    encoded: "",
+    decoded: "",
+    password: "",
+  });
+
+  const submitFormHandler = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+  };
+
+  const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name.toLowerCase()]: value,
+    }));
+  };
+
+  return (
+    <div className="App">
+      <Container sx={{ marginTop: 2 }} maxWidth="lg">
+        <Typography variant="h3">Cypher Coder/Decoder</Typography>
+        <Box
+          component="form"
+          autoComplete="off"
+          onSubmit={submitFormHandler}
+          paddingY={2}
+        >
+          <Grid2 container direction="column" spacing={2}>
+            <InputField
+              name="Decoded"
+              value={formData.decoded}
+              onChange={onInputChangeHandler}
+            />
+            <Grid2 container alignItems="center" justifyContent="space-between">
+              <Grid2 size={7}>
+                <InputField
+                  name="Password"
+                  value={formData.password}
+                  onChange={onInputChangeHandler}
+                />
+              </Grid2>
+              <Grid2 size={2} justifyContent="center">
+                <Button variant="contained" startIcon={<ArrowDownwardIcon />}>
+                  Encode
+                </Button>
+              </Grid2>
+              <Grid2 size={2} justifyContent="center">
+                <Button
+                  variant="contained"
+                  startIcon={
+                    <ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} />
+                  }
+                >
+                  Decode
+                </Button>
+              </Grid2>
+            </Grid2>
+
+            <InputField
+              name="Encoded"
+              value={formData.encoded}
+              onChange={onInputChangeHandler}
+            />
+          </Grid2>
+        </Box>
+      </Container>
+    </div>
+  );
 }