diff --git a/src/components/ChartTimeOnlineFooter.jsx b/src/components/ChartTimeOnlineFooter.jsx
index 4864e67..481e09c 100644
--- a/src/components/ChartTimeOnlineFooter.jsx
+++ b/src/components/ChartTimeOnlineFooter.jsx
@@ -32,7 +32,7 @@ export const ChartTimeOnlineFooter = (props) =>{
 
   if(popContent)
     spField = <Popover content={popContent}>
-      <div style={{display:"flex"}}>
+      <div className="menu_title">
         <ControlOutlined className='display_label'/>
         {spField}
       </div>
diff --git a/src/components/ModeDisplay.jsx b/src/components/ModeDisplay.jsx
index f887aca..bc63063 100644
--- a/src/components/ModeDisplay.jsx
+++ b/src/components/ModeDisplay.jsx
@@ -20,8 +20,8 @@ export const ModeDisplay = (props)=>{
       value = modeNames[index] ?? index
   }
 
-  return(<>
+  return(<div className="display_header">
     <span className="display_label">Режим:</span>
     <span className="display_value">{value}</span>
-  </>)
+  </div>)
 }
\ No newline at end of file
diff --git a/src/components/Notification.jsx b/src/components/Notification.jsx
new file mode 100644
index 0000000..1608951
--- /dev/null
+++ b/src/components/Notification.jsx
@@ -0,0 +1,24 @@
+import { notification } from 'antd';
+
+const typeDictionary = {
+  'error': 'Ошибка',
+  'warning': 'Предупрежение',
+  'info': 'Информация'
+
+}
+/**
+ * Вызов оповещений всплывающим окошком.
+ * @param body string или ReactNode
+ * @param type для параметра типа. Допустимые значение 'error', 'warning', 'info'
+ */
+export default function Notification(body, type='info'){
+
+    notification.info({
+      description: body,
+      message: typeDictionary[type],
+      type,
+      placement: "bottomRight",
+      duration: 10,
+    })
+
+}
\ No newline at end of file
diff --git a/src/components/Well.jsx b/src/components/Well.jsx
index 918465d..9ee08b2 100644
--- a/src/components/Well.jsx
+++ b/src/components/Well.jsx
@@ -18,7 +18,7 @@ export default function Well() {
       <Menu
         mode="horizontal"
         selectable={false}
-        style={{height: '100%', borderRight: 0}}
+        className="well_menu"
       >
         <Menu.Item key="1" icon={<FundViewOutlined/>}>
           <Link to='telemetry'>Мониторинг</Link>
diff --git a/src/components/WellTreeSelector.jsx b/src/components/WellTreeSelector.jsx
index f8cf7f0..2737030 100644
--- a/src/components/WellTreeSelector.jsx
+++ b/src/components/WellTreeSelector.jsx
@@ -44,7 +44,6 @@ export default function WellTreeSelector(props) {
     try {
       let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
       let wellsTree = groupBy(newWells, 'deposit', 'cluster', 'caption')
-      // setWells( newWells )
       setWellsTree(wellsTree)
     }
     catch (e) {
diff --git a/src/pages/Analysis.jsx b/src/pages/Analysis.jsx
index 57ba47b..1e97cf2 100644
--- a/src/pages/Analysis.jsx
+++ b/src/pages/Analysis.jsx
@@ -1,3 +1,7 @@
-export default function Analysis(props){
-    return(<h2>Анализ</h2>)
-  }
\ No newline at end of file
+export default function Analysis(props) {
+  return (
+    <div className="menu_title">
+      <h2>Анализ</h2>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/Archive.jsx b/src/pages/Archive.jsx
index 0671f1e..1e0e841 100644
--- a/src/pages/Archive.jsx
+++ b/src/pages/Archive.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import {useState, useEffect} from 'react'
 import {
   Button,
   DatePicker,
@@ -7,19 +7,19 @@ import {
   Row,
   Col,
 } from 'antd'
-import { useParams } from 'react-router-dom'
-import { Subscribe } from '../services/signalr'
-import { DataService } from '../services/api'
+import {useParams} from 'react-router-dom'
+import {Subscribe} from '../services/signalr'
+import {DataService} from '../services/api'
 import 'moment/locale/ru'
 import locale from 'antd/lib/locale/ru_RU'
-import { ChartTimeArchive } from '../components/charts/ChartTimeArchive'
-import { Display } from '../components/Display'
-import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter'
-import { UserOfWells } from '../components/UserOfWells'
+import {ChartTimeArchive} from '../components/charts/ChartTimeArchive'
+import {Display} from '../components/Display'
+import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter'
+import {UserOfWells} from '../components/UserOfWells'
 
 
-const { RangePicker } = DatePicker;
-const { Option } = Select;
+const {RangePicker} = DatePicker;
+const {Option} = Select;
 
 // Выбор периода времени
 const PeriodOfTime = () => {
@@ -29,7 +29,7 @@ const PeriodOfTime = () => {
     <ConfigProvider locale={locale}>
       <RangePicker
         showTime
-        style={{ margin: '5px 5px', }}
+        style={{margin: '5px 5px',}}
       />
     </ConfigProvider>
   )
@@ -38,40 +38,41 @@ const PeriodOfTime = () => {
 // Выбор "перьев" для графиков - перенести в шапку графика
 const SelectDataCharts = () => {
   const linesCollection = [
-    { label: "Глубина забоя", xAccessorName: "wellDepth", color: '#a0a' },
-    { label: "Положение инструмента", xAccessorName: "bitDepth", color: '#a0a' },
-    { label: "Высота талевого блока", xAccessorName: "blockPosition", color: '#a0a' },
-    { label: "Талевый блок. Мин положение", xAccessorName: "blockPositionMin", color: '#a0a' },
-    { label: "Талевый блок. Макс положение", xAccessorName: "blockPositionMax", color: '#a0a' },
-    { label: "Скорость талевого блока", xAccessorName: "blockSpeed", color: '#a0a' },
-    { label: "Скорости талевого блока. Задание", xAccessorName: "blockSpeedSp", color: '#a0a' },
-    { label: "Талевый блок. Задание скорости для роторного бурения", xAccessorName: "blockSpeedSpRotor", color: '#a0a' },
-    { label: "Талевый блок. Задание скорости для режима слайда", xAccessorName: "blockSpeedSpSlide", color: '#a0a' },
-    { label: "Талевый блок. Задание скорости для проработки", xAccessorName: "blockSpeedSpDevelop", color: '#a0a' },
-    { label: "Давление", xAccessorName: "pressure", color: '#a0a' },
-    { label: "Давление. Холостой ход", xAccessorName: "pressureIdle", color: '#a0a' },
-    { label: "Давление. Задание", xAccessorName: "pressureSp", color: '#a0a' },
-    { label: "Давление. Задание для роторного бурения", xAccessorName: "pressureSpRotor", color: '#a0a' },
-    { label: "Давление. Задание для режима слайда", xAccessorName: "pressureSpSlide", color: '#a0a' },
-    { label: "Давление. Задание для проработки", xAccessorName: "pressureSpDevelop", color: '#a0a' },
-    { label: "Давление дифф. Аварийное макс.", xAccessorName: "pressureDeltaLimitMax", color: '#a0a' },
-    { label: "Осевая нагрузка", xAccessorName: "axialLoad", color: '#a0a' },
-    { label: "Осевая нагрузка. Задание", xAccessorName: "axialLoadSp", color: '#a0a' },
-    { label: "Осевая нагрузка. Аварийная макс.", xAccessorName: "axialLoadLimitMax", color: '#a0a' },
-    { label: "Вес на крюке", xAccessorName: "hookWeight", color: '#a0a' },
-    { label: "Вес на крюке. Холостой ход", xAccessorName: "hookWeightIdle", color: '#a0a' },
-    { label: "Вес на крюке. Посадка", xAccessorName: "hookWeightLimitMin", color: '#a0a' },
-    { label: "Вес на крюке. Затяжка", xAccessorName: "hookWeightLimitMax", color: '#a0a' },
-    { label: "Момент на роторе", xAccessorName: "rotorTorque", color: '#a0a' },
-    { label: "Момент на роторе. Холостой ход", xAccessorName: "rotorTorqueIdle", color: '#a0a' },
-    { label: "Момент на роторе. Задание", xAccessorName: "rotorTorqueSp", color: '#a0a' },
-    { label: "Момент на роторе. Аварийный макс.", xAccessorName: "rotorTorqueLimitMax", color: '#a0a' },
-    { label: "Обороты ротора", xAccessorName: "rotorSpeed", color: '#a0a' },
-    { label: "Расход", xAccessorName: "flow", color: '#a0a' },
-    { label: "Расход. Холостой ход", xAccessorName: "flowIdle", color: '#a0a' },
-    { label: "Расход. Аварийный макс.", xAccessorName: "flowDeltaLimitMax", color: '#a0a' },
+    {label: "Глубина забоя", xAccessorName: "wellDepth", color: '#a0a'},
+    {label: "Положение инструмента", xAccessorName: "bitDepth", color: '#a0a'},
+    {label: "Высота талевого блока", xAccessorName: "blockPosition", color: '#a0a'},
+    {label: "Талевый блок. Мин положение", xAccessorName: "blockPositionMin", color: '#a0a'},
+    {label: "Талевый блок. Макс положение", xAccessorName: "blockPositionMax", color: '#a0a'},
+    {label: "Скорость талевого блока", xAccessorName: "blockSpeed", color: '#a0a'},
+    {label: "Скорости талевого блока. Задание", xAccessorName: "blockSpeedSp", color: '#a0a'},
+    {label: "Талевый блок. Задание скорости для роторного бурения", xAccessorName: "blockSpeedSpRotor", color: '#a0a'},
+    {label: "Талевый блок. Задание скорости для режима слайда", xAccessorName: "blockSpeedSpSlide", color: '#a0a'},
+    {label: "Талевый блок. Задание скорости для проработки", xAccessorName: "blockSpeedSpDevelop", color: '#a0a'},
+    {label: "Давление", xAccessorName: "pressure", color: '#a0a'},
+    {label: "Давление. Холостой ход", xAccessorName: "pressureIdle", color: '#a0a'},
+    {label: "Давление. Задание", xAccessorName: "pressureSp", color: '#a0a'},
+    {label: "Давление. Задание для роторного бурения", xAccessorName: "pressureSpRotor", color: '#a0a'},
+    {label: "Давление. Задание для режима слайда", xAccessorName: "pressureSpSlide", color: '#a0a'},
+    {label: "Давление. Задание для проработки", xAccessorName: "pressureSpDevelop", color: '#a0a'},
+    {label: "Давление дифф. Аварийное макс.", xAccessorName: "pressureDeltaLimitMax", color: '#a0a'},
+    {label: "Осевая нагрузка", xAccessorName: "axialLoad", color: '#a0a'},
+    {label: "Осевая нагрузка. Задание", xAccessorName: "axialLoadSp", color: '#a0a'},
+    {label: "Осевая нагрузка. Аварийная макс.", xAccessorName: "axialLoadLimitMax", color: '#a0a'},
+    {label: "Вес на крюке", xAccessorName: "hookWeight", color: '#a0a'},
+    {label: "Вес на крюке. Холостой ход", xAccessorName: "hookWeightIdle", color: '#a0a'},
+    {label: "Вес на крюке. Посадка", xAccessorName: "hookWeightLimitMin", color: '#a0a'},
+    {label: "Вес на крюке. Затяжка", xAccessorName: "hookWeightLimitMax", color: '#a0a'},
+    {label: "Момент на роторе", xAccessorName: "rotorTorque", color: '#a0a'},
+    {label: "Момент на роторе. Холостой ход", xAccessorName: "rotorTorqueIdle", color: '#a0a'},
+    {label: "Момент на роторе. Задание", xAccessorName: "rotorTorqueSp", color: '#a0a'},
+    {label: "Момент на роторе. Аварийный макс.", xAccessorName: "rotorTorqueLimitMax", color: '#a0a'},
+    {label: "Обороты ротора", xAccessorName: "rotorSpeed", color: '#a0a'},
+    {label: "Расход", xAccessorName: "flow", color: '#a0a'},
+    {label: "Расход. Холостой ход", xAccessorName: "flowIdle", color: '#a0a'},
+    {label: "Расход. Аварийный макс.", xAccessorName: "flowDeltaLimitMax", color: '#a0a'},
   ]
   const children = linesCollection.map((line) => (<Option key={line.xAccessorName}>{line.label}</Option>))
+
   function handleChange(value) {
     console.log(`selected ${value}`);
   }
@@ -80,7 +81,7 @@ const SelectDataCharts = () => {
     <Select
       mode="multiple"
       allowClear
-      style={{ width: '50%' }}
+      style={{width: '50%'}}
       placeholder="Выберите значения"
       defaultValue={["wellDepth"]}
       onChange={handleChange}
@@ -90,7 +91,7 @@ const SelectDataCharts = () => {
   )
 }
 
-const Column = ({ lineGroup, data, interval }) => {
+const Column = ({lineGroup, data, interval}) => {
   let lines = [lineGroup.linePv]
 
   if (lineGroup.lineSp)
@@ -108,12 +109,12 @@ const Column = ({ lineGroup, data, interval }) => {
       <Display
         label={lineGroup.label}
         value={pv}
-        suffix={lineGroup.linePv?.units} />
+        suffix={lineGroup.linePv?.units}/>
       <ChartTimeArchive
         data={data}
         yDisplay={lineGroup.yDisplay}
         lines={lines}
-        interval={interval} />
+        interval={interval}/>
       <ChartTimeOnlineFooter
         data={dataLast}
         {...lineGroup} />
@@ -123,7 +124,7 @@ const Column = ({ lineGroup, data, interval }) => {
 const paramsGroups = []
 
 export default function Archive(props) {
-  let { id } = useParams();
+  let {id} = useParams();
   const [saubData, setSaubData] = useState([])
   const [chartInterval, setChartInterval] = useState(600)
 
@@ -146,42 +147,40 @@ export default function Archive(props) {
 
   const colSpan = 24 / (paramsGroups.length)
 
-  return (<>
-    <div style={{ display: 'flex' }}>
+  return (<div className="content-sheet">
+    <div className="menu_title">
       <h2>Архив</h2>
-      <span style={{ flexGrow: 10 }}></span>
-      <UserOfWells data={saubData} />
+      <span style={{flexGrow: 10}}></span>
+      <UserOfWells data={saubData}/>
     </div>
-    <hr />
-    <Button type="primary" style={{
-      borderRadius: '5px',
-      font: 'bold',
-      textAlign: 'center',
-      margin: '5px 5px',
-    }}>Добавить график</Button>
-    <PeriodOfTime />
-    <SelectDataCharts />
-    <Row style={{ marginBottom: '1rem' }}>
-      <Col>
-        Интервал:&nbsp;
-        <Select defaultValue="600" onChange={setChartInterval}>
-          <Option value='600'>10 минут</Option>
-          <Option value='1800'>30 минут</Option>
-          <Option value='3600'>1 час</Option>
-          <Option value='21600'>6 час</Option>
-          <Option value='86400'>1 день</Option>
-        </Select>
-      </Col>
-    </Row>
-    <Row>
-      <Col span={24 - 2}>
-        <Row>
-          {paramsGroups.map(group =>
-            <Col span={colSpan} className='border_small' key={group.label}>
-              <Column data={saubData} lineGroup={group} interval={chartInterval} />
-            </Col>)}
-        </Row>
-      </Col>
-    </Row>
-  </>)
+    <hr/>
+    <div className="content-sheet">
+      <Button type="primary" style={{
+        borderRadius: '5px',
+        font: 'bold',
+        textAlign: 'center',
+        margin: '5px 5px',
+      }}>Добавить график</Button>
+      Интервал:&nbsp;
+      <Select defaultValue="600" onChange={setChartInterval}>
+        <Option value='600'>10 минут</Option>
+        <Option value='1800'>30 минут</Option>
+        <Option value='3600'>1 час</Option>
+        <Option value='21600'>6 час</Option>
+        <Option value='86400'>1 день</Option>
+      </Select>
+      <SelectDataCharts/>
+      <PeriodOfTime/>
+      <Row>
+        <Col span={24 - 2}>
+          <Row>
+            {paramsGroups.map(group =>
+              <Col span={colSpan} className='border_small' key={group.label}>
+                <Column data={saubData} lineGroup={group} interval={chartInterval}/>
+              </Col>)}
+          </Row>
+        </Col>
+      </Row>
+    </div>
+  </div>)
 }
\ No newline at end of file
diff --git a/src/pages/Files.jsx b/src/pages/Files.jsx
index 05d39e7..360b9eb 100644
--- a/src/pages/Files.jsx
+++ b/src/pages/Files.jsx
@@ -1,3 +1,7 @@
 export default function Files(props) {
-  return (<h2>Файлы</h2>)
+  return (
+    <div className="menu_title">
+      <h2>Файлы</h2>
+    </div>
+  )
 }
\ No newline at end of file
diff --git a/src/pages/Header.jsx b/src/pages/Header.jsx
index 3170b0d..34b04e0 100644
--- a/src/pages/Header.jsx
+++ b/src/pages/Header.jsx
@@ -1,6 +1,5 @@
-import { useState } from 'react';
 import { Layout, Button } from 'antd'
-import { UserOutlined, MenuOutlined } from '@ant-design/icons'
+import { UserOutlined } from '@ant-design/icons'
 import logo from '../images/logo_32.png'
 import { Link } from "react-router-dom"
 import WellTreeSelector from '../components/WellTreeSelector'
@@ -8,7 +7,6 @@ import WellTreeSelector from '../components/WellTreeSelector'
 const { Header } = Layout
 
 export default function PageHeader(props){
-  const [sidebarVisible, setSidebarVisible] = useState(true)
   const login = localStorage['login']
 
   let handleLogout = () => {
@@ -18,8 +16,7 @@ export default function PageHeader(props){
   
     return(
         <Layout>
-            <Header className="header">        
-                <Button icon={<MenuOutlined />} onClick={()=>setSidebarVisible(!sidebarVisible)}/>
+            <Header className="header">
                 <img src={logo} alt="АСБ" className="logo"/>
                 <WellTreeSelector />
                 <h1 className="title">Мониторинг</h1>
diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx
index 6761330..4eee5bd 100644
--- a/src/pages/Main.jsx
+++ b/src/pages/Main.jsx
@@ -1,20 +1,19 @@
-import { Layout, } from 'antd'
+import {Layout} from 'antd'
 import Wells from './Wells'
 import PageHeader from './Header'
 import Well from "../components/Well";
 import {Redirect, Route, Switch} from "react-router-dom";
+import Notification from "../components/Notification";
 
-const { Content } = Layout
+const {Content} = Layout
 
-export default function Main(){
+export default function Main() {
 
-  return(
+  return (
     <Content>
-      <PageHeader />
+      <PageHeader/>
       <Layout>
-        <Content className="site-layout-background sheet"
-                 style={{ marginTop: '0',
-                          paddingTop: '0'}}>
+        <Content className="site-layout-background sheet well_menu">
           <Switch>
             <Route path="/well/:id/">
               <Well/>
@@ -26,8 +25,8 @@ export default function Main(){
               <Redirect to={{pathname: `/well`}}/>
             </Route>
           </Switch>
-          </Content>
+        </Content>
       </Layout>
     </Content>
-  );
+  )
 }
diff --git a/src/pages/Messages.jsx b/src/pages/Messages.jsx
index b58da10..18c8afd 100644
--- a/src/pages/Messages.jsx
+++ b/src/pages/Messages.jsx
@@ -1,18 +1,19 @@
-import {  Table } from 'antd';
-import { MessageService } from '../services/api'
-import { useState, useEffect } from 'react'
-import { useParams } from 'react-router-dom'
-import { Subscribe } from '../services/signalr'
+import {Table} from 'antd';
+import {MessageService} from '../services/api'
+import {useState, useEffect} from 'react'
+import {useParams} from 'react-router-dom'
+import {Subscribe} from '../services/signalr'
 import Loader from '../components/Loader'
 import moment from 'moment';
 import '../styles/message.css'
+import Notification from '../components/Notification'
 
 
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
-  1: {title:'Авария'},
-  2: {title:'Предупреждение'},
-  3: {title:'Информация'},
+  1: {title: 'Авария'},
+  2: {title: 'Предупреждение'},
+  3: {title: 'Информация'},
 }
 
 // Конфигурация таблицы
@@ -48,8 +49,8 @@ const columns = [
 ];
 
 // Данные для таблицы
-export default function Messages(props) {
-  let { id } = useParams()
+export default function Messages() {
+  let {id} = useParams()
   const [messages, setMessages] = useState([])
   const [loader] = useState(false)
 
@@ -60,9 +61,13 @@ export default function Messages(props) {
   }
 
   useEffect(() => {
-    MessageService.getMessage(id)
-      .then(handleReceiveMessages)
-      .catch(error => console.error(error))
+      MessageService.getMessage(id)
+        .then(handleReceiveMessages)
+        .catch ((ex) => {
+      Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
+      console.log(ex)
+    })
+
     let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
     return () => {
       unSubscribeMessagesHub()
@@ -70,19 +75,19 @@ export default function Messages(props) {
   }, [id]);
 
   return (
-  <>
-    <h2>Сообщения</h2>
-    <hr />
-    <Table
-      columns={columns}
-      dataSource={messages}
-      rowClassName={(record) => `event_message_${record.categoryId}`}
-      size={'small'}
-      pagination={{ pageSize: 10 }}
-      rowKey={(record) => record.id}
-    />
-    {loader && <Loader />}
-  </>
+    <>
+      <h2>Сообщения</h2>
+      <hr/>
+      <Table
+        columns={columns}
+        dataSource={messages}
+        rowClassName={(record) => `event_message_${record.categoryId} event_message`}
+        size={'small'}
+        pagination={{pageSize: 28}}
+        rowKey={(record) => record.id}
+      />
+      {loader && <Loader/>}
+    </>
   )
 }
 
diff --git a/src/pages/Report.jsx b/src/pages/Report.jsx
index f437169..a55fcd5 100644
--- a/src/pages/Report.jsx
+++ b/src/pages/Report.jsx
@@ -1,4 +1,4 @@
-import React from "react";  // , { useState } 
+import React from "react";
 import {
   DatePicker,
   Radio,
@@ -37,8 +37,6 @@ const PeriodOfTime = () => {
   function disabledDate(current) {
     return current && current < moment().subtract(3, 'days');  // Наверно, не надо)
   }
-  // const [startDate, setStartDate] = useState(new Date());
-  
 
   return (
     <ConfigProvider locale={locale}
@@ -97,12 +95,9 @@ export default function Report(props) {
     <p>*Предполагаемое колличество страниц</p>
     <hr />
     <div>
-      <Button type="primary" style={{
-        display: 'flex',
-        alignItems: 'center',
-        padding: '20px',
-        borderRadius: '5px'
-      }}>Получить рапорт</Button>
+      <Button type="primary" className="submit_button">
+        Получить рапорт
+      </Button>
     </div>
     
   </>
diff --git a/src/pages/TelemetryView.jsx b/src/pages/TelemetryView.jsx
index ce6e0d2..2134664 100644
--- a/src/pages/TelemetryView.jsx
+++ b/src/pages/TelemetryView.jsx
@@ -1,20 +1,19 @@
-import { useState, useEffect } from 'react';
-import { Row, Col, Select, } from 'antd'
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import {Row, Col, Select, Table} from 'antd'
 import { ChartTimeOnline } from '../components/charts/ChartTimeOnline'
+import Loader from '../components/Loader'
 import { ChartTimeOnlineFooter } from '../components/ChartTimeOnlineFooter'
 import { CustomColumn } from '../components/CustomColumn'
 import { UserOfWells } from '../components/UserOfWells'
 import { ModeDisplay } from '../components/ModeDisplay'
 import { Display } from '../components/Display'
+import notify from '../components/Notification'
 import moment from 'moment'
-import { Table } from 'antd';
-import { MessageService } from '../services/api'
-import Loader from '../components/Loader'
-
-import { useParams } from 'react-router-dom'
 import { Subscribe } from '../services/signalr'
-import { DataService } from '../services/api'
-import '../styles/message_telemetry.css'
+import { DataService, MessageService } from '../services/api'
+import '../styles/message.css'
+import Notification from "../components/Notification";
 
 const { Option } = Select
 
@@ -165,13 +164,20 @@ export default function TelemetryView(props) {
   }
 
   useEffect(() => {
-    DataService.getData(id)
-      .then(handleReceiveDataSaub)
-      .catch(error => console.error(error))
-    
-    MessageService.getMessage(id)
-      .then(handleReceiveMessages)
-      .catch(error => console.error(error))
+    try {
+      DataService.getData(id)
+        .then(handleReceiveDataSaub)
+    } catch (ex) {
+      Notification(`Не удалось загрузить данные по скважине ${id}`, 'error')
+    }
+
+    try {
+      MessageService.getMessage(id)
+        .then(handleReceiveMessages)
+    } catch (ex) {
+      Notification(`Не удалось загрузить сообщения по скважине ${id}`, 'error')
+      console.log(ex)
+    }
 
     let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
     let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
@@ -184,11 +190,11 @@ export default function TelemetryView(props) {
   const colSpan = 24 / (paramsGroups.length)
 
   return (<div>
-    {/* <div>Well id: {id}; points count: {saubData.length}</div> */}
     <Row style={{ marginBottom: '1rem' }}>
       <Col>
         <ModeDisplay data={saubData} />
       </Col>
+      <span style={{ flexGrow: 0.1 }}>&nbsp;</span>
       <Col>
         Интервал:&nbsp;
         <Select defaultValue="600" onChange={setChartInterval}>
@@ -199,7 +205,7 @@ export default function TelemetryView(props) {
           <Option value='86400'>1 день</Option>
         </Select>
       </Col>
-      <span style={{ flexGrow: 1 }}></span>
+      <span style={{ flexGrow: 1 }}>&nbsp;</span>
       <Col>
         <UserOfWells data={saubData}/>
       </Col>
@@ -221,7 +227,8 @@ export default function TelemetryView(props) {
        showHeader={false}
        columns={columns}
        dataSource={messages}
-       rowClassName={(record) => `event_message_${record.categoryId}`}
+       rowClassName={(record) => `event_message_${record.categoryId} event_message`}
+       className={'message_table'}
        size={'small'}
        pagination={false}
        rowKey={(record) => record.id}
diff --git a/src/services/signalr/index.ts b/src/services/signalr/index.ts
index e25e27c..a226de6 100644
--- a/src/services/signalr/index.ts
+++ b/src/services/signalr/index.ts
@@ -5,7 +5,7 @@ import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
 
 const ConnectionOptions = { 
   accessTokenFactory: () => localStorage['token'],
-  //transport:1,
+  transport:1,
 }
 
 const Connection = new HubConnectionBuilder()
@@ -15,16 +15,6 @@ const Connection = new HubConnectionBuilder()
 
 let connectionPromise: Promise<void>
 
-// const GetConnectionAsync = async () => {
-//   try {
-//     await Connection.start();
-//     console.log(Connection.state);
-//   } catch (err) {
-//     console.log(err);
-//   }
-// }
-
-
 const GetConnectionAsync = async () => {
     if (Connection.state === HubConnectionState.Disconnected)
       connectionPromise = Connection.start()
@@ -35,32 +25,6 @@ const GetConnectionAsync = async () => {
     return Connection
   }
 
-
-// const GetConnectionAsync = async () => {
-//   if (Connection.state === HubConnectionState.Disconnected)
-//     connectionPromise = Connection.start()
-
-//   if (Connection.state !== HubConnectionState.Connected)
-//     await connectionPromise
-
-//   return Connection
-// }
-
-// const GetConnectionAsync = async ()=>{
-//   if(Connection.state === HubConnectionState.Disconnected)
-//     await Connection.start()
-
-//   if(Connection.state === HubConnectionState.Connecting)
-//     await Connection.onreconnected
-
-//   // if(Connection.state === HubConnectionState.Disconnecting)
-//   //   await Connection.onclose
-
-//   // if(Connection.state === HubConnectionState.Connected)
-//     console.log(Connection.state)
-//     return Connection
-// }
-
 type handlerFunction = (...args: any[]) => void;
 
 type cleanFunction = (...args: any[]) => void;
diff --git a/src/styles/App.less b/src/styles/App.less
index 8da48d5..7a305d0 100644
--- a/src/styles/App.less
+++ b/src/styles/App.less
@@ -11,6 +11,11 @@
 
 #root, .app{min-height:100%;}
 
+html {
+  display: flex;
+  height: 100%;
+}
+
 .login_page{
   position: absolute;
   height:100%;
@@ -28,7 +33,7 @@
 .header {
   display: flex;
   align-items: center;
-  padding: 4px 24px;
+  //padding: 4px 24px;
 }
 
 .header .logo {
@@ -36,14 +41,15 @@
   border-radius: 32px;
   padding: 8px 24px;
   margin: 8px 10px;
-  box-shadow: #fff 2px;
+  box-shadow: 0 0 2px #fff;
 }
 
 .header .title{
   flex-grow: 1;
   color: #fff;
-  text-align: center;
-  justify-content: baseline;
+  text-align: start;
+  justify-content: start;
+  margin-left: 100px;
 }
 
 .header button{
@@ -53,9 +59,8 @@
 }
 
 .sheet{
-  padding: 24px;
-  margin: 8px;
-  min-height: 280;
+  padding: 5px 24px;
+  min-height: 280px;
 }
 
 .site-layout-background {
@@ -71,14 +76,26 @@
   flex-wrap: wrap;
   flex: auto;
 }
+.display_header {
+  font-size: 16px;
+  flex-grow: 1;
+  display: flex;
+}
 
 .display_label{
   font-size: 16px;
   color: rgb(70, 70, 70);
   text-align: left;
-  justify-content: baseline;
+  justify-content: center;
   margin: 1px 1rem 1px 1rem;
   flex: auto;
+  align-items: baseline;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  height: 30px;
 }
 
 .display_value{
@@ -95,7 +112,29 @@
 .display_small_value{
   color: rgb(50, 50, 50);
   text-align: right;
-  justify-content: baseline;
+  justify-content: center;
   margin: 1px 1rem 1px 1rem;
   flex: auto;
 }
+
+.menu_title {
+  display: flex;
+}
+
+.submit_button {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-radius: 5px;
+}
+
+.well_menu {
+  margin-top: 0;
+  padding-top: 0;
+  height: 100%;
+  border-right: 0;
+}
+
+tr.table_row_size {
+  height: 10px;
+}
diff --git a/src/styles/archive_style.css b/src/styles/archive_style.css
new file mode 100644
index 0000000..0a5d44b
--- /dev/null
+++ b/src/styles/archive_style.css
@@ -0,0 +1,3 @@
+.content-sheet {
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index cba84f3..087d9c3 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,3 +1,7 @@
+::-webkit-scrollbar {
+  width: 0;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/src/styles/message.css b/src/styles/message.css
index bcf9f7e..329182b 100644
--- a/src/styles/message.css
+++ b/src/styles/message.css
@@ -1,5 +1,15 @@
-.event_message {
+/*.ant-table.ant-table-small .ant-table-tbody > tr > td {*/
+/*  padding: 0;*/
+/*}*/
+
+/*.ant-table-tbody > tr > td {*/
+/*  border-bottom: 0.5px;*/
+/*}*/
+
+.event_message > td {
   font-size: 14px;
+  padding: 1px !important;
+  border-bottom: 1px !important;
 }
 
 .event_message_off {
@@ -22,11 +32,9 @@
   background: gold;
 }
 
-.event_message_3,
-.event_message_3:hover {
+.event_message_3 {
   color: #c0c0c0;
   background: #505060;
-  height: 1px;
 }
 
 td.ant-table-column-sort {