Header of the page finished

src/App.tsx

@@ -23,6 +23,11 @@ const theme = createMuiTheme({
         backgroundColor: 'white',
       },
     },
+    MuiTab: {
+      wrapper: {
+        flexDirection: 'row',
+      },
+    },
   },
 });
 

src/components/AuthUser/HomePage2/HomePage2.tsx

 import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { CssBaseline, Tabs, Tab, Paper } from '@material-ui/core';
+import { CssBaseline, Tabs, Tab } from '@material-ui/core';
+import HomeIcon from '@material-ui/icons/Home';
+import ImportContactsIcon from '@material-ui/icons/ImportContacts';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -12,14 +15,19 @@ const useStyles = makeStyles((theme) => ({
   tabs: {
     color: 'white',
     paddingLeft: '25px',
+    paddingRight: '25px',
     paddingTop: '8px',
   },
   tabPan: {
     paddingLeft: '56px',
     paddingRight: '56px',
   },
-  leftAlign: {
-    marginRight: 'auto',
+  rightAlign: {
+    marginLeft: 'auto',
+  },
+  tabIcon: {
+    paddingRight: '10px',
+    fontSize: '38px',
   },
 }));
 
@@ -31,12 +39,25 @@ export const HomePage2: FC = () => {
   return (
     <div className={classes.root}>
       <CssBaseline />
-      <Tabs value={selectedTab} className={classes.tabs}>
-        <Tab label="HomePage" className={classes.tabPan} />
-        <Tab label="Reservation" className={classes.tabPan} />
+      <Tabs
+        value={selectedTab}
+        className={classes.tabs}
+        TabIndicatorProps={{ style: { display: 'none' } }}
+      >
+        <Tab
+          label="HomePage"
+          icon={<HomeIcon className={classes.tabIcon} />}
+          className={classes.tabPan}
+        />
+        <Tab
+          label="Reservation"
+          icon={<ImportContactsIcon className={classes.tabIcon} />}
+          className={`${classes.tabPan} ${classes.rightAlign}`}
+        />
         <Tab
           label="Profile"
-          className={`${classes.tabPan} ${classes.leftAlign}`}
+          className={classes.tabPan}
+          icon={<AccountCircleIcon className={classes.tabIcon} />}
         />
       </Tabs>
     </div>