diff --git a/public/assets/bg.png b/public/assets/bg.png
deleted file mode 100644
index 4bfbb7695a3ce43ab871862826b7a74749a51137..0000000000000000000000000000000000000000
Binary files a/public/assets/bg.png and /dev/null differ
diff --git a/public/assets/bg2.png b/public/assets/bg2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f2a1c008b58cf4815a45cf914af3ac6630a6934
Binary files /dev/null and b/public/assets/bg2.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 273e1c039691350b7adbb23b37d9c53e5ab445a8..9fe4d45836aa451050c9ecd75d8f14ffca8450c5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,39 @@
 import React, { FC } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { HomePage2 } from './components/AuthUser/HomePage2/HomePage2';
 
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#5e5ce4',
+    },
+    secondary: {
+      main: '#e2e45c',
+    },
+  },
+
+  typography: {
+    fontSize: 16,
+  },
+
+  overrides: {
+    MuiTabs: {
+      indicator: {
+        backgroundColor: 'white',
+      },
+    },
+  },
+});
+
 export const App: FC = () => (
   <Router>
     <Switch>
       <Route path="/">
         <div data-testid="App">
-          <HomePage2 />
+          <ThemeProvider theme={theme}>
+            <HomePage2 />
+          </ThemeProvider>
         </div>
       </Route>
     </Switch>
diff --git a/src/components/AuthUser/HomePage2/HomePage2.tsx b/src/components/AuthUser/HomePage2/HomePage2.tsx
index 6c5582a9e8238c333f801c0a5508e616d83d0508..3972ce3c8c664ad243b1a3a2c30fb914e1c76405 100644
--- a/src/components/AuthUser/HomePage2/HomePage2.tsx
+++ b/src/components/AuthUser/HomePage2/HomePage2.tsx
@@ -1,20 +1,44 @@
 import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { CssBaseline } from '@material-ui/core';
+import { CssBaseline, Tabs, Tab, Paper } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   root: {
     minHeight: '100vh',
-    backgroundImage: `url(${'bg.png'})`,
+    backgroundImage: `url(${'/assets/bg2.png'})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+  },
+  tabs: {
+    color: 'white',
+    paddingLeft: '25px',
+    paddingTop: '8px',
+  },
+  tabPan: {
+    paddingLeft: '56px',
+    paddingRight: '56px',
+  },
+  leftAlign: {
+    marginRight: 'auto',
   },
 }));
 
 export const HomePage2: FC = () => {
   const classes = useStyles();
 
+  const [selectedTab, setSelectedTab] = React.useState(0);
+
   return (
     <div className={classes.root}>
       <CssBaseline />
+      <Tabs value={selectedTab} className={classes.tabs}>
+        <Tab label="HomePage" className={classes.tabPan} />
+        <Tab label="Reservation" className={classes.tabPan} />
+        <Tab
+          label="Profile"
+          className={`${classes.tabPan} ${classes.leftAlign}`}
+        />
+      </Tabs>
     </div>
   );
 };