diff --git a/src/components/CustomAccordion.tsx b/src/components/CustomAccordion.tsx
index 66a9420..ea8e836 100644
--- a/src/components/CustomAccordion.tsx
+++ b/src/components/CustomAccordion.tsx
@@ -1,11 +1,11 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"
-import { useState } from "react"
-import ExpandIcon from "./icons/ExpandIcon"
-import type { ReactNode } from "react"
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useState } from "react";
+import ExpandIcon from "./icons/ExpandIcon";
+import type { ReactNode } from "react";
 
 interface Props {
   header: ReactNode;
-  text: string;
+  text: ReactNode;
   divide?: boolean;
   price?: number;
   last?: boolean;
@@ -13,91 +13,94 @@ interface Props {
 }
 
 export default function CustomAccordion({ header, text, divide = false, price, last, first }: Props) {
-	const theme = useTheme()
-	const upMd = useMediaQuery(theme.breakpoints.up("md"))
-	const upXs = useMediaQuery(theme.breakpoints.up("xs"))
-	const [isExpanded, setIsExpanded] = useState<boolean>(false)
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md")); //900
+  const upXs = useMediaQuery(theme.breakpoints.up("xs")); //300
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
-	return (
-		<Box
-			sx={{
-				backgroundColor: "white",
-				borderTopLeftRadius: first ? "12px" : "0",
-				borderTopRightRadius: first ? "12px" : "0",
-				borderBottomLeftRadius: last ? "12px" : "0",
-				borderBottomRightRadius: last ? "12px" : "0",
-				borderBottom: `1px solid ${theme.palette.gray.main}`,
+  console.log(upXs);
 
-				...(last && { borderBottom: "none" }),
-			}}
-		>
-			<Box
-				onClick={() => setIsExpanded((prev) => !prev)}
-				sx={{
-					minHeight: "72px",
-					px: "20px",
-					display: "flex",
-					alignItems: "stretch",
-					justifyContent: "space-between",
-					cursor: "pointer",
-					userSelect: "none",
-					rowGap: "10px",
-					flexDirection: upXs ? undefined : "column",
-				}}
-			>
-				<Box
-					sx={{
-						display: "flex",
-						alignItems: "center",
-						width: "100%",
-						fontSize: upMd ? undefined : "16px",
-						lineHeight: upMd ? undefined : "19px",
-						fontWeight: 500,
-						color: theme.palette.gray.dark,
-						px: 0,
-					}}
-				>
-					{header}
-				</Box>
-				<Box
-					sx={{
-						pl: "20px",
-						width: "52px",
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						borderLeft: divide ? "1px solid #000000" : "none",
-					}}
-				>
-					<ExpandIcon isExpanded={isExpanded} />
-				</Box>
-			</Box>
-			{isExpanded && (
-				<Box
-					sx={{
-						display: "flex",
-						justifyContent: "space-between",
-						px: "20px",
-						py: upMd ? "25px" : undefined,
-						pt: upMd ? undefined : "15px",
-						pb: upMd ? undefined : "25px",
-						backgroundColor: "#F1F2F6",
-					}}
-				>
-					<Typography
-						sx={{
-							fontSize: upMd ? undefined : "16px",
-							lineHeight: upMd ? undefined : "19px",
-							color: theme.palette.gray.dark,
-						}}
-					>
-						{text}
-					</Typography>
-					<Typography sx={{ display: price ? "block" : "none", fontSize: "18px", mr: "120px" }}>
-						{price} руб.
-					</Typography>
-				</Box>
-			)}
-		</Box>
-	)
+  return (
+    <Box
+      sx={{
+        backgroundColor: "white",
+        borderTopLeftRadius: first ? "12px" : "0",
+        borderTopRightRadius: first ? "12px" : "0",
+        borderBottomLeftRadius: last ? "12px" : "0",
+        borderBottomRightRadius: last ? "12px" : "0",
+        borderBottom: `1px solid ${theme.palette.gray.main}`,
+
+        ...(last && { borderBottom: "none" }),
+      }}
+    >
+      <Box
+        onClick={() => setIsExpanded((prev) => !prev)}
+        sx={{
+          minHeight: "72px",
+          px: "20px",
+          display: "flex",
+          alignItems: "stretch",
+          justifyContent: "space-between",
+          cursor: "pointer",
+          userSelect: "none",
+          rowGap: "10px",
+          flexDirection: upXs ? undefined : "column",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            fontSize: upMd ? undefined : "16px",
+            lineHeight: upMd ? undefined : "19px",
+            p: !upMd ? "17px 0 20px" : undefined,
+            fontWeight: 500,
+            color: theme.palette.gray.dark,
+            px: 0,
+          }}
+        >
+          {header}
+        </Box>
+        <Box
+          sx={{
+            pl: "20px",
+            width: "52px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderLeft: divide ? "1px solid #000000" : "none",
+          }}
+        >
+          <ExpandIcon isExpanded={isExpanded} />
+        </Box>
+      </Box>
+      {isExpanded && (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            px: "20px",
+            py: upMd ? "25px" : undefined,
+            pt: upMd ? undefined : "15px",
+            pb: upMd ? undefined : "25px",
+            backgroundColor: "#F1F2F6",
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: upMd ? undefined : "16px",
+              lineHeight: upMd ? undefined : "19px",
+              color: theme.palette.gray.dark,
+            }}
+          >
+            {text}
+          </Typography>
+          <Typography sx={{ display: price ? "block" : "none", fontSize: "18px", mr: "120px" }}>
+            {price} руб.
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  );
 }
diff --git a/src/pages/Faq/AccordionWrapper.tsx b/src/pages/Faq/AccordionWrapper.tsx
index ab17f28..5818a05 100644
--- a/src/pages/Faq/AccordionWrapper.tsx
+++ b/src/pages/Faq/AccordionWrapper.tsx
@@ -1,24 +1,34 @@
-import { Box } from "@mui/material"
+import React from "react";
+import { Box } from "@mui/material";
 
-import CustomAccordion from "@components/CustomAccordion"
-import { cardShadow } from "@root/utils/theme"
+import CustomAccordion from "@components/CustomAccordion";
+import { cardShadow } from "@root/utils/theme";
 
 interface Props {
   content: [string, string][];
 }
 
 export default function AccordionWrapper({ content }: Props) {
-	return (
-		<Box
-			sx={{
-				overflow: "hidden",
-				borderRadius: "12px",
-				boxShadow: cardShadow,
-			}}
-		>
-			{content.map((accordionItem, index) => (
-				<CustomAccordion key={index} header={accordionItem[0]} text={accordionItem[1]} />
-			))}
-		</Box>
-	)
+  return (
+    <Box
+      sx={{
+        overflow: "hidden",
+        borderRadius: "12px",
+        boxShadow: cardShadow,
+      }}
+    >
+      {content.map((accordionItem, index) => (
+        <CustomAccordion
+          key={index}
+          header={accordionItem[0]}
+          text={accordionItem[1].split("\n").map((line, index) => (
+            <React.Fragment key={index}>
+              {line}
+              <br />
+            </React.Fragment>
+          ))}
+        />
+      ))}
+    </Box>
+  );
 }
diff --git a/src/pages/Faq/Faq.tsx b/src/pages/Faq/Faq.tsx
index 1762a83..63a6d91 100644
--- a/src/pages/Faq/Faq.tsx
+++ b/src/pages/Faq/Faq.tsx
@@ -1,162 +1,171 @@
-import { IconButton, useMediaQuery, useTheme } from "@mui/material"
-import { Select } from "@root/components/Select"
-import { Box } from "@mui/material"
-import { Typography } from "@mui/material"
-import { useState } from "react"
-import SectionWrapper from "../../components/SectionWrapper"
-import AccordionWrapper from "./AccordionWrapper"
-import ArrowBackIcon from "@mui/icons-material/ArrowBack"
-import { Tabs } from "@root/components/Tabs"
-import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker"
+import { IconButton, useMediaQuery, useTheme } from "@mui/material";
+import { Select } from "@root/components/Select";
+import { Box } from "@mui/material";
+import { Typography } from "@mui/material";
+import { useState } from "react";
+import SectionWrapper from "../../components/SectionWrapper";
+import AccordionWrapper from "./AccordionWrapper";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Tabs } from "@root/components/Tabs";
+import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
 
