improved the design

src/App.jsx

@@ -121,12 +121,11 @@ function App() {
                     overflow: "hidden",
                     bgcolor: "background.default"
                 }}>
-                    <Dashboard user={authState.user} onLogout={handleLogout} />
-                    
-                    <Switch
-                        checked={isDarkMode}
-                        onChange={() => setIsDarkMode(!isDarkMode)}
-                        sx={{ position: "absolute", top: 10, right: 10 }}
+                    <Dashboard
+                        user={authState.user}
+                        onLogout={handleLogout}
+                        isDarkMode={isDarkMode}
+                        setIsDarkMode={setIsDarkMode}
                     />
                 </Box>
             )}

src/Components/Layout/Dashboard.jsx

@@ -41,22 +41,20 @@ const MainContent = styled(Box)(({ theme }) => ({
   flexGrow: 1,
   display: 'flex',
   flexDirection: 'column',
-  padding: theme.spacing(2.5), // 20px
+  padding: theme.spacing(2.5),
   overflow: 'auto',
   backgroundColor: theme.palette.background.default,
 }));
 
 const Content = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.custom.modalBackground,
-  //padding: theme.spacing(2.5),
   borderRadius: '10px',
-  //boxShadow: theme.shadows[2],
   maxWidth: '100%',
   overflow: 'auto',
   color: theme.palette.custom.modalText,
 }));
 
-const Dashboard = () => {
+const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
   const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
   const { sidebarWidth, startResizing } = useSidebarResize(290);
   const [tabContent, setTabContent] = useState({});
@@ -112,20 +110,37 @@ const Dashboard = () => {
           startResizing={startResizing}
           collapsed={collapsed}
           setCollapsed={setCollapsed}
+          isDarkMode={isDarkMode}
+          setIsDarkMode={setIsDarkMode}
         />
         <SidebarResizer onMouseDown={startResizing} />
       </SidebarWrapper>
 
       {/* Основной контент */}
-      <MainContent>
-        {/* Вкладки */}
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+        overflow: 'hidden'
+      }}>
+        {/* Вкладки*/}
+        <Box sx={{
+          borderBottom: 1,
+          borderColor: 'divider',
+          backgroundColor: 'background.default',
+          zIndex: 1,
+          transform: 'translateY(3px)'
+        }}>
           <CustomTabs
             tabs={tabs}
             activeTab={activeTab}
             onTabClick={setActiveTab}
             onCloseTab={handleCloseTab}
           />
+        </Box>
 
+        {/* Остальной контент */}
+        <MainContent>
           {/* Контент вкладки */}
           <Content>
             <TabContent
@@ -137,6 +152,7 @@ const Dashboard = () => {
             />
           </Content>
         </MainContent>
+      </Box>
     </DashboardContainer>
   );
 };

src/Components/Layout/SidebarMenu.jsx

@@ -17,6 +17,7 @@ import MenuItem from "./SidebarMenuComponents/MenuItem";
 import SidebarFooter from "./SidebarMenuComponents/SidebarFooter";
 import { statusManager1 } from "../TreeChart/dataUtils";
 
+
 const SidebarResizer = styled('div')(({ theme }) => ({
     width: "5px",
     cursor: "ew-resize",
@@ -32,7 +33,7 @@ const SidebarResizer = styled('div')(({ theme }) => ({
     zIndex: 2
 }));
 
-const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed, setCollapsed }) => {
+const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed, setCollapsed, isDarkMode, setIsDarkMode }) => {
     const [hovered, setHovered] = useState(false);
     const [menuData, setMenuData] = useState(data);
     const contentCache = useRef({});
@@ -149,9 +150,13 @@ const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed,
                     </List>
 
                     {/* Футер */}
-                    {!collapsed && (
-                        <SidebarFooter />
-                    )}
+
+                    <SidebarFooter
+                        collapsed={collapsed}
+                        isDarkMode={isDarkMode}
+                        setIsDarkMode={setIsDarkMode}
+                    />
+
                 </Box>
 
                 {/* Ресайзер */}

src/Components/Layout/SidebarMenuComponents/SidebarFooter.jsx

@@ -1,9 +1,13 @@
 import React from "react";
+import { Brightness4, Brightness7 } from "@mui/icons-material";
+import { IconButton, Tooltip } from "@mui/material";
 import {
     List,
     ListItem,
     ListItemText,
-    styled
+    styled,
+    Switch,
+    Box
 } from "@mui/material";
 
 const FooterList = styled(List)(({ theme }) => ({
@@ -18,11 +22,15 @@ const FooterListItem = styled(ListItem)(({ theme }) => ({
         backgroundColor: theme.palette.custom.sidebarHover,
     },
     padding: theme.spacing(1, 2),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
 }));
 
-const SidebarFooter = () => {
+const SidebarFooter = ({ collapsed, isDarkMode, setIsDarkMode }) => {
     return (
         <FooterList>
+            {!collapsed && (
                 <FooterListItem button>
                     <ListItemText
                         primary="Помощь"
@@ -32,7 +40,9 @@ const SidebarFooter = () => {
                         }}
                     />
                 </FooterListItem>
-            <FooterListItem button>
+            )}
+            <FooterListItem>
+                {!collapsed && (
                     <ListItemText
                         primary="Настройка"
                         primaryTypographyProps={{
@@ -40,6 +50,26 @@ const SidebarFooter = () => {
                             variant: 'body2'
                         }}
                     />
+                )}
+
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Tooltip title="Переключить тему">
+                        <IconButton
+                            size="small"
+                            onClick={() => setIsDarkMode(!isDarkMode)}
+                            sx={{ color: 'custom.sidebarText' }}
+                        >
+                            {isDarkMode ? <Brightness4 /> : <Brightness7 />}
+                        </IconButton>
+                    </Tooltip>
+                    {!collapsed && (
+                        <Switch
+                            checked={isDarkMode}
+                            onChange={() => setIsDarkMode(!isDarkMode)}
+                            size="small"
+                        />
+                    )}
+                </Box>
             </FooterListItem>
         </FooterList>
     );

src/Components/UI/MUItabs.jsx

@@ -16,7 +16,7 @@ const StyledTab = styled(Tab)(({ theme }) => ({
 
 const CustomTabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
     const handleMouseDown = (e, id) => {
-        if (e.button === 1) { // Middle mouse button
+        if (e.button === 1) {
             e.preventDefault();
             onCloseTab(id);
         }

src/Components/hooks/TabContent.jsx

@@ -6,7 +6,7 @@ const TabContent = ({ activeTab, statusHistories, treeData1, tabContent, handleO
     if (activeTab === "Главная") {
         return (
             <div>
-                <h2>Общий мониторинг состояния системы</h2>
+                <h2 style={{ textAlign: 'center' }}>Общий мониторинг состояния системы</h2>
                 <div>
                     <div style={{ display: 'inline-block', width: '48%', marginRight: '2%' }}>
                         <label>Надежность системы</label>