Добавлены стили emotion

src/container/detail/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import Heading from '../../components/heading';
+import { HeadingVariant } from '../../components/heading/types';
 
 const DetailPage = (): React.ReactElement => {
-  return <h1>Detail Page</h1>;
+  return <Heading variant={HeadingVariant.h2}>Detail Page</Heading>;
 };
 
 export default DetailPage;

src/container/list/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import Heading from '../../components/heading';
 
 const ListPage = (): React.ReactElement => {
-  return <h1>List Page New</h1>;
+  return <Heading>List Page New</Heading>;
 };
 
 export default ListPage;

src/container/main/components/layout/header.tsx

@@ -1,31 +1,33 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { getNavigationsValue } from '@brojs/cli';
+import { getNavigationValue } from '@brojs/cli';
+import { HeaderContainer, NavContainer, NavItem, NavLink } from './index.style';
 
 const navigations: Array<{ name: string; href: string }> = [
   {
     name: 'Главная',
-    href: getNavigationsValue('kfu-24-teacher.main')
+    href: getNavigationValue('kfu-24-teacher.main')
   },
   {
     name: 'Детальная информация',
-    href: getNavigationsValue('kfu-24-teacher.detail')
+    href: getNavigationValue('kfu-24-teacher.detail')
   }
 ];
 
 const Header = (): React.ReactElement => {
   return (
-    <header>
-      <ul>
+    <HeaderContainer>
+      <NavContainer>
         {navigations.map((item) => {
           return (
-            <li key={item.name}>
-              <Link to={item.href}>{item.name}</Link>
-            </li>
+            <NavItem key={item.name}>
+              <NavLink to={item.href} end>
+                {item.name}
+              </NavLink>
+            </NavItem>
           );
         })}
-      </ul>
-    </header>
+      </NavContainer>
+    </HeaderContainer>
   );
 };
 

src/container/main/components/layout/index.style.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { NavLink as NavLinkBase } from 'react-router-dom';
+
+export const HeaderContainer = styled('header')``;
+
+export const NavContainer = styled.nav`
+  display: flex;
+  gap: 24px;
+  padding: 12px 0;
+`;
+
+export const NavItem = styled.div``;
+
+export const NavLink = styled(NavLinkBase)`
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+
+  &.active {
+    border-bottom: 2px solid black;
+  }
+`;

src/container/main/router.tsx

@@ -2,22 +2,23 @@ import React from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import ListPage from '../list';
 import DetailPage from '../detail';
-import { getNavigationsValue } from '@brojs/cli';
+import { getNavigationValue } from '@brojs/cli';
 import Layout from './components/layout';
 
 export const router = createBrowserRouter([
   {
-    path: getNavigationsValue('kfu-24-teacher.main'),
+    path: getNavigationValue('kfu-24-teacher.main'),
     element: <Layout />,
     children: [
       {
-        path: getNavigationsValue('kfu-24-teacher.main'),
+        path: getNavigationValue('kfu-24-teacher.main'),
         element: <ListPage />
       },
       {
-        path: getNavigationsValue('kfu-24-teacher.detail'),
+        path: getNavigationValue('kfu-24-teacher.detail'),
         element: <DetailPage />
-      }
+      },
+      { path: '*', element: <h1>404</h1> }
     ]
   }
 ]);