diff --git a/package-lock.json b/package-lock.json
index c70f3d8..7a36899 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "hackaton-form",
       "version": "0.1.0",
       "dependencies": {
+        "@flaticon/flaticon-uicons": "^3.3.1",
         "@headlessui/react": "^2.2.2",
         "@heroicons/react": "^2.2.0",
         "@testing-library/dom": "^10.4.0",
@@ -2487,6 +2488,15 @@
         "npm": ">=9.0.0"
       }
     },
+    "node_modules/@flaticon/flaticon-uicons": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@flaticon/flaticon-uicons/-/flaticon-uicons-3.3.1.tgz",
+      "integrity": "sha512-WN2zuECCdjuGBQrjzN0kpeSygzC5fgF8Q7pDR+FUuGtYWczSdIhIwoD+/fKBEfwqKfNIMZ1WouidevGQ4OJORg==",
+      "license": "SEE LICENSE IN LICENSE",
+      "optionalDependencies": {
+        "esbuild-linux-64": "^0.14.5"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz",
@@ -7437,6 +7447,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/esbuild-linux-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
diff --git a/package.json b/package.json
index 797328c..cc3428f 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@flaticon/flaticon-uicons": "^3.3.1",
     "@headlessui/react": "^2.2.2",
     "@heroicons/react": "^2.2.0",
     "@testing-library/dom": "^10.4.0",
diff --git a/src/dashboard/NetworkMonitor.js b/src/dashboard/NetworkMonitor.js
index 4e5aff0..c824a7b 100644
--- a/src/dashboard/NetworkMonitor.js
+++ b/src/dashboard/NetworkMonitor.js
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { ArrowDownTrayIcon, ArrowUpTrayIcon } from "@heroicons/react/24/outline";
 
 export default function NetworkMonitor(args) {
     const [selectedTab, setSelectedTab] = useState("interfaces");
@@ -9,6 +10,37 @@ export default function NetworkMonitor(args) {
     const handleTabClick = (tabId) => {
         setSelectedTab(tabId);
     };
+
+    const [NetIfaces, setNetIfaces] = useState(
+        [
+            {
+                name: "Ethernet 6",
+                wireless: false,
+                mac: "FF-FF-FF-FF-FF-FF",
+                ip: "192.168.2.5",
+                mask: "255.255.255.0",
+                mtu: 1500,
+                speed_mbit: 2500,
+                status: true,
+                trafic_down_mb: 100,
+                trafic_up_mb: 1000,
+
+            },
+            {
+                name: "Wireles Adapter 1",
+                wireless: true,
+                mac: "F1-FF-0F-FF-1F-F0",
+                ip: "192.168.1.5",
+                mask: "255.255.255.0",
+                mtu: 1500,
+                speed_mbit: 0,
+                status: false,
+                trafic_down_mb: 35,
+                trafic_up_mb: 2,
+
+            }
+        ]
+    );
     return (
         <>
             <div className="flex justify-center md:justify-start">
@@ -18,8 +50,8 @@ export default function NetworkMonitor(args) {
                         <button
                             key={tab.id}
                             onClick={() => handleTabClick(tab.id)}
-                            className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100  ${selectedTab === tab.id
-                                ? "bg-gray-200 dark:bg-gray-800 text-orange-600 font-semibold"
+                            className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100 font-semibold  ${selectedTab === tab.id
+                                ? "bg-gray-200 dark:bg-gray-800 text-orange-600"
                                 : "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-600 duration-300"
                                 }`}
                         >
@@ -29,7 +61,50 @@ export default function NetworkMonitor(args) {
                 </div>
             </div>
             <div className="mt-6">
+                {selectedTab === "interfaces" && (
 
+                    <>
+                        <div className="flex flex-wrap gap-2 flex-col anim-pop">
+                            {NetIfaces.map((iface, index) => (
+                                <div className="max-w-full md:max-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"iface" + index}>
+                                    <div className="flex gap-3">
+                                        {!iface.wireless &&
+                                            <i className="fi fi-rr-ethernet text-2xl dark:text-gray-200"></i>
+                                        }
+                                        {iface.wireless &&
+                                            <i className="fi fi-rr-wifi text-2xl dark:text-gray-200"></i>
+                                        }
+
+                                        <div>
+                                            <div className="flex gap-3 items-center">
+                                                <span className="block text-lg font-bold text-gray-800 dark:text-gray-200">{iface.name}</span>
+
+                                                <span className={"h-3 w-3 " + (iface.status ? "bg-green-500" : "bg-red-500") + " rounded-full shadow-lg " + (iface.status ? "shadow-green-500/50" : "shadow-red-500/50") + " animate-pulse"} />
+                                            </div>
+                                            <span className="block text-sm font-normal text-gray-800 dark:text-gray-200"><span className="font-semibold">{iface.ip}</span> • <span className="text-gray-600 dark:text-gray-300">{iface.mac}</span></span>
+
+                                            <div className="flex gap-5 items-center mt-3">
+                                                <span className="flex gap-2 items-center">
+                                                    <ArrowDownTrayIcon className="h-5 text-gray-700 dark:text-gray-300" />
+                                                    <span className="text-gray-700 dark:text-gray-300">{iface.trafic_down_mb} МБ</span>
+                                                </span>
+                                                <span className="flex gap-2 items-center">
+                                                    <ArrowUpTrayIcon className="h-5 text-gray-700 dark:text-gray-300" />
+                                                    <span className="text-gray-700 dark:text-gray-300">{iface.trafic_up_mb} МБ</span>
+                                                </span>
+                                            </div>
+                                            <span className="flex gap-2 items-center mt-1">
+                                                <span className="text-gray-700 dark:text-gray-300">{iface.speed_mbit} Мбит/c</span>
+                                            </span>
+                                        </div>
+
+
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
             </div>
         </>
     );
diff --git a/src/dashboard/SystemMonitor.js b/src/dashboard/SystemMonitor.js
index b0c904f..6989c20 100644
--- a/src/dashboard/SystemMonitor.js
+++ b/src/dashboard/SystemMonitor.js
@@ -1,9 +1,8 @@
 import React, { useState } from "react";
 import Gauge from "../misc/Gauge";
-import { InformationCircleIcon, ComputerDesktopIcon, CodeBracketIcon, CpuChipIcon, ClockIcon, ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
+import { InformationCircleIcon, ComputerDesktopIcon, CodeBracketIcon, CpuChipIcon, ClockIcon, ChevronDoubleRightIcon, } from "@heroicons/react/24/outline";
 import CpuChart from "../misc/CpuChart";
 
-
 const SystemMonitor = () => {
     // Состояние для отслеживания выбранной вкладки
     const [selectedTab, setSelectedTab] = useState("system");
@@ -37,21 +36,74 @@ const SystemMonitor = () => {
         arch: "AMD64",
         cpu_load: 20,
         mem_load: 80,
-        cpu_model:"AMD Ryzen 5 5600x 6-core processor",
+        cpu_model: "AMD Ryzen 5 5600x 6-core processor",
         cpu_cores: 6,
         cpu_threads: 12,
         memory_gb: 32,
         cpu_chart:
         {
-            "10:00":40,
-            "11:00":34,
-            "12:00":56,
-            "13:00":60,
-            "14:00":80
+            "1": 20,
+            "2": 14,
+            "3": 6,
+            "4": 5,
+            "5": 10,
+            "6": 10,
+            "7": 0,
+            "8": 0
         }
 
 
     });
+    const [Devices, setDevices] = useState({
+        cpu: [{
+            vendor: "AMD",
+            name: "AMD Ryzen 7 5700X 8-Core Processor",
+            desc: "AMD64 Ryzen Processor",
+            arch: "9",
+            freq: 3400,
+            max_freq: 3400,
+            cores: 8,
+            threads: 16,
+            status: "OK"
+        }],
+        graphics: [{
+            name: "AMD Radeon RX 6700 XT",
+            desc: "AMD Radeon RX 6700 XT",
+            driver: "1.1.4",
+            status: "OK"
+        }],
+        drives: [{
+            name: "INTEL SSD",
+            desc: "INTEL SSD ABCDEFGH123457",
+            serial: "ABCDEFGH123457",
+            interface: "IDE",
+            size_gb: 238,
+            status: "OK"
+        }],
+        motherboard: [{
+            name: "B550M PG Riptide",
+            vendor: "ASRock",
+            model: "B550M PG Riptide",
+            serial: "ABCDEFGH123457"
+        },
+        {
+            name: "BIOS",
+            vendor: "American Megatrends LLC",
+            version: "1.1.5",
+            date: "20240111"
+        }],
+        usb: [{
+            name: "AMD USB 3.10 - 1.10 xxxxx",
+            vendor: "AMD",
+            id: "PCI/VEN_1022&....",
+            status: "OK"
+        }],
+        audio: [{
+            name: "AMD Audio device",
+            vendor: "AMD",
+            status: "OK"
+        }]
+    });
 
     // Функция для обработки клика по вкладке
     const handleTabClick = (tabId) => {
@@ -67,8 +119,8 @@ const SystemMonitor = () => {
                         <button
                             key={tab.id}
                             onClick={() => handleTabClick(tab.id)}
-                            className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100  ${selectedTab === tab.id
-                                ? "bg-gray-200 dark:bg-gray-800 text-orange-600 font-semibold"
+                            className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100  font-semibold  ${selectedTab === tab.id
+                                ? "bg-gray-200 dark:bg-gray-800 text-orange-600"
                                 : "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-600 duration-300"
                                 }`}
                         >
@@ -79,8 +131,8 @@ const SystemMonitor = () => {
             </div>
             <div className="mt-6">
                 {selectedTab === "system" && (
-                    <div className="flex gap-3 flex-wrap flex-col md:flex-row dark:text-gray-100">
-                        <div className="md:basis-3/6 w-full border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
+                    <div className="flex gap-3 flex-wrap flex-col md:flex-row dark:text-gray-100 anim-pop">
+                        <div className="md:basis-3/6 w-full border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
                             <h1 className="text-lg font-semibold">Информация о системе</h1>
                             <div className="flex flex-col gap-2 mt-3">
                                 <div className="flex items-start gap-2">
@@ -120,20 +172,20 @@ const SystemMonitor = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className="md:basis-1/6 border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
+                        <div className="md:basis-1/6 border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
                             <h1 className="text-lg font-semibold dark:text-gray-100">Загрузка CPU</h1>
                             <div className=" flex flex-col items-center">
                                 <Gauge value={SystemInfo.cpu_load} title="%" color={PercentColor(SystemInfo.cpu_load)} className="mt-3" />
                             </div>
                         </div>
-                        <div className="md:basis-1/6 border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
+                        <div className="md:basis-1/6 border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
                             <h1 className="text-lg font-semibold dark:text-gray-100">Занято ОЗУ</h1>
                             <div className=" flex flex-col items-center">
                                 <Gauge value={SystemInfo.mem_load} title="%" color={PercentColor(SystemInfo.mem_load)} className="mt-3" />
                             </div>
                         </div>
 
-                        <div className="md:basis-3/6 w-full border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
+                        <div className="md:basis-3/6 w-full border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
                             <h1 className="text-lg font-semibold">Аппаратное обеспечение</h1>
                             <div className="flex flex-col gap-2 mt-3">
                                 <div className="flex items-start gap-2">
@@ -169,8 +221,8 @@ const SystemMonitor = () => {
 
                             </div>
                         </div>
-                        <div className="md:basis-[34.3%] w-full border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
-                            <h1 className="text-lg font-semibold">График загрузки CPU</h1>
+                        <div className="md:basis-[34.3%] w-full border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
+                            <h1 className="text-lg font-semibold">Загрузка ядер CPU, %</h1>
                             <div className="flex flex-col gap-2 mt-3">
                                 <CpuChart chart_dataset={SystemInfo.cpu_chart} />
                             </div>
@@ -178,7 +230,123 @@ const SystemMonitor = () => {
                     </div>
                 )}
                 {selectedTab === "deviceManager" && (
-                    <p>Вот содержимое вкладки "Диспетчер устройств"</p>
+                    <div className="flex flex-col gap-8 text-orange-500 anim-pop">
+                        <div>
+                            <div className="flex items-center gap-2">
+                                <i className="fi fi-rr-microchip text-2xl text-orange-500"></i>
+                                <h1 className="text-lg font-semibold">Процессоры</h1>
+                            </div>
+                            <div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
+                                {Devices.cpu.map((cpu, index) => (
+                                    <div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"cpu" + index}>
+                                        <span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
+                                        <span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.desc}</span>
+
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Архитектура:</span> {cpu.arch}</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Частота:</span> {cpu.freq} Mhz</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Ядра:</span> {cpu.cores}</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Потоки:</span> {cpu.threads}</span>
+
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Статус:</span> {cpu.status}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                        <div>
+                            <div className="flex items-center gap-2">
+                                <i className="fi fi-rr-screen text-2xl text-orange-500"></i>
+                                <h1 className="text-lg font-semibold">Графика</h1>
+                            </div>
+                            <div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
+                                {Devices.graphics.map((cpu, index) => (
+                                    <div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"graphics" + index}>
+                                        <span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
+                                        <span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.desc}</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Драйвер:</span> {cpu.driver}</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Статус:</span> {cpu.status}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                        <div>
+                            <div className="flex items-center gap-2">
+                                <i className="fi fi-rr-hdd text-2xl text-orange-500"></i>
+                                <h1 className="text-lg font-semibold">Диски</h1>
+                            </div>
+                            <div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
+                                {Devices.drives.map((cpu, index) => (
+                                    <div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"drives" + index}>
+                                        <span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
+                                        <span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.desc}</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Сер. номер:</span> {cpu.serial}</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Интерфейс:</span> {cpu.interface}</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Объем:</span> {cpu.size_gb} ГБ</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Статус:</span> {cpu.status}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                        <div>
+                            <div className="flex items-center gap-2">
+                                <i className="fi fi-rr-category-alt text-2xl text-orange-500"></i>
+                                <h1 className="text-lg font-semibold">Материнская плата</h1>
+                            </div>
+                            <div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
+                                {Devices.motherboard.map((cpu, index) => (
+                                    <div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"motherboard" + index}>
+                                        <span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
+                                        <span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.vendor}</span>
+                                        {cpu.version &&
+                                            <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Версия:</span> {cpu.version}</span>
+                                        }
+                                        {cpu.model &&
+                                            <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Модель:</span> {cpu.model}</span>
+                                        }
+                                        {cpu.date &&
+                                            <span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Дата:</span> {cpu.date}</span>
+                                        }
+                                        {cpu.serial &&
+                                            <span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Сер. номер:</span> {cpu.serial}</span>
+                                        }
+
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                        <div>
+                            <div className="flex items-center gap-2">
+                                <i className="fi fi-rr-usb-pendrive text-2xl text-orange-500"></i>
+                                <h1 className="text-lg font-semibold">USB</h1>
+                            </div>
+                            <div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
+                                {Devices.usb.map((cpu, index) => (
+                                    <div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"drives" + index}>
+                                        <span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
+                                        <span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.vendor}</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">ID:</span> {cpu.id}</span>
+
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                        <div>
+                            <div className="flex items-center gap-2">
+                                <i className="fi fi-rr-volume text-2xl text-orange-500"></i>
+                                <h1 className="text-lg font-semibold">Звук</h1>
+                            </div>
+                            <div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
+                                {Devices.audio.map((cpu, index) => (
+                                    <div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"drives" + index}>
+                                        <span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
+                                        <span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.name}</span>
+                                        <span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Статус:</span> {cpu.status}</span>
+
+
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
                 )}
             </div>
 
diff --git a/src/img/icon.ico b/src/img/icon.ico
new file mode 100644
index 0000000..aa98646
Binary files /dev/null and b/src/img/icon.ico differ
diff --git a/src/index.css b/src/index.css
index cd3aa0b..0619e14 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "~@flaticon/flaticon-uicons/css/all/all";
 
 body,html, #root{
   height: 100%;
@@ -18,5 +19,5 @@ body,html, #root{
 }
 
 .anim-pop {
-  animation: anim-pop .3s ease-out;
+  animation: anim-pop .2s ease-in;
 }
diff --git a/src/misc/CpuChart.js b/src/misc/CpuChart.js
index 09bd958..8a1aecc 100644
--- a/src/misc/CpuChart.js
+++ b/src/misc/CpuChart.js
@@ -4,18 +4,18 @@ import {
   CategoryScale,
   LinearScale,
   PointElement,
-  LineElement,
+  BarElement,
   Title,
   Tooltip,
   Legend,
 } from 'chart.js';
-import { Line } from 'react-chartjs-2';
+import { Bar } from 'react-chartjs-2';
 
 ChartJS.register(
   CategoryScale,
   LinearScale,
   PointElement,
-  LineElement,
+  BarElement,
   Title,
   Tooltip,
   Legend
@@ -45,10 +45,10 @@ export default function CpuChart({chart_dataset}) {
         label: 'Загрузка CPU',
         data: Object.values(chart_dataset),
         borderColor: '#ff9f43',
-        backgroundColor: 'rgba(255, 99, 132, 0.5)',
+        backgroundColor: '#ff9f43',
       }
     ],
   };
 
-  return <Line options={options} data={data} />;
+  return <Bar options={options} data={data} />;
 }
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 62336f5..79decc7 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -7,6 +7,7 @@ import SystemMonitor from "../dashboard/SystemMonitor"
 
 import NetworkMonitor from "../dashboard/NetworkMonitor"
 import React, { useState, useEffect } from "react";
+import Logo from "../img/icon.ico";
 
 const user = {
   name: 'Administrator',
@@ -60,13 +61,13 @@ export default function Dashboard(args) {
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="flex h-16 items-center justify-between">
               <div className="flex items-center">
-                <div className="shrink-0">
+                <Link className="shrink-0 bg-gray-100 rounded-lg h-[40px]" to="/dashboard">
                   <img
                     alt="Your Company"
-                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
-                    className="size-8"
+                    src={Logo}
+                    className="h-full"
                   />
-                </div>
+                </Link>
                 <div className="hidden md:block">
                   <div className="ml-10 flex items-baseline space-x-4">
                     {navigation.map((item) => (