переделал на "sx"

public/fonts.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "GilroyRegular";
+  src: local("GilroyRegular"), url(fonts/GilroyRegular.woff) format("woff");
+}

public/index.html

@@ -10,7 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link rel="stylesheet" href="fonts.css" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/Components/Authorization/index.tsx

@@ -1,20 +1,95 @@
 import * as React from "react";
 import { Box, CssBaseline } from "@mui/material";
-import useStyles from "./styles";
+import theme from "../../theme";
 
 
 const Authorization: React.FC = () =>  {
-  const classes = useStyles();
-  
   return (
     <React.Fragment>
       <CssBaseline />
 
-      <Box className={ classes.wrapper }>
-        <Box className={ classes.form }>
+      <Box sx={{
+        backgroundColor: theme.palette.primary.main,
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center"
+      }}>
+        <Box sx={{
+          width: "350px",
+          height: "700px",
+          color: "#ffffff",
+          fontFamily: "GilroyRegular",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          alignItems: "center",
+          border: "1px dashed gray"
+        }}>
 
-          <Box className={ classes.caption }>
-            pam pam
+          <Box sx={{
+            display: "flex",
+            fontSize: "21px",
+            border: "1px dashed red"
+          }}>
+            <Box sx={{
+              fontWeight: "600",
+            }}>
+              PENA
+            </Box>
+            <Box sx={{
+
+            }}>
+              HUB
+            </Box>
+          </Box>
+
+          <Box sx={{
+            width: "100%",
+            border: "1px solid purple",
+            fontWeight: "600",
+            display: "flex",
+            justifyContent: "right",
+          }}>
+            <Box sx={{
+              width: "340px",
+              border: "1px solid red"
+            }}>
+              <Box sx={{
+                fontSize: "33px",
+              }}>
+                Добро пожаловать
+              </Box>
+              <Box>
+                Мы рады что вы выбрали нас!
+              </Box>
+            </Box>
+          </Box>
+
+          <Box sx={{
+            width: "100%",
+            height: "146px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            alignItems: "center",
+            border: "1px solid purple",
+          }}>
+            <Box sx={{
+              width: "100%",
+              height: "65px",
+              border: "1px solid red"
+            }}>
+              1
+            </Box>
+            <Box sx={{
+              width: "100%",
+              height: "65px",
+              border: "1px solid red"
+            }}>
+              2
+            </Box>
           </Box>
             
         </Box>

src/Components/Authorization/styles.ts

@@ -1,25 +0,0 @@
-import { makeStyles } from "@material-ui/core/styles";
-import theme from "../../theme";
-
-
-const useStyles = makeStyles(() => ({
-  wrapper: {
-    background: theme.palette.primary.main,
-    width: "100%",
-    height: "100vh",
-    color: "#ffffff",
-    display: "flex"
-  },
-    form: {
-      width: "350px",
-      height: "700px",
-      margin: "auto",
-      border: "1px solid gray"
-    },
-      caption: {
-        border: "1px solid white"
-      }
-}));
-
-
-export default useStyles;