diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 660a8c9..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,539 +0,0 @@
-
-
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-@font-face {
-	font-family: "Roboto Regular";
-		src: url("./fonts/roboto-regular/roboto-regular.svg") format("svg");
-		src: url("./fonts/roboto-regular/roboto-regular.ttf") format("truetype");
-		src: url("./fonts/roboto-regular/roboto-regular.woff") format("woff");
-		src: url("./fonts/roboto-regular/roboto-regular.woff2") format("woff2");
-	font-weight: normal;
-	font-style: normal;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.switch-link {
-  margin-top: 15px;
-  text-align: center;
-}
-
-.switch-link button {
-  background: none;
-  border: none;
-  color: #007bff;
-  cursor: pointer;
-  font-size: 14px;
-  text-decoration: underline;
-}
-
-body {
-  font-family: 'Roboto Regular';
-  margin: 0;
-  padding: 0;
-  background-color: #33404d;
-}
-
-body * { transition: all .4s ease; }
-
-ul{
-    list-style-type: none;
-    padding: 0px;
-}
-
-.app {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-/* Страница входа */
-.login-page {
-  background-color: #1f2430;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  margin: 50px auto;
-  max-width: 400px;
-}
-
-.profile-page {
-  background-color: #1f2430;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  margin: 10px auto;
-  max-width: 1200px;
-}  
-
-h2 {
-  text-align: center;
-  color: #CAD1D8;
-  margin-bottom: 20px;
-}
-
-p {
-  text-align: center;
-  color: #CAD1D8;
-  margin-bottom: 0px;
-}
-
-.modal-content p {
-    text-align: left
-}
-
-.modal-content div {
-    margin-bottom: 20px
-}
-.text-block {
-  text-align: left;
-  color: #999999;
-  margin-bottom: 2em;
-}
-
-.com {
-  color: #999999;
-  text-align: left;
-  margin: 10px 0px 10px 0px;
-  margin-bottom: auto;
-}
-
-.com modal-content {
-  text-align: left;
-  color: #999999;
-  margin: 10px 0px 10px 0px;
-  margin-bottom: auto;
-}
-
-.modal-content input{
-    margin: 10px 0px;
-}
-
-.modal-content div{
-    margin: 10px 0px;
-}
-
-.user-info p {
-  text-align: left;
-  color: #CAD1D8;
-  margin: 15px 0;
-  font-size: 20px;
-}
-
-form div {
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: #CAD1D8;
-}
-
-input[type="text"],
-input[type="password"] {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.Important-button:hover {
-  background-color: #cb0101;
-}
-
-.Important-button {
-  width: 100%;
-  padding: 12px;
-  margin: 8px;
-  background-color: #e30000;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-button {
-  width: 100%;
-  padding: 12px;
-  margin: 10px auto;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-.frame {
-    background-color: #33404d;
-    margin: 10px 0px;
-    width: 30%;
-    padding: 6px;
-    border-radius: 6px;
-    font-size: 16px;
-    border: 2px solid #999999
-}
-
-.frame p {
-    font-size: 16px;
-}
-
-.frame:hover {
-  border-color: #CAD1D8;
-}
-
-button:hover {
-    background-color: #0056b3;
-}
-
-button:disabled {
-  background-color: #6c757d;
-  cursor: not-allowed;
-}
-
-/* Сообщения об ошибках */
-.error {
-  background-color: #f8d7da;
-  color: #721c24;
-  padding: 10px;
-  border-radius: 4px;
-  margin-bottom: 15px;
-  text-align: center;
-}
-
-/* Страница профиля */
-.form-group {
-  margin-bottom: 10px;
-}
-
-.form-group label {
-  text-align: left;
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-}
-
-.form-group input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.modal-buttons {
-  display: flex;
-  gap: 10px;
-  margin-top: 20px;
-}
-
-.button-small {
-  width: 30%;
-  min-width: auto;
-  height: auto;
-}
-
-.user-info p {
-  text-align: left;
-  margin: 5px 0px 5px 0px;
-  font-size: 20px;
-}
-
-.buttonName {
-    display: flex;
-}
-
-.buttonName button{
-    background-color: #007bff;
-    margin: 10px 5px;
-    width: 5%;
-    padding: 6px;
-    border-radius: 6px;
-    font-size: 20px;
-}
-
-.buttonName button:hover {
-    background-color: #0056b3;
-}
-
-.com p {
-    color: #CAD1D8;
-    font-size: 18px;
-}
-
-
-
-.kan-ban-list-sort{
-    background-color: #2b3245;
-    padding: 10px;
-    border-radius: 6px;
-    margin-bottom: 20px;
-}
-
-h3 {
-    text-align: left;
-    color: #CAD1D8;
-    margin: 0px;
-}
-
-.nav-sort{
-    display: flex;
-}
-
-.nav-sort button+button{
-    margin-left: 10px
-}
-
-.kan-ban-list {
-    background-color: #2b3245;
-    padding: 10px;
-    border-radius: 6px;
-}
-
-.kan-ban-list .inf {
-    padding: 0px 0px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.kan-ban-list .inf button{
-    width: 200px;
-    margin: 0px;
-}
-
-
-.kan-ban-list ul {
-    margin: 0px
-}
-
-.kan-ban-list ul button{
-    border-radius: 6px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    background-color: #3d4763;;
-}
-
-.kan-ban-list ul button:hover{
-	box-shadow: 0 0 10px 2px #08e8de78;
-}
-
-.kan-ban-list .sort-row{
-    display: flex;
-    justify-content: space-between;
-}
-
-.sort-row p, .sort-row h3{
-    margin: 4px 0px;
-}
-
-.sort-row+.sort-row p {
-    margin: 16px 0px 0px 0px;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/*header*/
-
-.nav-avatar {
-    height: 32px;
-    height: 32px;
-    margin-left: 8px;
-    border-radius: 1000px
-}
-
-.header {
-  background-color: #1f2430;
-  padding: 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  height: 56px;
-}
-
-.header-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 1rem;
-  height: 56px;
-}
-
-.logo h1 {
-  font-family: 'Roboto Regular';
-  margin: 0;
-  font-size: 24px;
-  color: #CAD1D8;
-  text-decoration: none;
-}
-
-h1:hover {
-  color: white;
-}
-
-.logo a {
-  text-decoration: none;
-}
-
-.nav-list {
-  opacity: 0;
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.nav-list.visible {
-    opacity: 1;
-}
-
-.nav-list li {
-  
-  padding: 0 1rem;
-  height: 56px;
-  display: flex;
-  align-items: center;
-}
-
-.nav-list li:hover {
-  box-shadow: #08e8de 0px -2px inset;
-  background-color: rgba(0, 0, 0, 0.25) ;
-}
-
-.nav-list a {
-  text-decoration: none;
-  color: #CAD1D8;
-  display: flex;
-  align-items: center;
-  font-size: 18px;
-  height: 56px;
-}
-
-.nav-list a:hover {
-  color: white;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* Стили для модального окна */
-.confirm-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal-content {
-  background: #1f2430;
-  padding: 20px;
-  border-radius: 8px;
-  text-align: center;
-  min-width: 300px;
-}
-
-.modal-buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px 15px;
-}
-
-.modal-buttons button {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  margin: 8px;
-}
-
-.modal-buttons button:first-child {
-  background: #e30000;
-  color: white;
-}
-
-.modal-buttons button:last-child {
-  background: #007bff;
-  color: white;
-}
-
-.modal-buttons button:hover {
-  background-color: #cb0101
-}
-
-.modal-buttons button:last-child:hover {
-  background-color: #0056b3
-  
-}
-
-
-
-
-
diff --git a/src/App.js b/src/App.js
index 813d7ba..6650ee2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import logo from './logo.svg';
-import './App.css';
-import React from 'react';
+import './css/App.css';
+import './css/Modal.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom'; // Исправленный импорт
 import Login from './Login';
 import Profile from './Profile';
@@ -13,17 +13,17 @@ import OtherProfile from './OtherProfile';
 function App() {
   	return (
         <BrowserRouter>
-          <Routes>
-            <Route path="/login" element={<Login />} />
-            <Route path="/profile" element={<Profile />} />
-            <Route path="/registration" element={<Registration />} />
-            <Route path="/main" element={<Mainpage />} />
-            <Route path="/kanban-boards-list" element={<KBBoardsList />} />
-            <Route path="/kanban-board/:id" element={<KBBoard />} />
-            <Route path="/profile/:id" element={<OtherProfile />} />
-            {/* Корректный редирект на страницу входа */}
-            <Route path="*" element={<Mainpage />} />
-          </Routes>
+            <Routes>
+                <Route path="/login" element={<Login />} />
+                <Route path="/profile" element={<Profile />} />
+                <Route path="/registration" element={<Registration />} />
+                <Route path="/main" element={<Mainpage />} />
+                <Route path="/kanban-boards-list" element={<KBBoardsList />} />
+                <Route path="/kanban-board/:id" element={<KBBoard />} />
+                <Route path="/profile/:id" element={<OtherProfile />} />
+                {/* Корректный редирект на страницу входа */}
+                <Route path="*" element={<Mainpage />} />
+            </Routes>
         </BrowserRouter>
   	);
 }
diff --git a/src/Header.js b/src/Header.js
index cbb9b76..40baaca 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,6 +1,7 @@
-import React, { useState, useEffect  } from 'react';
+import { useState, useEffect  } from 'react';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
+import './css/Header.css';
 
 const Header = () => {
     const [display_name, setDisplay_name] = useState('');
@@ -22,32 +23,36 @@ const Header = () => {
     }, []);
     
     return (
-    <header className="header">
-      <div className="header-container">
-        <div className="logo">
-          <Link to="/main">
-            <h1>Fool-stack</h1>
-          </Link>
-        </div>
-        <nav className="nav">
-          {!isLoading && (
-            <ul className={`nav-list ${isAnimated ? 'visible' : ''}`}>
-              {display_name ? (
-                <>
-                  <li><Link to="/Kanban-Boards-List">Канбан-доски</Link></li>
-                  <li><Link to="/profile">{display_name}<img className="nav-avatar" src={avatar}></img></Link></li>
-                </>
-              ) : (
-                <>
-                  <li><Link to="/registration">Регистрация</Link></li>
-                  <li><Link to="/login">Вход</Link></li>
-                </>
-              )}
-            </ul>
-          )}
-        </nav>
-      </div>
-    </header>
+        <header className="header">
+            <div className="header-container">
+                <div className="logo">
+                    <Link to="/main">
+                        <h1>Fool-stack</h1>
+                    </Link>
+                </div>
+                <nav className="nav">
+                    {!isLoading && (
+                        <ul className={`nav-list ${isAnimated ? 'visible' : ''}`}>
+                            {display_name ? (
+                                <>
+                                    <li><Link to="/Kanban-Boards-List">Канбан-доски</Link></li>
+                                    <li>
+                                        <Link to="/profile">
+                                            {display_name}<img className="nav-avatar" src={avatar} alt=''></img>
+                                        </Link>
+                                    </li>
+                                </>
+                            ) : (
+                                <>
+                                    <li><Link to="/registration">Регистрация</Link></li>
+                                    <li><Link to="/login">Вход</Link></li>
+                                </>
+                            )}
+                        </ul>
+                    )}
+                </nav>
+            </div>
+        </header>
     );
 };
 
diff --git a/src/KBBoard.js b/src/KBBoard.js
index 5f43aa1..b59b347 100644
--- a/src/KBBoard.js
+++ b/src/KBBoard.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import axios from 'axios';
 import Header from './Header';
diff --git a/src/Login.js b/src/Login.js
index 0523f47..30de198 100644
--- a/src/Login.js
+++ b/src/Login.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import Header from './Header';
@@ -20,14 +20,7 @@ const Login = () => {
         setLoading(true);
         try {
             const newUser = { username, password };
-            await axios.post('/api/users/login', newUser,
-                { 
-                    withCredentials: true 
-                    /*headers: { 
-                        'Content-Type': 'application/json' 
-                    }*/
-                }
-            );
+            await axios.post('/api/users/login', newUser, { withCredentials: true });
             setTimeout(() => {
                 navigate('/profile');
             }, 500);
@@ -38,43 +31,43 @@ const Login = () => {
         }
     };
 
-  	return (
-    <>
-        <Header />
-        <div className="login-page">
-          <h2>Вход в систему</h2>
-          {
-            error && <div className="error">{error}</div>
-          }
-          <form onSubmit={handleLogin}>
-            <div>
-              <label>Логин:</label>
-              <input
-                type="text"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                required
-              />
+    return (
+        <>
+            <Header />
+            <div className="login-page">
+                <h2>Вход в систему</h2>
+                {
+                    error && <div className="error">{error}</div>
+                }
+                <form onSubmit={handleLogin}>
+                    <div>
+                        <label>Логин:</label>
+                        <input
+                            type="text"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label>Пароль:</label>
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <button type="submit" disabled={loading}>
+                        {loading ? 'Вход...' : 'Войти'}
+                    </button>
+                </form>
+                <button onClick={handleRegisterClick}>
+                    Зарегистрироваться
+                </button>
             </div>
-            <div>
-              <label>Пароль:</label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-              />
-            </div>
-            <button type="submit" disabled={loading}>
-              {loading ? 'Вход...' : 'Войти'}
-            </button>
-          </form>
-          <button onClick={handleRegisterClick}>
-            Зарегистрироваться
-          </button>
-        </div>
-	  </>
-  );
+        </>
+    );
 };
 
 export default Login;
\ No newline at end of file
diff --git a/src/Mainpage.js b/src/Mainpage.js
index 24fde77..a771ced 100644
--- a/src/Mainpage.js
+++ b/src/Mainpage.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import axios from 'axios';
 import Header from './Header';
 
@@ -7,10 +7,12 @@ const Mainpage = () => {
     const [error, setError] = useState('');
     
     return (
-        <><Header />
-		<div className="">
-      		
-    	</div></>
+        <>
+            <Header />
+            <div className="">
+                
+            </div>
+        </>
 	);
 }
 
diff --git a/src/OtherProfile.js b/src/OtherProfile.js
index 7de5494..512f007 100644
--- a/src/OtherProfile.js
+++ b/src/OtherProfile.js
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import './css/OtherProfile.css';
 import {useParams, useNavigate} from 'react-router-dom';
 import axios from 'axios';
diff --git a/src/Profile.js b/src/Profile.js
index c1d0272..75ce354 100644
--- a/src/Profile.js
+++ b/src/Profile.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import Header from './Header';
@@ -29,18 +29,18 @@ const Profile = () => {
                 // Если нет сессии - редирект на логин
                 setError('Вы не авторизованы');
                 setTimeout(() => {
-                    window.location.href = '/login';
+                    navigate('/login');
                 }, 1500);
             }
         };
         checkSession();
-    }, []);
+    }, [navigate]);
 
     const handleLogout = async () => {
         try {
             await axios.post('/api/users/logout');
             setUser(null);
-            window.location.href = '/login'; // Редирект после выхода
+            navigate('/login'); // Редирект после выхода
         } catch (err) {
             setError('Ошибка');
         }
@@ -100,28 +100,21 @@ const Profile = () => {
         } 
     };
     
