diff --git a/src/pages/Setting/CustomWrapper.tsx b/src/pages/Setting/CustomWrapper.tsx
new file mode 100644
index 0000000..a2325b3
--- /dev/null
+++ b/src/pages/Setting/CustomWrapper.tsx
@@ -0,0 +1,250 @@
+import { useState } from "react";
+import axios from "axios";
+import {
+  Box,
+  IconButton,
+  SxProps,
+  TextField,
+  Theme,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
+
+import { usePrivilegies } from "@root/hooks/privilege.hook";
+
+interface CustomWrapperProps {
+  text: string;
+  sx?: SxProps<Theme>;
+  result?: boolean;
+}
+
+interface СardChildren {
+  name: string;
+  type: string;
+  price: string;
+  description: string;
+}
+
+const СardChildren = ({ name, type, price, description }: СardChildren) => {
+  const [inputOpen, setInputOpen] = useState<boolean>(false);
+  const [inputValue, setInputValue] = useState<string>("");
+
+  const PutPrivilegies = () => {
+    axios({
+      method: "put",
+      url: "https://admin.pena.digital/strator/privilege/service",
+      data: {
+        price: inputValue,
+      },
+    });
+  };
+
+  if (!inputOpen && inputValue !== "") {
+    PutPrivilegies();
+    setInputValue("");
+  }
+
+  return (
+    <Box
+      key={type}
+      sx={{
+        px: "20px",
+        py: "25px",
+        backgroundColor: "#F1F2F6",
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      <Box sx={{ display: "flex" }}>
+        <Box sx={{ width: "200px", borderRight: "1px solid black" }}>
+          <Typography
+            variant="h6"
+            sx={{
+              color: "#fe9903",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {name}
+          </Typography>
+          <Tooltip placement="top" title={description}>
+            <IconButton>
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M9.25 9.25H10V14.5H10.75"
+                  stroke="#7E2AEA"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M9.8125 7C10.4338 7 10.9375 6.49632 10.9375 5.875C10.9375 5.25368 10.4338 4.75 9.8125 4.75C9.19118 4.75 8.6875 5.25368 8.6875 5.875C8.6875 6.49632 9.19118 7 9.8125 7Z"
+                  fill="#7E2AEA"
+                />
+              </svg>
+            </IconButton>
+          </Tooltip>
+          <IconButton onClick={() => setInputOpen(!inputOpen)}>
+            <ModeEditOutlineOutlinedIcon />
+          </IconButton>
+        </Box>
+      </Box>
+      <Box sx={{ width: "600px", display: "flex", justifyContent: "space-around" }}>
+        {inputOpen ? (
+          <TextField
+            placeholder="введите число"
+            fullWidth
+            onChange={(event) => setInputValue(event.target.value)}
+            sx={{
+              alignItems: "center",
+              width: "400px",
+              "& .MuiInputBase-root": {
+                backgroundColor: "#F2F3F7",
+                height: "48px",
+              },
+            }}
+            inputProps={{
+              sx: {
+                borderRadius: "10px",
+                fontSize: "18px",
+                lineHeight: "21px",
+                py: 0,
+              },
+            }}
+          />
+        ) : (
+          <Typography sx={{ color: "black", mr: "5px" }}>price: {price}</Typography>
+        )}
+        <Typography sx={{ color: "black" }}>{type}</Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export const PrivilegiesWrapper = ({ text, sx, result }: CustomWrapperProps) => {
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+
+  const { privilegies, isError, isLoading, errorMessage } = usePrivilegies();
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        overflow: "hidden",
+        borderRadius: "12px",
+        boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
+                            0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
+                            0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
+                            0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
+                            0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
+                            0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
+                              4749)`,
+
+        ...sx,
+      }}
+    >
+      <Box
+        sx={{
+          border: "1px solid white",
+          "&:first-of-type": {
+            borderTopLeftRadius: "12px ",
+            borderTopRightRadius: "12px",
+          },
+          "&:last-of-type": {
+            borderBottomLeftRadius: "12px",
+            borderBottomRightRadius: "12px",
+          },
+          "&:not(:last-of-type)": {
+            borderBottom: `1px solid gray`,
+          },
+        }}
+      >
+        <Box
+          onClick={() => setIsExpanded((prev) => !prev)}
+          sx={{
+            height: "88px",
+            px: "20px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            cursor: "pointer",
+            userSelect: "none",
+          }}
+        >
+          <Typography
+            sx={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              fontSize: "18px",
+              lineHeight: upMd ? undefined : "19px",
+              fontWeight: 400,
+              color: "#FFFFFF",
+              px: 0,
+            }}
+          >
+            {text}
+          </Typography>
+
+          <Box
+            sx={{
+              display: "flex",
+              height: "100%",
+              alignItems: "center",
+            }}
+          >
+            {result ? (
+              <>
+                <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
+                  <path
+                    d="M7.5 19.5625L15 12.0625L22.5 19.5625"
+                    stroke="#7E2AEA"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+
+                <Box
+                  sx={{
+                    borderLeft: upSm ? "1px solid #9A9AAF" : "none",
+                    pl: upSm ? "2px" : 0,
+                    height: "50%",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                />
+              </>
+            ) : (
+              <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
+                <path
+                  d="M7.5 19.5625L15 12.0625L22.5 19.5625"
+                  stroke="#fe9903"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            )}
+          </Box>
+        </Box>
+        {isExpanded &&
+          (isError ? (
+            <Typography>errorMessage</Typography>
+          ) : (
+            privilegies?.Шаблонизатор.map(({ name, type, price, description }) => (
+              <СardChildren key={type} name={name} type={type} price={price} description={description} />
+            ))
+          ))}
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/pages/Setting/SettingRoles.tsx b/src/pages/Setting/SettingRoles.tsx
index 9a1b854..9304f64 100644
--- a/src/pages/Setting/SettingRoles.tsx
+++ b/src/pages/Setting/SettingRoles.tsx
@@ -2,7 +2,7 @@ import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typ
 
 import FormDeleteRoles from "./FormDeleteRoles";
 import FormCreateRoles from "./FormCreateRoles";
-import { PrivilegiesWrapper } from "./PrivilegiesWrapper";
+import { PrivilegiesWrapper } from "./CustomWrapper";
 
 import theme from "../../theme";