diff --git a/package-lock.json b/package-lock.json
index 83ede66..4e3dedc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "chartjs-plugin-datalabels": "^2.0.0-beta.1",
         "craco-less": "^1.17.1",
         "date-fns": "^2.20.0",
+        "moment": "^2.29.1",
         "react": "^17.0.2",
         "react-datepicker": "^3.8.0",
         "react-dom": "^17.0.2",
diff --git a/package.json b/package.json
index 88a9bfe..7f67ffd 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "chartjs-plugin-datalabels": "^2.0.0-beta.1",
     "craco-less": "^1.17.1",
     "date-fns": "^2.20.0",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-datepicker": "^3.8.0",
     "react-dom": "^17.0.2",
diff --git a/src/components/charts/ChartDeep.jsx b/src/components/charts/ChartDepth.jsx
similarity index 83%
rename from src/components/charts/ChartDeep.jsx
rename to src/components/charts/ChartDepth.jsx
index 2e95fc2..0af149e 100644
--- a/src/components/charts/ChartDeep.jsx
+++ b/src/components/charts/ChartDepth.jsx
@@ -1,6 +1,6 @@
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 
-const defaoultOptionsDeepLabels = {
+const defaultOptionsDepthLabels = {
     borderWidth: 1,
     borderColor: black,
     borderRadius: 4,
@@ -10,7 +10,7 @@ const defaoultOptionsDeepLabels = {
         datasets: [{
             datalabels: {
                 color: '#0f4000'
-              }
+            }
         }]
     }
 }
\ No newline at end of file
diff --git a/src/pages/Archive.jsx b/src/pages/Archive.jsx
index defb0fe..65ee8e9 100644
--- a/src/pages/Archive.jsx
+++ b/src/pages/Archive.jsx
@@ -1,5 +1,5 @@
 
 
-export default function Archive(props){
-    return(<h2>Архив</h2>)
-  }
\ No newline at end of file
+export default function Archive(props) {
+  return (<h2>Архив</h2>)
+}
\ No newline at end of file
diff --git a/src/pages/Files.jsx b/src/pages/Files.jsx
index 7d12948..05d39e7 100644
--- a/src/pages/Files.jsx
+++ b/src/pages/Files.jsx
@@ -1,3 +1,3 @@
-export default function Files(props){
-  return(<h2>Файлы</h2>)
+export default function Files(props) {
+  return (<h2>Файлы</h2>)
 }
\ No newline at end of file
diff --git a/src/pages/Report.jsx b/src/pages/Report.jsx
index 6fe58a0..ed5c046 100644
--- a/src/pages/Report.jsx
+++ b/src/pages/Report.jsx
@@ -1,32 +1,98 @@
 import React, { useState } from "react";
-import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
-import ru from 'date-fns/locale/ru';
-
-import "react-datepicker/dist/react-datepicker.css";
+import {
+  DatePicker,
+  Radio,
+  ConfigProvider,
+  Button,
+  Select,
+  Checkbox,
+  Pagination
+} from 'antd';
+import 'moment/locale/ru';
+import locale from 'antd/lib/locale/ru_RU';
 
 
-registerLocale('ru', ru)
+const { RangePicker } = DatePicker;
+const { Option } = Select;
 
-export default function Report(props){
-    const PeriodOfTime = () => {
-        const [startDate, setStartDate] = useState(new Date());
-        return (
-          <DatePicker 
-          selected={startDate} 
-          onChange={date => setStartDate(date)}
-          locale='ru'
-          />
-        );
-      };
 
-    return(<>
+// Расширение файла для составленного рапорта
+const ExeptionFileChecker = () => {
+  const [value, setValue] = React.useState(1);
+  const onChange = e => {
+    console.log('radio checked', e.target.value);
+    setValue(e.target.value);
+  }
+
+  return (<Radio.Group onChange={onChange} value={value}>
+    <Radio value={1}>PDF</Radio>
+    <Radio value={2}>LAS</Radio>
+  </Radio.Group>
+  )
+}
+
+// Выбор периода времени
+const PeriodOfTime = () => {
+  const [startDate, setStartDate] = useState(new Date());
+
+  return (
+    <ConfigProvider locale={locale}>
+      <RangePicker
+        showTime
+      />
+    </ConfigProvider>
+  )
+}
+
+// Выбор содержимого
+const ContentSelection = () => {
+  function onChange(e) {
+    console.log(`checked = ${e.target.checked}`);
+  }
+
+  return (<>
+    <Checkbox onChange={onChange}>Графики</Checkbox>
+    <Checkbox onChange={onChange}>Сообщения</Checkbox>
+  </>
+  )
+}
+
+// Выбор шага графика
+const GraphicStep = () => {
+  function handleChange(value) {
+    console.log(`selected ${value}`);
+  }
+
+  return (
+    <Select defaultValue="1 minute" style={{ width: 100 }} onChange={handleChange}>
+      <Option value="1 minute">1 минута</Option>
+      <Option value="1 day">1 день</Option>
+      <Option value="1 week">1 неделя</Option>
+    </Select>
+  )
+}
+
+// Экспорт рендера
+export default function Report(props) {
+  return (<>
     <h2>Рапорт</h2>
+    <hr />
     <h3>Выбор за период времени и расширение файла</h3>
-    <select>
-        <option>las</option>
-        <option>pdf</option>
-    </select>
     <PeriodOfTime />
-    </>
-    )
-}
\ No newline at end of file
+    <h3>Шаг графиков</h3>
+    <GraphicStep />
+    {/* <h3>Содержимое отчёта</h3>
+    <ContentSelection /> */}
+    <div></div>
+    <ExeptionFileChecker />
+    <p>*Предполагаемое колличество страниц</p>
+    <hr />
+    <div>
+      <Button type="primary" style={{ display: 'flex', alignItems: 'center', padding: '20px', borderRadius: '5px' }}>Получить рапорт</Button>
+    </div>
+    
+  </>
+  )
+}
+
+// TODO ограничить датапикер по дате за 3 дня до