fix: use another component from the MUI library

application/frontend/src/components/Header/Header.styled.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components"
 
-import { Box, IconButton } from "@mui/material"
+import { Box } from "@mui/material"
 
 export const Container = styled(Box)`
   display: flex;

application/frontend/src/components/NavButton/NavButton.styled.ts

@@ -1,23 +1,23 @@
-import styled from "styled-components"
+import Chip from "@mui/material/Chip"
+import { emphasize, styled } from "@mui/material/styles"
 
-import { Link } from "react-router-dom"
-
-export const StyledButton = styled(Link)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.08);
-  gap: 4px;
-  border-radius: 50px;
-  padding: 4px 12px 4px 8px;
-  text-decoration: none;
-  color: ${(props) => props.theme.palette.text.primary};
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.12);
-    color: ${(props) => props.theme.palette.text.secondary};
+export const StyledBreadcrumb = styled(Chip)(({ theme }) => {
+  const backgroundColor =
+    theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[800]
+  return {
+    backgroundColor,
+    height: theme.spacing(3),
+    color: theme.palette.text.primary,
+    fontWeight: theme.typography.fontWeightRegular,
+    display: "inline-flex",
+    whiteSpace: "nowrap",
+    maxWidth: "fit-content",
+    "&:hover, &:focus": {
+      backgroundColor: emphasize(backgroundColor, 0.06),
+    },
+    "&:active": {
+      boxShadow: theme.shadows[1],
+      backgroundColor: emphasize(backgroundColor, 0.12),
+    },
   }
-`
+}) as typeof Chip

application/frontend/src/components/NavButton/NavButton.tsx

@@ -1,14 +1,15 @@
-import React from "react"
+import * as React from "react"
 
-import { StyledButton } from "./NavButton.styled"
+import { StyledBreadcrumb } from "./NavButton.styled"
 
 interface NavButtonProps {
   to: string
   children: React.ReactNode
+  icon?: React.ReactNode
 }
 
-export const NavButton: React.FC<NavButtonProps> = ({ to, children }) => {
-  return <StyledButton to={to}>{children}</StyledButton>
+export const NavButton: React.FC<NavButtonProps> = ({ to, children, icon }) => {
+  return <StyledBreadcrumb component="a" href={to} label={children} icon={icon} />
 }
 
 export default NavButton

application/frontend/src/pages/project/Project.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 
 import { Settings } from "@mui/icons-material"
+import HomeIcon from "@mui/icons-material/Home"
 import { Typography } from "@mui/material"
 
 import { CreateProjectButton } from "src/components/CreateProjectButton"
@@ -24,7 +25,9 @@ const projects = [
 export const ProjectPage: React.FC = () => {
   return (
     <Container>
-      <NavButton to="/">Home</NavButton>
+      <NavButton to="/" icon={<HomeIcon fontSize="small" />}>
+        Home
+      </NavButton>
       <HeaderSection>
         <TitleSection>
           <SettingsButton>

application/frontend/src/pages/report/Report.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 
 import { Settings } from "@mui/icons-material"
+import HomeIcon from "@mui/icons-material/Home"
 import { Container, Grid } from "@mui/material"
 
 import CreateReportButton from "src/components/CreateReportButton/CreateReportButton"
@@ -105,8 +106,10 @@ export const ReportPage: React.FC = () => {
   return (
     <StyledContainer>
       <Container maxWidth="lg">
-        <NavButton to="/">Home</NavButton>/
-        <NavButton to="/projects">Проект название проекта</NavButton>
+        <NavButton to="/" icon={<HomeIcon fontSize="small" />}>
+          Home
+        </NavButton>
+        /<NavButton to="/projects">Проект название проекта</NavButton>
         <Header container>
           <Grid item>
             <SettingsButton>