diff --git a/src/components/CompanyView.jsx b/src/components/CompanyView.jsx
deleted file mode 100644
index 195a490..0000000
--- a/src/components/CompanyView.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import {Tooltip} from 'antd'
-import {BankOutlined} from '@ant-design/icons'
-import {Grid, GridItem} from './Grid'
-
-export const CompanyView = ({company}) => {
-  if(!company)
-    return <Tooltip title='нет данных'>-</Tooltip>
-
-  const displayName = company?.caption
-
-  const tooltipInfo = <Grid columnGap='8px'>
-    <GridItem row={1} col={1}>
-      тип:
-    </GridItem>
-    <GridItem row={1} col={2}>
-      {company?.companyTypeCaption}
-    </GridItem>
-  </Grid>
-
-  return <Tooltip title={tooltipInfo}>
-    <BankOutlined style={{marginRight:8}}/>
-    {displayName}
-  </Tooltip>
-  
-}
\ No newline at end of file
diff --git a/src/components/Mark.jsx b/src/components/Mark.jsx
deleted file mode 100644
index c865eda..0000000
--- a/src/components/Mark.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import {Tooltip, Tag, Typography, Popconfirm, Button } from 'antd'
-import {UserView} from './UserView'
-
-const markTypes = {
-  0 : {color:"orange", text : "неизвестно"},
-  1 : {color:"green", text : "согласовано"},
-}
-
-const {Text} = Typography
-
-export const Mark = ({mark, onDelete}) => {
-  const markType = markTypes[mark.idMarkType]??markTypes[0]
-  return <Tooltip title={<UserView user={mark.user}/>}>
-    <Tag color={markType.color}>
-      <Text delete={mark?.isDeleted}>
-        {`${markType.text} ${new Date(mark.dateCreated).toLocaleString()}`}
-      </Text>
-      {(!mark?.isDeleted)&&
-        <Popconfirm title="Отозвать согласование?" onConfirm={onDelete}>
-          <Button type="link">x</Button>
-        </Popconfirm>
-      }
-    </Tag >
-  </Tooltip>
-}
\ No newline at end of file
diff --git a/src/components/UserView.tsx b/src/components/UserView.tsx
deleted file mode 100644
index 58654e9..0000000
--- a/src/components/UserView.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {Tooltip} from 'antd'
-import { UserOutlined } from '@ant-design/icons'
-import { Grid, GridItem } from './Grid'
-import { UserDto } from '../services/api'
-
-interface UserViewProps {
-  user: UserDto
-}
-
-export const UserView = ({ user } : UserViewProps) => (user ? (
-    <Tooltip title={(
-      <Grid style={{ columnGap: '8px' }}>
-        <GridItem row={1} col={1}>Фамилия:</GridItem>
-        <GridItem row={1} col={2}>{user?.surname}</GridItem>
-        <GridItem row={2} col={1}>Имя:</GridItem>
-        <GridItem row={2} col={2}>{user?.name}</GridItem>
-        <GridItem row={3} col={1}>Отчество:</GridItem>
-        <GridItem row={3} col={2}>{user?.patronymic}</GridItem>
-        <GridItem row={4} col={1}>Компания:</GridItem>
-        <GridItem row={4} col={2}>{user?.company?.caption}</GridItem>
-      </Grid>
-    )}>
-      <UserOutlined style={{ marginRight: 8 }}/>
-      {user?.login}
-    </Tooltip>
-  ) : (
-    <Tooltip title='нет пользователя'>-</Tooltip>
-  )
-)
diff --git a/src/components/Views/CompanyView.tsx b/src/components/Views/CompanyView.tsx
new file mode 100644
index 0000000..e7b6eb1
--- /dev/null
+++ b/src/components/Views/CompanyView.tsx
@@ -0,0 +1,23 @@
+import { memo } from 'react'
+import { Tooltip } from 'antd'
+import { BankOutlined } from '@ant-design/icons'
+import { CompanyDto } from '../../services/api'
+import { Grid, GridItem } from '../Grid'
+
+export type CompanyViewProps = {
+  company?: CompanyDto
+}
+
+export const CompanyView = memo<CompanyViewProps>(({ company }) => company ? (
+  <Tooltip title={
+    <Grid style={{ columnGap: '8px' }}>
+      <GridItem row={1} col={1}>тип:</GridItem>
+      <GridItem row={1} col={2}>{company?.companyTypeCaption}</GridItem>
+    </Grid>
+  }>
+    <BankOutlined style={{ marginRight: 8 }}/>
+    {company?.caption}
+  </Tooltip>
+) : (
+  <Tooltip title='нет данных'>-</Tooltip>
+))
diff --git a/src/components/Views/MarkView.tsx b/src/components/Views/MarkView.tsx
new file mode 100644
index 0000000..b9d4a9f
--- /dev/null
+++ b/src/components/Views/MarkView.tsx
@@ -0,0 +1,32 @@
+import { Tooltip, Tag, Typography, Popconfirm, Button } from 'antd'
+import { memo } from 'react'
+import { FileMarkDto } from '../../services/api'
+import { UserView } from './UserView'
+
+const markTypes: { [id: number]: {color: string, text: string} } = {
+  0: {color: 'orange', text: 'неизвестно'},
+  1: {color: 'green', text: 'согласовано'},
+}
+
+const { Text } = Typography
+
+export type MarkViewProps = {
+  mark: FileMarkDto
+  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void
+}
+
+export const MarkView = memo<MarkViewProps>(({ mark, onDelete }) => {
+  const markType = markTypes[mark.idMarkType ?? 0] ?? markTypes[0]
+  return <Tooltip title={<UserView user={mark.user}/>}>
+    <Tag color={markType.color}>
+      <Text delete={mark?.isDeleted}>
+        {`${markType.text} ${new Date(mark.dateCreated ?? 0).toLocaleString()}`}
+      </Text>
+      {!mark?.isDeleted && (
+        <Popconfirm title='Отозвать согласование?' onConfirm={onDelete}>
+          <Button type='link'>x</Button>
+        </Popconfirm>
+      )}
+    </Tag >
+  </Tooltip>
+})
diff --git a/src/components/Views/UserView.tsx b/src/components/Views/UserView.tsx
new file mode 100644
index 0000000..445f7d5
--- /dev/null
+++ b/src/components/Views/UserView.tsx
@@ -0,0 +1,32 @@
+import { memo } from 'react'
+import { Tooltip } from 'antd'
+import { UserOutlined } from '@ant-design/icons'
+import { UserDto } from '../../services/api'
+import { Grid, GridItem } from '../Grid'
+
+export type UserViewProps = {
+  user?: UserDto
+}
+
+export const UserView = memo<UserViewProps>(({ user }) => user ? (
+  <Tooltip title={(
+    <Grid style={{ columnGap: '8px' }}>
+      <GridItem row={1} col={1}>Фамилия:</GridItem>
+      <GridItem row={1} col={2}>{user?.surname}</GridItem>
+
+      <GridItem row={2} col={1}>Имя:</GridItem>
+      <GridItem row={2} col={2}>{user?.name}</GridItem>
+
+      <GridItem row={3} col={1}>Отчество:</GridItem>
+      <GridItem row={3} col={2}>{user?.patronymic}</GridItem>
+
+      <GridItem row={4} col={1}>Компания:</GridItem>
+      <GridItem row={4} col={2}>{user?.company?.caption}</GridItem>
+    </Grid>
+  )}>
+    <UserOutlined style={{ marginRight: 8 }}/>
+    {user?.login}
+  </Tooltip>
+) : (
+  <Tooltip title='нет пользователя'>-</Tooltip>
+))
diff --git a/src/components/Views/index.ts b/src/components/Views/index.ts
new file mode 100644
index 0000000..c74969e
--- /dev/null
+++ b/src/components/Views/index.ts
@@ -0,0 +1,7 @@
+export type { CompanyViewProps } from './CompanyView'
+export type { MarkViewProps } from './MarkView'
+export type { UserViewProps } from './UserView'
+
+export { CompanyView } from './CompanyView'
+export { MarkView } from './MarkView'
+export { UserView } from './UserView'
diff --git a/src/pages/Documents/DocumentsTemplate.jsx b/src/pages/Documents/DocumentsTemplate.jsx
index a7908d8..0bbaa33 100644
--- a/src/pages/Documents/DocumentsTemplate.jsx
+++ b/src/pages/Documents/DocumentsTemplate.jsx
@@ -6,8 +6,7 @@ import { invokeWebApiWrapperAsync, downloadFile, formatBytes } from '../../compo
 import { EditableTable, makePaginationObject } from '../../components/Table'
 import { UploadForm } from '../../components/UploadForm'
 import LoaderPortal from '../../components/LoaderPortal'
