diff --git a/src/App.tsx b/src/App.tsx
index d5428fda7..a0d7ef5a1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,6 +20,7 @@ import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import 'react-toastify/dist/ReactToastify.min.css';
 import {
+  fetchCities,
   fetchDirections,
   fetchOrigins,
   fetchPostsTypes,
@@ -46,12 +47,14 @@ export const App: React.FC = () => {
     boundFetchOrigins,
     boundFetchPostsTypes,
     boundFetchRegions,
+    boundFetchCities,
     boundAuthorities,
   ] = useActions([
     fetchDirections,
     fetchOrigins,
     fetchPostsTypes,
     fetchRegions,
+    fetchCities,
     getAuthoritiesAsyncAction,
   ]);
 
@@ -62,6 +65,7 @@ export const App: React.FC = () => {
       boundFetchOrigins();
       boundFetchPostsTypes();
       boundFetchRegions();
+      boundFetchCities();
     };
     fetchProperties();
     if (!localStorage.getItem('lang')) localStorage.setItem('lang', 'uk');
@@ -84,24 +88,24 @@ export const App: React.FC = () => {
           <div className="content">
             <AuthProvider>
               <ScreenProvider>
-              <BreadcrumbsProvider configs={breadcrumbsConfigs}>
-                <Header />
-                <MuiPickersUtilsProvider utils={DateFnsUtils}>
-                  <Suspense
-                    fallback={
-                      <div className="mainLoading">
-                        <CircularProgress />
-                      </div>
-                    }
-                  >
-                    <RenderRoutes
-                      routes={ROUTER_CONFIG}
-                      adminRouterConfig={ADMIN_ROUTER_CONFIG}
-                    />
-                  </Suspense>
-                </MuiPickersUtilsProvider>
-                <Footer />
-              </BreadcrumbsProvider>
+                <BreadcrumbsProvider configs={breadcrumbsConfigs}>
+                  <Header />
+                  <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                    <Suspense
+                      fallback={
+                        <div className="mainLoading">
+                          <CircularProgress />
+                        </div>
+                      }
+                    >
+                      <RenderRoutes
+                        routes={ROUTER_CONFIG}
+                        adminRouterConfig={ADMIN_ROUTER_CONFIG}
+                      />
+                    </Suspense>
+                  </MuiPickersUtilsProvider>
+                  <Footer />
+                </BreadcrumbsProvider>
               </ScreenProvider>
             </AuthProvider>
           </div>
diff --git a/src/components/Editor/__snapshots__/PreviewInput.test.tsx.snap b/src/components/Editor/__snapshots__/PreviewInput.test.tsx.snap
index 7d5120add..c5b9da267 100644
--- a/src/components/Editor/__snapshots__/PreviewInput.test.tsx.snap
+++ b/src/components/Editor/__snapshots__/PreviewInput.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`component renders properly with all props 1`] = `
   style="width: 100%;"
 >
   <label
-    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl makeStyles-requiredAuthorField-13 MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl makeStyles-requiredAuthorField-14 MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
     data-shrink="true"
   >
     Текст картки матеріалу
@@ -33,10 +33,10 @@ exports[`component renders properly with all props 1`] = `
     />
     <fieldset
       aria-hidden="true"
-      class="PrivateNotchedOutline-root-19 MuiOutlinedInput-notchedOutline"
+      class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
     >
       <legend
-        class="PrivateNotchedOutline-legendLabelled-21 PrivateNotchedOutline-legendNotched-22"
+        class="PrivateNotchedOutline-legendLabelled-23 PrivateNotchedOutline-legendNotched-24"
       >
         <span>
           Текст картки матеріалу
@@ -85,10 +85,10 @@ exports[`component renders properly with only required props 1`] = `
     />
     <fieldset
       aria-hidden="true"
-      class="PrivateNotchedOutline-root-8 MuiOutlinedInput-notchedOutline"
+      class="PrivateNotchedOutline-root-9 MuiOutlinedInput-notchedOutline"
     >
       <legend
-        class="PrivateNotchedOutline-legendLabelled-10 PrivateNotchedOutline-legendNotched-11"
+        class="PrivateNotchedOutline-legendLabelled-11 PrivateNotchedOutline-legendNotched-12"
       >
         <span>
           Текст картки матеріалу
diff --git a/src/components/Form/Buttons/BasicButton.tsx b/src/components/Form/Buttons/BasicButton.tsx
index 964330b0e..8417a8332 100644
--- a/src/components/Form/Buttons/BasicButton.tsx
+++ b/src/components/Form/Buttons/BasicButton.tsx
@@ -37,7 +37,6 @@ export const BasicButton: React.FC<IBasicButtonProps> = ({
       className={clsx(getRootClass(), className)}
       type="submit"
       variant="contained"
-      fullWidth
       disabled={disabled}
       onClick={onClick}
     >
diff --git a/src/components/Form/Buttons/CancelButton.tsx b/src/components/Form/Buttons/CancelButton.tsx
new file mode 100644
index 000000000..43d3335b9
--- /dev/null
+++ b/src/components/Form/Buttons/CancelButton.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button } from '@material-ui/core';
+import { useStyles } from './styles/CancelButton.style';
+
+type CancelButtonPropsType = {
+  label: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+export const CancelButton: React.FC<CancelButtonPropsType> = ({
+  label,
+  onClick,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Button
+      className={classes.cancelButton}
+      variant="contained"
+      onClick={onClick}
+    >
+      {label}
+    </Button>
+  );
+};
diff --git a/src/components/Form/Buttons/__tests__/CancelButton.test.tsx b/src/components/Form/Buttons/__tests__/CancelButton.test.tsx
new file mode 100644
index 000000000..a402b96c3
--- /dev/null
+++ b/src/components/Form/Buttons/__tests__/CancelButton.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import userEvent, { TargetElement } from '@testing-library/user-event';
+import { CancelButton } from '../CancelButton';
+
+describe('Test for CancelButton component', () => {
+  it('Should render a button', () => {
+    const { container } = render(<CancelButton label="Hello world" />);
+    expect(container.firstChild).toHaveClass('CancelButton-cancelButton-1');
+  });
+
+  it('Should render a label properly', () => {
+    render(<CancelButton label="Hello world" />);
+    const label = screen.getByText('Hello world');
+
+    expect(label).toBeInTheDocument();
+  });
+
+  it('Should handle onClick', () => {
+    const handleClick = jest.fn();
+    const { container } = render(
+      <CancelButton label="Hello World" onClick={handleClick} />,
+    );
+    userEvent.click(container.firstChild as TargetElement);
+    expect(handleClick).toBeCalled();
+  });
+});
diff --git a/src/components/Form/Buttons/index.ts b/src/components/Form/Buttons/index.ts
index c0cfceb8a..1520fcaa5 100644
--- a/src/components/Form/Buttons/index.ts
+++ b/src/components/Form/Buttons/index.ts
@@ -1 +1,2 @@
 export { BasicButton } from './BasicButton';
+export { CancelButton } from './CancelButton';
diff --git a/src/components/Form/Buttons/styles/BasicButton.style.tsx b/src/components/Form/Buttons/styles/BasicButton.style.tsx
index 975d9ff1e..a0637c21b 100644
--- a/src/components/Form/Buttons/styles/BasicButton.style.tsx
+++ b/src/components/Form/Buttons/styles/BasicButton.style.tsx
@@ -5,25 +5,30 @@ export const useStyles = makeStyles(
     basicAcceptButton: {
       marginTop: theme.spacing(7),
       padding: theme.spacing(3.7, 2.8),
-      fontFamily: 'Raleway',
       fontWeight: 600,
       fontSize: theme.spacing(3.6),
     },
     basicSignButton: {
       padding: theme.spacing(3.2, 8.8),
       borderRadius: theme.spacing(10),
+      flex: '0 1 300px',
       marginRight: 0,
-      alignSelf: 'flex-end',
       backgroundColor: '#FF5C00',
       '& .MuiButton-label': {
         color: theme.palette.common.white,
         fontWeight: 700,
         fontSize: '18px',
-        fontFamily: 'Raleway',
       },
       '&:hover': {
         backgroundColor: '#ffaa00',
       },
+      [theme.breakpoints.down('sm')]: {
+        flex: '0 1 auto',
+        padding: theme.spacing(2, 3.1),
+        '& .MuiButton-label': {
+          fontSize: '15px',
+        },
+      },
     },
   }),
   {
diff --git a/src/components/Form/Buttons/styles/CancelButton.style.tsx b/src/components/Form/Buttons/styles/CancelButton.style.tsx
new file mode 100644
index 000000000..243ac13b6
--- /dev/null
+++ b/src/components/Form/Buttons/styles/CancelButton.style.tsx
@@ -0,0 +1,25 @@
+import { makeStyles, Theme } from '@material-ui/core';
+
+export const useStyles = makeStyles(
+  (theme: Theme) => ({
+    cancelButton: {
+      flex: '0 1 300px',
+      backgroundColor: theme.palette.info.light,
+      '& .MuiButton-label': {
+        color: theme.palette.common.white,
+        fontWeight: 700,
+        fontSize: '18px',
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.info.main,
+      },
+      [theme.breakpoints.down('sm')]: {
+        flex: '0 1 auto',
+        '& .MuiButton-label': {
+          fontSize: '15px',
+        },
+      },
+    },
+  }),
+  { name: 'CancelButton' },
+);
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 3826d25d4..65a33952f 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -9,7 +9,6 @@ export interface IPageProps {
 
 const Page: React.FC<IPageProps> = (props) => {
   const classes = useStyles();
-  const { component } = props;
 
   const { mobile } = useContext(ScreenContext);
 
diff --git a/src/locales/uk/parts/admin.ts b/src/locales/uk/parts/admin.ts
index 866f9bcc5..19d5498c9 100644
--- a/src/locales/uk/parts/admin.ts
+++ b/src/locales/uk/parts/admin.ts
@@ -80,4 +80,20 @@ export const admin = {
   maxImportantPostCountReached: `Досягнуто максимум важливих постів`,
   createNewAuthor: `Створити нового автора`,
   showNotesAmount: `Відобразити <dropDown/> записів`,
+  firstName: `Ім'я`,
+  lastName: `Прізвище`,
+  email: `Електонна пошта`,
+  socialNetworkLinks: `Посилання на персональні сторінки`,
+  minimumOneLinkRequired: `Необхідно додати мінімум одне посилання`,
+  mainPlaceOfWork: `Основне місце роботи`,
+  biography: `Біографія`,
+  fieldCantBeEmpty: `Поле не може бути порожнім`,
+  wrongEmail: `Неаправильна email адреса`,
+  allowedChar: `Дозволені символи: (пробіл)"№'()-.,/&%:@`,
+  pictureRequired: `Необхідно додати зображення`,
+  minRequired: `Необхідно ввести мінімум`,
+  maxRequired: `Можливо ввести максимум`,
+  symbols: `символів`,
+  changesList: `Зміни заголовку`,
+  noChangesLog: `Жодних змін не знайдено`,
 };
