diff --git a/src/pages/Telemetry/Messages.jsx b/src/pages/Telemetry/Messages.jsx
index 7ad92e6..824e38d 100755
--- a/src/pages/Telemetry/Messages.jsx
+++ b/src/pages/Telemetry/Messages.jsx
@@ -11,7 +11,7 @@ import { makeColumn, makeDateColumn, makeNumericColumn, makeNumericSorter, makeT
 import { wrapPrivateComponent } from '@utils'
 import { MessageService } from '@api'
 
-import '@styles/message.css'
+import '@styles/message.less'
 
 const pageSize = 26
 const { Search } = Input
@@ -103,22 +103,25 @@ const Messages = memo(() => {
   return (
     <>
       <div className={'filter-group'}>
-        <h3 className={'filter-group-heading'}>Фильтр сообщений</h3>
-        <Select
-          mode={'multiple'}
-          allowClear
-          placeholder={'Фильтр сообщений'}
-          className={'filter-selector'}
-          value={categories}
-          onChange={setCategories}>
-          {children}
-        </Select>
-        <RangePicker showTime onChange={(range) => setRange(range)} />
-        <Search
-          className={'filter-selector'}
-          placeholder={'Фильтр сообщений по тексту'}
-          onSearch={onChangeSearchString}
-        />
+        <h3 className={'head'}>Фильтр сообщений</h3>
+        <div className={'body'}>
+          <Select
+            allowClear
+            mode={'multiple'}
+            className={'type-filter'}
+            placeholder={'Фильтр сообщений'}
+            onChange={setCategories}
+            value={categories}
+          >
+            {children}
+          </Select>
+          <RangePicker showTime onChange={(range) => setRange(range)} />
+          <Search
+            className={'filter-selector'}
+            placeholder={'Фильтр сообщений по тексту'}
+            onSearch={onChangeSearchString}
+          />
+        </div>
       </div>
       <LoaderPortal show={showLoader}>
         <Table
diff --git a/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx b/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx
index c43a138..910aac7 100755
--- a/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx
+++ b/src/pages/Telemetry/TelemetryView/ActiveMessagesOnline.jsx
@@ -9,7 +9,7 @@ import { MessageService } from '@api'
 
 import { makeMessageColumns } from '../Messages'
 
-import '@styles/message.css'
+import '@styles/message.less'
 
 export const ActiveMessagesOnline = memo(({ well: givenWell }) => {
   const [messages, setMessages] = useState([])
diff --git a/src/pages/Telemetry/TelemetryView/index.jsx b/src/pages/Telemetry/TelemetryView/index.jsx
index ca1bae7..86fd43d 100755
--- a/src/pages/Telemetry/TelemetryView/index.jsx
+++ b/src/pages/Telemetry/TelemetryView/index.jsx
@@ -32,7 +32,7 @@ import SpinPicEnabled from '@images/SpinEnabled.png'
 import SpinPicDisabled from '@images/SpinDisabled.png'
 
 import '@styles/monitoring.less'
-import '@styles/message.css'
+import '@styles/message.less'
 
 const { Option } = Select
 
diff --git a/src/styles/App.less b/src/styles/App.less
index fa98cb8..c4399b5 100755
--- a/src/styles/App.less
+++ b/src/styles/App.less
@@ -140,9 +140,3 @@ html {
 tr.table_row_size {
   height: 10px;
 }
-
-.filter-selector {
-  width: 25%;
-  margin-right: 5px;
-  margin-left: 5px;
-}
diff --git a/src/styles/message.css b/src/styles/message.less
old mode 100755
new mode 100644
similarity index 77%
rename from src/styles/message.css
rename to src/styles/message.less
index f4e4e33..513d06f
--- a/src/styles/message.css
+++ b/src/styles/message.less
@@ -41,11 +41,25 @@
 
 .filter-group {
   margin: 0 0 5px 0;
-}
 
-.filter-group-heading {
-  margin: 5px auto;
-  align-items: center;
+  & .head {
+    margin: 5px auto;
+    align-items: center;
+  }
+
+  & .body {
+    width: 100%;
+    display: flex;
+    gap: 5px;
+
+    & .type-filter {
+      width: 25%;
+    }
+
+    & .filter-selector {
+      flex: 1;
+    }
+  }
 }
 
 td.ant-table-column-sort {