-import { UserView } from  '../../components/UserView'
-import { CompanyView } from  '../../components/CompanyView'
+import { CompanyView, UserView } from  '../../components/Views'
 
 const pageSize = 12
 const { RangePicker } = DatePicker
diff --git a/src/pages/Documents/DrillingProgram.jsx b/src/pages/Documents/DrillingProgram.jsx
index 1ff6b06..87fadcf 100644
--- a/src/pages/Documents/DrillingProgram.jsx
+++ b/src/pages/Documents/DrillingProgram.jsx
@@ -2,11 +2,10 @@ import { useEffect, useState } from 'react'
 import { FileExcelOutlined } from '@ant-design/icons'
 import { Popconfirm, Button, Tooltip, Typography } from 'antd'
 import { Flex } from '../../components/Grid'
-import { Mark } from  '../../components/Mark'
-import { UserView } from  '../../components/UserView'
+import { MarkView, UserView } from  '../../components/Views'
 import LoaderPortal from '../../components/LoaderPortal'
 import { invokeWebApiWrapperAsync, download, formatBytes } from '../../components/factory'
-import {DrillingProgramService, WellService} from '../../services/api'
+import { DrillingProgramService, WellService } from '../../services/api'
 import DocumentsTemplate from './DocumentsTemplate'
 
 const idFileCategoryDrillingProgramItems = 13