diff --git a/src/locales/uk/parts/common.ts b/src/locales/uk/parts/common.ts
index ddab2d382..4e080f516 100644
--- a/src/locales/uk/parts/common.ts
+++ b/src/locales/uk/parts/common.ts
@@ -58,6 +58,7 @@ export const common = {
   enterTagName: 'Введіть назву тега',
   showMore: 'Показати ще',
   acceptChanges: 'Підтвердити зміни',
+  cancelChanges: 'Скасувати зміни',
   selectedMaterials: 'Обрані матеріали',
   publishedMaterials: 'Опубліковані матеріали',
   unPublishedMaterials: 'Неопубліковані матеріали',
diff --git a/src/models/changeLog/asyncAction.ts b/src/models/changeLog/asyncAction.ts
new file mode 100644
index 000000000..21388a1c5
--- /dev/null
+++ b/src/models/changeLog/asyncAction.ts
@@ -0,0 +1,15 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { fetchChangeLog } from 'old/lib/utilities/API/api';
+import { IChangeLogOptions } from './types';
+
+export const getChangeLog = createAsyncThunk(
+  'getChangeLogActions',
+  async (options: IChangeLogOptions, { rejectWithValue }) => {
+    try {
+      const { data } = await fetchChangeLog(options);
+      return data;
+    } catch (error) {
+      return rejectWithValue(error);
+    }
+  },
+);
diff --git a/src/models/changeLog/index.ts b/src/models/changeLog/index.ts
new file mode 100644
index 000000000..c0ea76496
--- /dev/null
+++ b/src/models/changeLog/index.ts
@@ -0,0 +1,3 @@
+/* eslint-disable import/no-cycle */
+export { changeLogReducer, setChangesSize } from './reducer';
+export { selectSize } from './selectors';
diff --git a/src/models/changeLog/reducer.ts b/src/models/changeLog/reducer.ts
new file mode 100644
index 000000000..16cd1a2aa
--- /dev/null
+++ b/src/models/changeLog/reducer.ts
@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { getAsyncActionsReducer } from 'models/helpers/asyncActions';
+import { ChangeLogType } from 'old/lib/utilities/API/types';
+import { getChangeLog } from './asyncAction';
+
+const initialState: ChangeLogType = {
+  size: 0,
+  content: [],
+};
+
+const changeLog = createSlice({
+  name: 'changesLog',
+  initialState,
+  reducers: {
+    setChangesSize: (state, action: PayloadAction<number>) => {
+      const setChangeObj = state;
+      setChangeObj.size = action.payload;
+    },
+    setPage: (state, action: PayloadAction<number>) => {
+      const setPageObj = state;
+      setPageObj.totalElements = action.payload;
+    },
+  },
+  extraReducers: {
+    ...getAsyncActionsReducer(getChangeLog as any),
+  },
+});
+
+const { setChangesSize, setPage } = changeLog.actions;
+
+const changeLogReducer = changeLog.reducer;
+export { setChangesSize, setPage, changeLogReducer };
diff --git a/src/models/changeLog/selectors.ts b/src/models/changeLog/selectors.ts
new file mode 100644
index 000000000..03f281214
--- /dev/null
+++ b/src/models/changeLog/selectors.ts
@@ -0,0 +1,9 @@
+import { RootStateType } from 'models/rootReducer';
+
+export const selectSize = (state: RootStateType): number | undefined => {
+  return state.changesLog.size;
+};
+
+export const selectTotalPages = (state: RootStateType): number | undefined => {
+  return state.changesLog.totalPages;
+};
diff --git a/src/models/changeLog/types.ts b/src/models/changeLog/types.ts
new file mode 100644
index 000000000..b1418d358
--- /dev/null
+++ b/src/models/changeLog/types.ts
@@ -0,0 +1,7 @@
+export interface IChangeLogOptions {
+  size?: number;
+  page?: number;
+  totalElements?: number;
+  totalPages?: number;
+  pageNumber?: number;
+}
diff --git a/src/models/experts/asyncActions.ts b/src/models/experts/asyncActions.ts
index 5fb5f924f..ac21fe951 100644
--- a/src/models/experts/asyncActions.ts
+++ b/src/models/experts/asyncActions.ts
@@ -1,7 +1,14 @@
 /* eslint-disable */
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import { IFetchExpertsOptions, IExpertsAutorsListOptions } from './types';
-import { getAllExperts } from '../../old/lib/utilities/API/api';
+import {
+  IFetchExpertsOptions,
+  IExpertsAutorsListOptions,
+  IExpertsDeleteAutor,
+} from './types';
+import {
+  deleteAuthorById,
+  getAllExperts,
+} from '../../old/lib/utilities/API/api';
 import { LOAD_EXPERTS_LIMIT } from '../../old/lib/constants/experts';
 import { IExpert } from '../../old/lib/types';
 import { ExpertResponseType } from '../../old/lib/utilities/API/types';
@@ -107,3 +114,20 @@ export const fetchExpertsAutorsList = createAsyncThunk(
     }
   },
 );
+
+export const deleteAuthor = createAsyncThunk(
+  'experts/deleteAuthor',
+  async (options: IExpertsDeleteAutor, { getState, rejectWithValue }) => {
+    try {
+      const { id } = options;
+      await deleteAuthorById(id);
+      const {
+        experts: { data },
+      } = getState() as any;
+      const ids = data.expertIds.filter((expertId: number) => expertId !== id);
+      return { ...data, expertIds: ids };
+    } catch (error) {
+      return rejectWithValue(error.response?.data);
+    }
+  },
+);
diff --git a/src/models/experts/reducers.ts b/src/models/experts/reducers.ts
index 11589df03..7e18457dd 100644
--- a/src/models/experts/reducers.ts
+++ b/src/models/experts/reducers.ts
@@ -8,7 +8,11 @@ import {
   ISortAutorsList,
   ITextFields,
 } from './types';
