diff --git a/package.json b/package.json
index 9778089..a3489bc 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@frontend/kitui": "1.0.47",
+    "@frontend/kitui": "1.0.52",
     "@mui/icons-material": "^5.10.14",
     "@mui/material": "^5.10.14",
     "@popperjs/core": "^2.11.8",
diff --git a/src/api/history.ts b/src/api/history.ts
index 460fad0..48a5f04 100644
--- a/src/api/history.ts
+++ b/src/api/history.ts
@@ -12,11 +12,13 @@ type HistoryRecord = {
   id: string;
   isDeleted: boolean;
   key: string;
-  rawDetails: { Key: string; Value: string | number }[];
+  rawDetails: KeyValue[][];
   updatedAt: string;
   userId: string;
 };
 
+type KeyValue = { Key: string; Value: string | number };
+
 export async function getHistory(): Promise<[GetHistoryResponse | null, string?]> {
   try {
     const historyResponse = await makeRequest<never, GetHistoryResponse>({
diff --git a/src/components/CustomAccordion.tsx b/src/components/CustomAccordion.tsx
index b254b34..be1659a 100644
--- a/src/components/CustomAccordion.tsx
+++ b/src/components/CustomAccordion.tsx
@@ -8,9 +8,11 @@ interface Props {
   text: string;
   divide?: boolean;
   price?: number;
+  last?: boolean;
+  first?: boolean;
 }
 
-export default function CustomAccordion({ header, text, divide = false, price }: 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"));
@@ -20,17 +22,13 @@ export default function CustomAccordion({ header, text, divide = false, price }:
     <Box
       sx={{
         backgroundColor: "white",
-        "&:first-of-type": {
-          borderTopLeftRadius: "12px",
-          borderTopRightRadius: "12px",
-        },
-        "&:last-of-type": {
-          borderBottomLeftRadius: "12px",
-          borderBottomRightRadius: "12px",
-        },
-        "&:not(:last-of-type)": {
-          borderBottom: `1px solid ${theme.palette.gray.main}`,
-        },
+        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
diff --git a/src/pages/History/AccordionWrapper.tsx b/src/pages/History/AccordionWrapper.tsx
index e5e8c2d..017c17d 100644
--- a/src/pages/History/AccordionWrapper.tsx
+++ b/src/pages/History/AccordionWrapper.tsx
@@ -1,6 +1,5 @@
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import CustomAccordion from "@components/CustomAccordion";
-import { cardShadow } from "@root/utils/theme";
 
 export type History = {
   title: string;
@@ -11,127 +10,140 @@ export type History = {
   expired?: boolean;
 };
 
+type KeyValue = { Key: string; Value: string | number };
 interface AccordionWrapperProps {
-  content: History[];
+  content: KeyValue[];
+  last?: boolean;
+  first?: boolean;
 }
 
-export default function AccordionWrapper({ content }: AccordionWrapperProps) {
+export default function AccordionWrapper({ content, last, first }: AccordionWrapperProps) {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const upSm = useMediaQuery(theme.breakpoints.up("sm"));
   const isTablet = useMediaQuery(theme.breakpoints.down(900));
   const isMobile = useMediaQuery(theme.breakpoints.down(560));
 
+  const valuesByKey: any = {};
+
+  content.forEach((item) => {
+    valuesByKey[item.Key] = item.Value;
+  });
+
+  const extractDateFromString = (tariffName: string) => {
+    const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
+    return dateMatch ? dateMatch[0] : null;
+  };
+
   return (
     <Box
       sx={{
         overflow: "hidden",
         borderRadius: "12px",
-        boxShadow: cardShadow,
       }}
     >
-      {content.map((accordionItem, index) => (
-        <CustomAccordion
-          key={index}
-          divide
-          text={accordionItem.description}
-          header={
+      <CustomAccordion
+        last={last}
+        first={first}
+        divide
+        text={"Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем"}
+        header={
+          <Box
+            sx={{
+              width: "100%",
+              height: upMd ? "72px" : undefined,
+              padding: "20px 20px 20px 0",
+              display: "flex",
+              justifyContent: "space-between",
+              cursor: "pointer",
+              userSelect: "none",
+              gap: "20px",
+              alignItems: upSm ? "center" : undefined,
+              flexDirection: upSm ? undefined : "column",
+            }}
+          >
             <Box
               sx={{
-                width: "100%",
-                height: upMd ? "72px" : undefined,
-                padding: "20px 20px 20px 0",
                 display: "flex",
-                justifyContent: "space-between",
-                cursor: "pointer",
-                userSelect: "none",
-                gap: "20px",
                 alignItems: upSm ? "center" : undefined,
+                justifyContent: "space-between",
                 flexDirection: upSm ? undefined : "column",
+                gap: upMd ? "40px" : "10px",
               }}
             >
-              <Box
+              <Typography
                 sx={{
-                  display: "flex",
-                  alignItems: upSm ? "center" : undefined,
-                  justifyContent: "space-between",
-                  flexDirection: upSm ? undefined : "column",
-                  gap: upMd ? "40px" : "10px",
+                  width: "110px",
+                  fontSize: upMd ? "20px" : "18px",
+                  lineHeight: upMd ? undefined : "19px",
+                  fontWeight: 500,
+                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.text.secondary,
+                  px: 0,
+                  whiteSpace: "nowrap",
                 }}
               >
-                <Typography
-                  sx={{
-                    width: "110px",
-                    fontSize: upMd ? "20px" : "18px",
-                    lineHeight: upMd ? undefined : "19px",
-                    fontWeight: 500,
-                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.text.secondary,
-                    px: 0,
-                  }}
-                >
-                  {accordionItem.date}
-                </Typography>
+                {extractDateFromString(valuesByKey.createdat)}
+              </Typography>
 
-                <Typography
-                  sx={{
-                    fontSize: upMd ? "18px" : "16px",
-                    lineHeight: upMd ? undefined : "19px",
-                    fontWeight: 500,
-                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                    px: 0,
-                  }}
-                >
-                  {accordionItem.title}
-                </Typography>
-              </Box>
+              <Typography
+                sx={{
+                  fontSize: upMd ? "18px" : "16px",
+                  lineHeight: upMd ? undefined : "19px",
+                  fontWeight: 500,
+                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
+                  px: 0,
+                }}
+              >
+                {valuesByKey.name}
+              </Typography>
+            </Box>
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                flexFlow: "1",
+                flexBasis: "60%",
+              }}
+            >
+              <Typography
+                sx={{
+                  display: upMd ? undefined : "none",
+                  fontSize: upMd ? "18px" : "16px",
+                  lineHeight: upMd ? undefined : "19px",
+                  fontWeight: 400,
+                  color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
+                  px: 0,
+                }}
+              >
+                {valuesByKey.payMethod && <Typography>Способ оплаты: {valuesByKey.payMethod}</Typography>}
+              </Typography>
               <Box
                 sx={{
                   display: "flex",
-                  justifyContent: "space-between",
+                  height: "100%",
                   alignItems: "center",
-                  flexFlow: "1",
-                  flexBasis: "60%",
+                  gap: upSm ? "111px" : "17px",
+                  width: "100%",
+                  maxWidth: isTablet ? null : "160px",
                 }}
               >
                 <Typography
                   sx={{
-                    display: upMd ? undefined : "none",
-                    fontSize: upMd ? "18px" : "16px",
-                    lineHeight: upMd ? undefined : "19px",
-                    fontWeight: 400,
-                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                    px: 0,
+                    marginLeft: isTablet ? (isMobile ? null : "auto") : null,
+                    color: valuesByKey.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
+                    fontSize: upSm ? "20px" : "16px",
+                    fontWeight: 500,
+                    textAlign: "left",
                   }}
                 >
-                  {accordionItem.payMethod && <Typography>Способ оплаты: {accordionItem.payMethod}</Typography>}
+                  {valuesByKey.price} руб.
                 </Typography>
-                <Box
-                  sx={{
-                    display: "flex",
-                    height: "100%",
-                    alignItems: "center",
-                    gap: upSm ? "111px" : "17px",
-                    width: "100%",
-                    maxWidth: isTablet ? null : "160px",
-                  }}
-                >
-                  <Typography
-                    sx={{
-                      marginLeft: isTablet ? (isMobile ? null : "auto") : null,
-                      color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                      fontSize: upSm ? "20px" : "16px",
-                      fontWeight: 500,
-                      textAlign: "left",
-                    }}
-                  >
-                    {accordionItem.info}
-                  </Typography>
-                </Box>
               </Box>
             </Box>
-          }
-        />
-      ))}
+          </Box>
+        }
+      />
     </Box>
   );
 }
diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx
index e6ce43e..716036f 100644
--- a/src/pages/History/index.tsx
+++ b/src/pages/History/index.tsx
@@ -9,9 +9,6 @@ import { Tabs } from "@root/components/Tabs";
 import AccordionWrapper from "./AccordionWrapper";
 import { HISTORY } from "./historyMocks";
 import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
-import { makeRequest, useToken } from "@frontend/kitui";
-import axios from "axios";
-import { getHistory } from "@root/api/history";
 import { useHistoryData } from "@root/utils/hooks/useHistoryData";
 
 const subPages = ["Платежи", "Покупки тарифов", "Окончания тарифов"];
@@ -28,7 +25,7 @@ export default function History() {
   const handleCustomBackNavigation = useHistoryTracker();
 
   if (!error && historyData) {
-    console.log(historyData?.records[0].rawDetails.map((rawDetails) => console.log(rawDetails.Key)));
+    console.log(historyData?.records[0].rawDetails[0].map(({ Key, Value }) => (Key == "id" ? console.log(Value) : "")));
   }
 
   return (
@@ -68,9 +65,13 @@ export default function History() {
       ) : (
         <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
       )}
-      {HISTORY.map((history, index) => (
-        <Box key={index} hidden={selectedItem !== index} sx={{ mt: upMd ? "27px" : "10px" }}>
-          <AccordionWrapper content={history} />
+      {historyData?.records.map(({ rawDetails }, index) => (
+        <Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
+          <AccordionWrapper
+            first={index === 0}
+            last={index === historyData?.records.length - 1}
+            content={rawDetails[0]}
+          />
         </Box>
       ))}
     </SectionWrapper>
diff --git a/src/utils/calcTariffPrices.ts b/src/utils/calcTariffPrices.ts
index 9c2c381..702a4e2 100644
--- a/src/utils/calcTariffPrices.ts
+++ b/src/utils/calcTariffPrices.ts
@@ -1,24 +1,24 @@
 import { Discount, Tariff, findDiscountFactor } from "@frontend/kitui";
 import { calcCart } from "./calcCart/calcCart";
 
-
 export function calcIndividualTariffPrices(
-    tariff: Tariff,
-    discounts: Discount[],
-    purchasesAmount: number,
-    currentTariffs: Tariff[],
+  tariff: Tariff,
+  discounts: Discount[],
+  purchasesAmount: number,
+  currentTariffs: Tariff[]
 ): {
-    priceBeforeDiscounts: number;
-    priceAfterDiscounts: number;
+  priceBeforeDiscounts: number;
+  priceAfterDiscounts: number;
 } {
-    const priceBeforeDiscounts = tariff.price || tariff.privileges.reduce((sum, privilege) => sum + privilege.amount * privilege.price, 0);
-    let priceAfterDiscounts = priceBeforeDiscounts;
+  const priceBeforeDiscounts =
+    tariff.price || tariff.privileges.reduce((sum, privilege) => sum + privilege.amount * privilege.price, 0);
+  let priceAfterDiscounts = priceBeforeDiscounts;
 
-    const cart = calcCart([...currentTariffs, tariff], discounts, purchasesAmount);
+  const cart = calcCart([...currentTariffs, tariff], discounts, purchasesAmount);
 
-    cart.allAppliedDiscounts.forEach(discount => {
-        priceAfterDiscounts *= findDiscountFactor(discount);
-    });
+  cart.allAppliedDiscounts.forEach((discount) => {
+    priceAfterDiscounts *= findDiscountFactor(discount);
+  });
 
-    return { priceBeforeDiscounts, priceAfterDiscounts };
+  return { priceBeforeDiscounts, priceAfterDiscounts };
 }
diff --git a/yarn.lock b/yarn.lock
index 524edb6..9efaaf8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1532,10 +1532,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@frontend/kitui@1.0.47":
-  version "1.0.47"
-  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.47.tgz#d71c945f36c7436cd59191922335a3b6a1c545fa"
-  integrity sha1-1xyUXzbHQ2zVkZGSIzWjtqHFRfo=
+"@frontend/kitui@1.0.52":
+  version "1.0.52"
+  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.52.tgz#3b1c28f889da80ab325ab2b511108632fa925f1c"
+  integrity sha1-Oxwo+InagKsyWrK1ERCGMvqSXxw=
   dependencies:
     immer "^10.0.2"
     reconnecting-eventsource "^1.6.2"