diff --git a/frontend/package.json b/frontend/package.json
index 51e644a..15eba81 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -44,5 +44,6 @@
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard-vue": "^1.0.0",
     "vite": "^6.2.3"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 63e7762..43d3ac6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -18,11 +18,41 @@
   const isLoading = ref(false);
 
   // Использование composable для аутентификации
-  const { isAuthenticated } = useAuth();
+  const auth = useAuth();
 
-  watch(isAuthenticated, (newValue, oldValue) => {
+  // Мониторинг изменений состояния аутентификации
+  watch(auth.isAuthenticated, (newValue, oldValue) => {
     if (newValue !== oldValue) {
-      console.log('Состояние аутентификации изменилось:', newValue);
+      console.log('[App] Состояние аутентификации изменилось:', newValue);
     }
   });
 </script>
+
+<style>
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 5px solid var(--color-grey-light);
+  border-top: 5px solid var(--color-primary);
+  border-radius: 50%;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
diff --git a/frontend/src/assets/styles/base.css b/frontend/src/assets/styles/base.css
new file mode 100644
index 0000000..9298554
--- /dev/null
+++ b/frontend/src/assets/styles/base.css
@@ -0,0 +1,58 @@
+/* frontend/src/assets/styles/base.css */
+
+/* Общие стили для всех элементов */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  background-color: var(--color-white);
+  color: var(--color-dark);
+  font-size: var(--font-size-md); /* Добавим базовый размер шрифта */
+  line-height: 1.5; /* Добавим базовую высоту строки */
+}
+
+/* Стили для монопространственных шрифтов (код, верификация) */
+code, .verification-code code, .address {
+  font-family: 'Courier New', Courier, monospace;
+}
+
+/* Унификация размеров шрифтов */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  line-height: 1.3; /* Сделаем заголовки чуть плотнее */
+  margin-bottom: var(--spacing-md); /* Добавим отступ снизу по умолчанию */
+}
+
+h1 { font-size: var(--font-size-xxl); }
+h2 { font-size: var(--font-size-xl); }
+h3 { font-size: var(--font-size-lg); }
+/* h3 из home.css имел margin-bottom, убрали здесь, чтобы не дублировать */
+
+p {
+  /* font-size и line-height уже заданы для body */
+  margin-bottom: var(--spacing-md); /* Добавим отступ снизу */
+}
+
+input, textarea, button {
+  font-family: inherit; /* Наследуем шрифт */
+  font-size: inherit; /* Наследуем размер шрифта */
+}
+
+button {
+    cursor: pointer; /* Указатель для всех кнопок */
+}
+
+a {
+    color: var(--color-primary); /* Базовый цвет ссылок */
+    text-decoration: none; /* Убираем подчеркивание по умолчанию */
+}
+
+a:hover {
+    text-decoration: underline; /* Подчеркивание при наведении */
+} 
\ No newline at end of file
diff --git a/frontend/src/assets/styles/home.css b/frontend/src/assets/styles/home.css
index 1864d15..65d9de4 100644
--- a/frontend/src/assets/styles/home.css
+++ b/frontend/src/assets/styles/home.css
@@ -51,7 +51,6 @@
   --transition-normal: 0.3s ease;
   
   /* Размеры компонентов */
-  --sidebar-width: 110px;
   --sidebar-expanded-width: 325px;
   --nav-btn-size: 40px;
   --chat-input-min-height: 100px;
@@ -130,16 +129,13 @@ input, textarea {
   display: flex;
   flex-direction: column;
   max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-lg);
+  margin: 0;
+  padding: 0 20px;
   width: 100%;
+  background-color: var(--color-white);
 }
 
 /* Адаптация контента при боковой панели */
-.sidebar-expanded ~ .main-content {
-  margin-left: 190px;
-}
-
 .main-content.no-right-sidebar {
   margin-right: 190px;
 }
@@ -148,159 +144,15 @@ input, textarea {
   margin-right: 190px;
 }
 
-/* Стили для боковой панели (sidebar) */
-.sidebar {
-  width: var(--sidebar-width);
-  min-width: var(--sidebar-width);
-  background-color: var(--color-light);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: var(--spacing-lg);
-  position: fixed;
-  height: 100vh;
-  z-index: 2;
-  box-shadow: var(--shadow-md);
-}
-
-.sidebar.sidebar-expanded {
-  width: var(--sidebar-expanded-width);
-  min-width: var(--sidebar-expanded-width);
-}
-
-/* Кнопка меню в боковой панели */
-.menu-button {
-  width: var(--nav-btn-size);
-  height: var(--nav-btn-size);
-  background: var(--color-white);
-  border: 1px solid var(--color-dark);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 68px;
-  position: fixed;
-  left: 35px;
-}
-
-.hamburger {
-  width: 24px;
-  height: 3px;
-  background-color: var(--color-dark);
-  position: relative;
-}
-
-.hamburger::before,
-.hamburger::after {
-  content: '';
-  position: absolute;
-  width: 24px;
-  height: 3px;
-  background-color: var(--color-dark);
-  left: 0;
-}
-
-.hamburger::before {
-  top: -8px;
-}
-
-.hamburger::after {
-  bottom: -8px;
-}
-
-/* Навигационные кнопки */
-.nav-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  width: var(--sidebar-width);
-  padding: 0;
-  position: fixed;
-  left: 35px;
-  top: 108px;
-}
-
-.nav-btn {
-  width: var(--nav-btn-size);
-  height: var(--nav-btn-size);
-  border: 1px solid var(--color-dark);
-  border-radius: var(--radius-sm);
-  background: var(--color-white);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  padding: 0;
-  font-size: var(--font-size-lg);
-}
-
-.nav-btn-text {
-  font-size: var(--font-size-lg);
-  color: var(--color-dark);
-  opacity: 0;
-  visibility: hidden;
-  white-space: nowrap;
-  position: absolute;
-  left: 65px;
-}
-
-.sidebar-expanded .nav-btn-text {
-  opacity: 1;
-  visibility: visible;
-}
-
-.nav-btn-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.sidebar-expanded .nav-btn {
-  width: auto;
-  min-width: 200px;
-  text-align: left;
-  padding-left: 40px;
-}
-
-/* Кнопка в нижней части боковой панели */
-.sidebar-bottom-btn {
-  position: fixed;
-  bottom: 30px;
-  left: 35px;
-  width: var(--nav-btn-size);
-  height: var(--nav-btn-size);
-  transition: width var(--transition-normal);
-}
-
-.sidebar-expanded .sidebar-bottom-btn {
-  width: auto;
-  min-width: 200px;
-  text-align: left;
-  padding-left: 40px;
-}
-
-.sidebar-expanded .nav-btn-number {
-  position: absolute;
-  left: 10px;
-}
-
-.sidebar-expanded .sidebar-bottom-btn .nav-btn-text {
-  opacity: 1;
-  visibility: visible;
-  position: static;
-  margin-left: 5px;
-  display: inline-block;
-}
-
 /* Стили для контейнера чата */
 .chat-container {
   flex: 1;
   display: flex;
   flex-direction: column;
-  margin: var(--spacing-lg) 0 35px 0;
+  margin: var(--spacing-lg) auto;
   min-height: 500px;
+  max-width: 1150px;
+  width: 100%;
   position: relative;
 }
 
@@ -316,6 +168,7 @@ input, textarea {
   top: 0;
   left: 0;
   right: 0;
+  bottom: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
   transition: bottom var(--transition-normal);
 }
 
@@ -632,7 +485,7 @@ input, textarea {
 }
 
 /* Стили для правой панели */