-   const changePassword = async (e) => {
- 	 e.preventDefault();
-	  setPasswordError('');
+    const changePassword = async (e) => {
+        e.preventDefault();
+        setPasswordError('');
 
- 	 try {
-       const NewPassword = {old_password, new_password, new_password_confirm}
-  	  await axios.put('/api/users/change_password',
-    	  NewPassword
-   	 , {
-   	   withCredentials: true
-    	});
-    
-  	  alert('Пароль успешно изменён!');
- 	   setShowChangePassword(false);
- 	   setold_password('');
- 	   setnew_password('');
-       setnew_password_confirm('');
-  	} catch (err) {
-   	 setPasswordError(
-    	  err.response?.data?.detail || 'Ошибка при смене пароля'
-  	    );
-	  }
+        try {
+            const NewPassword = {old_password, new_password, new_password_confirm}
+            await axios.put('/api/users/change_password', NewPassword, { withCredentials: true });
+            alert('Пароль успешно изменён!');
+            setShowChangePassword(false);
+            setold_password('');
+            setnew_password('');
+            setnew_password_confirm('');
+        } catch (err) {
+            setPasswordError( err.response?.data?.detail || 'Ошибка при смене пароля' );
+        }
 	};
 
     
@@ -151,11 +144,9 @@ const Profile = () => {
     
 	const deleteAccount = async () => {
         try {
-            await axios.delete('/api/users/me', {
-                withCredentials: true
-            });
+            await axios.delete('/api/users/me', { withCredentials: true });
             setUser(null);
-            window.location.href = '/login';
+            navigate('/login');
             setShowConfirm(false); // Закрываем окно после удаления
         } catch (err) {
             setError('Ошибка удаления');
@@ -163,152 +154,151 @@ const Profile = () => {
         }
     };
   
-  return (
-    <><Header />
-    <div className="profile-page">
+    return (
+        <>
+            <Header />
+            <div className="profile-page">
+                {
+                    error && <div className="error">{error}</div>
+                }	
+                {user && (
+                    <div className="user-info">
+                        <p><strong>Привет, {user}! Добро пожаловать в личный кабинет.</strong></p>
+                        <div className="text-block">Здесь ты сможешь управлять данными своей учётной записи.</div>
+                        <p>Информация об учётной записи</p>
+                        <div className="com">Отображаемое имя</div>
+                        <div className="buttonName">
+                            <div className="frame"><p>{user}</p></div>
+                            <button onClick={OpenWindowName}>✎</button>
+                        </div>
+                        <div className="com">Логин</div>
+                        <div className="buttonName">
+                            <div className="frame"><p>{userName}</p></div>
+                            <button onClick={OpenWindowUserName}>✎</button>
+                        </div>
+                        <p>Изменить пароль</p>
+                        <div className="com">В целях безопасности мы рекомендуем выбрать пароль, который ещё не использовался вами в других учётных записях.</div>
+                        <button onClick={() => setShowChangePassword(true)}className="button-small">Изменить пароль</button>
+                        <button onClick={handleLogout}>Выйти из аккаунта</button>
+                        <button onClick={OpenWindowDelete}>Удалить аккаунт</button>
+                    </div>
+                )}
+                
+                {ShowConfirmUserName && (
+                    <div className="confirm-modal">
+                        <div className="modal-content">
+                            <div><h3>Обновите логин</h3></div>
+                            <div><p>Текущий логин: {userName}</p></div>
+                            <div className="com">Новый логин</div>
+                                <form onSubmit={NewUserName}>
+                                    <div>
+                                        <input
+                                            type="text"
+                                            value={new_username}
+                                            onChange={(e) => setnew_username(e.target.value)}
+                                            required
+                                        />
+                                    </div>
+                                    <button type="submit">Подтвердить</button>
+                                </form>
+                            <button onClick={closeWindowUserName}>Отменить</button>
+                        </div>
+                    </div>
+                )}
+                
+                {ShowConfirmName && (
+                    <div className="confirm-modal">
+                        <div className="modal-content">
+                            <div><h3>Обновите отображаемое имя</h3></div>
+                            <div><p>Текущее отображаемое имя: {user}</p></div>
+                            <div className="com">Новое отображаемое имя</div>
+                            <form onSubmit={NewDisplayName}>
+                                <div>
+                                    <input
+                                        type="text"
+                                        value={new_display_name}
+                                        onChange={(e) => setnew_display_name(e.target.value)}
+                                        required
+                                    />
+                                </div>
+                                <button type="submit">Подтвердить</button>
+                            </form>
+                            <button onClick={closeWindowName}>Отменить</button>
+                        </div>
+                    </div>
+                )}
+                
+                {showChangePassword && (
+                    <div className="confirm-modal">
+                        <div className="modal-content">
+                            <h3>Изменить пароль</h3>
+                            
+                            {passwordError && (
+                                <div className="error" style={{ color: 'red' }}>
+                                    {passwordError}
+                                </div>
+                            )}
 
-      {
-      	error && <div className="error">{error}</div>
-	  }	
+                            <form onSubmit={changePassword}>
+                                <div className="form-group">
+                                    <label>Текущий пароль:</label>
+                                    <input
+                                        type="password"
+                                        value={old_password}
+                                        onChange={(e) => setold_password(e.target.value)}
+                                        required
+                                    />
+                                </div>
 
-      {user && (
-        <div className="user-info">
-          <p><strong>Привет, {user}! Добро пожаловать в личный кабинет.</strong></p>
-          <div className="text-block">Здесь ты сможешь управлять данными своей учётной записи.</div>
-		  <p>Информация об учётной записи</p>
-		  <div className="com">Отображаемое имя</div>
-		  <div className="buttonName">
-              <div className="frame"><p>{user}</p></div>
-              <button onClick={OpenWindowName}>✎</button>
-          </div>
-		  <div className="com">Логин</div>
-		  <div className="buttonName">
-              <div className="frame"><p>{userName}</p></div>
-              <button onClick={OpenWindowUserName}>✎</button>
-          </div>
-		  <p>Изменить пароль</p>
-		  <div className="com">В целях безопасности мы рекомендуем выбрать пароль, который ещё не использовался вами в других учётных записях.</div>
-		  <button onClick={() => setShowChangePassword(true)}
-          className="button-small">Изменить пароль</button>
-          <button onClick={handleLogout}>Выйти из аккаунта</button>
-		  <button onClick={OpenWindowDelete}>Удалить аккаунт</button>
-        </div>
-      )}
-      
-      {ShowConfirmUserName && (
-        <div className="confirm-modal">
-          <div className="modal-content">
-            <div><h3>Обновите логин</h3></div>
-            <div><p>Текущий логин: {userName}</p></div>
-            <div className="com">Новый логин</div>
-            <form onSubmit={NewUserName}>
-            <div>
-              <input
-                type="text"
-                value={new_username}
-                onChange={(e) => setnew_username(e.target.value)}
-                required
-              />
+                                <div className="form-group">
+                                    <label>Новый пароль:</label>
+                                    <input
+                                        type="password"
+                                        value={new_password}
+                                        onChange={(e) => setnew_password(e.target.value)}
+                                        required
+                                    />
+                                </div>
+
+                                <div className="form-group">
+                                    <label>Повторите новый пароль:</label>
+                                    <input
+                                        type="password"
+                                        value={new_password_confirm}
+                                        onChange={(e) => setnew_password_confirm(e.target.value)}
+                                        required
+                                    />
+                                </div>
+
+                                <div className="modal-buttons">
+                                    <button type="submit">Изменить пароль</button>
+                                    <button
+                                        type="button"
+                                        onClick={() => setShowChangePassword(false)}
+                                    >
+                                        Отменить
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                )}
+
+                {/* Всплывающее окно подтверждения */}
+                {showConfirm && (
+                    <div className="confirm-modal">
+                        <div className="modal-content">
+                            <p><strong>Вы действительно хотите удалить аккаунта?</strong></p>
+                            <div className="modal-buttons">
+                                <button onClick={deleteAccount}>Подтвердить</button>
+                                <button onClick={closeWindowDelete}>Отменить</button>
+                            </div>
+                        </div>
+                    </div>
+                )}
             </div>
- 			<button type="submit">Подтвердить</button>
-            </form>
-              <button onClick={closeWindowUserName}>Отменить</button>
-            </div>
-          </div>
-      )}
-      
-      {ShowConfirmName && (
-        <div className="confirm-modal">
-          <div className="modal-content">
-            <div><h3>Обновите отображаемое имя</h3></div>
-            <div><p>Текущее отображаемое имя: {user}</p></div>
-            <div className="com">Новое отображаемое имя</div>
-            <form onSubmit={NewDisplayName}>
-            <div>
-              <input
-                type="text"
-                value={new_display_name}
-                onChange={(e) => setnew_display_name(e.target.value)}
-                required
-              />
-            </div>
- 			<button type="submit">Подтвердить</button>
-            </form>
-              <button onClick={closeWindowName}>Отменить</button>
-            </div>
-          </div>
-      )}
-    
-      {showChangePassword && (
-  <div className="confirm-modal">
-    <div className="modal-content">
-      <h3>Изменить пароль</h3>
-      
-      {passwordError && (
-        <div className="error" style={{ color: 'red' }}>
-          {passwordError}
-        </div>
-      )}
-
-      <form onSubmit={changePassword}>
-        <div className="form-group">
-          <label>Текущий пароль:</label>
-          <input
-            type="password"
-            value={old_password}
-            onChange={(e) => setold_password(e.target.value)}
-            required
-          />
-        </div>
-
-        <div className="form-group">
-          <label>Новый пароль:</label>
-          <input
-            type="password"
-            value={new_password}
-            onChange={(e) => setnew_password(e.target.value)}
-            required
-          />
-        </div>
-
-        <div className="form-group">
-          <label>Повторите новый пароль:</label>
-          <input
-            type="password"
-            value={new_password_confirm}
-            onChange={(e) => setnew_password_confirm(e.target.value)}
-            required
-          />
-        </div>
-
-        <div className="modal-buttons">
-          <button type="submit">Изменить пароль</button>
-          <button
-            type="button"
-            onClick={() => setShowChangePassword(false)}
-          >
-            Отменить
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-)}
-
-      {/* Всплывающее окно подтверждения */}
-      {showConfirm && (
-        <div className="confirm-modal">
-          <div className="modal-content">
-            <p><strong>Вы действительно хотите удалить аккаунта?</strong></p>
-            <div className="modal-buttons">
-          	  <button onClick={deleteAccount}>Подтвердить</button>
-              <button onClick={closeWindowDelete}>Отменить</button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div></>
-  );
+        </>
+    );
 };
 
 export default Profile;
\ No newline at end of file
diff --git a/src/Registration.js b/src/Registration.js
index 007302a..a0946b3 100644
--- a/src/Registration.js
+++ b/src/Registration.js
@@ -26,7 +26,6 @@ const Registration = () => {
             setPassword('');
             setPassword_confirm('');
         } catch (err) {
-            // Обрабатываем ошибки от сервера (например, дубликат password)
             setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
         } finally {
             setLoading(false);
@@ -81,7 +80,7 @@ const Registration = () => {
                     />
         		</div>
         		<button type="submit" disabled={loading}>
-                  {loading ? 'Регистрация...' : 'Зарегистрироваться'}
+                    {loading ? 'Регистрация...' : 'Зарегистрироваться'}
                 </button>
       		</form>
 			<button onClick={handleLoginClick}>
diff --git a/src/_Shablon.js b/src/_Shablon.js
index 1fc8c64..1dc95e3 100644
--- a/src/_Shablon.js
+++ b/src/_Shablon.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import axios from 'axios';
 import Header from './Header';
 
@@ -7,10 +7,12 @@ const Name = () => {
     const [error, setError] = useState('');
     
     return (
-        <><Header />
-		<div className="">
-      		
-    	</div></>
+        <>
+            <Header />
+            <div className="">
+                
+            </div>
+        </>
 	);
 }
 
diff --git a/src/css/App.css b/src/css/App.css
new file mode 100644
index 0000000..b4c36ea
--- /dev/null
+++ b/src/css/App.css
@@ -0,0 +1,306 @@
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+@font-face {
+    font-family: "Roboto Regular";
+        src: url("./../fonts/roboto-regular/roboto-regular.svg") format("svg");
+        src: url("./../fonts/roboto-regular/roboto-regular.ttf") format("truetype");
+        src: url("./../fonts/roboto-regular/roboto-regular.woff") format("woff");
+        src: url("./../fonts/roboto-regular/roboto-regular.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
+
+.App-link {
+    color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+from {
+    transform: rotate(0deg);
+}
+to {
+    transform: rotate(360deg);
+}
+}
+
+.switch-link {
+    margin-top: 15px;
+    text-align: center;
+}
+
+.switch-link button {
+    background: none;
+    border: none;
+    color: #007bff;
+    cursor: pointer;
+    font-size: 14px;
+    text-decoration: underline;
+}
+
+body {
+    font-family: 'Roboto Regular';
+    margin: 0;
+    padding: 0;
+    background-color: #33404d;
+}
+
+body * { transition: all .4s ease; }
+
+ul{
+    list-style-type: none;
+    padding: 0px;
+}
+
+.app {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Страница входа */
+.login-page {
+    background-color: #1f2430;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 50px auto;
+    max-width: 400px;
+}
+
+.profile-page {
+    background-color: #1f2430;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 10px auto;
+    max-width: 1200px;
+}  
+
+h2 {
+    text-align: center;
+    color: #CAD1D8;
+    margin-bottom: 20px;
+}
+
+p {
+    text-align: center;
+    color: #CAD1D8;
+    margin-bottom: 0px;
+}
+
+.modal-content p {
+    text-align: left
+}
+
+.modal-content div {
+    margin-bottom: 20px
+}
+
+.text-block {
+    text-align: left;
+    color: #999999;
+    margin-bottom: 2em;
+}
+
+.com {
+    color: #999999;
+    text-align: left;
+    margin: 10px 0px 10px 0px;
+    margin-bottom: auto;
+}
+
+.com modal-content {
+    text-align: left;
+    color: #999999;
+    margin: 10px 0px 10px 0px;
+    margin-bottom: auto;
+}
+
+.modal-content input{
+    margin: 10px 0px;
+}
+
+.modal-content div{
+    margin: 10px 0px;
+}
+
+.user-info p {
+    text-align: left;
+    color: #CAD1D8;
+    margin: 15px 0;
+    font-size: 20px;
+}
+
+form div {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #CAD1D8;
+}
+
+input[type="text"],
+input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.Important-button:hover {
+    background-color: #cb0101;
+}
+
+.Important-button {
+    width: 100%;
+    padding: 12px;
+    margin: 8px;
+    background-color: #e30000;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button {
+    width: 100%;
+    padding: 12px;
+    margin: 10px auto;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.frame {
+    background-color: #33404d;
+    margin: 10px 0px;
+    width: 30%;
+    padding: 6px;
+    border-radius: 6px;
+    font-size: 16px;
+    border: 2px solid #999999
+}
+
+.frame p {
+    font-size: 16px;
+}
+
+.frame:hover {
+    border-color: #CAD1D8;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+button:disabled {
+    background-color: #6c757d;
+    cursor: not-allowed;
+}
+
+/* Сообщения об ошибках */
+.error {
+    background-color: #f8d7da;
+    color: #721c24;
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+/* Страница профиля */
+.form-group {
+    margin-bottom: 10px;
+}
+
+.form-group label {
+    text-align: left;
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 500;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.modal-buttons {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.button-small {
+    width: 30%;
+    min-width: auto;
+    height: auto;
+}
+
+.user-info p {
+    text-align: left;
+    margin: 5px 0px 5px 0px;
+    font-size: 20px;
+}
+
+.buttonName {
+    display: flex;
+}
+
+.buttonName button{
+    background-color: #007bff;
+    margin: 10px 5px;
+    width: 5%;
+    padding: 6px;
+    border-radius: 6px;
+    font-size: 20px;
+}
+
+.buttonName button:hover {
+    background-color: #0056b3;
+}
+
+.com p {
+    color: #CAD1D8;
+    font-size: 18px;
+}
+
+h3 {
+    text-align: left;
+    color: #CAD1D8;
+    margin: 0px;
+}
diff --git a/src/css/BoardList.css b/src/css/BoardList.css
new file mode 100644
index 0000000..d9670ad
--- /dev/null
+++ b/src/css/BoardList.css
@@ -0,0 +1,63 @@
+.kan-ban-list-sort{
+    background-color: #2b3245;
+    padding: 10px;
+    border-radius: 6px;
+    margin-bottom: 20px;
+}
+
+.nav-sort{
+    display: flex;
+}
+
+.nav-sort button+button{
+    margin-left: 10px
+}
+
+.kan-ban-list {
+    background-color: #2b3245;
+    padding: 10px;
+    border-radius: 6px;
+}
+
+.kan-ban-list .inf {
+    padding: 0px 0px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.kan-ban-list .inf button{
+    width: 200px;
+    margin: 0px;
+}
+
+
+.kan-ban-list ul {
+    margin: 0px
+}
+
+.kan-ban-list ul button{
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    background-color: #3d4763;;
+}
+
+.kan-ban-list ul button:hover{
+	box-shadow: 0 0 10px 2px #08e8de78;
+}
+
+.kan-ban-list .sort-row{
+    display: flex;
+    justify-content: space-between;
+}
+
+.sort-row p, .sort-row h3{
+    margin: 4px 0px;
+}
+
+.sort-row+.sort-row p {
+    margin: 16px 0px 0px 0px;
+}
+
diff --git a/src/css/Header.css b/src/css/Header.css
new file mode 100644
index 0000000..a1cea47
--- /dev/null
+++ b/src/css/Header.css
@@ -0,0 +1,79 @@
+/*header*/
+
+.nav-avatar {
+    height: 32px;
+    height: 32px;
+    margin-left: 8px;
+    border-radius: 1000px
+}
+
+.header {
+  background-color: #1f2430;
+  padding: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 56px;
+}
+
+.header-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1rem;
+  height: 56px;
+}
+
+.logo h1 {
+  font-family: 'Roboto Regular';
+  margin: 0;
+  font-size: 24px;
+  color: #CAD1D8;
+  text-decoration: none;
+}
+
+h1:hover {
+  color: white;
+}
+
+.logo a {
+  text-decoration: none;
+}
+
+.nav-list {
+  opacity: 0;
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-list.visible {
+    opacity: 1;
+}
+
+.nav-list li {
+  
+  padding: 0 1rem;
+  height: 56px;
+  display: flex;
+  align-items: center;
+}
+
+.nav-list li:hover {
+  box-shadow: #08e8de 0px -2px inset;
+  background-color: rgba(0, 0, 0, 0.25) ;
+}
+
+.nav-list a {
+  text-decoration: none;
+  color: #CAD1D8;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  height: 56px;
+}
+
+.nav-list a:hover {
+  color: white;
+}
\ No newline at end of file
diff --git a/src/css/Modal.css b/src/css/Modal.css
new file mode 100644
index 0000000..84d022e
--- /dev/null
+++ b/src/css/Modal.css
@@ -0,0 +1,52 @@
+/* Стили для модального окна */
+.confirm-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background: #1f2430;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+  min-width: 300px;
+}
+
+.modal-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px 15px;
+}
+
+.modal-buttons button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 8px;
+}
+
+.modal-buttons button:first-child {
+  background: #e30000;
+  color: white;
+}
+
+.modal-buttons button:last-child {
+  background: #007bff;
+  color: white;
+}
+
+.modal-buttons button:hover {
+  background-color: #cb0101
+}
+
+.modal-buttons button:last-child:hover {
+  background-color: #0056b3
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d563c0f..7400e9b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function