diff --git a/labs/lab7/src/chart/Chart.tsx b/labs/lab7/src/chart/Chart.tsx
new file mode 100644
index 0000000..3dac3fb
--- /dev/null
+++ b/labs/lab7/src/chart/Chart.tsx
@@ -0,0 +1,49 @@
+import Navbar from "../components/Navbar";
+import CustomFooter from "../components/CustomFooter";
+import Select from '@mui/material/Select';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import * as React from 'react';
+import {years, countries, types } from "./groupdata";
+import GroupGrid from "./components/GroupGrid";
+
+type tSelect = "Страна" | "Год" | "Тип";
+
+function Chart() {
+  const [group, setGroup] = React.useState<tSelect>("Страна");
+  const [groupData, setGroupData] = React.useState(countries);
+
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setGroup(event.target.value as tSelect);
+    setGroupData([countries, years, types][["Страна", "Год", "Тип"].indexOf(event.target.value)]);
+  }
+
+  return (
+    <>
+      <Navbar active="3" />
+      <Box sx={{ width: "200px", m: "auto" }}>
+        <FormControl fullWidth>
+          <InputLabel> Группировать по </InputLabel>
+          <Select
+            id="select-group"
+            value={group}
+            label="Группировать по"
+            onChange={handleChange}
+          >
+            <MenuItem value="Страна"> Стране </MenuItem>
+            <MenuItem value="Год"> Году </MenuItem>
+            <MenuItem value="Тип"> Типу </MenuItem>
+          </Select>
+        </FormControl>
+      </Box>
+      <GroupGrid data={groupData} />
+      <CustomFooter />
+    </>
+  );
+}
+
+export default Chart;
\ No newline at end of file
diff --git a/labs/lab7/src/chart/components/GroupGrid.tsx b/labs/lab7/src/chart/components/GroupGrid.tsx
new file mode 100644
index 0000000..a676594
--- /dev/null
+++ b/labs/lab7/src/chart/components/GroupGrid.tsx
@@ -0,0 +1,30 @@
+
+import { DataGrid } from "@mui/x-data-grid";
+import type { GridRowsProp, GridColDef } from "@mui/x-data-grid";
+import Container from '@mui/material/Container';
+import { ruRU } from '@mui/x-data-grid/locales';
+import type { tGroup } from "../groupdata";
+type GroupProps = {
+ data: tGroup;
+};
+
+function GroupGrid({ data }: GroupProps) {
+  const rows: GridRowsProp = data;
+  const columns: GridColDef[] = [
+    { field: 'Группа', headerName: 'Группа', flex: 1},
+    { field: 'Минимальная высота', flex: 0.5},
+    { field: 'Максимальная высота', flex: 0.5},
+    { field: 'Средняя высота', flex: 0.5},
+  ]
+  return (
+   <Container maxWidth="lg" sx={{height: '700px', mt: '20px'}}>
+     <DataGrid
+       localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
+       rows={rows}
+       columns={columns}
+    />
+   </Container>
+ )
+}
+
+export default GroupGrid;
\ No newline at end of file
diff --git a/labs/lab7/src/chart/groupdata.tsx b/labs/lab7/src/chart/groupdata.tsx
new file mode 100644
index 0000000..388c976
--- /dev/null
+++ b/labs/lab7/src/chart/groupdata.tsx
@@ -0,0 +1,87 @@
+export type tGroup = {
+      "id": number, 
+      "Группа": string | number, 
+      "Минимальная высота": number , 
+      "Максимальная высота": number , 
+      "Средняя высота": number,
+  }[];
+
+export const  countries: tGroup = [
+    { "id": 1, "Группа": "Вьетнам" , "Минимальная высота": 461 , "Максимальная высота": 461 , "Средняя высота": 461 },
+    { "id": 2, "Группа": "Германия" , "Минимальная высота": 368 , "Максимальная высота": 368 , "Средняя высота": 368 },
+    { "id": 3, "Группа": "Гонконг" , "Минимальная высота": 367 , "Максимальная высота": 484 , "Средняя высота": 410 },
+    { "id": 4, "Группа": "Испания" , "Минимальная высота": 356 , "Максимальная высота": 356 , "Средняя высота": 356 },
+    { "id": 5, "Группа": "Иран" , "Минимальная высота": 435 , "Максимальная высота": 435 , "Средняя высота": 435 },
+    { "id": 6, "Группа": "Казахстан" , "Минимальная высота": 372 , "Максимальная высота": 420 , "Средняя высота": 391 },
+    { "id": 7, "Группа": "Канада" , "Минимальная высота": 355 , "Максимальная высота": 553 , "Средняя высота": 429 },
+    { "id": 8, "Группа": "КНР" , "Минимальная высота": 356 , "Максимальная высота": 632 , "Средняя высота": 464 },
+    { "id": 9, "Группа": "Кувейт" , "Минимальная высота": 372 , "Максимальная высота": 412 , "Средняя высота": 392 },
+    { "id": 10, "Группа": "Латвия" , "Минимальная высота": 369 , "Максимальная высота": 369 , "Средняя высота": 369 },
+    { "id": 11, "Группа": "Малайзия" , "Минимальная высота": 421 , "Максимальная высота": 452 , "Средняя высота": 437 },
+    { "id": 12, "Группа": "ОАЭ" , "Минимальная высота": 355 , "Максимальная высота": 828 , "Средняя высота": 461 },
+    { "id": 13, "Группа": "Польша" , "Минимальная высота": 646 , "Максимальная высота": 646 , "Средняя высота": 646 },
+    { "id": 14, "Группа": "Россия" , "Минимальная высота": 354 , "Максимальная высота": 540 , "Средняя высота": 420 },
+    { "id": 15, "Группа": "Румыния" , "Минимальная высота": 352 , "Максимальная высота": 352 , "Средняя высота": 352 },
+    { "id": 16, "Группа": "Словения" , "Минимальная высота": 360 , "Максимальная высота": 360 , "Средняя высота": 360 },
+    { "id": 17, "Группа": "США" , "Минимальная высота": 350 , "Максимальная высота": 629 , "Средняя высота": 437 },
+    { "id": 18, "Группа": "Тайвань" , "Минимальная высота": 378 , "Максимальная высота": 509 , "Средняя высота": 444 },
+    { "id": 19, "Группа": "Узбекистан" , "Минимальная высота": 350 , "Максимальная высота": 375 , "Средняя высота": 363 },
+    { "id": 20, "Группа": "Украина" , "Минимальная высота": 354 , "Максимальная высота": 385 , "Средняя высота": 370 },
+    { "id": 21, "Группа": "Южная Корея" , "Минимальная высота": 555 , "Максимальная высота": 555 , "Средняя высота": 555 },
+    { "id": 22, "Группа": "Япония" , "Минимальная высота": 634 , "Максимальная высота": 634 , "Средняя высота": 634 }, 
+    ];
+
+
+    export const years: tGroup = [
+        { "id": 1 , "Группа": 1931 , "Максимальная высота": 449 , "Минимальная высота": 449 , "Средняя высота": 449 },
+        { "id": 2 , "Группа": 1961 , "Максимальная высота": 354 , "Минимальная высота": 354 , "Средняя высота": 354 },
+        { "id": 3 , "Группа": 1963 , "Максимальная высота": 629 , "Минимальная высота": 629 , "Средняя высота": 629 },
+        { "id": 4 , "Группа": 1967 , "Максимальная высота": 540 , "Минимальная высота": 540 , "Средняя высота": 540 },
+        { "id": 5 , "Группа": 1968 , "Максимальная высота": 368 , "Минимальная высота": 368 , "Средняя высота": 368 },
+        { "id": 6 , "Группа": 1969 , "Максимальная высота": 457 , "Минимальная высота": 368 , "Средняя высота": 413 },
+        { "id": 7 , "Группа": 1971 , "Максимальная высота": 380 , "Минимальная высота": 380 , "Средняя высота": 380 },
+        { "id": 8 , "Группа": 1973 , "Максимальная высота": 385 , "Минимальная высота": 385 , "Средняя высота": 385 },
+        { "id": 9 , "Группа": 1974 , "Максимальная высота": 646 , "Минимальная высота": 356 , "Средняя высота": 510 },
+        { "id": 10 , "Группа": 1976 , "Максимальная высота": 553 , "Минимальная высота": 355 , "Средняя высота": 423 },
+        { "id": 11 , "Группа": 1977 , "Максимальная высота": 371 , "Минимальная высота": 371 , "Средняя высота": 371 },
+        { "id": 12 , "Группа": 1980 , "Максимальная высота": 350 , "Минимальная высота": 350 , "Средняя высота": 350 },
+        { "id": 13 , "Группа": 1983 , "Максимальная высота": 372 , "Минимальная высота": 372 , "Средняя высота": 372 },
+        { "id": 14 , "Группа": 1985 , "Максимальная высота": 375 , "Минимальная высота": 370 , "Средняя высота": 373 },
+        { "id": 15 , "Группа": 1987 , "Максимальная высота": 420 , "Минимальная высота": 369 , "Средняя высота": 395 },
+        { "id": 16 , "Группа": 1990 , "Максимальная высота": 367 , "Минимальная высота": 367 , "Средняя высота": 367 },
+        { "id": 17 , "Группа": 1991 , "Максимальная высота": 415 , "Минимальная высота": 415 , "Средняя высота": 415 },
+        { "id": 18 , "Группа": 1992 , "Максимальная высота": 405 , "Минимальная высота": 374 , "Средняя высота": 390 },
+        { "id": 19 , "Группа": 1994 , "Максимальная высота": 468 , "Минимальная высота": 468 , "Средняя высота": 468 },
+        { "id": 20 , "Группа": 1995 , "Максимальная высота": 421 , "Минимальная высота": 352 , "Средняя высота": 387 },
+        { "id": 21 , "Группа": 1996 , "Максимальная высота": 384 , "Минимальная высота": 350 , "Средняя высота": 369 },
+        { "id": 22 , "Группа": 1997 , "Максимальная высота": 391 , "Минимальная высота": 378 , "Средняя высота": 385 },
+        { "id": 23 , "Группа": 1998 , "Максимальная высота": 452 , "Минимальная высота": 452 , "Средняя высота": 452 },
+        { "id": 24 , "Группа": 1999 , "Максимальная высота": 421 , "Минимальная высота": 421 , "Средняя высота": 421 },
+        { "id": 25 , "Группа": 2000 , "Максимальная высота": 356 , "Минимальная высота": 355 , "Средняя высота": 356 },
+        { "id": 26 , "Группа": 2003 , "Максимальная высота": 435 , "Минимальная высота": 416 , "Средняя высота": 426 },
+        { "id": 27 , "Группа": 2004 , "Максимальная высота": 509 , "Минимальная высота": 509 , "Средняя высота": 509 },
+        { "id": 28 , "Группа": 2008 , "Максимальная высота": 492 , "Минимальная высота": 363 , "Средняя высота": 407 },
+        { "id": 29 , "Группа": 2009 , "Максимальная высота": 600 , "Минимальная высота": 423 , "Средняя высота": 489 },
+        { "id": 30 , "Группа": 2010 , "Максимальная высота": 828 , "Минимальная высота": 376 , "Средняя высота": 514 },
+        { "id": 31 , "Группа": 2011 , "Максимальная высота": 440 , "Минимальная высота": 440 , "Средняя высота": 440 },
+        { "id": 32 , "Группа": 2012 , "Максимальная высота": 634 , "Минимальная высота": 634 , "Средняя высота": 634 },
+        { "id": 33 , "Группа": 2013 , "Максимальная высота": 632 , "Минимальная высота": 632 , "Средняя высота": 632 },
+        { "id": 34 , "Группа": 2014 , "Максимальная высота": 381 , "Минимальная высота": 381 , "Средняя высота": 381 },
+        { "id": 35 , "Группа": 2015 , "Максимальная высота": 426 , "Минимальная высота": 354 , "Средняя высота": 387 },
+        { "id": 36 , "Группа": 2016 , "Максимальная высота": 374 , "Минимальная высота": 374 , "Средняя высота": 374 },
+        { "id": 37 , "Группа": 2017 , "Максимальная высота": 600 , "Минимальная высота": 555 , "Средняя высота": 578 },
+        { "id": 38 , "Группа": 2018 , "Максимальная высота": 462 , "Минимальная высота": 461 , "Средняя высота": 462 },
+        
+
+    ];    
+
+    export const types: tGroup = [
+        { "id": 1 , "Группа": "Антенная мачта" , "Максимальная высота": 646 , "Минимальная высота": 646 , "Средняя высота": 646 },
+        { "id": 2 , "Группа": "Башня" , "Максимальная высота": 375 , "Минимальная высота": 372 , "Средняя высота": 374 },
+        { "id": 3 , "Группа": "Бетонная башня" , "Максимальная высота": 634 , "Минимальная высота": 350 , "Средняя высота": 444 },
+        { "id": 4 , "Группа": "Гиперболоидная башня" , "Максимальная высота": 600 , "Минимальная высота": 600 , "Средняя высота": 600 },
+        { "id": 5 , "Группа": "Дымовая труба" , "Максимальная высота": 420 , "Минимальная высота": 350 , "Средняя высота": 370 },
+        { "id": 6 , "Группа": "Небоскрёб" , "Максимальная высота": 828 , "Минимальная высота": 354 , "Средняя высота": 441 },
+        { "id": 7 , "Группа": "Радиомачта" , "Максимальная высота": 629 , "Минимальная высота": 354 , "Средняя высота": 492 },
+        { "id": 8 , "Группа": "Решётчатая мачта" , "Максимальная высота": 385 , "Минимальная высота": 385 , "Средняя высота": 385 },        
+    ]; 
\ No newline at end of file
diff --git a/labs/lab7/src/components/Navbar.tsx b/labs/lab7/src/components/Navbar.tsx
index 3fd0ad1..cc1e7a9 100644
--- a/labs/lab7/src/components/Navbar.tsx
+++ b/labs/lab7/src/components/Navbar.tsx
@@ -77,9 +77,11 @@ function NavBar({ active }: ComponentProps) {
                                 Список зданий
                             </Button>
                         </Link>
-                        <Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
-                            Контакты
-                        </Button>
+                        <Link to="/chart">
+                            <Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
+                                Контакты
+                            </Button>
+                        </Link>
 
                     </Box>
                     <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
@@ -97,13 +99,15 @@ function NavBar({ active }: ComponentProps) {
                                 </IconButton>
                             </Box>
                             <MenuList>
-                                <Link to="/">
+                                <Link  style={{ textDecoration: 'none' }} to="/">
                                     <StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
                                 </Link>
-                                <Link to="/list">
+                                <Link  style={{ textDecoration: 'none' }} to="/list">
                                     <StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
                                 </Link>
-                                <StyledMenuItem selected={active == '3'}>Контакты</StyledMenuItem>
+                                <Link  style={{ textDecoration: 'none' }} to="/chart">
+                                    <StyledMenuItem selected={active == '3'}>Диаграммы</StyledMenuItem>
+                                </Link>
                             </MenuList>
                         </Drawer>
                     </Box>
diff --git a/labs/lab7/src/main.tsx b/labs/lab7/src/main.tsx
index e04ccc9..39bd624 100644
--- a/labs/lab7/src/main.tsx
+++ b/labs/lab7/src/main.tsx
@@ -6,9 +6,10 @@ import {
   RouterProvider,
 } from "react-router-dom";
 
-import  List  from "./list/List";
-import  Main  from "./main/Main";
-import  Building  from "./building/Building";
+import List from "./list/List";
+import Main from "./main/Main";
+import Building from "./building/Building";
+import Chart from "./chart/Chart";
 
 const router = createBrowserRouter([
   {
@@ -19,6 +20,10 @@ const router = createBrowserRouter([
     path: "/list",
     element: <List />,
   },
+  {
+    path: "/chart",
+    element: <Chart />,
+  },
   {
     path: "/building/:id",
     element: <Building />,