@@ -80,7 +79,7 @@ export default function DrillingProgram({ idWell }) {
   const renderMarksColumn=(idFile, marks)=>{
     const validMarks = marks?.filter(m => !(m?.isDeleted))
     if(validMarks?.length)
-      return validMarks.map(mark => <Mark mark = {mark} onDelete={() => deleteMark(mark.id)}/>)
+      return validMarks.map(mark => <MarkView mark = {mark} onDelete={() => deleteMark(mark.id)}/>)
 
     return (
       <Popconfirm title={'Согласовать файл?'} onConfirm={() => addMarkToFile(idFile)}>
diff --git a/src/pages/TelemetryView/SetpointViewer.jsx b/src/pages/TelemetryView/SetpointViewer.jsx
index feb2240..fdd666e 100644
--- a/src/pages/TelemetryView/SetpointViewer.jsx
+++ b/src/pages/TelemetryView/SetpointViewer.jsx
@@ -2,7 +2,7 @@ import moment from 'moment'
 import { memo } from 'react'
 import { Modal, Input } from 'antd'
 import { Table } from '../../components/Table'
-import { UserView } from '../../components/UserView'
+import { UserView } from '../../components/Views'
 import { Grid, GridItem } from '../../components/Grid'
 import { periodToString } from '../../utils/datetime'
 
diff --git a/src/pages/TelemetryView/Setpoints.jsx b/src/pages/TelemetryView/Setpoints.jsx
index 1f6846a..651cf51 100644
--- a/src/pages/TelemetryView/Setpoints.jsx
+++ b/src/pages/TelemetryView/Setpoints.jsx
@@ -2,7 +2,7 @@ import moment from 'moment'
 import { Button, Modal } from 'antd'
 import { useState, useEffect } from 'react'
 import { Table } from '../../components/Table'
-import { UserView } from '../../components/UserView'
+import { UserView } from '../../components/Views'
 import LoaderPortal from '../../components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '../../components/factory'
 import { makeStringCutter } from '../../utils/string'