-import { fetchExperts, fetchExpertsAutorsList } from './asyncActions';
+import {
+  deleteAuthor,
+  fetchExperts,
+  fetchExpertsAutorsList,
+} from './asyncActions';
 import { getAsyncActionsReducer } from '../helpers/asyncActions';
 
 const initialState: IExpertsState = {
@@ -66,6 +70,7 @@ export const expertsSlice = createSlice({
   extraReducers: {
     ...getAsyncActionsReducer(fetchExperts as any),
     ...getAsyncActionsReducer(fetchExpertsAutorsList as any),
+    ...getAsyncActionsReducer(deleteAuthor as any),
   },
 });
 
diff --git a/src/models/experts/types.ts b/src/models/experts/types.ts
index f8dc0d250..39fcab69e 100644
--- a/src/models/experts/types.ts
+++ b/src/models/experts/types.ts
@@ -66,3 +66,6 @@ export interface IFetchExpertsOptions {
 export interface IExpertsAutorsListOptions {
   page: number;
 }
+export interface IExpertsDeleteAutor {
+  id: number;
+}
diff --git a/src/models/properties/asyncActions.ts b/src/models/properties/asyncActions.ts
index c3c4f1596..c57f9cbca 100644
--- a/src/models/properties/asyncActions.ts
+++ b/src/models/properties/asyncActions.ts
@@ -1,5 +1,6 @@
 /* eslint-disable */
 import {
+  getCities,
   getDirections,
   getOrigins,
   getPostTypes,
@@ -7,12 +8,30 @@ import {
   getTagsByValue,
 } from '../../old/lib/utilities/API/api';
 import { createAsyncThunk } from '@reduxjs/toolkit';
+import { RegionResponseType } from '../../old/lib/utilities/API/types';
 
 export const fetchRegions = createAsyncThunk(
   'properties/fetchRegions',
   async (_, { rejectWithValue }) => {
     try {
       const response = await getRegions();
+      const data = response.data.sort(
+        (a: RegionResponseType, b: RegionResponseType) => {
+          return a.name.localeCompare(b.name);
+        },
+      );
+      return data;
+    } catch (err) {
+      return rejectWithValue(err.response?.data);
+    }
+  },
+);
+
+export const fetchCities = createAsyncThunk(
+  'properties/fetchCities',
+  async (_, { rejectWithValue }) => {
+    try {
+      const response = await getCities();
       return response.data;
     } catch (err) {
       return rejectWithValue(err.response?.data);
diff --git a/src/models/properties/index.ts b/src/models/properties/index.ts
index 67f51ee0a..05667569e 100644
--- a/src/models/properties/index.ts
+++ b/src/models/properties/index.ts
@@ -5,6 +5,7 @@ export {
   fetchPostsTags,
   fetchPostsTypes,
   fetchRegions,
+  fetchCities,
 } from './asyncActions';
 export { propertiesReducer } from './reducers';
 export {
diff --git a/src/models/properties/reducers.ts b/src/models/properties/reducers.ts
index 79c5eaeb8..62106525b 100644
--- a/src/models/properties/reducers.ts
+++ b/src/models/properties/reducers.ts
@@ -8,11 +8,12 @@ import {
   fetchPostsTags,
   fetchPostsTypes,
   fetchRegions,
+  fetchCities,
 } from './asyncActions';
 import { getAsyncActionsReducer } from '../helpers/asyncActions';
 
 const statuses = Object.keys(PostStatusForApi)
-  .slice(0, 7)
+  .slice(0, 6)
   .map((key) => ({
     id: +key,
     name: PostStatusForApi[+key],
@@ -21,6 +22,7 @@ const statuses = Object.keys(PostStatusForApi)
 const initialState: IPropertiesState = {
   postTypes: [],
   regions: [],
+  cities: [],
   postTags: [],
   directions: [],
   origins: [],
@@ -33,6 +35,7 @@ const propertiesSlice = createSlice({
   reducers: {},
   extraReducers: {
     ...getAsyncActionsReducer(fetchRegions, 'regions'),
+    ...getAsyncActionsReducer(fetchCities, 'cities'),
     ...getAsyncActionsReducer(fetchPostsTypes, 'postTypes'),
     ...getAsyncActionsReducer(fetchDirections, 'directions'),
     ...getAsyncActionsReducer(fetchOrigins, 'origins'),
diff --git a/src/models/properties/selectors.ts b/src/models/properties/selectors.ts
index b4db7c6bb..3180ceb34 100644
--- a/src/models/properties/selectors.ts
+++ b/src/models/properties/selectors.ts
@@ -6,12 +6,15 @@ import {
   IPostType,
   IRegion,
   IPostStatus,
+  ICity,
 } from '../../old/lib/types';
 
 export const selectPostTypes = (state: RootStateType): IPostType[] =>
   state.properties.postTypes;
 export const selectRegions = (state: RootStateType): IRegion[] =>
   state.properties.regions;
+export const selectCities = (state: RootStateType): ICity[] =>
+  state.properties.cities;
 export const selectPostTags = (state: RootStateType): IPostTag[] =>
   state.properties.postTags;
 export const selectDirections = (state: RootStateType): IDirection[] =>
diff --git a/src/models/properties/types.ts b/src/models/properties/types.ts
index cf53e537e..b91e6791b 100644
--- a/src/models/properties/types.ts
+++ b/src/models/properties/types.ts
@@ -5,11 +5,13 @@ import {
   IPostType,
   IRegion,
   IPostStatus,
+  ICity,
 } from '../../old/lib/types';
 
 export interface IPropertiesState {
   postTypes: IPostType[];
   regions: IRegion[];
+  cities: ICity[];
   postTags: IPostTag[];
   directions: IDirection[];
   origins: IOrigin[];
diff --git a/src/models/rootReducer.ts b/src/models/rootReducer.ts
index ecfd725e8..05a901d94 100644
--- a/src/models/rootReducer.ts
+++ b/src/models/rootReducer.ts
@@ -14,6 +14,7 @@ import { authoritiesReducer } from './authorities';
 import { mobileMaterialsReducer } from './newestPostsMobile';
 import { headerVisibilityReducer } from './headerVisibility/reducer';
 import { adminLabReducer } from './adminLab/index';
+import { changeLogReducer } from './changeLog';
 
 const rootReducer = combineReducers({
   main: mainReducer,
@@ -31,6 +32,7 @@ const rootReducer = combineReducers({
   mobileMaterials: mobileMaterialsReducer,
   headerVisibility: headerVisibilityReducer,
   adminLab: adminLabReducer,
+  changesLog: changeLogReducer,
 });
 
 export type RootStateType = ReturnType<typeof rootReducer>;
diff --git a/src/old/lib/components/Chips/ChipsList.tsx b/src/old/lib/components/Chips/ChipsList.tsx
index 3a43426d5..26f2bd946 100644
--- a/src/old/lib/components/Chips/ChipsList.tsx
+++ b/src/old/lib/components/Chips/ChipsList.tsx
@@ -9,11 +9,7 @@ export interface IChipsListProps {
   max?: boolean;
 }
 
-const ChipsList: React.FC<IChipsListProps> = ({
-  checkedNames,
-  isLabelItem,
-  max,
-}) => {
+const ChipsList: React.FC<IChipsListProps> = ({ checkedNames }) => {
   const { directions } = useSelector(
     (state: RootStateType) => state.properties,
   );
diff --git a/src/old/lib/components/Chips/PostDirectionChip.tsx b/src/old/lib/components/Chips/PostDirectionChip.tsx
index 8be0ce781..65e144029 100644
--- a/src/old/lib/components/Chips/PostDirectionChip.tsx
+++ b/src/old/lib/components/Chips/PostDirectionChip.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles(
 
 const PostDirectionChip: React.FC<IPostDirectionChipProps> = (props) => {
   const classes = useStyles(props);
-  const { labelName, handleClick, backgroundColor } = props;
+  const { labelName, handleClick } = props;
 
   const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
diff --git a/src/old/lib/components/Filters/CheckboxLeftsideFilterForm.tsx b/src/old/lib/components/Filters/CheckboxLeftsideFilterForm.tsx
index c6da78288..672bdfdb1 100644
--- a/src/old/lib/components/Filters/CheckboxLeftsideFilterForm.tsx
+++ b/src/old/lib/components/Filters/CheckboxLeftsideFilterForm.tsx
@@ -161,7 +161,7 @@ export const CheckboxLeftsideFilterForm: React.FC<ICheckboxLeftsideFilterFormPro
     onFormChange(checkedFilters);
   };
 
-  const getUsersPresentProperty = (filterName: string | number | undefined) => {
+  const getUsersPresentProperty = (filterName: string | number | '') => {
     const allRegions = store.getState().properties.regions;
     const allDirections = store.getState().properties.directions;
     const allOrigins = store.getState().properties.origins;
@@ -180,7 +180,7 @@ export const CheckboxLeftsideFilterForm: React.FC<ICheckboxLeftsideFilterFormPro
 
     if (filterType === QueryTypeEnum.ORIGINS) {
       const originItem = allOrigins.map((origin) => origin.id);
-      const filterNameValue = +filterName!;
+      const filterNameValue = Number(filterName);
       result = originItem?.includes(filterNameValue);
     }
 
diff --git a/src/old/lib/types.ts b/src/old/lib/types.ts
index ef61d5e74..dddb7f844 100644
--- a/src/old/lib/types.ts
+++ b/src/old/lib/types.ts
@@ -219,6 +219,12 @@ export interface IRegion {
   usersPresent?: boolean;
 }
 
+export interface ICity {
+  id: number;
+  name: string;
+  regionId: number;
+}
+
 export interface IInstitution {
   city: {
     id: number;
@@ -283,10 +289,9 @@ export type ConditionsContentSectionType =
 
 export enum PostStatusForApi {
   'Чернетка' = 0,
-  'Потребує модерації' = 1,
-  'Не переглянутий' = 2,
+  'Потребує редагування' = 1,
   'На модерації' = 3,
   'Заплановано' = 4,
   'Опубліковано' = 5,
-  'Архівований' = 6,
+  'В архіві' = 6,
 }
diff --git a/src/old/lib/utilities/API/api.ts b/src/old/lib/utilities/API/api.ts
index acba35ddc..dcdec06a3 100644
--- a/src/old/lib/utilities/API/api.ts
+++ b/src/old/lib/utilities/API/api.ts
@@ -1,7 +1,13 @@
 /* eslint-disable no-param-reassign */
-import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
+import axios, {
+  AxiosError,
+  AxiosRequestConfig,
+  AxiosResponse,
+  AxiosPromise,
+} from 'axios';
 import qs from 'qs';
 import { toast } from 'react-toastify';
+import { IChangeLogOptions } from 'models/changeLog/types';
 import {
   CreatePostRequestUnionType,
   CreateTagRequestType,
@@ -27,6 +33,8 @@ import {
   ActiveDirectionType,
   PlatformInformationType,
   UpdatePlatformInformationRequestType,
+  CityResponseType,
+  GetChangeLogType,
 } from './types';
 import { BASE_URL } from '../../../apiURL';
 import { getToken } from '../../../provider/AuthProvider/getToken';
@@ -222,6 +230,12 @@ export const getRegions = async (): Promise<
   return instance.get(`/region`);
 };
 
+export const getCities = async (): Promise<
+  AxiosResponse<RegionResponseType[]>
+> => {
+  return instance.get(`/city`);
+};
+
 export const getDirections = async (): Promise<
   AxiosResponse<DirectionResponseType[]>
 > => {
@@ -309,8 +323,36 @@ export const getPlatformInformation = async (
   return instance.get(`/platform-information/${id}`);
 };
 
+export const fetchChangeLog = (
+  parametres?: IChangeLogOptions,
+): AxiosPromise<GetChangeLogType> => {
+  return instance.get(`/log/post-logs`, {
+    params: {
+      size: parametres?.size,
+    },
+  });
+};
+
 export const updatePlatformInformation = async (
   requestBody: UpdatePlatformInformationRequestType,
 ): Promise<AxiosResponse<PlatformInformationType>> => {
   return instance.put(`/platform-information/`, requestBody);
 };
+
+export const getRegionByCityId = async (
+  id: number,
+): Promise<AxiosResponse<RegionResponseType>> => {
+  return instance.get(`/region/${id}`);
+};
+
+export const getCitiesByRegionId = async (
+  id: number,
+): Promise<AxiosResponse<CityResponseType[]>> => {
+  return instance.get(`/city/${id}`);
+};
+
+export const deleteAuthorById = async (
+  id: number,
+): Promise<AxiosResponse<PostsResponseType>> => {
+  return instance.delete(`/author/${id}`);
+};
diff --git a/src/old/lib/utilities/API/types.ts b/src/old/lib/utilities/API/types.ts
index be015cde8..ecfcd5e3e 100644
--- a/src/old/lib/utilities/API/types.ts
+++ b/src/old/lib/utilities/API/types.ts
@@ -157,6 +157,13 @@ export type OriginResponseType = {
 export type RegionResponseType = {
   id: number;
   name: string;
+  userPresent?: boolean;
+};
+
+export type CityResponseType = {
+  id: number;
+  name: string;
+  regionId: number;
 };
 
 export type PostTypeResponseType = {
@@ -277,3 +284,35 @@ export type UpdatePlatformInformationRequestType = {
   title?: string;
   text?: string;
 };
+
+export type ChangeLogType = {
+  empty?: boolean;
+  first?: boolean;
+  last?: boolean;
+  number?: number;
+  numberOfElements?: number;
+  size?: number;
+  totalElements?: number;
+  totalPages?: number;
+  content: [];
+};
+
+export type GetChangeLogType = ChangeLogType & {
+  changes?: string;
+  dateOfChange?: {
+    date: number;
+    day: number;
+    hours: number;
+    minutes: number;
+    month: number;
+    nanos: number;
+    seconds: number;
+    time: number;
+    timezoneOffset: number;
+    year: number;
+  };
+  id?: number;
+  nameOfChanger?: string;
+  title?: string;
+  totalPages: number;
+};
diff --git a/src/old/modules/experts/components/Accordion.tsx b/src/old/modules/experts/components/Accordion.tsx
index 9f0307b2a..c87372b69 100644
--- a/src/old/modules/experts/components/Accordion.tsx
+++ b/src/old/modules/experts/components/Accordion.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { NavLink } from 'react-router-dom';
 import { Typography } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { useStyles } from '../styles/Accordion.styles';
diff --git a/src/old/modules/experts/components/ExpertsViewMobile.tsx b/src/old/modules/experts/components/ExpertsViewMobile.tsx
index f54a1c095..0707c4547 100644
--- a/src/old/modules/experts/components/ExpertsViewMobile.tsx
+++ b/src/old/modules/experts/components/ExpertsViewMobile.tsx
@@ -50,7 +50,7 @@ const ExpertsViewMobile: FC<IExpertsViewMobileProps> = ({
         ) : (
           <>
             <ExpertsList experts={experts} />
-            <Grid container justify="center">
+            <Grid container justifyContent="center">
               {LoadMoreButton}
             </Grid>
           </>
diff --git a/src/old/navigation/router-config.ts b/src/old/navigation/router-config.ts
index 7e96b6e19..d60450c05 100644
--- a/src/old/navigation/router-config.ts
+++ b/src/old/navigation/router-config.ts
@@ -43,6 +43,12 @@ const PasswordResetView = lazy(
 const PasswordUpdateView = lazy(
   () => import('../../views/PasswordUpdate/PasswordUpdateView'),
 );
+const PersonalInfo = lazy(
+  () => import('../../views/Profile/PersonalInfo/PersonalInfo'),
+);
+const EditAuthor = lazy(
+  () => import('../../views/Profile/EditAuthor/EditAuthor'),
+);
 
 export const ADMIN_ROUTER_CONFIG: IRouteConfig = {
   path: ['/admin', '/edit-post'],
@@ -115,6 +121,20 @@ export const ROUTER_CONFIG: IRouteConfig[] = [
     private: true,
     exact: true,
   },
+  {
+    path: '/create-author',
+    key: 'CREATE_AUTHOR',
+    component: PersonalInfo,
+    private: true,
+    exact: true,
+  },
+  {
+    path: '/edit-author',
+    key: 'EDIT_AUTHOR',
+    component: EditAuthor,
+    private: true,
+    exact: true,
+  },
   {
     path: '/edit-post',
     key: 'UPDATE_POST',
diff --git a/src/styles/theme/index.ts b/src/styles/theme/index.ts
index b260f2f28..24c177cc5 100644
--- a/src/styles/theme/index.ts
+++ b/src/styles/theme/index.ts
@@ -1,4 +1,4 @@
-import { createMuiTheme, Theme } from '@material-ui/core';
+import { createTheme, Theme } from '@material-ui/core';
 import { PALETTE as palette } from './palette';
 import { TYPOGRAPHY as typography } from './typography';
 
@@ -10,7 +10,7 @@ export const SCREEN_BREAKPOINTS = {
   xl: 1920,
 };
 
-export const MAIN_THEME = createMuiTheme({
+export const MAIN_THEME = createTheme({
   palette,
   typography,
   spacing: 5,
@@ -25,6 +25,9 @@ export const MAIN_THEME = createMuiTheme({
         borderRadius: 0,
         textTransform: 'none',
       },
+      label: {
+        fontFamily: 'Raleway',
+      },
     },
     MuiIconButton: {
       root: {
diff --git a/src/utilities/formatDate.ts b/src/utilities/formatDate.ts
index ef01c849b..b5ec39d41 100644
--- a/src/utilities/formatDate.ts
+++ b/src/utilities/formatDate.ts
@@ -42,3 +42,7 @@ export const displayShortDate = (
   }
   return `${dateValue}`;
 };
+
+export const requestDate = (value: Date): string => {
+  return value.toISOString().substring(0, 10);
+};
diff --git a/src/views/Profile/AdminTable/ActionButtons.tsx b/src/views/Profile/AdminTable/ActionButtons.tsx
index 74ccccffc..b04a2d9f6 100644
--- a/src/views/Profile/AdminTable/ActionButtons.tsx
+++ b/src/views/Profile/AdminTable/ActionButtons.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { MenuItem } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
@@ -57,6 +58,7 @@ const ActionButtons: React.FC<IActionButtons> = ({
   } = PostStatus;
 
   const editPostLink = `/edit-post?id=${id}`;
+  const history = useHistory();
   const [activeModal, setActiveModal] = useState<null | string>(null);
 
   const openModal = (modal: string) => {
@@ -135,7 +137,7 @@ const ActionButtons: React.FC<IActionButtons> = ({
       label: t(langTokens.admin.edit),
       modal: null,
       handler: () => {
-        window.open(editPostLink);
+        history.push(editPostLink);
       },
       adminUseStatuses: [
         PUBLISHED,
diff --git a/src/views/Profile/AdminTable/AdminDatePicker.tsx b/src/views/Profile/AdminTable/AdminDatePicker.tsx
index cdc97b249..e25d85d41 100644
--- a/src/views/Profile/AdminTable/AdminDatePicker.tsx
+++ b/src/views/Profile/AdminTable/AdminDatePicker.tsx
@@ -3,6 +3,7 @@ import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import { parsDate } from 'utilities/parsDate';
 import { DatePicker } from '@material-ui/pickers';
+import { requestDate } from 'utilities/formatDate';
 import { useTranslation } from 'react-i18next';
 import { Box } from '@material-ui/core';
 import { langTokens } from '../../../locales/localizationInit';
@@ -38,6 +39,12 @@ export const AdminDatePicker: React.FC<IMaterialsDate> = ({
 }) => {
   const classes = useStyles();
   const { t } = useTranslation();
+  const handleDatePicker = (option: string, value) => {
+    setChanges({
+      option,
+      date: requestDate(value),
+    });
+  };
 
   return (
     <div>
@@ -62,12 +69,9 @@ export const AdminDatePicker: React.FC<IMaterialsDate> = ({
               variant="static"
               openTo="date"
               value={start}
-              onChange={(value) =>
-                setChanges({
-                  option: 'start',
-                  date: value && value.toISOString(),
-                })
-              }
+              onChange={(value) => {
+                handleDatePicker('start', value);
+              }}
               format="dd-mm-yyyy"
               maxDate={end}
             />
@@ -77,12 +81,9 @@ export const AdminDatePicker: React.FC<IMaterialsDate> = ({
               variant="static"
               openTo="date"
               value={end}
-              onChange={(value) =>
-                setChanges({
-                  option: 'end',
-                  date: value && value.toISOString(),
-                })
-              }
+              onChange={(value) => {
+                handleDatePicker('end', value);
+              }}
               format="dd-mm-yyyy"
               minDate={start}
             />
diff --git a/src/views/Profile/AdminTable/AdminFilter.tsx b/src/views/Profile/AdminTable/AdminFilter.tsx
index cf12f6062..9e5931e37 100644
--- a/src/views/Profile/AdminTable/AdminFilter.tsx
+++ b/src/views/Profile/AdminTable/AdminFilter.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable */
-import React from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import ListItemText from '@material-ui/core/ListItemText';
 import Select from '@material-ui/core/Select';
 import Checkbox from '@material-ui/core/Checkbox';
-
 import { useStyles } from './styles/AdminFilter.styles';
 import { useTranslation } from 'react-i18next';
 import { langTokens } from '../../../locales/localizationInit';
@@ -49,8 +48,27 @@ export const AdminFilter: React.FC<IMaterialsFilter> = ({
 }) => {
   const ALL_OPTIONS_IDS = allOptions.map((e) => e.id);
 
+  const sortedOptions = [...allOptions].sort((a, b) => {
+    const labelA = a.label || '';
+    const labelB = b.label || '';
+    return labelA.localeCompare(labelB);
+  });
+
   const classes = useStyles();
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => handleClose();
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [open]);
+
+  const handleOpen = useCallback(() => setOpen(true), []);
+
+  const handleClose = useCallback(() => setOpen(false), []);
 
   const handleChange = ({ target }) => {
     if (target?.value) {
@@ -82,6 +100,9 @@ export const AdminFilter: React.FC<IMaterialsFilter> = ({
       <FormControl>
         <Select
           className={classes.filterHeader}
+          open={open}
+          onOpen={handleOpen}
+          onClose={handleClose}
           multiple
           disableUnderline
           displayEmpty
@@ -94,7 +115,7 @@ export const AdminFilter: React.FC<IMaterialsFilter> = ({
             <Checkbox checked={selected?.length === allOptions.length} />
             <ListItemText primary={t(langTokens.common.all)} />
           </MenuItem>
-          {allOptions.map((option) => (
+          {sortedOptions.map((option) => (
             <MenuItem key={option.id} value={option.id}>
               <Checkbox checked={!!selected?.includes(option.id)} />
               <ListItemText primary={option?.label ?? option.name} />
diff --git a/src/views/Profile/AdminTable/AdminTableBody.tsx b/src/views/Profile/AdminTable/AdminTableBody.tsx
index 33e6384bd..89488d5c1 100644
--- a/src/views/Profile/AdminTable/AdminTableBody.tsx
+++ b/src/views/Profile/AdminTable/AdminTableBody.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import {
   Chip,
   TableBody,
@@ -68,9 +69,17 @@ const AdminTableBody: React.FC<IAdminTableBodyProps> = ({ isAdmin }) => {
         <TableCell>{id}</TableCell>
         <TableCell className={classes.titleCol}>
           <Chip label={typeName} className={classes[chipClass] as string} />
-          <Typography variant="h6" component="p" className={classes.title}>
-            {title}
-          </Typography>
+          <Link
+            to={{
+              pathname: '/edit-post',
+              search: `id=${id}`,
+            }}
+            className={classes.title}
+          >
+            <Typography variant="h6" component="p" className={classes.title}>
+              {title}
+            </Typography>
+          </Link>
         </TableCell>
         <TableCell>{t(langTokens.admin[status])}</TableCell>
         <TableCell>
diff --git a/src/views/Profile/AdminTable/AdminTableFilters.tsx b/src/views/Profile/AdminTable/AdminTableFilters.tsx
index 7b2c15ccf..2f4b90c16 100644
--- a/src/views/Profile/AdminTable/AdminTableFilters.tsx
+++ b/src/views/Profile/AdminTable/AdminTableFilters.tsx
@@ -66,25 +66,6 @@ const AdminTableFilters: React.FC = () => {
           filter={QueryTypeEnum.DIRECTIONS}
         />
       </Grid>
-      {isAdmin && (
-        <>
-          <Grid item>
-            <AdminFilter
-              setChanges={boundedSetFilter}
-              allOptions={allPostStatuses}
-              selected={filters.statuses}
-              filter={QueryTypeEnum.STATUSES}
-            />
-          </Grid>
-          <Grid item md={3}>
-            <AdminDatePicker
-              start={date.start}
-              end={date.end}
-              setChanges={boundedSetDate}
-            />
-          </Grid>
-        </>
-      )}
       <Grid item>
         <AdminFilter
           setChanges={boundedSetFilter}
@@ -93,6 +74,15 @@ const AdminTableFilters: React.FC = () => {
           filter={QueryTypeEnum.POST_TYPES}
         />
       </Grid>
+      <Grid item>
+        <AdminFilter
+          setChanges={boundedSetFilter}
+          allOptions={allPostStatuses}
+          selected={filters.statuses}
+          filter={QueryTypeEnum.STATUSES}
+        />
+      </Grid>
+
       {isAdmin && (
         <>
           <Grid item md={2} className={classes.textField}>
@@ -113,6 +103,18 @@ const AdminTableFilters: React.FC = () => {
           </Grid>
         </>
       )}
+
+      {isAdmin && (
+        <>
+          <Grid item md={3}>
+            <AdminDatePicker
+              start={date.start}
+              end={date.end}
+              setChanges={boundedSetDate}
+            />
+          </Grid>
+        </>
+      )}
     </Grid>
   );
 };
diff --git a/src/views/Profile/AdminTable/AdminTablePagination.tsx b/src/views/Profile/AdminTable/AdminTablePagination.tsx
index a6f70e0f2..6b0ceb873 100644
--- a/src/views/Profile/AdminTable/AdminTablePagination.tsx
+++ b/src/views/Profile/AdminTable/AdminTablePagination.tsx
@@ -3,7 +3,6 @@ import { Pagination } from '@material-ui/lab';
 import { useSelector } from 'react-redux';
 import { selectMeta, selectAdminLab, setPage } from '../../../models/adminLab';
 import { useActions } from '../../../shared/hooks';
-
 import { useStyles } from './styles/AdminTablePagination.styles';
 
 const AdminTablePagination: React.FC = () => {
diff --git a/src/views/Profile/AdminTable/styles/AdminTableBody.styles.ts b/src/views/Profile/AdminTable/styles/AdminTableBody.styles.ts
index af61d8fa9..e7b15210b 100644
--- a/src/views/Profile/AdminTable/styles/AdminTableBody.styles.ts
+++ b/src/views/Profile/AdminTable/styles/AdminTableBody.styles.ts
@@ -15,8 +15,14 @@ export const useStyles = makeStyles(
       },
     },
     title: {
+      maxWidth: '250px',
+      '&:hover': {
+        textDecoration: 'underline',
+        cursor: 'pointer',
+      },
       wordWrap: 'break-word',
-      width: '320px',
+      width: 'fit-content',
+      display: 'block',
     },
     default: {
       backgroundColor: theme.palette.background.default,
diff --git a/src/views/Profile/AuthorsList/AuthorListDropdown.tsx b/src/views/Profile/AuthorsList/AuthorListDropdown.tsx
index 189dca84b..0eae85b7a 100644
--- a/src/views/Profile/AuthorsList/AuthorListDropdown.tsx
+++ b/src/views/Profile/AuthorsList/AuthorListDropdown.tsx
@@ -2,10 +2,12 @@ import React from 'react';
 import { FormControl, Select, InputBase, MenuItem } from '@material-ui/core';
 import { useStyles } from './styles/AuthorListDropdown.styles';
 
+export type PageSizeType = Array<number | 'All'>;
+
 interface IAuthorListDropdownProps {
-  pageSizes: number[];
-  selected: number;
-  setChanges: (payload: any) => void;
+  pageSizes: PageSizeType;
+  selected: number | string | undefined;
+  setChanges: (payload: number | unknown) => void;
 }
 
 export const AuthorListDropdown: React.FC<IAuthorListDropdownProps> = ({
diff --git a/src/views/Profile/AuthorsList/AuthorsDeletingDialog.tsx b/src/views/Profile/AuthorsList/AuthorsDeletingDialog.tsx
index 8f8f6a007..542f304ad 100644
--- a/src/views/Profile/AuthorsList/AuthorsDeletingDialog.tsx
+++ b/src/views/Profile/AuthorsList/AuthorsDeletingDialog.tsx
@@ -9,6 +9,8 @@ import {
   IconButton,
 } from '@material-ui/core';
 import { DeleteOutlined } from '@material-ui/icons';
+import { deleteAuthor } from 'models/experts/asyncActions';
+import { useActions } from 'shared/hooks/useActions';
 import { useStyles } from './styles/AuthorsTable.styles';
 import i18n, { langTokens } from '../../../locales/localizationInit';
 
@@ -22,11 +24,13 @@ const AuthorsDeletingDialog: React.FC<IAuthorsDelDialogProps> = (props) => {
   const classes = useStyles();
   const { id, fullName, isAllowedToDelete } = props;
   const [openDialog, setOpenDialog] = useState(false);
+  const [boundDeleteAuthor] = useActions([deleteAuthor]);
 
   const handleOpenDialog = () => {
     setOpenDialog(true);
   };
   const handleCloseDialog = () => {
+    boundDeleteAuthor({ id });
     setOpenDialog(false);
   };
 
diff --git a/src/views/Profile/AuthorsList/AuthorsList.tsx b/src/views/Profile/AuthorsList/AuthorsList.tsx
index 5f1fc3f7e..b3f98b916 100644
--- a/src/views/Profile/AuthorsList/AuthorsList.tsx
+++ b/src/views/Profile/AuthorsList/AuthorsList.tsx
@@ -7,6 +7,7 @@ import {
   Box,
   Button,
   Typography,
+  Link,
 } from '@material-ui/core';
 
 import AuthorsTableHead from './AuthorsTableHead';
@@ -58,13 +59,11 @@ export const AuthorsList: React.FC = () => {
     <>
       <Box className={classes.listFunctionalityPanel}>
         <AuthorsListFilters size={size} author={author} />
-        <Button
-          variant="contained"
-          onClick={() => {}}
-          className={classes.mainButton}
-        >
-          {i18n.t(langTokens.admin.createNewAuthor)}
-        </Button>
+        <Link href="/create-author" underline="none" target="_blank">
+          <Button variant="contained" className={classes.mainButton}>
+            {i18n.t(langTokens.admin.createNewAuthor)}
+          </Button>
+        </Link>
       </Box>
       <TableContainer component={Paper} className={classes.tableContainer}>
         <Table>
diff --git a/src/views/Profile/AuthorsList/AuthorsTableBody.tsx b/src/views/Profile/AuthorsList/AuthorsTableBody.tsx
index 3eda2daf5..c3dea5813 100644
--- a/src/views/Profile/AuthorsList/AuthorsTableBody.tsx
+++ b/src/views/Profile/AuthorsList/AuthorsTableBody.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   IconButton,
+  Link,
   TableBody,
   TableCell,
   TableRow,
@@ -55,13 +56,20 @@ const AuthorsTableBody: React.FC<IAuthorsTableBodyProps> = (props) => {
         <TableCell>{parsedEditedAt}</TableCell>
         <TableCell>
           <div className={classes.modifSection}>
-            <IconButton
-              aria-label="edit profile"
-              onClick={() => handleChangeClick(id)}
-              className={classes.editButton}
+            <Link
+              href={`/edit-author?id=${id}`}
+              underline="none"
+              target="_blank"
             >
-              <EditOutlined />
-            </IconButton>
+              <IconButton
+                aria-label="edit profile"
+                onClick={() => handleChangeClick(id)}
+                className={classes.editButton}
+              >
+                <EditOutlined />
+              </IconButton>
+            </Link>
+
             <AuthorsDeleteBtn
               id={id}
               fullName={fullName}
diff --git a/src/views/Profile/EditAuthor/EditAuthor.tsx b/src/views/Profile/EditAuthor/EditAuthor.tsx
new file mode 100644
index 000000000..320734419
--- /dev/null
+++ b/src/views/Profile/EditAuthor/EditAuthor.tsx
@@ -0,0 +1,48 @@
+import { useQuery } from 'old/lib/hooks/useQuery';
+import { IExpert, LoadingStatusEnum } from 'old/lib/types';
+import { getExpertById } from 'old/lib/utilities/API/api';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { ERROR_404 } from 'old/lib/constants/routes';
+import { LoadingInfo } from 'old/lib/components/Loading/LoadingInfo';
+import { PersonalInfo } from '../PersonalInfo/PersonalInfo';
+
+const EditAuthor = () => {
+  const query = useQuery();
+  const history = useHistory();
+  const authorId = query.get('id');
+  const loading = LoadingStatusEnum.pending;
+
+  const [loadedAuthor, setLoadedAuthor] = useState<IExpert>();
+  const [statusCode, setStatusCode] = useState<number>();
+
+  const fetchAuthor = useCallback(async () => {
+    try {
+      const id = Number(authorId);
+      if (!Number.isInteger(id)) {
+        throw new Error();
+      }
+      const authorRespons = await getExpertById(id);
+      const author = authorRespons.data;
+      setLoadedAuthor(author);
+    } catch (error) {
+      setStatusCode(404);
+    }
+  }, [authorId]);
+
+  useEffect(() => {
+    fetchAuthor();
+  }, []);
+
+  if (statusCode === 404) {
+    history.push(ERROR_404);
+  }
+
+  return loadedAuthor ? (
+    <PersonalInfo author={loadedAuthor} />
+  ) : (
+    <LoadingInfo loading={loading} />
+  );
+};
+
+export default EditAuthor;
diff --git a/src/views/Profile/PersonalInfo/ErrorField.tsx b/src/views/Profile/PersonalInfo/ErrorField.tsx
new file mode 100644
index 000000000..6a5ee3ae9
--- /dev/null
+++ b/src/views/Profile/PersonalInfo/ErrorField.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+
+interface IErrorFieldProps {
+  visitField: boolean;
+  errorField: string;
+}
+
+export const ErrorField = ({
+  visitField,
+  errorField,
+}: IErrorFieldProps): React.ReactElement => {
+  const visibility = visitField && errorField ? 'visible' : 'hidden';
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'right',
+        alignItems: 'center',
+        m: 0,
+        p: 0,
+        height: '20px',
+      }}
+    >
+      <Box
+        component="span"
+        sx={{
+          visibility,
+          my: 2,
+          p: 1,
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          color: 'red',
+        }}
+      >
+        {errorField || ''}
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/views/Profile/PersonalInfo/PersonalInfo.tsx b/src/views/Profile/PersonalInfo/PersonalInfo.tsx
index d94a56144..5e8d9c2b6 100644
--- a/src/views/Profile/PersonalInfo/PersonalInfo.tsx
+++ b/src/views/Profile/PersonalInfo/PersonalInfo.tsx
@@ -1,116 +1,401 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
-import { Avatar, Grid, TextField, InputLabel } from '@material-ui/core';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Avatar,
+  Box,
+  Grid,
+  IconButton,
+  InputLabel,
+  TextField,
+  Typography,
+} from '@material-ui/core';
+import { BasicButton, CancelButton } from 'components/Form';
+import { PhotoCamera } from '@material-ui/icons';
+import { uploadImageToImgur } from 'old/lib/utilities/Imgur/uploadImageToImgur';
+import { getStringFromFile } from 'old/lib/utilities/Imgur/getStringFromFile';
+import _isEqual from 'lodash/isEqual';
 import { useStyles } from './styles/PersonalInfo.styles';
-import { IExpert } from '../../../old/lib/types';
-import { getCurrentUser } from '../../../old/lib/utilities/API/api';
-import { ERROR_404 } from '../../../old/lib/constants/routes';
+import { ErrorField } from './ErrorField';
+import { regex } from './constants/regex';
+import { fields } from './constants/fields';
+import {
+  IEditAuthorProps,
+  IErrorFields,
+  INewAuthorValues,
+  IVisitFields,
+} from './types';
+import i18n, { langTokens } from '../../../locales/localizationInit';
+import RegionCityHandler from './RegionCityHandler';
+import { validation } from './constants/validation';
+import { validateInput } from './utilities/validateInput';
+import { usePrevious } from '../../../old/lib/hooks/usePrevious';
 
-export const PersonalInfo: React.FC = () => {
+export const PersonalInfo: React.FC<IEditAuthorProps> = ({ author }) => {
   const classes = useStyles();
-  const { expertId } = useParams<{ expertId: string }>();
-  const [loadedExpert, setLoadedExpert] = useState<IExpert>();
-  const history = useHistory();
 
-  const fetchExpert = useCallback(async () => {
-    try {
-      const expertResponse = await getCurrentUser();
-      setLoadedExpert(expertResponse.data);
-    } catch (error) {
-      history.push(ERROR_404);
-    }
-  }, [expertId]);
+  const [visitFields, setVisitFields] = useState<IVisitFields>({
+    lastName: false,
+    firstName: false,
+    region: false,
+    city: false,
+    email: false,
+    work: false,
+    bio: false,
+    facebook: false,
+    instagram: false,
+    youtube: false,
+    twitter: false,
+    linkedin: false,
+  });
+  const [toggleButton, setToggleButton] = useState(false);
 
-  useEffect(() => {
-    fetchExpert();
-  }, [fetchExpert]);
+  const [newAuthorValues, setNewAuthorValues] = useState<INewAuthorValues>({
+    avatar: author?.avatar ?? '',
+    firstName: author?.firstName ?? '',
+    lastName: author?.lastName ?? '',
+    regionId: author?.region.id ?? null,
+    cityId: author?.mainInstitution.city.id ?? null,
+    bio: author?.bio ?? '',
+    email: author?.email ?? '',
+    socialNetwork: author?.socialNetworks ?? [null, null, null, null, null],
+    work: author?.mainInstitution.name ?? '',
+  });
+  const previousAuthorValues = usePrevious<INewAuthorValues>(newAuthorValues);
+
+  const errorMessages = useMemo(() => {
+    const errors: IErrorFields = {
+      avatar: '',
+      lastName: '',
+      firstName: '',
+      regionId: '',
+      cityId: '',
+      email: '',
+      work: '',
+      bio: '',
+      socialNetworks: ['', '', '', '', ''],
+      socialNetwoksRequired: '',
+    };
+    errors.avatar = newAuthorValues.avatar
+      ? ''
+      : i18n.t(langTokens.admin.pictureRequired);
+    errors.regionId = newAuthorValues.regionId
+      ? ''
+      : i18n.t(langTokens.admin.fieldCantBeEmpty);
+    errors.cityId = newAuthorValues.cityId
+      ? ''
+      : i18n.t(langTokens.admin.fieldCantBeEmpty);
+    errors.lastName = validateInput(
+      newAuthorValues.lastName,
+      validation.name.min,
+      validation.name.max,
+      validation.name.regexp,
+    );
+    errors.firstName = validateInput(
+      newAuthorValues.firstName,
+      validation.name.min,
+      validation.name.max,
+      validation.name.regexp,
+    );
+    errors.bio = validateInput(
+      newAuthorValues.bio,
+      validation.bio.min,
+      validation.bio.max,
+      validation.bio.regexp,
+    );
+    errors.work = validateInput(
+      newAuthorValues.work,
+      validation.bio.min,
+      validation.bio.max,
+      validation.bio.regexp,
+    );
+    if (!newAuthorValues.email && visitFields.email) {
+      errors.email = i18n.t(langTokens.admin.fieldCantBeEmpty);
+    } else if (
+      newAuthorValues.email &&
+      !regex.validEmail.test(newAuthorValues.email)
+    ) {
+      errors.email = i18n.t(langTokens.admin.wrongEmail);
+    } else {
+      errors.email = '';
+    }
+    newAuthorValues.socialNetwork.forEach((sn, index) => {
+      if (sn) {
+        errors.socialNetworks[index] = validateInput(
+          sn,
+          validation.sn.min,
+          validation.sn.max,
+          validation.sn.regexp,
+        );
+      }
+    });
+    if (newAuthorValues.socialNetwork.some((socialNetwork) => socialNetwork)) {
+      errors.socialNetwoksRequired = '';
+    } else {
+      errors.socialNetwoksRequired = i18n.t(
+        langTokens.admin.minimumOneLinkRequired,
+      );
+    }
+    return errors;
+  }, [newAuthorValues, author]);
 
   const inputChangeHandler = (
-    event: { target: { value: string } },
-    inputIdetifier: string,
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const inputIdentifier = event.target.name;
+    const { value } = event.target;
+    setNewAuthorValues({
+      ...newAuthorValues,
+      [inputIdentifier]: value,
+    });
+  };
+
+  const inputSocialNetworkChangeHandler = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    index: number,
+  ) => {
+    const { value } = event.target;
+    const newSocialNetworks = [...newAuthorValues.socialNetwork];
+    newSocialNetworks.splice(index, 1, value);
+    setNewAuthorValues({
+      ...newAuthorValues,
+      socialNetwork: newSocialNetworks,
+    });
+  };
+
+  const inputAvatarChangeHandler = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const inputIdentifier = event.target.name;
+    if (event.target.files !== null && event.target?.files?.length > 0) {
+      const strFromFile = await getStringFromFile([...event.target.files]);
+      uploadImageToImgur(strFromFile).then((res) => {
+        if (res.data.status === 200) {
+          setNewAuthorValues({
+            ...newAuthorValues,
+            [inputIdentifier]: res.data.data.link,
+          });
+        }
+      });
+    }
+  };
+
+  const blurHandler = (
+    event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
-    const updatedExpert: IExpert | undefined = { ...loadedExpert } as IExpert;
-    updatedExpert[inputIdetifier] = event.target.value;
-    setLoadedExpert(updatedExpert);
+    const inputIdentifier = event.target.name;
+    setVisitFields({ ...visitFields, [inputIdentifier]: true });
+  };
+
+  const buttonClickHandler = () => {
+    // TODO dispatch new author to server
   };
 
+  const isSaveDisabled = useMemo(
+    () =>
+      Object.keys(errorMessages).some((key) => {
+        if (key === 'socialNetworks') {
+          return errorMessages[key].some((socialNetwork) => socialNetwork);
+        }
+        if (errorMessages[key]) {
+          return true;
+        }
+        return false;
+      }),
+    [errorMessages],
+  );
+
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (!_isEqual(previousAuthorValues, newAuthorValues)) {
+        e.preventDefault();
+        e.returnValue =
+          'Зміни не збережені. Ви впевнені, що хочете залишити сторінку?';
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [newAuthorValues, previousAuthorValues]);
+
   return (
     <form>
       <Grid container spacing={6} className={classes.PersonalInfo}>
-        <Grid xs={4}>
+        <Grid item xs={4} container direction="column" alignContent="center">
           <Avatar
-            alt="Pic"
+            alt="Avatar"
             className={classes.Avatar}
-            src={loadedExpert?.avatar}
+            src={newAuthorValues.avatar}
           />
+          <Box display="flex" justifyContent="flex-end">
+            <IconButton aria-label="upload picture" component="label">
+              <input
+                hidden
+                required
+                name="avatar"
+                accept="image/jpeg, image/png, image/tiff, image/heic"
+                type="file"
+                onChange={inputAvatarChangeHandler}
+              />
+              <PhotoCamera className={classes.PhotoCamera} />
+            </IconButton>
+          </Box>
         </Grid>
-        <Grid item xs={4}>
-          <TextField
-            variant="outlined"
-            label="Прізвище"
-            fullWidth
-            value={loadedExpert?.lastName}
-            onChange={(event) => inputChangeHandler(event, 'lastName')}
+        <Grid item xs={8}>
+          <Grid container spacing={2}>
+            <Grid item xs={6}>
+              <ErrorField
+                errorField={errorMessages.lastName}
+                visitField={visitFields.lastName}
+              />
+              <TextField
+                className={classes.TextField}
+                required
+                variant="outlined"
+                label={i18n.t(langTokens.admin.lastName)}
+                name="lastName"
+                fullWidth
+                value={newAuthorValues.lastName}
+                onChange={inputChangeHandler}
+                onBlur={blurHandler}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <ErrorField
+                errorField={errorMessages.firstName}
+                visitField={visitFields.firstName}
+              />
+              <TextField
+                className={classes.TextField}
+                required
+                label={i18n.t(langTokens.admin.firstName)}
+                name="firstName"
+                variant="outlined"
+                fullWidth
+                value={newAuthorValues.firstName}
+                onChange={inputChangeHandler}
+                onBlur={blurHandler}
+              />
+            </Grid>
+          </Grid>
+          <RegionCityHandler
+            newAuthorValues={newAuthorValues}
+            visitFields={visitFields}
+            errorMessages={errorMessages}
+            setNewAuthorValues={setNewAuthorValues}
+            blurHandler={blurHandler}
           />
-          <TextField select variant="outlined" label="Регіон" fullWidth />
         </Grid>
-        <Grid item xs={4}>
+        <Grid
+          item
+          container
+          direction="column"
+          xs={4}
+          className={classes.Contacts}
+        >
+          <InputLabel required className={classes.InputLabel}>
+            {i18n.t(langTokens.admin.socialNetworkLinks)}
+          </InputLabel>
+          {visitFields.email && errorMessages.email && (
+            <Typography className={classes.Typography}>
+              {errorMessages.email}
+            </Typography>
+          )}
           <TextField
-            label="Ім'я"
+            className={classes.TextField}
             variant="outlined"
+            required
             fullWidth
-            value={loadedExpert?.firstName}
-            onChange={(event) => inputChangeHandler(event, 'firstName')}
+            label={i18n.t(langTokens.admin.email)}
+            name="email"
+            value={newAuthorValues.email}
+            onChange={(event) => inputChangeHandler(event)}
+            onBlur={blurHandler}
           />
-          <TextField select variant="outlined" label="Місто" fullWidth />
+          <InputLabel required className={classes.InputLabel}>
+            {i18n.t(langTokens.admin.minimumOneLinkRequired)}
+          </InputLabel>
+          {fields.socialNetworks.map((sn, index) => {
+            return (
+              <Box key={sn.index}>
+                {errorMessages[sn.name] && (
+                  <Typography className={classes.Typography}>
+                    {errorMessages[sn.name]}
+                  </Typography>
+                )}
+                <TextField
+                  variant="outlined"
+                  fullWidth
+                  name={sn.name}
+                  placeholder={sn.placeholder}
+                  value={newAuthorValues.socialNetwork[sn.index]}
+                  onChange={(event) =>
+                    inputSocialNetworkChangeHandler(event, index)
+                  }
+                  onBlur={blurHandler}
+                />
+              </Box>
+            );
+          })}
         </Grid>
-
-        <Grid item direction="column" xs={4} className={classes.Contacts}>
-          <InputLabel>Посилання на персональні сторінки</InputLabel>
-          <TextField
-            variant="outlined"
-            fullWidth
-            placeholder="Електонна пошта"
-            value={loadedExpert?.email}
-          />
-          <TextField
-            variant="outlined"
-            fullWidth
-            placeholder="https://www.facebook.com"
-            value={loadedExpert?.socialNetworks?.[0]}
-          />
-          <TextField
-            variant="outlined"
-            fullWidth
-            placeholder="https://www.instagram.com"
-          />
-          <TextField
-            variant="outlined"
-            fullWidth
-            placeholder="https://www.youtube.com"
-          />
-          <TextField
-            variant="outlined"
-            fullWidth
-            placeholder="https://www.twitter.com"
-          />
+        <Grid item xs={8}>
+          <Box className={classes.WrapperBox}>
+            <InputLabel required className={classes.InputLabel}>
+              {i18n.t(langTokens.admin.mainPlaceOfWork)}
+            </InputLabel>
+            {visitFields.work && errorMessages.work && (
+              <Typography className={classes.Typography}>
+                {errorMessages.work}
+              </Typography>
+            )}
+          </Box>
           <TextField
             variant="outlined"
+            required
             fullWidth
-            placeholder="https://www.linkedin.com"
+            name="work"
+            value={newAuthorValues.work}
+            onChange={inputChangeHandler}
+            onBlur={blurHandler}
           />
-        </Grid>
-        <Grid item xs={8}>
-          <InputLabel>Основне місце роботи</InputLabel>
+          <Box className={classes.WrapperBox}>
+            <InputLabel required className={classes.InputLabel}>
+              {i18n.t(langTokens.admin.biography)}
+            </InputLabel>
+            {visitFields.bio && errorMessages.bio && (
+              <Typography className={classes.Typography}>
+                {errorMessages.bio}
+              </Typography>
+            )}
+          </Box>
           <TextField
+            multiline
+            minRows={12}
             variant="outlined"
+            required
             fullWidth
-            value={loadedExpert?.mainInstitution?.name}
+            name="bio"
+            value={newAuthorValues.bio}
+            onChange={inputChangeHandler}
+            onBlur={blurHandler}
           />
-          <InputLabel>Біографія</InputLabel>
-          <TextField variant="outlined" fullWidth value={loadedExpert?.bio} />
         </Grid>
       </Grid>
+
+      <Box className={classes.ButtonBox}>
+        {author && (
+          <CancelButton
+            label={i18n.t(langTokens.common.cancelChanges)}
+            onClick={() => window.close()}
+          />
+        )}
+        <BasicButton
+          disabled={isSaveDisabled}
+          type="sign"
+          label={i18n.t(langTokens.common.acceptChanges)}
+          className={classes.BasicButton}
+          onClick={buttonClickHandler}
+        />
+      </Box>
     </form>
   );
 };
diff --git a/src/views/Profile/PersonalInfo/RegionCityHandler.tsx b/src/views/Profile/PersonalInfo/RegionCityHandler.tsx
new file mode 100644
index 000000000..322f02335
--- /dev/null
+++ b/src/views/Profile/PersonalInfo/RegionCityHandler.tsx
@@ -0,0 +1,180 @@
+import { Grid, TextField } from '@material-ui/core';
+import { Autocomplete } from '@material-ui/lab';
+import i18n, { langTokens } from 'locales/localizationInit';
+import { RootStateType } from 'models/rootReducer';
+import { IRegion, ICity } from 'old/lib/types';
+import {
+  getCitiesByRegionId,
+  getRegionByCityId,
+} from 'old/lib/utilities/API/api';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { ErrorField } from './ErrorField';
+import { useStyles } from './styles/PersonalInfo.styles';
+import { IRegionCityHandlerProps } from './types';
+
+const RegionCityHandler = ({
+  newAuthorValues,
+  visitFields,
+  errorMessages,
+  setNewAuthorValues,
+  blurHandler,
+}: IRegionCityHandlerProps): JSX.Element => {
+  const classes = useStyles();
+
+  const regions = useSelector(
+    (state: RootStateType) => state.properties.regions,
+  );
+  const cities = useSelector((state: RootStateType) => state.properties.cities);
+  const [selectRegions, setSelectRegions] = useState<IRegion[] | null>(null);
+  const [selectCities, setSelectCities] = useState<ICity[] | null>(null);
+  const [isCitySelect, setIsCitySelect] = useState<boolean>(false);
+
+  const setRegionByCityId = async (id: number) => {
+    try {
+      const res = await getRegionByCityId(id);
+      if (res.status === 200) {
+        const regionResponse = res.data;
+        setSelectRegions([regionResponse]);
+        setNewAuthorValues({
+          ...newAuthorValues,
+          regionId: regionResponse.id,
+          cityId: id,
+        });
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  };
+
+  const setCitiesByRegionId = async (id: number) => {
+    try {
+      const res = await getCitiesByRegionId(id);
+      if (res.status === 200) {
+        const citiesResponse = res.data;
+        setSelectCities(citiesResponse);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  };
+
+  const inputCityChangeHandler = (
+    _,
+    value: ICity | null,
+    inputIdentifier: string,
+  ) => {
+    if (!value) {
+      setIsCitySelect(false);
+      setSelectRegions(null);
+      if (!newAuthorValues.regionId) {
+        setSelectCities(null);
+      }
+      setNewAuthorValues({ ...newAuthorValues, [inputIdentifier]: null });
+    } else {
+      setNewAuthorValues({ ...newAuthorValues, [inputIdentifier]: value.id });
+      setRegionByCityId(value.id);
+      setIsCitySelect(true);
+    }
+  };
+
+  const inputRegionChangeHandler = (
+    _,
+    value: string | '',
+    inputIdentifier: string,
+  ) => {
+    if (!value) {
+      setNewAuthorValues({ ...newAuthorValues, [inputIdentifier]: null });
+      setSelectCities(null);
+      if (!isCitySelect) {
+        setSelectRegions(null);
+      }
+    } else {
+      const regionFromValue = regions.find((region) => region.name === value);
+      if (regionFromValue) {
+        setNewAuthorValues({
+          ...newAuthorValues,
+          [inputIdentifier]: regionFromValue.id,
+        });
+        setCitiesByRegionId(regionFromValue.id);
+        setNewAuthorValues({
+          ...newAuthorValues,
+          [inputIdentifier]: regionFromValue.id,
+        });
+      }
+    }
+  };
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={6}>
+        <ErrorField
+          errorField={errorMessages.regionId}
+          visitField={visitFields.region}
+        />
+        <Autocomplete
+          disablePortal
+          options={selectRegions || regions}
+          fullWidth
+          value={
+            newAuthorValues.regionId
+              ? regions.find((region) => region.id === newAuthorValues.regionId)
+              : null
+          }
+          getOptionLabel={(region: IRegion) => region.name}
+          getOptionSelected={(option, value) => option.id === value.id}
+          onInputChange={(_, value) =>
+            inputRegionChangeHandler(_, value, 'regionId')
+          }
+          renderInput={(params) => (
+            <TextField
+              variant="outlined"
+              className={classes.TextField}
+              required
+              label={i18n.t(langTokens.admin.region)}
+              name="region"
+              onBlur={blurHandler}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...params}
+            />
+          )}
+        />
+      </Grid>
+      <Grid item xs={6}>
+        <ErrorField
+          errorField={errorMessages.cityId}
+          visitField={visitFields.city}
+        />
+        <Autocomplete
+          disablePortal
+          options={selectCities || cities}
+          fullWidth
+          value={
+            newAuthorValues.cityId
+              ? cities.find((city) => city.id === newAuthorValues.cityId)
+              : null
+          }
+          getOptionLabel={(city: ICity) => city.name}
+          getOptionSelected={(option, value) => option.id === value.id}
+          onChange={(_, value) => inputCityChangeHandler(_, value, 'cityId')}
+          renderInput={(params) => (
+            <TextField
+              variant="outlined"
+              className={classes.TextField}
+              required
+              label={i18n.t(langTokens.admin.city)}
+              name="city"
+              onBlur={blurHandler}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...params}
+            />
+          )}
+        />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default RegionCityHandler;
diff --git a/src/views/Profile/PersonalInfo/constants/fields.ts b/src/views/Profile/PersonalInfo/constants/fields.ts
new file mode 100644
index 000000000..a5a3a7d0e
--- /dev/null
+++ b/src/views/Profile/PersonalInfo/constants/fields.ts
@@ -0,0 +1,29 @@
+export const fields = {
+  socialNetworks: [
+    {
+      index: 0,
+      name: 'facebook',
+      placeholder: 'https://www.facebook.com',
+    },
+    {
+      index: 1,
+      name: 'instagram',
+      placeholder: 'https://www.instagram.com',
+    },
+    {
+      index: 2,
+      name: 'youtube',
+      placeholder: 'https://www.youtube.com',
+    },
+    {
+      index: 3,
+      name: 'twitter',
+      placeholder: 'https://www.twitter.com',
+    },
+    {
+      index: 4,
+      name: 'linkedin',
+      placeholder: 'https://www.linkedin.com',
+    },
+  ],
+};
diff --git a/src/views/Profile/PersonalInfo/constants/regex.ts b/src/views/Profile/PersonalInfo/constants/regex.ts
new file mode 100644
index 000000000..b982c06b8
--- /dev/null
+++ b/src/views/Profile/PersonalInfo/constants/regex.ts
@@ -0,0 +1,11 @@
+const validString = new RegExp(
+  '^[a-zA-Zа-яА-ЯїЇєЄґҐіІ0-9 ()"\'\\-\\.,/&№%:@]*$',
+);
+const validEmail = new RegExp(
+  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+);
+
+export const regex = {
+  validEmail,
+  validString,
+};
diff --git a/src/views/Profile/PersonalInfo/constants/validation.ts b/src/views/Profile/PersonalInfo/constants/validation.ts
new file mode 100644
index 000000000..f0cab160f
--- /dev/null
+++ b/src/views/Profile/PersonalInfo/constants/validation.ts
@@ -0,0 +1,19 @@
+import { regex } from './regex';
+
+export const validation = {
+  name: {
+    min: 2,
+    max: 30,
+    regexp: regex.validString,
+  },
+  bio: {
+    min: 3,
+    max: 250,
+    regexp: regex.validString,
+  },
+  sn: {
+    min: 10,
+    max: 150,
+    regexp: regex.validString,
+  },
+};
diff --git a/src/views/Profile/PersonalInfo/styles/PersonalInfo.styles.ts b/src/views/Profile/PersonalInfo/styles/PersonalInfo.styles.ts
index 4977b5814..683682373 100644
--- a/src/views/Profile/PersonalInfo/styles/PersonalInfo.styles.ts
+++ b/src/views/Profile/PersonalInfo/styles/PersonalInfo.styles.ts
@@ -13,17 +13,83 @@ export const useStyles = makeStyles(
         fontWeight: 600,
         fontSize: theme.spacing(3.6),
       },
+      '& .MuiFormLabel-asterisk.MuiInputLabel-asterisk': {
+        color: theme.palette.warning.main,
+      },
+      '& .MuiSvgIcon-root': {
+        fontSize: '1.8rem',
+      },
     },
     Avatar: {
       height: 200,
       width: 200,
-      marginright: 1000,
     },
     Contacts: {
       '& .MuiInputBase-input': {
-        marginTop: theme.spacing(1),
+        display: 'flex',
+        alignItems: 'center',
+        padding: theme.spacing(2.95),
         fontSize: theme.spacing(3.6),
-        height: '1px',
+      },
+    },
+    TextField: {
+      '& .MuiInputLabel-root.Mui-required': {
+        display: 'flex',
+        flexDirection: 'row-reverse',
+      },
+    },
+    InputLabel: {
+      '& ': {
+        display: 'flex',
+        flexDirection: 'row-reverse',
+        justifyContent: 'left',
+        marginBottom: theme.spacing(1),
+      },
+    },
+    PhotoCamera: {
+      '& ': {
+        borderRadius: '1rem',
+        padding: '1px',
+        border: '2px solid',
+        borderColor: theme.palette.custom.colorAquaBlue,
+        color: theme.palette.custom.colorAquaBlue,
+      },
+      '&:hover': {
+        opacity: 0.7,
+      },
+    },
+    BasicButton: {
+      '& ': {
+        borderRadius: theme.spacing(0),
+      },
+    },
+    ButtonBox: {
+      '& ': {
+        display: 'flex',
+        gap: '15px',
+        marginTop: theme.spacing(5),
+        justifyContent: 'right',
+      },
+      [theme.breakpoints.down('xs')]: {
+        '& ': {
+          justifyContent: 'center',
+        },
+      },
+    },
+    WrapperBox: {
+      '& ': {
+        display: 'flex',
+        justifyContent: 'space-between',
+      },
+    },
+    Typography: {
+      '& ': {
+        color: theme.palette.warning.main,
+        fontSize: '0.875rem',
+        height: theme.spacing(3),
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: theme.spacing(1),
       },
     },
   }),
diff --git a/src/views/Profile/PersonalInfo/types.ts b/src/views/Profile/PersonalInfo/types.ts
new file mode 100644
index 000000000..dda25097a
--- /dev/null
+++ b/src/views/Profile/PersonalInfo/types.ts
@@ -0,0 +1,55 @@
+import { IExpert } from 'old/lib/types';
+
+export interface INewAuthorValues {
+  avatar?: string;
+  firstName: string;
+  lastName: string;
+  regionId: number | null;
+  cityId: number | null;
+  bio: string;
+  email?: string;
+  socialNetwork: (string | null)[];
+  work: string;
+}
+
+export interface IErrorFields {
+  avatar: string;
+  lastName: string;
+  firstName: string;
+  regionId: string;
+  cityId: string;
+  email: string;
+  work: string;
+  bio: string;
+  socialNetworks: string[];
+  socialNetwoksRequired: string;
+}
+
+export interface IVisitFields {
+  lastName: boolean;
+  firstName: boolean;
+  region: boolean;
+  city: boolean;
+  email: boolean;
+  work: boolean;
+  bio: boolean;
+  facebook: boolean;
+  instagram: boolean;
+  youtube: boolean;
+  twitter: boolean;
+  linkedin: boolean;
+}
+
+export interface IRegionCityHandlerProps {
+  newAuthorValues: INewAuthorValues;
+  visitFields: IVisitFields;
+  errorMessages: IErrorFields;
+  setNewAuthorValues: React.Dispatch<React.SetStateAction<INewAuthorValues>>;
+  blurHandler: (
+    event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+}
+
+export interface IEditAuthorProps {
+  author?: IExpert;
+}
diff --git a/src/views/Profile/PersonalInfo/utilities/validateInput.ts b/src/views/Profile/PersonalInfo/utilities/validateInput.ts
new file mode 100644
index 000000000..e282141b5
--- /dev/null
+++ b/src/views/Profile/PersonalInfo/utilities/validateInput.ts
@@ -0,0 +1,23 @@
+import i18n, { langTokens } from 'locales/localizationInit';
+
+export const validateInput = (
+  value: string,
+  minSymbols: number,
+  maxSymbols: number,
+  regexp: RegExp,
+): string => {
+  if (value && !regexp.test(value)) {
+    return i18n.t(langTokens.admin.allowedChar);
+  }
+  if (!value || value.length < minSymbols) {
+    return `${i18n.t(langTokens.admin.minRequired)} ${minSymbols} ${i18n.t(
+      langTokens.admin.symbols,
+    )}`;
+  }
+  if (value.length > maxSymbols) {
+    return `${i18n.t(langTokens.admin.maxRequired)} ${maxSymbols} ${i18n.t(
+      langTokens.admin.symbols,
+    )}`;
+  }
+  return '';
+};
diff --git a/src/views/postCreation/RequiredFieldsStyle.ts b/src/views/postCreation/RequiredFieldsStyle.ts
index a86ff5968..e7a43f734 100644
--- a/src/views/postCreation/RequiredFieldsStyle.ts
+++ b/src/views/postCreation/RequiredFieldsStyle.ts
@@ -41,4 +41,14 @@ export const useStyle = makeStyles(() => ({
       fontSize: '20px',
     },
   },
+  dropDown: {
+    marginTop: '0.5rem',
+    width: '8.5rem',
+    '& .MuiSelect-icon': {
+      color: 'black',
+    },
+    '& .MuiMenu-paper': {
+      top: '490px',
+    },
+  },
 }));
diff --git a/src/views/postUpdation/AllPostTypesUpdation.tsx b/src/views/postUpdation/AllPostTypesUpdation.tsx
index 7ca579e9e..dd0d02045 100644
--- a/src/views/postUpdation/AllPostTypesUpdation.tsx
+++ b/src/views/postUpdation/AllPostTypesUpdation.tsx
@@ -1,15 +1,26 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import _ from 'lodash';
-import { Box, TextField, Typography } from '@material-ui/core';
+import { Box, TextField, Typography, List, ListItem } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { DropEvent, FileRejection } from 'react-dropzone';
 import { PageTitle } from 'components/Page/PageTitle';
+import {
+  AuthorListDropdown,
+  PageSizeType,
+} from 'views/Profile/AuthorsList/AuthorListDropdown';
 import { useSelector } from 'react-redux';
 import { CarouselImagesWrapper } from 'views/postCreation/CarouselImagesWrapper';
 import { StatusesForActions } from 'models/adminLab/types';
+import { setChangesSize, selectSize } from 'models/changeLog';
+import { useActions } from 'shared/hooks';
+import { Pagination } from '@material-ui/lab';
 import { sanitizeHtml } from '../../old/lib/utilities/sanitizeHtml';
-import { getAllExperts, updatePost } from '../../old/lib/utilities/API/api';
+import {
+  fetchChangeLog,
+  getAllExperts,
+  updatePost,
+} from '../../old/lib/utilities/API/api';
 import { IDirection, IOrigin, IPost } from '../../old/lib/types';
 import { PostCreationButtons } from '../postCreation/PostCreationButtons';
 import {
@@ -318,6 +329,33 @@ export const AllPostTypesUpdation: React.FC<IAllPostTypesUpdation> = ({
     />
   );
 
+  type ContentChangesType = {
+    id: number;
+    title: string;
+    changes: string;
+    dateOfChange: Date;
+  };
+  const changesPerPage: PageSizeType = [10, 20, 50, 'All'];
+
+  const [changes, setChanges] = useState<ContentChangesType[]>([]);
+  const [setSizePerPage] = useActions([setChangesSize]);
+  const size = useSelector(selectSize);
+  const handleNotesToShowChange = (val) => {
+    setSizePerPage(val);
+  };
+
+  useEffect(() => {
+    const changedMaterials = async () => {
+      if (typeof size === 'string') {
+        const { data } = await fetchChangeLog();
+        return setChanges(data.content);
+      }
+      const { data } = await fetchChangeLog({ size });
+      return setChanges(data.content);
+    };
+    changedMaterials();
+  }, [size]);
+
   return (
     <>
       <PageTitle title={pageTitle} />
@@ -444,6 +482,34 @@ export const AllPostTypesUpdation: React.FC<IAllPostTypesUpdation> = ({
         disabled={isDisabled}
         post={post}
       />
+      <BorderBottom />
+      <Typography component="h2" variant="h2">
+        {t(langTokens.admin.changesList)}
+      </Typography>
+      <Box mt={3}>
+        <AuthorListDropdown
+          pageSizes={changesPerPage || 'All'}
+          setChanges={handleNotesToShowChange}
+          selected={size || 'All'}
+        />
+        <List>
+          {changes.map((item) => {
+            return (
+              <ListItem key={item.id}>
+                <Typography variant="h6" component="h2">
+                  {item.title} {item.changes}:{' '}
+                  {new Date(item.dateOfChange).toUTCString()}
+                </Typography>
+              </ListItem>
+            );
+          })}
+          {changes.length === 0 && (
+            <Typography component="h2" variant="h2">
+              {t(langTokens.admin.noChangesLog)}
+            </Typography>
+          )}
+        </List>
+      </Box>
     </>
   );
 };