-const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"]
+const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"];
 
 export default function Faq() {
-	const theme = useTheme()
-	const upMd = useMediaQuery(theme.breakpoints.up("md"))
-	const isMobile = useMediaQuery(theme.breakpoints.down(550))
-	const isTablet = useMediaQuery(theme.breakpoints.down(1000))
-	const [tabIndex, setTabIndex] = useState<number>(0)
-	const [selectedItem, setSelectedItem] = useState<number>(0)
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(550));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const [tabIndex, setTabIndex] = useState<number>(0);
+  const [selectedItem, setSelectedItem] = useState<number>(0);
 
-	const handleCustomBackNavigation = useHistoryTracker()
+  const handleCustomBackNavigation = useHistoryTracker();
 
-	return (
-		<SectionWrapper
-			maxWidth="lg"
-			sx={{
-				mt: upMd ? "25px" : "20px",
-				px: isTablet ? (isMobile ? "18px" : "40px") : "20px",
-				mb: upMd ? "70px" : "37px",
-			}}
-		>
-			<Box
-				sx={{
-					mt: "20px",
-					mb: isTablet ? "38px" : "20px",
-					display: "flex",
-					alignItems: "center",
-					gap: "10px",
-				}}
-			>
-				{isMobile && (
-					<IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
-						<ArrowBackIcon />
-					</IconButton>
-				)}
-				<Typography
-					sx={{
-						fontSize: isMobile ? "24px" : "36px",
-						fontWeight: "500",
-					}}
-				>
+  return (
+    <SectionWrapper
+      maxWidth="lg"
+      sx={{
+        mt: upMd ? "25px" : "20px",
+        px: isTablet ? (isMobile ? "18px" : "40px") : "20px",
+        mb: upMd ? "70px" : "37px",
+      }}
+    >
+      <Box
+        sx={{
+          mt: "20px",
+          mb: isTablet ? "38px" : "20px",
+          display: "flex",
+          alignItems: "center",
+          gap: "10px",
+        }}
+      >
+        {isMobile && (
+          <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
+            <ArrowBackIcon />
+          </IconButton>
+        )}
+        <Typography
+          sx={{
+            fontSize: isMobile ? "24px" : "36px",
+            fontWeight: "500",
+          }}
+        >
           Вопросы и ответы
-				</Typography>
-			</Box>
-			<Box sx={{ marginBottom: isMobile ? "20px" : "0px" }}>
-				{isMobile ? (
-					<Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
-				) : (
-					<Tabs items={subPages} selectedItem={tabIndex} setSelectedItem={setTabIndex} />
-				)}
-			</Box>
+        </Typography>
+      </Box>
+      <Box sx={{ marginBottom: isMobile ? "20px" : "0px" }}>
+        {isMobile ? (
+          <Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
+        ) : (
+          <Tabs items={subPages} selectedItem={tabIndex} setSelectedItem={setTabIndex} />
+        )}
+      </Box>
 
-			<TabPanel value={tabIndex} index={0} mt={upMd ? "42px" : "10px"}>
-				<AccordionWrapper
-					content={[
-						[
-							"Что такое корзина?",
-							"Корзина это место где хранятся выбранные  и собранные вами тарифы,оплатить можно в 1 клик или удалить не актуальные.",
-						],
-						[
-							"Какие функции я могу использовать бесплатно?",
-							"Все функции и все продукты, но с ограничением бесплатного периода",
-						],
-						[
-							"Чем могут помочь ваши продукты, конкретно в моём бизнесе?",
-							"Вы можете написать в тех поддержку и наши опытные операторы, проконсультируют вас по этому и многим другим вопросам, при наличии таковых.",
-						],
-						[
-							"Можно ли использовать все ваши продукты не имея в штате программиста?",
-							"Абсолютно все наши продукты работают по принципу no-code.",
-						],
-					]}
-				/>
-			</TabPanel>
-			<TabPanel value={tabIndex} index={1} mt={upMd ? "27px" : "10px"}>
-				<AccordionWrapper
-					content={[
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-					]}
-				/>
-			</TabPanel>
-			<TabPanel value={tabIndex} index={2} mt={upMd ? "27px" : "10px"}>
-				<AccordionWrapper
-					content={[
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-					]}
-				/>
-			</TabPanel>
-			<TabPanel value={tabIndex} index={3} mt={upMd ? "27px" : "10px"}>
-				<AccordionWrapper
-					content={[
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-					]}
-				/>
-			</TabPanel>
-			<TabPanel value={tabIndex} index={4} mt={upMd ? "27px" : "10px"}>
-				<AccordionWrapper
-					content={[
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-					]}
-				/>
-			</TabPanel>
-			<TabPanel value={tabIndex} index={5} mt={upMd ? "27px" : "10px"}>
-				<AccordionWrapper
-					content={[
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-					]}
-				/>
-			</TabPanel>
-			<TabPanel value={tabIndex} index={6} mt={upMd ? "27px" : "10px"}>
-				<AccordionWrapper
-					content={[
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-						["Placeholder", "Placeholder"],
-					]}
-				/>
-			</TabPanel>
-		</SectionWrapper>
-	)
+      <TabPanel value={tabIndex} index={0} mt={upMd ? "42px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            [
+              "Что такое бесплатный тариф?",
+              "Это тариф который доступен каждому пользователю после регистрации, он позволяет пользоваться всеми нашими продуктами 14 дней бесплатно, что позволит в полной мере понять ценность наших сервисов.",
+            ],
+            [
+              "Что такое PenaHub? Куда я попал?",
+              "Это личный кабинет по управлению всеми продуктами экосистемы PenaHub, тут вы можете приобрести любой тип услуги, любого нашего продукта, пройти верификацию как НКО или Юр лицо и получить акт оказанных услуг, так же только в рамках PenaHub вам доступна кастомная настройка тарифа (Мой Тариф).",
+            ],
+            [
+              "Как у вас формируется скидка?",
+              `У нашей скидочной системы 4 уровня: \n 1 уровень. Тариф: чем объемнее тариф, тем больше скидка. \n2 уровень Продукт: если вы через “Мой тариф” берете больше одного вида тарифов,то в зависимости от итоговой суммы в рамках одного продукта, вы получаете увеличение итоговой скидки.\n3 уровень. Корзина: Чем больше товаров в корзине,не важно каких,то в зависимости от суммы получаете увеличенную скидку на разовую покупку.\n4 уровень. Лояльность: считается сумма покупок за всю историю вашего аккаунта и появляется скидка за лояльность,она действует на любые тарифы экосистемы независимо от остальных уровней скидки.`,
+            ],
+            [
+              "Как у вас формируется скидка для НКО?",
+              "Скидка для НКО всегда равна 60%, так как мы проводим политику социальной ответственности.",
+            ],
+            ["Где можно пройти верификацию как НКО или юр лицо?", "Вкладка профиль."],
+            [
+              "Хочу предложить крутую идею или предложение о сотрудничестве, как это сделать?",
+              "Напишите в техническую поддержку и ваша заявка будет прочитана руководством, со 100% вероятностью.",
+            ],
+            [
+              "Хочу заказать у вас разработку, как это сделать?",
+              "Заказать разработку полного цикла или отдельные услуги по web-разработке можно по адресу pena.digital",
+            ],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={1} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={2} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={3} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={4} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={5} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={6} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+    </SectionWrapper>
+  );
 }
 
 interface TabPanelProps {
@@ -167,9 +176,9 @@ interface TabPanelProps {
 }
 
 function TabPanel({ index, value, children, mt }: TabPanelProps) {
-	return (
-		<Box hidden={index !== value} sx={{ mt }}>
-			{children}
-		</Box>
-	)
+  return (
+    <Box hidden={index !== value} sx={{ mt }}>
+      {children}
+    </Box>
+  );
 }