-  .wallet-sidebar {
+.wallet-sidebar {
   position: fixed;
   top: 0;
   right: 0;
@@ -660,382 +513,10 @@ input, textarea {
   gap: var(--spacing-lg);
 }
 
-/* Блок с кнопкой отключения */
-.disconnect-block {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-lg);
-  position: relative;
-}
-
-.disconnect-btn {
-  width: 100%;
-  height: 48px;
-  background-color: var(--color-white);
-  border: 1px solid var(--color-error);
-  color: var(--color-error);
-  border-radius: var(--radius-lg);
-  font-size: var(--font-size-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all var(--transition-normal);
-}
-
-.disconnect-btn:hover {
-  background-color: #ffebee;
-}
-
-/* Кнопка закрытия */
-.close-wallet-sidebar {
-  width: 48px;
-  height: 48px;
-  min-width: 48px;
-  background-color: var(--color-white);
-  color: var(--color-dark);
-  border: 1px solid var(--color-grey);
-  border-radius: var(--radius-lg);
-  font-size: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition: all var(--transition-normal);
-  margin-left: var(--spacing-sm);
-}
-
-.close-wallet-sidebar:hover {
-  background-color: var(--color-grey-light);
-  border-color: var(--color-dark);
-}
-
-/* Блок идентификаторов */
-.identifiers-block {
-  width: 100%;
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-lg);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  margin-bottom: var(--spacing-lg);
-}
-
-.identifiers-block h3 {
-  margin: 0 0 var(--spacing-md) 0;
-  font-size: var(--font-size-xl);
-  color: var(--color-dark);
-  border-bottom: 1px solid var(--color-grey-light);
-  padding-bottom: var(--spacing-sm);
-}
-
-.identifier-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing-sm);
-  font-size: var(--font-size-md);
-}
-
-.identifier-item:last-child {
-  margin-bottom: 0;
-}
-
-.identifier-label {
-  min-width: 100px;
-  color: var(--color-grey);
-  font-weight: 500;
-}
-
-.identifier-value {
-  flex: 1;
-  font-family: monospace;
-  color: var(--color-dark);
-  word-break: break-all;
-}
-
-/* Медиа-запросы */
-@media screen and (min-width: 1200px) {
-  .wallet-sidebar {
-    width: 30%;
-    max-width: 550px;
-  }
-}
-
-@media screen and (min-width: 769px) and (max-width: 1199px) {
-  .wallet-sidebar {
-    width: 40%;
-    max-width: 500px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .wallet-sidebar {
-    padding: var(--spacing-md);
-  }
-
-  .wallet-sidebar-content {
-    padding: 0;
-    gap: var(--spacing-md);
-  }
-
-  .disconnect-block {
-    margin-bottom: var(--spacing-md);
-  }
-
-  .disconnect-btn,
-  .close-wallet-sidebar {
-    height: 42px;
-  }
-
-  .close-wallet-sidebar {
-    width: 42px;
-    min-width: 42px;
-    font-size: 18px;
-  }
-
-  .identifiers-block {
-    padding: var(--spacing-md);
-  }
-
-  .identifier-item {
-    font-size: var(--font-size-sm);
-    margin-bottom: var(--spacing-xs);
-  }
-
-  .identifier-label {
-    min-width: 80px;
-  }
-}
-
-@media screen and (max-width: 480px) {
-  .wallet-sidebar {
-    padding: var(--spacing-sm);
-  }
-
-  .wallet-sidebar-content {
-    gap: var(--spacing-sm);
-  }
-
-  .disconnect-block {
-    margin-bottom: var(--spacing-sm);
-  }
-
-  .disconnect-btn,
-  .close-wallet-sidebar {
-    height: 36px;
-    font-size: var(--font-size-sm);
-  }
-
-  .close-wallet-sidebar {
-    width: 36px;
-    min-width: 36px;
-  }
-
-  .identifiers-block {
-    padding: var(--spacing-sm);
-  }
-}
-
-/* Стили для блока кнопок авторизации */
-.auth-buttons-container {
-  width: 100%;
-  max-width: 450px;
-  margin-bottom: var(--spacing-lg);
-  background-color: var(--color-white);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-  padding: var(--spacing-lg);
-  box-sizing: border-box;
-  position: relative;
-}
-
-/* Стили для заголовка */
-.header-with-close {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: var(--nav-btn-size);
-  margin-bottom: var(--spacing-lg);
-  position: relative;
-}
-
-/* Стили для кнопок в заголовке */
-.header-button {
-  height: var(--nav-btn-size);
-  border-radius: var(--radius-lg);
-  font-size: var(--font-size-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition: all var(--transition-normal);
-}
-
-/* Стили для кнопок авторизации */
-.auth-buttons-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  width: 100%;
-}
-
-.auth-btn {
-  width: 100%;
-  height: var(--nav-btn-size);
-  border-radius: var(--radius-lg);
-  background-color: var(--color-light);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  color: var(--color-dark);
-  font-size: var(--font-size-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0 var(--spacing-md);
-  box-sizing: border-box;
-  transition: all var(--transition-normal);
-  margin: 0;
-}
-
-.auth-btn:hover {
-  background-color: var(--color-grey-light);
-}
-
-/* Стили для блока информации о пользователе и баланса токенов */
-.user-info, .token-balances {
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-md);
-  margin-bottom: var(--spacing-lg);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.user-info h3, .token-balances h3 {
-  margin: 0 0 var(--spacing-md) 0;
-  font-size: var(--font-size-xl);
-  color: var(--color-dark);
-  border-bottom: 1px solid #eee;
-  padding-bottom: 8px;
-}
-
-.user-info-item, .token-balance {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing-sm);
-  font-size: var(--font-size-md);
-}
-
-.user-info-label, .token-name {
-  min-width: 80px;
-  color: #666;
-  font-weight: 500;
-}
-
-.user-info-value, .token-amount {
-  flex: 1;
-  color: var(--color-dark);
-  font-family: monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.token-symbol {
-  margin-left: var(--spacing-xs);
-  color: #666;
-  font-size: var(--font-size-xs);
-}
-
-/* Стили для кнопки бургера в шапке */
-.header-wallet-btn {
-  margin-left: var(--spacing-lg);
-  padding: var(--spacing-sm);
-  background: transparent;
-  color: var(--color-dark);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  transition: background-color var(--transition-normal);
-  position: relative;
-  width: var(--nav-btn-size);
-  height: var(--nav-btn-size);
-  justify-content: center;
-}
-
-.header-wallet-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.header-wallet-btn .nav-btn-number {
-  display: none;
-}
-
-.header-wallet-btn .nav-btn-text {
-  display: none;
-}
-
-.header-wallet-btn::before,
-.header-wallet-btn::after,
-.header-wallet-btn .hamburger-line {
-  content: '';
-  position: absolute;
-  width: 24px;
-  height: 2px;
-  background-color: var(--color-dark);
-  transition: all var(--transition-normal);
-}
-
-.header-wallet-btn::before {
-  top: 12px;
-}
-
-.header-wallet-btn::after {
-  bottom: 12px;
-}
-
-.header-wallet-btn .hamburger-line {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/* Анимация при наведении */
-.header-wallet-btn:hover::before {
-  top: 11px;
-}
-
-.header-wallet-btn:hover::after {
-  bottom: 11px;
-}
-
-/* Анимация при активном состоянии */
-.header-wallet-btn.active::before {
-  transform: rotate(45deg);
-  top: 50%;
-}
-
-.header-wallet-btn.active::after {
-  transform: rotate(-45deg);
-  bottom: 50%;
-}
-
-.header-wallet-btn.active .hamburger-line {
-  opacity: 0;
-}
-
 /* Стили для заголовка */
 .header {
   background: var(--color-white);
-  border-bottom: 1px solid var(--color-grey-light);
-  padding: var(--spacing-lg) 0;
+  padding: 15px 20px;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -1134,97 +615,43 @@ input, textarea {
   }
 }
 
-@media screen and (min-width: 481px) and (max-width: 768px) {
+@media screen and (max-width: 768px) {
   .wallet-sidebar {
-    width: 100%;
     padding: var(--spacing-md);
   }
-  
+
   .wallet-sidebar-content {
     padding: 0;
     gap: var(--spacing-md);
   }
 
-  .sidebar-block {
-    padding: var(--spacing-md);
+  .disconnect-block {
     margin-bottom: var(--spacing-md);
   }
 
-  .sidebar-block h3 {
-    font-size: var(--font-size-lg);
-    margin-bottom: var(--spacing-sm);
+  .disconnect-btn,
+  .close-wallet-sidebar {
+    height: 42px;
   }
 
-  .identifier-item,
-  .token-balance {
+  .close-wallet-sidebar {
+    width: 42px;
+    min-width: 42px;
+    font-size: 18px;
+  }
+
+  .identifiers-block {
+    padding: var(--spacing-md);
+  }
+
+  .identifier-item {
     font-size: var(--font-size-sm);
     margin-bottom: var(--spacing-xs);
   }
 
-  .identifier-label,
-  .token-name {
+  .identifier-label {
     min-width: 80px;
   }
-
-  .chat-container {
-    margin: var(--spacing-sm) 0 25px 0;
-    height: calc(100vh - 165px);
-  }
-
-  .chat-messages {
-    padding: var(--spacing-md);
-  }
-  
-  .message {
-    max-width: 85%;
-    padding: 8px var(--spacing-sm);
-  }
-
-  .ai-message {
-    max-width: 85%;
-  }
-  
-  .chat-input {
-    padding: var(--spacing-sm) var(--spacing-md);
-    margin-bottom: var(--spacing-sm);
-  }
-
-  .chat-input textarea {
-    font-size: var(--font-size-md);
-  }
-  
-  .header-content {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--spacing-sm);
-  }
-
-  .header-text {
-    flex: 1;
-    margin-right: var(--spacing-sm);
-    min-width: 0;
-  }
-  
-  .title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 1.2rem;
-    margin: 0;
-  }
-
-  .subtitle {
-    white-space: normal;
-    font-size: 0.9rem;
-    margin: 0;
-    line-height: 1.2;
-  }
-
-  .header-wallet-btn {
-    flex-shrink: 0;
-    margin-left: var(--spacing-sm);
-  }
 }
 
 @media screen and (max-width: 480px) {
@@ -1236,171 +663,24 @@ input, textarea {
     gap: var(--spacing-sm);
   }
 
-  .sidebar-block {
-    padding: var(--spacing-sm);
-    margin-bottom: var(--spacing-sm);
-  }
-
   .disconnect-block {
     margin-bottom: var(--spacing-sm);
   }
 
-  .wallet-header {
-    height: 32px;
-    gap: var(--spacing-xs);
-  }
-  
-  .wallet-header-buttons {
-    gap: var(--spacing-xs);
-  }
-  
-  .wallet-connect-btn-header,
-  .wallet-disconnect-btn-header,
-  .auth-btn.disconnect-wallet-btn {
-    height: 32px;
-    font-size: var(--font-size-sm);
-    padding: 0 12px;
-  }
-  
+  .disconnect-btn,
   .close-wallet-sidebar {
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
-  font-size: 18px;
-}
-
-  .auth-buttons-container {
-    padding: var(--spacing-sm);
-  }
-  
-  .auth-btn {
-    height: 32px;
-    font-size: var(--font-size-sm);
-  }
-  
-  .chat-container {
-    margin: var(--spacing-xs) 0 var(--spacing-lg) 0;
-    height: calc(100vh - 150px);
-  }
-  
-  .message {
-    max-width: 90%;
-    margin-bottom: var(--spacing-sm);
+    height: 36px;
     font-size: var(--font-size-sm);
   }
 
-  .ai-message, .user-message {
-    max-width: 90%;
-  }
-
-  .message-time {
-    font-size: var(--font-size-xs);
-  }
-  
-  .header-content {
-    padding: 8px;
-  }
-
-  .title {
-    font-size: 1.1rem;
-  }
-
-  .subtitle {
-    font-size: 0.8rem;
-  }
-  
-  .chat-buttons button {
-    padding: 8px var(--spacing-sm);
-    font-size: var(--font-size-sm);
-    max-width: 120px;
-  }
-  
-  .auth-btn,
-  .email-btn,
-  .telegram-btn,
-  .connect-wallet-btn {
-    padding: var(--spacing-sm) var(--spacing-md);
-    font-size: var(--font-size-sm);
-  }
-  
-  .send-email-btn,
-  button.email-btn {
-    padding: 8px var(--spacing-sm);
-    font-size: var(--font-size-xs);
-  }
-
-  .chat-buttons {
-    gap: var(--spacing-xs);
-  }
-  
-  .chat-buttons button {
-    padding: 8px var(--spacing-sm);
-    font-size: var(--font-size-sm);
-  }
-  
-  .header-wallet-btn {
-    margin-left: var(--spacing-xs);
-    width: 32px;
-    height: 32px;
-    padding: 8px;
-  }
-
-  .header-wallet-btn::before,
-  .header-wallet-btn::after,
-  .header-wallet-btn .hamburger-line {
-    width: 18px;
-    height: 2px;
-  }
-  
-  .header-wallet-btn::before {
-    top: 10px;
-  }
-  
-  .header-wallet-btn::after {
-    bottom: 10px;
-  }
-
-  .auth-buttons-container {
-    padding: var(--spacing-sm);
-  }
-
-  .auth-buttons-container button.auth-btn,
-  .auth-buttons-container button.email-btn,
-  .auth-buttons-container button.telegram-btn,
-  .auth-buttons-container button.connect-wallet-btn {
-    height: 42px;
-    font-size: var(--font-size-sm);
-  }
-}
-
-@media screen and (max-width: 360px) {
-  .wallet-sidebar {
-    padding: 8px 3px;
-  }
-
-  .wallet-header {
-    margin-bottom: var(--spacing-sm);
-  }
-  
-  .wallet-connect-btn-header,
-  .wallet-disconnect-btn-header,
-  .auth-btn.disconnect-wallet-btn {
-    font-size: var(--font-size-xs);
-    padding: 0 8px;
-  }
-  
   .close-wallet-sidebar {
-  font-size: 16px;
-}
+    width: 36px;
+    min-width: 36px;
+  }
 
   .identifiers-block {
     padding: var(--spacing-sm);
   }
-  
-  .identifiers-block h3 {
-    font-size: var(--font-size-md);
-    padding-bottom: var(--spacing-xs);
-  }
 }
 
 /* Анимации */
@@ -1711,7 +991,7 @@ input, textarea {
 }
 
 /* Кнопка закрытия */
-  .close-wallet-sidebar {
+.close-wallet-sidebar {
   width: var(--nav-btn-size);
   height: var(--nav-btn-size);
   min-width: var(--nav-btn-size);
diff --git a/frontend/src/assets/styles/layout.css b/frontend/src/assets/styles/layout.css
new file mode 100644
index 0000000..9ea163a
--- /dev/null
+++ b/frontend/src/assets/styles/layout.css
@@ -0,0 +1,81 @@
+/* frontend/src/assets/styles/app-layout.css */
+
+/* Общий контейнер приложения */
+.app-layout {
+  display: flex;
+  flex-direction: column; /* Header сверху, остальное ниже */
+  height: 100vh;
+  overflow: hidden; /* Предотвращаем двойную прокрутку */
+}
+
+/* Обертка для основного контента и сайдбара */
+.app-content-wrapper {
+  display: flex;
+  flex-grow: 1; /* Занимает все доступное пространство под хедером */
+  overflow: hidden; /* Важно для предотвращения двойной прокрутки */
+}
+
+/* Контейнер для RouterView */
+.main-view {
+  flex-grow: 1;
+  overflow-y: auto; /* Позволяет прокручивать только контент страницы */
+  position: relative; /* Для позиционирования оверлея загрузки */
+  height: calc(100vh - var(--header-height, 65px)); /* Высота минус хедер (примерное значение) */
+}
+
+/* Оверлей загрузки для основного вида */
+.loading-overlay.main-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 1000; /* Выше контента, ниже хедера/сайдбара */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+/* Стили для сайдбара (возможно, нужно перенести из Sidebar.vue или home.css) */
+.wallet-sidebar {
+  width: var(--sidebar-width, 300px); /* Ширина сайдбара */
+  flex-shrink: 0;
+  background-color: var(--color-white);
+  border-left: 1px solid var(--color-grey-light);
+  transition: width 0.3s ease;
+  overflow-y: auto; /* Позволяет прокручивать сайдбар */
+  height: calc(100vh - var(--header-height, 65px)); /* Высота минус хедер */
+  position: relative; /* Или sticky, если нужно */
+}
+
+/* Анимация появления/скрытия сайдбара */
+.sidebar-slide-enter-active,
+.sidebar-slide-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.sidebar-slide-enter-from,
+.sidebar-slide-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+/* Адаптация */
+@media (max-width: 768px) {
+  /* На мобильных можно скрывать сайдбар по умолчанию 
+     и показывать его как оверлей или уменьшать ширину */
+  .wallet-sidebar {
+    width: var(--sidebar-width-mobile, 250px);
+    /* Можно добавить position: fixed; top: var(--header-height); right: 0; 
+       если нужен оверлей */
+  }
+}
+
+/* Определим переменную для высоты хедера, если нужно */
+:root {
+  --header-height: 65px; /* Примерная высота хедера из Header.vue */
+  --sidebar-width: 300px;
+  --sidebar-width-mobile: 250px;
+} 
\ No newline at end of file
diff --git a/frontend/src/assets/styles/variables.css b/frontend/src/assets/styles/variables.css
new file mode 100644
index 0000000..d9d8059
--- /dev/null
+++ b/frontend/src/assets/styles/variables.css
@@ -0,0 +1,80 @@
+/* frontend/src/assets/styles/variables.css */
+:root {
+  /* Цвета */
+  --color-primary: #4CAF50;
+  --color-primary-dark: #45a049;
+  --color-secondary: #2196F3;
+  --color-danger: #F44336;
+  --color-warning: #FF9800;
+  --color-light: #f5f5f5;
+  --color-dark: #333333;
+  --color-grey: #777777;
+  --color-grey-light: #e0e0e0;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-telegram: #0088cc;
+  --color-error: #e74c3c;
+  
+  /* Цвета сообщений */
+  --color-user-message: #EFFAFF;
+  --color-ai-message: #F8F8F8;
+  --color-system-message: #FFF3E0;
+  --color-system-text: #FF5722;
+  
+  /* Тени */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  
+  /* Отступы */
+  --spacing-xs: 5px;
+  --spacing-sm: 10px;
+  --spacing-md: 15px;
+  --spacing-lg: 20px;
+  --spacing-xl: 30px;
+  
+  /* Размеры шрифтов */
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-xxl: 24px;
+  
+  /* Радиусы скругления */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  
+  /* Переходы */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+  
+  /* Размеры компонентов (Удаляем старые sidebar width) */
+  /* --sidebar-width: 110px; */
+  /* --sidebar-expanded-width: 325px; */
+  --nav-btn-size: 40px;
+  --chat-input-min-height: 100px;
+  --chat-input-max-height: 200px;
+  --chat-input-focus-min-height: 170px;
+  --chat-input-focus-max-height: 300px;
+  
+  /* Унифицированные размеры для кнопок и форм */
+  --button-height: 48px;
+  --button-height-mobile: 42px;
+  --button-padding: 0 var(--spacing-lg);
+  --button-gap: var(--spacing-md);
+  --form-gap: var(--spacing-md);
+  --block-padding: 24px;
+  --block-padding-mobile: 16px;
+  --block-margin: 24px;
+  --block-margin-mobile: 16px;
+  --input-height: 48px;
+  --input-height-mobile: 42px;
+  --input-padding: 0 var(--spacing-lg);
+  
+  /* Общие стили */
+  --button-radius: var(--radius-lg);
+  --input-radius: var(--radius-lg);
+  --block-radius: var(--radius-lg);
+} 
\ No newline at end of file
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
new file mode 100644
index 0000000..213de65
--- /dev/null
+++ b/frontend/src/components/BaseLayout.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="app-container">
+    <!-- Основной контент -->
+    <div class="main-content" :class="{ 'no-right-sidebar': !showWalletSidebar }">
+      <!-- Шапка сайта -->
+      <Header 
+        :is-sidebar-open="showWalletSidebar" 
+        @toggle-sidebar="toggleWalletSidebar" 
+      />
+
+      <!-- Основной контент страницы (передается через слот) -->
+      <slot></slot>
+    </div>
+
+    <!-- Правая панель с информацией о кошельке -->
+    <Sidebar 
+      v-model="showWalletSidebar" 
+      :is-authenticated="auth.isAuthenticated.value"
+      :telegram-auth="telegramAuth"
+      :email-auth="emailAuth"
+      :token-balances="tokenBalances.value"
+      :identities="auth.identities?.value"
+      @wallet-auth="handleWalletAuth"
+      @disconnect-wallet="disconnectWallet"
+      @telegram-auth="handleTelegramAuth"
+      @cancel-telegram-auth="cancelTelegramAuth"
+      @email-auth="showEmailForm"
+      @send-email-verification="sendEmailVerification"
+      @verify-email-code="verifyEmailCode"
+      @cancel-email-auth="cancelEmailAuth"
+    />
+
+    <!-- Компонент для отображения уведомлений -->
+    <NotificationDisplay :notifications="notifications.value" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
+import { useAuth } from '../composables/useAuth';
+import { useTokenBalances } from '../composables/useTokenBalances';
+import { useAuthFlow } from '../composables/useAuthFlow';
+import { useNotifications } from '../composables/useNotifications';
+import { getFromStorage, setToStorage, removeFromStorage } from '../utils/storage';
+import { connectWithWallet } from '../services/wallet';
+import api from '../api/axios';
+import eventBus from '../utils/eventBus';
+import Header from './Header.vue';
+import Sidebar from './Sidebar.vue';
+import NotificationDisplay from './NotificationDisplay.vue';
+
+// =====================================================================
+// 1. ИСПОЛЬЗОВАНИЕ COMPOSABLES
+// =====================================================================
+
+const auth = useAuth();
+const { notifications, showSuccessMessage, showErrorMessage } = useNotifications();
+const { tokenBalances } = useTokenBalances();
+
+// Callback после успешной аутентификации/привязки через Email/Telegram
+const handleAuthFlowSuccess = (authType) => {
+  console.log(`[BaseLayout] Auth flow success: ${authType}`);
+  // Отправляем событие для обновления данных на страницах
+  eventBus.emit('auth-success', { authType });
+};
+
+const {
+  telegramAuth,
+  handleTelegramAuth,
+  cancelTelegramAuth,
+  emailAuth,
+  showEmailForm,
+  sendEmailVerification,
+  verifyEmailCode,
+  cancelEmailAuth,
+} = useAuthFlow({ onAuthSuccess: handleAuthFlowSuccess });
+
+// =====================================================================
+// 2. СОСТОЯНИЯ КОМПОНЕНТА
+// =====================================================================
+
+const showWalletSidebar = ref(false);
+const isConnectingWallet = ref(false); // Флаг процесса подключения кошелька
+
+// =====================================================================
+// 3. ФУНКЦИИ
+// =====================================================================
+
+/**
+ * Обрабатывает аутентификацию через кошелек
+ */
+const handleWalletAuth = async () => {
+  if (isConnectingWallet.value) return;
+  isConnectingWallet.value = true;
+  try {
+    const result = await connectWithWallet();
+    console.log('[BaseLayout] Результат подключения кошелька:', result);
+
+    if (result.success) {
+      if (auth.isAuthenticated.value) {
+        // Связывание кошелька с существующим аккаунтом
+        const linkResult = await auth.linkIdentity('wallet', result.address);
+        if (linkResult.success) {
+          showSuccessMessage('Кошелек успешно подключен к вашему аккаунту!');
+          await auth.checkAuth(); // Обновить identities
+        } else {
+          showErrorMessage(linkResult.error || 'Не удалось подключить кошелек');
+        }
+      } else {
+        // Новая аутентификация через кошелек
+        const authResponse = await auth.checkAuth();
+        if (authResponse.authenticated && authResponse.authType === 'wallet') {
+          console.log('[BaseLayout] Кошелёк успешно подключен и аутентифицирован');
+          showSuccessMessage('Кошелёк успешно подключен!');
+          // Оповещаем компоненты об успешной авторизации
+          eventBus.emit('auth-state-changed', { 
+            isAuthenticated: true, 
+            authType: 'wallet', 
+            fromBaseLayout: true 
+          });
+        } else {
+           showErrorMessage('Не удалось завершить аутентификацию через кошелек.');
+        }
+      }
+    } else {
+      console.error('[BaseLayout] Не удалось подключить кошелёк:', result.error);
+      showErrorMessage(result.error || 'Не удалось подключить кошелёк');
+    }
+  } catch (error) {
+    console.error('[BaseLayout] Ошибка при подключении кошелька:', error);
+    showErrorMessage('Произошла ошибка при подключении кошелька');
+  } finally {
+    isConnectingWallet.value = false;
+  }
+};
+
+/**
+ * Выполняет выход из аккаунта
+ */
+const disconnectWallet = async () => {
+  console.log('[BaseLayout] Выполняется выход из системы...');
+  try {
+    await api.post('/api/auth/logout');
+    await auth.checkAuth(); 
+    showSuccessMessage('Вы успешно вышли из системы');
+    removeFromStorage('guestMessages');
+    removeFromStorage('hasUserSentMessage');
+    
+    // Оповещаем компоненты о выходе из системы
+    eventBus.emit('auth-state-changed', { 
+      isAuthenticated: false, 
+      fromBaseLayout: true 
+    });
+  } catch (error) {
+    console.error('[BaseLayout] Ошибка при выходе из системы:', error);
+    showErrorMessage('Произошла ошибка при выходе из системы');
+  }
+};
+
+/**
+ * Переключает отображение боковой панели
+ */
+const toggleWalletSidebar = () => {
+  showWalletSidebar.value = !showWalletSidebar.value;
+  setToStorage('showWalletSidebar', showWalletSidebar.value);
+};
+
+// =====================================================================
+// 4. ЖИЗНЕННЫЙ ЦИКЛ
+// =====================================================================
+
+onMounted(() => {
+  console.log('[BaseLayout] Компонент загружен');
+
+  // Загружаем сохраненное состояние боковой панели
+  const savedSidebarState = getFromStorage('showWalletSidebar');
+  if (savedSidebarState !== null) {
+    showWalletSidebar.value = savedSidebarState;
+  } else {
+    showWalletSidebar.value = true;
+    setToStorage('showWalletSidebar', true);
+  }
+});
+</script>
+
+<style scoped>
+.app-container {
+  display: flex;
+  min-height: 100vh;
+  position: relative;
+  background-color: var(--color-light);
+}
+
+.main-content {
+  flex-grow: 1;
+  transition: all var(--transition-normal);
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% - 350px);
+  padding: 0 20px;
+  background-color: var(--color-white);
+}
+
+.main-content.no-right-sidebar {
+  max-width: 100%;
+}
+
+/* Адаптивный дизайн */
+@media (max-width: 768px) {
+  .main-content {
+    max-width: 100%;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/frontend/src/components/ChatInterface.vue b/frontend/src/components/ChatInterface.vue
index d8921d3..26e9a01 100644
--- a/frontend/src/components/ChatInterface.vue
+++ b/frontend/src/components/ChatInterface.vue
@@ -442,8 +442,11 @@ onUnmounted(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  margin: var(--spacing-lg) 0 35px 0;
+  margin: var(--spacing-lg) auto;
+  padding: 0; /* Убираю padding, так как он теперь задается через .main-content */
   min-height: 500px; /* Или другая подходящая высота */
+  max-width: 1150px; /* Ограничиваем ширину чата */
+  width: 100%; /* Занимаем всю доступную ширину до максимума */
   position: relative;
 }
 
@@ -459,7 +462,7 @@ onUnmounted(() => {
   top: 0;
   left: 0;
   right: 0;
-  bottom: var(--chat-input-height, 80px); /* 80px - запасной вариант */
+  bottom: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
   transition: bottom var(--transition-normal);
 }
 
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
new file mode 100644
index 0000000..99c140e
--- /dev/null
+++ b/frontend/src/components/Header.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="header">
+    <div class="header-content">
+      <div class="header-text">
+        <h1 class="title">✌️HB3 - Accelerator DLE</h1>
+        <p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
+      </div>
+      <button
+        class="header-wallet-btn"
+        :class="{ active: isSidebarOpen }" 
+        @click="toggleSidebar"
+      >
+        <div class="hamburger-line" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, onMounted, onBeforeUnmount, watch } from 'vue';
+import { useAuth } from '../composables/useAuth';
+import eventBus from '../utils/eventBus';
+
+const props = defineProps({
+  isSidebarOpen: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['toggle-sidebar']);
+
+const toggleSidebar = () => {
+  emit('toggle-sidebar');
+};
+
+// Обработка аутентификации
+const auth = useAuth();
+const { isAuthenticated } = auth;
+
+// Мониторинг изменений статуса аутентификации
+let unwatch = null;
+onMounted(() => {
+  // Следим за изменениями авторизации и сообщаем о них через eventBus
+  unwatch = watch(isAuthenticated, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      console.log('[Header] Состояние аутентификации изменилось:', newValue);
+      // Оповещаем остальные компоненты через шину событий
+      eventBus.emit('auth-state-changed', { 
+        isAuthenticated: newValue, 
+        fromHeader: true
+      });
+    }
+  });
+});
+
+// Очищаем наблюдатель при удалении компонента
+onBeforeUnmount(() => {
+  if (unwatch) {
+    unwatch();
+  }
+});
+</script>
+
+<style scoped>
+.header {
+  background-color: var(--color-white);
+  padding: 15px 20px;
+  position: sticky;
+  top: 0;
+  z-index: 100; /* Ensure header stays on top */
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px; /* Optional: limit max width */
+  margin: 0 auto; /* Optional: center content */
+}
+
+.header-text {
+  flex-grow: 1;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: bold;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-grey-dark);
+}
+
+.header-wallet-btn {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-white);
+  color: var(--color-primary);
+  border: none;
+  padding: 10px 15px;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  gap: 8px;
+  box-shadow: none;
+}
+
+.header-wallet-btn:hover {
+  background-color: var(--color-light);
+}
+
+.header-wallet-btn.active {
+  background-color: var(--color-light);
+}
+
+.hamburger-line {
+  width: 20px;
+  height: 3px;
+  background-color: var(--color-primary);
+  position: relative;
+  transition: all var(--transition-normal);
+}
+
+.hamburger-line::before,
+.hamburger-line::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  background-color: var(--color-primary);
+  left: 0;
+  transition: all var(--transition-normal);
+}
+
+.hamburger-line::before {
+  top: -6px;
+}
+
+.hamburger-line::after {
+  top: 6px;
+}
+
+.header-wallet-btn.active .hamburger-line {
+  background-color: transparent; /* Hide middle line */
+}
+
+.header-wallet-btn.active .hamburger-line::before {
+  top: 0;
+  transform: rotate(45deg);
+}
+
+.header-wallet-btn.active .hamburger-line::after {
+  top: 0;
+  transform: rotate(-45deg);
+}
+
+.nav-btn-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+/* Add some responsive styles if needed */
+@media (max-width: 768px) {
+  .title {
+    font-size: 1.2rem;
+  }
+  .subtitle {
+    font-size: 0.8rem;
+  }
+  .header-wallet-btn {
+    padding: 8px 12px;
+  }
+  .nav-btn-text {
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-text {
+    display: none; /* Hide text on very small screens */
+  }
+  .header-content {
+    justify-content: flex-end; /* Align button to the right */
+  }
+}
+
+</style> 
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 7840d25..ed5a9fd 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -28,47 +28,22 @@
             </button>
             <button class="close-sidebar-btn" @click="closeSidebar">×</button>
           </div>
-        
-          <!-- Блок информации о пользователе (отображается, если не активна ни одна форма) -->
-          <div v-if="!emailAuth.showForm && !emailAuth.showVerification && !telegramAuth.showVerification" class="user-info">
-            <h3>Идентификаторы:</h3>
-            <div class="user-info-item">
-              <span class="user-info-label">Кошелек:</span>
-              <span v-if="hasIdentityType('wallet')" class="user-info-value">
-                {{ truncateAddress(getIdentityValue('wallet')) }}
-              </span>
-              <button v-else class="connect-btn" @click="handleWalletAuth">
-                Подключить кошелек
-              </button>
-            </div>
-          </div>
         </div>
 
-        <!-- Блок баланса токенов -->
-        <div v-if="isAuthenticated && hasIdentityType('wallet') && tokenBalances && tokenBalances.eth !== undefined" class="token-balances">
-          <h3>Баланс токенов:</h3>
-          <div class="token-balance">
-            <span class="token-name">ETH:</span>
-            <span class="token-amount">{{ Number(tokenBalances.eth).toLocaleString() }}</span>
-            <span class="token-symbol">{{ TOKEN_CONTRACTS.eth.symbol }}</span>
-          </div>
-          <div class="token-balance">
-            <span class="token-name">BSC:</span>
-            <span class="token-amount">{{ Number(tokenBalances.bsc).toLocaleString() }}</span>
-            <span class="token-symbol">{{ TOKEN_CONTRACTS.bsc.symbol }}</span>
-          </div>
-          <div class="token-balance">
-            <span class="token-name">ARB:</span>
-            <span class="token-amount">{{
-              Number(tokenBalances.arbitrum).toLocaleString()
-            }}</span>
-            <span class="token-symbol">{{ TOKEN_CONTRACTS.arbitrum.symbol }}</span>
-          </div>
-          <div class="token-balance">
-            <span class="token-name">POL:</span>
-            <span class="token-amount">{{ Number(tokenBalances.polygon).toLocaleString() }}</span>
-            <span class="token-symbol">{{ TOKEN_CONTRACTS.polygon.symbol }}</span>
-          </div>
+        <!-- Навигационные кнопки -->
+        <div class="navigation-buttons">
+          <router-link to="/" class="nav-link-btn" active-class="active">
+            <i class="nav-icon">💬</i>
+            <span>Чат</span>
+          </router-link>
+          <router-link to="/crm" class="nav-link-btn" active-class="active">
+            <i class="nav-icon">👥</i>
+            <span>CRM</span>
+          </router-link>
+          <router-link to="/settings" class="nav-link-btn" active-class="active">
+            <i class="nav-icon">⚙️</i>
+            <span>Настройки</span>
+          </router-link>
         </div>
       </div>
     </div>
@@ -76,9 +51,12 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits, ref, onMounted, onBeforeUnmount } from 'vue';
 import { TOKEN_CONTRACTS } from '../services/tokens';
+import { useRouter } from 'vue-router';
+import eventBus from '../utils/eventBus';
 
+const router = useRouter();
 const props = defineProps({
   modelValue: Boolean,
   isAuthenticated: Boolean,
@@ -104,6 +82,25 @@ const closeSidebar = () => {
   emit('update:modelValue', false);
 };
 
+// Обработка события изменения авторизации
+const handleAuthEvent = (event) => {
+  console.log('[Sidebar] Получено событие изменения авторизации:', event);
+  // Здесь можно обновить данные, если нужно дополнительное обновление
+};
+
+// Подписка на события
+let unsubscribe = null;
+onMounted(() => {
+  unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
+});
+
+// Очистка при размонтировании
+onBeforeUnmount(() => {
+  if (unsubscribe) {
+    unsubscribe();
+  }
+});
+
 // Вспомогательные функции
 const truncateAddress = (address) => {
   if (!address) return '';
@@ -159,6 +156,43 @@ const getIdentityValue = (type) => {
   border-color: var(--color-dark);
 }
 
+/* Стили для навигационных кнопок */
+.navigation-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.nav-link-btn {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-light);
+  color: var(--color-dark);
+  border: 1px solid var(--color-grey-light);
+  border-radius: var(--radius-lg);
+  padding: 12px 15px;
+  font-size: var(--font-size-md);
+  text-decoration: none;
+  transition: all var(--transition-normal);
+  cursor: pointer;
+}
+
+.nav-link-btn.active {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border-color: var(--color-primary);
+}
+
+.nav-link-btn:hover:not(.active) {
+  background-color: var(--color-grey-light);
+}
+
+.nav-icon {
+  margin-right: 10px;
+  font-size: 1.2em;
+}
+
 @media screen and (max-width: 480px) {
   .close-sidebar-btn {
     width: 42px;
@@ -166,6 +200,11 @@ const getIdentityValue = (type) => {
     min-width: 42px;
     font-size: 20px;
   }
+  
+  .nav-link-btn {
+    padding: 10px 12px;
+    font-size: var(--font-size-sm);
+  }
 }
 
 @media screen and (max-width: 360px) {
@@ -175,5 +214,9 @@ const getIdentityValue = (type) => {
     min-width: 36px;
     font-size: 18px;
   }
+  
+  .nav-link-btn {
+    padding: 8px 10px;
+  }
 }
 </style> 
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index adfc4ee..656b635 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -10,6 +10,16 @@ const routes = [
     name: 'home',
     component: HomeView,
   },
+  {
+    path: '/crm',
+    name: 'crm',
+    component: () => import('../views/CrmView.vue'),
+  },
+  {
+    path: '/settings',
+    name: 'settings',
+    component: () => import('../views/SettingsView.vue'),
+  },
 ];
 
 const router = createRouter({
diff --git a/frontend/src/utils/eventBus.js b/frontend/src/utils/eventBus.js
new file mode 100644
index 0000000..c3bc737
--- /dev/null
+++ b/frontend/src/utils/eventBus.js
@@ -0,0 +1,43 @@
+import { ref } from 'vue';
+
+// Простая шина событий на основе ref
+const listeners = ref({});
+
+export default {
+  // Подписка на событие
+  on(event, callback) {
+    if (!listeners.value[event]) {
+      listeners.value[event] = [];
+    }
+    listeners.value[event].push(callback);
+    
+    // Возвращаем функцию отписки
+    return () => {
+      this.off(event, callback);
+    };
+  },
+  
+  // Отписка от события
+  off(event, callback) {
+    if (!listeners.value[event]) return;
+    
+    const idx = listeners.value[event].indexOf(callback);
+    if (idx > -1) {
+      listeners.value[event].splice(idx, 1);
+    }
+    
+    // Очистка пустых массивов
+    if (listeners.value[event].length === 0) {
+      delete listeners.value[event];
+    }
+  },
+  
+  // Вызов события с передачей данных
+  emit(event, data) {
+    if (!listeners.value[event]) return;
+    
+    listeners.value[event].forEach(callback => {
+      callback(data);
+    });
+  }
+}; 
\ No newline at end of file
diff --git a/frontend/src/views/CrmView.vue b/frontend/src/views/CrmView.vue
new file mode 100644
index 0000000..a5553f2
--- /dev/null
+++ b/frontend/src/views/CrmView.vue
@@ -0,0 +1,118 @@
+<template>
+  <BaseLayout>
+    <div class="crm-view-container">
+      <h1>CRM Система</h1>
+      <div v-if="isLoading">Загрузка данных пользователя...</div>
+      <div v-else-if="!auth.isAuthenticated.value">
+        <p>Для доступа к CRM необходимо <button @click="goToHomeAndShowSidebar">войти</button>.</p>
+      </div>
+      <div v-else>
+        <p>Добро пожаловать в CRM!</p>
+        <div v-if="auth.isAdmin.value">
+          <p><strong>У вас полный доступ (Администратор).</strong></p>
+          <!-- Сюда будет добавляться полный функционал CRM -->
+          <p>Здесь будет управление контактами, сделками, задачами и т.д.</p>
+        </div>
+        <div v-else>
+          <p><strong>У вас ограниченный доступ.</strong></p>
+          <!-- Сюда будет добавляться ограниченный функционал CRM -->
+          <p>Здесь будет просмотр ваших контактов и задач.</p>
+        </div>
+         <!-- Демонстрационный блок -->
+         <div class="demo-block">
+            <h3>Демонстрация CRM</h3>
+            <p>Этот раздел будет содержать компоненты CRM...</p>
+         </div>
+      </div>
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useAuth } from '../composables/useAuth';
+import { useRouter } from 'vue-router';
+import { setToStorage } from '../utils/storage';
+import BaseLayout from '../components/BaseLayout.vue';
+import eventBus from '../utils/eventBus';
+
+const auth = useAuth();
+const router = useRouter();
+const isLoading = ref(true);
+
+// Функция для перехода на домашнюю страницу и открытия боковой панели
+const goToHomeAndShowSidebar = () => {
+  setToStorage('showWalletSidebar', true);
+  router.push({ name: 'home' });
+};
+
+// Обработчик события изменения авторизации
+const handleAuthEvent = (eventData) => {
+  console.log('[CrmView] Получено событие изменения авторизации:', eventData);
+  // Можно обновить данные или состояние, если нужно
+  isLoading.value = false;
+};
+
+// Регистрация и очистка обработчика событий
+let unsubscribe = null;
+
+onMounted(() => {
+  console.log('[CrmView] Компонент загружен');
+  isLoading.value = false;
+  
+  // Подписка на события авторизации
+  unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
+});
+
+onBeforeUnmount(() => {
+  // Отписка от события при удалении компонента
+  if (unsubscribe) {
+    unsubscribe();
+  }
+});
+</script>
+
+<style scoped>
+.crm-view-container {
+  max-width: 1150px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  color: var(--color-dark);
+  margin-bottom: 20px;
+}
+
+p {
+  line-height: 1.6;
+  margin-bottom: 10px;
+}
+
+strong {
+ color: var(--color-primary);
+}
+
+.demo-block {
+    margin-top: 30px;
+    padding: 20px;
+    border: 1px dashed var(--color-grey);
+    border-radius: var(--radius-md);
+}
+
+button {
+  padding: 5px 10px;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  margin-left: 5px;
+}
+button:hover {
+  opacity: 0.9;
+}
+</style> 
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index daf7e79..b28274b 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,245 +1,88 @@
 <template>
-  <div class="app-container">
-    <!-- Основной контент -->
-    <div class="main-content" :class="{ 'no-right-sidebar': !showWalletSidebar }">
-      <div class="header">
-        <div class="header-content">
-          <div class="header-text">
-            <h1 class="title">✌️HB3 - Accelerator DLE</h1>
-            <p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
-          </div>
-          <button
-            class="header-wallet-btn"
-            :class="{ active: showWalletSidebar }"
-            @click="toggleWalletSidebar"
-          >
-            <div class="hamburger-line" />
-            <div class="nav-btn-text">
-              {{ showWalletSidebar ? 'Скрыть панель' : 'Подключиться' }}
-            </div>
-          </button>
-        </div>
-      </div>
-
-      <ChatInterface 
-        :messages="messages" 
-        :is-loading="isLoading || isConnectingWallet"
-        :has-more-messages="messageLoading.hasMoreMessages"
-        v-model:newMessage="newMessage"
-        v-model:attachments="attachments"
-        @send-message="handleSendMessage"
-        @load-more="loadMessages"
-      />
-
-            </div>
-
-    <!-- Правая панель с информацией о кошельке -->
-    <Sidebar 
-      v-model="showWalletSidebar" 
-      :is-authenticated="auth.isAuthenticated.value"
-      :telegram-auth="telegramAuth"
-      :email-auth="emailAuth"
-      :token-balances="tokenBalances.value"
-      :identities="auth.identities?.value"
-      @wallet-auth="handleWalletAuth"
-      @disconnect-wallet="disconnectWallet"
-      @telegram-auth="handleTelegramAuth"
-      @cancel-telegram-auth="cancelTelegramAuth"
-      @email-auth="showEmailForm"
-      @send-email-verification="sendEmailVerification"
-      @verify-email-code="verifyEmailCode"
-      @cancel-email-auth="cancelEmailAuth"
+  <BaseLayout>
+    <ChatInterface 
+      :messages="messages" 
+      :is-loading="isLoading || isConnectingWallet"
+      :has-more-messages="messageLoading.hasMoreMessages"
+      v-model:newMessage="newMessage"
+      v-model:attachments="attachments"
+      @send-message="handleSendMessage"
+      @load-more="loadMessages"
     />
-
-    <!-- Компонент для отображения уведомлений -->
-    <NotificationDisplay :notifications="notifications.value" />
-  </div>
+  </BaseLayout>
 </template>
 
 <script setup>
-  import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
+  import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
   import { useAuth } from '../composables/useAuth';
   import { useChat } from '../composables/useChat';
-  import { useTokenBalances } from '../composables/useTokenBalances';
-  import { useAuthFlow } from '../composables/useAuthFlow';
-  import { useNotifications } from '../composables/useNotifications';
-  import { getFromStorage, setToStorage, removeFromStorage } from '../utils/storage';
   import { connectWithWallet } from '../services/wallet';
-  import api from '../api/axios';
+  import eventBus from '../utils/eventBus';
   import '../assets/styles/home.css';
-  import Sidebar from '../components/Sidebar.vue';
+  import BaseLayout from '../components/BaseLayout.vue';
   import ChatInterface from '../components/ChatInterface.vue';
-  import NotificationDisplay from '../components/NotificationDisplay.vue';
 
-  console.log('HomeView.vue: Refactored version');
+  console.log('HomeView.vue: Using BaseLayout');
 
   // =====================================================================
   // 1. ИСПОЛЬЗОВАНИЕ COMPOSABLES
   // =====================================================================
 
   const auth = useAuth();
-  const { notifications, showSuccessMessage, showErrorMessage } = useNotifications();
-  const { tokenBalances } = useTokenBalances();
 
-  // Callback после успешной аутентификации/привязки через Email/Telegram
-  const handleAuthFlowSuccess = (authType) => {
-    console.log(`[HomeView] Auth flow success: ${authType}`);
-    // Загружаем сообщения после успешной аутентификации/привязки
-    // useChat должен сам обработать изменение auth.isAuthenticated, но можем вызвать явно для гарантии
-    loadMessages({ initial: true, authType });
-    // useTokenBalances сам следит за auth состоянием для обновления балансов
-  };
+  // =====================================================================
+  // 2. СОСТОЯНИЯ КОМПОНЕНТА
+  // =====================================================================
 
-  const {
-    telegramAuth,
-    handleTelegramAuth,
-    cancelTelegramAuth,
-    emailAuth,
-    showEmailForm,
-    sendEmailVerification,
-    verifyEmailCode,
-    cancelEmailAuth,
-  } = useAuthFlow({ onAuthSuccess: handleAuthFlowSuccess });
+  const isConnectingWallet = ref(false); // Флаг для процесса подключения кошелька
+
+  // =====================================================================
+  // 3. ИСПОЛЬЗОВАНИЕ ЧАТА
+  // =====================================================================
 
   const {
     messages,
     newMessage,
     attachments,
-    isLoading, // Переименовано из isLoadingChat
+    isLoading,
     messageLoading,
     loadMessages,
     handleSendMessage,
   } = useChat(auth);
 
-  // =====================================================================
-  // 2. СОСТОЯНИЯ КОМПОНЕНТА (Оставшиеся)
-  // =====================================================================
-
-  const showWalletSidebar = ref(false);
-  const isConnectingWallet = ref(false); // Отдельный флаг для процесса подключения кошелька
-
-  // =====================================================================
-  // 3. ФУНКЦИИ (Оставшиеся или обертки для composables)
-  // =====================================================================
-
-  /**
-   * Обрабатывает аутентификацию через кошелек
-   */
-  const handleWalletAuth = async () => {
-    if (isConnectingWallet.value) return;
-    isConnectingWallet.value = true;
-    try {
-      const result = await connectWithWallet();
-      console.log('[HomeView] Результат подключения кошелька:', result);
-
-      if (result.success) {
-        if (auth.isAuthenticated.value) {
-          // Связывание кошелька с существующим аккаунтом
-          console.log('[HomeView] Связывание кошелька с существующим аккаунтом:', result.address);
-          const linkResult = await auth.linkIdentity('wallet', result.address);
-          if (linkResult.success) {
-            showSuccessMessage('Кошелек успешно подключен к вашему аккаунту!');
-            await auth.checkAuth(); // Обновить identities
-            // useTokenBalances обновит балансы автоматически через watch
-          } else {
-            showErrorMessage(linkResult.error || 'Не удалось подключить кошелек');
-          }
-        } else {
-          // Новая аутентификация через кошелек
-          const authResponse = await auth.checkAuth();
-          if (authResponse.authenticated && authResponse.authType === 'wallet') {
-            console.log('[HomeView] Кошелёк успешно подключен и аутентифицирован');
-            showSuccessMessage('Кошелёк успешно подключен!');
-            // Загрузка сообщений произойдет через watch в useChat
-            // Обновление балансов произойдет через watch в useTokenBalances
-            loadMessages({ initial: true, authType: 'wallet' }); // Принудительно перезагрузим историю
-          } else {
-             showErrorMessage('Не удалось завершить аутентификацию через кошелек.');
-          }
-        }
-      } else {
-        console.error('[HomeView] Не удалось подключить кошелёк:', result.error);
-        showErrorMessage(result.error || 'Не удалось подключить кошелёк');
-      }
-    } catch (error) {
-      console.error('[HomeView] Ошибка при подключении кошелька:', error);
-      showErrorMessage('Произошла ошибка при подключении кошелька');
-    } finally {
-      isConnectingWallet.value = false;
-    }
-  };
-
-  /**
-   * Выполняет выход из аккаунта
-   */
-  const disconnectWallet = async () => {
-    console.log('[HomeView] Выполняется выход из системы...');
-    try {
-      // useTokenBalances остановит обновление балансов через watch
-      await api.post('/api/auth/logout');
-      // Вызываем checkAuth(), чтобы useAuth обновил состояние на основе ответа сервера (не аутентифицирован)
-      await auth.checkAuth(); 
-      showSuccessMessage('Вы успешно вышли из системы');
-      // useChat сбросит сообщения через watch
-      removeFromStorage('guestMessages'); // Доп. очистка
-      removeFromStorage('hasUserSentMessage');
-    } catch (error) {
-      console.error('[HomeView] Ошибка при выходе из системы:', error);
-      showErrorMessage('Произошла ошибка при выходе из системы');
-      // Может потребоваться принудительная очистка состояния auth
-      // await auth.checkAuth(); // Попробовать еще раз в catch, если необходимо
-    }
-  };
-
-  /**
-   * Переключает отображение боковой панели
-   */
-  const toggleWalletSidebar = () => {
-    showWalletSidebar.value = !showWalletSidebar.value;
-    setToStorage('showWalletSidebar', showWalletSidebar.value);
-  };
-
   // =====================================================================
   // 4. ЖИЗНЕННЫЙ ЦИКЛ
   // =====================================================================
 
+  let unsubscribe = null;
+
   onMounted(() => {
-    console.log('[HomeView] Компонент загружен (refactored)');
-
-    // Загружаем сохраненное состояние боковой панели
-    const savedSidebarState = getFromStorage('showWalletSidebar');
-    if (savedSidebarState !== null) {
-      showWalletSidebar.value = savedSidebarState; // getFromStorage теперь парсит JSON
-    } else {
-      showWalletSidebar.value = true;
-      setToStorage('showWalletSidebar', true);
-    }
-
-    // Начальная проверка аутентификации (useAuth делает это при инициализации)
-    // Начальная загрузка сообщений (useChat делает это в onMounted)
-    // Начальное обновление балансов (useTokenBalances делает это при инициализации/watch)
-
-    // Пример добавления слушателя (если все еще нужен)
-    // window.addEventListener('load-chat-history', () => loadMessages({ initial: true }));
+    console.log('[HomeView] Компонент загружен (обновленная версия)');
+    
+    // Подписка на события авторизации
+    unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
   });
 
   onBeforeUnmount(() => {
-    // Очистка интервалов происходит внутри composables (useTokenBalances, useAuthFlow)
-    // window.removeEventListener('load-chat-history', () => loadMessages({ initial: true }));
+    // Отписка от события при удалении компонента
+    if (unsubscribe) {
+      unsubscribe();
+    }
   });
 
   // =====================================================================
-  // 5. WATCHERS (Если нужны специфичные для View)
+  // 5. ОБРАБОТКА СОБЫТИЙ АВТОРИЗАЦИИ
   // =====================================================================
 
-  // Пример: показать панель гостю после первого сообщения
-  watch(messages, (currentMessages, prevMessages) => {
-    if (!auth.isAuthenticated.value && 
-        currentMessages.length > (prevMessages?.length || 0) &&
-        currentMessages[currentMessages.length - 1]?.sender_type === 'user' &&
-        !showWalletSidebar.value) {
-      console.log('[HomeView] Показываем панель гостю после первого сообщения.');
-      toggleWalletSidebar();
+  // Функция обновления сообщений после авторизации
+  const handleAuthEvent = (eventData) => {
+    console.log('[HomeView] Получено событие изменения авторизации:', eventData);
+    if (eventData.isAuthenticated) {
+      // Пользователь только что авторизовался - загрузим сообщения
+      loadMessages({ initial: true, authType: eventData.authType || 'wallet' });
+    } else {
+      // Пользователь вышел из системы - можно очистить или обновить данные
+      loadMessages({ initial: true });
     }
-  }, { deep: false });
+  };
 </script>
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
new file mode 100644
index 0000000..5b832e0
--- /dev/null
+++ b/frontend/src/views/SettingsView.vue
@@ -0,0 +1,374 @@
+<template>
+  <BaseLayout>
+    <div class="settings-view-container">
+      <h1>Настройки</h1>
+      
+      <!-- Блок информации о пользователе (всегда виден) -->
+      <div class="user-info-section">
+        <h3>Ваши идентификаторы:</h3>
+        <div v-if="!auth.isAuthenticated.value" class="user-info-empty">
+          Войдите, чтобы увидеть идентификаторы
+        </div>
+        <div v-else class="user-info-item">
+          <span class="user-info-label">Кошелек:</span>
+          <span v-if="hasIdentityType('wallet')" class="user-info-value">
+            {{ truncateAddress(getIdentityValue('wallet')) }}
+          </span>
+          <span v-else class="user-info-value">Не подключен</span>
+        </div>
+      </div>
+      
+      <!-- Блок баланса токенов (всегда виден) -->
+      <div class="token-balances-section">
+        <h3>Баланс токенов:</h3>
+        <div v-if="!auth.isAuthenticated.value" class="token-no-data">
+          Войдите, чтобы увидеть баланс токенов
+        </div>
+        <div v-else-if="isLoadingTokens" class="token-loading">
+          Загрузка балансов...
+        </div>
+        <div v-else-if="!hasTokenBalances" class="token-no-data">
+          Информация о балансе не доступна
+        </div>
+        <div v-else>
+          <div v-if="tokenBalances.eth" class="token-balance">
+            <span class="token-name">ETH:</span>
+            <span class="token-amount">{{ Number(tokenBalances.eth).toLocaleString() }}</span>
+            <span class="token-symbol">{{ TOKEN_CONTRACTS.eth.symbol }}</span>
+          </div>
+          <div v-if="tokenBalances.bsc" class="token-balance">
+            <span class="token-name">BSC:</span>
+            <span class="token-amount">{{ Number(tokenBalances.bsc).toLocaleString() }}</span>
+            <span class="token-symbol">{{ TOKEN_CONTRACTS.bsc.symbol }}</span>
+          </div>
+          <div v-if="tokenBalances.arbitrum" class="token-balance">
+            <span class="token-name">ARB:</span>
+            <span class="token-amount">{{ Number(tokenBalances.arbitrum).toLocaleString() }}</span>
+            <span class="token-symbol">{{ TOKEN_CONTRACTS.arbitrum.symbol }}</span>
+          </div>
+          <div v-if="tokenBalances.polygon" class="token-balance">
+            <span class="token-name">POL:</span>
+            <span class="token-amount">{{ Number(tokenBalances.polygon).toLocaleString() }}</span>
+            <span class="token-symbol">{{ TOKEN_CONTRACTS.polygon.symbol }}</span>
+          </div>
+        </div>
+      </div>
+      
+      <div v-if="isLoading">Загрузка данных пользователя...</div>
+      <div v-else-if="!auth.isAuthenticated.value">
+        <p>Для доступа к настройкам необходимо <button @click="goToHomeAndShowSidebar">войти</button>.</p>
+      </div>
+      <div v-else>
+        <p>Добро пожаловать в Настройки!</p>
+        
+        <div v-if="auth.isAdmin.value">
+          <p><strong>У вас полный доступ (Администратор).</strong></p>
+          <!-- Сюда будут добавляться полные настройки -->
+          <p>Здесь будут настройки системы, управление пользователями и т.д.</p>
+        </div>
+        <div v-else>
+          <p><strong>У вас ограниченный доступ.</strong></p>
+          <!-- Сюда будут добавляться ограниченные настройки -->
+          <p>Здесь будут настройки профиля, уведомлений и т.д.</p>
+        </div>
+        <!-- Общие настройки для всех авторизованных -->
+        <div class="general-settings">
+          <h3>Общие настройки</h3>
+          <label>
+            Язык интерфейса: 
+            <select v-model="selectedLanguage">
+              <option value="ru">Русский</option>
+              <option value="en">English</option> 
+            </select>
+          </label>
+        </div>
+      </div>
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount, computed } from 'vue';
+import { useAuth } from '../composables/useAuth';
+import { useRouter } from 'vue-router';
+import { getFromStorage, setToStorage } from '../utils/storage';
+import BaseLayout from '../components/BaseLayout.vue';
+import eventBus from '../utils/eventBus';
+import { TOKEN_CONTRACTS } from '../services/tokens';
+import { fetchTokenBalances } from '../services/tokens';
+
+const auth = useAuth();
+const router = useRouter();
+const isLoading = ref(true);
+const selectedLanguage = ref(getFromStorage('userLanguage', 'ru'));
+
+// Состояние для токенов
+const tokenBalances = ref({});
+const isLoadingTokens = ref(false);
+const hasTokenBalances = computed(() => {
+  return tokenBalances.value && 
+    Object.keys(tokenBalances.value).length > 0 && 
+    Object.values(tokenBalances.value).some(value => parseInt(value) > 0);
+});
+
+// Получаем данные об идентификаторах пользователя
+const identities = computed(() => auth.identities.value);
+
+// Вспомогательные функции
+const truncateAddress = (address) => {
+  if (!address) return '';
+  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+};
+
+const hasIdentityType = (type) => {
+  if (!identities.value) return false;
+  return identities.value.some((identity) => identity.provider === type);
+};
+
+const getIdentityValue = (type) => {
+  if (!identities.value) return null;
+  const identity = identities.value.find((identity) => identity.provider === type);
+  return identity ? identity.provider_id : null;
+};
+
+// Обновление балансов токенов
+const refreshTokenBalances = async () => {
+  if (!hasIdentityType('wallet')) return;
+  
+  isLoadingTokens.value = true;
+  try {
+    const walletAddress = getIdentityValue('wallet');
+    console.log('[SettingsView] Обновление балансов для адреса:', walletAddress);
+    
+    const balances = await fetchTokenBalances(walletAddress);
+    console.log('[SettingsView] Полученные балансы:', balances);
+    
+    tokenBalances.value = balances || {};
+  } catch (error) {
+    console.error('[SettingsView] Ошибка при получении балансов:', error);
+    tokenBalances.value = {};
+  } finally {
+    isLoadingTokens.value = false;
+  }
+};
+
+// Следим за изменениями в идентификаторах
+watch(() => identities.value, (newIdentities, oldIdentities) => {
+  if (hasIdentityType('wallet')) {
+    // Проверяем, появился ли новый идентификатор кошелька или изменился существующий
+    const newWalletId = getIdentityValue('wallet');
+    const oldWalletIdentity = oldIdentities ? oldIdentities.find(id => id.provider === 'wallet') : null;
+    const oldWalletId = oldWalletIdentity ? oldWalletIdentity.provider_id : null;
+    
+    if (newWalletId !== oldWalletId) {
+      console.log('[SettingsView] Обнаружено изменение идентификатора кошелька, обновляем балансы');
+      refreshTokenBalances();
+    }
+  }
+}, { deep: true });
+
+// Обработчик события изменения авторизации
+const handleAuthEvent = (eventData) => {
+  console.log('[SettingsView] Получено событие изменения авторизации:', eventData);
+  isLoading.value = false;
+  
+  // При изменении авторизации обновляем балансы
+  if (eventData.isAuthenticated) {
+    setTimeout(() => {
+      refreshTokenBalances(); // Небольшая задержка для обновления идентификаторов
+    }, 500);
+  }
+};
+
+// Сохраняем язык при изменении
+watch(selectedLanguage, (newLang) => {
+  setToStorage('userLanguage', newLang);
+  // TODO: Добавить логику для реальной смены языка интерфейса (например, через i18n)
+  console.log(`[Settings] Язык изменен на: ${newLang}`);
+});
+
+const goToHomeAndShowSidebar = () => {
+  setToStorage('showWalletSidebar', true);
+  router.push({ name: 'home' });
+};
+
+// Регистрация и очистка обработчика событий
+let unsubscribe = null;
+
+onMounted(() => {
+  console.log('[SettingsView] Компонент загружен');
+  isLoading.value = false;
+  
+  // Подписка на события авторизации
+  unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
+  
+  // Обновляем данные о балансе токенов при загрузке
+  if (auth.isAuthenticated.value && hasIdentityType('wallet')) {
+    refreshTokenBalances();
+  }
+});
+
+onBeforeUnmount(() => {
+  // Отписка от события при удалении компонента
+  if (unsubscribe) {
+    unsubscribe();
+  }
+});
+
+// Следим за состоянием авторизации для очистки данных при выходе
+watch(() => auth.isAuthenticated.value, (isAuth) => {
+  if (!isAuth) {
+    // Очищаем данные при выходе из системы
+    tokenBalances.value = {};
+  }
+});
+</script>
+
+<style scoped>
+.settings-view-container {
+  max-width: 1150px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  color: var(--color-dark);
+  margin-bottom: 20px;
+}
+
+p {
+  line-height: 1.6;
+  margin-bottom: 10px;
+}
+
+strong {
+ color: var(--color-primary);
+}
+
+.general-settings {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid var(--color-grey-light);
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+select {
+    padding: 8px;
+    border: 1px solid var(--color-grey);
+    border-radius: var(--radius-md);
+    margin-left: 10px;
+}
+
+button {
+  padding: 5px 10px;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  margin-left: 5px;
+}
+button:hover {
+  opacity: 0.9;
+}
+button:disabled {
+  background-color: var(--color-grey);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* Стили для блока информации о пользователе */
+.user-info-section {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-grey-light);
+}
+
+.user-info-item {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.user-info-label {
+  min-width: 100px;
+  font-weight: 500;
+}
+
+.user-info-value {
+  font-family: monospace;
+  padding: 5px 10px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-grey-light);
+}
+
+/* Стили для блока баланса токенов */
+.token-balances-section {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: var(--color-light);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-grey-light);
+}
+
+.token-balance {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.token-name {
+  min-width: 60px;
+  font-weight: 500;
+}
+
+.token-amount {
+  font-family: monospace;
+  padding: 5px 10px;
+  background-color: var(--color-white);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-grey-light);
+  margin-right: 10px;
+}
+
+.token-symbol {
+  color: var(--color-primary);
+  font-weight: 500;
+}
+
+.token-loading,
+.token-no-data {
+  margin: 15px 0;
+  padding: 10px;
+  text-align: center;
+  color: var(--color-grey-dark);
+  font-style: italic;
+}
+
+/* Удаляем стили для кнопки обновления баланса, поскольку больше не нужны */
+.token-action,
+.refresh-btn {
+  display: none;
+}
+
+.user-info-empty,
+.token-no-data {
+  margin: 15px 0;
+  padding: 10px;
+  text-align: center;
+  color: var(--color-grey-dark);
+  font-style: italic;
+}
+</style> 
\ No newline at end of file