diff --git a/Header.tsx b/Header.tsx
new file mode 100644
index 0000000..3331061
--- /dev/null
+++ b/Header.tsx
@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import {Box, Toolbar, AppBar, IconButton, Typography, Button} from '@mui/material'
+
+
+const Header = () =>{ 
+    return (
+      <Box bgcolor="white" sx={{ flexGrow: 1}}>
+        <AppBar position='static'>
+           <Toolbar>
+                <Typography variant='h6' component="div" sx={{flexGrow : 1}}>
+                    Система подбора персонала
+                </Typography>
+               <Button color="inherit">Вход</Button>
+            </Toolbar> 
+        </AppBar>
+      </Box>
+    )
+}
+
+export default Header;
\ No newline at end of file
diff --git a/Navigation.tsx b/Navigation.tsx
new file mode 100644
index 0000000..46be669
--- /dev/null
+++ b/Navigation.tsx
@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import {Stack, Button, Typography} from '@mui/material'
+import {Home, People, List, Settings, Book} from '@mui/icons-material'
+
+type Props = {}
+
+function Navigation({}: Props) {
+    const [buttonActive, setButtonActive] = useState<number>(1);
+    
+    const btnNavigateClick =(buttonID:number) =>{
+        setButtonActive(buttonID);
+    }
+    return (
+    <Stack spacing={2} padding={2} justifyContent="flex-start" bgcolor="ButtonHighlight" textAlign="center" borderRadius={2}>
+        <Typography variant='h3' color="primary">Меню</Typography>
+        <Button onClick={() => btnNavigateClick(1)} startIcon={<Home/>} variant={buttonActive === 1 ? "contained" : "text"}>Старт</Button>
+        <Button onClick={() => btnNavigateClick(2)} startIcon={<People/>} variant={buttonActive === 2 ? "contained" : "text"}>Кандидаты</Button>
+        <Button onClick={() => btnNavigateClick(3)} startIcon={<List/>} variant={buttonActive === 3 ? "contained" : "text"}>Заявки</Button>
+        <Button onClick={() => btnNavigateClick(4)} startIcon={<Book/>} variant={buttonActive === 4 ? "contained" : "text"}>Справочники</Button>
+        <Button onClick={() => btnNavigateClick(5)} startIcon={<Settings/>} variant={buttonActive === 5 ? "contained" : "text"}>Настройки</Button>
+    </Stack>
+  )
+};
+
+export default Navigation;
\ No newline at end of file
diff --git a/index.tsx b/index.tsx
new file mode 100644
index 0000000..76cfe96
--- /dev/null
+++ b/index.tsx
@@ -0,0 +1,31 @@
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import reportWebVitals from './reportWebVitals';
+import './style/style.css';
+import Header from './components/Header';
+import Navigation from './components/Navigation';
+
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <div>
+	<div className='app-wrapper'>
+		<div className='app-header'>
+			<Header/>
+		</div>
+		<div className='app-navigation'>
+			<Navigation/>
+		</div>
+		<div className='app-content'>
+			контент
+		</div>
+	</div>
+  </div>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();