diff --git a/src/Components/Content/index.tsx b/src/Components/Content/index.tsx
index d7920a9..98e1f6e 100644
--- a/src/Components/Content/index.tsx
+++ b/src/Components/Content/index.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Box } from "@mui/material";
-import Users from "../Users";
+import Tariffs from "../Tariffs/";
 
 
 const Content: React.FC = () =>  {
@@ -16,7 +16,7 @@ const Content: React.FC = () =>  {
         overflowY: "auto",
         padding: "60px"
       }}>
-        <Users />
+        <Tariffs />
       </Box>
     </React.Fragment>
   );
diff --git a/src/Components/Tariffs/Contractor/index.tsx b/src/Components/Tariffs/Contractor/index.tsx
new file mode 100644
index 0000000..f9c11f6
--- /dev/null
+++ b/src/Components/Tariffs/Contractor/index.tsx
@@ -0,0 +1,106 @@
+import * as React from "react";
+import { Box, Typography, Button } from "@mui/material";
+import theme from "../../../theme";
+
+
+const Contractor: React.FC = () =>  {
+  return (
+    <React.Fragment>
+      <Typography 
+        variant="subtitle1"  
+        sx={{
+          width: "90%",
+          height: "60px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          color: theme.palette.secondary.main
+      }}>
+        Сокращатель ссылок
+      </Typography>
+
+      <Box sx={{ 
+        marginTop: "35px",
+        display: "grid",
+        gridTemplateColumns: "repeat(2, 1fr)",
+        gridGap: "20px",
+        marginBottom: "120px",
+      }}>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "82px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Создание тарифа на аналитику время
+        </Button>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "82px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Создание тарифа на аналитику объем
+        </Button>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "82px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Создание тарифа на a/b тесты время
+        </Button>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "82px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Создание тарифа на a/b тесты объем 
+        </Button>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "52px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Изменить тариф 
+        </Button>
+      </Box>
+    </React.Fragment>
+  );
+}
+
+
+export default Contractor;
\ No newline at end of file
diff --git a/src/Components/Tariffs/Quiz/index.tsx b/src/Components/Tariffs/Quiz/index.tsx
new file mode 100644
index 0000000..268b688
--- /dev/null
+++ b/src/Components/Tariffs/Quiz/index.tsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+import { Box, Typography, Button } from "@mui/material";
+import theme from "../../../theme";
+
+
+const Quiz: React.FC = () =>  {
+  return (
+    <React.Fragment>
+      <Typography 
+        variant="subtitle1"  
+        sx={{
+          width: "90%",
+          height: "60px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          color: theme.palette.secondary.main
+      }}>
+        Опросник
+      </Typography>
+
+      <Box sx={{ 
+        marginTop: "35px",
+        display: "grid",
+        gridTemplateColumns: "repeat(2, 1fr)",
+        gridGap: "20px",
+        marginBottom: "120px",
+      }}>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "52px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Создать тариф на время
+        </Button>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "52px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Создать тариф на объем
+        </Button>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "52px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Изменить тариф 
+        </Button>
+      </Box>
+    </React.Fragment>
+  );
+}
+
+
+export default Quiz;
\ No newline at end of file
diff --git a/src/Components/Tariffs/Templater/index.tsx b/src/Components/Tariffs/Templater/index.tsx
new file mode 100644
index 0000000..0a1a63f
--- /dev/null
+++ b/src/Components/Tariffs/Templater/index.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+import { Box, Typography, Button } from "@mui/material";
+import theme from "../../../theme";
+
+
+const Templater: React.FC = () =>  {
+  return (
+    <React.Fragment>
+      <Typography 
+        variant="subtitle1"  
+        sx={{
+          width: "90%",
+          height: "60px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          color: theme.palette.secondary.main
+      }}>
+        Шаблонизатор документов
+      </Typography>
+
+      <Box sx={{ 
+        marginTop: "35px",
+        display: "grid",
+        gridTemplateColumns: "repeat(2, 1fr)",
+        gridGap: "20px",
+        marginBottom: "120px",
+      }}>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "52px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Создать тариф на время
+        </Button>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "52px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Создать тариф на объем
+        </Button>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "52px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Создать тариф на гигабайты
+        </Button>
+        <Button 
+          variant = "contained"
+          sx={{
+            backgroundColor: theme.palette.menu.main,
+            width: "320px",
+            height: "52px",
+            fontWeight: "normal",
+            fontSize: "17px",
+            "&:hover": {
+              backgroundColor: theme.palette.grayMedium.main
+            }
+          }}>
+            Изменить тариф 
+        </Button>
+      </Box>
+    </React.Fragment>
+  );
+}
+
+
+export default Templater;
\ No newline at end of file
diff --git a/src/Components/Tariffs/index.tsx b/src/Components/Tariffs/index.tsx
new file mode 100644
index 0000000..cc9540b
--- /dev/null
+++ b/src/Components/Tariffs/index.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Box } from "@mui/material";
+import Templater from "./Templater";
+import Quiz from "./Quiz";
+import Contractor from "./Contractor";
+import theme from "../../theme";
+
+
+const Tariffs: React.FC = () =>  {
+  return (
+    <React.Fragment>
+      <Box sx={{ 
+        width: "90%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center"
+      }}>
+        <Templater />
+        <Quiz />
+        <Contractor />
+      </Box>
+    </React.Fragment>
+  );
+}
+
+
+export default Tariffs;
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 027873b..daa1079 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -16,6 +16,7 @@ root.render(
                 <Route path="/" element={ <Authorization /> } />
                 <Route path="/dispatch" element={ <Sections /> } />
                 <Route path="/users" element={ <LoggedIn /> } />
+
                 <Route path="/modalAdmin" element={ <LoggedIn /> } />
                 <Route path="/modalUser" element={ <LoggedIn /> } />
                 <Route