diff --git a/main_dc/yalarba/easySite/easySite/app/pages/auth/login.vue b/main_dc/yalarba/easySite/easySite/app/pages/auth/login.vue
index d212e27..5ce8b8f 100644
--- a/main_dc/yalarba/easySite/easySite/app/pages/auth/login.vue
+++ b/main_dc/yalarba/easySite/easySite/app/pages/auth/login.vue
@@ -71,7 +71,7 @@ const onSubmit = handleSubmit(async (values) => {
   try {
     await auth.login(values)
     await navigateTo('/profile')
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
     console.error('Login error:', error)
 
@@ -93,7 +93,7 @@ const onSubmit = handleSubmit(async (values) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1rem;
+  padding: var(--space-md);
 }
 
 .auth-container {
@@ -106,82 +106,87 @@ const onSubmit = handleSubmit(async (values) => {
 }
 
 .card {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-light);
   overflow: hidden;
 }
 
 .card-header {
-  padding: 2rem 2rem 0;
+  padding: var(--space-xl) var(--space-xl) 0;
 }
 
 .card-body {
-  padding: 1.5rem 2rem;
+  padding: var(--space-lg) var(--space-xl);
 }
 
 .card-footer {
-  padding: 0 2rem 2rem;
+  padding: 0 var(--space-xl) var(--space-xl);
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-secondary);
 }
 
 .auth-title {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-family: var(--font-heading);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-semibold);
   color: var(--text-primary);
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--space-sm);
 }
 
 .auth-form {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--space-md);
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
+  gap: var(--space-xs);
 }
 
 .form-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  font-size: 0.875rem;
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
 }
 
 .form-input {
   width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  font-size: 0.875rem;
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-md);
+  font-size: var(--text-base);
+  background: var(--bg-primary);
+  color: var(--text-primary);
   transition: all 0.2s;
 }
 
 .form-input:focus {
   outline: none;
   border-color: var(--primary-500);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
 }
 
 .form-input.error {
-  border-color: #dc2626;
-  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+  border-color: var(--error-500);
+  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1);
 }
 
 .error-message {
-  color: #dc2626;
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
+  color: var(--error-500);
+  font-size: var(--text-sm);
+  margin-top: var(--space-xs);
   display: block;
 }
 
 .auth-button {
   width: 100%;
-  margin-top: 0.5rem;
-  padding: 0.75rem;
-  font-size: 0.875rem;
+  margin-top: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  font-size: var(--text-base);
 }
 
 .auth-button:disabled {
@@ -191,25 +196,27 @@ const onSubmit = handleSubmit(async (values) => {
 
 .auth-footer-text {
   color: var(--text-secondary);
-  margin-bottom: 1rem;
-  font-size: 0.875rem;
+  margin-bottom: var(--space-md);
+  font-size: var(--text-sm);
 }
 
 .auth-link {
   color: var(--primary-600);
-  font-weight: 500;
+  font-weight: var(--font-medium);
   text-decoration: none;
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
+  transition: color 0.2s;
 }
 
 .auth-link:hover {
   color: var(--primary-700);
+  text-decoration: underline;
 }
 
 .home-link {
   display: inline-block;
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
+  margin-top: var(--space-sm);
+  font-size: var(--text-sm);
 }
 
 /* Адаптивность для мобильных устройств */
@@ -219,38 +226,63 @@ const onSubmit = handleSubmit(async (values) => {
   }
 
   .card-header {
-    padding: 1.5rem 1.5rem 0;
+    padding: var(--space-lg) var(--space-lg) 0;
   }
 
   .card-body {
-    padding: 1rem 1.5rem;
+    padding: var(--space-md) var(--space-lg);
   }
 
   .card-footer {
-    padding: 0 1.5rem 1.5rem;
+    padding: 0 var(--space-lg) var(--space-lg);
   }
 
   .auth-title {
-    font-size: 1.25rem;
+    font-size: var(--text-xl);
   }
 }
 
 /* Для очень маленьких экранов */
 @media (max-width: 380px) {
   .auth-page {
-    padding: 0.5rem;
+    padding: var(--space-sm);
   }
 
   .card-header {
-    padding: 1rem 1rem 0;
+    padding: var(--space-md) var(--space-md) 0;
   }
 
   .card-body {
-    padding: 0.75rem 1rem;
+    padding: var(--space-sm) var(--space-md);
   }
 
   .card-footer {
-    padding: 0 1rem 1rem;
+    padding: 0 var(--space-md) var(--space-md);
   }
 }
+
+/* Темная тема специфические стили */
+:global([data-theme="dark"]) .auth-page {
+  background: var(--bg-primary);
+}
+
+:global([data-theme="dark"]) .card {
+  background: var(--bg-secondary);
+  border-color: var(--border-light);
+}
+
+:global([data-theme="dark"]) .card-footer {
+  background: var(--bg-tertiary);
+}
+
+:global([data-theme="dark"]) .form-input {
+  background: var(--bg-primary);
+  border-color: var(--border-medium);
+  color: var(--text-primary);
+}
+
+:global([data-theme="dark"]) .form-input:focus {
+  border-color: var(--primary-400);
+  box-shadow: 0 0 0 3px rgb(56 189 248 / 0.1);
+}
 </style>
\ No newline at end of file
diff --git a/main_dc/yalarba/easySite/easySite/app/pages/auth/register.vue b/main_dc/yalarba/easySite/easySite/app/pages/auth/register.vue
index 005a109..fa107e2 100644
--- a/main_dc/yalarba/easySite/easySite/app/pages/auth/register.vue
+++ b/main_dc/yalarba/easySite/easySite/app/pages/auth/register.vue
@@ -111,7 +111,7 @@ const onSubmit = handleSubmit(async (values) => {
     await auth.register(values)
     alert('Регистрация выполнена успешно!')
     await navigateTo('/auth/login')
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
     console.error('Registration error:', error)
 
@@ -133,7 +133,7 @@ const onSubmit = handleSubmit(async (values) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1rem;
+  padding: var(--space-md);
 }
 
 .auth-container {
@@ -146,88 +146,93 @@ const onSubmit = handleSubmit(async (values) => {
 }
 
 .card {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-light);
   overflow: hidden;
 }
 
 .card-header {
-  padding: 2rem 2rem 0;
+  padding: var(--space-xl) var(--space-xl) 0;
 }
 
 .card-body {
-  padding: 1.5rem 2rem;
+  padding: var(--space-lg) var(--space-xl);
 }
 
 .card-footer {
-  padding: 0 2rem 2rem;
+  padding: 0 var(--space-xl) var(--space-xl);
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-secondary);
 }
 
 .auth-title {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-family: var(--font-heading);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-semibold);
   color: var(--text-primary);
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--space-sm);
 }
 
 .auth-form {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--space-md);
 }
 
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  gap: var(--space-md);
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
+  gap: var(--space-xs);
 }
 
 .form-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  font-size: 0.875rem;
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
 }
 
 .form-input {
   width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  font-size: 0.875rem;
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-md);
+  font-size: var(--text-base);
+  background: var(--bg-primary);
+  color: var(--text-primary);
   transition: all 0.2s;
 }
 
 .form-input:focus {
   outline: none;
   border-color: var(--primary-500);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
 }
 
 .form-input.error {
-  border-color: #dc2626;
-  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+  border-color: var(--error-500);
+  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1);
 }
 
 .error-message {
-  color: #dc2626;
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
+  color: var(--error-500);
+  font-size: var(--text-sm);
+  margin-top: var(--space-xs);
   display: block;
 }
 
 .auth-button {
   width: 100%;
-  margin-top: 0.5rem;
-  padding: 0.75rem;
-  font-size: 0.875rem;
+  margin-top: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  font-size: var(--text-base);
 }
 
 .auth-button:disabled {
@@ -237,25 +242,27 @@ const onSubmit = handleSubmit(async (values) => {
 
 .auth-footer-text {
   color: var(--text-secondary);
-  margin-bottom: 1rem;
-  font-size: 0.875rem;
+  margin-bottom: var(--space-md);
+  font-size: var(--text-sm);
 }
 
 .auth-link {
   color: var(--primary-600);
-  font-weight: 500;
+  font-weight: var(--font-medium);
   text-decoration: none;
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
+  transition: color 0.2s;
 }
 
 .auth-link:hover {
   color: var(--primary-700);
+  text-decoration: underline;
 }
 
 .home-link {
   display: inline-block;
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
+  margin-top: var(--space-sm);
+  font-size: var(--text-sm);
 }
 
 /* Адаптивность для мобильных устройств */
@@ -265,43 +272,68 @@ const onSubmit = handleSubmit(async (values) => {
   }
 
   .card-header {
-    padding: 1.5rem 1.5rem 0;
+    padding: var(--space-lg) var(--space-lg) 0;
   }
 
   .card-body {
-    padding: 1rem 1.5rem;
+    padding: var(--space-md) var(--space-lg);
   }
 
   .card-footer {
-    padding: 0 1.5rem 1.5rem;
+    padding: 0 var(--space-lg) var(--space-lg);
   }
 
   .form-row {
     grid-template-columns: 1fr;
-    gap: 0.75rem;
+    gap: var(--space-md);
   }
 
   .auth-title {
-    font-size: 1.25rem;
+    font-size: var(--text-xl);
   }
 }
 
 /* Для очень маленьких экранов */
 @media (max-width: 380px) {
   .auth-page {
-    padding: 0.5rem;
+    padding: var(--space-sm);
   }
 
   .card-header {
-    padding: 1rem 1rem 0;
+    padding: var(--space-md) var(--space-md) 0;
   }
 
   .card-body {
-    padding: 0.75rem 1rem;
+    padding: var(--space-sm) var(--space-md);
   }
 
   .card-footer {
-    padding: 0 1rem 1rem;
+    padding: 0 var(--space-md) var(--space-md);
   }
 }
+
+/* Темная тема специфические стили */
+:global([data-theme="dark"]) .auth-page {
+  background: var(--bg-primary);
+}
+
+:global([data-theme="dark"]) .card {
+  background: var(--bg-secondary);
+  border-color: var(--border-light);
+}
+
+:global([data-theme="dark"]) .card-footer {
+  background: var(--bg-tertiary);
+}
+
+:global([data-theme="dark"]) .form-input {
+  background: var(--bg-primary);
+  border-color: var(--border-medium);
+  color: var(--text-primary);
+}
+
+:global([data-theme="dark"]) .form-input:focus {
+  border-color: var(--primary-400);
+  box-shadow: 0 0 0 3px rgb(56 189 248 / 0.1);
+}
 </style>
\ No newline at end of file